/* 첫 화면 인터랙티브 모션 · 움직임 줄이기 설정이면 정지 화면 */

/* 스크롤 진행 막대 */
.mx-progress { position: fixed; top: 0; left: 0; height: 4px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sky-2), var(--gold)); z-index: 200; pointer-events: none; }

/* 히어로 · 빛 입자 캔버스 + 포인터 시차 */
.hero .mx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero::before { z-index: 0; }
.hero .wrap { z-index: 1; }
.hero { --px: 0; --py: 0; }
.hero.mx-on { background-position: calc(50% + var(--px) * -14px) calc(100% + var(--py) * -8px); }
.hero.mx-on .wrap > * { transform: translate(calc(var(--px) * 6px), calc(var(--py) * 4px)); transition: transform .25s ease-out; }
.hero h1 em { position: relative; display: inline-block; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .1em; border-radius: 9px; background: var(--gold); transform-origin: 0 50%; animation: mx-underline 1.1s .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mx-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 60초 구성 미리보기 */
.mx-studio { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .mx-studio { grid-template-columns: 1fr; } }
.mx-screen { position: relative; aspect-ratio: 9 / 16; max-height: 560px; width: 100%; margin: 0 auto; border-radius: 26px; overflow: hidden; background: var(--blue-deep); box-shadow: 0 18px 40px rgba(12, 42, 110, .28); border: 8px solid #0b1f4f; max-width: 330px; }
.mx-screen svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mx-scene { opacity: 0; transition: opacity .45s ease; }
.mx-scene.on { opacity: 1; }
.mx-cap { position: absolute; left: 14px; right: 14px; bottom: 54px; color: #fff; font-weight: 800; font-size: 19px; line-height: 1.35; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); word-break: keep-all; }
.mx-cap small { display: block; font-weight: 600; font-size: 13px; color: #d5e3ff; margin-top: 4px; }
.mx-tc { position: absolute; top: 12px; left: 12px; background: rgba(0, 0, 0, .45); color: #fff; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 999px; }
.mx-rec { position: absolute; top: 12px; right: 12px; display: inline-flex; gap: 6px; align-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.mx-rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; }
.mx-studio.playing .mx-rec::before { animation: mx-blink 1s steps(2) infinite; }
@keyframes mx-blink { 50% { opacity: .2; } }
.mx-mini { position: absolute; left: 12px; right: 12px; bottom: 16px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.mx-mini i { display: block; height: 100%; width: 0; background: var(--gold); }

.mx-panel { display: flex; flex-direction: column; gap: 14px; }
.mx-segs { display: grid; gap: 8px; }
.mx-seg { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.mx-seg:hover { border-color: var(--sky-2); }
.mx-seg:focus-visible { outline: none; box-shadow: var(--focus); }
.mx-seg .t { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--blue); font-size: 14px; white-space: nowrap; }
.mx-seg b { display: block; color: var(--blue-ink); }
.mx-seg span.d { display: block; color: var(--muted); font-size: 14px; }
.mx-seg .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--blue)); }
.mx-seg[aria-pressed="true"] { border-color: var(--blue); background: var(--sky-bg); transform: translateX(4px); }

.mx-bar { position: relative; height: 34px; border-radius: 10px; overflow: hidden; display: flex; background: #e6edf8; }
.mx-bar span { height: 100%; background: var(--c); opacity: .85; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; }
.mx-bar .head { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: var(--blue-ink); border-radius: 4px; left: 0; box-shadow: 0 0 0 2px #fff; }
.mx-ctrl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mx-ctrl input[type=range] { flex: 1 1 180px; accent-color: var(--blue); min-height: 44px; }
.mx-ctrl .btn { min-width: 120px; }

/* 시상 · 숫자 올라가기 + 기울기 */
.mx-count { font-variant-numeric: tabular-nums; }
.medal { transition: transform .25s ease-out, box-shadow .25s; transform-style: preserve-3d; will-change: transform; }
.medal .disc { transition: transform .25s ease-out; }
.medal.mx-tilt .disc { transform: translateZ(30px) scale(1.06); }
.medal.mx-tilt { box-shadow: 0 16px 34px rgba(12, 42, 110, .2); }

/* 참가 방법 · 순서대로 켜지기 */
.steps.mx-seq .step { opacity: .35; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.steps.mx-seq .step.lit { opacity: 1; transform: none; }
.steps.mx-seq .step.lit::before { animation: mx-pop .5s cubic-bezier(.3, 1.6, .5, 1); background: var(--red); }
@keyframes mx-pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }

/* 일정 · 지금 단계 표시 */
.flow .node.now { background: var(--blue); color: #fff; position: relative; animation: none; }
.flow .node.now::after { content: "지금"; position: absolute; top: -12px; right: -8px; background: var(--red); color: #fff; font-size: 12px; padding: 1px 8px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .mx-progress, .hero .mx-canvas { display: none; }
  .hero.mx-on .wrap > * { transform: none; transition: none; }
  .hero h1 em::after { animation: none; }
  .mx-scene, .mx-seg, .medal, .medal .disc { transition: none; }
  .steps.mx-seq .step { opacity: 1; transform: none; transition: none; }
  .steps.mx-seq .step.lit::before { animation: none; }
}
.mx-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(11, 31, 79, 0) 0%, rgba(11, 31, 79, .82) 70%); pointer-events: none; }
@media (max-width: 560px) { .mx-screen { max-width: 250px; border-width: 6px; } .mx-cap { font-size: 17px; } }