/* ===============================================================
   TC Team v2 — Magazine Design Tokens
   ===============================================================
   영문 우선. 한글은 fallback chain에 포함되어 추가 시 자동 활성화.
   The New Yorker editorial 시스템 기반. 색·타이포·간격·그리드 단일 진실.
   =============================================================== */

:root {
  /* ───────────── Color · Editorial Monochrome + Single Accent ───────────── */
  --paper:        #fbfaf6;          /* 종이 온기 (모니터에서 따뜻하게) */
  --paper-cream:  #f6f2ea;          /* 롱리드 강조 배경 */
  --paper-gutter: #f3efe6;          /* 좌우 광고 거터 (본문과 분리) */
  --paper-dark:   #0a0a0a;          /* 뉴스레터/푸터 다크 배경 */
  --ink:          #0a0a0a;          /* 본문 잉크 */
  --ink-2:        #2a2a2a;          /* 강조 본문 */
  --ink-3:        #4a4a4a;          /* 보조 텍스트 */
  --ink-quote:    #4a4a4a;          /* 인용부 잉크 (살짝 옅게) */
  --muted:        #6a6a6a;          /* 캡션, 메타 */
  --muted-2:      #9a9a9a;          /* 비활성, 광고 라벨 */
  --rule:         #e3e1dc;          /* 1px 일반 구분선 */
  --rule-2:       #c9c7c2;          /* 1px 강한 구분선 */
  --rule-strong:  #1a1a1a;          /* 2px 섹션 바 상단 */
  --accent:       #da0000;          /* 뉴요커 적색. 강조 단 하나 */
  --blue:         #1a3a6c;          /* Caslon 블루 — Subscribe 버튼 (Slack톤 회피) */

  /* ───────────── Typography · Stack ───────────── */
  /* 디스플레이 (대제목) — 영문 / 한글 / fallback */
  --font-display: 'Playfair Display', 'MaruBuri', 'Nanum Myeongjo', Georgia, serif;
  /* 본문 — 영문 / 한글 / fallback */
  --font-serif:   'Libre Caslon Text', 'KoPubWorldBatang', 'Noto Serif KR', Georgia, serif;
  /* UI / 산세리프 — 한·영 모두 Pretendard */
  --font-sans:    'Pretendard Variable', 'Pretendard', Inter, system-ui, -apple-system, sans-serif;
  /* 모노스페이스 (터미널 일러스트, 코드) */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ───────────── Type Scale · clamp 기반 반응형 ───────────── */
  /* 매거진 위계 (어드바이저 권고 반영):
     Cover > Standfirst > Pull-quote > Section > Article > Dek > Body > Meta > Overline */
  --fs-cover:        clamp(42px, 6vw, 84px);     /* H1 — 커버 스토리 */
  --fs-standfirst:   clamp(22px, 2.2vw, 28px);   /* 커버 스토리 표준 부제 italic */
  --fs-pull:         clamp(32px, 3.6vw, 48px);   /* 풀 페이지 인용구 italic */
  --fs-section:      clamp(26px, 2.4vw, 32px);   /* 섹션 바 italic */
  --fs-article:      clamp(22px, 1.8vw, 26px);   /* 카드 H3 */
  --fs-dek:          clamp(17px, 1.4vw, 21px);   /* 카드 부제 italic */
  --fs-body:         18px;                        /* 본문 기본 (어드바이저 권고: 17→18) */
  --fs-body-lg:      19px;                        /* 본문 (긴 글) */
  --fs-meta:         14px;                        /* 캡션, byline */
  --fs-micro:        11px;                        /* 카테고리, 스몰캡 */
  --fs-overline:     10px;                        /* Overline (컬럼명 등) */
  --fs-dropcap:      96px;                        /* Drop cap 3-line 정석 */

  /* ───────────── Line Height ───────────── */
  --lh-tight:     1.05;     /* 큰 타이틀 */
  --lh-snug:      1.2;      /* 중제목 */
  --lh-normal:    1.55;     /* UI */
  --lh-relaxed:   1.7;      /* 본문 (영문) */
  --lh-loose:     1.85;     /* 한글 본문 */

  /* ───────────── Letter Spacing ───────────── */
  --ls-tight:     -0.01em;  /* 디스플레이 */
  --ls-normal:    0;
  --ls-wide:      0.08em;   /* 한글 스몰캡 */
  --ls-wider:     0.18em;   /* 영문 스몰캡 (byline, category) */
  --ls-widest:    0.28em;   /* 섹션 카테고리 라벨 */
  --ls-overline:  0.30em;   /* Overline / column name */

  /* ───────────── Spacing · 4px base ───────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;     /* 컨테이너 좌우 패딩 */
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-20:  80px;     /* 섹션 수직 패딩 */
  --sp-24:  96px;

  /* ───────────── Layout · Grid (어드바이저 권고: 1240 → 1200, gap 28 → 32) ───────────── */
  --container-max:    1200px;        /* 본문 최대 폭 (밀도 살짝 조이기) */
  --container-narrow: 920px;         /* 본문 내 단일 컬럼 (긴 글) */
  --container-wide:   1440px;        /* 와이드 (광고 사이드바 포함) */
  --gutter:           32px;          /* 컬럼 간격 */
  --col-count:        12;            /* 12-column grid */
  --ad-width:         180px;         /* 광고 사이드바 폭 (어드바이저 권고: 160→180) */
  --gutter-ad:        180px;         /* 광고 거터 폭 */
  /* 카드 비율: 4:3 → 3:2 로 눕혀 밀도 살림 */
  --card-aspect:      3 / 2;
  --hero-aspect:      16 / 8;

  /* ───────────── Border / Rule ───────────── */
  --border-thin:      1px solid var(--rule);
  --border-thick:     2px solid var(--ink);
  --border-section:   1px solid var(--ink);

  /* ───────────── Shadow (절제) ───────────── */
  --shadow-card:      0 1px 3px rgba(10, 10, 10, 0.06);
  --shadow-hero:      8px 8px 0 var(--rule);

  /* ───────────── Motion ───────────── */
  --ease:             cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:         150ms;
  --dur-base:         250ms;
  --dur-slow:         400ms;

  /* ───────────── Z-index ───────────── */
  --z-header:         100;
  --z-modal:          200;
  --z-toast:          300;
}

/* ───────────── Dark mode 토큰 (옵션 — 매거진은 light 우선) ───────────── */
/* 매거진 톤은 light가 정체성. dark는 미지원. 필요시 .dark 클래스로 한정 */

/* ───────────── 한국어 본문 자동 조정 ───────────── */
[lang="ko"] body,
[lang="ko"] .body-text {
  word-break: keep-all;          /* 단어 중간 줄바꿈 방지 */
  line-height: var(--lh-loose);  /* 한글은 더 여유롭게 */
}

[lang="ko"] em,
[lang="ko"] .accent-text {
  font-style: normal;            /* 한글에서 italic 부자연 */
  border-bottom: 3px solid var(--accent);
  padding-bottom: 2px;
  color: var(--accent);
}

/* ───────────── Reduced Motion 존중 ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}