/* ============================================================
     履歴タブ
     ============================================================ */
  .history-period-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    background: var(--surface-sunk);
    border-radius: var(--radius-lg);
    padding: 3px;
  }
  .history-period-tab {
    flex: 1;
    border: none;
    background: none;
    padding: 9px 0;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-muted);
    cursor: pointer;
  }
  .history-period-tab.active {background: var(--surface); color: var(--pine-deep); box-shadow: var(--shadow-card); border-radius: var(--radius-md); }

  .history-custom-range {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }
  .history-custom-range input[type="date"] { flex: 1; min-width: 0; }
  .history-custom-range-tilde { color: var(--ink-faint); font-size: 13px; flex-shrink: 0; }
  .history-custom-range .task-form-submit { flex-shrink: 0; padding: 11px 16px; }

  .history-unit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .history-unit-row-label {
    font-size: 11.5px;
    color: var(--ink-faint);
    flex-shrink: 0;
  }
  .history-unit-tabs {
    display: flex;
    gap: 4px;
    background: var(--surface-sunk);
    border-radius: var(--radius-lg);
    padding: 3px;
    flex: 1;
  }
  .history-unit-tab {
    flex: 1;
    border: none;
    background: none;
    padding: 6px 0;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink-muted);
    cursor: pointer;
  }
  .history-unit-tab.active { background: var(--surface); color: var(--pine-deep); box-shadow: var(--shadow-card); border-radius: var(--radius-md);}

  .history-loading { text-align: center; padding: 60px 0; color: var(--ink-faint); font-size: 13px; }

  .history-avg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .history-avg-item {
    background: var(--surface-sunk);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .history-avg-text { flex: 1; min-width: 0; }
  .history-avg-label { font-size: 11px; color: var(--ink-faint); margin-bottom: 2px; }
  .history-avg-value { font-size: 18px; font-weight: 700; color: var(--ink); }
  .history-avg-value .unit { font-size: 12px; font-weight: 500; color: var(--ink-faint); margin-left: 2px; }

  /* 平均スコアカード右側の小型円グラフ・アーチ（今日タブの睡眠/キャパカードと同系のデザイン）。
     2026-09-06追加。 */
  .history-avg-graphic { flex-shrink: 0; width: 44px; }
  .history-avg-circle-wrap { width: 44px; height: 44px; }
  .history-avg-circle-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
  .history-avg-circle-track { fill: none; stroke: var(--surface); stroke-width: 6; }
  .history-avg-circle-fill { fill: none; stroke: var(--pine); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
  .history-avg-arc-wrap { width: 44px; height: 25px; }
  .history-avg-arc-wrap svg { width: 100%; height: 100%; overflow: visible; }
  /* アーチのviewBox(88x49)は表示サイズ(44x25)に対して2倍のスケールのため、
     円グラフと実際の線の太さを揃えるにはstroke-widthも2倍(12)にする必要がある
     （2026-09-06修正：stroke-width:6のままだと、円グラフより明らかに細く見えていた）。 */
  .history-avg-arc-track { fill: none; stroke: var(--surface); stroke-width: 12; }
  .history-avg-arc-fill { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }

  .history-chart-legend {
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: var(--ink-faint);
    margin-bottom: 10px;
    padding-left: 12px;
  }
  .history-chart-legend .legend-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 4px;
  }
  .history-chart { width: 100%; overflow: visible; }
  .history-chart svg .chart-hit-area { fill: transparent; cursor: pointer; }
  .history-chart svg .chart-hit-area:active { fill: var(--pine-soft); opacity: 0.3; }

  .history-score-date-list { margin-top: 4px; }
  .history-score-date-list-header {
    font-size: 12.5px;
    color: var(--ink-muted);
    font-weight: 700;
    margin: 10px 0 6px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .history-score-date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    margin-bottom: 6px;
    cursor: pointer;
  }
  .history-score-date-row:last-child { margin-bottom: 0; }
  .history-score-date-row .date-label { font-size: 13px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
  .history-score-date-row .score-labels { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink-muted); }
  .history-score-date-row .score-labels .physical { color: var(--score-physical); font-weight: 700; }
  .history-score-date-row .score-labels .mental { color: var(--score-mental); font-weight: 700; }
  .history-score-date-list-empty { font-size: 12.5px; color: var(--ink-faint); padding: 10px 0; text-align: center; }
  .history-score-date-list-close-btn {
    width: 100%;
    margin-top: 4px;
    border: none;
    background: none;
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    padding: 8px 0 2px;
    cursor: pointer;
  }
  .history-chart-empty { text-align: center; padding: 30px 0; color: var(--ink-faint); font-size: 12.5px; }

  .history-simple-list { display: flex; flex-direction: column; gap: 8px; }
  .history-simple-row { display: flex; align-items: center; gap: 10px; }
  .history-simple-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .history-simple-bar-track {
    width: 80px;
    flex-shrink: 0;
    height: 8px;
    background: var(--surface-sunk);
    border-radius: 999px;
    overflow: hidden;
  }
  .history-simple-bar-fill { height: 100%; background: var(--pine); border-radius: 999px; }
  .history-simple-count { width: 28px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--ink-faint); }

  .history-coping-list { display: flex; flex-direction: column; gap: 10px; }
  .history-coping-row { background: var(--surface-sunk); border-radius: var(--radius-sm); padding: 8px 12px; }
  .history-coping-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
  .history-coping-breakdown { display: flex; gap: 4px; height: 6px; border-radius: 999px; overflow: hidden; margin-bottom: 4px; }
  .history-coping-breakdown span { height: 100%; }
  .history-coping-counts { font-size: 13px; color: var(--ink-faint); }

  .history-empty-note { text-align: center; padding: 16px 0; color: var(--ink-faint); font-size: 12px; }

  /* さらに表示/少なく表示トグルボタン（ストレッサー・コーピング・体調サイン共通）。2026-09-06追加。 */
  .history-show-more-btn {
    width: 100%;
    margin-top: 8px;
    border: none;
    background: none;
    color: var(--pine);
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    padding: 8px 0 2px;
    cursor: pointer;
  }

  /* 体調サインの割合（円グラフ＋凡例）。バックログ#2、2026-09-17追加。 */
  .history-sign-ratio { margin-bottom: 16px; }
  .history-sign-ratio-title { font-size: 12px; font-weight: 700; color: var(--ink-muted); margin-bottom: 10px; }
  .history-sign-ratio-body { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .history-sign-ratio-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink); }
  .history-sign-ratio-legend-row { display: flex; align-items: center; gap: 6px; }
  .history-sign-ratio-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .history-sign-ratio-chart { width: 72px; height: 72px; flex-shrink: 0; }
  .history-sign-ratio-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
  .history-sign-ratio-track { fill: none; stroke: var(--surface); stroke-width: 8; }
  .history-sign-ratio-slice { fill: none; stroke-width: 8; }

  /* 体調サインカード：良好/注意/悪化のグループ見出し */
  .history-sign-group { margin-bottom: 14px; }
  .history-sign-group:last-child { margin-bottom: 0; }
  .history-sign-group-title { font-size: 12px; font-weight: 700; color: var(--ink-muted); margin-bottom: 6px; }
  .history-sign-group-title[data-cat="良好"] { color: var(--ok); }
  .history-sign-group-title[data-cat="注意"] { color: var(--amber); }
  .history-sign-group-title[data-cat="悪化"] { color: var(--brick); }

/* PC版の#historyContentの並び（以前のcolumn-count:3の詰め込み）は、2026-10-11の#33-48で
   12列Gridに置き換えた。ファイル末尾の「ふりかえりタブのデザイン刷新」を参照。 */

  /* ============ 省エネモード実績（フェーズ4、2026-09-26追加） ============ */
  section.history-reflection-card {
    background: var(--pine-soft);
    border: 1px solid var(--pine);
    padding: 14px 16px;
  }
  .history-reflection-text { font-size: 13.5px; line-height: 1.8; color: var(--pine-deep); font-weight: 500; }
  .history-energy-legend { white-space: nowrap; }
  .history-energy-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    vertical-align: -1px;
    background: var(--pine-soft);
    border: 1px dashed var(--pine);
    border-radius: 2px;
  }
  .history-energy-stats { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .history-energy-stat {
    padding: 10px 12px;
    background: var(--surface-sunk);
    border-radius: var(--radius-md);
  }
  .history-energy-stat-main { background: var(--pine-soft); }
  .history-energy-stat-label { font-size: 11.5px; color: var(--ink-muted); font-weight: 700; margin-bottom: 4px; }
  .history-energy-stat-value { font-size: 24px; font-weight: 800; color: var(--pine-deep); line-height: 1.2; }
  .history-energy-stat-value small { font-size: 12px; font-weight: 700; }
  .history-energy-stat-note { margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: var(--ink-muted); }
  .history-energy-stat-detail { font-size: 13.5px; color: var(--ink); }
  .history-energy-stat-detail b { font-size: 17px; color: var(--pine-deep); }

/* ===== 面談・相談事項メモ（#consultationNotesCard、中身はconsultation-notes.js） =====
   2026-10-09（#40-3-2）に今日タブからふりかえりタブへ移したので、ルールもtoday.cssから移した。
   PCでは.history-right-areaの先頭、#historyContentの詰め込み並び（column-count）の外で横幅いっぱい。 */
.consultation-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.consultation-add-btn {
  border: 1px solid var(--pine); background: var(--surface); color: var(--pine-deep); border-radius: 999px;
  padding: 5px 14px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap;
}
/* 見出しの下の説明（文字はp.backup-desc。settings.cssが後に読まれるので、余白はidを付けて上書きする） */
#consultationNotesCard .consultation-notes-desc { margin: 2px 0 4px; }
/* 入力欄はカード幅いっぱい、追加ボタンはその下に全幅（バックログ#33-36）。以前は横並びのflexで、
   .task-form-submitのwidth:100%がボタン側に効いて、入力欄（flex:1＝基準幅0）が22pxまで潰れていた。 */
.consultation-add-form { margin: 10px 0; }
.consultation-add-form .task-form-submit { margin-top: 8px; }
.consultation-note-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.consultation-note-item:last-child { border-bottom: none; }
.consultation-note-content { flex: 1; font-size: 14px; line-height: 1.6; word-break: break-word; }
.consultation-note-item.done .consultation-note-content { color: var(--ink-faint); text-decoration: line-through; }
/* 「てりーさんより」タグ。枠・面は固定オーロラのピル（.nagi-suggest-aurora-pill、consultation-notes.jsで付ける。#33-52） */
.consultation-note-source-ai {
  display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--pine-deep);
  padding: 1px 7px; vertical-align: middle;
}
.consultation-note-delete { border: none; background: none; color: var(--ink-faint); font-size: 15px; cursor: pointer; padding: 2px 6px; flex-shrink: 0; }
.consultation-notes-empty { font-size: 12.5px; color: var(--ink-muted); line-height: 1.6; padding: 6px 2px; }

/* ============================================================
   ふりかえりタブのデザイン刷新（バックログ#33-48、2026-10-11確定）
   正本: docs/design-refresh/history-spec.md、移植元: history-concept-a.css。
   予定タブ（schedule.css末尾）と同じ青白い背景・60px一段ヘッダー・半透明カード。
   すべて body[data-view="history"] に限定する。today.css の PC版「4ペイン」ルール
   （.history-left-pane の縦積み等）は、ここで詳細度を上げて上書きしている。
   #historyContent > section.card:nth-of-type(N) は、非表示のカードも数える現在のDOM順
   （1 振り返りコメント／2 平均／3 心身推移／4 睡眠／5 キャパ／6 セルフケア／7 気分／
   8 ストレッサー／9 コーピング／10 体調サイン）が前提。カードの順を変えたらここも直す。
   ============================================================ */
body[data-view="history"] {
  --history-blue: #1a7899;
  --history-blue-deep: #174f70;
  --history-aqua: #dff2f4;
  --history-line: rgba(139, 188, 199, 0.46);
  --history-shadow: 0 7px 22px rgba(34, 82, 101, 0.08);
}

body[data-view="history"] .app {
  background:
    linear-gradient(rgba(238, 248, 250, 0.08), rgba(247, 250, 250, 0.16)),
    url("../assets/today-bg-sea-sunrise.webp") center / cover no-repeat,
    #edf7f8;
}

body[data-view="history"] .app > .app-content,
body[data-view="history"] .main-scroll-wrapper {
  background: rgba(245, 249, 250, 0.64);
}

body[data-view="history"] .app-content > header.app-header {
  background: rgba(249, 252, 252, 0.76);
  border-bottom: 1px solid rgba(184, 213, 218, 0.58);
  box-shadow: 0 3px 16px rgba(31, 87, 101, 0.045);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body[data-view="history"] .app-header-title {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--history-blue-deep);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
}

body[data-view="history"] .app-header-title::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid rgba(110, 180, 194, 0.38);
  border-radius: 10px;
  background:
    rgba(218, 242, 245, 0.82)
    url("../assets/icons/menu/menu_icon_summary.png") center / 20px 20px no-repeat;
  box-shadow: 0 3px 10px rgba(28, 96, 112, 0.08);
  filter: saturate(0.72) hue-rotate(-8deg);
}

body[data-view="history"] .history-4pane-wrapper {
  display: block;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

body[data-view="history"] .history-left-pane {
  width: auto;
  position: static;
}

body[data-view="history"] .history-right-area {
  width: 100%;
  min-width: 0;
}

body[data-view="history"] .history-period-tabs,
body[data-view="history"] .history-unit-tabs {
  border: 1px solid rgba(159, 198, 204, 0.36);
  background: var(--pine-soft); /* 2026-10-11（#33-49追補3）: 旧 rgba(224, 234, 229, 0.72)。予定タブのモード切替と同じ */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body[data-view="history"] .history-period-tab,
body[data-view="history"] .history-unit-tab {
  color: #536c73;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body[data-view="history"] .history-period-tab.active,
body[data-view="history"] .history-unit-tab.active {
  color: #0b6886;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 10px rgba(31, 91, 105, 0.1);
}

body[data-view="history"] .history-unit-row {
  min-height: 42px;
  margin: 0 0 10px;
  padding: 4px 5px 4px 12px;
  border: 1px solid rgba(153, 195, 202, 0.4);
  border-radius: 13px;
  background: rgba(252, 253, 252, 0.76);
  box-shadow: 0 4px 14px rgba(35, 85, 99, 0.045);
}

body[data-view="history"] .history-unit-row-label {
  color: #607981;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body[data-view="history"] .history-unit-tabs {
  max-width: 330px;
  padding: 2px;
  border-radius: 10px;
}

body[data-view="history"] .history-unit-tab {
  min-height: 28px;
  padding: 4px 0;
  border-radius: 8px;
}

body[data-view="history"] .history-custom-range {
  max-width: 560px;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid var(--history-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--history-shadow);
}

body[data-view="history"] #consultationNotesCard,
body[data-view="history"] #historyContent > section.card {
  border-color: var(--history-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.89);
  box-shadow: var(--history-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body[data-view="history"] #consultationNotesCard {
  min-height: 0;
  margin-bottom: 12px;
  padding: 11px 14px;
  border-left: 3px solid rgba(45, 143, 159, 0.48);
}

body[data-view="history"] #consultationNotesCard .consultation-notes-head {
  min-height: 32px;
  margin: 0;
}

body[data-view="history"] #consultationNotesCard .card-title {
  color: var(--history-blue-deep);
  font-size: 14px;
}

body[data-view="history"] #consultationNotesCard .consultation-notes-desc {
  margin: 1px 0 0;
  font-size: 11.5px;
  color: #788e94;
}

body[data-view="history"] #consultationNotesCard .consultation-notes-empty {
  margin: 2px 0 0;
  padding: 0;
  font-size: 11.5px;
  color: #647d84;
}

/* メモが0件の通常状態は、見出しと追加ボタンだけの一行に縮める（全幅共通）。メモが1件以上ある時は、
   スマホ・横画面でも説明文を従来どおり出す（history-spec.md「面談・相談事項メモ」。モックCSSはスマホで常に隠していた）。 */
body[data-view="history"] #consultationNotesCard:not(:has(.consultation-note-item))
  .consultation-notes-desc,
body[data-view="history"] #consultationNotesCard:not(:has(.consultation-note-item))
  .consultation-notes-empty {
  display: none;
}

body[data-view="history"] .consultation-add-btn {
  border-color: rgba(57, 139, 154, 0.58);
  background: rgba(239, 249, 249, 0.84);
  color: #17677c;
  font-weight: 800;
}

body[data-view="history"] #historyContent {
  column-count: initial;
  display: grid; /* JSのインラインdisplay:none（読み込み中・記録なし）は優先される */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

body[data-view="history"] #historyContent > section.card {
  min-width: 0;
  margin: 0;
  padding: 16px;
  break-inside: auto;
}

body[data-view="history"] #historyContent > section.card .card-title {
  margin-bottom: 10px;
  color: #2c505f;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body[data-view="history"] #historyContent > section.card:nth-of-type(1) { grid-column: 1 / -1; }
/* 平均スコアと心身スコア推移は、情報の優先度を同格として同じ幅にする。 */
body[data-view="history"] #historyContent > section.card:nth-of-type(2),
body[data-view="history"] #historyContent > section.card:nth-of-type(3) { grid-column: span 6; }
body[data-view="history"] #historyContent > section.card:nth-of-type(4),
body[data-view="history"] #historyContent > section.card:nth-of-type(5) { grid-column: span 6; }
body[data-view="history"] #historyContent > section.card:nth-of-type(6),
body[data-view="history"] #historyContent > section.card:nth-of-type(7),
body[data-view="history"] #historyContent > section.card:nth-of-type(8) { grid-column: span 4; }
body[data-view="history"] #historyContent > section.card:nth-of-type(9),
body[data-view="history"] #historyContent > section.card:nth-of-type(10) { grid-column: span 6; }

body[data-view="history"] section.history-reflection-card {
  border: 1px solid rgba(63, 143, 157, 0.44);
  background:
    linear-gradient(100deg, rgba(218, 241, 242, 0.92), rgba(241, 248, 247, 0.9));
}

body[data-view="history"] .history-reflection-text {
  color: #245e6a;
  font-weight: 700;
}

body[data-view="history"] .history-avg-item,
body[data-view="history"] .history-coping-row,
body[data-view="history"] .history-score-date-row,
body[data-view="history"] .history-energy-stat {
  border: 1px solid rgba(163, 195, 196, 0.25);
  background: var(--todo-card-bg); /* 2026-10-11: 古い薄緑 rgba(232, 241, 238, 0.82) から今日タブのTodoカードの色へ */
}

body[data-view="history"] .history-avg-item {
  min-height: 54px;
  padding: 9px 10px;
}

body[data-view="history"] .history-avg-value {
  color: #244957;
}

body[data-view="history"] .history-chart-legend {
  flex-wrap: wrap;
  row-gap: 5px;
  padding-left: 0;
  color: #74888e;
  font-size: 11.5px;
}

body[data-view="history"] .history-simple-bar-fill {
  background: linear-gradient(90deg, #2e7d7b, #4a98a5);
}

body[data-view="history"] .history-show-more-btn {
  color: var(--history-blue);
}

@media (min-width: 1024px) {
  body[data-view="history"] #historyContent > section.card:nth-of-type(2),
  body[data-view="history"] #historyContent > section.card:nth-of-type(3) {
    align-self: stretch;
  }

  /* セルフケア実績が無い期間は、後続2カードを半幅にして空の3列目を残さない。 */
  /* index.htmlの初期値は「display:none;」、JSが付けると「display: none;」になるので、"none"で判定する */
  body[data-view="history"] #historyContent:has(> #historyEnergyCard[style*="none"])
    > section.card:nth-of-type(7),
  body[data-view="history"] #historyContent:has(> #historyEnergyCard[style*="none"])
    > section.card:nth-of-type(8) {
    grid-column: span 6;
  }

  body[data-view="history"] .app-content > header.app-header {
    height: 60px;
    padding: 0 24px;
    box-sizing: border-box;
  }

  body[data-view="history"] header.app-header .day-nav {
    width: 100%;
    min-height: 60px;
    align-items: center;
  }

  body[data-view="history"] .history-period-tabs {
    position: fixed;
    z-index: 19;
    top: 10px;
    left: calc(50vw - 150px);
    width: 440px;
    height: 40px;
    margin: 0;
    padding: 3px;
    flex-direction: row;
    gap: 3px;
    border-radius: 14px;
    box-sizing: border-box;
  }

  body[data-view="history"] .history-period-tab {
    min-height: 32px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 12.5px;
  }

  body[data-view="history"] main {
    padding-top: 10px;
  }

  body[data-view="history"] .history-unit-row {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0;
  }

  body[data-view="history"] .history-left-pane .history-unit-tabs {
    flex-direction: row;
    margin-top: 0;
  }

  body[data-view="history"] .history-custom-range {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1180px) and (min-width: 1024px) {
  body[data-view="history"] .history-period-tabs {
    left: calc(50vw - 165px);
    width: 400px;
  }
}

@media (max-width: 1023.98px) and (orientation: portrait) {
  body[data-view="history"] .app > .app-content,
  body[data-view="history"] .main-scroll-wrapper {
    background: rgba(245, 249, 250, 0.54);
  }

  body[data-view="history"] .app-content > header.app-header {
    min-height: 48px;
    padding: 9px 10px 6px;
  }

  body[data-view="history"] .app-header-title {
    gap: 7px;
    font-size: 17px;
  }

  body[data-view="history"] .app-header-title::before {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 8px;
    background-size: 18px 18px;
  }

  /* 下端はタブバー（約72px）の分を空ける。34pxだと最後のカードの下端約38pxがタブバーに隠れ、
     「さらに表示」が押せなかった（#35-2）。設定タブ・共通のmainと同じ100px＝タブバーとの間に約28px */
  body[data-view="history"] main {
    padding: 7px 4px 100px;
  }

  body[data-view="history"] .history-period-tabs {
    min-height: 42px;
    margin: 0 0 7px;
    padding: 3px;
    gap: 2px;
    border-radius: 13px;
  }

  body[data-view="history"] .history-period-tab {
    min-height: 34px;
    padding: 0 3px;
    border-radius: 10px;
    font-size: 12px;
  }

  body[data-view="history"] .history-unit-row {
    min-height: 39px;
    gap: 7px;
    margin-bottom: 9px;
    padding-left: 9px;
  }

  body[data-view="history"] .history-unit-row-label {
    display: none;
  }

  body[data-view="history"] .history-unit-row::before {
    content: "集計";
    color: #607981;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
  }

  body[data-view="history"] .history-unit-tabs {
    max-width: none;
  }

  body[data-view="history"] .history-unit-tab {
    min-height: 27px;
    font-size: 11.5px;
  }

  body[data-view="history"] #consultationNotesCard {
    margin-bottom: 9px;
    padding: 9px 11px;
    border-radius: 13px;
  }

  body[data-view="history"] #consultationNotesCard .consultation-notes-head {
    min-height: 30px;
  }

  body[data-view="history"] .consultation-add-btn {
    padding: 5px 10px;
    font-size: 11.5px;
  }

  body[data-view="history"] #historyContent {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  body[data-view="history"] #historyContent > section.card,
  body[data-view="history"] #historyContent > section.card:nth-of-type(n) {
    grid-column: 1;
    padding: 15px 14px;
    border-radius: 13px;
  }

  body[data-view="history"] #historyContent > section.card .card-title {
    margin-bottom: 10px;
    font-size: 14px;
  }

  body[data-view="history"] .history-avg-grid {
    gap: 8px;
  }

  body[data-view="history"] .history-avg-item {
    min-height: 58px;
  }

  body[data-view="history"] nav.tabbar {
    background: rgba(255, 255, 255, 0.91);
    border-top-color: rgba(191, 216, 216, 0.78);
    box-shadow: 0 -4px 16px rgba(36, 91, 101, 0.05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@media (max-width: 1023.98px) and (orientation: landscape) {
  /* 全タブ52px・中身の上端10pxにそろえる（#33-57追加修正。下の線1pxの分、下の余白は9px） */
  body[data-view="history"] .app-content > header.app-header {
    min-height: 52px;
    padding-top: 10px;
    padding-bottom: 9px;
  }

  body[data-view="history"] main {
    padding: 6px 10px 20px;
  }

  body[data-view="history"] .history-left-pane {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-view="history"] .history-period-tabs,
  body[data-view="history"] .history-unit-row {
    min-height: 38px;
    margin: 0 0 8px;
  }

  body[data-view="history"] .history-period-tabs {
    padding: 2px;
  }

  body[data-view="history"] .history-period-tab,
  body[data-view="history"] .history-unit-tab {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 11px;
  }

  body[data-view="history"] .history-unit-row-label {
    display: none;
  }

  body[data-view="history"] .history-unit-tabs {
    max-width: none;
  }

  body[data-view="history"] .history-custom-range {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  body[data-view="history"] #consultationNotesCard {
    margin-bottom: 8px;
    padding: 8px 11px;
  }

  body[data-view="history"] #historyContent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-view="history"] #historyContent > section.card,
  body[data-view="history"] #historyContent > section.card:nth-of-type(n) {
    grid-column: span 1;
    padding: 12px;
  }

  body[data-view="history"] #historyContent > section.card:nth-of-type(1) {
    grid-column: 1 / -1;
  }

  body[data-view="history"] #historyContent > section.card:nth-of-type(2),
  body[data-view="history"] #historyContent > section.card:nth-of-type(3) {
    align-self: stretch;
  }

  /* #35-14（H-1）: Webブラウザ横向きはアプリ枠が中央480pxのままなので、履歴カードは1列に戻す。
     ネイティブアプリ横画面（html.is-app-landscape、全幅＋左ナビ）は上の2列を維持する */
  html.is-web body[data-view="history"] #historyContent {
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-web body[data-view="history"] #historyContent > section.card:nth-of-type(n) {
    grid-column: 1;
  }
}