/* ==========================================================================
   SAP NEXT 100 × Remember — 중소·중견 성장기업 도약 지원사업 랜딩
   ========================================================================== */

:root {
  --sap-blue-950: #04122e;
  --sap-blue-900: #071a3d;
  --sap-blue-800: #0a2a6b;
  --sap-blue-700: #0d3f9b;
  --sap-blue-600: #0b5fd1;
  --sap-blue-500: #0070f2;
  --sap-blue-400: #3d94ff;
  --sap-blue-300: #7cb8ff;
  --sap-blue-100: #e4f0ff;
  --sap-blue-50: #f3f8ff;
  --sap-purple: #6a5cf0;
  --sap-mint: #5fe0c9;
  --sap-teal: #0e8f8f;
  --ink-900: #0b1730;
  --ink-700: #33415c;
  --ink-500: #64748b;
  --ink-300: #b7c3d6;
  --line: rgba(10, 42, 107, 0.09);
  --white: #ffffff;

  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 2px 10px rgba(10, 35, 90, 0.07);
  --shadow-md: 0 12px 32px rgba(10, 35, 90, 0.12);
  --shadow-lg: 0 24px 64px rgba(6, 20, 55, 0.22);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 64px;

  /* Vertical rhythm. --sec-pad is breathing room INSIDE a section that paints
     its own background; --sec-gap is the space BETWEEN two plain-white
     sections, owned by one side only so the two paddings never stack. */
  --sec-pad: 80px;
  --sec-gap: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
  word-break: keep-all;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; }
ul, ol { list-style: none; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-xs { width: 15px; height: 15px; stroke-width: 2; }
.icon-sm { width: 18px; height: 18px; }

/* ---------------- Scroll progress ---------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--sap-mint), var(--sap-blue-500), var(--sap-purple));
  z-index: 1000;
  transition: width 0.08s linear;
}

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 900;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1180px; height: 100%; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.logo-sap { height: 22px; width: auto; border-radius: 3px; }
.logo-remember { height: 15px; width: auto; }
.brand-x { color: var(--ink-300); font-weight: 600; font-size: 14px; }
.header-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  color: var(--sap-blue-700); background: var(--sap-blue-100);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
}
.header-badge .icon { color: var(--sap-blue-500); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; border-radius: 999px;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  white-space: nowrap; text-decoration: none;
  padding: 14px 24px; font-size: 15px;
}
.btn-primary {
  color: var(--white);
  background: linear-gradient(120deg, var(--sap-blue-500), var(--sap-blue-700));
  box-shadow: 0 10px 30px rgba(0, 90, 220, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 90, 220, 0.42); }
.btn-primary:active { transform: translateY(0); }
.btn-lg { padding: 17px 30px; font-size: 16.5px; }
.btn-lg .icon, .btn .icon { transition: transform 0.25s var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }

/* ---------------- Layout helpers ---------------- */
.section { padding: var(--sec-pad) 24px; position: relative; }
.section-inner { max-width: 1180px; margin: 0 auto; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.tag {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--sap-blue-600); background: var(--sap-blue-100);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.tag-light { background: rgba(255,255,255,0.16); color: var(--white); }
.section-head h2 { font-size: clamp(25px, 3.4vw, 35px); font-weight: 800; line-height: 1.38; letter-spacing: -0.01em; }
.section-desc { margin-top: 14px; color: var(--ink-500); font-size: 15px; line-height: 1.6; }

.grad-text {
  background: linear-gradient(100deg, #ffffff 8%, var(--sap-mint) 52%, var(--sap-blue-300) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-blue {
  background: linear-gradient(100deg, var(--sap-blue-600), var(--sap-purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.br-mobile { display: none; }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 24px 48px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--sap-blue-950) 0%, var(--sap-blue-800) 46%, var(--sap-blue-600) 100%);
  color: var(--white);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; }
.hero-glow-1 { width: 560px; height: 560px; top: -220px; left: -160px; background: radial-gradient(circle, var(--sap-mint), transparent 70%); }
.hero-glow-2 { width: 520px; height: 520px; bottom: -260px; right: -180px; background: radial-gradient(circle, var(--sap-purple), transparent 70%); opacity: 0.45; }
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
}

.hero-inner {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  align-items: center; gap: 56px;
}

/* Guide: eyebrow tracking stays at -1% everywhere. */
.eyebrow { font-size: 14px; font-weight: 700; color: var(--sap-mint); letter-spacing: -0.01em; margin-bottom: 18px; }
.hero-title { font-size: clamp(42px, 6.4vw, 76px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; gap: 0 0.22em; }
.hero-brand-sap { color: rgba(255,255,255,0.34); }
.hero-lead { margin-top: 20px; font-size: clamp(17px, 2.2vw, 22px); font-weight: 700; color: var(--white); letter-spacing: -0.01em; }

/* The two numbers are the whole offer, so they get stat-sized type rather
   than caption-sized type. */
/* Two chips, one shape: same width, same height, and exactly two lines each
   (label / value) so they read as a matched pair at every width. */
.hero-highlights { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 30px; max-width: 470px; }
.hero-highlights li {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px; padding: 16px 18px;
}
.hl-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.62); white-space: nowrap;
}
.hl-value {
  font-size: 15px; font-weight: 700; color: var(--white);
  line-height: 1.2; white-space: nowrap;
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
}
.hl-value em {
  font-style: normal; font-weight: 900;
  font-size: 25px; letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--sap-mint), var(--sap-blue-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Personalised line, revealed once the Remember profile resolves. Sits under
   the symbol and above the CTA, as plain type: a chip here competed with the
   two value chips just above it. */
.hero-greeting[hidden] { display: none; }
.hero-greeting {
  position: relative; z-index: 1;
  margin: 30px auto 0; text-align: center;
  font-size: 15.5px; font-weight: 600; line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  animation: greeting-in 0.6s var(--ease-out);
}
.hero-greeting strong { color: var(--sap-mint); font-weight: 800; }
@keyframes greeting-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- 3D growth symbol ----
   Five angular steps climbing away from the viewer, plus a marker that leaps
   up the flight. Everything is derived from a single per-step index (--i), so
   the geometry, the entrance and the idle motion can never drift apart, and a
   breakpoint only has to restate the size/step values. */
.hero-visual {
  --scene-w: 430px;
  --scene-h: 380px;
  --scene-perspective: 1150px;

  --step-w: 74px;          /* footprint of one step */
  --step-d: 26px;          /* how far each step recedes */
  --step-rise: 34px;       /* how much taller each step gets */
  --base-h: 46px;          /* height of the first step */
  --top-h: 15px;           /* thickness of the lit top face */

  display: flex; align-items: center; justify-content: center;
  perspective: var(--scene-perspective);
  min-height: var(--scene-h);
}
.scene {
  --scene-rx: 14deg;
  --scene-ry: -26deg;
  position: relative;
  width: 100%; max-width: var(--scene-w); height: var(--scene-h);
  transform: rotateX(var(--scene-rx)) rotateY(var(--scene-ry));
  transform-style: preserve-3d;
  will-change: transform;
}

.riser {
  position: absolute;
  left: 50%; bottom: 22%;
  width: var(--step-w);
  /* each step is taller and sits one notch further back */
  height: calc(var(--base-h) + var(--i) * var(--step-rise));
  margin-left: calc(var(--step-w) * -2.5);
  transform: translate3d(
    calc(var(--i) * var(--step-w)),
    0,
    calc(var(--i) * var(--step-d) * -1)
  );
  transform-origin: 50% 100%;
  /* chamfered top-right corner keeps the SAP angular language */
  clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
  background: linear-gradient(170deg, var(--face-a), var(--face-b));
  animation:
    riser-grow 0.9s var(--ease-out) calc(var(--i) * 0.11s) backwards,
    riser-float 6s ease-in-out calc(1.1s + var(--i) * 0.11s) infinite;
}
/* the lit cap reads as a top surface without needing a real 3D box */
.riser-top {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--top-h);
  background: linear-gradient(90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.16));
  clip-path: polygon(0 0, 68% 0, 100% 100%, 0 100%);
}

.riser-1 { --i: 0; --face-a: #d9fff6; --face-b: #8fe3d2; }
.riser-2 { --i: 1; --face-a: #6fe3cd; --face-b: #34b7c6; }
.riser-3 { --i: 2; --face-a: #46b0f0; --face-b: #1c72d8; }
.riser-4 { --i: 3; --face-a: #3d7bf0; --face-b: #1b3fb8; }
.riser-5 { --i: 4; --face-a: #6a5cf0; --face-b: #2b2f9e; }

@keyframes riser-grow {
  from { transform: translate3d(calc(var(--i) * var(--step-w)), 0, calc(var(--i) * var(--step-d) * -1)) scaleY(0); opacity: 0; }
  to   { transform: translate3d(calc(var(--i) * var(--step-w)), 0, calc(var(--i) * var(--step-d) * -1)) scaleY(1); opacity: 1; }
}
@keyframes riser-float {
  0%, 100% { transform: translate3d(calc(var(--i) * var(--step-w)), 0, calc(var(--i) * var(--step-d) * -1)); }
  50%      { transform: translate3d(calc(var(--i) * var(--step-w)), -7px, calc(var(--i) * var(--step-d) * -1)); }
}

.hero-cta-row {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 52px; position: relative; z-index: 1;
}

.scroll-indicator {
  position: relative; z-index: 1; margin: 44px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(6px);} }

/* ==========================================================================
   DEADLINE STRIP
   ========================================================================== */
.deadline-strip { background: var(--ink-900); color: var(--white); padding: 18px 24px; }
.deadline-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px;
  font-size: 14px;
}
.deadline-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sap-blue-500); color: var(--white);
  font-size: 12.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px;
}
.deadline-date { font-weight: 800; letter-spacing: 0.01em; }
.deadline-count { font-weight: 800; color: var(--sap-mint); }
.deadline-note { font-size: 12.5px; color: rgba(255,255,255,0.55); }

/* ==========================================================================
   BENEFITS
   ========================================================================== */
.benefit-section { background: var(--sap-blue-50); }
.benefit-block {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 34px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.benefit-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 18px; margin-bottom: 30px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.benefit-idx {
  display: inline-block; font-size: 12.5px; font-weight: 800;
  color: var(--sap-blue-500); margin-bottom: 8px;
}
.benefit-idx-alt { color: var(--sap-teal); }
.benefit-head-left h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.01em; }
.benefit-head-left > p { margin-top: 6px; font-size: 14px; color: var(--ink-500); font-weight: 600; }
.benefit-amount { text-align: right; }
.amount-num {
  display: block; font-size: clamp(26px, 4vw, 40px); font-weight: 900; letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--sap-blue-600), var(--sap-purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.benefit-amount-alt .amount-num {
  background: linear-gradient(100deg, var(--sap-teal), var(--sap-blue-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.amount-sub { font-size: 13px; font-weight: 700; color: var(--ink-500); }

.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Set when a partner card is injected: keeps the row complete. */
.benefit-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bcard {
  background: var(--sap-blue-50); border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  display: flex; flex-direction: column;
}
.bcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.bcard-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }

/* Card photo. The set is sourced from stock and doesn't share a colour
   grade, so a light desaturation plus a blue veil pulls all six into the
   same family and keeps them from fighting the SAP blue around them. */
.bcard-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--sap-blue-100);
  overflow: hidden;
}
.bcard-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.82);
  transition: transform 0.5s var(--ease-out);
}
.bcard:hover .bcard-media img { transform: scale(1.04); }
.bcard-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 42, 107, 0.10) 0%, rgba(10, 42, 107, 0.30) 100%);
}
/* Images whose own palette runs warm/red need a heavier pull toward blue. */
.bcard-media--tint img { filter: saturate(0.55) hue-rotate(-12deg); }
.bcard-media--tint::after {
  background: linear-gradient(180deg, rgba(11, 95, 209, 0.34) 0%, rgba(10, 42, 107, 0.48) 100%);
}
/* Provider chip. Holds the partner's own logo rather than its name, so it
   carries the same brand recognition as the logo wall further down. */
.bcard-by {
  display: inline-flex; align-items: center; align-self: flex-start;
  background: var(--white); border: 1px solid var(--line);
  padding: 6px 11px; border-radius: 6px; margin-bottom: 14px;
  min-height: 32px;
}
.bcard-by img { height: 18px; width: auto; max-width: 96px; object-fit: contain; }
.bcard h4 { font-size: 16px; font-weight: 700; line-height: 1.4; }
.bcard-free {
  display: inline-block; align-self: flex-start; margin: 8px 0 14px;
  font-size: 17px; font-weight: 800; color: var(--sap-blue-500);
}
.bcard-free-alt { color: var(--sap-teal); font-size: 14.5px; }
.bcard ul { display: flex; flex-direction: column; gap: 8px; }
.bcard li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.4px; color: var(--ink-700); line-height: 1.5; }
.bcard li .icon { color: var(--sap-blue-500); margin-top: 3px; }
.bcard-note { margin-top: auto; padding-top: 14px; font-size: 11.2px; color: var(--ink-300); line-height: 1.5; }
.benefit-disclaimer { margin-top: 20px; text-align: center; font-size: 12px; color: var(--ink-500); }

/* ==========================================================================
   SELF CHECK
   ========================================================================== */
.check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.check-card {
  position: relative; text-align: left;
  background: var(--white); border: 1.5px solid var(--line);
  border-radius: var(--radius-md); padding: 22px 20px;
  transition: border-color 0.25s, box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out), background 0.25s;
}
.check-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.check-card.is-on { border-color: var(--sap-blue-500); background: var(--sap-blue-50); box-shadow: var(--shadow-md); }
.check-box {
  position: absolute; top: 18px; right: 18px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--ink-300);
  display: flex; align-items: center; justify-content: center;
  color: transparent; transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.check-card.is-on .check-box { background: var(--sap-blue-500); border-color: var(--sap-blue-500); color: var(--white); }
.check-icon { display: block; width: 28px; height: 28px; color: var(--sap-blue-500); stroke-width: 1.5; margin-bottom: 13px; }
.check-card h3 { font-size: 15px; font-weight: 700; line-height: 1.42; margin-bottom: 7px; padding-right: 26px; }
.check-card p { font-size: 13.2px; color: var(--ink-500); line-height: 1.55; }

.check-result {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  background: linear-gradient(120deg, var(--sap-blue-800), var(--sap-blue-950));
  border-radius: var(--radius-lg); padding: 26px 32px; color: var(--white);
  animation: pop-in 0.5s var(--ease-out);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* A class-level display value outranks the UA [hidden] rule, so the panel
   needs its own guard or it renders "0개 항목" on load. */
.check-result[hidden] { display: none; }

.check-result-text { font-size: 16px; line-height: 1.5; }
.check-result-text strong { color: var(--sap-mint); font-weight: 800; }

/* ==========================================================================
   SCOPE — connected flow
   ==========================================================================
   Replaces a grid of five cards plus three foundation blocks. Showing the
   domains as nodes on one continuous track states "하나로 연결" literally,
   and costs roughly half the height the card grid did. */
/* Sections without their own background sit in one continuous white run, so
   each owns only the gap above it. */
.target-section,
.flow-section,
.process-section { padding-top: var(--sec-gap); padding-bottom: 0; }
/* The partner wall closes the white run before the dark closing section, so
   it carries a bottom gap as well as a top one. */
.partner-section { padding-top: var(--sec-gap); padding-bottom: var(--sec-gap); }
.flow-card {
  background: linear-gradient(135deg, var(--sap-blue-900), var(--sap-blue-950) 60%);
  border-radius: var(--radius-xl);
  padding: 48px 44px 40px;
  color: var(--white);
  position: relative; overflow: hidden;
}
.flow-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 12% 0%, rgba(95, 224, 201, 0.16), transparent 55%);
}
.flow-head { position: relative; z-index: 1; text-align: center; margin-bottom: 38px; }
.flow-head h2 { font-size: clamp(22px, 3vw, 31px); font-weight: 800; line-height: 1.4; }
.flow-head .grad-text {
  background: linear-gradient(100deg, var(--sap-mint), var(--sap-blue-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.flow-track {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
/* the track line, drawn behind the nodes and stopping at the outer two */
.flow-track::before {
  content: ""; position: absolute; z-index: -1;
  top: 19px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--sap-mint), var(--sap-blue-400), var(--sap-purple));
  opacity: 0.55;
}
.flow-track li {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px;
}
.flow-node {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--white);
  background: var(--sap-blue-700);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 6px rgba(4, 18, 46, 0.85);
}
.flow-label h3 { font-size: 14.5px; font-weight: 700; line-height: 1.4; }
.flow-label span { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); font-weight: 600; }

.flow-base {
  position: relative; z-index: 1;
  margin-top: 34px;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px; padding: 14px 20px;
}
.flow-base-label { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.55); }
.flow-base-items { display: flex; gap: 10px; flex-wrap: wrap; }
.flow-base-items b {
  font-size: 13.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--white);
  background: linear-gradient(120deg, var(--sap-blue-600), var(--sap-purple));
  padding: 6px 16px; border-radius: 999px;
}

/* ==========================================================================
   PROCESS — selection steps + 12-month journey, merged
   ==========================================================================
   These used to be two full sections that repeated each other's timings.
   One section now carries just the sequence: the evaluation weights and the
   12-month breakdown informed, but didn't drive, a lead. */
.step-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.step-row li {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 22px 20px;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.step-row li:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--sap-blue-500), var(--sap-blue-700));
  color: var(--white); font-size: 12px; font-weight: 800;
}
.step-row h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 5px; }
.step-row p { font-size: 13px; color: var(--ink-500); line-height: 1.5; }
.step-row em { font-style: normal; font-weight: 700; color: var(--sap-blue-600); }


@media (max-width: 980px) {
  .step-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Steps go horizontal so four of them cost one screen, not four. */
  .step-row { grid-template-columns: 1fr; gap: 8px; }
  .step-row li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 14px 16px; }
  .step-num { margin-bottom: 0; }
  .step-row h3 { grid-column: 2; margin-bottom: 3px; font-size: 15px; }
  .step-row p { grid-column: 2; }
}

/* ==========================================================================
   PARTNERS
   ========================================================================== */
.partner-card {
  background: linear-gradient(120deg, var(--sap-blue-800), var(--sap-blue-950));
  border-radius: var(--radius-xl); padding: 44px;
  color: var(--white);
  position: relative; overflow: hidden;
}
.partner-card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(111,224,201,0.18), transparent 55%);
  pointer-events: none;
}
.partner-copy { position: relative; z-index: 1; text-align: center; max-width: 620px; margin: 0 auto 32px; }
.partner-copy h2 { font-size: clamp(22px, 2.8vw, 29px); font-weight: 800; margin: 12px 0 14px; line-height: 1.4; }
.partner-copy p { font-size: 14.2px; line-height: 1.75; color: rgba(255,255,255,0.76); }

/* Logo wall. The partner marks are all dark, full-colour artwork, so they sit
   on white tiles rather than being knocked out to white — brand colours stay
   accurate and every logo keeps the same contrast against the dark card. */
.partner-logos {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.partner-logos li {
  background: var(--white); border-radius: 12px;
  min-height: 74px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s var(--ease-out);
}
.partner-logos li:hover { transform: translateY(-3px); }
.partner-logos img {
  width: auto; height: auto;
  max-width: 100%; max-height: 34px;
  object-fit: contain;
}

/* ==========================================================================
   APPLY / FINAL CTA
   ========================================================================== */
.apply-section {
  background: linear-gradient(180deg, var(--sap-blue-950) 0%, var(--sap-blue-800) 100%);
  color: var(--white); overflow: hidden;
}
.apply-section .hero-glow-1 { top: -180px; left: 50%; transform: translateX(-50%); }
.apply-head { text-align: center; max-width: 620px; margin: 0 auto 28px; position: relative; z-index: 1; }
.apply-head h2 { font-size: clamp(24px, 3.2vw, 33px); font-weight: 800; margin: 12px 0 12px; line-height: 1.36; }
.apply-head p { color: rgba(255,255,255,0.76); font-size: 14.5px; line-height: 1.7; }

.apply-card {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* Two reassurances, side by side: they support the button without becoming
   a list the visitor has to read before acting. */
.apply-benefits {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: 100%; margin-bottom: 20px;
}
.apply-benefits li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.2px; font-weight: 600; color: var(--ink-700);
  background: var(--sap-blue-50); padding: 9px 14px; border-radius: 999px;
}
.apply-benefits .icon { color: var(--sap-blue-500); }
.btn-final { width: 100%; max-width: 380px; }
.apply-note { margin-top: 12px; font-size: 11.5px; color: var(--ink-500); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink-900); color: rgba(255,255,255,0.6); padding: 44px 24px 100px; }
.footer-inner { max-width: 1180px; margin: 0 auto; text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.logo-footer.logo-sap { height: 18px; }
.logo-footer.logo-remember { height: 12px; filter: invert(1) brightness(1.6); }
.footer-text { font-size: 12px; line-height: 1.7; max-width: 520px; margin: 0 auto; }
.footer-copy { font-size: 11.5px; margin-top: 16px; color: rgba(255,255,255,0.35); }

/* ==========================================================================
   FLOATING CTA
   ========================================================================== */
/* Countdown + action, as one floating bar. The timer sits on the dark shell
   so the button keeps its full contrast. */
.floating-cta {
  position: fixed; left: 50%; bottom: 22px;
  transform: translate(-50%, 120%);
  z-index: 800;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 8px;
  border-radius: 999px;
  background: rgba(4, 18, 46, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(3, 12, 40, 0.45);
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
  opacity: 0;
  max-width: calc(100vw - 28px);
}
.floating-cta.visible { transform: translate(-50%, 0); opacity: 1; }

.floating-timer[hidden] { display: none; }
.floating-timer {
  flex-shrink: 0;
  padding: 0 12px 0 10px;
  font-size: 14px; font-weight: 800; letter-spacing: 0.01em;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.floating-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: inherit; font-size: 15.5px; font-weight: 700;
  color: var(--white); white-space: nowrap;
  background: linear-gradient(120deg, var(--sap-blue-500), var(--sap-blue-700));
  box-shadow: 0 8px 22px rgba(0, 90, 220, 0.4);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.floating-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0, 90, 220, 0.5); }
.floating-btn .icon { transition: transform 0.25s var(--ease-out); }
.floating-btn:hover .icon { transform: translateX(3px); }

/* ==========================================================================
   LEAD MODAL
   ========================================================================== */
/* A class-level display value outranks the UA [hidden] rule, so anything that
   relies on the hidden attribute needs its own guard. */
.modal[hidden], .modal-view[hidden], .consent-terms[hidden],
.form-error[hidden] { display: none; }

.modal {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 14, 40, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-fade 0.25s var(--ease-out);
}
.modal-panel {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px 32px 30px;
  animation: modal-rise 0.32s var(--ease-out);
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } }

.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-500);
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover { background: var(--sap-blue-50); color: var(--ink-900); }

.modal-head { text-align: center; margin-bottom: 22px; padding: 0 30px; }
/* Title and subtitle are each meant to sit on one line. */
.modal-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 8px; white-space: nowrap; }
.modal-head p { font-size: 13.5px; color: var(--ink-500); line-height: 1.5; }


/* ---- Form ---- */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink-700); }
.req { color: var(--sap-blue-500); }
.opt { color: var(--ink-300); font-weight: 600; font-size: 11.5px; }

.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink-900);
  background: var(--white);
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 78px; line-height: 1.55; }
.field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  padding-right: 36px; cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: #aab6c8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sap-blue-500);
  box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.14);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #e0483b; }
.field.has-error input:focus { box-shadow: 0 0 0 3px rgba(224, 72, 59, 0.14); }

.field-error { font-size: 12px; color: #e0483b; font-weight: 600; }
.field-error:empty { display: none; }

/* ---- modal: partner strip (?partner=) ---- */
.modal-partner[hidden] { display: none; }
.modal-partner {
  display: flex; align-items: center; gap: 14px;
  background: var(--sap-blue-50);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.modal-partner-logo {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; min-height: 44px;
}
.modal-partner-logo img { height: 22px; width: auto; max-width: 110px; object-fit: contain; }
.modal-partner p { font-size: 13.4px; line-height: 1.55; color: var(--ink-700); font-weight: 600; }
.modal-partner p strong { color: var(--sap-blue-600); font-weight: 800; }

/* ---- consent: "전체 동의" master row ---- */
.consent-all {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.consent-all .consent-text strong { font-size: 14.5px; color: var(--ink-900); }

/* ---- Consent ---- */
.consent-block { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent-box {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--ink-300); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.consent input:checked + .consent-box { background: var(--sap-blue-500); border-color: var(--sap-blue-500); color: var(--white); }
.consent input:focus-visible + .consent-box { box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.2); }
.consent-text { font-size: 13.2px; color: var(--ink-700); line-height: 1.55; }
.consent-text strong { color: var(--sap-blue-600); font-weight: 700; }
.consent-toggle {
  font-size: 12.2px; color: var(--ink-500); text-decoration: underline;
  padding: 0 0 0 4px; font-weight: 600;
}
.consent-toggle:hover { color: var(--sap-blue-600); }
.consent-row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.consent-row .consent { flex: 1; min-width: 0; }
.consent-terms {
  background: var(--sap-blue-50); border-radius: 10px;
  padding: 14px 16px; font-size: 12.2px; color: var(--ink-500); line-height: 1.65;
}
.consent-terms p + p { margin-top: 6px; }
.consent-terms b { color: var(--ink-700); font-weight: 700; }

.modal-timer[hidden] { display: none; }
/* Sits at the top of the dialog, right under the title. Deliberately not a
   filled card: the partner strip below it already is one, and two stacked
   rounded boxes read as clutter. Hairline rules plus a live dot separate it
   instead. */
.modal-timer {
  margin: 0 0 18px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13.5px; font-weight: 700; color: var(--sap-blue-600);
  font-variant-numeric: tabular-nums;
}
.modal-timer::before {
  content: ""; flex-shrink: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: #e0483b;
  animation: timer-pulse 1.7s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.form-error {
  margin-top: 14px; background: #fdeceb; border: 1px solid #f6c9c4; color: #b3352a;
  border-radius: 10px; padding: 11px 14px; font-size: 13px; font-weight: 600;
}

/* ---- Submit ---- */
.btn-submit { width: 100%; margin-top: 20px; }
.btn-spinner {
  display: none; width: 17px; height: 17px;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: var(--white);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-submit.is-loading { pointer-events: none; opacity: 0.85; }
.btn-submit.is-loading .btn-spinner { display: block; }

/* ---- Success ---- */
.modal-success { text-align: center; padding: 12px 8px 4px; }
.success-mark {
  width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sap-blue-500), var(--sap-blue-700));
  display: flex; align-items: center; justify-content: center;
  animation: pop-in 0.45s var(--ease-out);
}
.success-mark .icon {
  width: 30px; height: 30px; color: var(--white);
  stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.modal-success h2 { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.modal-success > p { font-size: 14.5px; color: var(--ink-500); line-height: 1.7; }
.modal-success > p strong { color: var(--sap-blue-600); font-weight: 700; }
.success-next {
  margin: 24px 0; display: flex; flex-direction: column; gap: 9px;
  background: var(--sap-blue-50); border-radius: var(--radius-md); padding: 18px;
}
.success-next li {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; color: var(--ink-700); font-weight: 600; text-align: left;
}
.success-next span {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sap-blue-500); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800;
}

/* Page must not scroll behind the modal, and the floating CTA must not sit
   above the backdrop. */
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body.modal-open .floating-cta { opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-panel {
    max-width: none; border-radius: 20px 20px 0 0;
    max-height: 92svh; padding: 28px 20px 24px;
    animation: sheet-up 0.32s var(--ease-out);
  }
  @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
  .modal-head { padding: 0 26px; margin-bottom: 18px; }
  .modal-head h2 { font-size: 17.5px; }
  .modal-head p { font-size: 12.5px; }
  .field-grid { grid-template-columns: 1fr; gap: 12px; }
  /* 16px keeps iOS Safari from zooming the viewport on focus */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Four across only when there's room for it; below that the cards get too
   narrow and every bullet wraps, so the set folds to 2x2 instead. */
@media (min-width: 981px) and (max-width: 1199px) {
  .benefit-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 1080px) {
}

/* Stacked hero: shrink the scene box and its depth steps together so the
   cascade keeps the same proportions. */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 48px; }
  .hero-title { justify-content: center; }
  .hero-highlights { justify-content: center; }

  .hero-visual {
    --scene-w: 340px; --scene-h: 300px; --scene-perspective: 900px;
    --step-w: 60px; --step-d: 21px; --step-rise: 27px;
    --base-h: 38px; --top-h: 12px;
  }

  .flow-card { padding: 40px 28px 32px; }
  .flow-head { margin-bottom: 30px; }
  /* Stacked: the track turns into a rail running down the left, which keeps
     the "connected" reading without five columns squeezing the labels. */
  .flow-track { grid-template-columns: 1fr; gap: 0; }
  .flow-track::before {
    top: 18px; bottom: 18px; left: 18px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--sap-mint), var(--sap-blue-400), var(--sap-purple));
  }
  .flow-track li { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 9px 0; }
  .flow-label h3 { font-size: 15px; }
  .benefit-grid, .benefit-grid-4 { grid-template-columns: 1fr; gap: 18px; }
  .benefit-block { padding: 30px 24px; }
  /* One card per row from here down, so a 16:9 banner would dominate
     the card. Crop shorter as soon as the grid collapses. */
  .bcard-media { aspect-ratio: 2.6 / 1; }
  .check-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-card { padding: 40px 28px; }
  .partner-logos { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  :root { --sec-pad: 64px; --sec-gap: 64px; }
  .section { padding-left: 18px; padding-right: 18px; }
  .section-head { margin-bottom: 32px; }
  .header-inner { padding: 0 14px; gap: 8px; }
  .brand-lockup { gap: 6px; }
  .logo-remember { height: 13px; }
  .header-badge { font-size: 11px; padding: 6px 10px; gap: 4px; }

  .hero { padding: 34px 18px 28px; }
  .hero-inner { gap: 26px; }
  .eyebrow { margin-bottom: 12px; font-size: 13px; }
  .hero-lead { margin-top: 14px; }
  .hero-cta-row { margin-top: 26px; }
  .scroll-indicator { margin-top: 20px; }
  .hero-highlights { margin-top: 22px; gap: 8px; width: 100%; max-width: none; }
  .hero-highlights li { padding: 13px 8px; gap: 6px; }
  .hl-label { font-size: 11px; }
  .hl-value { font-size: 12.5px; gap: 4px; }
  .hl-value em { font-size: 19px; }
  .hero-greeting { font-size: 13.5px; margin-top: 22px; }

  .hero-visual {
    --scene-w: 290px; --scene-h: 236px; --scene-perspective: 780px;
    --step-w: 50px; --step-d: 17px; --step-rise: 22px;
    --base-h: 32px; --top-h: 10px;
  }

  .br-desktop { display: none; }
  .br-mobile { display: inline; }

  .benefit-head { flex-direction: column; align-items: flex-start; }
  .benefit-amount { text-align: left; }
  /* Four tall cards become four scannable rows; the whole qualifier fits
     on one screen instead of taking most of a scroll. */
  .check-grid { grid-template-columns: 1fr; gap: 8px; }
  .check-card {
    display: grid;
    grid-template-columns: 28px 1fr 22px;
    column-gap: 12px; row-gap: 2px;
    align-items: center; padding: 14px 16px;
  }
  /* every child needs an explicit cell, or the DOM order (box, icon, h3, p)
     drops the title into the 22px checkbox column */
  .check-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 26px; height: 26px; margin-bottom: 0; }
  .check-card h3 { grid-column: 2; grid-row: 1; font-size: 14.5px; margin-bottom: 0; padding-right: 0; }
  .check-card p { grid-column: 2; grid-row: 2; font-size: 12.5px; }
  .check-box { position: static; grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 22px; height: 22px; }
  .check-result { padding: 22px 20px; flex-direction: column; text-align: center; }
  .check-result .btn { width: 100%; }
  .flow-card { padding: 32px 20px 26px; }
  .flow-base { flex-direction: column; gap: 10px; padding: 14px 16px; }
  .flow-node { width: 34px; height: 34px; font-size: 11.5px; }
  .flow-track::before { top: 16px; bottom: 16px; left: 16px; }
  /* Benefit photos are the single biggest block of mobile scroll (six 16:9
     banners). A shorter crop keeps the photo's job — making the offer feel
     real — at roughly half the height. */
  .bcard-media { aspect-ratio: 2.4 / 1; }
  .bcard-body { padding: 18px 18px 20px; }
  .bcard ul { gap: 7px; }
  .bcard-free { margin: 6px 0 12px; }

  .partner-logos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* Five logos in two columns leaves the last one orphaned; let it span
     instead so the wall reads as finished rather than cut off. */
  .partner-logos li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .partner-logos li { min-height: 64px; padding: 12px 14px; }
  .partner-logos img { max-height: 28px; }
  .partner-copy { margin-bottom: 30px; }
  .partner-card { padding: 32px 22px; }
  .apply-card { padding: 24px 18px 20px; }
  .apply-benefits { flex-direction: column; align-items: stretch; }
  .apply-benefits li { justify-content: center; }
  .deadline-inner { font-size: 13px; gap: 8px 12px; }
}

/* Short phones (iPhone SE class): the hero must still land its CTA above the
   fold, so compress the scene and drop the scroll hint rather than letting the
   button fall below the viewport. */
@media (max-width: 700px) and (max-height: 730px) {
  .hero { padding: 24px 18px 20px; }
  .hero-inner { gap: 16px; }
  .hero-lead { margin-top: 10px; }
  .hero-highlights { margin-top: 14px; }
  .hero-cta-row { margin-top: 20px; }
  .scroll-indicator { display: none; }
  .hero-visual {
    --scene-w: 250px; --scene-h: 186px; --scene-perspective: 700px;
    --step-w: 42px; --step-d: 14px; --step-rise: 17px;
    --base-h: 26px; --top-h: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   MOBILE TYPE SCALE (last, so it settles every earlier mobile override)
   ========================================================================== */
@media (max-width: 640px) {
  /* ---------------------------------------------------------------------
     MOBILE TYPE SCALE
     Built on the guide's floor: 13px for captions, 16px for everything else,
     stepping up by ~1.25×  →  13 / 16 / 20 / 22 / 36.
     Titles run at 120% leading, body at 150–160%.
     ------------------------------------------------------------------ */

  /* — hero — */
  .hero-title { font-size: 36px; line-height: 1.2; }
  .hero-lead { font-size: 17px; line-height: 1.4; }
  .eyebrow { font-size: 14px; }
  .hl-label { font-size: 13px; }
  .hl-value { font-size: 15px; }
  .hl-value em { font-size: 22px; }
  .hero-greeting { font-size: 15px; line-height: 1.55; }
  /* CTA sits one step under the hero sub-heading */
  .hero-cta-row .btn-lg { font-size: 16px; }
  .scroll-indicator { font-size: 13px; }

  /* — header / deadline strip — */
  .header-badge { font-size: 13px; }
  .deadline-inner { font-size: 15px; }
  .deadline-tag { font-size: 13px; }
  .deadline-note { font-size: 13px; }

  /* — shared section furniture — */
  .tag { font-size: 13px; }
  .section-head h2 { font-size: 22px; line-height: 1.2; }
  .section-desc { font-size: 15px; line-height: 1.6; }

  /* — benefits — */
  .benefit-idx { font-size: 13px; }
  .benefit-head-left h3 { font-size: 22px; line-height: 1.2; }
  .benefit-head-left > p { font-size: 15px; }
  .amount-num { font-size: 28px; line-height: 1.2; }
  .amount-sub { font-size: 13px; }
  .bcard h4 { font-size: 17px; line-height: 1.35; }
  .bcard-free { font-size: 17px; }
  .bcard-free-alt { font-size: 16px; }
  .bcard li { font-size: 15px; line-height: 1.55; }
  .bcard-note { font-size: 13px; line-height: 1.5; }
  .benefit-disclaimer { font-size: 13px; }

  /* — self check — */
  .check-card h3 { font-size: 17px; line-height: 1.3; }
  .check-card p { font-size: 15px; line-height: 1.55; }
  .check-result-text { font-size: 16px; line-height: 1.55; }
  .check-result .btn { font-size: 16px; }

  /* — scope flow — */
  .flow-head h2 { font-size: 22px; line-height: 1.2; }
  .flow-node { font-size: 13px; }
  .flow-label h3 { font-size: 17px; line-height: 1.35; }
  .flow-label span { font-size: 13px; }
  .flow-base-label { font-size: 13px; }
  .flow-base-items b { font-size: 15px; }

  /* — process — */
  .step-row h3 { font-size: 17px; line-height: 1.3; }
  .step-row p { font-size: 15px; line-height: 1.55; }
  .step-num { font-size: 13px; }
  .journey-note { font-size: 13px; line-height: 1.55; }

  /* — partners — */
  .partner-copy h2 { font-size: 22px; line-height: 1.2; }
  .partner-copy p { font-size: 15px; line-height: 1.6; }

  /* — closing CTA — */
  .apply-head h2 { font-size: 22px; line-height: 1.2; }
  .apply-head p { font-size: 15px; line-height: 1.6; }
  .apply-benefits li { font-size: 15px; }
  .btn-final { font-size: 16px; }
  .apply-note { font-size: 13px; line-height: 1.55; }

  /* — footer — */
  .footer-text { font-size: 13px; line-height: 1.6; }
  .footer-copy { font-size: 13px; }

  /* — floating bar —
     Stretches to the screen edges instead of hugging its content: on a phone
     this is the primary action, so it gets a full-width bar and a tap target
     comfortably over the 48px minimum. */
  .floating-cta {
    left: 16px; right: 16px; width: auto; max-width: none;
    transform: translateY(130%);
    gap: 8px; padding: 8px; bottom: 16px;
  }
  .floating-cta.visible { transform: translateY(0); }
  .floating-timer { font-size: 15px; padding: 0 4px 0 10px; }
  .floating-btn {
    flex: 1; justify-content: center;
    padding: 17px 14px; font-size: 17px; gap: 8px;
  }

  /* — modal — */
  .modal-head { padding: 0; }
  .modal-head h2 { font-size: 20px; line-height: 1.2; }
  .modal-head p { font-size: 15px; line-height: 1.55; }
  .modal-timer { font-size: 15px; }
  .modal-partner p { font-size: 15px; line-height: 1.55; }
  .field label { font-size: 15px; }
  .opt { font-size: 13px; }
  .field-error { font-size: 13px; }
  .consent-all .consent-text strong { font-size: 16px; }
  .consent-text { font-size: 15px; line-height: 1.5; }
  .consent-toggle { font-size: 14px; }
  .consent-terms { font-size: 13px; line-height: 1.6; }
  .form-error { font-size: 15px; }
  .btn-submit { font-size: 16px; }
  .modal-success h2 { font-size: 22px; line-height: 1.2; }
  .modal-success > p { font-size: 16px; line-height: 1.6; }
  .success-next li { font-size: 15px; }
  .success-next span { font-size: 13px; }
  .modal-success .btn { font-size: 16px; }
}

/* ==========================================================================
   MID-RANGE — 641px ~ 980px (태블릿 가로, 소형 노트북, 창 반쪽)
   ==========================================================================
   원본 CSS는 980px에서 곧바로 1컬럼(모바일 레이아웃)으로 떨어진다. 그래서
   700~980px 구간에서 카드 한 장이 폭을 다 차지하고 배너 이미지가 300px 넘게
   커져, 사업 혜택 한 섹션을 보는 데 스크롤이 과하게 길어졌다.
   이 구간만 2단으로 되돌린다. 981px 이상과 640px 이하 규칙은 건드리지 않는다.
   ------------------------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 980px) {

  /* 카드 3장짜리 그리드. 2단으로 두면 마지막 한 장이 혼자 남으므로,
     남는 칸까지 가로로 확장해 채운다. 원작자가 4장일 때 benefit-grid-4 를
     따로 만든 것과 같은 의도(고아 카드를 만들지 않는다)를 3장에도 적용. */
  .benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .benefit-grid > .bcard:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* 4장은 2×2 로 딱 떨어진다. 981~1199px 규칙을 이 구간까지 내린다. */
  .benefit-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* 2단으로 돌아왔으니 원래의 16:9 배너 비율을 되살린다.
     (max-width:980px 의 2.6/1 크롭은 1단일 때를 전제한 값이라 여기선 과하다) */
  .bcard-media { aspect-ratio: 16 / 9; }

  /* 가로로 확장된 마지막 한 장만 얕게 잘라 높이가 튀지 않게 한다. */
  .benefit-grid > .bcard:last-child:nth-child(odd) .bcard-media { aspect-ratio: 3.4 / 1; }

  /* 파트너 로고는 5개다. 3단에 넣으면 3 + 2 로 끊겨 마지막 줄이 비어 보인다.
     로고 자체가 작아 한 줄에 들어간다. */
  .partner-logos { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .partner-logos li { padding: 14px 10px; }
}

/* --------------------------------------------------------------------------
   HERO — 스택 레이아웃일 때의 정렬·여백
   --------------------------------------------------------------------------
   980px 이하에서 히어로는 1단으로 쌓이고 .hero-inner 가 text-align:center 가
   된다. 그런데 .hero-highlights 는 max-width:470px 라 컨테이너보다 좁고,
   블록 요소여서 가운데로 오지 않고 왼쪽에 붙는다. (기존의 justify-content:
   center 는 470px 상자 "안쪽"에만 적용돼 화면상 아무 효과가 없다.)
   제목·부제·CTA 는 가운데인데 통계 카드 두 장만 왼쪽에 붙어 어긋나 보였다.
   ------------------------------------------------------------------------ */
@media (max-width: 980px) {
  .hero-highlights { margin-left: auto; margin-right: auto; }
}

/* --------------------------------------------------------------------------
   기존 980px 규칙은 비주얼을 340×300 으로 줄인다. 이건 폭이 좁은 휴대폰을
   전제한 값인데, 641~980px 구간은 1단으로 쌓이면서 오히려 가로 여유가
   생기므로 축소할 이유가 없다. 작은 그래픽이 화면 높이만큼의 히어로 안에
   놓이면서 위아래가 비어 보였다. 데스크톱 크기로 되돌린다.
   ------------------------------------------------------------------------ */
@media (min-width: 641px) and (max-width: 980px) {
  .hero-visual {
    --scene-w: 430px; --scene-h: 380px; --scene-perspective: 1150px;
    --step-w: 74px; --step-d: 26px; --step-rise: 33px;
    --base-h: 46px; --top-h: 14px;
  }
  /* 세로로 쌓인 만큼 단 사이는 조금 좁혀 히어로가 과하게 길어지지 않게 한다. */
  .hero-inner { gap: 36px; }
}

/* --------------------------------------------------------------------------
   지원 범위 — 세로 레일의 폭
   --------------------------------------------------------------------------
   980px 이하에서 5단 가로 트랙은 세로 레일로 바뀐다(원작자 의도: 다섯 칸으로
   쪼개 라벨이 눌리는 대신 "연결된 흐름"을 유지). 그런데 레일이 카드 폭을
   그대로 다 쓰다 보니, 항목 하나가 696px 폭인데 내용은 왼쪽 120px 남짓만
   차지해 오른쪽이 크게 비어 보였다. 레일 자체의 폭을 내용에 맞춰 묶고
   가운데로 보낸다. (420px 보다 좁은 화면에서는 아무 영향이 없다.)
   ------------------------------------------------------------------------ */
@media (max-width: 980px) {
  .flow-track { max-width: 420px; margin-left: auto; margin-right: auto; }
}