/* web.pt 사용자 영역 + 발표 모드 */

.deck-card .card-title {
    word-break: break-word;
}

.deck-card:hover {
    box-shadow: var(--wpt-shadow-md);
    transition: box-shadow 0.2s ease;
}

/* 발표 모드 */
html.present-mode-root,
body.present-mode {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--wpt-navy);
}

body.present-mode > .wpt-present-wrap {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

body.present-mode .wpt-site-footer {
    display: none !important;
}

body.present-mode .present-root {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem 0 0.5rem;
    box-sizing: border-box;
    overflow: hidden;
    outline: none;
}

body.present-mode .present-toolbar {
    width: 100%;
    max-width: 100vw;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(13, 27, 42, 0.85);
    border-radius: var(--wpt-radius);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

body.present-mode .present-toolbar .btn-outline-secondary {
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.35);
}

body.present-mode .present-toolbar .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.present-mode .present-toolbar .btn-primary {
    background: var(--wpt-teal);
    border-color: var(--wpt-teal);
}

body.present-mode .present-toolbar .btn-primary:hover {
    background: var(--wpt-teal-hover);
    border-color: var(--wpt-teal-hover);
}

body.present-mode .present-toolbar .text-muted {
    color: rgba(249, 250, 251, 0.65) !important;
}

body.present-mode .present-toolbar.present-toolbar--hidden {
    display: none !important;
}

body.present-mode .present-stage-wrap {
    width: min(100vw, 100dvh * 16 / 9);
    max-width: 100%;
    flex-shrink: 0;
}

body.present-mode .present-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--wpt-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* 배경음악 소리 버튼 — 슬라이드에 BGM이 있을 때만 script.js가 d-none을 푼다 */
.present-bgm-btn {
    white-space: nowrap;
}

/* 자동재생이 막힌 상태: 클릭을 유도하도록 강조 */
.present-bgm-btn--blocked {
    background: var(--bs-warning, #ffc107);
    border-color: var(--bs-warning, #ffc107);
    color: #212529;
}

/* 청중 창은 툴바가 없어 무대 우하단에 띄운다 */
.present-bgm-btn--floating {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 5;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.present-bgm-btn--floating:hover,
.present-bgm-btn--floating:focus-visible,
.present-bgm-btn--floating.present-bgm-btn--blocked {
    opacity: 1;
}

/* launcher 첫 화면(툴바 아래): 가용 세로에 16:9 맞춤 — 전체화면·듀얼·청중/발표자는 기존 규칙 유지 */
body.present-role-launcher.present-mode #presentRoot:not(:fullscreen):not(:-webkit-full-screen) .present-dual-hint {
    flex-shrink: 0;
    width: 100%;
    max-width: 100vw;
}

body.present-role-launcher.present-mode #presentRoot:not(:fullscreen):not(:-webkit-full-screen) .present-stage-wrap {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type: size;
}

body.present-role-launcher.present-mode #presentRoot:not(:fullscreen):not(:-webkit-full-screen) .present-stage {
    width: min(100cqw, 100cqh * 16 / 9);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
}

body.present-mode .present-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}

/* 우하단: 페이지 pill + 다음 제목(무배경) */
body.present-mode .present-counter {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    max-width: min(40vw, 14rem);
    padding: 0;
    background: none;
    box-sizing: border-box;
    pointer-events: none;
}

body.present-mode .present-counter__page {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    border-radius: 2rem;
    background: rgba(20, 184, 166, 0.9);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

body.present-mode .present-counter__page:hover,
body.present-mode .present-counter__page:focus {
    background: rgba(20, 184, 166, 1);
    outline: none;
    transform: translateY(-1px);
}

body.present-mode .present-toolbar__page[role="button"] {
    cursor: pointer;
    user-select: none;
}

body.present-mode .present-toolbar__page[role="button"]:focus {
    outline: 2px solid rgba(20, 184, 166, 0.7);
    outline-offset: 2px;
}

body.present-mode .present-counter__next {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25;
    color: rgba(229, 231, 235, 0.72);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    padding: 0 0.15rem;
    pointer-events: auto;
}

body.present-mode .present-counter__next[hidden] {
    display: none;
}

/* 발표 화면: 이어 하기 안내 — 우하단 카운터 위, 조용한 소형 오버레이 (전체화면 생존: #presentRoot 내부) */
body.present-mode .present-chain-prompt {
    position: fixed;
    right: 1rem;
    bottom: 4.75rem;
    z-index: 1050;
    max-width: min(60vw, 20rem);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(17, 24, 39, 0.85);
    color: rgba(229, 231, 235, 0.92);
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: right;
    pointer-events: none; /* 클릭 방해 금지 — 키 전용 */
}

body.present-mode .present-chain-prompt[hidden] {
    display: none;
}

body.present-mode .present-chain-prompt__keys {
    display: block;
    font-size: 0.7rem;
    color: rgba(229, 231, 235, 0.6);
}

/* 발표 화면: 슬라이드 번호/제목 점프 목록 */
body.present-mode .present-slide-jump {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(60vh, 28rem);
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.75rem;
    background: rgba(13, 27, 42, 0.94);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}

body.present-mode .present-slide-jump[hidden] {
    display: none;
}

body.present-mode .present-slide-jump__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0.5rem;
    padding: 0.48rem 0.55rem;
    background: transparent;
    color: rgba(249, 250, 251, 0.86);
    text-align: left;
    cursor: pointer;
}

body.present-mode .present-slide-jump__item:hover,
body.present-mode .present-slide-jump__item:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    outline: none;
}

body.present-mode .present-slide-jump__item.active {
    background: rgba(20, 184, 166, 0.22);
    color: #fff;
}

body.present-mode .present-slide-jump__no {
    flex: 0 0 2.25rem;
    color: rgba(20, 184, 166, 0.95);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: right;
}

body.present-mode .present-slide-jump__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
}

body.present-mode .present-slide-jump--presenter {
    position: fixed;
    top: 3.5rem;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    z-index: 1100;
}

/* 모바일 전용 슬라이드 이동 (툴바와 분리 — 전체화면에서도 유지) */
.present-mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    background: rgba(13, 27, 42, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

.present-mobile-nav .btn {
    flex: 1 1 0;
    max-width: 11rem;
    min-height: 44px;
    font-weight: 600;
}

.present-mobile-nav .btn:disabled {
    opacity: 0.45;
}

@media (max-width: 767.98px) {
    body.present-mode .present-root {
        padding-bottom: 5rem;
    }

    body.present-mode .present-counter {
        bottom: 5rem;
    }
}

body.present-mode .present-stage > .present-iframe {
    position: relative;
}

body.present-mode.present-fs-active .present-dual-hint,
body.present-mode.present-fs-active #dualPresentHint {
    display: none !important;
}

/* launcher 전체화면: 좌·우 스와이프 시 브라우저 기본 제스처 간섭 완화 */
body.present-role-launcher.present-mode.present-fs-active .present-stage {
    touch-action: none;
}

body.present-mode.present-fs-active .present-root {
    padding: 0;
}

/* #presentRoot 전체화면 (푸터·문서 스크롤 제외) */
#presentRoot:fullscreen,
#presentRoot:-webkit-full-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: var(--wpt-navy);
    box-sizing: border-box;
}

#presentRoot:fullscreen .present-stage-wrap,
#presentRoot:-webkit-full-screen .present-stage-wrap {
    width: min(100vw, 100dvh * 16 / 9);
    max-width: 100%;
    flex-shrink: 0;
}

#presentRoot:fullscreen .present-stage-wrap--audience,
#presentRoot:-webkit-full-screen .present-stage-wrap--audience {
    width: min(100vw, 100dvh * 16 / 9);
}

#presentRoot:fullscreen .present-stage,
#presentRoot:-webkit-full-screen .present-stage {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

/* 청중 화면 (듀얼 모니터) — 빔/전체화면에서 슬라이드 세로 중앙 */
body.present-role-audience.present-mode .present-root {
    padding: 0;
    justify-content: center;
}

body.present-role-audience #presentRoot:fullscreen,
body.present-role-audience #presentRoot:-webkit-full-screen {
    justify-content: center;
}

body.present-role-audience .present-stage-wrap--audience {
    width: min(100vw, 100dvh * 16 / 9);
    max-width: 100%;
}

/* 발표자 화면 (듀얼 모니터) */
body.present-role-presenter {
    background: var(--wpt-surface);
}

body.present-role-presenter .present-root {
    align-items: stretch;
    justify-content: flex-start;
    max-width: none;
    width: 100%;
    padding: 0.5rem 1rem 1rem;
    min-height: 0;
    flex: 1;
    box-sizing: border-box;
    overflow: auto;
}

body.present-role-presenter .present-toolbar--presenter {
    width: 100%;
    max-width: none;
    background: var(--wpt-card);
    border: 1px solid var(--wpt-border);
    color: var(--wpt-text);
}

body.present-role-presenter .present-toolbar--presenter .btn-outline-secondary {
    color: var(--wpt-text);
    border-color: var(--wpt-border);
}

/*
 * 발표자 툴바만 배경이 밝다(--wpt-card = #fff). 위쪽 런처용 호버 규칙
 * (body.present-mode .present-toolbar .btn-outline-secondary:hover — color: #fff)이
 * 그대로 걸리면 흰 바탕에 흰 글자가 되어 버튼이 사라진다.
 * 슬라이드 번호 배지(.present-toolbar__page)·'다음' 버튼과 같은 teal 로 채운다.
 *
 * ⚠ 런처 규칙과 명시도가 (0,4,1)로 '같다' — 순서로만 이긴다.
 *   이 규칙을 런처 블록보다 위로 옮기면 조용히 되돌아간다.
 *   (doc/dev-present-bgm-test.html 의 규칙 순서 검사가 이를 지킨다)
 */
body.present-role-presenter .present-toolbar--presenter .btn-outline-secondary:hover,
body.present-role-presenter .present-toolbar--presenter .btn-outline-secondary:focus-visible {
    background: var(--wpt-teal);
    border-color: var(--wpt-teal);
    color: #fff;
}

body.present-role-presenter .present-toolbar--presenter .text-muted,
body.present-role-presenter .present-toolbar__hint {
    color: var(--wpt-text-muted) !important;
}

body.present-role-presenter .present-toolbar__deck-title {
    font-weight: 600;
    max-width: min(40vw, 16rem);
}

body.present-role-presenter .present-toolbar__page {
    background: var(--wpt-teal);
    color: #fff;
    font-weight: 600;
}

.presenter-split {
    --wpt-presenter-split-left: 60%;
    display: grid;
    grid-template-columns:
        minmax(25%, min(75%, var(--wpt-presenter-split-left, 60%)))
        10px
        minmax(0, 1fr);
    grid-template-rows: minmax(0, auto);
    grid-template-areas: 'current split next';
    gap: 0;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
}

.presenter-pane--current {
    grid-area: current;
    min-width: 0;
}

.presenter-split__resizer {
    grid-area: split;
    position: relative;
    justify-self: center;
    align-self: stretch;
    width: 4px;
    min-width: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--wpt-border);
    box-shadow: 0 0 0 1px rgba(13, 27, 42, 0.06);
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    z-index: 1;
}

.presenter-split__resizer:hover,
.presenter-split__resizer:focus {
    background: var(--wpt-teal);
    outline: none;
}

.presenter-split__resizer:focus-visible {
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.45);
}

/* 드래그 히트 영역 확대(시각적 막대는 4px) */
.presenter-split__resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    right: -5px;
}

body.present-role-presenter.is-presenter-split-dragging {
    cursor: col-resize !important;
    user-select: none !important;
}

body.present-role-presenter.is-presenter-split-dragging * {
    cursor: col-resize !important;
}

.presenter-pane {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.presenter-pane__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.35;
}

.presenter-pane__label {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 0.28rem 0.6rem;
    border-radius: var(--wpt-radius);
    border: 1px solid transparent;
    box-shadow: var(--wpt-shadow);
}

.presenter-pane--current .presenter-pane__label {
    background: var(--wpt-teal);
    border-color: var(--wpt-teal);
    color: #fff;
}

.presenter-pane--next .presenter-pane__label {
    background: var(--wpt-card);
    border-color: var(--wpt-border);
    color: var(--wpt-text);
}

.presenter-pane__title {
    font-weight: 400;
    line-height: 1.35;
    word-break: keep-all;
}

.presenter-pane__stage {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--wpt-radius);
    overflow: hidden;
    box-shadow: var(--wpt-shadow-md);
}

.presenter-note {
    margin-top: 0.25rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--wpt-border);
    border-radius: var(--wpt-radius);
    background: #fff;
    box-shadow: var(--wpt-shadow);
    min-height: 5rem;
}

.presenter-note__label {
    margin: 0 0 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wpt-text-muted);
}

.presenter-note__body {
    max-height: 10rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: keep-all;
    line-height: 1.55;
    font-size: 0.95rem;
    color: var(--wpt-text);
}

.presenter-note__body--empty {
    color: var(--wpt-text-muted);
    font-style: italic;
}

.presenter-pane--next {
    grid-area: next;
    min-height: 0;
    min-width: 0;
}

.presenter-pane__clock {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0;
    user-select: none;
}

/* 발표자 시계 패널 — 콘텐츠 높이만큼만 (세로 늘림 없음) */
.presenter-clock {
    flex: 1 1 14rem;
    max-width: 18rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem;
    border-radius: var(--wpt-radius-lg);
    border: 1px solid var(--wpt-border);
    background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
    box-shadow:
        var(--wpt-shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    position: relative;
    overflow: hidden;
}

.presenter-clock::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wpt-teal) 0%, var(--wpt-blue) 100%);
}

.presenter-clock__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding-top: 0.15rem;
}

.presenter-clock__icon {
    font-size: 0.9rem;
    color: var(--wpt-teal);
    line-height: 1;
}

.presenter-clock__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wpt-text-muted);
}

.presenter-clock__face {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 시계(최대 3.35rem 폰트)의 자연 높이를 기준으로 삼아 타이머(더 작은 폰트)도 같은 높이를 채우도록 함 —
       .presenter-pane__clock의 align-items:stretch는 카드 전체 높이만 맞추고 내부 얼굴 박스까지는 늘리지 않으므로
       min-height 자체를 두 얼굴의 공통 바닥값으로 명시해야 한다 */
    min-height: 4.8rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--wpt-radius);
    background: linear-gradient(165deg, #081220 0%, var(--wpt-navy) 42%, #152d4a 100%);
    border: 1px solid rgba(20, 184, 166, 0.28);
    box-shadow:
        inset 0 2px 10px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.07);
    position: relative;
}

/* 디지털 시계 디스플레이 질감 */
.presenter-clock__face::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.04) 2px,
        rgba(0, 0, 0, 0.04) 4px
    );
    pointer-events: none;
}

.presenter-clock__time {
    position: relative;
    z-index: 1;
    font-size: clamp(2rem, 4.8vw, 3.35rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.08em;
    color: #ecfdf9;
    text-shadow:
        0 0 28px rgba(20, 184, 166, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.45);
}

/*
 * 타이머 카드 — 시계와 동일 구조, 클릭해서 종료 시간 설정 (base 규칙 이후 배치 — ::before 등가 명시도 순서 승리)
 * 색상은 붉은 계열로 통일해 시계(네이비/틸)와 한눈에 구분되도록 한다.
 * 기본(카운트다운 중)은 짙은 레드, 종료 시간 초과(.is-over)는 더 채도 높은 레드로 격상 — 두 상태를 계속 구분할 수 있게.
 */
.presenter-clock--timer {
    cursor: pointer;
}

.presenter-clock--timer:hover,
.presenter-clock--timer:focus-visible {
    border-color: rgba(248, 113, 113, 0.45);
    outline: none;
}

.presenter-clock--timer .presenter-clock__icon {
    color: #f87171;
}

.presenter-clock--timer::before {
    background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.presenter-clock--timer .presenter-clock__face {
    background: linear-gradient(165deg, #2a0808 0%, #6b1414 42%, #3a0a0a 100%);
    border-color: rgba(248, 113, 113, 0.32);
}

.presenter-clock--timer .presenter-clock__time {
    /* 시계보다 문자 수가 길다("H:MM:SS"/"-H:MM:SS") — 전용 크기로 카드 폭 안에 들어오게 함 */
    font-size: clamp(1.4rem, 3.4vw, 2.5rem);
    letter-spacing: 0.05em;
    color: #fecaca;
    text-shadow:
        0 0 28px rgba(248, 113, 113, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.45);
}

/* 초(seconds) — 발표 중 초 단위는 의미가 크지 않아 절반 크기로 축소. em 단위라 반응형 크기에 항상 비례 */
.presenter-clock--timer .presenter-clock__time-sec {
    font-size: 0.5em;
    opacity: 0.85;
}

/* 종료 시간 초과 — 같은 레드 계열에서 더 진하고 채도 높은 톤으로 전환 */
.presenter-clock--timer.is-over::before {
    background: linear-gradient(90deg, #b91c1c 0%, #ef4444 100%);
}

.presenter-clock--timer.is-over .presenter-clock__icon {
    color: #ef4444;
}

.presenter-clock--timer.is-over .presenter-clock__face {
    background: linear-gradient(165deg, #3a0808 0%, #7f1616 42%, #450a0a 100%);
    border-color: rgba(239, 68, 68, 0.5);
}

.presenter-clock--timer.is-over .presenter-clock__time {
    color: #fee2e2;
    text-shadow:
        0 0 34px rgba(239, 68, 68, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.45);
}

.presenter-clock__time-input {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 12rem;
    /* 네이티브 폼 컨트롤의 내재적 높이는 브라우저마다 달라 시계의 디지털 표시보다 낮아 보일 수 있음 —
       명시적 높이로 얼굴(.presenter-clock__face) 안에서 항상 같은 세로 공간을 차지하도록 고정 */
    height: 2.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    color: #0f172a;
    background: #fff;
    border: none;
    border-radius: var(--wpt-radius);
    padding: 0.35rem 0.6rem;
    box-sizing: border-box;
}

/* 듀얼 모니터 안내 — 발표 화면(어두운 배경)에서 text-muted 대비 보정 */
body.present-mode .present-dual-hint {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    color: #f3f4f6 !important;
    background: rgba(13, 27, 42, 0.92);
    border: 1px solid rgba(20, 184, 166, 0.45);
    border-radius: var(--wpt-radius);
    padding: 0.55rem 0.85rem !important;
    line-height: 1.55;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.present-mode .present-dual-hint strong {
    color: #fff;
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .presenter-split {
        grid-template-columns: 1fr;
        grid-template-areas:
            'current'
            'next';
    }

    .presenter-split__resizer {
        display: none;
    }

    body.present-role-presenter .present-toolbar__deck-title {
        max-width: 100%;
    }
}

/* 발표자 노트 마크다운 렌더링 (**강조**, ==형광==) */
.presenter-note__body strong {
    font-weight: 700;
    color: var(--wpt-blue, #2563eb);
}

.presenter-note__body mark {
    background: #FFE94D;
    color: #111;
    padding: 0 0.15em;
    border-radius: 2px;
}

/* ── web.pt 라이브 연동 (assets/wpt-live.js) ── */
/* 발표자 창: 툴바 아래를 덮는 진행 화면 */
.wpt-live-overlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0; /* JS가 툴바 아래로 맞춘다 */
    z-index: 1050;
    display: flex;
    flex-direction: column;
    background: #f4f6fa;
    border-top: 1px solid #e2e8f0;
}
.wpt-live-overlay[hidden] {
    display: none;
}
.wpt-live-overlay__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.4rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.wpt-live-overlay__title {
    font-weight: 700;
    color: #0f172a;
}
.wpt-live-overlay__title .bi {
    color: #2563eb;
}
.wpt-live-overlay__status {
    font-size: 0.85rem;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
}
.wpt-live-overlay__status.is-live {
    color: #fff;
    background: #dc2626;
}
.wpt-live-overlay__body {
    position: relative;
    flex: 1;
    min-height: 0;
}
.wpt-live-overlay__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #f4f6fa;
}
.wpt-live-overlay__msg {
    padding: 2rem;
    color: #64748b;
}

/* 청중 창: 슬라이드 위를 덮는 라이브 스크린 (#presentRoot 안 — 전체 화면이면 같이 전체 화면) */
.present-live-layer {
    position: absolute;
    inset: 0;
    z-index: 1200;
    background: #0b1220;
}
.present-live-layer iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
body.present-role-audience #presentRoot {
    position: relative; /* .present-live-layer 기준 */
}

/* ── 발표 중 웹페이지 띄우기 (assets/wpt-weblink.js) ── */
/* 발표자 창: [웹페이지] 아래 목록 패널 */
.wpt-web-panel {
    position: fixed;
    top: 0;   /* JS가 버튼 아래로 맞춘다 */
    right: 8px;
    z-index: 1060; /* 라이브 진행 화면(1050) 위 */
    width: min(380px, calc(100vw - 16px));
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.wpt-web-panel[hidden] {
    display: none;
}
.wpt-web-panel__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #e2e8f0;
}
.wpt-web-panel__status {
    font-size: 0.8rem;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.wpt-web-panel__status.is-live {
    color: #fff;
    background: #dc2626;
}
.wpt-web-panel__list {
    overflow-y: auto;
    padding: 0.35rem;
}
.wpt-web-panel__item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name kind" "host kind";
    align-items: center;
    gap: 0 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
}
.wpt-web-panel__item:hover,
.wpt-web-panel__item:focus-visible {
    background: #f1f5f9;
    outline: none;
}
.wpt-web-panel__item.is-current {
    border-color: #dc2626;
    background: #fef2f2;
}
.wpt-web-panel__name {
    grid-area: name;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wpt-web-panel__host {
    grid-area: host;
    font-size: 0.75rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wpt-web-panel__kind {
    grid-area: kind;
    font-size: 0.72rem;
    color: #2563eb;
    white-space: nowrap;
}
.wpt-web-panel__kind.is-window {
    color: #b45309;
}

/* 청중 창: 슬라이드(그리고 라이브 층) 위를 덮는 웹페이지 (#presentRoot 안 — 전체 화면이면 같이 전체 화면) */
.present-web-layer {
    position: absolute;
    inset: 0;
    z-index: 1250;
    background: #fff;
}
.present-web-layer iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* 덱 편집: 발표 중 띄울 웹페이지 행 */
.wpt-weblinks-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.wpt-weblinks-row__label {
    flex: 0 1 11rem;
    min-width: 7rem;
}
.wpt-weblinks-row__url {
    flex: 1 1 16rem;
    min-width: 10rem;
}
.wpt-weblinks-row__tools {
    display: inline-flex;
    gap: 0.25rem;
}
.wpt-weblinks-badge {
    font-size: 0.72rem;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}
.wpt-weblinks-badge.is-ok {
    color: #166534;
    background: #dcfce7;
}
.wpt-weblinks-badge.is-blocked {
    color: #92400e;
    background: #fef3c7;
}
.wpt-weblinks-badge.is-unknown {
    color: #475569;
    background: #f1f5f9;
}

/* ── 청중 화면 타이머 (assets/wpt-audience-timer.js) ── */
/* 발표자 창: 실행 중 [타이머 닫기 4:32] 버튼 */
.atimer-btn.is-on {
    font-weight: 600;
}
.atimer-btn__time {
    display: inline-block;
    min-width: 3.4em;
    margin-left: 0.15rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.atimer-btn.is-done .atimer-btn__time {
    background: #dc2626;
    color: #fff;
}
.atimer-btn.is-on:hover .atimer-btn__time {
    background: #fff;
}

/* 발표자 창: 설정 패널 */
.wpt-atimer-panel {
    position: fixed;
    top: 0;   /* JS가 버튼 아래로 맞춘다 */
    right: 8px;
    z-index: 1060;
    width: min(320px, calc(100vw - 16px));
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.wpt-atimer-panel[hidden] {
    display: none;
}
.wpt-atimer-panel__head {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    color: #0f172a;
}
.wpt-atimer-panel__head .bi {
    color: #0d9488;
}
.wpt-atimer-panel__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem 0.85rem;
}
.wpt-atimer-panel__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin: 0.15rem 0 -0.15rem;
}
.wpt-atimer-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}
.wpt-atimer-chip {
    padding: 0.35rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.wpt-atimer-chip:hover {
    border-color: #94a3b8;
}
.wpt-atimer-chip.is-selected {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
.wpt-atimer-min {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.85rem;
    color: #475569;
}
.wpt-atimer-min input {
    width: 6rem;
}
.wpt-atimer-sound {
    margin: 0.1rem 0 0.15rem;
    font-size: 0.85rem;
}

/* 청중 창: 슬라이드(웹페이지·라이브 층 포함) 위를 덮는 전체 화면 타이머 */
.present-atimer-layer {
    --atimer-accent: #2dd4bf;
    --atimer-glow: rgba(45, 212, 191, 0.18);
    position: absolute;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(160deg, #0b1220 0%, #101b33 55%, #13203a 100%);
    color: #f8fafc;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif;
    user-select: none;
}
.present-atimer-layer[data-phase="warn"] {
    --atimer-accent: #fbbf24;
    --atimer-glow: rgba(251, 191, 36, 0.18);
}
.present-atimer-layer[data-phase="final"],
.present-atimer-layer[data-phase="done"] {
    --atimer-accent: #f87171;
    --atimer-glow: rgba(248, 113, 113, 0.24);
}
.present-atimer-layer[data-phase="pause"] {
    --atimer-accent: #94a3b8;
    --atimer-glow: rgba(148, 163, 184, 0.12);
}
.atimer-glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 50%, var(--atimer-glow) 0%, transparent 55%);
    transition: background 0.8s ease;
    pointer-events: none;
}
.atimer-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vmin;
    padding: 4vmin;
    max-width: 100%;
}
.atimer-title {
    margin: 0;
    max-width: 90vw;
    font-size: 5vmin;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: rgba(248, 250, 252, 0.86);
    text-align: center;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.atimer-title[hidden] {
    display: none;
}
.atimer-dial {
    position: relative;
    width: 62vmin;
    height: 62vmin;
}
.atimer-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.atimer-track {
    fill: none;
    stroke: rgba(148, 163, 184, 0.14);
    stroke-width: 9;
}
.atimer-ring {
    fill: none;
    stroke: var(--atimer-accent);
    stroke-width: 9;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px var(--atimer-glow));
    transition: stroke-dashoffset 0.12s linear, stroke 0.8s ease;
}
.atimer-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5vmin;
}
.atimer-digits {
    font-size: 17vmin;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    color: #f8fafc;
    transition: color 0.8s ease, opacity 0.3s ease;
}
.present-atimer-layer[data-phase="final"] .atimer-digits {
    color: #fecaca;
}
.atimer-paused {
    display: none;
    padding: 0.6vmin 2.4vmin;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    font-size: 2.8vmin;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.present-atimer-layer[data-phase="pause"] .atimer-paused {
    display: inline-block;
}
.present-atimer-layer[data-phase="pause"] .atimer-digits {
    opacity: 0.55;
}
.atimer-done {
    display: none;
    margin: 0;
    max-width: 92vw;
    font-size: 11vmin;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-align: center;
    word-break: keep-all;
    color: #fff;
    text-shadow: 0 0 4vmin rgba(248, 113, 113, 0.55);
}
/* 시간 종료: 링·숫자 대신 큰 메시지 + 은은한 맥박 */
.present-atimer-layer[data-phase="done"] .atimer-dial {
    display: none;
}
.present-atimer-layer[data-phase="done"] .atimer-done {
    display: block;
    animation: atimer-done-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both, atimer-pulse 2.4s ease-in-out 0.6s infinite;
}
.present-atimer-layer[data-phase="done"] .atimer-glow {
    animation: atimer-glow 2.4s ease-in-out infinite;
}
@keyframes atimer-done-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes atimer-pulse {
    0%, 100% { text-shadow: 0 0 4vmin rgba(248, 113, 113, 0.45); }
    50% { text-shadow: 0 0 7vmin rgba(248, 113, 113, 0.85); }
}
@keyframes atimer-glow {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .present-atimer-layer[data-phase="done"] .atimer-done,
    .present-atimer-layer[data-phase="done"] .atimer-glow {
        animation: none;
    }
    .atimer-ring {
        transition: none;
    }
}

/* 청중 화면 타이머 — 배경음악 칸(발표자 설정 창) · 재생 중 ♪ 표시 */
.wpt-atimer-music {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
}
.wpt-atimer-music__row {
    display: flex;
    gap: 0.35rem;
}
.wpt-atimer-music__row .form-select {
    flex: 1 1 auto;
    min-width: 0;
}
.wpt-atimer-preview {
    flex: 0 0 auto;
    white-space: nowrap;
}
.wpt-atimer-vol {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: #475569;
}
.wpt-atimer-vol .form-range {
    flex: 1 1 auto;
}
.wpt-atimer-vol__val {
    min-width: 2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.wpt-atimer-music:not(.has-music) .wpt-atimer-vol {
    opacity: 0.45;
}
.wpt-atimer-music__msg {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
}
.atimer-btn__music {
    margin-left: 0.3rem;
    color: #0d9488;
    animation: atimer-note 1.6s ease-in-out infinite;
}
@keyframes atimer-note {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .atimer-btn__music {
        animation: none;
    }
}

/* ── 발표 스포트라이트 (assets/wpt-spotlight.js) ── */
/* 슬라이드 무대(.present-stage — relative·overflow hidden) 안에 그린다. 청중 창의 라이브(1200)·웹페이지(1250)·타이머(1300) 층보다 아래,
   청중 창 배경음악 떠 있는 버튼(z-index 5)보다도 아래 */
.present-spot-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}
.spot-hole {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 12px;
    /* 구멍 밖 전체를 어둡게 — 그림자를 크게 펼친다 */
    box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.72);
    will-change: transform;
}
.spot-hole[data-shape="circle"] {
    border-radius: 50%;
}
/* 가장자리를 살짝 부드럽게 */
.spot-hole::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 14px 4px rgba(0, 0, 0, 0.45);
}
/* 청중 창: 메시지 사이를 짧게 이어 움직임을 부드럽게 */
.present-spot-layer--smooth .spot-hole {
    transition: transform 0.08s linear, width 0.12s ease, height 0.12s ease;
}
.present-spot-layer.is-instant .spot-hole {
    transition: none;
}
/* 한 화면·발표자 창: 켜져 있을 때만 슬라이드 위 입력을 가로챈다 */
.wpt-spot-input {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: none;
    touch-action: none;
}
.wpt-spot-input.is-on {
    display: block;
    cursor: crosshair;
}
.wpt-spot-input.is-on.is-pinned {
    cursor: default;
}
/* 툴바 버튼 켜짐 표시 */
.spot-btn.is-on,
.spot-btn.is-on:hover,
.spot-btn.is-on:focus {
    background: #facc15;
    border-color: #eab308;
    color: #1f2937;
    font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
    .present-spot-layer--smooth .spot-hole {
        transition: none;
    }
}

/* ── 원격 발표(assets/wpt-remote.js) — 청중 창 대기 덮개·[종료] ── */
.present-remote-menu .dropdown-item .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

.present-remote-wait {
    position: absolute;
    inset: 0;
    z-index: 1400; /* 라이브(1200)·웹페이지(1250)·타이머(1300) 층보다 위 — 발표자가 붙으면 통째로 사라진다 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(13, 27, 42, 0.92);
    color: #f3f4f6;
}

.present-remote-wait__card {
    max-width: 34rem;
    width: 100%;
    background: rgba(13, 27, 42, 0.96);
    border: 1px solid rgba(20, 184, 166, 0.45);
    border-radius: var(--wpt-radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    line-height: 1.6;
}

.present-remote-wait__title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: #fff;
}

.present-remote-wait__steps {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.present-remote-wait__steps strong {
    color: #fff;
    font-weight: 600;
}

/* 1번 단계 안의 주의 문구 — 연결된 프레젠테이션은 F11 (색으로 강조) */
.present-remote-wait__warn {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fbbf24;
}

.present-remote-wait__warn strong {
    color: #fde68a;
}

.present-remote-wait__status {
    font-size: 0.875rem;
    color: #5eead4;
    margin-bottom: 0.75rem;
}

.present-remote-wait__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.present-remote-exit {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1401;
    opacity: 0.55;
}

.present-remote-exit:hover,
.present-remote-exit:focus-visible {
    opacity: 1;
}

/* ── 원격 발표자 화면(스마트폰·태블릿 리모컨) — body.present-remote 는 assets/wpt-remote.js 가 붙인다.
      듀얼 모니터 발표자 창에는 이 클래스가 없어 아래 규칙이 전혀 닿지 않는다. 버튼·패널의 DOM 과 id 는 그대로(CSS 만 재배치). ── */

/* 터치 기기 공통(태블릿 가로처럼 넓은 화면 포함): 툴바 버튼을 손가락 크기로, 키보드 안내는 숨김 */
@media (pointer: coarse) {
    body.present-role-presenter.present-remote .present-toolbar--presenter {
        justify-content: flex-start; /* 버튼이 커져 두 줄이 될 때 첫 줄(목록·제목·쪽수)을 왼쪽에 */
    }

    body.present-role-presenter.present-remote .present-toolbar--presenter .btn {
        min-height: 2.75rem;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
        font-size: 0.95rem;
    }

    body.present-role-presenter.present-remote .present-toolbar--presenter #btnPrev,
    body.present-role-presenter.present-remote .present-toolbar--presenter #btnNext {
        min-width: 7rem;
        min-height: 3rem;
        font-size: 1.1rem;
        font-weight: 600;
    }

    body.present-role-presenter.present-remote .present-toolbar__hint {
        display: none;
    }
}

/* 좁은 화면(스마트폰·태블릿 세로, 기존 세로 스택 구간과 같은 992px 미만): 리모컨 배치 */
@media (max-width: 991.98px) {
    body.present-role-presenter.present-remote .present-root {
        padding: 0 0.75rem calc(5.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* 툴바: 두 줄 — 1줄 목록·제목·쪽수, 2줄 도구(줄바꿈).
       ⚠ sticky·overflow 를 주지 않는다 — 이전·다음 버튼이 이 안에 있고 화면 아래 고정(fixed)으로 꺼내는데,
       모바일 브라우저(특히 iOS)는 sticky·가로 스크롤 조상 안의 fixed 자식을 제자리에 그리지 못해 버튼이 사라진다 */
    body.present-role-presenter.present-remote .present-toolbar--presenter {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            'list title page'
            'tools tools tools';
        align-items: center;
        gap: 0.5rem 0.6rem;
        margin: 0 -0.75rem 0.6rem;
        padding: 0.5rem 0.75rem;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-radius: 0;
    }

    body.present-role-presenter.present-remote .present-toolbar--presenter #btnExitList {
        grid-area: list;
    }

    body.present-role-presenter.present-remote .present-toolbar--presenter .present-toolbar__deck-title {
        grid-area: title;
        max-width: none;
        min-width: 0;
    }

    body.present-role-presenter.present-remote .present-toolbar--presenter #presenterPageBadge {
        grid-area: page;
        font-size: 1rem;
        padding: 0.45rem 0.8rem;
    }

    body.present-role-presenter.present-remote .present-toolbar--presenter > .badge.text-bg-secondary {
        grid-column: 1 / -1; /* 미리보기 뱃지(있을 때만) — 제 줄 */
        justify-self: start;
    }

    body.present-role-presenter.present-remote .present-toolbar--presenter > .d-flex {
        grid-area: tools;
        flex-wrap: wrap;
        margin-left: 0 !important; /* ms-md-auto 무효화 */
    }

    body.present-role-presenter.present-remote .present-toolbar--presenter > .d-flex > .btn {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 2.75rem;
    }

    body.present-role-presenter.present-remote .present-toolbar__hint {
        display: none;
    }

    /* 툴바가 두 줄이라 슬라이드 목록 패널을 그 아래로 */
    body.present-role-presenter.present-remote .present-slide-jump--presenter {
        top: 7.25rem;
        max-height: min(55vh, 28rem);
    }

    /* 이전·다음: 툴바에서 꺼내 화면 아래 고정 바로(다음이 더 크다 — 쓰는 빈도가 압도적) */
    body.present-role-presenter.present-remote .present-root::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(5.5rem + env(safe-area-inset-bottom, 0px));
        background: var(--wpt-card);
        border-top: 1px solid var(--wpt-border);
        box-shadow: 0 -6px 20px rgba(13, 27, 42, 0.08);
        z-index: 1040; /* 버튼(1041)과 같은 쌓임 맥락(루트) — 툴바에 z-index 를 주면 안 된다 */
        pointer-events: none;
    }

    body.present-role-presenter.present-remote #btnPrev,
    body.present-role-presenter.present-remote #btnNext {
        position: fixed;
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        z-index: 1041;
        height: 4rem;
        min-height: 4rem;
        padding: 0;
        font-size: 1.25rem;
        font-weight: 700;
        border-radius: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }

    body.present-role-presenter.present-remote #btnPrev {
        left: 0.75rem;
        width: calc(36% - 1rem);
        background: var(--wpt-card);
    }

    body.present-role-presenter.present-remote #btnNext {
        right: 0.75rem;
        width: calc(64% - 1rem);
    }

    body.present-role-presenter.present-remote #btnPrev::before,
    body.present-role-presenter.present-remote #btnNext::after {
        font-family: 'bootstrap-icons';
        font-weight: 400;
        font-size: 1.1em;
        line-height: 1;
    }

    body.present-role-presenter.present-remote #btnPrev::before {
        content: '\f284'; /* bi-chevron-left */
        margin-right: 0.45rem;
    }

    body.present-role-presenter.present-remote #btnNext::after {
        content: '\f285'; /* bi-chevron-right */
        margin-left: 0.45rem;
    }

    body.present-role-presenter.present-remote #btnPrev:disabled,
    body.present-role-presenter.present-remote #btnNext:disabled {
        opacity: 0.4;
    }

    /* 이어 하기 안내는 고정 바 위로 */
    body.present-role-presenter.present-remote .present-chain-prompt {
        bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
    }

    /* 현재 슬라이드: 가로 꽉 차게, 노트는 읽기 좋은 크기 */
    body.present-role-presenter.present-remote .presenter-split {
        row-gap: 0.85rem;
        flex: 0 0 auto;   /* 화면보다 길면 줄이지 말고 .present-root 가 스크롤한다(줄이면 칸이 겹친다) */
        min-height: auto;
    }

    body.present-role-presenter.present-remote .presenter-note__body {
        font-size: 1.05rem;
        line-height: 1.6;
        max-height: 9rem;
    }

    /* 다음 슬라이드: 미리보기와 시계·타이머를 나란히 — 다음 장이 한눈에, 시간은 작게 */
    body.present-role-presenter.present-remote .presenter-pane--next {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-areas:
            'head head'
            'stage clock';
        gap: 0.35rem 0.6rem;
        align-items: stretch;
    }

    body.present-role-presenter.present-remote .presenter-pane--next .presenter-pane__heading {
        grid-area: head;
    }

    body.present-role-presenter.present-remote .presenter-pane--next .presenter-pane__stage {
        grid-area: stage;
        align-self: start;
    }

    body.present-role-presenter.present-remote .presenter-pane__clock {
        grid-area: clock;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-top: 0;
        align-self: stretch;
    }

    body.present-role-presenter.present-remote .presenter-clock {
        flex: 1 1 auto;
        max-width: none;
        padding: 0.5rem 0.6rem;
        gap: 0.3rem;
    }

    body.present-role-presenter.present-remote .presenter-clock__time {
        font-size: 1.4rem;
        letter-spacing: 0.05em;
    }

    body.present-role-presenter.present-remote .presenter-clock--timer .presenter-clock__time {
        font-size: 1.15rem;
        letter-spacing: 0.03em;
    }
}

/* 스마트폰 가로: 툴바는 한 줄, 현재 슬라이드는 높이 기준으로 왼쪽에·노트는 오른쪽에 */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 520px) {
    body.present-role-presenter.present-remote .present-toolbar--presenter {
        grid-template-columns: auto minmax(0, 1fr) auto minmax(0, auto);
        grid-template-areas: 'list title page tools';
    }

    body.present-role-presenter.present-remote .present-toolbar--presenter > .d-flex {
        max-width: 52vw;
        justify-self: end;
        justify-content: flex-end;
    }

    body.present-role-presenter.present-remote .presenter-pane--current {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            'head head'
            'stage note';
        gap: 0.35rem 0.75rem;
        align-items: start;
    }

    body.present-role-presenter.present-remote .presenter-pane--current .presenter-pane__heading {
        grid-area: head;
    }

    body.present-role-presenter.present-remote .presenter-pane--current .presenter-pane__stage {
        grid-area: stage;
        height: 52vh;
        width: calc(52vh * 16 / 9);
        max-width: 100%;
        flex-shrink: 0;
        margin: 0;
    }

    body.present-role-presenter.present-remote .presenter-note {
        grid-area: note;
        margin-top: 0;
        min-height: 0;
        max-height: 52vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.present-role-presenter.present-remote .presenter-note__body {
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
    }
}