/* ===== アルバムの種類「黒革」（2026-10-02 夜 本人「背表紙やアルバムのデザインが変更できるようにして」→ 種類も選べる）=====
   アルバムごとに付ける: makeBinder（js/binder.js）が .binder に leather を付ける。保存はアルバムの binderType: 'leather'（標準は null）。
   中身は「その他」の試し web/try/binder/leatherA.css（A 黒革・つるつる・本人が見て直した最後の形）を写し、セレクタを .binder.leather の中だけに効くよう書き換えたもの。
   試しのほうを直しても、こちらは自動では直らない。試しは消す予定（try-binder.js の頭の一覧）。
   前提: DOM は変えない。面の作りと光沢（--g・--gy・--gloss）は top.css のまま残す。革の色は背表紙の色（--sp-back）から作る */


/* --- 色と部品（革の色は --sp-back から計算）--- */
.binder.leather {
  --lea:    #1d2129;   /* 表紙の革 */
  --lea-hi: #2b303a;   /* 背・天面・縁（表紙より少し明るい） */
  --lea-lo: #0e1014;   /* 底・影側 */
  --grain: 36cqw;      /* シボの 1 タイルの大きさ（箱の幅の割合） */
  --grain-img: 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");
  --foil: linear-gradient(100deg, #8e949e 0%, #eef0f4 18%, #b4bac4 34%, #ffffff 50%, #9fa5af 66%, #e6e9ee 82%, #8e949e 100%);
}
.binder.small.leather { --grain: 100cqw; }
@supports (color: color-mix(in srgb, red, blue)) {
  .binder.leather {
    --lea:    color-mix(in srgb, var(--sp-back) 38%, #000);
    --lea-hi: color-mix(in srgb, var(--sp-back) 52%, #000);
    --lea-lo: color-mix(in srgb, var(--sp-back) 18%, #000);
  }
}

/* --- 表紙（大）: 革。光沢は最上層に残す --- */
.binder.leather .b-face.b-front {
  background-image:
    var(--gloss),
    linear-gradient(to right, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 1.2%, rgba(255,255,255,.10) 2.4%, rgba(255,255,255,0) 4.5%),
    linear-gradient(135deg, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 38%, rgba(0,0,0,.20) 100%),
    var(--grain-img) !important;
  background-size: auto, auto, auto, auto, auto, auto, auto, var(--grain) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  background-position: 0 0 !important;
  background-color: var(--lea);
}
.binder.small.leather .b-face.b-front {
  background-image:
    var(--gloss),
    linear-gradient(to right, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 1.2%, rgba(255,255,255,.10) 2.4%, rgba(255,255,255,0) 4.5%),
    linear-gradient(135deg, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 38%, rgba(0,0,0,.20) 100%),
    var(--grain-img) !important;
  background-size: auto, auto, auto, auto, auto, auto, var(--grain) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  background-position: 0 0 !important;
  background-color: var(--lea);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset -1px 0 0 rgba(0,0,0,.5), inset 0 -1px 0 rgba(0,0,0,.5);
}
.binder.big.leather .b-face.b-front {
  --fw: max(1px, .6cqw);
  box-shadow:
    inset 0 var(--fw) 0 rgba(255,255,255,.30),
    inset max(1px, .35cqw) 0 0 rgba(255,255,255,.14),
    inset calc(-1 * var(--fw)) 0 0 rgba(0,0,0,.5),
    inset 0 calc(-1 * var(--fw)) 0 rgba(0,0,0,.5),
    inset 0 0 4cqw rgba(0,0,0,.28);
}

/* --- 箔押しの文字 --- */
.binder.leather .b-face.b-front::before,
.binder.leather .b-face.b-front::after {
  content: ""; position: absolute; inset: auto; width: auto; height: auto; aspect-ratio: auto;
  transform: none; border-radius: 0; box-shadow: none; pointer-events: none;
  white-space: nowrap; text-align: center; line-height: 1;
  color: #d6dae1;
  background: var(--foil); background-size: 240% 100%;
  background-position: calc(50% - var(--g) * 2) 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.binder.leather .b-face.b-front::before {
  content: "KOREKADO TRADING CARD SUPPLY";
  left: 14cqw; right: 14cqw; top: 15cqw;
  font: 700 2.1cqw/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em;
  padding-bottom: 1.3cqw;
  border-bottom: .35cqw solid transparent;
  border-image: linear-gradient(90deg, rgba(200,205,214,0), #d9dde4 20%, #ffffff 50%, #d9dde4 80%, rgba(200,205,214,0)) 1;
}
.binder.leather .b-face.b-front::after {
  content: "COLLECTION CARD ALBUM";
  left: 0; right: 0; top: 21cqw;
  font: 700 4.8cqw/1 Georgia, "Times New Roman", serif; letter-spacing: .02em;
}

/* --- 背表紙 --- */
.binder.leather .b-face.b-spine {
  --bw: max(1.5px, .8cqw);
  background-image:
    var(--sp-shade),
    linear-gradient(to right, rgba(0,0,0,0) 92%, rgba(0,0,0,.35) 98.5%, rgba(0,0,0,.6) 100%),
    linear-gradient(to right, rgba(255,255,255,.16) 0, rgba(255,255,255,0) 22%, rgba(0,0,0,.18) 100%),
    var(--grain-img);
  background-size: auto, auto, auto, var(--grain);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-position: 0 0;
  background-color: var(--lea-hi);
  box-shadow:
    inset 0 var(--bw) 0 rgba(255,255,255,.18),
    inset var(--bw) 0 0 rgba(255,255,255,.12),
    inset 0 calc(-1 * var(--bw)) 0 rgba(0,0,0,.4);
}
.binder.small.leather .b-face.b-spine { --bw: 1px; }
.binder.leather .b-spine .spine-text { color: #d9dde4; opacity: .92; }

/* --- 天面・底・板の縁・丸い角 --- */
.binder.small.leather .b-face.b-top {
  background:
    linear-gradient(to right, rgba(255,255,255,.20), rgba(255,255,255,0) 65%),
    linear-gradient(to right, var(--lea-hi) 0 calc(var(--D) * .15), transparent 0),
    linear-gradient(to bottom, var(--lea-hi) 0 15%, #dfe3ea 15% 92%, var(--lea-hi) 92% 100%);
}
.binder.small.leather .b-face.b-bottom {
  background: linear-gradient(to top, var(--lea-lo) 0 15%, #c9ced7 15% 92%, var(--lea-lo) 92% 100%);
}
.binder.small.leather .b-face.b-round {
  background: linear-gradient(to bottom, var(--lea-hi) 0 15%, #dfe3ea 15% 92%, var(--lea-hi) 92% 100%);
}
.binder.big.leather .b-face.e-top, .binder.big.leather .b-face.sp-top { background: linear-gradient(to right, rgba(255,255,255,.22), rgba(255,255,255,0) 70%), var(--lea-hi); }
.binder.big.leather .b-face.e-bot, .binder.big.leather .b-face.sp-bot { background: var(--lea-lo); }
.binder.big.leather .b-face.b-round:not(.pg) {
  background: linear-gradient(to bottom, var(--lea-hi) 0 var(--bt), transparent var(--bt) calc(100% - var(--bt)), var(--lea-lo) calc(100% - var(--bt)) 100%);
}

/* A2: 革のシボだけ外す（それ以外は A のまま） */
.binder.leather { --grain-img: none; }

/* 背表紙と表紙の境目: 陰影だけで丸く見せる（2026-10-02 本人「②」。形は直角のまま）。背表紙は表紙側へ向かって暗くなる */
.binder.leather .b-face.b-spine {
  background-image:
    var(--sp-shade),
    linear-gradient(to right, rgba(0,0,0,.26) 0, rgba(255,255,255,.10) 16%, rgba(255,255,255,0) 46%, rgba(0,0,0,.14) 72%, rgba(0,0,0,.58) 100%),
    linear-gradient(to right, rgba(0,0,0,0) 90%, rgba(255,255,255,.16) 92%, rgba(255,255,255,0) 95%);
  background-size: auto, auto, auto;
  background-repeat: no-repeat;
}
/* 右上の角: 表紙の縁の線を 1px の光だけにして、二重の縁に見えないようにする。表紙の左端（背表紙との境目）にやわらかい影 */
.binder.big.leather .b-face.b-front {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset -1px 0 0 rgba(255,255,255,.14),
    inset 3cqw 0 3cqw -2cqw rgba(0,0,0,.42);
}

/* 光の反射をぼかす（2026-10-02 本人「光の反射をぼかしてほしい」）。top.css の --gloss（くっきりした白い帯 2 本＋上の照り）を、
   幅を 2 倍ほどに広げて山をなだらかにし、白の濃さを下げたものに置き換える。層の数は top.css と同じ（大 5 層・小 4 層。上の background-size の並びと合わせてある） */
.binder.leather {
  --gloss:
    linear-gradient(115deg,
      rgba(255,255,255,0)   calc(0% + var(--g) + var(--sh)),
      rgba(255,255,255,.025) calc(9% + var(--g) + var(--sh)),
      rgba(255,255,255,.06) calc(17% + var(--g) + var(--sh)),
      rgba(255,255,255,.085) calc(26% + var(--g) + var(--sh)),
      rgba(255,255,255,.06) calc(35% + var(--g) + var(--sh)),
      rgba(255,255,255,.025) calc(44% + var(--g) + var(--sh)),
      rgba(255,255,255,0)   calc(54% + var(--g) + var(--sh))),
    linear-gradient(115deg, rgba(255,255,255,0) calc(40% + var(--g) + var(--sh)), rgba(255,255,255,.02) calc(55% + var(--g) + var(--sh)), rgba(255,255,255,0) calc(72% + var(--g) + var(--sh))),
    linear-gradient(to bottom, rgba(255,255,255,.12) 0, rgba(255,255,255,.05) calc(26% + var(--gy)), rgba(255,255,255,0) calc(58% + var(--gy))),
    linear-gradient(to bottom, rgba(42,49,64,0) 70%, rgba(42,49,64,.08) 100%),
    linear-gradient(115deg, rgba(42,49,64,0) 55%, rgba(42,49,64,.07) 100%);
}
.binder.small.leather {
  --gloss:
    linear-gradient(115deg,
      rgba(255,255,255,0)   calc(4% + var(--sh)),
      rgba(255,255,255,.05) calc(16% + var(--sh)),
      rgba(255,255,255,.085) calc(27% + var(--sh)),
      rgba(255,255,255,.05) calc(38% + var(--sh)),
      rgba(255,255,255,0)   calc(52% + var(--sh))),
    linear-gradient(to bottom, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 50%),
    linear-gradient(to bottom, rgba(42,49,64,0) 70%, rgba(42,49,64,.08) 100%),
    linear-gradient(115deg, rgba(42,49,64,0) 55%, rgba(42,49,64,.07) 100%);
}

/* 面のつなぎ目に出る白い点線を消す（2026-10-02 本人「背の溝の白い点線」）。
   面は 1 枚ずつ片面だけ描くので、つなぎ目の端の 1px が背景（淡い青）と混ざって白い点に見えていた。各面を革の暗い色の 1px の縁で少し広げて、すき間をふさぐ */
.binder.leather .b-face.b-front { outline: 1px solid var(--lea-lo); } /* 表紙だけ（大小とも。背表紙やほかの面に付けると、輪郭がギザギザになる＝見比べで確認）。古い iOS では角丸に沿わず四角い縁になるかもしれない（未確認・コードレビュー） */