/* 서비스 항로 — 컨셉 1 「고래의 항해」의 서비스 구간 (직접 설계)
   스크롤하면 빛의 곡선이 아래로 그려지고, 선이 닿는 정거장이 차례로 켜진다.
   색은 변수로 두어 나중에 팔레트(D1)를 바꾸면 한 번에 바뀐다. */
:root { --acc1: #1febd1; --acc2: #1fa3eb; }

#route { position: relative; background: #000; color: #fff; padding: 40px 0 0; overflow: hidden; }
/* 위(첫 화면의 검정 번짐)에서 이어지고, 은은한 별빛이 깔린 어둠 */
#route::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.4px 1.4px at 34% 46%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 88% 38%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 72%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 62% 66%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 92% 88%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 46% 92%, rgba(255,255,255,.5), transparent 60%); }
#route::after { display: none; }

.route-head { position: relative; z-index: 2; padding-bottom: 110px; text-align: center; }
.route-label { display: block; padding-bottom: 18px; font-family: var(--e-font); font-size: 15px; font-weight: 600; letter-spacing: .18em; color: var(--acc2); }
.route-head h2 { font-size: clamp(32px, 3.4vw, 56px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.route-head h2 em { font-style: normal; background: linear-gradient(90deg, var(--acc1), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.route-head p { padding-top: 22px; font-size: 18px; color: rgba(255,255,255,.62); }

.route-body { position: relative; z-index: 2; }
.route-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.route-line path { fill: none; stroke-linecap: round; }
.route-line .rl-base { stroke: rgba(255,255,255,.12); stroke-width: 2; stroke-dasharray: 2 10; }
.route-line .rl-glow { stroke: var(--acc2); stroke-width: 12; opacity: .16; }
.route-line .rl-draw { stroke: url(#routeGrad); stroke-width: 3; }

.route-stops { position: relative; }
.stop { position: relative; display: flex; align-items: center; min-height: 340px; }
.stop .dot { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: #000; transition: border-color .4s, background .4s, box-shadow .4s; z-index: 3; }
.stop.l .dot { left: 38%; }
.stop.r .dot { left: 62%; }
.stop.on .dot { border-color: transparent; background: linear-gradient(135deg, var(--acc1), var(--acc2)); box-shadow: 0 0 0 7px rgba(31,235,209,.14), 0 0 26px rgba(31,235,209,.55); }
.stop.on .dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--acc1); animation: stopPulse 2.4s ease-out infinite; }
@keyframes stopPulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

.stop-card { position: relative; width: 34%; padding: 40px 38px 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: border-color .5s, background .5s; }   /* 선이 닿기 전에는 보이지 않는다 */
/* 별빛: 정거장이 켜지는 순간 점에서 작은 빛이 사방으로 퍼진다 */
.spark { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px var(--acc1), 0 0 12px var(--acc2); pointer-events: none; }
.spark.big { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.flash { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid var(--acc1); pointer-events: none; }
.stop.l .stop-card { margin-right: auto; }
.stop.r .stop-card { margin-left: auto; }
.stop.on .stop-card { border-color: rgba(31,235,209,.35); background: rgba(255,255,255,.06); }
.stop-card .no { display: block; padding-bottom: 26px; font-family: var(--e-font); font-size: 15px; font-weight: 600; letter-spacing: .14em; color: var(--acc1); }
.stop-card h3 { padding-bottom: 14px; font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.stop-card p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.66); }
.stop-card .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 15px; font-weight: 600; color: #fff; }
.stop-card .go::after { content: "→"; transition: transform .3s; }
.stop-card .go:hover::after { transform: translateX(6px); }

@media (max-width: 900px) {
  #route { padding: 110px 0 100px; }
  .route-head { padding-bottom: 70px; }
  .stop { min-height: 0; padding: 26px 0 26px 56px; }
  .stop .dot, .stop.l .dot, .stop.r .dot { left: 20px; }
  .stop-card, .stop.l .stop-card, .stop.r .stop-card { width: 100%; margin: 0; padding: 30px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .stop-card { transition: none; opacity: 1; visibility: visible; transform: none; }
  .stop.on .dot::after { animation: none; }
}

/* 별 모양 불꽃: 네 갈래 별이 회전하며 퍼진다 */
.spark-star { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; pointer-events: none;
  background: linear-gradient(135deg, #fff, var(--acc1)); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* 서울 연결선: 항로의 끝 곡선이 이어져 지구본의 서울 점(구의 정중앙)까지 내려간다. 높이 52vh = 지구본 중심 높이 */
.seoul-line { position: absolute; left: 50%; top: 0; z-index: 2; width: 3px; height: 52vh; margin-left: -1.5px; border-radius: 2px; pointer-events: none;
  transform-origin: top; transform: scaleY(0); background: linear-gradient(to bottom, var(--acc2), var(--acc1)); box-shadow: 0 0 14px rgba(31,163,235,.5); }

/* 선언과 항로는 한 구간: 같은 어둠 위에서 문장이 끝나면 곧바로 선이 이어진다 */
#story { position: relative; background: #000; }

.seoul-line { transition: opacity .7s; }
.seoul-line.gone { opacity: 0; }

/* 첫 화면 효과 층: 영상 위에 얹혀 색감을 바꾸고, 별 먼지·별자리 선·별똥별이 떠다닌다 */
.hero-fx { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
.visual-media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(10, 30, 110, .6) 0%, rgba(31, 190, 220, .32) 100%); }
.visual-media::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,.55) 100%); }
.main-txt h1 .hw { position: relative; display: inline-block; }