/* Finder 조작 층 — web/finder 의 선택 사각형 · 끌기 고스트 · 이름 입력 · 빠른 보기 · 정보 · 이동 시트 · 태그 편집 · 휴지통 목록 · 메뉴 색 견본.
 *   정본: .specs/spec_project_finder/spec.md §7 · §9. Framer 다크 그대로 — 파랑(--accent)은 선택·포커스·드롭 대상에만, 흰 알약은 여기 없다.
 *   재질(블러·틴트)은 공용 층이 소유한다 — 빠른 보기는 공용 .sm-overlay/.sm-panel, 정보·이동·태그는 공용 트레이(dialog.tray).
 *   ⚠️ 예외 하나: 우클릭·동작 메뉴는 .vlab-menu 인데 canvas-contrast.css 의 `.vlab-menu[class]`(0,3,1 — 영상 캔버스 카드 표면)가
 *      liquid-glass-overlays.css 의 G2 글라스(0,2,1)를 이겨 Finder 메뉴까지 불투명 rgb(36,36,36)로 떴다. 그 파일은 영상 캔버스 담당이라
 *      고치지 않고, 아래 ④ 가 `.vlab-menu.finder-menu[class]`(0,4,1)로 같은 G2 토큰을 되돌린다. 휴지통 목록·고스트는 콘텐츠(글라스 금지).
 *   색 점·견본은 보기 레인의 7색 토큰(finder-folder.css --fd-c-*)을 그대로 쓴다 — 여기서 hex 를 다시 적지 않는다.
 *   모션: 스프링은 폴더만(보기 레인) — 이 층은 즉시 또는 ≤160ms. */

/* ── ① 끄는 중 · 선택 사각형 ── */
html.fd-dragging,
html.fd-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
html.fd-dragging.fd-drag-blocked,
html.fd-dragging.fd-drag-blocked * { cursor: not-allowed !important; }
body.shell-v2 .finder-content .fd-entry { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.shell-v2 .fd-marquee {
  position: fixed; z-index: 300; pointer-events: none; box-sizing: border-box;
  border: 1px solid var(--accent); border-radius: var(--r-xs); background: var(--accent-soft);
}

/* ── ② 끌기 고스트 — 고정 레이어(pointer-events:none)에 겹친 카드 + 개수 ── */
body.shell-v2 .fd-drag-layer { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
body.shell-v2 .fd-drag-ghost {
  position: absolute; left: 0; top: 0; width: 76px; height: 56px; will-change: transform;
  transition: opacity 120ms ease, filter 120ms ease;
}
body.shell-v2 .fd-drag-card {
  position: absolute; inset: 0; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-80);
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 20px rgba(0, 0, 0, 0.45);
}
body.shell-v2 .fd-drag-card:nth-of-type(1):not(:last-of-type) { transform: translate(-6px, 6px) rotate(-6deg); }
body.shell-v2 .fd-drag-card:nth-of-type(2):not(:last-of-type) { transform: translate(5px, 3px) rotate(5deg); }
body.shell-v2 .fd-drag-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.shell-v2 .fd-drag-card--image .fd-drag-name { display: none; }
body.shell-v2 .fd-drag-name {
  font-size: var(--fs-footnote); line-height: 1.25; text-align: center; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.shell-v2 .fd-drag-count {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font-size: var(--fs-footnote); font-weight: 600; font-variant-numeric: tabular-nums;
}
body.shell-v2 .fd-drag-ghost.is-blocked { opacity: 0.55; filter: grayscale(1); }

/* ── ③ 인라인 이름 바꾸기 — 채움·테두리는 framer.css ③ 의 필드 껍데기 그대로(여기서 걷지 않는다) ── */
body.shell-v2 .fd-name.is-renaming { display: block; overflow: visible; -webkit-line-clamp: unset; background: none; }
body.shell-v2 .fd-rename-input {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 2px var(--sp-xs);
  font: inherit; text-align: inherit; color: var(--ink);
}

/* ── ④ 우클릭 메뉴 — G2 재질 되돌리기 · 막힌 줄 · 태그·폴더 색 견본(영상 탭 팔레트와 섞이지 않게 .finder-menu 안에서만) ── */
/* 재질 — liquid-glass-overlays.css 의 .vlab-menu 와 같은 토큰(G2 · thick). canvas-contrast.css 의 카드 표면(0,3,1)을 특이도로 이긴다(머리주석). */
body.shell-v2 .vlab-menu.finder-menu[class] {
  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);
  border: 0;
  color: var(--ink);
}
body.shell-v2 .finder-menu .vlab-menu-item { color: var(--ink); }
body.shell-v2 .finder-menu .vlab-menu-item--danger { color: var(--danger); }
body.shell-v2 .finder-menu .vlab-menu-item:hover:not(:disabled) { background: var(--lg-control-hover); }
body.shell-v2 .finder-menu .vlab-menu-sep { background: var(--lg-divider); }
/* 막힌 줄 — 라벨만 흐리게(videolab.css 머리 .45), 사유는 읽혀야 한다. glass.css 의 `button:disabled { opacity: .4 }` 가 버튼째 흐려
 *   사유 줄 대비가 3.2:1 이었다(감사 #6). 사유 없는 막힌 줄(사유를 맨 위로 올린 줄)은 버튼째 흐린 그대로 둔다. */
body.shell-v2 .finder-menu .vlab-menu-item--rich:disabled { opacity: 1; }
body.shell-v2 .finder-menu .vlab-menu-item-reason { opacity: 1; color: var(--ink-48); }
/* 맨 위로 올린 공통 사유 한 줄(finderMenu.hoistRepeatedReason). */
body.shell-v2 .finder-menu .vlab-menu-note { opacity: 1; color: var(--ink-48); }
/* 견본 한 줄 — 좁은 메뉴 폭(176px · graphContextMenu MENU_W 와 한 몸)에 태그 7개 · 폴더 색 8개가 한 줄로 서게 16px + 벌려 놓기.
 *   18px·6px 간격이던 첫 판은 7번째가 다음 줄로 혼자 떨어졌다(1440 실측). */
body.shell-v2 .finder-menu .vlab-menu-swatches { justify-content: space-between; column-gap: 2px; padding-inline: 8px; }
body.shell-v2 .finder-menu .vlab-menu-swatch { width: 16px; height: 16px; border-radius: 50%; border-color: var(--hairline); background: var(--fd-sw, transparent); }
body.shell-v2 .finder-menu .vlab-menu-swatch.is-on { outline: 2px solid var(--accent); outline-offset: 2px; }
body.shell-v2 .finder-menu .fd-menu-check { margin-left: auto; color: var(--accent); flex: 0 0 auto; }
body.shell-v2 .finder-menu .vlab-menu-item[aria-checked='true'] { display: flex; align-items: center; gap: var(--sp-xs); }
/* 단축키 표기(L9 · finderShortcuts) — 줄 오른쪽 끝. 키가 서는 메뉴는 넓은 폭(256)이라 라벨과 한 줄에 든다.
 *   막힌 줄(rich — 머리 + 사유 두 줄)은 머리 줄 안에 붙인다(버튼을 가로로 펴면 사유가 옆으로 선다). */
body.shell-v2 .finder-menu .fd-menu-item--kbd:not(.vlab-menu-item--rich) { display: flex; align-items: center; gap: var(--sp-sm); }
body.shell-v2 .finder-menu .fd-menu-kbd { margin-left: auto; flex: none; font: inherit; font-size: var(--fs-fine); letter-spacing: var(--ls-fine); color: var(--ink-48); }
/* 휴대폰(모바일 화면 · 터치 전용)에는 키보드가 없다 — 단축키 표시는 소음이라 걷는다(2026-09-25 스테이징 390 실측). */
@media (max-width: 810px), (hover: none) { body.shell-v2 .finder-menu .fd-menu-kbd { display: none; } }
body.shell-v2 .finder-menu.vlab-menu--wide .vlab-menu-swatches { justify-content: flex-start; column-gap: 10px; } /* 넓은 폭에서 점이 흩어지지 않게 */

/* 색 견본 한 벌(메뉴 견본 'fd-<색>' · 태그 편집 견본 '<색>') — 끝 글자로 맞춘다. 'none' 은 테두리만(무색). */
body.shell-v2 :is(.finder-menu .vlab-menu-swatch, .fd-label-swatch, .fd-label-color)[data-color$='red'] { --fd-sw: var(--fd-c-red); }
body.shell-v2 :is(.finder-menu .vlab-menu-swatch, .fd-label-swatch, .fd-label-color)[data-color$='orange'] { --fd-sw: var(--fd-c-orange); }
body.shell-v2 :is(.finder-menu .vlab-menu-swatch, .fd-label-swatch, .fd-label-color)[data-color$='yellow'] { --fd-sw: var(--fd-c-yellow); }
body.shell-v2 :is(.finder-menu .vlab-menu-swatch, .fd-label-swatch, .fd-label-color)[data-color$='green'] { --fd-sw: var(--fd-c-green); }
body.shell-v2 :is(.finder-menu .vlab-menu-swatch, .fd-label-swatch, .fd-label-color)[data-color$='blue'] { --fd-sw: var(--fd-c-blue); }
body.shell-v2 :is(.finder-menu .vlab-menu-swatch, .fd-label-swatch, .fd-label-color)[data-color$='purple'] { --fd-sw: var(--fd-c-purple); }
body.shell-v2 :is(.finder-menu .vlab-menu-swatch, .fd-label-swatch, .fd-label-color)[data-color$='gray'] { --fd-sw: var(--fd-c-gray); }
body.shell-v2 :is(.finder-menu .vlab-menu-swatch, .fd-label-swatch, .fd-label-color)[data-color$='none'] { --fd-sw: transparent; box-shadow: inset 0 0 0 1.5px var(--fd-c-none); }

/* ── ⑤ 빠른 보기 — 공용 .sm-panel(글라스 등재됨) 위에 모양만 ── */
body.shell-v2 .sm-panel.fd-ql {
  position: relative; width: min(720px, 100%); max-height: calc(100dvh - 2 * var(--sp-lg)); overflow: auto;
  padding: var(--modal-pad); gap: var(--sp-sm); --fd-dot-ring: transparent;
}
body.shell-v2 .fd-ql-close { position: absolute; top: var(--sp-sm); right: var(--sp-sm); z-index: 1; }
body.shell-v2 .fd-ql-body { display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 0; }
body.shell-v2 .fd-ql-media {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-md); background: var(--surface-2);
}
body.shell-v2 :is(.fd-ql-video, .fd-ql-img) { display: block; width: 100%; height: 100%; object-fit: contain; }
body.shell-v2 .fd-ql-card { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--sp-lg); box-sizing: border-box; color: var(--ink-48); }
/* 제목 글자 간격은 본문 단으로 — h2·h3 전역 규칙의 -1px 는 디스플레이(32px+)용이라 17px 한글이 붙는다(칼럼 끝 칸 제목과 같은 처리). */
body.shell-v2 .fd-ql-title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-title-3); line-height: var(--lh-title-3); font-weight: 700; letter-spacing: var(--ls-body); color: var(--ink); word-break: keep-all; text-wrap: balance; }
body.shell-v2 .fd-ql-meta { margin: 0; font-size: var(--fs-caption); letter-spacing: var(--ls-caption); color: var(--ink-48); font-variant-numeric: tabular-nums; }
/* 로그라인은 여러 줄로 넘친다 — 1.3 줄 간격은 세 줄부터 빽빽하다. */
body.shell-v2 .fd-ql-logline { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-80); word-break: keep-all; text-wrap: pretty; }
body.shell-v2 .fd-ql-tags { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-sm); }
body.shell-v2 .fd-ql-tagname { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--ink-80); }

/* ── ⑥ 정보 창 · 이동 시트 · 태그 편집 — 공용 트레이 몸통 안 ── */
body.shell-v2 dialog.tray:is(.fd-info-tray, .fd-move-tray, .fd-labels-tray) { --fd-dot-ring: transparent; }
body.shell-v2 .fd-info { display: flex; flex-direction: column; gap: var(--sp-md); }
body.shell-v2 .fd-info-preview {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; max-height: 240px; overflow: hidden;
  border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-48);
}
body.shell-v2 .fd-info-img { width: 100%; height: 100%; object-fit: contain; }
body.shell-v2 .fd-info-field { display: flex; flex-direction: column; gap: var(--sp-xxs); }
body.shell-v2 .fd-info-label { font-size: var(--fs-caption); letter-spacing: var(--ls-caption); color: var(--ink-48); }
body.shell-v2 .fd-info-name { width: 100%; box-sizing: border-box; }
body.shell-v2 .fd-info-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-xs) var(--sp-md); margin: 0; font-size: var(--fs-caption); }
body.shell-v2 .fd-info-k { color: var(--ink-48); }
body.shell-v2 .fd-info-v { margin: 0; color: var(--ink-80); font-variant-numeric: tabular-nums; word-break: keep-all; }
body.shell-v2 .fd-info-sub { margin: 0; font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-caption); color: var(--ink-48); }

/* 이동 시트는 폴더 이름 목록 하나 — 640px 이면 줄 끝이 멀다(감사 #16). */
@media (min-width: 811px) { body.shell-v2 dialog.tray.fd-move-tray { width: min(480px, 100% - 2 * var(--sp-sm)); } } /* ≤810 은 화면 폭 바텀시트 그대로 */
body.shell-v2 .fd-move-list { display: flex; flex-direction: column; }
body.shell-v2 .fd-move-row {
  display: flex; align-items: center; gap: var(--sp-sm); width: 100%; min-height: 36px; box-sizing: border-box;
  padding: var(--sp-xxs) var(--sp-sm) var(--sp-xxs) calc(var(--sp-sm) + var(--fd-depth, 0) * 16px);
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-80); text-align: left; font: inherit; cursor: pointer;
}
body.shell-v2 .fd-move-row:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
body.shell-v2 .fd-move-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body.shell-v2 .fd-move-row:disabled { cursor: default; color: var(--ink-48); }
body.shell-v2 .fd-move-text { display: flex; flex-direction: column; min-width: 0; }
body.shell-v2 .fd-move-name { font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .fd-move-reason { font-size: var(--fs-footnote); color: var(--ink-48); }

body.shell-v2 .fd-labels { display: flex; flex-direction: column; gap: var(--sp-lg); }
body.shell-v2 :is(.fd-label-checks, .fd-label-list) { display: flex; flex-direction: column; gap: var(--sp-xxs); }
body.shell-v2 .fd-label-check { display: flex; align-items: center; gap: var(--sp-sm); min-height: 32px; font-size: var(--fs-body); color: var(--ink-80); cursor: pointer; }
body.shell-v2 .fd-label-row { display: flex; align-items: center; gap: var(--sp-sm); }
body.shell-v2 .fd-label-input { flex: 1 1 auto; min-width: 0; }
body.shell-v2 :is(.fd-label-swatch, .fd-label-color) {
  width: 20px; height: 20px; flex: 0 0 auto; padding: 0; border: 1px solid var(--hairline); border-radius: 50%;
  background: var(--fd-sw, transparent); cursor: pointer;
}
body.shell-v2 .fd-label-color[aria-pressed='true'] { outline: 2px solid var(--accent); outline-offset: 2px; }
body.shell-v2 :is(.fd-label-swatch, .fd-label-color):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.shell-v2 .fd-label-colors { display: flex; flex-wrap: wrap; gap: var(--sp-xs); padding: var(--sp-xxs) 0 var(--sp-xs) 28px; }

/* ── ⑦ 휴지통 목록 — 콘텐츠(불투명 · 행 32px · 헤어라인 구분) ── */
body.shell-v2 .fd-trash { display: flex; flex-direction: column; gap: var(--sp-sm); padding: var(--sp-md) var(--page-gutter, var(--sp-lg)); }
/* 빈 휴지통 — 보기의 빈 상태(finder-views.css .fd-empty)와 같은 자리(창 한가운데 조금 위)에 선다. */
body.shell-v2 .fd-content:has(> .fd-trash > .state-empty) { display: flex; flex-direction: column; }
body.shell-v2 .fd-trash:has(> .state-empty) { flex: 1 1 auto; align-items: center; justify-content: center; padding-bottom: var(--sp-section); }
body.shell-v2 .fd-trash-head { display: flex; justify-content: flex-end; min-height: 32px; }
body.shell-v2 .fd-trash-list { display: flex; flex-direction: column; }
body.shell-v2 .fd-trash-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-md);
  min-height: 32px; padding: var(--sp-xxs) var(--sp-xs); border-bottom: 1px solid var(--hairline-soft);
}
body.shell-v2 .fd-trash-name { display: flex; align-items: center; gap: var(--sp-xs); min-width: 0; color: var(--ink-80); }
body.shell-v2 .fd-trash-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); }
body.shell-v2 .fd-trash-meta { font-size: var(--fs-footnote); color: var(--ink-48); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.shell-v2 .fd-trash-acts { display: flex; gap: var(--sp-xxs); }

/* ── ⑧ 모바일(≤810 · D16) ── */
@media (max-width: 810px) {
  body.shell-v2 .fd-trash-row { grid-template-columns: minmax(0, 1fr) auto; }
  /* 한 줄 고정이면 320px 에서 옆 칸 '영구 삭제' 위로 넘쳐 글자가 맞붙는다(실측) — 좁은 폭에서는 줄을 바꾼다. */
  body.shell-v2 .fd-trash-meta { grid-column: 1; grid-row: 2; min-width: 0; white-space: normal; }
  body.shell-v2 .fd-trash-acts { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; }
  body.shell-v2 .sm-panel.fd-ql { width: 100%; }
}
@media (pointer: coarse) {
  body.shell-v2 .fd-move-row,
  body.shell-v2 .fd-label-check { min-height: 44px; }
  body.shell-v2 :is(.fd-label-swatch, .fd-label-color) { width: 44px; height: 44px; background-clip: content-box; padding: 11px; border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  body.shell-v2 .fd-drag-ghost { transition: none; }
}