/*  강의 작업대의 옷 — 형제 제품 `RookissGameHub/src/styles/gallery.css · .lab` 과 «한 자»다
 *  (그 파일의 정본은 스튜디오 [게임 랩] `wwwroot/console.css · .art` 이고 값도 그 둘의 것을 옮겼다).
 *  값 넷은 그쪽 그대로다 — 여백 8 · 선 5 · 판 margin 1 · `--wl` 210 · `--wr` 340 · `--hb` 296.
 *  ⚠ `--wl` 만 갈렸다: 저쪽 갤러리는 300(썸네일 트리)이고 이 창의 왼쪽은 «장르 레일 결»이라 게임란의 210 이다.
 *  ⚠ 층(@layer) 밖이다 — 이 파일이 studio.css 의 `.pane` 밑값을 이겨야 판의 그 값이 선다.
 *  ⚠ 판의 «얼굴»(테 · 머리줄 · 파란 테)은 `src/styles/pane.css` 한 벌이 진다 — 여기는 «자리»뿐이다.
 *  드는 자리는 `src/components/LecHall.tsx` 하나다.  */

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

/*  뼈대 — 좌 [프로젝트](세로 통째) · 중앙 [뷰포트] · 우 [상세 정보] · 하 [전체 강의 | 내 진도].
    ⚠ [내 진도] 는 «든 사람»에게만 선다 — 안 서면 [상세 정보] 가 그 자리까지 내려간다(아래 그 줄).
    ⚠ 아래 둘([전체 강의]·[내 진도])은 «격자의 한 줄»(행 3)이라 키가 하나다 — 가로 선 둘(sp-b · sp-c)이
      같은 `--hb` 를 잡아 둘을 함께 민다. 그 사이에 새 가로 선을 두면 키가 둘이 된다.  */
.lab {
  --wl: 210px;
  --wr: 340px;
  --hb: 296px;
  --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);
  /*  ★ 맨 위 한 줄은 «고르는 줄»이다(검색 · 셈 · [다시 읽기]) — GameHub 갤러리의 그 자리 그대로
      (`gallery.css · .lab` 의 `auto minmax(0,1fr) 5px var(--hb)`). 판이 아니라 줄이라 `auto` 다.  */
  grid-template-rows: auto minmax(0, 1fr) 5px var(--hb);
  gap: 0;
  padding: 8px;
  background: var(--bg);
}
.lab > .pane {
  margin: 1px;
}
.lab-top {
  grid-area: 1 / 1 / 2 / 6;
}
.lab-rail {
  grid-area: 2 / 1 / 5 / 2;
}
.lab .sp-l {
  grid-area: 2 / 2 / 5 / 3;
}
/*  ★ 무대는 «오른쪽 끝까지» 한 판이다(2026-09-10 지시 「지금 도는 화면 하나의 화면인 것처럼, 뷰포트/상세정보 통합」) —
    GameHub 게임란의 `.hall-stage`(1/3/2/6)와 같은 자리다. 화면과 값이 한 테 안에 서고 그 사이에 선을 안 둔다.  */
.lab-stage {
  grid-area: 2 / 3 / 3 / 6;
}
.lab .sp-b {
  grid-area: 3 / 3 / 4 / 6;
}
.lab-list {
  grid-area: 4 / 3 / 5 / 4;
}
.lab .sp-c {
  grid-area: 4 / 4 / 5 / 5;
}
.lab-mine {
  grid-area: 4 / 5 / 5 / 6;
}
/*  ⚠ [내 진도] 는 든 사람에게만 선다 — 안 서면 [전체 강의] 가 그 자리까지 편다(게임란의 `:not(:has(.hall-up))` 그 줄).  */
.lab:not(:has(.lab-mine)) .lab-list {
  grid-area: 4 / 3 / 5 / 6;
}
.lab:not(:has(.lab-mine)) .sp-c {
  display: none;
}

/* ── 위: 고르는 줄 — GameHub `gallery.css · .lab-top` 의 값 그대로(합치는 날 한 벌이 되게) ── */
.lab-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 3px 8px;
}
/*  ⚠ 이름을 «한 겹 좁혀» 적는다(`.lab-top .lab-q`) — 이 창의 `studio.css` 에는
    `input[type=search] { width: 100% }` 가 있고 그 자(0,1,1)가 홑클래스(0,1,0)보다 세서,
    `.lab-q` 만으로는 320px 이 조용히 밀려 글칸이 줄을 통째로 먹는다(실측 1920 창에서 1770px).
    GameHub 에는 그 밑값이 없어(`.input` 클래스로 적는다) 저쪽 파일은 홑클래스 그대로다.  */
.lab-top .lab-q {
  width: 320px;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 11px;
  font-size: 14px;
  color: var(--ink);
}
.lab-top .lab-q:focus {
  outline: none;
  border-color: var(--accent);
}
.lab-top .lab-q::placeholder {
  color: var(--dim2);
}
.lab-stat {
  font-size: 12.5px;
  color: var(--dim2);
  white-space: nowrap;
}
.lab-top .tab {
  flex: none;
  border: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 9px;
  background: #202027;
  cursor: pointer;
  white-space: nowrap;
}
.lab-top .tab:hover {
  background: #26262d;
}

/* ── 잡아 끄는 선 — styles.css · .split ── */
.lab .split {
  margin: 0;
  background: transparent;
}
.lab .split.v {
  cursor: col-resize;
}
.lab .split.h {
  cursor: row-resize;
}
.lab .split:hover,
.lab .split.drag {
  background: var(--accent);
  opacity: 0.5;
}
.lab.drag {
  cursor: grabbing;
  user-select: none;
}

/* ── 좌: 프로젝트 레일 — 게임란의 장르 레일 그대로(globals.css · .rail-i) ── */
.lab-rail .pane-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}
.rail-i {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--dim);
  text-align: left;
  cursor: pointer;
}
.rail-i:hover {
  background: #1b1b20;
  color: var(--ink);
}
.rail-i.on {
  background: #1a1a1e;
  border-color: var(--line2);
  color: var(--ink);
}
.rail-i > i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
}
.rail-i .nm {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.rail-i .n {
  font-size: 12.5px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
/*  폴더(road) 는 프로젝트 아래 한 칸 들어간다 — 층이 둘이라는 것을 자리로 말한다.  */
.rail-i.sub {
  margin-left: 13px;
  padding: 5px 10px;
  font-size: 13.5px;
}
.rail-i.sub .nm {
  font-weight: 500;
}

/* ── 위: 지금 보는 강의 — 화면과 값이 «한 판»이다(GameHub `globals.css · .stage-body` 의 그 값 그대로) ── */
/*  ★ TV 는 판의 «가운데»에 선다 — 판이 남은 키를 다 받아도 화면은 아래 그 값을 지키므로,
    안 그러면 판 밑에 빈 띠가 한 뼘 깔린다. ⚠ `safe` 가 함께 서야 좁은 창에서 «위»가 안 잘린다.  */
.lab-stage .pane-body {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding: 12px;
}
/*  ★ 키가 먼저 서고 폭이 따라온다(창이 넓어져도 화면이 안 커진다 · twitch 결).  */
.stage-body {
  display: flex;
  gap: 14px;
  height: clamp(330px, min(42vh, 26vw), 420px);
}
/*  ★ 화면은 «TV»다 — 고른 것이 없어도 이 상자는 그대로 서고(`.screen.off`) 그 안에 값 한 줄만 선다.  */
.screen {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  background: #060607;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.screen.off {
  background: repeating-linear-gradient(115deg, #0a0a0c 0 12px, #08080a 12px 24px);
}
.screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screen-note {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 18px;
  text-align: center;
  color: var(--dim2);
  font-size: 13px;
}
/*  ★ 양옆의 손잡이 — 화면 «위»에 뜬다(둘 이상일 때만 선다 · GameHub `.screen-arw` 의 값 그대로).  */
.screen-arw {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: rgba(6, 6, 7, 0.6);
  color: var(--ink);
  cursor: pointer;
  opacity: 0.72;
  transition:
    opacity 0.12s,
    background 0.12s;
}
.screen-arw:hover {
  opacity: 1;
  background: rgba(6, 6, 7, 0.85);
}
.screen-arw.prev {
  left: 10px;
}
.screen-arw.next {
  right: 10px;
}
/*  꺾쇠는 글자가 아니라 «선 둘»이다 — 말마다 안 갈리고 글꼴을 안 탄다.  */
.screen-arw i {
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.screen-arw.prev i {
  transform: rotate(45deg);
  margin-left: 3px;
}
.screen-arw.next i {
  transform: rotate(-135deg);
  margin-right: 3px;
}
/*  ★ 옆의 값 — 표지를 «흐려서» 뒤에 깐다(GameHub 의 그 판).
    ⚠ `isolation` 이 있어야 그 표지가 보인다 — 없으면 z-index:-1 인 ::before 가 판의 불투명 바탕 아래로 깔린다.  */
.stage-side {
  position: relative;
  isolation: isolate;
  flex: 0 0 clamp(260px, 25%, 360px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow: hidden auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.stage-side::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--art) center / cover no-repeat;
  filter: blur(26px) saturate(0.7);
  opacity: 0.18;
}
.stage-side .a-h {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
}
.stage-side .a-sub {
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.stage-side .a-sum {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}

/*  ⚠ 진도의 줄(.prog)은 이 파일이 아니라 `app.css` 가 진다 — [내 자리] 도 그것을 든다(이 파일은
    작업대의 창에만 실리므로 여기 두면 그 판에서 막대가 통째로 안 선다).  */

/*  ⚠ [상세 정보] 판은 2026-09-10 에 무대 안으로 들어갔다 — 그 판의 옷(`.art-insp`·`.a-sect`·`.a-lbl`)은
    부르는 자리가 0 이 되어 함께 걷었다. 남은 둘(`.a-kv` · `.a-none`)은 무대 옆과 [내 진도] 가 든다.  */
.a-kv {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 4px 9px;
  margin: 0;
  font-size: 12.5px;
}
.a-kv dt {
  font-size: 11.5px;
  color: var(--dim2);
}
.a-kv dd {
  margin: 0;
  color: var(--dim);
  word-break: break-word;
  min-width: 0;
}
.a-kv dd b {
  color: var(--ink);
  font-weight: 500;
}
.a-none {
  padding: 26px 14px;
  color: var(--dim2);
  font-size: 13px;
}

/* ── 하 · 왼쪽: 전체 강의 — 게임란의 카드 격자(globals.css · .hall-card) ── */
.lab-list .pane-body,
.lab-mine .pane-body {
  padding: 12px;
}
.hall-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 14px;
  align-content: start;
}
.hall-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #17171b, #131316);
  border: 1px solid var(--line2);
  border-radius: 11px;
  overflow: hidden;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    transform 0.12s ease;
}
.hall-card:hover {
  border-color: #6b52a3;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.7);
}
/*  ★★★★★ 「다 본 강의」는 **초록 테**다(2026-09-10 지시 — 「[봤다] 같은 멍청한 글보단 초록색으로 카드를
    표시하는 등」). 낱말이 아니라 색이라 카드를 스치는 눈에도 걸린다.
    ★★ 바탕도 한 톤 든다 — 테만으로는 표지가 밝은 카드에서 그 한 픽셀이 안 읽힌다.  */
.hall-card.done {
  border-color: #2a5d3b;
  background: linear-gradient(180deg, #141c17, #101613);
}
.hall-card.done:hover {
  border-color: #3f8a5b;
}
/*  ⚠ **고른 카드가 이긴다** — 지금 무엇을 보고 있나가 먼저이고 다 봤나는 그 다음이다.
    자리가 «뒤»라야 그 초록 테를 덮고(무게가 같다) · `:hover` 짝을 함께 적어야 손이 올라간 자리에서도
    안 뒤집힌다(`.hall-card.done:hover` 는 0,3,0 이라 홑 `.on` 을 이긴다).  */
.hall-card.on,
.hall-card.on:hover {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/*  표지의 ✓ — 「봤다」 딱지가 섰던 그 말이고 자리는 오른쪽 위다(왼쪽 위는 코드·열람의 몫).  */
.hall-card .ck {
  position: absolute;
  right: 7px;
  top: 7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(6, 6, 7, 0.78);
  border: 1px solid #2a5d3b;
  color: var(--green);
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}
/*  카드 바닥의 진도 띠 — 「어디까지 왔나」를 3px 로 말한다(손을 댄 카드에만 선다).  */
.hall-card .fill {
  display: block;
  height: 3px;
  background: #1e1e23;
}
.hall-card .fill > i {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 0 999px 999px 0;
}
.hall-card .shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #060607;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hall-card .shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hall-card .shot .none {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10px;
  text-align: center;
  color: var(--dim);
  font-size: 12.5px;
}
.hall-card .marks {
  position: absolute;
  left: 7px;
  top: 7px;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.hall-card .marks .tag {
  padding: 1px 7px;
  font-size: 11px;
  background: rgba(6, 6, 7, 0.78);
}
.hall-card .body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 12px 12px;
  min-width: 0;
}
.hall-card .shot {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
}
.hall-card .t2 {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hall-card .t2:hover {
  color: #c4b8ff;
}
.hall-card .m {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ── 하 · 오른쪽: 내 진도 — 든 사람에게만 선다 ── */
/*  [내 진도] 의 ✓ — 다 본 줄에만 선다(막대는 이미 꽉 차 있고 이것은 그 «끝»을 짚는다).
    ⚠ 제목과 «형제»로 세운다 — 제목 안에 두면 잘리는 그 줄의 말줄임표가 그림을 먹는다.  */
.mine-i .hd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.mine-i .hd .t {
  flex: 1 1 auto;
  min-width: 0;
}
.mine-i .ck {
  flex: none;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}
/*  다 본 강의는 줄도 초록기를 인다 — 카드의 그 값과 한 결이다.  */
.mine-i:has(.ck) {
  border-color: #2a5d3b;
}

.mine {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mine-i {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #16161a;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.mine-i:hover {
  border-color: var(--line2);
  background: #1c1c22;
}
.mine-i.on {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.mine-i .t {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 좁은 창 — 세로로 눕는다(뷰포트 → 전체 강의 → 프로젝트 → 상세 → 내 진도) ── */
@media (max-width: 980px) {
  main.con-body:has(.lab) {
    overflow: auto;
  }
  .lab {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 8px;
    padding: 10px;
  }
  .lab .split {
    display: none;
  }
  .lab-view {
    order: 0;
  }
  .lab-list {
    order: 1;
    max-height: 420px;
  }
  .lab-rail {
    order: 2;
    max-height: 260px;
  }
  .lab-detail {
    order: 3;
  }
  .lab-mine {
    order: 4;
    max-height: 300px;
  }
  .lab-stage {
    flex-direction: column;
    height: auto;
  }
  .lab-screen {
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .lab-side {
    flex: none;
  }
}