/* 꼬리말 「예일안과에게 문의하기」 문의항목 목록 · 전문보기 · 제출 버튼 (구 사이트에는 없는 파일, components/site/Footer.tsx)
   구 디자인은 펼친 목록이 브라우저 기본(흰 바탕 · 회색 글씨)이라 남색 구역 위에서 따로 놀았다.
   → 구역 배경(booking_sec_bg 평균 #2d3251)을 연하게 한 바탕에 흰 글씨로 맞춘다. */

/* 모든 브라우저: 목록 글자색 · 바탕 (윈도우 크롬 · 엣지 · 파이어폭스. 맥 · 아이폰은 시스템 목록이라 바뀌지 않는다) */
.booking_sec .cont_1 .select_box select option {
    color: #fff;
    background: #4b5175;
}
/* 안내 문구(진료과목을 선택해주세요)는 닫힌 칸에만 보이고, 펼친 목록에서는 뺀다 — 같은 문구가 두 번 보였다 */
.booking_sec .cont_1 .select_box select option[value=""] {
    display: none;
}

/* 목록 모양까지 꾸밀 수 있는 브라우저(크롬 · 엣지 135+): 펼친 목록을 구역의 유리 상자와 같은 결로 */
@supports (appearance: base-select) {
    .booking_sec .cont_1 .select_box select,
    .booking_sec .cont_1 .select_box select::picker(select) {
        appearance: base-select;
    }
    .booking_sec .cont_1 .select_box select {
        min-height: auto;
        align-items: center;
        gap: 12px;
        padding: 0;
        border: none;
        background: transparent;
        color: #fff;
        cursor: pointer;
    }
    /* 화살표: 배경 그림은 돌릴 수 없어 화살표 자리(picker-icon)에 그리고, 목록이 열리면 위로 뒤집는다 */
    .booking_sec .cont_1 .select_box select::picker-icon {
        content: "";
        flex: none;
        width: 16px;
        height: 9px;
        margin-left: auto;
        background: url("/asset/img/main/booking_arrow.png") no-repeat center / contain;
        transition: rotate 0.3s ease;
    }
    .booking_sec .cont_1 .select_box select:open::picker-icon {
        rotate: 180deg;
    }
    .booking_sec .cont_1 .select_box select::picker(select) {
        /* 상자 오른쪽 끝에 맞춰 아래로 편다 (선택 칸이 상자 오른쪽에 붙어 있다) */
        position-area: block-end span-inline-start;
        min-width: max(anchor-size(width), 240px);
        margin-top: 14px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        background: #4b5175;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }
    .booking_sec .cont_1 .select_box select option {
        padding: 10px 14px;
        border-radius: 6px;
        background: transparent;
        font-size: 16px;
        line-height: 1.4;
        letter-spacing: -0.02em;
    }
    .booking_sec .cont_1 .select_box select option::checkmark {
        display: none;
    }
    .booking_sec .cont_1 .select_box select option:not(:disabled):hover,
    .booking_sec .cont_1 .select_box select option:focus-visible {
        background: rgba(255, 255, 255, 0.14);
    }
    .booking_sec .cont_1 .select_box select option:checked:not(:disabled) {
        background: #687adf;
    }
}

/* 제출 버튼: 구 디자인은 호버 표시가 없어 눌러지는 버튼인지 알기 어려웠다 → 마우스를 올리면 진하게 · 살짝 떠 보이게 */
.booking_btn {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.booking_btn input[type="submit"] {
    cursor: pointer;
    transition: background-color 0.3s ease;
}
@media (hover: hover) {
    .booking_btn:hover {
        background: #4f62c9;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        transform: translateY(-2px);
    }
    .booking_btn:hover input[type="submit"] {
        background: #4f62c9;
    }
}
@media (prefers-reduced-motion: reduce) {
    .booking_btn,
    .booking_btn input[type="submit"] {
        transition: none;
    }
}

/* 개인정보처리방침 「전문보기」: 누르면 열리는 글자인데 손가락 커서 · 호버 표시가 없었다 → 올리면 흰 글씨로 */
.booking_sec .check_box > span {
    cursor: pointer;
    transition: color 0.3s ease;
}
@media (hover: hover) {
    .booking_sec .check_box > span:hover {
        color: #fff;
    }
}
@media (prefers-reduced-motion: reduce) {
    .booking_sec .check_box > span {
        transition: none;
    }
}

/* 별표 칸·동의 체크가 다 채워지기 전에는 Submit 을 회색으로 꺼 둔다 (useFormReady) — 호버 효과도 없다 */
.booking_btn:has(input[type="submit"]:disabled),
.booking_btn input[type="submit"]:disabled {
    background: #9aa0bb;
    box-shadow: none;
    transform: none;
    cursor: default;
}

/* 상담 후 예약 확정 안내 체크 — 개인정보 동의 바로 아래에 붙이고, 휴대폰에서 두 줄로 꺾이면 왼쪽 정렬 */
.booking_sec .cont_2 {
    max-width: 100%;
}
.booking_sec .check_box.check_confirm {
    margin-top: -8px;
    max-width: 100%;
}
.booking_sec .check_box.check_confirm input[type="checkbox"] {
    flex-shrink: 0;
}
.booking_sec .check_box.check_confirm label {
    min-width: 0;
    line-height: 1.4;
    word-break: keep-all;
}