/* Hallmark · shape: product story, recomposed (night stadium, one page-long dark field) · genre: atmospheric · theme: brand · redesign: full · job: buy
 * paper: oklch(14.5% 0.012 165) · accent: #22996B (brand-bright) · display: Apple system sans (SF, Apple SD Gothic Neo), Pretendard elsewhere · body: the same · hero: Stage · nav: edge-aligned bar, wordmark, five in-page links and one action · footer: colophon block, footnotes over the legal line · signature: the Night League render at full height on the first screen, turning with the scroll further down
 * axes: night/system-sans/green · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the product-story order (what it does, how, how it looks, price) is the category's own; varied the compositions instead: statement, showcase, steps, bento, pinned, rows, offer */
/* Hallmark · answered F7 · the card radius and well fill are one token pair from the Apple extraction, shared on purpose by every picture well on the page */
/* Hallmark · dismissed 3 · the bento runs 7 and 5 over 4, 4 and 4 here, every tile a render, a working figure or the state light, no icon tiles */
/* Hallmark · reworded "핏치봇 공이 가는 곳으로." to "공이 가는 곳으로." · 54 named the kicker and 58 the name line; the name and the category moved into the hero sentence */
/* Hallmark · reworded "1폰을 끼웁니다" to "폰을 끼웁니다" · 38iii named the coloured numeral in the step heads; the ol counter numbers them now */
/* Hallmark · reworded "2스탠드에 올립니다" to "스탠드에 올립니다" · the same step counter, second step */
/* Hallmark · reworded "3핏치 앱에서 시작합니다" to "핏치 앱에서 시작합니다" · the same step counter, third step */
/* Hallmark · dropped "작은 몸에 필요한 것만." · it headed the same features as "작게, 단순하게, 오래." and 59 named twelve sections; the two merged */
/* Hallmark · dropped bottom-grey-sm.webp · the battery figure carries the power tile, and the v0.5 render shows the bottom engraving mirrored */
/* Hallmark · dropped front-grey-sm.webp, side-grey-sm.webp · the turning render is the colour block now; their sizes are figures beside it and the stills stay on detail.html */
/* Hallmark · reworded "경기는 뛰고, 촬영은 맡기세요." to "PLUG and REC." · the 10-29 content renamed the steps; the old line is now the lede under it */
/* Hallmark · reworded "충전 대신, 건전지 네 개." to "USB-C로 채우고, 폰까지." · the power changed to one lithium cell with USB-C (SPEC.md 2-1), the AA copy is retired */
/* Hallmark · reworded "가장 먼저 만나는 가격." to "필요한 만큼, 세트로." · the 10-29 content sells three sets instead of three prices for one */
/* Hallmark · dropped 35%, 25% · each set now lists its early-bird and launch prices outright, so the discount lines went */
/* Hallmark · reworded "화면 안에서는 앱이, 가장자리에서는 핏치봇이." to "사람이 모이는 곳이, 경기가 있는 곳." · 10-31 the app stopped aiming at the ball and reads where players gather (play director) */
/* Hallmark · dismissed 59 · eleven sections since the 10-29 content added the comparison and the app list; both are the product's own facts and merge would bury the table */
/* Hallmark · finish-review: subagent · 7 findings on index, 5 on detail · index 7 resolved; detail 2 fixed (29 halos, the prose edge), 3 printed for the owner (the one-colour swatch, the box list width, the toc pills) */

/* 프로모 페이지(index.html)만 읽는 층. 두 페이지가 함께 쓰는 부품은 site.css, 토큰은 tokens.css(생성)와 site.css 브랜드 층.
   나이트 리그 한 가지 색으로 출시하므로 페이지 전체를 밤 경기장 한 장으로 깐다: 밝은 띠 없이, 초록으로 아주 살짝 기운 검정 위에
   고정된 빛 번짐 두 개(왼쪽 아래 잔디의 초록, 오른쪽 위 조명의 흰빛). 역할 토큰(--c-*)을 이 페이지에서만 밤 값으로 다시 묶는다. */
:root:not([data-theme="light"]) {
  --night: oklch(14.5% 0.012 165);
  --night-2: oklch(19.5% 0.012 165);
  --night-3: oklch(25% 0.012 165);
  --night-rule: oklch(34% 0.012 165);
  --night-ink: oklch(96% 0.006 165);
  --night-ink-2: oklch(74% 0.01 165);
  --night-bloom-light: oklch(96% 0.006 165 / 0.07);
  --night-bloom-turf: oklch(52% 0.11 160 / 0.16);
  --c-bg: var(--night); --c-bg-alt: var(--night-2); --c-fg: var(--night-ink); --c-fg-2: var(--night-ink-2); --c-line: var(--night-rule);
  --c-stage-bg: var(--night); --c-stage-bg-2: var(--night-2); --c-stage-fg: var(--night-ink); --c-stage-fg-2: var(--night-ink-2); --c-stage-line: var(--night-rule);
  --c-accent: var(--brand-bright); --c-link: var(--brand-bright); --c-focus: var(--brand-bright);
  --c-btn-fg: oklch(98.5% 0.005 165);
  --w-content: 1200px;
  color-scheme: dark;
}

body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 34% at 80% 4%, var(--night-bloom-light), transparent 72%),
    radial-gradient(28% 32% at 10% 98%, var(--night-bloom-turf), transparent 72%); }
.band, .stage, .foot, .hero--night { background: transparent; }
.band { padding-block: var(--s-section); }
.band + .band { padding-top: calc(var(--s-section) * 0.75); }
/* 간격을 한 가지로 두지 않는다: 쓰는 법과 특징은 붙이고, 색상·가격 앞은 크게, 사양 한 곳만 면을 한 단 올린다 */
#how { padding-bottom: calc(var(--s-section) * 0.5); }
#how + #highlights { padding-top: calc(var(--s-section) * 0.5); }
#specs { background: var(--night-2); padding-block: calc(var(--s-section) * 0.75); }
#specs .spec-rows > div { border-color: var(--night-rule); }
#rewards { padding-top: calc(var(--s-section) * 1.1); }

/* ---------- 한 번의 등장: 8px 올라오며 나타난다 ---------- */
.js [data-reveal], .js [data-reveal="zoom"] { transform: translateY(8px); }
.js [data-reveal].is-in { transform: none; }

/* ---------- 머리 블록(왼쪽 제목, 오른쪽 한 줄) ---------- */
.head-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--s-gap-m) var(--s-gap-xl); }
.head-split .lede, .head-split .small { max-width: 30em; }

/* ---------- 1. 히어로: Stage — 글 다섯 칸, 렌더 일곱 칸 ---------- */
.hero--night { min-height: calc(100svh - var(--nav-h)); padding-block: var(--s-gap-l); overflow: clip; }
.hero--night .hero__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-gap-xl); }
.hero--night .hero__copy { padding-bottom: 0; }
.hero--night .hero__headline { font-size: min(var(--t-hero-size), 7.4vw); }
.hero--night .hero__sub { max-width: 22em; }
.hero--night .hero__media { align-self: center; justify-self: start; width: auto; height: min(76svh, 680px); aspect-ratio: 4 / 5; }
.hero--night .hero__media img { width: 100%; height: 100%; object-fit: contain;
  /* 렌더는 기둥 중간에서 끝난다: 아래 4분의 1을 밤 바탕으로 녹여 잘린 선이 보이지 않게 */
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-on) 72%, transparent 97%); mask-image: linear-gradient(to bottom, var(--mask-on) 72%, transparent 97%); }
@media (min-width: 1069px) { .hero--night .hero__media { margin-left: calc(var(--s-gap-xl) * -1.25); } }
.hero__price { margin-top: var(--s-gap-m); font-size: var(--t-small-size); color: var(--c-fg-2); font-variant-numeric: tabular-nums; }
.hero__price b { color: var(--c-fg); font-weight: var(--t-strong-w); }
.hero--night .hero__media::before { content: none; }   /* 장르가 히어로 뒤 스포트라이트를 막는다: 빛은 몸통에 깔린 번짐 두 개뿐 */

/* ---------- 2. 만든 이유: 한 문장을 크게 ---------- */
.story { padding-block: var(--s-section) calc(var(--s-section) * 0.75); }
.story__text { max-width: none; margin-inline: 0; font-size: min(var(--t-hero-size), 5.4vw); line-height: 1.16; text-wrap: balance; }
.story__text em, .js .story__text em .w.on { color: inherit; }   /* 한 잉크: 강조는 스크롤로 켜지는 글자가 맡는다 */
.js .story__text em .w.on { color: var(--c-fg); }

/* ---------- 3. 자동 추적: 경기장 하나를 열두 칸에 ---------- */
.diagram--wide { max-width: none; margin: var(--s-gap-xl) 0 0; }
.diagram--wide figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-gap-m); margin-top: var(--s-gap-m); }
.diagram--wide .legend { justify-content: flex-start; margin-top: 0; }
.tracking__below { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-gap-xl); align-items: center; margin-top: var(--s-gap-xl); }
.tracking__screen { display: grid; gap: var(--s-gap-s); }
.tracking__screen img { width: 100%; border-radius: var(--r-card); background: var(--c-bg-alt); }
.tracking__screen h3 { margin-top: var(--s-gap-s); }
.tracking__screen p { color: var(--c-fg-2); }
.facts--rows { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
.facts--rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-gap-m); padding-block: 24px; border-top: 1px solid var(--c-line); }
.facts--rows li:last-child { border-bottom: 1px solid var(--c-line); }
.facts--rows b { margin: 0; }

/* 움직이는 그림: 멈춤 단추(5초 넘게 도는 것마다 하나) */
.loopctl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--c-line);
  background: transparent; color: var(--c-fg-2); font-size: var(--t-small-size); cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.loopctl:hover { color: var(--c-fg); border-color: var(--c-fg-2); }
.loopctl:active { opacity: 0.7; }
.loopctl svg { width: 12px; height: 12px; fill: currentColor; }
.loopctl .i-play { display: none; }
.loopctl[aria-pressed="true"] .i-play { display: block; }
.loopctl[aria-pressed="true"] .i-pause { display: none; }
html:not(.js) .loopctl { display: none; }

/* ---------- 4. 쓰는 법: 세 단계 ---------- */
.steps--promo { counter-reset: step; margin-top: var(--s-gap-xl); gap: var(--s-gap-l); }
.steps--promo .step { counter-increment: step; }
.steps--promo .step img { width: 100%; background: var(--c-bg-alt); margin-bottom: var(--s-gap-m); }
.steps--promo .step h3::before { content: counter(step) ". "; font-variant-numeric: tabular-nums; }

/* ---------- 5. 특징: 벤토(7+5 위, 4+4+4 아래) ---------- */
.bento--promo { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-gap-m); }
.bento--promo .tile { grid-column: span 4; background: var(--c-bg-alt); min-height: 320px; padding: 32px; }
.bento--promo .ledfx__states { gap: 4px; }
.bento--promo .ledfx__states button { padding-inline: 8px 12px; gap: 8px; }
.bento--promo .tile--lead { grid-column: span 7; }
.bento--promo .tile--power { grid-column: span 5; }
.bento--promo .tile > img { max-width: 280px; }
.tile__figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-gap-l); margin-top: var(--s-gap-m); }
.tile__fig { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tile__fig .motion { order: 0; max-width: 260px; margin: 0 0 var(--s-gap-s); }
.tile .stats__v { font-size: clamp(32px, 3.6vw, var(--t-stat-size)); line-height: 1.05; font-variant-numeric: tabular-nums; }
.tile .stats__k { font-size: var(--t-small-size); color: var(--c-fg-2); }
.tile__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-gap-m); margin-top: auto; padding-top: var(--s-gap-m); }
.tile--power .motion { order: 0; max-width: 300px; margin: 0 0 var(--s-gap-s); }
.presses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--s-gap-s); }
.presses div { padding-inline: 16px; border-left: 1px solid var(--c-line); }
.presses div:first-child { padding-left: 0; border-left: 0; }
.presses dt { font-size: clamp(24px, 2.2vw, var(--t-h2-size)); line-height: 1.1; font-weight: var(--t-strong-w); color: var(--c-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.presses dd { font-size: var(--t-small-size); color: var(--c-fg-2); }
.bento--promo .ledfx { margin-bottom: var(--s-gap-s); }

/* ---------- 6. 360°: 렌더는 붙어 있고 글 세 칸이 지나간다 ---------- */
.spin--pinned { height: auto; background: transparent; padding-block: calc(var(--s-section) * 0.5); }
.spin__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-gap-xl); }
.spin__panels { min-width: 0; }
.spin__panel { min-height: 78svh; display: flex; flex-direction: column; justify-content: center; gap: var(--s-gap-m); }
.spin__panel .h1 + .lede, .spin__panel .h2 + .lede { margin-top: 0; }
.spin--pinned .spin__media { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h)); align-self: start; display: grid; place-items: center; height: calc(100svh - var(--nav-h)); aspect-ratio: auto; max-width: none; }
.spin--pinned .spin__img { width: auto; height: min(76svh, 740px); aspect-ratio: 2 / 3; }
.spin__read { position: absolute; left: 0; bottom: var(--s-gap-l); display: grid; gap: 4px; }
.spin--pinned .spin__angle { margin: 0; color: var(--c-fg); }
.spin--pinned .spin__hint { margin: 0; }
.spin__close { width: min(100%, 240px); border-radius: var(--r-card); background: var(--c-bg-alt); }
.dimfacts { display: grid; gap: 0; }
.dimfacts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-gap-m); align-items: baseline; padding-block: 20px; border-top: 1px solid var(--c-line); }
.dimfacts div:last-child { border-bottom: 1px solid var(--c-line); }
.dimfacts dt { font-size: var(--t-small-size); color: var(--c-fg-2); }
.dimfacts dd b { display: block; font-size: var(--t-h2-size); line-height: 1.1; font-weight: var(--t-strong-w); font-variant-numeric: tabular-nums; }
.dimfacts dd span { font-size: var(--t-small-size); color: var(--c-fg-2); }

/* ---------- 7. 사양: 제목 네 칸, 줄 여덟 칸 ---------- */
.specs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-gap-xl); align-items: start; }
.specs__head { display: grid; gap: var(--s-gap-m); justify-items: start; }
.spec-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-gap-m); padding-block: 20px; border-top: 1px solid var(--c-line); }
.spec-rows > div:last-child { border-bottom: 1px solid var(--c-line); }
.spec-rows dt { font-size: var(--t-small-size); color: var(--c-fg-2); padding-top: 2px; }

/* ---------- 8. 가격과 알림: 페이지는 이 일로 끝난다 ---------- */
.rewards--promo { gap: var(--s-gap-m); }
.rewards--promo .reward { background: var(--c-bg-alt); padding: var(--s-gap-l); }
.reward--best { box-shadow: inset 0 0 0 2px var(--c-accent); }
.reward__off b { color: var(--c-fg); font-weight: var(--t-strong-w); }
/* 만든 사람들(11-10 운영자): 모두의 창업 · 앱스토어 스포츠 4위 앱 · 반도체 엔지니어 — 히어로 바로 아래 세 칸 */
.proof { padding-block: var(--s-gap-xl); }
.proof__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-gap-m); }
.proof__item { display: grid; gap: 10px; align-content: start; min-width: 0; padding: var(--s-gap-l); border-radius: var(--r-card); background: var(--c-bg-alt); }
.proof__mark { display: flex; align-items: center; height: 40px; margin-bottom: 6px; }
.proof__mark img { height: 40px; width: auto; }
.proof__mark { height: 56px; }
.proof__plate { display: inline-flex; align-items: center; height: 48px; padding: 8px 14px; border-radius: 12px; background: #fff; }
.proof__plate img { height: 32px; width: auto; }
.proof__mark--app { gap: 10px; color: var(--c-fg); font-size: var(--t-h3-size); font-weight: var(--t-strong-w); letter-spacing: -0.01em; }
.proof__mark--app img { width: 44px; height: 44px; }
.proof__mark--app:hover { text-decoration: none; }
/* 반도체 칩 모션(11-10 운영자 "모션그래픽 반도체 느낌"): 바깥 배선을 따라 신호가 칩으로 들어오고, 다이가 숨 쉬듯 빛난다 */
.chipfx { width: 56px; height: 56px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chipfx__traces path, .chipfx__pins path { stroke: color-mix(in srgb, var(--c-accent) 45%, transparent); stroke-width: 1.6; }
.chipfx__pins path { stroke: var(--c-accent); stroke-width: 2.2; }
.chipfx__pulses path { stroke: var(--c-accent); stroke-width: 2.4; stroke-dasharray: 16 200; stroke-dashoffset: 16; opacity: 0; filter: drop-shadow(0 0 2px var(--c-accent)); }
.chipfx__pkg { stroke: var(--c-accent); stroke-width: 2.4; fill: color-mix(in srgb, var(--c-accent) 8%, transparent); }
.chipfx__die { fill: color-mix(in srgb, var(--c-accent) 30%, transparent); stroke: var(--c-accent); stroke-width: 1.2; }
.chipfx__grid { stroke: color-mix(in srgb, var(--c-accent) 55%, transparent); stroke-width: 0.8; }
.chipfx__mark { fill: var(--c-accent); }
@media (prefers-reduced-motion: no-preference) {
  .chipfx__pulses path { animation: chip-signal 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: calc(var(--i) * 0.3s); }
  .chipfx__die { animation: chip-core 2.4s ease-in-out infinite; }
  .chipfx__grid { animation: chip-core 2.4s ease-in-out infinite 0.2s; }
}
@keyframes chip-signal { 0% { stroke-dashoffset: 16; opacity: 0; } 8% { opacity: 1; } 62% { stroke-dashoffset: -84; opacity: 1; } 72%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes chip-core { 0%, 100% { fill: color-mix(in srgb, var(--c-accent) 22%, transparent); filter: none; } 50% { fill: color-mix(in srgb, var(--c-accent) 62%, transparent); filter: drop-shadow(0 0 6px var(--c-accent)); } }
.proof__item > b { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); font-weight: var(--t-strong-w); color: var(--c-fg); }
.proof__item > span { font-size: var(--t-small-size); color: var(--c-fg-2); }
/* PLUG and REC: REC 만 붉게, 녹화 점이 깜빡인다(11-10 운영자) */
.plugrec { --c-rec: #ff453a; }
.rec { color: var(--c-rec); white-space: nowrap; }
.rec__dot { display: inline-block; width: 0.3em; height: 0.3em; margin: 0 0.14em 0.14em 0.04em; border-radius: 50%; background: currentColor; vertical-align: middle; box-shadow: 0 0 0.3em currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .rec__dot { animation: rec-blink 1.1s steps(1, end) infinite; }
  .rec { animation: rec-glow 2.2s ease-in-out infinite; }
}
@keyframes rec-glow { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 0.35em color-mix(in srgb, currentColor 55%, transparent); } }

/* 핏치 × 핏치봇(11-10 "시너지 강조"): 가운데 줄마다 한 가지가 오간다. 점이 줄을 따라 흐른다(모션 줄이기면 점 없음) */
.sync { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); align-items: center; gap: var(--s-gap-m) var(--s-gap-l); margin-top: var(--s-gap-xl); }
.sync__app { display: grid; gap: 4px; align-content: start; padding: var(--s-gap-l); border-radius: var(--r-card); background: var(--c-bg-alt); }
.sync__app--bot { box-shadow: inset 0 0 0 2px var(--c-accent); }
.sync__name { display: flex; align-items: center; gap: 12px; font-size: var(--t-h2-size); font-weight: var(--t-strong-w); line-height: 1.2; }
.sync__logo { flex: none; width: 44px; height: 44px; border-radius: 22.5%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }   /* 앱 아이콘 모양(핏치 = P 심볼, 핏치봇 = 로고 v2 앱 아이콘) */
.sync__role { font-size: var(--t-small-size); color: var(--c-accent); font-weight: var(--t-strong-w); }
.sync__app ul { display: grid; gap: 6px; margin-top: var(--s-gap-s); padding-top: var(--s-gap-s); border-top: 1px solid var(--c-line); font-size: var(--t-small-size); color: var(--c-fg-2); }
.sync__flows { display: grid; gap: 18px; }
.sync__flow { position: relative; display: grid; gap: 2px; padding-bottom: 12px; text-align: center; font-size: var(--t-small-size); color: var(--c-fg-2); }
.sync__flow b { color: var(--c-fg); font-weight: var(--t-strong-w); }
.sync__dir { display: none; }
.sync__flow::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-line); }
.sync__flow::after { content: ""; position: absolute; right: 1px; bottom: -4px; width: 8px; height: 8px; border-top: 1.5px solid var(--c-fg-2); border-right: 1.5px solid var(--c-fg-2); transform: rotate(45deg); }
.sync__flow--back::after { right: auto; left: 1px; transform: rotate(-135deg); }
.sync__flow--back b { color: var(--c-accent); }
.sync__dot { position: absolute; bottom: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sync.is-in .sync__dot { animation: sync-go 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .sync.is-in .sync__flow:nth-child(2) .sync__dot { animation-delay: 0.8s; }
  .sync.is-in .sync__flow:nth-child(3) .sync__dot { animation-delay: 1.6s; }
  .sync.is-in .sync__flow--back .sync__dot { animation-name: sync-back; animation-delay: 2.4s; }
}
@keyframes sync-go { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
@keyframes sync-back { 0% { left: calc(100% - 7px); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.together__rows { margin-top: var(--s-gap-xl); }
.together__ask { margin-top: var(--s-gap-xl); font-size: var(--t-h2-size); font-weight: var(--t-strong-w); line-height: 1.35; color: var(--c-fg); text-wrap: balance; }

/* 사전예약 현황(11-10 운영자 "실시간 인포그래픽") — 1151 대략값. 히어로 한 줄 + 가격 영역 카드 */
.livecount { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: var(--s-gap-s); font-size: var(--t-small-size); color: var(--c-fg-2); }
.livecount b { color: var(--c-fg); font-weight: var(--t-strong-w); }
.livecount__dot, .tally__live i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.tally { display: grid; gap: 14px; margin-top: var(--s-gap-l); padding: var(--s-gap-l); border-radius: var(--r-card); background: var(--c-bg-alt); }
.tally__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: var(--t-small-size); color: var(--c-fg-2); }
.tally__live { display: inline-flex; align-items: center; gap: 8px; color: var(--c-fg); font-weight: var(--t-strong-w); }
.tally__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tally__num b { font-size: clamp(40px, 5vw, 64px); font-weight: var(--t-stat-w); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tally__num small { font-size: var(--t-h3-size); color: var(--c-fg-2); }
.tally__bar { position: relative; height: 14px; margin-top: 26px; border-radius: 99px; background: color-mix(in srgb, var(--c-fg) 10%, transparent); }
.tally__bar > i { position: relative; display: block; width: 2%; height: 100%; overflow: hidden; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 55%, transparent), var(--c-accent)); box-shadow: 0 0 16px color-mix(in srgb, var(--c-accent) 55%, transparent);
  transition: width 1.4s cubic-bezier(0.2, 0.7, 0.1, 1); }
.tally__bar > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%); transform: translateX(-100%); }
.tally__tick, .tally__goal { position: absolute; bottom: calc(100% + 6px); font-size: var(--t-micro-size); color: var(--c-fg-2); white-space: nowrap; }
.tally__tick { left: var(--at); transform: translateX(-50%); }
.tally__tick::after { content: ""; position: absolute; left: 50%; top: calc(100% + 6px); width: 1px; height: 14px; background: color-mix(in srgb, var(--c-fg) 28%, transparent); }
.tally__goal { right: 0; }
.tally__goal b { color: var(--c-fg); }
.tally__foot { font-size: var(--t-small-size); color: var(--c-fg-2); }
.tally__foot b { color: var(--c-accent); }
@media (prefers-reduced-motion: no-preference) {
  .livecount__dot, .tally__live i { animation: live-ping 1.8s ease-out infinite; }
  .tally__bar > i::after { animation: tally-shine 2.6s ease-in-out infinite 1s; }
}
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 65%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes tally-shine { 60%, 100% { transform: translateX(100%); } }

/* 신청한 분 vs 안 한 분(11-10 운영자 "놓치면 손해라는 느낌") — 숫자는 실제 사전예약가만, 오른 뒤 금액은 미정이라 적지 않는다 */
.miss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-gap-m); margin-top: var(--s-gap-l); }
.miss__col { display: grid; gap: 6px; align-content: start; padding: var(--s-gap-l); border-radius: var(--r-card); border: 1px solid var(--c-line); }
.miss__col--in { background: var(--c-bg-alt); border-color: transparent; box-shadow: inset 0 0 0 2px var(--c-accent); }
.miss__k { font-size: var(--t-small-size); color: var(--c-fg-2); }
.miss__v { font-size: var(--t-h2-size); font-weight: var(--t-strong-w); font-variant-numeric: tabular-nums; line-height: 1.2; }
.miss__col:not(.miss__col--in) .miss__v { color: var(--c-fg-2); }
.miss__d { font-size: var(--t-small-size); color: var(--c-fg-2); }
.miss__up { display: inline-block; width: 0.55em; height: 0.66em; margin-right: 0.22em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .miss.is-in .miss__up { animation: miss-rise 1.4s var(--ease) 0.9s 2 both; } }
@keyframes miss-rise { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-0.28em); } }
.offer__act { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s-gap-l) var(--s-gap-xl); margin-top: var(--s-section); }
.offer__copy { display: grid; gap: var(--s-gap-m); justify-items: start; }
.offer__act .cta-row { margin-top: var(--s-gap-s); }
.offer__media { justify-self: center; width: min(100%, 320px); }

/* ---------- 2-1. 왜 핏치봇: 수치 넷(세로 머리카락 선) + 비교표 ---------- */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-gap-xl); }
.figs li { display: grid; align-content: start; gap: 8px; min-width: 0; padding-inline: var(--s-gap-m); border-left: 1px solid var(--c-line); }
.figs li:first-child { padding-left: 0; border-left: 0; }
.figs b { font-size: clamp(36px, 3.8vw, var(--t-stat-size)); line-height: 1.05; font-weight: var(--t-stat-w); font-variant-numeric: tabular-nums; white-space: nowrap; }
.figs b small { font-size: 0.42em; font-weight: var(--t-strong-w); margin-left: 2px; }
.figs li > span { font-size: var(--t-small-size); color: var(--c-fg-2); }
.vs { margin-top: 0; font-size: var(--t-body-size); }
#why .table-wrap { margin-top: var(--s-gap-xl); }
.vs th, .vs td { padding: 16px 20px 16px 0; border-color: var(--c-line); }
.vs thead th { font-size: var(--t-small-size); color: var(--c-fg-2); font-weight: var(--t-body-w); }
.vs thead th:last-child { color: var(--c-accent); font-weight: var(--t-strong-w); }
.vs tbody th { font-weight: var(--t-strong-w); color: var(--c-fg); white-space: nowrap; }
.vs tbody td { color: var(--c-fg-2); }
.vs tbody td:last-child { color: var(--c-fg); }

/* ---------- 4. PLUG and REC: 영문 대문자 제목은 줄 간격 1 이상, 자간 0 ---------- */
.plugrec { letter-spacing: 0; }

/* ---------- 5. 충전 그림 ---------- */
.motion--power .m-cellbody { fill: none; stroke: var(--c-fg-2); stroke-width: 2.5; }
.motion--power .m-cellcap { fill: var(--c-fg-2); }
.motion--power .m-cellfill { fill: var(--c-accent); transform-box: fill-box; transform-origin: 0 50%; transition: transform var(--dur) var(--ease); }
.motion--power .m-cellfill.is-low { fill: var(--brand-amber); }
.motion--power .m-wire { fill: none; stroke: var(--c-line); stroke-width: 3; stroke-linecap: round; }
.motion--power .m-flow { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 9; opacity: 0; transition: opacity var(--dur) var(--ease); }
.motion--power .m-flow.on { opacity: 1; }
.motion--power .m-phone { fill: none; stroke: var(--c-fg-2); stroke-width: 2.5; }
.motion--power .m-phonebar { fill: none; stroke: var(--c-fg-2); stroke-width: 1.5; }
.motion--power .m-phonefill { fill: var(--c-fg); transform-box: fill-box; transform-origin: 0 50%; transition: transform var(--dur) var(--ease); }
.motion--power .m-label { font-family: var(--font-sans); font-size: 11px; fill: var(--c-fg-2); }
.tile--power .motion { order: 0; max-width: 320px; margin: 0 0 var(--s-gap-s); }

/* ---------- 5-1. 핏치봇 앱: 줄 여섯(제목 다섯 칸, 설명 일곱 칸) ---------- */
/* 앱: 경기 날 순서 6단계(11-10). 칸 위 작은 글씨 = 그 일을 하는 앱 탭 이름(실제 앱 탭과 같다) */
.appflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-gap-l) var(--s-gap-xl); margin-top: var(--s-gap-xl); counter-reset: flow; }
.appflow li { counter-increment: flow; display: grid; align-content: start; gap: 8px; min-width: 0; padding-top: var(--s-gap-m); border-top: 1px solid var(--c-line); }
.appflow__tab { justify-self: start; font-size: var(--t-small-size); color: var(--c-accent); font-weight: var(--t-strong-w); }
.appflow h3::before { content: counter(flow) ". "; font-variant-numeric: tabular-nums; color: var(--c-fg-2); }
.appflow p { font-size: var(--t-small-size); color: var(--c-fg-2); max-width: 30em; }
.app-rows { margin-top: var(--s-gap-xl); }
/* 앱 단계·기능 줄: 화면에 들어오면 윗선을 초록 빛이 왼쪽에서 훑고 사라진다(11-10 "유려하게") */
.appflow li, .app-rows li { position: relative; }
.js .appflow li::before, .js .app-rows li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .appflow li.is-in::before, .js .app-rows li.is-in::before { animation: line-sweep 1.8s cubic-bezier(0.2, 0.7, 0.1, 1) 0.15s 1 both; }
}
@keyframes line-sweep { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.app-rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-gap-m) var(--s-gap-xl); align-items: baseline; padding-block: 24px; border-top: 1px solid var(--c-line); }
.app-rows li:last-child { border-bottom: 1px solid var(--c-line); }
.app-rows p { color: var(--c-fg-2); max-width: 36em; }
.app-rows li:last-child h3 { color: var(--c-fg-2); }

/* ---------- 8. 세트 셋 + 케이스 + 카운트다운 ---------- */
.rewards--sets .reward { gap: 12px; }
.reward__off { line-height: 1.5; }
.reward__list { display: grid; gap: 8px; margin-top: var(--s-gap-s); padding-top: var(--s-gap-m); border-top: 1px solid var(--c-line); font-size: var(--t-small-size); color: var(--c-fg-2); }
.reward__list b { color: var(--c-fg); font-weight: var(--t-strong-w); }
.reward__more { margin-top: auto; padding-top: var(--s-gap-s); font-size: var(--t-small-size); color: var(--c-fg); }
.fill { display: inline-block; padding: 2px 8px; border: 1px dashed var(--c-line); border-radius: 6px; color: var(--c-fg-2); }
/* 사전예약: 카드 한 장 + 신청 순서 */
.rewards--promo.rewards--single { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; align-items: start; }
.rewards--single .reward { gap: 12px; }
.reserve-steps { display: grid; gap: var(--s-gap-m); padding: var(--s-gap-l) 0; counter-reset: step; }
.reserve-steps li { display: grid; gap: 4px; padding-left: 44px; position: relative; counter-increment: step; }
.reserve-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-bg); font-size: var(--t-small-size); font-weight: var(--t-strong-w); }
.reserve-steps b { font-weight: var(--t-strong-w); }
.reserve-steps span { font-size: var(--t-small-size); color: var(--c-fg-2); }
.casepair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-gap-m); margin-top: var(--s-gap-l); }
.casepair img { width: 100%; border-radius: var(--r-card); background: var(--c-bg-alt); }
.casepair figcaption { margin-top: var(--s-gap-s); font-size: var(--t-small-size); color: var(--c-fg-2); }
.casepair figcaption b { display: block; color: var(--c-fg); font-size: var(--t-body-size); font-weight: var(--t-strong-w); }

/* ---------- 푸터 ---------- */
.foot { border-top: 1px solid var(--c-line); }

/* ---------- 태블릿 ---------- */
@media (max-width: 1068px) {
  .appflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-gap-l); }
  .figs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .bento--promo .tile, .bento--promo .tile--lead, .bento--promo .tile--power { grid-column: span 6; }
  .bento--promo .tile--lead { grid-column: 1 / -1; }
  .spin__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- 폰 ---------- */
@media (max-width: 734px) {
  .head-split, .tracking__below, .specs, .offer__act, .app-rows li, .casepair, .rewards--promo.rewards--single { grid-template-columns: minmax(0, 1fr); }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-gap-l); }
  .figs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .app-rows li { gap: 4px; }
  .miss { grid-template-columns: minmax(0, 1fr); }
  .sync { grid-template-columns: minmax(0, 1fr); }
  .proof__list { grid-template-columns: minmax(0, 1fr); }
  .sync__flow { text-align: left; padding-bottom: 0; }
  .sync__flow::before, .sync__flow::after, .sync__dot { display: none; }
  .sync__dir { display: block; font-size: var(--t-micro-size); color: var(--c-accent); }
  .appflow { grid-template-columns: minmax(0, 1fr); gap: var(--s-gap-m); }
  .hero--night { min-height: auto; padding-block: var(--s-gap-l) 0; }
  .hero--night .hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--s-gap-l); }
  .hero--night .hero__copy { text-align: left; }
  .hero--night .hero .cta-row, .hero--night .cta-row { justify-content: flex-start; }
  .hero--night .hero__headline { font-size: var(--t-hero-size); }
  .hero--night .hero__media { height: min(60svh, 460px); }
  .story__text { font-size: min(var(--t-h1-size), 8.2vw); line-height: var(--t-h1-lh); }
  .diagram--wide figcaption { flex-direction: column; align-items: flex-start; }
  .facts--rows li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .steps--promo .step img { max-width: none; }
  .bento--promo .tile, .bento--promo .tile--lead, .bento--promo .tile--power { grid-column: 1 / -1; min-height: 0; }
  .tile__figs { grid-template-columns: minmax(0, 1fr); gap: var(--s-gap-m); }
  .spin__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spin--pinned .spin__media { order: -1; z-index: 2; height: 46svh; background: linear-gradient(to bottom, var(--night) 82%, transparent); }
  .spin--pinned .spin__img { height: 40svh; }
  .spin__read { bottom: 8px; }
  .spin__panel { min-height: 56svh; }
  .spin__copy .lede, .spin__panel .lede { display: block; }
  .offer__media { order: -1; width: min(60%, 240px); }
}

@media (prefers-reduced-motion: reduce) {
  .loopctl { display: none; }
}

/* ==== 앱 소개 폰 모션그래픽(11-10 운영자 "실제 앱 에셋으로 화면 모션그래픽 — 실제 화면일 필요는 없고") ====
   앱 원본: 아이콘 = pitch-cam src/constants/icons.ts·botGlyphs.ts, 색 = src/lib/theme.ts 다크(#0F1115·#191F28·#202632·초록 #15A34A/#3FB36C),
   잔디 = assets/field/grass.jpg(→ app-grass.webp), 로고 = 로고 v2 마크. 장면 6개 = 옆 '경기 날 순서' 6단계와 짝(site.js 가 3.8초마다 넘긴다) */
.appshow { display: grid; grid-template-columns: minmax(272px, 4fr) minmax(0, 7fr); gap: var(--s-gap-l) var(--s-gap-xl); align-items: center; margin-top: var(--s-gap-xl); }
.appshow .appflow { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.appshow .appflow li { cursor: pointer; opacity: 0.5; transition: opacity 0.35s var(--ease), border-color 0.35s var(--ease); }
.appshow .appflow li.is-on { opacity: 1; border-top-color: var(--c-accent); }
.appshow .appflow li.is-on h3 { color: var(--c-accent); }
.appshow .appflow li:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; }
.appshow__phone { justify-self: center; display: grid; gap: 12px; justify-items: center; margin: 0; }
.appshow__cap { max-width: 272px; font-size: var(--t-micro-size); color: var(--c-fg-2); text-align: center; }
.ph { --ph-bg: #0F1115; --ph-sf: #191F28; --ph-el: #202632; --ph-g: #15A34A; --ph-gl: #3FB36C; --ph-t: #fff; --ph-t2: rgba(247, 247, 248, 0.62); --ph-ln: rgba(174, 176, 182, 0.22); --ph-red: #F04452;
  position: relative; width: 272px; height: 560px; border-radius: 46px; background: #050607; font-size: 11px; line-height: 1.35; color: var(--ph-t); text-align: left;
  box-shadow: 0 0 0 1.5px #2c3036, inset 0 0 0 1px #15181c, 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 120px -40px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.ph .ic { width: 1.25em; height: 1.25em; flex: none; }
.ph b { font-weight: 700; }
.ph__island { position: absolute; z-index: 4; top: 20px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 14px; background: #000; }
.ph__status { position: absolute; z-index: 2; left: 10px; right: 10px; top: 10px; height: 40px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 26px 6px; border-radius: 36px 36px 0 0; background: var(--ph-bg); font-size: 11px; }
.ph__status span { font-size: 9px; letter-spacing: 0.04em; }
.ph__screens { position: absolute; left: 10px; right: 10px; top: 50px; bottom: 66px; overflow: hidden; background: var(--ph-bg); }
.ph__tabs { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; height: 56px; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 7px; border-top: 1px solid var(--ph-ln); border-radius: 0 0 36px 36px; background: rgba(25, 31, 40, 0.97); }
.ph__tab { display: grid; justify-items: center; gap: 2px; font-size: 9px; color: var(--ph-t2); transition: color 0.35s; }
.ph__tab .ic { width: 20px; height: 20px; }
.ph__tab.is-on { color: var(--ph-gl); }
.ph__mark { width: 9px; height: 17px; color: var(--ph-gl); }
.sc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 6px 12px 10px; opacity: 0; transform: translateX(16px); transition: opacity 0.45s var(--ease), transform 0.5s cubic-bezier(0.2, 0.7, 0.1, 1); pointer-events: none; }
.sc.is-on { opacity: 1; transform: none; }
.sc__bar { display: flex; align-items: center; gap: 6px; height: 26px; font-size: 15px; }
.sc__pill { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 99px; background: rgba(21, 163, 74, 0.18); color: var(--ph-gl); font-size: 9.5px; font-weight: 600; }
.sc__pill .ic { width: 11px; height: 11px; }
/* 1 홈 */
.wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wk__d { position: relative; display: grid; justify-items: center; gap: 1px; padding: 5px 0 7px; border-radius: 10px; background: var(--ph-sf); }
.wk__d small { font-size: 8.5px; color: var(--ph-t2); }
.wk__d b { font-size: 12px; }
.wk__d.is-today { background: var(--ph-g); }
.wk__d.is-today small { color: rgba(255, 255, 255, 0.85); }
.wk__d.has-match::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--ph-gl); }
.mc { display: grid; overflow: hidden; border-radius: 14px; background: var(--ph-sf); }
.mc__hero { position: relative; height: 96px; background: url(../img/app-grass.webp) center / cover; }
.mc__dday { position: absolute; left: 10px; top: 10px; padding: 2px 7px; border-radius: 99px; background: rgba(15, 17, 21, 0.62); font-size: 9.5px; font-weight: 700; }
.mc__body { display: grid; gap: 5px; padding: 10px 12px 2px; }
.mc__meta, .mc__from { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ph-t2); }
.mc__from { color: var(--ph-gl); }
.mc__vs { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mc__vs span { font-size: 11px; color: var(--ph-t2); }
.mc__cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; height: 36px; margin: 8px 12px 12px; overflow: hidden; border-radius: 12px; background: var(--ph-g); font-size: 12px; font-weight: 700; }
.tap { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); opacity: 0; }
/* 2 경기 상세 · 배치도 */
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: var(--ph-sf); font-size: 11px; font-weight: 600; text-align: center; }
.seg span { position: relative; z-index: 1; padding: 5px 0; }
.seg__knob { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px; background: var(--ph-el); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.plan { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px; background: url(../img/app-grass.webp) center / cover; }
.plan__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, 0.88); stroke-width: 0.8; }
.plan__lines--futsal { opacity: 0; }
.plan__cam { position: absolute; z-index: 2; left: 14%; bottom: 2%; width: 22px; height: 22px; margin-left: -11px; display: grid; place-items: center; border-radius: 50%; background: var(--ph-g); box-shadow: 0 0 0 3px rgba(21, 163, 74, 0.35); }
.plan__cam .ic { width: 12px; height: 12px; }
.plan__arc { position: absolute; left: 50%; bottom: 6%; width: 86%; height: 84%; transform: translateX(-50%); clip-path: polygon(50% 100%, 0 0, 100% 0); background: radial-gradient(ellipse at 50% 100%, rgba(63, 179, 108, 0.5), rgba(63, 179, 108, 0.12) 70%, transparent); opacity: 0; }
.plan__cap { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ph-t2); }
.plan__rows { display: grid; border-radius: 12px; background: var(--ph-sf); }
.plan__rows span { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--ph-ln); font-size: 10.5px; color: var(--ph-t2); }
.plan__rows span:last-child { border-bottom: 0; }
.plan__rows b { color: var(--ph-t); font-weight: 600; }
/* 3 촬영 · 4 쿼터 점검 */
.sc--check { padding: 0; }
.cam { position: absolute; inset: 0; overflow: hidden; background: url(../img/app-grass.webp) center / cover; }
.cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.5)); }
.cam--dim { filter: brightness(0.45) blur(1px); }
/* 3 촬영: 실제 축구 영상(시댄스 2.5 로 만든 동호인 경기 — 실존 인물 없음) 위에 HUD · 비출 곳 모서리 표시 */
.live { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: url(../img/app-shoot-poster.webp) center / cover, url(../img/app-grass.webp) center / cover, #000; }
.live__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.live::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 32%); pointer-events: none; }
.live__frame { --fc: rgba(63, 179, 108, 0.95); position: absolute; z-index: 1; left: 24%; top: 26%; width: 52%; height: 52%;
  background: linear-gradient(var(--fc), var(--fc)) 0 0 / 14px 2px, linear-gradient(var(--fc), var(--fc)) 0 0 / 2px 14px,
    linear-gradient(var(--fc), var(--fc)) 100% 0 / 14px 2px, linear-gradient(var(--fc), var(--fc)) 100% 0 / 2px 14px,
    linear-gradient(var(--fc), var(--fc)) 0 100% / 14px 2px, linear-gradient(var(--fc), var(--fc)) 0 100% / 2px 14px,
    linear-gradient(var(--fc), var(--fc)) 100% 100% / 14px 2px, linear-gradient(var(--fc), var(--fc)) 100% 100% / 2px 14px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 3px rgba(63, 179, 108, 0.7)); }
.live__steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.live__steps li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--ph-sf); font-size: 10.5px; color: var(--ph-t2); }
.live__steps li .ic { color: var(--ph-gl); }
.live__steps b { display: grid; place-items: center; margin-left: auto; color: var(--ph-gl); }
.live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ph-red); }
.cam--still { background-image: url(../img/app-shoot-poster.webp), url(../img/app-grass.webp); }
.cam__hud { position: absolute; z-index: 2; left: 10px; right: 10px; top: 8px; display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; }
.cam__rec { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; background: var(--ph-red); }
.cam__rec i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.cam__time { font-variant-numeric: tabular-nums; }
.cam__bat { margin-left: auto; }
.cam__bat .ic { width: 16px; height: 16px; }
.sheet { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 9px; padding: 14px 14px 12px; border-radius: 20px; background: var(--ph-sf); transform: translateY(110%); }
.sheet__title { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.sheet__title span { font-size: 11px; color: var(--ph-t2); }
.sheet__row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--ph-el); font-size: 10.5px; color: var(--ph-t2); }
.sheet__row .ic { color: var(--ph-gl); }
.sheet__row b { margin-left: auto; color: var(--ph-t); }
.sheet__cta { display: grid; place-items: center; height: 36px; border-radius: 12px; background: var(--ph-g); font-size: 12px; font-weight: 700; }
/* 5 보관함 */
.lib__match { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--ph-sf); }
.lib__match b { font-size: 11.5px; } .lib__match small { font-size: 9.5px; color: var(--ph-t2); }
.lib__clips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lib__clip { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 9px; row-gap: 3px; align-items: center; }
.lib__thumb { position: relative; grid-row: 1 / span 2; height: 40px; overflow: hidden; border-radius: 8px; background: url(../img/app-grass.webp) center / cover; }
.lib__thumb em { position: absolute; left: 4px; bottom: 3px; font-size: 8px; font-style: normal; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.lib__clip:nth-child(3) .lib__thumb::after { content: "▶ 07:00"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(21, 163, 74, 0.55); font-size: 9px; font-weight: 700; opacity: 0; }
.lib__meta { display: flex; align-items: baseline; gap: 6px; }
.lib__meta b { font-size: 11px; } .lib__meta small { font-size: 9.5px; color: var(--ph-t2); }
.lib__goals { display: flex; flex-wrap: wrap; gap: 4px; min-height: 16px; }
.lib__goal { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 99px; background: rgba(21, 163, 74, 0.18); font-size: 9.5px; font-weight: 700; color: var(--ph-gl); }
.lib__goal .ic { width: 10px; height: 10px; }
/* 6 편집 */
.ed__preview { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: url(../img/app-grass.webp) center / cover; }
.ed__score { position: absolute; left: 8px; top: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(15, 17, 21, 0.78); font-size: 9.5px; }
.ed__score b { color: var(--ph-gl); }
.ed__play { display: grid; place-items: center; width: 34px; height: 34px; padding-left: 2px; border-radius: 50%; background: rgba(255, 255, 255, 0.88); font-size: 12px; color: #0F1115; }
.ed__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.ed__tile { position: relative; height: 38px; border-radius: 7px; background: url(../img/app-grass.webp) calc(var(--k) * 25%) 50% / 260% auto; }
.ed__tile i { position: absolute; right: 3px; top: 3px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--ph-g); opacity: 0; }
.ed__tile .ic { width: 9px; height: 9px; }
.ed__bgm { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--ph-sf); font-size: 10.5px; color: var(--ph-t2); }
.ed__bar { height: 6px; overflow: hidden; border-radius: 99px; background: var(--ph-el); }
.ed__bar i { display: block; width: 0; height: 100%; background: var(--ph-g); }
.ed__done { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ph-gl); opacity: 0; }
.ed__share { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 99px; background: var(--ph-g); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .sc--home.is-on .wk { animation: ph-rise 0.5s 0.05s both; }
  .sc--home.is-on .mc { animation: ph-rise 0.6s 0.2s both; }
  .sc--home.is-on .mc__cta { animation: ph-glow 1s 1.1s 2; }
  .sc--home.is-on .tap { animation: ph-tap 0.7s 2.7s both; }
  .sc--plan.is-on .plan__cam { animation: ph-drag 1.2s 0.5s cubic-bezier(0.3, 0.7, 0.2, 1.15) both; }
  .sc--plan.is-on .plan__arc { animation: ph-in 0.5s 1.5s both; }
  .sc--plan.is-on .seg__knob { animation: ph-knob 0.35s 2.2s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
  .sc--plan.is-on .plan__lines--soccer { animation: ph-out 0.4s 2.3s both; }
  .sc--plan.is-on .plan__lines--futsal { animation: ph-in 0.4s 2.4s both; }
  .sc--cam .cam__rec i { animation: rec-blink 1s steps(1, end) infinite; }
  .sc--cam.is-on .live__steps li { animation: ph-rise 0.4s both; animation-delay: calc(var(--k) * 0.7s + 0.4s); }
  .sc--cam.is-on .live__frame { animation: ph-aim 3.6s ease-in-out both; }
  .sc--cam .live__dot { animation: rec-blink 1s steps(1, end) infinite; }
  .sc--check.is-on .sheet { animation: ph-sheet 0.55s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .sc--lib.is-on .lib__clip { animation: ph-rise 0.45s both; animation-delay: calc(var(--k) * 90ms + 0.1s); }
  .sc--lib.is-on .lib__goal--tap { animation: ph-chip 0.5s 1.6s both; }
  .sc--lib.is-on .lib__clip:nth-child(3) .lib__thumb::after { animation: ph-in 0.3s 1.9s both; }
  .sc--edit.is-on .ed__tile i { animation: ph-pop 0.3s both; animation-delay: calc(var(--k) * 0.15s + 0.4s); }
  .sc--edit.is-on .ed__bar i { animation: ph-fill 1.3s 1.3s ease-in-out both; }
  .sc--edit.is-on .ed__done { animation: ph-in 0.35s 2.7s both; }
}
@media (prefers-reduced-motion: reduce) { .sc { transition: none; } .plan__cam { left: 50%; } .plan__arc { opacity: 1; } }
@keyframes ph-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ph-glow { 50% { box-shadow: 0 0 0 6px rgba(21, 163, 74, 0.28); } }
@keyframes ph-tap { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(16); } }
@keyframes ph-drag { from { left: 14%; } to { left: 50%; } }
@keyframes ph-knob { to { transform: translateX(100%); } }
@keyframes ph-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ph-aim { 0% { transform: translate(-10%, 4%); } 55% { transform: translate(8%, -2%); } 100% { transform: translate(12%, 0); } }
@keyframes ph-out { to { opacity: 0; } }
@keyframes ph-sheet { from { transform: translateY(110%); } to { transform: none; } }
@keyframes ph-chip { 40% { transform: scale(0.88); } 100% { transform: none; background: var(--ph-g); color: #fff; } }
@keyframes ph-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes ph-fill { to { width: 100%; } }
@media (max-width: 1068px) { .appshow .appflow { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 734px) {
  .appshow { grid-template-columns: minmax(0, 1fr); }
  .appshow .appflow { grid-template-columns: minmax(0, 1fr); }
}