/* =================================================== */
/* PC/모바일 통합 - 모던 플레이어 (6페이지)             */
/* 플렉스 레이아웃: 배경 이미지 의존 없음, 정렬 안 깨짐  */
/* =================================================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0; padding: 0; width: 100%; height: 100vh;
    background: #000;
    overflow: hidden;
    font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;
}

/* 고정 해상도 1200x745. JS(stabilizeLayout)가 화면 중앙에 스케일링 */
#_viewPort {
    position: fixed;
    width: 1200px;
    height: 745px;
    background: #000;
    transform-origin: 0 0;
    left: 0;
    top: 0;
}

/* ---------------- 비디오 영역 ---------------- */
#videoArea { position: relative; width: 1200px; height: 675px; background: #000; }
#videoArea video { width: 100%; height: 100%; object-fit: contain; }

/* 퀴즈 레이어 */
#quizLayer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 9999; display: none;
    flex-direction: column; justify-content: center; align-items: center; color: #fff;
}

/* 스킵 버튼 (텍스트형 - 이미지 불필요) */
#_skipBtn {
    position: absolute; right: 20px; bottom: 15px;
    padding: 12px 28px;
    background: rgba(255,255,255,0.92);
    color: #1a73e8; font-size: 20px; font-weight: 800;
    border-radius: 30px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
    cursor: pointer; z-index: 10001;
    display: none;
    transition: transform 0.15s;
    user-select: none;
}
#_skipBtn:hover { transform: scale(1.06); background: #fff; }
#_skipBtn .skip-arrow { font-size: 22px; }

/* ---------------- 모던 플레이어 바 ---------------- */
.player-bar {
    position: absolute; left: 0; bottom: 0;
    width: 1200px; height: 70px;
    background: linear-gradient(180deg, #3a3f5c 0%, #2e3350 100%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    z-index: 99999;
}

/* 공통 버튼 */
.pbtn {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
    padding: 0;
}
.pbtn:hover { background: rgba(255,255,255,0.22); }
.pbtn svg { width: 24px; height: 24px; fill: #fff; }

/* 시간 */
.ptime {
    flex: 0 0 auto;
    color: #fff; font-size: 14px;
    min-width: 46px; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 시크바 */
.seek-wrap { flex: 1 1 auto; display: flex; align-items: center; padding: 0 4px; }
#seekRange {
    width: 100%; height: 26px;
    -webkit-appearance: none; appearance: none;
    background: transparent; cursor: pointer; margin: 0;
}
#seekRange::-webkit-slider-runnable-track {
    height: 8px; border-radius: 4px;
    background: linear-gradient(to right, #ff5a5f var(--seek, 0%), rgba(255,255,255,0.25) var(--seek, 0%));
}
#seekRange::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; margin-top: -5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
#seekRange::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.25); }
#seekRange::-moz-range-progress { height: 8px; border-radius: 4px; background: #ff5a5f; }
#seekRange::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: #fff; }

/* 페이지 번호 */
.ppage {
    flex: 0 0 auto;
    color: #fff; font-size: 19px; line-height: 1;
    display: flex; align-items: center; gap: 7px;
    min-width: 64px; justify-content: center;
}
.ppage b { font-size: 19px; font-weight: 800; line-height: 1; }
.ppage i { font-style: normal; opacity: 0.45; font-size: 17px; line-height: 1; }
.ppage span { opacity: 0.85; font-size: 19px; line-height: 1; }

/* 음량 */
.vol-wrap { position: relative; flex: 0 0 auto; }
.vol-pop {
    position: absolute; bottom: 58px; left: 50%;
    transform: translateX(-50%);
    background: #2e3350;
    border-radius: 10px;
    padding: 14px 10px;
    display: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
#volRange {
    -webkit-appearance: none; appearance: none;
    width: 110px; height: 8px;
    transform: rotate(-90deg);
    margin: 50px -42px;
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
    cursor: pointer;
}
#volRange::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%; background: #ff5a5f;
}
#volRange::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: #ff5a5f; }

/* ---------------- 팝업들 ---------------- */
._helpPup {
    position: absolute;
    width: 1200px; height: 745px;
    top: 0; left: 0;
    background: rgba(0,0,0,0.72);
    display: none;
    z-index: 100000;
    cursor: pointer;
}
.help-center {
    position: absolute; top: 44%; left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.85);
    font-size: 22px; font-weight: 600;
}
/* 각 버튼 위 라벨: 흰 글씨 + 아래쪽 화살표 (2단 지그재그) */
.help-label {
    position: absolute;
    transform: translateX(-50%);
    color: #fff; font-size: 17px; font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.help-label::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: #ffd24d;
}
.help-label::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 9px solid transparent;
    border-top-color: #ffd24d;
    border-bottom: none;
}
/* 아랫줄 라벨 (짧은 화살표) */
.hl-low { bottom: 106px; }
.hl-low::before { bottom: -20px; height: 18px; }
.hl-low::after  { bottom: -28px; }
/* 윗줄 라벨 (긴 화살표) */
.hl-high { bottom: 148px; }
.hl-high::before { bottom: -62px; height: 60px; }
.hl-high::after  { bottom: -70px; }

._menuBarPup {
    position: absolute;
    width: 400px; height: 745px;
    top: 0; left: 800px;
    background: rgba(30, 34, 56, 0.96);
    color: #fff;
    display: none;
    z-index: 100000;
    box-shadow: -6px 0 18px rgba(0,0,0,0.4);
}
._menuBarPup .title_area { line-height: 180%; padding-top: 30px; }
._menuBarPup .title_area .line { width: 20%; height: 2px; background-color: #fff; display: block; margin: 8px auto; }
._menuBarPup ul { list-style: none; padding: 0; margin: 6px 0 18px 0; }
._menuBarPup ul li {
    line-height: 200%; margin-left: 52px; cursor: pointer;
    font-size: 17px; opacity: 0.9;
}
._menuBarPup ul li:hover { opacity: 1; text-decoration: underline; }
._menuBarPup .grp-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 19px; font-weight: 700; margin: 14px 0 4px 36px;
}
._menuBarPup .grp-title svg { width: 26px; height: 26px; fill: #fff; opacity: 0.9; }

/* 메뉴 팝업 닫기 버튼 */
._menuBarPup .menu-close {
    position: absolute; top: 10px; right: 16px;
    font-size: 32px; line-height: 1;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    z-index: 1;
}
._menuBarPup .menu-close:hover { color: #fff; }

/* 퀴즈 선택 영역: 파란 테두리 깜박임으로 클릭 유도 */
.quiz-area {
    position: absolute;
    cursor: pointer;
    border-radius: 14px;
    animation: quiz-blink 1.2s ease-in-out infinite;
}
@keyframes quiz-blink {
    0%, 100% { box-shadow: inset 0 0 0 4px rgba(26,115,232,0.95); }
    50%      { box-shadow: inset 0 0 0 4px rgba(26,115,232,0.15); }
}
.quiz-area:hover {
    animation: none;
    box-shadow: inset 0 0 0 5px #1a73e8;
    background: rgba(26,115,232,0.10);
}