/* ===== アルバムの中（見本が無いので、TOP の色と左右 20px の線にそろえた） ===== */
.album-screen { position: relative; min-height: 100dvh; background: var(--page); padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 88px); } /* 地は TOP と同じ淡い青。下は「＋」に隠れない余白 */
.album-head {
  position: sticky; top: 0; z-index: 5;           /* スクロールしても上に残す（.phone を overflow: clip にしたので効く） */
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; /* 左・中央・右 */
  height: calc(60px + env(safe-area-inset-top));  /* ホーム画面版はステータスバーの分を足す */
  padding: env(safe-area-inset-top) 20px 0;       /* 左右 20px の線 */
  background: var(--head); box-shadow: 0 1px 0 #bcc7dd; /* TOP のヘッダーと同じ地と下の線 */
}
.icon-btn { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; } /* 押せる範囲 44px */
.icon-btn.back::before { content: ""; position: absolute; left: 16px; top: 15px; width: 13px; height: 13px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); } /* 「く」の形の戻る印 */
.icon-btn.more::before { content: "…"; font-size: 22px; line-height: 44px; } /* 「…」 */
.album-title { margin: 0; font-size: 16px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* アルバム名は太さ600。長ければ「…」 */
.album-menu { position: absolute; right: 20px; top: calc(100% - 4px); /* 上の段（sticky）の中に置いたので、上の段の下の端から出る（T9 のレビュー） */ z-index: 6; display: flex; flex-direction: column; min-width: 200px; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 4px 14px var(--panel-shadow); } /* 右上から出る白い板（小さいアルバムの板と同じ影） */
.album-menu button { height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; } /* 1行ずつ押せる */
.album-menu button:disabled { opacity: .4; }      /* 0枚のとき「表紙を選ぶ」は押せない */
.album-menu .danger { color: #c23b3b; }           /* 消す操作だけ赤 */
.pick-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 20px 0; font-size: 13px; color: var(--ink); } /* 表紙を選んでいる間の案内 */
.pick-note button { height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: var(--tint-2); font: inherit; font-size: 13px; } /* やめる */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 20px 0; } /* 3列・左右 20px */
.card-tile { position: relative; display: block; aspect-ratio: 63 / 88; border-radius: 4.5% / 3.2%; overflow: hidden; background: var(--tint-3); box-shadow: 0 2px 6px rgba(160, 172, 192, .35); -webkit-tap-highlight-color: transparent; } /* カードの比率 63:88。読み込み前は淡い青 */
.card-tile img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 縮小版を枠いっぱいに */
.cover-mark { position: absolute; left: 4px; top: 4px; height: 18px; padding: 0 6px; border-radius: 9px; background: rgba(42, 49, 64, .8); color: #fff; font-size: 11px; line-height: 18px; } /* 表紙の印（文字の最小 11px） */
.is-picking .card-tile { outline: 2px dashed var(--brand-blue-text); outline-offset: -2px; } /* 表紙を選んでいる間は点線で囲む */
.album-note, .album-missing { margin: 20px 20px 0; font-size: 13px; line-height: 1.6; color: var(--sub); text-align: center; } /* 枚数・0枚の案内・見つからない */
.add-btn { position: fixed; right: max(20px, calc(50vw - 220px)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 5; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-blue-text); box-shadow: 0 4px 14px rgba(1, 115, 201, .35); } /* 右下の「＋」。広い画面では 480px の枠の右から 20px */
.add-btn::before, .add-btn::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 2px; transform: translate(-50%, -50%); } /* 「＋」の線 */
.add-btn::before { width: 24px; height: 3px; }    /* 横棒 */
.add-btn::after { width: 3px; height: 24px; }     /* 縦棒 */
.add-btn.is-full { background: var(--shade); box-shadow: none; } /* 上限に達したら灰色（押すと知らせ） */
/* ===== T9 のレビュー・デザイン担当の指摘で足した分 ===== */
.album-menu .danger { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; } /* 「アルバムを消す」の上に細い区切りの線（ほかと間違えて押さないように） */
.pick-note { position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 4; padding: 8px 0; margin-top: 0; background: var(--page); } /* 表紙を選ぶ案内は上の段の下に貼り付ける（スクロールしていても見える） */
.pick-note button { background: #fff; box-shadow: 0 0 0 1px var(--line); } /* 「やめる」をボタンと分かる濃さに */
.is-picking .add-btn { display: none; }            /* 表紙を選んでいる間は「＋」を隠す（押せそうに見えないように） */