/*
 * Envoys Club 디자인 토큰.
 *
 * 정본은 _brand/design-system.md다. 값이 어긋나면 그 문서를 기준으로 이 파일을 고친다.
 * 여기 적힌 색 값은 app/design-system-preview.html의 :root 토큰 블록과 대조해 일치를
 * 확인했다(2단계 마이그레이션, 2026-08).
 *
 * 모든 살아 있는 앱 HTML(app.css/console.css/site.css/components.css를 부르는 페이지)이
 * 이 파일을 가장 먼저 <link>한다. 3단계 별칭 계층과 4단계 폰트가 이 파일을 정본으로 참조한다.
 *
 * 담는 것: 색 12단계(envoy 라이트·다크, paper, ink, 상태색 4종 라이트·다크),
 *         타이포 스케일, 간격 스케일, 역할별 반경, 그림자(라이트·다크),
 *         SUIT Variable 자체 호스팅 @font-face, CJK 로컬 폴백 @font-face,
 *         언어별 폰트 스택과 html[lang] 전환, 모션 토큰.
 * 담지 않는 것: Noto Sans JP/TC/SC 본체 @font-face(용량 때문에 assets/fonts/noto-sans-*.css
 *         3개로 분리, 필요한 페이지에서만 <link>), 의미 토큰(--ec-*)은 이 파일 안에
 *         있지만 색상 팔레트 자체는 아니다.
 */

/* ===================== 폰트: SUIT Variable 자체 호스팅 (design-system.md 3.5) =====================
 * 출처: github.com/sun-typeface/SUIT (SIL Open Font License 1.1, 상업적 사용·재배포·서브셋 허용).
 * 라이선스 원문은 assets/fonts/SUIT-LICENSE.txt에 그대로 보존한다.
 * 상용 한글 2,350자(KS X 1001 완성형)와 라틴, 숫자, 문장부호로 서브셋했다(약 497KB, woff2).
 * 한국어는 이 제품의 기본 언어라 외부 CDN(jsdelivr)에 걸어두지 않는다. */
@font-face {
  font-family: "SUIT Variable";
  src: url("assets/fonts/SUIT-Variable.woff2") format("woff2-variations"),
       url("assets/fonts/SUIT-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===================== 폰트: CJK 로컬 폴백 (design-system.md 3.5) =====================
 * Noto Sans JP/TC/SC는 용량이 커서(수 MB) 자체 호스팅하지 않고 Google Fonts에 남긴다
 * (assets/fonts/noto-sans-{jp,tc,sc}.css, 필요한 페이지에서 <link>). fonts.gstatic.com이
 * 차단되면 그 요청이 통째로 실패하므로, 여기서는 OS에 이미 설치된 서체를 size-adjust와
 * ascent/descent-override로 Noto Sans 계열 자수에 맞춰 재선언해 둔다. 글꼴 자체가
 * 오지 않아도 자간·행간·자리가 흔들리지 않는 것이 목적이지, 자형까지 Noto와 같게
 * 만들 수는 없다. */
@font-face {
  font-family: "Hiragino Fallback";
  src: local("Hiragino Sans"), local("Hiragino Kaku Gothic ProN");
  size-adjust: 94%;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "YuGothic Fallback";
  src: local("Yu Gothic"), local("Meiryo");
  size-adjust: 94%;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "PingFangTC Fallback";
  src: local("PingFang TC"), local("Microsoft JhengHei");
  size-adjust: 94%;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "PingFangSC Fallback";
  src: local("PingFang SC"), local("Microsoft YaHei");
  size-adjust: 94%;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}

:root {
  /* ===================== 색: envoy (브랜드 주황 12단계, 라이트) ===================== */
  --envoy-1: #fefcfb;
  --envoy-2: #fff6eb;
  --envoy-3: #ffedd3;
  --envoy-4: #ffdbb1;
  --envoy-5: #ffcc96;
  --envoy-6: #ffba7e;
  --envoy-7: #fca364;
  --envoy-8: #f38645;
  --envoy-9: #ff4d00;
  --envoy-10: #f54100;
  --envoy-11: #cf3600;
  --envoy-12: #5a2717;

  /* ===================== 색: envoy 다크 12단계 ===================== */
  --envoyd-1: #17110d;
  --envoyd-2: #1f150d;
  --envoyd-3: #341b05;
  --envoyd-4: #451d00;
  --envoyd-5: #552400;
  --envoyd-6: #682e00;
  --envoyd-7: #823c0d;
  --envoyd-8: #a84c1a;
  --envoyd-9: #ff4d00;
  --envoyd-10: #ff7029;
  --envoyd-11: #ff9656;
  --envoyd-12: #ffddbf;

  /* ===================== 색: paper (따뜻한 중립 라이트 12단계) ===================== */
  --paper-1: #fbf9f6;
  --paper-2: #f7f5f1;
  --paper-3: #efede8;
  --paper-4: #e8e5df;
  --paper-5: #e2dfd8;
  --paper-6: #dbd7d0;
  --paper-7: #d1cdc5;
  --paper-8: #bebab1;
  --paper-9: #908c83;
  --paper-10: #858179;
  --paper-11: #66625c;
  --paper-12: #22201b;

  /* 브랜드 크림 표면. paper 스케일 안에는 넣지 않는다(2.3 참고) */
  --cream: #fffaf2;

  /* ===================== 색: ink (다크 중립 12단계, paper와 같은 색상각) ===================== */
  --ink-1: #12110f;
  --ink-2: #1a1917;
  --ink-3: #23221f;
  --ink-4: #2b2a26;
  --ink-5: #33312c;
  --ink-6: #3c3a35;
  --ink-7: #4b4842;
  --ink-8: #636058;
  --ink-9: #716d64;
  --ink-10: #7e7a73;
  --ink-11: #b6b3ac;
  --ink-12: #f0eee9;

  /* ===================== 색: 상태 (Radix 원본 값, 손대지 않음) ===================== */
  /* 성공 — green */
  --green-1: #fbfefc;
  --green-2: #f4fbf6;
  --green-3: #e6f6eb;
  --green-4: #d6f1df;
  --green-5: #c4e8d1;
  --green-6: #adddc0;
  --green-7: #8eceaa;
  --green-8: #5bb98b;
  --green-9: #30a46c;
  --green-10: #2b9a66;
  --green-11: #218358;
  --green-12: #193b2d;

  --greend-1: #0e1512;
  --greend-2: #121b17;
  --greend-3: #132d21;
  --greend-4: #113b29;
  --greend-5: #174933;
  --greend-6: #20573e;
  --greend-7: #28684a;
  --greend-8: #2f7c57;
  --greend-9: #30a46c;
  --greend-10: #33b074;
  --greend-11: #3dd68c;
  --greend-12: #b1f1cb;

  /* 경고 — amber */
  --amber-1: #fefdfb;
  --amber-2: #fefbe9;
  --amber-3: #fff7c2;
  --amber-4: #ffee9c;
  --amber-5: #fbe577;
  --amber-6: #f3d673;
  --amber-7: #e9c162;
  --amber-8: #e2a336;
  --amber-9: #ffc53d;
  --amber-10: #ffba18;
  --amber-11: #ab6400;
  --amber-12: #4f3422;

  --amberd-1: #16120c;
  --amberd-2: #1d180f;
  --amberd-3: #302008;
  --amberd-4: #3f2700;
  --amberd-5: #4d3000;
  --amberd-6: #5c3d05;
  --amberd-7: #714f19;
  --amberd-8: #8f6424;
  --amberd-9: #ffc53d;
  --amberd-10: #ffd60a;
  --amberd-11: #ffca16;
  --amberd-12: #ffe7b3;

  /* 위험 — ruby (red가 아니라 ruby. 근거는 design-system.md 2.5) */
  --ruby-1: #fffcfd;
  --ruby-2: #fff7f8;
  --ruby-3: #feeaed;
  --ruby-4: #ffdce1;
  --ruby-5: #ffced6;
  --ruby-6: #f8bfc8;
  --ruby-7: #efacb8;
  --ruby-8: #e592a3;
  --ruby-9: #e54666;
  --ruby-10: #dc3b5d;
  --ruby-11: #ca244d;
  --ruby-12: #64172b;

  --rubyd-1: #191113;
  --rubyd-2: #1e1517;
  --rubyd-3: #3a141e;
  --rubyd-4: #4e1325;
  --rubyd-5: #5e1a2e;
  --rubyd-6: #6f2539;
  --rubyd-7: #883447;
  --rubyd-8: #b3445a;
  --rubyd-9: #e54666;
  --rubyd-10: #ec5a72;
  --rubyd-11: #ff949d;
  --rubyd-12: #fed2e1;

  /* 정보 — blue */
  --blue-1: #fbfdff;
  --blue-2: #f4faff;
  --blue-3: #e6f4fe;
  --blue-4: #d5efff;
  --blue-5: #c2e5ff;
  --blue-6: #acd8fc;
  --blue-7: #8ec8f6;
  --blue-8: #5eb1ef;
  --blue-9: #0090ff;
  --blue-10: #0588f0;
  --blue-11: #0d74ce;
  --blue-12: #113264;

  --blued-1: #0d1520;
  --blued-2: #111927;
  --blued-3: #0d2847;
  --blued-4: #003362;
  --blued-5: #004074;
  --blued-6: #104d87;
  --blued-7: #205d9e;
  --blued-8: #2870bd;
  --blued-9: #0090ff;
  --blued-10: #3b9eff;
  --blued-11: #70b8ff;
  --blued-12: #c2e6ff;

  /* 외부 브랜드색. 스케일에 넣지 않고 격리한다(design-system.md 10.4).
     카카오/구글 로그인 버튼은 라이트/다크 사이트 테마와 무관하게 각 플랫폼이
     정한 고정 조합(배경·글자·테두리)을 써야 한다 - 두 플랫폼 다 로그인 버튼
     디자인 가이드에서 이 조합을 벗어나지 않도록 요구한다. 그래서 --ec-* 의미
     토큰이 아니라 여기 --brand-*로 별도 격리하고, app.css의 .social-btn.kakao/
     .social-btn.google에서만 참조한다.
     fix: 시각 검사 사각지대 확장(라운드 7). --brand-kakao-text/-hover는
     app.css:112-113에 리터럴(#191600/#ffd900)로 남아 있던 값을 토큰화한 것 -
     var()를 못 쓰는 자리가 아니라 그냥 마이그레이션이 안 된 리터럴이었다. */
  --brand-kakao: #fee500;
  --brand-kakao-text: #191600;
  --brand-kakao-hover: #ffd900;
  --brand-google-bg: #ffffff;
  --brand-google-text: #1f1f1f;
  --brand-google-border: #dadce0;

  /* ===================== 타이포 스케일 (design-system.md 3.6) ===================== */
  /* 마케팅 면과 콘솔이 같은 스케일을 쓰되 쓰는 구간이 다르다. 자간은 한국어 기준값이다. */
  --t-display-1-size: 56px;
  --t-display-1-weight: 800;
  --t-display-1-leading: 1.12;
  --t-display-1-tracking: -0.035em;

  --t-display-2-size: 40px;
  --t-display-2-weight: 800;
  --t-display-2-leading: 1.16;
  --t-display-2-tracking: -0.03em;

  --t-title-1-size: 30px;
  --t-title-1-weight: 700;
  --t-title-1-leading: 1.24;
  --t-title-1-tracking: -0.03em;

  --t-title-2-size: 24px;
  --t-title-2-weight: 700;
  --t-title-2-leading: 1.3;
  --t-title-2-tracking: -0.025em;

  --t-title-3-size: 19px;
  --t-title-3-weight: 700;
  --t-title-3-leading: 1.36;
  --t-title-3-tracking: -0.02em;

  --t-title-4-size: 16px;
  --t-title-4-weight: 600;
  --t-title-4-leading: 1.4;
  --t-title-4-tracking: -0.015em;

  --t-body-lg-size: 17px;
  --t-body-lg-weight: 400;
  --t-body-lg-leading: 1.65;
  --t-body-lg-tracking: -0.01em;

  --t-body-size: 15px;
  --t-body-weight: 400;
  --t-body-leading: 1.6;
  --t-body-tracking: -0.005em;

  --t-body-sm-size: 13.5px;
  --t-body-sm-weight: 400;
  --t-body-sm-leading: 1.55;
  --t-body-sm-tracking: 0em;

  --t-label-size: 13px;
  --t-label-weight: 600;
  --t-label-leading: 1.3;
  --t-label-tracking: 0em;

  --t-caption-size: 12px;
  --t-caption-weight: 500;
  --t-caption-leading: 1.45;
  --t-caption-tracking: 0em;

  --t-micro-size: 11px;
  --t-micro-weight: 600;
  --t-micro-leading: 1.2;
  --t-micro-tracking: 0em;

  /* ===================== 간격 스케일 (design-system.md 4) ===================== */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --sp-10: 40px;
  --sp-11: 56px;
  --sp-12: 72px;

  --section-y: var(--sp-11);

  /* ===================== 반경: 역할별 6단계 (design-system.md 5) ===================== */
  --r-0: 0;
  --r-1: 3px;
  --r-2: 5px;
  --r-3: 7px;
  --r-4: 10px;
  --r-5: 14px;
  --r-pill: 999px;

  /* ===================== 그림자: 라이트 (design-system.md 6.1) ===================== */
  /* 검정이 아니라 paper-12의 알파. 종이 위에 검정 그림자를 얹으면 종이색이 죽는다 */
  --sh-1: 0 1px 2px rgba(34, 32, 27, 0.05);
  --sh-2: 0 1px 2px rgba(34, 32, 27, 0.06), 0 4px 10px -2px rgba(34, 32, 27, 0.06);
  --sh-3: 0 2px 4px rgba(34, 32, 27, 0.06), 0 12px 28px -6px rgba(34, 32, 27, 0.1);
  --sh-4: 0 4px 8px rgba(34, 32, 27, 0.06), 0 28px 64px -12px rgba(34, 32, 27, 0.18);

  /* ===================== 의미 토큰: 라이트 기본값 (design-system.md 9) ===================== */
  /* 컴포넌트 CSS는 스케일 토큰(--paper-*, --ink-*, --envoy-*)을 직접 부르지 않고
     이 의미 토큰만 부른다. 모드 전환은 [data-theme="dark"] 블록의 재정의 하나로 끝난다. */
  --ec-bg: var(--paper-2);
  --ec-bg-subtle: var(--paper-1);
  --ec-surface: var(--cream);
  --ec-surface-hover: var(--paper-1);
  --ec-surface-active: var(--paper-3);
  --ec-line: var(--paper-6);
  --ec-line-strong: var(--paper-7);
  --ec-field-bg: var(--paper-1);
  --ec-field-line: var(--paper-7);
  --ec-field-line-hover: var(--paper-8);
  --ec-text: var(--paper-12);
  --ec-text-muted: var(--paper-11);
  --ec-icon: var(--paper-10);
  --ec-text-disabled: var(--paper-9);
  --ec-text-on-solid: #ffffff;

  --ec-accent-bg: var(--envoy-3);
  --ec-accent-bg-hover: var(--envoy-4);
  --ec-accent-line: var(--envoy-7);
  --ec-accent-solid: var(--envoy-9);
  --ec-accent-solid-hover: var(--envoy-10);
  --ec-text-on-accent: var(--ink-1);
  --ec-accent-text: var(--envoy-11);
  --ec-accent-text-strong: var(--envoy-12);
  --ec-focus: var(--envoy-11);

  /* 상태 텍스트는 라이트에서 12단계다. 3단계 배경 위에서도 중립 배경 위에서도 4.5를
     넘긴다. 11단계는 Radix가 자기 스케일 1~2단계 배경을 전제로 잡은 값이라 따뜻한
     종이 캔버스(paper-2) 위에서는 4.2~4.4로 살짝 모자란다(design-system.md 2.5) */
  --ec-success-bg: var(--green-3);
  --ec-success-line: var(--green-6);
  --ec-success-solid: var(--green-9);
  --ec-success-solid-strong: var(--green-11);
  --ec-success-text: var(--green-12);

  --ec-warning-bg: var(--amber-3);
  --ec-warning-line: var(--amber-6);
  --ec-warning-solid: var(--amber-9);
  --ec-warning-solid-strong: var(--amber-11);
  --ec-warning-text: var(--amber-12);

  --ec-danger-bg: var(--ruby-3);
  --ec-danger-line: var(--ruby-6);
  --ec-danger-solid: var(--ruby-9);
  --ec-danger-solid-strong: var(--ruby-11);
  --ec-danger-solid-strong-text: #ffffff;
  --ec-danger-text: var(--ruby-12);

  --ec-info-bg: var(--blue-3);
  --ec-info-line: var(--blue-6);
  --ec-info-solid: var(--blue-9);
  --ec-info-solid-strong: var(--blue-11);
  --ec-info-text: var(--blue-12);

  /* 모달, 드로어 뒷배경. 라이트는 검정이 아니라 paper-12 알파(design-system.md 6.2) */
  --ec-scrim: rgba(34, 32, 27, 0.42);

  --focus-ring: 2px solid var(--ec-focus);
  --focus-offset: 2px;

  /* ===================== 폰트 스택 (design-system.md 3.4) =====================
     Noto Sans 계열과 로컬 폴백 사이 순서: 원격 웹폰트가 오면 그걸 쓰고, gstatic이
     막히면 size-adjust로 자수를 맞춘 로컬 폴백(위 @font-face)으로, 그마저 없으면
     --font-ko(SUIT + 시스템 산세리프)로 떨어진다. */
  --font-ko: "SUIT Variable", "SUIT",
             -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
             "Malgun Gothic", sans-serif;
  --font-ja: "Noto Sans JP", "Hiragino Fallback", "YuGothic Fallback", var(--font-ko);
  --font-zh-hant: "Noto Sans TC", "PingFangTC Fallback", var(--font-ko);
  --font-zh-hans: "Noto Sans SC", "PingFangSC Fallback", var(--font-ko);
  --font-mono: ui-monospace, "SF Mono", "SUIT Variable", Menlo, Consolas, monospace;

  /* 로케일별 행간과 자간 보정(design-system.md 3.3). 기본값은 한국어다.
     design-system-preview.html의 :root 토큰 블록과 이름과 값을 맞췄다 */
  --lh-body: 1.6;
  --lh-heading: 1.28;
  --tk-display: -0.035em;
  --tk-title: -0.025em;
  --tk-body: -0.005em;
  --tk-small: 0em;

  /* ===================== 모션 (design-system.md 7) ===================== */
  --mo-1: 120ms cubic-bezier(0.2, 0, 0.38, 0.9);
  --mo-2: 180ms cubic-bezier(0.2, 0, 0.38, 0.9);
  --mo-3: 260ms cubic-bezier(0.16, 1, 0.3, 1);
  --mo-4: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ===================== 별칭 계층: 공통 별칭 단일 소스 (PLT-37) =====================
   * app.css, console.css 등에서 중복되던 별칭 선언을 tokens.css 한 곳으로 통합한다.
   * 선택자와 컴포넌트 규칙은 그대로 두고 값만 의미 토큰(--ec-*)을 가리킨다. */
  --brand-orange: var(--ec-accent-solid);
  --brand-orange-hover: var(--ec-accent-solid-hover);
  --bg-dark: var(--ec-bg);
  --bg-dark-2: var(--ec-bg-subtle);
  --bg-card: var(--ec-surface);
  --bg-card-2: var(--ec-surface-hover);
  --text-white: var(--ec-text);
  --text-gray: var(--ec-text-muted);
  --text-dim: var(--ec-text-muted);
  --text-primary: var(--ec-text);
  --text-secondary: var(--ec-text-muted);
  --surface-primary: var(--ec-surface);
  --surface-elevated: var(--ec-surface-hover);
  --surface-subtle: var(--ec-bg-subtle);
  --surface-dim: var(--ec-bg-subtle);
  --surface-raised: var(--ec-surface-hover);
  --border: var(--ec-line);
  --border-strong: var(--ec-line-strong);
  --border-subtle: var(--ec-line);
  --ok: var(--ec-success-solid);
  --warn: var(--ec-warning-solid);
  --danger: var(--ec-danger-solid);
  --ok-text: var(--ec-success-text);
  --warn-text: var(--ec-warning-text);
  --danger-text: var(--ec-danger-text);
  --font-suit: var(--font-ko);
  --font-jp: var(--font-ja);
  --font-ui: var(--font-ko);

  /* 콘솔/셸 브레이크포인트 단일 소스 토큰 */
  --breakpoint-drawer: 1023px;
  --breakpoint-shell: 1023px;

  /* 콘솔 하위 별칭 계층 단일 소스 정의 */
  --pc-ink: var(--text-white);
  --pc-muted: var(--text-gray);
  --pc-line: var(--border);
  --pc-canvas: var(--bg-dark);
  --pc-surface: var(--bg-card);
  --pc-sidebar: var(--ec-bg-subtle);
  --pc-sidebar-muted: var(--text-gray);
  --pc-accent: var(--brand-orange);
  --pc-danger: var(--danger);
  --pw-sidebar-width: 256px;
  --pw-chrome-height: 64px;
  --pw-line: var(--ec-line);
  --pw-line-strong: var(--ec-line-strong);
  --pw-surface: var(--ec-surface);
  --pw-surface-raised: var(--ec-surface-hover);
  --pw-canvas: var(--ec-bg);
  --pw-text: var(--ec-text);
  --pw-muted: var(--ec-text-muted);
  --pw-dim: var(--ec-text-muted);
  --pw-orange: var(--brand-orange);
}

/* 일본어와 중국어 문서: 행간을 넓히고 자간은 0으로 둔다(design-system.md 3.3).
   한 문장 안에 한글과 한자가 섞이는 자리는 문서 단위 보정이라 대상이 아니다 */
html[lang^="ja"], html[lang^="zh"] {
  --lh-body: 1.75;
  --lh-heading: 1.4;
  --tk-display: 0em;
  --tk-title: 0em;
  --tk-body: 0em;
  --tk-small: 0em;
}

/* 언어별 폰트 전환(design-system.md 3.1, 3.2). --font-suit는
   app.css/console.css/site.css의 별칭 계층(:root)이 만드는 커스텀
   속성이고, 이 블록이 상속 체인의 html 단계에서 값을 다시 정의한다. body가
   font-family를 직접 선언하지 않은 한 이 값을 그대로 물려받는다.
   i18n.js의 setLocale()/apply()가 로케일을 바꿀 때마다 html[lang]을 실제
   locale 코드(ko/en/ja/zh-TW/zh-CN)로 갱신한다(locale-selector.js). zh-Hant와
   zh-Hans가 아니라 zh-TW/zh-CN인 것은 실제 런타임 값 기준이다.
   --font-jp는 여기서 건드리지 않는다. workspace.html의 .campaign-modal-jp처럼
   UI 로케일과 무관하게 항상 원문 일본어(매장명 등)를 보여주는 자리가 쓰는
   토큰이라, UI 로케일이 zh-TW/zh-CN이어도 일본어 자형으로 고정돼야 한다. */
html[lang^="ja"] {
  --font-suit: var(--font-ja);
}
html[lang="zh-TW"] {
  --font-suit: var(--font-zh-hant);
}
html[lang="zh-CN"] {
  --font-suit: var(--font-zh-hans);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 900px) {
  :root {
    --section-y: var(--sp-12);
  }
}

/* 모바일 390px: display-1/display-2/title-1만 줄인다. 나머지는 그대로 둔다(3.6) */
@media (max-width: 640px) {
  :root {
    --t-display-1-size: 38px;
    --t-display-2-size: 30px;
    --t-title-1-size: 25px;
  }
}

/* ===================== 그림자: 다크 (design-system.md 6.2) ===================== */
/* 검정 위 검정은 안 보인다. 다크 --sh-*는 값을 갖되 훨씬 약하게 둔다. */
[data-theme="dark"] {
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px -2px rgba(0, 0, 0, 0.4);
  --sh-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px -6px rgba(0, 0, 0, 0.55);
  --sh-4: 0 4px 8px rgba(0, 0, 0, 0.5), 0 28px 64px -12px rgba(0, 0, 0, 0.7);

  /* ===================== 의미 토큰: 다크 재정의 (design-system.md 9) ===================== */
  --ec-bg: var(--ink-1);
  --ec-bg-subtle: var(--ink-2);
  --ec-surface: var(--ink-3);
  --ec-surface-hover: var(--ink-4);
  --ec-surface-active: var(--ink-5);
  --ec-line: var(--ink-6);
  --ec-line-strong: var(--ink-7);
  --ec-field-bg: var(--ink-2);
  --ec-field-line: var(--ink-7);
  --ec-field-line-hover: var(--ink-8);
  --ec-text: var(--ink-12);
  --ec-text-muted: var(--ink-11);
  --ec-icon: var(--ink-10);
  --ec-text-disabled: var(--ink-9);

  /* 9단계는 두 모드가 같은 값이므로 주 버튼도 두 모드가 같다. 라벨색 ink-1도 같다.
     --ec-text-on-solid, --ec-text-on-accent는 :root 값을 그대로 물려받는다 */
  --ec-accent-bg: var(--envoyd-3);
  --ec-accent-bg-hover: var(--envoyd-4);
  --ec-accent-line: var(--envoyd-7);
  --ec-accent-solid: var(--envoyd-9);
  --ec-accent-solid-hover: var(--envoyd-10);
  --ec-accent-text: var(--envoyd-11);
  --ec-accent-text-strong: var(--envoyd-11);
  /* 다크 배경은 링이 어디에 떨어지든 밝은 쪽이라 9단계로 충분하다. 최저 3.91 */
  --ec-focus: var(--envoyd-9);

  /* 다크에서는 11단계가 이미 7.0 이상이라 12단계까지 갈 필요가 없다(design-system.md 2.5) */
  --ec-success-bg: var(--greend-3);
  --ec-success-line: var(--greend-6);
  --ec-success-solid: var(--greend-9);
  --ec-success-solid-strong: var(--greend-11);
  --ec-success-text: var(--greend-11);

  --ec-warning-bg: var(--amberd-3);
  --ec-warning-line: var(--amberd-6);
  --ec-warning-solid: var(--amberd-9);
  --ec-warning-solid-strong: var(--amberd-11);
  --ec-warning-text: var(--amberd-11);

  --ec-danger-bg: var(--rubyd-3);
  --ec-danger-line: var(--rubyd-6);
  --ec-danger-solid: var(--rubyd-9);
  --ec-danger-solid-strong: var(--rubyd-11);
  --ec-danger-solid-strong-text: var(--ink-1);
  --ec-danger-text: var(--rubyd-11);

  --ec-info-bg: var(--blued-3);
  --ec-info-line: var(--blued-6);
  --ec-info-solid: var(--blued-9);
  --ec-info-solid-strong: var(--blued-11);
  --ec-info-text: var(--blued-11);

  --ec-scrim: rgba(0, 0, 0, 0.62);

  /* [data-theme="dark"] 스코프 내 별칭 재평가 (상속 계산값 문제 해결) */
  --brand-orange: var(--ec-accent-solid);
  --brand-orange-hover: var(--ec-accent-solid-hover);
  --bg-dark: var(--ec-bg);
  --bg-dark-2: var(--ec-bg-subtle);
  --bg-card: var(--ec-surface);
  --bg-card-2: var(--ec-surface-hover);
  --text-white: var(--ec-text);
  --text-gray: var(--ec-text-muted);
  --text-dim: var(--ec-text-muted);
  --text-primary: var(--ec-text);
  --text-secondary: var(--ec-text-muted);
  --surface-primary: var(--ec-surface);
  --surface-elevated: var(--ec-surface-hover);
  --surface-subtle: var(--ec-bg-subtle);
  --surface-dim: var(--ec-bg-subtle);
  --surface-raised: var(--ec-surface-hover);
  --border: var(--ec-line);
  --border-strong: var(--ec-line-strong);
  --border-subtle: var(--ec-line);
  --ok: var(--ec-success-solid);
  --warn: var(--ec-warning-solid);
  --danger: var(--ec-danger-solid);
  --ok-text: var(--ec-success-text);
  --warn-text: var(--ec-warning-text);
  --danger-text: var(--ec-danger-text);

  --pc-ink: var(--text-white);
  --pc-muted: var(--text-gray);
  --pc-line: var(--border);
  --pc-canvas: var(--bg-dark);
  --pc-surface: var(--bg-card);
  --pc-sidebar: var(--ec-bg-subtle);
  --pc-sidebar-muted: var(--text-gray);
  --pc-accent: var(--brand-orange);
  --pc-danger: var(--danger);
  --pw-sidebar-width: 256px;
  --pw-chrome-height: 64px;
  --pw-line: var(--ec-line);
  --pw-line-strong: var(--ec-line-strong);
  --pw-surface: var(--ec-surface);
  --pw-surface-raised: var(--ec-surface-hover);
  --pw-canvas: var(--ec-bg);
  --pw-text: var(--ec-text);
  --pw-muted: var(--ec-text-muted);
  --pw-dim: var(--ec-text-muted);
  --pw-orange: var(--brand-orange);
}