/* src/styles/design-tokens.css - 블오가든 디자인 시스템 v3 */

:root {
  /* 핵심 컬러 — 딥 다크네이비 확정(2026-07-07): 찐한 다크네이비 + 비비드 블루 액센트.
     골드 배제. 심플·깔끔·임팩트. 변수명(--navy/--gold)은 마이그레이션 비용 때문에 유지 */
  --navy: #0f1130;
  --navy-deep: #070819;        /* 사이드바/딥 배경 그라데이션용 (navy보다 훨씬 진함 — 크루숲 카드 톤) */
  --charcoal: #1a1d45;
  --gold: #C5547A;             /* 앱 액센트 = 라즈베리 로즈 (2026-07-20 사장님 확정). 흰/네이비 양면 가독 중간 로즈. 변수명 --gold은 마이그레이션 비용으로 유지 — 값=로즈 */
  --off-white: #f4f5f8;
  --white: #ffffff;
  /* A 캐논 토큰 (2026-07-20 확정 — 새싹그린 + 페리윙클) */
  --sprout: #25D07E;       /* 브랜드·주요 긍정액션 배경(+네이비 글자) */
  --sprout-ink: #0F8A55;   /* 흰 배경 위 초록 글자/아이콘/긍정상태 */
  --navy-2: #232A52;       /* 라이트 위 중립 강조 */
  --periwinkle: #6E79D6;   /* 포인트 액센트·링크 (구 골드 대체 예정) */
  --peri-light: #B9C2EE;   /* 다크 밴드 위 강조 */
  --page-bg: #e8eaf1;
  --header-bg: rgba(255, 255, 255, 0.92);   /* 프로스티드 sticky 헤더 배경 */

  /* 다크 영역 텍스트 (사이드바, 헤더, 강조 섹션) */
  --text-on-dark-main: #ffffff;
  --text-on-dark-sub: rgba(255, 255, 255, 0.5);
  --text-on-dark-dim: rgba(255, 255, 255, 0.45); /* P0-2: 0.3→0.45, 대비비 3.2:1 확보 */

  /* 라이트 영역 텍스트 (콘텐츠, 카드 내부) */
  --text-on-light-main: #101228;
  --text-on-light-sub: #5B5F78;   /* 네이비 틴트 — 순수 #666 금지(§3), 대비 5.9:1 */
  --text-on-light-dim: #6C7189;   /* 네이비 틴트, 대비 4.80:1 (구 #767676 4.54:1보다 개선) */
  --text-on-light-hint: #6C7189;
  --text-on-light-muted: #8A8FA8; /* 콕핏 실증값과 통일 */
  --text-on-light-faint: #B9BDCE; /* P1-7: 아주 연한 보조 텍스트 */
  --text-on-light-ghost: rgba(15, 17, 48, 0.20); /* 미래/비활성 날짜 등 극희미 (네이비 틴트) */

  /* 액센트 = 라즈베리 로즈 (앱 시그니처, 2026-07-20 사장님 확정) — 라이트면 텍스트/뱃지 */
  --gold-badge-bg: rgba(197, 84, 122, 0.09);
  --gold-badge-border: rgba(197, 84, 122, 0.26);
  --gold-badge-strong-bg: rgba(197, 84, 122, 0.12);
  /* 다크 카드 위 액센트 표면/보더 — 로즈 틴트(시그니처가 다크 히어로/사이드바에도 드러남) */
  --gold-surface-on-dark: rgba(227, 122, 148, 0.16);
  --gold-border-on-dark: rgba(227, 122, 148, 0.42);
  --gold-border-strong: rgba(227, 122, 148, 0.55);

  /* 보더 & 구분선 */
  --border-light: #eef0f5;
  --border-input: #dfe3ea;            /* 폼 컨트롤(입력/텍스트영역) 보더 */
  --border-card: rgba(0, 0, 0, 0.03);
  --overlay-bg: rgba(0, 0, 0, 0.5);   /* 모달/팝업 스크림 */
  --border-dark: rgba(255, 255, 255, 0.06);
  --border-dark-subtle: rgba(255, 255, 255, 0.04);
  --border-on-dark: rgba(255, 255, 255, 0.10);

  /* 다크 카드 위 표면/상태 텍스트 (네이비 배경 — CrewLounge WeeklySection 등) */
  --surface-on-dark: rgba(255, 255, 255, 0.06);
  --surface-on-dark-strong: rgba(255, 255, 255, 0.08);
  --color-success-on-dark: #81C784;
  --color-danger-on-dark: #EF9A9A;
  --color-info-on-dark: #6fb6ff;                    /* 다크 위 정보색(프리즈 등) */
  --text-on-dark-faint: rgba(255, 255, 255, 0.28);  /* 구분점·브랜드 메타 등 비의미 장식 전용 (의미 텍스트는 --text-on-dark-dim) */
  --gold-text-dim: rgba(255, 255, 255, 0.72);       /* 다크 위 보조 텍스트 — 중립(로즈 아님) 유지 */
  --gold-surface-on-dark-strong: rgba(227, 122, 148, 0.24);
  --gold-light: #E37A94;                            /* 로즈 밝은 변형 — 다크 위 강조(스트릭 불꽃 등)/라이트 프로그레스 끝 */
  --shadow-gold-glow: 0 4px 18px rgba(227, 122, 148, 0.24); /* 다크면 글로우 — 로즈 */
  --shadow-gold-glow-modal: 0 0 48px rgba(227, 122, 148, 0.20); /* 축하 모달 글로우(로즈) */

  /* ── 관제탑(Command Bento) 표면 — 크루 홈/셸 전용 (2026-07-08 확정) ──
     홈과 내비 셸은 "다크 관제 표면"으로 전환. 이 표면에 한해 블루 데이터 액센트 허용
     (게이지·활성탭·상태점 등 데이터 시각화만; 본문 텍스트/장식은 여전히 무채색).
     일반 라이트 카드 화면은 기존 규칙(블루=라이트면 전용) 그대로 유지. */
  --cmd-canvas: #0a0b1e;                        /* 관제 표면 최심층 배경 (navy보다 진함) */
  --cmd-canvas-2: #0c0e26;                       /* 그라데이션 하단 stop */
  --cmd-tile: rgba(255, 255, 255, 0.045);        /* 벤토 타일 기본 배경 */
  --cmd-tile-2: rgba(255, 255, 255, 0.07);       /* 타일 내부 강조/버튼 */
  --cmd-tile-hover: rgba(255, 255, 255, 0.10);   /* 타일 hover */
  --cmd-line: rgba(255, 255, 255, 0.09);         /* 타일 보더/구분선 */
  --cmd-accent: #5b8cff;                          /* 다크 위 데이터 블루 (라이트면 --gold보다 밝게) */
  --cmd-accent-soft: rgba(91, 140, 255, 0.14);    /* 블루 표면 틴트 */
  --cmd-accent-border: rgba(91, 140, 255, 0.40);  /* 블루 보더 */
  --cmd-glow: radial-gradient(46% 60% at 92% -6%, rgba(91,140,255,0.16), transparent 60%), radial-gradient(30% 42% at 4% 108%, rgba(120,150,255,0.08), transparent 66%);
  --radius-tile: 16px;                            /* 벤토 타일 라운드 */

  /* 잔디밭 강도 스케일 (MonthlyGrass — 0은 --border-light) */
  --grass-1: rgba(178, 49, 88, 0.22);   /* 잔디 = 로즈 농담(연함) — 앱 톤 통일 2026-07-20 */
  --grass-2: rgba(178, 49, 88, 0.52);
  --grass-3: rgba(178, 49, 88, 0.90);
  --tooltip-bg: rgba(15, 17, 48, 0.92);             /* 호버 툴팁 배경 */
  --overlay-bg-strong: rgba(0, 0, 0, 0.82);         /* 축하 모달 스크림(집중) */

  /* 그림자 — navy 색조로 tinting (프리미엄) */
  /* --shadow-border: shadow-as-border 기법 (CSS border 대신 사용, 라운드 처리 자연스러움) */
  --shadow-border: 0 0 0 1px rgba(15, 17, 48, 0.08);
  /* --shadow-card: 3레이어 (border ring + 미세 lift + ambient depth) */
  --shadow-card: 0 0 0 1px rgba(15, 17, 48, 0.06), 0 2px 4px rgba(15, 17, 48, 0.04), 0 8px 28px rgba(15, 17, 48, 0.08);
  --shadow-card-hover: 0 0 0 1px rgba(15, 17, 48, 0.08), 0 4px 14px rgba(15, 17, 48, 0.08), 0 14px 36px rgba(15, 17, 48, 0.11);
  --shadow-card-gold: 0 0 0 1px rgba(197, 84, 122, 0.18), 0 4px 18px rgba(197, 84, 122, 0.12), 0 8px 28px rgba(15, 17, 48, 0.06);
  --shadow-heavy: 0 0 0 1px rgba(15, 17, 48, 0.06), 0 16px 48px rgba(15, 17, 48, 0.18);
  --shadow-soft: 0 0 0 1px rgba(15, 17, 48, 0.05), 0 2px 8px rgba(15, 17, 48, 0.04);

  /* 폰트 */
  --font-korean: 'Noto Sans KR', sans-serif;
  --font-english: 'Outfit', sans-serif;

  /* 라운드 */
  --radius-card: 20px;
  --radius-badge: 50px;
  --radius-button: 8px;
  --radius-inner: 12px;
  --radius-section: 7px;
  --radius-sm: 6px;     /* P1-4: 소형 UI 요소 */
  --radius-circle: 50%; /* P1-4: 원형 요소 */

  /* 트랜지션 — cubic-bezier(0.16, 1, 0.3, 1) = iOS spring 근사 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.2s  cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* z-index 레이어 시스템 */
  --z-content:  1;
  --z-sticky:   10;
  --z-sidebar:  200;
  --z-overlay:  198;
  --z-mobile-sidebar: 199;
  --z-dropdown: 9000;
  --z-modal:    9999;
  --z-alert:    10000;

  /* 스켈레톤 */
  --skeleton-base: #eaedf2;
  --skeleton-shine: rgba(255, 255, 255, 0.7);

  /* 비활성 버튼 */
  --disabled-bg: #e2e5ec;
  --disabled-color: #6C7189;

  /* 시맨틱 색상 — 상태/피드백 */
  --color-success: #0F8A55;
  --color-success-bg: rgba(15, 138, 85, 0.08);
  --color-success-bg-strong: rgba(15, 138, 85, 0.12);
  --color-success-border: rgba(15, 138, 85, 0.25);
  --color-success-text: #0F8A55;

  --color-danger: #E24B4A;
  --color-danger-bg: rgba(226, 75, 74, 0.08);
  --color-danger-bg-strong: rgba(226, 75, 74, 0.12);
  --color-danger-border: rgba(226, 75, 74, 0.25);

  --color-info: #4E6BD0;
  --color-info-bg: rgba(78, 107, 208, 0.10);
  --color-info-border: rgba(78, 107, 208, 0.25);

  --color-neutral-bg: rgba(100, 100, 120, 0.08);
  --color-neutral-border: rgba(100, 100, 120, 0.20);

  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.08);
  --color-warning-border: rgba(245, 158, 11, 0.25);

  --color-emerald: #0F8A55;
  --color-emerald-bg: rgba(15, 138, 85, 0.08);
  --color-emerald-border: rgba(15, 138, 85, 0.25);

  /* hot/trending 액센트 (블오KEY 오늘추천·트렌딩 뉴스 전용 — red→orange) */
  --color-hot: #ef4444;            /* trending 메인 (빨강) */
  --color-hot-soft: #f97316;       /* 그라데이션 보조 (주황) */
  --color-hot-text: #dc2626;       /* hot 배경 위 텍스트/뱃지 글자 (진한 빨강) */
  --color-hot-bg: rgba(239, 68, 68, 0.05);    /* 카드/히어로 옅은 배경 (0.03~0.06 통합) */
  --color-hot-bg-strong: rgba(239, 68, 68, 0.10); /* hover/뱃지 배경 (0.08~0.10 통합) */
  --color-hot-border: rgba(239, 68, 68, 0.20);
  --color-hot-border-strong: rgba(239, 68, 68, 0.25);
  --color-hot-soft-bg: rgba(249, 115, 22, 0.03); /* 그라데이션 보조 stop */

  /* 순위 메달 (절제된 네이비/골드 — 무지개/메탈릭 그라데이션 대체) */
  /* 1위만 골드로 강조, 2·3위는 차분한 중성 톤. 색만으로 구분 금지 → 숫자 라벨 항상 동반 */
  --rank-1-bg: rgba(197, 84, 122, 0.14);   /* 로즈 틴트(1위 강조 — 앱 시그니처) */
  --rank-1-fg: #AC3454;                     /* 로즈 위 텍스트 */
  --rank-1-ring: rgba(197, 84, 122, 0.45);
  --rank-2-bg: rgba(15, 17, 48, 0.06);      /* 네이비 틴트(중성) */
  --rank-2-fg: var(--text-on-light-sub);
  --rank-3-bg: rgba(15, 17, 48, 0.04);
  --rank-3-fg: var(--text-on-light-hint);
  --rank-self-bg: rgba(197, 84, 122, 0.06); /* 본인 행 배경 틴트(로즈) */
  --rank-self-accent: var(--gold);          /* 본인 행 좌측 보더 */

  /* 상태 컬러 */
  --green: #0F8A55;
  --green-light: rgba(15,138,85,0.08);
  --green-border: rgba(15,138,85,0.25);
  --blue: #3b82f6;
  --blue-light: rgba(59,130,246,0.08);
  --blue-border: rgba(59,130,246,0.25);
  --purple: #6E79D6;                     /* 로즈앱 정합 — 보라 대신 페리윙클(인-팔레트) */
  --purple-light: rgba(110,121,214,0.08);
  --purple-border: rgba(110,121,214,0.25);
  --red: #e24b4a;
  --red-light: rgba(226,75,74,0.08);
  --red-border: rgba(226,75,74,0.25);
  --orange: #f59e0b;
  --orange-light: rgba(245,158,11,0.08);
  --orange-border: rgba(245,158,11,0.25);

  /* 카드 배경 변형 */
  --card-bg-white: #ffffff;
  --card-bg-warm: #f8f9fc;
  --card-bg-light: #f5f7fa;

  /* 폰트 사이즈 스케일 — 각 단계 간 최소 1.5px 이상 차이 */
  --text-xs:   0.68rem;   /* 10.9px — 메타, 뱃지 라벨 */
  --text-sm:   0.78rem;   /* 12.5px — 보조 텍스트, 뱃지 */
  --text-base: 0.875rem;  /* 14px   — 기본 본문 */
  --text-md:   0.975rem;  /* 15.6px — 중간 강조 */
  --text-lg:   1.075rem;  /* 17.2px — 카드 제목 */
  --text-xl:   1.25rem;   /* 20px   — 섹션 제목 */
  --text-2xl:  1.375rem;  /* 22px   — 페이지 헤더 (P1-6) */
  --text-3xl:  1.5rem;    /* 24px   — 대형 제목 (P1-6) */

  /* 상태/위험 텍스트 추가 컬러 */
  --color-danger-text: #ff7b7a; /* P1-7: 다크 배경 위 danger 텍스트 */

  /* ── 간격 스케일 (4px 베이스) — §12-5 임의 간격 해소용 단일 소스 ──
     margin/padding/gap은 이 토큰만 사용. 5/7/11px 같은 비-4배수 금지. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── 인터랙션 상태 컬러 (매직 hex 제거용) ──
     기존 곳곳의 #2a2a4a(navy hover), #fef2f2(danger hover) 리터럴을 대체 */
  --navy-hover: #1a2c66;     /* var(--navy)=#10204d 의 hover 짝 */
  --danger-hover: #fbeaea;   /* danger 보조 버튼 hover 배경 */

  /* ── 자간(letter-spacing) 스케일 ──
     음수 트래킹은 대형 디스플레이/로고에만. 대문자 라벨(그룹헤더/eyebrow/워드마크)은
     반드시 양수 트래킹으로 "소문자캡 프리미엄" 유지. 본문은 normal(0). */
  --tracking-tight: -0.01em;  /* 로고/대형 디스플레이 */
  --tracking-normal: 0;       /* 본문 */
  --tracking-label: 0.08em;   /* 대문자 그룹 라벨/eyebrow */
  --tracking-wide: 0.14em;    /* 소문자캡 워드마크(BLO·CREW 등) */
}

/* 기본 폰트 설정 */
body {
  font-family: var(--font-korean);
  background: var(--page-bg);
}

/* ── 전역 shimmer 애니메이션 ───────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* 스켈레톤 공용 클래스 */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-section);
}

/* ── 전역 포커스 링 (키보드 접근성) ────────────────────────── */
/* 사이드바 버튼 */
.sidebar-nav button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: var(--radius-section);
}

/* 일반 버튼 — 기존 onMouseOver 방식과 충돌 없이 키보드 전용 */
button:focus-visible:not(.sidebar-nav button) {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--radius-button);
}

/* 입력 필드 포커스 — 기존 onFocus inline style 보완 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none; /* inline onFocus 가 처리 */
}

/* ── 접근성 보조 ──────────────────────────────────────────── */
/* 모바일 바텀 nav 포커스 */
.mobile-bottom-nav button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -1px;
  border-radius: var(--radius-inner);
}

/* 선택 전용 시각화 — 키보드 네비게이션 시 숨김 텍스트 표시 */
.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;
}

/* 색상 대비 보정 — 라이트 배경에서 hint 텍스트 */
/* var(--text-on-light-hint) = #aaa → 명도비 2.9:1 (WCAG AA 기준 미달)
   주요 정보에는 이 클래스로 대비 보정 적용 */
.text-accessible {
  color: #6C7189; /* 네이비 틴트, 명도비 4.80:1 (WCAG AA 통과) */
}

/* ── 인터랙티브 카드 hover 시스템 ────────────────────────── */
/* 카드에 className="card-interactive" 추가 시 hover/active 피드백 자동 적용 */
.card-interactive {
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.08);
}

.card-interactive:active {
  transform: translateY(-1px) scale(0.995);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.05),
    0 6px 16px rgba(0, 0, 0, 0.06);
  transition-duration: 0.08s;
}

/* ── 탭바: 모바일 짧은 라벨 + 스크롤 힌트 ──────────────── */
.kw-tab-label-short { display: none; }

.kw-tabbar-wrap { position: relative; }

/* 탭바 스크롤 힌트: 오른쪽 페이드 */
.kw-tabbar-wrap::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 32px; height: 100%;
  background: linear-gradient(to right, transparent, var(--page-bg));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

/* 탭바 스크롤바 숨김 */
.kw-tabbar::-webkit-scrollbar { display: none; }

/* ── "지금 뜨는 키워드" 기본 상태 ────────────────────────── */
.kw-trend-chips {
  position: relative;
}

/* ── 키워드 분석기 모바일 최적화 ─────────────────────────── */
@media (max-width: 600px) {
  /* 탭 라벨: 짧은 버전 표시 + 패딩 축소 */
  .kw-tab-label-full { display: none; }
  .kw-tab-label-short { display: inline; }
  .kw-tab-btn {
    padding: 0.4rem 0.7rem !important;
    font-size: var(--text-xs) !important;
    gap: 0.2rem !important;
  }
  /* 스크롤 힌트 표시 */
  .kw-tabbar-wrap::after {
    opacity: 1;
  }

  /* "지금 뜨는 키워드" 접힘 — 1줄(~30px)만 표시 */
  .kw-trend-chips {
    max-height: 30px;
    overflow: hidden;
  }
  .kw-trend-section.is-expanded .kw-trend-chips {
    max-height: none;
  }
  /* 더보기 버튼 모바일 표시 */
  .kw-trend-expand-btn {
    display: inline-flex !important;
  }

  /* KPI 카드 그리드: 모바일 2×2 */
  .kw-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4rem !important;
  }
  .kw-stats-grid > div {
    padding: 0.55rem 0.25rem !important;
  }

  /* 비교 수치 그리드: 2→1열 */
  .kw-compare-grid {
    grid-template-columns: 1fr !important;
  }

  /* 분석 요약 배너 줄 바꿈 허용 */
  .kw-summary-banner {
    gap: 0.35rem !important;
  }

  /* 내용이 긴 제목 추천: 버튼 전체 너비 */
  .kw-title-row {
    flex-wrap: wrap !important;
  }

  /* 블루오션 카드 수직 정렬 */
  .kw-blueocean-card {
    flex-direction: column !important;
  }

  /* 트렌드 차트 범례 줄 바꿈 */
  .kw-chart-legend {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
}

/* ── pulse 애니메이션 (로딩 스켈레톤용) ──────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── 전역 spin 애니메이션 ───────────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── 전역 fadeInUp 애니메이션 ──────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 밤의 정원 진입 모션 (2026-07-10, 대시보드 전 영역 공통) ──
   .ng-stagger: 페이지 루트에 부여 → 직계 자식들이 순차 페이드업.
   .ng-enter:   단일 요소 페이드업.
   fill-mode backwards만 사용 — 종료 후 인라인 transform(framer-motion hover)을 덮지 않음.
   reduced-motion은 위 P0-3 전역 가드가 자동 무효화. */
@keyframes ngCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.ng-enter { animation: ngCardIn 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) backwards; }
.ng-stagger > * { animation: ngCardIn 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) backwards; }
.ng-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.ng-stagger > *:nth-child(2)  { animation-delay: 60ms; }
.ng-stagger > *:nth-child(3)  { animation-delay: 120ms; }
.ng-stagger > *:nth-child(4)  { animation-delay: 180ms; }
.ng-stagger > *:nth-child(5)  { animation-delay: 240ms; }
.ng-stagger > *:nth-child(6)  { animation-delay: 300ms; }
.ng-stagger > *:nth-child(7)  { animation-delay: 360ms; }
.ng-stagger > *:nth-child(8)  { animation-delay: 420ms; }
.ng-stagger > *:nth-child(n+9) { animation-delay: 480ms; }

/* ── P0-3: prefers-reduced-motion 지원 ───────────────────────── */
/* 전정기관 장애 사용자 보호 — 모든 애니메이션/트랜지션 최소화 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── P1-8: hover 유틸리티 클래스 (JS onMouseEnter 대체) ────────── */

/* 기본 카드 리프트 — translateY(-2px) + shadow */
/* 기존 .card-interactive 그대로 유지, 추가 변형만 아래 정의 */

/* 골드 그림자 리프트 */
.hover-gold-lift {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.hover-gold-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.22);
}
.hover-gold-lift:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: 0.08s;
}

/* 인라인 리스트 아이템 호버 (배경 변경) */
.hover-bg-light {
  transition: background var(--transition-fast);
}
.hover-bg-light:hover {
  background: var(--card-bg-light);
}

/* 다크 배경 위 아이템 호버 */
.hover-bg-dark {
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.hover-bg-dark:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* 단순 opacity 리프트 */
.hover-opacity {
  transition: opacity var(--transition-fast);
}
.hover-opacity:hover {
  opacity: 0.8;
}

/* 테이블/리스트 행 호버 */
.hover-row {
  transition: background var(--transition-fast);
  cursor: pointer;
}
.hover-row:hover {
  background: rgba(201, 168, 76, 0.04);
}

/* ── 숫자 유틸: 표/통계/리더보드 수치는 자릿수 정렬(tabular) 권장 ── */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── 포커스 링: 전역 button/input :focus-visible 외에
   커스텀 클릭 요소(div→button 전환 중간 단계 등)에 직접 부여 ── */
.focus-ring:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── 누름 피드백: 버튼/카드에 물리적 클릭감 (reduced-motion 자동 무효) ── */
.pressable {
  transition: transform var(--transition-fast);
}
.pressable:active {
  transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
  .pressable:active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   마이그레이션 규칙 (디자인 토큰 점진 적용 — design-tokens.css 오너 가이드)
   ────────────────────────────────────────────────────────────────
   원칙: 토큰/유틸은 "추가만". 전역 일괄 치환(sed) 금지 — 화면 깨짐 위험.
   화면을 만질 때 그 파일 안에서만 아래 규칙으로 점진 전환한다.

   1) 간격: margin/padding/gap → var(--space-*). 5/7/11px 등 비-4배수 제거.
   2) 폰트: 임의 rem(0.82rem 등) → var(--text-xs~3xl). 10.9px 미만 신규 금지.
   3) navy drift: '#1a1a2e' / '#2a2a4a' raw + `var(--navy, #1a1a2e)` 류
      fallback hex → 전부 var(--navy)(#12122a) / var(--navy-hover).
   4) page-bg drift: `var(--page-bg, #f4f4f6|#e8e8ec)` fallback 제거 → var(--page-bg).
   5) shadow drift: 신규 raw 그림자 금지. var(--shadow-card/-soft/-heavy)만,
      opacity ≤ 0.12, 컬러 그림자(골드/검정) 지양(§12-4).
   6) 상태색: '#4CAF50'→var(--color-success), '#E24B4A'→var(--color-danger),
      '#3b82f6'→var(--blue) 등 의미 매핑. 회색 → --text-on-light-* / --border-light.
   7) 브랜드색 예외: 카카오 #FEE500, 네이버 #03C75A 는 토큰화하지 않고 named 상수 유지.
   8) 숫자 표시(리더보드/통계/게이지)는 .tabular 동시 부여.
   9) hover/active는 인라인 onMouseOver 대신 .hover-* / .card-interactive / .pressable 사용.

   적용 순서(고트래픽 우선): Sidebar/MainLayout → Home → 블오KEY → 로그인/매칭 → 리더보드 → 관리자/기타.
   ════════════════════════════════════════════════════════════════ */