/* 주 창 배치(X-01.1~X-01.4, LAYOUT §1·§2): 메뉴 막대 → 도구 막대 → 알림 막대 → 작업 공간(위쪽 영역 / 타임라인). */

html, body {
  margin: 0;
  height: 100%;
  background: var(--pane-bg);
  color: var(--text-primary);
}

/* 편집 화면은 페이지가 스크롤되지 않는다(미지원·2급 안내 화면은 스크롤 가능) */
body:has(.app-shell) { overflow: hidden; }

#app { height: 100%; }

.app-shell {
  display: grid;
  grid-template-rows: var(--h-menubar) var(--h-toolbar) auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  font-size: var(--fs-list);
  user-select: none;
  -webkit-user-select: none;
}

/* 작업 공간: 위쪽 영역 · 분할선 · 타임라인 머리 막대 · 타임라인 본문(X-01.3 — 남는 높이를 47.7 : 44.2로) */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    minmax(var(--min-upper), var(--fr-upper))
    1px
    var(--h-timeline-header)
    minmax(var(--min-timeline), var(--fr-timeline));
  min-height: 0;
  background: var(--divider);
}

.upper {
  grid-row: 1;
  display: grid;
  grid-template-columns:
    minmax(var(--min-sidebar), var(--fr-sidebar)) 1px
    minmax(var(--min-browser), var(--fr-browser)) 1px
    minmax(var(--min-viewer), var(--fr-viewer)) 1px
    minmax(var(--min-inspector), var(--fr-inspector));
  min-height: 0;
  min-width: 0;
}

.region {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--pane-bg);
  overflow: hidden;
}

/* 창 머리 행: 높이 28px 공통(X-01.15) */
.pane-header {
  flex: 0 0 var(--h-pane-header);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: var(--pane-bg);
  color: var(--text-header);
  font-size: var(--fs-header);
  border-bottom: 1px solid var(--divider);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

.pane-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
}

/* 타임라인: 머리 막대와 본문이 작업 공간 행 3·4를 그대로 쓴다(subgrid) */
.region-timeline {
  grid-row: 3 / 5;
  display: grid;
  grid-template-rows: subgrid;
}

.region-timeline > .timeline-header { grid-row: 1; }
.region-timeline > .pane-body { grid-row: 2; }

/* 분할선: 1px 거의 검정(X-01.3) + 양옆 넓은 잡기 영역 */
.splitter {
  position: relative;
  background: var(--divider);
  z-index: 2;
  touch-action: none;
}

.splitter::before {
  content: '';
  position: absolute;
}

.splitter[aria-orientation="vertical"] { cursor: col-resize; }
.splitter[aria-orientation="vertical"]::before {
  top: 0;
  bottom: 0;
  left: calc((var(--splitter-hit) - 1px) / -2);
  width: var(--splitter-hit);
}

.splitter[aria-orientation="horizontal"] { cursor: row-resize; grid-row: 2; }
.splitter[aria-orientation="horizontal"]::before {
  left: 0;
  right: 0;
  top: calc((var(--splitter-hit) - 1px) / -2);
  height: var(--splitter-hit);
}

.app-shell.is-resizing-col, .app-shell.is-resizing-col * { cursor: col-resize !important; }
.app-shell.is-resizing-row, .app-shell.is-resizing-row * { cursor: row-resize !important; }

/* 도구 막대(X-01.14, LAYOUT §2): 세로 그라데이션 + 아래 1px 검정 선, 창 제어 버튼 없음(D-02) */
.toolbar {
  display: flex;
  align-items: center;
  height: var(--h-toolbar);
  gap: 8px;
  padding: 0 12px;
  background: linear-gradient(var(--toolbar-top), var(--toolbar-bottom));
  border-bottom: 1px solid #000;
  box-sizing: border-box;
}

.toolbar-spacer { flex: 1 1 auto; }
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-group-share { margin-left: 12px; }
.toolbar-save-status { color: var(--text-header); font-size: var(--fs-list); white-space: nowrap; }
.toolbar-save-status:not([hidden])::before { content: '●'; color: var(--accent); margin-right: 5px; }
.toolbar-save-status[hidden] { display: none; }

.toolbar-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--w-toolbar-button);
  height: var(--h-toolbar-button);
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--toolbar-button);
  color: var(--icon-toolbar);
  font: inherit;
}

.toolbar-button:active:not([aria-disabled="true"]) { background: var(--toolbar-button-pressed); }
.toolbar-button[aria-pressed="true"] { background: var(--toolbar-button-pressed); color: var(--icon-on); }
.toolbar-button[aria-disabled="true"] > .icon { opacity: var(--icon-disabled-opacity); }
.toolbar-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.toolbar-button > .icon { width: var(--icon-size-toolbar); height: var(--icon-size-toolbar); }

/* 백그라운드 작업 진행 링(X-01.14: 강조색 호) */
.toolbar-button .progress-ring {
  position: absolute;
  width: var(--icon-size-toolbar);
  height: var(--icon-size-toolbar);
  color: var(--accent);
  pointer-events: none;
}

/* 아이콘 공통(X-02.3·X-02.4): 색만 바꾼다 */
.icon {
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
  color: inherit;
  vertical-align: middle;
}

.icon[data-state="on"] { color: var(--icon-on); }
.icon[data-state="off"] { color: var(--icon-off); }
.icon[data-state="disabled"] { opacity: var(--icon-disabled-opacity); }

/* 알림 막대(X-08.3·A-003.8·X-06.5·X-09.4) */
.notification-bar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--divider);
  max-height: 40vh;
  overflow: auto;
}

.notification-bar:empty { display: none; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 12px;
  background: var(--notice-bg);
  border-left: 4px solid var(--notice-info);
  font-size: var(--fs-list);
  color: var(--text-primary);
  user-select: text;
  -webkit-user-select: text;
}

.notice[data-kind="error"] { border-left-color: var(--notice-error); }
.notice[data-kind="warning"] { border-left-color: var(--notice-warning); }
.notice-text { flex: 1 1 auto; min-width: 0; }
.notice-message { margin: 2px 0; }
.notice-details { margin: 4px 0 2px; padding-left: 18px; color: var(--text-secondary); }
.notice-details li { margin: 1px 0; }
.notice-file { color: var(--text-primary); margin-inline-end: 6px; }
.notice-actions { display: flex; gap: 6px; flex: none; }

.notice button {
  height: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: var(--toolbar-button);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--fs-button);
}

.notice button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.notice .notice-close { background: transparent; padding: 0 6px; color: var(--text-secondary); }