/*
* スマートフォン向けの表示（会員ページ index.html・ゲストページ guest.html が読み込む。管理画面は読み込まない）
* 仕様: モバイル表示_変更仕様書.md
*
* - スマホ幅（600px以下）のときだけ表示を切り替える。PC幅の見た目は変えない。
* - @media (max-width:600px) の外に書いてよいのは次の2つだけ：
* 1) .sp-only の非表示（PC幅ではスマホ専用の要素を出さない）
* 2) タッチ端末の入力欄の文字16px（@media (pointer:coarse)。横向きのスマホ・タブレットで入力時の自動拡大を防ぐ）
* - 出し分け: .sp-only = スマホ幅だけ表示 / .pc-only = PC幅だけ表示
* - 目印のクラス（mb-*）: このファイルが指定する部品に付ける
* mb-ra* ホームの役割アサイン状況（shared_meeting_views.js、configure({mobile:true}) のとき）
* mb-zoom* Zoom の参加ボタンと ID・パスコード
* mb-illust 例会の画像
* mb-head プログラム・議事録・次回例会情報の見出し部分
* mb-export Excel・PDF出力のボタンの並び
* mb-agenda 次第の表
* mb-sum* スピーチ履歴の全体サマリ（pathwaysSummaryHtml(paths,{mobile:true}) のとき）
* mb-pr* スピーチ履歴のツリーのプロジェクト行
* mb-oc 他クラブのスピーチ一覧
* mb-savebar コメントの「まとめて保存」の帯
* mb-inbox 受信箱のコメント
* mb-full スマホ幅で画面幅いっぱいにする要素
* mb-gnav ゲストページのタブ
* mb-tab-short スマホ幅で短い名前（data-short）に差し替えるタブ
*/
:root { --mb-accent: #1a73e8; }
/* 1) スマホ専用の要素は PC幅では出さない */
.sp-only { display: none; }
/* 2) タッチ端末の入力欄は文字16px（高さ・配置は変えない） */
@media (pointer: coarse) {
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
select, textarea, .tt-combo-txt, .csel-trigger {
font-size: 16px !important;
}
}
@media (max-width: 600px) {
/* ---- 出し分け ---- */
.pc-only { display: none !important; }
.sp-only { display: revert; }
/* ---- C2 ヘッダー ---- */
header { height: 48px; padding: 0 12px; }
header h1 { font-size: 15px; }
.header-right { gap: 8px; font-size: 12px; }
#header-user { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.header-right button { padding: 6px 9px; font-size: 11px; }
/* ---- C1 タブ（7等分で1行に） ---- */
nav button { flex: 1 1 0; padding: 7px 0 6px; font-size: 10px; gap: 2px; min-width: 0; white-space: nowrap; letter-spacing: -.2px; }
nav button .nav-icon { font-size: 18px; }
nav button .nav-badge { top: 1px; right: 1px; font-size: 8px; padding: 1px 3px; }
/* 長いタブ名はスマホ幅で短く（PC幅の文字はそのまま。data-short の文字に差し替える） */
nav button.mb-tab-short { font-size: 0; }
nav button.mb-tab-short::after { content: attr(data-short); font-size: 10px; }
/* ---- C5 余白 ---- */
.page { padding: 12px; }
.card { padding: 12px; }
/* ---- C6 はみ出し防止 ---- */
.page .card { overflow-wrap: anywhere; }
.page img { max-width: 100%; }
/* ---- C4 ボタン ---- */
.btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.btn.btn-sm { min-height: 34px; }
/* ---- C3 入力欄 ---- */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
select, .tt-combo-txt, .csel-trigger {
font-size: 16px !important; min-height: 44px;
}
textarea { font-size: 16px !important; }
.form-row input, .form-row select, .form-row textarea { width: 100%; }
/* ---- C7 モーダル（全画面・下部ボタン固定） ---- */
.modal-overlay.open { align-items: stretch; justify-content: stretch; }
.modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; padding: 14px 12px 0; }
.modal .modal-footer, .modal .modal-actions { position: sticky; bottom: 0; background: #fff; margin: 16px -12px 0; padding: 10px 12px; border-top: 1px solid #e3e6ea; z-index: 1; }
/* ---- H1〜H3 ホームの役割アサイン状況（役割ごとの行） ---- */
table.mb-ra, table.mb-ra tbody { display: block; width: 100%; }
table.mb-ra thead { display: none; }
table.mb-ra tr.mb-ra-row {
display: grid; grid-template-columns: auto auto 1fr auto;
grid-template-areas: "role role role st" "name att cnt st";
align-items: center; column-gap: 6px; row-gap: 2px; padding: 8px 2px; border-bottom: 1px solid #f1f1f1;
}
table.mb-ra td { padding: 0 !important; border: none; text-align: left !important; white-space: normal; }
table.mb-ra td.mb-ra-role { grid-area: role; font-size: 13px; font-weight: bold; }
table.mb-ra td.mb-ra-name { grid-area: name; font-size: 13px; }
table.mb-ra td.mb-ra-att { grid-area: att; font-size: 11px; }
table.mb-ra td.mb-ra-cnt { grid-area: cnt; font-size: 11px !important; color: #999; }
table.mb-ra td.mb-ra-st { grid-area: st; justify-self: end; }
table.mb-ra td.mb-ra-st .badge-role-status { font-size: 11px; padding: 4px 9px; white-space: nowrap; }
table.mb-ra tr.mb-ra-grp { display: block; }
table.mb-ra tr.mb-ra-grp td { display: block; font-size: 11px; font-weight: bold; color: #888; padding: 10px 0 2px !important; }
table.mb-ra tr.mb-ra-me { background: #fffaf0; border-radius: 6px; margin: 0 -6px; padding: 8px 8px; }
.mb-ra-you { display: inline-block; font-size: 10px; font-weight: bold; background: #f57c00; color: #fff; padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: middle; }
/* ---- H5・H6 出欠ボタン・役割の確認ボタン ---- */
.btn-att { min-width: 42px; min-height: 38px; font-size: 15px; }
#home-roles .btn, #home-upcoming-roles .btn { min-height: 36px; }
/* ---- H7・R2 Zoom の参加ボタン ---- */
.mb-zoom { display: block; margin-top: 6px; }
.mb-zoom-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1.5px solid var(--mb-accent); color: var(--mb-accent); border-radius: 8px; font-size: 13px; font-weight: bold; text-decoration: none; }
.mb-zoom-id { display: block; font-size: 11px; color: #888; margin-top: 6px; }
/* ---- H8・R1 例会の画像 ---- */
img.mb-illust, .mb-illust img { width: 56px !important; height: 56px !important; }
div.mb-illust { min-width: 0 !important; flex-shrink: 0; }
/* ---- R3 次第（時刻の列を最小幅に） ---- */
table.mb-agenda td:first-child { width: 1%; padding-right: 12px !important; }
/* ---- R4 出力ボタン ---- */
.mb-export .btn { font-size: 12px; padding: 0 12px; }
/* ---- S1 スピーチ履歴の全体サマリ（2列） ---- */
table.mb-sum, table.mb-sum tbody { display: block; width: 100%; }
table.mb-sum tr.mb-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
table.mb-sum { border-collapse: separate !important; }
table.mb-sum tr.mb-sum-row { border-bottom: 1px solid #eee !important; }
table.mb-sum td { width: auto !important; padding: 5px 6px !important; border: none !important; }
table.mb-sum td.mb-sum-elc:empty { display: none; }
table.mb-sum td.mb-sum-lv { flex: 1 1 auto; }
table.mb-sum td.mb-sum-req, table.mb-sum td.mb-sum-elc { flex: 0 0 auto; }
table.mb-sum td.mb-sum-done { display: none; }
/* ---- S3 ツリーの1行を2段に ---- */
summary.mb-pr { flex-wrap: wrap; row-gap: 3px; }
summary.mb-pr .mb-pr-name { flex: 1 1 calc(100% - 30px); min-width: 0; }
summary.mb-pr .mb-pr-kind { margin-left: 24px; }
/* ---- S4 他クラブのスピーチ一覧（カード） ---- */
table.mb-oc, table.mb-oc tbody { display: block; width: 100%; }
table.mb-oc thead { display: none; }
table.mb-oc tr.mb-oc-row {
display: grid; grid-template-columns: auto 1fr; grid-template-areas: "date club" "title title" "type ops";
align-items: center; column-gap: 8px; row-gap: 4px; border: 1px solid #e3e6ea; border-radius: 8px; padding: 9px 10px; margin-bottom: 8px;
}
table.mb-oc td { padding: 0; border: none; white-space: normal; }
table.mb-oc td.mb-oc-date { grid-area: date; font-size: 12px; color: #888; }
table.mb-oc td.mb-oc-club { grid-area: club; font-size: 12px; color: #888; }
table.mb-oc td.mb-oc-title { grid-area: title; font-weight: bold; }
table.mb-oc td.mb-oc-type { grid-area: type; font-size: 11px; }
table.mb-oc td.mb-oc-ops { grid-area: ops; justify-self: end; display: flex; gap: 6px; }
/* ---- V1・V4 全幅の要素（例会の選択欄・投票ボタン） ---- */
.mb-full { display: flex; width: 100% !important; }
select.mb-full { display: block; }
.card-title:has(> select.mb-full) { flex-direction: column; align-items: stretch; }
/* ---- V2・V3 コメントの「まとめて保存」の帯 ---- */
.mb-savebar.sp-only { display: flex; }
.mb-savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; align-items: center; gap: 10px;
background: #fff; border-top: 1px solid #dfe3e8; box-shadow: 0 -2px 8px rgba(0,0,0,.06); padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); }
.mb-savebar-count { flex: 1; font-size: 12px; color: #666; }
#page-comments { padding-bottom: 84px; }
/* ---- I1 受信箱（名前＋役割／本文の2段） ---- */
table.mb-inbox, table.mb-inbox tbody { display: block; width: 100%; }
table.mb-inbox tr.mb-inbox-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "name cat" "body body"; column-gap: 6px; padding: 10px 0; }
table.mb-inbox td { padding: 0 !important; }
table.mb-inbox td.mb-inbox-name { grid-area: name; font-weight: bold; color: #333 !important; }
table.mb-inbox td.mb-inbox-cat { grid-area: cat; align-self: center; }
table.mb-inbox td.mb-inbox-cat:not(:empty) span, table.mb-inbox td.mb-inbox-cat { font-size: 10px !important; color: #1a73e8 !important; }
table.mb-inbox td.mb-inbox-body { grid-area: body; margin-top: 4px; }
/* ---- L1 議事録一覧（行の高さと「›」） ---- */
.meeting-list-item { position: relative; padding: 12px 22px 12px 2px; }
.meeting-list-item::after { content: '›'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: #bbb; font-size: 20px; }
/* ---- L3 ログイン ---- */
.login-card { width: calc(100% - 32px); padding: 28px 18px; }
/* ==== ゲストページ（guest.html、body.mb-guest）。上の共通の指定を共有し、ここで差分だけ指定する ==== */
.mb-guest { --mb-accent: #0f766e; }
.mb-guest header { height: 56px; padding: 0 12px; }
nav.mb-gnav { top: 56px; } /* ヘッダーの高さに合わせて、スクロール時にタブがヘッダーの下に潜らないように */
.mb-guest .wrap { padding: 12px; }
.mb-guest .page { padding: 0; }
/* タブ: 元の文字（「📋 プログラム」など）は隠し、data-icon（上）・data-label（下）で表示する */
nav.mb-gnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0 !important; }
nav.mb-gnav button::before { content: attr(data-icon); font-size: 18px; line-height: 1; }
nav.mb-gnav button::after { content: attr(data-label); font-size: 10px; margin-top: 3px; }
.mb-guest #page-vote .btn:not(.btn-sm), .mb-guest #page-speaker .btn:not(.btn-sm) { width: 100%; }
}
@media (max-width: 360px) {
nav button { font-size: 9px; letter-spacing: -.4px; }
nav button.mb-tab-short { font-size: 0; }
nav button.mb-tab-short::after { font-size: 9px; }
}