/* Finder 보기(아이콘 · 목록 · 칼럼 · 갤러리) — DESIGN.md(Framer 다크) 준수 · body.shell-v2 스코프.
 *   조용한 macOS Finder 문법: 선택 = 파랑이 스민 둥근 받침판 + 이름에 파랑 알약(흰 글자) · 목록 행 32px + 가는 구분선 ·
 *   태그 = 8px 겹친 점. 장식 그라데이션·빛 번짐 없음. 움직임은 폴더(finder-folder.css)만 스프링이고 나머지는 즉시 또는 120ms.
 *   파랑(#0099ff)은 선택·초점·드롭 대상에만. ⚠️ 콘텐츠층이다 — backdrop-filter 를 쓰지 않는다(liquidGlassLayer CONTENT_LAYER).
 *   ⚠️ 선택 이름 알약은 #0099ff 가 아니라 같은 파랑을 어둡게 한 #0a6fd8 이다 — #0099ff 위 흰 글자는 3.0:1 로
 *      본문 글자 AA(4.5)에 못 미친다. #0a6fd8 은 4.9:1.
 */
body.shell-v2 {
  --fd-sel-plate: rgba(0, 153, 255, 0.16);  /* 타일 받침판 · 드롭 대상 — 캔버스 위 합성 #082030 */
  --fd-sel-row: rgba(0, 153, 255, 0.24);    /* 목록·칼럼 선택 행 — 캔버스 위 합성 #072c44 */
  --fd-sel-row-solid: #072c44;              /* 선택 행 위 태그 점 테두리(점을 바탕에서 떼어 보이게) */
  --fd-sel-pill: #0a6fd8;                   /* 선택 이름 알약(흰 글자 4.9:1) */
}

/* ── 공통 ── */
body.shell-v2 .fd-content { --fd-icon: 96; position: relative; min-height: 100%; }
body.shell-v2 .fd-content:is([data-mode="column"], [data-mode="gallery"]) { height: 100%; }
body.shell-v2 .fd-content.is-drop-target { box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--r-md); }
body.shell-v2 .fd-entry { outline: none; user-select: none; -webkit-user-select: none; }
body.shell-v2 .fd-entry.is-dragging { opacity: 0.45; }
/* 빈 상태는 창 한가운데(조금 위 — 시각 중심)에 선다. 맨 위에 붙으면 '아직 불러오는 중' 으로 읽힌다(1440 실측 — 창 맨 위 96px 아래에 떠 있었다).
   모양은 공용 emptyStateEl 그대로 둔다(09-18 전역 감사가 빈 상태를 한 모양으로 모았다) — 자리만 바꾼다. */
body.shell-v2 .fd-content:has(> .fd-empty) { display: flex; flex-direction: column; }
body.shell-v2 .fd-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: var(--sp-xl) var(--sp-lg) var(--sp-section); }

/* 태그 점 — 8px 원이 겹친다. 테두리 색 = 바탕(점끼리 떼어 보이게). */
body.shell-v2 .fd-tag-dots { display: inline-flex; align-items: center; flex: 0 0 auto; padding-left: 2px; }
body.shell-v2 .fd-tag-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--fd-edge); box-shadow: 0 0 0 1.5px var(--fd-dot-ring, var(--canvas));
}
body.shell-v2 .fd-tag-dot + .fd-tag-dot { margin-left: -3px; }

/* ── 아이콘 보기 ── */
/* 위 여백은 폴더 '열림' 자세(끌기 중 머묾)의 카드가 첫 줄에서 잘리지 않을 만큼 — 아이콘 크기에 비례한다. */
body.shell-v2 .fd-icons {
  display: flex; flex-direction: column; gap: var(--sp-lg);
  padding: max(var(--sp-md), calc(var(--fd-icon) * 0.36px)) var(--sp-lg) var(--sp-xl);
}
/* 폴더가 없는 보기(스마트 폴더 · 태그 · 대부분의 묶음 보기)는 폴더 몫 높이를 비우지 않는다 — 들리거나 열릴 카드가 없다.
   묶음 머리 선과 첫 카드 사이가 46px 로 벌어져 첫 화면(D21 단계 묶음)이 휑했다(1440 실측) → 22px.
   높이는 4:3 글자 카드에 맞춘다 — 16:9 영상 커버는 바닥 정렬이라 한 줄의 이름표가 그대로 가지런하다. */
body.shell-v2 .fd-icons:not(:has(.fd-tile--folder)) { padding-top: var(--sp-lg); }
body.shell-v2 .fd-grid:not(:has(.fd-tile--folder)) .fd-tile-icon { height: calc(var(--fd-icon) * 0.75px + 12px); }
body.shell-v2 .fd-grid--row:not(:has(.fd-tile--folder)) { padding-top: var(--sp-xxs); }
body.shell-v2 .fd-group-head {
  display: flex; align-items: center; gap: var(--sp-xs); min-height: 32px;
  padding: 0 4px; margin-bottom: var(--sp-xs); border-bottom: 1px solid var(--hairline);
}
body.shell-v2 .fd-group-name { font-size: var(--fs-fine); font-weight: 600; color: var(--ink-80); letter-spacing: var(--ls-fine); }
body.shell-v2 .fd-group-count { font-size: var(--fs-footnote); letter-spacing: var(--ls-footnote); color: var(--ink-48); font-variant-numeric: tabular-nums; }
body.shell-v2 .btn.fd-group-more { margin-left: auto; color: var(--ink-48); }
body.shell-v2 .fd-grid {
  display: grid; align-items: start; gap: var(--sp-sm) var(--sp-xxs);
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--fd-icon) * 1px + 32px), 1fr));
}
/* 묶음 = 가로 한 줄(macOS '그룹 사용'). 가로 스크롤 상자는 세로도 자르므로 호버로 들리는 카드 몫만 위를 비운다
 * (끌기 중 '열림' 자세는 이 줄에서 윗부분이 잘린다 — 묶음 보기에는 대개 폴더가 없다: 스마트 폴더는 항목만 싣는다). */
body.shell-v2 .fd-grid--row {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(var(--fd-icon) * 1px + 32px);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  padding: calc(var(--fd-icon) * 0.2px) 0 6px;
}
body.shell-v2 .fd-group--all .fd-grid--row {
  grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--fd-icon) * 1px + 32px), 1fr));
}

body.shell-v2 .fd-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px 2px 8px; }
body.shell-v2 .fd-tile-icon {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: calc(var(--fd-icon) * 1px + 16px); height: calc(var(--fd-icon) * 270px / 321 + 12px);
  padding: 6px 8px; box-sizing: border-box; border-radius: calc(var(--r-sm) + 6px); /* 동심 반경 — 안의 카드(6) + 받침판 여백(6) */
}
body.shell-v2 .fd-tile.is-selected .fd-tile-icon { background: var(--fd-sel-plate); }
body.shell-v2 .fd-tile:focus-visible .fd-tile-icon { box-shadow: var(--ring-focus); }
/* 단계로 묶은 보기 — 묶음 머리('기획 5')가 단계를 이미 말한다. 카드마다 같은 단계 글을 다시 적지 않는다(한 화면에 한 번). */
/*   단계 글을 빼면 글리프가 모서리에 홀로 남아 빈 상자로 읽힌다 → 가운데로 키워 세우고, 완료 표시는 오른쪽 아래 모서리에 둔다. */
/*   아이디어 보기도 같다 — 전부 아이디어라 카드마다 '아이디어' 를 적으면 같은 말의 반복이다(감사 #14). */
body.shell-v2 .fd-content:is([data-group='stage'], [data-view='ideas']) .fd-card { position: relative; align-items: center; justify-content: center; }
body.shell-v2 .fd-content:is([data-group='stage'], [data-view='ideas']) .fd-card-stage { display: none; }
body.shell-v2 .fd-content:is([data-group='stage'], [data-view='ideas']) .fd-card-glyph { width: 24px; height: 24px; }
body.shell-v2 .fd-content:is([data-group='stage'], [data-view='ideas']) .fd-card-foot { position: absolute; right: 8px; bottom: 8px; }
/* 폴더 보기·최근·검색에 선 아이디어 — 보조 톤(오너 2026-09-26 · 폴더에서 만든 새 프로젝트가 폴더에서 사라지지 않게 끝에 흐리게).
 *   아이디어 보기 자신은 전부 아이디어라 흐리지 않는다. 고른 항목은 선택 표지가 읽혀야 해서 제 톤으로. */
body.shell-v2 .fd-content:not([data-view='ideas']) .fd-entry.is-idea:not(.is-selected) { opacity: 0.6; }
/* 이름이 겹친 항목의 주인 보조 줄('Ep. 1' 둘 — 감사 #17). 겹친 것만 선다. */
body.shell-v2 .fd-dup-owner {
  flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-fine); letter-spacing: var(--ls-fine); color: var(--ink-48);
}
body.shell-v2 .fd-tile .fd-dup-owner { margin-top: -2px; }
/* 링은 받침판에 하나만 — 전역 [tabindex]:focus-visible 링(chrome-base.css)이 타일 사각형에 한 겹 더 두르면 링이 둘이 된다(1440 실측). */
body.shell-v2 :is(.fd-tile, .fd-strip-item):focus-visible { box-shadow: none; }
body.shell-v2 .fd-tile.is-drop-target .fd-tile-icon { background: var(--fd-sel-plate); box-shadow: inset 0 0 0 2px var(--accent); }
body.shell-v2 .fd-tile.is-drop-blocked .fd-tile-icon { box-shadow: inset 0 0 0 1px var(--ink-48); }
/* 놓을 수 없는 곳 = 즉시 금지 표시(spec §7-2) — 타일 밖의 드롭 대상(행 · 칼럼 · 필름스트립 · 보기 바탕)도 같은 한 줄. */
body.shell-v2 :is(.fd-row, .fd-col-item, .fd-column, .fd-strip-item, .fd-content).is-drop-blocked { box-shadow: inset 0 0 0 1px var(--ink-48); }
/* 이름 바꾸는 중 — 상호작용 레인이 .fd-name 자리에 입력칸을 넣는다. 두 줄 자르기·말줄임이 입력칸을 가리지 않게 푼다. */
body.shell-v2 .fd-entry.is-renaming :is(.fd-tile-label, .fd-name) {
  display: block; overflow: visible; -webkit-line-clamp: unset; white-space: normal; text-overflow: clip;
}
/* 열림 자세의 카드가 윗줄 위로 올라와도 가려지지 않게. */
body.shell-v2 .fd-tile--folder:has(.fd-folder:not([data-pose="rest"])) { position: relative; z-index: 1; }

/* 이름 — 줄마다 둥근 알약(macOS). 두 줄에서 자른다. */
body.shell-v2 .fd-tile-label {
  max-width: calc(var(--fd-icon) * 1px + 28px); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--fs-footnote); line-height: 17px; letter-spacing: var(--ls-footnote);
  word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; /* 가운데 정렬 두 줄 — 한 단어만 둘째 줄로 떨어지지 않게 */
}
body.shell-v2 .fd-tile .fd-name {
  padding: 1px 6px; border-radius: var(--r-pill); color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.shell-v2 .fd-tile.is-selected .fd-name { background: var(--fd-sel-pill); color: var(--on-accent); }
body.shell-v2 .fd-tile-meta { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; max-width: 100%; }
body.shell-v2 .fd-tile-info {
  display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-footnote); letter-spacing: var(--ls-footnote); color: var(--ink-48); font-variant-numeric: tabular-nums;
}
body.shell-v2 .fd-show-info .fd-tile-info { display: inline; }

/* 커버 — 영상 16:9 · 그림 4:3. 글자 카드 — 그림 없는 항목(칸반 09-21 규칙). */
body.shell-v2 .fd-cover {
  position: relative; width: calc(var(--fd-icon) * 1px); border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-3);
}
/* 경계 한 줄은 그림 **위**에 긋는다 — 안쪽 그림자는 자식(영상·그림) 아래에 칠해져, 첫 프레임이 검은 영상은 바탕과 구분이 안 된다. */
body.shell-v2 .fd-cover::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
body.shell-v2 .fd-cover--video { aspect-ratio: 16 / 9; }
body.shell-v2 .fd-cover--image { aspect-ratio: 4 / 3; }
body.shell-v2 .fd-cover-media { display: block; width: 100%; height: 100%; object-fit: cover; }
body.shell-v2 .fd-cover-glyph {
  position: absolute; left: 5px; bottom: 5px; padding: 3px; box-sizing: content-box;
  border-radius: var(--r-pill); background: rgba(10, 10, 10, 0.72); color: #ffffff;
}
body.shell-v2 .fd-card {
  display: flex; flex-direction: column; justify-content: space-between;
  width: calc(var(--fd-icon) * 1px); aspect-ratio: 4 / 3; padding: 8px; box-sizing: border-box;
  border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink-48);
}
body.shell-v2 .fd-card--bare { align-items: center; justify-content: center; }
body.shell-v2 .fd-card-foot { display: flex; align-items: center; gap: 4px; min-width: 0; }
body.shell-v2 .fd-card-stage {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-footnote); color: var(--ink-80); letter-spacing: var(--ls-footnote);
}
body.shell-v2 .fd-card-done, body.shell-v2 .fd-cell-done { flex: 0 0 auto; color: var(--positive); }

/* ── 목록 보기 ── 열 폭은 JS 가 보이는 열로 --fd-list-cols 를 만든다. */
body.shell-v2 .fd-list { display: flex; flex-direction: column; min-width: 0; padding-bottom: var(--sp-xl); font-size: var(--fs-fine); letter-spacing: var(--ls-fine); }
body.shell-v2 :is(.fd-list-head, .fd-row, .fd-list-group) {
  display: grid; grid-template-columns: var(--fd-list-cols); align-items: center; column-gap: 12px;
  padding: 0 var(--row-pad-inline);
}
body.shell-v2 .fd-list-head {
  position: sticky; top: 0; z-index: 1; height: 28px;
  background: var(--canvas); border-bottom: 1px solid var(--hairline); color: var(--ink-48); font-size: var(--fs-footnote);
}
body.shell-v2 .fd-list-sort {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
body.shell-v2 .fd-list-sort:hover, body.shell-v2 .fd-list-sort.is-active { color: var(--ink-80); }
body.shell-v2 .fd-list-sort:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-xs); }
body.shell-v2 .fd-row { height: 32px; border-bottom: 1px solid var(--hairline-soft); color: var(--ink-80); }
/* 호버 = 아주 옅은 면 하나(즉시). 선택·경로·드롭 대상은 제 색이 이긴다. 아이콘 타일에는 두지 않는다(macOS).
   포인터 호버가 있는 기기에서만 — 터치에서는 탭한 줄에 호버가 눌어붙는다. */
@media (hover: hover) {
  body.shell-v2 .fd-row:hover:not(.is-selected, .is-drop-target),
  body.shell-v2 .fd-col-item:hover:not(.is-selected, .is-path, .is-drop-target) { background: var(--surface-1); }
}
body.shell-v2 .fd-row.is-selected { background: var(--fd-sel-row); color: var(--ink); --fd-dot-ring: var(--fd-sel-row-solid); }
body.shell-v2 .fd-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
body.shell-v2 .fd-row.is-drop-target { background: var(--fd-sel-plate); box-shadow: inset 0 0 0 2px var(--accent); }
body.shell-v2 .fd-list-group { height: 28px; border-bottom: 1px solid var(--hairline); color: var(--ink-48); font-size: var(--fs-footnote); font-weight: 600; }
body.shell-v2 .fd-list-group-cell { grid-column: 1 / -1; }
body.shell-v2 :is(.fd-cell, .fd-hcell) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .fd-cell--num { text-align: right; font-variant-numeric: tabular-nums; }
body.shell-v2 .fd-cell--updated { color: var(--ink-48); font-variant-numeric: tabular-nums; }
body.shell-v2 .fd-row.is-selected .fd-cell--updated { color: var(--ink-80); }
body.shell-v2 .fd-cell--stage { display: flex; align-items: center; gap: 4px; }
body.shell-v2 .fd-cell--lead { display: flex; align-items: center; gap: 6px; padding-left: calc(var(--fd-level, 0) * 18px); color: var(--ink); }
body.shell-v2 .fd-cell--lead .fd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .fd-disclosure {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 16px; height: 16px; padding: 0; border: 0; border-radius: var(--r-xs);
  background: none; color: var(--ink-48); cursor: pointer; transition: transform 120ms var(--ease);
}
body.shell-v2 .fd-disclosure.is-open { transform: rotate(90deg); }
body.shell-v2 .fd-disclosure-gap { flex: 0 0 16px; }
body.shell-v2 .fd-glyph { flex: 0 0 auto; color: var(--ink-48); }
/* 13px 글자 옆 16px 선 아이콘 — 선 굵기를 글자 무게에 맞춘다(영상 캔버스 선례 1.75). */
body.shell-v2 svg.fd-glyph { stroke-width: 1.75; }
body.shell-v2 .fd-glyph--folder { color: var(--fd-edge); }
body.shell-v2 .fd-glyph--thumb { width: 24px; height: 18px; object-fit: cover; border-radius: 3px; outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }

/* ── 칼럼 보기 ── */
body.shell-v2 .fd-columns { display: flex; align-items: stretch; height: 100%; min-height: 360px; overflow-x: auto; overflow-y: hidden; }
body.shell-v2 .fd-column { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--hairline); }
body.shell-v2 .fd-column.is-drop-target { background: var(--fd-sel-plate); }
body.shell-v2 .fd-col-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 6px; }
body.shell-v2 .fd-col-item {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: var(--r-sm);
  color: var(--ink-80); font-size: var(--fs-fine); letter-spacing: var(--ls-fine);
}
body.shell-v2 .fd-col-item .fd-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.shell-v2 .fd-col-chevron { flex: 0 0 auto; color: var(--ink-48); }
body.shell-v2 .fd-col-item.is-path { background: var(--surface-3); color: var(--ink); }
body.shell-v2 .fd-col-item.is-selected { background: var(--fd-sel-row); color: var(--ink); --fd-dot-ring: var(--fd-sel-row-solid); }
body.shell-v2 .fd-col-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
body.shell-v2 .fd-col-item.is-drop-target { box-shadow: inset 0 0 0 2px var(--accent); }
body.shell-v2 .fd-col-empty { padding: var(--sp-md); color: var(--ink-48); font-size: var(--fs-footnote); text-align: center; }
body.shell-v2 .fd-col-resize { position: absolute; top: 0; right: -4px; z-index: 1; width: 8px; height: 100%; cursor: col-resize; touch-action: none; }
body.shell-v2 .fd-col-preview { flex: 0 0 auto; width: 320px; overflow-y: auto; padding: var(--sp-md); }

/* ── 미리보기 판(칼럼 끝 칸 · 갤러리) ── */
body.shell-v2 .fd-preview { display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 0; }
body.shell-v2 .fd-preview-art {
  --fd-icon: 160; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--surface-1);
}
body.shell-v2 .fd-preview-art--folder { aspect-ratio: auto; padding: var(--sp-xl) 0 var(--sp-sm); overflow: visible; background: none; }
/* 그림 가장자리 한 줄(10% 흰색) — outline 은 자식(그림·영상) 위에 칠해진다. 폴더 판은 제 테두리가 있어 뺀다. */
body.shell-v2 .fd-preview-art:not(.fd-preview-art--folder) { outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
body.shell-v2 .fd-preview-media { display: block; width: 100%; height: 100%; object-fit: contain; }
body.shell-v2 .fd-preview-body { display: flex; flex-direction: column; gap: var(--sp-xs); min-width: 0; }
body.shell-v2 .fd-preview-title {
  margin: 0; font-family: var(--font-heading); font-size: var(--fs-title-3); font-weight: 600; line-height: var(--lh-title-3);
  letter-spacing: var(--ls-body); /* h3 전역 규칙의 -1px(디스플레이용)이 17px 한글을 붙여 놓았다 */
  color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance;
}
body.shell-v2 .fd-preview-logline { margin: 0; font-size: var(--fs-fine); line-height: 1.55; letter-spacing: var(--ls-fine); color: var(--ink-80); word-break: keep-all; text-wrap: pretty; }
body.shell-v2 .fd-preview-meta { display: grid; gap: 6px; margin: var(--sp-xxs) 0 0; font-size: var(--fs-footnote); letter-spacing: var(--ls-footnote); }
body.shell-v2 .fd-preview-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: center; }
body.shell-v2 .fd-preview-key { color: var(--ink-48); }
body.shell-v2 .fd-preview-val { margin: 0; min-width: 0; color: var(--ink-80); font-variant-numeric: tabular-nums; }
body.shell-v2 .btn.fd-preview-open { align-self: flex-start; margin-top: var(--sp-xxs); }

/* ── 갤러리 보기 ── */
body.shell-v2 .fd-gallery { display: flex; flex-direction: column; gap: var(--sp-md); height: 100%; min-height: 420px; padding: var(--sp-md) var(--sp-lg); }
body.shell-v2 .fd-gallery-stage { flex: 1 1 auto; min-height: 0; display: flex; }
body.shell-v2 .fd-gallery-hero { flex: 1 1 auto; flex-direction: row; gap: var(--sp-lg); min-height: 0; }
body.shell-v2 .fd-gallery-hero .fd-preview-art { --fd-icon: 160; flex: 1 1 auto; min-width: 0; aspect-ratio: auto; background: var(--surface-1); }
/* 그림 없는 항목의 큰 글자 카드 — 160px 카드가 786px 판 한가운데 점처럼 떠 있었다(1440 실측). 판 높이에 맞춰 키운다(좁으면 줄어든다). */
body.shell-v2 .fd-gallery-hero .fd-card--bare { width: auto; height: min(240px, 56%); }
body.shell-v2 .fd-gallery-hero .fd-card--bare .fd-card-glyph { width: 48px; height: 48px; }
body.shell-v2 .fd-gallery-hero .fd-preview-body { flex: 0 0 260px; overflow-y: auto; }
body.shell-v2 .fd-strip { flex: 0 0 auto; display: flex; gap: var(--sp-xxs); overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
body.shell-v2 .fd-strip-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 104px; padding: 4px; border-radius: var(--r-md); }
body.shell-v2 .fd-strip-thumb { --fd-icon: 84; display: flex; align-items: center; justify-content: center; width: 96px; height: 64px; border-radius: var(--r-sm); }
body.shell-v2 .fd-strip-item--folder .fd-strip-thumb { --fd-icon: 72; }
body.shell-v2 .fd-strip-item .fd-name {
  max-width: 100%; padding: 0 6px; border-radius: var(--r-pill); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-footnote); color: var(--ink-80); letter-spacing: var(--ls-footnote);
}
body.shell-v2 .fd-strip-item.is-selected .fd-strip-thumb { background: var(--fd-sel-plate); }
body.shell-v2 .fd-strip-item.is-selected .fd-name { background: var(--fd-sel-pill); color: var(--on-accent); }
body.shell-v2 .fd-strip-item:focus-visible .fd-strip-thumb { box-shadow: var(--ring-focus); }
body.shell-v2 .fd-strip-item.is-drop-target .fd-strip-thumb { box-shadow: inset 0 0 0 2px var(--accent); }

@media (max-width: 1099px) {
  body.shell-v2 .fd-gallery-hero { flex-direction: column; }
  body.shell-v2 .fd-gallery-hero .fd-preview-body { flex: 0 0 auto; }
}

/* 터치 — 과녁 44px(D16 · coarseTouchTarget). 32px 행은 이 분기 밖에서만 32 다. */
@media (pointer: coarse) {
  body.shell-v2 .fd-list-head { height: 44px; }
  body.shell-v2 .fd-row { height: 44px; }
  body.shell-v2 .fd-col-item { height: 44px; }
  body.shell-v2 .fd-list-sort { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  body.shell-v2 .fd-disclosure { transition: none; }
}