/* ========== 반응형 디자인 ========== */

/* 태블릿 (768px 이하) */
@media (max-width: 768px) {
    .header-inner {
        padding: 1rem 1.5rem;
    }

    .nav {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .hero {
        padding: 3rem 1.5rem;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-text p {
        font-size: 1rem;
    }

    .picker-section {
        padding: 3rem 1.5rem;
    }

    .section-inner h2 {
        font-size: 2rem;
    }

    .picker-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .preview-box {
        min-height: 300px;
    }

    .palette-row {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 0.75rem;
    }

    .palette-chip-color {
        height: 60px;
    }

    .tool {
        padding: 3rem 1.5rem;
    }

    .tool-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .panel {
        padding: 1.5rem;
    }

    .faq-section {
        padding: 3rem 1.5rem;
    }

    .faq-item {
        padding: 1.5rem;
    }
}

/* 모바일 (480px 이하) */
@media (max-width: 480px) {
    .logo-text {
        display: none;
    }

    .hero-text h1 {
        font-size: 1.75rem;
    }

    .hero-text p br {
        display: none;
    }

    .hero-badges {
        flex-direction: column;
    }

    .dropzone {
        padding: 2rem 1rem;
    }

    .dropzone-title {
        font-size: 1rem;
    }

    .btn {
        width: 100%;
    }

    .section-inner h2 {
        font-size: 1.75rem;
    }

    .section-desc {
        font-size: 1rem;
    }

    .preview-card,
    .color-card {
        padding: 1.5rem;
    }

    .color-codes {
        flex-direction: column;
        gap: 0.5rem;
    }

    .palette-row {
        grid-template-columns: repeat(3, 1fr);
    }
}