...
// 中型 (md, default)
// コンパクト (Roster 等)
// 大型 (Concerts 等)
============================================================ */
.orch-card-grid {
display: grid;
/* min(100%, MIN) で超狭いコンテナでも 1 列に綺麗に収まる */
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
gap: var(--orch-sp-3, 1rem);
}
.orch-card-grid--sm {
/* コンパクトカード (例: 団員カード) - 約 160px */
grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
}
.orch-card-grid--lg {
/* 大型カード (例: 演奏会カード / ホーム機能カード) - 約 320px */
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
/* ============================================================
団員名簿カテゴリクイックナビ (Sticky section nav + scroll-spy)
2026-05-22 Phase 2 + Phase 2.1
設計書: docs/development/roster-category-quicknav-2026-05-22.md
Phase 2.1 修正 (1段固定 + ラベル切替 + ARIA 強化):
- flex-wrap: nowrap で常に 1 段 (二段化による scroll-margin ずれ解消)
- chip ラベルは xs (<576px) で短縮 / sm 以上でフル表示
- scroll-margin-top を CSS 変数 --orch-quicknav-h と calc で同期
============================================================ */
.orch-roster-quicknav {
/* nav の高さを CSS 変数として公開し scroll-margin-top と単一化 */
--orch-quicknav-h: 3.5rem; /* chip 44px + padding 上下 0.5rem */
/* 2026-05-22 Phase 2.2: position:fixed 化
理由: iOS Safari の flex column 親内で sticky が不安定なため
設計書: docs/development/roster-category-quicknav-2026-05-22.md §11 */
position: fixed;
top: var(--orch-topbar-h, 56px); /* topbar の真下 */
left: 0;
right: 0;
z-index: 1010; /* topbar (1020) より下、コンテンツより上 */
background-color: var(--orch-surface, #fff);
border-bottom: 1px solid var(--orch-border, #e5e7eb);
padding: var(--orch-sp-2, 0.5rem) var(--orch-sp-3, 1rem);
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.orch-roster-quicknav-list {
display: flex;
flex-wrap: nowrap; /* Phase 2.1: 常に 1 段。あふれは横スクロール */
gap: var(--orch-sp-2, 0.5rem);
overflow-x: auto;
overflow-y: hidden;
/* Phase 2.3 (2026-05-22): タッチパンでの横スクロールを iOS / Android で安定動作
設計書: docs/development/roster-category-quicknav-2026-05-22.md §12 */
-webkit-overflow-scrolling: touch; /* iOS の慣性スクロール */
touch-action: pan-x; /* 横パンを明示 (iOS の縦解釈を防ぐ) */
overscroll-behavior-x: contain; /* 横スクロール時に親の縦スクロールへ伝播しない */
/* Phase 2.2: fixed 化に伴い、内側で max-width を吸収 */
max-width: 1280px;
margin: 0 auto;
padding: 0;
list-style: none;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
/* fixed 化により document flow から外れるため、領域確保用 spacer */
.orch-roster-quicknav-spacer {
height: var(--orch-quicknav-h, 3.5rem);
}
.orch-roster-quicknav-list > li {
flex: 0 0 auto;
scroll-snap-align: start;
}
.orch-roster-quicknav-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px; /* WCAG 2.5.5 タッチターゲット */
padding: 0.4rem 0.8rem;
background-color: var(--orch-surface-alt, #f3f4f6);
border: 1px solid transparent;
border-radius: 999px; /* pill */
color: var(--orch-text, #111);
font-size: var(--orch-fs-sm, 0.875rem);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
white-space: nowrap;
}
.orch-roster-quicknav-chip:hover,
.orch-roster-quicknav-chip:focus-visible {
background-color: var(--orch-primary-soft, #e0e7ff);
border-color: var(--orch-primary, #4f46e5);
outline: none;
}
.orch-roster-quicknav-chip.is-active {
background-color: var(--orch-primary, #4f46e5);
color: var(--orch-on-primary, #fff);
border-color: var(--orch-primary, #4f46e5);
}
.orch-roster-quicknav-chip-emoji {
font-size: 1.1em;
line-height: 1;
}
/* ラベル切替: Bootstrap 5 breakpoint sm (576px) に合わせる
- xs (<576px): 短縮ラベル (弦/木管/金管/打/未設定)
- sm 以上: フルラベル (弦楽器/木管/金管/打楽器・その他/パート未設定) */
.orch-roster-quicknav-chip-label-short,
.orch-roster-quicknav-chip-label-full {
font-weight: 500;
}
.orch-roster-quicknav-chip-label-short { display: inline; }
.orch-roster-quicknav-chip-label-full { display: none; }
@media (min-width: 576px) {
.orch-roster-quicknav-chip-label-short { display: none; }
.orch-roster-quicknav-chip-label-full { display: inline; }
}
.orch-roster-quicknav-chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5em;
padding: 0 0.4em;
background-color: rgba(0, 0, 0, 0.08);
border-radius: 999px;
font-size: 0.75em;
line-height: 1;
}
.orch-roster-quicknav-chip.is-active .orch-roster-quicknav-chip-count {
background-color: rgba(255, 255, 255, 0.25);
}
/* scroll target は CSS 変数 (nav 高さ) と同期 → 将来 nav 高さ変更も 1ヶ所修正
Phase 2.2: fixed 化のため topbar の高さも加算 */
[data-roster-category-anchor] {
scroll-margin-top: calc(
var(--orch-topbar-h, 56px)
+ var(--orch-quicknav-h, 3.5rem)
+ 0.5rem
);
}
@media (prefers-reduced-motion: reduce) {
.orch-roster-quicknav-chip {
transition: none;
}
}
/* 2026-05-23: PC でのサイドパネル被り解消 + topbar 下に配置
.orch-roster-quicknav は position: fixed; left: 0; right: 0 で viewport 全幅。
PC (min-width: 641px) ではサイドパネル幅分 left をオフセットし、
app topbar の下に配置する。 */
@media (min-width: 641px) {
.orch-roster-quicknav {
top: var(--orch-topbar-h, 56px);
left: var(--orch-sidebar-w, 260px);
}
}
/* ページ内見出し — モバイルでは通常フロー、PC 2ペインで sticky */
.orch-sticky-heading {
position: static;
background-color: var(--orch-bg, #f0f3f8);
padding: 0.5rem 0;
}
@media (min-width: 1100px) {
.orch-sticky-heading {
position: sticky;
top: var(--orch-topbar-h, 56px);
z-index: 1010;
background-color: var(--orch-surface, #fff);
}
.orch-practice-heading {
position: static;
top: auto;
z-index: auto;
background-color: var(--orch-bg, #f0f3f8);
}
}
/* 2026-05-23 Profile.razor の