/*  이 창만의 배치. 값(색 · 테 · 글꼴 · 머리줄 · 부품)은 studio.css 가 쥐고 여기는 자리만 정한다.
 *
 *  ⚠ 머리줄 · 길목 · 사람 칸은 여기 한 줄도 안 적는다 — 그 셋은 스튜디오와 «한 벌»이라
 *    studio.css 의 .con-head · .con-nav · .con-right · .con-who 가 통째로 진다(그 파일 머리).
 *    여기 다시 적으면 두 벌이 되고, 그날로 두 창의 머리줄이 갈린다.
 *  ⚠ 목록(강의 작업대)의 자리는 여기가 아니라 `src/styles/hall.css` 다 — 그 판은 창을 통째로 쓴다.
 */
/*  ⚠ 몸을 «가운데로 못 모은다» — 머리줄은 창을 꽉 채우므로(스튜디오의 .con-head 그대로),
     여기만 1180px 로 모으면 이름표는 왼쪽 끝 18px 에 서고 그 아래 글은 저만치 안쪽에서 시작한다.
     스튜디오의 판들도 몸이 창을 채운다 ⇒ 여기도 채운다(몸의 여백은 .con-body 20/22/28 하나가 진다).  */
/*  ★ 띠 — 관리자가 적은 공지 한 줄. 몸 «밖»에 선다(머리줄 바로 아래) — 몸 안에 두면 창을 통째로
     쓰는 판(hall)이 그만큼 밀려 아래가 잘린다. GameHub `globals.css · .band.amber` 와 한 값이다.  */
.notice {
  flex: none; margin: 0; padding: 8px 18px; text-align: center; font-size: 13.5px; font-weight: 700;
  background: #1d1810; border-bottom: 1px solid #4a3a1c; color: var(--amber);
}
.grow { flex: 1 1 auto; }

/* ── 강의 한 편 — 장 목록 ────────────────────────────────────────────── */
/*  ★ 장 한 줄은 «누르는 것»이다 — 재생기 길(`…/<NN>`)로 간다. 그 판은 딴 손이 짓고 여기는 길만 건다.  */
/*  ── [영상] — 스튜디오가 구운 mp4 를 그 말로 트는 칸(library-v1 §2-d) ──
    ★ 키를 «창»이 정한다 — **키가 먼저이고 폭이 따라온다**(GameHub `globals.css · .play-frame` 그대로) —
      폭을 먼저 주면 판이 넓은 창에서 그 상자가 16:9 보다 납작해져 영상 양옆에 검은 띠가 깔린다(실측 1280 창).
    ⚠ 검은 바탕을 깔아 둔다 — 첫 프레임이 서기 «전»에 판 색이 비쳐 보이면 그 칸이 빈 상자로 읽힌다.  */
.lec-vid-wrap { margin: 0 0 16px; }
.lec-vid-wrap .con-h.sub { margin-bottom: 8px; }
.lec-vid { display: grid; gap: 8px; justify-items: start; }
.lec-vid-box {
  display: block; height: min(60vh, 640px); width: auto; max-width: 100%; aspect-ratio: 16 / 9;
  background: #000; border: 1px solid var(--line); border-radius: 9px;
}
.lec-vid-pick { flex-wrap: wrap; }

.chaps { display: grid; gap: 6px; }
/*  ★★★★★ 「어디까지 봤나」를 **낱말이 아니라 색으로** 말한다(2026-09-10 지시 — 「[봤다] 같은 멍청한
    글보단 초록색으로 카드를 표시하는 등」). 줄의 «왼쪽 띠»가 그 답이고, 낱말은 곁말로만 산다.
    ★★★ 색은 새로 안 짓는다 — 진도의 초록(`--green`)은 플레이리스트의 그 초록이다(§4-d ③).
    ★★ 띠는 «자리를 안 먹는다» — 왼쪽 여백 안에 떠서 서므로 줄의 격자가 한 픽셀도 안 밀린다.  */
.chap {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 96px; gap: 12px; align-items: center;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  color: inherit;
  transition: background .12s, border-color .12s;
}
.chap::before {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
  border-radius: 9px 0 0 9px; background: transparent;
}
/*  보는 중 — 흐린 초록(「손은 댔다」) · 다 봤다 — 또렷한 초록 ＋ 테와 번호가 함께 든다  */
.chap.seen::before { background: color-mix(in srgb, var(--green) 40%, transparent); }
.chap.done::before { background: var(--green); }
.chap.done { border-color: #2a5d3b; background: #0f1a14; }
.chap.done:hover { border-color: #3f8a5b; background: #12211a; }
.chap.done .nn { color: var(--green); }
.chap:hover { background: #141418; border-color: var(--line2); }
.chap .nn { color: var(--dim); font-variant-numeric: tabular-nums; font-weight: 700; }
.chap .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chap .secs { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 13px; }
/*  ✓ 하나 — 「봤다」 세 글자가 섰던 자리다(그림 하나가 그 말을 다 한다)  */
.chap .done { color: var(--green); font-size: 15px; line-height: 1; text-align: right; }
/*  ★ 진도의 초록은 플레이리스트의 그 초록이다(--green) — 새 뜻의 색을 짓지 않는다.  */
.chap .bar { position: relative; height: 4px; border-radius: 999px; background: #1e1e23; overflow: hidden; }
.chap .bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); border-radius: 999px; }

/* ── 진도의 줄 — 막대 하나 ＋ 수 하나 ──────────────────────────────────── */
/*  ★ 초록은 플레이리스트의 그 초록이다(--green) — 새 뜻의 색을 짓지 않는다.
    ⚠ 여기 산다 — 작업대(hall.css)와 [내 자리] 와 [강의 판] 셋이 같은 막대를 든다.  */
.prog { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.prog .bar { position: relative; flex: 1 1 auto; min-width: 56px; height: 5px; border-radius: 999px; background: #1e1e23; overflow: hidden; }
.prog .bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); border-radius: 999px; }

/* ── 값의 표 ──────────────────────────────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
/*  ★ 카드의 값(바탕 · 테 · 여백 14)은 studio.css 의 .card 하나다 — 여기는 아래 틈과 머리글뿐이다.  */
.card { margin-bottom: 14px; }
.card > h2 { margin: 0 0 10px; font-size: 15.5px; letter-spacing: -.015em; }
/*  ⚠ 이 창의 .stat 은 «줄»이다(수 여럿이 나란히) — GameHub 의 .stat 은 «카드 하나»라 뜻이 다르다.
     [관리] 의 [한눈에] 가 이 꼴을 딛으므로 이름을 안 바꾼다. 수의 크기(24/800)만 그쪽과 맞췄다.  */
.stat { display: flex; gap: 22px; }
.stat b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--dim); font-size: 12.5px; }
.inline { display: inline-flex; gap: 6px; align-items: center; }