/* ==========================================================================
   FestAlive Design Tokens — 아트디렉션 A "심야 네온 (Midnight Neon)"  ★ 정본 ★
   --------------------------------------------------------------------------
   ★ 이 파일이 정본이다. 토큰을 고칠 일이 생기면 **여기를** 고친다.
     배포 대상이 public/ 이고 브라우저가 실제로 읽는 파일이 이것이다.
     고친 뒤에는 설계 사본(design/tokens.css)도 같이 맞춰라:

         cp public/assets/tokens.css design/tokens.css   # 배너는 각자 다르므로 본문만 맞춘다
         # 동기화 검증 (아무 출력도 없어야 한다):
         diff <(sed -n '/^:root {/,$p' design/tokens.css)               <(sed -n '/^:root {/,$p' public/assets/tokens.css)

   · 아트디렉션은 **A(심야 네온)로 확정**되었다(사용자 선택, 2026-09-12). B안 토큰은 쓰지 않는다.
   · 순수 CSS 커스텀 프로퍼티만 쓴다. 빌드 도구·프리프로세서·프레임워크 없음.
   · 다크가 기본값이다(:root). 라이트는 덮어쓰기다. 야간 축제 현장이 주 사용처다.
   · 모든 텍스트/배경 쌍은 WCAG AA(4.5:1) 이상으로 실측 검증했다 — 근거표: design/design-system.md §9.
   · 웹폰트(@font-face)는 여기가 아니라 public/assets/app.css 에 있다. 이 파일은 "값"만 정의한다.

   테마 적용 규칙 (아래 3블록 순서를 바꾸지 마라 — 명시도가 같아 순서로 이긴다)
     1) :root                                        → 다크 (기본)
     2) @media (prefers-color-scheme: light)
          :root:not([data-theme="dark"])             → 시스템 라이트
     3) :root[data-theme="light"]                    → 사용자 강제 라이트 (최종 승자)
   JS 토글: document.documentElement.dataset.theme = 'light' | 'dark';
            시스템 설정으로 되돌리려면 delete document.documentElement.dataset.theme
   ========================================================================== */

:root {
  /* 브랜드 — 축제 오렌지 → 핑크 (기획서 3-4 / 15-1) */
  --fa-p-orange-500: #ff6b35;
  --fa-p-orange-600: #cc3a14;
  --fa-p-orange-700: #c2410c;
  --fa-p-orange-300: #ff8a5c;
  --fa-p-pink-500:   #ff3d7f;
  --fa-p-pink-600:   #b0175a;
  --fa-p-pink-700:   #c2145a;
  --fa-p-pink-300:   #ff7a9c;

  /* 중립 (블루블랙 계열 — 네온이 올라타는 바닥) */
  --fa-p-ink-950: #0a0b0f;
  --fa-p-ink-900: #14161c;
  --fa-p-ink-850: #1c1f27;
  --fa-p-ink-800: #252934;
  --fa-p-ink-700: #2e323d;
  --fa-p-ink-600: #697285;
  --fa-p-ink-400: #8b94a4;
  --fa-p-ink-300: #aeb6c4;
  --fa-p-ink-200: #c3cad6;
  --fa-p-ink-100: #e3e6eb;
  --fa-p-ink-050: #eef0f4;
  --fa-p-ink-025: #f5f6f8;
  --fa-p-white:   #ffffff;

  /* 상태 램프 원색 (4단계 good → bad) + 정보 */
  --fa-p-green-400:  #4ade80;
  --fa-p-green-800:  #0f7a45;
  --fa-p-amber-400:  #fbbf24;
  --fa-p-amber-800:  #8a5a00;
  --fa-p-orange-400: #fb923c;
  --fa-p-orange-800: #a33d06;
  --fa-p-rose-400:   #fb7185;
  --fa-p-rose-800:   #b3193b;
  --fa-p-blue-400:   #60a5fa;
  --fa-p-blue-800:   #1257b5;
}

/* --------------------------------------------------------------------------
   1. 타이포그래피 — Pretendard (기획서 15-1). 테마 무관.
      웹폰트 로딩은 앱이 한다(design-system.md 3장). 여기서는 스택만 정의한다.
   -------------------------------------------------------------------------- */
:root {
  --fa-font-sans:
    "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
    "Helvetica Neue", Arial, sans-serif;
  --fa-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "D2Coding", monospace;

  /* 숫자는 전부 tabular — 좋아요/응답수/대기시간이 갱신돼도 폭이 흔들리지 않는다 */
  --fa-numeric: tabular-nums;

  /* 크기 — 모바일 본문 최소 16px (기획서 15-1 야외 가독성) */
  --fa-text-2xs: 11px;  /* 뱃지 숫자 전용. 본문 금지 */
  --fa-text-xs:  12px;  /* 타임스탬프 · 메타 */
  --fa-text-sm:  13px;  /* 표시용 칩 · 캡션 */
  --fa-text-md:  16px;  /* 본문 기본 */
  --fa-text-lg:  18px;  /* 강조 본문 · 선택 칩 라벨 */
  --fa-text-xl:  20px;  /* 섹션 제목 */
  --fa-text-2xl: 24px;  /* 화면 제목 */
  --fa-text-3xl: 30px;  /* 축제명 */
  --fa-text-4xl: 38px;  /* 혼잡 게이지 수치 */

  --fa-lh-tight:   1.25;
  --fa-lh-snug:    1.4;
  --fa-lh-normal:  1.6;   /* 본문 기본 */
  --fa-lh-relaxed: 1.75;

  --fa-fw-regular:  400;
  --fa-fw-medium:   500;
  --fa-fw-semibold: 600;
  --fa-fw-bold:     700;
  --fa-fw-black:    800;  /* 게이지 수치 · LIVE */

  --fa-ls-tight:  -0.02em;
  --fa-ls-normal: 0;
  --fa-ls-wide:   0.06em;  /* LIVE · D-3 같은 라틴 대문자 라벨 */

  --fa-measure: 38em;      /* 본문 1줄 65~75자 상한 */
}

/* --------------------------------------------------------------------------
   2. 간격 · 반경 · 레이아웃 · z-index — 테마 무관
   -------------------------------------------------------------------------- */
:root {
  --fa-space-2:  2px;
  --fa-space-4:  4px;
  --fa-space-8:  8px;
  --fa-space-12: 12px;
  --fa-space-16: 16px;
  --fa-space-20: 20px;
  --fa-space-24: 24px;
  --fa-space-32: 32px;
  --fa-space-40: 40px;
  --fa-space-48: 48px;
  --fa-space-64: 64px;

  --fa-radius-xs:     4px;
  --fa-radius-sm:     8px;
  --fa-radius-md:     12px;  /* 카드 기본 (기획서 15-1: 12~16px) */
  --fa-radius-lg:     16px;  /* Live Board · 모달 */
  --fa-radius-xl:     20px;
  --fa-radius-pill:   999px; /* 칩 · "새 글 N개" 알약 */
  --fa-radius-circle: 50%;

  --fa-tap-min:      44px;   /* WCAG 2.5.5 / 기획서 15-1 */
  --fa-content-max:  680px;  /* 본문 최대폭 */
  --fa-viewport-min: 360px;  /* 갤럭시 최소폭 — 이 아래로 깨지면 버그 */
  --fa-gutter:       16px;
  --fa-header-h:     52px;
  --fa-tabbar-h:     56px;
  --fa-safe-top:    env(safe-area-inset-top, 0px);
  --fa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --fa-safe-left:   env(safe-area-inset-left, 0px);
  --fa-safe-right:  env(safe-area-inset-right, 0px);

  --fa-z-base:     0;
  --fa-z-sticky:  10;  /* 탭 바 · "새 글 N개" 알약 */
  --fa-z-nav:     20;  /* 하단 내비 · 헤더 */
  --fa-z-fab:     30;
  --fa-z-overlay: 40;  /* 스크림 */
  --fa-z-modal:   50;
  --fa-z-toast:   60;
}

/* --------------------------------------------------------------------------
   3. 모션 — 5 duration / 4 easing. 이 밖의 값을 코드에 직접 쓰지 마라.
   -------------------------------------------------------------------------- */
:root {
  --fa-dur-instant: 80ms;   /* 칩 탭 피드백 · 좋아요 낙관적 반영 */
  --fa-dur-fast:    140ms;  /* hover · focus · 색 전환 */
  --fa-dur-base:    220ms;  /* 알약 · 토스트 · 탭 전환 */
  --fa-dur-slow:    320ms;  /* 바텀시트 · 모달 진입 */
  --fa-dur-page:    420ms;  /* 화면 전환 */

  --fa-ease-out:    cubic-bezier(0.2, 0, 0, 1);       /* 진입 — 기본값 */
  --fa-ease-in:     cubic-bezier(0.4, 0, 1, 1);       /* 퇴장 */
  --fa-ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);     /* 상태 간 이동 */
  --fa-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* 좋아요 카운트 전용 */

  --fa-stagger:     40ms;    /* 리스트 순차 등장 간격 */
  --fa-pulse-dur:   1600ms;  /* LIVE 점 맥동 1주기 */
  --fa-shimmer-dur: 1400ms;  /* 스켈레톤 1주기 */
}

/* --------------------------------------------------------------------------
   4. 다크 테마 (기본값) — :root
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* 표면 */
  --fa-bg:            var(--fa-p-ink-950);
  --fa-surface-1:     var(--fa-p-ink-900);  /* 글 카드 */
  --fa-surface-2:     var(--fa-p-ink-850);  /* Live Board · 입력창 */
  --fa-surface-3:     var(--fa-p-ink-800);  /* 눌림 · hover */
  --fa-surface-inset: #0d0f14;              /* 게이지 트랙 */
  --fa-overlay:       rgba(4, 5, 8, 0.72);  /* 모달 스크림 */

  /* 경계 — border 는 장식, border-strong 은 컨트롤 경계(대비 3:1 보장) */
  --fa-border:        var(--fa-p-ink-700);
  --fa-border-strong: var(--fa-p-ink-600);

  /* 텍스트 */
  --fa-text-1: #f2f4f8;              /* 본문 · 제목 */
  --fa-text-2: var(--fa-p-ink-300);  /* 보조 설명 */
  --fa-text-3: var(--fa-p-ink-400);  /* 타임스탬프 · 메타 — 가장 옅은 허용치 */

  /* 브랜드 액센트 */
  --fa-accent:         var(--fa-p-orange-500);
  --fa-accent-2:       var(--fa-p-pink-500);
  --fa-accent-grad:    linear-gradient(100deg, var(--fa-accent) 0%, var(--fa-accent-2) 100%);
  --fa-on-accent:      var(--fa-p-ink-900);    /* 그라데이션 위 글자 = 먹색. 흰색은 AA 미달 */
  --fa-accent-text:    var(--fa-p-orange-300); /* 배경 위 액센트 "글자" 전용 */
  --fa-accent-deep:    var(--fa-p-orange-600); /* 흰 글자가 필요할 때의 채움색 */
  --fa-accent-deep-2:  var(--fa-p-pink-600);
  --fa-on-accent-deep: var(--fa-p-white);

  /* 포커스 */
  --fa-focus:        var(--fa-accent);
  --fa-focus-width:  3px;
  --fa-focus-offset: 2px;

  /* 그림자 — 기획서 15-1 "그림자 최소" */
  --fa-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --fa-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.55);
  --fa-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.6);            /* FAB · 바텀시트 */
  --fa-shadow-accent: 0 6px 20px rgba(255, 61, 127, 0.35); /* FAB 전용 발광 */

  /* 스켈레톤 */
  --fa-skeleton-base:  var(--fa-p-ink-850);
  --fa-skeleton-shine: var(--fa-p-ink-800);

  /* ---- 상태 칩 (이 디자인 시스템의 주인공) -----------------------------
     sev-0 = 가장 좋음 → sev-3 = 가장 나쁨. 7개 칩 분류가 이 램프를 공유한다.
     색만으로 의미를 전달하지 않는다 — 칩은 항상 텍스트 라벨을 함께 낸다.
     분류별 매핑표: design-system.md 5장                                    */
  --fa-sev-0-bg: #0e2a1e;  --fa-sev-0-fg: var(--fa-p-green-400);  --fa-sev-0-bd: #1f5138;
  --fa-sev-1-bg: #2e2410;  --fa-sev-1-fg: var(--fa-p-amber-400);  --fa-sev-1-bd: #5a4413;
  --fa-sev-2-bg: #331a0e;  --fa-sev-2-fg: var(--fa-p-orange-400); --fa-sev-2-bd: #60331a;
  --fa-sev-3-bg: #331318;  --fa-sev-3-fg: var(--fa-p-rose-400);   --fa-sev-3-bd: #62222c;

  --fa-chip-info-bg:    #10233a;             --fa-chip-info-fg:    var(--fa-p-blue-400); --fa-chip-info-bd:    #1e4370;
  --fa-chip-neutral-bg: var(--fa-p-ink-850); --fa-chip-neutral-fg: var(--fa-p-ink-200);  --fa-chip-neutral-bd: #333845;
  --fa-chip-live-bg:    #2e1016;             --fa-chip-live-fg:    var(--fa-p-pink-300); --fa-chip-live-bd:    #61202f;
  /* 글쓰기 화면의 "아직 안 고른" 칩 */
  --fa-chip-idle-bg: transparent; --fa-chip-idle-fg: var(--fa-text-2); --fa-chip-idle-bd: var(--fa-border-strong);

  /* 시맨틱 알림 — 상태 램프 재사용 */
  --fa-success-bg: var(--fa-sev-0-bg);      --fa-success-fg: var(--fa-sev-0-fg);      --fa-success-bd: var(--fa-sev-0-bd);
  --fa-warning-bg: var(--fa-sev-1-bg);      --fa-warning-fg: var(--fa-sev-1-fg);      --fa-warning-bd: var(--fa-sev-1-bd);
  --fa-danger-bg:  var(--fa-sev-3-bg);      --fa-danger-fg:  var(--fa-sev-3-fg);      --fa-danger-bd:  var(--fa-sev-3-bd);
  --fa-info-bg:    var(--fa-chip-info-bg);  --fa-info-fg:    var(--fa-chip-info-fg);  --fa-info-bd:    var(--fa-chip-info-bd);

  /* 게이지 */
  --fa-gauge-track: var(--fa-surface-inset);

  /* 이미지 없는 축제의 대체 배경 8색 — 축제마다 fs_id 로 고정(app.js thumb). 다크 = 가라앉힌 바탕 + 밝은 글자 */
  --fa-ph-0-bg: #3a2418;  --fa-ph-0-fg: #ffc2a3;
  --fa-ph-1-bg: #3a1c28;  --fa-ph-1-fg: #ffb3cb;
  --fa-ph-2-bg: #3a3016;  --fa-ph-2-fg: #ffe08a;
  --fa-ph-3-bg: #183228;  --fa-ph-3-fg: #a8e6c4;
  --fa-ph-4-bg: #172a3d;  --fa-ph-4-fg: #a9cff5;
  --fa-ph-5-bg: #2a2340;  --fa-ph-5-fg: #cbbcff;
  --fa-ph-6-bg: #15333a;  --fa-ph-6-fg: #9fe0e0;
  --fa-ph-7-bg: #33291d;  --fa-ph-7-fg: #e6d2b0;
}

/* --------------------------------------------------------------------------
   5. 라이트 테마 — 시스템 설정 (data-theme="dark" 로 강제된 경우 제외)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --fa-bg:            var(--fa-p-ink-025);
    --fa-surface-1:     var(--fa-p-white);
    --fa-surface-2:     var(--fa-p-ink-050);
    --fa-surface-3:     #e5e8ed;
    --fa-surface-inset: var(--fa-p-ink-050);
    --fa-overlay:       rgba(10, 11, 15, 0.5);

    --fa-border:        var(--fa-p-ink-100);
    --fa-border-strong: #7a8497;

    --fa-text-1: var(--fa-p-ink-900);
    --fa-text-2: #4a525f;
    --fa-text-3: #5c6579;  /* 기획서 15-1: #999 이하 금지. 여기가 하한이다 */

    --fa-accent:         var(--fa-p-orange-500);
    --fa-accent-2:       var(--fa-p-pink-500);
    --fa-accent-grad:    linear-gradient(100deg, var(--fa-accent) 0%, var(--fa-accent-2) 100%);
    --fa-on-accent:      var(--fa-p-ink-900);
    --fa-accent-text:    var(--fa-p-orange-700);
    --fa-accent-deep:    var(--fa-p-orange-600);
    --fa-accent-deep-2:  var(--fa-p-pink-600);
    --fa-on-accent-deep: var(--fa-p-white);

    --fa-focus: var(--fa-p-orange-700);

    --fa-shadow-1: 0 1px 2px rgba(16, 20, 28, 0.08);
    --fa-shadow-2: 0 4px 12px rgba(16, 20, 28, 0.10);
    --fa-shadow-3: 0 8px 24px rgba(16, 20, 28, 0.14);
    --fa-shadow-accent: 0 6px 20px rgba(255, 61, 127, 0.28);

    --fa-skeleton-base:  var(--fa-p-ink-050);
    --fa-skeleton-shine: var(--fa-p-white);

    --fa-sev-0-bg: #e7f8ef;  --fa-sev-0-fg: var(--fa-p-green-800);  --fa-sev-0-bd: #b7e6cd;
    --fa-sev-1-bg: #fff5db;  --fa-sev-1-fg: var(--fa-p-amber-800);  --fa-sev-1-bd: #f2dca4;
    --fa-sev-2-bg: #ffede0;  --fa-sev-2-fg: var(--fa-p-orange-800); --fa-sev-2-bd: #fbd3b6;
    --fa-sev-3-bg: #ffe9ec;  --fa-sev-3-fg: var(--fa-p-rose-800);   --fa-sev-3-bd: #fac5ce;

    --fa-chip-info-bg:    #e8f1fe;             --fa-chip-info-fg:    var(--fa-p-blue-800); --fa-chip-info-bd:    #c2dbfb;
    --fa-chip-neutral-bg: var(--fa-p-ink-050); --fa-chip-neutral-fg: #4a525f;              --fa-chip-neutral-bd: #dce0e6;
    --fa-chip-live-bg:    #ffe7ef;             --fa-chip-live-fg:    var(--fa-p-pink-700); --fa-chip-live-bd:    #fbc4d8;
    --fa-chip-idle-bg: transparent; --fa-chip-idle-fg: #4a525f; --fa-chip-idle-bd: #7a8497;

    --fa-success-bg: var(--fa-sev-0-bg);     --fa-success-fg: var(--fa-sev-0-fg);     --fa-success-bd: var(--fa-sev-0-bd);
    --fa-warning-bg: var(--fa-sev-1-bg);     --fa-warning-fg: var(--fa-sev-1-fg);     --fa-warning-bd: var(--fa-sev-1-bd);
    --fa-danger-bg:  var(--fa-sev-3-bg);     --fa-danger-fg:  var(--fa-sev-3-fg);     --fa-danger-bd:  var(--fa-sev-3-bd);
    --fa-info-bg:    var(--fa-chip-info-bg); --fa-info-fg:    var(--fa-chip-info-fg); --fa-info-bd:    var(--fa-chip-info-bd);

    --fa-gauge-track: #e5e8ed;

    /* 이미지 없는 축제의 대체 배경 8색 — 라이트 = 연한 바탕 + 짙은 글자 (5·6번 블록 동일) */
    --fa-ph-0-bg: #ffe8dc;  --fa-ph-0-fg: #9a3b12;
    --fa-ph-1-bg: #ffe4ec;  --fa-ph-1-fg: #9d1f4f;
    --fa-ph-2-bg: #fff4cc;  --fa-ph-2-fg: #7a5a00;
    --fa-ph-3-bg: #dcf5e8;  --fa-ph-3-fg: #1f6b45;
    --fa-ph-4-bg: #dfefff;  --fa-ph-4-fg: #1d5a96;
    --fa-ph-5-bg: #ece6ff;  --fa-ph-5-fg: #5a3fa8;
    --fa-ph-6-bg: #d9f4f4;  --fa-ph-6-fg: #16676b;
    --fa-ph-7-bg: #f2ece2;  --fa-ph-7-fg: #6b5536;
  }
}

/* --------------------------------------------------------------------------
   6. 라이트 테마 — 사용자 강제. 반드시 5번 블록보다 뒤에 온다.
      (명시도가 같으므로 순서로 이긴다. 위로 옮기면 시스템 설정이 이겨버린다.)
      ⚠️ 이 블록의 선언은 5번 블록과 **항상 바이트 단위로 동일**해야 한다.
         한쪽만 고치면 "시스템 라이트"와 "강제 라이트"가 조용히 달라진다.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --fa-bg:            var(--fa-p-ink-025);
  --fa-surface-1:     var(--fa-p-white);
  --fa-surface-2:     var(--fa-p-ink-050);
  --fa-surface-3:     #e5e8ed;
  --fa-surface-inset: var(--fa-p-ink-050);
  --fa-overlay:       rgba(10, 11, 15, 0.5);

  --fa-border:        var(--fa-p-ink-100);
  --fa-border-strong: #7a8497;

  --fa-text-1: var(--fa-p-ink-900);
  --fa-text-2: #4a525f;
  --fa-text-3: #5c6579;

  --fa-accent:         var(--fa-p-orange-500);
  --fa-accent-2:       var(--fa-p-pink-500);
  --fa-accent-grad:    linear-gradient(100deg, var(--fa-accent) 0%, var(--fa-accent-2) 100%);
  --fa-on-accent:      var(--fa-p-ink-900);
  --fa-accent-text:    var(--fa-p-orange-700);
  --fa-accent-deep:    var(--fa-p-orange-600);
  --fa-accent-deep-2:  var(--fa-p-pink-600);
  --fa-on-accent-deep: var(--fa-p-white);

  --fa-focus: var(--fa-p-orange-700);

  --fa-shadow-1: 0 1px 2px rgba(16, 20, 28, 0.08);
  --fa-shadow-2: 0 4px 12px rgba(16, 20, 28, 0.10);
  --fa-shadow-3: 0 8px 24px rgba(16, 20, 28, 0.14);
  --fa-shadow-accent: 0 6px 20px rgba(255, 61, 127, 0.28);

  --fa-skeleton-base:  var(--fa-p-ink-050);
  --fa-skeleton-shine: var(--fa-p-white);

  --fa-sev-0-bg: #e7f8ef;  --fa-sev-0-fg: var(--fa-p-green-800);  --fa-sev-0-bd: #b7e6cd;
  --fa-sev-1-bg: #fff5db;  --fa-sev-1-fg: var(--fa-p-amber-800);  --fa-sev-1-bd: #f2dca4;
  --fa-sev-2-bg: #ffede0;  --fa-sev-2-fg: var(--fa-p-orange-800); --fa-sev-2-bd: #fbd3b6;
  --fa-sev-3-bg: #ffe9ec;  --fa-sev-3-fg: var(--fa-p-rose-800);   --fa-sev-3-bd: #fac5ce;

  --fa-chip-info-bg:    #e8f1fe;             --fa-chip-info-fg:    var(--fa-p-blue-800); --fa-chip-info-bd:    #c2dbfb;
  --fa-chip-neutral-bg: var(--fa-p-ink-050); --fa-chip-neutral-fg: #4a525f;              --fa-chip-neutral-bd: #dce0e6;
  --fa-chip-live-bg:    #ffe7ef;             --fa-chip-live-fg:    var(--fa-p-pink-700); --fa-chip-live-bd:    #fbc4d8;
  --fa-chip-idle-bg: transparent; --fa-chip-idle-fg: #4a525f; --fa-chip-idle-bd: #7a8497;

  --fa-success-bg: var(--fa-sev-0-bg);     --fa-success-fg: var(--fa-sev-0-fg);     --fa-success-bd: var(--fa-sev-0-bd);
  --fa-warning-bg: var(--fa-sev-1-bg);     --fa-warning-fg: var(--fa-sev-1-fg);     --fa-warning-bd: var(--fa-sev-1-bd);
  --fa-danger-bg:  var(--fa-sev-3-bg);     --fa-danger-fg:  var(--fa-sev-3-fg);     --fa-danger-bd:  var(--fa-sev-3-bd);
  --fa-info-bg:    var(--fa-chip-info-bg); --fa-info-fg:    var(--fa-chip-info-fg); --fa-info-bd:    var(--fa-chip-info-bd);

  --fa-gauge-track: #e5e8ed;

  /* 이미지 없는 축제의 대체 배경 8색 — 라이트 = 연한 바탕 + 짙은 글자 (5·6번 블록 동일) */
  --fa-ph-0-bg: #ffe8dc;  --fa-ph-0-fg: #9a3b12;
  --fa-ph-1-bg: #ffe4ec;  --fa-ph-1-fg: #9d1f4f;
  --fa-ph-2-bg: #fff4cc;  --fa-ph-2-fg: #7a5a00;
  --fa-ph-3-bg: #dcf5e8;  --fa-ph-3-fg: #1f6b45;
  --fa-ph-4-bg: #dfefff;  --fa-ph-4-fg: #1d5a96;
  --fa-ph-5-bg: #ece6ff;  --fa-ph-5-fg: #5a3fa8;
  --fa-ph-6-bg: #d9f4f4;  --fa-ph-6-fg: #16676b;
  --fa-ph-7-bg: #f2ece2;  --fa-ph-7-fg: #6b5536;
}

/* --------------------------------------------------------------------------
   7. 상태 칩 치수 토큰 — 테마 무관. 칩이 이 시스템의 주인공이다.
      · select  = 글쓰기 화면에서 손가락으로 고르는 칩 → 44px 이상 (WCAG 2.5.5)
      · display = 피드에 읽기 전용으로 박히는 칩       → 30px (밀도 우선)
   -------------------------------------------------------------------------- */
:root {
  --fa-chip-radius:          var(--fa-radius-pill);
  --fa-chip-border-w:        1px;
  --fa-chip-border-w-active: 2px;  /* 선택 상태를 "색만으로" 표시하지 않는다 */
  --fa-chip-gap:             8px;  /* 인접 탭 타깃 최소 간격 */
  --fa-chip-icon:            16px; /* 아이콘 슬롯 고정 크기 */

  --fa-chip-h-select:     44px;
  --fa-chip-pad-x-select: 14px;
  --fa-chip-font-select:  var(--fa-text-lg);

  --fa-chip-h-display:     30px;
  --fa-chip-pad-x-display: 10px;
  --fa-chip-font-display:  var(--fa-text-sm);

  /* 혼잡 게이지 */
  --fa-gauge-h:       10px;
  --fa-gauge-radius:  var(--fa-radius-pill);
  --fa-gauge-pip-gap: 3px;  /* 색맹 대응 — 4단계를 칸 수로도 표시한다 */

  /* LIVE 점 */
  --fa-livedot-size: 8px;
  --fa-livedot-ring: 4px;
}

/* --------------------------------------------------------------------------
   8. 모션 축소 — prefers-reduced-motion
      duration 토큰 자체를 0 에 가깝게 만든다. 이 토큰만 쓰면 자동으로 지켜진다.
      ⚠️ 앱은 여기에 더해 design-system.md 8장의 전역 리셋 블록도 넣어야 한다
         (@keyframes 로 도는 LIVE 맥동·스켈레톤 shimmer 를 실제로 멈추기 위함).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fa-dur-instant: 0.01ms;
    --fa-dur-fast:    0.01ms;
    --fa-dur-base:    0.01ms;
    --fa-dur-slow:    0.01ms;
    --fa-dur-page:    0.01ms;
    --fa-stagger:     0ms;
    --fa-pulse-dur:   0ms;
    --fa-shimmer-dur: 0ms;
  }
}