/* 내 국민연금. 출산 계산기ㆍ척척박사 사이트와 같은 결. Pretendard, 바탕 #f6f5fa, 잉크 #191f28, 라임 #d3ff30, 흰 카드 16px, 500px 한 단 */
:root{
  --bg:#f6f5fa; --card:#fff; --ink:#111; --ink2:#191f28; --gray:#666; --gray2:#999; --line:#e5e8ee;
  --pill:#ecebf0; --lime:#d3ff30; --lime2:#e3fa63; --red:#d6304a; --redbg:#fff0f2; --soft:#f6f5fa;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); line-height:1.55; -webkit-text-size-adjust:100%;
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Segoe UI",Roboto,sans-serif; font-variant-numeric:tabular-nums}
a{color:var(--ink); text-decoration:none}
button{font-family:inherit}
.hdr{height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; max-width:500px; margin:0 auto}
.hdr b{font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px}
.hdr b svg{width:26px; height:26px}
.hdr a{font-size:11px; font-weight:600; background:var(--ink2); color:#fff; padding:5px 8px; border-radius:3px}
.wrap{max-width:500px; margin:0 auto; padding:6px 16px 140px}
h1{font-size:24px; letter-spacing:-0.02em; margin:8px 0 6px; font-weight:800; line-height:1.32}
.lead{font-size:14.5px; color:var(--gray); margin:0 0 14px; line-height:1.6}
.maker{font-size:12px; color:var(--gray2); margin:0 0 16px}

/* 진행률 */
.prog{height:4px; background:var(--pill); border-radius:2px; margin:0 0 14px; overflow:hidden}
.prog i{display:block; height:100%; width:0; background:var(--ink2); transition:width .3s}

/* 질문 셋 */
.q{background:var(--card); border-radius:16px; padding:18px 18px 16px; margin:0 0 10px}
.q .n{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--gray); margin:0 0 4px}
.q .n i{display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--pill); color:var(--gray); align-items:center; justify-content:center; font-style:normal; font-size:11px; font-weight:700}
.q.done .n i{background:var(--ink2); color:var(--lime)}
.q h3{font-size:17px; margin:0 0 12px; font-weight:700}
.row{display:flex; gap:8px; align-items:center}
select,input[type=number]{width:100%; height:46px; padding:0 12px; font-size:15px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font-family:inherit}
select:focus,input:focus{outline:2px solid var(--ink2); outline-offset:1px}
.unit{flex:none; font-size:14px; color:var(--gray); min-width:36px}
.hint{font-size:12.5px; color:var(--gray); margin:8px 0 0; line-height:1.5}
.reward{display:flex; gap:10px; align-items:flex-start; background:var(--soft); border-radius:12px; padding:12px 14px; margin:12px 0 0; font-size:14px; line-height:1.5}
.reward svg{width:34px; height:34px; flex:none}
.reward b{font-weight:700}
.reward .dday{display:block; font-size:12.5px; color:var(--gray); margin-top:2px}
.go{display:block; width:100%; height:52px; border:0; border-radius:12px; background:var(--ink2); color:var(--lime); font-size:15px; font-weight:800; cursor:pointer; margin:4px 0 0}
.go:disabled{background:var(--pill); color:var(--gray2); cursor:default}

/* 지난번 */
.last{display:none; background:var(--card); border-radius:12px; padding:12px 14px; margin:0 0 10px; font-size:13.5px; color:var(--gray); line-height:1.5}
.last.on{display:block}
.last b{color:var(--ink)}

/* 결과 카드 */
#result{margin-top:26px; display:none}
#result.on{display:block}
.card{background:var(--card); border-radius:16px; padding:20px 20px 18px; margin:0 0 10px; display:none}
.card.on{display:block}
.card .tag{display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:40px; background:var(--pill); color:var(--gray); margin:0 0 10px}
.card h2{font-size:16px; margin:0 0 4px; font-weight:700}
.card .who{font-size:14px; color:var(--gray); margin:0 0 2px}
.card .num{font-size:40px; font-weight:800; letter-spacing:-0.03em; line-height:1.15; margin:4px 0 0}
.card .num small{font-size:18px; font-weight:700; margin-left:3px}
.card .sub{font-size:13.5px; color:var(--gray); margin:8px 0 0; line-height:1.55}
.card .sub b{color:var(--ink); font-weight:600}
.card .say{display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; padding:12px 14px; background:var(--soft); border-radius:12px; font-size:13.5px; line-height:1.5}
.card .say svg{width:34px; height:34px; flex:none}
.next{display:block; width:100%; height:48px; border:0; border-radius:12px; background:var(--ink2); color:var(--lime); font-size:14px; font-weight:800; cursor:pointer; margin:14px 0 0}
.next.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}

/* 수익비 표 */
table.gov{width:100%; border-collapse:collapse; margin:12px 0 0; font-size:13.5px}
table.gov th,table.gov td{padding:8px 6px; text-align:right; border-bottom:1px solid var(--line)}
table.gov th{font-weight:600; color:var(--gray); font-size:12.5px}
table.gov td:first-child,table.gov th:first-child{text-align:left}
table.gov tr.me td{background:var(--lime2); font-weight:700}
table.gov tr.mine td{font-weight:700}

/* 시간축 */
.tl{margin:14px 0 4px; position:relative; height:64px}
.tl .bar{position:absolute; left:0; right:0; top:30px; height:3px; background:var(--line); border-radius:2px}
.tl .pt{position:absolute; top:22px; width:0; text-align:center; transform:translateX(-50%); white-space:nowrap}
.tl .pt i{display:block; width:14px; height:14px; border-radius:50%; background:var(--ink2); margin:0 auto 4px; border:3px solid #fff; box-shadow:0 0 0 1px var(--line)}
.tl .pt.red i{background:var(--red)}
.tl .pt b{font-size:12.5px; display:block}
.tl .pt small{font-size:11px; color:var(--gray)}
.tl .gap{position:absolute; top:0; font-size:12px; color:var(--gray); transform:translateX(-50%); white-space:nowrap}

/* 할 일 */
.todo{display:flex; flex-direction:column; gap:8px; margin:12px 0 0}
.todo a{display:flex; gap:12px; align-items:flex-start; background:var(--soft); border-radius:12px; padding:12px 14px}
.todo .t{font-weight:700; font-size:14px}
.todo .t small{display:block; font-weight:400; color:var(--gray); font-size:12.5px; margin-top:2px}
.todo .arrow{margin-left:auto; color:var(--gray2); flex:none}

/* 가정ㆍ각주 */
.assume{background:var(--card); border-radius:16px; padding:16px 18px; margin:16px 0 0; font-size:13px; color:var(--gray); line-height:1.6}
.assume h4{font-size:13.5px; margin:0 0 6px; color:var(--ink); font-weight:700}
.assume ul{margin:0; padding-left:18px}
.assume li{margin:0 0 4px}
.fixed{font-size:12.5px; color:var(--gray); margin:14px 4px 0; line-height:1.6}
.fixed b{color:var(--ink); font-weight:600}

/* 하단 고정 */
.bar{position:fixed; left:0; right:0; bottom:0; background:rgba(246,245,250,.92); backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); display:none}
.bar.on{display:block}
.bar .in{max-width:500px; margin:0 auto; display:flex; gap:8px; align-items:center}
.bar .sum{flex:1; font-size:13px; color:var(--gray); line-height:1.3}
.bar .sum b{display:block; font-size:16px; color:var(--ink); font-weight:800}
.bar button{height:44px; padding:0 16px; border-radius:12px; border:0; background:var(--ink2); color:var(--lime); font-weight:800; font-size:14px; cursor:pointer}
.bar button.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.bar a.btnlink{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; align-items:center; font-weight:800; font-size:14px; background:var(--ink2); color:var(--lime)}
.bar a.btnlink.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.hdr b a{display:flex; align-items:center; gap:8px}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 0}
.three div{background:var(--soft); border-radius:12px; padding:12px 10px; text-align:center}
.three .l{font-size:12px; color:var(--gray)}
.three .v{font-size:17px; font-weight:800; margin-top:2px}
.three .v small{font-size:11px; font-weight:600; color:var(--gray); display:block; margin-top:2px}
.three .me{outline:2px solid var(--ink2)}
.kv{display:flex; flex-direction:column; gap:6px; margin:12px 0 0}
.kv div{display:flex; justify-content:space-between; font-size:14px; padding:8px 0; border-bottom:1px solid var(--line)}
.kv div span:first-child{color:var(--gray)}
.kv div b{font-weight:700}
.kv div.total b{font-size:16px}
.warn{display:inline-block; font-size:12px; padding:4px 10px; border-radius:40px; background:var(--redbg); color:var(--red); margin:0 0 8px}
.seg{display:flex; gap:6px; margin-top:10px}
.seg button{flex:1; height:40px; border-radius:60px; border:1px solid var(--line); background:#fff; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--gray)}
.seg button.on{background:var(--ink2); border-color:var(--ink2); color:#fff}
.links{display:flex; flex-direction:column; gap:8px; margin:12px 0 0}
.links a{display:flex; gap:12px; align-items:center; background:var(--soft); border-radius:12px; padding:12px 14px; font-size:14px; font-weight:700}
.links a small{display:block; font-weight:400; color:var(--gray); font-size:12.5px; margin-top:2px}
.links a .arrow{margin-left:auto; color:var(--gray2)}
.toast{position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:var(--ink2); color:#fff; padding:10px 16px; border-radius:40px; font-size:13px; opacity:0; transition:opacity .2s; pointer-events:none}
.toast.on{opacity:1}
@media (max-width:380px){ .card .num{font-size:34px} h1{font-size:22px} }