/* ═══════════════════════════════════════════════════════════════
   af-dock.css — ActionFlow 공통 도킹 프레임워크 스타일  v01

   af-dock.js 와 한 쌍. 색은 af-theme.css 의 var(--...) 만 참조하고
   여기서 값을 정의하지 않는다(어느 제품에 넣어도 그쪽 테마를 따르게).

   [추가 목록]
     셸    : .af-shell .af-mid .af-center .af-region .af-split
     그룹  : .af-group .af-bar .af-bar-tabs .af-tab .af-bar-btns .af-bar-btn
             .af-body .af-gsplit
     띄움  : .af-float-layer .af-float .af-grip
     드래그: .af-ghost .af-hint  body.af-dragging
     보관  : .af-pool
   ※ 제품 쪽 CSS 는 이 이름들을 다시 정의하지 말 것(중복 정의 금지).
   ═══════════════════════════════════════════════════════════════ */

/* ── 셸 ────────────────────────────────────────────────────── */
.af-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--window);
}

.af-mid {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
}

.af-center {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.af-region {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.af-region[data-region="left"],
.af-region[data-region="right"] { flex-direction: column; }

.af-region[data-region="top"],
.af-region[data-region="bottom"] { flex-direction: row; }

/* 영역 크기 조절 손잡이 */
.af-split {
  flex: 0 0 4px;
  background: var(--window);
}

.af-split[data-split="left"],
.af-split[data-split="right"] { cursor: col-resize; }

.af-split[data-split="top"],
.af-split[data-split="bottom"] { cursor: row-resize; }

.af-split:hover { background: var(--accent); }

/* ── 그룹(도크 한 칸) ──────────────────────────────────────── */
.af-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}

.af-bar {
  display: flex;
  align-items: stretch;
  background: var(--dock-title);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  min-height: 23px;
  user-select: none;
}

.af-tab {
  padding: 3px 10px;
  display: flex;
  align-items: center;
  cursor: grab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.af-bar-tabs .af-tab {
  border-right: 1px solid var(--line);
  color: var(--text-dim);
  background: var(--group);
}

.af-bar-tabs .af-tab.active {
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
}

.af-tab:hover { background: var(--btn-hover); }

.af-bar-btns {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}

.af-bar-btn {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-size: 10px;
  line-height: 1;
  color: var(--text-dim);
  cursor: default;
}

.af-bar-btn:hover {
  border-color: var(--line);
  background: var(--btn-hover);
  color: var(--text);
}

.af-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* 그룹 사이 손잡이 */
.af-gsplit { background: var(--window); }

.af-gsplit.h { flex: 0 0 4px; cursor: row-resize; }

.af-gsplit.v { flex: 0 0 4px; cursor: col-resize; }

.af-gsplit:hover { background: var(--accent); }

/* ── 띄운 창 ───────────────────────────────────────────────── */
.af-float-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
}

.af-float {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  min-height: 110px;
  border: 2px solid var(--accent);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
  background: var(--panel);
  resize: none;
}

.af-float .af-bar {
  background: var(--accent);
  color: var(--sel-tx);
  cursor: move;
}

.af-float .af-bar-btn { color: var(--sel-tx); }

.af-float .af-tab { cursor: move; }

/* 오른쪽 아래 크기 손잡이 */
.af-float::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 45%, var(--text-dim) 45%, var(--text-dim) 55%, transparent 55%),
    linear-gradient(135deg, transparent 70%, var(--text-dim) 70%, var(--text-dim) 80%, transparent 80%);
}

/* ── 드래그 중 표시 ────────────────────────────────────────── */
body.af-dragging { cursor: grabbing; }

body.af-dragging * { cursor: grabbing !important; }

.af-ghost {
  position: fixed;
  z-index: 200;
  padding: 3px 10px;
  background: var(--accent);
  color: var(--sel-tx);
  font-size: 11.5px;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  pointer-events: none;
  white-space: nowrap;
}

.af-hint {
  position: fixed;
  z-index: 190;
  pointer-events: none;
  background: rgba(56, 116, 216, .22);
  border: 2px solid var(--accent);
}

.af-hint[data-mode="tab"] { background: rgba(56, 116, 216, .3); border-style: solid; }

.af-hint[data-mode="float"] { border-style: dashed; background: rgba(56, 116, 216, .14); }

/* ── 보관함(화면 밖) ───────────────────────────────────────── */
.af-pool {
  position: fixed;
  left: -99999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 도크 본체는 그룹 본문을 꽉 채운다 */
.af-dock {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}