/*
 * dana-koh — 구현 스타일 (A안 Onion Skin)
 * 값은 tokens.css 의 var() 만 쓴다. 색을 여기서 새로 만들지 않는다 — 필요한 색이 없으면 tokens.css 가 틀린 것이다.
 * 격자: 모바일 4열(겹침 0 · 기울기 절반) · 640 부터 기울기 전체 · 1024 부터 12열 콜라주와 고정 눈금자.
 */

/* ── 바탕 ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--color-clay-deep) var(--color-bg);
  scroll-padding-top: calc(var(--spacing) * 6);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--font-weight-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 입자 — 화면에 고정된 한 겹. 누르거나 고를 수 없다 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: var(--texture-grain);
  background-size: 160px 160px;
  opacity: 0.05;
}

p,
h1,
h2,
h3,
dl,
dd,
figure {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 4px;
  border-radius: var(--radius-frame);
}

::selection {
  background: var(--color-ink);
  color: var(--color-surface-raised);
}

.skip {
  position: absolute;
  left: var(--spacing-edge);
  top: calc(var(--spacing) * 3);
  z-index: 100;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
  background: var(--color-ink);
  color: var(--color-surface-raised);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

/* ── 글자 역할 ──────────────────────────────────────────────────────────── */
.meta {
  font-family: var(--font-mono), var(--font-sans);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  letter-spacing: 0.02em; /* 넓은 자간(--tracking-meta)은 라틴 대문자 라벨에만 — 한글·f.### 에는 좁게 */
  font-weight: 500;
  color: var(--color-ink-muted); /* 대문자는 CSS 로 바꾸지 않고 원문에 쓴다 — f.### 는 소문자, 라틴 라벨은 대문자 */
}

.nowrap {
  white-space: nowrap;
}

.title {
  font-size: var(--text-title);
  line-height: var(--text-title--line-height);
  font-weight: var(--font-weight-title);
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  color: var(--color-ink-muted);
  text-wrap: pretty;
  word-break: keep-all;
}

.lead strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-strong);
}

.small {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-muted);
}

p {
  word-break: keep-all;
}

/* 모션 패스 뒤로 지나가는 글 — 바탕색 판을 대 선을 가린다(선은 글 아래 층) */
.work__cap,
.key__label,
.lead,
.hero__meta,
.case__label,
.contact__label {
  background: var(--color-bg);
  box-shadow: 0 0 0 calc(var(--spacing) * 2) var(--color-bg);
}

/* ── B0 눈금자 · 헤더 ──────────────────────────────────────────────────── */
.ruler {
  height: var(--spacing-ruler-mobile);
  margin-inline: var(--spacing-edge);
  background: repeating-linear-gradient(90deg, var(--color-line) 0 1px, transparent 1px calc(var(--spacing) * 2));
}

.ruler__track,
.ruler__count {
  display: none;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  min-height: var(--spacing-header);
  padding-inline: var(--spacing-edge);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-target);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase; /* 원문도 대문자 — 넓은 자간은 대문자 라벨 전용이라는 표시 */
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mark__dia {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  background: var(--color-accent);
  border-radius: var(--radius-key);
  rotate: 45deg;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a:not(.pill) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--spacing-target);
  min-height: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 3);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
  border-radius: var(--radius-pill);
}

.nav__wide {
  display: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  min-height: var(--spacing-target);
  padding-inline: calc(var(--spacing) * 5);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-surface-raised);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.pill__arrow {
  color: var(--color-accent);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  min-height: var(--spacing-target);
  font-size: var(--text-small);
  font-weight: var(--font-weight-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-line);
}

/* ── 레이아웃 공통 ──────────────────────────────────────────────────────── */
.main {
  position: relative;
  overflow-x: clip; /* 기운 액자의 모서리가 가로 스크롤을 만들지 않게 — 스크롤 영역을 만들지 않는 clip */
}

.hero,
.works,
.case,
.about,
.contact {
  padding-inline: var(--spacing-edge);
}

.works,
.case,
.about,
.contact {
  padding-top: var(--spacing-block);
}

/* ── 모션 패스 · 키프레임 ◆ ─────────────────────────────────────────────── */
/* z -1: 모든 글·액자 아래. 선이 글을 지나가면 글의 바탕 판이 가린다 */
.path {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.path__line {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

/* 모서리는 변수로 고른다: --kx 0 왼쪽 · 1 오른쪽, --ky 0 위 · 1 아래, --lx 라벨이 붙는 쪽(기본 = 바깥쪽).
   폭마다 액자 정렬이 바뀌므로(모바일 지그재그) 모서리도 폭마다 다르게 준다 — "◆ 모서리" 블록 */
.key {
  --kx: 0;
  --ky: 0;
  --lx: var(--kx);
  position: absolute;
  z-index: 3;
  left: calc(var(--kx) * 100%);
  top: calc(var(--ky) * 100%);
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 2.5);
  translate: -50% -50%;
  pointer-events: none;
  /* 액자가 기울어도 ◆ 와 라벨은 똑바로 선다 — 액자 기울기를 되돌린다 */
  rotate: calc(var(--t, 0deg) * var(--tilt-k) * -1);
}

.key__dia {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  border-radius: var(--radius-key);
  rotate: 45deg;
  box-shadow: 0 0 0 3px var(--color-bg);
}

.key__label {
  position: absolute;
  left: 50%;
  top: 50%;
  translate:
    calc(var(--lx) * 100% - 100% + (var(--lx) * 2 - 1) * var(--spacing) * 3.5)
    calc(var(--ky) * 100% - 100% + (var(--ky) * 2 - 1) * var(--spacing) * 3);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
  white-space: nowrap;
}

/* 글 줄 안의 ◆ (사례 · 연락 라벨 앞) */
.key--inline {
  position: relative;
  left: auto;
  top: auto;
  translate: none;
  display: inline-block;
  margin-right: calc(var(--spacing) * 3);
  vertical-align: -1px;
  rotate: none;
}

/* ◆ 모서리 — 모바일: 액자가 좌우로 번갈아 서므로 안쪽 모서리를 잇는다(지그재그). 가장자리에 닿는 라벨은 안쪽으로 */
.work--01 .key { --kx: 1; --lx: 0; }
.work--02 .key { --kx: 0; }
.work--03 .key { --kx: 1; }
.work--04 .key { --kx: 1; --lx: 0; }
.work--05 .key { --kx: 0; }
.work--06 .key { --kx: 1; }
.work--07 .key { --kx: 0; }
.work--08 .key { --kx: 1; --lx: 0; }
.about__frame .key { --kx: 1; }

/* ── B1 히어로 ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: calc(var(--spacing) * 5);
}

.name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--text-name);
  line-height: var(--text-name--line-height);
  letter-spacing: var(--tracking-name);
  text-transform: uppercase;
  font-kerning: normal;
}

/* 한 줄 = 잔상 4장 + 본 프레임을 같은 왼쪽 기준선에 포갠 격자 한 칸 */
.name__line {
  display: grid;
  justify-items: start;
  width: fit-content;
}

.name__line > * {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.name__ghost {
  color: var(--color-accent);
  user-select: none;
  -webkit-user-select: none;
}

.name__ghost:nth-child(1) {
  font-stretch: var(--onion-1);
  opacity: var(--onion-alpha-1);
}

.name__ghost:nth-child(2) {
  font-stretch: var(--onion-2);
  opacity: var(--onion-alpha-2);
}

.name__ghost:nth-child(3) {
  font-stretch: var(--onion-3);
  opacity: var(--onion-alpha-3);
}

.name__ghost:nth-child(4) {
  font-stretch: var(--onion-4);
  opacity: var(--onion-alpha-4);
}

.name__final {
  position: relative;
  font-stretch: var(--onion-final);
  transform-origin: 0 50%;
}

/* 모션 패스의 출발점 — 본 프레임 끝, 글자 높이 가운데 */
.key-anchor {
  display: inline-block;
  width: 0;
  height: 0.5em;
  vertical-align: 0.1em;
}

.hero .lead {
  margin-top: calc(var(--spacing) * 6);
  max-width: 30em;
}

.hero__meta {
  letter-spacing: 0.04em; /* --tracking-meta(0.08em)는 한글 "예약 가능" 이 섞인 줄에는 넓다 */
  margin-top: calc(var(--spacing) * 3);
  width: fit-content;
}

.hero__meta-wide {
  display: none;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 5);
  margin-top: calc(var(--spacing) * 5);
}

.hero__cue {
  display: none;
}

/* ── 작업 액자 (WorkFrame) ─────────────────────────────────────────────── */
.work {
  position: relative;
  z-index: 1;
  width: var(--w, 100%);
}

.work--01 { --t: var(--tilt-1); }
.work--02 { --t: var(--tilt-2); }
.work--03 { --t: var(--tilt-3); }
.work--04 { --t: var(--tilt-4); }
.work--05 { --t: var(--tilt-5); }
.work--06 { --t: var(--tilt-2); }
.work--07 { --t: var(--tilt-3); }
.work--08 { --t: var(--tilt-4); }

:root {
  --tilt-k: 0.5; /* 모바일은 기울기 절반(±1.5° 안) — 640 부터 1 */
}

.work__frame {
  position: relative;
  display: block;
  padding: var(--spacing-mat);
  background: var(--color-surface);
  border-radius: var(--radius-mat);
  box-shadow: var(--shadow-frame);
  color: inherit;
  text-decoration: none;
  rotate: calc(var(--t, 0deg) * var(--tilt-k));
}

/* 들린 그림자는 미리 그려 두고 불투명도만 바꾼다 (box-shadow 전환 대신) */
.work__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-frame-lift);
  opacity: 0;
  pointer-events: none;
}

a.work__frame:focus-visible {
  outline-offset: 6px;
}

.work__cap {
  display: grid;
  gap: calc(var(--spacing) * 0.5);
  width: fit-content;
  max-width: 100%;
  margin-top: calc(var(--spacing) * 4);
}

.work__head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 2);
}

.work__no {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase; /* 원문도 대문자 — 넓은 자간은 대문자 라벨 전용이라는 표시 */
  color: var(--color-ink-muted);
}

.work__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-title);
  font-stretch: 112%;
  font-size: var(--text-body);
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.work__info {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
  color: var(--color-ink-muted);
}

/* ── 렌더 컷 ────────────────────────────────────────────────────────────── */
/* 비율은 상자가 잡는다 — 이미지가 늦게 와도 레이아웃이 흔들리지 않는다. 판(사이클로라마 그라데이션)은 로딩 중에만 보인다 */
.render {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--aspect-wide);
  border-radius: var(--radius-frame);
  background: linear-gradient(to bottom, var(--color-surface-raised) 0%, var(--color-surface) 52%, var(--color-bg) 100%);
}

.render[data-ratio="4:5"] {
  aspect-ratio: var(--aspect-portrait);
}

.render[data-ratio="1:1"] {
  aspect-ratio: var(--aspect-square);
}

.render > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── B2 작업 ────────────────────────────────────────────────────────────── */
.works {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 14);
}

.works__head {
  display: grid;
  gap: calc(var(--spacing) * 2);
}

.works > .work {
  order: 1;
}

.index {
  order: 2;
  padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4) calc(var(--spacing) * 2);
  background: var(--color-surface);
  border-radius: var(--radius-mat);
  box-shadow: var(--shadow-frame);
}

.index__title {
  padding-bottom: calc(var(--spacing) * 3);
}

.index__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index__list li + li a {
  border-top: 1px solid var(--color-line);
}

.index__list a {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--spacing) * 3);
  min-height: var(--spacing-target);
  padding-block: 0.5rem; /* = --spacing × 2 (구분선 옆 안쪽 여백은 rem 으로 — 검사기가 calc(var()) 를 0 으로 읽는다) */
  text-decoration: none;
}

.index__no {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* 줄 앞 ◆ — hover · focus 때만 */
.index__no::before {
  content: "";
  position: absolute;
  left: calc(var(--spacing) * -3);
  top: 50%;
  width: calc(var(--spacing) * 1.5);
  height: calc(var(--spacing) * 1.5);
  margin-top: calc(var(--spacing) * -0.75);
  background: var(--color-accent);
  border-radius: var(--radius-key);
  rotate: 45deg;
  opacity: 0;
}

.index__name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-title);
  font-stretch: 112%;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index__client {
  display: none;
}

.index__year {
  display: none;
}

.index__len {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.index__list a:focus-visible {
  outline-offset: 0;
}

/* 모바일: 폭과 정렬을 번갈아 다시 놓는다 (줄이기만 하지 않는다) */
.hero__collage {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 16);
  margin-top: calc(var(--spacing) * 9);
}

.work--02 { --w: 72%; align-self: flex-end; }
.work--03 { --w: 80%; align-self: flex-start; }
.work--05 { --w: 76%; align-self: flex-end; }
.work--06 { --w: 64%; align-self: flex-start; }
.work--07 { --w: 70%; align-self: flex-end; }

/* ── B3 사례 ────────────────────────────────────────────────────────────── */
.case {
  display: grid;
  gap: calc(var(--spacing) * 10);
}

.case__top {
  display: grid;
  gap: calc(var(--spacing) * 5);
}

.case__label,
.contact__label {
  width: fit-content;
}

.case__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-stretch: var(--stretch-squash);
  font-size: var(--text-display);
  line-height: var(--text-display--line-height);
  /* 50% 로 눌린 800 은 글자 곁 여백이 거의 없다 — --tracking-display(-0.02em)면 H·I·N 이 붙는다. 부호만 뒤집어 벌린다 */
  letter-spacing: calc(var(--tracking-display) * -1);
  text-transform: uppercase;
}

.case__br {
  display: block;
}

.case__sum {
  max-width: 22em;
  color: var(--color-ink-muted);
}

.case__key {
  padding: var(--spacing-mat);
  background: var(--color-surface);
  border-radius: var(--radius-mat);
  box-shadow: var(--shadow-frame);
}

.strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: calc(var(--spacing) * 4);
  margin: calc(var(--spacing) * 6) 0 0;
  padding: 0;
  list-style: none;
}

/* 필름 — 먹 띠 + 위아래 구멍. 칸끼리 붙어 한 줄의 띠가 된다 */
.strip__film {
  position: relative;
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 1.5);
  background: var(--color-ink);
}

.strip__film::before,
.strip__film::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--spacing) * 1.5);
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--spacing) * 1.5), var(--color-ink-muted) calc(var(--spacing) * 1.5) calc(var(--spacing) * 3.5), transparent calc(var(--spacing) * 3.5) calc(var(--spacing) * 5));
}

.strip__film::before { top: calc(var(--spacing) * 1.25); }
.strip__film::after { bottom: calc(var(--spacing) * 1.25); }

.strip .render {
  border-radius: 1px;
}

.strip__mark {
  position: relative;
  padding-top: calc(var(--spacing) * 6);
  text-align: center;
  font-family: var(--font-mono), var(--font-sans);
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--color-ink-muted);
}

.strip__mark::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--spacing) * 2.5);
  height: 1px;
  background: var(--color-line);
}

.strip__dia {
  position: absolute;
  left: 50%;
  top: calc(var(--spacing) * 2.5);
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 2.5);
  translate: -50% -50%;
  rotate: 45deg;
  border-radius: var(--radius-key);
  background: var(--color-clay-deep);
}

.strip__f {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.case__text {
  display: grid;
  gap: calc(var(--spacing) * 2);
  align-content: start;
}

.case__text > p {
  max-width: 34em;
}

.case__h {
  margin-top: calc(var(--spacing) * 4);
}

.case__h:first-child {
  margin-top: 0;
}

.figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6) calc(var(--spacing) * 4);
  margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 2);
  padding-top: 1.5rem; /* = --spacing × 6 */
  border-top: 1px solid var(--color-line);
}

.figs > div {
  display: flex;
  flex-direction: column-reverse;
  gap: calc(var(--spacing) * 1.5);
}

.figs dt {
  font-family: var(--font-mono), var(--font-sans);
  font-size: var(--text-meta);
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
}

.figs dd {
  font-family: var(--font-display);
  font-weight: var(--font-weight-title);
  font-size: var(--text-figure);
  line-height: var(--text-figure--line-height);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── B4 소개 ────────────────────────────────────────────────────────────── */
.about {
  display: grid;
  gap: calc(var(--spacing) * 12);
}

.about__portrait {
  width: 72%;
}

.about__frame { --t: var(--tilt-5); }

.about__text {
  display: grid;
  gap: calc(var(--spacing) * 5);
  align-content: start;
}

.about__text > p:not(.lead) {
  max-width: 36em;
}

.about__cols {
  display: grid;
  gap: calc(var(--spacing) * 10);
  margin-top: calc(var(--spacing) * 5);
}

.about__h {
  display: block;
  margin-bottom: calc(var(--spacing) * 3);
}

.tools {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

.tools li {
  padding-block: 0.5rem; /* = --spacing × 2 */
  border-top: 1px solid var(--color-line);
}

.ease {
  display: grid;
  align-content: start;
}

.ease__graph {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  overflow: visible;
}

.ease__grid {
  fill: none;
  stroke: var(--color-line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.ease__axis {
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 1;
}

.ease__handle {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1;
}

.ease__curve {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.ease__end {
  fill: var(--color-ink);
}

.ease__pt {
  fill: var(--color-accent);
  stroke: var(--color-bg);
  stroke-width: 2;
}

.ease__lab {
  font-family: var(--font-mono), var(--font-sans);
  font-size: 12px;
  fill: var(--color-ink-muted);
}

.ease figcaption {
  display: grid;
  gap: calc(var(--spacing) * 1.5);
  margin-top: calc(var(--spacing) * 4);
}

.ease__code {
  color: var(--color-ink);
  text-transform: none;
  letter-spacing: 0.02em;
}

.about__clients {
  padding-top: 1.25rem; /* = --spacing × 5 */
  border-top: 1px solid var(--color-line);
}

.about__clients .about__h {
  margin-bottom: calc(var(--spacing) * 2);
}

/* ── B5 연락 ────────────────────────────────────────────────────────────── */
.contact {
  display: grid;
  gap: calc(var(--spacing) * 5);
  padding-bottom: calc(var(--spacing) * 16);
}

.email {
  display: inline-grid;
  justify-self: start;
  margin-block: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
  font-family: var(--font-display);
  font-weight: var(--font-weight-title);
  font-size: var(--text-email);
  line-height: var(--text-email--line-height);
  letter-spacing: -0.02em;
  text-decoration: none;
  touch-action: manipulation;
  min-height: var(--spacing-target); /* 모바일 36px 글자라도 누르는 높이는 44px */
  align-content: center;
}

/* 너비는 가장 넓은 상태(130%)로 예약 — 눌려도 주변이 밀리지 않는다 */
.email > span {
  grid-area: 1 / 1;
  font-stretch: var(--stretch-email-narrow);
  padding-bottom: 0.08em;
}

.email__sizer {
  visibility: hidden;
}

.email__text {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--color-accent);
}

.contact__cols {
  display: grid;
  gap: calc(var(--spacing) * 8);
  padding-top: 2rem; /* = --spacing × 8 */
  border-top: 1px solid var(--color-line);
}

.contact__h {
  margin-bottom: calc(var(--spacing) * 2);
}

/* ── 꼬리 ───────────────────────────────────────────────────────────────── */
.foot {
  padding: 0 var(--spacing-edge) max(calc(var(--spacing) * 6), env(safe-area-inset-bottom));
}

.foot__ruler {
  position: relative;
  height: var(--spacing-ruler);
  background:
    repeating-linear-gradient(90deg, var(--color-line) 0 1px, transparent 1px calc(var(--spacing) * 20)) bottom / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, var(--color-line) 0 1px, transparent 1px calc(var(--spacing) * 2)) bottom / 100% calc(var(--spacing) * 1.5) no-repeat;
}

.foot__head {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: var(--color-accent);
}

.foot__head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--spacing) * 2.5);
  height: calc(var(--spacing) * 1.5);
  translate: -50% 0;
  background: var(--color-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
  margin-top: calc(var(--spacing) * 3);
}

.foot__end {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* ══ 640+ — 기울기 전체 · 두 칸 ══════════════════════════════════════════ */
@media (min-width: 640px) {
  :root {
    --tilt-k: 1;
  }

  .hero__meta-wide {
    display: inline;
  }

  .email > span {
    font-stretch: var(--onion-final);
    white-space: nowrap;
  }

  .strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case__br {
    display: inline;
  }

  .about__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }

  .contact__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .index__list a {
    grid-template-columns: 2.25rem minmax(0, 1.4fr) minmax(0, 1fr) 3rem 4rem;
  }

  .index__client,
  .index__year {
    display: block;
    font-size: var(--text-small);
    color: var(--color-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .index__year {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-variant-numeric: tabular-nums;
  }

  .index__len {
    text-align: right;
  }

  .about__portrait {
    width: 56%;
  }
}

/* ══ 1024+ — 12열 콜라주 · 고정 눈금자 ══════════════════════════════════ */
@media (min-width: 1024px) {
  html {
    scroll-padding-top: calc(var(--spacing-ruler) + var(--spacing) * 8);
  }

  body {
    padding-top: var(--spacing-ruler);
  }

  /* 눈금자 — 옆 칸이 있는 폭에서만 고정한다 */
  .ruler {
    position: fixed;
    inset: 0 0 auto;
    z-index: 80;
    display: flex;
    align-items: stretch;
    gap: var(--spacing-gutter);
    height: var(--spacing-ruler);
    margin: 0;
    padding-inline: var(--spacing-edge);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-clay-shade);
  }

  .ruler__track {
    position: relative;
    display: block;
    flex: 1;
    background: repeating-linear-gradient(90deg, var(--color-line) 0 1px, transparent 1px calc(var(--spacing) * 2)) bottom / 100% calc(var(--spacing) * 1.5) no-repeat;
  }

  .ruler__marks > span {
    position: absolute;
    top: 0;
    bottom: 0;
    padding-left: calc(var(--spacing) * 1.25);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    line-height: calc(var(--spacing-ruler) - var(--spacing) * 1.5);
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }

  .ruler__marks > span::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--spacing) * 1.5);
    bottom: 0;
    width: 1px;
    background: var(--color-line);
  }

  .ruler__marks > span:nth-child(1) { left: 0; }
  .ruler__marks > span:nth-child(2) { left: 10%; }
  .ruler__marks > span:nth-child(3) { left: 20%; }
  .ruler__marks > span:nth-child(4) { left: 30%; }
  .ruler__marks > span:nth-child(5) { left: 40%; }
  .ruler__marks > span:nth-child(6) { left: 50%; }
  .ruler__marks > span:nth-child(7) { left: 60%; }
  .ruler__marks > span:nth-child(8) { left: 70%; }
  .ruler__marks > span:nth-child(9) { left: 80%; }
  .ruler__marks > span:nth-child(10) { left: 90%; }

  .ruler__marks > span:nth-child(11) {
    right: 0;
    padding: 0 calc(var(--spacing) * 1.25) 0 0;
  }

  .ruler__marks > span:nth-child(11)::before {
    left: auto;
    right: 0;
  }

  /* 재생 헤드 — 트랙 폭만큼의 투명 판을 옮기고, 그 오른쪽 끝에 선과 ▼ 를 둔다 */
  .ruler__head {
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    pointer-events: none;
  }

  .ruler__head::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1px;
    right: -1px;
    width: 2px;
    background: var(--color-accent);
  }

  .ruler__head::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--spacing) * -1.25);
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 1.5);
    background: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .ruler__count {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ruler__frame {
    color: var(--color-ink);
    font-weight: 600;
  }

  .nav__wide {
    display: block;
  }

  .nav ul {
    gap: calc(var(--spacing) * 1);
  }

  .nav__wide:last-child {
    margin-left: calc(var(--spacing) * 3);
  }

  /* ── 히어로: 이름 cols 1–7 · 콜라주 cols 7–12 ── */
  .hero {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
    padding-top: calc(var(--spacing) * 10);
  }

  /* 뷰포트 바닥의 점 격자 — 오른쪽 아래에서만, 가장자리로 사라진다 */
  .hero::before {
    content: "";
    position: absolute;
    right: 0;
    top: calc(100svh - var(--spacing-ruler) - var(--spacing-header) - 44svh);
    width: 64%;
    height: 44svh;
    background-image: radial-gradient(circle, var(--color-line) 1px, transparent 1.5px);
    background-size: calc(var(--spacing) * 6) calc(var(--spacing) * 6);
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 80% 100%, var(--color-ink) 0%, transparent 72%);
    mask-image: radial-gradient(ellipse 80% 90% at 80% 100%, var(--color-ink) 0%, transparent 72%);
    pointer-events: none;
  }

  .hero__text {
    grid-column: 1 / 8;
    grid-row: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: calc(100svh - var(--spacing-ruler) - var(--spacing-header) - var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .hero .lead {
    margin-top: calc(var(--spacing) * 7);
    max-width: calc((100% + var(--spacing-gutter)) * 5 / 7 - var(--spacing-gutter));
  }

  .hero__cta {
    display: none;
  }

  .hero__cue {
    display: block;
    margin-top: auto;
    color: var(--color-ink);
  }

  .hero__collage {
    grid-column: 7 / 13;
    grid-row: 1;
    display: block;
    position: relative;
    margin: 0;
    aspect-ratio: 644 / 870;
    align-self: start;
  }

  .hero__collage .work {
    position: absolute;
  }

  .work--01 { left: 17.2%; top: 0; --w: 82.8%; }
  .work--02 { left: 0; top: 31.2%; --w: 38.8%; }
  .work--03 { left: 61%; top: 60%; --w: 34.2%; }

  /* 01 의 캡션은 오른쪽으로 — 02 가 01 의 왼쪽 아래를 덮으니 캡션이 그 밑에 깔리지 않게 */
  .work--01 .work__cap {
    margin-left: auto;
    text-align: right;
    max-width: 64%;
  }

  .work--01 .work__head {
    justify-content: flex-end;
  }

  /* ◆ 모서리 — 데스크톱: 패스가 이름 끝 → 01 왼쪽 위 → 02 오른쪽 아래 → 03 왼쪽 위 → … */
  .work--01 .key { --kx: 0; --ky: 0; --lx: 0; }
  .work--02 .key { --kx: 1; --ky: 1; --lx: 1; }
  .work--03 .key { --kx: 0; --ky: 1; --lx: 0; } /* 왼쪽 아래 — 위로 두면 02 에서 오는 곡선이 ◆ 위에서 갈고리를 그린다 */
  .work--04 .key { --kx: 1; --ky: 0; --lx: 1; }
  .work--05 .key { --kx: 0; --ky: 0; --lx: 0; }
  .work--06 .key { --kx: 1; --ky: 0; --lx: 1; }
  .work--07 .key { --kx: 0; --ky: 1; --lx: 0; }
  .work--08 .key { --kx: 0; --ky: 1; --lx: 0; }

  /* ── 작업: 머리 · 색인 · 콜라주가 한 격자에 ── */
  .works {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
    row-gap: calc(var(--spacing) * 16);
    container-type: inline-size;
  }

  .works__head {
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: start;
  }

  .index {
    order: 0;
    grid-column: 8 / 13;
    grid-row: 1 / 3;
    align-self: start;
    position: relative;
    z-index: 2;
  }

  .works > .work {
    order: 0;
    align-self: start;
    width: auto;
  }

  .work--04 { grid-column: 1 / 8; grid-row: 2; }
  .work--05 { grid-column: 9 / 13; grid-row: 3; }
  .work--06 { grid-column: 2 / 6; grid-row: 3; margin-top: 12cqi; }
  .work--07 { grid-column: 6 / 9; grid-row: 3; margin-top: 31cqi; }
  .work--08 { grid-column: 8 / 13; grid-row: 3; margin-top: calc(60.5cqi + 4.5rem); }

  /* 07 은 캡션을 액자 위로 — 08 이 07 의 오른쪽 아래를 덮는다 */
  .work--07 {
    display: flex;
    flex-direction: column-reverse;
  }

  .work--07 .work__cap {
    margin: 0 0 calc(var(--spacing) * 4);
  }

  /* ── 사례: 기울기 0, 격자에 맞춘다 ── */
  .case {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
    row-gap: calc(var(--spacing) * 14);
  }

  .case__top {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: end;
    row-gap: calc(var(--spacing) * 6);
  }

  .case__label {
    grid-column: 1 / -1;
  }

  .case__title {
    grid-column: 1 / 10;
    white-space: nowrap;
  }

  .case__sum {
    grid-column: 10 / 13;
    padding-bottom: calc(var(--spacing) * 3);
  }

  .case__media {
    grid-column: 1 / 9;
  }

  .case__text {
    grid-column: 10 / 13;
  }

  /* ── 소개 ── */
  .about {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-gutter);
  }

  .about__portrait {
    grid-column: 1 / 5;
    width: auto;
    padding-top: calc(var(--spacing) * 4);
  }

  .about__text {
    grid-column: 6 / 12;
  }

  /* ── 연락 ── */
  .contact {
    padding-bottom: calc(var(--spacing) * 24);
  }
}

/* 1024–1279: 이름("DANA" 끝 ≈595px)이 01 에 닿지 않게 01 만 오른쪽으로 민다 — 콜라주 폭은 그대로 둔다 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .work--01 { left: 21%; --w: 79%; }
}

/* ══ 상호작용 — hover 가 있는 기기에서만 (터치에서 붙어 남지 않게) ══════ */
@media (hover: hover) {
  .work:hover .work__frame,
  .work:has(a.work__frame:focus-visible) .work__frame {
    rotate: 0deg;
    translate: 0 calc(var(--spacing) * -1.5);
  }

  .work:hover .work__frame::after,
  .work:has(a.work__frame:focus-visible) .work__frame::after {
    opacity: 1;
  }

  .work:hover .key,
  .work:has(a.work__frame:focus-visible) .key {
    rotate: 0deg;
  }

  .index__list a:hover {
    background: var(--color-surface-raised);
  }

  .index__list a:hover .index__no,
  .index__list a:focus-visible .index__no {
    color: var(--color-accent-ink);
  }

  .index__list a:hover .index__no::before,
  .index__list a:focus-visible .index__no::before {
    opacity: 1;
  }

  .strip__cell:hover .strip__dia {
    background: var(--color-accent);
  }

  .strip__cell:hover .strip__mark,
  .strip__cell:hover .strip__f {
    color: var(--color-accent-ink);
  }

  .nav a:not(.pill):hover {
    background: var(--color-surface);
  }

  .textlink:hover {
    text-decoration-color: var(--color-ink);
  }

  .email:hover .email__text {
    text-decoration-color: var(--color-ink);
  }
}

.index__list a:focus-visible .index__no {
  color: var(--color-accent-ink);
}

.index__list a:focus-visible .index__no::before {
  opacity: 1;
}

.email:focus-visible .email__text {
  text-decoration-color: var(--color-ink);
}

/* ══ 움직임 — 동작 줄이기를 켜지 않은 사람에게만 ════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* I1 · 로드 1회: 잔상 Stagger + Fade in → 본 프레임 Pop in(settle). main.js 가 .is-live 를 붙여야 시작한다 */
  .is-live .name__ghost {
    animation: ghost-in var(--duration-settle) var(--ease-settle) both;
  }

  .is-live .name__ghost:nth-child(2) { animation-delay: var(--duration-stagger); }
  .is-live .name__ghost:nth-child(3) { animation-delay: calc(var(--duration-stagger) * 2); }
  .is-live .name__ghost:nth-child(4) { animation-delay: calc(var(--duration-stagger) * 3); }

  .is-live .name__final {
    animation: final-settle var(--duration-settle) var(--ease-overshoot) calc(var(--duration-stagger) * 4) both;
  }

  .is-live .name__line + .name__line .name__ghost,
  .is-live .name__line + .name__line .name__final {
    animation-delay: calc(var(--duration-stagger) * var(--d, 1));
  }

  .is-live .name__line + .name__line .name__ghost:nth-child(1) { --d: 1; }
  .is-live .name__line + .name__line .name__ghost:nth-child(2) { --d: 2; }
  .is-live .name__line + .name__line .name__ghost:nth-child(3) { --d: 3; }
  .is-live .name__line + .name__line .name__ghost:nth-child(4) { --d: 4; }
  .is-live .name__line + .name__line .name__final { --d: 5; }

  /* I2 · 액자 hover: 기울기가 펴지고 뜬다 (렌더 컷 자체가 포즈라 이미지는 누르지 않는다) */
  .work__frame {
    transition:
      rotate var(--duration-quick) var(--ease-overshoot),
      translate var(--duration-quick) var(--ease-overshoot);
  }

  .work__frame::after {
    transition: opacity var(--duration-quick) var(--ease-settle);
  }

  .key {
    transition: rotate var(--duration-quick) var(--ease-overshoot);
  }

  /* I4 · ◆ 가 화면에 들어올 때 톡 선다 (한 번) */
  .keys-armed .key:not(.is-in) .key__dia {
    scale: 0.4;
    opacity: 0;
  }

  .key__dia {
    transition:
      scale var(--duration-quick) var(--ease-overshoot),
      opacity var(--duration-instant) var(--ease-settle);
  }

  /* I6 · I8 */
  .index__no,
  .index__no::before,
  .strip__dia,
  .strip__mark,
  .strip__f,
  .index__list a {
    transition:
      color var(--duration-instant) var(--ease-settle),
      background-color var(--duration-instant) var(--ease-settle),
      opacity var(--duration-instant) var(--ease-settle);
  }

  /* I7 · 쇼릴 알약 누름 */
  .pill {
    transition: scale var(--duration-instant) var(--ease-settle);
  }

  .pill:active {
    scale: 0.97;
  }

  /* I5 이메일 눌림(폭 130% → 90% → 130%, 너비 예약) — main.js 가 hover·focus 때 .is-squash 를 붙이고
     animationend 에 뗀다. :hover 로 걸면 포인터가 떠나는 순간 동작이 잘려 제자리로 튄다 — 한 번 시작하면 끝까지 간다 */
  .email__text.is-squash {
    animation: email-squash calc(var(--duration-quick) * 2) var(--ease-in-out);
  }

  /* I3 · 눈금자 재생 헤드 — 스크롤 연동(지원하는 브라우저). 아니면 main.js 가 옮긴다 */
  @supports (animation-timeline: scroll()) {
    @media (min-width: 1024px) {
      .ruler__head {
        animation: playhead var(--ease-scrub) both;
        animation-timeline: scroll(root block);
      }
    }
  }
}

@keyframes ghost-in {
  from {
    opacity: 0;
  }
}

@keyframes final-settle {
  from {
    transform: scaleX(0.94);
  }
}

@keyframes email-squash {
  50% {
    font-stretch: var(--stretch-email-squash);
  }
}

@keyframes playhead {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}