/* 시퀀스 렌더링 화면 — ContentsDoc/06 구현
   구간을 길게 잡고 그 안에서 화면을 고정한다. 스크롤은 그대로 흐르되
   보이는 그림만 프레임 단위로 바뀐다. */

.gl-seq{
  position: relative;
  /* 실제 높이는 JS 가 프레임 수에 맞춰 넣는다. 여기 값은 JS 가 안 돌 때의 몫이다. */
  height: auto;
}

.gl-seq-stage{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  /* 🔴 «한 선» 에 선다 (2026-09-21 소유자 결정 — 용어정리집 1-8, 예외 없음).
     종전에는 화면 가운데에 섰다. 바탕띠는 그대로 창 끝까지 두고, 안쪽 여백만
     엔진 기둥의 선과 같게 잡는다 — 넓은 화면은 (폭 − 1180)/2 + 32, 그 아래는 32.
     퍼센트 여백은 무대 자신의 폭(= 창 폭)을 기준으로 계산된다. */
  justify-content: flex-start;
  padding-inline: max(32px, calc((100% - var(--container, 1180px)) / 2 + 32px));
  overflow: hidden;
  background: var(--chip);
}

.gl-seq-canvas,
.gl-seq-poster{
  max-width: 100%;
  max-height: 100%;
  width: 100%;          /* 기둥 폭을 채운다 — 높이가 모자라면 max-height 가 줄인다 */
  height: auto;
  object-fit: contain;
  display: block;
}

/* 정지 이미지로 물러난 경우 — 화면을 붙잡지 않는다 */
.gl-seq-static .gl-seq-stage{
  position: static;
  height: auto;
  padding: 40px 0;
}

/* 프레임 위에 얹는 문구 */
.gl-seq-caption{
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translate(-50%, 12px);
  max-width: min(680px, 86vw);
  text-align: center;
  color: var(--ondark-fg, #fff);
  font-size: clamp(16px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;      /* 아래 요소의 클릭을 막지 않는다 */
}
.gl-seq-caption.on{ opacity: 1; transform: translate(-50%, 0); }

/* 정지 이미지일 때는 자막을 겹치지 않고 아래에 차례로 둔다 */
.gl-seq-static .gl-seq-caption{
  position: static;
  transform: none;
  opacity: 1;
  color: var(--fg);
  text-shadow: none;
  margin: 14px auto 0;
  font-size: 16px;
}

/* 내려받는 동안 보여 주는 가는 진행줄 */
.gl-seq-loading{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
}
.gl-seq-progress{
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent, #ff5a1f);
  transition: width 0.2s linear;
}
.gl-seq-ready .gl-seq-loading{ opacity: 0; transition: opacity 0.4s ease; }

@media (prefers-reduced-motion: reduce){
  /* 움직임을 원하지 않는 분에게는 대표 그림 한 장만 */
  .gl-seq{ height: auto !important; }
  .gl-seq-stage{ position: static; height: auto; padding: 40px 0; }
  .gl-seq-caption{ position: static; transform: none; opacity: 1; }
}

@media (max-width: 600px){
  .gl-seq-stage{ padding-inline: 20px; }
}

/* ── 시퀀스 재생 «영상 스크럽» (vscrub · 문서 41 구현 순서 46 · 2026-10-29) ─────────────────────────────
   렌더러가 내는 것은 «정지 그림 + 자막 나열» 이다(gl-vs-on 없음 — 아래 첫 묶음). 스크립트(gl-vscrub.js)가 gl-vs-on 을 단 뒤에만 서고(sticky · 높이 = 화면의 --gl-vs-len %)
   영상이 보인다(gl-vs-ready — 메타데이터가 온 뒤 · 그 전에는 정지 그림이 같은 자리에 깔려 있어 빈 화면이 없다). 자막은 진행 %(data-at)에서 차례로 — 지금 것(on)은 아래서 올라오고 지나간 것(was)은 위로 빠진다.
   스크립트 없음 · «움직임 줄이기» · 데이터 절약 · 영상 실패(gl-vs-static) 는 모두 첫 묶음 그대로다. 움직이는 것은 영상 프레임 · 자막 opacity/transform · 막대 scaleX 뿐. 색은 역할 토큰만(영상 위 검정 바탕 · 흰 글자는 사진 자리라 그대로 둔다). */
.gl-seq.gl-t-vscrub{ height: auto; }
.gl-t-vscrub .gl-vs-stage{ position: static; height: auto; display: block; padding: 40px 0; }
.gl-t-vscrub .gl-vs-poster{ max-height: none; }
.gl-t-vscrub .gl-vs-video{ display: none; }
.gl-t-vscrub .gl-vs-caption{ position: static; transform: none; opacity: 1; color: var(--fg); text-shadow: none; margin: 14px auto 0; font-size: 16px; }
.gl-t-vscrub .gl-vs-bar{ display: none; }
/* 서 있는 동안 — 스크립트가 켠 뒤 */
.gl-seq.gl-vs-on{ height: calc(var(--gl-vs-len, 300) * 1vh); }
/* 영상 자리 — 검정 바탕 · 흰 글자는 사진 · 영상 위의 것이라 일부러 그대로 둔다(어두운 화면에서도 같다) */
.gl-vs-on .gl-vs-stage{ position: sticky; top: 0; height: 100vh; padding: 0; display: block; overflow: hidden; background: #000; }
.gl-vs-on .gl-vs-poster{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl-vs-on .gl-vs-video{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.gl-vs-on.gl-vs-ready .gl-vs-video{ opacity: 1; }
.gl-vs-on .gl-vs-captions{ position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  /* 글자가 영상 위에 읽히게 아래쪽만 어둡게 — 영상 위 그림자라 그대로 둔다 */
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); }
.gl-vs-on .gl-vs-caption{ position: absolute; left: 50%; bottom: 14vh; transform: translate(-50%, 28px); max-width: min(820px, 86vw); margin: 0; text-align: center;
  color: var(--ondark-fg, #fff); font-size: clamp(22px, 3.4vw, 46px); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.gl-vs-on .gl-vs-caption.on{ opacity: 1; transform: translate(-50%, 0); }
.gl-vs-on .gl-vs-caption.was{ opacity: 0; transform: translate(-50%, -28px); }
.gl-vs-on .gl-vs-bar{ display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .18); }
.gl-vs-on .gl-vs-bar i{ display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--gl-vs-p, 0)); }
/* 휴대폰 — 구역을 3/4 로 줄여 «스크롤이 안 먹는» 느낌을 덜고, 자막은 아래 여백을 좁힌다 */
@media (max-width: 767px){
  .gl-seq.gl-vs-on{ height: calc(var(--gl-vs-len, 300) * 0.75vh); }
  .gl-vs-on .gl-vs-caption{ bottom: 10vh; max-width: 90vw; }
}
@media (prefers-reduced-motion: reduce){
  .gl-seq.gl-vs-on{ height: auto !important; }
  .gl-vs-on .gl-vs-stage{ position: static; height: auto; padding: 40px 0; background: none; }
  .gl-vs-on .gl-vs-poster{ position: static; height: auto; }
  .gl-vs-on .gl-vs-video, .gl-vs-on .gl-vs-bar{ display: none; }
  .gl-vs-on .gl-vs-captions{ position: static; height: auto; background: none; }
  .gl-vs-on .gl-vs-caption{ position: static; transform: none !important; opacity: 1 !important; color: var(--fg); text-shadow: none; margin: 14px auto 0; font-size: 16px; }
}