/* popUp.css — optimized with 4-space spaces */

/* ==============================
   Design tokens (필요시 여기만 조정)
============================== */
:root {
    --popup-w-max: 156rem;
    --popup-w-min: 39rem;
    --popup-h-slide: 55rem;

    --track-3: 128rem; /* popSlide */
    --track-2: 84rem;  /* popTwo   */
    --track-1: 40rem;  /* popOne   */

    --gap: 2rem;
    --radius: 1rem;
    --shadow: none;

    --ink: #000;
    --ink-muted: #aaa;
    --ink-strong: #fff;
    --brand: #ef7a00;

    --btn-h: 6.2rem;
    --btn-w: 6.2rem;

    --close-right-lg: 15rem;
    --close-right-md: 5rem;
}

/* ==============================
   Modal
============================== */
.ui.basic.large.modal.popupModal {
    inline-size: clamp(var(--popup-w-min), 90vw, var(--popup-w-max));
    text-align: center;
}

.ui.basic.large.modal.popupModal .header {
    position: relative;
    margin-block-end: var(--gap);
}

.ui.basic.large.modal.popupModal h2 {
    display: inline-block;
    margin-inline-end: 3rem;
    font-weight: 700;
    color: var(--ink-strong);
}

/* close button */
.ui.basic.large.modal.popupModal .header .modalClose {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--close-right-lg);
    transform: translateY(-50%);
    inline-size: 3.2rem;
    block-size: 3.2rem;
    display: block;
    background: center / contain no-repeat url(../../main/images/close_icon.png);
}

.ui.basic.large.modal.popupModal .content {
    margin-block-end: var(--gap);
}

/* footer actions */
.ui.basic.large.modal.popupModal .actions {
    display: block;
    text-align: center;
    font-size: 1.9rem;
    font-weight: 500;
}
.ui.basic.large.modal.popupModal .actions .k-checkbox {
    inline-size: 2.6rem;
    block-size: 2.6rem;
    margin-inline-end: 0.3rem;
}
.ui.basic.large.modal.popupModal .actions .k-checkbox::before {
    inline-size: 2.6rem;
    block-size: 2.6rem;
    font-size: 2.6rem;
    border-radius: 0;
}

/* ==============================
   Tracks (공통 규칙)
============================== */
.ui.basic.large.modal.popupModal .popSlide,
.ui.basic.large.modal.popupModal .popTwo,
.ui.basic.large.modal.popupModal .popOne {
    padding-block-start: 1rem;
    overflow: hidden;
    margin: 0 auto;
}

.ui.basic.large.modal.popupModal .popSlide { inline-size: min(100%, var(--track-3)); }
.ui.basic.large.modal.popupModal .popTwo  { inline-size: min(100%, var(--track-2)); }
.ui.basic.large.modal.popupModal .popOne  { inline-size: min(100%, var(--track-1)); }

/* slide card */
.ui.basic.large.modal.popupModal .popSlide .swiper-slide,
.ui.basic.large.modal.popupModal .popTwo .swiper-slide,
.ui.basic.large.modal.popupModal .popOne .swiper-slide {
    inline-size: 40rem;
    block-size: var(--popup-h-slide);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s ease-in-out;
    cursor: pointer;
}

.ui.basic.large.modal.popupModal .popSlide .swiper-slide:hover,
.ui.basic.large.modal.popupModal .popTwo .swiper-slide:hover,
.ui.basic.large.modal.popupModal .popOne .swiper-slide:hover {
    transform: translateY(-0.8rem);
}

/* image wrapper */
.ui.basic.large.modal.popupModal .img {
    position: relative;
    display: block;
    inline-size: 100%;
    block-size: var(--popup-h-slide);
}
.ui.basic.large.modal.popupModal .img img {
    position: absolute;
    inset: 50% 0 0 50%;
    transform: translate(-50%, -50%);
    inline-size: 100%;
    transition: transform .3s ease-in-out;
    z-index: 1;
}

/* navigation buttons */
.ui.basic.large.modal.popupModal .popSlide .slideCon .swiper-button-next,
.ui.basic.large.modal.popupModal .popSlide .slideCon .swiper-button-prev {
    inline-size: var(--btn-w);
    block-size: var(--btn-h);
    border-radius: 50%;
    background-color: #fff;
    line-height: var(--btn-h);
    text-align: center;
    box-shadow: var(--shadow);
}
.ui.basic.large.modal.popupModal .popSlide .slideCon .swiper-button-next:after,
.ui.basic.large.modal.popupModal .popSlide .slideCon .swiper-button-prev:after {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--ink);
}
.ui.basic.large.modal.popupModal .popSlide .slideCon .swiper-button-next:after { content: 'next'; }
.ui.basic.large.modal.popupModal .popSlide .slideCon .swiper-button-prev:after { content: 'prev'; }

/* pagination (fraction) */
.ui.basic.large.modal.popupModal .swiper-pagination-fraction {
    position: static;
    display: inline-block;
    inline-size: 10rem;
    block-size: 5.4rem;
    border-radius: 3rem;
    background-color: #fff;
    text-align: center;
    padding: 1.5rem;
    font-size: 1.8rem;
    line-height: 2.4rem;
    color: var(--ink-muted);
    vertical-align: .7rem;
}
.ui.basic.large.modal.popupModal .swiper-pagination-fraction .swiper-pagination-current {
    margin: 0 .3rem;
    font: 700 1.8rem/2.4rem inherit;
    color: var(--brand);
    display: inline-block;
}
.ui.basic.large.modal.popupModal .swiper-pagination-fraction .swiper-pagination-total {
    margin: 0 .3rem;
    font: 700 1.8rem/2.4rem inherit;
    color: var(--ink-muted);
    display: inline-block;
}

/* action button */
.ui.basic.large.modal.popupModal .actions .ui.button {
    position: relative;
    width: auto;
    margin-inline-start: 3rem !important;
    padding: 1.5rem 5rem 1.5rem 3rem !important;
    border-radius: 3rem;
    font-size: 1.6rem !important;
    background-color: var(--brand);
    color: #fff !important;
}
.ui.basic.large.modal.popupModal .actions .ui.button::before {
    content: "X";
    position: absolute;
    inset-inline-end: 3rem;
    inset-block-start: 1.5rem;
    color: #fff;
}

.ui.basic.large.modal.popupModal .actions .k-checkbox:checked, .k-checkbox.k-checked {
    border-color: var(--brand);
    color: #fff;
    background-color: var(--brand);
}

/* ==============================
   Breakpoints
============================== */
@media (max-width: 1419px) {
    .ui.basic.large.modal.popupModal { inline-size: clamp(var(--popup-w-min), 90vw, 92rem); }
    .ui.basic.large.modal.popupModal .popSlide { inline-size: calc(100% - 5rem); }
}

@media (max-width: 1023px) {
    .ui.basic.large.modal.popupModal { inline-size: clamp(var(--popup-w-min), 90vw, 68rem); }
    .ui.basic.large.modal.popupModal .header .modalClose { inset-inline-end: var(--close-right-md); }
    .ui.basic.large.modal.popupModal .popSlide,
    .ui.basic.large.modal.popupModal .popTwo { inline-size: var(--track-1); }
}

@media (max-width: 767px) {
    .ui.basic.large.modal.popupModal { inline-size: var(--popup-w-min); }
    .ui.basic.large.modal.popupModal .header { margin-block-end: 0; }
    .ui.basic.large.modal.popupModal .header .modalClose { inset-inline-end: var(--close-right-md); }
    .ui.basic.large.modal.popupModal .content { padding: 0; margin-block-end: 0; }

    .ui.basic.large.modal.popupModal .popSlide,
    .ui.basic.large.modal.popupModal .popTwo,
    .ui.basic.large.modal.popupModal .popOne { inline-size: 100%; }

    .ui.basic.large.modal.popupModal .popSlide .swiper-slide,
    .ui.basic.large.modal.popupModal .popTwo .swiper-slide,
    .ui.basic.large.modal.popupModal .popOne .swiper-slide {
        inline-size: 100% !important;
        block-size: auto !important;
        transform: none !important;
    }

    .ui.basic.large.modal.popupModal .img { block-size: auto; }
    .ui.basic.large.modal.popupModal .img img {
        position: static;
        transform: none;
    }

    .ui.basic.large.modal.popupModal h2 { display: block; margin: 0 0 1rem 0; }

    .ui.basic.large.modal.popupModal .popSlide .slideCon .swiper-button-next,
    .ui.basic.large.modal.popupModal .popSlide .slideCon .swiper-button-prev { display: none; }

    .ui.basic.large.modal.popupModal .actions { font-size: 1.5rem; }
    .ui.basic.large.modal.popupModal .swiper-pagination-fraction {
        inline-size: 10rem; block-size: 5rem; padding: 1.2rem;
        border-radius: 99.9rem; font-size: 1.4rem; line-height: 2.4rem; vertical-align: 0;
    }
    .ui.basic.large.modal.popupModal .actions .ui.button {
        margin-inline-start: 1rem !important;
        padding: 1.5rem 4rem 1.5rem 2rem !important;
        border-radius: 99.9rem;
        font-size: 1.4rem !important;
    }
    .ui.basic.large.modal.popupModal .actions .ui.button::before { inset-inline-end: 2rem; }
}