/* ⚠️ 2026-10-10 本人「アルバム事に選べるようにして」→ この案は data-st="B" の付いたアルバムにだけ効く（指定に :where([data-st="B"]) を足した・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="B"]) .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="B"]) .b-spine{ --seam-w: max(2.5px, .75cqw); }
.small:where([data-st="B"]) .b-spine{ --seam-w: 1px; }
.binder:where([data-st="B"]) .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 案B BLACK DOT */
.big:where([data-st="B"]) .b-spine, .small:where([data-st="B"]) .b-spine{
  background:
    var(--sp-shade),
    linear-gradient(to right, transparent calc(100% - var(--seam-w)), #8a8a96 0),
    radial-gradient(circle, rgba(20,20,26,.09) 0 30%, transparent 34%) 0 0 / 1.4cqw 1.4cqw,
    linear-gradient(to bottom, #f2f1f5, #d8d7df);
}
.small:where([data-st="B"]) .b-spine{ background-size: auto, auto, 2.8cqw 2.8cqw, auto; }
.binder:where([data-st="B"]) .spine-text::before{
  content: "COLLECTION"; top: 2cqw; right: -2cqw; font-size: 24cqw;
  color: transparent; -webkit-text-fill-color: transparent;
  background:
    linear-gradient(to bottom, #15151b 0 40%, transparent 72%),
    radial-gradient(circle, #15151b 0 36%, transparent 40%) 0 0 / 1.6cqw 1.6cqw;
  -webkit-background-clip: text; background-clip: text;
}
.small:where([data-st="B"]) .spine-text::before{ background-size: auto, 3cqw 3cqw; }
.binder:where([data-st="B"]) .spine-text::after{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 9% at 35% 60%, rgba(255,255,255,.8), transparent 70%),
    linear-gradient(200deg, transparent 44%, rgba(255,120,190,.45) 52%, rgba(255,230,120,.4) 56%, rgba(110,225,255,.45) 60%, rgba(160,140,255,.3) 64%, transparent 70%);
}
.big:where([data-st="B"]) .b-spine::before{
  content: "C\A A\A R\A D"; position: absolute; left: 1.3cqw; top: 5cqw;
  white-space: pre; text-align: center; color: #a3a2ae;
  font: 400 3.6cqw/1.05 Anton, sans-serif;
}
.big:where([data-st="B"]) .b-spine::after{
  content: attr(data-no); position: absolute; left: 1cqw; bottom: 4cqw; width: 5.6cqw; padding: .9cqw 0;
  text-align: center; background: #15151b; color: #fff;
  font: 400 3.6cqw/1 Anton, sans-serif;
}