/* ══════════════════════════════════════════════════════════════════
   HILiT 랜딩 공용 스타일 — 개인·팀(lp-v6.html)과 비즈니스(hilit-business.html)가 함께 쓴다.
   기준 문서: docs/LP/landing-structure 2.md (2026-10-09 재구성안)
   🔺 2026-10-09 밝은 판으로 바꿨다(사용자 지시 — "전체적으로 어둡다, 시안블루를 강조해 typesafe.ai 처럼 트렌디하게").
      참고 사이트에서 가져온 것은 시각 문법뿐이다 — 밝은 바탕 위에 채도 높은 색 면을 통째로 까는 섹션,
      아주 큰 그로테스크 제목, 고정폭 글꼴의 작은 라벨, 점(하프톤) 무늬, 모서리 괄호.
      (검은 제목줄의 레트로 창도 썼다가 영상에서는 걷었다 — 아래 「영상 칸」.)
      로고·문안·그림·색(분홍)은 가져오지 않는다. 색 면은 HILiT 의 시안(#08d9ed)과 시안블루다.
   🔴 두 페이지의 상단 머리·버튼·섹션 틀은 여기 한 곳에서만 고친다. 페이지마다 다른 것만 각 HTML 의 <style> 에 둔다.
   🔴 영상 파일은 바꾸지 않는다(사용자 지시) — 기존 assets/ 의 영상·포스터를 다시 배치해 쓴다.
   🔺 2026-10-09 시안블루 키 컬러가 잘 보이게(사용자 지시) — 종이를 옅은 시안빛으로, 번갈아 까는 띠·푸터·섹션 이름표·머리 줄을 시안 면으로.
      시안은 글자색이 아니라 「면」으로 쓴다(아래 대비 규칙 그대로).
   🔴 대비 — 흰 바탕의 시안(#08d9ed) 글자는 1.8:1 이라 쓰지 않는다. 흰 바탕 강조는 시안블루 그라데이션(#0091d1→#1d5bff,
      큰 제목에서 3.5:1 이상), 시안 면 위 강조는 잉크 상자에 시안 글자(10:1)다. 시안 면 위 잉크 본문은 10.2:1.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --paper: #f3fcfe; --paper-2: #d6f5fb; --cyan-wash: #e4f9fd; --ink: #0d1b24; --ink-2: #3c4f5a; --line: rgb(13 27 36 / .14);
  --cyan: #08d9ed; --sky: #bff3fc; --blue: #1d5bff; --cb: #0077c8; --lime: #d7ff00;
  --grad: linear-gradient(100deg, #0091d1, #1d5bff);
  --font-display: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-body: var(--font-display);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --color-focus: #1d5bff;
  /* 머리 높이 — 휴대폰에서는 두 줄(전환 줄 + 상단 바)이 첫 화면을 덜 먹도록 낮춘다(재구성안 §8). */
  --switch-h: 2.125rem; --bar-h: 3.5rem; --header-h: calc(var(--switch-h) + var(--bar-h)); --brand-size: 2.25rem; --wrap: 87.5rem;
}
@media (min-width: 60rem) { :root { --switch-h: 2.5rem; --bar-h: 4.25rem; --brand-size: 2.75rem; } }
/* 휴대폰 — 글꼴 굵기를 둘(Pretendard 400·700)과 Mono 500 하나만 받는다(fonts-mobile.css · 각 HTML 의 글꼴 link).
   선언하지 않은 굵기는 가까운 굵기로 그리고, 흉내 굵기(가짜 볼드)는 만들지 않는다. */
@media (max-width: 39.999rem) { html { font-synthesis: none; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + var(--space-3)); background: var(--paper); }
body { min-width: 320px; background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
button, input, select, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--cyan); color: var(--ink); }
.skip-link { position: fixed; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); z-index: var(--z-overlay); transform: translateY(-180%); padding: var(--space-3) var(--space-4); background: var(--ink); color: #fff; font-weight: 700; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); }

/* ── 상단 머리 — 전환 줄 + 상단 바 ─────────────────────────────────
   처음에는 전환 줄이 시안 · 상단 바가 투명, 24px 넘게 내리면 전환 줄은 잉크 · 상단 바는 흰 바탕으로 함께 바뀐다(site.js 의 .is-scrolled).
   🔴 전환 줄에서 지금 페이지 버튼만 채우고 다른 쪽은 테두리만 남긴다. 지금 페이지 버튼도 링크라 누르면 다시 연다. */
.site-nav { position: fixed; inset: 0 0 auto; z-index: var(--z-nav); color: var(--ink); transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.site-nav.is-scrolled { background: rgb(232 250 254 / .92); box-shadow: 0 1px 0 var(--ink), 0 4px 0 var(--cyan); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.switch-bar { background: var(--cyan); border-block-end: 1px solid var(--ink); transition: background-color var(--dur-short) var(--ease-out); }
.switch-inner, .nav-inner { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--page-gutter); }
.switch-inner { min-height: var(--switch-h); display: flex; align-items: center; gap: var(--space-2); }
.switch-link { display: inline-flex; align-items: center; min-height: 1.625rem; padding-inline: var(--space-3); border: 1px solid var(--ink); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.switch-link[aria-current="page"] { background: var(--ink); color: #fff; }
.nav-inner { position: relative; min-height: var(--bar-h); display: flex; align-items: center; gap: var(--space-3); }
.brand { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; margin-inline-end: auto; color: inherit; text-decoration: none; }
.brand-mark { position: relative; flex: 0 0 auto; width: var(--brand-size); aspect-ratio: 1; overflow: hidden; border-radius: .6rem; box-shadow: 0 0 0 1px var(--ink); }
.brand-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 밝은 판이라 늘 밝은 바탕용 로고(흰 판 아이콘 · 검은 글자)를 쓴다. */
.brand-logo--dark, .brand-wordmark--dark { display: none; }
.brand-wordmark { position: relative; flex: 0 0 auto; width: clamp(5.5rem, 10vw, 8rem); aspect-ratio: 364 / 128; }
.brand-wordmark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.brand-tag { padding: .2rem .45rem; border: 1px solid var(--ink); font-family: var(--font-mono); font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* 메뉴 — 기본은 접힌 목록(휴대폰). 넓은 화면에서만 한 줄로 편다(아래 두 media).
   🔴 비즈니스 메뉴는 다섯 개에 버튼이 둘이라 한 줄에 들어갈 폭이 넓다. .site-nav--long 이면 88rem 부터 편다. */
.nav-links { position: absolute; inset: 100% 0 auto; display: none; gap: 0; padding: var(--space-2) var(--page-gutter) var(--space-4); border-block: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.site-nav.is-open .nav-links { display: grid; }
.nav-links a { display: flex; align-items: center; min-height: 3rem; border-block-end: 1px solid var(--line); color: inherit; font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.nav-links .menu-cta { justify-content: center; margin-block-start: var(--space-3); border: 0; background: var(--cyan); }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-action { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding-inline: var(--space-3); border: 0; background: var(--ink); color: #fff; font-size: var(--text-xs); font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav-action--ghost { display: none; background: var(--cyan); color: var(--ink); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: rgb(13 27 36 / .08); color: var(--ink); }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle .icon-close, .site-nav.is-open .nav-toggle .icon-open { display: none; }
.site-nav.is-open .nav-toggle .icon-close { display: block; }
@media (min-width: 40rem) { .nav-action { padding-inline: var(--space-4); } }
@media (min-width: 60rem) {
  .nav-action--ghost { display: inline-flex; }
  .nav-links .menu-cta { display: none; }
  .site-nav:not(.site-nav--long) .nav-toggle { display: none; }
  .site-nav:not(.site-nav--long) .nav-links { position: static; display: flex; gap: var(--space-1); margin-inline: auto; padding: 0; border: 0; background: none; }
  .site-nav:not(.site-nav--long) .nav-links a { position: relative; min-height: 2.25rem; padding-inline: var(--space-3); border: 0; font-size: var(--text-sm); white-space: nowrap; }
  .site-nav:not(.site-nav--long) .nav-links a::after { content: ""; position: absolute; inset: auto var(--space-3) .25rem; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
}
@media (min-width: 88rem) {
  .site-nav--long .nav-toggle { display: none; }
  .site-nav.site-nav--long .nav-links { position: static; display: flex; gap: 0; margin-inline: auto; padding: 0; border: 0; background: none; }
  .site-nav--long .nav-links a { position: relative; min-height: 2.25rem; padding-inline: var(--space-3); border: 0; font-size: var(--text-sm); white-space: nowrap; }
  .site-nav--long .nav-links a::after { content: ""; position: absolute; inset: auto var(--space-3) .25rem; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
}

/* ── 「준비 중」 표시 — 아직 열리지 않은 기능의 버튼에 붙인다(재구성안 §2 · §6). ── */
.soon { display: inline-flex; align-items: center; padding: .2rem .4rem; background: rgb(13 27 36 / .12); font-family: var(--font-mono); font-size: .68em; font-weight: 700; line-height: 1; }
/* 「준비 중」 바탕 — 잉크 버튼 위에서는 흰빛, 시안·흰 버튼 위에서는 잉크빛. */
:is(.nav-action:not(.nav-action--ghost), .btn:not(.btn-mint), :is(.section--cyan, .final) .btn-mint) .soon { background: rgb(255 255 255 / .2); }
:is(.section--cyan, .final) .btn:not(.btn-mint) .soon { background: rgb(13 27 36 / .12); }

/* ── 섹션 틀 ─────────────────────────────────────────────────────────
   🔴 히어로만 한 화면을 채운다. 설명·FAQ 는 내용 길이만큼 흐른다(재구성안 §8). 섹션 번호는 눈썹 글자 앞에 자동으로 붙는다. */
main { counter-reset: sec; }
.section { position: relative; isolation: isolate; padding-block: var(--space-8); border-block-start: 1px solid var(--ink); background: var(--paper); overflow: clip; counter-increment: sec; }
.section--alt { background-color: var(--paper-2); background-image: radial-gradient(rgb(0 119 200 / .12) 1px, transparent 1.3px); background-size: 9px 9px; }
/* 시안 면 — 참고 사이트의 색 면 섹션을 HILiT 시안으로. 점 무늬로 하프톤 덩어리를 두 군데 깐다. */
.section--cyan { background: var(--cyan); }
.section--cyan::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgb(13 27 36 / .22) 1px, transparent 1.4px); background-size: 7px 7px; -webkit-mask: radial-gradient(38% 46% at 8% 92%, #000, transparent 72%), radial-gradient(34% 42% at 94% 10%, #000, transparent 72%); mask: radial-gradient(38% 46% at 8% 92%, #000, transparent 72%), radial-gradient(34% 42% at 94% 10%, #000, transparent 72%); }
@media (min-width: 60rem) { .section { padding-block: var(--space-10); } }
.wrap { position: relative; z-index: 2; width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--page-gutter); }
.stack { display: grid; gap: var(--space-5); align-content: start; }
.stack--center { justify-items: center; text-align: center; }
.head { display: grid; gap: var(--space-4); max-width: 52rem; }
/* 넓은 섹션의 제목 덩어리 — 가운데에 세우고 모서리 괄호로 두른다(참고 사이트의 제목 틀). */
.stack > .head { justify-items: center; justify-self: center; text-align: center; padding: var(--space-6) var(--space-5); --c: #00a6d6; --l: 18px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l) no-repeat; }
.stack > .head .p-lede { margin-inline: auto; }
.section--cyan .stack > .head { --c: var(--ink); }
.glow::before { content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none; background:
  radial-gradient(34% 40% at 4% 18%, rgb(8 217 237 / .38), transparent 70%),
  radial-gradient(30% 36% at 97% 82%, rgb(8 217 237 / .28), transparent 70%),
  radial-gradient(26% 30% at 70% 6%, rgb(29 91 255 / .1), transparent 70%); }

/* ── 타이포 — 아주 큰 그로테스크 제목 + 고정폭 라벨 ── */
.eyebrow { display: inline-flex; align-items: center; gap: .6em; width: fit-content; margin: 0; padding: .35em .75em; border-radius: 999px; background: var(--cyan); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .01em; }
.section .eyebrow::before { content: counter(sec, decimal-leading-zero); padding-inline-end: .6em; border-inline-end: 1px solid rgb(13 27 36 / .35); color: var(--ink); font-weight: 700; }
.section--cyan .eyebrow { background: var(--ink); color: var(--cyan); }
.section--cyan .eyebrow::before { color: var(--cyan); border-color: rgb(8 217 237 / .45); }
.p-title { margin: 0; font-family: var(--font-display); font-size: clamp(2.1rem, 5.2vw, 4.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; }
.p-title em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: .085em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
/* 시안 면 위의 강조 — 잉크 상자에 시안 글자(참고 사이트의 검은 라벨 상자). 줄이 바뀌어도 상자가 줄마다 이어진다. */
:is(.section--cyan, .final) .p-title em { text-decoration: none; padding-inline: .1em; background: var(--ink); color: var(--cyan); -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.p-title--hero { font-size: clamp(2.5rem, 7.6vw, 7.2rem); line-height: 1; letter-spacing: -.065em; }
/* 나란히 놓인 섹션의 제목은 칸이 좁다 — 한 단 작게. */
.split .p-title { font-size: clamp(2rem, 4.2vw, 3.7rem); }
.p-lede { margin: 0; max-width: 44rem; color: var(--ink-2); font-size: var(--text-lg); line-height: 1.65; }
.section--cyan .p-lede, .final .p-lede { color: var(--ink); }
.lines > span { display: block; text-wrap: balance; }
.stack--center .p-lede { margin-inline: auto; }
.note { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.6; text-wrap: pretty; }
.note--xs { font-size: var(--text-xs); }
.caption { margin: var(--space-3) 0 0; color: var(--ink-2); font-family: var(--font-mono); font-size: .72rem; line-height: 1.6; text-wrap: pretty; }
.section--cyan .caption { color: var(--ink); }
.aside-line { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; max-width: 40rem; color: var(--ink); font-size: var(--text-sm); font-weight: 700; line-height: 1.55; }
.aside-line::before { content: ""; flex: none; width: 1.1rem; height: 3px; margin-block-start: .65em; background: var(--cyan); box-shadow: 0 0 0 1px var(--ink); }
.callout { margin: 0; padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-md); background: #fff; color: var(--ink); font-weight: 600; line-height: 1.6; text-wrap: pretty; box-shadow: 0 1px 2px rgb(13 27 36 / .06), 0 14px 36px rgb(13 27 36 / .1); }
.callout b { padding-inline: .2em; background: var(--ink); color: var(--cyan); font-family: var(--font-mono); }

/* ── 버튼 — 각진 상자. 주 행동은 시안, 시안 면 위에서는 잉크로 뒤집는다. ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.25rem; padding-inline: var(--space-6); border: 0; background: var(--ink); color: #fff; font-size: var(--text-sm); font-weight: 800; line-height: 1.2; text-decoration: none; text-align: center; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
/* 버튼 — 테두리 없이 채운 면. 주 행동은 시안, 보조는 잉크. 시안 면 위에서는 주 행동이 잉크, 보조가 흰 면으로 뒤집힌다. */
.btn-mint { background: var(--cyan); color: var(--ink); }
:is(.section--cyan, .final) .btn-mint { background: var(--ink); color: #fff; }
:is(.section--cyan, .final) .btn:not(.btn-mint) { background: #fff; color: var(--ink); }
.btn-lg { min-height: 3.6rem; padding-inline: var(--space-7); font-size: var(--text-base); }
.btn-down::after { content: "\2193"; }
.btn-go::after { content: "\2192"; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.stack--center .cta-row { justify-content: center; }
.text-link { color: var(--cb); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: .3em; }
:is(.section--cyan, .final) .text-link { color: var(--ink); }
@media (max-width: 39.999rem) { .cta-row .btn { width: 100%; } }

/* ── AI 이름표 — 포커스(인물 추적) · 스카우트(장면 탐색) ─────────────
   🔴 1toN 도식에는 포커스만 붙인다. 스카우트는 개인 편집 단계에만 쓴다(재구성안 §1 AI 명칭). */
.ai-chip { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; padding: .3rem .55rem; border: 1px solid var(--ink); background: #e3f9fd; color: var(--ink); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; line-height: 1; white-space: nowrap; }
.ai-chip b { color: #00639c; font-weight: 700; }
.ai-chip--scout { background: #f4ffc7; }
.ai-chip--scout b { color: #4a5c00; }

/* ── 단계 목록 — 각진 시안 칸 + 가로 줄 ── */
.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--ink); }
.step { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--space-4); row-gap: .3rem; align-items: start; padding-block: var(--space-4); border-block-end: 1px solid var(--line); }
.step-icon { grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .7rem; background: var(--cyan); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; }
.step-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { grid-column: 2; margin: 0; padding-block-start: .2rem; font-size: 1.125rem; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
.step p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.6; text-wrap: pretty; }
.step .ai-chip { grid-column: 2; margin-block-start: .25rem; }
/* 시안 면 위 — 번호 칸은 흰 칸으로, 설명 글자는 잉크로(시안 위 10:1). */
.section--cyan .step-icon { background: #fff; }
.section--cyan :is(.step p, .note) { color: var(--ink); }
.section--cyan .step { border-color: rgb(13 27 36 / .25); }
.steps[data-reveal="off"] .step { opacity: 0; transform: translateY(.9rem); }
.steps[data-reveal="on"] .step { animation: step-in .55s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 120ms) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(.9rem); } to { opacity: 1; transform: none; } }

/* ── 나란히(카피 | 시연) — 휴대폰에서는 제목 → 시연 → 짧은 설명 순서로 쌓는다(재구성안 §8). ── */
.split { display: grid; gap: var(--space-6); grid-template-areas: "head" "media" "body"; }
.split-head { grid-area: head; }
.split-media { grid-area: media; margin: 0; min-width: 0; }
.split-body { grid-area: body; display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head media" "body media"; grid-template-rows: auto 1fr; column-gap: var(--space-8); row-gap: var(--space-5); }
  .split--flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "media head" "media body"; }
  .split-media { align-self: center; }
}

/* ── 영상 칸 — 테두리·제목줄 없이 둥근 모서리와 옅은 그림자만 ─────────────
   🔺 2026-10-09 레트로 창(검은 제목줄·잉크 테두리·비껴 선 그림자)을 영상에서 걷었다(사용자 지시 —
      "요소들을 둘러싸고 있는 웹페이지 느낌의 요소들은 영상에 적용하지 않는다"). 색은 그대로 둔다.
      카드·안내 상자·휴대폰 목업은 영상이 아니라 그대로다. */
.media { overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 24px 60px rgb(13 27 36 / .18); }
.screen { position: relative; overflow: hidden; background: #000; }
.screen video { width: 100%; height: auto; }

/* ── 배경 영상(남은 자리) ── */
.bg-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── 히어로 — 시안 하늘. 구름은 흰 빛 덩어리, 위에 고운 낟알을 얹는다. ── */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 100svh; padding-block: calc(var(--header-h) + var(--space-6)) var(--space-8); overflow: clip; }
.sky { background:
  radial-gradient(26% 22% at 14% 18%, rgb(255 255 255 / .95), transparent 72%),
  radial-gradient(22% 20% at 86% 14%, rgb(255 255 255 / .9), transparent 72%),
  radial-gradient(30% 24% at 72% 44%, rgb(255 255 255 / .55), transparent 72%),
  radial-gradient(42% 36% at 26% 52%, rgb(8 217 237 / .55), transparent 72%),
  radial-gradient(38% 34% at 88% 62%, rgb(29 91 255 / .32), transparent 72%),
  radial-gradient(40% 40% at 50% 8%, rgb(8 217 237 / .65), transparent 70%),
  linear-gradient(180deg, #8ee8f8 0%, #c6f4fc 42%, #f2fcfe 78%, var(--paper) 100%); }
.sky::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .14 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* 개인·팀 히어로 — 긴 원본 영상(hero-tracking.mp4)이 첫 화면을 가득 채우고, 카피는 가운데에 선다(사용자 지시 2026-10-09).
   🔺 카피를 왼쪽에 두고 왼쪽을 누르던 판에서 바꿨다 — 영상이 가장자리까지 보이고 글자는 가운데 한 덩어리.
   🔴 대비 — 소재가 밝은 얼음·하늘이라 밝은 막 위 잉크 글자로 간다. 막은 카피가 앉는 가운데 타원에만 짙고(.8)
      바깥으로 갈수록 빠져 가장자리는 영상 그대로다. 제목·본문이 놓이는 범위는 막 .7 이상(가장 어두운 선수복 위에서도 잉크 본문 9:1 이상).
   🔺 오른쪽 아래 작은 세로 그림(10번 = 나)은 걷었다(사용자 지시 2026-10-09) — 바로 아래 「주인공을 지정해보세요!」 체험이 같은 말을 한다. */
.hero--video { align-items: center; background: var(--paper); }
.hero--video .bg-video { object-position: 50% 45%; }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(ellipse 46% 42% at 50% 52%, rgb(226 249 253 / .82) 0%, rgb(214 246 252 / .72) 55%, rgb(150 232 246 / .3) 82%, rgb(150 232 246 / 0) 100%),
  linear-gradient(to bottom, rgb(8 217 237 / .18), transparent 22%, transparent 80%, rgb(8 217 237 / .22)); }
.hero-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--space-5); text-align: center; }
.hero-copy .p-title--hero { font-size: clamp(2.5rem, 6vw, 5.6rem); }
.hero-copy .p-lede { margin-inline: auto; color: var(--ink); }
.hero-copy .aside-line { justify-content: center; }
.hero-copy .cta-row { justify-content: center; }
@media (max-width: 59.999rem) {
  /* 휴대폰 — 가운데 카피 뒤에만 세로로 긴 막을 깐다. 위·아래 가장자리는 영상이 보인다. */
  .hero--video .bg-video { object-position: 46% 45%; }
  .hero-scrim { background:
    radial-gradient(ellipse 85% 46% at 50% 54%, rgb(226 249 253 / .86) 0%, rgb(214 246 252 / .78) 60%, rgb(150 232 246 / .3) 88%, rgb(150 232 246 / 0) 100%),
    linear-gradient(to bottom, rgb(244 252 254 / .3), transparent 20%, transparent 85%, rgb(251 253 254 / .5)); }
}
.intro-line { display: flex; align-items: baseline; gap: .6rem; width: min(100%, 30rem); margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; }
.intro-line span:nth-child(2) { flex: 1; border-block-end: 2px dotted var(--ink); transform: translateY(-.25em); }
/* 세로로 흐르는 고정폭 글자 — 참고 사이트의 옆줄 장식. 넓은 화면에서만. */
.side-code { position: absolute; inset-block-start: 50%; inset-inline-start: var(--space-5); z-index: 2; display: none; color: rgb(13 27 36 / .55); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; white-space: nowrap; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; pointer-events: none; }
/* 낮은 화면에서는 세로 글자가 머리(상단 바)까지 올라와 로고와 부딪힌다 — 넓고 높은 화면에서만. */
@media (min-width: 72rem) and (min-height: 52rem) { .side-code { display: block; } }
.hero-grid { display: grid; gap: var(--space-5); grid-template-areas: "head" "media" "body"; }
.hero-head { grid-area: head; display: grid; gap: var(--space-4); }
.hero-media { grid-area: media; margin: 0; min-width: 0; }
.hero-body { grid-area: body; display: grid; gap: var(--space-5); align-content: start; }
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "head media" "body media"; grid-template-rows: auto 1fr; column-gap: var(--space-8); row-gap: var(--space-5); align-items: start; }
  .hero-media { align-self: center; }
}

/* ── 잘라낸 장면 — 포스터 한 장에서 한 사람을 세로(9:16)로 잘라 보인다 ─────────
   --src 포스터, --x/--y 자를 칸의 왼쪽 위(원본 px), --w 자를 칸의 폭(원본 px). 원본은 1280×720 이다.
   🔴 영상이 아니라 포스터를 쓴다 — 움직이는 영상을 고정된 자리로 자르면 사람이 칸 밖으로 나간다. */
.crop { --sw: 1280; --sh: 720; position: relative; aspect-ratio: 9 / 16; overflow: hidden; background-color: #000; background-image: var(--src); background-repeat: no-repeat; background-size: calc(var(--sw) / var(--w) * 100%) auto; background-position: calc(var(--x) / (var(--sw) - var(--w)) * 100%) calc(var(--y) / (var(--sh) - var(--w) * 16 / 9) * 100%); }
.shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000 var(--src) center / cover no-repeat; }
.shot video { width: 100%; height: 100%; object-fit: cover; }
.mark { position: absolute; border: 2px solid var(--lime); box-shadow: 0 0 0 1px var(--ink), 0 0 16px rgb(215 255 0 / .5); }
.mark span { position: absolute; inset: auto auto 100% -2px; margin-block-end: .25rem; padding: .1rem .35rem; background: var(--lime); color: var(--ink); font-family: var(--font-mono); font-size: .68rem; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 0 0 1px var(--ink); }
.tag { position: absolute; inset: auto auto .5rem .5rem; padding: .25rem .45rem; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; line-height: 1.2; }

/* ── 1toN 도식 — 원본 하나 → 포커스 → 인물별 영상 → 각자에게 전달 ── */
.flow { display: grid; gap: var(--space-4); align-items: center; }
.flow-src { display: grid; gap: var(--space-2); }
.flow-arrow { display: grid; justify-items: center; gap: var(--space-2); color: var(--ink); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; text-align: center; }
.flow-arrow::after { content: "\2193"; color: var(--ink); font-size: 1.4rem; line-height: 1; }
.flow-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.flow-out { display: grid; gap: var(--space-2); justify-items: center; margin: 0; }
.flow-out .crop { width: 100%; border-radius: .6rem; box-shadow: 0 12px 28px rgb(13 27 36 / .18); }
.flow-src > .shot { border-radius: var(--radius-md); box-shadow: 0 18px 40px rgb(13 27 36 / .18); }
.flow-out figcaption { color: var(--ink); font-size: var(--text-xs); font-weight: 800; text-align: center; }
.flow-out figcaption small { display: block; color: var(--ink-2); font-family: var(--font-mono); font-weight: 500; }
.flow-label { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; }
.flow-bracket { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-5) 0 0; padding-block-start: var(--space-3); border-block-start: 2px solid var(--ink); color: var(--ink); font-size: var(--text-sm); font-weight: 800; }
@media (min-width: 52rem) {
  .flow { grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); gap: var(--space-5); }
  .flow-arrow::after { content: "\2192"; }
}
.next-box { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-md); background: #fff; box-shadow: 0 1px 2px rgb(13 27 36 / .06), 0 14px 36px rgb(13 27 36 / .1); }
.next-box h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-base); font-weight: 800; }
.next-box p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.6; }

/* ── 휴대폰 목업 — 실제 화면이 아니라는 표시를 늘 함께 둔다(재구성안 §8). ── */
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.phone-step { display: grid; gap: var(--space-2); margin: 0; min-width: 0; }
.phone-step figcaption { min-height: 2.8em; color: var(--ink); font-size: var(--text-xs); font-weight: 700; line-height: 1.4; }
.phone-step figcaption b { padding-inline: .3em; margin-inline-end: .2em; background: var(--ink); color: var(--cyan); font-family: var(--font-mono); }
.phone { display: grid; align-content: start; gap: .5rem; aspect-ratio: 9 / 15; padding: .7rem .55rem; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 1.1rem; background: #fff; color: var(--ink); font-size: .62rem; line-height: 1.35; box-shadow: 0 14px 30px rgb(13 27 36 / .14); }
.phone-top { display: flex; align-items: center; gap: .35rem; font-weight: 800; }
.avatar { flex: none; width: 1.3rem; aspect-ratio: 1; border-radius: 999px; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 0 0 1px var(--ink); }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; }
.thumb { position: relative; aspect-ratio: 9 / 14; background: #000 var(--src) var(--pos, center) / cover no-repeat; }
.thumb.is-hit { box-shadow: 0 0 0 2px var(--blue); }
.thumb.is-hit::after { content: "NEW"; position: absolute; inset: .15rem auto auto .15rem; padding: 0 .2rem; background: var(--lime); color: var(--ink); font-family: var(--font-mono); font-size: .5rem; font-weight: 700; }
.tabs { display: flex; gap: .3rem; border-block-end: 1px solid var(--line); }
.tabs span { padding: .2rem .3rem; border-block-end: 2px solid var(--blue); color: var(--blue); font-weight: 800; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: .35rem .4rem; border: 1px solid var(--line); }
.opt.is-on { border-color: var(--blue); background: #e8efff; color: var(--ink); font-weight: 800; }
.opt.is-on::after { content: "\2713"; color: var(--blue); font-weight: 800; }
.phone-btn { display: grid; place-items: center; min-height: 1.5rem; border: 1px solid var(--ink); background: var(--cyan); color: var(--ink); font-weight: 800; }
.phone-muted { color: var(--ink-2); }
.preview { aspect-ratio: 16 / 10; background: #000 var(--src) var(--pos, center) / cover no-repeat; }

/* ── 카드 — 흰 상자 + 잉크 테두리 + 비껴 선 그림자 ── */
.cards { display: grid; gap: var(--space-5); }
@media (min-width: 52rem) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { display: grid; align-content: start; gap: var(--space-3); min-width: 0; padding: var(--space-5); border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--ink); text-align: start; overflow: hidden; box-shadow: 0 1px 2px rgb(13 27 36 / .06), 0 14px 36px rgb(13 27 36 / .1); }
.card h3 { margin: 0; font-size: var(--text-lg); font-weight: 800; line-height: 1.3; letter-spacing: -.035em; text-wrap: balance; }
.card p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.6; text-wrap: pretty; }
.card-kicker { width: fit-content; padding: .15rem .4rem; background: var(--ink); color: var(--cyan); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; }
.card-icon { display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border-radius: .7rem; background: var(--cyan); color: var(--ink); }
.card-icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-media { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-1); overflow: hidden; }
.facts { display: grid; gap: var(--space-2); margin: 0; }
.facts div { display: grid; gap: .15rem; padding-block-start: var(--space-2); border-block-start: 1px solid var(--line); }
.facts dt { color: var(--cb); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; }
.facts dd { margin: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.5; }

/* ── FAQ — 고정폭 번호 ── */
.faq { display: grid; width: 100%; margin-block-start: var(--space-5); text-align: start; counter-reset: q; }
.faq details { border-block-start: 1px solid var(--ink); }
.faq details:last-of-type { border-block-end: 1px solid var(--ink); }
.faq summary { display: flex; align-items: center; gap: var(--space-4); min-height: 3.75rem; padding-block: var(--space-4); cursor: pointer; font-size: var(--text-base); font-weight: 800; letter-spacing: -.02em; list-style: none; text-wrap: balance; counter-increment: q; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q" counter(q, decimal-leading-zero); flex: none; padding: .2rem .4rem; border-radius: .35rem; background: var(--cyan); color: var(--ink); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; }
.faq summary::after { content: "+"; flex: none; margin-inline-start: auto; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: rgb(13 27 36 / .07); font-family: var(--font-mono); font-size: var(--text-base); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; background: var(--cyan); }
.faq p { margin: 0 0 var(--space-5); padding-inline-start: calc(var(--space-4) + 1.75rem); max-width: 46rem; color: var(--ink-2); font-size: var(--text-sm); text-wrap: pretty; }
@media (min-width: 60rem) {
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); align-items: start; }
  .faq details:nth-last-of-type(2) { border-block-end: 1px solid var(--ink); }
}

/* ── 최종 CTA — 시안→시안블루 면 + 영상 ── */
.final { position: relative; isolation: isolate; padding-block: var(--space-9); border-block-start: 1px solid var(--ink); background: linear-gradient(120deg, var(--cyan) 0%, #3fd0f6 45%, #5aa2ff 100%); color: var(--ink); overflow: clip; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgb(13 27 36 / .2) 1px, transparent 1.4px); background-size: 7px 7px; -webkit-mask: radial-gradient(40% 60% at 85% 50%, #000, transparent 75%); mask: radial-gradient(40% 60% at 85% 50%, #000, transparent 75%); }
.final-grid { display: grid; gap: var(--space-7); align-items: center; }
.final-copy { justify-items: start; text-align: start; }
@media (min-width: 60rem) { .final-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
/* 영상이 꽉 차는 최종 CTA(개인·팀) — 영상 위에 시안 막을 덮고 카피를 가운데에 세운다(사용자 지시 2026-10-09).
   🔴 대비 — 막은 카피가 앉는 가운데 타원에서 시안 .9 이상이라, 어두운 경기장 위에서도 잉크 제목·본문이 7:1 위다.
      가장자리로 갈수록 시안블루 .45 까지 빠져 영상이 비친다. 점 무늬는 가장자리에만 얹는다. */
.final--video { display: flex; align-items: center; min-height: min(100svh, 52rem); padding-block: var(--space-9); background: var(--ink); }
.final--video .bg-video { object-position: 50% 55%; }
.final-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(ellipse 50% 58% at 50% 50%, rgb(8 217 237 / .93) 0%, rgb(8 217 237 / .86) 58%, rgb(40 180 245 / .62) 82%, rgb(29 110 255 / .45) 100%); }
.final--video::before { z-index: 1; -webkit-mask: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 55%, #000 100%); mask: radial-gradient(ellipse 60% 70% at 50% 50%, transparent 55%, #000 100%); }
.final--video .final-copy { justify-items: center; text-align: center; }
.final--video .p-lede { margin-inline: auto; }
@media (max-width: 59.999rem) {
  .final-scrim { background: radial-gradient(ellipse 95% 55% at 50% 50%, rgb(8 217 237 / .93) 0%, rgb(8 217 237 / .86) 62%, rgb(40 180 245 / .62) 86%, rgb(29 110 255 / .45) 100%); }
}
.final-mark-wrap { position: relative; isolation: isolate; display: block; width: clamp(4.5rem, 7vw, 6rem); border-radius: 18%; }
.final-mark { display: block; width: 100%; height: auto; border-radius: 18%; box-shadow: 0 0 0 1.5px var(--ink); }
@property --sweep { syntax: "<angle>"; inherits: true; initial-value: 384deg; }
@property --tail { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.final-neon { --sweep: 384deg; position: absolute; z-index: -1; border-radius: inherit; pointer-events: none; }
.final-neon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #1d5bff 0%, #ffffff 45%, #d7ff00 100%);
  -webkit-mask: conic-gradient(from 0deg, transparent calc(var(--tail) - 24deg), #000 var(--tail), #000 calc(var(--sweep) - 24deg), transparent var(--sweep));
          mask: conic-gradient(from 0deg, transparent calc(var(--tail) - 24deg), #000 var(--tail), #000 calc(var(--sweep) - 24deg), transparent var(--sweep)); }
.final-neon--rim { inset: -3px; filter: blur(6px); opacity: .95; }
.final-neon--bloom { inset: -4px; filter: blur(22px); opacity: .85; transform: scale(1.1); }
.final-mark-wrap[data-neon="off"] .final-neon { --sweep: 0deg; }
.final-mark-wrap[data-neon="on"] .final-neon { animation: neon-sweep 5.6s linear .25s infinite both; }
.final-mark-wrap[data-neon="on"] .final-neon--bloom { animation-delay: .4s; }
@keyframes neon-sweep { 0% { --sweep: 0deg; --tail: 0deg; } 50% { --sweep: 384deg; --tail: 0deg; } 62.5% { --sweep: 384deg; --tail: 0deg; } 100% { --sweep: 384deg; --tail: 384deg; } }

/* ── 옛 주소 안내 — 없어진 앵커(#pricing 등)로 들어온 분에게 어디로 갔는지 알린다(재구성안 §7). ── */
.legacy-notice { position: fixed; inset: calc(var(--header-h) + var(--space-3)) var(--page-gutter) auto; z-index: var(--z-overlay); display: grid; gap: var(--space-3); max-width: 34rem; margin-inline: auto; padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgb(13 27 36 / .22); }
.legacy-notice p { margin: 0; padding-inline-end: var(--space-6); font-size: var(--text-sm); font-weight: 700; line-height: 1.6; }
.legacy-notice .cta-row .btn { width: auto; min-height: 2.75rem; padding-inline: var(--space-4); font-size: var(--text-xs); }
.legacy-close { position: absolute; inset: var(--space-2) var(--space-2) auto auto; width: 2.5rem; height: 2.5rem; border: 0; background: none; color: var(--ink); font-size: 1.3rem; }

/* ── 대화상자 — 「제작 과정 보기」·「팀 프로필 예시 보기」 ── */
.dlg { width: min(100% - 2rem, 60rem); max-height: calc(100svh - 2rem); padding: 0; border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 30px 80px rgb(13 27 36 / .35); }
.dlg::backdrop { background: rgb(13 27 36 / .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 0 0 var(--space-4); background: var(--ink); color: #fff; }
.dlg-head h2 { margin: 0; font-family: var(--font-mono); font-size: .8rem; font-weight: 500; }
.dlg-close { width: 2.75rem; height: 2.75rem; border: 0; background: var(--cyan); color: var(--ink); font-size: 1.4rem; }
.dlg-body { display: grid; gap: var(--space-3); padding: var(--space-5); }
.dlg-body video { width: 100%; height: auto; max-height: 70svh; background: #000; }

/* ── 푸터 ── */
.footer { padding-block: var(--space-8) var(--space-5); border-block-start: 1px solid var(--ink); background: var(--cyan); color: var(--ink); }
.footer-shell { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--page-gutter); }
.footer-line { max-width: 20ch; margin: 0; font-size: clamp(2.6rem, 8vw, 7rem); font-weight: 800; line-height: .95; letter-spacing: -.065em; text-wrap: balance; }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-start: var(--space-7); padding-block-start: var(--space-4); border-block-start: 1px solid var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); }
.footer-mark { display: inline-flex; align-items: center; gap: var(--space-2); }
.footer-icon { width: 2.75rem; height: auto; border-radius: .65rem; box-shadow: 0 0 0 1px var(--ink); }
.footer-wordmark { width: 8rem; height: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-links a { text-underline-offset: .25em; }
.draft-flag { margin: var(--space-5) 0 0; color: var(--ink); font-family: var(--font-mono); font-size: .7rem; line-height: 1.7; }

/* ── 스크롤 등장 — 화면에 들 때 아래에서 떠오른다(site.js 가 data-rise 를 붙인다). ── */
[data-rise="off"] { opacity: 0; translate: 0 1.25rem; }
[data-rise="on"] { animation: rise-in .75s cubic-bezier(.2, .8, .2, 1) calc(var(--rise-i, 0) * 80ms) both; }
@keyframes rise-in { from { opacity: 0; translate: 0 1.25rem; } to { opacity: 1; translate: 0 0; } }

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-action:hover, .btn:hover { transform: translateY(-2px); }
  .btn:hover { background: var(--blue); color: #fff; }
  .btn-mint:hover { background: var(--ink); color: var(--cyan); }
  :is(.section--cyan, .final) .btn:hover { background: var(--ink); color: #fff; }
  :is(.section--cyan, .final) .btn-mint:hover { background: var(--blue); color: #fff; }
  .faq summary:hover { color: var(--cb); }
}

/* 움직임 줄이기 · 데이터 절약 — 영상은 포스터로 멈추고(site.js), 떠오름·단계·네온은 처음부터 다 보인다. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-rise] { animation: none; opacity: 1; translate: none; }
  .steps[data-reveal] .step { animation: none; opacity: 1; transform: none; }
  .final-mark-wrap[data-neon] .final-neon { animation: none; --sweep: 384deg; --tail: 0deg; }
}