/* ================================================
   치트키 Case Study — Design System
   ================================================ */

/* ── 01. DESIGN TOKENS ─────────────────────────
   Colors, Typography, Spacing, Radius
   ─────────────────────────────────────────────── */
:root {
  --bg: #0A0A0A;
  --surface-1: #111111;
  --surface-2: #161616;
  --surface-3: #1D1D1D;
  --border-lo: #1A1A1A;
  --border: #262626;
  --border-hi: #383838;
  --text-hi: #B6FF3D;
  --text-bright: #F5F7FA;
  --text: #E5E5E5;
  --text-mid: #7A7A7A;
  --text-lo: #4A4A4A;
  --neon-green: #B6FF3D;
  --neon-green-hover: #C8FF5F;
  --neon-green-dim: #6B8F24;
  --neon-purple: #B026FF;
  --neon-purple-dim: #6D1AA0;
  --chart-blue:   #4A9EFF;
  --chart-orange: #FFB347;

  --f-body: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-display: 'Paperlogy', 'Pretendard Variable', -apple-system, sans-serif;

  --page-max: 1440px;
  --content-max: 1248px;
  --page-pad-x: 96px;
  --section-y: 100px;

  /* ── 8px spacing scale (미니멈 2·4·6 허용) ── */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  12px;
  --sp-6:  16px;
  --sp-20: 20px;
  --sp-7:  24px;
  --sp-8:  32px;
  --sp-9:  40px;
  --sp-10: 48px;
  --sp-11: 56px;
  --sp-12: 64px;
  --sp-13: 80px;
  --sp-14: 96px;
  --sp-15: 120px;
  --sp-16: 160px;

  --easing: cubic-bezier(.2,.7,.2,1);

  /* ── Radius ── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-2xl: 32px;
  --r-3xl: 40px;
  --r-full: 9999px;
  --r-card: 12px;

  /* ── Z-index ── */
  --z-base:         0;
  --z-raised:       10;
  --z-overlay:      50;
  --z-nav:          100;
  --z-bar:          200;
  --z-loader:       9000;
  --z-grain:        9996;
  --z-cursor-label: 9997;
  --z-cursor-ring:  9998;
  --z-cursor:       9999;

  /* ── Duration ── */
  --dur-fast:   0.2s;
  --dur-base:   0.4s;
  --dur-reveal: 0.85s;
  --dur-slow:   1.1s;

  /* ── Easing variants ── */
  --ease-spring: cubic-bezier(.16,1,.3,1);
  --ease-expo:   cubic-bezier(0.87,0,0.13,1);

  /* ── Shadow · Glow ── */
  --glow-green:  0 0 24px rgba(182,255,61,0.18);
  --glow-purple: 0 0 24px rgba(176,38,255,0.18);
  --shadow-sm:   0 2px 8px  rgba(0,0,0,0.35);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.45);

  /* ── Status ── */
  --danger: #FF4D4D;
}


/* ── 02. RESET & BASE ──────────────────────────
   box-sizing, body, a, img defaults
   ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  overflow-x: hidden;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

::selection { background: rgba(182,255,61,0.2); color: var(--neon-green); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-green-dim); }


/* ── 03. TYPOGRAPHY ────────────────────────────
   Font faces, headings, body text
   ─────────────────────────────────────────────── */
@font-face { font-family: 'Paperlogy'; src: url('../fonts/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('../fonts/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('../fonts/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('../fonts/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('../fonts/Paperlogy-8ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Paperlogy'; src: url('../fonts/Paperlogy-9Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* LABEL SYSTEM (no monospace — Pretendard with tracking) */
.label {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-mid);
}
.label-sm {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--text-mid);
}
.label-num {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--text-mid);
  font-variant-numeric: tabular-nums;
}


/* ── 04. LAYOUT ────────────────────────────────
   .section, .section-inner, page grid
   ─────────────────────────────────────────────── */
.section { padding: var(--section-y) 0; position: relative; }
.section--alt { background: var(--surface-1); }
.section-inner { padding: 0 var(--page-pad-x); }

.section-marker {
  display: flex;
  gap: var(--sp-20);
  align-items: baseline;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.section-marker .num {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
.section-marker .name {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-hi);
}
.section-marker .kind {
  margin-left: auto;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-mid);
}

.section-header-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  margin-bottom: 56px;
}
.section-header-block h2 {
  font-size: clamp(28px, 5vw, 72px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text-bright);
  font-family: var(--f-display);
  text-wrap: balance;
}
.section-header-block h2 .accent {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--neon-green);
  letter-spacing: 0;
  margin-bottom: 24px;
}
.section-header-block .intro {
  font-size: 17px;
  line-height: 1.85;
  color: var(--text);
  padding-top: 0;
  letter-spacing: 0;
  max-width: 54ch;
  text-wrap: pretty;
}

#overview { padding: var(--section-y) var(--page-pad-x); }
#user-flow { padding: 0; }


/* ── 05. NAVIGATION ────────────────────────────
   Appbar (Figma DS)
   ─────────────────────────────────────────────── */
.appbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad-x);
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-lo);
}

.appbar__logo {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--text-bright);
  text-decoration: none;
}

.appbar__btn-wrap {
  display: flex;
  align-items: center;
}

.appbar__ic-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-bright);
}


/* ── 06. COVER ─────────────────────────────────
   .cover, .cvr-inner, .cvr-headline, .cvr-btn
   ─────────────────────────────────────────────── */
.cover {
  background: var(--bg);
  padding: var(--section-y) var(--page-pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cvr-inner {
  border-radius: var(--r-3xl);
  overflow: hidden;
  position: relative;
  padding: var(--section-y) var(--page-pad-x);
  width: 100%;
  flex-shrink: 0;
}
.cvr-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cvr-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.cvr-logo-wrap {
  position: relative; z-index: 2;
  height: 16px;
  flex-shrink: 0;
}
.cvr-logo {
  position: absolute;
  inset: -16.67% 0;
  height: 133.33%;
  width: auto;
  display: block;
  filter: brightness(0) invert(0.75);
}
.cvr-wrap {
  display: flex;
  flex-direction: column;
  gap: 56px;
  height: 360px;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 2;
  width: 100%;
}
.cvr-headline {
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.4;
  background: linear-gradient(160deg, var(--text-bright) 50%, rgba(182,255,61,.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cvr-subdesc {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 420px;
}
.cvr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  height: 56px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--r-full);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.5;
  flex-shrink: 0;
  cursor: pointer;
  white-space: nowrap;
}

/* Cover reveal transitions */
.cover-top, .cover-eyebrow, .cover-sub, .cover-bottom, .scroll-indicator {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.cover-title {
  opacity: 0;
  transition: opacity 0.01s;  /* tiny delay so SplitType can run first */
}
.covers-revealed .cover-top      { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
.covers-revealed .cover-eyebrow  { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
.covers-revealed .cover-title    { opacity: 1; transition-delay: 0.18s; }
.covers-revealed .cover-sub      { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }
.covers-revealed .cover-bottom   { opacity: 1; transform: translateY(0); transition-delay: 0.50s; }
.covers-revealed .scroll-indicator { opacity: 1; transform: translateY(0); transition-delay: 0.78s; }


/* ── 07. SECTION HEADER ────────────────────────
   .section-marker, .section-header-block
   (merged into section 04)
   ─────────────────────────────────────────────── */


/* ── 08. OVERVIEW ──────────────────────────────
   .ov-*, marquee
   ─────────────────────────────────────────────── */
.ov-wrap {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.ov-marker-row {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.ov-marker-row span {
  font-size: 12px;
  font-weight: 500;
  color: var(--neon-green);
  letter-spacing: 0.08em;
}
.ov-content-col {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.ov-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: -80px;
  position: relative;
  z-index: 3;
}
.ov-heading {
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.25;
}
.ov-heading .ov-accent { color: var(--neon-green); }
.ov-desc {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.6;
}
.ov-img-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: relative;
  width: 100%;
  flex-shrink: 0;
}
.ov-marquee {
  position: absolute;
  top: calc(50% - 80px);
  left: 0;
  right: 0;
  transform: translateY(-50%);
  overflow: hidden;
  height: 160px;
  z-index: 1;
}
.ov-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-ltr 28s linear infinite;
}
.ov-prod {
  width: 160px;
  height: 160px;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 20px;
}
.ov-prod--sq { border-radius: var(--r-xs); }
.ov-prod img { width: 100%; height: 100%; object-fit: cover; }
.ov-phone-wrap {
  height: 600px;
  width: 800px;
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.ov-phone {
  position: absolute;
  left: -1.81%;
  top: -3.43%;
  width: 106.94%;
  height: 106.94%;
  object-fit: cover;
  pointer-events: none;
}
.ov-phone-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 74%, black 100%);
}
.overview-grid, .overview-lead, .overview-body { display: none; }

.preview-frame {
  background: var(--surface-1);
  border: 1px solid var(--border);
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.preview-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(182,255,61,0.06), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(176,38,255,0.05), transparent 50%);
}
.preview-label {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-lo);
  letter-spacing: 0;
  position: absolute;
  top: 20px;
  left: 24px;
}
.preview-content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 24px;
  padding: 40px;
}

/* OVERVIEW REVISED */
.ov-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 32px;
}
.overview-lead {
  font-size: 30px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ov-em { color: var(--neon-green); font-style: normal; }
.ov-preview {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ov-float { position: absolute; pointer-events: none; }
.ov-shoe { left: -10px; top: 50%; transform: translateY(-55%) rotate(-12deg); opacity: 0.65; }
.ov-dumbbell { left: 14px; bottom: 20px; transform: rotate(10deg); opacity: 0.55; }
.ov-plate { left: 108px; top: 8%; opacity: 0.45; }
.ov-phones { display: flex; gap: var(--sp-20); position: relative; z-index: 2; }
.ov-phones .phone-frame { width: 170px; }

/* TRI CARDS (Product Strategy · Design Strategy) */
.tri-title {
  font-weight: 500;
  font-size: 12px;
  color: var(--neon-green);
  letter-spacing: 0;
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
}
.tri-title .right { color: var(--text-mid); }
.tri-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}
.tri-card {
  padding: 40px 32px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--easing), background 0.3s var(--easing);
}
.tri-card:hover {
  border-color: var(--border-hi);
  background: var(--surface-2);
}
.tri-card .num {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-mid);
  letter-spacing: 0;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.tri-card .name {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: 0;
  margin-bottom: 8px;
  line-height: 1.4;
}
.tri-card .subtitle {
  font-size: 15px;
  color: var(--text-mid);
  font-weight: 500;
  margin-bottom: 32px;
  line-height: 1.4;
  letter-spacing: 0;
}
.tri-card .desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  margin-top: auto;
  letter-spacing: 0;
}
.principle-cards .tri-card { background: transparent; }
.principle-cards .tri-card .name { color: var(--text); }
.tri-card .tri-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
}
.tri-card .tri-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--neon-green);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ── 09. MARKET ────────────────────────────────
   .comp-table, charts
   ─────────────────────────────────────────────── */
.mkt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.mkt-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px;
}
.mkt-card.wide { grid-column: span 2; }
.mkt-card.full { grid-column: span 3; }
.mkt-hd { margin-bottom: 24px; }
.mkt-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}
.mkt-unit {
  font-size: 11px;
  color: var(--text-lo);
  margin-top: 4px;
}

/* Vertical bar chart */
.bcv-wrap {
  height: 180px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.bcv-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}
.bcv-bar {
  width: 100%;
  height: var(--h);
  background: transparent;
  border-radius: 6px 6px 0 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.bcv-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--border-hi);
  border-radius: 6px 6px 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.bcv-bar.green::before { background: var(--neon-green); }
.bcv-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-mid);
  position: absolute;
  top: -20px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease 1s;
  z-index: 1;
}
.bcv-bar.green .bcv-val { color: var(--neon-green); }
.bcv-year {
  font-size: 11px;
  color: var(--text-lo);
}
.bcv-bar.animated::before { transform: scaleY(1); }
.bcv-bar.animated .bcv-val { opacity: 1; }

/* Donut chart (conic-gradient) */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-20);
}
.donut-ring {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--neon-green)    0%  42%,
    var(--chart-blue)   42%  67%,
    var(--neon-purple)  67%  85%,
    var(--chart-orange) 85%  96%,
    var(--border-hi)    96% 100%
  );
  position: relative;
}
.donut-ring::after {
  content: '';
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: var(--surface-1);
}
.dl-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.dl-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-mid);
}
.dl-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dl-pct {
  font-weight: 700;
  color: var(--text);
  margin-left: auto;
}

/* Horizontal bar chart */
.hbar-chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hbar-row {
  display: grid;
  grid-template-columns: 96px 1fr 56px;
  align-items: center;
  gap: 16px;
}
.hbar-label {
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0;
}
.hbar-track {
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  border-radius: var(--r-xs);
  width: var(--w);
  background: var(--border-hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.hbar-fill.green { background: var(--neon-green); }
.hbar-fill.animated { transform: scaleX(1); }
.hbar-val {
  font-size: 12px;
  color: var(--text-mid);
  text-align: right;
}

.mkt-footnote {
  font-size: 11px;
  color: var(--text-lo);
  margin-top: 8px;
  letter-spacing: 0;
}

/* NEW PORTFOLIO SECTIONS */
.comp-table-wrap { overflow-x: auto; margin-top: 0; }
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table th {
  font-size: 11px; font-weight: 600; color: var(--text-lo);
  text-transform: uppercase; letter-spacing: 0;
  padding: 16px 24px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.comp-table td {
  font-size: 15px; color: var(--text);
  padding: var(--sp-20) 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-align: center;
}
.comp-table td:first-child { text-align: left; font-weight: 500; color: var(--text-hi); }
.ct-yes { color: var(--neon-green); font-weight: 700; }
.ct-no { color: var(--text-lo); }
.ct-part { color: var(--text-mid); }
.ct-highlight td { background: rgba(182,255,61,0.05); }
.ct-highlight td:first-child { color: var(--neon-green); font-weight: 700; }
.comp-table th:not(:first-child) { text-align: center; }

.prob-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-bottom: 48px;
}
.prob-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 48px 36px;
}
.ps-num {
  font-family: var(--f-display); font-size: 80px; font-weight: 900;
  color: var(--neon-green); line-height: 1; margin-bottom: 20px;
}
.ps-num span { font-size: 36px; }
.ps-text { font-size: 15px; line-height: 1.7; color: var(--text); }

.pain-quotes { display: flex; flex-direction: column; gap: 16px; }
.pain-quote {
  padding: 24px 28px 24px 48px;
  font-size: 16px; color: var(--text); line-height: 1.7;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.flow-steps {
  display: flex; align-items: flex-start; gap: 0;
}
.flow-step { flex: 1; }
.flow-step-inner {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 32px 20px; text-align: center; height: 100%;
  transition: border-color var(--dur-fast) var(--easing), background var(--dur-fast) var(--easing);
}
.flow-step-inner:hover {
  border-color: rgba(182,255,61,0.25);
  background: var(--surface-2);
}
.flow-step-num {
  display: block; font-size: 10px; font-weight: 700;
  color: var(--neon-green); letter-spacing: 0;
  margin-bottom: 16px;
}
.flow-step-label {
  font-family: var(--f-display); font-size: 22px; font-weight: 800;
  color: var(--text-bright); margin-bottom: 12px; line-height: 1.1;
}
.flow-step-desc { font-size: 13px; color: var(--text-mid); line-height: 1.6; }
.flow-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--text-lo); padding: 0 8px;
  flex-shrink: 0; margin-top: 56px;
}

.outcome-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-bottom: 40px;
}
.oc-delta.negative { color: var(--danger); }
.oc-delta.neutral { color: var(--text-hi); }
.oc-metric { font-size: 14px; font-weight: 700; color: var(--text-hi); margin-bottom: 10px; }
.oc-desc { font-size: 13px; color: var(--text-mid); line-height: 1.6; }

/* Outcome card: accent border top on hover */
.outcome-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.outcome-card:hover {
  border-color: rgba(182,255,61,0.3);
  box-shadow: 0 0 0 1px rgba(182,255,61,0.12);
}

/* OUTCOME CIRCLES */
.oc-pill-list { display: flex; flex-direction: column; gap: 24px; margin-top: 0; }
.oc-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 40px;
  height: 100px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r-full);
  overflow: hidden;
}
.oc-pill-label { font-size: 16px; color: var(--text-lo); flex: 1; }
.oc-pill-value { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.oc-pill-num {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 900;
  color: var(--text-hi);
  letter-spacing: -0.02em;
  line-height: 1;
}
.oc-pill-unit { font-family: var(--f-display); font-size: 40px; font-weight: 900; color: var(--text-lo); }

/* PLATFORM LOGOS */
.plat-cell { display: flex; align-items: center; gap: 10px; }
.plat-logos { display: flex; gap: 4px; flex-shrink: 0; }
.plat-logo {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.plat-logo.coup { background: #FF4800; font-size: 16px; }
.plat-logo.naver { background: #03C75A; font-size: 17px; }
.plat-logo.gym  { background: #2563EB; font-size: 16px; }
.plat-logo.hj   { background: #DC2626; font-size: 11px; letter-spacing: -0.04em; }
.plat-logo.nike { background: #fff; color: #000; font-style: italic; font-size: 13px; }
.plat-logo.adi  { background: #000; border: 1px solid #444; font-size: 13px; }
.plat-logo.ours { background: var(--neon-green); color: #000; font-size: 10px; letter-spacing: -0.03em; }

/* Pain quote subtle left treatment */
.pain-quote {
  position: relative;
}
.pain-quote::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 18px;
  width: 22px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18' fill='none'%3E%3Cpath d='M0 18V10.8C0 4.68 3.12 1.08 9.36 0L10.44 2.04C7.32 2.76 5.52 4.68 5.04 7.2H9.6V18H0ZM12.4 18V10.8C12.4 4.68 15.52 1.08 21.76 0L22.84 2.04C19.72 2.76 17.92 4.68 17.44 7.2H22V18H12.4Z' fill='%23B6FF3D' fill-opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
}


/* ── 10. PERSONA ───────────────────────────────
   .persona-*, user research cards
   ─────────────────────────────────────────────── */
.persona-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.persona-card { background: var(--surface-2); border: 1px solid var(--border-lo); border-radius: var(--r-lg); padding: 36px; transition: border-color var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing); }
.persona-card:hover { border-color: rgba(182,255,61,0.2); }
.persona-badge { display: inline-flex; align-items: center; background: rgba(182,255,61,0.08); border: 1px solid rgba(182,255,61,0.18); color: var(--neon-green); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; padding: 4px 12px; border-radius: var(--r-full); margin-bottom: 24px; }
.persona-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.persona-avatar-wrap { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--r-md); background: rgba(182,255,61,0.06); border: 1px solid rgba(182,255,61,0.15); display: flex; align-items: center; justify-content: center; }
.persona-name { font-family: var(--f-display); font-size: 20px; font-weight: 800; color: var(--text-bright); line-height: 1.2; }
.persona-meta { font-size: 12px; color: var(--text-lo); margin-top: 4px; }
.persona-quote { font-size: 13px; color: var(--text-mid); line-height: 1.8; background: rgba(182,255,61,0.05); padding: 10px 16px; border-radius: 6px; margin-bottom: 28px; }
.persona-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); }
.persona-attr-label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--text-lo); margin-bottom: 10px; }
.persona-attr-item { font-size: 12px; color: var(--text-mid); line-height: 1.7; padding-left: 14px; position: relative; margin-bottom: 2px; }
.persona-attr-item::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--neon-green); opacity: 0.5; }


/* ── 11. INFORMATION ARCHITECTURE ─────────────
   .ia-*, tree layout
   ─────────────────────────────────────────────── */
.ia-body { display: flex; gap: 80px; align-items: flex-start; margin-top: 48px; }
.ia-left { display: flex; flex-direction: column; gap: 48px; flex-shrink: 0; white-space: nowrap; }
.ia-heading { font-family: var(--f-display); font-size: 64px; font-weight: 900; color: var(--text); line-height: 1.2; }
.ia-heading .ia-accent { color: var(--neon-green); }
.ia-desc { font-size: 15px; color: var(--text-mid); line-height: 1.6; }
.ia-tree { display: flex; gap: 24px; align-items: flex-start; flex: 1 0 0; overflow: hidden; }
.ia-col { display: flex; flex-direction: column; align-items: center; flex: 1 0 0; }
.ia-col--offset { padding-top: 160px; }
.ia-auth-v { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ia-node--sm { padding: 10px 16px; border: 1px solid var(--border-lo); border-radius: var(--r-sm); background: var(--surface-1); font-size: 12px; color: var(--text-mid); text-align: center; width: 100%; box-sizing: border-box; }
.ia-connector-v { width: 1px; height: 20px; background: var(--border-hi); flex-shrink: 0; }
.ia-tab-node { padding: 12px 16px; background: var(--neon-green); color: var(--bg); border-radius: var(--r-sm); font-size: 14px; font-weight: 600; text-align: center; width: 100%; box-sizing: border-box; flex-shrink: 0; }
.ia-sub-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ia-sub-node { padding: 10px 16px; border: 1px solid var(--border-lo); border-radius: var(--r-sm); background: var(--surface-1); font-size: 12px; color: var(--text-mid); text-align: center; }


/* ── 12. USER FLOW ─────────────────────────────
   .uf-*, flow steps
   ─────────────────────────────────────────────── */
.uf-sticky {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0;
}

.uf-split {
  display: flex;
  gap: 80px;
  align-items: center;
  margin-top: 28px;
}

.uf-left {
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.uf-step-badge {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--neon-green);
  color: var(--neon-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 5px 16px;
  border-radius: var(--r-full);
  margin-bottom: 12px;
}

.uf-hero-name {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-hi);
  line-height: 1.2;
  margin-bottom: 10px;
}

.uf-hero-desc {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.8;
  min-height: 3.6em; /* 2줄 공간 확보, 텍스트 교체 시 레이아웃 흔들림 방지 */
}

.uf-dots { display: flex; gap: 8px; margin-top: 4px; }
.uf-progress-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-lo);
  letter-spacing: 0.05em;
  margin-left: 6px;
  align-self: center;
}
.uf-progress-count span { color: var(--text-mid); }
.uf-dot {
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: var(--border-hi);
  transform-origin: left center;
  transition: background .3s, transform .3s;
}
.uf-dot.active { transform: scaleX(3.33); background: var(--neon-green); }

.uf-right { flex: 1; overflow: hidden; min-width: 0; }

.uf-track {
  display: flex;
  gap: 32px;
  will-change: transform;
}

.uf-step-card {
  flex: 0 0 min(240px, calc((100vh - 310px) * 375 / 812));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.uf-step-card .phone-frame.filled {
  width: min(240px, calc((100vh - 310px) * 375 / 812));
  opacity: 0.3;
  border-radius: var(--r-lg);
  transition: opacity .5s var(--easing), transform .5s var(--easing), box-shadow .5s var(--easing);
}

.uf-step-card.is-active .phone-frame.filled {
  opacity: 1;
  animation: phoneFloat 3.2s ease-in-out infinite;
  box-shadow: 0 0 0 2px var(--neon-green), 0 20px 48px rgba(0,0,0,.45);
}

.uf-card-label {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  opacity: 0.45;
  transition: opacity var(--dur-base) var(--easing);
}
.uf-step-card.is-active .uf-card-label { opacity: 1; }

.uf-card-step { font-size: 10px; font-weight: 700; color: var(--text-lo); letter-spacing: 0.1em; }
.uf-card-name { font-size: 13px; font-weight: 700; color: var(--text); }
.uf-card-desc { font-size: 11px; color: var(--text-mid); }

.uf-step-card.is-active .uf-card-name { color: var(--neon-green); }
.uf-step-card.is-active .uf-card-step { color: var(--neon-green-dim); letter-spacing: 0.1em; }

.uf-data-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 10px;
}
.uf-data-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-lo);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 2px 7px;
  letter-spacing: 0.06em;
}
.uf-step-card.is-active .uf-data-tag {
  color: var(--neon-green-dim);
  border-color: var(--neon-green-dim);
}


/* ── 13. DESIGN SYSTEM SECTION ─────────────────
   .ds-*, design tokens showcase
   ─────────────────────────────────────────────── */
.color-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.color-card {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}
.color-swatch {
  position: absolute;
  inset: 0;
}
.color-card[data-color="black"] .color-swatch { background: #0A0A0A; }
.color-card[data-color="green"] .color-swatch { background: #B6FF3D; }
.color-card[data-color="purple"] .color-swatch { background: #B026FF; }
.color-info {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  z-index: 2;
}
.color-card[data-color="green"] .color-info,
.color-card[data-color="purple"] .color-info { color: #0A0A0A; }
.color-card[data-color="black"] .color-info { color: var(--text-hi); }
.color-role {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  z-index: 2;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  opacity: 0.75;
}
.color-card[data-color="black"] .color-role { color: var(--text-mid); }
.color-card[data-color="green"] .color-role,
.color-card[data-color="purple"] .color-role { color: rgba(0,0,0,0.7); }
.color-name {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
  opacity: 0.7;
}
.color-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 8px;
}
.color-hex {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.bx-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 64px;
}
.bx-history {
  overflow: hidden;
  border-radius: 3.125vw;
}
.bx-history img {
  width: 100%;
  display: block;
}

.bx-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.bx-pair img {
  width: 100%;
  display: block;
  border-radius: 3.125vw;
}

.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.type-card {
  padding: 56px 48px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.type-card .role {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0;
  margin-bottom: 24px;
}
.type-card .family {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-hi);
  margin-bottom: 8px;
}
.type-card .weight-note {
  font-size: 14px;
  color: var(--text-mid);
  font-weight: 500;
  margin-bottom: 48px;
  letter-spacing: 0;
}
.type-card .specimen-display {
  font-size: 92px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-hi);
  margin-bottom: 32px;
}
.type-card:first-child .specimen-display {
  font-family: var(--f-display);
}
.type-card .specimen-label {
  display: inline-block;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 14px var(--sp-20);
  border: 1px solid var(--border-hi);
  background: var(--bg);
  color: var(--neon-green);
  margin-bottom: 32px;
}
.type-card .use {
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
  letter-spacing: 0;
}

/* COMPONENT SYSTEM */
.comp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 48px;
}
.comp-cell {
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 24px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--easing);
}
.comp-cell:hover { border-color: var(--border-hi); }

/* Bento: 오버레이 — 2cols × 2rows */
.comp-cell:nth-child(3) {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--surface-2);
  min-height: 360px;
}
.comp-cell:nth-child(3) .comp-body {
  align-items: flex-end;
  padding-bottom: 0;
}

/* Bento: 체크 + 라디오 — subtle tint */
.comp-cell:nth-child(4),
.comp-cell:nth-child(5) {
  background: rgba(182,255,61,0.03);
}

/* Bento: 네비게이션 바 — 2cols wide */
.comp-cell:nth-child(6) {
  grid-column: span 2;
  background: var(--surface-2);
}
.comp-cell:nth-child(6) .comp-body {
  align-items: flex-end;
  padding-bottom: 0;
}

/* Bento: 칩 — accent tint */
.comp-cell:nth-child(8) {
  background: rgba(182,255,61,0.03);
}
.comp-label {
  font-weight: 500;
  font-size: 10px;
  color: var(--text-lo);
  letter-spacing: 0;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  order: 2;
}
.comp-label .idx {
  color: var(--text-lo);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.comp-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 0;
  order: 1;
}

/* Component demos */
.demo-btn-primary {
  background: var(--neon-green);
  color: var(--bg);
  padding: 12px 28px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  border-radius: var(--r-sm);
}
.demo-btn-ghost {
  background: transparent;
  border: 1px solid var(--text-hi);
  color: var(--text-hi);
  padding: 11px 27px;
  font-weight: 500;
  font-size: 13px;
  border-radius: var(--r-sm);
}
.demo-input-wrap { width: 100%; }
.demo-input-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mid);
  letter-spacing: 0;
  margin-bottom: 6px;
}
.demo-input-line { border-bottom: 1px solid var(--neon-green); padding-bottom: 8px; color: var(--text-hi); font-size: 14px; }
.demo-checkbox { display: flex; align-items: center; gap: 12px; color: var(--text-hi); font-size: 13px; }
.demo-checkbox-box {
  width: 20px; height: 20px;
  border: 1px solid var(--border-hi);
  border-radius: 5px;
  position: relative;
}
.demo-checkbox-box.checked { background: var(--neon-green); border-color: var(--neon-green); }
.demo-checkbox-box.checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 10px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.demo-radio { display: flex; align-items: center; gap: 12px; color: var(--text-hi); font-size: 13px; }
.demo-radio-dot {
  width: 20px; height: 20px;
  border: 1px solid var(--border-hi);
  border-radius: 50%;
  position: relative;
}
.demo-radio-dot.checked { border-color: var(--neon-green); }
.demo-radio-dot.checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--neon-green);
  border-radius: 50%;
}
.demo-nav-bar {
  display: flex;
  width: 100%;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: 10px 0 6px;
}
.demo-nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.demo-nav-icon {
  width: 20px; height: 20px;
  border: 1.5px solid var(--border-hi);
  border-radius: 6px;
}
.demo-nav-tab.active .demo-nav-icon {
  border-color: var(--neon-green);
  background: rgba(182,255,61,0.12);
}
.demo-nav-tab span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-lo);
}
.demo-nav-tab.active span { color: var(--neon-green); }
.demo-overlay {
  width: 100%; height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.demo-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  border-radius: var(--r-sm);
}
.demo-sheet {
  position: relative;
  z-index: 1;
  background: var(--surface-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border-top: 1px solid var(--border-hi);
  padding: 12px 16px 14px;
}
.demo-sheet-handle {
  width: 28px; height: 3px;
  background: var(--border-hi);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.demo-sheet-title {
  height: 10px;
  width: 60%;
  background: var(--text-mid);
  border-radius: 3px;
  margin-bottom: 10px;
  opacity: 0.5;
}
.demo-sheet-row {
  height: 7px;
  background: var(--border-hi);
  border-radius: 3px;
  margin-bottom: 7px;
}
.demo-sheet-row.short { width: 55%; }
.demo-date {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 100%;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.demo-date div {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mid);
}
.demo-date div.active { background: var(--neon-green); color: var(--bg); }
.demo-date div.today { color: var(--neon-green); }
.demo-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.demo-chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--border-hi);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-mid);
  border-radius: var(--r-full);
}
.demo-chip.green { color: var(--neon-green); border-color: var(--neon-green-dim); }

/* Anatomy */
.anatomy-block {
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 56px;
}
.anatomy-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
}
.anatomy-title h3 {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text-bright);
}
.anatomy-title .meta {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0;
}
.anatomy-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.anatomy-row {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: var(--sp-20) 0;
  border-bottom: 1px solid var(--border);
}
.anatomy-row:last-child { border-bottom: none; padding-bottom: 4px; }
.anatomy-row .row-label {
  flex: 0 0 56px;
  font-weight: 600;
  font-size: 11px;
  color: var(--text-lo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.anatomy-row .row-items {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.btn-sample { display: inline-flex; align-items: center; font-size: 13px; padding: 12px 28px; border-radius: var(--r-sm); letter-spacing: 0; font-weight: 600; }
.btn-primary { background: var(--neon-green); color: var(--bg); border: 1px solid var(--neon-green); }
.btn-primary-hover { background: var(--neon-green-hover); color: var(--bg); border: 1px solid var(--neon-green-hover); }
.btn-primary-pressed { background: var(--neon-green-dim); color: var(--bg); border: 1px solid var(--neon-green-dim); }
.btn-primary-disabled { background: var(--border); color: var(--text-lo); border: 1px solid var(--border); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-hi); }
.btn-purple { background: var(--neon-purple); color: var(--text-bright); border: 1px solid var(--neon-purple); }
.btn-lg { font-size: 15px; padding: 14px 32px; }
.btn-md { font-size: 13px; padding: 10px 22px; }
.btn-sm { font-size: 11px; padding: 6px 14px; }

/* CHARACTER SYSTEM */
.character-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 64px;
}
.char-cell {
  aspect-ratio: 1/1;
  background: var(--surface-1);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px;
  position: relative;
  transition: border-color 0.3s var(--easing);
}
.char-cell:hover { border-color: var(--neon-green); }
.char-cell::before {
  content: "";
  position: absolute;
  inset: 20% 20% 30% 20%;
  border-radius: 50%;
  opacity: 0.15;
}
.char-cell[data-mood="idle"]::before      { background: radial-gradient(circle, var(--text-mid), transparent 70%); }
.char-cell[data-mood="greeting"]::before  { background: radial-gradient(circle, #4A90E2, transparent 70%); }
.char-cell[data-mood="thinking"]::before  { background: radial-gradient(circle, #5EA8FF, transparent 70%); }
.char-cell[data-mood="curious"]::before   { background: radial-gradient(circle, var(--neon-purple), transparent 70%); opacity: 0.2; }
.char-cell[data-mood="excited"]::before   { background: radial-gradient(circle, var(--neon-green), transparent 70%); opacity: 0.2; }
.char-cell[data-mood="analyzing"]::before { background: radial-gradient(circle, var(--neon-purple), transparent 60%); opacity: 0.3; }
.char-cell[data-mood="result"]::before    { background: radial-gradient(circle, var(--neon-green), transparent 60%); opacity: 0.35; }
.char-cell[data-mood="farewell"]::before  { background: radial-gradient(circle, var(--text-mid), transparent 70%); }

.char-slot {
  position: relative;
  z-index: 2;
  margin: auto;
  width: 60%;
  aspect-ratio: 1;
  border: 1px dashed var(--border-hi);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-lo);
  letter-spacing: 0;
}
.char-label {
  font-weight: 500;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0;
  text-align: center;
  position: relative;
  z-index: 2;
}
.char-index {
  position: absolute;
  top: 12px;
  left: 12px;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-lo);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

.char-flow {
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 40px;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.char-flow .step {
  padding: 14px 24px;
  border: 1px solid var(--border-hi);
  background: var(--bg);
  color: var(--text-hi);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.char-flow .arrow { color: var(--neon-green); font-size: 18px; font-weight: 500; }


/* ── 14. SCREENS / DETAIL ──────────────────────
   .detail-*, .screen-*, .phone-*, .wave-*, .device, .cascade-*
   ─────────────────────────────────────────────── */
.detail-showcase { background: var(--bg); }
.detail-screens {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2vw;
  row-gap: 20vh;
  padding: 0 var(--page-pad-x) var(--sp-10);
}
.detail-frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.detail-frame:nth-child(1) { grid-column: 1 / 4; grid-row: 1; margin-top: 0; }
.detail-frame:nth-child(2) { grid-column: 10 / 13; grid-row: 1; margin-top: 5vh; }
.detail-frame:nth-child(3) { grid-column: 1 / 4; grid-row: 2; margin-top: 0; }
.detail-frame:nth-child(4) { grid-column: 10 / 13; grid-row: 2; margin-top: 5vh; }
.detail-frame img {
  width: 100%;
  aspect-ratio: 375/812;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-xl);
  display: block;
}
.detail-showcase .section-header-block h2 {
  font-size: clamp(18px, 2vw, 28px);
  color: var(--text-mid);
  font-weight: 500;
}
.detail-showcase .section-header-block .intro {
  font-size: 13px;
  color: var(--text-lo);
}

/* PHONE SLOT */
.phone-slot {
  display: flex;
  flex-direction: column;
}
.phone-frame {
  aspect-ratio: 9/19.5;
  background: linear-gradient(135deg, var(--surface-1) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  padding: 8px;
  position: relative;
}
.phone-frame::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed var(--border);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}
.phone-frame::after {
  content: "실제 화면";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-lo);
  letter-spacing: 0;
}
.phone-frame.hilite { border-color: var(--neon-green-dim); }
.phone-frame.hilite::after { color: var(--neon-green-dim); }
.phone-frame.purple { border-color: var(--neon-purple-dim); }
.phone-frame.purple::after { color: var(--neon-purple-dim); content: "실제 화면"; }
/* FILLED PHONE SLOTS (real product screens) */
.phone-frame.filled {
  padding: 0;
  border: none;
  overflow: hidden;
  aspect-ratio: 375/812;
  border-radius: var(--r-xl);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.phone-frame.filled::before,
.phone-frame.filled::after { display: none !important; content: none !important; }
.phone-frame.filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: inherit;
}
.phone-frame.filled.tall { aspect-ratio: unset; }
.phone-frame.filled.tall img { height: auto; object-fit: unset; object-position: unset; }

.screen-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mid);
  letter-spacing: 0;
  margin-top: 12px;
  text-align: center;
  line-height: 1.4;
}
.screen-label .idx {
  color: var(--text-lo);
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Small phone slots for Application grid */
.app-grid .phone-frame::after {
  font-size: 10px;
  letter-spacing: 0;
}
.app-grid .phone-frame::before {
  inset: 6px;
  border-radius: calc(var(--r-md) - 6px);
}
.app-grid .phone-frame {
  padding: 6px;
  border-radius: var(--r-md);
}

/* Overview preview phones */
.preview-content .phone-frame {
  width: 200px;
  aspect-ratio: 9/19.5;
}

/* PRODUCT APPLICATION */
.app-group {
  margin-bottom: 56px;
}
.app-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.app-group-header .name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-hi);
  letter-spacing: 0;
}
.app-group-header .name::before {
  content: "━━━ ";
  color: var(--neon-green);
}
.app-group-header .count {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.app-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* PRODUCT FLOW */
.flow-section { margin-bottom: 64px; }
.flow-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-bottom: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.flow-header .meta {
  font-weight: 500;
  font-size: 12px;
  color: var(--neon-green);
  letter-spacing: 0;
  margin-bottom: 24px;
}
.flow-header h3 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--text-hi);
}
.flow-header .desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  padding-top: 8px;
  letter-spacing: 0;
}

.flow-screens {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

.callout-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
}
.callout {
  padding-right: 24px;
}
.callout .num {
  font-weight: 500;
  font-size: 12px;
  color: var(--neon-green);
  letter-spacing: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.callout .callout-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 8px;
  margin-bottom: 2px;
}
.callout .callout-icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--neon-green);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.callout .text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  letter-spacing: 0;
}

/* RHYTHM & MOTION */
.wave-wrap { margin-top: 40px; }
.wave-band { position: relative; padding: 96px 0; }
.wave-band:first-child { padding-top: 24px; }
.ghost {
  position: absolute; top: 8px; left: -12px;
  font-weight: 900; font-size: 260px; line-height: .8;
  letter-spacing: 0; color: rgba(255,255,255,.035);
  z-index: 0; pointer-events: none; font-variant-numeric: tabular-nums; transform: translateY(var(--py,0));
  will-change: transform;
}
.wave-band.side-right .ghost { left: auto; right: -12px; }
.wave-head { position: relative; z-index: 2; display: flex; align-items: baseline;
  flex-wrap: wrap; gap: 14px 22px; margin-bottom: 56px; max-width: 760px; }
.wave-band.side-right .wave-head { }
.wave-name { font-family: var(--f-display); font-weight: 800; font-size: 44px; letter-spacing: 0; color: var(--text-bright); line-height: 1.1; }
.wave-count { font-weight: 500; font-size: 12px; letter-spacing: 0; color: var(--neon-green);
  text-transform: uppercase; }
.wave-note { flex-basis: 100%; font-size: 16px; line-height: 1.7; color: var(--text-mid); max-width: 620px; }
.wave-band.side-right .wave-note { margin-left: auto; }

/* wave-strip 텍스트 컬럼 */
.wp-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
  gap: 16px;
}
.wp-text .wave-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 3.2vw, 52px);
  letter-spacing: 0;
  color: var(--text-hi);
  line-height: 1.1;
}
.wp-text .wave-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
  max-width: 320px;
}

.wave-strip { position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px; align-items: start;
  max-width: 1440px; margin: 0 auto; }

.wp { position: relative; will-change: transform; }
.device { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 375/812; }
.device img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.device.tall { aspect-ratio: unset; }
.device.tall img { height: auto; object-fit: unset; object-position: unset; }
.wp figcaption { margin-top: 16px; font-size: 12px; font-weight: 500; color: var(--text-mid);
  letter-spacing: 0; text-align: center; line-height: 1.4; }
.wc-idx { display: block; font-size: 10px; letter-spacing: 0; color: var(--text-lo);
  margin-bottom: 4px; font-variant-numeric: tabular-nums; }

/* flow rows */
.flow-screens .phone-slot { transform: none; }
.flow-screens .phone-slot img, .flow-screens .phone-frame { transition: opacity .7s var(--easing); }

/* CASCADE SCREENS */
.cascade-wrap {
  margin-top: 80px;
  margin-left: calc(-1 * var(--page-pad-x));
  margin-right: calc(-1 * var(--page-pad-x));
}

.cascade-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0 80px;
  align-items: start;
  margin-bottom: 160px;
}
.cascade-row.flipped {
  grid-template-columns: 2fr 1fr;
}
.cascade-row.flipped .cascade-text { grid-column: 2; grid-row: 1; }
.cascade-row.flipped .cascade-phones { grid-column: 1; grid-row: 1; }

.cascade-text { padding-top: 60px; }

.cascade-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--neon-green);
  margin-bottom: 20px; display: block;
}
.cascade-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  margin-bottom: 20px;
}
.cascade-body {
  font-size: 14px; line-height: 1.8;
  color: var(--text); max-width: 28ch;
}

.cascade-phones {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cascade-phone { flex: 1; min-width: 0; }
.cascade-phone .phone-frame {
  width: 100%;
  aspect-ratio: 375/812;
  height: auto;
  max-height: none;
}
.cascade-phone:nth-child(2) { margin-top: 56px; }
.cascade-phone:nth-child(3) { margin-top: 112px; }

/* INSIGHT PIN */
.insight-pin-wrap {
  position: relative;
}
.insight-lines-reveal .iline {
  display: block;
  overflow: hidden;
}
.insight-lines-reveal .iline-inner {
  display: block;
  transform: translateY(110%);
}


/* ── 15. END SECTION ───────────────────────────
   .end-section, footer, preloader
   ─────────────────────────────────────────────── */

/* INSIGHT (SIGNATURE) */
.insight {
  padding: var(--section-y) 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.insight::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 50%, rgba(182,255,61,.07) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 85% 45%, rgba(176,38,255,.05) 0%, transparent 65%);
  animation: insightAurora 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.insight-inner {
  padding: 0 var(--page-pad-x);
  width: 100%;
  position: relative;
  z-index: 2;
}
.insight-marker {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-mid);
  margin-bottom: 56px;
}
.insight-marker .left { color: var(--text-hi); }
.insight-marker .right { color: var(--neon-green); }

.insight-anchor {
  font-size: clamp(56px, 11vw, 172px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-hi);
  margin-bottom: 48px;
}
.insight-anchor .green { color: var(--neon-green); }

.insight-korean {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: var(--text-mid);
  letter-spacing: 0;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  max-width: 780px;
  margin-bottom: 56px;
  line-height: 1.65;
}

.insight-body {
  max-width: 680px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  padding-top: 32px;
  border-top: 1px dashed var(--border);
  letter-spacing: 0;
}
.insight-body::before {
  content: "노트";
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-mid);
  letter-spacing: 0;
  margin-bottom: 16px;
}

/* VID INTERLUDE */
.vid-interlude {
  position: relative;
  width: 100%;
  height: 960px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.vid-interlude video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
}
.vid-interlude-text {
  position: relative;
  z-index: 2;
  font-family: var(--f-display);
  font-size: clamp(14px, 1.8vw, 24px);
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

/* VID INTERLUDE INSIGHT TEXT */
.vid-insight {
  text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-20);
}
.vid-insight-main {
  font-family: var(--f-display);
  font-size: clamp(44px, 5.5vw, 88px);
  font-weight: 900; color: #fff;
  line-height: 1.05; letter-spacing: -0.02em;
}
.vid-insight-main .green { color: var(--neon-green); }
.vid-insight-sub {
  font-size: clamp(14px, 1.4vw, 19px);
  color: rgba(255,255,255,0.55);
  line-height: 1.7; font-weight: 400;
}
.vid-insight-body {
  font-size: clamp(11px, 1.1vw, 14px);
  color: rgba(255,255,255,0.28);
  font-weight: 500; letter-spacing: 0.1em;
}

/* PRODUCT DEFINITION */
.def-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  margin-bottom: 56px;
}
.def-cell {
  padding: 56px 40px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.def-cell.left { border-right: 1px solid var(--border); background: var(--surface-1); }
.def-cell.right { background: var(--surface-2); }
.def-cell .label-text {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-mid);
  margin-bottom: 40px;
}
.def-cell.left .label-text::before { content: "× "; color: var(--danger); margin-right: 4px; }
.def-cell.right .label-text::before { content: "○ "; color: var(--neon-green); margin-right: 4px; }
.def-cell h3 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-hi);
  margin-bottom: 32px;
}
.def-cell.left h3 { color: var(--text-mid); }
.def-cell.right h3 { color: var(--neon-green); }
.def-cell .terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.def-cell .term {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--border-hi);
  background: rgba(0,0,0,0.4);
  color: var(--text);
  letter-spacing: 0;
}
.def-cell.left .term { color: var(--text-lo); border-color: var(--border); }

/* KEYWORD MARQUEE (product-definition) */
.def-marquee {
  width: 100%;
  overflow: hidden;
  padding: 16px 0 64px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.def-mrow {
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
}
.def-mtrack {
  display: inline-flex;
  align-items: center;
  gap: 0;
  animation: mq-left 28s linear infinite;
  will-change: transform;
}
.def-mtrack.rev {
  animation-name: mq-right;
  animation-duration: 22s;
}
.def-tag {
  font-family: var(--f-display);
  font-size: clamp(72px, 10.5vw, 148px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
  padding: 0 0.5em;
}
.def-tag.out {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--border-hi);
}
.def-tag.green { color: var(--neon-green); }

/* REFLECTION */
.ref-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.ref-card {
  background: var(--surface-2);
  border: 1px solid var(--border-lo);
  border-radius: var(--r-md);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  transition: border-color var(--dur-fast) var(--easing), background var(--dur-fast) var(--easing);
}
.ref-card:hover {
  border-color: var(--border);
  background: var(--surface-3);
}
.ref-card-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--neon-green);
  margin-bottom: 32px;
  font-family: var(--f-display);
}
.ref-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.ref-card-body {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-top: auto;
  padding-top: 28px;
  letter-spacing: 0;
}
.ref-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 2px;
  background: var(--border-lo);
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
}
.ref-stat {
  background: var(--surface-1);
  padding: 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ref-stat-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  font-family: var(--f-display);
  letter-spacing: -0.03em;
}
.ref-stat-lbl {
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0;
}

/* FOOTER */
.footer-qr-row {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 40px 0;
  border-top: 1px solid var(--border-lo);
  margin-top: 32px;
}
.footer-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer-qr-box {
  width: 100px;
  height: 100px;
  padding: 8px;
  background: var(--text-hi);
  border-radius: 10px;
}
.footer-qr-box canvas,
.footer-qr-box img { display: block; width: 100% !important; height: 100% !important; }
.footer-qr-label {
  font-size: 10px;
  color: var(--text-lo);
  letter-spacing: 0.06em;
  text-align: center;
}
.footer-links-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.footer-links-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 13px;
  color: var(--text-mid);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  letter-spacing: 0;
}
.footer-link-pill:hover { border-color: var(--neon-green); color: var(--neon-green); }
.footer-link-pill svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.end-section {
  background: var(--neon-green);
  padding: 96px 96px 48px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: flex-start;
}
.end-sub {
  font-size: 22px;
  font-weight: 400;
  color: #333;
  line-height: 1.7;
}
.end-heading {
  font-family: var(--f-display);
  font-size: 80px;
  font-weight: 900;
  color: #111;
  line-height: 1.3;
  white-space: pre-line;
}
.end-cta {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  letter-spacing: 0.04em;
  margin-bottom: 32px;
  opacity: 0.5;
}
.end-qr-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.end-qr-wrap a { display: block; line-height: 0; }
.end-qr-wrap img {
  width: 112px;
  height: 112px;
  display: block;
  border-radius: var(--r-sm);
}
.end-qr-caption {
  font-size: 11px;
  color: var(--text-mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer {
  padding: 120px var(--page-pad-x) 40px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.footer-title {
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-hi);
  margin-bottom: 80px;
}
.footer-title .green { color: var(--neon-green); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.footer-block .lbl {
  font-weight: 500;
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0;
  margin-bottom: 16px;
}
.footer-block .val {
  font-size: 17px;
  color: var(--text-hi);
  font-weight: 500;
  letter-spacing: 0;
}
.footer-block a { border-bottom: 1px solid var(--border-hi); }
.footer-block a:hover { border-color: var(--neon-green); color: var(--neon-green); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 48px;
  margin-top: 96px;
  border-top: 1px solid var(--border);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0;
}
.footer-bottom .brand { color: #fff; }

/* PRELOADER */
#preloader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: #000;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  pointer-events: none;
  will-change: transform;
  /* Explicit from-value so CSS transition can interpolate */
  transform: translateY(0%);
  transition: transform 0.88s cubic-bezier(0.87, 0, 0.13, 1);
}
#preloader.pre-exit {
  transform: translateY(-100%);
}
.pre-bg {
  position: absolute; inset: 0;
  background: #000;
}
.pre-center {
  position: relative; z-index: 2;
  text-align: center;
}
.pre-video-wrap {
  width: 240px; height: 240px;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 0 auto var(--sp-20);
  opacity: 0;
  background: var(--bg);
  animation: preFadeIn 0.6s ease 0.2s forwards;
}
.pre-video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pre-logo-text {
  font-family: var(--f-display);
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  color: var(--text-hi);
  opacity: 0;
  animation: preFadeIn 0.6s ease 0.45s forwards;
}
.pre-logo-text em { color: var(--neon-green); font-style: normal; }
#preloader.pre-exit .pre-video-wrap,
#preloader.pre-exit .pre-logo-text {
  animation: preFadeOut 0.35s ease forwards;
}
.pre-bottom {
  position: absolute; bottom: 40px; left: 48px; right: 48px; z-index: 2;
  display: flex; align-items: center; gap: var(--sp-20);
  transition: opacity 0.3s;
}
#preloader.pre-exit .pre-bottom { opacity: 0; }
.pre-year, .pre-category {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0; text-transform: uppercase;
  color: var(--text-lo);
  flex-shrink: 0;
}
.pre-bar-wrap {
  flex: 1; height: 1px; background: var(--border);
  overflow: hidden;
}
.pre-bar-fill {
  height: 100%; width: 0%;
  background: var(--neon-green);
  animation: preBarGrow 2.2s cubic-bezier(.25, 0, .6, 1) forwards;
}


/* ── 16. ANIMATIONS & KEYFRAMES ────────────────
   @keyframes
   ─────────────────────────────────────────────── */
@keyframes marquee-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@keyframes preFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes preFadeOut {
  to { opacity: 0; transform: translateY(-12px); }
}

@keyframes preBarGrow {
  from { width: 0%; }
  to   { width: 100%; }
}

@keyframes mq-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes mq-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}


/* ── 17. RESPONSIVE ────────────────────────────
   @media queries
   ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --page-pad-x: 40px;
    --section-y: 80px;
  }
  .cover-title { font-size: 84px; }
  .section-header-block { gap: 16px; }

  .overview-grid { grid-template-columns: 1fr; gap: 48px; }
  .tri-cards { grid-template-columns: 1fr; gap: 16px; }
  .tri-card { min-height: auto; }
  .def-grid { grid-template-columns: 1fr; }
  .def-cell.left { border-right: none; border-bottom: 1px solid var(--border); }
  .def-cell { padding: 48px 32px; min-height: auto; }
  .character-grid { grid-template-columns: repeat(2, 1fr); }
  .color-grid { grid-template-columns: 1fr; gap: 12px; }
  .color-card { aspect-ratio: 5/3; }
  .type-grid { grid-template-columns: 1fr; }
  .type-card .specimen-display { font-size: 64px; }
  .comp-grid { grid-template-columns: repeat(2, 1fr); }
  .anatomy-block { padding: 32px; }
  .flow-header { grid-template-columns: 1fr; gap: 24px; }
  .flow-screens { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .callout-list { grid-template-columns: 1fr; gap: var(--sp-20); }
  .app-grid { grid-template-columns: repeat(3, 1fr); }
  .reflection-body { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr; }
  .cover-bottom { grid-template-columns: 1fr 1fr; gap: 24px; }
  .nav-meta { display: none; }
  .insight-anchor { font-size: 60px; }
  .insight-korean { font-size: 16px; }
}

@media (max-width: 900px) {
  .prob-grid { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: 1fr 1fr; }
  .flow-steps { flex-direction: column; gap: 16px; }
  .flow-arrow { transform: rotate(90deg); margin: 0 auto; }
  .comp-table { font-size: 13px; }
  .ghost { font-size: 150px; }
  .wave-name { font-size: 32px; }
  .wave-strip { gap: 28px 24px; }
  .wp[style]{ width: 30% !important; min-width: 130px; }
  .def-grid { gap: 0 32px; }
  .uf-split { flex-direction: column; gap: 32px; }
  .uf-left { flex: none; width: 100%; }
  .uf-step-card { flex: 0 0 160px; }
  .uf-step-card .phone-frame.filled { width: 160px; }
  .ov-layout { grid-template-columns: 1fr; gap: 40px; }
  .ov-preview { min-height: 300px; }
  .cascade-row, .cascade-row.flipped {
    grid-template-columns: 1fr;
    gap: 40px 0;
    margin-bottom: 100px;
  }
  .cascade-row.flipped .cascade-text { grid-column: 1; grid-row: 1; }
  .cascade-row.flipped .cascade-phones { grid-column: 1; grid-row: 2; }
  .cascade-text { padding-top: 0; }
  .cascade-phones { gap: 10px; }
  .cascade-phone .phone-frame { aspect-ratio: 375/812; height: auto; max-height: none; }
  .cascade-phone:nth-child(2) { margin-top: 32px; }
  .cascade-phone:nth-child(3) { margin-top: 64px; }
  .hscroll-panel { padding: 80px 24px; min-height: auto; }
  .pre-star { font-size: 36px; }
  .pre-bottom { left: 24px; right: 24px; }
}

@media (max-width: 640px) {
  :root {
    --page-pad-x: 24px;
    --section-y: 60px;
  }
  .cover-title { font-size: 52px; letter-spacing: 0; }
  .cover-bottom { grid-template-columns: 1fr; }
  .flow-screens { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .comp-grid { grid-template-columns: repeat(2, 1fr); }
  .insight-anchor { font-size: 44px; letter-spacing: 0; }
  .def-cell h3 { font-size: 30px; }
  .flow-header h3 { font-size: 28px; }
  .footer-title { font-size: 40px; }
  .char-cell { padding: 16px 8px; }
  .type-card .specimen-display { font-size: 48px; }
  .type-card .specimen-label { font-size: 15px; }
  #csr, #csr-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .ghost, .wp { will-change: auto; }
  .vid-interlude video, .pre-video, video { animation-play-state: paused; }
  #csr, #csr-ring { display: none !important; }
  * { transition-duration: 0.01ms !important; }
}


/* ── 18. PREMIUM MOTION & OVERRIDES ────────────
   Progress bar, cursor, reveal, no-borders, motion
   ─────────────────────────────────────────────── */

/* Progress bar */
#pg-bar {
  position: fixed; top: 0; left: 0; z-index: var(--z-bar);
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--neon-green), var(--neon-green-hover));
  box-shadow: 0 0 8px rgba(182,255,61,.45);
  transform-origin: left;
  pointer-events: none;
  transition: transform 0.05s linear;
  transform: scaleX(0);
}

/* Custom cursor */
#csr { position: fixed; pointer-events: none; z-index: var(--z-cursor); mix-blend-mode: difference; }
#csr-dot { width: 8px; height: 8px; background: var(--neon-green); border-radius: 50%; transform: translate(-50%,-50%); }
#csr-ring {
  position: fixed; pointer-events: none; z-index: var(--z-cursor-ring);
  width: 40px; height: 40px; border: 1px solid rgba(182,255,61,0.6); border-radius: 50%;
  transform: translate(-50%,-50%) scale(1);
  transition: transform .4s cubic-bezier(.23,1,.32,1), border-color .3s;
}
body:has(a:hover) #csr-ring,
body:has(button:hover) #csr-ring { transform: translate(-50%,-50%) scale(1.4); border-color: var(--neon-green); }

/* Cursor label */
#csr-label {
  position: fixed; pointer-events: none; z-index: var(--z-cursor-label);
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  text-transform: uppercase; color: var(--text-hi);
  transform: translate(16px, -50%);
  opacity: 0;
  transition: opacity 0.2s;
}

/* Reveal base */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(.16,1,.3,1),
              transform 0.85s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d,0ms);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* scroll reveal (progressive enhancement) */
.js-reveal .reveal { opacity: 0; transform: translateY(38px); transition: opacity .8s var(--easing), transform .8s var(--easing); transition-delay: var(--d, 0ms); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* FOCUS VISIBLE (keyboard nav) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--neon-green);
  outline-offset: 3px;
  border-radius: 3px;
}
a:focus-visible, button:focus-visible { outline-offset: 4px; }

/* Split text — lines overflow hidden */
.split-wrap { overflow: hidden; display: block; }

/* Image mask reveal */
.img-mask { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.16,1,.3,1); }
.img-mask.in { clip-path: inset(0% 0 0 0); }

/* Counter animation targets */
.count-anim { font-variant-numeric: tabular-nums; }

/* Section marker — slide-in line */
.section-marker .num,
.section-marker .name { opacity: 0; transform: translateX(-12px); transition: opacity .6s ease, transform .6s ease; }
.section-marker.in .num { opacity: 1; transform: none; transition-delay: 0ms; }
.section-marker.in .name { opacity: 1; transform: none; transition-delay: 80ms; }
.section-marker .kind { opacity: 0; transition: opacity .6s ease .2s; }
.section-marker.in .kind { opacity: 1; }

/* Sticky nav shrink — padding change handled via custom property to avoid layout-property animation */
.nav { transition: background .35s ease; }
.nav.scrolled { padding-top: 12px; padding-bottom: 12px; }

/* Micro: nav brand hover */
.nav-brand { transition: color .2s ease; cursor: pointer; text-decoration: none; }
.nav-brand:hover { color: var(--neon-green); }

/* Hover link underline sweep */
.footer-block a {
  position: relative;
  border-bottom: none !important;
}
.footer-block a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--neon-green);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.footer-block a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-block a:hover { color: var(--neon-green) !important; }

/* ===== NO BORDERS: separate regions with whitespace + tone, not lines =====
   Structural / decorative lines removed. Real UI-component borders (buttons,
   inputs, chips, checkbox/radio, nav, overlay, label specimen) are kept. */
.nav { border-bottom: none !important; }
.section-marker { border-bottom: none !important; padding-bottom: 0 !important; }
.cover-sub, .cover-bottom { border-top: none !important; }
.section-header-block, .tri-title { border: none !important; }

.tri-cards { gap: 0 56px; margin-bottom: 56px; }
#design-strategy .tri-cards:not(:last-child) { margin-bottom: 48px; }
.tri-card { background: transparent !important; border: none !important; padding: 0; min-height: 0; border-radius: var(--r-card); }
.tri-card:hover { background: transparent !important; }
.tri-card .num { margin-bottom: 20px; }
.tri-card .desc { margin-top: 16px; }
.tri-card .tri-icon { width: 36px; height: 36px; }

.insight-korean, .insight-body { border: none !important; }

.def-grid { border: none !important; background: transparent !important; gap: 0 72px; }
.def-cell, .def-cell.left, .def-cell.right { background: transparent !important; border: none !important; padding: 8px 0; }
.def-cell .term { border: none !important; padding-left: 0; padding-right: 0; }

.color-card, .color-swatch, .type-card { border: none !important; }
.color-card { border-radius: var(--r-md); }
.type-card { background: var(--surface-1) !important; border-radius: var(--r-md); }

.comp-cell { border: none !important; background: transparent !important; border-radius: 0 !important; }
.comp-cell:hover { border: none !important; }
.char-cell, .char-slot { border: none !important; border-radius: var(--r-md); }
.char-cell:hover { border: none !important; }

.anatomy-block { background: transparent !important; border: none !important; padding: 0 !important; }
.anatomy-title { border-bottom: none !important; }
.anatomy-row .row-label { border-bottom: none !important; }

.callout-list { border-top: none !important; gap: 0 56px; padding-top: 0; }
.flow-header { border-bottom: none !important; }
.preview-frame { border: none !important; }

.phone-frame { border: none !important; }
.phone-frame.filled { padding: 0; }
.phone-frame.filled img { border-radius: inherit; }

.reflection-body h4 { border-bottom: none !important; }
.reflection-body li { border-bottom: none !important; padding: 9px 0; }
.footer, .footer-grid, .footer-bottom { border: none !important; }
.footer-block a { border-bottom: none !important; }

/* ── IA mobile (auto-added) ──────────────────── */
@media (max-width: 900px) {
  .ia-body { flex-direction: column; gap: 40px; }
  .ia-left { white-space: normal; }
  .ia-heading { font-size: 40px; }
  .ia-tree { flex-wrap: wrap; overflow: visible; gap: 16px; }
  .ia-auth-v { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .ia-auth-v .ia-node--sm { width: auto; flex: 1 1 40%; }
  .ia-auth-v .ia-connector-v { display: none; }
  .ia-col { flex: 1 1 42%; min-width: 150px; }
  .ia-col--offset { padding-top: 0; }
}
@media (max-width: 480px) {
  .ia-col { flex: 1 1 100%; }
}

/* ── Mobile overflow fixes (auto-added) ──────── */
@media (max-width: 900px) {
  /* OVERVIEW phone: 고정 800px → 뷰포트 맞춤 */
  .ov-phone-wrap { width: 100%; max-width: 420px; height: auto; aspect-ratio: 4/3; }
  /* USER FLOW 가로 트랙 → 세로 스택 */
  .uf-right { overflow: visible; }
  .uf-track { flex-direction: column; width: 100% !important; transform: none !important; }
  .uf-track > * { width: 100%; }
  /* REFLECTION 카드 3열 → 1열 */
  .ref-cards { grid-template-columns: 1fr; }
  /* END 헤딩 축소 */
  .end-heading { font-size: clamp(34px, 9vw, 56px); }
}
@media (max-width: 900px) {
  /* 비교 테이블: 래퍼 내부 가로 스크롤로 격리 */
  .comp-table-wrap { overflow-x: auto; width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .comp-table { min-width: 520px; }
}

/* ── END tape (auto-added) ───────────────────── */
.end-tape {
  position: relative;
  height: 150px;
  margin: -170px -96px 8px;
  pointer-events: none;
  z-index: 5;
  align-self: stretch;
}
.end-tape .tape {
  position: absolute;
  left: 50%; top: 50%;
  width: 130vw;
  transform: translate(-50%, -50%) rotate(-4deg);
  background: var(--bg);
  color: var(--neon-green);
  overflow: hidden;
  padding: 13px 0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.end-tape .tape--b {
  transform: translate(-50%, -46%) rotate(3.2deg);
  background: var(--neon-purple);
  color: #fff;
}
.end-tape .tape-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.14em;
  animation: tapeMove 26s linear infinite;
}
.end-tape .tape--b .tape-track {
  animation-direction: reverse;
  animation-duration: 32s;
}
@keyframes tapeMove { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .end-tape { height: 110px; margin: -140px -24px 0; }
  .end-tape .tape-track { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .end-tape .tape-track { animation: none; }
}

/* ── APPLICATION 밴드 믹스: B안 히어로 + A안 교차 (auto-added) ── */
.wave-strip--hero { grid-template-columns: repeat(12, 1fr); }
.wave-strip--hero .wsh-text { grid-column: span 3; padding-top: 56px; }
.wsh-text .wsh-sub { margin-top: 32px; }
.wave-strip--hero .wsh-hero { grid-column: span 5; }
.wave-strip--hero .wsh-hero .device--hero { border-radius: var(--r-2xl); }
.wave-strip--hero .wsh-side { grid-column: 10 / span 3; margin-top: 96px; }
.wp-text--drop { padding-top: 128px; }
.wp--sm .device { width: 84%; }
@media (max-width: 900px) {
  .wave-strip--hero { grid-template-columns: repeat(4, 1fr); }
  .wave-strip--hero .wsh-text { grid-column: span 4; padding-top: 0; }
  .wave-strip--hero .wsh-hero { grid-column: span 2; }
  .wave-strip--hero .wsh-side { grid-column: span 2; margin-top: 48px; }
  .wp-text--drop { padding-top: 32px; }
}

/* ── PERSONA mobile (auto-added) ── */
@media (max-width: 900px) {
  .persona-grid { grid-template-columns: 1fr; gap: var(--sp-20); }
  .persona-grid .persona-card { margin-top: 0 !important; }
}

/* ── WAVE mobile 2col (auto-added: 우측 잘림 수정) ── */
@media (max-width: 900px) {
  .wave-strip { grid-template-columns: repeat(2, 1fr); }
  .wave-strip .wp, .wave-strip .wp[style] { width: 100% !important; min-width: 0; margin-top: 0 !important; }
  .wave-strip .wp-text { grid-column: span 2; padding-top: 0 !important; }
  .wave-strip--hero .wsh-text { grid-column: span 4; }
}


/* ── TREND 2026 ─────────────────────────────────────────────────────────────
   Grain · Gradient text · 3D tilt · Aurora · Phone float
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. Film-grain texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* 2. Gradient text — USER FLOW h2 */
.uf-left h2 {
  background: linear-gradient(135deg, var(--text-bright) 55%, var(--neon-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text-bright);
}

/* 3. 3D tilt cards */
.tilt-card {
  will-change: transform;
  transform-style: preserve-3d;
  transition: box-shadow 0.35s var(--easing), transform 0.2s var(--easing);
}
.tilt-card:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 4px 16px rgba(182,255,61,.06);
}

/* 4. Keyframes */
@keyframes phoneFloat {
  0%, 100% { transform: translateY(-4px) scale(1.02); }
  50%       { transform: translateY(-10px) scale(1.02); }
}

@keyframes insightAurora {
  from { opacity: 0.6; transform: scale(1) translate(0, 0); }
  to   { opacity: 1;   transform: scale(1.06) translate(-1%, 1%); }
}

/* 5. Reduced-motion fallbacks */
@media (prefers-reduced-motion: reduce) {
  .uf-step-card.is-active .phone-frame.filled {
    animation: none;
    transform: translateY(-4px) scale(1.02);
  }
  .insight::before { animation: none; opacity: 1; }
}

/* ── 390px — iPhone SE / small Android ─────────── */
@media (max-width: 390px) {
  :root {
    --page-pad-x: 16px;
    --section-y: 48px;
  }
  .cover-title { font-size: 40px; }
  .insight-anchor { font-size: 36px; letter-spacing: -0.02em; }
  .footer-title { font-size: 32px; }
  .def-cell h3 { font-size: 24px; }
  .flow-header h3 { font-size: 22px; }
  .flow-screens { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .comp-grid { grid-template-columns: 1fr; }
  .cascade-phones { gap: 6px; }
  .end-heading { font-size: clamp(28px, 8vw, 40px); }
}

/* ══════════════════════════════════════════
   TORNADO 3D CYLINDER
   product-application section
══════════════════════════════════════════ */
.tornado-container {
  perspective: 1600px;
  perspective-origin: 50% 45%;
  height: 720px;
  position: relative;
  margin: 80px 0 48px;
}
.tornado-stage {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: relative;
  will-change: transform;
}
.tornado-card {
  position: absolute;
  width: 220px;
  top: 50%;
  left: 50%;
  margin-left: -110px;
  margin-top: -238px; /* 220 × 812/375 / 2 ≈ 238 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tornado-card .phone-frame {
  width: 100%;
  aspect-ratio: 375/812;
  height: auto;
  max-height: none;
  box-shadow: 0 24px 72px rgba(0,0,0,.6);
}

/* Helix: 9 cards × 40° each, radius 320px, Y: −100 → +100px */
.tc-0 { transform: rotateY(  0deg) translateZ(320px) translateY(-100px); }
.tc-1 { transform: rotateY( 40deg) translateZ(320px) translateY( -75px); }
.tc-2 { transform: rotateY( 80deg) translateZ(320px) translateY( -50px); }
.tc-3 { transform: rotateY(120deg) translateZ(320px) translateY( -25px); }
.tc-4 { transform: rotateY(160deg) translateZ(320px) translateY(   0px); }
.tc-5 { transform: rotateY(200deg) translateZ(320px) translateY(  25px); }
.tc-6 { transform: rotateY(240deg) translateZ(320px) translateY(  50px); }
.tc-7 { transform: rotateY(280deg) translateZ(320px) translateY(  75px); }
.tc-8 { transform: rotateY(320deg) translateZ(320px) translateY( 100px); }

/* Caption label — absolute overlay at bottom of container */
.tornado-caption {
  position: absolute;
  bottom: 64px;
  left: 0; right: 0;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
}
.tornado-label {
  display: none;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-hi);
}
.tornado-label.tl-active { display: block; }

/* Mobile fallback: flat 3-column grid */
@media (max-width: 768px) {
  .tornado-container {
    perspective: none;
    height: auto;
    padding-bottom: 56px;
  }
  .tornado-stage {
    transform: none !important;
    transform-style: flat;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    height: auto;
  }
  .tornado-card {
    position: relative;
    width: 100%;
    top: auto; left: auto;
    margin: 0;
    transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .tornado-label { font-size: clamp(18px, 5vw, 28px); }
}