/* Blankish Works — 어둠에서 시작한다
   ★ 사이트 전체가 어두운 바탕 하나다 ★ 흰 도화지 대신 어둠에서 시작해 빛으로 밝혀진다는
   컨셉이라, 기기의 밝은/어두운 설정을 따르지 않는다(라이트 토큰이 없다).
   색은 아래 토큰에만 — 작업의 빛 색은 content/lights.json 한 곳. */

/* 글꼴 둘, 역할이 갈린다 — **큰 글자는 목소리(Poppins) · 작은 글자는 표지판(Manrope)**.
   예외 하나: **워드마크는 Poppins 400 대문자**(09-22 사용자 결정) — 글자 O 가 마크의 원과 같은 정원이고,
   하위 브랜드(Blankish Piano = Poppins)와 한 가족이 되어 위아래가 대소문자로만 갈린다.
   Manrope: 차림표·라틴 본문. 라틴 가변 글꼴 한 벌(200~800)로 굵기를 다 낸다.
   구글 폰트의 latin 부분집합 woff2 그대로다(24KB · OFL, 사본은 Manrope-OFL.txt).
   더 줄이려면 쓰는 글자만 남긴다 — tools/make-fonts.sh */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-latin.var.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 워드마크 — Poppins Regular 의 대문자만 남긴 파일(npm run fonts). 머리의 BLANKISH WORKS 에만 쓴다 */
@font-face {
  font-family: "Poppins Wordmark";
  src: url("/fonts/Poppins-Regular.wordmark.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020, U+0041-005A, U+00A0;
}
/* Poppins: 큰 문장·작업 이름·작업 페이지 제목. 굵기는 200 한 벌뿐이다(워드마크 외에 다른 굵기를 부르지 말 것) */
@font-face {
  font-family: "Poppins Blank";
  /* 쓰는 영문자만 남긴 woff2(7KB · 원본 TTF 158KB) — 다시 만들기: npm run fonts */
  src: url("/fonts/Poppins-ExtraLight.subset.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2026, U+2190-2193;
}
/* 서명 줄 한 줄에만 — Newsreader Light(opsz 24) · 쓰는 영문자만 남긴 woff2(14KB · OFL, 사본은 Newsreader-OFL.txt).
   이름은 Poppins, 서명은 이것(09-22 사용자 결정). 구글 폰트 css2 의 text= 로 받은 부분집합이다 —
   글자 범위를 넓히려면 fonts.googleapis.com/css2?family=Newsreader:opsz,wght@24,300&text=… 로 다시 받는다. */
@font-face {
  font-family: "Newsreader Sign";
  src: url("/fonts/Newsreader-Light.subset.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
  unicode-range: U+0020-007E, U+2013-2014, U+2018-2019, U+201C-201D, U+2026;
}

:root {
  --paper: #050506;
  --ink: #f2f2f2;
  --mute: #8a8a90;              /* 바탕 대비 6.0:1 — 방침 같은 긴 글의 곁글도 읽힌다 */
  --line: rgb(242 242 242 / .13);
  --fog: 110 110 118;           /* 흐린 형태의 색 (r g b) — 404. 어둠 위라 희게 두면 머리 글자를 덮는다 */
  --glass: rgb(6 6 8 / .3);
  --display: "Poppins Blank", "Manrope", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --ui: "Manrope", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --text: "Manrope", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sign: "Newsreader Sign", Georgia, serif;   /* 서명 줄 「One light at a time, the blank becomes ours.」만 */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  word-break: keep-all;           /* 한국어는 낱말 중간에서 꺾지 않는다 */
  overflow-wrap: anywhere;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--ink); color: var(--paper); }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10;
}
.skip:focus { left: 8px; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ── 머리 ─────────────────────────────────────────── */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 18px;
  mix-blend-mode: difference; color: #fff;   /* 무엇 위에 있든 읽힌다 */
  transition: transform .45s var(--ease);
}
/* 내려 읽을 땐 비켜 주고, 올리면 돌아온다(site.js 가 .top-away 를 단다).
   키보드로 머리에 닿으면 숨어 있어도 나온다. */
.top.top-away:not(:focus-within) {
  transform: translateY(-100%);
  /* 비킬 땐 천천히 출발해 고르게 간다. --ease(첫 순간에 거의 다 가는 곡선)로 올리면 본문과 같은 쪽으로
     움직여서 「올라간다」가 아니라 「사라진다」로 보였다(09-22 사용자 지적). 돌아올 땐 위의 --ease 그대로. */
  transition: transform .6s cubic-bezier(.45, 0, .25, 1);
}
/* 머리 뒤 막 — 머리는 투명이라 내려 읽다 올리면 메뉴 글자가 본문 글자 위에 겹쳤다(10-09 사용자 지적).
   머리 자체에 바탕을 칠하면 difference 섞기에 같이 섞여 사라지므로, 섞이지 않는 형제를 머리 뒤에 둔다.
   맨 위(첫 화면의 빛 위)에서는 없다 — 본문 위에 떠 있을 때만. 비킬 땐 머리와 같은 곡선으로 함께 간다. */
.top-veil {
  position: fixed; inset: 0 0 auto 0; z-index: 4; pointer-events: none;
  height: calc(max(18px, env(safe-area-inset-top)) + 64px);
  background: rgb(5 5 6 / .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
  opacity: 0;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.top.top-over ~ .top-veil { opacity: 1; }
.top.top-away:not(:focus-within) ~ .top-veil {
  transform: translateY(-100%);
  transition: opacity .3s var(--ease), transform .6s cubic-bezier(.45, 0, .25, 1);
}
/* 워드마크 — Poppins 400 대문자에 자간을 벌린다. 자간을 벌리면 낱말 사이도 같이 벌려야 한 덩이로 안 뭉친다.
   Manrope 400·500·600 · Poppins 300·400·500 을 같은 규칙으로 견주어 골랐다(09-22 · brand/study/14).
   300 은 꽉 찬 b 마크 옆에서 가늘어 따로 놀고, 500 은 17px 머리에서 무겁다. */
.brand {
  font-family: "Poppins Wordmark", var(--ui); font-weight: 400;
  font-size: 17px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; line-height: 1.1;
  display: inline-flex; align-items: baseline; gap: .65em;
}
/* b 마크(사용자 디자인) — 워드마크 앞에, **아래줄 맞춤 · 원은 대문자보다 조금 크게**(09-22 사용자 결정).
   둥근 것은 같은 높이면 작아 보인다 — 그래서 원을 글꼴의 O 와 같게 한다(Poppins 400 을 재 봄:
   대문자 698 · O 는 -7 ~ 705 = 높이 .712em, 폭 .700 — 거의 정원).
   원 지름은 마크 높이의 1280/1800(비례 A: 8/3x ÷ 15/4x) → 마크 높이 .712 × 1800/1280 = 1.0012em.
   마크의 바닥이 곧 원의 바닥이라 baseline 맞춤에 O 가 내려가는 만큼(.007em) 더 내린다.
   글꼴이나 마크 모양을 바꾸면 이 값을 다시 잰다.
   마크와 글자 사이는 낱말 사이(.65em)보다 좁게 — 넓히면 마크와 글자가 떨어져 보였다(사용자 지적). */
.brand-mark { height: 1.0012em; width: auto; flex: none; margin-right: -.2em; transform: translateY(.007em); }
/* 좁은 폭에서는 워드마크가 차림표에 닿는다(실측: 17px 이면 361 폭에서 틈 0 · 375 폭에서 9px) —
   휴대폰은 15px, 아주 좁으면 13px 에 자간까지 줄인다 */
.brand span { white-space: nowrap; }
@media (max-width: 420px) { .brand { font-size: 15px; } }
@media (max-width: 360px) { .brand { font-size: 13px; letter-spacing: .12em; gap: .55em; } .brand-mark { margin-right: -.1em; } }
.top nav { display: flex; gap: clamp(16px, 3vw, 36px); }
.top nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding: 6px 0; position: relative;
}
.top nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.top nav a:hover::after, .top nav a[aria-current]::after { transform: scaleX(1); }

/* ── 404: 빈 유리 뒤로 흐린 것들이 지나간다(0.1판 첫 화면의 모양) ─────
   홈의 첫 화면은 light.css 의 .dark-hero 다. */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-content: end;
  padding: 120px var(--gutter) clamp(40px, 7vh, 80px);
  overflow: hidden; isolation: isolate;
}
.fog {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  /* 첫 화면 밑에서 형태가 칼로 자른 듯 끊기지 않게 — 종이로 녹아든다 */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.fog i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgb(var(--fog) / .55), rgb(var(--fog) / .12) 55%, transparent 70%);
  filter: blur(34px);
  animation: drift var(--t, 38s) var(--ease) infinite alternate;
}
.fog .o1 { width: 46vmax; height: 46vmax; right: -12vmax; top: -14vmax; --t: 42s; }
.fog .o2 { width: 22vmax; height: 22vmax; left: 8vw; top: 18vh; --t: 31s; animation-delay: -8s; }
.fog .o3 { width: 30vmax; height: 30vmax; left: -10vmax; bottom: -12vmax; --t: 47s; animation-delay: -20s; }
.fog .o4 {                       /* 고리 — 무엇인지 모를 형태 하나 */
  width: 20vmax; height: 20vmax; right: 18vw; bottom: 6vh; --t: 36s; animation-delay: -14s;
  background: none; border: 3.2vmax solid rgb(var(--fog) / .28); filter: blur(22px);
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3vw, -4vh) scale(1.06); }
  100% { transform: translate(-2vw, 3vh) scale(.96); }
}
.pane {                          /* 빈 캔버스 — 아직 아무것도 안 그린 유리 */
  position: absolute; z-index: -1; inset: 14vh 9vw 22vh 9vw;
  border: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
}
.hero::after {                   /* 입자 — 너무 매끈하면 화면처럼 보인다 */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mega {
  margin: 0;
  font-family: var(--display); font-weight: 200;
  font-size: clamp(64px, 16.5vw, 280px);
  line-height: .84; letter-spacing: -.045em;
  display: grid;
}
.mega span:last-child { padding-left: .9em; }
.hero-foot {
  margin-top: clamp(28px, 5vh, 56px);
  display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;
}
.lede { margin: 0; max-width: 30em; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.75; }
.lede em { font-style: normal; color: var(--mute); }
.down {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; display: inline-flex; gap: 10px; align-items: center;
}
.down::after { content: "↓"; animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* ── 구역 머리 ─────────────────────────────────────── */
.sec { padding: clamp(72px, 12vh, 140px) var(--gutter) clamp(56px, 9vh, 100px); }
.sec-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute); margin-bottom: clamp(24px, 4vh, 40px);
}
.sec-h h2 { margin: 0; font: inherit; color: var(--ink); flex: none; white-space: nowrap; }   /* 옆 글이 길어도 제목은 안 꺾인다(「마 / 크」) */
.sec-h span { text-align: right; }

/* ── 작업 목록 ─────────────────────────────────────── */
.worklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.work > a, .work > div {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr) 11em 4em 7.5em;
  align-items: baseline; gap: 16px;
  padding: clamp(18px, 3vh, 30px) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.work .no, .work .kind, .work .yr, .work .st {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}
.work .st { text-align: right; }
.work .ttl {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(30px, 5.6vw, 84px); line-height: 1; letter-spacing: -.035em;
  transition: transform .7s var(--ease);
  white-space: nowrap; overflow: hidden; text-overflow: clip; padding-block: .08em;
}
.work > a:hover .ttl, .work > a:focus-visible .ttl { transform: translateX(.18em); }
.work.blank .ttl {
  filter: blur(calc(6px + var(--i) * 3px));
  opacity: calc(.5 - var(--i) * .12);
  user-select: none;
}
/* 번호 옆의 점 — 그 작업의 빛(--lc 는 build.js 가 작업 번호로 붙인다) */
.work .no { display: inline-flex; align-items: center; gap: .7em; }
.work .dot {
  flex: none; width: .7em; height: .7em; border-radius: 50%; background: var(--lc);
  box-shadow: 0 0 10px 2px var(--lc), 0 0 28px 6px color-mix(in srgb, var(--lc) 45%, transparent);
}
.work > a:hover .ttl { text-shadow: 0 0 36px color-mix(in srgb, var(--lc, transparent) 60%, transparent); }
.work.blank .no { opacity: calc(.9 - var(--i) * .25); }
.work.blank .kind, .work.blank .yr, .work.blank .st { opacity: .35; }

/* 마우스를 따라오는 미리보기 — 흐린 데서 선명해진다 */
.peek {
  position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none;
  width: clamp(160px, 18vw, 260px); aspect-ratio: 1;
  opacity: 0; filter: blur(18px); scale: .92;
  transition: opacity .45s var(--ease), filter .6s var(--ease), scale .6s var(--ease);
  translate: 0 -50%;   /* 왼쪽 끝이 left — 커서 옆 자리는 site.js 가 정한다 */
}
.peek.on { opacity: 1; filter: blur(0); scale: 1; }
.peek img { width: 100%; height: 100%; object-fit: contain; }   /* 마크는 네모가 아니다 — 자르지 않는다 */

/* ── 글 페이지 (About · 지원 · 방침) ─────────────────── */
.page { padding: clamp(120px, 20vh, 200px) var(--gutter) clamp(64px, 10vh, 120px); }
.page-h {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(48px, 10vw, 150px); line-height: .9; letter-spacing: -.045em;
  margin: 0 0 clamp(40px, 7vh, 80px);
}
.eyebrow {
  display: block; margin-bottom: 20px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 80px); }
.cols > aside {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}
.prose { max-width: 40em; }
.prose p { margin: 0 0 1.2em; }
.prose .big { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.45; letter-spacing: -.01em; }
.prose .quiet { color: var(--mute); }
.sign { font-family: var(--sign); font-weight: 300; }
/* 글쓴이 — 곁 칸은 주제 자리라 화자 이름을 거기 두면 「무엇에 대한 글」로 읽혔다. 글 끝에 서명으로 */
.prose .by { color: var(--mute); font-size: 15px; margin-top: 1.6em; }   /* 서명 줄 — 홈 목록 끝(.arrive)과 About 끝이 같은 글자·같은 글꼴 */
.prose h2 {
  font-size: 15px; font-weight: 600; margin: 2.6em 0 .8em; padding-top: 1.2em; border-top: 1px solid var(--line);
}
.prose ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose b { font-weight: 600; }
.prose .tw { overflow-x: auto; margin: 0 0 1.2em; }
.prose table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; }
/* 첫 칸이 줄 이름인 표(방침 §5-1) — 줄 이름은 꺾지 않고, 나머지 칸은 같은 너비(앱 css/80-settings.css 와 같은 규칙) */
.prose td:first-child { white-space: nowrap; font-weight: 600; width: 1%; }
.prose tr:first-child th:not(:first-child) { width: 33%; }
.doc-ver { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--mute); }
.linkline {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  font-size: clamp(18px, 2vw, 24px);
}
.linkline::after { content: "→"; transition: transform .5s var(--ease); }
.linkline:hover::after { transform: translateX(6px); }
.linklist { border-top: 1px solid var(--line); margin: 0 0 1.2em; }

/* ── 작업 페이지 첫 화면 — 그 작업의 빛 하나가 유리 뒤에서 번지고, 그 앞에 마크 ──────
   홈의 컨셉(어둠 + 빛)을 작업 하나로 좁힌 것. 빛 색은 --lc(빌드가 {{light:slug}} 로 lights.json 에서 넣는다).
   빛은 움직이지 않는다 — 홈처럼 JS 로 돌리지 않고 미리 번진 그라디언트 하나(가볍다).
   너무 밝게 하지 않는다(사용자 지적 — 홈과 같은 세기 .58). */
.work-hero {
  position: relative; min-height: min(100svh, 980px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  --wh-gap: clamp(24px, 5vw, 80px);
  align-items: end; gap: var(--wh-gap);
  padding: 120px var(--gutter) clamp(48px, 9vh, 104px);
  overflow: hidden; isolation: isolate;
}
.wh-light {
  position: absolute; z-index: -2; pointer-events: none;
  width: min(104vmin, 1020px); aspect-ratio: 1; border-radius: 50%;
  /* 빛은 그 마크의 것 — 마크 뒤(오른쪽 칸 가운데). 칸 폭 = (화면 - 여백 둘 - 칸 사이) × 1/2.25.
     유리 안에 따로 띄워 보니 시선이 둘로 갈리고 누구의 빛인지 흐렸다(09-22 사용자와 견줌). 홈은 여러 빛이 모이는
     곳이라 흩어지고, 작업 페이지는 그 작업 하나의 얼굴이라 붙는다. 뿌옇던 것은 위치가 아니라 경계 대비 탓 → .wh-mark 그늘 */
  right: calc(var(--gutter) + (100vw - 2 * var(--gutter) - var(--wh-gap)) / 4.5); top: 50%; translate: 50% -50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--lc) 85%, transparent) 0%, color-mix(in srgb, var(--lc) 45%, transparent) 24%,
    color-mix(in srgb, var(--lc) 14%, transparent) 46%, transparent 68%);
  opacity: .58;
}
/* 유리 — 홈의 .dark-pane 과 같은 재질. 빛은 이 뒤에서 흐릿하게 비친다 */
.wh-pane {
  position: absolute; z-index: -1; inset: 14vh 9vw 16vh 9vw;
  border: 1px solid rgb(255 255 255 / .1);
  background: var(--glass);
  -webkit-backdrop-filter: blur(34px) saturate(1.15);
  backdrop-filter: blur(34px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
}
.wh-title .page-h { margin: 0; }
/* 마크는 유리 앞 — 흐리지 않다. 빛 위의 흰 경계가 뿌옇게 읽혀 얇은 어둠을 두른다(.mark-stage.lit img 와 같은 까닭) */
.wh-mark {
  justify-self: center; align-self: center;   /* 빛의 가운데에 선다 */
  width: auto; height: min(40vh, 350px); max-width: 100%;   /* 50vh 는 너무 컸고 30vh 는 작았다 — 그 사이(사용자 결정) */
  filter: drop-shadow(0 0 8px rgb(0 0 0 / .55));
}
.page-after { padding-top: clamp(56px, 10vh, 120px); }

.feat { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: f; }
.feat li {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--line); counter-increment: f;
}
.feat li::before {
  content: counter(f, decimal-leading-zero);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--mute); padding-top: .35em;
}
.feat b { font-weight: 500; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.01em; line-height: 1.35; }
.feat span { color: var(--mute); }

/* ── 브랜드 페이지(/brand/) — 새 재질을 만들지 않는다: 글 페이지 · 구역 머리 · 작업 목록 · 작업 첫 화면의 빛을 빌린다 ── */
/* 빛을 켜는 마음 — 네 낱말은 큰 목소리(Poppins), 뜻은 작은 표지판. 목록 줄은 작업 목록과 같은 선 */
.minds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.minds li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 80px);
  align-items: baseline; padding: clamp(18px, 3vh, 30px) 0; border-bottom: 1px solid var(--line);
}
.minds b {
  font-family: var(--display); font-weight: 200; font-size: clamp(34px, 5.6vw, 84px);
  line-height: 1; letter-spacing: -.035em; padding-block: .08em;
}
.minds span { color: var(--mute); font-size: clamp(16px, 1.6vw, 19px); }
/* 바탕이 되는 한 문장 — 네 낱말 밑에 깔린다. 목록 끝 문장(.arrive)처럼 작게, 오른쪽 칸에 */
.minds-end {
  margin: clamp(28px, 5vh, 48px) 0 0 calc((100% - clamp(24px, 5vw, 80px)) / 3 + clamp(24px, 5vw, 80px));
  font-size: clamp(18px, 1.9vw, 22px); line-height: 1.6;
}

/* 마크 — 두 칸. 위 브랜드는 빛 없이(색을 바꾸지 않는다), 작업은 제 빛 하나가 뒤에서 번진다(작업 첫 화면과 같은 세기) */
/* 마크 — 위계를 크기로: Works 는 집(전폭), 작업 마크는 그 아래 한 줄(셋째 몫). 빈 칸은 작업 목록의 빈 줄과 같은 옅어짐 */
.marks { display: block; }
.mark-home .mark-stage { aspect-ratio: 21 / 8; }
.mark-home .mark-stage img { height: 62%; }
.marks-label {
  margin: clamp(48px, 8vh, 88px) 0 clamp(16px, 2.5vh, 24px); padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
}
.marks-kids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.marks-kids .mark-lockup { height: clamp(18px, 1.7vw, 22px); }
.mark-card.blank { --fade: calc(.7 - var(--i) * .2); }   /* 옅어짐은 opacity 가 아니라 색으로 — opacity 는 1px 선을 끊어 보이게 했다 */
.mark-card.blank .mark-stage { background: transparent; border-color: color-mix(in srgb, var(--line) calc(var(--fade) * 160%), transparent); }
.mark-card.blank .no {
  display: block; padding-top: clamp(18px, 3vh, 28px);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--mute); opacity: calc(var(--fade) + .3);
}
/* 빈 칸의 b — 윤곽선만. 모든 작업 마크는 이 b 에서 시작해 제 것으로 채워진다(Piano = 건반) */
.mark-card.blank .ghost {
  position: absolute; left: 50%; top: 50%; height: 56%; width: auto; translate: -50% -50%;
  fill: none; stroke: color-mix(in srgb, var(--mute) calc(var(--fade) * 100%), transparent);
}
/* vector-effect 는 물려받지 않는다 — svg 에 걸면 선이 viewBox 단위(1/1800)로 그려져 끊기거나 사라진다 */
.mark-card.blank .ghost path { stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* 이름 자리 — 작업 목록의 빈 줄과 같은 말·같은 흐림 */
.mark-card.blank .fogname {
  display: block; margin-top: 10px;
  font-family: var(--display); font-weight: 200; font-size: clamp(17px, 1.7vw, 22px);
  filter: blur(calc(4px + var(--i) * 2px)); user-select: none; opacity: var(--fade);
}
.mark-card { margin: 0; }
.mark-stage {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--glass);
}
.mark-stage img { position: absolute; left: 50%; top: 50%; height: 56%; width: auto; translate: -50% -50%; }
/* Piano 마크는 눈으로 가운데 — 앱 아이콘과 같은 규칙(높이의 28/744 오른쪽 = 폭의 4.96%) */
.mark-stage img.optical { translate: calc(-50% + 4.96%) -50%; }
/* 빛 위의 흰 마크 — 가장 밝은 빛이 경계 바로 뒤라 뿌옇게 읽혔다. 빛을 줄이는 대신 경계 바깥에 얇은 어둠(09-22 사용자) */
.mark-stage.lit img { filter: drop-shadow(0 0 6px rgb(0 0 0 / .55)); }
.mark-stage.lit::before {
  content: ""; position: absolute; z-index: -1; inset: -20%;
  /* 카드는 견본이라 빛이 그 마크의 것으로 붙어 있어야 한다 — 마크 뒤 가운데(옮겨 보니 얼룩처럼 따로 놀았다, 09-22 사용자) */
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--lc) 85%, transparent) 0%, color-mix(in srgb, var(--lc) 45%, transparent) 18%,
    color-mix(in srgb, var(--lc) 14%, transparent) 34%, transparent 52%);
  opacity: .58;
}
.mark-card figcaption { padding-top: clamp(18px, 3vh, 28px); }
.mark-card figcaption p { margin: 0 0 .6em; max-width: 34em; }
.mark-card .quiet { color: var(--mute); }
.mark-lockup { display: block; height: clamp(22px, 2.4vw, 30px); width: auto; margin-bottom: clamp(16px, 2.5vh, 24px); }

/* ── 발 ──────────────────────────────────────────── */
.foot { padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom)); }
.foot-row {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--mute);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ── 좁은 화면 ─────────────────────────────────────── */
@media (max-width: 760px) {
  .work > a, .work > div {
    grid-template-columns: 2.4em minmax(0, 1fr) auto;
    grid-template-areas: "no ttl ttl" ". kind st";
    row-gap: 10px;
  }
  .work .no { grid-area: no; } .work .ttl { grid-area: ttl; }
  .work .kind { grid-area: kind; } .work .st { grid-area: st; }
  .work .yr { display: none; }
  .mega { font-size: 21vw; }
  .mega span:last-child { padding-left: .5em; }
  .pane { inset: 12vh 5vw 30vh 5vw; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .cols > aside:empty { display: none; }   /* 한 칸으로 쌓이면 빈 곁 칸이 간격만 남긴다 */
  /* 휴대폰 — 마크가 위, 제목이 아래. 빛은 마크 뒤로 따라간다 */
  .work-hero { grid-template-columns: minmax(0, 1fr); align-content: end; }
  .wh-mark { order: -1; justify-self: center; height: min(28svh, 245px); margin: 0 0 clamp(28px, 7vh, 64px); translate: none; }
  .wh-light { width: 120vmin; right: 50%; top: 41%; }   /* 휴대폰 — 마크가 위, 빛은 그 뒤 */
  .wh-pane { inset: 12vh 5vw 30vh 5vw;
    -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
  .feat li { grid-template-columns: 2.4em minmax(0, 1fr); }
  .feat span { grid-column: 2; }
  .peek { display: none; }
  .minds li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .minds-end { margin-left: 0; }
  .mark-home .mark-stage { aspect-ratio: 4 / 3; }
  /* 휴대폰 — 작업 마크는 반 폭(전폭이면 Works 와 같은 층으로 읽힌다) · 빈 칸은 하나만(사용자) */
  .marks-kids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mark-card.blank:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}