/* =====================================================================
   launch.css — 디자인 E 2차 · 사이트 전체 '발사대' 장식 (launch.js 가 런타임에 붙임)
   - 모두 장식(aria-hidden) · 클릭 통과(pointer-events:none)
   - 레이아웃에 영향 없음: absolute / fixed 로만 얹는다 (흐름 속 요소를 추가하지 않음)
   - 움직임은 transform · opacity (· clip-path) 만. 줄인 동작이면 정지 화면
   - 픽셀 로켓 = main.js 궤도 로켓과 같은 5×8 칸 그림 (2px 칸, 잉크 + 움직일 때만 주황 불꽃)
   ===================================================================== */
:root{
  --lx-ink:var(--fg,#0E1210);
  --lx-ease-out:cubic-bezier(.23,1,.32,1);        /* 강한 ease-out (UI) */
  --lx-ease-io:cubic-bezier(.77,0,.175,1);        /* 강한 ease-in-out (화면 위 이동) */
  --lx-dots:repeating-linear-gradient(90deg,rgba(14,18,16,.46) 0 2px,transparent 2px 6px);   /* 디더 비행운: 2px 점 · 6px 간격 */
}

/* ---------- 공통: 픽셀 로켓 ---------- */
.lx-rk{position:absolute;left:0;top:0;display:block;pointer-events:none}
.lx-rk svg{display:block;width:100%;height:100%;overflow:visible}
.lx-rk .h{fill:var(--lx-ink)}
.lx-rk .w{fill:var(--card,#FAF9F5)}
.lx-rk .fl{fill:var(--fire,#FF5A1F)}
.lx-rk .fc{fill:var(--fire-core,#FFC23D)}
.lx-rk .flame{opacity:0;transform-box:fill-box}
.lx-rk.hz{width:24px;height:12px}                 /* 오른쪽을 보는 로켓 (꼬리 = 왼쪽 7px) */
.lx-rk.vt{width:12px;height:24px}                 /* 위를 보는 로켓 (밑동 = 위에서 17px) */
.lx-rk.hz .flame{transform-origin:100% 50%}
.lx-rk.vt .flame{transform-origin:50% 0}
.lx-rk.burn .flame{opacity:1}
.lx-rk.burn.hz .flame{animation:lx-flick-x .36s steps(2,jump-none) infinite}
.lx-rk.burn.vt .flame{animation:lx-flick-y .36s steps(2,jump-none) infinite}
@keyframes lx-flick-x{0%{transform:scaleX(1)}100%{transform:scaleX(.62)}}
@keyframes lx-flick-y{0%{transform:scaleY(1)}100%{transform:scaleY(.62)}}

/* ---------- 1. 전역 · 맨 위 스크롤 진행 = 가는 비행 궤적 + 끝의 픽셀 로켓 ---------- */
html.lx-on #progress{opacity:0}                   /* 원래 막대는 그대로 두고(main.js 가 계속 갱신) 보이지만 않게 */
.lx-prog{position:fixed;left:0;right:0;top:0;height:12px;z-index:200;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity .2s var(--lx-ease-out)}
.lx-prog.on{opacity:1}
body.lock .lx-prog{opacity:0}                     /* 모바일 메뉴가 열린 동안 */
.lx-prog .lx-clip{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.55) 55%,#000 92%);mask-image:linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.55) 55%,#000 92%)}
.lx-prog .lx-trail{position:absolute;left:0;top:5px;width:100%;height:2px;background:var(--lx-dots);will-change:transform}
.lx-prog .lx-rk{will-change:transform}

/* ---------- 2. 전역 · 푸터 발사대 (법적 고지 위 가는 선 = 지평선) ---------- */
.flegal .lx-pad{position:absolute;bottom:calc(100% + 1px);right:clamp(44px,9vw,140px);width:28px;height:32px;pointer-events:none}
.lx-pad .lx-tw{position:absolute;left:0;top:0;width:28px;height:32px;display:block;overflow:visible;opacity:.8}
.lx-pad .lx-tw .t{fill:var(--lx-ink)}
.lx-pad .lx-tw .s{fill:var(--lx-ink);opacity:.55}
.lx-pad .lx-tw .go{fill:var(--go,#22A05A)}
.lx-pad .lx-tw .arm{transform-box:view-box}
.lx-pad .lx-rk{left:15px;top:13px;transform-origin:6px 17px}   /* 회전축 = 로켓 밑동 가운데 */
.lx-pad .lx-ct{position:absolute;left:21px;top:29px;height:2px;width:240px;transform-origin:0 50%;transform:rotate(-45deg);
  background:var(--lx-dots);opacity:0;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
.lx-pad .lx-pf{position:absolute;width:2px;height:2px;background:rgba(14,18,16,.5);opacity:0}
.lx-pad.gone .lx-rk{opacity:0}
.lx-pad.gone .lx-tw .arm{opacity:0}
/* 홈: 로켓은 마지막 장면에서 이미 떠났음 — 빈 발사대 위로 45° 비행운의 끝자락만 남김 (정지 그림) */
.lx-pad.home .lx-ct{width:84px;opacity:.75;-webkit-clip-path:none;clip-path:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%)}

/* ---------- 3. 진행 절차 · 소요 기간 타임라인: 채워지는 선의 끝을 로켓이 탐 ---------- */
.timeline .lx-tl{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;
  transform:translateX(-100%);opacity:0}
.timeline .lx-tl .lx-rk{left:auto;right:-17px;top:-5px}       /* 꼬리(밑동)가 채움 끝에 오게 */
.in .timeline .lx-tl{transform:translateX(0);opacity:1;
  transition:transform 1.6s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .2s var(--lx-ease-out)}   /* 선 채움(style.css)과 같은 시간·곡선 */
.in .timeline .lx-tl .flame{animation:lx-flick-x .36s steps(2,jump-none) 4,lx-burn 1.6s linear forwards}
@keyframes lx-burn{0%,50%{opacity:1}64%,100%{opacity:0}}

/* ---------- 4. 맞는 서비스 찾기 · 질문 진행 막대 끝의 로켓 ---------- */
.qprog .bar.lx i{opacity:0}
.qprog .bar .lx-fill{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,rgba(28,112,63,.35),var(--accent,#1C703F) 90%);pointer-events:none}
.qprog .bar .lx-q{position:absolute;left:0;top:0;width:100%;height:100%;transform:translateX(-100%);pointer-events:none}
.qprog .bar .lx-q .lx-rk{left:auto;right:-17px;top:-5px}

/* ---------- 5. 서비스 전체 · 시작점 찾기: 다섯 출발점을 잇는 비행 궤적 (넓은 화면에서 한 줄일 때만) ---------- */
.lx-stage{position:absolute;height:12px;pointer-events:none;display:none}
@media(min-width:1101px){.lx-stage.ok{display:block}}
.lx-stage .pl{position:absolute;left:0;top:5px;height:2px;background:repeating-linear-gradient(90deg,rgba(14,18,16,.26) 0 2px,transparent 2px 6px)}   /* 계획 경로 */
.lx-stage .fw{position:absolute;left:0;top:5px;height:2px;background:repeating-linear-gradient(90deg,rgba(14,18,16,.72) 0 2px,transparent 2px 4px);
  -webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}   /* 날아온 경로 */
.lx-stage .nd{position:absolute;top:2px;width:8px;height:8px;margin-left:-4px;background:var(--card,#FAF9F5);box-shadow:inset 0 0 0 1.5px rgba(14,18,16,.46)}
.lx-stage .nd i{position:absolute;inset:0;background:var(--go,#22A05A);box-shadow:inset 0 0 0 1.5px var(--accent,#1C703F);opacity:0}
.lx-stage .lx-rk{top:0}

/* ---------- 줄인 동작 · 인쇄 · 고대비 ---------- */
@media(prefers-reduced-motion:reduce){
  .lx-prog{transition:none}
  .lx-rk.burn .flame{opacity:0;animation:none}
  .timeline .lx-tl,.in .timeline .lx-tl{transform:none;opacity:1;transition:none}
  .in .timeline .lx-tl .flame{animation:none;opacity:0}
}
@media print{.lx-prog,.lx-pad,.lx-stage,.lx-tl,.lx-q,.lx-fill{display:none!important}html.lx-on #progress{opacity:1}}
@media(forced-colors:active){.lx-prog,.lx-pad,.lx-stage,.lx-tl,.lx-q,.lx-fill{display:none!important}html.lx-on #progress{opacity:1}.qprog .bar.lx i{opacity:1}}