:root {
  --tba-paper: #f7f6f1;
  --tba-white: #fffefa;
  --tba-ink: #22231f;
  --tba-muted: #6a6a63;
  --tba-line: rgba(48, 48, 43, .16);
  --tba-blue: #0b8ed8;
  --tba-deep-blue: #0d79be;
  --tba-green: #68c531;
  --tba-lime: #a3d71d;
  --tba-yellow: #fac936;
  --tba-orange: #f68b11;
  --tba-charcoal: #242a2a;
}

body[data-the-book-art-project='true'] .case__study__slices,
body[data-the-book-art-project='true'] .case__study__info {
  min-width: 0;
}

body[data-the-book-art-project='true'] .tba-item,
body[data-the-book-art-project='true'] .tba-item > div {
  min-width: 0;
}

.tba-scene {
  background: var(--tba-paper);
  color: var(--tba-ink);
  font-family: Arial, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.tba-scene::after {
  background-image: url('./assets/paper-grain.webp');
  content: "";
  inset: 0;
  mix-blend-mode: multiply;
  opacity: .16;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.tba-scene *,
body[data-the-book-art-project='true'] .tba-info-card * { box-sizing: border-box; }
.tba-scene img, .tba-scene video { display: block; max-width: 100%; }
.tba-scene h1, .tba-scene h2, .tba-scene p, .tba-scene figure { margin: 0; }
.tba-scene h1, .tba-scene h2, .tba-scene p { word-break: keep-all; }

.tba-scene-head,
.tba-hero-copy {
  left: 5.4%;
  position: absolute;
  top: 7.2%;
  width: 52%;
  z-index: 8;
}

.tba-index,
.tba-motion-caption > span {
  display: block;
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 700;
  letter-spacing: .16em;
  margin-bottom: 16px;
}

.tba-scene-head h2,
.tba-signage-copy h2,
.tba-closing-copy h2 {
  font-size: clamp(28px, 3.35vw, 56px);
  font-weight: 520;
  letter-spacing: -.058em;
  line-height: 1.06;
}

.tba-scene-head h2 b { font-weight: 780; }
.tba-head-light, .tba-note-light { color: #fff; }

.tba-scene-note {
  bottom: 5.5%;
  font-size: clamp(11px, .88vw, 14px);
  font-weight: 620;
  left: 5.4%;
  letter-spacing: -.02em;
  line-height: 1.5;
  position: absolute;
  z-index: 8;
}

/* 01 Hero */
.tba-hero {
  background: linear-gradient(135deg, #f2f0e9, #fbfaf6 62%, #efeee8);
}
.tba-hero-copy { top: 10%; width: 47%; }
.tba-hero-copy h1 {
  font-size: clamp(38px, 4.45vw, 74px);
  font-weight: 520;
  letter-spacing: -.066em;
  line-height: 1.04;
}
.tba-hero-copy p {
  color: var(--tba-muted);
  font-size: clamp(11px, 1.05vw, 17px);
  line-height: 1.62;
  margin-top: 28px;
}
.tba-hero-stage {
  bottom: 11%;
  height: 62%;
  perspective: 1200px;
  position: absolute;
  right: 3.5%;
  width: 50%;
  z-index: 4;
}
.tba-hero-page {
  background: linear-gradient(90deg, #eeece4, #fffefa 13%, #fffefa 86%, #eceae2);
  box-shadow: 0 32px 74px rgba(44, 43, 37, .12);
  height: 82%;
  position: absolute;
  top: 9%;
  width: 48%;
}
.tba-hero-page-left { left: 2%; transform: perspective(900px) rotateY(7deg); transform-origin: 100% 50%; }
.tba-hero-page-right { right: 2%; transform: perspective(900px) rotateY(-7deg); transform-origin: 0 50%; }
.tba-hero-spine { background: rgba(70,68,61,.18); bottom: 10%; left: 50%; position: absolute; top: 10%; width: 1px; }
.tba-hero-stage img { left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 67%; z-index: 2; }
.tba-color-rail { bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); height: 7px; left: 0; position: absolute; right: 0; z-index: 9; }
.tba-color-rail i:nth-child(1), .tba-closing-rail i:nth-child(1) { background: var(--tba-blue); }
.tba-color-rail i:nth-child(2), .tba-closing-rail i:nth-child(2) { background: var(--tba-green); }
.tba-color-rail i:nth-child(3), .tba-closing-rail i:nth-child(3) { background: var(--tba-yellow); }
.tba-color-rail i:nth-child(4), .tba-closing-rail i:nth-child(4) { background: var(--tba-orange); }

/* 02 Opening */
.tba-opening { background: #eceae3; }
.tba-opening-stage { bottom: 8%; left: 43%; position: absolute; right: 4%; top: 15%; z-index: 3; }
.tba-open-sheet { background: #fffefa; box-shadow: 0 24px 58px rgba(44,43,37,.1); height: 72%; position: absolute; top: 14%; width: 48%; }
.tba-open-sheet-left { left: 2%; clip-path: polygon(0 8%,100% 0,100% 100%,0 90%); transform: skewY(-1.5deg); }
.tba-open-sheet-right { right: 2%; clip-path: polygon(0 0,100% 8%,100% 90%,0 100%); transform: skewY(1.5deg); }
.tba-opening-stage img { left: 50%; position: absolute; top: 49%; transform: translate(-50%,-50%); width: 54%; z-index: 3; }
.tba-open-crease { background: linear-gradient(180deg, transparent, rgba(80,77,68,.26) 18%, rgba(80,77,68,.26) 82%, transparent); bottom: 18%; left: 50%; position: absolute; top: 18%; width: 1px; z-index: 4; }

/* 03 Balance */
.tba-balance { background: var(--tba-charcoal); }
.tba-balance-stage { bottom: 6%; left: 40%; position: absolute; right: 4%; top: 7%; z-index: 3; }
.tba-balance-paper { align-items: center; background: #fffefa; box-shadow: 0 30px 90px rgba(0,0,0,.24); display: flex; inset: 12% 10%; justify-content: center; position: absolute; }
.tba-balance-paper img { width: 63%; }
.tba-balance-axis { background: rgba(255,255,255,.2); bottom: 4%; left: 50%; position: absolute; top: 4%; width: 1px; z-index: 4; }
.tba-balance-ring { border: 1px solid rgba(255,255,255,.14); border-radius: 50%; position: absolute; }
.tba-ring-one { height: 72%; left: 2%; top: 14%; width: 44%; }
.tba-ring-two { height: 72%; right: 2%; top: 14%; width: 44%; }

/* 04 Color */
.tba-color { background: #f4f2eb; }
.tba-color-stage { bottom: 7%; left: 43%; overflow: hidden; position: absolute; right: 4%; top: 10%; z-index: 3; }
.tba-color-paper { box-shadow: 0 18px 48px rgba(47,45,37,.13); height: 24%; position: absolute; width: 70%; }
.tba-paper-blue { background: var(--tba-blue); left: 2%; top: 18%; transform: rotate(-6deg); }
.tba-paper-green { background: var(--tba-green); right: 2%; top: 28%; transform: rotate(4deg); }
.tba-paper-yellow { background: var(--tba-yellow); left: 9%; top: 43%; transform: rotate(-3deg); }
.tba-paper-orange { background: var(--tba-orange); right: 2%; top: 55%; transform: rotate(6deg); }
.tba-color-logo-paper { align-items: center; background: rgba(255,254,250,.96); box-shadow: 0 26px 70px rgba(47,45,37,.16); display: flex; inset: 23% 15%; justify-content: center; position: absolute; z-index: 4; }
.tba-color-logo-paper img { width: 66%; }

/* 05 Wordmark */
.tba-wordmark { background: #fffefa; }
.tba-wordmark-stage { bottom: 11%; left: 8%; position: absolute; right: 8%; top: 38%; z-index: 3; }
.tba-wordmark-stage img { left: 50%; position: absolute; top: 49%; transform: translate(-50%,-50%); width: 86%; z-index: 3; }
.tba-wordmark-grid { inset: 0; position: absolute; }
.tba-wordmark-grid::before, .tba-wordmark-grid::after, .tba-wordmark-grid i { background: var(--tba-line); content: ""; position: absolute; }
.tba-wordmark-grid::before { height: 1px; left: 0; right: 0; top: 34%; }
.tba-wordmark-grid::after { bottom: 22%; height: 1px; left: 0; right: 0; }
.tba-wordmark-grid i { bottom: 0; top: 0; width: 1px; }
.tba-wordmark-grid i:nth-child(1) { left: 16%; }
.tba-wordmark-grid i:nth-child(2) { left: 37%; }
.tba-wordmark-grid i:nth-child(3) { left: 50%; }
.tba-wordmark-grid i:nth-child(4) { left: 66%; }
.tba-wordmark-grid i:nth-child(5) { left: 85%; }

/* 06 Material */
.tba-material { background: #293030; }
.tba-material-stage { bottom: 8%; left: 43%; position: absolute; right: 5%; top: 13%; z-index: 3; }
.tba-material-sheet { box-shadow: 0 30px 70px rgba(0,0,0,.25); height: 68%; left: 4%; position: absolute; top: 12%; width: 86%; }
.tba-sheet-four { background: var(--tba-orange); transform: translate(8%,9%) rotate(3deg); }
.tba-sheet-three { background: var(--tba-yellow); transform: translate(5%,6%) rotate(1.5deg); }
.tba-sheet-two { background: var(--tba-green); transform: translate(2%,3%) rotate(-1deg); }
.tba-sheet-one { align-items: center; background: #fffefa; display: flex; justify-content: center; transform: rotate(-2deg); z-index: 4; }
.tba-sheet-one img { width: 62%; }
.tba-stitch-line { border-top: 1px dashed rgba(74,71,63,.28); bottom: 8%; left: 7%; position: absolute; right: 7%; }

/* 07 Candidate convergence */
.tba-convergence { background: #efede6; }
.tba-candidate-grid { bottom: 13%; display: grid; gap: 1.4%; grid-template-columns: repeat(3,minmax(0,1fr)); left: 4.5%; position: absolute; right: 4.5%; top: 31%; z-index: 3; }
.tba-candidate-grid figure { align-items: center; background: #fff; border: 1px solid rgba(57,56,50,.1); display: flex; justify-content: center; min-width: 0; overflow: hidden; position: relative; }
.tba-candidate-grid img { height: 100%; object-fit: contain; width: 100%; }
.tba-candidate-grid .is-approved { border-color: rgba(36,42,42,.55); box-shadow: inset 0 0 0 2px rgba(36,42,42,.08); }
.tba-candidate-grid .is-approved span { background: #242a2a; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 8px 11px; position: absolute; right: 0; top: 0; z-index: 4; }

/* 08 Signage */
.tba-signage { background: #242a2a; color: #fff; }
.tba-signage-photo { bottom: 0; left: 0; overflow: hidden; position: absolute; top: 0; width: 57%; z-index: 3; }
.tba-signage-photo::after { background: linear-gradient(90deg, transparent 62%, #242a2a 100%); content: ""; inset: 0; position: absolute; }
.tba-signage-photo img { height: 100%; object-fit: cover; object-position: center; width: 100%; }
.tba-signage-copy { position: absolute; right: 5.4%; top: 10%; width: 36%; z-index: 5; }
.tba-signage-copy p { color: rgba(255,255,255,.68); font-size: clamp(11px,1vw,16px); line-height: 1.65; margin-top: 28px; }

/* Motion */
.tba-motion-scene { background: #f8f7f2; }
.tba-motion-scene video { height: 100%; object-fit: cover; width: 100%; }
.tba-motion-caption { left: 4.5%; position: absolute; top: 6.5%; z-index: 5; }
.tba-motion-caption > span { margin-bottom: 10px; }
.tba-motion-caption h2 { font-size: clamp(18px,1.75vw,30px); font-weight: 610; letter-spacing: -.045em; line-height: 1.1; }

/* Closing */
.tba-closing { background: #fffefa; }
.tba-closing > .tba-index { left: 5.4%; position: absolute; top: 7.2%; z-index: 5; }
.tba-closing-copy { left: 5.4%; position: absolute; top: 19%; width: 50%; z-index: 5; }
.tba-closing-logo { bottom: 12%; position: absolute; right: 4%; top: 10%; width: 47%; z-index: 4; }
.tba-closing-logo img { left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 78%; }
.tba-closing-rail { bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); height: 7px; left: 0; position: absolute; right: 0; z-index: 9; }

/* Project information */
body[data-the-book-art-project='true'] .tba-info-card {
  background: #f7f6f1;
  color: #24231f;
  font-family: Arial, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
body[data-the-book-art-project='true'] .tba-info-card h2 { font-size: clamp(15px,1.25vw,22px); font-weight: 650; letter-spacing: -.035em; }
body[data-the-book-art-project='true'] .tba-info-card p { line-height: 1.62; word-break: keep-all; }

@media (max-width: 1024px) {
  .tba-scene-head h2, .tba-signage-copy h2, .tba-closing-copy h2 { font-size: clamp(28px,4.3vw,46px); }
  .tba-hero-copy h1 { font-size: clamp(38px,5.45vw,58px); }
}

@media (max-width: 656px) {
  .tba-scene { aspect-ratio: auto !important; }
  .tba-scene-head, .tba-hero-copy { left: 7%; right: 7%; top: 6.5%; width: auto; }
  .tba-index, .tba-motion-caption > span { font-size: 8px; margin-bottom: 10px; }
  .tba-scene-head h2, .tba-signage-copy h2, .tba-closing-copy h2 { font-size: 27px; max-width: 12em; }
  .tba-scene-note { bottom: 4.5%; font-size: 11px; left: 7%; right: 7%; }

  .tba-hero { min-height: 720px; }
  .tba-hero-copy { top: 6.5%; }
  .tba-hero-copy h1 { font-size: 38px; max-width: 9em; }
  .tba-hero-copy p { font-size: 11px; margin-top: 18px; }
  .tba-hero-stage { bottom: 7%; height: 47%; left: 4%; right: 4%; width: auto; }
  .tba-hero-stage img { width: 72%; }
  .tba-color-rail { height: 5px; }

  .tba-opening { min-height: 680px; }
  .tba-opening-stage { bottom: 11%; left: 5%; right: 5%; top: 34%; }
  .tba-opening-stage img { width: 58%; }

  .tba-balance { min-height: 690px; }
  .tba-balance-stage { bottom: 11%; left: 4%; right: 4%; top: 34%; }
  .tba-balance-paper { inset: 10% 6%; }
  .tba-balance-paper img { width: 70%; }

  .tba-color { min-height: 700px; }
  .tba-color-stage { bottom: 10%; left: 4%; right: 4%; top: 34%; }
  .tba-color-logo-paper { inset: 22% 11%; }

  .tba-wordmark { min-height: 650px; }
  .tba-wordmark-stage { bottom: 14%; left: 5%; right: 5%; top: 39%; }
  .tba-wordmark-stage img { width: 94%; }

  .tba-material { min-height: 720px; }
  .tba-material-stage { bottom: 10%; left: 5%; right: 5%; top: 34%; }
  .tba-material-sheet { height: 61%; top: 14%; width: 84%; }
  .tba-sheet-one img { width: 70%; }

  .tba-convergence { min-height: 1080px; }
  .tba-candidate-grid { bottom: 10%; gap: 10px; grid-template-columns: 1fr; grid-template-rows: repeat(3,minmax(0,1fr)); left: 5%; right: 5%; top: 23%; }
  .tba-candidate-grid .is-approved span { font-size: 11px; padding: 7px 9px; }
  .tba-convergence .tba-scene-note { bottom: 3%; }

  .tba-signage { min-height: 800px; }
  .tba-signage-photo { bottom: 0; top: 43%; width: 100%; }
  .tba-signage-photo::after { background: linear-gradient(180deg,#242a2a 0%,transparent 26%); }
  .tba-signage-copy { left: 7%; right: 7%; top: 6.5%; width: auto; }
  .tba-signage-copy p { font-size: 11px; margin-top: 18px; max-width: 28em; }

  .tba-motion-scene { aspect-ratio: 1440 / 900 !important; min-height: 0; }
  .tba-motion-caption { left: 5%; top: 7%; }
  .tba-motion-caption h2 { font-size: 14px; }
  .tba-motion-caption > span { margin-bottom: 6px; }

  .tba-closing { min-height: 650px; }
  .tba-closing > .tba-index { left: 7%; top: 6.5%; }
  .tba-closing-copy { left: 7%; right: 7%; top: 15%; width: auto; }
  .tba-closing-logo { bottom: 12%; left: 4%; right: 4%; top: 43%; width: auto; }
  .tba-closing-logo img { width: 82%; }
  .tba-closing-rail { height: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tba-scene *, .tba-scene *::before, .tba-scene *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* 모션은 1440×900 이다. 껍데기의 .page__card 는 16/9 라 object-fit:cover 가 위아래를 각 45줄
   (높이의 10%) 잘라냈다. **모션이 든 카드에만** 영상 비율을 돌려준다 — 다른 카드는 건드리지 않는다. */
body[data-the-book-art-project="true"] .page__card:has(> video) { aspect-ratio: 1440 / 900 !important; }  /* 카드에 style="aspect-ratio:16/9" 가 인라인으로 박혀 있어 !important 가 없으면 안 먹는다 */

/* === 그림 자리 예약 (CLS) — 자동 생성. 없으면 지연 로딩 때 아래가 밀린다 === */
img[src$="/leaderin-case-assets-v2/symbol-final.svg"] { aspect-ratio: 37/24; }
img[src$="https://kangdesign-portfolio.pages.dev/the-book-art/assets/approved-logo.svg"] { aspect-ratio: 134/75; }
img[src$="https://kangdesign-portfolio.pages.dev/the-book-art/assets/approved-symbol.svg"] { aspect-ratio: 17/10; }
img[src$="https://kangdesign-portfolio.pages.dev/the-book-art/assets/approved-wordmark.svg"] { aspect-ratio: 150/31; }
img[src$="https://kangdesign-portfolio.pages.dev/the-book-art/assets/candidate-1.webp"] { aspect-ratio: 47/21; }
img[src$="https://kangdesign-portfolio.pages.dev/the-book-art/assets/candidate-2.webp"] { aspect-ratio: 94/43; }
img[src$="https://kangdesign-portfolio.pages.dev/the-book-art/assets/candidate-3.webp"] { aspect-ratio: 188/87; }
img[src$="https://kangdesign-portfolio.pages.dev/the-book-art/assets/sign-application.webp"] { aspect-ratio: 33/29; }

/* ⭐ 승인 마크는 **어느 자리에서도 비례를 바꾸지 않는다**(대표님 절대 규정).
   상자를 정사각·전체높이로 박아 둔 자리가 있어 마크가 늘어나 있었다
   (실측: 화면 비 ↔ 원본 비가 4% 어긋남).
   `object-fit: contain` 이면 상자가 어떻든 마크는 제 비례로 들어간다.
   ⚠ 셸 규칙과 특이도가 엉키므로 !important 로 못 박는다. */
img[src$="approved-logo.svg"] { object-fit: contain !important; }