/*
 * 年収の壁チェッカー（仮） の見た目
 * - 色・余白・文字の大きさ・角の丸み・タップの大きさは、すぐ下の :root の変数にまとめてある。
 *   デザインを直すときは、まずここの値を変える（ダークモードの色は prefers-color-scheme: dark の中）
 * - 外部のフォント・画像は使わない（端末にある文字だけ）
 * - スマホ（幅 375px 前後）を基準にし、横にはみ出さないようにする
 */

:root {
  color-scheme: light dark;

  /* ---- 色（ライト） ---- */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-2: #eef1f5;
  --color-text: #1a1d21;
  --color-text-muted: #545c66;
  --color-border: #cfd5dd;
  --color-primary: #1d5bb8;
  --color-primary-text: #ffffff;
  --color-link: #1d5bb8;
  --color-focus: #e69500;
  --color-error: #b3261e;
  --color-error-bg: #fdecea;

  /* 状態の色（色だけに頼らず、文字の「余裕あり」などと一緒に使う） */
  --color-ok: #1b7a37;
  --color-ok-bg: #e6f4ea;
  --color-near: #8a5300;
  --color-near-bg: #fff3d4;
  --color-over: #b3261e;
  --color-over-bg: #fdecea;
  --color-na: #545c66;
  --color-na-bg: #eef1f5;
  --color-info: #285c91;
  --color-info-bg: #e5eef8;
  --color-nearest: #1d5bb8;

  /* 勤務先の色（T-0019。①②③の文字と一緒に使い、色だけで区別しない） */
  --color-job-0: #1d5bb8;
  --color-job-0-bg: #e3edfb;
  --color-job-1: #a8510a;
  --color-job-1-bg: #fdefdc;
  --color-job-2: #7b3fa0;
  --color-job-2-bg: #f2e7f9;
  --color-job-mark-text: #ffffff;

  /* 月ごとの出どころの札（「明細（確定）」などの文字と一緒に使う） */
  --color-source-actual: #1b7a37;
  --color-source-actual-bg: #e6f4ea;
  --color-source-schedule: #1d5bb8;
  --color-source-schedule-bg: #e3edfb;
  --color-source-forecast: #8a5300;
  --color-source-forecast-bg: #fff3d4;
  --color-source-none: #545c66;
  --color-source-none-bg: #eef1f5;

  /* ---- 余白 ---- */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --page-padding: var(--space-4);
  --list-indent: 1.2em;
  --month-label-width: 3.2em;  /* 入力の画面の「1月」などの列の幅 */

  /* ---- 文字 ---- */
  --font-family: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --font-size-xs: 0.8125rem;  /* 13px */
  --font-size-s: 0.875rem;    /* 14px */
  --font-size-m: 1rem;        /* 16px */
  --font-size-input: 1rem;    /* 入力欄。16px 未満にしない（iPhone で画面が拡大されるため） */
  --font-size-l: 1.125rem;    /* 18px */
  --font-size-xl: 1.375rem;   /* 22px */
  --font-size-xxl: 1.625rem;  /* 26px */
  --line-height: 1.65;
  --font-weight-bold: 700;

  /* ---- 形 ---- */
  --radius: 12px;
  --radius-s: 8px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;  /* 誤りの欄・選んだもの・状態の札 */
  --border-width-heavy: 3px;   /* いちばん近い壁・選んだタブ・フォーカス */
  --border-width-status: 6px;  /* 壁のカードの左の色の帯 */
  --radio-size: 22px;
  --tap-size: 48px;           /* タップする所の最小の高さ */
  --tabbar-height: 60px;
  --topbar-height: 44px;       /* T-0032 上の帯（画面の名前・‹ 戻る・?） */
  --topbar-tap-size: 44px;     /* 上の帯の中のボタンの大きさ（帯の高さに合わせる） */
  --content-max-width: 640px;
  --sheet-small-max: 60%;      /* T-0032 下から出るシート（小）の高さの上限（シートの置き場所の高さに対して） */
  --sheet-large-max: 90%;      /* 下から出るシート（大） */
  --color-backdrop: rgba(0, 0, 0, 0.4);  /* シートの後ろの暗い所 */

  /* ---- 予定表のカレンダー（T-0019。幅 375px で7列が入る大きさ） ---- */
  --cal-gap: 2px;
  --cal-cell-min-height: 64px;
  --cal-cell-padding: 2px;
  --font-size-cal-num: 0.8125rem;  /* 13px 日の数字 */
  --font-size-chip: 0.625rem;      /* 10px シフトの印（読み上げは日のボタンの名前で出す） */
  --line-height-chip: 1.3;
  --job-mark-size: 1.5em;
  --border-width-job: 3px;         /* シフトの印の左の帯（T-0020: 4px → 3px。文字の幅を空けるため） */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111317;
    --color-surface: #1b1e23;
    --color-surface-2: #252930;
    --color-text: #e9ebee;
    --color-text-muted: #aab2bc;
    --color-border: #3b424c;
    --color-primary: #74a9ff;
    --color-primary-text: #0b1322;
    --color-link: #8db8ff;
    --color-focus: #ffbf47;
    --color-error: #ff8a80;
    --color-error-bg: #3b1c1a;

    --color-ok: #74d491;
    --color-ok-bg: #15301e;
    --color-near: #ffd166;
    --color-near-bg: #392d0f;
    --color-over: #ff8a80;
    --color-over-bg: #3b1c1a;
    --color-na: #aab2bc;
    --color-na-bg: #252930;
    --color-info: #9cc4f0;
    --color-info-bg: #16263a;
    --color-nearest: #74a9ff;

    --color-job-0: #8db8ff;
    --color-job-0-bg: #1b2a44;
    --color-job-1: #f2b36b;
    --color-job-1-bg: #3a2a14;
    --color-job-2: #d3a6f0;
    --color-job-2-bg: #2f2140;
    --color-job-mark-text: #0b1322;

    --color-source-actual: #74d491;
    --color-source-actual-bg: #15301e;
    --color-source-schedule: #8db8ff;
    --color-source-schedule-bg: #1b2a44;
    --color-source-forecast: #ffd166;
    --color-source-forecast-bg: #392d0f;
    --color-source-none: #aab2bc;
    --color-source-none-bg: #252930;
  }
}

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

[hidden] {
  display: none !important;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* T-0032: アプリの形。ページ全体は縦に動かさず、上の帯・中身の箱・下のタブに分ける。
   中身がはみ出したときだけ、各画面の中身の箱（.screen-body）が縦に動く（最後の逃げ道。workspace/T-0031/layout.md） */
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-m);
  line-height: var(--line-height);
  overflow-wrap: break-word;
}

main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 0;
}

/* 1つの画面 = 上の帯（.topbar）＋中身の箱（.screen-body） */
.screen {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.screen-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* 幅の広い画面では、中身を --content-max-width の幅で真ん中に置く */
  padding: var(--space-3) max(var(--page-padding), calc((100% - var(--content-max-width)) / 2)) var(--space-5);
}

/* D-031: 「説明」（詳しくの画面）だけは縦に動いてよい。ほかの画面の .screen-body が動くのは、文字を大きくしたときなどの最後の逃げ道
   （作り直しのタスクで、375×812 では動かないように組む。高さは U11 で測る） */
.screen-body--scroll {
  overflow-y: auto;
}

p {
  margin: 0 0 var(--space-2);
}

a {
  color: var(--color-link);
}

:focus-visible {
  outline: var(--border-width-heavy) solid var(--color-focus);
  outline-offset: var(--space-0);
}

input,
select,
button,
textarea {
  font: inherit;
  max-width: 100%;
}

/* ---------------------------------------------------------------- 見出し・帯 */
/* T-0032 上の帯（44px）: 左に「‹ 戻る」（中の画面のとき）、画面の名前、右に「?」などの小さなボタン。
   アプリの名前は出さない（T-0031 までの .app-header の代わり。名前は h1.visually-hidden と document.title） */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(var(--page-padding), calc((100% - var(--content-max-width)) / 2)) 0;
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.screen-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-l);
  line-height: 1.3;
}

.screen-title:focus {
  outline: none;
}

/* 「‹ ホーム」など。押すと戻る先の画面（state.js の SCREEN_PARENTS） */
.topbar-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  min-width: var(--topbar-tap-size);
  min-height: var(--topbar-tap-size);
  margin-left: calc(var(--space-2) * -1);
  padding: 0 var(--space-2);
  color: var(--color-link);
  font-size: var(--font-size-l);
  text-decoration: none;
}

.topbar-back-text {
  font-size: var(--font-size-m);
}

/* [?]: 押すと説明のシート（.sheet）が下から出る */
.help-button {
  flex: 0 0 auto;
  min-width: var(--topbar-tap-size);
  min-height: var(--topbar-tap-size);
  padding: 0;
  background: transparent;
  color: var(--color-link);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.section-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-size-l);
}

.lead {
  color: var(--color-text-muted);
}

/* T-0032 画面の中の「›で進む」入り口（ホームの「詳しく」: 月ごと・壁ごと・説明） */
.entry-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.entry-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

.entry-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-size);
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.entry-arrow {
  color: var(--color-text-muted);
}

/* T-0032 お知らせ・新しい版・ホーム画面に追加の案内は、上の帯のすぐ下に重ねて出す（中身を押し下げない）。
   T-0018 の「固定しない」は、ページ全体が縦に動く作りで、先頭の帯が場所を取り続けないためだった。T-0032 からは
   ページ全体が動かず中身の箱だけが動くので、帯は重ねて出し、閉じるボタンで消す（ok のお知らせは6秒で消える） */
.overlay-stack {
  position: fixed;
  top: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: var(--space-1);
  max-height: calc(100% - var(--topbar-height) - var(--tabbar-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  pointer-events: none;
}

.overlay-stack > * {
  pointer-events: auto;
  box-shadow: 0 var(--space-1) var(--space-2) var(--color-backdrop);
}

/* お知らせの帯（.overlay-stack の中。帯そのものは位置を持たない） */
.banner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--page-padding);
  background: var(--color-info-bg);
  color: var(--color-text);
  border-bottom: var(--border-width-heavy) solid var(--color-info);
}

.banner--error {
  background: var(--color-error-bg);
  border-bottom-color: var(--color-error);
}

.banner--ok {
  background: var(--color-ok-bg);
  border-bottom-color: var(--color-ok);
}

.banner-text {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.banner-close {
  flex: 0 0 auto;
  min-height: var(--tap-size);
  padding: 0 var(--space-3);
  background: transparent;
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
}

/* ---------------------------------------------------------------- 箱 */
.card {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}

.notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-info-bg);
  border-left: var(--border-width-status) solid var(--color-info);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
}

.notice p:last-child {
  margin-bottom: 0;
}

.error-box {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-error-bg);
  border: var(--border-width-strong) solid var(--color-error);
  border-radius: var(--radius-s);
}

.error-box ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--list-indent);
}

.error-box li {
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------- 入力欄 */
.field {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  min-width: 0;
}

.field:last-child {
  margin-bottom: 0;
}

.field-label {
  display: block;
  margin-bottom: var(--space-1);
  padding: 0;
  font-weight: var(--font-weight-bold);
}

.hint {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
}

.field-error {
  margin: var(--space-1) 0 0;
  color: var(--color-error);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

.field-error::before {
  content: "入力の誤り: ";
}

.input {
  display: block;
  width: 100%;
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  font-size: var(--font-size-input);
}

.input[aria-invalid="true"] {
  border: var(--border-width-strong) solid var(--color-error);
}

.amount {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.amount .input {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.unit {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

.choice-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  cursor: pointer;
}

.choice:has(input:checked) {
  border: var(--border-width-strong) solid var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.choice input {
  flex: 0 0 auto;
  width: var(--radio-size);
  height: var(--radio-size);
  margin: 0;
  accent-color: var(--color-primary);
}

/* 住民税の基準額の3つの選び方（文が長いので1列に並べる） */
.choice-group--stack {
  grid-template-columns: 1fr;
}

/* 選んだ選び方の下に出す欄（入力・都道府県と市区町村） */
.sub-field {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-s);
}

.sub-field .input {
  background: var(--color-surface);
}

.input:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* 「計算に使う額」 */
.rt-current {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: var(--border-width-heavy) solid var(--color-primary);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

.rt-current:empty {
  display: none;
}

/* ---------------------------------------------------------------- ボタン */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: var(--border-width-strong) solid var(--color-primary);
  border-radius: var(--radius-s);
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button-danger {
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-error);
  border: var(--border-width) solid var(--color-error);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
  cursor: pointer;
}

/* 画面には見せないが、読み上げとキーボードでは使える（ファイルの選択の欄） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden:focus-visible + .button {
  outline: var(--border-width-heavy) solid var(--color-focus);
  outline-offset: var(--space-0);
}

.button-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

@media (min-width: 480px) {
  .button-row {
    grid-template-columns: 1fr 1fr;
  }
}

.next-row {
  display: grid;
  margin: var(--space-5) 0;
}

/* ---------------------------------------------------------------- 入力の画面 */
.summary-mini {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
}

.summary-mini p:last-child {
  margin-bottom: 0;
}

.job-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.job-title {
  margin: 0;
  font-size: var(--font-size-l);
}

.sub-title {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-m);
}

.month-grid {
  display: grid;
  gap: var(--space-2);
}

.month-row,
.month-head {
  display: grid;
  grid-template-columns: var(--month-label-width) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.month-head {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.month-head span:not(:first-child) {
  text-align: right;
}

.month-label {
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
  font-weight: var(--font-weight-bold);
}

.month-row .input {
  text-align: right;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.month-row .field-error {
  font-size: var(--font-size-xs);
}

.months-forecast-note {
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-s);
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
}

.details-summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-size);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.details[open] .details-summary {
  margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------- 結果の画面 */
.rule-version {
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
}

.summary-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

.summary-main {
  margin: var(--space-1) 0;
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.summary-amount {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.summary-over {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-over-bg);
  color: var(--color-over);
  border-radius: var(--radius-s);
  font-weight: var(--font-weight-bold);
}

/* ---------------------------------------------------------------- T-0033 ホーム（1画面に収める。workspace/T-0031/layout.md の H）
   高さの目安（375×812・中身 640px 以内）: 上の帯 44・いちばん近い壁 約176・収益 約160・シフト／明細／注意 44×3・ルール 20・詳しく 44・すき間 8×7。
   見た目は最小限（D-024。色・余白は既存の変数だけ） */
.home-body > * + * {
  margin-top: var(--space-2);
}

.home-body p {
  margin-bottom: 0;
}

.home-main {
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width-heavy) solid var(--color-nearest);
  border-radius: var(--radius);
}

.home-wall {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
}

.home-wall a {
  text-decoration: none;
}

.home-main .summary-amount {
  line-height: 1.4;
}

.home-main .summary-hours {
  margin: 0;
}

.home-over {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-s);
}

.home-over a {
  color: inherit;
}

.home-setup-text {
  margin: var(--space-1) 0 var(--space-2);
}

.home-card {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
}

.home-month-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--topbar-tap-size);
}

.home-month-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--font-size-m);
  text-align: center;
}

.home-month-move {
  flex: 0 0 auto;
  min-width: var(--topbar-tap-size);
  min-height: var(--topbar-tap-size);
  padding: 0;
  background: transparent;
  color: var(--color-link);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  font-size: var(--font-size-l);
  cursor: pointer;
}

.home-month-move:disabled {
  color: var(--color-text-muted);
  cursor: default;
  opacity: 0.5;
}

.home-month-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  line-height: 1.4;
}

.home-amount {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.home-month-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.home-year {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-2);
  margin: var(--space-1) 0 0;
  padding-top: var(--space-1);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-s);
  line-height: 1.7;
}

.home-year div {
  display: contents;
}

.home-year dt {
  color: var(--color-text-muted);
}

.home-year dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 押すと進む1行（今日か次のシフト・明細を入れる月・注意 n件・直す所 n件） */
.home-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--topbar-tap-size);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  font: inherit;
  font-size: var(--font-size-s);
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.home-row > :first-child {
  flex: 1 1 auto;
}

.home-row-label {
  font-weight: var(--font-weight-bold);
}

.home-row-value {
  flex: 1 1 auto;
}

.home-row--error {
  margin-top: var(--space-1);
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
  font-weight: var(--font-weight-bold);
}

.home-rules {
  font-size: var(--font-size-xs);
}

.home-rules a {
  margin-left: var(--space-1);
}

.home-body .entry-row {
  margin: var(--space-2) 0 0;
}

/* T-0033 壁までの棒（D-031）。色は壁の状態の色の変数（wall--* と同じ）。数字と状態の文字も出すので、色だけに頼らない。
   19〜22歳の W-b の切り替わりは中立（.meter--neutral。T-0017・T-0018） */
.meter {
  --status-color: var(--color-ok);
  --status-bg: var(--color-ok-bg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-s);
}

.meter--near {
  --status-color: var(--color-near);
  --status-bg: var(--color-near-bg);
}

.meter--over,
.meter--over-projected {
  --status-color: var(--color-over);
  --status-bg: var(--color-over-bg);
}

.meter--neutral,
.meter--switch {
  --status-color: var(--color-info);
  --status-bg: var(--color-info-bg);
}

.meter-track {
  flex: 1 1 auto;
  height: 10px;
  min-width: 4em;
  overflow: hidden;
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
}

.meter-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--status-color);
}

.meter-text {
  flex: 0 0 auto;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.meter-status {
  flex: 0 0 auto;
  padding: 0 var(--space-2);
  background: var(--status-bg);
  color: var(--status-color);
  border: var(--border-width) solid var(--status-color);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

/* シートの中の一覧（G-1 入力の誤り・D-3 注意） */
.sheet-list {
  margin: 0;
  padding-left: var(--list-indent);
}

.sheet-list li + li {
  margin-top: var(--space-2);
}

.profile {
  margin: 0;
}

/* T-0035 壁ごとの行と壁のシートの状態の色（既定は余裕あり。.wall--* で変える） */
.walls-row,
.wall-sheet {
  --status-color: var(--color-ok);
  --status-bg: var(--color-ok-bg);
}

.wall--ok {
  --status-color: var(--color-ok);
  --status-bg: var(--color-ok-bg);
}

.wall--near {
  --status-color: var(--color-near);
  --status-bg: var(--color-near-bg);
}

.wall--over-projected,
.wall--over {
  --status-color: var(--color-over);
  --status-bg: var(--color-over-bg);
}

.wall--na {
  --status-color: var(--color-na);
  --status-bg: var(--color-na-bg);
}

.wall--info {
  --status-color: var(--color-info);
  --status-bg: var(--color-info-bg);
}

/* W-b: 19〜22歳で 136万円を超えても親の控除額は同じ → 赤ではなく中立の色（文字「切り替わり（控除額は同じ）」と一緒に使う） */
.wall--switch {
  --status-color: var(--color-info);
  --status-bg: var(--color-info-bg);
}

/* 壁のシートの補足（「目安」であることなど） */
.wall-note {
  margin: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
}

.wall--nearest {
  border: var(--border-width-heavy) solid var(--color-nearest);
  border-left: var(--border-width-status) solid var(--status-color);
}

.wall-code {
  display: inline-block;
  padding: 0 var(--space-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

.badge {
  display: inline-block;
  padding: var(--space-0) var(--space-3);
  background: var(--status-bg);
  color: var(--status-color);
  border: var(--border-width-strong) solid var(--status-color);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.badge-nearest {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-0) var(--space-3);
  background: var(--color-nearest);
  color: var(--color-primary-text);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

.wall-meta {
  margin: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
}

.rows {
  margin: var(--space-3) 0;
}

.rows > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-3);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.rows dt {
  flex: 1 1 9em;
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
}

.rows dd {
  flex: 1 1 auto;
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.rows .row-strong dd {
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  color: var(--status-color);
}

.consequence {
  margin: var(--space-3) 0 var(--space-2);
  padding: var(--space-3);
  background: var(--status-bg);
  border-radius: var(--radius-s);
}

.consequence-who {
  font-weight: var(--font-weight-bold);
}

/* ---------------------------------------------------------------- 説明の画面
   T-0041（U10。layout.md の D-4）: 目次は1行ずつの行（.home-row。1行 44px × 12行で1画面に収める）。項目の画面は縦に動いてよい（D-031） */
.about-toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-toc-row {
  border-radius: 0;
}

.about-toc li + li .about-toc-row {
  border-top-width: 0;
}

.about-item {
  margin: 0 0 var(--space-4);
}

.explain-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-l);
  line-height: 1.4;
}

.explain-list {
  margin: 0 0 var(--space-3);
}

.explain-list > div {
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.explain-list dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

.explain-list dd {
  margin: 0;
}

.links-title {
  margin: var(--space-3) 0 var(--space-1);
  font-weight: var(--font-weight-bold);
}

.links,
.disclaimer-list {
  margin: 0;
  padding-left: var(--list-indent);
}

.links li {
  margin-bottom: var(--space-2);
}

.links a {
  display: inline-block;
  padding: var(--space-1) 0;
  overflow-wrap: anywhere;
}

.disclaimer-list li {
  margin-bottom: var(--space-2);
}

.steps {
  width: 100%;
  margin: var(--space-3) 0;
  border-collapse: collapse;
  font-size: var(--font-size-s);
}

.steps caption {
  margin-bottom: var(--space-2);
  text-align: left;
  font-weight: var(--font-weight-bold);
}

.steps th,
.steps td {
  padding: var(--space-2);
  border-bottom: var(--border-width) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.steps td:last-child,
.steps th:last-child {
  text-align: right;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 下のタブ */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* T-0032（D-031）: ホーム・予定・明細・設定 */
  min-height: var(--tabbar-height);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface);
  border-top: var(--border-width) solid var(--color-border);
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-size);
  color: var(--color-text-muted);
  border-top: var(--border-width-heavy) solid transparent;
  font-size: var(--font-size-m);
  text-decoration: none;
}

.tab[aria-current="page"] {
  color: var(--color-primary);
  border-top-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* ================================================================ T-0019 予定・明細・勤務先の設定 */

/* ---------------------------------------------------------------- 勤務先の印（①②③＋色） */
.job-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--job-mark-size);
  height: var(--job-mark-size);
  border-radius: var(--radius-pill);
  background: var(--color-job-0);
  color: var(--color-job-mark-text);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.job-mark--1 {
  background: var(--color-job-1);
}

.job-mark--2 {
  background: var(--color-job-2);
}

.button-small {
  min-height: var(--tap-size);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
  cursor: pointer;
}

.button-slim {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  font-size: var(--font-size-s);
}

/* ---------------------------------------------------------------- 設定の画面: 勤務先 */
.job-head .job-title {
  flex: 1 1 8em;
}

.payrule {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-s);
}

.payrule .input {
  background: var(--color-surface);
}

.payday-row,
.forecast-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.payday-row .field,
.forecast-row .field {
  margin-bottom: 0;
}

.payrule-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-left: var(--border-width-heavy) solid var(--color-info);
  background: var(--color-surface);
  font-size: var(--font-size-s);
}

/* 未選択・決まりに合わない: 「まだ使えない」ことを、文と太字と色の帯で示す */
.payrule-note--missing {
  border-left-color: var(--color-near);
  background: var(--color-near-bg);
  font-weight: var(--font-weight-bold);
}

/* ---------------------------------------------------------------- 予定の画面: カレンダー */
.cal-today {
  min-height: var(--tap-size);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
  cursor: pointer;
}

.cal-title {
  margin: 0;
  font-size: var(--font-size-l);
  text-align: center;
  white-space: nowrap;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-s);
}

.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.cal {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: var(--cal-gap);
  margin: 0 0 var(--space-2);
}

.cal-wd {
  padding: var(--space-1) 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.cal-cell {
  padding: 0;
  vertical-align: top;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-0);
  width: 100%;
  min-height: var(--cal-cell-min-height);
  padding: var(--cal-cell-padding);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.cal-num {
  font-size: var(--font-size-cal-num);
  line-height: 1.3;
}

/* 今日: 太い枠と太字（色だけにしない） */
.cal-day--today {
  border: var(--border-width-strong) solid var(--color-text);
}

.cal-day--today .cal-num {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

/* 開いている日: いちばん太い枠と背景 */
.cal-day[aria-pressed="true"] {
  border: var(--border-width-heavy) solid var(--color-primary);
  background: var(--color-info-bg);
}

.cal-chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  min-width: 0;
}

/*
 * シフトの印（T-0020）: 1行目に勤務先の印（①②③）、2行目に実働の時間（4h30）。時刻は日を開いたときの一覧に出す。
 * T-0019 の「①18-23」は1行（white-space: nowrap と overflow: hidden）だったため、幅 375px で「①18-2.」と切れていた。
 * 幅 375px のときの1つの印の文字の幅（目安）:
 *   main の中 375 − 16×2 = 343px → 7列と8つの間（2px）で 1列 (343 − 16) ÷ 7 ≈ 46.7px
 *   → 日のボタンの枠 1px×2・内側の余白 2px×2 を引いて 40.7px（今日は枠 2px で 38.7px、開いた日は枠 3px で 36.7px）
 *   → 印の左の帯 3px・左の余白 2px を引いて 35.7px（開いた日は 31.7px）
 *   2行目はいちばん長くても「23h59」の5文字（10px の文字で約 30px）なので入る。
 * それでも入りきらない幅（字の大きい設定・幅の狭い端末）では、隠さずに折り返す（overflow-wrap: anywhere。nowrap と overflow: hidden は使わない）
 */
.chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0 0 0 var(--space-0);
  background: var(--color-job-0-bg);
  border-left: var(--border-width-job) solid var(--color-job-0);
  border-radius: var(--space-0);
  font-size: var(--font-size-chip);
  line-height: var(--line-height-chip);
  overflow-wrap: anywhere;
}

.chip-mark {
  font-weight: var(--font-weight-bold);
}

.chip-hours {
  max-width: 100%;
}

.chip--1 {
  background: var(--color-job-1-bg);
  border-left-color: var(--color-job-1);
}

.chip--2 {
  background: var(--color-job-2-bg);
  border-left-color: var(--color-job-2);
}

.chip-more {
  font-size: var(--font-size-chip);
  color: var(--color-text-muted);
}

.cal-summary {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-s);
  font-weight: var(--font-weight-bold);
}

/* ---------------------------------------------------------------- 予定の画面: その日のシフトと欄 */
.day-panel {
  margin-top: var(--space-4);
  border: var(--border-width-strong) solid var(--color-primary);
}

.day-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-l);
}

.day-title:focus {
  outline: none;
}

.shift-list {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.shift-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.shift-item--editing {
  background: var(--color-info-bg);
}

.shift-main p {
  margin: 0;
}

.shift-detail,
.shift-editing {
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
}

.shift-actions {
  grid-column: 2;
  display: flex;
  gap: var(--space-2);
}

.shift-form {
  padding-top: var(--space-3);
  border-top: var(--border-width-strong) solid var(--color-border);
}

.time-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.break-choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.break-choice {
  min-height: var(--tap-size);
  padding: 0;
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
  cursor: pointer;
}

/* 選んだ休憩: 太い枠・太字・「✓」（色だけにしない） */
.break-choice[aria-pressed="true"] {
  border: var(--border-width-heavy) solid var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.break-choice[aria-pressed="true"]::before {
  content: "✓";
}

.break-free {
  max-width: 16em;
}

.break-free-label {
  flex: 0 0 auto;
  font-size: var(--font-size-s);
}

.shift-preview {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
}

.shift-preview:empty {
  display: none;
}

/* ---------------------------------------------------------------- T-0024 シフトを速く入れる（見た目は最小限。D-024） */
/* 前に入れたシフトの組の一覧（日を開いたとき・まとめて入れるとき） */
.day-sets {
  margin-bottom: var(--space-3);
}

.set-list {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.set-item {
  padding: var(--space-1) 0;
}

.set-button {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  color: var(--color-text);
  text-align: left;
}

/* まとめて入れる欄に入れた組: 太い枠・太字（色だけにしない） */
.set-button[aria-pressed="true"] {
  border: var(--border-width-heavy) solid var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.set-note {
  margin: var(--space-1) 0 0;
}

.set-note--ng {
  color: var(--color-error);
}

/* 複数の日を選んでいるとき: 選んだ日は aria-pressed の太い枠と背景（.cal-day[aria-pressed="true"]）に加えて「✓」 */
.cal-day--picked .cal-num::before {
  content: "✓";
}

.pick-note {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: var(--border-width-heavy) solid var(--color-primary);
  background: var(--color-info-bg);
  font-size: var(--font-size-s);
}

.pick-result {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-s);
}

.pick-result p {
  margin: 0 0 var(--space-1);
}

.pick-failed {
  margin: 0;
  padding-left: var(--list-indent);
  color: var(--color-error);
}

/* ---------------------------------------------------------------- 明細の画面 */
.payslip-job .job-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.slip-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slip-row {
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-border);
}

/* 支給日が過ぎたのに明細がない月: 左の帯と文（色だけにしない） */
.slip-row--due {
  padding-left: var(--space-2);
  border-left: var(--border-width-heavy) solid var(--color-near);
}

.slip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
}

.slip-month {
  font-weight: var(--font-weight-bold);
}

.slip-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.slip-field .field-label {
  font-size: var(--font-size-s);
}

.slip-due {
  color: var(--color-near);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

/* T-0038 明細の画面（U7。layout.md の「### M 明細」）: 上の帯の文・勤務先の切り替え・案内の帯・12か月のマス（3列×4行）・印の意味 */
.topbar-note {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
}

.slip-jobs,
.slip-guide {
  margin-bottom: var(--space-2);
}

.slip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.slip-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2px;
  min-height: 84px;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-s);
  text-align: left;
  cursor: pointer;
}

/* 今月: 文字「今月」と太い枠 */
.slip-cell--current {
  border-color: var(--color-primary);
  border-width: var(--border-width-heavy);
}

/* 要入力（支給日が過ぎて明細がない月）: 文字「要入力」・印 ●・枠の3つ（色だけにしない） */
.slip-cell--due {
  border-color: var(--color-near);
  border-width: var(--border-width-heavy);
  border-style: dashed;
}

.slip-cell-month {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
  font-weight: var(--font-weight-bold);
}

.slip-cell-now {
  color: var(--color-primary);
}

.slip-cell-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--space-1);
}

.slip-cell-due {
  color: var(--color-near);
  font-weight: var(--font-weight-bold);
}

.slip-cell-amount {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.slip-legend {
  margin: 0;
}

/* M-s1（1か月の明細のシート） */
.slip-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.slip-sheet .slip-now,
.slip-sheet .slip-due {
  margin: 0;
}

.slip-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* 出どころの札: 文字（明細（確定）・予定・目安・なし）と色 */
.source-badge {
  display: inline-block;
  padding: var(--space-0) var(--space-2);
  background: var(--color-source-none-bg);
  color: var(--color-source-none);
  border: var(--border-width) solid var(--color-source-none);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.source--actual {
  background: var(--color-source-actual-bg);
  color: var(--color-source-actual);
  border: var(--border-width-strong) solid var(--color-source-actual);
}

.source--schedule {
  background: var(--color-source-schedule-bg);
  color: var(--color-source-schedule);
  border-color: var(--color-source-schedule);
}

.source--forecast {
  background: var(--color-source-forecast-bg);
  color: var(--color-source-forecast);
  border-color: var(--color-source-forecast);
  border-style: dashed;
}

/* ---------------------------------------------------------------- ホームのあと何時間・あと何時間の数え方（[?] のシート） */
.summary-hours {
  margin: var(--space-1) 0 0;
  font-weight: var(--font-weight-bold);
}

.hours-split {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-near-bg);
  border-left: var(--border-width-heavy) solid var(--color-near);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
}

/* ================================================================ T-0022 PWA（ホーム画面に追加の案内・新しい版の案内・説明の手順） */

/* 案内の箱（#install-guide・#update-banner）。T-0032 から .banner と同じく .overlay-stack の中で、上の帯の下に重ねて出す。
   閉じるボタンで消せる。出し分けは src/pwa.js（hidden の出し入れだけ） */
.pwa-note {
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-3) var(--page-padding);
  background: var(--color-info-bg);
  color: var(--color-text);
  border-bottom: var(--border-width-heavy) solid var(--color-info);
}

.pwa-note--update {
  background: var(--color-ok-bg);
  border-bottom-color: var(--color-ok);
}

.pwa-note-title {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-bold);
}

.pwa-note-text {
  margin: 0;
  font-size: var(--font-size-s);
}

.pwa-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* 「くわしく」はリンク（a）なので、ボタンと同じ形にそろえる */
.pwa-note-actions .button-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* 説明の画面: ホーム画面に追加する手順（番号つき） */
.steps-list {
  margin: var(--space-2) 0 var(--space-3);
  padding-left: var(--list-indent);
}

.steps-list li {
  margin-bottom: var(--space-2);
}

/* 説明の画面: 「データが消えることがあります」の一言（色だけでなく太字でも目立たせる） */
.install-warning {
  padding: var(--space-2) var(--space-3);
  background: var(--color-near-bg);
  border-left: var(--border-width-heavy) solid var(--color-near);
  border-radius: var(--radius-s);
}

/* ================================================================ T-0032 下から出るシート（共通の部品） */

/* シートを置く場所: 下のタブも含めた画面全体（シートは下のタブの上に重なる）。開いていないときは何も押さえない */
.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

/* 1枚のシート（data-sheet）: 後ろの暗い所＋下から出る板（role="dialog"・aria-modal="true"） */
.sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: auto;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop);
}

.sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface);
  border-radius: var(--radius) var(--radius) 0 0;
}

.sheet--small .sheet-panel {
  max-height: var(--sheet-small-max);
}

.sheet--large .sheet-panel {
  max-height: var(--sheet-large-max);
}

.sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-size);
  padding: var(--space-1) var(--page-padding);
  border-bottom: var(--border-width) solid var(--color-border);
}

.sheet-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-l);
  line-height: 1.3;
}

.sheet-title:focus {
  outline: none;
}

/* 閉じるボタンは必ず置く（下に引いて閉じるだけにしない） */
.sheet-close {
  flex: 0 0 auto;
  min-height: var(--tap-size);
  padding: 0 var(--space-3);
  background: transparent;
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  cursor: pointer;
}

/* シートの中身がはみ出したときだけ、この箱が縦に動く */
.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--page-padding) var(--space-4);
}

.sheet-body > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   T-0034 詳しく: 上の帯の [ 月ごと | 壁ごと | 説明 ] と、月ごとの表（D-1。3列×12行＋合計。1行 44px）
   --------------------------------------------------------------------------- */
.details-switch {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  overflow: hidden;
}

.details-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--topbar-tap-size) - var(--space-2));
  padding: 0 var(--space-1);
  background: var(--color-surface);
  color: var(--color-link);
  border: 0;
  font: inherit;
  font-size: var(--font-size-s);
  cursor: pointer;
}

.details-tab + .details-tab {
  border-left: var(--border-width) solid var(--color-border);
}

/* いま出している方: 色と太字（色だけに頼らない） */
.details-tab[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: var(--font-weight-bold);
}

.md-head,
.md-row {
  display: grid;
  grid-template-columns: 6.5em 1fr minmax(5em, auto) 1em;
  align-items: center;
  gap: var(--space-2);
}

.md-head {
  min-height: 24px;
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.md-head::after {
  content: "";
}

.md-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-row {
  width: 100%;
  min-height: var(--topbar-tap-size);
  padding: 0 var(--space-2);
  background: var(--color-surface);
  color: var(--color-text);
  border: 0;
  border-top: var(--border-width) solid var(--color-border);
  font: inherit;
  font-size: var(--font-size-s);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.md-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.md-source {
  overflow-wrap: anywhere;
}

/* 今月の行: 太字と背景（「（今月）」の文字もある） */
.md-row--current {
  background: var(--color-info-bg);
  font-weight: var(--font-weight-bold);
}

.md-row--total {
  border-top: var(--border-width-strong) solid var(--color-border);
  font-weight: var(--font-weight-bold);
}

.md-sheet-rows {
  margin: 0 0 var(--space-2);
}

.md-sheet-sub {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-size-s);
}

.md-sources {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-s);
}

.md-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
  min-height: 28px;
}

.md-source-amount {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.md-actions > .md-slip-link {
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------------
   T-0035 詳しく: 壁ごと（D-2）。区分の行・あと何時間の割り方の1行と [?]・壁の行（64px 目安: 名前・状態の文字・いちばん近い・あと何円・何時間・細い棒）
   --------------------------------------------------------------------------- */
.walls-hours {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
}

.walls-hours .help-button {
  margin-left: auto;
}

.walls-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.walls-row {
  border-top: var(--border-width) solid var(--color-border);
  border-left: var(--border-width-status) solid var(--status-color);
}

.walls-row-btn {
  display: block;
  width: 100%;
  min-height: var(--topbar-tap-size);
  padding: var(--space-1) var(--space-2) 0;
  background: var(--color-surface);
  color: var(--color-text);
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.walls-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.walls-row-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--font-weight-bold);
}

/* T-0035 attempt 2: 札（W-b など）・「いちばん近い」の印・状態の文字は折り返さない（縮むのは壁の名前だけ） */
.walls-row-head .wall-code,
.walls-row-head .badge-nearest,
.walls-row-head .badge,
.wall-sheet .badge-nearest {
  flex: none;
  white-space: nowrap;
}

.walls-row .badge-nearest,
.wall-sheet .badge-nearest {
  margin-top: 0;
}

.walls-row-line {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-s);
  font-variant-numeric: tabular-nums;
}

.walls-row .meter {
  margin: 0 var(--space-2) var(--space-1);
}

/* 状態の文字は行の頭にあるので、行の中の細い棒では出さない（読み上げは role="meter" の aria-valuetext） */
.walls-row .meter-status {
  display: none;
}

.wall-sheet .meter {
  margin: var(--space-2) 0;
}

/* T-0035 attempt 2: 壁のシートの次の段（くわしい数え方）。‹ 戻る と段の見出し */
.wall-stage-back {
  min-height: var(--topbar-tap-size);
  padding: 0 var(--space-2);
  background: transparent;
  color: var(--color-primary);
  border: 0;
  font: inherit;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.wall-stage-title {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-m);
}

/* ---------------------------------------------------------------- T-0036 U5 予定（I）・その日のシフト（I-s1）・シフトの入力（I-s3）
   workspace/T-0031/layout.md の「### I 予定」〜「### I-s3」。見た目は最小限（いまの変数だけ。D-024） */
/* 上の帯: ‹ 2026年10月 ›  [今日] [まとめて] */
#screen-schedule .topbar {
  gap: var(--space-1);
}

.cal-move {
  flex: 0 0 auto;
  min-width: var(--topbar-tap-size);
  min-height: var(--topbar-tap-size);
  padding: 0;
  background: transparent;
  color: var(--color-link);
  border: 0;
  font-size: var(--font-size-l);
  cursor: pointer;
}

.cal-move:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}

#screen-schedule .topbar .cal-title {
  flex: 0 0 auto;
}

.cal-topbar-gap {
  flex: 1 1 auto;
}

#screen-schedule .topbar .cal-today {
  flex: 0 0 auto;
}

/* 中身の箱: カレンダーの上下のすき間を詰める（1画面に収める） */
.cal-body-box .cal {
  margin-bottom: var(--space-1);
}

/* 案内の帯（1行。押すと設定のその欄へ） */
.cal-guide {
  margin: var(--space-2) 0 0;
}

.cal-guide-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-size);
  padding: 0 var(--space-3);
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  color: var(--color-text);
  font-size: var(--font-size-s);
  text-decoration: none;
}

.cal-guide-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-body-box .pick-note {
  margin: var(--space-2) 0 0;
}

/* T-0037 U6 まとめて入れる: 選んでいるあいだの上の帯（[やめる] [入れる n]）と案内の帯の場所の1行 */
.cal-body-box .pick-note {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-s);
}

#screen-schedule .topbar #pick-open {
  border: var(--border-width-heavy) solid var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* T-0037 I-s2 まとめて入れる（シート・大）: 選んだ日（2行まで）・前に入れたシフトの1列・欄（I-s3 と同じ形） */
.pick-days {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
}

.pick-sets-box {
  margin: 0 0 var(--space-2);
}

.pick-sets-box .sub-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-s);
}

#sheet-pick .pick-result {
  margin-top: 0;
}

/*
 * T-0037 attempt 2: I-s2 の高さの余裕（375×812 で中身の箱 674px に収める）。
 * - 文の行の高さを詰める（選んだ日・見出し・勤務先の案内・誤りの文。--line-height-chip）
 * - すき間を詰める（欄の下・見込み・ボタンの行）
 * - 勤務先の案内は2行まで
 * - 誤りの文は保存ボタンの上の1か所（#pk-errs）。見せるのは最初の誤りだけで2行まで。ほかの誤りの欄は赤い枠
 */
#sheet-pick .pick-days,
#sheet-pick .pick-sets-box .sub-title {
  line-height: var(--line-height-chip);
}

#sheet-pick .shift-form--sheet .field {
  margin-bottom: var(--space-1);
}

#sheet-pick .shift-preview {
  margin: var(--space-1) 0;
  padding: var(--space-1) var(--space-3);
}

#sheet-pick .button-row {
  margin: var(--space-2) 0 0;
}

#sheet-pick .hint:not(:empty),
#sheet-pick .pick-errs .field-error:not(.visually-hidden) {
  display: -webkit-box;
  overflow: hidden;
  line-height: var(--line-height-chip);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

#sheet-pick .pick-errs .field-error:not(.visually-hidden) {
  margin: 0 0 var(--space-1);
}

#sheet-pick .job-choices[aria-invalid="true"] {
  outline: var(--border-width-strong) solid var(--color-error);
  outline-offset: var(--space-0);
  border-radius: var(--radius-s);
}

/* カレンダーの下の2行（勤務先の印と [?]・この月と [?]） */
.cal-foot-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--topbar-tap-size);
}

.cal-foot-line .cal-legend,
.cal-foot-line .cal-summary {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.cal-foot-line .help-button {
  min-width: var(--tap-size);
  min-height: var(--tap-size);
}

/* I-s1: 前に入れたシフトの横に動く1列（ボタンの下に見込み） */
.day-sets {
  margin: var(--space-2) 0 0;
}

.day-sets-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-s);
}

.day-sets-hint {
  font-weight: normal;
}

.set-list--row {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  overflow-x: auto;
}

.set-list--row .set-item {
  flex: 0 0 auto;
  max-width: 14em;
  padding: 0 0 var(--space-1);
}

.set-list--row .set-note {
  font-size: var(--font-size-xs);
}

.day-status {
  margin: var(--space-1) 0;
}

.day-add {
  width: 100%;
  margin-top: var(--space-2);
}

/* I-s3: 勤務先のボタン（3件まで1列）。選んだ勤務先は太い枠・太字・「✓」（色だけにしない） */
.job-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
}

.job-choice {
  min-height: var(--tap-size);
  padding: 0 var(--space-1);
  overflow: hidden;
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  font-size: var(--font-size-s);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.job-choice[aria-pressed="true"] {
  border: var(--border-width-heavy) solid var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.job-choice[aria-pressed="true"]::before {
  content: "✓";
}

.shift-form--sheet {
  margin: 0;
  padding: 0;
  border: 0;
}

.shift-form--sheet .field {
  margin-bottom: var(--space-2);
}

/* ===========================================================================
   T-0039 設定の一覧と中の画面（U8。layout.md の S・S-1〜S-6）
   一覧の行（.settings-row）は › で中の画面へ。行の2行目（.settings-row-sub）は要約。
   =========================================================================== */
.settings-list {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  line-height: 1.4;
  text-decoration: none;
}

.settings-row--small {
  min-height: var(--topbar-tap-size);
}

.settings-row--warn {
  border-color: var(--color-near);
}

.settings-row-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.settings-row-label {
  font-weight: var(--font-weight-bold);
}

.settings-row-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.settings-row-sub:empty {
  display: none;
}

.settings-row--warn .settings-row-sub {
  color: var(--color-near);
}

.settings-row-arrow {
  flex: 0 0 auto;
  color: var(--color-link);
  font-size: var(--font-size-l);
}

.settings-note {
  margin: 0 0 var(--space-1);
}

/* 欄の名前の行の右に [?]（押すと説明のシート） */
.field--help {
  position: relative;
}

.field--help > .field-label {
  display: flex;
  align-items: center;
  min-height: var(--topbar-tap-size);
  padding-right: calc(var(--topbar-tap-size) + var(--space-2));
}

.field--help > .field-help {
  position: absolute;
  top: 0;
  right: 0;
}

/* T-0042: fieldset の legend は枠の線の上に半分はみ出して置かれるため、[?]（top: 0）が legend の行の真ん中から下へずれて、
   次の行（曜日のボタン・「残業の割増を使う」など）に重なっていた。legend を float にすると普通の箱として置かれ、
   fieldset の上の端 = legend の行の上の端になるので、[?] は見出しの行の右に収まる。次の行からは legend の下に置く（clear） */
.field--help > legend.field-label {
  float: left;
  width: 100%;
}

.field--help > legend.field-label ~ :not(.field-help) {
  clear: both;
}

#rt-open {
  margin-top: var(--space-2);
}
/* ===========================================================================
   T-0040 勤務先（1件）の3つの区切り（U9。layout.md の「### S-4 勤務先（1件）: 3つの区切り」）
   上の区切り [ 基本 | 時給 | 休日と残業 ]（.job-tabs。いまの区切りは aria-pressed="true"）、区切りの中身（.job-panel）、
   時給の期間の行（.wage-row）、休日の曜日の7つのボタン（.day-toggle。中はチェックボックス）、残業の「いまの設定」の1行（.ot-now）
   =========================================================================== */
.job-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
}

.job-tab {
  min-height: var(--topbar-tap-size);
  padding: 0 var(--space-1);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
  font: inherit;
  cursor: pointer;
}

.job-tab[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.job .job-panel > * + * {
  margin-top: var(--space-2);
}

.job .payrule .payday-row {
  margin-top: var(--space-1);
}

.wage-row {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wage-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.job-fold-summary {
  display: flex;
  align-items: center;
  min-height: var(--topbar-tap-size);
  color: var(--color-link);
  cursor: pointer;
}

/* T-0042: 曜日の7つは1行（7列の格子。幅 375px で中身の幅 343px → 1つ (343 − 4×6) ÷ 7 ≈ 45.6px。高さは 44px のまま） */
.day-toggles {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: var(--space-1) 0;
}

.day-toggle {
  position: relative;
  display: flex;
  min-width: 0;
}

.day-toggle-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.day-toggle-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--topbar-tap-size);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-s);
}

.day-toggle-input:checked + .day-toggle-face {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.day-toggle-input:focus-visible + .day-toggle-face {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.ot-now {
  margin: var(--space-1) 0 0;
  color: var(--color-text);
}

.job-notice-more {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#jobs-not-counted {
  margin-top: var(--space-2);
}

/* ===========================================================================
   T-0042 U11 はみ出しと重なり（layout.md の「### 高さのまとめ」。秘書がブラウザで測った表は .secretary/tasks/T-0042.md）
   押す所の高さは 44px より小さくしない（--tap-size・--topbar-tap-size は 44px が下限）
   =========================================================================== */

/* 勤務先（1件）: カードの枠と内側の余白をなくす（中身の幅 309px → 343px。曜日の7つが1行に入る。縦も 34px 低くなる）。
   押す所は 44px（このカードの中だけ。--tap-size 48px → 44px） */
.card.job {
  --tap-size: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.job .job-tabs {
  margin-bottom: var(--space-2);
}

.job .field-label {
  font-size: var(--font-size-s);
  line-height: 1.4;
}

.job .job-panel > .field {
  margin-bottom: 0;
}

.job .payrule {
  padding: var(--space-2) var(--space-3);
}

.job .payrule > .field {
  margin-bottom: var(--space-1);
}

.job .payrule-note {
  margin-top: var(--space-2);
  line-height: 1.4;
}

.job .overtime > .field {
  margin-bottom: var(--space-2);
}

.job .hint {
  line-height: 1.4;
}

/* 目安の月額の折りたたみ: 見出しの行の右に [?]（説明の文は #sheet-forecast-help へ移した） */
.job-fold-wrap {
  position: relative;
}

.job-fold-wrap > .field-help {
  position: absolute;
  top: 0;
  right: 0;
}

.job-fold-wrap .job-fold-summary {
  padding-right: calc(var(--topbar-tap-size) + var(--space-2));
  font-size: var(--font-size-s);
  line-height: 1.4;
}

/* 明細の入れ方の [?] のシート: 文が長いので、シート（大）と同じ高さまで使う（375×812 で中身の箱 431px → 約 674px） */
#sheet-payslip-help .sheet-panel {
  max-height: var(--sheet-large-max);
}

#sheet-payslip-help .sheet-body p {
  line-height: 1.5;
}

/* ---- 小さい画面（375×667 など。高さ 700px 以下）だけの詰め方。375×812 の見た目は変えない ---- */
@media (max-height: 700px) {
  :root {
    --tap-size: 44px;          /* 48px → 44px（下限） */
    --tabbar-height: 50px;     /* 60px → 50px（タブは 44px ＋上の帯 3px） */
    --line-height: 1.5;        /* 1.65 → 1.5 */
    --space-4: 12px;           /* 16px → 12px（欄の間・カードの余白など） */
    --space-5: 16px;           /* 24px → 16px */
    --page-padding: 16px;      /* 横の余白は変えない */
    --sheet-small-max: 88%;    /* 60% → 88%（中身が少ないシートは低いまま） */
    --sheet-large-max: 96%;    /* 90% → 96% */
  }

  .screen-body {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .sheet-head {
    padding-top: 0;
    padding-bottom: 0;
  }

  .sheet-body {
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
  }

  /* ホーム: すき間 8px → 4px、カードの内側の余白、年の表の行の高さ */
  .home-body > * + *,
  .home-body .entry-row {
    margin-top: var(--space-1);
  }

  .home-main {
    padding: var(--space-2) var(--space-3);
  }

  .home-card {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }

  .home-year {
    line-height: 1.4;
  }

  /* 詳しく・月ごと: 列の名前の行 */
  .md-head {
    min-height: 20px;
  }

  /* 詳しく・壁ごと: 行の文の行の高さ・行の上下の余白（行のボタンは 44px のまま） */
  .walls-hours,
  .walls-row-btn,
  .walls-row .meter {
    line-height: 1.25;
  }

  .walls-row-btn {
    padding-top: var(--space-0);
  }

  .walls-row .meter {
    margin-bottom: var(--space-0);
  }

  /* 設定の中の画面: 欄の名前・補足の文の行の高さ */
  .field-label,
  .hint,
  .rt-current {
    line-height: 1.4;
  }
}