/* Carousel 반응형 컨테이너 제한 해제 */
#mainCarousel {
    width: 100%;
    margin: 0 auto;
    touch-action: manipulation;
    overscroll-behavior-x: contain; /* iOS 가로 뒤로가기 제스처 완화 */
}

/* 둥근 모서리와 그림자를 inner 영역으로 이동하고, 하단에 점이 들어갈 여백 확보 */
#mainCarousel .carousel-inner {
    margin-bottom: 0px;
    border-radius: 0px; /* 박스형 레이아웃일 경우 아래에서 재정의 */
    overflow: hidden;
    background-color: #ffffff; /* 모자란 부분은 흰색으로 채움 */
    touch-action: manipulation; /* iOS 스와이프 인식 + 더블탭 줌 지연 제거 */
    -webkit-user-select: none;
    user-select: none;
}

#mainCarousel .carousel-item {
    position: relative;
    overflow: hidden;
    /* height는 idx_slide.jsp의 inline style에서 동적으로 설정됩니다. */
    background-color: #ffffff; /* 모자란 부분은 흰색으로 채움 */
    text-align: center;
}

/* 이미지를 배경으로 사용하여 블러 처리 (빈 공간 채우기) */
.carousel-item-blurry-bg, .carousel-item-blurry-bg-mo {
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px; /* 블러 가장자리 잘림 방지 */
    background-size: cover;
    background-position: center;
    filter: blur(30px);
    transform: scale(1.1); /* 확대하여 가장자리 채우기 */
    opacity: 0.5; /* 배경의 투명도 조절 (값이 낮을수록 투명) */
}
.carousel-item-blurry-bg-mo { display: none; }
@media (max-width: 768px) {
    .carousel-item-blurry-bg { display: none; }
    .carousel-item-blurry-bg-mo { display: block; }
}

/* 이미지 링크와 이미지를 블러 배경 위에 위치시키기 */
#mainCarousel .carousel-item a {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#mainCarousel .carousel-item picture {
    display: block;
    width: 100%;
    height: 100%;
}

#mainCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* [수정] 기본값을 cover로 변경하여 '전체 너비'에서 이미지가 영역을 꽉 채우도록 합니다. */
}

/* [추가] '박스형' 레이아웃이면서 '고정 높이'일 경우, 이미지가 잘리지 않도록 scale-down을 유지합니다. */
#mainCarousel.carousel-layout-boxed:not(.carousel-height-auto) .carousel-item img {
    object-fit: scale-down;
}

/* '자동 높이' 모드일 때 높이 제한 해제 및 관련 스타일 조정 */
#mainCarousel.carousel-height-auto .carousel-item {
    height: auto;
    background-color: transparent; /* 블러 배경이 없으므로 투명하게 처리 */
}

#mainCarousel.carousel-height-auto .carousel-item a {
    display: block; /* 이미지가 차지하는 높이를 그대로 따르도록 block으로 변경 */
    height: auto;
}

#mainCarousel.carousel-height-auto .carousel-item picture {
    height: auto;
}

#mainCarousel.carousel-height-auto .carousel-item img {
    height: auto; /* 이미지 원본 비율에 따라 높이가 자동 조절되도록 설정 */
    object-fit: unset; /* 고정 높이가 없으므로 object-fit 속성 해제 */
}

/* [수정] '자동 높이' 모드에서는 블러 배경을 사용하지 않음 */
#mainCarousel.carousel-height-auto .carousel-item-blurry-bg,
#mainCarousel.carousel-height-auto .carousel-item-blurry-bg-mo {
    display: none;
}

/* 커스텀 플로팅 원형 화살표 버튼 */
.custom-carousel-control {
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    top: calc(50% - 17px); /* 하단 여백을 제외한 이미지의 정확한 중앙에 배치 */
    transform: translateY(-50%);
    opacity: 0; /* 평소에는 숨김 */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color: #333;
    z-index: 10;
}

.custom-carousel-control.carousel-control-prev {
    left: 15px !important; /* 왼쪽 끝 배치 */
}
.custom-carousel-control.carousel-control-next {
    right: 15px !important; /* 오른쪽 끝 배치 */
}

/* 데스크톱(lg) 이상 화면에서 '전체 너비' 레이아웃일 경우, 컨트롤(화살표, 관리버튼)을 콘텐츠 영역 안으로 이동시켜 통일감 부여 */
@media (min-width: 992px) {
    #mainCarousel:not(.carousel-layout-boxed) .custom-carousel-control.carousel-control-prev {
        left: 85px !important; /* 좌측 여백 고려 */
    }
    #mainCarousel:not(.carousel-layout-boxed) .custom-carousel-control.carousel-control-next {
        right: 85px !important; /* 플로팅 메뉴 너비(약 60px) + 여백 고려 */
    }
    /* 관리자 버튼도 우측 화살표와 동일한 위치로 조정 */
    #mainCarousel:not(.carousel-layout-boxed) .admin-edit-btn-wrapper {
        right: 85px;
    }
}

#mainCarousel:hover .custom-carousel-control {
    opacity: 1; /* 마우스 올렸을 때 나타남 */
}

.custom-carousel-control:hover,
.custom-carousel-control:focus,
.custom-carousel-control:active {
    background-color: #fff !important;
    color: #000 !important;
    transform: translateY(-50%) scale(1.1) !important;
    outline: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
}

.custom-carousel-control i {
    font-size: 1.5rem;
    font-weight: bold;
}

/* 다이내믹 하단 인디케이터 (활성화 시 타원형으로 늘어남) */
#mainCarousel .carousel-indicators {
    bottom: 10px;
    margin-bottom: 0;
    gap: 8px;
}
#mainCarousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d1d1d1; /* 배경이 흰색이므로 연한 회색으로 변경 */
    border: none;
    box-shadow: none;
    margin: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#mainCarousel .carousel-indicators button.active {
    width: 28px; /* 활성화된 점은 길어짐 */
    border-radius: 10px;
    background-color: #555; /* 활성화 시 진한 회색 */
    border: none;
    box-shadow: none;
}

/* 박스형 레이아웃일 때 둥근 모서리 적용 */
#mainCarousel.carousel-layout-boxed .carousel-inner {
    border-radius: 0.5rem;
}

/* 모바일에서는 박스형이라도 좌우 여백이 없으므로 둥근 모서리 제거 */
@media (max-width: 991.98px) {
    #mainCarousel.carousel-layout-boxed .carousel-inner {
        border-radius: 0;
    }
}

/* 관리자 돌림배너 에디트 버튼 호버 효과 */
.admin-edit-btn-wrapper {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#mainCarousel:hover .admin-edit-btn-wrapper {
    opacity: 1;
}

/* 모바일 환경 최적화 */
@media (max-width: 768px) {
    .custom-carousel-control {
        display: none !important; /* 모바일은 스와이프가 편하므로 화살표 숨김 */
    }
    #mainCarousel .carousel-indicators { bottom: 10px; }
    #mainCarousel .admin-edit-btn-wrapper { opacity: 1; top: 10px; right: 10px; }

    /* 모바일에서는 관리 버튼을 조금 더 콤팩트하게 */
    #mainCarousel .admin-edit-btn-wrapper .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   메인 돌림배너 — responsiveMenuBar 하단 투명 + border 아래 간격
   (idx_slide.jsp 로드 시 html.has-main-carousel 클래스 적용)
   ========================================================================== */
html.has-main-carousel {
    --slide-menu-gap: 5px; /* border 라인과 배너 사이 간격 */
}

html.has-main-carousel #sticky-header {
    background-color: #ffffff !important;
}

html.has-main-carousel #responsiveMenuBar {
    background: transparent !important;
    padding-bottom: 0 !important;
}

html.has-main-carousel #responsiveMenuBar > .border-bottom {
    background-color: #ffffff;
    position: relative;
    z-index: 1002;
}

html.has-main-carousel #mainCarousel {
    margin-top: var(--slide-menu-gap);
    position: relative;
    z-index: 1001;
}

/* 돌림배너 관리 — 썸네일 하단 파일 크기 표시 */
.image-file-size-display .file-size-text {
    font-variant-numeric: tabular-nums;
}
#imgSettingFileSize {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   돌림배너 관리 모달 — 모바일 레이아웃
   ========================================================================== */
@media (max-width: 767.98px) {
    #slideAdminModal .modal-dialog {
        margin: 0.35rem auto;
        max-width: calc(100% - 0.7rem);
    }

    #slideAdminModal .modal-header {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    #slideAdminModal .modal-header .modal-title {
        font-size: 1rem;
    }

    #slideAdminModal .modal-body {
        padding: 0.75rem !important;
    }

    #slideAdminModal .modal-footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    #slideAdminModal .modal-footer .d-flex.gap-2 {
        width: 100%;
    }

    #slideAdminModal .modal-footer .d-flex.gap-2 .btn {
        flex: 1;
    }

    #slideAdminModal .card-body .form-text {
        display: none;
    }

    #slideAdminModal .slide-height-input-group {
        flex-wrap: wrap;
    }

    #slideAdminModal .slide-height-input-group #slideGroupHeightMode {
        flex: 0 0 100%;
        width: 100%;
        border-radius: 0.375rem !important;
        margin-bottom: 0.35rem;
    }

    #slideAdminModal .slide-height-input-group .height-input-item {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }

    #slideAdminModal .slide-item {
        padding-top: 0.75rem !important;
    }

    #slideAdminModal .slide-item .slide-item-meta {
        line-height: 1.3;
    }

    #slideAdminModal .slide-item .slide-item-meta .badge {
        font-size: 0.68rem;
        font-weight: 500;
        white-space: normal;
        text-align: left;
    }

    #slideAdminModal .slide-item-toolbar {
        width: 100%;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid #f1f3f5;
    }

    #slideAdminModal .slide-thumb-row {
        width: 100%;
        gap: 0.75rem !important;
    }

    #slideAdminModal .slide-thumb-col {
        flex: 1 1 0;
        min-width: 0;
    }

    #slideAdminModal .slide-thumb-col .preview-pc,
    #slideAdminModal .slide-thumb-col .preview-mo {
        width: 100% !important;
        max-width: none !important;
        height: 72px !important;
    }

    #slideAdminModal .slide-field-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    #slideAdminModal .slide-field-row-split {
        gap: 0.75rem;
    }

    #slideAdminModal .slide-field-group {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
    }

    #slideAdminModal .slide-duration-group {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #slideAdminModal .slide-duration-group .slide-duration-input-wrap {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    #slideAdminModal .slide-field-label {
        width: auto !important;
        font-size: 0.78rem !important;
        font-weight: 700;
        color: #495057;
        margin: 0;
    }

    #slideAdminModal .slide-schedule-row {
        align-items: flex-start !important;
    }

    #slideAdminModal .slide-schedule-row .slide-schedule-toggle-wrap {
        padding-top: 0.15rem;
    }

    #slideAdminModal .slide-date-input {
        width: 100% !important;
        max-width: none !important;
    }

    #slideAdminModal .slide-date-container > div {
        width: 100%;
    }

    #slideAdminModal .alert.fs-7 {
        font-size: 0.78rem !important;
        line-height: 1.45;
    }
}

@media (min-width: 768px) {
    #slideAdminModal .slide-field-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    #slideAdminModal .slide-field-row-split {
        gap: 0.55rem;
    }

    #slideAdminModal .slide-field-group {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    #slideAdminModal .slide-duration-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: auto;
        min-width: max-content;
        flex-shrink: 0;
        gap: 0.35rem;
    }

    #slideAdminModal .slide-duration-group .slide-field-label {
        width: auto;
        white-space: nowrap;
    }

    #slideAdminModal .slide-duration-group .slide-duration-input-wrap {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        flex-wrap: nowrap;
        flex-shrink: 0;
        white-space: nowrap;
    }

    #slideAdminModal .slide-duration {
        width: 52px !important;
        min-width: 52px !important;
        flex-shrink: 0;
    }

    #slideAdminModal .slide-schedule-row {
        flex-wrap: wrap;
    }

    #slideAdminModal .slide-field-label {
        width: 73px;
        flex-shrink: 0;
        font-size: 0.85rem;
        font-weight: 700;
        color: #212529;
        margin: 0;
    }

    #slideAdminModal .slide-field-row-split > .slide-title {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ==========================================================================
   돌림배너 관리 모달 — PC(데스크톱) 레이아웃
   ========================================================================== */
@media (min-width: 1200px) {
    #slideAdminModal #slideSortableList {
        overflow-x: hidden;
    }

    #slideAdminModal .min-w-0 {
        min-width: 0 !important;
    }

    #slideAdminModal .slide-item {
        overflow: hidden;
    }

    #slideAdminModal .slide-item-body {
        min-width: 0;
        flex-wrap: nowrap;
    }

    #slideAdminModal .slide-item-preview-cluster {
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        max-width: 320px;
    }

    #slideAdminModal .slide-item-toolbar {
        width: auto;
        border-bottom: none;
        padding-bottom: 0;
        justify-content: center;
    }

    #slideAdminModal .slide-thumb-row {
        flex-shrink: 0;
    }

    #slideAdminModal .slide-thumb-col .preview-pc {
        width: 160px !important;
        height: 64px !important;
    }

    #slideAdminModal .slide-thumb-col .preview-mo {
        width: 64px !important;
        height: 64px !important;
    }

    #slideAdminModal .slide-item-fields {
        min-width: 0;
        flex: 1 1 auto;
    }

    #slideAdminModal .slide-item-fields .form-control:not(.slide-duration) {
        min-width: 0;
    }

    #slideAdminModal .slide-field-row-split > .slide-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    #slideAdminModal .slide-date-container {
        flex-wrap: wrap;
    }

    #slideAdminModal .slide-date-input {
        width: auto !important;
        flex: 1 1 0;
        min-width: 72px;
        max-width: 130px;
    }

    #slideAdminModal .border-xl-start {
        border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
}