/* ============================================================
   윤일기의 명사탐방 — Design Tokens v1  (2026-06-29)
   교차검증 소스
   ① 중앙플러스「ART TALK: Masters」 — 다크 에디토리얼·세이지 이탤릭·헤어라인·Contents 카드·Session 분할·유의사항 FAQ
   ② 이상헌 프랜차이즈 매거진(icanbiz)  — TOC 오버레이·고스트 넘버럴·stat row·이중언어 헤딩
   ③ 현재 명사탐방                       — 크림 페이퍼 베이스·테라코타 시그니처
   세 소스 공통 DNA = 폰트 4종 + ink/paper/accent 컬러모델 + Cormorant 케르닝 키커
   ============================================================ */
:root{
  /* ── Type families (3소스 공통) ─────────────────── */
  --ff-sans   : 'Pretendard', system-ui, sans-serif;   /* UI·본문 */
  --ff-serif  : 'Noto Serif KR', serif;                /* 한글 에디토리얼 제목 */
  --ff-display: 'Cormorant Garamond', serif;           /* 라틴 디스플레이·이탤릭 악센트 */
  --ff-impact : 'Black Han Sans', sans-serif;          /* 임팩트(절제) */

  /* ── Surface A · PAPER (명사탐방 기본 모드) ───────── */
  --paper      : #f4f1ea;
  --paper-pure : #fbfaf6;
  --ink        : #16181a;
  --ink-soft   : #33373b;
  --gray       : #8d8a82;
  --line       : #ddd8cc;   /* 페이퍼 헤어라인 */

  /* ── Surface B · INK (다크 에디토리얼 — JoongAng 차용) ─ */
  --d-bg       : #141517;   /* 다크 섹션 배경 */
  --d-bg-soft  : #1d1f22;   /* 패널(유의사항)·카드 표면 */
  --d-bg-deep  : #0e0f11;   /* 히어로 최암부 */
  --d-line     : #2a2d31;   /* 다크 헤어라인 */
  --d-text     : #e9e7e1;   /* 다크 제목 */
  --d-text-soft: #b6b9bd;   /* 다크 본문 */
  --d-text-mute: #8c9094;   /* 다크 캡션·메타 */

  /* ── Accent ───────────────────────────────────── */
  --accent      : #9a5b3f;  /* 명사탐방 시그니처 테라코타 */
  --accent-soft : #cbb6a8;  /* 테라코타 라이트(페이퍼 위 보조) */
  --accent-sage : #93b3a6;  /* JoongAng 차용: 다크 위 세리프 이탤릭 디스플레이 */
  --accent-pop  : #e0301e;  /* JoongAng 차용: 히어로 단일 강조(페이지당 1회 권장) */

  /* ── Type scale (clamp 반응형) ────────────────────── */
  --t-display : clamp(40px, 8.5vw, 92px);  /* masthead plate */
  --t-h1      : clamp(30px, 6vw,   62px);
  --t-h2      : clamp(25px, 3.4vw, 40px);
  --t-h3      : clamp(22px, 3vw,   34px);
  --t-lead    : clamp(17px, 2.2vw, 21px);
  --t-body    : 16px;
  --t-sm      : 14.5px;
  --t-cap     : 12.5px;

  /* ── Letter-spacing ──────────────────────────────── */
  --ls-kicker : .34em;   /* Cormorant uppercase 키커 */
  --ls-plate  : -.03em;  /* 큰 세리프 제목 */
  --ls-body   : -.01em;

  /* ── Layout / space ─────────────────────────────── */
  --wrap      : 1080px;  /* 명사탐방 기본 폭 */
  --wrap-wide : 1140px;  /* 매거진/그리드 폭(icanbiz) */
  --gut       : 28px;
  --sp-section: clamp(80px, 11vw, 120px);  /* 섹션 상하 패딩 */
  --sp-block  : clamp(40px, 6vw, 64px);

  /* ── Radii / lines ──────────────────────────────── */
  --r-card : 14px;
  --r-pill : 999px;
  --rule   : 1px;        /* 헤어라인 두께(전 소스 공통 1px) */
}

/* ── Base · 한글 줄바꿈 원칙 (The Edit 매거진 차용 · icanbiz와 일치) ──
   keep-all = 어절 중간에서 줄바꿈 금지 / break-word = 초장문(URL 등) 안전 처리
   ※ 의미 단위 <br>(15~20자)는 헤드라인 마크업에서 별도 적용 */
body{ word-break:keep-all; overflow-wrap:break-word; }

/* ── GNB 활성탭 강조 (2026-07-03 · 현재 위치 가독성 강화, 고특이도로 페이지 인라인 override) ── */
header.nav nav a{ font-size:15px; position:relative; letter-spacing:.005em; }
header.nav nav a:hover{ color:var(--ink); }
header.nav nav a.on{ color:var(--accent); font-weight:600; }
header.nav nav a.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px;
  height:2px; background:var(--accent); border-radius:2px;
}

/* ── 모바일 햄버거 네비 (2026-07-03 · mobile-nav.js가 생성) ── */
.m-ham{ display:none; position:fixed; top:12px; right:16px; z-index:120;
  width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  padding:12px; background:rgba(244,241,234,.92); backdrop-filter:saturate(180%) blur(8px);
  border:1px solid var(--gray-line); border-radius:11px; cursor:pointer; }
.m-ham span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }
.m-ham.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.m-ham.open span:nth-child(2){ opacity:0; }
.m-ham.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.m-menu{ display:none; position:fixed; inset:0; z-index:115; flex-direction:column; justify-content:center; gap:2px;
  padding:88px 34px 48px; background:var(--ink); transform:translateY(-100%);
  transition:transform .42s cubic-bezier(.7,0,.2,1); overflow-y:auto; }
.m-menu.open{ transform:none; }
.m-menu a{ font-family:'Noto Serif KR',serif; font-size:25px; font-weight:500; color:var(--paper);
  padding:17px 4px; border-bottom:1px solid rgba(255,255,255,.1); letter-spacing:-.01em; transition:.2s; }
.m-menu a.on{ color:var(--accent-soft); }
.m-menu a:active{ padding-left:10px; }
@media(max-width:900px){
  header.nav nav, header.nav .nav-cta, .topbar .tnav, .topbar .back{ display:none !important; }
  .m-ham{ display:flex; }
  .m-menu{ display:flex; }
}