/* 파일 관리 창(docs/features/files.md, modals/files.js) — 환경설정·메신저와 같은 사이드바 셸(.settings-shell/.side-nav/.settings-content).
   왼쪽 폴더 나무, 오른쪽은 [경로·찾기·정렬 머리줄 + (선택 줄) + 칸 목록 + (재생 판)]. 글자 크기는 homepage.css 글꼴 구역(.files-meta). */
.files-app { height: 100%; min-height: 0; overflow: hidden; box-sizing: border-box; }
.files-content { gap: var(--space-3); container-type: inline-size; container-name: files; }

/* 폴더 나무 — 깊이마다 들여 쓴다. 펼침 화살표 자리는 늘 비워 둬 이름 시작선이 맞는다. */
.files-nav-item { justify-content: flex-start !important; gap: var(--space-2); padding-left: calc(9px + var(--depth, 0) * 14px) !important; } /* 메뉴 버튼 기본(space-between)이면 아이콘·이름이 흩어졌다 */
.files-nav-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-twisty, .files-nav-icon { flex: 0 0 16px; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.files-twisty svg, .files-nav-icon svg { width: 14px; height: 14px; }
.files-twisty[role="button"] { border-radius: var(--radius-xs); cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .files-twisty svg { transition: transform var(--motion-fast) ease; } }
.files-twisty.is-open svg { transform: rotate(90deg); }

/* 머리줄: ☰ · 경로(남는 폭) · 찾기 · 정렬 */
.files-head { flex-wrap: nowrap; align-items: center; gap: var(--space-3); min-height: 30px; padding: 0 2px; }
.files-crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-1); overflow: hidden; white-space: nowrap; }
.files-crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.files-crumb.is-current { flex: 0 1 auto; }
.files-crumb-sep { flex: 0 0 12px; display: inline-flex; opacity: .5; }
.files-crumb-sep svg { width: 12px; height: 12px; }
.files-search { flex: 0 1 180px; min-width: 90px; }

.files-selbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 2px; } /* 옆 여백은 머리줄(.files-head)과 같게 */
.files-selbar[hidden], .files-player[hidden] { display: none; }
.files-selbar > span { margin-right: auto; }

.files-body { flex: 1; min-height: 0; overflow: auto; padding-bottom: var(--space-8); }

/* 큰 아이콘 — 칸 최소 폭 140px(⋯ 크기 슬라이더가 --grid-min 으로 바꾼다), 썸네일은 정사각 안에 맞춘다. */
.files-grid:not(.is-list-view) { grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 140px), 100%), 1fr)); gap: var(--space-2); }
.files-cell { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.files-thumb { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-sm);
  background: rgba(var(--system-c-area-b-base-divider-rgb), var(--system-c-area-b-base-divider-alpha)); }
.files-img { width: 100%; height: 100%; object-fit: contain; }
.files-kind-icon { display: inline-flex; align-items: center; justify-content: center; width: 40%; min-width: 28px; max-width: 72px; opacity: .7; } /* 가운데(예전엔 svg 만 40% 라 왼쪽에 붙었다) */
.files-kind-icon svg { width: 100%; height: auto; aspect-ratio: 1; }
.files-img.is-cover { object-fit: cover; }
.files-folder-badge { position: absolute; left: var(--space-2); bottom: var(--space-2); display: inline-flex; padding: 4px; border-radius: var(--radius-sm); background: rgba(var(--system-c-area-b-base-rgb), .9); color: var(--focus-color); }
.files-folder-badge svg { width: 16px; height: 16px; }
.files-cell.is-folder .files-kind-icon { color: var(--focus-color); opacity: 1; }
.files-cell .grid-cell-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.files-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); opacity: .7; }
.files-private { color: var(--focus-color); }

/* 자세히(리스트) — 한 줄에 작은 썸네일 · 이름 · 크기·날짜. */
.files-grid.is-list-view { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
.files-grid.is-list-view .files-cell { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: var(--space-5); padding: var(--space-2) var(--space-4); }
.files-grid.is-list-view .files-thumb { width: 36px; height: 36px; }
.files-grid.is-list-view .grid-cell-body { flex-direction: row; align-items: center; gap: var(--space-6); }
.files-grid.is-list-view .files-name { flex: 1; }
.files-grid.is-list-view .files-meta { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; }
.files-grid.is-list-view .files-meta > span:first-child { min-width: 56px; text-align: right; }

/* 소리·영상은 창 아래 판에서 그 자리에서 재생한다. */
.files-player { display: flex; flex-direction: column; gap: var(--space-3); max-height: 50%; }
.files-player-head { display: flex; align-items: center; gap: var(--space-3); }
.files-player-head .files-name { flex: 1; }
.files-player-head svg { width: 16px; height: 16px; }
.files-player audio { width: 100%; }
.files-player video { width: 100%; min-height: 0; max-height: 100%; background: #000; border-radius: var(--radius-sm); }

/* 좁은 창: 찾기 칸은 줄고 경로를 먼저 줄인다(정렬은 창 ⋯ 더보기). 리스트의 날짜·크기는 이름 아래로. */
@container files (max-width: 520px) {
  .files-search { flex-basis: 110px; }
  .files-grid:not(.is-list-view) { grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 100px), 100%), 1fr)); } /* 폰: 세 칸(두 칸이면 칸이 화면 반을 먹었다) */
  .files-grid.is-list-view .grid-cell-body { flex-direction: column; align-items: stretch; gap: 1px; }
  .files-grid.is-list-view .files-meta { justify-content: flex-start; }
  .files-grid.is-list-view .files-meta > span:first-child { min-width: 0; text-align: left; }
}

/* 창 ⋯ 더보기의 정렬 세그먼트 — 판 안 버튼은 투명·판 글자색으로 눌려(homepage.css), 고른 칸만 Focus 색으로 되살린다. 바탕은 판의 강조색. */
.window-more-menu .files-sort-row .cal-seg { background: var(--panel-accent-bg); }
.window-more-menu .files-sort-row .cal-seg > button.is-active { background: var(--focus-color) !important; color: var(--focus-font-color) !important; }
.window-more-menu .files-sort-row .cal-seg > button { flex: 1 0 auto; padding: 5px 6px; } /* 좁은 폰에서 "큰 파일순" 끝 글자가 잘렸다 */