/* 드라이브식 파일 탐색기 — 관리자 페이지와 공개 페이지가 함께 쓴다. */

.dv {
  --dv-tile: 168px;
  --dv-radius: 12px;
}

/* ── 상단 도구 모음 ─────────────────────────────────────────── */
.dv-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.dv-crumbs {
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 260px; min-width: 0; flex-wrap: wrap;
  font-size: 15px;
}
.dv-crumbs button {
  border: 0; background: none; padding: 4px 8px; border-radius: 7px;
  color: var(--fg); cursor: pointer; font: inherit;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-crumbs button:hover { background: var(--line); color: var(--fg); }
.dv-crumbs button:last-child { font-weight: 600; }
.dv-crumbs .sep { color: var(--muted); font-size: 13px; user-select: none; }

.dv-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-search { width: 200px; }
.dv-viewtoggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dv-viewtoggle button {
  border: 0; border-radius: 0; padding: 7px 10px; background: var(--bg);
  display: grid; place-items: center;
}
.dv-viewtoggle button.on { background: var(--accent); color: #fff; }
.dv-viewtoggle button.on:hover { color: #fff; }
.dv-viewtoggle svg { display: block; }

/* ── 선택 시 뜨는 동작 막대 ─────────────────────────────────── */
.dv-selbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 12px;
  border: 1px solid var(--accent); border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.dv-selbar .count { font-size: 14px; font-weight: 600; margin-right: 4px; }
.dv-selbar .spacer { flex: 1; }

/* ── 내용 영역 ──────────────────────────────────────────────── */
.dv-body {
  position: relative;
  min-height: 240px;
  border: 2px dashed transparent;
  border-radius: var(--dv-radius);
  transition: border-color .12s, background .12s;
  padding: 2px;
}
.dv-body.drop {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.dv-dropmsg {
  position: absolute; inset: 0; display: none;
  place-items: center; pointer-events: none;
  font-size: 15px; font-weight: 600; color: var(--accent);
}
.dv-body.drop .dv-dropmsg { display: grid; }
.dv-body.drop .dv-grid, .dv-body.drop .dv-list { opacity: .35; }

.dv-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 56px 20px; }
.dv-empty b { display: block; color: var(--fg); font-size: 15px; margin-bottom: 4px; }

/* ── 격자 보기 ──────────────────────────────────────────────── */
.dv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--dv-tile), 1fr));
  gap: 12px;
}
.dv-tile {
  border: 1px solid var(--line); border-radius: var(--dv-radius);
  background: var(--bg); cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .12s, box-shadow .12s, background .12s;
  user-select: none;
}
.dv-tile:hover { border-color: var(--muted); box-shadow: 0 2px 10px rgb(0 0 0 / .07); }
.dv-tile.sel {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
}
.dv-tile.dragover { border-color: var(--accent); border-style: dashed; }
.dv-tile .prev {
  height: 104px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  overflow: hidden;
}
.dv-tile.folder .prev { background: none; height: 84px; }
.dv-tile .prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-tile .meta { padding: 9px 11px 11px; min-width: 0; }
.dv-tile .nm {
  font-size: 13.5px; line-height: 1.35; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dv-tile .sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; display: flex; gap: 6px; align-items: center; }

/* ── 목록 보기 ──────────────────────────────────────────────── */
.dv-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.dv-list th {
  text-align: left; padding: 8px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.dv-list td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dv-list tr { cursor: pointer; user-select: none; }
.dv-list tbody tr:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.dv-list tbody tr.sel { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.dv-list tbody tr.dragover td { box-shadow: inset 0 0 0 2px var(--accent); }
.dv-list .c-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dv-list .c-name span { word-break: break-all; }
.dv-list .c-thumb { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; flex: none; }
.dv-list .num { text-align: right; white-space: nowrap; color: var(--muted); }

/* ── 아이콘 ─────────────────────────────────────────────────── */
.dv-ico { flex: none; }
.dv-ico.folder { color: #f6c344; }
.dv-ico.image  { color: #34a853; }
.dv-ico.video  { color: #ea4335; }
.dv-ico.audio  { color: #a142f4; }
.dv-ico.pdf    { color: #ea4335; }
.dv-ico.sheet  { color: #188038; }
.dv-ico.zip    { color: #8b6b3e; }
.dv-ico.code   { color: #4285f4; }
.dv-ico.text   { color: #5f6368; }
.dv-ico.file   { color: #5f6368; }

.dv-badge {
  font-size: 10.5px; padding: 0 6px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.dv-badge.pub { color: var(--ok); }

/* ── 미리보기 ───────────────────────────────────────────────── */
.dv-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(0 0 0 / .82);
  display: grid; grid-template-rows: auto 1fr;
}
.dv-modal .head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; color: #fff;
}
.dv-modal .head .t { flex: 1; min-width: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-modal .head .s { font-size: 12.5px; color: #cbd0d8; white-space: nowrap; }
.dv-modal .head button, .dv-modal .head a {
  border: 1px solid rgb(255 255 255 / .3); background: none; color: #fff;
  padding: 5px 12px; border-radius: 8px; font-size: 13.5px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.dv-modal .head button:hover, .dv-modal .head a:hover { background: rgb(255 255 255 / .14); color: #fff; }
.dv-modal .stage {
  display: grid; place-items: center; overflow: auto; padding: 0 16px 20px;
}
.dv-modal .stage > * { max-width: 100%; max-height: calc(100vh - 90px); }
.dv-modal .stage img { object-fit: contain; }
.dv-modal .stage iframe { width: min(1000px, 100%); height: calc(100vh - 90px); border: 0; background: #fff; border-radius: 8px; }
.dv-modal .stage pre {
  align-self: start; width: min(1000px, 100%); max-height: calc(100vh - 90px); overflow: auto;
  background: #14171c; color: #dfe3e9; padding: 16px; border-radius: 10px;
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-all;
}
.dv-modal .stage .none { color: #cbd0d8; text-align: center; font-size: 14px; }
.dv-modal .nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  border: 0; background: rgb(255 255 255 / .12); color: #fff;
  width: 44px; height: 60px; border-radius: 10px; cursor: pointer; font-size: 20px;
  display: grid; place-items: center;
}
.dv-modal .nav:hover { background: rgb(255 255 255 / .24); color: #fff; }
.dv-modal .nav.prev { left: 12px; }
.dv-modal .nav.next { right: 12px; }

@media (max-width: 640px) {
  .dv { --dv-tile: 132px; }
  .dv-search { width: 100%; }
  .dv-tools { width: 100%; }
  .dv-modal .nav { width: 36px; height: 48px; }
}

/* 업로드 진행 */
.dv-prog { margin-top: 10px; }
.dv-prog progress { width: 100%; height: 6px; }
.dv-prog .lbl { font-size: 12.5px; color: var(--muted); }