/* ==========================================================================
   후유장해 보험금 계산기 — 기본 틀 (색 · 글꼴 · 버튼 · 머리글 · 바닥글)
   남색 · 샴페인 골드를 씁니다. (팀 상담용 · 개인 이름이나 연락처를 넣지 않습니다)
   ========================================================================== */
:root {
  color-scheme: light;
  --navy-950: #08131F;
  --navy-900: #0D1B2E;
  --navy-800: #16283F;
  --ink: #111C2B;
  --slate: #56657A;
  --steel: #3E5F86;
  --line: #D9E0E8;
  --line-soft: #E7ECF1;
  --mist: #F1F4F7;
  --white: #FFFFFF;
  --kakao: #FEE500;
  --kakao-hover: #F5DC00;
  --kakao-ink: #191919;
  --gold: #B08D57;
  --gold-soft: #D9C29A;
  --gold-ink: #7A5F33;
  --serif: 'Noto Serif KR', 'Nanum Myeongjo', 'AppleMyungjo', serif;
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
  --step--1: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.375rem;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--steel); outline-offset: 3px; border-radius: 2px; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; background: var(--navy-900); color: var(--white);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0 1.5rem;
  border: 1px solid transparent; border-radius: 4px;
  font: inherit; font-size: var(--step-0); font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn-sm { min-height: 42px; padding: 0 1rem; font-size: var(--step--1); }
.btn-kakao { background: var(--kakao); color: var(--kakao-ink); }
.btn-kakao:hover { background: var(--kakao-hover); }

/* 머리글 */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line-soft);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(160%) blur(12px); }
}
.header-row { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; text-decoration: none; min-width: 0; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 8px; background: var(--navy-900); color: var(--gold-soft);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-text { display: grid; line-height: 1.25; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.brand-org { font-size: 0.78rem; font-weight: 600; color: var(--gold-ink); white-space: nowrap; }

/* 바닥글 */
.site-footer { padding-block: 48px 36px; background: var(--navy-950); color: rgba(255, 255, 255, 0.78); font-size: var(--step--1); }
.site-footer :focus-visible { outline-color: var(--white); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px 48px;
  padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-name { font-family: var(--serif); font-size: var(--step-1); font-weight: 700; color: var(--white); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.6rem; }
.footer-links a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; }
.footer-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.footer-contact dt { font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); }
.footer-contact dd { color: var(--white); }
.footer-contact a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; }
.footer-contact a:hover, .footer-links a:hover { text-decoration-color: var(--white); }
.footer-solo { display: grid; gap: 0.3rem; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.footer-notice { padding-top: 24px; font-size: 0.875rem; line-height: 1.7; color: rgba(255, 255, 255, 0.62); }
.footer-notice p { max-width: 62em; }
.footer-notice p + p { margin-top: 0.5rem; }
.footer-notice .copyright { margin-top: 1.1rem; }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-contact { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 420px) {
  .header-cta .label { display: none; }
  .header-cta { padding: 0 0.8rem; }
}