/* ============================================================
   디자인 토큰 — 간격 · 타이포 · 상태
   ------------------------------------------------------------
   왜 필요한가: 실측 결과 이 사이트는 간격 87종 · 글자크기 52종을
   쓰고 있었다. 하나씩 보면 멀쩡한데 모아 놓으면 리듬이 어긋난다.
   (18·22·26px, 14.5px 처럼 스케일 밖 값이 섞여 있었다.)

   색·모서리·그림자는 theme.css 가 이미 정의한다. 여기서 다시 만들지 않는다.
   이 파일은 theme.css 뒤에 로드된다 — 변수 추가와 포커스 규칙만 있고
   기존 규칙을 덮지 않는다.

   쓰는 법:  padding: var(--sp-4) var(--sp-6);
             font-size: var(--fs-body);
   ============================================================ */

:root {
  /* ── 간격: 4px 배수만. 새 화면은 이 안에서만 고른다 ───────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* 섹션 상하 여백 — 화면 폭에 따라 늘고 준다 */
  --sp-section: clamp(56px, 7vw, 96px);
  /* 본문 최대 폭 — width: min(var(--wrap), calc(100% - var(--sp-6) * 2)) */
  --wrap: 1180px;

  /* ── 타이포: /style-guide 에 정의된 스케일을 그대로 토큰화 ─── */
  --fs-xs: 12px;        /* 보조 라벨·배지 */
  --fs-caption: 13px;   /* 캡션·주석 */
  --fs-sm: 14px;        /* 표 본문·메타 */
  --fs-body: 16px;      /* 본문 기준 */
  --fs-lg: 18px;        /* 리드 문장 */
  --fs-d3: 20px;        /* Display 3 — 카드 제목 */
  --fs-d2: 28px;        /* Display 2 — 섹션 제목 */
  --fs-d1: 44px;        /* Display 1 — 페이지 제목 */
  /* 반응형 제목: 좁은 화면에서 넘치지 않게 */
  --fs-d1-fluid: clamp(30px, 4.4vw, 44px);
  --fs-d2-fluid: clamp(22px, 2.8vw, 28px);

  --lh-tight: 1.25;     /* 제목 */
  --lh-body: 1.7;       /* 본문 — 국문은 영문보다 넉넉해야 읽힌다 */
  --ls-tight: -0.03em;  /* 큰 제목 */

  /* ── 상태 ─────────────────────────────────────────────── */
  --ring: var(--rausch);          /* 키보드 포커스 링 */
  --destructive: #b3261e;         /* 삭제 등 되돌릴 수 없는 동작 */
  --destructive-hover: #8f1d17;
  --disabled-opacity: .5;

  --dur-fast: .12s;
  --dur: .18s;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* ── 키보드 포커스 표시 ──────────────────────────────────────
   기존 CSS 곳곳에 outline:none 만 있고 대체 표시가 없어서, 키보드로
   이동하면 지금 어디에 있는지 보이지 않았다(검색 셀렉트·자가진단 입력·
   절차 아코디언 등). 마우스 클릭에는 나타나지 않고 Tab 이동에만 보인다. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* 테두리를 가진 입력 요소는 링을 바깥에 겹쳐 그린다(레이아웃 흔들림 없음) */
.calc-seg select:focus-visible,
.home-search__seg select:focus-visible,
.selfcheck input:focus-visible,
.iq-field input:focus-visible,
.iq-field select:focus-visible,
.iq-field textarea:focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 28%, transparent);
}

/* ── 비활성 상태 통일 ─────────────────────────────────────── */
button[disabled],
.btn[aria-disabled="true"],
.btn[disabled] {
  opacity: var(--disabled-opacity);
  pointer-events: none;
}