@import url("tokens.css");

/* ---------- language toggle (ko is the no-JS default) ---------- */
html[lang="ko"] .en, html[lang="en"] .ko { display: none !important; }
html { scroll-behavior: smooth; }
.skip { position: absolute; left: var(--inset); top: -100px; z-index: 10; padding: 0.5rem 0.75rem; background: var(--ink); color: var(--paper); }
.skip:focus { top: var(--s2); }
.nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.sr { position: absolute; left: 1rem; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons — 의뢰가 이 페이지의 목표 행동이라 유일하게 면을 가진 요소다 ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0 1.375rem; border: var(--hair) solid var(--ink); font-size: var(--step-0); font-weight: var(--w-medium); line-height: 1.2; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--paper); color: var(--ink); }
/* 바탕을 채운다: 히어로에서는 입자 위에 놓이므로 투명하면 글자가 먼지에 묻힌다 */
.btn-line { background: var(--paper); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-lg { min-height: 4rem; padding: 0 1.75rem; font-size: var(--step-1); }
.btn-arrow { transition: transform var(--dur-2) var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn[href="#work"]:hover .btn-arrow { transform: translateY(3px); }

/* ---------- hero — DOM owns structure; canvas is material ---------- */
.hero { position: relative; min-height: 88svh; display: grid; grid-template-rows: auto 1fr auto; padding: var(--s3) var(--inset) var(--s4); overflow: hidden; isolation: isolate; }
.hero canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.hero canvas.fx.is-on { opacity: 1; }
.hero > * { position: relative; z-index: 1; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s4); min-height: var(--control); }
.mark { display: inline-block; padding-block: 0.8rem; }
.site-nav { display: flex; gap: var(--s3); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--control); font-size: 0.875rem; font-weight: var(--w-medium); color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.35em; transition: text-decoration-color var(--dur-1) var(--ease); }
.site-nav a:hover { text-decoration-color: currentColor; }
.lang { display: flex; align-items: center; gap: 0.25rem; }
.lang-btn { appearance: none; background: none; border: 0; padding: 0.7rem 0.4rem; font: inherit; font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); cursor: pointer; min-height: var(--control); }
.lang-btn[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
.lang-sep { color: var(--ink-2); }
/* margin-left keeps the pair at the right edge on the second row too: space-between puts a lone item on a wrapped row at the start */
.topbar-right { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }
/* the stop control for the hero motion — WCAG 2.2.2. hero.js owns its state */
.motion-btn { appearance: none; background: none; border: 0; padding: 0.7rem 0.4rem; font: inherit; font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); cursor: pointer; min-height: var(--control); }
.motion-btn[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }

.name { align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); align-items: end; padding-block: var(--s3) var(--s2); }

/* 계기판 — 히어로 오른쪽의 빈 절반을 실측값으로 채운다. 장식 숫자가 아니라 지금 도는 시뮬레이션의 값이다 */
.gauge { width: 17.5rem; padding-bottom: 0.4rem; font-size: 0.8125rem; }
.gauge[hidden] { display: none; }
.gauge-title { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: var(--hair) solid var(--ink); font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; font-weight: var(--w-medium); }
.gauge-live { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); color: var(--ink-2); }
.gauge-live::before { content: ""; width: 0.5rem; height: 0.5rem; border: var(--hair) solid var(--ink); }
.gauge[data-state="live"] .gauge-live::before { background: var(--ink); }
.gauge-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding-block: 0.45rem; border-bottom: var(--hair) solid var(--line); }
.gauge-rows dt { color: var(--ink-2); }
.gauge-rows dd { margin: 0; font-family: var(--font-mono); text-align: right; }
.gauge-of { color: var(--ink-2); }
.gauge-scene { margin-left: 0.5rem; font-family: var(--font); font-weight: var(--w-medium); }
.gauge-bar { display: block; height: 2px; margin-top: 0.6rem; background: var(--line); }
.gauge-bar > span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.gauge-hint { margin-top: 0.6rem; font-size: var(--step--1); color: var(--ink-2); }
/* when the particle body is on, the DOM name goes transparent: still selectable, indexable, read aloud — the particles are the paint */
.hero canvas.fx.is-on ~ .name h1 > .ko, .hero canvas.fx.is-on ~ .name h1 > .en { color: transparent; }
.name h1 { font-size: var(--display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--w-black); margin-left: -0.04em; }
.name .sub { display: block; margin-top: var(--s2); font-size: 1.0625rem; font-weight: var(--w-medium); letter-spacing: 0.04em; color: var(--ink-2); margin-left: 0.04em; }
html[lang="en"] { --display: clamp(4rem, 11vw, 10rem); } /* 'Yun Chan' = 8 glyphs vs 2 → same visual width */

/* 첫 화면의 아래 절반: 왼쪽은 이 사람이 무엇을 해 주는지와 의뢰, 오른쪽은 그 말을 받치는 소속 */
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s5); row-gap: var(--s4); align-items: end; }
.pitch { font-size: var(--pitch); line-height: 1.08; letter-spacing: -0.035em; font-weight: var(--w-bold); }
.pitch-sub { margin-top: var(--s3); max-width: var(--measure); font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
/* 문장을 받치는 사실 세 개 — 숫자·이름이 들어 있는 근거만 */
.proof { display: flex; flex-wrap: wrap; margin-top: var(--s3); font-size: 0.9375rem; font-weight: var(--w-medium); }
.proof li { padding-inline: 0.85rem; border-left: var(--hair) solid var(--line); }
.proof li:first-child { padding-left: 0; border-left: 0; }
.ledger { display: grid; grid-template-columns: max-content max-content max-content; column-gap: var(--s3); row-gap: 0.15rem; align-items: baseline; font-size: 1.0625rem; line-height: 1.5; padding-bottom: 0.9rem; }
.ledger dt { grid-column: 1; font-weight: var(--w-medium); }
.ledger dd { margin: 0; }
.ledger .role { grid-column: 2; color: var(--ink-2); white-space: nowrap; }
.ledger .note { grid-column: 3; font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); }
.ledger .note a { display: inline-block; padding-block: 0.35rem; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--line); }
.ledger .note a:hover { text-decoration-color: currentColor; color: var(--ink); }

/* ---------- section scaffold — label + hairline. 섹션은 히어로와 같은 왼쪽 선(inset)을 쓴다 ---------- */
main > section { padding: var(--s7) var(--inset) 0; }
main > section.cases { padding-top: var(--s3); }
main > section:last-child { padding-bottom: var(--s7); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-bottom: var(--s2); border-bottom: var(--hair) solid var(--ink); }
.sec-num { font-size: var(--meta); letter-spacing: var(--track-meta); font-weight: var(--w-medium); color: var(--ink); }
.sec-note { font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); }
.sec-note a { display: inline-block; padding-block: 0.4rem; }
/* 장면이 바뀌었음을 크기로 말한다. 작은 섹션은 한 단계 낮춘다 */
.sec-title { margin-top: var(--s4); font-size: var(--sec-title); font-weight: var(--w-black); line-height: 0.92; letter-spacing: -0.05em; }
.sec-title.is-small { font-size: clamp(2.25rem, 1rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.04em; }

/* ---------- 밤 장면 — 같은 역할 토큰을 덮어써 부품이 그대로 반전된다 ---------- */
.is-night { --paper: var(--night-paper); --paper-2: var(--night-paper-2); --ink: var(--night-ink); --ink-2: var(--night-ink-2); --line: var(--night-line); --accent: var(--night-ink); --focus: 2px solid var(--night-ink); background: var(--paper); color: var(--ink); }
main > section.is-night { padding-bottom: var(--s7); }
main > section.is-night + section { padding-top: var(--s7); }
/* 밤 장면 바로 앞의 종이 섹션은 마지막 행이 검은 면에 붙지 않게 아래를 연다 */
main > section:not(.is-night):has(+ section.is-night) { padding-bottom: var(--s7); }

/* ---------- 대표 사례 — 글 5 : 그림 7, 두 번째는 뒤집는다 ---------- */
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s5); row-gap: var(--s4); align-items: start; padding-block: var(--s5); border-bottom: var(--hair) solid var(--line); }
.case.is-flip .case-text { order: 2; }
.case-index { font-size: var(--case-index); font-weight: var(--w-black); line-height: 0.85; letter-spacing: -0.05em; }
.case-name { margin-top: var(--s3); font-size: var(--title); font-weight: var(--w-bold); line-height: 1.05; letter-spacing: -0.03em; }
.case-amp { color: var(--ink-2); font-weight: var(--w-regular); }
.case-kicker { margin-top: var(--s2); font-size: 0.9375rem; font-weight: var(--w-medium); color: var(--ink-2); }
.case-lead { margin-top: var(--s3); max-width: var(--measure); font-size: var(--step-1); line-height: 1.55; }
.case-facts { margin-top: var(--s4); border-top: var(--hair) solid var(--line); }
.case-facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--s2); padding-block: 0.8rem; border-bottom: var(--hair) solid var(--line); }
.case-facts dt { padding-top: 0.2rem; font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); }
.case-facts .is-key dd { font-weight: var(--w-medium); }
.case-facts dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.case-link { display: inline-flex; align-items: center; gap: 0.35em; min-height: var(--control); margin-top: var(--s3); font-weight: var(--w-medium); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--line); }
.case-link:hover { text-decoration-color: currentColor; }
.case-link.is-static { color: var(--ink-2); text-decoration: none; }
.case-media figcaption { margin-top: var(--s1); font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); }

/* 살아 있는 증거 — 공기 흐름 데모. JS가 .is-live를 붙이기 전까지는 실제 화면 한 장이다 */
.sim-stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: var(--hair) solid var(--line); background: var(--sim-bg); }
.sim-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-2) var(--ease); }
.sim-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; cursor: crosshair; touch-action: pan-y; }
.sim.is-live .sim-canvas { display: block; }
.sim.is-live .sim-still { opacity: 0; pointer-events: none; }
.sim.is-live.is-real .sim-still { opacity: 1; }
.sim-hud { position: absolute; left: 0.85rem; top: 0.75rem; display: none; grid-template-columns: repeat(2, max-content); gap: 0.15rem 1.25rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; color: var(--sim-ink); pointer-events: none; }
.sim.is-live:not(.is-real) .sim-hud { display: grid; }
.sim-hud > div { display: flex; gap: 0.6rem; }
.sim-hud dt { opacity: 0.65; }
.sim-hud dd { margin: 0; }
.sim-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); margin-top: var(--s1); }
.sim-bar[hidden] { display: none; }
.sim-note { max-width: 28rem; font-size: var(--step--1); line-height: 1.5; color: var(--ink-2); }
.sim-controls { display: flex; gap: var(--s1); flex: none; }
.sim-btn { appearance: none; min-height: var(--control); padding: 0 0.9rem; border: var(--hair) solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; cursor: pointer; }
.sim-btn:hover { border-color: var(--ink); }
.sim-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sim.is-live:not(.is-real) figcaption { display: none; }
/* 화면이 비공개인 사례는 구성도로 대신한다. 이음선은 모자이크와 같은 원리: 칸 사이 gap으로 바탕선이 비친다 */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hair); background: var(--line); border: var(--hair) solid var(--line); counter-reset: flow; }
.flow-node { counter-increment: flow; display: grid; align-content: space-between; gap: var(--s3); min-height: 8.5rem; padding: 1rem 1.1rem 1.1rem; background: var(--paper-2); }
.flow-k { display: flex; justify-content: space-between; font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); }
.flow-k::after { content: counter(flow, decimal-leading-zero); font-variant-numeric: tabular-nums; }
.flow-v { font-size: var(--step-1); font-weight: var(--w-medium); line-height: 1.3; letter-spacing: -0.01em; }
.flow-node.is-wide { grid-column: 1 / -1; min-height: 7rem; background: var(--ink); color: var(--paper); grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.flow-node.is-wide .flow-k { grid-column: 1 / -1; color: var(--paper); }
.flow-node:last-child { grid-column: span 2; }
.flow-fleet { display: flex; gap: 0.4rem; }
.flow-fleet i { width: 1.1rem; height: 1.1rem; border: var(--hair) solid var(--paper); background: var(--paper); }
/* 요청 한 건이 입력 → 관문 → 통제 → 실행으로 지나가고, 실행에 닿으면 에이전트가 하나씩 켜진다.
   한 번에 3.4초 — 5초 미만이라 별도 정지 수단 없이 WCAG 2.2.2 밖에 있다. 화면에 들어올 때와 호버할 때만 재생 */
.flow-node { position: relative; overflow: hidden; }
.flow-node::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.flow-node.is-wide::after { background: var(--paper); }
.case-diagram.is-ready .flow-fleet i { background: transparent; }
.case-diagram.is-live .flow-node::after { animation: flow-run 1.1s var(--ease) both; }
.case-diagram.is-live .flow-node:nth-child(2)::after { animation-delay: 0.45s; }
.case-diagram.is-live .flow-node:nth-child(3)::after { animation-delay: 0.9s; }
.case-diagram.is-live .flow-node:nth-child(4)::after { animation-delay: 1.35s; }
.case-diagram.is-live .flow-node:nth-child(5)::after { animation-delay: 2.1s; }
.case-diagram.is-live .flow-node:nth-child(6)::after { animation-delay: 2.3s; }
.case-diagram.is-live .flow-fleet i { animation: fleet-on 0.2s steps(1) both; }
.case-diagram.is-live .flow-fleet i:nth-child(1) { animation-delay: 1.7s; }
.case-diagram.is-live .flow-fleet i:nth-child(2) { animation-delay: 1.82s; }
.case-diagram.is-live .flow-fleet i:nth-child(3) { animation-delay: 1.94s; }
.case-diagram.is-live .flow-fleet i:nth-child(4) { animation-delay: 2.06s; }
.case-diagram.is-live .flow-fleet i:nth-child(5) { animation-delay: 2.18s; }
.case-diagram.is-live .flow-fleet i:nth-child(6) { animation-delay: 2.3s; }
@keyframes flow-run { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes fleet-on { from { background: transparent; } to { background: var(--paper); } }

/* ---------- 회사에서 이끈 일 — 표처럼 읽히는 행 ---------- */
.rows { margin-top: var(--s3); }
.row { display: grid; grid-template-columns: minmax(9rem, 2fr) minmax(0, 4fr) minmax(0, 2fr) 7rem; column-gap: var(--s3); row-gap: 0.25rem; align-items: baseline; padding-block: 1.1rem; border-bottom: var(--hair) solid var(--line); }
.row-name { font-size: var(--step-1); font-weight: var(--w-bold); letter-spacing: -0.01em; }
.row-role { color: var(--ink-2); }
.row-year { color: var(--ink-2); text-align: right; }

/* ---------- 맡길 수 있는 일 — 2×2, 이음선 하나 ---------- */
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hair); margin-top: var(--s4); background: var(--line); border: var(--hair) solid var(--line); }
.service { display: grid; align-content: start; gap: var(--s2); padding: var(--s4); background: var(--paper); }
.service-index { font-size: var(--meta); letter-spacing: var(--track-meta); color: var(--ink-2); }
.service-name { font-size: clamp(1.375rem, 1rem + 1.2vw, 2.125rem); font-weight: var(--w-bold); line-height: 1.15; letter-spacing: -0.025em; }
.service-desc { max-width: var(--measure); line-height: 1.6; }
.service-proof { font-size: var(--step--1); color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s1); }
.tags li { padding: 0.15rem 0.55rem; border: var(--hair) solid var(--line); font-size: var(--step--1); color: var(--ink-2); }
.services-also { margin-top: var(--s3); color: var(--ink-2); }

/* ---------- 일하는 방식 — 네 단계, 이음선 하나 ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hair); margin-top: var(--s4); background: var(--line); border: var(--hair) solid var(--line); }
.step { display: grid; align-content: start; gap: var(--s2); padding: var(--s4) var(--s3); background: var(--paper); }
.step-no { font-size: var(--meta); letter-spacing: var(--track-meta); color: var(--ink-2); }
.step-name { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: var(--w-bold); line-height: 1.2; letter-spacing: -0.02em; }
.step-desc { line-height: 1.6; color: var(--ink-2); }
.terms { display: flex; flex-wrap: wrap; margin-top: var(--s3); font-size: 0.9375rem; font-weight: var(--w-medium); }
.terms li { padding-inline: 0.85rem; border-left: var(--hair) solid var(--line); }
.terms li:first-child { padding-left: 0; border-left: 0; }

/* ---------- 그 밖에 만든 것 — 실제 화면, 흑백 ---------- */
.index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin-top: var(--s4); }
.item-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); row-gap: 0.15rem; color: inherit; }
.item-img { grid-column: 1 / -1; display: block; aspect-ratio: 16 / 10; margin-bottom: 0.6rem; overflow: hidden; border: var(--hair) solid var(--line); background: var(--paper-2); }
.item-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: var(--thumb-filter); transition: transform var(--dur-3) var(--ease); }
/* 상징 이미지는 이미 [ink, paper]로 매핑돼 있어 두 번 거르면 회색으로 죽는다 */
.item-img.is-symbol img { filter: none; }
.item-link:hover .item-img img { transform: scale(1.03); }
.item-link:focus-visible { outline-offset: 4px; }
.item-name { font-weight: var(--w-medium); line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.item-tag { grid-column: 1; font-size: var(--step--1); color: var(--ink-2); line-height: 1.4; }
.item-status { grid-column: 2; grid-row: 2; align-self: baseline; font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
/* meta labels are case-folded to uppercase; npm and semver write themselves lowercase, so this one renders as authored */
.item-status.is-verbatim { text-transform: none; }
.item-no, .item-arrow { display: none; }
/* 마우스가 있는 넓은 화면: 큰 행 목록 + 커서를 따라오는 실제 화면(원색). 터치·좁은 화면은 위의 썸네일 그리드 */
@media (min-width: 60rem) and (hover: hover) and (pointer: fine) {
  .index-grid { display: block; border-top: var(--hair) solid var(--ink); }
  .item-link { grid-template-columns: 3.5rem minmax(0, 1.5fr) minmax(0, 1fr) 9rem 1.5rem; align-items: baseline; column-gap: var(--s3); padding-block: 1.25rem; border-bottom: var(--hair) solid var(--line); transition: color var(--dur-1) var(--ease); }
  .item-img { display: none; }
  .item-no, .item-arrow { display: block; }
  .item-no { font-size: var(--meta); letter-spacing: var(--track-meta); color: var(--ink-2); }
  .item-name { font-size: clamp(1.5rem, 0.9rem + 1.5vw, 2.5rem); font-weight: var(--w-bold); line-height: 1.1; letter-spacing: -0.03em; transition: transform var(--dur-2) var(--ease); }
  .item-tag { grid-column: auto; font-size: var(--step-0); }
  .item-status { grid-column: auto; grid-row: auto; text-align: right; }
  .item-arrow { text-align: right; transition: transform var(--dur-2) var(--ease); }
  .index-grid:hover .item-link { color: var(--ink-2); }
  .index-grid .item-link:hover, .index-grid .item-link:focus-visible { color: var(--ink); }
  .item-link:hover .item-name { transform: translateX(0.6rem); }
  .item-link:hover .item-arrow { transform: translate(3px, -3px); }
}
.preview { position: fixed; left: 0; top: 0; z-index: 20; width: clamp(16rem, 24vw, 26rem); aspect-ratio: 16 / 10; overflow: hidden; border: var(--hair) solid var(--line); background: var(--paper-2); pointer-events: none; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.preview.is-on { opacity: 1; }
.preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- 의뢰 ---------- */
.contact-title { margin-top: var(--s5); font-size: clamp(2.75rem, 0.75rem + 6.5vw, 7.5rem); font-weight: var(--w-black); line-height: 0.98; letter-spacing: -0.045em; }
.contact-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); row-gap: var(--s4); align-items: end; margin-top: var(--s5); }
.contact-lead { font-size: var(--step-1); font-weight: var(--w-medium); }
.brief-list { margin-top: var(--s3); border-top: var(--hair) solid var(--line); counter-reset: brief; }
.brief-list li { counter-increment: brief; display: flex; gap: var(--s2); align-items: baseline; padding-block: 0.75rem; border-bottom: var(--hair) solid var(--line); font-size: var(--step-1); }
.brief-list li::before { content: counter(brief, decimal-leading-zero); font-size: var(--meta); letter-spacing: var(--track-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.contact-actions { display: grid; justify-items: start; gap: var(--s2); }
.reach { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.reach-btn { appearance: none; min-height: var(--control); padding: 0 0.9rem; border: var(--hair) solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; cursor: pointer; }
.reach-btn:hover { border-color: var(--ink); }
.reach-btn[hidden] { display: none; }
.reach-tel { display: inline-flex; align-items: center; min-height: var(--control); font-size: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); font-weight: var(--w-medium); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line); }
.reach-status { min-height: 1.5em; font-size: var(--step--1); color: var(--ink-2); }
.contact .mail { display: inline-block; margin-top: var(--s2); font-size: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); font-weight: var(--w-medium); letter-spacing: -0.02em; line-height: 1.2; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px; text-decoration-color: var(--line); padding-block: 0.25em; overflow-wrap: anywhere; }
.contact .mail:hover { text-decoration-color: currentColor; }
.contact .links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); }
.contact .links a { display: inline-block; padding-block: 0.7rem; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--line); }
.contact .links a:hover { color: var(--ink); text-decoration-color: currentColor; }
.site-foot { display: flex; flex-wrap: wrap; gap: 0.4rem var(--s4); padding: var(--s4) var(--inset); border-top: var(--hair) solid var(--line); font-size: var(--meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--ink-2); }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 72rem) {
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  :root { --display: 42vw; }
  html[lang="en"] { --display: 19vw; }
  .name { grid-template-columns: minmax(0, 1fr); }
  .gauge { display: none; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .ledger { padding-bottom: 0; }
  .case, .contact-body { grid-template-columns: minmax(0, 1fr); }
  .case.is-flip .case-text { order: 0; }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row-year { text-align: left; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .topbar { column-gap: var(--s2); }
  .site-nav { order: 3; width: 100%; gap: var(--s3); }
  /* 소속 한 줄 = 이름 … 직함, 그 아래 링크 */
  .ledger { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); }
  .ledger dt { grid-column: 1; }
  .ledger .role { grid-column: 2; text-align: right; }
  .ledger .note { grid-column: 1 / -1; margin-bottom: 0.35rem; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-node, .flow-node:last-child { grid-column: auto; min-height: 0; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: space-between; }
  .service { padding: var(--s3); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { padding: var(--s3); }
  .sim-bar { flex-direction: column; }
}
@media (max-width: 32rem) {
  .index-grid { column-gap: var(--s2); }
  .item-link { grid-template-columns: minmax(0, 1fr); }
  .item-status { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .case-diagram.is-ready .flow-fleet i { background: var(--paper); }
}