/* ⚠️ 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;
}
.big:where([data-st="B4"]) .b-spine{ --seam-w: max(2.5px, .75cqw); }
.small:where([data-st="B4"]) .b-spine{ --seam-w: 1px; }
.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・縦の虹の筋・白い丸い棒に番号） */
/* 天面・板の縁も黒に（.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; }
.big:where([data-st="B4"]) .b-spine{
  background:
    var(--sp-shade),
    linear-gradient(to right, transparent calc(100% - var(--seam-w)), #000 0),
    radial-gradient(90% 30% at 20% 42%, rgba(150, 140, 255, .16), transparent 70%),
    radial-gradient(circle, rgba(255, 255, 255, .11) 0 28%, transparent 32%) 0 0 / 1.4cqw 1.4cqw,
    linear-gradient(to bottom, #1c1c23, #0f0f13);
}
.small:where([data-st="B4"]) .b-spine{
  background:
    var(--sp-shade),
    linear-gradient(to right, transparent calc(100% - var(--seam-w)), #000 0),
    radial-gradient(90% 30% at 20% 42%, rgba(150, 140, 255, .16), transparent 70%),
    radial-gradient(circle, rgba(255, 255, 255, .11) 0 28%, transparent 32%) 0 0 / 2.8cqw 2.8cqw,
    linear-gradient(to bottom, #1c1c23, #0f0f13);
}
/* 巨大な KOREKADO：上は白い網点、下へ行くほどベタ。上と継ぎ目側で切れる */
.binder:where([data-st="B4"]) .spine-text::before{
  content: "KOREKADO"; top: -7cqw; right: -3cqw; 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; }
.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: rgba(255, 255, 255, .5);
}
/* 白い丸い棒（上の端に番号） */
.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;
}