/* クライアント画面
 *
 * オーナー画面（owner/assets/app.css）と同じトークン・同じ見た目。
 * 編集フォームやパスワード表示など、クライアントに出さない部品は入れていない。
 *
 * ★ このファイルはブラウザから直接開ける。クライアントに出さない語を書かない。
 *   **ブランド名（ツール名）もここに書かない。** 複数のドメインが同じこのファイルを
 *   読むので、片方の名前を書くともう片方のクライアントに見えてしまう。
 *
 * ★ 色は必ず下の :root の変数を通す。個々の規則に色を直書きしない。
 *   ドメインごとのテーマ（client/lib/brand.php）が <html> に theme-* を付け、
 *   この変数だけを差し替えて配色を切り替えている。
 */
:root{
  /* --- ブランド色（テーマで差し替わる） --- */
  --main-color:#2E75B6;
  /* 目標以内の行の文字。下地の上でも読めるよう、主色より濃くする */
  --main-ink:#153d62;
  /* 自店の行・結論カードの下地（主色のごく薄い色） */
  --tint:#eaf2fa;
  /* 枠線だけのボタンにマウスを乗せたときの下地 */
  --tint-hover:#eef4fb;
  /* 横棒の塗り。濃い＝目標以内、薄い＝表の中の控えめな棒 */
  --fill-strong:rgba(46,117,182,.34);
  --fill-soft:rgba(46,117,182,.18);
  /* 印刷の横棒（インクを落とすので画面より薄い） */
  --fill-print:#d7e3f0;
  /* 表の見出し・注記の下地と、行にマウスを乗せたときの下地 */
  --surface-soft:#f1f4f8;
  --surface-hover:#f8fafc;
  /* 棒の下地（更新回数 / 時間帯別） */
  --track:#e9eef4;
  --track-hour:#e6eaef;
  /* ログイン画面の背景と、「?」の丸 */
  --login-bg:#eef2f7;
  --chip-bg:#dde3ea;
  /* お知らせ（青い枠）の下地と枠線 */
  --info-bg:#e7f1fb;
  --info-line:#b6d4f2;
  /* 更新した時刻の縦線と点の色。グリッド線（薄いグレー）とも順位の線とも変える */
  --mark-color:#6f42c1;
  --sidebar-bg:#1a2942;

  /* --- テーマで変えないもの --- */
  /* 増減の緑・赤は意味を持つ色なので、テーマ色と一緒に動かさない */
  --ok:#198754;
  --warn:#fd7e14;
  --bad:#dc3545;
  --mute:#6c757d;
  --sidebar-width:240px;
  --line:#e3e6ea;
  --bg:#f5f7fa;
}

/*
 * 濃い緑のテーマ。ツール名と配色だけがブランドで変わり、中身は共通。
 * ★ 主色は #1b6b43（白地とのコントラスト 6.5:1）。
 *   増加を示す緑 --ok（#198754・4.5:1）よりはっきり濃くして、見分けが付くようにしてある。
 * ★ 計測外の斜線などグレーの下地は変えない（意味を持つ模様なので）。
 */
:root.theme-green{
  --main-color:#1b6b43;
  --main-ink:#0f3d26;
  --tint:#e7f2ec;
  --tint-hover:#e2efe8;
  --fill-strong:rgba(27,107,67,.34);
  --fill-soft:rgba(27,107,67,.18);
  --fill-print:#d5e7dd;
  --surface-soft:#eff5f1;
  --surface-hover:#f6faf7;
  --track:#e4efe8;
  --track-hour:#e3ebe6;
  --login-bg:#edf3ef;
  --chip-bg:#d8e5dd;
  --info-bg:#e8f3ec;
  --info-line:#b7d8c4;
  /* 更新した時刻。濃い緑ともグリッド線のグレーとも重ならない色にする */
  --mark-color:#a21caf;
  --sidebar-bg:#10291c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#212529;
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:14px}
a{color:var(--main-color);text-decoration:none}

.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-width);height:100vh;
  background:var(--sidebar-bg);color:#cfd8e6;overflow-y:auto}
.sidebar-brand{padding:18px 16px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:11px 16px;color:#cfd8e6}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar nav a.active{background:var(--main-color);color:#fff}
/* ナビの区切り線と、その下のログアウト。ページ移動のリンクと見分けるため */
.sidebar nav .nav-sep{display:block;height:1px;margin:8px 12px;
  background:rgba(255,255,255,.16)}
.sidebar nav a.nav-out{color:#aab7cc}
.sidebar nav a.nav-out:hover{background:rgba(255,255,255,.06);color:#fff}

.main{margin-left:var(--sidebar-width)}
.topbar{display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-bottom:1px solid var(--line);padding:12px 20px}
.topbar h1{font-size:17px;margin:0}
.topbar-right{display:flex;align-items:center;gap:14px;color:#666}
.btn-plain{color:#666}
.page-content{padding:20px}

.section-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--main-color);
  border-radius:4px;padding:16px;margin-bottom:18px}
/* 枠のタイトルは短く・大きく太く。何を測った数字かは .sec-lead に書く */
.section-card h2{font-size:17px;font-weight:700;line-height:1.45;margin:0 0 5px}

.summary-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.summary-card{flex:1 1 150px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--main-color);border-radius:4px;padding:12px 14px}
.summary-card.ok{border-left-color:var(--ok)}
.summary-card.warn{border-left-color:var(--warn)}
.summary-card.bad{border-left-color:var(--bad)}
.summary-label{color:#6c757d;font-size:12px}
.summary-value{font-size:24px;font-weight:700;line-height:1.3}
.summary-sub{color:#868e96;font-size:12px}

.data-table{width:100%;border-collapse:collapse;background:#fff}
.data-table th,.data-table td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;white-space:nowrap}
.data-table th{background:var(--surface-soft);font-weight:500;color:#495057;font-size:13px}
.data-table tbody tr:hover{background:var(--surface-hover)}
/* 数値の列は、見出しも値も右寄せにそろえる（列がずれて見えないように）。
   バーを描いているセル（.cell-bar）は左寄せのままにする */
.data-table th.num,.data-table td.num{text-align:right}
.data-table td.num{font-variant-numeric:tabular-nums}

.filter-card{background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;margin-bottom:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.form-row{display:flex;flex-direction:column;gap:4px}
.form-row label{font-size:12px;color:#6c757d}
input,select,textarea{font-family:inherit;font-size:14px;padding:6px 8px;
  border:1px solid #ced4da;border-radius:3px;background:#fff}
button{font-family:inherit;font-size:14px;padding:6px 14px;border:0;border-radius:3px;
  background:var(--main-color);color:#fff;cursor:pointer}
button:disabled{background:#adb5bd;cursor:not-allowed}

.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;color:#fff}
.badge-ok{background:var(--ok)}
.badge-warn{background:var(--warn)}
.badge-bad{background:var(--bad)}
.badge-mute{background:var(--mute)}

.flash{padding:10px 14px;border-radius:4px;margin-bottom:14px}
.flash-info{background:var(--info-bg);border:1px solid var(--info-line)}
.flash-ok{background:#e8f6ee;border:1px solid #a9ddc0}
.flash-bad{background:#fdecec;border:1px solid #f3b7b7}

/* ログイン画面。背景はテーマで変わるので、login.php に直書きせずここで持つ */
body.is-login{background:var(--login-bg)}
.login-wrap{max-width:360px;margin:12vh auto;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--main-color);border-radius:4px;padding:26px}
.login-wrap h1{font-size:17px;margin:0 0 18px}
.login-wrap .form-row{margin-bottom:12px}
.login-wrap input{width:100%}
.login-wrap button{width:100%;padding:9px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}

.text-mute{color:#868e96}
.text-warn{color:var(--warn)}
.text-bad{color:var(--bad);font-weight:700}
.note{color:#6c757d;font-size:12px;line-height:1.7;margin:10px 0 0}
.chart-box{position:relative;height:300px}
.two-col{display:flex;gap:18px;flex-wrap:wrap}
.two-col>*{flex:1 1 320px}

/*
 * 「順位ごとの時間」と「更新ログ」を横2列で並べる組（レポートページ）。
 * ★ 幅は左右同じ。表が広くても縮むよう min-width:0 を入れる。
 * ★ 高さは flex の既定（stretch）でそろう。そのうえで枠を縦の flex にして、
 *   余った高さを .tbl-box に渡し、**はみ出す側だけ**を枠の中でスクロールさせる。
 * ★ 枠の間隔は .two-col の gap（18px）＝ほかの枠の間隔と同じ。
 */
.two-col.is-pair>.section-card{display:flex;flex-direction:column;min-width:0}
/* ★ flex-basis は 0。auto にすると表の高さそのものが枠の高さになり、
   枠が伸び切ってスクロールしなくなる（相方より高くなってしまう）。 */
.two-col.is-pair>.section-card>.tbl-box{flex:1 1 0;max-height:none;min-height:180px}
/* 相方の枠が出ない日（順位の内訳が作れない日）は、1枚で伸び切らないよう元に戻す */
.two-col.is-pair>.section-card:only-child>.tbl-box{flex:none;max-height:320px;min-height:0}

/* 更新した時刻 / 同じ一覧の店舗（owner/shop.php の2枚を移植したもの）。
   行数が多い日は箱の中だけをスクロールさせ、見出しは貼りつけておく */
.tbl-box{max-height:320px;overflow-y:auto;overflow-x:hidden;border:1px solid var(--line)}
.tbl-box .data-table th{position:sticky;top:0;z-index:1}
.tbl-box .data-table tr:last-child td{border-bottom:0}
.wl-table th a{color:inherit;text-decoration:none;white-space:nowrap}
.wl-table th a:hover{text-decoration:underline}

.table-scroll{overflow-x:auto}
.table-scroll pre{margin:0;font-size:12px;line-height:1.6}

/* ---- クライアント画面だけの追加 ---- */
/* サイドバーに自店の名前を出す。どの店として見ているかを常に分かるようにする */
.sidebar-shop{padding:12px 16px;color:#fff;font-weight:500;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.1);line-height:1.5}

/* 日付の切り替え。ページの一番上に置く */
.date-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.date-bar .spacer{flex:1 1 auto}

/* 数字を並べる小さな表（対象店との勝負など） */
.kv-table th{width:auto;white-space:nowrap}

/* 画面が狭いとき（クライアントはスマホで見ることがある） */
@media (max-width: 760px) {
  /*
   * 横2列をやめて縦に積む（順位ごとの時間 → 更新ログ）。
   * 高さ揃えを解除し、更新ログは元どおり箱の中だけをスクロールさせる。
   */
  .two-col.is-pair>.section-card{display:block}
  .two-col.is-pair>.section-card>.tbl-box{flex:none;max-height:320px;min-height:0}
  .sidebar{position:static;width:auto;height:auto}
  .sidebar nav{display:flex;flex-wrap:wrap}
  .sidebar nav a{flex:1 1 auto;justify-content:center}
  /* 横並びになるので、区切り線は1行ぶんの幅を取ってログアウトを次の行へ送る */
  .sidebar nav .nav-sep{flex:0 0 100%;margin:0}
  .main{margin-left:0}
  .page-content{padding:14px}
  .chart-box{height:260px}
  /* 固定バーの左寄せを戻す指定は、.refresh-bar の定義より後ろに置いてある
     （このファイルの末尾。同じ強さなので、後に書いたほうが効く） */
}


/* サマリーカードの説明（ツールチップ）。CSS だけで出す。ライブラリは足さない。
   マウスはカード全体のホバーで、スマートフォンは「?」をタップ（:focus）で出る。 */
.summary-card{position:relative}
.help{display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:5px;border-radius:50%;
  background:var(--chip-bg);color:#495057;font-size:10px;font-weight:700;
  line-height:1;vertical-align:middle;cursor:help;user-select:none}
.help:focus{outline:2px solid var(--main-color);outline-offset:1px}
.help-body{position:absolute;left:0;top:100%;z-index:30;
  width:min(330px,84vw);margin-top:6px;padding:9px 11px;
  background:var(--sidebar-bg);color:#fff;border-radius:4px;
  font-size:12px;font-weight:400;line-height:1.7;text-align:left;
  white-space:pre-line;box-shadow:0 4px 14px rgba(0,0,0,.25);
  visibility:hidden;opacity:0;transition:opacity .12s}
.summary-card:hover .help-body,
.summary-card:focus-within .help-body,
.help:hover .help-body,
.help:focus .help-body,
.help:active .help-body{visibility:visible;opacity:1}


/* グラフの時間帯の切り替え（全日 / 00-06 …）。描画範囲を変えるだけで集計はやり直さない */
.range-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.range-tabs button{background:#fff;color:#495057;border:1px solid var(--line);
  padding:4px 12px;font-size:12px;border-radius:3px;cursor:pointer}
.range-tabs button:hover{background:var(--surface-soft)}
.range-tabs button.is-on{background:var(--main-color);color:#fff;border-color:var(--main-color)}
.range-msg{margin:0 0 10px}
.chart-box.tall{height:450px}
/* 順位推移グラフの更新マーカー（▲）のツールチップ。Chart.js の外に自前で出す */
.mk-tip{position:absolute;transform:translate(-50%,-100%);margin-top:-4px;pointer-events:none;
  background:rgba(0,0,0,.8);color:#fff;font-size:11px;line-height:1.4;white-space:nowrap;
  padding:3px 7px;border-radius:3px;z-index:5}
.mk-tip[hidden]{display:none}

/* 順位推移グラフの横スクロール（時間帯を絞ったときだけ。全日はこれまでどおり） */
.cs-pane{height:100%;overflow:hidden}
.cs-pane.is-scroll{overflow-x:auto;overflow-y:hidden}
.cs-inner{position:relative;height:100%}
.cs-pane.is-drag{cursor:grabbing;user-select:none}
.cs-axis{position:absolute;left:0;top:0;z-index:2;pointer-events:none}
.cs-axis[hidden]{display:none}
.cs-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;
  margin:8px 0 0;font-size:12px;color:#495057}
.cs-legend[hidden]{display:none}
.cs-lg{display:inline-flex;align-items:center;gap:6px}
.cs-lg i{display:inline-block;width:22px;height:10px;border:1px solid;border-radius:2px}
/* 実線・塗り・点線・縦線を、そのままの形で見せる凡例（client/index.php が作る） */
.cl-item{display:inline-flex;align-items:center;gap:6px}
.cl-sw{display:inline-flex;align-items:center;line-height:0}

/* 自動更新バー（画面最下部に固定）。サイドバーに重ならないよう右へずらす */
.refresh-pad{height:48px}
.refresh-bar{position:fixed;left:var(--sidebar-width);right:0;bottom:0;z-index:2000;
  height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 16px;background:var(--main-color);color:#fff;font-size:13px}
.refresh-bar.is-off{background:var(--mute)}
.refresh-bar .rb-center{font-variant-numeric:tabular-nums}
.refresh-bar button{background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.55);padding:3px 12px;font-size:12px;
  border-radius:3px;cursor:pointer}
.refresh-bar button:hover{background:rgba(255,255,255,.3)}

/* 順位表モーダル（順位推移グラフの点をクリックすると出る） */
body.rm-open{overflow:hidden}
.rank-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3000;display:flex;
  align-items:center;justify-content:center;padding:16px}
.rank-modal[hidden]{display:none}
.rm-back{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.45)}
.rm-box{position:relative;background:#fff;border-radius:4px;width:100%;max-width:420px;
  max-height:84vh;display:flex;flex-direction:column;box-shadow:0 8px 28px rgba(0,0,0,.3)}
.rm-head{display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line);background:var(--surface-soft);border-radius:4px 4px 0 0}
.rm-head h3{margin:0;font-size:15px;flex:1;text-align:center;white-space:nowrap}
/* 色は素の button（青ベタ・白文字）と button:disabled をそのまま使う。大きさだけ絞る */
.rm-head button{padding:4px 10px;font-size:12px;white-space:nowrap}
.rm-head .rm-x{font-size:16px;line-height:1;padding:3px 9px}
.rm-body{overflow-y:auto;flex:1}
.rm-body .data-table td{padding:6px 10px}
.rm-body tr.is-own td{background:#fff3cd;font-weight:700}
.rm-body tr.is-void td{color:#adb5bd}
.rm-note{margin:0;padding:8px 12px;border-top:1px solid var(--line)}

/* ============================================================
 *  効果の画面（2026-09-30 の作り直し）
 *
 *  スマートフォンで見られる前提。360px 幅で崩れないこと・横スクロールを
 *  出さないことを最優先にしてある。数字は大きく、余白は広く。
 * ============================================================ */

/* 日付の切り替え。プルダウンと「今日に戻る」を1行に置く。
   360px で収まらなければ縦に積む。指で押せるよう高さは 44px 以上にしてある。 */
.day-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.day-label{color:#6c757d;font-size:12px;white-space:nowrap}
.day-bar select{flex:1 1 180px;min-width:0;min-height:44px;padding:8px 10px;
  font-size:15px;background:#fff;border:1px solid #ced4da;border-radius:4px}
.btn-today{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:8px 16px;white-space:nowrap;
  background:#fff;color:var(--main-color);border:1px solid var(--main-color);
  border-radius:4px;font-size:14px}
.btn-today:hover{background:var(--tint-hover)}

/* 日別の表から、その日のグラフへ飛べるようにする */
.hist-table a.day-link{display:inline-block;font-variant-numeric:tabular-nums}

/* (1) 最上部：結果を1文で */
.hero{border-top-width:4px}
.hero-line{margin:0;font-size:17px;line-height:1.9}
.hero-rank{color:var(--main-color)}
.hero-time{font-size:30px;font-weight:700;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-sub{margin:8px 0 0;color:#6c757d;font-size:13px}
.hero-state{margin:12px 0 0;font-size:13px;color:#495057}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:7px;vertical-align:middle;background:var(--mute)}
.dot-ok{background:var(--ok)}
.dot-bad{background:var(--bad)}
.dot-mute{background:var(--mute)}

/* (2) 比較3つ。狭い画面では縦積みになる */
.cmp-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cmp-card{flex:1 1 180px;min-width:0;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:14px}
.cmp-label{color:#6c757d;font-size:12px;line-height:1.6}
.cmp-value{font-size:22px;font-weight:700;margin-top:2px;
  font-variant-numeric:tabular-nums}
.cmp-diff{margin-top:4px;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums}
/* 増えた＝緑 / 減った＝赤。減った日もそのまま赤で出す */
/*
 * 増減。★ 緑・赤は意味を持つ色なので、テーマ色と一緒に動かさない。
 *   ただしテーマが緑のときは主色と紛れうるので、**色だけに頼らない**。
 *   レポートページは矢印のアイコン、表は下の ▲▼ で、色が見えなくても向きが分かる。
 */
.up{color:var(--ok)}
.down{color:var(--bad)}
.flat{color:var(--mute)}
td.up,td.down,td.flat{font-weight:700}
/* ★ 緑のテーマのときだけ、表の数字にも向きの記号を足す。
   レポートページの比較カードは矢印のアイコンが入っているが、表には入る場所が無く、
   テーマ色の濃い緑と増加の緑が近いので、色が見えなくても向きが分かるようにする。
   青のテーマはこれまでどおり（見た目を変えない）。
   増減なし（.flat）は本文がすでに「±0回」「同じ」なので記号を足さない。 */
:root.theme-green td.up::before{content:"\25B2 "}
:root.theme-green td.down::before{content:"\25BC "}

/* 稼働していた時間。見出しの1文のすぐ下に置く */
.uptime{margin:10px 0 0;color:#495057;font-size:14px}
.uptime b{font-variant-numeric:tabular-nums}
/* 稼働時間から外したまとまりの補足。小さく添えるだけ */
.uptime-sub{margin:3px 0 0;color:#868e96;font-size:12px}
/* 進行中の日の比較は、同じ時刻までで切っていることを先に書く */
.cmp-note{margin:0 0 8px;color:#495057;font-size:13px}
/* 進行中の「残り N回」は中立の色にする（使い残しではない） */
.use-rest.is-plain{background:#eef1f5;color:#495057;font-weight:400}

/* ---- 競合の順位（レポートページの表。2026-09-30 に rivals.php から統合） ---- */
/* 自店が何番目か。★ 主役は「目標以内にいた時間」で、平均順位は括弧の補足 */
.rv-pos{margin:0 0 12px;font-size:15px}
.rv-pos b{font-variant-numeric:tabular-nums}
.rv-pos-main{font-size:17px}
.rv-pos-main b{font-size:19px}
.rv-pos-sub{display:inline-block;margin-left:4px;color:#6c757d;font-size:13px}
/* 広告枠についての注記。表の直上に置く */
.rv-ad{margin:0 0 12px;padding:10px 12px;border-radius:4px;background:var(--surface-soft);
  color:#495057;font-size:13px;line-height:1.8}
.rv-hint{margin:0 0 6px}
/* 一覧に出ていた間しか観測できないことの注記 */
.rv-caveat{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:#495057}

.rv-table td,.rv-table th{padding:8px 10px}
/* 店名は折り返す。省略記号で切らない（どの店か分からなくなるため） */
.rv-table td.rv-name,.rv-table th:first-child{white-space:normal;word-break:break-word;
  min-width:120px}
/* 数字の列は中身の幅で止める。列を減らしたときに、余った幅は店名と棒の列へ回す */
.rv-table th.num,.rv-table td.num{width:1%}
.rv-table tr.is-own td{background:var(--tint);font-weight:700}
.rv-table tr.is-own .cb-fill{background:var(--fill-strong)}
.rv-table tr.is-own .cb-low{background:rgba(108,117,125,.34)}
.rv-table tr.rv-row{cursor:default}
.rv-table tr.rv-more td{background:var(--surface-hover);color:#495057;font-size:13px}



/* タイトルの下の説明行。全部の枠でこの組み方にそろえる */
.sec-lead{margin:0 0 12px;color:#6c757d;font-size:13px;line-height:1.7}

/* (7) 時間帯ごとの上位表示。
   棒は「1時間ぶんの下地」の上に描く。下地があることで、
   1時間のうちどれだけ埋まったかが目で分かる。色は1色だけ使う。 */
.hb-list{list-style:none;margin:0;padding:0}
.hb-list li{display:flex;align-items:center;gap:8px;padding:3px 0;flex-wrap:wrap}
.hb-h{flex:0 0 38px;color:#495057;font-size:13px;text-align:right;
  font-variant-numeric:tabular-nums}
.hb-track{flex:1 1 auto;min-width:60px;height:14px;border-radius:7px;
  background:var(--track-hour);overflow:hidden;display:flex}
/*
 * 棒は「計測外（前）／目標以内／それ以外／計測外（後）」の4区間を横に並べる。
 * 角の丸めは外側の .hb-track（overflow:hidden）に任せ、区間どうしの境目は角を立てる。
 */
.hb-track>i{display:block;height:100%;background:var(--main-color)}
/* それ以外（計測できていて目標より下）。下地のまま伸びて、後ろの斜線を右端へ送る */
.hb-rest{flex:1 1 auto;min-width:0}
/* 計測していない時間。斜線で示す。色では意味を表さない */
.hb-nodata{display:block;height:100%;flex:0 0 auto;
  background:repeating-linear-gradient(45deg,#e5e7eb 0 4px,#f3f4f6 4px 8px)}
.hb-v{flex:0 0 150px;font-size:13px;text-align:right;
  font-variant-numeric:tabular-nums}
.hb-den{color:#868e96}
/* 丸1時間ぶん計測できなかった時間帯の但し書き。狭い画面では次の行に落とす */
.hb-meas{color:#868e96}
.hb-total{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);
  text-align:right;font-size:14px}
.hb-total b{font-size:17px;font-variant-numeric:tabular-nums}

/* (8) 何位のあたりにいたか。まず結論の2行、その下に順位ごとの明細 */
.rk-top{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.rk-big{flex:1 1 150px;min-width:0;border-radius:4px;padding:11px 14px}
.rk-big.is-in{background:var(--tint);border-left:4px solid var(--main-color)}
.rk-big.is-out{background:#f1f3f5;border-left:4px solid var(--mute)}
.rk-big-label{font-size:13px;color:#495057}
.rk-big.is-in .rk-big-label{color:var(--main-color);font-weight:700}
.rk-big-val{font-size:26px;font-weight:700;line-height:1.3;
  font-variant-numeric:tabular-nums}
.rk-big.is-out .rk-big-val{color:#6c757d}

.rk-table{margin-top:2px}
.rk-table td,.rk-table th{padding:7px 10px}
/* 目標の内は色付き、外はグレー。色で内外が分かるようにする */
.rk-table tr.is-in td{color:var(--main-ink)}
.rk-table tr.is-in .cb-fill{background:var(--fill-strong)}
.rk-table tr.is-below td{color:#6c757d}
.rk-table tr.is-below .cb-fill{background:rgba(108,117,125,.22)}
/* 目標ラインの位置の区切り。文字でも「ここまでが目標」と書く */
.rk-table tr.rk-div td{padding:0;border-bottom:0}
.rk-table tr.rk-div span{display:flex;align-items:center;gap:8px;
  padding:6px 0;color:var(--main-color);font-size:12px;white-space:nowrap}
.rk-table tr.rk-div span::before,.rk-table tr.rk-div span::after{
  content:"";flex:1 1 auto;height:0;border-top:2px dashed var(--main-color);opacity:.55}
.rk-foot{margin:10px 0 0;font-size:15px}
.rk-foot b{font-variant-numeric:tabular-nums}

/* 順位の内訳でも横棒を使う。行の余白は rk-table にそろえる */
.rk-table td.cell-bar{padding:7px 10px}

/* (9) 状態表示。画面のいちばん下に控えめに置く */
.day-state{margin:0 0 18px;color:#495057;font-size:13px}

/* (3) 更新の使用状況 */
.use-line{margin:0;font-size:15px;line-height:1.9}
.use-num{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.use-rest{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:10px;
  background:#fff3cd;color:#8a6100;font-size:12px;font-weight:700;white-space:nowrap}
.bar{position:relative;height:14px;margin:12px 0 0;border-radius:7px;
  background:var(--track);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--main-color);border-radius:7px}
.bar-foot{display:flex;justify-content:space-between;margin:5px 0 0;
  color:#868e96;font-size:12px}

/* (4) グラフの下の1行（任意機能・既定 OFF） */
.market-note{margin:10px 0 0;padding:9px 12px;border-radius:4px;
  background:var(--surface-soft);color:#495057;font-size:13px;line-height:1.7}

/* 日別の表。時間の列に横棒を重ねる */
.hist-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px}
.hist-head h2{margin:0}
.btn-print{background:#fff;color:var(--main-color);border:1px solid var(--main-color);
  padding:6px 14px;border-radius:3px;cursor:pointer;white-space:nowrap}
.btn-print:hover{background:var(--tint-hover)}
td.cell-bar{position:relative;min-width:130px;padding:9px 10px;
  white-space:nowrap;overflow:hidden}
.cb-fill{position:absolute;left:0;top:3px;bottom:3px;
  background:var(--fill-soft);border-radius:0 3px 3px 0}
/* 競合の表の横棒は「目標以内（青）＋目標より下（グレー）」を1本につなげる。
   2つを足した長さが、その店が一覧に表示されていた時間になる。
   ★ .cb-fill と同じ強さなので、打ち消す側のこの2つは必ず後ろに置くこと */
.cb-fill.has-low{border-radius:0}
.cb-low{background:rgba(108,117,125,.22)}
.cb-text{position:relative;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}

/* 狭い画面（クライアントはスマートフォンで見る）。360px で崩れないこと */
@media (max-width: 420px) {
  .page-content{padding:12px}
  .section-card{padding:13px}
  .hero-line{font-size:15px;line-height:2}
  .hero-time{font-size:26px}
  .use-num{font-size:22px}
  /* 比較3つは縦積み。横に並べると 360px で数字が折れる */
  .cmp-card{flex:1 1 100%}
  .cmp-value{font-size:20px}
  /* 追加2：ラベルを短くしたぶん、分数の欄を詰めて1行に収める */
  .hb-h{flex:0 0 30px;font-size:12px}
  .hb-v{flex:0 0 104px;font-size:12px}
  /* 「（計測30分）」は次の行に落とす。ふつうの時間帯は1行のままにする */
  .hb-meas{display:block;font-size:11px}
  .hb-track{min-width:40px}
  .hb-list li{gap:5px}
  .sec-lead{font-size:12px}
  .rk-big{flex:1 1 100%}
  .rk-big-val{font-size:22px}
  .uptime{font-size:13px}
  .rv-pos{font-size:14px}
  /* 追加3：2列だけなので、順位の列は折り返さない */
  .rk-table td,.rk-table th{padding:6px 5px}
  /* 360px でプルダウンと「今日に戻る」が1行に収まらないときは縦に積む */
  .day-bar{gap:8px}
  .day-bar select{flex:1 1 100%}
  .btn-today{flex:1 1 100%}
  .day-label{flex:1 1 100%}
  .chart-box{height:240px}
  /* 表は横スクロールを出さずに詰める。
     既定の white-space:nowrap を解いて、見出しと項目名を折り返させる */
  .data-table th,.data-table td{padding:8px 5px;font-size:13px;white-space:normal}
  .data-table th.num,.data-table td.num,.data-table .nowrap,.cb-text{white-space:nowrap}
  td.cell-bar{min-width:0}
  .refresh-bar{padding:0 10px;font-size:12px;gap:6px}
  .refresh-bar button{padding:3px 8px}
  /*
   * 360px では、バー（高さ40px固定）の中で文字が折り返して読めなくなる。
   * 補足と次回読込の表示を省いて、状態と切り替えボタンだけを1行に収める。
   */
  .refresh-bar .rb-center{display:none}
  .refresh-bar .rb-left,.refresh-bar .rb-right{white-space:nowrap}
  .topbar{padding:10px 12px}
  .topbar h1{font-size:15px}
}

/* 競合の順位の表：広い画面では6列すべて出し、行を開く仕掛けは使わない */
@media (min-width: 561px) {
  .rv-more{display:none !important}
  .rv-hint{display:none}
}
/* 狭い画面では3列（店名・目標以内にいた時間・目標より下にいた時間）に絞り、
   残り（平均順位・最高位・最低位）は行をおして開く */
@media (max-width: 560px) {
  .rv-table .col-more{display:none}
  .rv-pos-main{font-size:15px}
  .rv-pos-main b{font-size:17px}
  .rv-pos-sub{display:block;margin-left:0}
  .rv-table tr.rv-row{cursor:pointer}
  .rv-table td,.rv-table th{padding:8px 6px;font-size:13px}
  .table-scroll{overflow-x:visible}
}

/* 印刷用に焼いたグラフ画像。画面では出さない
   （@media print より前に置くこと。後ろだと印刷側の display:block を打ち消す） */
.print-img{display:none}

/* 印刷（クライアントへの報告資料。A4縦1枚）
   ナビゲーション・ボタン・自動更新バーは出さない。 */
.print-head{display:none}
@media print {
  @page { size: A4 portrait; margin: 10mm 10mm; }
  :root{--line:#bbb}
  body{background:#fff;font-size:10pt}
  .sidebar,.topbar,.refresh-bar,.refresh-pad,.no-print,
  .range-tabs,.mk-tip,.rank-modal{display:none !important}
  .main{margin-left:0}
  .page-content{padding:0}
  .print-head{display:block;margin:0 0 3mm;padding-bottom:1.5mm;
    border-bottom:1.2pt solid #333}
  .print-title{font-size:15pt;font-weight:700}
  .print-sub{font-size:9pt;color:#444;margin-top:2mm}
  .section-card{border:0;border-top:0;padding:0;margin:0 0 3mm}
  /* まとめとグラフは途中で切らない。日別の表は行数が多いので切ってよい */
  .section-card+.section-card{break-inside:avoid;page-break-inside:avoid}
  .section-card h2{font-size:11pt;margin:0 0 2mm;
    border-bottom:.5pt solid #999;padding-bottom:1mm}
  .data-table{font-size:7.5pt;line-height:1.25}
  .data-table th,.data-table td,
  td.cell-bar{padding:.25mm 1.5mm;border-bottom:.3pt solid #ccc}
  /* 横棒は行の高さぶんに収める（画面と同じ 3px の余白だと行が高くなる） */
  .cb-fill{top:.3mm;bottom:.3mm}
  /* 行は途中で切らない。表そのものは、日数が多いときだけ次ページへ送る */
  .data-table tr{break-inside:avoid;page-break-inside:avoid}
  .data-table th{background:#eee !important;-webkit-print-color-adjust:exact;
    print-color-adjust:exact}
  .cb-fill{background:var(--fill-print) !important;-webkit-print-color-adjust:exact;
    print-color-adjust:exact}
  /* 目標より下の側はグレーのまま（上の !important より後ろに置くこと） */
  .cb-low{background:#e6e6e6 !important}
  .up,.down,.flat{color:#000}
  /* 追加した指標も紙に載せる。棒の塗りは色を落とさない */
  .hb-nodata{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hb-track,.hb-track>i,.cb-fill,.bar>span,.rk-big{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hb-list li{padding:.4mm 0}
  .hb-track{height:2.6mm}
  .hb-total{margin:1.5mm 0 0;padding-top:1mm;font-size:8pt}
  .hb-total b{font-size:9.5pt}
  .sec-lead{margin:0 0 1.5mm;font-size:8pt}
  .rk-top{gap:3mm;margin:0 0 2mm}
  .rk-big{padding:1.5mm 2mm}
  .rk-big-val{font-size:12pt}
  .rk-table tr.rk-div span{padding:1mm 0;font-size:7.5pt}
  .rk-foot{font-size:9pt;margin:1.5mm 0 0}
  .day-state{font-size:8pt;margin:0 0 2mm}
  /*
   * グラフは画面で描いた canvas を縮めて載せる。
   * Chart.js が canvas に inline の height を付けるので、!important で上書きする。
   * 30日ぶんの表とまとめを載せても A4 縦1枚に収まる高さにしてある。
   */
  /* canvas は印刷で白紙になることがあるので、焼いた画像のほうを載せる */
  .chart-box{display:none}
  /* グラフを出さないので、横スクロール用の凡例と影も出さない */
  .cs-legend{display:none !important}
  .cs-wrap::after{display:none}
  .print-img{display:block;width:100%;height:30mm;object-fit:contain;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .section-card{margin:0 0 4mm}
  .section-card h2{font-size:10pt;margin:0 0 1.5mm}
  .print-head{margin:0 0 4mm}
  /* 紙では説明文を落として1枚に収める。残すものには print-keep を付ける */
  .note{display:none}
  .note.print-keep{display:block;font-size:7.5pt;color:#333;margin:1.5mm 0 0}
  .page-foot{display:block;margin-top:3mm;padding-top:1.5mm;
    border-top:.5pt solid #999;font-size:7.5pt;color:#444}
  /* 更新ログ / 競合の順位。紙では箱で切らずに全部の行を出す */
  .two-col{display:block}
  .tbl-box{max-height:none;overflow:visible;border:0}
  .tbl-box .data-table th{position:static}
  /*
   * 紙でも「順位ごとの時間」と「更新ログ」は横並びにする。
   * ★ 高さはそろえない（align-items:flex-start）。そろえるとスクロールが要るが、
   *   紙ではスクロールできないので、行が途中で切れてしまう。
   * ★ max-height を外して全行を出す。上の .tbl-box より指定が強いので、
   *   ここでも同じ強さで打ち消しておく。
   * 紙幅に収まらないときは flex-wrap で縦積みに落ちる。
   */
  .two-col.is-pair{display:flex;gap:6mm;align-items:flex-start}
  .two-col.is-pair>.section-card{display:block}
  .two-col.is-pair>.section-card>.tbl-box{flex:none;max-height:none;min-height:0;
    overflow:visible}
  .table-scroll{overflow-x:visible}
  .rv-pos{font-size:9pt;margin:0 0 2mm}
  .rv-pos-main{font-size:10pt}
  .rv-pos-main b{font-size:11pt}
  .rv-pos-sub{font-size:8pt}
  .rv-ad{font-size:7.5pt;padding:1.5mm 2mm;margin:0 0 2mm;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rv-table td,.rv-table th{padding:1mm 1.5mm}
  .rv-table tr.is-own td{background:#eee;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* 画面下のフッター。ブランド名を常に出す */
.page-foot{margin:6px 0 0;color:#868e96;font-size:12px;text-align:right}

/* 狭い画面での固定バー。
   ★ .refresh-bar{position:fixed;left:var(--sidebar-width)} より後ろに置くこと。
     同じ強さなので、前に書くと打ち消されて 360px でバーが右にずれる。 */
@media (max-width: 760px) {
  .refresh-bar{left:0}
}

/* 順位推移グラフの高さ。
   ★ .chart-box.tall{height:450px} より後ろに置くこと（同じ強さなので後勝ち）。
   オーナー画面と同じ450pxのままだと、スマートフォンでは画面の大半を占めてしまう。
   縦線が読める高さは確保しつつ少し詰める。 */
@media (max-width: 760px) {
  .chart-box.tall{height:360px}
}

/* 順位推移グラフの横スクロール。
   ★ .chart-box.tall{height:450px} より後ろに置くこと（同じ強さなので後勝ち）。

   スクロールは .cs-pane の中だけで完結させ、ページ本体は横に動かさない。
   右端にグラデーションの影を出して、まだ先があることを示す。 */
.cs-wrap{position:relative;max-width:100%;overflow:hidden}
.cs-wrap .chart-box{max-width:100%}
.cs-wrap::after{
  content:"";position:absolute;top:0;right:0;width:26px;
  /* 凡例のぶんは覆わない。グラフの面だけに影を落とす */
  height:calc(100% - 26px);
  pointer-events:none;
  background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92));
}
/* 指で横に流せるように（縦のページスクロールは邪魔しない） */
.cs-pane.is-scroll{-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}

@media (max-width: 760px) {
  .cs-wrap::after{width:18px}
}