/* ============================================================
   누구픽 — 디자인 토큰 (authenticity-patch §23.1)
   무채색 80% + 보조 15% + 파랑 5%
   ============================================================ */

:root {
  /* 컬러 시스템 — 정통 매체 톤 */
  --ink: #16181F;            /* 메인 (먹색) — 헤드라인/본문/로고 */
  --paper: #FAF8F3;          /* 베이지 종이 — 본문 배경 */
  --deep-blue: #0F2447;      /* 신뢰 강조 — 저자/방법론 */
  --seal-red: #B23A2F;       /* 도장 빨강 — EDITOR'S PICK / 정정 */
  --khaki: #8B7355;          /* 보조 텍스트 — 메타데이터 */
  --primary: #3478F6;        /* CTA 버튼/링크에만 한정 (강등) */
  --primary-dark: #1F5BD0;
  --hairline: #E8E6E0;       /* 보더 색상 */

  /* 무채색 시스템 */
  --bg: #FFFFFF;
  --bg-soft: #F6F5F1;
  --bg-card: #FFFFFF;
  --text: var(--ink);
  --text-sub: #4A4D57;
  --text-mute: var(--khaki);
  --border: var(--hairline);
  --border-strong: #CFD4DE;
  --good: #16A34A;
  --bad: #DC2626;
  --warn: #F59E0B;

  /* 그림자 — 매체감(각진) */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.06);

  /* 라디우스 — 8/6 통일 (각진 매체감) */
  --radius-card: 8px;
  --radius-button: 6px;
  --radius-pill: 999px;

  /* 인터랙션 토큰 */
  --ring: 0 0 0 3px rgba(52, 120, 246, 0.32);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;

  /* 카테고리 색상 코딩 (8종) */
  --cat-review: #3478F6;     /* 리뷰 = 파랑 */
  --cat-best: #16A34A;       /* 추천 = 초록 */
  --cat-vs: #EA7C1F;         /* 비교 = 주황 */
  --cat-guide: #7C3AED;      /* 가이드 = 보라 */
  --cat-learn: #8B7355;      /* 알아보기 = 카키 */
  --cat-avoid: #B23A2F;      /* 피해야 할 — 도장빨강 */
  --cat-voice: #0F2447;      /* 사용자 목소리 — 딥블루 */
  --cat-track: #4A4D57;      /* 추적 — 다크그레이 */
}

/* 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;
  }
}

/* 전역 포커스 링 */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}