/* 온보딩과 프레이밍 — 첫 카드에서 제품을 설명하고, 시작 직전 거치법을 익힌 뒤,
   카메라가 켜지면 전신이 담겼는지 실시간으로 검증한다.
   css/style.css는 동결 파일이라 새 규칙은 여기 모은다. */

/* ---------- 온보딩 카드의 댄스 코치 설명 애니메이션 ---------- */

/* 카드는 어디서나 그림과 안내 문구를 한 줄로 짝지어 놓는다. 좁은 화면에서는 그림을
   작게 줄여 옆에 세운다 — 세로로 쌓으면 갤러리가 첫 화면 밖으로 밀려난다. */
.onboarding {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
}
.onboarding-copy {
  grid-row: 1;
  grid-column: 1 / -1;
}
/* 그림과 시작 행동은 같은 줄에 못 박는다 — 첫 화면에서 설명만 읽고 멈추지 않게 한다. */
.onboarding-figure {
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  height: auto;
  margin: 14px 0 0;
  border: 1px solid #292936;
  border-radius: 10px;
  background: #0d0d14;
}
.onboarding-start {
  grid-row: 2;
  grid-column: 2;
  margin: 14px 0 0;
  color: #d6d6e0;
  font-size: 13px;
  line-height: 1.55;
}
.onboarding-start b {
  color: var(--fg);
}
.onboarding-actions {
  grid-row: 3;
  grid-column: 1 / -1;
}

/* 넓어지면 그림이 설명 옆에 크게 선다. .onboarding의 display를 바꾸는 자리는 이 파일뿐이다 —
   style.css의 block/flex:none은 무대 옆 단계 열에 카드 높이가 묶이지 않게 하려는 규칙이라 그대로 둔다. */
@media (min-width: 721px) {
  .onboarding {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    column-gap: 26px;
  }
  .onboarding-copy,
  .onboarding-start,
  .onboarding-actions {
    grid-row: auto;
    grid-column: 1;
  }
  .onboarding-figure {
    grid-row: 1 / span 4;
    grid-column: 2;
    margin: 0;
  }
  .onboarding-start {
    padding: 10px 12px;
    border-left: 3px solid var(--accent2);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--accent2) 6%, transparent);
  }
}

/* 세로 폰의 첫 화면은 스크롤 없이 갤러리까지 담아야 한다(test/e2e/layout.mjs가 390×844에서 지킨다).
   행동 문구는 남기고, 제목과 중복되는 설명 및 복구 경로만 접는다. */
@media (max-width: 720px) and (orientation: portrait) {
  .onboarding {
    grid-template-columns: 140px minmax(0, 1fr);
  }
  .onboarding-start-detail,
  .onboarding-actions small {
    display: none;
  }
  .onboarding-copy > p:not(.onboarding-kicker) {
    font-size: 12.5px;
    line-height: 1.45;
  }
  .onboarding-start {
    font-size: 12.5px;
  }
}

/* ---------- 영상 시작 전 실제 버튼 스포트라이트 ---------- */

.start-guide {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.start-guide[hidden] {
  display: none;
}
.start-guide-shade {
  position: fixed;
  background: #000b;
  pointer-events: auto;
}
.start-guide-card {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(420px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid #ffffff26;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 18px 56px #000c;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.start-guide-progress {
  margin: 0 0 8px;
  color: var(--accent2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.start-guide-message {
  margin: 0;
  color: var(--fg);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}
.start-guide-figure {
  display: block;
  width: min(320px, 100%);
  height: auto;
  margin: 14px auto 0;
  border: 1px solid #292936;
  border-radius: 10px;
  background: #0d0d14;
}
.start-guide-figure[hidden] {
  display: none;
}
.start-guide-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.start-guide-actions[hidden] {
  display: none;
}
.start-guide-actions button {
  min-height: 44px;
}
.start-guide-target {
  outline: 3px solid var(--accent2);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent2) 18%, transparent);
}

@media (max-width: 560px) {
  .start-guide-card {
    padding: 16px;
  }
  .start-guide-message {
    font-size: 16px;
  }
  .start-guide-actions {
    flex-direction: column-reverse;
  }
  .start-guide-actions button {
    width: 100%;
  }
}

/* 낮은 가로 화면은 첫 화면에 갤러리까지 들어가야 한다 — 그림을 접고 카드를 눌러 담는다.
   설명이 줄어도 프레이밍 자체는 카메라가 켜진 뒤 실시간 안내가 다시 잡아 준다. */
@media (max-height: 500px) {
  .onboarding {
    margin-block: 10px;
    padding: 12px 14px;
  }
  .onboarding h2 {
    font-size: 20px;
  }
  .onboarding-copy > p:not(.onboarding-kicker) {
    margin-top: 6px;
    font-size: 13px;
  }
  .onboarding-figure {
    display: none;
  }
  .onboarding-start {
    grid-column: 1 / -1;
    margin-top: 8px;
    font-size: 12px;
  }
}

/* ---------- 카메라가 켜진 뒤의 실시간 프레이밍 안내 ---------- */

/* 무대 밖 알림 띠 자리 — 무대 안에 그리면 탭 공유 학습 프레임에 같이 찍히고,
   모바일에서는 무대 아래가 화면 밖으로 밀려 카메라 앞에 선 사람이 못 본다.
   2~3m 떨어져서 읽는 문구라 알림 띠보다 크게 세운다. */
.framing-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 10px calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
  border-bottom: 1px solid #22222e;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.framing-hint[hidden] {
  display: none;
}
.framing-hint-icon {
  flex: none;
  font-size: 17px;
  line-height: 1;
}
/* 색만으로 상태를 가르지 않는다 — 아이콘과 문구가 같은 말을 한다. */
.framing-hint[data-tone="info"] {
  background: color-mix(in srgb, var(--accent2) 7%, transparent);
  color: var(--accent2);
}
.framing-hint[data-tone="ok"] {
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  color: var(--ok);
}

@media (max-width: 560px) {
  .framing-hint {
    padding-right: calc(10px + env(safe-area-inset-right));
    padding-left: calc(10px + env(safe-area-inset-left));
    font-size: 14px;
  }
}

/* 춤추는 화면(몰입 레이아웃)에서 무대는 뷰포트를 덮는 fixed이고 상단바도 fixed다 —
   흐름에 둔 안내는 그 뒤로 깔려 아무에게도 안 보인다. 상단바 바로 아래에 띄운다.
   미디어 조건은 css/style.css의 몰입 무대 규칙과 같은 것이어야 한다. */
@media (max-width: 720px) and (orientation: portrait),
  (orientation: landscape) and (max-height: 560px),
  (min-width: 721px) and (max-width: 1024px) and (orientation: portrait) {
  body.mode-dance .framing-hint {
    position: fixed;
    top: var(--dance-topbar-h, calc(60px + env(safe-area-inset-top)));
    right: 0;
    left: 0;
    z-index: 11;
    border-bottom: 0;
    /* 영상 위에 뜨므로 반투명 틴트로는 못 읽는다. 색 대비는 tone이 계속 만든다. */
    background: color-mix(in srgb, var(--panel) 95%, transparent);
  }
  /* 탭 공유로 학습하는 동안은 무대 픽셀이 그대로 캡처된다 — 안내가 영상 속 사람 위에
     찍히면 안무 학습을 방해한다. 그동안만 접는다. */
  body.mode-dance.capture-safe .framing-hint {
    display: none;
  }
}

/* 정사각·태블릿 세로에서 상단바는 무대 왼쪽 세로 밴드다. 위쪽 오프셋은 0이 되지만
   그대로 두면 밴드가 더 위에 깔려(z-index 12) 안내 왼쪽이 가려진다. 밴드 폭만큼
   비켜서 무대 위에 정확히 건다.
   미디어 조건은 css/style.css의 세로 밴드 규칙과 같은 것이어야 한다. */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) and (min-aspect-ratio: 3 / 4) {
  body.mode-dance .framing-hint {
    top: calc(8px + env(safe-area-inset-top));
    right: calc((100vw - var(--frame-w)) / 2);
    left: calc((100vw - var(--frame-w)) / 2);
  }
}

/* 네이티브 전체화면은 #frameShell 하위만 top layer에 남고, 폴백도 shell이 z-index 100으로
   바깥 안내를 덮는다. 전체화면 동안 옮겨 온 띠를 캡처 대상 #frame 바깥에 겹쳐 둔다. */
.frame-shell.player-fullscreen-active > .framing-hint,
.frame-shell:fullscreen > .framing-hint,
.frame-shell:-webkit-full-screen > .framing-hint {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: auto;
  left: 50%;
  z-index: 10;
  width: min(100vw, 56.25vh);
  width: min(100dvw, 56.25dvh);
  transform: translateX(-50%);
}