/* Hallmark · macrostructure: bespoke "Signal Narrative" · tone: technical, atmospheric · anchor hue: 251 (cool blue)
 * nav: N5 floating pill · footer: Ft5 statement · enrichment: Tier B hand-built SVG + canvas scenes
 * pre-emit critique: see report
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; background: var(--color-paper); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; word-break: keep-all; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
.num { font-family: var(--font-num); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: var(--space-md); top: -100px; z-index: 100; padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: 8px; font-weight: 700; }
.skip:focus { top: var(--space-md); }
:focus-visible { outline: 2px solid var(--color-signal); outline-offset: 3px; }
h2 { font-size: var(--text-h2); font-weight: 800; line-height: 1.22; letter-spacing: -0.035em; overflow-wrap: anywhere; min-width: 0; }
.tag { font-family: var(--font-num); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--color-signal); margin-bottom: var(--space-md); }
.tag .num { margin-right: var(--space-xs); }

/* ---------- 진행 막대 ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; background: var(--color-signal); transform-origin: left; transform: scaleX(0); }

/* ---------- 헤더: 로고 + 떠 있는 알약 메뉴 (N5) ---------- */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); pointer-events: none; }
.hdr > * { pointer-events: auto; position: relative; z-index: 1; }
.nb { white-space: nowrap; }
.hdr::before { content: ''; position: absolute; inset: 0 0 -16px 0; background: linear-gradient(var(--color-paper) 55%, transparent); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); pointer-events: none; }
.scrolled .hdr::before { opacity: 1; }
.hdr__logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.hdr__mark { height: 38px; width: auto; aspect-ratio: 134 / 110; overflow: visible; color: var(--color-ink); }
.hdr__name { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-ink); white-space: nowrap; line-height: 1; }
.hdr__co { font-size: 0.68em; font-weight: 700; color: var(--color-muted); margin-right: 2px; vertical-align: 0.12em; }
.nav { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--radius); background: var(--color-veil); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 0 0 var(--rule-w) var(--color-rule); }
.nav a { display: block; padding: var(--space-xs) var(--space-md); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.nav a.is-on { color: var(--color-paper); background: var(--color-signal); }
.nav a:active { transform: translateY(1px); }
.nav .nav__end { color: var(--color-ink); }
.hdr__menu { display: none; }
@media (hover: hover) and (pointer: fine) { .nav a:hover:not(.is-on) { color: var(--color-ink); background: var(--color-paper-2); } }
@media (max-width: 899px) {
  .hdr__menu { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius); background: var(--color-veil); color: var(--color-ink); font: 600 var(--text-sm) var(--font-body); box-shadow: inset 0 0 0 var(--rule-w) var(--color-rule); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: pointer; }
  .nav { position: fixed; top: calc(var(--hdr-h) + var(--space-2xs)); right: var(--gutter); flex-direction: column; align-items: stretch; padding: var(--space-xs); border-radius: 20px; min-width: 180px; background: var(--color-sheet); opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; visibility: hidden; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short); }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav a { padding: var(--space-sm) var(--space-md); font-size: var(--text-base); }
}

/* ---------- 신호선 (모든 장면을 같은 x로 관통) ---------- */
.spine { position: absolute; left: var(--spine-x); width: 2px; margin-left: -1px; background: linear-gradient(var(--color-signal), var(--color-signal)); box-shadow: 0 0 12px var(--color-glow); transform-origin: top; pointer-events: none; }
.spine--full { top: 0; bottom: 0; transform: scaleY(var(--grow, 0)); }
.spine__glow { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--color-ink); box-shadow: 0 0 18px 4px var(--color-signal); transform: translateY(var(--glow-y, 0px)); }

/* ---------- 0 · 첫 화면 ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; }
.hero::before { content: ''; position: absolute; left: var(--spine-x); top: 46%; width: min(70vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--color-bloom), transparent); pointer-events: none; }
.hero__grid { position: relative; height: 100%; display: grid; grid-template-columns: var(--split) minmax(0, 1fr); align-items: center; }
.hero__copy { padding: var(--hdr-h) var(--space-lg) 0 var(--gutter); position: relative; z-index: 2; }
.hero__kicker { font-size: var(--text-lg); color: var(--color-muted); margin-bottom: var(--space-md); }
.hero__title { font-size: var(--text-display); font-weight: 800; line-height: 1.16; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.hero__title .hl { color: var(--color-signal); }
.hero__sub { margin-top: var(--space-xl); font-size: var(--text-base); color: var(--color-muted); }
.hero__mark { position: relative; justify-self: center; width: min(30vw, 44vh, 440px); width: min(30vw, 44svh, 440px); aspect-ratio: 134 / 110; margin-top: var(--space-2xl); }
.hero__svg { width: 100%; height: 100%; overflow: visible; }
.stop-a { stop-color: var(--color-brand); }
.stop-b { stop-color: var(--color-signal); }
.hero__dot { position: absolute; left: 4%; bottom: 2%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--color-ink); box-shadow: 0 0 16px 4px var(--color-signal); opacity: 0; }
.hero__streak { position: absolute; inset: -12% 0; pointer-events: none; }
.hero__streak i { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: linear-gradient(transparent, var(--color-ink) 30%, var(--color-signal) 70%, transparent); box-shadow: 0 0 20px 3px var(--color-glow); rotate: 18deg; opacity: 0; }
.hero__drop { position: absolute; left: 50%; top: calc(100% + var(--space-lg)); width: 2px; margin-left: -1px; height: 60vh; height: 60svh; background: linear-gradient(var(--color-signal), var(--color-signal-fade)); transform-origin: top; transform: scaleY(0); }
.hero__drop i { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--color-ink); box-shadow: 0 0 14px 3px var(--color-signal); opacity: 0; }
.hero__cue { position: absolute; left: var(--spine-x); bottom: var(--space-lg); transform: translateX(var(--space-md)); font-family: var(--font-num); font-size: var(--text-sm); color: var(--color-dim); letter-spacing: 0.08em; opacity: 0; }

/* 첫 화면 연출 (html.go 에서 시작, CSS 애니메이션이라 로딩 중에도 끊기지 않음) */
.js .hero__kicker, .js .hero__sub { opacity: 0; transform: translateY(14px); }
.js .hero__svg { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > i { display: inline-block; font-style: normal; }
.js [data-split] .w > i { transform: translateY(105%); }

.go .hero__dot { animation: dot-blink 1s var(--ease-out) 0.15s both, dot-out 0.3s var(--ease-in) 1.15s forwards; }
.go .hero__streak i { animation: streak-sweep 0.8s var(--ease-in-out) 1s both; }
.go .hero__svg { animation: mark-wipe 0.8s var(--ease-in-out) 1s both; }
.go .hero__kicker { animation: rise 0.6s var(--ease-out) 1.55s both; }
.go [data-split] .w > i { animation: word-up 0.9s var(--ease-out) both; animation-delay: calc(1.7s + var(--i) * 70ms); }
.go .hero__sub { animation: rise 0.6s var(--ease-out) 2.4s both; }
.go .hero__drop { animation: drop 0.9s var(--ease-in-out) 2.5s both; }
.go .hero__drop i { animation: travel 2.8s var(--ease-in-out) 3.4s 4; }
.go .hero__cue { animation: fade 0.6s var(--ease-out) 3.2s both; }
.scrolled .hero__drop i { animation-play-state: paused; }

@keyframes dot-blink { 0% { opacity: 0; } 25% { opacity: 1; } 45% { opacity: 0.25; } 65%, 100% { opacity: 1; } }
@keyframes dot-out { to { opacity: 0; } }
@keyframes streak-sweep { 0% { opacity: 0; transform: translateX(-60%); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
@keyframes mark-wipe { from { clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%); } to { clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%); } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes word-up { to { transform: none; } }
@keyframes drop { to { transform: scaleY(1); } }
@keyframes travel { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(58vh); transform: translateY(58svh); } }
@keyframes fade { to { opacity: 1; } }

/* ---------- 장면 공통 ---------- */
.scene { position: relative; }
.pin { position: relative; }
.cap { position: relative; z-index: 2; }
.cap__block h3 { font-size: var(--text-h2); font-weight: 800; line-height: 1.22; letter-spacing: -0.035em; overflow-wrap: anywhere; margin-bottom: var(--space-lg); }
.cap__block p:not(.tag) { font-size: var(--text-lg); color: var(--color-muted); max-width: 30em; }
.cap__note { margin-top: var(--space-lg); font-size: var(--text-sm) !important; color: var(--color-dim) !important; }
.stage { position: relative; }
.stage canvas { width: 100%; height: 100%; }

/* 장면은 화면에 고정(sticky)되고, 스크롤한 만큼 진행된다 */
.mode-scroll .scene[data-len] { height: calc(var(--len, 100) * 1vh); }
.mode-scroll .pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 640px; overflow: clip; }
html.mode-scroll { scroll-snap-type: none; }
.mode-scroll .hero, .mode-scroll .scene, .mode-scroll .contact { scroll-snap-align: start; }
.mode-scroll .ftr { scroll-snap-align: end; }
.mode-scroll .cap { position: absolute; left: 0; top: 0; bottom: 0; width: var(--split); padding: calc(var(--hdr-h) + var(--space-lg)) var(--space-xl) var(--space-2xl) var(--gutter); display: grid; align-content: center; }
.mode-scroll .cap__block { grid-area: 1 / 1; will-change: opacity, transform; }
.mode-scroll .stage { position: absolute; top: 0; bottom: 0; right: 0; left: var(--split); }

/* 모바일·움직임 줄이기: 흐름대로 쌓고 장면은 화면에 들어오면 재생 */
.mode-auto .scene, .mode-static .scene { padding: var(--space-4xl) 0 0; }
.mode-auto .cap, .mode-static .cap { padding: 0 var(--gutter); display: grid; gap: var(--space-2xl); }
.mode-auto .stage, .mode-static .stage { height: min(78vh, 560px); height: min(78svh, 560px); margin-top: var(--space-xl); }

.mode-auto .stmt { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.mode-auto .stmt.is-in { opacity: 1; transform: none; }

/* 사업분야: 탭 + 한 자리에서 차례로 */
.tabs { display: flex; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.tabs__t { position: relative; flex: 1; min-height: 48px; padding: 0 0 var(--space-sm); border: 0; background: none; text-align: left; font: 700 var(--text-base) var(--font-body); color: var(--color-dim); cursor: pointer; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.tabs__t .num { font-family: var(--font-num); margin-right: var(--space-xs); }
.tabs__t[aria-selected="true"] { color: var(--color-ink); }
.tabs__t[aria-selected="true"] .num { color: var(--color-signal); }
.tabs__t:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .tabs__t:hover { color: var(--color-ink); } }
.tabs__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-rule); overflow: hidden; }
.tabs__bar b { display: block; height: 100%; background: var(--color-signal); transform-origin: left; transform: scaleX(var(--f, 0)); }
.subs, .sub { display: grid; }
.sub { grid-area: 1 / 1; }
.sub .cap__block { grid-area: 1 / 1; }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pills span { padding: var(--space-xs) var(--space-md); border-radius: var(--radius); box-shadow: inset 0 0 0 1.5px var(--color-signal); color: var(--color-ink); font-weight: 700; font-size: var(--text-base); }
.mode-auto .scene--biz .stage, .mode-static .scene--biz .stage { height: min(70vh, 520px); height: min(70svh, 520px); }

/* 단계 표시 (IPS) */
.steps { display: flex; gap: var(--space-xs); margin-top: var(--space-xl); counter-reset: s; }
.steps li { counter-increment: s; flex: 1; padding-top: var(--space-sm); border-top: 2px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-dim); font-weight: 600; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.steps li::before { content: counter(s) ' '; font-family: var(--font-num); }
.steps li.is-on { color: var(--color-ink); border-color: var(--color-signal); }
.sub .steps { grid-area: 2 / 1; }

/* ---------- 1 · 선언 ---------- */
.mode-scroll .scene--manifesto .cap { width: 64%; }
.stmt__k { font-size: var(--text-lg); color: var(--color-muted); margin-bottom: var(--space-md); }
.stmt__b { font-size: var(--text-stmt); font-weight: 800; line-height: 1.24; letter-spacing: -0.04em; color: var(--color-ink); overflow-wrap: anywhere; }
.stmt__b .hl { color: var(--color-signal); }
.stmt__foot { margin-top: var(--space-2xl); color: var(--color-muted); font-size: var(--text-base); }
.stmt__foot .num { color: var(--color-signal); margin-right: var(--space-xs); }
.mode-auto .scene--manifesto .cap, .mode-static .scene--manifesto .cap { gap: var(--space-3xl); }
.mode-auto .spine--full, .mode-static .spine--full { display: none; }

/* ---------- 5 · 연혁 ---------- */
.hist__head { position: relative; z-index: 2; padding: calc(var(--hdr-h) + var(--space-xl)) var(--gutter) 0; }
.hist__head h2 .num { display: block; font-size: var(--text-lg); color: var(--color-muted); font-weight: 700; letter-spacing: 0; margin-top: var(--space-xs); }
.hist__track { position: relative; }
.yr ul li { font-size: var(--text-base); color: var(--color-muted); line-height: 1.5; padding-left: 2.6em; text-indent: -2.6em; }
.yr ul li .num { display: inline-block; width: 2.6em; text-indent: 0; color: var(--color-signal); }
.yr__y { display: block; font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 900; color: var(--color-ink); line-height: 1; letter-spacing: -0.03em; }

.mode-scroll .scene--history .pin { display: grid; grid-template-rows: auto 1fr; }
.mode-scroll .hist__viewport { position: absolute; left: 0; right: 0; top: 56%; }
.mode-scroll .hist__track { display: flex; width: max-content; gap: 0; padding: 0 30vw 0 var(--spine-x); transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
.mode-scroll .hist__track::before, .mode-scroll .hist__track::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.mode-scroll .hist__track::before { background: var(--color-rule); }
.mode-scroll .hist__track::after { background: var(--color-signal); box-shadow: 0 0 10px var(--color-glow); transform-origin: left; transform: scaleX(var(--hp, 0)); }
.mode-scroll .yr { position: relative; flex: none; width: clamp(240px, 22vw, 340px); padding: var(--space-2xl) var(--space-2xl) 0 0; opacity: 0.32; transition: opacity var(--dur-long) var(--ease-out); }
.mode-scroll .yr::before { content: ''; position: absolute; left: 0; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-paper); box-shadow: inset 0 0 0 2px var(--color-rule); transition: background-color var(--dur-long) var(--ease-out), box-shadow var(--dur-long) var(--ease-out); }
.mode-scroll .yr.is-on { opacity: 1; }
.mode-scroll .yr.is-on::before { background: var(--color-signal); box-shadow: 0 0 0 5px var(--color-glow); }
.mode-scroll .yr ul { margin-top: var(--space-lg); }
.mode-scroll .spine--to-axis { top: 0; height: 56%; transform: scaleY(var(--grow, 1)); }

.mode-auto .scene--history, .mode-static .scene--history { padding-bottom: var(--space-2xl); }
.mode-auto .hist__head, .mode-static .hist__head { padding-top: 0; }
.mode-auto .hist__track, .mode-static .hist__track { margin: var(--space-2xl) var(--gutter) 0; border-left: 2px solid var(--color-rule); }
.mode-auto .yr, .mode-static .yr { position: relative; padding: 0 0 var(--space-2xl) var(--space-xl); }
.mode-auto .yr::before, .mode-static .yr::before { content: ''; position: absolute; left: -9px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-signal); box-shadow: 0 0 0 5px var(--color-glow); }
.mode-auto .yr ul, .mode-static .yr ul { margin-top: var(--space-sm); }
.mode-auto .yr { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.mode-auto .yr.is-on { opacity: 1; transform: none; }
.mode-auto .spine--to-axis, .mode-static .spine--to-axis { display: none; }

.hist__now { display: none; }
.mode-scroll .hist__now { display: block; position: absolute; left: var(--gutter); top: 56%; transform: translateY(calc(-100% - var(--space-xl))); font-size: clamp(6rem, 15vw, 15rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.05em; color: var(--color-paper-2); overflow: hidden; pointer-events: none; }
.hist__now span { display: inline-block; }
.hist__now span.swap { animation: year-swap var(--dur-long) var(--ease-out); }
@keyframes year-swap { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.mode-scroll .hist__head { position: absolute; right: var(--gutter); top: 0; text-align: right; }

/* ---------- 6 · 오시는 길 ---------- */
.contact { position: relative; padding: var(--space-4xl) 0 var(--space-4xl); background: linear-gradient(var(--color-paper), var(--color-paper-2)); }
.contact__grid { display: grid; grid-template-columns: var(--split) minmax(0, 1fr); align-items: stretch; }
.contact__copy { padding: 0 var(--space-xl) 0 var(--gutter); }
.contact__lead { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-lg); }
.info { margin-top: var(--space-2xl); border-top: var(--rule-w) solid var(--color-rule); }
.info > div { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-w) solid var(--color-rule); }
.info dt { color: var(--color-dim); font-size: var(--text-sm); font-weight: 600; padding-top: 2px; }
.info dd { font-size: var(--text-lg); font-weight: 600; }
.info a { text-decoration: none; }
.info a:focus-visible, .info a:hover { color: var(--color-signal); }
.contact__links { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius); font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-rule); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--color-signal); color: var(--color-paper); box-shadow: inset 0 0 0 1.5px var(--color-signal); } }
.contact__map { position: relative; min-height: 460px; margin-top: calc(-1 * var(--space-4xl)); overflow: clip; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__ripple circle { fill: none; stroke: var(--color-signal); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.spine--to-pin { top: 0; height: calc(50% - 46px); transform: scaleY(0); transition: transform 1s var(--ease-in-out); }
.pinmark { position: absolute; left: var(--spine-x); top: 50%; width: 40px; margin: -52px 0 0 -20px; opacity: 0; transform: translateY(-40px); transition: opacity 0.4s var(--ease-out) 0.9s, transform 0.7s var(--ease-out) 0.9s; }
.pinmark path { fill: var(--color-signal); }
.pinmark circle { fill: var(--color-paper); }
.map__label { position: absolute; left: var(--spine-x); top: calc(50% + var(--space-md)); transform: translateX(-50%); font-weight: 700; font-size: var(--text-sm); color: var(--color-ink); white-space: nowrap; opacity: 0; transition: opacity 0.6s var(--ease-out) 1.5s; }
.contact.is-in .spine--to-pin { transform: scaleY(1); }
.contact.is-in .pinmark { opacity: 1; transform: none; }
.contact.is-in .map__label { opacity: 1; }
.contact.is-in .map__ripple circle { animation: ripple 2.2s var(--ease-out) 1.4s 2 both; }
.contact.is-in .map__ripple .r2 { animation-delay: 2.2s; }
@keyframes ripple { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(5); } }
.contact .contact__map { --spine-x: 50%; }
.mode-scroll .contact__map .spine { left: 50%; }

/* ---------- 푸터 (Ft5 statement) ---------- */
.ftr { padding: var(--space-4xl) var(--gutter) var(--space-2xl); background: var(--color-paper-2); border-top: var(--rule-w) solid var(--color-rule); }
.ftr__statement { font-family: var(--font-num); font-weight: 900; font-size: clamp(2.5rem, 9vw, 8.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--color-rule); overflow-wrap: anywhere; }
.ftr__meta { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.ftr__meta a { color: var(--color-ink); }
.ftr__copy { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-dim); }

/* ---------- 모바일 배치 ---------- */
@media (max-width: 899px) {
  /* 휴대폰도 장면 하나 = 화면 한 장: 위에 글, 아래에 그림 */
  .mode-scroll .pin { display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 560px; }
  .mode-scroll .cap, .mode-scroll .scene--manifesto .cap { position: relative; inset: auto; width: auto; flex: none; padding: calc(var(--hdr-h) + var(--space-lg)) var(--gutter) var(--space-md); align-content: start; }
  .mode-scroll .scene--manifesto .cap { flex: 1; align-content: center; }
  .mode-scroll .stage { position: relative; inset: auto; flex: 1; min-height: 0; }
  .mode-scroll .spine--full { display: none; }
  .mode-scroll .tabs { margin-bottom: var(--space-lg); }
  .mode-scroll .cap__block p:not(.tag) { font-size: var(--text-base); }
  .mode-scroll .yr { width: 230px; padding-right: var(--space-xl); }
  .mode-scroll .hist__head { padding-top: calc(var(--hdr-h) + var(--space-md)); }
  .mode-scroll .hist__now { font-size: 5.5rem; }
  .nav, .hdr__menu { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hdr__menu { background: var(--color-sheet); }
  .hero { height: auto; min-height: 100vh; min-height: 100svh; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--space-2xl); padding: calc(var(--hdr-h) + var(--space-2xl)) 0 var(--space-4xl); }
  .hero__mark { order: -1; width: min(52vw, 260px); margin-top: 0; }
  .hero__copy { padding: 0 var(--gutter); }
  .hero__drop, .hero__cue { display: none; }
  .hero::before { top: 28%; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .contact__copy { padding: 0 var(--gutter); }
  .contact__map { min-height: 340px; margin-top: var(--space-2xl); }
  .hdr__mark { height: 30px; }
  .hdr__name { font-size: 1.125rem; }
}

/* ---------- 움직임 줄이기: 이동·반복 없이 최종 장면을 보여 줌 ---------- */
/* 움직임 줄이기(.gentle): 모션을 끄지 않고, 위치 이동·깜빡임·물결만 빼고 나타남·그어짐은 유지 */
.gentle .hero__dot, .gentle .hero__streak i, .gentle .hero__drop i { display: none; }
.js.gentle .hero__kicker, .js.gentle .hero__sub { transform: none; }
.js.gentle [data-split] .w > i { transform: none; opacity: 0; }
.go.gentle [data-split] .w > i { animation: fade 0.6s var(--ease-out) both; animation-delay: calc(1.2s + var(--i) * 50ms); }
.gentle .pinmark { transform: none; }
.gentle .map__ripple circle { animation: none !important; }
.gentle .recruit__steps li { transform: none; }

/* ---------- 연혁: 세 기간 묶음 (2011—2015 / 2016—2020 / 2021—2026) ---------- */
.mode-scroll .scene--history .hist__head { position: absolute; left: var(--gutter); right: auto; top: 0; text-align: left; }
.mode-scroll .scene--history .hist__viewport { top: 36%; }
.mode-scroll .scene--history .spine--to-axis { left: calc(var(--gutter) + 8px); height: 36%; }
.mode-scroll .scene--history .hist__track { padding: 0 45vw 0 var(--gutter); }
.mode-scroll .scene--history .yr { width: min(600px, 84vw); padding: var(--space-xl) var(--space-3xl) 0 0; }
.scene--history .yr__y { font-size: clamp(1.75rem, 2.8vw, 2.75rem); font-weight: 900; }
.scene--history .yr ul { display: grid; gap: var(--space-2xs); }
.scene--history .yr ul li { padding-left: 4.4em; text-indent: -4.4em; line-height: 1.5; }
.scene--history .yr ul li .num { width: 4.4em; }
.mode-scroll .scene--history .hist__now { left: auto; right: var(--gutter); top: 36%; transform: translateY(calc(-100% - var(--space-lg))); font-size: clamp(2.5rem, 8vw, 7.5rem); white-space: nowrap; }
@media (max-width: 899px) {
  .mode-scroll .scene--history .hist__viewport { top: 30%; }
  .mode-scroll .scene--history .spine--to-axis { height: 30%; }
  .mode-scroll .scene--history .yr { width: 84vw; padding-right: var(--space-lg); }
  .mode-scroll .scene--history .hist__now { top: 30%; font-size: 2.5rem; transform: translateY(calc(-100% - var(--space-md))); }
  .scene--history .yr ul li { font-size: var(--text-sm); }
}
.mode-scroll .scene--history .yr.is-past { opacity: 0; }

/* ---------- 채용 ---------- */
.recruit { position: relative; margin-top: var(--space-3xl); padding: var(--space-2xl) var(--space-xl); border-radius: 24px; background: var(--color-paper); box-shadow: inset 0 0 0 var(--rule-w) var(--color-rule); overflow: hidden; }
.recruit::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--color-signal); transform-origin: left; transform: scaleX(0); transition: transform 0.9s var(--ease-out) 0.4s; }
.contact.is-in .recruit::before { transform: scaleX(1); }
.recruit h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; margin-bottom: var(--space-md); }
.recruit__lead { color: var(--color-muted); font-size: var(--text-base); max-width: 34em; }
.recruit__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-xl) 0; }
.recruit__steps li { display: grid; gap: var(--space-2xs); padding-top: var(--space-md); border-top: 2px solid var(--color-rule); opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), border-color 0.6s var(--ease-out); }
.recruit__steps li:nth-child(2) { transition-delay: 0.15s; }
.recruit__steps li:nth-child(3) { transition-delay: 0.3s; }
.contact.is-in .recruit__steps li { opacity: 1; transform: none; border-color: var(--color-signal); }
.recruit__steps .num { color: var(--color-signal); font-size: var(--text-sm); }
.recruit__steps b { color: var(--color-ink); font-size: var(--text-base); }
.recruit__steps span:not(.num) { color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.btn--fill { background: var(--color-signal); color: var(--color-paper); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn--fill:hover { background: var(--color-ink); color: var(--color-paper); box-shadow: none; } }
@media (max-width: 599px) { .recruit { padding: var(--space-xl) var(--space-lg); } .recruit__steps { grid-template-columns: minmax(0, 1fr); } }

/* 선언: 문장 세 개를 한 자리에 겹치고 위에 진행 막대 */
.stmts { display: grid; }
.stmts .stmt { grid-area: 1 / 1; }
.scene--manifesto .tabs { max-width: 640px; }

/* 연혁 가운데 정렬: 재생 헤드는 화면 가운데, 지금 기간 칸이 가운데에 선다 */
.scene--history { --panel-w: min(620px, 84vw); }
.mode-scroll .scene--history .hist__head { left: 0; right: 0; text-align: center; }
.mode-scroll .scene--history .spine--to-axis { left: 50%; height: 40%; }
.mode-scroll .scene--history .hist__viewport { top: 40%; }
.mode-scroll .scene--history .hist__track { padding: 0 calc(50vw - var(--panel-w) / 2); }
.mode-scroll .scene--history .yr { width: var(--panel-w); padding: var(--space-xl) var(--space-lg) 0; text-align: center; }
.mode-scroll .scene--history .yr::before { left: 50%; margin-left: -8px; }
.mode-scroll .scene--history .yr ul { width: fit-content; max-width: 100%; margin: var(--space-lg) auto 0; text-align: left; }
.mode-scroll .scene--history .yr.is-past { opacity: 0.22; }
.mode-scroll .scene--history .hist__now { left: 0; right: 0; top: 40%; text-align: center; }
@media (max-width: 899px) {
  .mode-scroll .scene--history .spine--to-axis { height: 32%; }
  .mode-scroll .scene--history .hist__viewport { top: 32%; }
  .mode-scroll .scene--history .hist__now { top: 32%; }
}
/* 가운데 세로선이 제목 글자를 가로지르지 않게 제목 아래에서 시작 */
.mode-scroll .scene--history .spine--to-axis { top: 26%; height: 14%; }
@media (max-width: 899px) { .mode-scroll .scene--history .spine--to-axis { top: 21%; height: 11%; } }

/* ---------- 오시는 길 약도 (OpenStreetMap 도로 데이터, 삼성아이티해링턴타워 중심) ---------- */
.map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map .m-r3 { stroke: var(--color-rule); stroke-width: 1.2; }
.map .m-r2 { stroke: var(--color-rule); stroke-width: 2.6; }
.map .m-r1 { stroke: var(--color-brand); stroke-opacity: 0.55; stroke-width: 4.5; }
.map .m-rail { stroke: var(--color-muted); stroke-opacity: 0.55; stroke-width: 3; }
.map .m-rail-t { stroke: var(--color-paper); stroke-width: 1.4; stroke-dasharray: 5 6; }
.map .m-lab { fill: var(--color-muted); font: 600 12px var(--font-body); }
.map .m-poit { fill: var(--color-ink); font: 700 14px var(--font-body); }
.map .m-poit2 { fill: var(--color-muted); font: 600 12px var(--font-body); }
.map .m-sub { fill: var(--color-signal); font: 700 11px var(--font-body); }
.map .m-st { fill: var(--color-signal); }
.map .m-dot { fill: var(--color-muted); }
.map .map__route path { stroke: var(--color-signal); stroke-width: 3; stroke-dasharray: 1; }
.map .m-dist { fill: var(--color-signal); font: 800 13px var(--font-body); }
.map__label { font-size: var(--text-base) !important; }
.map__attr { position: absolute; right: var(--space-sm); bottom: var(--space-xs); margin: 0; font-size: 11px; color: var(--color-dim); }
/* 등장: 도로가 당겨지듯 → 이름 → 역에서 건물까지 길 → 핀 */
.map__roads { transform-box: view-box; transform-origin: 50% 50%; opacity: 0; transform: scale(1.08); transition: opacity 0.9s var(--ease-out), transform 1.4s var(--ease-out); }
.map__labels, .map__poi, .m-dist { opacity: 0; transition: opacity 0.8s var(--ease-out) 0.6s; }
.map__route path { stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-in-out) 1s; }
.contact.is-in .map__roads { opacity: 1; transform: none; }
.contact.is-in .map__labels, .contact.is-in .map__poi, .contact.is-in .m-dist { opacity: 1; }
.contact.is-in .map__route path { stroke-dashoffset: 0; }
.contact .pinmark { transition-delay: 1.8s, 1.8s; }
.contact .map__label { transition-delay: 2.2s; }
.contact.is-in .map__ripple circle { animation-delay: 2.2s; }
.contact.is-in .map__ripple .r2 { animation-delay: 3s; }
.gentle .map__roads { transform: none; }
@media (max-width: 899px) {
  .contact__map { min-height: 440px; }
  .map .m-lab { font-size: 17px; }
  .map .m-poit { font-size: 21px; }
  .map .m-poit2 { font-size: 17px; }
  .map .m-sub { font-size: 16px; }
  .map .m-dist { font-size: 19px; }
}
.map__label { padding: 4px 12px; border-radius: 999px; background: var(--color-veil); box-shadow: inset 0 0 0 1px var(--color-rule); }
/* 건물 이름은 핀 오른쪽 위 (다른 지도 글자와 겹치지 않는 자리) */
.contact .map__label { left: calc(var(--spine-x) + 22px); top: calc(50% - 50px); transform: none; }

.steps li[role="button"] { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .steps li[role="button"]:hover { color: var(--color-ink); } }