/*  판 한 벌 — 색 띠 ＋ 이름표 ＋ 오른쪽 손잡이, 그리고 «지금 잡은» 칸의 파란 테.
 *  정본은 스튜디오의 `wwwroot/styles.css · .pane-head` 와 아트랩 `art/src/theme.css · .pane.on` 이고 값도 그 둘의 것을 옮겼다.
 *  드는 자리 둘 = 갤러리 작업대(`.lab` · `gallery.css`)와 게임란(`.hall` · `globals.css`) — 둘 다 `dock` 을 함께 인다
 *  (2026-09-10 지시 「게임 패널에서도, 갤러리 패널처럼 영역 테두리 만들어주고, 클릭하면 파란색 표시하게 해줘」).
 *  ⚠ 층(@layer) 밖이다 — 이 파일이 globals.css 의 `.pane`·`.pane-head` 밑값을 이겨야 스튜디오의 그 값이 선다.
 *  ⚠ 여기 적는 것은 «얼굴»뿐이다 — 자리(격자 · 폭 · 키 · 여백)는 그 둘이 저마다 진다. 자리를 여기 적으면
 *    작업대(못 박은 키 · 안에서 구른다)와 게임란(창을 따라 자란다)이 서로를 덮는다.  */

.dock .pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

/*  ── 지금 «잡은» 칸 — 아트랩의 그 파란 테 그대로. 유니티의 그것이다:
    테와 안쪽 선 한 줄이 파랗고 머리줄이 파랗게 가라앉는다.  */
.dock .pane.on {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.dock .pane.on > .pane-head {
  background: #12202e;
  border-bottom-color: #1d3a52;
}

/* ── 판의 머리줄 — styles.css · .pane-head. 색 띠(.bar) ＋ 이름표(.tab) ＋ 오른쪽 손잡이(.hgrp) ── */
.dock .pane-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: var(--hhead);
  padding: 0 13px;
  background: var(--head);
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  color: var(--dim);
  user-select: none;
}
.dock .pane-head .bar {
  width: 5px;
  height: 18px;
  border-radius: 3px;
  flex: none;
}
.dock .pane-head .tab {
  flex: none;
  color: var(--ink);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 9px;
  background: #202027;
  white-space: nowrap;
}
.dock .pane-head .hgrp {
  position: absolute;
  right: 13px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 72%;
  min-width: 0;
}
.dock .pane-head .hgrp button.tab,
.dock .pane-head .hgrp a.tab {
  border: 0;
  padding: 5px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: var(--dim2);
  cursor: pointer;
  text-decoration: none;
}
.dock .pane-head .hgrp button.tab:hover:not(:disabled),
.dock .pane-head .hgrp a.tab:hover {
  color: var(--ink);
  background: #1c1c22;
}
.dock .pane-head .hgrp button.tab:disabled {
  opacity: 0.4;
  cursor: default;
}

/*  ── 그림 하나만 서는 단추(2026-09-10 지시 「다시 · 전체화면 · 새 창에서 열기 << 텍스트가 아닌, 아이콘 버튼으로」).
    ★ 스튜디오의 그 자리와 같은 결이다 — 아트랩 [뷰포트] 머리줄의 [전체화면] 도 `.tab` 안에 `Icons.Full(15)` 하나다.
    ★ 말은 «안» 걷혔다 — 단추의 `title`·`aria-label` 이 사전의 그 글자를 그대로 인다(다섯 말도 그대로다).
    ⚠ 좌우 여백만 좁힌다(12 → 9) — 위아래를 함께 줄이면 글자 단추와 나란히 설 때 그 상자만 낮아진다.  */
.dock .pane-head .hgrp button.tab.ico,
.dock .pane-head .hgrp a.tab.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
}
.dock .pane-head .t2 {
  flex: none;
  font-size: 10.5px;
  color: var(--dim2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock .pane-head .a-title {
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock .pane-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.dock .mono {
  font-family: var(--font-mono);
}

/* ── [업로드] 판 — 갤러리와 게임란이 함께 드는 한 벌(`src/components/UploadPane.tsx`).
      판 안이라 올리기 폼은 제 카드 테를 안 두르고(`Uploader className="up-in"`) 판의 몸을 그대로 채운다.  */
.dock .up-in {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 10px 12px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/*  ⚠ 자릿수 · 상한을 이르는 그 줄(`upload.rules`)은 «값»이라 안 걷는다 — 판이 좁아 세 줄로 눕으므로
    작게 적어 [업로드] 단추가 한 판 안에 함께 서게 한다(안 그러면 단추가 접힌 자리 밖으로 나간다).  */
.dock .up-in .hint {
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 4px;
}
/*  판은 좁으므로 이름표가 «칸 위»로 간다(넓은 판의 `.dlg-f` 는 이름표 108px ＋ 칸 한 줄이다).  */
.dock .up-in .dlg-f {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin-top: 0;
}
.dock .up-in .dlg-f > label {
  flex: none;
  padding-top: 0;
  font-size: 12.5px;
}
/*  ⚠ 마지막 줄의 이름표는 «빈 것»이다([업로드] 단추 앞의 자리) — 안 지우면 그만큼 빈 칸이 선다.  */
.dock .up-in .dlg-f > label:empty {
  display: none;
}
.dock .up-in .dlg-f > .f {
  width: 100%;
}