/* ══════════════════════════════════════════════════════════════
   RUVO 首页正文（C3「A 看板」以下）· T14 · 2026-10-12
   样张：docs/roadstar/2026-10-10-site-review/proposals/C3/index.html?only=homeA；尺寸与规矩：同目录 notes.md、design.md
   加载顺序：index.html 里在 ruvo-c.css 之后。
   规矩：
     1. 颜色只用 token（var(--…)，名字见模块地图「网页-共用层」）。本页另有 4 个局部 token（--hm-*），
        色值只在第 0 节定义，组件一律引用变量。
     2. 控件三档高：56 / 48（托盘）/ 40（托盘里的按钮、纯图标按钮）；32 只给不能点的胶囊。间距 4 8 12 16 20 24 32 40。
     3. 弹簧只用 SPRING_PRESS（--c-e-press）、KOKO-smooth-tab（--c-e-tab）、BEUI-switch；弹层弹簧 SPRING_PANEL 由 ruvo-c-home.js 写进 --hm-e-panel。
     4. prefers-reduced-motion 与 ?still（html.c-still）时全停，只留颜色变化。
   ══════════════════════════════════════════════════════════════ */

/* ───────────── 0. 局部 token（本文件里唯一允许出现色值的地方） ───────────── */
body, body[data-theme="light"] {
  --hm-hi: rgba(255, 255, 255, .9);        /* 面板顶边 1px 内高光（design.md §9.2）；站内 token 没有对应项 */
  --hm-logo-plate: #FFFFFF;                /* 游戏 logo 的衬块：官方 logo 按白底设计，浅深色里都要白衬块才能保原色 */
  --hm-drop: rgba(29, 26, 43, .35);        /* 卡图的投影；站内 token 没有对应项 */
  --hm-hi-mat: var(--hm-hi);               /* 面板用的顶边高光 = 上面那条 */
  --hm-e-panel: cubic-bezier(.34, 1.4, .64, 1); --hm-d-panel: 320ms; /* 无 JS 时弹层的兜底缓动 */
}
body[data-theme="dark"] {
  --hm-hi: rgba(255, 255, 255, .05);       /* 深色里高光压到 5% */
  --hm-logo-plate: #F7F5FF;                /* 深色里衬块用偏冷的白，不刺眼 */
  --hm-drop: rgba(0, 0, 0, .6);
  --hm-hi-mat: transparent;                /* 深色里 --shadow-1 自带 4% 的顶边内高光，面板不再叠第二层（r1 M8） */
}

/* 首页正文宽 1248：与样张、T21 看板（min(1248px, 100% - 32px)）同宽，版头与正文两侧对齐。站内 .shell 是 --max 1240，只在首页放宽 8px（r1 S1） */
body.home-page main .shell, body.home-page .ticker, body.home-page[data-theme] .ticker { width: min(1248px, calc(100% - 32px)); }

/* ───────────── 2. 顶部：筛选条 ───────────── */
.hm-top { position: relative; z-index: 5; margin: 16px 0 0; }
.hm-mat {
  background: var(--panel);
  box-shadow: inset 0 1px 0 var(--hm-hi-mat), 0 0 0 1px var(--line), var(--shadow-1);
}
.hm-bar { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-xl); }
.hm-grow { flex: 1 1 auto; min-width: 0; }
.hm-top [hidden] { display: none !important; } /* 部品が読めなかった時に index.html が付ける hidden（作者 CSS の display に負けないように） */

/* 托盘：48 高，里面的按钮 40 */
.hm-tray {
  position: relative; display: inline-flex; align-items: center; gap: 2px; flex: none;
  height: var(--c-h-lg); padding: 4px; border-radius: 999px;
  background: var(--tray); box-shadow: inset 0 0 0 1px var(--line-strong);
  isolation: isolate;
}
.hm-tray > button, .hm-ibtn {
  position: relative; z-index: 1; flex: none;
  display: inline-grid; place-items: center; grid-auto-flow: column; gap: 6px;
  height: var(--c-h-md); min-width: var(--c-h-md); padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-2);
  font: 700 15px/1 var(--f-jp); font-feature-settings: "palt" 1; white-space: nowrap; cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform var(--c-d-press) var(--c-e-press);
}
.hm-tray > button .ic, .hm-ibtn .ic { width: 22px; height: 22px; }
.hm-tray > button:not(.on):hover, .hm-ibtn:not(.on):hover { color: var(--text-1); background: color-mix(in srgb, var(--text-1) 6%, transparent); }
.hm-tray > button:active, .hm-ibtn:active { transform: scale(.93); }
.hm-seg > button.on { color: var(--plate-ink); }
.hm-seg > button.on .ic { --ic-fill: var(--lemon); }
.hm-seg > button.on:hover { background: transparent; }
.hm-seg:not(.ready) > button.on { background: var(--plate); }
/* KOKO-smooth-tab：深色底板用弹簧滑到选中格（位置与宽度由 ruvo-c-home.js 写） */
.hm-plate {
  position: absolute; z-index: 0; top: 4px; left: 0; height: var(--c-h-md); width: 0;
  border-radius: 999px; background: var(--plate); box-shadow: var(--shadow-plate); opacity: 0;
}
.hm-seg.ready .hm-plate { opacity: 1; }

/* ゲーム：logo 按钮；选中时 logo 放在白衬块里保持原色，未选时灰度 60% */
.hm-games > button { width: 104px; }
.hm-games > button[data-value="onepiece"] { width: 108px; }
.hm-games > button[data-value="dragonball"] { width: 96px; }
.hm-games > button[data-value="yugioh"] { width: 88px; }
.hm-chipimg { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 999px; overflow: hidden; transition: background-color .2s ease, transform var(--c-d-press) var(--c-e-press); }
.hm-games > button img { height: 22px; max-width: 80px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .25s ease, opacity .25s ease; }
.hm-games > button[data-value="pokemon"] img { width: 86px; height: 12px; max-width: none; object-fit: cover; object-position: 50% 0; } /* 裁掉副标行，只留主标（样张 15 高还露一条副标残边，这里收到 12） */
.hm-games > button[data-value="yugioh"] img { height: 28px; }
.hm-games > button:not(.on):hover img { opacity: .85; filter: grayscale(.2); }
.hm-games > button.on .hm-chipimg { background: var(--hm-logo-plate); transform: scale(.86); box-shadow: 0 1px 2px var(--hm-drop); }
.hm-games > button.on img { filter: none; opacity: 1; }
body[data-theme="dark"] .hm-games > button:not(.on) .hm-chipimg { background: var(--hm-logo-plate); transform: scale(.8); opacity: .85; }
body[data-theme="dark"] .hm-games > button:not(.on) img { filter: none; opacity: .75; }

/* 種別・並び：选中的那一格展开成「图标＋字」；每组按最长的选中状态预留宽度（--onw），切换时托盘不变宽 */
.hm-icons > button { min-width: var(--c-h-md); padding: 0 8px; }
.hm-icons > button .hm-lab { display: none; font-weight: 800; }
.hm-icons > button.on { width: var(--onw, auto); padding: 0 12px; justify-content: center; }
.hm-icons > button.on .hm-lab { display: inline; }

/* 価格帯：按钮上写当前范围；有范围时按钮是深底 */
.hm-pbtn { padding: 0 16px 0 12px !important; justify-content: start; }
.hm-pbtn .val { font: 800 15px/1 var(--f-num); color: var(--text-1); font-variant-numeric: tabular-nums; }
.hm-pbtn .val:empty { display: none; }
.hm-pbtn .chev { width: 16px !important; height: 16px !important; color: var(--text-3); transition: transform var(--c-d-press) var(--c-e-press); }
.hm-pbtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hm-tray > .hm-pbtn.active, .hm-tray > .hm-pbtn.active:hover { background: var(--plate); color: var(--plate-ink); }
.hm-pbtn.active .val, .hm-pbtn.active .chev { color: var(--plate-ink); }
.hm-pbtn.active .ic { --ic-fill: var(--lemon); }

/* ⓘ ＋ プロ 开关（右端同一个托盘） */
.hm-ibtn.info { width: var(--c-h-md); }
.hm-tray .hm-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--line-strong); flex: none; }
/* プロ 开关：RuvoView.mountSwitch(.hm-prosw-slot) 在 slot 里画一只 button.c-prosw（T21 同一套 class；合并后 T21 的实现接管，这里只管它在托盘里的样子）。
   选择器带 slot，权重高于 ruvo-c.css 里 T21 的 .c-prosw，所以托盘里是平的（不再自带一层托盘底） */
.hm-prosw-slot { display: inline-flex; flex: none; }
.hm-prosw-slot .c-prosw {
  position: relative; z-index: 1; flex: none; cursor: pointer;
  display: inline-grid; grid-template-columns: 22px auto 36px; align-items: center; gap: 8px;
  width: auto; height: var(--c-h-md); padding: 0 8px 0 12px; border: 0; border-radius: 999px;
  background: transparent; box-shadow: none; color: var(--text-2);
  font: 800 15px/1 var(--f-jp); white-space: nowrap;
  transition: color .2s ease, background-color .2s ease, transform var(--c-d-press) var(--c-e-press);
}
.hm-prosw-slot .c-prosw:hover { color: var(--text-1); background: color-mix(in srgb, var(--text-1) 6%, transparent); }
.hm-prosw-slot .c-prosw:active { transform: scale(.93); }
.hm-prosw-slot .c-prosw .ic { width: 22px; height: 22px; }
.hm-prosw-slot .c-prosw .c-pro-trk { position: relative; width: 36px; height: 22px; border-radius: 999px; background: var(--track); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .2s ease; }
.hm-prosw-slot .c-prosw .c-pro-trk i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px var(--hm-drop); transition: transform var(--c-d-press) var(--c-e-press); }
.hm-prosw-slot .c-prosw[aria-checked="true"] { color: var(--text-1); }
.hm-prosw-slot .c-prosw[aria-checked="true"] .ic { --ic-fill: var(--lemon); }
.hm-prosw-slot .c-prosw[aria-checked="true"] .c-pro-trk { background: var(--lemon); box-shadow: inset 0 0 0 1px var(--lemon-deep); }
.hm-prosw-slot .c-prosw[aria-checked="true"] .c-pro-trk i { transform: translateX(14px); background: var(--sticker-ink); }

/* 日文提示（BEUI-tooltip：悬停 120ms 后出现，键盘聚焦立刻出；纯 CSS 淡入，不加弹簧） */
.hm-top [data-tip], .hm-boards [data-tip] { position: relative; }
.hm-top [data-tip]::after, .hm-boards [data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 30;
  transform: translate(-50%, 4px) scale(.96); transform-origin: 50% 100%;
  padding: 6px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  background: var(--plate); color: var(--plate-ink);
  font: 700 13px/1.3 var(--f-jp); letter-spacing: .02em; box-shadow: var(--shadow-3);
  opacity: 0; transition: opacity .14s ease, transform .2s var(--c-e-out); transition-delay: 0s;
}
.hm-top [data-tip]:hover::after, .hm-top [data-tip]:focus-visible::after,
.hm-boards [data-tip]:hover::after, .hm-boards [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 120ms; }
.hm-top [data-tip]:focus-visible::after, .hm-boards [data-tip]:focus-visible::after { transition-delay: 0s; }
.hm-top [data-tip][aria-expanded="true"]::after, .hm-top [data-tip].notip::after { opacity: 0 !important; }
/* 贴着右缘的控件（面板右上角的「すべて」、右端 ⓘ／プロ 托盘）：提示靠右对齐，窄窗口里不会把页面撑出横向滚动 */
.hm-boards .hm-all[data-tip]::after, .hm-top .hm-tray.is-end [data-tip]::after { left: auto; right: 0; transform: translate(0, 4px) scale(.96); transform-origin: 100% 100%; }
.hm-boards .hm-all[data-tip]:hover::after, .hm-boards .hm-all[data-tip]:focus-visible::after,
.hm-top .hm-tray.is-end [data-tip]:hover::after, .hm-top .hm-tray.is-end [data-tip]:focus-visible::after { transform: translate(0, 0) scale(1); }

/* 弹出层（ⓘ 数据说明、価格帯）：MP-morphing-popover 的写法，从按钮处长出来，弹簧 SPRING_PANEL */
.hm-anchor { position: relative; }
.hm-pop {
  position: absolute; z-index: 40; top: calc(100% + 12px); min-width: 300px; padding: 16px;
  border-radius: 24px; background: var(--overlay);
  box-shadow: var(--shadow-3), 0 0 0 1px var(--line-strong);
  transform-origin: var(--ox, 50%) -12px;
}
.hm-pop[hidden] { display: none; }
.hm-pop:focus { outline: none; }
.hm-pop h4 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; }
.hm-pop h4 .ic { width: 20px; height: 20px; color: var(--text-2); }
.hm-pop.is-info { right: 0; width: 360px; }
.hm-pop.is-info dl { margin: 0; display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13px; color: var(--text-2); }
.hm-pop.is-info dt { display: grid; place-items: center; height: 20px; }
.hm-pop.is-info dt .ic { width: 16px; height: 16px; color: var(--text-3); }
.hm-pop.is-info dd { margin: 0; line-height: 1.5; }
.hm-pop.is-info dd b { color: var(--text-1); }
.hm-src { color: var(--text-1); font-weight: 700; } /* 不能点的出处不用链接色 */
.hm-pop .hm-foot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hm-pop .hm-foot .mono { font-size: 13px; color: var(--text-3); }
.hm-lnk {
  display: inline-flex; align-items: center; gap: 4px; height: var(--c-h-md); padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--tray); font: 700 14px/1 var(--f-jp); color: var(--text-1); cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, transform var(--c-d-press) var(--c-e-press);
}
.hm-lnk .ic { width: 16px; height: 16px; transition: transform var(--c-d-press) var(--c-e-press); }
.hm-lnk:hover { background: var(--track); }
.hm-lnk:hover .ic { transform: translateX(3px); }
.hm-lnk:active { transform: scale(.94); }
.hm-pop.is-range { left: 0; width: 420px; }
.hm-pop { max-width: calc(100vw - 32px); } /* 位置由 ruvo-c-home.js 的 placePop 夹进视口左右各 16 */
.hm-range-val { font: 900 22px/1.2 var(--f-num); letter-spacing: -.01em; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
/* 价格带双端滑轨（BEUI-range-slider）：7 个刻度，拇指落到刻度时用 SPRING_PRESS 弹一下 */
.hm-rs { position: relative; height: 40px; margin: 0 16px; touch-action: none; cursor: pointer; }
.hm-rs-track { position: absolute; left: 0; right: 0; top: 17px; height: 6px; border-radius: 999px; background: var(--chart-5); }
.hm-rs-fill { position: absolute; top: 17px; height: 6px; border-radius: 999px; background: var(--text-1); }
.hm-rs-tick { position: absolute; top: 15px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--overlay); box-shadow: inset 0 0 0 2px var(--chart-5); }
.hm-rs-tick.in { box-shadow: inset 0 0 0 2px var(--text-1); }
.hm-rs-thumb {
  position: absolute; top: 4px; width: 32px; height: 32px; margin-left: -16px; padding: 0; border: 0; border-radius: 50%;
  background: var(--lemon); box-shadow: 0 0 0 3px var(--overlay), 0 0 0 4px var(--text-1), 0 4px 10px var(--hm-drop);
  cursor: grab; touch-action: none; transition: transform var(--c-d-press) var(--c-e-press);
}
.hm-rs-thumb::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* 可点区外扩到 40 */
.hm-rs-thumb:hover { transform: scale(1.1); }
.hm-rs-thumb:active { cursor: grabbing; transform: scale(1.18); }
.hm-rs-lab { display: flex; justify-content: space-between; margin: 8px 0 0; font: 700 13px/1.2 var(--f-mono); color: var(--text-3); }
.hm-rs-lab span { width: 32px; text-align: center; }
.hm-rs-note { font-size: 13px; color: var(--text-3); }
.hm-pop .hm-btns { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }

/* プロ 才露出来的数据说明行（DATA ＋ 出典 ＋ 資格の決まり）；id=home-kicker 由 index.html 填 */
.hm-dnote { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 12px 0; font-size: 13px; color: var(--text-3); }
.hm-dnote .hk-live { font: 500 13px/1 var(--f-mono); letter-spacing: .06em; color: var(--lemon-text); background: var(--lemon-wash); padding: 2px 6px; border-radius: 6px; }
.hm-dnote .hm-seg-t { white-space: nowrap; }
.hm-dnote a { display: inline-flex; align-items: center; min-height: var(--c-h-md); margin: -12px 0; color: var(--text-1); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* 可点区 40 高，行高不变 */

/* ───────────── 3. 两张榜：整行是链接，悬停整行浮起，箭头常显 40% ───────────── */
.hm-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 16px 0 24px; }
.hm-panel { position: relative; min-width: 0; padding: 12px; border-radius: var(--r-lg); }
/* 签名：补充包右侧的撕口（面板右缘距顶 30，宽 10 高 18 的三角缺口，颜色同页面底） */
.hm-panel::after {
  content: ""; position: absolute; right: -1px; top: 30px; width: 10px; height: 18px; background: var(--bg);
  clip-path: polygon(100% 0, 0 50%, 100% 100%); pointer-events: none;
}
.hm-ph { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 4px; margin-bottom: 8px; }
.hm-ph h2 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 900; letter-spacing: .02em; color: var(--text-1); }
.hm-ph small { font-size: 13px; font-weight: 700; color: var(--text-3); }
.hm-dir { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; flex: none; }
.hm-dir .ic { width: 20px; height: 20px; }
.hm-dir.up { background: var(--up-wash); color: var(--up-text); }
.hm-dir.down { background: var(--down-wash); color: var(--down-text); }
.hm-all {
  margin-left: auto; display: inline-grid; place-items: center; width: var(--c-h-md); height: var(--c-h-md); border-radius: 999px;
  background: var(--tray); color: var(--text-2);
  transition: transform var(--c-d-press) var(--c-e-press), color .2s ease, background-color .2s ease;
}
.hm-all .ic { width: 16px; height: 16px; }
.hm-all:hover { color: var(--text-1); background: var(--track); transform: translateX(2px); }
.hm-all:active { transform: scale(.94); }
ol.hm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.hm-row {
  position: relative; display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px;
  min-height: 64px; padding: 4px 8px; border-radius: 20px;
  transition: background-color .2s ease, box-shadow .2s ease, transform var(--c-d-press) var(--c-e-press);
}
body[data-view="pro"] .hm-row { min-height: 80px; }
.hm-row:hover { background: var(--overlay); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.hm-row:active { transform: translateY(0) scale(.99); }
.hm-rk { font: 900 15px/1 var(--f-num); color: var(--text-3); text-align: center; }

.hm-th {
  width: 40px; aspect-ratio: 744 / 1040; object-fit: cover; border-radius: 5px; background: var(--track);
  box-shadow: inset 0 1px 0 var(--hm-hi), 0 4px 10px -4px var(--hm-drop);
}
.hm-th.is-box { aspect-ratio: 1; object-fit: contain; background: var(--sky-wash); padding: 3px; border-radius: 8px; box-shadow: none; }
.hm-th.is-empty { display: block; }
.hm-thw { position: relative; display: block; width: 40px; }
.hm-approx {
  position: absolute; right: -4px; bottom: -4px; padding: 2px 4px; border-radius: 6px;
  font: 800 13px/1 var(--f-jp); background: var(--lemon-wash); color: var(--lemon-text); box-shadow: 0 0 0 1.5px var(--panel); white-space: nowrap;
}
.hm-tilt .hm-approx { right: 4px; bottom: 4px; }
.hm-main { min-width: 0; }
.hm-nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hm-hit { position: static; min-width: 0; color: var(--text-1); font: 700 15px/1.35 var(--f-jp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-hit::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* 整行都是这个链接 */
.hm-hit:focus-visible { outline: none !important; }
.hm-hit::after { border-radius: 20px; }
.hm-row.is-lead .hm-hit::after { border-radius: 24px; }
.hm-hit:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: -2px; } /* 聚焦时只留整行的环 */
span.hm-hit::after { display: none; }
.hm-var { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; font: 500 13px/1.3 var(--f-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; }
.hm-var-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-var-rel { flex: none; font-variant-numeric: tabular-nums; }
.hm-var-t + .hm-var-rel::before { content: "· "; }
.hm-row .stk, .hm-panel .stk { height: 24px !important; line-height: 24px !important; padding: 0 8px !important; font-size: 13px !important; }
.hm-row .stk b { font-size: 14px !important; }
.hm-num { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.hm-px { font: 900 20px/1.1 var(--f-num); letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; color: var(--text-1); white-space: nowrap; }
.hm-chg {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 6px 10px; border-radius: 999px;
  font: 800 14px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hm-chg.up { color: var(--up-text); background: var(--up-wash); }
.hm-chg.down { color: var(--down-text); background: var(--down-wash); }
.hm-chg.flat { color: var(--text-2); background: var(--tray); }
.hm-go { width: 20px; height: 20px; color: var(--text-2); opacity: .4; transition: opacity .2s ease; }
.hm-row:hover .hm-go, .hm-row:has(.hm-hit:focus-visible) .hm-go { opacity: 1; }
.hm-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; font-size: 13px; color: var(--text-3); }
.hm-sub .mono { font-size: 13px; }
.hm-sub .conf-dots, .hm-meta .conf-dots, .hm-conf .conf-dots { font-size: 13px; cursor: help; position: relative; z-index: 2; } /* 只有要悬停出说明的信頼度点盖在整行链接之上，其余字落在整行链接上、点了进详情（r2 M2） */
.hm-sub .conf-dots .cd-g, .hm-meta .conf-dots .cd-g { font-size: 13px; letter-spacing: .1em; }
.hm-sub .cd-ref, .hm-meta .cd-ref { font-size: 13px; }
.hm-why {
  display: inline-flex; align-items: center; gap: 4px; height: var(--c-h-md); padding: 0 12px 0 8px; margin: -8px 0; border: 0; border-radius: 999px;
  background: transparent; font: 700 14px/1 var(--f-jp); color: var(--text-2); cursor: pointer; position: relative; z-index: 2;
  transition: background-color .2s ease, transform var(--c-d-press) var(--c-e-press);
}
.hm-why .ic { width: 14px; height: 14px; transition: transform var(--c-d-press) var(--c-e-press); }
.hm-why[aria-expanded="true"] .ic { transform: rotate(90deg); }
.hm-why:hover { background: var(--tray); color: var(--text-1); }
.hm-why:active { transform: scale(.94); }
.hm-why-body { grid-column: 3 / -1; margin-top: -4px; padding-bottom: 8px; font-size: 13px; line-height: 1.6; color: var(--text-3); position: relative; z-index: 2; }
.hm-why-body[hidden] { display: none; }
.hm-ev-seg { white-space: nowrap; }

/* 一号位：580×136，卡图 80 宽、价格 40px，是本屏唯一的大数字 */
.hm-row.is-lead { grid-template-columns: 28px 80px minmax(0, 1fr) auto 20px; gap: 16px; min-height: 136px; padding: 12px 12px 12px 8px; margin-bottom: 4px; background: var(--tray); border-radius: 24px; }
body[data-view="pro"] .hm-row.is-lead { min-height: 136px; }
.hm-row.is-lead:hover { background: var(--overlay); }
.hm-row.is-lead .hm-rk { font-size: 22px; color: var(--text-1); }
.hm-tilt { position: relative; width: 80px; aspect-ratio: 744 / 1040; border-radius: 7px; overflow: hidden; transform: perspective(1000px); will-change: transform; box-shadow: 0 14px 26px -12px var(--hm-drop); background: var(--track); }
.hm-tilt.is-box { aspect-ratio: 1; background: var(--sky-wash); }
.hm-tilt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-tilt.is-box img { object-fit: contain; padding: 4px; }
.hm-tilt .glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--panel), transparent 50%); mix-blend-mode: soft-light; transition: opacity .2s ease; }
.hm-tilt.active .glare { opacity: .55; }
.hm-row.is-lead .hm-hit { font-size: 17px; }
.hm-lead-px { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; flex-wrap: wrap; }
.hm-lead-px .hm-px { font-size: 40px; letter-spacing: -.02em; line-height: 1.05; }
.hm-lead-px .hm-chg { font-size: 16px; }
.hm-trail { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.hm-trail .tl { display: block; white-space: nowrap; }
.hm-trail .mono { font-size: 13px; }
.hm-meta { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-3); display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: baseline; }
.hm-duo { display: flex; align-items: flex-end; gap: 8px; height: 80px; padding: 0 4px; }
.hm-duo-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.hm-duo-col i { display: block; width: 24px; height: calc(var(--h) * .6); min-height: 6px; border-radius: 9px; background: var(--chart-5); }
.hm-duo-col.now.up i { background: var(--up-mark); }
.hm-duo-col.now.down i { background: var(--down-mark); }
.hm-duo-col span { font: 700 13px/1 var(--f-jp); color: var(--text-3); }

/* 空态 / 更新中 */
.hm-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; color: var(--text-3); font-size: 15px; font-weight: 700; text-align: center; list-style: none; }
.hm-empty .ic { width: 32px; height: 32px; color: var(--text-2); }
p.hm-empty { margin: 0; }

/* もっと見る（窄屏才出现，宽屏全部露出） */
.hm-more-btn { display: none; margin: 8px auto 0; }

/* 本日のパック：当天首次进站，上昇一号位裹一层柠檬箔，0.42s 后撕走（ruvo-c-home.js 临时插入，播完删除） */
.hm-pack {
  position: absolute; inset: 0; z-index: 3; border-radius: 24px; pointer-events: none;
  background: var(--sheen), var(--foil-lemon); color: var(--sticker-ink);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font: 900 15px/1 var(--f-jp); letter-spacing: .08em; transform-origin: 8% 0;
}
.hm-pack svg { width: 48px; height: 48px; }

/* ───────────── 4. 首页其它区块：同一套面板／托盘语言 ───────────── */
/* 榜单下面的「本日の相場ニュース n 件 →」 */
.hm-news { margin: 0 0 8px; }
.hm-news[hidden] { display: none; }
.hm-news a { display: inline-flex; align-items: center; gap: 4px; min-height: var(--c-h-md); padding: 0 16px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 1px 0 var(--hm-hi-mat), 0 0 0 1px var(--line), var(--shadow-1); font: 700 14px/1 var(--f-jp); color: var(--text-1); text-decoration: none; transition: transform var(--c-d-press) var(--c-e-press); }
.hm-news a:hover { transform: translateY(-2px); }
.hm-news a:active { transform: scale(.97); }

/* ティッカー（BOX 買取の流れる帯）：シェルの幅に収め、白い面板の帯にする。止める／再生ボタンは右上に 40 高で */
body.home-page .ticker, body.home-page[data-theme] .ticker { margin: 0 auto 8px; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; }
.home-page .ticker-control { display: flex; align-items: center; min-height: var(--c-h-md); height: var(--c-h-md); padding: 0 16px; margin: 0 0 8px auto; border-radius: 999px; font: 700 14px/1 var(--f-jp); cursor: pointer; }
.home-page .ticker-rail { overflow: hidden; background: var(--panel); border-radius: var(--r-xl); box-shadow: inset 0 1px 0 var(--hm-hi-mat), 0 0 0 1px var(--line), var(--shadow-1); mask-image: none; }
.home-page .ticker-rail::before { background: linear-gradient(90deg, var(--panel), transparent); }
.home-page .ticker-rail::after { background: linear-gradient(270deg, var(--panel), transparent); }
.home-page .tk-item { padding: 16px 32px; }

.home-page .sec { margin-top: 32px; }
.home-page .sec h2 { font-size: 24px; line-height: 1.25; font-weight: 900; }
.home-page .sec .sec-kicker { font-size: 13px; letter-spacing: .06em; }
.home-page .sec .sec-note { font-size: 13px; color: var(--text-3); line-height: 1.6; }
.home-page .sec a.more {
  display: inline-flex; align-items: center; min-height: var(--c-h-md); padding: 0 16px; border-radius: 999px;
  background: var(--tray); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-1); font: 700 14px/1 var(--f-jp); text-decoration: none;
  transition: background-color .2s ease, transform var(--c-d-press) var(--c-e-press);
}
.home-page .sec a.more:hover { background: var(--track); }
.home-page .sec a.more:active { transform: scale(.95); }
/* シンプル 时收起的小字：前回价格、基準价 */
body:not([data-view="pro"]) :is(#home-box, .ticker, .trend-card) .delta-prev { display: none; }
body:not([data-view="pro"]) #home-box .sub, body:not([data-view="pro"]) .ticker .tk-src { display: none; } /* 来源・日期・店名・価格种别 */
.home-page .mute, .home-page .faint { color: var(--text-3); }
.home-page #home-x-line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 16px 0 0; font-size: 13px; color: var(--text-3); }
.home-page #home-x-line a { display: inline-flex; align-items: center; min-height: var(--c-h-md); color: var(--text-1); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.home-page #home-x-toggle { min-height: var(--c-h-md); height: var(--c-h-md); }

/* 下半区块的小字统一抬到 13（design.md §2 最小 13）：ティッカー的 BOX 贴纸与出处、β 标记、指数涨跌小标、TREND 日期与脚注、表头与表行小字、页脚（r1 S3） */
.home-page .ticker .tag.tag-box, .home-page .trend-head .tag.tag-box { font-size: 13px !important; height: 24px; line-height: 24px !important; padding: 0 8px !important; }
.home-page .tk-item .tk-src, .home-page .td-date, .home-page .hm-fine, .home-page .idx-home-deltas .idx-home-d, .home-page .idx-home-deltas .idx-home-d b,
.home-page .tag-ref, .home-page .vt thead th, .home-page .vt .sub, .home-page .vt .sub .num, .home-page .foot { font-size: 13px; }
.home-page .trend-card .mute { font-size: 13px !important; } /* index.html 里这一句原来是内联 11px */
/* ティッカー等里没有前回比时的「—」：原来是 55% 透明的字，浅色对比 2.8:1，换成 --text-3（浅 5.2:1 / 深 5.9:1） */
.home-page .delta.flat { color: var(--text-3) !important; }
/* 表里的名称链接和页脚链接：可点区 40 高（焦点环也是 40），版面行高不变 */
/* B1: v7.css 的 .vt .nm 是 nowrap + 30ch(≈241px) 省略，十个盒子名都只剩「ポケモンカードゲーム ソード …」。放开宽度、允许换行 */
.home-page #home-box .nm { white-space: normal; max-width: 100%; overflow: visible; text-overflow: clip; line-height: 1.45; overflow-wrap: anywhere; }
.home-page #home-box a.nm { display: inline-block; padding: 8px 0; margin: -8px 0; transition: color .2s ease, transform var(--c-d-press) var(--c-e-press); }
.home-page .foot a { display: inline-block; padding: 12px 4px; margin: -12px 0; border-radius: 12px; transition: color .2s ease, background-color .2s ease, transform var(--c-d-press) var(--c-e-press); }

/* 可点件的悬停与按下反馈（r1 S2）：悬停换底或换色，按下缩到 .97（design.md §9.6） */
.home-page .ticker-control { transition: background-color .2s ease, transform var(--c-d-press) var(--c-e-press); }
.home-page .ticker-control:hover { background: var(--tray) !important; }
.home-page .ticker-control:active { transform: scale(.97); }
.home-page #home-box tr[data-href] { cursor: pointer; }
.home-page #home-box tr[data-href] > td { transition: background-color .2s ease; }
.home-page #home-box tr[data-href]:hover > td { background: var(--tray); }
.home-page #home-box tr[data-href]:active > td { background: var(--track) !important; } /* ruvo-c.css 的 .vt tbody tr:hover td 带 !important，按下（鼠标仍在行上）时会被它压住；两边都 important 时本选择器带 id，权重更高（r2 S1） */
.home-page #home-box a.nm:hover { color: var(--sky-text); text-decoration: underline; text-underline-offset: 3px; }
.home-page #home-box a.nm:active { transform: scale(.97); }
.home-page #home-x-line a, .hm-dnote a { padding: 0 8px; border-radius: 999px; transition: background-color .2s ease, transform var(--c-d-press) var(--c-e-press); }
.home-page #home-x-line a:hover, .hm-dnote a:hover { background: var(--tray); }
.home-page #home-x-line a:active, .hm-dnote a:active { transform: scale(.97); }
.home-page .foot a:hover { background: var(--tray); }
.home-page .foot a:active { transform: scale(.97); }

/* ───────────── 5. 窄屏 ───────────── */
@media (max-width: 1240px) {
  .hm-bar { flex-wrap: wrap; border-radius: var(--r-lg); }
  .hm-grow { flex-basis: 0; }
  .hm-bar > .hm-anchor:last-child { margin-left: auto; } /* 换行后 ⓘ／プロ 托盘仍靠右（r2 M1） */
}
@media (max-width: 1100px) {
  .hm-row.is-lead { grid-template-columns: 28px 72px minmax(0, 1fr) 20px; }
  .hm-row.is-lead .hm-tilt { width: 72px; }
  .hm-row.is-lead .hm-duo { display: none; }
}
@media (max-width: 900px) {
  .hm-boards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hm-panel::after { display: none; }
}
@media (max-width: 760px) {
  .hm-top { margin-top: 12px; }
  .hm-bar { padding: 8px; gap: 8px; }
  .hm-tray { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .hm-tray::-webkit-scrollbar { display: none; }
  .hm-games { width: 100%; overflow: visible; }
  .hm-games > button, .hm-games > button[data-value] { flex: 1 1 0; width: auto; min-width: 0; padding: 0 2px; } /* 四个 logo 在 390 宽里不横滑 */
  .hm-games > button img, .hm-games > button[data-value="yugioh"] img { max-width: 100%; }
  .hm-games > button[data-value="pokemon"] img { width: 80px; }
  .hm-grow { display: none; }
  .hm-row { grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 10px; }
  .hm-row .hm-go { display: none; }
  .hm-row.is-lead { grid-template-columns: 24px 72px minmax(0, 1fr); }
  .hm-lead-px .hm-px { font-size: 32px; }
  .hm-pop.is-range { width: min(420px, calc(100vw - 48px)); }
  .hm-pop.is-info { width: min(360px, calc(100vw - 48px)); right: auto; left: 0; }
  .hm-panel:not(.is-expanded) ol.hm-rows > li:nth-child(n+6) { display: none; }
  .hm-more-btn { display: inline-flex; }
  .hm-top [data-tip]::after, .hm-boards [data-tip]::after { display: none; } /* 手机没有悬停；名称都在 aria-label 里 */
}

/* ───────────── 6. 减少动效与 ?still：全停，只留颜色变化 ───────────── */
@media (prefers-reduced-motion: reduce) {
  .hm-tray > button, .hm-ibtn, .hm-chipimg, .hm-row, .hm-all, .hm-lnk, .hm-why, .hm-news a, .hm-rs-thumb, .hm-pbtn .chev, .hm-prosw-slot .c-prosw, .hm-prosw-slot .c-pro-trk i, .hm-prosw-slot .c-prosw .c-pro-trk, .hm-go, .hm-top [data-tip]::after, .hm-boards [data-tip]::after { transition: none !important; }
  .hm-row:hover, .hm-all:hover, .hm-news a:hover, .hm-rs-thumb:hover, .hm-lnk:hover .ic { transform: none !important; }
  .hm-tilt { transform: none !important; }
  .home-page .ticker-control, .home-page #home-box a.nm, .home-page #home-box tr[data-href] > td, .home-page #home-x-line a, .hm-dnote a, .home-page .foot a { transition: none !important; }
  .home-page .ticker-control:active, .home-page #home-box a.nm:active, .home-page #home-x-line a:active, .hm-dnote a:active, .home-page .foot a:active { transform: none !important; }
}
html.c-still .hm-tray > button, html.c-still .hm-ibtn, html.c-still .hm-chipimg, html.c-still .hm-row, html.c-still .hm-all, html.c-still .hm-lnk, html.c-still .hm-why,
html.c-still .hm-news a, html.c-still .hm-rs-thumb, html.c-still .hm-pbtn .chev, html.c-still .hm-prosw-slot .c-prosw, html.c-still .hm-prosw-slot .c-pro-trk i,
html.c-still .hm-go, html.c-still .hm-prosw-slot .c-prosw .c-pro-trk { transition: none !important; } /* 箭头淡入与开关轨道变色：?still 时也不动（r2 S2） */
html.c-still .hm-row:hover, html.c-still .hm-all:hover, html.c-still .hm-news a:hover, html.c-still .hm-rs-thumb:hover { transform: none !important; }
html.c-still .hm-tilt { transform: none !important; }
html.c-still .home-page .ticker-control, html.c-still .home-page #home-box a.nm, html.c-still .home-page #home-box tr[data-href] > td, html.c-still .home-page #home-x-line a, html.c-still .hm-dnote a, html.c-still .home-page .foot a { transition: none !important; }
html.c-still .home-page .ticker-control:active, html.c-still .home-page #home-box a.nm:active, html.c-still .home-page #home-x-line a:active, html.c-still .hm-dnote a:active, html.c-still .home-page .foot a:active { transform: none !important; }
html.c-still .ticker-track { animation: none !important; } /* ?still：ティッカーの流れも止める（r1 S6） */
html.c-still .hm-top [data-tip]::after, html.c-still .hm-boards [data-tip]::after { transition: none !important; } /* 悬停提示的淡入（点按钮时鼠标正停在上面）：?still 时也不动（r1 S6） */

/* S7: 買取水準の推移が平線のとき、折れ線の代わりに 1 行の文。下半区块のカードも看板と同じ角丸・余白に寄せる */
.home-page .trend-card { padding: 24px 24px 20px; }
.home-page .trend-flat { margin: 12px 0 4px; font-size: 14px; line-height: 1.6; font-weight: 700; color: var(--text-2); }

/* M1: 1366×768 这类矮屏，第 5 行要露满：筛选条上沿与榜单上沿各收 4px（1440×900 不受影响） */
@media (max-height: 800px) and (min-width: 1101px) {
  .hm-top { margin-top: 12px; }
  #today-mv-grid { margin-top: -4px; }
}

/* T23 · M3 本日. All new presentation is phone-only; desktop rules above stay intact. */
@media (max-width:767px) {
  html.m-shell .home-page #home-filters { display:none; }
  html.m-shell .home-page .hm-top { margin:0; }
  html.m-shell .home-page .hm-dnote { margin:8px 0; overflow-wrap:anywhere; }
  html.m-shell .home-page .hm-dnote .hm-seg-t { white-space:normal; }
  html.m-shell .home-page main > .shell:first-child { padding-top:12px !important; }
  .m-home-showcase { position:relative; padding:12px 20px 24px; border-radius:32px; background:var(--panel); box-shadow:var(--shadow-1); }
  .m-home-stage { position:relative; height:214px; display:grid; place-items:center; perspective:900px; }
  .m-home-object { position:relative; z-index:1; width:128px; height:180px; transform-style:preserve-3d; touch-action:pan-y; }
  .m-home-object img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 14px var(--hm-drop)); }
  .m-home-object.is-box { width:170px; height:180px; }
  .m-home-glare { position:absolute; inset:0; background:radial-gradient(circle at var(--gx,50%) var(--gy,40%),var(--hi),transparent 65%); opacity:.16; pointer-events:none; border-radius:8px; }
  .m-home-pedestal { position:absolute; bottom:8px; width:214px; height:26px; border-radius:50%; background:linear-gradient(var(--tray),var(--track)); box-shadow:0 8px 12px -6px var(--hm-drop); }
  .m-home-label h2 { margin:8px 0 0; font:900 22px/1.4 var(--f-jp); overflow-wrap:anywhere; }
  .m-home-price { margin:6px 0; font:900 56px/1.12 var(--f-num); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
  .m-home-basis { margin:0 44px 10px 0; font:500 13px/1.6 var(--f-jp); color:var(--text-3); }
  .m-home-change { display:inline-flex; padding:6px 12px; border-radius:999px; font:700 15px/1.2 var(--f-num); background:var(--up-wash); color:var(--up-text); }
  .m-home-evidence { margin-top:16px; font-size:13px; line-height:1.7; color:var(--text-2); overflow-wrap:anywhere; }
  .m-home-open { position:absolute; right:16px; bottom:24px; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--lemon); color:var(--sticker-ink); box-shadow:var(--shadow-1); }
  .m-home-tools { display:flex; align-items:center; gap:8px; margin:24px 0 8px; }
  .m-home-segments { display:flex; gap:4px; padding:4px; background:var(--tray); border-radius:999px; margin-right:auto; }
  .m-home-tools button { min-width:44px; height:44px; border:0; border-radius:999px; background:var(--tray); color:var(--text-2); font:700 16px/1 var(--f-jp); display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .m-home-segments button { padding:0 16px; background:transparent; }
  .m-home-segments .is-on { background:var(--plate); color:var(--plate-ink); }
  .m-home-segments .is-on:first-child { --ic-fill:var(--lemon); }
  .m-home-summary { margin:0 0 12px; font:500 13px/1.6 var(--f-jp); color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html.m-shell .home-page #today-mv-grid { display:block; margin:0 0 16px; }
  html.m-shell #today-mv-grid[data-m-direction="up"] > [data-direction="down"], html.m-shell #today-mv-grid[data-m-direction="down"] > [data-direction="up"] { display:none; }
  html.m-shell .home-page .hm-panel { padding:0; background:transparent; box-shadow:none; border-radius:0; }
  html.m-shell .home-page .hm-panel::after, html.m-shell #today-mv-grid .hm-ph { display:none; }
  html.m-shell .home-page .hm-row, html.m-shell .home-page .hm-row.is-lead { display:grid; grid-template-columns:22px 56px minmax(0,1fr); gap:10px; padding:10px 0; min-height:98px; border-radius:16px; border-bottom:1px solid var(--line); background:transparent; box-shadow:none; }
  html.m-shell .home-page .hm-row .hm-rk { grid-column:1; grid-row:1 / 3; font-size:13px; }
  html.m-shell .home-page .hm-row .hm-thw, html.m-shell .home-page .hm-row .hm-tilt { grid-column:2; grid-row:1 / 3; width:56px; height:78px; margin:0; align-self:center; }
  html.m-shell .home-page .hm-row .hm-th { width:56px; height:78px; object-fit:contain; }
  html.m-shell .home-page .hm-row .hm-tilt img { width:56px; height:78px; object-fit:contain; }
  html.m-shell .home-page .hm-main { grid-column:3; grid-row:1; }
  html.m-shell .home-page .hm-row .hm-nm { display:block; }
  html.m-shell .home-page .hm-row .hm-hit { display:block; font-size:16px; white-space:normal; line-height:1.4; overflow-wrap:anywhere; }
  html.m-shell .home-page .hm-row .stk { display:inline-flex; margin:0 4px 4px 0; }
  html.m-shell .home-page .hm-row .hm-var { flex-wrap:wrap; white-space:normal; font-size:13px; gap:4px; }
  html.m-shell .home-page .hm-row .hm-num { grid-column:3; grid-row:2; align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:8px; }
  html.m-shell .home-page .hm-row .hm-px, html.m-shell .home-page .hm-row.is-lead .hm-px { font-size:22px; }
  html.m-shell .home-page .hm-row .hm-lead-px { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  html.m-shell .home-page .hm-row .hm-duo, html.m-shell .home-page .hm-row .hm-go { display:none; }
  html.m-shell .home-page .hm-why { min-height:44px; min-width:44px; }
  html.m-shell .home-page .hm-row .hm-chg { font-size:14px; min-height:28px; }
  html.m-shell .home-page .hm-meta, html.m-shell .home-page .hm-trail, html.m-shell .home-page .hm-sub { font-size:13px; white-space:normal; flex-wrap:wrap; }
  html.m-shell .home-page .hm-boards { grid-template-columns:1fr; gap:16px; }
  html.m-shell .home-page .hm-all, html.m-shell .home-page .hm-more-btn { min-width:44px; min-height:44px; }
  html.m-shell .home-page .hm-more-btn { display:block; }
  html.m-shell .home-page .hm-news a { display:flex; width:100%; height:56px; padding:0 20px; font-size:16px; justify-content:space-between; }
  html.m-shell .home-page .m-home-fold { margin:12px auto; width:calc(100% - 32px); border-bottom:1px solid var(--line); }
  html.m-shell .home-page .shell .m-home-fold { width:100%; }
  .m-home-fold > summary { min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:8px; list-style:none; font:700 16px/1.5 var(--f-jp); color:var(--text-1); cursor:pointer; }
  .m-home-fold > summary::after { content:'+'; font-size:22px; }
  .m-home-fold[open] > summary::after { content:'−'; }
  .m-home-fold > summary::-webkit-details-marker { display:none; }
  html.m-shell .home-page .m-home-fold .sec { margin:12px 0; flex-wrap:wrap; }
  html.m-shell .home-page .m-home-fold .sec h2 { font-size:20px; }
  html.m-shell .home-page .m-home-fold .sec-kicker { display:none; }
  html.m-shell .home-page .ticker { width:100%; }
  html.m-shell .home-page .ticker-control, html.m-shell .home-page .sec a.more, html.m-shell .home-page #home-x-line :is(a,button) { min-height:44px; }
  html.m-shell .home-page .idx-home-top { display:block; }
  html.m-shell .home-page .idx-home-sub { grid-template-columns:1fr; }
  html.m-shell .home-page .table-wrap { max-width:100%; overflow-x:auto; background:linear-gradient(90deg,transparent,var(--panel)) right / 24px 100% no-repeat; }
  html.m-shell .home-page .table-wrap .vt { min-width:640px; }
  .m-home-report { display:flex; min-height:48px; align-items:center; justify-content:space-between; font:700 15px/1.5 var(--f-jp); color:var(--text-1); }
  .m-home-sheet fieldset { border:0; margin:0 0 20px; padding:0; min-width:0; }
  .m-home-sheet legend { margin-bottom:10px; font:700 16px/1.5 var(--f-jp); color:var(--text-1); }
  .m-home-kind { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .m-home-kind button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:76px; padding:8px 0; }
  .m-home-sheet button { border:1px solid var(--line-strong); border-radius:16px; background:var(--tray); color:var(--text-1); font:700 13px/1.4 var(--f-jp); cursor:pointer; }
  .m-home-sheet button[aria-pressed="true"] { background:var(--lemon-wash); border-color:var(--lemon-deep); color:var(--lemon-text); }
  .m-home-sort { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .m-home-sort button { min-height:48px; padding:8px; }
  .m-home-range-value { margin:0 0 12px; font:900 28px/1.2 var(--f-num); }
  .m-home-sheet label { display:flex; align-items:center; gap:12px; min-height:44px; font-size:13px; white-space:nowrap; }
  .m-home-sheet input[type="range"] { min-height:44px; width:100%; accent-color:var(--lemon-deep); }
  .m-home-range-note, .m-home-count { font-size:13px; color:var(--text-3); }
  .m-home-sheet .rs-foot { display:flex; gap:12px; }
  .m-home-sheet .m-home-reset { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; flex:none; }
  .m-home-sheet .m-home-apply { flex:1; min-height:56px; border-radius:999px; background:var(--lemon); color:var(--sticker-ink); font-size:16px; }
  .m-home-info { display:grid; grid-template-columns:24px 1fr; gap:12px; font-size:14px; line-height:1.7; }
  .m-home-info dd { margin:0; }
  .m-home-info .ic { width:22px; height:22px; }
  .m-home-tools button, .m-home-open, .m-home-sheet button, .m-home-fold > summary, .m-home-report { transition:transform var(--c-d-press) var(--c-e-press); }
  .m-home-tools button:active, .m-home-open:active, .m-home-sheet button:active, .m-home-fold > summary:active, .m-home-report:active { transform:scale(.96); }
  html.c-still :is(.m-home-tools button,.m-home-open,.m-home-sheet button,.m-home-fold > summary,.m-home-report) { transition:none; transform:none; }
  @media (prefers-reduced-motion:reduce) { :is(.m-home-tools button,.m-home-open,.m-home-sheet button,.m-home-fold > summary,.m-home-report) { transition:none; transform:none; } }
}
@media(max-width:767px) {
  html.m-shell .home-page :is(.foot a,.m-home-fold button,.m-home-fold a,.hm-dnote a) { min-height:44px !important; min-width:44px !important; }
  html.m-shell .home-page .foot a { display:inline-flex; align-items:center; }
  html.m-shell .home-page .hm-why-body { grid-column:1 / -1; font-size:13px; overflow-wrap:anywhere; }
}
@media(max-width:767px) {
  html.m-shell .home-page .table-wrap {
    background:linear-gradient(90deg,var(--panel) 30%,transparent) left / 32px 100% no-repeat local,
      linear-gradient(270deg,var(--panel) 30%,transparent) right / 32px 100% no-repeat local,
      linear-gradient(90deg,var(--track),transparent) left / 20px 100% no-repeat scroll,
      linear-gradient(270deg,var(--track),transparent) right / 20px 100% no-repeat scroll !important;
  }
  html.m-shell .home-page .table-wrap::before { content:'横にスクロール →'; display:block !important; opacity:1 !important; position:sticky; inset:auto; left:0; width:max-content; height:auto; background:none; padding:8px 12px; font:500 13px/1.5 var(--f-jp); color:var(--text-3); pointer-events:none; transition:none; }
}

/* T23 review r1: hit-tested tables, first-screen news, compact disclosures. */
@media(max-width:767px) {
  html.m-shell .home-page .vt :is(th,td):first-child { position:static !important; }
  .m-home-hit { position:absolute; inset:0; z-index:2; border-radius:inherit; }
  .m-home-open { z-index:3; }
  .m-home-showcase { transition:transform var(--c-d-press) var(--c-e-press); }
  .m-home-showcase:has(a:active) { transform:scale(.97); transition-duration:60ms; }
  .m-home-showcase.is-empty { min-height:96px; padding:16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .m-home-showcase.is-empty p { margin:0; font-size:14px; }
  .m-home-showcase.is-empty a { display:flex; align-items:center; gap:8px; min-height:44px; font-size:13px; }
  .m-home-evidence { padding-right:64px; }
  .m-home-glare { opacity:0; transition:opacity 120ms var(--c-e-press); }
  .m-home-object.active .m-home-glare { opacity:.16; }
  .m-home-object.is-box { width:220px; height:200px; }
  html.m-shell .home-page #home-events-link { margin:12px 0 0; }
  html.m-shell .home-page #home-events-link a { height:56px; border-radius:999px; }
  .m-home-tools { margin-top:12px; }
  .m-home-summary { width:100%; text-align:left; min-height:44px; padding:8px 0; border:0; background:transparent; cursor:pointer; }
  html.m-shell .home-page .hm-row { border-radius:0; }
  html.m-shell .home-page .hm-var-t + .hm-var-rel::before { content:none; }
  html.m-shell .home-page .hm-var { gap:8px; }
  .m-home-fold > summary::after { content:none; }
  .m-home-fold > summary > span { flex:1; min-width:0; padding:12px 0; }
  .m-home-fold > summary b { display:block; font:700 16px/1.5 var(--f-jp); }
  .m-home-fold > summary small { display:block; font:500 13px/1.5 var(--f-num); color:var(--text-3); }
  .m-home-fold > summary > .ic:last-child { transition:transform var(--c-d-press) var(--c-e-press); }
  .m-home-fold[open] > summary > .ic:last-child { transform:rotate(180deg); }
  html.m-shell .home-page .m-home-fold .sec { flex-direction:column; align-items:flex-start; gap:8px; }
  html.m-shell .home-page .m-home-fold .sec h2 { display:none; }
  .m-home-sort button { display:flex; align-items:center; gap:6px; justify-content:center; }
  .m-home-sort .ic { width:20px; height:20px; flex:none; }
  .m-home-sheet input[type=range] { appearance:none; background:transparent; margin:0; cursor:pointer; }
  .m-home-sheet input[type=range]::-webkit-slider-runnable-track { height:6px; border-radius:999px; background:var(--lemon-deep); }
  .m-home-sheet input[type=range]::-webkit-slider-thumb { appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:50%; background:var(--lemon); border:2px solid var(--lemon-text); }
  .m-home-sheet input[type=range]::-moz-range-track { height:6px; border-radius:999px; background:var(--lemon-deep); }
  .m-home-sheet input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--lemon); border:2px solid var(--lemon-text); }
  .m-home-range-ticks { display:flex; justify-content:space-between; margin-left:38px; font:500 13px/1.5 var(--f-num); color:var(--text-3); }
  .m-home-range-ticks span::before { content:''; display:block; width:2px; height:4px; margin:0 auto 4px; background:var(--line-strong); }
  .m-home-sheet .m-home-apply { display:flex; align-items:center; justify-content:center; gap:8px; }
  html.c-still :is(.m-home-showcase,.m-home-glare) { transition:none; transform:none; }
  html.c-still .m-home-fold > summary > .ic:last-child { transition:none; }
  @media(prefers-reduced-motion:reduce) {
    :is(.m-home-showcase,.m-home-glare,.m-home-fold > summary > .ic:last-child) { transition:none; }
    .m-home-object { transform:none !important; }
    .m-home-object .m-home-glare { opacity:0 !important; }
    .m-home-showcase:has(a:active) { transform:none; }
  }
}
@media(max-width:767px) {
  html.m-shell .home-page :is(.stk,.cd-l,.cd-g) { font-size:13px !important; }
  html.m-shell .home-page .vt th:nth-child(3) { display:table-cell !important; }
  html.m-shell body[data-view=pro] .home-page .vt .price-sub { display:block !important; }
}
@media(max-width:767px) {
  .m-home-object.is-box img { transform:scale(1.35); }
  .m-home-evidence .hm-conf { display:block; margin-top:6px; }
}
@media(max-width:767px) {
  .m-home-fold[open] > summary::after { content:none; }
}
@media(max-width:767px) {
  .m-home-tools, .m-home-summary { scroll-margin-top:calc(var(--m-top-h) + 12px); }
  .m-home-summary[hidden] { display:none !important; }
}
@media(max-width:375px) {
  .m-home-stage { height:180px; }
  .m-home-object:not(.is-box) { width:116px; height:160px; }
}

/* T23 review r2: first-visible prices, round-trip-safe phone details. */
@media(max-width:767px) {
  html.m-shell .home-page .hm-row.is-lead { border-radius:0; }
  html.m-shell .home-page .vt { --m-first-col:clamp(140px,40vw,172px); width:640px; table-layout:fixed; }
  html.m-shell .home-page .vt :is(th,td) { padding:12px 10px; white-space:normal; overflow-wrap:anywhere; }
  html.m-shell .home-page .vt :is(th,td):first-child { width:var(--m-first-col); max-width:46vw; }
  html.m-shell .home-page .vt :is(th,td):nth-child(2) { width:calc(400px - var(--m-first-col)); }
  html.m-shell .home-page .vt :is(th,td):nth-child(3) { width:160px; }
  html.m-shell .home-page .vt :is(th,td):nth-child(4) { width:80px; }
  html.m-shell .home-page .vt .pair { gap:8px; flex-direction:column; align-items:flex-start; }
  html.m-shell .home-page .vt .pair > div { min-width:0; }
  html.m-shell .home-page .vt .nm { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
  html.m-shell .home-page .vt :is(.thumb,.tbox) { flex:none; }
  html.m-shell .home-page .vt :is(th,td):nth-child(2) { text-align:left; }
  .m-home-change { align-items:center; gap:4px; }
  .m-home-change .ic, .m-home-inline-icon .ic { width:16px; height:16px; vertical-align:-2px; }
  .m-home-inline-icon { display:inline-flex; align-items:center; margin-right:4px; }
  .m-home-evidence .hm-ev-seg { display:block; }
  .m-home-same { display:block; margin-bottom:4px; font:500 13px/1.4 var(--f-jp); color:var(--text-3); }
  .m-home-range-ticks { position:relative; display:block; height:30px; margin-left:50px; margin-right:12px; }
  .m-home-range-ticks span { position:absolute; width:max-content; transform:translateX(-50%); }
  .m-home-range-ticks span:nth-child(1) { left:0; }
  .m-home-range-ticks span:nth-child(2) { left:calc(100% / 6); }
  .m-home-range-ticks span:nth-child(3) { left:calc(100% / 3); }
  .m-home-range-ticks span:nth-child(4) { left:50%; }
  .m-home-range-ticks span:nth-child(5) { left:calc(100% * 2 / 3); }
  .m-home-range-ticks span:nth-child(6) { left:calc(100% * 5 / 6); }
  .m-home-range-ticks span:nth-child(7) { left:100%; }
}