/* Improved Full CSS - Final Version with Image Rounding and Responsive Adjustments for Title/Nav Buttons */

#toppop {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.74);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    z-index: 101;
    padding: 20px 0;
    box-sizing: border-box;
}
#toppop.after-init {
    display: none;
}
#toppop.show {opacity: 1;}
#toppop.hide {opacity: 0;}

.toppop-swiper {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-radius: 10px; /* 팝업 전체의 라운드 */
    padding: 20px;
    box-sizing: border-box;
    max-height: calc(100vh - 40px); /* 팝업 전체의 최대 높이 */
    overflow: visible; /* 좌우 버튼 잘림 방지 */
    z-index: 102;
}
.toppop-swiper button {
    background: none;
    border: 0;
    position: relative;
    cursor: pointer;
    padding: 0;
}
.toppop-swiper button:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;left: 0;right: 0;bottom: 0;
    margin: auto;
}

.toppop-swiper .title {
    color: #fff;
    font-size: 2em;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
    flex-shrink: 0; /* 타이틀 높이 고정 */
}
.toppop-swiper .title span {font-size: 0.8em;font-weight: 400;}

.toppop-swiper-inner {
    position: relative;
    width: 100%;
    overflow: visible !important; /* 내부 요소(버튼 등)가 잘리지 않도록 */
    flex-grow: 1; /* 가변 높이 영역 */
    min-height: 200px; /* 최소 높이 보장 */
    display: flex;
    align-items: stretch; /* 자식 요소가 교차축으로 늘어나도록 */
    justify-content: center;
}

.toppop-swiper-slide { /* Swiper 인스턴스 컨테이너 (.swiper-container 클래스와 함께 사용됨) */
    width: 100%;
    height: 100%; /* 부모(.toppop-swiper-inner)의 높이를 채우도록 시도 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.toppop-swiper-slide .swiper-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* 개별 슬라이드 아이템 (.swiper-slide) */
.toppop-swiper-slide .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-height: 450px; /* 슬라이드 최대 높이 제한 */
    box-sizing: border-box;
    position: relative;
    overflow: hidden; /* 내부 이미지가 이 영역을 넘어가면 잘림 */
    border-radius: 20px;
}

/* 이미지를 직접 감싸는 컨테이너 (<a> 또는 <div class="img">) */
.toppop-swiper-slide .swiper-slide > a,
.toppop-swiper-slide .swiper-slide > div.img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; /* 부모(.swiper-slide)의 실제 높이를 따름 */
    max-height: 100%; /* 부모(.swiper-slide)의 max-height 제한을 반영 */
    overflow: hidden;
    border-radius: inherit;
    box-sizing: border-box;
}

/* 이미지 자체 스타일 */
.toppop-swiper-slide img.responsive-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;       /* 부모(a 또는 div.img)의 높이를 100% 사용하려고 시도 */
    max-width: 100% !important;
    max-height: 450px !important;   /* 이미지 자체의 최대 높이를 450px로 직접 제한 */
    object-fit: fill !important;    /* 비율 상관없이 주어진 공간(너비100%, 최대높이450px)을 채움 */
    border-radius: 0;
    position: relative;
}

.toppop-swiper-slide .no-data {font-weight: 300;color: #fff;text-align: center;width: 100%;}

.toppop-swiper-ctrls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}
.toppop-swiper-ctrls .data-dots {text-align: center;}

.toppop-swiper-nav {
    position: absolute !important;
    top: 50% !important;
    left: 0;
    right: 0;
    height: 0;
    z-index: 20 !important;
}
.toppop-swiper-nav button {
    width: 40px; height: 40px; position: absolute; top: 50%; transform: translateY(-50%);
    background: #ffffff !important; border-radius: 50%; pointer-events: auto !important;
    transition: opacity 0.2s ease; z-index: 1;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0.8;
}
.toppop-swiper-nav button:hover { opacity: 1.0; }
.toppop-swiper-nav button:after {
    content: ''; display: block; position: absolute; top: 0;left: 0;right: 0;bottom: 0;
    margin: auto; width: 100%; height: 100%; border-width: 2px; border-style: solid;
    border-color: transparent #333333 #333333 transparent !important;
    box-sizing: border-box; width: 10px; height: 10px;
}
.toppop-swiper-nav .btn-prev { left: -50px; }
.toppop-swiper-nav .btn-prev:after {transform: rotate(135deg) translate(-25%, -25%);}
.toppop-swiper-nav .btn-next { right: -50px; }
.toppop-swiper-nav .btn-next:after {transform: rotate(-45deg) translate(-25%, -25%);}
.toppop-swiper-nav .swiper-button-disabled { opacity: 0.2 !important; cursor: default !important; pointer-events: none !important; }

.toppop-swiper-dots {display: none;}
.toppop-swiper-dots .swiper-pagination-bullet:after {background: #fff;border-radius: 50%;width: 10px;height: 10px;opacity: .5;transition: .35s;}
.toppop-swiper-dots .swiper-pagination-bullet-active:after {opacity: 1;}

.toppop-swiper-close {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin: auto;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
.toppop-swiper-close .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px; /* 아이콘 em 단위의 기준이 됨 */
    font-weight: 500;
    min-height: 44px;
    height: auto;
    padding: 8px 20px;
    border-radius: 22px;
    margin: 0;
    border: 1px solid transparent;
    background-color: #25418a;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.35;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.toppop-swiper-close .btn:hover {
    opacity: 0.85;
}
.toppop-swiper-close .btn.count {
    border-color: transparent;
    pointer-events: none;
    padding: 8px 18px;
    height: 44px;
}
.toppop-swiper-close .count em {color: #ffc000; font-style: normal; font-weight: 600;}

.toppop-swiper-close .btn-stop,
.toppop-swiper-close .btn-play {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
}

/* 첫 번째 세로 막대 (왼쪽) */
.toppop-swiper-close .btn-stop:before {
    content: '';
    display: block;
    position: absolute;
    background-color: #fff;
    width: 0.27em;
    height: 1.07em;
    left: -7px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* 두 번째 세로 막대 (오른쪽) */
.toppop-swiper-close .btn-stop:after {
    content: '';
    display: block;
    position: absolute;
    background-color: #fff;
    width: 0.27em;
    height: 1.07em;
    left: 7px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* 재생 아이콘 */
.toppop-swiper-close .btn-play:before {
    content: ''; display: block; position: absolute; box-sizing: border-box;
    width: 0; height: 0; border-style: solid;
    border-width: 0.53em 0 0.53em 0.8em;
    border-color: transparent transparent transparent #fff;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
}
.toppop-swiper-close .btn.close {
    height: 44px;
}
.toppop-swiper-close .btn.period {
    padding: 8px 18px;
    white-space: normal !important;
    text-align: center;
    height: auto;
    min-height: 44px;
    max-width: 230px;
    flex-grow: 1;
    flex-shrink: 1;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.toppop-swiper-close .btn.period:hover {
    opacity: 0.85;
}
.toppop-swiper-close .btn.period .blt:before,
.toppop-swiper-close .btn.period .blt:after {
    background: #fff;
}
.toppop-swiper-close .blt {
    display: inline-block;
    margin-left: 8px;
    width: 14px; height: 14px;
    position: relative;
    vertical-align: middle;
}
.toppop-swiper-close .blt:before,
.toppop-swiper-close .blt:after {
    content: ''; display: block; background: #fff;
    width: 100%; height: 2px;
    position: absolute; top: 50%; left: 0;
    transform-origin: center;
}
.toppop-swiper-close .blt:before { transform: translateY(-50%) rotate(45deg); }
.toppop-swiper-close .blt:after { transform: translateY(-50%) rotate(-45deg); }

/* Responsive Adjustments */
@media (max-width: 1399px){
    .toppop-swiper {width: 90%;}
}
@media (max-width: 1024px){
    .toppop-swiper-close .btn {font-size: 14px; min-height: 40px; padding: 6px 15px; }
    .toppop-swiper-close .btn.period { max-width: 200px; min-height: 40px;}
    .toppop-swiper-close .btn-stop, .toppop-swiper-close .btn-play { width:40px; min-width:40px; height:40px;}
    .toppop-swiper-close .btn.count,
    .toppop-swiper-close .btn.close {
        height: 40px;
    }
    .toppop-swiper-close .blt {margin-left: 8px; width:12px; height:12px;}
    .toppop-swiper-ctrls {margin-top: 15px;}
    .toppop-swiper-nav .btn-prev { left: -30px; }
    .toppop-swiper-nav .btn-next { right: -30px; }
}
@media (max-width: 768px){
    .toppop-swiper { padding: 15px; width: 95%; }
    .toppop-swiper .title {font-size: 1.6em;margin-bottom: 15px;}
    .toppop-swiper-ctrls {margin-top: 15px;}
    .toppop-swiper-close { gap: 8px; }
    .toppop-swiper-close .btn { font-size: 13px; min-height: 38px; padding: 6px 12px; }
    .toppop-swiper-close .btn.period { max-width: 100%; min-height: 38px; flex-grow:0; width: calc(100% - 10px); margin-top: 5px; order: 5; }
    .toppop-swiper-close .btn-stop, .toppop-swiper-close .btn-play { width:38px; min-width:38px; height:38px;}
    .toppop-swiper-close .btn.count,
    .toppop-swiper-close .btn.close {
        height: 38px;
    }
    .toppop-swiper-close .blt { width:10px; height:10px; margin-left:5px;}
    .toppop-swiper-nav button {
        width: 36px;height: 36px;
        opacity: 0.7;
    }
    .toppop-swiper-nav button:after {
        width: 8px; height: 8px;
    }
    .toppop-swiper-nav .btn-prev {left: 10px;}
    .toppop-swiper-nav .btn-next {right: 10px;}
}
@media (max-width: 480px){
    .toppop-swiper { padding: 10px; }
    .toppop-swiper .title {font-size: 1.4em;margin-bottom: 10px;}
    .toppop-swiper-ctrls {margin-top: 10px;}
    /*.toppop-swiper-close .count {display: none;}*/
    .toppop-swiper-close .btn {font-size: 12px; padding: 4px 10px; min-height: 36px;}
    .toppop-swiper-close .btn.period {
        padding: 6px 8px;
        min-height:36px;
        max-width: 100%; width: 100%;
    }
    .toppop-swiper-close .btn-stop, .toppop-swiper-close .btn-play { width:36px; min-width:36px; height:36px;}
    .toppop-swiper-close .btn.close {
        height: 36px;
    }
    .toppop-swiper-close .blt {margin-left: 5px; width:10px; height:10px;}
}

/* Layer Pop Styles - Retained (변경 없음) */
#layer-pop {display: none;align-items: center;background: rgba(0,0,0,.5);opacity: 0;position: fixed;top: 0;left: 0;width: 100%;height: 100%;transition: opacity .35s;z-index: 101;}
#layer-pop.show {display: flex;}
#layer-pop.show.stable {opacity: 1;}
#layer-pop.hide {opacity: 0;}
#layer-pop-wrap {display: flex;flex-direction: column;background: #fff;border: 1px solid #191919;box-sizing: border-box;margin: 0 auto;padding: 58px 60px 0;position: relative;}
#layer-pop-wrap:focus { outline: none; }
#layer-pop-head .title {color: #191919;font-size: 1.556em;font-weight: 700;margin-bottom: 19px;line-height: 1.25;padding-right: 70px;}
#layer-pop-cont {flex: 1 1 100%;margin: 0 -60px;overflow-y: auto;padding: 0 60px 58px;}
#layer-pop-close {background: #238ee0;border: none;border-radius: 50%;position: absolute;top: 0;right: 0;margin: 50px 60px;width: 40px;height: 40px;}
#layer-pop-close:before,
#layer-pop-close:after {content: '';display: block;background: #fff;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 20px;height: 1px;}
#layer-pop-close:before {transform: rotate(45deg);}
#layer-pop-close:after {transform: rotate(-45deg);}

@media all and (max-width:1199px){
	#layer-pop-wrap {padding: 30px 30px 0;width: 100% !important;}
	#layer-pop-head .title {font-size: 1.356em;padding-right: 35px;}
	#layer-pop-cont {margin: 0 -30px;padding: 0 30px 30px;}
	#layer-pop-close {margin: 25px 30px;width: 30px;height: 30px;}
	#layer-pop-close:before,
	#layer-pop-close:after {width: 16px;}
}
@media all and (max-width:640px){
    .opLayerPop {width: 100% !important;height: fit-content !important;left: 0 !important;padding-bottom: 30px;}
	.opLayerPop-layer {margin-top: 0;}
	.opLayerPop-layer img {display: block;width: 100%;}
	.opLayerPop-btns {height: 30px;}
	.opLayerPop-btns .btn-close span {font-size: 14px}
	#layer-pop-wrap {padding: 20px 15px 0;}
	#layer-pop-cont {margin: 0 -15px;padding: 0 15px 20px;}
	#layer-pop-close {margin: 17px 15px;}
}

.blind {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    text-indent: -9999em;
    font-size: 0px;
    line-height: 0;
    z-index: -1;
}

/* 네비게이션 버튼 내 .blind 클래스에 대한 명시도 강화 (추가된 부분) */
.toppop-swiper-nav button .blind {
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    display: inline-block !important;
    text-indent: -9999em !important;
    font-size: 0px !important;
    line-height: 0 !important;
    z-index: -1 !important;
}

/* 슬라이드가 하나일 때 또는 비활성화 시 네비게이션 버튼 숨김 (변경 없음) */
.toppop-swiper-inner:has(.swiper-wrapper > .swiper-slide:only-child) .toppop-swiper-nav {display: none !important;}
.toppop-swiper-nav .btn-prev.swiper-button-disabled,
.toppop-swiper-nav .btn-next.swiper-button-disabled {
    display: none !important;
}