/* ══════════════════════════════════════════════════════════════ VOLT v7 adapter — 既存ページのクラス名に v7 の皮を着せる層 読み込み順: v7.css → v7-adapter.css（tokens/shell/pages/chart.css は外す） ══════════════════════════════════════════════════════════════ */ /* ── 旧 fx-bg（各ページの背景オーブ）を v7 相当に ── */ .fx-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .fx-bg .orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .5; } .fx-bg .orb-a { width: 52vw; height: 52vw; top: -22vw; right: -14vw; background: radial-gradient(circle, rgba(46,230,255,.38), transparent 65%); animation: drift 26s var(--ease) infinite alternate; } .fx-bg .orb-b { width: 38vw; height: 38vw; bottom: -8vw; left: -12vw; background: radial-gradient(circle, rgba(123,92,255,.3), transparent 68%); animation: drift 32s var(--ease) infinite alternate-reverse; } .fx-bg .orb-c { display: none; } .fx-bg .scan { display: none; } .fx-bg .grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body[data-theme="light"] .fx-bg .orb { opacity: .3; } body[data-theme="light"] .fx-bg .orb-a { background: radial-gradient(circle, rgba(0,144,222,.3), transparent 65%); } body[data-theme="light"] .fx-bg .orb-b { background: radial-gradient(circle, rgba(123,92,255,.24), transparent 68%); } body[data-theme="light"] .fx-bg .grain { opacity: .028; } /* ── 旧ヘッダー残骸は常に殺す ── */ .nav, .game-bar { display: none !important; } /* ── 旧 reveal（blur廃止・速く・一回だけ） ── */ .reveal, .reveal-scale, .reveal-left, .reveal-right { opacity: 0; transform: translateY(14px); filter: none !important; transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--d, 0ms); } .reveal-scale { transform: translateY(12px) scale(.975); } .reveal-left { transform: translateX(-20px); } .reveal-right { transform: translateX(20px); } .reveal.is-in, .reveal-scale.is-in, .reveal-left.is-in, .reveal-right.is-in { opacity: 1; transform: none; } .stagger > .reveal, .stagger > .reveal-scale { --d: calc(var(--i, 0) * 70ms); } /* ── ページ見出し ── */ .page-lead { margin: 30px 0 22px; } .page-lead .pl-kicker { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--volt); margin: 0 0 8px; } .page-lead h1 { margin: 0; font-family: var(--jp-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); } .page-lead p { margin: 10px 0 0; color: var(--mute); font-size: 15px; max-width: 44em; line-height: 1.6; } .block-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 40px 0 14px; } .block-label h2 { margin: 0; font-family: var(--jp-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; } .block-label .hint { font-size: 13px; color: var(--faint); font-weight: 500; } .block-section { margin-top: 44px; } /* ── 旧ボタン → v7 対応 ── */ .btn-volt { /* = btn-rainbow */ color: #0A0E16 !important; border: 0; background: var(--rainbow) !important; background-size: 260% 100% !important; animation: flow 8s linear infinite; box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 2px 6px rgba(0,0,0,.3), 0 10px 30px rgba(46,230,255,.22) !important; text-shadow: 0 1px 0 rgba(255,255,255,.25); } .btn-volt:hover { transform: translateY(-2px); filter: brightness(1.06) saturate(1.05); } .btn-secondary { color: var(--ink) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--elev-2) 92%, #fff), var(--elev)) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--volt) 55%, transparent), color-mix(in srgb, var(--pulse) 55%, transparent)) border-box !important; border: 1px solid transparent !important; box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 2px 6px rgba(0,0,0,.25), 0 8px 22px rgba(0,0,0,.18) !important; animation: none !important; } body[data-theme="light"] .btn-secondary { background: linear-gradient(180deg, #FFFFFF, #F2F7FF) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--volt) 45%, transparent), color-mix(in srgb, var(--pulse) 45%, transparent)) border-box !important; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(30,60,130,.1), 0 8px 20px rgba(30,60,130,.08) !important; } /* 旧 .btn-x（行内出典）→ 纯黑 X 章（r3 A1: 之前被洗成浅蓝，拍板要求纯黑底、浅色/暗色两版） */ .btn-x { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 92px; padding: 0 18px; border-radius: 12px !important; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; color: #fff !important; border: 1px solid rgba(255,255,255,.16) !important; background: #000 !important; box-shadow: 0 2px 6px rgba(0,0,0,.3) !important; animation: none !important; transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s, transform .14s var(--ease); } .btn-x::after { content: none !important; } .btn-x:hover { color: #fff !important; transform: translateY(-1px); border-color: rgba(255,255,255,.24) !important; background: #1c1c1c !important; box-shadow: 0 8px 20px rgba(0,0,0,.4) !important; } body[data-theme="light"] .btn-x { color: #fff !important; background: #0A0A0C !important; border-color: transparent !important; } body[data-theme="light"] .btn-x:hover { color: #fff !important; background: #262626 !important; box-shadow: 0 8px 20px rgba(0,0,0,.35) !important; } /* ── 旧チップ / タブ / ピル ── */ .chips button, .chip-toggle { height: 36px; padding: 0 16px; border-radius: 999px !important; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--mute); border: 1px solid var(--line) !important; background: var(--elev) !important; animation: none !important; transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s, transform .12s var(--ease); } .chips button:hover, .chip-toggle:hover { color: var(--ink); border-color: color-mix(in srgb, var(--volt) 32%, var(--line)) !important; transform: translateY(-1px); } .chips button.is-on, .chip-toggle.is-on { color: #061018 !important; border-color: transparent !important; background: linear-gradient(120deg, var(--volt), #6FD8FF) !important; box-shadow: 0 4px 14px rgba(46,230,255,.25) !important; } body[data-theme="light"] .chips button.is-on, body[data-theme="light"] .chip-toggle.is-on { color: #fff !important; background: linear-gradient(120deg, #0090DE, #00ACE8) !important; box-shadow: 0 4px 14px rgba(0,144,222,.28) !important; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 22px; padding: 6px; background: var(--elev); border: 1px solid var(--line); border-radius: 16px; width: fit-content; max-width: 100%; } .tabs button { border: 0; background: transparent; color: var(--mute); font-family: inherit; font-weight: 700; font-size: 14.5px; padding: 11px 20px; border-radius: 11px; cursor: pointer; transition: background-color .16s, color .16s, box-shadow .16s, transform .12s var(--ease); } .tabs button:hover { color: var(--ink); } .tabs button.is-on { color: #061018 !important; background: linear-gradient(120deg, var(--volt), #6FD8FF) !important; animation: none !important; box-shadow: 0 4px 14px rgba(46,230,255,.25) !important; } body[data-theme="light"] .tabs button.is-on { color: #fff !important; background: linear-gradient(120deg, #0090DE, #00ACE8) !important; } /* 相場ページ カテゴリタブ（BOX/シングル/PSA）— 選択状態はナビ（.section-nav a.is-on）と 同じ彩虹（var(--rainbow)）に統一。彩虹は「身分位」用途に限定する契約のため、通常の .tabs（値動き期間切替など）には適用しない、この修飾クラスを付けたタブだけの挙動。 */ .tabs.tabs-rainbow button.is-on { color: #0A0E16 !important; background: var(--rainbow) !important; background-size: 240% 100% !important; animation: flow 8s linear infinite !important; box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 4px 14px rgba(0,0,0,.24) !important; } body[data-theme="light"] .tabs.tabs-rainbow button.is-on { color: #0A0E16 !important; } .tab-panel { display: none; } .tab-panel.is-on { display: block; animation: tab-in .3s var(--ease); } @keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .pill { height: 40px; padding: 0 14px; border-radius: 999px !important; border: 1px solid var(--line) !important; background: var(--elev) !important; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; animation: none !important; } .kbd { font-family: var(--mono); font-size: 10px; color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 2px 5px; } /* ── 旧テーブル（.table）にも .vt 相当の皮 ── */ .table-wrap { border-radius: 24px; overflow: hidden; } .table { width: 100%; border-collapse: collapse; font-size: 15px; position: relative; z-index: 1; } .table th { text-align: left; font-size: 13.5px; font-weight: 700; letter-spacing: .08em; color: var(--mute); text-transform: uppercase; padding: 15px 22px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--elev-2) 55%, transparent); white-space: nowrap; } .table td { padding: 14px 22px; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); vertical-align: middle; } .table tr:last-child td { border-bottom: 0; } .table tbody tr { cursor: pointer; transition: background-color .16s; transform: none !important; } .table tbody tr:hover td { background: color-mix(in srgb, var(--volt) 5%, transparent) !important; } .table .r { text-align: right; } .table .nm { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .table .meta, .table .sub { font-size: 12.5px; color: var(--faint); margin-top: 3px; font-weight: 500; } /* 旧 .thumb（div 背景画像）→ v7 サイズ */ .pair { display: flex; align-items: center; gap: 15px; min-width: 0; } .thumb { width: 60px; height: 84px; border-radius: 10px; flex-shrink: 0; background-color: var(--elev-2); background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 4px 12px rgba(0,0,0,.4); transition: transform .2s var(--ease), box-shadow .2s; } .table tbody tr:hover .thumb { transform: scale(1.06) rotate(-0.6deg); box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 18px rgba(46,230,255,.14); } body[data-theme="light"] .thumb { border-color: rgba(16,26,54,.14); box-shadow: 0 2px 8px rgba(30,60,130,.16); } /* ── カード一覧（card-grid / card-tile） ── */ .toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; } .search-field { flex: 1; min-width: 220px; height: 50px; border-radius: 14px; border: 1px solid transparent; background: linear-gradient(var(--elev), var(--elev)) padding-box, var(--rainbow) border-box; background-size: 100% 100%, 240% 100%; animation: flow 11s linear infinite; padding: 0 18px; color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; outline: none; } .search-field:focus { box-shadow: 0 0 0 3px rgba(46,230,255,.14); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .card-tile { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid transparent; background: var(--mod-surface) padding-box, var(--mod-border) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.25); transition: transform .22s ease-out, box-shadow .25s; cursor: pointer; color: inherit; text-align: left; padding: 0; font: inherit; width: 100%; } .card-tile:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 4px rgba(0,0,0,.35), 0 20px 44px rgba(0,0,0,.4); } body[data-theme="light"] .card-tile { box-shadow: inset 0 1px 0 #fff, 0 -1px 6px rgba(255,255,255,.8), 0 1px 2px rgba(23,43,99,.1), 0 8px 18px rgba(23,43,99,.09); } body[data-theme="light"] .card-tile:hover { box-shadow: inset 0 1px 0 #fff, 0 -2px 8px rgba(255,255,255,.95), 0 2px 4px rgba(23,43,99,.1), 0 20px 44px rgba(23,43,99,.18); } .card-tile .art { aspect-ratio: 5/7; background-color: var(--elev-2); background-size: cover; background-position: center; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); position: relative; } .card-tile.is-box .art { aspect-ratio: 1/1; background-size: cover !important; } /* カタログ カード/BOX タイルの章 — 2026-07-15 老板拍板で去彩虹化。 RAW灰枠章 (.tag-raw) と同族: 細線+墨色/深底、彩虹・原色グラデーションは使わない。 彩虹は「身分位」用途（サイトタイトル・検索ボタン・カテゴリタブ選択状態）に限定する契約。 */ .card-tile .art .badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 25px; padding: 0 10px; border-radius: 7px; font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(8px); } body[data-theme="light"] .card-tile .art .badge { background: rgba(255,255,255,.82); border-color: rgba(16,26,54,.12); } .card-tile.is-box .art .badge { /* 旧: 彩虹flowアニメ。今は他タイプの章と同じ静かな見た目に統一 */ color: var(--ink); background: color-mix(in srgb, var(--bg) 60%, transparent); animation: none; box-shadow: none; } body[data-theme="light"] .card-tile.is-box .art .badge { background: rgba(255,255,255,.82); } .card-tile .art .badge-year { position: absolute; top: 10px; right: 10px; z-index: 2; height: 24px; padding: 0 9px; border-radius: 7px; display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--faint); background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); backdrop-filter: blur(8px); } body[data-theme="light"] .card-tile .art .badge-year { color: var(--mute); background: rgba(255,255,255,.78); border-color: rgba(16,26,54,.12); } .card-tile .body { padding: 14px 15px 15px; } .card-tile .name { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-tile .meta { font-size: 12px; color: var(--faint); margin-top: 4px; } .card-tile .price { margin-top: 9px; font-family: var(--mono); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); } /* 出典小標 — 全プラットフォーム素色統一（去ブランド化）。X は買取文脈（BOX の source=x_buylist） にしか出現しない——販売/成交（シングル/PSA）行のデータには X ソースが存在しないため自然に非表示。 */ .card-tile .src-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: wrap; } .src-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--faint); border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); background: color-mix(in srgb, var(--elev-2) 45%, transparent); } .src-chip.is-x { color: #fff; background: #0A0A0A; border-color: transparent; font-weight: 800; } .card-tile .src-row .hot { font-size: 10.5px; color: var(--faint); font-family: var(--mono); } /* カタログ 3大分類エントリ（シングル/PSA/BOX）— カテゴリ選択の彩虹は「身分位」枠として存続。 */ .catalog-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 30px; } @media (max-width: 760px) { .catalog-entries { grid-template-columns: 1fr; } } .entry-card { position: relative; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: 22px; padding: 22px 68px 20px 22px; border: 1px solid transparent; background: var(--mod-surface) padding-box, var(--mod-border) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.22); transition: transform .22s ease-out, box-shadow .25s; } .entry-card:hover { transform: translateY(-4px); } body[data-theme="light"] .entry-card { box-shadow: inset 0 1px 0 #fff, 0 -1px 6px rgba(255,255,255,.8), 0 1px 2px rgba(23,43,99,.1), 0 8px 18px rgba(23,43,99,.09); } .entry-card .ec-kicker { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .entry-card .ec-title { margin: 8px 0 2px; font-family: var(--jp-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 27px); letter-spacing: -0.02em; } .entry-card .ec-count { font-family: var(--mono); font-weight: 800; font-size: 14px; color: var(--mute); } .entry-card .ec-desc { margin-top: 8px; font-size: 12.5px; color: var(--faint); line-height: 1.5; } .entry-card .ec-cta { position: absolute; right: 20px; bottom: 20px; font-size: 12.5px; font-weight: 700; color: var(--faint); transition: transform .16s var(--ease), color .16s; } .entry-card:hover .ec-cta { transform: translateX(3px); color: var(--ink); } .entry-card.is-on { border-color: transparent; background: linear-gradient(var(--elev), var(--elev)) padding-box, var(--rainbow) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 4px rgba(0,0,0,.35), 0 20px 44px rgba(0,0,0,.3); } .entry-card.is-on .ec-title { background: var(--rainbow-text); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 9s linear infinite; } .entry-card.is-on .ec-cta { color: var(--ink); } /* ページャ — v7 胶囊页码。選択状態は「当前タイトルの類別色」（--game）で塗る（彩虹は使わない）。 r3 A14: 32→40px に拡大、クリック域も連動して広がる。 */ .pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 30px 0 10px; } .pg-btn { min-width: 40px; height: 40px; padding: 0 13px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--mute); border: 1px solid var(--line); background: var(--elev); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s, transform .12s var(--ease); } .pg-btn:hover:not(:disabled):not(.is-on) { color: var(--ink); border-color: color-mix(in srgb, var(--volt) 32%, var(--line)); transform: translateY(-1px); } .pg-btn.is-on { color: #0A0E16; border-color: transparent; background: var(--game, var(--volt)); box-shadow: 0 4px 14px color-mix(in srgb, var(--game, var(--volt)) 38%, transparent); } .pg-btn:disabled { opacity: .35; cursor: default; } .pg-ellipsis { color: var(--faint); padding: 0 2px; font-family: var(--mono); font-size: 13px; } /* ── 詳細ページ（card/box） ── */ .detail-layout { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 8px; } @media (max-width: 960px) { .detail-layout { grid-template-columns: 1fr; } } .detail-art-stage { position: relative; border-radius: 24px; display: flex; align-items: center; justify-content: center; padding: 20px 18px; border: 1px solid transparent; background: var(--mod-surface) padding-box, var(--mod-border) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.3), 0 36px 80px rgba(0,0,0,.36); perspective: 1100px; overflow: visible; } body[data-theme="light"] .detail-art-stage { box-shadow: inset 0 1.5px 0 #fff, 0 -2px 10px rgba(255,255,255,.9), 0 2px 3px rgba(23,43,99,.14), 0 12px 26px rgba(23,43,99,.1), 0 34px 68px rgba(23,43,99,.17); } .detail-art-wrap { position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 18px 28px rgba(0,0,0,.42)); transform: translateZ(0); } body[data-theme="light"] .detail-art-wrap { filter: drop-shadow(0 16px 26px rgba(30,60,130,.3)); } .detail-art-img { display: block; width: 100%; max-width: 100%; height: auto; max-height: min(70vh, 560px); margin: 0 auto; object-fit: contain; border-radius: 12px; user-select: none; -webkit-user-drag: none; transform: translate3d(0,0,.01px); transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; transition: transform 80ms linear; } .detail-art-img.is-box-art { max-height: min(56vh, 420px); width: min(100%, 380px); } .detail-art { border-radius: 20px; aspect-ratio: 5/7; width: 100%; background: var(--elev-2); border: 1px solid var(--line); display: grid; place-items: center; } .detail-art .art-label { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--faint); } .detail-name { font-family: var(--jp-display); font-weight: 800; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; line-height: 1.15; margin: 14px 0 6px; color: var(--ink); } .detail-sub { margin: 0 0 14px; font-size: 14px; color: var(--mute); } .detail-intel { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 0 0 18px; } @media (max-width: 560px) { .detail-intel { grid-template-columns: repeat(2, minmax(0,1fr)); } } .detail-intel .di-item { padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--elev-2) 55%, transparent), color-mix(in srgb, var(--elev-2) 25%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } body[data-theme="light"] .detail-intel .di-item { box-shadow: inset 0 1px 0 rgba(255,255,255,.8); } .detail-intel .di-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; } .detail-intel .di-v { font-size: 14.5px; font-weight: 700; color: var(--ink); word-break: break-all; } /* 在庫ボード */ .stock-filter { margin-left: auto; } .stock-board { display: flex; flex-direction: column; gap: 16px; } .stock-empty { padding: 36px 28px; border-radius: 20px; border: 1px dashed var(--line); color: var(--mute); text-align: center; } .stock-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 4px; } .stock-stat { padding: 15px 18px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--elev-2) 55%, transparent), color-mix(in srgb, var(--elev-2) 25%, transparent)); } .stock-stat .ss-k { display: block; font-size: 12.5px; font-weight: 700; color: var(--mute); letter-spacing: .06em; margin-bottom: 5px; text-transform: uppercase; } .stock-stat .ss-v { font-family: var(--mono); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); } .stock-stat .ss-v.live { color: var(--down); } body[data-theme="light"] .stock-stat .ss-v.live { color: #0C9F63; } .shop-card { border-radius: 20px; overflow: hidden; border: 1px solid transparent; background: var(--mod-surface) padding-box, var(--mod-border) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.22); } body[data-theme="light"] .shop-card { box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(23,43,99,.1), 0 8px 20px rgba(23,43,99,.09); } .shop-card-head { display: flex; align-items: center; gap: 13px; padding: 15px 20px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--elev-2) 45%, transparent); } .shop-card-head .shop-mark, .market-tile .mt-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; color: #061018; flex-shrink: 0; } .shop-mark.snkrdunk { background: linear-gradient(135deg, #2ee6ff, #4f6bff); } .shop-mark.cardrush { background: linear-gradient(135deg, #ff8f6b, #ff5c8a); } .shop-mark.yuyutei, .shop-mark.yuyutei_buy { background: linear-gradient(135deg, #7cffb2, #2ee6ff); } .shop-mark.toretoku { background: linear-gradient(135deg, #c084fc, #7c9bff); } .shop-mark.mercari { background: linear-gradient(135deg, #ff5c8a, #ff8f6b); } .shop-mark.hareruya { background: linear-gradient(135deg, #7c9bff, #2ee6ff); } .shop-mark.clove { background: linear-gradient(135deg, #a3ff6e, #2ee6ff); } .shop-mark.magi, .shop-mark.rakuma, .shop-mark.glow { background: linear-gradient(135deg, #9aa8d4, #4f6bff); } .shop-card-head .shop-title { flex: 1; min-width: 0; } .shop-card-head .shop-title b { display: block; font-size: 16px; font-weight: 700; } .shop-card-head .shop-title span { font-size: 12.5px; color: var(--faint); font-weight: 500; } .shop-card-head .shop-go { height: 40px; padding: 0 18px; border-radius: 12px; border: 0; background: linear-gradient(120deg, var(--volt), #6FD8FF); color: #061018; font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; transition: transform .14s var(--ease), box-shadow .15s; box-shadow: 0 5px 16px color-mix(in srgb, var(--volt) 28%, transparent); } .shop-card-head .shop-go:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--volt) 38%, transparent); } body[data-theme="light"] .shop-card-head .shop-go { color: #fff; background: linear-gradient(120deg, #0090DE, #00ACE8); } .grade-rows { padding: 6px 0; } .grade-row { display: grid; grid-template-columns: 78px 1fr auto auto; gap: 13px; align-items: center; padding: 12px 20px; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); font-size: 14px; } .grade-row:last-child { border-bottom: 0; } .grade-row.is-live { background: linear-gradient(90deg, color-mix(in srgb, var(--volt) 8%, transparent), transparent 60%); } .grade-row .g-price { font-family: var(--mono); font-weight: 800; font-size: 16px; text-align: right; min-width: 110px; font-variant-numeric: tabular-nums; } .grade-row .g-price.up { color: var(--ink); } /* 価格は意味色を使わない */ .grade-row .g-link { font-size: 13px; font-weight: 700; color: var(--volt); text-decoration: none; white-space: nowrap; } .grade-row .g-link:hover { text-decoration: underline; } /* 旧グレード章名 → v7 */ .grade-pill.g-aplus { color: #06131C; background: linear-gradient(120deg, #A8FF7E, #4DE8C2); border: 0; } .grade-pill.g-a { color: #06131C; background: linear-gradient(120deg, #7DF0C0, #45D8E8); border: 0; } .grade-pill.g-aminus { color: #06131C; background: linear-gradient(120deg, #5EEAD4, #7C9BFF); border: 0; } .grade-pill.g-psa { color: #fff; background: linear-gradient(180deg, #E8465A, #C22B44); border: 0; box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 3px 10px rgba(226,59,90,.3); } .grade-pill.g-other { color: var(--mute); border: 1px solid var(--line); background: var(--elev-2); } .market-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 4px; } .market-tile { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: color-mix(in srgb, var(--elev-2) 45%, transparent); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .14s var(--ease), background-color .15s, box-shadow .15s; } .market-tile:hover { border-color: color-mix(in srgb, var(--volt) 40%, var(--line)); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.2); } .market-tile .mt-body b { display: block; font-size: 14px; font-weight: 700; } .market-tile .mt-body span { font-size: 12px; color: var(--faint); font-weight: 500; } .market-tile .mt-arrow { margin-left: auto; color: var(--volt); font-weight: 800; } .shop-pills { display: flex; flex-wrap: wrap; gap: 11px; } .shop-pill { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 13px; border: 1px solid var(--line); background: var(--elev-2); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; transition: border-color .15s, transform .14s var(--ease), box-shadow .15s; } .shop-pill:hover { border-color: color-mix(in srgb, var(--volt) 45%, var(--line)); transform: translateY(-2px); } .shop-pill.is-primary { border: 0; color: #061018; background: linear-gradient(120deg, var(--volt), #6FD8FF); box-shadow: 0 6px 18px color-mix(in srgb, var(--volt) 26%, transparent); } body[data-theme="light"] .shop-pill.is-primary { color: #fff; background: linear-gradient(120deg, #0090DE, #00ACE8); } .shop-pill .pill-tag { margin-left: 9px; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 7px; background: rgba(6,16,24,.16); letter-spacing: .04em; } /* チャート殻（詳細ページ / 指数ページ共用） */ .chart-shell, .idx-chart-shell { border-radius: 24px; padding: 20px 22px 16px; border: 1px solid transparent; background: var(--mod-surface) padding-box, var(--mod-border) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.3), 0 32px 64px rgba(0,0,0,.34); } body[data-theme="light"] .chart-shell, body[data-theme="light"] .idx-chart-shell { box-shadow: inset 0 1.5px 0 #fff, 0 -3px 12px rgba(255,255,255,.95), 0 2px 3px rgba(23,43,99,.16), 0 10px 22px rgba(23,43,99,.1), 0 32px 64px rgba(23,43,99,.17); } /* フォーム / コレクション */ .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; } .form-row label { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } .form-row input, .form-row select { height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--elev); color: var(--ink); padding: 0 13px; font: inherit; font-size: 14.5px; font-weight: 600; transition: border-color .15s, box-shadow .15s; } .form-row input:focus, .form-row select:focus { outline: none; border-color: color-mix(in srgb, var(--volt) 50%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 14%, transparent); } /* v7.5: 集計タイル 3枚→4枚（買取参考総額を追加）に対応、枚数が変わっても自動で折り返す */ .summary-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; } @media (max-width: 800px) { .summary-bar { grid-template-columns: 1fr; } } .stat { /* r3 A10: 内边距收紧，去掉大片空白 */ padding: 18px 20px; border-radius: 20px; border: 1px solid transparent; background: var(--mod-surface) padding-box, var(--mod-border) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.25); transition: transform .22s ease-out, box-shadow .25s; } .stat:hover { transform: translateY(-4px); } body[data-theme="light"] .stat { box-shadow: inset 0 1.5px 0 #fff, 0 -2px 10px rgba(255,255,255,.9), 0 2px 3px rgba(23,43,99,.13), 0 10px 22px rgba(23,43,99,.09); } .stat .k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } /* r3 A10: 带数字 32px → clamp(30px,2.6vw,40px) mono 800 */ .stat .v { margin-top: 10px; font-family: var(--mono); font-weight: 800; font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -0.03em; line-height: 1; } .stat .v.pos { color: var(--up); } .stat .v.neg { color: var(--down); } .stat .u { font-size: 14px; margin-left: 6px; color: var(--mute); font-weight: 700; } .stat .h { margin-top: 8px; font-size: 13px; color: var(--mute); } /* 空状態 / 本文 / 折りたたみ */ .empty { padding: 48px 24px; text-align: center; color: var(--mute); border: 1px dashed var(--line); border-radius: 20px; background: color-mix(in srgb, var(--elev) 60%, transparent); font-size: 14.5px; } .empty strong { display: block; color: var(--ink); margin-bottom: 8px; font-size: 17px; } .prose { max-width: 760px; line-height: 1.8; color: var(--mute); font-size: 15px; } .prose h2 { font-family: var(--jp-display); font-weight: 800; color: var(--ink); font-size: 24px; margin: 36px 0 12px; letter-spacing: -0.02em; } .prose ul { padding-left: 1.2em; } .prose li { margin: 6px 0; } .prose strong { color: var(--ink); } .collapse-body { display: none; } .collapse-body.is-open { display: block; } .collapse-toggle { margin-top: 14px; height: 44px; padding: 0 20px; border-radius: 12px !important; background: color-mix(in srgb, var(--volt) 9%, var(--elev-2)) !important; border: 1px solid color-mix(in srgb, var(--volt) 35%, var(--line)) !important; color: var(--ice) !important; font-family: inherit; font-weight: 700; font-size: 14px; animation: none !important; transition: background-color .15s, transform .14s var(--ease), box-shadow .15s; } .collapse-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(46,230,255,.18); } body[data-theme="light"] .collapse-toggle { color: #006BA6 !important; background: color-mix(in srgb, var(--volt) 8%, #fff) !important; } /* コマンドパレット → 全画面検索レイヤー（v7.4: 検索ボタンの唯一の入口） 半透明遮罩 + 中央大入力 + 結果一覧。Esc / 遮罩クリックで閉じる（app.js 側で配線）。 */ .cmd { position: fixed; inset: 0; z-index: 100; background: rgba(6,10,20,.62); backdrop-filter: blur(14px) saturate(1.1); display: none; align-items: flex-start; justify-content: center; padding: 12vh 20px 6vh; opacity: 0; transition: opacity .22s; } .cmd.open { display: flex; opacity: 1; } .cmd-box { width: min(680px, 94vw); max-height: 74vh; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; border: 1px solid transparent; background: var(--mod-surface) padding-box, var(--mod-border) border-box; box-shadow: 0 30px 90px rgba(0,0,0,.5); transform: translateY(-10px) scale(.98); opacity: 0; transition: transform .22s var(--ease), opacity .22s var(--ease); } .cmd.open .cmd-box { transform: none; opacity: 1; } .cmd-box input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 24px 26px; font-size: 21px; font-weight: 700; outline: none; color: var(--ink); flex-shrink: 0; } .cmd-box input::placeholder { color: var(--faint); font-weight: 500; } .cmd-results { flex: 1; overflow-y: auto; padding: 8px 10px 14px; -webkit-overflow-scrolling: touch; } .cmd-hint { margin: 0; padding: 20px 22px 22px; font-size: 13px; color: var(--faint); } .cmd-row { display: flex; align-items: center; gap: 13px; padding: 9px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; transition: background-color .15s; } .cmd-row:hover, .cmd-row:focus-visible { background: color-mix(in srgb, var(--volt) 8%, transparent); } .cmd-row img.thumb-card { width: 38px; height: 53px; } .cmd-row .thumb.tbox { width: 38px; height: 38px; } .cmd-row-body { flex: 1; min-width: 0; } .cmd-row-name { display: block; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmd-row-meta { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; } .cmd-row-price { font-family: var(--mono); font-weight: 800; font-size: 14px; flex-shrink: 0; } .cmd-more { display: block; text-align: center; padding: 13px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--volt); text-decoration: none; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } .cmd-more:hover { color: var(--ice); } body[data-theme="light"] .cmd { background: rgba(20,32,60,.42); } /* コレクション登録/編集モーダル（card.html「コレクションに追加」→ v7 白カード＋三層影・中央表示） .cmd と同じ暗幕オーバーレイ言語を踏襲しつつ、フォーム用に専用クラスで独立させる。 */ .col-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(6,10,20,.62); backdrop-filter: blur(14px) saturate(1.1); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .22s; } .col-overlay.open { opacity: 1; pointer-events: auto; } body[data-theme="light"] .col-overlay { background: rgba(20,32,60,.42); } body.col-modal-lock { overflow: hidden; } .col-modal { width: min(420px, 100%); border-radius: 22px; padding: 24px 24px 22px; border: 1px solid transparent; background: var(--mod-surface) padding-box, var(--mod-border) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.32), 0 36px 80px rgba(0,0,0,.38); transform: translateY(-10px) scale(.98); opacity: 0; transition: transform .22s var(--ease), opacity .22s var(--ease); } .col-overlay.open .col-modal { transform: none; opacity: 1; } body[data-theme="light"] .col-modal { box-shadow: 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,.16), 0 10px 22px rgba(23,43,99,.1), 0 32px 64px rgba(23,43,99,.17); } .col-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .col-modal-kicker { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--volt); margin: 0 0 6px; } .col-modal-title { margin: 0; font-family: var(--jp-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.3; } .col-modal-sub { margin: 8px 0 0; } .col-modal-close { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--elev); color: var(--mute); font-size: 14px; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; } .col-modal-close:hover { color: var(--ink); border-color: color-mix(in srgb, var(--volt) 45%, var(--line)); } .col-modal-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; } .col-modal-row label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } .col-modal-row input, .col-modal-row textarea { border-radius: 12px; border: 1px solid var(--line); background: var(--elev); color: var(--ink); padding: 0 13px; font: inherit; font-size: 14.5px; font-weight: 600; transition: border-color .15s, box-shadow .15s; } .col-modal-row input { height: 46px; } .col-modal-row textarea { min-height: 72px; padding: 11px 13px; resize: vertical; font-weight: 500; } .col-modal-row input:focus, .col-modal-row textarea:focus { outline: none; border-color: color-mix(in srgb, var(--volt) 50%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--volt) 14%, transparent); } .col-modal-preview { margin: 0 0 4px; font-size: 13px; color: var(--faint); } .col-modal-preview b { color: var(--ink); font-family: var(--mono); } .col-modal-actions { display: flex; gap: 10px; margin-top: 16px; } .col-modal-actions .btn { flex: 1; } .col-modal-danger { color: var(--up) !important; border-color: color-mix(in srgb, var(--up) 40%, var(--line)) !important; } .col-modal-danger:hover { background: color-mix(in srgb, var(--up) 10%, transparent) !important; border-color: var(--up) !important; color: var(--up) !important; } /* 「登録済み」ボタン状態 — 彩虹は使わず volt 系の穏やかな強調のみ（彩虹は身分位専用の契約を維持） */ .btn.is-collected { color: var(--volt) !important; background: color-mix(in srgb, var(--volt) 10%, var(--elev)) padding-box, color-mix(in srgb, var(--volt) 45%, var(--line)) border-box !important; border-color: transparent !important; } body[data-theme="light"] .btn.is-collected { color: #006BA6 !important; } /* 汎用 */ .faint { color: var(--faint); } .mute { color: var(--mute); } .hide-sm { } @media (max-width: 640px) { .hide-sm { display: none !important; } } /* ══════════════════════════════════════════════════════════════ 自動 mod 化 — 旧コンテナ達に .mod と同じ研磨・浮遊・光斑を纏わせる （このブロックはファイル末尾 = 上の暫定定義より優先） ══════════════════════════════════════════════════════════════ */ .panel, .table-wrap, .chart-shell, .idx-chart-shell, .idx-custom, .stat { position: relative; overflow: hidden; border: 1px solid transparent; background: var(--mod-surface) padding-box, var(--mod-border) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.32), 0 36px 80px rgba(0,0,0,.38); transition: transform .22s ease-out, box-shadow .28s; will-change: transform; } .panel { border-radius: 22px; } .table-wrap, .chart-shell, .idx-chart-shell { border-radius: 24px; } .idx-custom, .stat { border-radius: 20px; } .panel::before, .table-wrap::before, .chart-shell::before, .idx-chart-shell::before, .idx-custom::before, .stat::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px 240px at var(--mx, 50%) var(--my, -20%), rgba(46,230,255,.09), transparent 60%); opacity: 0; transition: opacity .3s; } .panel:hover::before, .table-wrap:hover::before, .chart-shell:hover::before, .idx-chart-shell:hover::before, .idx-custom:hover::before, .stat:hover::before { opacity: 1; } .panel > *, .table-wrap > *, .chart-shell > *, .idx-chart-shell > *, .idx-custom > *, .stat > * { position: relative; z-index: 1; } .panel:hover, .table-wrap:hover, .chart-shell:hover, .idx-chart-shell:hover, .idx-custom:hover, .stat:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.4), 0 18px 36px rgba(0,0,0,.38), 0 52px 110px rgba(0,0,0,.46); } body[data-theme="light"] .panel, body[data-theme="light"] .table-wrap, body[data-theme="light"] .chart-shell, body[data-theme="light"] .idx-chart-shell, body[data-theme="light"] .idx-custom, body[data-theme="light"] .stat { box-shadow: 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,.16), 0 10px 22px rgba(23,43,99,.1), 0 32px 64px rgba(23,43,99,.17); } body[data-theme="light"] .panel:hover, body[data-theme="light"] .table-wrap:hover, body[data-theme="light"] .chart-shell:hover, body[data-theme="light"] .idx-chart-shell:hover, body[data-theme="light"] .idx-custom:hover, body[data-theme="light"] .stat:hover { box-shadow: inset 0 1.5px 0 #FFFFFF, inset 0 -2px 0 rgba(23,43,99,.07), 0 -4px 16px rgba(255,255,255,1), 0 3px 5px rgba(23,43,99,.15), 0 20px 40px rgba(23,43,99,.14), 0 56px 110px rgba(23,43,99,.26); } body[data-theme="light"] .panel::before, body[data-theme="light"] .table-wrap::before, body[data-theme="light"] .chart-shell::before, body[data-theme="light"] .idx-chart-shell::before, body[data-theme="light"] .idx-custom::before, body[data-theme="light"] .stat::before { background: radial-gradient(520px 240px at var(--mx, 50%) var(--my, -20%), rgba(0,144,222,.07), transparent 60%); } /* VOLT_UI.thumbCard 用 */ img.thumb-card { width: 60px; height: 84px; border-radius: 10px; flex-shrink: 0; object-fit: cover; border: 1px solid rgba(255,255,255,.12); background: var(--elev-2); box-shadow: 0 4px 12px rgba(0,0,0,.4); cursor: zoom-in; transition: transform .2s var(--ease), box-shadow .2s; } tr:hover img.thumb-card { transform: scale(1.06) rotate(-0.6deg); box-shadow: 0 8px 20px rgba(0,0,0,.5), 0 0 18px rgba(46,230,255,.14); } /* r3 A3: 缺図プレースホルダー — 空白ブロックではなく淡グラデ + 中央 10px mono 小字 */ .thumb-card.is-empty, .thumb.tbox.is-empty { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--elev-2), var(--elev)); border: 1px dashed var(--line); } .thumb-card.is-empty { width: 60px; height: 84px; border-radius: 10px; } .thumb-card.is-empty::before, .thumb.tbox.is-empty::before { content: "CARD"; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--faint); } .thumb.tbox.is-empty::before { content: "BOX"; } body[data-theme="light"] img.thumb-card { border-color: rgba(16,26,54,.14); box-shadow: 0 2px 8px rgba(30,60,130,.16); } /* 旧 .table にも行スタッガー（.reveal 付き table-wrap が is-in になった時） */ .table-wrap .table tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .16s; } .table-wrap.is-in .table tbody tr { opacity: 1; transform: none; } .table-wrap.is-in .table tbody tr:nth-child(1) { transition-delay: .05s; } .table-wrap.is-in .table tbody tr:nth-child(2) { transition-delay: .12s; } .table-wrap.is-in .table tbody tr:nth-child(3) { transition-delay: .19s; } .table-wrap.is-in .table tbody tr:nth-child(4) { transition-delay: .26s; } .table-wrap.is-in .table tbody tr:nth-child(5) { transition-delay: .33s; } .table-wrap.is-in .table tbody tr:nth-child(6) { transition-delay: .4s; } .table-wrap.is-in .table tbody tr:nth-child(n+7) { transition-delay: .47s; } /* reveal を持たない table-wrap は常時表示 */ .table-wrap:not(.reveal):not(.rv) .table tbody tr, .table-wrap:not(.reveal):not(.rv) .vt tbody tr { opacity: 1; transform: none; } /* ── VoltChart v2 追加部品 ── */ .vchart .ch-stage { height: 360px; } @media (max-width: 680px) { .vchart .ch-stage { height: 260px; } } .ch-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent); font-size: 13px; color: var(--mute); font-weight: 600; } /* .ch-leg は