/* M3-F11-T13 발표자 컨트롤 화면 레이아웃(100dvh 그리드, D.5.6). 클래스는 pres- 접두 / .pres-grid 아래에서만 적용.
   색·장식은 최소(디자인은 나중에 일괄). 이후 일감은 이 파일을 고치지 않고 진행.md 에 요청만 쓴다. */
html:has(.pres-grid),html:has(.pres-grid) body{height:100%;overflow:hidden}

.presroot.pres-grid{
  height:100vh;height:100dvh;
  display:grid;overflow:hidden;
  grid-template-rows:48px minmax(0,1fr) 56px;
  grid-template-columns:minmax(0,62fr) minmax(320px,38fr);
  grid-template-areas:"top top" "cur side" "bar bar";
}
.pres-grid>*{min-width:0;min-height:0}
.pres-grid>.preshead{grid-area:top;flex-wrap:nowrap;overflow:hidden;padding:0 12px;white-space:nowrap}
.pres-grid>.pres{display:contents}
.pres-grid .pleft{grid-area:cur;display:flex;flex-direction:column;gap:6px;padding:8px;overflow:hidden}
.pres-grid .pvbox{flex:1 1 0;min-height:0}
.pres-grid .pleft .throw{flex:none;max-height:84px}
.pres-grid .pright{grid-area:side;display:grid;gap:8px;padding:8px 8px 8px 0;
  grid-template-rows:minmax(120px,38fr) minmax(0,62fr) auto;
  grid-template-areas:"next" "notes" "q"}
.pres-grid .pright>.nextc{grid-area:next}
.pres-grid .pright>.pres-notes{grid-area:notes}
.pres-grid .pright>#qcard{grid-area:q;max-height:clamp(96px,16vh,160px)}
.pres-grid .pres-tabs{display:none}
.pres-grid>.pres-bar{grid-area:bar;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:0 12px;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.pres-grid>.pres-bar>*{flex:none}

/* 노트: 수동 글자 크기, 넘치면 영역 내부 스크롤 + "더 있음" 그라데이션 */
.pres-grid .pres-notes{position:relative;overflow:hidden}
.pres-grid #pnotes{min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden}
.pres-grid #pnotes .nb{overflow:auto;scrollbar-gutter:stable}
.pres-grid #pnotes .nb.ro{overflow:auto}
.pres-grid .pres-notes.pres-more::after{content:'↓ 더 있음';position:absolute;left:0;right:0;bottom:0;padding:22px 0 4px;text-align:center;font-size:12px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--panel) 70%)}

/* 폭 < 1100: side 를 아래로(현재 슬라이드 55% / 다음+노트 45% 가로 2분할) */
.pres-grid[data-pmode=stack]{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:48px minmax(0,55fr) minmax(0,45fr) 56px;
  grid-template-areas:"top" "cur" "side" "bar"}
.pres-grid[data-pmode=stack] .pright{padding:0 8px 8px;
  grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"next notes" "q q"}

/* 폭 < 700: 현재 슬라이드 + 노트/다음/질문 큐를 탭으로 전환 */
.pres-grid[data-pmode=tabs]{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:48px minmax(0,45fr) minmax(0,55fr) 56px;
  grid-template-areas:"top" "cur" "side" "bar"}
.pres-grid[data-pmode=tabs] .pright{padding:0 8px 8px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"tabs" "body"}
.pres-grid[data-pmode=tabs] .pres-tabs{display:flex;gap:4px;grid-area:tabs}
.pres-grid[data-pmode=tabs] .pright>.card{display:none;grid-area:body;max-height:none}
.pres-grid[data-pmode=tabs][data-ptab=notes] .pright>.pres-notes,
.pres-grid[data-pmode=tabs][data-ptab=next] .pright>.nextc,
.pres-grid[data-pmode=tabs][data-ptab=q] .pright>#qcard{display:flex;flex-direction:column}
