/* ========== 기본 레이아웃 ========== */
html, body {height: 100%; margin: 0; font-family: 'Noto Sans KR', Inter, Arial, sans-serif; color: var(--color-text-dark); overflow: hidden;}

/* ========== 지도 래퍼 ========== */
.map-wrapper {  position: relative;  flex: 1;  display: flex;  overflow: hidden;  width: 100%;  height: 100%;}

/* ========== 지도 영역 (기본: 단일 지도 모드) ========== */
.map-area {  position: relative;  flex: 1 1 0%;  background: #0a162b; width: 100%;  height: 100%; overflow: hidden;}
.map-area-second {  position: relative;  flex: 1 1 0%;  background: #0a162b;  display: none; width:100%;  height: 100%; overflow: hidden;}
#cesiumContainer,#cesiumContainer2 {  position: absolute;  inset: 0;  width: 100%;  height: 100%;  overflow: hidden; user-select: none; -webkit-user-drag: none;}

/* 레이아웃 밀림 방지 - 컨테이너 고정 */
#wrap, .map_layout, .map_canvas {
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* #map div 레이아웃 격리 */
#map {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    contain: size layout style;
    display: block;
}

/* IDT 검색 패널 페이지네이션: [이전/다음]을 1행, 페이지 번호를 2행으로 배치 */
.krds-pagination.small {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 6px;
    column-gap: 8px;
}

.krds-pagination.small .page-navi.prev,
#searchResultSect .krds-pagination.small .page-navi.next {
    order: 1;
}

.krds-pagination.small .page-links {
    order: 2;
    flex-basis: 100%;
    display: flex;
    justify-content: center;
}

/* =====================================================
   ScenePanel item-slide corner clipping fix
   ===================================================== */

/* scroll 컨테이너에 padding 부여 */
.aside-modal-bottom .list-slide {
    padding: 4px 8px !important;
}

/* item 자체에도 최소 여백 */
.aside-modal-bottom .list-slide .item-slide {
    padding: 4px 0;
}

/* 혹시 상위 overflow 때문에 잘리는 경우 대비 */
.aside-modal-bottom {
    overflow: visible !important;
}

/* active(on) 상태도 동일하게 */
.aside-modal-bottom .list-slide .item-slide.on > a {
    outline-offset: 2px;
}

.box-text {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    color: var(--krds-color-high-contrast-gray-0);
}

/* POR 공통 table-flex-container를 THM에서도 사용 */
.krds-modal .table-flex-container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    gap: 0 var(--krds-padding-5);
}

.krds-modal .table-flex-container .table-item {
    width: 33.333%;
    flex-shrink: 0;
    flex: 1;
}

.krds-modal .table-flex-container .table-item .table-title {
    margin-bottom: var(--krds-padding-3);
}

.krds-modal .table-flex-container .table-item .krds-table-wrap .tbl.data tbody th,
.krds-modal .table-flex-container .table-item .krds-table-wrap .tbl.data tbody td {
    word-break: normal;
}

/* 축제 정보보기 전용: 썸네일(좌), 표(우) */
#infoModal.festival-info-modal .festival-info-table-flex .festival-info-thumbnail-item {
    max-width: 450px;
    flex: 0 0 auto;
}

#infoModal.festival-info-modal .festival-info-thumbnail-wrap {
    max-width: 450px;
    height: 250px;
    max-height: 250px;
    overflow: hidden;
    border-radius: var(--krds-radius-medium1);
    background: var(--krds-color-light-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

#infoModal.festival-info-modal .festival-info-thumbnail {
    display: block;
    width: auto;
    height: auto;
    max-width: 450px;
    max-height: 250px;
    object-fit: contain;
}

#infoModal.festival-info-modal .festival-info-table-item {
    min-width: 0;
}

#infoModal.festival-info-modal #infoModalFrame {
    width: 560px;
    max-width: min(560px, 96vw);
}

#infoModal.festival-info-modal .festival-info-thumbnail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1200px) {
    .krds-modal .sect .table-flex-container {
        flex-direction: column;
        gap: var(--krds-padding-5) 0;
    }

    .krds-modal .sect .table-flex-container .table-item {
        width: 100%;
    }

    #infoModal.festival-info-modal .festival-info-table-flex .festival-info-thumbnail-item {
        max-width: 100%;
    }
}

/* THM 바람지도 시계열 패널 위치 미세 조정 */
#thm-timeseries-popup .area-inner {
    top: 15.4rem;
}

@media screen and (max-width: 1200px) {
    #thm-timeseries-popup .area-inner {
        top: 20.2rem;
    }
}

/* 선거구현황 ON/OFF 토글: 레이아웃 */
#searchResultSect > .search_result {
    width: 100%;
}
/* 선거구현황 ON/OFF 토글 사이즈 오버라이드 */
.elec-toggle-all.krds-form-toggle-switch.type1 [type=checkbox] ~ label .switch-toggle {
    width: 7.6rem;
}
.elec-toggle-all.krds-form-toggle-switch.type1 [type=checkbox] ~ label .switch-toggle .switch_btn {
    width: 3.4rem;
}
.elec-toggle-all.krds-form-toggle-switch.type1 [type=checkbox] ~ label .switch-toggle i.on-image {
    left: 3.8rem;
}
.elec-toggle-all.krds-form-toggle-switch.type1 [type=checkbox]:checked ~ label .switch-toggle {
    width: 7.6rem;
}
.elec-toggle-all.krds-form-toggle-switch.type1 [type=checkbox]:checked ~ label .switch-toggle i.on-image {
    left: 3.8rem;
}
.elec-toggle-all.krds-form-toggle-switch.type1 [type=checkbox]:checked ~ label .switch-toggle .switch_btn {
    width: 3.4rem;
}


/* ========== 정보보기 모달 이미지 캐러셀 ========== */
.modal-img-area .info-carousel {
    width: 100%;
    margin-bottom: 8px;
}
.modal-img-area .info-carousel-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    transition: height 0.3s ease;
}
.modal-img-area .info-carousel-track {
    display: flex;
    align-items: flex-start;
    transition: transform 0.3s ease;
}
.modal-img-area .info-carousel-track img {
    width: 100%;
    flex-shrink: 0;
    border-radius: 8px;
    display: block;
    aspect-ratio: unset;
    object-fit: unset;
    height: auto;
}
/* 사진 위 좌/우 클릭 영역 */
.modal-img-area .info-carousel-viewport {
    position: relative;
}
.modal-img-area .info-carousel-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.modal-img-area .info-carousel-zone:hover {
    opacity: 1;
    background: linear-gradient(to right, rgba(0,0,0,0.25), transparent);
}
.modal-img-area .info-carousel-zone-prev { left: 0; }
.modal-img-area .info-carousel-zone-next { right: 0; }
.modal-img-area .info-carousel-zone-next:hover {
    background: linear-gradient(to left, rgba(0,0,0,0.25), transparent);
}
.modal-img-area .info-carousel-zone::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.45);
    background-image: url("/static/sgp_thm/images/common/ico/ico-arrow-left.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}
.modal-img-area .info-carousel-zone-next::before {
    transform: rotate(180deg);
}
/* 하단 dot 네비게이션 */
.modal-img-area .info-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
}
.modal-img-area .info-carousel-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}
.modal-img-area .info-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background-color 0.2s;
}
.modal-img-area .info-carousel-dot.active {
    background-color: rgba(255, 255, 255, 0.9);
}