/* ⚠️ 2026-10-10 本人「アルバム事に選べるようにして」→ この案は data-st="E2" の付いたアルバムにだけ効く（指定に :where([data-st="E2"]) を足した・index.html でいつも読む）。
   :where() で包むのは、指定の強さ（詳しさ）を前と同じにするため（強くすると、前は丸みの陰影などに負けて出ていなかった背表紙の地が出て、見た目が変わる＝コードレビュー） */
/* 依頼 45 E2: 帯を上下左右とも端まで（背表紙の面ぜんぶが帯の色）（デザイン担当）。top.css の後ろに足す。色は B1 の 9 色。
   右端の継ぎ目（--sp-seam）と底側の暗さ（--sp-shade）は残す。天地に見える背表紙の板の縁も帯の色にそろえる（最後の節。外せば地の色のまま） */
.binder:where([data-st="E2"]){
  --band: #526483; --bandtx: #fff;
  --band-hl: .28;                    /* 帯の上に乗る、上と奥の縁の白い光の濃さ */
  /* ===== 本人の絵の差し込み口（既定は空＝何も描かない） ===== */
  --band-art: linear-gradient(transparent, transparent); /* 線・紋の SVG。形（不透明度）だけ使い、色は --band-art-color で染める */
  --band-art-color: var(--bandtx);
  --band-art-op: 1;
  --band-art-size: 100% 100%;
  --band-art-pos: center;
  --band-art-repeat: no-repeat;
  --band-tex: none;                  /* 質感の白黒 PNG/WebP */
  --band-tex-size: 100% auto;
  --band-tex-blend: multiply;
  /* 試すときの例（コメントを外す。パスはサイトのルートから書く）:
  --band-art: url("/web/img/band/lace.svg"); --band-art-op: .45;
  --band-tex: url("/web/img/band/cloth.webp"); --band-tex-blend: soft-light; --band-tex-size: 50% auto; */
}
.binder:where([data-st="E2"])[data-spine="pink"]{ --band: #a14e77; }
.binder:where([data-st="E2"])[data-spine="red"]{ --band: #a94e4e; }
.binder:where([data-st="E2"])[data-spine="orange"]{ --band: #b76009; }
.binder:where([data-st="E2"])[data-spine="yellow"]{ --band: #9e7207; }
.binder:where([data-st="E2"])[data-spine="green"]{ --band: #21824e; }
.binder:where([data-st="E2"])[data-spine="sky"]{ --band: #087a9c; }
.binder:where([data-st="E2"])[data-spine="purple"]{ --band: #7f5ba6; }
.binder:where([data-st="E2"])[data-spine="black"]{ --band: #202733; --band-hl: .18; }

.big:where([data-st="E2"]){ --band-t: 0px; --band-b: 0px; --seam-w: max(2.5px, .75cqw); }
.small:where([data-st="E2"]){ --band-t: 0px; --band-b: 0px; --seam-w: 1px; }

.big:where([data-st="E2"]) .b-spine, .small:where([data-st="E2"]) .b-spine{ /* 本体の .small .b-spine（top.css:99）に負けないように 2 つ書く */
  background:
    var(--sp-shade),
    var(--band-tex) 0 0 / var(--band-tex-size) repeat,
    linear-gradient(to right, var(--band) 0 calc(100% - var(--seam-w)), var(--sp-seam) calc(100% - var(--seam-w)) 100%); /* 面ぜんぶ帯の色＋継ぎ目 */
  background-blend-mode: normal, var(--band-tex-blend), normal;
}
.big:where([data-st="E2"]) .b-spine{
  box-shadow:
    inset 0 var(--bw) 0 rgba(255, 255, 255, var(--band-hl)),  /* 上の縁 */
    inset var(--bw) 0 0 rgba(255, 255, 255, var(--band-hl)),  /* 奥の縁 */
    inset 0 calc(-1 * var(--bw)) 0 var(--sp-bevel);           /* 下の縁 */
}
.small:where([data-st="E2"]) .b-spine{ box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--band-hl)); }

/* 絵の層（E1 と同じ。範囲は背表紙の面ぜんぶ、継ぎ目の手前まで） */
:where(.binder[data-st="E2"]) .b-spine > .band-art{
  position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: var(--seam-w); top: var(--band-t); bottom: var(--band-b);
  background: var(--band-art-color); opacity: var(--band-art-op);
  -webkit-mask-image: var(--band-art);       mask-image: var(--band-art);
  -webkit-mask-size: var(--band-art-size);   mask-size: var(--band-art-size);
  -webkit-mask-position: var(--band-art-pos); mask-position: var(--band-art-pos);
  -webkit-mask-repeat: var(--band-art-repeat); mask-repeat: var(--band-art-repeat);
}
:where(.binder[data-st="E2"]) .b-spine::before, :where(.binder[data-st="E2"]) .b-spine::after, :where(.binder[data-st="E2"]) .b-spine > .spine-text{ z-index: 1; }

/* 大きいアルバム: 余白が無くなった分、全体を上へ寄せて名前の欄を広げる */
.big:where([data-st="E2"]) .b-spine::before{                      /* 番号: 6.5〜17cqw */
  content: attr(data-no); position: absolute; left: calc(50% - var(--seam-w) / 2); top: 6.5cqw; transform: translateX(-50%);
  font-size: 8.6cqw; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--bandtx);
  padding-bottom: 2cqw; border-bottom: max(1px, .3cqw) solid rgba(255, 255, 255, .78);
}
.big:where([data-st="E2"]) .spine-text{                           /* 名前: 21.5〜65.5cqw（5.4cqw。全角でおよそ 7〜8 字まで） */
  left: calc(50% - var(--seam-w) / 2); top: 21.5cqw; transform: translateX(-50%);
  font-size: 5.4cqw; letter-spacing: .08em; color: var(--bandtx); max-height: 44cqw;
}
.big:where([data-st="E2"]) .b-spine::after{                       /* CARD ALBUM: 下から 8cqw、約 68.4〜96cqw */
  content: "CARD ALBUM"; position: absolute; left: calc(50% - var(--seam-w) / 2); bottom: 8cqw; transform: translateX(-50%);
  writing-mode: vertical-rl; -webkit-text-orientation: sideways; text-orientation: sideways; white-space: nowrap;
  font-size: 2.3cqw; font-weight: 600; letter-spacing: .2em; line-height: 1; color: var(--bandtx); opacity: .8;
}

/* 小さいアルバム */
.small:where([data-st="E2"]) .b-spine::before{
  content: attr(data-no); position: absolute; left: calc(50% - .5px); top: 6cqw; transform: translateX(-50%);
  font-size: 10.5cqw; font-weight: 700; line-height: 1; color: var(--bandtx);
}
.small:where([data-st="E2"]) .spine-text{
  left: calc(50% - .5px); top: 20cqw; transform: translateX(-50%);
  font-size: 6.8cqw; letter-spacing: .04em; color: var(--bandtx); max-height: 74cqw;
}

/* 天地に見える背表紙の板の縁も帯の色に（背表紙が一枚の濃い板に見えるように）。表紙・裏表紙の板の縁は地の色のまま */
.big:where([data-st="E2"]) .sp-top, .big:where([data-st="E2"]) .sp-bot{ background: var(--band); }
.small:where([data-st="E2"]) .b-top{
  background:
    linear-gradient(to right, var(--band) 0 calc(var(--D) * .15), transparent 0),
    linear-gradient(to bottom, var(--sp-back) 0 15%, var(--tint-1) 15% 92%, var(--sp-plate) 92% 100%);
}