/* ─────────────────────────────────────────────────────────────
   디자인 토큰
   색은 아낀다. 무채색 + 포인트 1색 + 결과색 1색이 전부다.
   장식(그라데이션·그림자·큰 라운드)을 쓰지 않는다. 정렬과 여백으로 만든다.
   ───────────────────────────────────────────────────────────── */
:root{
  /* 중립 — 순회색이 아니라 살짝 따뜻한 축. 종이에 가깝다 */
  --n0:#fcfbf7; --n50:#f6f4ee; --n100:#efece3; --n200:#e3ded2;
  --n300:#cdc6b6; --n500:#77706a; --n700:#443f3a; --n900:#1f1c19;

  /* 포인트 — 테라코타. 파랑 일색인 계산기 사이트와 갈린다 */
  --accent:#a4522f; --accent-weak:#f6ece5; --accent-line:#e0c6b6;
  /* 결과 강조 — 따뜻한 톤에 맞춰 짙은 초록 */
  --figure:#2f6a45;
  --danger:#9b3a2c;

  --bg:var(--n0); --fg:var(--n900); --muted:var(--n500);
  --line:var(--n200); --surface:var(--n50);

  --r:6px;                       /* 라운드는 작게. 크면 장난스러워진다 */
  --measure:68ch;                /* 본문 한 줄 길이 */
  --gap:clamp(20px,4vw,36px);

  --sans:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",
         -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Noto Serif KR","Nanum Myeongjo",Georgia,"Times New Roman",serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --n0:#1b1917; --n50:#211e1b; --n100:#2a2622; --n200:#38322c;
    --n300:#4b443c; --n500:#a19a91; --n700:#d6cfc6; --n900:#f2efe9;
    --accent:#e0916b; --accent-weak:#2b211b; --accent-line:#4a382c;
    --figure:#7dc79b; --danger:#e5a08e;
    --bg:var(--n0); --fg:var(--n900); --muted:var(--n500);
    --line:var(--n200); --surface:var(--n50);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  font-feature-settings:"tnum" 0;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

/* ── 헤더 ─────────────────────────────────────────── */
.site-head{
  border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:0 var(--gap); min-height:56px;
}
.brand{
  font-family:var(--serif);
  font-weight:700; font-size:17px; letter-spacing:-.01em;
  color:var(--fg); text-decoration:none; padding:14px 0;
}
.nav-toggle{
  margin-left:auto; background:none; border:1px solid var(--line);
  color:var(--fg); border-radius:var(--r); padding:5px 9px; cursor:pointer;
  font-size:15px; line-height:1;
}
.site-nav{display:none; width:100%; flex-direction:column; padding-bottom:8px}
body.nav-open .site-nav{display:flex}
.site-nav a{
  padding:9px 0; color:var(--n700); text-decoration:none; font-size:15px;
  border-top:1px solid var(--line);
}
.site-nav a[aria-current=page]{color:var(--accent); font-weight:600}
@media (min-width:900px){
  .nav-toggle{display:none}
  .site-nav{
    display:flex; flex-direction:row; width:auto; margin-left:auto;
    gap:22px; padding:0;
  }
  .site-nav a{border:0; padding:18px 0; font-size:14.5px; position:relative}
  .site-nav a[aria-current=page]::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px;
    height:2px; background:var(--accent);
  }
}

/* ── 레이아웃 ─────────────────────────────────────── */
.wrap{max-width:1120px; margin:0 auto; padding:var(--gap) var(--gap) 8px}
.tool{display:grid; column-gap:var(--gap); row-gap:0; align-items:start}
/* grid 아이템은 기본 min-width:auto 라 내용(표의 nowrap 등)보다 작아지지 않는다.
   이걸 풀지 않으면 좁은 화면에서 페이지 전체가 가로로 넘친다. */
.tool > *{min-width:0}
/* 모바일: 계산기를 설명보다 먼저 */
.tool > .calc{margin-bottom:8px}
@media (min-width:980px){
  .tool{grid-template-columns:minmax(0,1fr) 380px}
  .tool > *{grid-column:1}
  .tool > .calc{
    grid-column:2; grid-row:1 / span 99;   /* -1 은 암시적 그리드에서 안 먹는다 */
    align-self:start; position:sticky; top:76px; margin-bottom:0;
  }
}

h1{
  font-family:var(--serif);
  font-size:clamp(25px,3.5vw,33px); line-height:1.35; letter-spacing:-.01em;
  margin:0 0 12px; font-weight:700;
}
h2{
  font-family:var(--serif);
  font-size:20px; line-height:1.5; font-weight:700;
  margin:38px 0 12px; padding-top:2px;
}
h3{font-size:16px; margin:24px 0 6px; font-weight:600}
.lede{color:var(--muted); font-size:16.5px; margin:0 0 14px; max-width:var(--measure)}

/* 신뢰 표시 — 최종 수정일·근거 */
.meta{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 22px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.meta b{font-weight:600; color:var(--n700)}

/* ── 계산기 ───────────────────────────────────────── */
.calc{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); padding:20px; min-width:0;
}
.tabs{display:flex; margin:-20px -20px 18px; border-bottom:1px solid var(--line)}
.tabs button{
  flex:1 1 0; min-width:0; padding:13px 8px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--muted);
  line-height:1.35; word-break:keep-all;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
@media (min-width:420px){ .tabs button{font-size:13.5px; padding:13px 10px} }
.tabs button[aria-selected=true]{color:var(--accent); border-bottom-color:var(--accent)}
.tabs button:hover{color:var(--fg)}

.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px}
.field .hint{
  display:block; font-size:12.5px; color:var(--muted);
  font-weight:400; line-height:1.55; margin-top:3px;
}
.input-row{display:flex; align-items:stretch; gap:0}
.input-row input, .field select{
  flex:1; min-width:0; width:100%;
  padding:11px 12px; font:inherit; font-size:17px;
  font-variant-numeric:tabular-nums; text-align:right;
  border:1px solid var(--n300); border-radius:var(--r) 0 0 var(--r);
  background:var(--bg); color:var(--fg);
}
.field select{
  text-align:left; font-size:15px; border-radius:var(--r);
  padding:11px 12px; cursor:pointer;
}
.input-row input:focus, .field select:focus{
  outline:2px solid var(--accent); outline-offset:-1px; z-index:1;
}
.unit{
  display:flex; align-items:center; padding:0 12px;
  border:1px solid var(--n300); border-left:0;
  border-radius:0 var(--r) var(--r) 0;
  background:var(--n100); color:var(--muted); font-size:14px; white-space:nowrap;
}

.result{margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.result .row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; padding:4px 0; font-size:14px;
}
.result .row span{color:var(--muted)}
.result .row b{font-weight:600; font-variant-numeric:tabular-nums}
.result .row.total{
  margin-top:10px; padding-top:13px; border-top:1px solid var(--line);
}
.result .row.total span{color:var(--fg); font-weight:600; font-size:15px}
.result .row.total b{color:var(--figure); font-size:23px; letter-spacing:-.02em}
.note{
  margin:14px 0 0; padding:11px 13px; border-radius:var(--r);
  background:var(--accent-weak); color:var(--n700);
  font-size:13px; line-height:1.6;
}

/* ── 본문 ─────────────────────────────────────────── */
.content{max-width:var(--measure); min-width:0}
.content p{margin:0 0 15px}
.content ul,.content ol{margin:0 0 15px; padding-left:19px}
.content li{margin-bottom:7px}
.content li::marker{color:var(--muted)}
.content strong{font-weight:600}

.content table{
  display:block; width:100%; max-width:100%; overflow-x:auto;
  border-collapse:collapse; margin:18px 0; font-size:14px;
  white-space:nowrap; -webkit-overflow-scrolling:touch;
}
.content th,.content td{
  border-bottom:1px solid var(--line); padding:10px 14px 10px 0; text-align:left;
}
.content th{
  font-weight:600; font-size:12.5px; color:var(--muted);
  letter-spacing:.02em; border-bottom-width:1px; border-bottom-color:var(--n300);
}
.content td{font-variant-numeric:tabular-nums}

.callout{
  margin:20px 0; padding:15px 17px; border-radius:var(--r);
  background:var(--accent-weak); border:1px solid var(--accent-line);
  font-size:15px;
}
.callout.warn{background:var(--n100); border-color:var(--n300); color:var(--n700)}
.callout p{margin:0 0 10px}
.callout p:last-child{margin-bottom:0}

/* ── FAQ ──────────────────────────────────────────── */
.faq{max-width:var(--measure); min-width:0}
.faq dl{margin:0}
.faq dt{
  font-weight:600; margin-top:20px; padding-top:16px;
  border-top:1px solid var(--line); font-size:15.5px;
}
.faq dt:first-of-type{border-top:0; padding-top:0; margin-top:8px}
.faq dd{margin:7px 0 0; color:var(--n700); font-size:15px}

/* ── 목록 카드 ────────────────────────────────────── */
.tool-grid,.related ul{list-style:none; padding:0; margin:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (min-width:640px){.tool-grid{grid-template-columns:1fr 1fr}}
.tool-grid a,.related a{
  display:block; padding:16px 18px; background:var(--bg);
  text-decoration:none; color:var(--fg); height:100%;
}
.tool-grid a:hover,.related a:hover{background:var(--surface)}
.tool-grid strong,.related strong{
  display:block; margin-bottom:3px; font-size:15.5px; font-weight:600;
}
.tool-grid span,.related span{font-size:13.5px; color:var(--muted); line-height:1.6}
.related{max-width:var(--measure); min-width:0}

.ad{margin:28px 0; min-height:1px; max-width:var(--measure)}

/* ── 푸터 ─────────────────────────────────────────── */
.site-foot{
  margin-top:56px; border-top:1px solid var(--line); background:var(--surface);
}
.site-foot > *{max-width:1120px; margin-inline:auto; padding-inline:var(--gap)}
.foot-links{
  display:flex; flex-wrap:wrap; gap:10px 22px; padding-top:24px;
  font-size:14px;
}
.foot-links a{color:var(--n700); text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.disclaimer,.copy{font-size:12.5px; color:var(--muted); line-height:1.65}
.disclaimer{margin:18px auto 0; max-width:var(--measure)}
.copy{margin:8px auto 0; padding-bottom:36px}

@media print{
  .site-head,.site-nav,.ad,.related,.site-foot{display:none}
  .tool{display:block}
}