/*  갤러리 작업대의 옷 — RookissStudio [아트 랩] «그대로»다(2026-09-09 지시 「갤러리 탭 UI 를 Studio처럼」).
 *  정본은 스튜디오의 `wwwroot/styles.css · .pane-head`(색 띠 ＋ 이름표 ＋ 오른쪽 손잡이)와
 *  `wwwroot/console.css · .art`(위 검색줄 · 좌 상세 · 중앙 뷰포트 · 우 비움 · 하 스타일 | 씬)이고, 값도 그 둘의 것을 옮겼다.
 *  값은 globals.css 의 :root 한 벌(--bg --panel --head --line --line2 --ink --dim --dim2 --accent …)이고 새 색을 짓지 않는다.
 *  ⚠ 층(@layer) 밖이다 — 이 파일이 globals.css 의 `.pane` · `.pane-head` 밑값을 이겨야 스튜디오의 그 값이 선다.
 *  드는 자리는 `src/components/SceneLab.tsx` 하나다. */

/* ── 이 판은 창을 통째로 쓴다 — 스튜디오의 `.con-body.flat` 그대로(안 구르고 · 여백 0 · 발은 접는다) ── */
main.con-body:has(.lab) {
  padding: 0;
  overflow: hidden;
  display: flex;
}
/* ── 뼈대 — console.css · .art. 오른쪽 선과 오른쪽 판은 «세로로 통째»(행 2~4)이고 아래 칸은 왼쪽＋가운데 위에만 깔린다 ── */
.lab {
  --wl: 300px;
  --wr: 340px;
  /*  아래 한 줄의 키 — [레퍼런스] · [씬] · [업로드] 셋이 나눠 갖는 그 값 하나다.
      ⚠ 264 였는데 296 으로 올렸다(2026-09-10) — 업로드 판의 [업로드] 단추가 접힌 자리 밖으로 나갔다(실측 47px 모자랐다).  */
  --hb: 296px;
  --fw: 210px;
  --hhead: 42px;
  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: auto minmax(0, 1fr) 5px var(--hb);
  gap: 0;
  padding: 8px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}
/*  판의 «얼굴»(테 · 머리줄 · 파란 테)은 `src/styles/pane.css` 한 벌이고 게임란도 그것을 든다 — 여기는 자리뿐이다.  */
.lab > .pane,
.lab-bot > .pane {
  margin: 1px;
}
.lab-top {
  grid-area: 1 / 1 / 2 / 6;
}
/*  ★ 2026-09-10 지시로 좌우가 갈렸다 — 좌 [루키스101] · 우 [상세 정보](게임 랩의 그 자리 그대로).
    상세는 오른쪽 «세로 통째»(행 2~4)이고, 왼쪽은 뷰포트와 같은 줄(행 2)이다.  */
.lab-tower {
  grid-area: 2 / 1 / 3 / 2;
}
.lab .sp-l {
  grid-area: 2 / 2 / 3 / 3;
}
.lab-view {
  grid-area: 2 / 3 / 3 / 4;
}
/*  ★ 2026-09-10 지시 「상세 정보 아래에 업로드 패널 추가 · 갤러리에서는 레퍼런스/씬/업로드 - 동일 선상에 배치 (높이)」
    ⇒ 게임 랩의 그 자리 표 그대로다(`console.css · .a-insp`·`.a-agent`) — «세로 통째»인 것은 오른쪽 «선» 하나(`sp-r`)이고
    그 오른쪽 «칸»은 둘로 갈린다: 위가 [상세 정보](행 2) · 아래가 [업로드](행 4).
    ⚠ [상세 정보] 를 행 2~4 로 되돌리면 그 순간 [업로드] 가 그 밑에 깔려 사라진다.
    ⚠ 아래 셋([레퍼런스]·[씬]·[업로드])은 «격자의 한 줄»(행 4)이라 키가 하나다 — 가로 선 둘(`sp-b`·`sp-c`)이
      같은 `--hb` 를 잡아 셋을 함께 민다. 그 사이에 새 가로 선을 두면 키가 둘이 된다.  */
.lab .sp-r {
  grid-area: 2 / 4 / 5 / 5;
}
.lab-detail {
  grid-area: 2 / 5 / 3 / 6;
}
.lab .sp-b {
  grid-area: 3 / 1 / 4 / 4;
}
.lab .sp-c {
  grid-area: 3 / 5 / 4 / 6;
}
.lab-up {
  grid-area: 4 / 5 / 5 / 6;
}
.lab-bot {
  grid-area: 4 / 1 / 5 / 4;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--fw) 5px minmax(0, 1fr);
}

/* ── 루키스101 — 스튜디오 `console.css · .rk101` 그대로다(2026-09-10 지시 「좌측에는 루키스101 배치 (게임 랩 참고)」).
      값도 그 파일의 것을 옮겼다: 심 32px · 층 21px · 빈 층 13px · 눈금은 1 · 10 · 20 … 101.
      ★ 층은 «아래부터» 쌓인다(column-reverse) — 그래서 맨 앞이 맨 아래이고 지반이 먼저 선다. */
.rk101 {
  --core: 32px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
  padding: 0 0 9px;
  user-select: none;
}
.rk101 .ground {
  flex: none;
  position: relative;
  height: 12px;
}
.rk101 .ground::before {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  top: 0;
  height: 2px;
  background: var(--line2);
}
/*  빗금 — 도면에서 「여기부터는 땅」을 말하는 그 표다.  */
.rk101 .ground::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  top: 3px;
  height: 7px;
  background: repeating-linear-gradient(45deg, var(--line2) 0 1px, transparent 1px 5px);
}
/*  첨탑 — 맨 뒤가 맨 위다. 101층 위의 한 뼘이 탑을 끝맺는다.  */
.rk101 .spire {
  flex: none;
  position: relative;
  height: 22px;
}
.rk101 .spire::before {
  content: '';
  position: absolute;
  left: var(--core);
  width: 1px;
  top: 3px;
  bottom: 0;
  background: linear-gradient(to top, #30303a, transparent);
}
.rk101 .fl {
  --slab: transparent;
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  min-height: 21px;
  padding-right: 9px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--dim);
  font-size: 13px;
  background: linear-gradient(to right, transparent var(--core), var(--slab) var(--core), var(--slab) calc(100% - 9px), transparent calc(100% - 9px));
}
/*  탑의 심 — 줄마다 1px 이고 이어 붙으면 관통하는 한 줄이 된다(판보다 한 칸 밝다).  */
.rk101 .fl::before {
  content: '';
  position: absolute;
  left: var(--core);
  top: 0;
  bottom: 0;
  width: 1px;
  background: #30303a;
}
.rk101 .fl.mark::after {
  content: '';
  position: absolute;
  left: calc(var(--core) - 5px);
  top: 50%;
  width: 4px;
  height: 1px;
  background: var(--line2);
}
.rk101 .fl .n {
  flex: none;
  width: 26px;
  text-align: right;
  line-height: 1;
  font-size: 12px;
  color: var(--dim2);
  font-variant-numeric: tabular-nums;
}
.rk101 .fl .dot {
  flex: none;
  width: 3px;
  height: 12px;
  margin-left: 6px;
  border-radius: 0;
}
.rk101 .fl .nm {
  flex: 1;
  min-width: 0;
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk101 .fl:not(.bare) {
  --slab: #17171d;
}
.rk101 .fl:not(.bare):hover {
  --slab: #1d1d24;
  color: var(--ink);
}
/*  「지금 뷰포트에 선 것」 — 카드의 그 파란 테와 같은 말이라 같은 색이다.  */
.rk101 .fl.on {
  --slab: #12202e;
  color: var(--ink);
}
.rk101 .fl.on:hover {
  --slab: #16283a;
}
/*  빈 층 — 판의 윤곽만 짧게. 키가 층수의 «글자»를 딛는다(수보다 한 칸 크게).  */
.rk101 .fl.bare {
  min-height: 0;
  height: 13px;
  padding: 0 9px 0 0;
  cursor: default;
}
.rk101 .fl.bare .nm {
  flex: 0 0 auto;
  width: 32%;
  height: 0;
  margin-left: 6px;
  border-top: 1px solid #202027;
}

/* 잡아 끄는 선 — 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;
}
.lab.drag iframe {
  pointer-events: none;
}

/*  판의 머리줄(색 띠 ＋ 이름표 ＋ 손잡이) · «잡은» 칸의 파란 테 · 판의 몸은 `src/styles/pane.css` 로 옮겼다
    (2026-09-10 — 게임란이 같은 얼굴을 들어야 해서다). 그 값을 여기 도로 적지 않는다.  */

/* ── 위: 고르는 줄 — console.css · .art-top ── */
.lab-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 3px 8px;
}
.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-q:focus {
  outline: none;
  border-color: var(--accent);
}
.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;
}

/* ── 좌: 상세 정보 — console.css · .art-insp ── */
.art-insp {
  padding: 12px 13px 22px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.art-insp .a-h {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ink);
}
.art-insp .a-sub {
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.art-insp .a-sum {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}
.a-sect {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.a-lbl {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dim2);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.a-prompt {
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim);
  background: #16161a;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 7px 7px 0;
  padding: 9px 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 190px;
  overflow-y: auto;
}
.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-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.a-chip {
  font-size: 11.5px;
  padding: 2.5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  color: var(--dim2);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.a-chip:hover {
  color: var(--dim);
  border-color: #3a3a42;
}
.a-chip.on {
  background: #191634;
  border-color: #3a3466;
  color: #c9c0ff;
}
.a-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.a-btns .tab {
  border: 1px solid var(--line2);
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--dim);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.a-btns .tab:hover {
  border-color: var(--accent);
  color: #c9c0ff;
  background: #191634;
}
.a-btns .tab.bad {
  border-color: #5a2a30;
  color: #ffb4b4;
  background: #2a1618;
}
.a-btns .tab.bad:hover {
  border-color: var(--red);
  color: #fff;
  background: #3a1c20;
}
.a-none {
  padding: 26px 14px;
  color: var(--dim2);
  font-size: 13px;
}

/* ── 중앙: 뷰포트 — console.css · .a-view-wrap · .a-transport ── */
.lab-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #060607;
}
.lab-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #060607;
}
.lab-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--dim2);
  font-size: 13px;
  pointer-events: none;
}
.a-transport {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 30px;
  padding: 0 11px;
  background: var(--head);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim2);
}
.a-transport .st {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

/* ── 하 · 왼쪽: 스타일 — console.css · .art-tree ── */
.art-tree {
  padding: 5px 0 10px;
  user-select: none;
}
.art-tree .tw {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 11px 6px 9px;
  cursor: pointer;
  white-space: nowrap;
  border-left: 2px solid transparent;
  color: var(--dim);
  font-size: 13.5px;
}
.art-tree .tw:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
}
.art-tree .tw.on {
  background: #1a1a20;
  color: var(--ink);
  border-left-color: var(--accent);
}
.art-tree .dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}
.art-tree .dot.all {
  background: linear-gradient(135deg, var(--blue) 0%, var(--amber) 35%, var(--red) 68%, var(--green) 100%);
}
.art-tree .nm {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.art-tree .n {
  font-size: 11px;
  color: var(--dim2);
}
.art-tree .tw.root {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── 하 · 가운데: 씬 — console.css · .art-grid · .a-card ── */
.art-grid {
  padding: 10px;
  display: grid;
  gap: 9px;
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
}
.lab-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  background: #16161a;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  transition:
    background 0.13s ease,
    border-color 0.13s ease;
}
.lab-card:hover {
  background: #1c1c22;
  border-color: var(--line2);
}
.lab-card.on {
  background: #12202e;
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.lab-card .shot {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: #060607;
  overflow: hidden;
}
.lab-card .shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lab-card .shot .none {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim2);
}
.lab-card .body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px 7px;
  min-width: 0;
}
.lab-card .t {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lab-card .m {
  display: flex;
  gap: 6px;
  font-size: 10.5px;
  color: var(--dim2);
  min-width: 0;
}
.lab-card .m .c {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.a-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ── 좁은 창 — 세로로 눕는다(뷰포트 → 씬 → 스타일 → 상세). 오른쪽 빈 판과 끄는 선은 접는다 ── */
@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-tower {
    order: 4;
    max-height: 280px;
  }
  .lab-top {
    order: 0;
    flex-wrap: wrap;
  }
  .lab-view {
    order: 1;
    min-height: 0;
  }
  .lab-view .lab-stage {
    aspect-ratio: 16 / 9;
    flex: none;
  }
  .lab-bot {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .lab-bot .lab-refs {
    order: 1;
  }
  .lab-bot .lab-grid {
    order: 0;
    max-height: 360px;
  }
  .lab-detail {
    order: 3;
  }
}
@media (max-width: 600px) {
  .art-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}