/*  옷 — RookissStudio 의 것을 그대로 옮겼다(`RookissStudio/src/Rookiss.Studio.Server/wwwroot/styles.css` · `console.css`).
 *  거의 검은 바탕 · 아주 옅은 테 · 보라 강조 · 카드마다 색 띠 한 줄 · 스크롤 막대 없음.
 *  값은 아래 :root 한 벌이고, 이름(.btn · .input · .tag · .lec · .tbl · .gate · .con-*)도 그 창의 것을 따른다.
 *  ⚠ 스튜디오의 `.grid`(표)는 Tailwind 의 `grid` 와 겹쳐 여기서는 `.tbl` 이다.
 */
@import 'tailwindcss';

@theme {
  --color-bg: #0a0a0b;
  --color-panel: #121214;
  --color-head: #161618;
  --color-line: #232326;
  --color-line2: #2c2c31;
  --color-ink: #e8e8ea;
  --color-dim: #8a8a93;
  --color-dim2: #5f5f68;
  --color-accent: #7c6cf0;
  --color-blue: #4a9eff;
  --color-amber: #f0a952;
  --color-green: #4ade80;
  --color-red: #f87171;
  --color-teal: #2dd4bf;
  --color-pink: #f472b6;
  --color-gold: #ffd76a;
  --font-sans: 'Pretendard', 'Noto Sans KR', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, Consolas, 'D2Coding', monospace;
}

@layer base {
  :root {
    --bg: #0a0a0b;
    --panel: #121214;
    --head: #161618;
    --line: #232326;
    --line2: #2c2c31;
    --ink: #e8e8ea;
    --dim: #8a8a93;
    --dim2: #5f5f68;
    --accent: #7c6cf0;
    --blue: #4a9eff;
    --amber: #f0a952;
    --green: #4ade80;
    --red: #f87171;
    --teal: #2dd4bf;
    --lec: #f472b6;
    --r: 10px;
    --hhead: 42px;
    color-scheme: dark;
    font-synthesis: none;
  }
  * {
    box-sizing: border-box;
    scrollbar-width: none;
  }
  *::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  html,
  body {
    margin: 0;
  }
  body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font: 14.5px/1.5 var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }
  button,
  select,
  input,
  textarea {
    font: inherit;
    color: inherit;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  ::placeholder {
    color: var(--dim2);
  }
}

@layer components {
  /* ── 단추 — styles.css · button / .ghost / .go ─────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #1a1a1e;
    border: 1px solid var(--line2);
    color: var(--ink);
    border-radius: 8px;
    padding: 6px 12px;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    transition:
      background 0.12s,
      border-color 0.12s;
  }
  .btn:hover {
    background: #232329;
    border-color: #3a3a42;
  }
  .btn:disabled {
    opacity: 0.35;
    cursor: default;
  }
  .btn.ghost {
    background: transparent;
    border-color: transparent;
    color: var(--dim);
  }
  .btn.ghost:hover {
    color: var(--ink);
    background: #1b1b20;
  }
  .btn.go {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .btn.go:hover {
    background: #8b7cf6;
  }
  .btn.bad {
    color: var(--red);
    border-color: #5a2b2b;
    background: #241416;
  }
  .btn.bad:hover {
    background: #33191c;
    border-color: #7a3a3a;
  }
  .btn.on {
    background: #1a1a1e;
    border-color: var(--line2);
    color: var(--ink);
  }
  .btn.sm {
    padding: 3px 9px;
    font-size: 12.5px;
    border-radius: 7px;
  }
  .btn.wide {
    width: 100%;
  }

  /* ── 머리줄의 «글자 단추» — styles.css · .h-txt ────────────────────── */
  .h-txt {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border: 1px solid #26262c;
    border-radius: 7px;
    background: #16161a;
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    cursor: pointer;
  }
  .h-txt:hover:not(:disabled) {
    background: #1f1f26;
    border-color: #3a3a44;
  }
  .h-txt:disabled {
    color: #4a4a52;
    border-color: #1d1d22;
    background: #131316;
  }

  /* ── 글칸 — console.css · .gate-form input · .dlg-f input · select ──── */
  .input {
    width: 100%;
    background: #131316;
    border: 1px solid var(--line2);
    border-radius: 9px;
    padding: 7px 11px;
    color: var(--ink);
  }
  .input:focus {
    outline: none;
    border-color: var(--accent);
  }
  .input:disabled {
    opacity: 0.5;
  }
  textarea.input {
    resize: vertical;
  }
  .label {
    display: block;
    color: var(--dim);
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  /*  곁말 — 읽는 글이라 --dim 이다(--dim2 는 자리 표시자 · 장식의 것 · 바탕과 3.0:1 이라 본문에 못 쓴다).  */
  .hint {
    color: var(--dim);
    font-size: 12.5px;
  }
  .hint.warn {
    color: var(--amber);
  }
  .err {
    color: var(--red);
    white-space: pre-wrap;
  }
  .ok {
    color: var(--green);
  }
  .row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .grow {
    flex: 1 1 auto;
  }

  /* ── 대화 폼의 줄 — console.css · .dlg-f ───────────────────────────── */
  .dlg-f {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 10px;
  }
  .dlg-f > label {
    flex: 0 0 108px;
    color: var(--dim);
    font-size: 14px;
    font-weight: 600;
    padding-top: 7px;
  }
  .dlg-f > .input,
  .dlg-f > .f {
    flex: 1 1 auto;
    min-width: 0;
  }

  /*  ── 하나를 고르는 줄 — styles.css · .picks / .pick-item ───────────
   *  드롭박스는 누르고 → 열리고 → 다시 누르는 세 손짓인데 칩은 한 손짓이다. 고를 것이 다섯 안쪽이면
   *  «전부 보이는» 편이 늘 빠르다. 값도 이름도 스튜디오의 것 그대로다 — 새 얼굴을 안 짓는다.
   *  ⚠ 칩 «안»에 진짜 라디오가 산다 — 딱지로 흉내 내면 자바스크립트 없는 첫 그림도 · 화살표 키도 ·
   *    읽어 주는 자의 「셋 중 하나」도 함께 사라진다.
   *  ⚠ 켜짐을 «칠하는» 자는 `:has(input:checked)` 다 — 이 판은 static SSR 이라 `.on` 을 달 손이 없다.  */
  .picks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 2px 0;
  }
  .pick-item {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    border: 1px solid var(--line2);
    border-radius: 8px;
    padding: 5px 10px;
    color: var(--dim);
    background: #131316;
    cursor: pointer;
    user-select: none;
  }
  .pick-item:hover {
    background: #17171b;
  }
  .pick-item:has(input:checked) {
    background: #1c1a2e;
    border-color: #35306a;
    color: var(--ink);
  }
  .pick-item:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .pick-item:has(input:disabled) {
    cursor: default;
    opacity: 0.5;
  }
  .pick-item input {
    accent-color: var(--accent);
    margin: 0;
  }

  /* ── 판 · 카드 — styles.css · .pane / console.css · .card ─────────── */
  .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 14px;
  }
  .pane {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /*  학생 작품이 도는 프레임 — «키»를 창이 정하고 폭이 16:9 로 따라온다(2026-09-10 지시).
      여태는 폭을 다 먹어 1920 창에서 1874×1054 였다 — 검수하러 열면 그 화면 하나가 창을 통째로 덮었다.
      좁은 창에서는 폭이 모자라므로 `max-width` 가 이기고 그때는 상자가 16:9 를 지킨 채 줄어든다.  */
  .play-frame {
    display: block;
    height: min(60vh, 660px);
    width: auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
    border: 0;
  }

  .pane-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--hhead);
    padding: 0 13px;
    background: var(--head);
    border-bottom: 1px solid var(--line);
    color: var(--dim);
    font-size: 14px;
  }
  .con-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 14px;
  }
  .con-h > b {
    font-size: 15.5px;
    letter-spacing: -0.015em;
  }
  .con-h.big > b {
    font-size: 19px;
    letter-spacing: -0.02em;
  }
  .stat {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 12px 14px;
  }
  .stat b {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 2px;
  }

  /* ── 머리줄 · 몸 · 왼쪽 길목 — console.css · .con-* ──────────────── */
  .con-head {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 18px;
    background: var(--head);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .con-mark {
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: 19px;
    white-space: nowrap;
  }
  .con-mark span {
    color: var(--accent);
  }
  .con-nav {
    display: flex;
    gap: 5px;
  }
  .con-nav a {
    color: var(--dim);
    font-size: 15.5px;
    padding: 8px 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .con-nav a:hover {
    color: var(--ink);
    background: #1b1b20;
  }
  .con-nav a.on {
    color: var(--ink);
    background: #1a1a1e;
    border-color: var(--line2);
  }
  .con-right {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dim);
    white-space: nowrap;
  }
  .con-right .con-nav,
  .con-right .con-who {
    margin-left: 0;
    flex: none;
  }
  .con-right .who-nick {
    font-size: 15.5px;
  }
  .con-right .h-txt {
    font-size: 14px;
    padding: 7px 15px;
    line-height: 19px;
    border-radius: 10px;
  }
  .con-who {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dim);
  }
  .con-who select {
    padding: 5px 10px;
    border-radius: 9px;
    background: #131316;
    border: 1px solid var(--line2);
    color: var(--ink);
    font-size: 14px;
  }
  .who-nick {
    color: var(--amber);
    font-weight: 700;
  }
  .con-body {
    width: 100%;
    padding: 20px 22px 28px;
  }
  .con-split {
    display: flex;
    gap: 22px;
    align-items: flex-start;
  }
  .con-side {
    flex: 0 0 208px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 76px;
    align-self: flex-start;
    border-right: 1px solid var(--line);
    padding-right: 16px;
    min-height: 60vh;
  }
  .con-side a {
    color: var(--dim);
    font-size: 16px;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
  }
  .con-side a:hover {
    color: var(--ink);
    background: #1b1b20;
  }
  .con-side a.on {
    color: var(--ink);
    background: #1a1a1e;
    border-color: var(--line2);
  }
  .con-main {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* ── 띠 — 공지 · 승인 대기 ─────────────────────────────────────────── */
  .band {
    padding: 8px 18px;
    text-align: center;
    font-size: 13.5px;
    border-bottom: 1px solid var(--line);
  }
  .band.amber {
    background: #1d1810;
    border-bottom-color: #4a3a1c;
    color: var(--amber);
    font-weight: 700;
  }
  .band.accent {
    background: #16122b;
    border-bottom-color: #3b3170;
    color: #c4b8ff;
  }
  .band.red {
    background: #241416;
    border-bottom-color: #5a2b2b;
    color: var(--red);
  }

  /* ── 이름표 — console.css · .tag ───────────────────────────────────── */
  .tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--line2);
    color: var(--dim);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
  }
  .tag.amber {
    color: var(--amber);
    border-color: #6d561f;
    background: #221a0c;
  }
  .tag.blue {
    color: var(--blue);
    border-color: #2b527a;
    background: #0e1a28;
  }
  .tag.red {
    color: var(--red);
    border-color: #5a2b2b;
    background: #241416;
  }
  .tag.gold {
    color: #f5c451;
    border-color: #6d561f;
    background: #221b0b;
  }
  .tag.green {
    color: var(--green);
    border-color: #2a5d3b;
    background: #0e1f16;
  }
  .tag.accent {
    color: var(--accent);
    border-color: #3b3170;
    background: #16122b;
  }
  .tag.teal {
    color: var(--teal);
    border-color: #24605a;
    background: #0f2b2a;
  }
  .tag.dim {
    color: var(--dim);
  }

  /* ── 표 — console.css · .grid (이름만 .tbl) ────────────────────────── */
  .tbl {
    width: 100%;
    border-collapse: collapse;
  }
  .tbl th,
  .tbl td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  .tbl th {
    color: var(--dim);
    font-weight: 600;
    font-size: 12.5px;
  }
  .tbl tr:hover td {
    background: #131316;
  }
  .tbl td.num,
  .tbl th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .tbl td.act {
    text-align: right;
    white-space: nowrap;
  }
  .tbl code {
    font: 13px/1.4 var(--font-mono);
    color: var(--teal);
    word-break: break-all;
  }
  .tbl .acts {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
  }
  .empty {
    padding: 28px 12px;
    text-align: center;
    color: var(--dim);
  }

  /* ── 작품 카드 — console.css · .lec ＋ .a-card .shot ──────────────── */
  .lecs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
  }
  .lec {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #17171b, #131316);
    border: 1px solid var(--line2);
    border-radius: 11px;
    padding: 0 0 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition:
      border-color 0.12s ease,
      background 0.12s ease;
  }
  .lec::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--dim2);
    z-index: 1;
  }
  .lec:hover {
    border-color: #6b52a3;
    background: linear-gradient(180deg, #1c1a24, #16151a);
  }
  .lec.accent::before {
    background: var(--accent);
  }
  .lec.teal::before {
    background: var(--teal);
  }
  .lec.green::before {
    background: var(--green);
  }
  .lec.amber::before {
    background: var(--amber);
  }
  .lec.red::before {
    background: var(--red);
  }
  .lec.gold::before {
    background: #ffd76a;
  }
  .lec .shot {
    aspect-ratio: 16 / 9;
    background: #060607;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }
  .lec .shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .lec .shot .none {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--dim2);
    text-transform: uppercase;
  }
  .lec .shot .kind {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(6, 6, 7, 0.84);
    color: var(--dim);
    border: 1px solid var(--line);
  }
  .lec-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 14px 0 16px;
  }
  .lec-top {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .lec-name {
    font-weight: 700;
    font-size: 16.5px;
    letter-spacing: -0.02em;
    color: var(--ink);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lec-sub {
    color: var(--dim);
    font-size: 13.5px;
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 1.45em;
  }
  .lec-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--dim);
    font-size: 13px;
  }

  /* ── 문 — console.css · .gate ──────────────────────────────────────── */
  .gate {
    margin: -20px -22px -28px;
    min-height: calc(100vh - 56px);
    display: grid;
    place-items: center;
    padding: 40px 16px;
    background:
      radial-gradient(900px 520px at 50% -10%, #17161f 0%, transparent 70%),
      var(--bg);
  }
  .gate-card {
    width: 340px;
    max-width: 100%;
    padding: 26px 24px 22px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
  }
  .gate-mark {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
    color: var(--ink);
  }
  .gate-mark span {
    color: var(--accent);
  }
  .gate-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
  }
  .gate-tabs a {
    flex: 1 1 0;
    text-align: center;
    border-radius: 8px;
    padding: 6px 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--dim);
  }
  .gate-tabs a:hover {
    color: var(--ink);
    background: #1b1b20;
  }
  .gate-tabs a.on {
    color: var(--ink);
    background: #1a1a1e;
    border-color: var(--line2);
  }
  .gate-form {
    display: grid;
    gap: 8px;
  }
  .gate-form .input {
    border-radius: 8px;
    padding: 8px 10px;
  }
  .gate-go {
    margin-top: 4px;
    padding: 8px 0;
    width: 100%;
  }
  .gate-wait {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-align: center;
    background: #1d1810;
    border: 1px solid #4a3a1c;
    color: var(--amber);
    font-weight: 700;
  }
  .gate-links {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--dim);
  }
  .gate-links a:hover {
    color: var(--ink);
  }
  .gate .err,
  .gate .ok {
    margin-top: 12px;
    text-align: center;
  }

  .prose-plain {
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--ink);
  }
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}


/*  ══ 게임란(홈) — crazygames 의 «고르고 바로 논다» ＋ twitch 의 «큰 화면과 그 옆의 값».
 *    좌 = 장르 레일 · 중앙 = 지금 도는 화면 · 하 = 마우스를 올리면 도는 썸네일.
 *    ★ 장르의 색은 여기 한 벌(`--g-<장르>`)이고 장르의 «목록»은 `src/lib/genre.ts` 다.  */
@layer components {
  :root {
    --g-action: var(--red);
    --g-shooter: var(--amber);
    --g-mmo: var(--accent);
    --g-rpg: var(--lec);
    --g-adventure: var(--teal);
    --g-racing: #ffd76a;
    --g-sports: var(--green);
    --g-simulation: var(--teal);
  }

  /*  ★ 2026-09-10 지시 「게임 패널과 갤러리 패널이 같은 레이아웃으로 · 전체게임/업로드가 씬/업로드와 동일한 크기」
      ⇒ 게임란도 갤러리 작업대(`gallery.css · .lab`)와 «같은 자» 위에 선다 — 판이 창을 통째로 쓰고(안 구른다 ·
      여백 0) 안에서 저마다 구른다. 값은 그 파일의 것을 그대로 옮겼다: 여백 8 · 선 5 · 판 margin 1.  */
  main.con-body:has(.hall) {
    padding: 0;
    overflow: hidden;
    display: flex;
  }

  /*  ★ 2026-09-10 지시 「게임 패널에서도, 갤러리 패널처럼 영역 테두리 만들어주고, 클릭하면 파란색 표시하게 해줘 ·
      게임 패널 우측 하단에 동일하게 업로드 패널 추가」 ⇒ 칸 넷이 «판»이 됐다(얼굴은 `src/styles/pane.css` 한 벌 ·
      겉 상자가 `dock` 을 인다). 자리는 격자 한 줄이다 — 좌 [장르](세로 통째) · 위 [지금 도는 화면](가운데＋오른쪽) ·
      아래 [게임 목록 | 업로드].
      ⚠ [업로드] 는 «승인된 회원»에게만 선다(`src/lib/uploadPane.ts`) — 안 서는 사람에게는 칸이 둘이고
        무대가 그 자리까지 편다(`:not(:has(.hall-up))`). 폭 값을 둘로 가르지 않는다.
      ⚠ 아래 한 줄의 키(`--hb`)와 오른쪽 칸의 폭(`--wr`)은 갤러리의 그 값 «그대로»다(296 · 340) — 두 판의
        [업로드] 가 같은 크기여야 하므로 한쪽만 고치지 않는다. 고치려면 `gallery.css · .lab` 과 함께 간다.
      ⚠ [게임 목록] 과 [업로드] 는 «격자의 한 줄»(행 3)이라 키가 하나다 — 여태 행이 `auto` 라 목록은 카드에
        맞춰 줄고(실측 268) 업로드는 제 폼만큼 서서(293) 나란한 두 판의 키가 갈렸다.  */
  .hall {
    --hhead: 42px;
    --wl: 210px;
    --wr: 340px;
    --hb: 296px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: calc(100vh - 56px);
    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;
  }
  .hall > .pane {
    margin: 1px;
  }
  .hall-rail {
    grid-area: 1 / 1 / 4 / 2;
  }
  .hall-stage {
    grid-area: 1 / 3 / 2 / 6;
  }
  .hall-list {
    grid-area: 3 / 3 / 4 / 4;
  }
  .hall-up {
    grid-area: 3 / 5 / 4 / 6;
  }
  .hall:not(:has(.hall-up)) {
    grid-template-columns: var(--wl) 5px minmax(0, 1fr);
  }
  .hall:not(:has(.hall-up)) .hall-stage {
    grid-area: 1 / 3 / 2 / 4;
  }
  .hall:not(:has(.hall-up)) .hall-list {
    grid-area: 3 / 3 / 4 / 4;
  }

  /* ── 좌 · 장르 레일 ─────────────────────────────────────────────── */
  .hall-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;
  }

  /* ── 중앙 · 지금 도는 화면 ──────────────────────────────────────── */
  /*  머리줄은 판의 것이다(`pane.css`) — 여기 남는 것은 그 안에 서는 값뿐이다(인기/최신 · 검색).  */
  .hall .seg {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 9px;
  }
  .hall .seg .t {
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    color: var(--dim);
    font-size: 13px;
    cursor: pointer;
  }
  .hall .seg .t:hover {
    color: var(--ink);
  }
  .hall .seg .t.on {
    background: #1a1a1e;
    border-color: var(--line2);
    color: var(--ink);
  }
  .hall-find {
    position: relative;
    width: 260px;
    flex: none;
  }
  .hall-find input {
    width: 100%;
    padding: 7px 11px 7px 30px;
    background: #131316;
    border: 1px solid var(--line2);
    border-radius: 9px;
    color: var(--ink);
    outline: none;
  }
  .hall-find input:focus {
    border-color: var(--accent);
  }
  .hall-find .ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dim2);
    pointer-events: none;
  }

  /*  ★ 무대의 «키»는 창의 키가 정한다 — 창이 넓어져도 화면이 안 커진다(twitch 결 · 2026-09-09 「지금 도는 화면 <<
      이건 또 너무 커 · twitch.tv 디자인을 참고해서 다시」). 여태는 화면이 남은 «폭»을 다 먹고 16:9 로 키를 냈고,
      1920 창에서 1340×754 가 되어 무대 하나가 창을 통째로 덮었다(실측). 이제 키가 먼저 서고 폭이 16:9 로 따라온다.  */
  .stage-body {
    display: flex;
    gap: 14px;
    /*  아래 끝(330)은 «옆의 값이 들어가는 키»다 — 판이 제일 좁을 때(260) 그 여섯 줄이 330 을 쓴다(실측).
        그보다 낮추면 [작품 페이지] 단추부터 잘린다. `min-height:max-content` 는 못 쓴다 — 그 자는 폭이
        무한일 때로 다시 재서 줄바꿈이 사라진 «짧은» 키를 낸다(1024 에서 55px 이 그대로 잘렸다).  */
    height: clamp(330px, min(42vh, 26vw), 420px);
  }
  /*  ★ TV 는 판의 «가운데»에 선다(2026-09-10) — 게임란이 갤러리처럼 창을 통째로 쓰게 되면서 [지금 도는 화면] 판이
      남은 키를 다 받는데, 화면은 위의 그 값을 지키므로 그대로 두면 판 밑에 빈 띠가 한 뼘 깔린다(1920×1080 에서 186px).
      키를 늘려 채우지 않는다 — 16:9 인 진짜 게임은 폭이 모자라면 그 비를 깨므로 `26vw` 가 그 자를 진다.
      ⚠ `safe` 가 함께 서야 좁은 창에서 «위»가 안 잘린다 — 넘칠 때는 가운데 맞춤을 스스로 접는다.  */
  .hall-stage .pane-body {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
  }
  /*  ★ 무대는 «TV»다(2026-09-09 지시 「도는 화면이 없다고 안 뜨는 게 아니라, 화면 레이아웃의 영역은 테두리로 잡아둬 TV 처럼」) —
      고른 것이 없어도 이 상자는 그대로 서고(`.screen.off`) 그 안에 값 한 줄만 선다. 테는 베젤이다: 바깥 선 ＋ 안쪽 검은 띠.
      ★ 키는 위(`.stage-body`)가 정하고 이 상자는 남은 폭을 다 먹는다 — 표지 · 프리뷰는 가운데를 잘라 넣는다(`cover`).
      ★ 진짜 게임(iframe)만은 16:9 를 안 깬다 — 상자가 그보다 넓으면 가운데에 서고 양옆은 검은 띠다(아래 그 줄).  */
  .screen {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    min-width: 0;
    background: #060607;
    border: 2px solid var(--line2);
    border-radius: 12px;
    box-shadow:
      inset 0 0 0 3px #000,
      0 0 0 1px var(--line),
      0 16px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
  }
  .screen.off {
    background:
      linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
      #060607;
    background-size:
      24px 24px,
      24px 24px,
      auto;
  }
  .screen.off .screen-note b {
    font-size: 15px;
    font-weight: 600;
    color: var(--dim2);
  }
  .screen > iframe,
  .screen > video,
  .screen > img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
  }
  /*  게임은 안 자른다 — 16:9 그대로 가운데에 선다(상자가 좁으면 상자를 채운다).  */
  .screen > iframe {
    width: auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
  }
  .screen-note {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    color: var(--dim);
  }
  .screen-note b {
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--dim);
  }
  /*  crazygames 의 그 단추 — 프리뷰 위에 얹히고 누르면 진짜 게임이 그 자리에 선다.  */
  .screen-go {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background: rgba(124, 108, 240, 0.94);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    transition: background 0.12s;
  }
  .screen-go:hover {
    background: #8b7cf6;
  }
  .screen-go .tri {
    width: 0;
    height: 0;
    border-left: 12px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
  }

  /*  무대의 좌우 손잡이 — twitch 의 캐러셀 그것(2026-09-09 지시). 화면 «안»의 양 끝에 앉고,
      놀고 있을 때는 게임이 16:9 로 가운데에 서므로 이 둘은 그 곁의 검은 띠 위에 놓인다.  */
  .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;
    transform: rotate(45deg);
    margin-left: 3px;
  }
  .screen-arw.next i {
    transform: rotate(-135deg);
    margin-left: -3px;
  }

  /*  옆의 값 — 화면이 먹고 남은 자리를 채운다(twitch 의 그 판). 넓은 창에서 허전하지 않게 그 작품의 표지를
      «흐려서» 뒤에 깐다(`--art` · 표지가 없으면 아무것도 안 깔린다). 키가 정해져 있으므로 넘치는 글은 자른다.  */
  .stage-side {
    position: relative;
    /*  ⚠ `isolation` 이 있어야 흐린 표지가 «보인다» — 이것이 없으면 이 판은 쌓임 맥락을 안 짓고,
        z-index:-1 인 ::before 가 제 판의 바탕(--panel · 불투명)보다 «아래»에 깔려 한 픽셀도 안 뜬다.  */
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    flex: 0 0 clamp(260px, 25%, 360px);
    min-width: 0;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }
  /*  넓은 창에서 이 판이 허전하지 않게 그 작품의 표지를 흐려서 깐다(twitch 의 그 판).
      ⚠ 글이 서는 «윗쪽»에는 안 깐다 — 본문은 `--dim` 이고 이 저장소는 그 글의 대비를 4.5:1 로 올려 둔 참이라
      밝은 표지가 그 뒤에 깔리면 그 값이 3:1 로 도로 내려간다. 그래서 마스크로 아래 반쪽(빈 자리)에만 깐다.  */
  .stage-side::before {
    content: '';
    position: absolute;
    inset: -40px;
    z-index: -1;
    background: var(--art, none) center / cover no-repeat;
    filter: blur(38px) saturate(1.3) brightness(0.7);
    opacity: 0.62;
    -webkit-mask-image: linear-gradient(to bottom, transparent 46%, #000 88%);
    mask-image: linear-gradient(to bottom, transparent 46%, #000 88%);
  }
  .stage-side h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .stage-side .who {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .stage-side .sum {
    margin: 0;
    max-width: 74ch;
    color: var(--dim);
    font-size: 13.5px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .stage-side .tags .tag {
    font-size: 12px;
    padding: 1px 8px;
  }

  /* ── 하 · 썸네일 ────────────────────────────────────────────────── */
  /*  판 안으로 들어갔으니 몸에 안쪽 여백을 준다 — 카드가 테에 붙지 않게(무대도 같다).  */
  .hall-list .pane-body,
  .hall-stage .pane-body {
    padding: 12px;
  }
  .hall-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 14px;
  }
  .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;
    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);
  }
  .hall-card.on {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  .hall-card .shot {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    aspect-ratio: 16 / 9;
    background: #060607;
    border: 0;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    cursor: pointer;
  }
  .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;
  }
  /*  마우스를 올린 그 카드 «하나»만 산다 — 그림 위에 그대로 얹는다.
      ⚠ 손짓을 안 먹는다(`pointer-events: none`) — 이것이 없으면 살아 있는 프레임이 카드를 덮어
      «누르기»(무대로 고르기)도 «우클릭»(차림표)도 그 안으로 빨려 들어가 아무 일도 안 난다(2026-09-09 실측).
      카드 위의 그것은 «미리보기»이고 노는 자리는 무대다.  */
  .hall-card .shot .live {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #060607;
    object-fit: cover;
    pointer-events: none;
  }
  /*  카드의 별 — 이름표(장르)는 왼쪽 위, 별은 오른쪽 위다. 고르는 단추 «위»에 뜨므로 z 를 하나 올린다.  */
  .hall-card .fav-at {
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 2;
    display: flex;
  }
  .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: 10.5px;
    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 .t2 {
    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);
  }

  /*  장르 이름표 — 색은 위의 `--g-<장르>` 하나에서 난다.  */
  .tag.g-action {
    --gc: var(--g-action);
  }
  .tag.g-shooter {
    --gc: var(--g-shooter);
  }
  .tag.g-mmo {
    --gc: var(--g-mmo);
  }
  .tag.g-rpg {
    --gc: var(--g-rpg);
  }
  .tag.g-adventure {
    --gc: var(--g-adventure);
  }
  .tag.g-racing {
    --gc: var(--g-racing);
  }
  .tag.g-sports {
    --gc: var(--g-sports);
  }
  .tag.g-simulation {
    --gc: var(--g-simulation);
  }
  .tag[class*='g-'] {
    color: var(--gc);
    border-color: color-mix(in srgb, var(--gc) 45%, transparent);
    background: color-mix(in srgb, var(--gc) 13%, transparent);
  }

  /*  좁은 창 — 레일이 가로로 눕고 화면과 값이 위아래로 선다.  */
  @media (max-width: 980px) {
    /*  창을 통째로 쓰던 것을 도로 편다 — 판 넷이 세로로 누우므로 «판 안»이 아니라 창이 구른다
        (갤러리 작업대의 그 되돌림 그대로 · `gallery.css` 의 같은 마디).  */
    main.con-body:has(.hall) {
      display: block;
      overflow: auto;
      padding: 18px 20px 30px;
    }
    /*  판 넷이 한 줄로 눕는다 — 격자를 «칸 하나»로 접고 자리를 차례대로 준다(레일 · 무대 · 목록 · 업로드).  */
    .hall,
    .hall:not(:has(.hall-up)) {
      height: auto;
      padding: 0;
      gap: 14px;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
    }
    .hall > .pane {
      margin: 0;
    }
    .hall-rail,
    .hall-stage,
    .hall:not(:has(.hall-up)) .hall-stage,
    .hall-list,
    .hall:not(:has(.hall-up)) .hall-list,
    .hall-up {
      grid-area: auto;
    }
    .hall-rail,
    .hall-up {
      position: static;
    }
    /*  레일은 그 판 «안»에서 가로로 구른다(세로로 서면 화면 하나를 다 먹는다).  */
    .hall-rail .pane-body {
      flex-direction: row;
      overflow-x: auto;
    }
    .rail-i {
      flex: none;
    }
    .stage-body {
      flex-direction: column;
      height: auto;
    }
    .screen {
      flex: none;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
    .stage-side {
      flex: none;
    }
    .hall-find {
      width: 100%;
    }
  }
}

/*  ══ 창의 «맛» · 초점 · 자리(skeleton) · 좁은 창 — 2026-09-09 (진짜 크롬으로 네 폭을 찍어 보고 고친 것).
 *    ★ 머리줄의 값(키 56 · 여백 18 · 이름표 19 · 길목 15.5/8/15 · 상자의 오른쪽 끝 18)과 `.btn`·`.input`·`.tag`·
 *      `.card`·`.tbl` 의 크기는 여기서도 한 픽셀 안 만진다(e2e 가 잰다 · README §5′). 고치는 것은 그 «둘레»다.
 *    ★ 새 색을 안 짓는다 — 강조는 늘 `--accent`, 테는 `--line`, 격자는 흰색의 3.5% 다.  */
@layer components {
  /* ── 초점 — 키로 옮겨 다닐 때의 고리(보라 · 2px). 글칸은 테 색이 이미 말하므로 고리를 안 겹친다. ── */
  :where(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  :where(input, select, textarea):focus-visible {
    outline: none;
    border-color: var(--accent);
  }
  /*  넘침을 감춘 상자 «안»의 것은 고리를 안쪽으로 그린다 — 밖으로 그리면 상자가 잘라 먹는다.  */
  .hall-card .shot:focus-visible,
  .lab-card:focus-visible,
  .lec:focus-visible {
    outline-offset: -3px;
  }

  /* ── 움직임을 줄인 사람 — 전이와 반짝임을 멈춘다(마우스를 올리면 도는 영상은 CSS 가 못 막는다). ── */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ── 자리(skeleton) — 판이 오기 전 «그 자리»를 잡아 둔다. 글이 없다 · 옅은 판 위에 아주 옅은 반짝임 하나. ── */
  .sk {
    position: relative;
    overflow: hidden;
    background: #16161a;
    border-radius: 8px;
  }
  .sk::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.04) 50%, transparent 80%);
    animation: sk-shine 1.8s ease-in-out infinite;
  }
  @keyframes sk-shine {
    to {
      transform: translateX(100%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sk::after {
      display: none;
    }
  }
  .sk.line {
    height: 13px;
    border-radius: 5px;
  }
  .sk.h2 {
    height: 20px;
  }
  .sk.h3 {
    height: 30px;
  }
  .sk.pill {
    height: 24px;
    width: 72px;
    border-radius: 999px;
  }
  .sk.w1 {
    width: 25%;
  }
  .sk.w2 {
    width: 40%;
  }
  .sk.w3 {
    width: 60%;
  }
  .sk.w4 {
    width: 85%;
  }
  .sk.fill {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }
  .sk-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sk-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* ── 빈 화면의 바탕은 «옅은 격자»다 — 브랜드 색 그라디언트가 아니라 스튜디오의 그 결. 그림·영상이 서면 그 아래로 사라진다. ── */
  .screen,
  .hall-card .shot,
  .lec .shot,
  .lab-card .shot,
  .lab-stage {
    background-color: #060607;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: center;
  }

  /* ── 게임란 카드 — 장르의 색 띠가 왼쪽에 선다(강의 카드 `.lec::before` 의 그 어휘). 색은 `--g-<장르>` 하나에서 난다. ── */
  .hall-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--dim2);
    z-index: 2;
  }
  .hall-card:has(.g-action)::before {
    background: var(--g-action);
  }
  .hall-card:has(.g-shooter)::before {
    background: var(--g-shooter);
  }
  .hall-card:has(.g-mmo)::before {
    background: var(--g-mmo);
  }
  .hall-card:has(.g-rpg)::before {
    background: var(--g-rpg);
  }
  .hall-card:has(.g-adventure)::before {
    background: var(--g-adventure);
  }
  .hall-card:has(.g-racing)::before {
    background: var(--g-racing);
  }
  .hall-card:has(.g-sports)::before {
    background: var(--g-sports);
  }
  .hall-card:has(.g-simulation)::before {
    background: var(--g-simulation);
  }

  /* ── 무대 옆의 값 — 줄 사이를 조이고, 손(단추 줄)은 바닥에 선을 긋고 선다(빈 자리가 «발»로 읽히게). ── */
  .stage-side {
    gap: 8px;
  }
  .stage-side h2 {
    margin-bottom: 2px;
  }
  .stage-side .who {
    gap: 1px;
    line-height: 1.4;
  }
  .stage-side .sum {
    margin-top: 2px;
  }
  .stage-side > .row {
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .rail-i {
    padding: 8px 10px;
  }
  .gate-tabs a {
    padding: 8px 0;
  }
  .gate-links {
    flex-wrap: wrap;
  }

  /* ── 좁은 창 ① (≤980) — 관리 판이 세로로 · 표는 제 상자 안에서 구른다 · 게임란 카드는 두 줄 · 작업대는 16:9 ── */
  @media (max-width: 980px) {
    .con-split {
      flex-direction: column;
      gap: 14px;
    }
    /*  왼쪽 길목이 가로 한 줄이 된다(장르 레일과 같은 결) — 막대 없는 창이라 오른쪽 끝을 살짝 흐려 «더 있다»를 말한다.  */
    .con-side {
      position: static;
      flex: none;
      flex-direction: row;
      align-items: center;
      align-self: stretch;
      gap: 4px;
      width: 100%;
      min-height: 0;
      padding: 0 32px 10px 0;
      overflow-x: auto;
      border-right: 0;
      border-bottom: 1px solid var(--line);
      mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }
    .con-side a {
      flex: none;
      padding: 9px 14px;
      font-size: 15px;
    }
    .con-side .con-h {
      flex: none;
      margin: 0 4px 0 0;
      padding: 0 !important;
    }
    .card:has(.tbl) {
      overflow-x: auto;
    }
    .tbl th {
      white-space: nowrap;
    }
    /*  구르는 표에서는 열쇠말(`item.approve` · id)을 안 자른다 — 자르면 한 글자씩 세로로 선다(찍어서 봤다).  */
    .tbl code {
      word-break: normal;
      white-space: nowrap;
    }
    .hall-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /*  오른쪽 끝을 흐려 «더 있다»를 말한다 — 판 안에서 구르므로 그 몸에 건다.  */
    .hall-rail .pane-body {
      padding-right: 32px;
      mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    }
    .hall .seg .t,
    .lab .t {
      padding: 7px 12px;
    }
    .lab-chip {
      padding: 5px 10px;
    }
    /*  세로로 눕는 작업대 — 뷰포트는 16:9 로 선다(`.lab .pane { min-height: 0 }` 가 앞의 `min-height: 340px` 을 이기고 있었다).  */
    .lab .lab-view {
      min-height: 0;
    }
    .lab .lab-view .lab-stage {
      flex: none;
      aspect-ratio: 16 / 9;
    }
  }

  /*  판의 머리줄이 접히면 몸이 그 위를 덮는다 — 머리줄은 안 줄어든다.  */
  .lab-grid .pane-head {
    flex: none;
  }

  /* ── 좁은 창 ② (≤840) — 머리줄은 값이 못 박혀 있어 접지 않는다 ⇒ 제 안에서 가로로 구른다(몸은 넘치지 않는다). ── */
  @media (max-width: 840px) {
    .con-head {
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
    }
  }

  /* ── 좁은 창 ③ (≤600) — 폼의 이름표가 위로 · 표는 제 폭을 지키고 구른다 · 카드는 한 줄 · 문은 창에 붙는다 ── */
  @media (max-width: 600px) {
    .dlg-f {
      flex-direction: column;
      align-items: stretch;
      gap: 5px;
    }
    .dlg-f > label {
      flex: none;
      padding-top: 0;
    }
    .dlg-f > label:empty {
      display: none;
    }
    /*  다섯 열 넘는 표만 제 폭을 지키고 구른다(회원 · 작품 · 검수 · 기록) — 세 열짜리(현황)는 접혀도 읽힌다.  */
    .card:has(.tbl td:nth-child(5)) > .tbl {
      min-width: 560px;
    }
    /*  작품 머리 — 제목 덩이가 한 줄을 다 쓰고 [새 판 올리기] 는 다음 줄로.  */
    .con-h.big {
      flex-wrap: wrap;
    }
    .con-h.big > div:first-child {
      flex: 1 1 100%;
    }
    .hall-cards {
      grid-template-columns: minmax(0, 1fr);
    }
    .stage-side h2 {
      font-size: 18px;
    }
    .screen-go {
      padding: 10px 20px;
      font-size: 15px;
    }
    .screen-arw {
      width: 28px;
      height: 44px;
    }
    .lab-cards,
    .lab-cards.lg {
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .lab-find {
      flex: 1 1 100%;
    }
    .gate {
      padding: 24px 12px;
    }
    .gate-card {
      padding: 22px 18px 18px;
    }
    .lecs {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}