/*!
 * 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: var(--cms-white)fff;
    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: var(--cms-gray-110);
    border-right: 1px solid var(--cms-gray-200);
    overflow-y: auto;
    min-height: 0;
}
/* 좌측 리스???�더('?�업 ?�내')???�단 .swp-layer-bar ?� 중복?�라 ?�거(보완 3) ??리스?�는 �??�래?�서 바로 ??��부???�작. */
.swp-layer-list-item {
    padding: 12px 14px;
    cursor: pointer;
    color: var(--cms-gray-750);
    border-bottom: 1px solid var(--cms-gray-200);
    font-size: .92rem;
    line-height: 1.35;
}
.swp-layer-list-item:hover { background: var(--cms-gray-200); }
.swp-layer-list-item.active { background: var(--cms-border-input); 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: var(--cms-white)fff;
    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: var(--cms-white)fff;
    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: var(--cms-gray-110);
}
.swp-foot-seg {
    flex: 1 1 0;
    text-align: center;
    /* 860×640 ?��? 박스??비�??�도�?버튼 ?�역 ?�임(?�터 ??0px). */
    padding: 14px 16px;
    background: transparent;
    border: 0;
    color: var(--cms-gray-750);
    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: var(--cms-gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.swp-foot-seg:hover:not(.swp-pager) { background: var(--cms-gray-200); }
/* ?�이?� ?�전/?�음 ?�비 ???�이?�브 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: var(--cms-gray-700);
    user-select: none;
    border-radius: 4px;
}
.swp-pager-nav:hover:not(:disabled) { background: var(--cms-gray-200); color: #111827; }
.swp-pager-nav:disabled { cursor: default; opacity: .35; }
.swp-pager-label { color: var(--cms-gray-700); 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;
    }
}