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

.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;
}
/* 제목·부제를 한 덩어리(.txt)로 묶고, 남는 폭이 모자라면 둘 다 말줄임한다.
   묶지 않으면 부제("20.3 MB · 2026. 07. 28. · 1/3")가 nowrap 이라 안 줄어들고,
   좁은 화면에서 오른쪽 .act 를 화면 밖으로 밀어낸다. 이 창은 position:fixed 라
   옆으로 스크롤도 안 되므로, 그렇게 되면 닫기 버튼을 아예 못 누른다. */
.dv-modal .head .txt { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.dv-modal .head .act { flex: none; display: flex; align-items: center; gap: 8px; }
.dv-modal .head .t { flex: 1 2 auto; min-width: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-modal .head .s { flex: 0 1 auto; min-width: 0; font-size: 12.5px; color: #cbd0d8; overflow: hidden; text-overflow: ellipsis; 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; }
/* 높이를 100vh 에서 빼서 쓰지 않는다. 모바일의 100vh 는 주소창이 숨겨진 상태의
   높이라, 주소창이 보이는 동안에는 그만큼(80~110px) 아래가 브라우저 UI 밑으로
   잘린다. 대신 .dv-modal 이 이미 fixed·inset:0 로 높이가 확정돼 있으니
   그 안의 1fr 칸을 flex 로 쓰고 자식은 그 칸의 100% 로 맞춘다. 머리줄이
   두 줄이 되든 세 줄이 되든 알아서 따라간다(90px 같은 어림수가 필요 없다). */
.dv-modal .stage {
  display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 0 16px 20px;
}
.dv-modal .stage > * { max-width: 100%; max-height: 100%; }
.dv-modal .stage img { object-fit: contain; }
.dv-modal .stage iframe { flex: none; width: min(1000px, 100%); height: 100%; border: 0; background: #fff; border-radius: 8px; }
.dv-modal .stage pre {
  align-self: start; flex: none; width: min(1000px, 100%); max-height: 100%; 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 .head { gap: 10px; padding: 10px 12px; }
  .dv-modal .head .txt { flex-direction: column; align-items: flex-start; gap: 1px; }

  /* 앞뒤 버튼을 화면 옆이 아니라 아래로 내린다. 옆에 두면 사진 위에 겹쳐
     그림을 가리고, 엄지로도 닿기 먼 위치다. 대신 stage 아래 여백을 그만큼
     띄워 두면 max-height:100% 가 알아서 줄어들어 버튼과 겹치지 않는다. */
  .dv-modal .stage { padding: 0 10px 68px; }
  .dv-modal .nav { top: auto; bottom: 14px; transform: none; width: 46px; height: 44px; }
}

/* 목록 보기에서 '수정한 날짜'는 nowrap 이라 좁은 화면에서 이름 칸을 열 몇 글자로
   짓눌러 버린다. 파일 목록에서만 뺀다(휴지통 표는 열 구성이 달라 건드리면 안 된다). */
@media (max-width: 560px) {
  .dv-list.files th:nth-child(3), .dv-list.files td:nth-child(3) { display: none; }
}

/* ── 손가락으로 쓰는 기기 ───────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* iOS 사파리는 글자가 16px 보다 작은 입력칸에 초점이 가면 화면을 확대하고,
     초점이 빠져도 되돌리지 않는다. 페이지 쪽 `input { font: inherit }` 를
     이기려면 선택자를 한 단계 더 좁혀야 한다. */
  .dv .dv-search { font-size: 16px; }
  /* 손가락으로 누르기엔 24~30px 짜리 표적이 너무 작다. */
  .dv-crumbs button { padding: 8px 10px; }
  .dv-viewtoggle button { padding: 10px 13px; }
}

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