/* LIMELIGHT home mockup v14-A '하나의 입자장' — design system (from v13-A; 담당자 피드백 10/15)
   Colour: one near-black indigo ground, #0A0B12 (10/19 feedback: the background darker, closer to black than #181B2C · #0F1120 —
   L* 10.3 · 5.5 → 3.1; a trace of indigo left so it is the brand's dark, not a void). One accent: lime,
   for our brand, the main action, selection, loading — and the hero's lime itself. Type: Pretendard throughout (the words the
   particle shapes carry included; numbers in tabular figures). Motion: the same curves as js/motion.js. */
:root {
  --bg: #0A0B12; --bg-2: #0F1019; --bg-3: #151724; --bg-4: #1C1F30; --night: #06070B; --bg-rgb: 10, 11, 18;
  --panel-a: rgba(28, 32, 50, 0.55); --panel-b: rgba(14, 16, 26, 0.75); --well: rgba(3, 4, 8, 0.5);
  --line: rgba(190, 205, 255, 0.09); --line-2: rgba(190, 205, 255, 0.15); --line-3: rgba(190, 205, 255, 0.24);
  --ink: #F1F3FA; --ink-2: #C9CFE0; --ink-3: #959CB6; --ink-4: #6D7492;
  --lime: #DCFF50; --lime-ink: #1A1F06; --lime-soft: rgba(220, 255, 80, 0.14); --ice: #9DB2FF; --lav: #B69CEB; --coral: #F0956B;
  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  /* (loop 2) Hangul is not in Geist Mono — without Pretendard next in the stack, Windows falls back to GulimChe */
  --mono: "Geist Mono", "Pretendard Variable", Pretendard, ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --wrap: 1240px; --gut: clamp(20px, 4vw, 56px);
  /* (v15: one type scale — eight sizes, three weights. v14-A set text in 17 sizes (11 · 11.5 · 12 · 12.5 · 13 · 14 · 14.5 · 15 · 16 ·
     16.5 · 18 · 18.5 · 19.5 …) and 7 weights; the design-folder sites use 5–11 sizes and 3–4 weights — craft_probe.py) */
  /* (10/20, user: '화면을 조금 내릴 때 글자 차이가 너무 많이 난다' — a section head was 56 px bold over 17 px copy (3.3×), a step 32 px
     over 17 (1.9×); the live site sets 42 · 16.5 (2.5×) and 19 · 16.5. One ratio now, ≈ 1.55 a level up from the 17 px body:
     step 26 · section 42 · hero 64, and section heads and steps a weight lighter (600). type17.py measures every pair) */
  --t-display: clamp(40px, 4.45vw, 64px); --t-h2: clamp(30px, 2.95vw, 42px); --t-h3: clamp(21px, 1.8vw, 26px);
  --t-lead: clamp(18px, 1.32vw, 19px); --t-body: 17px; --t-ui: 15px; --t-small: 13px; --t-micro: 12px;
  --w-body: 400; --w-ui: 600; --w-head: 700; --w-sub: 600;
  --h1: var(--t-display); --h2: var(--t-h2); --h3: var(--t-h3);
  --radius: 20px;
  color-scheme: dark;
}
/* (10/19 user: 'PC에서 보는 화면 그대로 모바일에서도 — 글자가 너무 크거나 배치가 깨져서는 안 된다') a phone keeps the PC's
   hierarchy at a phone's scale. Measured before (360 × 586): headlines 31 px (the homes 40), body 17 px as on a PC, the hero's
   copy filling 63–105 % of the first screen and its 3D 6–24 % of it (PC 32–36 %). Now: display 25–29, h2 21–24, h3 18–20,
   lead and body 15 — a headline breaks at about the PC's twelve characters a line */
@media (max-width: 760px) {
  :root { --t-display: clamp(25px, 7vw, 29px); --t-h2: clamp(21px, 5.9vw, 24px); --t-h3: clamp(18px, 4.9vw, 20px); --t-lead: 15px; --t-body: 15px; --t-ui: 14px; }
}
:root[data-bg="dark"] {
  /* (10/19: the one ground — '#dark' links of earlier rounds land on the same) */
  --bg: #0A0B12; --bg-2: #0F1019; --bg-3: #151724; --bg-4: #1C1F30; --night: #06070B; --bg-rgb: 10, 11, 18;
  --panel-a: rgba(28, 32, 50, 0.55); --panel-b: rgba(14, 16, 26, 0.75); --well: rgba(3, 4, 8, 0.5);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--w-body) var(--t-body)/1.72 var(--font); letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-break: keep-all; overflow-wrap: break-word; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: var(--w-sub); letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-weight: var(--w-head); }
h1 strong, h2 strong { color: var(--lime); font-weight: inherit; }
::selection { background: var(--lime); color: var(--lime-ink); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding-inline: var(--gut); }
.label { display: inline-flex; align-items: center; gap: 8px; font: var(--w-ui) var(--t-small)/1 var(--font); color: var(--ink-3); }
.link-arrow { color: var(--ink); font-weight: 600; background: linear-gradient(var(--lime), var(--lime)) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size 0.5s var(--ease-out), color 0.3s; white-space: nowrap; }
.link-arrow:hover { background-size: 100% 1.5px; color: var(--lime); }

/* ── reveals (js/motion.js): words rise out of masks line by line; blocks rise and fade ── */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.02em 0.12em; margin: -0.06em -0.02em -0.12em; }
.w { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 1s var(--ease-out) var(--d, 0s); will-change: transform; }
[data-reveal].in .w { transform: none; }
[data-reveal="up"] { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 0.7s var(--ease-quart) var(--d0, 0s), transform 0.9s var(--ease-out) var(--d0, 0s); }
[data-reveal="rise"] { opacity: 0; transform: translate3d(0, 48px, 0) scale(0.985); transition: opacity 0.8s var(--ease-quart) var(--d0, 0s), transform 1s var(--ease-out) var(--d0, 0s); }
[data-reveal="up"].in, [data-reveal="rise"].in { opacity: 1; transform: none; }

/* ── buttons ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 999px; font: var(--w-ui) var(--t-ui)/1 var(--font); letter-spacing: -0.01em; white-space: nowrap; isolation: isolate; overflow: hidden; transition: transform 0.6s var(--ease-out), box-shadow 0.5s var(--ease-out), background-color 0.3s; }
.btn-sm { height: 40px; padding: 0 18px; }
.btn-lg { height: 62px; padding: 0 34px; font-size: var(--t-body); }
.btn-lime { color: var(--lime-ink); background: var(--lime); box-shadow: 0 10px 28px -14px rgba(220, 255, 80, 0.35); }
.btn-lime::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px 60px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), transparent 70%); opacity: 0; transition: opacity 0.4s; }
.btn-lime:hover::before { opacity: 1; }
.btn-lime:hover { box-shadow: 0 12px 32px -14px rgba(220, 255, 80, 0.45); }
.btn-ghost { color: var(--ink); background: rgba(190, 205, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-ghost:hover { background: rgba(190, 205, 255, 0.1); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn:active { transform: scale(0.97); transition-duration: 0.15s; }
.btn { --roll: 52px; } .btn-sm { --roll: 40px; } .btn-lg { --roll: 62px; }
.btn-t { position: relative; display: inline-block; transition: transform 0.6s var(--ease-out); }
.btn-t::after { content: attr(data-t); position: absolute; left: 0; top: var(--roll); white-space: nowrap; }
@media (hover: hover) { .btn:hover .btn-t { transform: translate3d(0, calc(-1 * var(--roll)), 0); } }
.link-arrow .ar { display: inline-block; transition: transform 0.5s var(--ease-out); }
@media (hover: hover) { .link-arrow:hover .ar { transform: translate3d(4px, 0, 0); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── boot: src/css/boot.css (10/20 — inlined first in <head>, the homes too) ── */

/* ── nav: glass on scroll, hides going down, returns going up ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 28px; height: 72px; padding: 0 var(--gut); transition: transform 0.7s var(--ease-out), background-color 0.4s, box-shadow 0.4s, backdrop-filter 0.4s; }
.nav.scrolled { background: rgba(var(--bg-rgb), 0.66); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.nav.away { transform: translate3d(0, -100%, 0); }
.nav-logo { display: inline-flex; align-items: center; gap: 9px; font: var(--w-head) var(--t-body)/1 var(--font); letter-spacing: -0.02em; }
.nav-logo em { font-style: normal; color: var(--ink-3); }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a { padding: 9px 13px; border-radius: 10px; font-size: var(--t-ui); font-weight: var(--w-body); color: var(--ink-2); transition: color 0.25s, background-color 0.25s; }
.nav-links a:hover { color: var(--ink); background: rgba(190, 205, 255, 0.07); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-login { font-size: var(--t-ui); color: var(--ink-2); }

/* ── hero ── (v16-B: v15-A's — the lime beside the headline; B's full-screen moments are its landscapes) */
.hero { position: relative; }
.hero-pin { position: relative; }
.hero-stage { position: relative; min-height: max(100svh, 780px); display: grid; align-items: center; }
.hero-copy { translate: 0 calc(var(--exit, 0) * -32px); opacity: calc(1 - var(--exit, 0)); }

.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: 24px; padding-block: 120px 120px; pointer-events: none; }
.hero-copy { max-width: 740px; display: grid; gap: 32px; justify-items: start; pointer-events: auto; }
.hero h1 { font-size: var(--h1); line-height: 1.06; letter-spacing: -0.04em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { font-size: var(--t-ui); color: var(--ink-2); }   /* (v15: ink-3 was 5.1 : 1 on the bare dusk — the brighter lime's light took it under 4.5 on a phone) */
.trust::first-letter { color: var(--ink); }

/* ── section rhythm ── */
section { position: relative; }
.hook, .compare, .faq { padding-block: clamp(96px, 11vw, 160px); }
section h2 { font-size: var(--h2); line-height: 1.1; }

/* ── hook + checker ── */
.hook-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hook-copy { display: grid; gap: 22px; align-content: start; }
.hook-copy p:not(:has(a)) { font-size: var(--t-lead); color: var(--ink-2); max-width: 28em; }
.checker { position: relative; border-radius: 26px; padding: 18px; background: linear-gradient(180deg, var(--panel-a), var(--panel-b)); box-shadow: inset 0 0 0 1px var(--line-2), 0 60px 120px -50px rgba(6, 8, 20, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.ck-top { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; }
/* (v15) a light under the pointer — on the panel only, while the pointer is over it (sites-craft #11; the 10/8 rule: no light that follows the pointer across the page) */
.checker::after, .cmp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(190, 205, 255, 0.07), transparent 70%); opacity: 0; transition: opacity 0.5s var(--ease-quart); }
@media (hover: hover) { .checker:hover::after, .cmp:hover::after { opacity: 1; } }
.ck-dots { display: flex; gap: 6px; } .ck-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(190, 205, 255, 0.18); }
.ck-title { font: var(--w-ui) var(--t-small)/1 var(--font); color: var(--ink-2); }
.ck-free { margin-left: auto; font: var(--w-ui) var(--t-micro)/1 var(--font); padding: 6px 9px; border-radius: 8px; color: var(--lime); background: var(--lime-soft); }
.ck-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.ck-field { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.ck-field span { font: var(--w-body) var(--t-micro)/1 var(--font); color: var(--ink-3); }
.ck-field b { font: var(--w-ui) var(--t-ui)/1.2 var(--font); color: var(--ink); }
.ck-field b::after { content: ''; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--lime); opacity: 0; }
.checker.typing .ck-field b.typing::after { animation: caret 0.9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 1; } }
.ck-run { display: inline-flex; align-items: center; gap: 8px; height: auto; padding: 0 22px; border: 0; border-radius: 14px; font: var(--w-ui) var(--t-ui)/1 var(--font); color: var(--lime-ink); background: var(--lime); cursor: pointer; transition: transform 0.5s var(--ease-out), filter 0.3s; }
.ck-run svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-run:hover { filter: brightness(1.06); } .ck-run.press { transform: scale(0.95); }
.ck-brands { display: flex; gap: 6px; padding: 12px 0 4px; }
.ck-brand { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; font: var(--w-ui) var(--t-small)/1 var(--font); color: var(--ink-3); background: rgba(190, 205, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: color 0.3s, background-color 0.3s, box-shadow 0.3s; }
.ck-brand.on { color: var(--ink); background: rgba(190, 205, 255, 0.1); box-shadow: inset 0 0 0 1px var(--line-3); }
.ck-brand.own.on { color: var(--lime-ink); background: var(--lime); box-shadow: none; }
.ck-rows { display: grid; gap: 4px; padding-top: 10px; }
.ck-row { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 132px 74px; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 12px; background: rgba(14, 16, 30, 0.3); overflow: hidden; }
.ck-row img { width: 26px; height: 26px; border-radius: 24%; }
.ck-row .nm { font: var(--w-ui) var(--t-ui)/1 var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-row .bar { position: relative; height: 6px; border-radius: 3px; background: rgba(190, 205, 255, 0.08); overflow: hidden; }
.ck-row .bar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: var(--ice); transform: scaleX(var(--k, 0)); transform-origin: 0 50%; }
.ck-row.own .bar i { background: var(--lime); box-shadow: 0 0 12px rgba(220, 255, 80, 0.6); }
.ck-row .val { font: var(--w-ui) var(--t-ui)/1 var(--font); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ck-row .val small { color: var(--ink-3); font-weight: var(--w-body); font-size: var(--t-micro); }
.ck-row .scan { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(157, 178, 255, 0.12), transparent); transform: translateX(-100%); opacity: 0; }
.ck-row.scanning .scan { opacity: 1; animation: scan 1.1s var(--ease-io) infinite; }
@keyframes scan { to { transform: translateX(100%); } }
.ck-sum { display: flex; align-items: baseline; gap: 12px; padding: 14px 6px 4px; font: var(--w-body) var(--t-ui)/1.45 var(--font); color: var(--ink-3); min-height: 44px; }
.ck-sum b { font: var(--w-head) var(--t-h3)/1 var(--font); color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ck-sum b.own { color: var(--lime); }

/* ── core: three steps, one pipeline (pinned) ── */
.core { padding-top: clamp(80px, 10vw, 150px); }
.core-head, .feat-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(32px, 5vw, 96px); row-gap: 20px; align-items: end; justify-items: start; text-align: left; }
.core-head h2, .feat-head h2 { color: var(--ink-3); }
.core-head h2 strong, .feat-head h2 strong { color: var(--ink); white-space: nowrap; }   /* (the key words stay one phrase: '3가지 핵심 기능' broke over two lines) */
.core-head p, .feat-head p { padding-bottom: 0.35em; }
.core-head p { font-size: var(--t-lead); color: var(--ink-2); }
.core-pin { position: relative; height: 420vh; margin-top: clamp(30px, 4vw, 60px); }
.core-stage { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: clip; }
.core-grid { display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.core-steps { position: relative; min-height: 420px; }
.step { position: absolute; inset: 0 0 auto 0; display: grid; gap: 18px; align-content: start; opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.28s var(--ease-in), transform 0.36s var(--ease-in); pointer-events: none; }
.step.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.6s var(--ease-quart) 0.26s, transform 0.9s var(--ease-out) 0.26s; }
.step.past { transform: translate3d(0, -16px, 0); }
.step h3 .w { transition-delay: calc(var(--d, 0s) + 0.26s); }
.step .label { color: var(--lime); }
.step h3 { font-size: var(--t-h3); line-height: 1.25; }
.step p:not(.label) { font-size: var(--t-body); color: var(--ink-2); line-height: 1.72; }
.core-dots { position: absolute; left: 0; bottom: -10px; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.core-dots li { position: relative; display: grid; place-items: center; width: 44px; height: 30px; border-radius: 9px; font: var(--w-ui) var(--t-micro)/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.core-dots li::before { content: ''; position: absolute; inset: 0; background: var(--lime-soft); transform: scaleX(var(--k, 0)); transform-origin: 0 50%; }
.core-dots li.on { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); }

.dv-chip { display: inline-flex; align-items: center; gap: 9px; font: var(--w-ui) var(--t-small)/1 var(--font); color: var(--ink-3); }
.dv-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }

/* ── compare ── */
.compare h2 { max-width: 15em; }
.cmp { position: relative; margin-top: clamp(40px, 5vw, 72px); border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, rgba(34, 39, 64, 0.6), rgba(26, 30, 50, 0.7)); box-shadow: inset 0 0 0 1px var(--line), 0 60px 120px -60px rgba(6, 8, 20, 0.85); }
.cmp table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp th, .cmp td { padding: 26px 28px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: var(--t-ui); line-height: 1.65; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp th { font: var(--w-ui) var(--t-small)/1 var(--font); color: var(--ink-3); padding-block: 22px; }
.cmp th:last-child { color: var(--lime); }
.cmp td:first-child { width: 22%; font-weight: 700; color: var(--ink); }
.cmp td:nth-child(2) { color: #A8AFC6; }   /* (loop 3: ink-3 was 4.8:1 on the glass card before any 3D - 5.5:1 or more now, still below our column) */
.cmp td:nth-child(2) strong { color: #FFB4A8; font-weight: var(--w-ui); }
.cmp td:last-child { position: relative; color: var(--ink); font-weight: var(--w-ui); }
.cmp th:last-child, .cmp td:last-child { background: linear-gradient(90deg, rgba(220, 255, 80, 0.07), rgba(220, 255, 80, 0.025)); box-shadow: inset 1px 0 0 rgba(220, 255, 80, 0.22); }
.cmp tbody tr { transition: background-color 0.4s; }
.cmp tbody tr:hover { background: rgba(190, 205, 255, 0.035); }

/* ── features + the real dashboard ── */
.features { padding-top: clamp(100px, 12vw, 180px); }
.feat-head p { font-size: var(--t-lead); color: var(--ink-2); max-width: 34em; }
.feat-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(60px, 7vw, 110px); }
.feat-list { display: grid; padding-block: 20vh 32vh; }
.feat { display: grid; gap: 12px; min-height: 64vh; align-content: center; padding-left: 24px; border-left: 1.5px solid var(--line); transition: border-color 0.6s; }
.feat.on { border-color: var(--lime); }
.feat .label { color: var(--ink-3); } .feat.on .label { color: var(--lime); }
@media (max-width: 760px) { .feat:not(.on) .label { color: var(--ink-2); } }   /* (v16-C r4: on a phone a feature's 13 px label sits right under its particle card — ink-3 read 4.29 : 1 there with the card's light behind it, legib16; v15 fixed the trust line the same way. After the rule above: same weight, so it must come later — the first try sat before it and did nothing) */
/* (loop 3: the items out of focus were dimmed to opacity 0.5 — 2.6:1 under their labels and 3.7:1 under their text on the
   plain page already. Out of focus is now one quiet colour instead: clearly behind the item in focus, still 6.3:1) */
@media (min-width: 1081px) {
  .feat h3, .feat p, .feat .link-arrow { transition: color 0.6s var(--ease-quart); }
  .feat:not(.on) h3, .feat:not(.on) p:not(.label), .feat:not(.on) .link-arrow { color: var(--ink-3); }
}
.feat h3 { font-size: var(--t-h3); line-height: 1.25; }
.feat p:not(.label) { font-size: var(--t-body); color: var(--ink-2); line-height: 1.72; }
.feat-stage { position: relative; }
.feat-visual { position: sticky; top: calc(50vh - min(24vw, 360px) * 0.69); }
.anchor-dash { width: 100%; aspect-ratio: 3 / 2.06; }

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-side { position: sticky; top: 140px; }
.faq-list { display: grid; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa h3 { font-size: inherit; letter-spacing: inherit; font-weight: inherit; }
.qa-q { display: flex; align-items: center; gap: 20px; width: 100%; padding: 26px 4px; border: 0; background: none; color: var(--ink); text-align: left; font: var(--w-ui) var(--t-lead)/1.45 var(--font); letter-spacing: -0.02em; cursor: pointer; transition: color 0.3s; }
.qa-q span { flex: 1; } .qa-q:hover { color: #fff; }
.qa-ico { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 0.4s, box-shadow 0.4s, transform 0.6s var(--ease-out); }
.qa-ico::before, .qa-ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; border-radius: 1px; background: var(--ink-2); transition: transform 0.6s var(--ease-out), background-color 0.3s; }
.qa-ico::after { transform: rotate(90deg); }
.qa-q:hover .qa-ico { box-shadow: inset 0 0 0 1px var(--line-3); }
.qa.open .qa-ico { background: var(--lime); box-shadow: none; transform: rotate(180deg); }
.qa.open .qa-ico::before, .qa.open .qa-ico::after { background: var(--lime-ink); }
.qa.open .qa-ico::after { transform: rotate(180deg); }
.qa-a { height: 0; overflow: hidden; }
.qa-a p { padding: 0 64px 28px 4px; font-size: var(--t-body); line-height: 1.75; color: var(--ink-2); opacity: 0; transform: translateY(-6px); transition: opacity 0.5s var(--ease-quart) 0.05s, transform 0.7s var(--ease-out); }
.qa.open .qa-a p { opacity: 1; transform: none; }
.qa-a a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(220, 255, 80, 0.6); text-underline-offset: 3px; }

/* ── final ── */
.final { position: relative; }
.final-pin { position: relative; height: 210vh; }
.final-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; display: grid; align-items: center; overflow: clip; }
.final-copy { display: grid; gap: 24px; justify-items: center; text-align: center; padding-block: 120px; }
.final h2 { font-size: var(--t-display); line-height: 1.06; letter-spacing: -0.04em; }
.final-copy > p:not(.cta) { font-size: var(--t-lead); color: var(--ink-2); }
.final .cta { margin-top: 12px; }

/* ── footer ── */
.foot { border-top: 1px solid var(--line); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 28px; font: var(--w-body) var(--t-micro)/1.4 var(--font); color: var(--ink-3); }
.foot-logo { display: inline-flex; align-items: center; gap: 8px; font: var(--w-head) var(--t-ui)/1 var(--font); color: var(--ink-2); letter-spacing: -0.02em; }

/* ── narrower screens ── */
@media (max-width: 1080px) {
  .core-head, .feat-head { grid-template-columns: minmax(0, 1fr); }
  .nav-links { display: none; }
  .hook-grid, .core-grid, .feat-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .feat-list { padding-block: 0; gap: 24px; }
  .feat { min-height: 0; opacity: 1; padding-block: 8px; }
  .feat-stage { order: -1; }
  .feat-visual { position: relative; top: 0; }
  .faq-side { position: relative; top: 0; }
}
@media (max-width: 760px) {
  /* (loop 2) the comparison stacks into one card per row on phones (a 720px table scrolled sideways hid our column) */
  .cmp table, .cmp tbody, .cmp tr, .cmp td { display: block; width: auto; }
  .cmp thead, .cmp-beam { display: none; }
  .cmp tr { padding: 22px 20px; border-bottom: 1px solid var(--line); } .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp td { padding: 0; border: 0; } .cmp td:first-child { width: auto; margin-bottom: 12px; font-size: var(--t-body); }
  .cmp td:nth-child(2)::before, .cmp td:last-child::before { display: block; margin-bottom: 6px; font: var(--w-ui) var(--t-small)/1 var(--font); }
  .cmp td:nth-child(2)::before { content: '타사 대시보드'; color: var(--ink-4); }
  .cmp td:last-child { margin-top: 14px; padding: 14px 16px; border-radius: 14px; } .cmp td:last-child::before { content: '라임라이트AI'; color: var(--lime); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { height: 62px; } .nav-login { display: none; }
  .hero-cta .btn { height: 50px; padding: 0 20px; }
  .ck-form { grid-template-columns: 1fr 1fr; } .ck-run { grid-column: 1 / -1; height: 46px; justify-content: center; }
  .ck-row { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 8px; height: auto; padding: 10px 12px 11px; }   /* (2판: the engine's whole name — on a phone the bar goes under it) */
  .ck-row img { grid-row: 1 / 3; } .ck-row .nm { grid-column: 2; grid-row: 1; } .ck-row .val { grid-column: 3; grid-row: 1; } .ck-row .bar { grid-column: 2 / 4; grid-row: 2; }
  .qa-a p { padding-right: 8px; }
  .foot-row { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .w, [data-reveal] { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ── v13-A: one particle field behind the page; DOM anchors say where its shapes stand ── */
.world { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; pointer-events: none; }
main, .foot { position: relative; z-index: 1; }
.gl-labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.anchor { position: relative; pointer-events: none; }
.anchor-hero { justify-self: end; width: min(118%, 660px); aspect-ratio: 1; margin-right: calc(var(--gut) * -0.5); }
/* (v16-B) the landscapes: a full-screen box in a pinned stage — the field lays itself out in the camera's space */
.anchor-full { position: absolute; inset: 0; }
.meadow-pin { position: relative; height: 230vh; }
.meadow-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: clip; }
.meadow-stage .core-head { position: relative; padding-top: clamp(104px, 13vh, 150px); }   /* (the heading in the sky band: the horizon is 35 % down) */
.hook-left { display: grid; gap: 36px; }
.anchor-core { width: 100%; height: min(66vh, 640px); }
.answer-pin { position: relative; height: 240vh; }   /* (v16-C: v15-A's — the answer is not a full-screen moment here) */
.anchor-wall { position: absolute; inset: 0; }
.answer-stage { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: clip; }
.answer-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 104px; }
.answer-q { opacity: var(--q-on, 0); translate: 0 calc((1 - var(--q-on, 0)) * 10px); display: inline-flex; align-items: center; gap: 10px; font: var(--w-ui) var(--t-ui)/1.4 var(--font); color: var(--ink-2); }
.answer-q img { width: 22px; height: 22px; border-radius: 24%; }
.anchor-answer { align-self: center; justify-self: center; width: min(1180px, 90vw); height: min(44vh, 420px); }
.anchor-fill { position: absolute; inset: 6% 3%; }
.faq-list { position: relative; }
.anchor-mark { position: absolute; inset: 0; }   /* (v16-B: the gate stands in the camera's space; this box only says where the stage is) */
.final-stage .final-copy { position: relative; padding-block: 0; }   /* (v16-C: the copy in the middle, the loop round it) */
/* labels the particle shapes carry (placed each frame where their point is on screen) */
.gl-lab { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; will-change: transform, opacity; }
.lab-kw { translate: -50% 12px; font: var(--w-body) var(--t-micro)/1.3 var(--font); color: var(--ink-3); text-align: center; }
.lab-kw b { display: block; font: var(--w-ui) var(--t-micro)/1.25 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lab-kw.low { translate: -50% 42px; }
.lab-kw.drop { color: var(--ink-4); } .lab-kw.drop span { text-decoration: line-through; text-decoration-color: rgba(255, 140, 120, 0.7); } .lab-kw.drop b { color: var(--ink-4); }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding-block: 110px 20px; gap: 6px; }
  .anchor-hero { justify-self: center; width: min(92vw, 520px); margin: 28px 0 0; }   /* (v15: the larger lime's glow reached the trust line — legib15 3.96 : 1) */
  .meadow-pin { height: 190vh; }
  .meadow-stage .core-head { padding-top: 92px; }

  .core-stage { padding-block: 70px 16px; align-items: start; }
  .core-grid { grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 86px); gap: 12px; }
  .core-steps { min-height: 0; height: 47vh; }
  .step p:not(.label) { font-size: var(--t-ui); line-height: 1.68; }
  .core-dots { display: none; }
  .anchor-core { height: auto; min-height: 0; align-self: stretch; }   /* (an empty box in a centred grid row was 0 tall — the bars stood in a dot) */
  .answer-pin { height: 200vh; }
  .answer-top { padding-top: 84px; flex-wrap: wrap; }
  .anchor-answer { width: 94vw; height: 34vh; }
}
@media (max-width: 700px) { .lab-kw { display: none; } }   /* twelve bar labels do not fit a phone; the step text says it */

/* ── v14-A ── */
/* the six engines, plain: a logo, the name, the count the check fills in (피드백 5) */
.eng-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; align-self: center; }   /* (2판: five cards — three, then two centred) */
.eng-grid > .eng-card { flex: 0 1 calc((100% - 24px) / 3); min-width: 0; }
.eng-card { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 16px 14px; border-radius: 16px; background: rgba(var(--bg-rgb), 0.55); box-shadow: inset 0 0 0 1px var(--line); }
.eng-card img { width: 28px; height: 28px; border-radius: 24%; }
.eng-card { transition: transform 0.6s var(--ease-out), box-shadow 0.4s, background-color 0.4s; }
@media (hover: hover) { .eng-card:hover { transform: translate3d(0, -4px, 0); box-shadow: inset 0 0 0 1px var(--line-3); background: rgba(var(--bg-rgb), 0.75); } }
.eng-card span { font: var(--w-ui) var(--t-ui)/1.2 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eng-card b { font: var(--w-ui) var(--t-ui)/1 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 2.9em; text-align: right; }
.eng-card b.own { color: var(--lime); }
/* the words the particle shapes carry: plain type, a soft shadow so they read on the points */
.gl-lab { font-family: var(--font); text-shadow: 0 1px 3px rgba(var(--bg-rgb), 0.9), 0 0 12px rgba(var(--bg-rgb), 0.7); }
.gl-lab.al-l { translate: 0 -50% !important; } .gl-lab.al-r { translate: -100% -50% !important; }
.gl-lab b { font-weight: var(--w-ui); font-variant-numeric: tabular-nums; }
.gl-lab img { display: inline-block; width: 18px; height: 18px; border-radius: 24%; vertical-align: -4px; margin-right: 6px; }
.gl-lab small { display: block; margin-top: 2px; font-size: var(--t-micro); font-weight: var(--w-body); color: var(--ink-3); }
.gl-lab.own, .gl-lab .own, .gl-lab.own b { color: var(--lime); }
.lab-head { translate: -50% -50%; font-size: var(--t-ui); font-weight: var(--w-ui); color: var(--ink); }
.lab-sub { translate: -50% -50%; font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink-2); }
.lab-count { translate: -50% 0; font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink-3); }
.lab-count.own { color: var(--lime); }
.lab-rank { translate: -100% -50%; font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink-2); }
.lab-legend { translate: -50% -50%; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink-2); }
.lab-legend b { color: var(--ink); }
.lab-ip { translate: -50% 0; font-size: var(--t-micro); font-weight: var(--w-ui); color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.lab-url { translate: -50% -50%; font-size: var(--t-micro); font-weight: var(--w-body); color: var(--ink-3); }
.lab-eng { translate: -50% -50%; display: inline-flex; align-items: center; font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink); }
.lab-dtitle { font-size: var(--t-ui); font-weight: var(--w-head); color: var(--ink); letter-spacing: -0.02em; }
.lab-dchip { font-size: var(--t-micro); font-weight: var(--w-ui); color: var(--ink-3); }
.lab-tick { translate: -50% -50%; font-size: var(--t-micro); font-weight: var(--w-body); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lab-series { font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink-2); }
.lab-dom { font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink-2); }
.lab-val { font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.lab-axis { translate: -50% -50%; font-size: var(--t-micro); font-weight: var(--w-ui); color: var(--ink-2); text-align: center; }
.lab-axis b { margin-left: 4px; color: var(--ink); }
.lab-pt { font-size: var(--t-micro); font-weight: var(--w-ui); color: var(--lime); }
.lab-list { display: grid; gap: 3px; font-size: var(--t-small); font-weight: var(--w-ui); color: var(--lime); }
.lab-list b { font-size: var(--t-small); color: var(--ink); margin-bottom: 2px; }
.lab-legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.foot-note { color: var(--ink-4); }
.lab-legrow { display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: min(92vw, 560px); font-size: var(--t-small); font-weight: var(--w-ui); color: var(--ink-2); white-space: normal; }
.lab-legrow span { display: inline-flex; align-items: center; } .lab-legrow b { margin-left: 5px; color: var(--ink); }
.anchor-fdash { display: none; }
@media (max-width: 1080px) {
  .anchor-fdash { display: block; width: 100%; aspect-ratio: 3 / 2.06; margin-bottom: 10px; }
  .feat-stage { display: none; }
  .lab-ip, .lab-url, .lab-q { display: none; }
}
@media (max-width: 640px) {
  .eng-grid > .eng-card { flex-basis: calc((100% - 8px) / 2); }
  .eng-grid { gap: 8px; } .eng-card { padding: 12px 11px; gap: 8px; grid-template-columns: 22px minmax(0, 1fr) auto; border-radius: 13px; } .eng-card img { width: 22px; height: 22px; border-radius: 24%; }
  .eng-card span { font-size: 13px; } .eng-card b { font-size: 13px; min-width: 2.8em; }
}
@media (max-width: 380px) {   /* (2판: a small phone — the count goes under the name, so the name shows whole) */
  .eng-card { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 5px; }
  .eng-card img { grid-row: 1 / 3; } .eng-card span { grid-column: 2; grid-row: 1; } .eng-card b { grid-column: 2; grid-row: 2; text-align: left; min-width: 0; }
}

/* (10/16 detail pass) where the lines fall (rag_probe.py) — the words are the canonical copy, unchanged: long copy never ends on
   a lone word, the short leads break into even lines, and on a phone the headline's size follows the width so its last line
   keeps '플랫폼, 라임라이트AI' together */
p, li, td, dd { text-wrap: pretty; }
p[data-reveal="up"], .trust { text-wrap: balance; }
@media (max-width: 420px) { .hero h1 { font-size: min(var(--h1), calc((100vw - 2 * var(--gut)) * 0.124)); } }

/* (10/16 detail pass) the 3D's labels (labels_probe.py): the small grey ones one step lighter over the field, a tighter dark halo
   under every label; on a phone three of the twelve bar labels (the first, the dropped one, the last), the card legends kept
   inside their card, the first prompts in a column that wraps */
.gl-lab { text-shadow: 0 0 2px rgba(var(--bg-rgb), 0.95), 0 1px 3px rgba(var(--bg-rgb), 0.9), 0 0 12px rgba(var(--bg-rgb), 0.7); }
.lab-tick, .lab-dchip, .lab-count, .lab-url, .lab-kw, .gl-lab small { color: var(--ink-2); }
.lab-kw b, .lab-series, .lab-dom, .lab-axis { color: var(--ink); }
.lab-kw.drop, .lab-kw.drop b { color: var(--ink-3); }
@media (max-width: 700px) {
  .lab-kw.k-first, .lab-kw.k-last, .lab-kw.drop { display: block; }
  .lab-kw.k-first { translate: -10px 12px; text-align: left; } .lab-kw.k-last { translate: calc(-100% + 10px) 12px; text-align: right; } .lab-kw.drop { translate: -50% 12px; }
}
@media (max-width: 600px) {
  .lab-legrow { max-width: calc(100vw - 100px); }
  .lab-list { max-width: calc((100vw - 2 * var(--gut)) * 0.36); white-space: normal; }
}

/* (10/16 detail pass, labels round 2) STEP3's names and addresses on a soft ground of the page's colour — the wires run under every
   place they could stand; the word counts in the main ink; the lower bar labels clear the upper ones */
.lab-eng, .lab-ip { background: rgba(var(--bg-rgb), 0.62); border-radius: 6px; padding: 2px 7px; }
.lab-count { color: var(--ink); }
.lab-kw.low { translate: -50% 46px; }

/* (10/16 detail pass) on a phone the answer stands right under its question (330 px of empty screen lay between them); the FAQ on
   the heading's edge; the chips and the text links take a 44 px finger (their look unchanged) */
@media (max-width: 760px) {
  .anchor-answer { align-self: start; margin-top: 2vh; height: 22vh; }
}
.qa-q { padding-left: 0; padding-right: 0; } .qa-a p { padding-left: 0; }   /* (the 4 px inset put the questions off the heading's edge) */
.ck-brand, .link-arrow { position: relative; }
.ck-brand::after, .link-arrow::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; translate: 0 -50%; }

/* (10/16 detail pass, round 2) a compound joined by a middle dot never breaks at the dot; STEP1's three phone labels hold their own
   place (the '.low' rule had won for the last one); on a phone the question and its answer stand together mid-screen, the answer on
   the gutter; the wordmark takes a 44 px finger */
.nobr { white-space: nowrap; }
@media (max-width: 700px) {
  .gl-lab.lab-kw.k-first { translate: -10px 12px; } .gl-lab.lab-kw.k-last { translate: calc(-100% + 10px) 12px; } .gl-lab.lab-kw.drop { translate: -50% 12px; }
}
@media (max-width: 760px) {
  .answer-top { padding-top: 26vh; }
  .anchor-answer { justify-self: start; margin-left: var(--gut); width: calc(100vw - 2 * var(--gut)); margin-top: 3vh; }
}
.nav-logo { position: relative; } .nav-logo::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; translate: 0 -50%; }
.lab-count.cnt-l { translate: 0 0; } .lab-count.cnt-r { translate: -100% 0; }

/* (10/16 detail pass, labels round 3) the dropped keyword one step lighter — its strike-through says it is dropped */
.lab-kw.drop, .lab-kw.drop b { color: var(--ink-2); }

/* (10/16 detail pass, labels round 4) f3's legend in one row on a phone */
.lab-pair { display: flex; gap: 12px; white-space: nowrap; }

/* (10/16 detail pass, lines round 2) a text link never breaks inside ('기회 분석 / 보기 →' at 375 px) — it moves to the next line whole */
.link-arrow { white-space: nowrap; }

/* (10/16 detail pass, lines round 3) the FAQ's in-text links never break inside either ('기회 분석 / 보기 →' — they are not .link-arrow) */
.qa-a a { white-space: nowrap; }

/* (10/16 detail pass 2) STEP3's boxes like the page's own engine cards — one width per kind (set in main.js), the panel, a hairline */
.lab-eng, .lab-ip { background: rgba(var(--bg-rgb), 0.72); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 10px; box-sizing: border-box; }
.lab-eng { padding: 5px 12px 5px 7px; justify-content: flex-start; }
.lab-ip { padding: 6px 12px; }
/* what reads as made by AI, taken out: the glow under the lime buttons and the light that follows the cursor; the ghost button's
   blur; the checker's window dots, its pill and the glow under its bars, its glass (a quiet panel with a hairline, as the
   references' panels); the accent-coloured small labels, the accent rail and the accent column */
.btn-lime, .btn-lime:hover { box-shadow: none; }
.btn-lime::before { content: none; }
.btn-ghost { backdrop-filter: none; -webkit-backdrop-filter: none; }
.checker { background: rgba(var(--bg-rgb), 0.8); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.checker::after, .cmp::after { content: none; }
.ck-dots, .ck-free { display: none; }
.ck-row.own .bar i { box-shadow: none; }
.step .label, .feat .label, .feat.on .label { color: var(--ink-2); }
.feat.on { border-color: var(--line-3); }
.cmp th:last-child, .cmp td:last-child { background: rgba(190, 205, 255, 0.035); box-shadow: inset 1px 0 0 var(--line); }

/* (10/16 real environments) on a phone the core stage keeps room under its 3D for the words that hang below it (STEP1's bar labels,
   STEP2's document count) — on the screens people have it in (360 × 586 in KakaoTalk) they stood under the bottom edge */
@media (max-width: 760px) { .core-grid .anchor-core { margin-bottom: var(--core-room, 40px); transition: margin-bottom 0.6s var(--ease-out); } }   /* (3판 4: STEP3 gives it back — main.js applySteps) */

/* (10/16 3판 4) STEP3 on a phone: the engine's box sits on its wire (js/gl/shapes-s3.js), the line running into it — so the box is
   opaque, the line not showing through the name */
@media (max-width: 599px) { .lab-eng { background: var(--bg-2); } }

/* (10/16 3판 4) STEP3's engine boxes where their rows stand closer than a box and a gap (main.js, 38 px — an iPhone SE in KakaoTalk):
   compact, the same look at the page's micro size */
.gl-labels.eng-tight .lab-eng { font-size: var(--t-micro); line-height: 1.2; padding: 3px 9px 3px 4px; }
.gl-labels.eng-tight .lab-eng img { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }

/* (10/16 3판 4, fix 21) screens under 560 px tall (an iPhone SE in KakaoTalk, 375 × 506): the copy's box shrinks to the step shown,
   never past 47vh — STEP2's 3D gets back the height its copy does not use (on the SE 23 px: its copy is 210 px of the 238) */
@media (max-width: 760px) and (max-height: 560px) { .core-steps { height: min(var(--steps-h, 47vh), 47vh); transition: height 0.6s var(--ease-out); } }

/* (10/16 3판 4, fix 23) STEP3 from 600 px where its words would touch at their own size (main.js — a 1280 × 592 or 1440 × 772
   window): the session boxes at the page's micro size, the question in two lines */
.gl-labels.eng-tight .lab-ip { padding: 3px 9px; font-size: var(--t-micro); line-height: 1.25; }
.gl-labels.eng-tight .lab-ip small { margin-top: 1px; font-size: var(--t-micro); }
.gl-labels.eng-tight .lab-q { font-size: var(--t-small); white-space: normal; width: max-content; max-width: 11em; text-align: center; line-height: 1.35; }

/* (10/16 3판 4, fix 24) the second step, where compact boxes still touch (main.js — 1280 × 592, 1366 × 625): the session boxes show
   their address alone (on phones and tablets they are hidden altogether) */
.gl-labels.eng-tight2 .lab-ip small { display: none; }

/* (10/16 3판 4, fix 25 · 26) STEP3 compact on a PC window: the question ends left of the hub where that keeps it off the copy
   (main.js placeQ — 1280 × 592: centred, its second line stood on the wires fanning out) */
.gl-labels.eng-tight .gl-lab.lab-q.q-left { translate: calc(-100% - 10px) -50%; text-align: right; }

/* ═════════ the site's header and footer (the live site's menus and footer, in v16's design) — shared by the sub-pages and the
   home pages. ═════════ */
/* ── header: the four menus ── */
.nav { gap: 18px; }
/* (10/21 live review: the bar steps out of the way going down — translated by its own height, its 1 px shadow line stayed at the
   screen's top edge on every scrolled frame. 2 px further, so the line leaves with it — here, after base.css and the homes' own) */
.nav.away { transform: translate3d(0, calc(-100% - 2px), 0); }
.nav.menu-open, .nav.sheet { background: rgba(var(--bg-rgb), 0.94); box-shadow: 0 1px 0 var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-logo span { white-space: nowrap; }
.nav-menu { display: flex; align-items: center; gap: 2px; margin-left: 20px; }
.nav-item { position: relative; }
.nav-top { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 10px; font: var(--w-body) var(--t-ui)/1 var(--font); color: var(--ink-2); white-space: nowrap; transition: color 0.25s, background-color 0.25s; }
.has-panel > .nav-top::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.7; transition: transform 0.4s var(--ease-out), margin 0.4s var(--ease-out); }
.nav-item.open > .nav-top::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-top:hover, .nav-item.open > .nav-top { color: var(--ink); background: rgba(190, 205, 255, 0.07); }
.nav-top.is-here { color: var(--ink); }
.nav-panel { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; z-index: 2; background: var(--bg-2); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 70px -24px rgba(5, 6, 14, 0.7); opacity: 0; visibility: hidden; transform: translate3d(0, -6px, 0); transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.16s; }   /* (10/20, style.gallery 'easeReverse': it goes faster than it came, on its own curve) */
.nav-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* (the pointer's bridge from the menu to its panel) */
.nav-item.open > .nav-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s var(--ease-quart), transform 0.45s var(--ease-out), visibility 0s; }
.nav-cols { display: flex; gap: 28px; padding: 20px 20px 16px; }
.nav-col { display: grid; gap: 2px; align-content: start; min-width: 168px; }
.nav-col-label { padding: 2px 12px 10px; font: var(--w-ui) var(--t-small)/1.2 var(--font); color: var(--ink-3); }
.nav-col a { padding: 9px 12px; border-radius: 9px; font: var(--w-body) var(--t-ui)/1.3 var(--font); color: var(--ink-2); white-space: nowrap; transition: color 0.2s, background-color 0.2s; }
.nav-col a:hover { color: var(--ink); background: rgba(190, 205, 255, 0.06); }
.nav-col a[aria-current="page"] { color: var(--lime); }
.nav-all { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 32px; border-top: 1px solid var(--line); border-radius: 0 0 18px 18px; font: var(--w-ui) var(--t-small)/1 var(--font); color: var(--ink); transition: background-color 0.2s; }
.nav-all span { color: var(--lime); transition: transform 0.5s var(--ease-out); }
.nav-all:hover { background: rgba(190, 205, 255, 0.05); } .nav-all:hover span { transform: translate3d(4px, 0, 0); }

/* (10/20 afternoon, style.gallery 'Sliding tabs') one light that slides under the menus and inside a panel's columns — ui/nav.js */
.nav-menu, .nav-cols { position: relative; }
.nav-hl { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 10px; background: rgba(190, 205, 255, 0.075); pointer-events: none; opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), width 0.3s cubic-bezier(0.22, 1, 0.36, 1), height 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease; }
.nav-cols > .nav-hl { border-radius: 9px; background: rgba(190, 205, 255, 0.065); }
.nav-hl.on { opacity: 1; }
.nav-hl.snap { transition: opacity 0.18s ease; }
.nav-menu.has-hl .nav-top, .nav-cols.has-hl .nav-col a { position: relative; z-index: 1; }
.nav-menu.has-hl .nav-top:hover, .nav-menu.has-hl .nav-item.open > .nav-top, .nav-cols.has-hl .nav-col a:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) { .nav-hl { transition: opacity 0.12s ease; } }
.nav-actions { gap: 10px; }
.nav-login { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px 0 18px; border-radius: 999px; font: var(--w-ui) var(--t-ui)/1 var(--font); color: var(--ink); background: rgba(190, 205, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color 0.3s, box-shadow 0.3s; }
.nav-login:hover { background: rgba(190, 205, 255, 0.1); box-shadow: inset 0 0 0 1px var(--line-3); }
.nav-login-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); transition: transform 0.5s var(--ease-out); }
.nav-login-ic svg { fill: none; stroke: var(--lime-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nav-login:hover .nav-login-ic { transform: rotate(45deg); }
.nav-burger { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(190, 205, 255, 0.06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); cursor: pointer; }
.nav-burger i { position: absolute; left: 13px; right: 13px; height: 1.6px; border-radius: 1px; background: currentColor; transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out); }
.nav-burger i:first-child { top: 17px; } .nav-burger i:last-child { top: 25px; }
.nav-burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); } .nav-burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
.mnav { position: fixed; inset: 0; z-index: 49; overflow-y: auto; background: var(--bg); padding: 86px var(--gut) 48px; }
.mnav[hidden] { display: none; }
.mnav-inner { display: grid; gap: 4px; max-width: 560px; margin: 0 auto; }
.mnav-group { border-bottom: 1px solid var(--line); }
.mnav-group summary, .mnav-top { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font: var(--w-ui) 19px/1.2 var(--font); color: var(--ink); cursor: pointer; list-style: none; }
.mnav-group summary::-webkit-details-marker { display: none; }
.mnav-group summary::after { content: ''; width: 8px; height: 8px; margin-right: 6px; border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: rotate(45deg); transition: transform 0.4s var(--ease-out); }
.mnav-group[open] summary::after { transform: rotate(-135deg); }
.mnav-top { border-bottom: 1px solid var(--line); }
.mnav-body { display: grid; gap: 14px; padding: 2px 0 22px; }
.mnav-col { display: grid; gap: 0; }
.mnav-col-label { padding: 8px 0 6px; font: var(--w-ui) var(--t-small)/1.2 var(--font); color: var(--ink-3); }
.mnav-col a, .mnav-all { display: flex; align-items: center; min-height: 44px; font: var(--w-body) var(--t-body)/1.3 var(--font); color: var(--ink-2); }
.mnav-col a[aria-current="page"] { color: var(--lime); }
.mnav-all { color: var(--ink); font-weight: var(--w-ui); gap: 8px; } .mnav-all span { color: var(--lime); }
.mnav-login { margin-top: 26px; justify-self: start; }
html.sheet-open, html.sheet-open body { overflow: hidden; }
@media (max-width: 980px) {
  .nav-menu { display: none; }
  .nav-burger { display: inline-grid; }
}
@media (max-width: 640px) {
  .nav-login { display: inline-flex; height: 40px; padding-left: 14px; } .nav-login-ic { width: 28px; height: 28px; }
}
@media (max-width: 380px) { .nav-login > span { display: none; } .nav-login { padding: 0 6px; } }   /* (the arrow alone; its words stay for screen readers below) */

/* ── footer ── */
.foot2 { position: relative; z-index: 1; margin-top: 0; background: var(--bg); border-top: 1px solid var(--line); }
.foot-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.foot-claim { display: flex; flex-wrap: wrap; gap: 0 0.32em; font: var(--w-sub, 600) clamp(30px, 3.1vw, 44px)/1.18 var(--font); letter-spacing: -0.035em; color: var(--ink); }   /* (10/20: 58 → 44 px with the type scale) */
.foot-claim .lime { color: var(--lime); }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 28px; padding-block: clamp(44px, 5vw, 72px); }
.foot-col h3 { margin-bottom: 14px; font: var(--w-ui) var(--t-small)/1.3 var(--font); color: var(--ink-3); letter-spacing: 0; }
.foot-col h3 a { color: var(--ink-2); } .foot-col h3 a:hover { color: var(--ink); }
.foot-col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.foot-col li a { display: inline-flex; align-items: center; min-height: 34px; font: var(--w-body) var(--t-ui)/1.3 var(--font); color: var(--ink-2); transition: color 0.2s; }
.foot-col li a:hover { color: var(--ink); } .foot-col li a[aria-current="page"] { color: var(--lime); }
.foot-bottom { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; padding-block: 28px 40px; border-top: 1px solid var(--line); font: var(--w-body) var(--t-micro)/1.7 var(--font); color: var(--ink-3); }
.foot-id { display: grid; gap: 8px; align-content: start; }
.foot2 .foot-logo { font: var(--w-head) var(--t-ui)/1 var(--font); color: var(--ink-2); letter-spacing: -0.01em; }
.foot-co { display: grid; gap: 2px; justify-items: end; text-align: right; }

@media (max-width: 1080px) {
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .foot-bottom { grid-template-columns: minmax(0, 1fr); }
  .foot-co { justify-items: start; text-align: left; }
  .foot-band .btn { width: 100%; }
}

/* (10/20 afternoon, style.gallery '클릭에서 번지는 파문' · '행동 뒤의 피드백' · the Nocturne Editorial direction's 'responsive states on
   every link, card, tab at 150-300 ms') a press answers at once: what is pressed gives a little under the finger and springs back
   when let go. The scale property — the magnet's translate on a button stays its own. Shared: the sub-pages and the homes. */
.btn { transition: transform 0.6s var(--ease-out), box-shadow 0.5s var(--ease-out), background-color 0.3s, scale 0.42s var(--ease-out); }
.nav-login { transition: background-color 0.3s, box-shadow 0.3s, scale 0.42s var(--ease-out); }
.btn:active, .nav-login:active { scale: 0.965; transition: transform 0.6s var(--ease-out), box-shadow 0.5s var(--ease-out), background-color 0.3s, scale 0.09s ease-out; }
@media (prefers-reduced-motion: reduce) { .btn:active, .nav-login:active { scale: none; } }

/* ═════════ LIMELIGHT sub-pages v17 (opus, 2026-10-19) — the site's own parts, over v16's design system (base.css: the dusk
   grounds, one lime, Pretendard in eight sizes and three weights, the motion curves). Every word on these pages is the live site's;
   this file only places it. No glass, no glow that follows the pointer, no numbered pills, no mono eyebrows (담당자 10/15 · 10/16). */

body { overflow-x: clip; }
main.pg { position: relative; z-index: 1; }
.wrap { position: relative; }

/* ── crumbs ── */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; list-style: none; font: var(--w-body) var(--t-small)/1.4 var(--font); color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ''; width: 5px; height: 5px; border-right: 1.3px solid var(--ink-4); border-top: 1.3px solid var(--ink-4); transform: rotate(45deg); }
.crumbs a { color: var(--ink-2); transition: color 0.2s; } .crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink-2); }

/* ── type for the pages ── */
.ph h1 { font-size: var(--h1); line-height: 1.1; letter-spacing: -0.04em; }
.ph h1.h1-m { font-size: clamp(34px, 3.75vw, 54px); line-height: 1.14; }
.ph h1.h1-s { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.16; }
.ph h1 .h-pre { display: block; margin-bottom: 0.18em; color: var(--ink-3); font-size: 0.56em; letter-spacing: -0.02em; }
.ph-lead { font-size: var(--t-lead); line-height: 1.7; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.ph-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sec-intro p { font-size: var(--t-lead); line-height: 1.72; color: var(--ink-2); max-width: 40em; }
.sec-intro p + p { margin-top: 1em; }
.sec-intro strong, .sp-step strong { color: var(--ink); font-weight: var(--w-ui); }
main a:not(.btn):not(.chip):not(.post):not(.blog-brand):not(.nav-all) { color: var(--ink); }
main p a.link-arrow { display: inline-block; }   /* (10/19: margin-top 10px dropped — inline in its sentence it pushed only its own line down,
   10 px on a PC and 20 px on a phone: the line before every '… 보기 →' stood apart from the rest of its paragraph) */
main p > a:not(.btn):not(.chip):not(.link-arrow) { text-decoration: underline; text-decoration-color: rgba(220, 255, 80, 0.55); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* ── heroes ── */
.ph { position: relative; }
.ph-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: clip; }
.ph-front { position: absolute; inset: 0 0 auto 0; min-height: 100svh; display: grid; align-items: center; pointer-events: none; }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 120px 96px; }
.ph-copy { display: grid; gap: 26px; justify-items: start; max-width: 680px; pointer-events: auto; }
.ph-copy .crumbs { margin-bottom: 4px; }
/* A — the instrument beside the headline; the hero pinned while the camera dives into it */
.ph-a .ph-pin, .ph-hub .ph-pin { position: relative; height: 200vh; }
.ph-anchor { position: absolute; top: 50%; right: max(calc(var(--gut) * 0.6), calc(50vw - 700px)); width: min(50vw, 780px); height: min(72vh, 640px); translate: 0 -46%; }
.ph-anchor-wall { position: absolute; top: 50%; right: max(var(--gut), calc(50vw - 700px)); width: min(48vw, 860px); height: min(66vh, 620px); translate: 0 -46%; }
.ph-grid-hub .ph-copy { max-width: 620px; }
/* (10/21, the production review at the user's 2560 × 1305) on a wide screen these boxes began 80 px (A) and 160 px (the wall) left of
   the middle, and the headline's long lines ran into their 3D — the wall's first panel behind '…담았습니다', the referral's chips, the
   citations' sources. From 1600 px a box keeps to the right column: its left edge no nearer the middle than half the grid's gap
   (2560 · 1920: 688 px wide, was 780 · 860). Below 1600 px nothing changes (there the copy ends short of the box) */
@media (min-width: 1600px) {
  .ph-anchor { width: min(50vw, 780px, calc(50vw - max(calc(var(--gut) * 0.6), calc(50vw - 700px)) - 12px)); }
  .ph-anchor-wall { width: min(48vw, 860px, calc(50vw - max(var(--gut), calc(50vw - 700px)) - 12px)); }
}
/* B — the copy in the sky band, the landscape under it (the camera does not move) */
.ph-b { min-height: max(100svh, 680px); }
.ph-b .anchor-full, .way .anchor-full, .field .anchor-full { position: absolute; inset: 0; }
.ph-b-copy { position: relative; display: grid; gap: 22px; justify-items: start; padding-top: clamp(108px, 15vh, 156px); max-width: calc(var(--wrap) + var(--gut) * 2); }
.ph-b-copy h1 { max-width: 15em; }
.ph-b-copy .ph-lead { max-width: 40em; }
/* (detail pass 2) beside the subject on a wide screen the lead keeps to the left half — at 40em a long lead (enterprise) ran
   54 px into the subject's box */
@media (min-width: 1081px) { .ph-b-copy .ph-lead { max-width: min(40em, 620px, calc(60vw - 2 * var(--gut) - 40px)); } }   /* (the room left of the box, less 40 px — 1100 · 1280 · 1440 · 1920 px) */
/* C — the copy over the streams */
.ph-c { min-height: max(96svh, 640px); display: grid; align-items: center; }
.ph-c .anchor-full, .ph-blog .anchor-full, .blog-list .anchor-full { position: absolute; inset: 0; }
.ph-c-copy { position: relative; display: grid; gap: 24px; justify-items: start; padding-block: 132px 96px; }
.ph-c-copy h1 { max-width: 16em; }
/* pricing */
.ph-p { min-height: max(92svh, 640px); display: grid; align-items: center; }
.ph-grid-p { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ph-anchor-p { width: 100%; height: min(64vh, 560px); }

/* ── sections ── */
.sec { position: relative; }
.sec-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); row-gap: 22px; align-items: end; padding-top: clamp(96px, 11vw, 160px); }
.sec-head h2, .way-copy h2, .cmp-why h2, .cmp-table h2, .cmp-next h2, .price-fit h2, .calc-copy h2, .free-copy h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.03em; }
.sec-head-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

/* ── steppers (pinned: the steps read one at a time; their 3D beside them) ── */
.stepper { position: relative; height: calc(var(--n) * 92vh + 30vh); margin-top: clamp(24px, 3vw, 48px); }
.stepper-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; display: grid; align-items: center; overflow: clip; }
.stepper-grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.sp-list { position: relative; min-height: min(var(--steps-h, 380px), 62vh); margin: 0; padding: 0; list-style: none; }
.sp-step { position: absolute; inset: 0 0 auto 0; display: grid; gap: 14px; align-content: start; opacity: 0; transform: translate3d(0, 18px, 0); pointer-events: none; transition: opacity 0.45s var(--ease-quart), transform 0.8s var(--ease-out); }
.sp-step.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.6s var(--ease-quart) 0.22s, transform 0.9s var(--ease-out) 0.22s; }
.sp-step.past { transform: translate3d(0, -18px, 0); }
.sp-label { font: var(--w-ui) var(--t-small)/1.2 var(--font); color: var(--ink-2); }   /* (3판: no lime label over a heading) */
.sp-step h3 { font-size: var(--t-h3); line-height: 1.32; letter-spacing: -0.025em; }
.sp-step p:not(.sp-label) { font-size: var(--t-body); line-height: 1.75; color: var(--ink-2); }
.sp-anchor { width: 100%; height: min(68vh, 660px); }
.sp-anchor-m { display: none; }
.sp-rail { position: absolute; left: 0; right: 0; bottom: max(28px, 4vh); display: flex; gap: 6px; pointer-events: none; opacity: var(--rail-on, 0); transition: opacity 0.4s var(--ease-quart); }
.sp-rail i { position: relative; flex: 0 0 34px; height: 2px; overflow: hidden; border-radius: 1px; background: var(--line-2); }
.sp-rail i::after { content: ''; position: absolute; inset: 0; background: var(--ink-2); transform: scaleX(var(--k, 0)); transform-origin: 0 50%; }
/* the hub's tour: the dashboard takes the stage, the step's words on a ground of their own at the left */
.tour .stepper-stage { display: block; }
.tour-anchor { position: absolute; inset: 0; }
.tour-grid { position: relative; height: 100%; display: grid; align-items: center; }
.tour-list { max-width: 430px; min-height: min(var(--steps-h, 360px), 64vh); }
.tour-step { padding: 26px 26px 24px; border-radius: 20px; background: rgba(var(--bg-rgb), 0.86); box-shadow: inset 0 0 0 1px var(--line-2); }
/* B: the words in the sky band, the landscape and what stands in it below */
.field .stepper-stage { display: block; }
.field-grid { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: 32px; align-items: start; padding-top: clamp(100px, 14vh, 150px); }
.field-list { min-height: min(var(--steps-h, 300px), 46vh); max-width: 520px; }
.field-obj { width: 100%; height: min(54vh, 520px); margin-top: clamp(0px, 6vh, 60px); }

/* ── solution hub: four ways ── */
.way { min-height: 100svh; }
.way-stage { position: relative; min-height: 100svh; }
.way-copy { position: relative; display: grid; gap: 22px; justify-items: start; padding-top: clamp(110px, 15vh, 160px); padding-bottom: 60px; }
.way-copy .way-p { max-width: 36em; font-size: var(--t-lead); line-height: 1.7; color: var(--ink-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: var(--w-ui) var(--t-ui)/1 var(--font); color: var(--ink); background: rgba(var(--bg-rgb), 0.78); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 0.3s, color 0.3s, background-color 0.3s; white-space: nowrap; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--lime); color: var(--lime); }
.chip.on { color: var(--lime-ink); background: var(--lime); box-shadow: none; }

/* ── questions ── */
.faq2 { padding-block: clamp(110px, 13vw, 190px); }
.faq-anchor { position: absolute; inset: 0; }
.faq2-grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.faq2-grid.has-aside { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 0.78fr); }
.faq2-title { font-size: var(--t-h2); line-height: 1.2; }
.faq2-list { display: grid; }
.faq2-item { display: grid; gap: 12px; padding: 28px 0 30px; border-top: 1px solid var(--line-2); }
.faq2-item:last-child { border-bottom: 1px solid var(--line-2); }
.faq2-item h3 { font-size: var(--t-lead); line-height: 1.5; letter-spacing: -0.02em; }
.faq2-a p { font-size: var(--t-body); line-height: 1.75; color: var(--ink-2); }
/* the live page's own panel (엔진별 점유율) */
.dpanel { align-self: start; display: grid; gap: 16px; padding: 22px 22px 18px; border-radius: 20px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.dp-eyebrow { font: var(--w-ui) var(--t-small)/1 var(--font); color: var(--ink-2); }
.dp-rows { display: grid; gap: 4px; }
.dp-row { display: grid; grid-template-columns: 22px minmax(0, 92px) minmax(0, 1fr) 44px 38px; align-items: center; gap: 10px; min-height: 40px; }
.dp-logo { width: 22px; height: 22px; border-radius: 24%; }
.dp-label { font: var(--w-ui) var(--t-small)/1.2 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(190, 205, 255, 0.08); overflow: hidden; }
.dp-bar i { position: absolute; inset: 0; background: var(--ice); transform: scaleX(var(--v)); transform-origin: 0 50%; border-radius: inherit; transition: transform 1.2s var(--ease-out); }
.dpanel:not(.in) .dp-bar i { transform: scaleX(0); }
.dp-pct { font: var(--w-ui) var(--t-ui)/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.dp-pct small { font-size: var(--t-micro); color: var(--ink-2); margin-left: 1px; }
.dp-delta { font: var(--w-ui) var(--t-micro)/1 var(--font); font-variant-numeric: tabular-nums; text-align: right; }
.dp-delta.is-up { color: #9FE38A; } .dp-delta.is-down { color: #FFA796; }

/* ── the close ── */
.close-pin { position: relative; height: 200vh; }
.close-pin.short { height: 120vh; }
.close-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; display: grid; place-items: center; overflow: clip; }
.close-anchor { position: absolute; inset: 0; }
.close-copy { position: relative; display: grid; gap: 22px; justify-items: center; text-align: center; }
.close-copy h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.03em; max-width: 16em; }
.close-p { font-size: var(--t-lead); line-height: 1.7; color: var(--ink-2); max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ── compare ── */
.cmp-why { padding-top: clamp(80px, 9vw, 140px); }
.cmp-why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.cmp-why-anchor { width: 100%; height: min(46vh, 420px); }
.cmp-table { padding-top: clamp(60px, 7vw, 110px); }
.cmp-table-anchor { width: 100%; height: min(30vh, 260px); margin-block: 10px 6px; }
.cmp2 { position: relative; border-radius: 22px; overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.cmp2 table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cmp2 th, .cmp2 td { padding: 24px 26px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: var(--t-ui); line-height: 1.65; }
.cmp2 tr:last-child td { border-bottom: 0; }
.cmp2 th { padding-block: 20px; font: var(--w-ui) var(--t-small)/1.2 var(--font); color: var(--ink-3); }
.cmp2 td:first-child { width: 22%; font-weight: var(--w-head); color: var(--ink); }
.cmp2 td:nth-child(2) { color: var(--ink-2); }
.cmp2 th.us { color: var(--ink); }
.cmp2 td.us { color: var(--ink); font-weight: var(--w-ui); box-shadow: inset 1px 0 0 var(--line-2); }
.cmp2 td.us::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: 0.12em; border-radius: 1px; background: var(--lime); }
.cmp-note { margin-top: 26px; max-width: 46em; font-size: var(--t-body); line-height: 1.75; color: var(--ink-2); }
.cmp-next { padding-top: clamp(100px, 11vw, 160px); }
.crit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(36px, 4vw, 56px); }
.crit { display: grid; gap: 12px; align-content: start; padding: 0 0 26px; border-top: 1px solid var(--line-2); }
.crit-anchor { width: 100%; aspect-ratio: 1.5; margin-bottom: 8px; }
.crit-label { font: var(--w-ui) var(--t-small)/1.2 var(--font); color: var(--ink-2); }
.crit h3 { font-size: clamp(21px, 1.7vw, 24px); line-height: 1.35; letter-spacing: -0.025em; }
.crit p:not(.crit-label) { font-size: var(--t-ui); line-height: 1.75; color: var(--ink-2); }

/* ── pricing ── */
.price-fit { padding-top: clamp(90px, 10vw, 150px); }
.price-fit-grid { display: grid; gap: clamp(30px, 4vw, 52px); }
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.who li { display: grid; gap: 14px; align-content: start; padding: 0 0 8px; border-top: 1px solid var(--line-2); }
.who-anchor { width: 100%; aspect-ratio: 1.6; }
.who p { font: var(--w-ui) var(--t-lead)/1.5 var(--font); color: var(--ink); letter-spacing: -0.02em; }
.who p a { color: var(--lime) !important; text-decoration: none !important; }
.calc-pin { position: relative; height: 300vh; }
.calc-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; display: grid; align-items: center; overflow: clip; }
.calc-anchor { position: absolute; top: 50%; right: max(var(--gut), calc(50vw - 660px)); width: min(52vw, 720px); height: min(70vh, 620px); translate: 0 -50%; }
.calc-copy { display: grid; gap: 28px; max-width: calc(var(--wrap) + var(--gut) * 2); }
.calc-copy > * { max-width: 520px; }
.calc-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.calc-lines li { padding: 18px 0; border-top: 1px solid var(--line-2); font: var(--w-ui) var(--t-lead)/1.5 var(--font); color: var(--ink-3); transition: color 0.5s var(--ease-quart); }
.calc-lines li:last-child { border-bottom: 1px solid var(--line-2); }
.calc-lines li.on { color: var(--ink); }
.price-free { padding-block: clamp(90px, 10vw, 150px) 28px; }
/* (10/19, phone: the free copy's last line sat on the section's foot and the FAQ section after it — positioned, later — lay over
   the lower half of its links' reach; 28 px of the gap moved from the FAQ's top into this section, the space between unchanged) */
.price-free + .faq2 { padding-top: calc(clamp(110px, 13vw, 190px) - 28px); }
.price-free-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.free-anchor { width: 100%; height: min(54vh, 480px); }
.free-copy { display: grid; gap: 20px; }
.free-p { font-size: var(--t-lead); line-height: 1.7; color: var(--ink-2); }

/* ── blog ── */
.ph-blog { padding-top: 92px; }
.blog-bar { position: relative; display: flex; align-items: center; gap: 14px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.blog-brand { display: inline-flex; align-items: center; gap: 10px; font: var(--w-head) var(--t-ui)/1 var(--font); color: var(--ink); white-space: nowrap; }
.blog-brand i { font-style: normal; color: var(--ink-4); font-weight: var(--w-body); }
.blog-brand b { font-weight: var(--w-ui); color: var(--ink-2); }
.blog-search { position: relative; display: flex; align-items: center; margin-left: auto; width: min(320px, 40vw); }
.blog-search svg { position: absolute; left: 14px; width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.blog-search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 0; border-radius: 12px; font: var(--w-body) var(--t-ui)/1 var(--font); color: var(--ink); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); outline: none; }
.blog-search input::placeholder { color: var(--ink-3); }
.blog-search input:focus-visible { box-shadow: inset 0 0 0 1.5px var(--lime); }
.blog-head { position: relative; display: grid; gap: 18px; justify-items: start; padding-block: clamp(56px, 8vw, 110px) clamp(30px, 4vw, 52px); }
.blog-cats { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.blog-cats-row { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-cats-toggle { display: none; }
.blog-feat { padding-bottom: clamp(40px, 5vw, 70px); }
.feat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.post { display: grid; gap: 0; align-content: start; border-radius: 18px; overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.6s var(--ease-out), box-shadow 0.35s; }
.post[hidden] { display: none; }
@media (hover: hover) { .post:hover { transform: translate3d(0, -4px, 0); box-shadow: inset 0 0 0 1px var(--line-3); } }
/* (10/20 afternoon: a light following the pointer over the cards — style.gallery 'Magic Card' · '스포트라이트 카드' — was built and
   taken out again: the light that follows the cursor is what 10/8 and 10/16 took out as reading made by AI (.btn-lime::before in
   base.css), and the probe's 'follow' rule had missed it inside @media) */
.post-feat.lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.post-cover { position: relative; display: grid; align-content: space-between; aspect-ratio: 1.905; padding: 18px 20px; overflow: hidden; background: var(--bg-3); }
.post-feat.lead .post-cover { aspect-ratio: auto; min-height: 300px; padding: 30px 32px; }
.post-cover b { position: relative; max-width: 13em; font: var(--w-head) clamp(19px, 1.5vw, 23px)/1.3 var(--font); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.post-feat.lead .post-cover b { font-size: clamp(28px, 2.6vw, 40px); }
.post-cover i { position: relative; justify-self: start; font: var(--w-ui) var(--t-micro)/1 var(--font); font-style: normal; color: var(--ink-2); }
.post-cover::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cc); opacity: 0.85; }
.post-cover.c-ai { --cc: var(--ice); } .post-cover.c-geo { --cc: var(--lime); } .post-cover.c-mkt { --cc: var(--lav); }
.post-body { display: grid; gap: 10px; align-content: start; padding: 18px 20px 20px; }
.post-feat.lead .post-body { padding: 30px 32px; align-content: center; }
.post-body h2 { font-size: var(--t-body); line-height: 1.5; letter-spacing: -0.02em; font-weight: var(--w-head); color: var(--ink); }
.post-feat.lead .post-body h2 { font-size: var(--t-h3); line-height: 1.32; }
.post-ex { font-size: var(--t-small); line-height: 1.7; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-feat.lead .post-ex { font-size: var(--t-ui); -webkit-line-clamp: 4; }
.post-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font: var(--w-body) var(--t-micro)/1 var(--font); color: var(--ink-3); }
.post-cat { color: var(--ink-2); font-weight: var(--w-ui); }
.blog-list { padding-bottom: clamp(80px, 9vw, 130px); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.blog-empty { padding: 40px 0; color: var(--ink-2); }
.blog-foot { display: flex; align-items: center; gap: 10px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); font: var(--w-body) var(--t-small)/1 var(--font); color: var(--ink-3); }
.blog-foot p { font-weight: var(--w-ui); color: var(--ink-2); margin-right: auto; }
.blog-foot a { color: var(--ink-2) !important; } .blog-foot a:hover { color: var(--ink) !important; }

/* ── lists ── */
.dot-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dot-list li { position: relative; padding-left: 20px; }
.dot-list li::before { content: ''; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 6px; border-radius: 1px; background: var(--ink-3); }

/* ── narrower screens ── */
@media (max-width: 1080px) {
  .ph-grid, .ph-grid-p, .stepper-grid, .faq2-grid, .faq2-grid.has-aside, .cmp-why-grid, .price-free-grid, .field-grid, .sec-head, .sec-head-wide { grid-template-columns: minmax(0, 1fr); }
  .ph-a .ph-pin, .ph-hub .ph-pin { height: 190vh; }
  .ph-front { align-items: start; }
  .ph-grid { padding-block: 104px 30px; }
  .ph-anchor { top: auto; bottom: 3vh; right: 50%; translate: 50% 0; width: min(94vw, 640px); height: 42vh; }
  .ph-anchor-wall { top: auto; bottom: 2vh; right: 50%; translate: 50% 0; width: 118vw; height: 46vh; }
  .stepper-stage { align-items: start; padding-top: 76px; }
  .stepper-grid { grid-template-rows: auto minmax(0, 1fr); height: calc(100svh - 96px); gap: 10px; }
  .sp-list { min-height: 0; height: min(var(--steps-h, 300px), 52svh); }
  .sp-anchor { height: auto; min-height: 0; align-self: stretch; }
  .sp-step p:not(.sp-label) { font-size: var(--t-ui); line-height: 1.7; }
  .tour-grid { align-items: start; padding-top: 4px; }
  .tour-list { max-width: none; height: min(var(--steps-h, 300px), 50svh); }
  .tour-step { padding: 18px 18px 16px; }
  .field-grid { padding-top: 84px; grid-template-rows: auto minmax(0, 1fr); height: 100%; gap: 6px; }
  .field-list { min-height: 0; height: min(var(--steps-h, 280px), 48svh); max-width: none; }
  .field-obj { height: auto; min-height: 0; margin-top: 0; align-self: stretch; }
  .faq2-grid.has-aside .dpanel { max-width: 520px; }
  .crit-grid, .who { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .feat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-feat.lead { grid-template-columns: minmax(0, 1fr); }
  .calc-anchor { top: auto; bottom: 4vh; right: 50%; translate: 50% 0; width: 94vw; height: 40vh; }
  .calc-stage { align-items: start; padding-top: 88px; }
}
@media (max-width: 640px) {
  .ph h1, .ph h1.h1-m, .ph h1.h1-s { font-size: var(--t-display); line-height: 1.24; }   /* (10/19: was clamp(30px, 8.6vw, 40px) — the phone scale in base.css) */
  .ph-lead, .way-copy .way-p, .close-p, .free-p { font-size: var(--t-lead); line-height: 1.7; }
  .ph-cta .btn { height: 48px; padding: 0 20px; }
  .sec-head h2, .way-copy h2, .cmp-why h2, .cmp-table h2, .cmp-next h2, .price-fit h2, .calc-copy h2, .free-copy h2, .faq2-title, .close-copy h2 { font-size: var(--t-h2); }
  .sp-step h3 { font-size: var(--t-h3); }
  .sp-step { gap: 10px; }
  .faq2-item h3 { font-size: 16px; }
  .dp-row { grid-template-columns: 20px minmax(0, 76px) minmax(0, 1fr) 40px 34px; gap: 8px; }
  .cmp2 table, .cmp2 tbody, .cmp2 tr, .cmp2 td { display: block; width: auto; }
  .cmp2 thead { display: none; }
  .cmp2 tr { padding: 20px 18px; border-bottom: 1px solid var(--line); } .cmp2 tbody tr:last-child { border-bottom: 0; }
  .cmp2 td { padding: 0; border: 0; } .cmp2 td:first-child { width: auto; margin-bottom: 10px; font-size: var(--t-body); }
  .cmp2 td:nth-child(2)::before, .cmp2 td.us::before { display: block; margin-bottom: 6px; font: var(--w-ui) var(--t-micro)/1.2 var(--font); color: var(--ink-3); content: attr(data-h); width: auto; height: auto; background: none; vertical-align: baseline; margin-right: 0; }
  .cmp2 td.us { margin-top: 12px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--line); }
  .feat-row, .post-grid { grid-template-columns: minmax(0, 1fr); }
  .post-feat.lead .post-cover { min-height: 200px; padding: 22px; }
  .post-feat.lead .post-body { padding: 20px; }
  .blog-bar { flex-wrap: wrap; }
  .blog-search { order: 3; width: 100%; margin-left: 0; }
  .blog-start { margin-left: auto; }
  .blog-cats-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
  .blog-cats-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .blog-cats-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .blog-cats-row.open { flex-wrap: wrap; }
}

/* ── B: where the page's subject stands in its landscape (the hero) ── */
/* (detail pass 2, second look) beside the copy, set from the screen's top: set from the hero's foot (bottom 9vh) its box lay in
   the ground's band — first the subject sank into the grass, then, kept above the horizon, it shrank to half its size (a 170 px
   shelf on a 1440 screen). The screen's own height also keeps it in place when the hero is taller than a short window */
.ph-b-obj { position: absolute; right: max(var(--gut), calc(50vw - 640px)); top: max(24vh, 150px); width: min(40vw, 600px); height: min(42vh, 440px); }
.cmp-next .anchor-full, .price-fit .anchor-full { position: absolute; inset: 0; }
.lab-tick.warn, .gl-lab.warn { color: #FFA796; }
@media (max-width: 1080px) { .ph-b-obj { top: auto; left: var(--gut); right: var(--gut); width: auto; bottom: 5vh; height: 30vh; } }

/* ── round 1: no pills for links (담당자 10/16: pill badges read as made by AI) — the ways as a plain list, the blog's
   categories as tabs ── */
.way-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; width: min(100%, 860px); margin-top: 6px; }
.way-links .chip { justify-content: space-between; min-height: 54px; padding: 0 2px; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--line-2); font: var(--w-ui) var(--t-body)/1.3 var(--font); color: var(--ink); transition: color 0.25s, box-shadow 0.25s; }
.way-links .chip:hover { color: var(--lime); box-shadow: inset 0 -1px 0 var(--lime); }
.blog-cats-row { gap: 4px 22px; }
.blog-cats-row .chip { min-height: 44px; padding: 0; border-radius: 0; background: none; box-shadow: none; font: var(--w-ui) var(--t-ui)/1 var(--font); color: var(--ink-2); }
.blog-cats-row .chip:hover { color: var(--ink); box-shadow: none; }
.blog-cats-row .chip.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--lime); }
@media (max-width: 760px) { .way-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } }
@media (max-width: 420px) { .way-links { grid-template-columns: minmax(0, 1fr); } }

.way-obj { position: absolute; right: max(var(--gut), calc(50vw - 640px)); bottom: 10vh; width: min(46vw, 640px); height: min(30vh, 300px); }
@media (max-width: 1080px) { .way-obj { left: var(--gut); right: var(--gut); width: auto; bottom: 6vh; height: 22vh; } }

/* round 2 · 3D words: a number after a name keeps its gap (inline-flex trims the space) */
.gl-lab.lab-eng b, .gl-lab.lab-sub b, .gl-lab.lab-dom b, .gl-lab.lab-series b { margin-left: 0.35em; }

@media (min-width: 640px) { .nobr-q { white-space: nowrap; } }
.nobr-q .nw { white-space: nowrap; }
.keep-w { white-space: nowrap; }   /* (10/21) a phrase kept on one line (build.py KEEP_W: '3일 동안' · '한 단계') */

/* ── round 5 · phones (≤ 760 px): the product pages in plain order — the headline, its instrument under it, each step followed by
   its own box; the landscapes' small words left out; touch targets 44 px ── */
@media (max-width: 760px) {
  .ph-a .ph-pin, .ph-hub .ph-pin { display: flex; flex-direction: column; height: auto; }
  .ph-a .ph-front, .ph-hub .ph-front { position: relative; order: 0; min-height: 0; }
  .ph-a .ph-stage, .ph-hub .ph-stage { position: relative; order: 1; height: auto; min-height: 0; overflow: visible; }
  .ph-a .ph-grid, .ph-hub .ph-grid { padding-block: 100px 8px; }
  .ph-a .ph-anchor, .ph-hub .ph-anchor-wall { position: relative; top: auto; bottom: auto; right: auto; left: auto; translate: none; display: block; width: calc(100% - 2 * var(--gut)); height: min(52vh, 340px); margin: 40px auto 24px; }
  /* (detail pass 2: 40 px above the instrument — a shape that rises past its box (the stacked cards lean up and back) reached
     behind the hero's buttons) */
  .ph-hub .ph-anchor-wall { width: 100%; height: min(40vh, 280px); }
  .feat-a .stepper { height: auto; margin-top: 18px; }
  .feat-a .stepper-stage { position: relative; height: auto; min-height: 0; display: block; padding-top: 0; overflow: visible; }
  .feat-a .stepper-grid { display: block; height: auto; }
  .feat-a .sp-list { position: relative; height: auto; min-height: 0; display: grid; gap: 56px; padding-bottom: 40px; }
  .feat-a .sp-step { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; transition: none; }
  .feat-a .sp-step h3 .w { transform: none; }
  .feat-a .sp-anchor, .feat-a .sp-rail { display: none; }
  .feat-a .sp-anchor-m { display: block; width: 100%; height: min(46vh, 300px); margin-top: 8px; }
  /* (10/19 'PC 화면 그대로 모바일에서도': a solution page's 3D keeps its words on a phone where they fit — the runtime hides one that
     meets another, the screen's edge or the copy; they were all left out when the phone's objects were a third of their size) */
  .fam-solution-hub .gl-lab, .fam-product-hub .gl-lab.lab-dtitle { display: none; }
  /* touch: the footer's links, the crumbs, links inside copy reach 44 px where a finger lands */
  .foot-col li a { min-height: 44px; }
  /* (10/21 live review: a column heading with a link stood 14 px lower than one without — its 44 px reach set the line's height;
     the reach stays, outside the line) */
  .foot-col h3 a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; }
  main p a:not(.btn), main li a:not(.btn) { position: relative; } main p a:not(.btn)::after, main li a:not(.btn)::after { content: ''; position: absolute; inset: -14px -4px; }
  /* (detail pass 2: the crumbs' own reach after the rule above — it had won with its -12 px, 42 px in all: WebKit missed a finger at ±21) */
  main .crumbs a { position: relative; } main .crumbs a:not(.btn)::after { content: ''; position: absolute; inset: -14px -8px; }
  .blog-brand { min-height: 44px; }
  /* (detail pass 2, phone: a post's category link 33 px, the blog footer's 'RSS' and 'Powered by Inblog' 13 px tall) */
  .post-catlink, .blog-foot a { position: relative; }
  .post-catlink::after { content: ''; position: absolute; inset: -6px -6px; } .blog-foot a::after { content: ''; position: absolute; inset: -16px -4px; }
  /* (10/19, WebKit: the title's words under the category link and the site footer under the blog's own foot lay over the lower half
     of those reaches — above them now; the contents' rows 31 px with 4 px between, a finger ± 21 px landed on the next row: 43 px rows) */
  .post-catlink { z-index: 1; }
  .post-read { padding-bottom: 28px; }   /* (the blog's foot sat on the site footer — a later layer — 1 px apart: its links' lower reach was the footer's) */
  .post-toc ol { gap: 0; } .post-toc ol a { padding-block: 12px; }
}

/* five engines in a row: on a phone the marks alone (their names met each other); on any screen where the row is drawn small enough
   for the names to meet, the runtime marks the row 'tight' and the same holds */
@media (max-width: 600px) { .gl-lab.lab-eng.row5 .nm { display: none; } .gl-lab.lab-eng.row5 img { margin-right: 0; } }
.gl-lab.lab-eng.row5.tight { min-width: 0 !important; } .gl-lab.lab-eng.row5.tight .nm { display: none; } .gl-lab.lab-eng.row5.tight img { margin-right: 0; }

/* round 6 · touch and phone labels */
@media (max-width: 760px) {
  main a.link-arrow, main p a.link-arrow { padding-block: 10px; margin-block: -10px; }   /* (10/19: 8 → 10 — with the phone's 14 px step copy a link was 39.8 px tall, a finger at ± 21 missed it) */
  .gl-lab.ph-hide { display: none; }
  .feat-a .sp-anchor-m { width: calc(100% + 2 * var(--gut)); margin-inline: calc(-1 * var(--gut)); height: min(54vh, 330px); }
}

/* a value standing on its bar (detail pass 2): the label's foot at its point, a few px clear of the bar's lit top */
.gl-lab.lab-count.up { translate: -50% calc(-100% - 2px); }
.gl-lab.lab-tick.up { translate: -50% calc(-100% - 2px); }   /* (an axis name standing on the axis's end) */
/* the hub's seven panel titles (detail pass 2): a step smaller, inside their taller head bands ('AI 신뢰 지수 & 포지셔닝 맵' ran past
   its panel into the next title) */
.gl-lab.lab-dtitle.hub { font-size: 12.5px; letter-spacing: -0.01em; }
/* (10/21) a phone's pricing wall: the title wraps inside its panel at a space; the first line's middle stays on its point ('dt2', not
   'wrap' — .wrap is the page's width box: position relative, and the titles fell into the flow at the top of the screen) */
.gl-lab.lab-dtitle.hub.dt2 { white-space: normal; word-break: keep-all; width: max-content; max-width: 21vw; line-height: 1.22; translate: 0 -0.61em !important; }
/* a bubble's name (detail pass 2): just above the bubble, or just below it when above is another bubble */
.gl-lab.lab-series.cap { translate: -50% calc(-100% - 4px); }
.gl-lab.lab-series.cap-dn { translate: -50% 4px; }
/* an engine's chip and a session's chip (detail pass 2): their own ground nearly opaque — at 0.72 the AI referral flows that start
   behind them showed through the names like a strike-through; a flow now leaves from the chip's edge */
.gl-lab.lab-eng, .gl-lab.lab-ip { background: rgba(var(--bg-rgb), 0.96); }
/* the opportunity card's list of prompts (detail pass 2): its own ground — it sits in the scatter's upper right among the points */
.gl-lab.lab-list { padding: 8px 12px 9px; border-radius: 10px; background: rgba(var(--bg-rgb), 0.92); box-shadow: inset 0 0 0 1px var(--line-2); }
/* a peak's name standing above its mark (detail pass 2 — hung down from the point it lay over the terrain's mesh) */
.gl-lab.lab-pt.up { translate: -50% calc(-100% - 4px); }
/* a name hung from a base line (detail pass 2): its top a few px under the line, whatever the screen's scale */
.gl-lab.lab-tick.hang { translate: -50% 7px; text-align: center; }
.gl-lab.lab-tick.hang.tick3 { line-height: 1.12; }   /* (10/21) a phone's trust bars: score · name · name, as low as two lines reached */
.gl-lab.lab-sub.hang { translate: -50% 9px; }   /* (a note hung under what it sums up — the engines' cards) */
.gl-lab.lab-tick.hang-r { translate: -100% 7px; }
/* a bar's name standing on the bar's start (detail pass 2, narrow screens) */
.gl-lab.lab-dom.above { translate: 0 calc(-100% - 3px); }
/* (10/21) a phone's leader gap: the names 14 px clear of their bars' start, the note 14 px after its bar's end — the 3D's guard
   round a word (10 px across) stops short of the bars */
.gl-lab.al-r.gapr { translate: calc(-100% - 14px) -50% !important; }
.gl-lab.al-l.gapl { translate: 14px -50% !important; }
.gl-lab.gapr, .gl-lab.gapl { line-height: 1.25; }   /* (one line each: an iPhone SE's stage spaces the rows 24 px — a 22 px box with 3 px to the next stepped aside) */
/* (10/21, iPhone SE) a series' name over its line's end, right edge on it, its foot 0.45 em above the point — in px, so a chart drawn
   small (a short screen) still leaves the line clear of the words (motifs/product.js trendUp) */
.gl-lab.al-r.over-r { translate: -100% -100% !important; padding-bottom: 0.45em; }
/* a scene's own words (detail pass 2 — the reputation words of brand sentiment): words, not ticks */
.gl-lab.lab-word { translate: -50% -50%; font: var(--w-ui) var(--t-small)/1.2 var(--font); color: var(--ink); }
.gl-lab.lab-word.own { color: var(--lime); } .gl-lab.lab-word.warn { color: #FFA796; }

/* ── the blog's pictures and its posts (10/19 — the user asked that a post open as on the live blog) ──
   a card shows its post's own picture; a post is a page of its own: the reading column the live blog uses (720 px), the cover
   at 768 px, the contents beside the article from 1280 px (above it below), type set for long reading on the dusk ground */
.post-cover.has-img { padding: 0; display: block; }
.post-cover.has-img::before { content: none; }
.post-cover.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.post-feat.lead .post-cover.has-img { padding: 0; }
.post:hover .post-cover.has-img img { transform: scale(1.02); }
/* (detail pass 2) every card of the list one height — rows of 402 and 380 px read as a ragged grid — the date line at its foot;
   the '|' of the blog's name a step brighter (3.4 : 1 over the streams) */
.post-grid { grid-auto-rows: 1fr; }
.post-grid .post { grid-template-rows: auto 1fr; }
.post-grid .post-body { display: flex; flex-direction: column; }
.post-grid .post-meta { margin-top: auto; padding-top: 4px; }
.blog-brand i { color: var(--ink-3); }

.ph-post { padding-bottom: 0; }
.bar-toggle { display: none; }
.bar-links { display: flex; gap: 22px; margin-left: 18px; }
.bar-links a { font: var(--w-ui) var(--t-ui)/1 var(--font); color: var(--ink-2) !important; padding-block: 10px; }
.bar-links a:hover { color: var(--ink) !important; }
.post-head { display: grid; justify-items: start; gap: 18px; width: 100%; max-width: calc(720px + 2 * var(--gut)); margin: 0 auto; padding: clamp(44px, 6vw, 84px) var(--gut) 30px; }
.post-catlink { font: var(--w-ui) var(--t-small)/1 var(--font); color: var(--ink-2) !important; padding-block: 10px; margin-block: -10px; }
.post-catlink:hover { color: var(--ink) !important; }
.post-title { font: var(--w-head) clamp(30px, 3.2vw, 44px)/1.3 var(--font); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; word-break: keep-all; }
.post-lead { font: var(--w-body) clamp(17px, 1.3vw, 19px)/1.7 var(--font); color: var(--ink-2); text-wrap: pretty; word-break: keep-all; }
.post-when { font: var(--w-body) var(--t-small)/1 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }   /* (detail pass 2, phone: ink-3 met the streams' light at 4.5 : 1 exactly — no margin) */
.post-hero-img { width: 100%; max-width: calc(768px + 2 * var(--gut)); margin: 6px auto 0; padding-inline: var(--gut); }
.post-hero-img img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--bg-3); }

.post-read { padding-top: clamp(44px, 5vw, 64px); }
.post-layout { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; padding-inline: var(--gut); }
.post-article { min-width: 0; }
.post-toc .toc-h { font: var(--w-head) var(--t-ui)/1.3 var(--font); color: var(--ink); margin-bottom: 14px; }
.post-toc ol { list-style: none; display: grid; gap: 4px; margin: 0; padding: 0; }
.post-toc a { display: block; padding-block: 6px; font: var(--w-body) var(--t-small)/1.5 var(--font); color: var(--ink-3) !important; word-break: keep-all; transition: color 0.25s; }
.post-toc li.lv2 a { padding-left: 14px; }
.post-toc li.lv3 a { padding-left: 28px; }
.post-toc a:hover, .post-toc a.now { color: var(--ink) !important; }
.post-toc-top { margin: 0 0 44px; padding: 20px 22px 16px; border-radius: 16px; background: rgba(var(--bg-rgb), 0.72); box-shadow: inset 0 0 0 1px var(--line-2); }
.post-toc-side { display: none; }
@media (min-width: 1280px) {
  .post-layout { grid-template-columns: 236px minmax(0, 720px) 236px; column-gap: 52px; }
  .post-article { grid-column: 2; grid-row: 1; }
  .post-toc-top { display: none; }
  .post-toc-side { display: block; grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: 112px; max-height: calc(100vh - 150px); overflow: auto; scrollbar-width: none; }
}

.prose { font: var(--w-body) var(--t-body)/1.85 var(--font); color: var(--ink-2); word-break: keep-all; overflow-wrap: break-word; }
.prose h2 { margin-top: 64px; font: var(--w-head) clamp(24px, 2.1vw, 30px)/1.42 var(--font); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.prose h3 { margin-top: 46px; font: var(--w-head) clamp(20px, 1.6vw, 23px)/1.48 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.prose h4 { margin-top: 34px; font: var(--w-ui) 18px/1.55 var(--font); color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose p { margin-top: 18px; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: 14px; }
.prose strong, .prose b { font-weight: var(--w-ui); color: var(--ink); }
.prose .em-warm, .prose .em-warm strong { color: var(--coral); }
.prose .em-cool, .prose .em-cool strong { color: var(--ice); }
.prose a { color: var(--ink) !important; text-decoration: underline; text-decoration-color: rgba(157, 178, 255, 0.5); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose figure { margin: 36px auto 0; }
.prose figure.fig-narrow { width: var(--fw); }
.prose figure img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--bg-3); }
.prose figcaption { margin-top: 10px; font: var(--w-body) var(--t-small)/1.6 var(--font); color: var(--ink-3); text-align: center; }
.prose .table-wrap { margin-top: 30px; overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); }
.prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.6; }
.prose th, .prose td { padding: 13px 16px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--line); }
.prose tr:last-child td { border-bottom: 0; }
.prose th { color: var(--ink); background: rgba(190, 205, 255, 0.05); }
.prose th p, .prose td p { margin: 0; }
/* (detail pass 2) a table's first column is its row names — kept on one line (squeezed by the long cells beside them they broke
   as '데이터 / 구조', two characters alone) */
.prose td:first-child, .prose th:first-child, .prose td:first-child p, .prose th:first-child p { white-space: nowrap; }   /* (the p too: its own 'text-wrap: pretty' (base.css) is a shorthand that sets text-wrap-mode back to wrap — the cell's nowrap never reached the words) */
/* (detail pass 2, iPhone) on a phone a table of three or more columns is read row by row: each row a card, its first cell the
   card's name, every other cell under its column's name (the header row stays for screen readers only) — scrolled sideways
   in its box, the last column was cut mid-letter at the screen's edge with nothing to say that it scrolls */
@media (max-width: 640px) {
  .prose .table-wrap.stack { overflow: visible; border-radius: 0; box-shadow: none; }
  .prose .table-wrap.stack table, .prose .table-wrap.stack thead, .prose .table-wrap.stack tbody, .prose .table-wrap.stack tr, .prose .table-wrap.stack td { display: block; min-width: 0; }
  .prose .table-wrap.stack .th-row { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .prose .table-wrap.stack tr:not(.th-row) { padding: 16px 20.8px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); }   /* (20.8 px: a list's 1.3em at the phone's 16 px article — the cards' words start where the bullets' text does; 18 px stood 3.4 px off, 1.3em of the table's 15 px 1.9 px) */
  .prose .table-wrap.stack tr:not(.th-row) ~ tr { margin-top: 12px; }
  .prose .table-wrap.stack td, .prose .table-wrap.stack td p { padding: 0; border: 0; white-space: normal; }
  .prose .table-wrap.stack td + td { margin-top: 12px; }
  .prose .table-wrap.stack td.rn { font-weight: 600; color: var(--ink); }
  .prose .table-wrap.stack td + td[data-th]::before { content: attr(data-th); display: block; margin-bottom: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
}
.prose ul, .prose ol { margin-top: 18px; padding-left: 1.3em; }
.prose li + li { margin-top: 8px; }
.prose code { font: inherit; font-size: 0.93em; padding: 1px 5px; border-radius: 3px; color: var(--ink); background: rgba(190, 205, 255, 0.08); }   /* (detail pass 2: radius 6 → 3 — a short code word in a rounded chip read as a pill) */
.prose mark { padding: 0 2px; border-radius: 3px; color: var(--ink); background: rgba(220, 255, 80, 0.16); }
.prose blockquote { margin-top: 24px; padding-left: 18px; border-left: 2px solid var(--line-3); }
.prose hr { margin: 44px 0 0; border: 0; border-top: 1px solid var(--line-2); }
.prose h2[id], .prose h3[id], .prose h4[id] { scroll-margin-top: 100px; }
/* (10/19, the phone scale) a post on a phone: its title at the page headlines' size, its article a step above the page body —
   an article is read, not skimmed (title 31 px filled the first screen with the lead: 86–105 % of it) */
@media (max-width: 760px) {
  .post-title { font-size: clamp(23px, 6.4vw, 26px); line-height: 1.34; }
  .post-lead { font-size: var(--t-lead); }
  .prose { font-size: 16px; line-height: 1.8; }
  .prose h2 { margin-top: 48px; font-size: 20px; }
  .prose h3 { margin-top: 36px; font-size: 18px; }
}

.post-share { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--line); }
.post-share-h { margin-right: auto; font: var(--w-head) 20px/1.3 var(--font); color: var(--ink); }
.share-row { display: flex; gap: 10px; }
.share-row a, .share-row button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--ink-2) !important; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: color 0.25s, box-shadow 0.25s; }
.share-row a:hover, .share-row button:hover { color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-3); }
.share-row svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.share-row .i-done { display: none; }
.share-row .done .i-link { display: none; }
.share-row .done .i-done { display: inline; }
.post-read .blog-foot { margin-top: 72px; }

@media (max-width: 760px) {
  .ph-post .blog-bar { flex-wrap: wrap; }
  .bar-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 12px; color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
  .bar-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); }
  .bar-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .bar-links { display: none; order: 4; width: 100%; margin: 0; gap: 18px; }
  .bar-links.open { display: flex; }
  .ph-post .blog-search { order: 3; width: 100%; margin-left: 0; }
  .ph-post .blog-start { margin-left: 0; }
  .post-head { padding-block: 34px 22px; gap: 14px; }
  .post-hero-img { padding-inline: 0; }
  .post-hero-img img { border-radius: 0; }
  .prose { font-size: 16.5px; line-height: 1.82; }
  .prose figure.fig-narrow { width: 100%; }
  .post-toc-top { margin-bottom: 36px; }
}

/* (10/20 afternoon) a press on a chip or a card answers at once too — chrome.css says why; here, after their own rules */
.chip { transition: box-shadow 0.3s, color 0.3s, background-color 0.3s, scale 0.42s var(--ease-out); }
.post { transition: transform 0.6s var(--ease-out), box-shadow 0.35s, scale 0.45s var(--ease-out); }
.chip:active { scale: 0.96; transition: box-shadow 0.3s, color 0.3s, background-color 0.3s, scale 0.09s ease-out; }
.post:active { scale: 0.99; transition: transform 0.6s var(--ease-out), box-shadow 0.35s, scale 0.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .chip:active, .post:active { scale: none; } }

/* (10/20 afternoon, style.gallery 'Scroll Progress' · '읽는 만큼 차오르는 선') a post's reading line along the top (ui/post.js) */
.read-line { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 2px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.read-line.on { opacity: 1; }
.read-line i { display: block; height: 100%; background: var(--lime); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }

/* (10/20 afternoon) the 3D words' values count up (site.js) — figures of one width, so a value does not wobble as it climbs */
.gl-lab b { font-variant-numeric: tabular-nums; }