/* ══════════════════════════════════════════════════════════════
   RUVO 方案三（深度融入） — 00_docs/design-mocks/ruvo-detail-variants.html
   の .v3 系の写し。値（色・角丸・影・字号・字重・間隔・斜線の角度と太さ・
   バブルの形）は効果頁そのまま。変えたのは 3 点だけ:
     1. 方案切替用の `.v3 ` 前置セレクタを外し、`v3-` の接頭辞付きクラスに畳んだ
        （基底ルール + .v3 上書き = 最終値、で 1 本に）
     2. トークンは `--v3-*`。両テーマで v7.css と同値のものは v7 側を参照する
        （paper/ink/mute/faint/line/up/dn とフォント・イージング）
     3. 暗色は効果頁の `:root[data-theme="dark"]` ではなく、本サイトの切替機構
        （assets/app.js が body に置く `body[data-theme="dark"]`）に付け替えた。
        本サイトはシステム追従をしないので prefers-color-scheme は写さない。
   v7.css / app.js は無改修。このファイルは box.html / boxes.html だけが読む。
   ══════════════════════════════════════════════════════════════ */

/* トークンは :root ではなく body に置く。v7.css の浅色テーマは body[data-theme="light"]
   で :root を上書きしているので、`--v3-ink: var(--ink)` のような借り物を :root に書くと
   html 要素上で暗色の値に確定してしまい、浅色テーマでも暗色の値が降ってくる
   （カスタムプロパティの var() は「宣言された要素」で解決される）。 */
body {
  /* 色は効果頁の実値をそのまま置く。v7.css の --ink / --line / --up / --down とは同値だが、
     assets/ruvo-refinement.css が浅色テーマで --faint / --mute / --bg を別の値に差し替えて
     いるので、`var(--faint)` のように借りると効果頁と色が変わる（実測: faint #7381AC →
     #5B6C85、mute #44548A → #526481）。書体とイージングだけは差し替えが無いので借りる。 */
  --v3-ui: var(--ui);
  --v3-jp: var(--jp-display);
  --v3-mono: var(--mono);
  --v3-ease: var(--ease);

  /* ── 形（効果頁の --r-mod / --r-in） ── */
  --v3-r-mod: 22px;
  --v3-r-in: 14px;

  /* ── 地と墨（ライト） ── */
  --v3-paper: #DFE9F9;
  --v3-ink: #111A36;
  --v3-mute: #44548A;
  --v3-faint: #7381AC;
  --v3-line: #C7D4F0;
  --v3-up: #E02858;
  --v3-dn: #0C9F63;
  --v3-card: #FFFFFF;
  --v3-card-2: #E9F0FD;
  --v3-hair: rgba(23,43,99,.11);
  --v3-track: #EAF0FA;
  --v3-stripe: rgba(23,43,99,.11);
  --v3-bubble: #141B34;
  --v3-bubble-on: #FFFFFF;

  /* ── 意味を持つ色（ライト） ── */
  --v3-snkr: #0090DE;   --v3-snkr-fill: #0B78B8;  --v3-snkr-on: #FFFFFF;  --v3-snkr-soft: #E2F2FD;
  --v3-xbuy: #D6660B;   --v3-xbuy-fill: #C75E09;  --v3-xbuy-on: #FFFFFF;  --v3-xbuy-soft: #FCEEDF;
  --v3-up-soft: #FCE5EC;
  --v3-dn-soft: #E0F5EB;
  --v3-psa: #7A3FD6;    --v3-psa-fill: #7A3FD6;   --v3-psa-on: #FFFFFF;   --v3-psa-soft: #F0E8FE;
  --v3-mint: #0D9080;   --v3-mint-fill: #0D9080;  --v3-mint-on: #FFFFFF;  --v3-mint-soft: #DFF4F1;
  --v3-lemon: #9A7100;  --v3-lemon-fill: #F2C438; --v3-lemon-on: #3A2A00; --v3-lemon-soft: #FCF3DA;
  --v3-salmon: #C64530; --v3-salmon-fill: #D9503C;--v3-salmon-on: #FFFFFF;--v3-salmon-soft: #FCE9E5;

  --v3-lift:
    inset 0 1.5px 0 #FFFFFF,
    inset 0 -2px 0 rgba(23,43,99,.07),
    0 -3px 12px rgba(255,255,255,.95),
    0 2px 3px rgba(23,43,99,.15),
    0 10px 22px rgba(23,43,99,.09),
    0 28px 56px rgba(23,43,99,.14);
  --v3-lift-hi:
    inset 0 1.5px 0 #FFFFFF,
    inset 0 -2px 0 rgba(23,43,99,.07),
    0 -4px 16px #FFFFFF,
    0 3px 5px rgba(23,43,99,.14),
    0 20px 40px rgba(23,43,99,.13),
    0 48px 96px rgba(23,43,99,.2);
  --v3-lift-sm: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(23,43,99,.1), 0 6px 16px rgba(23,43,99,.08);
}

/* ── 暗色（本サイトの切替は body[data-theme]） ── */
body[data-theme="dark"] {
  --v3-paper: #05060F;
  --v3-ink: #E9EFF9;
  --v3-mute: #9AA8D4;
  --v3-faint: #66739F;
  --v3-line: #262F58;
  --v3-up: #FF5470;
  --v3-dn: #34D399;
  --v3-card: #151A36;
  --v3-card-2: #0D1024;
  --v3-hair: rgba(180,205,255,.14);
  --v3-track: #1C2246;
  --v3-stripe: rgba(190,215,255,.16);
  --v3-bubble: #E9EFF9;
  --v3-bubble-on: #0A0E1E;

  --v3-snkr: #45D2FF;  --v3-snkr-fill: #0C6FA8;  --v3-snkr-on: #F4FCFF; --v3-snkr-soft: #0E2A40;
  --v3-xbuy: #FFA24D;  --v3-xbuy-fill: #A9500A;  --v3-xbuy-on: #FFF6EC; --v3-xbuy-soft: #3A2208;
  --v3-up-soft: #3A1220;
  --v3-dn-soft: #08301F;
  --v3-psa: #C084FC;   --v3-psa-fill: #6633C0;   --v3-psa-on: #F8F2FF;  --v3-psa-soft: #241442;
  --v3-mint: #3FDCC4;  --v3-mint-fill: #0A7566;  --v3-mint-on: #EFFFFC; --v3-mint-soft: #062A25;
  --v3-lemon: #FFD35C; --v3-lemon-fill: #C99A18; --v3-lemon-on: #221800;--v3-lemon-soft: #33260A;
  --v3-salmon: #FF8E7A;--v3-salmon-fill: #B33E2C;--v3-salmon-on: #FFF1ED;--v3-salmon-soft: #361310;

  --v3-lift:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 1px 2px rgba(0,0,0,.45),
    0 10px 24px rgba(0,0,0,.32),
    0 32px 72px rgba(0,0,0,.38);
  --v3-lift-hi:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 2px 4px rgba(0,0,0,.4),
    0 18px 36px rgba(0,0,0,.38),
    0 48px 100px rgba(0,0,0,.46);
  --v3-lift-sm: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 8px rgba(0,0,0,.35);
}

/* ══════════ 共通モジュール殻（効果頁 .mod） ══════════ */
.v3-mod {
  position: relative; border-radius: var(--v3-r-mod);
  background: var(--v3-card); border: 1px solid var(--v3-line);
  box-shadow: var(--v3-lift);
  padding: 20px 22px 22px; margin-bottom: 22px;
  transition: box-shadow .28s, transform .22s ease-out;
}
.v3-mod:hover { box-shadow: var(--v3-lift-hi); }
.v3-mod-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.v3-mod-h .v3-ht { flex: 1; min-width: 0; }
.v3-mod-h h2 { margin: 0; font-family: var(--v3-jp); font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1.3; }
.v3-mod-h .v3-hint { display: block; margin-top: 3px; font-size: 12px; color: var(--v3-faint); font-weight: 500; }

/* パネル（panels/*.js）が自前で描く .block-label を効果頁の .mod-h に合わせる。
   panels 側は無改修なので、見出しの形だけこちらで引き取る。 */
.v3-mod .block-label { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin: 0 0 16px; }
.v3-mod .block-label h2 { margin: 0; font-family: var(--v3-jp); font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1.3; }
.v3-mod .block-label .hint { font-size: 12px; color: var(--v3-faint); font-weight: 500; }
/* 見出しを裸の <h2> で描く部品（canonical-offers.js）も同じ字級に揃える */
.v3-mod > h2 { margin: 0 0 16px; font-family: var(--v3-jp); font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1.3; }

/* 参考図の「円の中の小さな矢印 ↗」 */
.v3-go {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  border: 1px solid transparent; background: var(--v3-ink); color: var(--v3-card);
  transition: transform .18s var(--v3-ease), background-color .18s, color .18s, border-color .18s;
}
.v3-go svg { width: 15px; height: 15px; }
.v3-go:hover { transform: translate(1px,-1px) scale(1.06); }

.v3-sect-cap {
  font-family: var(--v3-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  color: var(--v3-faint); text-transform: uppercase; margin: 0 0 8px;
}

/* ══════════ 黒カプセルのサブナビ ══════════ */
.v3-subnav {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px;
  background: var(--v3-card-2); border: 1px solid var(--v3-hair);
  margin-bottom: 18px; width: fit-content; max-width: 100%;
}
.v3-subnav a, .v3-subnav button {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--v3-mute); letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s;
}
.v3-subnav a[aria-current="true"], .v3-subnav button[aria-pressed="true"] { background: var(--v3-ink); color: var(--v3-card); }

/* ══════════ ヒーロー ══════════ */
.v3-hero { display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 26px; align-items: start; }
.v3-stage {
  border-radius: 18px; background: var(--v3-card-2); border: 1px solid var(--v3-hair);
  aspect-ratio: 4/3; display: grid; place-items: center; padding: 14px; overflow: hidden;
}
.v3-stage img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(30,60,130,.22)); }
.v3-stage .v3-noart { font-size: 12px; font-weight: 700; color: var(--v3-faint); }
.v3-hero-name { margin: 0; font-family: var(--v3-jp); font-weight: 800; font-size: clamp(18px,2.4vw,23px); line-height: 1.34; letter-spacing: -.02em; }
.v3-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.v3-mchip {
  display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--v3-mute); background: var(--v3-card-2); border: 1px solid var(--v3-hair);
}
.v3-mchip .num { font-weight: 700; color: var(--v3-ink); }
.v3-mchip.is-live { color: var(--v3-dn); background: var(--v3-dn-soft); border-color: transparent; font-weight: 700; }
.v3-mchip.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v3-dn); box-shadow: 0 0 7px var(--v3-dn); }
.v3-mchip.is-stale { color: var(--v3-xbuy); background: var(--v3-xbuy-soft); border-color: transparent; font-weight: 700; }

.v3-kpi-wall { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.v3-hero-foot { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; padding-top: 15px; border-top: 1px dashed var(--v3-hair); }
.v3-hf { min-width: 0; }
.v3-hf .k { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--v3-faint); }
.v3-hf .v { display: block; margin-top: 2px; font-family: var(--v3-mono); font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--v3-ink); }
.v3-hf .v small { font-family: var(--v3-ui); font-size: 11px; font-weight: 600; color: var(--v3-faint); margin-left: 5px; letter-spacing: 0; }

/* ── 価格札: 平塗りの色面 + 白い丸アイコン ── */
.v3-pcard {
  position: relative; border-radius: var(--v3-r-in); min-width: 0; overflow: hidden;
  background: linear-gradient(158deg, color-mix(in srgb, var(--v3-bk) 88%, #fff), var(--v3-bk) 62%);
  color: var(--v3-bk-on); border: 0; padding: 16px 18px 17px;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 24px color-mix(in srgb,var(--v3-bk) 26%,transparent);
}
.v3-pcard .v3-plab { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--v3-bk-on); opacity: .9; }
.v3-pcard .v3-pnum {
  display: block; margin-top: 8px; font-family: var(--v3-mono); font-weight: 800;
  font-size: clamp(32px,5.6vw,50px); line-height: 1; letter-spacing: -.045em; color: var(--v3-bk-on);
}
.v3-pcard .v3-pnum .v3-yn { font-size: .56em; vertical-align: .2em; margin-right: .05em; opacity: .72; }
.v3-pcard .v3-pfoot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 11px; }
.v3-pcard .v3-psrc { font-size: 11px; font-weight: 600; color: var(--v3-bk-on); opacity: .82; }
.v3-pcard.is-sub .v3-pnum { font-size: clamp(24px,3.6vw,32px); }
.v3-picon {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--v3-bk);
  font-family: var(--v3-mono); font-size: 12.5px; font-weight: 800; letter-spacing: 0;
}

.v3-dlt {
  display: inline-flex; align-items: baseline; gap: 3px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-family: var(--v3-mono); font-weight: 800; font-size: 12.5px; letter-spacing: -.02em;
}
.v3-dlt.up { color: var(--v3-up); background: var(--v3-up-soft); }
.v3-dlt.dn { color: var(--v3-dn); background: var(--v3-dn-soft); }
.v3-dlt.flat { color: var(--v3-faint); background: var(--v3-card-2); }
.v3-dlt small { font-family: var(--v3-ui); font-size: 10px; font-weight: 600; opacity: .8; letter-spacing: 0; }
/* 色面の札の中では赤緑を使わず、白の半透明に落とす（効果頁 .v3 .pcard .dlt。
   .v3-dlt.up / .dn と同特異度では後勝ちになるので、こちらを後ろに置く） */
.v3-pcard .v3-dlt, .v3-pcard .v3-dlt.up, .v3-pcard .v3-dlt.dn, .v3-pcard .v3-dlt.flat { color: var(--v3-bk-on); background: rgba(255,255,255,.22); }
.v3-pcard .v3-dlt small { opacity: .85; }

/* ══════════ 売れ方 ══════════ */
.v3-sales-lead { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.v3-sales-sub { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 13px; }

.v3-sblock { position: relative; border-radius: var(--v3-r-in); padding: 15px 16px 16px; min-width: 0; overflow: hidden; }
.v3-sblock .v3-sk { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.4; }
.v3-sblock .v3-sv { display: block; margin-top: 7px; font-family: var(--v3-mono); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.v3-sblock .v3-sn { display: block; margin-top: 8px; font-size: 10.5px; line-height: 1.55; font-weight: 500; }

.v3-sales-lead .v3-sblock {
  background: linear-gradient(158deg, color-mix(in srgb, var(--v3-bk) 88%, #fff), var(--v3-bk) 62%);
  color: var(--v3-bk-on);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px color-mix(in srgb,var(--v3-bk) 22%,transparent);
}
.v3-sales-lead .v3-sblock .v3-sk { color: var(--v3-bk-on); opacity: .9; }
.v3-sales-lead .v3-sblock .v3-sv { color: var(--v3-bk-on); font-size: clamp(28px,4.4vw,40px); }
.v3-sales-lead .v3-sblock .v3-sn { color: var(--v3-bk-on); opacity: .78; }
.v3-sicon {
  position: absolute; top: 13px; right: 13px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--v3-bk);
  font-size: 13px; line-height: 1;
}

.v3-sales-sub .v3-sblock { background: var(--v3-card-2); border: 1px solid var(--v3-hair); padding: 12px 14px 13px; }
.v3-sales-sub .v3-sblock .v3-sk { font-size: 11px; color: var(--v3-faint); font-weight: 600; }
.v3-sales-sub .v3-sblock .v3-sv { font-size: 17px; color: var(--v3-ink); margin-top: 5px; }
.v3-sales-sub .v3-sblock .v3-sv small { font-family: var(--v3-ui); font-size: 11px; font-weight: 600; color: var(--v3-faint); margin-left: 4px; letter-spacing: 0; }
.v3-sales-sub .v3-sblock .v3-sn { color: var(--v3-faint); margin-top: 6px; }

/* 斜線テクスチャ入りのメーター */
.v3-meter { display: block; margin-top: 9px; height: 7px; border-radius: 999px; background: var(--v3-track); overflow: hidden; position: relative; }
.v3-meter i { display: block; height: 100%; border-radius: 999px; background: var(--v3-ac); position: relative; overflow: hidden; }
.v3-meter i::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.34) 0 3px, transparent 3px 7px);
}
.v3-meter.is-void { background: transparent; border: 1px dashed var(--v3-line); }
.v3-meter-cap { display: block; margin-top: 5px; font-family: var(--v3-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--v3-faint); }

/* ══════════ 成約チャート ══════════ */
.v3-chart-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.v3-lgd { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--v3-mute); }
.v3-lgd .v3-sw { display: inline-block; width: 14px; height: 4px; border-radius: 999px; background: var(--v3-snkr); }
.v3-lgd .v3-sw.dot { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb,var(--v3-snkr) 45%,transparent); }
.v3-lgd .v3-sw.bar { width: 8px; height: 12px; border-radius: 999px; background: var(--v3-track); border: 1px solid var(--v3-hair); }
.v3-chart-box { position: relative; width: 100%; overflow: hidden; }
.v3-chart-box svg { width: 100%; height: auto; display: block; }

/* 効果頁 details.note を、サイト既存の <details class="fold"> に着せ替える */
.v3-mod details.fold { margin-top: 14px; border-top: 1px dashed var(--v3-hair); padding-top: 12px; }
.v3-mod details.fold > summary {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0;
  font-size: 12.5px; font-weight: 700; color: var(--v3-mute); border-radius: 8px; background: transparent;
}
.v3-mod details.fold > summary::before {
  content: "▸"; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--v3-line);
  display: grid; place-items: center; font-size: 10px; color: var(--v3-faint);
  transition: transform .2s var(--v3-ease), background-color .2s, color .2s;
}
.v3-mod details.fold > summary:hover { color: var(--v3-ink); background: transparent; }
.v3-mod details.fold > summary:hover::before { background: var(--v3-ink); color: var(--v3-card); border-color: transparent; }
.v3-mod details.fold[open] > summary::before { transform: rotate(90deg); }
.v3-mod details.fold[open] > summary { margin-bottom: 0; }
.v3-nb { margin: 10px 0 0; font-size: 12.5px; line-height: 1.85; color: var(--v3-mute); }
.v3-nb b { color: var(--v3-ink); font-weight: 700; }
.v3-nb li { margin-bottom: 5px; }
.v3-nb ul { margin: 6px 0 0; padding-left: 18px; }
.v3-nb p { margin: 0; }

/* ══════════ X 買取履歴 ══════════ */
.v3-xlist { display: flex; flex-direction: column; gap: 2px; }
.v3-xrow {
  position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center; gap: 12px; border-radius: 12px;
  background: transparent; padding: 13px 14px; margin-bottom: 3px;
  color: inherit; text-decoration: none;
  transition: background-color .16s;
}
.v3-xrow:hover { background: var(--v3-card-2); }
.v3-xrank { font-family: var(--v3-mono); font-size: 11px; font-weight: 700; color: var(--v3-faint); width: 1.6em; }
.v3-xshop { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-xshop .v3-top {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font-family: var(--v3-mono); font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--v3-xbuy-on); background: var(--v3-xbuy-fill);
}
.v3-xprice { font-family: var(--v3-mono); font-weight: 800; font-size: 15.5px; letter-spacing: -.025em; color: var(--v3-ink); text-align: right; }
.v3-xdate { font-family: var(--v3-mono); font-size: 11px; color: var(--v3-faint); white-space: nowrap; }
.v3-xbar {
  position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 11px; z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb,var(--v3-xbuy) 26%,transparent), color-mix(in srgb,var(--v3-xbuy) 3%,transparent));
}
.v3-xbar::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px;
  transform: translateY(-50%) rotate(45deg); border-radius: 2px; background: var(--v3-xbuy);
}
.v3-xrow > :not(.v3-xbar) { position: relative; z-index: 1; }

/* ══════════ 店舗リンク ══════════ */
.v3-shops { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.v3-shop {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 13px 14px; border-radius: 14px; border: 1px solid var(--v3-line); background: var(--v3-card);
  box-shadow: var(--v3-lift-sm); text-decoration: none; color: inherit;
  transition: transform .18s var(--v3-ease), box-shadow .2s, border-color .18s;
}
.v3-shop:hover { transform: translateY(-3px); box-shadow: var(--v3-lift); border-color: color-mix(in srgb, var(--v3-snkr) 40%, var(--v3-line)); }
.v3-shop .v3-sb {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--v3-mono); font-size: 12px; font-weight: 800; color: var(--v3-sb-on, var(--v3-card)); background: var(--v3-sb, var(--v3-ink));
}
.v3-shop .v3-sname { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-shop .v3-sarr {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid transparent; background: var(--v3-ink); color: var(--v3-card);
  transition: background-color .18s, color .18s, border-color .18s;
}
.v3-shop .v3-sarr svg { width: 12px; height: 12px; }
.v3-shop.is-lead { border-color: color-mix(in srgb, var(--v3-snkr) 34%, var(--v3-line)); background: linear-gradient(160deg, var(--v3-card), var(--v3-snkr-soft)); }

/* ══════════ カタログ タイル ══════════ */
.v3-tiles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.v3-tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--v3-line); background: var(--v3-card);
  box-shadow: var(--v3-lift-sm); text-decoration: none; color: inherit;
  transition: transform .22s ease-out, box-shadow .25s;
}
.v3-tile:hover { transform: translateY(-5px); box-shadow: var(--v3-lift); }
.v3-tile .v3-art { position: relative; aspect-ratio: 1/1; background: var(--v3-card-2); display: grid; place-items: center; padding: 16px; border-bottom: 1px solid var(--v3-hair); }
.v3-tile .v3-art img { width: 100%; height: 100%; object-fit: contain; }
.v3-tile .v3-kind {
  position: absolute; top: 10px; left: 10px; height: 23px; padding: 0 9px; border-radius: 7px;
  display: inline-flex; align-items: center; font-family: var(--v3-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--v3-ink); background: color-mix(in srgb, var(--v3-card) 82%, transparent); border: 1px solid var(--v3-hair); backdrop-filter: blur(8px);
}
.v3-tile .v3-tdlt {
  position: absolute; right: 9px; bottom: 9px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--v3-mono); font-size: 11px; font-weight: 800; color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.v3-tile .v3-tdlt.up { background: var(--v3-up); }
.v3-tile .v3-tdlt.dn { background: var(--v3-dn); }
.v3-tile .v3-tdlt small { font-family: var(--v3-ui); font-size: 9px; font-weight: 700; opacity: .85; margin-left: 2px; }
.v3-tile .v3-tbody { padding: 13px 15px 6px; }
.v3-tile .v3-tname { font-weight: 700; font-size: 13.5px; line-height: 1.4; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.v3-tile .v3-tmeta { margin-top: 5px; font-family: var(--v3-mono); font-size: 10.5px; color: var(--v3-faint); letter-spacing: .01em; }
/* 効果頁に無い既存情報（包装状態などの注記チップ）。効果頁の .mchip と同じ語彙で小さく置く */
.v3-tile .v3-tnote {
  display: inline-flex; align-items: center; height: 19px; margin-top: 6px; padding: 0 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; color: var(--v3-mute); background: var(--v3-card-2); border: 1px solid var(--v3-hair);
}
.v3-tprices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-top: 12px; }
.v3-tp { padding: 12px 13px 13px; min-width: 0; background: var(--v3-bk); color: var(--v3-bk-on); }
.v3-tp .v3-tk { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; color: var(--v3-bk-on); opacity: .85; }
.v3-tp .v3-tv { display: block; margin-top: 3px; font-family: var(--v3-mono); font-weight: 800; font-size: 19px; letter-spacing: -.03em; line-height: 1.1; color: var(--v3-bk-on); }

/* ══════════ レスポンシブ（効果頁と同じ折り返し点） ══════════ */
@media (max-width: 900px) {
  .v3-shops { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .v3-tiles { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .v3-hero { grid-template-columns: 1fr; gap: 18px; }
  .v3-stage { aspect-ratio: 16/10; }
  .v3-sales-lead, .v3-sales-sub { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .v3-kpi-wall { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .v3-mod { padding: 16px 16px 18px; border-radius: 18px; }
  .v3-sales-lead, .v3-sales-sub { grid-template-columns: 1fr; }
  .v3-shops { grid-template-columns: 1fr; }
  .v3-tiles { grid-template-columns: 1fr; }
  .v3-xrow { grid-template-columns: auto minmax(0,1fr) auto; row-gap: 2px; padding: 11px 10px; }
  .v3-xdate { grid-column: 2/4; text-align: right; }
  .v3-hero-foot { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-mod, .v3-go, .v3-shop, .v3-tile, .v3-subnav a, .v3-subnav button { transition-duration: .001ms !important; }
}

/* ── cards.html / search.html の目録カード 2026-09-21 ── */
/* シングル/PSA カタログ カード = .v3-tile の縦長カード版。画像比率と価格帯の列数だけ変え、
   角丸・影・字級・トークンは BOX カタログ タイル（.v3-tile 本体）のものをそのまま使う。 */
.v3-tile.v3-tile-portrait .v3-art { aspect-ratio: 63/88; }

/* 画像に重ねる鑑定バッジ・発売年・涨跌角標・参考画像バッジの土台。
   .v3-art の中に img と同居させると `.v3-tile .v3-art img{width:100%;height:100%}` が
   鑑定バッジのスプライト img（catalog-grade-art, assets/catalog-media.css）にも掛かって
   クロップが壊れるため、.v3-art の兄弟として置く（.v3-tile-media が位置決めの基準）。 */
.v3-tile-media { position: relative; }
.v3-tile-grade { position: absolute; top: 8px; left: 8px; z-index: 2; line-height: 0; }
/* 発売年チップは .v3-kind をそのまま流用。鑑定バッジと左上で重ならないよう右上へ寄せるだけ。 */
.v3-kind.v3-tile-yr { left: auto; right: 10px; }

/* 価格帯が1枚だけ（PSA10 相場が無い単カード／PSA カテゴリ）のときは2列グリッドを1列に畳む */
.v3-tprices.v3-tile-prices-solo { grid-template-columns: 1fr; }

/* ── card.html（単カード詳細）2026-09-21 ── */
/* 効果頁の .v3-stage は BOX 用に 4/3。単カードは実物比（63:88）で置き換える。
   角丸・地・枠・padding・画像の収め方は .v3-stage のまま継承する。
   このファイル末尾＝カスケードで後勝ちなので、760px 以下の .v3-stage{16/10} も上書きされる。
   perspective は既存の単カード台（v7-adapter.css の .detail-art-stage）と同じ 1100px —
   これが無いと card.html のカード傾け（±16°）が平たい潰れに見える。 */
.v3-card-stage { aspect-ratio: 63/88; max-width: 300px; perspective: 1100px; }

/* 品相タブ（Aランク / PSA10 / PSA9）。見た目は効果頁の黒カプセル（.v3-subnav）そのまま。
   成約の無い品相だけ押せない状態にする（色は --v3-faint、効果頁の消えかけの字と同じ）。 */
.v3-card-tabs { margin-bottom: 14px; }
.v3-card-tabs button[disabled] { color: var(--v3-faint); opacity: .55; cursor: not-allowed; }
.v3-card-tabs button[disabled]:hover { background: transparent; }

/* 店舗カードの副行（商品ページ / 検索結果 / 買取表）。字級と色は効果頁の .tmeta と同値。 */
.v3-shop .v3-sname.has-kind { white-space: normal; }
.v3-shop .v3-card-skind { display: block; margin-top: 2px; font-family: var(--v3-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .01em; color: var(--v3-faint); }