@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ── tokens ───────────────────────────────────────────────── */
:root{
  --bg:#0A0A0A; --bg2:#121212; --line:rgba(255,255,255,.10);
  --fg:#F5F5F5; --dim:#9A9A9A; --neon:#E3FF00;
  --wrap:1120px; --r:16px;
  --f: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo',
       'Malgun Gothic', system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--f);
  line-height:1.65; word-break:keep-all; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{line-height:1.25; letter-spacing:-.02em; margin:0; font-weight:800}
p{margin:0}

/* ── layout ───────────────────────────────────────────────── */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
section{padding-block:clamp(56px,9vw,104px)}
.sec-alt{background:var(--bg2)}
.eyebrow{color:var(--neon); font-size:.8rem; font-weight:800; letter-spacing:.18em; margin-bottom:12px}
.h2{font-size:clamp(1.6rem,4.4vw,2.5rem)}
.lead{color:var(--dim); font-size:clamp(.98rem,2vw,1.1rem); margin-top:16px}
.center{text-align:center}
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mt40{margin-top:40px} .mt24{margin-top:24px}

/* ── header ───────────────────────────────────────────────── */
.hdr{
  position:sticky; top:0; z-index:40; background:rgba(10,10,10,.74);
  backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line);
}
.hdr .wrap{display:flex; align-items:center; gap:16px; height:68px}
.brand{display:flex; align-items:center; gap:9px; flex:none}
.brand img{height:28px; width:auto}
.brand span{font-weight:900; font-size:1.14rem; letter-spacing:-.03em}

.nav{display:flex; align-items:center; gap:2px; margin-left:auto; font-size:.92rem; font-weight:600}
.nav a{
  position:relative; color:var(--dim); padding:9px 12px; border-radius:10px;
  transition:color .25s ease, background .25s ease;
}
.nav a::after{
  content:''; position:absolute; left:12px; right:12px; bottom:3px; height:2px;
  background:var(--neon); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.nav a:hover{color:var(--fg); background:rgba(255,255,255,.05)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--neon)}
.nav-cta{
  margin-left:8px; background:var(--neon); color:#0A0A0A !important;
  padding:10px 18px !important; border-radius:999px !important; font-weight:800;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .3s ease !important;
}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--neon); transform:translateY(-1px); box-shadow:0 10px 24px -10px rgba(227,255,0,.75)}

.nav-toggle{
  display:none; margin-left:auto; width:44px; height:44px; flex:none;
  align-items:center; justify-content:center; background:none; border:0;
  border-radius:12px; cursor:pointer; color:var(--fg); transition:background .2s;
}
.nav-toggle:hover{background:rgba(255,255,255,.06)}
.nav-toggle i{position:relative; display:block; width:20px; height:2px; background:currentColor;
  border-radius:2px; transition:background .2s}
.nav-toggle i::before,.nav-toggle i::after{
  content:''; position:absolute; left:0; width:20px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .35s cubic-bezier(.16,1,.3,1), top .3s cubic-bezier(.16,1,.3,1);
}
.nav-toggle i::before{top:-7px}
.nav-toggle i::after{top:7px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{top:0; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{top:0; transform:rotate(-45deg)}

@media(max-width:820px){
  /* JS 없을 때 기본값 — 줄바꿈 내비 (접근성 안전망) */
  .hdr .wrap{flex-wrap:wrap; height:auto; padding-block:11px; gap:8px 14px}
  .nav{margin-left:0; width:100%; flex-wrap:wrap; gap:6px 10px; font-size:.86rem}
  .nav-cta{margin-left:0}

  /* JS 있을 때 — 드로어 */
  .js-nav .hdr .wrap{flex-wrap:nowrap; height:64px; padding-block:0; gap:16px}
  .js-nav .nav-toggle{display:flex}
  /* .hdr 의 backdrop-filter 가 fixed 컨테이닝 블록을 만들므로
     뷰포트가 아니라 헤더 기준으로 위치를 잡는다 */
  .js-nav .nav{
    position:fixed; top:64px; left:0; right:0; bottom:auto;
    height:calc(100vh - 64px); height:calc(100dvh - 64px);
    z-index:45; width:auto; margin:0;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:2px;
    padding:20px 20px calc(100px + env(safe-area-inset-bottom));
    background:var(--bg);
    font-size:1.05rem; overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1), visibility .3s;
  }
  .js-nav .nav[data-open]{opacity:1; visibility:visible; transform:none}
  .js-nav .nav a{
    padding:17px 14px; border-radius:14px; color:var(--fg);
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .js-nav .nav[data-open] a{animation:navIn .5s cubic-bezier(.16,1,.3,1) both}
  .js-nav .nav[data-open] a:nth-child(1){animation-delay:.04s}
  .js-nav .nav[data-open] a:nth-child(2){animation-delay:.09s}
  .js-nav .nav[data-open] a:nth-child(3){animation-delay:.14s}
  .js-nav .nav[data-open] a:nth-child(4){animation-delay:.19s}
  .js-nav .nav[data-open] a:nth-child(5){animation-delay:.24s}
  .js-nav .nav[data-open] a:nth-child(6){animation-delay:.29s}
  .js-nav .nav[data-open] a:nth-child(7){animation-delay:.34s}
  .js-nav .nav a[aria-current]{color:var(--neon); background:rgba(227,255,0,.08)}
  .js-nav .nav-cta{margin:16px 0 0; text-align:center; border-bottom:0 !important}
  body[data-nav-open]{overflow:hidden}
}
@keyframes navIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 30px; border-radius:999px; font-weight:800; font-size:1.02rem;
  border:1px solid transparent; cursor:pointer;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease,
             background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{background:var(--neon); color:#0A0A0A; box-shadow:0 10px 30px -14px rgba(227,255,0,.6)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(227,255,0,.8)}
.btn-ghost{border-color:var(--line); color:var(--fg); background:rgba(255,255,255,.03)}
.btn-ghost:hover{transform:translateY(-2px); border-color:rgba(227,255,0,.55); color:var(--neon); background:rgba(227,255,0,.06)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible{outline:2px solid var(--neon); outline-offset:3px}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

/* ── hero ─────────────────────────────────────────────────── */
.hero{position:relative; min-height:min(92svh,820px); display:flex; align-items:flex-end; overflow:hidden}
.hero>img{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  object-fit:cover; object-position:50% 32%; opacity:.5;
}
/* 앰비언트 메시 그라디언트 */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(920px 560px at 84% 10%, rgba(227,255,0,.13), transparent 62%),
    radial-gradient(760px 520px at 6% 94%, rgba(227,255,0,.06), transparent 60%);
}
/* 좌측 스크림 — 카피 가독성 */
.hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,10,10,.93) 0%, rgba(10,10,10,.74) 36%, rgba(10,10,10,.16) 74%),
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, transparent 24%, rgba(10,10,10,.5) 70%, var(--bg) 100%);
}
.hero .wrap{position:relative; z-index:2; padding-block:clamp(56px,10vw,104px) clamp(78px,11vw,132px)}
.hero h1{
  font-size:clamp(2.2rem,6.8vw,4.05rem); font-weight:900;
  letter-spacing:-.035em; line-height:1.13; text-wrap:balance;
}
.hero h1 em{color:var(--neon); font-style:normal; text-shadow:0 0 38px rgba(227,255,0,.32)}
.hero .lead{font-size:clamp(1.02rem,2.1vw,1.18rem)}

.tagline{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(227,255,0,.10); border:1px solid rgba(227,255,0,.34); color:var(--neon);
  border-radius:999px; padding:7px 17px; font-size:.82rem; font-weight:700; margin-bottom:22px;
  backdrop-filter:blur(6px);
}
.tagline::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--neon); flex:none;
  box-shadow:0 0 0 0 rgba(227,255,0,.65); animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(227,255,0,0)}100%{box-shadow:0 0 0 0 rgba(227,255,0,0)}}

/* 진입 캐스케이드 */
@keyframes riseIn{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.hero .tagline{animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite, riseIn .7s cubic-bezier(.16,1,.3,1) .05s both}
.hero h1{animation:riseIn .8s cubic-bezier(.16,1,.3,1) .14s both}
.hero .lead{animation:riseIn .8s cubic-bezier(.16,1,.3,1) .26s both}
.hero .btn-row{animation:riseIn .8s cubic-bezier(.16,1,.3,1) .38s both}

/* ── trust bar ────────────────────────────────────────────── */
.trust{position:relative; z-index:3; margin-top:clamp(-58px,-6vw,-40px); background:none; border:0}
.trust .wrap{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; padding-block:0}
.trust div{
  text-align:center; padding:18px 10px; border-radius:16px;
  background:rgba(18,18,18,.74); border:1px solid var(--line); backdrop-filter:blur(14px);
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.trust div:hover{transform:translateY(-3px); border-color:rgba(227,255,0,.38)}
.trust b{
  display:block; font-size:clamp(1.35rem,3.8vw,1.95rem); color:var(--neon);
  font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.trust span{font-size:.78rem; color:var(--dim); font-weight:600}

/* ── cards ────────────────────────────────────────────────── */
.card{background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:var(--r); padding:26px}
.card h3{font-size:1.15rem; margin-bottom:8px}
.card p{color:var(--dim); font-size:.94rem}
.card-link{transition:border-color .15s}
.card-link:hover{border-color:rgba(227,255,0,.5)}
.num{
  width:38px; height:38px; border-radius:50%; background:rgba(227,255,0,.12); color:var(--neon);
  display:grid; place-items:center; font-weight:900; font-size:.9rem; margin-bottom:14px;
}
.pill{display:inline-block; background:rgba(227,255,0,.12); color:var(--neon);
  border-radius:999px; padding:4px 12px; font-size:.76rem; font-weight:700; margin:0 6px 6px 0}

/* ── coach ────────────────────────────────────────────────── */
.coach{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:24px; align-items:start}
.coach img{border-radius:var(--r); width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top}
.coach ul{margin:14px 0 0; padding-left:18px; color:var(--dim); font-size:.92rem}
.coach li{margin-bottom:5px}
.coach .role{color:var(--neon); font-size:.8rem; font-weight:800; letter-spacing:.12em}
@media(max-width:560px){ .coach{grid-template-columns:1fr} .coach img{aspect-ratio:4/3} }

/* ── table ────────────────────────────────────────────────── */
.tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r)}
table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px}
th,td{padding:13px 14px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap}
thead th{background:rgba(255,255,255,.05); font-size:.82rem; color:var(--dim); font-weight:700}
tbody tr:last-child td{border-bottom:0}
td.hi{color:var(--neon); font-weight:800}
th.row{text-align:left; font-weight:700; color:var(--fg)}
.note{color:var(--dim); font-size:.84rem; margin-top:14px}

/* ── faq ──────────────────────────────────────────────────── */
details{border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:10px;
  background:rgba(255,255,255,.02)}
details[open]{border-color:rgba(227,255,0,.35)}
summary{cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; color:var(--neon); font-weight:900; flex:none}
details[open] summary::after{content:'−'}
details p{color:var(--dim); font-size:.94rem; margin-top:12px}


/* ── cta band ─────────────────────────────────────────────── */
.band{background:var(--neon); color:#0A0A0A; text-align:center}
.band h2{font-size:clamp(1.4rem,4vw,2.1rem)}
.band p{color:rgba(10,10,10,.72); font-weight:600; margin-top:10px}
.band .btn-primary{background:#0A0A0A; color:var(--neon); margin-top:24px}

/* ── footer ───────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line); font-size:.86rem; color:var(--dim)}
.ftr .wrap{padding-block:44px; display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ftr h4{font-size:.8rem; letter-spacing:.14em; color:var(--fg); margin-bottom:12px}
.ftr a:hover{color:var(--neon)}
.ftr li{list-style:none; margin-bottom:7px}
.ftr ul{margin:0; padding:0}
.copy{border-top:1px solid var(--line); text-align:center; padding:20px; font-size:.78rem; color:#666}

/* ── mobile sticky CTA ────────────────────────────────────── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:8px; padding:10px 14px
  calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,10,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line);
}
.dock .btn{flex:1; padding:14px 10px; font-size:.95rem}
@media(max-width:820px){ .dock{display:flex} body{padding-bottom:78px} }

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ── 질감 · 접근성 ────────────────────────────────────────── */
body::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--neon); outline-offset:3px; border-radius:6px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}