:root{
/* ═══════════════════════ RAW RAMPS（role の素材。直接使わない） ═══════════
warm（茶寄り）ニュートラル。冷たいグレー/インディゴは使わない。 */
--warm-0:#ffffff; /* カード面 */
--warm-50:#fbf6ee; /* cream 紙面 */
--warm-100:#f5ede1; /* 押下/淡面 */
--warm-150:#f0e6d8;
--warm-200:#efe7da; /* cream 上の hairline */
--warm-300:#e2d4c0; /* やや強い罫線 */
--warm-400:#b8a892; /* 微弱テキスト/装飾 */
--warm-500:#8c7c68;
--warm-600:#6e6253; /* warm muted */
--warm-700:#4d4337; /* secondary text */
--warm-800:#2a2118; /* warm near-black（本文） */
--warm-900:#1a140e;
/* warm orange accent — ブランド＆CTA */
--orange-50:#fff4ea;
--orange-100:#ffeedf; /* 淡い tint 面（buy 押下・accent-soft） */
--orange-200:#ffd9bd;
--orange-300:#ffbb8c;
--orange-400:#ff9a5a;
--orange-500:#ff7a33; /* ブランド primary（ポチ orange） */
--orange-600:#f2641b; /* 塗り/インク寄り */
--orange-700:#cc5114;
--orange-800:#a3400f; /* テキスト用の濃いオレンジ（AA 確保） */
/* trust green — 買い時/お得/節約 */
--green-50:#e4f6ed;
--green-100:#cfeedd;
--green-200:#a6e0c4;
--green-300:#6fcca2;
--green-400:#34b783;
--green-500:#16a36a; /* 買い時 green */
--green-600:#0e8857; /* テキスト/塗り */
--green-700:#0b6e46;
--green-800:#085536;
/* amber — points/caution（オレンジと混同しない色相） */
--amber-50:#fcf2dd;
--amber-100:#f7e3b9;
--amber-200:#eecf86;
--amber-400:#cc9420;
--amber-500:#a87916;
--amber-600:#8a6311;
/* danger */
--red-50:#fcebe8;
--red-100:#f7d4cd;
--red-500:#c5402e;
--red-600:#a2331f;
/* rakuten brand */
--rakuten:#bf0000;
/* info/links は warm パレットでは green-ink を基調に（青は使わない） */
--blue-50:var(--green-50);
--blue-100:var(--green-100);
--blue-500:var(--green-600);
--blue-700:var(--green-700);
/* ═══════════════════════ SEMANTIC COLOR ROLES（推奨・意味で使う） ═════════
surface/raised/sunken の面、text 三段、border 二段、accent/on-accent、
success/warning。コンポーネントはこの role 名を使う。 */
/* SURFACES */
--surface:var(--warm-50); /* ページ地（cream 紙面） */
--surface-raised:var(--warm-0); /* カード/持ち上がった面（白） */
--surface-sunken:var(--warm-100);/* 押下/沈んだ面・薄パネル */
--surface-tint:#fffdfa; /* ごく淡い暖色の内パネル面 */
/* TEXT */
--text:var(--warm-800); /* 本文・主見出し */
--text-secondary:var(--warm-700);/* 補助見出し・サブ */
--text-tertiary:var(--warm-600); /* muted・メタ */
--text-faint:var(--warm-400); /* 装飾・極小ラベル */
/* BORDERS */
--border-subtle:var(--warm-200); /* cream 上の hairline */
--border-strong:var(--warm-300); /* section 区切り等の強め罫線 */
/* ACCENT / STATE */
--accent:var(--orange-500);
--accent-strong:var(--orange-600);
--accent-ink:var(--orange-800); /* テキスト/リンク：AA を満たす濃いオレンジ */
--accent-tint-1:var(--orange-50);/* 最も淡い tint（押下面） */
--accent-tint-2:var(--orange-100);
--on-accent:#ffffff; /* accent 塗りの上の文字 */
--success:var(--green-600);
--success-tint:var(--green-50);
--warning:var(--amber-600);
--warning-tint:var(--amber-50);
--danger:var(--red-500);
--danger-tint:var(--red-50);
/* ═══════════════════════ BRAND ═══════════════════════════════════════════
warm orange を主に、trust green を副に。Logo は抽象/幾何（マスコット無し）。 */
--c-brand:var(--orange-500);
--c-brand-ink:var(--orange-700);
--c-brand-accent:var(--green-500);
/* ═══════════════════════ ACCENT tints / gradients ════════════════════════
editorial = 控えめ。グラデは hero/CTA など要所のみ。 */
--grad-accent:linear-gradient(135deg,var(--orange-500) 0%,var(--orange-600) 100%);
--grad-hero:linear-gradient(170deg,#fffdfa 0%,#fff6ec 100%);
--grad-buy:linear-gradient(135deg,var(--orange-50) 0%,var(--orange-100) 100%);
--grad-wait:linear-gradient(135deg,var(--amber-50) 0%,#f7e8c6 100%);
--grad-hold:linear-gradient(135deg,var(--warm-50) 0%,var(--warm-100) 100%);
/* ═══════════════════════ LEGACY aliases（旧名・絶対に維持） ═══════════════
既存 cssSource.ts / app.css / JSX / テストが依存。値だけ新 role/ramp へ束ねる。 */
--c-accent:var(--accent);
--c-accent-d:var(--accent-strong);
--c-accent-ink:var(--accent-ink);
--c-border:var(--border-subtle);
--c-surface:var(--surface-raised);
--c-on-accent:var(--on-accent);
--accent-tint:var(--orange-100);
--c-bg:var(--surface);
--c-card:var(--surface-raised);
--c-text:var(--text);
--c-sub:var(--text-secondary);
--c-muted:var(--text-tertiary);
--c-primary:var(--accent);
--c-primary-d:var(--accent-strong);
--c-ok:var(--success);
--c-warn:var(--warning);
--c-danger:var(--danger);
--c-line:var(--border-subtle);
--surf-0:var(--surface-raised);
--surf-1:var(--surface-tint);
--surf-2:var(--surface-sunken);
--ok-soft:var(--success-tint);
--warn-soft:var(--warning-tint);
--info-soft:var(--green-50);
/* ═══════════════════════ RADIUS scale（意図ある値） ══════════════════════
xs=8 chips/小要素 / sm=10 入力・notice / md=12 control(btn) / lg=16 card /
xl=20 hero / pill。--r は旧名 alias（=md）。 */
--r-xs:8px;
--r-sm:10px;
--r-md:12px;
--r-lg:16px;
--r-xl:20px;
--r-pill:999px;
--r:var(--r-md); /* 旧名 alias（control 標準） */
/* ═══════════════════════ ELEVATION ladder（warm・低不透明度・editorial） ══
0=なし / 1=rest（カード静止） / 2=raised（持ち上がり・特例行） /
3=overlay（sticky/シート）。accent=CTA の warm glow。focus-ring=A11y。 */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(42,33,24,.05), 0 1px 1px rgba(42,33,24,.04);
--shadow-2:0 2px 6px -2px rgba(42,33,24,.08), 0 8px 24px -10px rgba(42,33,24,.12);
--shadow-3:0 4px 12px -4px rgba(42,33,24,.10), 0 18px 40px -14px rgba(42,33,24,.18);
--shadow-accent:0 6px 18px -8px rgba(242,100,27,.42);
--focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
/* 旧名 alias（既存モジュールが参照） */
--shadow-xs:var(--shadow-1);
--shadow-sm:var(--shadow-1);
--shadow-md:var(--shadow-2);
--shadow-lg:var(--shadow-3);
--e1:var(--shadow-1);
--e2:var(--shadow-2);
/* ═══════════════════════ SPACING scale（strict 4pt） ═════════════════════*/
--sp-1:4px;
--sp-2:8px;
--sp-3:12px;
--sp-4:16px;
--sp-5:24px;
--sp-6:32px;
--sp-7:48px;
--gap:16px; /* 旧名 alias（=sp-4） */
/* ═══════════════════════ TYPE scale（size と line-height と weight を対で） ═
階層は size+weight で作る（箱でなく）。JP 本文は 1.5-1.7、見出しは詰める。 */
--fs-xs:11px; --lh-xs:1.45;
--fs-sm:13px; --lh-sm:1.5;
--fs-base:16px; --lh-base:1.6; /* 本文・入力（iOS ズーム防止の下限） */
--fs-md:18px; --lh-md:1.4;
--fs-lg:22px; --lh-lg:1.3;
--fs-xl:28px; --lh-xl:1.2;
--fs-2xl:34px; --lh-2xl:1.1;
--fs-3xl:46px; --lh-3xl:1.0; /* GIANT price（Verdict hero の焦点） */
--fw-reg:400;
--fw-med:600;
--fw-bold:700;
--fw-black:800;
--lh-tight:1.1;
--lh-snug:1.35;
--tracking-tight:-.02em; /* 大見出し（Latin/数字向け・JP には当てない） */
--font-sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Segoe UI",sans-serif;
/* ═══════════════════════ MOTION tokens ═══════════════════════════════════*/
--ease:cubic-bezier(.2,.7,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur-fast:140ms;
--dur:200ms;
--dur-slow:220ms;
--press-scale:.97;
}
/* ===========================================================================
BASE / RESET
=========================================================================== */
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--text);
font-family:var(--font-sans);
line-height:var(--lh-base);font-size:var(--fs-base);-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
/* タブ数字は等幅で桁ゆれを防ぐ（価格用ヘルパ・lining も明示） */
.tnum{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}
/* スクリーンリーダー専用（不可視・読み上げ可） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* モバイル幅 600px のセンタリングコンテナ。下部は固定CTA分の余白。 */
.app-main{max-width:600px;margin:0 auto;padding:0 16px 96px}
/* VC計測ピクセル（不可視・サイズ/不透明度は厳守） */
.vc-pixel{position:absolute;width:1px;height:1px;opacity:0}
/* ===========================================================================
MOTION — reduced-motion ガード（非自明なモーションは必ず停止）
=========================================================================== */
@media (prefers-reduced-motion: reduce){
*{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}
/* ===========================================================================
PRIMITIVE — BUTTONS
SIZE SYSTEM : sm=36px / md=44px(base) / lg=48px。padding と height で決める。
STATE : default / hover / active(press-scale) / focus-visible(ring) / disabled。
USAGE :
.btn--primary hero/page の単独 CTA。フル幅・48px・accent 塗り・shadow-accent。
.btn--push 通知購読など push 系の単独 CTA。primary と同寸（=lg）。
.btn--buy 行内の購入（per-row）。COMPACT な tonal secondary。フル幅にしない。
.btn--ghost 破壊的でない補助操作。塗り/枠なし。
.btn--report 通報など極控えめな小操作。36px・pill・sm。
editorial：通常は hairline 罫線の白ボタン、CTA のみ warm orange 塗り。
=========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
min-height:44px;padding:0 var(--sp-4);
border-radius:var(--r-md);border:1px solid var(--border-subtle);background:var(--surface-raised);
color:var(--text);font-size:15px;font-weight:var(--fw-med);font-family:inherit;
line-height:1;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
user-select:none}
.btn svg{flex:0 0 auto}
@media (prefers-reduced-motion: no-preference){
.btn{transition:background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease),
opacity var(--dur-fast) var(--ease)}
}
.btn:hover{background:var(--surface-sunken);border-color:var(--border-strong)}
.btn:active{transform:scale(var(--press-scale))}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* primary — フル幅・48px（lg）・warm orange 塗り・hero CTA */
.btn--primary{background:var(--grad-accent);border-color:transparent;color:var(--on-accent);
font-weight:var(--fw-bold);width:100%;min-height:48px;padding:0 var(--sp-5);
box-shadow:var(--shadow-accent)}
.btn--primary:hover{background:var(--accent-strong);border-color:transparent;
box-shadow:var(--shadow-accent), var(--shadow-2)}
.btn--primary:active{box-shadow:var(--shadow-1)}
/* push — primary と同等（lg・フル幅・accent 塗り） */
.btn--push{background:var(--grad-accent);border-color:transparent;color:var(--on-accent);
font-weight:var(--fw-bold);width:100%;min-height:48px;padding:0 var(--sp-5);
box-shadow:var(--shadow-accent)}
.btn--push:hover{background:var(--accent-strong);border-color:transparent;
box-shadow:var(--shadow-accent), var(--shadow-2)}
.btn--push:active{box-shadow:var(--shadow-1)}
/* buy — 行内の購入：COMPACT tonal secondary。accent tint 面＋濃オレンジ文字＋細枠。
md(44px)・幅は内容に合わせる（フル幅にしない）。確信はあるが行の主役（価格）は奪わない。 */
.btn--buy{background:var(--accent-tint-1);border-color:var(--orange-200);color:var(--accent-ink);
font-weight:var(--fw-bold);min-height:44px;padding:0 var(--sp-4);box-shadow:var(--shadow-0)}
.btn--buy:hover{background:var(--accent-tint-2);border-color:var(--orange-300)}
.btn--buy:active{background:var(--orange-200)}
/* ghost — 透明・罫線なし（補助操作） */
.btn--ghost{background:transparent;border-color:transparent;color:var(--accent-ink)}
.btn--ghost:hover{background:var(--surface-sunken);border-color:transparent}
.btn--ghost:active{background:var(--surface-sunken)}
/* report — 注意（極控えめ）小ボタン：sm(36px)・pill */
.btn--report{background:transparent;border-color:var(--border-subtle);color:var(--text-secondary);
font-size:13px;font-weight:var(--fw-med);min-height:36px;padding:0 var(--sp-3);border-radius:var(--r-pill)}
.btn--report:hover{background:var(--surface-sunken);border-color:var(--border-strong)}
.btn--report:active{background:var(--surface-sunken)}
.btn--report-subtle{border-style:dashed;color:var(--text-tertiary)}
/* disabled — 全 variant 共通。インタラクションを殺す。 */
button[disabled],.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;
pointer-events:none}
button[disabled]:active,.btn[disabled]:active{transform:none}
/* ===========================================================================
PRIMITIVE — CARD（raised surface：radius-lg・padding・shadow-1）
USAGE: 独立した内容の塊。LIST-ROW（hairline 行）とは使い分ける。
=========================================================================== */
.card{background:var(--surface-raised);border:1px solid var(--border-subtle);
border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-1)}
.card--flush{padding:0}
.card--tint{background:var(--surface-tint)}
/* ===========================================================================
PRIMITIVE — INPUTS（16px・comfortable height・refined border・clear focus）
=========================================================================== */
.search-input,
.input{width:100%;min-height:48px;padding:0 var(--sp-4);
background:var(--surface-raised);border:1px solid var(--border-strong);
border-radius:var(--r-sm);color:var(--text);
font-family:inherit;font-size:var(--fs-base);line-height:1.4;
-webkit-appearance:none;appearance:none}
.search-input::placeholder,.input::placeholder{color:var(--text-faint)}
@media (prefers-reduced-motion: no-preference){
.search-input,.input{transition:border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease)}
}
.search-input:hover,.input:hover{border-color:var(--text-faint)}
.search-input:focus,.input:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-tint-2)}
.search-input:disabled,.input:disabled{opacity:.5;cursor:not-allowed;background:var(--surface-sunken)}
/* ===========================================================================
PRIMITIVE — CHIP（操作可能な小タグ：フィルタ/属性。小さく静か・consistent）
variants: --trust（trust green）/ --attr（中立属性）。
=========================================================================== */
.chip{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:14px;font-weight:var(--fw-med);
padding:0 var(--sp-3);min-height:36px;border-radius:var(--r-pill);
background:var(--surface-raised);border:1px solid var(--border-subtle);color:var(--text);
text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.chip svg{flex:0 0 auto}
@media (prefers-reduced-motion: no-preference){
.chip{transition:background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease)}
}
.chip:hover{background:var(--surface-sunken);border-color:var(--border-strong)}
.chip:active{background:var(--accent-tint-1);border-color:var(--orange-200);transform:scale(var(--press-scale))}
.chip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.chip--trust{background:var(--success-tint);border-color:var(--green-100);color:var(--green-700)}
.chip--attr{background:var(--surface-sunken);border-color:transparent;color:var(--text-secondary)}
/* ===========================================================================
PRIMITIVE — BADGE（状態の表示のみ・操作不可。quiet・single-purpose・淡 tint＋濃文字）
=========================================================================== */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:12px;
padding:2px var(--sp-2);border-radius:var(--r-pill);font-weight:var(--fw-bold);line-height:1.4}
.badge svg{flex:0 0 auto}
.badge--ok{background:var(--success-tint);color:var(--green-700)}
.badge--warn{background:var(--warning-tint);color:var(--warning)}
.badge--muted{background:var(--surface-sunken);color:var(--text-tertiary);font-weight:var(--fw-med)}
/* ===========================================================================
PRIMITIVE — MALL LOGO（モール識別モノグラム・ が消費する base）
寸法/角丸/字面は MallLogos.tsx が inline で size 相対に与える（統一感維持）。
ここでは「白文字を中央に乗せた crisp なバッジ」の地のスタイルだけを担う。
ブランド色は component 側 literal（トークン化しない＝意図的）。
.s2-lead = 行 lead 領域（[mall logo + rank] を縦に積む任意ラッパ）。
=========================================================================== */
.mall-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
color:#fff;line-height:1;font-family:var(--font-sans);
text-align:center;overflow:hidden;-webkit-font-smoothing:antialiased;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.s2-lead{display:inline-flex;flex-direction:column;align-items:center;gap:var(--sp-1);
flex:0 0 auto;padding-top:2px}
/* ===========================================================================
PRIMITIVE — SECTION HEADER（eyebrow + title + trailing meta の rhythm）
editorial：size+weight で階層を作る（箱にしない）。
=========================================================================== */
.section-head{font-size:15px;font-weight:var(--fw-bold);margin:var(--sp-5) 0 var(--sp-2);
color:var(--text);letter-spacing:0}
/* リッチ版：eyebrow + title + meta を1行 baseline 揃えで。 */
.sec-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
margin:var(--sp-5) 0 var(--sp-2);padding-bottom:var(--sp-2);
border-bottom:1px solid var(--border-strong)}
.sec-header__group{display:flex;flex-direction:column;gap:2px;min-width:0}
.sec-header__eyebrow{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-tertiary);
letter-spacing:0;line-height:1}
.sec-header__title{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text);
line-height:var(--lh-snug);letter-spacing:0}
.sec-header__meta{flex:0 0 auto;font-size:var(--fs-sm);font-weight:var(--fw-med);
color:var(--text-tertiary);letter-spacing:0}
/* ===========================================================================
PRIMITIVE — GLOBAL CHROME（PRバー / ヘッダ / 戻る / ブランド / マイ）
editorial：cream 半透明・hairline 下罫線。重い塗りは避ける。
=========================================================================== */
.pr-bar{background:transparent;color:var(--text-faint);font-size:10px;line-height:1.4;
text-align:right;padding:3px var(--sp-4);border-bottom:1px solid var(--border-subtle)}
.page-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;
justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) 0;
background:color-mix(in srgb, var(--surface) 86%, transparent);
-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
border-bottom:1px solid var(--border-subtle)}
.back-link{display:inline-flex;align-items:center;gap:2px;min-height:44px;min-width:64px;
padding:0 var(--sp-1);font-size:15px;font-weight:var(--fw-med);color:var(--accent-ink);
text-decoration:none}
.back-link:hover{text-decoration:none}
/* ブランド（Logo + ワードマーク）。日本語にトラッキングを当てない。 */
.brand{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-black);
color:var(--text);text-decoration:none;line-height:1}
.brand:hover{text-decoration:none}
.brand-logo{display:inline-flex;flex:0 0 auto}
.brand-word{font-size:18px;font-weight:var(--fw-bold);letter-spacing:0}
.brand-title{font-size:15px;font-weight:var(--fw-bold);color:var(--text-secondary)}
.header-my{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;
min-height:44px;min-width:64px;padding:0 var(--sp-1);font-size:14px;font-weight:var(--fw-med);
color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.header-my:hover{text-decoration:none}
/* ===========================================================================
PRIMITIVE — NOTICE / STATE BLOCK
=========================================================================== */
.notice{padding:var(--sp-3) var(--sp-3);border-radius:var(--r-sm);margin:10px 0;
font-size:14px;line-height:1.6}
.notice--warn{background:var(--warning-tint);border:1px solid var(--amber-100);color:var(--warning)}
.state-block{text-align:center;padding:40px var(--sp-4);color:var(--text-secondary);line-height:1.7}
.state-block--error{color:var(--danger)}
.state-block--empty{color:var(--text-tertiary)}
/* ===========================================================================
PRIMITIVE — LEGAL / DISCLAIMER（控えめなインライン注記・派手な箱にしない）
editorial：warm hairline の左罫線＋muted ink。
=========================================================================== */
.legal-notice{display:flex;gap:var(--sp-2);align-items:flex-start;
background:transparent;border:0;border-left:3px solid var(--border-strong);
border-radius:0;padding:2px 0 2px var(--sp-3);font-size:12px;line-height:1.6;
color:var(--text-tertiary);margin:var(--sp-3) 0}
.legal-notice svg{flex:0 0 auto;margin-top:2px;color:var(--text-secondary)}
.sale-note{font-size:12px;color:var(--warning)}
.privacy-note{font-size:13px;color:var(--text-secondary);line-height:1.6}
/* ===========================================================================
PRIMITIVE — FOOTER
=========================================================================== */
.global-footer{margin-top:var(--sp-7);padding:var(--sp-5) 0 var(--sp-2);
border-top:1px solid var(--border-subtle);
font-size:12px;color:var(--text-tertiary);text-align:center;line-height:1.7}
.footer-note,.footer-credit,.footer-copy{margin:4px 0}
.footer-credit{color:var(--text-faint)}
.footer-links{display:flex;gap:18px;justify-content:center;margin:var(--sp-3) 0}
.footer-links a{color:var(--text-secondary);font-weight:var(--fw-med)}
/* ===========================================================================
PRIMITIVE — S2/S4 BREAKDOWN（内訳トグル・パネル）
editorial：hairline 区切りの3層。warm surf 面。
=========================================================================== */
.breakdown-toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
color:var(--accent-ink);font-size:14px;font-weight:var(--fw-med);padding:var(--sp-2) 0;
-webkit-tap-highlight-color:transparent;list-style:none}
.breakdown-toggle::-webkit-details-marker{display:none}
.breakdown-toggle::marker{content:""}
.breakdown-panel{background:var(--surface-tint);border:1px solid var(--border-subtle);
border-radius:var(--r-lg);padding:var(--sp-3);margin-top:var(--sp-2)}
.breakdown-list{list-style:none;padding:0;margin:0}
.breakdown-item{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:baseline;
padding:7px 0;font-size:14px;border-bottom:1px solid var(--warm-150)}
.breakdown-item:last-child{border-bottom:0}
.bd-head{display:inline-flex;align-items:center;gap:var(--sp-1);font-weight:var(--fw-bold);
min-width:56px;font-size:13px}
.bd-label{color:var(--text-secondary)}
.bd-amount{margin-left:auto;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums lining-nums}
.bd-note{flex-basis:100%;font-size:12px;color:var(--warning);line-height:1.5}
.entry-link{font-size:12px;font-weight:var(--fw-med);color:var(--accent-ink)}
.breakdown-foot,.breakdown-warn{display:flex;gap:6px;align-items:flex-start;
font-size:12px;line-height:1.5;margin:10px 0 0}
.breakdown-foot{color:var(--text-tertiary);border-top:1px solid var(--warm-150);padding-top:10px}
.breakdown-warn{color:var(--danger);margin:0 0 8px}
/* 内訳 tier（確度）別の見出し色 */
.tier--confirmed .bd-head{color:var(--green-700)}
.tier--conditional .bd-head{color:var(--warning)}
.tier--assumed .bd-head{color:var(--text-tertiary)}
/* ===========================================================================
PRIMITIVE — MATCH BADGE / REPORT
=========================================================================== */
.match-confirmed,.match-single{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.match-fuzzy{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.fuzzy-caution{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:13px;
color:var(--warning);line-height:1.4}
.report-form{margin:0}
.report-form--hidden,.report-form--subtle.report-form--hidden{display:none}
/* ===========================================================================
PRIMITIVE — SPECIAL ROWS（特例行：中古/Amazon/ヨドバシ 等）
raised surface（card 系）：warm surf 面＋hairline 罫線＋shadow-1。
=========================================================================== */
.special-row{background:var(--surface-tint);border:1px solid var(--border-subtle);
border-radius:var(--r-lg);padding:var(--sp-3);margin:var(--sp-2) 0;box-shadow:var(--shadow-1)}
.special-label{font-weight:var(--fw-bold);display:block;color:var(--text)}
.special-sub{font-size:13px;color:var(--text-secondary);display:block;margin-top:4px;line-height:1.5}
.special-links{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.special-links a{display:inline-flex;align-items:center;gap:5px;font-size:13px;
font-weight:var(--fw-med);color:var(--accent-ink)}
.special-note{display:block;font-size:11px;color:var(--text-tertiary);line-height:1.5;margin-top:6px}
/* ===========================================================================
RESPONSIVE — ウォッチCTAバー：min-width 600px で sticky→static
=========================================================================== */
@media (min-width:600px){
.watch-cta-bar{position:static}
}
/* ===========================================================================
S1 — HERO（トップ/検索のヒーロー）
editorial：抽象 ＋ワードマーク＋静かな eyebrow / タグライン。
ごく淡い warm グラデ面に hairline の下罫線。箱で囲わず余白で締める。
=========================================================================== */
.search-hero{
position:relative;
margin:var(--sp-3) calc(-1 * var(--sp-4)) 0;
padding:var(--sp-7) var(--sp-4) var(--sp-6);
text-align:center;
background:var(--grad-hero);
border-bottom:1px solid var(--c-border);
}
/* ブランド（Logo + ワードマーク + eyebrow）を中央に縦積み。JP にトラッキング無し。 */
.hero-brand{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--sp-2);
margin-bottom:var(--sp-4);
}
.hero-logo{
display:inline-flex;
}
@media (prefers-reduced-motion: no-preference){
.hero-logo{
animation:hero-logo-in var(--dur-slow) var(--ease-out) both;
}
@keyframes hero-logo-in{
from{opacity:0;transform:scale(.9) translateY(5px)}
to{opacity:1;transform:none}
}
}
/* タイトル：ワードマーク。日本語なので letter-spacing は当てない。 */
.hero-title{
margin:var(--sp-1) 0 0;
font-size:var(--fs-2xl);
font-weight:var(--fw-black);
line-height:var(--lh-tight);
color:var(--c-text);
letter-spacing:0;
}
/* eyebrow：小さな refined ラベル（Latin/数字でないので tracking は当てない）。 */
.hero-eyebrow{
margin:0;
font-size:var(--fs-xs);
font-weight:var(--fw-bold);
line-height:1.4;
color:var(--c-accent-ink);
letter-spacing:0;
}
/* タグライン：大きめ・読みやすい・落ち着いたサブ色。横幅を絞って締まりを出す。 */
.hero-tagline{
margin:0 auto;
max-width:22ch;
font-size:var(--fs-md);
font-weight:var(--fw-med);
line-height:var(--lh-snug);
color:var(--c-sub);
}
/* ===========================================================================
S1 — SEARCH FORM（単一入力フォーム / JS無効でも成立）
=========================================================================== */
.search-form{
margin:var(--sp-6) auto 0;
max-width:30rem;
}
/* 入力の外殻：先頭の検索アイコンと入力を一体化。フォーカスリングはここに出す。 */
.search-field{
position:relative;
display:flex;
align-items:center;
}
.search-field__icon{
position:absolute;
left:14px;
display:inline-flex;
align-items:center;
color:var(--c-muted);
pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
.search-field__icon{transition:color var(--dur-fast) var(--ease)}
}
/* 入力がフォーカスされたらアイコンも warm orange アクセント色に。 */
.search-field:focus-within .search-field__icon{color:var(--c-accent)}
/* 入力：font-size 16px 厳守（iOSズーム防止）。先頭アイコン分の左パディング。
ゆったり・大きめ角丸・ヘアライン罫線。フォーカスで warm orange のリングを明確に。 */
.search-input{
width:100%;
min-height:52px;
padding:14px 16px 14px 46px;
font-size:var(--fs-base); /* 16px：iOS自動ズーム防止のため固定 */
font-weight:var(--fw-med);
line-height:1.4;
color:var(--c-text);
background:var(--c-surface);
border:1px solid var(--c-border);
border-radius:var(--r-lg); /* card 寄りの大きめ角丸で hero に馴染ませる */
box-shadow:var(--shadow-sm);
-webkit-appearance:none;
appearance:none;
}
.search-input::placeholder{color:var(--c-muted)}
@media (prefers-reduced-motion: no-preference){
.search-input{
transition:border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
}
.search-input:focus{outline:none}
.search-input:focus-visible,
.search-input:focus{
border-color:var(--c-accent);
/* 明確なフォーカスリング（warm orange の淡い面 + アクセント枠） */
box-shadow:0 0 0 3px var(--accent-tint-2), var(--shadow-sm);
}
/* 送信ボタン：.btn .btn--primary を継承（48px / フル幅・warm orange グラデ）。 */
.search-submit{
margin-top:var(--sp-3);
}
/* 入力エラー（JSバリデーション時に表示）。デンジャー色・小さく。 */
.search-error{
margin:var(--sp-2) 0 0;
font-size:var(--fs-sm);
line-height:1.5;
color:var(--c-danger);
text-align:left;
}
/* ===========================================================================
S1 — HERO TRUST（対応モール＋登録不要の静かな1行）
hero を箱で埋めず、muted トーンの1行で網羅範囲と信頼の根拠を即提示する。
モールロゴは既存の モノグラム（他画面と完全に同形・同色）。
=========================================================================== */
.hero-trust{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:var(--sp-2);
margin:var(--sp-5) auto 0;
font-size:var(--fs-sm);
font-weight:var(--fw-med);
color:var(--c-muted);
letter-spacing:0;
}
.hero-trust__malls{display:inline-flex;align-items:center;gap:5px}
/* ===========================================================================
S1 — PREVIEW（実質価格の「見え方」を実例で示す帯）
S2 の署名 atoms（.eff-price / .cheapest-tag / .mall-logo）をそのまま流用し、
ここでは 2 行の demo カードの骨格だけを定義する（テイストを S2 と完全統一）。
初訪問者が一目で「検索すると何が出るか」を理解できる＝Aha の先出し。
=========================================================================== */
.lp-preview{margin-top:var(--sp-7)}
.lp-demo{
margin-top:var(--sp-3);
background:var(--c-surface);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
box-shadow:var(--shadow-1);
overflow:hidden;
}
.lp-demo-row{
display:flex;align-items:center;gap:var(--sp-3);
padding:var(--sp-4);
border-bottom:1px solid var(--c-border);
}
.lp-demo-row:last-child{border-bottom:0}
/* トップ行：ごく淡い trust tint で「いちばん安い」を持ち上げる（S2 の --top に対応）。 */
.lp-demo-row--top{background:linear-gradient(180deg,var(--green-50) 0%,transparent 130%)}
.lp-demo-body{
flex:1 1 auto;min-width:0;
display:flex;flex-direction:column;align-items:flex-start;gap:5px;
}
.lp-demo-shop{
font-size:var(--fs-sm);font-weight:var(--fw-med);color:var(--c-text);
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lp-demo-meta{font-size:var(--fs-sm);color:var(--c-muted)}
/* デモ価格：トップ行のみ accent ink（S2 の .s2-row--top .eff-price 規則に対応）。 */
.lp-demo-row .eff-price{flex:0 0 auto}
.lp-demo-row--top .eff-price,
.lp-demo-row--top .eff-price__y{color:var(--c-accent-ink)}
.lp-demo-note{
margin:var(--sp-2) 0 0;
font-size:var(--fs-xs);color:var(--c-muted);line-height:1.5;
}
/* ===========================================================================
S1 — VALUE PROPS（できること）
editorial：重い塗りカードではなく、hairline で区切った ICON 行で価値を提示。
階層は eyebrow（小・muted）→ section head（大・bold）→ 罫線リストで作る。
=========================================================================== */
.value-props{
margin-top:var(--sp-7);
}
/* eyebrow：小さな refined ラベル。 */
.value-eyebrow{
margin:0 0 var(--sp-1);
font-size:var(--fs-xs);
font-weight:var(--fw-bold);
line-height:1.4;
color:var(--c-accent-ink);
letter-spacing:0;
}
/* section head：.section-head 基底（_tokens.ts）に上余白だけ詰める。 */
.value-head{
margin-top:0;
margin-bottom:var(--sp-4);
font-size:var(--fs-lg);
font-weight:var(--fw-bold);
line-height:var(--lh-snug);
color:var(--c-text);
}
/* リスト：上下を hairline で締めた editorial な行群（箱で囲わない）。 */
.value-rows{
list-style:none;
margin:0;
padding:0;
border-top:1px solid var(--c-border);
}
.value-row{
display:flex;
align-items:center;
gap:var(--sp-3);
padding:var(--sp-4) var(--sp-1);
border-bottom:1px solid var(--c-border);
}
/* アイコンチップ：warm orange の淡い tint 面に丸く収めた線アイコン。 */
.value-row__icon{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:var(--r-pill);
background:var(--accent-tint);
color:var(--c-accent-d);
}
.value-row__text{
flex:1 1 auto;
font-size:var(--fs-base);
font-weight:var(--fw-med);
line-height:var(--lh-snug);
color:var(--c-text);
text-align:left;
}
/* ===========================================================================
LEGAL — 規約・プライバシー（editorial 長文タイポグラフィ）
ゆったり行間、見出しの階層を SIZE+WEIGHT で明確に。eyebrow + lede の導入部、
見出し下の hairline、節見出し左の warm アクセントバー。リストは読みやすく字下げ。
=========================================================================== */
.legal{
padding:var(--sp-6) 0 var(--sp-3);
max-width:42rem;
margin:0 auto;
font-size:var(--fs-base);
line-height:var(--lh-base);
color:var(--c-text);
}
/* 導入部：タイトル → lede を一塊にし、下に hairline で区切る（冗長な eyebrow は置かない）。 */
.legal-head{
margin:0 0 var(--sp-5);
padding-bottom:var(--sp-4);
border-bottom:1px solid var(--c-border);
}
.legal-lede{
margin:var(--sp-2) 0 0;
font-size:var(--fs-md);
font-weight:var(--fw-med);
line-height:var(--lh-snug);
color:var(--c-sub);
}
/* 大見出し：editorial。導入部の hairline 区切りはヘッダ側で持つ。 */
.legal h1{
margin:0;
font-size:var(--fs-xl);
font-weight:var(--fw-black);
line-height:var(--lh-tight);
color:var(--c-text);
letter-spacing:0;
}
/* 節見出し：本文より一段強く、上に余白で区切る。左に warm orange のアクセントバー。 */
.legal h2{
margin:var(--sp-6) 0 var(--sp-2);
padding-left:var(--sp-3);
font-size:var(--fs-md);
font-weight:var(--fw-bold);
line-height:var(--lh-snug);
color:var(--c-text);
border-left:3px solid var(--c-accent);
letter-spacing:0;
}
/* 本文段落：落ち着いたサブ色寄りで長文を楽に読ませる。 */
.legal p{
margin:var(--sp-2) 0;
color:var(--c-sub);
}
.legal strong{color:var(--c-text);font-weight:var(--fw-bold)}
/* リスト：字下げ・項目間にゆとり。マーカーは warm orange。 */
.legal ul{
margin:var(--sp-2) 0;
padding-left:1.35em;
color:var(--c-sub);
}
.legal li{
margin:var(--sp-2) 0;
line-height:var(--lh-base);
}
.legal li::marker{color:var(--c-accent)}
/* ===========================================================================
RESPONSIVE — min-width:600px（タブレット以上で少しゆったり）
※ .watch-cta-bar の sticky→static は _tokens.ts 側で定義済み（重複定義しない）。
=========================================================================== */
@media (min-width:600px){
.search-hero{
padding-top:var(--sp-7);
padding-bottom:var(--sp-7);
border-radius:0 0 var(--r-xl) var(--r-xl);
}
}
/* ===========================================================================
VERDICT HERO — 主役。concept-B のエディトリアル: 余白・タイプ階層・巨大 tabular price。
concept-C の warm パレットで状態色を塗る（trust-green / amber / warm-neutral）。
=========================================================================== */
.verdict{
position:relative;
display:flex;
margin:var(--sp-4) 0 0;
border-radius:var(--r-xl);
background:var(--grad-hero);
border:1px solid var(--c-border);
box-shadow:var(--shadow-md);
overflow:hidden;
isolation:isolate;
}
@media (prefers-reduced-motion: no-preference){
.verdict{
animation:vd-rise var(--dur-slow) var(--ease-out) both;
}
@keyframes vd-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
/* 左の細いアクセント帯（状態色・editorial に控えめ） */
.vd-band{display:none}
.vd-body{
flex:1 1 auto;min-width:0;
display:flex;flex-direction:column;gap:var(--sp-1);
padding:var(--sp-4);
}
/* eyebrow 行（ドット＋グリフ＋小見出し）。concept-B の verdict-row を踏襲。 */
.vd-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1)}
.vd-eyebrow-dot{
flex:0 0 auto;width:7px;height:7px;border-radius:50%;
background:var(--c-accent);
box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent) 16%,transparent);
}
.vd-glyph{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
color:var(--c-accent);
}
.vd-eyebrow{
font-size:var(--fs-xs);font-weight:800;line-height:1.4;
color:var(--c-accent-ink);
}
/* 判定語（size+weight で階層・断定しない言い回しは JSX 側） */
.vd-word{
font-size:clamp(var(--fs-xl),6.5vw,var(--fs-2xl));
font-weight:800;line-height:var(--lh-tight);color:var(--c-text);
}
/* 判定理由。最大2行で抑える。日本語なのでトラッキング無し。 */
.vd-reason{
font-size:var(--fs-sm);line-height:1.55;color:var(--c-sub);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 判定語＋実質価格を同行（左:判定語 / 右:巨大 tabular 価格）。 */
.vd-main{
display:flex;align-items:baseline;justify-content:space-between;
gap:var(--sp-1) var(--sp-4);flex-wrap:wrap;
margin-top:2px;
}
.vd-main .vd-word{flex:0 1 auto;min-width:0}
.vd-price-label{
font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);line-height:1.3;
}
.vd-price{
flex:0 0 auto;margin-left:auto;
font-size:clamp(var(--fs-2xl),11vw,var(--fs-3xl));
font-weight:800;line-height:.92;letter-spacing:var(--tracking-tight);color:var(--c-text);
display:inline-flex;align-items:baseline;gap:2px;
}
.vd-price-k{font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);align-self:flex-start;margin-right:1px}
.vd-yen{font-size:.52em;font-weight:700;color:var(--c-sub);letter-spacing:0}
/* → あと◯日待つと…（wait のみ・控えめ1行） */
.vd-future-line{
display:flex;align-items:center;gap:6px;margin-top:var(--sp-1);
font-size:var(--fs-sm);color:var(--c-sub);
}
.vd-future-arrow{display:inline-flex;color:var(--c-muted);flex:0 0 auto}
.vd-sub{
font-size:var(--fs-md);font-weight:800;line-height:1;
letter-spacing:var(--tracking-tight);color:var(--c-accent-ink);
}
/* 最安強調行（concept-B の cheapest emphasis を refined line で）。trust-green の確認。 */
.vd-cheapest{
display:flex;align-items:flex-start;gap:var(--sp-2);
margin-top:var(--sp-2);padding-top:var(--sp-2);
border-top:1px solid var(--c-border);
font-size:var(--fs-sm);line-height:1.5;color:var(--c-sub);
}
.vd-cheapest-ico{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;border-radius:var(--r-pill);margin-top:1px;
background:var(--green-500);color:#fff;
}
.vd-cheapest-text b{color:var(--green-700);font-weight:800}
/* ── 状態別の warm 面（左帯＋数値色） ── */
/* 価格推移系（底値圏スコア）を撤去したため Verdict は is-wait（待つ得）のみ描画。
is-buy / is-hold は廃止。 */
/* 待つと得かも = amber。 */
.verdict.is-wait{border-color:var(--amber-200)}
.verdict.is-wait .vd-band{background:linear-gradient(180deg,var(--amber-400),var(--amber-500))}
.verdict.is-wait .vd-body{background:var(--grad-wait)}
.verdict.is-wait .vd-eyebrow-dot{background:var(--amber-500);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber-500) 18%,transparent)}
.verdict.is-wait .vd-glyph{color:var(--amber-500)}
.verdict.is-wait .vd-eyebrow{color:var(--amber-600)}
.verdict.is-wait .vd-word{color:var(--amber-600)}
.verdict.is-wait .vd-price{color:var(--c-text)}
.verdict.is-wait .vd-sub{color:var(--amber-600)}
.verdict.is-wait .vd-prices{border-top-color:color-mix(in srgb,var(--amber-200) 70%,transparent)}
/* 極小幅では余白を詰める。 */
@media (max-width:360px){
.vd-body{padding:var(--sp-4)}
.vd-prices{gap:var(--sp-2) var(--sp-3)}
}
/* ===========================================================================
SALE BANNER — 開催中セール（比較対象モールで当日有効な campaign_rules）。
point型＝trust-green（実質に反映済み）/ coupon型＝amber（未算入の注記）。
重い塗りにせず warm カード＋hairline。各行 = モールロゴ＋ラベル＋メタ。
=========================================================================== */
.sale-banner{
margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);
border:1px solid var(--c-border);border-radius:var(--r-lg);
background:var(--c-surface);box-shadow:var(--shadow-xs);
}
.sale-banner__head{display:flex;align-items:center;gap:6px;margin-bottom:var(--sp-2)}
.sale-banner__ico{display:inline-flex;flex:0 0 auto;color:var(--c-accent)}
.sale-banner__ttl{font-size:var(--fs-sm);font-weight:800;color:var(--c-text);letter-spacing:0}
.sale-banner__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.sale-item{display:flex;align-items:flex-start;gap:var(--sp-2)}
.sale-item__body{min-width:0;display:flex;flex-direction:column;gap:1px}
.sale-item__label{font-size:var(--fs-sm);font-weight:700;color:var(--c-text);line-height:var(--lh-snug)}
.sale-item__meta{font-size:var(--fs-xs);line-height:1.5;color:var(--c-muted)}
/* point＝実質に反映済み（trust green）／coupon＝未算入の注意（amber）。 */
.sale-item--point .sale-item__meta{color:var(--green-700)}
.sale-item--coupon .sale-item__meta{color:var(--amber-600)}
/* 要エントリーの小タグ。 */
.sale-item__entry{
display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);
font-size:var(--fs-xs);font-weight:700;color:var(--c-accent-ink);background:var(--orange-100);
}
/* ===========================================================================
PRODUCT HEADER — 商品画像（必須・明瞭）＋商品名＋メタ（JAN/一致）。
concept-B は商品画像を省いたが、本プロダクトでは product.image を必ず明瞭に出す。
CJK 規則: 商品名にトラッキングを当てない・2行クランプ。
=========================================================================== */
.product-header{padding:var(--sp-5) 0 var(--sp-4);border-bottom:1px solid var(--c-border)}
.product-header--img{display:flex;align-items:flex-start;gap:var(--sp-4)}
/* 商品サムネ（明瞭に見せる・大きめ 80px・cream 面に hairline 枠） */
.product-thumb{
flex:0 0 80px;width:80px;height:80px;
border-radius:var(--r-lg);overflow:hidden;
background:var(--surf-0);border:1px solid var(--c-border);
box-shadow:var(--shadow-sm);
display:flex;align-items:center;justify-content:center;
}
.product-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.product-thumb-fb{display:inline-flex;color:var(--warm-400)}
.product-headbody{min-width:0;flex:1 1 auto}
.product-name{
font-size:var(--fs-md);font-weight:700;line-height:var(--lh-snug);
margin:0 0 var(--sp-2);color:var(--c-text);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-meta{
display:flex;gap:var(--sp-2) var(--sp-3);align-items:center;flex-wrap:wrap;
font-size:var(--fs-sm);color:var(--c-sub);
}
.jan{font-variant-numeric:tabular-nums;color:var(--c-muted)}
/* ===========================================================================
RATING BADGE — ★平均＋件数＝信頼度。 で内訳を畳む。
=========================================================================== */
.rating-badge{
margin-top:var(--sp-3);
border:1px solid var(--c-border);border-radius:var(--r-lg);
background:var(--c-surface);overflow:hidden;box-shadow:var(--shadow-xs);
}
.rb-head{
display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
min-height:44px;padding:var(--sp-2) var(--sp-3);
cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;
}
.rb-head::-webkit-details-marker{display:none}
@media (prefers-reduced-motion: no-preference){
.rb-head{transition:background var(--dur-fast) var(--ease)}
}
.rb-head:active{background:var(--warm-100)}
.rb-stars{
display:inline-flex;align-items:center;gap:4px;
font-size:var(--fs-base);font-weight:800;color:var(--amber-500);
font-variant-numeric:tabular-nums;
}
.rb-star-ico{flex:0 0 auto}
.rb-count{font-size:var(--fs-xs);color:var(--c-muted)}
.rb-conf{
margin-left:auto;font-size:var(--fs-xs);font-weight:700;
border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap;line-height:1.5;
}
.rb-chev{flex:0 0 auto;display:inline-flex;color:var(--warm-400)}
@media (prefers-reduced-motion: no-preference){
.rb-chev{transition:transform var(--dur) var(--ease)}
}
.rating-badge[open] .rb-chev{transform:rotate(90deg)}
.rating-badge.is-strong .rb-conf{color:var(--green-700);background:var(--green-50)}
.rating-badge.is-mid .rb-conf{color:var(--c-accent-ink);background:var(--orange-100)}
.rating-badge.is-thin .rb-conf{color:var(--c-muted);background:var(--warm-100)}
.rb-detail{
display:flex;flex-direction:column;gap:var(--sp-1);
padding:var(--sp-1) var(--sp-3) var(--sp-2);border-top:1px solid var(--c-border);
}
.rb-mall{font-size:var(--fs-xs);color:var(--c-sub);font-weight:600;padding-top:var(--sp-2)}
.rb-note{font-size:var(--fs-xs);color:var(--c-muted);line-height:1.5}
/* ===========================================================================
WAIT DEAL — 「今すぐ vs 待つ」の2カラム比較。 で畳む。
=========================================================================== */
.wait-deal{
margin:var(--sp-3) 0 0;padding:var(--sp-3) var(--sp-4);
border:1px solid var(--c-border);border-radius:var(--r-lg);
background:var(--c-surface);box-shadow:var(--shadow-xs);
}
.wait-deal.is-wait{
border-color:var(--amber-200);
background:color-mix(in srgb,var(--c-warn) 5%,var(--c-surface));
box-shadow:var(--shadow-sm);
}
.wd-head{
display:flex;align-items:center;gap:var(--sp-2);
min-height:44px;font-size:var(--fs-sm);font-weight:700;color:var(--c-warn);
cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;
}
.wd-head::-webkit-details-marker{display:none}
.wd-icon{display:inline-flex;flex:0 0 auto;color:var(--c-warn)}
.wd-sum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-judge{
margin-left:auto;flex:0 0 auto;
font-size:var(--fs-xs);font-weight:700;color:var(--c-surface);
background:var(--c-warn);border-radius:var(--r-pill);padding:2px 9px;line-height:1.5;
}
.wd-chev{flex:0 0 auto;display:inline-flex;color:var(--warm-400)}
@media (prefers-reduced-motion: no-preference){
.wd-chev{transition:transform var(--dur) var(--ease)}
}
.wait-deal[open] .wd-chev{transform:rotate(90deg)}
/* 2カラム：今すぐ / → / 待つ（win）。 */
.wd-cols{display:flex;align-items:stretch;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-2)}
.wd-col{
flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;
padding:var(--sp-2) var(--sp-3);
border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);
}
.wd-col--win{
border-color:color-mix(in srgb,var(--c-ok) 36%,var(--c-border));
background:color-mix(in srgb,var(--c-ok) 6%,var(--c-surface));
}
.wd-k{font-size:var(--fs-xs);font-weight:700;color:var(--c-muted)}
.wd-v{font-size:var(--fs-base);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wd-col--win .wd-v{color:var(--c-ok)}
.wd-save{font-size:var(--fs-xs);font-weight:800;color:var(--c-ok);font-variant-numeric:tabular-nums}
/* 節約率ミニバー。 */
.wd-savebar{
display:block;height:5px;border-radius:var(--r-pill);
background:var(--surf-2);overflow:hidden;margin-top:var(--sp-1);
}
.wd-savebar__fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--c-ok)}
@media (prefers-reduced-motion: no-preference){
.wd-savebar__fill{transition:width var(--dur) var(--ease)}
}
.wd-arrow{align-self:center;display:inline-flex;color:var(--c-muted);flex:0 0 auto}
.wd-note{font-size:var(--fs-xs);line-height:1.5;color:var(--c-muted);margin-top:var(--sp-1)}
/* ===========================================================================
COMPARE HEAD — 比較テーブル上の refined section header（concept-B の compare-head）。
size+weight で階層・hairline は無し（テーブル側の罫線に任せる）。
=========================================================================== */
.compare-head{
display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
margin:var(--sp-6) 0 var(--sp-2);
}
.compare-head-ttl{font-size:var(--fs-md);font-weight:700;color:var(--c-text);line-height:var(--lh-tight)}
.compare-head-sub{font-size:var(--fs-xs);font-weight:700;color:var(--c-muted)}
/* ===========================================================================
PRICE SPARKLINE — 最安推移（情報提供のみ・verdict には影響しない）。
ProductHeader 直下に hairline で控えめに置く。重い塗り・影は使わない。
=========================================================================== */
.price-spark{
margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);
border:1px solid var(--c-border);border-radius:var(--r-lg);
background:var(--c-surface);box-shadow:var(--shadow-xs);
}
.ps-head{
display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
margin-bottom:var(--sp-2);
}
.ps-ttl{font-size:var(--fs-sm);font-weight:800;color:var(--c-text);line-height:var(--lh-tight)}
.ps-span{font-size:var(--fs-xs);font-weight:700;color:var(--c-muted)}
/* チャート枠。背景は cream 面、線は系列色。高さは SVG viewBox 準拠。 */
.ps-chart{
width:100%;border-radius:var(--r-sm);
background:linear-gradient(180deg,var(--warm-100),transparent);
}
.ps-svg{display:block;width:100%;height:auto;overflow:visible}
/* 系列線（共通）。線端は丸め・塗りなし。 */
.sl-line{
fill:none;stroke-linecap:round;stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
/* 主線 = 横断・送料込み最安（warm orange・太め）。 */
.sl-line--primary{stroke:var(--orange-500);stroke-width:2.2}
/* 副線 = モール別最安（muted・細め）。 */
.sl-line--mall{stroke:var(--warm-400);stroke-width:1.4}
/* 別/不明（本体価格）= 破線で「込みとは別物」を視覚的に分離。 */
.sl-line--excl{stroke:var(--c-muted);stroke-width:1.4;stroke-dasharray:3 3}
/* フッタ: 現在値（主線）＋凡例。 */
.ps-foot{
display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);
flex-wrap:wrap;margin-top:var(--sp-2);
}
.ps-cur{
display:inline-flex;align-items:baseline;gap:3px;
font-size:var(--fs-md);font-weight:800;color:var(--c-text);
font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);
}
.ps-cur-k{font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);align-self:center;letter-spacing:0}
.ps-yen{font-size:.62em;font-weight:700;color:var(--c-sub)}
.ps-legend{display:inline-flex;align-items:center;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap}
.ps-key{
display:inline-flex;align-items:center;gap:5px;
font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);line-height:1.4;
}
.ps-swatch{flex:0 0 auto;width:14px;height:0;border-top-width:2px;border-top-style:solid;border-radius:2px}
.ps-key--primary .ps-swatch{border-top-color:var(--orange-500);border-top-width:2.4px}
.ps-key--mall .ps-swatch{border-top-color:var(--warm-400)}
.ps-key--excl .ps-swatch{border-top-color:var(--c-muted);border-top-style:dashed}
/* 送料別/不明＝本体価格の注記（控えめ・muted）。 */
.ps-note{
margin:var(--sp-2) 0 0;
font-size:var(--fs-xs);line-height:1.5;color:var(--c-muted);
}
/* ===========================================================================
S2 — LIST CONTAINER ＋ SECTION HEAD（editorial：size+weight・箱にしない）
=========================================================================== */
.s2-list{margin-top:var(--sp-4)}
.s2-list__head{
display:flex;align-items:baseline;justify-content:space-between;
gap:var(--sp-3);margin:0 0 var(--sp-2);
padding-bottom:var(--sp-2);border-bottom:1px solid var(--warm-300)}
.s2-list__ttl{font-size:var(--fs-md);font-weight:700;color:var(--c-text);letter-spacing:0}
.s2-list__sub{font-size:var(--fs-sm);font-weight:600;color:var(--c-muted);letter-spacing:0}
/* 行群 — hairline 区切りのリズム。最初の行は head 罫線に続けて軽く。 */
.s2-rows{display:flex;flex-direction:column}
/* ===========================================================================
S2 — ROW（editorial hairline 行：rank | body | price-col）
塗りカードではなく、上 hairline で分ける静かな行。余白でリズムを作る。
=========================================================================== */
.s2-row{
position:relative;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:start;
column-gap:var(--sp-4);
padding:var(--sp-3) var(--sp-1);
border-top:1px solid var(--c-line)}
.s2-row:last-child{border-bottom:1px solid var(--c-line)}
@media (prefers-reduced-motion: no-preference){
.s2-row{transition:background var(--dur) var(--ease)}
}
/* rank===1（送料込主群）— clean な白の elevated カード（gallery 準拠）。
白面＋1px hairline＋soft shadow-1＋radius-lg。orange 左ライン/peach 塗りはしない。
行のままの hairline 群から、この1行だけが静かに「持ち上がる」。 */
.s2-row--top{
background:var(--c-card);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
padding:var(--sp-3) var(--sp-4);
margin-bottom:var(--sp-3);
box-shadow:var(--shadow-1)}
.s2-row--top + .s2-row{border-top-color:var(--c-line)}
/* 在庫切れ — グレーアウト（ウォッチ対象として行は残す）。 */
.s2-row--oos{opacity:.6}
.s2-row--oos .s2-mall{color:var(--c-sub)}
/* ─────────── lead（[ ＋ 順位] を縦に積む行頭領域）───────────
.s2-lead 基底（縦積み・中央・gap）は _tokens.ts。ここは行内整列のみ。 */
.s2-lead{flex-direction:row;align-items:center;gap:7px;padding-top:0}
/* 順位（静かな tabular 数字・editorial：丸バッジにしない・logo の下に center） */
.s2-rank{
font-variant-numeric:tabular-nums lining-nums;
font-size:var(--fs-sm);font-weight:700;line-height:1;
color:var(--warm-400);text-align:center}
.s2-rank--top{color:var(--c-accent-ink);font-weight:800}
/* ─────────── 中：店舗・確度・メタ・内訳 ─────────── */
.s2-body{min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.s2-store-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--sp-2);min-width:0}
.s2-store{min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px}
.s2-mall{color:var(--c-text);font-weight:700;font-size:var(--fs-md);
line-height:var(--lh-snug);letter-spacing:0}
.s2-row--top .s2-mall{color:var(--c-accent-ink)}
.s2-shop{color:var(--c-muted);font-weight:400;font-size:var(--fs-sm);
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0}
.oos-tag{font-size:var(--fs-xs);font-weight:700;color:var(--c-sub);
background:var(--warm-100);border-radius:var(--r-pill);padding:2px 8px;
white-space:nowrap;flex:0 0 auto}
/* 送料 込/別 を行ごとに明示するチップ（統合1リスト前提・込=静か / 別=注意 / 不明=控えめ）。 */
.postage-chip{flex:0 0 auto;font-size:var(--fs-xs);font-weight:700;
border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap;letter-spacing:0;
border:1px solid transparent}
.postage-chip--inc{color:var(--green-700);background:var(--green-50);border-color:var(--green-100)}
.postage-chip--sep{color:var(--amber-600);background:var(--amber-50);border-color:var(--amber-100)}
.postage-chip--unknown{color:var(--c-muted);background:var(--warm-100)}
/* 「比較した中でいちばん安い」— トップ行の主張。trust green の静かなインライン。 */
.cheapest-tag{
display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
font-size:var(--fs-xs);font-weight:800;color:var(--green-700);
background:var(--green-50);border:1px solid var(--green-100);
border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap;letter-spacing:0}
.cheapest-tag svg{flex:0 0 auto}
/* 確度バッジ＋報告（行頭の静かなマーク・primitive は _tokens.ts） */
.s2-row__badge{min-width:0}
/* ===========================================================================
S2 — META（表示価格−P・送料・鮮度・実績/店シグナルを1本の静かな行に集約）
中黒区切りの落ち着いたテキスト＋極小アイコン。事実提示のトーン。pill soup 回避。
=========================================================================== */
.s2-meta{
display:flex;align-items:center;flex-wrap:wrap;gap:3px 10px;
font-size:var(--fs-sm);color:var(--c-muted);line-height:1.6;letter-spacing:0}
.s2-meta__item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.s2-meta__price{color:var(--c-sub);font-weight:600;white-space:nowrap}
.s2-meta__fresh{color:var(--c-muted)}
.s2-meta__item--warn{color:var(--amber-600);font-weight:600}
.s2-meta__icon{display:inline-flex;flex:0 0 auto;color:var(--warm-400)}
.s2-meta__item--warn .s2-meta__icon{color:var(--amber-500)}
/* 区切りは控えめだが視認できる中黒。アイテム間 gap を広げて窮屈さを解消。 */
.s2-meta__dot{color:var(--warm-400);margin:0 -1px}
/* クーポンセール注記（行内・amber・実質価格に未算入の旨を景表法注記として明示）。 */
.s2-coupon-note{
display:flex;gap:5px;align-items:flex-start;margin:var(--sp-1) 0 0;
font-size:var(--fs-xs);line-height:1.5;color:var(--amber-600);
}
.s2-coupon-note svg{flex:0 0 auto;margin-top:2px}
/* 特例行（Amazon/ヨドバシ）の見出し：モールロゴ＋ラベルの横並び。 */
.special-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.special-head .special-label{margin:0}
/* Amazon/ヨドバシ行は1行に：ロゴ＋ラベルを左、検索リンクを右へ寄せる。
（.special-row 基底は縦積みのため、この2行だけ横1行に上書き） */
.amazon-row,.yodobashi-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.amazon-row .special-head,.yodobashi-row .special-head{margin-bottom:0;min-width:0}
.amazon-row .special-links,.yodobashi-row .special-links{flex-direction:row;margin-top:0;flex:0 0 auto}
/* ===========================================================================
S2 — 内訳トグル（行レベルラッパ・[open] でフル幅展開）
=========================================================================== */
.s2-breakdown{margin-top:var(--sp-1)}
/* summary（breakdown-toggle の見た目は _tokens.ts。ここは行内サイズ調整）。 */
.s2-breakdown .breakdown-toggle{font-size:var(--fs-sm);padding:6px 0}
.s2-breakdown__chev{color:var(--c-accent)}
@media (prefers-reduced-motion: no-preference){
.s2-breakdown__chev{transition:transform var(--dur-fast) var(--ease)}
}
.s2-breakdown[open] .breakdown-toggle .s2-breakdown__chev{transform:rotate(180deg)}
/* ===========================================================================
S2 — PRICE COL（実質価格＝主役・巨大 tabular ＋ 唯一の購入CTA・右寄せ）
階層は SIZE+WEIGHT で作る（箱ではなく）。価格が行の焦点。
=========================================================================== */
.s2-price-col{
flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;
gap:var(--sp-2);text-align:right}
/* 実質価格 — 主役。大きく・太く・等幅数字で桁を揃える（concept-B の giant price）。 */
.eff-price{
display:inline-flex;align-items:baseline;gap:3px;
color:var(--c-text);line-height:var(--lh-tight)}
.eff-price__k{font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);
align-self:flex-start;letter-spacing:0;margin-right:1px}
.eff-price__y{font-size:var(--fs-md);font-weight:600;color:var(--c-sub)}
.eff-price__n{font-size:var(--fs-2xl);font-weight:800;
letter-spacing:var(--tracking-tight)}
.s2-row--top .eff-price,.s2-row--top .eff-price__y{color:var(--c-accent-ink)}
/* 実質単価（容量・入数あたり）— 補助のミニピル。 */
.per-unit{
display:inline-block;padding:1px 7px;border-radius:var(--r-pill);
background:var(--surf-2);color:var(--c-sub);
font-size:var(--fs-xs);font-weight:700;line-height:1.4;white-space:nowrap}
/* 購入ボタン — 行内レイアウト上書きのみ（見た目の primitive は _tokens.ts）。
タップ高44px厳守（primitive の min-height:44px を尊重し縮めない）。 */
.s2-price-col .btn--buy{
margin:0;width:auto;padding:0 16px;font-size:14px;white-space:nowrap}
.s2-row--top .btn--buy{background:var(--grad-accent);border-color:transparent;
color:var(--c-on-accent);box-shadow:var(--shadow-accent)}
.s2-row--top .btn--buy:active{background:var(--grad-accent);box-shadow:var(--shadow-sm)}
/* ===========================================================================
S2 — POSTAGE GROUP（送料別/不明：主群の下にグルーピング）
=========================================================================== */
.postage-group{margin-top:var(--sp-6)}
.postage-group__head{
font-size:var(--fs-sm);font-weight:700;color:var(--c-sub);letter-spacing:0;
margin:0 0 var(--sp-2);padding-bottom:var(--sp-2);
border-bottom:1px solid var(--c-line)}
/* ===========================================================================
S2 — WATCH CTA BAR（下部固定 → 600px で static）
モバイル: sticky-bottom（HARD制約）。≥600px の static 化は _tokens.ts と協調。
=========================================================================== */
.watch-cta-bar{
position:sticky;bottom:0;z-index:10;
background:color-mix(in srgb,var(--c-bg) 92%,transparent);
-webkit-backdrop-filter:saturate(1.4) blur(8px);
backdrop-filter:saturate(1.4) blur(8px);
padding:10px 0 calc(10px + env(safe-area-inset-bottom));
border-top:1px solid var(--c-line)}
.watch-cta{flex-direction:column}
.watch-cta__sub{font-size:var(--fs-xs);font-weight:400;color:var(--c-on-accent);opacity:.92}
@media (min-width:600px){
.watch-cta-bar{
position:static;
background:transparent;
-webkit-backdrop-filter:none;backdrop-filter:none;
padding:var(--sp-4) 0}
}
/* ===========================================================================
S2 — RESPONSIVE（狭幅：価格列を下段へ回り込ませず維持。極狭で店名省略）
=========================================================================== */
@media (max-width:360px){
.s2-row{column-gap:var(--sp-3)}
.eff-price__n{font-size:var(--fs-xl)}
}
/* ===========================================================================
S2 — SECTION SHELL（候補ピッカー全体）
たっぷりした上下余白でリストに呼吸を与える。
=========================================================================== */
.candidates{
margin:0;
padding:var(--sp-5) 0 var(--sp-6);
color:var(--c-text);
-webkit-font-smoothing:antialiased;
}
/* ブランドマーク＋見出し（プレミアムなコンシューマ感） */
.candidates-brand{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-1)}
.candidates-brand svg{flex:0 0 auto}
/* 大きく締まった見出し（日本語なのでトラッキング無し） */
.candidates-head{
margin:0;
font-size:var(--fs-lg);
font-weight:800;
line-height:var(--lh-tight);
color:var(--c-text);
}
.candidates-note{
margin:0 0 var(--sp-4);
font-size:var(--fs-sm);
line-height:var(--lh-base);
color:var(--c-muted);
}
/* ===========================================================================
S2 — INSET GROUP（details = 主軸グループ）
カード半径 16px・ヘアライン・柔らかい影。iOS のグルーピングリスト風。
=========================================================================== */
.cand-group{
background:var(--c-surface);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
margin:0 0 var(--sp-3);
overflow:hidden;
box-shadow:var(--shadow-sm);
}
@media (prefers-reduced-motion: no-preference){
.cand-group{transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
}
.cand-group:last-child{margin-bottom:0}
/* 展開中はわずかに浮かせて存在感を出す */
.cand-group[open]{box-shadow:var(--shadow-md);border-color:var(--warm-300)}
/* ───────────────────────── 見出し（summary） ─────────────────────────────
タップ開閉。最小タップ高は 44px 厳守（ここでは ~60px の余裕を確保）。 */
.cand-group-head{
display:flex;
align-items:center;
gap:var(--sp-3);
padding:var(--sp-3) var(--sp-4);
min-height:60px;
cursor:pointer;
list-style:none;
-webkit-tap-highlight-color:transparent;
}
.cand-group-head::-webkit-details-marker{display:none}
@media (prefers-reduced-motion: no-preference){
.cand-group-head{transition:background var(--dur-fast) var(--ease)}
}
.cand-group-head:active{background:var(--warm-100)}
.cand-group-head:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
/* 展開時は見出しとテーブルをヘアラインで区切る */
.cand-group[open] .cand-group-head{border-bottom:1px solid var(--c-border)}
/* 代表画像（グループ見出しのサムネ）。行サムネ .c-thumb を継承しつつ、
見出し用に一段小さく（40px）。画像が無い場合は店アイコンのフォールバック。 */
.cand-group-thumb{flex:0 0 40px;width:40px;height:40px}
/* 主軸（種別ラベル＋値）。値は大きく締まった数字。 */
.cand-group-main{display:flex;align-items:baseline;gap:var(--sp-1);min-width:0}
.cand-group-kind{
font-size:var(--fs-sm);
font-weight:700;
color:var(--c-muted);
}
.cand-group-value{
font-size:var(--fs-md);
font-weight:800;
letter-spacing:var(--tracking-tight);
color:var(--c-text);
line-height:var(--lh-tight);
font-variant-numeric:tabular-nums;
}
/* 件数バッジ（淡いアクセント tint のピル） */
.cand-group-count{
flex:0 0 auto;
font-size:var(--fs-xs);
font-weight:700;
color:var(--c-accent-ink);
background:var(--accent-tint);
border-radius:var(--r-pill);
padding:3px 10px;
line-height:1.5;
white-space:nowrap;
}
/* 最安〜価格＋送料区分（右寄せ・縦積みで横幅を抑える） */
.cand-group-price{
margin-left:auto;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:3px;
min-width:0;
}
.cand-group-from{
font-size:var(--fs-sm);
font-weight:800;
color:var(--c-text);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
/* シェブロン（SVG・閉=右向き / 開=下向きへ回転） */
.cand-group-chev{
flex:0 0 auto;
display:inline-flex;
color:var(--warm-400);
transform:rotate(0deg);
}
@media (prefers-reduced-motion: no-preference){
.cand-group-chev{transition:transform var(--dur) var(--ease)}
}
.cand-group[open] .cand-group-chev{transform:rotate(90deg)}
/* ===========================================================================
S2 — COMPACT TABLE（展開時のみ表示する高密度テーブル）
=========================================================================== */
.cand-table{
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:0;
background:var(--c-surface);
}
/* 行（全体が全面リンク=stretched link のため position:relative） */
.cand-row{position:relative}
/* 行間はヘアラインのみ（インセットリストの区切り） */
.cand-row + .cand-row td{border-top:1px solid var(--c-border)}
.cand-row td{padding:0;vertical-align:middle;background:var(--c-surface)}
@media (prefers-reduced-motion: no-preference){
.cand-row td{transition:background var(--dur-fast) var(--ease)}
}
.cand-row:active td{background:var(--warm-100)}
/* 参考最安行: ごく淡い緑 tint ＋左に確度色のインセット帯 */
.cand-row.is-cheapest td{background:var(--green-50)}
.cand-row.is-cheapest td:first-child{box-shadow:inset 3px 0 0 var(--c-ok)}
.cand-row.is-cheapest:active td{background:var(--green-100)}
/* 全面ストレッチリンク（HARD制約: inset:0 のまま） */
.row-link{
position:absolute;
inset:0;
z-index:2;
-webkit-tap-highlight-color:transparent;
}
.row-link:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
/* ───────────────────────── 左セル（バリエーション） ─────────────────────── */
.c-var{min-width:0}
.c-var-inner{
display:flex;
align-items:center;
gap:var(--sp-3);
padding:10px var(--sp-3) 10px var(--sp-4);
}
/* サムネ（角丸・ヘアライン・淡いプレースホルダ面） */
.c-thumb{
flex:0 0 44px;
width:44px;
height:44px;
border-radius:var(--r-sm);
overflow:hidden;
border:1px solid var(--c-border);
background:var(--surf-1);
display:flex;
align-items:center;
justify-content:center;
}
.c-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.c-thumb-fb{display:inline-flex;color:var(--warm-400);line-height:1}
/* 本文（メタ行＋タイトル） */
.c-varbody{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:4px}
.c-var-title{
font-size:var(--fs-sm);
line-height:1.35;
color:var(--c-sub);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* 行末シェブロン（タップで遷移する手掛かり・装飾） */
.c-row-chev{flex:0 0 auto;display:inline-flex;color:var(--warm-400)}
/* ───────────────────────── メタ（モール識別＋色スウォッチ＋チップ群） ────── */
.candidate-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
/* 取扱モールの識別モノグラム束（ の自前バッジを横並びに）。
バッジの視覚は MallLogos.tsx 側で完結。ここは並びの間隔のみ。 */
.cand-malls{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
/* 色チップ（スウォッチ＋色名・小ピル） */
.candidate-color{
display:inline-flex;
align-items:center;
gap:5px;
padding:1px 8px 1px 3px;
border:1px solid var(--c-border);
border-radius:var(--r-pill);
background:var(--c-bg);
font-size:var(--fs-xs);
font-weight:700;
color:var(--c-sub);
max-width:130px;
}
.cand-color-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* スウォッチ円（色は JSX のインライン background。内側ヘアラインで縁取り） */
.swatch{
flex:0 0 auto;
width:13px;
height:13px;
border-radius:50%;
box-shadow:inset 0 0 0 1px rgba(16,20,28,.18);
}
/* チップ派生（数量/規格/属性）— .chip 基底（_tokens.ts）は大きいため、
メタ行ではコンパクトなタグサイズへスコープ調整。色は意味別 tint。 */
.candidate-meta .chip{
font-size:var(--fs-xs);
font-weight:700;
line-height:1;
padding:3px 7px;
min-height:0;
border:0;
box-shadow:none;
background:var(--warm-100);
color:var(--c-sub);
}
/* 意味別 tint（warm パレット）: 数量=trust-green / サイズ=warm-orange / 属性=amber。 */
.chip-qty{color:var(--green-700);background:var(--green-50)}
.chip-size{color:var(--c-accent-ink);background:var(--orange-100)}
.chip-attr{color:var(--amber-600);background:var(--amber-50)}
/* ───────────────────────── 右セル（価格） ───────────────────────────────── */
.c-price{
width:104px;
padding:10px var(--sp-4);
text-align:right;
white-space:nowrap;
vertical-align:middle;
}
/* 「いちばん安い」タグ（断定回避コピーは JSX 側の COPY.cheapest）。
視覚は緑の極小ピル＋SVGタグアイコン。テキストは長文のため幅を抑え省略。 */
.t-best{
display:inline-flex;
align-items:center;
gap:3px;
max-width:100px;
margin-bottom:4px;
padding:2px 8px;
border-radius:var(--r-pill);
background:var(--c-ok);
color:#fff;
font-size:var(--fs-xs);
font-weight:800;
line-height:1.3;
}
.t-best svg{flex:0 0 auto}
.t-best-text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* 価格本体（等幅数字・締まったトラッキング） */
.candidate-price-val{
display:block;
font-size:var(--fs-md);
font-weight:800;
line-height:1;
letter-spacing:var(--tracking-tight);
color:var(--c-text);
font-variant-numeric:tabular-nums;
}
.candidate-price-val .yen{font-size:var(--fs-xs);font-weight:800;margin-right:1px}
.candidate-price-val .from{font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);margin-left:1px}
/* 最安行では価格も確度色（緑）に */
.cand-row.is-cheapest .candidate-price-val{color:var(--c-ok)}
/* 価格未確定（「確認」プレースホルダ） */
.candidate-price-none{font-size:var(--fs-sm);font-weight:700;color:var(--c-muted)}
/* 送料区分チップ（価格の下に右寄せで明示・込/別/不明）。視覚は共通 .postage-chip。 */
.c-price .postage-chip{display:inline-block;margin-top:5px}
/* 実質単価チップ（淡色・事実計算。算出不能時は JSX 側で非表示） */
.per-unit{
display:inline-block;
margin-top:4px;
padding:1px 6px;
border-radius:var(--r-pill);
background:var(--surf-2);
color:var(--c-sub);
font-size:var(--fs-xs);
font-weight:700;
line-height:1.4;
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.s2-price .per-unit{margin-top:0}
/* ===========================================================================
S2 — 極小幅（~340px）での詰め
=========================================================================== */
@media (max-width:340px){
.cand-group-value{font-size:var(--fs-base)}
.c-var-inner{gap:9px;padding:10px var(--sp-2) 10px var(--sp-3)}
.candidate-color{max-width:104px}
.c-price{width:92px;padding-left:var(--sp-2);padding-right:var(--sp-3)}
.c-row-chev{display:none}
}
/* ===========================================================================
PAGE — ウォッチ画面コンテナ / 完了画面
=========================================================================== */
.watch-page{padding:var(--sp-4) 0}
/* ── イントロ：ベルアイコン＋タイトル＋サブ（editorial：箱にしない） ── */
.watch-intro{
display:flex;
align-items:center;
gap:var(--sp-3);
margin:var(--sp-2) 0 var(--sp-5);
}
.watch-intro__icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
flex:0 0 auto;
border-radius:var(--r-sm);
background:var(--orange-100);
color:var(--c-accent-d);
}
.watch-intro__text{min-width:0}
.page-title{
font-size:var(--fs-xl);
line-height:var(--lh-tight);
font-weight:800;
color:var(--c-text);
margin:0;
}
.watch-intro__sub{
margin:var(--sp-1) 0 0;
font-size:var(--fs-sm);
color:var(--c-muted);
line-height:1.4;
}
/* ===========================================================================
WATCH TARGET — 監視対象サマリ（商品名 + 現在の実質いちばん安い）
ごく淡い warm 面で対象を静かに提示（薄い罫線・控えめ）。
=========================================================================== */
.watch-target{
background:var(--surf-1);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
padding:var(--sp-4);
margin:0 0 var(--sp-6);
}
.watch-target__name{
margin:0;
font-size:var(--fs-md);
font-weight:700;
line-height:1.4;
color:var(--c-text);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.watch-target__price{
display:flex;
align-items:center;
gap:6px;
margin:var(--sp-2) 0 0;
color:var(--green-700);
font-weight:700;
font-size:var(--fs-sm);
line-height:1.4;
}
.watch-target__price svg{flex:0 0 auto}
.watch-target__price-text{min-width:0}
.watch-target__price strong{
font-size:var(--fs-md);
font-weight:800;
margin-left:3px;
font-variant-numeric:tabular-nums lining-nums;
}
/* ===========================================================================
SECTIONS — editorial：重い箱ではなく「上罫線 hairline ＋ 広い余白」で分ける。
push-optin / notify-conditions / spu-settings に共通適用。
=========================================================================== */
.s3-section{
border:0;
border-top:1px solid var(--c-line);
border-radius:0;
background:transparent;
box-shadow:none;
padding:var(--sp-5) 0 var(--sp-4);
margin:0;
}
/* fieldset 既定の枠・余白・min-width を打ち消す（.notify-conditions は