/* =========================================================
   PBS CERTIFIED INSTRUCTOR — Design System
   Editorial + Fashion Magazine + Certification Authority
   ========================================================= */

/* ---------- 1. Design Tokens ---------- */
:root {
  --bg-primary: #F6F4EF;
  --bg-secondary: #EEECE7;
  --white: #FFFFFF;
  --black: #171717;
  --text-primary: #171717;
  --text-secondary: #70706A;
  --border: rgba(23, 23, 23, .14);
  --border-dark: rgba(246, 244, 239, .18);

  --pbs-accent: #C0392B;      /* PBS 로고/브랜드 레드 계열 accent — CTA·포인트 전용 */
  --pbs-accent-soft: #F4E3E0;

  --font-main: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1600px;
  --content: 1440px;
  --space-section: 160px;
  --space-section-lg: 220px;
  --space-section-tablet: 120px;
  --space-section-mobile: 80px;

  --ease-main: cubic-bezier(.22, .61, .36, 1);
  --radius-card: 8px;
  --radius-img: 4px;
  --radius-pill: 999px;
}

.accent { color: var(--pbs-accent); }

@media (max-width: 1199px) {
  :root { --space-section: var(--space-section-tablet); }
}
@media (max-width: 767px) {
  :root { --space-section: var(--space-section-mobile); }
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  word-break: keep-all; /* 한글: 어절 단위로만 줄바꿈 (음절 중간에서 끊기지 않도록) */
  overflow-wrap: break-word; /* 안전망: 그래도 넘치면 강제로라도 줄바꿈해 가로 오버플로 방지 */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.content   { width: min(calc(100% - 48px), var(--content)); margin-inline: auto; }
section { position: relative; }
img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* height:100% here (not just on img) so <picture> actually stretches to fill
   whatever gives its parent a definite size (aspect-ratio, inset:0, etc).
   Without this, <picture> defaults to auto-height, img's own height:100%
   resolves against that auto height per spec (i.e. collapses to 0), and the
   photo silently fails to render even though its container looks fine. Found
   this on .hero__bg first, then again on .people-card__media — making it the
   global default here instead of re-patching every image container. */
picture { display: block; overflow: hidden; height: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999; background: var(--black); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Typography ---------- */
.display {
  font-size: clamp(4rem, 8vw, 9rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 600;
}
.section-title, h2.h2 {
  font-size: clamp(2.75rem, 5vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 600;
}
h3.h3 {
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 600;
}
.body-large { font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.7; letter-spacing: -.02em; }
.body { font-size: 16px; line-height: 1.7; letter-spacing: -.015em; color: var(--text-secondary); }
.small { font-size: 14px; }
.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.graphic-en {
  font-weight: 700; letter-spacing: -.02em; text-transform: uppercase;
  font-size: clamp(2.5rem, 6vw, 6rem); line-height: .95;
  /* Global overflow-wrap:break-word (safety net for body text) makes an
     English word like PROFESSIONAL split mid-word at this display size —
     wrap at the space between words instead, never inside one. */
  overflow-wrap: normal; word-break: normal;
}
@media (max-width: 767px) {
  .display { font-size: clamp(2.875rem, 14vw, 4.5rem); }
  .section-title, h2.h2 { font-size: clamp(2.125rem, 10vw, 3.25rem); }
}

/* ---------- 4. Layout rhythm ---------- */
.section-pad { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.section-pad-lg { padding-top: var(--space-section-lg); padding-bottom: var(--space-section-lg); }
.center { text-align: center; margin-inline: auto; }
.section-dark { background: var(--black); color: var(--bg-primary); }
.section-dark .text-secondary, .section-dark .body { color: rgba(246,244,239,.62); }
.section-cream { background: var(--bg-secondary); }

/* ---------- 5. Buttons & Links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 28px;
  border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  transition: transform .3s var(--ease-main), background .3s var(--ease-main), color .3s var(--ease-main);
  white-space: nowrap;
}
.btn-primary { background: var(--black); color: var(--bg-primary); }
.btn-primary:hover { background: var(--pbs-accent); color: var(--white); }
/* .final-cta is always a dark section (photo+scrim or solid black) — a black
   btn-primary on it can blend into the background entirely (no photo behind
   it, e.g. program/apply page CTAs), so it needs the light treatment. */
.final-cta .btn-primary { background: var(--bg-primary); color: var(--black); }
.final-cta .btn-primary:hover { background: var(--white); }
.btn-ghost { background: transparent; color: inherit; border: 1px solid var(--border); }
.section-dark .btn-ghost, .final-cta .btn-ghost { border-color: var(--border-dark); }
.btn-ghost:hover { background: rgba(23,23,23,.06); }
.section-dark .btn-ghost:hover, .final-cta .btn-ghost:hover { background: rgba(246,244,239,.1); }
.btn-light { background: var(--bg-primary); color: var(--black); }
.btn-light:hover { background: var(--white); }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.link-arrow .arrow { display: inline-block; transition: transform .3s var(--ease-main); }
.link-arrow:hover .arrow { transform: translateX(6px); }

/* ---------- 6. Site Nav ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 22px 0;
  transition: background .4s var(--ease-main), padding .4s var(--ease-main), backdrop-filter .4s var(--ease-main), border-color .4s var(--ease-main);
  border-bottom: 1px solid transparent;
}
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
body:not([data-nav-transparent]) .site-nav {
  background: rgba(247, 245, 241, .86);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
body[data-nav-transparent] .site-nav { color: var(--bg-primary); }
body[data-nav-transparent] .site-nav.is-scrolled {
  background: rgba(23, 23, 23, .72);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--border-dark);
  padding: 14px 0;
}
.site-nav.is-scrolled:not([data-x]) { padding: 14px 0; }
body:not([data-nav-transparent]) .site-nav.is-scrolled { padding: 14px 0; }

.brand { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; }
.brand__mark { font-size: 15px; letter-spacing: .02em; }
.brand__txt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
body[data-nav-transparent] .brand__txt { color: rgba(246,244,239,.7); }
.brand--lg .brand__mark { font-size: 22px; }
.brand--lg .brand__txt { font-size: 14px; }

.nav-desktop { display: flex; align-items: center; gap: 36px; font-size: 13px; font-weight: 500; letter-spacing: .04em; }
.nav-desktop > a { text-transform: uppercase; padding: 6px 0; position: relative; }
.nav-desktop > a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-main);
}
.nav-desktop > a:hover::after { transform: scaleX(1); }
.nav-dropdown { position: relative; }
.nav-dropdown__panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 220px; background: var(--white); border-radius: var(--radius-card);
  box-shadow: 0 20px 40px rgba(0,0,0,.12); padding: 10px; opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-main), transform .25s var(--ease-main);
}
.nav-dropdown:hover .nav-dropdown__panel, .nav-dropdown:focus-within .nav-dropdown__panel {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown__panel a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 6px; color: var(--black); }
.nav-dropdown__panel a:hover { background: var(--bg-primary); }
.nav-dropdown__panel span { color: var(--text-secondary); font-size: 13px; }

.nav-cta { height: 44px; padding: 0 22px; font-size: 13px; }
.nav-burger { display: none; flex-direction: column; gap: 5px; width: 26px; }
.nav-burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; }

@media (max-width: 1023px) {
  .nav-desktop, .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

.nav-drawer {
  position: fixed; inset: 0; z-index: 200; background: var(--black); color: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
}
.nav-drawer[hidden] { display: none; }
.nav-drawer nav { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.nav-drawer a { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.nav-drawer .btn { margin-top: 12px; }

.mobi-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; background: var(--white); border-top: 1px solid var(--border);
}
.mobi-cta a { flex: 1; text-align: center; padding: 16px; font-weight: 500; font-size: 14px; }
.mobi-cta__primary { background: var(--black); color: var(--bg-primary); }
@media (max-width: 767px) {
  .mobi-cta { display: flex; }
  body { padding-bottom: 56px; }
}

/* ---------- 8. Hero ---------- */
.hero {
  /* min-height + max-height together always resolve in min-height's favor
     per spec when they conflict, so a separate max-height here would be a
     no-op — min() inline is what actually caps it. A screenshot tool that
     resizes the viewport to the full page height before capturing (common
     "full page" capture technique) would otherwise make 100svh balloon to
     match, stretching hero's bg image into a single giant zoomed-in crop.
     No real device viewport is anywhere near 1400px tall, so the cap is
     invisible to actual visitors. */
  min-height: min(100svh, 1400px);
  position: relative; /* positioning context for hero__bg / hero__scrim / hero__inner */
  display: flex; align-items: flex-end;
  background: var(--black); color: var(--bg-primary);
  overflow: hidden;
  padding-bottom: 100px;
  z-index: 1;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Extra dark band pinned to the top ~140px keeps nav text legible over any
     photo (bright backgrounds, signage, stage lighting) without washing out
     the rest of the image. */
  background:
    linear-gradient(180deg, rgba(23,23,23,.6) 0%, rgba(23,23,23,0) 140px),
    linear-gradient(180deg, rgba(23,23,23,.25) 0%, rgba(23,23,23,.55) 55%, rgba(23,23,23,.92) 100%);
}
.hero__inner { position: relative; z-index: 2; } /* width comes from .container (also on this element) — don't override it here */
.hero__eyebrow { color: rgba(246,244,239,.75); }
.hero h1 {
  font-size: clamp(3rem, 8vw, 8rem); line-height: .98; letter-spacing: -.05em; font-weight: 600;
  overflow: hidden;
}
.hero h1 span { display: block; overflow: hidden; }
.hero h1 em { font-style: normal; color: var(--pbs-accent); }
.hero .body-large { max-width: 640px; margin-top: 28px; color: rgba(246,244,239,.82); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__stats { display: flex; gap: 48px; margin-top: 64px; flex-wrap: wrap; }
.hero__stat b { display: block; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; }
.hero__stat span { font-size: 13px; color: rgba(246,244,239,.65); }
.hero__scroll {
  position: absolute; right: 32px; bottom: 32px; z-index: 2;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(246,244,239,.7);
  writing-mode: vertical-rl;
}

/* Mobile: text overlaid on a full-height photo reads as cramped (eyebrow
   sits flush under the nav) and a portrait photo cover-cropped into a tall
   narrow box zooms in tight on just a face. Image becomes a shorter,
   normal-flow block up top instead of a full-bleed absolute background;
   text moves below it onto the page's own cream background — cleaner
   separation, and the shorter box needs far less crop to cover, so more
   of the actual photo shows. */
@media (max-width: 767px) {
  .hero {
    display: block; min-height: 0; padding-bottom: 40px; background: var(--bg-primary); color: var(--black);
  }
  .hero__bg { position: relative; inset: auto; height: 58vh; min-height: 340px; }
  .hero__scrim {
    position: absolute; inset: auto; top: 0; left: 0; right: 0; height: 58vh; min-height: 340px;
    background:
      linear-gradient(180deg, rgba(23,23,23,.55) 0%, rgba(23,23,23,0) 120px),
      linear-gradient(180deg, rgba(23,23,23,0) 62%, var(--bg-primary) 100%);
  }
  .hero__inner { padding-top: 28px; }
  .hero__eyebrow { color: var(--text-secondary); }
  .hero h1 { color: var(--black); }
  .hero .body-large { color: var(--text-secondary); }
  .hero__stat b { color: var(--black); }
  .hero__stat span { color: var(--text-secondary); }
  .hero__scroll { display: none; }
  /* .btn-light is a cream pill with no border — invisible on hero's own
     now-cream lower half. Give it one just here, where the surrounding bg
     is cream too (desktop keeps it borderless on the dark photo). */
  .hero__cta .btn-light { border: 1px solid var(--border); }
}

/* The section right after Hero sits above it with its own solid bg + rounded top corners */
.curtain-cover {
  position: relative; z-index: 3; background: var(--bg-primary);
  border-radius: 28px 28px 0 0;
}

/* ---------- 9. Why PBS / Pain points ---------- */
.pain-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden;
  margin-top: 56px;
}
.pain-card {
  background: var(--bg-primary); padding: 32px 26px; min-height: 210px;
  display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
  position: relative;
}
.pain-card__q { font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.pain-card__hint { margin-top: 18px; font-size: 12px; color: var(--text-secondary); }
.pain-card__a {
  position: absolute; inset: 0; background: var(--black); color: var(--bg-primary);
  padding: 32px 26px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .35s var(--ease-main), transform .35s var(--ease-main);
}
.pain-card.is-open .pain-card__a { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pain-card__a-check { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pbs-accent); }
.pain-card__a-t { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
.pain-note { margin-top: 40px; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
@media (max-width: 767px) {
  .pain-grid { grid-template-columns: 1fr; }
}

/* ---------- How PBS Works — train / certify / connect, right after Hero ---------- */
.how-flow { display: flex; align-items: flex-start; gap: 0; margin-top: 56px; }
.how-flow__step { flex: 1 1 0; text-align: center; }
.how-flow__no { font-size: 13px; font-weight: 600; color: var(--pbs-accent); letter-spacing: .08em; }
.how-flow__icon {
  width: 56px; height: 56px; margin: 14px auto 0; color: var(--pbs-accent);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%;
}
.how-flow__t { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 18px; }
.how-flow__d { font-size: 14px; color: var(--text-secondary); margin-top: 10px; line-height: 1.6; max-width: 320px; margin-inline: auto; }
.how-flow__arrow { flex: 0 0 auto; width: 56px; padding-top: 84px; text-align: center; color: var(--border); font-size: 20px; }
@media (max-width: 767px) {
  .how-flow { flex-direction: column; gap: 32px; }
  .how-flow__arrow { display: none; }
  .how-flow__step:not(:last-child) { padding-bottom: 32px; border-bottom: 1px solid var(--border); }
}

/* ---------- 10. Difference — Sticky Stacking Cards ---------- */
.diff-stack { position: relative; margin-top: 60px; }
.diff-card {
  position: sticky; top: 100px;
  background: var(--white); border-radius: 20px; border: 1px solid var(--border);
  padding: clamp(32px, 5vw, 72px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch;
  min-height: 360px;
  margin-bottom: 24px;
  box-shadow: 0 30px 60px rgba(23,23,23,.08);
  overflow: hidden;
}
.diff-card__text { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
/* Big low-opacity numeral as a background design accent rather than a small
   "01 / 06" fraction — sits behind the eyebrow/title, doesn't compete for attention. */
.diff-card__no {
  position: absolute; top: -.3em; left: -.05em; z-index: 0;
  font-size: clamp(6rem, 11vw, 10rem); font-weight: 800; color: var(--pbs-accent);
  line-height: 1; letter-spacing: -.03em; opacity: .1;
  pointer-events: none; user-select: none;
}
.diff-card__en { display: block; font-size: 13px; letter-spacing: .12em; color: var(--pbs-accent); font-weight: 600; margin: 16px 0 10px; }
.diff-card__title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.diff-card__body { margin-top: 16px; color: var(--text-secondary); line-height: 1.75; }
/* No fixed aspect-ratio: stretches to match the text column's height so the
   photo and text always end on the same bottom line (align-items: stretch above). */
.diff-card__media { border-radius: var(--radius-img); overflow: hidden; min-height: 280px; }
@media (max-width: 900px) {
  .diff-card { grid-template-columns: 1fr; top: 80px; }
  .diff-card__media { order: -1; aspect-ratio: 16/9; min-height: 0; }
}

/* ---------- 11. Numbers ---------- */
.numbers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.number-item { text-align: center; }
.number-item b { display: block; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 600; letter-spacing: -.03em; }
.number-item__label { font-size: 14px; color: var(--text-secondary); margin-top: 8px; display: block; }
@media (max-width: 767px) { .numbers-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- 12. Maria Choi ---------- */
.founder { display: grid; grid-template-columns: 55% 45%; gap: 0; align-items: center; }
/* Not sticky: the photo (aspect-ratio 3/4) is taller than the text column,
   so pinning it left a ~280px "dead zone" where it sat frozen with nothing
   beside it before the next section snapped in — read as a jarring jump. */
.founder__media { position: relative; aspect-ratio: 3/4; border-radius: var(--radius-img); overflow: hidden; }
.founder__content { padding: 40px clamp(24px, 4vw, 72px); }
.founder__name { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 600; letter-spacing: -.03em; }
.founder__name small { display: block; font-size: 14px; color: var(--text-secondary); font-weight: 400; margin-top: 8px; }
.founder__headline { margin-top: 20px; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.3; }
.founder__body p { margin-top: 20px; color: var(--text-secondary); line-height: 1.8; }
.founder__highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.founder__highlights span { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13px; }
.founder__process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 88px; }
.founder__process figure { border-radius: var(--radius-img); overflow: hidden; aspect-ratio: 3/4; position: relative; }
.founder__process figcaption { position: absolute; left: 14px; bottom: 14px; color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; }
  .founder__media { position: relative; top: 0; aspect-ratio: 4/5; }
  .founder__process { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; }
}
@media (max-width: 560px) {
  /* 2-up still squeezes each photo+caption on a phone-width screen — full
     width per photo so each one (and its caption) actually reads clearly. */
  .founder__process { grid-template-columns: 1fr; gap: 16px; }
  .founder__process figure { aspect-ratio: 16/10; }
  .founder__process figcaption { font-size: 14px; }
}

/* ---------- 13. Program — Horizontal Scroll ---------- */
.program-pin { position: relative; } /* height driven by GSAP pin spacer at runtime */
.program-sticky { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; background: var(--black); color: var(--bg-primary); } /* pinned via GSAP ScrollTrigger at runtime, not CSS sticky */
.program-track { display: flex; will-change: transform; }
.program-panel { width: 100vw; flex-shrink: 0; padding: 0 clamp(24px, 6vw, 100px); }
.program-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.program-panel__inner { max-width: 560px; }
.program-panel .eyebrow { color: rgba(246,244,239,.6); }
.program-panel__no { font-size: 15px; color: var(--pbs-accent); font-weight: 600; }
.program-panel__name { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 600; letter-spacing: -.04em; margin-top: 10px; }
.program-panel__tagline { font-size: clamp(1.1rem, 1.6vw, 1.5rem); margin-top: 12px; color: rgba(246,244,239,.85); }
.program-panel__meta { display: flex; gap: 24px; margin-top: 26px; font-size: 14px; color: rgba(246,244,239,.7); }
.program-panel__price { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 600; margin-top: 20px; }
.program-panel .btn { margin-top: 32px; }
/* Curriculum table — fills the panel's empty right half with real data instead of bare dark space. */
.program-panel__curri { border: 1px solid var(--border-dark); border-radius: 16px; padding: clamp(20px, 3vw, 32px); background: rgba(246,244,239,.04); max-width: 480px; }
.program-panel__curri-label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246,244,239,.5); margin-bottom: 16px; }
.program-panel__curri-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--border-dark); font-size: 14px; color: rgba(246,244,239,.85); }
.program-panel__curri-row b { color: var(--bg-primary); font-weight: 600; white-space: nowrap; }
.program-panel__curri-total { border-bottom: none; margin-top: 4px; font-weight: 600; color: var(--pbs-accent); }
@media (max-width: 900px) {
  .program-panel__grid { grid-template-columns: 1fr; }
  .program-panel__curri { display: none; } /* mobile falls back to vertical cards — keep them short, full curriculum lives on the detail page */
}
.program-progress { position: absolute; left: clamp(24px,6vw,100px); bottom: 40px; display: flex; gap: 10px; z-index: 3; }
.program-progress span { width: 32px; height: 3px; background: rgba(246,244,239,.25); border-radius: 2px; overflow: hidden; }
.program-progress span::after { content: ''; display: block; height: 100%; width: 0; background: var(--pbs-accent); }
.program-progress span.is-active::after { width: 100%; }

/* mobile: vertical cards, no pin */
@media (max-width: 900px) {
  .program-pin { height: auto; }
  .program-sticky { position: relative; height: auto; display: block; padding: 60px 0; }
  .program-track { display: block; }
  .program-panel { width: auto; padding: 0 24px; margin-bottom: 60px; }
  .program-progress { display: none; }
}

/* ---------- 14. Journey — accumulating list (each step stays, doesn't cover
   the previous one) instead of full-viewport sticky covers, which wasted a
   huge amount of scroll height and hid earlier steps once passed. ---------- */
.journey-list { margin-top: 64px; }
.journey-step {
  display: flex; align-items: center; min-height: 0;
  padding: 44px 0; border-top: 1px solid var(--border);
}
.journey-step:first-child { border-top: none; }
.journey-step__inner { display: grid; grid-template-columns: 140px 1fr 1fr; gap: 40px; align-items: center; width: 100%; }
.journey-step__count { font-size: 15px; color: var(--text-secondary); }
.journey-step__en { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -.03em; }
.journey-step__t { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.3; color: var(--text-secondary); }
@media (max-width: 900px) {
  .journey-step__inner { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .journey-step { padding: 32px 0; }
}

/* ---------- 15. In the Field — rectangular photos orbiting the heading (desktop), auto-scroll marquee (mobile) ---------- */
.field-orbit__stage { position: relative; min-height: 700px; display: flex; align-items: center; justify-content: center; }
.field-orbit__center { position: relative; z-index: 2; max-width: 420px; }
.field-photo { position: absolute; z-index: 1; text-align: center; }
.field-photo__float {
  overflow: hidden; aspect-ratio: 4/3;
  animation: fieldFloat 5s ease-in-out infinite;
}
.field-photo:nth-child(2) .field-photo__float { animation-delay: -1s; }
.field-photo:nth-child(3) .field-photo__float { animation-delay: -2s; }
.field-photo:nth-child(4) .field-photo__float { animation-delay: -3s; }
.field-photo:nth-child(5) .field-photo__float { animation-delay: -4s; }
.field-photo:nth-child(6) .field-photo__float { animation-delay: -1.5s; }
.field-photo:nth-child(7) .field-photo__float { animation-delay: -2.5s; }
.field-photo picture { display: block; transition: transform .4s var(--ease-main); }
.field-photo:hover picture { transform: scale(1.06); }
@keyframes fieldFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.field-caption { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: -.01em; }

.field-photo--1 { top: -4%; left: 0%; width: min(22vw, 230px); }
.field-photo--2 { top: 2%; right: 0%; width: min(17vw, 175px); }
.field-photo--3 { bottom: -8%; left: 14%; width: min(16vw, 165px); }
.field-photo--4 { bottom: -2%; right: 12%; width: min(19vw, 200px); }
.field-photo--5 { top: 44%; right: -3%; width: min(13vw, 135px); }
.field-photo--6 { top: 24%; left: -5%; width: min(14vw, 145px); }
.field-photo--7 { bottom: -16%; left: 38%; width: min(12vw, 130px); }

.field-marquee { display: none; }

@media (max-width: 900px) {
  .field-photo { display: none; }
  .field-orbit__stage { display: block; min-height: 0; }
  .field-marquee { display: block; margin-top: 40px; overflow: hidden; }
  .field-marquee__track { display: flex; gap: 14px; width: max-content; animation: fieldMarquee 30s linear infinite; }
  .field-marquee__item { flex: 0 0 auto; width: 160px; overflow: hidden; aspect-ratio: 4/3; }
  @keyframes fieldMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .field-photo__float { animation: none; }
  .field-marquee__track { animation: none; }
}

/* ---------- 16. PBS People ---------- */
/* minmax(0, 1fr), not bare 1fr (= minmax(auto, 1fr)) — otherwise a single
   card with long name/org text forces its whole column wider than the rest,
   which is what was pushing the "다음은 당신" CTA card oversized and out of
   the grid's own bottom edge. */
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.people-grid--directory { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.people-card { position: relative; }
.people-card__media { border-radius: var(--radius-img); overflow: hidden; aspect-ratio: 3/4; }
.people-card__media img { transition: transform .6s var(--ease-main); }
.people-card:hover .people-card__media img { transform: scale(1.04); }
.people-card__body { margin-top: 14px; transition: transform .3s var(--ease-main); }
.people-card__name { font-weight: 600; font-size: 16px; letter-spacing: -.02em; }
.people-card__role { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.people-card__specialty { font-size: 12px; color: var(--pbs-accent); margin-top: 6px; }
.people-card__badge { position: absolute; top: 12px; left: 12px; background: rgba(23,23,23,.72); color: #fff; font-size: 10px; letter-spacing: .08em; padding: 5px 10px; border-radius: var(--radius-pill); text-transform: uppercase; }
.people-cta {
  border: 1px dashed var(--border); border-radius: var(--radius-img); aspect-ratio: 3/4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.people-cta__plus { font-size: 40px; font-weight: 300; color: var(--pbs-accent); }
@media (max-width: 900px) {
  .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-grid--directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.people-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.people-filters button {
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 9px 18px; font-size: 13px; font-weight: 500;
  transition: background .25s var(--ease-main), color .25s var(--ease-main);
}
.people-filters button.is-active { background: var(--black); color: var(--bg-primary); border-color: var(--black); }
.people-search { margin-top: 24px; max-width: 320px; }
.people-search input {
  width: 100%; height: 48px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 20px;
  font-family: inherit; font-size: 14px; background: var(--white);
}

/* ---------- 17. Beyond Certification ---------- */
.beyond-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; margin-top: 56px; }
.beyond-card { background: var(--bg-primary); padding: 36px 26px; }
/* Sequential reveal instead of all cards fading in together. */
.beyond-card:nth-child(1) { transition-delay: 0s !important; }
.beyond-card:nth-child(2) { transition-delay: .1s !important; }
.beyond-card:nth-child(3) { transition-delay: .2s !important; }
.beyond-card:nth-child(4) { transition-delay: .3s !important; }
.beyond-card:nth-child(5) { transition-delay: .4s !important; }
.beyond-card:nth-child(6) { transition-delay: .5s !important; }
.beyond-card__icon { color: var(--pbs-accent); }
.icon-line { display: inline-flex; align-items: center; gap: 8px; }
.icon-line svg { flex-shrink: 0; }
.beyond-card__t { font-size: 17px; font-weight: 600; margin-top: 18px; letter-spacing: -.02em; }
.beyond-card__d { font-size: 14px; color: var(--text-secondary); margin-top: 10px; line-height: 1.6; }
@media (max-width: 900px) { .beyond-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .beyond-grid { grid-template-columns: 1fr; } }
.beyond-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .beyond-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .beyond-grid--3col { grid-template-columns: 1fr; } }

/* ---------- 18. Stories / Reviews ---------- */
/* Scroll-hijacked: each review pins and covers the previous one (same sticky-
   stack technique as .journey-step) instead of scrolling past normally. */
.review-slide {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 56px 24px; background: var(--bg-secondary);
}
/* Last slide: nothing after it to cover it, so a full 100vh sticky hold here
   would just sit static for a whole scroll before Admission Process appears
   (the exact "dead zone" bug fixed on .journey-step:last-child). */
.review-slide:last-child { position: relative; min-height: auto; padding: 96px 24px; }
.review-slide__stars { color: var(--pbs-accent); font-size: 18px; letter-spacing: 2px; }
.review-slide__quote { font-size: clamp(1.25rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.35; max-width: 820px; margin-top: 18px; }
.review-slide__tag { margin-top: 20px; font-size: 14px; color: var(--text-secondary); }
@media (max-width: 767px) {
  .review-slide { position: relative; min-height: auto; padding: 64px 24px; border-top: 1px solid var(--border); }
  .review-slide:first-child { border-top: none; }
}

/* ---------- 19. Apply / Selection ---------- */
.selection-steps { display: flex; justify-content: space-between; gap: 12px; margin-top: 56px; counter-reset: step; }
.selection-step { flex: 1; text-align: center; position: relative; }
/* Sequential "tak-tak-tak" reveal instead of all steps fading in at once. */
.selection-step:nth-child(1) { transition-delay: 0s !important; }
.selection-step:nth-child(2) { transition-delay: .1s !important; }
.selection-step:nth-child(3) { transition-delay: .2s !important; }
.selection-step:nth-child(4) { transition-delay: .3s !important; }
.selection-step:nth-child(5) { transition-delay: .4s !important; }
.selection-step__no { font-size: 15px; color: var(--pbs-accent); font-weight: 600; }
.selection-step__t { margin-top: 10px; font-size: 15px; font-weight: 500; }
.selection-step:not(:last-child)::after {
  content: ''; position: absolute; top: 10px; left: 55%; width: 90%; height: 1px; background: var(--border);
}
@media (max-width: 767px) {
  .selection-steps { flex-direction: column; gap: 24px; }
  .selection-step:not(:last-child)::after { display: none; }
}

.compare-tabs { display: flex; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.compare-tabs button, .compare-tabs a { flex: 1 1 0; min-width: 200px; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 22px; text-align: left; }
.compare-tabs button b, .compare-tabs a b { display: block; font-size: 15px; }
.compare-tabs button > span, .compare-tabs a > span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.compare-tabs button.is-active { background: var(--black); color: var(--bg-primary); border-color: var(--black); }
.compare-tabs button.is-active span { color: rgba(246,244,239,.7); }
.compare-tabs .accent { color: var(--pbs-accent); }
.compare-tabs button.is-active .accent { color: inherit; }
@media (max-width: 767px) {
  .compare-tabs { flex-direction: column; gap: 0; }
  .compare-tabs button, .compare-tabs a { border: none; border-radius: 0; border-bottom: 1px solid var(--border); padding: 16px 4px; min-width: 0; }
  .compare-tabs button:last-child, .compare-tabs a:last-child { border-bottom: none; }
  .compare-tabs button.is-active { background: none; color: inherit; }
  .compare-tabs button.is-active span { color: var(--text-secondary); }
}

.tier-panel { display: none; margin-top: 40px; border: 1px solid var(--border); border-radius: 20px; padding: clamp(24px,4vw,48px); }
.tier-panel.is-active { display: block; }
.tier-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.tier-panel__price { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; }
.tier-panel__intro { margin-top: 20px; color: var(--text-secondary); line-height: 1.75; max-width: 720px; }
.tier-panel__list { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.tier-panel__list li { font-size: 14px; color: var(--text-secondary); padding-left: 18px; position: relative; }
.tier-panel__list li::before { content: '✓'; position: absolute; left: 0; color: var(--pbs-accent); }
.tier-panel__curri { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 24px; }
.tier-panel__curri-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.tier-panel__curri-row span { color: var(--text-secondary); }
.tier-panel__foot { margin-top: 24px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
@media (max-width: 700px) { .tier-panel__list { grid-template-columns: 1fr; } }

/* Program detail page — full curriculum as a numbered step list (title +
   session count + a plain-language line on what happens that session),
   instead of the compact label/count row used in the tighter tier panels. */
.curri-list { max-width: 760px; margin: 48px auto 0; }
.curri-step { display: flex; gap: 24px; padding: 28px 0; border-top: 1px solid var(--border); }
.curri-step:first-child { border-top: none; }
.curri-step__no { flex: 0 0 auto; width: 36px; padding-top: 2px; font-size: 15px; font-weight: 600; color: var(--pbs-accent); }
.curri-step__body { flex: 1 1 0; min-width: 0; }
.curri-step__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.curri-step__t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.curri-step__n { flex: 0 0 auto; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.curri-step__d { margin-top: 8px; font-size: 14px; color: var(--text-secondary); line-height: 1.65; }
.curri-step--total { border-top: 2px solid var(--black); padding-top: 22px; }
.curri-step--total .curri-step__t { color: var(--pbs-accent); font-size: 15px; }
@media (max-width: 640px) {
  .curri-step { gap: 14px; padding: 22px 0; }
  .curri-step__no { width: 26px; font-size: 13px; }
}

/* Apply multi-step form */
.apply-form { margin: 56px auto 0; max-width: 720px; }
.apply-form__progress { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); margin-bottom: 40px; }
.apply-form__bar { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.apply-form__bar-fill { height: 100%; width: 16.66%; background: var(--pbs-accent); transition: width .4s var(--ease-main); }
.apply-step { display: none; }
.apply-step.is-active { display: block; animation: fadeUp .5s var(--ease-main); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.apply-step__q { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; margin-bottom: 28px; }
.apply-field { width: 100%; border: none; border-bottom: 2px solid var(--border); background: transparent; font-family: inherit; font-size: 20px; padding: 12px 4px; }
.apply-field:focus { outline: none; border-color: var(--black); }
textarea.apply-field { min-height: 120px; resize: vertical; }
.apply-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.apply-choices button { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 12px 22px; font-size: 14px; }
.apply-choices button.is-selected { background: var(--black); color: var(--bg-primary); border-color: var(--black); }
.apply-step__nav { display: flex; justify-content: space-between; margin-top: 40px; }
.apply-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); margin-top: 20px; }
.apply-success { text-align: center; padding: 80px 24px; }
.apply-success h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; }
.apply-success p { margin-top: 16px; color: var(--text-secondary); }

/* ---------- 20. FAQ ---------- */
.faq-list { margin-top: 40px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 4px; text-align: left; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.faq-item__q .pm { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-item__q .pm::before, .faq-item__q .pm::after { content: ''; position: absolute; background: var(--text-primary); transition: transform .3s var(--ease-main); }
.faq-item__q .pm::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-item__q .pm::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq-item.is-open .pm::after { transform: rotate(90deg); opacity: 0; }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-main); }
.faq-item__a p { padding: 0 4px 26px; color: var(--text-secondary); line-height: 1.75; max-width: 780px; }

/* ---------- 21. Final CTA ---------- */
.final-cta { min-height: 90vh; display: flex; align-items: center; position: relative; overflow: hidden; }
/* inset extends 20px past the section edges (top/bottom) so the parallax
   translate (~±10px) never reveals a gap. */
.final-cta__bg { position: absolute; top: -20px; left: 0; right: 0; bottom: -20px; z-index: 0; }
.final-cta__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,23,23,.55), rgba(23,23,23,.88)); z-index: 1; }
.final-cta__inner { position: relative; z-index: 2; color: var(--bg-primary); text-align: center; } /* width comes from .container (also on this element) */
.final-cta .graphic-en { color: rgba(246,244,239,.55); }
.final-cta h2 { font-size: clamp(2.5rem, 5.5vw, 5.5rem); font-weight: 600; letter-spacing: -.04em; margin-top: 16px; }
.final-cta p { margin-top: 20px; color: rgba(246,244,239,.8); max-width: 560px; margin-inline: auto; }
.final-cta__actions { display: flex; justify-content: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.final-cta__actions .btn { flex: 1 1 0; justify-content: center; min-width: 220px; max-width: 320px; }

/* ---------- 22. Program detail page ---------- */
.page-banner { padding: 180px 0 60px; }
.page-banner .crumb { margin-top: 20px; font-size: 13px; color: var(--text-secondary); }
.page-banner .crumb a { text-decoration: underline; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.detail-outcome-badge { display: table; background: var(--black); color: var(--bg-primary); padding: 10px 20px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; letter-spacing: .04em; margin-bottom: 20px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

/* Field Training: text pinned in view while the photo column scrolls past it */
.detail-grid--sticky { grid-template-columns: .85fr 1.15fr; align-items: start; }
.detail-grid__sticky { position: sticky; top: 120px; }
.detail-grid__scroll { display: flex; flex-direction: column; gap: 20px; }
.detail-grid__scroll figure { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-img); overflow: hidden; }
.detail-grid__scroll figcaption { position: absolute; left: 16px; bottom: 16px; color: #fff; font-size: 14px; font-weight: 500; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
@media (max-width: 900px) {
  .detail-grid--sticky { grid-template-columns: 1fr; }
  .detail-grid__sticky { position: static; }
}

/* ---------- 23. Footer ---------- */
.site-footer { background: var(--black); color: var(--bg-primary); padding: 100px 0 40px; }
.site-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid var(--border-dark); }
.site-footer__tag { margin-top: 14px; color: rgba(246,244,239,.6); font-size: 14px; }
.site-footer__nav { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.site-footer__contact { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.site-footer__legal { margin-top: 24px; font-size: 12px; color: rgba(246,244,239,.5); }

/* ---------- 24. Reveal / motion base states ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity .8s var(--ease-main), transform .8s var(--ease-main); }
[data-reveal-img] { clip-path: inset(0 0 0 0); }
[data-reveal-img] img { transform: scale(1.1); opacity: 0; transition: transform 1s var(--ease-main), opacity 1s var(--ease-main); }
[data-reveal-img].is-visible img { transform: scale(1); opacity: 1; }
[data-split] .split-line, [data-split-load] .split-line { overflow: hidden; display: block; }
[data-split] .split-line > span, [data-split-load] .split-line > span { display: block; transform: translateY(110%); transition: transform .9s var(--ease-main); }
[data-split].is-visible .split-line > span, [data-split-load].is-visible .split-line > span { transform: translateY(0); }

/* ---------- 25. Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal-img] img, [data-split] .split-line > span, [data-split-load] .split-line > span { opacity: 1 !important; transform: none !important; }
  .hero { position: relative; }
  .program-pin { height: auto; }
  .program-sticky { position: relative; height: auto; display: block; padding: 60px 0; }
  .program-track { display: block; }
  .program-panel { width: auto; margin-bottom: 60px; }
}