/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V4
 * Hallmark · genre: editorial (light) · macrostructure: Marquee Hero (v4 "paper & probe", in-place copy redesign) · theme: custom
 * custom vibe: "따뜻한 종이, 점묘로 찍힌 탐사선" · paper oklch(96.5% 0.007 90) · ink oklch(23% 0.016 260) · accent amber oklch(65% 0.155 58)
 * display: Fraunces / Noto Serif KR · body: IBM Plex Sans KR · axes: light / high-contrast-serif / warm
 * hero: motto "Make it simple." (user, 2026-10-15) → --text-display, two-word diagonal
 * sections: hero · intro · what we do ×3 (Software / AX·DX / Embedded — dots: code → loss → chip) · work ×3 · how ×3 · finale · footer
 * nav: N9 edge-aligned minimal + lang toggle · footer: Ft2 inline single line
 * enrichment: NASA Voyager point cloud + three.js morph (scroll-driven, pointer tilt) · moon rock dither (Poly Haven CC0)
 * motion: scroll-scrubbed morph · hero mask entrance · melt drip · reveal on scene text, cases, ways — reduced-motion: static poses
 * user-requested exceptions: blend-invert cursor ring (anti-pattern 'cursor follower' kept on request)
 * contrast: pass (40–41) · nav: N9 · footer: Ft2 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · mobile: pass (34, 49, 50–57) · icons: pass (30)
 * i18n: EN default · KO toggle (localStorage, <html lang> swap, alt/aria localized)
 */

/* ── base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* cursor: 블렌드 반전 원 — JS 팔로워(.cursor)가 그린다; fine-pointer에서만 네이티브 커서 숨김 */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.cursor { position: fixed; left: 0; top: 0; width: 22px; height: 22px;
  border-radius: 50%; background: transparent; border: 1.5px solid var(--color-invert);
  mix-blend-mode: difference;
  pointer-events: none; z-index: var(--z-cursor);
  translate: -50% -50%; scale: 1;
  transition: scale var(--dur-short) var(--ease-out); will-change: transform; }
.cursor.is-link { scale: 1.9; }
.cursor.is-hidden { scale: 0; }
/* scroll-behavior: smooth 금지 — ScrollTrigger.refresh()가 측정 중 스크롤을 옮기는데, 부드러운 스크롤이면
   그 이동이 애니메이션이 되어 핀 시작점이 '현재 스크롤 위치만큼' 어긋난다. 앵커 이동은 main.js에서 처리 */
html { overflow-x: clip; }
body { overflow-x: clip; margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65;
  font-weight: 400; -webkit-font-smoothing: antialiased; }

h1, h2, h3, .finale__a, .finale__b { overflow-wrap: anywhere; min-width: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 500; margin: 0;
  word-break: keep-all; overflow-wrap: anywhere; min-width: 0; }
p, li { word-break: keep-all; }
p { margin: 0; }
a { color: var(--color-ink); }
b { font-weight: 700; }
em { font-style: normal; }

.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-nav);
  background: var(--color-paper-2); color: var(--color-ink); padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm); font-size: var(--text-sm); translate: 0 -300%; }
.skip:focus-visible { translate: none; }

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

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

/* ── nav · N9 minimal + language ──────────────────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-lg) var(--page-gutter) var(--space-xl); pointer-events: none;
  background: linear-gradient(to bottom, var(--color-paper) 45%, transparent); }
.nav__mark { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md);
  letter-spacing: -0.01em; pointer-events: auto; }
.nav__link { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none;
  padding: var(--space-xs) var(--space-sm); min-height: 2.25rem; display: inline-flex; align-items: center;
  white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); }
.nav__link:hover { color: var(--color-ink); }
@media (max-width: 48rem) { .nav__link { display: none; } }
.nav__right { display: flex; align-items: center; gap: var(--space-sm); pointer-events: auto; }
.lang { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  color: var(--color-muted); background: none; border: 0; cursor: pointer;
  padding: var(--space-xs) var(--space-sm); min-height: 2.25rem; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-rule-strong);
  transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); }
.lang:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.lang:active { translate: 0 1px; }
.lang:disabled { opacity: 0.55; cursor: not-allowed; }
.nav__cta { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink);
  text-decoration: none; white-space: nowrap;
  background: transparent; border: 1px solid var(--color-rule-strong);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); min-height: 2.25rem;
  display: inline-flex; align-items: center; line-height: 1;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.nav__cta:hover { background: var(--color-paper-2); border-color: var(--color-muted); }
.nav__cta:active { translate: 0 1px; }

/* ── sticky pins: 텍스트가 따라오는 동안 점들이 길게 비행한다 ── */
.pin { position: sticky; top: 0; min-height: 100dvh;
  display: grid; align-content: center; }

/* ── hero · type behind the probe ─────────────────── */
/* 긴 스크롤 구간은 svh(고정) — dvh는 모바일 주소창이 접힐 때마다 커져서
   스크롤 도중 문서가 ~1000px 늘어나고 점묘 앵커·핀 위치가 어긋난다. 고정 화면(.pin)만 dvh. */
.hero { position: relative; height: 520svh; overflow: clip; }
.hero__pin { padding: var(--space-2xl) 0 var(--space-3xl); }
/* 모토 "Make it simple." — 두 줄로 크게, 보이저가 떠 있는 오른쪽 위를 비워 둔다. */
.hero__display { position: relative; z-index: 1;
  padding: 0 var(--page-gutter);
  font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.025em;
  max-width: 100%; }
/* 모토 두 단어는 왼쪽에 쌓는다 — 오른쪽 위는 보이저 자리 */
.hero__display .hero__mask { max-width: min(100%, 9em); overflow-wrap: anywhere; min-width: 0; }
.hero__display .hero__mask:last-child { margin-top: 0.02em; }
.hero__line { text-wrap: balance; }
.hero__mask { display: block; overflow: clip; overflow-clip-margin: 1.2em; padding-block: 0.06em; }
.hero__line { display: block; }
.hero__melt { display: inline; }

.hero__dot { color: var(--color-accent); }
/* the particle object rides fixed above the page, below the nav */
.stage3d { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.stage3d canvas { width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 900ms var(--ease-out); }
.stage3d.is-ready canvas { opacity: 1; }
.hero__meta { position: relative; z-index: 1; padding: 0 var(--page-gutter);
  margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-neutral);
  font-weight: 500; }
.hero__caption { position: absolute; z-index: 3; right: var(--page-gutter);
  bottom: var(--space-3xl); max-width: 45ch;
  font-size: var(--text-sm); line-height: 1.7; color: var(--color-muted); text-align: right; }
.hero__caption b { font-family: var(--font-display); font-weight: 600; }
@media (max-width: 40rem) {
  .hero { height: 400svh; }
  .hero__caption { position: static; margin-top: var(--space-xl); text-align: left;
    padding: 0 var(--page-gutter); }
}
/* 세로 태블릿: 캡션을 구석 고정에서 흐름으로 — 오브젝트는 글 아래 남은 띠에 앉는다 (hero3d) */
@media (min-width: 40.01rem) and (max-width: 56.25rem) and (orientation: portrait) {
  .hero__caption { position: static; margin: var(--space-xl) var(--page-gutter) 0 auto; }
}
/* 아주 좁은 화면(320급): 두 단어라도 'simple.'이 화면 폭을 넘지 않게 */
@media (max-width: 21.25rem) {
  .hero__display { font-size: 2.6rem; }
}

/* ── editorial lede ───────────────────────────────── */
.intro { padding: var(--space-3xl) var(--page-gutter); border-top: var(--rule-hair) solid var(--color-rule); }
.intro__lede { max-width: var(--measure); font-size: var(--text-md); line-height: 1.8;
  color: var(--color-muted); }
.intro__refusal { display: block; margin-top: var(--space-md); color: var(--color-ink); font-weight: 500; }

/* ── section heads ────────────────────────────────── */
.sect { padding-bottom: var(--space-lg); }
.head-hang { padding: var(--space-3xl) var(--page-gutter) var(--space-lg); }
.head-hang h2 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
.head-hang__lead { margin-top: var(--space-sm); max-width: var(--measure);
  font-size: var(--text-md); line-height: 1.6; color: var(--color-neutral); }
.head-hang h2::before { content: ""; display: inline-block; width: 0.3em; height: 0.3em;
  background: var(--color-accent); border-radius: 2px; margin-inline-end: 0.5ch;
  vertical-align: 0.08em; }

/* ── 세 분야 · 오브젝트가 좌우로 오가는 고정 장면 ── */
.scene { height: 340svh; border-top: var(--rule-hair) solid var(--color-rule); }
.svc__label { display: flex; align-items: baseline; gap: var(--space-sm); margin-bottom: var(--space-sm);
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.svc__n { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0; color: var(--color-numeral);
  font-variant-numeric: tabular-nums; }
.svc__lead { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink);
  font-weight: 500; max-width: 26ch; }
.svc__tags { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.svc__tags li { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap;
  border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm); }
.scene .pin { padding: var(--space-3xl) var(--page-gutter); }
.scene__text { max-width: min(100%, 40rem); min-width: 0; }
@media (min-width: 40.01rem) and (max-width: 80rem) { .scene__text { max-width: min(100%, 31rem); } }
.scene__title { overflow-wrap: anywhere; }
.scene__text::before { content: ""; display: block; width: 7rem; height: 3px;
  border-radius: 2px; margin-bottom: var(--space-lg);
  background: linear-gradient(to right,
    var(--color-accent) calc(var(--p, 0) * 100%),
    var(--color-rule) calc(var(--p, 0) * 100%)); }
.scene--flip .scene__text { margin-inline-start: auto; }
.scene__title { font-size: clamp(2.2rem, 5vw, 4.4rem); font-weight: 500; letter-spacing: -0.01em;
  line-height: 1.1; text-wrap: balance; }
.scene__desc { margin-top: var(--space-md); color: var(--color-neutral);
  font-size: var(--text-md); line-height: 1.7; max-width: 45ch; }
@media (max-width: 40rem) and (max-height: 43.75rem) {
  .scene .pin { padding-top: 11svh !important; }
  .svc__label { margin-bottom: var(--space-2xs); }
  .scene__title { font-size: 1.85rem; }
  .svc__lead { margin-top: var(--space-xs); font-size: var(--text-base) !important; }
  .scene__desc { margin-top: var(--space-xs); font-size: 0.875rem !important; line-height: 1.55; }
  .svc__tags { margin-top: var(--space-sm); }
  .svc__tags li { font-size: var(--text-xs); }
  .scene__text::before { margin-bottom: var(--space-sm); }
}
@media (max-width: 40rem) {
  .scene { height: 300svh; }
  .svc__lead { font-size: var(--text-md); }
  .scene__desc { font-size: var(--text-base); }
  /* 휴대폰: 글은 위에 두고 아래를 점묘 오브젝트에 내준다 */
  .scene .pin { align-content: start; padding-top: 18svh; }
  .scene--flip .scene__text { margin-inline-start: 0; }
}

/* ── 함께한 일 · 세 칸 ─────────────────────────────── */
.cases { list-style: none; margin: 0; padding: 0 var(--page-gutter);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.case { border-top: 2px solid var(--color-ink); padding-top: var(--space-md); min-width: 0; }
.case__client { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent-deep); }
.case__title { margin-top: var(--space-sm); font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.2; }
.case__desc { margin-top: var(--space-sm); color: var(--color-neutral); max-width: 42ch; }
.case__tags { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.cases__note { padding: var(--space-lg) var(--page-gutter) 0; font-size: var(--text-xs); color: var(--color-neutral); }
@media (max-width: 56rem) { .cases { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* ── 일하는 방식 · 세 원칙 ─────────────────────────── */
.ways { list-style: none; margin: 0; padding: 0 var(--page-gutter) var(--space-2xl);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.way { min-width: 0; }
.way__n { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1;
  color: var(--color-numeral); font-variant-numeric: tabular-nums; }
.way__title { margin-top: var(--space-md); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.01em; }
.way__desc { margin-top: var(--space-xs); color: var(--color-neutral); max-width: 36ch; }
@media (max-width: 48rem) { .ways { grid-template-columns: 1fr; } }

/* ── finale · 대각선 타이포 사이에 실물 오브젝트 ── */
.finale { position: relative;
  padding: 22svh var(--page-gutter) var(--space-2xl);
  display: grid; align-content: start; }
.finale__a, .finale__b { font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 5.4vw, 4.6rem); line-height: 1.0; letter-spacing: -0.02em;
  position: relative; z-index: 2; }
.finale__a { text-align: right; margin-inline-start: auto; }
.finale__b { text-align: left; margin-inline-end: auto; margin-top: 17svh; }
.finale__contact { margin-top: var(--space-3xl) !important; }
.finale__sub { position: relative; z-index: 2; margin-top: var(--space-2xl); max-width: 40ch;
  font-size: var(--text-md); line-height: 1.6; color: var(--color-neutral); }
.finale__object { position: absolute; z-index: 1; pointer-events: none;
  left: 55%; top: 42%; translate: -50% -50%;
  width: min(24rem, 46vw); aspect-ratio: 1 / 0.86; }
.finale__object canvas { width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 900ms var(--ease-out); }
.finale__object.is-ready canvas { opacity: 1; }
.finale__contact { position: relative; z-index: 2; margin-top: var(--space-3xl);
  display: flex; align-items: baseline; gap: var(--space-lg); flex-wrap: wrap; }
.contact__mail { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: var(--text-mail);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.07em;
  text-decoration-color: var(--color-rule-strong); overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-micro) var(--ease-out),
              text-decoration-thickness var(--dur-micro) var(--ease-out); }
.contact__mail:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.contact__mail:active { translate: 0 1px; }
.contact__arrow { color: var(--color-accent-deep); }
.copy { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted);
  background: transparent; border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md);
  cursor: pointer; white-space: nowrap; min-height: 2.25rem;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out); }
.copy:hover { border-color: var(--color-muted); color: var(--color-ink); background: var(--color-paper-2); }
.copy:active { transform: translateY(1px); }
.copy:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.copy[data-state="copied"] { color: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.copy:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 40rem) {
  .finale { padding-top: 17svh; }
  .finale__b { margin-top: 24svh; }
  .finale__object { left: 50%; width: 52%; top: 22svh; translate: -50% 0; }
}

/* ── 멜트 타이포 (피날레) ── */
.finale__a, .finale__b { filter: url(#melt); }
.finale__a .drip, .finale__b .drip,
.hero__melt .drip { display: inline-block; will-change: transform; }
/* 단어 래퍼는 흐름에 남겨 단어 사이 공백을 보존한다 */
.dripword { display: inline-block; white-space: nowrap; }

/* ── 디더 밴드 · 실사를 인쇄망점으로 ── */
.band { padding: var(--space-3xl) var(--page-gutter) 0; max-width: 46rem; }
.band img { display: block; width: 100%; height: auto;
  image-rendering: pixelated; }
.band__cap { margin-top: var(--space-sm); font-size: var(--text-xs);
  color: var(--color-neutral); }

/* ── footer · Ft2 inline single line ──────────────── */
.foot { border-top: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-xl) var(--page-gutter) calc(var(--space-xl) + env(safe-area-inset-bottom)); }
.foot__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-lg);
  font-size: var(--text-xs); color: var(--color-neutral); }
.foot__mark { font-family: var(--font-display); color: var(--color-muted); font-weight: 600; }
/* 손가락 터치 영역 44px — 글자 크기는 그대로, 위아래 여백으로만 키운다 */
.foot a { color: var(--color-neutral); text-underline-offset: 2px; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot a:hover { color: var(--color-ink); }
.foot__credit { margin-inline-start: auto; }

/* ── reveal-once ──────────────────────────────────── */
body.js .reveal { opacity: 0; transform: translateY(10px); }
body.js .reveal.in { opacity: 1; transform: none;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms); }

/* ── reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  body.js .reveal { opacity: 1; transform: none; }
}