/* /cf — "보이지 않는 일" 브랜드 필름형 메인 (컨셉 탐색).
   라이트·웜 그린 무대 위 타이포 중심의 한 장면-한 문장. 팔레트는 Boostree DS 파생.

   ★ 상태 규약 (2026-09-07) — 기본 = 완성된 정지 프레임, JS 클래스는 향상에만.
   페이지 전환 모드는 `.cf-paged`(cf.js 가 GSAP·Observer 확인 후 부착)에서만 켠다.
   그 전에는 세로 문서로 보이는 것이 정상이며, 이 파일의 폴백 규칙은 클래스 유무가 아니라
   `html:not(.cf-paged)` 로 건다 — 클래스가 아직 없는 첫 페인트 구간과 `.cf-flat` 이
   **같은 화면**을 그리게 하기 위해서다.

   왜: 예전에는 `.cf-page { position: absolute; inset: 0 }` 이 클래스 없는 기본값이었고
   폴백은 `.cf-flat` 에만 걸려 있었다. 두 클래스 모두 cf.js 가 DOMContentLoaded 에서 붙이므로
   첫 페인트 ~ DCL 사이에 **설계되지 않은 제3의 상태**가 실제로 렌더됐고, 거기서 12장이
   좌표 (0,0) 에 통째로 겹쳤다 — 카피 46줄·펜 드로잉 62획이 한 화면에(2026-09-07 실측:
   문서 높이 900 = 뷰포트 높이, 보이는 페이지 12/12). gsap·Observer 가 CDN defer 라
   DCL 이 왕복 두 번에 묶여, 느린 4G+CPU4x 에서 이 화면이 1066ms 노출됐다.
   같은 뿌리의 사고가 2026-09-06(시네마틱 홈)·09-07(상세·법정 히어로)에도 있었다. */

:root {
  --cf-ground: #f6faf7; /* 웜 화이트-민트 그라운드 */
  --cf-ink: var(--color-text);
  --cf-muted: var(--color-text-muted);
  --cf-accent: var(--color-primary-deep);
}

html {
  background: var(--cf-ground);
}

body {
  background:
    radial-gradient(52rem 36rem at 82% 12%, rgba(60, 198, 118, 0.08), transparent 70%),
    radial-gradient(44rem 30rem at 10% 92%, rgba(215, 255, 232, 0.55), transparent 72%),
    var(--cf-ground);
  color: var(--cf-ink);
}

/* 페이지 모드: 문서 스크롤 잠금 — 이동은 오직 페이지 전환으로 */
.cf-paged body {
  overflow: hidden;
  height: 100svh;
}

/* ---------- 헤더 (최소) ---------- */
.cf-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) max(var(--space-8), env(safe-area-inset-left));
}

.cf-header__logo img {
  display: block;
  height: 18px;
  width: auto;
}

.cf-header__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cf-header__links a {
  color: var(--cf-muted);
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.cf-header__links a:hover,
.cf-header__links a:focus-visible {
  color: var(--cf-accent);
}

/* ---------- 무대와 페이지 ---------- */
.cf-paged .cf-stage {
  position: fixed;
  inset: 0;
}

/* 기본 = 세로로 쌓이는 정지 프레임(= 예전 .cf-flat). 페이지 모드는 아래에서 승격한다. */
.cf-page {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
}

/* 페이지 전환 모드 — 무대(.cf-stage)가 fixed 가 된 뒤에만 12장을 겹쳐 쌓는다. */
.cf-paged .cf-page {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.cf-page__inner {
  max-width: 46rem;
  text-align: center;
}

/* ---------- 펜 드로잉 — 카피 우측 컬럼 ----------
   딥 그린 한 자루 펜(--cf-accent). 획은 [data-cf-stroke] 순서대로 그려지고(cf.js),
   점(.cf-ink)은 획이 끝난 뒤 찍힌다. 페이지 모드(.cf-paged)가 켜지기 전 — 첫 페인트 구간과
   JS 없음/reduced-motion — 에서는 마크업 그대로의 완성 상태로 보인다(위 "상태 규약"). */
.cf-page__inner:has(.cf-page__art) {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(220px, 300px);
  gap: var(--space-4) var(--space-16);
  align-items: center;
  max-width: 64rem;
  width: 100%;
  text-align: left;
}

.cf-page__inner:has(.cf-page__art) > :not(.cf-page__art) {
  grid-column: 1;
}

.cf-page__inner:has(.cf-page__art) .cf-page__actions {
  justify-content: flex-start;
}

.cf-page__art {
  grid-column: 2;
  grid-row: 1 / span 6;
  align-self: center;
  margin: 0;
  color: var(--cf-accent);
}

.cf-page__art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.cf-page__art [data-cf-stroke] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.cf-page__art .cf-ink {
  fill: currentColor;
  stroke: none;
}

/* 말풍선 속 다섯 언어 — JS가 하나씩 순환. 정지 프레임에서는 첫 단어만 */
.cf-page__art .cf-ink-word {
  fill: currentColor;
  font-family: inherit;
}

html:not(.cf-paged) .cf-page__art .cf-ink-word:not(.is-first) {
  display: none;
}

/* 지워지는 획(서류) — 정지 프레임에서는 이미 정리된 상태 */
html:not(.cf-paged) .cf-page__art [data-cf-erase] {
  display: none;
}

/* 점선 궤적(정지 프레임)은 마크업의 stroke-dasharray 속성이 패턴을 담당한다 — 실행 시 cf.js가 같은 패턴을 인라인으로 덮는다 */

@media (max-width: 899px) {
  .cf-page__inner:has(.cf-page__art) {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    max-width: 46rem;
  }

  .cf-page__inner:has(.cf-page__art) > :not(.cf-page__art) {
    grid-column: 1;
  }

  .cf-page__art {
    grid-column: 1;
    grid-row: auto;
    order: -1;
    width: min(220px, 60vw);
    margin: 0 auto var(--space-6);
  }
}

@media (max-width: 599px) {
  .cf-page__art {
    margin-left: 0;
    width: 180px;
  }

  .cf-page__art--type {
    width: min(210px, 64vw);
  }
}

/* 장면 번호 워터마크 — TVCF 컷 넘버의 감각 */
.cf-page__num {
  display: block;
  margin-bottom: var(--space-6);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--cf-accent);
}

.cf-page__line {
  margin: 0;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.4;
  word-break: keep-all;
  text-wrap: pretty;
}

.cf-page__line + .cf-page__line {
  margin-top: var(--space-4);
}

.cf-page__line em {
  font-style: normal;
  color: var(--cf-accent);
}

.cf-page__sub {
  margin: var(--space-8) 0 0;
  font-size: var(--font-size-lg);
  line-height: 1.8;
  color: var(--cf-muted);
  word-break: keep-all;
  text-wrap: pretty;
}

/* 장면 각주 링크 — "사실 하나 · 담당 팀 →". 문장이 주인공, 사실은 각주 크기로.
   상세 페이지로 잇는 유일한 전환 동선이라 링크지만, 필 태그의 조용함을 유지한다. */
.cf-page__foot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding: 7px 16px;
  border: 1px solid rgba(42, 139, 83, 0.28);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--cf-accent);
  text-decoration: none;
  transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.cf-page__foot:hover,
.cf-page__foot:focus-visible {
  border-color: var(--cf-accent);
  background: rgba(60, 198, 118, 0.08);
}

/* 장면 담당 솔루션 태그 — 조용한 각주 */
.cf-page__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding: 6px 14px;
  border: 1px solid rgba(42, 139, 83, 0.28);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--cf-accent);
}

.cf-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.cf-page__note {
  margin: var(--space-8) 0 0;
  font-size: var(--font-size-sm);
  color: var(--cf-muted);
}

/* ---------- 페이지 도트 + 카운터 ---------- */
.cf-dots {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cf-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(42, 139, 83, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}

.cf-dot.is-active {
  background: var(--cf-accent);
  transform: scale(1.4);
}

.cf-dot:focus-visible {
  outline: 2px solid var(--cf-accent);
  outline-offset: 3px;
}

.cf-counter {
  position: fixed;
  left: max(var(--space-8), env(safe-area-inset-left));
  bottom: var(--space-6);
  z-index: 10;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--cf-muted);
}

/* 다음 장면 힌트 — 히어로 스크롤 큐와 같은 세로선 어휘 */
.cf-next {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--cf-muted);
  text-decoration: none;
}

.cf-next {
  transition: opacity 0.4s ease-out, visibility 0.4s;
}

/* 마지막 장면 — 다음이 없으므로 힌트를 거둔다 */
.cf-next.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cf-next__line {
  width: 1px;
  height: 2rem;
  background: rgba(42, 139, 83, 0.25);
  position: relative;
  overflow: hidden;
}

.cf-next__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cf-accent);
  animation: cf-hint 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cf-hint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 플랫 폴백 (첫 페인트 · reduced-motion · GSAP 부재) ----------
   하이재킹 없이 일반 세로 스크롤 문서 — 콘텐츠 동일, 전환 연출만 없음.
   .cf-page 의 세로 배치는 이제 기본값이라 여기 다시 적지 않는다(위 "상태 규약").
   도트·카운터·Next 는 페이지 전환이 있을 때만 의미가 있으므로 .cf-paged 에서만 보인다. */
html:not(.cf-paged) .cf-dots,
html:not(.cf-paged) .cf-counter,
html:not(.cf-paged) .cf-next {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cf-next__line::after {
    animation: none;
    transform: scaleY(1);
  }
}

/* ---------- 모바일 ---------- */
@media (max-width: 599px) {
  .cf-dots {
    right: 14px;
  }

  .cf-page__inner {
    text-align: left;
  }

  .cf-page__actions {
    justify-content: flex-start;
  }
}

/* 모바일 — 씬 서브의 데스크톱용 개행 해제 */
@media (max-width: 599px) {
  .cf-page__sub br {
    display: none;
  }
}