/* 프로젝트 Finder — 창 뼈대 · 크롬(사이드바 · 툴바 · 경로 막대) · 점선 레일 · 보기 옵션 패널. spec_project_finder §6-1 · §9.
 *   콘텐츠(아이콘·목록·칼럼·갤러리)는 finder-views.css · 폴더는 finder-folder.css · 떠 있는 것은 finder-overlays.css · 모바일(D16)은 finder-mobile.css.
 *   🔴 크롬 재질(G1 글라스 · 블러 · 틴트)은 여기 적지 않는다 — liquid-glass-chrome.css 가 유일한 주인이다(.shell-sidebar 와 같은 regular 층).
 *   🔴 사이드바 폭은 전용 토큰 --finder-sidebar-w 다. --sidebar-w 는 허브 도크 문맥에서 88px 로 풀린다(sidebar-dock.css:17).
 *   🔴 크롬 셋과 그 조상에 animation 을 걸지 않는다 — fill both/forwards 가 backdrop root 를 만들어 블러가 에러 없이 죽는다(liquidGlassLayer ④-b).
 *      사이드바 접기는 grid-template-columns 전환이다(transform 아님).
 *   파랑(--accent)은 선택 · 포커스 · 드롭 대상에만. 모션은 레일 스프링만 — 나머지는 즉시 또는 160ms 이하. */

body.shell-v2 .finder {
  --finder-sidebar-w: 220px;
  --finder-toolbar-h: 52px;
  --finder-pathbar-h: 28px;
  display: grid;
  grid-template-columns: var(--finder-sidebar-w) minmax(0, 1fr);
  height: calc(100dvh - 2 * var(--sp-sm));
  margin: var(--sp-sm);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline-soft);
  overflow: hidden; /* 뿌리는 칠하지 않는다 — 크롬 글라스가 뒤 배경(우주)을 봐야 한다. 불투명은 콘텐츠만 */
  transition: grid-template-columns 160ms var(--ease);
}
/* 창의 바깥 여백이 부모를 뚫고 본문까지 겹쳐 올라가면(여백 겹침) 페이지가 여백만큼 더 길어져 12px 스크롤된다(1440 실측 912 vs 900). */
body.shell-v2 #plansHost { display: flow-root; }
body.shell-v2 .finder[data-sidebar='closed'] { grid-template-columns: 0 minmax(0, 1fr); }
body.shell-v2 .finder[data-sidebar='closed'] .finder-sidebar { visibility: hidden; padding-inline: 0; } /* 0 칸에 여백이 남으면 옆 열을 16px 덮는다 */

/* ── 사이드바 ── */
/* 사이드바 = 스크롤하는 목록(.fs-nav) + 바닥에 고정한 휴지통(.fs-foot · finderSidebar.js). 1440×900 에서 휴지통 줄이 첫 화면 밖
 *   (top 892/874)이라 끌어 놓을 곳이 안 보였다(감사 #4). 목록만 스크롤하고 휴지통은 그 밖에 둔다 — 반투명 면을 겹쳐 띄우면(sticky)
 *   글라스 위라 뒤 줄이 비쳐 겹쳐 읽혔다(1440 실측). 바닥 칸은 면을 칠하지 않는다(사이드바 글라스 그대로) · 경계는 헤어라인 하나. */
body.shell-v2 .finder-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--sp-sm) var(--sp-xs) 0;
}
body.shell-v2 .fs-nav {
  display: flex; flex-direction: column; gap: var(--sp-sm);
  flex: 1 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  /* 스크롤 상자를 사이드바 가장자리까지 — 줄의 포커스 링이 목록 경계에 잘리지 않게 여백은 안에서 준다 */
  margin-inline: calc(-1 * var(--sp-xs)); padding: 0 var(--sp-xs) var(--sp-md);
}
body.shell-v2 .fs-foot {
  flex: none;
  margin-inline: calc(-1 * var(--sp-xs)); padding: var(--sp-xs) var(--sp-xs) var(--sp-sm);
  box-shadow: inset 0 1px 0 var(--lg-divider);
}
body.shell-v2 .fs-foot:empty { display: none; }
body.shell-v2 .fs-sec { border-radius: var(--r-md); }
/* 머리 없는 한 줄짜리 두 곳(최근 · 아이디어)은 한 무리로 붙인다 — 12px 씩 떨어져 있으면 머리 있는 무리들 사이에서 낱장처럼 떠 보였다(1440 실측). */
body.shell-v2 .fs-sec[data-sec='recent'] + .fs-sec[data-sec='ideas'] { margin-top: calc(1px - var(--sp-sm)); }
body.shell-v2 .fs-sec-head {
  margin: 0;
  padding: 0 var(--sp-xs) var(--sp-xxs) 20px;
  font-family: var(--font-heading);
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  letter-spacing: var(--ls-footnote);
  font-weight: 600;
  color: var(--ink-48);
}
body.shell-v2 .fs-rows { display: flex; flex-direction: column; gap: 1px; }
body.shell-v2 .fs-row {
  display: flex;
  align-items: center;
  height: 28px;
  padding-left: calc(20px + var(--depth, 0) * 12px);
  color: var(--ink-48);
  transition: color 120ms var(--ease);
}
/* 호버는 --ink 로 — 크롬 안 --ink-48(#adadad)과 --ink-80(70% 흰색 ≈ #b3b3b3)은 어두운 유리 위에서 거의 같아 호버가 안 보였다(1440 실측 173→179).
   면을 깔지 않는다 — 활성 줄(굵은 글자)에 면이 없는데 호버에만 면이 서면 호버가 선택보다 세게 읽힌다. 터치에서는 탭한 줄에 눌어붙으므로 호버 기기에서만. */
@media (hover: hover) { body.shell-v2 .fs-row:hover { color: var(--ink); } }
body.shell-v2 .fs-row.is-active { color: var(--ink); }
/* 선택 표시는 굵기 하나 — 점선 레일은 걷었다(오너 2026-09-25 "선택된 폴더 볼드로 강조면 충분") */
body.shell-v2 .fs-row.is-active .fs-row-main { font-weight: 700; }
body.shell-v2 .fs-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  height: 28px;
  padding: 0 6px 0 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: var(--fs-fine);
  letter-spacing: var(--ls-fine);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
body.shell-v2 .fs-row-main:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .fs-row-ico { flex: none; stroke-width: 1.75; } /* 13px 글자 옆 선 아이콘 — 목록 글리프와 같은 굵기(finder-views.css) */
body.shell-v2 .fs-row-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .fs-row-count {
  flex: none;
  font-size: var(--fs-footnote);
  letter-spacing: var(--ls-footnote);
  font-variant-numeric: tabular-nums;
  color: var(--ink-48);
}
body.shell-v2 .fs-disclose,
body.shell-v2 .fs-disclose-slot { flex: none; width: 16px; height: 16px; }
body.shell-v2 .fs-disclose {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink-48);
  cursor: pointer;
  transition: transform 120ms var(--ease);
}
body.shell-v2 .fs-disclose.is-open { transform: rotate(90deg); }
body.shell-v2 .fs-disclose:hover { color: var(--ink); }

/* 태그 점 · 폴더 아이콘 색 — 7색 토큰(--fd-c-*)은 finder-folder.css 가 소유한다(대비 근거 포함). 여기서 값을 다시 적지 않는다. */
body.shell-v2 .fs-dot { flex: none; width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: var(--fd-c-gray); }
body.shell-v2 .fs-dot[data-color='none'] { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-48); }
body.shell-v2 .fs-dot[data-color='red'], body.shell-v2 .fs-row[data-color='red'] .fs-row-ico { --fs-c: var(--fd-c-red); }
body.shell-v2 .fs-dot[data-color='orange'], body.shell-v2 .fs-row[data-color='orange'] .fs-row-ico { --fs-c: var(--fd-c-orange); }
body.shell-v2 .fs-dot[data-color='yellow'], body.shell-v2 .fs-row[data-color='yellow'] .fs-row-ico { --fs-c: var(--fd-c-yellow); }
body.shell-v2 .fs-dot[data-color='green'], body.shell-v2 .fs-row[data-color='green'] .fs-row-ico { --fs-c: var(--fd-c-green); }
body.shell-v2 .fs-dot[data-color='blue'], body.shell-v2 .fs-row[data-color='blue'] .fs-row-ico { --fs-c: var(--fd-c-blue); }
body.shell-v2 .fs-dot[data-color='purple'], body.shell-v2 .fs-row[data-color='purple'] .fs-row-ico { --fs-c: var(--fd-c-purple); }
body.shell-v2 .fs-dot[data-color='gray'], body.shell-v2 .fs-row[data-color='gray'] .fs-row-ico { --fs-c: var(--fd-c-gray); }
body.shell-v2 .fs-dot[data-color]:not([data-color='none']) { background: var(--fs-c); }
body.shell-v2 .fs-row[data-color] .fs-row-ico { color: var(--fs-c, currentColor); }

/* 드롭 대상 — 끄는 동안 위에 있는 줄·섹션(끌기 레인이 state.dragging = { over, blocked } 로 알린다 · 보기와 같은 표지).
 *   놓을 수 있으면 파랑(드롭 대상 = 파랑 규칙) · 막히면 파랑 없이 흐리게 + 금지 커서. */
body.shell-v2 .fs-row.is-drop-target .fs-row-main,
body.shell-v2 .fs-sec.is-drop-target {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--ink);
}
body.shell-v2 .fs-row.is-drop-blocked .fs-row-main,
body.shell-v2 .fs-sec.is-drop-blocked { opacity: 0.6; cursor: not-allowed; }
/* 즐겨찾기 순서 끌기(finderSidebarFavs) — 끄는 줄은 흐리게, 놓을 자리는 줄 위·아래의 파랑 선 하나(macOS 사이드바와 같은 표지). */
body.shell-v2 .fs-row.is-fav-dragging { opacity: 0.45; }
body.shell-v2 .fs-row.is-fav-insert-before { box-shadow: inset 0 2px 0 var(--accent); }
body.shell-v2 .fs-row.is-fav-insert-after { box-shadow: inset 0 -2px 0 var(--accent); }


/* ── 본문 열 ── */
body.shell-v2 .finder-main {
  display: grid;
  grid-template-rows: var(--finder-toolbar-h) minmax(0, 1fr) var(--finder-pathbar-h);
  min-width: 0;
  min-height: 0;
}
body.shell-v2 .finder-content { position: relative; min-width: 0; min-height: 0; overflow: auto; background: var(--canvas); }
body.shell-v2 .finder-content[aria-busy='true'] { cursor: progress; }

/* ── 툴바 ── */
body.shell-v2 .finder-toolbar { min-width: 0; padding: 0 var(--sp-sm); }
body.shell-v2 .ft-bar { display: flex; align-items: center; gap: var(--toolbar-gap); height: 100%; min-width: 0; }
body.shell-v2 .ft-group { display: flex; align-items: center; gap: 2px; flex: none; }
body.shell-v2 .ft-spacer { flex: 1 1 0; min-width: 0; }
body.shell-v2 .ft-loc {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xxs);
  /* 좁아지면 검색 칸이 먼저 준다 — 비율은 .ft-search 쪽에 몰아 둔다(아래). 제목은 1 그대로여야 한다:
     줄어드는 비율의 합이 1 보다 작으면 부족분도 그만큼만 나눠 줘서(flexbox 규칙) 검색이 바닥난 뒤 긴 제목이 줄지 않고 넘친다. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 36%;
  height: 32px;
  padding: 0 var(--sp-xs);
  border: 0;
  border-radius: var(--r-pill); /* 툴바의 다른 단추(알약)와 같은 모양 */
  background: transparent;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--fs-headline);
  letter-spacing: var(--ls-body);
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) { body.shell-v2 .ft-loc:hover { background: var(--surface-2); } } /* 모바일에서 제목을 탭해 경로 메뉴를 열면 닫힌 뒤에도 면이 남는다 */
body.shell-v2 .ft-loc:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .ft-loc[aria-haspopup='false'] { cursor: default; background: transparent; }
body.shell-v2 .ft-loc[aria-haspopup='false'] .ft-loc-caret { display: none; }
body.shell-v2 .ft-loc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .ft-loc-caret { flex: none; color: var(--ink-48); }
body.shell-v2 .ft-lock {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xxs);
  flex: none;
  font-size: var(--fs-footnote);
  letter-spacing: var(--ls-footnote);
  color: var(--ink-48);
  white-space: nowrap;
}
body.shell-v2 .ft-seg { height: 32px; padding: 2px; border-radius: var(--r-pill); background: var(--surface-1); }
body.shell-v2 .ft-seg .btn.is-on { background: var(--surface-3); color: var(--ink); }
/* 줄어드는 몫은 '기본 폭 × 비율' 로 나뉜다 — 1:1 이면 제목이 3~5px 을 떠안아 '전체 프로…' 로 잘렸다(811~1100 실측).
   검색에 큰 비율을 주면 검색이 최소 140 에 닿을 때까지 제목 몫은 0 에 가깝고(1/64px 미만), 그 뒤 남은 부족분은 제목이 다 진다. */
body.shell-v2 .ft-search { position: relative; flex: 0 10000 220px; min-width: 140px; }
body.shell-v2 .ft-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-48); pointer-events: none; }
body.shell-v2 .ft-search-input { width: 100%; height: 32px; padding: 0 var(--sp-sm) 0 30px; }
body.shell-v2 .ft-scope { flex: none; }
body.shell-v2 .ft-new { flex: none; }

/* ── 경로 막대 ── */
body.shell-v2 .finder-pathbar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  min-width: 0;
  padding: 0 var(--sp-sm);
  font-size: var(--fs-footnote);
  letter-spacing: var(--ls-footnote);
  color: var(--ink-48);
}
body.shell-v2 .fpb-path { flex: 1 1 auto; min-width: 0; overflow: hidden; }
body.shell-v2 .fpb-cells { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
body.shell-v2 .fpb-item { display: flex; align-items: center; gap: 2px; min-width: 0; }
body.shell-v2 .fpb-sep { flex: none; opacity: 0.6; }
body.shell-v2 .fpb-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xxs);
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
/* 경로 막대도 크롬이라 --ink-80 은 기본 글자(#adadad)와 구분이 안 된다 — 호버·현재 칸은 --ink. */
@media (hover: hover) { body.shell-v2 .fpb-cell:hover { color: var(--ink); } }
body.shell-v2 .fpb-cell[aria-current] { color: var(--ink); cursor: default; }
body.shell-v2 .fpb-cell:focus-visible { outline: none; box-shadow: var(--ring-focus); }
body.shell-v2 .fpb-cell.is-drop-target { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
body.shell-v2 .fpb-cell.is-drop-blocked { opacity: 0.6; cursor: not-allowed; }
body.shell-v2 .fpb-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
body.shell-v2 .fpb-count { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 보기 옵션 패널(본문에 fixed · finderViewOptions.js) ── */
/* 재질 = G2 오버레이(우클릭 메뉴와 같은 층 · liquid-glass-overlays.css 의 .vlab-menu 와 같은 토큰) — 불투명 surface-2 로 떠 있어
 *   같은 순간에 뜨는 메뉴와 재질이 갈렸다(감사 #10). 공용 파일은 건드리지 않고 같은 토큰을 여기서 쓴다.
 *   ⚠️ 이 패널은 body 에 붙는다(finderViewOptions.js) — 툴바(글라스) 안이면 backdrop root 에 갇혀 블러가 죽는다. */
body.shell-v2 .fvo {
  position: fixed;
  z-index: 80;
  width: 264px;
  display: grid;
  gap: 10px;
  padding: var(--sp-sm);
  border: 0;
  border-radius: var(--r-xl); /* 동심 반경 — 안의 필드(10) + 여백(12) ≈ 20 */
  background: var(--lg-sheen), var(--lg-tint-thick);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-shadow-float);
  --ink-48: var(--lg-ink-48);
}
body.shell-v2 .fvo * { --surface-1: var(--lg-fill-1); --surface-2: var(--lg-fill-2); --surface-3: var(--lg-fill-3); --hairline: var(--lg-divider); }
body.shell-v2 .fvo-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: var(--sp-xs); }
body.shell-v2 .fvo-label { font-size: var(--fs-fine); letter-spacing: var(--ls-fine); color: var(--ink-80); }
body.shell-v2 .fvo-select { height: 32px; padding-block: 0; }
body.shell-v2 .fvo-range { width: 100%; }
body.shell-v2 .fvo-check { display: flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-fine); letter-spacing: var(--ls-fine); color: var(--ink-80); }
body.shell-v2 .fvo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--sp-sm); min-width: 0; margin: 0; padding: 0; border: 0; }
body.shell-v2 .fvo-cols > legend { grid-column: 1 / -1; padding: 0 0 var(--sp-xxs); }
body.shell-v2 .fvo:not([data-mode='icon']) .fvo-when-icon,
body.shell-v2 .fvo:not([data-mode='list']) .fvo-when-list { display: none; }

@media (max-width: 810px) {
  body.shell-v2 .ft-view--desktop { display: none; } /* D16 — 모바일은 목록 · 아이콘 둘만 */
}

@media (prefers-reduced-motion: reduce) {
  body.shell-v2 .finder,
  body.shell-v2 .fs-row,
  body.shell-v2 .fs-disclose { transition: none; }
}