@charset "utf-8";

/* ========================================
   홈(index.php) 페이지 전용 클래스
   - 여러 페이지가 공통으로 쓰는 클래스(.wrap, .sec, .inner, .title-sec, .title-wrap,
     .font-dm, .train-wrap, .train-list, .icon, .badge, .list-empty 등)는
     layout.css / common.css / utilities.css 쪽 공용 섹션에 있음.
   - 이 파일에는 index.php에서만 쓰이는 클래스/아이디만 남긴다.
======================================== */

/* ----- 페이지 골격 ----- */
#main-wrap {
}

#main-wrap .list-empty {background: transparent;border-radius:  0;padding: 0;display: flex;align-items: center;justify-content: flex-start;gap: 2.7rem;margin-bottom: var(--space-64);}

#main-wrap .list-empty[hidden] {
    display: none;
}

#main-wrap .list-empty .icon {
    width: var(--space-64);
    height:  var(--space-64);
}
#main-wrap .list-empty .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#main-wrap .list-empty p {
    display: flex;
    flex-direction: column;
    align-items:  flex-start;
    gap: 1rem;
}
#main-wrap .list-empty p strong {
    font-size: var(--fs-20);
    font-weight: 600;
    color: var(--color-primary);
}
#main-wrap .list-empty p span {
    color: var(--color-txt-purple);
    font-size: var(--fs-20);
    font-weight: 300;
}

/* ----- 검색 섹션 ----- */
#main-sec1 {
}

/* ----- 출발 임박 열차 섹션 ----- */
#main-sec2 {padding-bottom: var(--space-30);}

#main-sec3 {
    padding-bottom: calc(var(--space-40) * 2);
}

#main-sec3 .title-wrap {
    margin-bottom: 0;
}

.etd {font-size: var(--fs-28);font-weight: 500;color: var(--color-primary);}

.eta {color: var(--color-txt-purple);font-size: var(--fs-19);font-weight: 500;}

.duration {color: var(--color-txt-purple);font-size: var(--fs-14);font-weight: 400;}

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

/* ----- 인기 노선 리스트 ----- */
.route-list {
}

.route-list__popular {display: flex;align-items: center;justify-content: flex-start;gap: 10px;flex-wrap: wrap;align-items: center;justify-content: center;}

.route-list__item {
}

.route-list__item button {
   border: 1px solid var(--color-line-gray);
   background: #fff;
   border-radius: 999px;
   padding: 1.2rem 1.6rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.6rem;
   cursor: pointer;
}

/* 선택된 인기노선 버튼 표시 */
.route-list__item button.is-active {
    border-color: #585667;
}

.route-list__item button .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.route-list__item button .icon img {}

.route-list__from {line-height: 1;color: var(--color-dark);}

.route-list__to {line-height: 1;color: var(--color-dark);}

/* ----- 바로가기 링크 리스트 ----- */
#main-sec3 {
}

.link-list {display: flex;align-items: center;justify-content: space-between;gap: 1.8rem;}

.link-list__item {flex: 1;}

.link-list__item a {display: flex;width: 100%;padding: var(--space-30) var(--space-25);background: #fff;border-radius:  var(--space-25);box-shadow: 0px 14px 42px 0px #14142B1A;align-items: center;justify-content: space-between;}

.link-meta {flex: 1;display: flex;align-items: center;justify-content: flex-start;gap: 2rem;}

.link-meta dl {flex: 1;}

.link-meta dt {margin-bottom: 1rem;font-size: var(--fs-23-1);font-weight: 600;color: var(--color-primary);}

.link-meta dd {color: var(--color-txt-purple);font-size: var(--fs-14-5);font-weight: 500;}

/* ========================================
   출발 임박 열차 — 스와이퍼(오른쪽 뷰포트 밖으로 블리드)
======================================== */
/* 컨테이너 오른쪽 끝을 뷰포트 오른쪽까지 확장하고, 넘치는 슬라이드는 잘라
   "카드가 화면 밖으로 이어지는" 캐러셀 느낌을 만든다. (.inner는 뷰포트 중앙 정렬 전제) */
.departing-swiper {
    overflow: hidden;
    margin-right: calc(50% - 50vw);
    /* 카드 그림자가 위아래로 잘리지 않게 여유 패딩 */
    padding: 0.6rem 0 1.6rem;
}

.departing-swiper .swiper-wrapper {
    /* 공용 .train-list에 grid가 걸려도 스와이퍼 레이아웃을 우선한다 */
    display: flex;
    box-sizing: border-box;
}

.departing-swiper .swiper-slide {
    width: clamp(22rem, 72vw, 28rem);
    height: auto;
    box-sizing: border-box;
}

/* 카드 골격 (초기 렌더 카드 + 스켈레톤 공용) */
.departing-swiper .train-list-item {
    display: flex;
    flex-direction: column;
    gap: 2.3rem;
    padding: var(--space-25);
    background: #ffffff;
    border-radius: var(--space-25);
    box-shadow: 5px 3px 20px 0px rgba(0, 0, 0, 0.05);
}

.departing-swiper .time-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.departing-swiper .time-info .icon {
    display: inline-flex;
    align-items: center;
    width: 1.6rem;
    height: 1.6rem;
}

.departing-swiper .time-info .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.departing-swiper .meta-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── 스켈레톤 ── */
.skeleton {
    display: block;
    position: relative;
    overflow: hidden;
    background: #EDEDFF;
    border-radius: 0.6rem;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: skeleton-shimmer 1.2s infinite;
}

@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}

.departing-swiper .is-skeleton {
    pointer-events: none;
}

.skeleton--badge { width: 5.4rem; height: 2.4rem; border-radius: 999px; }
.skeleton--time { width: 5.4rem; height: 2.6rem; }
.skeleton--arrow { width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.skeleton--duration { width: 6rem; height: 1.8rem; }
.skeleton--price { width: 7rem; height: 2rem; }

/* ── 로딩 중 부제목 스피너 (index.php / timetable.php 공용) ── */
.departing-spinner {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: -0.2rem;
    border: 0.2rem solid var(--color-line-gray);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: departing-spin 0.7s linear infinite;
}

.sub-header .departing-spinner {
    width: var(--space-25);
    height: var(--space-25)
}

.title-wrap p .loading-status-text,
.loading-status-text {
    color: var(--color-primary);
    font-weight: 600;
}

@keyframes departing-spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   반응형
======================================== */
@media (max-width: 1024px) {
}

@media (max-width: 768px) {
    .departing-swiper .swiper-slide {
        width: clamp(20rem, 78vw, 24rem);
    }

    .link-list {
        flex-direction: column;
    }

    .link-list__item {
        width: 100%
    }

    .link-meta .icon {
        width: 7rem;
        height: 7rem
    }

    .link-meta .icon img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

@media (max-width: 540px) {
    .route-list__item button {
        padding: 1rem
    }
}

@media (max-width: 460px) {
    .route-list__popular {
        gap: 0.6rem
    }

    .route-list__item button span {
        font-size: 1rem
    }
}

@media (max-width: 410px) {
    #main-sec3 .title-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
    #main-sec3 .title-wrap .route-list__popular {
        justify-content: space-between;
        width: 100%;
    }

    .route-list__item {
        width: 30%
    }
    
    .route-list__item button  {
        width: 100%;
    }

    .route-list__item button span {
        font-size: 1rem
    }
}