*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI', Arial, sans-serif;
}

body{
    background:#f6f3ef;
    height:100vh;
    overflow:hidden;
}

.container{
    display:flex;
    height:100vh;
    overflow:hidden;
}

/* ===================== */
/* Sidebar */
/* ===================== */

.sidebar{
    width:340px;
    background:#f1e6d7;
    border-right:1px solid #e4d8ca;
    overflow-y:auto;
    box-shadow:6px 0 18px rgba(0,0,0,.08);
}

.sidebar::-webkit-scrollbar{
    width:8px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#c8ae90;
    border-radius:20px;
}

.logo{
    padding:35px 30px;
    border-bottom:1px solid #e7d9ca;
}

.logo h1{
    color:#b53025;
    font-size:52px;
    font-weight:800;
    letter-spacing:2px;
}

.logo p{
    margin-top:8px;
    color:#7d7368;
    font-size:20px;
}

#menu{
    padding:25px;
}

/* 카테고리 */

.menuTitle{
    margin:35px 0 15px;
    color:#b53025;
    font-size:28px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    border-bottom:2px solid #d9b9a8;
    padding-bottom:8px;
}

/* 메뉴 */

.menuItem{
    position:relative;
    padding:16px 18px;
    border-radius:14px;
    cursor:pointer;
    margin-bottom:10px;
    transition:.25s;
}

.menuItem:hover{
    background:#fff6f3;
    transform:translateX(8px);
}

.menuItem.active{
    background:#b53025;
    color:white;
    box-shadow:0 10px 25px rgba(181,48,37,.35);
}

.menuItem.active::before{
    content:"";
    position:absolute;
    left:0;
    top:12px;
    bottom:12px;
    width:5px;
    background:#ffd4cd;
    border-radius:20px;
}

.menuRow{
    display:flex;
    align-items:center;
    gap:14px;
}

.menuNumber{
    width:40px;
    font-size:26px;
    font-weight:700;
    color:#b53025;
}

.menuItem.active .menuNumber{
    color:white;
}

.menuText{
    font-size:17px;
    font-weight:600;
    flex:1;
}

.videoBadge{
    background:white;
    color:#b53025;
    border:1px solid #b53025;
    border-radius:5px;
    padding:4px 8px;
    font-size:10px;
    font-weight:bold;
    letter-spacing:1px;
}

/* ===================== */
/* Viewer (오른쪽 영역)   */
/* ===================== */

.viewer{
    flex:1;
    display:flex;
    flex-direction:column;
    background:#faf8f5;
    height:100vh;
    overflow:hidden;
}

/* 상단 */

.top{
    height:90px;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    background:white;
    border-bottom:1px solid #ece2d8;
}

.top button{
    width:56px;
    height:56px;
    border:none;
    border-radius:50%;
    background:#b53025;
    color:white;
    font-size:24px;
    cursor:pointer;
    transition:.25s;
}

.top button:hover{
    transform:scale(1.08);
    background:#8d241b;
}

#pageNumber{
    font-size:28px;
    color:#b53025;
    font-weight:700;
}

/* ===================== */
/* 이미지 / 동영상 표시 영역 */
/* PC: 오른쪽(뷰어) 영역의 정중앙에 배치 */
/* ===================== */

.imageBox{
    flex:1;
    width:100%;
    min-height:0;
    display:flex;
    justify-content:center;   /* 가로 가운데 */
    align-items:center;       /* 세로 가운데 */
    padding:12px;
    overflow:hidden;
}

/* 이미지, 동영상 공통: 잘리지 않고 비율 유지하며 전체가 보이도록 */
.imageBox img,
.imageBox video{
    display:block;
    width:auto;
    height:auto;
    max-width:95%;
    max-height:92vh;
    object-fit:contain;
    background:none;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.menuToggle{
    display:none;
}

/* ========================= */
/* Mobile 반응형              */
/* 사진/동영상이 잘리지 않고 전체가 보이도록 처리 */
/* ========================= */

@media (max-width:768px){

    body{
        height:auto;
        overflow-y:auto;
    }

    .container{
        flex-direction:column;
        height:auto;
        overflow:visible;
    }

    .menuToggle{
        display:block;
        width:100%;
        padding:15px;
        background:#b53025;
        color:#fff;
        border:none;
        font-size:18px;
        font-weight:bold;
        cursor:pointer;
    }

    .sidebar{
        display:none;
        width:100%;
        height:auto;
        max-height:none;
        border-right:none;
        border-bottom:1px solid #e4d8ca;
    }

    .sidebar.open{
        display:block;
    }

    .logo{
        padding:20px;
    }

    .logo h1{
        font-size:36px;
    }

    .logo p{
        font-size:16px;
    }

    #menu{
        padding:15px;
    }

    .menuTitle{
        font-size:20px;
        margin:20px 0 10px;
    }

    .menuItem{
        padding:12px;
        margin-bottom:8px;
    }

    .menuNumber{
        width:30px;
        font-size:20px;
    }

    .menuText{
        font-size:15px;
    }

    .viewer{
        width:100%;
        height:auto;
        overflow:visible;
    }

    .top{
        height:70px;
        gap:18px;
    }

    .top button{
        width:46px;
        height:46px;
        font-size:20px;
    }

    #pageNumber{
        font-size:22px;
    }

    /* 모바일: 사진/동영상 전체가 보이도록 (잘림 방지) */
    .imageBox{
        padding:8px;
        align-items:center;
    }

    .imageBox img,
    .imageBox video{
        width:100%;
        max-width:100%;
        max-height:82vh;
        object-fit:contain;
    }
}