/* ============================================================
   YouTuMap design tokens — v5 (single source of truth)
   색·타이포·radius·shadow·크기 토큰과 전역 공용 유틸만 정의한다.
   컴포넌트 CSS(static/style.css)·인라인 스타일은 var() 참조만 허용.
   ★ raw hex 는 이 파일에만 존재해야 함 (grep 검사 제외 파일).
   ============================================================ */
:root {
  /* ── 브랜드: 장식용과 흰 텍스트 CTA용을 분리 (WCAG AA) ── */
  --brand: #e8442e;            /* 장식·아이콘·보더·핀 (비텍스트 전용, 흰배경 3.9:1) */
  --brand-hover: #d13a25;
  --brand-cta-bg: #c73320;     /* 흰 텍스트 버튼 배경 (5.4:1) */
  --brand-cta-hover: #a82a19;
  --brand-dark: #c73320;       /* (구 토큰 별칭 — 텍스트용) */
  --brand-text: #c73320;       /* 브랜드 컬러 텍스트·링크·에러 (5.4:1) */
  --brand-tint: #fdeae7;       /* 브랜드 옅은 배경 */
  --brand-cluster-bg: rgba(232, 68, 46, .22);  /* 지도 클러스터 외곽 링 */
  /* 로고 전용 그라디언트 — 등록 CTA와 같은 레드 계열 (--brand → --brand-cta-bg), 그라디언트만 가미 */
  --grad-logo: linear-gradient(135deg, #e8442e 0%, #c73320 100%);
  /* 브랜드 그라디언트 — 1벌만 (아바타·포인트 전용) */
  --grad-brand: linear-gradient(135deg, #ff5a3c 0%, #ffab2e 100%);
  --grad-fallback: linear-gradient(135deg, #fdeae7 0%, #ffe9d1 100%);
  /* ── 뉴트럴 ── */
  --ink: #1c1c1e;
  --ink-hover: #3a3a3c;
  --muted: #6e6e73;            /* 보조 텍스트 (흰배경 5.0:1) */
  --text-muted: #6e6e73;
  --line: #e5e5ea;
  --line-strong: #d1d1d6;
  --bg: #f7f7f8;
  --surface: #fff;             /* 카드·패널·입력 배경 */
  --on-accent: #fff;           /* 브랜드/잉크 배경 위 텍스트·아이콘 */
  --video-bg: #000;            /* 영상 임베드 배경 */
  --ok: #1e7e3c;               /* 성공 (5.1:1) */
  /* ── 오버레이/스크림 · 스켈레톤 ── */
  --scrim: rgba(28, 28, 30, .74);
  --skeleton-a: #ececf0;
  --skeleton-b: #f7f7f8;
  /* ── 타이포 3단계: caption 12 / body 15 / h1 28(모바일 22) ── */
  --fs-caption: 12px;
  --fs-body: 15px;
  --fs-h1: 28px;
  /* ── radius 스케일: input 8 / btn 10 / card 12 / modal 16 ── */
  --radius-input: 8px;
  --radius-btn: 10px;
  --radius-card: 12px;
  --radius-modal: 16px;
  /* ── shadow 3종 ── */
  --shadow-1: 0 1px 4px rgba(28, 28, 30, .08);
  --shadow-2: 0 4px 16px rgba(28, 28, 30, .14);
  --shadow-3: 0 12px 36px rgba(28, 28, 30, .20);
  /* ── 크기 ── */
  --btn-h: 44px;               /* 터치 타깃 ≥44px */
  --nav-h: 52px;
  --panel-w: 372px;            /* 지도 우측 피드 패널 폭 (JS 리사이즈 시 재정의) */
  --sheet-w: var(--panel-w);   /* 장소 상세 시트 폭 = 목록(패널)과 항상 동일 */
  --focus-ring: 0 0 0 3px rgba(232, 68, 46, .16);
}

/* ── 타이포 유틸 (3단계 외 임의 px 금지) ── */
.text-h1 {
  font-size: var(--fs-h1); font-weight: 700; line-height: 1.3; letter-spacing: -.02em;
}
@media (max-width: 640px) {
  .text-h1 { font-size: 22px; }
}
.text-body { font-size: var(--fs-body); line-height: 1.5; }
.text-caption { font-size: var(--fs-caption); }

/* ── 접근성: 키보드 focus 전역 가시화 ── */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── skeleton shimmer + 썸네일 fallback 유틸 ── */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
/* img가 없는(또는 로드 실패로 제거된) 썸네일 컨테이너용 — 브랜드 fallback SVG */
.thumb-fallback {
  background: url("../img/thumb_fallback.svg") center / cover no-repeat !important;
  animation: none !important;
}