/* ============================================================
   독립할까? — 문서 페이지 공용 스타일
   계산기(index.html)와 같은 토큰 체계를 쓰되, 읽기용으로 단순화
   ============================================================ */

:root{
  --paper:#EEF1F0;
  --surface:#FAFBFA;
  --surface-2:#F1F4F3;
  --ink:#14202A;
  --ink-2:#33434F;
  --muted:#5F6E78;
  --faint:#8A98A1;
  --line:#D3DAD9;
  --line-2:#E2E7E6;
  --accent:#1F6383;
  --accent-soft:#DDE9EF;
  --warn:#A8761B;
  --warn-soft:#F2E8D4;
  --radius:10px;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,"Liberation Mono",monospace;
  --sans:"Pretendard","Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",system-ui,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E161D; --surface:#151F28; --surface-2:#1B262F;
    --ink:#E3EAE9; --ink-2:#C2CDD2; --muted:#94A3AC; --faint:#71828C;
    --line:#2A3742; --line-2:#222E38;
    --accent:#74B9DA; --accent-soft:#15303F;
    --warn:#D9A94A; --warn-soft:#302713;
  }
}
:root[data-theme="dark"]{
  --paper:#0E161D; --surface:#151F28; --surface-2:#1B262F;
  --ink:#E3EAE9; --ink-2:#C2CDD2; --muted:#94A3AC; --faint:#71828C;
  --line:#2A3742; --line-2:#222E38;
  --accent:#74B9DA; --accent-soft:#15303F;
  --warn:#D9A94A; --warn-soft:#302713;
}
:root[data-theme="light"]{
  --paper:#EEF1F0; --surface:#FAFBFA; --surface-2:#F1F4F3;
  --ink:#14202A; --ink-2:#33434F; --muted:#5F6E78; --faint:#8A98A1;
  --line:#D3DAD9; --line-2:#E2E7E6;
  --accent:#1F6383; --accent-soft:#DDE9EF;
  --warn:#A8761B; --warn-soft:#F2E8D4;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}

.wrap{max-width:760px;margin:0 auto;padding:0 20px 80px;}

/* ---------- 상단 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.topbar a.home{
  font-weight:800;font-size:17px;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
}
.topbar a.home:hover{color:var(--accent);}
.topbar nav{display:flex;gap:14px;flex-wrap:wrap;}
.topbar nav a{
  font-size:13px;color:var(--muted);text-decoration:none;
}
.topbar nav a:hover{color:var(--accent);text-decoration:underline;}
.topbar nav a[aria-current="page"]{color:var(--accent);font-weight:700;}
.topbar button#btnTheme{
  padding:5px 11px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:600;white-space:nowrap;
}
.topbar button#btnTheme:hover{background:var(--surface-2);border-color:var(--faint);color:var(--ink);}

/* ---------- 본문 ---------- */
.doc{padding-top:34px;}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:600;
}
h1{
  margin:8px 0 6px;font-size:30px;font-weight:800;
  letter-spacing:-.025em;line-height:1.25;text-wrap:balance;
}
.lede{margin:0 0 6px;font-size:16px;color:var(--muted);line-height:1.7;}
.updated{
  font-family:var(--mono);font-size:11.5px;color:var(--faint);
  padding-bottom:22px;border-bottom:1px solid var(--line-2);margin-bottom:8px;
}

h2{
  margin:38px 0 10px;font-size:19px;font-weight:700;
  letter-spacing:-.02em;line-height:1.35;text-wrap:balance;
}
h3{margin:26px 0 6px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;}
p{margin:0 0 14px;}
ul,ol{margin:0 0 16px;padding-left:20px;}
li{margin:5px 0;}
li::marker{color:var(--faint);}
a{color:var(--accent);}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
strong,b{font-weight:700;color:var(--ink);}
code{
  font-family:var(--mono);font-size:.9em;background:var(--surface-2);
  padding:1px 5px;border-radius:4px;border:1px solid var(--line-2);
}
hr{border:0;border-top:1px solid var(--line-2);margin:34px 0;}

.callout{
  margin:20px 0;padding:14px 16px;
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  background:var(--surface);font-size:14.5px;line-height:1.7;
}
.callout.warn{border-left-color:var(--warn);background:var(--warn-soft);}
.callout p:last-child{margin-bottom:0;}
.callout strong{display:block;margin-bottom:4px;}

.tablewrap{overflow-x:auto;margin:18px 0;}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px;}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top;}
th{
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0;}

.backlink{
  display:inline-flex;align-items:center;gap:6px;margin-top:38px;
  padding:9px 15px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink-2);
  font-size:13.5px;font-weight:600;text-decoration:none;
}
.backlink:hover{background:var(--surface-2);border-color:var(--faint);color:var(--ink);}

.foot{
  margin-top:46px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;color:var(--faint);line-height:1.8;
}
.foot nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
.foot nav a{color:var(--muted);text-decoration:none;}
.foot nav a:hover{color:var(--accent);text-decoration:underline;}

/* ---------- 광고 자리 ---------- */
/* 애드센스 승인 전이므로 HTML 에 hidden 이 붙어 있습니다. 승인 후 hidden 만 지우세요.
   카드로 오인되지 않게 그림자 없이 점선만 씁니다. */
.ad-slot[hidden]{display:none !important;}
.ad-foot{margin-top:48px;}
.ad-label{
  display:block;margin-bottom:6px;
  font-size:11px;line-height:1.4;letter-spacing:.08em;color:var(--faint);
}
.ad-box{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:250px;
  border:1px dashed var(--line-2);border-radius:var(--radius);
  background:var(--surface-2);
}
@media (min-width:769px){ .ad-box{min-height:200px;} }
@media print{ .ad-slot,.no-print{display:none !important;} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}