/* Keep the decorative frame outside Swiper's measured, clipped viewport. */
.brandstory-frame { background:#000; padding:clamp(16px,2vw,32px); }
.brandstory.swiper-container {
    box-sizing:border-box;
    height:clamp(440px,68vh,720px);
    height:clamp(440px,68svh,720px);
    max-height:none;
    padding:0;
    overflow:hidden;
}
.brandstory .swiper-wrapper { height:100%; padding:0; }
.brandstory .box {
    box-sizing:border-box;
    width:100%;
    height:100%;
    display:grid;
    align-items:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.brandstory .box::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.28) 50%,rgba(0,0,0,.12));
    pointer-events:none;
}
.brandstory .box .text,
html:not([lang="ko"]) .brandstory .box .text {
    position:relative;
    box-sizing:border-box;
    width:100%;
    margin:0;
    padding:24px clamp(24px,4vw,64px);
    overflow-wrap:anywhere;
}
.brandstory .box .text h1,
html:not([lang="ko"]) .brandstory .box .text h1 {
    font-size:clamp(23px,3vw,40px);
    line-height:1.25;
    letter-spacing:clamp(1px,.3vw,4px);
}
.brandstory .box .text h2 { line-height:1.5; }
.brandstory .box .text p { line-height:1.55; }
.brandstory .swiper-pagination { right:12px!important; }
.brandstory .swiper-pagination-bullet:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* Keep pagination in normal flow below the tallest caption. The more generic
   Swiper reset and tablet/mobile rules previously removed the bottom space. */
.galnc_box.swiper-container {
    box-sizing:border-box;
    height:auto!important;
    padding:clamp(24px,4vw,50px) 0 clamp(40px,5vw,72px);
}
.galnc_box .swiper-wrapper { height:auto; align-items:stretch; }
.galnc_box .box { height:auto; min-width:0; }
.galnc_box .box h1 { padding-left:14px; padding-right:14px; line-height:1.3; overflow-wrap:anywhere; }
.galnc_box .box p { padding:0 14px; line-height:1.55; overflow-wrap:anywhere; }
.galnc_box .swiper-pagination {
    position:relative;
    left:auto;
    bottom:auto!important;
    transform:none;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    margin:28px auto 0;
}
@media(max-width:767px) {
    .brandstory-frame { padding:12px 12px 20px; }
    .brandstory.swiper-container {
        height:clamp(420px,66vh,580px);
        height:clamp(420px,66svh,580px);
        padding:0;
        touch-action:pan-y;
    }
    .brandstory .box .text,
    html:not([lang="ko"]) .brandstory .box .text { padding:32px 22px 76px; }
    .brandstory .box .text h1,
    html:not([lang="ko"]) .brandstory .box .text h1 {
        font-size:clamp(24px,6vw,32px);
        line-height:1.2;
        letter-spacing:.5px;
        text-wrap:balance;
    }
    .brandstory .box .text h2 { margin-top:10px; font-size:12px; letter-spacing:.7px; text-wrap:balance; }
    .brandstory .box .text img { padding:24px 0; }
    .brandstory .box .text p { font-size:14px; opacity:.95; text-wrap:balance; }
    .brandstory .swiper-pagination {
        top:auto!important;
        bottom:18px!important;
        left:0!important;
        right:0!important;
        width:100%;
        transform:none!important;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .brandstory .swiper-pagination-bullet {
        position:relative;
        width:28px;
        height:36px;
        margin:0!important;
        border:0;
        border-radius:0;
        background:transparent;
    }
    .brandstory .swiper-pagination-bullet::before {
        content:"";
        position:absolute;
        left:50%;
        top:50%;
        width:7px;
        height:7px;
        border-radius:10px;
        background:rgba(255,255,255,.5);
        transform:translate(-50%,-50%);
        transition:width .2s,background .2s;
    }
    .brandstory .swiper-pagination-bullet-active::before { width:22px; background:#fff; }
    .galnc_box .swiper-pagination { margin-top:24px; }
}
@media(max-width:767px) and (max-height:500px) {
    .brandstory.swiper-container { height:340px; }
    .brandstory .box .text { padding-top:20px; padding-bottom:60px; }
    .brandstory .box .text img { padding:14px 0; }
}