/* homura-ops — 携帯の1画面で読めることだけを狙う。装飾は最小限 */
:root{
  --navy:#1f3b5e; --ink:#16202c; --mute:#5a6673; --line:#e3e7ec;
  --bg:#f5f6f8; --card:#fff; --chip:#eef1f5; --soft:#fafbfc;
  /* 状態色は 赤／青。緑は使わない（赤緑は第2色覚で潰れる・日本の会計慣行にも合う） */
  --minus:#b4272b; --plus:#1a56a0;
  --minus-bg:#fbe9e9; --plus-bg:#e6effa;
  /* カテゴリ色は状態色と役割を分ける（良し悪しを意味しない） */
  --cat1:#1f3b5e; --cat2:#4f8fd6; --cat3:#9bbce8; --cat4:#d6a95c;
  /* 旧クラス名の互換（ok=先行→青 / behind=遅れ→赤） */
  --ok:var(--plus); --behind:var(--minus);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:15px; line-height:1.55;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
}
main{padding:10px 10px 4px}

/* 上のバー */
.top{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff}
.brandbar{display:flex;align-items:baseline;gap:10px;padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top))}
.logo{font-weight:700;letter-spacing:.02em}
.asof{font-size:11px;opacity:.85}

/* 下のタブ */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;
  background:#fff;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs a{flex:1;text-align:center;padding:12px 4px;color:var(--mute);text-decoration:none;font-size:12px}
.tabs a.on{color:var(--navy);font-weight:700;box-shadow:inset 0 2px 0 var(--navy)}

/* 切替チップ */
.switch{margin:0 0 10px}
.switch .row{display:flex;gap:6px;margin-bottom:6px}
.chip{
  flex:1;text-align:center;padding:9px 4px;border-radius:999px;background:var(--chip);
  color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;border:1px solid transparent;
}
.chip.small{font-size:13px;font-weight:500}
.chip.on{background:var(--navy);color:#fff}

/* カード */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 10px}
.card h2{font-size:13px;margin:0 0 8px;color:var(--navy);font-weight:700}
.hero .label{margin:0;font-size:12px;color:var(--mute)}
.hero .big{margin:2px 0 0;font-size:34px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.hero .sub{margin:2px 0 10px;font-size:11px;color:var(--mute)}
.pop{display:inline-block;font-size:10px;color:var(--mute);font-weight:400}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.grid3>div{background:#fafbfc;border-radius:8px;padding:7px 8px;min-width:0}
.grid3 .k{display:block;font-size:10px;color:var(--mute)}
.grid3 .v{display:block;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 目標ブロック: 語＋金額が主（大きい）、達成率リングは従（小さい）。判定は達成率でなく「本日までの目標」との差 */
.target{padding:10px 0;border-top:1px solid var(--line)}
.target:first-of-type{border-top:0;padding-top:0}
.tname{margin:0;font-size:12px;font-weight:700}
.tword{margin:4px 0}
.tline{margin:0;font-size:12px;font-variant-numeric:tabular-nums}
.tline3{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--mute);margin-top:6px;
        font-variant-numeric:tabular-nums}
.ring{border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.ring span{width:74%;height:74%;border-radius:50%;background:var(--card);display:grid;place-items:center;
           font-size:9px;font-weight:800;color:var(--ink)}
.tinfo{min-width:0}
.tval{margin:2px 0;font-size:17px;font-weight:800}
.tsub{margin:0;font-size:11px;color:var(--mute);line-height:1.5}

/* 状態の3値。必ず 記号＋語＋金額 とセットで使う（色だけに意味を持たせない） */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
      font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.pill.minus{background:var(--minus-bg);color:var(--minus)}
.pill.plus{background:var(--plus-bg);color:var(--plus)}
.pill.even,.pill.none{background:var(--chip);color:var(--mute)}
.minus,b.minus,td.minus,span.minus{color:var(--minus)}
.plus,b.plus,td.plus,span.plus{color:var(--plus)}
.even,.none{color:var(--mute)}
b.ok,span.ok{color:var(--plus)}
b.behind,span.behind{color:var(--minus)}
.na{color:var(--mute)}
/* 予測・途中値: ◇ と グレー と 破線 の3重で確定値と区別する */
.fc{color:var(--mute);border-bottom:1px dashed var(--mute)}
.card.partial{border-style:dashed}

/* 表 */
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:10px;color:var(--mute);font-weight:600;text-align:right;padding:4px 3px;border-bottom:1px solid var(--line)}
th:first-child{text-align:left}
td{padding:7px 3px;border-bottom:1px solid #f1f3f6;vertical-align:top}
td.name{font-weight:600;min-width:34%}
td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.src{font-size:10px;color:var(--mute);text-align:right;max-width:38%}
tr.sum td{border-top:2px solid var(--line);font-weight:700}

/* アラート */
.alerts{background:#fff4f4;border:1px solid #f0cfcf;border-radius:12px;padding:10px 12px;margin:0 0 10px}
.alerts p{margin:0 0 6px;font-size:12px;line-height:1.55}
.alerts p:last-child{margin:0}

/* 鮮度 */
.fresh ul{list-style:none;margin:0;padding:0}
.fresh li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12px;padding:4px 0;border-bottom:1px solid #f1f3f6}
.fresh .k{flex:0 0 32%;color:var(--mute)}
.fresh .v{font-weight:700;font-variant-numeric:tabular-nums}
.fresh .note{flex-basis:100%;margin:0}

.note{font-size:11px;color:var(--mute);margin:8px 0 0;line-height:1.55}
.note.pad{padding:0 4px 10px}
.soon{font-size:22px;font-weight:800;color:var(--mute);margin:6px 0}
.todo{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--ink)}
.todo li{margin-bottom:4px}
.linebox{padding:8px 0;border-top:1px solid var(--line)}
.linebox:first-of-type{border-top:0}
.linebox .label{margin:0;font-size:12px;font-weight:700}

.btn{
  margin-top:10px;width:100%;padding:11px;border-radius:9px;border:1px solid var(--navy);
  background:#fff;color:var(--navy);font-size:14px;font-weight:700;cursor:pointer;
}
.btn:active{background:var(--navy);color:#fff}

/* ログイン */
.login{max-width:340px;margin:12vh auto;padding:0 18px;text-align:center}
.login h1{font-size:24px;margin:0;color:var(--navy)}
.login .sub{margin:2px 0 18px;font-size:12px;color:var(--mute)}
.login input{
  width:100%;padding:13px;font-size:16px;border:1px solid var(--line);border-radius:9px;margin-bottom:10px;
}
.login button{
  width:100%;padding:13px;font-size:15px;font-weight:700;border:0;border-radius:9px;
  background:var(--navy);color:#fff;cursor:pointer;
}
.login .err{color:var(--behind);font-size:13px;margin:0 0 10px;font-weight:600}
.login .note{text-align:left}

/* ダークは状態色も作り直す。暗い地の上では #b4272b/#1f3b5e はコントラストが足りない（AA不合格） */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e9edf2;--bg:#12171d;--card:#1a212a;--line:#2a333e;--mute:#95a1b0;--chip:#232c37;
    --navy:#8fb8e8;--soft:#212a35;
    --minus:#ff6b6e;--plus:#8fb8e8;--minus-bg:#3a2226;--plus-bg:#1e2c3e;
    --cat1:#8fb8e8;--cat2:#4f8fd6;--cat3:#31567f;--cat4:#d6a95c;
  }
  .grid3>div{background:var(--soft)}
  .ring span{background:var(--card)}
  .alerts{background:#2a1c1c;border-color:#4a2b2b}
  .tabs{background:var(--card)}
  .login input{background:var(--card);color:var(--ink)}
  td{border-bottom-color:#232c37}
  .top{background:#16202c}
  table.rep tr.sum td{background:var(--soft)}
}

/* ── PC（幅900px以上）: 携帯用の1列を横いっぱいに伸ばさない。中央寄せ＋2列 ──
   本番の見た目は UX_RESEARCH の設計原則で作り直す。これは「PCで読めない」を先に直す暫定 */
@media (min-width: 900px){
  body{font-size:14px}
  main{max-width:1080px;margin:0 auto;padding:16px 20px 24px}
  .brandbar{max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}
  .tabs{position:static;max-width:1080px;margin:8px auto 0;border-top:1px solid var(--line);border-bottom:0}
  .tabs a{padding:10px 4px}
  .switch .row{gap:8px}
  .chip{padding:8px 0;font-size:13px}
  .chip.small{font-size:12px}
  .alerts p{font-size:12px}
  .hero .big{font-size:40px}
  .grid3{grid-template-columns:repeat(6,1fr)}   /* 9タイルを 6列×2行 → 横に薄く伸びない */
  .grid3 .v{font-size:17px}
  .grid3 .k{font-size:11px}
  /* 目標と拠点別を横に並べる（幅が許すとき） */
  .desk2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .desk2 > .card{margin:0}
  table{font-size:13px}
  td{padding:6px 6px}
  th{padding:4px 6px}
}

/* ── PC: タブを左の縦メニューに（K-sysと同じ置き方。user 2026-09-16） ── */
@media (min-width: 900px){
  .tabs{position:fixed;left:0;top:44px;bottom:0;width:200px;max-width:none;margin:0;flex-direction:column;
        border-top:0;border-right:1px solid var(--line);background:var(--card);padding:10px 8px;gap:2px;z-index:15}
  .tabs a{flex:0 0 auto;text-align:left;padding:10px 12px;font-size:14px;border-radius:8px;display:flex;gap:10px;align-items:center}
  .tabs a.on{box-shadow:none;background:var(--chip)}
  main{margin-left:200px;max-width:none;padding:16px 28px 24px}
  .brandbar{max-width:none}
  main > *{max-width:1080px}
}

/* ── ここから 2026-09-16 追加（日次・比較・拠点別・アラート画面）───────── */

/* ヘッダーの鮮度ドット。全画面から1タップで /status へ（ホバーに頼らない＝携帯で届く） */
.brandbar{justify-content:flex-start}
.brandbar .dot{margin-left:auto;min-width:22px;height:22px;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;text-decoration:none;padding:0 6px}
.brandbar .dot.g{background:#2f6fbf}
.brandbar .dot.r{background:var(--minus)}

/* アラート（ホームは2件まで・/status が正本） */
.alerts .more{margin-top:6px}
.alerts a{color:var(--plus);font-weight:700}
.alerts.flat{background:transparent;border:0;padding:0;margin:0}
.ok-line{margin:0;font-size:14px;font-weight:700}

/* 画面内リンク（44px以上のタップ領域） */
.links{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.links a{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink);
  text-decoration:none;min-height:44px}
.links a span:last-child{color:var(--plus);font-weight:700;white-space:nowrap}
.fresh-line{font-size:11px;color:var(--mute);display:flex;justify-content:space-between;gap:10px;padding:0 4px 4px}
.fresh-line a{color:var(--plus);white-space:nowrap}

/* 横に伸ばさない。広い表だけ、その中でスクロールさせる（本文は横スクロールしない） */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 担当者の表①②（区分×カテゴリ） */
table.rep{font-size:12px}
table.rep th,table.rep td{padding:5px 4px;white-space:nowrap}
table.rep td.k{color:var(--mute)}
table.rep tr.sub td{font-weight:700;background:var(--soft)}
table.rep tr.sum td{font-weight:800;border-top:2px solid var(--line);background:var(--soft)}
table.rep tr.dim td{color:var(--mute)}
table.rep td .src2{display:block;font-size:9px;color:var(--mute);font-weight:400}
table.daily td.k{white-space:nowrap;font-weight:600;color:var(--ink)}

/* 拠点の行頭: ホムラ=実線 / ブルロケ=破線。ブランドを色で区別しない（形で区別＝色弱でも効く） */
table.sites td.site{font-weight:600;padding-left:10px;position:relative}
table.sites td.site .src{display:block;font-size:10px;color:var(--mute);font-weight:400}
table.sites tr.homura td.site{border-left:3px solid var(--navy)}
table.sites tr.br td.site{border-left:3px dashed var(--navy)}

/* グラフ（サーバー側SVG） */
svg.chart{display:block;width:100%;height:auto;margin-top:4px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--mute);margin-top:6px}
.legend i{display:inline-block;vertical-align:middle;margin-right:5px}
.legend i.sw{width:10px;height:10px;border-radius:2px}
.legend i.sw.c1{background:var(--cat1)}.legend i.sw.c2{background:var(--cat2)}
.legend i.sw.c3{background:var(--cat3)}.legend i.sw.c4{background:var(--cat4)}
.legend i.ln{width:18px;height:0;border-top:2px solid var(--navy)}
.legend i.ln.dash{border-top:2px dashed var(--mute)}
.legend i.ln.dot{border-top:1px dotted var(--mute)}
.axis{display:flex;justify-content:space-between;font-size:9px;color:var(--mute);margin-top:2px}

/* 比較の2列（左=同日まで＝判断用 / 右=月全体＝見当用） */
.cmp{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:3px 8px;font-size:13px;align-items:baseline}
.cmp .h{font-size:10px;color:var(--mute);text-align:right}
.cmp .h:first-child{text-align:left}
.cmp .c{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp .tag{display:block;font-size:9px;color:var(--mute);font-weight:400}
.cmp .tag.plus{color:var(--plus)}.cmp .tag.minus{color:var(--minus)}
.cmp .rowl{font-size:12px;font-weight:700}
.cmp .rowl.sub{font-weight:400;color:var(--mute)}
.cmp .rowl .tag{display:block;font-size:9px;color:var(--mute);font-weight:400}
.cmp .diff{border-top:2px solid var(--line);padding-top:5px;padding-bottom:8px;font-weight:800}

/* 比較の相手えらび */
.chips4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pickmonth{display:flex;gap:6px;margin-top:8px}
.pickmonth select{flex:1;min-height:44px;font-size:16px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);padding:0 10px}
.pickmonth button{min-height:44px;padding:0 14px;border:1px solid var(--navy);border-radius:9px;
  background:var(--card);color:var(--navy);font-weight:700;font-size:14px;cursor:pointer}

/* 小さな見出し付きの1行（「本日のHP登録」など） */
.kv{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:6px 0;border-bottom:1px solid var(--line)}
.kv:last-of-type{border-bottom:0}
.kv b{font-variant-numeric:tabular-nums;text-align:right}
.freshlist{list-style:none;margin:0;padding:0}
.freshlist li{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12px;padding:5px 0;
  border-bottom:1px solid var(--line)}
.freshlist .k{flex:0 0 38%;color:var(--mute)}
.freshlist .v{font-weight:700;font-variant-numeric:tabular-nums}
.freshlist .note{flex-basis:100%;margin:0}
code{font-size:11px;background:var(--chip);border-radius:4px;padding:1px 4px}

/* 携帯は下タブ5つまで（375pxで1タブ75px＝日本語2文字が限界）。拠点別とアラートはPCの左メニューだけ */
.tabs a.pconly{display:none}
.tabs a .long{display:none}
@media (min-width: 900px){
  .tabs a.pconly{display:flex}
  .tabs a .long{display:inline}
  .tabs a .short{display:none}
  .chips4{grid-template-columns:repeat(8,minmax(0,1fr))}
  svg.chart{max-width:620px}          /* PCで横に伸ばしすぎない（線が寝て読めなくなる） */
  .cmp{grid-template-columns:1.3fr 1fr 1fr;font-size:14px}
  table.rep{font-size:13px}
}

/* 携帯: 値を折り返さない・担当者表の「単価」は幅が無いので隠す（PCでは出す） */
.kv b{white-space:nowrap;flex:0 0 auto}
.kv span:first-child{min-width:0}
@media (max-width: 599px){
  table.rep th:nth-child(7), table.rep td:nth-child(7){display:none}
}

/* ── 月間 目標 vs 実績（シートの表と同じ密度。判定セルに薄い色） ── */
table.goals{width:100%;border-collapse:collapse;font-size:12px}
table.goals th{font-size:10px;color:var(--mute);font-weight:600;text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.goals th:first-child{text-align:left}
table.goals td{padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
table.goals td.name{font-weight:700;white-space:normal;min-width:150px}
table.goals td.name .pop{display:block;font-weight:400}
table.goals td.n{text-align:right;font-variant-numeric:tabular-nums}
table.goals td.strong{font-weight:800;font-size:13px}
table.goals td.judge{text-align:center}
table.goals tr.st-minus td.judge,table.goals tr.st-minus td.n.minus{background:var(--minus-bg)}
table.goals tr.st-plus td.judge,table.goals tr.st-plus td.n.plus{background:var(--plus-bg)}
table.goals tr.st-even td.judge{background:var(--chip)}
table.goals td.n.minus{color:var(--minus);font-weight:700}
table.goals td.n.plus{color:var(--plus);font-weight:700}
table.goals td.fc{color:var(--mute)}
table.goals tr.sum td{border-top:2px solid var(--line);background:var(--soft)}
table.goals td.src{font-size:11px;color:var(--mute);white-space:normal}
@media (min-width: 900px){ table.goals{font-size:13px} table.goals td.strong{font-size:14px} }