/* ...existing code... */

:root{
    --bg: #f5f7fb;
    --card: #ffffff;
    --muted: #000000;
    --accent: #2563eb;
    --accent-2: #1d4ed8;
    --border: #e6e9ef;
    --stripe: #fbfdff;
    --header-gradient: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
    --radius: 8px;
    --shadow: 0 6px 18px rgba(16,24,40,0.08);
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html,body{
    height:100%;
    margin:0;
    background:var(--bg);
    color:#0f172a;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

header {
    max-width: 1100px;
    margin: 18px auto;
    padding: 20px 16px 0px;
    /* main과 동일한 좌우 패딩(16px)으로 맞춤 */
    text-align: left;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
    color: var(--accent-2);
    font-weight: 700;
}

/* container spacing */
main{
    max-width:1100px;
    margin:18px auto;
    padding:0 16px 36px;
}

/* inputs / buttons (small polish for page controls) */
input[type="text"], input[type="number"]{
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--card);
    outline:none;
    transition:box-shadow .15s, border-color .15s;
    box-shadow:none;
}

input[type="text"]:focus, input[type="number"]:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(37,99,235,0.08);
}

button{
    background:var(--accent);
    color:white;
    border:none;
    padding:10px 14px;
    border-radius:6px;
    cursor:pointer;
    font-weight:600;
}
button:hover{ background:var(--accent-2); }

/* table wrapper for small screens */
table{
    width:100%;
    max-width:100%;
    border-collapse:collapse;
    background:var(--card);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    table-layout:fixed;
}

/* header style */
thead th{
    padding:12px 16px;
    text-align:left;
    color: #fff;
    font-weight:700;
    font-size:0.95rem;
    background: var(--header-gradient);
    border-bottom:2px solid rgba(255,255,255,0.06);
}

/* body cells */
tbody td{
    padding:12px 16px;
    font-size:0.94rem;
    color:#0b1220;
    border-bottom:1px solid var(--border);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* zebra stripes */
tbody tr:nth-child(even){
    background:var(--stripe);
}

/* hover highlight */
tbody tr:hover{
    background:linear-gradient(90deg, rgba(37,99,235,0.04), rgba(37,99,235,0.02));
}

/* small note / result display */
#result-display{
    margin:12px 0;
    padding:10px 14px;
    border-radius:8px;
    background:linear-gradient(180deg, #fff, #fbfdff);
    border:1px solid var(--border);
    color:var(--muted);
    max-width:920px;
}

#result-num{
    color:var(--muted);
    font-weight:600;
}

/* responsive tweaks */
@media (max-width: 720px){
    thead th, tbody td{
        padding:10px 8px;
        font-size:0.9rem;
    }
    header h1{ font-size:1rem; }
    button{ padding:9px 12px; }
    /* allow horizontal scrolling if table doesn't fit */
    table{
        display:block;
        overflow:auto;
        white-space:nowrap;
    }
}

.th-toggle {
    margin-left: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: #ffffff;
    background-color: #000000;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 6px;
    transition: transform .18s ease, color .12s;
}

.th-toggle:hover {
    transform: translateY(-1px);
    background-color: #292929;
    color:#ffffff;
}

/* 표 접기 상태: tbody 숨기기 */
table.collapsed tbody {
    display: none;
}

/* 토글 버튼 회전 및 시각 표시 */
.th-toggle {
    transition: transform .18s ease, color .12s;
}

.th-toggle.collapsed {
    transform: rotate(-180deg);
}

/* 선택적으로 접힌 상태에서 테이블 높이/그림자 정리 */
table.collapsed {
    box-shadow: none;
}

/* 표 접기 상태: tbody 숨기기 */
table.collapsed tbody {
    display: none;
}

/* 토글 버튼 회전 및 시각 표시 */
.th-toggle {
    transition: transform .18s ease, color .12s;
}

.th-toggle.collapsed {
    transform: rotate(-180deg);
}

/* 선택적으로 접힌 상태에서 테이블 높이/그림자 정리 */
table.collapsed {
    box-shadow: none;
}