/* 계산기 페이지 겉모양을 디자인 시스템에 맞춘다. 계산 로직(스크립트, 마크업)은 건드리지 않고 색/모서리/여백만 덮는다.
   계산기들은 본문 안에 자기 <style>을 갖고 있어서(헤드 CSS보다 뒤에 로드됨) 모든 규칙에 body.kd-calc를 붙여 우선순위를 올린다.
   대상: E-7-4(본문 HTML, --primary-color 변수), D-10/F-2-7/시급(visa-point-calculator-api 플러그인, --vpc-* 변수),
   환율(.kmx-*), 퇴직금(본문 HTML, .card). DESIGN.md 9번 참고. */

/* ---------- 공통: 페이지 여백 ---------- */
body.kd-calc #primary { margin-top: var(--kd-s5); padding-top: 0; }
body.kd-calc.ast-separate-container .ast-article-single { padding-top: var(--kd-s5); }

/* ---------- E-7-4 (본문 HTML) ---------- */
/* 본문 <style>이 :root에 변수를 두므로, 더 가까운 조상인 .entry-content에서 다시 정의하면 그 값이 쓰인다. */
body.kd-calc .entry-content {
  --primary-color: var(--kd-blue);
  --success-color: #1E7B45;
  --danger-color: var(--kd-sale);
  --warning-color: #9A5B00;
  --bg-color: var(--kd-bg);
  --card-bg: var(--kd-card);
  --border-color: var(--kd-line);
}
body.kd-calc .container > header { padding: var(--kd-s2) 0 var(--kd-s4); }
body.kd-calc .container h1 { color: var(--kd-ink); font-size: var(--kd-fs-xl); font-weight: 700; }
body.kd-calc .container .info-box { background: var(--kd-tint); border-radius: var(--kd-r); }
body.kd-calc .container .section { border-radius: var(--kd-r-lg); box-shadow: none; }
body.kd-calc .container .btn { border-radius: var(--kd-r); border-width: 1px; font-family: inherit; color: var(--kd-ink); }
body.kd-calc .container .btn:hover { background: var(--kd-tint); }
body.kd-calc .container .btn.active { color: #fff; }
body.kd-calc .container .reset-btn { background: var(--kd-bg); color: var(--kd-soft); font-family: inherit; }
body.kd-calc .sticky-footer { border-top-color: var(--kd-line); }
body.kd-calc .sticky-footer .all-reset-btn { background: var(--kd-ink); border-radius: var(--kd-r); font-family: inherit; }

/* ---------- D-10 / F-2-7 / 시급 (visa-point-calculator-api) ---------- */
body.kd-calc .vpc-app, body.kd-calc .vpc-wage-app {
  --vpc-primary: var(--kd-blue);
  --vpc-primary-light: var(--kd-tint);
  --vpc-success: #1E7B45;
  --vpc-danger: var(--kd-sale);
  --vpc-warn: #9A5B00;
  --vpc-ink: var(--kd-ink);
  --vpc-muted: var(--kd-soft);
  --vpc-border: var(--kd-line);
  --vpc-bg: var(--kd-bg);
  --vpc-card: var(--kd-card);
  font-family: var(--kd-font);
}
body.kd-calc .vpc-title { color: var(--kd-ink); font-weight: 700; }
body.kd-calc .vpc-section, body.kd-calc .vpc-wage-card, body.kd-calc .vpc-wage-result { border-radius: var(--kd-r-lg); box-shadow: none; }
body.kd-calc .vpc-btn, body.kd-calc .vpc-dropdown, body.kd-calc .vpc-wage-field select, body.kd-calc .vpc-wage-field input { border-radius: var(--kd-r); font-family: inherit; }
body.kd-calc .vpc-reset-all { background: var(--kd-ink); border-radius: var(--kd-r); font-family: inherit; }
body.kd-calc .vpc-reset-all:hover { background: var(--kd-blue-dark); }
body.kd-calc .vpc-source { color: var(--kd-soft); }

/* ---------- 환율 (.kmx-*) : 초록 → 파랑 ---------- */
body.kd-calc .kmx-wrap { font-family: var(--kd-font); color: var(--kd-ink); }
body.kd-calc .kmx-eyebrow, body.kd-calc .kmx-combo-code, body.kd-calc .kmx-combo-empty, body.kd-calc .kmx-send-note,
body.kd-calc .kmx-loading, body.kd-calc .kmx-cur, body.kd-calc .kmx-diff, body.kd-calc .kmx-updated, body.kd-calc .kmx-chart-empty { color: var(--kd-soft); }
body.kd-calc .kmx-combo-btn, body.kd-calc .kmx-combo-panel, body.kd-calc .kmx-card, body.kd-calc .kmx-chart-box { border-color: var(--kd-line); border-radius: var(--kd-r); }
body.kd-calc .kmx-combo-item:hover { background: var(--kd-bg); }
body.kd-calc .kmx-combo-item.is-selected { background: var(--kd-tint); }
body.kd-calc .kmx-card--best { border-color: var(--kd-blue); background: var(--kd-tint); }
body.kd-calc .kmx-crown { background: var(--kd-blue); }
body.kd-calc .kmx-card--best .kmx-card-amt { color: var(--kd-blue); }

/* ---------- 퇴직금 (본문 HTML) ---------- */
/* 본문 <style>의 body 규칙(그라데이션 배경, 화면 가운데 grid, 16px 여백)이 사이트 전체 틀을 찌그러뜨려서 되돌린다. */
body.kd-calc { display: block; place-items: normal; min-height: 0; padding: 0; background: var(--kd-bg); }
body.kd-calc .entry-content > .card { margin: 0 auto var(--kd-s6); border: 1px solid var(--kd-line); border-radius: var(--kd-r-lg); box-shadow: none; }
body.kd-calc .card label { color: var(--kd-soft); }
body.kd-calc .card input { border-color: var(--kd-line); border-radius: var(--kd-r); font-family: inherit; }
body.kd-calc .card input:focus { border-color: var(--kd-blue); box-shadow: var(--kd-focus); }
body.kd-calc .card button { background: var(--kd-blue); border-radius: var(--kd-r); font-family: inherit; }
body.kd-calc .card button:hover { background: var(--kd-blue-dark); transform: none; }
body.kd-calc .card .result { background: var(--kd-bg); border-radius: var(--kd-r); }
body.kd-calc .card .highlight { color: var(--kd-blue); }
body.kd-calc .card .info { color: var(--kd-soft); }

/* ---------- 옛 사이트 추가 CSS의 소제목 장식(.entry-content h3 꽃무늬, 초록 배경)이 계산기 안 제목에도 붙어서 지운다 ---------- */
body.kd-calc .vpc-section-title, body.kd-calc .container .section h3, body.kd-calc .kmx-wrap h3, body.kd-calc .card h3 {
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--kd-ink);
  font-size: var(--kd-fs-md);
}
body.kd-calc .vpc-section-title::before, body.kd-calc .vpc-section-title::after,
body.kd-calc .container .section h3::before, body.kd-calc .container .section h3::after { content: none; }