:root{
  --navy:#12263A; --text:#12263A; --sub:#4A5D70; --blue:#1D6FD8; --yellow:#FFB300;
  --line:#DCE3EA; --soft:#F4F7FA; --bg:#FFFFFF; --green:#1F9D6B;
  --sans:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font:400 16px/1.75 var(--sans); }
a{ color:var(--blue); }
.top{ height:56px; display:flex; align-items:center; gap:10px; padding:0 20px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:5; }
.brand{ display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700; letter-spacing:-.2px; color:var(--navy); text-decoration:none; white-space:nowrap; }
.brand b{ color:var(--blue); }
.top .sp{ flex:1; }
.top .lang{ font-size:13.5px; color:var(--sub); text-decoration:none; padding:6px 10px; border:1px solid var(--line); border-radius:8px; white-space:nowrap; }
.top .go{ font-size:14px; font-weight:700; color:var(--navy); background:var(--yellow); text-decoration:none; padding:7px 14px; border-radius:8px; white-space:nowrap; }
main{ max-width:760px; margin:0 auto; padding:28px 20px 60px; }
.crumb{ font-size:13px; color:var(--sub); margin-bottom:10px; }
.crumb a{ color:var(--sub); }
h1{ font-size:30px; line-height:1.35; letter-spacing:-.5px; margin:0 0 12px; }
.lead{ font-size:17.5px; color:var(--sub); margin:0 0 26px; }
h2{ font-size:22px; line-height:1.4; letter-spacing:-.3px; margin:42px 0 10px; padding-top:6px; }
h3{ font-size:17.5px; margin:26px 0 6px; }
p, li{ margin:0 0 12px; }
ul, ol{ padding-left:22px; }
.formula{ background:var(--soft); border-left:4px solid var(--blue); border-radius:6px; padding:14px 18px; margin:14px 0 18px; font-weight:700; font-size:17px; }
.formula small{ display:block; font-weight:400; font-size:14px; color:var(--sub); margin-top:4px; }
.note{ background:#FFF8E5; border:1px solid #F3D58A; border-radius:8px; padding:12px 16px; font-size:15px; margin:16px 0; }
table{ width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:15px; }
th, td{ border-bottom:1px solid var(--line); padding:9px 10px; text-align:left; vertical-align:top; }
th{ background:var(--soft); font-weight:700; }
td.num, th.num{ text-align:right; white-space:nowrap; }
.tbl{ overflow-x:auto; }
.tbl th, .tbl td{ white-space:nowrap; }
figure{ margin:18px 0 22px; }
figure svg{ width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:10px; background:#fff; }
figcaption{ font-size:13.5px; color:var(--sub); margin-top:6px; }
.cta{ margin:44px 0 10px; padding:24px; border-radius:14px; background:var(--navy); color:#fff; }
.cta h2{ margin:0 0 6px; padding:0; font-size:21px; color:#fff; }
.cta p{ color:#C9D6E3; margin:0 0 16px; }
.cta a{ display:inline-block; background:var(--yellow); color:var(--navy); font-weight:700; text-decoration:none; padding:12px 22px; border-radius:10px; font-size:16px; }
.faq h3{ margin-top:20px; }
.more{ margin-top:34px; border-top:1px solid var(--line); padding-top:18px; }
.more ul{ list-style:none; padding:0; }
.more li{ margin:0 0 8px; }
.cards{ list-style:none; padding:0; display:grid; gap:12px; }
.cards a{ display:block; border:1px solid var(--line); border-radius:12px; padding:16px 18px; text-decoration:none; color:var(--text); }
.cards a:hover{ border-color:var(--blue); }
.cards b{ display:block; font-size:17px; color:var(--navy); margin-bottom:2px; }
.cards span{ font-size:14.5px; color:var(--sub); }
footer{ border-top:1px solid var(--line); color:var(--sub); font-size:13px; text-align:center; padding:20px; }
footer a{ color:var(--sub); }
@media (max-width:600px){
  .top{ padding:0 12px; gap:8px; }
  .brand{ font-size:16px; }
  .top .lang{ padding:5px 8px; font-size:12.5px; }
  .top .go{ padding:6px 10px; font-size:13px; }
  main{ padding:20px 16px 48px; }
  h1{ font-size:25px; }
  .lead{ font-size:16.5px; }
  h2{ font-size:20px; }
}

/* calculators */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:18px 0 10px; }
.calc .fields, .calc .outs{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.calc .outs{ background:var(--soft); }
.calc .outs h2{ margin:0 0 8px; padding:0; font-size:17px; }
.f{ display:block; margin:0 0 14px; }
.f > span:first-child{ display:block; font-weight:700; font-size:14.5px; margin-bottom:4px; }
.f small{ display:block; color:var(--sub); font-size:12.5px; line-height:1.5; margin-top:3px; }
.f > .inp{ display:flex; align-items:center; border:1px solid #C5D0DB; border-radius:8px; background:#fff; overflow:hidden; }
.inp:focus-within, .f select:focus{ border-color:var(--blue); outline:none; }
.inp input{ flex:1; min-width:0; border:0; padding:9px 10px; font:inherit; font-size:16px; color:var(--text); background:transparent; outline:none; }
.inp em{ font-style:normal; color:var(--sub); padding:0 10px; font-size:14px; white-space:nowrap; }
.f select{ width:100%; border:1px solid #C5D0DB; border-radius:8px; padding:9px 10px; font:inherit; font-size:15px; background:#fff; color:var(--text); }
.o{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.o:last-of-type{ border-bottom:0; }
.o span{ color:var(--sub); }
.o b{ white-space:nowrap; }
.o.big b{ font-size:22px; color:var(--blue); }
.o.big{ align-items:baseline; }
.msg{ color:#C62828; font-size:14px; margin:8px 0 0; }
.small{ font-size:13.5px; color:var(--sub); }
@media (max-width:600px){ .calc{ grid-template-columns:1fr; } }
.calc > *{ min-width:0; }
.f select{ max-width:100%; }
.inp input{ width:100%; }