/* 디자인 토큰 — 다크 테마 하나(야간 구급차 안). 값은 docs/design/03_tokens.json(4.0.0, 글래스 UI v10, 2026-10-06).
   이름은 그 JSON의 키에서 점만 하이픈으로 바꾼 것이다(color.bg.base → --color-bg-base). 글자 크기는 rem —
   사용자가 브라우저 글자를 키우면 같이 커진다(16px 기준 18px = 1.125rem).
   색은 의미로만 쓴다: 수용=초록, 불가=빨강, 무응답=회색, 발신중=파랑. 금색(브랜드)은 화면에 쓰지 않는다.
   유리층(glass-*)의 면은 HEX와 alpha를 합친 rgba다 — 둘을 따로 쓰면 안 된다(03_tokens.md). */

@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: url("../public/fonts/Pretendard-Medium.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: url("../public/fonts/Pretendard-SemiBold.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: url("../public/fonts/Pretendard-Bold.subset.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* ── 불투명 참조 팔레트 ── */
  --color-bg-base: #141414;
  --color-bg-raised: #1f1f1f;
  --color-surface-card: #242424;
  --color-text-primary: #ffffff;
  --color-text-secondary: #d1d8e0;
  --color-text-onFill: #141414;
  --color-brand-primary: #d8b86a;
  --color-state-accept: #6dd6a0;
  --color-state-decline: #ff8a8a;
  --color-state-noAnswer: #b8c2cc;
  --color-state-calling: #82b9ff;
  --color-border-control: #a2acb8;
  --color-border-divider: rgba(220, 232, 245, 0.14);
  --color-focus-ring: #ffffff;
  --color-error-text: #ff8a8a;

  /* ── 유리층: 사진 → 어두운 wash → 반투명 면 → 글자·아이콘 순. 흐림이 대비를 보장하지 않는다 —
        대비는 가장 밝은 사진(#FFFFFF)을 상한으로 합성해 계산한 값이다(03_tokens.md). ── */
  --glass-wash: linear-gradient(180deg, rgba(7, 12, 18, 0.68) 0%, rgba(7, 12, 18, 0.8) 38%, rgba(7, 12, 18, 0.84) 100%);
  --glass-panel-fill: rgba(12, 18, 25, 0.82);
  --glass-panel-edge: rgba(234, 243, 255, 0.18);
  --glass-panel-filter: blur(24px) saturate(0.65);
  --glass-info-fill: rgba(7, 12, 18, 0.82);
  --glass-info-edge: rgba(234, 243, 255, 0.1);
  --glass-info-filter: blur(12px) saturate(0.65);
  --glass-list-fill: rgba(9, 15, 22, 0.82);
  --glass-list-edge: rgba(234, 243, 255, 0.14);
  --glass-status-fill: rgba(8, 14, 21, 0.82);
  --glass-status-edge: rgba(234, 243, 255, 0.12);
  --glass-status-filter: blur(18px) saturate(0.65);
  --glass-sheet-fill: rgba(12, 18, 25, 0.9);
  --glass-sheet-edge: rgba(234, 243, 255, 0.24);
  --glass-sheet-filter: blur(24px) saturate(0.65);
  --glass-sheet-actions-fill: rgba(12, 18, 25, 0.98);
  --glass-control-fill: rgba(12, 18, 25, 0.36);
  --glass-control-sheen: rgba(210, 230, 255, 0.05);
  --glass-control-selected-fill: rgba(232, 241, 250, 0.08);
  --glass-control-ghostBorder: rgba(220, 232, 245, 0.2);
  --glass-button-secondary-fill: rgba(15, 22, 30, 0.36);
  --glass-button-disabled-fill: rgba(15, 22, 30, 0.5);
  --glass-textarea-fill: rgba(7, 12, 18, 0.72);
  --glass-transparency-reduction-fill: #17212c;

  --shadow-glass-panel: 0 16px 40px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(234, 243, 255, 0.1);
  --shadow-glass-info: inset 0 1px 0 rgba(234, 243, 255, 0.05);
  --shadow-glass-list: inset 0 1px 0 rgba(234, 243, 255, 0.06);
  --shadow-glass-status: inset 0 1px 0 rgba(234, 243, 255, 0.06);
  --shadow-sheet: 0 18px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(234, 243, 255, 0.1);
  --shadow-button-primary: 0 6px 20px rgba(0, 0, 0, 0.2);
  --shadow-control-selected: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 12px rgba(0, 0, 0, 0.12);

  /* ── 글자 ── */
  --type-family-ui: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --type-weight-body: 500;
  --type-weight-control: 600;
  --type-weight-strong: 700;
  --type-weight-heading: 600;
  --type-numeric-variant: tabular-nums lining-nums;
  --type-tracking-heading: -0.015em;
  --type-tracking-display: -0.02em;
  --type-tracking-recommendation: -0.01em;
  --type-size-sm: 1.125rem;
  --type-lineHeight-sm: 1.75rem;
  --type-size-md: 1.25rem;
  --type-lineHeight-md: 1.75rem;
  --type-size-lg: 1.5rem;
  --type-lineHeight-lg: 2rem;
  --type-size-xl: 2rem;
  --type-lineHeight-xl: 2.5rem;
  --type-size-xxl: 2.5rem;
  --type-lineHeight-xxl: 3rem;

  /* ── 간격·틀 ── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --layout-gutter: 16px;
  --layout-content-maxWidth: 430px;
  /* 조작 패널이 시작하는 자리: 쓸 수 있는 화면 높이의 40%. 그 위는 읽기만, 누르는 것은 전부 그 아래(엄지 영역). */
  --layout-thumb-startRatio: 0.4;

  --touch-min: 48px;
  --touch-preferred: 56px;
  --touch-gap: 8px;
  --touch-criticalGap: 16px;
  --button-primary-height: 64px;
  --button-secondary-height: 56px;

  --radius-card: 12px;
  --radius-control: 12px;
  --radius-sheet: 20px;
  --radius-badge: 4px;
  --radius-glass-panel: 20px;
  --radius-glass-info: 16px;
  --radius-glass-status: 16px;
  --border-control-width: 1px;
  --border-selected-width: 2px;
  --focus-width: 2px;
  --focus-offset: 2px;

  --icon-size-base: 24px;
  --icon-size-action: 32px;
  /* 글자를 아주 키웠을 때 고른 칸의 모서리로 가는 작은 체크(평소는 글자 옆 24px — intake.css). JSON `icon.size.mark`(v10 large-type 18). */
  --icon-size-mark: 18px;
  /* 선택 체크(Lucide check, 굵기 2.5)를 마스크로 칠할 때의 그림 — 칩마다 같은 그림 한 벌. */
  --icon-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --motion-state-ms: 160ms;
}

/* 흐림 효과가 없는 브라우저, 투명도를 줄인 폰 설정: 유리면을 불투명 #17212C로 바꾸고 흐림은 끈다(glass.transparency.reduction).
   선택기·버튼의 반투명은 이 면 위에 그대로 합성된다 — 대비는 03_tokens.md의 reduced 쌍으로 확인한 값이다.
   html[data-glass="opaque"]는 같은 모습을 검수할 때 켜는 손잡이다(앱이 스스로 켜지는 일은 없다). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-panel-fill: var(--glass-transparency-reduction-fill);
    --glass-info-fill: var(--glass-transparency-reduction-fill);
    --glass-list-fill: var(--glass-transparency-reduction-fill);
    --glass-status-fill: var(--glass-transparency-reduction-fill);
    --glass-sheet-fill: var(--glass-transparency-reduction-fill);
    --glass-panel-filter: none;
    --glass-info-filter: none;
    --glass-status-filter: none;
    --glass-sheet-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-panel-fill: var(--glass-transparency-reduction-fill);
    --glass-info-fill: var(--glass-transparency-reduction-fill);
    --glass-list-fill: var(--glass-transparency-reduction-fill);
    --glass-status-fill: var(--glass-transparency-reduction-fill);
    --glass-sheet-fill: var(--glass-transparency-reduction-fill);
    --glass-panel-filter: none;
    --glass-info-filter: none;
    --glass-status-filter: none;
    --glass-sheet-filter: none;
  }
}

html[data-glass="opaque"] {
  --glass-panel-fill: var(--glass-transparency-reduction-fill);
  --glass-info-fill: var(--glass-transparency-reduction-fill);
  --glass-list-fill: var(--glass-transparency-reduction-fill);
  --glass-status-fill: var(--glass-transparency-reduction-fill);
  --glass-sheet-fill: var(--glass-transparency-reduction-fill);
  --glass-panel-filter: none;
  --glass-info-filter: none;
  --glass-status-filter: none;
  --glass-sheet-filter: none;
}