/* 아이맞이 계산기 공통 스타일
   레이아웃: 상단 고정 내비 + 최대 1080px 본문. 카드형 섹션, 큰 결과 숫자, 모바일 우선. */
:root{
  --bg:#f3f5f4; --surface:#ffffff; --surface-2:#eef2f1; --surface-3:#e3eae8; --line:#dfe6e4;
  --ink:#16201d; --ink-2:#4a5853; --ink-3:#7c8a85;
  --brand:#0f8a76; --brand-ink:#0b6b5c; --brand-soft:#dcf1ec;
  --warm:#f08a4b; --warm-soft:#fdeadd;
  --old:#9a8a73; --old-soft:#f0ebe2;
  --note-bg:#fff6e5; --note-ink:#6b4a05; --note-line:#f3dca8;
  --shadow:0 1px 2px rgba(22,32,29,.04),0 6px 24px rgba(22,32,29,.06);
  --r-lg:20px; --r:14px; --r-sm:10px;
  --f:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --maxw:1080px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1513; --surface:#151e1b; --surface-2:#1b2622; --surface-3:#22302b; --line:#28352f;
  --ink:#e8efec; --ink-2:#b3c1bc; --ink-3:#86968f;
  --brand:#3fc2a9; --brand-ink:#6fd8c2; --brand-soft:#173a33;
  --warm:#f6a06a; --warm-soft:#3a2617;
  --old:#cbb895; --old-soft:#2f281c;
  --note-bg:#2a2210; --note-ink:#f1d48a; --note-line:#4f401c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0e1513; --surface:#151e1b; --surface-2:#1b2622; --surface-3:#22302b; --line:#28352f;
  --ink:#e8efec; --ink-2:#b3c1bc; --ink-3:#86968f;
  --brand:#3fc2a9; --brand-ink:#6fd8c2; --brand-soft:#173a33;
  --warm:#f6a06a; --warm-soft:#3a2617;
  --old:#cbb895; --old-soft:#2f281c;
  --note-bg:#2a2210; --note-ink:#f1d48a; --note-line:#4f401c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.7;letter-spacing:-0.01em;word-break:keep-all;overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--brand-ink);text-underline-offset:3px}
h1,h2,h3{line-height:1.35;margin:0;text-wrap:balance;letter-spacing:-0.02em}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:8px;background:var(--surface);padding:8px 12px;z-index:50}

/* 상단 내비 */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:17px;letter-spacing:-0.03em}
.brand svg{width:30px;height:30px;flex:none}
.nav-links{margin-left:auto;display:flex;gap:4px}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:600;padding:8px 12px;border-radius:10px}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--surface-2);color:var(--ink)}
.menu{margin-left:auto;display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;padding:8px;border-radius:10px;display:flex}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:24px;height:24px}
.menu[open] .menu-panel{display:flex}
.menu-panel{display:none;position:absolute;right:0;top:44px;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:8px;min-width:200px}
.menu-panel a{padding:12px 14px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
.menu-panel a:hover{background:var(--surface-2)}
@media (max-width:720px){.nav-links{display:none}.menu{display:block}}

/* 본문 */
main{max-width:var(--maxw);margin:0 auto;padding-inline:16px;padding-block:24px 64px;display:flex;flex-direction:column;gap:28px}
.eyebrow{font-size:13px;font-weight:700;color:var(--brand-ink);letter-spacing:.02em}
.lede{color:var(--ink-2);font-size:17px;max-width:62ch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
@media (max-width:520px){.card{padding:20px 16px;border-radius:18px}}
.section-title{font-size:22px;font-weight:800}
.muted{color:var(--ink-3)}
.small{font-size:14px}
.note{background:var(--note-bg);color:var(--note-ink);border:1px solid var(--note-line);border-radius:var(--r);padding:14px 16px;font-size:14px;line-height:1.6}
.note b{font-weight:700}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px;line-height:1.4;width:fit-content}
.chip.brand{background:var(--brand-soft);color:var(--brand-ink)}
.chip.old{background:var(--old-soft);color:var(--old)}
.chip.warm{background:var(--warm-soft);color:var(--warm)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:15px;border-radius:12px;padding:12px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn:hover{filter:brightness(.97)}

/* 히어로 */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center}
.hero h1{font-size:clamp(30px,5vw,44px);font-weight:800}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .art{max-width:420px;justify-self:end;width:100%}
@media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr)}.hero .art{justify-self:center;max-width:300px;order:-1}}

/* 계산기 */
.calc{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}}
.steps{display:flex;flex-direction:column;gap:22px}
.step{display:flex;flex-direction:column;gap:10px}
.step-h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.step-n{width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:800;display:grid;place-items:center;flex:none}
.hint{font-size:13px;color:var(--ink-3);line-height:1.55}
input[type=date],select{font:inherit;font-size:16px;color:var(--ink);background:var(--surface-2);border:1px solid transparent;border-radius:12px;padding:12px 14px;width:100%;appearance:none;-webkit-appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
input[type=date]:focus,select:focus{border-color:var(--brand);outline:none;background-color:var(--surface)}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:9px 4px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2)}
.seg input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg input:focus-visible+span{outline:2px solid var(--brand)}
.region-out{display:flex;flex-wrap:wrap;gap:6px}
.range-row{display:flex;align-items:center;gap:12px}
.range-row input{flex:1;accent-color:var(--brand)}
.range-row output{min-width:4.5em;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);cursor:pointer}
.check input{margin-top:5px;accent-color:var(--brand);width:16px;height:16px}
.check input:disabled+span{opacity:.5}

.result{display:flex;flex-direction:column;gap:20px;position:sticky;top:76px}
@media (max-width:900px){.result{position:static}}
.big{font-size:clamp(36px,6vw,50px);font-weight:800;letter-spacing:-0.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.big.new{color:var(--brand)}
.big.old{color:var(--old)}
.period{display:flex;gap:6px;flex-wrap:wrap}
.period button{font:inherit;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer}
.period button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.scenario{border:1px dashed var(--line);border-radius:var(--r);padding:14px 16px;font-size:14px;color:var(--ink-2)}
.scenario b{color:var(--ink)}
.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:5.5em minmax(0,1fr) 7.5em;gap:10px;align-items:center;font-size:14px;font-weight:600}
.track{height:12px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.fill{height:100%;border-radius:999px;transition:width .35s ease}
.fill.new{background:var(--brand)} .fill.old{background:var(--old)}
.bar-row .amt{text-align:right;font-variant-numeric:tabular-nums}
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.forms div{background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--ink-2)}
.forms b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.num th:not(:first-child),table.num td:not(:first-child){text-align:right;white-space:nowrap}
td:first-child{min-width:5.5em}
thead th{font-size:12px;color:var(--ink-3);font-weight:700}
tfoot td{font-weight:800;border-bottom:0}
.quarters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:480px){.quarters{grid-template-columns:repeat(2,minmax(0,1fr))}}
.q{background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--ink-2)}
.q b{display:block;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* 정보 블록 */
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:how}
.how li{list-style:none;background:var(--surface-2);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px}
.how li b{font-size:15px}
.how li span{font-size:14px;color:var(--ink-2)}
.how svg{width:40px;height:40px}
@media (max-width:820px){.how{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.how{grid-template-columns:minmax(0,1fr)}}
ul.how{margin:0;padding:0}
.grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid-cards{grid-template-columns:minmax(0,1fr)}}
.gcard{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s ease}
.gcard:hover{transform:translateY(-2px)}
.gcard .thumb{background:var(--surface-2);border-radius:14px;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.gcard .thumb svg{width:100%;height:100%}
.gcard b{font-size:17px;line-height:1.4}
.gcard span{font-size:14px;color:var(--ink-2);line-height:1.55}
details.faq{border-bottom:1px solid var(--line);padding:14px 0}
details.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::after{content:"+";color:var(--ink-3);font-weight:700}
details.faq[open] summary::after{content:"−"}
details.faq summary::-webkit-details-marker{display:none}
details.faq p{margin-top:8px;color:var(--ink-2)}

/* 글 */
.article{max-width:760px;margin:0 auto;width:100%}
.article .card{display:flex;flex-direction:column;gap:22px}
.article section{display:flex;flex-direction:column;gap:12px}
.article h1{font-size:clamp(28px,4.5vw,38px);font-weight:800}
.article h2{font-size:22px;font-weight:800;margin-top:12px}
.article h3{font-size:18px;font-weight:700;margin-top:4px}
.article p,.article li{color:var(--ink-2);font-size:16.5px;line-height:1.85}
.article ul,.article ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.article strong{color:var(--ink)}
.byline{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.figure{margin:0;background:var(--surface-2);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.figure svg{width:100%;height:auto;display:block}
.figure figcaption{font-size:13px;color:var(--ink-3)}
.crumbs{font-size:13px;color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.toc{background:var(--surface-2);border-radius:var(--r);padding:14px 18px}
.toc ol{margin:6px 0 0;padding-left:1.2em;font-size:15px}
.src{font-size:14px}
.src li{font-size:14px!important;line-height:1.6!important}
.cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--brand-soft);border-radius:var(--r);padding:18px 20px}
.cta b{color:var(--brand-ink)}
.related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.related a{display:block;background:var(--surface-2);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
@media (max-width:520px){.related{grid-template-columns:minmax(0,1fr)}}

/* 푸터 */
footer.site{border-top:1px solid var(--line);background:var(--surface)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:28px 16px 40px;display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--ink-3)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot-links a{color:var(--ink-2);text-decoration:none;font-weight:600}
/* 추가 요소 */
.forms .hint{display:block;margin-top:2px;font-size:12px}
.result-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sub{font-size:14px;color:var(--ink-2)}
.block{display:flex;flex-direction:column;gap:10px}
.block h3{font-size:15px;font-weight:800}
.tl{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px}
.tl>div{border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.tl b{font-size:16px}
.tl .d{font-size:13px;font-weight:800;letter-spacing:.01em}
.tl .t1{background:var(--old-soft);color:var(--ink-2)} .tl .t1 b{color:var(--old)}
.tl .t2{background:repeating-linear-gradient(135deg,var(--old-soft) 0 10px,var(--brand-soft) 10px 20px);color:var(--ink-2)}
.tl .t3{background:var(--brand);color:#fff} .tl .t3 .d,.tl .t3 span{color:#e6fbf6}
@media (max-width:640px){.tl{grid-template-columns:minmax(0,1fr)}}
.bars.wide .bar-row{grid-template-columns:9.5em minmax(0,1fr) 7em}
@media (max-width:520px){.bars.wide .bar-row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.bars.wide .bar-row .track{grid-column:1/-1;grid-row:2}}
.fill.warm{background:var(--warm)} .fill.soft{background:color-mix(in srgb,var(--brand) 55%,var(--surface))}
.keypoints{background:var(--brand-soft);border-radius:var(--r);padding:16px 18px}
.keypoints b{color:var(--brand-ink);font-size:14px}
.keypoints ul{margin-top:6px}
.keypoints li{color:var(--ink)!important;font-size:15.5px!important}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stats div{background:var(--surface-2);border-radius:14px;padding:14px 16px;font-size:13px;color:var(--ink-2)}
.stats b{display:block;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.region-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.region-list div{background:var(--surface-2);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--ink-2);line-height:1.6}
.region-list b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:f}
.flow div{position:relative;background:var(--surface-2);border-radius:14px;padding:14px;font-size:14px;color:var(--ink-2)}
.flow div::before{counter-increment:f;content:counter(f);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:13px;margin-bottom:6px}
.flow b{display:block;color:var(--ink)}
@media (max-width:640px){.flow{grid-template-columns:minmax(0,1fr)}}
.contact-box{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--surface-2);border-radius:var(--r);padding:16px}
.contact-box code{font-family:inherit;font-size:18px;font-weight:800;color:var(--ink)}
.center{text-align:center;align-items:center}
@media print{.nav,footer.site,.actions,.period{display:none}.result{position:static}}
@media (prefers-reduced-motion:reduce){.fill,.gcard{transition:none}}
/* 소식형 글 */
.cover{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.cover img{width:100%;height:auto;display:block}
.lead{font-size:18px!important;line-height:1.8!important;color:var(--ink)!important}
.bignum{background:var(--surface-2);border-radius:var(--r-lg);padding:22px 20px;text-align:center;display:flex;flex-direction:column;gap:4px}
.bignum span{font-size:14px;color:var(--ink-2)}
.bignum b{font-size:clamp(30px,6vw,40px);font-weight:800;color:var(--brand-ink);letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.bignum small{font-size:13px;color:var(--ink-3)}
.tip{border-left:4px solid var(--warm);background:color-mix(in srgb,var(--warm) 10%,var(--surface));border-radius:0 var(--r) var(--r) 0;padding:14px 16px}
.tip b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}
.tip p{font-size:15.5px!important;margin:0}
.qa{display:flex;flex-direction:column;gap:10px}
.qa div{background:var(--surface-2);border-radius:14px;padding:14px 16px}
.qa b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.qa p{margin:0;font-size:15.5px!important}
.steps-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.steps-n div{background:var(--surface-2);border-radius:14px;padding:14px;font-size:14px;color:var(--ink-2);line-height:1.6}
.steps-n b{display:block;color:var(--ink);font-size:15px}
@media (max-width:640px){.steps-n{grid-template-columns:minmax(0,1fr)}}