/* 타임라인 영역(X-01.17, LAYOUT §3·§5): 머리 막대 #333 · 눈금자 18px · 트랙 영역. 캔버스 그리기는 ui/timeline/*(T264~T270). */

.timeline-header {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--h-timeline-header);
  padding: 0 8px;
  background: var(--timeline-header);
  color: var(--icon-off);
  border-bottom: 1px solid var(--divider);
  box-sizing: border-box;
  font-size: var(--fs-header);
  white-space: nowrap;
  overflow: hidden;
}

.timeline-header-group { display: flex; align-items: center; gap: 2px; }
.timeline-header-center { flex: 1 1 auto; justify-content: center; color: var(--text-header); }
.timeline-header-divider { width: 1px; height: 16px; margin: 0 6px; background: var(--divider); }

.timeline-header-button {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 22px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--icon-off);
  font: inherit;
}

.timeline-header-button:hover:not([aria-disabled="true"]) { background: rgb(255 255 255 / 0.06); }
.timeline-header-button[aria-pressed="true"] { color: var(--icon-on); }
.timeline-header-button[aria-disabled="true"] > .icon { opacity: var(--icon-disabled-opacity); }
.timeline-header-button > .icon[data-icon="chevron-down"] { width: 8px; height: 5px; }

.timeline-body {
  background: var(--pane-bg);
  overflow: hidden;
}

.timeline-ruler {
  position: sticky;
  top: 0;
  height: var(--h-ruler);
  background: var(--ruler-bg);
  color: var(--ruler-text);
  font-family: var(--font-timecode);
  font-size: var(--fs-ruler);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--divider);
  box-sizing: border-box;
  z-index: 1;
}

.timeline-canvas {
  position: absolute;
  inset: var(--h-ruler) 0 0 0;
  width: 100%;
  height: calc(100% - var(--h-ruler));
  display: block;
}

/* 빈 프로젝트·프로젝트 없음 안내(X-01.35 [recall, unverified]) */
.timeline-empty {
  position: absolute;
  inset: var(--h-ruler) 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: var(--fs-list);
  pointer-events: none;
}

/* 빈 프로젝트 안내는 주 스토리라인 띠 안(B-001.7) — 위치는 timeline-view.js가 띠 y로 맞춘다 */
.timeline-empty[data-band] { bottom: auto; }
.timeline-empty[hidden] { display: none; }

/* 캔버스 호스트(T264): 눈금자 캔버스·라이브 영역·커서(B-042.3 — 자체 커서 글리프 전까지 기본 커서로 근사 [recall, unverified]) */
.timeline-ruler-canvas { display: block; }
.timeline-canvas:focus { outline: none; }
.timeline-canvas:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.timeline-canvas[data-cursor="arrow"], .timeline-canvas[data-cursor="position"] { cursor: default; }
.timeline-canvas[data-cursor="ripple-start"] { cursor: w-resize; }
.timeline-canvas[data-cursor="ripple-end"] { cursor: e-resize; }
.timeline-canvas[data-cursor="roll"], .timeline-canvas[data-cursor="trim"] { cursor: col-resize; }
.timeline-canvas[data-cursor="slip"], .timeline-canvas[data-cursor="slide"] { cursor: ew-resize; }
.timeline-canvas[data-cursor="range"], .timeline-canvas[data-cursor="blade"] { cursor: crosshair; }
.timeline-canvas[data-cursor="zoom-in"] { cursor: zoom-in; }
.timeline-canvas[data-cursor="zoom-out"] { cursor: zoom-out; }
.timeline-canvas[data-cursor="hand"] { cursor: grab; }
.timeline-canvas[data-cursor="hand-closed"] { cursor: grabbing; }

.timeline-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 머리 막대 글자·가운데 묶음(X-01.17) */
.timeline-header { position: relative; }
.timeline-header-text { padding: 0 2px; }
.timeline-project-name { margin: 0 6px; color: var(--text-header); }
.timeline-duration { margin-right: 6px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* 도구·편집 팝업 */
.timeline-popup {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 4px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.5);
}

.timeline-popup-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px 0 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--menu-text);
  font: inherit;
  font-size: var(--fs-menu);
  text-align: left;
}

.timeline-popup-item[aria-checked="true"]::before { content: "\2713"; position: absolute; left: 7px; }
.timeline-popup-item:hover:not([aria-disabled="true"]), .timeline-popup-item:focus-visible { background: var(--menu-highlight); outline: none; }
.timeline-popup-item[aria-disabled="true"] { color: var(--menu-text-disabled); }
.timeline-popup-separator { height: 1px; margin: 4px 0; background: var(--menu-border); }

/* 오디오 미터 창(⇧⌘8, SCREENS §11): 타임라인 오른쪽 열. 꺼져 있으면 열 없음 */
.region-timeline[data-meters="on"] { grid-template-columns: minmax(0, 1fr) var(--w-meters-pane, 56px); }
.region-timeline[data-meters="on"] > .timeline-header, .region-timeline[data-meters="on"] > .pane-body { grid-column: 1; }
.audio-meters-pane { grid-column: 2; grid-row: 1 / 3; display: flex; justify-content: center; padding: 8px 6px; border-left: 1px solid var(--divider); background: var(--pane-bg); min-height: 0; }
.audio-meters { display: flex; gap: 4px; align-items: stretch; height: 100%; }
.audio-meters .meter-bar { width: 10px; height: 100%; }