/* PKOR XR 체험센터 - 반응형 디자인 */

/* 기본 반응형 설정 */
* {
    box-sizing: border-box;
}

/* 태블릿 (768px - 1024px) */
@media (max-width: 1024px) {
    .container {
        max-width: 95%;
        padding: 0 20px;
    }

    .hero {
        height: 60vh;
        padding: 40px 20px;
    }

    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 20px;
    }

    .hero p {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    /* 서비스 카드 그리드 조정 */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }

    /* VR 예약 시간표 조정 */
    .time-slots {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .time-slot {
        padding: 15px;
        font-size: 0.9rem;
    }

    /* AI 아바타 생성 옵션 조정 */
    .avatar-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .generation-preview {
        flex-direction: column;
    }

    .avatar-preview {
        margin-bottom: 20px;
    }

    /* 3D 프린팅 상품 그리드 조정 */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* 메타버스 3D 캔버스 조정 */
    .metaverse-canvas {
        height: 400px;
    }

    /* 관리자 대시보드 조정 */
    .admin-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 모바일 (480px - 768px) */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }

    /* 네비게이션 모바일 최적화 */
    .navbar {
        flex-direction: column;
        padding: 15px;
    }

    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        margin-top: 15px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hamburger {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 15px;
    }

    /* 히어로 섹션 모바일 */
    .hero {
        height: 50vh;
        padding: 30px 15px;
        text-align: center;
    }

    .hero h1 {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .cta-button {
        width: 100%;
        padding: 15px 30px;
        font-size: 1rem;
    }

    /* 서비스 카드 모바일 */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        padding: 25px 20px;
        text-align: center;
    }

    .service-card h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    /* VR 예약 모바일 최적화 */
    .booking-form {
        padding: 20px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .form-group input,
    .form-group select {
        padding: 12px;
        font-size: 1rem;
    }

    .time-slots {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .time-slot {
        padding: 12px 8px;
        font-size: 0.85rem;
    }

    .vr-experiences {
        grid-template-columns: 1fr;
    }

    .experience-card {
        padding: 20px;
    }

    /* AI 아바타 생성 모바일 */
    .avatar-creator {
        padding: 20px;
    }

    .avatar-options {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .option-group {
        padding: 15px;
    }

    .generation-preview {
        flex-direction: column;
        padding: 20px;
    }

    .avatar-preview {
        width: 100%;
        height: 250px;
        margin-bottom: 20px;
    }

    .generation-controls {
        width: 100%;
    }

    .ai-tools {
        grid-template-columns: 1fr;
    }

    /* 3D 프린팅 모바일 */
    .printing-header {
        padding: 20px;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .product-card {
        padding: 20px;
    }

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

    .product-actions button {
        width: 100%;
        padding: 12px;
    }

    .customization-panel {
        padding: 20px;
    }

    /* 굿즈 판매 모바일 */
    .merchandise-header {
        padding: 20px;
        text-align: center;
    }

    .category-filters {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .category-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    #products-container {
        grid-template-columns: 1fr;
    }

    .product-card .product-info {
        padding: 15px;
    }

    .product-details {
        flex-direction: column;
        gap: 5px;
    }

    /* 장바구니 모바일 */
    .cart-section {
        padding: 20px;
    }

    .cart-item {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }

    .cart-item-info {
        order: 1;
    }

    .cart-item-controls {
        order: 2;
        align-self: stretch;
    }

    .cart-item-total {
        order: 3;
        font-size: 1.2rem;
        text-align: center;
    }

    /* 메타버스 모바일 */
    .metaverse-interface {
        padding: 15px;
    }

    .metaverse-canvas {
        height: 300px;
        border-radius: 10px;
    }

    .metaverse-controls {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px;
    }

    .avatar-learning {
        padding: 20px;
    }

    .learning-progress {
        flex-direction: column;
        gap: 15px;
    }

    .progress-item {
        min-width: auto;
    }

    /* 관리자 대시보드 모바일 */
    .admin-container {
        padding: 15px;
    }

    .admin-header {
        padding: 20px 15px;
    }

    .admin-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        padding: 20px;
    }

    .data-table {
        font-size: 0.9rem;
    }

    .data-table th,
    .data-table td {
        padding: 8px 4px;
    }

    /* 모달 모바일 최적화 */
    .modal-content {
        width: 95%;
        max-width: none;
        margin: 20px auto;
        padding: 20px;
    }

    .customization-modal .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }

    /* 폼 요소 모바일 최적화 */
    .form-row {
        flex-direction: column;
        gap: 15px;
    }

    .form-row .form-group {
        width: 100%;
    }

    /* 버튼 모바일 최적화 */
    .button-group {
        flex-direction: column;
        gap: 10px;
    }

    .button-group button {
        width: 100%;
        padding: 12px;
    }

    /* 알림 모바일 최적화 */
    .notification {
        left: 10px;
        right: 10px;
        top: 10px;
        width: auto;
        font-size: 0.9rem;
    }
}

/* 소형 모바일 (320px - 480px) */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    .service-card {
        padding: 20px 15px;
    }

    .service-card h3 {
        font-size: 1.2rem;
    }

    .time-slots {
        grid-template-columns: 1fr;
    }

    .time-slot {
        padding: 15px;
        text-align: center;
    }

    .metaverse-canvas {
        height: 250px;
    }

    .data-table {
        font-size: 0.8rem;
    }

    .modal-content {
        padding: 15px;
    }
}

/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
    .service-card,
    .product-card,
    .experience-card {
        transition: transform 0.2s ease;
    }

    .service-card:active,
    .product-card:active,
    .experience-card:active {
        transform: scale(0.98);
    }

    .cta-button,
    .primary-btn,
    .secondary-btn {
        min-height: 44px;
        font-size: 1rem;
    }

    .time-slot,
    .category-btn {
        min-height: 44px;
        padding: 12px 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 {
        --bg-primary: #1a1a2e;
        --bg-secondary: #16213e;
        --text-primary: #ffffff;
        --text-secondary: #b8c5d1;
        --accent-primary: #0f3460;
        --accent-secondary: #533a71;
    }

    body {
        background: var(--bg-primary);
        color: var(--text-primary);
    }

    .service-card,
    .product-card,
    .experience-card {
        background: var(--bg-secondary);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .modal-content {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
}

/* 하이 콘트라스트 모드 */
@media (prefers-contrast: high) {
    .cta-button,
    .primary-btn {
        border: 2px solid currentColor;
    }

    .service-card,
    .product-card {
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .time-slot.selected {
        border: 3px solid #ffffff;
    }
}

/* 프린트 스타일 */
@media print {
    .navbar,
    .cta-buttons,
    .metaverse-controls,
    .admin-controls {
        display: none;
    }

    .hero {
        height: auto;
        padding: 20px;
        background: none !important;
        color: black !important;
    }

    .service-card,
    .product-card {
        break-inside: avoid;
        background: white !important;
        color: black !important;
        border: 1px solid black;
    }
}