/* ============================================================ Common: Mobile sidebar (hamburger menu) サイドバーを持つ全ページからで読み込む共通CSS。 JS不要・CSSのみ（チェックボックスハック）。 --- 必要な HTML 構造 --- 1) 直下に input + overlay を置く（.shell の直前）: 2)

の先頭にハンバーガーボタン: 3)

内に

がある（既存どおり） --- 読み込み順 --- 各ページので、こうすると共通CSSが後勝ちで優先される。 --- 依存する CSS 変数 --- --ink-2 / --line-soft（各ページの :root に定義済み・無ければフォールバック値） ============================================================ */ /* チェックボックス: 不可視だが操作は通す */ .nav-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ハンバーガーボタン: デスクトップでは非表示 */ .nav-toggle-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 8px; border-radius: 8px; color: var(--ink-2, #2A3140); cursor: pointer; } .nav-toggle-btn:hover { background: var(--line-soft, #F4F5F7); } .nav-toggle-btn svg { width: 22px; height: 22px; } /* Floating variant: ページに

が無い場合に使う。左上に fixed で浮かせ、白背景 + 影でコンテンツと重なっても視認できるようにする。 */ .nav-toggle-btn--floating { position: fixed; top: 8px; left: 8px; z-index: 95; margin-right: 0; background: var(--card, #FFFFFF); border: 1px solid var(--border, var(--line, #E5E7EB)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* 閉じる × ボタン: サイドバー右上に置く。オフキャンバス時にタップで閉じるための明示的な手がかり。デスクトップでは非表示、≤768px のみ表示。 */ .nav-close-btn { display: none; position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; color: var(--ink-3, var(--text-mute, #909AA6)); z-index: 1; } .nav-close-btn:hover { background: var(--line-soft, var(--border-soft, #F4F5F7)); color: var(--ink, var(--text, #111827)); } .nav-close-btn svg { width: 18px; height: 18px; } @media (max-width: 768px) { .nav-close-btn { display: inline-flex; } } /* オーバーレイマスク: 閉じる用にもなる（label が input をトグル） */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(10, 15, 26, 0.4); z-index: 90; cursor: pointer; } /* ===== ≤ 768px: サイドバーをオフキャンバスに ===== */ /* Note: 12ページは grid container が .shell、meeting-analysis.html だけ .app を使う。両対応のため両方のセレクタに同じルールを当てる。 */ @media (max-width: 768px) { .shell, .app { grid-template-columns: 1fr; } aside.nav { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 82vw; /* height: 100vh だとアドレスバー高さを差し引かないため、底辺が隠れて user-card が切れる。 top: 0 + bottom: 0 で実表示領域に合わせる。 */ height: auto; z-index: 100; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14); } /* :checked でメニューを表示 */ .nav-toggle-input:checked ~ .shell aside.nav, .nav-toggle-input:checked ~ .app aside.nav { transform: translateX(0); } .nav-toggle-input:checked ~ .nav-overlay { display: block; } /* ハンバーガーボタンを表示 */ .nav-toggle-btn { display: inline-flex; } }