@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

:root{
  --jv2-bg:#050816;
  --jv2-text:#dce7f8;
  --jv2-muted:#8fa5c7;
  --jv2-line:rgba(255,255,255,.08);
  --jv2-blue:#4f8dff;
  --jv2-mint:#63dfc7;
  --jv2-gold:#efbd66;
  --jv2-silver:#dce5f0;
  --jv2-container:1280px;
  --jv2-ease:.55s cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}

.hp-journey-v2{
  position:relative;
  overflow:clip;
padding:150px 0 170px;
  background:
    radial-gradient(circle at 50% 0,rgba(79,141,255,.12),transparent 34%),
    linear-gradient(180deg,#050816 0%,#07101d 52%,#050816 100%);
  color:#fff;
  isolation:isolate;
}

.hp-journey-v2-container{
  position:relative;
  z-index:2;
  width:min(var(--jv2-container),92%);
  margin:0 auto;
}

.hp-journey-v2-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.hp-journey-v2-grid{
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:90px 90px;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}

.hp-journey-v2-glow{
  position:absolute;
  width:720px;
  height:720px;
  border-radius:50%;
  filter:blur(150px);
  opacity:.18;
  mix-blend-mode:screen;
}

.hp-journey-v2-glow-a{
  top:8%;
  right:-320px;
  background:var(--jv2-blue);
}

.hp-journey-v2-glow-b{
  left:-340px;
  bottom:4%;
  background:var(--jv2-gold);
}

.hp-journey-v2-head{
  max-width:1050px;
  margin-bottom:140px;
}

.hp-journey-v2-kicker{
  margin:0;
  color:#83c9ff;
  font-size:12px;
  font-weight:750;
  letter-spacing:.28em;
}

.hp-journey-v2-head h2{
  margin:24px 0 0;
  font-size:clamp(44px,5.3vw,79px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.06em;
}

.hp-journey-v2-head h2 span,
.hp-journey-v2-ending h3 span{
  background:linear-gradient(90deg,#fff,#d8ebff 48%,#6dbdff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hp-journey-v2-head>p:last-child{
  margin:30px 0 0;
  color:#afc0da;
  font-size:18px;
  line-height:1.9;
}

.hp-journey-v2-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:100px;
  align-items:start;
}

.hp-journey-v2-side{
  align-self:stretch;
}

.hp-journey-v2-side-inner{
  position:sticky;
  top:110px;
  padding-top:20px;
  z-index:5;
}

.hp-journey-v2-side-label{
  margin:0 0 34px;
  color:var(--jv2-muted);
  font-size:11px;
  font-weight:750;
  letter-spacing:.24em;
}

.hp-journey-v2-current{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.hp-current-number{
  font-size:84px;
  font-weight:800;
  line-height:.9;
  letter-spacing:-.06em;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.18));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hp-current-name{
  padding-bottom:8px;
  color:#8fcfff;
  font-size:14px;
  font-weight:750;
  letter-spacing:.26em;
}

.hp-journey-v2-progress{
  height:2px;
  margin:34px 0 30px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.hp-journey-v2-progress i{
  display:block;
  width:25%;
  height:100%;
  background:linear-gradient(90deg,var(--jv2-blue),#62dcff);
  box-shadow:0 0 18px rgba(98,220,255,.45);
  transition:width .55s ease;
}

.hp-journey-v2-side-copy{
  margin:0;
  color:#a9bbd4;
  font-size:15px;
  line-height:1.9;
}

.hp-journey-v2-steps{
  position:relative;
}

.hp-step{
  --accent:var(--jv2-blue);
  --soft:rgba(79,141,255,.14);
  position:relative;
  min-height:35vh;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:30px;
  align-items:center;
  opacity:1;
}

.hp-step-blue{--accent:var(--jv2-blue);--soft:rgba(79,141,255,.15)}
.hp-step-mint{--accent:var(--jv2-mint);--soft:rgba(99,223,199,.14)}
.hp-step-gold{--accent:var(--jv2-gold);--soft:rgba(239,189,102,.14)}
.hp-step-silver{--accent:var(--jv2-silver);--soft:rgba(220,229,240,.12)}

.hp-step.is-active{
  transform:translateY(-4px);
}

.hp-journey-v2-rail{
  position:relative;
  align-self:stretch;
  display:flex;
  justify-content:center;
}

.hp-journey-v2-rail::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.12) 18%,rgba(255,255,255,.12) 82%,transparent);
}

.hp-journey-v2-rail span{
  position:sticky;
  top:50vh;
  width:14px;
  height:14px;
  margin-top:calc(50vh - 7px);
  border:3px solid var(--jv2-bg);
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 8px var(--soft),0 0 28px var(--accent);
  transition:transform var(--jv2-ease),box-shadow var(--jv2-ease);
}

.hp-step.is-active .hp-journey-v2-rail span{
  transform:scale(1.2);
  box-shadow:0 0 0 12px var(--soft),0 0 42px var(--accent);
}

.hp-journey-v2-scene{
  position:relative;
  padding:44px 0 54px;
}

.hp-journey-v2-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:rgba(255,255,255,.34);
  font-size:11px;
  font-weight:750;
  letter-spacing:.21em;
}

.hp-journey-v2-meta span:last-child{
  color:var(--accent);
}

.hp-journey-v2-word{
  margin:68px 0 10px;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.32em;
}

.hp-journey-v2-scene h3{
  margin:0;
  font-size:clamp(54px,7vw,108px);
  font-weight:800;
  line-height:.93;
  letter-spacing:-.065em;
}

.hp-journey-v2-scene h3 span{
  color:#fff;
  text-shadow:0 0 40px var(--soft);
}

.hp-journey-v2-description{
  max-width:670px;
  margin:34px 0 0;
  color:#b7c7df;
  font-size:17px;
  line-height:1.95;
}

.hp-journey-v2-line{
  width:100%;
  height:1px;
  margin-top:58px;
  background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.08) 46%,transparent);
  transform:scaleX(.18);
  transform-origin:left;
  opacity:.35;
  transition:transform .8s ease,opacity .8s ease;
}

.hp-step.is-active .hp-journey-v2-line{
  transform:scaleX(1);
  opacity:1;
}

.hp-journey-v2-ending{
  margin-top:110px;
  padding:80px 0 10px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
}

.hp-journey-v2-ending p{
  margin:0 0 24px;
  color:#7fcaff;
  font-size:11px;
  font-weight:750;
  letter-spacing:.26em;
}

.hp-journey-v2-ending h3{
  margin:0;
  font-size:clamp(40px,5vw,72px);
  line-height:1.12;
  letter-spacing:-.055em;
}

.hp-journey-reveal{
  opacity:1;
  transform:none;
}

@media(max-width:900px){
  .hp-journey-v2{
    padding:110px 0 130px;
  }

  .hp-journey-v2-head{
    margin-bottom:95px;
  }

  .hp-journey-v2-layout{
    grid-template-columns:220px minmax(0,1fr);
    gap:50px;
  }

  .hp-journey-v2-rail span{
    display:none;
  }

  .hp-journey-v2-scene h3{
    font-size:clamp(48px,10vw,82px);
  }
}

@media(max-width:640px){
  .hp-journey-v2-layout{
    grid-template-columns:1fr;
  }

  .hp-journey-v2-side{
    display:none;
  }

  .hp-journey-v2{
    padding:90px 0 110px;
  }

  .hp-journey-v2-head{
    margin-bottom:75px;
  }

  .hp-journey-v2-head h2{
    font-size:38px;
  }

  .hp-journey-v2-head>p:last-child{
    font-size:16px;
  }

  .hp-step{
    min-height:auto;
    opacity:1;
    grid-template-columns:18px minmax(0,1fr);
    gap:16px;
    margin-bottom:46px;
  }

  .hp-journey-v2-scene{
    padding:30px 0 38px;
  }

  .hp-journey-v2-meta{
    font-size:9px;
  }

  .hp-journey-v2-word{
    margin-top:46px;
  }

  .hp-journey-v2-scene h3{
    font-size:48px;
  }

  .hp-journey-v2-description{
    font-size:15px;
  }

  .hp-journey-v2-ending{
    margin-top:70px;
    padding-top:55px;
  }

  .hp-journey-v2-ending h3{
    font-size:36px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
  .hp-journey-reveal{
    opacity:1;
    transform:none;
  }
  .hp-step{
    opacity:1;
  }
}



/* ==========================================================
   V02.3 — STICKY FINAL FIX
   overflow: clip은 별도 스크롤 컨테이너를 만들지 않으므로
   좌측 단계 패널의 position: sticky가 정상 동작합니다.
========================================================== */

.hp-journey-v2 {
  overflow: clip;
}

.hp-journey-v2-layout {
  align-items: stretch;
}

.hp-journey-v2-side {
  position: relative;
  align-self: stretch;
  min-height: 100%;
}

.hp-journey-v2-side-inner {
  position: sticky !important;
  top: 110px !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 20;
  transform: none !important;
}

.hp-journey-v2-side-inner.is-fixed,
.hp-journey-v2-side-inner.is-bottom {
  position: sticky !important;
  top: 110px !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  .hp-journey-v2 {
    overflow: clip;
  }

  .hp-journey-v2-side-inner,
  .hp-journey-v2-side-inner.is-fixed,
  .hp-journey-v2-side-inner.is-bottom {
    position: static !important;
    width: auto !important;
  }
}


/* ==========================================================
   JOURNEY V03 — CINEMATIC UPGRADE
========================================================== */

.hp-journey-v2{
  --journey-live:#4f8dff;
  --journey-live-soft:rgba(79,141,255,.16);
}

.hp-journey-v3-wash{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 72% 45%,
      var(--journey-live-soft),
      transparent 36%
    );
  opacity:.95;
}

.hp-journey-v3-beam{
  position:absolute;
  top:10%;
  right:14%;
  width:1px;
  height:72%;
  background:
    linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb,var(--journey-live) 78%,white) 30%,
      transparent 85%
    );
  box-shadow:
    0 0 38px var(--journey-live),
    0 0 90px var(--journey-live-soft);
  opacity:.3;
  transform:rotate(10deg);
}

.hp-journey-v2-current{
  position:relative;
  overflow:hidden;
  min-height:86px;
}

.hp-journey-v2-progress{
  position:relative;
  overflow:visible;
}

.hp-journey-v2-progress::after{
  content:"";
  position:absolute;
  top:50%;
  left:var(--journey-progress,25%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--journey-live);
  box-shadow:
    0 0 0 7px var(--journey-live-soft),
    0 0 26px var(--journey-live);
  transform:translate(-50%,-50%);
}

.hp-journey-v2-progress i{
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--journey-live) 78%,#4f8dff),
    var(--journey-live)
  );
  box-shadow:0 0 22px var(--journey-live-soft);
}

.hp-journey-v2-scene{
  isolation:isolate;
}

.hp-journey-v3-ghost{
  position:absolute;
  right:-2%;
  top:50%;
  z-index:-1;
  color:transparent;
  font-size:clamp(110px,16vw,250px);
  font-weight:900;
  line-height:.8;
  letter-spacing:-.08em;
  opacity:0;
  transform:translateY(-50%) translateX(45px);
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent) 18%,transparent);
  pointer-events:none;
}

.hp-step[data-name="START"] .hp-journey-v3-ghost::before{
  content:"START";
}

.hp-step[data-name="PROTECT"] .hp-journey-v3-ghost::before{
  content:"PROTECT";
}

.hp-step[data-name="GROW"] .hp-journey-v3-ghost::before{
  content:"GROW";
}

.hp-step[data-name="LEGACY"] .hp-journey-v3-ghost::before{
  content:"LEGACY";
}

.hp-step.is-active .hp-journey-v3-ghost{
  opacity:.78;
  transform:translateY(-50%) translateX(0);
}

.hp-journey-v2-word{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.hp-journey-v2-word::before{
  content:"";
  width:0;
  height:1px;
  background:var(--accent);
  box-shadow:0 0 18px var(--accent);
}

.hp-step.is-active .hp-journey-v2-word::before{
  width:52px;
}

.hp-step:not(.is-active) .hp-journey-v2-scene h3{
  transform:translateX(22px);
}

.hp-step.is-active .hp-journey-v2-scene h3{
  transform:translateX(0);
}

.hp-journey-v2-description{
  opacity:.55;
}

.hp-step.is-active .hp-journey-v2-description{
  opacity:1;
}

.hp-journey-v2-line{
  position:relative;
}

.hp-journey-v2-line::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 22px var(--accent);
  opacity:0;
  transform:translate(50%,-50%) scale(.4);
}

.hp-step.is-active .hp-journey-v2-line::after{
  opacity:1;
  transform:translate(50%,-50%) scale(1);
}

@media(max-width:900px){
  .hp-journey-v3-ghost{
    right:0;
    font-size:clamp(74px,18vw,140px);
    opacity:.2;
  }

  .hp-step.is-active .hp-journey-v3-ghost{
    opacity:.38;
  }
}

@media(max-width:640px){
  .hp-journey-v3-beam{
    display:none;
  }

  .hp-journey-v3-ghost{
    top:42%;
    font-size:72px;
  }

  .hp-step.is-active .hp-journey-v2-word::before{
    width:28px;
  }
}


/* LIFEHANPAN COMPACT SCALE OVERRIDE */
.hp-journey-intro{min-height:48vh;padding:81px 0 59px}
.hp-journey-heading h1{font-size:clamp(54px,6.8vw,96px)}
.hp-current-number{font-size:76px}
.hp-journey-step-content{padding:42px}
.hp-journey-step h2{font-size:clamp(40px,4.7vw,66px)}
.hp-journey-summary-card h2{font-size:clamp(42px,5vw,72px)}
.hp-journey-v2{padding:78px 0 88px}
.hp-journey-v2-head{margin-bottom:68px}
.hp-journey-v2-head h2{font-size:clamp(40px,4.7vw,70px)}
.hp-journey-v2-scene h3{font-size:clamp(48px,6vw,92px)}
.hp-journey-v2-ending h3{font-size:clamp(36px,4.4vw,62px)}
@media(max-width:640px){.hp-journey-heading h1,.hp-journey-v2-head h2{font-size:38px}.hp-journey-v2-scene h3{font-size:44px}}

/* LIFEHANPAN COMPACT SCALE OVERRIDE 2 (추가 축소) */
.hp-journey-intro{min-height:32vh;padding:60px 0 42px}
.hp-journey-heading h1{font-size:clamp(44px,5.6vw,76px)}
.hp-current-number{font-size:58px}
.hp-journey-step-content{padding:32px}
.hp-journey-step h2{font-size:clamp(34px,4vw,52px)}
.hp-journey-summary-card h2{font-size:clamp(36px,4.2vw,56px)}
.hp-journey-v2{padding:56px 0 64px}
.hp-journey-v2-head{margin-bottom:48px}
.hp-journey-v2-head h2{font-size:clamp(34px,4vw,54px)}
.hp-journey-v2-scene h3{font-size:clamp(38px,5vw,70px)}
.hp-journey-v2-ending h3{font-size:clamp(30px,3.6vw,48px)}
@media(max-width:640px){.hp-journey-heading h1,.hp-journey-v2-head h2{font-size:32px}.hp-journey-v2-scene h3{font-size:36px}}