/**
 * Book Flip Responsive CSS
 * 모바일 반응형 통합 파일 (세로 + 가로)
 * - 세로: @media (orientation: portrait) and (max-width: 768px)
 * - 가로: @media (orientation: landscape) and (max-height: 600px)
 */

/* ===========================================
   Mobile Portrait Mode (세로)
=========================================== */
@media (orientation: portrait) and (max-width: 768px) {

    /* Core Layout */
    .book-container {
        inset: 1% 1% 1% 1%;
    }

    .page-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 5px;
    }

    .page-header {
        flex: 0 0 auto;
        height: auto;
        min-height: 8vh;
        max-height: 12vh;
        padding: 5px;
    }

    .page-header h2 {
        font-size: clamp(0.9rem, 4vw, 1.3rem);
        margin-bottom: clamp(2px, 0.5vh, 5px);
    }

    .page-header p {
        font-size: clamp(0.6rem, 2.5vw, 0.85rem);
    }

    .page-inner {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .sticky-note {
        transform: none;
        min-width: auto;
        padding: 5px;
        margin: 0;
        border-radius: 8px;
        flex-direction: column;
        gap: 2px;
    }

    .sticky-note::before, .sticky-note::after {
        display: none;
    }

    .sticky-note i {
        font-size: 16px;
    }

    .sticky-note span {
        display: block;
        font-size: 9px;
    }

    .sticky-note:hover, .sticky-note.active {
        transform: none;
    }

    /* Language Selector - 왼쪽 배치 */
    .lang-bookmark {
        position: fixed;
        top: 10px;
        left: 10px;
        right: auto;
        z-index: var(--z-popup);
    }

    .lang-current {
        padding: 10px;
        font-size: 5px;
        border-radius: 8px 0 0 8px;
    }

    .lang-dropdown {
        min-width: 60px;
        border-radius: 0 0 0 8px;
    }

    .lang-dropdown button {
        padding: 5px;
        font-size: 18px;
        text-align: center;
    }

    /* HOME Section (hm_) */
    .hm_cover-top {
        height: auto;
        flex: 0 0 auto;
        min-height: 10vh;
    }

    .hm_cover-top img {
        max-height: 5vh;
    }

    .hm_cover-date {
        margin: clamp(10px, 2vh, 20px) 0;
    }

    .hm_stat-card {
        padding: 5px;
        margin: 2px;
    }

    .hm_stat-card span {
        font-size: clamp(0.8rem, 3vw, 1.1rem);
    }

    .hm_membership-table {
        margin: 0 clamp(5px, 2vw, 2px);
    }

    .hm_membership-row span {
        padding: 5px;
        font-size: clamp(0.7rem, 2.8vw, 0.95rem);
    }

    /* COURSE Section (co_) */
    .co_courses-overview {
        flex-direction: column;
        gap: 10px;
        overflow-y: auto;
    }

    .co_overview-card {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        border-radius: 12px;
    }

    .co_course-img {
        width: 35%;
        height: auto;
        min-height: 100px;
        flex-shrink: 0;
        border-radius: 12px 0 0 12px;
    }

    .co_detail {
        flex: 1;
        padding: 10px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .co_detail h3 {
        font-size: clamp(0.85rem, 3.5vw, 1.1rem);
        margin-bottom: 5px;
    }

    .co_detail p {
        font-size: clamp(0.65rem, 2.5vw, 0.8rem);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .co_badge {
        top: 8px;
        right: 8px;
        padding: 4px 10px;
        font-size: 0.6rem;
    }

    .co_holes-grid {
        gap: clamp(4px, 1vw, 8px);
    }

    .co_hole-card {
        padding: 5px;
    }

    .co_hole-number {
        width: clamp(22px, 6vw, 30px);
        height: clamp(22px, 6vw, 30px);
        font-size: clamp(0.6rem, 2.5vw, 0.8rem);
        margin-right: clamp(4px, 1vw, 8px);
    }

    /* ABOUT Section (ab_) */
    .ab_top-section {
        flex: 0 0 auto;
        min-height: 0;
    }

    .ab_bottom-section {
        flex: 1 1 auto;
        min-height: 0;
    }

    .ab_intro-brief p {
        font-size: clamp(0.7rem, 2.8vw, 0.9rem);
        line-height: 1.4;
    }

    .ab_values-row {
        gap: clamp(8px, 2vw, 15px);
    }

    .ab_value-box {
        padding: 5px;
    }

    .ab_value-box i {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }

    .ab_value-text h4 {
        font-size: clamp(0.7rem, 2.8vw, 0.9rem);
    }

    .ab_value-text span {
        font-size: clamp(0.6rem, 2.2vw, 0.75rem);
    }

    .ab_timeline-horizontal {
        flex-direction: column;
        gap: clamp(8px, 2vh, 15px);
    }

    .ab_timeline-step {
        flex-direction: row;
        align-items: center;
        min-width: auto;
    }

    .ab_step-year {
        font-size: clamp(0.8rem, 3vw, 1rem);
        min-width: 50px;
    }

    .ab_step-content strong {
        font-size: clamp(0.65rem, 2.5vw, 0.85rem);
    }

    .ab_step-content span {
        font-size: clamp(0.55rem, 2.2vw, 0.7rem);
    }

    .ab_timeline-connector {
        display: none;
    }

    /* DIRECTIONS Section (dr_) */
    .dr_location-content {
        flex-direction: column;
    }

    .dr_map-container {
        height: 50vh;
        min-height: 150px;
    }

    .dr_location-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(5px, 1.5vw, 10px);
    }

    .dr_location-card {
        padding: 5px;
    }

    .dr_location-card h4 {
        font-size: clamp(0.7rem, 2.8vw, 0.9rem);
    }

    .dr_location-card p {
        font-size: clamp(0.55rem, 2.2vw, 0.75rem);
    }

    .dr_access-grid, .dr_access-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(8px, 2vw, 15px);
    }

    .dr_section-title h3 {
        font-size: clamp(0.7rem, 2.8vw, 0.9rem);
    }

    .dr_airport-item h4, .route-step-compact h4, .shuttle-route-compact h4, .nearby-item-compact h4 {
        font-size: clamp(0.6rem, 2.5vw, 0.8rem);
    }

    .dr_airport-item p, .route-step-compact p, .shuttle-route-compact p, .nearby-item-compact p {
        font-size: clamp(0.5rem, 2vw, 0.7rem);
    }

    /* RESERVATION Section (rs_) */
    .rs_page-reservation {
        padding: 5px;
    }

    .rs_top {
        padding: 5px 0;
        margin-bottom: 5px;
    }

    .rs_top h2 {
        font-size: clamp(0.9rem, 4vw, 1.2rem);
    }

    .rs_top p {
        font-size: clamp(0.6rem, 2.5vw, 0.8rem);
    }

    .rs_bottom {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .rs_layout {
        flex-direction: column;
        gap: 10px;
    }

    .rs_calendar-area {
        flex: 0 0 auto;
    }

    .rs_booking-area {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* 캘린더 헤더 */
    .rs_calendar-header {
        padding: 6px 10px;
    }

    .rs_calendar-header h3 {
        font-size: clamp(0.8rem, 3.5vw, 1rem);
    }

    .rs_calendar-nav-btn {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    /* 캘린더 그리드 */
    .rs_calendar-grid th {
        padding: 4px 2px;
        font-size: clamp(0.55rem, 2.2vw, 0.7rem);
    }

    .rs_calendar-day {
        padding: 4px 2px;
    }

    .rs_calendar-day .day-num {
        font-size: clamp(0.65rem, 2.8vw, 0.85rem);
    }

    .rs_slot-indicator {
        width: 4px;
        height: 4px;
        margin-top: 2px;
    }

    .rs_calendar-legend {
        font-size: clamp(0.5rem, 2vw, 0.65rem);
        padding: 5px;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .rs_legend-dot {
        width: 6px;
        height: 6px;
    }

    /* 예약 조회 */
    .rs_inquiry-compact {
        padding: 8px;
        margin-top: 8px;
    }

    .rs_inquiry-header {
        font-size: clamp(0.7rem, 2.8vw, 0.85rem);
        margin-bottom: 6px;
    }

    .rs_inquiry-row {
        flex-wrap: wrap;
        gap: 5px;
    }

    .rs_inquiry-row input {
        flex: 1 1 80px;
        min-width: 0;
        padding: 6px 8px;
        font-size: clamp(0.65rem, 2.5vw, 0.8rem);
    }

    .rs_inquiry-or {
        font-size: 0.6rem;
        padding: 0 3px;
    }

    .rs_inquiry-row button {
        padding: 6px 10px;
    }

    /* 예약 방법 */
    .rs_info-compact {
        padding: 8px;
        margin-top: 8px;
    }

    .rs_info-compact h4 {
        font-size: clamp(0.65rem, 2.5vw, 0.8rem);
        margin-bottom: 6px;
    }

    .rs_steps-flow {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        overflow-x: auto;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .rs_step-item {
        flex: 0 0 auto;
        padding: 4px 8px;
        font-size: clamp(0.55rem, 2.2vw, 0.7rem);
    }

    .rs_step-num {
        width: 16px;
        height: 16px;
        font-size: 0.6rem;
    }

    .rs_step-arrow {
        display: none;
    }

    /* 가이드 박스 - 가로 스크롤 */
    .rs_no-selection {
        display: flex;
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        padding: 5px 0;
        -webkit-overflow-scrolling: touch;
    }

    .rs_guide-box {
        flex: 0 0 auto;
        min-width: 140px;
        padding: 8px;
    }

    .rs_guide-title {
        font-size: clamp(0.6rem, 2.5vw, 0.75rem);
        margin-bottom: 4px;
    }

    .rs_guide-box p {
        font-size: clamp(0.5rem, 2vw, 0.65rem);
        margin-bottom: 2px;
    }

    /* 시간 선택 */
    .rs_selected-date-info {
        padding: 8px 10px;
        font-size: clamp(0.7rem, 2.8vw, 0.85rem);
    }

    .rs_time-slots-area {
        padding: 8px;
        min-height: 80px;
    }

    .rs_time-slot-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }

    .rs_time-slot-btn {
        padding: 6px 4px;
        font-size: clamp(0.6rem, 2.5vw, 0.75rem);
    }

    /* 예약 폼 */
    .rs_booking-form {
        padding: 8px;
    }

    .rs_form-row {
        flex-direction: column;
        gap: 8px;
    }

    .rs_form-row-3col {
        flex-direction: column;
        gap: 8px;
    }

    .rs_form-field {
        gap: 3px;
    }

    .rs_form-field label {
        font-size: clamp(0.6rem, 2.5vw, 0.75rem);
    }

    .rs_form-field input, .rs_form-field select {
        padding: 8px 10px;
        font-size: 16px; /* iOS zoom 방지 */
    }

    .rs_btn-submit {
        padding: 10px;
        font-size: clamp(0.8rem, 3vw, 1rem);
        margin-top: 10px;
    }

    /* Very Small Portrait (height < 600px) */
    @media (orientation: portrait) and (max-width: 768px) and (max-height: 600px) {
        .page-header {
            min-height: 6vh;
            max-height: 10vh;
        }

        .page-header h2 {
            font-size: clamp(0.8rem, 3.5vw, 1.1rem);
        }

        .sticky-note span {
            display: none;
        }

        /* ===========================================
           Mobile Landscape Mode (가로)
        =========================================== */
        @media (orientation: landscape) and (max-height: 600px) {

            /* Core Layout */
            .book-container {
                inset: 2% 8% 2% 2%;
            }

            .page-content {
                padding: clamp(8px, 1.5vw, 15px);
            }

            .page-header {
                height: 12%;
            }

            .page-header h2 {
                font-size: clamp(1rem, 2.5vw, 1.5rem);
            }

            .page-header p {
                font-size: clamp(0.65rem, 1.2vw, 0.85rem);
            }

            .sticky-note {
                padding: 6px 10px;
                min-width: 35px;
            }

            .sticky-note span {
                display: none;
            }

            /* Language Selector - 왼쪽 배치 */
            .lang-bookmark {
                top: 10px;
                left: 10px;
                right: auto;
            }

            .lang-current {
                padding: 6px 10px;
                font-size: 18px;
            }

            .lang-dropdown button {
                padding: 8px 10px;
                font-size: 14px;
            }

            /* HOME Section (hm_) */
            .hm_cover-top {
                height: 12%;
            }

            .hm_cover-top img {
                max-height: 50px;
            }

            .hm_cover-date {
                margin: 20px 0 10px 0;
            }

            .hm_stat-card {
                padding: 6px 10px;
                margin: 3px;
            }

            .hm_stat-card span {
                font-size: clamp(0.9rem, 1.5vw, 1.2rem);
            }

            .hm_cover-company {
                margin: 30px 0 5px 0;
            }

            .hm_cover-links {
                margin: 0 0 20px 0;
            }

            .hm_membership-table {
                margin: 0 2px;
            }

            .hm_membership-row span {
                padding: 8px;
                font-size: clamp(0.8rem, 1.3vw, 1rem);
            }

            /* COURSE Section (co_) */
            .co_holes-grid {
                gap: 6px;
            }

            .co_hole-card {
                padding: 5px;
            }

            .co_hole-number {
                width: clamp(24px, 4vw, 32px);
                height: clamp(24px, 4vw, 32px);
                font-size: clamp(0.65rem, 1.1vw, 0.85rem);
                margin-right: 6px;
            }
        }
    }
}