/* 2026-11-05 메인 움직임 3종 (MoW 아카이브 참고) — ① 업종 띠 ② 서비스 15개 지도 ③ 진행 단계 스크롤
   글자는 모두 HTML에 그대로 두고, 움직임만 얹습니다. 움직임 줄이기 설정이면 전부 멈춥니다. */

/* ② 서비스 15개 지도 */
.fx-orbit-sec{background:#070F1C;color:#fff;padding:92px 5% 84px;overflow:hidden}
.fx-orbit-sec .sec-label{color:#6FA8FF}
.fx-orbit-sec h2.ttl{color:#fff}
.fx-orbit-sec h2.ttl .hl{color:#6FA8FF}
.fx-orbit-sec .sub-copy{color:rgba(255,255,255,.62)}
.fx-map{position:relative;max-width:1040px;height:480px;margin:0 auto}
.fx-core{position:absolute;left:50%;top:50%;width:250px;min-height:250px;margin:-125px 0 0 -125px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;z-index:3;
  background:radial-gradient(circle at 50% 40%,#1D3A66,#0D1C33 70%);border:1px solid rgba(111,168,255,.35);
  box-shadow:0 0 0 14px rgba(111,168,255,.05),0 0 0 30px rgba(111,168,255,.03),0 20px 60px rgba(0,0,0,.5)}
.fx-core-k{font-size:.68rem;font-weight:800;letter-spacing:.14em;color:#6FA8FF;margin-bottom:.45rem}
.fx-core-t{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.fx-core-t small{display:block;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:0;margin-top:.25rem}
.fx-core-d{font-size:.8rem;color:rgba(255,255,255,.66);line-height:1.6;margin-top:.5rem}
.fx-core-m{display:inline-block;margin-top:.6rem;font-size:.72rem;font-weight:700;color:#0B1A2E;background:#6FA8FF;border-radius:20px;padding:3px 10px}
.fx-core-m:empty{display:none}
.fx-core.swap>*{animation:fxSwap .35s ease}
@keyframes fxSwap{from{opacity:0;transform:translateY(6px)}}
.fx-items{list-style:none;margin:0;padding:0}
.fx-it{position:absolute;left:var(--x);top:var(--y);transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(var(--s,1));opacity:var(--o,1)}
.fx-it button{font:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:.9rem;font-weight:700;letter-spacing:-.02em;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:40px;padding:10px 16px;
  transition:filter .35s ease,opacity .35s ease,transform .35s ease,background .25s,border-color .25s}
.fx-it button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.fx-it[data-g="a"]{--c:#5B9BFF}.fx-it[data-g="b"]{--c:#FF8A4C}.fx-it[data-g="c"]{--c:#34D399}.fx-it[data-g="d"]{--c:#C4A1FF}
.fx-map.dim .fx-it button{filter:blur(3px);opacity:.28}
.fx-map.dim .fx-it.on button{filter:none;opacity:1;transform:scale(1.1);background:rgba(255,255,255,.14);border-color:var(--c)}
/* 흩어지기 전 상태 — JS가 가운데로 모았다가 풉니다 */
.fx-it.pre{transition:none!important}
.fx-it.go{transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .9s ease}
.fx-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:8px auto 0;font-size:.78rem;color:rgba(255,255,255,.6)}
.fx-legend span{display:flex;align-items:center;gap:6px}
.fx-legend i{width:8px;height:8px;border-radius:50%}
.fx-ex{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:26px auto 0}
.fx-ex b{font-size:.82rem;color:rgba(255,255,255,.7);font-weight:600;margin-right:4px}
.fx-ex button{font:inherit;cursor:pointer;font-size:.82rem;font-weight:700;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:30px;padding:7px 14px;transition:background .2s,border-color .2s}
.fx-ex button:hover,.fx-ex button.on{background:#1552C4;border-color:#1552C4}
.fx-note{text-align:center;font-size:.76rem;color:rgba(255,255,255,.45);margin-top:12px}
.fx-gl{display:none}
@media(max-width:900px){
  .fx-orbit-sec{padding:58px 4% 52px}
  .fx-orbit-sec .sec-inner{display:flex;flex-direction:column}
  .fx-orbit-sec .sub-copy{margin-bottom:1.1rem}
  .fx-legend{display:none}
  /* 업종 사례 버튼을 위로 — 모바일에서 가장 먼저 누르는 곳 */
  /* 옆으로 밀기 대신 3칸×2줄로 전부 보이게 (잘려 보이지 않게) */
  .fx-ex{order:3;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 14px}
  .fx-ex b{grid-column:1/-1;font-size:.78rem;margin:0 0 2px;text-align:center}
  .fx-ex button{font-size:.8rem;padding:9px 4px;border-radius:10px;white-space:nowrap;letter-spacing:-.03em}
  .fx-map{order:4;height:auto;display:block}
  .fx-note{order:5;margin-top:16px}
  /* 가운데 원 → 납작한 설명 카드 (높이 고정이라 내용이 바뀌어도 화면이 안 출렁임) */
  .fx-core{position:relative;left:auto;top:auto;margin:0 0 18px;width:auto;min-height:132px;border-radius:16px;padding:18px 18px 16px;
    align-items:flex-start;text-align:left;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .fx-core-k{margin-bottom:.3rem}
  .fx-core-t{font-size:1.05rem}
  .fx-core-t br,.fx-core-d br{display:none}
  .fx-core-d{font-size:.8rem;margin-top:.35rem}
  /* 네 묶음으로 */
  .fx-items{display:flex;flex-wrap:wrap;gap:7px}
  .fx-gl{display:flex;align-items:center;gap:7px;flex:0 0 100%;font-size:.74rem;font-weight:800;color:rgba(255,255,255,.6);margin:10px 0 1px}
  .fx-gl:first-child{margin-top:0}
  .fx-gl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
  .fx-gl[data-g="a"]{--c:#5B9BFF}.fx-gl[data-g="b"]{--c:#FF8A4C}.fx-gl[data-g="c"]{--c:#34D399}.fx-gl[data-g="d"]{--c:#C4A1FF}
  .fx-it{position:relative;left:auto;top:auto;transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--s,1))}
  .fx-it button{font-size:.82rem;padding:8px 13px}
  .fx-it button::before{display:none}
  .fx-map.dim .fx-it button{filter:none;opacity:.32}
  .fx-map.dim .fx-it.on button{transform:none;opacity:1;background:var(--c);border-color:var(--c);color:#0B1A2E}
}

/* ③ 진행 단계 — 왼쪽 사진 고정, 오른쪽 단계가 하나씩 켜짐 */
.pst{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;margin-top:2rem;align-items:start}
.pst-vis{position:sticky;top:110px}
.pst-frame{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--bg);box-shadow:0 24px 60px rgba(15,25,34,.14)}
.pst-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:0;transform:scale(1.06);transition:opacity .6s ease,transform 1.2s ease}
.pst-frame img.on{opacity:1;transform:scale(1)}
.pst-cap{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(15,25,34,.78);color:#fff;font-size:.8rem;font-weight:700;border-radius:8px;padding:6px 11px}
.pst-meter{display:flex;align-items:center;gap:14px;margin-top:16px}
.pst-num{font-size:.85rem;color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pst-num b{font-size:1.5rem;color:var(--blue);font-weight:800;margin-right:2px}
.pst-bar{flex:1;height:4px;border-radius:4px;background:var(--border,#E3E8EE);overflow:hidden}
.pst-bar i{display:block;height:100%;width:20%;background:var(--blue);border-radius:4px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.pst-steps{list-style:none;margin:0;padding:0;position:relative}
.pst-step{min-height:44vh;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 28px;position:relative;opacity:.28;transition:opacity .45s ease}
.pst-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--border,#E3E8EE)}
.pst-step::after{content:"";position:absolute;left:0;top:0;width:2px;height:0;background:var(--blue);transition:height .5s ease}
.pst-step.on{opacity:1}
.pst-step.on::after,.pst-step.done::after{height:100%}
.pst-step.done{opacity:.55}
.pst-step .proc-day-badge{align-self:flex-start;position:static;margin:0 0 .8rem;transform:none}
.pst-step h4{font-size:1.45rem;font-weight:800;letter-spacing:-.03em;margin:0 0 .5rem;color:var(--text)}
.pst-step p{font-size:1rem;color:var(--text2);line-height:1.75;margin:0;max-width:420px}
.pst-ph{display:none}
@media(max-width:900px){
  .pst{display:block;margin-top:1rem}
  .pst-vis{display:none}
  .pst-step{min-height:0;padding:0 0 30px 22px;opacity:.4}
  .pst-step h4{font-size:1.1rem}
  .pst-step p{font-size:.88rem}
  .pst-ph{display:block;margin-bottom:12px;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--bg)}
  .pst-ph img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
}

@media(prefers-reduced-motion:reduce){
  .fx-it,.fx-it button,.pst-frame img,.pst-step,.pst-step::after{transition:none!important}
  .pst-step{opacity:1}
}