/*!
 * syworks CMS — 사용자측 팝업 노출 스타일
 * Figma 5391:6502(LAYER_LIST 다건 통합) · 라인 31957(모바일) 정합
 *
 * 어드민 라이브 미리보기(.ppm-*) 와 클래스 prefix(.swp-*) 완전 분리.
 * WINDOW 팝업은 진짜 새 창(window.open)으로 열리므로 in-page 스타일 없음(새 창 문서가 자체 인라인 스타일 보유).
 */

/* ===== LAYER 다건 통합 박스 (Figma 5391:6502) — 딤 없는 플로팅 + 드래그 바 ===== */
.swp-layer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 1920×1080 기준 확대 — 우측 콘텐츠(영상) 가독 폭 확보. 바+body+footer 포함 높이. */
    width: 860px;
    height: 640px;
    max-width: 92vw;
    max-height: 92vh;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #d4d4d8;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10001;
}
/* 드래그로 left/top 직접 지정되면 중앙 transform 해제 */
.swp-layer[style*="left"] { transform: none; }
.swp-layer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #d4d4d8;
    color: #111827;
    border-bottom: 1px solid #a1a1aa;
    cursor: move;
    user-select: none;
}
.swp-layer-bar-title { font-weight: 700; font-size: 1rem; }
.swp-layer-bar-x {
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: #111827;
    padding: 0 4px;
    cursor: pointer;
}
.swp-layer-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    flex: 1 1 auto;
    min-height: 0;
}
.swp-layer-list {
    background: #f3f4f6;
    border-right: 1px solid #e5e7eb;
    overflow-y: auto;
    min-height: 0;
}
/* 좌측 리스트 헤더('팝업 안내')는 상단 .swp-layer-bar 와 중복이라 제거(보완 3) — 리스트는 바 아래에서 바로 항목부터 시작. */
.swp-layer-list-item {
    padding: 12px 14px;
    cursor: pointer;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    font-size: .92rem;
    line-height: 1.35;
}
.swp-layer-list-item:hover { background: #e5e7eb; }
.swp-layer-list-item.active { background: #d1d5db; font-weight: 600; }
.swp-layer-content {
    padding: 16px;
    overflow: auto;
    min-height: 0;
    /* flex 컬럼으로 자식(.swp-content-inner flex:1)이 실제 높이를 받아 영상 height:100% 가 붕괴하지 않도록(영상이 너무 작던 원인). */
    display: flex;
    flex-direction: column;
}

/* ===== LAYER 신규 단건 — 딤 없는 플로팅 박스, 헤더 드래그 이동, 콘텐츠 자동 크기 ===== */
.swp-layer-single {
    position: fixed;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #d4d4d8;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 90vw;
    max-height: 90vh;
}
.swp-layer-single-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #d4d4d8;
    color: #111827;
    border-bottom: 1px solid #a1a1aa;
    cursor: move;        /* 헤더 드래그 이동 힌트 */
    user-select: none;
}
.swp-layer-single-title { font-weight: 700; font-size: 1rem; }
.swp-layer-single-x {
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: #111827;
    padding: 0 4px;
    cursor: pointer;
}
/* 콘텐츠 자동 크기 — IMAGE 자연크기(90vw/90vh 클램프), HTML/VIDEO 는 기본폭 fallback */
.swp-layer-single-content {
    overflow: auto;
    background: #ffffff;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swp-layer-single-content .swp-content-inner { flex: 0 0 auto; width: auto; }
.swp-layer-single-content .swp-img    { max-width: 90vw; max-height: 80vh; display: block; }
.swp-layer-single-content .swp-video  { width: 400px; max-width: 90vw; height: 300px; border: 0; }
.swp-layer-single-content .swp-html   { width: 400px; max-width: 90vw; padding: 8px; }

/* ===== 콘텐츠 공통 (LAYER_LIST 우측 콘텐츠 영역) ===== */
.swp-content-inner {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swp-content-inner.swp-clickable { cursor: pointer; }
.swp-img    { max-width: 100%; max-height: 100%; display: block; }
.swp-video  { width: 100%; height: 100%; border: 0; }
.swp-html   { width: 100%; padding: 8px; }

/* ===== 푸터 (공통) — 설정기간 그만보기 / 닫기 / 페이저 ===== */
.swp-footer {
    display: flex;
    border-top: 1px solid #d4d4d8;
    background: #f3f4f6;
}
.swp-foot-seg {
    flex: 1 1 0;
    text-align: center;
    /* 860×640 확대 박스에 비례하도록 버튼 영역 높임(푸터 ≈50px). */
    padding: 14px 16px;
    background: transparent;
    border: 0;
    color: #374151;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    border-right: 1px solid #d4d4d8;
}
.swp-foot-seg:last-child { border-right: 0; }
/* 페이저 폭을 좌측 리스트 컬럼(180px)에 맞춰 구분선 정렬. */
.swp-foot-seg.swp-pager {
    flex: 0 0 180px;
    cursor: default;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.swp-foot-seg:hover:not(.swp-pager) { background: #e5e7eb; }
/* 페이저 이전/다음 네비 — 네이티브 button, 경계에서 disabled dim */
.swp-pager-nav {
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    padding: 0 8px;
    font-size: 1.2rem;
    line-height: 1;
    color: #4b5563;
    user-select: none;
    border-radius: 4px;
}
.swp-pager-nav:hover:not(:disabled) { background: #e5e7eb; color: #111827; }
.swp-pager-nav:disabled { cursor: default; opacity: .35; }
.swp-pager-label { color: #4b5563; min-width: 48px; text-align: center; }

/* ===== 모바일 (≤ 768px) — Figma 라인 31957 ===== */
@media (max-width: 768px) {
    /* LAYER_LIST — 모바일은 드래그 미적용·화면 정중앙 고정 (transform 유지) */
    .swp-layer.swp-layer-mobile {
        width: 92vw;
        max-height: 90vh;
    }
    /* 좌측 리스트 폭 축소 — 360px 화면에서 100px(~28%) 과대 → 80px(B4) */
    .swp-layer-body { grid-template-columns: 80px 1fr; }
    .swp-layer-list-item { padding: 10px 8px; font-size: .86rem; }
    /* 모바일 푸터 — 페이저 폭을 모바일 리스트(80px)에 맞춰 축소·패딩 완화. */
    .swp-layer-mobile .swp-foot-seg { padding: 11px 8px; font-size: .88rem; }
    .swp-layer-mobile .swp-foot-seg.swp-pager { flex: 0 0 80px; gap: 2px; }
    .swp-layer-mobile .swp-pager-nav { padding: 0 4px; font-size: 1.05rem; }
    .swp-layer-mobile .swp-pager-label { min-width: 30px; font-size: .82rem; }

    /* LAYER 신규 단건 — 모바일은 드래그 미적용·화면 정중앙 고정 fallback */
    .swp-layer-single.swp-layer-single-mobile {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%);
        max-width: 90vw;
        max-height: 86vh;
    }
}