/* ⚠️ 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;
}
.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 */
.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: #15151b; /* ~~#a3a2ae~~ 2026-10-11 本人が見比べページで決めた */
  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;
}
/* 表紙の写真のまわりの枠（2026-10-11 本人「カッコいい01の表紙の枠を背表紙とリンクさせて」→「写真のまわりに枠を足す」「枠の太さを調整させて」）。
   色は背表紙の色（--sp-back＝カラーで選んだ色）。太さは --fr-w（見比べのページ .playwright-mcp/spine_list/ で調整）。内側に引く線（outline）なので、大小どちらの表紙にも同じ作りで出る */
/* ~~outline（表紙のいちばん上に引く線）~~ 同日 本人「光や影が枠に影響しないのでなおして」→ 表紙の影の重なり（web/css/binder-round.css の box-shadow）のいちばん下に足す＝光・溝の影・光沢が枠にもかかる。
   ~~binder-round.css の値を写して最後に枠を足している~~ ⚠️ 2026-10-12 夜 binder-round.css の変数で受ける形にした（左の白い線・右と下の縁は消す・上の縁は白 50%・最後に枠＝--fr-extra）。108 冊を撮って前と同じ見た目を確かめた。小さい表紙は絵が ::before にあるので ::before に */
.binder:where([data-st="B"]) {
  --fr-seam: transparent;                  /* 表紙の左の端の白い線は消す（2026-10-11 本人「大アルバムに背表紙と表紙の間に白い線がある」） */
  --fr-top: rgba(255, 255, 255, .5);       /* 上の縁（ベベル）白 50%（2026-10-12 本人が見比べのページで決めた。~~白 35%×光沢~~） */
  --fr-right: transparent; --fr-bot: transparent; /* 右と下の縁（ベベル）0%（同日 本人） */
}
.binder:where([data-st="B"]).big { --fr-extra: inset 0 0 0 var(--fr-w, 2.5cqw) var(--sp-back); } /* 枠 */
.binder:where([data-st="B"]).small { --fr-extra: inset 0 0 0 var(--fr-w, 2.5cqw) var(--sp-back), inset calc(12.5cqw + var(--fr-w, 2.5cqw)) 0 0 var(--sp-back); } /* 小さい表紙の絵の層は左へ 12%（≒12.5cqw）はみ出しているので、左の辺はその分を足して描く（同日 本人「小アルバムにフレームが無い部分」） */
/* 背表紙の大きな英字の続きを表紙の左の枠に（2026-10-11 本人「フレーム側に背表紙のもじの切れている部分をだせない？」→ 見本 .playwright-mcp/spine_list/wrap_preview.css「すばらしいです」→「アプリに入れる＝はい」）。
   英字（上の .spine-text::before）は背表紙の右の端から 2cqw はみ出して切れる。表紙の左の端に同じ文字を同じ大きさで置き、背表紙の端から先の 2cqw だけ見せる
   （文字の箱の幅 19.2cqw＝24cqw×0.8 → 左へ 17.2cqw ずらして、そこから左を切る）。大きいアルバムだけ（小さい表紙の ::after は光沢で使っている） */
.binder:where([data-st="B"]).big .b-front::after{
  content: "COLLECTION"; position: absolute; top: 2cqw; left: -17.2cqw; width: auto; height: auto; transform: none; border-radius: 0; z-index: 1;
  white-space: nowrap; writing-mode: vertical-rl; -webkit-text-orientation: sideways; text-orientation: sideways;
  font: 400 24cqw/.8 Anton, sans-serif;
  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;
  clip-path: inset(0 0 0 17.2cqw);
  pointer-events: none;
}
/* 背表紙のベベル（2026-10-12 本人が見比べのページで決めた「上の縁 白 50%・奥の縁 0%・下の縁 縁の色 100%・太さ ×0.7」）。
   ~~web/css/top.css の .big .b-spine（上と奥 白 50%・下 縁の色 35%＝--sp-bevel・太さ max(1.5px, .8cqw)）・.small .b-spine（上 白 1px）~~ をカッコイイ_01 だけ置き換え */
.binder:where([data-st="B"]).big .b-spine{
  --bw: max(1.05px, .56cqw);
  box-shadow:
    inset 0 var(--bw) 0 rgba(255, 255, 255, .5),   /* 上の縁 */
    inset 0 calc(-1 * var(--bw)) 0 var(--sp-seam); /* 下の縁（縁の色そのもの） */
}
.binder:where([data-st="B"]).small .b-spine{ box-shadow: inset 0 .7px 0 rgba(255, 255, 255, .5); }