/*  판 한 벌 — 색 띠 ＋ 이름표 ＋ 오른쪽 손잡이, 그리고 «지금 잡은» 칸의 파란 테.
 *  ★ `RookissGameHub/src/styles/pane.css` 를 그대로 옮긴 것이다(2026-09-10 · 두 제품을 합치는 날 한 벌이 되게).
 *    그 파일의 정본은 스튜디오의 `wwwroot/styles.css · .pane-head` 와 아트랩 `art/src/theme.css · .pane.on` 이다.
 *  드는 자리 = 목록 작업대(`.lab`)와 재생기(`.play`) — 둘 다 `dock` 을 함께 인다.
 *  ⚠ 층(@layer) 밖이다 — 이 파일이 `studio.css` 의 밑값을 이겨야 그 값이 선다.
 *  ⚠ 여기 적는 것은 «얼굴»뿐이다 — 자리(격자 · 폭 · 키 · 여백)는 그 판들이 저마다 진다.  */
.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;
}
.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(--mono);
}