:root{--bg:#f6f8fc;--card:#fff;--ink:#0f1b33;--sub:#4a5672;--line:#dbe2ef;--ac:#1e3a8a;--ac-ink:#1e3a8a;--ac-bg:#e9eef9;
--gr:#15803d;--gr-bg:#e8f5ec;--warn:#9a3412;--warn-bg:#fff4e8;--err:#b91c1c;--shadow:0 1px 2px rgba(15,27,51,.06),0 4px 14px rgba(15,27,51,.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1220;--card:#121b2e;--ink:#e6ecf7;--sub:#a3b0c8;--line:#24324d;
--ac:#8fb0ff;--ac-ink:#b7cbff;--ac-bg:#16223b;--gr:#4ade80;--gr-bg:#12291c;--warn:#fdba74;--warn-bg:#2a1a0e;--err:#fca5a5;--shadow:none}}
:root[data-theme="dark"]{--bg:#0b1220;--card:#121b2e;--ink:#e6ecf7;--sub:#a3b0c8;--line:#24324d;--ac:#8fb0ff;--ac-ink:#b7cbff;--ac-bg:#16223b;
--gr:#4ade80;--gr-bg:#12291c;--warn:#fdba74;--warn-bg:#2a1a0e;--err:#fca5a5;--shadow:none}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--ac-ink)}
.in{max-width:760px;margin:0 auto;padding:0 16px}
header.top{background:var(--card);border-bottom:1px solid var(--line)}
header.top .in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:var(--ink);text-decoration:none}
.nav{display:flex;gap:14px;font-size:15px}.nav a{text-decoration:none;color:var(--sub)}.nav a:hover{color:var(--ac-ink)}
main{display:block;padding:20px 0 40px}
.crumb{font-size:13px;color:var(--sub);margin-bottom:8px}.crumb a{color:var(--sub)}
h1{font-size:26px;line-height:1.3;margin:4px 0 8px;letter-spacing:-.3px}
h2{font-size:20px;margin:32px 0 10px;line-height:1.35}
h3{font-size:16px;margin:18px 0 4px}
.lead{color:var(--sub);margin:0 0 16px}
.tldr{background:var(--ac-bg);border-radius:12px;padding:12px 16px;margin:0 0 18px}
.tldr>b{display:block;color:var(--ac-ink);font-size:14px}.tldr ul{margin:6px 0 0;padding-left:20px}.tldr li{margin:2px 0}
.calc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.calc fieldset{border:0;padding:0;margin:0 0 12px;display:flex;gap:8px;flex-wrap:wrap}
.calc legend{font-weight:700;font-size:14px;margin-bottom:6px;padding:0}
.seg{position:relative}.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:15px;background:var(--bg)}
.seg input:checked+span{background:var(--ac);border-color:var(--ac);color:var(--card);font-weight:700}
.seg input:focus-visible+span{outline:2px solid var(--gr);outline-offset:2px}
label{display:block;font-size:13px;color:var(--sub)}
input[type=number],input[type=text],select{display:block;width:100%;margin-top:2px;padding:9px 10px;font:inherit;font-size:16px;color:var(--ink);
background:var(--bg);border:1px solid var(--line);border-radius:10px;min-width:0}
input:focus,select:focus{outline:2px solid var(--ac);outline-offset:1px}
.ns-row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end;padding:10px 0;border-top:1px dashed var(--line)}
.ns-row .sub{grid-column:1/-1;padding-right:46px}
.ns-del{position:absolute;right:0;top:33px;width:38px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--sub);font-size:18px;cursor:pointer}
.btn{display:inline-block;padding:9px 14px;border-radius:10px;border:1px solid var(--ac);background:transparent;color:var(--ac-ink);font:inherit;font-weight:700;cursor:pointer}
@media (max-width:520px){.ns-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.res{margin-top:14px;min-height:260px}
.big{background:var(--gr-bg);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.big span{display:block;font-size:13px;color:var(--sub)}.big b{font-size:32px;color:var(--gr);margin-right:4px}.big small{display:block;color:var(--sub)}
.err{color:var(--err);font-weight:600}
.note{font-size:14px;color:var(--warn);background:var(--warn-bg);border-radius:10px;padding:10px 12px;margin:12px 0 0}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
table{border-collapse:collapse;width:100%;font-size:14px;background:var(--card)}
th,td{border:1px solid var(--line);padding:7px 8px;text-align:center;white-space:nowrap}
thead th{background:var(--ac-bg)}
.res td:last-child{white-space:normal;min-width:7.5em}tbody th{font-weight:600;text-align:left}
.gp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gp-c{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.gp-c span{display:block;font-size:13px;color:var(--sub)}.gp-c b{font-size:26px}
.gp-c.me{border-color:var(--ac)}.gp-c.pc b{color:var(--gr)}
.gp-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cpb{margin:18px auto 0;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 8px;max-width:340px}
.cpb-l{font-size:12px;color:var(--sub);font-weight:700}
.cpb-ad{min-height:250px;display:flex;justify-content:center;align-items:center;overflow:hidden}
.cpb-ad iframe{max-width:100%}
.disc{font-size:12px;color:var(--sub);margin:6px 0 0}
.ad-slot{margin:18px 0}
.prose{margin-top:8px}
.co{background:var(--warn-bg);border-left:4px solid var(--warn);border-radius:8px;padding:10px 12px;margin:12px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.card:hover{border-color:var(--ac)}
.card .ic{font-size:26px;line-height:1}.card b{display:block;font-size:17px}.card small{display:block;color:var(--sub);font-size:14px;margin-top:2px}
.hero{background:linear-gradient(135deg,var(--ac-bg),var(--gr-bg));border-radius:16px;padding:20px 18px;margin-bottom:8px}
.hero .kick{font-size:13px;font-weight:700;color:var(--gr)}
footer{border-top:1px solid var(--line);background:var(--card);font-size:13px;color:var(--sub);padding:18px 0 28px}
footer a{color:var(--sub);margin-right:12px}