/* member-archives-v1 — メンバー詳細のアーカイブの帯（2026-09-30）。member-detail-wide-v1.css の後に読む。台本は member-archives-v1.js。 オーナー 2026-09-30：「メンバー詳細ページにはそのメンバーのアーカイブをYTTwitch問わず4個まで出しちゃおうぜ。」 契約：docs/RENEWAL-BRAND-SYSTEM.md（色・書体・共通部品）、docs/DESIGN-DETAIL-STANDARD.md（8u、インクで測る）。 置き場所：冒頭の帯（ヒーロー。名前・CHANNELS・紹介文と右の絵と雲）の構図は変えず、その下・前後のメンバー（.mb-band--close）の前に 全幅の黒の帯 #08090e（下層ページの地）として足す。左右は閉じの帯と同じ .mb-band の --mb-gutter（中身の列 = --site-max。 1440 で左 136・右 1304、1024 で 24・1000、390 で 20・370。名前・CHANNELS・カードの列の左端がすべて同じガターに揃う）。 見出し：英字の ARCHIVES（LIVE ページの目次と同じ語）。組みはこのページの CHANNELS（.mb-ch-label）と同じ： Barlow Condensed 600・字間 0.2em・控えめな紙色、文字は type-floor-v1.css の下限（768 以上 15px、767 以下 14px）、行の箱 16。 カード：LIVE ページのアーカイブのカード（live-page-v1.css・live-member-cards-v1.css の .lp-archive-card）と同じ家族。 サムネイル 16:9（上端・左右いっぱい）・右下の長さの札・題 2 行で打ち切り・日付・配信先（同じ段では日付の行を下端に揃える）。 名前の行は同じ人なので省く。 色（撮り比べて決めた。member-archives-shots/cmp-m4-1440.png・cmp-m35-1440.png。左がメンバーの色、右が地に合わせる案）： そのメンバーの色にする（member-colors-v1.js の事前計算の値。LIVE ページのカードと同じ地 --mc-ground と上辺の信号線 --mc-signal）。 理由 1：地に合わせる案（地も線も出さず、サムネイルと文字を黒の帯に直に置く）では、暗いゲーム画面のサムネイル（なもじんの 4 本目など）の 縁が黒の帯に溶けて、カードの境目が消えた。LIVE のカードでオーナーが「境界がわかりづらい」と言い、メンバーの色の器を 入れたのと同じ問題（live-member-cards-v1.css の冒頭）。 理由 2：色はそのメンバーの絵（このページの主役）から取った 1 色なので、上の絵と下の帯がつながる（Sonata の青緑の絵 → 青緑の地）。 4 枚とも同じ人なので、色の数は増えない。 理由 3：LIVE ページ・ホームの待機アーカイブと、同じ人は同じ色で出る。 器の意味（DETAIL-STANDARD §1）：配信の記録＝その人のチャンネルの信号の器（サイバー）。上辺の 1px の信号線と、全員同じ明るさに 沈めた地だけ。和の要素は入れない（契約 §1：一つの部品に和とサイバーを混ぜない）。色が決まらないときの地は #1d1f25（LIVE と同じ）。 日付の行：緑（緑青）の文字 #8cc5a0（契約 §2「日付・小さな時系列の札の文字」。ホームの待機アーカイブ .lia-meta と同じく行ごと）。 反応（契約 §5 の 3 つのうち）：画像の寄り 1.03（motion-system-v3.css の [data-vp-card]）と、題を紙色へ。金にしない。 焦点（契約 §5）：四角い outline を使わず、題の文字に紙色の 2px の下線（home-fix-v1.css のカードと同じ値）。 入場：このページの本文（.mb-info）と同じ扱い（下の §4 と台本の followInfo）。散らした動きは足さない。 実測（ink.py、インクで測る。1440・1024 は PC の構図、768 以下は縦積み。詳しい表は member-archives-shots の報告） 夜空の下端 → ARCHIVES のインク 96（縦積みでは紹介文のインク → ARCHIVES のインク 96／スマホ 64） ARCHIVES のインク → カードの上端 32（スマホ 24） カードの間 32（スマホ 16）、縦横とも サムネイルの下端 → 題のインク 16、題のインク → 日付のインク 16、日付のインク → カードの下端 24（スマホ 16） 文字 ↔ カードの縁 24（スマホ 16）＝「文字 ↔ 器の縁」の最小値 最後のカードの下端 → PREV（前後のメンバー）のインク 96（スマホ 64） 1440 を超える幅：member-detail-wide-v1.css と同じく、値をすべて --mbu（= --site-max ÷ 1168）倍にする（§3）。 */ /* ================= 1. 帯と見出し ================= */ /* 帯の地と左右の余白は .mb-band（members-v2.css）。上：夜空の下端 → ARCHIVES のインク 96（行の箱 16 の中で大文字のインクは上から 3） */ body.mb-page #main > .mb-arc { padding-top: 93px; padding-bottom: 0; /* 帯の終わり＝最後のカードの下端。次の閉じの帯が 96 をあける（§2） */ } body.mb-page .mb-arc-label { margin: 0; color: var(--mb-quiet); font: 600 15px/16px var(--mb-face); letter-spacing: 0.2em; } /* ARCHIVES のインクの下端（行の箱の下から 2）→ カードの上端 32 */ body.mb-page .mb-arc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 本で 1 列を満たす。3 本以下は左から詰め、カードの大きさは変えない */ gap: 32px; margin: 30px 0 0; padding: 0; list-style: none; } body.mb-page .mb-arc-item { display: flex; min-width: 0; } /* ================= 2. カード ================= */ body.mb-page .mb-arc-card { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0 0 20px; /* 日付のインクの下端 → カードの下端 24（日付の行の箱は字の下に 4）。LIVE のカードと同じ値 */ color: inherit; text-decoration: none; } /* 地：そのメンバーの色を沈めた面（OKLCH L 0.24）。擬似要素に塗る（LIVE のカードと同じ作り） */ body.mb-page .mb-arc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mc-ground, #1d1f25); pointer-events: none; } /* 上辺の信号線：その人の色の 1px。サムネイルの上に通す */ body.mb-page .mb-arc-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 1px; background: var(--mc-signal, rgba(184, 156, 255, 0.32)); pointer-events: none; } /* サムネイル：16:9 の枠で場所を先に取る（遅れて読み込んでも下の文字が動かない）。読み込むまでは夜空の色 */ body.mb-page .mb-arc-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0724; } body.mb-page .mb-arc-img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 長さの札：サムネイルの右下から 8。札の文字 14px（スマホ 13px）＝ LIVE の札（type-floor-v1.css）と同じ */ body.mb-page .mb-arc-duration { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; background: rgba(13, 7, 36, 0.82); color: var(--mb-paper); font: 600 14px/1.2 var(--mb-face); } /* 題：15px（スマホ 14px）・行 1.6・2 行で打ち切り。サムネイルの下端 → 題のインク 16（行の箱 24 の中でインクは上から 5）。 折り返しは文節（契約 §4「見出し・ラベルは文節の折り返しのまま」。「ポイ／ント」のような語の途中の折り返しを出さない）。長い英数字は途中で折る。 text-wrap: pretty で短い最後の行を避ける（ニュースの頁 news-page.css と同じ組み合わせ。「【Marvel Rivals】ポイント返して／よランク」→ 「【Marvel Rivals】／ポイント返してよランク」、「…やりたいんだよぉ／おおおお！」→「…ADCが／やりたいんだよぉおおおお！」）。 ただし文節のままでは困る題だけ、台本（fitTitle）が data-wrap で切り替える（下の [data-wrap]。検証の指摘 1）。 2 行分の高さは取らない（768〜959 の 2 列では題が 1 行に収まり、空の 1 行が題と日付の間に 24 の隙間を作った。実測 40）。 同じ段のカードは格子で同じ高さになり、日付の行は下端に揃う（下の margin-top: auto）。 左の内側の余白 0.25em（同じだけ外の余白を減らすので、文字の列の左端は 24 のまま）：行頭の開き括弧を左へ出したとき（台本の OPEN_TRIM。 検証の指摘 2）、括弧のインクが箱の左端より外に出ても欠けないため（打ち切りの overflow: hidden は内側の余白の外で切る。 Zen Kaku Gothic New が読めず別の書体で出て、その書体の括弧の空きが 0.4em 程度でも欠けない） */ body.mb-page .mb-arc-title { display: -webkit-box; margin: 11px 24px 0 calc(24px - 0.25em); padding-left: 0.25em; overflow: hidden; color: var(--mb-quiet); font: 400 15px/1.6 var(--mb-jp); overflow-wrap: anywhere; word-break: auto-phrase; text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* 2 行に収まらない題：台本が文節の 1 行目の後に改行を入れ、2 行目は行いっぱいまで字を詰めてから「…」で切る （文節のままだと「今日は…」のように 2 行目が短いまま切れる）。2 行目は打ち切る行なので、禁則の続き（「ぜ！！！！！」）や長い英単語 （「@murakado_kisuke」）でも手前で折らない（line-break: anywhere。1 行目は台本が測った 1 行分だけなので、ここでは折れない）。 pretty も外す（隠れた 3 行目以降と釣り合わせて 2 行目を短くしないため）。word-break: normal は anywhere の無い環境の控え */ body.mb-page .mb-arc-title[data-wrap="fill"] { word-break: normal; line-break: anywhere; text-wrap: wrap; } /* 収まるが最後の行が 2 字以下の題：行をそろえる。文節のままで直らないとき（文節が行より長い）は通常の折り返しでそろえる */ body.mb-page .mb-arc-title[data-wrap="even"] { text-wrap: balance; } body.mb-page .mb-arc-title[data-wrap="even-normal"] { word-break: normal; text-wrap: balance; } /* 日付・配信先：題のインク → 日付のインク 16（padding-top が最小の間。題の短いカードは、同じ段のカードの日付の行まで下がる） */ body.mb-page .mb-arc-meta { margin: auto 24px 0; padding-top: 6px; color: var(--accent-midori-text, #8cc5a0); font: 600 15px/1.4 var(--mb-face); letter-spacing: 0.04em; } body.mb-page .mb-arc-card:hover .mb-arc-title { color: var(--mb-paper); } body.mb-page .mb-arc-card:focus-visible { outline: none; } body.mb-page .mb-arc-card:focus-visible .mb-arc-title { color: var(--mb-paper); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: #f3ecdc; } /* 前後のメンバーの帯：アーカイブの帯の後では、最後のカードの下端（箱の縁）→ PREV のインク 96（行の箱 16 の中でインクは上から 3）。 帯が無いとき（0 本の人）は members-v2.css のまま（夜空の下端・紹介文からの値） */ body.mb-page .mb-arc + .mb-band--close { padding-top: 93px; } /* 前後のリンクを出さない（1 人だけのロール）とき：ALL MEMBERS の字（15px）は押せる範囲 44 の下から 12 にあり、インクは箱の上から 19。 最後のカードの下端 → ALL MEMBERS のインク 96（実測 1440・1024・768） */ body.mb-page .mb-arc + .mb-band--close.is-solo { padding-top: 77px; } /* ================= 3. 幅ごと ================= */ /* 768〜959：4 列だとカードが 156〜204 になり、題が 1 行 6〜10 字で途切れる。2 列 × 2 段（ホームの待機アーカイブと同じ境目） */ @media (min-width: 768px) and (max-width: 959px) { body.mb-page .mb-arc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 縦積み（899 以下）：帯の前は紹介文（冒頭の帯の黒い部分）。紹介文のインク → ARCHIVES のインク 96（紹介文の行の箱の下の余り 6.4 と 見出しの上の 3 を引く） */ @media (max-width: 899px) { body.mb-page #main > .mb-arc { padding-top: 87px; } } @media (max-width: 767px) { body.mb-page #main > .mb-arc { padding-top: 56px; } /* 紹介文のインク → ARCHIVES のインク 64（紹介文 15/28 の下の余り 5.8） */ body.mb-page .mb-arc-label { font-size: 14px; } body.mb-page .mb-arc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 21px; } /* 見出しのインク → カード 24 */ body.mb-page .mb-arc-card { padding-bottom: 12px; } /* 日付のインク → カードの下端 16 */ body.mb-page .mb-arc-title { margin-left: calc(16px - 0.25em); margin-right: 16px; font-size: 14px; } /* 文字の列の左端 16（内側の余白 0.25em） */ body.mb-page .mb-arc-meta { margin-left: 16px; margin-right: 16px; padding-top: 7px; font-size: 14px; } /* 題 14/1.6 → 日付 16 */ body.mb-page .mb-arc-duration { font-size: 13px; } body.mb-page .mb-arc + .mb-band--close { padding-top: 62px; } /* 最後のカード → PREV のインク 64 */ body.mb-page .mb-arc + .mb-band--close.is-solo { padding-top: 45.5px; } /* 字 14px のインクは箱の上から 18.5 → 64（実測 390） */ } /* 1440 を超える幅：member-detail-wide-v1.css と同じ倍率 --mbu で、1440 の値をすべて大きくする（文字・間隔・札の比は 1440 と同じ）。 文字の元は 1440 の値（type-floor-v1.css の 15px・札 14px）。1920 で 20px・札 18.7px */ @media (min-width: 1441px) { /* 見出しの文字 F = max(15px, 13 × 倍率)。行の箱は F の 16/15 倍にし、インクの上下の余りを F に比例させる（1440 の 15/16 で上 3・下 2 ＝ F の 0.2 倍・0.1333 倍）。夜空の下端 → インク 96 × 倍率、インク → カード 32 × 倍率 */ body.mb-page.mb-page--detail #main > .mb-arc { padding-top: calc(96 * var(--mbu) - 0.2 * calc(15 * var(--mbu))); } /* 見出しは CHANNELS（member-detail-wide-v1.css の 13 × 倍率）と同じ大きさにし、15px を下限にする（1441〜1661 では CHANNELS が 15px を下回るため。CHANNELS 側が 15 × 倍率に直ったら、ここも calc(15 * var(--mbu)) にする） */ body.mb-page.mb-page--detail .mb-arc-label { font-size: calc(15 * var(--mbu)); line-height: calc(16 / 15); } body.mb-page.mb-page--detail .mb-arc-grid { gap: calc(32 * var(--mbu)); margin-top: calc(32 * var(--mbu) - 0.1333 * calc(15 * var(--mbu))); } body.mb-page.mb-page--detail .mb-arc-card { padding-bottom: calc(20 * var(--mbu)); } body.mb-page.mb-page--detail .mb-arc-duration { right: calc(8 * var(--mbu)); bottom: calc(8 * var(--mbu)); padding: calc(2 * var(--mbu)) calc(6 * var(--mbu)); font-size: calc(14 * var(--mbu)); } body.mb-page.mb-page--detail .mb-arc-title { margin: calc(11 * var(--mbu)) calc(24 * var(--mbu)) 0 calc(24 * var(--mbu) - 0.25em); font-size: calc(15 * var(--mbu)); } body.mb-page.mb-page--detail .mb-arc-meta { margin: auto calc(24 * var(--mbu)) 0; padding-top: calc(6 * var(--mbu)); font-size: calc(15 * var(--mbu)); } /* PREV は 13 × 倍率の文字を 16 × 倍率の行の箱に置く（member-detail-wide-v1.css）。インクは箱の上から 3.67 × 倍率（実測 1920：4.9〜5.4） */ body.mb-page.mb-page--detail .mb-arc + .mb-band--close { padding-top: calc(92.33 * var(--mbu)); } /* ALL MEMBERS：押せる範囲 44 × 倍率・下の余白 12 × 倍率に、倍率を掛けない 15px の字（detail-fix-v1.css）。インクは箱の上から 32 × 倍率 − 13 */ body.mb-page.mb-page--detail .mb-arc + .mb-band--close.is-solo { padding-top: calc(64 * var(--mbu) + 13px); } } /* ================= 4. 入場 ================= */ /* 本文（.mb-head・.mb-info）と同じく、冒頭の入場が始まるまでは隠す。始まったら台本（followInfo）が .mb-info と同じ見え方の切り替えを 同じ時刻で写す（飛雲の描き終わりは待たない）。保険も同じ：台本が動かなくても 3 秒で必ず出す（members-v2.css の mb-failsafe） */ html.mb-js body.mb-page #main:has(.mb-hero[data-enter="pending"]) > .mb-arc { visibility: hidden; animation: mb-failsafe 0s linear 3s forwards; } /* 帯の有無が決まるまで（台本が html に data-mb-arc を書くまで）は、前後のメンバーの帯を隠す。帯が入るとその分だけ下へ動くので、 動くところを見せない（最初の描画から効かせるため CSS で持つ）。ストリーマー以外は台本が動いた時点で出る。保険は 3 秒 */ html.mb-js:not([data-mb-arc]) body.mb-page.mb-page--detail .mb-band--close { visibility: hidden; animation: mb-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { html.mb-js body.mb-page #main:has(.mb-hero[data-enter="pending"]) > .mb-arc { visibility: visible; animation: none; } /* PREV/NEXT の保険は、減らす設定でも残す（検証の指摘 5）。edition.css の *{animation:none!important} がこの保険まで消すと、 台本か写しの読み込みが止まったとき PREV・NEXT・ALL MEMBERS がずっと隠れたまま（Tab でも届かない）になった（実測）。 0 秒の見え方の切り替えなので動きには当たらない。詳細度で上回る !important で戻す（帯が入るときに PREV/NEXT が動くのを見せないため、 visible に戻すだけにはしない） */ html.mb-js:not([data-mb-arc]) body.mb-page.mb-page--detail .mb-band--close { animation: mb-failsafe 0s linear 3s forwards !important; } }