/* ---------- tokens ----------
   Oceans11 ブランド（黒×赤×ゴールド、HP の色系統）を勤怠向けに調整:
   黒は目に優しいチャコール、赤はきつさを抑えたソフトレッド。 */
  :root {
    --bg: #F7F6F4;
    --surface: #FFFFFF;
    --surface-2: #EFEDEA;
    --line: #DEDAD4;
    --text: #1D1E22;
    --muted: #6B6D75;
    --accent: #B3475A;
    --accent-ink: #FFFFFF;
    --brass: #8A6D28;
    --brass-bg: #F7F0DD;
    --warn: #A8420F;
    --warn-bg: #FCEBE1;
    --ok: #2E7D54;
    --ok-bg: #E2F0E8;
    --focus: #B3475A;
    --shadow: 0 1px 2px rgba(29, 30, 34, .06), 0 8px 24px rgba(29, 30, 34, .08);
    /* kiosk (always dark: Oceans11 の黒×ゴールド×ソフトレッド) */
    --k-bg: #17191F;
    --k-surface: #20232B;
    --k-surface-2: #272B34;
    --k-line: #343945;
    --k-text: #EEF0F4;
    --k-muted: #A4ABB8;
    --k-brass: #C9A84C;
    --k-brass-ink: #221A04;
    --k-coral: #CC6672;
    --k-coral-ink: #2A0D11;
    /* paper (payslip, always light) */
    --p-paper: #FFFFFF;
    --p-ink: #111111;
    --p-line: #444444;
    --p-soft: #F1F1F1;
    --font-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
    --font-num: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #141519;
      --surface: #1D1F24;
      --surface-2: #24262D;
      --line: #34363E;
      --text: #E9EAEE;
      --muted: #9BA0AB;
      --accent: #E08894;
      --accent-ink: #2A0D11;
      --brass: #D9BC6A;
      --brass-bg: #2E2A18;
      --warn: #F0A184;
      --warn-bg: #392017;
      --ok: #6CBF95;
      --ok-bg: #172E23;
      --focus: #E8A0AA;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"] {
    --bg: #141519;
    --surface: #1D1F24;
    --surface-2: #24262D;
    --line: #34363E;
    --text: #E9EAEE;
    --muted: #9BA0AB;
    --accent: #E08894;
    --accent-ink: #2A0D11;
    --brass: #D9BC6A;
    --brass-bg: #2E2A18;
    --warn: #F0A184;
    --warn-bg: #392017;
    --ok: #6CBF95;
    --ok-bg: #172E23;
    --focus: #E8A0AA;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }

  /* ---------- base ---------- */
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
  button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
  button:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  table { border-collapse: collapse; }
  .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

  /* ---------- prototype switcher ---------- */
  .proto {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .proto .tag { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
  .proto button {
    min-height: 44px; padding: 0 16px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface); color: var(--text);
    transition: background .15s ease, border-color .15s ease;
  }
  .proto button:hover { background: var(--surface-2); }
  .proto button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .proto .hint { margin-left: auto; font-size: 13px; color: var(--muted); }

  /* ======================================================
     1. KIOSK  /clock
     ====================================================== */
  .k {
    background: var(--k-bg); color: var(--k-text);
    min-height: calc(100dvh - 61px);
    /* 1fr 単独だと WebKit が列を中身の最小幅より縮めず横はみ出しする → minmax(0, 1fr) */
    display: grid; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    padding: 24px; gap: 24px;
  }
  @media (max-width: 860px) { .k { grid-template-columns: minmax(0, 1fr); } }
  .k-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  .k-brand { display: flex; align-items: center; gap: 12px; color: var(--k-muted); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
  .k-brand .chip { width: 14px; height: 14px; border-radius: 50%; background: var(--k-brass); box-shadow: inset 0 0 0 3px var(--k-bg), 0 0 0 1px var(--k-brass); }
  .k-clock { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 500; font-size: clamp(56px, 9vw, 112px); line-height: 1; letter-spacing: -.02em; }
  .k-clock .sec { font-size: .4em; color: var(--k-muted); margin-left: .15em; }
  .k-date { font-size: 22px; font-weight: 500; }
  .k-bizday { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: var(--k-surface); color: var(--k-muted); font-size: 14px; }
  .k-bizday b { color: var(--k-text); font-weight: 500; }
  .k-stat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .k-stat div { background: var(--k-surface); border-radius: 12px; padding: 14px 16px; }
  .k-stat span { display: block; font-size: 13px; color: var(--k-muted); }
  .k-stat strong { font-family: var(--font-num); font-size: 32px; font-weight: 500; line-height: 1.1; }
  .k-help { margin-top: auto; font-size: 14px; color: var(--k-muted); line-height: 1.7; }

  .k-allout {
    min-height: 64px; padding: 10px 18px; border-radius: 14px;
    border: 2px solid var(--k-coral); background: transparent; color: var(--k-coral);
    font-size: 22px; font-weight: 700; text-align: left;
    display: flex; flex-direction: column; gap: 2px;
    transition: transform .12s ease, background .15s ease;
  }
  .k-allout:hover { background: var(--k-surface); }
  .k-allout:active { transform: scale(.97); }
  .k-allout .sub { font-size: 13px; font-weight: 500; color: var(--k-muted); }
  .k-sheet .members { font-size: 16px; line-height: 1.7; color: var(--k-text); max-height: 30dvh; overflow-y: auto; }
  .k-sheet .members b { font-size: 20px; }

  .k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-content: start; }
  .k-tile {
    min-height: 124px; padding: 16px 18px; border-radius: 14px;
    border: 2px solid var(--k-line); background: var(--k-surface);
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
  }
  .k-tile:hover { background: var(--k-surface-2); }
  .k-tile:active { transform: scale(.97); }
  .k-tile .name { font-size: 26px; font-weight: 700; line-height: 1.2; }
  .k-tile .st { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--k-muted); }
  .k-tile .st .num { font-size: 15px; }
  .k-tile[data-state="working"] { border-color: var(--k-brass); }
  .k-tile[data-state="working"] .st { color: var(--k-brass); }
  .k-tile[data-state="done"] { opacity: .55; }
  .k-tile .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

  /* confirm sheet */
  .k-scrim { position: fixed; inset: 0; background: rgba(10, 11, 15, .72); display: flex; align-items: flex-end; justify-content: center; z-index: 200; padding: 16px; }
  @media (min-width: 700px) { .k-scrim { align-items: center; } }
  .k-sheet {
    /* min(560px, 100%) は iOS Safari がグリッド内で 100% を解決できず 560px 固定になる */
    width: 100%; max-width: 560px; min-width: 0; background: var(--k-surface); color: var(--k-text);
    border-radius: 20px; padding: 28px; border: 1px solid var(--k-line);
    display: flex; flex-direction: column; gap: 20px;
    animation: rise .2s ease-out;
  }
  @keyframes rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
  .k-sheet .who { font-size: 34px; font-weight: 700; }
  .k-sheet .when { color: var(--k-muted); font-size: 16px; }
  .k-sheet .when .num { color: var(--k-text); font-size: 28px; font-weight: 500; display: block; margin-top: 4px; }
  .k-sheet .rounded { font-size: 14px; color: var(--k-muted); }
  .k-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .k-btn { min-height: 72px; border-radius: 14px; border: 2px solid transparent; font-size: 24px; font-weight: 700; transition: transform .12s ease, filter .15s ease; }
  .k-btn:active { transform: scale(.97); }
  .k-btn.in { background: var(--k-brass); color: var(--k-brass-ink); }
  .k-btn.out { background: var(--k-coral); color: var(--k-coral-ink); }
  .k-btn.cancel { background: transparent; border-color: var(--k-line); color: var(--k-text); font-weight: 500; }
  .k-btn:hover { filter: brightness(1.08); }

  .k-toast {
    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
    background: var(--k-brass); color: var(--k-brass-ink);
    padding: 14px 22px; border-radius: 12px; font-size: 18px; font-weight: 700;
    display: flex; align-items: center; gap: 10px; z-index: 300; box-shadow: var(--shadow);
    animation: rise .2s ease-out;
  }
  .k-toast.out { background: var(--k-coral); color: var(--k-coral-ink); }

  /* ======================================================
     2. ADMIN  /admin
     ====================================================== */
  .a { max-width: 1280px; margin: 0 auto; padding: 24px 24px 64px; display: flex; flex-direction: column; gap: 24px; }
  .a-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .a-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
  .a-brand .chip { width: 12px; height: 12px; border-radius: 50%; background: var(--brass); box-shadow: inset 0 0 0 2.5px var(--bg), 0 0 0 1px var(--brass); }
  .a-nav { display: flex; gap: 4px; margin-left: 8px; }
  .a-nav button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 500; }
  .a-nav button:hover { background: var(--surface-2); color: var(--text); }
  .a-nav button[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); border-radius: 8px 8px 0 0; }
  .a-month { margin-left: auto; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .a-month button { min-width: 44px; min-height: 44px; border: 0; background: transparent; display: grid; place-items: center; }
  .a-month button:hover { background: var(--surface-2); }
  .a-month .m { min-width: 140px; text-align: center; font-weight: 700; font-size: 18px; }
  .btn { min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: background .15s ease; }
  .btn:hover { background: var(--surface-2); }
  .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .btn.primary:hover { filter: brightness(1.08); background: var(--accent); }

  .a-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .a-kpi div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
  .a-kpi span { display: block; font-size: 13px; color: var(--muted); }
  .a-kpi strong { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 500; line-height: 1.2; }
  .a-kpi strong small { font-size: 14px; color: var(--muted); margin-left: 4px; font-family: var(--font-ui); }
  .a-kpi .warn strong { color: var(--warn); }

  .a-main { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .a-main.open { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); }
  @media (max-width: 1080px) { .a-main.open { grid-template-columns: 1fr; } }
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .card-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .card-h h2 { font-size: 16px; }
  .card-h .sub { color: var(--muted); font-size: 13px; }
  .tbl-wrap { overflow-x: auto; }
  .tbl { width: 100%; font-size: 14px; }
  .tbl th { text-align: right; font-weight: 500; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: 12px; letter-spacing: .04em; }
  .tbl th:first-child, .tbl td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); }
  .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  .tbl td:first-child { font-family: var(--font-ui); font-weight: 500; }
  .tbl tr[tabindex] { cursor: pointer; transition: background .12s ease; }
  .tbl tr[tabindex]:hover td { background: var(--surface-2); }
  .tbl tr[aria-selected="true"] td { background: var(--ok-bg); }
  .tbl tfoot td { font-weight: 600; border-top: 2px solid var(--line); border-bottom: 0; }
  .tbl .dim { color: var(--muted); }
  .tbl .strong { font-weight: 600; }
  .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; font-family: var(--font-ui); vertical-align: middle; }
  .pill.warn { background: var(--warn-bg); color: var(--warn); }
  .pill.ok { background: var(--ok-bg); color: var(--ok); }
  .pill.brass { background: var(--brass-bg); color: var(--brass); }
  .pill svg.i { width: 14px; height: 14px; }

  /* detail panel */
  .a-detail { display: flex; flex-direction: column; }
  .a-detail .card-h { justify-content: space-between; }
  .a-detail .card-h h2 { font-size: 20px; }
  .a-detail .close { min-width: 44px; min-height: 44px; border: 0; background: transparent; border-radius: 8px; display: grid; place-items: center; }
  .a-detail .close:hover { background: var(--surface-2); }
  .a-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .field { display: flex; flex-direction: column; gap: 4px; }
  .field label { font-size: 12px; color: var(--muted); }
  .field input { width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15px; text-align: right; }
  .field input:hover { border-color: var(--muted); }
  .field .help { font-size: 12px; color: var(--muted); }
  .days { width: 100%; font-size: 14px; }
  .days th { font-weight: 500; color: var(--muted); font-size: 12px; padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; }
  .days th:first-child, .days th:nth-child(2) { text-align: left; }
  .days td { padding: 6px 6px; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
  .days td:first-child, .days td:nth-child(2) { text-align: left; font-family: var(--font-ui); }
  .days td.wk { color: var(--brass); font-weight: 500; }
  .days input { width: 62px; min-height: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; text-align: center; }
  .days input.bad { border-color: var(--warn); background: var(--warn-bg); }
  .days tr.off td { color: var(--muted); }
  .a-detail .foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); align-items: center; }
  .a-detail .foot .sum { margin-right: auto; font-size: 14px; color: var(--muted); }
  .a-detail .foot .sum b { font-family: var(--font-num); font-size: 18px; color: var(--text); font-weight: 600; }

  /* ======================================================
     3. PAYSLIP  /admin/payslip
     ====================================================== */
  .p-tools { max-width: 1280px; margin: 0 auto; padding: 20px 24px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .p-tools h2 { font-size: 18px; margin-right: auto; }
  .p-tools .note { width: 100%; font-size: 13px; color: var(--muted); }
  .p-stage { padding: 20px 24px 64px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .page {
    /* A4 1 枚 = 99mm の 3 等分ゾーン × 3。紙を 3 等分に切るとそのまま 1 人 1 枚になる */
    width: 210mm; min-height: 297mm; padding: 0; background: var(--p-paper); color: var(--p-ink);
    box-shadow: var(--shadow);
  }
  .cut { height: 99mm; padding: 6mm 12mm; display: flex; align-items: center; }
  .cut + .cut { border-top: 1px dashed #A9A9A9; } /* 切り取りガイド (ちょうど 99mm / 198mm の位置) */
  .cut .slip { width: 100%; }
  /* screen 限定必須: 印刷時の紙面幅 (A4=794px) がこのクエリに一致してしまい 3 等分レイアウトが壊れる */
  @media screen and (max-width: 860px) {
    .page { width: 100%; min-height: 0; padding: 8px 16px; }
    .cut { height: auto; padding: 8px 0; }
  }
  .slip { border: 1.5px solid var(--p-line); font-size: 13px; }
  .slip-h { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 16px; padding: 8px 12px; border-bottom: 1.5px solid var(--p-line); }
  .slip-h .ym { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 15px; }
  .slip-h h3 { text-align: center; font-size: 20px; letter-spacing: .3em; font-weight: 700; }
  .slip-h .no { font-size: 12px; color: #555; }
  /* ラベル幅を固定して 50% 境界を .slip-grid の列線 (2列目|3列目) と一致させる（罫線ズレ防止） */
  .slip-who { display: grid; grid-template-columns: 64px calc(50% - 64px) 64px 1fr; gap: 0; border-bottom: 1.5px solid var(--p-line); }
  .slip-who > * { padding: 8px 12px; }
  .slip-who .lbl { background: var(--p-soft); font-size: 12px; border-right: 1px solid var(--p-line); }
  .slip-who .val { font-size: 18px; font-weight: 700; border-right: 1px solid var(--p-line); }
  .slip-who .val:last-child { border-right: 0; font-weight: 500; font-size: 15px; }
  .slip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .slip-grid .cell { padding: 6px 12px 8px; border-right: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); display: flex; flex-direction: column; gap: 2px; min-height: 58px; }
  .slip-grid .cell:nth-child(4n) { border-right: 0; }
  .slip-grid .cell:nth-last-child(-n+4) { border-bottom: 0; }
  .slip-grid .cell.total { background: var(--p-soft); }
  .slip-grid .lbl { font-size: 11px; color: #444; }
  .slip-grid .val { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 19px; text-align: right; }
  .slip-grid .val.big { font-size: 22px; font-weight: 600; }
  .slip-grid .val small { font-size: 12px; margin-left: 2px; font-family: var(--font-ui); }
  .slip-f { padding: 6px 12px; border-top: 1.5px solid var(--p-line); font-size: 11px; color: #333; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .slip-f .num { color: #555; }

  @media print {
    .proto, .p-tools, #screen-clock, #screen-admin { display: none !important; }
    body { background: #fff; }
    /* 画面用の flex 中央寄せのままだと .page が内容幅まで縮み、明細が小さく中央に寄ってしまう */
    .p-stage { display: block; padding: 0; }
    .page { width: auto; min-height: 0; box-shadow: none; padding: 0; page-break-after: always; }
    .page:last-child { page-break-after: auto; } /* 末尾の空白ページを作らない */
    .slip { break-inside: avoid; } /* 明細 1 枚をページまたぎで分割しない */
    .cut { break-inside: avoid; }
    /* 3 等分ゾーンを用紙の物理位置 (0/99/198mm) に一致させるため余白ゼロで印刷 */
    @page { size: A4; margin: 0; }
  }

/* ---------- server 追加分 ---------- */
body.kiosk-body { background: var(--k-bg); }
.k-full { min-height: 100dvh; }
.k-toast.in { background: var(--k-brass); color: var(--k-brass-ink); }
.reg-label { font-size: 13px; color: var(--k-muted); }
.reg-input { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--k-line); background: var(--k-bg); color: var(--k-text); font: inherit; }
.reg-error { color: var(--k-coral); margin: 0; }
.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 20px; }
.login-card label { font-size: 13px; color: var(--muted); }
.login-card input { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; }
.login-error { color: var(--warn); margin: 0; font-size: 14px; }
.field select.txt, .field input.txt { text-align: left; font-family: var(--font-ui); }
.field select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
tr.inactive td { color: var(--muted); }
.a-detail-page .foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); align-items: center; }
.a-detail-page .foot .sum { margin-right: auto; font-size: 14px; color: var(--muted); }
.a-detail-page .foot .sum b { font-family: var(--font-num); font-size: 18px; color: var(--text); font-weight: 600; }
.a-detail-page .days input { width: 68px; }
.a-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.card-h .emp-add { margin-left: auto; }
dialog#emp-dialog { width: min(680px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); padding: 0; box-shadow: var(--shadow); }
dialog#emp-dialog::backdrop { background: rgba(10, 11, 15, .6); }
dialog#emp-dialog .dlg-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; }
dialog#emp-dialog .dlg-h h2 { font-size: 18px; }
dialog#emp-dialog .close { min-width: 44px; min-height: 44px; border: 0; background: transparent; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--text); }
dialog#emp-dialog .close:hover { background: var(--surface-2); }

.today-empty { margin: 0; padding: 16px 18px; color: var(--muted); font-size: 14px; }

/* ---------- テストモード (日時上書き中) の警告バナー ---------- */
.test-banner, .k-testband {
  /* ダークモードの --warn は淡色で白文字が沈むため固定色（白と 6.1:1） */
  background: #A8420F; color: #FFFFFF;
  text-align: center; font-weight: 700; font-size: 14px;
  padding: 8px 16px; line-height: 1.5;
}
.k-testband { position: sticky; top: 0; z-index: 150; }
.k-testband button {
  margin-left: 12px; min-height: 32px; padding: 2px 12px; border-radius: 8px;
  border: 1px solid #FFFFFF; background: transparent; color: #FFFFFF; font-weight: 700; font-size: 13px;
}
.k-testband button:hover { background: rgba(255, 255, 255, .15); }
.k-testbtn {
  min-height: 56px; padding: 8px 18px; border-radius: 14px;
  border: 2px dashed var(--k-line); background: transparent; color: var(--k-muted);
  font-size: 18px; font-weight: 700; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  transition: background .15s ease, color .15s ease;
}
.k-testbtn:hover { background: var(--k-surface); color: var(--k-text); }
.k-testbtn .sub { font-size: 12px; font-weight: 500; color: var(--k-muted); }
.k-dtinput {
  min-height: 56px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--k-line); background: var(--k-bg); color: var(--k-text);
  font: inherit; font-size: 20px; color-scheme: dark;
}
.k-btn.k-reset { border: 2px solid var(--k-line); background: transparent; color: var(--k-text); font-weight: 500; }
.k-btn.k-reset:hover { background: var(--k-surface-2); }

/* ---------- モバイル (管理画面はオーナーがスマホで見る前提、375px 基準) ---------- */
/* 日別テーブルも先頭列（日付）を固定して横スクロールしやすく */
.days th:first-child, .days td:first-child { position: sticky; left: 0; background: var(--surface); }
@media (max-width: 640px) {
  .a { padding: 16px 12px 48px; gap: 16px; }
  /* ヘッダーを 3 段組みに: ブランド+ログアウト / タブ / 月切替 */
  .a-top { row-gap: 10px; }
  .a-brand { order: 1; }
  .a-top > form { order: 2; margin-left: auto; }
  .a-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .a-nav button { white-space: nowrap; }
  .a-month { order: 4; width: 100%; margin-left: 0; justify-content: space-between; }
  .a-month .m { min-width: 0; flex: 1; }
  .a-kpi { grid-template-columns: 1fr 1fr; }
  .a-kpi strong { font-size: 22px; }
  .a-kpi div { padding: 12px 14px; }
  .tbl th, .tbl td { padding: 8px 10px; }
  .card-h { flex-wrap: wrap; }
  .a-fields { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; }
  .a-detail-page .foot, .a-detail .foot { flex-wrap: wrap; padding: 12px; }
  .p-tools { padding: 16px 12px 0; }
  .p-stage { padding: 16px 12px 48px; }
  /* iOS はフォーカスした入力が 16px 未満だと画面ごとズームするため 16px に */
  .field input, .field select, .days input, .login-card input, .reg-input { font-size: 16px; }
  .days input { width: 72px; }
}
@media (max-width: 440px) {
  dialog#emp-dialog .a-fields { grid-template-columns: 1fr; }
}