/*
 * market-pop.css — ポップ版の見た目を既存の市場UI(#market-*, .market-*)へ
 * 上書きする "スキン" レイヤー。
 *
 * ロジック(src/market.js)・DOM構造・タッチ/狭幅レスポンシブは一切変更せず、
 * 色・フォント・線・影・角丸だけをモック(docs/mockups/market-ui)に寄せている。
 * style.css より後に読み込むこと(index.html の <link> 順、同じセレクタは
 * 後勝ち)——同じレイアウト決定(flex方向・幅・display切り替え)を担う
 * style.css 側のタッチ/狭幅 @media ルールと衝突しないよう、そこが触っている
 * 構造プロパティ(width/flex/display/grid-template-columns)には触れていない。
 *
 * クラス名は mk- 前置きで新規追加(市場UIモックの構造名)。既存の market-*
 * クラスと併記されるので、DOM側は src/market.js を参照。
 */

#market-modal {
  /* §pop-tokens: these 8 colors + border/radius/font values now come from
     src/pop-tokens.css's --pop-* tokens (single source of truth, shared by
     future ポップ版 UIs — see docs/feedback-2026-09-18.md §4/決定). The
     --mk-* names stay as the local aliases market-pop.css/style.css already
     reference so no selector below needed to change. --mk-card-sel/--mk-panel
     /--mk-brown/--mk-red/--mk-green/--mk-track aren't part of the --pop-*
     contract and stay literal. */
  --mk-ink:        var(--pop-ink);
  --mk-cream:      var(--pop-cream);
  --mk-card:       var(--pop-paper);
  --mk-card-sel:   #fff8e2;
  --mk-panel:      #e4f7f5;
  --mk-yellow:     var(--pop-yellow);
  --mk-coral:      var(--pop-coral);
  --mk-turq:       var(--pop-turq);
  --mk-lime:       var(--pop-lime);
  --mk-brown:      #a34a00;
  --mk-red:        #d8352a;
  --mk-green:      #2f7d3a;
  --mk-muted:      var(--pop-muted);
  --mk-track:      #eae0cd;
  --mk-bw:         var(--pop-border-thin);
  --mk-bw-strong:  var(--pop-border);
  --mk-r:          var(--pop-radius-sm);
  --mk-r-card:     var(--pop-radius-md);
  --mk-r-frame:    var(--pop-radius-lg);
  --mk-font:       var(--pop-font-body);
  --mk-font-pop:   var(--pop-font-display);

  background: rgba(10, 60, 80, 0.28);
}

#market-panel {
  background: var(--mk-cream);
  border: var(--mk-bw-strong) solid var(--mk-ink);
  border-radius: var(--mk-r-frame);
  box-shadow: 0 8px 0 rgba(20, 18, 14, 0.45);
  backdrop-filter: none;
  font-family: var(--mk-font);
  color: var(--mk-ink);
}
body.touch #market-panel { backdrop-filter: none; }

#market-header {
  background: var(--mk-yellow);
  border-bottom: var(--mk-bw-strong) solid var(--mk-ink);
}
#market-title { font-family: var(--mk-font-pop); font-weight: 800; color: var(--mk-ink); }
#market-wallet {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--mk-cream);
  border: var(--mk-bw) solid var(--mk-ink);
  box-shadow: 0 2px 0 var(--mk-ink);
  font-family: var(--mk-font-pop);
  font-weight: 800;
  color: var(--mk-brown);
}
#market-close {
  font-family: var(--mk-font-pop);
  font-weight: 800;
  background: var(--mk-coral);
  color: var(--mk-ink);
  border: var(--mk-bw) solid var(--mk-ink);
  border-radius: var(--mk-r);
  box-shadow: 0 4px 0 var(--mk-ink);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
#market-close:hover { background: var(--mk-coral); filter: brightness(1.05); }
#market-close:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--mk-ink); }

/* -- rail -- */
#market-rail {
  background: var(--mk-turq);
  border-right: var(--mk-bw-strong) solid var(--mk-ink);
}
.market-cat-btn {
  background: var(--mk-panel);
  border: var(--mk-bw) solid var(--mk-ink);
  border-radius: var(--mk-r);
  color: var(--mk-ink);
  font-family: var(--mk-font);
  font-weight: 800;
  box-shadow: 0 2px 0 var(--mk-ink);
  opacity: 0.9;
  transition: transform 0.06s, box-shadow 0.06s, background 0.12s, opacity 0.12s;
}
.market-cat-btn:hover { opacity: 1; background: var(--mk-panel); }
.market-cat-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--mk-ink); }
.market-cat-btn.active {
  background: var(--mk-yellow);
  border-color: var(--mk-ink);
  box-shadow: 0 3px 0 var(--mk-ink);
  color: var(--mk-ink);
  opacity: 1;
}

/* -- card grid -- */
#market-grid { background: var(--mk-cream); }
.market-card {
  background: var(--mk-card);
  border: var(--mk-bw) solid var(--mk-ink);
  border-radius: var(--mk-r-card);
  color: var(--mk-ink);
  font-family: var(--mk-font);
  box-shadow: 0 3px 0 var(--mk-ink);
  transition: transform 0.06s, box-shadow 0.06s;
}
.market-card:hover { border-color: var(--mk-ink); transform: translateY(-1px); box-shadow: 0 4px 0 var(--mk-ink); }
.market-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--mk-ink); }
.market-card.selected,
.market-card.is-selected {
  background: var(--mk-card-sel);
  border: var(--mk-bw-strong) solid var(--mk-coral);
  box-shadow: 0 4px 0 var(--mk-coral);
}
.market-card.selected:hover { box-shadow: 0 5px 0 var(--mk-coral); }
.market-card.owned-full,
.market-card.is-owned { opacity: 0.62; }
.market-card.owned-full:hover,
.market-card.is-owned:hover { opacity: 0.8; }
.market-card.unaffordable { opacity: 0.72; }
.market-card-icon { color: var(--mk-ink); }
.market-card-name { font-weight: 800; color: var(--mk-ink); }
.market-card-price { color: var(--mk-brown); font-family: var(--mk-font-pop); }
.market-card.unaffordable .market-card-price,
.market-card-price.is-short { color: var(--mk-red); }
.market-card-state,
.market-card-meta { color: var(--mk-muted); font-weight: 700; }
.market-card-check {
  background: var(--mk-lime);
  border: var(--mk-bw) solid var(--mk-ink);
  color: var(--mk-ink);
  border-radius: 50%;
}
.market-card-tier {
  display: inline-block;
  box-sizing: border-box;
  height: 7px;
  border: var(--pop-border-thin) solid var(--mk-ink);
  border-radius: 99px;
}
.market-group-header,
.mk-group-tab {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  width: fit-content;
  height: 28px;
  margin: 0;
  padding: 0 var(--pop-space-3);
  border: var(--pop-border-thin) solid var(--mk-ink);
  border-radius: 999px;
  background: var(--mk-panel);
  color: var(--mk-ink);
  font-family: var(--mk-font);
  font-size: var(--pop-fs-name);
  line-height: 1;
}
/* §fix (2026-09-18): style.css's `.market-group-header:first-child` (a
   holdover from the pre-pop plain-header look) zeroes border-top/padding-top
   for the first group tab — that rule matches the pill's full-perimeter
   border here too and, being a :first-child selector, out-specifies the
   plain-class rule above regardless of load order, so the pill's top border
   was silently not drawn (never actually clipped by overflow/mask). Restore
   the full pill border for the first tab specifically. */
.market-group-header:first-child,
.mk-group-tab:first-child {
  border-top: var(--pop-border-thin) solid var(--mk-ink);
  padding-top: 0;
}

/* -- detail panel -- */
#market-detail {
  background: var(--mk-panel);
  border-left: var(--mk-bw-strong) solid var(--mk-ink);
  color: var(--mk-ink);
  font-family: var(--mk-font);
}
.market-detail-empty { color: var(--mk-muted); }

/* 3Dビューア枠(モックの mk-viewer)。中身は src/market-viewer.js が
   mountViewer()/unmountViewer() で差し込む。 */
.mk-viewer {
  position: relative;
  flex: 0 0 auto;
  height: 92px;
  width: 100%;
  margin: 0 auto 6px;
  border-radius: var(--mk-r-card);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 12%, #2ec6e0 0%, #0e6f86 72%);
  border: var(--mk-bw) solid var(--mk-ink);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.12);
}
.mk-viewer-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: var(--pop-border-thin) solid var(--mk-ink);
}
.mk-viewer-bubble--a { top: 10px; left: 12px; width: 9px; height: 9px; }
.mk-viewer-bubble--b { top: 24px; left: 26px; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.4); }
.mk-viewer-shadow {
  position: absolute;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  width: 58%;
  height: 11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
}
.mk-viewer-mount { position: absolute; inset: 0; color: #d6f4ff; }
.mk-viewer-mount svg { width: 60%; height: 60%; }
.mk-viewer-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #d6f4ff; }

.market-detail-name,
.mk-detail-name { font-family: var(--mk-font-pop); font-weight: 800; color: var(--mk-ink); }
.market-detail-price,
.mk-detail-price { color: var(--mk-brown); font-family: var(--mk-font-pop); font-weight: 800; }
.market-detail-price.unaffordable,
.mk-detail-price.is-short { color: var(--mk-red); }
.market-detail-state,
.mk-detail-stock { color: var(--mk-green); }
.market-detail-desc,
.mk-detail-desc { color: var(--mk-ink); }
.market-detail-expand-btn { background: var(--mk-panel); color: var(--mk-ink); border: var(--mk-bw) solid var(--mk-ink); border-radius: var(--mk-r); }

.market-stat-label { color: var(--mk-muted); }
.market-stat-track {
  background: var(--mk-track);
  border: var(--pop-border-thin) solid var(--mk-ink);
  border-radius: 99px;
}
.market-stat-fill { background: var(--mk-coral); border-radius: 99px; }

/* -- buttons: stepper / max / action -- */
.market-qty-btn,
.market-qty-max-btn,
.market-action-btn {
  font-family: var(--mk-font-pop);
  font-weight: 800;
  border: var(--mk-bw) solid var(--mk-ink);
  border-radius: var(--mk-r);
  box-shadow: 0 4px 0 var(--mk-ink);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
.market-qty-btn { background: var(--mk-panel); color: var(--mk-ink); }
.market-qty-btn:hover { background: var(--mk-panel); filter: brightness(1.05); }
.market-qty-value { color: var(--mk-ink); font-family: var(--mk-font-pop); font-weight: 800; }
.market-qty-max-btn { background: var(--mk-turq); color: var(--mk-ink); }
.market-qty-max-btn:hover { background: var(--mk-turq); filter: brightness(1.05); }
.market-qty-total { color: var(--mk-muted); }
.market-qty-total.unaffordable { color: var(--mk-red); }
.market-action-btn { background: var(--mk-yellow); color: var(--mk-ink); }
.market-action-btn:hover:not(:disabled) { filter: brightness(1.05); background: var(--mk-yellow); }
.market-action-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--mk-ink); }
.market-action-btn:disabled {
  background: var(--mk-panel);
  color: var(--mk-muted);
  opacity: 0.6;
  box-shadow: 0 4px 0 var(--mk-ink);
}
.market-qty-btn:active,
.market-qty-max-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--mk-ink); }

.mk-detail-short {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 800;
  color: var(--mk-red);
  text-align: center;
}

/* §a11y: keep the focus ring visible against the new light background. */
.market-card:focus-visible,
.market-cat-btn:focus-visible,
.market-action-btn:focus-visible,
.market-qty-btn:focus-visible,
.market-qty-max-btn:focus-visible,
.market-detail-head:focus-visible,
.market-detail-expand-btn:focus-visible,
#market-close:focus-visible {
  outline: 3px solid var(--mk-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #market-modal *, #market-modal *::before, #market-modal *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * §mk-variant (2026-09-18, docs/feedback-2026-09-18.md §5): 売る タブの
 * 種別統合 — 1魚種 = 1カード。選択すると詳細パネルに variants(素/焼き/
 * 半焼け/焼き過ぎ/色違い等)の行が並ぶ。DOM骨格(mk-viewer/
 * market-detail-head/market-detail-sheet)は既存の単品詳細と共有している
 * ので、76px折りたたみバー・˅展開・タッチ/狭幅レイアウトは src/market.js
 * 側の isNarrowMarketLayout() 分岐も含めて無改修のまま効く — ここで足すのは
 * 行の中身(mk-variant-*)の見た目とレイアウトのみ。
 * -------------------------------------------------------------------------*/

/* カードの「本日相場×2」バッジ(左上。既存の所持済みチェックは右上 —
   market-card-check と競合しない)。 */
.mk-variant-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  font-family: var(--mk-font-pop);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--mk-ink);
  background: var(--mk-coral);
  border: var(--pop-border-thin) solid var(--mk-ink);
  white-space: nowrap;
}

/* 行リスト本体。市場の余白方針(§全UIで余白を意識する)どおり、行間は
   カード間ギャップよりやや広めに取り、詰め込まない。 */
/* §余白: rows themselves already carry generous top/bottom via
   --pop-variant-row-pad + the border-bottom divider; the wrapper only adds a
   small gap above the first row (below the "合計 ×N" state line) and below
   the last (before the primary action button). */
.mk-variant-rows {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--pop-space-2) 0;
}
.mk-variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pop-space-2) var(--pop-space-3);
  min-height: var(--pop-variant-row-min-h);
  padding: var(--pop-variant-row-pad);
  border-bottom: var(--pop-border-thin) solid rgba(35, 32, 28, 0.12);
}
.mk-variant-row:last-child { border-bottom: none; }

.mk-variant-info {
  display: flex;
  align-items: baseline;
  gap: var(--pop-space-2);
  min-width: 0;
  flex: 1 1 auto;
}
.mk-variant-label {
  font-family: var(--mk-font-pop);
  font-weight: 800;
  font-size: var(--pop-fs-name);
  color: var(--mk-ink);
  white-space: nowrap;
}
.mk-variant-have {
  font-size: var(--pop-fs-meta);
  color: var(--mk-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mk-variant-unit {
  font-size: var(--pop-fs-price);
  color: var(--mk-brown);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mk-variant-controls {
  display: flex;
  align-items: center;
  gap: var(--pop-variant-row-gap);
  flex: 0 0 auto;
}
.mk-variant-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Per-row stepper buttons reuse .market-qty-btn/.market-qty-max-btn's own
   sizing (--pop-step-size) — only the outer gap changes here. */

/* Per-row 売る button: the base .market-action-btn is a full-width primary
   button (width:100%) for the single-item detail panel's own action slot —
   here it sits inline next to a stepper, so it needs its own compact width
   instead of stretching to fill the row. */
.mk-variant-sell {
  width: auto;
  min-width: 0;
  height: var(--pop-step-size);
  padding: 0 var(--pop-space-3);
  font-size: var(--pop-fs-price);
  white-space: nowrap;
}

/* The one primary "この魚をすべて売る" button keeps the normal full-width
   .market-action-btn look (see market-detail-action's own layout) — no
   override needed beyond the shared base + skin rules above. */
.mk-variant-sellall {}

/* Scrollable variant sheet on desktop: normal document flow, no cap needed
   (the modal itself scrolls). On touch/narrow (below), the sheet becomes the
   ˅-expand popup and gets a real max-height so it never grows past the
   modal. */
.mk-variant-sheet { -webkit-overflow-scrolling: touch; }

@media (max-width: 700px) {
  /* §mk-variant: ~60% of the modal while expanded (spec) — overrides the
     classic single-item detail's 35vh cap (style.css) via the extra class,
     higher specificity than that rule regardless of source order. */
  .market-detail-sheet.mk-variant-sheet.expanded {
    max-height: 60vh;
    overflow-y: auto;
  }
  .mk-variant-row { min-height: 44px; }
}
body.touch {
  @media (max-height: 480px) {
    .market-detail-sheet.mk-variant-sheet.expanded {
      max-height: 60vh;
      overflow-y: auto;
    }
    .mk-variant-row { min-height: 44px; }
  }
}

/* §2026-09-18 カード小型化(タッチ/狭幅): アイコンを名前の左に置いて1段減らす。
   行: [アイコン 名前] / 価格 / 補足(ある時だけ)。高さ 約76〜90px。 */
@media (max-width: 700px) {
  #market-grid .market-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    column-gap: 6px;
    row-gap: 3px;
    text-align: left;
  }
  #market-grid .market-card-icon { grid-column: 1; }
  #market-grid .market-card-name { grid-column: 2; }
  #market-grid .market-card-price,
  #market-grid .market-card-state { grid-column: 1 / -1; line-height: 1.15; }
}
body.touch {
  @media (max-height: 480px) {
    #market-grid .market-card {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      justify-items: start;
      column-gap: 6px;
      row-gap: 3px;
      text-align: left;
    }
    #market-grid .market-card-icon { grid-column: 1; }
    #market-grid .market-card-name { grid-column: 2; }
    #market-grid .market-card-price,
    #market-grid .market-card-state { grid-column: 1 / -1; line-height: 1.15; }
  }
}

/* カードを行の高さいっぱいに引き伸ばさない(グリッド領域の余りは空白のまま) */
#market-grid { align-content: start; grid-auto-rows: min-content; }