/* =========================================================
   SARANG KIM — Portfolio
   Design tokens · 12-col grid (30 margin / 15 gutter) · components
   ========================================================= */

:root {
  /* color — 순수 #000/#FFF 미사용, 보조 텍스트는 opacity */
  --bg: #FDFDFD;
  --ink: #272727;
  --ink-2: rgba(39, 39, 39, 0.64);
  --ink-3: rgba(39, 39, 39, 0.42);
  --line: rgba(39, 39, 39, 0.12);
  --surface: #F5F5F3;
  --accent: #272727;              /* 프로젝트 상세에서 brandColor 로 교체 */

  /* grid */
  --viewport-width: 1440px;
  --grid-columns: 12;
  --grid-margin: 30px;
  --grid-gutter: 15px;
  --header-h: 64px;

  /* type */
  --font-en: "Inter", "Pretendard Variable", Pretendard, -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-hero: clamp(56px, 7.4vw, 112px);
  --fs-title: clamp(36px, 3.9vw, 56px);
  --fs-h2: clamp(22px, 2vw, 30px);
  --fs-body: clamp(15px, 1.05vw, 17px);
  --fs-cap: 12.5px;

  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --t-fast: 200ms;
  --t-mid: 380ms;
  --t-slow: 560ms;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-en);
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;
}
img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--bg); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  padding: 10px 14px; background: var(--ink); color: var(--bg); font-size: 14px;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--viewport-width); margin: 0 auto; padding: 0 var(--grid-margin); }
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

/* ---------- small type helpers ---------- */
.cap { font-size: var(--fs-cap); line-height: 1.4; letter-spacing: 0.01em; color: var(--ink-2); }
.mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; }
.num { font-variant-numeric: tabular-nums; }

/* =========================================================
   HEADER · Morphing pill nav
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  pointer-events: none;
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -18px 0; z-index: -1;
  background: linear-gradient(var(--bg) 62%, rgba(253, 250, 169, 0));
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header .wrap {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  pointer-events: auto;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  display: inline-flex; gap: 10px; align-items: baseline;
  padding: 6px 0;
}
.brand small { font-weight: 400; color: var(--ink-2); letter-spacing: 0; }

.pill-nav {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center;
  padding: 4px;
  border-radius: 999px;
  background: rgba(253, 250, 169, 0.86);
  border: 1px solid var(--line);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  transition: padding var(--t-mid) var(--ease), gap var(--t-mid) var(--ease);
}
.pill-nav a {
  position: relative; z-index: 1;
  padding: 7px 16px;
  font-size: 13px; font-weight: 500;
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease), padding var(--t-mid) var(--ease);
}
.pill-nav a[aria-current="page"] { color: var(--bg); }
.pill-nav .pill-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
  border-radius: 999px; background: var(--ink);
  transition: transform var(--t-mid) var(--ease-spring), width var(--t-mid) var(--ease-spring), opacity var(--t-fast);
}
.pill-nav .pill-hover {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
  border-radius: 999px; background: var(--surface);
  opacity: 0;
  transition: transform var(--t-mid) var(--ease), width var(--t-mid) var(--ease), opacity var(--t-fast);
}
.pill-nav.is-hovering .pill-hover { opacity: 1; }
.is-scrolled .pill-nav a { padding: 6px 13px; }

/* scroll progress */
.progress {
  position: fixed; left: 0; top: 0; z-index: 60;
  height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--accent);
  pointer-events: none;
}

/* =========================================================
   PAGE TRANSITION curtain
   ========================================================= */
.curtain {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink);
  transform: scaleY(0); transform-origin: 50% 100%;
  pointer-events: none;
  display: grid; place-items: center;
}
.curtain span { color: var(--bg); font-size: 13px; letter-spacing: 0.08em; opacity: 0; transition: opacity 200ms; }
html.pt-leave .curtain { transform: scaleY(1); transition: transform 460ms var(--ease); }
html.pt-leave .curtain span { opacity: 0.7; transition-delay: 180ms; }
html.pt-enter .curtain { transform: scaleY(1); transform-origin: 50% 0%; }
html.pt-enter.pt-run .curtain { transform: scaleY(0); transition: transform 560ms var(--ease) 60ms; }

main { min-height: 60vh; }
.page-in { animation: pageIn 600ms var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =========================================================
   FOLLOW CURSOR · peek label
   ========================================================= */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 120;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  display: grid; place-items: center;
  transition: width var(--t-mid) var(--ease), height var(--t-mid) var(--ease), margin var(--t-mid) var(--ease), background var(--t-fast), opacity var(--t-fast);
  opacity: 0;
}
.cursor.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* =========================================================
   PLACEHOLDER — 원본 이미지가 연결되기 전 비율 유지 자리
   ========================================================= */
.media { position: relative; overflow: hidden; background: var(--surface); }
.media img, .media video, .media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.media.is-contain img { object-fit: contain; }
.ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(12px, 1.4vw, 20px);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(39,39,39,0.035) 11px 12px),
    var(--surface);
  color: var(--ink-3);
}
.ph-top, .ph-bot { display: flex; justify-content: space-between; gap: 12px; }
.ph-title {
  font-size: clamp(28px, 5vw, 84px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95;
  color: rgba(39, 39, 39, 0.16);
}
.ph-sm .ph-title { font-size: clamp(22px, 2.6vw, 40px); }

/* =========================================================
   REVEAL · Scroll Bloom Image & Prism Text
   ========================================================= */
.bloom { clip-path: inset(10% 8% 10% 8%); transition: clip-path 900ms var(--ease); }
.bloom > * { transform: scale(1.14); transition: transform 1200ms var(--ease); }
.bloom.is-in { clip-path: inset(0 0 0 0); }
.bloom.is-in > * { transform: none; }

.prism { display: inline-block; }
.prism .w { display: inline-block; white-space: nowrap; }
.home-name.prism { display: block; max-width: 6.2ch; }
.prism .ch {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translateY(0.45em) skewY(6deg);
  filter: blur(6px);
  text-shadow: -0.06em 0 rgba(224, 101, 74, 0.55), 0.06em 0 rgba(70, 120, 220, 0.55);
  transition:
    opacity 520ms var(--ease),
    transform 620ms var(--ease),
    filter 620ms var(--ease),
    text-shadow 900ms var(--ease);
  transition-delay: calc(var(--i) * 28ms);
}
.prism.is-in .ch { opacity: 1; transform: none; filter: none; text-shadow: 0 0 transparent, 0 0 transparent; }

.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
.fade-up.is-in { opacity: 1; transform: none; }

/* link underline */
.ulink { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; transition: background-size var(--t-mid) var(--ease); padding-bottom: 1px; }
.ulink:hover, .ulink:focus-visible { background-size: 100% 1px; }

.arrow-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border: 1px solid var(--ink); border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.arrow-btn:hover { background: var(--ink); color: var(--bg); }
.arrow-btn svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.arrow-btn:hover svg { transform: translateX(3px); }
[data-magnetic] { will-change: transform; transition: transform 300ms var(--ease); }

/* =========================================================
   HOME
   ========================================================= */
.home-hero {
  min-height: 100vh; min-height: 100svh;
  padding-top: var(--header-h);
  padding-bottom: var(--grid-margin);
}
.home-hero .grid { min-height: calc(100svh - var(--header-h) - var(--grid-margin)); }
.home-left {
  grid-column: 1 / span 5;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: clamp(24px, 6vh, 72px);
  gap: 48px;
}
.home-name { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.055em; line-height: 0.86; }
.home-role { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.home-role strong { font-weight: 600; }
.home-role span { color: var(--ink-2); }
.home-intro { margin-top: 18px; max-width: 34ch; color: var(--ink-2); font-size: 15px; }

.index-head { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-row {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
  padding: 13px 0 12px;
  transition: padding var(--t-mid) var(--ease), color var(--t-fast);
}
.index-row .t { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.index-row .t small { font-size: 0.6em; color: var(--ink-3); font-weight: 400; margin-left: 8px; letter-spacing: 0; }
.index-list.has-active .index-row { color: var(--ink-3); }
.index-list.has-active .index-row.is-active { color: var(--ink); padding-left: 10px; }
.index-row .go { opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast), transform var(--t-fast) var(--ease); }
.index-row.is-active .go { opacity: 1; transform: none; }

.home-stage {
  grid-column: 6 / span 7;
  position: sticky; top: var(--header-h);
  align-self: start;
  height: calc(100svh - var(--header-h) - var(--grid-margin));
  display: flex; flex-direction: column; gap: 12px;
}
.stage-frame { position: relative; flex: 1; overflow: hidden; background: var(--surface); }
.stage-slide {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 640ms var(--ease);
}
.stage-slide .media { position: absolute; inset: 0; }
.stage-slide img { transform: scale(1.08); transition: transform 1100ms var(--ease); }
.stage-slide.is-active { clip-path: inset(0 0 0 0); z-index: 2; }
.stage-slide.is-active img { transform: scale(1); }
.stage-slide.is-leaving { clip-path: inset(0 0 0 0); z-index: 1; }
.stage-cap { display: flex; justify-content: space-between; gap: 16px; min-height: 20px; }
.stage-cap .cap-t { font-size: 14px; font-weight: 500; }

.section-head {
  display: flex; justify-content: space-between; align-items: end; gap: 20px;
  padding: 120px 0 18px; border-bottom: 1px solid var(--ink);
}
.section-head h2 { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }

/* Selected works — 비대칭 배치 */
.selected { padding-bottom: 80px; }
.sel-item { margin-top: clamp(48px, 7vw, 110px); }
.sel-item a { display: block; }
.sel-item .media { transition: transform var(--t-mid) var(--ease); }
.sel-item a:hover .media img { transform: scale(1.03); }
.sel-item .media img { transition: transform 900ms var(--ease); }
.sel-meta { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; padding-top: 12px; align-items: baseline; }
.sel-meta h3 { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.sel-meta p { color: var(--ink-2); font-size: 14px; }
.sel-item:nth-child(4n+1) { grid-column: 1 / span 7; }
.sel-item:nth-child(4n+2) { grid-column: 9 / span 4; margin-top: clamp(140px, 18vw, 260px); }
.sel-item:nth-child(4n+3) { grid-column: 3 / span 5; }
.sel-item:nth-child(4n+4) { grid-column: 8 / span 5; margin-top: clamp(100px, 12vw, 180px); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { margin-top: 120px; border-top: 1px solid var(--line); padding: 48px 0 30px; }
.foot-big {
  display: inline-block;
  font-size: clamp(44px, 8vw, 128px); font-weight: 600; letter-spacing: -0.06em; line-height: 0.9;
}
.foot-big .ar { display: inline-block; transition: transform var(--t-mid) var(--ease); }
.foot-big:hover .ar { transform: translate(8px, -8px); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }

/* =========================================================
   WORKS
   ========================================================= */
.works-top { padding-top: calc(var(--header-h) + clamp(40px, 8vh, 96px)); }
.works-title { font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.055em; line-height: 0.9; }
.works-title sup { font-size: 0.24em; font-weight: 500; letter-spacing: 0; vertical-align: top; margin-left: 0.2em; position: relative; top: 0.5em; }
.works-bar {
  margin-top: clamp(32px, 6vh, 64px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.tabs { position: relative; display: flex; flex-wrap: wrap; gap: 2px; }
.tab {
  position: relative; z-index: 1;
  padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--ink-2);
  transition: color var(--t-fast);
}
.tab sup { font-size: 10px; margin-left: 3px; color: inherit; opacity: 0.7; }
.tab[aria-pressed="true"] { color: var(--bg); }
.tab:disabled { color: var(--ink-3); cursor: not-allowed; }
.tab:not([aria-pressed="true"]):not(:disabled):hover { color: var(--ink); }
.tabs .tab-ind {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0;
  background: var(--ink); border-radius: 999px;
  transition: transform var(--t-mid) var(--ease-spring), width var(--t-mid) var(--ease-spring);
}
.view-toggle { display: flex; gap: 4px; align-items: center; font-size: 13px; }
.view-toggle button { padding: 6px 10px; color: var(--ink-3); transition: color var(--t-fast); }
.view-toggle button[aria-pressed="true"] { color: var(--ink); }
.view-toggle button svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

/* list view — Peek Image Index */
.w-list { position: relative; }
.w-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast), padding var(--t-mid) var(--ease);
}
.w-row .n { grid-column: span 1; }
.w-row .t { grid-column: span 6; font-size: clamp(24px, 3vw, 44px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; }
.w-row .t small { display: inline-block; font-size: 0.38em; letter-spacing: 0; color: var(--ink-3); font-weight: 400; margin-left: 10px; vertical-align: middle; }
.w-row .c { grid-column: span 2; }
.w-row .y { grid-column: span 2; }
.w-row .a { grid-column: span 1; justify-self: end; }
.w-row .thumb { display: none; }
.w-list.is-peeking .w-row { color: var(--ink-3); }
.w-list.is-peeking .w-row:hover, .w-list.is-peeking .w-row:focus-visible { color: var(--ink); }
.w-row:hover .a svg { transform: translateX(4px); }
.w-row .a svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }

.peek {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: clamp(240px, 24vw, 360px); aspect-ratio: 4 / 3;
  pointer-events: none;
  clip-path: inset(50% 50% 50% 50%);
  transition: clip-path 420ms var(--ease);
  overflow: hidden;
}
.peek.is-on { clip-path: inset(0 0 0 0); }
.peek .peek-track { position: absolute; inset: 0; transition: transform 520ms var(--ease); }
.peek .peek-cell { position: relative; height: 100%; }
.peek .media { position: absolute; inset: 0; }

/* grid view — Hover Expand Gallery */
.w-grid { display: none; padding-top: 30px; }
.w-grid.is-on { display: block; }
.w-list.is-off { display: none; }
.xg-row { display: flex; gap: var(--grid-gutter); margin-bottom: 48px; }
.xg-item { flex: 1 1 0; min-width: 0; transition: flex-grow 600ms var(--ease); }
.xg-row:hover .xg-item { flex-grow: 0.8; }
.xg-row .xg-item:hover, .xg-row .xg-item:focus-within { flex-grow: 1.7; }
.xg-item .media { height: clamp(240px, 30vw, 440px); }
.xg-item .media img { transition: transform 900ms var(--ease); }
.xg-item:hover .media img { transform: scale(1.03); }
.xg-cap { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding-top: 12px; }
.xg-cap h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.w-item-hide { display: none !important; }
.w-anim { animation: wIn 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes wIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.empty-note { padding: 60px 0; color: var(--ink-2); }

/* =========================================================
   CASE STUDY — split 35 / 65
   ========================================================= */
.case {
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  column-gap: clamp(24px, 3vw, 48px);
  padding-top: var(--header-h);
}
.case-info {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  padding: clamp(24px, 4vh, 48px) 0 var(--grid-margin);
  display: flex; flex-direction: column; gap: 28px;
}
.case-info::-webkit-scrollbar { display: none; }
.ci-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ci-top .count { color: var(--ink-2); }
.cat-chip { display: inline-flex; align-items: center; gap: 7px; }
.cat-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.case-title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
.case-sub { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.case-summary { font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; }
.case-bg { color: var(--ink-2); font-size: 15px; }
.case-meta { display: grid; grid-template-columns: 72px 1fr; border-top: 1px solid var(--line); }
.case-meta dt, .case-meta dd { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.case-meta dt { color: var(--ink-2); }
.case-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.case-links a::after { content: " ↗"; }

.toc { border-top: 1px solid var(--ink); padding-top: 12px; }
.toc ol { margin-top: 10px; }
.toc a {
  display: grid; grid-template-columns: 30px 1fr; align-items: center;
  padding: 6px 0; font-size: 14px; color: var(--ink-3);
  transition: color var(--t-fast), transform var(--t-mid) var(--ease);
}
.toc a .bar { width: 14px; height: 1px; background: currentColor; transition: width var(--t-mid) var(--ease), background var(--t-fast); }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); }
.toc a.is-active .bar { width: 22px; background: var(--accent); height: 2px; }

.case-nav { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
.case-nav a { display: flex; flex-direction: column; gap: 2px; max-width: 48%; }
.case-nav a:last-child { text-align: right; }
.case-nav a b { font-size: 15px; font-weight: 500; }

.case-mobile-toc { display: none; }
.case-details { display: contents; }
.case-details > summary { display: none; }

.case-body { padding: clamp(24px, 4vh, 48px) 0 0; min-width: 0; }
.case-hero { margin-bottom: clamp(56px, 8vw, 120px); }
.cs-section { padding-bottom: clamp(64px, 9vw, 140px); }
.cs-head {
  display: grid; grid-template-columns: 56px 1fr; align-items: baseline;
  padding-top: 14px; border-top: 1px solid var(--ink); margin-bottom: clamp(28px, 3vw, 44px);
}
.cs-head h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.cs-blocks > * + * { margin-top: clamp(20px, 2.6vw, 40px); }

.b-text { max-width: 62ch; }
.b-text p + p { margin-top: 1em; }
.b-text.is-lead { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.5; letter-spacing: -0.015em; max-width: 36ch; }
.draft {
  display: flex; gap: 12px; align-items: center;
  padding: 22px; border: 1px dashed var(--line); color: var(--ink-3); font-size: 14px;
}
.draft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }

figure.b-img figcaption, .b-fig figcaption { margin-top: 10px; }
.b-img.is-inset { width: 66%; margin-left: auto; }
.b-img .media { cursor: zoom-in; }
.b-cols { display: grid; gap: var(--grid-gutter); }
.b-cols.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b-cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.b-cols .media { cursor: zoom-in; }

.b-ti { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.b-ti.is-rev > :first-child { order: 2; }

.b-sticky { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 40px); }
.b-sticky .s-text { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.b-sticky .s-text h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; }
.b-sticky .s-text p { color: var(--ink-2); font-size: 15px; }
.b-sticky .s-imgs { display: grid; gap: var(--grid-gutter); }

.b-scroller {
  display: flex; gap: var(--grid-gutter);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent;
}
.b-scroller > figure { flex: 0 0 auto; width: min(72%, 560px); scroll-snap-align: start; }

.b-quote { font-size: clamp(20px, 2vw, 28px); line-height: 1.45; letter-spacing: -0.02em; max-width: 30ch; }
.b-quote cite { display: block; margin-top: 12px; font-style: normal; }

/* Spring Split Accordion */
.acc { display: flex; flex-direction: column; }
.acc-item {
  border-top: 1px solid var(--line);
  transition: margin var(--t-slow) var(--ease-spring), background var(--t-mid) var(--ease), border-radius var(--t-mid), padding var(--t-slow) var(--ease-spring);
}
.acc-item:last-child { border-bottom: 1px solid var(--line); }
.acc-item.is-open { margin: 14px 0; background: var(--surface); border-color: transparent; border-radius: 4px; padding: 0 18px; }
.acc-item.is-open + .acc-item { border-top-color: transparent; }
.acc-btn { width: 100%; display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; text-align: left; padding: 16px 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.acc-btn .pm { position: relative; width: 14px; height: 14px; }
.acc-btn .pm::before, .acc-btn .pm::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1.5px; background: currentColor; transition: transform var(--t-mid) var(--ease-spring); }
.acc-btn .pm::after { transform: rotate(90deg); }
.acc-item.is-open .pm::after { transform: rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 0 20px 34px; color: var(--ink-2); max-width: 64ch; }

/* Image Compare Slider */
.cmp { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; background: var(--surface); }
.cmp .media { position: absolute; inset: 0; }
.cmp .cmp-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.cmp .cmp-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: var(--bg); box-shadow: 0 0 0 0.5px rgba(39,39,39,.3); pointer-events: none; }
.cmp .cmp-knob {
  position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: var(--bg); display: grid; place-items: center;
  box-shadow: 0 1px 0 rgba(39,39,39,.12); font-size: 12px; letter-spacing: -0.1em;
  transition: transform var(--t-fast) var(--ease-spring);
}
.cmp:active .cmp-knob { transform: scale(0.9); }
.cmp input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.cmp .cmp-tag { position: absolute; top: 12px; padding: 4px 9px; background: rgba(253,250,169,.9); border-radius: 999px; pointer-events: none; }
.cmp .cmp-tag.l { left: 12px; } .cmp .cmp-tag.r { right: 12px; }

/* Next project */
.next-proj { display: block; border-top: 1px solid var(--ink); padding: 20px 0 60px; }
.next-proj .np-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--grid-gutter); align-items: end; }
.next-proj .np-title { font-size: clamp(40px, 6vw, 96px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.95; }
.next-proj .media { clip-path: inset(0 0 100% 0); transition: clip-path 600ms var(--ease); }
.next-proj:hover .media, .next-proj:focus-visible .media { clip-path: inset(0 0 0 0); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(253, 250, 169, 0.97);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-mid) var(--ease); }
.lb-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--grid-margin); font-size: 13px; }
.lb-stage { position: relative; display: grid; place-items: center; padding: 0 var(--grid-margin); min-height: 0; }
.lb-stage img { max-height: 100%; max-width: 100%; object-fit: contain; transform: scale(0.97); transition: transform var(--t-slow) var(--ease); }
.lightbox.is-open .lb-stage img { transform: none; }
.lb-ctrl { display: flex; justify-content: center; gap: 8px; padding: 14px; }
.lb-ctrl button, .lb-bar button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; transition: border-color var(--t-fast); }
.lb-ctrl button:hover, .lb-bar button:hover { border-color: var(--ink); }

/* =========================================================
   ABOUT
   ========================================================= */
.about-top { padding-top: calc(var(--header-h) + clamp(40px, 8vh, 96px)); }
.about-statement { grid-column: 1 / span 10; font-size: clamp(34px, 4.6vw, 72px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.02; }
.about-bio { grid-column: 7 / span 5; margin-top: 48px; color: var(--ink-2); }
.about-groups { margin-top: clamp(72px, 10vw, 140px); }
.ag { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); border-top: 1px solid var(--ink); padding: 14px 0 52px; }
.ag h2 { grid-column: span 3; font-size: 14px; font-weight: 600; }
.ag ul { grid-column: 4 / span 9; }
.ag li { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--grid-gutter); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ag li .p { grid-column: span 2; color: var(--ink-2); }
.ag li .tt { grid-column: span 4; font-weight: 500; }
.ag li .d { grid-column: span 3; color: var(--ink-2); }
.ag .skills { grid-column: 4 / span 9; display: flex; flex-wrap: wrap; gap: 8px; }
.ag .skills span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
.contact-block { padding: 14px 0 0; border-top: 1px solid var(--ink); }
.contact-list { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.contact-list a { font-size: clamp(28px, 4vw, 56px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.1; width: fit-content; }
.contact-empty { margin-top: 16px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1279px) {
  .case { grid-template-columns: minmax(0, 33fr) minmax(0, 67fr); }
}

/* Tablet */
@media (max-width: 1023px) {
  :root { --grid-margin: 24px; }
  .home-left { grid-column: 1 / span 6; }
  .home-stage { grid-column: 7 / span 6; }
  .case { grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); column-gap: 24px; }
  .case-summary { font-size: 16px; }
  .toc a { font-size: 13px; grid-template-columns: 24px 1fr; }
  .w-row .t { grid-column: span 7; }
  .w-row .c { grid-column: span 2; }
  .w-row .y { grid-column: span 1; }
  .ag h2 { grid-column: span 12; margin-bottom: 10px; }
  .ag ul, .ag .skills { grid-column: 1 / -1; }
  .sel-item:nth-child(n) { grid-column: span 6; margin-top: 56px; }
  .sel-item:nth-child(2n) { margin-top: 140px; }
}

/* Mobile */
@media (max-width: 767px) {
  :root { --grid-margin: 16px; --header-h: 58px; }
  .brand small { display: none; }
  .pill-nav a { padding: 6px 11px; font-size: 12.5px; }

  .home-hero { min-height: 0; }
  .home-hero .grid { min-height: 0; display: block; }
  .home-left { gap: 36px; padding-top: 28px; }
  .home-role { margin-top: 18px; }
  .home-stage { position: relative; top: 0; height: auto; margin-top: 8px; display: none; }
  .index-row { grid-template-columns: 30px minmax(0, 1fr) 72px; align-items: center; padding: 12px 0; }
  .index-row .ic { display: none; }
  .index-row .m-thumb { display: block; width: 72px; aspect-ratio: 4/3; }
  .w-row .thumb .media { position: absolute; inset: 0; }
  .index-list.has-active .index-row { color: inherit; }
  .index-list.has-active .index-row.is-active { padding-left: 0; }

  .sel-item:nth-child(n) { grid-column: 1 / -1; margin-top: 44px; }
  .section-head { padding-top: 80px; }

  .w-row { grid-template-columns: 76px minmax(0, 1fr); row-gap: 4px; padding: 14px 0; }
  .w-row .thumb { display: block; grid-row: span 2; width: 76px; aspect-ratio: 4/3; position: relative; }
  .w-row .n, .w-row .a, .w-row .y { display: none; }
  .w-row .t { grid-column: 2; font-size: 22px; }
  .w-row .c { grid-column: 2; }
  .w-list.is-peeking .w-row { color: inherit; }
  .xg-row { flex-direction: column; margin-bottom: 0; }
  .xg-item { margin-bottom: 36px; }
  .xg-item .media { height: auto; aspect-ratio: 4 / 3; }
  .peek { display: none; }

  /* case — 분할 해제, 중첩 스크롤 없음 */
  .case { display: block; }
  .case-info { position: static; height: auto; overflow: visible; padding-top: 28px; gap: 20px; }
  .case-details { display: block; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .case-details > summary { display: flex; justify-content: space-between; padding: 14px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; }
  .case-details > summary::-webkit-details-marker { display: none; }
  .case-details > summary::after { content: "+"; font-size: 18px; line-height: 1; transition: transform var(--t-mid) var(--ease); }
  .case-details[open] > summary::after { transform: rotate(45deg); }
  .case-details .cd-inner { display: flex; flex-direction: column; gap: 18px; padding-bottom: 18px; }
  .case-info .toc, .case-info .case-nav { display: none; }
  .case-mobile-toc {
    display: block;
    position: sticky; top: var(--header-h); z-index: 30;
    margin: 0 calc(var(--grid-margin) * -1);
    background: rgba(253, 250, 169, 0.94);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .case-mobile-toc ol { display: flex; gap: 6px; overflow-x: auto; padding: 10px var(--grid-margin); scrollbar-width: none; }
  .case-mobile-toc ol::-webkit-scrollbar { display: none; }
  .case-mobile-toc a { display: block; white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); }
  .case-mobile-toc a.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .case-body { padding-top: 24px; }
  .cs-head { grid-template-columns: 40px 1fr; }
  .b-img.is-inset { width: 100%; }
  .b-cols.c2, .b-cols.c3, .b-ti, .b-sticky { grid-template-columns: minmax(0, 1fr); }
  .b-ti.is-rev > :first-child { order: 0; }
  .b-sticky .s-text { position: static; }
  .b-scroller > figure { width: 82%; }
  .next-proj .np-row { grid-template-columns: 1fr; }
  .next-proj .media { clip-path: none; }

  .about-statement, .about-bio { grid-column: 1 / -1; }
  .ag li { grid-template-columns: 1fr; row-gap: 2px; }
  .ag li .p, .ag li .tt, .ag li .d { grid-column: 1; }
  .foot-row { flex-direction: column; }
}

@media (min-width: 768px) { .index-row .m-thumb { display: none; } }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .bloom, .bloom > *, .prism .ch, .fade-up { clip-path: none !important; transform: none !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; }
  .cursor, .peek { display: none !important; }
}