@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* ============ 계산모아 · Design System "Ledger" ============ */
:root {
  --bg:#eef1ee; --surface:#ffffff; --surface-2:#f6f8f6;
  --text:#16201c; --muted:#586761; --faint:#8b968f;
  --border:#e0e6e1; --border-strong:#cdd6cf;
  --accent:#0e7c66; --accent-strong:#0b6250; --accent-soft:#e3f0eb;
  --brass:#b5893b; --danger:#bf4a30;
  --shadow-sm:0 1px 2px rgba(20,40,32,.05);
  --shadow-md:0 6px 24px -12px rgba(20,40,32,.22), 0 2px 6px -3px rgba(20,40,32,.10);
  --maxw:720px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1512; --surface:#141c18; --surface-2:#18211c;
    --text:#e7ede9; --muted:#9da8a1; --faint:#6e7a73;
    --border:#26302b; --border-strong:#333f39;
    --accent:#2fa98c; --accent-strong:#38b999; --accent-soft:#13251f;
    --brass:#c8a05a; --danger:#e0765c;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 10px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  --bg:#eef1ee; --surface:#ffffff; --surface-2:#f6f8f6; --text:#16201c; --muted:#586761;
  --faint:#8b968f; --border:#e0e6e1; --border-strong:#cdd6cf; --accent:#0e7c66;
  --accent-strong:#0b6250; --accent-soft:#e3f0eb; --brass:#b5893b; --danger:#bf4a30;
}
:root[data-theme="dark"]{
  --bg:#0e1512; --surface:#141c18; --surface-2:#18211c; --text:#e7ede9; --muted:#9da8a1;
  --faint:#6e7a73; --border:#26302b; --border-strong:#333f39; --accent:#2fa98c;
  --accent-strong:#38b999; --accent-soft:#13251f; --brass:#c8a05a; --danger:#e0765c;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px; line-height:1.65; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--accent-strong); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.tnum { font-variant-numeric:tabular-nums; }

/* ---- Header ---- */
header.site { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:62px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:19px;
  letter-spacing:-.03em; color:var(--text); }
.brand:hover { text-decoration:none; }
.brand svg { display:block; }
nav.top { display:flex; gap:22px; }
nav.top a { color:var(--muted); font-size:14.5px; font-weight:600; }
nav.top a:hover { color:var(--accent-strong); text-decoration:none; }
@media (max-width:560px){ nav.top{ gap:15px; } nav.top a{ font-size:13px; } }

/* ---- Hero / headings ---- */
.hero { padding:52px 0 8px; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong);
  background:var(--accent-soft); padding:6px 12px; border-radius:999px; }
h1 { font-size:clamp(1.9rem,1.2rem+3vw,2.65rem); font-weight:800; letter-spacing:-.035em;
  line-height:1.12; margin:20px 0 0; text-wrap:balance; }
.lead { color:var(--muted); font-size:clamp(1rem,.96rem+.3vw,1.15rem); margin:14px 0 0; max-width:38em; }
h2 { font-size:1.4rem; font-weight:750; letter-spacing:-.025em; margin:0 0 4px; }
h3 { font-size:1.06rem; font-weight:700; letter-spacing:-.02em; margin:22px 0 6px; }
.crumb { font-size:13px; color:var(--faint); margin:26px 0 0; font-weight:500; }
.crumb a { color:var(--muted); }

/* ---- Tool list (editorial rows, not emoji cards) ---- */
.tools { margin:30px 0 8px; border:1px solid var(--border); border-radius:18px;
  background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm); }
.tool { display:flex; align-items:center; gap:16px; padding:18px 20px; color:var(--text);
  border-bottom:1px solid var(--border); transition:background .15s; }
.tool:last-child { border-bottom:none; }
.tool:hover { background:var(--surface-2); text-decoration:none; }
.tool .ic { flex:none; width:42px; height:42px; border-radius:11px; background:var(--accent-soft);
  color:var(--accent-strong); display:grid; place-items:center; }
.tool .ic svg { width:22px; height:22px; }
.tool .tx { flex:1; min-width:0; }
.tool .tt { font-weight:700; font-size:15.5px; letter-spacing:-.02em; }
.tool .td { color:var(--muted); font-size:13px; margin-top:1px; }
.tool .go { flex:none; color:var(--faint); }
.tool:hover .go { color:var(--accent-strong); transform:translateX(2px); }
.tool .go svg { width:18px; height:18px; display:block; transition:transform .15s; }

/* ---- Calculator card ---- */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:26px 24px; margin:26px 0; box-shadow:var(--shadow-md); }
label { display:block; font-weight:650; font-size:13.5px; color:var(--text); margin:18px 0 7px; }
label:first-child { margin-top:0; }
.field { position:relative; }
input[type=number],input[type=text],input[type=date],select {
  width:100%; padding:13px 15px; font-size:16px; font-family:inherit; color:var(--text);
  background:var(--surface-2); border:1.5px solid var(--border-strong); border-radius:11px;
  outline:none; transition:border-color .12s, box-shadow .12s; -webkit-appearance:none; appearance:none; }
input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft); }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23586761' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.field .suffix { position:absolute; right:15px; top:50%; transform:translateY(-50%);
  color:var(--faint); font-size:14px; font-weight:600; pointer-events:none; }
.field:has(.suffix) input { padding-right:52px; }
.row { display:flex; gap:14px; } .row>* { flex:1; min-width:0; }
@media (max-width:480px){ .row{ flex-direction:column; gap:0; } }

button.calc { width:100%; margin-top:22px; padding:15px; font-size:15.5px; font-weight:700;
  font-family:inherit; letter-spacing:-.01em; color:#fff; background:var(--accent);
  border:none; border-radius:12px; cursor:pointer; transition:background .15s, transform .05s; }
button.calc:hover { background:var(--accent-strong); }
button.calc:active { transform:translateY(1px); }
button.calc:focus-visible { outline:3px solid var(--accent-soft); outline-offset:2px; }

/* ---- Result ---- */
.result { margin-top:24px; padding:22px; background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:14px; display:none; }
.result.show { display:block; animation:rise .28s ease; }
@keyframes rise { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.result .cap { font-size:13px; font-weight:650; color:var(--accent-strong); letter-spacing:-.01em; }
.result .big { font-size:clamp(2rem,1.4rem+2.6vw,2.7rem); font-weight:800; letter-spacing:-.03em;
  color:var(--text); margin-top:3px; font-variant-numeric:tabular-nums; }
.result .sub { color:var(--muted); font-size:13.5px; margin-top:2px; font-variant-numeric:tabular-nums; }
.breakdown { margin-top:18px; border-top:1px solid color-mix(in srgb,var(--accent) 18%,transparent); }
.breakdown .item { display:flex; justify-content:space-between; gap:12px; padding:10px 0;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,transparent); font-size:14.5px; }
.breakdown .item:last-child { border-bottom:none; font-weight:700; }
.breakdown .item span:first-child { color:var(--muted); }
.breakdown .item span:last-child { font-variant-numeric:tabular-nums; font-weight:650; }
.disclaimer { font-size:12px; color:var(--faint); margin:16px 0 0; line-height:1.55; }

/* ---- Prose / FAQ ---- */
.section { margin:38px 0; }
.prose p { color:var(--text); margin:0 0 12px; }
.prose p.muted, .prose .muted { color:var(--muted); }
.faq details { border:1px solid var(--border); border-radius:13px; background:var(--surface);
  padding:2px 18px; margin:10px 0; box-shadow:var(--shadow-sm); }
.faq summary { font-weight:650; font-size:15px; cursor:pointer; padding:14px 0; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--accent-strong); font-size:20px; font-weight:400; }
.faq details[open] summary::after { content:"–"; }
.faq p { color:var(--muted); font-size:14px; margin:0 0 14px; }

/* ---- Footer ---- */
footer.site { border-top:1px solid var(--border); margin-top:56px; background:var(--surface); }
footer.site .wrap { padding:30px 22px 40px; }
.foot-top { display:flex; flex-wrap:wrap; gap:10px 22px; }
.foot-top a { color:var(--muted); font-size:13.5px; font-weight:600; }
.foot-note { color:var(--faint); font-size:12.5px; margin-top:16px; line-height:1.6; max-width:46em; }

/* ---- misc ---- */
.trust { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--muted); background:var(--surface); border:1px solid var(--border);
  padding:7px 12px; border-radius:999px; }
.chip svg { width:14px; height:14px; color:var(--accent-strong); }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }