.vw{position:fixed;inset:0;z-index:130;display:grid;grid-template-rows:auto minmax(0,1fr);background:#0B0F15;color:#fff;animation:sgIn .2s ease}
.vw-h{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:#0E131B}
.vw-x{width:36px;height:36px;border-radius:10px;border:0;background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center}.vw-x:hover{background:rgba(255,255,255,.12)}
.vw-t{display:grid;gap:1px;min-width:0}.vw-t span{font-size:11px;color:#7A8BA3}.vw-t b{font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36vw}
.vw-sel{width:260px;height:34px;background-color:#1A212C!important;border-color:rgba(255,255,255,.12)!important;color:#fff!important;font-size:13px}
.vw-body{display:grid;grid-template-columns:152px minmax(0,1fr) 320px;min-height:0}
.vw-rail{overflow-y:auto;padding:14px 12px;display:grid;gap:10px;align-content:start;border-right:1px solid rgba(255,255,255,.06)}
.vw-rail button{position:relative;padding:0;border:2px solid transparent;border-radius:8px;background:none;overflow:hidden;opacity:.75;width:127px;height:73px;transition:opacity .15s,border-color .15s}.vw-rail button:hover{opacity:1}.vw-rail button.on{border-color:#2FB4F5;opacity:1;box-shadow:0 0 0 3px rgba(47,180,245,.25)}
.vw-rail em{position:absolute;left:5px;top:4px;z-index:2;font-style:normal;font-size:11px;font-weight:700;background:rgba(0,0,0,.55);padding:1px 6px;border-radius:4px}
.vw-stage{position:relative;display:grid;place-items:center;min-height:0;padding:20px 24px 44px;background:radial-gradient(900px 500px at 50% 40%,#16202E,#0B0F15)}
.vw-slide{border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);animation:vwS .25s cubic-bezier(.2,.8,.2,1)}@keyframes vwS{from{opacity:.4;transform:scale(.99)}}
.vw-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border-radius:12px;border:0;background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .2s,background .15s}.vw-stage:hover .vw-nav{opacity:1}.vw-nav:hover{background:rgba(255,255,255,.14)}.vw-nav:disabled{opacity:0!important}.vw-nav.l{left:10px}.vw-nav.r{right:10px}
.vw-count{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;color:#9AA5B5;font-variant-numeric:tabular-nums;background:rgba(0,0,0,.35);padding:4px 12px;border-radius:999px}
.vw-side{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:14px;border-left:1px solid rgba(255,255,255,.06);background:#0E131B;min-height:0}
.vw-side .v-seg{background:#1A212C;box-shadow:none}.vw-side .v-seg button{color:#9AA5B5}.vw-side .v-seg button.on{background:#2A3442;color:#fff}
.vw-pane{overflow-y:auto;min-height:0;font-size:14px;line-height:1.75;color:#D5DCE6}
.vw-notes{white-space:pre-wrap;word-break:keep-all;text-wrap:pretty}.vw-empty{color:#6B7789;font-size:13px;padding:20px 4px}
.vw-so{display:grid;gap:18px}.vw-so section{display:grid;gap:8px}.vw-so b{font-size:13px;color:#9AD8F7}.vw-so p{margin:0;white-space:pre-line;font-size:13px}
.vw-q{display:grid;gap:2px;font-size:13px;padding:10px 12px;border-radius:10px;background:#151C26}.vw-q span{font-weight:600;color:#fff;margin-bottom:4px}.vw-q em{font-style:normal;color:#9AA5B5}.vw-q em.ok{color:#7CD8B0;font-weight:600}
.vw-g{display:grid;gap:2px;font-size:13px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06)}.vw-g span{font-weight:700;color:#fff}.vw-g small{font-weight:400;color:#7A8BA3;margin-left:6px}
.vw-info{display:grid;gap:10px;font-size:13px}.vw-info>div{display:flex;justify-content:space-between;gap:10px}.vw-info span{color:#7A8BA3}.vw-info b{text-align:right}.vw-info .v-tag{background:#1A212C}
.vw-info [style*="grid-template-columns"] span{color:#7A8BA3}
.vw.play{grid-template-rows:minmax(0,1fr)}.vw.play .vw-h{display:none}.vw.play .vw-body{grid-template-columns:minmax(0,1fr)}.vw.play .vw-rail,.vw.play .vw-side{display:none}.vw.play .vw-stage{background:#000;cursor:pointer;padding:0 0 36px}
@media (max-width:1199px){.vw-sel{width:180px}}
/* 미리보기 창은 화면 전체를 쓰므로 오른쪽 원고 칸은 900px 아래에서만 숨김 */
@media (max-width:900px){.vw-side{display:none}}
/* 900px 아래: 창 폭을 화면에 묶고(위쪽 버튼 줄이 창을 넓히지 않게), 버튼은 둘째 줄부터 줄바꿈, 썸네일은 아래 가로줄로 */
@media (max-width:900px){
  .vw{grid-template-columns:minmax(0,1fr)}
  .vw-h{flex-wrap:wrap;gap:8px;padding:10px 12px}.vw-sp{flex:0 0 100%!important;height:0}.vw-t{flex:1}.vw-t b{max-width:none}
  .vw-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .vw-rail{grid-row:2;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;overflow-y:hidden;padding:10px 12px;border-right:0;border-top:1px solid rgba(255,255,255,.06)}
  .vw-rail button{width:107px;height:62px}
  .vw-stage{padding:12px 12px 52px}
  .vw-nav{top:auto;bottom:8px;transform:none;width:44px;height:36px;opacity:1}.vw-nav.l{left:12px}.vw-nav.r{right:12px}
}
@media (max-width:640px){.vw-sel{flex:1 1 100%;width:auto}}
/* 터치 화면은 마우스를 올릴 수 없으니 이전·다음 버튼을 늘 보여 줌 */
@media (hover:none){.vw-nav{opacity:1}}
.v-week .vw-open{margin-top:10px;width:100%}
/* 기획서에서 교시 제목이 바뀐 교안 안내(점검 P3-6) — 머리줄 아래 한 줄 더, 발표 보기에서는 숨김 */
.vw:has(>.vw-chg){grid-template-rows:auto auto minmax(0,1fr)}.vw-chg{margin:8px 16px 0}.vw.play .vw-chg{display:none}.vw.play:has(>.vw-chg){grid-template-rows:minmax(0,1fr)}