/* 사이드바·브라우저(X-01.7·X-01.15, LAYOUT §2.1·§2.2·§5): 머리 행 버튼, 보관함 목록, 필름스트립. 내용은 ui/library/*(T255~T258). */

.sidebar-body, .browser-body { background: var(--pane-bg); }

/* 사이드바 전환 버튼 3개: 약 16px 글리프, 약 35px 간격, 활성 = 강조색 */
.pane-switcher { display: flex; gap: 19px; }
.pane-switcher-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--icon-off);
}
.pane-switcher-button[aria-pressed="true"] { color: var(--icon-on); }

/* 보관함 목록 행 */
.library-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  color: var(--text-primary);
  font-size: var(--fs-list);
  white-space: nowrap;
}
.library-row[aria-selected="true"] { background: var(--row-selected); }

/* 브라우저 머리 행 오른쪽 정렬 컨트롤 */
.browser-header-controls { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* 필름스트립 */
.filmstrip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 14px 10px;
  padding: 10px;
}

.filmstrip-clip { position: relative; border-radius: 3px; }
.filmstrip-thumbs {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--viewer-canvas-surround);
  border-radius: 3px;
  overflow: hidden;
}
.filmstrip-name {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: var(--fs-filmstrip);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 선택 범위 노란 테두리(2~3px)·선택 안 된 범위 주황 1px·사용 중 주황 선(LAYOUT §5.3) */
.filmstrip-clip[aria-selected="true"] .filmstrip-thumbs { box-shadow: inset 0 0 0 2.5px var(--selection); }
.filmstrip-range { position: absolute; top: 0; bottom: 0; box-shadow: inset 0 0 0 1px var(--range-used); }
.filmstrip-range.is-selected { box-shadow: inset 0 0 0 2.5px var(--selection); }
.filmstrip-line-used { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--range-used); }

/* 빈·로딩·오류 상태(A-003.7) */
.browser-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
  color: var(--text-secondary);
  text-align: center;
}

/* ── US1 보관함 화면(T255~T258·T283) ── */

/* 사이드바 트리: 보관함 행 아래 이벤트 들여쓰기, 펼침 삼각형 */
.library-tree { padding: 4px 0; outline: none; }
.library-row.is-event { padding-left: 26px; }
.library-row:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.library-disclosure { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--text-secondary); }
.library-row[aria-expanded="true"] .library-disclosure { transform: rotate(90deg); }
.library-row-name { overflow: hidden; text-overflow: ellipsis; }

/* 필름스트립 타일: 썸네일 가로 줄, 길이 표시, 스키머 */
.browser-filmstrip { position: relative; height: 100%; overflow: auto; }
.filmstrip-thumbs { display: flex; touch-action: none; user-select: none; -webkit-user-select: none; }
.filmstrip-thumb { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; }
.filmstrip-clip.is-loading .filmstrip-thumbs { opacity: 0.6; }
.filmstrip-clip.is-audio .filmstrip-thumbs { background: var(--role-dialogue-dark); }
.filmstrip-clip.is-whole-selected .filmstrip-thumbs { box-shadow: inset 0 0 0 2.5px var(--selection); }
.filmstrip-clip[aria-selected="true"]:not(.is-whole-selected) .filmstrip-thumbs { box-shadow: none; }
.filmstrip-duration { position: absolute; top: 2px; right: 4px; padding: 0 3px; border-radius: 2px; background: rgb(0 0 0 / 0.55); color: var(--text-primary); font-size: var(--fs-filmstrip); font-variant-numeric: tabular-nums; pointer-events: none; }
.filmstrip-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4px; color: var(--notice-error); font-size: var(--fs-filmstrip); text-align: center; }
.filmstrip-relink-button { margin: 4px 0; padding: 3px 7px; border: 1px solid var(--pane-border); border-radius: 4px; background: var(--toolbar-button); color: var(--text-primary); font: inherit; cursor: pointer; }
.filmstrip-relink-button:disabled { opacity: 0.5; cursor: default; }
.filmstrip-relink-error { color: var(--notice-error); font-size: var(--fs-filmstrip); }
.filmstrip-range { pointer-events: none; }
.skimmer-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--skimmer); pointer-events: none; }
.skimmer-info { position: absolute; top: 2px; z-index: 2; padding: 2px 6px; border-radius: 3px; background: rgb(0 0 0 / 0.75); color: var(--text-primary); font-size: var(--fs-filmstrip); white-space: nowrap; pointer-events: none; }
.browser-empty { flex-direction: column; gap: 10px; }
.browser-import-button { height: 24px; padding: 0 12px; border: 0; border-radius: 5px; background: var(--toolbar-button); color: var(--text-primary); font: inherit; }

/* 미디어 가져오기 창(SCREENS A §10): 원본 | 미리보기·목록 | 옵션 */
.dialog.import-window { width: min(1100px, calc(100vw - 32px)); max-width: none; }
.import-main { display: grid; grid-template-columns: 170px 1fr 260px; gap: 12px; height: min(560px, calc(100vh - 180px)); }
.import-sources, .import-options { overflow: auto; }
.import-sources h3 { margin: 10px 0 4px; color: var(--text-header); font-size: var(--fs-list); }
.import-source { display: block; width: 100%; padding: 3px 6px; border: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: left; }
.import-source:hover { background: var(--row-selected); }
.import-source-note { margin: 0; color: var(--text-secondary); font-size: var(--fs-filmstrip); }
.import-center { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.import-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; background: var(--viewer-canvas-surround); }
.import-preview-frame { max-width: 100%; max-height: 180px; }
.import-files { flex: 1; overflow: auto; }
.import-file { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 4px 6px; border-radius: 3px; }
.import-file[aria-selected="true"] { background: var(--row-selected); }
.import-file.is-unreadable { opacity: 0.5; }
.import-file-meta { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.import-file-strip { position: relative; grid-column: 1 / -1; height: 18px; background: var(--pane-bg-alt); border-radius: 2px; touch-action: none; }
.import-file.is-unreadable .import-file-strip, .import-file.is-pending .import-file-strip { display: none; }
.import-empty { color: var(--text-secondary); text-align: center; }
.import-choose { height: 24px; padding: 0 12px; border: 0; border-radius: 5px; background: var(--toolbar-button); color: var(--text-primary); font: inherit; }
.import-section { margin: 0 0 10px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--divider); }
.import-section legend { padding: 0; color: var(--text-header); font-weight: 700; }
.import-option { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.import-option.is-disabled { color: var(--text-secondary); }
.import-section select, .import-event-name { width: 100%; margin: 2px 0 4px; }
.import-buttons { align-items: center; }
.import-close-after { margin-right: auto; }

/* 백그라운드 작업 창(X-01.26): 섹션 접기, 작업 행 = 이름·진행 막대·퍼센트·버튼 */
.dialog.bg-tasks { position: fixed; inset: 60px 24px auto auto; margin: 0; width: 380px; }
.bg-tasks-sections { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.bg-tasks-section-head { display: flex; width: 100%; justify-content: space-between; padding: 2px 0; border: 0; background: transparent; color: var(--text-header); font: inherit; font-weight: 700; text-align: left; }
.bg-tasks-none { padding: 2px 12px; color: var(--text-secondary); }
.bg-task { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 4px 12px; }
.bg-task progress { grid-column: 1 / -1; width: 100%; }
.bg-task-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-task-state, .bg-task-reason { color: var(--text-secondary); font-size: var(--fs-filmstrip); }
.bg-task.is-failed .bg-task-reason { color: var(--notice-error); }
.bg-task-button { height: 20px; padding: 0 8px; border: 0; border-radius: 4px; background: var(--toolbar-button); color: var(--text-primary); font: inherit; font-size: var(--fs-filmstrip); }
.bg-task-button:disabled { opacity: var(--icon-disabled-opacity); }

/* 프로젝트 타일(B-017.1): 클래퍼 표시 + 썸네일(첫 비디오 클립) */
.filmstrip-project { position: relative; border-radius: 3px; }
.filmstrip-project .filmstrip-thumbs { background: var(--viewer-canvas-surround); }
.filmstrip-project-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--text-primary); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6)); pointer-events: none; z-index: 1; }
.filmstrip-project[aria-selected="true"] .filmstrip-thumbs { box-shadow: inset 0 0 0 2.5px var(--selection); }

/* 가져오는 중 클립(결정 2026-10-05, A-003.7): 자리표시 + 문구 + 진행 막대 */
.filmstrip-clip.is-importing .filmstrip-thumbs { background: repeating-linear-gradient(135deg, var(--viewer-canvas-surround) 0 8px, var(--pane-bg) 8px 16px); }
.filmstrip-importing { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; pointer-events: none; }
.filmstrip-importing-label { color: var(--text-secondary); font-size: var(--fs-filmstrip); }
.filmstrip-importing-progress { width: 80%; height: 4px; }