/* SEO用レンジ表ページ（アプリ本体の style.css とは別・配色は揃えている） */
:root{--bg:#1a1d21;--panel:#23272e;--text:#e8eaed;--muted:#9aa0a6;--accent:#f0b429;--border:#3a3f47;--felt:#157046}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;line-height:1.8;padding:16px}
.wrap{max-width:760px;margin:0 auto}
a{color:var(--accent)}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--border);word-break:break-word}
.crumbs a{text-decoration:none}
h1{font-size:1.4rem;line-height:1.5;margin-bottom:14px;color:#fff}
h2{font-size:1.08rem;margin:28px 0 10px;padding-left:10px;border-left:4px solid var(--felt);color:#fff}
p{margin-bottom:12px}
.lead{color:#cfd3d8}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:.95rem}
.chart-box{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px;margin:18px 0}
.legend{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;font-size:.8rem;margin-bottom:10px}
.lg{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.lg::before{content:"";width:12px;height:12px;border-radius:3px;display:inline-block}
.lg.raise::before{background:#3fb568}
.lg.threebet::before{background:#e6584e}
.lg.call::before{background:#4a90d9}
.lg.fold::before{background:#2c313a;border:1px solid var(--border)}
.range-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:1px;max-width:420px;margin:0 auto}
.cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;border-radius:2px;color:#1a1d21}
.cell.raise{background:#3fb568}
.cell.threebet{background:#e6584e;color:#fff}
.cell.call{background:#4a90d9;color:#fff}
.cell.fold{background:#2c313a;color:#6b7178}
.chart-note{font-size:.75rem;color:var(--muted);margin:10px 0 0;text-align:center}
.hands{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:.8rem;line-height:2.1;word-break:break-word}
.hands code{background:#2c313a;border-radius:3px;padding:2px 5px;color:#cfd3d8}
.cta{background:linear-gradient(180deg,#1e5c3f,#14432e);border:1px solid #2a7a55;border-radius:10px;padding:16px;margin:26px 0;text-align:center}
.cta p{margin-bottom:10px}
.btn{display:inline-block;background:var(--accent);color:#1a1d21;font-weight:700;text-decoration:none;padding:11px 18px;border-radius:8px;line-height:1.4}
.related{list-style:none;padding-left:0}
.related li{border-bottom:1px solid var(--border)}
.related li a{display:block;padding:9px 0;text-decoration:none;font-size:.9rem}
.cards{list-style:none;display:grid;gap:8px;padding-left:0}
.cards li a{display:block;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:11px 13px;text-decoration:none;color:var(--text)}
.cards li a strong{display:block;font-size:.92rem;color:var(--accent);margin-bottom:3px}
.cards li a span{font-size:.74rem;color:var(--muted);line-height:1.6}
footer{margin-top:34px;padding-top:14px;border-top:1px solid var(--border);font-size:.75rem;color:var(--muted)}
/* 「◯◯との違い」と比較表（2026-08-15 追加） */
span.hands{display:block;margin-top:6px}
.diff-note{font-size:.85rem;color:var(--muted)}
.cmp{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.cmp th,.cmp td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:left}
.cmp thead th{font-size:.78rem;color:var(--muted);font-weight:700}
.cmp td.num,.cmp th.num{text-align:right;white-space:nowrap}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp tr.me{background:#2c313a}
.cmp a{text-decoration:none}
@media(max-width:420px){.cell{font-size:6.5px}h1{font-size:1.2rem}.cmp th,.cmp td{padding:8px 9px;font-size:.82rem}}