/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .home-hero { padding: 60px 16px 40px; }
    .hero-brand { font-size: 24px; }
    .home-title { font-size: 18px; }
    .home-subtitle { font-size: 12px; }
    .hero-search-wrap { flex-direction: column; }
    .btn-search { width: 100%; }
    .hero-tags { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }

    .method-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-item { padding: 0 20px; }

    .create-layout { flex-direction: column; }
    .create-config { width: 100%; }
    .create-output { min-height: 480px; }
    .credit-badge-group { flex-direction: column; align-items: flex-end; gap: 6px; }
    .product-grid { grid-template-columns: 1fr; }
    .main-nav { display: none; }
    .mobile-menu-toggle { display: flex; }
    .header-inner { padding: 0 16px; }
    .container { padding: 0 16px; }

    .works-list { grid-template-columns: 1fr; }
    .works-toolbar { flex-direction: column; align-items: stretch; }
    .works-search { width: 100%; }
    .works-header { flex-direction: column; align-items: flex-start; gap: 12px; }

    .modal-detail { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
    .modal-detail-body { flex-direction: column; }
    .modal-detail-main { border-right: none; border-bottom: 1px solid #f0f0f0; }
    .modal-detail-sidebar { width: 100%; }

    .share-modal-box { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
    .share-preview-card { width: 100%; max-width: 340px; }

    .lyrics-optimize-bar, .style-optimize-bar { flex-direction: column; }
    .lyrics-optimize-input-wrap, .style-optimize-input-wrap { width: 100%; }
    .lyrics-optimize-bar .btn, .style-optimize-bar .btn { width: 100%; }
}