/* src/static_codeatlas/css/mobile.css */

/* ============================================
   モバイルファースト ベース
   ============================================ */

/* タッチターゲット最適化 */
button,
.btn,
.nav-item,
.menu-item,
.clickable {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 768px) {
    html { font-size: 15px; }
    body { font-size: 0.95rem; }

    .app-header {
        height: 48px;
        padding: 0 var(--spacing-sm);
    }
    .app-header .app-logo { font-size: 1rem; }
    .app-header .app-logo i { font-size: 1.1rem; }
    .app-header .user-name { display: none; }
    .app-header .user-avatar { width: 28px; height: 28px; font-size: 1.1rem; }
    .app-header .login-btn span { display: none; }
    .app-header .login-btn { padding: 6px 10px; }

    .app-footer { display: block; }
    .bottom-nav { padding: 4px 0; }
    .bottom-nav .nav-item { padding: 2px 8px; font-size: 0.6rem; }
    .bottom-nav .nav-item i { font-size: 1.3rem; }

    .side-menu { width: 280px; left: -100%; top: 0; height: 100%; }
    .side-menu.open { left: 0; }
    .side-menu .menu-item { padding: 14px var(--spacing-lg); font-size: 1rem; }

    .btn { padding: 12px 16px; font-size: 0.85rem; min-height: 44px; width: 100%; justify-content: center; }
    .btn-sm { padding: 8px 12px; min-height: 36px; }

    .toast-container { bottom: 72px; width: 92%; max-width: 400px; }
    .toast { padding: 10px 16px; font-size: 0.85rem; min-height: 44px; }

    .app-main { padding: 12px; }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    .app-header .app-logo span { display: none; }
    .bottom-nav .nav-item span { display: none; }
    .bottom-nav .nav-item i { font-size: 1.5rem; }
}

/* ============================================
   ダークモード
   ============================================ */
@media (prefers-color-scheme: dark) {
    .bottom-nav { background: var(--bg-white); }
}