/* ========================================
   Responsive Styles
======================================== */

/* Extra Large Devices (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Large Devices (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .search-form .input-group {
        width: 250px;
    }
    
    .category-list li a {
        padding: 10px 12px;
        font-size: 11px;
        min-width: 80px;
    }
    
    .category-list li a img {
        width: 28px;
        height: 28px;
    }
}

/* Medium Devices (768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section-title {
        font-size: 28px;
    }
    
    .product-card {
        margin-bottom: 20px;
    }
    
    .service-card {
        padding: 25px 15px;
    }
    
    .board-box {
        margin-bottom: 20px;
    }
    
    /* Sidebar는 숨김, 메인 컨텐츠 전체 너비 */
    .category-sidebar {
        display: none !important;
    }
    
    .main-content {
        width: 100%;
    }
}

/* Small Devices (576px to 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .section-title {
        font-size: 24px;
    }
    
    .section-subtitle {
        font-size: 14px;
    }
    
    .product-name {
        font-size: 14px;
        min-height: 36px;
    }
    
    .product-icon img {
        width: 50px;
        height: 50px;
    }
    
    .service-card {
        padding: 20px 15px;
    }
    
    .service-title {
        font-size: 16px;
    }
    
    .service-desc {
        font-size: 13px;
    }
}

/* Extra Small Devices (less than 576px) */
@media (max-width: 575.98px) {

    
    /* Header */
    .main-header .navbar {
        padding: 10px 0;
    }
    
    .navbar-brand .logo {
        height: 32px;
    }
    
    .btn-cart {
        font-size: 20px;
    }
    
    /* Banner */
    .main-banner .carousel-item img {
        min-height: 200px;
        object-fit: cover;
    }
    
    /* Sections */
    .products-section,
    .service-section,
    .notice-section {
        padding: 30px 0 !important;
    }
    
    .section-title {
        font-size: 22px;
    }
    
    .section-subtitle {
        font-size: 13px;
    }
    
    /* Products */
    .product-card {
        margin-bottom: 15px;
    }
    
    .product-link {
        padding: 15px 10px;
    }
    
    .product-icon img {
        width: 40px;
        height: 40px;
    }
    
    .product-name {
        font-size: 13px;
        min-height: 32px;
        margin-bottom: 10px;
    }
    
    .discount-item {
        font-size: 11px;
    }
    
    /* Service */
    .service-card {
        padding: 20px 15px;
    }
    
    .service-icon img {
        width: 50px;
        height: 50px;
    }
    
    .service-title {
        font-size: 15px;
        margin-bottom: 10px;
    }
    
    .service-desc {
        font-size: 12px;
        line-height: 1.6;
    }
    
    /* Board */
    .board-header {
        padding: 15px 20px;
    }
    
    .board-title {
        font-size: 16px;
    }
    
    .btn-more {
        font-size: 13px;
    }
    
    .board-body {
        padding: 15px 20px;
    }
    
    .notice-item {
        padding: 10px 0;
    }
    
    .notice-title {
        font-size: 13px;
    }
    
    .notice-date {
        font-size: 11px;
    }
    
    /* Footer */
    .site-footer {
        margin-top: 60px;
    }
    
    .footer-top {
        padding: 30px 0 !important;
    }
    
    .footer-title {
        font-size: 15px;
        margin-bottom: 15px;
    }
    
    .footer-info li,
    .footer-links a {
        font-size: 12px;
    }
    
    .cs-phone a {
        font-size: 18px;
    }
    
    .footer-bottom {
        padding: 20px 0 !important;
    }
    
    .footer-bottom p {
        font-size: 11px;
    }
    
    .social-links .btn {
        font-size: 11px;
        padding: 6px 10px;
    }
    
    /* Floating Buttons */
    .floating-buttons {
        right: 10px;
        bottom: 70px;
    }
    
    .btn-float {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    .btn-float span {
        font-size: 8px;
    }
}

/* ========================================
   Landscape Mode (Mobile)
======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .floating-buttons {
        display: none;
    }
    
    .bottom-menu {
        display: none;
    }
}

/* ========================================
   Print Styles
======================================== */
@media print {
    .site-header,
    .site-footer,
    .floating-buttons,
    .bottom-menu {
        display: none;
    }
    
    body {
        padding-bottom: 0;
    }
}

/* ========================================
   High Resolution Displays
======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimize images for retina displays */
    .product-icon img,
    .service-icon img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   Dark Mode (Optional)
======================================== */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed */
    /* This is optional and can be implemented later */
}

/* ========================================
   Reduced Motion
======================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   Touch Device Optimizations
======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn,
    .category-list li a,
    .product-card,
    .notice-item {
        min-height: 44px;
    }
    
    /* Remove hover effects */
    .product-card:hover {
        transform: none;
    }
    
    .btn-float:hover {
        transform: none;
    }
}