/* ===== 本人のデザイン 8 種類（2026-10-10 本人「このデザインでそれぞれつくって」「CSSでまねできそうなのはまねて」）=====
   見本: 02_デザイン/アルバムのデザイン案_ChatGPT_2026-10-10.webp（本人が ChatGPT で作った）。設計はデザイン担当の案（設計書「本人のデザイン 10 種類を足す」）。
   - makeBinder（js/binder.js）が .binder に data-ad を付ける。表紙は絵ごと固定（カードの画像は使わない）。大きさ・形は今のアルバムのまま（本人「サイズは今のアルバムに合わせて」）
   - 表紙: 背景の重なり＝飾りの SVG と質感。枠＝大きい表紙は ::after・小さい表紙は ::before（どちらも空いている。光沢は今のまま大きい ::before・小さい ::after）
     題字と副題は .b-front の中の span.ad-t・span.ad-s（SVG の絵の中では Web の書体が読めないため・デザイン担当）
   - 背表紙: 背景の重なり＋ .spine-text::before に「CARD ALBUM」（背表紙にアルバム名は出さない＝10-04 本人の決まり）
   - 色: カラーで標準以外を選ぶと地の 1 色（--ad-base）だけが変わる（本人「今と同じ色を選べる（仮）」）。暗いデザインは選んだ色を同じ色みの濃い色（--sp-ink）に寄せる＝黒は混ぜない
   - かわいい 01 のキャラは描かない（本人「01のキャラは省く」）。大人 01・アンティーク 02 は作らない
   - 🔴 光や色を傾き・ゆらゆらで動かさない（特許の決まり）。ホロの虹色も止まったグラデーション
   - 書体は Google Fonts の OFL だけ（Cinzel・Dancing Script・Orbitron・Arimo。index.html で読む）。販売前に「その他」のライセンスの欄に足す */

/* --- 共通 --- */
.ad-t, .ad-s { display: none; }
.binder[data-ad] {
  --ad-base: #777; --ad-edge: var(--ad-base); --ad-seam: rgba(0, 0, 0, .35); --ad-plate: var(--ad-edge);
  --ad-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86  0 0 0 0 .88  0 0 0 0 .92  2.4 0 0 0 -1.15'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* 黒革のシボと同じ */
}
.binder[data-ad] .b3d { --sp-back: var(--ad-edge); --sp-seam: var(--ad-seam); --sp-plate: var(--ad-plate); } /* 天面・板の縁・丸い角をデザインの色に（.binder の style に書かれた背表紙の色より 1 段下で上書き） */
.binder[data-ad] .b-face.b-front {
  background-size: 100% 100% !important; background-repeat: no-repeat !important; background-position: 0 0 !important;
  background-color: var(--ad-base) !important;
}
.binder.small[data-ad] .b-face.b-front::before { inset: 0; background-image: none; } /* 小さい表紙の ::before はカードの絵を受け継ぐ層。デザインでは枠に使う */
.binder.big[data-ad] .b-face.b-front::after,
.binder.small[data-ad] .b-face.b-front::before {
  content: var(--ad-frame, none); position: absolute; inset: var(--ad-fr-in, 8%);
  transform: none; width: auto; height: auto; aspect-ratio: auto; border-radius: 0; background: none;
  border: var(--ad-fr, none);
  outline: var(--ad-fr2, none); outline-offset: var(--ad-fr2-off, -1.8cqw);
  pointer-events: none;
}
.binder.small[data-ad] .b-face.b-front::before { outline: none; } /* 小さい表紙は外の枠 1 本だけ */
.binder[data-ad] .ad-t, .binder[data-ad] .ad-s {
  display: block; position: absolute; left: 0; right: 0; text-align: center; white-space: pre; pointer-events: none;
}
.binder[data-ad] .ad-t { top: var(--ad-t-top, 36%); font: var(--ad-t-font); letter-spacing: var(--ad-t-ls, .3em); text-indent: var(--ad-t-ls, .3em); line-height: 1.45; color: var(--ad-t-color); text-shadow: var(--ad-t-shadow, none); transform: var(--ad-t-tf, none); }
.binder[data-ad] .ad-s { top: var(--ad-s-top, 72%); font: var(--ad-s-font); letter-spacing: var(--ad-s-ls, .3em); text-indent: var(--ad-s-ls, .3em); line-height: 1.6; color: var(--ad-s-color); }
.binder[data-ad] .ad-t::before { content: var(--ad-t-text, "CARD\A ALBUM"); }
.binder[data-ad] .ad-s::before { content: var(--ad-s-text, ""); }
/* ~~箔の文字（--ad-foil を background-clip: text で塗る）~~ 2026-10-10 撮ったら暗い地で薄く読みにくかった → 金・銀の 1 色（--ad-t-color）に */
.binder.small[data-ad] .ad-t, .binder.small[data-ad] .ad-s { display: none; } /* 小さい表紙では文字が潰れるので出さない（デザイン担当） */
/* 0 枚の冊の「＋」・縮め終わるまでの淡い無地も、デザインの表紙に置き換える */
.binder[data-ad] .b-front.no-cover, .binder[data-ad] .b-front.cover-pending { background-color: var(--ad-base) !important; }
.binder.small[data-ad] .b-front.no-cover::after { content: none; } /* 小さい表紙の 0 枚の「＋」 */
/* 背表紙 */
.binder[data-ad] .b-face.b-spine { background-size: 100% 100% !important; background-repeat: no-repeat !important; background-color: var(--ad-base) !important; box-shadow: inset 0 max(1px, .5cqw) 0 rgba(255, 255, 255, .18), inset max(-1px, -.5cqw) 0 0 var(--ad-seam), inset 0 calc(-1 * max(1px, .5cqw)) 0 rgba(0, 0, 0, .25); }
.binder[data-ad] .spine-text { font: var(--ad-sp-font, 700 3.2cqw/1 Arimo, sans-serif); letter-spacing: .3em; color: var(--ad-sp-ink); max-height: 60%; }
.binder[data-ad] .spine-text::before { content: "CARD ALBUM"; }
.binder.small[data-ad] .spine-text { display: none; }

/* --- おしゃれ 01: 黒・銀の細い枠 --- */
.binder[data-ad="chic1"] { --ad-base: #17181b; --ad-seam: #000; --ad-plate: #232428;
  --ad-frame: ""; --ad-fr-in: 9%; --ad-fr: max(1px, .35cqw) solid rgba(206, 210, 217, .85);
  --ad-foil: linear-gradient(100deg, #8e949e 0%, #eef0f4 22%, #b4bac4 40%, #ffffff 55%, #9fa5af 75%, #e6e9ee 100%);
  --ad-t-font: 400 6cqw Cinzel, serif; --ad-t-ls: .35em; --ad-t-top: 35%; --ad-t-color: #e3e6eb;
  --ad-s-text: "COLLECT\A YOUR FAVORITE\A CARDS"; --ad-s-font: 700 1.7cqw Arimo, sans-serif; --ad-s-color: #a9aeb7; --ad-s-top: 69%;
  --ad-sp-font: 400 3.3cqw/1 Cinzel, serif; --ad-sp-ink: #d6dae1; }
.binder[data-ad="chic1"] .b-face.b-front { background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 58.6 L50.7 60.3 L52.4 61 L50.7 61.7 L50 63.4 L49.3 61.7 L47.6 61 L49.3 60.3Z' fill='rgb(214,217,223)'/%3E%3C/svg%3E"),
  linear-gradient(135deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .25) 100%),
  linear-gradient(rgba(23, 24, 27, .62), rgba(23, 24, 27, .62)),
  var(--ad-grain) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 36cqw !important; background-repeat: no-repeat, no-repeat, no-repeat, repeat !important; }
.binder[data-ad="chic1"] .b-face.b-spine { background-image:
  var(--sp-shade), var(--sp-round),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 100' preserveAspectRatio='none'%3E%3Cpath d='M12 88.6 L12.9 90.3 L14.4 91 L12.9 91.7 L12 93.4 L11.1 91.7 L9.6 91 L11.1 90.3Z' fill='rgb(214,217,223)'/%3E%3C/svg%3E"),
  linear-gradient(to right, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .2)),
  linear-gradient(rgba(23, 24, 27, .62), rgba(23, 24, 27, .62)),
  var(--ad-grain) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 36cqw !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat !important; }

/* ⚠️ 2026-10-10 本人「質感も合わせるのと おしゃれ01以外 生成して。似たフォントがある文字は後から追加して」→ 下の 7 種類は表紙と背表紙を Gemini で作った絵（文字なし・img/ad/）に置き換えた。
   文字（題字・副題・背表紙の CARD ALBUM）は今までどおり書体で重ねる。~~SVG と CSS でまねた飾りと質感~~ は git の履歴（9c0e1c9）。絵の元は .playwright-mcp/gemini/raw/ */
/* --- おしゃれ 02: 白大理石・金の筋 --- */
.binder[data-ad="chic2"] { --ad-base: #f3f2ef; --ad-seam: #c9c3b6; --ad-plate: #ebe8e2; --ad-fr-in: 7%; --ad-fr: max(1px, .3cqw) solid rgba(196, 158, 72, .9);
  --ad-t-font: 400 6cqw Cinzel, serif; --ad-t-ls: .3em; --ad-t-top: 36%; --ad-t-color: #b08b3c;
  --ad-s-text: "COLLECT\A YOUR FAVORITE\A CARDS"; --ad-s-font: 700 1.6cqw Arimo, sans-serif; --ad-s-color: #b9975a; --ad-s-top: 74%;
  --ad-sp-font: 400 3.3cqw/1 Cinzel, serif; --ad-sp-ink: #b08b3c; }
.binder[data-ad="chic2"] .b-face.b-front { background-image: url("../img/ad/chic2_cover.webp") !important; }
.binder[data-ad="chic2"] .b-face.b-spine { background-image: var(--sp-shade), var(--sp-round), url("../img/ad/chic2_spine.webp") !important; }

/* --- かわいい 01: ピンク・ハート・リボン（キャラなし） --- */
.binder[data-ad="kawaii1"] { --ad-base: #f6cfdc; --ad-seam: #e3a9be; --ad-plate: #f9dde7;
  --ad-t-text: "Card Album"; --ad-t-font: 700 10.5cqw 'Dancing Script', cursive; --ad-t-ls: 0; --ad-t-top: 66%; --ad-t-color: #e985b3;
  --ad-t-shadow: .45cqw 0 0 #fff, -.45cqw 0 0 #fff, 0 .45cqw 0 #fff, 0 -.45cqw 0 #fff, .3cqw .3cqw 0 #fff, -.3cqw -.3cqw 0 #fff, .3cqw -.3cqw 0 #fff, -.3cqw .3cqw 0 #fff;
  --ad-s-text: "My favorite cards\A make me happy"; --ad-s-font: 600 2.6cqw 'Dancing Script', cursive; --ad-s-ls: .04em; --ad-s-color: #a989d2; --ad-s-top: 81%;
  --ad-sp-ink: #fff; }
.binder[data-ad="kawaii1"] .b-face.b-front { background-image: url("../img/ad/kawaii1_cover.webp") !important; }
.binder[data-ad="kawaii1"] .b-face.b-spine { background-image: var(--sp-shade), var(--sp-round), url("../img/ad/kawaii1_spine.webp") !important; }

/* --- かわいい 02: 夢の空・月・猫 --- */
.binder[data-ad="kawaii2"] { --ad-base: #b9a3e6; --ad-seam: #8f7fcf; --ad-plate: #cdbdf0;
  --ad-t-text: "Card Album"; --ad-t-font: 600 10cqw 'Dancing Script', cursive; --ad-t-ls: 0; --ad-t-top: 11%; --ad-t-color: #fff; --ad-t-tf: rotate(-6deg);
  --ad-t-shadow: 0 0 1.4cqw rgba(140, 120, 240, .9), 0 0 .4cqw rgba(160, 140, 255, .8);
  --ad-s-text: "Small cards\A Big dreams"; --ad-s-font: 400 3cqw 'Dancing Script', cursive; --ad-s-ls: .04em; --ad-s-color: rgba(255, 255, 255, .92); --ad-s-top: 83%;
  --ad-sp-ink: #fff; }
.binder[data-ad="kawaii2"] .b-face.b-front { background-image: url("../img/ad/kawaii2_cover.webp") !important; }
.binder[data-ad="kawaii2"] .b-face.b-spine { background-image: var(--sp-shade), var(--sp-round), url("../img/ad/kawaii2_spine.webp") !important; }

/* --- 大人 02: 深緑の革・金の枠・王冠 --- */
.binder[data-ad="adult2"] { --ad-base: #1f3a2e; --ad-seam: #0f1f18; --ad-plate: #2a4a3b; --ad-fr-in: 7%; --ad-fr: max(1px, .32cqw) solid rgba(206, 172, 96, .95); --ad-fr2: max(1px, .14cqw) solid rgba(206, 172, 96, .6); --ad-fr2-off: -1.5cqw;
  --ad-foil: linear-gradient(100deg, #a07a35 0%, #f0d79a 30%, #c8a456 55%, #f6e3b0 75%, #a07a35 100%);
  --ad-t-font: 500 6cqw Cinzel, serif; --ad-t-ls: .25em; --ad-t-top: 22%; --ad-t-color: #e2c57f;
  --ad-s-text: "COLLECT\A YOUR TREASURES"; --ad-s-font: 400 1.9cqw Cinzel, serif; --ad-s-ls: .25em; --ad-s-color: #cfb070; --ad-s-top: 74%;
  --ad-sp-font: 400 3.3cqw/1 Cinzel, serif; --ad-sp-ink: #d9bd76; }
.binder[data-ad="adult2"] .b-face.b-front { background-image: url("../img/ad/adult2_cover.webp") !important; }
.binder[data-ad="adult2"] .b-face.b-spine { background-image: var(--sp-shade), var(--sp-round), url("../img/ad/adult2_spine.webp") !important; }

/* --- アンティーク 01: 古い茶色の革・唐草の角飾り --- */
.binder[data-ad="antique1"] { --ad-base: #5a3a22; --ad-seam: #2a180b; --ad-plate: #6b4529; --ad-fr-in: 6%; --ad-fr: max(1px, .3cqw) solid rgba(201, 164, 92, .9); --ad-fr2: max(1px, .15cqw) solid rgba(201, 164, 92, .7); --ad-fr2-off: -1.6cqw;
  --ad-foil: linear-gradient(100deg, #9a7638 0%, #e8cc8a 35%, #b8914a 60%, #e0c27e 80%, #9a7638 100%);
  --ad-t-font: 400 6.5cqw Cinzel, serif; --ad-t-ls: .2em; --ad-t-top: 21%; --ad-t-color: #dcb96c; --ad-t-shadow: 0 .2cqw .4cqw rgba(30, 14, 4, .7);
  --ad-sp-font: 400 3.3cqw/1 Cinzel, serif; --ad-sp-ink: #d4b36e; }
.binder[data-ad="antique1"] .b-face.b-front { background-image: url("../img/ad/antique1_cover.webp") !important; }
.binder[data-ad="antique1"] .b-face.b-spine { background-image: var(--sp-shade), var(--sp-round), url("../img/ad/antique1_spine.webp") !important; }

/* --- SF 01: 黒・水色のネオン・惑星 --- */
.binder[data-ad="sf1"] { --ad-base: #0c0f16; --ad-seam: #000; --ad-plate: #151a24;
  --ad-t-font: 600 6.5cqw Orbitron, sans-serif; --ad-t-ls: .2em; --ad-t-top: 15%; --ad-t-color: #c9f3ff;
  --ad-t-shadow: 0 0 1.5cqw rgba(54, 197, 255, .9), 0 0 .4cqw rgba(54, 197, 255, .8);
  --ad-s-text: "COLLECT\A THE FUTURE"; --ad-s-font: 500 1.8cqw Orbitron, sans-serif; --ad-s-ls: .25em; --ad-s-color: #6fdcff; --ad-s-top: 84%;
  --ad-sp-font: 500 3.2cqw/1 Orbitron, sans-serif; --ad-sp-ink: #7fe3ff; }
.binder[data-ad="sf1"] .b-face.b-front { background-image: url("../img/ad/sf1_cover.webp") !important; }
.binder[data-ad="sf1"] .b-face.b-spine { background-image: var(--sp-shade), var(--sp-round), url("../img/ad/sf1_spine.webp") !important; }

/* --- SF 02: 真珠の白・虹色のホロの枠・リング（止まったグラデーション） --- */
.binder[data-ad="sf2"] { --ad-base: #eef0f6; --ad-seam: #c3c9da; --ad-plate: #f4f5fa;
  --ad-t-font: 500 6cqw Orbitron, sans-serif; --ad-t-ls: .25em; --ad-t-top: 20%; --ad-t-color: #6f7fae;
  --ad-s-text: "BEYOND\A THE LIMITS"; --ad-s-font: 500 1.7cqw Orbitron, sans-serif; --ad-s-ls: .25em; --ad-s-color: #8a94b8; --ad-s-top: 83%;
  --ad-sp-font: 500 3.2cqw/1 Orbitron, sans-serif; --ad-sp-ink: #8a94b8; }
.binder[data-ad="sf2"] .b-face.b-front { background-image: url("../img/ad/sf2_cover.webp") !important; }
.binder[data-ad="sf2"] .b-face.b-spine { background-image: var(--sp-shade), var(--sp-round), url("../img/ad/sf2_spine.webp") !important; }

/* --- 色を選んだとき（仮）: 地の 1 色だけ。明るいデザインはそのまま、暗いデザインは選んだ色を同じ色みの濃い色へ寄せる --- */
.binder[data-ad="chic2"]:not([data-spine="std"]), .binder[data-ad="kawaii1"]:not([data-spine="std"]), .binder[data-ad="sf2"]:not([data-spine="std"]) { --ad-base: var(--sp-back); }
@supports (color: color-mix(in srgb, red, blue)) {
  .binder[data-ad="chic1"]:not([data-spine="std"]), .binder[data-ad="adult2"]:not([data-spine="std"]),
  .binder[data-ad="antique1"]:not([data-spine="std"]), .binder[data-ad="sf1"]:not([data-spine="std"]) { --ad-base: color-mix(in srgb, var(--sp-back) 22%, var(--sp-ink)); }
}

/* --- 光と陰の強さ（デザインごと）: --gl 表紙の光沢・--shd 表紙の陰り・--spsh 背表紙の陰影。1＝今まで（0〜2）---
   2026-10-10 本人「アルバムの光や加減濃さをアルバムによって個別に変更できますか？私が調整するために」→ 本人の選択: 表紙の光沢・表紙の陰り・背表紙の陰影。
   本人が調整ページ .playwright-mcp/album_look/ で決めた値をここに書く。本人のデザインの背表紙の陰影は 0（今までは陰を付けていなかった＝見た目を変えない） */
.binder[data-st="B"] { --gl: 1; --shd: 1; --spsh: 1; } /* 標準（背表紙は B。~~今までの無地の標準~~ 2026-10-10 本人「標準の見た目を B に」） */
.binder.leather { --gl: 1; --shd: 1; --spsh: 1; }
.binder[data-st="B4"] { --gl: 1; --shd: 1; --spsh: 1; }
.binder[data-ad="chic1"] { --gl: 1; --shd: 1; --spsh: 0; }
.binder[data-ad="chic2"] { --gl: 1; --shd: 1; --spsh: 0; }
.binder[data-ad="kawaii1"] { --gl: 1; --shd: 1; --spsh: 0; }
.binder[data-ad="kawaii2"] { --gl: 1; --shd: 1; --spsh: 0; }
.binder[data-ad="adult2"] { --gl: 1; --shd: 1; --spsh: 0; }
.binder[data-ad="antique1"] { --gl: 1; --shd: 1; --spsh: 0; }
.binder[data-ad="sf1"] { --gl: 1; --shd: 1; --spsh: 0; }
.binder[data-ad="sf2"] { --gl: 1; --shd: 1; --spsh: 0; }