@charset "utf-8";

/* ========================================
   검색 폼 컨테이너
======================================== */
.search-form {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: var(--space-44) var(--space-36);
    background: #ffffff;
    border: 0.1rem solid var(--color-line-gray);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-card);
}

.search-form__stations {
    display: flex;
    align-items: flex-end;
    gap: var(--space-22);
    border: 0;
}

.search-form__stations > .station-picker {
    flex: 1 1 0;
    min-width: 0;
}

.search-form label {
    display: block;
    margin-bottom: 0.8rem;
    font-family: 'Pretendard';
    font-size: var(--fs-15);
    font-weight: 400;
    color: var(--color-primary);
}

.search-form__submit-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-22);
}

.search-form__submit-row > .date-picker {
    flex: 1 1 0;
    min-width: 0;
}

/* ========================================
   출발역 / 도착역 스왑 버튼
======================================== */
.search-form__swap {
    flex: 0 0 auto;
    width: 6rem;
    height: 6rem;
    margin-bottom: 0;
    border: 0.1rem solid var(--color-line-gray);
    border-radius: 50%;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-form__swap:hover {
    background: var(--color-bg);
}

.search-form__swap:focus-visible {
    outline: 0.2rem solid var(--color-point);
    outline-offset: 0.2rem;
}

.search-form__swap .icon-swap {
    width: 2rem;
    height: 2rem;
    background-image: url("../img/icon_switching.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ========================================
   출발역 / 도착역 콤보박스
======================================== */
.station-picker {
    position: relative;
}

.search-field__control,
.station-picker__control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 6rem;
    padding: 0 1.6rem;
    border: 0.1rem solid var(--color-line-gray);
    border-radius: 2.1rem;
    background: #ffffff;
    cursor: pointer;
}

.search-form .search-field__control {
    display: flex;
    margin-bottom: 0;
}

.search-field__icon,
.station-picker .icon-pin {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.search-field__icon.icon-pin {
    background-image: url("../img/icon_pin.png");
}

.search-field__icon.icon-calendar {
    background-image: url("../img/icon_calendar.png");
}

.search-field__value,
.station-picker__combobox {
    flex: 1 1 0;
    min-width: 0;
    font-family: 'Pretendard';
    font-size: var(--fs-15);
    font-weight: 500;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.search-field__value {
    display: block;
}

.search-field__value:focus,
.search-field__value:focus-visible {
    outline: none;
}

.station-picker__combobox[data-placeholder] {
    color: var(--color-gray);
}

.search-field__chevron,
.station-picker .icon-chevron {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F5C7F' stroke-width='2' stroke-linecap='butt' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.15s ease;
}

.station-picker__combobox[aria-expanded="true"] ~ .icon-chevron,
.station-picker__combobox[aria-expanded="true"] ~ .search-field__chevron {
    transform: rotate(180deg);
}

.search-field__control:focus-within,
.station-picker__control:focus-within {
    border-color: var(--color-point);
    box-shadow: 0 0 0 0.2rem rgba(69, 104, 255, 0.16);
}

/* 드롭다운 목록 */
.station-picker__listbox {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.8rem);
    left: 0;
    right: 0;
    max-height: 28rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.8rem;
    list-style: none;
    background: #ffffff;
    border: 0.1rem solid var(--color-line-gray);
    box-shadow: var(--shadow-card);
    border-radius: 1.6rem;

    /* 얇은 스크롤바 */
    /* scrollbar-width: thin; */
    scrollbar-color: #5F5C7F transparent;
}

.station-picker__listbox::-webkit-scrollbar {
    width: 0.5rem;
}

.station-picker__listbox::-webkit-scrollbar-thumb {
    background: #5F5C7F;
    border-radius: 999px;
}

.station-picker__listbox[hidden] {
    display: none;
}

.station-picker__listbox li {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 4.4rem;
    padding: 0 1.2rem;
    border-radius: 1rem;
    font-family: 'Pretendard';
    font-size: var(--fs-15);
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
}

.station-picker__listbox li .icon-pin {
    width: 2.5rem;
    height: 2.5rem;
    background: url("../img/icon_pin_navy.png") no-repeat center/cover;
}

.station-picker__listbox li.is-active,
.station-picker__listbox li[aria-selected="true"] {
    background: var(--color-bg);
}

/* ========================================
   날짜 선택 (flatpickr 트리거)
======================================== */
.date-picker {
    position: relative;
}

/* flatpickr static:true는 인풋을 .flatpickr-wrapper(기본 inline-block)로 감싼다.
   그대로 두면 컨트롤(flex) 안에서 늘어나지 않아 인풋이 폭을 못 채우고 화살표가 중앙에 붙는다.
   → 래퍼를 flex로 늘려 인풋(width:100%)이 컨트롤 폭을 채우고 화살표가 우측 끝에 오게 한다. */
.date-picker__control .flatpickr-wrapper {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.date-picker__input {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: none;
    appearance: none;
}

.date-picker__input::placeholder {
    color: var(--color-gray);
}

.date-picker__input:focus-visible {
    outline: none;
}

.date-picker__hint {
    margin-top: 0.6rem;
    font-family: 'Pretendard';
    font-size: var(--fs-13);
    color: var(--color-primary-50);
}

/* ========================================
   검색 제출 버튼
======================================== */
.search-form__submit {
    /* 검색행(날짜+버튼)이 출발역행(출발역+스윗칭+도착역)과 같은 폭으로 정렬되도록,
       버튼의 flex-basis에 스윗칭 버튼 폭 + 간격만큼을 미리 더해준다.
       (날짜 인풋 flex:1 1 0 과 동일한 grow 비율로 늘어나므로, 늘어난 만큼은 서로 같고
       이 basis 차이만큼만 버튼이 더 넓어져 스윗칭+간격+도착역 폭과 일치한다) */
    flex: 1 1 calc(6rem + var(--space-22));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    height: 6rem;
    padding: 0 3.2rem;
    border: 0;
    border-radius: 2.1rem;
    background: var(--color-primary);
    color: #ffffff;
    font-family: 'Pretendard';
    font-size: var(--fs-16);
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.search-form__submit:hover {
    opacity: 0.92;
}

.search-form__submit .icon-search {
    width: 1.8rem;
    height: 1.8rem;
    background-image: url("../img/icon_search.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.search-form__submit span:first-child {
    color: #fff
}

.search-form__error {
    font-family: 'Pretendard';
    font-size: var(--fs-14);
    font-weight: 600;
    color: var(--color-red);
}

.search-form__error[hidden] {
    display: none;
}

/* ========================================
   flatpickr 캘린더 커스텀 (date_picker.php 스펙 기준)
======================================== */
.date-picker__calendar.flatpickr-calendar {
    /* 달력은 JS에서 .date-picker(position:relative) 래퍼로 옮겨져 그 기준으로 절대배치된다.
       .date-picker 폭 == 인풋 컨트롤(.search-field__control) 폭이므로 width:100%면 폭이 동일해진다.
       위치(top)는 JS(positionCalendar/onOpen)가 컨트롤 기준 위/아래 10px로 계산해 인라인으로 지정. */
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2.4rem 1.6rem 2rem;
    background: #ffffff;
    border: 0.1rem solid var(--color-line-gray);
    box-shadow: var(--shadow-card);
    border-radius: 2.1rem;
    font-family: 'Pretendard';
}

/* flatpickr 기본 말풍선 삼각형 제거 (위/아래 배치 모두) */
.date-picker__calendar.flatpickr-calendar.arrowTop:before,
.date-picker__calendar.flatpickr-calendar.arrowTop:after,
.date-picker__calendar.flatpickr-calendar.arrowBottom:before,
.date-picker__calendar.flatpickr-calendar.arrowBottom:after {
    display: none;
}

.date-picker__calendar .flatpickr-innerContainer,
.date-picker__calendar .flatpickr-rContainer {
    width: 100%;
}

.date-picker__calendar .flatpickr-months {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.4rem;
}

.date-picker__calendar .flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* flatpickr 기본 월 드롭다운 / 연도 입력은 숨기고, JS가 넣는 "YYYY년 M월" 정적 타이틀만 노출 */
.date-picker__calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.date-picker__calendar .flatpickr-current-month .numInputWrapper {
    display: none;
}

.date-picker__calendar .date-picker__month-title {
    font-family: 'Pretendard';
    font-size: var(--fs-21);
    font-weight: 500;
    color: var(--color-primary);
}

.date-picker__calendar .flatpickr-prev-month,
.date-picker__calendar .flatpickr-next-month {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.8rem;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.date-picker__calendar .flatpickr-prev-month {
    left: 0;
    background-image: url("../img/icon_arr_prev.png");
}
.date-picker__calendar .flatpickr-next-month {
    right: 0;
    background-image: url("../img/icon_arr_next.png");
}

.date-picker__calendar .flatpickr-prev-month,
.date-picker__calendar .flatpickr-next-month {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2.8rem 2.8rem;
}

.date-picker__calendar .flatpickr-prev-month:hover,
.date-picker__calendar .flatpickr-next-month:hover {
    background-color: var(--color-bg);
}

/* flatpickr가 렌더링하는 인라인 SVG 화살표는 숨기고 위 배경 이미지로 대체 */
.date-picker__calendar .flatpickr-prev-month svg,
.date-picker__calendar .flatpickr-next-month svg {
    display: none;
}

.date-picker__calendar .flatpickr-prev-month.flatpickr-disabled,
.date-picker__calendar .flatpickr-next-month.flatpickr-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.date-picker__calendar .flatpickr-weekdays {
    margin-bottom: 0.8rem;
}

/* 요일 헤더도 날짜와 동일한 7열 그리드로 맞춰 컬럼 정렬 일치 */
.date-picker__calendar .flatpickr-weekdaycontainer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
}

.date-picker__calendar .flatpickr-weekday {
    font-family: 'Pretendard';
    font-size: var(--fs-18);
    font-weight: 400;
    color: var(--color-primary);
}

.date-picker__calendar .flatpickr-days {
    width: 100% !important;
}

/* 7열 유동 그리드 — 칸이 안 찬 줄에서도 날짜가 요일 컬럼에 정확히 위치.
   달력 폭이 인풋(좁은 폭)에 맞춰지므로 행 높이도 고정하지 않고 셀 크기에 맡긴다. */
.date-picker__calendar .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: auto;
    row-gap: 0.6rem;
}

/* 날짜 셀은 고정폭(4rem) 대신 컬럼 폭을 채우되, 최대 4rem까지만 커지는 정사각 원형.
   좁은 달력에서는 컬럼 폭만큼 줄어들어 넘치지 않고, 넓은 달력에서는 4rem에서 멈춘다. */
.date-picker__calendar .flatpickr-day {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    align-self: center;
    width: 100%;
    max-width: 4rem;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    line-height: normal;
    border: 0.2rem solid transparent;
    border-radius: 50%;
    font-family: 'Pretendard';
    font-size: var(--fs-15);
    font-weight: 500;
    color: var(--color-primary);
}

.date-picker__calendar .flatpickr-day.prevMonthDay,
.date-picker__calendar .flatpickr-day.nextMonthDay {
    color: #7A808F;
}

.date-picker__calendar .flatpickr-day:hover {
    background: var(--color-bg);
}

.date-picker__calendar .flatpickr-day.today {
    border-color: var(--color-line-gray);
}

.date-picker__calendar .flatpickr-day.selected,
.date-picker__calendar .flatpickr-day.selected:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.date-picker__calendar .flatpickr-day.flatpickr-disabled,
.date-picker__calendar .flatpickr-day.flatpickr-disabled:hover {
    color: #7A808F;
    background: transparent;
    cursor: not-allowed;
}

/* 확인 버튼 레이아웃을 "시간표 검색"(.search-form__submit) 버튼과 동일하게 맞춤:
   높이 6rem, radius 2.1rem, fs-16/700, 중앙 정렬 */
.date-picker__calendar .flatpickr-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    height: 6.9rem;
    margin-top: 2rem;
    border: 0;
    border-radius: 1.7rem;
    background: var(--color-primary);
    color: #ffffff;
    font-family: 'Pretendard';
    font-size: var(--fs-20);
    font-weight: 700;
    cursor: pointer;
    max-height: unset;
}

.date-picker__calendar .flatpickr-confirm:hover {
    opacity: 0.92;
}

/* confirmDate 플러그인 기본 체크 아이콘 숨김 (디자인에 없음) */
.date-picker__calendar .flatpickr-confirm svg {
    display: none;
}

.date-picker__calendar .flatpickr-confirm.disabled {
    background: var(--color-line-gray);
    color: var(--color-gray);
    cursor: not-allowed;
    opacity: 1;
}

/* ========================================
   반응형
======================================== */
@media (max-width: 1024px) {
    .search-form {
        padding: 2.4rem;
        gap: 1.6rem;
    }
}

@media (max-width: 768px) {
    .search-form {
        padding: 2rem;
        border-radius: 1.6rem;
    }

    .search-form__stations {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "from swap"
            "to   to";
        align-items: flex-end;
        row-gap: 1.6rem;
    }

    .search-form__stations > .station-picker[data-field="from"] {
        grid-area: from;
    }

    .search-form__stations > .station-picker[data-field="to"] {
        grid-area: to;
    }

    .search-form__swap {
        grid-area: swap;
        margin: 0;
    }

    .search-form__submit-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form__submit {
        width: 100%;
        flex: 1 1 6rem;
    }

    .date-picker__calendar .dayContainer {
        grid-auto-rows: 4.2rem;
    }

    .date-picker__calendar .flatpickr-day {
        width: 3.6rem;
        max-width: 3.6rem;
        height: 3.6rem;
    }

    .date-picker__calendar .flatpickr-confirm {
        height: 5.6rem;
        font-size: var(--fs-16);
        border-radius: 1.2rem;
    }
}

@media (max-width: 480px) {
    .date-picker__calendar .date-picker__month-title {
        font-size: var(--fs-18);
    }

    .date-picker__calendar .dayContainer {
        grid-auto-rows: 3.6rem;
    }

    .date-picker__calendar .flatpickr-day {
        width: 3rem;
        max-width: 3rem;
        height: 3rem;
        font-size: var(--fs-14);
    }
}