/* MovePath 소개 홈페이지 공용 스타일 — 설계서 docs/superpowers/specs/2026-10-20-movepath-homepage-design.md
   색은 앱 app/globals.css 토큰 값 그대로. 연두(--lime)는 뼈대·궤적(데이터)에만.
   JS 가 없으면 모든 글·그림이 끝난 모습으로 보인다 — 숨기는 규칙은 html.js 아래에만. */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-700.woff2) format("woff2"); }

:root {
  --navy: #0B1630; --navy-2: #16274F; --navy-hi: #22366A; --deep: #060C1C;
  --brand: #1D4F91; --brand-hi: #2D63B0; --brand-soft: #E3EAF5;
  --ice: #C3D9F3; --bg: #EEF1F6; --surface: #F8FAFD; --tone: #E8EEF7; --muted: #4F586C; --danger: #C8261A;
  --lime: #C5F24A; --kakao: #FEE500;
  --line: rgb(11 22 48 / .12);
  --raise: 14px 14px 32px rgb(11 22 48 / .12), -10px -10px 26px rgb(255 255 255 / .95);
  --raise-sm: 6px 6px 14px rgb(11 22 48 / .10), -6px -6px 14px rgb(255 255 255 / .9);
  --inset: inset 3px 3px 7px rgb(11 22 48 / .12), inset -3px -3px 7px #fff;
  --spring: cubic-bezier(.16, 1, .3, 1);
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --num: "Barlow Condensed", var(--sans);
  color-scheme: light;
}
html[lang="en"] { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.7 var(--sans); color: var(--navy); background: var(--deep); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
html[lang="en"] body { word-break: normal; overflow-wrap: normal; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brand-hi); outline-offset: 3px; border-radius: 8px; }
.stage :focus-visible, .top :focus-visible { outline-color: var(--ice); }
.nb { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.lg { width: 28px; height: 28px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 840px; }
.center { text-align: center; }

/* 글 */
h1 { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.16; letter-spacing: -.035em; font-weight: 800; }
h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.25; letter-spacing: -.03em; font-weight: 800; max-width: 22em; }
h3 { font-size: 19px; line-height: 1.4; letter-spacing: -.02em; font-weight: 700; }
.lead { margin-top: 18px; font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); max-width: 38em; }
.note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.num-big { font: 700 44px/1.05 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tag { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0; background: var(--brand-soft); color: var(--brand); }
.tag.pro { background: var(--navy); color: var(--ice); }

/* 단추 */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px 0 8px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .5s var(--spring), box-shadow .5s var(--spring); }
.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(.98); }
.btn .k { width: 40px; height: 40px; border-radius: 50%; background: var(--kakao); display: grid; place-items: center; flex: none; }
.btn .k svg { width: 20px; height: 20px; }
.btn-ice { color: var(--navy); background: linear-gradient(180deg, #fff, var(--ice)); box-shadow: 0 12px 30px -12px rgb(195 217 243 / .7); }
.btn .k.mail { background: var(--navy); color: var(--ice); }
.btn-navy .k.mail { background: var(--ice); color: var(--navy); }
.btn-ice:hover { box-shadow: 0 16px 40px -10px rgb(195 217 243 / .85); }
.btn-navy { color: #fff; background: linear-gradient(170deg, var(--navy-hi), var(--navy-2) 55%, var(--navy)); box-shadow: 0 14px 30px -14px rgb(11 22 48 / .7); margin-top: 32px; }
.btn-sm { min-height: 48px; font-size: 15px; padding-right: 18px; padding-left: 6px; gap: 10px; }
.btn-sm .k { width: 34px; height: 34px; }
.btn-plain { padding-left: 26px; }
.ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: rgb(255 255 255 / .82); text-decoration: none; }
.ghost:hover { color: #fff; }

/* 머리 — 떠 있는 유리 알약 */
.top { position: fixed; z-index: 20; top: 14px; left: 16px; right: 16px; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 6px 6px 6px 18px; border-radius: 999px; color: #fff; background: rgb(11 22 48 / .5); border: 1px solid rgb(195 217 243 / .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background .4s; }
.top.solid { background: rgb(11 22 48 / .9); }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; min-width: 48px; text-decoration: none; font: 700 22px/1 var(--num); letter-spacing: .02em; }
.logo b { color: var(--ice); font-weight: 700; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.nav a, .lang { color: rgb(255 255 255 / .74); text-decoration: none; padding: 12px 0; }
.lang { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 4px; }
.nav a:hover, .lang:hover { color: #fff; }
.lang { font-size: 14px; }

/* 무대(첫 화면 · Pro · 마지막) */
.stage { position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(60% 50% at 78% 22%, rgb(195 217 243 / .2), transparent 70%),
              radial-gradient(40% 40% at 8% 92%, rgb(45 99 176 / .25), transparent 70%),
              linear-gradient(170deg, var(--navy-hi) 0%, var(--navy) 50%, var(--deep) 100%); }
.stage .lead { color: rgb(255 255 255 / .72); }
.floor { position: absolute; z-index: -1; left: -20%; right: -20%; bottom: -12%; height: 72%;
  background-image: linear-gradient(rgb(195 217 243 / .12) 1px, transparent 1px), linear-gradient(90deg, rgb(195 217 243 / .12) 1px, transparent 1px);
  background-size: 72px 72px; transform: perspective(700px) rotateX(64deg); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
.giant { position: absolute; z-index: -1; right: 2vw; top: 50%; translate: 0 -52%; font: 700 clamp(220px, 32vw, 540px)/.8 var(--num); color: transparent; -webkit-text-stroke: 1.5px rgb(195 217 243 / .2); font-variant-numeric: tabular-nums; letter-spacing: -.02em; user-select: none; pointer-events: none; width: 1.8em; text-align: right; } /* 폭 고정 — 자릿수가 바뀌어도 상자가 안 움직이게(CLS) */
.hero { min-height: min(100svh, 960px); display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 24px; padding-top: 96px; padding-bottom: 120px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: rgb(255 255 255 / .72); margin-bottom: 24px; }
.kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgb(197 242 74 / .18); }
.hero .sub { margin-top: 24px; max-width: 31em; font-size: clamp(17px, 1.4vw, 19px); color: rgb(255 255 255 / .76); }
.hero .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 36px; }
.trust { margin-top: 22px; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgb(255 255 255 / .64); }
.trust .ic { color: var(--ice); margin-top: 2px; }
.rise { animation: rise .9s var(--spring) both; }
@keyframes rise { from { transform: translateY(24px); } }
.viewer { position: relative; height: min(76svh, 740px); align-self: end; }
.viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.corner { position: absolute; width: 34px; height: 34px; border: 2px solid rgb(195 217 243 / .55); }
.corner.tl { top: 0; left: 6%; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.corner.tr { top: 0; right: 6%; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.corner.bl { bottom: 0; left: 6%; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.corner.br { bottom: 0; right: 6%; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.hud { position: absolute; z-index: 1; left: 6%; top: 16px; display: flex; gap: 8px; margin-left: 12px; }
.pill { padding: 7px 12px; border-radius: 999px; background: rgb(6 12 28 / .72); border: 1px solid rgb(195 217 243 / .2); font-size: 13px; color: rgb(255 255 255 / .86); white-space: nowrap; }
.pill b { font: 700 16px/1 var(--num); color: var(--lime); margin-left: 5px; }
.ticker { position: absolute; left: 0; right: 0; bottom: 40px; height: 56px; border-top: 1px solid rgb(195 217 243 / .12); background: rgb(6 12 28 / .5); overflow: hidden; display: flex; align-items: center; }
.ticker div { display: flex; gap: 40px; white-space: nowrap; padding-left: 40px; font-size: 15px; color: rgb(255 255 255 / .62); animation: slide 42s linear infinite; }
.ticker span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); margin-right: 12px; vertical-align: middle; opacity: .8; }
@keyframes slide { to { transform: translateX(-50%); } }

/* 밝은 몸통 */
.paper { position: relative; z-index: 1; background: var(--bg); border-radius: 40px 40px 0 0; margin-top: -40px; }
.stage + .paper, .stage.pro { margin-top: -40px; }
.stage.pro { border-radius: 40px 40px 0 0; padding: 136px 0 176px; }
.paper + .stage { margin-top: -40px; border-radius: 40px 40px 0 0; }
.paper:has(+ .stage) { padding-bottom: 40px; }
.sec { padding: 120px 0 0; }
.paper > .sec:last-child { padding-bottom: 136px; }
.intro { padding: 96px 0 0; }
.define { font-size: clamp(20px, 2.1vw, 28px); line-height: 1.6; letter-spacing: -.02em; font-weight: 500; max-width: 34em; }
.define strong { font-weight: 800; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.facts div { padding: 26px 28px; border-radius: 24px; background: linear-gradient(180deg, #fff, var(--surface)); border: 1px solid rgb(255 255 255 / .8); box-shadow: var(--raise-sm); }
.facts dt { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.facts dt span { font: 700 1.6em/1 var(--num); font-variant-numeric: tabular-nums; }
.facts dd { margin-top: 6px; font-size: 15px; color: var(--muted); }

/* 비교 */
.cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; margin-top: 28px; }
.cols .lead { margin-top: 0; font-size: clamp(19px, 1.7vw, 23px); color: var(--navy); font-weight: 600; line-height: 1.6; }
.cols .body p + p { margin-top: 14px; }
.cols .body { color: var(--muted); }
.cols .body strong { color: var(--navy); }
.cmp { width: 100%; margin-top: 48px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp th, .cmp td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 16px; }
.cmp thead th { font-size: 15px; color: var(--muted); font-weight: 700; }
.cmp tbody th { font-weight: 700; width: 18%; }
.cmp td { color: var(--muted); }
.cmp .me { background: linear-gradient(170deg, var(--navy-hi), var(--navy)); color: #fff; font-weight: 700; border-bottom-color: rgb(195 217 243 / .14); }
.cmp thead .me { color: var(--ice); border-radius: 24px 24px 0 0; font-size: 17px; }
.cmp tbody tr:last-child .me { border-radius: 0 0 24px 24px; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.verdict { margin-top: 28px; padding: 22px 26px; border-radius: 20px; background: var(--tone); font-weight: 700; box-shadow: 10px 10px 24px rgb(29 79 145 / .12), -8px -8px 20px rgb(255 255 255 / .9); }

/* 3단계 */
.steps { position: relative; margin-top: 72px; }
.steps-line { position: absolute; z-index: 1; left: 0; right: 0; top: -20px; width: 100%; height: 40px; pointer-events: none; }
.steps-line path { fill: none; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.steps ol { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps li { position: relative; padding: 36px 30px 30px; border-radius: 28px; background: linear-gradient(180deg, #fff, var(--surface)); border: 1px solid rgb(255 255 255 / .8); box-shadow: var(--raise); }
.steps .num { position: absolute; z-index: 2; top: -22px; left: 28px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); box-shadow: var(--inset), 0 0 0 6px var(--bg); font: 700 22px/1 var(--num); color: var(--brand); }
.steps .ic { color: var(--brand); margin-bottom: 10px; }
.steps p { margin-top: 8px; font-size: 16px; color: var(--muted); }

/* 검사 11가지 */
.bento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; margin-top: 48px; }
.area, .mini { border-radius: 28px; padding: 28px; background: linear-gradient(180deg, #fff, var(--surface)); border: 1px solid rgb(255 255 255 / .8); box-shadow: var(--raise); }
.area.big { grid-row: span 2; }
.minis { display: grid; gap: 20px; align-content: start; }
.fig { width: 100%; height: 170px; padding: 6px 0; margin-bottom: 20px; border-radius: 20px; background: radial-gradient(80% 70% at 50% 30%, #1b2a4f, var(--navy) 80%); }
.fig .bones path { fill: none; stroke: var(--lime); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.fig .head { fill: none; stroke: var(--lime); stroke-width: 3; }
.fig .joints circle { fill: #fff; stroke: var(--navy); stroke-width: 1.5; }
.fig .chair path, .fig .ground { fill: none; stroke: rgb(195 217 243 / .45); stroke-width: 2.5; stroke-linecap: round; }
.tests { margin-top: 14px; }
.tests li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.tests strong { display: block; color: var(--navy); font-size: 16px; }
.mini { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-content: start; background: var(--tone); box-shadow: 10px 10px 24px rgb(29 79 145 / .12), -8px -8px 20px rgb(255 255 255 / .9); }
.mini .ic { grid-row: span 2; color: var(--brand); }
.mini p { font-size: 15px; color: var(--muted); }

/* 목록 */
.checks { margin-top: 28px; display: grid; gap: 4px; }
.checks li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 12px; height: 7px; border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg); }
.checks strong { display: block; color: var(--navy); }
.checks.two { grid-template-columns: 1fr 1fr; column-gap: 40px; }
.checks.dark li { border-color: rgb(195 217 243 / .14); color: rgb(255 255 255 / .7); }
.checks.dark li::before { border-color: var(--ice); }
.checks.dark strong { color: #fff; }

/* 리포트 — 기울어진 폰 + 떠 있는 카드 */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.rev > :first-child { order: 2; }
.scene { position: relative; height: 640px; perspective: 1600px; }
.phone { position: absolute; left: 50%; top: 10px; width: 290px; margin-left: -145px; padding: 11px; border-radius: 46px; background: linear-gradient(160deg, #2a3a63, var(--navy) 60%); box-shadow: 0 60px 90px -40px rgb(11 22 48 / .55), inset 0 1px 1px rgb(255 255 255 / .25); transform: rotateX(8deg) rotateY(-14deg) rotateZ(2deg); }
.phone img { width: 100%; height: auto; border-radius: 36px; }
.phone .screen { position: relative; aspect-ratio: 780 / 1466; border-radius: 36px; overflow: hidden; background: radial-gradient(80% 60% at 50% 35%, #1b2a4f, #070d1f 80%); }
.phone .screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone .screen .pill { position: absolute; left: 14px; top: 18px; }
.float { position: absolute; padding: 18px 20px; border-radius: 24px; background: linear-gradient(180deg, #fff, var(--surface)); border: 1px solid rgb(255 255 255 / .8); box-shadow: var(--raise); }
.float small { display: block; font-size: 13px; color: var(--muted); }
.float.f1 { left: 0; top: 70px; width: 240px; }
.float.f2 { right: 0; top: 260px; }
.float.f3 { left: 6%; bottom: 60px; padding: 14px; }
.bar { position: relative; height: 10px; border-radius: 999px; margin: 12px 0 8px; background: var(--bg); box-shadow: inset 2px 2px 4px rgb(11 22 48 / .12), inset -2px -2px 4px #fff; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-hi)); }
.bar u { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--navy); }
.chip { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--navy); color: var(--ice); font: 700 20px/1 var(--num); letter-spacing: .01em; }
[data-depth] { transition: translate .9s var(--spring); }

/* 체형교정 — 4:5 변화 카드 */
.card45 { aspect-ratio: 4 / 5; max-width: 420px; width: 100%; justify-self: center; padding: 30px; border-radius: 32px; color: #fff; display: flex; flex-direction: column; background: radial-gradient(70% 50% at 80% 0%, rgb(195 217 243 / .22), transparent 70%), linear-gradient(170deg, var(--navy-hi), var(--navy) 60%, var(--deep)); box-shadow: 0 40px 70px -30px rgb(11 22 48 / .6); }
.card45 .cap { font-size: 15px; color: rgb(255 255 255 / .72); }
.arc { width: 72%; margin: 8px auto 0; overflow: visible; }
.arc .track { fill: none; stroke: rgb(195 217 243 / .14); stroke-width: 10; }
.arc .first { fill: none; stroke: rgb(195 217 243 / .45); stroke-width: 10; stroke-linecap: round; }
.arc .gain { fill: none; stroke: var(--lime); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; }
.arc .body { stroke: rgb(255 255 255 / .35); stroke-width: 4; stroke-linecap: round; }
.arc .arm { transform-box: view-box; transform-origin: 120px 120px; transform: rotate(-162deg); }
.arc .arm line { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.arc .arm circle, .arc .pivot { fill: var(--lime); stroke: var(--navy); stroke-width: 2; }
.pair { display: flex; justify-content: center; gap: 36px; margin-top: auto; }
.pair span { text-align: center; }
.pair small { display: block; font-size: 13px; color: rgb(255 255 255 / .62); }
.pair b { font: 700 34px/1.1 var(--num); font-variant-numeric: tabular-nums; }
.delta { text-align: center; font: 700 64px/1 var(--num); color: var(--lime); margin-top: 6px; }
.wm { margin-top: 12px; text-align: center; font-size: 12px; color: rgb(255 255 255 / .5); }

/* 개인정보 흐름 */
.flow { margin-top: 48px; padding: 28px; border-radius: 32px; background: linear-gradient(180deg, #fff, var(--surface)); border: 1px solid rgb(255 255 255 / .8); box-shadow: var(--raise); }
.flow svg { width: 100%; height: auto; max-height: 260px; }
.flow .dev, .flow .srv { fill: var(--bg); stroke: var(--navy); stroke-width: 2.5; }
.flow .srv { fill: var(--tone); }
.flow .photo rect, .flow .photo path { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.flow .photo circle { fill: var(--brand); }
.flow .wire { fill: none; stroke: var(--line); stroke-width: 2.5; stroke-dasharray: 6 8; }
.flow .dots circle { fill: var(--brand); stroke: #fff; stroke-width: 2; }
.flow .srv-line { stroke: var(--navy); stroke-width: 3; stroke-linecap: round; opacity: .5; }
.flow figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 15px; color: var(--muted); }
.flow figcaption span { flex: 1; } .flow figcaption span:last-child { text-align: right; }
.flow figcaption b { display: block; color: var(--navy); }

/* Pro — 바 궤적 */
.barpath { justify-self: center; width: min(360px, 100%); }
.barpath svg { width: 100%; height: auto; }
.barpath .rack { stroke: rgb(195 217 243 / .16); stroke-width: 2; }
.barpath .trail { fill: none; stroke: var(--lime); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; }
.barpath .plate { fill: rgb(195 217 243 / .1); stroke: var(--ice); stroke-width: 3; }
.barpath .hub { fill: var(--lime); }
.barpath figcaption { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; margin-top: 8px; font-size: 14px; color: rgb(255 255 255 / .66); }
.barpath figcaption b { display: block; font: 700 32px/1.1 var(--num); color: #fff; }
.barpath .ex { width: 100%; text-align: center; font-size: 12px; color: rgb(255 255 255 / .6); }

/* 누구를 위해 */
.who { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.who div { padding: 22px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 13em 1fr; gap: 16px; }
.who dt { font-weight: 800; }
.who dd { color: var(--muted); font-size: 16px; }

/* 자주 묻는 질문 */
.faq { margin-top: 36px; display: grid; gap: 12px; }
.faq details { border-radius: 20px; background: linear-gradient(180deg, #fff, var(--surface)); border: 1px solid rgb(255 255 255 / .8); box-shadow: var(--raise-sm); }
.faq summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--spring); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 22px 20px; color: var(--muted); font-size: 16px; }

/* 마지막 단추 · 바닥글 */
.final { padding: 140px 0 120px; }
.final h2 { margin: 0 auto; }
.final .lead { margin: 18px auto 34px; }
.small { margin-top: 18px; font-size: 15px; }
.small a { color: rgb(255 255 255 / .82); display: inline-flex; align-items: center; min-height: 48px; }
.dim { color: rgb(255 255 255 / .5); font-size: 14px; }
.foot { background: var(--deep); color: rgb(255 255 255 / .7); padding: 48px 0 56px; font-size: 14px; border-top: 1px solid rgb(195 217 243 / .1); }
.foot .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; }
.foot .notice { margin-top: 16px; max-width: 52em; }
.foot .notice strong { color: #fff; margin-right: 6px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 16px 0; }
.foot .links a { color: rgb(255 255 255 / .82); min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; }

/* JS 가 있을 때만 — 처음 모습(끝난 모습은 기본) */
.js .count-wait { visibility: visible; }
.js .draw-wait { stroke-dashoffset: 1; }
.js .drawn { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--spring); }
.js #change-card .gain.draw-wait { stroke-dashoffset: 1; }
.js #change-card .arm.wait { transform: rotate(-150deg); }
.js #change-card .arm { transition: transform 1.4s var(--spring) .2s; }
.js #change-card .delta.wait { opacity: 0; transform: scale(.8); }
.js #change-card .delta { transition: opacity .6s .9s, transform .8s var(--spring) .9s; }
.js .flow .dots circle { transition: transform 1.3s var(--spring); }
.js .flow .photo { transition: transform .6s var(--spring); }

/* 반응형 */
@media (max-width: 1000px) {
  .nav { display: none; }
  .top { gap: 12px; padding-left: 14px; }
  .lang { margin-left: auto; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 120px; padding-bottom: 88px; gap: 36px; }
  .viewer { height: min(58svh, 520px); min-height: 380px; }
  .giant { top: 72%; right: -6vw; }
  .cols, .split { grid-template-columns: 1fr; gap: 32px; }
  .split.rev > :first-child { order: 0; }
  .bento { grid-template-columns: 1fr 1fr; }
  .area.big, .minis { grid-column: span 2; grid-row: auto; }
  .minis { grid-template-columns: 1fr 1fr; }
  .who { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .top { top: 10px; left: 10px; right: 10px; }
  .logo span { display: none; }
  .btn { font-size: 15px; padding-right: 20px; }
  .sec { padding-top: 80px; }
  .paper > .sec:last-child { padding-bottom: 96px; }
  .intro { padding-top: 72px; }
  .facts, .steps ol, .bento, .checks.two { grid-template-columns: 1fr; }
  .area.big, .minis { grid-column: auto; }
  .minis { grid-template-columns: 1fr; }
  .steps-line { display: none; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { display: flex; flex-direction: column; margin-bottom: 16px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--raise-sm); }
  .cmp tbody th { width: auto; padding: 14px 18px 6px; border: 0; }
  .cmp td { padding: 8px 18px; border: 0; display: flex; justify-content: space-between; gap: 12px; }
  .cmp td::before { content: attr(data-label); font-size: 13px; color: var(--muted); font-weight: 600; flex: none; }
  .cmp td.me { order: -1; margin: 0 10px 4px; border-radius: 14px; padding: 12px 14px; }
  .cmp tbody th { order: -2; }
  .cmp td.me::before { color: var(--ice); }
  .cmp tbody tr:last-child .me { border-radius: 14px; }
  .scene { height: 560px; }
  .phone { width: 240px; margin-left: -120px; }
  .float.f1 { width: 200px; top: 20px; }
  .float.f2 { top: 300px; }
  .who div { grid-template-columns: 1fr; gap: 4px; }
  .stage.pro { padding: 96px 0 128px; }
  .flow { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 404 */
.lost { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.lost .row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 12px; }

/* 검사 설명 페이지(scripts/site-pages.mjs 가 만든 /tests/ · /bar-path/) — 홈 부품을 그대로 쓰고 첫 화면만 낮춘다 */
.hero.page { min-height: 0; grid-template-columns: 1.25fr 1fr; padding-top: 136px; padding-bottom: 112px; }
.hero.page.solo { grid-template-columns: 1fr; }
.hero.page h1 { font-size: clamp(32px, 3.6vw, 52px); max-width: 18em; }
.hero.page .viewer { height: min(60svh, 560px); }
.pfig { justify-self: center; width: min(380px, 100%); }
.pfig .fig { height: 300px; margin: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 8px; font-size: 14px; color: rgb(255 255 255 / .64); }
.crumbs li + li::before { content: "›"; margin-right: 8px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 48px; color: rgb(255 255 255 / .84); }
.specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.specs .pill { white-space: normal; }
.prose p { margin-top: 16px; color: var(--muted); }
.prose p:first-child { margin-top: 24px; font-size: clamp(17px, 1.4vw, 19px); color: var(--navy); }
.prose strong { color: var(--navy); }
.prose cite { font-style: normal; font-weight: 700; color: var(--navy); }
.tlinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tlinks a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: linear-gradient(180deg, #fff, var(--surface)); box-shadow: var(--raise-sm); text-decoration: none; font-size: 15px; font-weight: 600; }
.tlinks a:hover { color: var(--brand); }
.tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.tcard { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 24px; background: linear-gradient(180deg, #fff, var(--surface)); border: 1px solid rgb(255 255 255 / .8); box-shadow: var(--raise); text-decoration: none; transition: transform .5s var(--spring); }
.tcard:hover { transform: translateY(-3px); }
.tcard p { font-size: 15px; color: var(--muted); }
.tcard .meta { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--brand); }
@media (max-width: 1000px) {
  .hero.page { grid-template-columns: 1fr; padding-top: 112px; padding-bottom: 88px; }
  .hero.page .viewer { height: min(52svh, 460px); min-height: 340px; }
  .tcards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .pfig .fig { height: 220px; }
  .tcards { grid-template-columns: 1fr; }
}
/* 홈 검사 이름 → 설명 페이지 링크: 줄 높이는 그대로 두고 누르는 칸만 48px */
.tests strong a, .checks strong a { display: inline-flex; align-items: center; min-height: 48px; margin: -10px 0; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tests strong a:hover, .checks:not(.dark) strong a:hover { color: var(--brand); }
/* 검사 설명 페이지 본문 — 첫 화면과 같은 왼쪽 선, 글 줄은 읽기 좋은 폭까지만 */
.doc .prose, .doc .checks, .doc .verdict, .doc .note, .doc .tlinks { max-width: 820px; }