/* Shared bounded collection layout. Opt in at an app-owned root only. */
.media-collection[data-media-layout="viewport"]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;height:var(--media-collection-height,100dvh);overflow:hidden}
.media-collection[data-media-layout="flow"]{display:flex;flex-direction:column;min-width:0;min-height:0;height:auto;overflow:visible}
.media-collection__toolbar,.media-collection__footer{min-width:0;background:var(--workspace-panel,var(--media-surface));color:var(--workspace-ink,var(--media-text));border-color:var(--workspace-line,var(--media-border))}
.media-collection__toolbar{padding:var(--media-space-3,12px);border-bottom:1px solid var(--workspace-line,var(--media-border))}
.media-collection__body{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding-block:12px}
.media-collection__footer{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:6px 12px;border-top:1px solid var(--workspace-line,var(--media-border));padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}
.media-collection__footer button,.media-collection__footer input,.media-collection__footer select{min-width:44px;min-height:44px;font:inherit}
.media-collection__footer [aria-live]{font-variant-numeric:tabular-nums}
.media-collection__body:focus-visible,.media-collection__footer :focus-visible{outline:2px solid var(--workspace-accent,var(--media-accent));outline-offset:2px}
.media-collection__body table{min-width:max-content}
.media-collection__body .media-table-scroll{max-width:100%;overflow:auto;overscroll-behavior:contain}
/* Shared tool panels. Placement and scrolling belong to each app. */
.media-tool-panel {
  --media-tool-bg: var(--workspace-panel, var(--media-surface, Canvas));
  --media-tool-ink: var(--workspace-ink, var(--media-text, CanvasText));
  --media-tool-muted: var(--workspace-muted, var(--media-muted, var(--media-tool-ink)));
  --media-tool-line: var(--workspace-line, var(--media-border, currentColor));
  --media-tool-accent: var(--workspace-accent, var(--media-accent, Highlight));
  --media-tool-font: var(--workspace-sans, var(--media-sans, system-ui, sans-serif));
  --media-tool-title-font: 650 16px/1.4 var(--media-tool-font);
  --media-tool-field: color-mix(in srgb, var(--workspace-bg, var(--media-bg, var(--media-tool-bg))) 62%, var(--media-tool-bg));
  --media-tool-tint: var(--workspace-tint, color-mix(in srgb, var(--media-tool-accent) 12%, var(--media-tool-bg)));
  --media-tool-radius: 14px;
  --media-tool-close-size: 32px;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--media-tool-line);
  border-radius: var(--media-tool-radius);
  background: var(--media-tool-bg);
  color: var(--media-tool-ink);
}
.media-tool-panel:not(.media-tool-panel--tokens-only) {
  font: 14px/1.5 var(--media-tool-font);
  text-align: start;
}
.media-tool-panel:not(.media-tool-panel--tokens-only) .media-tool-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  height: auto;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
.media-tool-panel:not(.media-tool-panel--tokens-only) .media-tool-panel__head > div { flex: 1; min-width: 0; }
.media-tool-panel .media-tool-panel__title {
  margin: 0;
  padding: 0;
  color: var(--media-tool-ink);
  font: var(--media-tool-title-font);
  letter-spacing: -.02em;
}
.media-tool-panel .media-tool-panel__copy {
  margin: 4px 0 0;
  color: var(--media-tool-muted);
  font: 400 12px/1.55 var(--media-tool-font);
}
.media-tool-panel .media-tool-panel__close {
  display: inline-flex;
  flex: 0 0 var(--media-tool-close-size);
  align-items: center;
  justify-content: center;
  width: var(--media-tool-close-size);
  min-width: var(--media-tool-close-size);
  height: var(--media-tool-close-size);
  min-height: var(--media-tool-close-size);
  margin: -4px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--media-tool-muted);
  font: 400 22px/1 var(--media-tool-font);
  cursor: pointer;
}
.media-tool-panel .media-tool-panel__close:hover {
  background: var(--workspace-soft, var(--media-tool-field));
  color: var(--media-tool-ink);
}
.media-tool-panel:not(.media-tool-panel--tokens-only) :is(input:not([type]), input[type=text], input[type=search], input[type=number], input[type=date], select, textarea) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--media-tool-line);
  border-radius: 9px;
  background: var(--media-tool-field);
  color: var(--media-tool-ink);
  font: 400 14px/1.45 var(--media-tool-font);
}
.media-tool-panel:not(.media-tool-panel--tokens-only) :is(input[type=checkbox], input[type=radio]) {
  appearance: auto;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 0;
  max-height: 18px;
  margin: 0;
  padding: 0;
  flex: 0 0 18px;
  accent-color: var(--media-tool-accent);
}
.media-tool-panel:not(.media-tool-panel--tokens-only) :is(button, input, select, textarea, summary, a):focus-visible {
  outline: 2px solid var(--media-tool-accent);
  outline-offset: 3px;
}
.media-tool-panel:not(.media-tool-panel--tokens-only) label {
  color: var(--media-tool-ink);
  font: 500 12px/1.4 var(--media-tool-font);
}
.media-tool-panel:not(.media-tool-panel--tokens-only) :is(button, select, input, textarea):disabled { opacity: .5; cursor: not-allowed; }
.media-tool-panel:not(.media-tool-panel--tokens-only) button[aria-pressed=true] {
  border-color: var(--media-tool-accent);
  background: var(--media-tool-tint);
  color: var(--media-tool-accent);
}
@media(max-width:600px) {
  .media-tool-panel { --media-tool-close-size: 44px; }
  .media-tool-panel:not(.media-tool-panel--tokens-only) .media-tool-panel__head { gap: 10px; }
}
@media(max-width:600px){.media-collection[data-media-layout="viewport"]{grid-template-rows:auto minmax(0,1fr) auto}.media-collection__toolbar{padding:8px}.media-collection__footer{justify-content:center;flex-wrap:wrap;padding-inline:6px}.media-collection__footer>*{max-width:100%}}
@media(max-height:560px){.media-collection[data-media-layout="viewport"]{height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column}.media-collection[data-media-layout="viewport"]>.media-collection__body{overflow:visible;min-height:0;max-height:none}}
@media(max-width:359px){.media-collection__footer{justify-content:flex-start}.media-collection__footer>[data-media-secondary]{display:none}}

/* ===== 공통 상단 바 v3 — 이미지 앱 (2026-11-14, 4개 앱 디자인 일관성) =====
   기준: orchestration/claude/design-review-20261114/app-bar.css (novel·video와 같은 값).
   JOB-5689 작은 두 줄 메뉴 결정 유지. 이미지 앱의 기존 구체 규칙과 같은 구체성으로 맨 뒤에서 시각 값만 맞춘다. */
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail:not(.workspace-rail-vertical) { background: var(--workspace-panel); border-bottom: 1px solid var(--workspace-line); }
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail > .workspace-home { gap: 8px; min-height: 36px; padding: 0 8px 0 4px; color: var(--workspace-ink); font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail > .workspace-home svg { width: 18px; height: 18px; }
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail > .workspace-home small { display: none; }
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail .image-work-areas > a,
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail .image-work-areas > details > summary { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--workspace-muted); font-size: 13px; font-weight: 500; }
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail .image-work-areas > a[aria-current] { background: var(--workspace-tint); color: var(--workspace-accent); font-weight: 650; }
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail .image-work-areas > :is(a,details > summary):hover:not([aria-current]) { background: var(--workspace-soft); color: var(--workspace-ink); }
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail > :is(#image-work-record, #image-theme-menu > summary, details > summary, button) { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; line-height: 1; }
@media (max-width: 640px) {
  html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail > .workspace-home { font-size: 14px; }
  html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail .image-work-areas > :is(a, details > summary) { padding: 0 8px; }
}
html:is([data-image-workspace-ready=true],[data-image-initial-chrome]) body[data-workspace-app=image] #workspace-rail > #image-theme-menu > summary { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; line-height: 1; }
/* ===== 공통 상단 바 v3 — 이미지 앱 끝 ===== */

/* ===== 스크롤 집중 보기 v2 (2026-11-14) — scroll-chrome.js와 짝 =====
   목록 영역을 아래로 스크롤하면 1단(상단 바)과 2단(도구 줄)을 접어 목록이 넓어지고, 위로 스크롤하면 다시 펼친다. */
html[data-scroll-chrome=hidden] :is(body[data-workspace-app=image] #workspace-rail, body[data-workspace-app=video] #workspace-rail, body[data-workspace-app=novel] > .media-app-header,
  body[data-workspace-app=image] #atlas-gallery .ag-controls, body[data-workspace-app=image] #atlas-gallery .ag-toolbar, body[data-workspace-app=image] #image-workbench > .image-task-header, body[data-workspace-app=video] .media-collection__toolbar, body[data-workspace-app=novel] #browse-controls, body[data-workspace-app=novel] #main-content > .library-memory) {
  height: 0 !important; max-height: 0 !important; min-height: 0 !important; margin-block: 0 !important; padding-block: 0 !important;
  border-block-width: 0 !important; overflow: hidden !important; opacity: 0;
}
html[data-scroll-chrome] :is(#workspace-rail, body > .media-app-header, #atlas-gallery .ag-controls, #image-workbench > .image-task-header, .media-collection__toolbar, #browse-controls) { transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) {
  html[data-scroll-chrome] :is(#workspace-rail, body > .media-app-header, #atlas-gallery .ag-controls, #image-workbench > .image-task-header, .media-collection__toolbar, #browse-controls) { transition: none; }
}
/* 스크롤이 집중 보기를 대신하므로 이미지 앱의 별도 버튼은 숨긴다 */
body[data-workspace-app=image] :is(#image-benchmark-focus, #image-desktop-tools-toggle) { display: none !important; }
/* ===== 스크롤 집중 보기 v2 끝 ===== */

/* ===== 메뉴 2단 구성 v2 (2026-11-14) =====
   2단(도구 줄) = (화면 이름) · (탐색) · 필터 · 표시 · 건수 … 페이지 이동, 한 줄.
   건수를 버튼 뒤에 두어 버튼 위치가 숫자 길이와 상관없이 고정되고, "조건 → 결과 개수" 순서로 읽힌다(2026-11-15). 따로 떨어진 제목 줄·건수 줄을 없앤다.
   열린 패널·적용 조건은 그 아래 한 줄 전체를 쓴다. */

/* 이미지(보관함 화면): 제목 글자만 화면 읽기 프로그램용으로 남긴다.
   JOB-5788: 헤더 전체를 1px로 자르면 그 안의 도구 줄(#image-work-nav)이 폭 0이 되어
   유일한 실행 기록 진입점(`기록`)이 화면 밖(x=-22)에서 클릭 불가가 된다. 제목만 숨기고
   도구 줄은 한 줄로 남긴다. */
body[data-workspace-app=image][data-image-work-screen=gallery] #image-workbench > .image-task-header {
  position: relative; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; white-space: normal; border: 0;
}
body[data-workspace-app=image][data-image-work-screen=gallery] #image-workbench > .image-task-header > .image-task-heading-row > #image-work-heading {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 이미지(개인·공개): 건수(.ag-result-context)는 스크립트가 도구 줄 안 버튼 바로 뒤로 옮긴다(건수 위치 블록). */
body[data-workspace-app=image] #atlas-gallery .ag-result-context.in-tool-row {
  display: inline-flex; align-items: center; flex: none; margin: 0 0 0 6px; padding: 0; border: 0; background: none;
  color: var(--workspace-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
body[data-workspace-app=image] #atlas-gallery .ag-compact-row { flex-wrap: nowrap; align-items: center; }
/* 순서 고정: 도구 → 건수 → (빈칸) → 페이지 이동. 기존 order 규칙보다 우선한다. */
body[data-workspace-app=image] #atlas-gallery :is(.ag-compact-row, .ag-toolbar) > :is(#image-desktop-tools-gallery, #ag-public-explore, #ag-filter-toggle, #ag-direct-display, #ag-display) { order: 0 !important; }
body[data-workspace-app=image] #atlas-gallery :is(.ag-compact-row, .ag-toolbar) > .ag-result-context.in-tool-row { order: 1 !important; }
body[data-workspace-app=image] #atlas-gallery :is(.ag-compact-row, .ag-toolbar) > :is(.ag-result-bar, .ag-pages) { order: 2 !important; }
/* 제목 글자를 숨긴 뒤 남는 제목 줄 높이를 없앤다. 도구 줄(#image-work-nav)에 보이는 항목(예: 기록)이 있으면 그 높이만큼만 차지한다(JOB-5788 진입점 유지). */
body[data-workspace-app=image][data-image-work-screen=gallery] #image-workbench > .image-task-header,
body[data-workspace-app=image][data-image-work-screen=gallery] #image-workbench > .image-task-header > .image-task-heading-row { min-height: 0 !important; height: auto !important; padding-block: 0 !important; margin-block: 0 !important; }
body[data-workspace-app=image] #atlas-gallery :is(.ag-compact-row, .ag-toolbar) > :is(.ag-result-bar, .ag-pages) { margin-left: auto; }
body[data-workspace-app=image] #atlas-gallery .ag-pages :is(button, input) { min-height: 32px; height: 32px; }

/* 소설(서재): 도구 → 건수 … 페이지 이동 */
body[data-workspace-app=novel]:not(.candidate-page) #browse-controls { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
body[data-workspace-app=novel]:not(.candidate-page) #browse-controls > .browse-line { display: contents; }
body[data-workspace-app=novel]:not(.candidate-page) #browse-controls > * { order: 3; flex-basis: 100%; }
body[data-workspace-app=novel]:not(.candidate-page) #browse-controls #status { padding-inline-start: 2px !important;
  order: 1; flex: 0 0 auto; max-width: none; margin: 0; padding: 0; border: 0; color: var(--workspace-muted); font-size: 13px; font-variant-numeric: tabular-nums;
}
body[data-workspace-app=novel]:not(.candidate-page) #browse-controls > .library-tools { order: 0; flex: 0 0 auto; margin: 0; }
body[data-workspace-app=novel]:not(.candidate-page) #browse-controls #pagination { order: 2; flex: 0 0 auto; width: auto !important; justify-content: flex-end; margin: 0 0 0 auto; padding: 0; border: 0; }
/* ===== 메뉴 2단 구성 v2 끝 ===== */

/* ===== 메뉴 아이콘·밀도 v5 (2026-11-14) — menu-icons.js와 짝 =====
   모든 메뉴 항목 = [아이콘 16px][이름]. 줄이 넘치면 compact(작게) → icon(아이콘만, 이름은 화면 읽기용으로 유지). */
.menu-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.menu-item > .menu-icon, .menu-item > svg { width: 16px !important; height: 16px !important; flex: none; }
.menu-item > .menu-icon { display: inline-block !important; order: -1; }
.workspace-home.menu-item > svg { display: inline-block !important; order: -1; }
.menu-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-icon[data-menu-icon=more], .menu-icon[data-menu-icon=dot] { stroke-width: 3; }
.workspace-home.menu-item > svg, .brand.menu-item > .menu-icon { width: 18px !important; height: 18px !important; }

[data-menu-density=compact] .menu-item { gap: 4px; padding-inline: 7px !important; font-size: 12px !important; }
[data-menu-density=compact] { column-gap: 4px !important; }

[data-menu-density=icon] .menu-item:not(.workspace-home):not(.brand) { gap: 0; padding-inline: 0 !important; width: 32px !important; min-width: 32px !important; height: 32px; flex: none !important; justify-content: center; }
[data-menu-density=icon] :is(.workspace-home, .brand).menu-item { gap: 0; padding-inline: 4px !important; }
[data-menu-density=icon] .menu-item > .menu-label,
[data-menu-density=icon] .menu-item > span:not(.menu-label) > small {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[data-menu-density=icon] { column-gap: 2px !important; }
/* tight: 아이콘만으로도 넘치면 보조 정보(화면 이름 등 .menu-secondary)를 화면 읽기용으로만 남긴다. 아이콘 규칙은 icon과 같다. */
[data-menu-density=tight] .menu-item:not(.workspace-home):not(.brand) { gap: 0; padding-inline: 0 !important; width: 32px !important; min-width: 32px !important; height: 32px; flex: none !important; justify-content: center; }
[data-menu-density=tight] .menu-item > .menu-label, [data-menu-density=tight] .menu-secondary {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 앱 이름은 아이콘만 남아도 첫 자리라 알아볼 수 있다 */
[data-menu-density=icon] :is(.workspace-home, .brand).menu-item { min-width: 32px; }
/* 이미지 앱(개인·공개)의 예전 아이콘(가상 요소)은 공통 아이콘으로 대체 */
body[data-workspace-app=image] .menu-item::before { display: none !important; }
/* ===== 메뉴 아이콘·밀도 v5 끝 ===== */