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

:root {
  /* 핵심 컬러 */
  --navy: #12122a;
  --navy-deep: #0e0e22;        /* 사이드바/딥 배경 그라데이션용 (navy보다 진함) */
  --charcoal: #1e1e3a;
  --gold: #c9a84c;
  --off-white: #f5f5f7;
  --white: #ffffff;
  --page-bg: #e4e4ea;
  --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: #12122a;
  --text-on-light-sub: #666666;
  --text-on-light-dim: #767676;
  --text-on-light-hint: #767676;
  --text-on-light-muted: #888888;
  --text-on-light-faint: #bbbbbb; /* P1-7: 아주 연한 보조 텍스트 */
  --text-on-light-ghost: rgba(18, 18, 42, 0.20); /* 미래/비활성 날짜 등 극희미 (navy 틴트) */

  /* 골드 액센트 */
  --gold-badge-bg: rgba(201, 168, 76, 0.08);
  --gold-badge-border: rgba(201, 168, 76, 0.25);
  --gold-badge-strong-bg: rgba(201, 168, 76, 0.1);
  /* 다크(네이비) 카드 위 골드 강조 표면/보더 (CrewLounge 이번주·1위 등) */
  --gold-surface-on-dark: rgba(201, 168, 76, 0.18);
  --gold-border-on-dark: rgba(201, 168, 76, 0.35);
  --gold-border-strong: rgba(201, 168, 76, 0.5);

  /* 보더 & 구분선 */
  --border-light: #f0f0f2;
  --border-input: #e0e0e0;            /* 폼 컨트롤(입력/텍스트영역) 보더 */
  --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(201, 168, 76, 0.7);         /* 다크 위 보조 골드 텍스트 */
  --gold-surface-on-dark-strong: rgba(201, 168, 76, 0.25);
  --gold-light: #e8c66a;                            /* 골드 밝은 변형(프로그레스 끝) */
  --shadow-gold-glow: 0 4px 18px rgba(201, 168, 76, 0.15); /* 골드 글로우(§12 한도 0.15) */
  --shadow-gold-glow-modal: 0 0 48px rgba(201, 168, 76, 0.15); /* 축하 모달 글로우(완화) */

  /* 잔디밭 강도 스케일 (MonthlyGrass — 0은 --border-light) */
  --grass-1: rgba(201, 168, 76, 0.30);
  --grass-2: rgba(201, 168, 76, 0.60);
  --grass-3: rgba(201, 168, 76, 0.95);
  --tooltip-bg: rgba(18, 18, 42, 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(18, 18, 42, 0.08);
  /* --shadow-card: 3레이어 (border ring + 미세 lift + ambient depth) */
  --shadow-card: 0 0 0 1px rgba(18, 18, 42, 0.06), 0 2px 4px rgba(18, 18, 42, 0.04), 0 8px 28px rgba(18, 18, 42, 0.08);
  --shadow-card-hover: 0 0 0 1px rgba(18, 18, 42, 0.08), 0 4px 14px rgba(18, 18, 42, 0.08), 0 14px 36px rgba(18, 18, 42, 0.11);
  --shadow-card-gold: 0 0 0 1px rgba(201, 168, 76, 0.18), 0 4px 18px rgba(201, 168, 76, 0.12), 0 8px 28px rgba(18, 18, 42, 0.06);
  --shadow-heavy: 0 0 0 1px rgba(18, 18, 42, 0.06), 0 16px 48px rgba(18, 18, 42, 0.18);
  --shadow-soft: 0 0 0 1px rgba(18, 18, 42, 0.05), 0 2px 8px rgba(18, 18, 42, 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: #ececee;
  --skeleton-shine: rgba(255, 255, 255, 0.7);

  /* 비활성 버튼 */
  --disabled-bg: #e2e2e8;
  --disabled-color: #767676;

  /* 시맨틱 색상 — 상태/피드백 */
  --color-success: #4CAF50;
  --color-success-bg: rgba(76, 175, 80, 0.08);
  --color-success-bg-strong: rgba(76, 175, 80, 0.12);
  --color-success-border: rgba(76, 175, 80, 0.25);
  --color-success-text: #2e7d32;

  --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: #3a7bd5;
  --color-info-bg: rgba(58, 123, 213, 0.10);
  --color-info-border: rgba(58, 123, 213, 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: #10b981;
  --color-emerald-bg: rgba(16, 185, 129, 0.08);
  --color-emerald-border: rgba(16, 185, 129, 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(201, 168, 76, 0.14);   /* 골드 틴트 */
  --rank-1-fg: #8a6d1f;                     /* 골드 위 텍스트 */
  --rank-1-ring: rgba(201, 168, 76, 0.45);
  --rank-2-bg: rgba(18, 18, 42, 0.06);      /* 네이비 틴트(중성) */
  --rank-2-fg: var(--text-on-light-sub);
  --rank-3-bg: rgba(18, 18, 42, 0.04);
  --rank-3-fg: var(--text-on-light-hint);
  --rank-self-bg: rgba(201, 168, 76, 0.06); /* 본인 행 배경 틴트 */
  --rank-self-accent: var(--gold);          /* 본인 행 좌측 보더 */

  /* 상태 컬러 */
  --green: #10b981;
  --green-light: rgba(16,185,129,0.08);
  --green-border: rgba(16,185,129,0.25);
  --blue: #3b82f6;
  --blue-light: rgba(59,130,246,0.08);
  --blue-border: rgba(59,130,246,0.25);
  --purple: #8b5cf6;
  --purple-light: rgba(139,92,246,0.08);
  --purple-border: rgba(139,92,246,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: #faf8f5;
  --card-bg-light: #f8f8fa;

  /* 폰트 사이즈 스케일 — 각 단계 간 최소 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: #1e1e3a;     /* var(--navy)=#12122a 의 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: #767676; /* 명도비 4.54: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;
  }

  /* 통계 스탯 그리드: 3열 유지 (소형화) */
  .kw-stats-grid {
    grid-template-columns: repeat(3, 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); }
}

/* ── 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 → 로그인/매칭 → 리더보드 → 관리자/기타.
   ════════════════════════════════════════════════════════════════ */