/* ==================================================================
   고래상사 포인트 — 전역 디자인 시스템
   ------------------------------------------------------------------
   구조
     1. 디자인 토큰      — 모든 색/치수의 유일한 출처
     2. 테마            — 라이트 / 다크 (각각 독립 설계)
     3. 베이스          — 리셋 · 타이포그래피
     4. 레이아웃        — 헤더 · 본문 · 푸터
     5. 컴포넌트        — 버튼 · 입력 · 카드 · 표 · 뱃지 · 모달 · 토스트 …
     6. 페이지별        — 명예의전당 · 리포트 · 관리자
     7. 반응형 · 접근성

   규칙: 이 파일의 "1. 디자인 토큰" 구역 밖에서는 색상 리터럴(#hex, rgb)을 쓰지 않는다.
   토큰만 참조하면 새 페이지·새 컴포넌트를 추가해도 테마가 자동으로 따라온다.
   ================================================================== */

/* ==================================================================
   1 · 디자인 토큰 (테마 무관 — 치수 · 타이포 · 모션)
   ================================================================== */
:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* 브랜드 전용 디스플레이 서체 — 히어로 제목/로고에만 쓴다. 본문은 계속 Pretendard로
     가독성을 지키고, 여기서만 "고래상사"라는 이름값에 맞는 무게감을 준다. */
  --font-display: "Gowun Batang", var(--font-sans);

  /* 골드 스케일 — 기존 --warning/--gold 톤을 그대로 쓰되, 장식(워터마크·글로우·하이라인)
     전용으로 좀 더 진한/옅은 단계를 추가한다. 기존 토큰은 하나도 안 건드린다. */
  --gold-rich: #d4a72c;
  --gold-bright: #f4d675;
  --gold-line: linear-gradient(90deg, transparent, var(--gold-rich) 35%, var(--gold-bright) 50%, var(--gold-rich) 65%, transparent);
  --shadow-gold-glow: 0 0 0 1px rgba(212, 167, 44, 0.22), 0 8px 28px rgba(212, 167, 44, 0.14);

  /* 타이포 스케일 — 전부 정수(소수점은 서브픽셀 렌더링으로 흐릿해진다).
     한글 본문 가독성을 기준으로 14px를 base로 잡고 약 1.125 비율로 올린다. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.03em;

  /* 간격 — 8pt 그리드 (4px는 허용된 반 단계) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 40px;
  --space-10: 48px;
  --space-12: 64px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* 컨트롤 높이 — Fitts's Law. 주요 동작은 손가락으로 편히 누를 수 있어야 한다.
     WCAG 2.5.8은 최소 24px이지만, 실사용 기준은 40px(데스크탑)/44px(모바일)이다. */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --tap-min: 44px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;

  /* 이 사이트의 주인공은 7열짜리 랭킹 표다. 900px(글 읽는 문서 기준 폭)에 넣으면
     표가 눌리고 양옆이 절반 넘게 비어 "좁은 통에 욱여넣은" 인상이 된다.
     데이터를 보여주는 화면이므로 대시보드 기준 폭을 쓴다. */
  --content-width: 1200px;
  --content-width-narrow: 760px; /* 글 위주 영역(설명·안내)에서만 좁게 */
  --z-header: 10;
  --z-toast: 100;
  --z-modal: 300;
  --z-skip: 400;
}

/* ==================================================================
   2 · 테마
   ------------------------------------------------------------------
   두 테마는 색을 뒤집은 게 아니라 각각 따로 설계했다.
     · 다크  : 순수 검정 대신 살짝 푸른 딥 네이비. OLED 번짐이 적고 장시간 봐도 편하다.
               표면(Surface)을 3단계로 나눠 깊이를 만들고, 그림자보다 경계선으로 구분한다.
     · 라이트: 순백 대신 중성 회색 배경 + 흰 카드. 눈부심을 줄이고 실제 그림자로 계층을 만든다.
               브랜드/상태 색은 밝은 배경에서 대비가 확보되도록 한 단계 진한 값을 쓴다.
   ================================================================== */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0a0c11;
  --bg-elevated: #0f1218;
  --surface-1: #12151d;
  --surface-2: #171b25;
  --surface-3: #1e232f;
  --surface-hover: #222836;
  --surface-active: #272e3d;

  --border-subtle: #1f2430;
  --border-default: #2a3140;
  --border-strong-c: #3a4356;

  --text-primary: #e9ecf2;
  --text-secondary: #9aa3b5;
  --text-tertiary: #6b7387;
  --text-inverse: #0a0c11;

  --primary: #38bdf8;
  --primary-hover: #5cc9fa;
  --primary-active: #22a8e0;
  --primary-fg: #04222f;
  --primary-soft: rgba(56, 189, 248, 0.13);
  --primary-soft-strong: rgba(56, 189, 248, 0.22);
  --primary-border: rgba(56, 189, 248, 0.34);

  --secondary: #a78bfa;
  --secondary-soft: rgba(167, 139, 250, 0.13);
  --secondary-border: rgba(167, 139, 250, 0.32);

  --success: #34d399;
  --success-fg: #052e21;
  --success-soft: rgba(52, 211, 153, 0.13);
  --success-soft-strong: rgba(52, 211, 153, 0.24);
  --success-border: rgba(52, 211, 153, 0.34);

  --warning: #fbbf24;
  --warning-fg: #2e2205;
  --warning-soft: rgba(251, 191, 36, 0.13);
  --warning-soft-strong: rgba(251, 191, 36, 0.22);
  --warning-border: rgba(251, 191, 36, 0.34);

  --error: #f87171;
  --error-fg: #2e0b0b;
  --error-soft: rgba(248, 113, 113, 0.13);
  --error-soft-strong: rgba(248, 113, 113, 0.22);
  --error-border: rgba(248, 113, 113, 0.34);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6);

  --header-bg: rgba(10, 12, 17, 0.82);
  --overlay-bg: rgba(4, 6, 10, 0.76);
  --skeleton-base: #1a1f2a;
  --skeleton-shine: #252b39;
}

[data-theme="light"] {
  color-scheme: light;

  /* 라이트 배경에서는 어두운 금색이 더 또렷하다 */
  --gold-rich: #a6790f;
  --gold-bright: #c99a1f;

  --bg: #f5f6f8;
  --bg-elevated: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e9ecf1;
  --surface-hover: #f6f8fa;
  --surface-active: #e4e8ee;

  --border-subtle: #e8eaef;
  --border-default: #d9dee6;
  --border-strong-c: #bdc5d1;

  --text-primary: #14171d;
  --text-secondary: #565e6d;
  --text-tertiary: #838b99;
  --text-inverse: #ffffff;

  --primary: #0284c7;
  --primary-hover: #0369a1;
  --primary-active: #075985;
  --primary-fg: #ffffff;
  --primary-soft: rgba(2, 132, 199, 0.09);
  --primary-soft-strong: rgba(2, 132, 199, 0.16);
  --primary-border: rgba(2, 132, 199, 0.28);

  --secondary: #7c3aed;
  --secondary-soft: rgba(124, 58, 237, 0.08);
  --secondary-border: rgba(124, 58, 237, 0.26);

  --success: #059669;
  --success-fg: #ffffff;
  --success-soft: rgba(5, 150, 105, 0.1);
  --success-soft-strong: rgba(5, 150, 105, 0.18);
  --success-border: rgba(5, 150, 105, 0.28);

  --warning: #b45309;
  --warning-fg: #ffffff;
  --warning-soft: rgba(180, 83, 9, 0.09);
  --warning-soft-strong: rgba(180, 83, 9, 0.16);
  --warning-border: rgba(180, 83, 9, 0.26);

  --error: #dc2626;
  --error-fg: #ffffff;
  --error-soft: rgba(220, 38, 38, 0.08);
  --error-soft-strong: rgba(220, 38, 38, 0.15);
  --error-border: rgba(220, 38, 38, 0.26);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.09), 0 2px 6px rgba(16, 24, 40, 0.05);
  --shadow-xl: 0 20px 48px rgba(16, 24, 40, 0.14), 0 4px 12px rgba(16, 24, 40, 0.06);

  --header-bg: rgba(245, 246, 248, 0.85);
  --overlay-bg: rgba(23, 28, 38, 0.42);
  --skeleton-base: #e9ecf1;
  --skeleton-shine: #f5f7f9;
}

/* 이전 변수명 호환 — 남아있는 인라인 style 속성이 새 토큰을 따르도록 연결 */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --panel: var(--surface-1);
  --panel-2: var(--surface-2);
  --border: var(--border-subtle);
  --border-strong: var(--border-default);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --accent: var(--primary);
  --accent-dark: var(--primary-soft);
  --gold: var(--warning);
}

/* ==================================================================
   3 · 베이스
   ================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-normal) var(--ease-in-out),
    color var(--duration-normal) var(--ease-in-out);
}

/* 테마 전환 순간에만 전 요소의 색을 부드럽게 보간한다 */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: background-color var(--duration-normal) var(--ease-in-out),
    border-color var(--duration-normal) var(--ease-in-out),
    color var(--duration-normal) var(--ease-in-out),
    box-shadow var(--duration-normal) var(--ease-in-out) !important;
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
/* 위계를 만들어야 정보가 평평하게 깔리지 않는다.
   예전에는 h1 18 / h2 16 / 본문 14로 단계마다 2px 차이뿐이라
   무엇이 제목인지 눈으로 구분되지 않았다. */
h1 { font-size: var(--text-xl); display: flex; align-items: center; gap: var(--space-2); }
h2 { font-size: var(--text-xl); line-height: var(--leading-tight); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }
p { margin: var(--space-2) 0; }

a { color: var(--primary); }
code { font-family: var(--font-mono); }

.muted { color: var(--text-secondary); font-size: var(--text-sm); }
/* 포인트(=이 사이트의 "돈")는 골드로, 링크/버튼 같은 조작 요소는 계속 파랑으로 —
   "가치는 금색, 동작은 파랑" 두 가지 역할로 명확히 나눠서 색이 서로 안 싸우게 한다 */
.points { color: var(--gold-rich); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.pnl-pos { color: var(--success); font-weight: var(--weight-bold); }
.pnl-neg { color: var(--error); font-weight: var(--weight-bold); }
.rank-num { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }

.inline-link { color: var(--primary); text-decoration: none; border-bottom: 1px solid transparent; }
.inline-link:hover { border-bottom-color: var(--primary); }
.secondary-link { color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); }
.secondary-link:hover { color: var(--text-primary); }

.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-skip);
  background: var(--primary); color: var(--primary-fg);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--weight-bold); font-size: var(--text-sm); text-decoration: none;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--primary-soft-strong); color: var(--text-primary); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong-c); }

/* ==================================================================
   4 · 레이아웃
   ================================================================== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--header-bg);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

/* 헤더가 sticky라, #앵커로 점프하면 제목이 헤더 밑에 가려진다. 점프 목적지에 여유를 준다. */
main section[id] { scroll-margin-top: calc(var(--control-lg) + var(--space-6)); }

.logo-link {
  display: flex; align-items: center; gap: var(--space-2);
  color: inherit; text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.logo-link:hover { opacity: 0.75; }

.header-nav { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.main-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.nav-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.nav-link:hover { color: var(--text-primary); background: var(--surface-2); }
.nav-active { color: var(--primary); background: var(--primary-soft); font-weight: var(--weight-semibold); }

/* 이모지 대신 쓰는 인라인 SVG 아이콘 — 텍스트와 나란히 놓일 때 기본 baseline 정렬이면
   살짝 아래로 처지므로 시각적으로 텍스트 중앙에 오도록 보정한다. */
.nav-icon { display: inline-flex; }
.inline-icon, .inline-icon-wrap { vertical-align: -3px; flex-shrink: 0; }
.inline-icon-wrap { display: inline-flex; }
h2 .inline-icon, h3 .inline-icon { vertical-align: -4px; color: var(--primary); }
.role-crown { display: inline-flex; vertical-align: -2px; color: var(--warning); }
.refresh-icon { display: inline-flex; vertical-align: -2px; margin-right: 2px; }
button .inline-icon, .tab-btn .inline-icon { vertical-align: -3px; margin-right: 1px; }

.auth-area { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--text-secondary); }
.auth-nick { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 관리자 쪽지함 종 아이콘 — 카톡/디스코드 알림 아이콘과 같은 자리(헤더 우측)에 둔다. */
.msg-bell { position: relative; padding: 0; width: var(--control-md); display: inline-flex; align-items: center; justify-content: center; }
.msg-bell-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--radius-full); background: var(--error); color: #fff;
  font-size: 10px; font-weight: var(--weight-bold); line-height: 16px; text-align: center;
}
.msg-panel-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 50vh; overflow-y: auto; margin-top: var(--space-2); }
.msg-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface-2); }
.msg-item--unread { border-left: 3px solid var(--primary); background: var(--primary-soft); }
.msg-item-meta { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-1); }
.msg-item-body { font-size: var(--text-sm); line-height: var(--leading-normal); white-space: pre-wrap; }

main {
  padding: var(--space-6) var(--space-6) var(--space-12);
  max-width: var(--content-width);
  margin: 0 auto;
}

footer {
  position: relative;
  padding: var(--space-6);
  margin-top: var(--space-8);
  border-top: none;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-align: center;
}
/* 밋밋한 실선 대신 얇은 골드 라인으로 마무리한다 (점선 패턴은 지저분해 보여서 제외) */
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--gold-line);
  opacity: 0.6;
}
footer p { margin: var(--space-1) 0; }
.footer-links { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-link { color: var(--text-tertiary); text-decoration: none; font-size: var(--text-xs); }
.footer-link:hover { color: var(--text-primary); }

/* 채널 네비게이션 */
.channel-nav {
  display: flex; gap: var(--space-1);
  padding: var(--space-2) var(--space-6);
  overflow-x: auto;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-1);
  scrollbar-width: thin;
}
.channel-nav a {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--text-base); font-weight: var(--weight-medium);
  min-height: 40px; padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.channel-nav a:hover { color: var(--text-primary); background: var(--surface-2); border-color: var(--border-subtle); }
.channel-nav a.is-live { color: var(--text-primary); background: var(--success-soft); border-color: var(--success-border); }
.channel-nav a.active { color: var(--primary); background: var(--primary-soft); border-color: var(--primary-border); font-weight: var(--weight-semibold); }

.channel-avatar {
  width: 28px; height: 28px; margin-right: 2px; flex-shrink: 0; object-fit: cover;
  border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-subtle);
}

.live-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 5px; vertical-align: middle; flex-shrink: 0;
}
.live-dot.live-on { background: var(--success); box-shadow: 0 0 0 2px var(--success-soft); }
.live-dot.live-off { background: var(--border-strong-c); }
.live-dot.live-blocked { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-soft); }
.live-dot.live-retired { background: var(--error); box-shadow: 0 0 0 2px var(--error-soft), 0 0 9px var(--error); }
.live-dot.live-testing { background: #a855f7; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.22), 0 0 9px #a855f7; }

/* 입장 권한이 필요해 채팅 소켓이 못 붙은 방송 — 점 자리에 사유 아이콘을 놓는다.
   7px 점으로는 형태가 안 보여서 14px로 키우되, 점과 같은 정렬·여백을 유지해
   목록의 세로 리듬이 흐트러지지 않게 한다. */
.live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
}
.live-badge svg { display: block; }
/* 사유(구독/비밀번호/성인/해외)를 더는 구분해서 보여주지 않고 경고 삼각형 하나로
   통일한다 — 주황(warning) 톤으로 "집계가 안 되는 특수 방송"임을 바로 알아볼 수 있게. */
.live-badge--restricted { color: var(--warning); filter: drop-shadow(0 0 4px var(--warning-soft)); }
/* 집계가 멈춘 채널은 초록 배경(is-live)을 쓰면 정상처럼 보인다 — 중립으로 되돌린다. */
.channel-nav a.is-restricted { background: var(--surface-2); border-color: var(--border-default); }

/* 집계가 멈춘 이유를 설명하는 안내 — 오류가 아니라 구조적 제약임을 전달해야 하므로
   빨간 오류 상자가 아니라 차분한 정보 톤으로 둔다. */
.restriction-notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-4);
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-md);
}
.restriction-notice-head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); }
.restriction-notice-head .live-badge { width: 18px; height: 18px; margin-right: 0; }
.restriction-notice p { margin: 0; color: var(--text-secondary); word-break: keep-all; overflow-wrap: break-word; }
.restriction-notice p strong { color: var(--text-primary); }
.restriction-notice-foot { padding-top: var(--space-2); border-top: 1px dashed var(--border-subtle); font-size: var(--text-sm); }

.incident-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); font-size: var(--text-sm); color: var(--text-secondary); }
.incident-legend .pill { margin-right: 0; }
.incident-howto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0 16px; }
.incident-howto > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-muted); }
.incident-howto strong { display: block; color: var(--text-primary); font-size: var(--text-sm); margin-bottom: 3px; }
.incident-howto span { display: block; color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.45; }
.incident-section-title { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; font-size: var(--text-lg); }
.incident-section-title span { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-normal); }
@media (max-width: 760px) { .incident-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-filter-row { display: flex; gap: 8px; margin: 12px 0; }
.admin-filter-row input { min-width: 240px; max-width: 420px; }
.content-admin-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.content-admin-summary span { display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-sm); }
.content-admin-summary strong { color: var(--text-primary); }
.admin-context { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; background: var(--surface-muted); }
.admin-context strong { color: var(--text-primary); }
.admin-context span { color: var(--text-secondary); font-size: var(--text-sm); }
@media (max-width: 600px) { .admin-context { display: block; } .admin-context span { display: block; margin-top: 3px; } }

/* 내 랭킹 행 옆의 집계 신뢰도 표시(초록=SOOP 계정 연동됨, 빨강=미연동) */
.trust-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-left: 6px; vertical-align: middle; flex-shrink: 0;
  cursor: help;
}
.trust-dot-ok { background: var(--success); box-shadow: 0 0 0 2px var(--success-soft); }
.trust-dot-warn { background: var(--error); box-shadow: 0 0 0 2px var(--error-soft); }

/* ==================================================================
   5 · 컴포넌트
   ================================================================== */

/* -------- 카드 -------- */
.card {
  /* 완전히 납작한 단색 대신 위에서 빛이 떨어지는 느낌의 미세한 그라데이션을 준다 —
     플랫한 회색 박스가 쌓인 인상에서 벗어나는 가장 저렴하고 안전한 방법 */
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 22%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.card:hover { border-color: var(--gold-rich); box-shadow: var(--shadow-gold-glow); }
.card h2 { margin-bottom: var(--space-1); }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.card-head h2 { margin: 0; }
.card-head .refresh-indicator { margin: 0; }
.streamer-heading { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.streamer-page-avatar {
  width: 56px; height: 56px; flex-shrink: 0; object-fit: cover;
  border-radius: 50%; background: var(--surface-3); border: 2px solid var(--primary-border);
  box-shadow: var(--shadow-sm);
}
.danger-card { border-color: var(--error-border); }
.danger-card h2 { color: var(--error); }
.login-card { max-width: 460px; }
.login-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-3); }
.login-row input { flex: 1; min-width: 180px; }

/* -------- 버튼 -------- */
button {
  font-family: inherit;
  background: var(--primary);
  color: var(--primary-fg);
  border: 1px solid transparent;
  /* 높이를 명시해 모든 버튼이 같은 리듬을 갖게 한다 (Fitts's Law) */
  min-height: var(--control-md);
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}
button:hover:not(:disabled) { background: var(--primary-hover); }
button:active:not(:disabled) { background: var(--primary-active); transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

button.secondary {
  background: var(--surface-1);
  color: var(--text-secondary);
  border-color: var(--border-default);
  font-weight: var(--weight-medium);
}
button.secondary:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-strong-c); }
button.secondary:active:not(:disabled) { background: var(--surface-active); }

button.del-btn {
  background: transparent; color: var(--error);
  border-color: var(--error-border);
  min-height: var(--control-sm); padding: 0 var(--space-3); font-size: var(--text-xs);
}
button.del-btn:hover:not(:disabled) { background: var(--error-soft); }

.theme-toggle {
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-default);
  width: var(--control-md); height: var(--control-md); min-height: 0; padding: 0;
  border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-strong-c); }
.theme-toggle:active { transform: scale(0.94); }

/* -------- 입력 -------- */
input[type="text"], input[type="number"], input[type="password"], select, textarea {
  font-family: inherit;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
input::placeholder { color: var(--text-tertiary); }
input:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--border-strong-c); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

label { font-size: var(--text-base); }
.switch-label { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.form-error { color: var(--error); font-size: var(--text-sm); margin: var(--space-2) 0 0; min-height: 1em; }

/* -------- 표 -------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 480px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--space-3); }
th {
  text-align: left; padding: 12px 14px;
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-1);
  position: sticky; top: 0; z-index: 1;
}
/* 행 높이를 키워 표가 빽빽해 보이지 않게 한다. 폭이 넓어진 만큼 숨 쉴 공간을 준다. */
td { text-align: left; padding: 14px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-base); }
tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
tbody tr:hover { background: var(--surface-hover); }
tbody tr:last-child td { border-bottom: none; }
tr.me { background: var(--primary-soft); box-shadow: inset 2px 0 0 var(--primary); }
tr.me:hover { background: var(--primary-soft-strong); }
tr.row-hidden { opacity: 0.45; }
/* 방송 중인데 소켓이 끊긴 채널 — 지금 데이터가 수집되지 않는 상태라 눈에 띄게 */
tr.row-stalled { background: var(--error-soft); box-shadow: inset 2px 0 0 var(--error); }
tr.row-stalled:hover { background: var(--error-soft-strong); }
.table-empty { text-align: center; padding: var(--space-6) var(--space-3) !important; color: var(--text-secondary); }
.cell-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }

/* -------- 뱃지 / 알약 -------- */
.badge {
  font-size: 9.5px; font-weight: var(--weight-bold);
  background: var(--primary); color: var(--primary-fg);
  padding: 3px 6px; border-radius: var(--radius-sm);
  vertical-align: middle; letter-spacing: var(--tracking-wide);
}
.badge-hall { background: var(--warning); color: var(--warning-fg); }
.badge-admin { background: var(--text-tertiary); color: var(--surface-1); }
.policy-status-active { background: var(--success); color: var(--success-fg); }
.policy-status-scheduled { background: var(--warning); color: var(--warning-fg); }
.policy-status-expired { background: var(--border-strong-c); color: var(--text-secondary); }

.pill {
  display: inline-block; font-size: 10.5px; font-weight: var(--weight-semibold);
  padding: 3px 8px; border-radius: var(--radius-full);
  border: 1px solid transparent; vertical-align: middle; line-height: 1.5;
}
.pill-live { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.pill-danger { background: var(--error-soft); color: var(--error); border-color: var(--error-border); }
.pill-warn { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.pill-muted { background: var(--surface-3); color: var(--text-tertiary); border-color: var(--border-subtle); }
.pill-me { background: var(--primary); color: var(--primary-fg); margin-left: var(--space-2); }

/* -------- 상태 박스 -------- */
.error-box {
  background: var(--error-soft); border: 1px solid var(--error-border); color: var(--error);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  margin-bottom: var(--space-4); font-size: var(--text-base); line-height: var(--leading-normal);
}
.lead-note {
  margin: var(--space-2) 0; padding: var(--space-3) var(--space-4);
  background: var(--primary-soft); border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-primary); font-size: var(--text-base); line-height: var(--leading-normal);
}
.hint-line { margin: var(--space-2) 0; line-height: var(--leading-normal); }
.weights-line { margin-top: var(--space-2); }
.donation-scope-note {
  margin: var(--space-2) 0 var(--space-3); padding: 7px 10px;
  color: var(--text-secondary); background: var(--warning-soft); border: 1px solid var(--warning-border);
  border-radius: var(--radius-md); font-size: var(--text-xs); line-height: var(--leading-normal);
}
.footnote { margin-top: var(--space-3); }

.empty-state {
  text-align: center; padding: var(--space-6) var(--space-4);
  background: var(--surface-2); border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
}
.empty-title { font-weight: var(--weight-bold); margin: 0 0 var(--space-2); font-size: var(--text-base); }
.empty-state .muted { margin: 0; }

.how-it-works {
  margin: var(--space-3) 0 var(--space-1);
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: var(--text-base);
}
.how-it-works summary { cursor: pointer; color: var(--primary); font-weight: var(--weight-semibold); }
.how-it-works ul { margin: var(--space-3) 0 2px; padding-left: 18px; color: var(--text-secondary); }
.how-it-works li { margin-bottom: var(--space-2); line-height: var(--leading-normal); }

.status-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-2) 0; font-size: var(--text-base); }
.status-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); padding: 4px 11px;
  font-size: var(--text-sm); color: var(--text-secondary);
}
.status-chip.status-live { color: var(--success); background: var(--success-soft); border-color: var(--success-border); }
.status-chip.status-off { color: var(--text-tertiary); }
.status-chip.status-blocked { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); font-weight: var(--weight-semibold); }
.status-chip.status-error { color: var(--error); background: var(--error-soft); border-color: var(--error-border); font-weight: var(--weight-semibold); }
.status-chip.status-testing { color: #7c3aed; background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.35); font-weight: var(--weight-semibold); }
.live-summary-line { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.offline-details { margin-top: 5px; }
.offline-details summary { cursor: pointer; font-size: var(--text-sm); }
.offline-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); }
.refresh-indicator { font-variant-numeric: tabular-nums; }
.row-wrap { display: flex; flex-wrap: wrap; }

/* -------- 토스트 -------- */
#toast-container {
  position: fixed; bottom: var(--space-5); right: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-toast);
}
.toast {
  background: var(--surface-1); border: 1px solid var(--border-default); color: var(--text-primary);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  font-size: var(--text-base); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.toast-show { opacity: 1; transform: translateY(0); }
.toast-ok { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--error); }

/* -------- 스켈레톤 로딩 -------- */
.skeleton {
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeletonShine 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm); color: transparent !important;
}
@keyframes skeletonShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row { height: 14px; margin: 9px 0; }

/* -------- 모달(온보딩) -------- */
.ob-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--overlay-bg); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: var(--space-5);
  opacity: 0; transition: opacity var(--duration-normal) var(--ease-out);
}
.ob-overlay.ob-show { opacity: 1; }
.ob-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--surface-1); border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl); padding: 30px var(--space-6) var(--space-5);
  box-shadow: var(--shadow-xl);
  transform: translateY(10px) scale(0.98);
  transition: transform var(--duration-slow) var(--ease-out);
}
.ob-show .ob-card { transform: translateY(0) scale(1); }
.ob-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  background: transparent; color: var(--text-tertiary); border: none;
  font-size: var(--text-md); padding: var(--space-2); line-height: 1;
}
.ob-close:hover { background: var(--surface-2); color: var(--text-primary); }
.ob-body { text-align: center; min-height: 210px; }
.ob-icon { font-size: 44px; line-height: 1; margin-bottom: var(--space-3); animation: obPop var(--duration-slow) var(--ease-out); }
@keyframes obPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ob-title { font-size: var(--text-lg); margin: 0 0 var(--space-3); display: block; }
.ob-text { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-primary); margin: 0 0 var(--space-3); }
.ob-hint {
  font-size: var(--text-sm); color: var(--text-secondary);
  background: var(--surface-2); border-radius: var(--radius-md);
  padding: 9px var(--space-3); margin: var(--space-3) 0 0; line-height: var(--leading-normal);
}
.ob-dots { display: flex; justify-content: center; gap: 7px; margin: var(--space-4) 0 var(--space-3); }
.ob-dot {
  /* 보이는 점은 작지만 누를 수 있는 영역은 44px로 넓힌다 */
  position: relative;
  width: 8px; height: 8px; padding: 0; min-height: 0;
  border-radius: 50%;
  background: var(--border-strong-c); border: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), width var(--duration-fast) var(--ease-out);
}
.ob-dot::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--tap-min); height: var(--tap-min);
}
.ob-dot:hover { background: var(--text-tertiary); }
.ob-dot-on, .ob-dot-on:hover { background: var(--primary); width: 22px; border-radius: var(--radius-full); }
.ob-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ob-actions button { min-width: 82px; }
.ob-step-count { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ob-skip {
  display: block; width: 100%; margin-top: var(--space-3);
  background: transparent; color: var(--text-tertiary); border: none;
  font-size: var(--text-sm); font-weight: var(--weight-medium); padding: var(--space-2);
}
.ob-skip:hover { background: var(--surface-2); color: var(--text-primary); }

/* -------- 순위 변동 -------- */
.rank-move-up { color: var(--success); font-weight: var(--weight-bold); font-size: var(--text-xs); }
.rank-move-down { color: var(--error); font-weight: var(--weight-bold); font-size: var(--text-xs); }
.rank-move-same { color: var(--text-tertiary); font-size: var(--text-xs); }
.flash-up { animation: flashUp 1.2s var(--ease-out); }
.flash-down { animation: flashDown 1.2s var(--ease-out); }
@keyframes flashUp { 0% { background: var(--success-soft-strong); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: var(--error-soft-strong); } 100% { background: transparent; } }
.points-pulse { animation: pointsPulse 0.9s var(--ease-out); display: inline-block; }
@keyframes pointsPulse { 0% { transform: scale(1.25); color: var(--success); } 100% { transform: scale(1); } }

/* ==================================================================
   6 · 페이지별
   ================================================================== */

/* -------- 마이페이지 -------- */
.section-title { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-1); font-weight: var(--weight-bold); }
#my-stats { border-left: 3px solid var(--primary); }
.my-summary-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.my-summary-item {
  display: flex; align-items: baseline; gap: var(--space-2);
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: var(--text-base);
}
.my-summary-item strong { font-size: var(--text-lg); }
.my-summary-breakdown { flex: 1; min-width: 180px; align-items: center; flex-wrap: wrap; }
.next-rank { font-size: var(--text-sm); }
.tracking-help { margin: 0 0 var(--space-3); }
.tracking-guide {
  display: flex; flex-wrap: wrap; gap: 5px var(--space-3); margin: calc(var(--space-2) * -1) 0 var(--space-3);
  color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-normal);
}
.tracking-empty { margin: 0; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius-lg); }
.tracking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.tracking-card {
  display: block; color: inherit; text-decoration: none; background: var(--surface-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4);
}
.tracking-card:hover { border-color: var(--primary); }
.tracking-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tracking-card-details { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); font-size: var(--text-xs); }
.tracking-card-time { margin-top: var(--space-3); font-weight: var(--weight-semibold); }

.my-history { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.history-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.history-chip {
  font-size: var(--text-sm); padding: 5px var(--space-3); border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  color: inherit; text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.history-chip:hover { border-color: var(--border-strong-c); }

.per-channel-table td, .per-channel-table th { padding: 10px 9px; }
.per-channel-table tfoot td { border-top: 2px solid var(--border-default); border-bottom: none; }

.soop-id-form {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.soop-id-registered { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); line-height: var(--leading-relaxed); }
.soop-id-pending {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--warning-soft); border: 1px solid var(--warning-border);
  border-left: 3px solid var(--warning); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: var(--text-base); line-height: var(--leading-normal);
}
.extension-token-reveal {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--success-soft); border: 1px solid var(--success-border);
  border-radius: var(--radius-lg);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.extension-token-reveal input {
  flex: 1 1 260px; min-width: 0; font-family: var(--font-mono); font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-1); color: var(--text-primary);
}
.extension-token-warning { flex: 1 0 100%; margin: var(--space-2) 0 0; font-size: var(--text-xs); }

.manual-link { margin-top: var(--space-3); }
.manual-link summary { cursor: pointer; color: var(--text-secondary); font-size: var(--text-sm); }
.manual-link .soop-id-form { border-top: none; padding-top: var(--space-2); margin-top: var(--space-1); }

/* -------- 월간 리포트 --------
   통계 카드는 항상 6개라서 auto-fit(가변 컬럼 수)이 화면 폭에 따라 5+1처럼
   짝이 안 맞는 줄을 만들었다. 3열로 고정해 항상 2행 x 3열로 딱 떨어지게 한다. */
.rc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.rc-stat { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 13px 15px; }
.rc-stat-accent { background: var(--primary-soft); border-color: var(--primary-border); }
.rc-stat-label { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 5px; }
.rc-stat-value { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1.2; }
.rc-stat-unit { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); margin-left: 3px; }
/* 이번 달 누적 포인트가 이 화면에서 제일 중요한 숫자라서, 6칸짜리 격자 비율은
   그대로 두고(칸을 넓히면 다시 줄이 안 맞는다) 글자 크기만 눈에 띄게 키운다. */
.rc-stat-hero .rc-stat-value { font-size: var(--text-2xl, 1.5rem); }
.rc-delta { display: inline-block; margin-top: 5px; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.rc-up { color: var(--success); }
.rc-down { color: var(--error); }
.rc-flat { color: var(--text-tertiary); font-weight: var(--weight-medium); }

.rc-comparison {
  margin-bottom: var(--space-4); padding: var(--space-4);
  background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.rc-comparison-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.rc-comparison-head .muted { font-size: var(--text-xs); }
.rc-comparison-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.rc-compare-item { display: flex; flex-direction: column; gap: 3px; padding: var(--space-3); background: var(--surface-1); border-radius: var(--radius-md); }
.rc-compare-label, .rc-compare-values { font-size: var(--text-xs); color: var(--text-secondary); }
.rc-compare-values { line-height: 1.4; }

.rc-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-2); }
.rc-highlight {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 13px 15px;
}
.rc-hl-icon { font-size: var(--text-xl); line-height: 1.2; }
.rc-hl-label { font-size: var(--text-xs); color: var(--text-secondary); }
.rc-hl-value { font-size: var(--text-md); font-weight: var(--weight-bold); margin: 2px 0; }
.rc-highlight .muted { font-size: var(--text-xs); }
.rc-section-title { font-size: var(--text-base); font-weight: var(--weight-bold); margin: var(--space-5) 0 var(--space-3); }

.rc-calendar-weekdays, .rc-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.rc-calendar-note { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-normal); }
.rc-calendar-weekdays { margin-bottom: var(--space-2); text-align: center; color: var(--text-tertiary); font-size: var(--text-xs); }
.rc-calendar-day {
  min-height: 72px; padding: 7px; display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-2);
  color: var(--text-primary); font: inherit; font-size: var(--text-xs); text-align: left; cursor: default;
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.rc-calendar-day:hover { transform: translateY(-1px); border-color: var(--primary-border); }
.rc-calendar-day:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button.rc-calendar-day { cursor: pointer; }
.rc-calendar-today { border-color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning); }
.rc-calendar-today > span:first-child { color: var(--warning); font-weight: var(--weight-bold); }
.rc-calendar-selected { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.rc-calendar-channel { display: flex; align-items: center; gap: 5px; min-width: 0; }
.rc-calendar-avatar {
  width: 24px; height: 24px; flex-shrink: 0; object-fit: cover;
  border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--surface-3);
}
.rc-calendar-top { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semibold); }
.rc-calendar-channel-points { flex-shrink: 0; font-size: 10px; font-weight: var(--weight-bold); white-space: nowrap; }
/* 아직 오지 않은 날은 활동 카드처럼 테두리/배경을 그리지 않고 숫자만 옅게 —
   달력 한 달치를 다 보여주되(진행 중인 달이라 필요하다), 아직 아무 일도 없는 칸이
   활동 칸과 똑같은 무게로 반복되면서 화면을 낭비하는 느낌을 줄인다. */
.rc-calendar-future {
  border-color: transparent;
  background: transparent;
  opacity: 0.4;
}
.rc-calendar-future:hover { transform: none; border-color: transparent; }
.rc-level-0 { background: var(--surface-2); }
.rc-level-1 { background: color-mix(in srgb, var(--primary-soft) 65%, var(--surface-1)); }
.rc-level-2 { background: var(--primary-soft-strong); }
.rc-level-3 { background: color-mix(in srgb, var(--primary) 48%, var(--surface-1)); }
.rc-level-4 { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.rc-calendar-legend { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: var(--space-2); font-size: var(--text-xs); }
.rc-calendar-legend i { width: 13px; height: 13px; border: 1px solid var(--border-subtle); border-radius: 3px; }
.rc-day-detail {
  margin-top: var(--space-3); padding: var(--space-3); min-height: 44px;
  background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.rc-day-detail > .muted { margin: 0; }
.rc-day-detail-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.rc-day-detail-head span { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.rc-day-detail-channel { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.rc-day-detail-channel > span { display: flex; flex-direction: column; min-width: 0; }
.rc-day-detail-channel > strong { margin-left: auto; color: var(--gold-rich); }
.rc-day-detail-channel small, .rc-day-detail-stats small { color: var(--text-tertiary); font-size: var(--text-xs); }
.rc-day-detail-avatar { width: 34px; height: 34px; flex-shrink: 0; object-fit: cover; border-radius: 50%; border: 1px solid var(--border-subtle); }
.rc-day-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.rc-day-detail-stats > span { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); background: var(--surface-3); border-radius: var(--radius-md); }
.rc-day-detail-stats strong { font-size: var(--text-sm); }

/* -------- 명예의 전당 -------- */
.month-picker { display: flex; align-items: center; gap: var(--space-2); }
.tab-panel { animation: fadeIn var(--duration-normal) var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.hall-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.month-select {
  background: var(--surface-1); border: 1px solid var(--border-default); color: var(--text-primary);
  padding: 9px var(--space-3); border-radius: var(--radius-md); font-weight: var(--weight-semibold);
}
.podium { display: flex; gap: var(--space-3); justify-content: center; align-items: flex-end; margin: var(--space-2) 0 var(--space-5); flex-wrap: wrap; }
.podium-item {
  flex: 1; min-width: 100px; max-width: 180px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3);
}
.podium-1 { border-color: var(--warning-border); background: var(--warning-soft); order: 2; padding-top: 26px; position: relative; }
/* 시그니처 요소: 무역상사의 "봉랍 인장" — 이번 달 1위에게 공식 도장을 찍어준다는 은유 */
.podium-1::before {
  content: '🐋';
  position: absolute;
  top: -14px;
  right: -10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  filter: grayscale(1) brightness(1.7);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #a53f3f, #601c1c 75%);
  border: 2px dashed rgba(255, 230, 220, 0.4);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transform: rotate(-9deg);
}
.podium-2 { order: 1; }
.podium-3 { order: 3; }
.podium-medal { font-size: 30px; }
.podium-name { font-weight: var(--weight-bold); margin: var(--space-2) 0 2px; font-size: var(--text-base); word-break: break-all; }
.podium-points { color: var(--gold-rich); font-weight: var(--weight-bold); font-size: var(--text-base); }
.podium-rank { font-size: var(--text-xs); }
tr.hall-top td { background: var(--warning-soft); }

/* -------- 약관/개인정보 페이지 -------- */
.legal-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.legal-tab {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); text-decoration: none; font-weight: var(--weight-semibold);
}
.legal-tab.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-border); }
.legal-content { line-height: 1.7; color: var(--text-secondary); margin-top: var(--space-3); }
.legal-content p { margin: 0 0 var(--space-3); }

/* -------- 관리자 -------- */
/* 탭 9개를 한 줄로 나열하면 그룹 구분이 안 보인다는 피드백에 따라
   좌측 세로 사이드바 + 그룹 라벨 구조로 바꾼다. 좁은 화면에서는 기존처럼
   가로 스크롤 탭 바로 되돌아간다(아래 반응형 규칙). */
.admin-shell { display: flex; align-items: flex-start; gap: var(--space-6); }
.admin-main { flex: 1; min-width: 0; }
.admin-tabs {
  display: flex; flex-direction: column; gap: 2px;
  flex: 0 0 224px; position: sticky; top: var(--space-4);
  padding: var(--space-2); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-1);
}
.admin-nav-group-label {
  margin: var(--space-3) var(--space-2) var(--space-1);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-tertiary);
}
.admin-nav-group-label:first-child { margin-top: var(--space-1); }
.admin-tabs .tab-btn {
  background: transparent; color: var(--text-secondary); justify-content: flex-start;
  border: none; border-radius: var(--radius-md);
  min-height: var(--control-md); padding: 0 var(--space-3); font-weight: var(--weight-semibold); font-size: var(--text-base); white-space: nowrap;
}
.admin-tabs .tab-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--surface-2); }
.admin-tabs .tab-btn.active { color: var(--primary); background: var(--primary-soft); }
.admin-main .card { overflow: hidden; }
.admin-main .card-head { gap: var(--space-4); }
.admin-main .table-scroll { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.admin-main table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); box-shadow: 0 1px 0 var(--border-default); }
.admin-main table tbody tr:hover { background: var(--primary-soft); }
.admin-context { margin-bottom: var(--space-4); }

@media (max-width: 900px) {
  main:has(#admin-content) { max-width: 100%; }
  .admin-shell { flex-direction: column; }
  .admin-tabs {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin;
    position: static; width: 100%;
  }
  .admin-nav-group-label {
    display: flex; align-items: center; margin: 0 var(--space-1);
    padding-right: var(--space-2); border-right: 1px solid var(--border-subtle);
  }
  .admin-tabs .tab-btn { flex: 0 0 auto; }
}

/* 수집 장애 분석: 회색 카드 대신 위험도별로 색을 입혀 우선순위가 바로 보이게 한다. */
.incident-summary-grid { grid-template-columns: repeat(3, 1fr); }
.incident-summary-grid .stat-value { font-size: var(--text-xl); }
@media (max-width: 900px) { .incident-summary-grid { grid-template-columns: 1fr; } }
.stat-card--danger { border-color: var(--error-border); background: linear-gradient(145deg, var(--error-soft), var(--surface-2)); }
.stat-card--danger .stat-value { color: var(--error); }
.stat-card--warn { border-color: var(--warning-border); background: linear-gradient(145deg, var(--warning-soft), var(--surface-2)); }
.stat-card--warn .stat-value { color: var(--warning); }
.stat-card--ok { border-color: var(--success-border); background: linear-gradient(145deg, var(--success-soft), var(--surface-2)); }
.stat-card--ok .stat-value { color: var(--success); }

/* 장애 상세처럼 행이 아주 많아질 수 있는 표는 페이지 전체가 늘어지는 대신
   표 안에서만 스크롤되게 높이를 제한한다. 헤더는 스크롤해도 고정. */
.table-scroll--tall { max-height: 420px; overflow-y: auto; }
.table-scroll--tall thead th { position: sticky; top: 0; z-index: 1; }

.row-highlight td { background: var(--error-soft); }
.bar-wrap { display: inline-block; width: 60px; height: 6px; margin-left: var(--space-2); border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; vertical-align: middle; }
.bar-wrap .bar { display: block; height: 100%; background: var(--error); border-radius: inherit; }

/* 채널 상세: 실시간 상태·장애·활동을 3열로, 심각한 문제는 배너로 먼저 눈에 띄게 한다. */
.channel-detail-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .channel-detail-grid { grid-template-columns: 1fr; } }
.channel-detail-alert {
  margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--error-border); border-radius: var(--radius-md);
  background: var(--error-soft); color: var(--error); font-weight: var(--weight-semibold);
}

/* 지역차단 자동보정: 판단 규칙을 먼저 보여주고, 그 아래 사건별로 누가 인정받았는지 나열한다. */
.geo-summary-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .geo-summary-grid { grid-template-columns: 1fr; } }
.geo-rule-guide {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-2); font-size: var(--text-sm); color: var(--text-secondary);
}
.geo-incident-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.geo-incident {
  border: 1px solid var(--border-subtle); border-left: 4px solid var(--warning);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--surface-2);
}
.geo-incident--ongoing { border-left-color: var(--error); background: var(--error-soft); }
.geo-incident-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.geo-people { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-2); }
.geo-people-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-right: var(--space-1); }
.geo-chip {
  font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle); background: var(--surface-1);
}
.geo-chip--ok { color: var(--success); border-color: var(--success-border); background: var(--success-soft); }
.geo-chip--muted { color: var(--text-tertiary); }

/* 방송별 타임라인: 방송 시작~종료 구간마다 오류 유무가 카드 왼쪽 테두리 색으로 바로 보이게 한다. */
.session-timeline { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.session-item { border: 1px solid var(--border-subtle); border-left-width: 4px; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--surface-2); }
.session-item--clean { border-left-color: var(--success); }
.session-item--issue { border-left-color: var(--error); }
.session-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); }
.session-item-body { margin-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.admin-form { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin: var(--space-4) 0; }
.admin-form label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--text-secondary); }

/* auto-fill이 화면 폭에 따라 카드 수를 다르게 접어서(예: 9개가 7+2, 5개가 4+1)
   마지막 줄에 혼자 남는 카드가 자주 생겼다 — 각 그리드의 실제 카드 개수에 맞춰
   열 수를 고정한다. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
#stat-grid { grid-template-columns: repeat(3, 1fr); }
#overview-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  #stat-grid { grid-template-columns: repeat(2, 1fr); }
  #overview-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-card { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); }
.stat-label { color: var(--text-secondary); font-size: var(--text-xs); margin-bottom: var(--space-2); }
.stat-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); word-break: keep-all; }
.points-preview { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.points-preview h3 { margin: 0 0 var(--space-3); }

/* ==================================================================
   7 · 반응형 · 접근성
   ================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
  main { max-width: 100%; padding: var(--space-5) var(--space-5) var(--space-10); }
  header, .channel-nav { padding-left: var(--space-5); padding-right: var(--space-5); }
}

/* 큰 화면에서는 토큰(--content-width)을 그대로 따른다.
   예전에는 여기에 1040px가 하드코딩되어 있어서, 토큰을 바꿔도 폭이 그대로였다.
   토큰만 참조한다는 이 파일의 규칙을 깨는 유일한 예외였고, 그래서
   와이드 모니터에서 화면의 절반 이상이 빈 채로 남았다. */
@media (min-width: 1400px) {
  main { max-width: var(--content-width); }
}

@media (max-width: 640px) {
  header {
    padding: var(--space-2) var(--space-4);
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    gap: var(--space-2);
  }
  .channel-nav { padding: var(--space-2) var(--space-4); }
  main { padding: var(--space-4) var(--space-4) var(--space-10); }
  footer { padding: var(--space-5) var(--space-4); }
  .card { padding: var(--space-4); border-radius: var(--radius-lg); }
  h1 { font-size: var(--text-md); }

  .main-nav { gap: 0; }
  .nav-link { padding: 6px var(--space-2); font-size: var(--text-sm); }
  .nav-label { display: none; }
  .nav-active .nav-label { display: inline; }
  .auth-nick { max-width: 88px; }
  .header-nav { gap: var(--space-2); }

  /* iOS 입력 시 자동 확대 방지 */
  input[type="text"], input[type="number"], input[type="password"], select { font-size: 16px; }
  /* 모바일 터치 목표: 손가락 기준 44px. */
  button, .nav-link, .channel-nav a { min-height: var(--tap-min); }
  input[type="text"], input[type="number"], input[type="password"], select { min-height: var(--tap-min); }

  .my-summary-item { flex: 1 1 100%; }
  .card-head { align-items: flex-start; }
  .rc-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .rc-stat { padding: 11px var(--space-3); }
  .rc-stat-value { font-size: var(--text-lg); }
  .rc-comparison-grid { grid-template-columns: repeat(2, 1fr); }
  .rc-compare-item { padding: var(--space-2); }
  .rc-highlights { grid-template-columns: 1fr; }
  .rc-calendar-weekdays, .rc-calendar { gap: 4px; }
  .rc-calendar-day { min-height: 68px; padding: 5px; }
  .rc-calendar-channel { width: 100%; flex-direction: column; justify-content: center; gap: 1px; }
  .rc-calendar-avatar { width: 20px; height: 20px; }
  .rc-calendar-top { width: 100%; flex: none; text-align: center; font-size: 9px; line-height: 1.1; }
  .rc-calendar-channel-points { font-size: 9px; }
  .rc-day-detail-head { align-items: flex-start; }
  .rc-day-detail-stats { grid-template-columns: 1fr; }
  .podium-item { min-width: 88px; padding: var(--space-3) var(--space-2); }
  .ob-card { padding: 26px var(--space-4) var(--space-4); border-radius: var(--radius-xl); }
  .ob-body { min-height: 240px; }
  .ob-icon { font-size: 38px; }
  .badge { font-size: 9px; }

  /* 채널별 활동 표를 카드형으로 — 가로 스크롤 없이 읽히게 */
  .per-channel-table { min-width: 0 !important; }
  .per-channel-table thead { display: none; }
  .per-channel-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-3);
    padding: var(--space-3) var(--space-1); border-bottom: 1px solid var(--border-subtle);
  }
  .per-channel-table td { border: none; padding: 3px var(--space-1); display: flex; justify-content: space-between; }
  .per-channel-table td:first-child { grid-column: 1 / -1; font-weight: var(--weight-bold); }
  .per-channel-table td[data-label]::before {
    content: attr(data-label); color: var(--text-secondary); font-size: var(--text-xs); margin-right: var(--space-2);
  }
  .per-channel-table td:first-child::before { content: none; }
  .per-channel-table .cell-sub { margin-top: 0; }
  .per-channel-table tfoot td { border-top: none; }
  .per-channel-table tfoot tr { border-top: 2px solid var(--border-default); }
}

/* 가로모드 낮은 높이에서 sticky 헤더가 화면을 다 먹지 않게 */
@media (max-height: 480px) and (orientation: landscape) {
  header { position: static; }
}

/* 모션 최소화를 선호하는 사용자 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 인쇄 */
@media print {
  header, .channel-nav, footer, .skip-link, #toast-container,
  .refresh-indicator, .ob-overlay, .theme-toggle, #replay-onboarding-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border-color: #ccc; box-shadow: none; break-inside: avoid; }
}

/* 수집 진단 — 실패 응답 상세 */
.diag-detail { margin-top: var(--space-2); }
.diag-detail summary { cursor: pointer; font-size: var(--text-xs); color: var(--primary); }
.diag-detail pre {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.55;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-secondary);
}

/* ==================================================================
   유틸리티 — 인라인 style 속성을 대체한다
   ------------------------------------------------------------------
   인라인 스타일은 디자인 시스템을 우회해 테마·간격 규칙이 안 먹고,
   나중에 값을 바꿀 때 파일을 뒤져야 해서 유지보수가 어렵다.
   자주 쓰이던 패턴만 골라 이름을 붙였다.
   ================================================================== */
.u-tight { margin-top: -4px; }          /* 제목 바로 아래 설명문 */
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-m-0 { margin: 0; }
.u-w-full { width: 100%; }

/* 입력 폭 프리셋 — 관리자 폼에서 쓰던 임의 px 값을 규격화 */
.u-w-xs { width: 72px; }
.u-w-sm { width: 112px; }
.u-w-md { width: 184px; }
.u-w-lg { width: 100%; max-width: 320px; }
.u-w-xl { width: 100%; max-width: 344px; }

/* 카드 안에서 구획을 나누는 구분선 */
.u-divider-top {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}
.u-divider-danger {
  border-top: 1px solid var(--error-border);
  padding-top: var(--space-3);
}

/* 양쪽 정렬 헤더 (제목 + 우측 액션) */
.u-row-between {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2);
}
.btn-link {
  display: inline-flex; align-items: center;
  min-height: var(--control-sm); padding: 0 var(--space-3);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.btn-link:hover { background: var(--surface-2); color: var(--text-primary); }
.u-gap-2 { gap: var(--space-2); }
.u-my-3 { margin: var(--space-3) 0; }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-items-center { align-items: center; }
.u-text-md { font-size: var(--text-md); }

/* 관리자 조정치 — 점수 옆에 작게. 있을 때만 렌더된다.
   이게 보여야 "채팅+후원+시청"으로 점수가 검산된다. */
.rank-adj {
  margin-left: var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  vertical-align: middle;
}

/* ==================================================================
   랭킹 상위권 강조
   ------------------------------------------------------------------
   예전에는 1~3위가 이모지 메달만 다르고 시각적 무게가 나머지와 똑같아서,
   표가 그냥 명단처럼 보였다. 랭킹 사이트에서 제일 먼저 눈이 가야 하는 곳이
   가장 밋밋했던 셈이다. 순위마다 색과 두께로 위계를 준다.
   ================================================================== */

/* 메달 색 (라이트/다크 공통으로 읽히는 값) */
:root,
[data-theme="dark"] {
  --rank-gold: #fbbf24;
  --rank-silver: #cbd5e1;
  --rank-bronze: #d97706;
  --rank-gold-soft: rgba(251, 191, 36, 0.1);
  --rank-silver-soft: rgba(203, 213, 225, 0.08);
  --rank-bronze-soft: rgba(217, 119, 6, 0.08);
}
[data-theme="light"] {
  /* 원래 금(#b45309)과 동(#9a3412)이 둘 다 비슷한 주황빛이라 1위/3위 띠가 거의 구분이 안 됐다.
     금은 노란기가 도는 색으로 확실히 떼어놓는다. */
  --rank-gold: #ca8a04;
  --rank-silver: #64748b;
  --rank-bronze: #9a3412;
  --rank-gold-soft: rgba(202, 138, 4, 0.08);
  --rank-silver-soft: rgba(100, 116, 139, 0.06);
  --rank-bronze-soft: rgba(154, 52, 18, 0.06);
}

/* 순위 칸 — 숫자를 원형 배지로 만들어 시선을 잡는다 */
.rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}

/* 1·2·3위: 왼쪽 색 띠 + 은은한 배경 + 큰 메달. 등수가 높을수록 존재감도 커진다. */
tr.rank-1 {
  background: linear-gradient(90deg, var(--rank-gold-soft) 0%, transparent 75%);
  box-shadow: inset 4px 0 0 var(--rank-gold);
}
tr.rank-2 {
  background: linear-gradient(90deg, var(--rank-silver-soft) 0%, transparent 75%);
  box-shadow: inset 3px 0 0 var(--rank-silver);
}
tr.rank-3 {
  background: linear-gradient(90deg, var(--rank-bronze-soft) 0%, transparent 75%);
  box-shadow: inset 3px 0 0 var(--rank-bronze);
}

tr.rank-1 .rank-num,
tr.rank-2 .rank-num,
tr.rank-3 .rank-num {
  background: transparent;
  font-size: var(--text-xl); /* 메달 이모지를 크게 */
  min-width: 34px;
}
/* 이모지는 색을 못 입혀도 필터(그림자)는 먹는다 — 등수별로 은은한 광택을 준다 */
tr.rank-1 .rank-num { font-size: 26px; filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.85)); }
tr.rank-2 .rank-num { filter: drop-shadow(0 0 4px rgba(203, 213, 225, 0.6)); }
tr.rank-3 .rank-num { filter: drop-shadow(0 0 4px rgba(217, 119, 6, 0.55)); }

/* 상위권일수록 닉네임과 포인트를 굵고 크게 — 한눈에 순위가 읽힌다 */
tr.rank-1 td { font-size: var(--text-md); padding-top: 12px; padding-bottom: 12px; }
tr.rank-1 .points { font-size: var(--text-lg); color: var(--rank-gold); font-weight: var(--weight-bold); text-shadow: 0 0 14px var(--rank-gold-soft); }
tr.rank-2 .points { color: var(--rank-silver); font-weight: var(--weight-bold); }
tr.rank-3 .points { color: var(--rank-bronze); font-weight: var(--weight-bold); }

/* 1위 행 전용: 위아래 얇은 금빛 라인이 좌우로 흐르며 은은하게 반짝인다 */
tr.rank-1 { position: relative; }
tr.rank-1 td:first-child::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rank-gold), #fff3c4, var(--rank-gold), transparent);
  background-size: 200% 100%;
  animation: rank1-shine 3.5s linear infinite;
}
@keyframes rank1-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  tr.rank-1 td:first-child::before { animation: none; }
}

/* 내 행은 상위권 강조보다 우선한다 (내가 어디 있는지가 가장 중요) */
tr.me.rank-1, tr.me.rank-2, tr.me.rank-3 {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

/* -------------------- 칭호 반짝임 (칭호를 장착하면 "닉네임" 칸에만 등급 색이 살아있는 배경으로 움직인다) --------------------
   설계가 세 번 바뀐 기능이라 이유를 남겨둔다.
   1) 처음엔 행 전체(왼쪽 색 띠 포함)를 물들였더니 1·2·3위의 금/은/동 띠 색을 덮어써버려서
      순위 색 구분이 사라졌다 → 순위 강조(.rank-N)는 절대 건드리지 않고 닉네임 칸 하나로 좁혔다.
      (포인트 칸까지 들어가는 것도 산만하다는 피드백을 받아 최종적으로 닉네임 칸 전용으로 뺐다)
   2) 랭킹 표는 3초마다 tbody.innerHTML을 통째로 새로 그리는데, 그때마다 CSS 애니메이션이
      0프레임부터 다시 시작돼 "끊기는" 것처럼 보였다 → 렌더링 시점에 벽시계 기준으로 지금이
      주기의 어느 지점인지 계산해 음수 animation-delay를 인라인으로 심는다(App.titleFxStyle,
      common.js). 그러면 DOM이 통째로 바뀌어도 애니메이션은 눈에 끊김 없이 계속 흐른다.
   3) 등급별 색은 --fx(r,g,b)라는 커스텀 프로퍼티 하나로 정의해두고, 흐르는 배경 그라디언트와
      옆에서 깜빡이는 스파크(::after)가 같은 값을 공유한다 — 등급 하나 추가할 때 색 한 줄만
      더하면 되고, 두 효과의 색이 어긋날 일도 없다.
   큰손 카드(.donor-row)는 테이블이 아니고 순위 강조 색과 겹칠 일도 없어서, 닉네임뿐 아니라
   후원개수까지 행 전체에 효과를 준다(요청에 따름). */
#rank-table tr.title-fx td:nth-child(2),
.per-channel-table tr.title-fx td:first-child,
.donor-row.title-fx {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  /* 칭호 색으로 테두리를 살짝 둘러서, 같은 등급이 위아래로 연달아 있어도(예: 골드 두 명 연속)
     각자 자기 칸으로 또렷이 구분된다 — 배경색만으로는 경계가 안 보여서 두 행이 하나로
     붙어 보이는 문제가 있었다. */
  box-shadow: inset 0 0 0 1px rgba(var(--fx), 0.3);
  background-color: rgba(var(--fx), 0.06);
  background-repeat: no-repeat;
  background-size: 320% 100%;
  /* 셀 전체를 물들이지 않고, 폭이 좁은 빛줄기 하나만 은은하게 스치고 지나가게 한다 */
  background-image: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(var(--fx), 0.22) 50%, transparent 60%, transparent 100%);
  animation: title-fx-flow 5s ease-in-out infinite;
  animation-delay: var(--fx-delay-flow, 0s);
}
[data-theme="light"] #rank-table tr.title-fx td:nth-child(2),
[data-theme="light"] .per-channel-table tr.title-fx td:first-child,
[data-theme="light"] .donor-row.title-fx {
  /* 밝은 배경에서는 옅은 색이 잘 안 보여서 라이트 테마에서만 살짝 더 진하게 */
  background-color: rgba(var(--fx), 0.1);
  background-image: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(var(--fx), 0.32) 50%, transparent 60%, transparent 100%);
}
/* 골드는 색 자체가 채도가 높아서 같은 투명도를 줘도 다른 등급보다 훨씬 튄다 — 한 단계 더 낮춘다 */
#rank-table tr.title-fx-gold td:nth-child(2),
.per-channel-table tr.title-fx-gold td:first-child,
.donor-row.title-fx-gold {
  background-color: rgba(var(--fx), 0.045);
  background-image: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(var(--fx), 0.16) 50%, transparent 60%, transparent 100%);
}
[data-theme="light"] #rank-table tr.title-fx-gold td:nth-child(2),
[data-theme="light"] .per-channel-table tr.title-fx-gold td:first-child,
[data-theme="light"] .donor-row.title-fx-gold {
  background-color: rgba(var(--fx), 0.07);
  background-image: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(var(--fx), 0.22) 50%, transparent 60%, transparent 100%);
}
/* 닉네임 칸 옆에서 살짝 반짝이는 스파크 — 등급 색이 콕 찍혀서 깜빡이는 정도의 포인트 */
#rank-table tr.title-fx td:nth-child(2)::after,
.per-channel-table tr.title-fx td:first-child::after,
.donor-row.title-fx::after {
  content: '';
  position: absolute;
  top: 50%; right: 8px;
  width: 9px; height: 9px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--fx), 1) 0%, rgba(var(--fx), 0) 72%);
  opacity: 0;
  animation: title-fx-spark 2.8s ease-in-out infinite;
  animation-delay: var(--fx-delay-spark, 0s);
  pointer-events: none;
}

@keyframes title-fx-flow {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
@keyframes title-fx-spark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.9; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  #rank-table tr.title-fx td:nth-child(2),
  .per-channel-table tr.title-fx td:first-child,
  .donor-row.title-fx,
  #rank-table tr.title-fx td:nth-child(2)::after,
  .per-channel-table tr.title-fx td:first-child::after,
  .donor-row.title-fx::after { animation: none; }
}

/* 등급별 색 정의 — r,g,b 세 숫자만 바꾸면 위 배경/스파크 규칙에 그대로 반영된다 */
#rank-table tr.title-fx-diamond td:nth-child(2), .per-channel-table tr.title-fx-diamond td:first-child, .donor-row.title-fx-diamond { --fx: 103, 232, 249; }
#rank-table tr.title-fx-emerald td:nth-child(2), .per-channel-table tr.title-fx-emerald td:first-child, .donor-row.title-fx-emerald { --fx: 52, 211, 153; }
#rank-table tr.title-fx-platinum td:nth-child(2), .per-channel-table tr.title-fx-platinum td:first-child, .donor-row.title-fx-platinum { --fx: 167, 139, 250; }
#rank-table tr.title-fx-gold td:nth-child(2), .per-channel-table tr.title-fx-gold td:first-child, .donor-row.title-fx-gold { --fx: 251, 191, 36; }
#rank-table tr.title-fx-silver td:nth-child(2), .per-channel-table tr.title-fx-silver td:first-child, .donor-row.title-fx-silver { --fx: 148, 163, 184; }
#rank-table tr.title-fx-bronze td:nth-child(2), .per-channel-table tr.title-fx-bronze td:first-child, .donor-row.title-fx-bronze { --fx: 217, 119, 6; }
#rank-table tr.title-fx-sparkle td:nth-child(2), .per-channel-table tr.title-fx-sparkle td:first-child, .donor-row.title-fx-sparkle { --fx: 203, 213, 225; }

/* 상위 칭호는 등급이 바로 느껴지도록 효과의 밝기와 움직임을 차별화한다. */
#rank-table tr.title-fx-diamond td:nth-child(2),
.per-channel-table tr.title-fx-diamond td:first-child,
.donor-row.title-fx-diamond {
  background-color: rgba(103, 232, 249, 0.13);
  background-image: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.12) 34%, rgba(103,232,249,0.62) 50%, rgba(255,255,255,0.18) 66%, transparent 100%);
  background-size: 240% 100%;
  animation-duration: 3.2s;
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.62), 0 0 12px rgba(103, 232, 249, 0.25);
}

/* ==================================================================
   TITLE BADGES · ACHIEVEMENT EFFECT SYSTEM
   ------------------------------------------------------------------
   기존 칭호 규칙은 여러 차례의 보정이 겹쳐 효과별 속도와 명암이 서로
   충돌했다. 아래 블록을 칭호 시각 효과의 최종 단일 진입점으로 사용한다.
   데이터의 effect 값은 그대로 두고 색·표면·움직임만 공통 토큰으로 정리한다.
   ================================================================== */
.title-fx-diamond, .title-badge-diamond {
  --title-fg: #eaffff;
  --title-edge: rgba(103, 232, 249, .82);
  --title-glow: rgba(34, 211, 238, .3);
  --title-surface: linear-gradient(118deg, rgba(8,47,73,.9) 0 18%, rgba(14,116,144,.82) 28%, rgba(236,254,255,.94) 42%, rgba(103,232,249,.7) 48%, rgba(196,181,253,.82) 57%, rgba(49,46,129,.9) 74%, rgba(8,47,73,.9) 100%);
  --title-badge-gradient: linear-gradient(118deg, #083344 0 16%, #0891b2 27%, #ecfeff 42%, #22d3ee 49%, #c4b5fd 59%, #4338ca 73%, #164e63 100%);
  --title-flow-duration: 5.2s;
  --title-shine-duration: 7.6s;
  --title-shine-opacity: .62;
  --title-motion: title-premium-diamond-prism;
  --title-badge-motion: title-premium-diamond-prism;
  --title-shine-motion: title-premium-diamond-flare;
  --title-radius: 4px 10px 4px 10px;
}
.title-fx-emerald, .title-badge-emerald {
  --title-fg: #ecfdf5;
  --title-edge: rgba(110, 231, 183, .76);
  --title-glow: rgba(16, 185, 129, .25);
  --title-surface: linear-gradient(112deg, rgba(6, 78, 59, .9), rgba(4, 120, 87, .8) 39%, rgba(110, 231, 183, .72) 52%, rgba(19, 78, 74, .9));
  --title-badge-gradient: linear-gradient(112deg, #065f46, #10b981 40%, #a7f3d0 53%, #0f766e 72%, #064e3b);
  --title-flow-duration: 5.8s;
  --title-shine-duration: 6.8s;
  --title-shine-opacity: .5;
  --title-motion: title-premium-emerald-tide;
  --title-badge-motion: title-premium-emerald-tide;
  --title-shine-motion: title-premium-emerald-glint;
  --title-radius: 10px 4px 10px 4px;
}
.title-fx-platinum, .title-badge-platinum {
  --title-fg: #faf5ff;
  --title-edge: rgba(216, 180, 254, .74);
  --title-glow: rgba(168, 85, 247, .24);
  --title-surface: linear-gradient(112deg, rgba(49, 46, 129, .9), rgba(109, 40, 217, .78) 39%, rgba(233, 213, 255, .78) 52%, rgba(67, 56, 202, .78) 72%, rgba(30, 27, 75, .9));
  --title-badge-gradient: linear-gradient(112deg, #4338ca, #7c3aed 36%, #f3e8ff 51%, #c084fc 63%, #312e81);
  --title-flow-duration: 6.4s;
  --title-shine-duration: 7.4s;
  --title-shine-opacity: .5;
  --title-motion: title-premium-platinum-orbit;
  --title-badge-motion: title-premium-platinum-orbit;
  --title-shine-motion: title-premium-platinum-twin-shine;
  --title-radius: 7px;
}
.title-fx-flame, .title-badge-flame {
  --title-fg: #fff7ed;
  --title-edge: rgba(251, 146, 60, .8);
  --title-glow: rgba(244, 63, 94, .27);
  --title-surface: linear-gradient(112deg, rgba(76, 5, 25, .94), rgba(190, 24, 93, .82) 37%, rgba(251, 191, 36, .76) 51%, rgba(225, 29, 72, .82) 66%, rgba(67, 20, 7, .94));
  --title-badge-gradient: linear-gradient(112deg, #9f1239, #e11d48 35%, #fbbf24 50%, #fb7185 64%, #7f1d1d);
  --title-flow-duration: 5.4s;
  --title-shine-duration: 6.2s;
  --title-shine-opacity: .58;
  --title-motion: title-premium-flame-energy;
  --title-badge-motion: title-premium-flame-energy;
  --title-shine-motion: title-premium-flame-spark;
  --title-radius: 5px 11px 5px 11px;
}
.title-fx-electric, .title-badge-electric {
  --title-fg: #eff6ff;
  --title-edge: rgba(96, 165, 250, .72);
  --title-glow: rgba(37, 99, 235, .22);
  --title-surface: linear-gradient(112deg, rgba(23, 37, 84, .92), rgba(30, 64, 175, .78) 40%, rgba(125, 211, 252, .66) 52%, rgba(49, 46, 129, .86));
  --title-badge-gradient: linear-gradient(112deg, #1e3a8a, #2563eb 38%, #7dd3fc 52%, #4f46e5 68%, #172554);
  --title-flow-duration: 6.8s;
  --title-shine-duration: 7.8s;
  --title-shine-opacity: .42;
  --title-motion: title-premium-electric-charge;
  --title-badge-motion: title-premium-electric-charge;
  --title-shine-motion: title-premium-electric-bolt;
  --title-radius: 4px;
}
.title-fx-gold, .title-badge-gold {
  --title-fg: #fffbeb;
  --title-edge: rgba(251, 191, 36, .7);
  --title-glow: rgba(245, 158, 11, .2);
  --title-surface: linear-gradient(112deg, rgba(69, 26, 3, .91), rgba(161, 98, 7, .74) 42%, rgba(253, 230, 138, .68) 53%, rgba(120, 53, 15, .9));
  --title-badge-gradient: linear-gradient(112deg, #78350f, #d97706 40%, #fef3c7 52%, #f59e0b 65%, #713f12);
  --title-flow-duration: 7.2s;
  --title-shine-duration: 8.4s;
  --title-shine-opacity: .38;
  --title-motion: title-premium-gold-polish;
  --title-badge-motion: title-premium-gold-polish;
  --title-shine-motion: title-premium-gold-glint;
  --title-radius: 6px 9px 6px 9px;
}
.title-fx-silver, .title-badge-silver {
  --title-fg: #f8fafc;
  --title-edge: rgba(203, 213, 225, .62);
  --title-glow: rgba(148, 163, 184, .16);
  --title-surface: linear-gradient(112deg, rgba(30, 41, 59, .92), rgba(71, 85, 105, .74) 42%, rgba(226, 232, 240, .62) 53%, rgba(51, 65, 85, .9));
  --title-badge-gradient: linear-gradient(112deg, #334155, #64748b 40%, #f8fafc 52%, #94a3b8 66%, #1e293b);
  --title-flow-duration: 8.5s;
  --title-shine-duration: 9.2s;
  --title-shine-opacity: .28;
  --title-motion: title-premium-silver-satin;
  --title-badge-motion: title-premium-silver-satin;
  --title-shine-motion: title-premium-silver-glint;
  --title-radius: 6px;
}
.title-fx-bronze, .title-badge-bronze {
  --title-fg: #fff7ed;
  --title-edge: rgba(251, 146, 60, .55);
  --title-glow: rgba(194, 65, 12, .14);
  --title-surface: linear-gradient(112deg, rgba(67, 20, 7, .9), rgba(154, 52, 18, .72) 43%, rgba(253, 186, 116, .56) 53%, rgba(124, 45, 18, .9));
  --title-badge-gradient: linear-gradient(112deg, #7c2d12, #c2410c 42%, #fed7aa 53%, #9a3412 68%, #431407);
  --title-flow-duration: 9.5s;
  --title-shine-duration: 9.8s;
  --title-shine-opacity: .24;
  --title-motion: title-premium-bronze-burnished;
  --title-badge-motion: title-premium-bronze-burnished;
  --title-shine-motion: title-premium-bronze-glint;
  --title-radius: 5px;
}
.title-fx-sparkle, .title-badge-sparkle {
  --title-fg: #f5f3ff;
  --title-edge: rgba(167, 139, 250, .58);
  --title-glow: rgba(139, 92, 246, .16);
  --title-surface: linear-gradient(112deg, rgba(46, 16, 101, .72), rgba(91, 33, 182, .58) 43%, rgba(196, 181, 253, .5) 53%, rgba(49, 46, 129, .7));
  --title-badge-gradient: linear-gradient(112deg, #4c1d95, #7c3aed 40%, #ddd6fe 52%, #6366f1 67%, #312e81);
  --title-flow-duration: 9s;
  --title-shine-duration: 9s;
  --title-shine-opacity: .28;
  --title-motion: title-premium-cosmic-drift;
  --title-badge-motion: title-premium-cosmic-drift;
  --title-shine-motion: title-premium-cosmic-star;
  --title-radius: 8px 4px 8px 4px;
}

:where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--title-fg) !important;
  background-color: transparent !important;
  background-image: var(--title-surface) !important;
  background-repeat: no-repeat !important;
  background-size: 220% 100% !important;
  border-color: transparent !important;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--title-edge), 0 2px 10px var(--title-glow) !important;
  filter: none !important;
  animation: var(--title-motion, title-surface-flow) var(--title-flow-duration) ease-in-out infinite alternate !important;
  animation-delay: var(--fx-delay-flow, 0s) !important;
}
:where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx) .inline-link {
  color: inherit;
}
:where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx)::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 -28%;
  width: 22%;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.58), transparent);
  box-shadow: none;
  opacity: 0;
  transform: skewX(-14deg);
  pointer-events: none;
  animation: var(--title-shine-motion, title-shine-sweep) var(--title-shine-duration) ease-in-out infinite !important;
  animation-delay: var(--fx-delay-spark, 0s) !important;
}
:where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx) > * {
  position: relative;
  z-index: 1;
}

.title-badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: min(100%, 22rem);
  margin-inline-start: .42rem;
  padding: .16rem .5rem .18rem;
  border: 1px solid var(--title-edge, var(--border-default));
  border-radius: var(--title-radius, 5px 8px 5px 8px);
  color: var(--title-fg, var(--text-primary)) !important;
  background: var(--title-badge-gradient, var(--primary-soft)) !important;
  background-size: 220% 100% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 7px var(--title-glow, transparent) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.38), 0 0 4px var(--title-glow, transparent);
  font-size: clamp(.67rem, .64rem + .12vw, .76rem);
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
  vertical-align: middle;
  animation: var(--title-badge-motion, title-badge-gradient) var(--title-flow-duration, 9s) ease-in-out infinite alternate !important;
  animation-delay: var(--fx-delay-flow, 0s) !important;
}
.title-badge::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: inherit;
  pointer-events: none;
}
.title-badge::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -30% auto -30% -36%;
  width: 24%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.72), transparent);
  opacity: 0;
  transform: skewX(-16deg);
  pointer-events: none;
  animation: var(--title-shine-motion, title-shine-sweep) var(--title-shine-duration, 9s) ease-in-out infinite !important;
  animation-delay: var(--fx-delay-spark, 0s) !important;
}
.title-badge[data-title-rarity="legendary"] {
  animation-name: var(--title-badge-motion, title-badge-gradient), title-glow-breathe !important;
  animation-duration: var(--title-flow-duration), var(--title-flow-duration) !important;
  animation-timing-function: ease-in-out, ease-in-out !important;
  animation-iteration-count: infinite, infinite !important;
  animation-direction: alternate, alternate !important;
  animation-delay: var(--fx-delay-flow, 0s), var(--fx-delay-spark, 0s) !important;
}
.title-badge:hover {
  filter: brightness(1.06) saturate(1.05);
}

/* 저장된 사용자 정의 스타일은 데이터와 기능을 보존하되, 같은 배지 골격과 동작을 쓴다. */
.title-badge.title-style {
  --title-fg: var(--title-text);
  --title-edge: color-mix(in srgb, var(--title-accent) 68%, transparent);
  --title-glow: color-mix(in srgb, var(--title-accent) 24%, transparent);
  --title-badge-gradient: linear-gradient(calc(var(--title-angle) * 1deg), var(--title-bg), var(--title-accent), var(--title-bg));
}

[data-theme="light"] .title-fx-diamond, [data-theme="light"] .title-badge-diamond { --title-fg: #083344; --title-edge: rgba(8,145,178,.72); --title-glow: rgba(14,165,233,.2); --title-surface: linear-gradient(112deg, #e0f7ff, #a5f3fc 34%, #ffffff 49%, #c4b5fd 60%, #dbeafe); --title-badge-gradient: linear-gradient(112deg, #bae6fd, #22d3ee 35%, #ffffff 50%, #c4b5fd 63%, #7dd3fc); }
[data-theme="light"] .title-fx-emerald, [data-theme="light"] .title-badge-emerald { --title-fg: #064e3b; --title-edge: rgba(5,150,105,.66); --title-glow: rgba(16,185,129,.17); --title-surface: linear-gradient(112deg, #d1fae5, #6ee7b7 40%, #f0fdf4 52%, #99f6e4); --title-badge-gradient: linear-gradient(112deg, #a7f3d0, #10b981 40%, #ecfdf5 53%, #2dd4bf 70%, #d1fae5); }
[data-theme="light"] .title-fx-platinum, [data-theme="light"] .title-badge-platinum { --title-fg: #3b0764; --title-edge: rgba(124,58,237,.68); --title-glow: rgba(147,51,234,.2); --title-surface: linear-gradient(112deg, #ede9fe, #a78bfa 36%, #ffffff 50%, #d8b4fe 62%, #c7d2fe); --title-badge-gradient: linear-gradient(112deg, #ddd6fe, #8b5cf6 36%, #ffffff 50%, #c084fc 63%, #a5b4fc); }
[data-theme="light"] .title-fx-flame, [data-theme="light"] .title-badge-flame { --title-fg: #7f1d1d; --title-edge: rgba(225,29,72,.66); --title-glow: rgba(244,63,94,.19); --title-surface: linear-gradient(112deg, #ffe4e6, #fb7185 35%, #fef3c7 51%, #fda4af 65%, #ffedd5); --title-badge-gradient: linear-gradient(112deg, #fecdd3, #e11d48 36%, #fef3c7 51%, #fb7185 66%, #fed7aa); }
[data-theme="light"] .title-fx-electric, [data-theme="light"] .title-badge-electric { --title-fg: #172554; --title-edge: rgba(37,99,235,.62); --title-glow: rgba(37,99,235,.16); --title-surface: linear-gradient(112deg, #dbeafe, #93c5fd 40%, #eff6ff 52%, #c7d2fe); --title-badge-gradient: linear-gradient(112deg, #dbeafe, #3b82f6 39%, #e0f2fe 52%, #6366f1 68%, #bfdbfe); }
[data-theme="light"] .title-fx-gold, [data-theme="light"] .title-badge-gold { --title-fg: #78350f; --title-edge: rgba(217,119,6,.62); --title-glow: rgba(245,158,11,.15); --title-surface: linear-gradient(112deg, #fef3c7, #fbbf24 42%, #fffdf4 53%, #fde68a); --title-badge-gradient: linear-gradient(112deg, #fde68a, #d97706 40%, #fffdf4 52%, #fbbf24 66%, #fef3c7); }
[data-theme="light"] .title-fx-silver, [data-theme="light"] .title-badge-silver { --title-fg: #1e293b; --title-edge: rgba(71,85,105,.52); --title-glow: rgba(100,116,139,.13); --title-surface: linear-gradient(112deg, #e2e8f0, #94a3b8 42%, #ffffff 53%, #cbd5e1); --title-badge-gradient: linear-gradient(112deg, #e2e8f0, #64748b 40%, #ffffff 52%, #94a3b8 66%, #f1f5f9); }
[data-theme="light"] .title-fx-bronze, [data-theme="light"] .title-badge-bronze { --title-fg: #7c2d12; --title-edge: rgba(194,65,12,.5); --title-glow: rgba(194,65,12,.12); --title-surface: linear-gradient(112deg, #ffedd5, #fb923c 43%, #fff7ed 53%, #fed7aa); --title-badge-gradient: linear-gradient(112deg, #fed7aa, #c2410c 42%, #fff7ed 53%, #fb923c 68%, #ffedd5); }
[data-theme="light"] .title-fx-sparkle, [data-theme="light"] .title-badge-sparkle { --title-fg: #3b0764; --title-edge: rgba(124,58,237,.52); --title-glow: rgba(139,92,246,.13); --title-surface: linear-gradient(112deg, #ede9fe, #c4b5fd 43%, #ffffff 53%, #c7d2fe); --title-badge-gradient: linear-gradient(112deg, #ddd6fe, #8b5cf6 40%, #ffffff 52%, #818cf8 67%, #ede9fe); }
[data-theme="light"] .title-badge { text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 0 3px var(--title-glow, transparent); }
[data-theme="dark"] .title-badge { text-shadow: 0 1px 1px rgba(0,0,0,.62), 0 0 5px var(--title-glow, transparent); }

@keyframes title-surface-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes title-badge-gradient {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes title-shine-sweep {
  0%, 16% { left: -36%; opacity: 0; }
  30% { opacity: var(--title-shine-opacity, .32); }
  52% { left: 116%; opacity: 0; }
  100% { left: 116%; opacity: 0; }
}
@keyframes title-glow-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 6px var(--title-glow); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 2px 10px var(--title-glow); }
}
@keyframes title-premium-diamond-prism {
  0% { background-position: 0% 50%; filter: brightness(.98) saturate(1.04); }
  48% { filter: brightness(1.09) saturate(1.14); }
  100% { background-position: 100% 50%; filter: brightness(1.01) saturate(1.08); }
}
@keyframes title-premium-emerald-tide {
  0% { background-position: 0% 34%; filter: saturate(1); }
  52% { filter: saturate(1.13) brightness(1.05); }
  100% { background-position: 100% 66%; filter: saturate(1.05); }
}
@keyframes title-premium-platinum-orbit {
  0% { background-position: 0% 50%; filter: brightness(.98); }
  44% { filter: brightness(1.08) saturate(1.1); }
  100% { background-position: 100% 50%; filter: brightness(1.02); }
}
@keyframes title-premium-flame-energy {
  0% { background-position: 0% 50%; filter: saturate(1.03) brightness(.98); }
  55% { filter: saturate(1.18) brightness(1.08); }
  100% { background-position: 100% 50%; filter: saturate(1.08); }
}
@keyframes title-premium-electric-charge {
  0% { background-position: 0% 50%; filter: brightness(.98) contrast(1.02); }
  62% { filter: brightness(1.09) contrast(1.08); }
  100% { background-position: 100% 50%; filter: brightness(1.01); }
}
@keyframes title-premium-gold-polish { 0% { background-position: 0% 50%; } 52% { filter: brightness(1.07); } 100% { background-position: 100% 50%; } }
@keyframes title-premium-silver-satin { 0% { background-position: 0% 50%; } 58% { filter: brightness(1.045); } 100% { background-position: 100% 50%; } }
@keyframes title-premium-bronze-burnished { 0% { background-position: 0% 50%; } 60% { filter: brightness(1.035); } 100% { background-position: 100% 50%; } }
@keyframes title-premium-cosmic-drift { 0% { background-position: 0% 40%; } 50% { filter: saturate(1.1) brightness(1.05); } 100% { background-position: 100% 60%; } }
@keyframes title-premium-diamond-flare { 0%,14% { left:-38%;opacity:0;transform:skewX(-18deg) scaleX(.65); } 31% { opacity:var(--title-shine-opacity); } 48% { left:116%;opacity:0;transform:skewX(-18deg) scaleX(1.15); } 100% { left:116%;opacity:0; } }
@keyframes title-premium-emerald-glint { 0%,22% { left:-34%;opacity:0; } 39% { opacity:var(--title-shine-opacity); } 58% { left:112%;opacity:0; } 100% { left:112%;opacity:0; } }
@keyframes title-premium-platinum-twin-shine { 0%,10% { left:-42%;opacity:0;transform:skewX(-12deg) scaleX(.48); } 25% { opacity:.34; } 38% { left:36%;opacity:0; } 55% { opacity:var(--title-shine-opacity); } 72% { left:116%;opacity:0;transform:skewX(-12deg) scaleX(.88); } 100% { left:116%;opacity:0; } }
@keyframes title-premium-flame-spark { 0%,28% { left:-32%;opacity:0;transform:skewX(-20deg) scaleX(.5); } 43% { opacity:var(--title-shine-opacity); } 61% { left:112%;opacity:0;transform:skewX(-8deg) scaleX(1.1); } 100% { left:112%;opacity:0; } }
@keyframes title-premium-electric-bolt { 0%,18% { left:-35%;opacity:0;transform:skewX(-24deg) scaleX(.34); } 31% { opacity:var(--title-shine-opacity); } 37% { opacity:.08; } 43% { opacity:var(--title-shine-opacity); } 56% { left:114%;opacity:0;transform:skewX(-24deg) scaleX(.52); } 100% { left:114%;opacity:0; } }
@keyframes title-premium-gold-glint { 0%,34% { left:-30%;opacity:0; } 47% { opacity:var(--title-shine-opacity); } 62% { left:110%;opacity:0; } 100% { left:110%;opacity:0; } }
@keyframes title-premium-silver-glint { 0%,42% { left:-28%;opacity:0; } 53% { opacity:var(--title-shine-opacity); } 67% { left:108%;opacity:0; } 100% { left:108%;opacity:0; } }
@keyframes title-premium-bronze-glint { 0%,52% { left:-26%;opacity:0; } 62% { opacity:var(--title-shine-opacity); } 76% { left:106%;opacity:0; } 100% { left:106%;opacity:0; } }
@keyframes title-premium-cosmic-star { 0%,24% { left:-24%;opacity:0;transform:skewX(-10deg) scaleX(.35); } 42% { opacity:var(--title-shine-opacity); } 57% { left:108%;opacity:0;transform:skewX(-10deg) scaleX(.7); } 100% { left:108%;opacity:0; } }

@media (max-width: 640px) {
  .title-badge { max-width: 100%; margin-inline-start: .3rem; padding-inline: .42rem; }
  .trophy-name .title-badge { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx),
  :where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx)::after,
  .title-badge,
  .title-badge::after {
    animation: none !important;
  }
  :where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx),
  .title-badge { background-position: 50% 50% !important; }
}
/* 관리자 화면은 표와 진단 정보가 많아 일반 페이지보다 넓게 사용한다. */
main:has(#admin-content) { max-width: 1480px; }
main:has(#admin-content) .admin-main { min-width: 0; }
#rank-table tr.title-fx-emerald td:nth-child(2),
.per-channel-table tr.title-fx-emerald td:first-child,
.donor-row.title-fx-emerald {
  background-color: rgba(52, 211, 153, 0.12);
  background-image: linear-gradient(105deg, transparent 0%, transparent 32%, rgba(52,211,153,0.48) 50%, transparent 68%, transparent 100%);
  background-size: 270% 100%;
  animation-duration: 3.9s;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.52), 0 0 9px rgba(52, 211, 153, 0.2);
}
#rank-table tr.title-fx-platinum td:nth-child(2),
.per-channel-table tr.title-fx-platinum td:first-child,
.donor-row.title-fx-platinum {
  background-color: rgba(167, 139, 250, 0.12);
  background-image: linear-gradient(105deg, transparent 0%, rgba(203,213,225,0.18) 32%, rgba(167,139,250,0.5) 50%, rgba(255,255,255,0.2) 62%, transparent 100%);
  background-size: 260% 100%;
  animation-duration: 4.3s;
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.58), 0 0 10px rgba(167, 139, 250, 0.22);
}

#rank-table tr.title-fx-diamond td:nth-child(2)::after,
.per-channel-table tr.title-fx-diamond td:first-child::after,
.donor-row.title-fx-diamond::after {
  width: 13px; height: 13px;
  animation-duration: 1.6s;
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
}
#rank-table tr.title-fx-emerald td:nth-child(2)::after,
.per-channel-table tr.title-fx-emerald td:first-child::after,
.donor-row.title-fx-emerald::after {
  width: 11px; height: 11px;
  animation-duration: 2.1s;
  box-shadow: 0 0 8px rgba(52,211,153,0.65);
}
#rank-table tr.title-fx-platinum td:nth-child(2)::after,
.per-channel-table tr.title-fx-platinum td:first-child::after,
.donor-row.title-fx-platinum::after {
  width: 11px; height: 11px;
  animation-duration: 2.3s;
  box-shadow: 0 0 9px rgba(255,255,255,0.65);
}

/* 포인트 열은 수치 비교가 핵심이라 자릿수를 고정폭으로 */
.points { font-variant-numeric: tabular-nums; }

/* ==================================================================
   헤더 · 미니게임 무대 · 색 활용
   ------------------------------------------------------------------
   지적된 세 가지를 고친다.
     · 헤더가 밋밋해 사이트의 첫인상이 약하다
     · 미니게임 결과가 나오는 자리가 그냥 빈 회색 박스라 게임 같지 않다
     · 토큰에 색이 여러 개 정의돼 있는데 실제로는 파랑 하나만 쓰고 있다
   ================================================================== */

/* -------- 헤더 -------- */
/* 위아래 여백을 늘리고 로고에 브랜드 색을 입혀 존재감을 준다 */
header {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.logo-link {
  text-decoration: none;
  color: var(--text-primary);
  transition: opacity var(--duration-fast) var(--ease-out);
}
.logo-link:hover { opacity: 0.82; }

/* 로고 옆 배지 — 페이지마다 다른 색을 줘서 지금 어디인지 바로 보이게 */
.badge {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}
.badge-hall { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }

/* 현재 메뉴를 확실히 구분 (예전에는 배경만 살짝 달라 알아보기 어려웠다) */
.nav-link.active {
  background: var(--primary-soft-strong);
  color: var(--primary);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 -2px 0 var(--primary);
}

/* ==================================================================
   고급스러운 브랜드 정체성 — 골드 하이라인 · 워터마크 · 디스플레이 서체
   ------------------------------------------------------------------
   기본 디자인 토큰(색·간격·카드 구조)은 그대로 두고, 장식 레이어만
   덧씌운다. 데이터 표(랭킹 표 등)는 가독성이 최우선이라 손대지 않고,
   헤더 · 카드 테두리 · 히어로 영역에만 골드 톤의 브랜드 액센트를 준다.
   ================================================================== */

/* 헤더 하단에 은은한 골드 하이라인 — 사이트 전체의 "고급 상사" 톤을 첫인상부터 준다.
   --header-bg는 색상값이라 background-image에 직접 못 쓰므로(무효 선언이 되어 무시됨),
   가상요소로 얇은 선만 따로 얹는다. */
header { border-bottom: none; }
header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold-line);
  opacity: 0.6;
}
.logo-link h1, h1 .logo-link, header h1 {
  font-family: var(--font-display);
  letter-spacing: 0;
}
.logo-link:hover { opacity: 0.88; }

/* 카드 상단에 얇은 골드 하이라인 — 하나하나가 "전시된" 느낌을 준다.
   overflow:hidden 대신 하이라인 자체를 카드와 같은 반경으로 둥글려서,
   칭호 카드의 인장 스탬프처럼 카드 밖으로 살짝 튀어나오는 요소를 가리지 않게 한다. */
.card { position: relative; }
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--gold-line);
  opacity: 0.55;
}

/* 카드 제목 — 얇은 하이라인만으로는 "이게 제목이다"가 잘 안 읽혀서,
   왼쪽에 짧은 금색 세로 탭을 붙이고 브랜드 서체로 무게감을 준다.
   h2의 레이아웃(flex/inline 등)은 건드리지 않고 절대배치 막대만 얹는다. */
.card h2 {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  position: relative;
  padding-left: 14px;
}
.card h2::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-rich));
}
.card:hover::before { opacity: 0.9; }

/* 히어로(첫 랜딩) 카드 — 고래 워터마크 + 디스플레이 서체 제목 */
#logged-out-hero, #my-stats {
  background-image: radial-gradient(ellipse at top right, var(--primary-soft) 0%, transparent 60%);
}
#logged-out-hero h2, #my-stats h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: 0;
}
#logged-out-hero::after {
  content: '🐋';
  position: absolute;
  right: -14px;
  bottom: -34px;
  font-size: 130px;
  line-height: 1;
  opacity: 0.06;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}


/* 카드 헤더 우측 도구 묶음 (시즌 선택 + 갱신 표시) */
.head-tools { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 640px) {
  .head-tools { width: 100%; justify-content: space-between; }
  .streamer-page-avatar { width: 48px; height: 48px; }
}

.title-list { display: flex; flex-direction: column; gap: 10px; }
.title-row {
  position: relative;
  padding: 10px 12px 10px 16px;
  border-radius: 10px;
  background: var(--surface-2);
  border-left: 3px solid var(--primary-border);
  transition: border-color var(--duration-fast, 0.15s) var(--ease-out, ease), transform var(--duration-fast, 0.15s) var(--ease-out, ease);
}
.history-row { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.history-time { min-width: 90px; }
.history-reward { margin-left: auto; font-weight: 700; color: var(--primary); }

/* -------------------- 칭호 관리 (트로피 카드) -------------------- */
.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.trophy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  transition: transform var(--duration-fast, 0.15s) var(--ease-out, ease);
}
.trophy-unlocked {
  background: linear-gradient(155deg, var(--surface-1) 0%, var(--surface-2) 60%, rgba(251, 191, 36, 0.1) 100%);
  border-color: var(--warning-border);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.08), var(--shadow-sm);
}
.trophy-unlocked:hover { transform: translateY(-2px); }
/* 잠긴 칭호는 카드 테두리·진행바만 흐리게 해서 "아직 못 얻었다"는 걸 알려주면 충분하다.
   예전엔 opacity/grayscale을 카드 전체(칭호 배지 글자까지)에 걸어서, 진하던 배지 색이
   씻겨나가 하얗게 뜬 것처럼 보이며 읽기 어려워졌었다. */
.trophy-locked { opacity: 0.82; filter: grayscale(0.25); }
.trophy-locked .title-badge { opacity: 1; filter: saturate(1.35) contrast(1.08); }
.trophy-equipped {
  position: relative;
  border-color: var(--warning);
  box-shadow: 0 0 0 1px var(--warning), 0 0 16px 0 rgba(251, 191, 36, 0.35);
}
/* 시그니처 요소: 지금 장착 중인 칭호에 상사의 봉랍 인장을 찍는다 — "공식 승인됨"의 은유 */
.trophy-equipped::before {
  content: '🐋';
  position: absolute;
  top: -11px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  filter: grayscale(1) brightness(1.7);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #a53f3f, #601c1c 75%);
  border: 2px dashed rgba(255, 230, 220, 0.4);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transform: rotate(8deg);
  z-index: 1;
}
.trophy-icon { font-size: 28px; flex-shrink: 0; width: 40px; text-align: center; }
.trophy-body { flex: 1; min-width: 0; }
.trophy-name { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.trophy-equipped-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warning);
  color: var(--warning-fg);
}
.trophy-progress-bar {
  margin-top: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.trophy-unlocked .trophy-progress-fill { background: linear-gradient(90deg, var(--warning), #fff7d6); box-shadow: 0 0 8px 0 var(--warning-soft-strong); }
.trophy-locked .trophy-progress-fill { background: var(--primary); }
.trophy-progress-fill { height: 100%; transition: width var(--duration-base, 0.3s) var(--ease-out, ease); }
.trophy-progress-text { margin-top: 4px; font-size: 12px; }
.title-equip-btn { margin-left: auto; }

/* -------------------- 포인트샵 -------------------- */
.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.shop-item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(155deg, var(--surface-1) 0%, var(--surface-2) 70%, var(--secondary-soft) 100%);
  border: 1px solid var(--secondary-border);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.06), var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--duration-fast, 0.15s) var(--ease-out, ease);
}
.shop-item-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
.shop-item-card:hover { transform: translateY(-3px); }
.shop-item-name { font-weight: 700; font-size: 15px; }
.shop-item-desc { font-size: 13px; }
.shop-item-price {
  align-self: flex-start;
  margin-top: auto;
  font-weight: 700;
  color: var(--secondary);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--secondary-soft);
}
.shop-buy-btn {
  width: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border: none;
  color: #fff;
  font-weight: 600;
}
.shop-buy-btn:disabled { background: var(--surface-3); color: var(--text-secondary); }

.shop-item-stock {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-secondary);
}
.shop-item-stock-low { background: var(--warning-soft); color: var(--warning); }
.shop-item-soldout { opacity: 0.6; filter: grayscale(0.4); }
.shop-item-soldout::before { display: none; } /* 품절 상품은 상단 그라디언트 광택도 끈다 */

/* -------------------- 큰손 (채널별 후원 TOP3) -------------------- */
.donors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* ── 큰손 시상대 (단일 채널 하이라이트) ─────────────────────────────
   예전에는 16개 채널 카드를 한 그리드에 촘촘히 늘어놓는 화면이었는데,
   지금은 채널 하나만 보여주는 화면이라 그 압축된 카드 스타일 대신
   실제 시상대처럼 크고 화려하게 보여준다. */
.donor-showcase {
  position: relative;
  padding: 28px 24px 24px;
  border-radius: 22px;
  background: linear-gradient(155deg, var(--surface-1) 0%, var(--surface-2) 60%, rgba(251, 191, 36, 0.1) 100%);
  border: 1px solid var(--warning-border);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.08), var(--shadow-md);
  overflow: hidden;
}
.donor-showcase::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--warning), #fff7d6, var(--warning), transparent);
  background-size: 200% 100%;
  animation: donor-shine 3.2s linear infinite;
}
.donor-showcase-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--warning-border);
}
.donor-showcase-head .donor-channel-name { font-size: 20px; font-weight: var(--weight-bold, 700); }

.donor-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
}
.donor-podium-item {
  flex: 1 1 200px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 18px 20px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--surface-1), var(--surface-2));
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}
.donor-podium-item:hover { transform: translateY(-3px); }
.donor-podium-medal { font-size: 40px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); }
.donor-podium-crown { font-size: 22px; line-height: 1; height: 26px; margin-top: -6px; }
.donor-podium-nickname {
  font-size: 19px;
  font-weight: var(--weight-bold, 700);
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  margin-top: 4px;
}
.donor-podium-count {
  font-size: 30px;
  font-weight: var(--weight-bold, 800);
  color: var(--warning);
  line-height: 1.1;
  margin-top: 6px;
}
.donor-podium-unit { font-size: 16px; font-weight: 600; margin-left: 2px; opacity: 0.85; }
.donor-podium-rank { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }

/* 3등급을 크기·색·모션까지 전부 다르게 준다 — 색깔만 다른 카드 3개가 아니라
   한눈에 "위에서부터 1·2·3위"라는 위계가 느껴져야 한다. */

/* 1위: 가장 크고, 금색 텍스트 그라디언트, 은은한 발광 펄스가 도는 유일한 카드 */
.donor-podium-1 {
  order: 2;
  padding-top: 32px;
  padding-bottom: 30px;
  border-color: var(--rank-gold);
  background: linear-gradient(145deg, var(--surface-1), var(--rank-gold-soft));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.28), 0 10px 28px rgba(251, 191, 36, 0.2);
  transform: scale(1.14);
  z-index: 3;
  animation: donor-podium-1-glow 3.2s ease-in-out infinite;
}
.donor-podium-1:hover { transform: scale(1.14) translateY(-3px); }
.donor-podium-1 .donor-podium-medal { font-size: 54px; }
.donor-podium-1 .donor-podium-nickname { font-size: 23px; color: var(--rank-gold); font-weight: 800; }
.donor-podium-1 .donor-podium-count { font-size: 38px; }
@keyframes donor-podium-1-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.28), 0 10px 28px rgba(251, 191, 36, 0.2); }
  50% { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45), 0 10px 36px rgba(251, 191, 36, 0.36); }
}

/* 2위: 중간 크기, 은색 텍스트, 살짝 떠 있는 정도의 절제된 움직임 */
.donor-podium-2 {
  order: 1;
  border-color: var(--rank-silver);
  background: linear-gradient(145deg, var(--surface-1), var(--rank-silver-soft));
  transform: scale(1.0);
  z-index: 2;
  transition: transform 0.2s ease;
}
.donor-podium-2:hover { transform: scale(1.0) translateY(-3px); }
.donor-podium-2 .donor-podium-medal { font-size: 42px; }
.donor-podium-2 .donor-podium-nickname { font-size: 19px; color: var(--rank-silver); font-weight: 700; }
.donor-podium-2 .donor-podium-count { font-size: 28px; color: var(--rank-silver); }

/* 3위: 가장 작고, 동색 텍스트, 애니메이션 없이 가장 차분하게(단상 맨 아래 단) */
.donor-podium-3 {
  order: 3;
  border-color: var(--rank-bronze);
  background: linear-gradient(145deg, var(--surface-1), var(--rank-bronze-soft));
  transform: scale(0.9);
  z-index: 1;
  transition: transform 0.2s ease;
}
.donor-podium-3:hover { transform: scale(0.9) translateY(-3px); }
.donor-podium-3 .donor-podium-medal { font-size: 32px; }
.donor-podium-3 .donor-podium-nickname { font-size: 16px; color: var(--rank-bronze); font-weight: 600; }
.donor-podium-3 .donor-podium-count { font-size: 24px; color: var(--rank-bronze); }

@media (prefers-reduced-motion: reduce) {
  .donor-podium-1 { animation: none; }
}

@media (max-width: 720px) {
  .donor-podium { gap: 12px; }
  .donor-podium-item { flex: 1 1 100%; max-width: 340px; }
  .donor-podium-1, .donor-podium-2, .donor-podium-3 { transform: none; }
  .donor-podium-1 { order: -1; animation: none; }
  .donor-podium-1:hover, .donor-podium-2:hover, .donor-podium-3:hover { transform: translateY(-3px); }
}
.donor-card {
  position: relative;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--surface-1) 0%, var(--surface-2) 65%, rgba(251, 191, 36, 0.08) 100%);
  border: 1px solid var(--warning-border);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.06), var(--shadow-md);
  overflow: hidden;
}
.donor-card::before {
  /* 카드 상단을 가로지르는 금빛 광택 띠 */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--warning), #fff7d6, var(--warning), transparent);
  background-size: 200% 100%;
  animation: donor-shine 3.2s linear infinite;
}
@keyframes donor-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.donor-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--warning-border);
}
.donor-channel-name { font-weight: var(--weight-semibold, 600); font-size: 15px; }
.donor-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 10px;
}
.donor-row:first-child {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0.03));
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.3);
}
.donor-medal { font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }
/* 칭호 배지는 항상 닉네임 바로 오른쪽, 한 줄로 붙어 있어야 자연스럽다(아래 줄로 떨어지면 어색함).
   대신 카드 폭 자체를 넉넉히 잡아서(.donors-grid) 실제 닉네임 길이로는 거의 잘릴 일이 없게 하고,
   혹시 정말 긴 닉네임이 와도 줄바꿈으로 레이아웃이 깨지는 대신 말줄임표로 끝나게만 한다. */
.donor-nickname-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  line-height: 1.35;
}
.donor-nickname {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 600;
}
.donor-count { font-weight: 700; color: var(--warning); white-space: nowrap; flex-shrink: 0; }
.donor-empty { padding: 6px 2px; font-size: 13px; }

@media (max-width: 900px) {
  .donors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 640px) {
  .donors-grid { grid-template-columns: 1fr; gap: 12px; }
}

.title-badge {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-soft);
  color: var(--accent);
  vertical-align: middle;
}

/* 마이페이지 칭호 선택기는 .title-list(세로 나열)를 재사용하지만, 칩은 가로로 감싸며 나열돼야 한다 */
#my-titles-picker { flex-direction: row; flex-wrap: wrap; }
.title-chip { margin: 4px 4px 0 0; }
.title-chip-active { background: var(--accent); color: #fff; border-color: transparent; }

/* ==================================================================
   OGQ 홍보 배너 — 좌측에 붙어서 스크롤을 따라다니는 세로 배너
   ================================================================== */
.ogq-banner {
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
  padding: 12px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.ogq-banner-head {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.35;
  color: var(--text);
  margin-top: 6px;
}
.ogq-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel-2);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ogq-item:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.ogq-item-emoji { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.ogq-item-name { font-size: 11px; font-weight: 700; color: var(--text); text-align: center; }
.ogq-item-desc { font-size: 10px; color: var(--muted); text-align: center; margin-top: 1px; }
.ogq-item-price { font-size: 11px; font-weight: 700; color: var(--gold); margin-top: 4px; }
.ogq-banner-foot { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.3; }
.ogq-banner-toggle {
  width: 100%;
  min-height: 0;
  margin-top: 4px;
  padding: 4px 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}
.ogq-banner-toggle:hover { color: var(--text); background: none; }

@media (max-width: 900px) {
  .ogq-banner { display: none; }
}

/* ==================================================================
   마이페이지 "채널 현황" — 넓은 화면에서 오른쪽에 고정되어 스크롤을
   따라다닌다. OGQ 배너(왼쪽)와 짝을 이루는 오른쪽 사이드바.
   ================================================================== */
@media (min-width: 1500px) {
  /* 왼쪽엔 OGQ 배너(112px 확보), 오른쪽엔 이 사이드바(372px 확보)가 고정돼
     있다. 본문을 그 "틈" 안에서 실제로 가운데에 오도록, 화면이 1684px
     (112+372+1200)보다 넓어서 남는 공간이 생기면 절반씩 양쪽에 더한다. */
  .has-channel-sidebar {
    --side-extra: max(0px, (100vw - 1684px));
    margin-left: calc(112px + var(--side-extra) / 2);
    margin-right: calc(372px + var(--side-extra) / 2);
  }
  /* top을 고정 px로 잡으면 공지 배너 유무에 따라 헤더 높이가 달라져서
     상단 메뉴와 겹친다. OGQ 배너처럼 화면 세로 중앙에 띄우면 공지 배너가
     있든 없든, 헤더 높이가 얼마든 항상 안전하다. */
  #channel-status-section {
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 340px;
    max-height: min(620px, calc(100vh - 220px));
    overflow-y: auto;
    font-size: var(--text-md);
    z-index: 30;
  }
  #channel-status-section h2 { font-size: var(--text-2xl); }
  #channel-status-section .pill,
  #channel-status-section .status-chip { font-size: var(--text-base); padding: 6px 12px; }
}

/* ==================================================================
   RETRO / Y2K VISUAL SYSTEM
   ------------------------------------------------------------------
   기능 DOM과 JavaScript 계약은 그대로 두고, 공통 시각 언어만 교체한다.
   크롬 프레임 · 아이스 글래스 · 코발트/바이올렛/핑크 오로라를 모든
   사용자/관리자 페이지가 공유한다.
   ================================================================== */

:root,
[data-theme="dark"] {
  /* 진짜 다크: 배경/표면/테두리는 전부 중립 무채색이고, 하늘색은 버튼·활성 상태·강조선처럼
     "포인트로만" 쓴다 — 배경 전체를 색으로 물들이면 그 자체가 또 하나의 "네온 아우라"가
     되어버리므로, 무채색 다크 위에 액센트 하나만 또렷하게 얹는 방식이다.
     다크 모드는 밝은 배경이 아니라 어두운 배경에 맞게 글자를 밝은 색으로 둔다 —
     라이트 모드의 "고정 블랙 텍스트"를 다크에 그대로 적용하면 검정 위에 검정이라 안 보인다. */
  --y2k-pink: #4fb3f0;
  --y2k-pink-soft: rgba(79, 179, 240, 0.1);
  --y2k-violet: #4fb3f0;
  --y2k-violet-soft: rgba(79, 179, 240, 0.1);
  --y2k-cobalt: #4fb3f0;
  --y2k-cobalt-deep: #2f86c2;
  --y2k-cobalt-soft: rgba(79, 179, 240, 0.12);
  --y2k-aqua: #4fb3f0;
  --y2k-ice: #dff7ff;
  --y2k-chrome-hi: #292a2c;
  --y2k-chrome-mid: #1f2022;
  --y2k-chrome-low: #0e0f10;
  --y2k-grid-line: rgba(220, 224, 230, 0.02);
  --y2k-panel: #1a1b1d;
  --y2k-panel-strong: #151617;
  --y2k-panel-glow: rgba(79, 179, 240, 0.08);
  /* 유리/베벨 없는 납작한 레트로 톤 — 크롬 헤더도 그냥 배경색 하나 */
  --y2k-chrome: var(--header-bg);
  --y2k-button: #2f9fe0;
  --y2k-button-hover: #4cb0ea;
  --y2k-secondary-button: var(--surface-2);
  --y2k-aurora: var(--y2k-cobalt);
  --y2k-chrome-border: rgba(220, 224, 230, 0.12);
  --y2k-inner-border: rgba(255, 255, 255, 0.03);
  --y2k-text-shadow: none;
  --y2k-frame-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);

  --bg: #111213;
  --bg-elevated: #151617;
  --surface-1: var(--y2k-panel);
  --surface-2: #1f2022;
  --surface-3: #27292b;
  --surface-hover: #232426;
  --surface-active: #2b2d2f;
  --border-subtle: rgba(220, 224, 230, 0.08);
  --border-default: rgba(220, 224, 230, 0.14);
  --border-strong-c: rgba(220, 224, 230, 0.26);
  --text-primary: #f0f2f5;
  --text-secondary: #b3b8bf;
  --text-tertiary: #82878f;
  --text-inverse: #111213;
  --primary: #4fb3f0;
  --primary-hover: #6fc2f4;
  --primary-active: #3a9bd8;
  --primary-fg: #0a1f2e;
  --primary-soft: rgba(79, 179, 240, 0.14);
  --primary-soft-strong: rgba(79, 179, 240, 0.22);
  --primary-border: rgba(79, 179, 240, 0.42);
  --secondary: var(--y2k-violet);
  --secondary-soft: var(--y2k-violet-soft);
  --secondary-border: rgba(79, 179, 240, 0.4);
  --success: #52c785;
  --success-soft: rgba(82, 199, 133, 0.14);
  --success-soft-strong: rgba(82, 199, 133, 0.24);
  --success-border: rgba(82, 199, 133, 0.4);
  --warning: #d9a24f;
  --warning-soft: rgba(217, 162, 79, 0.14);
  --warning-soft-strong: rgba(217, 162, 79, 0.24);
  --warning-border: rgba(217, 162, 79, 0.4);
  --error: #e2687d;
  --error-soft: rgba(226, 104, 125, 0.14);
  --error-soft-strong: rgba(226, 104, 125, 0.24);
  --error-border: rgba(226, 104, 125, 0.4);
  --header-bg: #171512;
  --gold-rich: #ffd66f;
  --gold-bright: #fff0aa;
  --gold-line: var(--y2k-aurora);
}

[data-theme="light"] {
  /* 하늘색 단색 액센트 + 고정 블랙 텍스트 */
  --y2k-pink: #1f8fd6;
  --y2k-pink-soft: rgba(31, 143, 214, 0.1);
  --y2k-violet: #1f8fd6;
  --y2k-violet-soft: rgba(31, 143, 214, 0.1);
  --y2k-cobalt: #1f8fd6;
  --y2k-cobalt-deep: #145f96;
  --y2k-cobalt-soft: rgba(31, 143, 214, 0.1);
  --y2k-aqua: #1f8fd6;
  --y2k-ice: #f6fcff;
  --y2k-chrome-hi: #ffffff;
  --y2k-chrome-mid: #eef2f6;
  --y2k-chrome-low: #d7dee6;
  --y2k-grid-line: rgba(20, 30, 40, 0.03);
  --y2k-panel: #ffffff;
  --y2k-panel-strong: #fdfdfd;
  --y2k-panel-glow: rgba(31, 143, 214, 0.08);
  /* 유리/베벨 없는 납작한 레트로 톤 — 크롬 헤더도 그냥 배경색 하나 */
  --y2k-chrome: var(--header-bg);
  --y2k-button: #1f8fd6;
  --y2k-button-hover: #187ac0;
  --y2k-secondary-button: var(--surface-2);
  --y2k-aurora: var(--y2k-cobalt);
  --y2k-chrome-border: rgba(17, 17, 17, 0.1);
  --y2k-inner-border: rgba(255, 255, 255, 0.6);
  --y2k-text-shadow: none;
  --y2k-frame-shadow: 0 2px 10px rgba(20, 30, 40, 0.08);

  --bg: #fdf6ea;
  --bg-elevated: #fffaf1;
  --surface-1: var(--y2k-panel);
  --surface-2: #f7efe0;
  --surface-3: #efe4cf;
  --surface-hover: #f2e9d8;
  --surface-active: #ece0c9;
  --border-subtle: rgba(17, 17, 17, 0.08);
  --border-default: rgba(17, 17, 17, 0.14);
  --border-strong-c: rgba(17, 17, 17, 0.26);
  --text-primary: #111111;
  --text-secondary: #3d3d3d;
  --text-tertiary: #6b6b6b;
  --text-inverse: #ffffff;
  --primary: #1f8fd6;
  --primary-hover: #187ac0;
  --primary-active: #14639e;
  --primary-fg: #ffffff;
  --primary-soft: rgba(31, 143, 214, 0.1);
  --primary-soft-strong: rgba(31, 143, 214, 0.18);
  --primary-border: rgba(31, 143, 214, 0.36);
  --secondary: var(--y2k-violet);
  --secondary-soft: var(--y2k-violet-soft);
  --secondary-border: rgba(31, 143, 214, 0.32);
  --success: #2f8f5c;
  --success-soft: rgba(47, 143, 92, 0.1);
  --success-soft-strong: rgba(47, 143, 92, 0.18);
  --success-border: rgba(47, 143, 92, 0.32);
  --warning: #a8710a;
  --warning-soft: rgba(168, 113, 10, 0.1);
  --warning-soft-strong: rgba(168, 113, 10, 0.18);
  --warning-border: rgba(168, 113, 10, 0.32);
  --error: #c9445a;
  --error-soft: rgba(201, 68, 90, 0.09);
  --error-soft-strong: rgba(201, 68, 90, 0.16);
  --error-border: rgba(201, 68, 90, 0.32);
  --header-bg: #ffffff;
  --gold-rich: #a56600;
  --gold-bright: #d99b24;
  --gold-line: var(--y2k-aurora);
}

/* 은은한 네온 글로우 없이 그냥 단색 배경 — "아우라" 느낌을 만드는 건 그라데이션 자체가
   아니라 배경 전체에 깔린 은은한 색 번짐이었다. */
html { background: var(--bg); }
body {
  min-height: 100vh;
  background-color: var(--bg);
}

::selection { background: var(--y2k-pink); color: var(--text-inverse); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--y2k-chrome-hi), var(--y2k-chrome-mid) 35%, var(--y2k-cobalt));
  border-color: var(--bg);
  box-shadow: inset 0 0 0 1px var(--y2k-chrome-border);
}

/* 레트로 데스크탑 브라우저 창 — 유리질감 없이 납작한 크림/틸 바 */
header {
  isolation: isolate;
  padding: 15px var(--space-6) 14px 88px;
  border: 1px solid var(--y2k-chrome-border);
  border-top-color: var(--y2k-chrome-hi);
  background: var(--y2k-chrome);
  box-shadow: var(--y2k-frame-shadow);
}
header::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  border-radius: 50%;
  /* 신호등 배색(빨강/노랑/초록) — 예전엔 셋 다 파란색이라 그냥 장식 점 3개로만 보였다. */
  background: var(--error);
  box-shadow:
    0 0 0 2px var(--y2k-chrome-hi), 0 0 0 3px var(--y2k-chrome-low),
    25px 0 0 0 var(--warning), 25px 0 0 2px var(--y2k-chrome-hi), 25px 0 0 3px var(--y2k-chrome-low),
    50px 0 0 0 var(--success), 50px 0 0 2px var(--y2k-chrome-hi), 50px 0 0 3px var(--y2k-chrome-low);
  pointer-events: none;
}
header::after {
  height: 3px;
  background: var(--y2k-aurora);
  opacity: 0.9;
}
header h1 { text-shadow: var(--y2k-text-shadow); }
.logo-link { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.025em; }
.logo-link:hover { opacity: 1; filter: brightness(1.08); }
.badge {
  border-color: var(--y2k-chrome-border);
  background: var(--y2k-secondary-button);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 0 9px var(--y2k-panel-glow);
  text-shadow: var(--y2k-text-shadow);
}
.main-nav { gap: 5px; }
.nav-link {
  position: relative;
  min-height: 36px;
  border: 1px solid var(--border-default);
  border-top-color: var(--y2k-chrome-border);
  border-radius: 10px;
  background: var(--y2k-secondary-button);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
  text-shadow: var(--y2k-text-shadow);
}
.nav-link:hover {
  color: var(--text-primary);
  border-color: var(--primary-border);
  filter: brightness(1.08);
}
.nav-link.active,
.nav-active {
  color: var(--primary-fg);
  border-color: var(--secondary-border);
  background: var(--y2k-cobalt);
  box-shadow: none;
}

.theme-toggle,
.auth-area > button,
.header-nav > button {
  border-color: var(--y2k-chrome-border);
  background: var(--y2k-secondary-button);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}

/* 채널 캡슐 바 */
.channel-nav {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom-color: var(--y2k-chrome-border);
  background: var(--y2k-panel-strong);
  box-shadow: inset 0 -1px 0 var(--y2k-inner-border), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.channel-nav a {
  min-height: 42px;
  border-color: var(--border-default);
  border-top-color: var(--y2k-chrome-border);
  background: var(--y2k-secondary-button);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.channel-nav a:hover { border-color: var(--primary-border); filter: brightness(1.08); }
.channel-nav a.is-live {
  border-color: var(--success-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--success-soft-strong) 72%, var(--surface-1)), var(--success-soft));
}
.channel-nav a.active {
  color: var(--text-primary);
  border-color: var(--y2k-pink);
  background: linear-gradient(180deg, var(--y2k-pink-soft), var(--secondary-soft));
  box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 0 13px var(--y2k-pink-soft);
}
.channel-avatar,
.streamer-page-avatar {
  border: 2px solid var(--y2k-chrome-hi);
  outline: 1px solid var(--y2k-chrome-mid);
  box-shadow: 0 0 0 2px var(--primary-soft), 0 0 12px var(--y2k-panel-glow);
}
.live-dot.live-on,
.trust-dot-ok { box-shadow: 0 0 0 2px var(--success-soft), 0 0 9px var(--success); }
.live-dot.live-blocked { box-shadow: 0 0 0 2px var(--warning-soft), 0 0 9px var(--warning); }
.live-dot.live-retired { box-shadow: 0 0 0 2px var(--error-soft), 0 0 9px var(--error); }
.live-dot.live-testing { box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.22), 0 0 9px #a855f7; }

/* 상단 채널 상태등: 방송 상태와 실제 수집 연결을 함께 보여준다. */
.live-dot.live-checking {
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft), 0 0 8px var(--primary);
  animation: channel-status-pulse 1.8s ease-in-out infinite;
}
.live-dot.live-warning {
  background: var(--warning);
  box-shadow: 0 0 0 2px var(--warning-soft), 0 0 8px var(--warning);
  animation: channel-status-pulse 1.5s ease-in-out infinite;
}
.live-dot.live-error {
  background: var(--error);
  box-shadow: 0 0 0 2px var(--error-soft), 0 0 8px var(--error);
}
.channel-nav a.is-collection-warning {
  color: var(--text-primary);
  border-color: var(--warning-border);
  background: linear-gradient(135deg, var(--warning-soft), var(--surface-1));
}
.channel-nav a.is-collection-error {
  color: var(--text-primary);
  border-color: var(--error-border);
  background: linear-gradient(135deg, var(--error-soft), var(--surface-1));
}
@keyframes channel-status-pulse {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

/* 레트로 데스크탑 카드 — 유리질감 없이 납작한 크림/차콜 배경 */
main { position: relative; }
.card,
.ob-card,
.ogq-banner {
  border: 1px solid var(--y2k-chrome-border);
  background: var(--y2k-panel);
  box-shadow: var(--y2k-frame-shadow);
}
.card { border-radius: 14px; }
.card::before {
  height: 4px;
  border-radius: 13px 13px 0 0;
  background: var(--y2k-aurora);
  opacity: 0.85;
}
.card:hover {
  border-color: var(--primary-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.card h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.025em;
  padding-left: 17px;
}
.card h2::before {
  top: 2px;
  bottom: 2px;
  width: 6px;
  border-radius: 4px;
  background: var(--y2k-aurora);
  box-shadow: 0 0 10px var(--y2k-panel-glow);
}
#logged-out-hero,
#my-stats {
  background-image:
    linear-gradient(var(--y2k-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--y2k-grid-line) 1px, transparent 1px),
    radial-gradient(circle at 90% 0%, var(--y2k-pink-soft), transparent 30%),
    radial-gradient(circle at 8% 100%, var(--primary-soft-strong), transparent 34%);
  background-size: 24px 24px, 24px 24px, auto, auto;
}
#logged-out-hero::after {
  content: '✦';
  right: 24px;
  bottom: 8px;
  color: var(--y2k-pink);
  font-size: 86px;
  opacity: 0.1;
  filter: drop-shadow(0 0 14px var(--y2k-pink));
}

/* 납작한 레트로 버튼 — 유광 베벨 없이 단색 채움 */
button,
.btn-link {
  position: relative;
  border: 1px solid var(--y2k-cobalt-deep);
  background: var(--y2k-button);
  color: var(--primary-fg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
button:hover:not(:disabled),
.btn-link:hover {
  background: var(--y2k-button-hover);
}
button:active:not(:disabled),
.btn-link:active {
  transform: translateY(1px);
  box-shadow: none;
}
button.secondary,
.btn-link.secondary-link,
.ob-close,
.ob-skip {
  border-color: var(--y2k-chrome-border);
  background: var(--y2k-secondary-button);
  color: var(--text-primary);
  box-shadow: none;
}
/* del-btn은 채널 삭제·상품 삭제·칭호 회수처럼 흔히 쓰는 "제거" 동작에도 전부 붙는데,
   전부 꽉 찬 빨간 버튼이면 화면에 경고색이 너무 많아져서 정작 되돌릴 수 없는 조작
   (완전 소멸·하드 리셋)의 무게감이 묻힌다. 평소 제거 동작은 테두리만 있는 차분한
   빨강으로 하고, 진짜 돌이킬 수 없는 조작에만 del-btn-severe로 꽉 채운 빨강을 쓴다. */
button.del-btn {
  background: transparent;
  border-color: var(--error-border);
  color: var(--error);
}
button.del-btn:hover:not(:disabled) { background: var(--error-soft); border-color: var(--error); }
button.del-btn-severe {
  border-color: var(--error-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--error) 42%, white), var(--error));
  color: var(--text-inverse);
}
button:disabled { filter: grayscale(0.32); opacity: 0.54; }
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--y2k-pink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--y2k-pink-soft);
}
input[type="text"],
input[type="number"],
input[type="password"],
input[type="datetime-local"],
select,
textarea {
  border: 1px solid var(--y2k-chrome-border);
  border-top-color: var(--y2k-chrome-mid);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, transparent), color-mix(in srgb, var(--surface-1) 94%, transparent));
  box-shadow: inset 0 2px 5px rgba(0, 16, 58, 0.13), 0 1px 0 var(--y2k-inner-border);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: inset 0 2px 5px rgba(0, 16, 58, 0.1), 0 0 0 3px var(--primary-soft), 0 0 14px var(--y2k-panel-glow);
}
input[type="checkbox"] { accent-color: var(--y2k-violet); }

/* 표 / 랭킹 HUD */
.table-scroll {
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-1) 84%, transparent);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.table-scroll table { margin-top: 0; }
th {
  color: var(--y2k-ice);
  border-bottom-color: var(--primary-border);
  background:
    linear-gradient(var(--y2k-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--y2k-grid-line) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--y2k-cobalt) 78%, var(--surface-1)), var(--y2k-cobalt-deep));
  background-size: 14px 14px, 14px 14px, auto;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
td { border-bottom-color: var(--border-subtle); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: linear-gradient(90deg, var(--primary-soft), var(--y2k-pink-soft)); }
tr.me { background: linear-gradient(90deg, var(--primary-soft-strong), var(--y2k-violet-soft)); box-shadow: inset 4px 0 0 var(--y2k-cobalt); }
tr.rank-1 { background: linear-gradient(90deg, var(--rank-gold-soft), transparent 82%); box-shadow: inset 5px 0 0 var(--rank-gold); }
tr.rank-2 { background: linear-gradient(90deg, var(--rank-silver-soft), transparent 82%); box-shadow: inset 4px 0 0 var(--rank-silver); }
tr.rank-3 { background: linear-gradient(90deg, var(--rank-bronze-soft), transparent 82%); box-shadow: inset 4px 0 0 var(--rank-bronze); }
.rank-num {
  border: 1px solid var(--border-default);
  background: var(--y2k-secondary-button);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}

/* 상태와 정보 패널 */
.pill,
.status-chip,
.title-badge,
.history-chip,
.shop-item-stock {
  border-width: 1px;
  border-style: solid;
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.pill-live,
.status-chip.status-live { box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 0 9px var(--success-soft-strong); }
.pill-warn,
.status-chip.status-blocked { box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 0 9px var(--warning-soft-strong); }
.error-box,
.lead-note,
.donation-scope-note,
.empty-state,
.how-it-works,
.soop-id-pending {
  border-radius: 12px;
  border-width: 1px;
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.toast {
  border-color: var(--y2k-chrome-border);
  border-radius: 12px;
  background: var(--y2k-panel-strong);
  box-shadow: var(--y2k-frame-shadow);
}
.skeleton {
  background: linear-gradient(100deg, var(--surface-2) 15%, var(--primary-soft-strong) 38%, var(--y2k-pink-soft) 50%, var(--surface-2) 68%);
  background-size: 220% 100%;
}

/* 마이페이지 · 리포트 */
.my-summary-item,
.tracking-card,
.rc-stat,
.rc-highlight,
.rc-comparison,
.rc-day-detail,
.rc-day-detail-stats > span {
  border: 1px solid var(--border-default);
  border-top-color: var(--y2k-chrome-border);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 92%, transparent), color-mix(in srgb, var(--surface-1) 88%, transparent));
  box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 5px 14px rgba(0, 4, 36, 0.1);
}
.tracking-card:hover,
.rc-highlight:hover { border-color: var(--primary-border); box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 0 15px var(--y2k-panel-glow); }
.tracking-guide { padding: 8px 10px; border: 1px dashed var(--border-default); border-radius: 10px; background: var(--primary-soft); }
.rc-stat-accent { border-color: var(--y2k-pink); background: linear-gradient(145deg, var(--primary-soft), var(--y2k-pink-soft)); }
.rc-calendar-day {
  border-color: var(--border-default);
  border-top-color: var(--y2k-chrome-border);
  background: linear-gradient(155deg, var(--surface-2), var(--surface-1));
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.rc-calendar-day:hover { border-color: var(--y2k-pink); box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 0 12px var(--y2k-pink-soft); }
.rc-calendar-today { border-color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning), 0 0 11px var(--warning-soft-strong); }
.rc-calendar-selected { border-color: var(--y2k-pink); box-shadow: inset 0 0 0 2px var(--y2k-pink), 0 0 12px var(--y2k-pink-soft); }
.rc-level-3 { background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 46%, var(--surface-1)), color-mix(in srgb, var(--secondary) 28%, var(--surface-1))); }
.rc-level-4 { background: linear-gradient(145deg, var(--y2k-cobalt), var(--y2k-violet)); }

/* 칭호 · 샵 · 큰손 · 명예의 전당 */
.trophy-card,
.shop-item-card,
.donor-card,
.podium-item,
.title-row {
  border: 1px solid var(--y2k-chrome-border);
  border-top-color: var(--y2k-chrome-hi);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 92%, transparent), color-mix(in srgb, var(--surface-2) 90%, transparent));
  box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 8px 20px rgba(0, 5, 36, 0.13);
}
.trophy-unlocked {
  border-color: var(--secondary-border);
  background: linear-gradient(145deg, var(--surface-1), var(--y2k-violet-soft) 66%, var(--y2k-pink-soft));
}
.trophy-equipped {
  border-color: var(--y2k-pink);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 0 0 1px var(--y2k-pink), 0 0 20px var(--y2k-pink-soft);
}
.trophy-equipped::before {
  content: '✦';
  color: var(--y2k-ice);
  border-style: solid;
  border-color: var(--y2k-chrome-hi);
  background: radial-gradient(circle at 32% 28%, var(--y2k-pink), var(--y2k-violet) 72%);
}
.trophy-progress-bar { border: 1px solid var(--border-default); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); }
.trophy-progress-fill { background: var(--y2k-aurora) !important; }
.shop-item-card { border-color: var(--secondary-border); }
.shop-item-card::before,
.donor-card::before { height: 3px; background: var(--y2k-aurora); opacity: 0.55; animation-duration: 9s; }
.shop-buy-btn { background: var(--y2k-button); }
.shop-item-price { color: var(--y2k-pink); background: var(--y2k-pink-soft); border: 1px solid color-mix(in srgb, var(--y2k-pink) 42%, transparent); }
.donor-card { border-color: var(--warning-border); }
.donor-card-head { border-bottom-color: var(--warning-border); }
.podium-item { border-radius: 16px; }
.podium-1 { border-color: var(--rank-gold); background: linear-gradient(145deg, var(--surface-1), var(--rank-gold-soft)); }
.podium-2 { border-color: var(--rank-silver); background: linear-gradient(145deg, var(--surface-1), var(--rank-silver-soft)); }
.podium-3 { border-color: var(--rank-bronze); background: linear-gradient(145deg, var(--surface-1), var(--rank-bronze-soft)); }

/* 관리자: 같은 시스템, 더 조밀하고 장식은 절제 */
.admin-tabs {
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--y2k-chrome-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--y2k-panel) 90%, transparent);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 6px 18px rgba(0, 4, 36, 0.12);
}
.admin-tabs .tab-btn {
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: var(--y2k-secondary-button);
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.admin-tabs .tab-btn:hover:not(:disabled) { border-color: var(--primary-border); background: var(--y2k-secondary-button); }
.admin-tabs .tab-btn.active {
  color: var(--text-inverse);
  border-color: var(--secondary-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--y2k-pink) 58%, white), var(--y2k-violet));
  box-shadow: inset 0 1px 0 var(--y2k-inner-border), 0 0 12px var(--y2k-pink-soft);
}
.stat-card,
.points-preview,
.diag-detail pre {
  border: 1px solid var(--border-default);
  border-top-color: var(--y2k-chrome-border);
  background: linear-gradient(145deg, var(--surface-2), var(--surface-1));
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--y2k-aurora);
  opacity: 0.7;
  pointer-events: none;
}
.u-divider-danger {
  border-color: var(--error-border);
  border-radius: 12px;
  background: linear-gradient(90deg, var(--error-soft), transparent);
}

/* 약관 · 모달 · 광고 · 푸터 */
.legal-tabs {
  padding: 6px;
  border: 1px solid var(--y2k-chrome-border);
  border-radius: 12px;
  background: var(--surface-2);
}
.legal-tab { border-color: transparent; border-radius: 8px; }
.legal-tab.active { border-color: var(--secondary-border); background: linear-gradient(180deg, var(--y2k-pink-soft), var(--secondary-soft)); color: var(--secondary); }
.ob-overlay { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.ob-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  border-radius: inherit;
  background: var(--y2k-aurora);
  pointer-events: none;
}
.ogq-banner { border-radius: 17px; }
.ogq-item {
  border-color: var(--border-default);
  border-top-color: var(--y2k-chrome-border);
  background: var(--y2k-secondary-button);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.ogq-item:hover { border-color: var(--y2k-pink); box-shadow: 0 0 13px var(--y2k-pink-soft); }
.ogq-banner-toggle { background: transparent; box-shadow: none; text-shadow: none; }
footer::before { height: 3px; background: var(--y2k-aurora); opacity: 0.72; }

@media (max-width: 900px) {
  header { padding-left: 78px; }
  header::before { left: 20px; transform: translateY(-50%) scale(0.86); transform-origin: left center; }
  .admin-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .admin-tabs .tab-btn { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  header {
    padding: 10px max(var(--space-4), env(safe-area-inset-right)) 10px max(var(--space-4), env(safe-area-inset-left));
    border-left: 0;
    border-right: 0;
  }
  header::before { display: none; }
  .main-nav { padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 74%, transparent); }
  .nav-link { min-height: 42px; border-radius: 8px; padding-inline: 9px; }
  .channel-nav { padding-inline: var(--space-4); }
  .channel-nav a { min-height: 44px; }
  .card { border-radius: 15px; }
  .card::before { border-radius: 14px 14px 0 0; }
  .card:hover { transform: none; }
  .table-scroll { border-radius: 11px; }
  .admin-tabs { margin-inline: 0; padding: 6px; border-radius: 11px; }
  .admin-tabs .tab-btn { min-height: 42px; }
  .tracking-guide { display: grid; gap: 4px; }
  .rc-calendar-day:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot,
  .trust-dot,
  .donor-card::before,
  tr.rank-1 td:first-child::before { animation: none !important; }
}

/* ==================================================================
   행운번호 뽑기
   ================================================================== */
.lotto645-legal-notice { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); line-height: 1.6; color: var(--text-primary); background: var(--warning-soft); border: 1px solid var(--warning-border); border-radius: var(--radius-md); }
.lotto645-legal-notice > strong { flex: 0 0 auto; }
.lotto645-legal-notice-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.lotto645-legal-notice-list li { padding-left: 2px; }
.lotto645-content { display: grid; gap: var(--space-3); }

/* 로또/연금복권 카드를 하나로 합쳐 옆으로 나란히 배치한다 — 각각 풀사이즈 카드였을 때
   뽑기 화면(추첨기)이 스크롤을 많이 내려야 보일 만큼 공간을 많이 차지했다. */
.lotto-combined-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.lotto-combined-col:first-child { padding-right: var(--space-5); border-right: 1px dashed var(--border-default); }
.lotto-combined-col h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
/* 카드 폭이 절반으로 줄어드니 회차 정보도 4칸 대신 2칸으로 */
.lotto-combined-col .lotto645-next { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .lotto-combined-grid { grid-template-columns: 1fr; }
  .lotto-combined-col:first-child { padding-right: 0; padding-bottom: var(--space-4); border-right: none; border-bottom: 1px dashed var(--border-default); }
}
.lotto645-next { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.lotto645-next > div { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-2); }
.lotto645-label { color: var(--text-tertiary); font-size: var(--text-xs); }
.lotto645-deadlines { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }
.lotto645-history { display: grid; gap: var(--space-2); }
.lotto645-latest { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-2); }
.lotto645-latest-head { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.lotto645-balls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lotto645-plus { color: var(--text-tertiary); font-weight: var(--weight-bold); }
@media (max-width: 640px) {
  .lotto645-next { grid-template-columns: 1fr; }
  .lotto645-latest-head { flex-direction: column; }
}

/* 최종 보석 팔레트: 형광색을 여러 겹 섞지 않고, 등급마다 주색·금속 하이라이트·
   어두운 앵커색을 고정해 고급 카드처럼 보이게 한다. */
#rank-table tr.title-fx-diamond td:nth-child(2), .per-channel-table tr.title-fx-diamond td:first-child, .donor-row.title-fx-diamond {
  color: #ecfeff; background-image: linear-gradient(112deg, #155e75 0%, #0e7490 34%, #67e8f9 49%, #a78bfa 61%, #312e81 100%) !important; border-color: #67e8f9 !important;
}
#rank-table tr.title-fx-emerald td:nth-child(2), .per-channel-table tr.title-fx-emerald td:first-child, .donor-row.title-fx-emerald {
  color: #ecfdf5; background-image: linear-gradient(112deg, #065f46 0%, #047857 38%, #6ee7b7 53%, #134e4a 100%) !important; border-color: #6ee7b7 !important;
}
#rank-table tr.title-fx-platinum td:nth-child(2), .per-channel-table tr.title-fx-platinum td:first-child, .donor-row.title-fx-platinum {
  color: #faf5ff; background-image: linear-gradient(112deg, #312e81 0%, #6d28d9 40%, #e9d5ff 53%, #4338ca 73%, #1e1b4b 100%) !important; border-color: #d8b4fe !important;
}
#rank-table tr.title-fx-flame td:nth-child(2), .per-channel-table tr.title-fx-flame td:first-child, .donor-row.title-fx-flame {
  color: #fff7ed; background-image: linear-gradient(112deg, #7f1d1d 0%, #c2410c 38%, #facc15 54%, #dc2626 70%, #431407 100%) !important; border-color: #fdba74 !important;
}
#rank-table tr.title-fx-gold td:nth-child(2), .per-channel-table tr.title-fx-gold td:first-child, .donor-row.title-fx-gold {
  color: #fffbeb; background-image: linear-gradient(112deg, #713f12 0%, #a16207 40%, #fde68a 54%, #b45309 72%, #451a03 100%) !important; border-color: #fcd34d !important;
}
#rank-table tr.title-fx-silver td:nth-child(2), .per-channel-table tr.title-fx-silver td:first-child, .donor-row.title-fx-silver {
  color: #f8fafc; background-image: linear-gradient(112deg, #334155 0%, #64748b 40%, #f1f5f9 54%, #475569 72%, #1e293b 100%) !important; border-color: #cbd5e1 !important;
}
#rank-table tr.title-fx-electric td:nth-child(2), .per-channel-table tr.title-fx-electric td:first-child, .donor-row.title-fx-electric {
  color: #eff6ff; background-image: repeating-linear-gradient(105deg, #1e3a8a 0 28px, #2563eb 31px 35px, #0f172a 39px 64px) !important; border-color: #60a5fa !important;
}
[data-theme="light"] #rank-table tr.title-fx-diamond td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-diamond td:first-child, [data-theme="light"] .donor-row.title-fx-diamond { color: #164e63; background-image: linear-gradient(112deg, #cffafe, #67e8f9 45%, #c4b5fd 66%, #e0e7ff) !important; }
[data-theme="light"] #rank-table tr.title-fx-emerald td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-emerald td:first-child, [data-theme="light"] .donor-row.title-fx-emerald { color: #064e3b; background-image: linear-gradient(112deg, #d1fae5, #6ee7b7 48%, #99f6e4 68%, #ecfdf5) !important; }
[data-theme="light"] #rank-table tr.title-fx-platinum td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-platinum td:first-child, [data-theme="light"] .donor-row.title-fx-platinum { color: #4c1d95; background-image: linear-gradient(112deg, #ede9fe, #c4b5fd 45%, #f5d0fe 63%, #eef2ff) !important; }
[data-theme="light"] #rank-table tr.title-fx-flame td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-flame td:first-child, [data-theme="light"] .donor-row.title-fx-flame { color: #7c2d12; background-image: linear-gradient(112deg, #ffedd5, #fdba74 45%, #fde68a 59%, #fecaca) !important; }
[data-theme="light"] #rank-table tr.title-fx-gold td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-gold td:first-child, [data-theme="light"] .donor-row.title-fx-gold { color: #78350f; background-image: linear-gradient(112deg, #fef3c7, #fcd34d 48%, #fff7ed 64%, #fde68a) !important; }
[data-theme="light"] #rank-table tr.title-fx-silver td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-silver td:first-child, [data-theme="light"] .donor-row.title-fx-silver { color: #1e293b; background-image: linear-gradient(112deg, #e2e8f0, #f8fafc 48%, #cbd5e1 64%, #f1f5f9) !important; }
[data-theme="light"] #rank-table tr.title-fx-electric td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-electric td:first-child, [data-theme="light"] .donor-row.title-fx-electric { color: #1e3a8a; background-image: repeating-linear-gradient(105deg, #dbeafe 0 28px, #93c5fd 31px 35px, #eff6ff 39px 64px) !important; }
/* Luxury vivid balance: 행 전체는 차분하게, 칭호 배지와 한 줄 광택은 선명하게 */
#rank-table tr.title-fx-diamond td:nth-child(2), .per-channel-table tr.title-fx-diamond td:first-child, .donor-row.title-fx-diamond { background-image: linear-gradient(105deg, rgba(8,47,73,.32), rgba(255,255,255,.28) 43%, rgba(103,232,249,.52) 50%, rgba(167,139,250,.24) 57%, rgba(8,47,73,.32)) !important; background-size: 260% 100% !important; }
#rank-table tr.title-fx-emerald td:nth-child(2), .per-channel-table tr.title-fx-emerald td:first-child, .donor-row.title-fx-emerald { background-image: linear-gradient(105deg, rgba(6,78,59,.3), rgba(255,255,255,.2) 43%, rgba(110,231,183,.48) 50%, rgba(45,212,191,.2) 57%, rgba(6,78,59,.3)) !important; background-size: 260% 100% !important; }
#rank-table tr.title-fx-platinum td:nth-child(2), .per-channel-table tr.title-fx-platinum td:first-child, .donor-row.title-fx-platinum { background-image: linear-gradient(105deg, rgba(49,46,129,.3), rgba(255,255,255,.3) 43%, rgba(216,180,254,.54) 50%, rgba(129,140,248,.23) 57%, rgba(49,46,129,.3)) !important; background-size: 260% 100% !important; }
#rank-table tr.title-fx-flame td:nth-child(2), .per-channel-table tr.title-fx-flame td:first-child, .donor-row.title-fx-flame { background-image: linear-gradient(105deg, rgba(127,29,29,.3), rgba(255,255,255,.2) 43%, rgba(251,146,60,.56) 50%, rgba(248,113,113,.23) 57%, rgba(127,29,29,.3)) !important; background-size: 260% 100% !important; }
#rank-table tr.title-fx-gold td:nth-child(2), .per-channel-table tr.title-fx-gold td:first-child, .donor-row.title-fx-gold { background-image: linear-gradient(105deg, rgba(113,63,18,.25), rgba(255,255,255,.22) 43%, rgba(253,224,71,.5) 50%, rgba(245,158,11,.2) 57%, rgba(113,63,18,.25)) !important; background-size: 260% 100% !important; }
#rank-table tr.title-fx-silver td:nth-child(2), .per-channel-table tr.title-fx-silver td:first-child, .donor-row.title-fx-silver { background-image: linear-gradient(105deg, rgba(51,65,85,.22), rgba(255,255,255,.38) 43%, rgba(226,232,240,.62) 50%, rgba(148,163,184,.2) 57%, rgba(51,65,85,.22)) !important; background-size: 260% 100% !important; }
[data-theme="light"] #rank-table tr.title-fx-diamond td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-diamond td:first-child, [data-theme="light"] .donor-row.title-fx-diamond { background-image: linear-gradient(105deg, rgba(224,242,254,.72), rgba(255,255,255,.92) 43%, rgba(103,232,249,.78) 50%, rgba(196,181,253,.56) 57%, rgba(224,242,254,.72)) !important; }
[data-theme="light"] #rank-table tr.title-fx-emerald td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-emerald td:first-child, [data-theme="light"] .donor-row.title-fx-emerald { background-image: linear-gradient(105deg, rgba(209,250,229,.76), rgba(255,255,255,.94) 43%, rgba(110,231,183,.72) 50%, rgba(153,246,228,.52) 57%, rgba(209,250,229,.76)) !important; }
[data-theme="light"] #rank-table tr.title-fx-platinum td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-platinum td:first-child, [data-theme="light"] .donor-row.title-fx-platinum { background-image: linear-gradient(105deg, rgba(237,233,254,.78), rgba(255,255,255,.95) 43%, rgba(216,180,254,.78) 50%, rgba(199,210,254,.55) 57%, rgba(237,233,254,.78)) !important; }
[data-theme="light"] #rank-table tr.title-fx-flame td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-flame td:first-child, [data-theme="light"] .donor-row.title-fx-flame { background-image: linear-gradient(105deg, rgba(255,237,213,.78), rgba(255,255,255,.94) 43%, rgba(251,146,60,.76) 50%, rgba(254,202,202,.55) 57%, rgba(255,237,213,.78)) !important; }
[data-theme="light"] #rank-table tr.title-fx-gold td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-gold td:first-child, [data-theme="light"] .donor-row.title-fx-gold { background-image: linear-gradient(105deg, rgba(254,243,199,.8), rgba(255,255,255,.95) 43%, rgba(253,224,71,.72) 50%, rgba(254,215,170,.52) 57%, rgba(254,243,199,.8)) !important; }
[data-theme="light"] #rank-table tr.title-fx-silver td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-silver td:first-child, [data-theme="light"] .donor-row.title-fx-silver { background-image: linear-gradient(105deg, rgba(226,232,240,.84), rgba(255,255,255,.98) 43%, rgba(203,213,225,.78) 50%, rgba(241,245,249,.72) 57%, rgba(226,232,240,.84)) !important; }

/* 키보드 워리어: 스캔라인 대신 절제된 전기 펄스 */
#rank-table tr.title-fx-electric td:nth-child(2), .per-channel-table tr.title-fx-electric td:first-child, .donor-row.title-fx-electric {
  background-image: linear-gradient(135deg, rgba(30,64,175,.22), rgba(255,255,255,.16) 48%, rgba(96,165,250,.34) 52%, rgba(30,64,175,.22)) !important;
  background-size: 180% 100% !important;
  animation: title-electric-pulse 4s ease-in-out infinite !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.78), 0 0 10px rgba(37,99,235,.24) !important;
}
[data-theme="light"] #rank-table tr.title-fx-electric td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-electric td:first-child, [data-theme="light"] .donor-row.title-fx-electric {
  background-image: linear-gradient(135deg, rgba(219,234,254,.72), rgba(255,255,255,.94) 48%, rgba(147,197,253,.62) 52%, rgba(219,234,254,.72)) !important;
  animation-name: title-electric-pulse-light !important;
  box-shadow: inset 0 0 0 1px #2563eb, 0 0 12px rgba(37,99,235,.3) !important;
}
[data-theme="dark"] #rank-table tr.title-fx-electric td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-electric td:first-child, [data-theme="dark"] .donor-row.title-fx-electric {
  animation-name: title-electric-pulse-dark !important;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.92), 0 0 15px rgba(37,99,235,.48) !important;
}
@keyframes title-electric-pulse {
  0%, 100% { filter: brightness(.98) saturate(1.05); }
  46%, 54% { filter: brightness(1.16) saturate(1.18); }
}
@keyframes title-electric-pulse-light {
  0%, 100% { filter: brightness(1) saturate(1.02); }
  46%, 54% { filter: brightness(1.08) saturate(1.18); }
}
@keyframes title-electric-pulse-dark {
  0%, 100% { filter: brightness(.96) saturate(1.04); }
  46%, 54% { filter: brightness(1.2) saturate(1.22); }
}
.lucky-packages { display: grid; gap: var(--space-5); margin: var(--space-4) 0; }
.lucky-mode-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.lucky-mode-tab { min-height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-2); color: var(--text-secondary); }
.lucky-mode-tab.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: var(--weight-bold); }
.lucky-package-group { padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-1); }
.lucky-package-group h3 { margin: 0 0 var(--space-1); }
.lucky-package-group > .muted { margin: 0 0 var(--space-3); }
.lucky-package-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 640px) { .lucky-package-group-grid { grid-template-columns: 1fr; } }
.lucky-package {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--space-4); min-height: 96px;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--text-primary);
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.lucky-package:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
/* scale-feedback: 눌렀을 때 살짝 들어가는 반응 */
.lucky-package:active:not(:disabled) { transform: scale(0.97); }
.lucky-package:disabled { opacity: 0.45; }
.lucky-package-sets { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.lucky-package-cost { font-size: var(--text-base); color: var(--primary); font-weight: var(--weight-semibold); }
.lucky-package-note { font-size: var(--text-xs); color: var(--text-tertiary); }
.lucky-copy-result { margin-top: var(--space-3); }
.lucky-history-details { margin-top: var(--space-2); font-size: var(--text-sm); }
.lucky-history-details summary { cursor: pointer; color: var(--primary); }
.lucky-history-details p { margin: var(--space-2) 0 0; }
.lucky-score-help { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-2); }
.lucky-score-help summary { cursor: pointer; font-weight: var(--weight-semibold); color: var(--primary); }
.lucky-score-help p { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; }
.lucky-admin-draw-set { white-space: nowrap; margin: 2px 0; }

/* ── 추첨기 ──────────────────────────────────────────────────────
   공이 통 안에서 "회전하며 뒤섞이고", 뽑힌 공은 아래 배출구를 통해
   결과 트레이로 떨어진다. 통과 결과가 세로로 이어져 있어서
   "여기서 나와 저기로 갔다"는 인과가 눈에 보인다(motion-meaning, continuity). */
.lucky-machine { margin: var(--space-5) 0; display: flex; flex-direction: column; align-items: center; }

.lucky-drum {
  position: relative;
  width: min(260px, 78vw); aspect-ratio: 1;
  border-radius: 50%;
  /* 유리 구체 — 상단 하이라이트 + 하단 그림자로 입체감 */
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.30), transparent 46%),
    radial-gradient(circle at 68% 82%, rgba(0, 0, 0, 0.22), transparent 52%),
    radial-gradient(circle at 50% 50%, var(--surface-1), var(--surface-3));
  border: 3px solid var(--border-strong-c);
  box-shadow:
    inset 0 0 34px rgba(0, 0, 0, 0.30),
    inset 0 6px 16px rgba(255, 255, 255, 0.10),
    0 10px 26px rgba(0, 0, 0, 0.20);
  overflow: hidden;
}
/* 유리 반사광 */
.lucky-drum::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16) 0%, transparent 38%);
}

/* 각 공은 중심을 축으로 서로 다른 반지름·속도·시작각으로 공전한다.
   안쪽 counter-rotate로 숫자는 늘 똑바로 서 있게 만든다. */
.lucky-tumble {
  position: absolute; left: 50%; top: 50%;
  margin: -17px 0 0 -17px; /* 공 크기(34px)의 절반 */
  animation: luckyOrbit var(--orbit-dur, 3s) linear infinite;
  animation-delay: var(--orbit-delay, 0s);
  will-change: transform;
}
.lucky-tumble > .lucky-ball { width: 34px; height: 34px; font-size: var(--text-sm); }
@keyframes luckyOrbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 60px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--orbit-r, 60px)) rotate(-360deg); }
}

/* 배출구 — 통 아래로 이어지는 관 */
.lucky-chute {
  width: 46px; height: 26px; margin-top: -2px;
  border: 3px solid var(--border-strong-c); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.18);
}
.lucky-machine-caption {
  margin-top: var(--space-3); font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ── 공 ──────────────────────────────────────────────────────────
   번호대별 색은 실제 추첨 방송과 같은 구분(1-10 노랑 / 11-20 파랑 /
   21-30 빨강 / 31-40 회색 / 41-45 초록). 테마와 무관하게 고정한다. */
.lucky-ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  font-weight: var(--weight-bold); font-size: var(--text-md);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: #1b1b1b;
  box-shadow:
    inset -4px -5px 9px rgba(0, 0, 0, 0.26),
    inset 4px 4px 8px rgba(255, 255, 255, 0.62),
    0 3px 7px rgba(0, 0, 0, 0.26);
}
.lucky-ball--y { background: radial-gradient(circle at 34% 28%, #ffe89a, #f0bd00); }
.lucky-ball--b { background: radial-gradient(circle at 34% 28%, #9fd4ff, #2477c4); color: #fff; }
.lucky-ball--r { background: radial-gradient(circle at 34% 28%, #ffa9a9, #d63a34); color: #fff; }
.lucky-ball--n { background: radial-gradient(circle at 34% 28%, #dcdcdc, #7d7d7d); color: #fff; }
.lucky-ball--g { background: radial-gradient(circle at 34% 28%, #a8e8b0, #23913c); color: #fff; }

/* 결과 공은 배출구에서 "떨어져 내려" 자리에 안착한다.
   위에서 아래로 = 통에서 나왔다는 공간적 인과. 스프링 느낌의 바운스로 마무리. */
.lucky-ball--drop {
  animation: luckyDrop 460ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: var(--drop-delay, 0ms);
}
@keyframes luckyDrop {
  0% { transform: translateY(-64px) scale(0.7); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── 결과 ─────────────────────────────────────────────────────── */
.lucky-result { margin-top: var(--space-4); }
.lucky-result:empty { display: none; }
.lucky-set {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3); margin-bottom: var(--space-2);
  border-radius: var(--radius-md); background: var(--surface-2);
}
.lucky-set-label {
  font-size: var(--text-xs); color: var(--text-tertiary);
  min-width: 42px; font-variant-numeric: tabular-nums;
}
.lucky-set-balls { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── 기록 ─────────────────────────────────────────────────────── */
.lucky-history-item {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--surface-2);
}
.lucky-history-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-sm);
}
.lucky-history-item .lucky-set { background: transparent; padding: 0; margin-bottom: var(--space-2); }
.lucky-history-item .lucky-ball { width: 36px; height: 36px; font-size: var(--text-sm); }

.lucky-notice-list {
  margin: 0; padding-left: var(--space-5); color: var(--text-secondary);
  font-size: var(--text-sm); line-height: var(--leading-relaxed);
}
.lucky-notice-list li { margin-bottom: var(--space-1); }

/* 관리자: 행운번호 이용 현황 요약 */
.lucky-stats-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .lucky-stats-grid { grid-template-columns: 1fr; } }

/* 뽑는 방법 설명 — 원리를 숨기지 않고 그대로 보여준다(연출이 결과를 정하지 않는다는 점 포함) */
.lucky-how-list {
  margin: var(--space-3) 0 0; padding-left: var(--space-5);
  color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed);
}
.lucky-how-list li { margin-bottom: var(--space-2); }
.lucky-how-list strong { color: var(--text-primary); }
.lucky-how-note {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-2); line-height: var(--leading-relaxed);
}

/* 행운번호 선택 흐름: 방식 선택 → 세트 선택 → 결과 확인 */
.lucky-balance-card {
  min-width: 170px; padding: var(--space-3) var(--space-4); text-align: right;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface-2), var(--primary-soft));
}
.lucky-balance-card .stat-value { font-size: var(--text-xl); }
.lucky-mode-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.lucky-mode-tab { border-color: transparent; border-radius: calc(var(--radius-lg) - 4px); font-weight: var(--weight-semibold); }
.lucky-mode-tab:hover:not(.active) { background: var(--surface-3); color: var(--text-primary); }
.lucky-mode-tab.active { box-shadow: 0 4px 14px rgba(31,158,219,.18); }
.lucky-package-group { position: relative; overflow: hidden; padding: var(--space-4); }
.lucky-package-group::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--primary); opacity: .8; }
.lucky-package-group--research::before { background: linear-gradient(90deg, #7c3aed, #22d3ee); }
.lucky-package-group--research { background: linear-gradient(145deg, var(--surface-1), rgba(124,58,237,.07)); }
.lucky-package-group--pension-research::before { background: linear-gradient(90deg, var(--secondary), var(--primary)); }
.lucky-package-group--pension-research {
  background: linear-gradient(145deg, var(--surface-1), color-mix(in srgb, var(--secondary-soft) 65%, transparent));
}
.lucky-package { position: relative; overflow: hidden; }
.lucky-package::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 420ms var(--ease-out);
}
.lucky-package:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lucky-package:hover:not(:disabled)::after { transform: translateX(120%); }
#lucky-draw-section.is-drawing .lucky-mode-tabs { opacity: .6; pointer-events: none; }
.lucky-result:not(:empty) {
  padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--surface-1), var(--primary-soft));
  animation: luckyResultIn 260ms var(--ease-out);
}
@keyframes luckyResultIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lucky-guide > summary, .lucky-notice > summary {
  cursor: pointer; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary);
}
.lucky-guide > summary::marker, .lucky-notice > summary::marker { color: var(--primary); }

/* 연금복권720+ 연구형 — 현재 카드/토큰을 그대로 쓰되 숫자 구조를 명확히 분리한다. */
.pension-research-note { border-left-color: var(--secondary); }
.lucky-drum.is-pension {
  background:
    radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--surface-1) 42%, transparent), transparent 46%),
    radial-gradient(circle at 68% 82%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 52%),
    radial-gradient(circle at 50% 50%, var(--surface-1), var(--secondary-soft));
}
.pension-digit {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(34px, 5vw, 48px); height: clamp(42px, 6vw, 56px);
  border: 1px solid var(--primary-border); border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--surface-1), var(--primary-soft));
  color: var(--text-primary); font-size: clamp(var(--text-md), 2vw, var(--text-xl));
  font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 var(--y2k-inner-border), var(--shadow-sm);
}
.pension-digit--tumble { width: 32px; height: 38px; font-size: var(--text-sm); }
.is-pension-result, .pension-history-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3);
}
.pension-result-card {
  min-width: 0; padding: var(--space-4); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-sm);
}
.pension-result-head, .pension-score-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
}
.pension-result-head { justify-content: space-between; margin-bottom: var(--space-3); }
.pension-set-index { color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pension-number-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pension-group-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 58px; min-height: 48px; padding-inline: var(--space-3);
  border: 1px solid var(--secondary-border); border-radius: var(--radius-md);
  background: var(--secondary-soft); color: var(--text-primary); font-size: var(--text-lg);
}
.pension-digits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(3px, .7vw, 8px); min-width: 0; flex: 1; }
.pension-digits .pension-digit { width: 100%; }
.pension-score-row { margin-top: var(--space-3); font-size: var(--text-sm); }
.pension-score-row > :first-child { color: var(--text-primary); }
.pension-score-meter {
  position: relative; flex: 1 1 100px; height: 8px; overflow: hidden;
  border-radius: var(--radius-full); background: var(--surface-3);
}
.pension-score-meter i {
  display: block; width: var(--pension-score); height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  animation: pensionMeterIn 420ms var(--ease-out) both;
}
@keyframes pensionMeterIn { from { width: 0; } }
.pension-analysis { margin-top: var(--space-3); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.pension-analysis summary { cursor: pointer; color: var(--primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.pension-feature-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
  margin: var(--space-3) 0 0;
}
.pension-feature-grid div { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--surface-2); }
.pension-feature-grid dt { color: var(--text-secondary); font-size: var(--text-xs); }
.pension-feature-grid dd { margin: 0; color: var(--text-primary); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.lucky-history-item .pension-result-card { padding: var(--space-3); }
@media (max-width: 640px) {
  .lucky-balance-card { width: 100%; min-width: 0; text-align: left; }
  .lucky-mode-tab { padding: var(--space-2); font-size: var(--text-sm); }
  .lucky-mode-tabs { grid-template-columns: 1fr; }
  .lucky-package-group { padding: var(--space-3); }
  .lucky-result:not(:empty) { padding: var(--space-3); }
  .is-pension-result, .pension-history-list { grid-template-columns: 1fr; }
  .pension-result-card { padding: var(--space-3); }
  .pension-number-row { gap: var(--space-2); }
  .pension-group-badge { min-width: 48px; min-height: 44px; padding-inline: var(--space-2); font-size: var(--text-md); }
  .pension-digit { min-width: 0; height: clamp(38px, 11vw, 48px); padding: 0; }
  .pension-score-row .muted { flex-basis: 100%; }
}

/* 움직임을 줄이도록 설정한 사용자에게는 회전·낙하를 멈추고 결과만 보여준다 */
@media (prefers-reduced-motion: reduce) {
  .lucky-tumble { animation: none !important; }
  .lucky-ball--drop { animation: none !important; }
  .lucky-package { transition: none; }
  .lucky-package::after, .lucky-result:not(:empty) { animation: none; transition: none; }
  .pension-score-meter i { animation: none; }
}

/* 등급별 기본 칭호 효과 — 관리자 설정 없이도 서로 다른 시각적 개성을 유지한다. */
#rank-table tr.title-fx-diamond td:nth-child(2), .per-channel-table tr.title-fx-diamond td:first-child, .donor-row.title-fx-diamond { background-image: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.72) 38%, rgba(34,211,238,.75) 50%, rgba(244,114,182,.62) 62%, transparent 82%); background-size: 260% 100%; animation: title-diamond-prism 3.2s linear infinite; }
#rank-table tr.title-fx-emerald td:nth-child(2), .per-channel-table tr.title-fx-emerald td:first-child, .donor-row.title-fx-emerald { background-image: linear-gradient(110deg, transparent 20%, rgba(110,231,183,.8) 48%, rgba(45,212,191,.55) 58%, transparent 82%); background-size: 250% 100%; animation: title-emerald-aurora 4s ease-in-out infinite; }
#rank-table tr.title-fx-platinum td:nth-child(2), .per-channel-table tr.title-fx-platinum td:first-child, .donor-row.title-fx-platinum { background-image: linear-gradient(120deg, transparent 15%, rgba(255,255,255,.75) 40%, rgba(192,132,252,.72) 52%, rgba(129,140,248,.6) 64%, transparent 86%); background-size: 280% 100%; animation: title-platinum-holo 3.6s linear infinite; }
#rank-table tr.title-fx-gold td:nth-child(2), .per-channel-table tr.title-fx-gold td:first-child, .donor-row.title-fx-gold { background-image: linear-gradient(110deg, transparent 22%, rgba(253,224,71,.8) 48%, rgba(245,158,11,.7) 56%, transparent 80%); background-size: 240% 100%; animation: title-gold-flare 3.8s ease-in-out infinite; }
#rank-table tr.title-fx-silver td:nth-child(2), .per-channel-table tr.title-fx-silver td:first-child, .donor-row.title-fx-silver { background-image: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.8) 48%, rgba(148,163,184,.66) 56%, transparent 82%); background-size: 230% 100%; animation: title-silver-chrome 4.2s linear infinite; }
#rank-table tr.title-fx-bronze td:nth-child(2), .per-channel-table tr.title-fx-bronze td:first-child, .donor-row.title-fx-bronze { background-image: linear-gradient(110deg, transparent 20%, rgba(251,146,60,.78) 50%, rgba(180,83,9,.62) 60%, transparent 84%); background-size: 240% 100%; animation: title-bronze-heat 3.9s ease-in-out infinite; }
#rank-table tr.title-fx-electric td:nth-child(2), .per-channel-table tr.title-fx-electric td:first-child, .donor-row.title-fx-electric { background-image: repeating-linear-gradient(105deg, transparent 0 18px, rgba(56,189,248,.62) 20px 23px, transparent 26px 44px); background-size: 180% 100%; animation: title-electric-scan 2.2s linear infinite; }
#rank-table tr.title-fx-flame td:nth-child(2), .per-channel-table tr.title-fx-flame td:first-child, .donor-row.title-fx-flame { background-image: linear-gradient(100deg, transparent 18%, rgba(251,146,60,.78) 44%, rgba(239,68,68,.68) 56%, rgba(250,204,21,.56) 66%, transparent 84%); background-size: 250% 100%; animation: title-flame-wave 2.8s ease-in-out infinite; }
@keyframes title-diamond-prism { to { background-position: -260% 0; filter: brightness(1.18) saturate(1.2); } }
@keyframes title-emerald-aurora { 0%,100% { background-position: 0 0; filter: hue-rotate(0deg) brightness(1); } 50% { background-position: 100% 0; filter: hue-rotate(12deg) brightness(1.15); } }
@keyframes title-platinum-holo { to { background-position: -280% 0; filter: brightness(1.2) saturate(1.25); } }
@keyframes title-gold-flare { 0%,100% { background-position: 0 0; box-shadow: inset 0 0 0 1px rgba(251,191,36,.5); } 50% { background-position: 100% 0; box-shadow: 0 0 14px rgba(251,191,36,.4), inset 0 0 0 1px rgba(253,224,71,.8); } }
@keyframes title-silver-chrome { to { background-position: -230% 0; filter: brightness(1.16); } }
@keyframes title-bronze-heat { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; filter: brightness(1.12) saturate(1.2); } }
@keyframes title-electric-scan { to { background-position: -180% 0; } }
@keyframes title-flame-wave { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; filter: brightness(1.18) saturate(1.25); } }
@media (prefers-reduced-motion: reduce) { [class*="title-fx-"] { animation: none !important; } }

/* 프리미엄 등급 강화 효과: 기존 음영 위에 얇은 결정광과 발광을 추가한다. */
#rank-table tr.title-fx-diamond td:nth-child(2), .per-channel-table tr.title-fx-diamond td:first-child, .donor-row.title-fx-diamond { background-image: linear-gradient(115deg, transparent 8%, rgba(255,255,255,.78) 28%, rgba(34,211,238,.86) 45%, rgba(244,114,182,.82) 56%, rgba(255,255,255,.72) 68%, transparent 90%), repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px); background-size: 280% 100%, 100% 100%; box-shadow: inset 0 0 0 1px rgba(103,232,249,.86), 0 0 18px rgba(34,211,238,.38); animation: title-diamond-ultra 3s linear infinite !important; }
#rank-table tr.title-fx-emerald td:nth-child(2), .per-channel-table tr.title-fx-emerald td:first-child, .donor-row.title-fx-emerald { background-image: linear-gradient(110deg, transparent 8%, rgba(167,243,208,.82) 30%, rgba(16,185,129,.78) 50%, rgba(45,212,191,.8) 66%, transparent 92%), radial-gradient(circle at 80% 20%, rgba(255,255,255,.3), transparent 26%); box-shadow: inset 0 0 0 1px rgba(52,211,153,.8), 0 0 16px rgba(16,185,129,.32); animation: title-emerald-ultra 3.6s ease-in-out infinite !important; }
#rank-table tr.title-fx-platinum td:nth-child(2), .per-channel-table tr.title-fx-platinum td:first-child, .donor-row.title-fx-platinum { background-image: linear-gradient(120deg, transparent 6%, rgba(255,255,255,.9) 25%, rgba(217,70,239,.8) 46%, rgba(129,140,248,.86) 58%, rgba(255,255,255,.8) 70%, transparent 94%), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 8px); box-shadow: inset 0 0 0 1px rgba(216,180,254,.9), 0 0 20px rgba(192,132,252,.42); animation: title-platinum-ultra 3.2s linear infinite !important; }
#rank-table tr.title-fx-gold td:nth-child(2), .per-channel-table tr.title-fx-gold td:first-child, .donor-row.title-fx-gold { box-shadow: inset 0 0 0 1px rgba(253,224,71,.92), 0 0 18px rgba(245,158,11,.42); animation: title-gold-ultra 3.4s ease-in-out infinite !important; }
#rank-table tr.title-fx-silver td:nth-child(2), .per-channel-table tr.title-fx-silver td:first-child, .donor-row.title-fx-silver { box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 14px rgba(148,163,184,.38); animation: title-silver-ultra 3.8s linear infinite !important; }
#rank-table tr.title-fx-electric td:nth-child(2), .per-channel-table tr.title-fx-electric td:first-child, .donor-row.title-fx-electric { box-shadow: inset 0 0 0 1px rgba(56,189,248,.9), 0 0 18px rgba(14,165,233,.42); animation: title-electric-ultra 1.8s linear infinite !important; }
#rank-table tr.title-fx-flame td:nth-child(2), .per-channel-table tr.title-fx-flame td:first-child, .donor-row.title-fx-flame { box-shadow: inset 0 0 0 1px rgba(251,146,60,.92), 0 0 18px rgba(239,68,68,.4); animation: title-flame-ultra 2.3s ease-in-out infinite !important; }
@keyframes title-diamond-ultra { to { background-position: -280% 0, 100% 0; filter: brightness(1.25) saturate(1.35); } }
@keyframes title-emerald-ultra { 0%,100% { background-position: 0 0, 0 0; filter: brightness(1); } 50% { background-position: 100% 0, 0 0; filter: brightness(1.2) saturate(1.25); } }
@keyframes title-platinum-ultra { to { background-position: -280% 0, 100% 0; filter: brightness(1.28) saturate(1.3); } }
@keyframes title-gold-ultra { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25) saturate(1.35); } }
@keyframes title-silver-ultra { to { background-position: -230% 0; filter: brightness(1.22); } }
@keyframes title-electric-ultra { to { background-position: -220% 0; filter: brightness(1.2) saturate(1.4); } }
@keyframes title-flame-ultra { 0%,100% { filter: brightness(1) saturate(1.1); } 50% { filter: brightness(1.28) saturate(1.45); } }

/* 테마별 대비 보정: 같은 칭호라도 라이트/다크 배경에서 묻히지 않게 별도 처리한다. */
[data-theme="light"] #rank-table tr.title-fx-diamond td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-diamond td:first-child { background-color: rgba(14,116,144,.14); box-shadow: inset 0 0 0 2px rgba(8,145,178,.58), 0 0 16px rgba(14,165,233,.28); }
[data-theme="light"] #rank-table tr.title-fx-emerald td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-emerald td:first-child { background-color: rgba(5,150,105,.14); box-shadow: inset 0 0 0 2px rgba(5,150,105,.52), 0 0 14px rgba(16,185,129,.24); }
[data-theme="light"] #rank-table tr.title-fx-platinum td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-platinum td:first-child { background-color: rgba(124,58,237,.14); box-shadow: inset 0 0 0 2px rgba(124,58,237,.5), 0 0 16px rgba(168,85,247,.28); }
[data-theme="light"] #rank-table tr.title-fx-gold td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-gold td:first-child { background-color: rgba(217,119,6,.15); box-shadow: inset 0 0 0 2px rgba(217,119,6,.52), 0 0 14px rgba(245,158,11,.24); }
[data-theme="light"] #rank-table tr.title-fx-silver td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-silver td:first-child { background-color: rgba(71,85,105,.13); box-shadow: inset 0 0 0 2px rgba(71,85,105,.45), 0 0 12px rgba(100,116,139,.22); }
[data-theme="dark"] #rank-table tr.title-fx-diamond td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-diamond td:first-child { box-shadow: inset 0 0 0 2px rgba(103,232,249,.95), 0 0 24px rgba(34,211,238,.62); }
[data-theme="dark"] #rank-table tr.title-fx-emerald td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-emerald td:first-child { box-shadow: inset 0 0 0 2px rgba(110,231,183,.9), 0 0 22px rgba(16,185,129,.58); }
[data-theme="dark"] #rank-table tr.title-fx-platinum td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-platinum td:first-child { box-shadow: inset 0 0 0 2px rgba(216,180,254,.95), 0 0 26px rgba(192,132,252,.64); }
[data-theme="dark"] #rank-table tr.title-fx-gold td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-gold td:first-child { box-shadow: inset 0 0 0 2px rgba(253,224,71,.95), 0 0 22px rgba(245,158,11,.6); }
[data-theme="dark"] #rank-table tr.title-fx-electric td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-electric td:first-child { box-shadow: inset 0 0 0 2px rgba(56,189,248,.95), 0 0 24px rgba(14,165,233,.68); }

/* 3초 랭킹 갱신과 무관하게 현재 애니메이션 위치를 유지한다. */
#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx { animation-delay: var(--fx-delay-flow, 0s) !important; }
#rank-table tr.title-fx td:nth-child(2)::after, .per-channel-table tr.title-fx td:first-child::after, .donor-row.title-fx::after { animation-delay: var(--fx-delay-spark, 0s) !important; }

/* 라이트 모드 전용 프리미엄 팔레트 — 흰 배경에서 등급별 색과 광택이 묻히지 않도록 별도 설계 */
[data-theme="light"] #rank-table tr.title-fx-diamond td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-diamond td:first-child { color: #075985; background-image: linear-gradient(105deg, #e0f2fe 0%, #bae6fd 28%, #67e8f9 48%, #f0abfc 58%, #dbeafe 76%, #e0f2fe 100%) !important; background-size: 280% 100% !important; border: 1px solid #38bdf8; box-shadow: inset 0 0 0 1px #fff, 0 0 15px rgba(14,165,233,.38) !important; }
[data-theme="light"] #rank-table tr.title-fx-emerald td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-emerald td:first-child { color: #065f46; background-image: linear-gradient(105deg, #d1fae5 0%, #86efac 30%, #34d399 50%, #a7f3d0 70%, #d1fae5 100%) !important; background-size: 260% 100% !important; border: 1px solid #10b981; box-shadow: inset 0 0 0 1px #ecfdf5, 0 0 14px rgba(16,185,129,.34) !important; }
[data-theme="light"] #rank-table tr.title-fx-platinum td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-platinum td:first-child { color: #581c87; background-image: linear-gradient(105deg, #f3e8ff 0%, #ddd6fe 28%, #c084fc 48%, #f0abfc 60%, #ede9fe 78%, #f3e8ff 100%) !important; background-size: 280% 100% !important; border: 1px solid #a855f7; box-shadow: inset 0 0 0 1px #fff, 0 0 17px rgba(168,85,247,.4) !important; }
[data-theme="light"] #rank-table tr.title-fx-gold td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-gold td:first-child { color: #92400e; background-image: linear-gradient(105deg, #fef3c7 0%, #fde68a 30%, #fbbf24 50%, #fff7ed 62%, #fef3c7 100%) !important; background-size: 250% 100% !important; border: 1px solid #f59e0b; box-shadow: inset 0 0 0 1px #fff, 0 0 15px rgba(245,158,11,.36) !important; }
[data-theme="light"] #rank-table tr.title-fx-silver td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-silver td:first-child { color: #1e293b; background-image: linear-gradient(105deg, #f8fafc 0%, #cbd5e1 30%, #ffffff 50%, #94a3b8 62%, #f8fafc 100%) !important; background-size: 240% 100% !important; border: 1px solid #64748b; box-shadow: inset 0 0 0 1px #fff, 0 0 13px rgba(100,116,139,.32) !important; }
[data-theme="light"] #rank-table tr.title-fx-electric td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-electric td:first-child { color: #1e3a8a; background-image: repeating-linear-gradient(105deg, #dbeafe 0 16px, #60a5fa 18px 22px, #eff6ff 24px 38px) !important; background-size: 200% 100% !important; border: 1px solid #2563eb; box-shadow: inset 0 0 0 1px #bfdbfe, 0 0 16px rgba(37,99,235,.38) !important; }
[data-theme="light"] #rank-table tr.title-fx-flame td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-flame td:first-child { color: #9a3412; background-image: linear-gradient(105deg, #ffedd5 0%, #fdba74 28%, #fb923c 48%, #fca5a5 62%, #ffedd5 100%) !important; background-size: 250% 100% !important; border: 1px solid #ea580c; box-shadow: inset 0 0 0 1px #fff7ed, 0 0 16px rgba(234,88,12,.36) !important; }

/* 최종 등급 hierarchy: 화려함의 단계가 확실히 느껴지도록 강도/속도를 차등화 */
#rank-table tr.title-fx-diamond td:nth-child(2), .per-channel-table tr.title-fx-diamond td:first-child { animation-duration: 2.4s !important; filter: saturate(1.35); }
#rank-table tr.title-fx-emerald td:nth-child(2), .per-channel-table tr.title-fx-emerald td:first-child { animation-duration: 2.8s !important; filter: saturate(1.24); }
#rank-table tr.title-fx-platinum td:nth-child(2), .per-channel-table tr.title-fx-platinum td:first-child { animation-duration: 3.1s !important; filter: saturate(1.2); }
#rank-table tr.title-fx-flame td:nth-child(2), .per-channel-table tr.title-fx-flame td:first-child { animation-duration: 2.25s !important; filter: saturate(1.3); box-shadow: inset 0 0 0 2px rgba(251,146,60,.95), 0 0 24px rgba(239,68,68,.58) !important; }
#rank-table tr.title-fx-gold td:nth-child(2), .per-channel-table tr.title-fx-gold td:first-child { animation-duration: 3.5s !important; filter: saturate(1.12); }
#rank-table tr.title-fx-silver td:nth-child(2), .per-channel-table tr.title-fx-silver td:first-child { animation-duration: 4.2s !important; filter: saturate(1.05); }
#rank-table tr.title-fx-electric td:nth-child(2), .per-channel-table tr.title-fx-electric td:first-child { animation-duration: 4s !important; filter: saturate(1.05); box-shadow: inset 0 0 0 1px rgba(59,130,246,.65), 0 0 8px rgba(37,99,235,.2) !important; }
[data-theme="light"] #rank-table tr.title-fx-diamond td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-diamond td:first-child { box-shadow: inset 0 0 0 2px #0ea5e9, 0 0 24px rgba(14,165,233,.58) !important; }
[data-theme="light"] #rank-table tr.title-fx-emerald td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-emerald td:first-child { box-shadow: inset 0 0 0 2px #059669, 0 0 20px rgba(16,185,129,.48) !important; }
[data-theme="light"] #rank-table tr.title-fx-platinum td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-platinum td:first-child { box-shadow: inset 0 0 0 2px #9333ea, 0 0 18px rgba(168,85,247,.45) !important; }
[data-theme="light"] #rank-table tr.title-fx-flame td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-flame td:first-child { box-shadow: inset 0 0 0 2px #ea580c, 0 0 22px rgba(234,88,12,.52) !important; }
[data-theme="dark"] #rank-table tr.title-fx-diamond td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-diamond td:first-child { box-shadow: inset 0 0 0 2px rgba(103,232,249,1), 0 0 30px rgba(34,211,238,.8) !important; }
[data-theme="dark"] #rank-table tr.title-fx-emerald td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-emerald td:first-child { box-shadow: inset 0 0 0 2px rgba(110,231,183,1), 0 0 25px rgba(16,185,129,.7) !important; }
[data-theme="dark"] #rank-table tr.title-fx-platinum td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-platinum td:first-child { box-shadow: inset 0 0 0 2px rgba(216,180,254,1), 0 0 22px rgba(192,132,252,.72) !important; }
[data-theme="dark"] #rank-table tr.title-fx-flame td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-flame td:first-child { box-shadow: inset 0 0 0 2px rgba(251,146,60,1), 0 0 28px rgba(239,68,68,.76) !important; }

/* 칭호 디자인 스튜디오: 저장된 스타일은 칭호가 있는 행/배지에만 적용된다. */
.admin-main #tab-title-design { display: none !important; }
.title-style {
  --title-text: #fff;
  --title-bg: #2563eb;
  --title-accent: #67e8f9;
  --title-speed: 50;
  --title-intensity: 60;
  color: inherit;
}
[data-theme="dark"] .title-style { --title-text: var(--title-text-dark, #fff); --title-bg: var(--title-bg-dark, #172554); --title-accent: var(--title-accent-dark, #67e8f9); }
.title-badge.title-style { display: inline-block; padding: .12rem .48rem; border-radius: 999px; color: var(--title-text); background: var(--title-bg); }
.title-style-cell { position: relative; overflow: hidden; background-color: color-mix(in srgb, var(--title-bg) 14%, transparent); background-repeat: no-repeat; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--title-accent) 35%, transparent); }
.title-style-cell, .title-badge.title-style { font-weight: var(--title-weight, 700); letter-spacing: var(--title-spacing, 0); }
.title-style-cell, .title-badge.title-style { will-change: background-position, filter, box-shadow; }
.title-style-cell.title-style-wave, .title-style-cell.title-style-shine, .title-style-cell.title-style-liquid, .title-style-cell.title-style-laser { background-image: linear-gradient(calc(var(--title-angle) * 1deg), transparent 30%, color-mix(in srgb, var(--title-accent) 72%, white) 50%, transparent 70%); background-size: 240% 100%; animation: title-style-sweep var(--title-duration, 5s) linear infinite; }
.title-style-cell.title-style-sparkle::after, .title-style-cell.title-style-twinkle::after, .title-style-cell.title-style-crystal::after, .title-style-cell.title-style-gem::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--title-accent) 85%, white), transparent 18%); opacity: 0; animation: title-style-sparkle-overlay var(--title-duration, 5s) ease-in-out infinite; animation-delay: var(--title-delay, 0s); }
.title-style-wave, .title-style-shine, .title-style-liquid, .title-style-laser {
  background-image: linear-gradient(calc(var(--title-angle) * 1deg), transparent 35%, color-mix(in srgb, var(--title-accent) 75%, white) 50%, transparent 65%);
  background-size: 240% 100%; animation: title-style-sweep var(--title-duration, 5s) linear infinite; animation-delay: var(--title-delay, 0s);
}
.title-style-sparkle, .title-style-twinkle, .title-style-crystal, .title-style-gem, .title-style-confetti { animation: title-style-sparkle var(--title-duration, 5s) ease-in-out infinite; animation-delay: var(--title-delay, 0s); }
.title-style-pulse, .title-style-breathe, .title-style-glow, .title-style-neon { animation: title-style-pulse var(--title-duration, 5s) ease-in-out infinite; animation-delay: var(--title-delay, 0s); }
.title-style-hologram, .title-style-prism, .title-style-rainbow, .title-style-aurora, .title-style-galaxy { background-image: linear-gradient(110deg, var(--title-bg), var(--title-accent), #e879f9, var(--title-bg)); background-size: 300% 100%; animation: title-style-spectrum var(--title-duration, 5s) linear infinite; animation-delay: var(--title-delay, 0s); }
.title-style-scanline, .title-style-pixel { background-image: repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--title-accent) 35%, transparent) 4px 5px); }
.title-style-electric, .title-style-glitch, .title-style-strobe { animation: title-style-flicker calc(3s - var(--title-speed) * .01s) steps(2, end) infinite; }
.title-style-flame { background-image: linear-gradient(0deg, #f97316, var(--title-bg) 50%, var(--title-accent)); }
.title-style-frost { background-image: linear-gradient(135deg, #e0f2fe, var(--title-bg), var(--title-accent)); }
.title-style-flare, .title-style-trail, .title-style-orbit { box-shadow: 0 0 calc(4px + var(--title-intensity) * .12px) color-mix(in srgb, var(--title-accent) 65%, transparent), inset 0 0 0 1px var(--title-accent); }
@keyframes title-style-sweep { to { background-position: -200% 0; } }
@keyframes title-style-sparkle { 0%,100% { filter: brightness(.95); } 50% { filter: brightness(1.35); } }
@keyframes title-style-pulse { 0%,100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--title-accent) 35%, transparent); } 50% { box-shadow: 0 0 calc(3px + var(--title-intensity) * .12px) color-mix(in srgb, var(--title-accent) 70%, transparent); } }
@keyframes title-style-spectrum { to { background-position: -300% 0; } }
@keyframes title-style-flicker { 0%,85%,100% { opacity: 1; } 88% { opacity: .7; } 92% { opacity: 1; } }
@keyframes title-style-sparkle-overlay { 0%,100% { opacity: 0; transform: translateX(-18%); } 50% { opacity: .72; transform: translateX(18%); } }
@media (prefers-reduced-motion: reduce) { .title-style { animation: none !important; } }

.title-design-preview { display:flex; align-items:center; justify-content:center; min-height:150px; padding:2rem; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-soft); }
.title-preview-rank { width:2.2rem; height:2.2rem; display:grid; place-items:center; margin-right:.5rem; border:1px solid var(--border); border-radius:50%; font-weight:700; }
.title-design-preview .title-style-cell { min-width:220px; padding:.9rem 1rem; border-radius:var(--radius-md); }
.title-preview-name { margin-right:.45rem; }
.title-design-preview .title-badge { font-size:1.15rem; }
.title-design-grid { display:grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap:1rem; }
@media (max-width: 720px) { .title-design-grid { grid-template-columns:1fr; } }

/* 전기 펄스 최종 우선 규칙: 뒤쪽의 예전 scan 규칙보다 마지막에 적용한다. */
#rank-table tr.title-fx-electric td:nth-child(2), .per-channel-table tr.title-fx-electric td:first-child, .donor-row.title-fx-electric,
.title-style-cell.title-style-electric, .title-badge.title-badge-electric {
  background-image: linear-gradient(135deg, rgba(30,64,175,.22), rgba(255,255,255,.16) 48%, rgba(96,165,250,.34) 52%, rgba(30,64,175,.22)) !important;
  background-size: 180% 100% !important;
  animation: title-electric-pulse 4s ease-in-out infinite !important;
}
[data-theme="light"] #rank-table tr.title-fx-electric td:nth-child(2), [data-theme="light"] .per-channel-table tr.title-fx-electric td:first-child, [data-theme="light"] .donor-row.title-fx-electric,
[data-theme="light"] .title-style-cell.title-style-electric, [data-theme="light"] .title-badge.title-badge-electric {
  background-image: linear-gradient(135deg, rgba(219,234,254,.72), rgba(255,255,255,.94) 48%, rgba(147,197,253,.62) 52%, rgba(219,234,254,.72)) !important;
  animation-name: title-electric-pulse-light !important;
}
[data-theme="dark"] #rank-table tr.title-fx-electric td:nth-child(2), [data-theme="dark"] .per-channel-table tr.title-fx-electric td:first-child, [data-theme="dark"] .donor-row.title-fx-electric,
[data-theme="dark"] .title-style-cell.title-style-electric, [data-theme="dark"] .title-badge.title-badge-electric {
  animation-name: title-electric-pulse-dark !important;
}
.title-style-electric { box-shadow: inset 0 0 0 1px rgba(96,165,250,.8), 0 0 11px rgba(37,99,235,.26) !important; }

/* 라이트 모드 플래티넘 보정: 흰 배경에서도 보라 광택의 이동이 분명하게 보이도록 한다. */
[data-theme="light"] #rank-table tr.title-fx-platinum td:nth-child(2),
[data-theme="light"] .per-channel-table tr.title-fx-platinum td:first-child,
[data-theme="light"] .donor-row.title-fx-platinum,
[data-theme="light"] .title-style-cell.title-style-platinum {
  color: #4c1d95 !important;
  background-image: linear-gradient(105deg, #ddd6fe 0%, #c4b5fd 34%, #7c3aed 48%, #f5d0fe 55%, #a78bfa 68%, #ede9fe 100%) !important;
  background-size: 260% 100% !important;
  border-color: #7c3aed !important;
  box-shadow: inset 0 0 0 2px rgba(124,58,237,.72), 0 0 20px rgba(124,58,237,.42) !important;
}

/* 플래티넘은 상위 등급답게 광택 왕복을 조금 더 빠르게 */
#rank-table tr.title-fx-platinum td:nth-child(2), .per-channel-table tr.title-fx-platinum td:first-child,
.donor-row.title-fx-platinum, .title-style-cell.title-style-platinum {
  animation-duration: 2.2s !important;
}

/* 전체 등급의 왕복 속도를 함께 높이되, 등급별 속도 차이는 유지한다. */
#rank-table tr.title-fx-diamond td:nth-child(2), .per-channel-table tr.title-fx-diamond td:first-child, .donor-row.title-fx-diamond { animation-duration: 2s !important; }
#rank-table tr.title-fx-emerald td:nth-child(2), .per-channel-table tr.title-fx-emerald td:first-child, .donor-row.title-fx-emerald { animation-duration: 2.2s !important; }
#rank-table tr.title-fx-platinum td:nth-child(2), .per-channel-table tr.title-fx-platinum td:first-child, .donor-row.title-fx-platinum, .title-style-cell.title-style-platinum { animation-duration: 2s !important; }
#rank-table tr.title-fx-flame td:nth-child(2), .per-channel-table tr.title-fx-flame td:first-child, .donor-row.title-fx-flame { animation-duration: 1.9s !important; }
#rank-table tr.title-fx-gold td:nth-child(2), .per-channel-table tr.title-fx-gold td:first-child, .donor-row.title-fx-gold { animation-duration: 2.6s !important; }
#rank-table tr.title-fx-silver td:nth-child(2), .per-channel-table tr.title-fx-silver td:first-child, .donor-row.title-fx-silver { animation-duration: 3s !important; }
#rank-table tr.title-fx-electric td:nth-child(2), .per-channel-table tr.title-fx-electric td:first-child, .donor-row.title-fx-electric, .title-style-cell.title-style-electric { animation-duration: 2.8s !important; }

/* 모든 칭호 음영은 끝점에서 튀지 않고 좌우로 왕복한다. */
#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx,
.title-style-cell.title-style-wave, .title-style-cell.title-style-shine, .title-style-cell.title-style-liquid,
.title-style-cell.title-style-laser, .title-style-wave, .title-style-shine, .title-style-liquid, .title-style-laser {
  animation-direction: alternate !important;
  animation-timing-function: ease-in-out !important;
}

@media (max-width: 640px) {
  .lucky-ball { width: 40px; height: 40px; font-size: var(--text-base); }
  .lucky-history-item .lucky-ball { width: 32px; height: 32px; font-size: var(--text-xs); }
  .lucky-set { gap: var(--space-2); }
  .lucky-set-balls { gap: 6px; }
}

/* ==================================================================
   NEO CONSOLE · RETRO-FUTURISTIC SYSTEM
   ------------------------------------------------------------------
   초기 디지털 콘솔의 선명한 신호 언어를 현대 운영 서비스의 밀도와
   접근성으로 재해석한다. 기능 DOM/선택자 계약은 그대로 유지한다.
   ================================================================== */

:root,
[data-theme="dark"] {
  --font-sans: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif;
  --font-display: Orbitron, Pretendard, "Pretendard Variable", sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --neo-black: #070812;
  --neo-navy: #0c1020;
  --neo-panel: #11172a;
  --neo-panel-2: #171f35;
  --neo-cyan: #00ffff;
  --neo-magenta: #ff006e;
  --neo-violet: #7257ff;
  --neo-amber: #ffb000;
  --neo-grid: rgba(0, 255, 255, 0.045);

  --bg: var(--neo-black);
  --bg-elevated: var(--neo-navy);
  --surface-1: rgba(17, 23, 42, 0.88);
  --surface-2: rgba(23, 31, 53, 0.9);
  --surface-3: #202a45;
  --surface-hover: #1d2944;
  --surface-active: #243250;
  --border-subtle: rgba(127, 233, 255, 0.1);
  --border-default: rgba(127, 233, 255, 0.2);
  --border-strong-c: rgba(127, 233, 255, 0.38);
  --text-primary: #f1f7ff;
  --text-secondary: #aab8cd;
  --text-tertiary: #71819b;
  --text-inverse: #061017;
  --activity-high-fg: #f4fbff;
  --primary: var(--neo-cyan);
  --primary-hover: #6dffff;
  --primary-active: #00d9e8;
  --primary-fg: #061017;
  --primary-soft: rgba(0, 255, 255, 0.09);
  --primary-soft-strong: rgba(0, 255, 255, 0.16);
  --primary-border: rgba(0, 255, 255, 0.38);
  --secondary: var(--neo-magenta);
  --secondary-soft: rgba(255, 0, 110, 0.1);
  --secondary-border: rgba(255, 0, 110, 0.34);
  --success: #4dffb8;
  --success-fg: #051a12;
  --success-soft: rgba(77, 255, 184, 0.1);
  --success-soft-strong: rgba(77, 255, 184, 0.18);
  --success-border: rgba(77, 255, 184, 0.35);
  --warning: var(--neo-amber);
  --warning-fg: #1b1000;
  --warning-soft: rgba(255, 176, 0, 0.1);
  --warning-soft-strong: rgba(255, 176, 0, 0.18);
  --warning-border: rgba(255, 176, 0, 0.35);
  --error: #ff5277;
  --error-fg: #20050b;
  --error-soft: rgba(255, 82, 119, 0.1);
  --error-soft-strong: rgba(255, 82, 119, 0.18);
  --error-border: rgba(255, 82, 119, 0.36);
  --header-bg: rgba(7, 8, 18, 0.88);
  --overlay-bg: rgba(2, 3, 10, 0.82);
  --skeleton-base: #151d31;
  --skeleton-shine: #263756;
  --gold-rich: #ffd25a;
  --gold-bright: #ffecad;
  --gold-line: linear-gradient(90deg, transparent, var(--neo-cyan), var(--neo-violet), var(--neo-magenta), transparent);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 22px 54px rgba(0, 0, 0, 0.42);
  --shadow-xl: 0 34px 80px rgba(0, 0, 0, 0.55);
  --shadow-gold-glow: 0 0 0 1px rgba(0, 255, 255, 0.22), 0 14px 36px rgba(0, 0, 0, 0.35);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --duration-slow: 360ms;

  /* 기존 하위 컴포넌트가 참조하는 레거시 토큰도 같은 콘솔 팔레트로 귀속한다. */
  --y2k-pink: var(--neo-magenta);
  --y2k-pink-soft: var(--secondary-soft);
  --y2k-violet: var(--neo-violet);
  --y2k-violet-soft: rgba(114, 87, 255, 0.11);
  --y2k-cobalt: #167dff;
  --y2k-cobalt-deep: #0759c7;
  --y2k-cobalt-soft: rgba(22, 125, 255, 0.12);
  --y2k-aqua: var(--neo-cyan);
  --y2k-ice: #e8fbff;
  --y2k-chrome-hi: rgba(232, 251, 255, 0.36);
  --y2k-chrome-mid: rgba(127, 233, 255, 0.18);
  --y2k-chrome-low: rgba(7, 8, 18, 0.7);
  --y2k-grid-line: var(--neo-grid);
  --y2k-panel: var(--surface-1);
  --y2k-panel-strong: var(--surface-2);
  --y2k-panel-glow: rgba(0, 255, 255, 0.13);
  --y2k-chrome: var(--header-bg);
  --y2k-button: linear-gradient(135deg, #00dce8, var(--neo-cyan));
  --y2k-button-hover: linear-gradient(135deg, #66ffff, #00e9f7);
  --y2k-secondary-button: var(--surface-2);
  --y2k-aurora: linear-gradient(90deg, var(--neo-cyan), var(--neo-violet), var(--neo-magenta));
  --y2k-chrome-border: var(--border-default);
  --y2k-inner-border: rgba(232, 251, 255, 0.08);
  --y2k-text-shadow: none;
  --y2k-frame-shadow: var(--shadow-md);
}

[data-theme="light"] {
  --bg: #edf3f8;
  --bg-elevated: #e4edf5;
  --surface-1: rgba(248, 252, 255, 0.93);
  --surface-2: rgba(231, 240, 248, 0.94);
  --surface-3: #d8e5ef;
  --surface-hover: #deebf4;
  --surface-active: #d2e2ee;
  --border-subtle: rgba(8, 58, 88, 0.09);
  --border-default: rgba(8, 58, 88, 0.17);
  --border-strong-c: rgba(8, 58, 88, 0.32);
  --text-primary: #091724;
  --text-secondary: #40556a;
  /* Small helper copy must remain readable on both the page and pale cards. */
  --text-tertiary: #52697d;
  --text-inverse: #f4fbff;
  --activity-high-fg: #f4fbff;
  /* Darker cyan keeps compact links, badges and table headers above 4.5:1. */
  --primary: #006b7b;
  --primary-hover: #005867;
  --primary-active: #004752;
  --primary-fg: #f4fbff;
  --primary-soft: rgba(0, 127, 145, 0.08);
  --primary-soft-strong: rgba(0, 127, 145, 0.15);
  --primary-border: rgba(0, 127, 145, 0.3);
  --secondary: #c40058;
  --secondary-soft: rgba(196, 0, 88, 0.08);
  --secondary-border: rgba(196, 0, 88, 0.27);
  --success: #087a56;
  --success-soft: rgba(8, 122, 86, 0.08);
  --success-soft-strong: rgba(8, 122, 86, 0.15);
  --success-border: rgba(8, 122, 86, 0.28);
  --warning: #9a6200;
  --warning-soft: rgba(154, 98, 0, 0.08);
  --warning-soft-strong: rgba(154, 98, 0, 0.15);
  --warning-border: rgba(154, 98, 0, 0.28);
  --error: #c72e53;
  --error-soft: rgba(199, 46, 83, 0.08);
  --error-soft-strong: rgba(199, 46, 83, 0.15);
  --error-border: rgba(199, 46, 83, 0.28);
  --header-bg: rgba(237, 243, 248, 0.9);
  --overlay-bg: rgba(9, 23, 36, 0.48);
  --skeleton-base: #d9e6ef;
  --skeleton-shine: #f2f8fc;
  --gold-rich: #8a5b00;
  --gold-bright: #b77a00;
  --shadow-sm: 0 4px 14px rgba(12, 45, 67, 0.07);
  --shadow-md: 0 14px 34px rgba(12, 45, 67, 0.1);
  --shadow-lg: 0 24px 56px rgba(12, 45, 67, 0.14);
  --shadow-xl: 0 34px 80px rgba(12, 45, 67, 0.18);
  --y2k-cobalt: #007f91;
  --y2k-cobalt-deep: #005562;
  --y2k-cobalt-soft: var(--primary-soft);
  --y2k-aqua: #00a7b8;
  --y2k-ice: #f4fbff;
  --y2k-chrome-hi: rgba(255, 255, 255, 0.72);
  --y2k-chrome-mid: rgba(8, 58, 88, 0.16);
  --y2k-chrome-low: rgba(8, 58, 88, 0.09);
  --y2k-grid-line: rgba(0, 127, 145, 0.035);
  --y2k-panel-glow: rgba(0, 127, 145, 0.1);
  --y2k-button: linear-gradient(135deg, #006f80, #008d9e);
  --y2k-button-hover: linear-gradient(135deg, #005d6d, #007f91);
  --y2k-inner-border: rgba(255, 255, 255, 0.55);
}

html { background: var(--bg); }
body {
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% -5%, rgba(59, 130, 246, 0.24), transparent 32%),
    radial-gradient(circle at 92% 16%, rgba(168, 85, 247, 0.2), transparent 30%),
    radial-gradient(circle at 52% 108%, rgba(236, 72, 153, 0.14), transparent 36%),
    var(--bg);
  background-attachment: fixed;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.022) 0, rgba(0, 255, 255, 0.022) 1px, transparent 1px, transparent 4px),
    linear-gradient(var(--y2k-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--y2k-grid-line) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.025em; }
.card h2, .card h3, header h1 { font-family: var(--font-display); }
h1 { font-size: clamp(19px, 1.8vw, 25px); }
h2 { font-size: clamp(19px, 2vw, 26px); }
h3 { font-size: clamp(16px, 1.4vw, 20px); }
p, li { text-wrap: pretty; }
.points, .rank-num, .stat-value, td:not(:first-child) { font-variant-numeric: tabular-nums; }
.stat-value, .points { font-family: var(--font-mono); }

/* 시스템 도크 */
header {
  isolation: isolate;
  padding: 13px clamp(16px, 2.8vw, 38px);
  border: 0;
  border-bottom: 1px solid var(--primary-border);
  background: var(--header-bg);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16), inset 0 -1px 0 rgba(255, 0, 110, 0.13);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
header::before {
  content: '';
  left: 0;
  top: auto;
  bottom: -1px;
  width: 42%;
  height: 2px;
  transform: none;
  border-radius: 0;
  background: linear-gradient(90deg, var(--neo-cyan), var(--neo-violet), transparent);
  box-shadow: 0 0 16px var(--neo-cyan);
}
header::after { left: auto; right: 0; width: 34%; height: 2px; background: linear-gradient(90deg, transparent, var(--neo-magenta)); opacity: .85; }
.logo-link { gap: 10px; color: var(--text-primary); font-weight: 800; letter-spacing: -.035em; }
.logo-link:hover { opacity: 1; color: var(--primary); filter: none; }
.badge {
  padding: 4px 7px;
  border: 1px solid var(--primary-border);
  border-radius: 5px;
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 12px var(--primary-soft);
  text-shadow: 0 0 10px var(--primary-soft-strong);
  font-family: var(--font-mono);
}
.header-nav { gap: 10px; }
.main-nav { gap: 5px; }
.nav-link {
  min-height: 40px;
  padding-inline: 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}
.nav-link:hover { color: var(--text-primary); border-color: var(--border-default); background: var(--surface-2); transform: translateY(-1px); }
.nav-link.active, .nav-active {
  color: var(--primary);
  border-color: var(--primary-border);
  background: linear-gradient(135deg, var(--primary-soft-strong), rgba(114, 87, 255, .1));
  box-shadow: inset 0 -2px 0 var(--primary), 0 0 18px var(--primary-soft);
}
.theme-toggle, .auth-area > button, .header-nav > button { border-color: var(--border-default); border-radius: 7px; background: var(--surface-2); box-shadow: none; }

/* SIGNAL RAIL — 채널별 실시간 신호를 한 줄의 관제 스트립으로 표현 */
.channel-nav {
  gap: 7px;
  padding: 9px clamp(16px, 2.8vw, 38px) 10px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  box-shadow: inset 0 -1px 0 rgba(0, 255, 255, .04);
}
.channel-nav a {
  min-height: 44px;
  padding: 4px 12px 4px 5px;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  color: var(--text-secondary);
  background: var(--surface-1);
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.channel-nav a:hover { color: var(--text-primary); border-color: var(--primary-border); background: var(--surface-hover); filter: none; transform: translateY(-1px); }
.channel-nav a.is-live { color: var(--text-primary); border-color: var(--success-border); background: linear-gradient(135deg, var(--success-soft), var(--surface-1)); }
.channel-nav a.active { color: var(--primary); border-color: var(--primary-border); background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary), 0 0 16px var(--primary-soft); }
.channel-avatar, .streamer-page-avatar { border: 2px solid var(--surface-1); outline: 1px solid var(--primary-border); box-shadow: 0 0 14px var(--primary-soft); }
.live-dot.live-on, .trust-dot-ok { box-shadow: 0 0 0 2px var(--success-soft), 0 0 9px var(--success); }
.live-dot.live-blocked { box-shadow: 0 0 0 2px var(--warning-soft), 0 0 9px var(--warning); }
.live-dot.live-retired { box-shadow: 0 0 0 2px var(--error-soft), 0 0 9px var(--error); }

main { width: min(100%, calc(var(--content-width) + 48px)); padding: clamp(24px, 4vw, 50px) clamp(16px, 3vw, 36px) 72px; }
.has-channel-sidebar { margin-inline: auto; }
#channel-status-section { position: static; width: auto; max-height: none; overflow: visible; transform: none; }
.login-card { margin-inline: auto; }

/* HUD 패널 */
.card, .ob-card, .ogq-banner {
  border: 1px solid var(--border-default);
  background:
    linear-gradient(135deg, var(--primary-soft) 0, transparent 22%),
    var(--surface-1);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--y2k-inner-border);
}
.card {
  position: relative;
  overflow: clip;
  padding: clamp(20px, 2.8vw, 32px);
  margin-bottom: clamp(18px, 2.4vw, 28px);
  border-radius: var(--radius-lg);
}
.card::before { inset: 0 auto 0 0; width: 3px; height: auto; border-radius: 0; background: linear-gradient(180deg, var(--neo-cyan), var(--neo-violet), var(--neo-magenta)); opacity: .82; }
.card::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 46px;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(225deg, var(--primary-border) 0 1px, transparent 1px 10px, var(--primary-border) 10px 11px, transparent 11px);
  opacity: .65;
}
.card:hover { border-color: var(--primary-border); box-shadow: var(--shadow-lg), 0 0 28px var(--primary-soft); }
.card h2 { padding-left: 15px; margin-bottom: 4px; }
.card h2::before { top: 3px; bottom: 3px; width: 4px; border-radius: 1px; background: var(--primary); box-shadow: 0 0 12px var(--primary); }
.card-head { align-items: center; gap: 16px; }
#logged-out-hero, #my-stats { background-image: linear-gradient(var(--neo-grid) 1px, transparent 1px), linear-gradient(90deg, var(--neo-grid) 1px, transparent 1px), linear-gradient(135deg, var(--primary-soft), transparent 55%); background-size: 28px 28px, 28px 28px, auto; }
#logged-out-hero::after { content: ''; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--secondary-soft), transparent 68%); opacity: 1; filter: none; }

button, .btn-link {
  min-height: 42px;
  padding-inline: 16px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  color: var(--primary-fg);
  background: var(--y2k-button);
  box-shadow: 0 0 18px var(--primary-soft), inset 0 1px 0 rgba(255,255,255,.18);
}
button:hover:not(:disabled), .btn-link:hover { background: var(--y2k-button-hover); transform: translateY(-1px); box-shadow: 0 0 24px var(--primary-soft-strong); }
button:active:not(:disabled), .btn-link:active { transform: translateY(0) scale(.985); box-shadow: none; }
button.secondary, .btn-link.secondary-link, .ob-close, .ob-skip { border-color: var(--border-default); color: var(--text-primary); background: var(--surface-2); box-shadow: none; }
button.secondary:hover:not(:disabled) { color: var(--primary); border-color: var(--primary-border); background: var(--surface-hover); }
button.del-btn { color: var(--error); background: transparent; border-color: var(--error-border); }
button.del-btn-severe { color: var(--error-fg); background: var(--error); border-color: var(--error); }
:where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; box-shadow: 0 0 0 6px var(--primary-soft-strong), 0 0 18px var(--primary); }

input[type="text"], input[type="number"], input[type="password"], input[type="datetime-local"], select, textarea {
  min-height: 44px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .16);
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), inset 0 2px 8px rgba(0,0,0,.1); }
input[type="checkbox"] { accent-color: var(--primary); width: 18px; height: 18px; }

.table-scroll { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: inset 0 0 24px rgba(0,255,255,.025); }
th { color: var(--primary); border-bottom: 1px solid var(--primary-border); background: linear-gradient(180deg, var(--surface-3), var(--surface-2)); background-image: linear-gradient(var(--neo-grid) 1px, transparent 1px), linear-gradient(90deg, var(--neo-grid) 1px, transparent 1px), linear-gradient(180deg, var(--surface-3), var(--surface-2)); background-size: 16px 16px, 16px 16px, auto; text-shadow: 0 0 10px var(--primary-soft-strong); font-family: var(--font-mono); letter-spacing: .04em; }
td { border-bottom-color: var(--border-subtle); }
tbody tr:hover { background: linear-gradient(90deg, var(--primary-soft), transparent); }
tr.me { background: linear-gradient(90deg, var(--primary-soft-strong), rgba(114,87,255,.08)); box-shadow: inset 4px 0 0 var(--primary); }
tr.rank-1 { background: linear-gradient(90deg, var(--rank-gold-soft), transparent 78%); box-shadow: inset 5px 0 0 var(--rank-gold); }
tr.rank-2 { background: linear-gradient(90deg, var(--rank-silver-soft), transparent 78%); box-shadow: inset 5px 0 0 var(--rank-silver); }
tr.rank-3 { background: linear-gradient(90deg, var(--rank-bronze-soft), transparent 78%); box-shadow: inset 5px 0 0 var(--rank-bronze); }
.rank-num { border-color: var(--border-default); border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 9px var(--primary-soft); font-family: var(--font-mono); }

.pill, .status-chip, .title-badge, .history-chip, .shop-item-stock { border-width: 1px; border-style: solid; border-radius: 6px; box-shadow: inset 0 0 10px rgba(0,255,255,.03); }
.pill, .status-chip { padding: 5px 9px; }
.error-box, .lead-note, .donation-scope-note, .empty-state, .how-it-works, .soop-id-pending { border-radius: 10px; box-shadow: none; }
.lead-note { border: 1px solid var(--primary-border); border-left: 4px solid var(--primary); }
.empty-state { background: var(--surface-2); border-style: dashed; }
.how-it-works { background: var(--surface-2); }
.how-it-works summary { display: flex; align-items: center; min-height: 44px; }

.toast { border-color: var(--primary-border); border-radius: 10px; background: var(--surface-2); box-shadow: var(--shadow-lg), 0 0 22px var(--primary-soft); }
.toast-ok { border-left: 4px solid var(--success); }
.toast-error { border-left: 4px solid var(--error); }
.skeleton { background: linear-gradient(100deg, var(--skeleton-base) 18%, rgba(0,255,255,.16) 45%, var(--skeleton-base) 72%); background-size: 220% 100%; }

.stat-card, .my-summary-item, .tracking-card, .rc-stat, .rc-highlight, .rc-comparison, .rc-day-detail, .rc-day-detail-stats > span, .points-preview, .diag-detail pre {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 11px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface-1));
  box-shadow: inset 0 1px 0 var(--y2k-inner-border);
}
.stat-card::after, .my-summary-item::after, .tracking-card::after, .rc-stat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--neo-violet), var(--secondary)); opacity: .75; pointer-events: none; }
.tracking-card:hover, .rc-highlight:hover { border-color: var(--primary-border); box-shadow: 0 0 20px var(--primary-soft); }
.rc-stat-accent { border-color: var(--secondary-border); background: linear-gradient(145deg, var(--primary-soft), var(--secondary-soft)); }
.rc-calendar-day { border-color: var(--border-default); border-radius: 8px; background: var(--surface-2); box-shadow: none; }
.rc-calendar-day:hover { border-color: var(--primary-border); box-shadow: 0 0 12px var(--primary-soft); }
.rc-calendar-today { border-color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning), 0 0 12px var(--warning-soft); }
.rc-calendar-selected { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary), 0 0 15px var(--primary-soft); }
/* Keep activity intensity colors after the generic calendar surface rule. */
.rc-calendar-day.rc-level-0 { background: var(--surface-2); color: var(--text-primary); }
.rc-calendar-day.rc-level-1 { background: color-mix(in srgb, var(--primary-soft) 65%, var(--surface-1)); color: var(--text-primary); }
.rc-calendar-day.rc-level-2 { background: var(--primary-soft-strong); color: var(--text-primary); }
.rc-calendar-day.rc-level-3 { background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 48%, var(--surface-1)), color-mix(in srgb, var(--secondary) 28%, var(--surface-1))); color: var(--text-primary); }
.rc-calendar-day.rc-level-4 { background: linear-gradient(145deg, var(--y2k-cobalt), var(--y2k-violet)); color: var(--activity-high-fg); border-color: var(--primary); }

.text-error { color: var(--error); }

.trophy-card, .shop-item-card, .donor-card, .podium-item, .title-row, .lucky-package-card, .lucky-history-item, .pension-result-card, .lotto-round-card { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--surface-1), var(--surface-2)); box-shadow: var(--shadow-sm); }
.trophy-unlocked { border-color: var(--secondary-border); background: linear-gradient(145deg, var(--surface-1), var(--secondary-soft)); }
.trophy-equipped { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 0 24px var(--primary-soft-strong); }
.trophy-equipped::before { color: var(--text-inverse); border-color: var(--primary); background: radial-gradient(circle at 30% 25%, var(--neo-cyan), var(--neo-violet) 60%, var(--neo-magenta)); }
.trophy-progress-fill { background: linear-gradient(90deg, var(--neo-cyan), var(--neo-violet), var(--neo-magenta)) !important; }
.shop-item-card::before, .donor-card::before { background: linear-gradient(90deg, var(--neo-cyan), var(--neo-violet), var(--neo-magenta)); opacity: .65; }
.shop-item-price { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }

.lucky-mode-tabs { gap: 7px; padding: 6px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-2); }
.lucky-mode-tab { min-height: 44px; border-radius: 7px; box-shadow: none; }
.lucky-mode-tab.active { color: var(--primary); border-color: var(--primary-border); background: var(--primary-soft-strong); box-shadow: inset 0 -2px 0 var(--primary), 0 0 16px var(--primary-soft); }
.lucky-package-card:hover { transform: translateY(-2px); border-color: var(--primary-border); box-shadow: 0 0 22px var(--primary-soft); }
.lucky-package-card.selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), 0 0 18px var(--primary-soft); }
.lucky-ball { border-color: rgba(232,251,255,.3); box-shadow: 0 0 14px rgba(0,255,255,.13); font-family: var(--font-mono); }
.pension-group-badge { border-radius: 7px; background: linear-gradient(135deg, var(--neo-violet), var(--neo-magenta)); color: #f1f7ff; }
.pension-score-meter-fill, .lucky-score-fill { background: linear-gradient(90deg, var(--neo-cyan), var(--neo-violet), var(--neo-magenta)); }

.admin-shell { gap: clamp(18px, 2.4vw, 32px); }
.admin-tabs { gap: 6px; padding: 8px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-1); box-shadow: var(--shadow-md); }
.admin-tabs .tab-btn { min-height: 42px; border: 1px solid transparent; border-radius: 7px; color: var(--text-secondary); background: transparent; box-shadow: none; }
.admin-tabs .tab-btn:hover:not(:disabled) { color: var(--primary); border-color: var(--border-default); background: var(--surface-2); }
.admin-tabs .tab-btn.active { color: var(--primary); border-color: var(--primary-border); background: var(--primary-soft-strong); box-shadow: inset 3px 0 0 var(--primary), 0 0 15px var(--primary-soft); }
.admin-nav-group-label { color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: .06em; }
.admin-context { border: 1px solid var(--border-default); border-left: 4px solid var(--secondary); border-radius: 10px; background: var(--surface-2); }
.admin-main .table-scroll { border-radius: 12px; }
.admin-main table thead th { background: var(--surface-2); box-shadow: 0 1px 0 var(--primary-border); }
.u-divider-danger { border-color: var(--error-border); border-radius: 10px; background: linear-gradient(90deg, var(--error-soft), transparent); }

.legal-tabs { border-color: var(--border-default); border-radius: 10px; background: var(--surface-2); }
.legal-tab { border-radius: 7px; }
.legal-tab.active { color: var(--primary); border-color: var(--primary-border); background: var(--primary-soft-strong); }
.ob-overlay { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ob-card { border-radius: var(--radius-xl); }
.ob-card::before { height: 3px; background: linear-gradient(90deg, var(--neo-cyan), var(--neo-violet), var(--neo-magenta)); box-shadow: 0 0 18px var(--primary); }
.ogq-banner { border-radius: 12px; }
.ogq-item { border-color: var(--border-default); border-radius: 8px; background: var(--surface-2); box-shadow: none; }
.ogq-item:hover { border-color: var(--secondary-border); box-shadow: 0 0 16px var(--secondary-soft); }
.ogq-banner-toggle { background: transparent; box-shadow: none; }
footer::before { height: 2px; background: var(--gold-line); opacity: .7; }

@media (min-width: 1400px) {
  :root { --content-width: 1360px; }
  body[data-no-ogq-banner="true"] { --content-width: 1500px; }
  main { padding-inline: 42px; }
}

@media (max-width: 900px) {
  header { padding-left: 18px; }
  header::before { left: 0; transform: none; }
  .admin-tabs { position: sticky; top: 76px; z-index: 8; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .admin-tabs .tab-btn { flex: 0 0 auto; }
}

@media (max-width: 640px) {
  :root { --text-base: 15px; --space-5: 20px; --space-6: 24px; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    padding: max(10px, env(safe-area-inset-top)) 12px 9px;
    border-left: 0;
    border-right: 0;
  }
  header h1 { min-width: 0; }
  .logo-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-nav { display: contents; }
  .main-nav {
    grid-column: 1 / -1;
    order: 3;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-inline: -1px;
    padding: 5px;
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: 9px;
    background: var(--surface-2);
    scrollbar-width: none;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-link { flex: 0 0 auto; min-height: 44px; padding-inline: 11px; }
  .nav-link:hover { transform: none; }
  .auth-area { justify-self: end; max-width: min(48vw, 210px); }
  .auth-nick { max-width: 82px; }
  .theme-toggle { width: 44px; height: 44px; }
  .channel-nav { padding-inline: 12px; scroll-snap-type: x proximity; }
  .channel-nav a { min-height: 46px; scroll-snap-align: start; }
  main { padding: 18px 11px 52px; }
  .card { padding: 19px 15px; border-radius: 11px; }
  .card::after { width: 34px; height: 34px; }
  .card h2 { padding-left: 11px; }
  .card-head { align-items: stretch; }
  .card-head > :last-child:not(h2) { max-width: 100%; }
  button, .btn-link, input[type="text"], input[type="number"], input[type="password"], input[type="datetime-local"], select { min-height: 44px; }
  .login-row { display: grid; grid-template-columns: 1fr; }
  .login-row input, .login-row button { width: 100%; min-width: 0; }
  .table-scroll { margin-inline: -3px; border-radius: 9px; }
  th, td { padding: 12px 9px; }
  #toast-container { left: 11px; right: 11px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .toast { width: 100%; }
  .lucky-mode-tabs { display: grid; grid-template-columns: 1fr; }
  .lucky-package-group-grid, .shop-items-grid, .trophy-grid, .donors-grid { grid-template-columns: 1fr; }
  .lucky-set-balls, .pension-number-digits { justify-content: center; flex-wrap: nowrap; gap: clamp(4px, 1.5vw, 7px); }
  .lucky-ball { width: clamp(35px, 10vw, 41px); height: clamp(35px, 10vw, 41px); }
  .admin-tabs { top: 114px; margin-inline: -1px; padding: 5px; }
  .admin-filter-row, .admin-form { display: grid; grid-template-columns: 1fr; }
  .admin-filter-row input { width: 100%; min-width: 0; max-width: none; }
  .admin-form label, .admin-form input, .admin-form select, .admin-form button { width: 100%; }
  .ob-card { width: calc(100vw - 22px); max-height: calc(100dvh - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; }
}

@media (hover: none) {
  .card:hover, .channel-nav a:hover, .nav-link:hover, .lucky-package-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 칭호 효과 최종 활성화 레이어 — 위의 역사적 보정 규칙보다 항상 우선한다. */
:where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx) {
  color: var(--title-fg) !important;
  background-color: transparent !important;
  background-image: var(--title-surface) !important;
  background-repeat: no-repeat !important;
  background-size: 220% 100% !important;
  border-color: transparent !important;
  box-shadow: inset 0 0 0 1px var(--title-edge), 0 2px 10px var(--title-glow) !important;
  filter: none !important;
  animation: var(--title-motion, title-surface-flow) var(--title-flow-duration) ease-in-out infinite alternate !important;
  animation-delay: var(--fx-delay-flow, 0s) !important;
}
:where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx)::after {
  inset: 0 auto 0 -28% !important;
  width: 22% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.58), transparent) !important;
  box-shadow: none !important;
  transform: skewX(-14deg);
  animation: var(--title-shine-motion, title-shine-sweep) var(--title-shine-duration) ease-in-out infinite !important;
  animation-delay: var(--fx-delay-spark, 0s) !important;
}
.title-badge,
.title-badge.title-style,
.title-badge.title-badge-electric {
  color: var(--title-fg, var(--text-primary)) !important;
  background: var(--title-badge-gradient, var(--primary-soft)) !important;
  background-size: 220% 100% !important;
  border: 1px solid var(--title-edge, var(--border-default)) !important;
  border-radius: var(--title-radius, 5px 8px 5px 8px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 7px var(--title-glow, transparent) !important;
  filter: none !important;
  animation: var(--title-badge-motion, title-badge-gradient) var(--title-flow-duration, 9s) ease-in-out infinite alternate !important;
  animation-delay: var(--fx-delay-flow, 0s) !important;
}
.title-badge[data-title-rarity="legendary"] {
  animation-name: var(--title-badge-motion, title-badge-gradient), title-glow-breathe !important;
  animation-duration: var(--title-flow-duration), var(--title-flow-duration) !important;
  animation-timing-function: ease-in-out, ease-in-out !important;
  animation-iteration-count: infinite, infinite !important;
  animation-direction: alternate, alternate !important;
  animation-delay: var(--fx-delay-flow, 0s), var(--fx-delay-spark, 0s) !important;
}
.title-badge::after {
  animation: var(--title-shine-motion, title-shine-sweep) var(--title-shine-duration, 9s) ease-in-out infinite !important;
  animation-delay: var(--fx-delay-spark, 0s) !important;
}
@media (prefers-reduced-motion: reduce) {
  :where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx),
  :where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx)::after,
  .title-badge,
  .title-badge::after {
    animation: none !important;
  }
}

/* ==================================================================
   TITLE MATERIAL SYSTEM V2 · DIGITAL GEM
   최종 렌더링 레이어. 과거 보정 규칙의 우선순위를 한곳에서 수렴시킨다.
   ================================================================== */
.title-fx-diamond, .title-badge-diamond {
  --title-fg: #f0fdff;
  --title-edge: rgba(103, 232, 249, .9);
  --title-glow: rgba(34, 211, 238, .3);
  --title-panel: linear-gradient(112deg, rgba(5, 24, 43, .94), rgba(8, 145, 178, .28) 34%, rgba(196, 181, 253, .38) 54%, rgba(7, 35, 60, .94));
  --title-badge-gradient: linear-gradient(132deg, transparent 0 28%, rgba(255,255,255,.62) 35%, transparent 43%), linear-gradient(112deg, #071b35, #0e7490 25%, #e0f2fe 43%, #67e8f9 49%, #c4b5fd 59%, #4f46e5 74%, #0c4a6e);
  --title-sheen: linear-gradient(100deg, transparent, rgba(255,255,255,.82), rgba(103,232,249,.55), transparent);
  --title-motion: title-gem-diamond;
  --title-badge-motion: title-gem-diamond;
  --title-shine-motion: title-gem-prism-sweep;
  --title-radius: 3px 10px 3px 10px;
}
.title-fx-emerald, .title-badge-emerald {
  --title-fg: #ecfdf5;
  --title-edge: rgba(110, 231, 183, .82);
  --title-glow: rgba(16, 185, 129, .25);
  --title-panel: radial-gradient(circle at 72% 18%, rgba(167,243,208,.25), transparent 24%), linear-gradient(112deg, rgba(3, 45, 40, .95), rgba(4, 120, 87, .34) 46%, rgba(15, 78, 74, .92));
  --title-badge-gradient: radial-gradient(circle at 72% 18%, rgba(236,253,245,.72), transparent 22%), linear-gradient(112deg, #032f2b, #047857 32%, #6ee7b7 50%, #10b981 62%, #064e3b);
  --title-sheen: linear-gradient(100deg, transparent, rgba(167,243,208,.68), rgba(45,212,191,.48), transparent);
  --title-motion: title-gem-emerald;
  --title-badge-motion: title-gem-emerald;
  --title-shine-motion: title-gem-emerald-sweep;
  --title-radius: 10px 4px 10px 4px;
}
.title-fx-platinum, .title-badge-platinum {
  --title-fg: #faf5ff;
  --title-edge: rgba(216, 180, 254, .84);
  --title-glow: rgba(168, 85, 247, .24);
  --title-panel: linear-gradient(116deg, rgba(28, 25, 74, .95), rgba(91, 33, 182, .35) 33%, rgba(192,132,252,.34) 51%, rgba(49,46,129,.94));
  --title-badge-gradient: linear-gradient(128deg, transparent 0 31%, rgba(255,255,255,.58) 39%, transparent 47%), linear-gradient(112deg, #1e1b4b, #5b21b6 30%, #e9d5ff 48%, #a78bfa 59%, #4f46e5 72%, #1e1b4b);
  --title-sheen: linear-gradient(100deg, transparent, rgba(255,255,255,.72), rgba(216,180,254,.58), transparent);
  --title-motion: title-gem-platinum;
  --title-badge-motion: title-gem-platinum;
  --title-shine-motion: title-gem-platinum-sweep;
  --title-radius: 5px 9px;
}
.title-fx-flame, .title-badge-flame {
  --title-fg: #fff7ed;
  --title-edge: rgba(251, 146, 60, .86);
  --title-glow: rgba(244, 63, 94, .28);
  --title-panel: radial-gradient(circle at 64% 100%, rgba(250,204,21,.24), transparent 30%), linear-gradient(108deg, rgba(35, 4, 17, .96), rgba(159,18,57,.38) 43%, rgba(124,45,18,.92));
  --title-badge-gradient: radial-gradient(circle at 58% 115%, rgba(254,240,138,.72), transparent 34%), linear-gradient(108deg, #27020d, #9f1239 28%, #e11d48 43%, #f97316 57%, #facc15 66%, #7f1d1d 82%, #27020d);
  --title-sheen: linear-gradient(100deg, transparent, rgba(254,240,138,.72), rgba(251,113,133,.54), transparent);
  --title-motion: title-gem-flame;
  --title-badge-motion: title-gem-flame;
  --title-shine-motion: title-gem-flame-sweep;
  --title-radius: 4px 11px 4px 11px;
}
.title-fx-electric, .title-badge-electric {
  --title-fg: #eff6ff;
  --title-edge: rgba(96, 165, 250, .78);
  --title-glow: rgba(37, 99, 235, .2);
  --title-panel: radial-gradient(circle at 70% 50%, rgba(125,211,252,.22), transparent 25%), linear-gradient(112deg, rgba(12, 24, 62, .95), rgba(30,64,175,.34) 50%, rgba(30,27,75,.94));
  --title-badge-gradient: radial-gradient(circle at 70% 50%, rgba(186,230,253,.52), transparent 22%), linear-gradient(112deg, #0f1f52, #1d4ed8 36%, #38bdf8 51%, #4f46e5 68%, #111b47);
  --title-sheen: linear-gradient(100deg, transparent, rgba(125,211,252,.68), rgba(165,180,252,.4), transparent);
  --title-motion: title-gem-electric;
  --title-badge-motion: title-gem-electric;
  --title-shine-motion: title-gem-electric-sweep;
  --title-radius: 4px 7px;
}
.title-fx-gold, .title-badge-gold {
  --title-fg: #fffbea;
  --title-edge: rgba(251, 191, 36, .74);
  --title-glow: rgba(245, 158, 11, .18);
  --title-panel: linear-gradient(112deg, rgba(56, 25, 6, .94), rgba(180,83,9,.3) 47%, rgba(120,53,15,.9));
  --title-badge-gradient: linear-gradient(112deg, #4a2208, #b45309 33%, #fde68a 49%, #f59e0b 61%, #713f12 82%, #3b1c08);
  --title-sheen: linear-gradient(100deg, transparent, rgba(254,243,199,.66), rgba(251,191,36,.42), transparent);
  --title-motion: title-gem-gold;
  --title-badge-motion: title-gem-gold;
  --title-shine-motion: title-gem-metal-sweep;
  --title-radius: 5px 8px;
}
.title-fx-silver, .title-badge-silver {
  --title-fg: #f8fafc;
  --title-edge: rgba(203, 213, 225, .64);
  --title-glow: rgba(148, 163, 184, .14);
  --title-panel: linear-gradient(112deg, rgba(24,34,50,.94), rgba(100,116,139,.26) 49%, rgba(30,41,59,.92));
  --title-badge-gradient: linear-gradient(112deg, #263244, #64748b 34%, #f8fafc 50%, #94a3b8 64%, #334155 82%, #1e293b);
  --title-sheen: linear-gradient(100deg, transparent, rgba(255,255,255,.58), rgba(203,213,225,.38), transparent);
  --title-motion: title-gem-silver;
  --title-badge-motion: title-gem-silver;
  --title-shine-motion: title-gem-metal-sweep;
  --title-radius: 6px;
}
.title-fx-bronze, .title-badge-bronze {
  --title-fg: #fff7ed;
  --title-edge: rgba(251, 146, 60, .58);
  --title-glow: rgba(194, 65, 12, .14);
  --title-panel: linear-gradient(112deg, rgba(55,19,8,.94), rgba(154,52,18,.28) 49%, rgba(67,20,7,.92));
  --title-badge-gradient: linear-gradient(112deg, #431407, #9a3412 38%, #fdba74 51%, #c2410c 66%, #431407);
  --title-sheen: linear-gradient(100deg, transparent, rgba(254,215,170,.5), rgba(251,146,60,.3), transparent);
  --title-motion: title-gem-bronze;
  --title-badge-motion: title-gem-bronze;
  --title-shine-motion: title-gem-metal-sweep;
  --title-radius: 5px;
}
.title-fx-sparkle, .title-badge-sparkle {
  --title-fg: #f5f3ff;
  --title-edge: rgba(167, 139, 250, .65);
  --title-glow: rgba(139, 92, 246, .16);
  --title-panel: radial-gradient(circle at 70% 22%, rgba(196,181,253,.2), transparent 24%), linear-gradient(112deg, rgba(38,14,82,.93), rgba(109,40,217,.3) 48%, rgba(30,27,75,.92));
  --title-badge-gradient: radial-gradient(circle at 72% 22%, rgba(237,233,254,.46), transparent 22%), linear-gradient(112deg, #351071, #6d28d9 38%, #c4b5fd 52%, #6366f1 68%, #312e81);
  --title-sheen: linear-gradient(100deg, transparent, rgba(221,214,254,.58), rgba(129,140,248,.36), transparent);
  --title-motion: title-gem-cosmic;
  --title-badge-motion: title-gem-cosmic;
  --title-shine-motion: title-gem-cosmic-sweep;
  --title-radius: 8px 4px 8px 4px;
}

:where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx) {
  background-image: var(--title-panel) !important;
  background-size: 230% 100% !important;
  box-shadow: inset 0 0 0 1px var(--title-edge), inset 0 1px 0 rgba(255,255,255,.1), 0 3px 12px var(--title-glow) !important;
}
:where(#rank-table tr.title-fx td:nth-child(2), .per-channel-table tr.title-fx td:first-child, .donor-row.title-fx)::after {
  width: 18% !important;
  background: var(--title-sheen) !important;
}
.title-badge,
.title-badge.title-style,
.title-badge.title-badge-electric {
  padding: .18rem .56rem .2rem;
  background: var(--title-badge-gradient, var(--primary-soft)) !important;
  background-size: 240% 100%, 230% 100% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.2), 0 2px 8px var(--title-glow, transparent) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.56), 0 0 4px var(--title-glow, transparent);
}
.title-badge::before {
  inset: 1px;
  border-color: rgba(255,255,255,.18);
}
.title-badge::after {
  width: 18%;
  background: var(--title-sheen, linear-gradient(100deg, transparent, rgba(255,255,255,.64), transparent));
}

[data-theme="light"] .title-fx-diamond, [data-theme="light"] .title-badge-diamond { --title-fg:#083344; --title-edge:rgba(8,145,178,.74); --title-glow:rgba(14,165,233,.2); --title-panel:linear-gradient(112deg,#ecfeff,#bae6fd 34%,#ddd6fe 56%,#f0f9ff); --title-badge-gradient:linear-gradient(132deg,transparent 0 28%,rgba(255,255,255,.9) 35%,transparent 43%),linear-gradient(112deg,#bae6fd,#22d3ee 34%,#fff 49%,#c4b5fd 61%,#7dd3fc); }
[data-theme="light"] .title-fx-emerald, [data-theme="light"] .title-badge-emerald { --title-fg:#064e3b; --title-edge:rgba(5,150,105,.7); --title-glow:rgba(16,185,129,.17); --title-panel:radial-gradient(circle at 72% 18%,#ecfdf5,transparent 24%),linear-gradient(112deg,#d1fae5,#6ee7b7 48%,#ccfbf1); --title-badge-gradient:radial-gradient(circle at 72% 18%,#fff,transparent 22%),linear-gradient(112deg,#a7f3d0,#10b981 42%,#ecfdf5 54%,#2dd4bf 72%,#d1fae5); }
[data-theme="light"] .title-fx-platinum, [data-theme="light"] .title-badge-platinum { --title-fg:#3b0764; --title-edge:rgba(124,58,237,.7); --title-glow:rgba(147,51,234,.19); --title-panel:linear-gradient(112deg,#f5f3ff,#ddd6fe 34%,#f5d0fe 54%,#eef2ff); --title-badge-gradient:linear-gradient(128deg,transparent 0 31%,rgba(255,255,255,.92) 39%,transparent 47%),linear-gradient(112deg,#ddd6fe,#8b5cf6 36%,#fff 50%,#c084fc 63%,#a5b4fc); }
[data-theme="light"] .title-fx-flame, [data-theme="light"] .title-badge-flame { --title-fg:#7f1d1d; --title-edge:rgba(225,29,72,.7); --title-glow:rgba(244,63,94,.18); --title-panel:radial-gradient(circle at 64% 100%,#fef3c7,transparent 30%),linear-gradient(108deg,#fff1f2,#fda4af 45%,#ffedd5); --title-badge-gradient:radial-gradient(circle at 58% 115%,#fef08a,transparent 34%),linear-gradient(108deg,#fecdd3,#e11d48 38%,#fef3c7 52%,#fb7185 67%,#fed7aa); }
[data-theme="light"] .title-fx-electric, [data-theme="light"] .title-badge-electric { --title-fg:#172554; --title-edge:rgba(37,99,235,.66); --title-glow:rgba(37,99,235,.15); --title-panel:radial-gradient(circle at 70% 50%,#e0f2fe,transparent 25%),linear-gradient(112deg,#eff6ff,#93c5fd 48%,#e0e7ff); --title-badge-gradient:radial-gradient(circle at 70% 50%,#fff,transparent 22%),linear-gradient(112deg,#dbeafe,#3b82f6 39%,#e0f2fe 52%,#6366f1 68%,#bfdbfe); }
[data-theme="light"] .title-fx-gold, [data-theme="light"] .title-badge-gold { --title-fg:#78350f; --title-edge:rgba(217,119,6,.65); --title-glow:rgba(245,158,11,.14); --title-panel:linear-gradient(112deg,#fffbeb,#fde68a 47%,#fff7ed); --title-badge-gradient:linear-gradient(112deg,#fde68a,#d97706 40%,#fffdf4 52%,#fbbf24 66%,#fef3c7); }
[data-theme="light"] .title-fx-silver, [data-theme="light"] .title-badge-silver { --title-fg:#1e293b; --title-edge:rgba(71,85,105,.54); --title-glow:rgba(100,116,139,.12); --title-panel:linear-gradient(112deg,#f8fafc,#cbd5e1 49%,#f1f5f9); --title-badge-gradient:linear-gradient(112deg,#e2e8f0,#64748b 40%,#fff 52%,#94a3b8 66%,#f1f5f9); }
[data-theme="light"] .title-fx-bronze, [data-theme="light"] .title-badge-bronze { --title-fg:#7c2d12; --title-edge:rgba(194,65,12,.54); --title-glow:rgba(194,65,12,.12); --title-panel:linear-gradient(112deg,#fff7ed,#fed7aa 49%,#ffedd5); --title-badge-gradient:linear-gradient(112deg,#fed7aa,#c2410c 42%,#fff7ed 53%,#fb923c 68%,#ffedd5); }
[data-theme="light"] .title-fx-sparkle, [data-theme="light"] .title-badge-sparkle { --title-fg:#3b0764; --title-edge:rgba(124,58,237,.56); --title-glow:rgba(139,92,246,.13); --title-panel:radial-gradient(circle at 70% 22%,#fff,transparent 24%),linear-gradient(112deg,#f5f3ff,#c4b5fd 48%,#e0e7ff); --title-badge-gradient:radial-gradient(circle at 72% 22%,#fff,transparent 22%),linear-gradient(112deg,#ddd6fe,#8b5cf6 40%,#fff 52%,#818cf8 67%,#ede9fe); }
[data-theme="light"] .title-badge { text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 0 3px var(--title-glow, transparent); }

@keyframes title-gem-diamond { 0%{background-position:0% 50%,0% 50%} 50%{background-position:85% 50%,64% 50%} 100%{background-position:18% 50%,100% 50%} }
@keyframes title-gem-emerald { 0%{background-position:72% 18%,0% 46%} 50%{background-position:42% 62%,72% 54%} 100%{background-position:76% 30%,100% 46%} }
@keyframes title-gem-platinum { 0%{background-position:0% 50%,0% 50%} 52%{background-position:82% 50%,68% 50%} 100%{background-position:16% 50%,100% 50%} }
@keyframes title-gem-flame { 0%{background-position:58% 100%,0% 50%} 48%{background-position:48% 72%,72% 50%} 100%{background-position:68% 105%,100% 50%} }
@keyframes title-gem-electric { 0%{background-position:70% 50%,0% 50%} 52%{background-position:42% 50%,74% 50%} 100%{background-position:78% 50%,100% 50%} }
@keyframes title-gem-gold { 0%{background-position:0% 50%} 56%{background-position:76% 50%} 100%{background-position:100% 50%} }
@keyframes title-gem-silver { 0%{background-position:0% 50%} 60%{background-position:70% 50%} 100%{background-position:100% 50%} }
@keyframes title-gem-bronze { 0%{background-position:0% 50%} 64%{background-position:68% 50%} 100%{background-position:100% 50%} }
@keyframes title-gem-cosmic { 0%{background-position:72% 22%,0% 45%} 50%{background-position:38% 62%,72% 55%} 100%{background-position:78% 28%,100% 45%} }
@keyframes title-gem-prism-sweep { 0%,16%{left:-34%;opacity:0} 30%{opacity:.72} 48%{left:112%;opacity:0} 100%{left:112%;opacity:0} }
@keyframes title-gem-emerald-sweep { 0%,25%{left:-32%;opacity:0} 39%{opacity:.52} 57%{left:110%;opacity:0} 100%{left:110%;opacity:0} }
@keyframes title-gem-platinum-sweep { 0%,18%{left:-36%;opacity:0} 31%{opacity:.58} 44%{left:42%;opacity:0} 58%{opacity:.4} 73%{left:112%;opacity:0} 100%{left:112%;opacity:0} }
@keyframes title-gem-flame-sweep { 0%,28%{left:-30%;opacity:0} 42%{opacity:.62} 59%{left:110%;opacity:0} 100%{left:110%;opacity:0} }
@keyframes title-gem-electric-sweep { 0%,34%{left:-30%;opacity:0} 43%{opacity:.46} 49%{opacity:.18} 55%{opacity:.48} 66%{left:110%;opacity:0} 100%{left:110%;opacity:0} }
@keyframes title-gem-metal-sweep { 0%,38%{left:-28%;opacity:0} 51%{opacity:.4} 68%{left:108%;opacity:0} 100%{left:108%;opacity:0} }
@keyframes title-gem-cosmic-sweep { 0%,31%{left:-28%;opacity:0} 45%{opacity:.42} 61%{left:108%;opacity:0} 100%{left:108%;opacity:0} }

/* Keep nicknames and their equipped title visually distinct. */
.title-badge {
  margin-inline-start: .625rem;
}
.trophy-name .title-badge {
  margin-inline-start: 0;
}
@media (max-width: 640px) {
  .title-badge {
    margin-inline-start: .45rem;
  }
  .trophy-name .title-badge {
    margin-inline-start: 0;
  }
}

/* Admin · challenge mission batch backfill */
.challenge-mission-card { overflow: visible; }
.challenge-stage-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}
.challenge-stage-rail li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: 9px;
  color: var(--text-secondary);
  background: linear-gradient(145deg, var(--surface-2), var(--surface-1));
}
.challenge-stage-rail li span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--primary-border);
  border-radius: 6px;
  color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 10px var(--primary-soft);
  font-family: var(--font-mono);
  font-weight: 700;
}
.challenge-stage-rail li strong { min-width: 0; font-size: var(--text-sm); }
.challenge-guard-note {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--warning-border);
  border-left: 4px solid var(--warning);
  border-radius: 9px;
  color: var(--text-secondary);
  background: linear-gradient(90deg, var(--warning-soft), transparent);
}
.challenge-guard-note strong { color: var(--warning); }
.challenge-input-grid {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, .9fr) minmax(260px, 1.3fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.challenge-field { display: grid; min-width: 0; gap: var(--space-2); color: var(--text-primary); font-weight: 700; }
.challenge-field > span { font-size: var(--text-sm); }
.challenge-field small { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 400; }
.challenge-field select,
.challenge-field input,
.challenge-field textarea { width: 100%; }
.challenge-field textarea {
  min-height: 230px;
  resize: vertical;
  line-height: 1.65;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  tab-size: 2;
}
.challenge-format-help { margin: var(--space-2) 0 var(--space-4); }
.challenge-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.challenge-action-bar #challenge-mission-state { flex: 1 1 300px; }

/* 단계 표시는 장식이 아니라 현재 위치를 알려주는 정보여야 한다.
   완료(체크) / 진행 중(강조) / 대기(흐림) 세 상태를 실제 진행에 맞춰 바꾼다. */
.challenge-stage-rail li { transition: opacity .18s ease, color .18s ease; }
.challenge-stage-rail li[data-stage] { opacity: .45; }
.challenge-stage-rail li.is-active,
.challenge-stage-rail li.is-done { opacity: 1; }
.challenge-stage-rail li.is-active > span {
  color: var(--bg-base);
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.challenge-stage-rail li.is-done > span {
  color: var(--success);
  background: var(--success-soft);
  box-shadow: inset 0 0 0 1px var(--success-border);
  font-size: 0;
}
.challenge-stage-rail li.is-done > span::before { content: '✓'; font-size: var(--text-sm); }

/* 검토 카드 하단 고정 실행 바 — 50명짜리 표를 스크롤해도 지금 얼마가
   반영되는지와 실행 버튼이 항상 같이 보여야 한다. */
.challenge-apply-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-default);
  background: var(--surface-1);
}
.challenge-apply-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); min-width: 0; }
.challenge-apply-figure > span { color: var(--text-tertiary); font-size: var(--text-xs); }
.challenge-apply-figure > strong {
  color: var(--primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
}
.challenge-apply-figure > small { color: var(--text-secondary); font-size: var(--text-sm); }
.challenge-apply-bar button { margin-left: auto; }

/* 정산 검산 결과 — 통과/불일치/자료없음을 색으로 즉시 구분한다 */
.challenge-reconciliation {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  line-height: 1.55;
  /* 배경만 상태색으로 깔고 글자색은 테마 기본값을 명시한다 — 상속에 맡기면
     다크모드에서 어두운 배경 위에 어두운 글자가 남을 수 있다. */
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-left-width: 4px;
  border-radius: var(--radius-md);
}
.challenge-reconciliation--ok { background: var(--success-soft); border-color: var(--success-border); }
.challenge-reconciliation--warn { background: var(--warning-soft); border-color: var(--warning-border); }
.challenge-reconciliation--danger { background: var(--error-soft); border-color: var(--error-border); }
.challenge-reconciliation-extra { font-size: var(--text-sm); color: var(--text-secondary); }
.challenge-mismatch-ack {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-weight: 600;
}

/* 표 안의 small은 .challenge-preview-table-wrap td small이 회색으로 덮으므로
   같은 구체성 이상으로 지정해야 경고색이 살아난다. --warning-fg는 경고 배경 위
   전경색(거의 검정)이라 흰 배경에서는 눈에 띄지 않아 --warning을 쓴다. */
.challenge-preview-table-wrap td small.challenge-nickname-changed,
.challenge-nickname-changed { color: var(--warning); font-weight: 600; }

/* 합계 산출 근거 — 어떤 원본 기록이 합쳐졌는지 펼쳐 본다 */
.challenge-record-detail summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); }
.challenge-record-detail ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.challenge-record-detail li { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); white-space: nowrap; }
.challenge-record-detail li b { min-width: 4.5em; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.challenge-record-detail li > span:first-child { min-width: 5.5em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.challenge-record-detail li em { color: var(--text-tertiary); font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.challenge-record--applied { opacity: 0.7; }
.challenge-record-tag { font-size: var(--text-xs); color: var(--text-tertiary); }

/* 반영 이력 · 되돌리기 */
.challenge-imports-list { display: flex; flex-direction: column; gap: var(--space-2); }
.challenge-import-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.challenge-import-main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.challenge-import-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  flex: 1 1 260px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.challenge-import-meta code { font-size: var(--text-xs); }
.challenge-import-row .challenge-import-rollback { margin-left: auto; }

.challenge-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.challenge-summary-item {
  position: relative;
  min-width: 0;
  padding: var(--space-4);
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: 9px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface-1));
}
.challenge-summary-item::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--border-default); }
.challenge-summary-item > span { display: block; margin-bottom: 5px; color: var(--text-tertiary); font-size: var(--text-xs); }
.challenge-summary-item > strong { display: block; min-width: 0; overflow-wrap: anywhere; color: var(--text-primary); font-family: var(--font-mono); font-size: clamp(16px, 1.5vw, 20px); }
.challenge-summary-item--matched::after { background: var(--success); }
.challenge-summary-item--matched > strong { color: var(--success); }
.challenge-summary-item--skipped::after { background: var(--warning); }
.challenge-summary-item--delta::after { background: linear-gradient(90deg, var(--primary), var(--secondary)); }
.challenge-summary-item--delta > strong { color: var(--primary); }
/* 결정에 쓰이는 숫자 하나만 크게 둔다. 8개 타일이 전부 같은 크기면
   정작 승인해야 할 수량이 "금액 없음·중복"과 같은 무게로 묻힌다. */
.challenge-summary-item--delta {
  grid-column: span 2;
  border-color: var(--primary);
  background: linear-gradient(145deg, var(--primary-soft), var(--surface-1) 60%);
}
.challenge-summary-item--delta > strong { font-size: clamp(22px, 2.4vw, 30px); }
.challenge-summary-item--applied::after { background: var(--text-tertiary); }
.challenge-summary-item--applied > strong { color: var(--text-secondary); }
.challenge-status-guide {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.challenge-status-guide > span { display: inline-flex; align-items: center; gap: 6px; }
.challenge-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--text-tertiary); }
.challenge-status-dot--matched { background: var(--success); box-shadow: 0 0 8px var(--success); }
.challenge-status-dot--review { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.challenge-status-dot--skipped { background: var(--text-tertiary); }
.challenge-status-dot--attention { background: var(--error); box-shadow: 0 0 8px var(--error); }
.challenge-preview-table-wrap table { min-width: 820px; }
.challenge-preview-table-wrap td small { display: block; margin-top: 4px; color: var(--text-tertiary); font-size: var(--text-xs); }
.challenge-preview-table-wrap td.num,
.challenge-preview-table-wrap th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.challenge-row-status { display: inline-block; color: var(--text-primary); font-weight: 700; }
.challenge-row--matched { box-shadow: inset 3px 0 0 var(--success); }
.challenge-row--review { box-shadow: inset 3px 0 0 var(--warning); }
.challenge-row--skipped { opacity: .78; }
/* "이미 반영됨"은 "금액 없음"과 다른 사실이다. 같은 회색으로 두면
   관리자가 누락으로 오해하고 다시 넣으려 한다. */
.challenge-row--applied { opacity: 1; box-shadow: inset 3px 0 0 var(--text-tertiary); }
.challenge-row--applied .challenge-row-status { color: var(--text-secondary); }
.challenge-row--applied td { background: repeating-linear-gradient(135deg, transparent, transparent 7px, var(--surface-2) 7px, var(--surface-2) 8px); }
.challenge-row--attention { box-shadow: inset 3px 0 0 var(--error); background: linear-gradient(90deg, var(--error-soft), transparent); }
.challenge-row--matched .challenge-delta { color: var(--success); font-weight: 700; }
.challenge-row--review .challenge-delta { color: var(--warning); font-weight: 700; }
.challenge-row-approval { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--warning); font-size: var(--text-xs); font-weight: 700; }
.challenge-row-approval input { flex: 0 0 auto; }
.challenge-preview-note { margin: var(--space-3) 0 0; }
.challenge-result-card { border-color: var(--success-border); background: linear-gradient(135deg, var(--success-soft), var(--surface-1) 45%); }
.challenge-result-head { display: flex; align-items: center; gap: var(--space-4); }
.challenge-result-head h2 { margin: 0 0 4px; padding-left: 0; }
.challenge-result-head h2::before { display: none; }
.challenge-result-mark { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 1px solid var(--success-border); border-radius: 9px; color: var(--success); background: var(--success-soft); }
.challenge-result-mark svg { width: 22px; height: 22px; }
.challenge-batch-id { font-size: var(--text-xs) !important; }

@media (max-width: 900px) {
  .challenge-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .challenge-input-grid .challenge-field:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .challenge-stage-rail { grid-template-columns: 1fr; }
  .challenge-stage-rail li { padding: 10px 12px; }
  .challenge-guard-note { grid-template-columns: 1fr; gap: 4px; }
  .challenge-input-grid { grid-template-columns: 1fr; }
  .challenge-input-grid .challenge-field:last-child { grid-column: auto; }
  .challenge-action-bar > button { flex: 1 1 100%; width: 100%; }
  .challenge-action-bar #challenge-mission-state { flex-basis: 100%; }
  .challenge-preview-table-wrap { overflow: visible; border: 0 !important; background: transparent; }
  .challenge-preview-table-wrap table,
  .challenge-preview-table-wrap tbody { display: block; min-width: 0; width: 100%; }
  .challenge-preview-table-wrap thead { display: none; }
  .challenge-preview-table-wrap tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: var(--space-3);
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: 9px;
    background: var(--surface-1);
  }
  .challenge-preview-table-wrap td {
    display: block;
    min-width: 0;
    padding: 11px 12px;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--border-subtle);
  }
  .challenge-preview-table-wrap td:nth-child(-n+3) { grid-column: 1 / -1; }
  /* 내역(7번째)은 목록이라 좁은 칸에 넣으면 읽히지 않는다 */
  .challenge-preview-table-wrap td:nth-child(7) { grid-column: 1 / -1; }
  .challenge-apply-bar { gap: var(--space-2); }
  .challenge-apply-bar button { flex: 1 1 100%; width: 100%; margin-left: 0; }
  .challenge-import-row .challenge-import-rollback { margin-left: 0; width: 100%; }
  .challenge-preview-table-wrap td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--text-tertiary); font-size: 11px; font-weight: 700; }
  .challenge-preview-table-wrap td.num { text-align: left; white-space: normal; }
}

@media (max-width: 430px) {
  .challenge-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .challenge-preview-table-wrap tr { grid-template-columns: 1fr; }
  .challenge-preview-table-wrap td { grid-column: 1 / -1 !important; }
}

/* ==================================================================
   TITLE MATERIAL SYSTEM V3 · BROADCAST PASS
   ------------------------------------------------------------------
   칭호를 색 테두리와 큰 글로우로 구분하던 이전 표현을 최종 단계에서
   정리한다. 표의 실제 셀과 글자는 고정하고, 안쪽 재질 레이어만 아주
   작게 기울여 긴 랭킹에서도 차분한 입체감이 유지되도록 한다.
   ================================================================== */

/* 공통 재질: 실제 셀은 움직이지 않는다. */
#rank-table tr.title-fx > td:nth-child(2),
.per-channel-table tr.title-fx > td:first-child,
.donor-row.title-fx,
.donor-podium-nickname.title-fx {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--title-ink) !important;
  background: var(--title-base) !important;
  border-color: var(--title-neutral-edge) !important;
  border-radius: 9px !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--title-accent-rgb), .09),
    0 2px 5px rgba(15, 23, 42, .07) !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}

#rank-table tr.title-fx > td:nth-child(2)::before,
.per-channel-table tr.title-fx > td:first-child::before,
.donor-row.title-fx::before,
.donor-podium-nickname.title-fx::before {
  content: '' !important;
  position: absolute;
  z-index: -1;
  inset: 2px;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 7px;
  background: var(--title-material) !important;
  background-size: 210% 100% !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  opacity: 1;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: title-material-panel var(--title-flow-duration) cubic-bezier(.45, .05, .55, .95) infinite alternate !important;
  animation-delay: var(--fx-delay-flow, 0s) !important;
}

#rank-table tr.title-fx > td:nth-child(2)::after,
.per-channel-table tr.title-fx > td:first-child::after,
.donor-row.title-fx::after,
.donor-podium-nickname.title-fx::after {
  content: '' !important;
  position: absolute;
  z-index: 0;
  inset: 2px auto 2px -26% !important;
  width: 13% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--title-reflection) !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translate3d(0, 0, 0) skewX(-14deg);
  pointer-events: none;
  animation: title-material-reflection var(--title-shine-duration) ease-in-out infinite !important;
  animation-delay: var(--fx-delay-spark, 0s) !important;
}

#rank-table tr.title-fx > td:nth-child(2) > *,
.per-channel-table tr.title-fx > td:first-child > *,
.donor-row.title-fx > *,
.donor-podium-nickname.title-fx > * {
  position: relative;
  z-index: 1;
}

#rank-table tr.title-fx > td:nth-child(2) .inline-link,
.per-channel-table tr.title-fx > td:first-child .inline-link,
.donor-row.title-fx .inline-link,
.donor-podium-nickname.title-fx .inline-link {
  color: inherit;
}

/* 작은 칭호는 보석 스티커가 아니라 같은 재질에서 잘라낸 명찰처럼 보인다. */
.title-badge,
.title-badge.title-style,
.title-badge.title-badge-electric,
.title-badge[data-title-rarity] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: min(100%, 22rem);
  margin-inline-start: .625rem;
  padding: .18rem .55rem .21rem;
  color: var(--title-ink, var(--text-primary)) !important;
  background: var(--title-badge-material, var(--title-base)) !important;
  background-size: 190% 100% !important;
  border: 1px solid rgba(var(--title-accent-rgb, 100, 116, 139), .3) !important;
  border-radius: var(--title-radius, 6px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 1px 3px rgba(15, 23, 42, .09) !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  font-size: clamp(.68rem, .65rem + .1vw, .76rem);
  font-weight: 760;
  line-height: 1.35;
  letter-spacing: -.01em;
  vertical-align: middle;
  animation: title-material-badge var(--title-flow-duration, 8s) ease-in-out infinite alternate !important;
  animation-delay: var(--fx-delay-flow, 0s) !important;
}

.title-badge::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 1px;
  border: 0 !important;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 48%);
  pointer-events: none;
}

.title-badge::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -25% auto -25% -32% !important;
  width: 14% !important;
  background: var(--title-reflection) !important;
  opacity: 0;
  transform: translate3d(0, 0, 0) skewX(-14deg);
  pointer-events: none;
  animation: title-material-reflection var(--title-shine-duration, 9s) ease-in-out infinite !important;
  animation-delay: var(--fx-delay-spark, 0s) !important;
}

.title-badge:hover {
  filter: brightness(1.025) !important;
}

/* ──────────────────────────────────────────────────────────────
   칭호 모션 = 희귀도
   ──────────────────────────────────────────────────────────────
   칭호는 랭킹 표 안에서 11px로, 한 행당 1초도 안 되는 사이에 읽힌다.
   그 크기에서 실제로 읽히는 채널은 색·테두리·"움직임의 유무" 정도다.
   그런데 지금은 12종이 폭 14%짜리 반사광 하나를 똑같이 공유해서,
   전설과 일반이 완전히 같은 속도로 같은 빛을 받는다. 가장 강한 채널을
   등급 구분에 전혀 쓰지 않고 있는 셈이다.

   그래서 움직임의 양을 등급에 묶는다. 핵심은 전설을 화려하게 만드는 게
   아니라 일반을 완전히 멈추는 것이다 — 전부 반짝이면 아무것도 안 반짝인다.
   ────────────────────────────────────────────────────────────── */

/* 일반: 반사광 없음. 위 등급들의 대비를 만들려고 의도적으로 정적으로 둔다.
   재질 그라디언트와 테두리 광택은 그대로라 초라해 보이지는 않는다. */
.title-badge[data-title-rarity="common"]::after {
  animation: none !important;
  opacity: 0 !important;
}

/* 레어: 빛 한 줄기. 14%는 눈에 안 걸려서 폭을 넓히고 통과를 또렷하게 한다. */
.title-badge[data-title-rarity="rare"]::after {
  width: 22% !important;
}

/* 에픽: 더 넓은 빛 + 한 주기에 두 번 — 스윕 사이 정지 구간이 절반으로 준다. */
.title-badge[data-title-rarity="epic"]::after {
  width: 24% !important;
  animation-name: title-rarity-double-pass !important;
}

/* 전설: 가장 넓은 빛이 두 줄기로 갈라져 지나간다.
   12종 중 이 등급만 "빛이 두 개"라 표를 훑는 중에도 바로 구분된다. */
.title-badge[data-title-rarity="legendary"]::after {
  width: 26% !important;
  animation-name: title-rarity-prism-pass !important;
}

/* 한 주기에 두 번 지나간다 (에픽) */
@keyframes title-rarity-double-pass {
  0%, 12%   { opacity: 0; transform: translate3d(0, 0, 0) skewX(-14deg); }
  20%       { opacity: .72; }
  34%, 46%  { opacity: 0; transform: translate3d(1100%, 0, 0) skewX(-14deg); }
  47%       { opacity: 0; transform: translate3d(0, 0, 0) skewX(-14deg); }
  58%       { opacity: .6; }
  74%, 100% { opacity: 0; transform: translate3d(1100%, 0, 0) skewX(-14deg); }
}

/* 앞선 빛이 지나간 직후 두 번째 빛이 바짝 따라붙어 프리즘처럼 갈라져 보인다 (전설) */
@keyframes title-rarity-prism-pass {
  0%, 10%   { opacity: 0; transform: translate3d(0, 0, 0) skewX(-14deg) scaleX(.7); }
  18%       { opacity: .85; }
  30%       { opacity: 0; transform: translate3d(1100%, 0, 0) skewX(-14deg) scaleX(1.05); }
  31%       { opacity: 0; transform: translate3d(0, 0, 0) skewX(-6deg) scaleX(.45); }
  38%       { opacity: .5; }
  50%, 100% { opacity: 0; transform: translate3d(1100%, 0, 0) skewX(-6deg) scaleX(.8); }
}

/* hover 1.025는 2.5% 차이라 사실상 반응이 없다. 눌러볼 수 있는 요소는 아니지만
   커서를 올렸을 때 반응이 있어야 "살아있는 요소"로 읽힌다. */
.title-badge:hover {
  filter: brightness(1.07) saturate(1.06) !important;
}

@media (prefers-reduced-motion: reduce) {
  .title-badge[data-title-rarity]::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* 다크 모드가 기본 재질이다. 한 칭호에는 한 계열의 색만 사용한다. */
.title-fx-silver, .title-badge-silver {
  --title-ink: #eef2f7;
  --title-base: #1a2029;
  --title-neutral-edge: rgba(203, 213, 225, .18);
  --title-accent-rgb: 148, 163, 184;
  --title-material: linear-gradient(112deg, rgba(148,163,184,.04), transparent 40%, rgba(203,213,225,.13) 52%, transparent 66%);
  --title-badge-material: linear-gradient(112deg, #252d38, #394452 52%, #252d38);
  --title-reflection: linear-gradient(100deg, transparent, rgba(226,232,240,.42), transparent);
  --title-radius: 6px;
  --title-tilt-start: -.22deg;
  --title-tilt: .22deg;
  --title-flow-duration: 8.5s;
  --title-shine-duration: 9.2s;
}

.title-fx-gold, .title-badge-gold {
  --title-ink: #fff8e8;
  --title-base: #211b12;
  --title-neutral-edge: rgba(214, 185, 125, .21);
  --title-accent-rgb: 187, 143, 63;
  --title-material: linear-gradient(112deg, rgba(187,143,63,.05), transparent 39%, rgba(222,190,122,.16) 52%, transparent 67%);
  --title-badge-material: linear-gradient(112deg, #332818, #594322 52%, #302617);
  --title-reflection: linear-gradient(100deg, transparent, rgba(239,213,158,.5), transparent);
  --title-radius: 6px;
  --title-tilt-start: -.28deg;
  --title-tilt: .28deg;
  --title-flow-duration: 7.2s;
  --title-shine-duration: 8.4s;
}

.title-fx-bronze, .title-badge-bronze {
  --title-ink: #fff2eb;
  --title-base: #211815;
  --title-neutral-edge: rgba(190, 119, 84, .2);
  --title-accent-rgb: 178, 105, 72;
  --title-material: linear-gradient(112deg, rgba(178,105,72,.05), transparent 40%, rgba(211,137,99,.14) 52%, transparent 67%);
  --title-badge-material: linear-gradient(112deg, #35221b, #593527 52%, #322019);
  --title-reflection: linear-gradient(100deg, transparent, rgba(226,160,125,.42), transparent);
  --title-radius: 6px;
  --title-tilt-start: -.24deg;
  --title-tilt: .24deg;
  --title-flow-duration: 9.5s;
  --title-shine-duration: 9.8s;
}

.title-fx-platinum, .title-badge-platinum {
  --title-ink: #f3f0fa;
  --title-base: #1c1b25;
  --title-neutral-edge: rgba(189, 181, 214, .2);
  --title-accent-rgb: 153, 139, 190;
  --title-material: linear-gradient(112deg, rgba(153,139,190,.05), transparent 38%, rgba(205,197,226,.16) 51%, transparent 66%);
  --title-badge-material: linear-gradient(112deg, #292633, #4a435c 52%, #282531);
  --title-reflection: linear-gradient(100deg, transparent, rgba(218,211,235,.52), transparent);
  --title-radius: 6px 8px;
  --title-tilt-start: -.38deg;
  --title-tilt: .38deg;
  --title-flow-duration: 6.4s;
  --title-shine-duration: 7.4s;
}

.title-fx-emerald, .title-badge-emerald {
  --title-ink: #edf8f4;
  --title-base: #111f1c;
  --title-neutral-edge: rgba(91, 165, 139, .19);
  --title-accent-rgb: 56, 154, 119;
  --title-material: radial-gradient(circle at 70% 22%, rgba(96,190,153,.09), transparent 23%), linear-gradient(112deg, rgba(56,154,119,.04), transparent 38%, rgba(98,185,151,.15) 51%, transparent 67%);
  --title-badge-material: linear-gradient(112deg, #173029, #285844 52%, #152b26);
  --title-reflection: linear-gradient(100deg, transparent, rgba(130,210,180,.48), transparent);
  --title-radius: 8px 5px;
  --title-tilt-start: -.44deg;
  --title-tilt: .44deg;
  --title-flow-duration: 5.8s;
  --title-shine-duration: 6.8s;
}

.title-fx-diamond, .title-badge-diamond {
  --title-ink: #f1f8fa;
  --title-base: #111c22;
  --title-neutral-edge: rgba(118, 177, 190, .21);
  --title-accent-rgb: 78, 166, 185;
  --title-material: linear-gradient(112deg, rgba(78,166,185,.04), transparent 35%, rgba(150,208,219,.18) 49%, rgba(132,119,168,.07) 57%, transparent 70%);
  --title-badge-material: linear-gradient(112deg, #172a31, #285564 49%, #38334a 58%, #172931);
  --title-reflection: linear-gradient(100deg, transparent, rgba(205,236,241,.58), transparent);
  --title-radius: 5px 9px;
  --title-tilt-start: -.52deg;
  --title-tilt: .52deg;
  --title-flow-duration: 5.2s;
  --title-shine-duration: 7.6s;
}

.title-fx-electric, .title-badge-electric {
  --title-ink: #f0f4fb;
  --title-base: #131a28;
  --title-neutral-edge: rgba(100, 137, 196, .2);
  --title-accent-rgb: 66, 111, 188;
  --title-material: linear-gradient(112deg, rgba(66,111,188,.05), transparent 39%, rgba(103,151,220,.16) 51%, transparent 66%);
  --title-badge-material: linear-gradient(112deg, #1b2740, #294c84 52%, #1a263e);
  --title-reflection: linear-gradient(100deg, transparent, rgba(137,180,231,.5), transparent);
  --title-radius: 5px 7px;
  --title-tilt-start: -.36deg;
  --title-tilt: .36deg;
  --title-flow-duration: 6.8s;
  --title-shine-duration: 7.8s;
}

.title-fx-flame, .title-badge-flame {
  --title-ink: #fff3f0;
  --title-base: #231719;
  --title-neutral-edge: rgba(181, 100, 108, .2);
  --title-accent-rgb: 177, 77, 91;
  --title-material: radial-gradient(circle at 64% 110%, rgba(188,111,72,.09), transparent 28%), linear-gradient(112deg, rgba(177,77,91,.05), transparent 38%, rgba(201,111,105,.16) 51%, transparent 67%);
  --title-badge-material: linear-gradient(112deg, #351e24, #6f3540 50%, #573221 62%, #311d22);
  --title-reflection: linear-gradient(100deg, transparent, rgba(224,155,151,.52), transparent);
  --title-radius: 5px 9px;
  --title-tilt-start: -.48deg;
  --title-tilt: .48deg;
  --title-flow-duration: 5.4s;
  --title-shine-duration: 6.2s;
}

.title-fx-sparkle, .title-badge-sparkle {
  --title-ink: #f5f1f8;
  --title-base: #1d1924;
  --title-neutral-edge: rgba(147, 126, 168, .18);
  --title-accent-rgb: 137, 111, 163;
  --title-material: radial-gradient(circle at 72% 24%, rgba(157,136,178,.08), transparent 22%), linear-gradient(112deg, rgba(137,111,163,.04), transparent 40%, rgba(171,150,190,.13) 52%, transparent 67%);
  --title-badge-material: linear-gradient(112deg, #292132, #4b3b59 52%, #28202f);
  --title-reflection: linear-gradient(100deg, transparent, rgba(195,177,211,.44), transparent);
  --title-radius: 7px 5px;
  --title-tilt-start: -.3deg;
  --title-tilt: .3deg;
  --title-flow-duration: 9s;
  --title-shine-duration: 9s;
}

/* 채팅 VIP 계열: 보석 대신 실제 방송 출입 패스 재질로 구분한다. */
.title-fx-chat-vip, .title-badge-chat-vip {
  --title-ink: #eefcff;
  --title-base: #0d1b22;
  --title-neutral-edge: rgba(71, 168, 185, .2);
  --title-accent-rgb: 49, 151, 170;
  --title-material: linear-gradient(112deg, rgba(49,151,170,.05), transparent 35%, rgba(78,178,195,.17) 49%, transparent 64%), linear-gradient(180deg, rgba(255,255,255,.04), transparent 42%);
  --title-badge-material: linear-gradient(112deg, #122831, #195568 51%, #11262f);
  --title-reflection: linear-gradient(100deg, transparent, rgba(120,207,220,.48), transparent);
  --title-radius: 4px 9px 4px 9px;
  --title-tilt-start: -.55deg;
  --title-tilt: .55deg;
  --title-flow-duration: 5.6s;
  --title-shine-duration: 9.2s;
}

.title-fx-chat-vvip, .title-badge-chat-vvip {
  --title-ink: #faf7ff;
  --title-base: #171321;
  --title-neutral-edge: rgba(151, 123, 191, .21);
  --title-accent-rgb: 129, 94, 178;
  --title-material: linear-gradient(112deg, rgba(129,94,178,.05), transparent 32%, rgba(159,127,199,.18) 48%, transparent 63%), linear-gradient(180deg, rgba(255,255,255,.045), transparent 38%);
  --title-badge-material: linear-gradient(112deg, #241a33, #553d70 51%, #21192e);
  --title-reflection: linear-gradient(100deg, transparent, rgba(193,171,222,.52), transparent);
  --title-radius: 4px 10px;
  --title-tilt-start: -.75deg;
  --title-tilt: .75deg;
  --title-flow-duration: 5s;
  --title-shine-duration: 8s;
}

.title-fx-chat-vvvip, .title-badge-chat-vvvip {
  --title-ink: #f7f4ef;
  --title-base: #090b10;
  --title-neutral-edge: rgba(203, 193, 177, .22);
  --title-accent-rgb: 190, 178, 161;
  --title-material: linear-gradient(112deg, rgba(190,178,161,.04), transparent 30%, rgba(215,207,195,.17) 45%, rgba(112,99,126,.09) 55%, transparent 69%), linear-gradient(180deg, rgba(255,255,255,.045), transparent 36%);
  --title-badge-material: linear-gradient(112deg, #11141b, #34323a 47%, #4c4650 55%, #10131a);
  --title-reflection: linear-gradient(100deg, transparent, rgba(232,225,214,.62), transparent);
  --title-radius: 3px 10px 3px 10px;
  --title-tilt-start: -.95deg;
  --title-tilt: .95deg;
  --title-flow-duration: 4.4s;
  --title-shine-duration: 6.8s;
}

/* VVIP 이상은 색을 더 늘리는 대신 정교한 이중 프레임만 추가한다. */
#rank-table tr.title-fx-chat-vvip > td:nth-child(2),
.per-channel-table tr.title-fx-chat-vvip > td:first-child,
.donor-row.title-fx-chat-vvip,
.donor-podium-nickname.title-fx-chat-vvip,
.title-badge-chat-vvip {
  box-shadow:
    inset 0 0 0 1px rgba(var(--title-accent-rgb), .18),
    inset 3px 0 0 rgba(var(--title-accent-rgb), .24),
    0 2px 5px rgba(15, 23, 42, .08) !important;
}

#rank-table tr.title-fx-chat-vvvip > td:nth-child(2),
.per-channel-table tr.title-fx-chat-vvvip > td:first-child,
.donor-row.title-fx-chat-vvvip,
.donor-podium-nickname.title-fx-chat-vvvip,
.title-badge-chat-vvvip {
  box-shadow:
    inset 0 0 0 1px rgba(var(--title-accent-rgb), .22),
    inset 3px 0 0 rgba(var(--title-accent-rgb), .36),
    0 2px 6px rgba(0, 0, 0, .16) !important;
}

/* 라이트 모드: 흰 광택 대신 짙은 색 반사를 사용해 움직임을 잃지 않는다. */
[data-theme="light"] .title-fx-silver, [data-theme="light"] .title-badge-silver { --title-ink:#27313e; --title-base:#f3f5f7; --title-neutral-edge:rgba(41,52,67,.13); --title-material:linear-gradient(112deg,rgba(71,85,105,.025),transparent 40%,rgba(71,85,105,.11) 52%,transparent 66%); --title-badge-material:linear-gradient(112deg,#f2f4f6,#d9dee4 52%,#f2f4f6); --title-reflection:linear-gradient(100deg,transparent,rgba(71,85,105,.2),transparent); }
[data-theme="light"] .title-fx-gold, [data-theme="light"] .title-badge-gold { --title-ink:#4a371a; --title-base:#faf7f0; --title-neutral-edge:rgba(91,67,28,.14); --title-material:linear-gradient(112deg,rgba(157,116,44,.025),transparent 39%,rgba(157,116,44,.12) 52%,transparent 67%); --title-badge-material:linear-gradient(112deg,#f8f3e8,#e4d1a8 52%,#f8f3e8); --title-reflection:linear-gradient(100deg,transparent,rgba(121,83,22,.24),transparent); }
[data-theme="light"] .title-fx-bronze, [data-theme="light"] .title-badge-bronze { --title-ink:#553326; --title-base:#faf5f2; --title-neutral-edge:rgba(101,59,43,.13); --title-material:linear-gradient(112deg,rgba(145,82,57,.025),transparent 40%,rgba(145,82,57,.11) 52%,transparent 67%); --title-badge-material:linear-gradient(112deg,#f7eee9,#dfb9a7 52%,#f7eee9); --title-reflection:linear-gradient(100deg,transparent,rgba(122,65,44,.22),transparent); }
[data-theme="light"] .title-fx-platinum, [data-theme="light"] .title-badge-platinum { --title-ink:#3e3651; --title-base:#f6f4f8; --title-neutral-edge:rgba(61,52,80,.14); --title-material:linear-gradient(112deg,rgba(109,94,145,.025),transparent 38%,rgba(109,94,145,.12) 51%,transparent 66%); --title-badge-material:linear-gradient(112deg,#f3f0f7,#d9d1e4 52%,#f3f0f7); --title-reflection:linear-gradient(100deg,transparent,rgba(88,70,124,.24),transparent); }
[data-theme="light"] .title-fx-emerald, [data-theme="light"] .title-badge-emerald { --title-ink:#174438; --title-base:#f1f7f4; --title-neutral-edge:rgba(20,83,65,.14); --title-material:radial-gradient(circle at 70% 22%,rgba(31,117,89,.07),transparent 23%),linear-gradient(112deg,rgba(31,117,89,.025),transparent 38%,rgba(31,117,89,.11) 51%,transparent 67%); --title-badge-material:linear-gradient(112deg,#edf6f2,#bcd9cd 52%,#edf6f2); --title-reflection:linear-gradient(100deg,transparent,rgba(18,101,75,.23),transparent); }
[data-theme="light"] .title-fx-diamond, [data-theme="light"] .title-badge-diamond { --title-ink:#173c45; --title-base:#f1f7f8; --title-neutral-edge:rgba(24,79,91,.14); --title-material:linear-gradient(112deg,rgba(25,112,130,.025),transparent 35%,rgba(25,112,130,.12) 49%,rgba(76,61,112,.055) 57%,transparent 70%); --title-badge-material:linear-gradient(112deg,#edf6f8,#bad7dc 49%,#d4cfdf 58%,#edf6f8); --title-reflection:linear-gradient(100deg,transparent,rgba(22,92,107,.25),transparent); }
[data-theme="light"] .title-fx-electric, [data-theme="light"] .title-badge-electric { --title-ink:#203b69; --title-base:#f2f5fa; --title-neutral-edge:rgba(30,69,132,.14); --title-material:linear-gradient(112deg,rgba(40,84,153,.025),transparent 39%,rgba(40,84,153,.12) 51%,transparent 66%); --title-badge-material:linear-gradient(112deg,#eef3fa,#c3d1e7 52%,#eef3fa); --title-reflection:linear-gradient(100deg,transparent,rgba(29,74,143,.24),transparent); }
[data-theme="light"] .title-fx-flame, [data-theme="light"] .title-badge-flame { --title-ink:#66323b; --title-base:#faf3f3; --title-neutral-edge:rgba(105,48,59,.14); --title-material:radial-gradient(circle at 64% 110%,rgba(139,85,48,.06),transparent 28%),linear-gradient(112deg,rgba(142,55,70,.025),transparent 38%,rgba(142,55,70,.12) 51%,transparent 67%); --title-badge-material:linear-gradient(112deg,#f8eeee,#dfbdc3 50%,#decdbf 62%,#f8eeee); --title-reflection:linear-gradient(100deg,transparent,rgba(126,44,61,.24),transparent); }
[data-theme="light"] .title-fx-sparkle, [data-theme="light"] .title-badge-sparkle { --title-ink:#4a3a58; --title-base:#f7f4f8; --title-neutral-edge:rgba(72,52,87,.13); --title-material:radial-gradient(circle at 72% 24%,rgba(103,77,123,.06),transparent 22%),linear-gradient(112deg,rgba(103,77,123,.02),transparent 40%,rgba(103,77,123,.1) 52%,transparent 67%); --title-badge-material:linear-gradient(112deg,#f3eff5,#d8cbdf 52%,#f3eff5); --title-reflection:linear-gradient(100deg,transparent,rgba(82,56,101,.21),transparent); }
[data-theme="light"] .title-fx-chat-vip, [data-theme="light"] .title-badge-chat-vip { --title-ink:#123e49; --title-base:#eff8f9; --title-neutral-edge:rgba(12,88,102,.15); --title-material:linear-gradient(112deg,rgba(16,110,126,.025),transparent 35%,rgba(16,110,126,.13) 49%,transparent 64%),linear-gradient(180deg,rgba(255,255,255,.65),transparent 42%); --title-badge-material:linear-gradient(112deg,#edf8f9,#b9dce1 51%,#edf8f9); --title-reflection:linear-gradient(100deg,transparent,rgba(8,91,107,.26),transparent); }
[data-theme="light"] .title-fx-chat-vvip, [data-theme="light"] .title-badge-chat-vvip { --title-ink:#412d5b; --title-base:#f7f3fa; --title-neutral-edge:rgba(80,54,112,.15); --title-material:linear-gradient(112deg,rgba(102,69,143,.025),transparent 32%,rgba(102,69,143,.13) 48%,transparent 63%),linear-gradient(180deg,rgba(255,255,255,.66),transparent 38%); --title-badge-material:linear-gradient(112deg,#f4eff8,#d4c4e2 51%,#f4eff8); --title-reflection:linear-gradient(100deg,transparent,rgba(79,48,118,.27),transparent); }
[data-theme="light"] .title-fx-chat-vvvip, [data-theme="light"] .title-badge-chat-vvvip { --title-ink:#20242b; --title-base:#f2f3f5; --title-neutral-edge:rgba(42,46,54,.16); --title-material:linear-gradient(112deg,rgba(42,46,54,.02),transparent 30%,rgba(42,46,54,.13) 45%,rgba(104,80,89,.06) 55%,transparent 69%),linear-gradient(180deg,rgba(255,255,255,.72),transparent 36%); --title-badge-material:linear-gradient(112deg,#eef0f3,#c8cbd1 47%,#bcb2b5 55%,#eef0f3); --title-reflection:linear-gradient(100deg,transparent,rgba(30,34,42,.3),transparent); }

/* 과거 세대의 테마별 강한 배경·글로우보다 높은 우선순위로 재질을 확정한다. */
html[data-theme] #rank-table tr.title-fx[class*="title-fx-"] > td:nth-child(2),
html[data-theme] .per-channel-table tr.title-fx[class*="title-fx-"] > td:first-child,
html[data-theme] .donor-row.title-fx[class*="title-fx-"],
html[data-theme] .donor-podium-nickname.title-fx[class*="title-fx-"] {
  color: var(--title-ink) !important;
  background-color: var(--title-base) !important;
  background-image: none !important;
  border: 1px solid var(--title-neutral-edge) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--title-accent-rgb), .09),
    0 2px 5px rgba(15, 23, 42, .07) !important;
  filter: none !important;
  animation: none !important;
}

html[data-theme] #rank-table tr.title-fx-chat-vvip > td:nth-child(2),
html[data-theme] .per-channel-table tr.title-fx-chat-vvip > td:first-child,
html[data-theme] .donor-row.title-fx-chat-vvip,
html[data-theme] .donor-podium-nickname.title-fx-chat-vvip,
html[data-theme] #rank-table tr.title-fx-chat-vvvip > td:nth-child(2),
html[data-theme] .per-channel-table tr.title-fx-chat-vvvip > td:first-child,
html[data-theme] .donor-row.title-fx-chat-vvvip,
html[data-theme] .donor-podium-nickname.title-fx-chat-vvvip {
  box-shadow:
    inset 0 0 0 1px rgba(var(--title-accent-rgb), .2),
    inset 3px 0 0 rgba(var(--title-accent-rgb), .28),
    0 2px 6px rgba(15, 23, 42, .09) !important;
}

@keyframes title-material-panel {
  0% { background-position: 0% 50%; transform: perspective(1100px) rotateY(var(--title-tilt-start, -.3deg)); }
  50% { background-position: 52% 50%; transform: perspective(1100px) rotateY(0deg); }
  100% { background-position: 100% 50%; transform: perspective(1100px) rotateY(var(--title-tilt, .3deg)); }
}

@keyframes title-material-badge {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes title-material-reflection {
  0%, 24% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-14deg); }
  38% { opacity: .78; }
  56%, 100% { opacity: 0; transform: translate3d(1100%, 0, 0) skewX(-14deg); }
}

@media (max-width: 640px) {
  .title-badge,
  .title-badge[data-title-rarity] {
    max-width: 100%;
    margin-inline-start: .45rem;
    padding-inline: .46rem;
  }
  .trophy-name .title-badge { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #rank-table tr.title-fx > td:nth-child(2)::before,
  .per-channel-table tr.title-fx > td:first-child::before,
  .donor-row.title-fx::before,
  .donor-podium-nickname.title-fx::before,
  #rank-table tr.title-fx > td:nth-child(2)::after,
  .per-channel-table tr.title-fx > td:first-child::after,
  .donor-row.title-fx::after,
  .donor-podium-nickname.title-fx::after,
  .title-badge,
  .title-badge::after {
    animation: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   큰손 시상대 — 박스 제거 + 단상답게
   ──────────────────────────────────────────────────────────────
   1) 시상대 닉네임에 칭호 "판"이 그려져 이름이 회색 상자에 갇혀 보였다.
      판은 랭킹 표 셀에서 쓰라고 만든 것인데 시상대까지 따라와 시상식 분위기를
      깨뜨린다. 여기서는 이름이 주인공이므로 판을 걷어내고 글자만 남긴다.
   2) 카드 세 장이 같은 높이·같은 흰색이라 "시상대"로 안 읽혔다.
      금·은·동 색을 실제로 입히고 높이를 계단으로 만들어 단상처럼 보이게 한다.
   ────────────────────────────────────────────────────────────── */

/* (1) 이름을 가두던 판 제거 — 뒤에 오는 규칙이 이기도록 같은 선택자로 되돌린다 */
.donor-podium-nickname.title-fx,
html[data-theme] .donor-podium-nickname.title-fx[class*="title-fx-"] {
  color: var(--text-primary) !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
.donor-podium-nickname.title-fx::before,
.donor-podium-nickname.title-fx::after { content: none !important; }

/* (2) 단상 — 순위마다 높이가 다른 진짜 시상대 */
.donor-podium { align-items: flex-end; gap: 14px; padding-top: 26px; }
.donor-podium-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* 카드 위쪽에 순위 금속색 띠를 둘러 등수를 색으로 먼저 읽게 한다 */
.donor-podium-item::before {
  content: '';
  position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--podium-metal, var(--border-strong-c));
}
/* 카드 안쪽 위에서 아래로 은은하게 번지는 금속 광 */
.donor-podium-item::after {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 78% at 50% -14%, var(--podium-glow, transparent), transparent 62%);
}

.donor-podium-1 { --podium-metal: linear-gradient(90deg, #f5c451, #fff3c4 48%, #f5c451); --podium-glow: rgba(251, 191, 36, .3); }
.donor-podium-2 { --podium-metal: linear-gradient(90deg, #b9c2cc, #eef2f6 48%, #b9c2cc); --podium-glow: rgba(148, 163, 184, .26); }
.donor-podium-3 { --podium-metal: linear-gradient(90deg, #c98a5e, #f0c4a4 48%, #c98a5e); --podium-glow: rgba(201, 138, 94, .26); }

/* 계단 — 2·3위를 낮춰 1위가 실제로 올라선 것처럼 보이게 한다 */
.donor-podium-2 { margin-bottom: 14px; }
.donor-podium-3 { margin-bottom: 26px; }

/* 1위 강조 — 금테와 은은한 발광 */
.donor-podium-1 {
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, .5),
    0 0 26px -6px rgba(251, 191, 36, .5),
    0 14px 34px rgba(251, 191, 36, .2);
}
/* 왕관이 살짝 떠 있는 느낌 — 1위에만, 아주 작게 */
.donor-podium-1 .donor-podium-crown {
  animation: donor-crown-float 2.8s ease-in-out infinite;
  filter: drop-shadow(0 3px 6px rgba(251, 191, 36, .55));
}
@keyframes donor-crown-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 후원 개수는 이 화면의 결론이다 — 금속 질감으로 키워 시선을 모은다 */
.donor-podium-1 .donor-podium-count {
  background: linear-gradient(180deg, #ffe9a3, #f0a92a 62%, #d98916);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  letter-spacing: -.02em;
}
.donor-podium-count { font-variant-numeric: tabular-nums; }

/* 순위 라벨은 숫자와 붙어 보이지 않게 살짝 띄우고 배지처럼 */
.donor-podium-rank {
  margin-top: 8px; padding: 2px 10px;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--surface-2);
  font-weight: 700; letter-spacing: .02em;
}
.donor-podium-1 .donor-podium-rank {
  border-color: rgba(251, 191, 36, .45);
  background: rgba(251, 191, 36, .12);
  color: var(--warning);
}

@media (prefers-reduced-motion: reduce) {
  .donor-podium-1 .donor-podium-crown { animation: none; }
}

@media (max-width: 720px) {
  /* 카드가 세로로 쌓이면 계단이 의미가 없다 */
  .donor-podium-2, .donor-podium-3 { margin-bottom: 0; }
  .donor-podium { padding-top: 12px; }
}

/* -------------------- 문의(고객센터 메신저형) -------------------- */
#support-widget { position: fixed; right: 20px; bottom: 20px; z-index: 90; }

#support-fab {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 1px solid var(--primary-border);
  background: linear-gradient(145deg, var(--primary-hover), var(--primary));
  color: var(--primary-fg);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
#support-fab:hover { background: linear-gradient(145deg, var(--primary), var(--primary-active)); transform: translateY(-2px); }
#support-fab:active { transform: translateY(0); }

.support-fab-dot {
  position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--error);
  border: 2px solid var(--bg);
}

.support-panel {
  position: absolute; right: 0; bottom: 64px;
  width: 430px; max-width: calc(100vw - 40px);
  height: 600px; max-height: min(720px, calc(100dvh - 108px));
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  outline: none;
  animation: support-panel-in 160ms ease-out both;
}
/* hidden 속성은 UA 기본 display:none인데, 위 .support-panel 규칙이 같은 요소에
   display:flex를 걸어놓으면 author 스타일이 UA 스타일을 이겨서 hidden이 무시된다
   (패널을 열지 않아도 빈 채로 항상 보이는 버그였다). 명시적으로 되살린다. */
.support-panel[hidden] { display: none; }

.support-panel-head {
  display: flex; align-items: center; gap: 8px;
  min-height: 64px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
.support-head-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.support-head-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-base); }
.support-head-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.support-icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--muted); cursor: pointer; }
.support-icon-btn:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border); }

/* 카톡처럼: 메시지 목록만 안에서 스크롤되고, 입력창은 항상 바닥에 고정되어야 한다.
   panel-body 자체를 스크롤시키면 입력창까지 같이 스크롤되어 "전송해도 반응이 없는
   것처럼" 보이는 문제가 있었다 — 그래서 여기는 스크롤하지 않고 min-height:0으로
   안쪽 리스트/메시지 영역에만 스크롤을 위임한다. */
.support-panel-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px; min-height: 0; }

#support-list-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }

.support-new-btn {
  align-self: stretch;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.support-new-btn:hover { background: var(--primary-soft-strong); }

/* 기본 button 리셋(전역 style.css)이 배경·글자색·가운데정렬·white-space:nowrap을
   전부 강제해서, 이 규칙에서 안 건드린 속성은 그대로 새어 들어온다(실제로 제목/
   미리보기 글자색이 버튼 기본색을 물려받아 안 읽히던 버그였다). 그래서 여기서는
   레이아웃에 필요한 모든 속성을 명시적으로 다시 지정한다. */
.support-ticket-row {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 6px;
  width: 100%;
  flex-shrink: 0;
  min-height: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.support-ticket-row:hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateY(-1px); }
.support-ticket-row.support-ticket-unread { border-color: var(--primary-border); background: linear-gradient(100deg, var(--primary-soft), var(--surface-2) 55%); }
.support-ticket-topline { display: flex; align-items: center; gap: 7px; width: 100%; min-width: 0; }
.support-ticket-subject { color: var(--text); font-weight: var(--weight-medium); }
.support-ticket-topline .support-ticket-subject { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-preview { color: var(--muted); font-size: var(--text-sm); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-status { font-size: var(--text-xs); width: fit-content; padding: 1px 8px; border-radius: 999px; }
.support-ticket-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.support-unread-marker { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.support-status-open { background: var(--warning-soft); color: var(--warning); }
.support-status-answered { background: var(--success-soft); color: var(--success); }
.support-status-closed { background: var(--surface-3); color: var(--muted); }

#support-new-text, #support-reply-text, #support-admin-reply {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 11px;
  font: inherit;
  line-height: 1.55;
}
#support-new-text:focus, #support-reply-text:focus, #support-admin-reply:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
.support-field-label { color: var(--text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.support-new-form { gap: 8px; }
.support-form-footer, .support-compose-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.support-char-count { font-variant-numeric: tabular-nums; }

#support-new-submit {
  align-self: flex-end;
  min-height: 42px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--primary);
  color: var(--primary-fg);
  cursor: pointer;
}
#support-new-submit:disabled, #support-reply-send:disabled, #support-admin-send:disabled { opacity: .58; cursor: wait; }

.support-thread-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* justify-content:flex-end — 메시지가 몇 개 안 될 때 화면 위쪽에 붕 뜨지 않고
   실제 채팅앱처럼 입력창 바로 위(아래쪽)에 붙어서 시작한다. */
.support-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; margin-bottom: 4px; padding: 4px 2px 8px; overscroll-behavior: contain; }

.support-message-group { display: flex; flex-direction: column; gap: 4px; max-width: 84%; }
.support-message-group-user { align-self: flex-end; align-items: flex-end; }
.support-message-group-admin { align-self: flex-start; align-items: flex-start; }
.support-message-meta { display: flex; align-items: center; gap: 7px; padding: 0 3px; color: var(--muted); font-size: 10px; }
.support-message-meta time { font-variant-numeric: tabular-nums; }

.support-msg {
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.support-msg-user { align-self: flex-end; background: var(--primary); color: var(--primary-fg); border-bottom-right-radius: 4px; }
.support-msg-admin { align-self: flex-start; background: var(--surface-2); color: var(--text); border-color: var(--border); border-bottom-left-radius: 4px; }

.support-closed-note { margin: 0; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--text-xs); text-align: center; }

.support-compose { display: flex; gap: 6px; align-items: flex-end; }
.support-compose textarea { flex: 1; }
#support-reply-send {
  min-width: 82px;
  min-height: 44px;
  padding: 9px 13px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--primary);
  color: var(--primary-fg);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}

.support-close-ticket-btn { align-self: flex-start; }
.support-empty-state { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }

@keyframes support-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
  #support-widget { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .support-panel {
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: auto; max-width: none;
    height: min(650px, calc(100dvh - 96px - env(safe-area-inset-bottom)));
    max-height: none;
    border-radius: var(--radius-lg);
  }
  .support-panel-body { padding: 12px; }
  .support-message-group { max-width: 90%; }
  .support-input-hint { display: none; }
  #support-reply-send { min-width: 48px; }
  #support-reply-send span { display: none; }
}

.tab-count-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  min-width: 16px;
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* -------------------- 문의 관리 (관리자) -------------------- */
.support-admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.support-admin-stat { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.support-admin-stat span { display: block; color: var(--muted); font-size: var(--text-xs); }
.support-admin-stat strong { display: block; margin-top: 3px; font-size: 18px; font-variant-numeric: tabular-nums; }
.support-admin-layout { display: grid; grid-template-columns: minmax(300px, 35%) minmax(0, 1fr); gap: 16px; min-height: 580px; }
.support-admin-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 680px; padding-right: 3px; }
.support-admin-thread { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; background: var(--surface-1); }
.support-admin-thread .support-messages { min-height: 360px; max-height: 520px; }
.support-admin-list .support-ticket-row.active { border-color: var(--primary-border); background: var(--primary-soft); }
.support-admin-thread-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.support-admin-thread-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.support-admin-thread-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-admin-thread-title span { color: var(--muted); font-size: var(--text-xs); }
.support-admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 900px) {
  .support-admin-layout { grid-template-columns: 1fr; }
  .support-admin-list { max-height: 360px; }
  .support-admin-thread .support-messages { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .support-panel { animation: none; }
  #support-fab, .support-ticket-row { transition: none; }
  #support-fab:hover, .support-ticket-row:hover { transform: none; }
}