feat(site): 쇼케이스를 별도 페이지로 분리하고 본문을 존댓말로 바꾼다

홈에 있던 쇼케이스 섹션은 스크린샷 두 장을 카드에 넣고 각도를 준 것이었고, 눌러도 갈 곳이 없었다. 그림만 보여주고 끝나는 자리는 증거가 아니라 장식이다. - /showcase 를 별도 페이지로 만들었다. 모자이크 그리드에 썸네일을 놓고 누르면 실제로 도는 사이트(/work/<slug>/)가 열린다. - 사례 데이터를 src/data/work.ts 한 곳에 모았다. 항목 하나만 추가하면 그리드에 들어간다 — 페이지 코드는 건드리지 않는다. - 첫 사례로 목요일의 화원(플로럴 스튜디오)을 넣고 실제 파일을 public/work/thursday-flowers/ 에 함께 싣는다. - 홈에서 예전 섹션을 제거하고 내비를 /showcase 로 돌렸다. 본문 말투: 사이트 문장이 전부 반말이었고 일부는 내부 감사 로그처럼 읽혔다. 스킬 문서의 단정한 반말은 의도지만, 방문자를 향한 화면은 다르다. 제목은 단정문이 카피로서 힘을 가지므로 그대로 두고, 설명하는 문장과 명령형("~해라")을 전부 존댓말로 바꿨다. 실측 결과 홈·쇼케이스 모두 0건. 구현에서 걸린 것: Base 레이아웃이 이미 <main class="page"> 를 제공하는데 새 페이지에서 또 감쌌다. 바깥 page 의 본문 칼럼(561px) 안에 안쪽 page 가 들어가 전 페이지가 좁아졌다 — 모자이크가 561px, 썸네일이 240px 이었다. 중첩을 걷어내자 1180px / 596px 로 돌아왔다.
2026-08-21 08:36:35 +09:00 · 2026-08-21 08:36:35 +09:00 · 30dc6687dd
commit 30dc6687dd
parent b92853bf2b
16 changed files with 1555 additions and 75 deletions
--- a/apps/site/public/work/thursday-flowers/styles/main.css
+++ b/apps/site/public/work/thursday-flowers/styles/main.css
@ -0,0 +1,602 @@
+@import url("./tokens.css");
+
+/* ────────────────────────────────────────────────────────
+   리셋 — 필요한 것만
+   ──────────────────────────────────────────────────────── */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-body);
+  line-height: var(--leading-body);
+  font-weight: var(--weight-regular);
+  /* 종이 질감. 에디토리얼 프리셋의 기본 재질이고, 아주 약해야 한다.
+     세게 걸면 화면이 지저분해지고 사진의 디테일과 싸운다. */
+  background-image: url("#");
+  background-attachment: fixed;
+}
+
+img,
+picture {
+  display: block;
+  max-width: 100%;
+  /* CLS 를 막으려고 HTML 에 width/height 속성을 적어두면, height 속성이
+     그대로 계산된 높이가 되어 **aspect-ratio 가 무시된다.**
+     실측: aspect-ratio 는 "3 / 4" 로 적용돼 있는데 높이는 원본 1448px 이었다.
+     height:auto 를 줘야 비율이 높이를 정한다. */
+  height: auto;
+}
+
+/* 한글 조판. 서구 레퍼런스에는 이 정보가 없어서 직접 정한다.
+   keep-all 이 없으면 어절 한가운데서 줄이 바뀐다. */
+:where(p, li, h1, h2, h3, figcaption, dd, dt) {
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+
+a {
+  color: inherit;
+}
+
+/* 키보드 사용자를 위한 것. 어떤 이펙트보다 우선한다 */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--paper);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: var(--gutter);
+  top: var(--space-3);
+}
+
+/* ────────────────────────────────────────────────────────
+   타이포그래피 — 크기 4종, 웨이트 2종. 그 이상 늘리지 않는다
+   ──────────────────────────────────────────────────────── */
+h1,
+h2,
+h3 {
+  font-family: var(--font-display);
+  font-weight: var(--weight-regular); /* 큰 글자일수록 가늘게 */
+  line-height: var(--leading-tight);
+  letter-spacing: var(--track-display);
+  text-wrap: balance;
+}
+h1 {
+  font-size: var(--step-display);
+}
+h2 {
+  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
+  letter-spacing: var(--track-lead);
+}
+h3 {
+  font-size: 1.15rem;
+  letter-spacing: var(--track-lead);
+}
+
+.lead {
+  font-size: var(--step-lead);
+  letter-spacing: var(--track-lead);
+  color: var(--ink-muted);
+  max-width: var(--measure);
+}
+
+/* 작은 라벨만 굵고 자간이 넓다. 크기 위계의 반대쪽 끝이다 */
+.label {
+  font-size: var(--step-label);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--track-label);
+  color: var(--ink-muted);
+  text-transform: none; /* 한글에 uppercase 는 아무 효과가 없고 라틴만 튄다 */
+}
+
+.muted {
+  color: var(--ink-muted);
+}
+
+/* 제목 다음에 오는 것은 반드시 떨어진다.
+   h2 는 margin: 0 이고 p 도 margin-top: 0 이라 그냥 두면 붙는다. */
+h1 + *,
+h2 + *,
+h3 + * {
+  margin-top: var(--space-4);
+}
+
+/* ────────────────────────────────────────────────────────
+   레이아웃
+   ──────────────────────────────────────────────────────── */
+.wrap {
+  max-width: var(--container);
+  margin-inline: auto;
+  padding-inline: var(--gutter);
+}
+
+.section {
+  padding-block: var(--space-8);
+}
+
+/* 세로로 세운 글자. R1 이 여백을 이렇게 쓴다 —
+   가로 공간을 먹지 않으면서 빈 곳에 정보를 흘려 넣는다. */
+.vertical {
+  writing-mode: vertical-rl;
+  font-size: var(--step-label);
+  font-weight: var(--weight-bold);
+  /* 가로쓰기 라벨의 자간(0.14em)을 그대로 쓰면 안 된다.
+     세로쓰기에서 자간은 **글자 사이 세로 간격**이 되어 낱글자가 흩어진다.
+     한글은 자소가 모여 한 글자라 특히 심하다. */
+  letter-spacing: 0.02em;
+  color: var(--ink-faint);
+  white-space: nowrap;
+}
+
+/* ── 링크: 밑줄이 글자를 침범하지 않게 ── */
+.link {
+  color: var(--accent);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.25em;
+  transition: text-decoration-color 250ms var(--ease-out);
+}
+.link:hover {
+  text-decoration-color: transparent;
+}
+
+/* ── 버튼: 하나뿐인 주 CTA ── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 3rem;
+  padding: 0 var(--space-5);
+  background: var(--ink);
+  color: var(--paper);
+  font-size: var(--step-body);
+  font-weight: var(--weight-regular);
+  text-decoration: none;
+  border: 1px solid var(--ink);
+  border-radius: 0; /* 이 페이지의 모서리는 전부 각지다. 하나만 둥글면 그게 튄다 */
+  transition:
+    background 250ms var(--ease-out),
+    color 250ms var(--ease-out);
+}
+.btn:hover {
+  background: transparent;
+  color: var(--ink);
+}
+.btn-quiet {
+  background: transparent;
+  color: var(--ink);
+  border-color: var(--line);
+}
+.btn-quiet:hover {
+  border-color: var(--ink);
+  background: transparent;
+}
+
+/* ────────────────────────────────────────────────────────
+   등장 — 페이드와 10px 상승뿐.
+   R1 의 스크롤 이동량이 0px 이었다. 하이엔드는 움직이지 않는다.
+   ──────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: no-preference) {
+  .reveal {
+    opacity: 0;
+    transform: translateY(var(--rise));
+    transition:
+      opacity var(--dur-slow) var(--ease-out),
+      transform var(--dur-slow) var(--ease-out);
+    transition-delay: var(--delay, 0ms);
+  }
+  .reveal.is-in {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ════════════════════════════════════════════════════════
+   섹션별 레이아웃
+   ════════════════════════════════════════════════════════ */
+
+/* ── 헤더 ─────────────────────────────────────────────
+   워드마크 좌상단, 내비 우상단. R1 이 이렇게 놓는다.
+   고정하지 않는다 — 에디토리얼에서 떠다니는 바는 읽기를 방해한다. */
+.site-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-5);
+  padding-top: var(--space-5);
+}
+/* 넓은 화면에서는 두 줄, 좁은 화면에서는 한 줄로 쓴다.
+   <br> 을 display:none 으로 지우면 줄만 붙는 게 아니라 **공백까지 사라져**
+   "목요일의화원" 이 된다. span 두 개로 두고 display 를 바꾼다. */
+.wordmark span {
+  display: block;
+}
+.wordmark {
+  font-family: var(--font-display);
+  font-size: 1.35rem;
+  line-height: 1.25;
+  letter-spacing: 0.06em;
+  text-decoration: none;
+  color: var(--ink);
+}
+.nav {
+  display: flex;
+  gap: var(--space-4);
+  font-size: var(--step-label);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--track-label);
+  padding-top: 0.4rem;
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  transition: color 250ms var(--ease-out);
+}
+.nav a:hover {
+  color: var(--ink);
+}
+
+/* ── 히어로 ───────────────────────────────────────────
+   리스크를 감수한 자리다. 큰 사진 한 장 대신 셋을 흩뿌린다.
+
+   그리드를 12칸으로 두되 각 사진이 **서로 다른 칸에서 시작해 다른 칸에서 끝난다.**
+   R1 을 실측했더니 이미지 6개의 좌측 정렬선이 6개 전부 달랐다(117·173·188·433·588·948).
+   정렬선이 하나로 모이는 순간 이 레이아웃은 그냥 어긋난 그리드가 된다. */
+.hero {
+  padding-block: var(--space-6) var(--space-8);
+}
+
+/* 12칸 그리드에 grid-row 를 손으로 배치했더니 행 높이가 콘텐츠에 따라
+   285/195/88/266px 로 제각각 잡히고 사이에 빈 칸이 생겼다.
+   글과 사진을 두 덩어리로 나누고, **사진 안에서만** 흩뿌린다.
+   그래야 정렬선을 흩는 것과 빈 공간이 생기는 것이 분리된다. */
+.hero-inner {
+  display: grid;
+  /* 텍스트 칼럼이 좁으면 h1 이 3줄로 접힌다(카운트 규칙: 헤드라인 2줄 이하).
+     세로 라벨이 왼쪽에서 자리를 먹으므로 그만큼 더 준다. */
+  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
+  gap: var(--space-5);
+  align-items: center;
+}
+.hero-text {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--space-5);
+  align-items: start;
+}
+.hero-body > * + * {
+  margin-top: var(--space-5);
+}
+.hero-role {
+  align-self: start;
+}
+.hero-cta {
+  justify-self: start;
+}
+
+/* 사진 셋. 위치·크기·비율이 전부 다르고 서로 겹친다.
+   R1 실측에서 이미지 6개의 좌측 정렬선이 6개 전부 달랐다 —
+   정렬선이 하나로 모이면 이 레이아웃은 그냥 어긋난 그리드가 된다. */
+.hero-photos {
+  position: relative;
+  /* 가장 아래 사진(.ph-c)이 63% 에서 시작해 폭 47%·4:3 이므로 약 0.99 에서 끝난다.
+     컨테이너를 그보다 길게 잡으면 히어로 아래에 빈 띠가 남는다. */
+  aspect-ratio: 1 / 0.995;
+}
+.ph {
+  position: absolute;
+  margin: 0;
+  overflow: hidden;
+}
+.ph img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ph-a {
+  left: 16%;
+  top: 0;
+  width: 60%;
+  aspect-ratio: 3 / 4;
+}
+.ph-b {
+  left: 0;
+  top: 52%;
+  width: 27%;
+  aspect-ratio: 3 / 4;
+}
+.ph-c {
+  right: 0;
+  top: 63%;
+  width: 47%;
+  aspect-ratio: 4 / 3;
+}
+.hero-tags {
+  position: absolute;
+  right: -1.4rem;
+  top: 4%;
+}
+
+/* ── 섹션 공통 ────────────────────────────────────── */
+.band {
+  background: var(--paper-deep);
+}
+
+/* 이미지와 글의 2단. 같은 스플릿을 세 번 이상 쓰지 않는다 —
+   두 번째는 좌우를 뒤집어 리듬을 준다 */
+.two {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
+  gap: var(--space-7);
+  align-items: start;
+}
+.two-reverse .two-text {
+  order: 2;
+}
+.two-text > * + * {
+  margin-top: var(--space-4);
+}
+.two-text p {
+  max-width: var(--measure);
+}
+.two-photo {
+  margin: 0;
+}
+.two-photo img {
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  object-fit: cover;
+}
+.two-photo figcaption {
+  margin-top: var(--space-3);
+}
+
+/* 숫자와 사실. 표가 아니라 조판으로 둔다 */
+.facts {
+  margin-top: var(--space-6);
+  display: grid;
+  gap: var(--space-3);
+}
+.facts > div {
+  display: grid;
+  grid-template-columns: 7.5rem 1fr;
+  gap: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--line);
+}
+.facts dt {
+  font-size: var(--step-label);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--track-label);
+  color: var(--ink-muted);
+  padding-top: 0.35rem;
+}
+.facts dd {
+  margin: 0;
+}
+
+/* ── 작업 갤러리 ──────────────────────────────────────
+   균일한 3열 그리드를 쓰지 않는다. 셋의 크기와 세로 위치가 전부 다르다. */
+.gallery {
+  margin-top: var(--space-7);
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--space-5) var(--space-4);
+  align-items: start;
+}
+.g {
+  margin: 0;
+}
+.g img {
+  width: 100%;
+  object-fit: cover;
+}
+.g figcaption {
+  margin-top: var(--space-3);
+  font-size: var(--step-label);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--track-label);
+  color: var(--ink-muted);
+}
+.g-1 {
+  grid-column: 1 / 9;
+}
+.g-1 img {
+  aspect-ratio: 16 / 9;
+}
+.g-2 {
+  grid-column: 9 / 13;
+  margin-top: var(--space-7);
+}
+.g-2 img {
+  aspect-ratio: 3 / 4;
+}
+.g-3 {
+  grid-column: 3 / 10;
+  margin-top: var(--space-5);
+}
+.g-3 img {
+  aspect-ratio: 4 / 3;
+}
+
+.work-note {
+  margin-top: var(--space-6);
+  max-width: var(--measure);
+}
+
+/* ── 문의 ─────────────────────────────────────────── */
+.contact-inner {
+  max-width: 46rem;
+}
+.contact-list {
+  list-style: none;
+  padding: 0;
+  margin-top: var(--space-6);
+  display: grid;
+  gap: var(--space-3);
+}
+.contact-list li {
+  display: grid;
+  grid-template-columns: 7rem 1fr;
+  gap: var(--space-3);
+  align-items: baseline;
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--line);
+}
+
+/* ── 찾아오기 (푸터를 대신한다) ───────────────────── */
+.visit {
+  padding-bottom: var(--space-7);
+}
+.visit-inner {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) auto;
+  gap: var(--space-6);
+  align-items: end;
+}
+.visit-address {
+  margin-top: var(--space-4);
+  font-style: normal;
+  color: var(--ink-muted);
+}
+.visit-note {
+  max-width: 24ch;
+}
+.visit-mark {
+  color: var(--line);
+  font-family: var(--font-display);
+  font-size: 1rem;
+  letter-spacing: 0.2em;
+}
+
+/* ════════════════════════════════════════════════════════
+   좁은 화면 — 흩뿌림은 넓은 화면의 사치다.
+   320px 에서 정렬선 여섯 개를 유지하면 그냥 부서진 페이지가 된다.
+   ════════════════════════════════════════════════════════ */
+@media (max-width: 900px) {
+  /* 히어로를 한 칸으로 내린다. 흩뿌림은 넓은 화면의 사치다 —
+     390px 에서 정렬선 셋을 유지하면 사진이 서로를 가린다. */
+  .hero-inner {
+    grid-template-columns: 1fr;
+    gap: var(--space-6);
+  }
+  /* 여기가 실제 사고 지점이었다. .hero-text 가 `auto 1fr` 2칸인데
+     세로 라벨을 가로로 눕히자 그 긴 문장이 auto 칸을 통째로 먹어
+     h1 칸이 짜부라졌다 — 390px 에서 헤드라인이 6줄, 320px 에서 11줄이 됐다. */
+  .hero-text {
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+  }
+  .hero-role {
+    writing-mode: horizontal-tb;
+  }
+  /* 히어로의 텍스트 요소는 넷을 넘지 않는다(카운트 규칙) */
+  .hero-tags {
+    display: none;
+  }
+  .hero-photos {
+    aspect-ratio: 1 / 0.9;
+  }
+  .visit-mark {
+    writing-mode: horizontal-tb;
+  }
+
+  .two,
+  .visit-inner {
+    grid-template-columns: 1fr;
+    gap: var(--space-6);
+  }
+  .two-reverse .two-text {
+    order: 0;
+  }
+
+  .gallery {
+    grid-template-columns: 1fr;
+  }
+  .g-1,
+  .g-2,
+  .g-3 {
+    grid-column: 1;
+    margin-top: 0;
+  }
+}
+
+@media (max-width: 560px) {
+  .facts > div,
+  .contact-list li {
+    grid-template-columns: 1fr;
+    gap: var(--space-1);
+  }
+  /* 워드마크와 내비를 한 줄에 나란히 두면 320px 에서 둘 다 접힌다.
+     실측: 내비 링크가 두 줄(top 46/77)에 걸리고 워드마크는 3줄이 됐다.
+     좁은 화면에서는 위아래로 쌓는다 — 접히는 것보다 쌓는 것이 낫다. */
+  .site-head {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-3);
+  }
+  .wordmark {
+    font-size: 1.15rem;
+  }
+  /* 세로로 쌓았으니 폭에 여유가 있다. 워드마크를 한 줄로 편다 */
+  .wordmark span {
+    display: inline;
+  }
+  .nav {
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    gap: var(--space-2);
+    letter-spacing: 0.04em;
+    padding-top: 0;
+  }
+  /* 버튼 라벨이 2줄로 접히면 하드 게이트 6 위반이다.
+     좌우 패딩을 줄이고 줄바꿈을 막는다. */
+  .btn {
+    padding-inline: var(--space-4);
+    white-space: nowrap;
+  }
+  /* 히어로 사진 셋을 세로로 세우면 화면이 너무 길어진다.
+     가장 작은 것 하나만 남기고 나머지는 갤러리에서 다시 보여준다. */
+  .hero-photos {
+    aspect-ratio: 3 / 4;
+  }
+  .ph-b {
+    display: none;
+  }
+  .ph-a {
+    left: 0;
+    width: 78%;
+  }
+  .ph-c {
+    top: 58%;
+    width: 62%;
+  }
+}
--- a/apps/site/public/work/thursday-flowers/styles/tokens.css
+++ b/apps/site/public/work/thursday-flowers/styles/tokens.css
@ -0,0 +1,84 @@
+/*
+  목요일의 화원 — 디자인 토큰
+  전부 3단계에서 확정한 값이고, 근거는 design.md 에 있다.
+
+  값의 출처는 취향이 아니라 실측이다.
+  Aesop(#FFFEF2) · Sarah Winward(#F8F7F3) · Cereal(#F7F6EF) 세 곳이
+  전부 순백을 피하고 따뜻한 오프화이트를 쓴다. 글자도 순검정이 아니다.
+*/
+:root {
+  /* ── 색 ──────────────────────────────────────────────
+     강조색은 하나다. 그리고 **면이 아니라 점**으로만 쓴다.
+     꽃 사진에는 이미 온갖 색이 들어 있어서, 화면에 색을 더 칠하면
+     사진과 싸운다. 링크·라벨·구분선 정도가 강조색이 쓰이는 전부다. */
+  --paper: #f8f6f0;
+  --paper-deep: #f1ede4; /* 섹션 하나만 살짝 눕힌다. 리듬용 */
+  --ink: #2a2723;
+  --ink-muted: #6b655c;
+  --ink-faint: #a09889;
+  --accent: #7c4a3f; /* 마른 장미. 꽃의 초록과 충돌하지 않는다 */
+  --line: #ddd7ca;
+
+  /* ── 타입 ────────────────────────────────────────────
+     크기를 4종으로 묶는다. Aesop 이 3종(31/14/12), Cereal 이 2종(12/11)이었다.
+     종류를 늘리면 위계가 아니라 소음이 된다.
+
+     자간은 크기에 따라 **방향이 뒤집힌다**(Kinfolk 실측).
+       50px → -0.5px(-1%)   ·   15px → +0.15px(+1%)
+     큰 글자는 조여서 덩어리로, 작은 글자는 풀어서 낱글자로 읽히게 한다. */
+  --font-display: "MaruBuri", "Nanum Myeongjo", Georgia, serif;
+  --font-body: "Pretendard", -apple-system, "Segoe UI", sans-serif;
+
+  /* 가장 긴 줄이 "그 주에 좋은 꽃만"(한글 7 + 공백 2 ≒ 7.7em)이다.
+     세로 라벨이 왼쪽에서 60px 을 먹으므로 텍스트 칼럼은 화면 폭의 절반보다 좁다.
+     1024px 에서 55.7px 로 잡히자 딱 넘쳐 3줄이 됐다(카운트 규칙 위반).
+     기울기를 낮춰 전 구간에서 2줄을 유지한다. */
+  --step-display: clamp(2.2rem, 1.3rem + 2.9vw, 4.2rem);
+  --step-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
+  --step-body: 1rem;
+  --step-label: 0.75rem;
+
+  --track-display: -0.02em;
+  --track-lead: -0.005em;
+  --track-body: 0;
+  --track-label: 0.14em;
+
+  /* 웨이트는 둘이면 충분하다. 굵기로 소리치지 않는다.
+     큰 글자일수록 가늘게 — Aesop 의 31px 이 400 이었고 12px 라벨이 700 이었다. */
+  --weight-regular: 400;
+  --weight-bold: 700;
+
+  --leading-tight: 1.2;
+  --leading-body: 1.85; /* 한글은 라틴보다 넉넉해야 한다. 받침 때문에 줄이 붙어 보인다 */
+
+  /* 한글 본문은 25~35자가 읽기 폭이다. 라틴 기준 65자를 그대로 쓰면 너무 넓다 */
+  --measure: 32ch;
+
+  /* ── 간격 ────────────────────────────────────────────
+     여백이 콘텐츠다. 섹션 간격을 본문 간격의 5배 이상으로 벌린다. */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2.5rem;
+  --space-6: 4rem;
+  --space-7: 6.5rem;
+  --space-8: clamp(6rem, 4rem + 8vw, 11rem); /* 섹션 사이 */
+
+  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
+  --container: 1240px;
+
+  /* ── 모션 ────────────────────────────────────────────
+     R1(sarahwinward.com)의 스크롤 이동량을 쟀더니 **0px** 이었다.
+     하이엔드 플로럴은 움직이지 않는다. 등장만 조용히 처리한다. */
+  --dur-slow: 900ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --rise: 10px;
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --ink-muted: #4a453e;
+    --line: #b9b0a0;
+  }
+}