/* サイドバー（.r2-side / .r2-suser / .r2-sa-* / .r2-cat-* など）は
   レビューページと全く同じ部品を流用するため、その専用CSSを取り込む。 */
@import url("review.css");

/* ============================================================
   diet.css — ガジェッター ダイエット部（/diet/）
   2カラム（右メニュー）。幅・余白はカテゴリページ（list.css）に合わせる。
   デザイン標準：角丸0・影なし・枠線は全辺均一(1.5px)。
   ============================================================ */

/* ── ダイエット機能専用ヘッダー（ロゴ＋ダイエット部）── */
.hd-diet .hd-inner { gap: 14px; }
.hd-diet-label {
  display: inline-flex; align-items: center;
  color: #e4e6ed; font-weight: 800; font-size: 1.05rem; letter-spacing: .02em;
  padding-left: 14px; border-left: 1px solid #2b3038; white-space: nowrap;
}
.hd-diet-label:hover { color: var(--accent); }
/* 「トップ」ナビ：PCはロゴ/ラベルが同役割のため非表示、モバイル（2行目ナビ）でのみ表示 */
@media (min-width: 641px) { .hd-diet-top { display: none; } }
@media (max-width: 640px) {
  /* メインヘッダーと同じ2行方式：1行目＝ロゴ＋ダイエット部＋アイコン、2行目＝ナビ。 */
  .hd-diet .hd-inner { gap: 10px; flex-wrap: wrap; align-items: center; }
  .hd-diet .logo { order: 0; flex: 0 0 auto; }
  .hd-diet-label { order: 1; flex: 0 1 auto; min-width: 0; font-size: .95rem; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; }
  .hd-diet .hd-right { order: 2; margin-left: auto; flex: 0 0 auto; }
  .hd-diet .hd-nav { order: 3; }
}

/* ── 記録一覧 タイトルのユーザーアイコン（クリックでユーザーページ）── */
.diet-titlebar-ava { display: inline-flex; flex: 0 0 auto; }
.diet-titlebar-ava img,
.diet-titlebar-ava-def {
  width: 44px; height: 44px; display: block; object-fit: cover; background: #2a2f38;
}
.diet-titlebar-ava-def { display: flex; align-items: center; justify-content: center; color: #9aa2ae; font-size: 1.4rem; }
.diet-titlebar-ava:hover { opacity: .85; }
.diet-titlebar-name { min-width: 0; color: inherit; text-decoration: none; }
a.diet-titlebar-name:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .diet-titlebar-ava img,
  .diet-titlebar-ava-def { width: 34px; height: 34px; }
  .diet-titlebar-ava-def { font-size: 1.1rem; }
}

/* ── 2カラム本体（max-width / grid はカテゴリページと同一）── */
.diet-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 28px 60px;
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "main sidebar";
  gap: 28px;
  align-items: stretch; /* レビューと同じ：列を本文高さまで伸ばし、アクションバーを画面下に sticky。カードのみドック追従 */
}
/* メニュー（r2-cat-row 流用）：先頭行の上枠を補う（site標準は .r2-cat-all が担うが diet では未使用） */
.diet-side .r2-cat-row:first-of-type { border-top: 1.5px solid var(--text); }
/* モバイルのドロワー内でもユーザーカードを表示（review.css は非表示にしている） */
@media (max-width: 1000px) {
  .diet-side .r2-side-user { display: block; }
}
.diet-side .r2-side-block .diet-menu-cta { margin-top: 10px; }
.diet-main { grid-area: main; min-width: 0; }
.diet-side { grid-area: sidebar; min-width: 0; }
/* 入力ページ（edit.php）：サイドバーなし・1カラム */
.diet-body-1col { grid-template-columns: 1fr; grid-template-areas: "main"; max-width: 900px; }

/* サイドバーのドロワー化（.r2-side）はレビューと同じ 1000px で切り替える */
@media (max-width: 1000px) {
  .diet-body {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "sidebar";
    padding: 18px 14px 50px;
    gap: 20px;
  }
}

/* ── トップのヒーロー：サイトトップ（root index.php）と全く同じ list-page-head + v5-head を複製 ── */
.list-page-head { background: #191c22; border-bottom: 1.5px solid #252930; padding: 22px 0; }
.list-page-head-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.list-page-head h1 { font-size: var(--fs-xl); font-weight: 900; letter-spacing: -.5px; display: flex; align-items: center; gap: 10px; color: #e4e6ed; margin: 0; }
@media (min-width: 901px) { .list-page-head h1 { font-size: var(--fs-2xl); } }
.v5-head { padding: 36px 0 !important; }
.v5-head-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.v5-head-text { flex: 1; min-width: 260px; }
.v5-head-text h1 { display: block !important; font-size: var(--fs-h1); line-height: 1.3; font-weight: 900; letter-spacing: -.02em; color: #e4e6ed; margin: 0; gap: 0 !important; }
.v5-ul { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.v5-head-text p { color: #9aa1ad; font-size: var(--fs-base); margin: 10px 0 0; line-height: 1.55; }
.v5-head-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff !important; border: 1.5px solid var(--accent); border-radius: 0; padding: 13px 26px; font-weight: 900; font-size: var(--fs-base); white-space: nowrap; transition: .18s; text-decoration: none; }
.v5-head-btn:hover { background: transparent; color: var(--accent) !important; }
@media (max-width: 640px) {
  .v5-head { padding: 28px 0 !important; }
  .v5-head-inner { flex-direction: column; align-items: center; gap: 18px; padding-left: 14px !important; padding-right: 14px !important; }
  .v5-head-text { text-align: center; width: 100%; }
  .v5-head-btn { align-self: stretch; }
}

/* ── ブロック見出し（TAG + タイトル + 横線）── */
.diet-block-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.diet-block-tag {
  font-size: var(--fs-xs); font-weight: 900; letter-spacing: .08em;
  color: #fff; background: var(--accent); padding: 3px 8px; line-height: 1;
}
.diet-block-title { font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
/* 表示ページ タイトル末尾の編集ボタン（濃色タイトルバー上） */
.diet-titlebar-edit { margin-left: 14px; flex: 0 0 auto; border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-size: var(--fs-sm); font-weight: 700; padding: 5px 14px; white-space: nowrap; vertical-align: middle; }
.diet-titlebar-edit:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.diet-meal-total { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 700; color: var(--text2); white-space: nowrap; }
.diet-meal-total b { font-size: 1.05rem; font-weight: 900; color: var(--text); }
.diet-meal-diff.over { color: var(--accent); }
.diet-meal-diff.under { color: #1f9d55; }
.diet-block-line { flex: 1; height: 1.5px; background: var(--text); }

/* ── 統計カード（トップ）── */
.diet-stats { display: flex; gap: 12px; margin-bottom: 22px; }
.diet-stat {
  flex: 1; text-align: center;
  border: 1.5px solid var(--text); background: var(--bg2); padding: 13px 10px;
}
.diet-stat b { display: block; font-size: 1.5rem; font-weight: 900; color: var(--text); line-height: 1.1; }
.diet-stat b small { font-size: .62rem; font-weight: 800; margin-left: 2px; color: var(--text3); }
.diet-stat span { font-size: var(--fs-xs); color: var(--text3); }
.diet-stat b.down { color: #1f9d55; }   /* 体重減 = 緑（良い変化） */
.diet-stat b.up   { color: var(--accent); }

/* ── みんなの記録フィード ── */
.diet-feed { border: 1.5px solid var(--text); background: var(--bg2); }
.diet-feed-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--text); }
.diet-feed-item + .diet-feed-item { border-top: 1.5px solid var(--text); }
.diet-feed-item:hover { background: var(--bg3); }
.diet-feed-ava { width: 40px; height: 40px; flex: 0 0 auto; object-fit: cover; background: var(--bg3); }
.diet-feed-ava-def { display: flex; align-items: center; justify-content: center; color: var(--text4); font-size: 1.2rem; }
.diet-feed-main { flex: 0 0 100px; max-width: 100px; min-width: 0; }
.diet-feed-name { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diet-feed-date { font-size: var(--fs-xs); color: var(--text3); }
/* 名前と数値の間の空きスペースに食事サムネ（朝・昼・夜・間食 各1枚目）。PCのみ。 */
.diet-feed-thumbs { display: flex; gap: 6px; flex: 0 1 auto; min-width: 0; overflow: hidden; align-items: center; }
.diet-feed-thumb { flex: 0 0 auto; width: 66px; height: 50px; object-fit: cover; border: 1.5px solid var(--text); background: var(--bg3); display: block; }
.diet-feed-vals { display: flex; gap: 20px; flex: 0 0 auto; align-items: flex-end; margin-left: auto; }
.diet-feed-val { text-align: right; line-height: 1.1; }
.diet-feed-val b { font-size: 1.05rem; font-weight: 900; }
.diet-feed-val span { display: block; font-size: .58rem; color: var(--text3); font-weight: 700; }
@media (max-width: 640px) {
  /* 1行（アイコンの高さ）に収める：アバター＋指標を横一列、指標は横スクロール。名前/日付は非表示 */
  .diet-feed-item { flex-wrap: nowrap; }
  .diet-feed-main { display: none; }
  .diet-feed-thumbs { display: none; }
  .diet-feed-vals { flex: 1 1 auto; min-width: 0; margin-left: 0; justify-content: flex-start; gap: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
  .diet-feed-vals::-webkit-scrollbar { display: none; }
  .diet-feed-vals .diet-metric { flex: 0 0 auto; }
}

/* みんなの食事（食事画像グリッド・新着順） */
.diet-foodgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.diet-foodcard { position: relative; aspect-ratio: 4 / 3; border: 1.5px solid var(--text); background: var(--bg3); overflow: hidden; display: block; }
.diet-foodcard img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--trans); }
.diet-foodcard:hover img { opacity: .88; }
.diet-foodcard img.diet-foodcard-ava { position: absolute; top: 0; left: 0; width: 30px; height: 30px; object-fit: cover; background: var(--bg3); }
.diet-foodcard .diet-foodcard-slot { left: auto; right: 0; }
@media (max-width: 900px) { .diet-foodgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .diet-foodgrid { grid-template-columns: repeat(3, 1fr); } }

/* メモ／食事コメントの Markdown エディタ（EasyMDE）：枠線を黒・太さ1.5px・角丸0（site標準）に */
.EasyMDEContainer .editor-toolbar,
.EasyMDEContainer .CodeMirror {
  border-color: var(--text) !important;
  border-width: 1.5px !important;
  border-radius: 0 !important;
}
.EasyMDEContainer .editor-toolbar { border-bottom: 1.5px solid var(--text) !important; }
.EasyMDEContainer .CodeMirror { border-top: 0 !important; }

/* さらに読み込むボタン */
.diet-morebtn { display: block; width: 100%; margin-top: 12px; padding: 11px; background: var(--bg2); border: 1.5px solid var(--text); color: var(--text); font-weight: 800; font-size: var(--fs-sm); cursor: pointer; font-family: inherit; }
.diet-morebtn:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   記録一覧（list.php）カード式・日付順
   ============================================================ */
.diet-block-count { font-size: var(--fs-xs); color: var(--text3); font-weight: 700; flex: 0 0 auto; }

.diet-rec-list { border: 1.5px solid var(--text); background: var(--bg2); }
.diet-rec {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; color: var(--text);
}
.diet-rec + .diet-rec { border-top: 1.5px solid var(--text); }
a.diet-rec { transition: background var(--trans); }
a.diet-rec:hover { background: var(--bg3); }

.diet-rec-date {
  flex: 0 0 auto; width: 78px; text-align: center;
  border-right: 1.5px solid var(--text); padding-right: 14px;
}
.diet-rec-dnum { display: block; font-size: 1.7rem; font-weight: 900; line-height: 1; color: var(--text); }
.diet-rec-dnum.sun { color: #c0392b; }
.diet-rec-dnum.sat { color: #2563eb; }
.diet-rec-dym { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text3); }

.diet-rec-body { flex: 1; min-width: 0; }
.diet-rec-metrics { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.diet-metric { line-height: 1.15; text-align: center; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 2px; white-space: nowrap; }
.diet-metric b { font-size: 1.15rem; font-weight: 900; color: var(--text); }
.diet-metric b small { font-size: .6rem; font-weight: 800; margin-left: 1px; color: var(--text3); }
.diet-metric > span { display: block; font-size: var(--fs-xs); color: #fff; background: #1a1d23; font-weight: 700; padding: 2px 7px; }
.diet-metric-empty b { color: var(--text4); }
/* 体重の通算増減（初回からの差）：増加=赤／減少=青。初回（増減0）は非表示 */
.diet-metric-total { font-size: .72em; font-weight: 800; margin-left: 5px; }
.diet-metric-total.up { color: #d32f2f; }
.diet-metric-total.down { color: #1565c0; }
.diet-rec-note {
  margin-top: 8px; font-size: var(--fs-sm); color: var(--text3); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: break-word;
}
.diet-rec-edit { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); white-space: nowrap; }

@media (max-width: 640px) {
  .diet-rec { gap: 12px; padding: 12px 12px; }
  .diet-rec-date { width: 58px; padding-right: 10px; }
  .diet-rec-dnum { font-size: 1.4rem; }
  .diet-rec-metrics { gap: 6px 16px; }
  .diet-metric b { font-size: 1.02rem; }
  .diet-rec-edit { display: none; }
}

/* ページャ（記録一覧） */
.diet-pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; justify-content: center; }
.diet-pager-btn, .diet-pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1.5px solid var(--text); background: var(--bg2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.diet-pager-btn:hover, .diet-pager-num:hover { border-color: var(--accent); color: var(--accent); }
.diet-pager-num.on { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ── 空表示 ── */
.diet-empty {
  border: 1.5px solid var(--text); background: var(--bg2);
  padding: 40px 20px; text-align: center; color: var(--text3);
}

/* ── フラッシュ ── */
.diet-flash {
  border: 1.5px solid #1f9d55; background: rgba(31,157,85,.08);
  color: #1f7a44; padding: 10px 14px; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 16px;
}
.diet-flash.err { border-color: var(--accent); background: var(--accent-light); color: var(--accent-dark); }

/* ============================================================
   カレンダー
   ============================================================ */
.diet-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.diet-cal-title { font-size: var(--fs-lg2); font-weight: 900; color: var(--text); }
.diet-cal-nav { display: flex; gap: 6px; }
.diet-cal-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 34px; padding: 0 12px;
  border: 1.5px solid var(--text); background: var(--bg2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.diet-cal-nav a:hover { border-color: var(--accent); color: var(--accent); }

/* 曜日見出し（本体グリッドとは別の行）。薄いグレー帯。 */
.diet-dow-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--bg3);
  border: 1px solid var(--text); border-bottom: 0;
}
.diet-dow {
  text-align: center; font-size: var(--fs-xs); font-weight: 700;
  color: var(--text3); padding: 7px 0;
}
.diet-dow + .diet-dow { border-left: 1px solid var(--text); }
.diet-dow.sun { color: #c0392b; }
.diet-dow.sat { color: #2563eb; }

/* 日付グリッド：隙間なしの一体型。外枠＋各セルの上・左罫線で 1 本に見せる。 */
.diet-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--text); border-left: 0; border-top: 0;
  background: var(--bg2);
}

/* セル本体。div でも button でも全く同じ見た目になるよう、
   ★ button の UA 既定スタイル（太い枠・背景・角丸・フォント）を完全リセットする。
     以前は border-top/left しか指定せず button 既定の右・下枠が黒く残っていた。 */
.diet-cell {
  -webkit-appearance: none; appearance: none;
  margin: 0; border: 0; border-radius: 0;
  border-top: 1px solid var(--text);
  border-left: 1px solid var(--text);
  background: var(--bg2);
  display: flex; flex-direction: column; gap: 2px;
  min-height: 93px; padding: 5px 6px;  /* PC は通常の1.5倍の縦幅 */
  font: inherit; color: var(--text); text-align: left;
  position: relative; overflow: hidden;
}
.diet-cell.empty { background: var(--bg); }
.diet-cell.future { background: #f6f8fc; }
.diet-cell.has { background: var(--accent-light); }       /* 記録のある日を淡く強調 */
button.diet-cell { cursor: pointer; transition: background var(--trans); }
button.diet-cell:hover { background: var(--accent-glow); }
.diet-cell.today { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }

.diet-cell-day { font-size: var(--fs-xs); font-weight: 800; color: var(--text3); line-height: 1.1; }
.diet-cell.today .diet-cell-day { color: var(--accent); }

/* 値ブロック：残り高さを使って中央寄せ（日付の下にゆとりを持って表示） */
.diet-cell-val {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  line-height: 1.05;
}
.diet-cell-w { font-size: 1.02rem; font-weight: 900; line-height: 1; color: var(--text); }
.diet-cell.has .diet-cell-w { color: var(--accent-dark); }
.diet-cell-unit { font-size: .55rem; font-weight: 800; margin-left: 1px; color: var(--text3); }
.diet-cell-bf { font-size: .62rem; color: var(--text3); font-weight: 700; line-height: 1.1; }

/* 「＋」は常時表示せず、ホバー／フォーカス時だけ右下に薄く出す（クラッタ解消） */
.diet-cell-add {
  position: absolute; right: 5px; bottom: 4px;
  font-size: 1rem; line-height: 1; color: var(--text4); font-weight: 400;
  opacity: 0; transition: opacity var(--trans); pointer-events: none;
}
button.diet-cell:hover .diet-cell-add,
button.diet-cell:focus-visible .diet-cell-add { opacity: 1; }

.diet-cal-foot { margin-top: 18px; }

/* ── モバイルのカレンダー ── */
@media (max-width: 640px) {
  .diet-dow { padding: 6px 0; font-size: .62rem; }
  .diet-cell { min-height: 50px; padding: 3px 3px; gap: 1px; }
  .diet-cell-day { font-size: .6rem; }
  .diet-cell-w { font-size: .84rem; }
  .diet-cell-unit { display: none; }     /* 狭いので kg 単位は省略 */
  .diet-cell-bf { font-size: .54rem; }
  .diet-cell-add { display: none; }
}
@media (max-width: 360px) {
  .diet-cell { min-height: 44px; }
  .diet-cell-w { font-size: .76rem; }
}

/* ============================================================
   登録ポップアップ
   ============================================================ */
.diet-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,12,18,.62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: none;
}
.diet-modal-overlay.open { display: block; }
.diet-modal {
  position: fixed; z-index: 1001; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px); max-width: 420px;
  background: var(--bg2); border: 1.5px solid var(--text);
  display: none; max-height: calc(100vh - 36px); overflow-y: auto;
}
.diet-modal.open { display: block; }
.diet-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1.5px solid var(--text);
}
.diet-modal-title { font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
.diet-modal-x {
  border: 0; background: none; cursor: pointer; padding: 0;
  width: 32px; height: 32px; font-size: 24px; line-height: 1; color: var(--text3);
}
.diet-modal-x:hover { color: var(--accent); }
.diet-modal-body { padding: 16px; }

.diet-field { margin-bottom: 14px; }
/* 体重・体脂肪率を横並びにする行 */
.diet-field-row { display: flex; gap: 12px; }
.diet-field-row .diet-field { flex: 1; min-width: 0; }
.diet-field-row .diet-input { min-width: 0; }
.diet-field > label { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--text); margin-bottom: 6px; }
.diet-opt { font-size: var(--fs-xs); font-weight: 500; color: var(--text3); margin-left: 4px; }
.diet-inline { display: flex; align-items: center; gap: 8px; }
.diet-input {
  width: 100%; height: 44px; padding: 0 12px;
  border: 1.5px solid var(--text); background: var(--bg);
  font-size: 1rem; font-family: inherit; color: var(--text);
}
.diet-input:focus { outline: none; border-color: var(--accent); }
/* 数値欄は IME を無効化して直接（英字）入力にする（対応ブラウザのみ） */
.diet-kp, #meal-cal { ime-mode: disabled; }
.diet-textarea { height: auto; padding: 10px 12px; line-height: 1.6; resize: vertical; }
.diet-unit { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--text3); font-weight: 700; }
.diet-bp-row { display: flex; align-items: center; gap: 8px; }
.diet-bp-row .diet-input { text-align: center; }
.diet-bp-sep { flex: 0 0 auto; color: var(--text3); font-weight: 700; }
/* 表示ページ：その日の血圧（朝・夜） */
.diet-bp-view { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.diet-bp-item { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--text); background: var(--bg2); padding: 8px 10px; }
.diet-bp-when { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 900; letter-spacing: .02em; color: #fff; background: #1a1c24; padding: 3px 8px; line-height: 1.5; white-space: nowrap; }
.diet-bp-val { flex: 1; text-align: center; font-size: var(--fs-base); font-weight: 800; color: var(--text); white-space: nowrap; }
.diet-bp-na { color: var(--text4); font-weight: 700; }
.diet-modal-hint { font-size: var(--fs-xs); color: var(--text3); margin-top: 2px; line-height: 1.6; }
.diet-modal-foot { display: flex; gap: 10px; padding: 14px 16px; border-top: 1.5px solid var(--text); }
.diet-btn {
  flex: 1; height: 46px; cursor: pointer; font-family: inherit;
  border: 1.5px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 1rem; font-weight: 800;
}
.diet-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* 閲覧専用ビュー（他人の記録） */
.diet-view-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--text); }
.diet-view-row:last-child { border-bottom: 0; }
.diet-view-row dt { flex: 0 0 90px; font-size: var(--fs-sm); font-weight: 700; color: var(--text3); }
.diet-view-row dd { flex: 1; font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.diet-view-empty { color: var(--text3); padding: 8px 0; }

/* ============================================================
   サイドメニュー（右）
   ============================================================ */
.diet-side-inner {
  border: 1.5px solid var(--text); background: var(--bg2);
  padding: 16px; position: sticky; top: 80px;
}
.diet-side-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
/* サイド：プロフィールカード（＋Xポスト・追従） */
.diet-uc { border: 1.5px solid var(--text); background: var(--bg2); padding: 18px 16px; margin-bottom: 16px; text-align: center; }
.diet-uc-ava { display: inline-block; width: 96px; height: 96px; overflow: hidden; border: 1.5px solid var(--text); }
.diet-uc-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diet-uc-ava-def { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--bg3); color: var(--text3); font-size: 2rem; }
.diet-uc-name { display: block; margin-top: 10px; font-size: var(--fs-lg); font-weight: 800; color: var(--text); text-decoration: none; }
.diet-uc-name:hover { text-decoration: underline; }
.diet-uc-pts { display: inline-flex; gap: 10px; align-items: baseline; margin-top: 6px; color: var(--text2); text-decoration: none; font-size: var(--fs-sm); }
.diet-uc-pts b { color: var(--accent); font-weight: 900; }
.diet-uc-pts small { font-size: .7rem; color: var(--text3); }
.diet-uc-sns { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.diet-uc-sns-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid var(--text); color: var(--text2); }
.diet-uc-sns-btn:hover { border-color: var(--accent); color: var(--accent); }
.diet-uc-sns-btn.yt:hover { border-color: #ff0000; color: #ff0000; }
.diet-uc-bio-wrap { margin-top: 12px; text-align: left; }
.diet-uc-bio { font-size: var(--fs-sm); color: var(--text2); line-height: 1.7; white-space: pre-wrap; overflow-wrap: break-word; max-height: 4.8em; overflow: hidden; }
.diet-uc-bio-wrap.open .diet-uc-bio { max-height: none; }
.diet-uc-bio-toggle { margin-top: 4px; background: none; border: none; color: var(--accent); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; font-family: inherit; padding: 0; }
.diet-uc-xpost { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 10px; background: #000; color: #fff; font-weight: 800; font-size: var(--fs-sm); }
.diet-uc-xpost:hover { background: #1a1a1a; color: #fff; }
@media (min-width: 769px) { .diet-side-inner { position: sticky; top: 76px; } }

.diet-side-tag {
  font-size: var(--fs-xs); font-weight: 900; letter-spacing: .08em;
  color: #fff; background: var(--accent); padding: 3px 8px; line-height: 1;
}
.diet-side-title { font-size: var(--fs-base); font-weight: 800; color: var(--text); }
.diet-side-line { flex: 1; height: 1.5px; background: var(--text); }
.diet-menu { display: flex; flex-direction: column; gap: 8px; }
.diet-menu-link {
  display: block; padding: 11px 13px;
  border: 1.5px solid var(--text); background: var(--bg2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.diet-menu-link:hover { border-color: var(--accent); color: var(--accent); }
.diet-menu-link.on { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.diet-menu-cta {
  display: block; padding: 12px 13px; text-align: center;
  border: 1.5px solid var(--accent); background: var(--accent); color: #fff;
  font-size: var(--fs-sm); font-weight: 800;
}
.diet-menu-cta:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.diet-side-note { margin-top: 16px; }
.diet-side-note p { font-size: var(--fs-xs); color: var(--text3); line-height: 1.8; }

@media (max-width: 900px) {
  .diet-side-inner { position: static; }
}

/* ============================================================
   詳細ページ（detail.php）
   ============================================================ */
/* 現在値・変化量テーブル */
.diet-summary { margin: 12px 0 4px; }
.diet-sumtable { width: 100%; border-collapse: collapse; background: var(--bg2); border: 1.5px solid var(--text); }
.diet-sumtable th, .diet-sumtable td { padding: 6px 8px; text-align: center; border: 1px solid var(--text); white-space: nowrap; }
.diet-sumtable thead th { background: var(--bg3); font-size: var(--fs-xs); font-weight: 800; color: var(--text3); }
.diet-sumtable tbody th { background: var(--bg3); font-size: var(--fs-sm); font-weight: 800; color: var(--text3); width: 24%; white-space: nowrap; }
.diet-sumtable td b { font-size: 1.45rem; font-weight: 900; color: var(--text); }
.diet-sumtable td small { font-size: .55rem; font-weight: 800; margin-left: 1px; color: var(--text3); }
.diet-d { font-size: .82rem; font-weight: 900; }
.diet-d small { font-size: .55rem; font-weight: 800; margin-left: 1px; }
.diet-d.down { color: #1f9d55; }   /* 減少＝緑 */
.diet-d.up   { color: var(--accent); }
.diet-d.flat { color: var(--text3); }
.diet-d-na { color: var(--text4); font-weight: 800; }

/* 食事の日付ナビ */
.diet-mealnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.diet-mealnav-date { font-size: var(--fs-base); font-weight: 800; color: var(--text); text-align: center; flex: 1; }
.diet-mealnav-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 12px; border: 1.5px solid var(--text); background: var(--bg2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text); white-space: nowrap;
}
.diet-mealnav-btn:hover { border-color: var(--accent); color: var(--accent); }
.diet-mealnav-btn.disabled { color: var(--text4); border-color: var(--text); pointer-events: none; }
/* PC時は日付表示を一回り大きく */
@media (min-width: 641px) {
  .diet-mealnav-date { font-size: var(--fs-lg2); }
}

/* 食事カード */
.diet-meals { display: flex; flex-direction: column; gap: 12px; }
.diet-meal { border: 1.5px solid var(--text); background: var(--bg2); padding: 12px 14px; }
.diet-meal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.diet-meal-slot {
  font-size: var(--fs-xs); font-weight: 900; letter-spacing: .04em;
  color: #fff; background: #1a1c24; padding: 3px 10px; line-height: 1;
}
.diet-meal-time { font-size: var(--fs-xs); color: var(--text3); font-weight: 700; }
.diet-meal-cal { font-size: var(--fs-sm); font-weight: 800; color: var(--accent); }
.diet-meal-del { margin-left: auto; }
.diet-meal-delbtn {
  border: 1.5px solid var(--text); background: var(--bg2); color: var(--text3);
  font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; cursor: pointer; font-family: inherit;
}
.diet-meal-delbtn:hover { border-color: #b91c1c; color: #b91c1c; }
/* 記録一覧：上部ナビ（新規記録・カレンダー・グラフ） */
.diet-listnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.diet-listnav-btn {
  border: 1.5px solid var(--text); background: var(--bg2); color: var(--text);
  font-size: var(--fs-sm); font-weight: 700; padding: 9px 18px; white-space: nowrap;
}
.diet-listnav-btn:hover { border-color: var(--accent); color: var(--accent); }
.diet-listnav-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.diet-listnav-btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.diet-listnav-btn.current { background: #2563eb; border-color: #2563eb; color: #fff; cursor: default; }

/* 記録ナビ：ユーザーページ（.user-tab / .user-cat-btn）と同じボックス型タブ */
.diet-recnav { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin-bottom: 16px; border-bottom: 1.5px solid var(--text); }
.diet-recnav-new {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); border: 1.5px solid var(--accent); border-bottom: none; border-radius: 0;
  color: #fff; font-weight: 900; font-size: var(--fs-base); letter-spacing: .06em;
  padding: 11px 22px; line-height: 1; margin-bottom: -1.5px; white-space: nowrap; text-decoration: none;
}
.diet-recnav-new:hover { background: var(--accent-dark); color: #fff; }
.diet-recnav-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.diet-recnav-tab {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--text); border-bottom: none; border-radius: 0;
  padding: 11px 26px; font-size: var(--fs-base); font-weight: 900; letter-spacing: .06em;
  color: var(--text); white-space: nowrap; text-decoration: none; line-height: 1;
  margin-bottom: -1.5px; transition: .15s;
}
.diet-recnav-tab:hover { color: var(--accent); border-color: var(--accent); }
.diet-recnav-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); cursor: default; }
.diet-recnav-set {
  flex: 0 0 auto; margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 13px; border: 1.5px solid var(--text); background: var(--bg2); color: var(--text);
  font-size: var(--fs-xs); font-weight: 900; letter-spacing: .04em; white-space: nowrap; text-decoration: none;
}
.diet-recnav-set:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
  /* 幅が足りない時はタブを横スクロール（折り返して崩れない）。各タブは全周枠のボックス。 */
  .diet-recnav { gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-bottom: 1.5px solid var(--text); padding-bottom: 10px; align-items: stretch; }
  .diet-recnav::-webkit-scrollbar { display: none; }
  .diet-recnav-tabs { display: contents; }
  .diet-recnav-tab { flex: 0 0 auto; margin-bottom: 0; padding: 8px 12px; font-size: var(--fs-sm); border: 1.5px solid var(--text); white-space: nowrap; }
  .diet-recnav-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
  .diet-recnav-set { flex: 0 0 auto; margin-left: 4px; padding: 7px 10px; font-size: 11px; }
}

/* データ表（Excel風・横スクロール対応） */
.diet-datawrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1.5px solid var(--text); }
.diet-datatable { width: 100%; border-collapse: collapse; background: var(--bg2); font-size: var(--fs-sm); white-space: nowrap; }
.diet-datatable th, .diet-datatable td { border: 1px solid var(--text); padding: 6px 10px; text-align: center; }
.diet-datatable thead th { background: var(--bg3); font-weight: 800; }
.diet-datatable-date { text-align: left; font-weight: 700; }
.diet-datatable-date a { color: var(--accent); text-decoration: none; }
.diet-datatable-date a:hover { text-decoration: underline; }
.diet-datatable td small { font-size: .7em; color: var(--text3); margin-left: 1px; }
.diet-datatable-empty { color: var(--text3); padding: 18px; }
/* 編集モード（表を直接編集） */
.diet-edit-label { font-size: var(--fs-sm); font-weight: 800; color: var(--text); margin-right: 4px; white-space: nowrap; }
.diet-edittable td { padding: 3px 4px; }
.diet-edit-input { width: 74px; box-sizing: border-box; font-size: var(--fs-sm); font-family: inherit; font-weight: 700; text-align: center; color: var(--text); border: 1.5px solid var(--text); background: var(--bg); padding: 6px 4px; border-radius: 0; }
.diet-edit-input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.diet-edit-input::-webkit-outer-spin-button, .diet-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.diet-edit-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.diet-edit-today { background: #fdeaea; }
.diet-edit-today .diet-edit-input { background: #fff; }
.diet-data-note { font-size: var(--fs-sm); color: var(--text2); line-height: 1.7; margin: 0 0 10px; }
.diet-danger { border-color: var(--accent); }

/* 印刷：項目選択 */
.diet-pcols { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.diet-pcol { display: flex; align-items: center; gap: 9px; font-size: var(--fs-base); font-weight: 700; color: var(--text); cursor: pointer; }
.diet-pcol input { width: 18px; height: 18px; flex: 0 0 auto; }

/* ファイル選択（CSVインポート）のボタンをサイト標準に */
.diet-file { display: block; width: 100%; font-size: var(--fs-sm); color: var(--text2); }
.diet-file::file-selector-button {
  font-family: inherit; font-size: var(--fs-sm); font-weight: 800; color: var(--text);
  background: var(--bg2); border: 1.5px solid var(--text); border-radius: 0;
  padding: 8px 16px; margin-right: 10px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.diet-file::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }

/* コメント欄（review.css の .r2-comments を流用）を diet のブロック見出しに合わせる */
.diet-main .r2-comments-block { margin-top: 28px; }
.diet-main .r2-comments-block .r2-block-tag { color: #fff; background: var(--accent); border-color: var(--accent); letter-spacing: .08em; }
.diet-main .r2-comments-block .r2-block-title { font-size: var(--fs-lg); letter-spacing: 0; }
.diet-main .r2-comments-block .r2-block-line { opacity: 1; }

/* 記録一覧：並べ替え・期間の操作 */
.diet-listctrl { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin: 0 0 16px; }
.diet-listctrl-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* データページの期間切替：折り返さず1行＋横スクロール（スクロールバーは非表示） */
.diet-listctrl-grp.diet-listctrl-scroll { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.diet-listctrl-grp.diet-listctrl-scroll::-webkit-scrollbar { display: none; }
.diet-listctrl-grp.diet-listctrl-scroll > * { flex: 0 0 auto; }
.diet-listctrl-lbl { font-size: var(--fs-xs); font-weight: 800; color: var(--text3); margin-right: 2px; }
.diet-listctrl-month { display: inline-flex; align-items: center; gap: 6px; }
.diet-chip { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; line-height: 1.5; font-size: var(--fs-sm); font-weight: 700; color: var(--text2); border: 1.5px solid var(--text); background: var(--bg2); padding: 5px 12px; cursor: pointer; font-family: inherit; }
.diet-chip:hover { border-color: var(--accent); color: var(--accent); }
.diet-chip.on { background: var(--bg2); border-color: var(--accent); color: var(--accent); }
input.diet-chip { display: inline-block; cursor: text; }
/* グレー系ボタン（CSV出力・印刷）：背景のみグレー、枠と文字は黒 */
.diet-chip-gray { background: #e3e5e9; border-color: var(--text); color: var(--text); }
.diet-chip-gray:hover { background: #d4d7dd; border-color: var(--text); color: var(--text); }
/* 編集/保存ボタン（アクセント色）。.diet-chip の後に置いて上書きされないようにする */
.diet-chip-edit { background: var(--accent); border-color: var(--accent); color: #fff; }
.diet-chip-edit:hover { background: var(--accent); border-color: var(--accent); color: #fff; opacity: .9; }

/* 記録一覧：食事写真（4:3・スロット名を重ねて表示） */
.diet-rec-photos { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
.diet-rec-photo { position: relative; width: 92px; aspect-ratio: 4 / 3; border: 1px solid var(--text); background: var(--bg3); overflow: hidden; display: block; }
.diet-rec-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diet-rec-photo-slot { position: absolute; left: 0; bottom: 0; font-size: 10px; font-weight: 800; color: #fff; background: rgba(26,28,36,.82); padding: 1px 6px; line-height: 1.5; }
/* モバイル：指標は1行（横スクロール）、画像は3個表示＋横スクロールで1行に収める */
@media (max-width: 768px) {
  .diet-rec-metrics { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .diet-rec-metrics::-webkit-scrollbar { display: none; }
  .diet-rec-metrics .diet-metric { flex: 0 0 auto; }
  .diet-rec-photos { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .diet-rec-photos::-webkit-scrollbar { display: none; }
  .diet-rec-photo { flex: 0 0 calc((100% - 4px) / 3); width: auto; }
}

/* 食事スロットの色分け（朝=橙 / 昼=青 / 夕=紫 / 間食=緑） */
.diet-slot-b { background: #d97706; }
.diet-slot-l { background: #2563eb; }
.diet-slot-d { background: #7c3aed; }
.diet-slot-s { background: #059669; }

/* グラフ見出しの現在値＋期間増減（タイトル横・左寄せ） */
.diet-chart-now { flex: 0 0 auto; margin-left: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text3); white-space: nowrap; }
.diet-chart-now b { font-size: var(--fs-base); font-weight: 900; color: var(--text); }

/* 任意の期間（from〜to） */
.diet-customrange { display: flex; align-items: center; gap: 8px; margin: -8px 0 16px; flex-wrap: wrap; }
.diet-customrange input[type="date"] { border: 1.5px solid var(--text); background: var(--bg); padding: 7px 10px; font-family: inherit; font-size: var(--fs-sm); color: var(--text); }

/* グラフページ：血圧の朝/夜トグル */
.diet-bptoggle { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.diet-bptoggle button {
  border: 1.5px solid var(--text); background: var(--bg2); color: var(--text2);
  font-size: var(--fs-sm); font-weight: 700; font-family: inherit; padding: 5px 16px; cursor: pointer;
}
.diet-bptoggle button:hover { border-color: var(--accent); color: var(--accent); }
.diet-bptoggle button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 自己評価の表示（運動・食事） */
.diet-evallist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
/* 運動：種類名｜評価バッジ｜メモ の行。PC は2列で表示 */
.diet-evallist:not(.diet-mealeval) { display: grid; grid-template-columns: repeat(var(--ex-cols, 2), minmax(0, 1fr)); gap: 8px; }
.diet-evallist:not(.diet-mealeval) .diet-evalrow {
  display: flex; align-items: center; gap: 14px; min-width: 0; box-sizing: border-box;
  border: 1.5px solid var(--text); background: var(--bg2); padding: 9px 14px;
}
/* スマホは運動を2列固定 */
@media (max-width: 768px) {
  .diet-evallist:not(.diet-mealeval) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.diet-evallist:not(.diet-mealeval) .diet-eval-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.diet-eval-memo { flex: 0 0 auto; color: var(--text2); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
/* 食事：朝/昼/夕/間 を均等な4カードで（名前＝チップ＋大きな評価） */
.diet-mealeval { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.diet-mealeval .diet-evalrow {
  display: flex; flex: 1 1 0; min-width: 92px; flex-direction: column; align-items: center; gap: 8px;
  border: 1.5px solid var(--text); background: var(--bg2); padding: 12px 8px;
}
.diet-mealeval .diet-eval-name { font-size: var(--fs-sm); font-weight: 800; color: var(--text); }
.diet-mealeval .diet-eval-mark { width: 44px; height: 44px; font-size: 1.4rem; }
/* モバイル：食事評価の4カードを2段にせず1行に収める */
@media (max-width: 768px) {
  .diet-mealeval { flex-wrap: nowrap; gap: 6px; }
  .diet-mealeval .diet-evalrow { min-width: 0; padding: 10px 4px; }
  .diet-mealeval .diet-eval-name { font-size: var(--fs-xs); }
  .diet-mealeval .diet-eval-mark { width: 36px; height: 36px; font-size: 1.15rem; }
}
/* 評価バッジ（共通） */
.diet-eval-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border: 1.5px solid var(--text);
  font-size: 1rem; font-weight: 900; color: var(--text);
}
.diet-eval-mark.m4 { background: var(--accent); border-color: var(--accent); color: #fff; }
.diet-eval-mark.m3 { border-color: var(--accent); color: var(--accent); }
.diet-eval-mark.m2 { border-color: var(--text); color: var(--text3); }
.diet-eval-mark.m0 { border-color: var(--text); color: var(--text4); background: var(--bg3); }

/* 画像ライトボックス（クリックで拡大表示） */
.diet-lightbox { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.85); align-items: center; justify-content: center; padding: 24px; }
.diet-lightbox.open { display: flex; }
.diet-lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; display: block; }
.diet-lightbox-x { position: absolute; top: 10px; right: 16px; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }

/* 食事画像：基準は横3枚並び。4枚は縮小して常に1行に収める（折り返さない） */
.diet-meal-imgs { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 8px; }
.diet-meal-img { display: block; flex: 0 1 33.333%; min-width: 0; border: 1px solid var(--text); background: var(--bg3); }
.diet-meal-img img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: contain; display: block; }
/* スマホ：食事画像は2列・横いっぱい */
@media (max-width: 768px) {
  .diet-meal-imgs { flex-wrap: wrap; }
  .diet-meal-img { flex: 1 1 calc(50% - 4px); }
}
/* 食事本文（Markdown 描画） */
/* Markdown 本文：レビュー表示ページ（.md-content）と同じデザインに合わせる */
.diet-meal-body { font-size: var(--fs-base); line-height: 1.75; color: var(--text2); overflow-wrap: break-word; }
.diet-meal-body h1, .diet-meal-body h3, .diet-meal-body h4 {
  font-weight: 900; color: var(--text); border-left: 3px solid var(--accent);
  padding: 0 0 0 8px; background: none; border-radius: 0; letter-spacing: .02em; line-height: 1.3;
}
.diet-meal-body h2 {
  font-weight: 900; color: var(--accent); background: none; border-radius: 0;
  letter-spacing: .02em; line-height: 1.3; border-bottom: 2px solid var(--accent); padding-bottom: 4px;
}
.diet-meal-body h1 { font-size: var(--fs-xl);  margin: 30px 0 6px; }
.diet-meal-body h2 { font-size: var(--fs-lg);  margin: 14px 0 6px; }
.diet-meal-body h3 { font-size: var(--fs-base); font-weight: 800; margin: 12px 0 4px; }
.diet-meal-body h4 { font-size: var(--fs-base); font-weight: 700; margin: 10px 0 4px; }
.diet-meal-body p { margin: 0; }
.diet-meal-body p + p { margin-top: 2em; }
.diet-meal-body .md-line-gap { display: block; height: 0.8em; }
.diet-meal-body ul, .diet-meal-body ol { margin: 20px 0 20px 4.4em; padding: 0; }
@media (max-width: 768px) { .diet-meal-body ul, .diet-meal-body ol { margin-left: 2.2em; } }
.diet-meal-body li { margin: 2px 0; }
.diet-meal-body a { color: var(--accent); text-decoration: underline; }
.diet-meal-body a:hover { opacity: 0.8; }
.diet-meal-body strong, .diet-meal-body b { color: var(--accent); font-weight: 700; }
.diet-meal-body em { font-style: italic; }
.diet-meal-body img { max-width: 100%; width: auto; max-height: 380px; height: auto; display: block; margin: 8px 0; border: 1px solid var(--text); }


/* 食事の追加フォーム */
.diet-mealform-wrap { margin-top: 16px; }
.diet-mealform {
  margin-top: 14px; border: 1.5px solid var(--text); background: var(--bg2); padding: 16px;
}
.diet-mealform select.diet-input { height: 44px; }
.diet-mealform-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.diet-thumb { position: relative; width: 84px; height: 84px; border: 1px solid var(--text); }
.diet-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diet-thumb-x {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border: 1.5px solid var(--text); background: var(--bg2); color: var(--text);
  font-size: 14px; line-height: 1; cursor: pointer; border-radius: 0; font-family: inherit;
}
.diet-thumb-x:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.diet-mealform-msg { margin: 10px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-dark); }

/* 食事カードの操作（編集・削除） */
.diet-meal-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.diet-meal-actions .diet-meal-del { margin-left: 0; }
.diet-meal-editbtn {
  border: 1.5px solid var(--text); background: var(--bg2); color: var(--text3);
  font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; cursor: pointer; font-family: inherit;
}
.diet-meal-editbtn:hover { border-color: var(--accent); color: var(--accent); }

/* 食事・運動の追加ボタン（横並び） */
.diet-addbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.diet-addbtns .diet-menu-cta { width: auto; padding: 11px 22px; }
/* 運動ログのバッジ（食事＝赤に対し青で区別） */
.diet-ex-slot { background: #2563eb; }

/* 食事ポップアップ（やや広め） */
.diet-meal-modal { max-width: 560px; }

/* 写真添付（サムネ＋追加タイル） */
.diet-attach { display: flex; flex-wrap: wrap; gap: 8px; }
.diet-attach-add {
  width: 84px; height: 84px; border: 1.5px dashed var(--text); background: var(--bg);
  color: var(--text4); font-size: 1.6rem; line-height: 1; cursor: pointer; font-family: inherit;
}
.diet-attach-add:hover { border-color: var(--accent); color: var(--accent); }

/* 画像簡易編集（Cropper）モーダル */
.diet-crop-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(10,12,18,.72); display: none; }
.diet-crop-overlay.open { display: block; }
.diet-crop-modal {
  position: fixed; z-index: 1101; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: calc(100% - 28px); max-width: 640px; background: var(--bg2); border: 1.5px solid var(--text);
  display: none; max-height: calc(100vh - 28px); overflow-y: auto; overflow-x: hidden;
}
.diet-crop-modal.open { display: block; }
.diet-crop-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1.5px solid var(--text); }
.diet-crop-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1.5px solid var(--text); }
.diet-crop-barlabel { font-size: var(--fs-xs); font-weight: 700; color: var(--text3); margin-right: 2px; }
.diet-crop-barsep { width: 1px; height: 18px; background: var(--text); margin: 0 4px; }
.diet-crop-rbtn {
  border: 1.5px solid var(--text); background: var(--bg2); color: var(--text);
  font-size: var(--fs-xs); font-weight: 700; padding: 4px 9px; cursor: pointer; font-family: inherit;
}
.diet-crop-rbtn:hover { border-color: var(--accent); color: var(--accent); }
.diet-crop-rbtn.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.diet-crop-area { padding: 12px 14px; overflow: hidden; }
.diet-crop-area img { display: block; max-width: 100%; max-height: 56vh; }
/* Cropper.js コンテナがはみ出して横スクロールが出るのを抑止 */
.diet-crop-area .cropper-container { max-width: 100%; }

.diet-crop-foot { display: flex; gap: 10px; padding: 12px 14px; border-top: 1.5px solid var(--text); }
.diet-btn.secondary { background: var(--bg2); color: var(--accent); }

/* 記録入力ページ（edit.php） */
.diet-editcard { border: 1.5px solid var(--text); background: var(--bg2); padding: 20px 22px; }

/* その日の記録を削除するボタン */
.diet-deleteform { margin-top: 10px; text-align: right; }
.diet-btn-delete {
  border: 1.5px solid var(--text); background: var(--bg2); color: var(--text3);
  font-size: var(--fs-sm); font-weight: 700; font-family: inherit; padding: 8px 16px; cursor: pointer;
}
.diet-btn-delete:hover { border-color: #b91c1c; color: #b91c1c; }

/* 画面追従の保存バー（変更があるときだけ表示。記録入力ページ） */
.diet-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
  display: none; align-items: center; justify-content: center; gap: 18px;
  padding: 12px 20px; background: #facc15; border-top: 1.5px solid #eab308;
}
.diet-savebar.is-dirty { display: flex; }
.diet-savebar-msg { font-size: var(--fs-sm); font-weight: 800; color: #1a1c24; }
.diet-savebar-btn {
  padding: 10px 40px; background: var(--accent); color: #fff; border: none;
  font-size: var(--fs-base); font-weight: 800; font-family: inherit; cursor: pointer;
}
.diet-savebar-btn:hover { background: var(--accent-dark); }

/* 記録入力ページ：データ公開の注意（タイトル下） */
.diet-public-note { margin: 6px 0 0; font-size: var(--fs-sm); font-weight: 700; color: #fca5a5; }
/* タイトル右端の「記録ページ」ボタン */
.diet-titlebar-flex { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.diet-titlebar-go { flex: 0 0 auto; border: 1.5px solid rgba(255,255,255,.55); color: #fff; font-weight: 700; font-size: var(--fs-sm); padding: 8px 16px; white-space: nowrap; }
.diet-titlebar-go:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }

/* 入力グループ枠（身体／血圧）：区切り線で囲んでまとまりを出す */
.diet-group { position: relative; border: 1.5px solid var(--text); border-radius: 0; min-width: 0; margin: 0 0 16px; padding: 12px 16px; }
.diet-group-title { font-size: var(--fs-sm); font-weight: 800; color: var(--text2); padding: 0 8px; }
.diet-group .diet-field-row { margin: 0; }
.diet-group .diet-field { margin-bottom: 0; }
/* 運動：設定済みの種類を全件表示。各行＝種類名／評価／メモ */
.diet-exlist { display: flex; flex-direction: column; gap: 10px; }
.diet-exrow { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.diet-exname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.diet-exrow .diet-ex-rate { flex: 0 0 auto; }
.diet-setlink-wrap { margin: 4px 0 -8px; text-align: right; }
.diet-setlink { font-size: var(--fs-sm); font-weight: 700; color: var(--accent); text-decoration: underline; }
/* PC：運動の評価欄を横2列に */
@media (min-width: 769px) {
  .diet-exlist { flex-direction: row; flex-wrap: wrap; gap: 10px 0; }
  .diet-exlist .diet-exrow { flex: 0 0 50%; min-width: 0; box-sizing: border-box; }
  .diet-exlist .diet-exrow:nth-child(odd) { padding-right: 16px; }
  .diet-exlist .diet-exrow:nth-child(even) { border-left: 1px solid var(--text); padding-left: 16px; }
}

/* 食事：1行1列＝名前｜評価｜画像・コメント添付｜登録プレビュー */
.diet-meallist { display: flex; flex-direction: column; gap: 10px; }
.diet-mealrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.diet-mealrow-name { flex: 0 0 auto; min-width: 42px; font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.diet-meal-attach { border: 1.5px solid #2563eb; background: #fff; color: #2563eb; font-size: var(--fs-xs); font-weight: 700; font-family: inherit; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.diet-meal-attach:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
/* 登録プレビュー（小さい画像＋カロリー＋コメント） */
.diet-meal-prev { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.diet-meal-previmg { flex: 0 0 auto; width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--text); display: block; }
.diet-meal-prevcal { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 800; color: var(--accent); }
.diet-meal-prevtext { flex: 1 1 auto; min-width: 0; font-size: var(--fs-xs); color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diet-meal-prevnone { font-size: var(--fs-xs); color: var(--text3); }
/* モバイル：食事の各行の間に区切り線。「未登録」は非表示 */
@media (max-width: 768px) {
  .diet-meallist { gap: 0; }
  .diet-meallist .diet-mealrow { padding: 12px 0; border-top: 1px solid var(--text); }
  .diet-meallist .diet-mealrow:first-child { border-top: 0; padding-top: 0; }
  .diet-meal-prevnone { display: none; }
  .diet-meal-prev.is-empty { display: none; }
  /* 数値入力欄の高さを圧縮 */
  .diet-editcard .diet-input { height: 32px; padding: 0 10px; }
  .diet-editcard .diet-textarea { height: auto; padding: 8px 10px; }
  /* 血圧：朝・夜のラベルを入力欄と同じ行に（高さ圧縮） */
  .diet-editcard .diet-bp-pair .diet-field { display: flex; align-items: center; gap: 10px; }
  .diet-editcard .diet-bp-pair .diet-field > label { margin-bottom: 0; flex: 0 0 auto; }
  .diet-editcard .diet-bp-pair .diet-bp-row { flex: 1; min-width: 0; }
}

/* 血圧（朝・夜）：PC は横並び（diet-field-row）、モバイルは縦積み */
@media (max-width: 640px) { .diet-bp-pair { flex-direction: column; } }

/* PC：基本入力欄は各項目を内容幅で左詰めし、数値ボックスに単位を密着させる
   （等幅3分割だと箱が広がり単位が離れて見にくいため） */
@media (min-width: 641px) {
  .diet-editcard .diet-field-row { gap: 12px 18px; flex-wrap: nowrap; }
  .diet-editcard .diet-field-row .diet-field { flex: 0 1 auto; min-width: 0; }
  .diet-editcard .diet-inline { gap: 6px; }
  .diet-editcard .diet-inline .diet-input { width: 84px; text-align: left; }
  .diet-editcard .diet-bp-row { gap: 6px; }
  .diet-editcard .diet-bp-row .diet-input { width: 80px; }
}

/* PC：入力グループ（身体／血圧）を横一列に、表示ページはチャート左半分＋右に体重等 */
@media (min-width: 769px) {
  .diet-groups { display: flex; gap: 18px; align-items: flex-start; }
  .diet-groups .diet-group { flex: 1 1 auto; min-width: 0; margin-bottom: 16px; }

  /* 運動グリッドと同じ grid（1fr 1fr・gap 8px）で列境界を揃える。両カラムは同じ高さ（下端を揃えてガタつきを防ぐ）。 */
  .diet-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  .diet-overview-chart { min-width: 0; }
  .diet-overview-chart .diet-chart-card { height: 100%; min-height: 0; display: flex; flex-direction: column; }
  /* チャートは自分の縦横比（svg 1000:420 の intrinsic）でカード幅から高さが決まり、チャートカードの高さを確定させる。
     右カラムはこの高さに合わせて伸びるだけ（自分からは伸びない）。これで余白・縮小・ガタつきが出ない。 */
  .diet-overview-chart .diet-chart { width: 100%; }
  .diet-overview-chart .diet-chart svg { width: 100%; height: auto; display: block; }
  /* 右カラム：表（＋血圧）をチャートカードの高さに合わせて伸ばす。表自身は高さを主張しない（min-height:0）。 */
  .diet-overview-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  .diet-overview-side .diet-summary { flex: 1 1 auto; margin: 0; min-height: 0; display: flex; flex-direction: column; }
  /* 表を CSS グリッド化し、ヘッダ以外（体重・体脂肪率・BMI・ウエスト）の各データ行を確実に均等高さ（1fr）にする。
     行数（BMI 有無）に関わらず data 行は等分。罫線は gap(1px)＋外枠 border で表現。
     高さは（height:100% ではなく）フレックスで親を埋める＝高さ未確定時の過大計算を防ぐ。 */
  .diet-overview-side .diet-sumtable {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 24% repeat(4, 1fr);
    grid-template-rows: min-content;   /* ヘッダ行は内容なり */
    grid-auto-rows: minmax(0, 1fr);    /* データ行は均等（minmax(0,...) で高さ未確定時の膨張を防ぐ） */
    gap: 1px;
    background: var(--text);           /* gap から見える色＝内側の罫線 */
    border: 1.5px solid var(--text);
  }
  .diet-overview-side .diet-sumtable thead,
  .diet-overview-side .diet-sumtable tbody,
  .diet-overview-side .diet-sumtable tr { display: contents; }
  .diet-overview-side .diet-sumtable th,
  .diet-overview-side .diet-sumtable td {
    border: 0; margin: 0; width: auto;   /* tbody th の width:24% を打ち消し、グリッド列いっぱいに */
    padding: 2px 8px; line-height: 1.1;  /* 行の上下余白を詰めて表を低くする */
    display: flex; align-items: center; justify-content: center;
  }
  .diet-overview-side .diet-sumtable td { background: var(--bg2); }
  .diet-overview-side .diet-sumtable thead th { padding-top: 8px; padding-bottom: 8px; }  /* 見出し行は上下に少し余白 */
  .diet-overview .diet-block-head { margin-bottom: 8px; }
  .diet-overview .diet-chart-card { padding: 12px; }

  /* 食事画像が1〜2枚のときは、メモを画像の右に表示 */
  .diet-meal.few-imgs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 14px; }
  .diet-meal.few-imgs .diet-meal-head { flex: 0 0 100%; }
  .diet-meal.few-imgs .diet-meal-imgs { flex: 0 0 auto; margin-bottom: 0; }
  .diet-meal.few-imgs .diet-meal-img { flex: 0 0 auto; }
  .diet-meal.few-imgs .diet-meal-img img { width: 200px; }
  .diet-meal.few-imgs .diet-meal-body { flex: 1 1 220px; min-width: 0; }
}

/* 運動：4段階評価＋自由記入を1行に */
.diet-exercise { display: flex; align-items: center; gap: 10px; }
.diet-ex-rate { display: flex; gap: 4px; flex: 0 0 auto; }
.diet-ex-opt { cursor: pointer; line-height: 0; }
.diet-ex-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.diet-ex-opt span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1.5px solid var(--text); background: var(--bg2);
  font-size: .88rem; font-weight: 800; color: var(--text3);
}
.diet-ex-opt:hover span { border-color: var(--accent); color: var(--accent); }
.diet-ex-opt input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.diet-exercise input[type="text"] { flex: 1; min-width: 0; }
.diet-datepick { flex: 1; text-align: center; margin: 0; }
.diet-datepick input[type="date"] {
  height: 36px; padding: 0 10px; border: 1.5px solid var(--text); background: var(--bg2);
  font-family: inherit; font-size: var(--fs-base); font-weight: 700; color: var(--text);
}
.diet-datepick input[type="date"] {
  height: 36px; padding: 0 10px; border: 1.5px solid var(--text); background: var(--bg2);
  font-family: inherit; font-size: var(--fs-base); font-weight: 700; color: var(--text);
}
.diet-edit-cta { margin-top: 14px; }

/* ============================================================
   グラフ
   ============================================================ */
.diet-range { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.diet-range a {
  padding: 7px 14px; border: 1.5px solid var(--text); background: var(--bg2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.diet-range a:hover { border-color: var(--accent); color: var(--accent); }
.diet-range a.on { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

.diet-gstats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.diet-gstats .diet-stat { flex: 1; min-width: 70px; }

.diet-chart-card { border: 1.5px solid var(--text); background: var(--bg2); padding: 16px; }
.diet-chart { width: 100%; }
.diet-chart svg { width: 100%; height: auto; display: block; }
.diet-chart-empty { padding: 28px 10px; text-align: center; color: var(--text3); font-size: var(--fs-sm); }
.diet-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: var(--fs-xs); color: var(--text3); font-weight: 700; }
/* チャート下部：凡例（左）＋期間切り替えボタン（右下・省スペース） */
.diet-chart-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.diet-chart-foot .diet-legend { margin-top: 0; }
.diet-chart-range { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.diet-chart-range a {
  padding: 2px 8px; border: 1px solid var(--text); background: var(--bg2);
  font-size: .66rem; font-weight: 700; color: var(--text3); white-space: nowrap; line-height: 1.5;
}
.diet-chart-range a:hover { border-color: var(--accent); color: var(--accent); }
.diet-chart-range a.on { border-color: var(--accent); background: var(--accent); color: #fff; }
/* モバイルでは線の説明（凡例）を非表示にしてスペースを確保 */
@media (max-width: 640px) {
  .diet-legend { display: none; }
}
.diet-legend i {
  display: inline-block; width: 18px; height: 0;
  border-top: 3px solid; vertical-align: middle; margin-right: 6px;
}