に出力するため、セレクタに body. プレフィックスを付けてはならない。このファイルは td-root を含むページのみ enqueue されるため page-id ガードのみで他ページに影響しない。 ============================== */ .page-id-1242 .l-content.l-container { /* max-width 撤廃: viewport 幅一杯まで使う。 SWELL デフォルトの padding 64px 48px 0 から左右 padding を削減し、両サイドの余白を最小化。上下 padding は保持。 */ max-width: none; padding-left: 16px; padding-right: 16px; } .page-id-1242 .l-mainContent.l-article { max-width: none; } /* .td-root のベース max-width 1320px もハブでは解除 */ .page-id-1242 .td-root { max-width: none; } /* デスクトップでは ms nav を非表示（@media の前に置いて cascade で勝たせる） */ .td-ms-nav { display: none; } /* ============================== Phase 9-A Step 7 後段: スマホ専用レイアウト（<= 768px）既存ルール（display: grid 等）を上書きするため CSS 末尾に配置。 - サイドバー（プリセット + ドライバー選択）を上、main を下に並べ替えチャート見方より前にドライバー操作 UI が来る - ドライバーリストは折りたたみ default closed プリセットボタンとタイトルだけ常時表示、is-expanded で展開 - コースキャンバスを大きく（min-height: 50vh ≒ viewport 縦の半分） ============================== */ @media (max-width: 768px) { .td-layout { display: flex; flex-direction: column; gap: 12px; } .td-sidebar--left { order: 1; position: static; max-height: none; overflow: visible; } .td-main { order: 2; } .td-unified__title { cursor: pointer; display: flex; align-items: center; } .td-unified__title::after { content: "▼"; margin-left: auto; font-size: 0.85em; color: var(--td-muted); transition: transform 0.18s; } .td-unified.is-expanded .td-unified__title::after { transform: rotate(180deg); } .td-unified__head, .td-unified__rows { display: none; } .td-unified.is-expanded .td-unified__head { display: grid; } .td-unified.is-expanded .td-unified__rows { display: block; max-height: 60vh; overflow-y: auto; } /* スマホ時は body / root padding を圧縮して canvas の横幅を最大化。 min-height は使わず、JS のロジックで height を可変計算する（min-height で固定すると aspect ratio が崩れて横圧縮の見え方になる）。 */ body.td-standalone { padding: 0; } .td-root { padding: 4px; } /* ミニセクター送り UI: スマホ時のみ表示、コースキャンバス直下 */ .td-ms-nav { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 8px; margin-top: 4px; background: var(--td-panel); border: 1px solid var(--td-border); border-radius: 6px; } .td-ms-nav__prev, .td-ms-nav__next { padding: 4px 14px; background: var(--td-bg); border: 1px solid var(--td-border); border-radius: 4px; color: var(--td-text); cursor: pointer; font-size: 1em; min-width: 44px; min-height: 32px; line-height: 1; } .td-ms-nav__label { font-size: 0.82em; color: var(--td-text); font-variant-numeric: tabular-nums; min-width: 96px; text-align: center; line-height: 1.3; } .td-ms-nav__leader { display: block; font-size: 0.72em; color: var(--td-muted); margin-top: 2px; } }