/* 모바일 전용 오버라이드 스타일 */
@media (max-width: 767px) {
    /* 기본 스타일은 라이트 모드 */
    body,
    html {
        background-color: #ffffff !important;
        background: #ffffff !important;
    }
    
    main {
        background-color: #ffffff !important;
    }
    
/*     .hero {
        background: linear-gradient(135deg, #FFF5F0 0%, #FFFFFF 100%);
    } */
    
    .popular-items {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }
    
    .services {
        background: #f8f9fa !important;
        background-color: #f8f9fa !important;
    }
    
    /* 모달 중앙 정렬 강화 */
    .modal.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .modal-dialog-centered {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-height: calc(100% - 1rem) !important;
        margin: 0.5rem auto !important;
    }
    
    #locationModal .modal-dialog {
        position: relative !important;
        width: 90% !important;
        max-width: 380px !important;
        margin: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #locationModal .modal-content {
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* 채팅 창 중앙 배치 */
    #chat-window {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        bottom: auto !important;
        right: auto !important;
        width: 90% !important;
        max-width: 380px !important;
        height: 80vh !important;
        max-height: 550px !important;
    }
}

/* 다크모드 지원 (모바일) - PC와 동일한 스타일 */
@media (max-width: 767px) {
    [data-theme="dark"] body,
    [data-theme="dark"] html {
        background-color: #1a1a1a !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] main {
        background-color: #1a1a1a !important;
    }
    
    [data-theme="dark"] .header {
        background: #212529 !important;
        border-bottom-color: #495057 !important;
    }
    
    [data-theme="dark"] .nav-link,
    [data-theme="dark"] .btn-search,
    [data-theme="dark"] .btn-menu {
        color: #adb5bd !important;
    }
    
    [data-theme="dark"] .hero {
        background: #1a1a1a !important;
        border-bottom: 1px solid #495057 !important;
    }
    
    [data-theme="dark"] .hero-title {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .hero-subtitle {
        color: #adb5bd !important;
    }
    
    [data-theme="dark"] .search-bar {
        background: #2c3e50 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    }
    
    [data-theme="dark"] .search-input {
        background: transparent !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .search-input::placeholder {
        color: #6c757d !important;
    }
    
    [data-theme="dark"] .search-location {
        border-right-color: #495057 !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .search-location span {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .keyword {
        background: #495057 !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .keyword:hover {
        background: #6c757d !important;
    }
    
    [data-theme="dark"] .keywords-label {
        color: #adb5bd !important;
    }
    
    [data-theme="dark"] .popular-items {
        background: #1a1a1a !important;
    }
    
    [data-theme="dark"] .item-card {
        background: #2c3e50 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    }
    
    [data-theme="dark"] .item-title {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .item-location {
        color: #adb5bd !important;
    }
    
    [data-theme="dark"] .item-image {
        background: #495057 !important;
    }
    
    [data-theme="dark"] .services {
        background: #212529 !important;
    }
    
    [data-theme="dark"] .service-card {
        background: #2c3e50 !important;
    }
    
    [data-theme="dark"] .service-card h3 {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .service-card p {
        color: #adb5bd !important;
    }
    
    [data-theme="dark"] .section-title {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .footer {
        background: #0d0d0d !important;
        border-top: 1px solid #495057 !important;
    }
    
    [data-theme="dark"] .modal-content {
        background: #2c3e50 !important;
        border-color: #495057 !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .modal-body {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .modal-body button {
        color: #e9ecef !important;
        background: #3a4a5c !important;
        border-color: #495057 !important;
    }
    
    [data-theme="dark"] .modal-body button:hover {
        background: #495057 !important;
    }
    
    [data-theme="dark"] .modal-header {
        background: #212529 !important;
        border-bottom-color: #495057 !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .modal-title {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .btn-close {
        filter: invert(1) !important;
    }
    
    [data-theme="dark"] .list-group-item {
        background: #3a4a5c !important;
        border-color: #495057 !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .list-group-item span {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .list-group-item i {
        color: #FF6F0F !important;
    }
    
    [data-theme="dark"] .list-group-item-action:hover {
        background: #495057 !important;
    }
    
    [data-theme="dark"] .form-control {
        background: #2c3e50 !important;
        border-color: #495057 !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .form-control::placeholder {
        color: #6c757d !important;
    }
    
    [data-theme="dark"] .input-group-text {
        background: #2c3e50 !important;
        border-color: #495057 !important;
        color: #adb5bd !important;
    }
    
    [data-theme="dark"] .offcanvas {
        background: #2c3e50 !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .offcanvas-header {
        background: #212529 !important;
        border-bottom-color: #495057 !important;
    }
    
    [data-theme="dark"] .offcanvas-title {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] .offcanvas-body a {
        color: #e9ecef !important;
        border-bottom-color: #495057 !important;
    }
    
    [data-theme="dark"] .offcanvas-body .text-muted {
        color: #adb5bd !important;
    }
    
    [data-theme="dark"] .form-select {
        background: #3a4a5c !important;
        border-color: #495057 !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] #chat-window {
        background: #2c3e50 !important;
        border-color: #495057 !important;
    }
    
    [data-theme="dark"] #chat-window > div:first-child {
        background: #212529 !important;
        border-bottom-color: #495057 !important;
    }
    
    [data-theme="dark"] #chat-window h3 {
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] #chat-window > div:nth-child(2) {
        background: #1a1a1a !important;
    }
    
    [data-theme="dark"] #chat-window > div:last-child {
        background: #2c3e50 !important;
        border-top-color: #495057 !important;
    }
    
    [data-theme="dark"] #chat-window input {
        background: #3a4a5c !important;
        border-color: #495057 !important;
        color: #e9ecef !important;
    }
    
    [data-theme="dark"] #chat-window input::placeholder {
        color: #6c757d !important;
    }
}