/* ─────────────────────────────────────────────────────────────
   Kinety — 디자인 토큰
   DESIGN.md v0.1의 1:1 export. 값을 바꾸려면 DESIGN.md를 먼저 고치고 여기 반영한다.
   덱과 웹이 이 파일을 공유한다 — 토큰이 갈라지면 디자인 시스템이 죽는다.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── 표면 ──
     다크는 '검정'이 아니다. 거의 중성인 아주 어두운 회색 위에 빛이 얹힌 상태다.
     방 안에 광원이 있다. 그게 차갑지 않은 이유다. */
  --canvas:      #050506;
  --bg:          #08090B;
  --slide-border: rgba(255,255,255,.09);
  --line:        rgba(255,255,255,.075);
  --line-faint:  rgba(255,255,255,.04);
  --grid:        rgba(255,255,255,.021);

  /* ── 텍스트 ──
     회색이 푸르지도 누렇지도 않게. 이 미묘하게 따뜻한 회색이 다크 UI의 체온을 결정한다.
     3~5단은 2026-07-20 실화면 기준으로 재상향. 작은 캡션에서도 읽히되 위계는 유지한다. */
  --tx:    #F4F5F6;
  --tx-2:  #E3E5E8;
  --tx-3:  #D1D4D9;
  --tx-4:  #BCC1C9;
  --tx-5:  #A6ADB7;
  --tx-lede: #F0F1F3;

  /* ── 광원 (포인트 컬러 1개) ──
     구조 · 궤적 · 선단에만. 절대 면으로 채우지 않는다.
     블루·핑크는 별도 솔리드로 쓰지 않는다 — 이 램프의 종단으로만 허용. */
  --light:        #6E7BF0;
  --light-soft:   #8F99F6;
  --light-bright: #DDE1FF;
  --leading-edge: #F4F6FF;

  /* ── 경고 ──
     표에서 오직 '탈락 사유'에만. 덱의 다른 어디에도 쓰지 않는다. */
  --warn: #F2545B;

  /* ── 모션 블러 잔상 ──
     감쇠는 테마마다 다르다. 다크는 어두운 바탕에 밝은 잔상이라 천천히 죽어도 되지만,
     라이트는 흰 바탕에 잉크 잔상이라 같은 곡선을 쓰면 덩어리가 된다.
     alpha_i = base * exp(-i * decay) */
  --smear-rgb:   216,220,235;
  --smear-base:  0.17;
  --smear-decay: 0.26;

  /* ── 타이포 ── */
  --sans: "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;

  --w-regular:  450;
  --w-medium:   500;
  --w-semibold: 600;

  --fs-wordmark: 88px;
  --fs-h-cover:  44px;
  --fs-h-slide:  40px;
  --fs-lede:     29px;
  --fs-step:     21px;
  --fs-quote:    16.5px;
  --fs-body:     16px;
  --fs-data:     15px;
  --fs-meta:     14.5px;
  --fs-cell:     13.5px;
  --fs-th:       11.5px;
  --fs-tag:      11.5px;

  /* ── 간격 ── */
  --slide-w:  1280px;
  --slide-h:  720px;
  /* 좌우와 상하를 분리한다. 한 값으로 묶으면 좌우를 넓힐 때 세로까지 딸려가고,
     세로로 가장 빡빡한 06(광고)이 먼저 바닥에 닿는다. */
  --pad-x:    88px;
  --pad-y:    64px;
  --grid-cell: 32px;

  /* ── 모서리 ── */
  --r-slide: 8px;
  --r-table: 8px;
  --r-gauge: 2px;

  /* ── 광원 효과 ──
     전역 '그림자 금지'의 유일한 예외. 이건 그림자가 아니라 빛이다 —
     아래로 떨어지는 어둠이 아니라 사방으로 퍼지는 빛이고,
     다크 배경에서 '떠 있음'을 만드는 유일한 수단이다. 오프셋 0, 색은 광원색만. */
  --glow-leading: 0 0 0 1px rgba(110,123,240,.5), 0 0 16px 4px rgba(110,123,240,.8);
  --glow-node:    0 0 0 1px rgba(110,123,240,.6), 0 0 14px 3px rgba(110,123,240,.8);
  --glow-tip:     0 0 6px 1px rgba(110,123,240,.85);
}

/* ─────────────────────────────────────────────────────────────
   슬라이드 셸
   ───────────────────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--canvas);
  font-family: var(--sans);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--deck-gap, 40px); padding: var(--deck-pad, 40px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 숫자는 언제나 표 정렬. 폭이 흔들리는 순간 '정밀함'이 무너진다. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

/* 좁은 화면에서는 슬라이드를 통째로 축소한다 — 구글 슬라이드와 같은 방식.
   레이아웃을 세로로 재배치하지 않는 건 의도다: 04(6지표 × 3계정 표)와 06(2열 대조)은
   "한 화면에 다 보이는 것" 자체가 논지라, 무너뜨리면 그 장이 하는 말이 사라진다.
   정확한 배율은 render.js가 --deck-zoom으로 넣고, 아래 단계값은 JS가 죽었을 때의 안전망. */
.slide { zoom: var(--deck-zoom, 1); }
@media (max-width: 1360px) { .slide { zoom: var(--deck-zoom, .80); } }
@media (max-width: 1040px) { .slide { zoom: var(--deck-zoom, .62); } }
@media (max-width:  820px) { .slide { zoom: var(--deck-zoom, .48); } }
@media (max-width:  560px) { .slide { zoom: var(--deck-zoom, .33); } }

.slide {
  width: var(--slide-w); height: var(--slide-h);
  position: relative; overflow: hidden;
  background: var(--bg);
  color: var(--tx);
  border: 1px solid var(--slide-border);
  border-radius: var(--r-slide);
  flex: none;
  padding: var(--pad-y) var(--pad-x);
  display: flex; flex-direction: column;
}

/* 정밀함의 밀도 = 격자. 보이진 않지만 '느껴지는' 좌표계.
   중앙에서 바깥으로 페이드시켜 화면을 죄지 않는다. */
.slide::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 25%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 40%, #000 25%, transparent 78%);
}

/* 광원. 슬라이드마다 위치가 다르다 — 빛이 덱을 가로질러 이동한다. */
.slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: var(--glow);
}

.layer { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }

/* 상단 크롬 — 페이지 번호만. 커버의 가속점 디바이스는 제거됨(잔상과 중복). */
.chrome { display: flex; align-items: center; justify-content: flex-end; height: 14px; }
.tag { font-size: var(--fs-tag); font-weight: var(--w-medium); letter-spacing: .1em; color: var(--tx-5); }

/* ─────────────────────────────────────────────────────────────
   타이포
   ───────────────────────────────────────────────────────────── */

/* 헤드라인: 글자가 위쪽에서 빛을 받는다. 이 한 수가 '고급'의 대부분이다. */
.h {
  font-weight: var(--w-semibold); letter-spacing: -.032em; line-height: 1.06;
  background: linear-gradient(178deg, #FFFFFF 8%, #B9BDC6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ─────────────────────────────────────────────────────────────
   브랜드 모티프 1 — 모션 블러 잔상 (타이포 레이어, 워드마크 전용)

   복사본 2~3장(이산)은 '텍스트 렌더링 버그'나 '스트로보 끊김'으로 읽힌다.
   16겹으로 촘촘히 겹쳐야 '번짐'이 되고, 그래야 선(연속체)과 같은 성질이 된다.
   ───────────────────────────────────────────────────────────── */

.wordmark { font-size: var(--fs-wordmark); letter-spacing: -.045em; }

/* 정렬 기준은 '글자'다. 잔상이 아니다.
   잔상 폭만큼 들여쓰면 워드마크만 오른쪽으로 밀려 아래 텍스트 컬럼과 어긋난다.
   잔상은 그림자이므로 왼쪽 패딩 안으로 번져도 된다 (64px 패딩 > 23px 잔상). */
.wm-smear { position: relative; display: inline-block; align-self: flex-start; }
.wm-smear .sm {
  position: absolute; top: 0; left: 0; z-index: -1; white-space: nowrap;
  font-weight: var(--w-semibold); letter-spacing: -.045em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
}

/* ─────────────────────────────────────────────────────────────
   브랜드 모티프 2 — 궤적선 (다이어그램 레이어, 콘텐츠 전용)

   선은 메타포가 아니라 문법이다. 장마다 토폴로지가 그 장의 논지를 말한다.
   규율: 이미 있는 정보 위에만 눕는다 · 한 장에 논지 하나 · 선단은 한 장에 하나 ·
        할 말이 없으면 안 그린다 · 프레임 밖으로 나가는 선에는 선단을 찍지 않는다.
   ───────────────────────────────────────────────────────────── */

/* 01 — 관통선. 워드마크 뒤를 지나 프레임 좌우 밖으로. */
.thru {
  position: absolute; left: calc(var(--pad-x) * -1); right: calc(var(--pad-x) * -1);
  height: 1px; z-index: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 0%,
    rgba(110,123,240,.28) 30%,
    rgba(110,123,240,.55) 68%,
    rgba(190,198,255,.9) 92%,
    rgba(190,198,255,.25) 100%);
}
.thru .tip {
  position: absolute; left: 92%; top: 50%; transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--leading-edge); box-shadow: var(--glow-leading);
}