/* MINE — 利用者側の8画面（スマホ専用・390px）
   デザインの正本は mock/user-screens-a-prime-2026-09.html の「方向 A′-1」。
   骨格は「主役1つをネイビーの面に白抜き → その下は白いカードを濃い温白の地に」。
   トークンは tokens.css。利用者側の階調だけ、下の :root で上書きする。 */

@import url("tokens.css");

/* ==========================================================================
   利用者側専用のトークン上書き（方向 A′-1）
   **このブロックを管理画面へ読み込ませないこと。**
   admin.css は tokens.css だけを @import しており、styles.css は読まない。
   その読み込み経路の非対称だけが、PCの管理画面へ A′-1 の階調が漏れない根拠になっている。
   管理画面のHTMLに styles.css を足すか、admin.css から @import すると、
   **何のエラーも出ないまま**管理画面（102箇所の参照）の色が一緒に動く。
   ========================================================================== */
:root {
  --bg: #E7E1D8;            /* 地。面（白）との差を実寸で見えるところまで落とす */
  --surface-sunken: #F7F4EF;
  --surface-head: #EDE7DD;
  --line: #EFE9E0;          /* 行間の罫だけに使う。カードの外枠には使わない */
  --line-strong: #8F887E;   /* 入力欄の枠。#D9D2C7 は白地で 1.50 しかなく枠に見えない */
  --line-head: #E4DCCE;     /* 白いヘッダ同士の境（期のバーの上端）。地との中間色 */

  --ink-strong: #1C1A17;
  --ink: #33302B;
  --ink-sub: #5C564D;
  --ink-muted: #756E64;

  --shadow-card: 0 2px 6px rgba(42, 39, 36, .10), 0 10px 24px rgba(42, 39, 36, .10);
  --shadow-primary: 0 2px 4px rgba(37, 41, 66, .34), 0 8px 20px rgba(37, 41, 66, .30);
  --shadow-sticky: 0 -3px 16px rgba(42, 39, 36, .16);

  --fs-display: 64px;
  --fw-display: 700;        /* 新設。現行は font-weight:300 を各所に直書きしていた */
  --fs-label: 13px;         /* 見出し。等幅をやめて和文にする */

  /* 濃色面の上の「勤務中」。--state-active(#2E7D4F) はネイビー上で比 1.75 で見えない */
  --state-active-on-primary: #79D6A4;
}

/* 端末側の強制ダーク反転を抑止する（ダークモードは提供しない） */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

/* hidden属性を常に効かせる。.s-foot 等の display:flex が [hidden] を打ち消すのを防ぐ */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* ホーム画面起動時にフッタがホームインジケータに潜らないようにする */
  padding-bottom: env(safe-area-inset-bottom);
  min-height: 100dvh;
}

/* 数字は等幅に揃える。時刻が横に踊らない */
* { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

button { font-family: inherit; }

.s-center { text-align: center; }

/* ---- ヘッダ ----
   白のまま。直下にネイビーの面か濃い地が来るので、境界は罫ではなく色で立つ */
.s-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 0 18px;
  padding-top: env(safe-area-inset-top);
  background: var(--surface);
  font-size: 14px; color: var(--ink-sub); font-weight: 600;
  position: sticky; top: 0; z-index: 10;
}
.s-head b { color: var(--ink-strong); font-weight: 800; letter-spacing: .06em; }
/* 戻る導線。ヘッダの高さいっぱいを当たり判定にする */
.s-head a {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--ink-strong); font-weight: 700; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.s-body { padding: 16px; }

/* 読み込み中・補足の一行。地の上に直接置く */
.s-note { font-size: 15px; color: var(--ink-sub); margin: 4px 0 0; }

/* ==========================================================================
   主役の面（A′-1 の中核）
   画面ごとに「いま知りたい1つ」だけをネイビーに白抜きで置く。
   目的は位置を色で固定することなので、必ずヘッダ（と期のバー）の直下に置く。
   ========================================================================== */
.s-hero {
  background: var(--primary); color: var(--ink-inverse);
  padding: 24px 18px 26px;
}
.s-hero .lab {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: rgba(255, 255, 255, .68); margin-bottom: 6px;
}
.s-hero .big {
  display: block; font-size: var(--fs-display); font-weight: var(--fw-display);
  letter-spacing: -.035em; line-height: 1.02; color: var(--ink-inverse);
}
.s-hero .big small {
  font-size: 24px; font-weight: 600; margin-left: 4px; letter-spacing: 0;
  color: rgba(255, 255, 255, .78);
}
/* 空の状態。面ごと消すと骨格が変わって同じ画面に見えなくなるので、数字だけ「—」にする */
.s-hero .big.dim {
  color: rgba(255, 255, 255, .50);
  font-size: 44px; font-weight: 300; letter-spacing: 0; line-height: 1.25;
}
.s-hero .name {
  display: block; font-size: 34px; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
}
/* 主役が数値ではなく問い（給与明細の承諾）のとき。34pxでは3行になる */
.s-hero .name.q { font-size: 27px; line-height: 1.42; }
.s-hero .sub {
  display: block; font-size: 15px; color: rgba(255, 255, 255, .80);
  margin-top: 10px; line-height: 1.65;
}
.s-hero .sub:empty { display: none; }
/* 主役が2つある画面（勤怠）だけ、面を縦罫で割る */
.s-hero.two { display: flex; padding: 22px 0 24px; }
.s-hero.two > div { flex: 1; padding: 0 18px; min-width: 0; }
.s-hero.two > div + div { border-left: 1px solid rgba(255, 255, 255, .22); }
.s-hero.two .big { font-size: 46px; }
.s-hero .cmp {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.5;
  color: rgba(255, 255, 255, .68); margin-top: 6px;
}

/* 色・記号・日本語ラベルの3点セット（FR-02）。色だけに意味を持たせない */
.s-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 5px 14px;
  border-radius: 999px; font-size: 14px; font-weight: 700;
}
.s-badge i { width: 10px; height: 10px; border-radius: 50%; flex: none; font-style: normal; }
.b-idle  { background: #F4F1EC; border: 1px solid var(--line-strong); color: var(--ink-sub); }
.b-idle i { background: var(--state-idle); }
.b-work  { background: var(--success-bg); border: 1px solid var(--success-line); color: var(--success-ink); }
.b-work i { background: var(--success); }
.b-break { background: var(--warning-bg); border: 1px solid var(--warning-line); color: var(--warning-ink); }
.b-break i { background: var(--warning); }
.b-done  { background: var(--info-bg); border: 1px solid var(--info-line); color: var(--info); }
.b-done i { background: var(--info); }

/* 濃色面の上のバッジ。地は白の13%で、面の一部として読ませる。
   ドットは意味を担うので、ネイビー上で沈まない明度へ振り直す（正本 A′-1 は勤務中のみ提示） */
.s-hero .s-badge {
  margin-top: 16px; padding: 6px 14px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .46);
  color: var(--ink-inverse);
}
.s-hero .b-work i  { background: var(--state-active-on-primary); }
.s-hero .b-break i { background: #F2C97A; }
.s-hero .b-done i  { background: var(--primary-line); }
.s-hero .b-idle i  { background: #C7C2BA; }

/* ---- 見出し ----
   地の上に直接置く。面と数字が階層を担うので、見出しは小さく硬く */
.s-label {
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em;
  color: var(--ink-sub); margin: 24px 0 9px;
}
.s-label em { font-style: normal; font-weight: 600; color: var(--ink-muted); letter-spacing: .02em; }
/* 面の直下に来る最初の見出しは詰める。24pxの上余白は見出し同士の間隔として置いている。
   3本目は #alerts が空のとき（打刻漏れが無い期）— 空の器のぶんだけ空くのを消す */
.s-body > .s-label:first-child,
.s-body > :first-child > .s-label:first-child,
#alerts:empty + .s-label { margin-top: 2px; }

/* ---- カード ----
   罫を外し、影だけで浮かせる。罫を残したまま影を .10 にすると縁が二重になって濁る */
.s-card {
  background: var(--surface);
  border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden;
}
.s-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: 16px;
}
.s-row:last-child { border-bottom: 0; }
.s-row b { min-width: 3.8em; font-weight: 800; color: var(--ink-strong); }
.s-row span { flex: 1; color: var(--ink-sub); }
.s-row .s-empty { color: var(--ink-muted); }
/* 文字の見た目は変えずに当たり判定だけ44px以上にする（余白＋負のマージン） */
.s-row button.s-undo {
  border: 0; background: none;
  padding: 14px 8px; margin: -14px -8px -14px 0;
  font-size: 13px; color: var(--ink-sub); text-decoration: underline; cursor: pointer;
  font-weight: 700;
}

/* ---- 期のヘッダ（S2）----
   「今月」と書かない。締日が人ごとに違うので必ず範囲を併記する（FR-10） */
.s-period {
  background: var(--surface); padding: 13px 18px;
  border-top: 1px solid var(--line-head);
  /* ヘッダは safe-area の分だけ背が伸びるので、その分を足さないと下に潜る */
  position: sticky; top: calc(48px + env(safe-area-inset-top)); z-index: 9;
}
.s-period b { font-size: 17px; color: var(--ink-strong); font-weight: 800; }
.s-period small { display: block; font-size: 13px; color: var(--warning-ink); margin-top: 1px; font-weight: 600; }
/* 期の選択。見た目は文字のまま、当たり判定だけ広げる。
   文字の高さ（約27px）のままでは親指に小さすぎるので、
   余白を足して負のマージンで打ち消し、レイアウトを動かさずに44px以上を確保する */
.s-period label {
  position: relative; display: inline-block;
  padding: 9px 4px; margin: -9px -4px;
}
.s-period select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; cursor: pointer; font-size: 16px; /* iOSの自動ズーム抑止 */
}

/* ---- 明細行 ----
   値は右端で揃える。桁の違う 89,000 と 150 を上下で比べられるようにする */
.s-kv {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 14px 14px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.s-kv:last-child { border-bottom: 0; }
.s-kv span { color: var(--ink-sub); }
.s-kv b {
  margin-left: auto; text-align: right; white-space: nowrap;
  font-weight: 800; color: var(--ink-strong); font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.s-kv b small { font-size: .68em; font-weight: 600; margin-left: 2px; color: var(--ink-sub); }
.s-kv .sub { font-weight: 400; color: var(--ink-muted); font-size: 13px; margin-left: 8px; }
.s-fine { padding: 0 16px 15px; font-size: 13px; color: var(--ink-muted); line-height: 1.8; }
/* カードの外に置く注記。.s-fine はカードの内側用（左右16pxの内余白つき） */
.s-fine2 { margin: 20px 0 0; font-size: 13px; color: var(--ink-sub); line-height: 1.8; }

/* ---- 日次 ----
   実働時間だけを右端の数値列に分ける（金額の内訳と同じ規則） */
.s-day {
  display: flex; gap: 8px; align-items: baseline;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface); font-size: 15px;
}
.s-day:last-child { border-bottom: 0; }
.s-day b { min-width: 5em; color: var(--ink-strong); flex: none; font-weight: 800; }
.s-day > span { flex: 1; color: var(--ink-sub); min-width: 0; }
.s-day.off, .s-day.off b { color: var(--ink-muted); }
/* 罫ではなく内側の影で示す。border-left にすると4px分だけ行の中身がずれる */
.s-day.miss { box-shadow: inset 4px 0 0 var(--danger); background: var(--danger-bg); }
.s-day.lv { box-shadow: inset 4px 0 0 var(--info); background: var(--info-bg); }
.s-day .s-num {
  flex: none; min-width: 4.4em; text-align: right; white-space: nowrap;
  color: var(--ink-strong); font-weight: 800; font-style: normal;
  font-variant-numeric: tabular-nums;
}
.s-day u { margin-left: auto; font-size: 13px; color: var(--ink-sub); flex: none; }
/* 実測 28px で §5 の下限 44px を割っていた。見た目を変えずに 44×52 へ広げる
   （文字は13px・2文字なので、横も余白で44pxまで持ち上げる） */
.s-day button.s-req {
  margin-left: auto; flex: none; border: 0; background: none;
  padding: 16px 9px; margin-top: -16px; margin-bottom: -16px; margin-right: -9px;
  font-size: 13px; color: var(--ink-sub); text-decoration: underline; cursor: pointer;
  font-weight: 700;
}

/* ---- アラート ----
   地が濃くなったぶん、面は白のままで十分に立つ */
.s-alert {
  padding: 15px 16px; border-left: 5px solid var(--line-strong);
  border-radius: 8px; background: var(--surface);
  font-size: 15px; color: var(--ink-strong);
  box-shadow: 0 2px 6px rgba(42, 39, 36, .08);
  margin-bottom: 12px;
}
.s-alert b.hd2 { display: block; font-size: 17px; font-weight: 800; margin-bottom: 3px; }
.s-alert small { display: block; font-size: 13px; margin-top: 7px; line-height: 1.8; color: var(--ink-sub); }
.s-alert.dg { border-left-color: var(--danger); background: var(--danger-bg); color: var(--danger-ink); }
.s-alert.wn { border-left-color: var(--warning); background: var(--warning-bg); color: var(--warning-ink); }
.s-alert.sc { border-left-color: var(--success); background: var(--success-bg); color: var(--success-ink); }
.s-alert.if { border-left-color: var(--info); background: var(--info-bg); color: var(--ink-strong); }
.s-alert.dg small, .s-alert.wn small, .s-alert.sc small { color: inherit; }
.s-alert + .s-label { margin-top: 24px; }

/* ---- 打刻ボタン ---- */
.s-foot {
  display: flex; gap: 10px; padding: 11px;
  padding-bottom: calc(11px + env(safe-area-inset-bottom));
  background: var(--bg);
  box-shadow: var(--shadow-sticky);
  position: sticky; bottom: 0;
}
.s-foot > * { flex: 1; }
.s-foot.stack { display: block; }
.s-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--tap-primary); border: 0; border-radius: var(--radius);
  background: var(--primary); color: var(--ink-inverse);
  font-weight: 800; font-size: 21px; letter-spacing: .14em;
  box-shadow: var(--shadow-primary); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.s-btn.gh {
  background: var(--surface); color: var(--primary);
  border: 1.5px solid var(--primary-line);
  box-shadow: 0 2px 6px rgba(42, 39, 36, .10);
  letter-spacing: .05em; font-size: 17px;
}
/* 原則4「確認」: 押した瞬間に沈む。通信の完了を待たない */
.s-btn:active { transform: scale(.985); }
.s-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

.s-link {
  display: block; width: 100%; text-align: center; padding: 15px 0;
  border: 0; background: none;
  font-size: 14px; color: var(--ink-sub); text-decoration: underline; cursor: pointer;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
a.s-link { padding: 17px 0; }

/* ---- トースト ---- */
.s-toast {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(112px + env(safe-area-inset-bottom));
  z-index: 30;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--ink-strong); color: #fff; font-size: 15px;
  box-shadow: 0 8px 24px rgba(42, 39, 36, .24);
}
.s-toast.danger { background: var(--danger-ink); }

/* ---- フォーム（S6/S7・時刻申請ダイアログ）----
   値が入っている欄と空の欄を、枠ではなく字の重さで見分けさせる */
.s-field { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.s-field:last-child { border-bottom: 0; }
.s-field > label {
  display: block; color: var(--ink-sub); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; margin-bottom: 7px;
}
.s-input {
  display: block; width: 100%; max-width: 320px; padding: 11px 12px; min-height: 46px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-strong);
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 24px;
}
.s-input.wide { max-width: 100%; font-weight: 400; }
.s-input::placeholder { color: var(--ink-muted); font-weight: 400; }
.s-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.s-choice { display: flex; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--ink-strong); }
.s-choice label {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; cursor: pointer; font-weight: 700;
}
.s-choice input { width: 18px; height: 18px; accent-color: var(--primary); }

/* ---- 出張の日当（S7・カードの中の中位の数値）---- */
.s-money { text-align: center; padding: 18px 0 6px; }
.s-money .yen {
  font-size: 42px; font-weight: 700; color: var(--ink-strong);
  letter-spacing: -.02em; line-height: 1.15;
}
.s-money .yen small { font-size: 20px; font-weight: 600; margin-left: 2px; color: var(--ink-sub); }
.s-money .cap { font-size: 13px; color: var(--ink-muted); margin-top: 6px; }

/* ---- ゲージ（扶養の壁）----
   地が濃くなったので 8px では溝に見える。10px に太らせる */
.s-bar {
  height: 10px; border-radius: 999px; background: var(--bg);
  overflow: hidden; margin: 8px 16px 12px;
}
.s-bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.s-gap-t { margin-top: 20px; }

/* ---- S5 給与明細 ---- */
/* 賃金計算期間の行は警告ではない（S2の締め警告色を継承させない） */
.s-period small.plain { color: var(--ink-muted); font-weight: 400; }
.s-kv b.dim { color: var(--ink-disabled); }

/* ---- 申請の状態（色だけに意味を持たせない。ラベルは日本語）---- */
.st-wait { color: var(--warning-ink); font-weight: 800; white-space: nowrap; }
.st-ok   { color: var(--success-ink); font-weight: 800; white-space: nowrap; }
.st-ng   { color: var(--danger-ink);  font-weight: 800; white-space: nowrap; }
.st-done { color: var(--info);        font-weight: 800; white-space: nowrap; }

/* ---- ダイアログ（時刻の申請・スマホ）---- */
dialog.s-dialog {
  border: 0; border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-modal); padding: 0; color: var(--ink);
  width: min(420px, calc(100vw - 28px));
}
dialog.s-dialog::backdrop { background: rgba(42, 39, 36, .38); }
dialog.s-dialog h4 {
  margin: 0; padding: 15px 16px; font-size: 16px; font-weight: 800;
  color: var(--ink-strong); border-bottom: 1px solid var(--line);
}
dialog.s-dialog .db { padding: 6px 0; }
dialog.s-dialog .df {
  display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px;
  border-top: 1px solid var(--line); background: var(--surface-sunken);
}
.s-btn.sm { min-height: 58px; font-size: 18px; letter-spacing: .06em; }
/* ダイアログの2ボタンは横に並べる。.s-btn の width:100% を打ち消さないと、
   flex の中で2つとも全幅を要求し、左のキャンセルが器の外へ押し出されて見えなくなる */
.s-btn.dlg {
  min-height: 44px; font-size: 15px; letter-spacing: .02em;
  flex: none; width: auto; padding: 0 18px;
}

/* アラート内の申請導線（S1）。下線つきの行動リンク。当たり判定は44px */
.s-alert .s-alert-act {
  display: block; margin-top: 8px; padding: 0; border: 0; background: none;
  font-weight: 800; text-decoration: underline; cursor: pointer;
  color: inherit; font-size: 15px; text-align: left; min-height: 44px;
}

/* メニューの行。s-kv を行リンクにする */
a.s-item { text-decoration: none; color: inherit; display: block; }
a.s-item .s-kv { min-height: 60px; align-items: center; padding: 0 16px; font-size: 17px; }
a.s-item .s-kv span { color: var(--ink-strong); font-weight: 700; }
a.s-item .s-kv b { color: #847D73; font-weight: 700; font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  .s-btn:active { transform: none; }
}

/* ==========================================================================
   下タブ（スマホ）／ 左ナビ（PC）── groupware 段階 G1
   正本: groupware/DESIGN.md §3.1・§3.2・§4.2・§4.6・§5.7・§5.8
         groupware/mock/app.html の .tabbar / .nav / .nav-i / .nav-logo / .nav-lbl
   **ここから下は追記だけ。上の既存の宣言は1行も書き換えていない。**
   効くのは body に .has-tabbar が付いたときだけ（tabbar.js が注入に成功したとき）。
   script が読めなかった端末では、現行の見た目が1pxも動かない。
   ========================================================================== */
:root {
  /* DESIGN §4.2 のうち、MINE の tokens.css にまだ無いものだけを足す */
  --tabbar-h: 56px;
  --nav-w: 240px;
  --home-w: 480px;          /* PC のホーム・メニューの幅 */
  --header-h: 48px;
  --row-h: 48px;            /* ナビの行 */
  --radius-chip: 4px;
  --fs-micro: 11px;         /* 下タブのラベル */
  --fs-meta: 12px;          /* バッジの数字 */
  --z-tabbar: 12;
  --shadow-header: 0 3px 16px rgba(42, 39, 36, .16);

  /* クロームの色は DESIGN §4.2 と同値の既存トークンを参照する。
     同じ色に2つ目の正本を作らない（片方だけ直る事故を置き方で潰す） */
  --tabbar-face: var(--surface);
  --tabbar-ink: var(--ink-sub);
  --tabbar-ink-sel: var(--primary);
  --nav-face: var(--surface);
  --nav-ink: var(--ink);
  --nav-label: var(--ink-sub);
  --nav-sel-face: var(--primary-weak);
  --nav-sel-ink: var(--primary);
  --nav-line: var(--line);

  /* 画面の下端に固定されているものの高さ。PC では下タブが消えるので safe-area だけになる */
  --mine-chrome-b: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

/* 本文の下に下タブぶんの逃げを作る */
body.has-tabbar { padding-bottom: var(--mine-chrome-b); }

/* 固定されるものが2段になる（DESIGN §3.2）。下から 下タブ → 打刻の固定フッター。
   この順を入れ替えない — タブを押そうとして打刻を押す事故を作らない。
   safe-area は下端にいる下タブが持つので、フッター側からは外す（二重に空けない）。
   これで .s-foot の高さは 11 + 92 + 11 = 114px ちょうどになる */
body.has-tabbar .s-foot {
  bottom: var(--mine-chrome-b);
  padding-bottom: 11px;
}
body.has-tabbar .s-toast { bottom: calc(112px + var(--mine-chrome-b)); }

/* ---- 下タブ（DESIGN §5.7。4つ・各97.5px・不透明） ---- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--tabbar-face);
  box-shadow: var(--shadow-sticky);
}
.tabbar .tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--tabbar-h); position: relative;
  color: var(--tabbar-ink); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* 選択中は色と太さの2つだけで出す。下線や色帯を足さない（3つ目は装飾になる） */
.tabbar .tab.on { color: var(--tabbar-ink-sel); font-weight: 800; }
.tabbar .bw { position: relative; display: inline-flex; }
.tabbar .badge-unread { position: absolute; top: -4px; right: -8px; }
.tabbar .tab:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }

/* ---- 未読バッジ（DESIGN §5.8。面は2色だけ） ---- */
.badge-unread {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill);
  background: var(--primary); color: #FFFFFF;
  font-size: var(--fs-meta); font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.badge-unread.is-mention { background: var(--danger); }

/* ---- 左ナビ。1024px 未満では出さない ---- */
.nav { display: none; }
.nav-logo {
  min-height: var(--header-h); display: flex; align-items: center; padding: 0 8px;
  font-size: 17px; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-strong); text-decoration: none;
}
.nav-i {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--row-h); padding: 0 8px;
  border-radius: var(--radius-chip);
  color: var(--nav-ink); font-size: var(--fs-sub); font-weight: 600;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.nav-i:hover { background: var(--nav-sel-face); }
.nav-i.on { background: var(--nav-sel-face); color: var(--nav-sel-ink); font-weight: 700; }
.nav-i .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-i .badge-unread { flex: none; }
.nav-i:focus-visible, .nav-logo:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
.nav-lbl {
  min-height: 32px; display: flex; align-items: flex-end; padding: 0 8px 4px; margin-top: 16px;
  font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em; color: var(--nav-label);
}
/* 下端の氏名は表示だけ。押せるようにしない（行き先は上の「メニュー」にある） */
.nav-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--nav-line); }
.nav-me {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 8px;
  color: var(--nav-ink); font-size: var(--fs-sub); font-weight: 700;
}
.nav-me .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* アバターは姓の1文字。色で人を分けない（DESIGN §5.12）。
   円なので 50%。--radius-pill の許可対象3つ（未読バッジ・付帯値の小ピル・状態バッジ）に足さない */
.mine-av {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-weak); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

/* ---- タブレット 768〜1023px: 1列のまま幅だけ広げる（下タブは残す。DESIGN §3.1） ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  body.has-tabbar .mine-col { max-width: 720px; margin-inline: auto; }
}

/* ---- PC 1024px 以上: 左ナビ 240px ＋ 残りの中央に 480px（DESIGN §3.1・§4.6） ---- */
@media (min-width: 1024px) {
  :root { --mine-chrome-b: env(safe-area-inset-bottom); }
  .tabbar { display: none; }
  body.has-tabbar { padding-left: var(--nav-w); }
  body.has-tabbar .mine-col { max-width: var(--home-w); margin-inline: auto; }
  .nav {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; width: var(--nav-w); height: 100dvh;
    overflow-y: auto; z-index: var(--z-tabbar);
    padding: 0 12px 12px;
    background: var(--nav-face); color: var(--nav-ink);
    border-right: 1px solid var(--line-strong);
    box-shadow: var(--shadow-header);
  }
}

/* ==========================================================================
   ホームの4ブロック（つぎの予定／お知らせ／今日のメンバー／未読の話題）── 段階 G2
   正本: groupware/DESIGN.md §3.2（順序と積み上げ）・§5.13（お知らせ）・§5.15（3ブロック）
         2026-09-14 の裁定 S2（お知らせの行 60px）・S4（カードは罫なし）・S8（アバター 28px）
         ・m9（つぎの予定の行 60px の内訳）・m11
   **ホームは一瞥・タップ型**なので器はカード（本番の .s-card をそのまま使う）。
   滞在型の部品（パネル・68px の行）を持ち込まない。
   **ここから下も追記だけ。上の既存の宣言は1行も書き換えていない。**
   ========================================================================== */

/* セクションの見出し行。見出し 13px/800 ＋ 右端の件数・リンク 13px/400（DESIGN §5.0） */
.sec { margin-top: 24px; }
.sec-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 9px;
}
.sec-h h2 {
  margin: 0; font-size: var(--fs-label); font-weight: 800; letter-spacing: .06em;
  line-height: 1.6; color: var(--ink-sub);
}
.sec-n { font-size: var(--fs-label); font-weight: 400; color: var(--ink-sub); font-variant-numeric: tabular-nums; }
/* 「全員 →」。44px の当たり判定を負のマージンで隠さない（§4.5）。この行だけ 44px になる */
a.linkbtn, button.linkbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-right: -8px;
  border: 0; background: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-label); font-weight: 400; color: var(--primary);
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.linkbtn:hover { background: var(--primary-weak); }
/* カードの中の行の区切り。罫はカードの外枠には使わない（本番 .s-card と同じ思想） */
.divide > * + * { border-top: 1px solid var(--line); }

/* ---- つぎの予定（行 60px＝上下 padding 8 ＋ 18px×1.4 ＋ 13px×1.4。裁定 m9）---- */
.nextcard { padding: 8px 16px; min-height: var(--row, 60px); display: block; width: 100%; }
button.nextcard { border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer; }
button.nextcard:hover { background: var(--surface-sunken); }
.erow { display: block; }
.erow .r1 { display: flex; align-items: baseline; gap: 12px; }
/* 1行の中に並ぶ文字要素は同じサイズ・同じ太さ（DESIGN §5.0-1・2） */
.erow .tm {
  flex: none; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink-strong);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.erow .ti {
  flex: 1; min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erow .r2 { display: flex; align-items: center; gap: 8px; }
.erow .sub {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 付帯値の小ピル（残り時間）。--radius-pill の許可対象3つのうちの1つ */
.erow .side {
  flex: none; height: 18px; display: inline-flex; align-items: center; padding: 0 8px;
  border-radius: var(--radius-pill); background: var(--primary-weak); color: var(--primary);
  font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---- お知らせ（行 60px・最大3件・× で消す。裁定 S2）---- */
.notice { display: flex; align-items: center; min-height: var(--row, 60px); padding-right: 8px; }
.notice-main {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 4px 8px 16px; border: 0; background: none; text-align: left;
  font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.notice-main:hover { background: var(--surface-sunken); }
.notice .ic { color: var(--ink-sub); margin-top: 3px; flex: none; }
.notice .tx { flex: 1; min-width: 0; }
.notice .n1 {
  display: block; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice .n2 {
  display: block; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-sub);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- 今日のメンバー（行 60px × 4人固定・氏名/時刻/題名をすべて 16px/600）---- */
.mrow {
  display: flex; align-items: center; gap: 12px; min-height: var(--row, 60px);
  padding: 8px 16px; width: 100%;
  border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mrow:hover { background: var(--surface-sunken); }
.mrow .nm { font-size: 16px; font-weight: 600; color: var(--ink-strong); flex: none; }
.mrow .ev {
  margin-left: auto; text-align: right; min-width: 0;
  font-size: 16px; font-weight: 600; color: var(--ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mrow .ev .tm { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
/* 「予定なし」だけ色を落とす。サイズと太さは他の行と同じ */
.mrow .ev.none { color: var(--ink-muted); }

/* ---- 未読の話題（行 60px × 最大3件。G3 まで API が空配列を返す）---- */
.topic {
  display: block; width: 100%; min-height: var(--row, 60px); padding: 9px 16px;
  border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.topic:hover { background: var(--surface-sunken); }
.topic .l1 { display: flex; align-items: flex-start; gap: 8px; }
.topic .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; margin-top: 7px; }
.topic .ttl {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topic .l2 { display: flex; align-items: baseline; gap: 8px; }
.topic .last {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topic .badges { display: flex; align-items: center; gap: 6px; flex: none; padding-top: 2px; }

/* ---- メニュー2枚目（お知らせ・この端末）。行は本番の a.s-item と同じ 60px ---- */
.s-card + .s-card, .menu-card2 { margin-top: 24px; }
.s-item2 { display: block; color: inherit; text-decoration: none; }
.s-item2 .s-kv { min-height: 60px; align-items: center; padding: 0 16px; font-size: 17px; gap: 12px; }
.s-item2 .s-kv > span:first-child { flex: none; color: var(--ink-strong); font-weight: 700; }
/* 付帯値は項目名と同じサイズ・太さだけ落とす（DESIGN §5.0-2） */
.s-item2 .s-kv .rt {
  margin-left: auto; text-align: right; flex: 1; min-width: 0;
  font-size: 17px; font-weight: 400; color: var(--ink-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s-item2 .s-kv .badge-unread { flex: none; margin-left: auto; }
.s-item2 .s-kv .rt + .badge-unread { margin-left: 0; }
.s-item2 .s-kv b { flex: none; margin-left: 0; color: #847D73; font-weight: 700; font-size: 18px; }

/* ==========================================================================
   PC（1024px 以上）── 左ナビが氏名と行き先を持つので、列の中のクロームを外す
   ========================================================================== */
@media (min-width: 1024px) {
  /* 列内のヘッダ帯（「MINE ／ 氏名」「← 戻る」）は出さない（裁定 R9）。
     氏名は左ナビ下端の行が担う。**DOM からは消さない** — tabbar.js が #user から氏名を拾う */
  body.has-tabbar .s-head { display: none; }
  /* ヘッダを消したぶん、期のバーの sticky 位置を上端に戻す */
  body.has-tabbar .s-period { top: 0; }
}

/* ホームの「申請・メニュー →」は、下タブがある状態では出さない。
   下タブの「メニュー」と行き先が同じで、同じ場所への入口が2つ並ぶ（裁定 R4 と同じ理由）。
   script が読めなかった端末（.has-tabbar が付かない）では現行のまま出る */
body.has-tabbar #menuLink { display: none; }

/* ==========================================================================
   打刻のホームの主役の面を縮める ── 2026-09-14（佐藤指摘「ネイビーの面が大きすぎる」）
   正本: groupware/DESIGN.md §2.3・§3.2。**index.html の主役の面（.s-hero.punch）にだけ効く。**
   .s-hero はメニュー・金額・給与明細・有給・出張・勤怠・初回登録でも使う共有の部品なので、
   素の .s-hero には触らない（他の画面の主役の面は 1px も動かない）。
   勤務中の高さ 227.6px → 175.8px ＝ 上16 ＋ 日付15.6 ＋ 4 ＋ 時計53.0 ＋ 10 ＋ バッジ32.2 ＋ 6 ＋ 経過21 ＋ 下18
   ・時計は一段下げて 52px（tokens.css の --fs-display の既定値。太さ 700・字間は上の .big のまま）
   ・面の上下の余白は本文の余白（.s-body の 16px）に揃える。下を 2px 多くするのは元の 24/26 と同じ見え方の補正
   ・日付・バッジ・経過はどれも1行で終わるので、行間（見えない余白）だけを詰める。文字の大きさと太さは変えない
   **ここから下も追記だけ。上の既存の宣言は1行も書き換えていない。**
   ========================================================================== */
.s-hero.punch { padding: 16px 18px 18px; }
.s-hero.punch .lab { line-height: 1.3; margin-bottom: 4px; }
.s-hero.punch .big { font-size: 52px; }
.s-hero.punch .s-badge { margin-top: 10px; line-height: 1.3; }
.s-hero.punch .sub { margin-top: 6px; line-height: 1.4; }

/* ==========================================================================
   「今日のメンバー」の見出し行を 20.8px に戻す ── 2026-09-14 の裁定（同日に上下の配分を再裁定）
   上の a.linkbtn の min-height:44px が見出し行ごと 44px に押し広げていた（DESIGN §3.2 の積み上げは 20.8px）。
   リンクは見出しに残し、行の高さは 20.8px のまま、当たり判定だけを 44px にする。
   手法は本番の .s-row button.s-undo と同じ「余白＋負のマージン」。配分は 上へ 14.2px ＋ 下へ 9px（20.8＋14.2＋9＝44）。
   ・上の隣（つぎの予定・お知らせのカード）は行き先が違うので 8px 以上空ける（24 − 14.2 ＝ 9.8px。DESIGN §4.5）
   ・下の隣（最初のメンバーの行）は同じ /schedule へ行くので、上端に接してよい（重ねない・隙間 0）。
     下へ伸ばす 9px は .sec-h の margin-bottom と同じ値。片方だけ変えると重なるか隙間が空く
   横は上の padding 0 8px のままで約 59px（44px 以上）。
   上の a.linkbtn の注記「負のマージンで隠さない・この行だけ 44px になる」は、この裁定で撤回した。
   ========================================================================== */
.sec-h a.linkbtn {
  line-height: 1.6;
  padding-top: calc(44px - 1.6em - 9px);   /* 上へ 14.2（44 − 20.8 − 9） */
  padding-bottom: 9px;                      /* 下へ 9（最初のメンバーの行の上端まで） */
  margin-top: calc(1.6em + 9px - 44px);     /* 同じ量を打ち消す。行に効く高さは 20.8px */
  margin-bottom: -9px;
}
/* 当たり判定が文字の上下で偏っているので、面の色で広さを見せない（iOS はタップで :hover が残る）。下線だけにする */
.sec-h a.linkbtn:hover { background: none; text-decoration: underline; }

/* ==========================================================================
   段階 G3（チャット）── 左ナビのチャンネル・ダイレクト／ホームの「つぎの予定」の空の状態
   正本: groupware/DESIGN.md §3.2（左ナビの中身）・§3.11（空の状態）・§5.12（アバター）
   **ここから下も追記だけ。上の既存の宣言は1行も書き換えていない。**
   ========================================================================== */
/* 左ナビのダイレクトのアバターは 22px。gw.css を読まないページ（勤怠・金額・給与明細・有給・出張）でも同じ大きさにする */
.nav-i .mine-av { width: 22px; height: 22px; font-size: 11px; }
/* チャンネルの行の「#」はアイコンの 20px の枠に入れ、上の4つ（ホーム・予定・チャット・メニュー）と左端を揃える */
.nav-i .gw-ico { flex: none; display: block; }

/* ホームの「つぎの予定」が無い日。行 60px のまま（下の「今日のメンバー」の位置を日によって動かさない）、
   縦の中央に 15px/400 --ink-muted の1文だけを置く。題名（18px/700）と同じ形にすると「2行目が抜けた予定」に見える */
.nextcard.is-empty { display: flex; align-items: center; }
.nextcard .empty-t { font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--ink-muted); }
/* ホームの「未読の話題」の行は <a>（行き先は API の url）。リンクの既定の下線と色を消し、行の文字の色は上の .topic のまま */
a.topic { color: inherit; text-decoration: none; }

/* 予定・チャットの同期が止まった理由の帯（403＝「今日のメンバー」から隠された・401＝未登録。tabbar.js）。
   黙って止めない（groupware G3 の反証）。色は DESIGN §3.11 のオフラインの帯と同じ */
.gw-stopband {
  padding: 6px 16px; background: var(--warning-bg); color: var(--warning-ink);
  border-top: 1px solid var(--warning-line); border-bottom: 1px solid var(--warning-line);
  font-size: 13px; font-weight: 700; line-height: 1.5; text-align: center;
}