/* ==========================================================================
   청온 케어 — 디자인 토큰 (유일한 정의 지점)
   방향: 도구가 주인인 견적 페이지. 밝은 쿨 바탕 위에 흰 작업 패널, 청록(187°) 하나만 상태·행동에 쓴다.
   서체는 Wanted Sans 하나로 표제·본문·숫자를 다 맡긴다(모노 없음, 숫자는 tabular-nums).
   radius 8px 한 값. 모션은 폼 상태 전환(색·테두리)뿐이다.
   ========================================================================== */

:root {
  /* ── 타입 스케일 (16px 기준, 비율 1.2) ── */
  --step--1: 0.8125rem;                                 /* 13px — 보조 기록·캡션 */
  --step-0: 1rem;                                       /* 16px — 본문·입력 */
  --step-1: 1.1875rem;                                  /* 19px — 소제목·요약 행 */
  --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);   /* 22~28px — h1(작게)·섹션 제목 */
  --step-3: clamp(2rem, 1.3rem + 1.8vw, 2.75rem);       /* 32~44px — 합계 금액 한 곳(1,297,500원 10자가 합계 열에 한 줄로 들어가는 상한) */

  --leading-tight: 1.3;
  --leading-normal: 1.7;
  --measure: 36em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 700;

  --font-body: "Wanted Sans Variable", "Wanted Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: var(--font-body);

  /* ── 색 — 밝은 쿨 바탕(#eef3f6) + 흰 패널 + 청록 187° ── */
  --surface: #eef3f6;
  --surface-raised: #ffffff;
  --surface-card: #e1eaef;
  --surface-sunken: #d8e3e9;
  --surface-inverse: #15252e;

  --ink: #112027;
  --ink-muted: #4b616c;
  --ink-faint: #586e79;          /* 흰 바탕 5.4:1, 쿨 바탕 4.8:1 — 보조 글자도 AA */
  --ink-inverse: #eef3f6;
  --ink-inverse-muted: #b2c0c7;

  --line: #ced9de;
  --line-strong: #b2c0c7;

  --accent: #156a75;          /* 바탕 위 5.6:1, 흰 글자 6.3:1 */
  --accent-hover: #0f535c;
  --accent-light: #e5f3f5;
  --accent-surface: #cde6ea;
  --accent-ink: #ffffff;

  --placeholder-ink: #4b616c;

  /* 상태색 — 운영 화면 접수 상태 알약에만 쓴다(브랜드 강조와 분리) */
  --status-new-bg: #fdf0d5;
  --status-new-ink: #7a4b08;
  --status-progress-bg: #cde6ea;
  --status-progress-ink: #0f535c;
  --status-done-bg: #dde7f6;
  --status-done-ink: #27467f;

  --scrim: rgba(21, 37, 46, 0.55);
  --shadow-panel: 0 1px 2px rgba(21, 37, 46, 0.06), 0 12px 32px -16px rgba(21, 37, 46, 0.18);
  --shadow-bar: 0 -8px 24px -12px rgba(21, 37, 46, 0.28);
  --head-bg: rgba(238, 243, 246, 0.96);

  --radius: 8px;

  /* ── 간격 ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);

  --container: 78rem;
  --pad-inline: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --control-block: 2.75rem;
  --control-pad-inline: 0.875rem;
  --action-bar-height: 4.25rem;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ── 모션 — 폼 상태 전환만 ── */
  --dur-quick: 160ms;
  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
}