/* 저작권 확인 안내 — 본문 페이지 공통 스타일
   색·글자크기·행간·버튼높이는 /tool/ 과 같은 토큰을 쓴다.
   근거: 2026-08-17 디자인 회의 4장(정부24 실측값) */
:root{
  --c-primary:#256EF4;
  --c-primary-dark:#1B57C4;
  --c-text:#1E2124;
  --c-muted:#5F6368;
  --c-bg:#FFFFFF;
  --c-bg-alt:#F5F6F8;
  --c-border:#E1E3E6;
  --c-border-ui:#8A8F94;
  --c-border-strong:#767B80;
  --c-link:#1B57C4;
  --c-warn:#B3261E;
  --c-ok:#1E7B34;
  --fs-body:17px;
  --fs-small:15px;
  --lh:1.7;
  --sp1:4px; --sp2:8px; --sp3:16px; --sp4:24px; --sp5:32px; --sp6:48px;
  --btn-h:48px;
  --radius:8px;
  --maxw:720px;
  --font:"Pretendard GOV","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",Dotum,돋움,sans-serif;
  color-scheme:light dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh);
  color:var(--c-text);background:var(--c-bg-alt);-webkit-text-size-adjust:100%;
}
body,main *{overflow-wrap:anywhere;word-break:break-word}

/* ── 상단 내비 ── */
.topbar{background:var(--c-bg);border-bottom:1px solid var(--c-border)}
.topbar .in{max-width:var(--maxw);margin:0 auto;padding:10px var(--sp3);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp3)}
.topbar .brand{font-weight:700;color:var(--c-text);text-decoration:none;font-size:var(--fs-small)}
.topbar nav{display:flex;flex-wrap:wrap;gap:var(--sp3)}
.topbar nav a{color:var(--c-link);font-size:var(--fs-small);text-decoration:none;
  display:inline-block;min-height:28px;line-height:28px}
.topbar nav a:hover{text-decoration:underline}
.topbar nav a[aria-current=page]{color:var(--c-text);font-weight:700;text-decoration:underline}

.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--sp4) var(--sp3) var(--sp6)}
h1{font-size:27px;line-height:1.35;margin:0 0 var(--sp3)}
h2{font-size:21px;line-height:1.4;margin:var(--sp6) 0 var(--sp3);
   padding-bottom:var(--sp2);border-bottom:2px solid var(--c-border-strong)}
h3{font-size:18px;line-height:1.45;margin:var(--sp5) 0 var(--sp2)}
p{margin:0 0 var(--sp3)}
a{color:var(--c-link)}
main a{display:inline}
strong{font-weight:700}
ul,ol{margin:0 0 var(--sp3);padding-left:1.35em}
li{margin-bottom:var(--sp2)}
.lead{font-size:18px;color:var(--c-text);margin-bottom:var(--sp4)}
.updated{font-size:var(--fs-small);color:var(--c-muted);margin:0 0 var(--sp4)}

/* ── 박스 ── */
.card{background:var(--c-bg);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:var(--sp4) var(--sp3);margin:0 0 var(--sp4)}
.notice{background:var(--c-bg);border:1px solid var(--c-border-strong);
  border-left:4px solid var(--c-link);border-radius:var(--radius);
  padding:var(--sp3);margin:0 0 var(--sp4);font-size:var(--fs-small)}
.warn{border-left-color:var(--c-warn)}
.quote{background:var(--c-bg);border:1px solid var(--c-border-strong);border-radius:var(--radius);
  padding:var(--sp3);margin:0 0 var(--sp3)}
.quote p{margin:0 0 var(--sp2)}
.quote p:last-child{margin:0}
.quote .src{font-size:13px;color:var(--c-muted);line-height:1.5}
blockquote{margin:0 0 var(--sp2);padding-left:var(--sp3);border-left:3px solid var(--c-border-ui);
  color:var(--c-text)}

/* ── 목록 ── */
.steps{list-style:none;padding:0;counter-reset:s}
.steps>li{counter-increment:s;position:relative;padding:0 0 var(--sp3) 40px;margin:0 0 var(--sp3)}
.steps>li::before{content:counter(s);position:absolute;left:0;top:2px;
  width:28px;height:28px;border-radius:50%;background:var(--c-link);color:#fff;
  font-size:15px;font-weight:700;line-height:28px;text-align:center}
.chk{list-style:none;padding:0}
.chk li{padding:var(--sp2) 0 var(--sp2) 28px;position:relative;
  border-bottom:1px solid var(--c-border)}
.chk li::before{content:"☐";position:absolute;left:2px;top:var(--sp2);font-size:18px}
.nots{list-style:none;padding:0;margin:0 0 var(--sp4)}
.nots li{padding:var(--sp2) 0 var(--sp2) 28px;position:relative;font-size:var(--fs-small)}
.nots li::before{content:"×";position:absolute;left:8px;top:var(--sp2);color:var(--c-warn);font-weight:700}
.nots li.yes::before{content:"✓";color:var(--c-ok)}

/* ── 표 ── */
.tw{overflow-x:auto;margin:0 0 var(--sp4);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--fs-small);background:var(--c-bg)}
th,td{border:1px solid var(--c-border-strong);padding:10px var(--sp2);
  text-align:left;vertical-align:top;line-height:1.55}
th{background:var(--c-bg-alt);font-weight:700}
caption{caption-side:bottom;font-size:13px;color:var(--c-muted);text-align:left;padding-top:var(--sp2)}

/* ── 카드 링크 ── */
.cards{display:grid;gap:var(--sp3);grid-template-columns:1fr;margin:0 0 var(--sp4);padding:0;list-style:none}
@media (min-width:560px){.cards{grid-template-columns:1fr 1fr}}
.cards li{margin:0}
.cards a{display:block;height:100%;background:var(--c-bg);
  border:1px solid var(--c-border-strong);border-radius:var(--radius);
  padding:var(--sp3);text-decoration:none;color:var(--c-text)}
.cards a:hover{border-color:var(--c-link);box-shadow:inset 0 0 0 1px var(--c-link)}
.cards b{display:block;color:var(--c-link);font-size:18px;margin-bottom:var(--sp1)}
.cards span{display:block;font-size:var(--fs-small);color:var(--c-muted);line-height:1.55}

.btn-sub{display:inline-block;min-height:var(--btn-h);line-height:calc(var(--btn-h) - 2px);
  padding:0 var(--sp4);font-size:var(--fs-body);font-weight:700;text-align:center;text-decoration:none;
  color:var(--c-link);background:var(--c-bg);
  border:1px solid var(--c-border-strong);border-radius:var(--radius)}
.btn-sub:hover{border-color:var(--c-link)}

details{border:1px solid var(--c-border-strong);border-radius:var(--radius);
  background:var(--c-bg);padding:var(--sp2) var(--sp3);margin:0 0 var(--sp3)}
summary{cursor:pointer;font-weight:700;padding:var(--sp2) 0;touch-action:manipulation}
details[open] summary{margin-bottom:var(--sp2)}

/* ── 초점 ── */
:focus-visible{outline:3px solid var(--c-link);outline-offset:2px}
a:focus,button:focus,summary:focus{outline:3px solid var(--c-link);outline-offset:2px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),
summary:focus:not(:focus-visible){outline:none}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:var(--sp2) var(--sp3);background:var(--c-link);color:#fff}

/* ── 푸터 ── */
.site-foot{max-width:var(--maxw);margin:var(--sp6) auto 0;
  padding:var(--sp4) var(--sp3) var(--sp5);border-top:1px solid var(--c-border);
  font-size:var(--fs-small);color:var(--c-muted);line-height:1.65}
.site-foot p{margin:0 0 var(--sp2)}
.site-foot .foot-nav a{color:var(--c-link);margin:0 2px;
  display:inline-block;min-height:24px;line-height:24px}

/* ══ 광고 자리 ═══════════════════════════════════════════════
   ★ 자리표시 문구를 화면에 두지 않는다 (심사 반려 사유)
   ★ 링크·버튼 바로 옆에 붙이지 않는다
   ★ 승인 전(ADS_CLIENT 비어 있음)에는 0px — 화면에 흔적이 없다 */
.ad{display:block;margin:var(--sp6) auto;text-align:center;overflow:hidden}
.ad:empty{display:none}
.ad ins{display:block}
.ad-label{display:block;font-size:12px;color:var(--c-muted);letter-spacing:.04em;margin-bottom:6px}
/* ★ 광고 단위 ID 가 채워져 실제로 ins 가 들어간 자리에만 .ad-live 가 붙는다.
   그 전에는 «광고» 라벨조차 화면에 없다 — 빈 광고 자리는 심사 반려 사유다. */
.ad{display:none}
.ad.ad-live{display:block}

/* ── 다크 모드 ── */
@media (prefers-color-scheme:dark){
  :root{
    --c-bg:#1B1E24; --c-bg-alt:#111318;
    --c-text:#E8EAED;
    --c-muted:#A8ADB4;
    --c-primary:#7EA9FF; --c-primary-dark:#5C8CE8;
    --c-border:#3A3F46; --c-border-ui:#6B727B; --c-border-strong:#6B727B;
    --c-link:#7EA9FF; --c-warn:#F2B8B5; --c-ok:#7BD98F;
  }
  .steps>li::before{color:#0B1020}
  th{background:#232830}
}

/* ── 인쇄 ── */
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000;font-size:11pt}
  .topbar,.ad,.ad-label,.noprint{display:none !important}
  .wrap{max-width:none;padding:0}
  a{color:#000;text-decoration:underline}
  .tw{overflow:visible}
  table,.quote,.notice,.card{break-inside:avoid;page-break-inside:avoid}
  h2,h3{break-after:avoid;page-break-after:avoid}
}