@charset "utf-8";

/* ========================================
   시간표 검색(timetable.php) 페이지 전용 클래스
   - 여러 페이지가 공통으로 쓰는 클래스(.wrap, .sub-wrap, .sec, .inner, .title-sec, .title-wrap,
     .font-dm, .train-wrap, .train-list, .icon, .badge, .list-empty, .box, .filter-chip,
     .train-no, .sub-header__badge 등)는 layout.css / common.css / utilities.css /
     filter-chip.css 쪽 공용 섹션에 있음.
   - 이 파일에는 timetable.php에서만 쓰이는 클래스/아이디만 남긴다.
   - 검색 전/후, 캐시 유무 등 분기별로 다르게 나오는 요소도 모두 포함.
======================================== */


/* ========================================
   페이지 골격
======================================== */

.no-route-notice {
    margin-top: 4rem;
}

.no-route-notice h2 {
    margin: 0 0 var(--space-30);
    color: var(--color-primary);
    font-size: var(--fs-30);
    font-weight: 400;
    line-height: 1;
}

.no-route-notice p {
    margin: 0;
    color: var(--color-txt-purple);
    font-size: var(--fs-25);
    line-height: 1.6;
}

.result-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem;
}

.result-edit-link {
    flex: 0 0 auto;
}


/* ========================================
   검색 옵션 / 필터 영역
   - 캐시가 있을 때만 노출
======================================== */

.train-opt-wrap {
    display: grid;
    gap: var(--space-40);
}

.guide {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    color: var(--color-primary);
    font-size: var(--fs-14);
}

.guide span.icon {
    width: 2rem;
    height: 2rem;
}

.guide span.icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide span:last-child {
    color: var(--color-txt-purple);
    font-size: var(--fs-16-8);
    font-weight: 500;
    line-height: 1;
}

.skeleton--tr-guide-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
}

.skeleton--tr-guide {
    display: inline-block;
    width: 22rem;
    max-width: 100%;
    height: var(--fs-16-8);
}

/* 로딩 중 서브헤더 상태 문구 (timetable.php 전용 스타일) */
.sub-header__actions .loading-status-text {
    font-size: var(--fs-22);
    font-weight: 700;
}

.filter-form {
    display: grid;
    gap: var(--space-50);
}

.filter-box {
    display: grid;
    padding: var(--space-32) var(--space-37);
}

.filter-group {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    min-width: 0;
    margin: 0;
    padding: var(--space-25) 0;
    border: 0;
    border-bottom: 0.1rem solid var(--color-line-gray);
}

.filter-group:first-child {
    padding-top: 0;
}

.filter-group:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.filter-group__title {
    color: var(--color-txt-purple);
    font-size: var(--fs-15);
    font-weight: 500;
}

.filter-group__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.2rem;
    min-width: 0;
}


/* ========================================
   열차 목록 헤더 / 정렬
======================================== */

.train-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
}

.train-list__count {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--fs-21);
    font-weight: 600;
}

.train-list__count strong {
    font-size: inherit;
    font-weight: 600;
}

.sort-segment {
    min-width: 0;
    margin: 0;
    padding: 0.4rem;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1.2rem 3rem rgba(15, 35, 76, 0.08);
}

.sort-segment__options {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

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

.sort-chip {
    position: relative;
    z-index: 1;
    min-height: 3.6rem;
    padding: 0 1.8rem;
    background: transparent;
    border-color: transparent;
    font-size: var(--fs-13);
}

/* 배경은 sort-segment__thumb가 담당하므로, filter-chip.css의 :has() 배경 규칙은 여기서 무효화 */
.sort-chip:has(> input:checked) {
    background: transparent;
    border-color: transparent;
}


/* ========================================
   열차 결과 리스트
======================================== */

.train-result-list {
    display: grid;
    gap: 3rem;
}

.train-list__all {
    scroll-margin-top: 2rem;
}

.train-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: var(--space-50);
}

.train-pagination__num,
.train-pagination__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: var(--space-50);
    height: var(--space-50);
    border-radius: 999px;
    background: #fff;
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--color-txt-purple);
    box-shadow: 0px 14px 42px 0px #14142B1A;
}

.train-pagination__num:hover,
.train-pagination__nav:hover {
}

.train-pagination__num.is-active {color: #fff;background:  var(--color-primary);}

.train-pagination__nav[aria-disabled="true"] {
    pointer-events: none;
}

.train-pagination__nav img {
    width: var(--space-25);
    height: var(--space-25);
    opacity: 0.3;
}

.train-pagination__nav.is-active {
    /* background: var(--color-primary); */
}

.train-pagination__nav.is-active img {
    opacity: 1;
}

.timetable-groups {
    display: grid;
    gap: 2.4rem;
}

.timetable-group {
    display: grid;
    gap: 1.4rem;
}

.timetable-group__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 0.1rem solid var(--line, #e5e7eb);
}

.timetable-group__head h3 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.timetable-group__head p {
    margin: 0;
    color: var(--text-sub, #6b7280);
    font-size: 1.4rem;
}


/* ========================================
   열차 카드
======================================== */

.train-card {
    padding: var(--space-44) var(--space-37);
}

.train-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--space-40) 0 var(--space-50);
    padding-bottom: var(--space-40);
    border-bottom: 1px solid var(--color-line-gray);
}


/* ----- 출발 / 도착 시간 ----- */

.station-time {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.station-time--departure {
    align-items: flex-start;
    text-align: left;
    /* flex: unset; */
}

.station-time--arrival {
    align-items: flex-end;
    text-align: right;
    /* flex: unset; */
}

.station-name {
    color: var(--color-txt-purple);
    font-size: var(--fs-25);
    font-weight: 600;
}

.station-clock {
    color: var(--color-primary);
    font-size: var(--fs-45);
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-34);
    width: 100%;
}

.station-clock .line {
    flex: 1;
    height: 2px;
    background: #b4b2cd;
    position: relative;
}

.station-clock .line::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-12);
    height: var(--space-12);
    border-radius: 999px;
}

.station-time--departure .station-clock .line::before {
    background: var(--color-light-purple);
    left: 0;
}

.station-time--arrival .station-clock .line::before {
    background: var(--color-primary);
    right: 0;
}

/* ----- 경로 라인 / 소요 시간 ----- */

.route-line {
    color: var(--color-primary);
    font-size: var(--fs-15);
    font-weight: 600;
}

.route-line__duration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.3rem;
}

.route-line__duration span:last-child {
    width: var(--space-25);
    height: var(--space-25);
}

.route-line__duration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 로딩 중에는 소요 시간 박스 대신 양옆으로 길게 이어진 연결선만 노출 */
.route-line--skeleton {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 3rem 2rem 0;
}

.route-line--skeleton .route-line__bar {
    flex: 1;
    height: 0.2rem;
    background: var(--color-skeleton);
}

/* ----- 차량 정보 ----- */
.train-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.train-card__foot .train-price {
    font-size: var(--fs-35);
    font-weight: 600;
    color: var(--color-primary);
}

.train-actions {display: flex;align-items: center;justify-content: flex-end;gap: var(--space-20);}

.train-actions a {
    box-shadow: 0px 14px 42px 0px #0000001A;
    border-radius: 999px;
    padding: 1.8rem 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

.train-actions a span:first-child {font-size: var(--fs-18-8);font-weight: 700;}

.train-actions a span.icon {
    width: 2.4rem;
    height: 2.4rem;
}
.train-actions a span.icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.train-actions .btn-seat {}

.train-actions .btn-seat span:first-child {}
.train-actions .btn-seat span.icon {}
.train-actions .btn-seat span.icon img {}

.train-actions .btn-reserve {
    background: var(--color-primary);
}

.train-actions .btn-reserve span:first-child {
    color: #fff;
}
.train-actions .btn-reserve span.icon {}
.train-actions .btn-reserve span.icon img {}


/* ========================================
   열차 카드 스켈레톤 (로딩 중)
   - .train-card와 동일한 DOM 구조/클래스를 그대로 쓰고
     텍스트·이미지 자리만 스켈레톤 박스로 치환해 레이아웃 쉬프트를 방지한다.
======================================== */

.train-card.is-skeleton {
    pointer-events: none;
}

.skeleton--tr-badge { width: 5.4rem; height: 2.4rem; border-radius: 0.8rem; }
.skeleton--tr-name { display: block; width: 6rem; height: var(--fs-25); margin-bottom: 0.8rem; }
.skeleton--tr-clock { display: block; width: 9rem; height: var(--fs-45); }
.skeleton--tr-price {width: calc(var(--space-72) * 2);height: var(--space-61);}
.skeleton--tr-action {width: calc(var(--space-72) * 2);height: var(--space-61);border-radius: 0.6rem;}


/* ========================================
   검색 결과 없음 (list-empty)
======================================== */

#timetable-wrap .list-empty {
    padding: calc(var(--space-44) * 2) var(--space-44);
}

#timetable-wrap .list-empty .empty-meta {
    max-width: 84rem;
    margin: 0 auto;
    padding-bottom: var(--space-50);
    border-bottom: 1px solid #E3E3E3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-34);
}

#timetable-wrap .list-empty .empty-meta .icon {
    width: calc(var(--space-72) + var(--space-20));
    height: calc(var(--space-72) + var(--space-20));
    display: inline-block;
}

#timetable-wrap .list-empty .empty-meta .icon img {width: 100%;height: 100%;object-fit: cover;}

#timetable-wrap .list-empty .empty-meta strong {
    font-size: var(--fs-27);
    font-weight: 700;
}

#timetable-wrap .list-empty .empty-meta p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-20);
    font-weight: 300;
    color: var(--color-txt-purple);
    margin-top: -1rem;
}

#timetable-wrap .list-empty .empty-meta p span {}

#timetable-wrap .list-empty .recommend-list {
    max-width: 84rem;
    margin: 0 auto;
    padding-top: var(--space-50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-20);
}

#timetable-wrap .list-empty .empty-meta button {
    border: 0;
    outline: 0;
    background: var(--color-primary);
    border-radius: 999px;
    padding: var(--space-20) 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

#timetable-wrap .list-empty .empty-meta button .icon {
    width: var(--space-25);
    height: var(--space-25);
    filter: brightness(0) invert(1);
}

#timetable-wrap .list-empty .empty-meta button .icon img {}

#timetable-wrap .list-empty .empty-meta button span:last-child {
    color: #fff;
    font-size: var(--fs-19-8);
    font-weight: 700;
}

#timetable-wrap .list-empty .recommend-list p {
    font-size: var(--fs-20);
    font-weight: 500;
}

#timetable-wrap .list-empty .route-list__popular {}

#timetable-wrap .list-empty .route-list__item {}

#timetable-wrap .list-empty .route-list__item button {}

#timetable-wrap .list-empty .route-list__from {}

#timetable-wrap .list-empty .route-list__to {}


/* ========================================
   반응형
======================================== */

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
    .result-title-row {
        flex-direction: column;
    }

    .filter-box {
        /* padding: 1rem 2rem; */
    }

    .filter-group {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 1rem;
    }

    .train-result-list {
        gap: 1.6rem;
    }

    .train-card.box {
        border-radius: 1.8rem;
    }

    .train-card {
        padding: 2.2rem 1.8rem;
    }

    .train-card__head {
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }

    .train-card__body {
        margin: 2rem 0 2.2rem;
        padding-bottom: 2rem;
        gap: 1rem;
    }

    .station-time {
        min-width: 0;
    }

    .station-name {
        max-width: 100%;
        font-size: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .station-clock {
        gap: 1rem;
        font-size: clamp(2.8rem, 8.4vw, 3.6rem);
        line-height: 1.1;
    }

    .station-clock .line {
        min-width: 1.8rem;
    }

    .station-clock .line::before {
        width: 0.8rem;
        height: 0.8rem;
    }

    .route-line {
        flex: 0 0 auto;
        min-width: 5.8rem;
        font-size: 1.2rem;
    }

    .route-line__duration {
        gap: 0.6rem;
    }

    .route-line__duration span:last-child {
        width: 1.8rem;
        height: 1.8rem;
    }

    .train-card__foot {
        gap: 1.4rem;
    }

    .train-card__foot .train-price {
        font-size: clamp(2.2rem, 6.2vw, 2.8rem);
        white-space: nowrap;
    }

    .train-actions {
        gap: 0.8rem;
    }

    .train-actions a {
        padding: 1.2rem 1.4rem;
        gap: 0.7rem;
        box-shadow: 0 0.8rem 2.2rem rgba(0, 0, 0, 0.1);
    }

    .train-actions a span:first-child {
        font-size: 1.4rem;
        white-space: nowrap;
    }

    .train-actions a span.icon {
        width: 1.8rem;
        height: 1.8rem;
    }

    .skeleton--tr-name { height: 1.5rem; }
    .skeleton--tr-clock { width: 7.2rem; height: 3.2rem; }
    .skeleton--tr-price { width: 8.8rem; height: 3.4rem; }
    .skeleton--tr-action { width: 10rem; height: 4.2rem; }
}

@media (max-width: 480px) {
    .train-list__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .sort-segment {
        width: 100%;
        overflow-x: auto;
    }

    .sort-chip {
        flex: 1
    }

    .train-card {
        padding: 1.8rem 1.4rem;
    }

    .train-card__body {
        gap: 0.7rem;
    }

    .station-clock {
        gap: 0.7rem;
        font-size: clamp(2.4rem, 8vw, 3rem);
    }

    .station-clock .line {
        min-width: 1.2rem;
    }

    .route-line {
        min-width: 4.8rem;
        font-size: 1.1rem;
    }

    .train-card__foot {
        align-items: stretch;
        flex-direction: column;
    }

    .train-actions {
        justify-content: stretch;
    }

    .train-actions a {
        flex: 1 1 0;
        padding: 1.1rem 1rem;
    }
}