@charset "UTF-8";

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#seats-wrap {
    --seats-page-pad-top: clamp(2rem, 1.543rem + 0.714vw, 3.2rem);
    --seats-board-gap: var(--fluid-space-2xl);
    --seats-info-gap: clamp(2.8rem, 1.429rem + 2.143vw, 4rem);
    --seat-map-pad: var(--fluid-card-pad);
    --seat-map-panel-pad-y: clamp(2rem, 1.086rem + 1.429vw, 2.8rem);
    --seat-map-panel-pad-x: clamp(1.2rem, -0.857rem + 3.214vw, 3rem);
    --seat-row-width: clamp(2.2rem, 1.514rem + 1.071vw, 2.8rem);
    --seat-size: clamp(3.1rem, 2.3rem + 1.25vw, 3.8rem);
    --seat-aisle-width: clamp(1.2rem, 1.057rem + 1.786vw, 2.2rem);
    --seat-gap-x: clamp(0.7rem, 0.357rem + 0.536vw, 1rem);
    --seat-gap-y: clamp(0.8rem, 0.343rem + 0.714vw, 1.2rem);
    --seat-cell-radius: clamp(0.6rem, 0.371rem + 0.357vw, 0.8rem);
    --seat-card-code-size: clamp(5rem, 3.771rem + 2.857vw, 7.4rem);
    --seat-card-track: clamp(5.6rem, 3.771rem + 2.857vw, 7.2rem);
    --seat-card-pad-y: clamp(1.8rem, 1.114rem + 1.071vw, 2.4rem);
    --seat-card-pad-x: clamp(1.8rem, 0.657rem + 1.786vw, 2.8rem);
    --seat-card-gap: clamp(1.4rem, 0.714rem + 1.071vw, 2rem);
    --seat-card-min-h: clamp(9.6rem, 7.086rem + 3.929vw, 11.8rem);
    --seat-card-radius: var(--fluid-radius-lg);
    --seat-code-radius: clamp(1.2rem, 0.743rem + 0.714vw, 1.6rem);
    --seat-badge-gap: var(--fluid-space-2xs);
    --seat-list-gap: var(--fluid-space-lg);
    --seat-list-count-pad: var(--fluid-space-xs);
    --seat-empty-pad-y: var(--fluid-space-xl);
    --seat-empty-pad-x: var(--fluid-space-lg);
    --seat-pass-grid-icon: var(--fluid-icon-md);
    --seat-pass-card-min-h: clamp(11rem, 7.8rem + 5vw, 13.8rem);
    background: var(--color-bg);
    margin: 0;
}

#seats-wrap .inner {
}

.seats-hero .inner {
}

.seats-back {
    display: none;
    align-items: center;
    gap: var(--fluid-space-2xs);
    margin-bottom: var(--fluid-card-pad);
    font-size: var(--fs-18);
    font-weight: 600;
    color: var(--color-primary-50);
}

.seats-kicker {
    margin-bottom: var(--fluid-space-sm);
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--color-point);
}

.seats-hero h1 {
    margin: 0 0 var(--fluid-space-xl);
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    font-weight: 900;
    letter-spacing: 0;
    color: var(--color-primary);
}

.seat-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fluid-space-xs);
}

.seat-tabs {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 0.5rem 0.7rem;
    margin-bottom: var(--fluid-space-xl);
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 1.4rem 4.2rem rgba(20, 20, 43, 0.1);
}

.seat-tabs__thumb {
    position: absolute;
    top: 0.5rem;
    left: 0.7rem;
    height: 3.6rem;
    width: 0;
    background: var(--color-primary);
    border-radius: 999px;
    transition: left 0.25s ease, width 0.25s ease;
    pointer-events: none;
}

.seat-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.6rem;
    padding: 1rem 2.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: 'Pretendard';
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1.6rem;
    color: var(--color-purple);
    cursor: pointer;
    transition: color 0.2s ease;
}

.seat-tab.is-active {
    color: #ffffff;
}

/* label에 이미 공통 .filter-chip이 있음(배경/테두리/active색/아이콘반전은 filter-chip.css 담당).
   여기서는 이 페이지만의 크기 오버라이드만 얹는다. */
.seat-filter__chip {
    min-height: clamp(3.8rem, 3.571rem + 0.357vw, 4rem);
    padding: 0 clamp(1.4rem, 0.943rem + 0.714vw, 1.8rem);
    gap: var(--fluid-space-2xs);
    font-size: var(--fs-14);
    font-weight: 700;
}

.seat-filter__chip span {
    display: inline-flex;
    align-items: center;
    gap: var(--fluid-space-2xs);
}

.seat-filter__chip img {
    inline-size: clamp(1.4rem, 1.171rem + 0.357vw, 1.6rem);
    aspect-ratio: 1;
    height: auto;
    object-fit: contain;
}

.seat-filter__chip:has(> input:checked) {
    box-shadow: 0 1rem 2rem rgba(22, 48, 107, 0.14);
}

.seat-tab:focus-visible,
.seat-list-card:focus-visible {
    outline: 0.2rem solid var(--color-point);
    outline-offset: 0.2rem;
}

.seats-board-sec .inner {
}

.seats-board {
    display: grid;
    grid-template-columns: minmax(28rem, 60.6rem) minmax(30rem, 1fr);
    gap: var(--space-40);
    align-items: start;
}

#seats-wrap .box {
    border: 0.1rem solid var(--color-line-gray);
    border-radius: 2.4rem;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    padding: var(--space-25);
}

.seats-pass__header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2rem;
    width: 100%;
}
.seats-pass__header .seats-pass__icon {
    width: calc(var(--space-44) * 2);
}
.seats-pass__header .seats-pass__icon img {}
.seats-pass__header .seats-pass__meta {}

.seat-map {
    padding: var(--seat-map-pad);
}

.seat-map__head {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    margin-bottom: var(--space-30);
}

.seat-map__head h2 {
    font-size: var(--fs-23-1);
    font-weight: 700;
    color: #142A57;
}

.seat-map__head h2 span {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

.seat-map__head p {
    font-size: var(--fs-17);
    font-weight: 400;
    color: var(--color-txt-purple);
}

.seat-map__panel {
    width: 100%;
    max-width: clamp(28.4rem, 1.429rem + 42.143vw, 52rem);
    margin: 0 auto;
    padding: var(--seat-map-panel-pad-y) var(--seat-map-panel-pad-x);
    border-radius: var(--fluid-radius-md);
    background: #eef2fa;
}

.seat-map__direction {
    margin-bottom: var(--space-30);
    font-size: var(--fs-14);
    font-weight: 600;
    color: #B4B2CD;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-15);
}

.seat-map__direction .icon {
    width: var(--space-18);
    height: var(--space-18);
}
.seat-map__direction .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.seat-map__grid {
    display: grid;
    grid-template-columns: var(--space-37) repeat(2, var(--seat-size)) var(--seat-aisle-width) repeat(2, var(--seat-size));
    gap: var(--space-15) 0.6rem;
    justify-content: center;
    align-items: center;
}

.seat-map__row-num {
    font-size: var(--fs-14);
    font-weight: 600;
    text-align: center;
    color: var(--color-txt-purple);
}

.seat-cell {
    position: relative;
    inline-size: var(--seat-size);
    width: var(--seat-size);
    height: var(--seat-size);
    aspect-ratio: 1;
    border: 0;
    border-radius: var(--seat-cell-radius);
    background: #ffffff;
    border: 1px solid #EBEFF6;
}

.seat-cell--aisle {
    inline-size: var(--seat-aisle-width);
    background: transparent;
    border: 0;
}

.seat-cell--best {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    cursor: pointer;
    padding: 0.7rem;
    border: 0;
}

.seat-cell--best::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/icon_star.png") no-repeat center/cover;
}

.seat-cell--best.is-dimmed {background: #fff;pointer-events: none;cursor: default;}

.seat-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-20);
    margin-top: var(--space-30);
    list-style: none;
}

.seat-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-14);
    font-size: var(--fs-17);
    font-weight: 600;
    color: var(--color-txt-purple);
}

.seat-legend__swatch {
    inline-size: clamp(1.4rem, 0.943rem + 0.714vw, 1.8rem);
    aspect-ratio: 1;
    border-radius: clamp(0.4rem, 0.286rem + 0.179vw, 0.5rem);
    background: #eef2fa;
}

.seat-legend__swatch--best {
    background: var(--color-primary);
}

.seat-list-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--fluid-space-md);
}

.seat-list-count {
    padding-left: var(--seat-list-count-pad);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--color-primary-50);
}

.seat-list-count strong {
    color: var(--color-primary);
}

.seat-list {
    display: flex;
    flex-direction: column;
    gap: var(--seat-list-gap);
    list-style: none;
}

.seat-list-card {
    width: 100%;
    min-height: var(--seat-card-min-h);
    display: flex;
    gap: var(--space-15);
    align-items: center;
    padding: var(--space-18) var(--space-25);
    border: 0;
    border-radius: 2.4rem;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    text-align: left;
    cursor: pointer;
}

.seat-list-card__code,
.seat-modal__head strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: calc(var(--space-44) * 2);
    aspect-ratio: 1;
    border-radius: 2rem;
    background: var(--color-primary);
    color: #ffffff;
    font-size: var(--fs-25);
    font-weight: 700;
    flex-shrink: 0;
}

.seat-modal__head strong {
    border-radius: var(--space-21);
}

.seat-list-card h3 {
    margin-bottom: 1rem;
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--color-primary);
}

.seat-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.seat-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    background: #F1F4FB;
    color: #16306B;
    font-size: var(--fs-11);
    font-weight: 600;
}

.seat-list-empty {
    padding: var(--seat-empty-pad-y) var(--seat-empty-pad-x);
    border-radius: var(--seat-card-radius);
    background: #ffffff;
    box-shadow: var(--shadow-card);
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--color-primary-50);
    text-align: center;
}

.seats-info-sec .inner {
    display: flex;
    flex-direction: column;
    gap: var(--seats-info-gap);
    padding-bottom: clamp(4rem, 1.714rem + 3.571vw, 6rem);
}

.seats-pass,
.sun-guide {
    padding: var(--seat-map-pad);
}

.seats-pass {
    /* display: grid; */
    grid-template-columns: var(--seat-pass-grid-icon) minmax(0, 1fr);
    gap: 0 var(--fluid-space-lg);
}

.seats-pass__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-61);
    aspect-ratio: 1;
    flex-shrink: 0;
    background: var(--color-primary);
    border-radius: 2rem;
}

.seats-pass__icon img {
    aspect-ratio: 1;
    width: var(--space-40);
    object-fit: cover;
}

.seats-pass__eyebrow {font-size: var(--fs-15-8);font-weight: 500;color: var(--color-primary);margin-bottom: 1rem;}

.seats-pass h2,
.sun-guide h2 {
    font-size: var(--fs-22-8);
    font-weight: 700;
    color: var(--color-primary);
}

.sun-guide p {font-size: var(--fs-14-8);font-weight: 500;color: var(--color-txt-purple);}

.seats-pass__cards {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fluid-space-md);
    margin-top: var(--fluid-space-xl);
    list-style: none;
    margin-bottom: var(--space-16);
}

.seats-pass__cards li,
.sun-guide__list li {
    padding: var(--space-20);
    border-radius: var(--space-21);
    background: #F1F4FB;
}

.seats-pass__cards img {
    width: var(--space-50);
    padding: 0.6rem;
    aspect-ratio: 1;
    height: auto;
    margin-bottom: var(--fluid-space-sm);
    border-radius: 0.8rem;
    background: #ffffff;
}

.sun-guide__list strong {
    display: block;
    margin-bottom: clamp(0.6rem, 0.171rem + 0.357vw, 0.9rem);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--color-primary);
}

.seats-pass__cards span {
    display: block;
    margin-bottom: clamp(0.6rem, 0.171rem + 0.357vw, 0.9rem);
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--color-txt-purple);
}

.seats-pass__cards strong {
    display: block;
    font-size: var(--fs-15-8);
    font-weight: 700;
    color: var(--color-primary);
}

.seats-pass__note {
    grid-column: 1 / -1;
    margin-top: 1rem;
    font-size: var(--fs-19-8);
    color: #5D5A88;
    line-height: 2;
}

.seats-pass__note.has-icon {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    line-height: 1.4;
}

.seats-pass__note strong {
    font-weight: 700;
    color: var(--color-primary)
}

.seats-pass__note .icon {
    width: var(--space-20);
    height: var(--space-20);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    align-self: baseline;
    margin-top: 4px;
}

.seats-pass__note .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sun-guide__head {
    display: flex;
    align-items: center;
    gap: var(--fluid-space-lg);
    margin-bottom: clamp(2.4rem, 1.714rem + 1.071vw, 3rem);
}

.sun-guide__head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: calc(var(--space-44) * 2);
    aspect-ratio: 1;
    flex-shrink: 0;
}

.sun-guide__head img {width: 100%;height: 100%;object-fit: cover;}


.sun-guide__head .sun-guide__meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem
}

.sun-guide__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fluid-space-md);
    list-style: none;
}

.sun-guide__list img {
    float: right;
    inline-size: var(--fluid-icon-sm);
    aspect-ratio: 1;
    height: auto;
}

.sun-guide__list span {
    display: block;
    margin-top: clamp(0.2rem, 0.086rem + 0.179vw, 0.3rem);
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--color-red);
}

.sun-guide__list em {
    display: block;
    margin-top: clamp(0.2rem, 0.086rem + 0.179vw, 0.3rem);
    font-style: normal;
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--color-txt-purple);
}

.sun-guide__list strong + em {
    margin-top: var(--fluid-space-md)
}

.sun-guide__tip {
    margin-top: var(--space-30);
    padding: var(--fluid-space-md) var(--fluid-space-lg);
    border-radius: var(--fluid-radius-md);
    background: #eef2fa;
    display: flex;
    align-items: center;
    gap: var(--space-13);
    font-weight: 500;
}

.sun-guide__tip .icon {
    width: var(--space-25);
    height: var(--space-25);
    align-self: baseline;
    margin-top: 4px;
    flex-shrink: 0;
}
.sun-guide__tip .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* 모달 마크업은 #seats-wrap 밖(형제)에 있으므로 페이지 래퍼에 스코프된
   --seat-* 변수를 상속받지 못한다. 모달이 쓰는 변수는 여기서 자체 정의한다. */
.seat-modal {
    --seat-modal-close-pos: clamp(2rem, -1.429rem + 5.357vw, 5rem);
    --seat-modal-close-size: clamp(3.2rem, 2.286rem + 1.429vw, 4rem);
    --seat-modal-head-track: clamp(5.8rem, 3.286rem + 3.929vw, 8rem);
}

.seat-modal .modal__dim {
    background: rgba(0, 0, 0, 0.02);
}

.seat-modal__dialog {
    max-width: min(63.2rem, calc(100vw - var(--fluid-space-lg) * 2));
    padding: var(--space-44);
    border-radius: var(--space-25);
    box-shadow: 0 1.4rem 4.2rem rgba(20, 20, 43, 0.1);
    overflow: visible;
}

.seat-modal__close {
    position: absolute;
    right: var(--seat-modal-close-pos);
    top: var(--seat-modal-close-pos);
    inline-size: var(--seat-modal-close-size);
    aspect-ratio: 1;
    height: auto;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.seat-modal__close::before,
.seat-modal__close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(2.2rem, 1.514rem + 1.071vw, 2.8rem);
    height: 0.2rem;
    background: var(--color-primary);
}

.seat-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.seat-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.seat-modal__head {
    display: grid;
    grid-template-columns: var(--seat-modal-head-track) minmax(0, 1fr);
    gap: var(--fluid-space-lg);
    align-items: center;
    width: calc(100% - clamp(4rem, 1.714rem + 3.571vw, 6rem));
}

.seat-modal__train {
    display: inline-flex;
    align-items: center;
    min-height: clamp(2.4rem, 1.943rem + 0.714vw, 2.8rem);
    padding: 0.4rem 1.1rem;
    margin-bottom: var(--fluid-space-2xs);
    border-radius: 0.8rem;
    font-size: var(--fs-15);
    font-weight: 700;
}

/* 열차 종류별 배지 색상: KTX 계열은 파란색, SRT/무궁화 계열은 tokens.css의 --bg-mg/--c-mg */
.seat-modal__train--ktx {
    background: var(--bg-ktx);
    color: var(--c-ktx);
}

.seat-modal__train--srt {
    background: var(--bg-mg);
    color: var(--c-mg);
}

.seat-modal__head h2 {
    font-size: var(--fs-24);
    font-weight: 700;
    color: var(--color-primary);
}

.seat-modal .seat-badges {
    margin-top: var(--fluid-space-lg);
}

/* 모달 안의 좌석 특징 배지는 목록 카드용 채워진 칩과 달리 테두리만 있는 아웃라인 칩 */
.seat-modal .seat-badge {
    background: transparent;
    border: 0.1rem solid var(--color-light-purple);
    color: var(--color-primary);
    font-size: var(--fs-14);
    font-weight: 600;
}

.seat-modal__desc {
    margin-top: clamp(2.4rem, 1.714rem + 1.071vw, 3rem);
    white-space: pre-line;
    font-size: var(--fs-18);
    font-weight: 600;
    line-height: 1.94;
    color: var(--color-primary);
}

.seat-modal__tip {
    display: flex;
    align-items: center;
    gap: var(--fluid-space-md);
    width: 100%;
    margin-top: clamp(2.8rem, 1.886rem + 1.429vw, 3.6rem);
    padding: var(--fluid-space-lg) clamp(1.6rem, 0rem + 2.5vw, 3rem);
    border-radius: var(--space-21);
    background: #f1f4fb;
    font-size: var(--fs-18);
    font-weight: 500;
    line-height: 1.94;
    color: var(--color-primary);
}

.seat-modal__tip img {
    inline-size: clamp(2.2rem, 1.743rem + 0.714vw, 2.6rem);
    aspect-ratio: 1;
    height: auto;
}

@media (max-width: 1024px) {
    #seats-wrap .inner {
    }

    .seats-board {
        grid-template-columns: minmax(28rem, 0.95fr) minmax(30rem, 1.05fr);
    }

    .seat-map__panel {
        max-width: none;
    }

    .seats-pass__cards,
    .sun-guide__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #seats-wrap .inner {
    }

    .seats-board {
        grid-template-columns: 1fr;
    }

    .seat-map__head {
        /* align-items: flex-start; */
        /* flex-direction: column; */
    }

    .seats-pass {
        grid-template-columns: 1fr;
    }

    .seats-pass__icon {
        grid-row: auto;
    }

    .seats-pass__cards
     {
        grid-template-columns: 1fr;
    }

    .seats-pass__cards li {
        display: flex;
        align-items: center;
        gap: var(--space-25);
    }

    .seats-pass__cards img {
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    .seats-pass__text {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .seats-pass__cards span {
        margin-bottom: 0;
        line-height: 1.2;
    }

    .seats-pass__cards strong {
        line-height: 1.2;
    }

    .seats-pass__cards strong {
        grid-column: 2;
        grid-row: 2;
    }

    .seat-modal__dialog {
        max-width: 100%;
    }

    .seat-modal__head {
        width: calc(100% - var(--seat-modal-close-size));
    }
}

/* ========================================
   seats.php 전용 클래스 (빈 선택자)
   - 여러 페이지가 공통으로 쓰는 클래스(.wrap, .sub-wrap, .sec)는 layout.css에,
     모달 공통 골격(.modal, .modal__dim, .modal__dialog)은 common.css에 이미 있음.
   - 이 파일에는 seats.php에서만 쓰이는 클래스만 남긴다.
======================================== */
.seats-hero {padding-bottom: var(--space-50);}

.seats-board-sec {padding-bottom: var(--space-44);}

.seats-info-sec {
}

@media (max-width: 450px) {
    .seats-pass__note {
        margin-top: 0;
        font-size: var(--fs-16);
        line-height: 1.6
    }
}

@media (max-width: 380px) {
    .sun-guide__list {
        grid-template-columns: 1fr;
    }
    .seat-map__head p,
    .seat-legend li {
        font-size: var(--fs-14)
    }
}