@charset "utf-8";

/* ==========================================================================
   ねこぜリセット - style.css

   【このファイルの読み方（初心者向け）】
   ・CSS は「どの部品を（セレクタ）」「どう見せるか（プロパティ）」を書くファイルです。
   ・--xxxx という名前の値は「CSS変数」です。色などをここで一括管理しています。
     色を変えたい時は、下の「1. 色の設定」の値だけを変えればOKです。
   ・目次
       0. フォント（自分のPCに置いた丸文字フォントを読み込む）
       1. 色の設定（ライト／ダーク）
       2. 全体の基本設定
       3. ヘッダー
       4. 初回案内・使い方（折りたたみ）
       5. 現在の姿勢（状態・角度・猫・メーター）
       6. ボタン
       7. 今日のふりかえり
       8. お知らせ・エラー表示
       9. 設定画面（ダイアログ）
      10. フッター
      11. 画面が広い時の調整
      12. 動きを減らしたい人への配慮
      13. ポケットモード（【追加4】のロック画面）

   【今回の追加】「【追加」と探すと、変更・追加した場所が見つかります。
     【追加1】角度の横並び（5. 現在の姿勢 の .angle-〇〇）
     【追加2】設定画面の「音をためす」ボタンの余白（9. 設定画面）
     【追加3】おすすめの使い方・ご注意の枠（4. 初回案内 の .tips-note / .caution-note）
     【追加4】ポケットモード（6. ボタン の .pocket-button、13. のロック画面）
     【追加5】猫の画像の切り替え（5. 現在の姿勢 の .cat-image）
   ========================================================================== */


/* ==========================================================================
   0. フォント（丸文字：Zen Maru Gothic）

   【自分のパソコンに置いて使う手順】
   1) https://fonts.google.com/specimen/Zen+Maru+Gothic を開く
   2) 右上の「Get font」→「Download all」で ZIP をダウンロードして展開する
   3) 展開したフォルダ内の下の3ファイルを、assets/fonts/ フォルダに入れる
        ZenMaruGothic-Regular.ttf  （ふつうの太さ）
        ZenMaruGothic-Medium.ttf   （やや太め）
        ZenMaruGothic-Bold.ttf     （太字）
   ※ 詳しくは assets/fonts/README.txt にも書いています。
   ※ このフォントは SIL Open Font License で、自分のアプリに含めて使えます。

   ファイルが無い間は、下の font-family の「代わりのフォント」（iPhone の
   ヒラギノ丸ゴなど）が自動で使われるので、画面が壊れることはありません。
   ========================================================================== */
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* フォント読み込み中も文字を先に表示する */
  src: local("Zen Maru Gothic Regular"), local("ZenMaruGothic-Regular"),
       url("assets/fonts/ZenMaruGothic-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Zen Maru Gothic Medium"), local("ZenMaruGothic-Medium"),
       url("assets/fonts/ZenMaruGothic-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Zen Maru Gothic Bold"), local("ZenMaruGothic-Bold"),
       url("assets/fonts/ZenMaruGothic-Bold.ttf") format("truetype");
}


/* ==========================================================================
   1. 色の設定

   まず「ライト」の色を :root に書きます。
   ダークモードは2か所に同じ色を書いています。
     ・端末の設定がダークで、設定画面で「ライト」を選んでいない時（自動）
     ・設定画面で「ダーク」を選んだ時（JavaScriptが data-theme="dark" を付ける）
   ========================================================================== */
:root {
  /* --- 全体の色 --- */
  --bg: #fff9f1;              /* 画面の背景（やさしいクリーム色） */
  --bg-tint: #eaf7ee;         /* 背景グラデーションのもう一色（淡いミント） */
  --surface: #ffffff;         /* カードの背景 */
  --surface-soft: #fdf1e7;    /* 少しだけ色付きのカード背景（淡いピーチ） */
  --text: #5a4335;            /* ふつうの文字（ロゴの線に合わせたココア色） */
  --text-soft: #7a6455;       /* 補足の文字 */
  --line: #ecdccb;            /* 枠線 */
  --shadow: rgba(140, 100, 70, 0.16);
  --focus: #e58aa1;           /* キーボード操作時の枠（ピンク） */

  /* --- ボタンの色（淡い色合いで統一） --- */
  --primary-bg: #c4ebd6;      /* メインボタン：淡いミント */
  --primary-border: #8fd0b0;
  --primary-text: #23503c;
  --stop-bg: #ffd5de;         /* 停止ボタン：淡いピンク */
  --stop-border: #f2a6b6;
  --stop-text: #7d2c40;
  --soft-bg: #fff4dc;         /* サブボタン：淡いクリームイエロー */
  --soft-border: #f0d9a4;
  --soft-text: #6b4f1d;

  /* --- 姿勢の状態ごとの色（初期＝待機中） --- */
  --state-bg: #f1ebe4;
  --state-border: #cdbfb2;
  --state-text: #6a5748;

  /* --- 猫の背景の丸 --- */
  --stage-bg: radial-gradient(circle at 50% 40%, #ffffff 0%, #f3fbf5 60%, #e3f5e8 100%);

  /* --- サイズの目安 --- */
  --radius-card: 1.75rem;     /* カードの角の丸み */
  --tap-size: 3.5rem;         /* 押しやすいボタンの高さ（約56px） */
}

/* 端末がダークモードの時（設定画面で「ライト」を選んでいなければ自動で適用） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2b2521;
    --bg-tint: #26332d;
    --surface: #3a322c;
    --surface-soft: #453b34;
    --text: #f5ebe1;
    --text-soft: #d5c6b8;
    --line: #5b4d43;
    --shadow: rgba(0, 0, 0, 0.35);
    --focus: #ffd98a;

    --primary-bg: #86d4b0;
    --primary-border: #a8e6c8;
    --primary-text: #173a2c;
    --stop-bg: #f2aab8;
    --stop-border: #f7c4ce;
    --stop-text: #4a1826;
    --soft-bg: #5a4d33;
    --soft-border: #7c6a45;
    --soft-text: #ffeec6;

    --state-bg: #453b34;
    --state-border: #7a6b5f;
    --state-text: #eadfd4;

    --stage-bg: radial-gradient(circle at 50% 40%, #fffdf8 0%, #f0f8f2 60%, #d9eede 100%);
  }
}

/* 設定画面で「ダーク」を選んだ時（上と同じ色） */
:root[data-theme="dark"] {
  --bg: #2b2521;
  --bg-tint: #26332d;
  --surface: #3a322c;
  --surface-soft: #453b34;
  --text: #f5ebe1;
  --text-soft: #d5c6b8;
  --line: #5b4d43;
  --shadow: rgba(0, 0, 0, 0.35);
  --focus: #ffd98a;

  --primary-bg: #86d4b0;
  --primary-border: #a8e6c8;
  --primary-text: #173a2c;
  --stop-bg: #f2aab8;
  --stop-border: #f7c4ce;
  --stop-text: #4a1826;
  --soft-bg: #5a4d33;
  --soft-border: #7c6a45;
  --soft-text: #ffeec6;

  --state-bg: #453b34;
  --state-border: #7a6b5f;
  --state-text: #eadfd4;

  --stage-bg: radial-gradient(circle at 50% 40%, #fffdf8 0%, #f0f8f2 60%, #d9eede 100%);
}

/*
  姿勢の状態ごとの色
  HTML の <section id="posture-section" data-posture="..."> の値に合わせて、
  上の --state-〇〇 を上書きします。JavaScriptで data-posture を変えるだけで色が変わります。
  （色だけに頼らないよう、絵文字・文章・猫・メーターも一緒に変わります）
*/
[data-posture="good"] { --state-bg: #dff5e8; --state-border: #79c9a0; --state-text: #245a43; }
[data-posture="warn"] { --state-bg: #fff2c9; --state-border: #eec04f; --state-text: #6b4d05; }
[data-posture="bad"]  { --state-bg: #ffe1dc; --state-border: #f09486; --state-text: #8a2f22; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-posture="good"] { --state-bg: #2f4a3d; --state-border: #7fd0a8; --state-text: #dff6e9; }
  :root:not([data-theme="light"]) [data-posture="warn"] { --state-bg: #52441f; --state-border: #e8c25a; --state-text: #fff1c9; }
  :root:not([data-theme="light"]) [data-posture="bad"]  { --state-bg: #58322f; --state-border: #f19a8d; --state-text: #ffe0db; }
}
:root[data-theme="dark"] [data-posture="good"] { --state-bg: #2f4a3d; --state-border: #7fd0a8; --state-text: #dff6e9; }
:root[data-theme="dark"] [data-posture="warn"] { --state-bg: #52441f; --state-border: #e8c25a; --state-text: #fff1c9; }
:root[data-theme="dark"] [data-posture="bad"]  { --state-bg: #58322f; --state-border: #f19a8d; --state-text: #ffe0db; }


/* ==========================================================================
   2. 全体の基本設定
   ========================================================================== */

/* 幅や余白の計算を分かりやすくする（padding を含めて幅を決める） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* スマホで文字が勝手に大きくなるのを防ぐ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* スマホのアドレスバーを考慮した高さ */
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, var(--bg-tint) 100%);
  background-attachment: fixed;

  /* 丸文字フォント。最初に自分で置いた Zen Maru Gothic、無ければ端末の丸ゴシックを使う */
  font-family: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN",
               "Hiragino Maru Gothic Pro", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 1rem;       /* 16px */
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02em;

  /* ノッチ（切り欠き）のあるスマホでも、内容が隠れないように余白を確保 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 画像が画面からはみ出さないように */
img {
  max-width: 100%;
  height: auto;
}

/*
  hidden 属性の部品を確実に隠す。
  （他のCSSで display を指定すると hidden が効かなくなることがあるための保険）
*/
[hidden] {
  display: none !important;
}

/* 見た目では隠すが、読み上げソフトには伝える（見出しなど用） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* キーボードで操作した時の目印（枠）。分かりやすい太さにしています */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* 見出しの余白をそろえる */
h1, h2, h3, p {
  margin: 0;
}
h2 {
  font-size: 1.25rem;
  line-height: 1.5;
}
h3 {
  font-size: 1rem;
  line-height: 1.5;
}

/* 表示の中身を幅 480px までに収めて中央に置く（スマホ最優先、PCでも見やすく） */
.app-header,
.app-main,
.app-footer {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding-inline: 1rem;
}


/* ==========================================================================
   3. ヘッダー（ロゴ・アプリ名・設定ボタン）
   ========================================================================== */
.app-header {
  display: grid;
  grid-template-columns: auto 1fr auto; /* ロゴ | タイトル | 設定ボタン */
  align-items: center;
  gap: 0.75rem;
  padding-block: 1rem 0.5rem;
}

.app-logo {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px var(--shadow));
}

.app-title {
  font-size: clamp(1.3rem, 6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.app-tagline {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-soft);
}


/* ==========================================================================
   4. 初回案内・使い方（折りたたみ）
   ========================================================================== */
.app-main {
  display: grid;      /* 縦に並べて、すき間をそろえる */
  gap: 1rem;
  padding-block: 0.5rem 2rem;
}

.intro-section {
  padding: 1.25rem 1.25rem 1rem;
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 6px 16px var(--shadow);
}

.intro-lead {
  margin-top: 0.5rem;
  color: var(--text-soft);
}

/* --- 使い方（details / summary） --- */
.how-to {
  margin-top: 1rem;
  text-align: left;
}

/* summary＝クリックする見出し部分。ボタンのように押しやすい丸い形にする */
.how-to > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 1.25rem;
  font-weight: 700;
  color: var(--soft-text);
  background: var(--soft-bg);
  border: 2px solid var(--soft-border);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;               /* 標準の三角マークを消す（Firefox/Chrome） */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.how-to > summary::-webkit-details-marker {
  display: none;                  /* 標準の三角マークを消す（Safari） */
}

/* 自作のマーク：閉じている時は「＋」、開いている時は「−」 */
.how-to > summary::before {
  content: "＋";
  font-size: 1.125rem;
}
.how-to[open] > summary::before {
  content: "−";
}
/* 開いている時は文字も「閉じる」に見えるように、少しだけ色を変える */
.how-to[open] > summary {
  background: var(--surface-soft);
}

/* 【改善2】初回案内の中に移した「姿勢チェックを始める」ボタン。説明との間に余白を取る */
.start-button {
  margin-top: 1.25rem;
}

.how-to-steps {
  margin: 1rem 0 0;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
}
.how-to-steps li {
  padding-left: 0.25rem;
  margin-bottom: 0.25rem;
}
.how-to-steps li::marker {
  font-weight: 700;
  color: var(--state-border);
}

.permission-note {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  background: var(--surface-soft);
  border-radius: 1.25rem;
}

/* 【追加3・4】おすすめの使い方（ミント色の枠）／ご注意（ピンク色の枠） */
.tips-note,
.caution-note {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  border-radius: 1.25rem;
}
.tips-note {
  color: var(--primary-text);
  background: var(--primary-bg);
  border: 2px solid var(--primary-border);
}
.caution-note {
  color: var(--stop-text);
  background: var(--stop-bg);
  border: 2px solid var(--stop-border);
}
.caution-note ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}
.caution-note li {
  margin-bottom: 0.25rem;
}

.privacy-note {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-soft);
}


/* ==========================================================================
   5. 現在の姿勢（一番目立たせるエリア）
   ========================================================================== */
.posture-section {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1rem 1.5rem;
  background: var(--surface);
  border: 3px solid var(--state-border);       /* 状態で枠の色が変わる */
  border-radius: var(--radius-card);
  box-shadow: 0 8px 20px var(--shadow);
  transition: border-color 0.4s ease;
}

/* --- 姿勢の状態（大きな表示） --- */
.posture-status {
  padding: 1rem 0.75rem;
  text-align: center;
  color: var(--state-text);
  background: var(--state-bg);
  border-radius: 1.5rem;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.posture-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 状態アイコン（表情の線画）。4つ重ねて置き、今の状態のものだけ表示する */
.posture-icon {
  display: grid;
  flex: none;
  width: clamp(2.5rem, 12vw, 3rem);
  height: clamp(2.5rem, 12vw, 3rem);
}

.face {
  grid-area: 1 / 1;              /* 4つを同じ場所に重ねる */
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;          /* 色は状態の文字色に合わせる */
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: none;
}
.face .dot {
  fill: currentColor;
  stroke: none;
}

/* 状態(data-posture)に合う顔だけを表示する */
[data-posture="idle"] .face-idle,
[data-posture="good"] .face-good,
[data-posture="warn"] .face-warn,
[data-posture="bad"]  .face-bad {
  display: block;
}

.posture-text {
  font-size: clamp(1.5rem, 7vw, 2rem);
}

.posture-message {
  margin-top: 0.375rem;
  font-size: 1.0625rem;
  font-weight: 500;
}

/* --- 角度の表示 --- */
/*
  【改善1】角度の表示エリア
  ・表示は「現在 ○°」と「姿勢の傾き：15°以内くらい」の2つ。
  ・右上に「？」ボタン（.help-button）を重ねて置きます。
  ・2つの表示は縦に並べます。「？」ボタンは1段目の右側に置くので、重なりません。
*/
.angle-panel {
  position: relative;
  display: grid;
  /* 【追加1】左：角度の2つ（横並び）／右：「？」ボタン。説明（.angle-help）は下の段いっぱいに出す */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

.angle-display {
  /* 【追加1】「現在」と「基準の角度」を、同じ幅で横に並べる（以前は縦並びでした） */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  font-weight: 700;
}

.angle-item {
  /* 【追加1】小さな見出し（現在／基準の角度）と、大きな数字の2段にする */
  display: grid;
  justify-items: center;
  padding: 0.375rem 0.5rem;
  line-height: 1.4;
  text-align: center;
  background: var(--surface-soft);
  border-radius: 1.25rem;
}

/* 【追加1】小さな見出し */
.angle-label {
  font-size: 0.8125rem;
  color: var(--text-soft);
}

/* 【追加1】数字と「°」「°以内」を1行にまとめる（途中で改行されないように） */
.angle-line {
  font-size: 1rem;
  white-space: nowrap;
}

.angle-value {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums; /* 数字の幅をそろえて、数値が変わっても揺れにくくする */
}

/* 【改善1】「？」ボタン（右上の丸いボタン。40pxで押しやすい大きさ） */
.help-button {
  /* 【追加1】角度の右どなり（グリッドの右の列）に置くため、右上の固定をやめました */
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--soft-text);
  background: var(--soft-bg);
  border: 2px solid var(--soft-border);
  border-radius: 50%;
  box-shadow: 0 3px 8px var(--shadow);
}
/* 説明を開いている間は、ミント色にして「開いている」ことを伝える */
.help-button[aria-expanded="true"] {
  color: var(--primary-text);
  background: var(--primary-bg);
  border-color: var(--primary-border);
}

/* 【改善1】「？」を押した時に出る説明 */
.angle-help {
  grid-column: 1 / -1;              /* 【追加1】下の段いっぱいに広げる */
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface-soft);
  border: 2px solid var(--line);
  border-radius: 1.25rem;
}

/* --- 猫とメーターを横に並べる --- */
.visual-area {
  /* 猫の横幅。画面幅に合わせて 約150px〜230px の間で変わる */
  --stage-width: clamp(9.5rem, 50vw, 14.5rem);
  /* 猫画像の縦横比(280:412)から、猫の高さを計算。メーターも同じ高さにそろえる */
  --stage-height: calc(var(--stage-width) * 412 / 280);

  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}

.cat-area {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

/* 猫を置く丸い背景。3枚の画像をここに重ねる */
.cat-stage {
  position: relative;
  width: var(--stage-width);
  height: var(--stage-height);
  background: var(--stage-bg);
  border-radius: 45% 45% 2rem 2rem / 30% 30% 2rem 2rem;
  box-shadow: inset 0 0 0 2px var(--line);
  overflow: hidden;
}

/*
  猫の画像：3枚とも同じ場所に重ねて、普段は透明にしておく。
  下の「表示する1枚」のルールで、今の姿勢に合う猫だけが表示される。
*/
.cat-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  padding: 0.5rem 0.25rem 0.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  user-select: none;
  -webkit-user-drag: none;
}

/*
  表示する1枚を選ぶ（data-posture の値で自動的に切り替わる）
  【追加5】これは「計測中」（data-scene="measuring"）の時だけ有効にしました。
           選び方は今までと同じです。
*/
[data-posture="idle"] .cat-stage[data-scene="measuring"] .cat-good,   /* 待機中は、まっすぐな猫を少し薄く表示 */
[data-posture="good"] .cat-stage[data-scene="measuring"] .cat-good,
[data-posture="warn"] .cat-stage[data-scene="measuring"] .cat-warning,
[data-posture="bad"]  .cat-stage[data-scene="measuring"] .cat-bad {
  opacity: 1;
  visibility: visible;
}
[data-posture="idle"] .cat-stage[data-scene="measuring"] .cat-good {
  opacity: 0.7;
}

/*
  【追加5】計測中以外の猫
    welcome … 画面を開いた時（手を振る猫）
    break   … 休憩のお知らせの時（水を飲む猫）
    finished… 計測を終えた時（両手を上げる猫）
*/
.cat-stage[data-scene="welcome"]  .cat-welcome,
.cat-stage[data-scene="break"]    .cat-break,
.cat-stage[data-scene="finished"] .cat-finished {
  opacity: 1;
  visibility: visible;
}

/*
  【修正1】新しい猫3枚が、枠の丸い角で見切れないようにしました。
  ・枠の上の角は大きく丸いため、耳や両手（肉球）が角にかかっていました。
  ・そこで、新しい3枚だけ内側の余白（padding）を増やして、猫を少し小さくしています。
    （余白は「枠の幅に対する%」なので、画面の大きさが変わっても同じ見え方です）
  ・もっと小さくしたい時は数字を大きく、大きくしたい時は小さくしてください。
      padding: 上 左右 下;
*/
.cat-welcome,
.cat-break,
.cat-finished {
  padding: 18% 12% 4%;
}

.cat-caption {
  max-width: var(--stage-width);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text-soft);
}

/*
  姿勢メーター（縦型）
  ・全体の高さ＝猫の高さ。上に「悪い」、下に「良い」の文字。
  ・--meter-position（0%〜100%）にJavaScriptが値を入れると、丸い目印が滑らかに動く。
    例：メーターの真ん中なら element.style.setProperty("--meter-position", "50%")
  ・色の帯の割合は、0〜15°が良い／15〜30°が微妙／30〜90°が悪い（90°を最大として計算）
*/
.posture-meter {
  --zone-good: 16.667%;   /* 15 ÷ 90 */
  --zone-warn: 16.667%;   /* (30 - 15) ÷ 90 */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  width: 3.5rem;
  height: var(--stage-height);
}

.meter-end-label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text);
}

.meter-track {
  position: relative;
  margin-block: 1rem;               /* あわせて修正：丸い目印が「悪い／良い」の文字にかぶらないよう余白を確保 */
  flex: 1;
  width: 1.5rem;
  min-height: 6rem;
  background: var(--line);
  border-radius: 999px;
}

/* 色の帯（下から：良い → 微妙 → 悪い） */
.meter-zone {
  position: absolute;
  left: 0;
  right: 0;
}
.meter-zone-good {
  bottom: 0;
  height: var(--zone-good);
  background: #8fd9b3;
  border-radius: 0 0 999px 999px;
}
.meter-zone-warn {
  bottom: var(--zone-good);
  height: var(--zone-warn);
  background: #f7d86b;
}
.meter-zone-bad {
  top: 0;
  bottom: calc(var(--zone-good) + var(--zone-warn));
  background: #f5a496;
  border-radius: 999px 999px 0 0;
}

/* 現在位置の丸い目印 */
.meter-marker {
  position: absolute;
  left: 50%;
  bottom: var(--meter-position, 0%);           /* JavaScriptがこの値を更新する */
  width: 2rem;
  height: 2rem;
  background: #ffffff;
  border: 4px solid var(--state-border);
  border-radius: 50%;
  box-shadow: 0 2px 6px var(--shadow);
  transform: translate(-50%, 50%);             /* 丸の中心が位置に合うようにずらす */
  transition: bottom 0.5s ease, border-color 0.4s ease; /* 滑らかに動く */
}


/* ==========================================================================
   6. ボタン
   すべて丸い形（border-radius: 999px）で、指で押しやすい大きさにしています。
   ========================================================================== */

/* ボタン共通の設定 */
button {
  font: inherit;                 /* 周りと同じ丸文字にする */
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;    /* ダブルタップ拡大を防いで、反応を速くする */
  cursor: pointer;
}

/* 押した時に、ぽよんと少し沈む */
button:active {
  transform: scale(0.96);
}
button {
  transition: transform 0.12s ease, background-color 0.2s ease;
}

/* --- メインボタン（大きい・淡いミント） --- */
.primary-button {
  display: block;
  width: 100%;
  min-height: var(--tap-size);
  padding: 0.75rem 1.5rem;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--primary-text);
  background: var(--primary-bg);
  border: 3px solid var(--primary-border);
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--primary-border), 0 8px 16px var(--shadow);
}
.primary-button:active {
  box-shadow: 0 1px 0 var(--primary-border), 0 3px 8px var(--shadow);
  transform: translateY(4px);
}

/* 姿勢チェック中（＝停止ボタンになっている時）は淡いピンクにする */
.primary-button[data-running="true"] {
  color: var(--stop-text);
  background: var(--stop-bg);
  border-color: var(--stop-border);
  box-shadow: 0 5px 0 var(--stop-border), 0 8px 16px var(--shadow);
}
.primary-button[data-running="true"]:active {
  box-shadow: 0 1px 0 var(--stop-border), 0 3px 8px var(--shadow);
}

/* --- サブボタン（淡いクリームイエロー） --- */
.secondary-button {
  min-height: 3rem;
  padding: 0.5rem 1.5rem;
  font-weight: 700;
  color: var(--soft-text);
  background: var(--soft-bg);
  border: 2px solid var(--soft-border);
  border-radius: 999px;
}

/* --- 【追加4】ポケットモードのボタン（ミント色。停止ボタンの上に出る） --- */
.pocket-button {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.5rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary-text);
  background: var(--primary-bg);
  border: 3px solid var(--primary-border);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--primary-border), 0 6px 14px var(--shadow);
}
.pocket-button:active {
  box-shadow: 0 1px 0 var(--primary-border), 0 3px 8px var(--shadow);
  transform: translateY(3px);
}

/* --- アイコンだけの丸いボタン（設定・閉じる） --- */
.icon-button {
  display: grid;
  place-items: center;
  width: 3rem;              /* 48px：押しやすい大きさ */
  height: 3rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--soft-text);
  background: var(--soft-bg);
  border: 2px solid var(--soft-border);
  border-radius: 50%;
  box-shadow: 0 3px 8px var(--shadow);
}

/* ボタンの中の線画アイコン（設定の歯車・閉じる×）。色は文字色に合わせる */
.icon-svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- ＋／−ボタン（設定の角度） --- */
.stepper-button {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-text);
  background: var(--primary-bg);
  border: 2px solid var(--primary-border);
  border-radius: 50%;
}

/* --- 開始・停止のエリア --- */
.control-section {
  display: grid;
  gap: 0.75rem;
  text-align: center;
}

.run-status {
  font-size: 1.0625rem;
  font-weight: 700;
}


/* ==========================================================================
   7. 今日のふりかえり（スコアとお知らせ回数）
   点数で評価するのではなく、「ふりかえりの目安」としてやさしく見せます。
   ========================================================================== */
.today-section {
  display: grid;
  gap: 0.75rem;
}

.today-section > h2 {
  padding-left: 0.25rem;
}

.today-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); /* 幅が足りなければ自動で1列に */
  gap: 0.75rem;
}

.today-card {
  padding: 1rem 0.75rem;
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 1.5rem;
  box-shadow: 0 4px 12px var(--shadow);
}

.today-card h3 {
  font-size: 0.9375rem;
  color: var(--text-soft);
}

.score-display,
.count-display {
  margin-top: 0.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.score-value,
.count-value {
  font-size: 2.5rem;
  font-variant-numeric: tabular-nums;
}

.count-unit {
  margin-left: 0.125rem;
  font-size: 1rem;
}

.score-max {
  font-size: 1rem;
  color: var(--text-soft);
}

.score-message,
.count-message {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-soft);
}


/*
  【改善3】「今日のひとこと」→「明日の目標」の流れ
  スコアのカードの下に、矢印でつなげて縦に並べます。
*/
.daily-flow {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

/* 下向きの矢印（CSSの三角形。画像や絵文字は使っていません） */
.flow-arrow {
  width: 0;
  height: 0;
  border-left: 0.875rem solid transparent;
  border-right: 0.875rem solid transparent;
  border-top: 1rem solid var(--primary-border);
}

.flow-card {
  width: 100%;
  padding: 1rem 1rem 1.125rem;
  text-align: center;
  background: var(--surface-soft);
  border: 2px solid var(--line);
  border-radius: 1.5rem;
  box-shadow: 0 4px 12px var(--shadow);
}

.flow-card h3 {
  font-size: 0.9375rem;
  color: var(--text-soft);
}

.flow-text {
  margin-top: 0.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.7;
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 「明日の目標」だけ、ミント色にして目立たせる */
.flow-card-goal {
  color: var(--primary-text);
  background: var(--primary-bg);
  border-color: var(--primary-border);
}
.flow-card-goal h3 {
  color: var(--primary-text);
}


/* ==========================================================================
   8. お知らせ・エラー表示
   ========================================================================== */

/* オフライン表示 */
.offline-banner {
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  text-align: center;
  color: var(--soft-text);
  background: var(--soft-bg);
  border: 2px solid var(--soft-border);
  border-radius: 999px;
}

/* センサーのエラーメッセージ */
.sensor-message {
  padding: 1rem 1.25rem;
  font-size: 1rem;
  color: #8a2f22;
  background: #ffe9e4;
  border: 2px solid #f4b3a8;
  border-radius: 1.5rem;
}

/*
  【改善4・5】画面内のお知らせ置き場（alert-stack）
  姿勢のお知らせと休憩のお知らせの2つを、画面の下に縦に並べて出します。
  同時に出ても重ならないよう、1つの入れ物（固定表示）にまとめました。
  （以前は .posture-alert 自身が画面に固定されていました）
*/
.alert-stack {
  position: fixed;
  left: 50%;
  bottom: calc(0.25rem + env(safe-area-inset-bottom));
  z-index: 20;                                  /* 他の部品より手前に表示 */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: calc(100% - 0.5rem);
  max-width: 30rem;
  max-height: calc(100dvh - 1rem);              /* 画面より高くなる時は中でスクロール */
  padding: 0.75rem;                             /* 影やアニメーションが切れないための余白 */
  overflow-y: auto;
  transform: translateX(-50%);
  pointer-events: none;                         /* 入れ物自体は、下の画面の操作をじゃましない */
}
.alert-stack > * {
  pointer-events: auto;                         /* お知らせの中のボタンは押せるようにする */
}

/* 猫背のお知らせ（ピンク） */
.posture-alert,
.break-alert {
  padding: 1rem 1.25rem 1.125rem;
  text-align: center;
  border-radius: var(--radius-card);
  box-shadow: 0 10px 28px rgba(90, 40, 50, 0.28);
  animation: alert-pop 0.45s ease-out;
}

.posture-alert {
  color: #7d2c40;
  background: #fff0f3;
  border: 3px solid #f2a6b6;
}

/* 【改善4】休憩のお知らせ（ミント。猫背のお知らせと色で見分けられる） */
.break-alert {
  color: #23503c;
  background: #effaf3;
  border: 3px solid #8fd0b0;
}

.alert-title {
  font-size: 1.375rem;
  font-weight: 700;
}

.alert-text {
  margin: 0.25rem 0 0.75rem;
}

/*
  【改善5】リセット方法（番号つきの3ステップ）
  番号の丸は CSS の counter（自動連番）で付けています。
  HTML の <li> を増やすと、番号も自動で増えます。
*/
.reset-guide {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  text-align: left;
  background: #ffffff;
  border: 2px dashed #f2a6b6;
  border-radius: 1.25rem;
}

.reset-guide-title {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.reset-steps {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;                  /* 標準の番号は消して、自作の丸い番号を使う */
  counter-reset: reset-step;
}

.reset-steps li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  counter-increment: reset-step;
}

.reset-steps li::before {
  content: counter(reset-step);      /* 1, 2, 3 と自動で番号が入る */
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.9375rem;
  color: #7d2c40;
  background: #ffd5de;
  border-radius: 50%;
}

/* 出てくる時のアニメーション（下からぽよんと） */
@keyframes alert-pop {
  0%   { opacity: 0; transform: translateY(1.5rem) scale(0.95); }
  70%  { opacity: 1; transform: translateY(-0.25rem) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ==========================================================================
   9. 設定画面（<dialog>）
   ========================================================================== */
.settings-dialog {
  width: calc(100% - 1.5rem);
  max-width: 28rem;
  max-height: 90vh;
  max-height: 90dvh;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  border: 3px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* 設定画面の後ろの暗い幕 */
.settings-dialog::backdrop {
  background: rgba(70, 50, 40, 0.5);
}

/* form が縦に長くなる時は、中だけスクロールさせる */
#settings-form {
  max-height: 90vh;
  max-height: 90dvh;
  padding: 1rem 1rem 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.dialog-footer {
  margin-top: 1rem;
}

/* 設定のまとまり（fieldset）をカード風に */
.setting-group {
  margin: 0 0 0.875rem;
  padding: 0.75rem 1rem 1rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 1.5rem;
}

.setting-group legend {
  padding: 0 0.5rem;
  font-weight: 700;
}

.setting-help {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-soft);
}

/* 角度の設定： [−] ─スライダー─ [＋] */
.angle-setting {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.angle-setting input[type="range"] {
  flex: 1;
  min-width: 0;             /* 狭い画面ではみ出さないように */
  height: 2.5rem;
  accent-color: #6cc39b;    /* スライダーの色（淡いグリーン） */
  cursor: pointer;
}

.setting-value {
  margin-top: 0.25rem;
  text-align: center;
  font-weight: 700;
}

/* チェックボックス・ラジオボタンの行（押しやすいように行全体を大きく） */
.setting-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
}

.setting-row input[type="checkbox"],
.setting-row input[type="radio"] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: #6cc39b;
  cursor: pointer;
}

.setting-row label {
  flex: 1;
  cursor: pointer;
}

/* 「お知らせまでの時間」のように、文字とセレクトが横に並ぶ行 */
.setting-row select {
  flex: none;
  min-height: 2.75rem;
  padding: 0.25rem 1rem;
  font: inherit;
  color: var(--text);
  background: var(--surface-soft);
  border: 2px solid var(--line);
  border-radius: 999px;
}

/* 【追加2】「音をためす」ボタンは、行いっぱいに広げずに左に寄せる */
.setting-row .secondary-button {
  flex: none;
  min-height: 2.75rem;
}

/* 使用上の注意 */
.notes ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.notes li {
  margin-bottom: 0.25rem;
}


/* ==========================================================================
   10. フッター
   ========================================================================== */
.app-footer {
  padding-block: 0.5rem 2rem;
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: center;
  color: var(--text-soft);
}


/* ==========================================================================
   11. 画面が広い時（タブレット・PC）の調整
   スマホ用のデザインをそのまま、少しゆったり見せます。
   ========================================================================== */
@media (min-width: 600px) {
  .app-header,
  .app-main,
  .app-footer {
    max-width: 34rem;
  }

  .app-header {
    padding-top: 1.5rem;
  }

  .app-logo {
    width: 4rem;
    height: 4rem;
  }
}

/* 文章の改行をきれいにする（1文字だけ次の行に残るのを防ぐ） */
.intro-lead,
.posture-message,
.today-card h3,
.score-message,
.count-message,
.app-tagline,
.app-footer p {
  text-wrap: balance;
  word-break: auto-phrase; /* 対応ブラウザでは、単語の切れ目で改行する */
}

/* とても小さい画面（幅340px以下）では、余白を少し詰める */
@media (max-width: 340px) {
  /* 案内文の手動改行をやめて、自然に折り返す */
  .intro-lead br {
    display: none;
  }

  .today-card h3 {
    font-size: 0.875rem;
  }

  .app-header,
  .app-main,
  .app-footer {
    padding-inline: 0.75rem;
  }

  .app-header {
    gap: 0.5rem;
  }

  .app-logo {
    width: 3rem;
    height: 3rem;
  }

  .visual-area {
    gap: 0.5rem;
  }

  /* 【改善1】とても小さい画面では、角度の文字を少し小さくして1行に収める */
  .angle-item {
    padding-inline: 0.75rem;
    font-size: 0.9375rem;
  }
  .angle-value {
    font-size: 1.25rem;
  }

  .primary-button {
    font-size: 1.0625rem;
  }
}


/* ==========================================================================
   12. 動きを減らしたい人への配慮
   端末の「視差効果を減らす」などがONの人には、アニメーションをほぼ止めます。
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   13. ポケットモード（【追加4】）
   画面いっぱいの暗いロック画面です。
   ・暗くして、ポケットの中でまぶしくならないようにしています。
   ・ロック画面の色（背景・文字）は、ライト／ダークに関係なく固定です。
   ・姿勢の状態（良い／微妙／悪い）の色は、既存の data-posture の仕組みを使っています。
   ========================================================================== */

/* ロック画面を出している間は、後ろの画面をスクロールさせない */
html.is-pocket-mode,
html.is-pocket-mode body {
  overflow: hidden;
}

.pocket-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;                         /* お知らせ（20）より手前 */
  display: grid;
  place-items: center;
  padding: calc(1.5rem + env(safe-area-inset-top)) calc(1.5rem + env(safe-area-inset-right))
           calc(1.5rem + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left));
  color: #f5ebe1;
  background: #1b1714;
  overscroll-behavior: contain;
  touch-action: none;                  /* ドラッグ・ピンチなどを無効にする */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;         /* iPhoneの長押しメニューを出さない */
}

.pocket-body {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 22rem;
  text-align: center;
}

.pocket-title {
  font-size: 1.25rem;
  font-weight: 700;
}

/* 姿勢の状態の表示（色は data-posture で変わる） */
.pocket-status {
  width: 100%;
  padding: 1rem;
  color: var(--state-text);
  background: var(--state-bg);
  border: 3px solid var(--state-border);
  border-radius: 1.5rem;
}
.pocket-posture-text {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}
.pocket-posture-message {
  margin-top: 0.25rem;
  font-size: 1rem;
}
.pocket-posture-message:empty {
  display: none;
}

.pocket-help,
.pocket-hint {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #d5c6b8;
}

/* 解除ボタン：押し続けると、ゲージ（ミント色）が左から右へ伸びて、いっぱいになると解除 */
.pocket-unlock-button {
  position: relative;
  width: 100%;
  min-height: 4.5rem;
  margin-top: 0.5rem;
  overflow: hidden;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f5ebe1;
  background: #3a322c;
  border: 3px solid #7a6b5f;
  border-radius: 999px;
  touch-action: none;
  -webkit-touch-callout: none;
}
.pocket-unlock-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: #4f9a79;
  transition: width 0.15s ease-out;    /* 指を離した時は、すばやく戻る */
}
.pocket-unlock-button.is-holding .pocket-unlock-fill {
  width: 100%;
  transition: width var(--pocket-hold-ms, 2000ms) linear; /* 押している間、ゆっくり伸びる（時間は script.js から） */
}
.pocket-unlock-label {
  position: relative;                  /* ゲージより手前に文字を出す */
}
/* ボタンを押した時の「ぽよん」は、長押しの邪魔なのでやめる */
.pocket-unlock-button:active {
  transform: none;
}