/* Lignums 공식 사이트 — 밝은 종이 위의 공부. 장면은 세로로 이어지는 영상처럼. (2026-10-10 라이트 모드로 전환) */
:root {
  color-scheme: light;
  --bg: #FAFAF8;
  --bg-2: #FFFFFF;
  --bg-3: #F1F3F6;
  --fg: #15171C;
  --fg-2: #4C515B;
  --fg-3: #6E737D;
  --line: rgba(21, 23, 28, .10);
  --line-2: rgba(21, 23, 28, .18);
  --brand: #2B519C;
  --brand-deep: #1E3A71;
  --brand-ink: #2B519C;
  --brand-ink-deep: #1E3A71;
  --on-brand: #FFFFFF;
  --brand-weak: #E4ECFB;
  --leaf: #1B9A6F;
  --leaf-ink: #1B9A6F;
  --marker: #A87A00;
  --critical: #C9372C;
  --shadow-lg: 0 30px 80px rgba(22, 32, 56, .16);
  --hover: rgba(21, 23, 28, .05);
  --paper: #FFFFFF;
  --paper-2: #F6F7F9;
  --paper-3: #EEF0F3;
  --ink: #15171C;
  --ink-2: #5B5F68;
  --ink-3: #6B6F78;
  --ink-line: rgba(21, 23, 28, .12);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --sans: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  --script: "Sacramento", cursive;
  --pen: "Nanum Pen Script", "Sacramento", cursive;
  --serif: "Noto Serif KR", AppleMyungjo, "Nanum Myeongjo", serif;
  --gutter: clamp(16px, 5vw, 72px);
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  word-break: keep-all;
  overflow-wrap: anywhere;
  cursor: none;
}
@media (hover: none), (pointer: coarse) { body { cursor: auto; } }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.02em; line-height: 1.15; font-weight: 700; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 커서 ---------- */
.cur { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1000; mix-blend-mode: difference; will-change: transform; }
.cur-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; }
.cur-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1.5px solid #fff; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.cur-ring.is-link { transform: scale(1.8); opacity: .5; }
.cur-ring.is-drag { transform: scale(2.4); opacity: .35; }
@media (hover: none), (pointer: coarse) { .cur { display: none; } }

/* ---------- 프리로더 ---------- */
.loader { position: fixed; inset: 0; z-index: 900; background: var(--bg); display: grid; place-items: center; clip-path: inset(0 0 0 0); }
.loader-in { display: grid; gap: 14px; justify-items: center; }
.loader-wm { width: clamp(120px, 24vw, 220px); opacity: 0; filter: blur(8px); }
.loader-count { font-size: 13px; letter-spacing: .12em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.loader-bar { width: clamp(120px, 24vw, 220px); height: 1px; background: var(--line); overflow: hidden; }
.loader-bar i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.loader.is-done { display: none; }

/* ---------- 진행선 · 내비 ---------- */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 600; background: var(--brand); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500; height: var(--nav-h);
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: var(--gutter);
  transition: transform 320ms var(--ease-out), background-color 320ms var(--ease-out), border-color 320ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgba(250, 250, 248, .78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav-logo { display: flex; align-items: center; gap: 10px; height: 44px; }
.nav-logo svg { width: 28px; height: 28px; }
.nav-logo img { height: 18px; width: auto; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; height: 40px; padding-inline: 12px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; color: var(--fg-2); transition: color 150ms ease, background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--fg); background: rgba(21, 23, 28, .06); } }
.nav-links a.is-active { color: var(--fg); }
.nav-cta { display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .nav-links { display: none; } }

/* ---------- 버튼 ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding-inline: 22px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent; overflow: hidden; isolation: isolate;
}
.btn:not(:disabled):active { transform: scale(.96); }
.btn svg { width: 18px; height: 18px; stroke: currentColor; }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-brand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); z-index: -1; }
@media (hover: hover) and (pointer: fine) {
  .btn-brand:hover { background: var(--brand-deep); }
  .btn-brand:hover::after { animation: shine 900ms var(--ease-out) forwards; }
}
@keyframes shine { to { transform: translateX(120%); } }
.btn-ghost { color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); background: rgba(21, 23, 28, .02); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: rgba(21, 23, 28, .07); } }
.btn-sm { height: 40px; padding-inline: 16px 14px; font-size: 14px; }
.btn-ink { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-ink:hover { background: #2a2d35; } }

/* ---------- 공통 레이아웃 ---------- */
.wrap { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { position: relative; padding-block: clamp(96px, 14vh, 180px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.h2 { font-size: clamp(32px, 5.2vw, 64px); margin-top: 18px; }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--fg-2); max-width: 62ch; margin-top: 20px; }
.paper-theme { background: var(--paper); color: var(--ink); }
.paper-theme .eyebrow { color: var(--brand-ink); }
.paper-theme .lead { color: var(--ink-2); }
.tag { display: inline-flex; align-items: center; height: 22px; padding-inline: 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.tag-live { background: rgba(27, 154, 111, .12); color: var(--leaf); }
.tag-beta { background: rgba(43, 81, 156, .1); color: var(--brand); }
.tag-plan { background: rgba(21, 23, 28, .08); color: var(--fg-2); }
.tag-mark { background: rgba(227, 190, 67, .22); color: var(--marker); }

/* 스크롤 리빌(한 번만) */
.rv { opacity: 1; }
.js .rv { opacity: 0; transform: translateY(18px); filter: blur(4px); }
.js .rv.is-in { opacity: 1; transform: none; filter: blur(0); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), filter 600ms var(--ease-out); }
.js .rv[data-d="1"].is-in { transition-delay: 100ms; }
.js .rv[data-d="2"].is-in { transition-delay: 200ms; }
.js .rv[data-d="3"].is-in { transition-delay: 300ms; }
.js .rv[data-d="4"].is-in { transition-delay: 400ms; }
.js .rv[data-d="5"].is-in { transition-delay: 500ms; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { transform: none; filter: none; }
  .js .rv.is-in { transition: opacity 300ms ease; }
}

/* ---------- 히어로 ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding-block: calc(var(--nav-h) + 48px) 96px; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(60% 50% at 70% 30%, rgba(136, 174, 244, .35), transparent 70%),
  radial-gradient(40% 40% at 20% 80%, rgba(102, 195, 164, .2), transparent 70%); }
.hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; height: 32px; padding-inline: 6px 14px; border-radius: 999px; background: rgba(21, 23, 28, .05); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--fg-2); }
.hero-kicker b { display: inline-flex; align-items: center; height: 22px; padding-inline: 9px; border-radius: 999px; background: var(--leaf); color: var(--on-brand); font-weight: 700; font-size: 11.5px; }
.hero-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 0 rgba(102, 195, 164, .6); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(102, 195, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(102, 195, 164, 0); } }
.hero h1 { font-size: clamp(40px, 7vw, 96px); line-height: 1.04; margin-top: 26px; letter-spacing: -.035em; }
.hero h1 .ch { display: inline-block; will-change: transform, opacity; }
.hero h1 em { font-style: normal; color: var(--brand); position: relative; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .16em; background: rgba(227, 190, 67, .55); z-index: -1; border-radius: 2px; transform: scaleX(0); transform-origin: left; }
.hero.is-live h1 em::after { transition: transform 700ms var(--ease-out) 900ms; transform: scaleX(1); }
.hero-sub { font-size: clamp(17px, 1.5vw, 21px); color: var(--fg-2); max-width: 54ch; margin-top: 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--fg-3); }
.hero-note .pen { font-family: var(--pen); font-size: 22px; color: var(--leaf); margin-left: 6px; }

/* 떠 있는 제품 카드 */
.hero-stage { position: relative; height: clamp(360px, 48vw, 560px); perspective: 1200px; }
.fcard { position: absolute; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 30px 80px rgba(22, 32, 56, .18); will-change: transform; transform-style: preserve-3d; overflow: hidden; }
.fcard-1 { width: 68%; aspect-ratio: 4 / 5.2; left: 2%; top: 4%; z-index: 2; }
.fcard-2 { width: 54%; aspect-ratio: 3 / 4; right: 0; top: 24%; z-index: 3; background: #1a1b1f; color: var(--fg); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 90px rgba(22, 32, 56, .18); border-radius: 22px; }
.fcard-3 { width: 40%; left: 30%; bottom: -4%; z-index: 4; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); color: var(--fg); box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(22, 32, 56, .18); }
.fcard-paper { padding: 7% 8%; font-family: var(--serif); font-size: clamp(8px, .72vw, 11px); line-height: 1.55; }
.fcard-paper h4 { font-family: var(--sans); font-size: 1.05em; letter-spacing: -.01em; border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; }
.fcard-paper h4 span { font-weight: 400; color: var(--ink-3); }
.fcard-paper .q { display: grid; grid-template-columns: 1.6em 1fr; gap: 4px; margin-bottom: 9px; }
.fcard-paper .q b { font-family: var(--sans); }
.fcard-paper .q small { display: block; color: var(--ink-3); margin-top: 3px; }
.fcard-paper .chipline { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; font-family: var(--sans); }
.fcard-paper .chipline i { font-style: normal; padding: 1px 6px; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); font-size: .9em; }
.fcard-paper .chipline i.k { background: #D8E5FD; color: var(--brand-ink); }
.fcard-ipad { padding: 7%; display: grid; gap: 10px; }
.fcard-ipad .bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.fcard-ipad .bar.w1 { width: 62%; } .fcard-ipad .bar.w2 { width: 84%; } .fcard-ipad .bar.w3 { width: 48%; }
.fcard-ipad svg { width: 100%; height: auto; margin-top: 6px; }
.fcard-ipad path { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.hero.is-live .fcard-ipad path { animation: draw 2.2s var(--ease-in-out) 1.3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.fcard-ipad .omr { display: flex; gap: 6px; margin-top: 4px; }
.fcard-ipad .omr i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.fcard-ipad .omr i.on { background: var(--brand); box-shadow: none; }
.fcard-3 .t { font-size: 12px; color: var(--fg-3); }
.fcard-3 .v { font-size: 22px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.fcard-3 .v small { font-size: 12px; font-weight: 500; color: var(--leaf); margin-left: 6px; }
.fcard-3 .spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 8px; }
.fcard-3 .spark i { flex: 1; background: var(--brand-weak); border-radius: 2px 2px 0 0; transform-origin: bottom; }
.fcard-3 .spark i:nth-child(6) { background: var(--brand); }
.hero-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .14em; color: var(--fg-3); text-transform: uppercase; }
.hero-scroll i { width: 1px; height: 44px; background: linear-gradient(var(--fg-3), transparent); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: translateY(-100%); animation: drip 1.8s var(--ease-in-out) infinite; }
@keyframes drip { to { transform: translateY(100%); } }
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-stage { height: clamp(320px, 90vw, 420px); margin-top: 8px; }
  .hero-scroll { display: none; }
}

/* ---------- 선언문 ---------- */
.manifesto { padding-block: clamp(120px, 20vh, 240px); }
.manifesto p { font-size: clamp(26px, 4.4vw, 58px); font-weight: 600; letter-spacing: -.03em; line-height: 1.25; max-width: 24ch; text-wrap: pretty; }
.manifesto .w { display: inline-block; opacity: .14; }
.manifesto .w.hi { color: var(--brand); }
.manifesto .margin { display: flex; gap: 32px; margin-top: 48px; flex-wrap: wrap; }
.manifesto .margin span { font-family: var(--pen); font-size: 26px; color: var(--leaf); transform: rotate(-2deg); }
.manifesto .margin span:nth-child(2) { color: var(--marker); transform: rotate(1.5deg); }
.manifesto .margin span:nth-child(3) { color: var(--brand); transform: rotate(-1deg); }

/* ---------- 흐름 장면(핀) ---------- */
.flow { position: relative; }
.flow-pin { height: 100svh; min-height: 640px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; padding-top: var(--nav-h); }
.flow-copy { position: relative; min-height: 340px; }
.flow-head { margin-bottom: 36px; }
.flow-steps { position: relative; height: 260px; }
.flow-step { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.flow-step .n { font-size: 13px; letter-spacing: .12em; color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-step h3 { font-size: clamp(28px, 3.4vw, 44px); margin-top: 10px; }
.flow-step p { color: var(--fg-2); margin-top: 16px; max-width: 40ch; font-size: 17px; }
.flow-step .st { margin-top: 18px; }
.flow-dots { display: flex; gap: 6px; margin-top: 8px; }
.flow-dots i { width: 28px; height: 3px; border-radius: 2px; background: var(--line); transition: background-color 200ms ease; }
.flow-dots i.on { background: var(--brand); }
.flow-stage { position: relative; aspect-ratio: 1 / 1; max-height: calc(100svh - var(--nav-h) - 48px); width: 100%; margin-inline: auto; }
.flow-stage > * { position: absolute; }
.stage-desk { inset: 0; border-radius: var(--r-xl); background: radial-gradient(80% 70% at 50% 40%, rgba(136, 174, 244, .28), transparent 70%); }
.paper { left: 10%; top: 6%; width: 62%; aspect-ratio: 1 / 1.3; background: var(--paper); color: var(--ink); border-radius: 6px; box-shadow: 0 40px 80px rgba(22, 32, 56, .18); padding: 5% 6%; font-family: var(--serif); font-size: clamp(8px, 1.05vw, 12px); line-height: 1.55; overflow: hidden; }
.paper h4 { font-family: var(--sans); font-size: 1.1em; border-bottom: 1.5px solid var(--ink); padding-bottom: .5em; margin-bottom: .9em; display: flex; justify-content: space-between; }
.paper h4 span { font-weight: 400; color: var(--ink-3); }
.paper .q { display: grid; grid-template-columns: 1.7em 1fr; gap: .3em; margin-bottom: 1em; }
.paper .q b { font-family: var(--sans); }
.paper .q .opts { display: grid; grid-template-columns: 1fr 1fr; gap: .1em .8em; color: var(--ink-2); margin-top: .3em; }
.paper .q .ans { margin-top: .5em; height: 2.4em; border: 1px dashed var(--ink-line); border-radius: 4px; }
.scanframe { left: 7%; top: 3%; width: 68%; aspect-ratio: 1 / 1.3; opacity: 0; }
.scanframe i { position: absolute; width: 26px; height: 26px; border: 2.5px solid var(--leaf); }
.scanframe i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.scanframe i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.scanframe i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.scanframe i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.scanline { left: 10%; top: 6%; width: 62%; height: 3px; background: linear-gradient(90deg, transparent, var(--leaf), transparent); box-shadow: 0 0 24px var(--leaf); opacity: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 10px; border-radius: 999px; background: var(--bg-2); color: var(--fg); font-size: 12.5px; font-weight: 600; box-shadow: 0 0 0 1px var(--line-2), 0 12px 30px rgba(22, 32, 56, .18); opacity: 0; white-space: nowrap; }
.chip b { color: var(--brand); font-weight: 700; }
.chip .lv { color: var(--marker); }
.chip-1 { left: 62%; top: 18%; } .chip-2 { left: 66%; top: 40%; } .chip-3 { left: 58%; top: 62%; }
.trend { right: 0; top: 72%; width: 40%; padding: 14px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(22, 32, 56, .1); opacity: 0; }
.trend .t { font-size: 11.5px; color: var(--fg-3); margin-bottom: 8px; }
.trend .row { display: grid; grid-template-columns: 5.2em 1fr 2.4em; align-items: center; gap: 8px; font-size: 11.5px; margin-top: 5px; }
.trend .row .b { height: 8px; border-radius: 4px; background: var(--brand-weak); overflow: hidden; }
.trend .row .b i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.trend .row .b.k i { background: var(--marker); }
.trend .row .v { text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.gen { left: 36%; top: 12%; width: 60%; display: grid; gap: 12px; }
.gcard { background: var(--paper); color: var(--ink); border-radius: var(--r-md); padding: 12px 14px; box-shadow: 0 20px 50px rgba(22, 32, 56, .18); font-size: 12.5px; line-height: 1.5; clip-path: inset(0 100% 0 0 round 10px); position: relative; }
.gcard .k { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin-bottom: 4px; }
.gcard .k b { color: var(--brand-ink); }
.gcard .body { font-family: var(--serif); }
.stamp { right: 2%; top: 58%; padding: 6px 12px; border: 2.5px solid var(--leaf); color: var(--leaf); border-radius: 8px; font-weight: 800; letter-spacing: .06em; transform: rotate(-10deg) scale(1.6); opacity: 0; font-size: 15px; background: rgba(255, 255, 255, .85); }
.ipad { left: 14%; top: 8%; width: 60%; aspect-ratio: 3 / 4; border-radius: 22px; background: #1a1b1f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 7px #26282d, 0 40px 90px rgba(22, 32, 56, .18); padding: 7%; opacity: 0; }
.ipad .screen { height: 100%; border-radius: 10px; background: var(--paper); color: var(--ink); padding: 8%; font-family: var(--serif); font-size: clamp(8px, 1vw, 12px); line-height: 1.5; position: relative; overflow: hidden; }
.ipad .screen h5 { font-family: var(--sans); font-size: 1em; margin: 0 0 .6em; display: flex; justify-content: space-between; color: var(--ink-2); }
.ipad svg.ink { position: absolute; left: 6%; top: 32%; width: 88%; height: auto; }
.ipad svg.ink path { fill: none; stroke: var(--brand-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ipad .omr { position: absolute; left: 8%; right: 8%; bottom: 8%; display: flex; justify-content: space-between; font-family: var(--sans); }
.ipad .omr i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); display: grid; place-items: center; font-size: 8px; font-style: normal; color: var(--ink-3); }
.ipad .omr i.on { background: var(--brand-ink); color: #fff; box-shadow: none; }
.score { right: 2%; top: 48%; width: 30%; aspect-ratio: 1; opacity: 0; display: grid; place-items: center; }
.score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score circle { fill: none; stroke-width: 7; }
.score .bg { stroke: rgba(21, 23, 28, .08); }
.score .fg { stroke: var(--leaf); stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; }
.score .lab { position: absolute; text-align: center; }
.score .lab b { display: block; font-size: clamp(20px, 2.6vw, 34px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.score .lab small { font-size: 11px; color: var(--fg-3); }
.mastery { left: 8%; top: 14%; width: 56%; padding: 18px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(22, 32, 56, .1); opacity: 0; }
.mastery .t { font-size: 12px; color: var(--fg-3); margin-bottom: 10px; }
.mastery .row { display: grid; grid-template-columns: 5.6em 1fr 2.6em; align-items: center; gap: 10px; font-size: 12.5px; margin-top: 8px; position: relative; }
.mastery .row .b { height: 10px; border-radius: 5px; background: rgba(21, 23, 28, .08); overflow: hidden; }
.mastery .row .b i { display: block; height: 100%; background: var(--leaf); transform: scaleX(0); transform-origin: left; }
.mastery .row.weak .b i { background: var(--critical); }
.mastery .row .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.mastery .hl { position: absolute; left: -6px; right: -6px; top: -4px; bottom: -4px; background: rgba(227, 190, 67, .28); border-radius: 6px; transform: scaleX(0); transform-origin: left; z-index: -1; }
.mastery .more { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding-inline: 14px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 12.5px; transform: scale(.9); opacity: 0; }
.wrong { right: 2%; top: 30%; width: 40%; background: var(--paper); color: var(--ink); border-radius: var(--r-md); padding: 12px 14px; font-size: 12px; box-shadow: 0 20px 50px rgba(22, 32, 56, .18); opacity: 0; }
.wrong .k { font-family: var(--sans); font-size: 11px; color: var(--critical); font-weight: 700; margin-bottom: 4px; }
.wrong .body { font-family: var(--serif); }
.wrong .pen { font-family: var(--pen); font-size: 18px; color: var(--brand-ink); margin-top: 6px; transform: rotate(-2deg); }
.dday { left: 12%; top: 10%; width: 72%; padding: 20px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(22, 32, 56, .1); opacity: 0; }
.dday .head { display: flex; justify-content: space-between; align-items: baseline; }
.dday .head b { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dday .head b span { color: var(--brand); }
.dday .head small { color: var(--fg-3); font-size: 12px; }
.dday .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
.dday .grid i { aspect-ratio: 1; border-radius: 6px; background: rgba(21, 23, 28, .06); display: grid; place-items: center; font-size: 10.5px; font-style: normal; color: var(--fg-3); transform: scale(.9); opacity: 0; font-variant-numeric: tabular-nums; }
.dday .grid i.done { background: var(--brand-weak); color: var(--brand); }
.dday .grid i.today { background: var(--brand); color: var(--on-brand); font-weight: 700; }
.dday .grid i.exam { background: var(--marker); color: var(--ink); font-weight: 700; }
.dday .plan { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.dday .plan span { font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: rgba(21, 23, 28, .07); color: var(--fg-2); }
.dday .plan span b { color: var(--fg); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .flow-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 12px; min-height: 0; padding-top: calc(var(--nav-h) + 8px); }
  .flow-stage { order: 1; width: min(100%, 52svh); aspect-ratio: 1; }
  .flow-copy { order: 2; min-height: 0; }
  .flow-head { margin-bottom: 14px; }
  .flow-head .h2 { font-size: 26px; margin-top: 8px; }
  .flow-head .lead { display: none; }
  .flow-steps { height: 190px; }
  .flow-step h3 { font-size: 22px; }
  .flow-step p { font-size: 14px; margin-top: 8px; }
  .flow-step .st { margin-top: 10px; }
  .chip { height: 24px; font-size: 10.5px; padding-inline: 8px; }
}

/* ---------- 제품(가로 스크롤) ---------- */
.products { position: relative; overflow: hidden; }
.products-head { padding-block: clamp(80px, 12vh, 140px) 32px; }
.products-pin { height: 100svh; min-height: 620px; display: flex; align-items: center; overflow: hidden; }
.products-track { display: flex; gap: 20px; padding-inline: var(--gutter); will-change: transform; }
.pcard { position: relative; flex: 0 0 min(560px, 84vw); min-height: 440px; border-radius: var(--r-xl); padding: 34px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; isolation: isolate; }
.pcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 81, 156, .08), transparent 55%); opacity: 0; transition: opacity 300ms ease; z-index: -1; }
@media (hover: hover) and (pointer: fine) { .pcard:hover::before { opacity: 1; } }
.pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pcard-top img { height: 30px; width: auto; }
.pcard h3 { font-size: clamp(26px, 2.6vw, 36px); }
.pcard h3 small { display: block; font-size: 14px; font-weight: 500; color: var(--fg-3); letter-spacing: 0; margin-top: 6px; }
.pcard p { color: var(--fg-2); margin-top: 12px; }
.pcard ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--fg-2); }
.pcard ul li { display: flex; gap: 10px; align-items: flex-start; }
.pcard ul li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); margin-top: 8px; }
.pcard-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--fg-3); padding-top: 18px; border-top: 1px solid var(--line); }
.pcard-foot b { color: var(--fg-2); font-weight: 500; }
.pcard-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-weak); color: var(--brand); }
.pcard-icon svg { width: 22px; height: 22px; stroke: currentColor; }
.pcard-arbor { background: linear-gradient(160deg, #E4ECFB, var(--bg-2) 60%); }
.pcard-note .pcard-icon { background: rgba(102, 195, 164, .16); color: var(--leaf); }
.pcard-parser .pcard-icon { background: rgba(227, 190, 67, .16); color: var(--marker); }
.pcard-end { flex: 0 0 min(420px, 84vw); display: grid; place-items: center; text-align: center; padding: 34px; }
.pcard-end .script { font-family: var(--script); font-size: clamp(40px, 5vw, 64px); color: var(--brand); line-height: 1; }
.pcard-end p { color: var(--fg-2); margin-top: 16px; }
@media (max-width: 900px) {
  .products-pin { height: auto; min-height: 0; display: block; }
  .products-track { flex-direction: column; gap: 14px; padding-bottom: 40px; }
  .pcard { flex-basis: auto; min-height: 0; padding: 24px; }
  .pcard-end { flex-basis: auto; }
}

/* ---------- 숫자 ---------- */
.numbers { background: var(--paper); color: var(--ink); }
.numbers .eyebrow { color: var(--brand-ink); }
.numbers .lead { color: var(--ink-2); }
.num-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 56px; border-top: 1px solid var(--ink-line); }
.ntile { padding: 28px 20px 28px 0; border-bottom: 1px solid var(--ink-line); }
.ntile .v { font-size: clamp(36px, 4.6vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--brand-ink); white-space: nowrap; }
.ntile .v small { font-size: .42em; font-weight: 600; letter-spacing: 0; margin-left: 2px; }
.ntile .l { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.ntile .src { display: inline-block; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); padding: 2px 7px; border-radius: 4px; background: var(--paper-3); }
@media (max-width: 1000px) { .num-grid { grid-template-columns: repeat(2, 1fr); gap: 0 20px; } }
@media (max-width: 480px) { .num-grid { grid-template-columns: 1fr; } }

/* ---------- 원칙 ---------- */
.principles .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; }
.prin { position: relative; padding: 28px 24px 26px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); clip-path: inset(0 0 100% 0 round 16px); min-height: 280px; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; }
.prin .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(21, 23, 28, .05); display: grid; place-items: center; color: var(--brand); }
.prin .ic svg { width: 22px; height: 22px; stroke: currentColor; }
.prin h3 { font-size: 20px; }
.prin p { color: var(--fg-2); font-size: 14.5px; margin-top: 10px; }
.prin .n { font-size: 12px; color: var(--fg-3); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .principles .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .principles .grid { grid-template-columns: 1fr; } .prin { min-height: 0; } }

/* ---------- 검증 다이어그램 ---------- */
.verify { background: var(--bg-3); }
.verify-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.vdiag { position: relative; width: 100%; }
.vdiag svg { width: 100%; height: auto; overflow: visible; }
.vdiag .track { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.vdiag .beam { fill: none; stroke: var(--leaf); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 90 1400; stroke-dashoffset: 1490; filter: drop-shadow(0 0 6px rgba(102, 195, 164, .8)); }
.vdiag .node { fill: var(--bg-3); stroke: var(--line-2); stroke-width: 1.5; }
.vdiag .node.ok { stroke: var(--leaf); }
.vdiag .node.ng { stroke: var(--critical); }
.vdiag text { font-family: var(--sans); font-size: 13px; fill: var(--fg); font-weight: 600; }
.vdiag text.s { font-size: 11px; fill: var(--fg-3); font-weight: 400; }
.vdiag text.ko { fill: var(--leaf); }
.vdiag text.ng { fill: var(--critical); }
.vlist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.vlist li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--fg-2); }
.vlist li b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-weak); color: var(--brand); font-size: 12px; font-variant-numeric: tabular-nums; }
.vlist li strong { color: var(--fg); font-weight: 600; }
@media (max-width: 900px) { .verify-grid { grid-template-columns: 1fr; } }

/* ---------- 요금 ---------- */
.pricing { background: var(--paper); color: var(--ink); }
.pricing .eyebrow { color: var(--brand-ink); }
.pricing .lead { color: var(--ink-2); }
.toggle { display: inline-grid; grid-auto-flow: column; position: relative; margin-top: 36px; padding: 4px; border-radius: 999px; background: var(--paper-3); isolation: isolate; }
.toggle button { position: relative; height: 40px; padding-inline: 18px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); z-index: 1; transition: color 200ms ease; cursor: pointer; }
.toggle button[aria-pressed="true"] { color: var(--ink); }
.toggle .pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04); transition: transform 250ms var(--ease-out); }
.toggle[data-mode="term"] .pill { transform: translateX(100%); }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; align-items: stretch; }
.plan { position: relative; border-radius: 20px; padding: 28px; background: var(--paper); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .04); display: grid; grid-template-rows: auto auto 1fr auto; gap: 18px; transition: box-shadow 150ms ease, transform 300ms var(--ease-out); transform-style: preserve-3d; }
@media (hover: hover) and (pointer: fine) { .plan:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .08), 0 12px 32px rgba(14, 15, 17, .12); } }
.plan.hot { background: var(--ink); color: #fff; box-shadow: 0 24px 60px rgba(21, 23, 28, .35); }
.plan.hot::before { content: ""; position: absolute; inset: -1px; border-radius: 21px; padding: 1px; background: conic-gradient(from var(--ang, 0deg), transparent 0 60%, var(--brand) 80%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 4s linear infinite; pointer-events: none; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }
.plan .who { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; }
.plan.hot .who { color: #8A8E96; }
.plan .price { display: flex; align-items: baseline; gap: 6px; height: 56px; overflow: hidden; position: relative; }
.plan .price .amt { font-size: 44px; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .price .per { font-size: 14px; color: var(--ink-3); }
.plan.hot .price .per { color: #8A8E96; }
.plan .alt { font-size: 13px; color: var(--ink-3); margin-top: -8px; min-height: 1.5em; }
.plan.hot .alt { color: #A3A7AF; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: var(--ink-2); }
.plan.hot ul { color: #A3A7AF; }
.plan ul li { display: flex; gap: 10px; align-items: flex-start; }
.plan ul li svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; stroke: var(--leaf-ink); }
.plan.hot ul li svg { stroke: #66C3A4; }
.plan .btn { width: 100%; }
.plan:not(.hot) .btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(21, 23, 28, .18); background: transparent; }
@media (hover: hover) and (pointer: fine) { .plan:not(.hot) .btn-ghost:hover { background: var(--paper-2); } }
.price-more { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pm { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 14px; background: var(--paper-2); font-size: 14px; }
.pm b { font-weight: 700; }
.pm span { color: var(--ink-2); }
.pm .v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 1000px) { .price-grid { grid-template-columns: 1fr; } .price-more { grid-template-columns: 1fr; } .pm { flex-wrap: wrap; } }

/* ---------- 일정 ---------- */
.roadmap .line { position: relative; margin-top: 56px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.roadmap .line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.roadmap .line .draw { position: absolute; left: 0; top: 7px; height: 1px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.rm { position: relative; padding-top: 28px; }
.rm::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow 300ms ease, background-color 300ms ease; }
.rm.is-on::before { background: var(--brand); box-shadow: 0 0 0 4px rgba(43, 81, 156, .15); }
.rm .when { font-size: 12.5px; letter-spacing: .06em; color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }
.rm h3 { font-size: 18px; margin-top: 8px; }
.rm p { font-size: 14px; color: var(--fg-2); margin-top: 8px; }
.rm .ok { margin-top: 10px; font-size: 12.5px; color: var(--fg-3); }
.rm .ok b { color: var(--leaf); font-weight: 600; }
@media (max-width: 1000px) {
  .roadmap .line { grid-template-columns: 1fr; gap: 8px; padding-left: 28px; }
  .roadmap .line::before, .roadmap .line .draw { left: 7px; top: 0; bottom: 0; right: auto; width: 1px; height: 100%; transform-origin: top; }
  .roadmap .line .draw { transform: scaleY(0); }
  .rm { padding: 0 0 28px; }
  .rm::before { left: -28px; top: 4px; }
}

/* ---------- 마키 ---------- */
.marquee { padding-block: 40px; border-block: 1px solid var(--line); overflow: hidden; background: var(--bg-3); }
.mq { display: flex; width: max-content; will-change: transform; }
.mq span { font-size: clamp(32px, 5vw, 72px); font-weight: 700; letter-spacing: -.03em; padding-inline: .5em; white-space: nowrap; color: var(--fg); }
.mq span i { font-style: normal; color: var(--brand); margin-right: .5em; }
.mq-2 span { color: var(--fg-3); -webkit-text-stroke: 1px var(--fg-3); color: transparent; }
.mq-2 span i { color: var(--leaf); -webkit-text-stroke: 0; }

/* ---------- 마무리 ---------- */
.cta { position: relative; overflow: hidden; padding-block: clamp(120px, 18vh, 220px) 60px; }
.cta-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 40% at 50% 100%, rgba(136, 174, 244, .38), transparent 70%); }
.cta-in { position: relative; text-align: center; display: grid; justify-items: center; }
.cta .script { font-family: var(--script); font-size: clamp(44px, 7vw, 96px); color: var(--brand); line-height: 1; }
.cta h2 { font-size: clamp(32px, 5vw, 68px); margin-top: 14px; }
.cta p { color: var(--fg-2); font-size: clamp(16px, 1.4vw, 19px); max-width: 48ch; margin-top: 20px; }
.cta .btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 36px; }
.cta-wm { position: relative; margin-top: clamp(64px, 10vh, 120px); width: min(100%, 980px); }
.cta-wm img { width: 100%; height: auto; opacity: .95; }
.cta-wm .mask { position: absolute; inset: 0; background: var(--bg); transform-origin: right; }
.foot { position: relative; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; font-size: 13px; color: var(--fg-3); }
.foot a { color: var(--fg-2); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--fg); } }
.foot .links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot .co { display: flex; align-items: center; gap: 10px; }
.foot .co svg { width: 22px; height: 22px; }
@media (max-width: 700px) { .foot { grid-template-columns: 1fr; } }

/* ---------- 모션 감소 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-kicker i, .hero-scroll i::after, .plan.hot::before, .btn-brand::after { animation: none !important; }
  .hero.is-live .fcard-ipad path { animation: none; stroke-dashoffset: 0; }
  .cur { display: none; }
  body { cursor: auto; }
}

/* ======================================================================
   여러 페이지 공통 추가분 — 내비 드롭다운·시트, 페이지 히어로, 제품 스토리(디바이스 고정), 특징 그리드
   ====================================================================== */
.nav-dd { position: relative; }
.nav-dd > button { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding-inline: 12px 8px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; color: var(--fg-2); cursor: inherit; transition: color 150ms ease, background-color 150ms ease; }
.nav-dd > button svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.nav-dd.is-open > button svg { transform: rotate(180deg); }
.nav-dd > button.is-active, .nav-dd.is-open > button { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .nav-dd > button:hover { color: var(--fg); background: rgba(21, 23, 28, .06); } }
.nav-menu { position: absolute; left: 50%; top: calc(100% + 8px); width: 320px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(22, 32, 56, .16); transform-origin: 50% 0; opacity: 0; transform: translateX(-50%) scale(.96); visibility: hidden; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms; }
.nav-dd.is-open .nav-menu { opacity: 1; transform: translateX(-50%) scale(1); visibility: visible; transition-delay: 0s; }
.nav-menu a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; padding: 10px 12px; border-radius: 10px; transition: background-color 120ms ease; }
.nav-menu a b { font-size: 14px; font-weight: 600; color: var(--fg); }
.nav-menu a span { font-size: 12px; color: var(--fg-3); grid-column: 1; }
.nav-menu a i { grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 11px; color: var(--leaf); padding: 2px 7px; border-radius: 999px; background: rgba(27, 154, 111, .12); }
.nav-menu a.is-active { background: rgba(21, 23, 28, .06); }
@media (hover: hover) and (pointer: fine) { .nav-menu a:hover { background: rgba(21, 23, 28, .08); } }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 10px; place-items: center; gap: 5px; }
.nav-burger i { display: block; width: 20px; height: 2px; background: var(--fg); border-radius: 1px; transition: transform 200ms var(--ease-out); }
.nav-burger[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-sheet[hidden] { display: none; }
.nav-sheet { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 8px var(--gutter) 20px; background: rgba(250, 250, 248, .97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav-sheet a { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.nav-sheet a span { font-size: 12.5px; font-weight: 400; color: var(--fg-3); }
.nav.is-sheet { background: rgba(250, 250, 248, .97); }
@media (max-width: 900px) { .nav-burger { display: grid; } .nav-cta .btn { display: none; } }

/* 페이지 히어로 */
.phero { position: relative; padding-block: calc(var(--nav-h) + clamp(56px, 10vh, 120px)) clamp(40px, 8vh, 96px); overflow: hidden; }
.phero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 72% 0%, rgba(136, 174, 244, .34), transparent 70%), radial-gradient(40% 40% at 8% 30%, rgba(246, 213, 92, .16), transparent 70%); }
.phero .wrap { position: relative; }
.phero .crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg-3); }
.phero .crumbs a { color: var(--fg-2); }
.phero .crumbs i { font-style: normal; opacity: .5; }
.phero h1 { font-size: clamp(40px, 7vw, 104px); line-height: 1.02; letter-spacing: -.035em; margin-top: 22px; perspective: 800px; }
.phero h1 .ch { display: inline-block; }
.phero h1 em { font-style: normal; color: var(--brand); }
.phero .lead { font-size: clamp(17px, 1.5vw, 22px); margin-top: 24px; max-width: 56ch; }
.phero .meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; align-items: center; }
.phero .meta .tag { height: 26px; font-size: 12.5px; padding-inline: 10px; }
.phero .meta .btn { margin-left: auto; }
@media (max-width: 700px) { .phero .meta .btn { margin-left: 0; width: 100%; } }

/* 제품 스토리: 디바이스 고정 + 단계 스크롤 */
.story { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 72px); align-items: start; width: min(1280px, 100% - var(--gutter) * 2); margin-inline: auto; padding-block: 40px 80px; }
.story.story-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.story.story-left .story-copy { order: 2; }
.story-copy { position: relative; }
.story-head { position: sticky; top: calc(var(--nav-h) + 16px); z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 36px; margin-bottom: 24px; font-size: 12.5px; letter-spacing: .1em; color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.story-dots { display: flex; gap: 5px; }
.story-dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--line); transition: background-color 200ms ease; }
.story-dots i.on { background: var(--brand); }
.step { min-height: 78svh; display: grid; align-content: center; padding-block: 12vh; opacity: .3; transition: opacity 400ms var(--ease-out); }
.step.is-on { opacity: 1; }
.step .n { font-size: 13px; letter-spacing: .12em; color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; }
.step h3 { font-size: clamp(28px, 3.4vw, 46px); margin-top: 12px; }
.step p { color: var(--fg-2); margin-top: 16px; max-width: 42ch; font-size: 17px; }
.step ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--fg-2); }
.step ul li { display: flex; gap: 10px; }
.step ul li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); margin-top: 8px; }
.step .st { margin-top: 18px; }
.story-stage { position: sticky; top: calc(var(--nav-h) + 12px); height: calc(100svh - var(--nav-h) - 24px); display: grid; place-items: center; perspective: 1600px; }
.device { position: relative; transform-style: preserve-3d; will-change: transform; max-height: 100%; max-width: 100%; }
.dev-screen { position: relative; overflow: hidden; background: #0f1013; isolation: isolate; }
.screen { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); filter: blur(6px); transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out), filter 520ms var(--ease-out); z-index: 1; }
.screen.is-on { opacity: 1; transform: none; filter: blur(0); z-index: 2; }
.screen.is-prev { transform: scale(.985); filter: blur(4px); }
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; outline: 1px solid rgba(21, 23, 28, .06); outline-offset: -1px; }
.screen .mock { display: none; position: absolute; inset: 0; }
.screen.is-missing img { display: none; }
.screen.is-missing .mock { display: block; }
.mock-empty { display: grid !important; place-items: center; align-content: center; gap: 8px; background: var(--paper-2); color: var(--ink-3); font-size: 13px; }
.mock-empty b { font-size: 16px; color: var(--ink); font-weight: 600; }
.callout { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; transform: translate(-6px, -6px) scale(.9); opacity: 0; transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); pointer-events: none; }
.callout.is-on { opacity: 1; transform: translate(-6px, -6px) scale(1); }
.callout i { width: 14px; height: 14px; border-radius: 50%; background: var(--leaf-ink); box-shadow: 0 0 0 4px rgba(27, 154, 111, .25), 0 0 0 10px rgba(27, 154, 111, .12); flex: 0 0 14px; }
.callout span { padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.callout.flip { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -6px) scale(.9); transform-origin: 100% 50%; }
.callout.flip.is-on { transform: translate(calc(-100% + 7px), -6px) scale(1); }
/* 브라우저 창 */
.dev-browser { width: min(100%, 900px); border-radius: 14px; background: #1b1d22; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 120px rgba(22, 32, 56, .18); overflow: hidden; }
.dev-browser .bar { display: flex; align-items: center; gap: 10px; height: 40px; padding-inline: 14px; background: #24262c; border-bottom: 1px solid rgba(21, 23, 28, .06); }
.dev-browser .bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3d45; }
.dev-browser .bar i:nth-child(1) { background: #ff5f57; } .dev-browser .bar i:nth-child(2) { background: #febc2e; } .dev-browser .bar i:nth-child(3) { background: #28c840; }
.dev-browser .bar .url { flex: 1; height: 24px; margin-left: 10px; border-radius: 6px; background: rgba(21, 23, 28, .06); font-size: 11.5px; color: var(--fg-3); display: flex; align-items: center; padding-inline: 10px; gap: 6px; font-variant-numeric: tabular-nums; }
.dev-browser .bar .url svg { width: 11px; height: 11px; stroke: currentColor; }
.dev-browser .dev-screen { aspect-ratio: 16 / 10; }
/* 아이패드(세로) */
.dev-ipad { width: min(100%, 460px); aspect-ratio: 834 / 1194; padding: 4.2%; border-radius: 44px; background: #1a1b1f; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 2px #2b2d33, 0 60px 120px rgba(22, 32, 56, .18); }
.dev-ipad .dev-screen { height: 100%; border-radius: 22px; }
.dev-ipad .cam { position: absolute; top: 1.9%; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #0a0b0d; box-shadow: inset 0 0 0 1.5px #2f3238; }
/* 맥 창 */
.dev-mac { width: min(100%, 940px); border-radius: 12px; background: #202227; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 120px rgba(22, 32, 56, .18); overflow: hidden; }
.dev-mac .bar { display: grid; grid-template-columns: 70px 1fr 70px; align-items: center; height: 38px; padding-inline: 12px; background: #2a2c32; border-bottom: 1px solid rgba(0, 0, 0, .4); font-size: 12px; color: var(--fg-2); text-align: center; }
.dev-mac .bar .tl { display: flex; gap: 7px; }
.dev-mac .bar .tl i { width: 12px; height: 12px; border-radius: 50%; }
.dev-mac .bar .tl i:nth-child(1) { background: #ff5f57; } .dev-mac .bar .tl i:nth-child(2) { background: #febc2e; } .dev-mac .bar .tl i:nth-child(3) { background: #28c840; }
.dev-mac .dev-screen { aspect-ratio: 16 / 10; }
/* 폰 */
.dev-phone { width: auto; height: min(100%, 720px); max-width: 100%; aspect-ratio: 390 / 844; padding: 10px; border-radius: 48px; background: #16171b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 2px #2b2d33, 0 50px 110px rgba(22, 32, 56, .18); }
.dev-phone .dev-screen { height: 100%; border-radius: 38px; }
.dev-phone .island { position: absolute; top: 18px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 16px; background: #0a0b0d; z-index: 6; }
.phone-side { position: absolute; right: -2%; bottom: 4%; width: 26%; z-index: 3; transform-style: preserve-3d; }
.phone-side .dev-phone { width: 100%; height: auto; padding: 6px; border-radius: 30px; }
.phone-side .dev-phone .dev-screen { border-radius: 24px; }
.phone-side .dev-phone .island { width: 40%; height: 14px; top: 8px; margin-left: -20%; border-radius: 8px; }
/* 모바일: 디바이스를 위에 고정, 글은 아래로 */
@media (max-width: 900px) {
  .story, .story.story-left { grid-template-columns: 1fr; gap: 0; padding-top: 8px; }
  .story.story-left .story-copy { order: 2; }
  .story-stage { order: 1; position: sticky; top: var(--nav-h); height: 46svh; z-index: 3; background: linear-gradient(var(--bg) 80%, transparent); padding-bottom: 12px; perspective: none; }
  .story-copy { order: 2; }
  .story-head { position: static; margin-bottom: 8px; }
  .step { min-height: 0; padding-block: 36px; }
  .step h3 { font-size: 24px; }
  .step p { font-size: 15px; }
  .dev-browser, .dev-mac { width: 100%; }
  .dev-ipad { width: auto; height: 100%; }
  .dev-phone { height: 100%; }
  .phone-side { display: none; }
  .callout span { font-size: 11px; padding: 4px 8px; }
}

/* 특징 그리드 */
.features { padding-block: clamp(80px, 12vh, 140px); }
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.fcardx { position: relative; padding: 26px 24px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(22, 32, 56, .04); isolation: isolate; overflow: hidden; display: grid; gap: 14px; align-content: start; }
.fcardx::before { content: ""; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 81, 156, .08), transparent 55%); opacity: 0; transition: opacity 300ms ease; z-index: -1; }
@media (hover: hover) and (pointer: fine) { .fcardx:hover::before { opacity: 1; } }
.fcardx .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-weak); color: var(--brand); }
.fcardx .ic svg { width: 20px; height: 20px; stroke: currentColor; }
.fcardx h3 { font-size: 18px; }
.fcardx p { font-size: 14.5px; color: var(--fg-2); }
.fcardx .tag { justify-self: start; }
.fcardx.wide { grid-column: span 2; }
@media (max-width: 1000px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } .fcardx.wide { grid-column: auto; } }

/* 스펙 표 */
.spec { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.spec dl { margin: 0; display: grid; grid-template-columns: 9em 1fr; gap: 0 16px; }
.spec dt, .spec dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.spec dt { color: var(--fg-3); }
.spec dd { color: var(--fg); }
@media (max-width: 800px) { .spec { grid-template-columns: 1fr; } }

/* 다른 제품으로 */
.next-products { padding-block: clamp(64px, 10vh, 120px); border-top: 1px solid var(--line); }
.np-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.np { display: grid; gap: 6px; padding: 20px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(22, 32, 56, .04); transition: transform 300ms var(--ease-out), background-color 200ms ease; }
.np b { font-size: 17px; }
.np span { font-size: 13px; color: var(--fg-3); }
.np i { font-style: normal; font-size: 12px; color: var(--brand); margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .np:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px rgba(22, 32, 56, .08); } }
@media (max-width: 1000px) { .np-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .np-grid { grid-template-columns: 1fr; } }

/* 홈: 제품 5종 그리드 · 흐름 요약 */
.home-products { padding-block: clamp(96px, 14vh, 180px); }
.hp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 48px; }
.hp { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: 26px; min-height: 300px; border-radius: var(--r-xl); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; isolation: isolate; grid-column: span 2; transition: transform 350ms var(--ease-out); }
.hp:nth-child(4), .hp:nth-child(5) { grid-column: span 3; }
.hp::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(43, 81, 156, .08), transparent 55%); opacity: 0; transition: opacity 300ms ease; z-index: -1; }
@media (hover: hover) and (pointer: fine) { .hp:hover::before { opacity: 1; } .hp:hover { transform: translateY(-4px); } }
.hp .top { display: flex; justify-content: space-between; align-items: flex-start; }
.hp h3 { font-size: 26px; }
.hp h3 small { display: block; font-size: 13px; font-weight: 500; color: var(--fg-3); margin-top: 4px; letter-spacing: 0; }
.hp p { color: var(--fg-2); font-size: 14.5px; margin-top: 10px; }
.hp .go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--brand); }
.hp .go svg { width: 16px; height: 16px; stroke: currentColor; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hp:hover .go svg { transform: translateX(4px); } }
.hp-arbor { background: linear-gradient(160deg, #E4ECFB, var(--bg-2) 60%); }
@media (max-width: 1000px) { .hp-grid { grid-template-columns: 1fr 1fr; } .hp, .hp:nth-child(4), .hp:nth-child(5) { grid-column: auto; min-height: 0; } }
@media (max-width: 560px) { .hp-grid { grid-template-columns: 1fr; } }
.flow-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 48px; }
.fc { padding: 20px 18px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.fc .n { font-size: 12px; color: var(--brand); font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.fc b { font-size: 16px; }
.fc span { font-size: 13px; color: var(--fg-3); }
@media (max-width: 1000px) { .flow-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .flow-cards { grid-template-columns: repeat(2, 1fr); } }
.section-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* 소개 페이지 */
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.ab { padding: 26px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.ab h3 { font-size: 18px; }
.ab p { font-size: 14.5px; color: var(--fg-2); }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
.stack { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stack div { padding: 18px; border-radius: 14px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.stack b { display: block; font-size: 13px; color: var(--fg-3); font-weight: 500; }
.stack span { display: block; margin-top: 6px; font-size: 15px; }
@media (max-width: 900px) { .stack { grid-template-columns: repeat(2, 1fr); } }

/* 모형 UI(스크린샷이 없을 때) — 제품 공통 */
.mk { position: absolute; inset: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 12px; line-height: 1.4; overflow: hidden; }
.mk * { box-sizing: border-box; }
.mk .top { display: flex; align-items: center; gap: 10px; height: 44px; padding-inline: 16px; border-bottom: 1px solid var(--ink-line); font-weight: 600; }
.mk .top .lg { width: 20px; height: 20px; border-radius: 6px; background: var(--brand-ink); }
.mk .top .tabs { display: flex; gap: 14px; margin-left: 10px; font-weight: 500; color: var(--ink-3); }
.mk .top .tabs b { color: var(--ink); font-weight: 600; }
.mk .top .me { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-3); }
.mk .body { padding: 18px 20px; display: grid; gap: 14px; }
.mk h4 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.mk .row { display: grid; gap: 12px; }
.mk .c2 { grid-template-columns: 1fr 1fr; } .mk .c3 { grid-template-columns: 1fr 1fr 1fr; } .mk .c21 { grid-template-columns: 2fr 1fr; } .mk .c12 { grid-template-columns: 1fr 2fr; }
.mk .card { padding: 12px 14px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); display: grid; gap: 6px; align-content: start; }
.mk .card.fill { background: var(--paper-2); box-shadow: none; }
.mk .card b { font-size: 12.5px; }
.mk .card small { color: var(--ink-3); font-size: 11px; }
.mk .chips { display: flex; gap: 4px; flex-wrap: wrap; }
.mk .chips i { font-style: normal; padding: 2px 7px; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); font-size: 10.5px; }
.mk .chips i.k { background: #D8E5FD; color: var(--brand-ink); }
.mk .chips i.g { background: #DDF1EA; color: var(--leaf-ink); }
.mk .chips i.y { background: #FBF0C4; color: #7A5A00; }
.mk .chips i.r { background: #FBE4E3; color: var(--critical); }
.mk .btn-m { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding-inline: 12px; border-radius: 8px; background: var(--brand-ink); color: #fff; font-weight: 600; font-size: 12px; }
.mk .btn-m.w { background: var(--paper-3); color: var(--ink); }
.mk .drop { border: 1.5px dashed var(--brand-ink); border-radius: 12px; background: #F3F7FF; display: grid; place-items: center; gap: 4px; padding: 28px; color: var(--brand-ink); font-weight: 600; text-align: center; }
.mk .drop small { color: var(--ink-3); font-weight: 400; }
.mk .paper-q { font-family: var(--serif); font-size: 11.5px; display: grid; grid-template-columns: 1.6em 1fr; gap: 4px; }
.mk .paper-q b { font-family: var(--sans); }
.mk .bar { height: 8px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.mk .bar i { display: block; height: 100%; background: var(--brand-ink); }
.mk .bar.g i { background: var(--leaf-ink); } .mk .bar.r i { background: var(--critical); }
.mk .kv { display: grid; grid-template-columns: 6em 1fr 2.4em; gap: 8px; align-items: center; font-size: 11.5px; }
.mk .kv .v { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mk .big { font-size: 28px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mk .omr { display: flex; gap: 6px; }
.mk .omr i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); display: grid; place-items: center; font-size: 9px; font-style: normal; color: var(--ink-3); }
.mk .omr i.on { background: var(--brand-ink); color: #fff; box-shadow: none; }
.mk .side { display: grid; gap: 4px; padding: 12px; background: var(--paper-2); height: 100%; font-size: 12px; }
.mk .side span { padding: 7px 10px; border-radius: 7px; color: var(--ink-2); }
.mk .side span.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.mk .ink { position: relative; }
.mk .ink svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk .ink svg path { fill: none; stroke: var(--brand-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mk .sheet { background: var(--paper); border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); padding: 14px; font-family: var(--serif); font-size: 11.5px; line-height: 1.5; min-height: 140px; }
.mk .pen { font-family: var(--pen); font-size: 18px; color: var(--brand-ink); }
.mk .dark { background: #1a1b1f; color: var(--fg); }
.mk .dark .card { background: #24262c; box-shadow: none; color: var(--fg); }
.mk .dark .card small { color: var(--fg-3); }
.mk .wave { display: flex; align-items: center; gap: 2px; height: 48px; }
.mk .wave i { flex: 1; background: var(--brand-ink); border-radius: 2px; }
.mk .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--ink-2); white-space: pre-wrap; }
.mk .table { display: grid; font-size: 11.5px; }
.mk .table > div { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--ink-line); }
.mk .table > div:first-child { color: var(--ink-3); font-size: 10.5px; }
.mk .ok { color: var(--leaf-ink); font-weight: 600; } .mk .ng { color: var(--critical); font-weight: 600; }
/* 아이패드 모형 전용 */
.mk-ipad .top { height: 40px; }
.mk-ipad .tb { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--ink-line); background: var(--paper-2); }
.mk-ipad .tb i { width: 22px; height: 22px; border-radius: 6px; background: var(--paper-3); }
.mk-ipad .tb i.on { background: var(--brand-ink); }
.mk-ipad .tb .sw { display: flex; gap: 4px; margin-left: auto; }
.mk-ipad .tb .sw i { border-radius: 50%; width: 14px; height: 14px; }
.mk-ipad .page { position: relative; margin: 14px; height: calc(100% - 120px); background: var(--paper); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); background-image: linear-gradient(var(--ink-line) 1px, transparent 1px); background-size: 100% 28px; }

.cta.cta-min { padding-block: 40px 48px; }

/* 라이트 모드: 디바이스 그림자·대비 */
.dev-browser, .dev-mac { box-shadow: 0 0 0 1px rgba(21, 23, 28, .14), 0 40px 90px rgba(22, 32, 56, .22); }
.dev-phone, .dev-ipad { box-shadow: 0 0 0 1px rgba(21, 23, 28, .2), inset 0 0 0 2px #2b2d33, 0 40px 90px rgba(22, 32, 56, .24); }
.dev-browser .bar .url { background: rgba(255, 255, 255, .08); color: #8A8E96; }
.dev-mac .bar { color: #A3A7AF; }
.cur { mix-blend-mode: difference; }
.nav-present svg { width: 14px; height: 14px; margin-left: -2px; }