/* ═══════════════════════════════════════════════════════
   MOON SPORTS — 일본 배구 유학 컨설팅
   Brand: navy #0B1A3C · gold #E8B75C · cream #F5DCB0
   ═══════════════════════════════════════════════════════ */

:root{
  --navy-900:#060E22;
  --navy-850:#08122B;
  --navy-800:#0B1A3C;
  --navy-700:#12244C;
  --navy-600:#1B3161;

  --gold:#E8B75C;
  --gold-lt:#F7E2B0;
  --gold-dk:#C4902F;
  --cream:#F5DCB0;

  --paper:#F4F1EA;
  --paper-2:#FBFAF7;

  --ink:#0B1A3C;
  --ink-soft:#4A5670;

  --snow:#F2F4F8;
  --snow-soft:#A8B4CC;
  --snow-dim:#6E7C99;

  --wrap:1180px;
  --r:18px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --fs-hero:clamp(2.1rem, 6.2vw, 4.4rem);
  --fs-h2:clamp(1.7rem, 3.9vw, 2.9rem);
  --fs-h3:clamp(1.06rem, 1.7vw, 1.28rem);
  --fs-body:clamp(.95rem, 1.15vw, 1.03rem);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--navy-900);
  color:var(--snow);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Malgun Gothic",sans-serif;
  font-size:var(--fs-body);
  line-height:1.72;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.28; letter-spacing:-.03em; font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

::selection{background:var(--gold); color:var(--navy-900)}

.wrap{width:min(100% - 2.6rem, var(--wrap)); margin-inline:auto}
.wrap--narrow{width:min(100% - 2.6rem, 780px)}
.section{padding:clamp(4.5rem,10vw,8.5rem) 0; position:relative}
.br-pc{display:none}
@media(min-width:760px){ .br-pc{display:inline} }

/* ── 로고 달 ─────────────────────────────────────────── */
.moon{width:100%; height:100%; display:block}
.moon--sm{width:22px; height:22px; flex:none}

/* ── 버튼 ────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.92rem 1.75rem; border-radius:999px;
  font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .35s;
}
.btn--sm{padding:.6rem 1.15rem; font-size:.86rem}
.btn--gold{background:var(--gold); color:var(--navy-900); box-shadow:0 8px 26px -12px rgba(232,183,92,.85)}
.btn--gold:hover{background:var(--gold-lt); transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(232,183,92,.95)}
.btn--ghost{border-color:rgba(242,244,248,.28); color:var(--snow)}
.btn--ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}

/* ═══ 네비게이션 ═══════════════════════════════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:1.4rem;
  padding:1.15rem clamp(1.3rem,4vw,2.6rem);
  transition:padding .4s var(--ease), background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding-block:.7rem;
  background:rgba(6,14,34,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:rgba(232,183,92,.16);
}
.nav__brand{display:flex; align-items:center; gap:.6rem; margin-right:auto}
.nav__wordmark{
  font-size:.95rem; font-weight:300; letter-spacing:.34em; text-transform:lowercase;
  color:var(--snow); padding-left:.1em;
}
.nav__links{display:none; gap:1.75rem}
.nav__links a{
  position:relative; font-size:.9rem; font-weight:500; color:var(--snow-soft);
  transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--gold); transition:width .35s var(--ease);
}
.nav__links a:hover{color:var(--snow)}
.nav__links a:hover::after{width:100%}
.nav__cta{display:none}
.nav__toggle{
  width:38px; height:38px; display:grid; place-content:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:0;
}
.nav__toggle span{display:block; width:20px; height:1.5px; background:var(--snow); transition:transform .35s var(--ease), opacity .25s}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

@media(min-width:940px){
  .nav__links{display:flex}
  .nav__cta{display:inline-flex}
  .nav__toggle{display:none}
}

/* 모바일 메뉴 */
.nav.is-open .nav__links{
  display:flex; flex-direction:column; gap:.2rem;
  position:absolute; top:100%; left:0; right:0;
  padding:1rem clamp(1.3rem,4vw,2.6rem) 1.6rem;
  background:rgba(6,14,34,.97); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(232,183,92,.18);
}
.nav.is-open .nav__links a{padding:.7rem 0; font-size:1rem; color:var(--snow)}

/* ═══ 히어로 ═══════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:8rem clamp(1.3rem,4vw,2.6rem) clamp(3rem,6vw,4.5rem);
  overflow:hidden;
}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:50% 62%;
  animation:kenburns 24s var(--ease) forwards;
}
@keyframes kenburns{ from{transform:scale(1.14)} to{transform:scale(1)} }

.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(232,183,92,.16), transparent 55%),
    linear-gradient(180deg, rgba(6,14,34,.86) 0%, rgba(6,14,34,.62) 34%, rgba(6,14,34,.9) 78%, var(--navy-900) 100%);
}
.hero__moon{
  position:absolute; z-index:2;
  width:clamp(140px,26vw,330px); aspect-ratio:1;
  right:clamp(-2rem,2vw,5%); top:clamp(4rem,12vh,9rem);
  filter:drop-shadow(0 0 42px rgba(232,183,92,.42));
  opacity:0; transform:translateY(38px) scale(.9);
  animation:moonrise 1.9s var(--ease) .25s forwards, glow 6.5s ease-in-out 2.2s infinite;
}
@keyframes moonrise{ to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes glow{
  0%,100%{filter:drop-shadow(0 0 34px rgba(232,183,92,.34))}
  50%{filter:drop-shadow(0 0 58px rgba(232,183,92,.6))}
}

.hero__inner{position:relative; z-index:3; max-width:900px}
.hero__eyebrow{
  font-size:.79rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem;
}
.hero__title{font-size:var(--fs-hero); font-weight:800; letter-spacing:-.045em; margin-bottom:1.6rem}
.hero__title span{display:block}
.hero__title em{
  font-style:normal; color:var(--gold);
  background:linear-gradient(100deg,var(--gold-lt),var(--gold) 48%,var(--gold-dk));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero__lede{
  font-size:clamp(1rem,1.55vw,1.16rem); color:var(--snow-soft);
  max-width:57ch; margin-bottom:2.5rem;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:.8rem}

.hero__scroll{
  position:relative; z-index:3; margin-top:clamp(2.4rem,6vw,4rem);
  display:flex; align-items:center; gap:.85rem;
  font-size:.7rem; letter-spacing:.3em; color:var(--snow-dim);
}
.hero__scrollline{width:54px; height:1px; background:rgba(242,244,248,.26); position:relative; overflow:hidden}
.hero__scrollline::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateX(-100%); animation:sweep 2.4s var(--ease) infinite;
}
@keyframes sweep{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* 히어로 등장 애니메이션 */
.anim{opacity:0; transform:translateY(22px); animation:riseIn .95s var(--ease) forwards; animation-delay:var(--d,0ms)}
@keyframes riseIn{ to{opacity:1; transform:none} }

/* ═══ 마퀴 ═════════════════════════════════════════════ */
.marquee{
  background:linear-gradient(90deg,var(--gold-dk),var(--gold) 30%,var(--gold-lt) 50%,var(--gold) 70%,var(--gold-dk));
  color:var(--navy-900); overflow:hidden; padding:.85rem 0;
}
.marquee__track{
  display:flex; align-items:center; gap:2.2rem; width:max-content;
  animation:slide 38s linear infinite;
}
.marquee__track span{font-size:.86rem; font-weight:600; letter-spacing:.06em; white-space:nowrap}
.marquee__track i{font-style:normal; font-size:.6rem; opacity:.55}
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══ 숫자 ═════════════════════════════════════════════ */
.stats{padding-block:clamp(3.4rem,7vw,5.4rem); background:var(--navy-850); border-bottom:1px solid rgba(232,183,92,.1)}
.stats__grid{display:grid; gap:2.2rem 1.6rem; grid-template-columns:1fr}
@media(min-width:620px){ .stats__grid{grid-template-columns:repeat(3,1fr)} }
.stat__num{
  display:flex; align-items:baseline; gap:.25rem;
  font-size:clamp(2.2rem,4.4vw,3.2rem); font-weight:800; letter-spacing:-.05em; color:var(--gold);
  line-height:1.1; margin-bottom:.6rem;
}
.stat__num em{font-style:normal; font-size:.36em; font-weight:600; color:var(--snow-soft); letter-spacing:-.01em}
.stat__label{font-size:.92rem; font-weight:600; color:var(--snow)}
.stat__label span{display:block; margin-top:.25rem; font-size:.82rem; font-weight:400; color:var(--snow-dim)}

/* ═══ 섹션 헤더 ════════════════════════════════════════ */
.shead{max-width:720px; margin-bottom:clamp(2.6rem,5vw,4rem)}
.shead__eyebrow{
  font-size:.75rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem;
}
.shead__title{font-size:var(--fs-h2); font-weight:800; margin-bottom:1.05rem}
.shead__lede{color:var(--snow-soft); font-size:clamp(.98rem,1.35vw,1.08rem)}
.shead__lede strong{color:var(--snow); font-weight:600}

/* ═══ WHY ══════════════════════════════════════════════ */
.section--why{background:var(--navy-900)}
.why__grid{display:grid; gap:1.1rem; grid-template-columns:1fr}
@media(min-width:720px){ .why__grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1060px){
  .why__grid{grid-template-columns:repeat(4,1fr)}
  .card--wide{grid-column:span 4}
  .card--wide p{max-width:70ch}
}
.card{
  position:relative; padding:2rem 1.7rem 1.9rem;
  border:1px solid rgba(242,244,248,.1); border-radius:var(--r);
  background:linear-gradient(160deg, rgba(27,49,97,.42), rgba(11,26,60,.24));
  overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}
.card::before{
  content:""; position:absolute; inset:auto auto 0 0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold),transparent);
  transition:width .6s var(--ease);
}
.card:hover{transform:translateY(-5px); border-color:rgba(232,183,92,.34)}
.card:hover::before{width:100%}
.card__no{
  display:block; font-size:.76rem; font-weight:700; letter-spacing:.2em;
  color:var(--gold); opacity:.8; margin-bottom:1.1rem;
}
.card h3{font-size:var(--fs-h3); margin-bottom:.75rem}
.card p{color:var(--snow-soft); font-size:.93rem}
.card em{font-style:normal; color:var(--gold-lt); font-weight:600}

/* ═══ PROGRAM (밝은 섹션) ═══════════════════════════════ */
.section--program{background:var(--paper); color:var(--ink)}
.section--program .shead__lede{color:var(--ink-soft)}
.section--program .shead__eyebrow{color:var(--gold-dk)}

.prog__grid{display:grid; gap:1.2rem; grid-template-columns:1fr}
@media(min-width:880px){ .prog__grid{grid-template-columns:repeat(3,1fr)} }
.prog{
  background:var(--paper-2); border:1px solid rgba(11,26,60,.09); border-radius:var(--r);
  padding:2.1rem 1.75rem;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.prog:hover{transform:translateY(-6px); box-shadow:0 26px 48px -30px rgba(11,26,60,.5); border-color:rgba(232,183,92,.5)}
.prog__icon{
  width:46px; height:46px; border-radius:13px; display:grid; place-content:center;
  background:var(--navy-800); color:var(--gold); margin-bottom:1.35rem;
}
.prog__icon svg{width:23px; height:23px}
.prog h3{font-size:var(--fs-h3); margin-bottom:.7rem}
.prog > p{color:var(--ink-soft); font-size:.93rem; margin-bottom:1.35rem}
.prog__list{display:grid; gap:.55rem; border-top:1px solid rgba(11,26,60,.1); padding-top:1.25rem}
.prog__list li{position:relative; padding-left:1.15rem; font-size:.885rem; color:var(--ink-soft)}
.prog__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%;
  background:var(--gold);
}
.prog__note{margin-top:2rem; font-size:.83rem; color:var(--ink-soft); opacity:.85}

/* ═══ PROCESS ══════════════════════════════════════════ */
.section--process{background:var(--navy-900)}
.steps{position:relative; display:grid; gap:.2rem; padding-left:1.6rem}
.steps::before{
  content:""; position:absolute; left:5px; top:.7rem; bottom:1.4rem; width:1px;
  background:linear-gradient(180deg,var(--gold),rgba(232,183,92,.12));
  transform-origin:top; transform:scaleY(var(--draw,0));
  transition:transform 1.4s var(--ease);
}
.step{position:relative; padding:1.35rem 0 1.6rem}
.step + .step{border-top:1px solid rgba(242,244,248,.08)}
.step__dot{
  position:absolute; left:calc(-1.6rem + 1px); top:1.85rem;
  width:11px; height:11px; border-radius:50%;
  background:var(--navy-900); border:2px solid var(--gold);
}
.step__no{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.2em;
  color:var(--gold); margin-bottom:.5rem;
}
.step h3{font-size:var(--fs-h3); margin-bottom:.5rem}
.step p{color:var(--snow-soft); font-size:.93rem; max-width:62ch}
@media(min-width:820px){
  .steps{grid-template-columns:repeat(2,1fr); gap:0 3.5rem; padding-left:1.8rem}
  .step + .step{border-top:0}
  .step{border-top:1px solid rgba(242,244,248,.08)}
  .step:nth-child(-n+2){border-top:0}
}

/* ═══ PROFILE (밝은 섹션) ═══════════════════════════════ */
.section--profile{background:var(--paper); color:var(--ink)}
.section--profile .shead__eyebrow{color:var(--gold-dk)}
.profile{display:grid; gap:clamp(2.4rem,5vw,4.5rem); align-items:start}
@media(min-width:900px){ .profile{grid-template-columns:.85fr 1.15fr} }

.profile__visual{position:relative; width:100%; max-width:360px; margin-inline:auto}
@media(min-width:900px){ .profile__visual{max-width:none; margin-inline:0} }
.profile__frame{
  position:relative; border-radius:calc(var(--r) + 6px); overflow:hidden;
  background:var(--navy-800); aspect-ratio:5/6;
}
.profile__frame img{width:100%; height:100%; object-fit:cover; object-position:50% 22%}
.profile__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,26,60,.28));
}
.profile__badge{
  position:absolute; left:-.55rem; bottom:1.6rem;
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1.1rem .6rem .9rem; border-radius:999px;
  background:var(--navy-800); color:var(--gold);
  font-size:.74rem; font-weight:700; letter-spacing:.2em;
  box-shadow:0 16px 34px -20px rgba(11,26,60,.9);
}

.profile__name{font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:800; margin:.55rem 0 .5rem}
.profile__name span{
  display:block; font-size:.42em; font-weight:500; letter-spacing:.16em;
  color:var(--ink-soft); margin-top:.5rem;
}
.profile__role{font-size:.95rem; font-weight:600; color:var(--gold-dk); margin-bottom:1.5rem}
.profile__intro{color:var(--ink-soft); margin-bottom:2.4rem; max-width:60ch}
.profile__intro strong{color:var(--ink); font-weight:700}

.career{display:grid; gap:0; border-top:1px solid rgba(11,26,60,.12)}
.career__item{
  display:grid; gap:.15rem 1.6rem; grid-template-columns:1fr;
  padding:1.15rem 0; border-bottom:1px solid rgba(11,26,60,.12);
  transition:padding-left .4s var(--ease);
}
.career__item:hover{padding-left:.5rem}
.career__year{
  font-size:.79rem; font-weight:700; letter-spacing:.06em; color:var(--gold-dk);
  font-variant-numeric:tabular-nums;
}
.career__item h3{font-size:1.03rem; margin-bottom:.1rem}
.career__item p{font-size:.885rem; color:var(--ink-soft)}
@media(min-width:620px){ .career__item{grid-template-columns:140px 1fr; align-items:baseline} }

/* ═══ CAMP GALLERY ═════════════════════════════════════ */
.section--camp{background:var(--navy-900); padding-bottom:clamp(3.5rem,8vw,6.5rem)}
.gallery{
  display:grid; gap:.85rem;
  grid-template-columns:repeat(2,1fr);
  width:min(100% - 2.6rem, 1120px); margin-inline:auto;
}
@media(min-width:760px){ .gallery{grid-template-columns:repeat(3,1fr); gap:1rem} }

.gallery__item{
  position:relative; margin:0; overflow:hidden; border-radius:14px;
  aspect-ratio:3/4; cursor:zoom-in; background:var(--navy-800);
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s;
  filter:saturate(.92) brightness(.94);
}
.gallery__item figcaption{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:1.6rem .95rem .85rem;
  font-size:.78rem; font-weight:600; color:var(--snow);
  background:linear-gradient(180deg,transparent,rgba(6,14,34,.88));
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .45s var(--ease);
}
.gallery__item:hover img{transform:scale(1.07); filter:saturate(1.05) brightness(1)}
.gallery__item:hover figcaption{opacity:1; transform:none}
@media(hover:none){ .gallery__item figcaption{opacity:1; transform:none} }

/* ═══ FAQ ══════════════════════════════════════════════ */
.section--faq{background:var(--navy-850); padding-top:0}
.section--faq .shead{margin-inline:auto; text-align:center; padding-top:clamp(4.5rem,10vw,8.5rem)}
.faq{display:grid; gap:.6rem}
.faq__item{
  border:1px solid rgba(242,244,248,.11); border-radius:14px;
  background:rgba(11,26,60,.4); overflow:hidden;
  transition:border-color .35s, background .35s;
}
.faq__item[open]{border-color:rgba(232,183,92,.35); background:rgba(18,36,76,.55)}
.faq__item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.15rem 3.2rem 1.15rem 1.4rem;
  font-size:.98rem; font-weight:600; color:var(--snow);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+"; position:absolute; right:1.3rem; top:50%; transform:translateY(-50%);
  font-size:1.3rem; font-weight:300; color:var(--gold); transition:transform .4s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq__item p{
  padding:0 1.4rem 1.35rem; color:var(--snow-soft); font-size:.92rem;
  animation:fadeDown .45s var(--ease);
}
.faq__item p strong{color:var(--gold-lt); font-weight:600}
@keyframes fadeDown{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* ═══ CONTACT ══════════════════════════════════════════ */
.section--contact{
  background:radial-gradient(120% 90% at 50% 0%, var(--navy-700), var(--navy-900) 62%);
  text-align:center; overflow:hidden;
}
.contact__moon{
  position:absolute; z-index:0; pointer-events:none;
  width:clamp(300px,52vw,620px); aspect-ratio:1;
  left:50%; top:-14%; transform:translateX(-50%);
  opacity:.09; filter:blur(1px);
  animation:float 14s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,-22px)} }
.contact{position:relative; z-index:1}
.contact .shead__eyebrow{margin-bottom:1.1rem}
.contact__title{font-size:var(--fs-h2); font-weight:800; margin-bottom:1.2rem}
.contact__lede{color:var(--snow-soft); margin-bottom:2.6rem}

.contact__mail{
  display:inline-flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center;
  padding:1.25rem 2rem; border-radius:999px;
  background:var(--gold); color:var(--navy-900);
  box-shadow:0 18px 48px -20px rgba(232,183,92,.75);
  transition:transform .4s var(--ease), box-shadow .4s, background .3s;
}
.contact__mail:hover{transform:translateY(-3px); background:var(--gold-lt); box-shadow:0 24px 56px -20px rgba(232,183,92,.9)}
.contact__maillabel{font-size:.8rem; font-weight:700; letter-spacing:.14em; opacity:.72}
.contact__mailaddr{font-size:clamp(.95rem,1.9vw,1.2rem); font-weight:700; letter-spacing:-.02em; word-break:break-all}
.contact__mailarrow{font-size:1.15rem; transition:transform .4s var(--ease)}
.contact__mail:hover .contact__mailarrow{transform:translateX(5px)}

.contact__hint{margin-top:1.1rem; font-size:.82rem; color:var(--snow-dim)}

.contact__links{
  display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2.4rem;
}
.contact__ig{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.35rem; border-radius:999px;
  border:1px solid rgba(242,244,248,.22); color:var(--snow-soft);
  font-size:.88rem; font-weight:500;
  transition:color .3s, border-color .3s, transform .35s var(--ease);
}
.contact__ig svg{width:18px; height:18px}
.contact__ig:hover{color:var(--gold); border-color:var(--gold); transform:translateY(-2px)}

/* ═══ FOOTER ═══════════════════════════════════════════ */
.footer{background:var(--navy-900); border-top:1px solid rgba(232,183,92,.14); padding:3.2rem 0 2.6rem}
.footer__inner{display:grid; gap:2rem}
@media(min-width:760px){ .footer__inner{grid-template-columns:1fr auto; align-items:end} }
.footer__brand{display:flex; align-items:center; gap:.8rem}
.footer__wordmark{font-size:1rem; font-weight:300; letter-spacing:.34em; text-transform:lowercase}
.footer__tagline{font-size:.8rem; color:var(--gold); margin-top:.25rem}
.footer__meta{font-size:.85rem; color:var(--snow-dim)}
@media(min-width:760px){ .footer__meta{text-align:right} }
.footer__meta p + p{margin-top:.35rem}
.footer__meta a{color:var(--snow-soft); transition:color .3s}
.footer__meta a:hover{color:var(--gold)}
.footer__meta span{margin:0 .45rem; opacity:.4}
.footer__copy{margin-top:.9rem !important; font-size:.78rem; opacity:.7}

/* ═══ 라이트박스 ═══════════════════════════════════════ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(4,9,21,.94); backdrop-filter:blur(8px);
  animation:lbIn .35s var(--ease);
}
.lightbox[hidden]{display:none}
@keyframes lbIn{ from{opacity:0} to{opacity:1} }
.lightbox__figure{margin:0; display:grid; place-items:center; gap:1rem; min-height:0; height:100%}
.lightbox__figure img{
  max-height:82vh; max-width:100%; width:auto; border-radius:12px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  animation:lbZoom .45s var(--ease);
}
@keyframes lbZoom{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none} }
.lightbox__figure figcaption{font-size:.86rem; color:var(--snow-soft); text-align:center}
.lightbox__close{
  position:absolute; top:1.1rem; right:1.2rem; z-index:2;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:rgba(242,244,248,.1); border:1px solid rgba(242,244,248,.2);
  color:var(--snow); font-size:1rem; transition:background .3s, transform .3s;
}
.lightbox__close:hover{background:rgba(242,244,248,.2); transform:rotate(90deg)}
.lightbox__nav{
  width:48px; height:48px; border-radius:50%; cursor:pointer; flex:none;
  background:rgba(242,244,248,.08); border:1px solid rgba(242,244,248,.18);
  color:var(--snow); font-size:1.7rem; line-height:1; padding:0 0 4px;
  transition:background .3s, border-color .3s;
}
.lightbox__nav:hover{background:var(--gold); border-color:var(--gold); color:var(--navy-900)}

/* ═══ 스크롤 등장 ══════════════════════════════════════ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.is-in{opacity:1; transform:none}

/* ═══ 모션 최소화 설정 존중 ═════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.anim{opacity:1 !important; transform:none !important}
  .hero__moon{opacity:1 !important; transform:none !important}
  .steps::before{transform:scaleY(1) !important}
}