/* poso.kr — 공통 스타일 (외부 프레임워크 없음, 단일 파일) */
:root{
  --ink:#111827; --muted:#5b6270; --line:#e5e7eb; --soft:#f7f8fa;
  --navy:#12233a; --navy-2:#1d3a5c; --gold:#d98324; --gold-2:#f6cd9a;
  --max:820px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:#fff; line-height:1.75; word-break:keep-all;
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
  font-size:16px;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:10;border:2px solid var(--gold)}

/* 헤더 */
header.site{background:var(--navy);color:#fff}
header.site .bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.logo{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.04em;font-size:.95rem;white-space:nowrap}
.logo span{color:var(--gold-2)}
.menu{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:.88rem}
.menu a{color:#cfd8e3;text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.menu a:hover{color:#fff}
.menu a.on{color:#fff;border-bottom-color:var(--gold)}

/* 본문 */
main{padding:22px 18px 56px}
.crumb{font-size:.8rem;color:var(--muted);margin:0 0 14px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{text-decoration:underline}
h1{font-size:1.62rem;line-height:1.35;margin:.1em 0 .7em;font-weight:800;letter-spacing:-.01em}
h2{font-size:1.24rem;margin:2em 0 .5em;padding-top:.5em;border-top:2px solid var(--line);font-weight:700}
h3{font-size:1.04rem;margin:1.5em 0 .35em;font-weight:700}
p{margin:.75em 0}
a{color:#1f5fbf}
ul,ol{padding-left:1.25em;margin:.75em 0}
li{margin:.35em 0}
strong{font-weight:700}
.lead{font-size:1.03rem;background:var(--soft);border-left:4px solid var(--gold);padding:15px 17px;border-radius:6px;margin:0 0 24px}
table{width:100%;border-collapse:collapse;margin:1.1em 0;font-size:.93rem}
th,td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
thead th{background:var(--soft);white-space:nowrap}
.scroll{overflow-x:auto}
blockquote{margin:1.1em 0;padding:12px 16px;background:var(--soft);border-left:3px solid var(--line);color:#333}
pre{background:var(--navy);color:#e7edf5;padding:14px 16px;border-radius:8px;overflow-x:auto;font-size:.86rem;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.qa{border-bottom:1px solid var(--line);padding:.2em 0 .6em}
.qa h3{margin:.9em 0 .2em}
.qa h3::before{content:"Q. ";color:var(--gold)}
.qa p{margin:.2em 0;color:#333}
.box{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:14px 17px;margin:1.3em 0}
.box h3{margin-top:.2em}
.warn{background:#fff7ed;border:1px solid #f3d19e;border-radius:8px;padding:14px 17px;margin:1.3em 0}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:1.2em 0;padding:0;list-style:none}
.cards li{margin:0}
.cards a{display:block;height:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:inherit;background:#fff}
.cards a:hover{border-color:var(--gold);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.cards b{display:block;margin-bottom:4px;color:var(--navy)}
.cards span{font-size:.88rem;color:var(--muted);line-height:1.6}

/* 핵심 요약 — 페이지가 답하는 질문의 결론 */
/* .lead 와 나란히 놓이므로 배경·테두리를 반대로 줘서 역할이 구분되게 한다. */
.answer{background:var(--navy);border-radius:8px;padding:16px 20px;margin:0 0 20px}
.answer-label{margin:0 0 6px;font-size:.72rem;letter-spacing:.1em;color:var(--gold);
  text-transform:uppercase;font-weight:700}
.answer-body{margin:0;color:#efe9f4;font-size:.97rem}
.answer-body strong{color:var(--gold-2)}

/* 관련 문서 */
.related{margin:2.4em 0 0}
.related h2{font-size:1.05rem;margin-bottom:.4em}
.related ul{margin:0;padding-left:1.2em}

/* 제휴 광고 배너 */
.banner{margin:2.6em 0 0;padding-top:1.2em;border-top:1px solid var(--line)}
.banner-label{margin:0 0 6px;font-size:.72rem;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase}
.banner > a{display:block;line-height:0;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.banner > a:hover{border-color:var(--gold);box-shadow:0 2px 12px rgba(0,0,0,.08)}
.banner img{display:block;width:100%;height:auto}
.banner-note{margin:8px 0 0;font-size:.78rem;color:var(--muted);line-height:1.6}
.banner-note a{color:var(--muted);text-decoration:underline}

/* CTA / 고지 */
.cta{margin:2.6em 0 1.2em;padding:18px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px;background:#fffdf6}
.cta p{margin:0 0 12px;font-size:.94rem;color:#333}
.btn{display:inline-block;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#fff;
  padding:11px 20px;border-radius:8px;text-decoration:none;font-weight:700;font-size:.95rem}
.btn:hover{background:var(--navy-2)}
.note{margin:1.6em 0 0;padding-top:1em;border-top:1px dashed var(--line);color:var(--muted);font-size:.86rem}

/* 푸터 */
footer.site{background:var(--navy);color:#9fb0c4;padding:22px 0 30px;margin-top:40px;font-size:.86rem}
.fnav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px}
.fnav a{color:#cfd8e3;text-decoration:none}
.fnav a:hover{color:#fff;text-decoration:underline}
.copy{margin:0;color:#7d8ea3}

@media (max-width:560px){
  h1{font-size:1.36rem}
  h2{font-size:1.12rem}
  body{font-size:15.5px}
  header.site .bar{gap:10px}
}