/* ═══════════════════════════════════════════════════════════════════════
   DB상세 통합뷰 — 카드 그리드 (2026-10-11) — 실적상세(_order_detail_unified.css)의 dbl 쌍둥이
   · 이 파일은 그쪽을 `ord-unified → dbl-unified` 등으로 옮긴 것 — 한쪽을 고치면 다른 쪽도 같이 고칠 것
   · 동작·저장 계약(db_detail_unified_controller.js · localStorage · flex 분배 · 핸들 18px 상수)은 건드리지 않고 시각만
   ═══════════════════════════════════════════════════════════════════════ */

/* 패널 — 모달 본문 전체를 채우는 flex 열 */
.rmm-tab-panel.rmm-tab-panel-active.dbl-detail-panel {   /* gem 의 .rmm-tab-panel.rmm-tab-panel-active{display:block} 보다 특이도 높게 */
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 12px 8px 12px 12px;
  background: var(--ord-band);
}

/* Multi-Sortable per column 레이아웃 — CSS Grid 가 컬럼 + 핸들 트랙(18px)을 정의, 각 컬럼은 flex column */
.dbl-unified-grid {
  display: grid;
  align-items: start;
  gap: 0;
}
.dbl-unified-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 80px;       /* 빈 컬럼에도 drop zone 확보 */
  min-width: 0;           /* grid track 안에서 카드 overflow 방지 */
}

/* 채움 모드(2열 이상): 컬럼이 패널 높이를 채우고 카드가 flex 비율로 수직 분할 */
.dbl-unified-grid.dbl-fill {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.dbl-unified-grid.dbl-fill .dbl-unified-column {
  min-height: 0;
  overflow-y: auto;       /* 카드가 컬럼 높이를 초과하면 컬럼 자체 스크롤(안전망) */
  scrollbar-width: none;
}
.dbl-unified-grid.dbl-fill .dbl-unified-column::-webkit-scrollbar { display: none; }

/* 카드 */
.dbl-unified-card {
  background: var(--ord-surface);
  border: 1px solid var(--ord-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--ord-shadow-pill);
  transition: box-shadow .18s, border-color .18s, opacity .18s;
}
.dbl-unified-grid.dbl-fill .dbl-unified-card {
  flex: 1 1 0;
  min-height: 120px;
  display: flex;
  flex-direction: column;
}

/* 카드 머리 — 드래그 핸들 · 제목 · 우측 도구 */
.dbl-unified-card-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px 0 8px;
  background: var(--ord-surface);
  border-bottom: 1px solid var(--ord-line-soft);
}
.dbl-unified-card-title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.dbl-unified-card-name {
  position: relative;
  margin: 0;
  padding-left: 4px;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ord-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dbl-unified-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 6px;
  color: var(--ord-text-5);
  cursor: grab;
  transition: color .12s, background .12s;
}
.dbl-unified-card:hover .dbl-unified-drag-handle { color: var(--ord-text-3); }
.dbl-unified-drag-handle:hover { color: var(--ord-head-bg); background: var(--ord-band); }
.dbl-unified-drag-handle:active { cursor: grabbing; }
.dbl-unified-card-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* 카드 높이 리셋 아이콘 — 사용자가 높이를 조정했을 때만 스크립트가 inline-flex 로 노출 */
.dbl-unified-height-reset {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ord-text-3);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dbl-unified-height-reset:hover {
  background: var(--ord-band);
  color: var(--ord-head-bg);
  border-color: var(--ord-line);
}
.dbl-unified-height-reset:active { transform: translateY(.5px); }

/* 편집 액션(취소/저장) — 편집 모드일 때만 노출 */
.dbl-unified-card-actions { display: none; gap: 6px; }
.dbl-unified-card.dbl-edit-mode .dbl-unified-card-actions { display: flex; }
.dbl-unified-btn {
  height: 28px;
  padding: 0 14px;
  border: 1px solid var(--ord-line);
  border-radius: 999px;
  background: var(--ord-surface);
  color: var(--ord-text-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.dbl-unified-btn:hover { background: var(--ord-band); }
.dbl-unified-btn.is-primary {
  border-color: var(--ord-head-bg);
  background: var(--ord-head-bg);
  color: var(--ord-on-solid);
}
.dbl-unified-btn.is-primary:hover { filter: brightness(1.08); }

/* 카드 본문 — 스크립트가 사용자 높이를 inline height 로 적용, 지우면 이 기본값 복원 */
.dbl-unified-card-body {
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.dbl-unified-card-body.is-padded { padding: 14px; }
.dbl-unified-grid.dbl-fill .dbl-unified-card-body {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}

/* 컬럼 사이 핸들 — 18px 트랙이 간격을 겸한다: 평소 가운데 짧은 알약 / 호버·드래그 시 차콜로 길어짐 */
.dbl-unified-resize-handle {
  position: relative;
  align-self: stretch;
  cursor: col-resize;
  user-select: none;
}
.dbl-unified-resize-handle::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 36px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: transparent;
  transition: background .15s, height .15s;
}
.dbl-unified-grid:hover .dbl-unified-resize-handle::before { background: var(--ord-line-2); }
.dbl-unified-resize-handle:hover::before,
.dbl-unified-resize-handle.is-resizing::before {
  background: var(--ord-head-bg);
  height: 72px;
}

/* 카드 아래 높이 핸들 — 카드 안쪽 아래 9px, 가운데 짧은 알약 */
.dbl-unified-card-resize-handle {
  position: relative;
  flex: none;
  height: 9px;
  cursor: row-resize;
  user-select: none;
}
.dbl-unified-card-resize-handle::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: var(--ord-line);
  transition: background .15s, width .15s;
}
.dbl-unified-card-resize-handle:hover::before,
.dbl-unified-card-resize-handle.is-resizing::before {
  background: var(--ord-head-bg);
  width: 56px;
}
/* 컬럼의 마지막 카드는 아래 핸들 숨김(분할할 카드가 없음) — 채움 모드 한정 */
.dbl-unified-grid.dbl-fill .dbl-unified-card:last-child .dbl-unified-card-resize-handle { display: none; }

/* 리사이즈 중 — 전역 커서 + 텍스트 선택 차단 */
.dbl-resizing, .dbl-resizing * { cursor: col-resize !important; user-select: none !important; }
.dbl-resizing-vert, .dbl-resizing-vert * { cursor: row-resize !important; user-select: none !important; }

/* 편집 모드 — 차콜 링으로 강조(편집 중 카드는 드래그 불가 표시) */
.dbl-unified-card.dbl-edit-mode {
  border-color: var(--ord-head-bg);
  box-shadow: 0 0 0 2px var(--ord-head-bg), var(--ord-shadow-pill);
}
.dbl-unified-card.dbl-edit-mode .dbl-unified-drag-handle {
  cursor: not-allowed;
  color: var(--ord-text-5);
  background: transparent;
}

/* Sortable.js 시각 피드백 */
.dbl-unified-card.sortable-chosen .dbl-unified-drag-handle { cursor: grabbing; color: var(--ord-head-bg); }
.dbl-unified-card.sortable-ghost {
  opacity: .4;
  background: var(--ord-band);
  border-color: var(--ord-head-bg);
  border-style: dashed;
  box-shadow: none;
}
.dbl-unified-card.sortable-drag {
  opacity: .96;
  box-shadow: var(--ord-shadow);
  transform: rotate(.6deg);
}

/* 모달 서브메뉴 우측 컨트롤 — 스크립트가 동적 삽입(컬럼 −N+ · 기본 순서로 복원) */
.rmm-submenu [data-dbl-controls-wrapper] {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
}
[data-dbl-cols-control] {
  display: inline-flex;
  align-items: center;
  height: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
}
[data-dbl-cols-control] .dbl-cols-label {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 10px 0 12px;
  border-right: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .78);
  font-size: 11.5px;
  font-weight: 500;
}
[data-dbl-cols-control] button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ord-on-solid);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .12s;
}
[data-dbl-cols-control] button:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
[data-dbl-cols-control] button:disabled { opacity: .32; cursor: not-allowed; }
[data-dbl-cols-control] [data-dbl-cols-display] {
  min-width: 22px;
  padding: 0 2px;
  text-align: center;
  color: var(--ord-on-solid);
  font-size: 12px;
  font-weight: 600;
}
[data-dbl-reset-wrapper] { display: none; align-items: center; }
[data-dbl-reset-wrapper].is-visible { display: inline-flex; }
[data-dbl-reset-order] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: var(--ord-on-solid);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s;
}
[data-dbl-reset-order]:hover { background: rgba(255, 255, 255, .22); }