/* FILE: assets/css/wireframe.css */ /* ワイヤーフレーム表示専用のスタイル。 Phase 2で実画像・実本文を流し込む際は、このファイルの読み込みを 各HTMLのから外すだけで「ワイヤー表示」を丸ごと解除できる。 （HANDOVER_v3.md には無い、Phase 1限定の作業用ファイル） */ /* --- 画像・動画プレースホルダ枠 --- */ .wf-media { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; background-color: var(--color-wf-bg); border: 2px dashed var(--color-wf-border); color: var(--color-ink-sub); text-align: center; overflow: hidden; } .wf-media__note { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6; padding: var(--space-sm); } .wf-media__note .wf-media__filename { display: block; font-weight: var(--fw-bold); color: var(--color-ink); overflow-wrap: break-word; } .wf-media__note .wf-media__meta { display: block; color: var(--color-muted); } /* プレースホルダの比率指定（HTMLにstyle="aspect-ratio"を直書きしないため） */ .wf-media--1x1 { aspect-ratio: 1 / 1; } .wf-media--4x3 { aspect-ratio: 4 / 3; } .wf-media--3x4 { aspect-ratio: 3 / 4; } .wf-media--16x9 { aspect-ratio: 16 / 9; } .wf-media--16x10 { aspect-ratio: 16 / 10; } .wf-media--16x7 { aspect-ratio: 16 / 7; } .wf-media--16x6 { aspect-ratio: 16 / 6; } /* --- 原稿未確定箇所（TODO） --- */ .wf-todo { background-color: rgba(242, 194, 0, 0.15); border-bottom: 2px solid var(--color-wf-todo); padding: 0 0.15em; } /* --- セクションのデバッグラベル --- */ .wf-label { position: absolute; top: -1.4em; left: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: #FFFFFF; background-color: #555; padding: 2px 6px; z-index: 10; white-space: nowrap; /* 狭い画面ではラベルが長くて横スクロールが出てしまうので、 はみ出した分は隠す（Phase 1の作業用表示なので内容が切れても支障はない） */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .wf-section { position: relative; outline: 1px dashed rgba(0,0,0,0.15); outline-offset: 4px; margin-top: 1.6em; } /* --- ワイヤーフレーム全体であることの目印（ページ最上部の帯） --- */ .wf-banner { background-color: #1A1A1A; color: #FFD400; font-family: var(--font-mono); font-size: var(--fs-xs); text-align: center; padding: 4px; position: sticky; top: 0; z-index: 200; } /* ワイヤー帯がsticky headerと重ならないようにする */ .wf-banner ~ .site-header { top: 1.9em; } /* ========================================================= （Phase 1限定でナビを展開表示していた記述は削除しました。 ハンバーガーメニューを layout.css + assets/js/nav-toggle.js で 実装したため、暫定表示は不要になりました。） ========================================================= */ /* ========================================================= /wireframe-index/ 専用（Phase 1限定のページ） ========================================================= */ .wf-index__intro { max-width: 42em; margin-bottom: var(--space-lg); } .wf-index__table { width: 100%; border-collapse: collapse; background-color: var(--color-surface); font-size: var(--fs-sm); } .wf-index__table th, .wf-index__table td { border: var(--line-width) solid var(--color-line); padding: var(--space-xs) var(--space-sm); text-align: left; vertical-align: top; } .wf-index__table th { background-color: var(--color-accent); font-weight: var(--fw-bold); white-space: nowrap; } .wf-index__table td a { font-weight: var(--fw-bold); text-decoration: underline; } .wf-index__status { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); padding: 0.1em 0.5em; border-radius: var(--radius-sm); white-space: nowrap; } .wf-index__status--done { background-color: #D6EAD6; } .wf-index__status--pending { background-color: #F5E3B3; } .wf-index__status--none { background-color: #E4E4E4; color: var(--color-muted); } /* 狭い画面では表を横スクロールさせる（つぶさない） */ .wf-index__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }