/* 響應式設計 - Responsive Design */

/* 深色模式下的響應式適配 */
@media (prefers-color-scheme: dark) {
    /* 確保在小屏幕設備上深色模式正常工作 */
    .container {
        background: transparent;
    }
}

/* 手動淺色模式下的響應式適配 */
[data-theme="light"] .container {
    background: transparent;
}

/* 手動深色模式下的響應式適配 */
[data-theme="dark"] .container {
    background: transparent;
}

/* 平板設備 */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-lg);
    }
    
    header h1 {
        font-size: 2rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .search-section {
        padding: var(--spacing-lg);
    }
    
    .input-group {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        align-items: stretch;
    }
    
    #ipInput {
        flex: 1;
        min-width: 200px;
    }
    
    .ip-version-select {
        flex-shrink: 0;
        min-width: 120px;
        font-size: 14px;
        padding: 10px 12px;
    }
    
    #searchBtn {
        width: 100%;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .detail-value {
        text-align: left;
    }
    
    .ip-display {
        font-size: 1.2rem;
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    
    .acg-image {
        max-height: 300px;
    }
    
    .acg-container {
        padding: 20px 15px;
    }
    
    .header-bg {
        opacity: 0.05;
    }
}

/* 手機設備 */
@media (max-width: 480px) {
    .input-group {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    #ipInput {
        width: 100%;
        min-width: auto;
    }
    
    .ip-version-select {
        width: 100%;
        min-width: auto;
    }
    
    #searchBtn {
        width: 100%;
    }
    
    .quick-actions {
        flex-direction: column;
    }
    
    .quick-btn {
        width: 100%;
    }
    
    .detail-grid {
        grid-template-columns: 1fr;
    }
    
    .risk-overview {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .ip-details {
        margin-left: 0;
        margin-top: 15px;
    }
    
    .acg-section {
        padding: 0 10px;
    }
    
    .acg-container {
        padding: 15px 10px;
    }
    
    .threat-intelligence-section {
        padding: 20px 15px;
    }
}