/* stage.css — 제품 페이지의 «무대» (2026-11-01, UI-DESIGN-SYSTEM §6.2.2).

   세 가지를 한다:
     ① 히어로를 글(왼쪽)과 기기 프레임(오른쪽)의 2열 무대로 세운다 — 첫 화면에서 «무엇이고, 어떻게 생겼고, 어디서
        받나» 가 한 번에 읽힌다. 프레임 속 그림은 방문 언어의 갤러리 첫 장들이다(`core/product_media.gallery`).
     ② 영상 카드의 «포스터 없음» 을 글자 포스터로 정리한다 — 균일한 높이에 재생 표식 하나.
     ③ 섹션 사이 세로 리듬 — 영상 구획과 Play 띠, 띠와 소개 사이가 붙어 있던 것을 푼다.

   규범: 색은 tokens.css 변수만. 깊이는 무채색 빛이다(§1-1) — 프레임의 그림자는 `--lift` · `--edge-solid` 뿐이고
   악센트를 두르지 않는다(색은 CTA 와 스크린샷 그 자체뿐). 모션은 **한 번**: 프레임이 아래에서 올라온다. 그 한 번도
   `prefers-reduced-motion` 에서는 없다. `transform` 이 아니라 개별 속성 `translate` 를 쓰는 까닭은 프레임의 기울기
   (`rotate`)와 움직임이 서로를 덮어쓰지 않게 하려는 것이다.
   ⚠️ 이 시트는 product.css · store.css 뒤에 읽혀 같은 선택자(`.play-band` 등)를 덮는다. */

/* ── ① 히어로 무대 ─────────────────────────────────────────────── */
.product-hero.has-stage { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 24px 56px; align-items: center; }
.product-hero-copy { min-width: 0; }
.has-stage .t-display { font-size: clamp(44px, 5.4vw, 72px); }
.product-hero-summary { font-size: 19px; line-height: 1.55; color: var(--text); margin: 22px 0 6px;
  max-width: 52ch; text-wrap: pretty; }
/* 배지는 둘레 여백(10px)을 가진다(구글 지침) — 글 열의 왼쪽 선에 그림이 맞게 그만큼 당긴다. */
.product-hero-cta { margin: 14px 0 0 -10px; }

.stage { position: relative; min-width: 0; width: 100%; aspect-ratio: 1 / .98; isolation: isolate; }
/* 대기광 — 무채색(텍스트색 7%). 프레임 뒤에서 판이 «떠 있는» 느낌만 준다. */
.stage::before { content: ""; position: absolute; inset: 2% 0 -2%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 8%, transparent), transparent 74%); }

.stage-frame { position: absolute; margin: 0; width: 38%; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 26px; background: var(--surface-alt); border: 1px solid var(--border-lit);
  box-shadow: var(--edge-solid), var(--lift);
  animation: stage-rise .9s cubic-bezier(.16, 1, .3, 1) both; }
.stage-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.stage-f2 { left: 29%; top: 0; width: 42%; z-index: 3; }
.stage-f1 { left: 2%; top: 14%; z-index: 2; rotate: -4deg; animation-delay: .14s; }
.stage-f3 { right: 2%; top: 14%; z-index: 2; rotate: 4deg; animation-delay: .26s; }
/* 한 장뿐이면 가운데에, 두 장이면 둘이 나란히 — 빈 자리를 기울기로 메우지 않는다. */
.stage-f1:only-child { left: 28%; top: 0; width: 44%; rotate: 0deg; z-index: 3; }
@keyframes stage-rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 900px) {
  .product-hero.has-stage { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .stage { max-width: 440px; margin-inline: auto; }
  .stage-frame { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-frame { animation: none; }
}

/* ── ② 영상 카드의 글자 포스터 ─────────────────────────────────── */
/* 포스터가 없는 카드는 높이를 포스터 카드와 맞춘다(격자 줄 높이로 늘어난다) — 위쪽 빈 곳에는 재생 표식 하나. */
.video-card-text { background: linear-gradient(165deg, var(--surface-alt), var(--surface)); min-height: 240px; }
.vc-mark { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.vc-mark svg { width: 48px; height: 48px; stroke-width: 1.4; }
.video-card-text .vc-body { margin-top: auto; }

/* ── ③ 세로 리듬 ──────────────────────────────────────────────── */
/* 영상 구획 → Play 띠 → 소개 본문이 서로 붙어 있었다(2026-11-01 실화면). 섹션 사이 간격(120px)의 4/5 를 준다. */
.sec + .play-band { margin-top: 96px; }
.play-band { padding: 36px 40px; background: linear-gradient(180deg, var(--surface), var(--surface-alt)); }
.play-band .play-band-h { font-size: 30px; }
.play-band + * { margin-top: 96px; }
@media (max-width: 640px) {
  .sec + .play-band, .play-band + * { margin-top: 64px; }
  .play-band { padding: 26px 22px; }
  .play-band .play-band-h { font-size: 26px; }
}

/* ── 버튼은 좁은 화면에서 줄을 바꾼다 ──────────────────────────────────────
   러시아어 «Политика конфиденциальности приложения ›» 가 `nowrap` 이라 390px 에서 425px 폭으로 옆 길을 넘쳤다(운영
   사이트에서 재서 찾았다 — 제품 다섯 모두). 버튼이 부모보다 커지지 않게 하고 글은 접는다. */
.btn { max-width: 100%; white-space: normal; text-align: center; }