/*
 * toonrail — 디자인 토큰 (정본)
 * 이름은 Tailwind 4 @theme 이름공간을 따른다. 정적 사이트라 브라우저가 읽도록 :root 에 둔다 —
 * Next.js 로 승급할 때 이 블록을 globals.css 의 @theme 으로 그대로 옮긴다.
 * 규칙·대비 실측은 _design/DESIGN.md. style.css 는 여기 있는 var() 만 쓴다.
 */
:root {
  /* ── 색 ─────────────────────────────────────────────────────────────
   * 채도 높은 두 색(주홍 바탕 · 울트라마린 칸)을 평면으로 쓴다. 그라데이션 0.
   * 초록·노랑 주색 없음 — 네이버·카카오 연상 차단. */
  --color-bg: #ff5a3c;          /* 주홍 — 페이지 바탕 = 칸새. 이 위 글자는 먹만 */
  --color-bg-deep: #e8472b;     /* 주홍 망점·눌린 칸 — 장식 전용 */
  --color-bg-night: #151313;    /* 뷰어 둘레(읽는 동안만) · "끝" 칸 */
  --color-surface: #ffffff;     /* 칸 안 — 순백(종이색 아님) */
  --color-band: #2b4dff;        /* 울트라마린 칸 — 두 번째 바탕(효과음·순위·켜진 탭). 이 위 글자는 흰색 */
  --color-band-deep: #1d38d6;   /* 울트라마린 망점 — 장식 전용 */

  --color-ink: #151313;         /* 먹 — 칸 선·본문 */
  --color-ink-soft: #625b59;    /* 보조 글자 — 흰 칸 위에서만 */
  --color-ink-night: #b8b0ae;   /* 보조 글자 — 밤 둘레 위에서만 */
  --color-white: #ffffff;       /* 파랑·밤 위 글자 */
  --color-accent: #2b4dff;      /* 강조 — 흰 칸 위 링크·순위 변동·켜진 상태 */
  --color-sfx: #ff5a3c;         /* 효과음 글자 — 흰 칸·밤 위, 큰 글자만(흰 칸 위 3.10:1) */
  --color-pencil: #9ed8f5;      /* 논포토 블루 연필 — 콘티 선·연필 레터링, 장식 전용(글자 정보 금지) */
  --color-focus: #151313;       /* 포커스 링 — 주홍·흰 위. 파랑·밤 위에서는 --color-white */

  /* ── 서체 — 서가 두 가족만 ─────────────────────────────────────────
   * Black Han Sans: /_shared/fonts/black-han-sans/font.css (한 굵기 400 — 이미 가장 굵다. font-weight 를 올리지 않는다)
   * Pretendard:     /_shared/pretendard.css ("Pretendard Variable") */
  --font-display: "Black Han Sans", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;

  --font-weight-body: 450;
  --font-weight-strong: 700;
  --font-weight-meta: 600;

  /* ── 글자 크기 — 효과음:본문 ≈ 11:1 (렌즈: 극단적 크기 대비) ────────── */
  --text-sfx: clamp(5.5rem, 12vw, 11rem);          /* 효과음 칸의 거대 요일 글자 · "끝" */
  --text-sfx--line-height: 0.85;
  --text-display: clamp(2.75rem, 5.2vw, 5.5rem);   /* 작품명(작품 페이지) · 정보 h1 */
  --text-display--line-height: 0.95;
  --text-rank: clamp(3.5rem, 6vw, 5.5rem);         /* 순위 숫자 1·2·3 */
  --text-rank--line-height: 0.8;
  --text-h1: clamp(1.75rem, 2.6vw, 2.5rem);        /* 페이지 h1 · 회차 제목 */
  --text-h1--line-height: 1.05;
  --text-h2: clamp(1.375rem, 2vw, 1.75rem);        /* 칸 머리(인기 순위·회차 142) */
  --text-h2--line-height: 1.15;
  --text-genre: clamp(2.5rem, 4.5vw, 4.5rem);      /* 장르 칸 효과음 */
  --text-genre--line-height: 0.9;
  --text-title: 1.0625rem;                         /* 표지 아래 작품명 (17px) */
  --text-title--line-height: 1.3;
  --text-body: 1rem;                               /* 본문 16px — 모바일 입력 확대 방지선이기도 하다 */
  --text-body--line-height: 1.65;
  --text-balloon: 0.9375rem;                       /* 말풍선 대사 15px */
  --text-balloon--line-height: 1.45;
  --text-small: 0.875rem;                          /* 작가·날짜 14px */
  --text-small--line-height: 1.5;
  --text-micro: 0.75rem;                           /* 칸 번호·비율 캡션 12px — 이보다 작게 쓰지 않는다 */
  --text-micro--line-height: 1.3;

  --tracking-display: -0.02em;                     /* 한글 display 는 살짝 조인다 */
  --tracking-micro: 0.08em;                        /* 칸 번호 #01 · NEW · UP */
  --leading-tight: 1.1;

  /* ── 간격 — 칸새 하나가 단위다 ───────────────────────────────────── */
  --spacing: 4px;                  /* Tailwind 기본 단위 */
  --spacing-gutter: 14px;          /* 칸새 — 데스크톱. 블록 사이·행 사이 전부 이 값(구간 사이는 ×2) */
  --spacing-gutter-sm: 10px;       /* 칸새 — 모바일 */
  --spacing-page: 32px;            /* 바깥 여백 — 데스크톱 */
  --spacing-page-sm: 12px;         /* 바깥 여백 — 모바일 */
  --spacing-panel: 20px;           /* 칸 안쪽 여백 */
  --spacing-panel-sm: 12px;
  --spacing-rule: 3px;             /* 칸 먹선 굵기 */
  --spacing-rule-thin: 2px;        /* 모바일 칸 선 · 목록 행 선 · 연필선 */
  --spacing-stamp: 6px;            /* 스탬프 그림자 오프셋 */
  --spacing-bar: 64px;             /* 상단바 높이 */
  --spacing-bar-sm: 56px;
  --spacing-viewer-bar: 48px;      /* 뷰어 얇은 바 */
  --spacing-strip: 690px;          /* 뷰어 컷 스트립 폭 (웹툰 원고 폭) */
  --spacing-tap: 44px;             /* 최소 터치 타깃 */

  --container-page: 1376px;        /* 1440 - 32×2 */

  --breakpoint-sm: 640px;          /* 모바일 → 태블릿 (미디어 쿼리에는 값을 직접 쓴다 — 여기는 기록) */
  --breakpoint-lg: 1024px;         /* 태블릿 → 데스크톱 12열 */

  /* ── 모서리 — 0. 둥근 것은 말풍선뿐 ───────────────────────────────── */
  --radius-none: 0px;
  --radius-balloon: 50%;           /* 말풍선 타원 */

  /* ── 그림자 — 한 화면에 하나(지금 누를 것). 흐림 0 ────────────────── */
  --shadow-stamp: var(--spacing-stamp) var(--spacing-stamp) 0 0 var(--color-ink);
  --shadow-stamp-pressed: 0 0 0 0 var(--color-ink);
  --shadow-none: none;

  /* ── 비율 — 자리표시자 data-ratio 와 같다 ─────────────────────────── */
  --aspect-cover: 3 / 4;
  --aspect-thumb: 4 / 3;
  --aspect-cut-tall: 1 / 2;
  --aspect-cut-portrait: 2 / 3;
  --aspect-cut-wide: 16 / 9;
  --aspect-cut-land: 3 / 2;
  --aspect-cut-square: 1 / 1;
  --aspect-cut-band: 23 / 10;

  /* ── 모션 — "찍힘": 튀어나오고 눌린다. 흐르지 않는다 ──────────────── */
  /* impeccable-disable-next-line bounce-easing: 한 번 넘쳤다 서는 "찍힘"(Pop in)이 이 템플릿의 모션 성격이다(DESIGN 모션 규칙) — 버스트·별점 칸 두 곳, 반복 없음, 260ms 이하 */
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Pop in — 살짝 넘쳤다 돌아온다 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* 표지 교체·바 숨김 */
  --ease-press: cubic-bezier(0.2, 0, 0, 1);        /* Press / Tap feedback */

  --animate-pop-in: tr-pop-in 260ms var(--ease-snap) both;       /* "오늘!" 버스트 — 켜질 때 1회 */
  --animate-cover-in: tr-cover-in 180ms var(--ease-out) both;    /* 요일 전환 때 표지 — 40ms 간격 Stagger */
  --animate-star-in: tr-star-in 140ms var(--ease-snap) both;     /* 별점 채움 — 20ms 간격 Stagger */
}

@keyframes tr-pop-in {
  from { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  to { opacity: 1; transform: none; }
}

@keyframes tr-cover-in {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes tr-star-in {
  from { transform: scale(0.7); }
  to { transform: none; }
}

/* 줄인 모션 — 상태는 바뀌고 움직임은 0. 스크롤 연동(진행 막대)도 여기서 끈다(JS 가 width 로만 갱신). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animate-pop-in: none;
    --animate-cover-in: none;
    --animate-star-in: none;
  }
}