www

 /* sqzass 테마 — marigold
  *
  * 이 사이트가 쓰는 테마이자 sqzass 로 만든 첫 테마다. 이름은 이 시트의 유일한
  * 색에서 따왔다. 두 번째 테마가 생기면 그것도 자기 색으로 불리면 된다.
  *
  * 차가운 니어블랙 위의 가운데 정렬 갤러리. 색은 평상시에 없고 손이 닿을 때만
  * 나온다 — 액센트가 브랜딩이 아니라 보상이다.
  *
  * hover 는 색만 바꾼다. 크기가 움직이면 시선이 그리로 끌려가는데, 이 사이트에서
  * 커서가 지나가는 자리는 대부분 읽는 중인 자리다.
  *
  * 목소리는 굵기로 만든다. 디스플레이는 230~350 의 초경량에 **양수** 트래킹이고,
  * 라벨은 작고 넓게 벌어진 대문자다. 큰 글자는 가늘고 작은 글자는 벌어진다.
  * 굵은 글씨는 이 사이트에 없다.
  *
  * 서체는 Noto Sans KR 가변 한 벌이다. 라틴과 한글을 unicode-range 로 갈라
  * 두어서 영문 페이지는 한글 파일을 받지 않는다. 서브셋은 tools/fonts.py 가
  * 만들고, 빠진 글자는 CI 가 빌드 전에 잡는다.
  *
  * 테마는 [data-theme] 이 정한다. 생성된 하이라이트 스타일시트가 같은 속성을
  * 보기 때문에, prefers-color-scheme 에 맡기면 둘이 어긋날 수 있다.
  */
 
 @font-face {
   font-family: "Display";
   src: url("/fonts/display-latin.woff2") format("woff2");
   font-weight: 100 900;
   font-display: swap;
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20A0-20BF,
                  U+2122, U+2190-21BB, U+2212, U+2500-257F, U+25A0-25FF, U+2605-2606;
 }
 @font-face {
   font-family: "Display";
   src: url("/fonts/display-kr.woff2") format("woff2");
   font-weight: 100 900;
   font-display: swap;
   unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7A3, U+FF01-FF60;
 }
 @font-face {
   font-family: "JetBrains Mono";
   src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
   font-weight: 400;
   font-display: swap;
 }
 @font-face {
   font-family: "JetBrains Mono";
   src: url("/fonts/jetbrains-mono-700.woff2") format("woff2");
   font-weight: 700;
   font-display: swap;
 }
 
 /* ---------- tokens ---------- */
 
 :root {
   color-scheme: dark;
 
   /* 바닥에 색이 있다. 이 집 사이트들은 전부 그렇다 — ommp 는 청보라(#0A051E,
      앱의 BG_DARK 를 그대로), blog 는 청록, sqzass 문서는 청흑, 랜딩은 웜브라운.
      순수 중립 회색은 아무 말도 하지 않는다. */
   --bg-recess: #030405;
   --bg:        #07090a;
   --bg-2:      #0e1112;
   --bg-3:      #151819;
 
   --ink:   #eaeeec;
   --ink-2: #9ba39f;
   --ink-3: #737b77;
   --ink-4: #363c39;
 
   --rule:   #16191a;
   --rule-2: #232728;
   --rule-3: #363b3c;
 
   /* 색이 아니라 삼원소. 토큰 하나로 alpha 0.03~0.75 를 전부 낸다 —
      hex 였다면 매번 color-mix 를 거쳐야 했을 값들이다. */
   --ink-rgb: 234, 238, 236;
 
   /* 이 테마의 이름이자 유일한 색. 평상시에는 어디에도 없고 링크·포커스 링·
      현재 항목·손이 닿은 것에만 나온다 — 주황이면 갈 수 있는 것이거나 지금
      있는 자리다.
      지어낸 값이 아니라 About 페이지 초상의 배경에서 그대로 뽑았다
      (tools/icons.py 옆에서 샘플링, hsl 36° 75%). ommp 가 모든 색을 앱 소스에서
      가져오는 것과 같은 규칙이고, 차가운 바닥과는 보색이라 손이 닿는 자리가
      확실히 뜬다. 니어블랙 대비 9.07:1. */
   --accent: #e4a242;
   /* 액센트 위에 얹히는 잉크. 액센트가 밝은 주황이라 두 테마 모두 어둡다 —
      ::selection 처럼 액센트가 배경이 되는 자리에서 --bg 를 쓰면 라이트에서
      흰 글자가 주황 위에 놓여 읽히지 않는다. */
   --on-accent: #14140f;
 
   /* 선화 마크는 순수 흑 아니면 순수 백이다. 중간 회색은 비활성으로 읽힌다. */
   --mark-ink: #ffffff;
 
   --sans: "Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
           "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
   --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 
   /* 굵기 사다리. 네 단이고 간격이 고르다 — 선택자마다 값을 적으면 사다리가
      아니라 우연의 모음이 된다. 굵은 글씨는 여전히 없다: 제일 무거운 단이 420 이다.
      트래킹은 둘뿐이다. 가는 글자를 크게 쓰면 자간이 필요하고, 두꺼워질수록
      그 필요가 줄어든다. */
   --w-display: 180;
   --w-section: 260;
   --w-item:    340;
   --w-label:   420;
   --track-air: 0.03em;
   --track-set: 0.014em;
 
   --radius: 2px;
   --masthead-h: 3.5rem;   /* sqzass 문서와 같은 높이. 내용이 아니라 크롬이라 얇아야 한다 */
   --gutter: clamp(1.25rem, 5vw, 3rem);
   --wide: 71rem;
   --read: 44rem;
 
   /* 한 박자. 값을 여기 한 번만 두면 모든 상호작용이 같은 속도로 반응하고,
      그게 "같은 물건"이라는 느낌을 만든다. hover 는 색만 바꾸므로 곡선도 하나면 된다. */
   --ease: cubic-bezier(0.16, 1, 0.3, 1);
   --tr-ink: 0.25s ease;
 }
 
 :root[data-theme="light"] {
   color-scheme: light;
 
   --bg-recess: #e9ecea;
   --bg:        #fafbfa;
   --bg-2:      #f2f4f3;
   --bg-3:      #eaeded;
 
   --ink:   #0e1211;
   --ink-2: #515856;
   --ink-3: #737a78;
   --ink-4: #bdc3c1;
 
   --rule:   #e4e8e6;
   --rule-2: #d5dad8;
   --rule-3: #bac0be;
 
   --ink-rgb: 14, 18, 17;
   /* 액센트는 두 테마가 같다. 밝은 바닥에서 대비가 낮아지지만, 이 색은
      평상시에 나오지 않고 hover·focus·현재 위치에만 쓰이며 그 자리에는 늘
      상태 변화가 함께 있다(밑줄, 테두리, 눈금). 색 하나로만 뜻을 전하는
      자리는 없다. */
   --accent: #e4a242;
   --mark-ink: #000000;
 }
 
 *, *::before, *::after { box-sizing: border-box; }
 
 /* 루트가 유동이라 모든 rem 이 이미 반응형이다. 무릎은 286px 과 1143px 이다. */
 html {
   font-size: clamp(16px, 15px + 0.35vw, 19px);
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
 }
 
 body {
   margin: 0;
   background: var(--bg);
   color: var(--ink);
   font-family: var(--sans);
   /* 루트가 이미 유동이라(clamp 16→19px) 본문까지 vw 에 매달면 두 번 조정된다.
      1100px 위에서는 어차피 최대값에 고정돼 있던 값이다. */
   font-size: 1.0625rem;
   line-height: 1.7;
   /* 한국어는 어절 안에서 줄바꿈하지 않는다. */
   word-break: keep-all;
   overflow-wrap: anywhere;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
 
 img { max-width: 100%; height: auto; }
 a { color: inherit; text-decoration: none; }
 
 :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
 ::selection { background: var(--accent); color: var(--on-accent); }
 
 * { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
 ::-webkit-scrollbar { width: 8px; height: 8px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 999px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
 
 
 .skip {
   position: absolute; left: -9999px; top: 0; z-index: 100;
   padding: 0.7rem 1.1rem; background: var(--bg-2);
   border: 1px solid var(--accent); border-radius: var(--radius);
 }
 .skip:focus { left: 0.5rem; top: 0.5rem; }
 
 /* ---------- layout ---------- */
 
 .wrap {
   width: 100%;
   max-width: var(--wide);
   margin-inline: auto;
   padding-inline: var(--gutter);
 }
 .wrap-read { max-width: var(--read); }
 /* 읽는 폭에 날짜 거터가 나가 앉을 자리를 더한 값. 숫자를 따로 고르지 않고
    --read 에서 유도하면 본문 폭을 바꿨을 때 원장이 따라온다.
    (ch 는 컨테이너에 쓰면 본문 글꼴 기준이라 절반밖에 안 나온다 — 한 번 틀렸다.) */
 .wrap-ledger { max-width: calc(var(--read) + 12rem); }
 
 main { display: block; padding-bottom: clamp(5rem, 12vw, 9rem); }
 
 /* ---------- masthead ---------- */
 
 .masthead {
   position: sticky; top: 0; z-index: 30;
   height: var(--masthead-h);
   background: color-mix(in srgb, var(--bg) 82%, transparent);
   backdrop-filter: blur(14px) saturate(1.5);
   border-bottom: 1px solid var(--rule);
 }
 
 /* 3열 격자. 양옆 열이 1fr 로 같으므로 가운데 열이 화면 축에 정확히 앉는다.
    flex 에 margin-inline:auto 를 쓰면 브랜드와 도구 덩이의 폭 차이만큼 내비가
    밀리는데, 페이지 전체가 가운데축인 사이트에서는 그 어긋남이 보인다. */
 .masthead-in {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center; gap: clamp(0.75rem, 3vw, 2rem);
   height: 100%; max-width: var(--wide); margin-inline: auto;
   padding-inline: var(--gutter);
 }
 
 .brand { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; }
 
 /* 마크는 잉크로 그린다. 원본이 흰 배경의 검은 선화라 <img> 로는 다크에서
    사라지는데, 마스크로 두면 배경색이 곧 선 색이 된다. 흑 아니면 백. */
 .brand-mark {
   width: 1.9em; aspect-ratio: 128 / 123; flex: none;
   background-color: var(--mark-ink);
   -webkit-mask: url("/images/mark.png") center / contain no-repeat;
   mask: url("/images/mark.png") center / contain no-repeat;
 }
 @supports not (mask-image: url("")) { .brand-mark { display: none; } }
 
 .brand-name {
   font-size: 0.82rem; font-weight: 500;
   letter-spacing: 0.22em; text-transform: uppercase;
   color: var(--ink);
 }
 
 .nav {
   display: flex; align-items: center; justify-content: center;
   gap: clamp(1rem, 2.5vw, 2rem);
   min-width: 0; overflow-x: auto; scrollbar-width: none;
 }
 .nav::-webkit-scrollbar { display: none; }
 
 /* 라벨은 작고 넓게 벌어진 대문자다. 상자도 배경도 없다. */
 .nav a {
   position: relative; flex: none; padding-block: 0.4rem;
   font-size: 0.72rem; font-weight: 400;
   letter-spacing: 0.18em; text-transform: uppercase;
   color: var(--ink-3);
   transition: color var(--tr-ink);
 }
 .nav a:hover { color: var(--ink); }
 .nav a[aria-current] { color: var(--ink); }
 /* 현재 위치는 1px 짧은 눈금. 밑줄은 링크의 표시이고 이건 상태의 표시다. */
 .nav a[aria-current]::after {
   content: ""; position: absolute; left: 50%; bottom: -0.15rem;
   width: 1.4rem; height: 1px; margin-left: -0.7rem;
   background: var(--accent);
 }
 
 .tools { display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; }
 
 /* 크롬 컨트롤에는 테두리가 없다. 상자를 두르면 편집물이 아니라 대시보드가 된다. */
 .chip {
   display: inline-flex; align-items: center; gap: 0.4rem;
   padding: 0; border: 0; background: none; cursor: pointer;
   font: inherit; font-size: 0.7rem; letter-spacing: 0.12em;
   text-transform: uppercase; color: var(--ink-3);
   /* 컨트롤 라벨은 낱말 하나이고, 낱말 하나는 줄바꿈하지 않는다. body 가
      overflow-wrap: anywhere 라 이걸 빼면 좁은 화면에서 "Search" 가 쪼개져
      마스트헤드 높이를 밀어 올린다. */
   white-space: nowrap;
   transition: color var(--tr-ink);
 }
 .chip:hover { color: var(--ink); }
 
 /* 키를 말하는 컨트롤 하나만 진짜 키캡이 된다 — 터미널에서 모는 도구라 얇은
    테두리에 작은 반경. 네 칩에 전부 테두리를 두르면 테두리 없는 타일·원장·
    액자와 싸워서 마스트헤드가 툴바가 된다. */
 .chip kbd {
   font-family: var(--mono); font-size: 0.66rem; line-height: 1; letter-spacing: 0;
   padding: 0.18rem 0.36rem;
   border: 1px solid var(--rule-2); border-radius: 3px;
   color: var(--ink-4);
   transition: border-color var(--tr-ink), color var(--tr-ink);
 }
 .chip:hover kbd { border-color: var(--rule-3); color: var(--ink-3); }
 /* 라벨이 `Ctrl /` 에서 `⌘ /` 로 바뀌어도 폭이 안 변한다 — 누르려던 것이
    도망가면 안 된다. */
 .chip-search { min-width: 4.2rem; justify-content: flex-end; }
 
 .i-moon { display: none; }
 :root[data-theme="light"] .i-sun { display: none; }
 :root[data-theme="light"] .i-moon { display: inline; }
 
 .chip-word { display: none; }
 
 @media (max-width: 46rem) {
   .brand-name { display: none; }
   /* 키캡은 키보드가 있을 때의 안내다. 없는 화면에서는 낱말이 대신 선다. */
   .chip kbd { display: none; }
   .chip-word { display: inline; }
   .chip-search { min-width: 0; }
   /* 가운데 축을 포기한다. 양옆을 1fr 로 묶어 두면 넓은 쪽(도구 열)의 폭이
      좁은 쪽에도 강제되고, 그 낭비만큼 내비가 잘려 나간다. 축보다 다 보이는
      게 낫다 — 축은 읽는 자리를 정하지만 잘린 라벨은 길을 지운다. */
   .masthead-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem; }
   .nav { gap: 1rem; }
 }
 
 /* 손안의 화면에서는 마스트헤드에 들어갈 자리가 모자란다. 나가는 것은 GitHub 다 —
    콜로폰에 같은 링크가 있고, 여기 남는 넷(갈래 셋과 검색)은 이 사이트 안을
    도는 데 필요한 전부다. 잘린 라벨을 남기느니 중복을 하나 뺀다. */
 @media (max-width: 34rem) {
   .chip-github { display: none; }
   .masthead-in { gap: 0.75rem; }
   /* 여기서부터 내비는 밀어서 본다. 가운데 정렬로 두면 넘칠 때 왼쪽으로 흘러나간
      부분에 손이 닿지 않는다 — 스크롤은 오른쪽으로만 되기 때문이다. */
   .nav { gap: 0.85rem; justify-content: flex-start; }
 }
 
 /* ---------- page head: 가운데 축 ---------- */
 
 .page-head {
   padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2rem, 4vw, 3.5rem);
   text-align: center;
 }
 
 /* 프런트매터 펜스. 제목 블록이 끝나고 본문이 시작하는 자리에 한 페이지 한 번.
    소스 파일에서 `+++` 가 표시하는 것과 같은 경계이고, 이 사이트의 모든 페이지가
    실제로 `+++` 로 시작하는 sqzass 문서다. 장식처럼 보이는 유일한 것이며
    장식이 아니다. (sqzass 문서 시트가 같은 장치를 같은 이유로 쓴다.) */
 .fence {
   font-family: var(--mono);
   font-size: 1.0625rem;
   letter-spacing: 0.1em;
   color: var(--ink-4);
   text-align: center;
   margin: 0 0 clamp(2rem, 4vw, 2.75rem);
   user-select: none;
 }
 
 .page-title {
   margin: 0;
   font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
   font-weight: var(--w-display);
   letter-spacing: var(--track-air);
   line-height: 1.14;
   text-wrap: balance;
 }
 
 .page-lede {
   margin: clamp(0.9rem, 2vw, 1.4rem) auto 0;
   max-width: 52ch;
   color: var(--ink-2);
   text-wrap: pretty;
 }
 
 /* 표제 아래 한 줄. 날짜와 언어가 여기 함께 선다 — 둘 다 이 문서에 대한 사실이고,
    따로 세우면 제목과 본문 사이에 줄만 하나 더 생긴다. 비어 있으면 gap 도 여백도
    없다(빈 flex 컨테이너라 높이가 0 이다). */
 .page-meta {
   display: flex; flex-wrap: wrap; align-items: baseline;
   justify-content: center; gap: 1.1rem;
   margin: 1.2rem 0 0;
   font-family: var(--mono); font-size: 0.74rem;
   letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
   color: var(--ink-3);
 }
 .page-meta:empty { margin: 0; }
 
 /* ---------- language switch ---------- */
 
 /* 두 글자 코드 둘. 사이에 구분자를 두지 않는다 — 간격이 이미 나누고 있고,
    가운뎃점이나 슬래시를 넣으면 두 낱말이 한 낱말처럼 붙어 보인다.
 
    현재 언어가 제일 밝다. 크롬의 현재 항목이 밝아지는 것과 같은 규칙이고,
    반대로 두면 "지금 어디에 있는지"를 알려고 두 회색을 견줘야 한다.
    갈 수 있는 쪽에는 밑줄 자리가 비어 있다가 손이 닿으면 액센트로 채워진다 —
    색만으로 뜻을 전하지 않는다는 이 사이트의 규칙 그대로다. */
 /* 자기 크기를 스스로 갖는다. .page-meta 안에도 서고 프로젝트 히어로의 배지 줄
    아래에도 서는데, 부모마다 크기가 달라지면 같은 컨트롤이 페이지마다 다른
    물건으로 보인다. */
 .langs {
   display: inline-flex; gap: 0.55rem;
   font-family: var(--mono); font-size: 0.7rem;
   letter-spacing: 0.16em; text-transform: uppercase;
 }
 /* 히어로에서는 배지 줄 바로 아래 붙는다 — 둘 다 이 프로젝트에 대한 사실이다. */
 .hero-main > .langs { margin-top: 0.85rem; }
 .lang-cur { color: var(--ink); }
 /* 갈 수 있는 쪽은 이 사이트의 링크 단이다(--ink-3). --ink-4 는 날짜와 펜스의
    단이라 "있지만 누를 것은 아닌" 자리이고, 라이트 테마에서는 1.7:1 로 사실상
    안 보인다. 지금 판(--ink)과의 차이는 이 단에서도 충분히 크다. */
 .langs a {
   color: var(--ink-3);
   border-bottom: 1px solid transparent;
   transition: color var(--tr-ink), border-color var(--tr-ink);
 }
 .langs a:hover { color: var(--ink-2); border-bottom-color: var(--accent); }
 
 .eyebrow {
   margin: 0 0 0.9rem;
   font-size: 0.7rem; font-weight: 400;
   letter-spacing: 0.22em; text-transform: uppercase;
   color: var(--ink-3);
 }
 
 .crumbs { margin-bottom: 0.9rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
 .crumbs a { color: var(--ink-3); transition: color var(--tr-ink); }
 .crumbs a:hover { color: var(--accent); }
 
 /* ---------- wing title: 섹션 머리 ---------- */
 
 /* 가운데 제목 양옆으로 짧은 헤어라인. 페이지를 연으로 끊는 장치이고,
    위 여백이 넉넉해야 연이 연으로 읽힌다. */
 /* 갈래 머리. 옆줄은 없다 — 한 가지 일에 한 가지 장치이고, 위아래 여백이
    이미 연을 끊고 있다. 좁아지면 줄이는 게 아니라 뺀다. */
 /* 갈래 머리는 한 줄이다: 이름, 그 갈래로 가는 문까지 이어지는 헤어라인, 그리고
    문. 헤어라인은 장식이 아니라 둘을 한 줄의 양끝으로 묶는 것이고, 그래서 이름과
    문 사이에 무엇이 오든 둘은 같은 줄에 있다.
    아래 내용이 전부 왼쪽 정렬(카드의 라벨, 원장의 날짜 거터)이라 머리도 왼쪽에서
    시작한다. 가운데축은 히어로와 글 한 편의 것이고, 갈래의 머리는 목록의 것이다. */
 .room-head {
   display: flex; align-items: center;
   gap: clamp(0.9rem, 2vw, 1.5rem);
   margin: clamp(4.5rem, 11vw, 7rem) 0 clamp(1.5rem, 3.5vw, 2.25rem);
 }
 .room-head h2 {
   margin: 0; flex: none;
   font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.3rem);
   font-weight: var(--w-section); letter-spacing: var(--track-air); line-height: 1.2;
 }
 /* 남는 자리를 전부 먹는다. 문이 없는 갈래(프로젝트 묶음)에서는 끝까지 간다. */
 .room-rule { flex: 1 1 auto; min-width: 1rem; height: 1px; background: var(--rule); }
 .room-head-sub {
   margin: -0.75rem 0 clamp(1.75rem, 4vw, 2.5rem);
   max-width: 54ch;
   font-size: 0.92rem; color: var(--ink-3);
 }
 
 
 /* ---------- home hero ---------- */
 
 /* 첫 화면 전체를 쓴다. 스크롤 전에 사이트의 장르를 정하는 자리다. */
 .hero-home {
   min-height: calc(100svh - var(--masthead-h));
   display: grid; place-items: center; text-align: center;
   padding-block: clamp(2rem, 6vw, 4rem);
 }
 .hero-home > .wrap { display: grid; justify-items: center; }
 
 .hero-mark {
   width: clamp(3.4rem, 8vw, 5rem); aspect-ratio: 128 / 123;
   background-color: var(--mark-ink);
   -webkit-mask: url("/images/mark.png") center / contain no-repeat;
   mask: url("/images/mark.png") center / contain no-repeat;
   margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
 }
 
 .statement {
   margin: 0; max-width: 20ch;
   font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem);
   font-weight: var(--w-display); letter-spacing: var(--track-air); line-height: 1.1;
   text-wrap: balance;
 }
 
 .statement-sub {
   margin: clamp(1.2rem, 3vw, 1.8rem) auto 0;
   max-width: 44ch; color: var(--ink-2); text-wrap: pretty;
 }
 
 /* 문. 채운 알약이 아니라 밑줄 그은 라벨이다. */
 .door {
   display: inline-block; margin-top: clamp(1.8rem, 4vw, 2.75rem);
   padding-bottom: 0.35rem;
   font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
   color: var(--ink-2);
   border-bottom: 1px solid var(--rule-3);
   transition: color var(--tr-ink), border-color var(--tr-ink);
 }
 .door:hover { color: var(--ink); border-color: var(--accent); }
 
 /* 페이지가 열릴 때 한 번. 스크롤에 반응해 숨었다 나타나지 않는다 —
    읽던 자리로 돌아왔을 때 사라지는 것은 고장으로 보인다. */
 @keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
 .js .hero-home [data-rise] { animation: rise 0.9s var(--ease) both; }
 .js .hero-home [data-rise="1"] { animation-delay: 0.12s; }
 .js .hero-home [data-rise="2"] { animation-delay: 0.28s; }
 .js .hero-home [data-rise="3"] { animation-delay: 0.42s; }
 
 /* ---------- home rooms ---------- */
 
 /* 홈의 갈래는 .wrap 보다 좁다. 1440 에서 1102px — 참조 카드(1123)와 같은 자리다.
    머리도 카드도 타일도 이 폭을 쓰므로 셋의 왼쪽 끝과 오른쪽 끝이 같다. */
 .room { max-width: calc(58rem + 2 * var(--gutter)); padding-block: 0; }
 
 /* 갈래의 위 여백은 그 갈래의 첫 물건이 진다. 전에는 언제나 머리가 졌는데,
    글 갈래에서는 머리가 카드 뒤로 갔다. */
 .room > .feature:first-child { margin-top: clamp(4.5rem, 11vw, 7rem); }
 /* 카드 뒤에 오는 머리는 갈래를 여는 것이 아니라 그 아래 목록을 여는 것이라
    덜 띄운다. 갈래 사이의 거리와 갈래 안의 거리는 달라야 한다. */
 .feature + .room-head { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
 
 /* 문은 머리의 오른쪽 끝에 선다. 밑줄은 이 사이트의 문(.door)과 같은 물건이다. */
 .room-door {
   flex: none;
   padding-bottom: 0.25rem;
   font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
   color: var(--ink-3);
   border-bottom: 1px solid var(--rule-2);
   transition: color var(--tr-ink), border-color var(--tr-ink);
 }
 .room-door:hover { color: var(--ink); border-bottom-color: var(--accent); }
 
 /* ---------- featured frames ---------- */
 
 /* 액자는 테두리가 없다. 그림에만 테두리가 있고 캡션은 그 아래 떠 있다.
    flex 라 셋이든 넷이든 마지막 줄에 하나만 남지 않는다. */
 .frames {
   display: flex; flex-wrap: wrap; justify-content: center;
   gap: clamp(1.5rem, 3vw, 2.25rem);
 }
 
 .frame {
   flex: 1 1 220px; max-width: 400px;
   display: flex; flex-direction: column; align-items: center; text-align: center;
   background: transparent; border: 0;
 }
 
 .frame-media {
   width: 100%; aspect-ratio: 16 / 10;
   border: 1px solid var(--rule-2); border-radius: var(--radius);
   overflow: hidden; display: grid; place-items: center;
   background: var(--bg-2);
   transition: border-color var(--tr-ink);
 }
 .frame:hover .frame-media { border-color: var(--rule-3); }
 
 /* 그림은 제 색으로 쉰다. 탈색해 두었다가 손이 닿으면 돌려주는 건 다른 집의
    장치였다 — 여기서는 ommp 가 4K 컬러 스크린샷을 그대로 싣는 쪽이 기준이다. */
 .frame-media img { width: 100%; height: 100%; object-fit: cover; }
 
 .frame-mark {
   width: 42%; aspect-ratio: 1;
   background-color: var(--mark-ink);
   -webkit-mask: var(--mark-src) center / contain no-repeat;
   mask: var(--mark-src) center / contain no-repeat;
   opacity: 0.72; transition: opacity var(--tr-ink);
 }
 .frame:hover .frame-mark { opacity: 1; }
 
 .frame-title {
   display: flex; align-items: center; justify-content: center; gap: 0.5rem;
   margin: clamp(0.9rem, 2vw, 1.25rem) 0 0;
   font-size: 1.25rem; font-weight: var(--w-item); letter-spacing: var(--track-set);
 }
 .frame-title a { transition: color var(--tr-ink); }
 .frame:hover .frame-title a { color: var(--accent); }
 
 /* 이름 옆 작은 마크. 크기를 em 으로 잡아 제목이 커지면 같이 커진다. */
 .chip-mark {
   width: 1.55em; height: 1.55em; flex: none;
   display: grid; place-items: center;
   border: 1px solid var(--rule-2); border-radius: var(--radius);
   background: var(--bg-2);
 }
 .chip-mark::before {
   content: ""; width: 74%; height: 74%;
   background-color: var(--mark-ink);
   -webkit-mask: var(--mark-src) center / contain no-repeat;
   mask: var(--mark-src) center / contain no-repeat;
 }
 .chip-mark img { width: 74%; height: 74%; object-fit: contain; }
 
 .frame-blurb {
   margin: 0.6rem 0 0; max-width: 40ch;
   font-size: 0.9rem; color: var(--ink-3); text-wrap: pretty;
 }
 
 .frame-meta {
   display: flex; align-items: center; justify-content: center;
   gap: 0.9rem; margin-top: 0.9rem;
 }
 
 /* ---------- no image ---------- */
 
 /* 그림이 아직 없는 자리. 회색 상자로 때우지 않고 비었다고 말한다 —
    나중에 무엇을 채워야 하는지가 화면에 보여야 한다. */
 .noimg {
   width: 100%; height: 100%;
   display: grid; place-items: center;
   background:
     repeating-linear-gradient(45deg,
       transparent, transparent 7px,
       rgba(var(--ink-rgb), 0.022) 7px, rgba(var(--ink-rgb), 0.022) 14px);
 }
 .noimg::after {
   content: "no image";
   font-family: var(--mono); font-size: 0.62rem;
   letter-spacing: 0.2em; text-transform: uppercase;
   color: var(--ink-4);
   border: 1px solid var(--rule-2); border-radius: var(--radius);
   padding: 0.3rem 0.6rem;
 }
 
 /* ---------- project tiles ---------- */
 
 /* 카드다. 테두리와 바닥을 갖고, 글은 왼쪽에서 시작한다.
    테두리가 없던 때는 이 여섯 개가 페이지에서 유일하게 액자 없는 물건이라,
    위의 카드 하나만 상자로 떠 있고 아래는 글자만 떠다녔다. 갈래 머리가 왼쪽에서
    시작하는데 그 아래 내용이 가운데 정렬인 것도 같은 어긋남이었다. */
 /* 트랙에 상한을 두고 justify-content 로 가운데 모은다. `1fr` 로 두면 항목이
    두 개일 때 3열 격자의 왼쪽 두 칸에 붙어 페이지 축이 어긋난다 — 갈래마다
    개수가 다른 목록에서는 이게 항상 일어난다. */
 .tiles {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 21rem));
   justify-content: center;
   gap: clamp(0.5rem, 1.5vw, 1rem);
 }
 
 .tile {
   position: relative; isolation: isolate;
   display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
   gap: 0.5rem; text-align: left;
   padding: clamp(1.25rem, 3vw, 1.75rem);
   border: 1px solid var(--rule); border-radius: var(--radius);
   background: var(--bg-2);
   transition: border-color var(--tr-ink);
 }
 /* 손이 닿으면 테두리가 한 단 오른다 — 맨 위 카드와 같은 응답이다. */
 .tile:hover { border-color: var(--rule-2); }
 /* 누르면 눌린다. 빛이 번지는 대신 물건이 압축된다 — 이 집의 이름들이 전부
    모음을 눌러 뺀 것이고(sqzer, sqzass, ommp), 랜딩이 이미 같은 값을 쓴다.
    0.988 은 눈이 알아채되 글자가 흐려지지는 않는 지점이다. */
 
 .tile-title {
   display: flex; align-items: center; gap: 0.45rem;
   margin: 0; font-size: 1.05rem; font-weight: var(--w-item); letter-spacing: var(--track-set);
   color: var(--ink-2); transition: color var(--tr-ink);
 }
 .tile:hover .tile-title { color: var(--ink); }
 .tile-title .chip-mark { width: 1.4em; height: 1.4em; }
 
 .tile-blurb {
   margin: 0;
   font-size: 0.85rem; line-height: 1.6; color: var(--ink-3); text-wrap: pretty;
 }
 
 /* 사실 줄은 카드 아래쪽에 붙는다. margin-top:auto 가 그 위 여백을 전부 먹어서,
    설명 길이가 달라도 여섯 장의 사실 줄이 같은 높이에 선다. */
 .tile-meta {
   display: flex; align-items: center; gap: 0.7rem;
   margin-top: auto; padding-top: 0.35rem;
   font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
   color: var(--ink-4); font-variant-numeric: tabular-nums;
   transition: color var(--tr-ink);
 }
 .tile:hover .tile-meta { color: var(--ink-3); }
 
 .tile-links { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.1rem; }
 .tile-links a, .frame-meta a {
   position: relative; z-index: 2;
   display: inline-flex; color: var(--ink-4);
   transition: color var(--tr-ink);
 }
 .tile-links a:hover, .frame-meta a:hover { color: var(--accent); }
 
 /* 아이콘만 있는 링크에는 이름이 안 보인다. title 속성은 브라우저가 1초쯤 뒤에
    자기 모양으로 띄우는데, 그 지연과 모양이 사이트와 무관하다. 같은 값을
    data-tooltip 으로도 주고 우리가 그린다. aria-label 이 접근성을 이미 책임지므로
    이건 순수하게 눈에 보이는 쪽이고, 그래서 aria-hidden 이다. */
 [data-tooltip] { position: relative; }
 [data-tooltip]::after {
   content: attr(data-tooltip);
   position: absolute; bottom: calc(100% + 0.5rem); left: 50%;
   transform: translateX(-50%);
   padding: 0.28rem 0.5rem; white-space: nowrap; pointer-events: none;
   background: var(--bg-3); color: var(--ink-2);
   border: 1px solid var(--rule-2); border-radius: var(--radius);
   font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
   opacity: 0; transition: opacity var(--tr-ink);
 }
 [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; }
 html[lang="ko"] [data-tooltip]::after { letter-spacing: 0; text-transform: none; }
 
 /* 타일 전체가 상세 페이지로 가는 링크. 아이콘만 위로 올린다. */
 .tile-link::after { content: ""; position: absolute; inset: 0; }
 
 /* 언어 배지 — 작고 넓게 벌어진 대문자. */
 .lang {
   font-family: var(--mono); font-size: 0.62rem;
   letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3);
 }
 .stars { font-variant-numeric: tabular-nums; }
 
 /* ---------- project mosaic ---------- */
 
 /* 첫 장이 크고 나머지 셋이 옆에 쌓인다. 대칭 격자는 여섯 개가 다 같은 무게라고
    말하는데, 갈래에는 앞에 세울 것이 있다.
 
    그림이 있는 프로젝트는 둘뿐이다. 없는 것은 자기 색으로 선다 — 프로젝트마다
    이미 색이 하나씩 정해져 있고(상세 페이지의 --accent 와 같은 값), 그 색이
    "그림 없음" 판보다 그 프로젝트에 대해 더 많이 말한다. 그림이 생기면 카탈로그의
    cover 한 줄로 들어온다. */
 .mosaic {
   display: grid;
   grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
   grid-template-rows: repeat(3, minmax(0, 1fr));
   gap: clamp(0.5rem, 1.5vw, 1rem);
 }
 /* 첫 장이 왼쪽 열을 통째로 쓴다. :first-child 라 개수가 넷이 아니어도 안 깨진다. */
 .mosaic > :first-child { grid-row: 1 / -1; }
 
 .mtile {
   position: relative; display: flex; align-items: flex-end;
   overflow: hidden;
   border: 1px solid var(--rule); border-radius: var(--radius);
   background: var(--bg-2);
   transition: border-color var(--tr-ink);
 }
 .mtile:hover { border-color: var(--rule-2); }
 /* 작은 장의 키를 여기서 정한다. 큰 장은 셋의 합만큼 자라므로 자기 비율이 없다. */
 .mosaic > :not(:first-child) { aspect-ratio: 2.1 / 1; }
 
 /* 바탕. 그림이 있으면 그림이, 없으면 그 프로젝트의 색이 깔린다.
 
    평상시에는 색이 빠져 있고 손이 닿으면 돌아온다. 이 시트의 첫 줄에 적힌
    전제가 그것이다 — "색은 평상시에 없고 손이 닿을 때만 나온다". 그림에까지
    그 규칙을 적용한 것이고, 크기나 자리는 그대로이므로 hover 가 색만 바꾼다는
    규칙도 지켜진다. 박자는 이 시트의 유일한 박자다.
    (한때 이 탈색을 걷어냈던 적이 있다. 그때는 참조에서 그대로 가져온 값이라
    뺐고, 지금은 이 사이트의 전제를 그림까지 밀고 간 것이라 뜻이 다르다.) */
 .mtile-art {
   position: absolute; inset: 0;
   display: grid; place-items: center;
   background: color-mix(in srgb, var(--tint) 30%, var(--bg-2));
   filter: grayscale(1);
   transition: filter var(--tr-ink);
 }
 .mtile:hover .mtile-art, .mtile:focus-visible .mtile-art { filter: grayscale(0); }
 .mtile-art img { width: 100%; height: 100%; object-fit: cover; }
 /* 마크는 잉크가 아니라 그 프로젝트의 색을 진하게 쓴 것이다 — 바탕과 같은 색의
    두 단이라 한 물건으로 읽힌다. */
 .mtile-mark {
   width: 42%; aspect-ratio: 1;
   background-color: color-mix(in srgb, var(--tint) 62%, var(--ink));
   -webkit-mask: var(--mark-src) center / contain no-repeat;
   mask: var(--mark-src) center / contain no-repeat;
 }
 
 /* 글은 바닥에 앉고, 그 아래에서 바탕색이 올라와 그림을 덮는다. 밝은 테마에서는
    밝은 장막이고 어두운 테마에서는 어두운 장막이라, 글은 두 테마 모두에서 --ink
    한 색으로 읽힌다. 참조 사이트는 다크 전용이라 흰 글자 한 벌로 끝난다. */
 .mtile-body {
   position: relative; z-index: 1; width: 100%;
   display: flex; flex-direction: column; gap: 0.3rem;
   padding: clamp(1rem, 2.4vw, 1.6rem);
   /* 글이 앉는 띠는 바탕색으로 꽉 차 있고 그 위에서 풀린다. 그라데이션이 글자
      높이 안에서 투명해지면 밝은 그림 위의 밝은 글자가 되는데, ommp 의 표지가
      정확히 그랬다. 두 테마 모두 --bg 로 가므로 글은 --ink 한 색이면 된다. */
   background: linear-gradient(to top,
     var(--bg) 0%,
     var(--bg) 42%,
     color-mix(in srgb, var(--bg) 72%, transparent) 72%,
     transparent 100%);
 }
 .mtile-title {
   font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
   font-weight: var(--w-item); letter-spacing: var(--track-set);
   color: var(--ink);
 }
 .mtile-blurb {
   max-width: 44ch; font-size: 0.8rem; line-height: 1.5;
   color: var(--ink-2); text-wrap: pretty;
 }
 .mtile-stars {
   margin-top: 0.15rem;
   font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
   font-variant-numeric: tabular-nums; color: var(--ink-3);
 }
 /* 큰 장은 글도 한 단 크다 — 크기가 순서를 말한다. */
 .mosaic > :first-child .mtile-title { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); }
 
 /* 여기서부터 작은 장의 키는 글이 정한다. 비율을 고정해 두면 폭이 줄면서 상자가
    글보다 먼저 작아져 잘린다 — 카드에서 겪은 것과 같은 어긋남이다. 그림은 어차피
    잘리는 물건이므로 여기서는 글이 이기게 둔다. 큰 장은 셋의 합만큼 자란다. */
 @media (max-width: 72rem) {
   .mosaic > :not(:first-child) { aspect-ratio: auto; }
 }
 
 /* 좁아지면 한 열로 쌓고 전부 같은 비율이 된다. 두 열로 두면 작은 장이 글을
    담기에 좁아진다. */
 @media (max-width: 46rem) {
   .mosaic { grid-template-columns: 1fr; grid-template-rows: none; }
   .mosaic > :first-child { grid-row: auto; }
   .mosaic > * { aspect-ratio: 2 / 1; }
 }
 
 /* ---------- ledger ---------- */
 
 .ledger { list-style: none; margin: 0; padding: 0; }
 
 .ledger-year {
   margin-top: clamp(2.5rem, 6vw, 4rem);
   text-align: center;
   font-family: var(--mono); font-size: 0.68rem;
   letter-spacing: 0.22em; color: var(--ink-4);
 }
 .ledger-year:first-child { margin-top: 0; }
 
 /* 행 사이에 선이 없다. 간격이 나눈다.
 
    손이 닿아도 바닥이 안 바뀐다. 회색 판이 깔리면 그 행만 다른 재질이 된 것처럼
    보이고, 목록을 훑는 동안 판이 행에서 행으로 따라다닌다 — 읽는 자리에서
    움직이는 것이 하나 생기는 셈이다. 이 사이트의 hover 는 색만 바꾼다는 규칙에
    맞춰, 여기서도 바뀌는 것은 날짜와 제목의 잉크뿐이다.
 
    가로 패딩과 같은 크기의 음수 마진이 남아 있는 것은 판을 깔기 위해서가 아니라
    누를 수 있는 자리를 글자 폭보다 넓게 두기 위해서다. 글은 제자리에 선다.
    키보드 포커스는 전역 :focus-visible 링이 진다. */
 .ledger-link {
   display: grid;
   grid-template-columns: clamp(5rem, 11vw, 8rem) minmax(0, 1fr);
   align-items: baseline; gap: clamp(1rem, 2.5vw, 2rem);
   padding: 1.1rem 1rem; margin-inline: -1rem;
 }
 
 .ledger-date {
   font-family: var(--mono); font-size: 0.72rem;
   letter-spacing: 0.12em; text-transform: uppercase;
   font-variant-numeric: tabular-nums;
   color: var(--ink-4); transition: color var(--tr-ink);
 }
 .ledger-link:hover .ledger-date { color: var(--accent); }
 
 .ledger-body { display: block; min-width: 0; }
 .ledger-title {
   display: block;
   font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
   font-weight: var(--w-item); letter-spacing: var(--track-set); line-height: 1.25;
   color: var(--ink-2); transition: color var(--tr-ink); text-wrap: balance;
   /* 홈의 글 갈래가 넓은 방으로 옮겨 가면서 이 열이 1080px 까지 열렸다. 제목은
      한 줄로 읽는 물건이라 폭에 상한이 필요하다 — 설명(58ch)에는 이미 있었다. */
   max-width: 42ch;
 }
 .ledger-link:hover .ledger-title { color: var(--ink); }
 .ledger-desc {
   display: block; margin-top: 0.3rem; max-width: 58ch;
   font-size: 0.88rem; color: var(--ink-3);
 }
 
 @media (max-width: 40rem) {
   .ledger-link { grid-template-columns: 1fr; gap: 0.5rem; padding-inline: 0; margin-inline: 0; }
 }
 
 /* 홈의 맨 위 글. 그림과 이름표가 테두리 하나 안에 같이 있다 — 미술관 라벨과
    작품의 관계다. 전에는 그림을 가운데 세우고 글을 그 아래 따로 세웠는데, 폭도
    정렬도 달라서 두 물건으로 읽혔다.
 
    /projects/ 의 액자는 테두리를 그림에만 두르고 캡션을 아래에 띄운다. 그건 여러
    점이 나란히 걸릴 때의 문법이고, 여기는 한 점뿐이라 라벨이 붙어 있어야 한 작품이
    된다.
 
    호버는 색만 바꾼다: 테두리가 한 단, 날짜가 액센트로, 제목이 잉크로. 원장의
    행과 같은 응답이다. */
 .feature {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
   /* 카드의 크기는 글이 정하지 않는다. 어느 글이 맨 위에 오든 같은 상자다.
      8/3 은 지어낸 값이 아니라 두 열에서 따라 나온다: 그림이 카드 폭의 0.6 을
      차지하고 그 그림이 16:10 이므로 카드 높이 = 0.6W ÷ 1.6 = W ÷ 2.667 이다.
      여기 비율을 걸어 두면 이름표가 행을 늘리지 못하고, 그림은 자기 칸을 채우기만
      하면 되므로 aspect-ratio 를 따로 갖지 않는다. */
   aspect-ratio: 8 / 3;
   /* 이 카드 안의 크기는 창이 아니라 **카드**를 따른다. 아래 cqw 가 그 단위다.
      창에 매달았더니 카드는 좁아지는데 글자는 그만큼 안 줄어서, 920px 근처에서
      제목의 디센더와 설명 둘째 줄이 상자 밖으로 밀려 잘렸다. 상자와 글자가 같은
      수에 매여 있으면 그 어긋남이 생길 자리가 없다. */
   container-type: inline-size;
   border: 1px solid var(--rule);
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--bg-2);
   text-align: left;
   transition: border-color var(--tr-ink);
 }
 .feature:hover { border-color: var(--rule-2); }
 /* 미리보기가 없는 글은 한 칸이다. 빈 칸을 남기면 그 글만 뭔가 빠진 것처럼 보인다. */
 .feature:not(:has(.feature-media)) { grid-template-columns: 1fr; }
 
 /* 그림은 자기 칸을 채운다. 높이는 이름표가 정하고 그림이 거기에 맞춰 잘린다 —
    16:9 를 고정하면 제목이 길어질 때 두 칸의 키가 어긋난다.
    손이 닿으면 안에서 돌아간다. 상자는 자리도 크기도 안 바꾸므로, 호버에
    레이아웃이 움직이지 않는다는 규칙은 그대로다.
    poster 는 영상의 첫 프레임이다. 시작할 때도 되감을 때도 같은 그림이라 이음매가
    없다. */
 .feature-media {
   display: block; margin: 0;
   /* 높이 바닥을 따로 두지 않는다. width/height 속성이 16:9 를 알려 주므로 그
      비율이 그대로 행 높이의 바닥이 되고, 라벨이 더 길면 라벨이 이긴다. 예전의
      clamp 는 어느 폭에서도 이 값을 넘지 못해서 아무 일도 하지 않았다. */
   width: 100%; height: 100%;
   /* 16:10 은 이 사이트의 그림 비율이다 — /projects/ 의 .frame-media 가 같은 값을
      쓴다. 이 카드만 <video> 의 width/height 속성이 주는 16:9 를 그대로 행 높이로
      써서, 카드가 3.09:1 로 납작했다(참조는 2.66:1). CSS 비율이 내재 비율을
      덮으므로 행은 이제 max(이름표의 자연 높이, 그림 폭 ÷ 1.6) 이고, 제목이
      길어지면 이름표가 이긴다.
      좌우가 잘리는데 이 포스터는 만다라도 인물도 가운데 있어서 잘려 나가는 것은
      배경이다. 반대로 납작하게 두면 세로가 잘리고, 그때 잘리는 것은 머리다. */
   aspect-ratio: 16 / 10;
   object-fit: cover;
   border-right: 1px solid var(--rule);
   background: var(--bg-3);
 }
 
 .feature-label {
   display: flex; flex-direction: column; justify-content: center;
   gap: clamp(0.7rem, 1.9cqw, 1.2rem); min-width: 0;
   /* 상자가 고정이므로 넘칠 수 있는 쪽은 글이다. 마지막 방어선. */
   overflow: hidden;
   padding: clamp(1.1rem, 3.8cqw, 2.4rem);
 }
 .feature-date {
   font-family: var(--mono); font-size: 0.7rem;
   letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
   color: var(--ink-4); transition: color var(--tr-ink);
 }
 .feature:hover .feature-date { color: var(--accent); }
 .feature-title {
   margin: 0;
   /* 카드 폭의 3.7% — 1102px 카드에서 40.8px 이고, 이름표의 측정폭 353px 중
      제목이 약 306px 을 쓴다. 제목이 자기 열을 거의 채우는 것이 이 카드가
      헤드라인처럼 읽히는 이유다(참조는 353 중 353).
      cqw 라 카드가 좁아지면 글자도 같은 비율로 좁아진다. rem 하한은 아주 좁은
      카드에서 읽히는 크기의 바닥이다. */
   font-size: clamp(1.25rem, 3.7cqw, 2.3rem);
   font-weight: var(--w-section); letter-spacing: var(--track-air); line-height: 1.2;
   color: var(--ink-2); transition: color var(--tr-ink);
   /* 세 줄까지. 1440 에서 이름표 안쪽이 372px 이고 날짜·설명·문·간격이 125px 을
      쓰므로 제목에 247px 이 남는다 — 세 줄이 178px 이라 어떤 제목이 와도 들어온다.
 
      -webkit-line-clamp 를 쓰지 않는다. 이 조합에서 display 가 flow-root 로
      계산돼 clamp 자체가 죽고 overflow:hidden 만 남았는데, 그러면 상자 높이가
      line-height(1.2em)라 글자의 실제 줄상자(1.44em)가 6px 잘린다 — "Beginning"
      의 g 아래가 그렇게 날아갔다. 줄 수는 max-height 로 세고, padding-bottom 이
      디센더가 앉을 자리를 만든다. 둘 다 em 이라 크기를 바꿔도 따라온다. */
   padding-bottom: 0.25em;
   max-height: calc(3 * 1.2em + 0.25em);
   overflow: hidden;
   /* 이 시트의 모든 제목이 balance 다. 한때 여기만 pretty 로 바꿔 두고 "balance 는
      제목을 한 줄로 붙인다"고 적었는데, 재 보니 39자 제목에서 둘 다 세 줄이고
      balance 쪽이 줄 길이만 고르게 맞춘다. 틀린 이유로 예외를 만들 뻔했다. */
   text-wrap: balance;
 }
 .feature:hover .feature-title { color: var(--ink); }
 .feature-desc {
   margin: 0; max-width: 38ch; color: var(--ink-3); text-wrap: pretty;
   font-size: clamp(0.85rem, 1.65cqw, 1rem);
   /* 두 줄까지. 줄 간격이 1.65em 이라 글자 줄상자(1.44em)보다 넉넉해서 여기는
      따로 자리를 만들 필요가 없다. */
   line-height: 1.65;
   max-height: calc(2 * 1.65em);
   overflow: hidden;
 }
 
 /* 글 덩이의 아래 끝. 문(.door)과 같은 물건이다 — 밑줄 그은 마이크로캡스.
    align-self 가 없으면 flex 열에서 가로로 늘어나 밑줄이 라벨 폭을 가로지른다. */
 .feature-cta {
   align-self: start;
   padding-bottom: 0.3rem;
   font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
   color: var(--ink-3);
   border-bottom: 1px solid var(--rule-2);
   transition: color var(--tr-ink), border-color var(--tr-ink);
 }
 /* 밑줄은 잉크 사다리에서 한 단만 오른다. 액센트는 이 카드에 하나뿐이고 날짜가
    그걸 갖는다 — 위 규칙에 그렇게 적어 놓고 여기서 두 번째를 켰었다. */
 .feature:hover .feature-cta { color: var(--ink-2); border-bottom-color: var(--rule-3); }
 
 /* 좁아지면 그림이 위로 올라간다. 옆으로 두면 두 칸 다 못 쓸 만큼 좁아진다.
    64rem 인 이유: 그 아래에서는 고정 8/3 상자에 네 줄이 안 들어간다. 상자를
    늘리는 대신 쌓는다 — 쌓인 카드는 글이 크기를 정해도 되고, 그게 이 폭에서
    맞는 답이다. */
 @media (max-width: 56rem) {
   .feature { grid-template-columns: 1fr; aspect-ratio: auto; }
   .feature-media {
     aspect-ratio: 16 / 10;
     border-right: 0; border-bottom: 1px solid var(--rule);
   }
 }
 
 /* ---------- buttons ---------- */
 
 .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; }
 
 .btn {
   display: inline-flex; align-items: center; gap: 0.5rem;
   height: 2.5rem; padding-inline: 1.15rem;
   border: 1px solid var(--rule-2); border-radius: var(--radius);
   font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
   color: var(--ink-2);
   transition: color var(--tr-ink), border-color var(--tr-ink), background var(--tr-ink);
 }
 /* 채운 버튼은 잉크로 채운다. 액센트로 채우면 그게 첫 화면에서 제일 큰 색이 된다. */
 .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
 .btn-primary:hover { background: var(--ink); filter: brightness(1.08); }
 .btn-ghost:hover { color: var(--ink); border-color: var(--rule-3); }
 .btn-text { border-color: transparent; padding-inline: 0.35rem; }
 .btn-text:hover { color: var(--accent); }
 
 .back {
   display: inline-flex; align-items: center; gap: 0.45rem;
   margin-top: 2rem;
   font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
   color: var(--ink-4);
   transition: color var(--tr-ink);
 }
 .back:hover { color: var(--ink-2); }
 
 /* ---------- project detail ---------- */
 
 /* 프로젝트마다 자기 색조를 갖는다. 전역 --accent 를 이 페이지 안에서만
    덮으므로 eyebrow 대시·특징 번호·링크·포커스가 한꺼번에 따라간다. 값이 없는
    프로젝트는 인라인 style 이 아예 안 붙어서 사이트 기본값을 쓴다.
    대비 범위는 좁게 잡는다 — 중간 명도, 낮은 채도. 니어블랙 위에서 읽히면서도
    페이지를 자기 색으로 물들이지는 않는 띠다. */
 .project { padding-bottom: clamp(3rem, 8vw, 6rem); }
 
 /* 브리프는 읽는 폭 안에 살고 제목도 한 단계 작다. 등급 차이가 열 개수가
    아니라 타이포로 보여야 한다 — 그러지 않으면 "같은 페이지, 더 짧은 것"이다. */
 .project[data-tier="brief"] .hero-name { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); }
 .project[data-tier="brief"] .hero { border-bottom: 0; padding-bottom: clamp(1.5rem, 3vw, 2rem); }
 
 .hero {
   display: grid; grid-template-columns: 1.35fr 1fr;
   gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
   padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
   border-bottom: 1px solid var(--rule);
 }
 .hero-main { min-width: 0; }
 
 /* eyebrow 앞의 액센트 대시. 제품 명패의 시작을 표시한다. */
 .hero .eyebrow { display: flex; align-items: center; gap: 0.75rem; }
 .hero .eyebrow::before {
   content: ""; width: 1.75rem; height: 1px; background: var(--accent); flex: none;
 }
 
 .hero-name {
   display: flex; align-items: center; gap: 0.6rem; margin: 0;
   font-size: clamp(2.6rem, 1.9rem + 2.6vw, 3.8rem);
   font-weight: var(--w-display); letter-spacing: var(--track-air); line-height: 1.05;
 }
 .hero-name .chip-mark { width: 1.05em; height: 1.05em; }
 
 .hero-tagline { margin: 1.1rem 0 0; max-width: 46ch; color: var(--ink-2); text-wrap: pretty; }
 
 .badges { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
 .badges li {
   font-family: var(--mono); font-size: 0.66rem;
   letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4);
 }
 
 .hero .btn-row { justify-content: flex-start; }
 
 .hero-aside { display: grid; place-items: center; }
 .medallion {
   display: grid; place-items: center;
   width: min(100%, 20rem); aspect-ratio: 1;
   border: 1px solid var(--rule); border-radius: var(--radius);
   background: var(--bg-2); overflow: hidden;
 }
 .medallion img { width: 76%; height: 76%; object-fit: contain; }
 .medallion-mark::before {
   content: ""; width: 72%; height: 72%;
   background-color: var(--mark-ink);
   -webkit-mask: var(--mark-src) center / contain no-repeat;
   mask: var(--mark-src) center / contain no-repeat;
 }
 
 @media (max-width: 52rem) {
   .hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
   .hero .eyebrow, .hero-name, .hero .btn-row { justify-content: center; }
   .hero-tagline, .badges { margin-inline: auto; justify-content: center; }
   /* 좁을 때 옆칸은 지우지 않고 위로 올린다. 지우면 그 프로젝트만 그림이 없는
      것처럼 보인다. */
   .hero-aside { order: -1; }
   .medallion { width: min(60%, 13rem); }
 }
 
 /* ---------- facts ---------- */
 
 .facts {
   display: flex; flex-wrap: wrap; justify-content: center;
   margin-block: clamp(2rem, 5vw, 3rem);
   padding-block: clamp(1.5rem, 3vw, 2rem);
   border-bottom: 1px solid var(--rule);
 }
 .fact {
   flex: 1 1 9rem; display: flex; flex-direction: column; gap: 0.3rem;
   align-items: center; text-align: center; padding-inline: 1rem;
   border-left: 1px solid var(--rule);
 }
 .fact:first-child { border-left: 0; }
 .fact-value {
   font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem);
   font-weight: var(--w-display); letter-spacing: 0.005em; line-height: 1;
   font-variant-numeric: tabular-nums;
 }
 .fact-label {
   font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
   color: var(--ink-4);
 }
 
 /* ---------- lattice ---------- */
 
 .block { padding-block: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--rule); }
 .block:last-child { border-bottom: 0; }
 .block-head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
 .block-title {
   margin: 0; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
   font-weight: var(--w-section); letter-spacing: var(--track-air); text-wrap: balance;
 }
 .block-intro { margin: 0.8rem auto 0; max-width: 56ch; color: var(--ink-3); }
 
 /* 선은 음수 마진으로 겹친 1px 이다. 개수와 열수가 무엇이든 맞아 들어가고
    :nth-child 규칙이 필요 없다. 20rem 은 임의값이 아니다 — 71rem 안에서 열이
    3개가 되고, 특징을 여섯 개로 쓰면 두 줄이 정확히 찬다. */
 .lattice {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   border-top: 1px solid var(--rule);
   border-left: 1px solid var(--rule);
 }
 .cell {
   position: relative; isolation: isolate;
   padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
   min-width: 0;
   margin: 0 -1px -1px 0;
   border-right: 1px solid var(--rule);
   border-bottom: 1px solid var(--rule);
 }
 /* hover 에서 위로 올린다. 그러지 않으면 이웃에 가려 두 변만 밝아진다. */
 .cell:hover { z-index: 1; border-color: var(--rule-2); }
 .cell { transition: border-color var(--tr-ink); }
 
 .cell-index {
   display: block; font-family: var(--mono); font-size: 0.66rem;
   letter-spacing: 0.18em; color: var(--ink-4); margin-bottom: 0.7rem;
   transition: color var(--tr-ink);
 }
 .cell:hover .cell-index { color: var(--accent); }
 .cell-title { margin: 0; font-size: 1rem; font-weight: var(--w-label); letter-spacing: var(--track-set); }
 .cell-desc { margin: 0.5rem 0 0; font-size: 0.86rem; color: var(--ink-3); text-wrap: pretty; }
 
 /* ---------- terminal ---------- */
 
 .term {
   border: 1px solid var(--rule-2); border-radius: var(--radius);
   overflow: hidden; background: var(--bg-recess);
   max-width: 52rem; margin-inline: auto;
 }
 .term-bar {
   display: flex; align-items: center; gap: 0.7rem;
   padding: 0.55rem 0.85rem;
   border-bottom: 1px solid var(--rule); background: var(--bg-2);
 }
 .term-dots { display: inline-flex; gap: 0.32rem; }
 .term-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-3); }
 .term-dots i:first-child { background: var(--ink-4); }
 .term-name { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--ink-4); }
 
 .term-body {
   margin: 0; padding: 1.2rem 1.3rem; overflow-x: auto;
   font-family: var(--mono); font-size: 0.8rem; line-height: 1.85; white-space: pre;
 }
 .term-body code { font: inherit; background: none; padding: 0; border: 0; }
 .term-body span { display: block; }
 .term-cmd { color: var(--ink); }
 /* 주석은 기울이고, 출력은 중립 회색이다. 출력에 색을 주면 그게 결과가 아니라
    상태로 읽힌다. */
 .term-comment { color: var(--ink-4); font-style: italic; }
 .term-out { color: var(--ink-3); }
 .term-caption {
   margin: 0.8rem auto 0; max-width: 52rem; text-align: center;
   font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-4);
 }
 
 /* ---------- cta ---------- */
 
 .cta { margin-top: clamp(3rem, 7vw, 5rem); padding-block: clamp(2.5rem, 6vw, 5rem); text-align: center; }
 .cta-inner { max-width: 46ch; margin-inline: auto; }
 .cta-title {
   margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
   font-weight: var(--w-display); letter-spacing: var(--track-air); text-wrap: balance;
 }
 .cta-text { margin: 0.9rem 0 0; color: var(--ink-3); }
 
 /* ---------- about ---------- */
 
 .about-head { text-align: center; }
 .portrait { margin: 0 auto clamp(1.5rem, 4vw, 2.25rem); width: min(100%, 12rem); }
 .portrait img {
   display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
   border: 1px solid var(--rule-2); border-radius: var(--radius);
 }
 
 /* ---------- toc & pager ---------- */
 
 .toc { margin: 2rem auto 2.5rem; max-width: var(--read); padding: 1rem 1.25rem; border-left: 1px solid var(--rule-2); }
 .toc-label {
   margin: 0 0 0.5rem; font-size: 0.66rem;
   letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4);
 }
 .toc ul { list-style: none; margin: 0; padding: 0; }
 .toc ul ul { padding-left: 1rem; }
 .toc li { margin: 0.3rem 0; font-size: 0.88rem; }
 .toc a { color: var(--ink-3); transition: color var(--tr-ink); }
 .toc a:hover { color: var(--accent); }
 
 /* ---------- reading rail ---------- */
 
 /* 목차의 두 번째 모습. 넓은 화면에서 오른쪽 가장자리에 서고, 절마다 세로
    헤어라인 한 칸이며 칸의 높이가 그 절이 글에서 차지하는 몫이다. 목록은 절이
    몇 개인지 말하고 지도는 어느 절이 긴지 말한다.
 
    레일이 실제로 만들어졌을 때만 목록이 물러난다(.has-rail 은 ui.js 가 붙인다).
    스크립트가 못 오면 목록이 그대로 남고, 그게 이 장치의 폴백이다.
 
    처음 판은 본문 칼럼에 붙여 놓고 눈금 자체만 손을 받게 했다. 재 보니 레일이
    차지한 넓이의 14% 만 반응했고, 눈금에서 이름으로 커서를 옮기면 이름이
    대부분 사라졌다 — 이름과 세로로 겹치는 28% 구간에서만 건너갈 수 있었다.
    가끔 되는 조작은 안 되는 조작보다 나쁘다. 지금은 여백 전체가 손을 받는다. */
 
 .rail { display: none; }
 
 /* 이 시트의 첫 min-width 다. 나머지는 전부 max-width — 넓게 시작해서 좁아지면
    뺀다는 자세이고, 이것만 예외인 이유는 레일이 없던 자리를 요구하는 유일한
    요소이기 때문이다. */
 @media (min-width: 80rem) {
   .rail {
     display: grid;
     /* 이름이 안쪽, 눈금이 바깥쪽이다. 눈금은 스크롤 막대 옆에 서는 스크롤
        가구이고 이름은 글 쪽으로 흐른다 — 반대로 두면 눈이 글에서 멀어지는
        방향으로 읽어 나가야 한다. */
     grid-template-columns: minmax(0, 1fr) 2px;
     column-gap: 0.9rem;
     row-gap: 0.3rem;
     /* 행 높이는 ui.js 가 grid-template-rows 로 쓴다. 겹침 풀이를 격자에 맡기면
        참조 구현이 손으로 짠 두 번의 밀어내기 패스가 통째로 없어지고, 이름이
        엉뚱한 눈금 옆에 가는 일이 구조적으로 불가능해진다. */
 
     position: fixed;
     /* 창 가장자리에 붙는다. 본문 칼럼에 매달았더니 1920px 에서 레일이 창 끝에서
        551px 떨어진 자리에 섰다 — 손이 가는 자리가 아니다. 스크롤 막대를 향해
        뻗는 손이 지나가는 띠가 이 화면에서 가장 자주 밟히는 빈 자리이고,
        여기 두면 찾으려 하지 않아도 걸린다.
        폭은 본문과 겹치지 않는 만큼까지만 — 1280px 에서 28px 이 남는다. */
     right: 0;
     width: min(16rem, calc(50vw - var(--read) / 2 + var(--gutter) - 1.5rem));
     /* 눈금과 창 끝 사이. 스크롤 막대 바로 옆이 이 물건의 자리다 — 멀어질수록
        본문 여백에 떠 있는 장식으로 보이고, 붙을수록 스크롤 가구로 읽힌다.
        포커스 링이 2px 테두리에 3px 오프셋이라 그만큼은 남긴다. */
     padding-right: 0.3rem;
     top: 50%; transform: translateY(-50%);
     height: min(64vh, 34rem);
     /* 마스트헤드(30) 아래. 올라온 이름이 크롬을 덮으면 안 된다. */
     z-index: 20;
   }
 
   /* 눈금은 세 단의 밝기다: 아직 안 읽은 것, 읽은 것, 지금 읽는 것. 색조는 한
      가지뿐이라 2px 에서도 순서가 읽힌다. 한때 읽은 자리를 잉크로, 지금 자리를
      주황으로 칠한 적이 있는데 그때는 과거가 현재보다 두 배 진했다 — 두 색을
      섞으면 어느 쪽이 앞인지 정할 방법이 없다. 색은 하나고, 순서는 길이가 짓는다. */
   /* 아직 안 읽은 자리. 중립 헤어라인이라 주황이 지나간 자리와 안 지나간 자리가
      색조로 갈린다. */
   .rail-seg { background: var(--rule-3); }
 
   /* 읽은 만큼. 이 사이트의 유일한 색이고, 여기가 그 색이 상시로 서는 유일한
      자리다 — 다른 데서는 손이 닿을 때만 나온다. 진행은 한 가지 색이 단조롭게
      자라는 것으로만 말한다: 위는 다 차고, 지금 절만 덜 찼고, 아래는 비어 있다.
      "지금"을 다른 색으로 칠하지 않는 이유가 그거다. 덜 찬 칸이 이 열에 하나뿐이라
      색을 더 쓰면 읽는 사람이 순서를 매길 수 없는 두 번째 변수가 생긴다.
 
      라이트에서 이 주황은 바탕 대비 2.12:1 이다. 낮다 — 그래서 이 레일은 보조
      표시이고, 실제 목차는 좁은 화면과 스크립트가 없을 때 그대로 나오는 본문의
      목록이 진다. 이름의 현재 표시는 색이 아니라 aria-current 와 잉크가 진다.
 
      높이는 ui.js 가 스크롤에서 직접 쓴다 — 전환을 걸면 화면보다 한 박자 늦게
      따라와 거짓말을 한다. 이미 연속값에 매인 것은 애니메이션하지 않는다. */
   .rail-fill {
     display: block; width: 100%; height: 0;
     background: var(--accent);
   }
 
   .rail-label {
     align-self: start;
     /* 오른쪽 정렬이라 이름들이 눈금에 붙어 한 덩이로 읽힌다. 왼쪽 정렬로 두면
        길이가 제각각인 세 구절이 빈 자리에 흩어져 목록으로 안 보인다. */
     text-align: right;
     /* 두 줄까지. 칸의 아래끝 2.2rem 이 정확히 두 줄 높이라, 넘치면 옆 칸을
        침범한다. -webkit-line-clamp 를 쓰지 않는 이유는 카드 제목과 같다 — 이
        조합에서 display 가 flow-root 로 계산돼 clamp 가 죽고 overflow 만 남으면,
        상자가 line-height 만큼이라 글자 줄상자(1.44em)의 아래가 잘린다.
        ponytail: 여기 걸리는 제목이 잦아지면 breakpoint 를 84rem 으로 올려 이름
        열을 넓히는 쪽이 먼저다. 글자 크기를 줄이는 건 그다음. */
     max-height: calc(2 * 1.35em + 0.12em);
     padding-bottom: 0.12em;
     overflow: hidden;
     font-size: 0.72rem; line-height: 1.35;
     /* 13.7px 글자다. --ink-3 은 라이트에서 4.23:1 로 AA 아래이고, 여기서 쓰던
        hover 액센트는 2.12:1 이라 손을 얹으면 더 안 읽혔다 — 이 열에서 액센트가
        두 번째로 틀린 자리다. 밝기로만 간다. */
     color: var(--ink-2);
     opacity: 0; pointer-events: none;
     transition: opacity var(--tr-ink), color var(--tr-ink);
   }
   .rail-label[aria-current] { color: var(--ink); }
 
   /* 드러나는 것은 숨어 있던 것이지 자리를 옮긴 것이 아니다. 이름은 제자리에서
      밝아진다 — 굵어지지도, 밀려나지도 않는다. 여백 전체가 방아쇠라, 한 번 나온
      이름까지 커서가 가는 동안 사라지지 않는다. 박자는 이 시트의 유일한 박자다.
 
      눈금은 hover 에 반응하지 않는다. --rule-3 에서 --ink-4 로 옮겼더니 라이트에서
      1.78:1 → 1.72:1 로 오히려 흐려졌고 다크에서는 1.76 → 1.77 로 아무 일도
      일어나지 않았다 — 두 토큰의 밝기가 두 테마 모두에서 거의 같다. 사이에 낄
      단이 없고, 이름 넷이 한꺼번에 나타나는 것이 이미 충분한 대답이다.
      좁아지면 줄이는 게 아니라 뺀다. */
   .rail:hover .rail-label,
   .rail:focus-within .rail-label { opacity: 1; pointer-events: auto; }
 
   /* 손이 얹힌 이름은 밝아진다. 지금 절과 같은 잉크가 되지만 둘을 가르는 것은
      색이 아니라 눈금이다 — 지금 절만 덜 찬 칸을 갖는다. 내비도 같은 규칙이다. */
   .rail-label:hover { color: var(--ink); }
 
   .has-rail .toc { display: none; }
 }
 
 /* ---------- prose ---------- */
 
 .prose { font-size: 1.02rem; line-height: 1.78; }
 .prose-intro { margin-bottom: 2.5rem; color: var(--ink-2); text-align: center; }
 .project .prose, .prose-intro { max-width: var(--read); margin-inline: auto; }
 
 /* 여백은 형제 사이에만. 타입 셀렉터로 초기화하면 특정성이 높아 아래 규칙을
    이기고 문단 사이 여백이 통째로 사라진다. */
 .prose > * { margin: 0; }
 .prose > * + * { margin-top: 1.2rem; }
 .prose p { text-wrap: pretty; }
 
 .prose h2, .prose h3, .prose h4 {
   margin: 2.75rem 0 0; line-height: 1.25; letter-spacing: 0.012em;
   text-wrap: balance; scroll-margin-top: calc(var(--masthead-h) + 1rem);
 }
 .prose h2 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem); font-weight: var(--w-section); }
 .prose h3 { font-size: 1.12rem; font-weight: var(--w-item); }
 .prose h4 { font-size: 1rem; font-weight: var(--w-label); }
 .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.8rem; }
 
 .prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--rule-3); }
 .prose a:hover { text-decoration-color: var(--accent); }
 
 .prose ol { margin-top: 1.2rem; padding-left: 1.35rem; }
 .prose ul { margin-top: 1.2rem; list-style: none; padding-left: 1.1rem; }
 .prose li { margin: 0.4rem 0; }
 .prose ul > li { position: relative; }
 .prose ul > li::before {
   content: ""; position: absolute; left: -1.1rem; top: 0.85em;
   width: 0.45rem; height: 1px; background: var(--ink-4);
 }
 
 .prose blockquote {
   margin-top: 1.8rem; padding-left: 1.25rem;
   border-left: 1px solid var(--rule-3); color: var(--ink-2);
 }
 
 .prose code {
   font-family: var(--mono); font-size: 0.86em;
   padding: 0.12em 0.35em; border-radius: var(--radius); background: var(--bg-3);
 }
 .prose pre {
   position: relative; margin-top: 1.5rem; padding: 1.1rem 1.2rem; overflow-x: auto;
   border: 1px solid var(--rule); border-radius: var(--radius);
   background: var(--bg-recess); font-size: 0.82rem; line-height: 1.75;
 }
 .prose pre code { padding: 0; background: none; font-size: inherit; }
 
 .copy-btn {
   position: absolute; top: 0.5rem; right: 0.5rem;
   padding: 0.18rem 0.5rem;
   border: 1px solid var(--rule-2); border-radius: var(--radius);
   background: var(--bg-2); color: var(--ink-4);
   font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
   text-transform: uppercase; cursor: pointer; opacity: 0;
   transition: opacity var(--tr-ink), color var(--tr-ink), border-color var(--tr-ink);
 }
 .prose pre:hover .copy-btn, .prose pre:focus-within .copy-btn { opacity: 1; }
 .copy-btn:hover { color: var(--ink); border-color: var(--rule-3); }
 .copy-btn.is-done { opacity: 1; color: var(--accent); border-color: var(--accent); }
 
 .prose table {
   width: 100%; margin-top: 1.75rem; border-collapse: collapse;
   font-size: 0.9rem; font-variant-numeric: tabular-nums;
 }
 .prose th, .prose td { padding: 0.55rem 0.75rem; text-align: left; border-bottom: 1px solid var(--rule); }
 .prose th {
   font-size: 0.64rem; font-weight: 500;
   letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4);
   border-bottom-color: var(--rule-2);
 }
 .prose td { color: var(--ink-2); }
 .prose hr { margin-top: 2.5rem; border: 0; border-top: 1px solid var(--rule); }
 
 .prose .anchor { opacity: 0; color: var(--ink-4); text-decoration: none; transition: opacity var(--tr-ink); }
 .prose h2:hover .anchor, .prose h3:hover .anchor, .prose h4:hover .anchor,
 .prose .anchor:focus-visible { opacity: 1; }
 
 /* ---------- search palette ---------- */
 
 .palette {
   width: min(38rem, calc(100vw - 2rem)); margin-top: 12vh; padding: 0;
   border: 1px solid var(--rule-2); border-radius: var(--radius);
   background: var(--bg-2); color: var(--ink);
   box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
 }
 .palette::backdrop { background: rgba(1, 1, 2, 0.66); backdrop-filter: blur(4px); }
 .palette-form { margin: 0; }
 .palette-head {
   display: flex; align-items: center; gap: 0.7rem;
   padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); color: var(--ink-4);
 }
 .palette-input {
   flex: 1; min-width: 0; border: 0; background: none; color: var(--ink);
   font: inherit; font-size: 0.98rem; outline: none;
 }
 .palette-close { border: 0; background: none; cursor: pointer; padding: 0; color: var(--ink-4); }
 .palette-close kbd { font-family: var(--mono); font-size: 0.64rem; }
 .palette-results { list-style: none; margin: 0; padding: 0.4rem; max-height: 56vh; overflow-y: auto; }
 .palette-results:empty { display: none; }
 .palette-results a { display: block; padding: 0.6rem 0.7rem; border-radius: var(--radius); }
 .palette-results li[aria-selected="true"] a, .palette-results a:hover { background: var(--bg-3); }
 .palette-title { display: block; font-size: 0.94rem; font-weight: 400; }
 .palette-crumb {
   display: block; margin-top: 0.15rem;
   font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4);
 }
 .palette-results mark { background: none; color: var(--accent); }
 .palette-status {
   margin: 0; padding: 0.55rem 1rem; border-top: 1px solid var(--rule);
   font-family: var(--mono); font-size: 0.66rem; color: var(--ink-4);
 }
 .palette-status:empty { display: none; }
 
 /* ---------- colophon ---------- */
 
 /* 여백은 세 줄을 서로 떼어 놓을 만큼만. 크롬은 읽는 물건이 아니라 나가는
    길이라, 본문만 한 자리를 차지하면 페이지가 거기서 한 번 더 시작하는 것처럼
    보인다. */
 .colophon { border-top: 1px solid var(--rule); padding-block: 2rem 2.5rem; }
 .colophon-in {
   max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter);
   display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
   gap: 0.9rem 2rem; text-align: center;
 }
 .colophon-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem; }
 .colophon-nav a {
   font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
   color: var(--ink-4); transition: color var(--tr-ink);
 }
 .colophon-nav a:hover { color: var(--ink-2); }
 /* 갈래 링크와 소셜은 다른 줄에 선다 — 안을 도는 것과 밖으로 나가는 것이다. */
 .colophon-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; flex-basis: 100%; }
 /* 아이콘만 남긴다. GitHub 와 Instagram 은 마크만으로 읽히는 몇 안 되는 표지라
    낱말이 하는 일이 없다 — 이름은 aria-label 이 진다. */
 .colophon-social a {
   display: inline-flex; align-items: center; justify-content: center;
   width: 1.9rem; height: 1.9rem;
   font-size: 1rem; color: var(--ink-3);
   transition: color var(--tr-ink);
 }
 .colophon-social a:hover { color: var(--accent); }
 .colophon-social svg { flex: none; }
 
 .colophon-note { margin: 0; flex-basis: 100%; font-size: 0.7rem; letter-spacing: 0; color: var(--ink-4); }
 .colophon-note a { color: var(--ink-3); transition: color var(--tr-ink); }
 .colophon-note a:hover { color: var(--accent); }
 
 /* ---------- Korean ---------- */
 
 /* 한국어는 라틴 타이포 장치 셋을 깨뜨린다. letter-spacing 은 음절 블록을 벌리고,
    text-transform 은 아무 일도 하지 않으며, monospace 는 한글이 프로포셔널로
    폴백하는데 공백만 mono 폭이라 어절 사이가 두 배로 벌어진다.
 
    여기 걸리는 것은 **한국어가 들어가는 자리만**이다. 크롬(내비·푸터·컨트롤·
    문 링크)은 두 언어에서 영어로 고정이므로 대문자와 자간을 그대로 둔다 —
    되돌리면 한국어 페이지에서만 라벨이 소문자로 나와 두 언어가 달라 보인다. */
 html[lang="ko"] .eyebrow,
 html[lang="ko"] .fact-label,
 html[lang="ko"] .prose th,
 html[lang="ko"] .crumbs,
 html[lang="ko"] .palette-crumb,
 html[lang="ko"] .btn,
 html[lang="ko"] .back,
 html[lang="ko"] .badges li {
   font-family: var(--sans);
   letter-spacing: 0;
   text-transform: none;
 }
 
 /* 초경량은 한글에서도 나오지만 아주 큰 크기에서만 버틴다. 한글은 같은 굵기에서
    획이 훨씬 많아 라틴보다 먼저 뭉개지고, 작아지면 획이 끊어져 보인다.
    사다리 전체를 한 단씩 올린다 — 선택자마다 예외를 적으면 라틴 쪽 사다리를
    고칠 때 이쪽이 조용히 어긋난다. */
 html[lang="ko"] {
   --w-display: 300;
   --w-section: 350;
   --w-item:    400;
   --w-label:   500;
   /* 자간도 여기서 끈다. letter-spacing 은 한글에서 음절 블록 사이를 벌려
      한 낱말이 여러 낱말로 보이게 만든다 — 라틴에서 숨을 주는 그 값이
      한글에서는 정확히 반대로 작동한다. */
   --track-air: 0;
   --track-set: 0;
 }
 
 /* 숫자와 날짜는 한국어에서도 mono 다. 숫자에는 위 문제가 없고 자릿수가 맞아야
    목록이 줄을 이룬다. */
 html[lang="ko"] .ledger-date,
 html[lang="ko"] .feature-date,
 html[lang="ko"] .ledger-year,
 html[lang="ko"] .term-body,
 html[lang="ko"] .stars { font-family: var(--mono); }
 
 /* ---------- reduced motion ---------- */
 
 @media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
   /* 전환만 끄면 변형된 자리에 멈춘다. 종점도 같이 중화한다. */
   .js .hero-home [data-rise] { animation: none; opacity: 1; transform: none; }
   .frame:hover .frame-media,
   .frame:hover .frame-media img,
   .tile-links a:hover { transform: none; }
 }