/* =========================================================
   AI로 목회하라 — Landing Page
   CTS 콘텐츠지원국
   Editorial minimalism · Optically-tuned typography
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --bg:         #F7F5F0;
  --bg-alt:    #EFEBE1;
  --bg-warm:   #F2EEE4;
  --ink:       #1C1A17;
  --ink-soft:  #3A3733;
  --ink-mute:  #7A756E;
  --ink-faint: #A9A39A;
  --line:      #D9D3C7;
  --line-soft: #E8E3D8;
  --gold:      #A8894F;
  --gold-soft: #C9AF7F;
  --green:     #2C3A34;
  --green-soft:#4A5B54;
  --white:     #FFFFFF;

  --serif-ko:  "Noto Serif KR", "Nanum Myeongjo", ui-serif, Georgia, serif;
  --serif-en:  "Cormorant Garamond", "Noto Serif KR", ui-serif, Georgia, serif;
  --sans:      "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --maxw: 540px;
  --pad-x: 24px;
  --pad-y: 88px;     /* Tighter default section padding */

  --ease: cubic-bezier(.22,.68,.24,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; }
h1,h2,h3,h4,p,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background: var(--gold); color: #fff; }

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.section{
  padding: var(--pad-y) 0;
  position: relative;
}


/* =========================================================
   Typography primitives — editorially refined
   ========================================================= */

/* Eyebrow — numeric section marker */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 22px;
}
.eyebrow--light{ color: var(--gold-soft); }
.eyebrow__num{
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  color: inherit;
  text-transform: none;
  line-height: 1;
}
.eyebrow__bar{
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

/* Heading — Korean serif with tight tracking */
.heading{
  font-family: var(--serif-ko);
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(28px, 8.4vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.028em;
  margin-bottom: 22px;
  word-break: keep-all;
  text-wrap: balance;
}
.heading em{
  font-style: normal;
  color: var(--gold);
  font-weight: 500;
}
.heading--light{ color: var(--white); }
.heading--light em{ color: var(--gold-soft); }

/* Body paragraph — comfortable but compact */
.paragraph{
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: -0.006em;
  word-break: keep-all;
  text-wrap: pretty;
}
.paragraph--lead{
  font-size: 15px;
}
.paragraph--lead em{
  font-family: var(--serif-ko);
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
  display: inline-block;
  margin-bottom: 4px;
}
.paragraph--light{ color: rgba(255,255,255,.72); }


/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 26px;
  border: 1px solid transparent;
  border-radius: 1px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all .4s var(--ease);
  min-height: 54px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn--primary{
  background: var(--ink);
  color: #F7F5F0;
  border-color: var(--ink);
}
.btn--primary:hover{ background: var(--gold); border-color: var(--gold); }

.btn--dark{
  background: var(--green);
  color: #F7F5F0;
  border-color: var(--green);
}
.btn--dark:hover{ background: var(--ink); border-color: var(--ink); }

.btn--ghost{
  background: transparent;
  color: #F7F5F0;
  border-color: rgba(255,255,255,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn--ghost:hover{ background: rgba(255,255,255,.1); border-color:#fff; }

.btn--outline-light{
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.35);
}
.btn--outline-light:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.7);
}

.btn--block{ display:flex; width:100%; }


/* =========================================================
   TOP NAVIGATION — Editorial minimalist sticky bar
   Appears only after user scrolls past hero (js/main.js toggles .is-visible)
   ========================================================= */
.topnav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(28, 26, 23, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;   /* Overrides FOUC inline style once CSS is loaded */
  transition: transform .5s var(--ease), opacity .35s var(--ease);
}
.topnav.is-visible{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.topnav__inner{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 12px;
}
.topnav__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  line-height: 1;
  flex: 0 0 auto;
}
.topnav__brand img{
  height: 22px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
}
.topnav__brand-text{
  font-family: var(--serif-ko);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
}

/* Right CTA */
.topnav__cta{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border-radius: 999px;
  letter-spacing: -0.005em;
  transition: transform .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.topnav__cta:hover{ background: var(--gold-soft); }
.topnav__cta:active{ transform: scale(.97); }

/* On very narrow screens, hide the brand text to save space */
@media (max-width: 400px){
  .topnav__brand-text{ display: none; }
  .topnav__cta{ padding: 7px 13px; font-size: 12.5px; }
  .topnav__inner{ padding: 10px 18px; }
}


/* =========================================================
   FLOATING APPLY — persistent bottom-right CTA on scroll
   ========================================================= */
.floating-apply{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow:
    0 12px 28px -8px rgba(28,26,23,.45),
    0 4px 12px -4px rgba(28,26,23,.3);
  transform: translateY(140%) scale(.9);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform .5s var(--ease), opacity .35s var(--ease);
  border: 1px solid rgba(255,255,255,.08);
}
.floating-apply.is-visible{
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.floating-apply:hover{
  background: var(--gold);
}
.floating-apply:active{ transform: translateY(0) scale(.96); }
.floating-apply__arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  transition: background .2s var(--ease), transform .3s var(--ease);
}
.floating-apply:hover .floating-apply__arrow{
  background: rgba(255,255,255,.24);
  transform: translateX(2px);
}

/* Hide floating apply when the apply section itself is in view — redundant */
.floating-apply.is-near-apply{
  transform: translateY(140%) scale(.9);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 380px){
  .floating-apply{
    right: 16px;
    bottom: 16px;
    padding: 12px 16px;
    font-size: 13px;
  }
}


/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  width: 100%;
  min-height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__media{
  position:absolute; inset:0; z-index:0;
  overflow: hidden;
  background: #1C1A17;
}
/* Poster image: primary visual layer. Always visible, treated as intentional
   design — video is a progressive enhancement layered above it.               */
.hero__poster{
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__poster img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  filter: brightness(.88) contrast(1.02);
  /* Subtle Ken-Burns motion so the hero never feels frozen even without video */
  animation: heroPosterDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroPosterDrift{
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce){
  .hero__poster img{ animation: none; }
}
/* Video sits above the poster. If it fails to load or play, the poster below
   remains visible — no error state needed.                                    */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.04);
  opacity: 0;
  transition: opacity .8s var(--ease);
  z-index: 1;
}
.hero__video.is-playing{
  opacity: 1;
}
.hero__overlay{
  position:absolute; inset:0;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(28,26,23,0.62) 0%,
      rgba(28,26,23,0.45) 40%,
      rgba(28,26,23,0.82) 100%);
}

.hero__grain{
  position:absolute; inset:0;
  z-index: 2;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
}

.hero__inner{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--maxw);
  padding: 130px var(--pad-x) 130px;
  text-align: left;
}
@media (max-height: 720px){
  .hero__inner{ padding-top: 104px; padding-bottom: 100px; }
}
@media (max-height: 620px){
  .hero__inner{ padding-top: 92px; padding-bottom: 88px; }
}

/* Hero logo — CTS symbol only, top-center as silent brand signature.
   True alpha is created client-side by js/logo-transparent.js. */
/* Hero logo — absolutely positioned. Its translateX(-50%) must NOT be
   overwritten by the generic .reveal rule (which does translateY(20px)).
   Higher-specificity selectors below fix the animation to fade-only.        */
.hero__logo,
.hero__logo.reveal{
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: block;
  line-height: 0;
  opacity: 0;
  transition: opacity .9s var(--ease);
  will-change: opacity;
}
.hero__logo.is-visible,
.hero__logo.reveal.is-visible{
  opacity: 1;
  transform: translateX(-50%);
}
.hero__logo:hover{ opacity: .78; }
.hero__logo img{
  height: 36px;
  max-height: 36px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.45));
}
@media (max-width: 380px){
  .hero__logo{ top: 22px; }
  .hero__logo img{ height: 32px; }
}

/* Eyebrow above H1 — editorial preamble */
.hero__eyebrow{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  line-height: 1.4;
  word-break: keep-all;
}
.hero__eyebrow-mark{
  flex: 0 0 24px;
  height: 1px;
  background: var(--gold-soft);
  opacity: .9;
}

.hero__title{
  font-family: var(--serif-ko);
  font-weight: 500;
  font-size: clamp(56px, 16.5vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: #fff;
  margin-bottom: 32px;
  text-shadow: 0 2px 40px rgba(0,0,0,.2);
}
.hero__title-line{
  display: block;
}

.hero__rule{
  width: 36px;
  height: 1px;
  background: rgba(255,255,255,.4);
  margin: 0 0 28px;
}

.hero__lead{
  font-family: var(--serif-ko);
  font-size: 19px;
  line-height: 1.65;
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 56px;
  word-break: keep-all;
}
.hero__lead em{
  font-style: normal;
  color: var(--gold-soft);
  font-weight: 500;
}

.hero__cta{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.hero__cta .btn{ width: 100%; }
.hero__cta .btn--primary{
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 12px 32px -12px rgba(168,137,79,.7);
}
.hero__cta .btn--primary:hover{ background: #B79861; border-color: #B79861; }

.hero__scroll{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.7);
  transition: opacity .3s var(--ease);
}
/* Hide scroll indicator on very short viewports so it doesn't overlap CTA */
@media (max-height: 680px){
  .hero__scroll{ display: none; }
}
.hero__scroll-label{
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.hero__scroll-line{
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after{
  content:"";
  position:absolute; left:0; right:0; top:-100%;
  height:100%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1));
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{
  0%   { transform: translateY(0); }
  100% { transform: translateY(200%); }
}


/* =========================================================
   EMPATHY
   ========================================================= */
.section--empathy{
  background: var(--bg);
  padding-top: 96px;
  padding-bottom: 88px;
}

.pullquote{
  margin-top: 44px;
  padding: 34px 0 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.pullquote::before{
  content: "\201C";
  position: absolute;
  top: 12px;
  left: 0;
  font-family: var(--serif-en);
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
  opacity: .3;
}
.pullquote p{
  font-family: var(--serif-ko);
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: -0.028em;
  word-break: keep-all;
  font-weight: 400;
}
.pullquote strong{
  font-weight: 600;
  color: var(--gold);
}
.pullquote .strike{
  text-decoration: line-through;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  color: var(--ink-mute);
}


/* =========================================================
   SPEAKER — compact editorial profile
   High specificity to prevent any parent rule from breaking layout.
   ========================================================= */
.section--speaker{
  background: var(--bg-alt);
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
}
.section--speaker::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--line);
}

/* Force centered flow — !important guards against any external override */
.section--speaker .speaker{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 360px;
  width: 100%;
  margin: 40px auto 32px !important;
  padding: 0;
}

/* Circular portrait — 130px (much smaller than before) */
.section--speaker .speaker__portrait{
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative;
  background: var(--bg-warm);
  box-shadow:
    0 0 0 1px var(--line-soft),
    0 18px 36px -18px rgba(28,26,23,.28);
  margin: 0 auto 22px !important;
  flex: 0 0 130px;
}
.section--speaker .speaker__portrait::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--bg);
  pointer-events: none;
}
.section--speaker .speaker__portrait img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  filter: contrast(1.03) saturate(1.02);
  transition: transform 1.4s var(--ease);
  border-radius: 50%;
  display: block;
}
.section--speaker .speaker:hover .speaker__portrait img{ transform: scale(1.04); }

.section--speaker .speaker__caption{
  width: 100%;
  padding: 0;
  text-align: center;
}
.section--speaker .speaker__role{
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 11px;
  color: var(--gold);
  margin: 0 0 8px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.section--speaker .speaker__name{
  font-family: var(--serif-ko);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.028em;
  margin: 0 0 18px;
  line-height: 1.25;
  text-align: center;
}
.section--speaker .speaker__name span{
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-mute);
  margin-left: 2px;
  letter-spacing: -0.01em;
}
.section--speaker .speaker__list{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 0;
  margin: 0 auto 16px;
  max-width: 280px;
  position: relative;
  list-style: none;
  text-align: center;
}
.section--speaker .speaker__list::before,
.section--speaker .speaker__list::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: var(--line);
}
.section--speaker .speaker__list::before{ top: 0; }
.section--speaker .speaker__list::after{ bottom: 0; }
.section--speaker .speaker__list li{
  font-family: var(--serif-ko);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  letter-spacing: -0.018em;
  word-break: keep-all;
  font-weight: 400;
  text-align: center;
  display: block;
}
.section--speaker .speaker__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.01em;
  transition: color .25s var(--ease), gap .25s var(--ease);
  padding: 6px 12px;
  margin-top: 8px;
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: rgba(168,137,79,.06);
}
.section--speaker .speaker__link:hover{ 
  color: #fff; 
  background: var(--gold);
  gap: 8px; 
}
.section--speaker .speaker__link svg{ opacity: .85; transition: transform .25s var(--ease); }
.section--speaker .speaker__link:hover svg{ transform: translate(2px, -2px); opacity: 1; }

.speaker-quote{
  margin-top: 36px;
  padding: 32px 26px 28px;
  background: var(--ink);
  color: #fff;
  position: relative;
  border-radius: 1px;
}
.speaker-quote::before{
  content: "\201C";
  position: absolute;
  top: 12px; left: 22px;
  font-family: var(--serif-en);
  font-size: 52px;
  line-height: 1;
  color: var(--gold-soft);
  opacity: .5;
}
.speaker-quote p{
  font-family: var(--serif-ko);
  font-size: 17px;
  line-height: 1.7;
  color: #fff;
  letter-spacing: -0.024em;
  word-break: keep-all;
  padding-left: 26px;
  margin-bottom: 14px;
}
.speaker-quote strong{
  color: var(--gold-soft);
  font-weight: 500;
}
.speaker-quote footer{
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  padding-left: 26px;
  font-weight: 500;
}

@media (max-width: 380px){
  .speaker__portrait{
    width: 140px;
    height: 140px;
  }
  .speaker__name{ font-size: 22px; }
  .speaker-quote{ padding: 28px 22px 24px; }
  .speaker-quote p{ font-size: 16px; padding-left: 22px; }
  .speaker-quote footer{ padding-left: 22px; }
  .speaker-quote::before{ left: 18px; font-size: 44px; }
}


/* =========================================================
   SAMPLES
   ========================================================= */
.section--samples{
  background: var(--bg-warm);
  padding-top: 88px;
  padding-bottom: 88px;
}
.samples__note{
  margin-top: 28px;
  text-align: center;
  font-family: var(--serif-ko);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-mute);
  letter-spacing: -0.015em;
  word-break: keep-all;
  padding: 18px 20px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.samples__note strong{
  color: var(--gold);
  font-weight: 500;
}
.sample-list{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 44px;
}
.sample-card{
  background: var(--bg);
  border: 1px solid var(--line-soft);
  transition: border-color .5s var(--ease), transform .6s var(--ease), box-shadow .5s var(--ease);
}
.sample-card:hover{
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(28,26,23,.15);
}
.sample-card__link{
  display: block;
  color: inherit;
}
.sample-card__thumb{
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-alt);
}
.sample-card__thumb::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(28,26,23,.15));
  pointer-events:none;
}
.sample-card__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1.2s var(--ease);
}
.sample-card:hover .sample-card__thumb img{ transform: scale(1.06); }

.sample-card__body{
  padding: 22px 22px 24px;
}
.sample-card__label{
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 500;
}
.sample-card__title{
  font-family: var(--serif-ko);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.42;
  color: var(--ink);
  letter-spacing: -0.024em;
  margin-bottom: 10px;
  word-break: keep-all;
}
.sample-card__desc{
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-mute);
  margin-bottom: 18px;
  word-break: keep-all;
  letter-spacing: -0.005em;
}
.sample-card__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink);
  transition: gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sample-card:hover .sample-card__cta{ gap: 14px; color: var(--gold); border-color: var(--gold); }


/* =========================================================
   RESOURCE — dark section
   ========================================================= */
.section--resource{
  background: var(--green);
  color: #fff;
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
  overflow: hidden;
}
.section--resource::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1000px 250px at 50% 0%, rgba(168,137,79,.18), transparent 60%);
  pointer-events:none;
}
.section--resource .container{ position: relative; z-index: 1; }

.resource-list{
  margin: 36px 0 32px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.resource-list li{
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--serif-ko);
  font-size: 17px;
  color: #fff;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.resource-list li span{
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  color: var(--gold-soft);
  min-width: 28px;
  font-weight: 500;
  letter-spacing: 0;
}
.resource-list li b{
  color: var(--gold-soft);
  font-weight: 500;
  margin-right: 6px;
}


/* =========================================================
   CREDIBILITY
   ========================================================= */
.section--credibility{
  background: var(--bg);
  padding-top: 88px;
  padding-bottom: 88px;
}
.gallery{
  margin-top: 38px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.gallery__item{ margin:0; }
.gallery__item img{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  filter: contrast(1.03) saturate(.98);
}

.testimonials{
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
  position: relative;
}
.testimonials::before{
  content: "\201C";
  position: absolute;
  top: 22px;
  left: 0;
  font-family: var(--serif-en);
  font-size: 46px;
  line-height: 1;
  color: var(--gold);
  opacity: .32;
}
.testimonial{
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line-soft);
}
.testimonial:last-child{ border-bottom: none; padding-bottom: 4px; }
.testimonial p{
  font-family: var(--serif-ko);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: -0.024em;
  margin-bottom: 12px;
  word-break: keep-all;
  font-weight: 400;
}
.testimonial footer{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 500;
}


/* =========================================================
   PROGRAMS
   ========================================================= */
.section--programs{
  background: var(--bg-warm);
  padding-top: 96px;
  padding-bottom: 96px;
}

.program{
  margin-top: 40px;
  background: var(--bg);
  padding: 34px 24px 32px;
  border: 1px solid var(--line-soft);
  position: relative;
}
.program--workshop{
  background: var(--ink);
  color: #F7F5F0;
  border-color: var(--ink);
}
.program__header{
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.program--workshop .program__header{
  border-bottom-color: rgba(255,255,255,.15);
}
.program__badge{
  display: inline-block;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 500;
}
.program__badge--dark{ color: var(--gold-soft); }
.program__title{
  font-family: var(--serif-ko);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.028em;
  margin-bottom: 8px;
  line-height: 1.2;
}
.program--workshop .program__title{ color: #fff; }
.program__subtitle{
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.6;
  word-break: keep-all;
  letter-spacing: -0.005em;
}
.program--workshop .program__subtitle{ color: rgba(255,255,255,.58); }

.program__meta{
  display: block;
  margin-bottom: 28px;
}
.program__meta > div{
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: start;
}
.program--workshop .program__meta > div{ border-bottom-color: rgba(255,255,255,.08); }
.program__meta > div:last-child{ border-bottom: none; }
.program__meta dt{
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 4px;
  font-weight: 500;
}
.program--workshop .program__meta dt{ color: var(--gold-soft); }
.program__meta dd{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  word-break: keep-all;
  letter-spacing: -0.01em;
}
.program--workshop .program__meta dd{ color: #fff; }
.program__meta dd span{
  display: block;
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 400;
  margin-top: 3px;
  letter-spacing: 0;
}
.program--workshop .program__meta dd span{ color: rgba(255,255,255,.5); }
.program__meta dd strong{ color: var(--gold); font-weight:600; }
.program--workshop .program__meta dd strong{ color: var(--gold-soft); }

/* Journey timeline */
.journey{
  margin: 30px 0 28px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.journey__title{
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 13px;
  color: var(--gold-soft);
  margin-bottom: 24px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.journey__list{
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.journey__list li{
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  position: relative;
}
.journey__list li::before{
  content:"";
  position: absolute;
  left: 10px; top: 24px; bottom: -20px;
  width: 1px;
  background: rgba(255,255,255,.15);
}
.journey__list li:last-child::before{ display: none; }
.journey__num{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-soft);
  color: var(--gold-soft);
  border-radius: 50%;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 11px;
  font-weight: 500;
  background: var(--ink);
  position: relative;
  z-index: 1;
}
.journey__list h4{
  font-family: var(--serif-ko);
  font-size: 15.5px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  word-break: keep-all;
  line-height: 1.4;
}
.journey__list p{
  font-size: 12.5px;
  color: rgba(255,255,255,.58);
  line-height: 1.6;
  word-break: keep-all;
  letter-spacing: -0.005em;
}

.program__quote{
  margin: 0 0 26px;
  padding: 20px 18px;
  border-left: 2px solid var(--gold-soft);
  background: rgba(255,255,255,.03);
}
.program__quote p{
  font-family: var(--serif-ko);
  font-size: 15.5px;
  line-height: 1.7;
  color: #fff;
  word-break: keep-all;
  letter-spacing: -0.02em;
}
.program__quote strong{ color: var(--gold-soft); font-weight: 500; }

.program-divider{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0;
  color: var(--ink-mute);
}
.program-divider span{
  flex: 1;
  height: 1px;
  background: var(--line);
}
.program-divider em{
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--gold);
  font-weight: 500;
}

.program__notice{
  margin-top: 32px;
  padding: 18px 22px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--bg);
  word-break: keep-all;
  letter-spacing: -0.005em;
}
.program__notice strong{ color: var(--gold); font-weight: 500; }


/* =========================================================
   FAQ
   ========================================================= */
.section--faq{
  background: var(--bg);
  padding-top: 88px;
  padding-bottom: 88px;
}
.faq-list{
  margin-top: 38px;
  border-top: 1px solid var(--line);
}
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-item > summary{
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink);
}
.faq-item > summary::-webkit-details-marker{ display: none; }
.faq-item__q{
  font-family: var(--serif-ko);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.5;
  color: var(--ink);
  word-break: keep-all;
  flex: 1;
}
.faq-item__icon{
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  flex-shrink: 0;
}
.faq-item[open] .faq-item__icon{
  transform: rotate(180deg);
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.faq-item__a{
  padding: 2px 0 24px;
}
.faq-item__a p{
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-soft);
  word-break: keep-all;
  letter-spacing: -0.005em;
}
.faq-item__a strong{ color: var(--gold); font-weight: 500; }


/* =========================================================
   APPLY — closing dark
   ========================================================= */
.section--apply{
  background: var(--ink);
  color: #fff;
  padding-top: 96px;
  padding-bottom: 96px;
  position: relative;
  overflow: hidden;
}
.section--apply::before{
  content:"";
  position: absolute; inset: 0;
  background:
    url('../images/apply-bg.jpg') center / cover no-repeat;
  opacity: .18;
  pointer-events: none;
}
.section--apply::after{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 260px at 50% 100%, rgba(168,137,79,.22), transparent 60%);
  pointer-events: none;
}
.section--apply .container{ position: relative; z-index: 1; }
.apply-cta{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 40px 0 24px;
}
.apply-note{
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.5);
  text-align: center;
  word-break: keep-all;
  margin-top: 6px;
  letter-spacing: 0.005em;
}


/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: var(--ink);
  color: rgba(255,255,255,.5);
  padding: 40px 0 48px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.footer .container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer__logo{
  display: block;
  text-align: center;
  margin-bottom: 24px;
  opacity: .88;
}
.footer__logo img{
  height: 34px;
  width: auto;
  display: block;
  margin: 0 auto 14px;
}
.footer__logo-caption{
  display: block;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.5);
  padding-left: 0.16em;
  line-height: 1;
}
.footer__copy{
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,.4);
  letter-spacing: 0.02em;
}


/* =========================================================
   MODAL — Apply form
   ========================================================= */
.modal{
  position: fixed; inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal.is-open{ display: flex; }
.modal__backdrop{
  position: fixed; inset: 0;
  background: rgba(28,26,23,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modalFadeIn .35s var(--ease);
}
@keyframes modalFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes modalSlideUp{
  from{ opacity:0; transform: translateY(24px); }
  to  { opacity:1; transform: translateY(0); }
}

.modal__panel{
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--bg);
  padding: 40px 26px 32px;
  margin: 12px auto 40px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -20px rgba(28,26,23,.45);
  animation: modalSlideUp .5s var(--ease);
}
.modal__close{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .3s var(--ease);
}
.modal__close:hover{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.modal__header{
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.modal__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 14px;
}
.modal__eyebrow .eyebrow__num{
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.modal__title{
  font-family: var(--serif-ko);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.028em;
  line-height: 1.28;
  margin-bottom: 12px;
}
.modal__title em{
  font-style: normal;
  color: var(--gold);
}
.modal__desc{
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-mute);
  word-break: keep-all;
  letter-spacing: -0.005em;
}

/* ---------- Form ---------- */
.apply-form{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label{
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.form-label .req{
  color: var(--gold);
  margin-left: 4px;
  font-weight: 600;
}
.form-label .opt{
  color: var(--ink-faint);
  margin-left: 4px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
}
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea{
  width: 100%;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1px;
  padding: 13px 14px;
  outline: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  letter-spacing: -0.005em;
  -webkit-appearance: none;
  appearance: none;
}
.form-field textarea{
  resize: vertical;
  min-height: 76px;
  line-height: 1.6;
}
.form-field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A756E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color: var(--ink);
  background: #fff;
}
.form-field input::placeholder,
.form-field textarea::placeholder{
  color: var(--ink-faint);
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{
  border-color: #B45348;
  background: #FDF7F6;
}

/* Radio program selector */
.form-radio-group{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form-radio{
  position: relative;
  cursor: pointer;
}
.form-radio input{
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.form-radio__box{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  background: #fff;
  transition: all .3s var(--ease);
  min-height: 82px;
}
.form-radio__title{
  font-family: var(--serif-ko);
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.form-radio__desc{
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  word-break: keep-all;
  letter-spacing: -0.005em;
}
.form-radio input:checked + .form-radio__box{
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 0 6px 20px -10px rgba(28,26,23,.5);
}
.form-radio input:checked + .form-radio__box .form-radio__title{ color: #fff; }
.form-radio input:checked + .form-radio__box .form-radio__desc{ color: rgba(255,255,255,.6); }
.form-radio input:focus-visible + .form-radio__box{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Consent */
.form-consent{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  word-break: keep-all;
}
.form-consent input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 1px;
  transition: all .2s var(--ease);
}
.form-consent input[type="checkbox"]:checked{
  background: var(--ink);
  border-color: var(--ink);
}
.form-consent input[type="checkbox"]:checked::after{
  content:"";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.form-consent strong{
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 2px;
}

/* Actions */
.form-actions{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin-top: 4px;
}
.btn--outline{
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
.btn--outline:hover{
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn__loading{ display: inline; }
.btn.is-loading .btn__label{ display: none; }
.btn.is-loading .btn__loading{ display: inline; }
.btn:disabled{ opacity: .55; cursor: not-allowed; }

.form-error{
  padding: 12px 14px;
  background: #FDF7F6;
  border: 1px solid #E9CBC7;
  color: #B45348;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: -0.005em;
}

/* Success view */
.modal__success{
  text-align: center;
  padding: 32px 4px 8px;
}
.modal__success-icon{
  display: inline-flex;
  color: var(--gold);
  margin-bottom: 22px;
  animation: successPop .6s var(--ease);
}
@keyframes successPop{
  0%{ transform: scale(.6); opacity: 0; }
  60%{ transform: scale(1.08); opacity: 1; }
  100%{ transform: scale(1); }
}
.modal__success-title{
  font-family: var(--serif-ko);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.028em;
  margin-bottom: 14px;
}
.modal__success-desc{
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-mute);
  margin-bottom: 32px;
  word-break: keep-all;
  letter-spacing: -0.005em;
}

/* Body scroll lock when modal open */
body.modal-open{ overflow: hidden; }

@media (max-width: 400px){
  .form-radio-group{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .form-actions{ grid-template-columns: 1fr; }
  .modal__panel{ padding: 34px 20px 26px; }
  .modal__title{ font-size: 24px; }
}


/* =========================================================
   Reveal animation
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__scroll-line::after{ animation: none; }
  html{ scroll-behavior: auto; }
}


/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 640px){
  :root{
    --pad-x: 36px;
    --pad-y: 104px;
  }
  .hero__title{ font-size: 88px; }
  .hero__lead{ font-size: 21px; }
  .heading{ font-size: 38px; }
  .sample-card__body{ padding: 28px 28px 30px; }
  .program{ padding: 40px 30px 36px; }
}

@media (max-width: 360px){
  :root{ --pad-x: 20px; }
  .hero__title{ font-size: 52px; }
  .heading{ font-size: 26px; }
  .program__title{ font-size: 26px; }
}


/* =========================================================
   ADDITIONAL — 원데이 클래스 통합 버전
   ========================================================= */

/* Speaker placeholder portrait (no photo) */
.speaker--sub{
  margin-top: 40px;
}
.speaker--sub .speaker__portrait img{
  object-position: 55% 35%;
}

/* Program notice box (준비물 안내) */
.program-notice-box{
  margin-top: 32px;
  padding: 22px 24px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}
.program-notice-box__title{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.program-notice-box__list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.program-notice-box__list li{
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  padding-left: 16px;
  position: relative;
  margin-bottom: 4px;
  word-break: keep-all;
  letter-spacing: -0.005em;
}
.program-notice-box__list li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 600;
}
.program-notice-box__list li strong{
  color: var(--ink);
  font-weight: 600;
}