/* ===== mi.com CSS Variables & Base Styles for Banner ===== */
.mi-banner-wrapper {
    --text-base: #191919;
    --text-reverse: #fff;
    --text-primary: #ff6900;
    --site-horizontal-padding: 16px;
    --cardinal-number: 1;
    --outline-color: rgba(26, 115, 232, 0.5);
    font-family: "MI Lan Pro", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

@media screen and (min-width: 721px) {
    .mi-banner-wrapper { --site-horizontal-padding: 48px; }
}
@media screen and (min-width: 1025px) {
    .mi-banner-wrapper { --site-horizontal-padding: 64px; }
}

/* mi-image (picture element) */
.mi-banner-wrapper .mi-image {
    display: block;
    width: 100%;
    height: 100%;
}
.mi-banner-wrapper .mi-image__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* mi-btn styles used in banners */
.mi-banner-wrapper .mi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--btn-border-radius, 12px);
    padding: var(--btn-padding-vertical, 0) var(--btn-padding-horizontal, 24px);
    font-weight: 700;
    transition: background-color 0.2s, opacity 0.2s;
    line-height: 1.4;
    white-space: nowrap;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.mi-banner-wrapper .mi-btn__text {
    display: inline;
}

/* Primary button: --light/--dark = slide theme, button contrasts */
.mi-banner-wrapper .mi-btn--primary {
    background-color: #191919;
    color: #fff;
}
.mi-banner-wrapper .mi-btn--primary:hover {
    background-color: #444;
}
/* Light slide → dark button */
.mi-banner-wrapper .mi-btn--primary.mi-btn--light {
    background-color: #191919;
    color: #fff;
}
.mi-banner-wrapper .mi-btn--primary.mi-btn--light:hover {
    background-color: #444;
}
/* Dark slide → light button */
.mi-banner-wrapper .mi-btn--primary.mi-btn--dark {
    background-color: #fff;
    color: #191919;
}
.mi-banner-wrapper .mi-btn--primary.mi-btn--dark:hover {
    background-color: rgba(255,255,255,0.85);
}

/* Link-style buttons */
.mi-banner-wrapper .mi-btn--link-default {
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mi-banner-wrapper .mi-btn--link-default:hover {
    opacity: 0.7;
}

/* Light slide → dark link text */
.mi-banner-wrapper .mi-btn--light.mi-btn--link-default {
    color: #191919;
}
/* Dark slide → light link text */
.mi-banner-wrapper .mi-btn--dark.mi-btn--link-default {
    color: #fff;
}

/* Price display */
.mi-banner-wrapper .slide__info-group--lower {
    display: grid;
}
.mi-banner-wrapper .slide__info-group--lower strong {
    font-size: var(--font-size-large);
    font-weight: 700;
}
.mi-banner-wrapper .slide__info-group--lower del {
    color: #898989;
    font-size: var(--font-size-small);
}

/* ===== Banner sizing for Minewin container ===== */
/*
 * mi.com uses full-viewport banners with fixed pixel heights.
 * Minewin wraps banners in a max-width:1200px container with padding,
 * so we use aspect-ratio instead to scale gracefully at all widths.
 * We override --banner-height + slide height to use 100% of our container.
 */

/* Force the carousel-banner to use our container's aspect-ratio height,
   not the fixed --banner-height from mi.com CSS. */
.mi-banner-wrapper {
    aspect-ratio: 21 / 9;
}
@media screen and (max-width: 720px) {
    .mi-banner-wrapper {
        aspect-ratio: 3 / 4;
    }
}

/* Override mi.com's fixed slide height */
.mi-banner-wrapper .carousel-banner__slide {
    height: 100% !important;
}

/* Constrain slide__content to fit narrower container */
.mi-banner-wrapper .slide__content {
    z-index: 2;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Desktop: limit info width so text doesn't span full width */
@media screen and (min-width: 721px) {
    .mi-banner-wrapper .slide__info {
        max-width: 45%;
    }

    /* 컨테이너 크기에 맞게 폰트 반응형 조절 + line-clamp 확장 */
    .mi-banner-wrapper .slide__title {
        font-size: clamp(22px, 2.8vw, 36px) !important;
        -webkit-line-clamp: 3 !important;
    }
    .mi-banner-wrapper .slide__subtitle {
        font-size: clamp(14px, 1.5vw, 18px) !important;
        -webkit-line-clamp: 3 !important;
    }
    .mi-banner-wrapper .slide__description {
        font-size: clamp(12px, 1.3vw, 16px) !important;
        -webkit-line-clamp: 3 !important;
    }
}

/* slide__background: keep absolute fill */
.mi-banner-wrapper .slide__background {
    z-index: 0 !important;
}

/* banner-slide (Minewin wrapper per slide) */
.banner-slide {
    position: relative;
}

.banner-slide > .carousel-banner__slide {
    height: 100%;
    position: relative;
    overflow: hidden;
}