/* Main Slide Container */
.law-main-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.law-main-swiper {
    width: 100%;
    height: 600px;
    /* Adjust height as needed */
    position: relative;
}

/* Flicker Fix: Fade in wrapper content safely */
.law-main-swiper .swiper-wrapper {
    opacity: 0;
    animation: law-fade-in 0.5s 0.2s forwards;
}

.law-main-swiper.swiper-initialized .swiper-wrapper {
    opacity: 1;
    animation: none;
}

@keyframes law-fade-in {
    to {
        opacity: 1;
    }
}

/* Layout Modes */
.law-main-swiper.full {
    max-width: 100%;
}

.law-main-swiper.restricted {
    max-width: 1200px;
    margin: 0 auto;
}

/* Slide Item */
.swiper-slide {
    position: relative;
    overflow: hidden;
    width: calc(100% - 300px) !important;
    /* 150px visible on each side */
    /* 150px visible on each side */
    height: 100%;
}

/* Single Slide Override */
.law-main-swiper.single-slide .swiper-slide {
    width: 100% !important;
}

/* Background Image  */
.slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease-out;
    /* For Hover Zoom Effect */
}

/* Hover Zoom Effect: Mouse over the slider triggers zoom on active slide's image */
.law-main-swiper:hover .swiper-slide-active .slide-bg {
    transform: scale(1.05);
}

/* Overlay: Black background fade-in (Removed full screen, now box based) */
.slide-overlay {
    display: none;
}

/* Content Container (The Black Box) */
.slide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    /* Box Styles */
    width: 600px;
    height: 350px;
    background-color: rgba(0, 0, 0, 0.6);
    /* Semi-transparent black */
    padding: 0 80px;
    /* Left/Right padding (PC: 80px) */
    box-sizing: border-box;
    /* Include padding in width */

    /* Flex Center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    z-index: 2;
    color: #fff;

    /* Animation Initial State */
    opacity: 0;
    transition: opacity 1s ease;

    /* Vertical Adjustment */
    margin-top: -25px;
}

.swiper-slide.animate-active .slide-content {
    opacity: 1;
}

/* Pagination Styles */
.swiper-pagination {
    bottom: 40px !important;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ccc;
    opacity: 1;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    width: 30px;
    border-radius: 10px;
    background: #ff4d4f;
    /* Red Pill */
}

/* Fade Elements (Text & Button) */
/* Reset transform for cleaner box fade, or keep it inside */
.fade-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 0.3s;
    /* Delay slightly after box appears */
}

.swiper-slide.animate-active .fade-element {
    opacity: 1;
    transform: translateY(0);
}

.slide-big-text {
    font-size: 36px;
    /* Adjusted fore box size */
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    top: -20px;
    /* Move Title UP */
    line-height: 1.3;
    word-break: keep-all;
    /* Korean word break */

    /* Limit to 2 lines */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slide-small-text {
    font-size: 17px;
    margin-bottom: 10px;
    position: relative;
    top: -25px;
    /* Move Small Text UP */
    line-height: 1.6;
    word-break: keep-all;

    /* Limit to 3 lines */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Button */
.slide-btn {
    display: inline-block;
    padding: 12px 30px;
    position: relative;
    top: 1px;
    /* Move Button DOWN */
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: background 0.3s, color 0.3s;
}

/* Fix for button fade animation conflict */
.slide-btn.fade-element {
    transition: background 0.3s, color 0.3s, opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.slide-btn:hover {
    background: #fff;
    color: #000;
}

/* Navigation Arrows */
/* Navigation Arrows */
.law-nav-btn {
    color: #fff !important;
    opacity: 0;
    transition: opacity 0.3s, background 0.3s;
    width: 150px;
    height: 180px;
    background: rgba(0, 0, 0, 0.3);
    /* Default transparency */
    border-radius: 0;
    /* Rectangular */

    /* Center Arrow */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Vertical Center */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}

/* Align Nav Buttons to Edges */
.swiper-button-prev {
    left: 0 !important;
}

.swiper-button-next {
    right: 0 !important;
}

.law-nav-btn::after {
    font-size: 30px !important;
    /* Larger arrow icon */
    font-weight: bold;
}

/* Show Nav on Hover */
.law-main-swiper:hover .law-nav-btn {
    opacity: 1;
}

/* Hover Effect: Darker but still transparent */
.law-nav-btn:hover {
    background: rgba(51, 51, 51, 0.7) !important;
    /* #333 with transparency */
}

/* Responsive Overrides */
@media (max-width: 768px) {

    /* Mobile Always Full Width setup */
    .swiper-slide {
        width: 100% !important;
    }

    .law-main-swiper.restricted {
        max-width: 100%;
    }

    .law-main-slider-wrapper {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    /* Mobile Content Box Override */
    .slide-content {
        width: 400px;
        max-width: 90%;
        /* Safety for small device */
        height: 350px;
        max-width: 90%;
        /* Safety for small device */
        height: 350px;
        padding: 30px 40px;
        /* Mobile Padding: 50px */
    }

    /* Mobile Button Full Width */
    .law-main-swiper .slide-btn {
        width: 100%;
        display: block;
        box-sizing: border-box;
        text-align: center;
    }

    .slide-big-text {
        font-size: 28px;
        margin-bottom: 15px;
        text-align: left;
        /* Left align title */
        width: 100%;
        padding-left: 27px;
        /* Left indent only */
        padding-right: 0;
        /* Maximize right space */
        box-sizing: border-box;
        word-break: break-all;
        /* Allow breaking words to fill line */

        /* Remove Line Limit on Mobile */
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .slide-small-text {
        font-size: 16px;
        text-align: left;
        margin-bottom: 20px;
        padding-left: 20px;
        /* 20px -> 17px (Visual Alignment Fix) */
        /* 왼쪽 여백 추가 */
        padding-right: 20px;
        /* 오른쪽도 균형 맞추기 위해 추가 (선택) */
        box-sizing: border-box;

        /* Limit Mobile Small Text to 3 lines */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .slide-btn {
        top: 1px;
    }

    /* Mobile Pagination Position */
    .swiper-pagination {
        bottom: 20px !important;
        /* 원하는 숫자로 변경 */
    }

    .law-main-swiper {
        height: 500px;
    }

    /* Hide Nav Buttons on Mobile */
    .law-nav-btn {
        display: none !important;
    }
}