/* 프로젝트 Finder — 모바일(≤810px · D16 · iOS 파일 앱 방식). spec_project_finder §8.
 *   첫 화면 = 사이드바(목록형) · 폴더를 누르면 한 칸 밀려 들어가고 툴바에 '‹ 뒤로' · 보기는 목록·아이콘 둘만(finder.css ⑧) ·
 *   길게 누르기 = 메뉴 + 선택 모드(체크 원) · 끌어놓기 대신 하단 선택 막대(이동… · 태그 · 휴지통).
 *   어느 화면을 볼지는 `.finder[data-pane]`(finderMobilePane.js — 주소가 정한다)이고, 선택 모드는 `.finder[data-select]` 다.
 *   🔴 크롬 재질(글라스)은 여기 적지 않는다 — liquid-glass-chrome.css 가 유일한 주인이다. 선택 막대는 불투명 면(콘텐츠 위 띠)이다.
 *   🔴 터치 과녁 44px — (pointer: coarse) 안에서는 44 미만 치수를 적지 않는다(coarseTouchTarget 가드).
 *   파랑(--accent)은 선택·포커스에만. 흰 알약은 '새 프로젝트' 하나(화면마다 하나 — 사이드바 머리 또는 툴바).
 */

/* 길게 누르기(메뉴 + 선택 모드)를 iOS 의 '이미지 저장' 말풍선이 가로채지 않게 — 커버 <img>/<video> 가 항목 안에 있다. */
body.shell-v2 .fd-entry { -webkit-touch-callout: none; }

/* 데스크톱에는 없는 것들 — 모바일 분기에서만 선다. */
body.shell-v2 .fs-mhead,
body.shell-v2 .btn.ft-mback { display: none; }

body.shell-v2 .fd-selbar {
  position: absolute;
  left: var(--sp-xs);
  right: var(--sp-xs);
  bottom: calc(var(--sp-xs) + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-xxs);
  padding: var(--sp-xxs) var(--sp-xs) var(--sp-xxs) var(--sp-sm);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
body.shell-v2 .fd-selbar-count {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-fine);
  letter-spacing: var(--ls-fine);
  font-variant-numeric: tabular-nums;
  color: var(--ink-80);
}

@media (max-width: 810px) {
  /* 창 = 화면 전체(상단 바 아래). 둥근 창 · 테두리는 데스크톱의 것이다. */
  body.shell-v2 .finder,
  body.shell-v2 .finder[data-sidebar='closed'] {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    height: calc(100dvh - var(--top-h));
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  body.shell-v2 .finder[data-sidebar='closed'] .finder-sidebar { visibility: visible; padding-inline: var(--sp-xs); }

  /* 한 번에 한 화면 — 사이드바(첫 화면) 또는 목록. */
  body.shell-v2 .finder[data-pane='sidebar'] .finder-main,
  body.shell-v2 .finder:not([data-pane='sidebar']) .finder-sidebar { display: none; }

  /* 첫 화면 머리 — 제목 + '새 프로젝트'(목록 화면의 툴바가 안 보이므로 여기가 그 자리다). */
  body.shell-v2 .fs-mhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-xs) var(--sp-md) 20px; /* 오른쪽 --sp-xxs 는 '새 프로젝트' 알약이 가장자리에 붙었다(390 · 감사 #19) */
  }
  body.shell-v2 .fs-mhead-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-title-1);
    line-height: var(--lh-title-1);
    font-weight: 600;
    color: var(--ink);
  }

  /* 툴바 두 줄 — 위: ‹ · 위치 · 더보기 · 새 프로젝트 / 아래: 검색(전폭). 사이드바 버튼 대신 '‹ 뒤로'. */
  body.shell-v2 .finder-main { grid-template-rows: auto minmax(0, 1fr) var(--finder-pathbar-h); }
  body.shell-v2 .finder-toolbar { padding: var(--sp-xs) var(--sp-sm); }
  body.shell-v2 .ft-bar { flex-wrap: wrap; row-gap: var(--sp-xs); height: auto; }
  body.shell-v2 .btn.ft-side { display: none; }
  body.shell-v2 .btn.ft-mback { display: inline-flex; }
  body.shell-v2 .ft-loc { flex: 1 1 auto; max-width: none; }
  body.shell-v2 .ft-spacer { display: none; }
  body.shell-v2 .ft-search { order: 20; flex: 1 1 100%; min-width: 0; }
  body.shell-v2 .ft-scope { order: 21; }

  /* 목록 = 이름 + 날짜 두 칸뿐이다(finderListView visibleCols). 데스크톱 열 폭(이름 최소 200 + 날짜 최소 128)을 그대로 쓰면
     320px 에서 콘텐츠가 옆으로 36px 넘쳐 가로 스크롤이 생겼다(실측) → 이름이 남는 폭을 다 갖고 날짜는 제 글자 폭만. */
  body.shell-v2 :is(.fd-list-head, .fd-row, .fd-list-group) { grid-template-columns: minmax(0, 1fr) max-content; }

  /* 선택 모드 — 체크 원. 아이콘 타일은 왼쪽 위 모서리, 목록 행은 이름 앞. */
  body.shell-v2 .finder[data-select='on'] .fd-tile { position: relative; }
  body.shell-v2 .finder[data-select='on'] .fd-tile::before,
  body.shell-v2 .finder[data-select='on'] .fd-cell--lead::before {
    content: '';
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px solid var(--ink-48);
    background: var(--canvas);
  }
  body.shell-v2 .finder[data-select='on'] .fd-tile::before { position: absolute; top: 6px; left: 6px; z-index: 1; }
  body.shell-v2 .finder[data-select='on'] .fd-entry.is-selected :is(.fd-cell--lead)::before,
  body.shell-v2 .finder[data-select='on'] .fd-tile.is-selected::before {
    border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  }
  /* 막대가 목록 끝을 덮지 않게 — 선택 모드에서는 끝에 막대 높이만큼 비운다. */
  body.shell-v2 .finder[data-select='on'] .finder-content { padding-bottom: 72px; }
}

/* ≤720 은 본문(.shell-main)에 위아래 --sp-lg · 옆 --sp-md 여백이 있다(glass.css) — 창을 가장자리까지 펴려고 그만큼 되민다.
 *   안 되밀면 창이 옆으로 15px 씩 줄고, 아래로 여백만큼 넘쳐 페이지가 40px 스크롤된다(390 실측). */
@media (max-width: 720px) {
  body.shell-v2 .finder,
  body.shell-v2 .finder[data-sidebar='closed'] { margin: calc(-1 * var(--sp-lg)) calc(-1 * var(--sp-md)); }
}

/* 터치 — 사이드바 줄 · 선택 막대 단추를 44px 과녁으로. */
@media (max-width: 810px) and (pointer: coarse) {
  body.shell-v2 .fs-row,
  body.shell-v2 .fs-row-main { height: 44px; }
  body.shell-v2 .fd-selbar .btn { min-height: 44px; }
}