/* ===== 디자인 토큰 ===== */
    :root{
      --bg:#f7f8fa;
      --card:#ffffff;
      --text:#1a1f36;
      --muted:#6b7280;
      --border:#e5e7eb;
      --accent:#2563eb;        /* 파랑 포인트 */
      --accent-weak:#eff6ff;
      --red:#b91c1c;           /* 강조 빨강 */
      --green:#047857;         /* 강조 초록 */
      --orange:#b45309;        /* 강조 주황 */
      --pill:#111827;
    }
    *,*::before,*::after{ box-sizing:border-box; }
    html,body{ margin:0; padding:0; }
    body{
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
      color:var(--text);
      background:var(--bg);
      line-height:1.65;
    }

    /* ===== 레이아웃 ===== */
    .wrap{ max-width:1100px; margin:0 auto; padding:28px 16px 72px; }
    header.page{
      text-align:center; margin-top:16px; margin-bottom:22px;
    }
    .brand{ margin:0 0 8px 0; color:var(--muted); 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:0 4px 20px rgba(0,0,0,.04);
    }
    .h2{ font-size:20px; font-weight:800; margin:0 0 12px 0; }
    .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;
    }

    /* ===== 강조 텍스트 ===== */
    .em-red{ color:var(--red); font-weight:900; }
    .em-blue{ color:var(--accent); font-weight:800; }
    .em-green{ color:var(--green); font-weight:800; }
    .strong{ font-weight:800; }

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

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

    /* ===== 표 컨테이너 ===== */
    .table-wrap{
      margin-top:14px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff;
    }
    .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    table{ width:100%; border-collapse:collapse; min-width:820px; }
    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 td{ border-bottom:1px solid var(--border); padding:12px 14px; vertical-align:top; }
    tbody tr:last-child td{ border-bottom:none; }

    /* ===== 필(색상 라벨) ===== */
    .pill{
      display:inline-flex; align-items:center; gap:6px;
      padding:2px 8px; border-radius:999px; font-size:12px; font-weight:800; color:#fff;
      background:var(--pill);
    }
    .pill.low{ background:#6b7280; }     /* 회색 */
    .pill.med{ background:#b45309; }     /* 주황 */
    .pill.high{ background:#047857; }    /* 초록 */

    /* ===== 보조 텍스트 ===== */
    .note{ color:var(--muted); font-size:.95rem; margin-top:8px; }

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