/* ワイヤーフレーム用。装飾なし。ブロックの境界と data-block 名だけ見せる。
   本番のデザインは別で作る。デザインは data-block 名を単位に当てる前提。 */
:root { --ink: #222; --line: #999; --faint: #f4f4f4; --label: #a00; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; color: var(--ink); background: #fff; }
main { max-width: 960px; margin: 0 auto; padding: 0 16px; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; background: #ddd; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }

/* すべてのブロックに枠と名前 */
[data-block] { position: relative; border: 1px dashed var(--line); padding: 12px; margin: 8px 0; }
[data-block]::before { content: attr(data-block); position: absolute; top: -1px; left: -1px; font-size: 10px; line-height: 1; padding: 2px 4px; color: #fff; background: var(--label); opacity: .75; }
[data-block="placeholder"] { background: var(--faint); color: #555; border-style: dotted; }
[data-block="placeholder"]::before { content: "placeholder"; background: #666; }
[data-block="claim"]::before { background: #06c; }

/* インライン要素は枠なし */
[data-block="operator-badge"], [data-block="video-views"], [data-block="video-date"], [data-block="video-duration"],
[data-block="channel-name"], [data-block="source-link"], [data-block="source-org"], [data-block="deadline-when"],
[data-block="deadline-where"], [data-block="claim-cost"], [data-block="claim-deadline"], [data-block="scene-title"],
[data-block="scene-deadline-hint"], [data-block="scene-video-count"], [data-block="pr-label"], [data-block="reviewed"],
[data-block="site-name"], [data-block="scene-source"] { display: inline; border: 0; padding: 0 4px; margin: 0; }
[data-block="operator-badge"]::before, [data-block="video-views"]::before, [data-block="video-date"]::before, [data-block="video-duration"]::before,
[data-block="channel-name"]::before, [data-block="source-link"]::before, [data-block="source-org"]::before, [data-block="deadline-when"]::before,
[data-block="deadline-where"]::before, [data-block="claim-cost"]::before, [data-block="claim-deadline"]::before, [data-block="scene-title"]::before,
[data-block="scene-deadline-hint"]::before, [data-block="scene-video-count"]::before, [data-block="pr-label"]::before, [data-block="reviewed"]::before,
[data-block="site-name"]::before, [data-block="scene-source"]::before { content: none; }
[data-block="operator-badge"] { border: 1px solid var(--line); border-radius: 3px; font-size: .8em; }
[data-block="pr-label"] { border: 1px solid var(--line); font-size: .8em; }

/* レイアウトの骨だけ */
[data-block="site-header"] { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; }
[data-block="global-nav"] a { margin-right: 16px; }
[data-block="video-grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
[data-block="video-card"] h3 { margin: 4px 0; font-size: .95rem; }
[data-block="scene-list"] { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
[data-block="scene-list"] a { display: block; text-decoration: none; }
[data-block="scene-list"] a > * { display: block; }
[data-block="scene-facts"], [data-block="diy-or-hire"], [data-block="scene-nav"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
[data-block="video-body"] { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 8px; }
[data-block="player"] { aspect-ratio: 16 / 9; background: #ddd; padding: 0; }
[data-block="player"] iframe { width: 100%; height: 100%; border: 0; }
[data-block="player-poster"] { width: 100%; height: 100%; border: 0; background: none; cursor: pointer; padding: 0; }
[data-block="player-poster"] img { width: 100%; height: 100%; object-fit: cover; }
[data-block="filter-operator"] button[aria-pressed="true"] { font-weight: bold; }
[data-block="search-results"] { list-style: none; padding: 0; }
[data-block="search-results"] li { border-bottom: 1px solid var(--line); padding: 4px 0; }
[data-tone="heavy"] [data-block="tagline-vision"] { display: none; }
@media (max-width: 640px) { [data-block="video-body"] { grid-template-columns: 1fr; } body { font-size: 17px; } }