/* =========================================================
   버디에듀 — Apple-inspired design system
   Single accent, alternating full-bleed tiles, pill CTAs,
   shadow reserved for product imagery only.
   ========================================================= */
:root{
  --a-primary: #0066cc;
  --a-primary-focus: #0071e3;
  --a-primary-on-dark: #2997ff;

  /* Secondary signature accent — a bold duo layered on top of the single
     Apple blue, used sparingly for hero/CTA moments so the site reads as
     its own thing rather than a straight Apple clone. */
  --a-accent-2a: #6C4DFF;
  --a-accent-2b: #FF3D9A;
  --a-accent-gradient: linear-gradient(135deg, var(--a-accent-2a), var(--a-accent-2b));

  --a-ink: #1d1d1f;
  --a-body-on-dark: #ffffff;
  --a-body-muted: #cccccc;
  --a-ink-muted-80: #333333;
  --a-ink-muted-48: #7a7a7a;

  --a-divider-soft: rgba(0,0,0,0.08);
  --a-hairline: #e0e0e0;

  --a-canvas: #ffffff;
  --a-parchment: #f5f5f7;
  --a-pearl: #fafafc;
  --a-tile-1: #272729;
  --a-tile-2: #2a2a2c;
  --a-tile-3: #252527;
  --a-black: #000000;
  --a-chip-translucent: rgba(210,210,215,0.64);

  --a-radius-xs: 5px;
  --a-radius-sm: 8px;
  --a-radius-md: 11px;
  --a-radius-lg: 18px;
  --a-radius-pill: 9999px;

  --a-space-xxs: 4px;
  --a-space-xs: 8px;
  --a-space-sm: 12px;
  --a-space-md: 17px;
  --a-space-lg: 24px;
  --a-space-xl: 32px;
  --a-space-xxl: 48px;
  --a-space-section: 80px;

  --a-font-display: "Space Grotesk", "Pretendard", system-ui, -apple-system, sans-serif;
  --a-font-text: "Inter", "Pretendard", system-ui, -apple-system, sans-serif;

  --a-shadow-product: 3px 5px 30px rgba(0,0,0,0.22);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ transition-duration: 0.001ms !important; }
}
body{
  margin: 0;
  font-family: var(--a-font-text);
  color: var(--a-ink);
  background: var(--a-canvas);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  font-feature-settings: "ss03";
  -webkit-font-smoothing: antialiased;
  /* Korean text wraps at any character by default (no spaces between
     syllables to hint at word boundaries), which can split a word
     mid-syllable at the line edge. keep-all restricts automatic wraps
     to actual spaces between 어절, so line breaks land on real word
     boundaries; overflow-wrap still allows a hard break as a fallback
     for anything genuinely too long to fit (e.g. a long email/URL). */
  word-break: keep-all;
  overflow-wrap: break-word;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,p{ margin: 0; }

a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--a-primary-focus);
  outline-offset: 2px;
}

.a-wrap{ max-width: 1440px; margin-inline: auto; padding-inline: 22px; }
.a-wrap-narrow{ max-width: 980px; margin-inline: auto; padding-inline: 22px; }

/* Typography */
/* 6.5vw (was 9vw) — 9vw let long two-line headlines (e.g. services.html's
   "막막하지 않게 짚어드립니다") outgrow their container between roughly
   600-1000px viewports, wrapping into an extra orphaned line. 6.5vw keeps
   mobile/desktop sizing close to before while giving long lines enough
   room at in-between widths; paired with the wider hero-content max-width
   below so the container doesn't cap out before the font does. */
/* Capped down from 108px — at that size, bold two-line Korean headlines
   (e.g. "학위도, 자격증도, 막막하지 않게 짚어드립니다") read as oversized/
   awkward rather than confident, since Hangul glyphs are visually denser
   per character than the Latin display type this scale was tuned for.
   84px keeps the hero feeling large on desktop without tipping into
   "billboard" territory; line-height loosened slightly (0.98→1.05) since
   the tighter value was set up for the bigger size and felt cramped with
   bold Hangul at any size. Used as the H1 on 17 of 21 pages. */
.a-hero-display{ font-family: var(--a-font-display); font-size: clamp(34px, 5.6vw, 84px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.a-display-lg{ font-family: var(--a-font-display); font-size: clamp(28px, 4.5vw, 40px); font-weight: 600; line-height: 1.1; }
.a-display-md{ font-family: var(--a-font-text); font-size: 34px; font-weight: 600; line-height: 1.47; letter-spacing: -0.374px; }
.a-lead{ font-family: var(--a-font-display); font-size: clamp(19px, 2.6vw, 28px); font-weight: 400; line-height: 1.38; letter-spacing: 0.196px; }
.a-lead-airy{ font-family: var(--a-font-text); font-size: 24px; font-weight: 300; line-height: 1.5; }
.a-tagline{ font-family: var(--a-font-display); font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
.a-body-strong{ font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.a-caption{ font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }
.a-caption-strong{ font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -0.224px; }
.a-fine-print{ font-size: 12px; line-height: 1; letter-spacing: -0.12px; color: var(--a-ink-muted-48); }
.a-muted{ color: var(--a-ink-muted-48); }
.a-on-dark .a-muted{ color: var(--a-body-muted); }

/* Global nav (black, 44px) */
.a-global-nav{
  position: sticky; top: 0; z-index: 100;
  background: var(--a-black);
  color: var(--a-body-on-dark);
  height: 44px;
}
.a-global-nav .a-wrap{ height: 44px; display: flex; align-items: center; justify-content: space-between; }
.a-global-nav .a-logo{ font-family: var(--a-font-display); font-weight: 600; font-size: 15px; }
.a-global-nav .a-links{ display: none; align-items: center; gap: 22px; }
.a-global-nav .a-links a{ font-size: 12px; letter-spacing: -0.12px; opacity: .82; }
.a-global-nav .a-links a:hover{ opacity: 1; }
.a-global-nav .a-actions{ display: flex; align-items: center; gap: 10px; }
@media (min-width: 834px){ .a-global-nav .a-links{ display: flex; } }

.a-nav-toggle{ display: inline-flex; background: none; border: none; color: #fff; padding: 6px; }
.a-nav-toggle svg{ width: 20px; height: 20px; }
@media (min-width: 834px){ .a-nav-toggle{ display: none; } }

.a-mobile-menu{ display: none; flex-direction: column; background: var(--a-black); padding: 8px 22px 18px; }
.a-mobile-menu.is-open{ display: flex; }
.a-mobile-menu a{ color: #fff; padding: 10px 0; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,0.12); }

/* Nav mega-menu (desktop) — "전공안내" reveals a multi-column dropdown of
   every program/certificate page on hover or keyboard focus, mirroring an
   Apple-style product-line nav so each program is one click away. */
.a-nav-dropdown{ position: relative; }
.a-nav-mega{
  /* No margin-top here on purpose: a gap between the trigger and the panel
     is a dead zone the cursor can slip through on the way down, which was
     closing the menu before it could be reached. Padding-top instead keeps
     the same visual breathing room while staying inside the hoverable box,
     so :hover never drops between the link and the panel. */
  display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding: 20px 28px 28px; z-index: 150;
  grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 32px;
  background: var(--a-canvas); color: var(--a-ink);
  border-radius: var(--a-radius-md); box-shadow: 0 20px 40px rgba(0,0,0,0.22);
  text-align: left; white-space: nowrap;
}
.a-nav-dropdown:hover .a-nav-mega,
.a-nav-dropdown:focus-within .a-nav-mega{ display: grid; }
.a-nav-mega-col h5{ font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--a-ink-muted-48); margin-bottom: 10px; }
.a-nav-mega-col a{ display: block; font-size: 14px; color: var(--a-ink); opacity: 1; padding: 6px 0; }
.a-nav-mega-col a:hover{ color: var(--a-primary); }

/* Mobile nav submenu — flat indented list under "전공안내", always visible
   since touch devices have no hover state for the mega-menu above. */
.a-mobile-submenu{ display: flex; flex-direction: column; padding-left: 14px; }
.a-mobile-submenu-label{ font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 14px; padding: 6px 0 2px; }
.a-mobile-submenu a{ font-size: 14px; opacity: .82; border-bottom: none; padding: 6px 0; }

/* Sub nav (frosted) */
.a-sub-nav{
  position: sticky; top: 44px; z-index: 90;
  background: rgba(245,245,247,0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  height: 52px;
}
.a-sub-nav .a-wrap{ height: 52px; display: flex; align-items: center; justify-content: space-between; }

/* Buttons */
.a-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--a-font-text);
  border: none; cursor: pointer;
  transition: transform .12s ease;
}
.a-btn:active{ transform: scale(0.95); }
.a-btn-primary{
  background: var(--a-primary); color: #fff;
  font-size: 17px; border-radius: var(--a-radius-pill);
  padding: 11px 22px;
}
.a-btn-primary:hover{ background: var(--a-primary-focus); }
.a-btn-secondary-pill{
  background: transparent; color: var(--a-primary);
  border: 1px solid var(--a-primary);
  font-size: 17px; border-radius: var(--a-radius-pill);
  padding: 10px 21px;
}
.a-btn-secondary-pill:hover{ background: rgba(0,102,204,0.06); }
.a-btn-outline-light{
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
  font-size: 17px; border-radius: var(--a-radius-pill);
  padding: 10px 21px;
}
.a-btn-outline-light:hover{ background: rgba(255,255,255,0.14); }
.a-btn-dark-utility{
  background: var(--a-ink); color: #fff;
  font-size: 14px; letter-spacing: -0.224px;
  border-radius: var(--a-radius-sm);
  padding: 8px 15px;
}
.a-btn-store-hero{
  background: var(--a-primary); color: #fff;
  font-size: 18px; font-weight: 300;
  border-radius: var(--a-radius-pill);
  padding: 14px 28px;
}
.a-link{ color: var(--a-primary); }
.a-link:hover{ text-decoration: underline; }
.a-on-dark .a-link{ color: var(--a-primary-on-dark); }

/* Product tiles */
.a-tile{ padding-block: 56px; scroll-margin-top: 44px; }
@media (min-width: 640px){ .a-tile{ padding-block: var(--a-space-section); } }
.a-tile-light{ background: var(--a-canvas); color: var(--a-ink); }
.a-tile-parchment{ background: var(--a-parchment); color: var(--a-ink); }
.a-tile-dark{ background: var(--a-tile-1); color: var(--a-body-on-dark); }
.a-tile-dark-2{ background: var(--a-tile-2); color: var(--a-body-on-dark); }
.a-tile-dark-3{ background: var(--a-tile-3); color: var(--a-body-on-dark); }
.a-tile .a-tile-inner{ text-align: center; max-width: 720px; margin-inline: auto; }
.a-tile .a-tile-inner > * + *{ margin-top: 14px; }
.a-tile .a-cta-row{ display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 22px !important; }

.a-product-visual{ margin-top: 48px; }
.a-product-visual img, .a-product-visual .a-render{
  filter: drop-shadow(var(--a-shadow-product));
}

/* Realistic "product" render — report mockup resting on the tile surface */
.a-render{
  display: inline-block;
  text-align: left;
  background: #fff;
  border-radius: var(--a-radius-sm);
  overflow: hidden;
  width: min(360px, 90vw);
}
.a-render .a-render-bar{ display:flex; gap:6px; padding:10px 14px; background:#f0f0f0; }
.a-render .a-render-dot{ width:7px; height:7px; border-radius:50%; background:#d2d2d7; }
.a-render .a-render-body{ padding: 20px; color: var(--a-ink); }
.a-render .a-row{ display:flex; justify-content:space-between; align-items:center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.a-render .a-row:last-child{ border-bottom: none; }
.a-render .a-row b{ font-weight: 600; }

/* Photo placeholder (real-photo-ready), Apple-tile appropriate: no border-radius, edge crop */
.a-photo{
  position: relative;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg,#e3e3e6,#f5f5f7);
  display: flex; align-items:center; justify-content:center;
  filter: drop-shadow(var(--a-shadow-product));
  border-radius: var(--a-radius-sm);
  overflow: hidden;
  width: min(560px, 92vw);
  margin-inline: auto;
}
.a-photo::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.045) 0 2px, transparent 2px 10px); }
.a-photo .a-photo-icon{ width: 44px; height: 44px; color: rgba(29,29,31,0.32); position: relative; z-index: 1; }
/* Once a real photo fills the tile (background-image set inline + this
   modifier class), drop the placeholder hatch texture and icon so they
   don't render on top of the photo. */
.a-photo.has-image{ background-size: cover; background-position: center; }
.a-photo.has-image::before{ display: none; }
.a-photo.has-image .a-photo-icon{ display: none; }
.a-photo .a-photo-label{
  position:absolute; z-index:2; bottom:12px; left:12px; right:12px;
  font-size: 11.5px; font-weight: 600; text-align:center;
  color: rgba(29,29,31,0.62);
  background: rgba(255,255,255,0.85);
  padding: 6px 10px; border-radius: var(--a-radius-xs);
}

/* Utility cards (store grid style) */
.a-grid{ display:grid; gap: 20px; }
@media (min-width:640px){ .a-grid-2{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:960px){ .a-grid-3{ grid-template-columns: repeat(3,1fr); } }
.a-card{
  background: var(--a-canvas);
  border: 1px solid var(--a-hairline);
  border-radius: var(--a-radius-lg);
  padding: var(--a-space-lg);
}
.a-card .a-card-name{ font-size:17px; font-weight:600; letter-spacing:-0.374px; margin-top: 14px; }
.a-card .a-card-desc{ font-size: 14px; color: var(--a-ink-muted-80); margin-top: 6px; line-height: 1.5; }
.a-card .a-card-link{ display:inline-block; margin-top: 12px; }

/* Stat / editorial tile */
.a-stat-grid{ display:grid; gap: 40px; grid-template-columns: 1fr; text-align:center; }
@media (min-width:640px){ .a-stat-grid{ grid-template-columns: repeat(3,1fr); } }
.a-stat b{ display:block; font-family: var(--a-font-display); font-size: 40px; font-weight:600; letter-spacing:-0.28px; }
.a-stat span{ display:block; margin-top:6px; font-size:14px; letter-spacing:-0.224px; }

/* Quote tile */
.a-quote{ text-align:center; }
.a-quote .a-quote-avatar{ width:56px; height:56px; border-radius:50%; margin-inline:auto; background: linear-gradient(135deg,#3a3a3c,#1d1d1f); border: 1px solid rgba(255,255,255,0.14); }
.a-quote .a-quote-name{ margin-top: 14px; font-size:14px; font-weight:600; }
.a-quote .a-quote-role{ font-size:12px; color: var(--a-body-muted); margin-top:2px; }
/* Anonymized-review monogram — real learner names are redacted (서OO 등), so
   we mark identity with an initial badge rather than a fabricated face photo. */
.a-quote-monogram{
  width: 64px; height: 64px; border-radius: 50%; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--a-accent-gradient);
  font-family: var(--a-font-display); font-size: 22px; font-weight: 700; color: #fff;
  letter-spacing: -0.01em;
}

/* Quote carousel — reuses .a-feature-carousel's crossfade engine (same JS
   hook classes) to rotate several completion stories through one dark
   quote tile, showing program variety without one long static list. */
.a-quote-carousel .a-carousel-dots{ background: rgba(255,255,255,0.12); }
.a-quote-carousel .a-carousel-dot{ background: rgba(255,255,255,0.35); }
.a-quote-carousel .a-carousel-dot.is-active{ background: #fff; }
.a-quote-carousel .a-carousel-toggle{ background: rgba(255,255,255,0.12); color: #fff; }

/* Review card testimonial paragraph — quote copy sits slightly muted so
   it reads calmer than a body-strong claim, with the attribution line
   pushed further back in the hierarchy so the quote stays the focus. */
.a-card .a-review-quote{ margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--a-ink-muted-80); }
.a-card .a-review-author{ margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--a-ink-muted-48); }

/* Footer */
.a-footer{ background: var(--a-parchment); color: var(--a-ink-muted-80); padding-block: 64px 28px; }
.a-footer-grid{ display:grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width:768px){ .a-footer-grid{ grid-template-columns: repeat(4,1fr); } }
.a-footer h4{ font-size:14px; font-weight:600; letter-spacing:-0.224px; margin-bottom: 4px; }
.a-footer ul li a{ font-size:14px; line-height: 2.41; color: var(--a-ink-muted-80); }
.a-footer .a-footer-desc{ margin-top:10px; line-height:1.6; max-width:260px; }
.a-footer ul li a:hover{ color: var(--a-ink); text-decoration: underline; }
.a-footer-bottom{
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--a-hairline);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
}

/* Reveal (kept subtle — Apple uses very little motion) */
.a-reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.a-reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .a-reveal{ opacity:1; transform:none; } }

/* Grid 4 */
@media (min-width:960px){ .a-grid-4{ grid-template-columns: repeat(4,1fr); } }

/* =========================================================
   Pinned scroll section — one fixed viewport, background +
   content swap in place as the user scrolls past each stage.
   ========================================================= */
.a-pin-section{ position: relative; }
.a-pin-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1d1d1f;
  transition: background-color .5s ease;
}
.a-pin-stage{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.a-pin-stage.is-active{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.a-pin-stage > * + *{ margin-top: 14px; }

/* Two-column stage layout: text left, image right — the image gets its
   own continuous scroll-linked transform (set inline by JS every frame),
   independent from the stage's own fade/slide transition above. */
.a-pin-stage-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
  text-align: left;
}
@media (min-width: 860px){ .a-pin-stage-inner{ grid-template-columns: 1fr 1fr; gap: 56px; } }
.a-pin-text{ text-align: center; }
@media (min-width: 860px){ .a-pin-text{ text-align: left; } }
.a-pin-text > * + *{ margin-top: 14px; }
.a-pin-image{ will-change: transform, opacity; }
.a-pin-image .a-photo{ width: 100%; max-width: 100%; aspect-ratio: 4/3; margin-inline: 0; }

/* Pin-stage highlight list — short scannable bullet lines replacing a
   single dense sentence in the SERVICES pin section. One dense run-on
   paragraph was hard to read at a glance mid-scroll; 2-3 short lines with
   a dot marker read in one pass instead. */
.a-pin-points{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin-inline: auto; }
@media (min-width: 860px){ .a-pin-points{ margin-inline: 0; } }
.a-pin-points li{ display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--a-body-muted); text-align: left; }
.a-pin-points li::before{ content: ""; flex-shrink: 0; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--a-primary-on-dark); }

/* Cube-pin group — the object itself lives OUTSIDE the crossfading stages
   so it never fades/resets between them; only the text above it (inside
   .a-pin-cube-textzone) swaps per stage. The group is centered as a whole
   by the parent .a-pin-sticky's flex centering. */
.a-pin-cube-group{ display: flex; flex-direction: column; align-items: center; width: 100%; }
.a-pin-cube-textzone{ position: relative; width: 100%; min-height: clamp(130px, 20vh, 180px); }
/* Bottom-anchor the text within its zone so it always ends at the same
   spot right above the object, regardless of how tall a given stage's
   content is (e.g. the last stage's extra CTA button). */
.a-pin-cube-textzone .a-pin-stage{ justify-content: flex-end; }

.a-pin-progress{
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.a-pin-dot{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.32); transition: all .3s ease; }
.a-pin-dot.is-active{ background: #fff; width: 22px; border-radius: 4px; }
.a-pin-hint{
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: -0.12px;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce){
  /* Sticky/scroll-linked staging still works, but skip the pin choreography
     entirely and lay stages out as normal stacked content */
  .a-pin-sticky{ position: static; height: auto; }
  .a-pin-stage{ position: static; opacity: 1; transform: none; padding-block: 64px; }
  .a-pin-progress, .a-pin-hint{ display: none; }
}

/* Parallax image wrapper — clips the moving image so it never spills the tile */
.a-parallax-wrap{ overflow: hidden; border-radius: var(--a-radius-sm); padding: 40px 0; }
[data-parallax]{ will-change: transform, opacity; transition: opacity .15s linear; }

/* Scroll-linked 3D spin — perspective wrapper + rotateY set by JS every frame */
.a-spin-wrap{ perspective: 1200px; display: inline-block; }
[data-spin]{ will-change: transform; transform-style: preserve-3d; }
@media (prefers-reduced-motion: reduce){ [data-spin]{ transform: none !important; } }

/* =========================================================
   Book scroll-scrub — real photographed hardcover book (60-frame
   JPEG sequence, shot on a locked-off camera as it opens from closed
   to fully spread) whose visible frame is swapped by JS in lockstep
   with scroll progress through the WHY BUDDY EDU pin section — same
   technique Apple uses for its product-page scroll animations
   (pre-rendered frames, not a live 3D object). All frames preloaded
   up front so swapping is instant with no flicker or refetching.
   ========================================================= */
.a-book-wrap{
  display: flex;
  justify-content: center;
  width: 100%; /* .a-pin-cube-group uses align-items:center (shrink-to-fit),
                   so without an explicit width here this flex child sizes
                   to its content — and a 100%-wide child inside THAT then
                   resolves against an indefinite width and collapses to 0 */
  padding: 32px 0 28px;
  pointer-events: none; /* decorative only — never intercept clicks on
                            content (e.g. CTA buttons) sitting underneath */
}
.a-book-scroll{
  position: relative;
  width: 100%;
  /* Sized by width (aspect-ratio derives height from it), but also capped
     by a height budget converted back into an equivalent width — .a-pin-
     sticky is a fixed 100vh with overflow:hidden, so on short viewports
     this keeps the (now much bigger) book from growing tall enough to
     push past the sticky viewport and get clipped under the text zone. */
  max-width: max(340px, min(68vw, 920px, calc((100vh - 220px) * 16 / 9)));
  aspect-ratio: 16/9;
}
/* Frames are pre-graded so their backdrop is crushed to near-true-black
   (see book-scroll-brief.md); mix-blend-mode:screen then makes every black
   pixel disappear into whatever's actually behind it — the sticky section's
   own data-bg color — so the book reads as floating directly in the scene
   instead of sitting on a visible photo card. Pure math reason this works:
   screen(a, 0) = a exactly, so black-frame-pixel + any backdrop color = that
   backdrop color, unchanged. */
.a-book-scroll img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}

/* =========================================================
   Motion hero — full-bleed background frame sequence scrubbed by scroll,
   with STATIC text overlaid on top (Apple iPhone hero pattern: the phone
   rotates through angles/finishes as you scroll, but the headline itself
   never changes). Simpler cousin of the book scroll-scrub above — no
   per-stage text crossfade, just one background that scrubs underneath
   fixed copy. Sits inside a .a-pin-section/.a-pin-sticky wrapper for the
   scroll-math, but is its own opt-in layer so it doesn't interfere with
   the multi-stage pin sections elsewhere. */
.a-motion-hero{ overflow: hidden; } /* position comes from .a-pin-sticky (position:sticky) —
  setting position:relative here would win over it by source order (same
  specificity, later rule), silently breaking the pin/scrub entirely. */
.a-motion-hero-media{ position: absolute; inset: 0; z-index: 1; }
.a-motion-hero-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-motion-hero-media::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.5) 100%);
}
.a-motion-hero-content{ position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.a-motion-hero-wrap{ height: 250vh; }
@media (prefers-reduced-motion: reduce){
  /* The section's scroll height is normally what drives the frame-scrub
     math; under reduced motion that math never runs, so collapse it back
     to a single static screen instead of leaving 150vh of empty scroll.
     Also re-pin .a-motion-hero itself (the sitewide .a-pin-sticky rule
     already set it to position:static) so the full-bleed background still
     has a correctly-sized positioned ancestor instead of stretching to
     cover the old tall wrapper. */
  .a-motion-hero-wrap{ height: auto; }
  .a-motion-hero{ position: relative; min-height: 70vh; height: auto; display: flex; align-items: center; justify-content: center; padding-block: 64px; }
}

/* =========================================================
   Full-bleed image break — one full-viewport-height photo "breather"
   between regular content tiles (Apple iPhone Pro page's "프로라 불리는
   데는 다 그만한 이유가 있다" section: a single full-screen photo with
   bold text overlaid, NOT a long pinned scroll — the photo just zooms
   out slightly and brightens once as it scrolls into view, one time,
   via the same .a-reveal IntersectionObserver already used sitewide).
   Only needs ONE photo per spot (no frame sequence), so it's cheap to
   drop in wherever a page wants a visual pause between text-heavy tiles. */
.a-full-bleed{
  position: relative; height: 100vh; min-height: 480px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.a-full-bleed-media{ position: absolute; inset: 0; z-index: 0; }
.a-full-bleed-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.a-full-bleed-media.a-reveal{
  opacity: 1; /* overrides the sitewide .a-reveal fade — this layer never
                 disappears, it only zooms/brightens into place */
  transform: scale(1.12);
  filter: brightness(0.55) saturate(0.92);
  transition: transform 1.8s cubic-bezier(.16,1,.3,1), filter 1.8s ease;
}
.a-full-bleed-media.a-reveal.is-visible{ transform: scale(1); filter: brightness(1) saturate(1); }
.a-full-bleed::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.45) 100%);
}
.a-full-bleed-content{ position: relative; z-index: 2; text-align: center; padding: 0 24px; max-width: 720px; }
@media (prefers-reduced-motion: reduce){
  .a-full-bleed-media.a-reveal{ transform: scale(1); filter: brightness(1) saturate(1); transition: none; }
}

/* =========================================================
   Page hero — full-bleed photo hero for secondary pages (services,
   programs, consultation, reviews) so every page's first screen is
   immersive, not just the homepage/about (Apple product-page hero
   pattern, adapted for a still photo instead of video). Reuses the
   same one-time brighten-in as .a-full-bleed on the wrapper, plus a
   slow continuous Ken Burns drift on the image itself so a static
   photo still feels alive as the very first thing a visitor sees.
   ========================================================= */
.a-page-hero{
  position: relative; height: 100vh; min-height: 560px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #101820, #1d1d1f);
}
.a-page-hero-media{ position: absolute; inset: 0; z-index: 0; }
.a-page-hero-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: aPageHeroDrift 20s ease-in-out infinite alternate;
}
@keyframes aPageHeroDrift{ from{ transform: scale(1.04); } to{ transform: scale(1.14); } }
.a-page-hero-media.a-reveal{
  opacity: 1; /* overrides the sitewide .a-reveal fade — always visible, only brightens in */
  filter: brightness(0.55) saturate(0.9);
  transition: filter 1.6s ease;
}
.a-page-hero-media.a-reveal.is-visible{ filter: brightness(1) saturate(1); }
.a-page-hero::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,12,16,0.32) 0%, rgba(10,12,16,0.12) 45%, rgba(10,12,16,0.58) 100%);
}
.a-page-hero-content{ position: relative; z-index: 2; text-align: center; max-width: 1600px; padding-inline: 24px; }
.a-page-hero-content > * + *{ margin-top: 16px; }
/* The headline gets the full generous width above (so long lines have room
   not to wrap); body copy underneath stays capped to a comfortable reading
   line-length regardless of how wide the headline's box is. */
.a-page-hero-content p{ max-width: 640px; margin-inline: auto; }
@media (prefers-reduced-motion: reduce){
  .a-page-hero-media img{ animation: none; transform: scale(1.04); }
  .a-page-hero-media.a-reveal{ filter: brightness(1) saturate(1); transition: none; }
}
@media (max-width: 640px){ .a-page-hero{ height: 92vh; min-height: 480px; } }
/* Compact variant — for action pages (consultation form) where the primary
   task should stay close to the fold; still immersive, just shorter. */
.a-page-hero.is-compact{ height: 56vh; min-height: 420px; }
@media (max-width: 640px){ .a-page-hero.is-compact{ height: 48vh; min-height: 360px; } }

/* =========================================================
   Feature carousel ("일단 핵심부터") — a soft gradient card that
   auto-advances through slides, each pairing short copy with a mock
   device frame whose content also swaps per slide (Apple product-page
   pattern). Dots + a play/pause pill mirror Apple's own controls.
   ========================================================= */
.a-feature-carousel{ position: relative; margin-top: 28px; border-radius: var(--a-radius-lg); overflow: hidden; }
.a-feature-slide{
  position: absolute; inset: 0; padding: 40px 28px 80px;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.a-feature-slide.is-active{ position: relative; opacity: 1; pointer-events: auto; }
.a-feature-copy{ font-size: 19px; font-weight: 600; line-height: 1.5; max-width: 520px; text-align: center; color: var(--a-ink); }
.a-feature-copy b{ color: var(--a-primary); }
.a-device-frame{ margin-top: 30px; width: min(380px, 92%); perspective: 1400px; }
.a-device-frame-inner{
  position: relative; aspect-ratio: 4/3; border-radius: 20px; border: 7px solid #1d1d1f;
  overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transform: rotateX(8deg) rotateY(-10deg); box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}
.a-device-frame-icon{ width: 40px; height: 40px; }
.a-device-frame-inner.has-image{ background-size: cover; background-position: center; }
.a-device-frame-inner.has-image::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
.a-device-frame-label{
  position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 1;
  font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.42);
  padding: 7px 10px; border-radius: 999px; text-align: center;
}
@media (prefers-reduced-motion: reduce){ .a-device-frame-inner{ transform: none; } }
.a-carousel-controls{ position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 3; }
.a-carousel-dots{ display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.06); padding: 7px 10px; border-radius: 999px; }
.a-carousel-dot{ width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.28); border: none; padding: 0; cursor: pointer; transition: all .25s ease; }
.a-carousel-dot.is-active{ background: var(--a-ink); width: 16px; border-radius: 4px; }
.a-carousel-toggle{
  width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.06); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--a-ink); flex-shrink: 0;
}
.a-carousel-toggle svg{ width: 12px; height: 12px; }
.a-carousel-toggle .icon-play{ display: none; }
.a-carousel-toggle.is-paused .icon-pause{ display: none; }
.a-carousel-toggle.is-paused .icon-play{ display: block; }
@media (max-width: 640px){ .a-feature-slide{ padding: 32px 18px 76px; } }

/* Checklist grid — "don't miss a single course" pattern (dark tile) */
.a-checklist-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 640px; margin-inline: auto; }
.a-checklist-item{ display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; }
.a-checklist-item::before{ content: "✓"; color: var(--a-primary-on-dark); font-weight: 700; }

/* Progress bars — "how close are you" pattern; the fill animates to its
   target width once the section scrolls into view, reusing the existing
   .a-reveal/.is-visible mechanism rather than adding a second observer. */
.a-progress-row + .a-progress-row{ margin-top: 22px; }
.a-progress-label{ display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: #fff; margin-bottom: 8px; }
.a-progress-track{ height: 8px; border-radius: 999px; background: rgba(255,255,255,0.16); overflow: hidden; }
.a-progress-fill{ height: 100%; border-radius: 999px; background: var(--a-primary-on-dark); width: 0; transition: width 1.1s ease .2s; }
.a-reveal.is-visible .a-progress-fill{ width: var(--fill, 60%); }
@media (prefers-reduced-motion: reduce){ .a-progress-fill{ transition: none; width: var(--fill, 60%); } }

/* Cube modal — an on-demand popup version of the homepage's rotating cube,
   surfaced from a "핵심 요약 보기" button rather than tied to scroll. */
.a-cube-modal-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 24px; }
.a-cube-modal-overlay[hidden]{ display: none; }
.a-cube-modal-card{ position: relative; background: var(--a-canvas); border-radius: var(--a-radius-lg); padding: 32px 28px 28px; width: min(360px, 100%); text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,0.4); }
.a-cube-modal-close{ position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 22px; line-height: 1; color: var(--a-ink-muted-48); cursor: pointer; padding: 6px; }
.a-cube-modal-close:hover{ color: var(--a-ink); }
.a-cube-modal-facts{ margin-top: 18px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.a-cube-modal-facts li{ font-size: 13.5px; color: var(--a-ink-muted-80); line-height: 1.5; }
.a-cube-modal-facts li b{ display: block; font-size: 12px; font-weight: 600; color: var(--a-primary); letter-spacing: .02em; margin-bottom: 2px; }

/* Photo placeholder — circle variant for avatars/team */
.a-photo-circle{
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 88px;
  margin-inline: auto;
}
.a-photo-circle .a-photo-icon{ width: 26px; height: 26px; }
.a-photo-circle .a-photo-label{ display:none; }

/* =========================================================
   Service tab switcher (Apple product-page "Experience" tab
   pattern) — a horizontal tab bar swaps an entire content panel
   below it (image + text) instead of the user scrolling through
   stacked sections. One panel visible at a time; switching fades
   the new panel in. deep-linkable via ?tab=/#hash, read on load.
   ========================================================= */
.a-service-tabs-bar{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: 56px;
}
.a-service-tab{
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: rgba(255,255,255,0.62);
  padding: 13px 22px 13px 18px; position: relative;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.a-service-tab svg{ width: 17px; height: 17px; flex-shrink: 0; opacity: .8; transition: opacity .25s ease; }
.a-service-tab:hover{ color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.3); }
.a-service-tab.is-active{ color: #fff; background: var(--a-primary-on-dark); border-color: var(--a-primary-on-dark); }
.a-service-tab.is-active svg{ opacity: 1; }
@media (max-width: 640px){ .a-service-tab{ font-size: 13.5px; padding: 11px 16px 11px 14px; } }

@keyframes aServicePanelIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } }
.a-service-panel.is-active{ animation: aServicePanelIn .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes aServiceMediaIn{ from{ opacity: 0; transform: scale(1.05); } to{ opacity: 1; transform: scale(1); } }
.a-service-panel.is-active .a-split-media{ animation: aServiceMediaIn .6s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce){
  .a-service-panel.is-active{ animation: none; }
  .a-service-panel.is-active .a-split-media{ animation: none; }
}

/* Media+text split (Apple "dual-column" pattern) — image one side, stacked
   text the other. Shared by the service tab panels above and by program
   pages' "어떻게 준비하나요" sections. Order reverses on alternating uses
   via the .is-reversed modifier so a page of several splits doesn't feel
   like the same block repeated. */
.a-split-grid{ display: grid; gap: 36px; align-items: center; max-width: 1100px; margin-inline: auto; }
@media (min-width: 860px){
  .a-split-grid{ grid-template-columns: 1fr 1fr; gap: 64px; }
  .a-split-grid.is-reversed .a-split-media{ order: 2; }
  .a-split-grid.is-reversed .a-split-text{ order: 1; }
}
.a-split-text{ text-align: left; }
.a-split-media .a-photo{ width: 100%; aspect-ratio: 4/3; margin-inline: 0; }

/* =========================================================
   Stat showcase (Apple iPhone "카메라 — 멀찌감치 앞서다" pattern) — a
   dark section pairing one photo with a stack of oversized number+
   label stats, so a first-time visitor gets the concrete "what this
   leads to" answer at a glance without reading paragraphs. Used on
   program detail pages right before the full career-venue grid.
   ========================================================= */
.a-stat-showcase{ display: grid; gap: 36px; align-items: center; max-width: 1080px; margin-inline: auto; }
.a-stat-showcase-media .a-photo{ width: 100%; aspect-ratio: 4/3; margin-inline: 0; }
.a-stat-showcase-stats{ display: flex; flex-direction: column; gap: 26px; }
.a-stat-showcase-stat{ text-align: left; }
.a-stat-showcase-stat + .a-stat-showcase-stat{ border-top: 1px solid rgba(255,255,255,0.14); padding-top: 26px; }
.a-stat-showcase-stat-label{ font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,0.55); text-transform: uppercase; }
.a-stat-showcase-stat-value{ font-family: var(--a-font-display); font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; letter-spacing: -0.02em; color: var(--a-primary-on-dark); margin-top: 6px; line-height: 1.12; }
.a-stat-showcase-stat-desc{ font-size: 14.5px; color: rgba(255,255,255,0.68); margin-top: 6px; }
@media (min-width: 860px){ .a-stat-showcase{ grid-template-columns: 1.1fr 1fr; gap: 64px; } }

/* Checkmark comparison table (Apple "Compare" pattern) — options as
   columns, facts as rows, check/dash marks instead of repeating prose.
   One column can carry .is-highlighted for a subtly emphasized option. */
.a-compare-table{ width: 100%; max-width: 720px; margin-inline: auto; border-collapse: collapse; }
.a-compare-table th, .a-compare-table td{
  padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--a-hairline);
}
.a-compare-table th:first-child, .a-compare-table td:first-child{ text-align: left; padding-left: 4px; }
.a-compare-table thead th{
  font-family: var(--a-font-display); font-size: 17px; font-weight: 600; color: var(--a-ink);
  padding-bottom: 14px; border-bottom: 2px solid var(--a-ink);
}
.a-compare-table tbody th{ font-size: 14px; font-weight: 400; color: var(--a-ink-muted-80); }
.a-compare-table tbody td{ font-size: 14px; font-weight: 600; }
.a-compare-table td .a-check{ color: var(--a-primary); }
.a-compare-table td .a-dash{ color: var(--a-ink-muted-48); font-weight: 400; }
.a-compare-table th.is-highlighted, .a-compare-table td.is-highlighted{ background: var(--a-parchment); }
.a-compare-table th.is-highlighted{ border-radius: 8px 8px 0 0; }
.a-compare-table tr:last-child td.is-highlighted{ border-radius: 0 0 8px 8px; }

/* Compare picker — two dropdowns feeding a live .a-compare-table (Apple
   "배터리 성능 비교" device-selector pattern). Picking a program in either
   select updates that column's header + every row via JS; no page reload,
   no static duplicate tables per pairing. */
.a-compare-picker{
  display: flex; align-items: center; justify-content: center; gap: 16px;
  max-width: 640px; margin-inline: auto; flex-wrap: wrap;
}
.a-compare-select{
  flex: 1 1 220px; min-width: 180px;
  border: 1px solid var(--a-hairline); border-radius: var(--a-radius-sm);
  padding: 12px 16px; font-size: 15px; font-family: inherit;
  background: var(--a-canvas); color: var(--a-ink); min-height: 44px;
}
.a-compare-select:focus{ outline: 2px solid var(--a-primary-focus); outline-offset: 1px; }
.a-compare-vs{
  font-family: var(--a-font-display); font-weight: 700; font-size: 13px;
  color: var(--a-ink-muted-48); flex: 0 0 auto;
}

/* Vertical icon+text feature stack (Apple "Personalized Listening" pattern)
   — a narrower, editorial reading rhythm instead of a symmetric card grid,
   for lists of benefits/features that read better one after another. */
.a-feature-stack{ display: flex; flex-direction: column; gap: 28px; max-width: 640px; margin-inline: auto; }
.a-feature-stack-item{ display: flex; gap: 18px; align-items: flex-start; text-align: left; }
.a-feature-stack-item svg{ flex-shrink: 0; margin-top: 3px; }
.a-feature-stack-item h3{ font-size: 17px; font-weight: 600; letter-spacing: -0.374px; margin: 0 0 4px; }
.a-feature-stack-item p{ font-size: 14px; line-height: 1.55; color: var(--a-ink-muted-80); margin: 0; }

/* Focus spotlight — centered eyebrow/headline/lead, then photo+fact-callout
   pairs that alternate sides (Apple Watch "피트니스" product-page pattern).
   Earlier version floated callout cards ON TOP of the photo's corners, but
   fixed pixel offsets can't guarantee empty space in an arbitrary lifestyle
   photo — they'd land on a face or hand on some programs' images. Callouts
   now sit BESIDE the photo instead (own flex column, never overlapping
   photo pixels), which is layout-safe for any photo. Stacks to a plain
   vertical list below ~860px, alternates left/right above it. */
.a-focus-rows{ display: flex; flex-direction: column; gap: 40px; max-width: 900px; margin-inline: auto; }
.a-focus-row{ display: flex; flex-direction: column; gap: 20px; }
.a-focus-row .a-photo{ width: 100%; aspect-ratio: 4/3; margin-inline: 0; }
.a-focus-callout{ display: flex; gap: 14px; align-items: flex-start; text-align: left; }
.a-focus-callout svg{ flex-shrink: 0; margin-top: 3px; }
.a-focus-callout-label{ font-size: 17px; font-weight: 700; letter-spacing: -0.374px; }
.a-focus-callout-desc{ font-size: 14px; line-height: 1.55; color: var(--a-ink-muted-80); margin-top: 4px; }
@media (min-width: 860px){
  .a-focus-row{ flex-direction: row; align-items: center; gap: 52px; }
  .a-focus-row .a-focus-media{ flex: 1.3; }
  .a-focus-row .a-focus-callout{ flex: 1; }
  .a-focus-row.is-reversed{ flex-direction: row-reverse; }
}

/* Focus spotlight, overlay variant — a single big photo with fact-callout
   cards floating over its corners, instead of the two-row/beside-photo
   layout above. Best suited to photos with genuinely empty space in the
   corners (object/interior shots, not close-up portraits) since the cards
   sit ON TOP of the image. Use per-page judgment on which variant fits the
   chosen photo. Stacks to a plain list below the photo under ~860px. */
.a-focus-overlay{ position: relative; max-width: 640px; margin-inline: auto; }
.a-focus-overlay .a-photo{ width: 100%; aspect-ratio: 4/3; margin-inline: 0; }
.a-focus-overlay-callouts{ display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.a-focus-overlay-callout{
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: #fff;
  border-radius: var(--a-radius-md);
  padding: 14px 16px;
  box-shadow: var(--a-shadow-product);
}
.a-focus-overlay-callout svg{ flex-shrink: 0; margin-top: 2px; }
.a-focus-overlay-callout .a-focus-callout-label{ font-size: 15px; }
.a-focus-overlay-callout .a-focus-callout-desc{ font-size: 13px; margin-top: 3px; }
@media (min-width: 860px){
  .a-focus-overlay{ max-width: 720px; }
  .a-focus-overlay-callouts{ display: contents; }
  .a-focus-overlay-callout{ position: absolute; width: 232px; margin-top: 0; }
  .a-focus-overlay-callout.is-top-right{ top: -24px; right: -56px; }
  .a-focus-overlay-callout.is-bottom-left{ bottom: 30px; left: -64px; }
  .a-focus-overlay-callout.is-bottom-right{ bottom: -24px; right: -40px; }
}

/* Side-scrolling card carousel (Apple "iPhone 사면 좋은 이유" pattern) —
   snap-scrolling cards, each with an eyebrow, bold two-line headline,
   description, a bottom image, and a circular "+" link overlapping the
   image's corner. Prev/next buttons scroll by one card width. */
.a-side-cards-header{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
}
.a-side-cards-header h2{ line-height: 1.15; }
.a-side-cards-track{
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 4px; margin: 0 -22px; padding-inline: 22px;
  scrollbar-width: none;
}
.a-side-cards-track::-webkit-scrollbar{ display: none; }
.a-side-card{
  flex: 0 0 auto; width: min(320px, 78vw); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--a-hairline); border-radius: var(--a-radius-lg);
  padding: 26px 26px 0; display: flex; flex-direction: column; overflow: hidden;
}
.a-side-card-title{
  font-family: var(--a-font-display); font-size: 22px; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.02em; margin-top: 12px;
}
.a-side-card-desc{ font-size: 14px; line-height: 1.55; color: var(--a-ink-muted-80); margin-top: 10px; }
.a-side-card-media{ position: relative; margin-top: 20px; margin-inline: -26px; }
.a-side-card-media .a-photo{ width: 100%; aspect-ratio: 4/3; margin: 0; border-radius: 0; filter: none; }
.a-side-card-expand{
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: #1d1d1f; color: #fff; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; font-weight: 300;
  transition: background-color .2s ease;
}
.a-side-card-expand:hover{ background: var(--a-primary); }
.a-side-cards-nav{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.a-side-cards-nav button{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--a-hairline); background: #fff; color: var(--a-ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.a-side-cards-nav button:hover{ background: var(--a-parchment); }

/* Accordion */
.a-accordion-item{ border-top: 1px solid var(--a-hairline); }
.a-accordion-item:last-child{ border-bottom: 1px solid var(--a-hairline); }
.a-accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: 20px 4px; background:none; border:none; text-align:left;
  font-size: 17px; font-weight: 600; letter-spacing:-0.374px; color: var(--a-ink); cursor:pointer;
  font-family: inherit;
}
.a-accordion-trigger .a-chev{ width:18px; height:18px; flex-shrink:0; color: var(--a-ink-muted-48); transition: transform .2s ease; }
.a-accordion-item.is-open .a-chev{ transform: rotate(180deg); }
.a-accordion-panel{ max-height:0; overflow:hidden; transition: max-height .3s ease; }
.a-accordion-panel-inner{ padding: 0 4px 20px; font-size:14px; color: var(--a-ink-muted-80); line-height:1.6; }

/* Small info chip — course/certificate names inside program detail cards & panels */
.a-tag{
  display:inline-block; padding:5px 12px; border-radius: var(--a-radius-pill);
  border:1px solid var(--a-hairline); background: var(--a-canvas);
  font-size:12.5px; color: var(--a-ink-muted-80);
}
.a-tag-list{ display:flex; flex-wrap:wrap; gap:8px; }

/* Filter tabs */
.a-filter-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 40px; justify-content:center; }
.a-filter-tab{
  padding: 9px 18px; border-radius: var(--a-radius-pill);
  border: 1px solid var(--a-hairline); background: var(--a-canvas);
  font-size: 14px; cursor:pointer; color: var(--a-ink); font-family: inherit;
}
.a-filter-tab.is-active{ background: var(--a-primary); border-color: var(--a-primary); color:#fff; }
[data-category]{ transition: opacity .32s ease, transform .32s ease; }

/* Timeline */
.a-timeline{ border-left: 1px solid var(--a-hairline); padding-left: 26px; text-align:left; }
.a-timeline-item{ position:relative; padding-bottom: 40px; }
.a-timeline-item:last-child{ padding-bottom:0; }
.a-timeline-item::before{ content:""; position:absolute; left:-31px; top:6px; width:9px; height:9px; border-radius:50%; background: var(--a-primary); }
.a-timeline-item .a-year{ font-family: var(--a-font-display); font-weight:600; color: var(--a-primary); font-size:14px; }

/* Form fields */
.a-field{ margin-bottom: 20px; text-align:left; }
.a-field label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
.a-field .a-req{ color:#d70015; }
.a-field input, .a-field select, .a-field textarea{
  width:100%; border: 1px solid var(--a-hairline); border-radius: var(--a-radius-sm);
  padding: 12px 16px; font-size:15px; font-family: inherit; background: var(--a-canvas); color: var(--a-ink);
  min-height: 44px;
}
.a-field textarea{ min-height:110px; resize:vertical; }
.a-field input:focus, .a-field select:focus, .a-field textarea:focus{ outline:2px solid var(--a-primary-focus); outline-offset:1px; }
.a-field .a-helper{ font-size:12px; color:var(--a-ink-muted-48); margin-top:6px; }
.a-field .a-error{ display:none; font-size:12.5px; color:#d70015; margin-top:6px; }
.a-field.has-error input, .a-field.has-error select, .a-field.has-error textarea{ border-color:#d70015; }
.a-field.has-error .a-error{ display:block; }
.a-form-row-2{ display:grid; gap: 20px; }
@media (min-width:640px){ .a-form-row-2{ grid-template-columns: 1fr 1fr; } }
.a-check-row{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color: var(--a-ink-muted-80); text-align:left; }
.a-check-row input{ width:18px; height:18px; margin-top:2px; accent-color: var(--a-primary); flex-shrink:0; }
.a-form-success{ display:none; align-items:center; gap:12px; background:#eafaf0; color:#1c7a3c; padding:16px; border-radius: var(--a-radius-sm); font-weight:600; font-size:14.5px; text-align:left; }
.a-form-success.is-visible{ display:flex; }
.a-form-error{ display:none; align-items:center; gap:12px; background:#fdecea; color:#c0392b; padding:16px; border-radius: var(--a-radius-sm); font-weight:600; font-size:14.5px; text-align:left; margin-top:16px; }
.a-form-error.is-visible{ display:flex; }
.a-info-row{ display:flex; align-items:flex-start; gap:12px; text-align:left; }
.a-info-row + .a-info-row{ margin-top:18px; }
.a-info-row svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; }
.a-info-row h4{ font-size:14.5px; font-weight:600; }
.a-info-row p{ font-size:13.5px; margin-top:2px; }

/* =========================================================
   Award-site accents — bends the Apple grammar just enough that
   the site reads as its own thing: grain texture, custom cursor,
   a marquee strip, and an angled section break.
   ========================================================= */

/* Grain texture — subtle noise overlay on dark tiles, generated with an
   inline SVG feTurbulence filter (no image asset needed) */
.a-grain{ position: relative; }
/* .a-pin-sticky already establishes its own positioning context via
   `position: sticky` — .a-grain's `position: relative` must not clobber
   that. Higher-specificity compound selector wins regardless of source
   order, restoring the sticky pin. */
.a-pin-sticky.a-grain{ position: sticky; }
.a-grain::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =========================================================
   Full-bleed video hero — background video (autoplay/muted/loop)
   with a dark overlay for text legibility, mute toggle, and a
   scroll hint. Falls back to a gradient placeholder until a real
   video file is dropped into assets/video/.
   ========================================================= */
.a-video-hero{
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #101820, #1d1d1f);
}
.a-video-hero-media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.a-video-hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,0.35) 0%, rgba(10,12,16,0.6) 100%);
}
.a-video-hero-content{
  position: relative; z-index: 2;
  text-align: center;
  max-width: 1600px;
  padding-inline: 24px;
}
.a-video-hero-content > * + *{ margin-top: 16px; }
.a-video-hero-content p{ max-width: 640px; margin-inline: auto; }
.a-video-hero-content .a-cta-row{ justify-content: center; margin-top: 26px !important; }
.a-video-mute-toggle{
  position: absolute; z-index: 3; bottom: 28px; left: 28px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.a-video-mute-toggle:hover{ background: rgba(255,255,255,0.24); }
.a-video-mute-toggle svg{ width: 18px; height: 18px; }
.a-video-scroll-hint{
  position: absolute; z-index: 3; bottom: 32px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 12px; letter-spacing: -0.12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.a-video-scroll-hint .chevron{ width: 14px; height: 14px; animation: a-scroll-bounce 1.8s ease-in-out infinite; }
@keyframes a-scroll-bounce{ 0%,100%{ transform: translateY(0); opacity:.6; } 50%{ transform: translateY(6px); opacity:1; } }
/* Compact variant — for action pages (consultation form) where the primary
   task should stay close to the fold; still a full video hero, just shorter. */
.a-video-hero.is-compact{ height: 56vh; min-height: 420px; }
@media (max-width: 640px){ .a-video-hero.is-compact{ height: 48vh; min-height: 360px; } }
@media (prefers-reduced-motion: reduce){ .a-video-scroll-hint .chevron{ animation: none; } }

/* Quick actions — floating vertical stack (bottom-right) linking out to
   external channels (Naver Blog, KakaoTalk Channel) plus a same-brand
   consultation shortcut. Present on every page, independent of scroll. */
.a-quick-actions{
  position: fixed; right: 20px; bottom: 24px; z-index: 200;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.a-quick-action{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.a-quick-action:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.24); }
.a-quick-action svg{ width: 20px; height: 20px; flex-shrink: 0; }
.a-quick-action.is-naver{ background: #03c75a; color: #fff; }
.a-quick-action.is-kakao{ background: #fee500; color: #191919; }
.a-quick-action.is-consult{ background: var(--a-primary); color: #fff; }
@media (max-width: 640px){
  .a-quick-actions{ right: 14px; bottom: 14px; gap: 8px; }
  .a-quick-action{ padding: 9px 13px 9px 9px; font-size: 12px; }
  .a-quick-action svg{ width: 18px; height: 18px; }
}

/* Marquee — an infinite horizontal strip, common award-site rhythm break */
.a-marquee{
  overflow: hidden;
  background: var(--a-ink);
  padding-block: 22px;
  white-space: nowrap;
}
.a-marquee-track{
  display: inline-flex;
  animation: a-marquee-scroll 22s linear infinite;
}
.a-marquee-item{
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: var(--a-font-display);
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  padding-inline: 20px;
}
.a-marquee-item .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--a-accent-gradient);
  flex-shrink: 0;
}
.a-marquee-item.is-outline{ -webkit-text-stroke: 1px #fff; color: transparent; }
@keyframes a-marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .a-marquee-track{ animation: none; } }

/* Angled section break — a diagonal clip instead of a flat rectangular
   tile edge, layered as a pseudo-element so content above stays unclipped */
.a-angled-top{ position: relative; padding-top: calc(var(--a-space-section) + 40px); }
.a-angled-top::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  transform: translateY(-100%);
}