/* ⚠️ 2026-10-10 本人「アルバム事に選べるようにして」→ この案は data-st="B4" の付いたアルバムにだけ効く（指定に :where([data-st="B4"]) を足した・index.html でいつも読む）。
   :where() で包むのは、指定の強さ（詳しさ）を前と同じにするため（強くすると、前は丸みの陰影などに負けて出ていなかった背表紙の地が出て、見た目が変わる＝コードレビュー） */
/* ⚠️ 2026-10-10 本人「Antonにかえて」→ 書体は Anton だけ（Google Fonts・OFL・どの端末でも同じ。太さは 400 の 1 種類なので 400＝太字を作らせない）。~~本人「PCのフォントにスマホも合わせて」→ 書体の並びの先頭を Impact に（前は DIN Condensed が先で、iPhone だけ DIN Condensed＝細め・PC は Impact＝太めになっていた。Impact は iOS の標準の書体＝Apple の公式の一覧）~~ Impact は Android に無く（fonts.xml）、アプリに入れて配れない（Monotype） */
/* 依頼 49 共通: 名前を隠し、背表紙いっぱいの切り抜き枠にする（デザイン担当） */
.binder:where([data-st="B4"]) .spine-text{
  left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%;
  transform: none; max-height: none; overflow: hidden;
  writing-mode: horizontal-tb; font-size: 0; color: transparent;
}
.binder:where([data-st="B4"]) .spine-text::before{
  position: absolute; white-space: nowrap; line-height: .8;
  writing-mode: vertical-rl; -webkit-text-orientation: sideways; text-orientation: sideways;
  font-family: Anton, sans-serif;
  font-weight: 400;
}
/* 依頼 49 案B4 NEGA DOT（黒地に白い網点の KOREKADO・縦の虹の筋・白い丸い棒に番号） */
/* 小さな英字の色（2026-10-10 夜 本人「カラー変更は小さな文字のみ変更」）: アルバムの「カラー」の色（.binder の --sp-back＝binder.js の B4_INKS の ink）。
   .binder で受け取ってから子へ渡す（.b3d では下の 1 行で --sp-back を黒に上書きしているため）。「標準」（何も選んでいない冊）は赤（#ff1f1f を黒の地に 50% で重ねた色） */
.binder:where([data-st="B4"]){ --b4-ink: var(--sp-back); }
.binder:where([data-st="B4"])[data-spine="std"]{ --b4-ink: #8b1b20; }
/* 天面・板の縁も黒に（.binder の style＝アルバムの色を、子の .b3d で上書き。この 1 行を消せば天面はアルバムの色のまま） */
.binder:where([data-st="B4"]) .b3d{ --sp-back: #1d1d24; --sp-seam: #050507; --sp-bevel: rgba(0, 0, 0, .4); --sp-plate: #2b2b34; --sp-hl: .16; }
/* 巨大な KOREKADO：上は白い網点、下へ行くほどベタ。上と継ぎ目側で切れる */
.binder:where([data-st="B4"]) .spine-text::before{
  content: "KOREKADO"; top: -2cqw; right: -3cqw; /* ~~top -7cqw~~ 2026-10-10 夜 本人が開発者ツールで決めた値 */ font-size: 25cqw; letter-spacing: -.01em;
  color: transparent; -webkit-text-fill-color: transparent;
  background:
    linear-gradient(to top, #fff 0 30%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(circle, #fff 0 36%, transparent 40%) 0 0 / 1.6cqw 1.6cqw;
  -webkit-background-clip: text; background-clip: text;
}
.small:where([data-st="B4"]) .spine-text::before{ background-size: auto, 3cqw 3cqw; } /* 2026-10-10 夜 小さいアルバムを塗りつぶし→グラデーションにしたが、本人「今スマホを確認したら小アルバムでも文字が見えていたので、修正なしにして」で元に戻した（PC の一覧では潰れて見えるだけ） */
.big:where([data-st="B4"]) .spine-text::before{ filter: drop-shadow(0 0 1.4cqw rgba(255, 255, 255, .28)); } /* 網点のにじむ光（大きいアルバムだけ） */
/* 虹：縦に細いプリズムの筋＋斜めの光（黒の上で光るように screen） */
.binder:where([data-st="B4"]) .spine-text::after{
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    linear-gradient(to bottom, transparent 16%, #ff4fa0 24%, #ffd84a 33%, #46e0ff 42%, #8a6bff 51%, transparent 60%) left 6.4cqw top 0 / .8cqw 100% no-repeat,
    radial-gradient(50% 10% at 30% 36%, rgba(255, 255, 255, .45), transparent 70%),
    linear-gradient(200deg, transparent 52%, rgba(255, 80, 170, .32) 58%, rgba(255, 220, 90, .28) 62%, rgba(70, 215, 255, .32) 66%, rgba(140, 110, 255, .24) 70%, transparent 76%);
}
.small:where([data-st="B4"]) .spine-text::after{ background-position: left 5cqw top 0, 0 0, 0 0; background-size: 1.6cqw 100%, auto, auto; }
/* 左上の小さな縦の英字 */
.big:where([data-st="B4"]) .b-spine::before{
  content: "CARD ALBUM · COLLECTION"; position: absolute; left: 1.6cqw; top: 5cqw;
  writing-mode: vertical-rl; -webkit-text-orientation: sideways; text-orientation: sideways; white-space: nowrap;
  font: 400 2.5cqw/1 Anton, sans-serif;
  letter-spacing: .28em; color: var(--b4-ink); /* ~~白の 50%~~ ~~赤 #ff1f1f の 50%~~ 2026-10-10 夜 本人「カラー変更は小さな文字のみ変更」→ 選んだ色（上の --b4-ink） */
}
.small:where([data-st="B4"]) .b-spine::before{ /* 小さいアルバムにも英字（2026-10-10 夜 本人「2.B」＝小窓の見本（小さいアルバム）でもカラーの色が見えるように）。大きいアルバムと同じ割合だと 2〜3px で見えないので大きめに・番号の棒（下から 5〜23cqw）に重ならない長さ */
  content: "CARD ALBUM · COLLECTION"; position: absolute; left: 2cqw; top: 5cqw;
  writing-mode: vertical-rl; -webkit-text-orientation: sideways; text-orientation: sideways; white-space: nowrap;
  font: 400 4cqw/1 Anton, sans-serif;
  letter-spacing: .2em; color: var(--b4-ink);
}
/* 白い丸い棒（上の端に番号）。2026-10-10 夜 正円にして下へ移したが、本人「番号の円も元に戻して」→「大小とも縦長の棒に」で元に戻した */
.big:where([data-st="B4"]) .b-spine::after{
  content: attr(data-no); position: absolute; left: 1.2cqw; bottom: 4.5cqw; width: 5.2cqw; padding: 1.3cqw 0 11cqw;
  border-radius: 2.6cqw; background: linear-gradient(to bottom, #fff, #e4e4ea); color: #121216; text-align: center;
  font: 400 3.6cqw/1 Anton, sans-serif;
  box-shadow: 0 0 1.2cqw rgba(255, 255, 255, .25);
}
.small:where([data-st="B4"]) .b-spine::after{
  content: ""; position: absolute; left: 1.5cqw; bottom: 5cqw; width: 4.5cqw; height: 18cqw;
  border-radius: 2.25cqw; background: #f2f2f6;
}