/* 모바일 최적화 스타일 */

/* 기본 모바일 설정 */
@media (max-width: 768px) {
    :root {
        --header-height: 56px;
        --nav-height: 65px;
    }

    .app-title {
        font-size: 20px;
    }

    .header-content {
        padding: 0 16px;
    }

    .main-content {
        padding: calc(var(--header-height) + 16px) 16px calc(var(--nav-height) + 16px);
    }

    .mileage-display {
        padding: 6px 12px;
    }

    .mileage-amount {
        font-size: 14px;
    }

    .mileage-unit {
        font-size: 12px;
    }
}

/* 작은 모바일 화면 (375px 이하) */
@media (max-width: 375px) {
    :root {
        --header-height: 52px;
        --nav-height: 60px;
    }

    .app-title {
        font-size: 18px;
    }

    .header-content {
        padding: 0 12px;
    }

    .main-content {
        padding: calc(var(--header-height) + 12px) 12px calc(var(--nav-height) + 12px);
    }

    .card {
        padding: 16px;
        border-radius: var(--border-radius);
    }

    .btn-lg {
        padding: 14px 24px;
        font-size: 16px;
    }

    .modal {
        margin: 10px;
        max-height: calc(100vh - 20px);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 16px;
    }

    .nav-icon {
        font-size: 20px;
    }

    .nav-label {
        font-size: 11px;
    }
}

/* 큰 모바일 화면 (414px 이상) */
@media (min-width: 414px) and (max-width: 768px) {
    .main-content {
        padding: calc(var(--header-height) + 20px) 24px calc(var(--nav-height) + 20px);
    }

    .card {
        padding: 24px;
    }
}

/* 터치 최적화 */
@media (pointer: coarse) {
    .btn,
    .nav-item,
    .card {
        min-height: 44px;
        min-width: 44px;
    }

    .btn {
        padding: 14px 28px;
    }

    .nav-item {
        padding: 10px;
    }
    
    /* 터치 피드백 */
    .btn:active,
    .nav-item:active,
    .card:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* 세로 방향 최적화 */
@media (orientation: portrait) {
    .main-content {
        min-height: calc(100vh - var(--header-height) - var(--nav-height));
    }
}

/* 가로 방향 최적화 */
@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --header-height: 48px;
        --nav-height: 55px;
    }

    .app-title {
        font-size: 16px;
    }

    .main-content {
        padding: calc(var(--header-height) + 8px) 16px calc(var(--nav-height) + 8px);
    }

    .card {
        padding: 16px;
    }

    .modal {
        max-height: calc(100vh - 16px);
        margin: 8px;
    }

    .nav-icon {
        font-size: 18px;
    }

    .nav-label {
        font-size: 10px;
    }
}

/* iPhone Safe Area 대응 */
@supports (padding: max(0px)) {
    .app-header {
        padding-top: max(0px, env(safe-area-inset-top));
        height: calc(var(--header-height) + max(0px, env(safe-area-inset-top)));
    }

    .bottom-nav {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        height: calc(var(--nav-height) + max(0px, env(safe-area-inset-bottom)));
    }

    .main-content {
        padding-top: calc(var(--header-height) + max(0px, env(safe-area-inset-top)) + 16px);
        padding-bottom: calc(var(--nav-height) + max(16px, env(safe-area-inset-bottom)) + 16px);
    }

    .toast {
        bottom: calc(var(--nav-height) + max(16px, env(safe-area-inset-bottom)) + 20px);
    }
}

/* Android 네비게이션 바 대응 */
@media (display-mode: standalone) {
    .bottom-nav {
        padding-bottom: 20px;
    }
}

/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 다크 모드 감지 */
@media (prefers-color-scheme: dark) {
    :root {
        --dark-color: #ffffff;
        --light-color: #2c3e50;
    }

    .app-header {
        background: rgba(44, 62, 80, 0.95);
    }

    .bottom-nav {
        background: rgba(44, 62, 80, 0.98);
    }

    .app-title {
        color: #ffffff;
    }

    .nav-item {
        color: #adb5bd;
    }

    .nav-item.active {
        color: var(--primary-gradient-start);
    }

    .card {
        background: #34495e;
        color: #ffffff;
    }

    .modal {
        background: #34495e;
        color: #ffffff;
    }
}

/* 고해상도 화면 최적화 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .loading-box-inner {
        border-width: 2px;
    }

    .badge {
        font-size: 11px;
        padding: 3px 7px;
    }
}

/* 매우 작은 화면 (320px 이하) */
@media (max-width: 320px) {
    .header-content {
        padding: 0 8px;
    }

    .main-content {
        padding: calc(var(--header-height) + 8px) 8px calc(var(--nav-height) + 8px);
    }

    .app-title {
        font-size: 16px;
    }

    .mileage-display {
        padding: 4px 8px;
    }

    .mileage-amount {
        font-size: 12px;
    }

    .mileage-unit {
        display: none;
    }

    .btn-lg {
        padding: 12px 20px;
        font-size: 14px;
    }

    .card {
        padding: 12px;
    }

    .modal {
        margin: 5px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 12px;
    }
}

/* 폴더블 디바이스 대응 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .main-content {
        max-width: 500px;
        margin: 0 auto;
    }
}

/* 터치 스크롤 최적화 */
.main-content,
.modal {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* 포커스 링 제거 (모바일) */
@media (pointer: coarse) {
    *:focus {
        outline: none;
    }
}

/* 텍스트 선택 방지 */
.nav-item,
.btn,
.loading-text {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}