/* calc-base: shared structure. Per-site colors/personality live in theme.css */
/* Calculator look v2 — flat, paper-like, one deep-green accent. Loaded after the page's own <style>. Calculation JS is untouched. */
body{
  max-width:640px; margin:0 auto; padding:48px 22px 64px; background:var(--paper); color:var(--ink); line-height:1.7;
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1{ font-size:clamp(26px,5vw,34px); font-weight:700; letter-spacing:-.035em; line-height:1.25; margin:0 0 12px; }
body > p{ color:var(--sub); font-size:15.5px; margin:0 0 8px; max-width:34em; }

/* sections separated by lines, not floating cards */
.card{ background:transparent; border:0; border-top:2px solid var(--ink); border-radius:0; padding:22px 0 8px; margin:30px 0 0; box-shadow:none; }
.card h2{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--sub); margin:0 0 12px; }
.card ul{ margin:0; padding-left:1.1em; color:var(--ink); font-size:15px; }
.card li{ margin:6px 0; }

label{ display:block; margin:20px 0 6px; font-weight:600; font-size:14px; color:var(--ink); }
label:first-child{ margin-top:0; }
label small{ font-weight:400; color:var(--sub); }
input, select{
  width:100%; height:48px; padding:0 12px; font-size:16px; font-family:inherit; color:var(--ink);
  background:#fff; border:1px solid #bdb9aa; border-radius:var(--radius); transition:border-color .12s, box-shadow .12s;
  font-variant-numeric:tabular-nums;
}
input:hover, select:hover{ border-color:#8e8a79; }
input:focus, select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
input::placeholder{ color:#a29e8e; }

button{
  margin-top:24px; width:100%; height:52px; padding:0; font-size:16px; font-weight:700; font-family:inherit; letter-spacing:-.01em;
  color:var(--accent-ink); background:var(--accent); border:0; border-radius:var(--radius); cursor:pointer; transition:background .12s;
}
button:hover{ background:var(--accent-dark); }
button:focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 40%,transparent); outline-offset:3px; }

/* result: ruled box with a left bar and a big tabular number */
#result{ margin-top:24px; padding:18px 20px; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:0; background:#fff; font-size:15.5px; line-height:1.65; }
.ok{ background:#fff; border-color:var(--line); border-left-color:var(--accent); }
.no{ background:#fff; border-color:var(--line); border-left-color:var(--red); }
.no b, .no strong{ color:var(--red); }
.amount{ display:block; margin-top:6px; font-size:clamp(30px,7.5vw,42px); font-weight:700; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums; }
small{ color:var(--sub); }

/* links: plain text, separated by thin dividers */
nav{ display:flex; flex-wrap:wrap; gap:0; margin-top:34px; padding-top:16px; border-top:1px solid var(--line); }
nav a{ margin:0; padding:2px 16px 2px 0; margin-right:16px; font-size:14px; font-weight:500; color:var(--sub); text-decoration:none; border-right:1px solid var(--line); }
nav a:last-child{ border-right:0; }
nav a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
footer{ margin-top:28px; font-size:12.5px; color:#8e8a79; text-align:left; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* radios/checkboxes must stay native-sized */
input[type=radio], input[type=checkbox]{ width:auto; height:auto; accent-color:var(--accent, #14532d); margin-right:8px; }