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

/* 유동 타입 스케일 — 예전 clamp(0.9rem, 1.2vw, 1.05rem) 꼴은 폰 폭(390px)에서
   1.2vw = 4.7px라 가운데 항이 하한보다 항상 작아, 모바일에선 유동이 아니라
   고정 14.4px로 주저앉았다. rem 기준선 + vw 기울기 꼴로 바꿔 실제로 구간을 채운다. */
:root {
  --text-xs:   clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);
  --text-body: clamp(1rem,      0.9rem  + 0.5vw,  1.05rem);
  --text-head: clamp(1.6rem,    2.8vw,            2.6rem);

  /* 노치·홈 인디케이터 여백 — viewport-fit=cover라 고정 요소가 그 아래로 파고든다 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html { scroll-behavior: smooth; background: #1c1c1e; overscroll-behavior: none; }
html, body { overscroll-behavior: none; }

body {
  color: #e8e8e8;
  font-family: var(--font-body);
  font-weight: 300;
  min-height: 600vh;
  padding: clamp(1rem, 3vw, 2.5rem);
  /* 한국어: 어절 단위로만 줄바꿈 (좁은 폭에서 단어 중간 끊김 방지).
     끊을 데 없는 긴 토큰은 break-word로 흘려보낸다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* 배경(그라디언트 + 그레인) — 예전에는 body에 background-attachment: fixed로
 * 붙어 있었다. 그러면 배경을 화면에 붙박아 두려고 브라우저가 스크롤할 때마다
 * 배경을 다시 칠하고, 스크롤이 메인 스레드에 묶인다(이 페이지는 600vh라 스크롤이 길다).
 * attachment:fixed의 페인팅 영역이 곧 뷰포트이므로, 뷰포트 크기의 고정 레이어로
 * 옮기면 칠해지는 픽셀은 그대로면서 다시 칠할 이유가 없어진다.
 * 배경 자체는 grain.css의 .grain-gradient가 그대로 담당한다(블렌드/타일 동일). */
#bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: paint;
}

/* 블롭 캔버스: 화면 고정 */
#canvas-holder {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0; /* 스크롤 0vh~20vh 구간에서 about.js가 페이드인 제어 */
}
#canvas-holder canvas { display: block; }

/* 섹션 가운데 등장하는 도식 (개념·시각화·색 공용) */
#idea-diagram,
#summary-diagram,
#color-diagram,
#reading-diagram,
#bbox-diagram {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(42rem, 62vw);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  transition: opacity 600ms ease;
}
#idea-diagram svg,
#summary-diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
/* 세로 도식은 폰 전용 — ≤640 블록에서 가로 SVG와 자리를 맞바꾼다 */
#idea-diagram .idea-vert { display: none; }

/* reading-diagram: example sentence + ranked list */
#reading-diagram {
  padding: 1.8rem 2rem;
  box-sizing: border-box;
  background: rgba(255,255,255,0.19);
  border-radius: 1rem;
}
.rd-quote {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(232,232,232,0.65);
  margin-bottom: 1.4rem;
}
.rd-w {
  font-style: normal;
  font-weight: 600;
}
.rd-sep {
  height: 1px;
  background: rgba(232,232,232,0.12);
  margin-bottom: 1.2rem;
}
.rd-ranks { display: flex; flex-direction: column; gap: 0.65rem; }
.rd-rank {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
}
.rd-n {
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: rgba(232,232,232,0.6);
  width: 0.75rem;
  text-align: right;
  flex-shrink: 0;
}
.rd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rd-name {
  flex: 1;
  font-family: var(--font-body);
  color: rgba(232,232,232,0.75);
}
.rd-ct {
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: rgba(232,232,232,0.45);
}

/* bbox-diagram: Three.js canvas — width is set by JS, not CSS */
#bbox-diagram { width: auto; }
#bbox-canvas {
  display: block;
  border-radius: 1rem;
  opacity: 0;
  transition: opacity 0.8s ease;
  max-width: 100% !important;
}
#bbox-canvas.loaded { opacity: 1; }
.bbox-wrap { position: relative; }
.bbox-ann {
  position: absolute;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: rgba(232,232,232,0.8);
  font-family: var(--font-body);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s ease 0.3s;
}
.bbox-wrap.loaded .bbox-ann { opacity: 1; }
.bbox-ann-line {
  width: 2.8rem;
  height: 1px;
  background: rgba(232,232,232,0.45);
  flex-shrink: 0;
}
.bbox-ann-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(232,232,232,0.7);
  flex-shrink: 0;
}
.bbox-ann-tpu {
  left: 58%;
  top: 14%;
  flex-direction: row-reverse;
}
.bbox-ann-acrylic {
  left: 10%;
  top: 54%;
}
#bbox-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
#bbox-loader.hidden { opacity: 0; }
#bbox-loader span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: rgba(232,232,232,0.3);
  animation: dot-pulse-ab 1.2s ease-in-out infinite;
}
#bbox-loader span:nth-child(2) { animation-delay: 0.2s; }
#bbox-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse-ab {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}
/* 시각화: 같은 답이라도 다른 눈꽃 3종 */
#summary-diagram { width: min(31rem, 55vw); left: calc(50% - 5rem); }
#summary-diagram .vis-snows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.125rem 0.25rem;
  justify-items: center;
  align-items: center;
}
#summary-diagram .vis-snow { width: 19.5rem; max-width: 19.5rem; }
#summary-diagram .vis-snow:first-child { grid-column: 1 / -1; width: 19.5rem; max-width: 19.5rem; }
#summary-diagram .vis-snow canvas { width: 100%; height: auto; display: block; }
#summary-diagram .vis-snow:not(:first-child) { margin-top: -5.97rem; }
/* 색: 중앙 팔레트는 크게 */
#color-diagram .swatch-grid {
  max-width: none;
  grid-template-columns: repeat(6, 1fr);
  font-size: 0.85rem;
  gap: 1.2rem 1.4rem;
}
#color-diagram .swatch-grid span { grid-column: span 2; }
#color-diagram .swatch-grid i { height: 1rem; max-width: none; }

/* 소리 다이어그램: 저음↔고음 비교, 가운데 등장 */
#sound-diagram {
  position: fixed;
  top: 50%;
  left: 50%;
  /* 라벨(absolute)이 아래로 매달리므로 그만큼 위로 올려 시각 그룹을 가운데로 */
  transform: translate(-50%, calc(-50% - 2rem));
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  transition: opacity 600ms ease;
}
/* 행은 항목 박스(=눈꽃 높이) 기준으로 세로 가운데 정렬 → 화살표가 눈꽃 중심선에 옴 */
#sound-diagram .pitch { margin-top: 0; gap: 0; align-items: center; }
#sound-diagram .pitch-item {
  position: relative; /* 라벨 absolute 기준 */
  align-items: center;
  text-align: center;
}
#sound-diagram .pitch-item b { font-size: 1.8rem; }
#sound-diagram .pitch-item em { font-size: 0.78rem; letter-spacing: 0.16em; }
#sound-diagram .pitch-arrow { font-size: 1.8rem; opacity: 0.45; margin: 0 0.9rem; }
/* 예시 눈꽃 (둥근/뾰족) — 항목 높이를 결정하는 유일한 in-flow 요소 */
.pitch-snow { width: 22rem; margin-bottom: 0; }
.pitch-snow canvas { width: 100%; height: auto; display: block; }
/* Low/High 라벨: 흐름에서 빼서 항목 높이에 영향 X, 눈꽃 바로 아래에 배치 */
.pitch-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -2.2rem; /* 눈꽃-텍스트 간격 80% 축소 (투명 여백 보정 포함) */
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
.dg-node {
  fill: rgba(232, 232, 232, 0.92);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 42px;
}
.dg-cap {
  fill: rgba(232, 232, 232, 0.55);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 1px;
}
.dg-line { fill: none; stroke: rgba(232, 232, 232, 0.45); stroke-width: 1.5; }

/* ───────── 좌측 고정 컬럼 ───────── */
#left-col {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  padding: 2.4rem 2.6rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

/* 우측 네비 — Corners 스타일 (텍스트 + 가로선) */
#left-nav {
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.1rem;
}
#left-nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: rgba(232, 232, 232, 0.58);
  text-decoration: none;
  transition: color 220ms ease;
  white-space: nowrap;
  cursor: pointer;
}
/* Visualization 하위 카테고리 (1·2·3) — 작게, 안쪽으로 들여쓰기 */
#left-nav .nav-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
#left-nav .nav-sub a {
  font-size: 1rem;
  margin-right: 2rem;
}
#left-nav .nav-num {
  opacity: 0.55;
  margin-right: 0.3rem;
  font-variant-numeric: tabular-nums;
  min-width: auto;
}
#left-nav a span {
  display: inline-block;
}
#left-nav a::after {
  content: "";
  display: inline-block;
  height: 1px;
  width: 1.75rem;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.65;
  transition: width 220ms ease, opacity 220ms ease;
}
#left-nav a:hover {
  color: rgba(232, 232, 232, 0.78);
}
#left-nav a.active {
  color: rgba(232, 232, 232, 0.9);
}
#left-nav a.active::after {
  width: 3.25rem;
  opacity: 1;
}

/* ───────── 하단 좌측 고정 섹션 텍스트 ───────── */
#section-text {
  position: fixed;
  bottom: 3rem;
  left: 2.6rem;
  z-index: 5;
  pointer-events: none;
  /* 패널이 겹쳐 쌓이도록 + 길이가 달라도 하단 기준선에 정렬 */
  display: grid;
  grid-template-areas: "stack";
  align-items: end;
}
.st-panel {
  grid-area: stack;
  max-width: 31.25rem;
  opacity: 0;
  transform: translateY(0.875rem);
  transition: opacity 600ms ease, transform 600ms ease;
}
.st-panel.active {
  opacity: 1;
  transform: none;
}
.st-eye {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.42;
  margin-bottom: 0.85rem;
}
.st-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-head);
  line-height: 1.22;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.5);
}
.st-body {
  margin-top: 1.05rem;
  font-size: var(--text-body);
  line-height: 1.82;
  opacity: 0.82;
  max-width: 23.75rem;
  text-wrap: pretty; /* widow/orphan 자동 회피 */
}
.st-body + .st-body {
  margin-top: 0.7rem;
}

/* 감정 카테고리 칩 */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  margin-top: 1.2rem;
  font-size: 0.71875rem;
  opacity: 0.78;
}
.cats span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.02em;
}
.cats i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* 근본 개념 흐름: Fear ↓ Courage ↓ Being genuine
   #idea-diagram의 폰 전용 대체 표현이다. 데스크탑·태블릿에서는 같은 내용을
   SVG 가로 도식으로 보여주므로 기본값은 숨김이고, ≤640 블록에서만 켠다.
   폰에서 SVG를 쓸 수 없는 이유는 그 블록 주석 참고. */
.idea-flow {
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--font-body);
  text-align: left;
}
.idea-flow .node {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.idea-flow .link {
  /* 예전 0.6875rem(11px)은 0.18em 자간이 붙은 대문자라 폰에서 판독이 아슬아슬했다 */
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  line-height: 1.4;
}
.idea-flow .link::before {
  content: "↓\00a0\00a0";
}

/* 감정→색 쌍: 그라데이션 스와치 */
.pairs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.2rem;
  font-size: 0.71875rem;
  opacity: 0.82;
}
.pairs span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  letter-spacing: 0.02em;
}
.pairs i {
  width: 2.25rem;
  height: 0.5rem;
  border-radius: 999px;
  display: inline-block;
  flex-shrink: 0;
}

/* 12개 감정 색 그리드 (4열 3행) */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem 0.7rem;
  margin-top: 1.2rem;
  max-width: 30rem;
  font-size: 0.625rem;
  opacity: 0.88;
}
.swatch-grid span {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.swatch-grid i {
  width: 100%;
  height: 0.4rem;
  border-radius: 999px;
  display: block;
}

/* 저음↔고음 돌기 비교 */
.pitch {
  display: flex;
  align-items: center;
  /* 컨테이너를 4컬럼으로 고정한 폰에서는 이게 없으면 내용이 왼쪽에 붙는다
     (데스크탑은 컨테이너가 내용에 맞춰 줄어들어 영향 없음) */
  justify-content: center;
  gap: 1rem;
  margin-top: 1.4rem;
  font-family: var(--font-body);
}
.pitch-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pitch-item b {
  font-size: 1.05rem;
  font-weight: 400;
}
.pitch-item em {
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}
.pitch-arrow {
  opacity: 0.4;
  font-size: 1.1rem;
}

/* ───────── 애니메이션 전용 구간 (150vh) ───────── */
#sec-anim {
  position: relative;
  min-height: 150vh;
}

/* 애니메이션이 끝나기 전(scrollP<1)엔 텍스트·네비를 숨긴다 */
#section-text,
#left-nav {
  opacity: 0;
  transition: opacity 0.8s ease;
}
#left-nav {
  pointer-events: none;
}
body.text-on #section-text,
body.text-on #left-nav {
  opacity: 1;
}
body.text-on #left-nav {
  pointer-events: auto;
}

/* ───────── 로고: 중앙 대형 → 스크롤 시 상단 중앙 nav로 축소 이동 ───────── */
#nav-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 12;
  pointer-events: none;
  color: #e8e8e8;
  will-change: transform;
}
#nav-logo a {
  display: block;
  pointer-events: auto;
  text-decoration: none;
  color: inherit;
  transform-origin: top center;
  will-change: transform;
}
/* 히어로 크기(450px)로 렌더한 뒤 scale로 축소 → 확대 블러 방지 */
#nav-logo svg { display: block; width: 28.125rem; }
/* about(skip-burst): 애니메이션 없이 작은 로고로 정적 삽입 */
body.skip-burst #nav-logo { padding-top: calc(1.4rem + var(--safe-t)); }
body.skip-burst #nav-logo svg { width: 9.375rem; }

/* 로고 축소 완료 후 등장하는 상단 nav — 좌: Archive / 우: Question */
#about-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6.5rem; /* center(3.25rem) ≈ 축소된 로고의 세로 중심 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  /* 노치/다이나믹 아일랜드 아래로 링크가 파고들지 않게. 로고도 아래
     body.skip-burst #nav-logo가 같은 값만큼 내려 잡아 세로 중심이 맞는다. */
  padding-top: var(--safe-t);
  box-sizing: content-box;
  z-index: 13;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}
#about-topnav .tn-link {
  text-decoration: none;
  color: rgba(232, 232, 232, 0.82);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.06em;
  transition: color 150ms ease;
  /* 글자 높이만으로는 탭 타깃이 24px에 그친다. 세로 패딩으로 44px을 만들고
     좌우 음수 마진으로 되돌려, 보이는 글자 위치는 그대로 둔다. */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  margin: 0 -0.5rem;
}
#about-topnav .tn-link:hover {
  color: #ffffff;
}

/* 스크롤 섹션 — 높이 스페이서 */
.scroll-section {
  min-height: 100vh;
  position: relative;
  z-index: 3;
}

/* Scroll progress bar — thin horizontal line at top of viewport */
#scroll-progress {
  position: fixed;
  /* 노치 아래로 들어가면 진행 바가 상태바에 가려 안 보인다 */
  top: var(--safe-t); left: 0; width: 100%; height: 1px;
  z-index: 20;
  background: rgba(232,232,232,0.06);
  pointer-events: none;
}
#scroll-progress-fill {
  height: 100%; width: 0%;
  background: rgba(232,232,232,0.5);
  transition: width 120ms linear;
}

/* Scroll hint — fades out on first scroll */
#scroll-hint {
  position: fixed;
  bottom: calc(clamp(1.5rem, 5vh, 3rem) + var(--safe-b));
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  color: #e8e8e8;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 800ms ease;
}
#scroll-hint svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
#scroll-hint.hidden { opacity: 0; }

/* 브레이크포인트는 640(폰) / 1024(태블릿) 두 단계로 통일한다.
   예전엔 640·720·900이 섞여 있어 701~900 구간에서는 다이어그램만 줄고 텍스트는
   데스크탑 크기로 남는 식의 어중간한 조합이 나왔다. */

/* Tablet (641–1024px) — nav 유지, diagram 크기 조정 */
@media (max-width: 1024px) and (min-width: 641px) {
  #left-col { padding: 1.9rem 2rem; }
  #left-nav a span { min-width: 5rem; }
  #section-text { left: 1.9rem; bottom: 2.5rem; }
  .st-head { font-size: clamp(1.4rem, 6vw, 2rem); }
  #summary-diagram { width: min(27rem, 48vw); }
  #summary-diagram .vis-snow { width: 16.5rem; max-width: 16.5rem; }
  #summary-diagram .vis-snow:first-child { width: 16.5rem; max-width: 16.5rem; }
  #summary-diagram .vis-snow:not(:first-child) { margin-top: -4.7rem; }
  .pitch-snow { width: 16rem; }
  #sound-diagram .pitch-arrow { margin: 0 1.5rem; }
}

/* Mobile — 우측 nav를 점 레일로 축약, 텍스트 전폭, 다이어그램 축소 */
@media (max-width: 640px) {
  /* 예전엔 #left-col을 통째로 숨겼는데, 이 페이지는 600vh짜리 스크롤이라
     폰에서는 지금 어느 섹션인지·몇 개나 남았는지 알 방법이 2px 프로그레스 바뿐이었다.
     라벨만 감추고 활성 표시(가로선)는 남겨 얇은 점 레일로 쓴다 —
     about.js의 active 토글 로직을 그대로 재사용한다. */
  #left-col {
    display: flex;
    padding: 1rem 0.9rem;
    pointer-events: none; /* 세로 전체를 덮는 컬럼이 스크롤을 가로채지 않게 */
  }
  #left-nav { gap: 0; pointer-events: auto; }
  #left-nav a {
    /* 보이는 건 6~10px짜리 표시선이지만 탭 타깃은 44×44로 확보한다.
       화면 맨 왼쪽 가장자리에 있어 엄지로 누를 때 오차가 큰 자리라, 예전 36×36은
       권장 최소치에 8px 모자랐다. 항목이 6개뿐이어서 세로로 늘려도 레일 전체가
       264px에 그친다. flex-end 정렬이라 선 자체는 계속 오른쪽 끝에 붙는다. */
    min-height: 2.75rem;
    width: 2.75rem;
    justify-content: flex-end;
    gap: 0;
  }
  #left-nav a span { display: none; } /* 라벨은 감추고 표시선만 남긴다 */
  #left-nav a::after { width: 0.6rem; }
  #left-nav a.active::after { width: 1.4rem; }
  #left-nav .nav-sub { gap: 0; margin-top: 0; }
  #left-nav .nav-sub a { margin-right: 0; }
  #left-nav .nav-sub a::after { width: 0.35rem; }
  #left-nav .nav-sub a.active::after { width: 1rem; }

  /* 좌측 끝은 그리드 여백(= body 패딩)에 맞추고, 오른쪽은 섹션 레일 자리를 비운다.
     본문은 어차피 아래에서 4컬럼으로 잘리므로 레일과 겹치지 않는다. */
  #section-text {
    left: var(--grid-margin);
    right: var(--grid-margin);
    /* 2.5rem(40px)은 화면 아래 끝까지 44px밖에 남기지 않아 본문이 바닥에 붙어
       보였다. 60px으로 올려 위쪽 여백(151px)과의 낙차를 줄인다 — 위 도식의
       top: 48% 주석과 한 세트. */
    bottom: calc(3.75rem + var(--safe-b));
  }
  .st-panel { max-width: none; }
  /* 본문 읽기 폭 4컬럼 상한 (390px에서 235px) — 이 페이지는 왼쪽 정렬이라
     margin-inline: auto는 주지 않는다. */
  .st-eye,
  .st-head,
  .st-body { max-width: var(--measure); }
  .st-body { opacity: 0.78; }
  /* 다이어그램: 텍스트 패널과 겹치지 않게 중앙보다 위에 두되, 예전 38%는 아래
     텍스트와의 사이에 270px 가까운 빈 띠를 만들었다. 조금 내려 한 덩어리로 묶는다.

     390×844에서 재 보면 구도가 톱내브(90) · 빈 띠 210 · 도식 · 간격 150 ·
     본문 · 화면 끝까지 44 였다. 위 여백이 아래의 4.8배라 콘텐츠가 위로 붕 뜬 채
     아래만 끝에 붙는다. 도식을 내려 위 띠를 줄여 보면 도식은 세로 중심 기준으로
     놓여 있어(translate -50%) 아래 간격이 같은 양만큼 벌어지기만 한다. 그래서
     top은 그대로 두고, 아래 #section-text의 bottom을 60px으로 올려 바닥에 붙은
     쪽을 떼는 방식으로만 조정한다. 결과 210 / 134 / 60. */
  /* 가운데 그래픽은 예외 없이 4컬럼 폭 · 화면 가운데.
     예전 min(84vw, 23rem)은 390px에서 327px = 사실상 6컬럼 전폭이라 본문(4컬럼)과
     축이 어긋났다. */
  #idea-diagram, #summary-diagram, #color-diagram,
  #reading-diagram, #bbox-diagram, #sound-diagram {
    width: var(--col-4);
    left: 50%;
    right: auto;
    max-width: none;
    top: 41%;
    transform: translate(-50%, -50%);
  }

  /* reading-diagram은 안쪽 여백(좌우 2rem)만큼 글자가 안으로 밀려, 패널을 4컬럼에
     맞추면 정작 읽는 줄은 4컬럼보다 64px 좁아진다. 패널을 여백만큼 넓혀 글자
     블록이 정확히 4컬럼에 놓이게 한다 — 다른 도식의 잉크 기준과 같은 원칙이다. */
  #reading-diagram { width: calc(var(--col-4) + 4rem); }

  /* 개념 도식은 폰에서 SVG 가로 배열을 버리고 세로 스택(.idea-flow)으로 바꾼다.
     SVG는 viewBox가 1000 단위인데 폰에서 컨테이너가 327px로 눌리므로 내부의
     모든 px에 0.327이 곱해진다. 그래서 .dg-cap 22px이 실제로는 7.2px,
     .dg-line stroke 1.5px이 0.49px(서브픽셀)로 렌더돼 캡션은 판독 한계 밑이고
     선 굵기는 기기 배율에 따라 들쭉날쭉했다. 폰트만 키워 되돌리면 이번엔
     "Being genuine" 같은 긴 노드가 가로로 안 들어간다. 세로 스택은 일반 DOM
     텍스트라 배율이 곱해지지 않아 선언한 크기 그대로 나온다. */
  #idea-diagram svg.idea-vert { display: block; }
  #idea-diagram > svg:not(.idea-vert) { display: none; }
  /* 세로 도식 안의 글자·선 크기.
     viewBox가 4컬럼 실치수와 1:1이라 여기 적는 px이 화면 px 그대로다
     (가로 SVG는 viewBox 1000을 327px에 눌러 넣어 0.327배로 줄었었다). */
  /* 글자 크기는 30% 줄인 값이다(19 → 13.3, 12 → 8.4). 노드를 박스에 담고 나니
     박스가 위아래 연결선까지 먹어 들어가 선이 박스 안에서 끝나 보였다 —
     선 좌표(V54 / V102 / V156 / V204)는 SVG에 박혀 있으므로 글자를 줄여 박스를
     물러나게 한다. 자간도 같은 비율로 줄인다(2 → 1.4): 크기만 줄이면 캡션의
     자간이 상대적으로 커져 "TRIGGER = SCREAMING"이 여전히 폭을 다 먹는다. */
  /* 박스 안 노드는 배경이 깔려 대비가 이미 충분하다 — 가로 도식의 400보다
     한 단계 가벼운 300으로 두어 캡션·본문과 같은 결로 읽히게 한다. */
  .idea-vert .dg-node { font-size: 13.3px; font-weight: 300; }
  .idea-vert .dg-cap {
    font-size: 8.4px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }
  .idea-vert .dg-line { stroke-width: 1; }
  /* 노드(Fear / Courage / Being genuine)를 담는 반투명 흰 박스.
     rect 자체는 js/about.js의 fitIdeaNodeBoxes가 글자 폭을 재서 만들어 넣는다 —
     라벨이 언어마다 다르고 웹폰트가 늦게 오면 폭이 또 바뀌기 때문이다. */
  .idea-vert .dg-node-bg rect {
    fill: rgba(255, 255, 255, 0.22);
  }
  /* summary diagram.
     예전엔 폰에서도 기본 규칙의 left: calc(50% - 5rem)이 살아 있어 도식이 왼쪽으로
     80px 밀렸고, 눈꽃 폭이 13.5rem 고정이라 2열(2×216px = 432px)이 컨테이너(343px)를
     넘겨 화면 왼쪽으로 57px 삐져나갔다. 오프셋을 풀고 폭을 셀에 맞춰 상대값으로 준다. */
  /* 눈꽃 캔버스는 그려진 그림 주위에 투명 여백을 크게 두고 있다(_drawSnowCanvas의
     r = 0.44 × 캔버스, 게다가 팔 끝이 반지름 끝까지 가지 않는다) — 실측하면 잉크가
     캔버스 폭의 52~56%밖에 안 된다. 그래서 캔버스를 4컬럼에 맞추면 눈으로 보이는
     그림은 4컬럼의 3/4쯤에서 끝나 옆 그리드와 축이 안 맞는다.
     컨테이너를 그 여백만큼 넓혀, 넘치는 건 투명 픽셀이고 잉크가 정확히 4컬럼을
     차지하게 한다(아래 두 계수는 잉크 경계를 재서 나온 값). */
  #summary-diagram { width: calc(var(--col-4) * 1.294); }
  /* 폭·좌표는 위 공통 규칙(4컬럼 · 가운데)이 담당한다 — 여기선 내부 배치만. */
  #summary-diagram .vis-snow { width: 100%; max-width: none; }
  /* 첫 눈꽃은 2열을 가로지르므로(grid-column: 1 / -1) 50%가 아래 눈꽃과 같은 폭 */
  #summary-diagram .vis-snow:first-child { width: 50%; max-width: none; }
  /* 겹침도 고정값 대신 셀 폭 기준 비율로 — 원래 -3.9rem/13.5rem ≈ -29% */
  #summary-diagram .vis-snow:not(:first-child) { margin-top: -29%; }
  /* 이 도식도 눈꽃이라 위 summary와 같은 이유로 잉크 기준 4컬럼으로 넓힌다 */
  #sound-diagram { width: calc(var(--col-4) * 1.301); top: 37%; }
  /* 눈꽃 2개 + 화살표가 4컬럼을 꽉 채우도록 — 고정 폭 대신 남는 공간을 나눠 갖는다 */
  #sound-diagram .pitch { gap: 0.25rem; width: 100%; }
  #sound-diagram .pitch-item { flex: 1; min-width: 0; }
  .pitch-snow { width: 100%; }
  /* 라벨은 항목 폭 안에서 줄바꿈 — nowrap이면 "날카로운 가시"가 옆 라벨과 겹친다 */
  #sound-diagram .pitch-label { white-space: normal; width: 100%; }
  #sound-diagram .pitch-item em { line-height: 1.3; }
  #sound-diagram .pitch-arrow { margin: 0 -1rem; font-size: 1.1rem; }
  #sound-diagram .pitch-item b { font-size: 1.3rem; }
  #sound-diagram .pitch-item em { font-size: 0.8125rem; }
  /* color swatch — 2열.
     4열→2열로 셀이 두 배 넓어졌는데 폰트는 데스크탑용 0.625rem(10px)이 그대로였다.
     10px + opacity 0.88은 그라데이션 배경 위에서 판독 한계 밑이라 셀 폭이 허용하는
     13px로 올린다(가장 긴 "Identity confusion"이 2열 셀에 그대로 들어간다). */
  #color-diagram .swatch-grid {
    grid-template-columns: repeat(2, 1fr);
    font-size: 0.8125rem;
  }
  #color-diagram .swatch-grid span { grid-column: span 1; }
  /* bbox 어노테이션 — 폰에서 숨김 (캔버스가 너무 작아 겹침) */
  .bbox-ann { display: none; }
  #scroll-hint { display: none; }
  #scroll-progress { height: 2px; }
  /* topnav 폰트 크기 */
  #about-topnav .tn-link { font-size: 0.875rem; }
}

/* ───────── 한국어 전용 보정 ─────────
   about.ko.css를 없애면서 남은, 폰트만으로는 설명되지 않는 차이. */
:lang(ko) .idea-flow .link {
  /* 0.18em은 라틴 소문자 캡션용 값이다. 한글은 글자 자체가 정사각형에 가까워
     같은 자간을 주면 어절이 흩어져 읽힌다(대문자 변환도 한글엔 효과가 없다). */
  letter-spacing: 0.06em;
}
:lang(ko) #about-topnav .tn-link {
  /* 두 글자짜리 한글 라벨은 가로 폭이 42px밖에 안 나온다 */
  justify-content: center;
  min-width: 2.75rem;
}