/* 新商品（2026-10-21 ユーザー承認のモック _mocks/packs-refresh-20261021 の A〜E）。
   A・B: PC は左に一覧・右に詳細（右は画面に付いてくる）。900px 以下は1列で、詳細は全面で開く（#packPane.is-open）。
   C: 収録カードの行（画像・名前・価格）。D: まとめて検索の切り替え・進み具合。E: 店舗×レアの表（各行の最安だけ緑）。
   描くのは static/packs.js。部品の形は環境デッキ（css/meta-deck.css）・購入候補にそろえる。境目の 900px も同じ。 */
#mode-packs .deck-builder { max-width: 1120px; }
.pk-panes { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; text-align: left; }
.pk-pane-list { min-width: 0; }
.pk-pane-detail {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border-radius: 10px;
  background: var(--bg-card);
}
.pk-sheet-bar { display: none; }
#mode-packs #packList { padding: 0; text-align: left; }
#mode-packs #packList.meta-loading { padding: 24px; text-align: center; }

/* A・B: 一覧の行（名前・収録数・発売日・あと◯日／発売済み）。選んでいるパックは金の実線 */
.pk-group { margin-bottom: 14px; }
.pk-group-h { margin: 0 0 6px; color: var(--text-m); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.pk-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin: 0 0 4px;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pk-row:hover { background: var(--bg-hover); }
.pk-row.selected { box-shadow: inset 0 0 0 1px #f3ce46; }
.pk-row:focus-visible { outline: 2px solid #f3ce46; outline-offset: 2px; }
.pk-row-main { min-width: 0; }
.pk-row-name { display: -webkit-box; overflow: hidden; color: var(--text); font-size: .84rem; font-weight: 700; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pk-row-sub { display: block; margin-top: 2px; color: var(--text-m); font-size: .7rem; }
.pk-row-state { text-align: right; white-space: nowrap; color: var(--text-m); font: .72rem var(--mono); }
.pk-row-state b { display: block; color: var(--text); font-size: .78rem; }
.pk-chip { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--bg-hover); color: var(--accent-l); font: 700 .66rem var(--font); }
.pk-chip.is-soon { background: rgba(243, 206, 70, .14); color: #f3ce46; }
.pk-note { margin-top: 10px; color: var(--text-m); font-size: .72rem; line-height: 1.6; }

/* 詳細の見出しと操作 */
.pk-title { margin: 0; color: var(--text); font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.pk-meta { margin-top: 4px; color: var(--text-m); font-size: .78rem; }
.pk-meta b { color: var(--text); font-family: var(--mono); }
.pk-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.pk-bar-l, .pk-bar-r { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 6px; background: var(--bg-hover); color: var(--text); font: 700 .8rem var(--font); white-space: nowrap; cursor: pointer; }
.pk-btn:hover:not([disabled]) { background: #353843; }
.pk-btn[disabled] { color: #5e6a80; cursor: default; }
.pk-btn.is-icon { width: 34px; padding: 0; }
.pk-btn.is-open { box-shadow: inset 0 0 0 1px var(--accent-l); }
.pk-btn.is-small { height: 28px; padding: 0 10px; font-size: .74rem; }
.pk-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg); }
.pk-seg button { padding: 5px 12px; border: 0; border-radius: 6px; background: none; color: var(--text-m); font: 700 .76rem var(--font); cursor: pointer; }
.pk-seg button.is-on { background: var(--bg-hover); color: var(--text); }
.pk-seg button[disabled] { cursor: default; opacity: .6; }
.pk-hint { margin: 0 0 10px; color: var(--text-m); font-size: .72rem; line-height: 1.6; }
.pk-hint b { color: var(--text); font-family: var(--mono); }
.pk-green { color: var(--green); }
.pk-prog { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--text-m); font-size: .74rem; }
.pk-prog b { color: var(--text); font-family: var(--mono); }
.pk-prog i { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--bg-hover); }
.pk-prog i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--accent-l); transition: width .2s; }

/* C: 収録カードの行 */
.pk-cards { display: flex; flex-direction: column; gap: 2px; }
.pk-cards[hidden], .pk-matrix[hidden] { display: none; }
.pk-card { display: grid; grid-template-columns: 28px 30px minmax(0, 1fr) 104px; align-items: center; gap: 10px; min-height: 48px; padding: 3px 10px 3px 4px; border-radius: 6px; cursor: pointer; }
.pk-card:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.pk-card:hover { background: var(--bg-hover); }
.pk-card:focus-visible { outline: 2px solid #f3ce46; outline-offset: 1px; }
/* メニューを開いているカード（金の実線＝選択中） */
.pk-card.is-menu { box-shadow: inset 0 0 0 1px #f3ce46; }
.pk-num { color: #5e6a80; font: .7rem var(--mono); text-align: right; }
.pk-thumb { display: block; width: 30px; height: 43px; overflow: hidden; border-radius: 2px; background: var(--bg-hover); }
.pk-thumb .pack-card-thumb { display: block; width: 100%; height: 100%; border-radius: 0; background: none; }
.pk-thumb .pack-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-cname { min-width: 0; overflow: hidden; color: var(--text); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.pk-cname small { display: block; overflow: hidden; color: var(--text-m); font-size: .68rem; line-height: 1.3; text-overflow: ellipsis; }
.pk-cprice { text-align: right; color: var(--text); font: 700 .82rem var(--mono); white-space: nowrap; }
.pk-cprice small { display: block; font: .64rem var(--mono); font-weight: 400; }
.pk-cprice small.pk-shop { overflow: hidden; color: var(--text-m); font-family: var(--font); text-overflow: ellipsis; }
.pk-cprice small.is-up { color: var(--red); }
.pk-cprice small.is-down { color: var(--green); }
.pk-cprice .is-none { color: #5e6a80; font-weight: 400; font-family: var(--font); font-size: .74rem; }

/* E: 店舗×レアの表。カード名はまとまりの頭に1回、行はレアリティ。各行でいちばん安い店だけ緑 */
.pmx-scroll { margin: 0 -4px; overflow-x: auto; }
/* 表を開いている間（#mode-packs.is-matrix）は一覧を細くし、全体の幅を広げて表に回す（2026-10-22 ユーザー指摘「横幅が足りない」） */
#mode-packs.is-matrix .deck-builder { max-width: 1320px; }
#mode-packs.is-matrix .pk-panes { grid-template-columns: 260px minmax(0, 1fr); }
.pmx { width: 100%; border-collapse: separate; border-spacing: 0; font: .8rem var(--font); white-space: nowrap; }
.pmx th { position: sticky; top: 0; z-index: 2; padding: 6px 6px; background: var(--bg-card); color: var(--text-m); font-size: .7rem; font-weight: 700; text-align: right; }
.pmx td { padding: 7px 6px; border-top: 1px solid rgba(255, 255, 255, .04); color: var(--text); font-family: var(--mono); text-align: right; }
.pmx td a { color: inherit; text-decoration: none; }
.pmx td a:hover { text-decoration: underline; }
.pmx .pmx-sc { position: sticky; left: 0; z-index: 1; min-width: 88px; background: var(--bg-card); color: var(--text-m); font-family: var(--font); font-size: .74rem; text-align: left; }
.pmx th.pmx-sc { z-index: 3; }
.pmx td.is-dim { color: #5e6a80; }
.pmx td.is-fail { font-family: var(--font); font-size: .7rem; }
/* 他の商品の版（2026-10-22 毎朝の収集の表から）。このパックの行でその店に他の版しか無いマスは、値段の横に版の札・最安の緑から外す。
   他の商品の版だけのレアリティは畳み、「も見る」で開く（薄い色・版の札・+候補なし） */
.pmx-ver { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: var(--bg-hover); color: var(--text-m); font: 700 .62rem var(--mono); vertical-align: 1px; }
.pmx td.is-other { color: var(--text-m); }
.pmx-date { display: block; color: var(--text-m); font: .6rem var(--mono); font-weight: 400; }
.pmx tr.pmx-other td, .pmx tr.pmx-other td.pmx-sc { color: #5e6a80; }
.pmx tr.pmx-other[hidden] { display: none; }
.pmx tr.pmx-more-row td { padding: 0 0 4px; border-top: 0; text-align: left; }
.pmx-more { display: inline-flex; align-items: center; margin-left: 4px; padding: 3px 8px; border: 0; border-radius: 5px; background: none; color: var(--accent-l); font: 700 .7rem var(--font); cursor: pointer; }
.pmx-more:hover { background: var(--bg-hover); }
/* PC: 表の中で縦にもスクロールして、店名の見出しを付いてこさせる（外側が横スクロールの箱だと、ページのスクロールでは見出しが止まらない） */
/* PC は表の中で縦にスクロールさせない（右の欄と二重のスクロールになっていた）。横もはみ出させて右の欄のスクロール1つにまとめる。
   見出しは右の欄の上端に付いてくる */
@media (min-width: 901px) { .pmx-scroll { overflow: visible; } .pmx th { top: -16px; } }
/* 店名は広い画面では正式名、狭い画面では短い呼び名（.pmx-shop-s） */
.pmx-shop-s { display: none; }
.pmx td.is-min { background: rgba(99, 211, 174, .10); color: var(--green); font-weight: 700; }
.pmx tr.pmx-g td { padding: 12px 0 4px; border-top: 0; text-align: left; }
.pmx-gname { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 8px; padding-left: 4px; color: var(--text); font: 700 .84rem var(--font); }
.pmx-thumb { display: block; width: 22px; height: 32px; overflow: hidden; border-radius: 2px; background: var(--bg-hover); }
.pmx-thumb .pack-card-thumb { display: block; width: 100%; height: 100%; border-radius: 0; background: none; }
.pmx-thumb .pack-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pmx td.pmx-add { padding: 4px 4px 4px 8px; }
.pmx-add-btn { height: 26px; padding: 0 8px; border: 0; border-radius: 5px; background: var(--bg-hover); color: var(--accent-l); font: 700 .7rem var(--font); white-space: nowrap; cursor: pointer; }
.pmx-add-btn:hover { background: #353843; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 900px 以下: 1列。詳細は全面で開く（カードの詳細の引き出し #deckCardDrawer は z-index 1000 なので、その下に置く） */
@media (max-width: 900px) {
  #mode-packs .deck-builder { max-width: 800px; }
  .pk-panes { display: block; }
  .pk-pane-detail { display: none; }
  .pk-pane-detail.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 900;
    max-height: none;
    padding: 0 12px 24px;
    border-radius: 0;
    background: var(--bg);
  }
  .pk-pane-detail.is-open .pk-sheet-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; height: 52px; margin: 0 -12px 8px; padding: 0 8px; background: var(--bg); }
  .pk-pane-detail.is-open #packDetail { padding: 12px; border-radius: 10px; background: var(--bg-card); }
  .pk-bar { align-items: stretch; }
  .pk-bar-r { flex: 1 1 100%; }
  .pk-bar-r .pk-seg + .pk-btn { flex: 1; }
  .pk-card { grid-template-columns: 22px 30px minmax(0, 1fr) 84px; gap: 8px; }
  /* スマホ: 店名を短く・レアリティの列は折り返して、見える店を増やす */
  .pmx-shop-l { display: none; }
  .pmx-shop-s { display: inline; }
  .pmx { font-size: .76rem; }
  .pmx td { padding: 7px 5px; }
  .pmx th { padding: 6px 5px; }
  .pmx .pmx-sc { min-width: 78px; max-width: 78px; white-space: normal; line-height: 1.3; font-size: .7rem; }
  .pmx .pmx-ver { margin-left: 0; }
  .pmx th { top: 0; }
}
/* 全面の詳細を開いている間: 後ろのページを動かさない・アプリ追加の案内を重ねない */
@media (max-width: 900px) {
  html.pack-sheet-open, html.pack-sheet-open body { overflow: hidden; }
  html.pack-sheet-open .pwa-banner { display: none !important; }
}