:root { color-scheme: light; --ink:#142033; --muted:#637083; --line:#dbe1e8; --paper:#fff; --ground:#f4f2ed; --blue:#2768e8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif; }
.shell { width:min(100%,680px); margin:auto; padding:48px 20px 64px; }
.hero { padding:20px 4px 28px; }
.eyebrow { margin:0 0 10px; color:var(--blue); font-weight:800; font-size:14px; letter-spacing:.02em; }
h1 { margin:0; font-size:clamp(36px,8vw,56px); line-height:1.08; letter-spacing:-.045em; }
.hero>p:last-child { color:var(--muted); font-size:17px; }
.calculator,.result,.detail { background:var(--paper); border:1px solid var(--line); padding:24px; }
.calculator { display:grid; gap:18px; }
label { display:grid; gap:8px; font-weight:750; }
input { width:100%; border:0; border-bottom:2px solid var(--line); padding:14px 2px; font:inherit; font-size:18px; color:var(--ink); outline:none; }
input:focus { border-color:var(--blue); }
button,.store { min-height:54px; border:0; background:var(--blue); color:white; display:grid; place-items:center; padding:0 18px; font:inherit; font-weight:800; text-decoration:none; cursor:pointer; }
.error { min-height:20px; margin:0; color:#bd3341; font-size:14px; }
.result { margin-top:16px; border-left:5px solid var(--blue); }
.result-label { margin:0 0 8px; color:var(--muted); }
.result strong { font-size:clamp(32px,8vw,48px); letter-spacing:-.04em; }
.notice,.store-note,footer { color:var(--muted); font-size:13px; line-height:1.6; }
.detail { margin-top:36px; }
h2 { margin:0; font-size:28px; letter-spacing:-.035em; }
ul { padding-left:20px; line-height:1.9; }
.store-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }
.store.disabled { background:#8c96a5; cursor:not-allowed; }
footer { padding:28px 4px 0; }
@media (max-width:480px) { .shell{padding-top:22px}.calculator,.result,.detail{padding:20px}.store-actions{grid-template-columns:1fr} }