/**
 * @copyright Copyright (c) 2026 WBPC-GLOBAL. All Rights Reserved. Proprietary.
 * 교육 표면 — 풀블리드 체험 (inset theater / 카드 본체 금지)
 * SSOT: config/wbpc-experiential-structure.yaml
 */

body.wbpc-experiential {
  min-height: 100vh;
  overflow-x: hidden;
}

#edu-experience-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #030712;
  pointer-events: none;
}

#edu-experience-scene {
  position: absolute;
  inset: 0;
}

#edu-experience-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  z-index: 1;
}

#edu-experience-video.edu-video-suppressed {
  display: none !important;
  opacity: 0 !important;
}

.edu-experience-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(3, 7, 18, 0.45) 0%,
    transparent 28%,
    transparent 58%,
    rgba(3, 7, 18, 0.72) 100%
  );
}

.edu-activity-layer {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  padding: 28px 16px 48px;
}

body.wbpc-experiential .edu-lobby {
  max-width: 980px;
  margin: 0 auto;
}

body.wbpc-experiential .topbar {
  position: relative;
  z-index: 4;
}

/* 대기·휴게 = 배경 위 홀로그램 활동 패널 (카드 대시보드 본체 아님) */
body.wbpc-experiential .edu-worker-waiting-room,
body.wbpc-experiential .edu-worker-rest-lounge,
body.wbpc-experiential .edu-dashboard,
body.wbpc-experiential .edu-ask-panel {
  background: rgba(8, 14, 28, 0.55);
  border: 1px solid rgba(212, 175, 55, 0.28);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(125, 211, 252, 0.08);
}

body.wbpc-experiential .edu-worker-waiting-room,
body.wbpc-experiential .edu-worker-rest-lounge {
  padding: 20px 18px;
  margin-bottom: 18px;
}

.edu-activity-hidden {
  display: none !important;
}

/* 교육장 — inset 카드 제거 · 풀블리드 */
.edu-hall-theater.edu-hall-fullbleed,
.edu-hall-theater.edu-hall-fullbleed.active {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 5;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.edu-hall-theater.edu-hall-fullbleed .edu-scene-root {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.edu-hall-theater.edu-hall-fullbleed .edu-hall-video {
  opacity: 0.32;
}

.edu-hall-theater.edu-hall-fullbleed .edu-hall-overlay {
  z-index: 6;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(3, 7, 18, 0.82));
  align-content: end;
}

.edu-hall-theater.edu-hall-fullbleed .edu-hall-slide {
  background: rgba(248, 250, 252, 0.92);
  max-height: 42vh;
}

.edu-hall-theater.edu-hall-fullbleed .edu-instructor-wrap {
  background: rgba(6, 18, 40, 0.78);
}

body.wbpc-experiential .edu-hall-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: none;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(3, 7, 18, 0.95));
}

body.wbpc-experiential[data-edu-mode="hall"] .edu-hall-controls {
  display: flex;
}

body.wbpc-experiential[data-edu-mode="hall"] .edu-ask-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 72px;
  z-index: 7;
  max-width: 720px;
  margin: 0 auto;
}

/* 휴게 채널 — TV 박스 UI를 홀로그램 활동으로 */
body.wbpc-experiential .edu-rest-lounge-box {
  background: rgba(10, 18, 40, 0.65);
  border: 1px solid rgba(125, 211, 252, 0.22);
}
body.wbpc-experiential .edu-rest-lounge-box.is-selected {
  border-color: rgba(212, 175, 55, 0.65);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
}