/* =====================================================================
   C · DRIFT — measured values per reference (see ../00_레퍼런스분석.md)
   monopo.london  : #000 bg, Roobert 114px lh .934 → Inter Tight 500, line indents 16.51vw / 10.416vw,
                    container pad 3.87vw, foot 1.2s cubic-bezier(.165,.84,.44,1) .4s, sticky projects, title 44.6px upper
   skarlo.co      : header fixed 56px mix-blend-mode:difference, spring y-150→0 (delay 1.8s)
   gate108.cc     : Instrument Serif 90px lh50px ls-1px block titles, effectA offsetX -20 / 600ms
   dogstudio.co   : #131419, Heebo 200 84px lh60 rgba(187,194,229,.3), 1024 container (left 448),
                    400px section padding, 45° lines w/ red #e43333 line-anim, label 10px ls 3.6px upper
   studio10b.com  : drag hint 14px rgba(255,255,255,.7), cursor grab
   helloshivam    : one size only — 36.08px (1.879vw) lh 1.1, pad 2.067vw, #f2f2f2 on #000
   ===================================================================== */
:root {
  --bg: #000; --fg: #fff; --gray: #666970; --gray2: #7f7f7f;
  --dog: #131419; --dog-red: #e43333; --dog-sub: rgba(160, 168, 220, .7); --dog-dim: rgba(187, 194, 229, .3);
  --pad: 3.87vw;
  --ease-monopo: cubic-bezier(.165, .84, .44, 1);
  --sans: 'Inter Tight', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --heebo: 'Heebo', 'Pretendard Variable', Pretendard, sans-serif;
  --serif: 'Instrument Serif', 'Noto Serif KR', serif;
}
@font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-display: swap;
  src: url('./_shared/fonts/PretendardVariable.woff2') format('woff2-variations'); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 1s ease; }
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; }
::selection { background: #e64f0f; color: #fff; }

/* fixed monopo gradient (WebGL) */
.grad { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 1; }

/* ---------- skarlo header (difference blend, spring in) ---------- */
.c-Header { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad); mix-blend-mode: difference; color: #fff; transform: translateY(-150px); }
.is-ready .c-Header { transform: none; transition: transform 1.1s cubic-bezier(.22, 1.25, .36, 1) 1.8s; }
.c-Header .logo { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.c-Header .logo sup { font-size: .5em; font-weight: 500; }
.c-Header nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.c-Header nav a { position: relative; }
.c-Header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-monopo); }
.c-Header nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 01 monopo PixiIntro ---------- */
.c-PixiIntro { position: relative; height: 100vh; min-height: 560px; padding: 0 var(--pad); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.c-PixiIntro-title { font-weight: 500; font-size: clamp(44px, 5.94vw, 114px); line-height: .934; letter-spacing: -.035em; }
.c-PixiIntro-title .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.c-PixiIntro-title .ln > span, .c-PixiIntro-title .ln { will-change: transform; }
.c-PixiIntro-title .l2 { margin-left: 16.51vw; }
.c-PixiIntro-title .l3 { margin-left: 10.416vw; }
.c-PixiIntro-title .in { display: inline-block; transform: translateY(105%); }
.is-ready .c-PixiIntro-title .in { transform: none; transition: transform 1.4s var(--ease-monopo); }
.is-ready .c-PixiIntro-title .l2 .in { transition-delay: .1s; }
.is-ready .c-PixiIntro-title .l3 .in { transition-delay: .2s; }
/* monopo separates single letters (o, i) in <i> and animates them on their own */
.c-PixiIntro-title i { font-style: normal; display: inline-block; transform: translateY(-110%); opacity: 0; }
.is-ready .c-PixiIntro-title i { transform: none; opacity: 1; transition: transform 1.6s var(--ease-monopo) .7s, opacity .8s ease .7s; }
.is-ready .c-PixiIntro-title i + i { transition-delay: .82s; }
.c-PixiIntro-foot { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 20px; padding: 28px 0 34px;
  border-top: 1px solid rgba(255, 255, 255, .25); transform: translateY(100%); font-size: 14px; line-height: 1.45; }
.is-ready .c-PixiIntro-foot { transform: none; transition: transform 1.2s var(--ease-monopo) .4s; }
.foot-item strong { display: block; font-weight: 500; }
.foot-item span { color: rgba(255, 255, 255, .6); }
.foot-scroll { width: 1px; height: 46px; background: rgba(255, 255, 255, .25); position: relative; overflow: hidden; align-self: end; margin-right: 12px; }
.foot-scroll i { position: absolute; left: 0; top: 0; width: 1px; height: 50%; background: #fff; animation: drip 1.8s var(--ease-monopo) infinite; }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(200%); } }

/* ---------- 02 SLOGAN — 슬로건 글자 켜짐 → 블러되며 위로 퇴장 (slogan.js) ---------- */
.slogan { position: relative; height: 400vh; }   /* 고정 300vh: 글자 켜짐 → 퇴장 → 단어 짝 흐름, 다 빠져나가고 약 30vh 뒤 SCENES 카드 */
.sg-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sg-lbl { position: absolute; left: 50%; top: 18vh; transform: translateX(-50%); margin: 0; text-align: center; z-index: 3; }
.sg-title { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-weight: 200; }
.sg-half { position: absolute; will-change: transform, filter, opacity; left: 0; top: 0; font-family: var(--heebo); line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.sg-half span { opacity: .14; transition: opacity .5s ease; }
.sg-half span.on { opacity: 1; }
/* 단어 짝 — 가운데 줄에 가까울수록 --gap 이 벌어지고 밝아진다 (물결치듯 양옆으로 비켜남) */
.sg-mask { position: absolute; inset: 0; z-index: 1; }
.sg-pairs { position: absolute; left: 0; right: 0; top: 0; list-style: none; will-change: transform; }
.sg-pairs li { display: grid; grid-template-columns: 1fr var(--gap, 30px) 1fr; font-family: var(--sans); font-weight: 400; font-size: clamp(20px, 2.1vw, 40px); line-height: 1.55; letter-spacing: -.005em; color: rgba(255, 255, 255, var(--a, .22)); }
.sg-pairs li span:first-child { text-align: right; }
.sg-pairs li.foot { margin-top: .9em; font-weight: 800; font-size: clamp(11px, .7vw, 13px); letter-spacing: 3.6px; color: #aadfd9; }

/* ---------- dogstudio common ---------- */
.center { position: relative; width: min(1024px, calc(100% - 2 * var(--pad))); margin: 0 auto; }
.lbl { font-family: var(--sans); font-weight: 800; font-size: 10px; letter-spacing: 3.6px; text-transform: uppercase; color: var(--dog-sub); margin-bottom: 48px; max-width: 448px; line-height: 2; }
.line { position: absolute; width: 192px; height: 192px; border: 1px solid rgba(187, 194, 229, .12); transform: rotate(45deg); pointer-events: none; }
.line.rot45 { right: 12%; top: 120px; }
.line.rot45.b { left: 8%; right: auto; top: auto; bottom: 140px; width: 114px; height: 114px; }
.line-anim { position: absolute; left: -1px; top: -1px; height: 1px; width: 0; background: var(--dog-red); }

/* 02b greymac showreel — .film is 300vh: 0→~100vh the card grows from the bottom, then the member panel rises over it */
.film { position: relative; height: 300vh; margin-top: -40vh; background: linear-gradient(180deg, rgba(5, 6, 8, 0) 0, #050608 70vh); }   /* 카드 뒤로 HERO 그라데이션이 비치지 않게 */
.film-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: flex-end; justify-content: center; }
.reel-card { position: relative; width: 100%; height: 100vh; overflow: hidden; transform-origin: 50% 100%; will-change: transform; isolation: isolate;
  border-radius: 50px 50px 0 0; background: #050608; transform: translateY(8vh) scale(.4); }
/* SPACE 패널이 덮을 때 어둡게 — filter: brightness() 를 둥근 카드에 켰다 껐다 하면 크롬이 모서리 잘라내기를 놓쳐 네모난 잔상이 남아서 덮개 층으로 바꿈 */
.reel-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.reel-media { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.reel-media video { width: 100%; height: 100%; object-fit: cover; opacity: .999; }
/* opacity .999 = 크롬이 이 영상을 '하드웨어 영상 오버레이'로 빼지 못하게. 오버레이로 빠지면 카드의 둥근 잘라내기 · 크기 변화를 무시하고
   스크롤할 때 영상 자리만 네모난 검은 상자로 늦게 따라와 잔상처럼 남는다 (자동화 크롬에선 재현 안 되고 사용자 크롬에서만 보임) */
.reel-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 6, 8, .15) 0%, rgba(5, 6, 8, 0) 40%, rgba(5, 6, 8, .65) 100%); }
.reel-ui { position: absolute; left: var(--pad); right: var(--pad); bottom: 12vh; opacity: 0; transform: translateY(30px); }
.reel-ui .lbl { margin-bottom: 28px; color: rgba(255, 255, 255, .75); }
.reel-ui .film-copy { margin-top: 36px; color: rgba(255, 255, 255, .75); }
.reel-link { display: inline-block; font-family: var(--heebo); font-weight: 200; font-size: clamp(54px, 6.25vw, 120px); line-height: .9; letter-spacing: -.02em; position: relative; z-index: 2; }
.reel-link .play { display: inline-grid; place-items: center; width: .62em; height: .62em; margin-left: .25em; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; font-size: .22em; vertical-align: middle; transition: background .4s, color .4s; }
.reel-link:hover .play { background: #fff; color: #000; }
.film-copy { margin-top: 64px; max-width: 448px; font-family: var(--heebo); font-weight: 300; font-size: 22px; line-height: 1.6; color: var(--dog-sub); word-break: keep-all; }
.showreel { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; visibility: hidden; }
.showreel-backdrop { position: absolute; inset: 0; background: rgba(19, 20, 25, .8); opacity: 0; transition: opacity .6s ease; }
.showreel-wrapper { position: relative; width: min(1280px, 86vw); aspect-ratio: 16 / 9; transform: translateY(50px); opacity: 0; transition: transform .8s var(--ease-monopo), opacity .6s ease; }
.showreel-wrapper video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.showreel-close { position: absolute; right: 0; top: -40px; background: none; border: 0; color: #fff; font: 800 10px var(--sans); letter-spacing: 3.6px; text-transform: uppercase; cursor: pointer; }
.showreel.is-open { visibility: visible; }
.showreel.is-open .showreel-backdrop { opacity: 1; }
.showreel.is-open .showreel-wrapper { transform: none; opacity: 1; transition-delay: .15s; }

/* ---------- 04 SPACE — LIMEN_WEB ver1·ver2 blueprint → model → hover (space.js) ----------
   도면 선은 흰색 계열, 장비 · 강조는 VISIT 와 같은 민트 #6ff0d8. 단계 번호는 monopo proj-count 크기 그대로. */
.space { --mint: #6ff0d8; --line: rgba(255, 255, 255, .1); position: relative; height: 960vh; background: #000; }
/* greymac Panel — 둥근 위 모서리 div 가 고정된 쇼릴 위로 올라온다 (margin-top -100vh = 쇼릴의 마지막 100vh).
   overflow: clip 이어야 안쪽 sticky 가 살아 있다 (hidden 이면 sticky 가 깨짐) */
.space { z-index: 3; margin-top: -100vh; border-radius: 50px 50px 0 0; overflow: clip; }

/* ---------- 04 TEAM — LIMEN 팀 소개 (<limen-team>, 스타일은 shadow DOM 안) ---------- */
limen-team { display: block; position: relative; background: #000; }

/* ---------- 05 VISIT · 06 FOOTER — GPT drift_round_01 (visit-plan.css · footer-film.css) ---------- */
/* space-plan.css 에 있던 공용 라벨 — VISIT 만 가져왔으므로 여기 둔다 */
.space-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .23em; color: #91a9bd; margin-bottom: 20px; }

.space-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: radial-gradient(ellipse at 38% 58%, #11141b 0%, #050608 62%, #000 100%); }
.space-sticky::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--paper, 0) * .55);
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 24px 24px; }
.sp-draw { position: absolute; left: 0; top: 0; bottom: 0; right: 26%; overflow: hidden; }
#spCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
/* 모델이 보이면 드래그로 회전 · 장비 위에선 클릭 손가락. 세로 터치 스크롤은 그대로 */
.sp-draw.is-model { cursor: grab; touch-action: pan-y; }
.sp-draw.is-model.is-pick { cursor: pointer; }
.sp-draw.is-dragging { cursor: grabbing; }
#spVideo { display: none; }   /* 텍스처 원본 — 전역 video{display:block} 이 hidden 을 덮어써서 직접 숨김 */
#spSvg, .sp-tag-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* 관객 실루엣 (space.js) — 밝은 단색, 05 관객 차례엔 실루엣이 옅어지고 키넥트 관절 · 뼈대가 민트로 */
.sp-people { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.sp-people path.body { fill: rgba(214, 221, 232, .9); transition: fill .5s; }
.sp-people ellipse { fill: rgba(255, 255, 255, .1); transition: fill .5s; }
.sp-people .skel > * { opacity: 0; transition: opacity .15s ease; }
.sp-people.on .skel > * { opacity: 1; transition: opacity .3s ease var(--d, 0s); }   /* 발끝부터 머리까지 1초에 걸쳐 차르륵 */
.sp-people .skel line { stroke: var(--mint); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sp-people .skel circle { fill: #07080b; stroke: var(--mint); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sp-people.on path.body { fill: rgba(214, 221, 232, .16); }
.sp-people.on ellipse { fill: rgba(111, 240, 216, .25); }

#spSvg path { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
#spSvg path.k-grid { stroke: rgba(255, 255, 255, .12); stroke-width: .7; }
#spSvg path.k-gridMajor { stroke: rgba(255, 255, 255, .26); stroke-width: .8; }
#spSvg path.k-construct { stroke: rgba(111, 240, 216, .42); stroke-width: .7; }
#spSvg path.k-center { stroke: rgba(228, 51, 51, .55); stroke-width: .7; stroke-dasharray: none; }
#spSvg path.k-struct { stroke: #fff; stroke-width: 1.3; }
#spSvg path.k-wire { stroke: rgba(255, 255, 255, .34); stroke-width: .7; }
#spSvg path.k-device { stroke: var(--mint); stroke-width: 1.05; }
#spSvg path.k-dim { stroke: rgba(255, 255, 255, .62); stroke-width: .8; }
#spSvg text { fill: rgba(255, 255, 255, .78); font: 500 10px var(--sans); letter-spacing: .08em; opacity: 0; transition: opacity .5s; }
#spSvg text.on { opacity: .9; }
#spSvg g.mark { opacity: 0; transition: opacity .4s; }
#spSvg g.mark.on { opacity: 1; }
#spSvg g.mark circle { fill: #000; stroke: var(--mint); stroke-width: 1; }
#spSvg g.mark text { opacity: 1; font-weight: 800; text-anchor: middle; dominant-baseline: central; fill: var(--mint); }
.sp-tag-svg circle { fill: var(--mint); }
.sp-tag-svg circle.ring { fill: none; stroke: var(--mint); stroke-width: 1; opacity: .6; }
.sp-tag-svg line { stroke: var(--mint); stroke-width: 1; }
/* 06 데이터 흐름 — 포물선 점선(흐르는 dash) + 화살촉 + 지나가는 점 */
.sp-tag-svg path.flow { fill: none; stroke: var(--mint); stroke-width: 1.4; stroke-dasharray: 5 7; stroke-linecap: round; }
.sp-tag-svg path.cable { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1; stroke-dasharray: 2 5; }
.sp-tag-svg path.head { fill: var(--mint); stroke: none; }
.sp-tag-svg circle.pkt { fill: #fff; }
/* 01 프로젝터 신호 · 03 스피커 소리 파장 — 퍼지며 옅어지는 원 */
.sp-tag-svg circle.wave { fill: none; stroke: var(--mint); stroke-width: 1.2; }
.sp-tag-svg path.beam { stroke-width: 1.8; stroke-dasharray: 3 6; }
.sp-tag-svg text { fill: var(--mint); font: 800 9px var(--sans); letter-spacing: 2px; text-transform: uppercase; }
/* 포커스 설명 칩 — monopo proj-tags 의 둥근 테두리, 스크롤 순서대로 장비에 붙는다 */
.sp-chip { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 4px; align-items: start; padding: 12px 20px 14px 12px; transition: left .5s var(--ease-monopo), top .5s var(--ease-monopo), opacity .3s;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 22px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none; white-space: nowrap; opacity: 0; }
.sp-chip.on { opacity: 1; }
.sp-chip .c-n { grid-row: span 3; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--mint); color: #000; display: grid; place-items: center; font: 800 10px var(--sans); }
.sp-chip .c-t { font-size: 17px; font-weight: 500; overflow: hidden; line-height: 26px; }
.sp-chip .c-t b { display: inline-block; font-weight: 500; }
.sp-chip .c-d { grid-column: 2; font-family: var(--heebo); font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .7); }
.sp-chip .c-d i { display: block; font-style: normal; }
/* 02 프로젝터: P1~P4 를 한 대씩 — 점 4개 + 지금 이름 */
.sp-chip .c-s { grid-column: 2; display: none; align-items: center; gap: 10px; margin: 2px 0 4px; font: 800 10px var(--sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--mint); }
.sp-chip .c-s.on { display: flex; }
.sp-chip .c-s u { display: inline-flex; gap: 4px; text-decoration: none; }
.sp-chip .c-s u i { width: 14px; height: 2px; background: rgba(255, 255, 255, .25); transition: background .3s; }
.sp-chip .c-s u i.on { background: var(--mint); }
.sp-head { position: absolute; left: var(--pad); top: 96px; pointer-events: none; transition: opacity .6s; }
.is-focus .sp-head { opacity: .25; }
.sp-head .lbl { margin-bottom: 18px; }
.sp-h { font-family: var(--heebo); font-weight: 200; font-size: clamp(34px, 3.1vw, 60px); line-height: 1.12; letter-spacing: -.02em; word-break: keep-all; }
.sp-phase { position: absolute; left: var(--pad); bottom: 7vh; pointer-events: none; max-width: 420px; transition: opacity .6s; }
.is-focus .sp-phase { opacity: .3; }
.sp-count { font-size: 14px; color: var(--gray2); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; }
.sp-count .mask { display: inline-block; overflow: hidden; margin-right: 6px; }
.sp-count b { display: inline-block; color: #fff; font-weight: 800; font-size: clamp(40px, 4vw, 76px); letter-spacing: -.04em; line-height: 1; }
.sp-name { margin-top: 10px; font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 300; font-size: clamp(26px, 2vw, 36px); line-height: 1; letter-spacing: -.01em; }
.sp-side { position: absolute; top: 0; bottom: 0; right: 0; width: 26%; border-left: 1px solid var(--line); padding: 96px 36px 48px; display: flex; flex-direction: column; background: rgba(0, 0, 0, .35); }
.sp-meta strong { display: block; font-size: 14px; font-weight: 500; }
.sp-meta span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .55); line-height: 1.6; }
.sp-list { list-style: none; margin-top: 36px; display: flex; flex-direction: column; opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .7s var(--ease-monopo); }
.sp-list.on { opacity: 1; transform: none; }
.sp-list li { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; opacity: .42; transition: opacity .35s; }
.sp-list li .no { grid-row: span 2; width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; display: grid; place-items: center; font: 800 10px var(--sans); transition: background .3s, color .3s, border-color .3s; }
.sp-list li .tt { font-size: 16px; font-weight: 500; line-height: 26px; overflow: hidden; white-space: nowrap; }
.sp-list li .tt span { display: inline-block; }
.sp-list li .ds { font-family: var(--heebo); font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .62); max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.sp-list li .ds i { display: block; font-style: normal; }
.sp-list li.on { opacity: 1; }
.sp-list li.on .no { background: var(--mint); border-color: var(--mint); color: #000; }
.sp-list li.on .ds { max-height: 120px; }
.sp-hint { margin-top: auto; font: 800 10px var(--sans); letter-spacing: 3.6px; text-transform: uppercase; color: var(--dog-sub); opacity: 0; transition: opacity .6s; }
.is-focus .sp-hint { opacity: 1; }
.sp-progress { position: absolute; left: var(--pad); right: calc(26% + var(--pad)); bottom: 3vh; height: 1px; background: rgba(255, 255, 255, .15); }
.sp-progress i { position: absolute; inset: 0; background: var(--mint); transform-origin: left; transform: scaleX(0); }

@media (max-width: 820px) {
  .c-Header nav { gap: 16px; font-size: 12px; }
  .c-PixiIntro-foot { grid-template-columns: 1fr 1fr; font-size: 12px; }
  .c-PixiIntro-foot .foot-item:nth-child(3), .foot-scroll { display: none; }
  .reel-ui { bottom: 8vh; }
  .space { border-radius: 30px 30px 0 0; }
  .sp-draw { right: 0; bottom: 34vh; } .sp-side { top: auto; width: 100%; height: 34vh; padding: 18px var(--pad); border-left: 0; border-top: 1px solid var(--line); overflow-y: auto; }
  .sp-list { margin-top: 12px; } .sp-phase { display: none; } .sp-progress { right: var(--pad); bottom: calc(34vh + 8px); } .sp-head { top: 76px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }