:root{
  --line:rgba(255,255,255,.09);
  --muted:#c3c6d8;
  --purple:#8a5cff;
  --pink:#ff4faf;
  --cyan:#49ddff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:#fff;
  background-color:#02040b;
  background-image:linear-gradient(180deg,rgba(2,4,11,.05),rgba(2,4,11,.86)),url("assets/bg.png");
  background-size:100% auto;
  background-repeat:repeat-y;
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",Arial,sans-serif;
  word-break:keep-all;
}
.nav{
  position:sticky;top:0;z-index:20;height:58px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6vw;background:rgba(2,4,11,.78);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand img{width:28px;height:28px;object-fit:contain;border-radius:8px}
.brand strong{font-size:16px;letter-spacing:-.02em}
.nav-anchors{display:flex;gap:18px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-size:14px}
.nav .nav-login{flex:none;color:#fff;font-weight:800;font-size:13.5px;padding:8px 16px;border-radius:999px;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 0 22px rgba(138,92,255,.30)}
.nav .nav-login:active{transform:scale(.96)}
.hero{
  min-height:82vh;display:grid;grid-template-columns:.92fr 1.08fr;
  align-items:center;gap:42px;padding:68px 7vw 70px;
}
.eyebrow{color:var(--cyan);font-size:12px;font-weight:900;letter-spacing:.16em;margin:0 0 12px}
h1,h2,p{margin-top:0}
h1{font-size:clamp(42px,5.1vw,78px);line-height:1.05;letter-spacing:-.065em;margin-bottom:20px}
h2{font-size:clamp(30px,3.5vw,52px);line-height:1.15;letter-spacing:-.055em;margin-bottom:24px}
h1 span,h2 span{background:linear-gradient(90deg,var(--purple),var(--pink),var(--cyan));-webkit-background-clip:text;color:transparent}
p{font-size:17px;line-height:1.7;color:var(--muted)}
.lead{font-size:20px;max-width:630px}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 21px;border-radius:999px;color:#fff;text-decoration:none;font-weight:900;font-size:15px;border:1px solid var(--line)}
.primary{background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 0 34px rgba(138,92,255,.34)}
.ghost{background:rgba(255,255,255,.055)}
.kakao{background:#FEE500;color:#3C1E1E;border-color:#FEE500}
.big{padding:16px 30px;font-size:18px}
.hero-img{border:1px solid var(--line);background:rgba(255,255,255,.025);box-shadow:0 22px 80px rgba(0,0,0,.35),0 0 45px rgba(138,92,255,.10);border-radius:28px;padding:7px;overflow:hidden}
.hero-img img{display:block;width:100%;height:auto;border-radius:21px}
#story{height:0}
.image-section{padding:38px 7vw}
.image-section img{display:block;width:100%;max-width:620px;height:auto;margin:0 auto;border-radius:18px;box-shadow:0 22px 80px rgba(0,0,0,.34),0 0 30px rgba(138,92,255,.07)}
.bridge-img{padding:26px 7vw}
.final{min-height:58vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:82px 7vw;text-align:center;border-top:1px solid var(--line);background:radial-gradient(circle at 50% 38%,rgba(138,92,255,.18),transparent 42%)}
.final-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.final-note{font-size:13.5px;color:var(--muted);margin-top:16px}
.final-note b{color:#fff}

/* 스토리 구간 */
.image-section.story{padding-top:24px;padding-bottom:24px}
.image-section.story img{max-width:min(70vw,742px);width:100%;height:auto}
/* 전환 카드는 크게 유지 */
.image-section.bridge-img{padding-top:32px;padding-bottom:32px}
.bridge-img img{max-width:1240px}
/* 전환 카드 아래(콘텐츠 허브란?~) = 적당히 축소 */
.bridge-img ~ .image-section{padding-top:26px;padding-bottom:26px}
.bridge-img ~ .image-section img{max-width:min(49vw,735px);width:100%;height:auto}

@media(max-width:900px){
  .nav-anchors{display:none}
  .nav{padding:0 5vw}
  .nav .nav-login{font-size:13px;padding:7px 14px}
  .hero{grid-template-columns:1fr;min-height:auto;padding:48px 20px 56px}
  .image-section{padding:26px 14px}
  .image-section img{border-radius:12px}
  h1{font-size:42px}
  h2{font-size:31px}
  .lead,p{font-size:16px}
  .image-section.story img{max-width:86vw}
  .bridge-img img{max-width:88vw}
  .bridge-img ~ .image-section img{max-width:88vw}
  .final-buttons{flex-direction:column;width:100%}
  .final-buttons .btn{width:100%}
}

/* ===== 타겟 선택 게이트 + 소개②(레벨 1 시스템 스토리) ===== */
.gate{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:30px 20px 70px;text-align:center}
.gate[hidden]{display:none}
.gate-inner{max-width:780px;width:100%}
.gate-hello{font-size:16px;color:#c9b6ff;font-weight:800;margin:0 0 10px;letter-spacing:.02em}
.gate-q{font-size:40px;line-height:1.24;font-weight:900;letter-spacing:-.045em;margin:0 0 14px;color:#fff}
.gate-q span{background:linear-gradient(120deg,#8b6dff,#c084fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gate-sub{font-size:15px;color:#9aa3b8;margin:0 0 46px}
.gate-btns{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.gate-btn{position:relative;width:300px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 22px 24px;border-radius:24px;cursor:pointer;font-family:inherit;color:#fff;background:linear-gradient(180deg,rgba(124,63,228,.18),rgba(124,63,228,.05));border:1.5px solid rgba(167,139,255,.36);box-shadow:0 20px 50px rgba(80,40,180,.26);transition:transform .18s,box-shadow .18s,border-color .18s}
.gate-btn:hover{transform:translateY(-7px) scale(1.02);border-color:rgba(167,139,255,.72);box-shadow:0 30px 66px rgba(124,63,228,.42)}
.gate-btn .gb-em{font-size:40px;line-height:1}
.gate-btn .gb-t{font-size:18px;font-weight:800;line-height:1.42}.gate-btn .gb-t b{color:#c9b6ff}
.gate-btn .gb-tag{font-size:11.5px;font-weight:700;color:#a99cd6;background:rgba(255,255,255,.06);border:1px solid rgba(167,139,255,.26);padding:5px 12px;border-radius:999px}
.gate-btn.danger{background:linear-gradient(180deg,rgba(239,68,68,.15),rgba(239,68,68,.04));border-color:rgba(248,113,113,.42);box-shadow:0 20px 50px rgba(180,40,40,.24)}
.gate-btn.danger:hover{border-color:rgba(248,113,113,.78);box-shadow:0 30px 66px rgba(239,68,68,.4)}
.gate-btn.danger .gb-t b{color:#ffb4b4}
.gate-btn.danger .gb-tag{color:#f0a5a5;border-color:rgba(248,113,113,.3)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.gate-btn.f1{animation:floaty 3.4s ease-in-out infinite}
.gate-btn.f2{animation:floaty 3.9s ease-in-out infinite .5s}
.gate-btn:hover{animation-play-state:paused}
.intro-back{display:inline-flex;align-items:center;gap:6px;margin:16px 0 0 24px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(167,139,255,.28);color:#c9b6ff;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer}
.intro-back:hover{background:rgba(167,139,255,.14)}
.intro-pane[hidden]{display:none}
.lv-sec{max-width:1220px;margin:0 auto 128px;padding:0 28px;text-align:center}
.lv-sec.compact{max-width:1100px}.lv-sec.wide{max-width:1340px}.lv-sec.narrow{max-width:760px}
.lv-eyebrow{display:inline-block;padding:9px 17px;border-radius:999px;background:rgba(124,63,228,.2);border:1px solid rgba(167,139,255,.4);color:#c9b6ff;font-weight:900;font-size:14px;letter-spacing:.02em;margin:0 0 16px}
.lv-h2{font-size:42px;line-height:1.18;letter-spacing:-.05em;margin:0 0 30px;font-weight:900;color:#fff}
.lv-h2 strong{color:#c084fc}
.lv-shot{width:100%;max-width:1060px;display:block;margin:0 auto;border-radius:22px;box-shadow:0 22px 60px rgba(0,0,0,.5);border:1px solid rgba(167,139,255,.16)}
.lv-sec.wide .lv-shot{max-width:1220px}.lv-sec.compact .lv-shot{max-width:980px}.lv-sec.narrow .lv-shot{max-width:560px}.lv-shot.tall{max-height:760px;object-fit:contain}
.lv-dark{max-width:1280px;padding:54px 38px;border-radius:36px;background:radial-gradient(120% 90% at 50% 0%,rgba(124,63,228,.22),transparent 60%),linear-gradient(180deg,#0e0b1e,#141027);border:1px solid rgba(167,139,255,.22)}
.lv-dark .lv-eyebrow{background:rgba(167,139,255,.18);color:#d6c4ff}
.lv-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.lv-reveal.is-visible{opacity:1;transform:none}
@media (max-width:900px){
  .gate{min-height:auto;padding:24px 16px 44px}.gate-q{font-size:28px}.gate-sub{margin-bottom:32px}
  .gate-btns{gap:14px}.gate-btn{width:100%;padding:24px 18px}.gate-btn .gb-em{font-size:34px}.gate-btn .gb-t{font-size:16px}
  .intro-back{margin-left:16px}
  .lv-sec{margin-bottom:78px;padding:0 16px}.lv-h2{font-size:27px;margin-bottom:20px}.lv-eyebrow{font-size:12.5px;padding:7px 13px}
  .lv-shot{border-radius:18px}.lv-dark{padding:36px 16px;border-radius:26px}
}

/* ===== 컨텐츠 허브란? — 전문성 가시화 셋팅 요약 (게이트 맨 아래) ===== */
.wv{margin-top:54px;padding-top:36px;border-top:1px solid rgba(167,139,255,.18);text-align:center}
.wv-eyebrow{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.12em;color:#c9b6ff;background:rgba(124,63,228,.16);border:1px solid rgba(167,139,255,.34);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.wv-h{font-size:26px;line-height:1.3;font-weight:900;letter-spacing:-.03em;color:#fff;margin:0 0 16px}
.wv-h span{background:linear-gradient(90deg,#a78bff,#e88fce);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wv-lead{font-size:16px;line-height:1.7;color:#e7e2f2;margin:0 auto 14px;max-width:620px}
.wv-lead b{color:#fff}
.wv-body{font-size:14.5px;line-height:1.7;color:#a9a3bd;margin:0 auto 22px;max-width:600px}
.wv-body b{color:#c9b6ff}
.wv-flow{display:flex;align-items:stretch;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 auto 22px;max-width:640px}
.wv-step{flex:1;min-width:96px;background:rgba(255,255,255,.04);border:1px solid rgba(167,139,255,.18);border-radius:14px;padding:13px 8px;display:flex;flex-direction:column;align-items:center;gap:3px}
.wv-step .wv-ic{font-size:22px;line-height:1}
.wv-step b{font-size:14px;color:#fff}
.wv-step small{font-size:11px;color:#a9a3bd;line-height:1.3}
.wv-ar{align-self:center;color:#6b6484;font-size:16px;font-weight:800}
.wv-foot{font-size:15px;line-height:1.75;color:#e7e2f2;margin:6px auto 0;max-width:620px}
.wv-foot b{background:linear-gradient(90deg,#ffd977,#ff9ecf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:900}
@media(max-width:900px){
  .wv{margin-top:38px;padding-top:28px}
  .wv-h{font-size:21px}
  .wv-lead{font-size:15px}
  .wv-ar{display:none}
  .wv-step{min-width:0;flex:1 1 40%}
}