/* THUMBOOKS / Thumbooks Editorial v1.0 — 사용자 제공 토큰(design/reference). 이미지 경로만 사이트 경로로 바꿨다. */
:root {
  --tb-color-paper: #F7EDDA;
  --tb-color-surface: #FFFAF0;
  --tb-color-paper-deep: #EFE2CB;
  --tb-color-ink: #27342E;
  --tb-color-ink-muted: #526258;
  --tb-color-forest: #285548;
  --tb-color-forest-hover: #1E4037;
  --tb-color-sage: #9EAA92;
  --tb-color-sage-light: #E8ECE2;
  --tb-color-sea-mist: #B1BEC4;
  --tb-color-mist-light: #E6ECE9;
  --tb-color-ochre: #C4AD7B;
  --tb-color-ochre-ink: #795C38;
  --tb-color-border: #D8D2C5;
  --tb-color-border-strong: #7D8D84;
  --tb-color-focus: #2D6A72;
  --tb-color-white: #FFFFFF;
  --tb-color-positive: #28614C;
  --tb-color-danger: #A2493E;

  --tb-bg-page: var(--tb-color-paper);
  --tb-bg-surface: var(--tb-color-surface);
  --tb-bg-subtle: var(--tb-color-sage-light);
  --tb-text-primary: var(--tb-color-ink);
  --tb-text-secondary: var(--tb-color-ink-muted);
  --tb-text-link: var(--tb-color-forest);
  --tb-action-primary: var(--tb-color-forest);
  --tb-action-primary-hover: var(--tb-color-forest-hover);
  --tb-action-on-primary: var(--tb-color-white);
  --tb-decorative-sage: var(--tb-color-sage);
  --tb-decorative-water: var(--tb-color-sea-mist);
  --tb-decorative-warm: var(--tb-color-ochre);
  --tb-text-warm: var(--tb-color-ochre-ink);
  --tb-border-default: var(--tb-color-border);
  --tb-border-control: var(--tb-color-border-strong);
  --tb-focus-ring: var(--tb-color-focus);

  --tb-font-display: "Noto Serif KR", "Nanum Myeongjo", serif;
  --tb-font-body: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  --tb-font-english: "Cormorant Garamond", Georgia, serif;
  --tb-font-size-caption: 13px;
  --tb-font-size-small: 14px;
  --tb-font-size-body: 17px;
  --tb-font-size-bodyMobile: 16px;
  --tb-font-size-lead: 20px;
  --tb-font-size-h3: 24px;
  --tb-font-size-h2: 36px;
  --tb-font-size-h1: 48px;
  --tb-font-size-display: clamp(2.5rem, 4.7vw, 4.5rem);
  --tb-line-display: 1.28;
  --tb-line-heading: 1.35;
  --tb-line-body: 1.75;
  --tb-line-caption: 1.5;
  --tb-tracking-display: -0.035em;
  --tb-tracking-heading: -0.025em;
  --tb-tracking-body: -0.012em;

  --tb-space-1: 4px;
  --tb-space-2: 8px;
  --tb-space-3: 12px;
  --tb-space-4: 16px;
  --tb-space-5: 20px;
  --tb-space-6: 24px;
  --tb-space-8: 32px;
  --tb-space-10: 40px;
  --tb-space-12: 48px;
  --tb-space-16: 64px;
  --tb-space-20: 80px;
  --tb-space-24: 96px;
  --tb-space-32: 128px;

  --tb-radius-sm: 4px;
  --tb-radius-md: 6px;
  --tb-radius-lg: 10px;
  --tb-radius-pill: 999px;
  --tb-layout-container: 1200px;
  --tb-layout-reading: 720px;
  --tb-layout-gutter: clamp(20px, 4.4vw, 72px);
  --tb-layout-section-gap: clamp(88px, 9vw, 144px);
  --tb-layout-hero-min-height: 100svh;
  --tb-layout-header-height: 72px;
  --tb-layout-book-aspect-ratio: 152 / 225;
  --tb-layout-card-grid-gap: 24px;

  --tb-motion-fast: 160ms;
  --tb-motion-base: 260ms;
  --tb-motion-scene-fade: 850ms;
  --tb-motion-scene-scale: 1.025;
  --tb-motion-parallax-max: 24px;
  --tb-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);

  --tb-image-scrim-desktop: linear-gradient(90deg, rgba(247,237,218,0.88) 0%, rgba(247,237,218,0.55) 31%, rgba(247,237,218,0.04) 65%, rgba(247,237,218,0) 100%);
  --tb-image-scrim-mobile: linear-gradient(180deg, rgba(247,237,218,0.86) 0%, rgba(247,237,218,0.65) 40%, rgba(247,237,218,0.1) 100%);
  --tb-scene-01-book-image: url("/brand/scenes/01-book.webp");
  --tb-scene-01-book-position: center center;
  --tb-scene-02-river-image: url("/brand/scenes/02-river.webp");
  --tb-scene-02-river-position: center center;
  --tb-scene-03-estuary-image: url("/brand/scenes/03-estuary.webp");
  --tb-scene-03-estuary-position: center center;
  --tb-scene-04-coast-image: url("/brand/scenes/04-coast.webp");
  --tb-scene-04-coast-position: center center;
}

@media (max-width: 700px) {
  :root {
    --tb-font-size-body: 16px;
    --tb-font-size-h1: 34px;
    --tb-font-size-h2: 28px;
    --tb-font-size-h3: 21px;
    --tb-font-size-display: clamp(2.25rem, 9vw, 3rem);
    --tb-scene-01-book-position: 69% center;
    --tb-scene-02-river-position: 57% center;
    --tb-scene-03-estuary-position: 62% center;
    --tb-scene-04-coast-position: 65% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tb-motion-scene-fade: 0ms;
    --tb-motion-scene-scale: 1;
    --tb-motion-parallax-max: 0px;
  }
}

/* --- Site extensions (Thumbooks Editorial 위에 사이트가 추가한 값) --- */
:root {
  --tb-layout-media: 936px;            /* 본문 이미지 최대 폭. 네이버 원본 본문 폭과 같다 */
  --tb-shadow-card: 0 12px 36px rgba(39, 52, 46, 0.06);
  --tb-focus-width: 3px;
  /* jsDelivr의 Pretendard CSS는 family 이름이 'Pretendard Variable'이라, 토큰의 'Pretendard'만으로는 적용되지 않았다. */
  --tb-font-body: "Pretendard Variable", "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  --tb-button-min-height: 46px;
}

/* --- Aliases: 기존 컴포넌트가 쓰던 변수명 유지 --- */
:root {
  --ink: var(--tb-text-primary);
  --ink-2: var(--tb-text-secondary);
  --muted: var(--tb-text-secondary);
  --line: var(--tb-border-default);
  --paper: var(--tb-bg-page);
  --surface: var(--tb-bg-surface);
  --accent: var(--tb-action-primary);
  --on-accent: var(--tb-action-on-primary);
  --sec-news: var(--tb-color-ochre-ink);
  --sec-lit: var(--tb-color-focus);
  --sec-blog: var(--tb-color-forest);

  --unit: var(--tb-space-2);
  --container: var(--tb-layout-container);
  --measure: var(--tb-layout-reading);
  --media-max: var(--tb-layout-media);
  --pad-x: var(--tb-layout-gutter);
  --gutter: var(--tb-layout-card-grid-gap);
  --header-h: var(--tb-layout-header-height);
  --radius: var(--tb-radius-md);
  --radius-input: var(--tb-radius-sm);

  --font-ui: var(--tb-font-body);
  --font-serif: var(--tb-font-display);
  --fs-display: var(--tb-font-size-display);
  --fs-h1: var(--tb-font-size-h1);
  --fs-h2: var(--tb-font-size-h2);
  --fs-h3: var(--tb-font-size-h3);
  --fs-body: var(--tb-font-size-body);
  --fs-ui: var(--tb-font-size-bodyMobile);
  --fs-caption: var(--tb-font-size-small);
  --lh-display: var(--tb-line-display);
  --lh-h1: var(--tb-line-heading);
  --lh-h2: var(--tb-line-heading);
  --lh-h3: var(--tb-line-heading);
  --lh-body: var(--tb-line-body);
  --lh-ui: var(--tb-line-caption);
  --lh-caption: var(--tb-line-caption);
}