/*  재생기의 «자리» — 판의 얼굴(테 · 머리줄 · 파란 테)은 `pane.css` 한 벌이 지고 여기는 자리뿐이다.
 *  본은 `RookissGameHub/src/styles/gallery.css · .lab`(＝ 스튜디오 [아트 랩] `console.css · .art`)이고
 *  값도 그 파일의 것을 옮겼다: 여백 8 · 선 5 · 판 margin 1 · 잡아 끄는 값 넷(--wl · --wr · --hb · --fw).
 *  ⚠ 층(@layer) 밖이다 — 이 파일이 `studio.css` 의 밑값을 이겨야 그 값이 선다.
 *  ⚠ 자리 다섯 = 좌 [장] · 중앙 [뷰포트] · 우 [자막 ＋ 질문/피드백](세로 통째) · 하 [칸] 게이지.
 *    [자막] 을 행 1 로만 두면 그 아래 서랍이 접힌 자리 밖으로 나간다 — 그래서 오른쪽은 통째다.
 */

/* ── 이 판은 창을 통째로 쓴다 — 스튜디오의 `.con-body.flat` 그대로(안 구르고 · 여백 0 · 발은 접는다) ── */
main.con-body:has(.play) {
  padding: 0;
  overflow: hidden;
  display: flex;
  min-height: 0;
}
body:has(.play) .con-foot {
  display: none;
}

.play {
  --wl: 260px;
  --wr: 340px;
  --hb: 150px;
  --fw: 210px;
  --hhead: 42px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--wl) 5px minmax(0, 1fr) 5px var(--wr);
  grid-template-rows: minmax(0, 1fr) 5px var(--hb);
  gap: 0;
  padding: 8px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}
.play > .pane {
  margin: 1px;
}
.play-chaps {
  grid-area: 1 / 1 / 2 / 2;
}
.play .sp-l {
  grid-area: 1 / 2 / 2 / 3;
}
.play-view {
  grid-area: 1 / 3 / 2 / 4;
}
.play .sp-r {
  grid-area: 1 / 4 / 4 / 5;
}
.play-ask {
  grid-area: 1 / 5 / 4 / 6;
}
.play .sp-b {
  grid-area: 2 / 1 / 3 / 4;
}
.play-beats {
  grid-area: 3 / 1 / 4 / 4;
}

/* ── 잡아 끄는 선 — 갤러리의 그 값 그대로(5px · 잡으면 파랗게) ── */
.play .sp-l,
.play .sp-r,
.play .sp-b {
  background: transparent;
}
.play .sp-l,
.play .sp-r {
  cursor: col-resize;
}
.play .sp-b {
  cursor: row-resize;
}
.play .sp-l:hover,
.play .sp-r:hover,
.play .sp-b:hover,
.play .sp-l.drag,
.play .sp-r.drag,
.play .sp-b.drag {
  background: var(--blue);
}
/*  ⚠ 끄는 동안 프레임이 포인터를 가로챈다 — 커서가 그 위로 들어가는 순간 선이 얼어붙는다.  */
.play.drag iframe {
  pointer-events: none;
}

/* ── 머리줄의 켜진 칸 · 고르개 ── */
.play .pane-head .hgrp button.tab.on {
  background: #1b3550;
  color: #cfe6ff;
}
/*  ⏮ ▶ ❚❚ ⏭ — 스튜디오 `styles.css · .tl-btns .t` 그대로다(값을 새로 안 짓는다).
    ★ 켜진 얼굴이 «지금 어느 쪽인가»를 말한다 — 초록이 곧 그 답이다(저쪽의 그 규율).  */
.play .pane-head .tl-btns {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  white-space: nowrap;
}
.play .pane-head .tl-btns .t {
  min-width: 34px;
  min-height: var(--hbtn);
  padding: 2px 9px;
  font-size: 16.5px;
  line-height: 1.5;
  text-align: center;
}
.play .pane-head .tl-btns .t.on {
  background: #1e3a2c;
  border-color: #2e6b4d;
  color: var(--green);
}
/*  [자막] 은 «켠 채로 두는» 물건이라 그 상태가 보여야 한다 — 켜지면 «강의 색»(분홍)으로 든다.
    그 분홍이 이 창에서 늘 「녹음한 강의」를 가리키고, 자막에 실리는 글이 바로 그것이다.
    ⚠ 곁의 `.tab.on`(파랑)보다 뒤에 서야 이 색이 선다 — 그 규칙과 무게가 같다.  */
.play .pane-head .sub-t {
  display: grid;
  place-items: center;
  width: 32px;
  height: 27px;
  padding: 0;
  color: var(--dim2);
}
.play .pane-head .sub-t.on {
  color: var(--lec);
  border-color: #6b2f4d;
  background: #241520;
}
.play .pl-sel {
  flex: none;
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 13px;
  background: #131316;
  border: 1px solid var(--line2);
}

/* ── 좌 [장] ── */
.pl-ch {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  grid-template-areas: 'nn ttl num tag' 'bar bar bar bar';
  align-items: center;
  gap: 3px 8px;
  width: 100%;
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.pl-ch:hover {
  background: #17171c;
}
.pl-ch.on {
  background: #12202e;
}
.pl-ch .nn {
  grid-area: nn;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.pl-ch .ttl {
  grid-area: ttl;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.pl-ch .num {
  grid-area: num;
  color: var(--dim2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
/*  진도의 초록 — 플레이리스트의 그 초록이다(§4-d ③).  */
.pl-ch .bar {
  grid-area: bar;
  height: 3px;
  border-radius: 2px;
  background: #1e1e23;
  overflow: hidden;
}
.pl-ch .bar i {
  display: block;
  height: 100%;
  background: var(--green);
}
/*  ✓ 하나 — 「봤다」 딱지가 섰던 자리다(2026-09-10 지시 「[봤다] 같은 멍청한 글보단 초록색으로」).
    왼쪽 띠가 「다 봤다」를 말하고 이 그림은 그 줄 끝에서 한 번 더 짚는다.  */
.pl-ch .ck {
  grid-area: tag;
  color: var(--green);
  font-size: 14px;
  line-height: 1;
  text-align: right;
}
.pl-ch.done::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green);
}
.pl-ch.done .nn {
  color: var(--green);
}

/* ── 중앙 [뷰포트] ── */
.play .pl-stage {
  position: relative;
  overflow: hidden;
  background: #08080a;
  display: flex;
}
.pl-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0b0f16;
}
.pl-wait {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 12.5px;
}

/* ── 자막 — 스튜디오 `styles.css` 의 `.stage-sub`·`.bub`·`.bub-chip` 그대로 ──
   ★★★★★ 굽힐 그 화면 «위»에 얹는 강의 대본이다. 이 창의 학습자가 보는 그림이 곧 그 강의의 그림이라야
     하므로, 값을 한 자도 새로 안 짓고 저쪽의 것을 옮긴다(갈리면 두 창의 자막이 다른 자리에 앉는다).
   ★★★★ 글자 크기는 «무대 키»로 잰다 — 창이 `subSize` 로 재서 px 로 꽂는다(`cast.ts`).
   ★★★ 넘치면 «줄인다»가 아니라 그 자리에서 접는다 — 자막은 잘리면 안 되는 글이라 위로 자란다.
   ★★ 손이 안 닿는다 — 씬을 끄는 손(카메라)을 자막이 먹으면 그 자리에서 구도를 못 잡는다.
   ⚠ 바닥에서 뜨는 몫(4.5%)의 정본은 스튜디오 `Core/Cues.cs · SubLowWide` 다 — 묶음이 그 수를
     안 싣는다(`manifest` 에는 `tail`·`min` 뿐) ⇒ 여기 적어 두고, 저쪽이 갈리면 함께 간다. */
.stage-sub {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: var(--sub-low, 4.5%);
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.bub {
  position: relative;
  margin: 12px 2px 5px;
  background: #f7f3e9;
  border: 2px solid var(--bub, #a9a196);
  border-radius: 11px;
  padding: 9px 11px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bub-chip {
  position: absolute;
  top: -9px;
  left: 11px;
  background: var(--bub, #a9a196);
  color: #f7f3e9;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 16px;
  padding: 0 7px;
  border-radius: 5px;
}
.stage-sub .said-bub {
  margin: 0;
  min-height: 0;
  max-width: 100%;
  padding: 0.45em 0.9em 0.4em;
  border-width: 2px;
  box-shadow: 0 0.3em 1.2em rgba(0, 0, 0, 0.45);
}
.stage-sub .said {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
  font-weight: 700;
  color: #232833;
  text-align: center;
  white-space: pre-wrap;
  /*  ★ 끊는 자리는 «띄어쓰기»이고, 두 줄이면 길이를 맞춘다  */
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}
/*  ★ 칩은 자막에서 «작게» 선다 — 그 이름표가 본문만큼 커지면 자막이 아니라 딱지가 된다  */
.stage-sub .bub-chip {
  top: -0.55em;
  left: 0.7em;
  font-size: 0.52em;
  line-height: 1.55em;
  padding: 0 0.6em;
}

/* ── 우 [질문 · 피드백] ── */
.pl-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pl-ask {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pl-tabs {
  flex: none;
  display: flex;
  gap: 5px;
  padding: 8px 10px 0;
}
.pl-tabs button {
  padding: 4px 12px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--dim2);
  font-weight: 600;
}
.pl-tabs button.on {
  background: #1c1c22;
  border-color: var(--line2);
  color: var(--ink);
}
.pl-form {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px 11px;
  border-bottom: 1px solid var(--line);
}
.pl-form textarea {
  resize: none;
  font-size: 13.5px;
}
.pl-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pl-row .grow {
  flex: 1 1 auto;
}
.pl-ok {
  margin: 0;
  color: var(--green);
}
.pl-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pl-thread {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  background: #141418;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.pl-thread .tx {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

/* ── 하 [칸] — 플레이 게이지. 스튜디오 `styles.css · .timeline` 그대로다 ──
   ★★★★★ 눈금 · 칸 · 재생헤드가 **한 자(px/초)** 를 함께 본다(`cast.ts · ppsOf`) — 그 한 줄이 이 게이지를
     «시간의 자»로 만든다. 폭이 곧 시간이라, 여기서 자리를 한 픽셀 얹으면 그만큼 시간이 거짓이 된다.
   ★★ 값은 저쪽의 것을 옮겼다 — 새로 안 짓는다(같은 게이지가 두 창에서 다른 꼴로 서면 안 된다). */
.play .play-beats > .pane-body {
  padding: 0;
  overflow: hidden;
}
.timeline {
  padding: 5px 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/*  금은 눈금자 «안»에서 떠서 서고 칸은 그 아래 딴 줄이다 — 칸의 자리를 한 픽셀도 안 먹는다.  */
.tl-ruler {
  position: relative;
  height: 12px;
  color: #4a4a54;
  font-size: 11px;
  flex: none;
}
.tl-ruler span {
  position: absolute;
  top: 0;
  line-height: 12px;
  transform: translateX(-50%);
}
.tl-ruler span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 1px;
  height: 4px;
  background: currentColor;
}
.tl-ruler span:first-child {
  transform: none;
}
.tl-ruler span:first-child::after {
  left: 0;
}
/*  자가 판보다 길면 굴린다 — 눈금과 칸이 «같은 상자»(`.tl-inner`) 안이라야 함께 굴러간다.  */
.tl-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.tl-inner {
  position: relative;
  height: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
}
/*  ★★ 칸 사이에 «틈»을 안 둔다 — 1px 씩 밀리면 스무 칸에서 눈금과 십수 px 어긋난다.
    가르는 일은 테두리가 이미 한다(맞붙은 두 테가 2px 선으로 읽힌다).
    ★★ `flex: none` — 폭은 «자»가 정한 값이다. 안 박아 두면 브라우저가 넘침을 칸에서 도로 깎는다.  */
.tl-track {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 26px;
  margin-top: 2px;
}
.tl-cue {
  position: relative;
  flex: none;
  padding: 0;
  border-radius: 4px;
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.34);
  overflow: hidden;
  cursor: pointer;
}
.tl-cue:hover {
  border-color: rgba(255, 255, 255, 0.62);
  background: #16161a;
}
.tl-cue.sel {
  border-color: var(--accent);
}
/*  ⚠ 테의 «굵기»를 안 늘린다 — 1px 을 2px 로 늘리면 칸마다 그만큼 밀려 시간이 거짓이 된다.
    ⇒ 안쪽 그림자로 두른다(자리를 한 픽셀도 안 먹는다).  */
.tl-cue.live {
  box-shadow: inset 0 0 0 1px var(--green);
}
/*  칸 번호는 흰 글자다 — 어두운 그림자를 둘러 어느 바탕에서도 같은 흰색으로 읽힌다.  */
.tl-cue .lab {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: #fff;
  font-weight: 700;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 5px rgba(0, 0, 0, 0.7);
}
/*  재생헤드 — 칸 사이만 뛰지 않고 «칸 안»에서도 흐른다(`Gauge` 의 매 프레임이 민다).
    ★★★ `transition` 을 «안» 건다 — 자리를 직접 미는데 전이까지 걸면 그림이 늘 뒤처지고,
      헤드리스 프로브에선 전이가 시작값에 얼어붙어 「안 움직인다」로 잰다.
    ★★ 흐르는 동안만 머리에 점을 얹는다 — 멈춘 헤드와 흐르는 헤드가 같은 그림이면 안 된다.  */
.tl-head {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 2px;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.tl-head.run::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
/*  발치에 남는 것은 «시각»뿐이다 — 색 풀이(힌트)는 저쪽에서 통째로 걷혔다.  */
.tl-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--dim2);
  font-size: 12px;
  flex: none;
}
.tl-legend .grow {
  flex: 1 1 auto;
}
.tl-legend .now {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tl-legend b {
  color: #fff;
  font-variant-numeric: tabular-nums;
}