/* セールレーダー app.css — demo13デザインを全ページへ展開 */
/* ========== テーマ変数 ========== */
:root, [data-theme="pop"] {
  --bg:#f7f7f8; --surface:#ffffff; --ink:#222428; --sub:#6b7280; --line:#e5e7eb;
  --accent:#e60012; --accent-soft:#fdecee; --on-accent:#fff;
  --gold:#b8860b; --gold-bg:#fff7e0; --fire:#d9480f; --fire-bg:#fff1e6;
  --silver:#5f6b7a; --silver-bg:#eef2f6; --bronze:#8a5a2b; --bronze-bg:#f6ede2;
  --track:#3b6ea5; --track-bg:#eaf1f9;
  --urgent:#c2410c; --price:#111; --radius:14px; --shadow:0 2px 10px rgba(0,0,0,.06);
  --font:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  --head-weight:800; --letter:0;
}
[data-theme="dark"] {
  --bg:#0d1017; --surface:#161b26; --ink:#e7ecf3; --sub:#8b95a7; --line:#252c3b;
  --accent:#26d0ce; --accent-soft:#0f2b2f; --on-accent:#04151a;
  --gold:#ffd54a; --gold-bg:#332a08; --fire:#ff8a50; --fire-bg:#33190c;
  --silver:#b9c4d4; --silver-bg:#232a36; --bronze:#d9a05b; --bronze-bg:#2e2113;
  --track:#7fb2e5; --track-bg:#14243a;
  --urgent:#ff7043; --price:#fff; --shadow:0 2px 14px rgba(0,0,0,.45);
}
[data-theme="luxury"] {
  --bg:#f5f1e8; --surface:#fffdf7; --ink:#3a3226; --sub:#8c8272; --line:#e3dccb;
  --accent:#9a7b2d; --accent-soft:#f3ead2; --on-accent:#fff;
  --gold:#8a6d1d; --gold-bg:#f5ecd2; --fire:#a4501e; --fire-bg:#f7e8dc;
  --silver:#6f6f77; --silver-bg:#ecebe4; --bronze:#7c5a34; --bronze-bg:#efe4d4;
  --track:#5e7a96; --track-bg:#e9eef1;
  --urgent:#9c4221; --price:#2e2818; --radius:10px; --shadow:0 1px 6px rgba(90,70,20,.10);
  --font:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --head-weight:600; --letter:.04em;
}
/* ========== 基本 ========== */
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.6; letter-spacing:var(--letter); }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
a { color:inherit; }
.wrap { max-width:1500px; margin:0 auto; padding:0 14px; }
.wrap-narrow { max-width:860px; margin:0 auto; padding:0 14px; }
/* ========== ヘッダー ========== */
header.site { background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; box-shadow:var(--shadow); }
.hrow { display:flex; align-items:center; gap:10px; padding:10px 0; flex-wrap:wrap; }
.logo { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; text-decoration:none; }
.logo .mark { font-size:1.3rem; font-weight:var(--head-weight); color:var(--accent); white-space:nowrap; }
.logo .mark .dot { display:inline-block; width:.55em; height:.55em; border-radius:50%; background:var(--accent); margin-right:.28em; animation:ping 2.4s ease-out infinite; }
@keyframes ping { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)} 70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent} }
@media (prefers-reduced-motion: reduce){ .logo .mark .dot{animation:none} * {transition:none !important} }
.logo .tag { font-size:.75rem; color:var(--sub); white-space:nowrap; }
.spacer { flex:1; }
.switches { display:flex; gap:6px; align-items:center; }
.sw { border:1px solid var(--line); background:var(--surface); color:var(--sub); border-radius:999px; padding:5px 11px; font-size:.75rem; }
.sw[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.swgroup { display:flex; gap:4px; background:var(--bg); border-radius:999px; padding:3px; }
nav.gnav { display:flex; gap:2px 14px; flex-wrap:wrap; padding:0 0 8px; font-size:.78rem; }
nav.gnav a { color:var(--sub); text-decoration:none; padding:2px 2px; }
nav.gnav a:hover, nav.gnav a[aria-current="page"] { color:var(--accent); font-weight:700; }
/* ========== パンくず ========== */
.bc { font-size:.72rem; color:var(--sub); padding:10px 0 0; }
.bc ol { list-style:none; display:flex; flex-wrap:wrap; gap:4px; }
.bc li:not(:last-child)::after { content:"›"; margin-left:4px; }
.bc a { color:var(--sub); }
/* ========== トップ見出し ========== */
.tophead { font-size:1.05rem; font-weight:var(--head-weight); padding:14px 0 0; }
.tophead-sub { display:block; font-size:.75rem; font-weight:400; color:var(--sub); }
/* ========== コントロール ========== */
.controls { padding:12px 0 4px; }
.crow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; }
input[type="search"] { flex:1; min-width:160px; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:.9rem; background:var(--surface); color:var(--ink); }
select { border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:.8rem; background:var(--surface); color:var(--ink); }
.chips { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:thin; flex:1; min-width:0; }
.chip { flex:0 0 auto; border:1px solid var(--line); background:var(--surface); color:var(--sub); border-radius:999px; padding:5px 12px; font-size:.78rem; white-space:nowrap; }
.chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700; }
.chip .n { opacity:.65; font-size:.68rem; margin-left:2px; }
.chip:disabled { opacity:.4; cursor:default; }
.frow { display:flex; gap:10px; align-items:flex-start; }
.flabel { flex:0 0 60px; font-size:.72rem; font-weight:700; color:var(--sub); padding-top:8px; white-space:nowrap; }
/* ========== 統計ストリップ ========== */
.stats { display:flex; gap:8px; padding:4px 0 12px; flex-wrap:wrap; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 14px; font-size:.75rem; color:var(--sub); text-align:left; }
.stat b { display:block; font-size:1.15rem; color:var(--ink); }
.stat.hot b { color:var(--gold); }
button.stat:hover { border-color:var(--accent); }
button.stat[aria-pressed="true"] { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); background:var(--gold-bg); }
.stat .hint { font-size:.62rem; color:var(--sub); display:block; }
/* ========== 併存レイアウト ========== */
.layout { display:flex; gap:16px; align-items:flex-start; padding-bottom:24px; }
.maincol { flex:1; min-width:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.more { display:block; margin:16px auto 0; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:9px 26px; font-size:.85rem; }
.more:hover { border-color:var(--accent); color:var(--accent); }
.rail { width:46%; min-width:480px; flex:0 0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); position:sticky; top:64px; max-height:calc(100vh - 80px); display:flex; flex-direction:column; overflow:hidden; }
.railhead { padding:10px 14px; border-bottom:1px solid var(--line); font-size:.78rem; font-weight:700; display:flex; justify-content:space-between; align-items:center; flex:0 0 auto; }
.railhead .sub { font-weight:400; color:var(--sub); font-size:.68rem; }
.railbody { overflow:auto; scrollbar-width:thin; }
/* ========== リストテーブル ========== */
table.lt { width:100%; border-collapse:collapse; background:var(--surface); font-size:.76rem; min-width:720px; }
.lt th { text-align:left; font-size:.66rem; color:var(--sub); font-weight:600; padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; background:var(--surface); z-index:1; }
.lt td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.lt tr:hover td { background:var(--bg); }
.lt .t { font-weight:700; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lt .t a { text-decoration:none; }
.lt .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.lt .lb { font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.lt img { width:52px; height:30px; object-fit:cover; border-radius:4px; }
/* ========== バッジ ========== */
.b-gold { background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold); }
.b-fire { background:var(--fire-bg); color:var(--fire); border:1px solid var(--fire); }
.b-silver { background:var(--silver-bg); color:var(--silver); border:1px solid var(--silver); }
.b-bronze { background:var(--bronze-bg); color:var(--bronze); border:1px solid var(--bronze); }
.b-track { background:var(--track-bg); color:var(--track); border:1px solid var(--track); }
/* ========== カード ========== */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .12s; text-decoration:none; color:inherit; }
.card:hover { transform:translateY(-2px); }
.card.is-low { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), var(--shadow); }
.thumbwrap { position:relative; aspect-ratio:16/9; overflow:hidden; background:#00000010; }
.thumbwrap img { width:100%; height:100%; object-fit:cover; }
.badge { position:absolute; top:8px; left:8px; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.offchip { position:absolute; right:8px; bottom:8px; background:var(--accent); color:var(--on-accent); font-weight:800; font-size:.85rem; padding:3px 9px; border-radius:8px; }
.hwchip { position:absolute; top:8px; right:8px; background:#000000b0; color:#fff; font-size:.65rem; padding:2px 8px; border-radius:999px; }
.cbody { padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.ctitle { font-size:.92rem; font-weight:var(--head-weight); line-height:1.4; min-height:2.6em; }
.cmeta { font-size:.7rem; color:var(--sub); display:flex; gap:8px; flex-wrap:wrap; }
.prices { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.now { font-size:1.35rem; font-weight:800; color:var(--price); }
.was { font-size:.75rem; color:var(--sub); text-decoration:line-through; }
.save { font-size:.72rem; color:var(--accent); font-weight:700; }
.lowline { font-size:.72rem; color:var(--sub); background:var(--bg); border-radius:8px; padding:5px 8px; }
.lowline b { color:var(--ink); }
.lowline .diff-zero { color:var(--gold); font-weight:700; }
.endline { font-size:.72rem; color:var(--sub); display:flex; justify-content:space-between; margin-top:auto; }
.endline .soon { color:var(--urgent); font-weight:700; }
/* ========== レスポンシブ分岐 ========== */
.view-switch { display:none; }
@media (min-width:1200px) {
  .chips { flex-wrap:wrap; overflow-x:visible; }
  .rail .lt { min-width:0; width:100%; table-layout:fixed; }
  .rail .lt th, .rail .lt td { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:7px 6px; }
  .rail .lt .col-low { display:none; }
  .rail .lt th:nth-child(1) { width:62px; }
  .rail .lt th:nth-child(3) { width:92px; }
  .rail .lt th:nth-child(4) { width:56px; }
  .rail .lt th:nth-child(5) { width:78px; }
  .rail .lt th:nth-child(6) { width:56px; }
  .rail .lt th:nth-child(7) { width:64px; }
  .rail .lt th:nth-child(8) { width:64px; }
  .rail .lt th:nth-child(10) { width:48px; }
  .rail .lt .t { max-width:none; }
  .rail .lt .lb { padding:2px 5px; font-size:.64rem; }
}
@media (max-width:1199px) {
  .view-switch { display:flex; }
  .rail { display:none; }
  [data-view="list"] .rail { display:flex; position:static; width:100%; min-width:0; flex:1 1 auto; max-height:none; }
  [data-view="list"] .grid, [data-view="list"] .more { display:none; }
  .layout { flex-direction:column; }
}
/* ========== 詳細ページ ========== */
.detail { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:16px 0 8px; }
@media (max-width:800px){ .detail { grid-template-columns:1fr; } }
.dimg { border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); align-self:start; }
.dinfo h1 { font-size:1.3rem; font-weight:var(--head-weight); line-height:1.4; margin-bottom:4px; }
.dmeta { font-size:.75rem; color:var(--sub); margin-bottom:10px; }
.dmeta a { color:var(--sub); }
.dbadge { display:inline-block; font-size:.78rem; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:10px; }
.dprices .now { font-size:1.9rem; }
.verdict { border-radius:10px; padding:10px 12px; font-size:.85rem; font-weight:700; margin:12px 0; }
.v-buy { background:var(--gold-bg); color:var(--gold); border:1px solid var(--gold); }
.v-ok { background:var(--silver-bg); color:var(--ink); border:1px solid var(--line); }
.v-wait { background:var(--fire-bg); color:var(--fire); border:1px solid var(--fire); }
.v-track { background:var(--track-bg); color:var(--track); border:1px solid var(--track); }
.mstats { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.mstat { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px 12px; font-size:.68rem; color:var(--sub); }
.mstat b { display:block; font-size:1rem; color:var(--ink); }
.eshop-btn { display:inline-block; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.9rem; padding:10px 22px; border-radius:999px; text-decoration:none; margin:6px 0; }
.eshop-btn:hover { opacity:.88; }
section.dsec { padding:14px 0; }
section.dsec h2 { font-size:1.02rem; font-weight:var(--head-weight); margin-bottom:8px; }
.chart { width:100%; height:auto; margin:6px 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.htable { width:100%; border-collapse:collapse; font-size:.78rem; margin-top:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.htable th, .htable td { padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; }
.htable td:last-child, .htable th:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.htable tr.min td { color:var(--gold); font-weight:700; }
.htable tr.cur td { background:var(--accent-soft); }
.note { font-size:.68rem; color:var(--sub); margin-top:6px; }
/* ========== ランキング/ジャンルページ ========== */
.rankhead { padding:16px 0 6px; }
.rankhead h1 { font-size:1.25rem; font-weight:var(--head-weight); }
.rankhead p { font-size:.8rem; color:var(--sub); }
ol.ranklist { list-style:none; padding:10px 0 24px; display:flex; flex-direction:column; gap:8px; }
.ranklist li { counter-increment: rk; }
.rankrow { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; text-decoration:none; box-shadow:var(--shadow); }
.rankrow:hover { border-color:var(--accent); }
.rankrow .no { flex:0 0 2.2em; font-size:1.15rem; font-weight:800; color:var(--sub); text-align:center; font-variant-numeric:tabular-nums; }
.ranklist li:nth-child(1) .no { color:var(--gold); font-size:1.4rem; }
.ranklist li:nth-child(2) .no { color:var(--silver); font-size:1.3rem; }
.ranklist li:nth-child(3) .no { color:var(--bronze); font-size:1.2rem; }
.rankrow img { width:96px; height:54px; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.rankrow .body { flex:1; min-width:0; }
.rankrow .rt { font-weight:700; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rankrow .rm { font-size:.68rem; color:var(--sub); }
.rankrow .rp { flex:0 0 auto; text-align:right; }
.rankrow .rp .now { font-size:1.1rem; }
.rankrow .rp .off { display:block; color:var(--accent); font-weight:800; font-size:.8rem; }
@media (max-width:560px){ .rankrow img { width:64px; height:36px; } .rankrow { gap:8px; } }
/* ========== アフィリエイト枠 ========== */
.aff { margin:8px 0 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; }
.aff h2 { font-size:.85rem; font-weight:700; color:var(--sub); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.aff .pr { font-size:.6rem; font-weight:400; border:1px solid var(--line); border-radius:4px; padding:1px 6px; color:var(--sub); }
.aff-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.aff-item { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; text-decoration:none; font-size:.78rem; }
.aff-item:hover { border-color:var(--accent); }
.aff-item .ic { font-size:1.3rem; flex:0 0 auto; }
.aff-item .nm { font-weight:700; line-height:1.35; }
.aff-item .st { display:block; font-size:.66rem; color:var(--sub); font-weight:400; }
/* ========== 記事ページ（about/404） ========== */
.article { padding:20px 0 40px; font-size:.9rem; }
.article h1 { font-size:1.35rem; font-weight:var(--head-weight); margin:10px 0 14px; }
.article h2 { font-size:1.05rem; font-weight:var(--head-weight); margin:22px 0 8px; border-left:4px solid var(--accent); padding-left:10px; }
.article p, .article li { color:var(--ink); margin-bottom:8px; }
.article ul { padding-left:22px; }
.article a { color:var(--accent); }
.err { text-align:center; padding:60px 0; }
.err .code { font-size:4rem; font-weight:800; color:var(--accent); }
/* ========== フッター ========== */
footer.site { border-top:1px solid var(--line); color:var(--sub); font-size:.7rem; padding:18px 0 40px; line-height:1.8; margin-top:20px; }
footer.site a { color:var(--sub); }
footer.site nav { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.empty { text-align:center; color:var(--sub); padding:40px 0; display:none; }
.updated { font-size:.7rem; color:var(--sub); padding:8px 0 0; }