/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    #main-nav { flex-direction: column; gap: 12px; padding: 12px 16px; }
    .nav-tabs { flex-wrap: wrap; justify-content: center; }
    .hero-content h1 { font-size: 32px; }
    .hero-container { padding: 40px 20px; min-height: 400px; }
    .hero-actions { flex-direction: column; }
    .hero-stats { gap: 16px; }
    .room-body { flex-direction: column; }
    .chat-sidebar { width: 100%; height: 250px; border-left: none; border-top: 1px solid var(--border); }
    .members-grid { grid-template-columns: 1fr; }
    .room-header { flex-direction: column; gap: 10px; padding: 12px 16px; }
    .room-header-right { justify-content: center; }
    .room-list-section { padding: 0 16px 40px; }
    .review-stats { flex-direction: column; gap: 12px; }
    .distraction-form { flex-direction: column; }
    .status-options { grid-template-columns: 1fr; }
    .memo-page-container { padding: 24px 16px; }
    .memo-page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .focus-container { padding: 40px 16px; }
    .bgm-widget { bottom: 16px; right: 16px; }
    .bgm-panel { width: 260px; }
}