/* web.pt 앱 셸: 사이드바 + 메인 */

.wpt-app {
    display: flex;
    min-height: 100dvh;
}

/* —— 사이드바 (데스크톱) —— */
.wpt-sidebar {
    display: none;
    flex-shrink: 0;
    width: var(--wpt-sidebar-w);
    background: var(--wpt-navy);
    color: #f9fafb;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
    z-index: 1030;
}

@media (min-width: 992px) {
    .wpt-sidebar {
        display: flex;
    }
}

.wpt-sidebar__head {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wpt-sidebar__menu {
    flex: 1;
    padding: 0.75rem 0.5rem;
    overflow-y: auto;
}

.wpt-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.15rem;
    border-radius: var(--wpt-radius);
    color: rgba(249, 250, 251, 0.85);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.wpt-sidebar__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ── 덱 카테고리 서브 메뉴 (decks.php에서만 출력) ── */
.wpt-sidebar__submenu {
    margin: -0.05rem 0 0.35rem;
    padding-left: 1.6rem;
}

.wpt-sidebar__sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.32rem 0.7rem;
    border-radius: var(--wpt-radius);
    color: rgba(249, 250, 251, 0.62);
    text-decoration: none;
    font-size: 0.84rem;
    transition: background 0.15s, color 0.15s;
}

.wpt-sidebar__sublink:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.wpt-sidebar__sublink.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.wpt-sidebar__sublabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wpt-sidebar__subcount {
    font-size: 0.72rem;
    color: rgba(249, 250, 251, 0.5);
    flex-shrink: 0;
}

/* 덱 카테고리 지정 select (테이블/공유 — 카드에서는 칩만 표시) */
.wpt-deck-cat-sel {
    max-width: 12rem;
}

/* 카드 메타 행 — 항상 렌더해 카드 높이·구조를 통일 (칩 + 이어서 한 줄) */
.wpt-deck-card__meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.6rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.wpt-deck-cat-chip {
    flex-shrink: 0;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: var(--wpt-bg, #f1f5f9);
    border: 1px solid var(--wpt-border, #e2e8f0);
    color: var(--wpt-text, #334155);
}

.wpt-deck-cat-chip--none {
    color: #94a3b8;
    border-style: dashed;
    background: transparent;
}

.wpt-deck-card__next {
    min-width: 0;
}

.wpt-sidebar__link.active {
    background: rgba(20, 184, 166, 0.2);
    color: var(--wpt-teal);
}

.wpt-sidebar__foot {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wpt-sidebar__logout {
    width: 100%;
}

/* —— 메인 —— */
.wpt-main-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
}

.wpt-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 공간 부족 시 버튼 영역이 아랫줄로 내려가도록 (충분하면 기존과 동일한 한 줄) */
    flex-wrap: wrap;
    gap: 1rem;
    row-gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--wpt-card);
    border-bottom: 1px solid var(--wpt-border);
    flex-shrink: 0;
}

/* 상단 버튼 영역 — 좁은 화면에서는 버튼들도 여러 줄로 흐름 */
.wpt-topbar__actions {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    min-width: 0;
    max-width: 100%; /* 행 폭을 넘지 못하게 캡 — 내부 줄바꿈 유도 */
}

/* Bootstrap 에 없는 유틸리티 — 제목 flex 아이템 축소·말줄임용 */
.min-w-0 {
    min-width: 0;
}

.wpt-slides-page .wpt-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

@media (min-width: 992px) {
    .wpt-topbar {
        padding: 1rem 1.5rem;
    }

    .wpt-topbar__menu-btn {
        display: none !important;
    }
}

.wpt-topbar__menu-btn {
    color: var(--wpt-text);
    border-color: var(--wpt-border);
}

.wpt-content {
    flex: 1;
    padding: 1rem;
}

@media (min-width: 992px) {
    .wpt-content {
        padding: 1.5rem;
    }
}

/* 브레드크럼 */
.wpt-breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.wpt-breadcrumb a {
    color: var(--wpt-text-muted);
    text-decoration: none;
}

.wpt-breadcrumb a:hover {
    color: var(--wpt-blue);
}

/* 인증 페이지 (로그인) */
body.wpt-auth-page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--wpt-surface);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(20, 184, 166, 0.12) 1px, transparent 0);
    background-size: 24px 24px;
}

.wpt-auth-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.wpt-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--wpt-card);
    border-radius: var(--wpt-radius-lg);
    box-shadow: var(--wpt-shadow-md);
    padding: 2rem;
    border: 1px solid var(--wpt-border);
}

.wpt-auth-card .wpt-logo {
    display: block;
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
}

.wpt-auth-tagline {
    text-align: center;
    font-size: 0.875rem;
    color: var(--wpt-text-muted);
    margin-bottom: 1.5rem;
}

.wpt-share-status-card__icon {
    text-align: center;
    font-size: 2.5rem;
    color: var(--wpt-text-muted);
    margin-bottom: 1rem;
}

.wpt-share-status-card__message {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--wpt-text);
}

.wpt-share-modal .modal-content {
    border-radius: var(--wpt-radius-lg);
    border-color: var(--wpt-border);
}

.wpt-share-link-list .wpt-share-link-item + .wpt-share-link-item {
    border-top: 1px solid var(--wpt-border);
    padding-top: 1rem;
    margin-top: 1rem;
}

.wpt-share-link-item .form-control.font-monospace {
    font-size: 0.75rem;
}

/* offcanvas 사이드바 (모바일) */
.wpt-offcanvas.offcanvas {
    background: var(--wpt-navy);
    color: #f9fafb;
}

.wpt-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wpt-offcanvas .btn-close {
    filter: invert(1);
}

.wpt-offcanvas .wpt-sidebar__link {
    color: rgba(249, 250, 251, 0.85);
}

/* 대시보드 통계 카드 */
.wpt-dash-card {
    border-left: 4px solid var(--wpt-border);
}

.wpt-dash-card--navy {
    border-left-color: var(--wpt-navy);
}

.wpt-dash-card--blue {
    border-left-color: var(--wpt-blue);
}

.wpt-dash-card--teal {
    border-left-color: var(--wpt-teal);
}

/* 프레젠테이션 카드 썸네일 (첫 슬라이드 iframe) */
.wpt-deck-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--wpt-radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--wpt-border);
}

.wpt-deck-thumb--placeholder {
    background: linear-gradient(135deg, var(--wpt-navy) 0%, var(--wpt-teal) 100%);
    opacity: 0.9;
    border: none;
}

.wpt-deck-thumb__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
    background: #000;
}

.wpt-deck-thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

.wpt-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: var(--wpt-card);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(20, 184, 166, 0.1) 1px, transparent 0);
    background-size: 20px 20px;
    border-radius: var(--wpt-radius-lg);
    border: 1px dashed var(--wpt-border);
}

.wpt-empty-state p {
    color: var(--wpt-text-muted);
    margin-bottom: 0;
}

/* 테이블 */
.wpt-table thead th {
    background: var(--wpt-surface);
    color: var(--wpt-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    border-bottom-width: 1px;
}

.wpt-table tbody tr:hover {
    background: rgba(245, 247, 250, 0.8);
}

/* 표시/숨김 토글 — 숨기기(주의·비노출) / 보이기(복원·노출) */
.btn.wpt-btn-visibility-hide {
    --bs-btn-color: #92400e;
    --bs-btn-border-color: #fbbf24;
    --bs-btn-bg: #fffbeb;
    --bs-btn-hover-color: #78350f;
    --bs-btn-hover-bg: #fef3c7;
    --bs-btn-hover-border-color: #f59e0b;
    --bs-btn-active-color: #78350f;
    --bs-btn-active-bg: #fde68a;
    --bs-btn-active-border-color: #d97706;
}

.btn.wpt-btn-visibility-show {
    --bs-btn-color: #0f766e;
    --bs-btn-border-color: #2dd4bf;
    --bs-btn-bg: #ecfdf5;
    --bs-btn-hover-color: #115e59;
    --bs-btn-hover-bg: #ccfbf1;
    --bs-btn-hover-border-color: var(--wpt-teal);
    --bs-btn-active-color: #134e4a;
    --bs-btn-active-bg: #99f6e4;
    --bs-btn-active-border-color: var(--wpt-teal-hover);
}

/* 프레젠테이션 관리 목록 */
.wpt-deck-table {
    table-layout: fixed;
    width: 100%;
}

.wpt-deck-table thead th {
    white-space: nowrap;
}

.wpt-deck-table__th-id,
.wpt-deck-table__id {
    width: 3rem;
}

/* 제목 열: 나머지 너비 전부 사용 */
.wpt-deck-table__th-title,
.wpt-deck-table__title {
    width: auto;
}

.wpt-deck-table__title-text {
    display: block;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.wpt-deck-table__th-owner,
.wpt-deck-table__owner {
    width: 6rem;
    white-space: nowrap;
}

.wpt-deck-table__th-slides,
.wpt-deck-table__slides {
    width: 4.5rem;
    white-space: nowrap;
}

.wpt-deck-table__th-visible,
.wpt-deck-table__visible {
    width: 3.25rem;
}

.wpt-deck-visibility-icon {
    font-size: 1.125rem;
    vertical-align: middle;
}

.wpt-deck-visibility-icon--visible {
    color: var(--wpt-teal);
}

.wpt-deck-visibility-icon--hidden {
    color: var(--wpt-text-muted);
}

.wpt-deck-table__th-created,
.wpt-deck-table__created {
    width: 6rem;
    white-space: nowrap;
}

.wpt-deck-table__created {
    font-size: 0.6875rem;
    line-height: 1.25;
    color: var(--wpt-text-muted);
}

.wpt-deck-table__created-date,
.wpt-deck-table__created-time {
    display: block;
}

/* 아이콘 7개 + '발표' 텍스트 버튼 가로 한 줄 — 실측 콘텐츠 20.45rem + 셀 패딩 1rem + 여유 */
.wpt-deck-table__th-actions,
.wpt-deck-table__actions {
    width: 22rem;
    min-width: 22rem;
    white-space: nowrap;
}

.wpt-deck-row--hidden {
    background: rgba(245, 247, 250, 0.65);
}

/* ── 전체 프레젠테이션(all_decks.php) 소유자별 보기: 같은 표 안의 그룹 머리글 행 ── */
.wpt-deck-table .wpt-owner-group th {
    padding: 0.55rem 0.75rem;
    background: #eef2f7;
    border-top: 2px solid #d5dce6;
    border-bottom: 1px solid #d5dce6;
    font-weight: 500;
    white-space: normal;
}
.wpt-deck-table.table-hover .wpt-owner-group:hover th {
    background: #e4eaf3;
}
.wpt-owner-group__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    cursor: pointer;
}
.wpt-owner-group__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wpt-navy, #1f2937);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.wpt-owner-group__chev {
    font-size: 0.8rem;
    transition: transform 0.15s;
}
.wpt-owner-group.is-collapsed .wpt-owner-group__chev {
    transform: rotate(-90deg);
}
.wpt-owner-group__id {
    font-weight: 400;
    color: var(--wpt-text-muted, #6c757d);
}
.wpt-owner-group__me {
    font-size: 0.68rem;
    font-weight: 600;
    vertical-align: 0.1rem;
}
.wpt-owner-group__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--wpt-text-muted, #6c757d);
}
.wpt-owner-group__meta > span {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d5dce6;
}
.wpt-owner-group__meta strong {
    color: var(--wpt-navy, #1f2937);
}
.wpt-owner-group__only {
    margin-left: auto;
    font-size: 0.8rem;
    white-space: nowrap;
}
.wpt-deck-table__owner-link {
    color: inherit;
    text-decoration: none;
}
.wpt-deck-table__owner-link:hover {
    color: var(--wpt-blue);
    text-decoration: underline;
}

.wpt-deck-row--hidden .wpt-deck-table__title-text {
    color: var(--wpt-text-muted);
}

.wpt-deck-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

/* 슬라이드 목록 — 제목 링크 */
.wpt-slide-title-link {
    color: inherit;
}
.wpt-slide-title-link:hover {
    color: var(--wpt-blue);
    text-decoration: underline !important;
}

/* 프레젠테이션 관리: 좁은 화면 카드형 (lg 미만) */
@media (max-width: 991.98px) {
    .wpt-deck-table-wrap.table-responsive {
        overflow: visible;
    }

    .wpt-deck-table {
        table-layout: auto;
    }

    .wpt-deck-table thead {
        display: none;
    }

    .wpt-deck-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .wpt-deck-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--wpt-border);
        border-radius: var(--wpt-radius);
        padding: 1rem 1rem 0.85rem;
        box-shadow: var(--wpt-shadow-sm);
    }

    .wpt-deck-table tbody tr:hover {
        background: #fff;
    }

    /* 소유자 그룹 머리글: 스택 레이아웃에서는 전폭 띠 */
    .wpt-deck-table tbody tr.wpt-owner-group {
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        margin-top: 0.25rem;
    }
    .wpt-deck-table tbody tr.wpt-owner-group th {
        display: block;
        border-radius: var(--wpt-radius);
        border: 1px solid #d5dce6;
    }
    .wpt-owner-group__only {
        margin-left: 0;
    }

    .wpt-deck-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100% !important;
        max-width: none;
        padding: 0.35rem 0;
        border: 0;
        white-space: normal;
        text-align: right !important;
    }

    .wpt-deck-table tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--wpt-text-muted);
        text-align: left;
        letter-spacing: 0.02em;
    }

    .wpt-deck-table__title {
        display: block !important;
        padding: 0 0 0.75rem !important;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid var(--wpt-border);
        text-align: left !important;
    }

    .wpt-deck-table__title::before {
        display: none !important;
    }

    .wpt-deck-table__title-text {
        font-size: 1.0625rem;
        font-weight: 600;
        color: var(--wpt-navy);
    }

    .wpt-deck-row--hidden .wpt-deck-table__title-text {
        color: var(--wpt-text-muted);
    }

    .wpt-deck-table__actions {
        display: block !important;
        padding-top: 0.65rem !important;
        margin-top: 0.35rem;
        border-top: 1px solid var(--wpt-border);
        text-align: left !important;
    }

    .wpt-deck-table__actions::before {
        display: none !important;
    }

    .wpt-deck-table__actions .wpt-deck-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .wpt-deck-table__created {
        font-size: 0.8125rem;
    }

    .wpt-deck-table__created-date,
    .wpt-deck-table__created-time {
        display: inline;
    }

    .wpt-deck-table__created-time::before {
        content: ' ';
    }
}

.wpt-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

.wpt-btn-icon .bi {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* 발표 시작 버튼 — 아이콘 + 텍스트 */
.wpt-btn-present {
    width: 4rem;
    min-width: 4rem;
    gap: 0.25rem;
}

/* 카드/테이블 뷰 토글 버튼 */
.wpt-view-toggle .btn.active {
    background-color: var(--wpt-primary, #0d6efd);
    color: #fff;
    border-color: var(--wpt-primary, #0d6efd);
}

/* 덱 카드 그리드 */
.wpt-deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.wpt-deck-card {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}

.wpt-deck-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
}

/* 비활성 흐림은 썸네일·본문만 — 카드 전체에 걸면 '더보기' 버튼과 메뉴까지 흐려진다 */
.wpt-deck-card--inactive .wpt-deck-card__thumb > :not(.wpt-deck-card__more),
.wpt-deck-card--inactive .wpt-deck-card__body {
    opacity: 0.65;
}

/* 썸네일 영역 — 16:9 고정 */
.wpt-deck-card__thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #e9ecef;
    overflow: hidden;
    flex-shrink: 0;
}

.wpt-deck-card__thumb img,
.wpt-deck-card__thumb iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    object-fit: cover;
}

.wpt-deck-card__thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 3rem;
}

.wpt-deck-card__inactive-badge {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}

/* 카드 하단 */
.wpt-deck-card__body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1;
}

.wpt-deck-card__title {
    font-size: 0.925rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpt-deck-card__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

/* 슬라이드 편집기 — CodeMirror 폰트 크기 */
.cm-editor-wrap .CodeMirror {
    font-size: 0.8rem;
}

/* 슬라이드 편집 폼 — 편집기 세로 드래그 리사이즈
   sfe-editor-row 전체를 리사이즈 대상으로 삼아
   핸들이 미리보기(우측 컬럼) 우하단에 위치함 */
.sfe-editor-row {
    resize: vertical;
    overflow: hidden;
    height: 320px;
    min-height: 220px;
}

/* 에디터 패널이 row 높이를 채우도록 */
.sfe-editor-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sfe-editor-pane .cm-editor-wrap {
    flex: 1;
    overflow: hidden;
    height: 100%;
    min-height: 0;
}

.sfe-editor-pane .cm-editor-wrap .CodeMirror {
    height: 100%;
}

/* CodeMirror 검색/바꾸기 다이얼로그 — 고대비 */
.sfe-editor-pane .CodeMirror-dialog {
    background: #1e293b !important;
    color: #f8fafc !important;
    padding: 0.5rem 0.75rem !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
}

.sfe-editor-pane .CodeMirror-dialog-top {
    border-bottom: 2px solid #475569 !important;
}

.sfe-editor-pane .CodeMirror-dialog-bottom {
    border-top: 2px solid #475569 !important;
}

.sfe-editor-pane .CodeMirror-dialog input {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 2px solid #64748b !important;
    border-radius: 0.25rem;
    padding: 0.3rem 0.55rem !important;
    margin: 0 0.35rem !important;
    width: 18em !important;
    font-size: 0.85rem;
}

.sfe-editor-pane .CodeMirror-dialog input::placeholder {
    color: #64748b;
}

.sfe-editor-pane .CodeMirror-dialog input:focus {
    border-color: #2563eb !important;
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
}

.sfe-editor-pane .CodeMirror-dialog button {
    font-size: 0.75rem !important;
    background: #334155 !important;
    color: #f8fafc !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 0.25rem;
    padding: 0.25rem 0.55rem !important;
    margin-left: 0.25rem;
    cursor: pointer;
}

.sfe-editor-pane .CodeMirror-dialog button:hover {
    background: #475569 !important;
    border-color: #cbd5e1 !important;
}

.sfe-editor-pane .CodeMirror-dialog span,
.sfe-editor-pane .CodeMirror-dialog label {
    color: #e2e8f0 !important;
}

.sfe-editor-pane .CodeMirror-dialog input[type="checkbox"] {
    width: auto !important;
    margin: 0 0.25rem 0 0.5rem !important;
    padding: 0 !important;
    accent-color: #2563eb;
    vertical-align: middle;
}

/* ══════════════════════════════════════════
   슬라이드 편집 폼 (sfe-*)
   ══════════════════════════════════════════ */
.sfe-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 5rem; /* 하단 액션바 여백 */
}

/* 섹션 공통 */
.sfe-section {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
}

.sfe-section__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-wrap: wrap;
}

.sfe-section__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sfe-section--upload .sfe-section__badge { background: #0891b2; }
.sfe-section--editor .sfe-section__badge { background: #7c3aed; }
.sfe-section--note .sfe-section__badge { background: #f59e0b; }

.sfe-section__title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    color: #212529;
}

.sfe-section__hint {
    font-size: 0.75rem;
    color: #6c757d;
    margin-left: 0.25rem;
}

.sfe-section__body {
    padding: 1rem;
}

/* 프레젠테이션 정보 폼 (deck_form.php) — sfe-section 카드 스택 재사용 */
.wpt-deck-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 46rem; /* 넓은 화면에서 입력이 늘어지지 않게 */
}

/* 스위치 + 제목 + 설명을 한 덩어리로 묶은 토글 카드 — 전체가 클릭 영역 */
.wpt-toggle-card {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fafbfc;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wpt-toggle-card:hover {
    border-color: #adb5bd;
    background: #f4f6f8;
}

.wpt-toggle-card .form-check-input {
    cursor: pointer;
    margin-top: 0.2rem;
}

.wpt-toggle-card__body {
    display: block;
    min-width: 0;
}

.wpt-toggle-card__title {
    display: block;
    font-size: 0.925rem;
    font-weight: 600;
    color: #212529;
}

.wpt-toggle-card__desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #6c757d;
}

/* ① 제목 입력 */
.sfe-title-input {
    font-size: 1rem;
    font-weight: 500;
}

/* ② 이미지 업로드 */
.sfe-section--upload {
    border-left: 3px solid #0891b2;
}

.sfe-upload-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.sfe-file-input {
    flex: 1;
    min-width: 0;
}

.sfe-section__caption {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0.5rem 0 0;
}

/* ③ 편집기 섹션 */
.sfe-section--editor {
    border-left: 3px solid #7c3aed;
}

/* ④ 발표자 노트 */
.sfe-section--note {
    border-left: 3px solid #f59e0b;
}

.sfe-note-textarea {
    min-height: 8rem;
    line-height: 1.55;
    resize: vertical;
}

/* 에디터 + 미리보기 2열 레이아웃 */
.sfe-editor-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

@media (min-width: 992px) {
    .sfe-editor-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .sfe-editor-pane {
        flex: 1 1 0;
        min-width: 0;
    }

    .sfe-preview-pane {
        flex: 0 0 420px;
        width: 420px;
    }
}

/* 생성기 ③ 내용 입력 — 필드를 접지 않고 전부 펼친다(드래그·이중 스크롤 제거).
   고급 편집기(slide_form.php)는 --auto 를 붙이지 않으므로 위의
   .sfe-editor-row { resize: vertical; height: 320px } 규칙을 그대로 쓴다. */
.sfe-editor-row--auto {
    resize: none;
    overflow: visible;
    height: auto;
    min-height: 0;
}

/* 안쪽 스크롤 제거 — 페이지 스크롤 하나로 통일 (.sgen-fields-pane 원본 규칙은 무수정) */
.sfe-editor-row--auto .sgen-fields-pane {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

/* position:sticky 는 overflow:hidden 조상 안에서 동작하지 않는다 — 이 섹션만 클리핑 해제.
   안쪽 .sfe-editor-row 가 padding:1rem 을 가져 둥근 모서리 밖으로 내용이 삐져나오지 않는다. */
.sfe-section--sticky {
    overflow: visible;
}

/* 데스크톱 2열에서만 미리보기가 스크롤을 따라온다 (모바일은 세로 배치라 불필요) */
@media (min-width: 992px) {
    .sfe-editor-row--auto .sfe-preview-pane {
        position: sticky;
        top: 1rem;
    }
}

/* 생성기 미리보기 아래 발표자 노트 (slide_builder.php 전용 — 고급 편집기는 ④ 섹션) */
.sgen-note {
    margin-top: 0.9rem;
    padding: 0.7rem 0.8rem 0.6rem;
    border-left: 3px solid #f59e0b; /* .sfe-section--note 와 같은 색 */
    border-radius: 0 0.5rem 0.5rem 0;
    background: #fffbeb;
}
.sgen-note__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
    margin-bottom: 0.4rem;
}
.sgen-note__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #92400e;
}
.sgen-note__hint {
    font-size: 0.75rem;
    color: #a16207;
}
.sfe-note-textarea.sgen-note__textarea {
    min-height: 6.5rem;
    max-height: 40vh;
    background: #fff;
}
.sgen-note__caption,
.sgen-note__bulk {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: #78716c;
}
.sgen-note__bulk {
    color: #b45309;
    font-weight: 600;
}

.sfe-preview-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

/* 하단 고정 액션바 */
.sfe-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    border-top: 1px solid #dee2e6;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    padding: 0.65rem 1rem;
}

/* 사이드바 너비만큼 왼쪽 오프셋 (데스크톱) */
@media (min-width: 992px) {
    .sfe-action-bar {
        left: var(--wpt-sidebar-w, 220px);
    }
}

.sfe-action-bar__inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 900px;
}

.sfe-btn-save {
    min-width: 6rem;
}

/* 슬라이드 미리보기 — 최대 1000px, 화면에 맞춰 축소 */
.preview-frame-wrap {
    width: min(100%, 1000px);
    max-width: 100%;
    margin: 0 auto;
}

.preview-frame-wrap iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #fff;
}

/* 슬라이드 카드 그리드 */
.wpt-slide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.wpt-slide-card {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
    cursor: grab;
    transition: box-shadow 0.15s;
}

.wpt-slide-card:active {
    cursor: grabbing;
}

.wpt-slide-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* 숨김 슬라이드: 썸네일·본문만 흐리게 — 우상단 상태 칩과 선택 체크박스는 선명하게 남긴다 */
.wpt-slide-card--hidden .wpt-slide-card__thumb,
.wpt-slide-card--hidden .wpt-slide-card__body {
    opacity: 0.55;
}

/* 보이기/숨기기 상태 칩(=버튼) — 썸네일 우상단, 좌상단 체크박스와 대칭 */
.wpt-slide-card__vis-form {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 5;
    margin: 0;
}
.wpt-slide-card__vis {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: opacity 0.15s, background-color 0.15s;
}
/* 표시 슬라이드: 반투명 눈 아이콘 — 카드에 마우스를 올리면 또렷하게 */
.wpt-slide-card__vis.wpt-btn-visibility-hide {
    background: rgba(255, 255, 255, 0.85);
    color: #495057;
    opacity: 0.35;
}
.wpt-slide-card:hover .wpt-slide-card__vis.wpt-btn-visibility-hide,
.wpt-slide-card__vis.wpt-btn-visibility-hide:focus-visible { opacity: 1; }
.wpt-slide-card__vis.wpt-btn-visibility-hide:hover { background: #fffbeb; color: #92400e; border-color: #fbbf24; }
/* 숨김 슬라이드: 항상 보이는 진한 칩 '숨김' — 누르면 보이기 */
.wpt-slide-card__vis.wpt-btn-visibility-show {
    background: rgba(33, 37, 41, 0.82);
    color: #fff;
    opacity: 1;
}
.wpt-slide-card__vis.wpt-btn-visibility-show:hover,
.wpt-slide-card__vis.wpt-btn-visibility-show:focus-visible { background: #0f766e; }
.wpt-slide-card__vis:focus-visible { outline: 2px solid var(--wpt-blue, #2563eb); outline-offset: 1px; }
.wpt-slide-card__vis-text { font-weight: 600; }
@media (hover: none) {
    .wpt-slide-card__vis.wpt-btn-visibility-hide { opacity: 1; }
}

/* 썸네일 — 16:9 */
.wpt-slide-card__thumb {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #e9ecef;
    overflow: hidden;
    text-decoration: none;
}

.wpt-slide-card__thumb img,
.wpt-slide-card__thumb iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    object-fit: cover;
}

.wpt-slide-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #adb5bd;
}

/* 드래그 힌트 아이콘 (호버 시 표시) */
.wpt-slide-card__drag-hint {
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    background: rgba(0,0,0,.45);
    color: #fff;
    border-radius: 0.2rem;
    padding: 0 0.2rem;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.wpt-slide-card:hover .wpt-slide-card__drag-hint {
    opacity: 1;
}

/* 카드 하단 */
.wpt-slide-card__body {
    padding: 0.5rem 0.65rem;
}

.wpt-slide-card__title {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpt-slide-card__meta {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0;
}

/* 이미지 관리 */
.wpt-image-table-wrap {
    border-radius: 0.5rem;
    overflow: hidden;
}

.wpt-image-table__thumb {
    width: 7rem;
}

.wpt-image-table__thumb img {
    width: 6rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.35rem;
    border: 1px solid var(--bs-border-color);
    background: #111827;
    display: block;
}

.wpt-image-table__file code {
    white-space: nowrap;
}

.wpt-image-row--unused {
    background: rgba(255, 193, 7, 0.06);
}

.wpt-image-usage-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.25rem;
}

.wpt-image-usage-list li {
    font-size: 0.875rem;
    line-height: 1.35;
}

.wpt-image-usage-owner {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--wpt-blue);
    font-size: 0.75rem;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .wpt-image-table__thumb {
        width: auto;
    }

    .wpt-image-table__thumb img {
        width: 8rem;
    }

    .wpt-image-table__file code {
        white-space: normal;
        word-break: break-all;
    }
}

/* 사이트 푸터 */
.wpt-site-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem;
    border-top: 1px solid var(--wpt-border);
    background: var(--wpt-card);
    text-align: center;
}

.wpt-site-footer__text {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--wpt-text-muted);
    letter-spacing: 0.01em;
}

.wpt-site-footer--auth {
    border-top: 1px solid var(--wpt-border);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
}

.wpt-site-footer--minimal {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(13, 27, 42, 0.92);
}

body.present-mode .wpt-site-footer--minimal .wpt-site-footer__text {
    color: rgba(229, 231, 235, 0.55);
}

/* ============================================================
   웹 슬라이드 생성기 (slide_builder.php) — sgen-*
   ============================================================ */

/* 1단계: 템플릿 선택 카드 그리드 */
.sgen-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.85rem;
}

.sgen-tpl-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.55rem 0.55rem 0.75rem;
    background: var(--wpt-card, #fff);
    border: 1px solid var(--wpt-border, #dee2e6);
    border-radius: var(--wpt-radius, 0.5rem);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sgen-tpl-card:hover,
.sgen-tpl-card:focus-visible {
    border-color: var(--wpt-blue, #2563eb);
    box-shadow: var(--wpt-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    transform: translateY(-2px);
}

.sgen-tpl-card__icon {
    font-size: 1.5rem;
    color: var(--wpt-blue, #2563eb);
}

.sgen-tpl-card__name {
    font-weight: 700;
    font-size: 0.95rem;
}

.sgen-tpl-card__desc {
    font-size: 0.78rem;
    color: var(--wpt-text-muted, #6c757d);
    line-height: 1.4;
}

/* 2단계: 테마 컨트롤 행 */
.sgen-theme-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: flex-start;
}

.sgen-field-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* 배경음악 라이브러리 — 오디오 관리에 올린 음원 목록(펼침) */
.sgen-bgm-library {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fafbfc;
    max-height: 11rem;
    overflow-y: auto;
}

/* 라이브러리 목록 컨테이너 — 카테고리 select 아래 */
.sgen-bgm-lib-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.sgen-bgm-lib-item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 배경음악 플레이리스트 — 곡 목록 한 줄 */
.sgen-bgm-list {
    margin-bottom: 0.5rem;
}

.sgen-bgm-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.4rem;
    background: #fff;
}

.sgen-bgm-row + .sgen-bgm-row {
    margin-top: 0.3rem;
}

.sgen-bgm-row__num {
    flex: 0 0 1.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #64748b;
}

.sgen-bgm-row__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.sgen-bgm-row__dur {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: #64748b;
}

.sgen-bgm-row__btns {
    flex: 0 0 auto;
}

/* 배경음악 다중 선택 피커 */
.sgen-bgm-pick {
    margin: 0.5rem 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fafbfc;
}

.sgen-bgm-pick-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.sgen-bgm-pick-bar .form-select {
    width: auto;
}

.sgen-bgm-pick-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-height: 11rem;
    overflow-y: auto;
}

.sgen-bgm-pick-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgen-bgm-pick-item.selected {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.sgen-bgm-pick-item__badge:not(:empty) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #0d6efd;
    font-size: 0.72rem;
    font-weight: 700;
}

/* 서체 실물 샘플 — 테마 행의 남는 공간을 차지 */
.sgen-font-sample-field {
    flex: 1 1 16rem;
    min-width: 14rem;
}

.sgen-font-sample {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: #fafbfc;
}

.sgen-font-sample-line {
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sgen-font-sample-display {
    font-size: 1.4rem;
    font-weight: 700;
}

.sgen-font-sample-sans {
    font-size: 0.95rem;
    margin-top: 0.35rem;
}

.sgen-font-sample-serif {
    font-size: 0.95rem;
    margin-top: 0.25rem;
    color: #64748b;
}

/* 팔레트 스와치 */
.sgen-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    max-width: 24rem;
}

.sgen-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.sgen-swatch:hover {
    transform: scale(1.12);
}

.sgen-swatch.active {
    border-color: var(--wpt-blue, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* 내용 입력 필드 영역 (좌측 패널) */
.sgen-fields-pane {
    max-height: 34rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* 반복 항목(카드 등) 행 */
.sgen-repeat-item {
    background: #fafbfc;
}

.sgen-repeat-item .form-label {
    margin-bottom: 0.15rem;
}

.sgen-repeat-item .mb-3 {
    margin-bottom: 0.6rem !important;
}

/* 브로슈어 일괄 생성 피커 (slide_builder.php) */
.sgen-bulk-box {
    border: 1px solid #e3e6ea;
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: #fafbfc;
}

.sgen-bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.6rem 0;
}

.sgen-bulk-toolbar .form-select {
    width: auto;
}

.sgen-bulk-count {
    font-size: 0.82rem;
}

/* ── 생성기 공통 '이미지 선택' 피커 (모든 이미지 URL 입력란 + 배경 이미지) ── */
.sgen-imgpick-group--off .sgen-img-pick { display: none; }
.sgen-imgpick-group--off > .form-control {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}
.sgen-imgpick {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sgen-imgpick[hidden] { display: none; }
body.sgen-imgpick-open { overflow: hidden; }
.sgen-imgpick__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}
.sgen-imgpick__panel {
    position: relative;
    width: min(1100px, 100%);
    max-height: min(80vh, 100%);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.sgen-imgpick__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}
.sgen-imgpick__title { white-space: nowrap; }
.sgen-imgpick__cat { width: auto; max-width: 12rem; flex: 0 0 auto; }
.sgen-imgpick__q { flex: 1 1 8rem; min-width: 6rem; }
.sgen-imgpick__count { white-space: nowrap; }
.sgen-imgpick__body { overflow-y: auto; padding: 0.75rem; }
.sgen-imgpick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}
.sgen-imgpick__item {
    position: relative;
    border: 2px solid #dee2e6;
    border-radius: 0.4rem;
    overflow: hidden;
    background: #212529;
    cursor: pointer;
    outline: none;
}
.sgen-imgpick__item:hover,
.sgen-imgpick__item:focus-visible { border-color: #0d6efd; }
.sgen-imgpick__item.is-selected {
    border-color: #198754;
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.25);
}
.sgen-imgpick__item.is-selected::after {
    content: '선택됨';
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    font-size: 0.7rem;
    line-height: 1.2;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    background: #198754;
    color: #fff;
}
.sgen-imgpick__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #343a40;
}
.sgen-imgpick__name {
    display: block;
    padding: 0.3rem 0.45rem;
    font-size: 0.78rem;
    color: #212529;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sgen-imgpick__copy {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 0.3rem;
    background: rgba(255, 255, 255, 0.92);
    color: #212529;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.12s;
}
.sgen-imgpick__item:hover .sgen-imgpick__copy,
.sgen-imgpick__item:focus-within .sgen-imgpick__copy,
.sgen-imgpick__copy:focus-visible { opacity: 1; }
.sgen-imgpick__copy.is-done { background: #198754; color: #fff; opacity: 1; }
.sgen-imgpick__empty { padding: 2.5rem 1rem; text-align: center; }
@media (hover: none) {
    .sgen-imgpick__copy { opacity: 1; }
}
@media (max-width: 575.98px) {
    .sgen-imgpick { padding: 0.5rem; }
    .sgen-imgpick__head { flex-wrap: wrap; }
    .sgen-imgpick__cat { max-width: none; flex: 1 1 8rem; }
    .sgen-imgpick__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

.sgen-bulk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    max-height: 340px;
    overflow-y: auto;
    padding: 0.15rem;
}

.sgen-bulk-empty {
    grid-column: 1 / -1;
    padding: 1.2rem 0.5rem;
    text-align: center;
    font-size: 0.88rem;
}

.sgen-bulk-item {
    position: relative;
    padding: 0;
    border: 2px solid #dee2e6;
    border-radius: 0.375rem;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #212529;
    cursor: pointer;
}

.sgen-bulk-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sgen-bulk-item.selected {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.sgen-bulk-item__badge {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #0d6efd;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
}

.sgen-bulk-item__badge:empty {
    display: none;
}

.sgen-bulk-item__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 0.4rem 0.2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    color: #fff;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* 팔레트 관리 (slide_palettes.php) */
.sgen-pal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
}

.sgen-pal-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.sgen-pal-item__name {
    font-size: 0.82rem;
    color: var(--wpt-text-muted, #6c757d);
}

.sgen-swatch--static {
    cursor: default;
    display: inline-block;
    flex: 0 0 auto;
}

.sgen-swatch--static:hover {
    transform: none;
}

/* 피커 개선: 그룹 제목 + 실물 썸네일 카드 */
.sgen-group {
    margin-bottom: 1.5rem;
}

.sgen-group__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wpt-text-muted, #6c757d);
    margin-bottom: 0.55rem;
}

.sgen-tpl-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    margin-bottom: 0.15rem;
}

.sgen-tpl-card__thumb iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
}

/* 슬라이드 복수 선택 이동 (slides.php) */
.wpt-slide-check {
    cursor: pointer;
    flex-shrink: 0;
}

#slideList .list-group-item.wpt-slide-selected {
    background: rgba(37, 99, 235, 0.06);
    border-left: 3px solid var(--wpt-blue, #2563eb);
}

.wpt-slide-card {
    position: relative;
}

.wpt-slide-check--card {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 5;
    width: 1.15rem;
    height: 1.15rem;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
}

.wpt-slide-card.wpt-slide-selected {
    outline: 2px solid var(--wpt-blue, #2563eb);
    outline-offset: 1px;
}

button[form="saveOrderForm"].wpt-order-dirty {
    color: #fff;
    background-color: var(--wpt-blue, #2563eb);
    border-color: var(--wpt-blue, #2563eb);
    animation: wptOrderDirtyPulse 1.6s ease-in-out 2;
}

@keyframes wptOrderDirtyPulse {
    50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25); }
}

/* 무-리로드 액션 결과 토스트 */
.wpt-toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%) translateY(0.5rem);
    background: rgba(13, 27, 42, 0.92);
    color: #fff;
    font-size: 0.85rem;
    padding: 0.5rem 1.1rem;
    border-radius: 2rem;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.wpt-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 발표 기록 (present_logs.php / all_present_logs.php) */
.wpt-plog-stat-unit {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wpt-text-muted);
    margin-left: 0.25rem;
}

.wpt-plog-stat-date {
    font-size: 1.15rem;
}

.wpt-plog-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wpt-plog-item {
    overflow: hidden;
}

.wpt-plog-item__head {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 1rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wpt-plog-item__head:hover {
    background-color: var(--wpt-surface);
}

.wpt-plog-item__date {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wpt-plog-item__date small {
    font-weight: 400;
    margin-left: 0.2rem;
}

.wpt-plog-item__title {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wpt-plog-item__title .badge {
    font-weight: 500;
    vertical-align: 0.1em;
}

.wpt-plog-owner-badge {
    border: 1px solid var(--wpt-border);
}

.wpt-plog-item__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.wpt-plog-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--wpt-text-muted);
    border: 1px solid var(--wpt-border);
    border-radius: 2rem;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wpt-plog-chip--active {
    color: var(--wpt-teal-hover, #0d9488);
    border-color: rgba(20, 184, 166, 0.4);
}

.wpt-plog-item__chev {
    color: var(--wpt-text-muted);
    transition: transform 0.2s ease;
}

.wpt-plog-item__head[aria-expanded="true"] .wpt-plog-item__chev {
    transform: rotate(180deg);
}

.wpt-plog-detail {
    border-top: 1px solid var(--wpt-border);
    padding: 1rem;
    background: var(--wpt-surface);
}

.wpt-plog-metric {
    background: var(--wpt-card);
    border: 1px solid var(--wpt-border);
    border-radius: var(--wpt-radius);
    padding: 0.7rem 0.9rem;
    height: 100%;
}

.wpt-plog-metric--active {
    border-color: rgba(20, 184, 166, 0.45);
}

.wpt-plog-metric__value {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.wpt-plog-metric--active .wpt-plog-metric__value {
    color: var(--wpt-teal-hover, #0d9488);
}

.wpt-plog-metric__label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.15rem;
}

.wpt-plog-metric__hint {
    font-size: 0.72rem;
    color: var(--wpt-text-muted);
}

.wpt-plog-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--wpt-text-muted);
    margin: 0.9rem 0 0.4rem;
    letter-spacing: 0.02em;
}

/* 진행 타임라인: flex-grow=체류 시간(ms) → 폭이 자동 비율, gap 2px가 세그먼트 구분(dataviz 표면 갭) */
.wpt-plog-timeline {
    display: flex;
    gap: 2px;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
}

.wpt-plog-timeline__seg {
    min-width: 3px;
    background: var(--wpt-blue, #2563eb);
    border-radius: 2px;
}

.wpt-plog-timeline__seg--cover {
    background: #cbd5e1;
}

/* 슬라이드별 체류 바: 단일 계열(블루), 표지는 중립 회색, 최장 슬라이드는 진한 블루 강조 */
.wpt-plog-bars {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wpt-plog-bar {
    display: grid;
    grid-template-columns: minmax(8rem, 15rem) 1fr 3.6rem;
    align-items: center;
    gap: 0.6rem;
}

.wpt-plog-bar__label {
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wpt-plog-bar__label strong {
    font-variant-numeric: tabular-nums;
    margin-right: 0.15rem;
}

.wpt-plog-bar__track {
    display: block;
    height: 12px;
    background: var(--wpt-card);
    border: 1px solid var(--wpt-border);
    border-radius: 6px;
    overflow: hidden;
}

.wpt-plog-bar__fill {
    display: block;
    height: 100%;
    background: var(--wpt-blue, #2563eb);
    border-radius: 0 4px 4px 0;
}

.wpt-plog-bar__fill--top {
    background: var(--wpt-blue-hover, #1d4ed8);
}

.wpt-plog-bar__fill--cover {
    background: #cbd5e1;
}

.wpt-plog-bar__time {
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.wpt-plog-bar__time--top {
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .wpt-plog-item__head {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date chev"
            "title title"
            "chips chips";
        row-gap: 0.35rem;
    }

    .wpt-plog-item__date { grid-area: date; }
    .wpt-plog-item__title { grid-area: title; white-space: normal; }
    .wpt-plog-item__chips { grid-area: chips; justify-content: flex-start; }
    .wpt-plog-item__chev { grid-area: chev; justify-self: end; }

    .wpt-plog-bar {
        grid-template-columns: minmax(6rem, 9rem) 1fr 3.2rem;
        gap: 0.4rem;
    }

    .wpt-plog-metric__value {
        font-size: 1.1rem;
    }

    .wpt-plog-metric__hint {
        display: none;
    }
}

/* 발표 기록 — 복수 선택 삭제 행 */
.wpt-plog-item__row {
    display: flex;
    align-items: center;
}

.wpt-plog-item__row .wpt-plog-check {
    flex: 0 0 auto;
    margin: 0 0 0 0.9rem;
}

.wpt-plog-item__row .wpt-plog-item__head {
    flex: 1 1 auto;
    min-width: 0;
}

/* AI 지침 모음 (ai_prompts.php) */
.wpt-aip-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wpt-aip-item {
    overflow: hidden;
}

.wpt-aip-item__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.9rem;
}

.wpt-aip-item__head {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.5rem 0.85rem 1rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wpt-aip-item__head:hover {
    background-color: var(--wpt-surface);
}

.wpt-aip-item__title {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wpt-aip-item__meta {
    font-size: 0.78rem;
    color: var(--wpt-text-muted);
    white-space: nowrap;
}

.wpt-aip-item__chev {
    color: var(--wpt-text-muted);
    transition: transform 0.2s ease;
}

.wpt-aip-item__head[aria-expanded="true"] .wpt-aip-item__chev {
    transform: rotate(180deg);
}

.wpt-aip-item__copy {
    flex: 0 0 auto;
}

.wpt-aip-detail {
    border-top: 1px solid var(--wpt-border);
    padding: 1rem;
    background: var(--wpt-surface);
}

.wpt-aip-body {
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--wpt-card);
    border: 1px solid var(--wpt-border);
    border-radius: var(--wpt-radius);
    font-family: Consolas, 'Malgun Gothic', monospace;
    font-size: 0.8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 24rem;
    overflow-y: auto;
}

.wpt-aip-form__body {
    font-family: Consolas, 'Malgun Gothic', monospace;
    font-size: 0.85rem;
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .wpt-aip-item__head {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title chev"
            "meta meta";
        row-gap: 0.25rem;
    }

    .wpt-aip-item__title { grid-area: title; white-space: normal; }
    .wpt-aip-item__meta { grid-area: meta; }
    .wpt-aip-item__chev { grid-area: chev; justify-self: end; }
}

/* 프레젠테이션 전체 공유 (사용자 간 공유) */
.wpt-deck-card__public-badge {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    background: rgba(20, 184, 166, 0.9);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
}

/* 모바일 사용성 — 터치 타겟 확대 + iOS 입력 자동 확대 방지 */
@media (max-width: 991.98px) {
    /* iOS 사파리는 16px 미만 입력에 포커스하면 화면을 강제 줌한다 — 모바일에서는 입력류를 1rem으로 통일 */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm {
        font-size: 1rem;
    }

    /* 아이콘 버튼 터치 타겟 확대 (데스크톱 2rem → 모바일 2.75rem ≈ 44px) */
    .wpt-btn-icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* 뷰 전환 등 소형 버튼 최소 높이 확보 */
    .wpt-view-toggle > .btn {
        min-height: 2.5rem;
        min-width: 2.75rem;
    }

    /* 체크박스류 터치 타겟 확대 (슬라이드 선택·발표 기록·이미지 일괄 선택 등 공통) */
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* 버튼이 몰린 작업 영역의 오터치 방지 간격 */
    .wpt-deck-actions {
        gap: 0.5rem;
    }
}

/* iOS: 슬라이드 드래그 대상에서 long-press 링크 콜아웃·텍스트 선택 억제
   — 카드/행을 길게 누르면 시스템 메뉴(열기·링크 복사·공유) 대신 드래그가 시작되도록.
   짧은 탭으로 링크 이동·버튼 클릭은 영향 없음. */
.wpt-slide-card,
.wpt-slide-card *,
#slideList .list-group-item,
.slide-sort-handle,
.wpt-deck-card,
.wpt-deck-card *,
.wpt-deck-sort-handle {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.wpt-slide-card img,
.wpt-deck-card img {
    -webkit-user-drag: none;
}

/* ── 나의 프레젠테이션: 드래그 순서 변경 (2026-08-31) ── */
.wpt-deck-table__th-handle {
    width: 2.6rem;
}

.wpt-deck-sort-handle {
    cursor: grab;
    background: var(--wpt-teal);
    color: #fff;
    border: 0;
}

.wpt-deck-sort-handle:active {
    cursor: grabbing;
}

/* 카드 뷰: 호버 시 드래그 힌트 — 배지(좌상단 공유·우상단 비활성)와 겹치지 않게 좌하단 */
.wpt-deck-card__drag-hint {
    position: absolute;
    bottom: 0.4rem;
    left: 0.4rem;
    background: rgba(0,0,0,.45);
    color: #fff;
    border-radius: 0.2rem;
    padding: 0.1rem 0.3rem;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.wpt-deck-card:hover .wpt-deck-card__drag-hint {
    opacity: 1;
}

/* 카드 '더보기' — 썸네일 우하단(좌하단은 드래그 힌트, 상단은 배지). 터치 기기를 위해 항상 보인다 */
.wpt-deck-card__more {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
}

.wpt-deck-card__more-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wpt-deck-card__more-btn:hover,
.wpt-deck-card__more-btn:focus-visible,
.wpt-deck-card__more-btn[aria-expanded="true"] {
    background: rgba(0, 0, 0, 0.8);
    outline: none;
}

.wpt-deck-card__menu {
    min-width: 13rem;
    font-size: 0.9rem;
    /* 카테고리가 많거나 화면이 낮으면 메뉴 안에서 스크롤 */
    max-height: min(70vh, 34rem);
    overflow-y: auto;
}

.wpt-deck-card__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wpt-deck-card__menu .dropdown-item > .bi {
    width: 1rem;
    text-align: center;
}

.wpt-deck-card__menu-info {
    font-size: 0.78rem;
    white-space: nowrap;
}

.wpt-deck-card__menu-info .bi {
    margin-right: 0.25rem;
}

/* 카테고리 항목: 파란 활성 배경 대신 체크 표시로 현재 값 표시 */
.wpt-deck-cat-item__check {
    visibility: hidden;
}

.wpt-deck-card__menu .wpt-deck-cat-item.active,
.wpt-deck-card__menu .wpt-deck-cat-item:active {
    background: transparent;
    color: var(--bs-dropdown-link-color);
    font-weight: 600;
}

.wpt-deck-card__menu .wpt-deck-cat-item.active:hover {
    background: var(--bs-dropdown-link-hover-bg);
}

.wpt-deck-cat-item.active .wpt-deck-cat-item__check {
    visibility: visible;
    color: var(--wpt-primary, #0d6efd);
}

@media (max-width: 991.98px) {
    .wpt-deck-card__more-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    .wpt-deck-card__menu .dropdown-item {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
}

/* 드래그 중 자리 표시 */
.wpt-deck-grid .sortable-ghost,
.wpt-deck-table .sortable-ghost {
    opacity: 0.4;
}

/* 공유받은 프레젠테이션 — 연한 틸 워시 패널로 내 목록과 영역 구분
   (회색 톤은 페이지 배경과 동일 색조라 구분 불가 — 사용자 피드백으로 색조 변경.
    틸은 '공유' 배지·발표 버튼과 같은 계열이라 의미도 연결된다) */
.wpt-shared-section {
    margin-top: 3rem;
    padding: 1.25rem 1.25rem 1.5rem;
    background: #e7f5f2;
    border: 1px solid #c6e5de;
    border-radius: 0.75rem;
}