/* 몰라돈 서류함 v3 — "공문서 서류철" 디자인
   방향: 관공서 서류처럼 믿음직하되 쉽게. 바탕은 차분한 회녹색, 행동은 남색, 돈·마감만 인주색.
   기억에 남는 한 가지: 서류철 모양 탭(선택 탭이 아래 종이와 이어짐). 나머지는 조용하게. */
:root{
 --bg:#EDF1EE;--paper:#fff;--ink:#17202B;--ink2:#3E4A57;--muted:#4D5966;--line:#C6D0CB;--line2:#E2E8E4;
 --navy:#1D4C8A;--navy-d:#143866;--navy-t:#E4ECF7;--seal:#C7301B;--seal-t:#FCE9E4;--ok:#1F7546;--hl:#FFF1A8;
 --fs-xs:.875rem;--fs-sm:.9375rem;--fs-b:1.0625rem;--fs-l:1.1875rem;--fs-h3:1.1875rem;--fs-h2:1.375rem;--fs-h1:1.5rem;--fs-d:1.75rem;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;
 --r1:6px;--r2:10px;--r3:14px;--tab-h:52px;
 --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
}
@media(min-width:1024px){:root{--fs-h2:1.5rem;--fs-h1:2rem;--fs-d:2.5rem}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--tab-h) + 16px);color-scheme:light}
body{margin:0;font-family:var(--font);font-size:var(--fs-b);line-height:1.65;color:var(--ink);background:var(--bg);word-break:keep-all;overflow-wrap:anywhere;-webkit-tap-highlight-color:#1d4c8a22;font-feature-settings:"ss06"}
a,button,input,select,summary,label{touch-action:manipulation}
h1,h2,h3,legend{line-height:1.3;letter-spacing:-.02em;text-wrap:balance;font-weight:800;color:var(--ink)}
h1{font-size:var(--fs-h1);margin:var(--s4) 0 var(--s3)}h2{font-size:var(--fs-h2);margin:var(--s8) 0 var(--s3)}h3{font-size:var(--fs-h3);margin:0 0 var(--s2)}
h1,h2,h3{scroll-margin-top:calc(var(--tab-h) + 16px)}
p,li,dd{text-wrap:pretty}p,li{max-width:40em}
a{color:var(--navy);text-underline-offset:3px}a:hover{color:var(--navy-d)}
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px}
mark{background:var(--hl);padding:0 3px;border-radius:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}.ic{display:inline-block;margin-right:.35em;font-style:normal}
table{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--navy);color:#fff;padding:12px 16px;border-radius:var(--r2);font-weight:700}.skip:focus{left:12px}
#app{max-width:1200px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left)) calc(var(--s10) + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right))}
#content:focus{outline:0}

/* 머리글 */
header{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0 var(--s2);flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:6px;font-size:1.1875rem;font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.logo b{color:var(--seal);border:2px solid var(--seal);border-radius:6px;padding:0 6px;line-height:1.4;font-size:.95em;transform:rotate(-2deg)}
header nav a{color:var(--ink2);margin-left:var(--s3)}
.gs{position:relative;flex:1;min-width:0;max-width:440px;margin-left:auto}
input[type=search]{-webkit-appearance:none;appearance:none}
.gs input,.hero input{width:100%;min-height:48px;font:inherit;font-size:1rem;padding:10px 14px 10px 42px;border:2px solid var(--ink);border-radius:var(--r2);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2317202B' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6'/%3E%3Cpath d='m13 13 5 5'/%3E%3C/svg%3E") no-repeat 14px center;color:var(--ink)}
.gr{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:#fff;border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 12px 32px #17202b26;overflow:hidden}.gr:empty{display:none}.gr .doc{border:0;border-bottom:1px solid var(--line2);border-radius:0;box-shadow:none}.gr p{padding:12px 16px;margin:0}
.topnav{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;padding:0 0 var(--s2);margin:0 -16px;padding-left:16px;padding-right:32px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.topnav::-webkit-scrollbar{display:none}
.topnav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--ink2);font-weight:700;font-size:var(--fs-sm);text-decoration:none;white-space:nowrap}
.topnav a:hover{background:#fff}.topnav a[aria-current]{background:var(--ink);color:#fff}
@media(min-width:1024px){
 header{flex-wrap:nowrap;padding:var(--s5) 0 var(--s3)}.logo{font-size:1.375rem}
 .topnav{margin:0;padding:0 0 var(--s3);-webkit-mask-image:none;mask-image:none;border-bottom:1px solid var(--line);gap:var(--s2)}
 .topnav a{font-size:var(--fs-b)}
}

/* 홈 */
.hero{background:var(--navy);color:#fff;border-radius:var(--r3);padding:var(--s5) var(--s4) var(--s4);margin:var(--s2) 0 var(--s4);position:relative}
.hero h1{color:#fff;font-size:1.375rem;margin:0 0 var(--s3)}
.hero form{margin:0}.hero input{border-color:#fff;font-size:1.0625rem;min-height:54px}
.hero #results{margin-top:var(--s3)}.hero #results:empty{display:none}.hero #results p{color:#fff}.hero #results p a{color:#fff}
.hero-side{display:none}
@media(min-width:1024px){
 .hero{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s10);padding:var(--s12) var(--s10);margin-top:var(--s6)}
 .hero h1{font-size:var(--fs-d);margin-bottom:var(--s5)}
 .hero-side{display:block;background:#fff;color:var(--ink);border-radius:var(--r2);padding:var(--s5) var(--s6);align-self:start}
 .hero-side h2{margin:0 0 var(--s2);font-size:var(--fs-l);color:var(--seal)}.hero-side ol{margin:0;padding-left:1.2em}.hero-side li{margin:6px 0;font-size:var(--fs-sm)}
}
.sit{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.sit a{display:flex;align-items:flex-start;gap:var(--s2);min-height:64px;padding:var(--s3);background:#fff;border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:var(--r1);color:var(--ink);text-decoration:none;font-weight:700;font-size:var(--fs-sm);line-height:1.4}
.sit a span{font-size:1.25rem;line-height:1.2}
.sit a:hover{border-color:var(--navy);background:var(--navy-t)}
@media(min-width:1024px){.sit{grid-template-columns:repeat(4,1fr);gap:var(--s3)}.sit a{min-height:96px;flex-direction:column;padding:var(--s4);font-size:var(--fs-b)}.sit a span{font-size:1.5rem}}
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.cat{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);min-height:56px;background:#fff;border-radius:var(--r2);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}
.cat span{font-size:1.375rem}
@media(min-width:1024px){.cats{grid-template-columns:repeat(4,1fr)}}
.banner img{width:100%;height:auto;display:block;border-radius:var(--r3);margin:var(--s8) 0 var(--s4)}

/* 목록 카드: 줄 친 서류 종이 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3);margin-top:var(--s3)}
.doc{display:flex;flex-direction:column;gap:6px;background:#fff;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);background-image:linear-gradient(var(--line2) 1px,transparent 1px);background-size:100% 28px;background-position:0 52px;background-repeat:repeat-y}
.doc:hover{border-color:var(--navy)}
.doc b{font-size:var(--fs-b);line-height:1.4}.doc small{color:var(--seal);font-weight:700;font-size:var(--fs-sm)}
.tag{align-self:flex-start;font-size:var(--fs-xs);font-weight:700;padding:1px 8px;border-radius:4px;border:1.5px solid var(--navy);color:var(--navy);background:#fff}
.tag.guide{border-color:var(--ok);color:var(--ok)}
.who{font-size:var(--fs-sm);color:var(--muted);margin:-4px 0 var(--s2)}
.weekly{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4) var(--s4) var(--s4) var(--s10);margin:var(--s3) 0}.weekly li{margin:var(--s1) 0}.weekly li::marker{color:var(--seal);font-weight:800}

/* 서류철 탭 */
.tablist{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:20;background:var(--bg);margin:var(--s4) -16px 0;padding:var(--s2) 16px 0;border-bottom:2px solid var(--ink)}
.tablist::-webkit-scrollbar{display:none}
.tablist [role=tab]{flex:1 0 auto;min-height:44px;padding:8px 14px;font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--ink2);background:#dfe6e2;border:2px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;cursor:pointer;margin-bottom:-2px;white-space:nowrap}
.tablist [role=tab]:hover{background:#fff}
.tablist [role=tab][aria-selected=true]{background:#fff;color:var(--ink);border-color:var(--ink);position:relative}
.tablist [role=tab][aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:#fff}
[role=tabpanel]{background:#fff;border:2px solid var(--ink);border-top:0;border-radius:0 0 var(--r3) var(--r3);padding:var(--s4);margin:0 -16px var(--s6)}
[role=tabpanel][hidden]{display:none}
[role=tabpanel]>h2:first-child,[role=tabpanel]>section:first-child>h2:first-child{margin-top:var(--s2)}
@media(min-width:760px){.tablist{margin:var(--s5) 0 0;padding:var(--s2) 0 0}.tablist [role=tab]{flex:0 0 auto;padding:8px 22px;font-size:var(--fs-b)}[role=tabpanel]{margin:0 0 var(--s8);padding:var(--s6)}}

/* 요약·주의 */
.sum{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r2);padding:var(--s4);margin:var(--s4) 0}
.sum h2{margin:0 0 var(--s2);font-size:var(--fs-l)}
.sum dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);margin:0}.sum dt{font-weight:800;white-space:nowrap}.sum dd{margin:0}
[role=tabpanel] .sum{border-width:1px;border-color:var(--line);background:#F7F9F8}
.disc{background:#FFF8DB;border-left:5px solid #C99A06;border-radius:var(--r1);padding:var(--s3) var(--s4);margin:var(--s4) 0;font-size:var(--fs-sm)}
.money{display:inline-block;font-size:var(--fs-l);font-weight:800;color:var(--seal);background:var(--seal-t);padding:var(--s2) var(--s3);border-radius:var(--r1);margin:0 0 var(--s2)}
.crumb{font-size:var(--fs-sm);margin:var(--s3) 0 0;color:var(--muted)}.crumb a{color:var(--muted)}
.lead{font-size:var(--fs-l);color:var(--ink2)}
.muted{color:var(--muted);font-size:var(--fs-sm)}
.src{font-size:var(--fs-sm)}.src li{margin:4px 0}
.ref{font-size:var(--fs-xs);vertical-align:super;margin-left:2px;font-weight:700}
details{background:#F7F9F8;border:1px solid var(--line2);border-radius:var(--r2);padding:var(--s3) var(--s4);margin:var(--s2) 0}summary{cursor:pointer;font-weight:700;min-height:28px}
.h1s{font-size:var(--fs-h1);margin:var(--s3) 0 0}
ol.steps{list-style:none;padding:0;counter-reset:s;margin:0}ol.steps li{counter-increment:s;position:relative;padding:var(--s2) 0 var(--s4) 52px;max-width:none}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:4px;width:36px;height:36px;border-radius:50%;border:2px solid var(--navy);color:var(--navy);display:grid;place-items:center;font-weight:800;background:#fff}
ol.steps li:not(:last-child)::after{content:"";position:absolute;left:17px;top:44px;bottom:0;width:2px;background:var(--line)}

/* 버튼 */
button{font:inherit}
.big,.cta,.nextpv{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:0 var(--s6);background:var(--navy);color:#fff;border:0;border-radius:var(--r2);font-weight:800;font-size:var(--fs-b);text-decoration:none;cursor:pointer}
.big:hover,.cta:hover,.nextpv:hover{background:var(--navy-d);color:#fff}
.cta{display:flex;margin:var(--s5) 0;background:var(--ink)}
.nextpv{width:100%;margin-top:var(--s3)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.btns button{min-height:48px;padding:0 var(--s4);border:0;border-radius:var(--r2);background:var(--navy);color:#fff;font-weight:700;cursor:pointer}
.btns .ghost{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}

/* 폼 */
.prog{position:sticky;top:var(--tab-h);z-index:15;background:#fff;padding:var(--s2) 0;margin-bottom:var(--s2)}
.bar{height:8px;background:var(--line2);border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--ok)}
#ptxt{font-size:var(--fs-sm);font-weight:700}
fieldset{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);margin:0 0 var(--s4);background:#fff}
legend{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-l);padding:0 var(--s2);margin-left:calc(-1 * var(--s2))}
.stepn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:var(--fs-sm)}
.fld{margin-bottom:var(--s4)}.fld:last-child{margin-bottom:0}
form label,.filt label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--s1);color:var(--ink)}
form input,form textarea,select,.filt input{display:block;width:100%;min-height:48px;font:inherit;font-size:1.0625rem;padding:10px 12px;border:1.5px solid #6B7680;border-radius:var(--r1);background-color:#fff;color:var(--ink);margin:0}
form input:focus,select:focus,textarea:focus,.filt input:focus{outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
::placeholder{color:#7A858F}
select{-webkit-appearance:none;appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2317202B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center/16px}
.help{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:var(--s1)}.help:empty{display:none}
.dt{display:flex;gap:var(--s2)}.dt input{flex:1}
.today{min-height:48px;padding:0 var(--s4);border:1.5px solid var(--ink);background:#fff;border-radius:var(--r1);font-weight:700;cursor:pointer}
form.req{max-width:640px}form.req label{margin-bottom:var(--s4)}textarea{min-height:140px}
form.req button{min-height:52px;padding:0 var(--s6);background:var(--navy);color:#fff;border:0;border-radius:var(--r2);font-weight:800}

/* 미리보기 종이 */
.paper{background:#fff;white-space:pre-wrap;font-family:var(--font);font-size:var(--fs-sm);line-height:1.85;padding:var(--s6) var(--s5);border:1px solid var(--line);border-top:6px solid var(--ink);border-radius:2px;box-shadow:0 1px 0 #fff,0 6px 0 -3px #dfe6e2,0 6px 0 -2px var(--line);min-height:320px;margin:0;word-break:keep-all;overflow-wrap:anywhere}
.share{text-align:center;margin-top:var(--s8)}.share h2{font-size:var(--fs-l)}.share img{max-width:320px;width:100%;height:auto;border-radius:var(--r2);border:1px solid var(--line)}

/* 서류 페이지: 데스크톱 2단(왼쪽 작성, 오른쪽 미리보기 고정) */
@media(min-width:1024px){
 [data-tabs=doc]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0 var(--s8);align-items:start}
 [data-tabs=doc] .tablist{display:none}
 [data-tabs=doc] [role=tabpanel]{display:block!important;margin:var(--s4) 0 var(--s8);border:0;padding:0;background:none}
 [data-tabs=doc] #panel-preview{position:sticky;top:var(--s4);max-height:calc(100vh - 32px);overflow:auto;background:#F7F9F8;border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5)}
 [data-tabs=doc] #panel-preview .share{display:none}
 [data-tabs=doc] #panel-tips{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:var(--r3);padding:var(--s8)}
 [data-tabs=doc] .prog{top:0}
 .nextpv{display:none}
 #panel-write::before{content:"빈칸 채우기";display:block;font-weight:800;font-size:var(--fs-h2);margin-bottom:var(--s3)}
 #panel-preview::before{content:"완성본 미리보기 (입력하면 바로 바뀌어요)";display:block;font-weight:800;font-size:var(--fs-l);margin-bottom:var(--s3)}
 [data-tabs=guide] [role=tabpanel],[data-tabs=safe] [role=tabpanel]{padding:var(--s8)}
}

/* 시민안전보험 */
.filt{background:#fff;display:grid;gap:var(--s3)}
.filt.sticky{position:sticky;top:var(--tab-h);z-index:14;margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--s4));padding:0 var(--s4);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:40px;padding:0 14px;border:1.5px solid var(--line);background:#fff;border-radius:999px;font-weight:700;font-size:var(--fs-sm);color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--navy)}.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.selrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.filt label{font-size:var(--fs-xs);margin-bottom:2px}
.cnt{font-weight:800;margin:var(--s2) 0}
.empty{background:#F7F9F8;border:1.5px dashed var(--line);border-radius:var(--r2);padding:var(--s4) var(--s5);margin:var(--s2) 0}
.empty p{margin:0 0 var(--s1)}
.reg{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);margin:var(--s3) 0;background:#fff}
.reg .rh{margin-top:0;font-size:var(--fs-l);padding-bottom:var(--s2);border-bottom:2px solid var(--ink);margin-bottom:var(--s3)}
.meta{display:grid;grid-template-columns:auto 1fr;gap:4px var(--s3);margin:0 0 var(--s3);font-size:var(--fs-sm)}.meta dt{color:var(--muted);font-weight:700;white-space:nowrap}.meta dd{margin:0}
.meta a{font-weight:700}
.reg table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.reg th{font-size:var(--fs-xs);color:var(--muted);text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}
.reg td{border-bottom:1px solid var(--line2);padding:8px 4px;vertical-align:top}
.reg td:last-child,.reg th:last-child{text-align:right;white-space:nowrap;padding-left:var(--s3)}.reg td:last-child{font-weight:800;color:var(--seal)}
.moreit{background:none;border:0;padding:0;margin:var(--s2) 0 0}.moreit summary{color:var(--navy);padding:var(--s2) 0;min-height:44px;display:flex;align-items:center}
.moreit table{margin-top:0}
.src2{margin:var(--s3) 0 0;font-size:var(--fs-xs)}
.reg.miss{border-style:dashed;background:#F7F9F8}.reg.miss .rh{border-bottom-color:var(--line)}
@media(min-width:1024px){
 #panel-region{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--s8);align-items:start}
 #panel-region[hidden]{display:none}
 #panel-region .filt.sticky{position:sticky;top:calc(var(--tab-h) + 16px);margin:0;border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5);grid-row:1 / span 2;background:#F7F9F8}
 #panel-region .chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0;-webkit-mask-image:none;mask-image:none}
 #panel-region .selrow{grid-template-columns:1fr}
 #panel-region #stbl{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s4);align-items:start}
 #panel-region #stbl>.cnt,#panel-region #stbl>.empty,#panel-region #stbl>.miss{grid-column:1/-1}
 #panel-region .reg{margin:0}
}

.ad{border:1.5px dashed var(--line);color:var(--muted);text-align:center;padding:var(--s6);border-radius:var(--r2);margin:var(--s6) 0;font-size:var(--fs-sm)}
footer{border-top:1px solid var(--line);margin-top:var(--s10);padding:var(--s5) 0;font-size:var(--fs-sm);color:var(--muted)}footer a{color:var(--ink2)}
.notfound{padding:var(--s12) 0}.notfound .big{margin-top:var(--s4)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-motion:no-preference){.bar i{transition:width .2s ease}}
@media print{
 body{background:#fff}body *{visibility:hidden}#preview,#preview *{visibility:visible}
 #preview{position:absolute;left:0;top:0;border:0;box-shadow:none;padding:0;font-size:12pt}[role=tabpanel][hidden]{display:block!important}
}
@media(max-width:759px){.tablist{margin:var(--s4) 0 0;padding:var(--s2) 0 0}[role=tabpanel]{margin:0 0 var(--s6);padding:var(--s4) var(--s3)}.filt.sticky{margin:calc(-1 * var(--s4)) calc(-1 * var(--s3)) var(--s3);padding:var(--s3)}.chips{margin:0 calc(-1 * var(--s3));padding:0 var(--s3)}}
@media(min-width:1024px){[data-tabs=doc] .prog{background:var(--bg);padding:var(--s2) var(--s3);border-radius:var(--r1)}}
@media(min-width:1024px){#panel-region{align-content:start;grid-template-rows:auto 1fr}#panel-region>.muted{grid-column:2;align-self:start}}
/* v3.1 선 아이콘 (Lucide, ISC) */
.ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.4em;flex:none;color:var(--navy);stroke-width:2}
.ic-l{width:24px;height:24px;margin:0;color:var(--navy);stroke-width:1.75}
@media(min-width:1024px){.sit .ic-l{width:28px;height:28px}}
.money .ic,.hero-side .ic,.weekly .ic,.doc b .ic{color:var(--seal)}
.disc .ic{color:#8A6400}
.tablist .ic,.btns .ic,.topnav .ic{color:currentColor}
.btns button{display:inline-flex;align-items:center}
.sum dt .ic{color:var(--ink2)}
h1 .ic{width:1em;height:1em;vertical-align:-.12em}
/* v3.2 타이포그래피 정제
   - 서체: Pretendard Variable 단일 가족(OFL-1.1). 제목은 같은 가족의 굵은 축(760~860)+좁은 자간으로 디스플레이 역할.
     Gmarket Sans·KoPub 등은 웹 임베딩 조건이 OFL만큼 명확하지 않아 제외(Anthropic frontend-design: "one family or two, clearly distinct").
   - 유동 글자 크기: Utopia 방식 clamp(), 360px에서 비율 1.2(본문 17px) → 1440px에서 비율 1.25(본문 18px).
   - 리듬: 기준 줄 단위 --lh = 본문 1.65em, 여백은 그 배수. */
:root{
 --step--2:clamp(.8125rem,.79rem + .1vw,.875rem);
 --step--1:clamp(.9375rem,.91rem + .12vw,1rem);
 --step-0:clamp(1.0625rem,1.04rem + .1vw,1.125rem);
 --step-1:clamp(1.25rem,1.2rem + .25vw,1.40625rem);
 --step-2:clamp(1.5rem,1.42rem + .4vw,1.7578rem);
 --step-3:clamp(1.75rem,1.6rem + .75vw,2.1973rem);
 --step-4:clamp(2rem,1.75rem + 1.25vw,2.7466rem);
 --lh:1.65;--rhythm:calc(var(--step-0) * var(--lh));
 --w-body:400;--w-strong:640;--w-head:780;--w-display:860;
 --fs-xs:var(--step--2);--fs-sm:var(--step--1);--fs-b:var(--step-0);--fs-l:var(--step-1);--fs-h3:var(--step-1);--fs-h2:var(--step-2);--fs-h1:var(--step-3);--fs-d:var(--step-4)
}
@media(min-width:1024px){:root{--fs-h2:var(--step-2);--fs-h1:var(--step-3);--fs-d:var(--step-4)}}
body{font-size:var(--step-0);line-height:var(--lh);font-weight:var(--w-body);font-variant-numeric:proportional-nums;font-kerning:normal;hanging-punctuation:first allow-end last;letter-spacing:-.003em}
b,strong{font-weight:var(--w-strong)}
/* 크기별 광학 자간: 클수록 좁게 */
h1,.hero h1{font-weight:var(--w-display);letter-spacing:-.032em;line-height:1.22}
h2{font-weight:var(--w-head);letter-spacing:-.024em;line-height:1.28}
h3,.reg .rh,legend,.sum h2{font-weight:var(--w-head);letter-spacing:-.016em;line-height:1.35}
small,.muted,.help,.crumb{letter-spacing:0}
h1{margin:calc(var(--rhythm)*.75) 0 calc(var(--rhythm)*.5)}
h2{margin:calc(var(--rhythm)*1.5) 0 calc(var(--rhythm)*.5)}
h3{margin:0 0 calc(var(--rhythm)*.25)}
p,ul,ol,dl{margin:0 0 calc(var(--rhythm)*.75)}
p,li{max-width:34em}  /* 한글 한 줄 약 34~40자 */
.lead{font-size:var(--step-1);line-height:1.55;color:var(--ink2);max-width:30em;font-weight:450}
/* 위계는 상자 대신 크기·굵기·색으로 */
.sum{border:0;border-top:3px solid var(--ink);border-radius:0;background:transparent;padding:calc(var(--rhythm)*.5) 0 0}
[role=tabpanel] .sum{border:0;border-top:2px solid var(--line);background:transparent}
.sum dt{font-weight:var(--w-strong);color:var(--ink2)}
/* 이름표(eyebrow): 작고 자간 넓게, 대문자 대신 굵기·색 */
.eyebrow,.filt label,.meta dt,.reg th,.sum dt,.hero-side h2,#ptxt{font-size:var(--step--2);letter-spacing:.06em;font-weight:var(--w-strong);color:var(--muted)}
.sum dt{font-size:var(--step--1);letter-spacing:.04em}
.hero-side h2{color:var(--seal)}
/* 숫자: 표·금액은 고정폭, 큰 숫자 + 작은 단위(기준선 정렬) */
table,.amt,#ptxt,.meta,.cnt{font-variant-numeric:tabular-nums}
.amt{white-space:nowrap;display:inline-flex;align-items:baseline;gap:1px}
.amt b{font-weight:var(--w-display);font-size:1.18em;letter-spacing:-.02em;color:var(--seal)}
.amt small{font-size:.74em;font-weight:var(--w-strong);color:var(--seal);opacity:.85}
.reg td:last-child{font-weight:inherit}
.money{font-size:var(--step-1);font-weight:var(--w-head);letter-spacing:-.015em;background:none;padding:0;border-left:4px solid var(--seal);padding-left:var(--s3);border-radius:0;line-height:1.4}
.weekly li,.hero-side li{font-variant-numeric:tabular-nums}
/* 인용·따옴표 */
q{quotes:"\201C" "\201D" "\2018" "\2019"}
blockquote{margin:0 0 var(--rhythm);padding-left:var(--s4);border-left:3px solid var(--line);color:var(--ink2);hanging-punctuation:first}
/* 아이콘 획을 글자 굵기에 맞춤: 본문 2 → 큰 아이콘 1.6 */
.ic{stroke-width:2.1}.ic-l{stroke-width:1.6}h1 .ic{stroke-width:2.4}
.doc b{font-weight:var(--w-head);letter-spacing:-.012em}
.sit a{font-weight:var(--w-strong)}
.tablist [role=tab]{font-weight:var(--w-strong)}.tablist [role=tab][aria-selected=true]{font-weight:var(--w-head)}
.topnav a{font-weight:var(--w-strong)}
.logo{font-weight:var(--w-display);letter-spacing:-.03em}
.paper{font-size:var(--step--1);line-height:1.9;letter-spacing:.005em}
/* 통계 동의 배너 */
.cookie{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;max-width:560px;margin:0 auto;background:var(--ink);color:#fff;border-radius:var(--r3);padding:var(--s4);box-shadow:0 12px 32px #17202b4d;display:grid;gap:var(--s3);font-size:var(--step--1);line-height:1.55}
.cookie p{margin:0;max-width:none}.cookie a{color:#fff}
.cookie div{display:flex;gap:var(--s2);justify-content:flex-end}
.cookie button{min-height:44px;padding:0 var(--s5);border-radius:var(--r2);border:0;font-weight:var(--w-head);cursor:pointer;background:#fff;color:var(--ink)}
.cookie .ghost{background:transparent;color:#fff;border:1.5px solid #ffffff99}
@media print{.cookie{display:none}}