@layer site.theme {
  /* santa-here-global — 브랜드 토큰 (디자인 핸드오프 확정, design_handoff_component_system/README.md).
     전역 /static/css/tokens.css 뒤에 로드되어 바꿀 변수만 다시 선언한다.
     이 파일이 Santa Here 브랜드 팔레트의 단일 소스다 — 부모 사이트 santa-here-global에 두고,
     자식 santa-here(국내)는 자체 tokens.css를 두지 않고 /site-static 폴백으로 이 파일을 그대로
     상속한다(정적 서빙은 경로당 파일 하나만 해석하므로 자식이 파일을 가지면 부모를 합치지 않고
     가려버린다 → 중복을 피하려 부모 단일화).
     폰트만 언어별로 갈린다: 라틴(en/ja/fil, 부모 global)은 Bricolage/Manrope 그대로, 한글(ko,
     자식 santa-here)은 그 뒤에 Pretendard 폴백을 붙인다 — :lang()으로 분기(아래). */
  :root {
  /* ── 원시 층: Material 3 ──
     아래 구간은 scripts/build_m3.py가 생성한다. 브랜드 색을 그 스크립트에서 고치고 다시
     돌린다 — 여기를 손으로 고치면 다음 재생성이 덮는다.
     칸 계약(무엇을 어느 칸에 쓰는가)이 역할 계약으로 바뀌었다 — 정본은 rule/css-guide.md,
     결정 근거는 DR-031. 자체 램프 72칸과 알파 12칸은 EN-060 회차 3에서 폐기했다. */

  /* M3:BEGIN — build_m3.py 생성. 손으로 고치지 않는다 */
  /* 브랜드 — primary·secondary·tertiary */
  --m3-primary: #AB3117;
  --m3-on-primary: #FFFFFF;
  --m3-primary-container: #CD492D;
  --m3-on-primary-container: #FFFEFF;
  --m3-secondary: #2D6A49;
  --m3-on-secondary: #FFFFFF;
  --m3-secondary-container: #B0F1C7;
  --m3-on-secondary-container: #33704E;
  --m3-tertiary: #755900;
  --m3-on-tertiary: #FFFFFF;
  --m3-tertiary-container: #937100;
  --m3-on-tertiary-container: #FFFEFF;
  /* 오류 — M3가 자체 생성한다 */
  --m3-error: #BA1A1A;
  --m3-on-error: #FFFFFF;
  --m3-error-container: #FFDAD6;
  --m3-on-error-container: #93000A;
  /* 면과 그 위 글자 — neutral 팔레트 */
  --m3-background: #FFF8EF;
  --m3-on-background: #1F1B10;
  --m3-surface: #FFF8EF;
  --m3-on-surface: #1F1B10;
  --m3-surface-variant: #EEE2C0;
  --m3-on-surface-variant: #4E462E;
  --m3-surface-dim: #E2D9C7;
  --m3-surface-bright: #FFF8EF;
  --m3-surface-container-lowest: #FFFFFF;
  --m3-surface-container-low: #FCF3E0;
  --m3-surface-container: #F6EDDA;
  --m3-surface-container-high: #F0E7D5;
  --m3-surface-container-highest: #EAE2CF;
  /* 선 — neutralVariant 팔레트 */
  --m3-outline: #80775B;
  --m3-outline-variant: #D2C6A6;
  /* 밝은 고정 변형 — 밝은 채움은 여기에만 있다 */
  --m3-primary-fixed: #FFDAD3;
  --m3-primary-fixed-dim: #FFB4A4;
  --m3-on-primary-fixed: #3D0500;
  --m3-on-primary-fixed-variant: #8B1A02;
  --m3-secondary-fixed: #B0F1C7;
  --m3-secondary-fixed-dim: #95D4AC;
  --m3-on-secondary-fixed: #002111;
  --m3-on-secondary-fixed-variant: #0F5132;
  --m3-tertiary-fixed: #FFDF97;
  --m3-tertiary-fixed-dim: #F0C041;
  --m3-on-tertiary-fixed: #251A00;
  --m3-on-tertiary-fixed-variant: #5A4400;
  /* 반전 — 어두운 표면 */
  --m3-inverse-surface: #343024;
  --m3-inverse-on-surface: #F9F0DD;
  --m3-inverse-primary: #FFB4A4;
  /* 기타 */
  --m3-scrim: #000000;
  --m3-shadow: #000000;
  --m3-surface-tint: #AD3218;
  /* 상태 투명도 — 비율은 M3 규격값이다 */
  --m3-scrim-32: rgba(0, 0, 0, 0.32);  /* 모달 딤 */
  --m3-on-surface-38: rgba(31, 27, 16, 0.38);  /* 비활성 글자 */
  --m3-on-surface-8: rgba(31, 27, 16, 0.08);  /* hover 상태 층 */
  /* 타입 스케일 — 규격 전사(위 주석). 크기·행간 rem, 자간 em */
  --m3-display-large-size: 3.5625rem; --m3-display-large-line: 4.0000rem; --m3-display-large-weight: 400; --m3-display-large-tracking: -0.0044em;  /* 57/64 */
  --m3-display-medium-size: 2.8125rem; --m3-display-medium-line: 3.2500rem; --m3-display-medium-weight: 400; --m3-display-medium-tracking: 0.0000em;  /* 45/52 */
  --m3-display-small-size: 2.2500rem; --m3-display-small-line: 2.7500rem; --m3-display-small-weight: 400; --m3-display-small-tracking: 0.0000em;  /* 36/44 */
  --m3-headline-large-size: 2.0000rem; --m3-headline-large-line: 2.5000rem; --m3-headline-large-weight: 400; --m3-headline-large-tracking: 0.0000em;  /* 32/40 */
  --m3-headline-medium-size: 1.7500rem; --m3-headline-medium-line: 2.2500rem; --m3-headline-medium-weight: 400; --m3-headline-medium-tracking: 0.0000em;  /* 28/36 */
  --m3-headline-small-size: 1.5000rem; --m3-headline-small-line: 2.0000rem; --m3-headline-small-weight: 400; --m3-headline-small-tracking: 0.0000em;  /* 24/32 */
  --m3-title-large-size: 1.3750rem; --m3-title-large-line: 1.7500rem; --m3-title-large-weight: 400; --m3-title-large-tracking: 0.0000em;  /* 22/28 */
  --m3-title-medium-size: 1.0000rem; --m3-title-medium-line: 1.5000rem; --m3-title-medium-weight: 500; --m3-title-medium-tracking: 0.0094em;  /* 16/24 */
  --m3-title-small-size: 0.8750rem; --m3-title-small-line: 1.2500rem; --m3-title-small-weight: 500; --m3-title-small-tracking: 0.0071em;  /* 14/20 */
  --m3-body-large-size: 1.0000rem; --m3-body-large-line: 1.5000rem; --m3-body-large-weight: 400; --m3-body-large-tracking: 0.0312em;  /* 16/24 */
  --m3-body-medium-size: 0.8750rem; --m3-body-medium-line: 1.2500rem; --m3-body-medium-weight: 400; --m3-body-medium-tracking: 0.0179em;  /* 14/20 */
  --m3-body-small-size: 0.7500rem; --m3-body-small-line: 1.0000rem; --m3-body-small-weight: 400; --m3-body-small-tracking: 0.0333em;  /* 12/16 */
  --m3-label-large-size: 0.8750rem; --m3-label-large-line: 1.2500rem; --m3-label-large-weight: 500; --m3-label-large-tracking: 0.0071em;  /* 14/20 */
  --m3-label-medium-size: 0.7500rem; --m3-label-medium-line: 1.0000rem; --m3-label-medium-weight: 500; --m3-label-medium-tracking: 0.0417em;  /* 12/16 */
  --m3-label-small-size: 0.6875rem; --m3-label-small-line: 1.0000rem; --m3-label-small-weight: 500; --m3-label-small-tracking: 0.0455em;  /* 11/16 */
  /* 모양 — 규격 전사(위 주석). px */
  --m3-corner-none: 0px;
  --m3-corner-extra-small: 4px;
  --m3-corner-small: 8px;
  --m3-corner-small-increased: 10px;
  --m3-corner-medium: 12px;
  --m3-corner-medium-increased: 16px;
  --m3-corner-large: 16px;
  --m3-corner-large-increased: 24px;
  --m3-corner-extra-large: 28px;
  --m3-corner-extra-large-increased: 32px;
  --m3-corner-full: 9999px;
  /* 밀도 — 규격 전사(위 주석). 4dp 그리드, rem */
  --m3-space4: 0.2500rem;  /* 4 */
  --m3-space8: 0.5000rem;  /* 8 */
  --m3-space12: 0.7500rem;  /* 12 */
  --m3-space16: 1.0000rem;  /* 16 */
  --m3-space20: 1.2500rem;  /* 20 */
  --m3-space24: 1.5000rem;  /* 24 */
  --m3-space28: 1.7500rem;  /* 28 */
  --m3-space32: 2.0000rem;  /* 32 */
  --m3-space36: 2.2500rem;  /* 36 */
  --m3-space40: 2.5000rem;  /* 40 */
  --m3-space48: 3.0000rem;  /* 48 */
  --m3-space56: 3.5000rem;  /* 56 */
  --m3-space64: 4.0000rem;  /* 64 */
  --m3-space72: 4.5000rem;  /* 72 */
  --m3-space80: 5.0000rem;  /* 80 */
  --m3-space96: 6.0000rem;  /* 96 */
  --m3-space128: 8.0000rem;  /* 128 */
  /* 높낮이 — 규격 전사(위 주석). key + ambient 두 겹 */
  --m3-elevation-0: none;  /* 0dp */
  --m3-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);  /* 1dp */
  --m3-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);  /* 3dp */
  --m3-elevation-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);  /* 6dp */
  --m3-elevation-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);  /* 8dp */
  --m3-elevation-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);  /* 12dp */
  /* 모션 — 규격 전사(위 주석) */
  --m3-duration-short1: 50ms;
  --m3-duration-short2: 100ms;
  --m3-duration-short3: 150ms;
  --m3-duration-short4: 200ms;
  --m3-duration-medium1: 250ms;
  --m3-duration-medium2: 300ms;
  --m3-duration-medium3: 350ms;
  --m3-duration-medium4: 400ms;
  --m3-duration-long1: 450ms;
  --m3-duration-long2: 500ms;
  --m3-duration-long3: 550ms;
  --m3-duration-long4: 600ms;
  --m3-duration-extra-long1: 700ms;
  --m3-duration-extra-long2: 800ms;
  --m3-duration-extra-long3: 900ms;
  --m3-duration-extra-long4: 1000ms;
  --m3-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --m3-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --m3-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --m3-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --m3-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --m3-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --m3-easing-linear: cubic-bezier(0, 0, 1, 1);
  /* M3:END */

    /* ── 브랜드 팔레트 ──
       우변이 M3 역할을 가리킨다(EN-060 회차 3). 이름은 우리 것을 유지한다 — M3 이름을
       부품 CSS까지 들이면 primaryContainer의 이름 어긋남이 전파되므로, 어긋남을 이
       선언 한 줄에 가둔다(DR-031).
       채움과 글자를 가르는 축은 M3에도 그대로 있다 — 채움은 Container, 글자는 base다. */
    --color-primary: var(--m3-primary-container);   /* 시드 #CD492D가 그대로 실린다 */
    --color-primary-text: var(--m3-primary);        /* 밝은 배경 위 글자 — 더 짙은 단계 */
    --color-primary-hover: var(--m3-on-primary-fixed-variant);  /* 미결 — 아래 hover 주석 */
    --color-primary-light: var(--m3-primary-fixed);
    --color-secondary: var(--m3-secondary);         /* 보조 액션·성공 */
    --color-secondary-hover: var(--m3-on-secondary-fixed-variant);  /* 미결 */
    --color-accent: var(--m3-on-surface);           /* 본문·다크 표면·아웃라인 */
    --color-accent-light: var(--m3-on-surface-variant);
    --color-gold: var(--m3-tertiary-fixed-dim);     /* 배지·강조 총액. 라이트 화면의
                                              tertiary 역할은 어두운 톤만 써서, 밝은
                                              금색은 Fixed 계열에 실린다 */
    --color-gold-deep: #B8860B;                     /* 흰 배경 위 얇은 선·테두리용 — --color-gold는
                                              대비가 낮아 선으로 못 쓴다(2026-08-15, 상품카드
                                              골드 액센트에서 발견). M3 --m3-tertiary(#755900)로
                                              1차 교정했으나 갈색·올리브로 보여 골드로 안
                                              읽힌다는 지적(2026-08-15) — 카탈로그 뱃지 줄
                                              (catalog.html의 Hard-to-Find Price 아이콘)이
                                              이미 쓰는 리터럴 금색을 재사용한다. */
    --color-blue-postal: #2B4C7E;                   /* M3 시드 밖의 색 — 초록·빨강처럼 리터럴.
                                              항공우편(Par Avion) 줄무늬의 세 번째 색 +
                                              상품카드 네 번째 액센트(2026-08-15, 브랜드
                                              색 다양화 논의). 기존 세 색과 같은 짙고
                                              절제된 톤으로 맞춘 값. */
    --color-brown-kraft: #5A3A22;                   /* M3 시드 밖의 색 — 초록·빨강·파랑과 같은
                                              리터럴 계열. 크라프트지·가죽 우편낭 톤(2026-08-15,
                                              브랜드 색 다양화 논의). 색상값 27°로 테라코타(10°)와
                                              골드(43°) 사이를 메운다. 홍보 배너 파트너 가입
                                              CTA(sh-partner__cta)에 적용(2026-08-15, tan에서 교체). */
    --color-tan: var(--m3-tertiary-container);      /* Rudolph-touch 아이콘 원. 소비자가
                                              이 하나뿐이라 폐기 후보이기도 하다 —
                                              모티프 회차(5-3)에서 함께 본다 */
    --color-sand: var(--m3-surface-container-high); /* 옅은 배경·이미지 플레이스홀더·비활성 */
    --color-ivory: var(--m3-surface-container-low); /* 페이지 배경 */
    --color-kraft: var(--m3-surface-variant);       /* 포장지 톤. 상품 카드 면 —
                                              페이지 아이보리보다 어두워 카드 경계가
                                              순백일 때보다 뚜렷하다 (EN-060 5-3b) */

    --color-text: var(--m3-on-surface);
    /* 옛 알파 램프(--ink-a1~12)가 있던 자리다. 그 12칸은 **위계를 투명도로** 표현한
       것이었는데, M3는 위계를 이름으로 풀고 투명도는 상태에만 쓴다. 그래서 대응 토큰이
       없었고, 대응을 만드는 대신 M3의 분류를 그대로 받았다(EN-060 회차 3).
         위계 → 불투명 역할 (아래 둘)
         상태 → M3 규격 비율 (비활성 38% · 딤 32%)
       비율은 build_m3.py가 rgba로 찍는다 — CSS에 숫자를 쓰지 않는다.

       **글자 단계는 둘이다.** 회차 3에서 셋째 단계(--color-text-faint)를 두고 --m3-outline을
       실었는데, 회차 4의 대비 검사가 AA 미달로 잡았다(카드 4.46 · 페이지 4.04 · 옅은 표면
       3.63). outline은 규격상 테두리 역할이라 글자로 쓰라고 만든 것이 아니다 — 값이 아니라
       역할 배정이 틀렸다. 라이트 화면에서 M3가 주는 불투명 글자 단계는 둘뿐이고, 셋째를
       우리가 만들면 그것이 곧 자체 규칙이라 EN-060이 없애려던 형태로 되돌아간다. 그래서
       단계를 늘리지 않고 규격을 따랐다(푸터·동의 문구·플레이스홀더가 보조 문구와 같은
       세기가 된다 — 위계는 크기·굵기로 가른다). */
    --color-text-muted: var(--m3-on-surface-variant);       /* 보조 문구·완료 단계·플레이스홀더 */
    --color-surface-dim: var(--m3-surface-container-highest); /* 옅은 표면(비활성 배지·점) */
    --color-text-disabled: var(--m3-on-surface-38);         /* 비활성 — M3 규격 38% */
    --color-scrim: var(--m3-scrim-32);                      /* 모달 딤 — M3 규격 32% */
    --color-state-hover: var(--m3-on-surface-8);            /* hover 상태 층 — M3 규격 8%.
                                              배경 겹침 방식(2-3절): 기준 색(onSurface) 위에
                                              얹어 배경이 비쳐 보인다. 헤더 카트·로케일
                                              스위처·로고가 첫 적용처(EN-060 5-3b) */
    /* 채도 표면 위 글자는 순백 하나로 통일한다(base 기본값 #ffffff을 그대로 쓴다).
       아이보리(#FBF3E4)를 쓰던 시절에는 같은 --color-primary 배경인데도 .btn-primary는
       아이보리, .req-bar button은 순백이라 두 값이 공존했다. 대비도 순백이 낫다
       (primary 위 4.44:1 대 4.02:1 — 둘 다 AA 미달이었다. primary 위는 EN-049 조각 5에서
       --color-primary를 #CD492D로 조정해 4.58:1로 해소). */
    --color-text-inverse: var(--m3-on-primary);

    --color-bg: var(--m3-surface-container-lowest);   /* 순백 */
    --color-bg-subtle: var(--m3-surface-container-low);
    --color-bg-dark: var(--m3-inverse-surface);       /* 어두운 표면 — 반전 계열 */
    --color-border: var(--m3-outline-variant);        /* 선은 neutralVariant 팔레트 */
    --color-border-strong: var(--m3-outline);         /* 굵은 선. 1px 실선 밝기로는
                                              2px에서 흐린 띠가 되어 한 단계 진한 쪽을
                                              쓴다 — 포장 끈 (EN-060 5-3b) */
    --color-border-focus: var(--m3-primary);

    /* 오류색은 M3가 자체 생성한다. 옛 rust 램프는 브랜드 빨강과 색상각을 7.3° 벌려
       "강조"와 "문제"를 갈랐는데, M3 error도 그 구분을 유지한다(카드에서 확인). */
    --color-error: var(--m3-error);              /* 오류 문구·입력칸 테두리 */
    --color-error-bg: var(--m3-error-container);
    --color-error-border: var(--m3-error);
    --color-success: var(--m3-secondary);

    /* ── 타이포그래피 — 기본은 라틴 전용(en/ja/fil). 한글은 :lang(ko)에서 Pretendard 폴백 ── */
    /* EN-060 회차 5-1에서 Bricolage Grotesque + Manrope를 대체했다. 판정은 실사용 부품
       7개(글꼴 부담이 서로 다른 표본)에 후보 넷을 얹은 카드로 했다 — design-system의
       type-round1. 표제가 정서를 지고 본문은 물러서는 배치이며, Inter는 UI 밀도에
       강하고 등폭 숫자를 갖는다(가격·수량이 많은 화면이라 실질적이다).
       Fraunces의 SOFT·WONK 가변축은 쓰지 않는다 — 편지 표제에 걸어 봤으나 채택하지
       않았고, 축을 안 쓰면 고정 굵기 서브셋으로 충분하다(118KB → 34KB). */
    --font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-heading: "Fraunces", Georgia, serif;
    /* 손글씨 — 모티프다. M3는 글꼴을 주지 않으므로 브랜드 재량이고, 여기 선언해
       두어야 교체 자리가 부품 CSS로 흩어지지 않는다(5-1의 교체 비용 실측 근거). */
    --font-family-hand: "Caveat", "Yomogi", cursive;

    /* ── 배경 운동 ── 모티프다. 규격 눈금(최대 1000ms)은 UI 전이용이라 여기 값들이
       실릴 자리가 없다 — 몇 초씩 도는 주변 운동은 M3가 다루는 대상이 아니다.
       리터럴로 흩어져 있으면 "잔재"와 구분되지 않아 이름을 붙인다. */
    --motif-duration-float: 3.6s;    /* 봉투 둥둥 */
    --motif-duration-wiggle: 5s;     /* 봉투 흔들 */
    --motif-duration-shimmer: 4.5s;  /* 우표 반짝임 */
    --motif-duration-glow: 2.4s;     /* 루돌프 코 */
    --motif-duration-marquee: 32s;   /* 리뷰 마퀴 */
    --font-weight-bold: 700;

    /* ── 글자 크기 — **경계면이다. 산타 CSS에서 쓰지 않는다.** ──
       산타 CSS의 조판은 M3 역할 넷(`--m3-{역할}-size/-line/-weight/-tracking`)이 전담한다
       (DR-032, css-guide 2-1절). 이 토큰들이 남아 있는 이유는 하나다 — **base 공용 CSS가
       71곳에서 참조**하는데 그 CSS는 다른 사이트(our-power·ai-utilization-coaching)와
       공용이라 M3로 옮길 수 없다. base 부품(.btn·.badge·.alert·.fulfil-step)이 산타
       페이지에서 브랜드 밀도로 나오도록 값을 공급하는 자리다.

       **우변을 역할 크기로 갈아끼웠다(EN-060 5-2 잔여).** 종전에는 브랜드 밀도 px를 직접
       넣었는데, 그러면 base 부품이 M3와 별개 값 위에 서서 두 체계가 갈라진다. 실제로
       그 갈라짐이 예외를 만들었다 — `.badge-highlight` 같은 변이가 굵기만 M3로 바꾸면
       한 선언에서 크기는 base 스케일, 굵기는 M3가 되는 상태였다.

       **크기만 건넌다.** 행간·굵기·자간은 base 값 그대로다. 다리를 없애려면 base 부품을
       산타가 통째로 인수해야 하는데(A-2), 그건 부품을 새로 만드는 단계에서 자연히
       해소된다.

       --font-size-control(입력 필드)은 재정의하지 않는다: 1rem 미만이면 iOS가 확대한다.
       조판이 아니라 동작 방어라 역할 축에 얹지 않는다. */
    --font-size-xs: var(--m3-label-small-size);      /* 11px */
    --font-size-sm: var(--m3-body-small-size);       /* 12px */
    --font-size-md: var(--m3-body-medium-size);      /* 14px */
    --font-size-lg: var(--m3-body-large-size);       /* 16px */
    --font-size-xl: var(--m3-title-medium-size);     /* 18 → 16px (DR-032) */
    --font-size-2xl: var(--m3-title-large-size);     /* 22px */
    --font-size-3xl: var(--m3-headline-small-size);  /* 24px */
    --font-size-4xl: var(--m3-headline-large-size);  /* 32px */
    --font-size-5xl: var(--m3-display-small-size);   /* 40 → 36px (DR-032) */

    /* ── 간격 ── M3 밀도 스케일의 별칭이다. 값을 여기서 고르지 않는다.
       이름을 유지하는 이유는 색·타입과 같다 — base 공용 부품이 이 이름을 쓰므로,
       여기서 M3를 받으면 base 부품도 산타 페이지에서 M3 위에 선다(base CSS 무변경).
       종전 2xs(2px, 광학 보정용)는 M3에 대응이 없어 걷어냈다 — 규격은 4dp 아래를
       두지 않는다. 쓰던 자리는 xs(4px)로 접었다. */
    --spacing-xs: var(--m3-space4);
    --spacing-sm: var(--m3-space8);
    --spacing-md: var(--m3-space12);
    --spacing-lg: var(--m3-space16);
    --spacing-xl: var(--m3-space20);
    --spacing-2xl: var(--m3-space24);
    --spacing-3xl: var(--m3-space32);
    --spacing-4xl: var(--m3-space40);
    --spacing-5xl: var(--m3-space48);

    /* ── 모서리 ── M3 곡률 스케일의 별칭이다. 종전 자체 6단계와 값이 거의 같았고
       (4·8·12·16), 하나만 규격에 없었다 — card(20px)는 M3 단계 사이라 바로 위인
       large-increased(24px)로 올렸다. 용도가 이름에 박힌 `card`를 걷어 "어느 부품이
       카드인가"를 매번 판정하지 않는다. */
    --radius-xs: var(--m3-corner-extra-small);
    --radius-sm: var(--m3-corner-small);
    --radius-md: var(--m3-corner-medium);
    --radius-lg: var(--m3-corner-large);
    --radius-card: var(--m3-corner-large-increased);
    --radius-full: var(--m3-corner-full);

    /* ── 테두리 두께 ── 규격은 둘만 둔다: 기본 1dp, 초점 3dp(--shadow-focus).
       종전 셋 중 control(1.5px)은 규격에 없는 값이라 기본으로 접었고,
       strong(2px)은 선택 상태를 굵기로 표현하던 것이라 걷었다 — 선택은 색과
       밝기로 표현한다(갤러리 썸네일). 이름 하나만 남으므로 역할 접미사도 없앤다. */
    --border-width: 1px;

    /* ── 그림자 ── M3 높낮이(elevation) 단계의 별칭이다. 값·색을 여기서 고르지 않는다.
       종전 네 단계는 브랜드 잉크에 자체 투명도를 얹은 것이었다. 규격은 그림자를
       두 겹(key·ambient)으로 규정하고 색은 팔레트의 shadow 역할을 쓴다. */
    --shadow-xs: var(--m3-elevation-1);   /* 배지·칩 */
    --shadow-sm: var(--m3-elevation-2);   /* 카드·타일 */
    --shadow-md: var(--m3-elevation-3);   /* 떠 있는 요소·FAB */
    --shadow-lg: var(--m3-elevation-4);   /* FAB hover·최상단 */
    /* 초점 링은 높이가 아니다 — M3는 굵기 3dp의 외곽선으로 규정한다(secondary).
       종전 glow(4px)는 focus와 성격이 같은데 굵기만 달라 규격 밖이었다. 걷어내고
       focus 하나로 모은다. */
    --shadow-focus: 0 0 0 3px var(--m3-secondary);
    /* base가 hover·강조에 쓰는 발광이다(base 규칙 3곳). M3는 hover를 빛이 아니라
       상태 층으로 표현하므로 대응이 없다 — 산타 페이지에서는 끈다. base 토큰을
       중화하는 자리이지 두 번째 단계가 아니다. hover는 이미 배경색이 바뀐다. */
    --shadow-glow: none;

    /* 가입 카드 라운드 (partner_signup_layout) — 값 대신 역할을 넘긴다 */
    --signup-radius: var(--m3-corner-medium);

    /* ── 상품 테마 슬롯 — 상세 영역 래퍼가 인라인 변수로 덮어쓴다 (product JSON theme).
       기본값 = 브랜드 색이므로 테마 없는 상품은 기존 모습 그대로.
       허용 표면은 채움뿐이다(콜아웃 배경·왼쪽 바, figure 배경, 스탯 배경, 섹션 밑줄 바).
       전환·신뢰 표면(CTA·가격·배지·스탬프·줄무늬)과 **모든 글자**는 참조하지 않는다.
       글자를 뺀 이유 — 이 값은 상품 JSON으로 들어와 여기 없으므로 check_contrast.py가
       검사할 수 없고, 11px 아이브로우는 상품 색에 따라 AA 미달이 난다(EN-049 조각 5). ── */
    --product-accent: var(--color-primary);
    --product-accent-soft: var(--color-primary-light);
    --product-surface: var(--color-ivory);
    --product-media: var(--color-sand);
  }

  /* 한글 사이트(santa-here, lang=ko): 라틴 폰트 뒤에 Pretendard 폴백을 붙여 한글을 커버한다.
     global(en/ja/fil)은 이 규칙에 안 걸려 :root의 라틴 전용 스택을 그대로 쓴다. */
  html:lang(ko) {
    --font-family: "Inter", "Pretendard", -apple-system, sans-serif;
    --font-family-heading: "Fraunces", "Pretendard", Georgia, serif;
    --font-family-hand: "Caveat", "Yomogi", "Pretendard", cursive;
  }

  /* 일본어(ja): 라틴 폰트 뒤에 Noto Sans JP 폴백 — base.html이 ja 로케일에서만 로드한다.
     후보 셋 다 일본어 글리프가 없어 ja에서는 본문이 어느 후보든 같고 표제만 갈린다. */
  html:lang(ja) {
    --font-family: "Inter", "Noto Sans JP", -apple-system, sans-serif;
    --font-family-heading: "Fraunces", "Noto Sans JP", Georgia, serif;
  }
}