/* 화면 배치 — 크기 계산은 js/layout/layout.js가 하고(CSS 변수, data-*), 여기서는 그 값으로 자리를 잡는다.
   data-layout: min(최소: 영상 고정, 자료만 스크롤) · max(최대: 영상과 자료가 함께 스크롤) · overlay(영상만 크게: 전체, 휴대폰 가로)
   data-device: desktop(목차가 왼쪽 칸) · compact(좁은 화면: 목차는 왼쪽 서랍, 페이지 전체가 스크롤) */

/* 넓은 화면: 목차 | 오른쪽 영역(제목줄, 영상, 컨트롤, 자료). 목차와 오른쪽 영역이 따로 스크롤된다. */
.app {
  display: grid;
  grid-template-columns: var(--side-w, 500px) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

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

.main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 40px;   /* 좌우 20px는 layout.js의 PAD와 같게 */
}

.fatal { margin: 12px 0; }

/* 목차 폭 조절 손잡이(목차 오른쪽 가장자리). 두 번 누르면 기본 폭 */
.side-resizer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(var(--side-w, 500px) - 4px);
  z-index: 30;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

.side-resizer:hover,
.side-resizer:focus-visible,
body.resizing .side-resizer:active {
  outline: none;
  background: linear-gradient(90deg, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px);
}

/* 제목줄은 늘 위에 붙는다. 최소에서는 영상과 컨트롤도 그 아래에 붙어 있고, 자료만 그 밑으로 지나간다. */
.now {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
}

.app[data-layout="min"] .stage {
  position: sticky;
  top: var(--now-h);
  z-index: 19;
  background: var(--bg);
}

/* 좁은 화면(휴대폰 등): 목차는 왼쪽 서랍, 페이지 전체가 스크롤된다 */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(0, 0, 0, 0.45);
}

.app[data-device="compact"] {
  display: block;
  height: auto;
}

.app[data-device="compact"] .side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  width: min(88vw, 380px);
  border-right: 0;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.28);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.app[data-device="compact"].drawer-open .side {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease;
}

.app[data-device="compact"] .side-resizer { display: none; }

.app[data-device="compact"] .main {
  overflow: visible;
  min-height: 100dvh;
  padding: 0 0 32px;
}

/* 영상만 크게(전체, 휴대폰 가로): 오른쪽 영역이 화면을 덮는다. 자료는 없다. */
.app[data-layout="overlay"] .main {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  padding: 0;
  background: #000;
}

.app[data-layout="overlay"] .side-resizer,
.app[data-layout="overlay"] .material { display: none; }

/* 영상만 크게일 때는 화면 가장자리도 검게(홈 화면 앱은 노치·홈 막대 옆 빈자리를 이 색으로 칠한다) */
html:has(.app[data-layout="overlay"]),
html:has(.app[data-layout="overlay"]) body { background: #000; }

/* 전체에서는 목차를 늘 숨긴다(넓은 화면의 영상만 크게도 같다). 휴대폰 가로는 서랍으로 쓸 수 있다. */
.app[data-full="true"] .side,
.app[data-layout="overlay"][data-device="desktop"] .side { display: none; }

/* 폭을 끄는 동안: 글자 고르기와 자료 칸(노션)의 마우스 가로채기를 막는다 */
body.resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.resizing iframe { pointer-events: none; }

/* 아직 영상을 열지 않았으면 영상 자리를 숨기고, 문서가 제목줄 아래 본문을 쓴다 */
.app[data-media="none"] .stage { display: none; }