/**
 * 본투어 인터내셔날 - 여행자 PC 스타일
 * 1024px 이상에서 휴대폰 프레임 UI (나무 테이블 스타일)
 */

@media (min-width: 1024px) {
    body {
        /* 나무 테이블 배경 - 이미지가 있으면 url()로 교체 */
        background:
            url('/assets/images/bg/phone-table.jpg') center/cover no-repeat fixed,
            linear-gradient(135deg, #8B7355 0%, #6B5344 50%, #4A3728 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        position: relative;
    }

    /* 배경 오버레이 - 부드러운 비네트 효과 */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.3) 100%);
        pointer-events: none;
        z-index: 0;
    }

    /* PC 전용 요소 - 심플하게 숨김 */
    .pc-branding,
    .pc-qr,
    .pc-decoration,
    .pc-floating-icon {
        display: none !important;
    }

    .phone-frame,
    .phone-screen,
    .phone-screen-inner {
        display: block;
    }

    .side-button-left,
    .side-button-right-1,
    .side-button-right-2 {
        display: block;
    }

    /* 휴대폰 프레임 컨테이너 - 테이블 위에 놓인 느낌 */
    .phone-frame {
        position: relative;
        width: 375px;
        height: 812px;
        background: linear-gradient(145deg, #1c1c1e 0%, #000000 100%);
        border-radius: 50px;
        padding: 10px;
        box-shadow:
            /* 폰 외곽 하이라이트 */
            0 0 0 1px rgba(255,255,255,0.08),
            inset 0 0 0 1px rgba(255,255,255,0.05),
            /* 테이블 위 그림자 */
            0 40px 60px -20px rgba(0, 0, 0, 0.6),
            0 20px 40px -10px rgba(0, 0, 0, 0.4),
            /* 바닥 반사 */
            0 2px 4px rgba(0, 0, 0, 0.3);
        z-index: 10;
    }

    /* 노치 영역 */
    .phone-frame::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 150px;
        height: 30px;
        background: #000;
        border-radius: 0 0 20px 20px;
        z-index: 10;
        pointer-events: none;
    }

    /* 다이내믹 아일랜드 */
    .phone-frame::after {
        content: '';
        position: absolute;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
        width: 110px;
        height: 32px;
        background: #000;
        border-radius: 20px;
        z-index: 11;
        pointer-events: none;
    }

    /* 사이드 버튼들 */
    .phone-frame .side-button-left {
        position: absolute;
        left: -2px;
        top: 100px;
        width: 2px;
        height: 28px;
        background: linear-gradient(90deg, #2c2c2e, #1c1c1e);
        border-radius: 2px 0 0 2px;
    }

    .phone-frame .side-button-right-1 {
        position: absolute;
        right: -2px;
        top: 100px;
        width: 2px;
        height: 50px;
        background: linear-gradient(90deg, #1c1c1e, #2c2c2e);
        border-radius: 0 2px 2px 0;
    }

    .phone-frame .side-button-right-2 {
        position: absolute;
        right: -2px;
        top: 170px;
        width: 2px;
        height: 50px;
        background: linear-gradient(90deg, #1c1c1e, #2c2c2e);
        border-radius: 0 2px 2px 0;
    }

    /* 화면 영역 */
    .phone-screen {
        width: 100%;
        height: 100%;
        background: var(--gray-50);
        border-radius: 42px;
        overflow: hidden;
        position: relative;
    }

    /* 화면 반사 효과 - 제거 (클릭 문제 방지) */

    /* 스크롤 영역 */
    .phone-screen-inner {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* 스크롤바 스타일 */
    .phone-screen-inner::-webkit-scrollbar {
        width: 3px;
    }

    .phone-screen-inner::-webkit-scrollbar-track {
        background: transparent;
    }

    .phone-screen-inner::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 3px;
    }

    /* 레이아웃 조정 */
    .user-layout {
        min-height: 100%;
    }

    /* 헤더 조정 */
    .user-header {
        padding-top: 48px; /* 노치 영역 확보 */
    }

    /* 콘텐츠 조정 */
    .user-content {
        padding-bottom: 40px;
    }

    /* 메인 히어로 조정 */
    .main-hero {
        padding-top: 20px;
        margin-top: -20px;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    }

    .main-hero-new {
        margin-top: 40px;
    }

    /* 사이드바 조정 */
    .sidebar-menu {
        border-radius: 42px 0 0 42px;
    }

    /* PC 로그인 페이지 */
    .login-page {
        border-radius: 42px;
        min-height: 100%;
    }

    .login-header {
        padding-top: 56px;
    }

    /* 플로팅 버튼 PC 위치 조정 - phone-frame 내부에 위치 */
    .floating-contact-buttons {
        position: absolute;
        right: 20px;
        bottom: 80px;
        z-index: 150;
    }

    .floating-btn {
        width: 48px;
        height: 48px;
    }

    .floating-btn svg {
        width: 22px;
        height: 22px;
    }

    .floating-label {
        display: none;
    }

    /* 연락처 모달 PC 조정 */
    .contact-modal {
        max-width: 400px;
    }
}

/* 세로 화면이 긴 경우 (아이패드 등) */
@media (min-width: 1024px) and (max-height: 900px) {
    .phone-frame {
        height: calc(100vh - 80px);
        max-height: 812px;
    }
}

/* 태블릿 가로 모드 */
@media (min-width: 768px) and (max-width: 1023px) {
    .user-content {
        max-width: 600px;
        margin: 0 auto;
    }

    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 초대형 화면 */
@media (min-width: 1920px) {
    .phone-frame {
        width: 414px;
        height: 896px;
    }
}