/* --- 1. Global Reset & Scrollbar --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Times New Roman', serif;
}

/* --- 2. Header & Menu --- */
header {
    height: 80px;
    padding: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h1 { font-size: 1.5rem; }

.menu {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.menu a {
    text-decoration: none;
    color: #000;
    margin: 0 10px;
    font-size: 0.9rem;
}

.menu a:hover { text-decoration: underline; }

.link-2b { position: relative; }

.hover-img {
    display: none;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: auto;
    z-index: 10000;
    pointer-events: none;
}

.link-2b:hover .hover-img { display: block; }

/* --- Main Container & Photo Stack --- */
.container {
    display: flex;
    width: 100%;
    height: calc(100vh - 80px);
    position: relative;
    background: #fff;
}

/* 오른쪽 영역 래퍼 */
.right-content-wrapper {
    position: relative;
    flex: 1;
    height: 100%;
    display: block;
}

#right-pane {
    width: 100%;
    height: 100%;
    border: none;
}


/* 사진들이 쌓이는 레이어 (iframe 위에 위치) */
.image-stack-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;      /* iframe보다 위에 보이게 */
    overflow-y: auto; /* 사진이 많아지면 이 레이어에서 스크롤 */
    pointer-events: none; /* 빈 공간 클릭 시 뒤의 iframe이 눌리게 함 */
}

/* 수직 정렬을 위한 내부 컨테이너 */
.image-stack {
    position: relative;
    width: 100%;
    min-height: 100vh; /* 내용이 적어도 화면 높이만큼 확보 */
    padding: 0;
    pointer-events: auto;
}

.image-stack img {
    width: 250px;       /* 사진 사이즈 */
    height: auto;
    margin-bottom: -200px; /* 겹침 정도 */

    /* 배경과 테두리 모두 제거 */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;

}

/* iframe 설정 */
iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
}

#left-pane {
    width: 50%;
    flex-shrink: 0;
}

/* 리사이저 및 기타 요소 */
#resizer {
    width: 0;
    position: relative;
    z-index: 5000;
}
#resizer::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 100%;
    left: -10px;
    cursor: col-resize;
    background: transparent;
}
#resizer-icon {
    position: absolute;
    left: 0;
    transform: translate(-50%, -50%);
    display: none;
    pointer-events: none;
    background: radial-gradient(circle, rgba(153, 204, 51, 0.6) 0%, rgba(153, 204, 51, 0) 70%);
    border-radius: 50%;
        padding: 30px 40px;
    color: #000;
    font-size: 18px; /* 글자 크기가 너무 크면 줄여보세요 */
    white-space: nowrap;
    text-align: center;
        z-index: 10001; 
}

#resizer:hover #resizer-icon,
body.dragging #resizer-icon {
    display: block;
}

/* 드래그 중 iframe 안으로 마우스가 들어가도 끊기지 않게 설정 */
body.dragging iframe {
    pointer-events: none !important;
}