/* ============================================================
   crowny-ui.css — 크라우니 공식 디자인 시스템 v1.1
   Claude Style · 절제 · 여백 · Pretendard
   토큰 기반 전면 정비 — 하드코딩 값 제거, 다크모드 1:1 패리티
   ============================================================ */

/* ── 0. Import ────────────────────────────────────────────── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* ── 1-A. Surface — 크라우니 라이트 통일 ───────────────── */
  --cw-bg:        #f5f1ea;   /* 페이지 배경 — 따뜻한 라이트 */
  --cw-card:      #ffffff;   /* 카드/패널 배경 */
  --cw-line:      #e8e0d2;   /* 구분선/보더 */
  --cw-overlay:   rgba(245,241,234,0.88); /* 오버레이/블러 */

  /* ── 1-B. Text (전경/서브/뮤트) ───────────────────────── */
  --cw-fg:        #2c2622;   /* 기본 텍스트 */
  --cw-fg-sub:    #6b6155;   /* 보조 텍스트 */
  --cw-fg-muted:  #a59a8b;   /* 약화 텍스트 */

  /* ── 1-C. Brand (골드) ────────────────────────────────── */
  --cw-gold:      #c2982f;   /* 브랜드 골드 (라이트 대비) */
  --cw-gold-dim:  #a8801f;   /* 골드 어두운 변형 (hover) */
  --cw-gold-tint: rgba(194,152,47,0.12); /* 골드 배경 틴트 */

  /* ── 1-D. TOAU 4색 (라이트 대비) ──────────────────────── */
  --cw-T:         #c2982f;   /* T — 티(금) */
  --cw-O:         #2f9b8e;   /* O — 옴(청록) */
  --cw-A:         #3a72ad;   /* A — 타(청) */
  --cw-U:         #7d5bb0;   /* U — 음(자) */

  /* TOAU 틴트 (12% alpha) */
  --cw-T-tint:    rgba(194,152,47,0.12);
  --cw-O-tint:    rgba(47,155,142,0.12);
  --cw-A-tint:    rgba(58,114,173,0.12);
  --cw-U-tint:    rgba(125,91,176,0.12);

  /* TOAU 보더 (25% alpha) */
  --cw-T-border:  rgba(194,152,47,0.25);
  --cw-O-border:  rgba(47,155,142,0.25);
  --cw-A-border:  rgba(58,114,173,0.25);
  --cw-U-border:  rgba(125,91,176,0.25);

  /* ── 1-E. State (상태 색) ─────────────────────────────── */
  --cw-ok:        #5a9e6f;   /* 성공/긍정 */
  --cw-warn:      #d4882e;   /* 경고 */
  --cw-err:       #c0504a;   /* 오류/위험 */
  --cw-info:      #4a7fb5;   /* 정보 */

  /* 상태 틴트 (10% alpha) */
  --cw-ok-tint:   rgba(90,158,111,0.10);
  --cw-warn-tint: rgba(212,136,46,0.10);
  --cw-err-tint:  rgba(192,80,74,0.10);
  --cw-info-tint: rgba(74,127,181,0.10);

  /* 상태 보더 (25% alpha) */
  --cw-ok-border:   rgba(90,158,111,0.25);
  --cw-warn-border: rgba(212,136,46,0.25);
  --cw-err-border:  rgba(192,80,74,0.25);
  --cw-info-border: rgba(74,127,181,0.25);

  /* ── 1-F. Btn dark ink (골드 위에 올리는 텍스트) ──────── */
  --cw-ink-dark:  #ffffff;   /* 골드 버튼/체크마크 위 텍스트 */

  /* ── 1-G. Radius ──────────────────────────────────────── */
  --cw-r-sm:   8px;
  --cw-r:      12px;
  --cw-r-lg:   16px;
  --cw-r-xl:   20px;
  --cw-r-pill: 999px;

  /* ── 1-H. Shadow (그림자 3단계) ───────────────────────── */
  --cw-sh-1: 0 1px 3px rgba(44,36,32,0.06), 0 1px 2px rgba(44,36,32,0.04);
  --cw-sh-2: 0 2px 8px rgba(44,36,32,0.08), 0 1px 3px rgba(44,36,32,0.05);
  --cw-sh-3: 0 8px 24px rgba(44,36,32,0.10), 0 2px 6px rgba(44,36,32,0.06);

  /* 하위 호환 별칭 */
  --cw-shadow-sm: var(--cw-sh-1);
  --cw-shadow:    var(--cw-sh-2);
  --cw-shadow-lg: var(--cw-sh-3);

  /* ── 1-I. Spacing scale ───────────────────────────────── */
  --cw-sp-1:  4px;
  --cw-sp-2:  8px;
  --cw-sp-3:  12px;
  --cw-sp-4:  16px;
  --cw-sp-5:  20px;
  --cw-sp-6:  24px;
  --cw-sp-8:  32px;
  --cw-sp-10: 40px;
  --cw-sp-12: 48px;
  --cw-sp-16: 64px;

  /* ── 1-J. Typography ──────────────────────────────────── */
  --cw-font:      'Pretendard', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --cw-font-mono: 'Pretendard', ui-monospace, monospace;

  /* 폰트 사이즈 스케일 */
  --cw-fs-xs:   0.6875rem;  /* 11px */
  --cw-fs-sm:   0.75rem;    /* 12px */
  --cw-fs-body-sm: 0.8125rem; /* 13px */
  --cw-fs-body: 0.875rem;   /* 14px */
  --cw-fs-md:   0.9375rem;  /* 15px */
  --cw-fs-lg:   1rem;       /* 16px */
  --cw-fs-xl:   1.0625rem;  /* 17px */
  --cw-fs-2xl:  1.125rem;   /* 18px */

  /* ── 1-K. Motion ──────────────────────────────────────── */
  --cw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cw-dur:  180ms;

  /* ── 1-L. Focus ring (접근성) ─────────────────────────── */
  --cw-focus-ring: 0 0 0 3px rgba(201,169,97,0.30);
  --cw-focus-color: var(--cw-gold);
}

/* ── 다크 테마 — [data-theme="dark"] ──────────────────────── */
[data-theme="dark"] {
  /* Surface */
  --cw-bg:        #1c1813;
  --cw-card:      #262017;
  --cw-line:      #3a3225;
  --cw-overlay:   rgba(28,24,19,0.90);

  /* Text */
  --cw-fg:        #f0e8da;
  --cw-fg-sub:    #b8a898;
  --cw-fg-muted:  #7a6e62;

  /* Brand */
  --cw-gold:      #C9A961;
  --cw-gold-dim:  #d4b872;
  --cw-gold-tint: rgba(201,169,97,0.14);

  /* State — 다크에서 약간 밝게 */
  --cw-ok:        #6cb87f;
  --cw-warn:      #e09840;
  --cw-err:       #d06460;
  --cw-info:      #5e91c5;

  /* 상태 틴트/보더 — 다크용 */
  --cw-ok-tint:   rgba(90,158,111,0.14);
  --cw-warn-tint: rgba(212,136,46,0.14);
  --cw-err-tint:  rgba(192,80,74,0.14);
  --cw-info-tint: rgba(74,127,181,0.14);

  --cw-ok-border:   rgba(90,158,111,0.30);
  --cw-warn-border: rgba(212,136,46,0.30);
  --cw-err-border:  rgba(192,80,74,0.30);
  --cw-info-border: rgba(74,127,181,0.30);

  /* TOAU 틴트/보더 — 다크용 */
  --cw-T-tint:   rgba(201,169,97,0.16);
  --cw-O-tint:   rgba(90,158,111,0.16);
  --cw-A-tint:   rgba(74,127,181,0.16);
  --cw-U-tint:   rgba(155,107,181,0.16);

  --cw-T-border: rgba(201,169,97,0.30);
  --cw-O-border: rgba(90,158,111,0.30);
  --cw-A-border: rgba(74,127,181,0.30);
  --cw-U-border: rgba(155,107,181,0.30);

  /* Shadow — 다크에서 더 강하게 */
  --cw-sh-1: 0 1px 3px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.16);
  --cw-sh-2: 0 2px 8px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.18);
  --cw-sh-3: 0 8px 24px rgba(0,0,0,0.36), 0 2px 6px rgba(0,0,0,0.22);

  /* Focus ring — 다크용 */
  --cw-focus-ring: 0 0 0 3px rgba(201,169,97,0.35);
}

/* ── 다크 — prefers-color-scheme 미디어 패리티 ─────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cw-bg:        #1c1813;
    --cw-card:      #262017;
    --cw-line:      #3a3225;
    --cw-overlay:   rgba(28,24,19,0.90);
    --cw-fg:        #f0e8da;
    --cw-fg-sub:    #b8a898;
    --cw-fg-muted:  #7a6e62;
    --cw-gold:      #C9A961;
    --cw-gold-dim:  #d4b872;
    --cw-gold-tint: rgba(201,169,97,0.14);
    --cw-ok:        #6cb87f;
    --cw-warn:      #e09840;
    --cw-err:       #d06460;
    --cw-info:      #5e91c5;
    --cw-ok-tint:   rgba(90,158,111,0.14);
    --cw-warn-tint: rgba(212,136,46,0.14);
    --cw-err-tint:  rgba(192,80,74,0.14);
    --cw-info-tint: rgba(74,127,181,0.14);
    --cw-ok-border:   rgba(90,158,111,0.30);
    --cw-warn-border: rgba(212,136,46,0.30);
    --cw-err-border:  rgba(192,80,74,0.30);
    --cw-info-border: rgba(74,127,181,0.30);
    --cw-T-tint:   rgba(201,169,97,0.16);
    --cw-O-tint:   rgba(90,158,111,0.16);
    --cw-A-tint:   rgba(74,127,181,0.16);
    --cw-U-tint:   rgba(155,107,181,0.16);
    --cw-T-border: rgba(201,169,97,0.30);
    --cw-O-border: rgba(90,158,111,0.30);
    --cw-A-border: rgba(74,127,181,0.30);
    --cw-U-border: rgba(155,107,181,0.30);
    --cw-sh-1: 0 1px 3px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.16);
    --cw-sh-2: 0 2px 8px rgba(0,0,0,0.28), 0 1px 3px rgba(0,0,0,0.18);
    --cw-sh-3: 0 8px 24px rgba(0,0,0,0.36), 0 2px 6px rgba(0,0,0,0.22);
    --cw-focus-ring: 0 0 0 3px rgba(201,169,97,0.35);
  }
}

/* ── 2. Reset & Base ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--cw-font);
  background: var(--cw-bg);
  color: var(--cw-fg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--cw-gold);
  text-decoration: none;
  transition: color var(--cw-dur) var(--cw-ease);
}
a:hover { color: var(--cw-gold-dim); }

/* 접근성: 포커스 링 전역 */
:focus-visible {
  outline: 2px solid var(--cw-focus-color);
  outline-offset: 2px;
}

img, svg { display: block; max-width: 100%; }

/* ── 3. Typography ────────────────────────────────────────── */
.cw-h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.cw-h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.cw-h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; line-height: 1.35; }
.cw-h4 { font-size: var(--cw-fs-lg); font-weight: 600; line-height: 1.4; }

.cw-body-lg { font-size: var(--cw-fs-xl); line-height: 1.7; }
.cw-body    { font-size: var(--cw-fs-md); line-height: 1.65; }
.cw-body-sm { font-size: var(--cw-fs-body-sm); line-height: 1.6; }
.cw-caption { font-size: var(--cw-fs-sm); line-height: 1.5; color: var(--cw-fg-muted); }
.cw-label   { font-size: var(--cw-fs-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cw-fg-muted); }

.cw-sub    { color: var(--cw-fg-sub); }
.cw-muted  { color: var(--cw-fg-muted); }
.cw-gold   { color: var(--cw-gold); }
.cw-mono   { font-family: var(--cw-font-mono); font-size: 0.875em; }

/* ── 4. Layout Utilities ──────────────────────────────────── */
.cw-wrap  { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: var(--cw-sp-6); }
.cw-wrap-sm { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: var(--cw-sp-6); }
.cw-wrap-xs { width: 100%; max-width: 480px; margin-inline: auto; padding-inline: var(--cw-sp-5); }

.cw-flex       { display: flex; }
.cw-flex-col   { display: flex; flex-direction: column; }
.cw-items-c    { align-items: center; }
.cw-items-s    { align-items: flex-start; }
.cw-items-e    { align-items: flex-end; }
.cw-justify-c  { justify-content: center; }
.cw-justify-b  { justify-content: space-between; }
.cw-justify-e  { justify-content: flex-end; }
.cw-gap-1      { gap: var(--cw-sp-1); }
.cw-gap-2      { gap: var(--cw-sp-2); }
.cw-gap-3      { gap: var(--cw-sp-3); }
.cw-gap-4      { gap: var(--cw-sp-4); }
.cw-gap-6      { gap: var(--cw-sp-6); }
.cw-gap-8      { gap: var(--cw-sp-8); }

/* ── 5. Grid ──────────────────────────────────────────────── */
.cw-grid {
  display: grid;
  gap: var(--cw-sp-5);
}
.cw-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cw-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cw-grid-4 { grid-template-columns: repeat(4, 1fr); }

.cw-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--cw-sp-5);
}

/* ── 6. Card ──────────────────────────────────────────────── */
.cw-card {
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r);
  padding: var(--cw-sp-6);
  box-shadow: var(--cw-sh-1);
  transition: box-shadow var(--cw-dur) var(--cw-ease), transform var(--cw-dur) var(--cw-ease);
}
.cw-card-sm { padding: var(--cw-sp-4); border-radius: var(--cw-r-sm); }
.cw-card-lg { padding: var(--cw-sp-8); border-radius: var(--cw-r-lg); }

.cw-card-hover:hover {
  box-shadow: var(--cw-sh-2);
  transform: translateY(-1px);
}

.cw-card-gold {
  border-color: var(--cw-gold);
  background: var(--cw-gold-tint);
}

.cw-card-flat {
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r);
  padding: var(--cw-sp-5);
  box-shadow: none;
}

/* ── 7. Button ────────────────────────────────────────────── */
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cw-sp-2);
  height: 40px;
  padding: 0 var(--cw-sp-5);
  font-family: var(--cw-font);
  font-size: var(--cw-fs-body);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--cw-r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--cw-dur) var(--cw-ease),
    color var(--cw-dur) var(--cw-ease),
    border-color var(--cw-dur) var(--cw-ease),
    box-shadow var(--cw-dur) var(--cw-ease),
    transform var(--cw-dur) var(--cw-ease);
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.cw-btn:active { transform: scale(0.97); }

.cw-btn:focus-visible {
  outline: 2px solid var(--cw-focus-color);
  outline-offset: 2px;
}

/* Primary */
.cw-btn-primary {
  background: var(--cw-gold);
  color: var(--cw-ink-dark);
  border-color: var(--cw-gold);
}
.cw-btn-primary:hover {
  background: var(--cw-gold-dim);
  border-color: var(--cw-gold-dim);
  color: var(--cw-ink-dark);
  box-shadow: var(--cw-sh-2);
}

/* Secondary */
.cw-btn-secondary {
  background: var(--cw-card);
  color: var(--cw-fg);
  border-color: var(--cw-line);
}
.cw-btn-secondary:hover {
  border-color: var(--cw-gold);
  color: var(--cw-gold);
}

/* Ghost */
.cw-btn-ghost {
  background: transparent;
  color: var(--cw-fg-sub);
  border-color: transparent;
}
.cw-btn-ghost:hover {
  background: var(--cw-gold-tint);
  color: var(--cw-gold);
}

/* Danger */
.cw-btn-danger {
  background: transparent;
  color: var(--cw-err);
  border-color: var(--cw-err);
}
.cw-btn-danger:hover {
  background: var(--cw-err);
  color: var(--cw-card);
}

/* Sizes */
.cw-btn-sm { height: 32px; padding: 0 var(--cw-sp-3); font-size: var(--cw-fs-body-sm); }
.cw-btn-lg { height: 48px; padding: 0 var(--cw-sp-8); font-size: var(--cw-fs-lg); border-radius: var(--cw-r); }
.cw-btn-xl { height: 56px; padding: 0 var(--cw-sp-10); font-size: var(--cw-fs-xl); border-radius: var(--cw-r); }
.cw-btn-pill { border-radius: var(--cw-r-pill); }
.cw-btn-block { width: 100%; }

/* Disabled */
.cw-btn[disabled],
.cw-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 8. Input / Form ──────────────────────────────────────── */
.cw-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--cw-sp-3);
  font-family: var(--cw-font);
  font-size: var(--cw-fs-md);
  color: var(--cw-fg);
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r-sm);
  outline: none;
  transition: border-color var(--cw-dur) var(--cw-ease), box-shadow var(--cw-dur) var(--cw-ease);
}
.cw-input::placeholder { color: var(--cw-fg-muted); }
.cw-input:focus,
.cw-input:focus-visible {
  border-color: var(--cw-gold);
  box-shadow: var(--cw-focus-ring);
  outline: none;
}
.cw-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--cw-bg);
}

.cw-textarea {
  display: block;
  width: 100%;
  padding: var(--cw-sp-3);
  font-family: var(--cw-font);
  font-size: var(--cw-fs-md);
  color: var(--cw-fg);
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r-sm);
  outline: none;
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
  transition: border-color var(--cw-dur) var(--cw-ease), box-shadow var(--cw-dur) var(--cw-ease);
}
.cw-textarea::placeholder { color: var(--cw-fg-muted); }
.cw-textarea:focus,
.cw-textarea:focus-visible {
  border-color: var(--cw-gold);
  box-shadow: var(--cw-focus-ring);
  outline: none;
}

.cw-select {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 var(--cw-sp-8) 0 var(--cw-sp-3);
  font-family: var(--cw-font);
  font-size: var(--cw-fs-md);
  color: var(--cw-fg);
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r-sm);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%236b5f53' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color var(--cw-dur) var(--cw-ease), box-shadow var(--cw-dur) var(--cw-ease);
}
.cw-select:focus,
.cw-select:focus-visible {
  border-color: var(--cw-gold);
  box-shadow: var(--cw-focus-ring);
  outline: none;
}

.cw-field {
  display: flex;
  flex-direction: column;
  gap: var(--cw-sp-1);
}
.cw-field-label {
  font-size: var(--cw-fs-body-sm);
  font-weight: 600;
  color: var(--cw-fg-sub);
}
.cw-field-hint {
  font-size: var(--cw-fs-sm);
  color: var(--cw-fg-muted);
}
.cw-field-error .cw-input,
.cw-field-error .cw-textarea,
.cw-field-error .cw-select {
  border-color: var(--cw-err);
}
.cw-field-error-msg {
  font-size: var(--cw-fs-sm);
  color: var(--cw-err);
}

/* Checkbox / Radio */
.cw-check, .cw-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-sp-2);
  cursor: pointer;
  font-size: var(--cw-fs-md);
  color: var(--cw-fg);
}
.cw-check input[type="checkbox"],
.cw-radio input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--cw-line);
  border-radius: 4px;
  background: var(--cw-card);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--cw-dur), border-color var(--cw-dur);
  position: relative;
}
.cw-radio input[type="radio"] { border-radius: 50%; }
.cw-check input[type="checkbox"]:checked,
.cw-radio input[type="radio"]:checked {
  background: var(--cw-gold);
  border-color: var(--cw-gold);
}
.cw-check input[type="checkbox"]:focus-visible,
.cw-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--cw-focus-color);
  outline-offset: 2px;
}
.cw-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 1px;
  width: 8px; height: 5px;
  border-left: 1.5px solid var(--cw-ink-dark);
  border-bottom: 1.5px solid var(--cw-ink-dark);
  transform: rotate(-45deg);
}

/* ── 9. Badge ─────────────────────────────────────────────── */
.cw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-sp-1);
  height: 20px;
  padding: 0 var(--cw-sp-2);
  font-size: var(--cw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--cw-r-pill);
  white-space: nowrap;
}

.cw-badge-gold    { background: var(--cw-gold-tint); color: var(--cw-gold); border: 1px solid var(--cw-T-border); }
.cw-badge-T       { background: var(--cw-T-tint); color: var(--cw-T); border: 1px solid var(--cw-T-border); }
.cw-badge-O       { background: var(--cw-O-tint); color: var(--cw-O); border: 1px solid var(--cw-O-border); }
.cw-badge-A       { background: var(--cw-A-tint); color: var(--cw-A); border: 1px solid var(--cw-A-border); }
.cw-badge-U       { background: var(--cw-U-tint); color: var(--cw-U); border: 1px solid var(--cw-U-border); }
.cw-badge-ok      { background: var(--cw-ok-tint); color: var(--cw-ok); border: 1px solid var(--cw-ok-border); }
.cw-badge-warn    { background: var(--cw-warn-tint); color: var(--cw-warn); border: 1px solid var(--cw-warn-border); }
.cw-badge-err     { background: var(--cw-err-tint); color: var(--cw-err); border: 1px solid var(--cw-err-border); }
.cw-badge-info    { background: var(--cw-info-tint); color: var(--cw-info); border: 1px solid var(--cw-info-border); }
.cw-badge-neutral { background: var(--cw-bg); color: var(--cw-fg-sub); border: 1px solid var(--cw-line); }

.cw-badge-lg {
  height: 26px;
  padding: 0 var(--cw-sp-3);
  font-size: var(--cw-fs-body-sm);
}

/* ── 10. Tag ──────────────────────────────────────────────── */
.cw-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-sp-1);
  height: 24px;
  padding: 0 var(--cw-sp-3);
  font-size: var(--cw-fs-sm);
  font-weight: 500;
  color: var(--cw-fg-sub);
  background: var(--cw-bg);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r-pill);
  cursor: default;
  transition: background var(--cw-dur), color var(--cw-dur), border-color var(--cw-dur);
}
.cw-tag-active, .cw-tag:hover {
  background: var(--cw-gold-tint);
  color: var(--cw-gold);
  border-color: var(--cw-T-border);
}
.cw-tag-remove {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cw-fg-muted);
  font-size: 0.625rem;
  background: transparent;
  border: none;
  transition: background var(--cw-dur), color var(--cw-dur);
}
.cw-tag-remove:hover { background: var(--cw-line); color: var(--cw-fg); }

/* ── 11. Divider ──────────────────────────────────────────── */
.cw-divider {
  border: none;
  border-top: 1px solid var(--cw-line);
  margin: var(--cw-sp-6) 0;
}
.cw-divider-gold { border-top-color: var(--cw-gold); opacity: 0.4; }

/* ── 12. Icon container ───────────────────────────────────── */
.cw-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-style: normal;
  line-height: 1;
}

.cw-ic-sm   { width: 24px; height: 24px; font-size: var(--cw-fs-sm); }
.cw-ic-md   { width: 32px; height: 32px; font-size: var(--cw-fs-md); }
.cw-ic-lg   { width: 40px; height: 40px; font-size: var(--cw-fs-2xl); }
.cw-ic-xl   { width: 48px; height: 48px; font-size: 1.375rem; }

.cw-ic-round {
  border-radius: 50%;
  background: var(--cw-bg);
  border: 1px solid var(--cw-line);
  color: var(--cw-fg-sub);
}
.cw-ic-round-gold {
  border-radius: 50%;
  background: var(--cw-gold-tint);
  color: var(--cw-gold);
}
.cw-ic-round-T { border-radius: 50%; background: var(--cw-T-tint); color: var(--cw-T); }
.cw-ic-round-O { border-radius: 50%; background: var(--cw-O-tint); color: var(--cw-O); }
.cw-ic-round-A { border-radius: 50%; background: var(--cw-A-tint); color: var(--cw-A); }
.cw-ic-round-U { border-radius: 50%; background: var(--cw-U-tint); color: var(--cw-U); }

/* ── 13. Table ────────────────────────────────────────────── */
.cw-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--cw-r);
  border: 1px solid var(--cw-line);
  background: var(--cw-card);
}

.cw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cw-fs-body);
}

.cw-table thead tr {
  border-bottom: 1px solid var(--cw-line);
  background: var(--cw-bg);
}

.cw-table th {
  padding: var(--cw-sp-3) var(--cw-sp-4);
  text-align: left;
  font-size: var(--cw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cw-fg-muted);
  white-space: nowrap;
}

.cw-table td {
  padding: var(--cw-sp-3) var(--cw-sp-4);
  color: var(--cw-fg);
  border-bottom: 1px solid var(--cw-line);
  vertical-align: middle;
}

.cw-table tbody tr:last-child td { border-bottom: none; }

.cw-table tbody tr {
  transition: background var(--cw-dur) var(--cw-ease);
}
.cw-table tbody tr:hover { background: var(--cw-gold-tint); }

.cw-table-compact th,
.cw-table-compact td { padding: var(--cw-sp-2) var(--cw-sp-3); }

/* ── 14. Bar / Nav ────────────────────────────────────────── */
.cw-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--cw-sp-6);
  background: var(--cw-card);
  border-bottom: 1px solid var(--cw-line);
  gap: var(--cw-sp-4);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.cw-bar-logo {
  font-size: var(--cw-fs-2xl);
  font-weight: 700;
  color: var(--cw-fg);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--cw-sp-2);
}
.cw-bar-logo span { color: var(--cw-gold); }

.cw-bar-nav {
  display: flex;
  align-items: center;
  gap: var(--cw-sp-1);
  list-style: none;
}

.cw-bar-nav a {
  display: flex;
  align-items: center;
  gap: var(--cw-sp-2);
  height: 32px;
  padding: 0 var(--cw-sp-3);
  font-size: var(--cw-fs-body);
  font-weight: 500;
  color: var(--cw-fg-sub);
  border-radius: var(--cw-r-sm);
  text-decoration: none;
  transition: background var(--cw-dur), color var(--cw-dur);
}
.cw-bar-nav a:hover,
.cw-bar-nav a.active {
  background: var(--cw-gold-tint);
  color: var(--cw-gold);
}

.cw-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--cw-sp-2);
}

/* Bottom launcher bar */
.cw-launcher {
  position: fixed;
  bottom: var(--cw-sp-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--cw-sp-2);
  padding: var(--cw-sp-2) var(--cw-sp-3);
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r-pill);
  box-shadow: var(--cw-sh-3);
  z-index: 200;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.cw-launcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--cw-sp-2) var(--cw-sp-3);
  border-radius: var(--cw-r);
  cursor: pointer;
  transition: background var(--cw-dur), color var(--cw-dur);
  text-decoration: none;
  color: var(--cw-fg-sub);
}
.cw-launcher-item:hover,
.cw-launcher-item.active {
  background: var(--cw-gold-tint);
  color: var(--cw-gold);
}
.cw-launcher-item-icon { font-size: var(--cw-fs-lg); line-height: 1; }
.cw-launcher-item-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; }

/* ── 15. Sidebar ──────────────────────────────────────────── */
.cw-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cw-sp-1);
  padding: var(--cw-sp-4) 0;
}

.cw-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--cw-sp-3);
  height: 36px;
  padding: 0 var(--cw-sp-3);
  border-radius: var(--cw-r-sm);
  font-size: var(--cw-fs-body);
  font-weight: 500;
  color: var(--cw-fg-sub);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--cw-dur), color var(--cw-dur);
}
.cw-sidebar-item:hover,
.cw-sidebar-item.active {
  background: var(--cw-gold-tint);
  color: var(--cw-gold);
}
.cw-sidebar-section-label {
  padding: var(--cw-sp-3) var(--cw-sp-3) var(--cw-sp-1);
  font-size: var(--cw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-fg-muted);
}

/* ── 16. Alert / Notice ───────────────────────────────────── */
.cw-alert {
  display: flex;
  gap: var(--cw-sp-3);
  padding: var(--cw-sp-4);
  border-radius: var(--cw-r-sm);
  font-size: var(--cw-fs-body);
  line-height: 1.55;
  border-left: 3px solid transparent;
}
.cw-alert-icon { flex-shrink: 0; margin-top: 1px; font-size: var(--cw-fs-body); }

.cw-alert-gold  { background: var(--cw-gold-tint); border-left-color: var(--cw-gold); color: var(--cw-fg); }
.cw-alert-ok    { background: var(--cw-ok-tint); border-left-color: var(--cw-ok); color: var(--cw-fg); }
.cw-alert-warn  { background: var(--cw-warn-tint); border-left-color: var(--cw-warn); color: var(--cw-fg); }
.cw-alert-err   { background: var(--cw-err-tint); border-left-color: var(--cw-err); color: var(--cw-fg); }
.cw-alert-info  { background: var(--cw-info-tint); border-left-color: var(--cw-info); color: var(--cw-fg); }

/* ── 17. Progress ─────────────────────────────────────────── */
.cw-progress {
  width: 100%;
  height: 6px;
  background: var(--cw-line);
  border-radius: var(--cw-r-pill);
  overflow: hidden;
}
.cw-progress-bar {
  height: 100%;
  background: var(--cw-gold);
  border-radius: var(--cw-r-pill);
  transition: width 400ms var(--cw-ease);
}
.cw-progress-T { background: var(--cw-T); }
.cw-progress-O { background: var(--cw-O); }
.cw-progress-A { background: var(--cw-A); }
.cw-progress-U { background: var(--cw-U); }

.cw-progress-lg { height: 10px; }
.cw-progress-sm { height: 4px; }

/* ── 18. Stat / Metric ────────────────────────────────────── */
.cw-stat {
  display: flex;
  flex-direction: column;
  gap: var(--cw-sp-1);
}
.cw-stat-label {
  font-size: var(--cw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cw-fg-muted);
}
.cw-stat-value {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--cw-fg);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.cw-stat-change {
  font-size: var(--cw-fs-body-sm);
  font-weight: 500;
}
.cw-stat-up   { color: var(--cw-ok); }
.cw-stat-down { color: var(--cw-err); }
.cw-stat-flat { color: var(--cw-fg-muted); }

/* ── 19. List ─────────────────────────────────────────────── */
.cw-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}
.cw-list-item {
  display: flex;
  align-items: center;
  gap: var(--cw-sp-3);
  padding: var(--cw-sp-3) 0;
  border-bottom: 1px solid var(--cw-line);
  font-size: var(--cw-fs-md);
}
.cw-list-item:last-child { border-bottom: none; }

.cw-list-hover .cw-list-item {
  padding: var(--cw-sp-3);
  border-radius: var(--cw-r-sm);
  border-bottom: none;
  transition: background var(--cw-dur);
  cursor: pointer;
}
.cw-list-hover .cw-list-item:hover {
  background: var(--cw-gold-tint);
}

/* ── 20. Empty state ──────────────────────────────────────── */
.cw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cw-sp-3);
  padding: var(--cw-sp-16) var(--cw-sp-6);
  text-align: center;
  color: var(--cw-fg-muted);
}
.cw-empty-icon  { font-size: 2rem; opacity: 0.5; }
.cw-empty-title { font-size: var(--cw-fs-lg); font-weight: 600; color: var(--cw-fg-sub); }
.cw-empty-desc  { font-size: var(--cw-fs-body); max-width: 320px; }

/* ── 21. Modal / Dialog ───────────────────────────────────── */
.cw-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--cw-overlay);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cw-sp-4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cw-modal {
  background: var(--cw-card);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r-lg);
  box-shadow: var(--cw-sh-3);
  width: 100%;
  max-width: 480px;
  padding: var(--cw-sp-8);
  position: relative;
}
.cw-modal-sm { max-width: 360px; padding: var(--cw-sp-6); }
.cw-modal-lg { max-width: 640px; }
.cw-modal-xl { max-width: 800px; }

.cw-modal-title {
  font-size: var(--cw-fs-2xl);
  font-weight: 700;
  color: var(--cw-fg);
  margin-bottom: var(--cw-sp-5);
}
.cw-modal-close {
  position: absolute;
  top: var(--cw-sp-4);
  right: var(--cw-sp-4);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: var(--cw-fg-muted);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: var(--cw-r-sm);
  transition: background var(--cw-dur), color var(--cw-dur);
}
.cw-modal-close:hover { background: var(--cw-line); color: var(--cw-fg); }
.cw-modal-close:focus-visible {
  outline: 2px solid var(--cw-focus-color);
  outline-offset: 2px;
}
.cw-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--cw-sp-2);
  margin-top: var(--cw-sp-6);
  padding-top: var(--cw-sp-5);
  border-top: 1px solid var(--cw-line);
}

/* ── 22. Tooltip ──────────────────────────────────────────── */
.cw-tooltip-wrap { position: relative; display: inline-flex; }
.cw-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--cw-fg);
  color: var(--cw-card);
  font-size: var(--cw-fs-sm);
  font-weight: 500;
  padding: var(--cw-sp-1) var(--cw-sp-2);
  border-radius: var(--cw-r-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--cw-dur) var(--cw-ease);
  z-index: 9999;
}
.cw-tooltip-wrap:hover .cw-tooltip { opacity: 1; }

/* ── 23. Code block ───────────────────────────────────────── */
.cw-code {
  font-family: var(--cw-font-mono);
  font-size: var(--cw-fs-body-sm);
  background: var(--cw-bg);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r-sm);
  padding: var(--cw-sp-4) var(--cw-sp-5);
  overflow-x: auto;
  line-height: 1.7;
  color: var(--cw-fg);
}
.cw-code-inline {
  font-family: var(--cw-font-mono);
  font-size: 0.8125em;
  background: var(--cw-bg);
  border: 1px solid var(--cw-line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--cw-gold);
}

/* ── 24. Tabs ─────────────────────────────────────────────── */
.cw-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cw-line);
}
.cw-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-sp-2);
  padding: var(--cw-sp-3) var(--cw-sp-4);
  font-size: var(--cw-fs-body);
  font-weight: 500;
  color: var(--cw-fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--cw-dur), border-color var(--cw-dur);
  margin-bottom: -1px;
  background: transparent;
  border-top: none; border-left: none; border-right: none;
  font-family: var(--cw-font);
}
.cw-tab:hover { color: var(--cw-fg-sub); }
.cw-tab.active {
  color: var(--cw-gold);
  border-bottom-color: var(--cw-gold);
}
.cw-tab:focus-visible {
  outline: 2px solid var(--cw-focus-color);
  outline-offset: 2px;
}

/* ── 25. Skeleton ─────────────────────────────────────────── */
@keyframes cw-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.cw-skeleton {
  display: block;
  border-radius: var(--cw-r-sm);
  background: linear-gradient(
    90deg,
    var(--cw-line) 25%,
    var(--cw-bg) 50%,
    var(--cw-line) 75%
  );
  background-size: 800px 100%;
  animation: cw-shimmer 1.5s infinite;
}

/* ── 26. Section / Hero ───────────────────────────────────── */
.cw-section {
  padding: var(--cw-sp-16) 0;
}
.cw-section-sm { padding: var(--cw-sp-10) 0; }
.cw-section-lg { padding: calc(var(--cw-sp-16) * 1.5) 0; }

.cw-hero {
  padding: var(--cw-sp-16) 0 var(--cw-sp-12);
  text-align: center;
}
.cw-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cw-sp-2);
  font-size: var(--cw-fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cw-gold);
  margin-bottom: var(--cw-sp-4);
}
.cw-hero-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--cw-fg);
  margin-bottom: var(--cw-sp-5);
}
.cw-hero-title em { font-style: normal; color: var(--cw-gold); }
.cw-hero-sub {
  font-size: clamp(1rem, 2vw, 1.1875rem);
  color: var(--cw-fg-sub);
  line-height: 1.7;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--cw-sp-8);
}
.cw-hero-actions {
  display: flex;
  gap: var(--cw-sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── 27. Pill nav ─────────────────────────────────────────── */
.cw-pill-nav {
  display: flex;
  gap: var(--cw-sp-1);
  padding: var(--cw-sp-1);
  background: var(--cw-bg);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-r-pill);
  width: fit-content;
}
.cw-pill-nav-item {
  padding: var(--cw-sp-2) var(--cw-sp-4);
  font-size: var(--cw-fs-body-sm);
  font-weight: 600;
  border-radius: var(--cw-r-pill);
  cursor: pointer;
  color: var(--cw-fg-sub);
  transition: background var(--cw-dur), color var(--cw-dur), box-shadow var(--cw-dur);
  white-space: nowrap;
  border: none;
  background: transparent;
  font-family: var(--cw-font);
}
.cw-pill-nav-item:hover { color: var(--cw-fg); }
.cw-pill-nav-item.active {
  background: var(--cw-card);
  color: var(--cw-gold);
  box-shadow: var(--cw-sh-1);
}
.cw-pill-nav-item:focus-visible {
  outline: 2px solid var(--cw-focus-color);
  outline-offset: 2px;
}

/* ── 28. TOAU color bar ───────────────────────────────────── */
.cw-toau-bar {
  display: flex;
  gap: 0;
  height: 3px;
  border-radius: var(--cw-r-pill);
  overflow: hidden;
}
.cw-toau-bar-T { background: var(--cw-T); flex: 1; }
.cw-toau-bar-O { background: var(--cw-O); flex: 1; }
.cw-toau-bar-A { background: var(--cw-A); flex: 1; }
.cw-toau-bar-U { background: var(--cw-U); flex: 1; }

/* ── 29. Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cw-line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cw-fg-muted); }

/* ── 30. Utilities ────────────────────────────────────────── */
.cw-text-left   { text-align: left; }
.cw-text-center { text-align: center; }
.cw-text-right  { text-align: right; }

.cw-mt-1  { margin-top: var(--cw-sp-1); }
.cw-mt-2  { margin-top: var(--cw-sp-2); }
.cw-mt-3  { margin-top: var(--cw-sp-3); }
.cw-mt-4  { margin-top: var(--cw-sp-4); }
.cw-mt-5  { margin-top: var(--cw-sp-5); }
.cw-mt-6  { margin-top: var(--cw-sp-6); }
.cw-mt-8  { margin-top: var(--cw-sp-8); }
.cw-mb-1  { margin-bottom: var(--cw-sp-1); }
.cw-mb-2  { margin-bottom: var(--cw-sp-2); }
.cw-mb-3  { margin-bottom: var(--cw-sp-3); }
.cw-mb-4  { margin-bottom: var(--cw-sp-4); }
.cw-mb-5  { margin-bottom: var(--cw-sp-5); }
.cw-mb-6  { margin-bottom: var(--cw-sp-6); }
.cw-mb-8  { margin-bottom: var(--cw-sp-8); }

.cw-p-4   { padding: var(--cw-sp-4); }
.cw-p-5   { padding: var(--cw-sp-5); }
.cw-p-6   { padding: var(--cw-sp-6); }
.cw-p-8   { padding: var(--cw-sp-8); }

.cw-w-full  { width: 100%; }
.cw-h-full  { height: 100%; }
.cw-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cw-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 31. Animations ───────────────────────────────────────── */
@keyframes cw-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cw-pop-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes cw-spin {
  to { transform: rotate(360deg); }
}

.cw-anim-fade-in { animation: cw-fade-in 240ms var(--cw-ease) forwards; }
.cw-anim-pop-in  { animation: cw-pop-in  200ms var(--cw-ease) forwards; }

.cw-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--cw-line);
  border-top-color: var(--cw-gold);
  border-radius: 50%;
  animation: cw-spin 600ms linear infinite;
  display: inline-block;
}

/* ── 32. Mobile responsive ────────────────────────────────── */
@media (max-width: 640px) {
  .cw-wrap, .cw-wrap-sm {
    padding-inline: var(--cw-sp-4);
  }

  .cw-grid-2,
  .cw-grid-3,
  .cw-grid-4 {
    grid-template-columns: 1fr;
  }

  .cw-grid-auto {
    grid-template-columns: 1fr;
  }

  .cw-bar {
    height: 52px;
    padding: 0 var(--cw-sp-4);
  }
  .cw-bar-nav { display: none; }

  .cw-hero { padding: var(--cw-sp-10) 0 var(--cw-sp-8); }
  .cw-hero-actions { flex-direction: column; align-items: center; }

  .cw-section    { padding: var(--cw-sp-10) 0; }
  .cw-section-lg { padding: var(--cw-sp-12) 0; }

  .cw-modal { padding: var(--cw-sp-6); border-radius: var(--cw-r); }

  .cw-sidebar { width: 100%; }

  .cw-btn-xl  { height: 48px; padding: 0 var(--cw-sp-8); font-size: var(--cw-fs-lg); }

  .cw-pill-nav { overflow-x: auto; }
  .cw-tabs { overflow-x: auto; }
}

@media (max-width: 960px) {
  .cw-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .cw-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   TOKEN REFERENCE — crowny-ui.css v1.1
   ============================================================
   SURFACE
     --cw-bg            페이지 배경 (베이지 라이트 / 다크 #1c1813)
     --cw-card          카드·패널 배경
     --cw-line          구분선·보더
     --cw-overlay       반투명 오버레이·모달 배경
   TEXT
     --cw-fg            기본 텍스트
     --cw-fg-sub        보조 텍스트
     --cw-fg-muted      약화·플레이스홀더
   BRAND
     --cw-gold          브랜드 골드 #C9A961
     --cw-gold-dim      골드 어두운 변형 (hover)
     --cw-gold-tint     골드 배경 틴트 (12-14% alpha)
     --cw-ink-dark      골드 버튼 위 텍스트 #1c1813
   TOAU 4색
     --cw-T / --cw-T-tint / --cw-T-border   티 (금)
     --cw-O / --cw-O-tint / --cw-O-border   옴 (녹)
     --cw-A / --cw-A-tint / --cw-A-border   타 (청)
     --cw-U / --cw-U-tint / --cw-U-border   음 (자)
   STATE 상태 색
     --cw-ok  / --cw-ok-tint  / --cw-ok-border    성공
     --cw-warn/ --cw-warn-tint/ --cw-warn-border   경고
     --cw-err / --cw-err-tint / --cw-err-border    오류
     --cw-info/ --cw-info-tint/ --cw-info-border   정보
   RADIUS
     --cw-r-sm (8) · --cw-r (12) · --cw-r-lg (16)
     --cw-r-xl (20) · --cw-r-pill (999)
   SHADOW
     --cw-sh-1 (subtle) · --cw-sh-2 (card) · --cw-sh-3 (elevated)
     별칭: --cw-shadow-sm · --cw-shadow · --cw-shadow-lg
   SPACING  --cw-sp-1(4)..--cw-sp-16(64)
   FONT SIZE
     --cw-fs-xs(11) · --cw-fs-sm(12) · --cw-fs-body-sm(13)
     --cw-fs-body(14) · --cw-fs-md(15) · --cw-fs-lg(16)
     --cw-fs-xl(17) · --cw-fs-2xl(18)
   FOCUS RING
     --cw-focus-ring   box-shadow 포커스 링 (접근성)
     --cw-focus-color  outline 색 (= --cw-gold)
   MOTION
     --cw-ease · --cw-dur (180ms)
   ============================================================ */