/* ===== 디자인 토큰 ===== */
    :root{
      --bg:#f7f8fa; --card:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb;
      --blue:#2563eb; --blue-weak:#eff6ff; --red:#b91c1c; --green:#047857; --orange:#b45309;
      --zebra:#fafafa; --shadow:0 4px 20px rgba(0,0,0,.05);
    }
    *,*::before,*::after{ box-sizing:border-box; }
    html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; line-height:1.65;}
    a{ color:var(--blue); text-decoration:none; }
    a:hover{ text-decoration:underline; }

    /* 강조 유틸 */
    .em-red{ color:var(--red); font-weight:900; }
    .em-blue{ color:var(--blue); font-weight:800; }
    .em-green{ color:var(--green); font-weight:800; }
    .em-orange{ color:var(--orange); font-weight:800; }
    .strong{ font-weight:800; }

    /* 레이아웃 */
    .wrap{ max-width:1100px; margin:0 auto; padding:28px 16px 72px; }
    header.page{ text-align:center; margin:8px 0 22px; }
    .brand{ color:var(--muted); margin:0 0 6px 0; font-size:15px; letter-spacing:.02em; }
    h1.title{ margin:0; font-size:28px; font-weight:900; }
    p.lead{ margin:10px 0 0 0; color:var(--muted); }

    /* 카드/섹션 */
    .card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px; margin-top:16px; box-shadow:var(--shadow); }
    .h2{ font-size:20px; font-weight:850; margin:0 0 12px 0; color:var(--blue); }
    .badge{ display:inline-block; margin-left:8px; font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:#fff; vertical-align:middle; }

    /* 표 공통 */
    .table-wrap{ margin-top:12px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
    .scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table{ width:100%; border-collapse:collapse; min-width:860px; }
    caption{ text-align:left; padding:12px 16px; font-weight:900; background:#fafafa; border-bottom:1px solid var(--border); }
    thead th{ text-align:left; font-weight:800; background:#f3f4f6; border-bottom:1px solid var(--border); padding:12px 14px; position:sticky; top:0; z-index:1; white-space:nowrap; }
    tbody tr:nth-child(odd) td{ background:var(--zebra); }
    tbody td{ border-bottom:1px solid var(--border); padding:12px 14px; vertical-align:top; }
    tbody tr:last-child td{ border-bottom:none; }

    /* 콜아웃 */
    .callout{ margin-top:14px; padding:14px 16px; background:var(--blue-weak); border:1px solid #dbeafe; border-radius:12px; }
    .callout .title{ margin:0 0 6px 0; font-weight:900; color:var(--blue); }

    /* 리스트 */
    .list{ margin:8px 0 0 0; padding-left:18px; }
    .list li{ margin:6px 0; }

    /* 반응형 */
    @media (min-width:768px){ h1.title{ font-size:34px; } }