/**
 * THE PLAN Preview — design system (Wave 3, Issue #65 comment 5438927199 §A).
 * Tokens + reusable component classes, first-principles conversion design
 * (APPROVED REF/BMK used: none — REF-006~009 are REFERENCE only, not
 * APPROVED, see docs/decisions/DECISION-019-wave3-conversion-ui-ux.md).
 *
 * Old custom-property names (--blue/--blue-dark/--ink/--gray/--line/--bg)
 * are kept as aliases onto the new token scale below so every existing
 * inline `style="color:var(--gray)"` usage scattered across the JS render
 * functions (app.js/course-page.js/campus-page.js/...) keeps working
 * unchanged — Wave 3 extends the token system, it does not rename it.
 */
/* ---------------------------------------------------------------------------
 * DESIGN-AUTHENTICITY-001C (Issue #121, PM comment 5737649939) — Pretendard is
 * DELIVERED, not merely declared. Before this block `--font-sans` named
 * 'Pretendard' while the artifact shipped no font file, so the approved visual
 * system only appeared on machines that happened to have it installed locally.
 *
 * Source:  https://github.com/orioncactus/pretendard release v1.3.9
 *          (Pretendard-1.3.9.zip, web/static/woff2-subset/)
 * License: SIL Open Font License 1.1 — verbatim copy shipped at fonts/LICENSE.txt
 * Weights: 400 / 700 / 800 only. CSS font matching maps the site's other
 *          declared weights onto them (500 -> 400, 600 -> 700, 900 -> 800);
 *          see docs/design/FONT_DELIVERY.md for the inventory and byte budget.
 * No CDN, no package install, no build-time font step: the prebuilt subset
 * files are committed and copied verbatim by scripts/build-release.js.
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Pretendard-Regular.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Pretendard-Bold.subset.woff2') format('woff2');
}
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Pretendard-ExtraBold.subset.woff2') format('woff2');
}

:root {
  /* Brand + semantic color scale */
  --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-500: #2563eb; --blue-600: #1d4ed8; --blue-700: #1e40af;
  --ink-900: #0f172a; --ink-700: #334155; --ink-500: #64748b; --ink-300: #cbd5e1; --ink-100: #f1f5f9;
  --amber-50: #fff7ed; --amber-100: #fef3c7; --amber-600: #b45309; --amber-700: #92400e;
  --green-50: #f0fdf4; --green-100: #dcfce7; --green-600: #15803d;
  --red-50: #fef2f2; --red-100: #fee2e2; --red-600: #b91c1c;
  --surface: #ffffff; --surface-alt: #f8fafc; --line-c: #e2e8f0;

  /* Back-compat aliases — every pre-Wave-3 rule keeps working unchanged */
  --blue: var(--blue-500); --blue-dark: var(--blue-600); --ink: var(--ink-900);
  --gray: var(--ink-500); --line: var(--line-c); --bg: var(--surface-alt);

  /* Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  /* Radius / elevation */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  /* Type */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  /* Layout */
  --container: 1120px;
  --header-h: 60px;
  /* APPLE-DESIGN-002 (Issue #103 Scope C): the mobile sticky-CTA bar's
     REAL height, republished by nav-menu.js so the body reservation stays
     correct at any text size. 68px is the historical fallback. */
  --sticky-h: 68px;
  --transition: 160ms ease;

  /* DESIGN-ENG-002 (Issue #100 §2B) — motion tokens.
     These EXTEND the token block above; they do not fork a parallel system,
     and `--transition` stays exactly as it was because it is already correct
     for the hover/colour transitions that make up most current usage. */
  --ease-out:      cubic-bezier(.23, 1, .32, 1);  /* enter / exit — starts fast */
  --ease-standard: ease;                          /* hover + colour */
  --dur-press:     130ms;   /* pointer-down acknowledgement */
  --dur-ui:        180ms;   /* small state changes          */
  --dur-panel:     240ms;   /* nav, tray, result panel      */
  --press-scale:   .97;     /* subtle — never a bounce      */
  --tap-min:       44px;    /* floor; phone/Kakao keep 48px */
}

/* DESIGN-ENG-002 (Issue #100 §2C) — reduced motion is GENTLER, not ABSENT.
   The previous blanket rule collapsed every transition to .001ms, which also
   destroyed the colour/opacity feedback that helps a user understand what just
   happened. Reduced motion should remove MOVEMENT, not comprehension.
   So: movement (transform) and any looping animation are cancelled; colour,
   background, border, opacity and shadow transitions are kept, merely shortened. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    /* movement is removed outright */
    transition-property: color, background-color, border-color, box-shadow, opacity, outline-color !important;
    transition-duration: 120ms !important;
  }
  /* No element may rely on a transform to communicate state under reduced motion. */
  .course-list-card:hover, .campus-card:hover, .category-card:hover, .opening-card:hover,
  .commercial-quick-action:hover { transform: none !important; }
  .btn:active, .pill-btn:active, .hero-cta:active, .commercial-quick-action:active,
  .search-box button:active, .finder-input-row button:active,
  #consultation button[type=submit]:active, .quiz-box button.opt:active,
  .contact-campus-tel:active, .hero-discovery-list a:active {
    transform: none !important;      /* keep the colour shift below as the signal */
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: #fff;
  padding-bottom: 68px; /* space for mobile sticky CTA */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; display: block; }

/* Focus visibility — every interactive element gets a real, consistent ring */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: var(--r-sm);
}
.skip-link {
  position: absolute; left: 12px; top: -48px; background: var(--ink-900); color: #fff;
  padding: 10px 16px; border-radius: var(--r-sm); z-index: 100; transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

/* Header / navigation */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line-c);
}
header.site .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 12px 20px; min-height: var(--header-h); }
header.site .logo { font-weight: 800; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; flex: 0 0 auto; }
header.site .logo a { display: block; }
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--line-c); border-radius: var(--r-sm); background: #fff; cursor: pointer; flex: 0 0 auto;
}
.nav-toggle .bars { position: relative; width: 18px; height: 2px; background: var(--ink-900); }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink-900); transition: transform var(--transition); }
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }
header.site nav#main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
header.site nav#main-nav a,
header.site nav#main-nav .nav-group-toggle {
  font-size: 14px; font-weight: 600; color: var(--ink-700); white-space: nowrap;
  padding: 8px 10px; border-radius: var(--r-sm); transition: background var(--transition), color var(--transition);
}
header.site nav#main-nav a:hover { background: var(--ink-100); color: var(--ink-900); }
header.site nav#main-nav a.cta { background: var(--blue-500); color: #fff; padding: 9px 16px; margin-left: 4px; }
header.site nav#main-nav a.cta:hover { background: var(--blue-600); }

/* ==================================================================== *
 * MKT-BRAND-003 Scope C (Issue #106 §3C) — compressed primary navigation
 *
 * Twelve co-equal top-level destinations read as a portal directory. They
 * are now seven learner tasks plus one de-emphasised utility link, with the
 * lower-frequency routes grouped behind three disclosures.
 *
 * The pattern is a real BUTTON + `aria-expanded` + `aria-controls` +
 * `[hidden]`, never `:hover`. #106 forbids a hover-only information
 * architecture, and a hover menu is unreachable by keyboard and unusable by
 * touch. Nothing here opens on hover; `nav-menu.js` owns every state change.
 * ==================================================================== */
.nav-group { position: relative; display: flex; }
.nav-group-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav-group-toggle::after {
  content: ''; width: 5px; height: 5px; flex: 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
}
.nav-group-toggle:hover { background: var(--ink-100); color: var(--ink-900); }
.nav-group-toggle[aria-expanded="true"] { background: var(--ink-100); color: var(--ink-900); }
.nav-group-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
/* `[hidden]` alone would lose to the display below — the UA rule is weaker
   than a class selector — so the closed state is declared explicitly. */
.nav-group-panel[hidden] { display: none; }
.nav-group-panel {
  display: grid; gap: 2px;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 190px; max-width: min(280px, calc(100vw - 24px));
  padding: 6px; background: #fff;
  border: 1px solid var(--line-c); border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
header.site nav#main-nav .nav-group-panel a {
  white-space: normal; word-break: keep-all; font-weight: 600;
  display: flex; align-items: center; min-height: var(--tap-min);
}
/* The utility tier must visibly defer to the seven primary tasks. */
header.site nav#main-nav .nav-utility {
  font-size: 13px; font-weight: 600; color: var(--ink-500);
  margin-left: 2px;
}
header.site nav#main-nav .nav-utility:hover { color: var(--ink-900); }

/* Hero */
.hero { background: linear-gradient(180deg, var(--blue-50) 0%, #fff 70%); padding: 56px 0 44px; }
.hero .eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--blue-600); background: var(--blue-100); padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 14px; }
.hero h1 { font-size: 30px; line-height: 1.25; margin: 0 0 12px; letter-spacing: -.01em; }
/* DESIGN-AUTHENTICITY-001C (Issue #121): this legacy hero paragraph style
   must not reach into the PO-selected composition. `.hero p` (0,1,1) was
   outranking `.sc-kicker` / `.sc-hero-sub` / `.sc-bridge-line` (0,1,0),
   repainting them #64748b/15.5px and producing three AA failures. The
   `sc-` prefix is the composition's ownership boundary, so the legacy rule
   now declines those elements instead of being overridden by !important. */
.hero p:not([class^="sc-"]) { color: var(--ink-500); font-size: 15.5px; margin: 0 0 26px; }
.search-box { display: flex; gap: 8px; background: #fff; border: 1px solid var(--line-c); box-shadow: var(--shadow-sm); border-radius: var(--r-md); padding: 8px; max-width: 560px; }
.search-box:focus-within { outline: 2px solid var(--blue-500); outline-offset: 2px; border-color: var(--blue-500); }
.search-box input { flex: 1; border: none; outline: none; padding: 10px; font-size: 15px; background: transparent; }
.search-box button { background: var(--blue-500); color: #fff; border: none; border-radius: var(--r-sm); padding: 10px 20px; font-weight: 700; cursor: pointer; transition: background var(--transition); }
.search-box button:hover { background: var(--blue-600); }
.search-results { display: none; max-width: 560px; margin-top: 12px; }
.search-results.show { display: block; }
.search-results .search-hint { font-size: 13px; color: var(--ink-500); margin: 6px 0; }
.search-results .search-empty { font-size: 13px; color: var(--ink-500); background: #fff; border: 1px solid var(--line-c); border-radius: var(--r-md); padding: 14px; }
.search-result-card { background: #fff; border: 1px solid var(--line-c); border-radius: var(--r-md); padding: 14px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.search-result-card h4 { margin: 6px 0 4px; font-size: 14.5px; }
.search-result-card .meta { font-size: 12px; color: var(--ink-500); margin: 0 0 10px; }
.search-result-card .select-course { font-size: 13px; padding: 7px 14px; }
.hero .quick-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.pill-btn {
  border: 1px solid var(--blue-500); color: var(--blue-600); background: #fff;
  padding: 9px 16px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pill-btn:hover { background: var(--blue-500); color: #fff; }
.pill-btn.primary-action { background: var(--blue-500); color: #fff; }
.pill-btn.primary-action:hover { background: var(--blue-600); }

/* Buttons (generic) */
.btn { display: inline-block; font-weight: 700; font-size: 14.5px; padding: 12px 22px; border-radius: var(--r-md); border: none; cursor: pointer; transition: background var(--transition), transform var(--transition); }
.btn-primary { background: var(--blue-500); color: #fff; }
.btn-primary:hover { background: var(--blue-600); }
.btn-block { display: block; width: 100%; text-align: center; }

/* Section rhythm */
section { padding: 52px 0; }
section + section { border-top: 1px solid var(--line-c); }
.section-head { margin: 0 0 24px; }
section h2 { font-size: 21px; margin: 0 0 6px; letter-spacing: -.01em; }
section .lead { color: var(--ink-500); font-size: 14.5px; margin: 0 0 22px; max-width: 640px; }
.section-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--blue-600); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }

/* DESIGN-AUTHENTICITY-001F (Issue #121 `5739186063`): informative bilingual
   section labels. The English word is the visual rhythm the reference sites use;
   it is never the only thing a label says. */
.section-tag .tag-en { letter-spacing: .14em; font-weight: 800; opacity: .85; margin-right: 6px; }

/* Cards — shared base look for list/detail cards */
.course-list-card, .campus-list-card, .campus-card, .category-card, .opening-card, .search-result-card, .cert-chip {
  background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition);
}
.course-list-card:hover, .campus-card:hover, .category-card:hover, .opening-card:hover {
  /* DESIGN-ENG-002 Rule 7: movement moved into the (hover: hover) and
     (pointer: fine) gate near the end of this file. Touch synthesises
     :hover on tap, so the lift fired as a false positive on every press. */
  box-shadow: var(--shadow-md);
}

/* Openings */
.opening-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.opening-card { border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: var(--sp-4); }
.opening-card .badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill); background: var(--red-100); color: var(--red-600); margin-bottom: 8px; }
.opening-card .badge.recruiting { background: var(--green-100); color: var(--green-600); }
.fixture-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: var(--amber-100); color: var(--amber-700); margin-left: 6px; vertical-align: middle; }
/* Wave 2 operational-status truth correction (Issue #64 comment 5433362709): matches the
   legacy courses.html@559f8b83 ".predict" banner's own color language (#fff1e6/#ffd3ad/#b45309)
   so the qualifier reads as "this is the source's own published-plan notice", not a new claim. */
.status-qualifier-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: #fff1e6; color: #b45309; margin-left: 6px; vertical-align: middle; }
.subset-note { font-size: 12.5px; color: var(--ink-500); margin: 0 0 12px; }
/* Wave 2 opening/schedule truth correction (Issue #64 comment 5433802084): an
   unavoidable, opening-specific label — distinct from the generic .fixture-badge —
   stating the schedule/status/date/price shown are not real operational data.
   Wave 3 (Issue #65): kept as its own visually distinct block (not merged into
   the generic fixture badge) so it survives redesign as loudly as before —
   see docs/decisions/DECISION-019-wave3-conversion-ui-ux.md §truth preservation. */
.opening-not-real { display: block; font-size: 12.5px; font-weight: 800; color: var(--amber-700); background: var(--amber-100); padding: 6px 10px; border-radius: var(--r-sm); margin: 8px 0 10px; }

/* Wave 6 (Issue #69 §C) — the /privacy page's own "not yet PO/legal-approved"
   notice. Distinct from .opening-not-real (schedule/data truth) — this marks
   a legal-approval-pending state on an otherwise faithfully-migrated policy
   text, so it must stay visually loud and never be mistaken for a generic
   fixture/preview banner. See docs/product/PRIVACY_LEGAL_CONTINUITY.md. */
.legal-review-notice { display: block; font-size: 13.5px; font-weight: 700; color: var(--amber-700); background: var(--amber-100); border: 1px solid var(--amber-600); padding: 14px 16px; border-radius: var(--r-md); margin: 0 0 24px; line-height: 1.6; }
.legal-review-notice strong { display: block; margin-bottom: 4px; font-size: 14.5px; }

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: var(--ink-500); padding: 16px 0 0; }
.breadcrumb a { color: var(--ink-500); border-radius: var(--r-sm); }
.breadcrumb a:hover { color: var(--blue-600); text-decoration: underline; }
.breadcrumb .crumb-sep { margin: 0 6px; color: var(--ink-300); }
.breadcrumb [aria-current="page"] { color: var(--ink-900); font-weight: 600; }

/* Category tabs (course discovery) */
.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 24px; }
.category-tab { border: 1px solid var(--line-c); background: #fff; color: var(--ink-900); padding: 9px 18px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.category-tab:hover { border-color: var(--blue-500); }
.category-tab.active { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }

/* Course/campus list & detail cards */
#course-list, .course-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); align-items: start; }
.course-list-card, .campus-list-card { border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: 20px; margin-bottom: 0; }
.course-list-card h3 { margin: 0 0 6px; font-size: 17.5px; line-height: 1.4; }
.course-list-card .cat-tag { font-size: 11px; color: var(--blue-600); font-weight: 700; margin-bottom: 6px; display: inline-block; }
.detail-hero { padding: 32px 0 8px; }
.detail-hero h1 { font-size: 25px; margin: 10px 0 8px; line-height: 1.35; }
.detail-hero .cat-tag { font-size: 12px; color: var(--blue-600); font-weight: 700; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 18px 0; }
.cert-chip { border: 1px solid var(--line-c); border-radius: var(--r-md); padding: 12px 14px; }
.cert-chip .cn { font-size: 13px; font-weight: 700; }
.cert-chip .cd { font-size: 12px; color: var(--ink-500); }
.campus-hero-meta { font-size: 14.5px; color: var(--ink-500); line-height: 2; margin: 12px 0 20px; }
.campus-hero-meta a { color: var(--blue-600); font-weight: 600; }
.detail-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 26px; }
.filter-row select { border: 1px solid var(--line-c); border-radius: var(--r-sm); padding: 9px 11px; font-size: 13.5px; background: #fff; }
.no-result-box { border: 1px dashed var(--line-c); border-radius: var(--r-lg); padding: 26px; text-align: center; color: var(--ink-500); font-size: 14px; }
.opening-card h3 { font-size: 16.5px; margin: 0 0 6px; line-height: 1.4; }
.opening-card .meta { font-size: 13px; color: var(--ink-500); line-height: 1.7; }
.opening-card .apply { margin-top: 12px; display: inline-block; font-size: 13px; font-weight: 700; color: var(--blue-600); }

/* Category grid */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.category-card { border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: 20px 16px; text-align: center; position: relative; }
.category-card h3 { font-size: 14.5px; margin: 8px 0 4px; }
.category-card p { font-size: 12px; color: var(--ink-500); margin: 0; }
.category-card .go { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--blue-600); }

/* Why THE PLAN / funding */
.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.why-card { padding: 18px; border: 1px solid var(--line-c); border-radius: var(--r-lg); background: var(--surface-alt); }
.why-card .num { font-size: 22px; font-weight: 800; color: var(--blue-600); }
.why-card p { font-size: 13px; color: var(--ink-500); margin: 6px 0 0; }

/* Campus */
.campus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.campus-card { border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: 18px; }
.campus-card h3 { margin: 0 0 6px; font-size: 16.5px; }
.campus-card .meta { font-size: 13px; color: var(--ink-500); line-height: 1.7; }

/* Reviews */
.review-list { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.review-card { min-width: 250px; scroll-snap-align: start; border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: 18px; background: var(--surface-alt); }
.review-card .stars { color: #f59e0b; font-size: 13px; margin-bottom: 8px; }
.review-card p { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; }
.review-card .who { font-size: 12px; color: var(--ink-500); }

/* Director / THE MAIN secondary trust layer (Wave 3, Issue #65 §H) */
.trust-block { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.trust-block .photo { width: 96px; height: 96px; border-radius: var(--r-lg); object-fit: cover; flex: 0 0 auto; box-shadow: var(--shadow-sm); }
.trust-block .body { flex: 1 1 260px; min-width: 0; }
.trust-block .quote { font-size: 14.5px; color: var(--ink-700); line-height: 1.7; margin: 0 0 14px; }
.trust-block .name { font-weight: 800; font-size: 15px; margin-bottom: 2px; }
.trust-block .name span { font-weight: 500; color: var(--ink-500); font-size: 13px; margin-left: 6px; }
.trust-creds { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.trust-creds li { font-size: 13px; color: var(--ink-500); padding-left: 16px; position: relative; }
.trust-creds li::before { content: '·'; position: absolute; left: 2px; color: var(--blue-500); font-weight: 900; }
.trust-ecosystem-note { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line-c); font-size: 12.5px; color: var(--ink-500); }
.trust-ecosystem-note a { color: var(--blue-600); font-weight: 600; }

/* THE MAIN company/ecosystem trust layer (Wave 3 correction, Issue #65 comment
   5440110376) — compact redesign of the legacy 3-card "더메인 — 실제 개발사"
   section; preserves the verified relationship + both verified external links
   without cloning the legacy card grid. */
.themain-block { background: var(--surface-alt); border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: 22px; }
.themain-block h3 { font-size: 16.5px; margin: 6px 0 8px; }
.themain-block .themain-desc { font-size: 13.5px; color: var(--ink-500); line-height: 1.7; margin: 0 0 16px; max-width: 560px; }

/* Quiz */
.quiz-box { border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: 22px; max-width: 500px; box-shadow: var(--shadow-sm); }
.quiz-box .step { display: none; }
.quiz-box .step.active { display: block; }
.quiz-box button.opt { display: block; width: 100%; text-align: left; padding: 12px 14px; margin: 6px 0; border: 1px solid var(--line-c); border-radius: var(--r-md); background: #fff; cursor: pointer; font-size: 14px; transition: border-color var(--transition), background var(--transition); }
.quiz-box button.opt:hover { border-color: var(--blue-500); background: var(--blue-50); }
.quiz-result { background: var(--blue-50); border-radius: var(--r-lg); padding: 18px; }

/* Consultation CTA block */
.cta-block { background: linear-gradient(135deg, var(--blue-600), var(--blue-500)); color: #fff; border-radius: var(--r-lg); padding: 36px 32px; text-align: center; }
.cta-block h2 { color: #fff; }
.cta-block .lead { color: var(--blue-100); }
.cta-block .cta-btn { display: inline-block; margin-top: 14px; background: #fff; color: var(--blue-600); font-weight: 700; padding: 13px 24px; border-radius: var(--r-md); }
.cta-block .cta-btn:hover { background: var(--blue-50); }

/* Consultation form (inline section) */
#consultation form { display: grid; gap: var(--sp-4); max-width: 480px; }
#consultation .field { display: grid; gap: 6px; }
#consultation .field label { font-size: 13px; font-weight: 700; color: var(--ink-700); }
#consultation input, #consultation select {
  padding: 12px; border: 1px solid var(--line-c); border-radius: var(--r-md); font-size: 14.5px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
#consultation input:focus, #consultation select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }
#consultation .consent-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-500); }
#consultation .consent-row input { width: auto; margin-top: 3px; }
#consultation button[type=submit] { background: var(--blue-500); color: #fff; border: none; padding: 14px; border-radius: var(--r-md); font-weight: 700; font-size: 15px; cursor: pointer; transition: background var(--transition); }
#consultation button[type=submit]:hover { background: var(--blue-600); }
#consultation button[type=submit]:disabled { opacity: .6; cursor: default; }
#consultation .context-chip { display: inline-block; background: var(--blue-50); color: var(--blue-700); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-pill); margin: 2px 4px 2px 0; }
#consultation .success-box { background: var(--green-50); color: var(--green-600); padding: 16px; border-radius: var(--r-md); margin-top: 14px; display: none; font-size: 14px; }
#consultation .success-box.show { display: block; }
#consultation .error-box { background: var(--red-50); color: var(--red-600); padding: 14px; border-radius: var(--r-md); margin-top: 14px; display: none; font-size: 13px; font-weight: 600; }
#consultation .error-box.show { display: block; }

/* --- WEB-LAUNCH-001 (Issue #80 Scope B) — truthful non-write consultation --- */
.preview-simulation-notice { background: var(--amber-100); color: var(--amber-700); font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: var(--r-md); margin: 0 0 var(--sp-4); }
.nonwrite-consultation { max-width: 480px; }
.nonwrite-consultation-note { color: var(--ink-500); font-size: 13.5px; line-height: 1.6; margin: 0 0 var(--sp-4); }
.nonwrite-consultation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--sp-4); }
.nonwrite-consultation-campuses h3 { font-size: 14.5px; margin: 0 0 10px; }
.nonwrite-consultation-campuses ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contact-campus-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line-c); border-radius: var(--r-md); padding: 10px 14px; font-size: 13.5px; }
.contact-campus-name { font-weight: 700; color: var(--ink-900); }
.contact-campus-item a { color: var(--blue-600); font-weight: 700; }

/* Login placeholder */
.login-placeholder { border: 1px dashed var(--line-c); border-radius: var(--r-lg); padding: 26px; text-align: center; color: var(--ink-500); }

/* Footer */
footer.site { border-top: 1px solid var(--line-c); padding: 36px 0 28px; font-size: 12.5px; color: var(--ink-500); background: var(--surface-alt); }
.foot-links { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.foot-links a { font-weight: 600; color: var(--ink-700); }
.foot-links a:hover { color: var(--blue-600); }

/* Mobile sticky CTA */
.mobile-sticky { display: none; }
@media (max-width: 767px) {
  .mobile-sticky {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--line-c); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 8px;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
  }
  .mobile-sticky a { flex: 1; text-align: center; padding: 13px; border-radius: var(--r-md); font-weight: 700; font-size: 14px; }
  .mobile-sticky a.primary { background: var(--blue-500); color: #fff; }
  /* Wave 8E (Issue #79 Scope F/B) — the compare tray already carries its
     own primary action ("비교하기"); showing the global sticky CTA bar at
     the same time doubles fixed-footer chrome on a small screen and
     obscures content. Never remove the sticky CTA's markup/behavior on
     pages without a tray (compare-tray-active is only ever added while
     the tray has items) -- this only ever hides it, and only in that one
     state. */
  body.compare-tray-active .mobile-sticky { display: none; }
  .mobile-sticky a.secondary { border: 1px solid var(--line-c); color: var(--ink-900); }
}

/* Responsive navigation: hamburger below the nav breakpoint */
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  header.site nav#main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line-c); box-shadow: var(--shadow-md);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px 14px; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  header.site nav#main-nav.open { display: flex; }
  header.site nav#main-nav a,
  header.site nav#main-nav .nav-group-toggle { padding: 13px 10px; border-radius: var(--r-sm); }
  header.site nav#main-nav a.cta { margin: 8px 0 0; text-align: center; }
  /* MKT-BRAND-003 — on the phone the disclosure expands IN FLOW: the menu
     column grows and scrolls (the panel already has `overflow-y: auto`), so
     no destination is trapped behind an overlay the thumb cannot dismiss.
     Depth is unchanged from the accepted build: every route is still exactly
     one tap from an always-visible label. */
  .nav-group { display: block; }
  .nav-group-toggle { width: 100%; justify-content: space-between; }
  .nav-group-panel {
    position: static; min-width: 0; max-width: none;
    margin: 2px 0 6px; padding: 4px 0 4px 10px;
    border: 0; border-left: 2px solid var(--line-c); border-radius: 0; box-shadow: none;
  }
  header.site nav#main-nav .nav-utility { padding: 13px 10px; }
  .hero h1 { font-size: 23px; }
  .hero { padding: 40px 0 32px; }
  section { padding: 40px 0; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  header.site nav#main-nav { display: flex !important; }
}

/* =========================================================================
   Wave 8B — Decision Experience (Issue #76)
   Finder 2.0 / Compare / Proof / Premium Course Detail / Campus / Brief.
   Extends the existing token system — no new color/spacing scale.
   ========================================================================= */

/* --- Finder 2.0 (Scope A) --- */
.finder-box {
  background: #fff; border: 1px solid var(--line-c); box-shadow: var(--shadow-md);
  border-radius: var(--r-lg); padding: var(--sp-5); max-width: 640px;
}
.finder-box .finder-label { font-size: 13px; font-weight: 700; color: var(--ink-700); margin: 0 0 8px; display: block; }
.finder-input-row { display: flex; gap: 8px; }
.finder-input-row textarea {
  flex: 1; border: 1px solid var(--line-c); border-radius: var(--r-md); padding: 12px 14px;
  font-size: 15px; font-family: var(--font-sans); resize: none; min-height: 52px; line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.finder-input-row textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); outline: none; }
.finder-input-row button { background: var(--blue-500); color: #fff; border: none; border-radius: var(--r-sm); padding: 0 22px; font-weight: 700; cursor: pointer; transition: background var(--transition); }
.finder-input-row button:hover { background: var(--blue-600); }
.finder-example { font-size: 12.5px; color: var(--ink-500); margin: 10px 0 0; }
.finder-example button { background: none; border: none; padding: 0; color: var(--blue-600); font-weight: 600; cursor: pointer; text-decoration: underline; font-size: inherit; }
.finder-results { margin-top: 18px; }
.finder-intent-summary { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.finder-intent-chip { display: inline-block; background: var(--blue-50); color: var(--blue-700); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-pill); }
.finder-zero-state, .finder-ambiguous-note { border: 1px dashed var(--line-c); border-radius: var(--r-lg); padding: 20px; color: var(--ink-500); font-size: 13.5px; text-align: center; }
.finder-ambiguous-note { border-style: solid; border-color: var(--amber-600); background: var(--amber-50); color: var(--amber-700); text-align: left; margin-bottom: 12px; font-weight: 600; }
.finder-candidate-list { display: grid; gap: 10px; }
.finder-candidate-card { border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: 16px; background: #fff; }
.finder-candidate-card h4 { margin: 4px 0 8px; font-size: 16.5px; }
.finder-candidate-card .reasons { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.finder-candidate-card .reasons li { font-size: 12.5px; color: var(--ink-500); padding-left: 14px; position: relative; }
.finder-candidate-card .reasons li::before { content: '✓'; position: absolute; left: 0; color: var(--blue-500); font-weight: 800; font-size: 11px; }
.finder-candidate-card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.finder-time-note { font-size: 12px; color: var(--ink-500); font-style: normal; margin: 0 0 10px; padding: 6px 10px; background: var(--surface-alt); border-radius: var(--r-sm); }

/* --- Compare (Scope B) --- */
.compare-add-btn { font-size: 12.5px; padding: 7px 14px; }
.compare-add-btn.in-tray { background: var(--blue-500); color: #fff; }
.compare-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none;
  background: var(--ink-900); color: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(15, 23, 42, .18);
}
.compare-tray.show { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.compare-tray .compare-tray-count { font-size: 13px; font-weight: 700; white-space: nowrap; }
.compare-tray .compare-tray-items { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.compare-tray .compare-tray-item { background: rgba(255,255,255,.12); border-radius: var(--r-pill); padding: 5px 10px 5px 12px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.compare-tray .compare-tray-item button { background: none; border: none; color: #fff; cursor: pointer; font-size: 13px; line-height: 1; padding: 2px; opacity: .8; }
.compare-tray .compare-tray-item button:hover { opacity: 1; }
.compare-tray .compare-tray-open { background: #fff; color: var(--ink-900); border: none; border-radius: var(--r-sm); padding: 9px 18px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.compare-limit-note { position: fixed; left: 0; right: 0; bottom: 62px; z-index: 56; text-align: center; }
.compare-limit-note span { display: inline-block; background: var(--amber-700); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-md); }
.compare-panel-overlay { display: none; position: fixed; inset: 0; z-index: 70; background: rgba(15, 23, 42, .5); }
.compare-panel-overlay.show { display: block; }
.compare-panel {
  position: fixed; inset: 0; z-index: 71; background: #fff; overflow-y: auto;
  display: none; padding: var(--sp-5) 0 80px;
}
.compare-panel.show { display: block; }
.compare-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.compare-panel-head h2 { margin: 0; font-size: 19px; }
.compare-panel-close { background: none; border: 1px solid var(--line-c); border-radius: var(--r-sm); width: 36px; height: 36px; cursor: pointer; font-size: 16px; }
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-c); font-size: 13.5px; vertical-align: top; }
.compare-table th { font-size: 12px; color: var(--ink-500); font-weight: 700; white-space: nowrap; }
.compare-table th.dim-label { position: sticky; left: 0; background: var(--surface-alt); }
.compare-table .cell-unknown { color: var(--ink-500); font-style: italic; }
.compare-table .cell-remove { background: none; border: none; color: var(--red-600); font-size: 12px; cursor: pointer; margin-top: 6px; padding: 0; }

/* --- Proof (Scope D) --- */
.proof-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.proof-card { border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: 18px; background: #fff; }
.proof-card h3 { margin: 8px 0 6px; font-size: 14.5px; }
.proof-card p { font-size: 12.5px; color: var(--ink-500); margin: 0; line-height: 1.6; }
.proof-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); margin-left: 6px; }
.proof-badge-verified { background: var(--green-100); color: var(--green-600); }
.proof-badge-sample { background: var(--amber-100); color: var(--amber-700); }
/* Wave 8B PM correction (Issue #76, PM 5465943065, P1-B) — relationship-scope
   badge, always rendered ABOVE the type badge so a visitor sees "how is this
   related to what I'm looking at" before "what kind of proof is it". Distinct
   color per scope so DIRECT_* never visually blends with CATEGORY_RELATED/
   ACADEMY_WIDE. */
.proof-scope-badge { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; color: var(--ink-500); }
.proof-scope-direct-course, .proof-scope-direct-campus { color: var(--blue-600); }
.proof-scope-category-related { color: var(--amber-700); }
.proof-scope-academy-wide { color: var(--ink-500); }
.proof-empty { border: 1px dashed var(--line-c); border-radius: var(--r-lg); padding: 20px; text-align: center; color: var(--ink-500); font-size: 13.5px; }

/* --- Premium Course Detail hierarchy (Scope C; Wave 8E Issue #79 Scope B
   polish) --- Long-form course/funding pages are a stack of many
   .course-section blocks (course-detail-root, course-content-package-root,
   and funding-guide-section all share this class, so this one shared rule
   covers course detail + funding without a page-local patch). Before this
   Wave every section was identical padding + a hairline border -- a flat
   "article wall" with no scannable grouping. A subtle full-bleed alternating
   tint plus a short colored heading accent gives progressive visual
   grouping without hiding or reordering any content/status information. */
.course-section { padding: 32px 0; }
.course-section + .course-section { border-top: 1px solid var(--line-c); }
.course-section:nth-of-type(even) { background: var(--surface-alt); }
.course-section h2 { font-size: 19px; margin: 0 0 16px; padding-left: 14px; position: relative; }
.course-section h2::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--blue-500); }
.target-learner-chip, .tool-chip { display: inline-block; background: var(--surface-alt); border: 1px solid var(--line-c); border-radius: var(--r-pill); font-size: 12.5px; padding: 6px 13px; margin: 0 6px 6px 0; }
.course-data-status { font-size: 12.5px; color: var(--ink-500); border-left: 3px solid var(--line-c); padding-left: 10px; margin: 4px 0; }
.course-data-not-available { color: var(--ink-500); font-style: italic; font-size: 13px; }
.adjacent-course-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }

/* --- Campus operating-hours vs course-schedule distinction (Scope E) --- */
.campus-hours-note { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-alt); border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0; }
.campus-hours-note .icon { font-size: 15px; flex: 0 0 auto; }
.campus-hours-note .text { font-size: 12.5px; color: var(--ink-500); line-height: 1.6; }
.campus-hours-note .text strong { color: var(--ink-900); }
.campus-schedule-disclaimer { font-size: 12px; color: var(--amber-700); background: var(--amber-50); border-radius: var(--r-sm); padding: 8px 10px; margin: 10px 0 16px; }

/* --- Consultation Brief visible handoff (Scope F) --- */
.brief-summary { border: 1px solid var(--line-c); border-radius: var(--r-lg); padding: var(--sp-4); background: var(--surface-alt); margin: 0 0 var(--sp-4); }
.brief-summary .brief-title { font-size: 13px; font-weight: 700; color: var(--ink-700); margin: 0 0 10px; }
.brief-summary .brief-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line-c); font-size: 12.5px; padding: 6px 8px 6px 12px; border-radius: var(--r-pill); margin: 0 6px 6px 0; }
.brief-summary .brief-chip button { background: none; border: none; color: var(--ink-500); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px; }
.brief-summary .brief-chip button:hover { color: var(--red-600); }
.brief-summary .brief-empty { font-size: 12.5px; color: var(--ink-500); }
.brief-summary .brief-note { font-size: 11.5px; color: var(--ink-500); margin-top: 8px; }

/* --- Wave 8D content-package sections (Issue #78) --- */
.content-package-section .content-answer-first { font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.key-concept-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.key-concept-card { border: 1px solid var(--line-c); border-radius: var(--r-md); padding: var(--sp-4); background: var(--surface-alt); }
.key-concept-card h3 { font-size: 14.5px; margin: 0 0 6px; color: var(--ink-900); }
.key-concept-card p { font-size: 13.5px; color: var(--ink-700); margin: 0; line-height: 1.55; }
.related-work-list, .beginner-guide-list { margin: var(--sp-3) 0 0; padding-left: 20px; }
.related-work-list li, .beginner-guide-list li { font-size: 14px; color: var(--ink-700); line-height: 1.6; margin-bottom: 6px; }
.selection-guide-item { border-left: 3px solid var(--blue-500); padding: 4px 0 4px var(--sp-3); margin-bottom: var(--sp-3); }
.selection-guide-item h3 { font-size: 14px; margin: 0 0 4px; color: var(--blue-700); }
.selection-guide-item p { font-size: 13.5px; color: var(--ink-700); margin: 0; line-height: 1.55; }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.faq-item { border: 1px solid var(--line-c); border-radius: var(--r-md); padding: var(--sp-4); }
.faq-type-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); margin-bottom: 8px; }
.faq-type-badge.faq-type-general-official { background: var(--blue-100); color: var(--blue-700); }
.faq-type-badge.faq-type-the-plan-operational { background: var(--amber-100); color: var(--amber-700); }
.faq-question { font-size: 14.5px; margin: 0 0 6px; color: var(--ink-900); }
.faq-answer { font-size: 13.5px; color: var(--ink-700); margin: 0; line-height: 1.55; }
.faq-answer.faq-needs-confirmation { color: var(--amber-700); font-style: italic; }
.finder-candidate-explainer { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; margin: 4px 0 8px; }
.funding-source-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.funding-source-list li { font-size: 13px; color: var(--ink-700); margin-bottom: 6px; }
.funding-source-list a { color: var(--blue-600); }

@media (max-width: 767px) {
  .finder-box { padding: var(--sp-4); }
  .finder-input-row { flex-direction: column; }
  .finder-input-row button { padding: 12px; }
  /* Wave 8E — .mobile-sticky is now hidden whenever the tray is showing
     (body.compare-tray-active, above), so the tray no longer needs extra
     bottom padding to clear a bar that's no longer there; it only clears
     its own safe-area inset, same as desktop. compare-limit-note (the
     "최대 3개까지" toast) sits just above the tray, not above a
     tray+sticky-bar stack that no longer coexists. */
  .compare-limit-note { bottom: 74px; }
  .compare-table { min-width: 480px; }
  .key-concept-list { grid-template-columns: 1fr; }
}

/* ============================================================
   WEB-NEXTGEN-009D5 (Issue #96 §3) — commercial / catalogue surface.
   PO staging review found the homepage commercially weak and the
   evergreen catalogue invisible. These components carry the recovered
   catalogue, founder authority and THE MAIN development proof.
   Mobile-first: every grid collapses to one column at 375px, and no rule
   here introduces a fixed width that could overflow a small viewport.
   ============================================================ */

/* --- countable trust bar (no unevidenced marketing figures) --- */
.stat-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-c);
  border: 1px solid var(--line-c); border-radius: var(--r-lg); overflow: hidden; margin: 24px 0 0; }
.stat-cell { background: var(--surface); padding: 16px 14px; text-align: center; }
.stat-value { font-size: 26px; font-weight: 800; color: var(--blue-600); line-height: 1.1; letter-spacing: -.02em; }
.stat-unit { font-size: 14px; font-weight: 700; margin-left: 2px; }
.stat-label { font-size: 13px; font-weight: 700; color: var(--ink-900); margin-top: 4px; }
.stat-sub { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }

/* --- quick commercial actions --- */
.commercial-quick-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0 0; }
.commercial-quick-action { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: var(--surface);
  border: 1px solid var(--line-c); border-radius: var(--r-md); text-decoration: none; color: var(--ink-900);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--dur-press) var(--ease-out);
  box-shadow: var(--shadow-sm); }
.commercial-quick-action:hover { border-color: var(--blue-500); box-shadow: var(--shadow-md); }  /* movement: see the pointer gate */
.quick-body { display: flex; flex-direction: column; min-width: 0; }
.quick-label { font-size: 14px; font-weight: 700; }
.quick-note { font-size: 11.5px; color: var(--ink-500); margin-top: 1px; }

/* --- evergreen certification catalogue --- */
.catalogue-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.catalogue-block { border: 1px solid var(--line-c); border-radius: var(--r-lg); background: var(--surface); padding: 18px 16px; }
.catalogue-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-c); margin-bottom: 12px; }
.catalogue-block-head h3 { font-size: 16px; margin: 0; letter-spacing: -.01em; }
.catalogue-count { font-size: 12.5px; font-weight: 700; color: var(--blue-600); background: var(--blue-50);
  padding: 3px 9px; border-radius: var(--r-pill); flex: 0 0 auto; }
.cert-item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cert-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 9px 10px;
  background: var(--surface-alt); border-radius: var(--r-sm); border-left: 3px solid var(--ink-300); }
.cert-item--evergreen { border-left-color: var(--green-600); }
.cert-item--current_opening { border-left-color: var(--blue-500); }
.cert-name { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.cert-desc { font-size: 12.5px; color: var(--ink-500); }
.cert-meta { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
.cert-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--ink-100); color: var(--ink-700); white-space: nowrap; }
.cert-item--evergreen .cert-status { background: var(--green-50); color: var(--green-600); }
.cert-item--current_opening .cert-status { background: var(--blue-50); color: var(--blue-600); }
.cert-flag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--amber-50); color: var(--amber-700); white-space: nowrap; }
.catalogue-empty { color: var(--ink-500); font-size: 14px; }

/* --- per-category depth --- */
.category-depth { border: 1px solid var(--line-c); border-radius: var(--r-lg); background: var(--surface); padding: 20px 16px; }
.depth-title { font-size: 18px; margin: 0 0 6px; }
.depth-value { font-size: 14.5px; color: var(--ink-700); margin: 0 0 18px; line-height: 1.65; }
.depth-section { margin-top: 18px; }
.depth-section h4 { font-size: 13px; font-weight: 700; color: var(--blue-600); margin: 0 0 9px;
  text-transform: uppercase; letter-spacing: .04em; }
.persona-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.persona-item { background: var(--surface-alt); border-radius: var(--r-sm); padding: 10px 12px; display: flex;
  flex-direction: column; gap: 2px; }
.persona-who { font-size: 13.5px; font-weight: 700; }
.persona-why { font-size: 12.5px; color: var(--ink-500); }
.curriculum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
.curriculum-step { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; padding: 11px 12px;
  background: var(--surface-alt); border-radius: var(--r-sm); border-left: 3px solid var(--blue-500); }
.step-no { grid-row: 1 / span 2; align-self: center; font-size: 11px; font-weight: 800; color: var(--blue-600);
  background: var(--blue-50); padding: 5px 8px; border-radius: var(--r-sm); white-space: nowrap; }
.step-title { font-size: 13.5px; font-weight: 700; }
.step-detail { font-size: 12.5px; color: var(--ink-500); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-chip, .career-chip { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--ink-100); color: var(--ink-700); }
.career-chip { background: var(--blue-50); color: var(--blue-700); }

/* --- THE MAIN development proof (major trust block) --- */
.themain-proof { background: linear-gradient(180deg, var(--ink-900) 0%, #1e293b 100%); color: #fff;
  border-radius: var(--r-lg); padding: 28px 18px; }
.themain-proof-head { margin-bottom: 20px; }
.themain-proof .section-tag { background: rgba(255, 255, 255, .12); color: #bfdbfe; }
.themain-proof h2 { font-size: 24px; margin: 10px 0 8px; letter-spacing: -.02em; color: #fff; }
.themain-proof-intro { color: #cbd5e1; font-size: 14.5px; margin: 0; line-height: 1.65; }
.proof-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* APPLE-DESIGN-002 CODEX-HOLD P1-1 — ownership scope.
   `.proof-card` is ALSO the light evidence card rendered by
   proof-presentation.js on /campuses/*, /courses/* and the homepage. This
   dark treatment belongs to THE MAIN's band only. It was authored globally
   and merely LOOKED correct because rgba(255,255,255,.06) renders near-white
   over a white page — the reduced-transparency fallback made that latent
   defect visible (H3 fell to 1.15:1 on /campuses/anseong/). Scoped here so
   the light surface keeps its own presentation in every mode. */
.themain-proof .proof-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md); padding: 16px; }
.proof-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.themain-proof .proof-card-head h4 { font-size: 15px; margin: 0; color: #fff; }
.proof-status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill);
  white-space: nowrap; flex: 0 0 auto; }
.proof-status--live { background: var(--green-100); color: var(--green-600); }
.proof-status--in_development { background: var(--amber-100); color: var(--amber-700); }
.themain-proof .proof-status--internal, .themain-proof .proof-status--prototype { background: rgba(255, 255, 255, .16); color: #e2e8f0; }
.proof-summary { font-size: 13.5px; color: #e2e8f0; margin: 0 0 8px; line-height: 1.6; }
.proof-value { font-size: 12.5px; color: #93c5fd; margin: 0 0 10px; line-height: 1.55; }
.proof-link { font-size: 12.5px; font-weight: 700; color: #bfdbfe; text-decoration: none; }
.proof-link:hover { text-decoration: underline; }

/* --- founder authority --- */
.founder-authority { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start;
  border: 1px solid var(--line-c); border-radius: var(--r-lg); background: var(--surface); padding: 22px 18px; }
.founder-photo img { width: 100%; max-width: 220px; border-radius: var(--r-lg); display: block; }
.founder-body h2 { font-size: 22px; margin: 10px 0 10px; letter-spacing: -.02em; }
.founder-title { font-size: 14px; font-weight: 600; color: var(--ink-500); margin-left: 6px; }
.founder-quote { margin: 0 0 14px; padding-left: 14px; border-left: 3px solid var(--blue-500);
  font-size: 14.5px; color: var(--ink-700); line-height: 1.7; font-style: normal; }
.founder-creds { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.founder-cred { font-size: 13.5px; color: var(--ink-700); padding-left: 18px; position: relative; }
.founder-cred::before { content: '✓'; position: absolute; left: 0; color: var(--blue-500); font-weight: 800; }

@media (min-width: 640px) {
  .stat-bar { grid-template-columns: repeat(4, 1fr); }
  .commercial-quick-actions { grid-template-columns: repeat(4, 1fr); }
  .catalogue-grid { grid-template-columns: repeat(2, 1fr); }
  .persona-list { grid-template-columns: repeat(2, 1fr); }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .founder-authority { grid-template-columns: 220px 1fr; gap: 26px; }
  .themain-proof { padding: 34px 28px; }
}
@media (min-width: 960px) {
  .catalogue-grid { grid-template-columns: repeat(3, 1fr); }
  .themain-proof h2 { font-size: 28px; }
}

/* ============================================================
   WEB-NEXTGEN-009D5 PM P1-1 — commercial hero (actual first screen)
   and PM P1-4 — THE MAIN product screenshot cards.
   Mobile-first: single column at 375px, two columns from 900px.
   Every visual is a real photograph or a rights-cleared real screen
   capture; no decorative filler is styled here because none is used.
   ============================================================ */

.chero { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center;
  padding: 30px 0 34px; }
.chero-copy { min-width: 0; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.hero-chip { font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--blue-50); color: var(--blue-700); white-space: nowrap; }
.chero-title { font-size: 29px; line-height: 1.22; letter-spacing: -.028em; margin: 0 0 12px;
  color: var(--ink-900); word-break: keep-all; }
.chero-sub { font-size: 15px; line-height: 1.7; color: var(--ink-700); margin: 0 0 20px; word-break: keep-all; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.hero-cta { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--line-c); background: var(--surface); color: var(--ink-900);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--dur-press) var(--ease-out); }
.hero-cta:hover { border-color: var(--blue-500); color: var(--blue-600); }
.hero-cta--primary { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.hero-cta--primary:hover { background: var(--blue-600); color: #fff; }
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px;
  padding-top: 18px; border-top: 1px solid var(--line-c); }
.hero-stat { display: flex; flex-direction: column; gap: 1px; }
.hero-stat strong { font-size: 20px; font-weight: 800; color: var(--blue-600); letter-spacing: -.02em; }
.hero-stat span { font-size: 12px; color: var(--ink-500); }

.chero-visual { position: relative; display: grid; grid-template-columns: 1fr; gap: 14px; min-width: 0; }
.hero-portrait { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-100);
  box-shadow: var(--shadow-md); position: relative; }
.hero-portrait img { width: 100%; display: block; }
.hero-portrait figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.86) 60%);
  color: #fff; font-size: 13px; font-weight: 700; }
.hero-portrait figcaption span { font-weight: 500; opacity: .85; margin-left: 4px; font-size: 12px; }
.hero-screen { margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-c);
  background: var(--surface); box-shadow: var(--shadow-md); }
.hero-screen-bar { display: block; height: 16px; background: var(--ink-100);
  border-bottom: 1px solid var(--line-c); }
.hero-screen img { width: 100%; display: block; }
.hero-screen figcaption { padding: 8px 11px; font-size: 11.5px; font-weight: 700; color: var(--ink-700);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-screen-status { font-weight: 700; font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--green-50); color: var(--green-600); white-space: nowrap; }

/* THE MAIN proof cards with real screenshots */
.proof-card--shot { padding: 0; overflow: hidden; }
.themain-proof .proof-shot { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.12); }
.proof-shot img { width: 100%; display: block; }
.proof-card--shot .proof-card-body { padding: 15px 16px 16px; }

@media (min-width: 900px) {
  .chero { grid-template-columns: 1.05fr .95fr; gap: 40px; padding: 44px 0 48px; }
  .chero-title { font-size: 40px; }
  .chero-sub { font-size: 16px; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .chero-visual { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; align-items: start; }
  .hero-portrait { grid-row: span 2; align-self: stretch; }
  .hero-portrait img { height: 100%; object-fit: cover; }
}

/* ============================================================
   WEB-NEXTGEN-009D5 PM P1-RESPONSIVE — true responsive composition.

   PO finding: high-value conversion surfaces were capped at 480–640px
   inside a ~1120px desktop container, so they read as mobile cards
   dropped into a desktop page. This block RECOMPOSES them per
   breakpoint rather than merely scaling one mobile shape:

     desktop 1440/1280 → deliberate two-column / multi-column layouts
     tablet  1024/768  → progressive rebalance
     mobile  430/390/375 → single column, touch-first, zero overflow

   The narrow caps below are overridden here (this block loads last)
   rather than edited in place, so the original Wave-2/3 rules stay
   readable as history.
   ============================================================ */

/* ---- 1. Finder: wide band with a companion entry-point panel ---- */
.finder-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.finder-box { max-width: none; width: 100%; }

/* ---- 2. Search: use the container, results in a grid ---- */
.search-box { max-width: none; }
.search-results { max-width: none; }
.search-results .search-result-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

/* ---- 3. 1-minute recommendation: questions | result+CTA ---- */
/* Declared as a single-column grid at base so the collapse is EXPLICIT and
   assertable at every width, rather than being an implicit block layout. */
.quiz-box { max-width: none; width: 100%; display: grid; grid-template-columns: 1fr; gap: 20px; }
.quiz-result-placeholder { color: var(--ink-500); font-size: 14px; line-height: 1.7; margin: 0; }
.quiz-result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---- 4. Consultation: guidance | campus contact cards ---- */
.nonwrite-consultation { max-width: none; display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.nonwrite-consultation-actions .btn,
.nonwrite-consultation-actions .pill-btn { min-height: 44px; display: inline-flex; align-items: center; }
.contact-campus-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.contact-campus-item { display: flex; flex-direction: column; gap: 3px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line-c); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); }
.contact-campus-name { font-size: 14.5px; font-weight: 700; color: var(--ink-900); }
.contact-campus-address { font-size: 12.5px; color: var(--ink-500); }
.contact-campus-hours { font-size: 12px; color: var(--ink-500); }
.contact-campus-tel { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px;
  font-size: 17px; font-weight: 800; color: var(--blue-600); text-decoration: none; letter-spacing: -.01em; }
.contact-campus-tel:hover { text-decoration: underline; }

/* ---- 5. Founder: larger portrait on desktop ---- */
.founder-photo img { max-width: none; }

@media (min-width: 768px) {
  .contact-campus-grid { grid-template-columns: repeat(2, 1fr); }
  .search-results .search-result-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  /* MKT-BRAND-003 Scope B — the second column existed only to seat the
     removed companion panel. The Finder now uses the full band width, which
     is what a single coherent discovery surface should do. */

  /* Recommendation becomes questions | persistent result column. */
  .quiz-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px;
    align-items: start; padding: 26px 28px; }
  .quiz-box .step:not([data-step="result"]) { grid-column: 1; }
  .quiz-box [data-step="result"] { grid-column: 2; display: block; padding-left: 28px;
    border-left: 1px solid var(--line-c); }

  /* Consultation becomes guidance | 2x2 campus contact cards. */
  .nonwrite-consultation { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 34px; }

  .founder-authority { grid-template-columns: 280px 1fr; }
}

@media (min-width: 1200px) {
  .contact-campus-grid { grid-template-columns: repeat(2, 1fr); }
  .search-results .search-result-grid { grid-template-columns: repeat(3, 1fr); }
  .proof-grid { grid-template-columns: repeat(3, 1fr); }   /* THE MAIN desktop density */
  .catalogue-grid { grid-template-columns: repeat(3, 1fr); }
  .quiz-box { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; }
}

/* ---- Mobile: touch-first, single column, no overflow ---- */
@media (max-width: 767px) {
  .finder-layout, .nonwrite-consultation, .quiz-box { grid-template-columns: 1fr; }
  .quiz-box [data-step="result"] { border-left: 0; padding-left: 0; }
  .contact-campus-tel { font-size: 19px; min-height: 48px; }
  .hero-discovery-list a { min-height: 48px; }
  .hero-cta, .commercial-quick-action { min-height: 46px; }
  .quiz-result-actions .pill-btn { flex: 1 1 100%; justify-content: center; min-height: 46px; }
}

/* ==================================================================== *
 * DESIGN-ENG-002 — Interaction / Accessibility / Motion polish
 * Issue #100 · audited in #97 (comment 5548855870), adjudicated 5548876353.
 * Rules are THE PLAN-owned; see docs/design/DESIGN_ENGINEERING_RULES.md.
 * Predecessor accepted head: 700a956dc92e69b2be3166f643e5517b2ac29036
 * ==================================================================== */

/* --- A. Press / pointer-down feedback -------------------------------
   Every pressable control acknowledges the press. `:active` fires on
   pointer-down, so the feedback is immediate rather than waiting for the
   click to resolve. Compositor-only (transform), ~130ms, no bounce.
   Deliberately NOT gated behind `hover: hover`: touch has no hover to fall
   back on, which is exactly where press feedback matters most. */
.btn, .pill-btn, .hero-cta, .commercial-quick-action, .category-tab,
.search-box button, .finder-input-row button, .finder-example-btn,
#consultation button[type=submit], .quiz-box button.opt,
.cta-block .cta-btn, .contact-campus-tel, .hero-discovery-list a, .proof-link {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* removes the legacy ~300ms tap delay */
}
.btn:active, .pill-btn:active, .hero-cta:active, .commercial-quick-action:active,
.category-tab:active, .search-box button:active, .finder-input-row button:active,
.finder-example-btn:active, #consultation button[type=submit]:active,
.quiz-box button.opt:active, .cta-block .cta-btn:active,
.contact-campus-tel:active, .hero-discovery-list a:active, .proof-link:active {
  transform: scale(var(--press-scale));
}
/* A disabled control must never look like it responded. */
.btn:disabled, .pill-btn:disabled, .search-box button:disabled,
.finder-input-row button:disabled, #consultation button[type=submit]:disabled,
.quiz-box button.opt:disabled, .category-tab:disabled, .finder-example-btn:disabled {
  cursor: not-allowed; opacity: .55;
}
.btn:disabled:active, .pill-btn:disabled:active, .search-box button:disabled:active,
.finder-input-row button:disabled:active, #consultation button[type=submit]:disabled:active,
.quiz-box button.opt:disabled:active, .category-tab:disabled:active,
.finder-example-btn:disabled:active, [aria-disabled="true"]:active {
  transform: none;
}
.btn, .pill-btn, .category-tab, .search-box button, .finder-input-row button,
.finder-example-btn, #consultation button[type=submit], .quiz-box button.opt,
.cta-block .cta-btn, .contact-campus-tel, .proof-link {
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition),
              transform var(--dur-press) var(--ease-out);
}

/* --- Hover capability gate ------------------------------------------
   Touch devices synthesise :hover on tap, so a movement-based hover fires a
   false positive on every press. Colour-only hovers are harmless and stay
   ungated; the two that MOVE are gated to real pointers. */
@media (hover: hover) and (pointer: fine) {
  .course-list-card:hover, .campus-card:hover, .category-card:hover, .opening-card:hover {
    box-shadow: var(--shadow-md); transform: translateY(-2px);
  }
  .commercial-quick-action:hover {
    border-color: var(--blue-500); box-shadow: var(--shadow-md); transform: translateY(-1px);
  }
}
@media not all and (hover: hover) {
  /* Touch: keep the non-movement part of the affordance. */
  .course-list-card:hover, .campus-card:hover, .category-card:hover, .opening-card:hover { box-shadow: var(--shadow-md); }
  .commercial-quick-action:hover { border-color: var(--blue-500); box-shadow: var(--shadow-md); }
}

/* --- E. Measured contrast corrections -------------------------------
   `.proof-card p` (line ~427) was authored for a WHITE card. The 9D5 rounds
   moved `.proof-card` onto the dark `.themain-proof` gradient without
   re-specifying the text colour, leaving --ink-500 mid-grey on near-black:
   measured 3.22:1 where AA requires 4.5:1. Its sibling `.themain-proof-intro`
   already uses a light tone, so this scopes the same treatment to the cards.
   Scoped to `.themain-proof` so `.proof-card` on white surfaces is untouched. */
.themain-proof .proof-card p,
.themain-proof .proof-summary,
.themain-proof .proof-value { color: var(--ink-300); }
.themain-proof .proof-link { color: #dbeafe; }

/* Quiz placeholder sat at 4.37:1 on --blue-50 — just under AA. */
.quiz-result-placeholder { color: var(--ink-700); }

/* --- F. Touch-target consistency ------------------------------------
   9D5 hardened `.contact-campus-tel` to 48px. Its siblings — the campus-card
   phone links, the openings "자세히 보기" links, the finder example button and
   THE MAIN proof links — were left at 14–21px. Same actions, same round, one
   component fixed: this closes the twins without adding card bloat. */
.campus-card .meta a[href^="tel:"],
.campus-list-card a[href^="tel:"],
.contact-campus-item a[href^="tel:"] {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-weight: 700; text-decoration: none;
}
.campus-card .meta a[href^="tel:"]:hover,
.campus-list-card a[href^="tel:"]:hover { text-decoration: underline; }
.opening-card .apply,
.proof-link,
.finder-example-btn {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
}
.pill-btn { min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

@media (max-width: 767px) {
  /* Primary mobile conversion CTAs keep THE PLAN's existing 48px precedent. */
  .campus-card .meta a[href^="tel:"],
  .campus-list-card a[href^="tel:"],
  .contact-campus-item a[href^="tel:"] { min-height: 48px; font-size: 16px; }
  a[href*="pf.kakao.com"] { display: inline-flex; align-items: center; min-height: 48px; }
}

/* --- G. Image layout stability --------------------------------------
   Images now carry width/height attributes, so the browser reserves the
   correct box before bytes arrive. `height: auto` keeps them responsive
   without distorting the PO-approved crops. */
img[width][height] { height: auto; }

/* --- D. Skip link ----------------------------------------------------
   The `.skip-link` rules already existed but no page rendered one. The
   markup now exists; this only adds the token-based motion. */
/* APPLE-DESIGN-002: the skip link now hides via transform (text-size
   independent), so the transition follows it. Under reduced motion the
   universal rule above drops transform from the transition list, and the
   link simply appears — which is the correct reduced-motion behaviour. */
.skip-link { transition: transform var(--dur-ui) var(--ease-out); }

/* --- H. Bounded state transitions (Motion Gate) ----------------------
   Only transitions that answer the Motion Gate ship. Each explains a state
   change the user just caused; none is decorative, none is scroll-triggered,
   none replays on every keystroke.
   1) Mobile nav open — the panel is a new surface appearing from the toggle.
   2) Result panels' FIRST appearance — prevents a jarring content teleport.
   Both are opacity+small translate, under 300ms, and are removed entirely
   under prefers-reduced-motion by the block near the top of this file. */
@media (max-width: 900px) {
  header.site nav#main-nav[data-open="true"] {
    animation: de002-nav-in var(--dur-panel) var(--ease-out) both;
  }
}
@keyframes de002-nav-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.finder-results[data-first-result="true"],
.search-results[data-first-result="true"],
.quiz-result[data-first-result="true"] {
  animation: de002-result-in var(--dur-ui) var(--ease-out) both;
}
@keyframes de002-result-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- F (continued). Remaining touch-target gaps, measured at 375px --------
   Each selector below was identified by measuring the real rendered page, not
   by guessing at markup. Sizes are raised to the --tap-min floor using
   inline-flex/min-height where the element is standalone, and vertical padding
   where the link sits inline in running text (padding expands the hit area
   without disturbing the line box). No card padding was inflated. */
.skip-link { min-height: var(--tap-min); display: inline-flex; align-items: center; }
.nav-toggle { min-height: var(--tap-min); min-width: var(--tap-min); }
.finder-input-row button { min-height: var(--tap-min); }
.search-box input, .search-box button { min-height: var(--tap-min); }
.campus-card .apply, .campus-list-card .apply {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
}
.quiz-box button.opt { min-height: var(--tap-min); }
/* Standalone "전체 보기 →" section links sit alone in their own paragraph. */
p.section-more > a, .section-more a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
}
/* The footer policy link is inline inside a sentence: pad the hit area
   rather than converting it to a block, which would break the line. */
footer a[href*="privacy"] { display: inline-block; padding: 15px 6px; }

/* --- F (continued). Tablet/desktop touch targets --------------------------
   768px is a TOUCH width (iPad portrait) but sits above the `max-width: 767px`
   mobile block, so mobile-only sizing never reached it. These are declared at
   BASE level so the floor holds at every width, measured at 768 and up. */
.hero-cta { min-height: var(--tap-min); }
.foot-social a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* Navigation links are explicitly prioritised by Issue #100 §2F. 1024px is a
   plausible touch width (tablet landscape), and the links measured 33-36px.
   The header already had 54px of vertical headroom, so the floor is applied
   with inline-flex centring rather than by adding padding — the header grows
   only marginally and the accepted two-row composition is preserved. */
/* Applied only where the primary pointer is COARSE (touch). The 44px floor
   exists for fingers; on a fine pointer it would inflate the PO-accepted
   header by ~19px to solve a problem a mouse does not have. Measured: with
   this gate, a touch device gets 44px nav targets while the desktop header
   stays at its accepted 98px. */
@media (pointer: coarse) {
  header.site nav#main-nav a,
  header.site nav#main-nav .nav-group-toggle {
    display: inline-flex; align-items: center; min-height: var(--tap-min);
    padding-top: 0; padding-bottom: 0;
  }
}

/* ==================================================================== *
 * PO VISUAL ADDENDUM — Issue #100 comment 5549265293
 * ==================================================================== */

/* --- §1. Hero capability panel ---------------------------------------
   Replaces the stacked product-screenshot collage. Renders NO image and
   NO simulated product UI — the real screenshots keep their meaning in
   the THE MAIN proof section lower on the page, where status and
   provenance labels accompany them. */
.hero-capability {
  border: 1px solid var(--line-c);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, var(--surface-alt) 100%);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-sm);
}
.hero-capability-mark {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .10em;
  color: var(--blue-600); background: var(--blue-50);
  padding: 5px 10px; border-radius: var(--r-pill);
}
.hero-capability-statement {
  margin: 12px 0 14px; font-size: 13.5px; line-height: 1.75; color: var(--ink-700);
}
.hero-capability-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line-c);
  border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c); }
/* Label above note, always. Setting them side-by-side forced the label to
   wrap mid-phrase in the narrower desktop column, which reads as an
   unfinished layout — the exact perceived-quality problem this panel exists
   to solve. */
.hero-capability-list li {
  background: var(--surface); padding: 11px 2px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.hero-capability-label { font-size: 13.5px; font-weight: 700; color: var(--ink-900); line-height: 1.4; }
.hero-capability-note  { font-size: 12px; color: var(--ink-700); line-height: 1.5; }
.hero-capability-link {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--blue-600); text-decoration: none;
}
.hero-capability-link:hover { text-decoration: underline; }

/* --- §3. Editorial list for notices / news / guides -------------------
   The previous card grid set title, date and summary at 13-13.5px in the
   same mid-grey, so nothing dominated and the reader had to read every
   card. Here the TITLE dominates, metadata is compact but legible
   (--ink-700, not the old --ink-500 whisper), and the summary is clearly
   secondary with comfortable leading. */
.ed-list { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-c); }
.ed-row {
  display: block; padding: 20px 4px; border-bottom: 1px solid var(--line-c);
  text-decoration: none; color: inherit;
  transition: background var(--transition), transform var(--dur-press) var(--ease-out);
}
.ed-row:active { transform: scale(var(--press-scale)); }
.ed-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.ed-cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--blue-700); background: var(--blue-50);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.ed-date { font-size: 12.5px; font-weight: 600; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.ed-title {
  margin: 0; font-size: 17px; line-height: 1.45; font-weight: 700;
  color: var(--ink-900); letter-spacing: -.01em;
}
.ed-summary {
  margin: 8px 0 0; font-size: 14px; line-height: 1.75; color: var(--ink-700);
  max-width: 74ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .ed-row:hover { background: var(--blue-50); }
  .ed-row:hover .ed-title { color: var(--blue-700); }
}
@media not all and (hover: hover) {
  .ed-row:hover { background: var(--blue-50); }
}
/* Desktop uses the width it has instead of squeezing into narrow cards. */
@media (min-width: 960px) {
  .ed-row { padding: 24px 6px; }
  .ed-title { font-size: 19px; }
  .ed-summary { font-size: 14.5px; }
}
/* Mobile stays compact without becoming cramped. */
@media (max-width: 767px) {
  .ed-row { padding: 17px 2px; }
  .ed-title { font-size: 16px; line-height: 1.5; }
  .ed-summary { font-size: 13.5px; line-height: 1.7; -webkit-line-clamp: 3; }
  .hero-capability { padding: 17px 16px 15px; }
  .hero-capability-list li { gap: 3px; }
}

/* §1 (continued). The Hero visual column previously held a portrait plus TWO
   stacked screenshots, so it was laid out as a 2x2 grid. With the collage
   removed it carries the portrait and one capability panel, and that old grid
   squeezed the panel until its labels broke mid-word. Rebalanced here: the
   portrait keeps the dominant share, the panel gets enough width to set its
   own type cleanly, and neither is a 2x2 cell any more. */
@media (min-width: 960px) {
  .chero-visual {
    grid-template-columns: minmax(0, 1.02fr) minmax(240px, .98fr);
    grid-template-rows: auto;
    align-items: stretch;
    gap: 16px;
  }
  .hero-portrait { grid-row: auto; align-self: stretch; }
  .hero-capability { align-self: stretch; display: flex; flex-direction: column; }
  .hero-capability-list { margin-top: auto; }
}
/* Labels must never break mid-word — that reads as an unfinished layout. */
.hero-capability-label, .hero-capability-note, .hero-capability-mark { word-break: keep-all; }
.hero-capability-statement { word-break: keep-all; }

/* Navigation controls the earlier 375px sweep could not see, because they
   only appear on interior pages: the header wordmark and breadcrumb links.
   Issue #100 §2F explicitly prioritises navigation controls. */
header.site .logo a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* ==================================================================== *
 * P1-BRAND-2 — CTA priority hierarchy (Issue #101 §1.D / §5,
 * PM BRAND HOLD 5549531618). Three visual tiers, so the first screen has
 * one obvious next action instead of ~15 competing ones.
 *   PRIMARY   — filled, largest: 나에게 맞는 과정 찾기
 *   SECONDARY — outlined, still strong: 상담하기
 *   UTILITY   — quiet shortcuts that stay reachable but never compete
 * No link or function was removed; only visual weight was reassigned.
 * ==================================================================== */

/* PRIMARY — the single strongest element in the Hero. */
.hero-cta--primary {
  font-size: 15px; font-weight: 700;
  padding: 14px 28px;      /* decisively the largest target on the first screen */
  min-height: 50px;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .28), 0 6px 16px rgba(37, 99, 235, .18);
}
/* SECONDARY — clearly strong, clearly not the primary. */
.hero-ctas .hero-cta:not(.hero-cta--primary) {
  border-color: var(--ink-300); color: var(--ink-900); background: var(--surface);
  font-weight: 700;
}
.hero-ctas .hero-cta:not(.hero-cta--primary):hover { border-color: var(--blue-500); color: var(--blue-600); }

/* UTILITY — the one consolidated shortcut row. Deliberately quieter than
   both Hero CTAs: no elevation, lighter type, muted label colour. It must
   read as "also available", never as a competing conversion path. */
.utility-shortcuts .commercial-quick-action {
  box-shadow: none;
  background: var(--surface-alt);
  border-color: var(--line-c);
  padding: 9px 11px;
  font-size: 12.5px;        /* the anchor's own size drove the row's height */
  gap: 8px;
}
/* Footprint matters as much as fill: a 4-across row of full-width cards is
   loud by sheer area even when its type is quiet. As the utility tier these
   become compact auto-width chips that wrap, so the row reads as a shortcut
   strip rather than a second primary action grid. */
.utility-shortcuts .commercial-quick-actions,
.utility-shortcuts.commercial-quick-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.utility-shortcuts .commercial-quick-action { flex: 0 1 auto; }
.utility-shortcuts .quick-label { font-size: 13px; font-weight: 700; color: var(--ink-700); }
.utility-shortcuts .quick-note  { font-size: 11.5px; color: var(--ink-700); }
@media (hover: hover) and (pointer: fine) {
  .utility-shortcuts .commercial-quick-action:hover {
    background: var(--surface); border-color: var(--blue-500); box-shadow: var(--shadow-sm);
  }
}
/* The lone remaining discovery shortcut beside the Finder — medium weight. */
.quick-actions--single { display: flex; gap: 10px; margin-top: 14px; }
.quick-actions--single .pill-btn { font-weight: 700; }

/* ==================================================================== *
 * APPLE-DESIGN-002 — accessibility preference / text-scale micro-wave
 * Issue #103. Closes the two P2 gaps from the Codex Apple audit
 * (Issue #102 comment 5551283729) plus its P3 text-scale item.
 * Predecessor accepted head: cbb5dbb059dbd309eaba34dacc23f75205aef8d0
 *
 * Every rule below is either inside an accessibility-preference query or
 * is a wrap-only fix that engages solely when content exceeds its line.
 * The default appearance is unchanged.
 * ==================================================================== */

/* --- SCOPE A. prefers-reduced-transparency ---------------------------
   The site has exactly ONE blurred surface: the sticky header
   (`rgba(255,255,255,.92)` + `backdrop-filter`). The mobile nav panel is
   already fully opaque (`#fff`) and needs no fallback — it is asserted
   below so it cannot silently become translucent later.
   NO new blur and NO new translucency is introduced here; this only
   supplies solid fallbacks for material that already exists.

   Support boundary, stated rather than assumed: `prefers-reduced-
   transparency` is not yet universally implemented. Where the browser
   does not support it these rules simply never match, and the default
   (already legible, AA-passing) presentation stands. No JavaScript
   shim is added, and no support is claimed that is not real. */
@media (prefers-reduced-transparency: reduce) {
  header.site {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* The blur previously supplied part of the separation from content;
       with it gone the border does that job on its own. */
    border-bottom-color: var(--ink-300);
  }
  /* Modal scrim: a translucent dimmer becomes near-solid so the dialog
     is unambiguously separated from the page behind it. */
  .compare-panel-overlay { background: rgb(15, 23, 42); opacity: .96; }
  /* THE MAIN dark band uses translucent white tints over a gradient.
     Solid equivalents keep the same visual roles without transparency. */
  /* CODEX-HOLD P1-1: every one of these is THE MAIN-owned and is scoped to
     its band. `.proof-card`, `.proof-shot` and `.proof-status--*` are shared
     class names that also style LIGHT evidence cards elsewhere on the site;
     an unscoped dark fallback turned those unreadable (H3 1.15:1). */
  .themain-proof .section-tag { background: #26324a; }
  .themain-proof .proof-card { background: #1b2438; border-color: #3b4761; }
  .themain-proof .proof-status--internal,
  .themain-proof .proof-status--prototype { background: #2f3b52; }
  .themain-proof .proof-shot { background: #1b2438; border-bottom-color: #3b4761; }
  .compare-tray .compare-tray-item { background: #26324a; }
  /* An image caption scrim must stay readable without a gradient fade. */
  .themain-proof .proof-shot-caption { background: rgb(15, 23, 42); }
}

/* --- SCOPE B. prefers-contrast: more ---------------------------------
   Bounded strengthening only. THE PLAN's blue/ink brand is preserved —
   this darkens text and borders and thickens the focus ring; it does not
   invert the theme, does not restyle every component, and adds no
   outline to non-interactive elements. Normal-mode AA measurements
   (already recorded in DESIGN-ENG-002) are untouched. */
@media (prefers-contrast: more) {
  :root {
    /* Secondary text tones move up one step. --ink-900 is already the
       darkest and is deliberately left alone. */
    --ink-500: #334155;   /* 4.55:1 -> 9.0:1 on --surface-alt */
    --ink-700: #1e293b;
    --line-c:  #94a3b8;   /* borders become clearly visible */
    --ink-300: #64748b;
  }
  /* Interactive boundaries must read as interactive. */
  .btn, .pill-btn, .hero-cta, .category-tab, .commercial-quick-action,
  .course-list-card, .campus-card, .category-card, .opening-card,
  .search-box, .finder-input-row textarea, #consultation input, #consultation select {
    border-color: var(--ink-500);
  }
  /* Focus must remain at least as clear as before — it gets clearer. */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline-width: 3px; outline-color: var(--blue-700); outline-offset: 3px;
  }
  /* The dark THE MAIN band raises its own body text rather than relying
     on the shared --ink-300 token. */
  .themain-proof .proof-summary, .themain-proof .proof-value { color: #f1f5f9; }
  .themain-proof-intro { color: #f1f5f9; }
  /* Editorial metadata that is intentionally secondary stays secondary,
     but not faint. */
  .ed-date, .ed-summary { color: var(--ink-700); }
}

/* --- SCOPE C. 200% text-scale — bounded fixes for MEASURED failures ---
   Verified in a real browser by scaling every author font-size x2 (WCAG
   1.4.4 text-only resize, which is the strict test for a px-based type
   system). At 375px only TWO surfaces actually failed, and only these
   two are changed. No rem/clamp migration, no type-system rewrite.

   1) `.search-box` — a non-wrapping flex row: input + button measured
      400px of content inside a 335px box, which forced the whole page
      wider (viewport 375 -> 420).
   2) `.mobile-sticky` — the fixed bottom CTA bar measured 421px on a
      375px viewport because its two buttons could not wrap.

   `flex-wrap` engages only when the content genuinely exceeds the line,
   so at normal text size both are byte-for-byte identical to before. */
/* 4) The mobile sticky CTA bar reserved a FIXED `padding-bottom: 68px` on
      `body`. At 200% text the bar grows past that, so page content — the
      course-detail 상담 CTA and 비교 담기 button — ended up overlapping it
      (3 overlapping control pairs measured at 390px/200%).
      Measuring the bar at runtime and reserving its real height keeps the
      reservation correct at ANY text size, and is a smaller change than a
      type-system migration. `--sticky-h` falls back to the original 68px
      when the bar is absent or the script has not run. */
@media (max-width: 767px) {
  body { padding-bottom: calc(var(--sticky-h) + 8px); }
}

/* 3) `.skip-link` hid itself at a fixed `top: -48px`. At 200% text the link
      is ~61px tall, so 13px of it intruded over the page. Hiding by its OWN
      height instead is text-size independent. The focused position is
      unchanged, so the visible behaviour is identical at normal size. */
.skip-link { top: 0; transform: translateY(-120%); }
.skip-link:focus { top: 0; transform: translateY(12px); }

.search-box { flex-wrap: wrap; }
.search-box input { min-width: 0; flex: 1 1 12ch; }
.search-box button { flex: 0 1 auto; }
@media (max-width: 767px) {
  .mobile-sticky { flex-wrap: wrap; }
  .mobile-sticky a { min-width: 0; flex: 1 1 40%; }
}

/* --- CODEX-HOLD P1-2 — Finder intrinsic minimum at 375px / 200% ------
   A CSS grid item's default `min-width: auto` means it refuses to shrink
   below its own intrinsic minimum content width. At 375px with authored
   text at 200%, `.finder-box` (and the companion panel MKT-BRAND-003 later
   removed) imposed a 349px column inside a 335px container, pushing content
   past the viewport edge. `min-width: 0` lets the items reflow to the space
   that actually exists.

   This is the smallest ownership-scoped fix: no Finder restructure, no
   `width: 100vw` workaround, no `overflow-x: hidden` masking, and no
   clipping — the content genuinely reflows and stays fully readable.

   MKT-BRAND-003: written as a universal child selector so the guarantee
   cannot be lost by editing the Finder's children again — every direct child
   of the band is covered, present and future. */
.finder-layout > * { min-width: 0; }
/* The same intrinsic-minimum trap applies to the other two-column
   compositions this Wave verifies at 200%. */
.quiz-box > *, .nonwrite-consultation > * { min-width: 0; }

/* ==================================================================== *
 * MKT-BRAND-002 — campaign-first Hero (Issue #104)
 * ONE campaign, one primary CTA, at most one strong secondary. No
 * carousel, no auto-slide, no stacked promo boxes, no blinking. The
 * composition must read premium with NO image, because a campaign
 * without a real asset must never be padded out with stock imagery.
 * ==================================================================== */
.chero--campaign { align-items: center; }
.chero--campaign .chero-copy { max-width: 42rem; }

.camp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.camp-badge {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--blue-600);
  padding: 6px 12px; border-radius: var(--r-pill);
}
.camp-deadline {
  font-size: 12.5px; font-weight: 700; color: var(--amber-700);
  background: var(--amber-50); border: 1px solid var(--amber-100);
  padding: 5px 11px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
/* Specificity note: the legacy `.hero h1` rule (0,1,1) outranks any single
   class, so `.camp-title` alone never wins. Scoping to the campaign hero
   gives (0,2,0), which does. The legacy rule is deliberately NOT edited here
   — it also governs the accepted evergreen hero, and changing it is outside
   this Work Order. (Recorded as an observation in the completion evidence.) */
.chero--campaign .camp-title { letter-spacing: -.02em; }
.camp-sub { max-width: 40rem; }

/* The campaign panel earns its premium feel from type, spacing and a
   restrained ground — not from decoration. */
.chero--campaign:not(.chero--campaign-visual) .chero-copy {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--surface) 78%);
  border: 1px solid var(--line-c);
  border-radius: var(--r-lg);
  padding: 30px 28px 28px;
  box-shadow: var(--shadow-sm);
  max-width: none;
}

/* CTA hierarchy — inherits the DESIGN-ENG-002 three-tier discipline. */
.camp-ctas { margin-top: 20px; }
.camp-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min);
  padding: 13px 24px; border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none; border: 1px solid transparent;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--dur-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.camp-cta:active { transform: scale(var(--press-scale)); }
.camp-cta--primary {
  background: var(--blue-500); border-color: var(--blue-500); color: #fff;
  font-size: 15px; padding: 14px 28px; min-height: 50px;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .28), 0 6px 16px rgba(37, 99, 235, .18);
}
.camp-cta--secondary {
  background: var(--surface); border-color: var(--ink-300); color: var(--ink-900); font-size: 13.5px;
}
@media (hover: hover) and (pointer: fine) {
  .camp-cta--primary:hover { background: var(--blue-600); }
  .camp-cta--secondary:hover { border-color: var(--blue-500); color: var(--blue-600); }
}

.camp-visual img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }

@media (min-width: 960px) {
  .chero--campaign-visual { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  /* Issue #104 "Desktop 폭 적극 활용": with no campaign image there is no
     second column, so the panel must span the full container instead of
     leaving ~50% of prime real estate empty. */
  .chero--campaign:not(.chero--campaign-visual) { grid-template-columns: minmax(0, 1fr); }
  .chero--campaign:not(.chero--campaign-visual) .chero-copy { padding: 40px 40px 36px; }
  .chero--campaign .camp-title { font-size: 38px; }
  .chero--campaign .camp-sub { font-size: 16.5px; max-width: 64ch; }
}
@media (max-width: 767px) {
  .chero--campaign:not(.chero--campaign-visual) .chero-copy { padding: 22px 18px 20px; }
  .camp-ctas { flex-direction: column; align-items: stretch; }
  .camp-cta { width: 100%; }
  .chero--campaign .camp-title { font-size: 24px; }
}
/* Reduced transparency: the campaign ground becomes a solid surface. */
@media (prefers-reduced-transparency: reduce) {
  .chero--campaign:not(.chero--campaign-visual) .chero-copy {
    background: var(--blue-50); border-color: var(--ink-300);
  }
}

/* ==================================================================== *
 * MKT-BRAND-002 P1-COMMERCIAL-1 — evergreen commercial Hero
 * (PM HOLD 5568897486). No active campaign must NOT mean a founder Hero.
 * The supporting column carries course discovery built from canonical
 * catalogue counts. No portrait, no THE MAIN, no invented claim.
 * ==================================================================== */
.hero-discovery {
  border: 1px solid var(--line-c);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, var(--surface-alt) 100%);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-sm);
}
.hero-discovery-title {
  margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink-900);
}
.hero-discovery-note { margin: 6px 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--ink-700); }
.hero-discovery-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line-c);
  border-top: 1px solid var(--line-c); border-bottom: 1px solid var(--line-c);
}
.hero-discovery-list li { background: var(--surface); }
.hero-discovery-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: var(--tap-min); padding: 9px 2px;
  text-decoration: none; color: inherit;
  transition: background var(--transition), color var(--transition),
              transform var(--dur-press) var(--ease-out);
}
.hero-discovery-list a:active { transform: scale(var(--press-scale)); }
.hero-discovery-label { font-size: 13.5px; font-weight: 700; color: var(--ink-900); word-break: keep-all; }
.hero-discovery-count { font-size: 12px; font-weight: 700; color: var(--blue-700); white-space: nowrap; }
.hero-discovery-link {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--blue-600); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .hero-discovery-list a:hover { background: var(--blue-50); color: var(--blue-700); }
  .hero-discovery-link:hover { text-decoration: underline; }
}
@media not all and (hover: hover) {
  .hero-discovery-list a:hover { background: var(--blue-50); }
}
@media (min-width: 960px) {
  .hero-discovery { align-self: stretch; display: flex; flex-direction: column; }
  .hero-discovery-list { margin-top: auto; }
}
@media (max-width: 767px) {
  .hero-discovery { padding: 17px 16px 15px; }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-discovery { background: var(--surface-alt); border-color: var(--ink-300); }
}

/* --- P2-VISUAL-1 — bounded desktop Hero title fix ---------------------
   The legacy `.hero h1` rule (specificity 0,1,1) has been silently
   overriding `.chero-title` (0,1,0), capping the desktop evergreen Hero
   headline at 30px instead of the intended 40px — so the first screen read
   as an enlarged mobile layout. The legacy rule is NOT edited (it still
   governs other `.hero` pages); the commercial Hero's own title is raised
   to (0,2,0) so the intended size applies where it was designed to.
   Scoped to `.chero`, so nothing outside the commercial Hero moves. */
.chero .chero-title { font-size: 29px; }
@media (min-width: 900px) {
  .chero .chero-title { font-size: 40px; }
}
@media (max-width: 899px) {
  .chero .chero-title { font-size: 23px; }
}

/* ==================================================================== *
 * VISUAL-BRAND-001A — Option A image-led campaign Hero / course-family
 * cards / campus media slots. Issue #108. Predecessor accepted head:
 * 9125cf076059e9d5964097a48c0eefd5a071e667.
 *
 * Every image here is a registry-backed <picture> with intrinsic
 * width/height (space reserved before bytes arrive) and a declared
 * aspect-ratio on its frame, so late media discovery cannot shift layout.
 * Nothing rotates, nothing autoplays, nothing is a carousel.
 * ==================================================================== */

/* --- image frames: reserve, never stretch, never overflow --- */
.va-picture { display: block; width: 100%; }
.va-picture img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Scope B: image-dominant campaign Hero ---------------------------
   The picture is the ground (desktop ~2:1, phone 4:5 via a dedicated
   crop). The copy panel is HTML — nothing critical is baked into the
   artwork — laid over a scrim on desktop and stacked below on phones. */
.chero--campaign-media { display: block; position: relative; }
.camp-stage { position: relative; }
.chero--campaign-media .camp-media {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: #0f2a6b;
  aspect-ratio: 4 / 5;
}
.chero--campaign-media .camp-media .va-picture,
.chero--campaign-media .camp-media img { height: 100%; }
.chero--campaign-media .camp-media-caption {
  position: absolute; right: 10px; bottom: 8px; max-width: calc(100% - 20px);
  font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .78); word-break: keep-all;
  background: rgba(8, 22, 51, .55); padding: 3px 8px; border-radius: var(--r-pill);
}
.chero--campaign-media .chero-copy {
  max-width: none; margin-top: 16px; padding: 0; background: none; border: 0; box-shadow: none;
}
.chero--campaign-media .camp-title { color: var(--ink-900); }
/* The countable trust band lives UNDER the picture in every viewport. */
.chero--campaign-media .camp-stats-band {
  margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line-c); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink-900);
}

@media (min-width: 768px) {
  .chero--campaign-media .camp-media { aspect-ratio: 16 / 9; }
}
@media (min-width: 960px) {
  .chero--campaign-media { padding: 28px 0 24px; }
  /* The stage owns the 2:1 ratio. Its in-flow child is the copy, so when
     the copy (at 200% text) is taller than 2:1 permits, the stage grows and
     the absolutely-filled picture grows with it — measured 1024@200%: the
     copy previously overflowed the frame by 219px; it now cannot. */
  .camp-stage { aspect-ratio: 2 / 1; display: flex; align-items: center; }
  .chero--campaign-media .camp-media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  /* Scrim: a directional darkening on the left 60% so white HTML copy is
     readable regardless of the artwork underneath. Contrast is measured
     on the composited result in verify-visual-brand-001a.js. */
  .chero--campaign-media .camp-media::after {
    content: ''; position: absolute; inset: 0;
    /* Measured: the copy column spans ~5%–49% of the frame, and the artwork's
       light band crosses its right edge. The strong stop therefore runs to
       50% so no pixel under the copy is lighter than the AA floor needs. */
    background: linear-gradient(90deg, rgba(8, 22, 51, .88) 0%, rgba(8, 22, 51, .80) 50%, rgba(8, 22, 51, 0) 72%);
    pointer-events: none;
  }
  .chero--campaign-media .chero-copy {
    position: relative; margin: 0 0 0 44px; padding: 36px 0;
    width: min(46%, 34rem); z-index: 1;
    color: #fff;
  }
  .chero--campaign-media .camp-title { color: #fff; font-size: 40px; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
  .chero--campaign-media .camp-sub { color: rgba(255, 255, 255, .9); font-size: 16px; max-width: none; }
  .chero--campaign-media .camp-badge { background: #fff; color: var(--blue-700); }
  .chero--campaign-media .camp-deadline { background: rgba(255, 255, 255, .92); }
  .chero--campaign-media .camp-cta--secondary { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
  .chero--campaign-media .camp-cta--secondary:hover { border-color: #fff; color: #fff; }
  /* Stats leave the overlay and sit under the picture as a quiet band. */
  .chero--campaign-media .camp-stats-band { margin-top: 16px; }
}
@media (min-width: 1200px) {
  .chero--campaign-media .chero-copy { margin-left: 56px; width: min(44%, 36rem); }
  .chero--campaign-media .camp-title { font-size: 44px; }
}
/* Accessibility preferences: the scrim becomes a SOLID panel (no
   transparency to reduce), and increased contrast deepens it. */
@media (prefers-reduced-transparency: reduce) and (min-width: 960px) {
  .chero--campaign-media .camp-media::after { background: linear-gradient(90deg, #081633 0%, #081633 58%, rgba(8, 22, 51, 0) 68%); }
}
@media (prefers-contrast: more) and (min-width: 960px) {
  .chero--campaign-media .camp-media::after { background: linear-gradient(90deg, rgba(3, 10, 28, .94) 0%, rgba(3, 10, 28, .86) 48%, rgba(3, 10, 28, 0) 70%); }
}

/* --- Scope D: six course-family cards --------------------------------
   Image-led when an approved family visual exists; otherwise the designed
   non-image state. Both are the same navigation surface. */
.category-grid .category-card {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  text-decoration: none; color: inherit; background: var(--surface);
}
.category-card-media { aspect-ratio: 16 / 10; background: var(--blue-50); overflow: hidden; }
.category-card-media .va-picture, .category-card-media img { height: 100%; }
.category-card-mark {
  font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--blue-600);
  padding: 18px 18px 0; font-variant-numeric: tabular-nums;
}
.category-card--text::before {
  content: ''; display: block; height: 6px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-100));
}
.category-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 18px 16px; gap: 6px; }
.category-grid .category-card h3 { margin: 0; font-size: 15.5px; word-break: keep-all; }
.category-grid .category-card p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-500); }
.category-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.category-card-count { font-size: 12px; font-weight: 700; color: var(--blue-700); }
.category-grid .category-card .go { margin: 0; }

/* --- Scope E: campus media slots (REAL_THEPLAN_PHOTO only) ----------- */
.campus-card--media { padding: 0; overflow: hidden; }
.campus-card-media { aspect-ratio: 16 / 10; background: var(--ink-100); }
.campus-card-media .va-picture, .campus-card-media img { height: 100%; }
.campus-card--media > h3, .campus-card--media > .meta, .campus-card--media > .apply { margin-left: 18px; margin-right: 18px; }
.campus-card--media > h3 { margin-top: 14px; }
.campus-card--media > .apply { margin-bottom: 16px; }
.campus-lead { margin: 0 0 18px; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 2 / 1; background: var(--ink-100); }
.campus-lead .va-picture, .campus-lead img { height: 100%; }
.campus-lead figcaption, .campus-support-media figcaption { font-size: 12px; color: var(--ink-500); margin-top: 6px; }
.campus-support-media { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
.campus-support-media figure { margin: 0; }
.campus-support-media .va-picture { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 768px) { .campus-support-media { grid-template-columns: repeat(3, 1fr); } }

/* ==================================================================== *
 * VISUAL-BRAND-001B — evergreen image-led Hero / six-family art /
 * floating Quick Dock. Issue #109. Predecessor accepted head:
 * d0ddfdfcdf5e710d5ced4564a89f2d0cddec8e6d.
 * ==================================================================== */

/* --- Scope A: evergreen Hero shares the campaign stage composition ---- */
.chero--evergreen-media .chero-copy .hero-chips { margin-bottom: 12px; }
.chero--evergreen-media .hero-chip { background: rgba(255, 255, 255, .92); color: var(--blue-700); }
.chero--evergreen-media .chero-copy .chero-title { margin-bottom: 12px; }
.chero--evergreen-media .chero-copy .hero-ctas { margin-bottom: 0; }
.chero--evergreen-media .hero-cta { background: var(--surface); }
.chero--evergreen-media .hero-cta--primary { background: var(--blue-500); color: #fff; }
@media (min-width: 960px) {
  .chero--evergreen-media .chero-copy .chero-title { color: #fff; font-size: 40px; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
  .chero--evergreen-media .chero-copy .chero-sub { color: rgba(255, 255, 255, .9); font-size: 16px; }
  .chero--evergreen-media .hero-cta { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
  .chero--evergreen-media .hero-cta:hover { border-color: #fff; color: #fff; }
  .chero--evergreen-media .hero-cta--primary { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
  .chero--evergreen-media .hero-cta--primary:hover { background: var(--blue-600); }
}
@media (min-width: 1200px) { .chero--evergreen-media .chero-copy .chero-title { font-size: 44px; } }
/* The six-family discovery becomes a compact strip UNDER the stage. */
.hero-discovery--strip { margin-top: 12px; padding: 14px 16px 12px; }
.hero-discovery--strip .hero-discovery-title { font-size: 13px; color: var(--ink-500); letter-spacing: .04em; text-transform: uppercase; }
.hero-discovery--strip .hero-discovery-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 8px;
  background: var(--line-c); border: 1px solid var(--line-c); border-radius: var(--r-md); overflow: hidden;
}
.hero-discovery--strip .hero-discovery-list a { padding: 9px 10px; }
.hero-discovery--strip .hero-discovery-link { margin-top: 8px; }
@media (min-width: 768px) { .hero-discovery--strip .hero-discovery-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) {
  .hero-discovery--strip { display: block; align-self: auto; }
  .hero-discovery--strip .hero-discovery-list { grid-template-columns: repeat(6, 1fr); margin-top: 8px; }
}

/* --- Scope B: category cards get a family accent under the artwork ----- */
.category-card--media .category-card-media { position: relative; }
.category-card--media h3 { font-size: 16px; }
.category-card-value { font-size: 12.5px; color: var(--ink-700); line-height: 1.55; }

/* --- Scope C: floating Quick Dock (desktop) + TOP affordance ---------- */
.quick-dock {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%) translateX(12px);
  display: none; flex-direction: column; gap: 4px; z-index: 55;
  padding: 6px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line-c);
  border-radius: 14px; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.quick-dock[data-visible="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); transition-delay: 0s; }
@media (min-width: 1280px) { .quick-dock { display: flex; } }
.quick-dock-item, .quick-dock-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 56px; min-height: 52px; padding: 6px 4px; border-radius: 10px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--ink-700); font-size: 11px; font-weight: 700; text-decoration: none; letter-spacing: -.01em;
  transition: background var(--transition), color var(--transition);
}
.quick-dock-item svg, .quick-dock-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-dock-item:hover, .quick-dock-toggle:hover { background: var(--ink-100); color: var(--ink-900); }
.quick-dock-item--primary { background: var(--blue-500); color: #fff; }
.quick-dock-item--primary:hover { background: var(--blue-600); color: #fff; }
.quick-dock-sep { height: 1px; background: var(--line-c); margin: 2px 6px; }
.quick-dock-more { position: relative; }
.quick-dock-panel[hidden] { display: none; }
.quick-dock-panel {
  position: absolute; right: calc(100% + 8px); top: 0; display: grid; gap: 2px; min-width: 150px;
  padding: 6px; background: #fff; border: 1px solid var(--line-c); border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.quick-dock-panel a {
  display: flex; align-items: center; min-height: var(--tap-min); padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--ink-900); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.quick-dock-panel a:hover { background: var(--ink-100); }
.quick-dock-toggle[aria-expanded="true"] { background: var(--ink-100); color: var(--ink-900); }
/* Mobile / tablet: NO vertical dock. One small TOP affordance, above the sticky bar on phones. */
.quick-top {
  position: fixed; right: 12px; bottom: 16px; z-index: 55;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-c);
  background: rgba(255, 255, 255, .96); color: var(--ink-900); box-shadow: var(--shadow-md);
  display: none; align-items: center; justify-content: center; cursor: pointer; font-family: inherit;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.quick-top[data-visible="true"] { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.quick-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1279px) { .quick-top { display: flex; } }
@media (max-width: 767px) { .quick-top { bottom: calc(var(--sticky-h) + 12px); } body.compare-tray-active .quick-top { display: none; } }
@media (prefers-reduced-motion: reduce) { .quick-dock, .quick-top { transition-duration: 0s; transform: translateY(-50%); } .quick-top { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .quick-dock, .quick-top { background: #fff; } }
.quick-dock-item:focus-visible, .quick-dock-toggle:focus-visible, .quick-dock-panel a:focus-visible, .quick-top:focus-visible {
  outline: 2px solid var(--blue-500); outline-offset: 2px;
}

/* ==================================================================== *
 * VISUAL-BRAND-001C — reusable COURSE EXPERIENCE template (PREVIEW-rendered
 * this wave). Family palette via --fam-* custom properties; one design
 * system for every course. Issue #110 §7.
 * ==================================================================== */
.cx-hero { background: var(--fam-bg, var(--ink-900)); color: var(--fam-ink, #fff); padding: 36px 0 32px; }
.cx-hero-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
.cx-fam { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--fam-accent, #93c5fd); margin-bottom: 10px; }
.cx-hero h1 { font-size: 28px; line-height: 1.18; letter-spacing: -.03em; margin: 8px 0 12px; word-break: keep-all; color: inherit; }
.cx-summary { font-size: 15.5px; line-height: 1.7; opacity: .92; margin: 0 0 8px; word-break: keep-all; }
.cx-status { font-size: 12.5px; font-weight: 700; color: var(--fam-accent); margin: 0 0 18px; }
.cx-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.cx-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 1px solid rgba(255,255,255,.55); color: inherit; background: transparent; cursor: pointer; font-family: inherit; font-size: 14px; }
.cx-cta--primary { background: var(--fam-accent, var(--blue-500)); border-color: var(--fam-accent, var(--blue-500)); color: var(--fam-bg, #fff); }
.cx-cta:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; }
.cx-hero-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: rgba(255,255,255,.06); }
.cx-hero-media .va-picture, .cx-hero-media img { height: 100%; object-fit: cover; }
.cx-hero-fallback { height: 100%; display: flex; align-items: flex-end; padding: 18px; font-size: 44px; font-weight: 900; letter-spacing: -.04em; color: rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 60%); }
@media (min-width: 960px) { .cx-hero { padding: 56px 0 52px; } .cx-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 48px; } .cx-hero h1 { font-size: 40px; } }
.cx-section { padding: 40px 0; }
.cx-section--alt { background: var(--surface-alt); }
.cx-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.cx-no { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--blue-600); }
.cx-head h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.cx-lead { font-size: 17px; line-height: 1.7; margin: 0 0 14px; max-width: 46rem; word-break: keep-all; }
.cx-note { font-size: 13px; color: var(--ink-500); line-height: 1.6; margin: 0 0 12px; }
.cx-pending { font-size: 14px; color: var(--ink-500); background: var(--surface); border: 1px dashed var(--ink-300); border-radius: var(--r-md); padding: 14px 16px; margin: 0; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-chip { font-size: 13px; font-weight: 700; padding: 8px 12px; border-radius: 999px; background: var(--blue-50); color: var(--blue-700); }
.cx-chip--cert { background: var(--amber-50); color: var(--amber-700); }
.cx-chip--target { background: var(--green-50); color: var(--green-600); }
.cx-works, .cx-personas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cx-works li, .cx-personas li { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--line-c); border-radius: var(--r-md); background: var(--surface); }
.cx-works li strong, .cx-personas li strong { font-size: 15px; }
.cx-works li span, .cx-personas li span { font-size: 13px; color: var(--ink-700); line-height: 1.6; }
.cx-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: cx; }
.cx-flow li { display: grid; gap: 4px; padding: 16px 18px 16px 18px; border-left: 3px solid var(--blue-500); background: var(--surface); border-radius: var(--r-md); }
.cx-flow-no { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--blue-600); }
.cx-flow li strong { font-size: 15.5px; }
.cx-flow li span:not(.cx-flow-no) { font-size: 13px; color: var(--ink-700); }
.cx-sub { font-size: 15px; margin: 22px 0 10px; }
.cx-faq details { border: 1px solid var(--line-c); border-radius: var(--r-md); padding: 0 16px; background: var(--surface); margin-bottom: 8px; }
.cx-faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; min-height: var(--tap-min); display: flex; align-items: center; }
.cx-faq p { margin: 0 0 14px; color: var(--ink-700); line-height: 1.7; }
.cx-final { background: var(--fam-bg, var(--ink-900)); color: var(--fam-ink, #fff); border-radius: var(--r-lg); padding: 34px 26px; text-align: center; }
.cx-final h2 { margin: 0 0 6px; font-size: 24px; color: inherit; }
.cx-final p { margin: 0 0 18px; opacity: .9; }
@media (min-width: 768px) { .cx-works, .cx-personas { grid-template-columns: 1fr 1fr; } .cx-flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .cx-flow { grid-template-columns: repeat(3, 1fr); } }

/* VISUAL-BRAND-001C Codex HOLD — category-level guidance label inside the course experience template */
.cx-scope { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--fam-accent, #94a3b8); background: rgba(148, 163, 184, 0.12); color: #475569; font-size: 14px; line-height: 1.5; border-radius: 0 8px 8px 0; }

/* ---------------------------------------------------------------------------
 * DESIGN-AUTHENTICITY-001F (Issue #121 `5739186063`) — THE MAIN guarantee block.
 * One horizontal card (~569px section) instead of a four-card project grid, so
 * the academy's own story stays in front (#101) while the differentiator is
 * still stated with real, contract-cleared evidence.
 * ------------------------------------------------------------------------- */
.proof-grid--single { display: block; }
.proof-grid--single .proof-card { max-width: 760px; }
.themain-hub-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-weight: 700; }
@media (min-width: 720px) {
  .proof-grid--single .proof-card--shot {
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: center;
  }
  .proof-grid--single .proof-card--shot .proof-shot img { max-height: 150px; object-fit: cover; object-position: top; }
  .proof-grid--single .proof-card--shot .proof-card-body { padding-top: 0; }
}
@media (max-width: 719px) {
  .proof-grid--single .proof-card--shot .proof-shot img { max-height: 150px; object-fit: cover; object-position: top; }
}

/* ---------------------------------------------------------------------------
 * DESIGN-AUTHENTICITY-001G G3 (Issue #121 `5760447560`) — the homepage news
 * and guide teasers as a compact 3 / 2 / 1 column hierarchy.
 * Scoped to #news-guide-excerpts so /news/ and /learn/ keep their own list.
 * Every record and link stays: nothing is sliced, hidden or removed. The summary
 * is clamped to two lines (already the site's rule); title, date, category and
 * the whole-card link are untouched. No motion is added.
 * ------------------------------------------------------------------------- */
#news-guide-excerpts .ed-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px;
}
#news-guide-excerpts .ed-row { min-height: 44px; }
#news-guide-excerpts .ed-summary { -webkit-line-clamp: 2; }
@media (max-width: 959px) {
  #news-guide-excerpts .ed-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  #news-guide-excerpts .ed-list { grid-template-columns: 1fr; }
}