/* 조합 페이지 — 읽는 페이지라 도구 화면(app.css)과 다른 리듬을 쓴다.
   색 토큰은 app.css와 동일하게 맞춘다. */
:root{
  --bg:#EDF2F3; --panel:#FFFFFF;
  --ink:#132220; --ink-2:#4A5C59; --muted:#7C8E8B; --line:#D8E2E2;
  --cold:#1F6F6A; --cold-soft:#E3F0EF;
  --warm:#C9480C;
  --ready:#F4FAF8; --ready-line:#9CCFC6;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.65;letter-spacing:-.01em;
  padding-bottom:60px;
}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}

.adslot{margin:0 auto;padding:14px 0 0;text-align:center;overflow:hidden}
.adslot[hidden]{display:none}

.crumb{font-size:.82rem;color:var(--muted);padding:18px 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--cold);text-decoration:underline}

header{padding:18px 0 14px}
h1{font-size:1.62rem;font-weight:800;letter-spacing:-.035em;line-height:1.28;text-wrap:balance}

.lead{font-size:1.02rem;margin-top:6px}
p{margin-top:12px;color:var(--ink-2)}
p b{color:var(--ink);font-weight:700}

/* 표 — 이 페이지의 본체 */
.tablebox{margin-top:22px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:520px}
caption{text-align:left;padding:14px 16px 10px;font-size:.84rem;color:var(--muted)}
thead th{text-align:left;font-size:.78rem;font-weight:600;color:var(--muted);
  padding:8px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody th{text-align:left;font-weight:700;padding:11px 14px;vertical-align:top}
tbody td{padding:11px 14px;vertical-align:top;color:var(--ink-2)}
tbody tr+tr th,tbody tr+tr td{border-top:1px solid var(--line)}
td.t{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
td.t span{font-weight:700}
td.g{white-space:nowrap;color:var(--muted);font-size:.86rem}
td.m i{font-style:normal;color:var(--cold);font-weight:600}
tbody tr.ready{background:var(--ready)}
tbody tr.ready th{box-shadow:inset 3px 0 0 var(--ready-line)}

.note{font-size:.85rem;color:var(--muted);margin-top:12px}
.note i{font-style:normal;color:var(--cold);font-weight:600}

.cta{display:inline-block;margin-top:24px;background:var(--cold);color:#fff;
  text-decoration:none;font-weight:700;font-size:.95rem;padding:13px 22px;border-radius:11px}
.cta:hover{filter:brightness(1.08)}
.cta:focus-visible,a:focus-visible{outline:2px solid var(--warm);outline-offset:2px}

.rel{margin-top:38px;padding-top:22px;border-top:1px solid var(--line)}
.rel h2,.hub h2{font-size:1rem;font-weight:700;margin-bottom:12px}
.rel ul,.hub ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.rel a,.hub a{display:inline-block;background:var(--panel);border:1px solid var(--line);
  border-radius:99px;padding:7px 14px;font-size:.88rem;color:var(--ink);text-decoration:none}
.rel a:hover,.hub a:hover{border-color:var(--cold);color:var(--cold)}
.rel span,.hub span{color:var(--muted);font-size:.8rem;margin-left:3px}

.hub{margin-top:24px;display:flex;flex-direction:column;gap:26px}
.hub section h2{color:var(--cold)}

footer{max-width:820px;margin:44px auto 0;padding:20px 16px 0;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted);line-height:1.8}
footer a{color:var(--cold);font-weight:600;text-decoration:none}
footer a:hover{text-decoration:underline}

@media (max-width:560px){
  h1{font-size:1.38rem}
  .lead{font-size:.96rem}
}