/*
  共通デザインの部品（Day 9）
  - 基準は CLAUDE.md「シニアにも使いやすい画面の基準」（Day 8）
  - 色・大きさは下の「色の名前」「大きさの名前」だけを使い、部品に直接書かない
    （あとで暗い画面を足すときは、:root[data-theme="dark"] に色の名前を足すだけにする）
  - 外部のフォントや部品は使わない（端末に入っている文字を使う）
*/

/* ---------- 色の名前 ---------- */
:root {
  --c-bg: #FBF7F0;          /* 画面の地（生成り色） */
  --c-surface: #FFFFFF;     /* カード・入力欄の地 */
  --c-text: #22324A;        /* 文字（紺）            地との差 12：1 */
  --c-sub: #4A5568;         /* 補足の文字           地との差 7：1 */
  --c-primary: #1A5F59;     /* ボタン・枠（濃い緑）   白い文字との差 7.4：1 */
  --c-on-primary: #FFFFFF;
  --c-brand: #2E8B83;       /* 飾りの緑。文字やボタンの地には使わない */
  --c-line: #D9D2C5;        /* 区切り線・枠 */
  --c-soft: #E6F2F0;        /* お知らせの地（うすい緑） */
  --c-danger: #8A1C1C;      /* 消す・エラー（赤）     白い文字との差 9.3：1 */
  --c-danger-soft: #FBEAEA;
  --c-warn-soft: #FFF4DC;
  --c-warn-line: #C98A00;
  --c-focus: #C98A00;       /* 選んでいる場所の目印（黄土色の太い枠） */
}

/* ---------- 大きさの名前 ---------- */
:root {
  --fs: 20px;               /* 本文 */
  --fs-small: 16px;         /* 補足（これより小さくしない） */
  --fs-title: 26px;         /* 画面の見出し */
  --fs-app: 22px;           /* 一番上の帯のアプリ名 */
  --lh: 1.7;                /* 行の間隔 */
  --tap: 48px;              /* 押せるものの最小の大きさ */
  --gap: 8px;               /* 押せるもの同士の最小のすき間 */
  --space: 16px;
  --radius: 10px;
  --width: 640px;           /* パソコンで広がりすぎないよう、中身の幅の上限 */
}
/* 「文字を大きく」 */
:root[data-text="large"] {
  --fs: 24px;
  --fs-small: 19px;
  --fs-title: 30px;
  --fs-app: 26px;
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  font-size: var(--fs);
  line-height: var(--lh);
}
h1, h2, h3, p, ul, ol { margin: 0; }
:focus-visible { outline: 4px solid var(--c-focus); outline-offset: 2px; }

/* ---------- 画面の枠 ---------- */
.h-app { min-height: 100vh; display: flex; flex-direction: column; }
.h-header {
  background: var(--c-primary);
  color: var(--c-on-primary);
}
.h-header-in {
  max-width: var(--width); margin: 0 auto; padding: 10px var(--space);
  display: flex; align-items: center; gap: var(--gap); min-height: 64px;
}
.h-header .h-appname { font-size: var(--fs-app); font-weight: 800; flex: 1; margin: 0; }
/* 「メニューに戻る」があるとき：1段目にボタン2つ、2段目にアプリ名（スマホの幅でアプリ名が折れないように） */
.h-header-in:has(.h-back) { flex-wrap: wrap; row-gap: 4px; }
.h-header-in:has(.h-back) .h-appname { order: 3; flex-basis: 100%; }
.h-header .h-back { order: 1; }
.h-header-in:has(.h-back) [data-honu="text-size"] { order: 2; margin-left: auto; }
.h-main { flex: 1; width: 100%; max-width: var(--width); margin: 0 auto; padding: var(--space); }
.h-footer { max-width: var(--width); margin: 0 auto; padding: var(--space); font-size: var(--fs-small); color: var(--c-sub); }
.h-title { font-size: var(--fs-title); font-weight: 800; margin: 8px 0 4px; line-height: 1.4; }
.h-lead { color: var(--c-sub); margin-bottom: var(--space); }
.h-section { margin-top: calc(var(--space) * 2); }
.h-section > h2 { font-size: calc(var(--fs) * 1.1); font-weight: 800; margin-bottom: 8px; }

/* カード（ひとまとまりの枠） */
.h-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: var(--space); margin-bottom: var(--space);
}

/* ---------- ボタン ---------- */
.h-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap); padding: 8px 16px;
  font: inherit; font-weight: 800; line-height: 1.3; text-align: center; text-decoration: none;
  border-radius: var(--radius); border: 2px solid var(--c-primary);
  background: var(--c-primary); color: var(--c-on-primary); cursor: pointer;
}
.h-btn + .h-btn { margin-top: 12px; }
.h-btn.is-second { background: var(--c-surface); color: var(--c-primary); }
.h-btn.is-danger { background: var(--c-danger); border-color: var(--c-danger); color: #FFFFFF; }
/* めったに使わない削除の入り口（全部削除する など）：白地に赤い枠と文字。塗りつぶしの赤は、最後の確認の画面だけで使う */
.h-btn.is-danger-quiet { background: var(--c-surface); border-color: var(--c-danger); color: var(--c-danger); }
.h-btn.is-small { width: auto; display: inline-flex; font-size: var(--fs-small); }
.h-btn:disabled { background: var(--c-line); border-color: var(--c-line); color: var(--c-sub); cursor: not-allowed; }
/* 帯の中のボタン（文字を大きく など） */
.h-header .h-btn { width: auto; background: transparent; border-color: var(--c-on-primary); color: var(--c-on-primary); font-size: var(--fs-small); }
/* 横に並べるとき（パソコンや、短いボタン2つ） */
.h-row { display: flex; flex-wrap: wrap; gap: 12px; }
.h-row > .h-btn { flex: 1 1 160px; margin: 0; }

/* ---------- 入力 ---------- */
.h-field { margin-bottom: calc(var(--space) * 1.25); }
.h-label { display: block; font-weight: 800; margin-bottom: 4px; }
.h-need { font-size: var(--fs-small); font-weight: 700; color: var(--c-danger); margin-left: 6px; }
.h-help { display: block; font-size: var(--fs-small); color: var(--c-sub); margin-bottom: 6px; }
.h-input, .h-select, .h-textarea {
  width: 100%; min-height: var(--tap); padding: 8px 12px;
  font: inherit; color: var(--c-text); background: var(--c-surface);
  border: 2px solid var(--c-sub); border-radius: var(--radius);
}
.h-textarea { min-height: calc(var(--tap) * 2.5); resize: vertical; }
.h-field.is-error .h-input, .h-field.is-error .h-select, .h-field.is-error .h-textarea { border-color: var(--c-danger); border-width: 3px; }
.h-error { display: block; margin-top: 6px; font-size: var(--fs-small); font-weight: 700; color: var(--c-danger); }
.h-error::before { content: "！ "; }

/* チェック・選択（押せる範囲を行全体にする） */
.h-choice {
  display: flex; align-items: center; gap: 12px; min-height: var(--tap);
  padding: 8px 12px; border: 2px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-surface); cursor: pointer;
}
.h-choice + .h-choice { margin-top: var(--gap); }
.h-choice input { width: 28px; height: 28px; margin: 0; flex: none; accent-color: var(--c-primary); }
.h-choice:has(input:checked) { border-color: var(--c-primary); }

/* ---------- 一覧 ---------- */
.h-list { list-style: none; padding: 0; margin: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); }
.h-list > li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px var(--space); border-bottom: 1px solid var(--c-line); }
.h-list > li:last-child { border-bottom: 0; }
.h-list .h-grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.h-list .h-meta { display: block; font-size: var(--fs-small); color: var(--c-sub); }
.h-empty { padding: var(--space); color: var(--c-sub); text-align: center; }

/* ---------- 知らせる枠（色だけでなく、印や先頭の言葉でも伝える） ----------
  .h-note           説明（見出しなし。ⓘ の印だけ。読むだけでよいもの）
  .h-note.is-done   完了（先頭に <strong>完了</strong>）
  .h-note.is-warn   注意（先頭に <strong>注意</strong>）
  .h-note.is-error  エラー（先頭に <strong>エラー</strong>）
  .h-note.is-guide  参考（先頭に <strong>参考</strong>。終活・お金・相続・税・法律・医療のアプリで、専門家への相談を促す）
*/
.h-note { display: flex; gap: 8px; border-left: 6px solid var(--c-primary); background: var(--c-soft); padding: 12px var(--space); border-radius: 6px; margin-bottom: var(--space); }
.h-note:not(.is-done):not(.is-warn):not(.is-error):not(.is-guide)::before { content: "ⓘ"; color: var(--c-primary); font-weight: 800; flex: none; }
.h-note.is-warn { border-color: var(--c-warn-line); background: var(--c-warn-soft); }
.h-note.is-error { border-color: var(--c-danger); background: var(--c-danger-soft); }
.h-note.is-guide { border-color: var(--c-text); background: var(--c-surface); border-top: 1px solid var(--c-line); border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.h-note > strong:first-child { flex: none; }
.h-note.is-done > strong:first-child { color: var(--c-primary); }
.h-note.is-error > strong:first-child { color: var(--c-danger); }

/* ---------- 確認の画面 ---------- */
.h-dialog { border: 0; border-radius: var(--radius); padding: calc(var(--space) * 1.5); width: min(92vw, 480px); color: var(--c-text); background: var(--c-surface); font-size: var(--fs); }
.h-dialog::backdrop { background: rgba(34, 50, 74, .55); }
.h-dialog p { margin-bottom: var(--space); white-space: pre-line; max-height: 50vh; overflow-y: auto; }

/* ---------- 元に戻す（時間で消さない。閉じるまで出しておく） ---------- */
.h-undo {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(92vw, calc(var(--width) - 32px));
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--c-text); color: #FFFFFF; padding: 12px var(--space); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.h-undo[hidden] { display: none; }
.h-undo .h-grow { flex: 1 1 160px; }
.h-undo .h-btn { width: auto; background: #FFFFFF; color: var(--c-text); border-color: #FFFFFF; margin: 0; }
.h-undo .h-btn.is-second { background: transparent; color: #FFFFFF; }
/* 元に戻すが出ているあいだ、下のボタンが隠れないように */
body.has-undo .h-main { padding-bottom: 160px; }

/* 画面に見せず、読み上げだけに使う文字 */
.h-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }