/* 미디어 선택 모달 (2026-10-27 개편, 시안 A 탐색기 사이드형) — 색은 전부 var(--ord-*) 토큰(라이트/다크 공통, 규칙 14).
   마크업: companies/tabs/_media_select_modal.html.erb · 동작: controllers/media_select_controller.js · 렌더 헬퍼: utils/media_picker.js */

.mp { display: grid; grid-template-columns: 214px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; position: relative; background: var(--ord-surface-2); color: var(--ord-text); font-size: 13px; }
.mp button, .mp input, .mp select { font: inherit; }
.mp .mp-ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── 왼쪽 레일 ── */
.mp-rail { width: 214px; flex: none; display: flex; flex-direction: column; padding: 14px 10px 12px; overflow-y: auto; background: var(--ord-surface); border-right: 1px solid var(--ord-line); }
.mp-rail h6 { margin: 14px 8px 6px; font-size: 11px; font-weight: 600; color: var(--ord-text-4); }
.mp-rail h6:first-child { margin-top: 0; }
.mp-rv { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--ord-text-2); font-size: 12.5px; text-align: left; cursor: pointer; }
.mp-rv:hover { background: var(--ord-surface-2); }
.mp-rv.is-on { background: var(--ord-accent-soft); color: var(--ord-accent); font-weight: 600; }
.mp-rv.is-sub { padding-left: 26px; height: 29px; font-size: 12px; }
.mp-rv .mp-ic { color: var(--ord-text-4); }
.mp-rv.is-on .mp-ic { color: var(--ord-accent); }
.mp-rv .mp-n { margin-left: auto; font-size: 11.5px; color: var(--ord-text-4); font-weight: 400; font-variant-numeric: tabular-nums; }
.mp-rv .mp-n.is-warn { color: var(--ord-tint-amber-fg); font-weight: 600; }
.mp-rv .mp-state { font-size: 10px; padding: 0 5px; border-radius: 8px; background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); font-weight: 600; }
.mp-rv.is-add { color: var(--ord-accent); }
.mp-gm { width: 16px; height: 16px; border-radius: 4px; color: var(--ord-text-4); display: none; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.mp-rv:hover .mp-gm { display: inline-flex; }
.mp-gm:hover { background: var(--ord-line); color: var(--ord-text-2); }
.mp-ginp { width: calc(100% - 20px); margin: 2px 10px; height: 28px; }
.mp-rfoot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--ord-line); font-size: 11.5px; color: var(--ord-text-3); }
.mp-rfoot small { color: var(--ord-text-4); }

/* ── 본문 ── */
.mp-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mp-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 18px 10px; }
.mp-grow { flex: 1; }
.mp-sch { position: relative; display: inline-flex; align-items: center; }
.mp-sch .mp-ic { position: absolute; left: 9px; color: var(--ord-text-4); pointer-events: none; }
.mp-inp { height: 30px; border: 1px solid var(--ord-line-2); border-radius: 6px; background: var(--ord-input-bg); color: var(--ord-text); padding: 0 10px; font-size: 12.5px; outline: none; }
.mp-inp:focus { border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-focus-ring); }
.mp-sch .mp-inp { width: 230px; padding-left: 30px; }
.mp-size { display: inline-flex; align-items: center; gap: 6px; color: var(--ord-text-4); }
.mp-size input { width: 74px; accent-color: var(--ord-accent); }
.mp-hint { margin: 0 18px 2px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ord-text-4); }
.mp-hint b { color: var(--ord-text-3); font-weight: 600; }

.mp-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--ord-line-2); background: var(--ord-surface); color: var(--ord-text-2); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.mp-btn:hover { border-color: var(--ord-accent); color: var(--ord-accent); }
.mp-btn.is-pri { background: var(--ord-accent); border-color: var(--ord-accent); color: var(--ord-on-accent); font-weight: 600; }
.mp-btn.is-pri:hover { background: var(--ord-accent-strong); border-color: var(--ord-accent-strong); color: var(--ord-on-accent); }
.mp-btn.is-dng { color: var(--ord-tint-red-fg); border-color: var(--ord-tint-red-fg); }
.mp-btn.is-dng:hover { background: var(--ord-tint-red-bg); }
.mp-btn.is-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.mp-btn.is-ghost { border-color: transparent; background: transparent; }
.mp-btn[disabled] { opacity: .4; pointer-events: none; }
.mp-file { display: none; }

/* ── 안내 띠 (관리자 · 휴지통) ── */
.mp-panel { margin: 0 18px 10px; padding: 10px 14px; border: 1px solid var(--ord-line); border-left: 4px solid var(--ord-accent); border-radius: 8px; background: var(--ord-surface); }
.mp-panel.is-warn { border-color: var(--ord-tint-amber-line); border-left-color: var(--ord-tint-amber-fg); background: var(--ord-tint-amber-bg); }
.mp-panel-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: var(--ord-text-2); }
.mp-panel-t b { display: inline-flex; gap: 6px; align-items: center; color: var(--ord-text); }
.mp-panel.is-warn .mp-panel-t b .mp-ic { color: var(--ord-tint-amber-fg); }
.mp-panel-bt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mp-panel-d { margin: 6px 0 0; font-size: 11.5px; color: var(--ord-text-3); }
.mp-trbar { display: flex; align-items: center; gap: 10px; margin: 0 18px 8px; padding: 9px 12px; border-radius: 8px; background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); font-size: 12.5px; }
.mp-trbar .mp-btn { margin-left: auto; }

/* ── 업로드 진행 ── */
.mp-pend { margin: 0 18px 10px; padding: 10px 12px; border: 1px dashed var(--ord-line-2); border-radius: 8px; background: var(--ord-surface); }
.mp-pend[hidden] { display: none; }
.mp-prow { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.mp-prow img { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; background: var(--ord-surface-2); flex: none; }
.mp-prow .mp-pnm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-prow .mp-pbar { width: 120px; height: 5px; border-radius: 3px; background: var(--ord-line); overflow: hidden; flex: none; }
.mp-prow .mp-pbar i { display: block; height: 100%; background: var(--ord-accent); }
.mp-prow .mp-pst { width: 150px; text-align: right; color: var(--ord-text-3); flex: none; }
.mp-prow .mp-pst.is-err { color: var(--ord-tint-red-fg); }
.mp-prow .mp-pst.is-dup { color: var(--ord-tint-amber-fg); }

/* ── 타일 ── */
.mp-scroll { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 20px; }
.mp-tiles { display: grid; gap: 14px 12px; grid-template-columns: repeat(auto-fill, minmax(var(--mp-tw, 132px), 1fr)); }
.mp-tile { position: relative; min-width: 0; }
.mp-box { position: relative; aspect-ratio: 1; border-radius: 8px; background: var(--ord-surface-2); border: 1px solid var(--ord-line); overflow: hidden; cursor: pointer; }
.mp-box img, .mp-box video { width: 100%; height: 100%; object-fit: contain; display: block; }
.mp-tile.is-wide .mp-box img { padding: 14px; }
.mp-tile:hover .mp-box { border-color: var(--ord-accent); }
.mp-tile.is-sel .mp-box { border-color: var(--ord-accent); box-shadow: 0 0 0 2px var(--ord-accent); }
.mp-tile.is-trashed .mp-box { opacity: .78; cursor: default; }
.mp-nm { margin-top: 6px; font-size: 12px; color: var(--ord-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-mt { font-size: 11px; color: var(--ord-text-4); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-mt .is-gone { color: var(--ord-tint-amber-fg); font-weight: 600; }
.mp-mt .is-asset { color: var(--ord-accent); font-weight: 600; }
.mp-left { margin-top: 2px; font-size: 11px; color: var(--ord-tint-amber-fg); }
.mp-left.is-used { color: var(--ord-tint-red-fg); }
.mp-ck { position: absolute; left: 7px; top: 7px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ord-surface); background: var(--ord-overlay); color: var(--ord-on-solid); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; opacity: 0; transition: opacity .1s; }
.mp-tile:hover .mp-ck { opacity: 1; }
.mp-tile.is-sel .mp-ck { opacity: 1; background: var(--ord-accent); border-color: var(--ord-accent); color: var(--ord-on-accent); }
.mp-use { position: absolute; right: 6px; top: 6px; height: 18px; padding: 0 6px; border-radius: 9px; background: color-mix(in srgb, var(--ord-surface) 94%, transparent); border: 1px solid var(--ord-line); color: var(--ord-accent); font-size: 10.5px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.mp-use .mp-ic { width: 10px; height: 10px; }
.mp-badge { position: absolute; left: 7px; bottom: 7px; height: 18px; padding: 0 7px 0 5px; border-radius: 9px; background: var(--ord-accent); color: var(--ord-on-accent); font-size: 10px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.mp-badge .mp-ic { width: 10px; height: 10px; }
.mp-badge.is-shr { padding: 0; width: 18px; justify-content: center; background: color-mix(in srgb, var(--ord-surface) 94%, transparent); color: var(--ord-accent); }
.mp-dur { position: absolute; right: 6px; bottom: 6px; background: var(--ord-overlay); color: var(--ord-on-solid); font-size: 10.5px; padding: 1px 5px; border-radius: 4px; }
.mp-acts { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: 2px; padding: 4px; opacity: 0; transition: opacity .1s; background: linear-gradient(transparent, rgba(15, 22, 30, .55)); }
.mp-tile:hover .mp-acts { opacity: 1; }
.mp-acts button { width: 24px; height: 24px; border: 0; border-radius: 5px; background: color-mix(in srgb, var(--ord-surface) 92%, transparent); color: var(--ord-text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mp-acts button:hover { color: var(--ord-accent); }
.mp-acts button.is-d:hover { color: var(--ord-tint-red-fg); }
.mp-acts .mp-ic { width: 13px; height: 13px; }

.mp-empty { padding: 70px 20px; text-align: center; color: var(--ord-text-3); }
.mp-empty .mp-ic { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--ord-text-4); }
.mp-empty p { margin: 4px 0; }
.mp-empty .mp-t { font-size: 14px; color: var(--ord-text-2); }
.mp-more { display: flex; justify-content: center; padding: 18px 0 4px; }
.mp-spin { display: flex; justify-content: center; padding: 40px; }
.mp-spin i { width: 28px; height: 28px; border: 3px solid var(--ord-line); border-top-color: var(--ord-accent); border-radius: 50%; animation: mp-spin .8s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* ── 푸터 (선택 트레이 · 동작) ── */
.mp-foot { grid-column: 1 / -1; min-height: 56px; border-top: 1px solid var(--ord-line); background: var(--ord-surface); display: flex; align-items: center; gap: 12px; padding: 8px 18px; }
.mp-cnt { font-size: 12px; color: var(--ord-text-3); font-variant-numeric: tabular-nums; }
.mp-tray { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; overflow: hidden; }
.mp-it { position: relative; width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--ord-line); background: var(--ord-surface-2); flex: none; overflow: hidden; }
.mp-it img { width: 100%; height: 100%; object-fit: contain; }
.mp-it i { position: absolute; left: 0; top: 0; min-width: 13px; height: 13px; border-radius: 0 0 5px 0; background: var(--ord-accent); color: var(--ord-on-accent); font: 700 9px/13px inherit; text-align: center; font-style: normal; }
.mp-it button { position: absolute; right: 0; top: 0; width: 13px; height: 13px; border: 0; background: var(--ord-overlay); color: var(--ord-on-solid); font-size: 9px; line-height: 13px; padding: 0; display: none; cursor: pointer; }
.mp-it:hover button { display: block; }
.mp-it:hover i { display: none; }
.mp-flex { flex: 1; }

/* ── 영역(다른 영역 보기) · 호출 화면 제약 ── */
.mp-open { font-size: 10px; padding: 0 5px; border-radius: 8px; background: var(--ord-accent-soft); color: var(--ord-accent); font-weight: 600; margin-left: 2px; }
.mp-rv.is-more { color: var(--ord-accent); font-size: 12px; height: 28px; }
.mp-rv.is-more .mp-ic { color: var(--ord-accent); }
.mp-btn.is-pri.is-dis { opacity: .4; cursor: not-allowed; }
.mp-btn.is-pri.is-dis:hover { background: var(--ord-accent); border-color: var(--ord-accent); }
.mp-tile.is-locked .mp-box { opacity: .42; cursor: not-allowed; }
.mp-lk { position: absolute; left: 7px; top: 7px; height: 18px; padding: 0 7px; border-radius: 9px; background: var(--ord-tint-amber-bg); color: var(--ord-tint-amber-fg); font-size: 10.5px; font-weight: 600; display: flex; align-items: center; }

/* ── 끌어다 놓기 ── */
.mp-veil { position: absolute; inset: 0; z-index: 20; background: color-mix(in srgb, var(--ord-accent) 14%, transparent); display: none; align-items: center; justify-content: center; }
.mp-veil.is-on { display: flex; }
.mp-veil > div { border: 2px dashed var(--ord-accent); border-radius: 12px; background: var(--ord-surface); padding: 30px 54px; text-align: center; color: var(--ord-accent); font-weight: 600; }
.mp-veil-no { display: none; }
.mp-veil.is-no .mp-veil-ok { display: none; }
.mp-veil.is-no .mp-veil-no { display: block; }
.mp-veil small { display: block; margin-top: 4px; font-weight: 400; color: var(--ord-text-3); }

/* 그룹 이동 팝업(body 에 붙음 — rmm 모달 1500~8000 대역보다 위 = 채팅 컨텍스트 메뉴와 같은 12000) */
.mp-pop { position: fixed; z-index: 12000; width: 176px; padding: 4px; background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 8px; box-shadow: var(--ord-shadow); max-height: 260px; overflow-y: auto; }
.mp-pop button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--ord-text-2); font-size: 12px; text-align: left; cursor: pointer; }
.mp-pop button:hover { background: var(--ord-surface-2); }
.mp-pop button.is-cur { color: var(--ord-accent); font-weight: 700; }
.mp-pop .mp-ic { width: 13px; height: 13px; color: var(--ord-text-4); }

@media (max-width: 860px) {
  .mp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .mp-rail { width: auto; flex-direction: row; overflow-x: auto; padding: 8px; border-right: 0; border-bottom: 1px solid var(--ord-line); }
  .mp-rail h6, .mp-rfoot, .mp-rv.is-sub { display: none; }
  .mp-rv { width: auto; flex: none; }
  .mp-sch .mp-inp { width: 160px; }
}