/* 화면 배치 — 왼쪽 목차 패널과 본문. 넓게보기는 목차를 접고 본문을 넓힌다(data-view="wide"). */
.app {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  height: 100vh;
}

.side {
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  min-height: 0;
}

.side-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.side-title { flex: 1; font-weight: 600; }

.main {
  overflow-y: auto;
  min-width: 0;
  padding: 16px 20px 40px;
}

/* 영상 폭: 본문 폭과, 화면 높이에 맞춘 16:9 폭 중 작은 쪽. 영상과 컨트롤이 한 화면에 들어오게 한다. */
.column {
  width: min(100%, calc((100vh - 150px) * 16 / 9));
  min-width: min(100%, 480px);
  margin: 0 auto;
}

/* 프롬프트를 켜면 영상 높이는 그대로 두고 프롬프트 폭(340px + 간격)만큼 넓힌다 */
.app.prompt-on .column { width: min(100%, calc((100vh - 150px) * 16 / 9 + 352px)); }

/* 넓게보기: 왼쪽 패널을 접고, 목차는 영상 아래 왼쪽 칸(dock)으로 옮긴다(오른쪽 칸은 4단계 자료 자리) */
.app[data-view="wide"] { grid-template-columns: minmax(0, 1fr); }
.app[data-view="wide"] .side { display: none; }

.lower { margin-top: 14px; }
.dock { display: none; }

.app[data-view="wide"] .lower {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.app[data-view="wide"] .dock {
  display: block;
  max-height: 75vh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.dock-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font-weight: 600;
}

/* 좁은 창: 목차 폭을 줄인다 */
@media (max-width: 960px) {
  .app { grid-template-columns: 240px minmax(0, 1fr); }
  .main { padding: 12px 14px 32px; }
}