/* 화면 배치 — 왼쪽 목차 패널과 본문. 넓게보기는 목차를 접고 본문을 넓힌다(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;
}

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

/* 영상 폭: 본문 폭과, 화면 높이에 맞춘 16:9 폭 중 작은 쪽. 영상과 컨트롤이 한 화면에 들어오게 한다.
   프롬프트를 켜도 이 폭은 그대로다(프롬프트는 영상 캔버스 안에 들어간다, player.css). */
.column {
  width: min(100%, calc((100vh - 150px) * 16 / 9));
  min-width: min(100%, 480px);
  margin: 0 auto;
}

/* 넓게보기: 왼쪽 패널을 접고, 목차 패널(검색 포함)은 영상 아래 왼쪽 칸(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);
}

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