/* ヤマチョウシ ─ /weather/（天気デモ）専用スタイル
   ==========================================================================
   このページは app.css を読み込まない（単独で完結させる）。
   理由：モックの .row / .card / .chip / .rows は app.css の同名クラスと
   意味が違うため、両方を読むと表組みが display:flex に潰れるなど壊れる。
   ヘッダーとタブの見た目だけ app.css から写して下に置いてある。
   ★ 本番データに入れ替えるときは、このファイルを app.css に統合してよい。
   ========================================================================== */

:root{
  color-scheme: light;
  --surface-0:#f4f4f2; --surface-1:#fcfcfb; --surface-2:#eeeeeb; --surface-3:#e6e6e2;
  --text-primary:#16181d; --text-secondary:#52514e; --text-muted:#84837c;
  --line:#e0dfda; --line-strong:#c8c7c0;
  --rock:#2a78d6; --warn:#8a5a12; --warn-bg:#fbf3e5;
  --p0:transparent; --p1:#cde2fb; --p2:#9ec5f4; --p3:#6da7ec;
  --p4:#3987e5; --p5:#256abf; --p6:#104281;
  --on-light:#16181d; --on-dark:#ffffff; --mm0:#e8e8e4;
  --n0:transparent; --n1:#f0efe9; --n2:#e0ded4; --n3:#c9c6b9;
  --n4:#a8a599; --n5:#807e74; --n6:#57564f;
  --t0:#3d74bd; --t1:#8ab3de; --t2:#c9dcef; --t3:#efeee8; --t4:#f4dcb8; --t5:#e8b478; --t6:#d1883f;
  --w0:transparent; --w1:#eee9da; --w2:#e0d2a8; --w3:#d0b571; --w4:#bd9740; --w5:#9d7524; --w6:#7a5510;
  --lfm:#1baf7a; --msm:#2a78d6; --gsm:#8a5a12;
}
@media (prefers-color-scheme: dark){
 :root:not([data-theme="light"]){
  color-scheme: dark;
  --surface-0:#111110; --surface-1:#1a1a19; --surface-2:#232322; --surface-3:#2c2c2a;
  --text-primary:#ffffff; --text-secondary:#c3c2b7; --text-muted:#8e8d84;
  --line:#33332f; --line-strong:#4a4a45;
  --rock:#3987e5; --warn:#d0a24e; --warn-bg:#2a2318;
  --p0:transparent; --p1:#104281; --p2:#184f95; --p3:#256abf;
  --p4:#3987e5; --p5:#6da7ec; --p6:#9ec5f4; --mm0:#2b2b28;
  --on-light:#ffffff; --on-dark:#16181d;
  --n0:transparent; --n1:#26261f; --n2:#35342c; --n3:#4a493f;
  --n4:#6c6a5d; --n5:#95937f; --n6:#c6c4b2;
  --t0:#2b5a99; --t1:#3a75b8; --t2:#4e8ac6; --t3:#33332e; --t4:#8a6428; --t5:#b8853a; --t6:#d6a352;
  --w0:transparent; --w1:#2d2a20; --w2:#443d29; --w3:#5d5234; --w4:#7c6a3f; --w5:#a08a52; --w6:#c8ae69;
  --lfm:#199e70; --msm:#3987e5; --gsm:#d0a24e;
 }
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-0);color:var(--text-primary);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
 font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px 80px}
/* ---------- header / tabs（app.css と同じ見た目） ---------- */
header.site{background:var(--surface-1);border-bottom:1px solid var(--line);padding:18px 0 0}
header.site .inner{max-width:1180px;margin:0 auto;padding:0 18px}
a.brand{text-decoration:none;color:inherit}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.logo{font-size:23px;font-weight:800;letter-spacing:.06em}
.kanji{font-size:14px;color:var(--text-muted);letter-spacing:.18em}
.tag{font-size:13px;color:var(--text-secondary);margin-left:auto}
.tabs{display:flex;gap:2px;margin-top:16px}
.tab{display:flex;align-items:center;gap:7px;padding:9px 16px 8px;border:1px solid var(--line);
 border-bottom:none;border-radius:7px 7px 0 0;background:var(--surface-2);
 color:var(--text-muted);font-size:14px;font-weight:700;text-decoration:none;position:relative;top:1px}
.tab .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.tab.on{background:var(--surface-0);color:var(--text-primary);border-bottom:1px solid var(--surface-0)}
.tab.off{opacity:.55}
.tab .soon{font-size:10.5px;font-weight:600;color:var(--text-muted);
 border:1px solid var(--line-strong);border-radius:3px;padding:0 4px;letter-spacing:.04em}

/* ---------- 架空データの帯（閉じられない・常時表示） ---------- */
.demoband{background:var(--warn-bg);border-bottom:1px solid var(--line-strong);
 color:var(--warn);font-size:13px;font-weight:700;padding:9px 0}
.demoband .inner{max-width:1180px;margin:0 auto;padding:0 18px;
 display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.demoband .bt{background:var(--warn);color:var(--surface-1);border-radius:4px;
 padding:1px 8px;font-size:11.5px;letter-spacing:.06em;flex-shrink:0}
.demoband span.d{font-weight:400;color:var(--text-secondary)}
h2.sec{font-size:17px;margin:26px 0 3px;font-weight:800;display:flex;align-items:center;gap:8px}
h2.sec .dot{width:10px;height:10px;border-radius:50%;background:var(--rock);flex-shrink:0}
p.lead{font-size:13px;color:var(--text-secondary);margin:3px 0 14px}
p.lead b{color:var(--text-primary)}
.metabar{display:flex;flex-wrap:wrap;gap:9px 18px;padding:13px 0 0;font-size:12.5px;color:var(--text-muted)}
.metabar .now{color:var(--text-secondary);font-weight:700;font-variant-numeric:tabular-nums}

.panel{background:var(--surface-1);border:1px solid var(--line);border-radius:10px;padding:15px 17px;margin-bottom:12px}
.cl{font-size:11.5px;font-weight:700;color:var(--text-muted);letter-spacing:.08em;margin-bottom:9px}
.sbox{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sbox input{flex:1;min-width:200px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-primary);
 border-radius:6px;padding:9px 13px;font-size:15px;font-family:inherit;font-weight:700}
.sbox input::placeholder{font-weight:400;color:var(--text-muted)}
.hits{margin-top:11px;display:none}.hits.on{display:block}
.hit{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--line);
 border-radius:7px;margin-bottom:5px;background:var(--surface-2);cursor:pointer}
.hit:hover{border-color:var(--rock)}
.hit .hn{font-size:15px;font-weight:800}
.hit .hq{font-size:12.5px;color:var(--text-secondary)}
.hit .he{font-size:13px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;margin-left:auto}
.hit .hg{font-size:10.5px;color:var(--text-muted);width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hit .hg code{background:var(--surface-3);padding:1px 5px;border-radius:3px}
.pats{display:flex;gap:5px;flex-wrap:wrap}
.pats button{appearance:none;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-secondary);
 border-radius:6px;padding:6px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.12s}
.pats button:hover{border-color:var(--rock);color:var(--text-primary)}
.pats button[aria-pressed="true"]{background:var(--rock);border-color:var(--rock);color:#fff}
.ctlrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.ctlrow .cap{font-size:12.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.ctlrow .cap b{color:var(--text-primary)}
.ctlrow .rs{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);font-weight:700}
.ctlrow .rs button{padding:5px 11px;font-size:12.5px}

/* 解像度メーター */
.resbar{margin-bottom:12px;background:var(--surface-1);border:1px solid var(--line);border-radius:10px;padding:13px 16px}
.resbar .rt{font-size:12.5px;color:var(--text-secondary);margin-bottom:9px}
.resbar .rt b{color:var(--text-primary)}
.rmeter{display:flex;height:26px;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.rmeter div{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;
 letter-spacing:.03em;white-space:nowrap;overflow:hidden}
.rmarks{display:flex;font-size:10.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-top:3px}
.rsel{margin-top:10px;font-size:12px;color:var(--text-muted)}
.rsel b{color:var(--warn)}

.mxwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface-1);border:1px solid var(--line);border-radius:10px}
table.mx{border-collapse:separate;border-spacing:2px;width:100%;font-size:13px}
table.mx th,table.mx td{padding:0;vertical-align:middle}
table.mx thead th{font-size:11px;color:var(--text-muted);font-weight:700;padding:9px 4px 5px;text-align:center;white-space:nowrap}
table.mx thead th.dayhd{color:var(--text-secondary);font-size:12px;border-bottom:1px solid var(--line);padding-bottom:4px}
th.nm{text-align:left!important;padding-left:14px!important;min-width:250px;position:sticky;left:0;background:var(--surface-1);z-index:3}
td.nm{padding:7px 8px 7px 14px;position:sticky;left:0;background:var(--surface-1);z-index:1;border-right:1px solid var(--line)}
td.nm .n{font-size:15px;font-weight:700;display:block;line-height:1.35;color:var(--rock);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
td.nm .n:hover{text-decoration-color:var(--rock)}
td.nm .n .q{font-size:11px;color:var(--text-muted);font-weight:400;margin-left:5px;text-decoration:none;display:inline-block}
td.nm .s{font-size:11px;color:var(--text-muted);display:block;font-variant-numeric:tabular-nums}
td.sum{text-align:right;padding:0 12px 0 8px;white-space:nowrap;font-variant-numeric:tabular-nums;border-right:1px solid var(--line)}
td.sum .v{font-size:19px;font-weight:800}
td.sum .u{font-size:11px;color:var(--text-secondary);margin-left:2px}
td.sum.z .v{color:var(--text-muted);font-weight:600}
td.c{text-align:center;font-variant-numeric:tabular-nums;min-width:52px;height:34px;border-radius:4px;font-size:12.5px;font-weight:700}
td.c.b0{background:var(--p0);color:var(--text-muted);font-weight:400;box-shadow:inset 0 0 0 1px var(--line)}
td.c.b1{background:var(--p1);color:var(--on-light)}td.c.b2{background:var(--p2);color:var(--on-light)}
td.c.b3{background:var(--p3);color:var(--on-light)}td.c.b4{background:var(--p4);color:var(--on-light)}
td.c.b5{background:var(--p5);color:var(--on-dark)} td.c.b6{background:var(--p6);color:var(--on-dark)}
td.c.n0{background:var(--n0);color:var(--text-muted);font-weight:400;box-shadow:inset 0 0 0 1px var(--line)}
td.c.n1{background:var(--n1);color:var(--on-light)}td.c.n2{background:var(--n2);color:var(--on-light)}
td.c.n3{background:var(--n3);color:var(--on-light)}td.c.n4{background:var(--n4);color:var(--on-dark)}
td.c.n5{background:var(--n5);color:var(--on-dark)} td.c.n6{background:var(--n6);color:var(--on-dark)}
td.c.t0{background:var(--t0);color:var(--on-dark)}td.c.t1{background:var(--t1);color:var(--on-light)}
td.c.t2{background:var(--t2);color:var(--on-light)}td.c.t3{background:var(--t3);color:var(--text-primary)}
td.c.t4{background:var(--t4);color:var(--on-light)}td.c.t5{background:var(--t5);color:var(--on-light)}
td.c.t6{background:var(--t6);color:var(--on-dark)}
td.c.w0{background:var(--w0);color:var(--text-muted);font-weight:400;box-shadow:inset 0 0 0 1px var(--line)}
td.c.w1{background:var(--w1);color:var(--on-light)}td.c.w2{background:var(--w2);color:var(--on-light)}
td.c.w3{background:var(--w3);color:var(--on-light)}td.c.w4{background:var(--w4);color:var(--on-dark)}
td.c.w5{background:var(--w5);color:var(--on-dark)} td.c.w6{background:var(--w6);color:var(--on-dark)}
td.c .ar{display:block;font-size:9px;line-height:1;opacity:.8;margin-top:-1px}
td.c.off{opacity:.2}
td.cld{text-align:right;padding:0 12px 0 8px;white-space:nowrap;font-variant-numeric:tabular-nums;border-right:1px solid var(--line)}
td.cld .v{font-size:17px;font-weight:800}
td.cld .u{font-size:11px;color:var(--text-secondary);margin-left:1px}
td.cld .lb{display:block;font-size:10px;color:var(--text-muted);font-weight:700;margin-top:-3px}
.fchk{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;font-size:13px;font-weight:700;color:var(--text-secondary)}
.fchk input{appearance:none;width:15px;height:15px;border:1.5px solid var(--line-strong);border-radius:3px;margin:0;
 cursor:pointer;flex-shrink:0;position:relative;background:var(--surface-1)}
.fchk input:checked{background:var(--rock);border-color:var(--rock)}
.fchk input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fchk:has(input:checked){color:var(--text-primary)}
.pats button.sm{padding:4px 10px;font-size:12px}
.pats button.area{font-weight:700}
.cnt{font-size:12.5px;color:var(--text-secondary);margin-left:auto;font-variant-numeric:tabular-nums}
.cnt b{color:var(--text-primary)}
.cnt .none{color:var(--warn);font-weight:700}
.legend i.n0{box-shadow:inset 0 0 0 1px var(--line)}
.legend i.n1{background:var(--n1)}.legend i.n2{background:var(--n2)}.legend i.n3{background:var(--n3)}
.legend i.n4{background:var(--n4)}.legend i.n5{background:var(--n5)}.legend i.n6{background:var(--n6)}
.legend i.t0{background:var(--t0)}.legend i.t1{background:var(--t1)}.legend i.t2{background:var(--t2)}
.legend i.t3{background:var(--t3);box-shadow:inset 0 0 0 1px var(--line)}
.legend i.t4{background:var(--t4)}.legend i.t5{background:var(--t5)}.legend i.t6{background:var(--t6)}
.legend i.w0{box-shadow:inset 0 0 0 1px var(--line)}
.legend i.w1{background:var(--w1)}.legend i.w2{background:var(--w2)}.legend i.w3{background:var(--w3)}
.legend i.w4{background:var(--w4)}.legend i.w5{background:var(--w5)}.legend i.w6{background:var(--w6)}
tr.row:hover td.nm,tr.row:hover td.sum{background:var(--surface-2)}
.daysep{border-left:2px solid var(--line-strong)!important}
tr.ghd td{background:var(--surface-2);padding:9px 14px;border-top:1px solid var(--line-strong)}
tr.ghd td.gcell{position:sticky;left:0;z-index:2;background:var(--surface-2)}
.gttl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gc{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.gm{font-size:11.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.gn{font-size:11px;color:var(--text-muted)}
.badge{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:3px;background:var(--surface-1);border:1px solid var(--line-strong);color:var(--text-secondary)}
.diff{font-variant-numeric:tabular-nums;font-weight:700}
.diff.big{color:var(--warn)}
.chips{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;align-items:center}
.chips .cl2{font-size:10px;color:var(--text-muted);font-weight:700;margin-right:1px}
.chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;border:1px solid var(--line);
 color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--surface-1);cursor:pointer}
.chip:hover{border-color:var(--c);color:var(--c)}
.chip.cur{border-color:var(--c);color:#fff;background:var(--c);cursor:default}
.chip.dead{opacity:.45;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}
.chip.dead:hover{border-color:var(--line);color:var(--text-muted)}
.gsplit{font-size:11px;color:var(--text-muted);display:block;margin-top:2px}
.gsplit b{color:var(--text-secondary)}
.mm{flex-shrink:0;line-height:0}
.mm i{display:block;border-radius:2px;background:var(--mm0)}
.mm i.t1{background:var(--p1)}.mm i.t2{background:var(--p2)}.mm i.t3{background:var(--p3)}
.mm i.t4{background:var(--p4)}.mm i.t5{background:var(--p5)}.mm i.t6{background:var(--p6)}
.mm i.ctr{box-shadow:0 0 0 1.5px var(--text-primary);border-radius:1px}
.mmlab{font-size:10.5px;color:var(--text-muted);line-height:1.35;white-space:nowrap}
.mmlab b{color:var(--text-secondary);font-weight:700}
.mmlab .edge{color:var(--warn);font-weight:700}

.legend{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--text-secondary)}
.legend .lb{margin-right:6px;color:var(--text-muted);font-weight:700}
.legend i{width:30px;height:15px;display:inline-block;border-radius:3px;margin-right:2px}
.legend .k{margin-right:9px;font-variant-numeric:tabular-nums}
.legend i.b0{box-shadow:inset 0 0 0 1px var(--line)}
.legend i.b1{background:var(--p1)}.legend i.b2{background:var(--p2)}.legend i.b3{background:var(--p3)}
.legend i.b4{background:var(--p4)}.legend i.b5{background:var(--p5)}.legend i.b6{background:var(--p6)}
.legend2{margin-top:7px;font-size:11.5px;color:var(--text-muted);line-height:1.8}
.legend2 b{color:var(--text-secondary)}
.note{margin-top:16px;padding:13px 16px;background:var(--surface-2);border-radius:8px;font-size:12.5px;color:var(--text-secondary);line-height:1.9}
.note b{color:var(--text-primary)}
.disc{margin-top:16px;padding:14px 17px;background:var(--warn-bg);border-left:3px solid var(--warn);border-radius:6px;font-size:12.5px;color:var(--text-secondary);line-height:1.85}
.disc b{color:var(--text-primary)}
footer{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--text-muted);line-height:1.85}

/* ---------- 詳細ページ ---------- */
#detail{display:none}
body.detail #list{display:none}
body.detail #detail{display:block}
.p2bar{background:var(--surface-1);border-bottom:1px solid var(--line);padding:12px 0;position:sticky;top:0;z-index:20}
.p2bar .inner{max-width:1180px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.p2bar .bk{appearance:none;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-secondary);
 border-radius:6px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.p2bar .bk:hover{border-color:var(--rock);color:var(--text-primary)}
.p2bar .pu{font-size:11.5px;color:var(--text-muted);margin-left:auto;font-family:ui-monospace,monospace}
.phead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:22px 0 2px}
.phead .pn{font-size:26px;font-weight:800}
.phead .pk{font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-secondary)}
.phead .pe{font-size:14px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.psub{font-size:12.5px;color:var(--text-muted);margin-bottom:16px;font-variant-numeric:tabular-nums}

.card{background:var(--surface-1);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.card h3{font-size:14.5px;font-weight:800;margin:0 0 3px}
.card .cs{font-size:12px;color:var(--text-muted);margin-bottom:13px;line-height:1.75}
.card .cs b{color:var(--text-secondary)}

/* テーパー帯 */
.taper{display:flex;height:38px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.taper div{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:11.5px;font-weight:800;line-height:1.3;overflow:hidden;white-space:nowrap}
.taper div span{font-size:10px;font-weight:600;opacity:.9}
.shbar{display:flex;height:22px;margin-top:5px;gap:0}
.shbar div{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
 border-right:1px solid var(--surface-1);color:var(--text-secondary);background:var(--surface-2)}
.shbar div:last-child{border-right:none}
.tmarks{display:flex;font-size:10.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;margin-top:4px}

/* 時系列 */
.tl{overflow-x:auto}
table.tls{border-collapse:separate;border-spacing:2px;font-size:11px}
table.tls td,table.tls th{padding:0;text-align:center;white-space:nowrap}
table.tls th{font-size:10px;color:var(--text-muted);font-weight:700;padding:3px 1px}
table.tls th.rh,table.tls td.rh{text-align:left;padding-right:10px;font-size:11px;color:var(--text-secondary);font-weight:700;white-space:nowrap}
table.tls td.v{height:30px;border-radius:3px;font-weight:700;font-variant-numeric:tabular-nums}
table.tls td.v.b0{background:var(--p0);color:var(--text-muted);font-weight:400;box-shadow:inset 0 0 0 1px var(--line)}
table.tls td.v.b1{background:var(--p1);color:var(--on-light)}table.tls td.v.b2{background:var(--p2);color:var(--on-light)}
table.tls td.v.b3{background:var(--p3);color:var(--on-light)}table.tls td.v.b4{background:var(--p4);color:var(--on-light)}
table.tls td.v.b5{background:var(--p5);color:var(--on-dark)} table.tls td.v.b6{background:var(--p6);color:var(--on-dark)}
table.tls td.v.n0{background:var(--n0);color:var(--text-muted);font-weight:400;box-shadow:inset 0 0 0 1px var(--line)}
table.tls td.v.n1{background:var(--n1);color:var(--on-light)}table.tls td.v.n2{background:var(--n2);color:var(--on-light)}
table.tls td.v.n3{background:var(--n3);color:var(--on-light)}table.tls td.v.n4{background:var(--n4);color:var(--on-dark)}
table.tls td.v.n5{background:var(--n5);color:var(--on-dark)} table.tls td.v.n6{background:var(--n6);color:var(--on-dark)}
table.tls td.v.t0{background:var(--t0);color:var(--on-dark)}table.tls td.v.t1{background:var(--t1);color:var(--on-light)}
table.tls td.v.t2{background:var(--t2);color:var(--on-light)}table.tls td.v.t3{background:var(--t3);color:var(--text-primary)}
table.tls td.v.t4{background:var(--t4);color:var(--on-light)}table.tls td.v.t5{background:var(--t5);color:var(--on-light)}
table.tls td.v.t6{background:var(--t6);color:var(--on-dark)}
table.tls td.v.w0{background:var(--w0);color:var(--text-muted);font-weight:400;box-shadow:inset 0 0 0 1px var(--line)}
table.tls td.v.w1{background:var(--w1);color:var(--on-light)}table.tls td.v.w2{background:var(--w2);color:var(--on-light)}
table.tls td.v.w3{background:var(--w3);color:var(--on-light)}table.tls td.v.w4{background:var(--w4);color:var(--on-dark)}
table.tls td.v.w5{background:var(--w5);color:var(--on-dark)} table.tls td.v.w6{background:var(--w6);color:var(--on-dark)}
table.tls td.v .ar{font-size:9px;opacity:.8;margin-left:1px}
table.tls td.sh{font-size:10px;color:var(--text-secondary);background:var(--surface-2);border-radius:3px;height:22px;font-weight:700}
.mbnd{border-left:3px solid var(--line-strong)!important}

/* 近傍マップ（同じ物理範囲で並べる） */
.nbs{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.nb{text-align:center}
.nb .nbt{font-size:12px;font-weight:800;color:var(--c);margin-bottom:2px}
.nbg{display:grid;gap:1px;margin:0 auto;border:1px solid var(--line);padding:2px;border-radius:5px;background:var(--surface-2)}
.nbg i{display:block;background:var(--mm0)}
.nbg i.t1{background:var(--p1)}.nbg i.t2{background:var(--p2)}.nbg i.t3{background:var(--p3)}
.nbg i.t4{background:var(--p4)}.nbg i.t5{background:var(--p5)}.nbg i.t6{background:var(--p6)}
.nbg i.ctr{box-shadow:0 0 0 2px var(--text-primary);z-index:1;position:relative}
.nb .nbc{font-size:10.5px;color:var(--text-muted);margin-top:5px;line-height:1.5;font-variant-numeric:tabular-nums}
.nb .nbc b{color:var(--text-secondary)}

table.lr{border-collapse:collapse;width:100%;font-size:13px;margin:6px 0 0}
table.lr th,table.lr td{border:1px solid var(--line);padding:7px 10px;text-align:right;font-variant-numeric:tabular-nums}
table.lr th{background:var(--surface-2);font-size:11.5px;color:var(--text-secondary);font-weight:700;text-align:center}
table.lr td:first-child,table.lr th:first-child{text-align:left;font-weight:700}
.xlink{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 13px;border:1px solid var(--line-strong);
 border-radius:7px;background:var(--surface-1);font-size:12.5px;font-weight:700;color:var(--rock);text-decoration:none}
/* ===== モバイル：カード表示 ===== */
#cards{display:none}
.gcard{background:var(--surface-1);border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:10px}
.gcard .gh{display:flex;gap:11px;align-items:flex-start}
.gcard .gh .tx{flex:1;min-width:0}
.gcard .gcode{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gcard .gsub{font-size:11px;color:var(--text-muted);line-height:1.6;margin-top:2px}
.gcard .gsub b{color:var(--text-secondary)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:11px 0 9px}
.stats div{background:var(--surface-2);border-radius:7px;padding:7px 4px;text-align:center;line-height:1.25}
.stats div.on{background:var(--rock);color:#fff}
.stats div.on span{color:rgba(255,255,255,.85)}
.stats b{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.stats span{font-size:9.5px;color:var(--text-muted);font-weight:700}
.strip{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line);padding-top:8px}
.strip .in{display:flex;gap:2px}
.strip .sc{flex:0 0 auto;width:34px;text-align:center}
.strip .sc .sh{display:block;font-size:9.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;line-height:1.4}
.strip .sc .sv{display:block;height:28px;line-height:28px;border-radius:3px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.strip .sc.off{opacity:.28}
.strip .sc.dsep{margin-left:7px;border-left:1px solid var(--line-strong);padding-left:5px;width:40px}
.strip .sv.b0{background:var(--p0);color:var(--text-muted);font-weight:400;box-shadow:inset 0 0 0 1px var(--line)}
.strip .sv.b1{background:var(--p1);color:var(--on-light)}.strip .sv.b2{background:var(--p2);color:var(--on-light)}
.strip .sv.b3{background:var(--p3);color:var(--on-light)}.strip .sv.b4{background:var(--p4);color:var(--on-light)}
.strip .sv.b5{background:var(--p5);color:var(--on-dark)} .strip .sv.b6{background:var(--p6);color:var(--on-dark)}
.strip .sv.n0{background:var(--n0);color:var(--text-muted);font-weight:400;box-shadow:inset 0 0 0 1px var(--line)}
.strip .sv.n1{background:var(--n1);color:var(--on-light)}.strip .sv.n2{background:var(--n2);color:var(--on-light)}
.strip .sv.n3{background:var(--n3);color:var(--on-light)}.strip .sv.n4{background:var(--n4);color:var(--on-dark)}
.strip .sv.n5{background:var(--n5);color:var(--on-dark)} .strip .sv.n6{background:var(--n6);color:var(--on-dark)}
.strip .sv.t0{background:var(--t0);color:var(--on-dark)}.strip .sv.t1{background:var(--t1);color:var(--on-light)}
.strip .sv.t2{background:var(--t2);color:var(--on-light)}.strip .sv.t3{background:var(--t3);color:var(--text-primary)}
.strip .sv.t4{background:var(--t4);color:var(--on-light)}.strip .sv.t5{background:var(--t5);color:var(--on-light)}
.strip .sv.t6{background:var(--t6);color:var(--on-dark)}
.strip .sv.w0{background:var(--w0);color:var(--text-muted);font-weight:400;box-shadow:inset 0 0 0 1px var(--line)}
.strip .sv.w1{background:var(--w1);color:var(--on-light)}.strip .sv.w2{background:var(--w2);color:var(--on-light)}
.strip .sv.w3{background:var(--w3);color:var(--on-light)}.strip .sv.w4{background:var(--w4);color:var(--on-dark)}
.strip .sv.w5{background:var(--w5);color:var(--on-dark)} .strip .sv.w6{background:var(--w6);color:var(--on-dark)}
.plist{border-top:1px solid var(--line);margin-top:9px;padding-top:8px}
.prow{padding:6px 0;border-top:1px dotted var(--line)}
.prow:first-child{border-top:none}
.prow .pn{font-size:15px;font-weight:700;color:var(--rock);text-decoration:underline;text-underline-offset:3px;
 text-decoration-color:var(--line-strong);cursor:pointer}
.prow .pq{font-size:10.5px;color:var(--text-muted);font-weight:400;margin-left:5px}
.prow .ps{display:block;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* ===== 詳細ページの日程バー ===== */
.dpick{background:var(--surface-1);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:14px 0 4px}
.dpick .dl{font-size:11.5px;font-weight:700;color:var(--text-muted);letter-spacing:.08em;margin-bottom:8px}
.dpick .row{display:flex;gap:5px;flex-wrap:wrap}
.dpick button{appearance:none;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-secondary);
 border-radius:6px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.dpick button:hover{border-color:var(--rock);color:var(--text-primary)}
.dpick button[aria-pressed="true"]{background:var(--rock);border-color:var(--rock);color:#fff}
.dpick button.we{color:var(--rock)}
.dpick button.we[aria-pressed="true"]{color:#fff}
.dpick button .dd{font-weight:400;opacity:.7;font-size:11px;margin-left:3px}
.dpick .cap2{font-size:12px;color:var(--text-secondary);margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
 font-variant-numeric:tabular-nums}
.dpick .cap2 b{color:var(--text-primary)}

@media(max-width:700px){
  #mxwrap{display:none}
  .taper div{font-size:10.5px}
  .taper div span{display:block;font-size:9px}
  .shbar div{font-size:9.5px;padding:0 2px;text-align:center;line-height:1.2}
  .tmarks{font-size:9.5px}
  .dpick button{padding:5px 10px;font-size:12.5px}
  #cards{display:block}
  .tag{margin-left:0;width:100%}
  .wrap{padding:0 12px 60px}
  header.site .inner{padding:0 12px}
  .phead .pn{font-size:22px}
  .nbs{gap:14px;justify-content:center}
  .card{padding:14px 13px}
  table.lr th,table.lr td{padding:6px 7px;font-size:12px}
  .cnt{margin-left:0;width:100%}
}
/* ---------- 帯のモバイル調整 ---------- */
@media(max-width:700px){
  .demoband{font-size:12px}
  .demoband .inner{padding:0 12px}
  .tabs{margin-top:12px}
  .tab{padding:8px 12px 7px;font-size:13px}
}