/* TOP（棚）の見た目。2026-09-30 T8: 見本 02_デザイン/HTMLモック/top.html から移した（計画 T8 の 3-3 の表）。
   移していないもの: 触れたときの傾き（--rx-h/--ry-h・transition・touch-action）・見本の切り替えボタン・使っていない .item .count */

/* ===== 大きいアルバム（円とバインダーは、画面の幅に合わせて大きさが変わる） ===== */
.hero {
  position: relative;      /* 円とバインダーをこの箱を基準に重ねる */
  width: calc(100% - 55px); /* 画面の幅から左右 27.5px ずつ引いた大きさ（393px の画面で直径338px。2026-09-30 本人のデザインで小さく。前は 100% − 15px＝378px） */
  max-width: 354px;        /* 広い画面では大きくなりすぎないよう止める（前の 396px を同じ割合で縮めた） */
  aspect-ratio: 1;         /* 正方形（円になる） */
  margin: 19px auto 0;     /* ヘッダーとの間 19px、左右は中央（2026-09-30 本人が開発者ツールで調整。前は 上 28px・下 0）。下は 0（同日、中身を縦に並べる箱にしたので余白が重ならなくなった。円と名前の枠の間は名前の枠の上の余白で決める） */
}
.hero-circle {
  position: absolute;      /* 箱いっぱいに重ねる */
  inset: 0;                /* 同上 */
  border-radius: 50%;      /* 丸にする */
  background: var(--circle); /* 淡い青 */
  box-shadow: inset 0 3px 7px var(--circle-shadow); /* 内側の影（上から光） */
}
.hero .binder {
  position: absolute;      /* 円の中の決まった位置に置く */
  /* 大きさと位置。2026-09-30 本人のデザインで円を 378→338px に縮めたが、バインダーは円ほど縮めず、前の 95.5% の大きさにした（画像で測った値）。
     そのため円に対する割合が上がり、下の端が円から少しはみ出す。
     経緯: 同日 本人がスライダーで「大きさ 96%・上へ 5.5%」→ 開発者ツールで 上 0.77%（幅 81.78%・左 9.11%）→ 今の値 */
  width: 80%;              /* 円に対するバインダーの幅の割合（393px の画面で約 270px）。87.3% だとヘッダーと名前の枠にくっつきそうだったので縮めた（2026-09-30 レビュー担当の指摘で調整） */
  left: 12.2%;             /* 見た目の中心を円の中心にそろえる。立体は背表紙が左へ張り出すので、箱の中心（左 10%）だと見た目が約 7.5px 左に寄っていた。そのぶん右へ（円の直径の 2.2%）（2026-09-30 位置の点検で調整） */
  top: 0;                  /* 円の上の端からの位置（同日 −4.45%→0。レビュー担当の指摘）。その前は：画像で測った −0.9% だと、背表紙の下の角が名前の枠にくっついて見えたので、12px 上げた（2026-09-30。前は 0.77%） */
}

/* ===== バインダー（2026-09-29 に CSS の立体に作り直し。本人の指示「表紙だけ画像でそれ以外をコードで。背も入れて」） =====
   表紙（画像）・背表紙・天面の3つの面で、正方形の厚みのある箱を本当の立体として組む。
   大きさは箱の幅に対する割合（cqw）で決めるので、大きいのも小さいのも同じ部品で、画面の幅が変わっても崩れない。
   ふだんはまっすぐ並べたまま（「一覧で傾けて置かない」決まりは守る）。触れたときだけ少し傾く。 */
.binder {
  position: relative;               /* 中の部品をこの箱を基準に置く */
  aspect-ratio: 322 / 368;          /* 箱の縦横比（前の見本と同じ） */
  container-type: inline-size;      /* 中で使う cqw を「この箱の幅に対する割合」にする */
  /* 影は .b-view に付ける（ここに付けると、中に置いた枚数の丸にまで影が落ちるため。2026-09-30 本人の指示「ドロップシャドウいらない」） */
  -webkit-tap-highlight-color: transparent; /* iPhone で触ったときの灰色の四角を出さない */
  --S: 104cqw;                      /* 表紙の一辺（正方形） */
  --ratio: .196;                    /* 厚みの割合（表紙の一辺に対する） */
  --D: calc(var(--S) * var(--ratio)); /* 厚み（背表紙の奥行き） */
  /* 向き（2026-09-30 本人の選択。縦は確認用ページのスライダーで、横は A〜D の動き方を見比べて「D」に決めた）。
     縦は負＝上から見下ろす（俯瞰）、横は背表紙が左手前・表紙が右奥。前は 縦+8度・横31度 */
  --rx: -24deg; --ry: 40deg;        /* 定位置（2026-09-30 本人が見本のスライダーで決めた。その前は 縦−20度・横41度） */
  --fore: .75;                      /* 小口（背の反対側）の厚み＝背の厚みの 75%。背から小口へ細くなる、くさび形（同日 本人の選択） */
  --fore-ang: atan(calc((1 - var(--fore)) * var(--ratio))); /* そのための表紙の傾き（75% のとき 2.81度）。--fore から自動で計算する（CSS の atan は iOS 15.4 以降） */
  -webkit-user-select: none; user-select: none; /* 長押しで背表紙の文字が選ばれないように */
  -webkit-touch-callout: none;      /* iPhone の長押しメニューを出さない */
}
.b-view {
  position: absolute; inset: 0;     /* 箱いっぱいに広げる */
  perspective: 385cqw;              /* 遠近の強さ（箱の幅に比例するので、大小で同じ見え方になる） */
  perspective-origin: 52.3% 100%;   /* 視点の横は立体の中心、縦（目の高さ）はバインダーの下の端（2026-09-30 本人の選択。前は 50%＝真ん中）。縦の角度と合わせて本人が選んだ見え方 */
  filter: drop-shadow(0 0 6px var(--binder-shadow)); /* 立体の形どおりに落ちる影（枚数の丸は .b-view の外にあるので影が付かない） */
}
.b3d {
  position: absolute;               /* 箱の中の決まった位置に置く */
  width: var(--S); height: var(--S); /* 表紙の大きさの正方形 */
  left: calc(52.3% - var(--S) / 2); /* 中心を横 52.3% に置く */
  top: calc(52% - var(--S) / 2);    /* 中心を縦 52% に置く（2026-09-30 本人が開発者ツールで調整。前は 50%。大きい・小さいアルバムの両方に効く） */
  transform-style: preserve-3d;     /* 中の面を本当の立体として並べる */
  transform: rotateX(var(--rx)) rotateY(var(--ry)); /* 定位置。触れている間は JS（aim）がこの要素の style に、触れた位置の角度を直接書く */
}
.b-face {
  position: absolute; left: 0; top: 0; /* 立体の左上を起点にする */
  -webkit-backface-visibility: hidden; /* 裏を向いた面は描かない（古い Safari 用） */
  backface-visibility: hidden;         /* 同上（標準） */
}
.b-front {
  width: var(--S); height: var(--S);   /* 表紙の大きさ */
  transform-origin: 0 50%;             /* 背の側の辺を軸にする */
  transform: translateZ(calc(var(--D) / 2)) rotateY(var(--fore-ang)); /* 厚みの半分だけ手前に出し、小口の側を少し奥へ倒す（くさび形） */
  background-size: cover;              /* 画像を面いっぱいに敷く（ここだけ画像） */
  background-position: center;         /* 画像の中央を見せる */
  box-shadow: inset max(1px, .3cqw) 0 0 #fff; /* 背表紙との境目の白い光の線 */
}
.b-spine {
  width: var(--D); height: var(--S);   /* 厚み × 高さ */
  left: calc((var(--S) - var(--D)) / 2); /* いったん中央に置いてから回す */
  transform: rotateY(-90deg) translateZ(calc(var(--S) / 2)); /* 左へ向けて、左の端まで出す */
  /* 立体にする前（acfbeef）と同じ色に戻した（2026-09-30 本人の指示「背表紙の色元に戻して」→ 候補から「立体にする前」を選択）。
     奥側が青灰 #c8d0de、手前がほぼ白、表紙との境目に #8899a9 の線。
     境目は奥から 60%（立体では奥側が遠近で縮むので、60% で見た目が半々＝立体にする前と同じになる）。
     それまでの「案B」（奥の濃い青灰→白のグラデーション）と「強＋」（陰影で丸く見せる）は取り消し */
  background: linear-gradient(to right,
    #c8d0de 0 60%,                                   /* 奥側: 青灰 */
    var(--tint-1) 60% calc(100% - max(2.5px, .75cqw)), /* 手前: ほぼ白 */
    #8899a9 calc(100% - max(2.5px, .75cqw)) 100%);   /* 表紙との境目の線（小さくても消えない太さ） */
}
.small .b-spine {
  /* 小さいアルバムの背表紙は、立体にする前と同じく、表紙と同じ絵を灰色で乗算して暗くしたもの（2026-09-30 同上） */
  background-color: #7b8084;       /* 掛け合わせる灰色（色みの無い灰色なので、どんな絵も色かぶりせずに暗くなる） */
  background-size: cover;          /* 絵を背表紙いっぱいに敷く */
  background-position: left center; /* 絵の左の端を見せる（表紙から続いて見えるように） */
  background-blend-mode: multiply; /* 絵と灰色を掛け合わせて暗くする */
}
.b-top {
  width: var(--S); height: var(--D);   /* 幅 × 厚み */
  top: calc((var(--S) - var(--D)) / 2); /* いったん中央に置いてから回す */
  transform: rotateX(90deg) translateZ(calc(var(--S) / 2)); /* 上へ向けて、上の端まで出す（--rx を負＝俯瞰にしたときだけ見える） */
  background: linear-gradient(to bottom, #c8d0de 0 8%, var(--tint-1) 8% 92%, var(--tint-3) 92% 100%); /* 奥の板・中身・手前の板 */
  clip-path: polygon(0 0, 100% 0, 100% calc(var(--fore) * 100%), 0 100%); /* くさび形に合わせて台形に切る（天面は下の辺が手前） */
}
.b-bottom {
  /* 底の面（2026-09-30）。天面を上下反対にした色。今の向き（縦 −20度＝俯瞰）では見えないが、縦を正（アオリ）にしたときのために残す */
  width: var(--S); height: var(--D);   /* 幅 × 厚み */
  top: calc((var(--S) - var(--D)) / 2); /* いったん中央に置いてから回す */
  transform: rotateX(-90deg) translateZ(calc(var(--S) / 2)); /* 下へ向けて、下の端まで出す（--rx を正＝アオリにしたときだけ見える） */
  background: linear-gradient(to top, #c8d0de 0 8%, var(--tint-1) 8% 92%, var(--tint-3) 92% 100%); /* 奥の板・中身・手前の板 */
  clip-path: polygon(0 0, 100% calc((1 - var(--fore)) * 100%), 100% 100%, 0 100%); /* くさび形に合わせて台形に切る（底面は上の辺が手前） */
}
.spine-text {
  position: absolute; left: 46%; top: 50%; /* 背表紙の中ほど、縦の中央 */
  transform: translate(-50%, -50%);    /* 中央へ寄せる（横には引き伸ばさない＝立体にする前と同じ。2026-09-30） */
  writing-mode: vertical-rl;           /* 縦書き */
  white-space: nowrap;                 /* 折り返さない */
  line-height: 1;                      /* 行の高さを文字ぴったりに */
}
.big .spine-text   { font-size: 3.42cqw; font-weight: 700; color: var(--ink); } /* 322px のとき 11px の太字 */
.small .spine-text { font-size: 4.05cqw; font-weight: 700; color: #fff; opacity: .85; } /* 74px のとき 3px の太字。暗い地なので白（立体にする前と同じ。2026-09-30 色を戻した） */
/* 小さいアルバムの表紙: 絵を少し広げて敷き、左の端（背表紙との境目）に絵の端の色が細く出ないようにする（2026-09-30 案B。本人の指摘「透けて見える」）。
   表紙の絵は JS が .b-front の style に入れるので、それを ::before で受け継いで重ねる */
.small .b-front { overflow: hidden; }  /* 広げた絵のはみ出しを切る */
.small .b-front::before {
  content: ""; position: absolute;     /* 表紙の上に重ねる */
  inset: 0 0 0 -12%;                   /* 左へ12%はみ出させる（そのぶん絵の左と上下が少し多く切れる） */
  background-image: inherit;           /* 表紙と同じ絵 */
  background-size: cover; background-position: center; /* 隙間なく敷く */
}
/* 表紙の右上の角の目印（大きさ 0）。枚数の丸を、この点の画面上の位置に合わせる（JS の placeBadge()） */
.b-corner { position: absolute; right: 0; top: 0; width: 0; height: 0; }

/* ===== 大きいアルバムだけ: チリ（2026-09-30 本人の選択「チリ 形・量 1.25」） =====
   表紙・裏表紙・背表紙の板を、中のページの束より少し大きくする（製本の「チリ」）。
   外寸は S×S×D のまま、ページの束を天・地・小口の三方で内側へ縮める。部品は makeBinder() が作る（3D構造担当の設計） */
.big {
  --bt: calc(var(--S) * .025);                          /* 板の厚み */
  --ch: calc(var(--S) * .0125);                         /* チリ＝板のはみ出し（表紙の一辺の 1.25%。本物のアルバムは 1% 前後） */
  --pd: calc(var(--D) - 2 * var(--bt));                 /* ページの束の厚み */
  --pw: calc(var(--S) - var(--bt) - var(--ch));         /* ページの束の幅 */
  --drop: calc((1 - var(--fore)) * var(--D) * .9875);     /* くさびで、小口の側のページが手前から下がる量 */
}
.big .g-board { position: absolute; left: 0; top: 0; width: var(--S); height: var(--S); transform-style: preserve-3d; } /* 板のまとまり。overflow・filter・opacity を付けると立体が平らになるので付けない */
.big .g-front { transform-origin: 0 50%; transform: translateZ(calc(var(--D) / 2)) rotateY(var(--fore-ang)); } /* 表紙の板（くさびの傾きは、表紙と縁をまとめて親が持つ） */
.big .g-front > .b-front { transform: none; }         /* 表紙そのものは親に任せる */
.big .g-back  { transform: translateZ(calc(var(--bt) - var(--D) / 2)); } /* 裏表紙の板（内側の面の位置） */
.big .back-in {                                        /* 裏表紙の内側（見返し）。チリのすき間の奥に見える */
  left: calc(var(--bt) + 1px); width: calc(var(--S) - var(--bt) - 1px); height: var(--S); /* 背表紙の面にぴったり接すると、描くときのずれで背表紙に点線が出たので、背の板の厚み＋1px 離す */
  background: var(--tint-2);
}
.big .e-bot { top: var(--S); width: var(--S); height: var(--bt); transform-origin: 50% 0; transform: rotateX(-90deg); background: #c8d0de; }     /* 板の底の縁 */
.big .e-top { top: calc(-1 * var(--bt)); width: var(--S); height: var(--bt); transform-origin: 50% 100%; transform: rotateX(90deg); background: #c8d0de; } /* 板の天の縁 */
.big .sp-bot, .big .sp-top { width: var(--bt); height: var(--pd); background: #c8d0de; } /* 背表紙の板の縁 */
.big .sp-bot { top: var(--S); transform-origin: 50% 0; transform: translateZ(calc(var(--D) / 2 - var(--bt))) rotateX(-90deg); }
.big .sp-top { top: calc(-1 * var(--pd)); transform-origin: 50% 100%; transform: translateZ(calc(var(--D) / 2 - var(--bt))) rotateX(90deg); }
.big .pg-bot, .big .pg-top {                           /* 引っ込んだページの束の天地。紙が重なった端を 12px ごとの縞で描く（同日 本人の選択） */
  left: var(--bt); width: var(--pw); height: var(--pd);
  background:
    linear-gradient(to right, rgba(42,49,64,.10), transparent 18% 82%, rgba(42,49,64,.10)), /* 背と小口の側をわずかに暗く */
    repeating-linear-gradient(to top, #fbfcfe 0 10px, #d6dce8 10px 12px);                   /* 紙の端の縞（PC の等倍の画面ではモアレが出る。iPhone の細かさでは出ない） */
}
.big .pg-bot { top: calc(var(--S) - var(--ch)); transform-origin: 50% 0; transform: translateZ(calc(var(--D) / 2 - var(--bt))) rotateX(-90deg);
  clip-path: polygon(0 0, 100% min(var(--drop), 100%), 100% 100%, 0 100%); } /* 上の辺＝手前。くさびに合わせて台形に切る */
.big .pg-top { top: calc(var(--ch) - var(--pd)); transform-origin: 50% 100%; transform: translateZ(calc(var(--D) / 2 - var(--bt))) rotateX(90deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - min(var(--drop), 100%)), 0 100%); } /* 下の辺＝手前 */

/* ===== 大きいアルバムの名前ピル ===== */
.hero-pill {
  position: relative;      /* 中の文字をこのピルを基準に置く */
  width: calc(100% - var(--pill-inset) * 2); /* 画面の幅から左右 36px ずつ引いた幅（393px の画面で 321px。2026-09-30 本人の指示で縮めた。前は左右 20px） */
  height: 31px;            /* 高さは固定 */
  margin: 40px auto 0;     /* 円との間 40px＝その間に右下の丸2つ（高さ 24px）を置き、丸との間を約 10px あける（2026-09-30 本人のデザインで 27→19px、位置の点検で 19→40px） */
  border-radius: 15px;     /* 角丸15px */
  background: var(--panel); /* 淡い青白 */
  border: 2px solid #fff;  /* PSD: 内側の白い線2px */
  box-shadow: 0 0 10px var(--panel-shadow); /* PSD: 影（距離0・サイズ10） */
  opacity: .9;             /* PSD: 不透明度90% */
}
.hero-pill .name {
  position: absolute;      /* 決まった位置に置く */
  left: 0; right: 0;       /* 横幅いっぱい */
  top: 6px;                /* 縦位置（PSD の文字の下端516px に合わせる） */
  text-align: center;      /* 中央ぞろえ */
  font-size: 13px;         /* 選んでいるアルバムの名前なので一段大きく（12→13px） */
  font-weight: 600;        /* アルバムの名前は太さ600（2026-09-29 本人の指示） */
  line-height: 16px;       /* 行の高さ */
  color: var(--ink);       /* 黒 */
  padding: 0 16px;         /* 左右の余白（2026-09-30「／13枚」を外したので 56→16px） */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 長い名前は「…」で切る */
}
/* 「／13枚」は外した（2026-09-30 本人のデザイン）。枚数は大きいアルバムの右下の丸に出す（.hero-meta） */

/* ===== 大きいアルバムの右下の丸2つ（2026-09-30 本人のデザイン） =====
   右が枚数の丸（小さいアルバムの丸と同じ見た目）。左の淡い青の丸は、役割が未確認（本人に確認中）なので、いまは飾りとして置くだけ */
.hero-meta {
  position: absolute;      /* 円の箱を基準に置く */
  right: calc((100% - 100cqw) / 2 + var(--pill-inset)); /* 右の端を、名前の枠の右の端（画面の右から 36px）にそろえる（同日、名前の枠を縮めたのに合わせて 20px から移動）。円の幅には上限（354px）があるので、画面の幅（.phone の 100cqw）から計算する。前の −7.5px 決め打ちは幅 480px で約 36px 内側にずれた（2026-09-30 位置の点検で調整） */
  top: calc(99.3% + 8px);  /* 表紙の下の端（円の上から 99.3%）より 8px 下。前の 94.8% は表紙の右下の角にくっついていた（2026-09-30 位置の点検で調整） */
  display: flex; gap: 6px; /* 丸を横に並べる */
  z-index: 1;              /* バインダーより手前 */
}
.hero-meta .dot {
  width: 24px; height: 24px; border-radius: 50%; /* 丸 */
  background: #c6cee5;     /* 淡い青（画像から測った色） */
}
.hero-meta .count-badge { position: static; transform: none; } /* 小さいアルバムの丸の見た目を借りる（置き方だけ変える） */

/* ===== 区切りの線（2026-09-30 本人のデザイン）: 上の段の下の縁に、下へ濃くなる4pxの影と線 ===== */
.divider {
  height: 4px;             /* 影の高さ */
  margin-top: 13px;        /* 名前の枠との間（画像で測った値） */
  background: linear-gradient(to bottom, rgba(188, 199, 221, 0), #bcc7dd); /* 下へ濃くなり、下の端で切れる */
}

/* ===== 下の段（区切りの線から下。画面の下まで伸ばす） ===== */
.lower {
  flex: 1;                 /* 画面の下まで */
  background: var(--page-low); /* わずかに暗い地 */
  /* ページの終わりの余白＝ナビの下の位置＋ナビの高さ 72px＋板とナビの間 16px。スクロールしきったとき、板の下の角丸がナビの 16px 上に見える。
     前は 119px（ナビを下から111px に浮かせていた分）で、板の下と合わせて約 190px が空いていた（2026-09-30 レビュー担当の指摘で調整） */
  padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 72px + 16px);
}

/* ===== アルバムの板（2026-09-30 本人のデザイン）: 白い角丸の大きな板。上の辺のまん中が台形にへこみ、そこに見出し ===== */
.album-area {
  position: relative;      /* 板と見出しをこの箱を基準に置く */
  margin-top: 10px;        /* 区切りの線との間（画像で測った値） */
  padding: 52px 0 24px;    /* 板の上の端からカードまで 52px（へこみの下から約 20px）、最後のカードから板の下の端まで 24px（前は 39px・72px（2026-09-30 レビュー担当の指摘で調整）） */
}
.album-area .panel {
  position: absolute; top: 0; bottom: 0; /* 箱の上下いっぱい */
  left: 20px; right: 20px; /* 画面の左右 20px の線にそろえ、カードは板の内側に収める（前は 34.5px・33.5px で、カードが板からはみ出していた（2026-09-30 レビュー担当の指摘で調整）） */
  background: #fff;        /* 白 */
  border-radius: 30px;     /* 角丸（画像で測った値） */
}
.album-area .notch {       /* 上の辺のへこみ。地の色で塗った台形（角は丸める）を板に重ねて、へこんで見せる */
  position: absolute; top: 0; left: 50%;
  width: 140px; height: 32px; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 32'%3E%3Cpath d='M0 0H140C133 0 129 3 126 8L117 25C115 29 112 32 107 32H33C28 32 25 29 23 25L14 8C11 3 7 0 0 0Z' fill='%23f1f4fb'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.album-area .label {       /* 見出し「ALBUM」（2026-09-30 本人の選択。本人のデザインの綴り「ARUBAMU」から変更） */
  position: absolute; top: 7px; left: 0; right: 0; margin: 0; /* h2 の初期の余白を消す */
  text-align: center;
  font-size: 15px; font-weight: 700; line-height: 18px; letter-spacing: .06em; /* 中のアルバムの名前（13px）より一段大きく（前は 13px・.02em（2026-09-30 レビュー担当の指摘で調整）） */
  color: var(--ink);
}

/* ===== ほかのアルバム（3列） ===== */
.shelf {
  position: relative;      /* 板より手前に出す */
  padding: 0 32px;         /* 左右の余白 32px＝板（左右20px）の 12px 内側（前は 18px で、カードが板からはみ出していた（2026-09-30 レビュー担当の指摘で調整）） */
  display: grid;           /* 格子に並べる */
  grid-template-columns: repeat(3, 1fr); /* 画面の幅を3等分（393px の画面で1列105px） */
  column-gap: 12px;        /* 列の間（前は 21px。カードを板の中に収めたぶん詰めた（2026-09-30 レビュー担当の指摘で調整）） */
  row-gap: 21px;           /* 段の間（2026-09-30 本人が開発者ツールで調整。前は 18px） */
}
.item {
  display: flex;           /* バインダー・名前・枚数を縦に並べる */
  flex-direction: column;  /* 縦並び */
  align-items: center;     /* 中心をそろえる */
  min-width: 0;            /* 長い名前でも列の幅を押し広げない */
}
/* 小さいアルバムの後ろの板（2026-09-30 本人「それぞれの小さいアルバムの下（奥）に角丸の四角の板をひいて」。参考画像のカードのような白い角丸＋やわらかい影）。
   バインダーと名前の枠を1枚の板にのせる（同日 本人の選択「名前まで」。もう1案「バインダーだけ」と見比べて決めた） */
.shelf .item.album {       /* アルバムが入っている枠だけ（画像なしの画面の「＋」の枠には付けない＝そちらは「影なし・境界線なし」で決まっている） */
  background: #fff;        /* 白い板 */
  border-radius: 14px;     /* 角丸 */
  box-shadow: 0 4px 14px var(--panel-shadow); /* やわらかい影 */
  padding: 0 8px 12px;     /* 左右と、名前の下の余白 */
}
.plate {                   /* 板の中で、バインダーを置く場所 */
  width: 100%;             /* 板の幅いっぱい */
  display: flex; justify-content: center; /* バインダーを中央に置く */
  padding: 14px 0 10px;    /* バインダーの上 14px・下 10px（前は上下 10px。枚数の丸がカードの上の端からはみ出さないよう下げた（2026-09-30 レビュー担当の指摘で調整）） */
  box-sizing: border-box;  /* 余白を幅に含める */
}
.item .binder {
  width: 61.34%;           /* 列の幅に対するバインダーの幅（2026-09-30 本人の選択「87%」＝前の 70.5% × 0.87。393px の画面で約 61px） */
}
.count-badge {
  /* 小さいアルバムの右上の枚数の丸（2026-09-29 本人の指示。名前の下の「14枚」の代わり） */
  position: absolute;      /* バインダーの箱を基準に置く */
  left: 99%; top: 10%;     /* 仮の位置。JS（placeBadge）が、立体の表紙の右上の角の位置に置き直す（2026-09-30 角度が触れた位置で連続して変わるようになり、決まった値では置けなくなったため） */
  transform: translate(-50%, -50%); /* 丸の大きさの半分だけ戻して、中心を角に合わせる */
  z-index: 1;              /* 立体より手前に出す */
  min-width: 24px;         /* 直径24px（1〜2桁のとき） */
  height: 24px;            /* 高さ24px */
  padding: 0 3px;          /* 2桁までは真ん丸、3桁（100）のときだけ横に伸びる */
  border-radius: 12px;     /* 高さの半分で、丸（伸びたときは角の丸い帯）にする */
  background: #989daa;     /* 青みの灰色（2026-09-30 本人の指示で青 #0173c9 から変更） */
  /* 縁は付けない（2026-09-29 本人の指示「フチを外して、野暮ったく見えるから」） */
  color: #fff;             /* 白い数字 */
  font-size: 12px;         /* 容量バッジの「400MB」と同じ大きさ（2026-09-29 本人の指示「400MBのフォントに合わせて」） */
  font-weight: 400;        /* Regular（2026-09-29 本人の指示「太字をやめて」→ 丸の数字だけ細くする。大きさは「400MB」と同じ 12px のまま） */
  line-height: 24px;       /* 丸の高さ（24px）の縦中央 */
  text-align: center;      /* 横中央 */
  font-variant-numeric: tabular-nums; /* 数字の幅をそろえる */
}
.item .pill {
  width: 100%;             /* 列の幅いっぱい */
  height: 20px;            /* 文字を大きくしたのに合わせて高さ 16→20px */
  margin-top: 16px;        /* バインダーとの間（2026-09-30 本人が開発者ツールで調整。前は 11px） */
  border-radius: 10px;     /* 高さの半分で丸端にする */
  background: var(--pill-small); /* 淡い青紫 */
  font-size: 11px;         /* 読める最小の目安 11px（10px から上げた） */
  font-weight: 600;        /* アルバムの名前は太さ600（2026-09-29 本人の指示） */
  line-height: 20px;       /* ピルの高さに合わせて縦中央 */
  text-align: center;      /* 中央ぞろえ */
  color: var(--ink);       /* 黒 */
  padding: 0 6px;          /* 左右の余白 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 長い名前は「…」で切る */
}

/* ===== 画像が無いときの「＋」の丸 ===== */
.plus {
  position: relative;      /* 中の「＋」の線をこの丸を基準に置く */
  display: block;          /* 大きさを効かせる（円の中の＋は span なので、そのままだと幅と高さが効かない） */
  flex: none;              /* 縦に並べたときに縮ませない */
  width: 74px; height: 74px; /* 直径74px（押すところなので画面の幅が変わっても固定） */
  padding: 0;              /* ボタンの初期の余白を消す */
  border-radius: 50%;      /* 丸にする */
  background: var(--plus-bg); /* 淡い青 */
  border: 0;               /* 境界線は付けない（2026-09-29 本人の指示「小さい丸の境界線はいらない」） */
  /* 影も付けない（2026-09-29 本人の指示「●の下のドロップシャドウ要らない」） */
  cursor: pointer;         /* PC では指の形のカーソル */
}
.plus::before, .plus::after { /* 「＋」の横棒と縦棒 */
  content: "";             /* 中身なしの箱を作る */
  position: absolute;      /* 丸の中央に置く */
  left: 50%; top: 50%;     /* 中央 */
  background: var(--plus-ink); /* 線の色 */
  transform: translate(-50%, -50%); /* 自分の大きさの半分だけ戻して真ん中にする */
}
.plus::before { width: 20px; height: 2px; } /* 横棒: 長さ20px・太さ2px（丸の大きさに対して小さすぎたので伸ばした） */
.plus::after  { width: 2px; height: 20px; } /* 縦棒: 同上 */
.phone.is-empty, .phone.is-empty .lower { background: #ffffff; } /* 画像が無いときの背景は真っ白（マイカード_画像なし.jpg）。2026-09-30 の新しいデザインは画像ありの画面だけなので、ここは前の決まりのまま */
.phone.is-empty .album-area .notch { display: none; } /* 白地に白い板なので、へこみは見えない（塗ると白地の上に青い台形が出る） */
.plus-slot {
  width: 70.5%;            /* 画像ありのときのバインダーと同じ幅 */
  aspect-ratio: 322 / 368; /* 同じ縦横比（下の名前の枠の高さを、画像ありとそろえるため） */
  display: flex;           /* 中の「＋」の丸を */
  align-items: center; justify-content: center; /* 真ん中に置く */
}

/* ===== 画像が無いときの、大きい円の中の案内（円ぜんたいが「アルバムを作る」ボタン） ===== */
.hero-empty {
  position: absolute;      /* 淡い円とぴったり重ねる */
  inset: 0;                /* 同上 */
  border: 0; padding: 0;   /* ボタンの初期の枠と余白を消す */
  border-radius: 50%;      /* 押せる範囲も丸にする */
  background: transparent; /* 下の淡い円を見せる */
  display: flex; flex-direction: column; /* ＋の下に文字を置く */
  align-items: center; justify-content: center; /* 円の真ん中に置く */
  gap: 14px;               /* ＋と文字の間 */
  font: inherit;           /* 書体を合わせる */
  cursor: pointer;         /* PC では指の形のカーソル */
}
.hero-empty .plus {
  /* 円の中は「＋」の線だけにする（2026-09-29 本人の指示「グレーの丸の中に白丸はダサい。プラスだけで良い」） */
  width: 56px; height: 56px; /* 線を置くための枠（見えない） */
  background: none;        /* 白い丸をやめる */
  border: 0;               /* 枠線も消す */
  pointer-events: none;    /* 押すのは外側の円（ボタン）で受ける */
}
.hero-empty .plus::before { width: 40px; height: 3px; border-radius: 2px; } /* 横棒: 白い丸が無くても目に入るよう、長く太く。端を少し丸める */
.hero-empty .plus::after  { width: 3px; height: 40px; border-radius: 2px; } /* 縦棒: 同上 */
.hero-empty .label {
  font-size: 14px;         /* 案内の文。画面でいちばん読んでほしい文なので少し大きめ */
  line-height: 20px;       /* 行の高さ */
  color: var(--ink);       /* 黒 */
}

/* ===== TOP に足した分（T8。計画 3-6） ===== */
a.hero { display: block; }                        /* 大きいアルバム全体を押せるリンクにする（a は既定で文字の扱いなので箱にする） */
a.hero, a.item { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } /* リンクの色と下線、iPhone の灰色の四角を出さない */
a.hero:active .binder, a.item:active .plate { opacity: .85; } /* 押した手応え（少し薄くする） */
.spine-text { max-height: 92%; overflow: hidden; text-overflow: ellipsis; } /* 長い背表紙の文字は、背表紙の中で「…」にする（縦書きなので高さで切る） */
/* ⑦-3（2026-09-30 本人の選択 C）: カードが0枚のアルバムの表紙は、淡い青の無地の真ん中に白い丸と薄い「＋」 */
.b-front.no-cover { background: var(--tint-2); }  /* 表紙は淡い青の無地 */
.b-front.no-cover::after {
  content: '';                                     /* 絵の代わりに置く印 */
  position: absolute; left: 50%; top: 50%;         /* 表紙の真ん中 */
  transform: translate(-50%, -50%);                /* 印の中心を真ん中に合わせる */
  width: 28%; aspect-ratio: 1; border-radius: 50%; /* 表紙の幅の 28% の丸 */
  background:
    linear-gradient(#b8c3d8, #b8c3d8) center / 36% 5% no-repeat, /* 「＋」の横線（薄い青灰） */
    linear-gradient(#b8c3d8, #b8c3d8) center / 5% 36% no-repeat, /* 「＋」の縦線 */
    #fff;                                          /* 白い丸（色は最後の層にだけ書ける） */
}
.small .b-spine.no-cover { background: #c9d2e3; } /* 小さいアルバムの背表紙も、絵が無ければ淡い青を少し暗くした無地 */