/*! © 2026 해밀 (haemil.ai). All rights reserved. 무단 복제·배포 금지. */
/* 디스크 공간 (disk.js): a page in a pane, on style.css's colours, fonts and menus. */
:root {
  /* The file types, in disk.rs's order: 기타, 응용 프로그램, 시스템, 코드, 미디어, 압축 파일, 문서, then by folder: 캐시, 개발,
     휴지통, 가상 머신·컨테이너, 앱 데이터. Muted, and told apart by hue or, for neighbours in hue, by lightness. */
  --k0: #9aa0a6; --k1: #a879d6; --k2: #7f93ad; --k3: #4f8fdc; --k4: #e0716b; --k5: #e3b341; --k6: #5fb36a;
  --k7: #45ada5; --k8: #a07a52; --k9: #d47fb0; --k10: #9aa84a; --k11: #ee9b5e;
  --used: color-mix(in srgb, var(--dim) 45%, transparent);
  /* Treemap blocks: one muted hue each (--h), a darker block with lighter boxes inside. */
  --blk-s: 30%; --blk-l: 74%; --box-s: 48%; --box-l: 88%; --edge-l: 64%; --box-text: #1b1b1b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --k0: #8e939a; --k1: #b48ae6; --k2: #8697b0; --k3: #5b9cf0; --k4: #ec7b72; --k5: #e8c04f; --k6: #6cc278;
    --k7: #52c0b7; --k8: #b88d62; --k9: #e08dbd; --k10: #adbb5b; --k11: #f2a66e;
    --blk-s: 20%; --blk-l: 33%; --box-s: 30%; --box-l: 62%; --edge-l: 44%;
  }
}

.dpage { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* The header: what to scan, the folder's size, then the zoom, which goes under the rest in a very narrow pane. */
.dhead { min-height: 40px; box-sizing: border-box; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 7px 10px 7px 14px; min-width: 0; }
.dhead select, .dscan { height: 26px; border-radius: 4px; font: inherit; font-size: 12px; }
.dhead select { min-width: 60px; max-width: 220px; flex: 0 1 auto; padding: 0 6px; color: var(--text); background: var(--field); border: 1px solid var(--field-line); }
.dscan { flex: none; min-width: 56px; padding: 0 12px; border: 1px solid var(--accent); background: var(--accent); color: var(--pane); }
.dscan.stop { background: var(--field); color: var(--text); border-color: var(--field-line); }
.dsize { flex: 1 1 0; min-width: 0; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--dim); }
.dzoom { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.dz { flex: none; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; font-size: 11px; }
.dz:hover:not(:disabled) { background: var(--hover); }
.dz:disabled { opacity: .35; }
.dzl { flex: none; min-width: 36px; text-align: center; font-size: 12px; color: var(--dim); }

/* The treemap on the left, the cards on the right; in a narrow pane the cards go under it. */
.dbody { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 0 12px 12px 14px; }
.dmapwrap { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 6px; background: var(--chrome); }
.dmapwrap.zoomed { overflow: auto; }
.dmap { position: relative; }
.dcards { width: 300px; flex: none; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
@container (max-width: 700px) {
  .dbody { flex-direction: column; overflow-y: auto; }
  .dmapwrap { flex: none; height: max(260px, 62%); }
  .dcards { width: auto; overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; }
}

.blk, .box { position: absolute; box-sizing: border-box; overflow: hidden; }
.blk { background: hsl(var(--h) var(--blk-s) var(--blk-l)); border-radius: 4px; }
.blk.dir:hover, .box.dir:hover { filter: brightness(1.06); }
.hd { display: flex; gap: 6px; height: 18px; align-items: center; padding: 0 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.hd .nm, .box .nm { overflow: hidden; text-overflow: ellipsis; }
.hd .sz { margin-left: auto; font-weight: 400; color: var(--dim); }
.box {
  padding: 2px 4px; border-radius: 2px; font-size: 10.5px; line-height: 1.3; color: var(--box-text);
  background: hsl(var(--h) var(--box-s) var(--box-l)); border: 1px solid hsl(var(--h) var(--blk-s) var(--edge-l));
}
.box .nm { display: block; white-space: nowrap; }
.box .sz { display: block; opacity: .7; white-space: nowrap; }
.box.file { background: hsl(var(--h) calc(var(--box-s) - 12%) calc(var(--box-l) + 3%)); }
.box.more, .blk.more { background: repeating-linear-gradient(135deg, transparent 0 4px, hsl(var(--h) var(--blk-s) var(--edge-l) / .35) 4px 5px); }
.blk.more { background-color: color-mix(in srgb, var(--dim) 18%, transparent); }
.blk.leaf { padding: 4px 6px; font-size: 11px; }
.blk.leaf .nm, .blk.leaf .sz { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk.leaf .sz { color: var(--dim); }
.dnote { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 16px; text-align: center; color: var(--dim); }

.card { background: var(--chrome); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 12px; }
.card h2 { margin: 0 0 8px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.card h2 svg { color: var(--accent); }
.vrow { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.vrow.dim { color: var(--dim); }
.vname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbar { display: flex; height: 8px; margin: 8px 0 6px; border-radius: 4px; overflow: hidden; background: var(--line); }
.vbar span { display: block; height: 100%; }

.donut { display: grid; place-items: center; margin: 4px 0 10px; }
.donut svg text { fill: var(--text); text-anchor: middle; }
.legend { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.legend li { display: flex; align-items: center; gap: 8px; height: 21px; }
.legend .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.legend .k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend .n { margin-left: auto; flex: none; }
.legend .p { width: 34px; flex: none; text-align: right; color: var(--dim); }

.paths { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; font-size: 12px; }
.paths li { display: flex; gap: 8px; height: 21px; align-items: center; padding: 0 4px; border-radius: 4px; }
.paths li:hover { background: var(--hover); }
.paths .p { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paths .s { margin-left: auto; flex: none; color: var(--dim); }
.paths .none { color: var(--dim); }

/* The status bar's line: folders it couldn't count for want of Full Disk Access. */
#count .warn { color: var(--text); text-decoration: underline dotted; }