/* SYS0010 body-shape-pwa — アプリ共通スタイル */
:root{
  --bg:#f6f7f9; --panel:#fff; --ink:#1c2129; --muted:#5b636f;
  --line:#dfe3e8; --good:#1f8a55; --warn:#b8821a; --neg:#c0392b;
  /* ブランド色（2026-09-05 デザイン変更）。参照＝セージグリーンの落ち着いた配色。
     --brand は面・アイコン用。白地の小さい文字にはコントラストが足りないので、
     文字・線には濃い --accent を使う（4.5:1 を満たす） */
  --brand:#7d9a74; --brand-soft:#eef2ec; --accent:#4d6547;
  /* 予定と実績の色（2026-09-29 ユーザー指示）。★ 基調のセージグリーンを崩さないよう彩度を抑え、
     予定＝青・実績＝橙の【補色】で分ける（色だけに頼らず「予定」「実績」の字も必ず添える）。
     読みやすさ（実測）：白地に #46698f＝5.71:1、#a35a24＝5.19:1。
     淡い面の上の見出しでも --plan＝5.07:1（#edf2f8 上）、--act＝4.66:1（#fbf1e7 上）で、どれも 4.5:1 以上 */
  --plan:#46698f; --plan-soft:#edf2f8; --plan-line:#c3d3e6;
  --act:#a35a24;  --act-soft:#fbf1e7;  --act-line:#ecc9a8;
  --bar-h:58px; --tab-h:62px;
  /* ノッチ・ホームインジケータの逃げ。★ env() を直接書かず変数に寄せる——
     プレビューで値を差し替えて **実機（PWA）と同じ条件を再現**できるようにするため。
     ブラウザでは 0 だが、ホーム画面から起動した PWA では下が 34px 前後になる */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.6; font-size:15px;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}

/* ── トップバー ── */
/* 白地・黒文字。見出しは「細く・字間を広く・大文字」のタイポグラフィ（2026-09-05・参照画像） */
.appbar{
  position:fixed; top:0; left:0; right:0; height:var(--bar-h);
  background:var(--panel); color:var(--ink); display:flex; align-items:center; gap:8px;
  padding:0 18px; z-index:20; border-bottom:1px solid var(--line);
  padding-top:var(--sat); height:calc(var(--bar-h) + var(--sat));
}
#appbar-title{
  /* 参照画像の「COHESION」の作り：グロテスク系・細め・大文字・字間を大きく開ける。
     太くせず、字間で見出しらしさを出す。iOS には Helvetica Neue があるので先頭に置く */
  font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:19px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.1;
  /* 字間を開けた分の右余白を打ち消す（最後の字の後ろに隙間が残るため） */
  margin-right:-.2em;
  flex:1; min-width:0; white-space:nowrap; overflow:hidden;
}
.appbar .back{background:none;border:none;color:var(--ink);font-size:22px;cursor:pointer;padding:0 2px 0 0;line-height:1}
.appbar .spacer{display:none}
.appbar .rank{font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;background:var(--brand-soft);color:var(--accent);flex:none;letter-spacing:.02em}
/* 日本語の見出し（メニュー名）は同じ字間だと間延びする */
#appbar-title.ja{letter-spacing:.06em;font-size:21px;font-weight:500}
@media (max-width:360px){ #appbar-title{font-size:17px;letter-spacing:.16em} }

/* ── メイン領域（バーとタブの間） ── */
main{
  position:fixed; left:0; right:0;
  top:calc(var(--bar-h) + var(--sat));
  bottom:calc(var(--tab-h) + var(--sab));
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px;
}
.screen{display:none}
.screen.active{display:block}

/* ── 下部2タブ ── */
/* ★ 高さは【var(--tab-h) に safe-area を足す】。box-sizing:border-box なので、
   足さずに padding-bottom だけ入れると **中身の領域がその分だけ潰れる**
   （PWA でアイコンが消えて余白だけ残っていた・2026-09-12 ユーザー指摘）。
   上の appbar は最初から calc で書かれており、下だけ抜けていた。
   （かつては .subtab-btm の bottom とも揃えていた。そちらは 2026-09-16 に廃止） */
.tabbar{
  position:fixed; left:0; right:0; bottom:0;
  height:calc(var(--tab-h) + var(--sab));
  display:flex; background:var(--panel); border-top:1px solid var(--line); z-index:20;
  padding-bottom:var(--sab);
}
.tabbar button{
  position:relative; flex:1; background:none; border:none; color:var(--muted);
  font-size:10.5px; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; padding:6px 2px;
  font-family:inherit;
}
.tabbar button .ic{width:25px;height:25px;display:block}
.tabbar button .lb{line-height:1;letter-spacing:.01em}
/* 選んでいないタブは線画、選んでいるタブは塗り（添付の作り） */
.tabbar button .ic-solid{display:none}
.tabbar button.on .ic-line{display:none}
.tabbar button.on .ic-solid{display:block}
.tabbar button.on{color:var(--ink); font-weight:700}
.tabbar button.on .ic{color:var(--brand)}
/* 選んでいるタブの上に緑の帯 */
.tabbar button.on::before{
  content:""; position:absolute; top:0; left:16%; right:16%; height:3px;
  background:var(--brand); border-radius:0 0 3px 3px;
}

/* ── レポート一覧カード ── */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:10px; cursor:pointer;
}
.card:active{background:#f0f3f7}
.card .r1{display:flex; align-items:center; gap:8px}
.card .week{font-weight:800}
.card .sub{color:var(--muted); font-size:12.5px; margin-top:3px}
.rank-b{background:var(--good)} .rank-c{background:var(--warn)} .rank-d,.rank-e{background:var(--neg)} .rank-a{background:var(--accent)}
.rankpill{color:#fff; font-weight:800; border-radius:6px; padding:1px 9px; font-size:13px}

/* ── レポート詳細（markdown） ── */
.report-body{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px}
.report-body h1{font-size:20px} .report-body h2{font-size:17px;border-bottom:1px solid var(--line);padding-bottom:4px;margin-top:22px}
.report-body h3{font-size:15px}
.report-body table{width:100%;border-collapse:collapse;font-size:13px;display:block;overflow-x:auto}
.report-body th,.report-body td{border:1px solid var(--line);padding:6px 8px;text-align:left;white-space:nowrap}
.report-body th{background:#eef1f5}
.report-body img{max-width:100%;height:auto;border-radius:8px}
.report-body code{background:#eef1f5;padding:1px 5px;border-radius:4px;font-size:12px}

/* ── 写真撮影画面 ── */
.cam-controls{display:flex;flex-direction:column;gap:10px}
.seg{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.seg .lbl{align-self:center;font-size:12px;color:var(--muted);margin-right:2px}
.seg button{
  font-size:13px;padding:5px 14px;border-radius:20px;border:1px solid var(--line);
  color:var(--muted);background:var(--panel);cursor:pointer;
}
.seg button.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.seg button.done{border-color:var(--good);color:var(--good)}
.seg button.done.on{background:var(--good);border-color:var(--good);color:#fff}

.viewport{
  position:relative; width:100%; aspect-ratio:3/4; max-height:60vh;
  background:#222a33; border-radius:12px; overflow:hidden; margin:4px 0;
  display:flex; align-items:center; justify-content:center;
}
.viewport video,.viewport canvas,.viewport .count{position:absolute; font-size:64px; font-weight:800; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6)}
/* プレビューは【保存されるものと同じ範囲】を出す。
   大きさを指定しないと映像の実寸（1440×1080 等）のまま中央だけが見え、
   撮影中だけ拡大して見えて仕上がりが想像できなくなる。
   枠の縦横比は映像に合わせて JS が入れるので、contain でも余白は出ない。 */
.viewport video{inset:0;width:100%;height:100%;object-fit:contain;background:#000}

.cam-actions{display:flex;align-items:center;justify-content:center;gap:18px}
.shutter{width:64px;height:64px;border-radius:50%;background:#fff;border:5px solid var(--accent);cursor:pointer}
.shutter:disabled{opacity:.4}
.btn{padding:9px 16px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:14px;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.btn.ghost{color:var(--muted)}

.savebar{background:#eef7f1;border:1px solid #bfe3cd;border-radius:9px;padding:8px 12px;font-size:12.5px;color:var(--good)}
.hint{color:var(--muted);font-size:12px;text-align:center}
.tr-listhead .hint{text-align:left}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* ── サインインゲート／状態表示 ── */
.gate{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;z-index:40}
.gate h1{font-size:22px;margin:0}
.gate p{color:var(--muted);margin:0;max-width:320px}
/* ★ 知らせは【画面の上】に出す（2026-09-22）。以前はタブバーの上（下端）に出していたが、
   入力欄に焦点を当てると数字キーパッドが下半分を覆い、**知らせが見えないまま消えていた**。
   「先に身長を入れてください」を出しつつ入力欄へ focus する経路がまさにそれで、
   利用者からは「何も出ない」ように見える。下はキーボードとタブバーが取り合う場所なので、
   上端（アプリバーに重ねる）へ移す。
   ★ z-index は 70。全画面で重なるもの（.gi-cam の撮影・.tm-wrap のタイマー）が
   どちらも 60 で、同じ値だと DOM の順で負ける。**撮影中の知らせ**（「撮影が途中で
   止まりました」等）はその上に出ないと意味が無いので、明示的に上へ置く */
.toast{position:fixed;left:50%;top:calc(var(--sat) + 10px);transform:translateX(-50%);background:#20262f;color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;z-index:70;max-width:90%;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error{color:var(--neg);font-size:13px}

/* ── 検証画面（P03-05.001 撮影検証／Phase 1）── */
.ver{display:flex;flex-direction:column;gap:10px}
.ver .viewport{aspect-ratio:3/4;max-height:46vh}
.ver .overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ver .vhud{
  position:absolute;top:6px;left:8px;right:8px;display:flex;justify-content:space-between;
  font-size:11px;color:#dfe6ee;text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;
}
.vscore{
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;
}
.vscore .big{font-size:38px;font-weight:800;color:var(--accent);line-height:1}
.vscore .raw{font-size:12px;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace}
.vrow{display:flex;gap:8px}
.vrow .btn{flex:1}
.vrow .btn:disabled{opacity:.45}
.vtbl{width:100%;border-collapse:collapse;font-size:12px;background:var(--panel)}
.vtbl th,.vtbl td{border:1px solid var(--line);padding:5px 6px;text-align:center}
.vtbl th{background:#eef1f5;font-weight:700}
.vverdict{
  background:#eef7f1;border:1px solid #bfe3cd;border-radius:9px;padding:9px 12px;
  font-size:12.5px;color:var(--good);
}
.vverdict.ng{background:#fdecea;border-color:#f0b7b1;color:var(--neg)}
.vverdict:empty{display:none}
.vcsv{
  width:100%;height:110px;border:1px solid var(--line);border-radius:9px;padding:8px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:var(--muted);
  background:var(--panel);resize:vertical;
}
.ver .hint.mono{font-size:10.5px;word-break:break-all;text-align:left}
.vtblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 人型ガイド（ピクトグラム）。判定の範囲に合わせて全身／上半身を出し分ける */
.ver .silfig{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.ver .vhud span{background:rgba(0,0,0,.45);border-radius:6px;padding:2px 8px}
.ver .vhud{left:10px;right:10px}

/* ── 撮影画面 Phase 2（型・傾き・連写・候補）── */
.cam-step{display:flex;flex-direction:column;gap:10px}
.tiltbox{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;font-size:13px;text-align:center;
}
.tiltbox .ok{color:var(--good);font-weight:700}
.tiltbox .ng{color:var(--warn);font-weight:700}
.tiltbox .mut{color:var(--muted);font-size:12px}
.pickimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.picks{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.picks .pick{
  position:relative;flex:0 0 64px;height:80px;border-radius:8px;overflow:hidden;
  border:2px solid var(--line);background:#222a33;cursor:pointer;
}
.picks .pick.on{border-color:var(--accent)}
.picks .pick img{width:100%;height:100%;object-fit:cover}
.picks .pick span{
  position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;
  font-size:10px;text-align:center;padding:1px 0;
}
#cam-shoot .silfig{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
#cam-shoot .overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#cam-shoot .vhud{
  position:absolute;top:6px;left:10px;right:10px;display:flex;justify-content:space-between;
  font-size:11px;color:#dfe6ee;pointer-events:none;
}
#cam-shoot .vhud span{background:rgba(0,0,0,.45);border-radius:6px;padding:2px 8px}
#cam-shoot .vhud span:empty{background:none}

.tiltbox.hidden{display:none !important}

/* 人型シルエットは【立ち位置の目安】。骨格のガイドが出たら役目が終わるので薄くする */
.silfig{transition:opacity .25s}
.silfig.faded{opacity:.18}

/* 撮影ガイドの凡例（白＝合わせる形／緑＝いまの自分） */
.glegend{
  display:flex;gap:14px;justify-content:center;align-items:center;
  margin:6px 0 0;font-size:11.5px;color:var(--muted);
}
.glegend i{
  display:inline-block;width:16px;height:3px;border-radius:2px;
  margin-right:5px;vertical-align:middle;
}
.glegend .gw{background:rgba(255,255,255,.85);box-shadow:0 0 0 1px var(--line)}
.glegend .gg{background:rgba(92,225,166,.95)}
.glegend .ga{background:rgba(255,176,32,.95)}

/* ── スタンプ編集（SC-03e）── */
/* touch-action:none にしないと、指で動かすたびに画面ごとスクロールしてしまう */
.stampcv{
  display:block;width:100%;border-radius:12px;background:#000;
  touch-action:none;-webkit-user-select:none;user-select:none;
}
.stamprow{display:flex;gap:8px;margin-top:10px}
.stamprow .btn{flex:1}
.emojis{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.emo{
  width:44px;height:44px;border-radius:10px;cursor:pointer;
  background:var(--panel);border:1.5px solid var(--line);
  font-size:22px;line-height:1;font-family:inherit;
}

/* ── 変遷動画（SC-05）── */
.moviecv{display:block;width:100%;border-radius:12px;background:#000}
/* 共有シートが使えない端末向け。長押しで保存できるように画面へ出す */
.movieout{margin-top:10px}
.movieout.hidden{display:none !important}
.movierow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:6px 0}
.movierow label{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted)}
.movierow select{
  padding:6px 8px;border-radius:8px;font-family:inherit;font-size:13px;
  background:var(--panel);border:1.5px solid var(--line);color:var(--ink);
}
/* ポーズカードの「変遷を見る」。写真が2枚以上あるときだけ出る */
.posecard .pv{
  display:inline-block;margin-top:4px;padding:3px 8px;border-radius:12px;
  background:rgba(31,95,191,.12);color:var(--accent);font-size:11px;font-weight:700;
}

/* ── 目的タブ（P03-05.002）──
   押しても画面は遷移せず、下のポーズカードだけが差し替わる */
.ptabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;-webkit-overflow-scrolling:touch}
.ptab{
  flex:0 0 auto;padding:8px 14px;border-radius:16px;cursor:pointer;
  background:var(--panel);border:1.5px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:13px;font-weight:700;white-space:nowrap;
}
.ptab.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── ポーズカード（プリクラの背景選択のような見せ方）──
   参考画像（imageUrl）が入ればシルエットと差し替わる。レイアウトは共通 */
.poses{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.posecard{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  background:var(--panel);border:2px solid var(--line);border-radius:12px;
  padding:10px;cursor:pointer;font-family:inherit;
}
.posecard.on{border-color:var(--accent)}
.posecard.picking{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,95,191,.18)}
.posecard .pa{
  display:flex;align-items:center;justify-content:center;
  height:118px;margin-bottom:6px;border-radius:8px;
  background:rgba(127,127,127,.10);overflow:hidden;
}
.posefig{height:104px;width:auto;color:rgba(127,127,127,.45)}
.posecard.on .posefig{color:var(--accent);opacity:.55}
img.posefig{object-fit:contain;max-width:100%}
.posecard .pt{font-size:15px;font-weight:800;color:var(--ink)}
.posecard .pd{font-size:11.5px;color:var(--muted);line-height:1.45}
.posecard .pm{font-size:11px;color:var(--muted)}
.posecard .ps{font-size:11px;color:var(--accent);font-weight:700;margin-top:2px}

/* ── 撮り方（2つ以上あるときだけ出る）── */
.methods{
  display:flex;flex-direction:column;gap:8px;margin-top:12px;
  padding:12px;border-radius:12px;border:1.5px solid var(--accent);
  background:rgba(31,95,191,.06);
}
.methods.hidden{display:none !important}
.methods .mlbl{font-size:12px;font-weight:800;color:var(--accent)}
.mbtn{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  background:var(--panel);border:1.5px solid var(--line);border-radius:10px;
  padding:10px 12px;cursor:pointer;font-family:inherit;
}
.mbtn .mt{font-size:14px;font-weight:800;color:var(--ink)}
.mbtn .md{font-size:11.5px;color:var(--muted);line-height:1.45}

/* ── トレーニング（SC-06 部位一覧 / SC-07 セット入力・P03-05.003）── */
#tr-list,#tr-entry{padding:2px 0 8px}
.tr-part{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:5px 0;overflow:hidden}
.tr-head{
  width:100%;display:grid;grid-template-columns:18px 1fr auto 84px;align-items:center;gap:10px;
  background:none;border:none;padding:13px 12px;font-size:15px;color:var(--ink);text-align:left;cursor:pointer;
}
.tr-caret{color:var(--muted);font-size:12px}
.tr-name{font-weight:700}
.tr-days{font-size:17px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.tr-days.none{color:var(--muted);font-weight:600}
.tr-days.today{font-size:10.5px;font-weight:800;color:#4b7f52;letter-spacing:.02em;white-space:nowrap}
/* 棒の代わりに出す「本日実施済み」。棒そのものは出さない（0日ぶんの棒は何も伝えない） */
.tr-bar.done{
  background:none; height:auto; line-height:1.2; text-align:right; white-space:nowrap;
  font-size:10.5px; font-weight:800; color:#4b7f52; letter-spacing:.02em;
}
.tr-bar{display:block;height:8px;background:var(--line);border-radius:4px;overflow:hidden}
/* 未実施（—）の行は帯そのものを見せない。列は残す（見出しの桁を揃えるため） */
.tr-bar.off{background:none}
.tr-bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.tr-menus{border-top:1px solid var(--line);padding:4px 0 6px}
.tr-menu{
  display:block;width:100%;background:none;border:none;border-bottom:1px solid var(--line);
  padding:12px 12px 12px 30px;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;
}
.tr-menu:last-child{border-bottom:none}
.tr-menu::before{
  content:""; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--brand); margin-right:10px; vertical-align:2px;
}

.tr-last{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px}
/* 前回の見出し。右端に「前回分をコピー」を置く（R-42） */
.tr-lhead{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12.5px; color:var(--muted); margin-bottom:6px;
}
.tr-copylast{
  flex:none; cursor:pointer; font-family:inherit;
  font-size:11.5px; font-weight:700; color:var(--accent);
  background:#fff; border:1px solid var(--brand); border-radius:999px; padding:5px 11px;
}
.tr-copylast:active{background:var(--brand-soft)}
.tr-lsets{margin:0;padding:0;list-style:none;font-size:13.5px}
.tr-lsets li::before{content:""}
.tr-last li{padding:1px 0;color:var(--ink)}
.tr-lmemo{color:var(--muted);font-size:12px;margin-left:8px}
.tr-sets-head{
  display:grid;grid-template-columns:44px 1fr 1fr 1.2fr;gap:6px;
  font-size:11.5px;color:var(--muted);padding:0 4px 4px;
}
.tr-set{display:grid;grid-template-columns:44px 1fr 1fr 1.2fr;gap:6px;align-items:center;margin-bottom:6px}
.tr-no{text-align:center;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tr-f{display:flex;align-items:center;gap:3px}
.tr-f span{font-size:12px;color:var(--muted)}
.tr-u{font-size:12px;color:var(--muted)}
/* 単位の「kg」はボタン。タップで「自重」に切り替わる（UAT 2026-09-05） */
.tr-unit{
  font-size:11.5px;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:4px 6px;
  min-width:42px;cursor:pointer;font-family:inherit;
  white-space:nowrap;   /* 「自重」が2行に折れるのを防ぐ */
}
.tr-unit.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
/* iOS はフォント 16px 未満の入力欄でズームするため 16px を下回らせない */
.tr-set input{
  width:100%;min-width:0;font-size:16px;padding:8px 6px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);
}
.tr-set input[type=number]{text-align:right}
.tr-set input:disabled{background:var(--bg);color:var(--muted)}
/* 選んでいる行（行削除・コピーの対象） */
.tr-set.sel{background:var(--brand-soft);border-radius:10px;
  /* 内側の影は入力欄に覆われて途切れる。outline は子の上に描かれるので途切れない */
  outline:2px solid var(--brand); outline-offset:-2px}
.tr-actions{display:flex;align-items:center;gap:6px;margin-top:2px}
.tr-rowops{display:flex;gap:6px}
.tr-rowops .btn{font-size:12px;padding:6px 10px}
.tr-rowops .btn:disabled{opacity:.4}
#tr-add{margin-left:auto}
.tr-save{margin-top:14px}
.tr-save .btn{width:100%;padding:13px}
/* ══════════════════════════════════════════════════════
   P03-05.004 — プランと、トレーニング記録の閲覧・修正
   ══════════════════════════════════════════════════════ */

/* ── 本日の実績（22 §SC-06・P03-05.008 R-6）── 1行に収める。内訳は出さない ── */
.tr-today-box{
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:6px 12px 6px 6px; margin:0 0 10px;
}
.tr-meter{flex:none}
.tr-today-num{min-width:0; line-height:1.35}
.tr-today-lb{display:block; font-size:11px; color:var(--muted)}
.tr-today-num b{display:block; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.tr-today-num b small{font-size:11px; font-weight:700; color:var(--muted)}
.tr-today-sub{display:block; font-size:11px; color:var(--muted)}
.tr-goal-btn{
  display:block; background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  font-size:11.5px; font-weight:700; color:var(--accent);
}

/* ── 有酸素の入力・消費カロリー欄（22 §SC-13・P03-05.008 R-15/R-16）──
   ★ 単位は入力欄の【外】に固定する。数字を打っても消えない。
     プレースホルダにすると、入力中に何の数字か分からなくなる。 */
.tr-cardio{margin:10px 0 0}
.tr-crow{display:flex; gap:10px}
/* 距離と時間は 1：1（ユーザー指示 2026-09-11） */
.tr-crow .tr-cfield{flex:1 1 0; min-width:0}
.tr-cfield{display:block; margin:0 0 10px}
.tr-clb{display:block; font-size:11.5px; color:var(--muted); margin:0 0 4px}
.tr-cin{
  display:flex; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.tr-cin input{
  flex:1; min-width:0; border:none; background:none; font:inherit; font-size:15px;
  padding:10px 10px; color:var(--ink);
}
.tr-cin input:focus{outline:none}
.tr-cin:focus-within{border-color:var(--brand)}
.tr-cu{flex:none; padding:0 10px; font-size:12px; color:var(--muted)}

/* 記録のカードに添える消費カロリー（入れた記録にだけ出す） */
.tr-ckcal{float:right; font-size:11.5px; font-weight:700; color:var(--accent)}

/* ── セットの記録（22 SC-14）── */
.tr-setrec-wrap{padding:8px 10px 10px; display:flex; gap:8px}
.tr-setrec{width:100%}
.tr-chk-head{font-size:11.5px;color:var(--muted);margin:12px 0 6px}
.tr-chk{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; margin-bottom:6px; font-size:14px;
}
.tr-chk .tr-cb{width:20px;height:20px;flex:none;accent-color:var(--brand)}
.tr-chk-nm{flex:1;min-width:0;font-weight:700;color:var(--ink)}
.tr-chk-t{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* 外した種目は薄くする（何を飛ばしたか見て分かるように） */
.tr-chk:has(.tr-cb:not(:checked)){opacity:.5}

/* ── 設定画面（22 SC-15 メニューの編集／SC-16 セットの登録）── */
#tr-edit{padding:2px 0 8px}
.te-group{margin:0 0 16px}
.te-gh{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13px; font-weight:700; color:var(--accent); margin:14px 2px 6px;
}
.te-add{
  background:none; border:1px solid var(--brand); border-radius:999px;
  color:var(--accent); font-family:inherit; font-size:11.5px; font-weight:700;
  padding:5px 11px; cursor:pointer;
}
.te-row{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:0 0 6px;overflow:hidden}
.te-row.off .te-name{color:var(--muted);text-decoration:line-through}
.te-head{
  width:100%; display:flex; align-items:center; gap:8px; background:none; border:none;
  padding:12px; font-size:14px; color:var(--ink); text-align:left; cursor:pointer; font-family:inherit;
}
.te-name{flex:1;min-width:0;font-weight:700}
.te-sub{flex:none;font-size:11.5px;color:var(--muted)}
.te-tag{flex:none;font-size:10.5px;color:var(--muted);border:1px solid var(--line2,#d7dbe0);border-radius:4px;padding:1px 6px}
.te-caret{flex:none;color:var(--muted);font-size:12px}
.te-body{border-top:1px solid var(--line);padding:10px 12px 12px;background:#fff}
.te-f{display:block;margin:0 0 10px}
.te-lb{display:block;font-size:11.5px;color:var(--muted);margin:0 0 4px}
.te-f input[type=text], .te-f select{
  width:100%; border:1px solid var(--line); border-radius:8px; background:#fff;
  font:inherit; font-size:15px; padding:9px 10px; color:var(--ink);
}
.te-ops{display:flex;gap:8px;align-items:center}
.te-ops .btn{flex:1}
.te-ops2{padding:0 12px 10px;background:#fff;border-top:1px solid var(--line)}
.te-ops2 .btn{width:100%;margin-top:8px}

/* セットの中の行 */
.te-item{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:9px 10px; margin:0 0 6px;
}
.te-item.rest{background:#fff}
.te-il{margin-bottom:7px}
.te-il select{
  width:100%; border:1px solid var(--line); border-radius:8px; background:#fff;
  font:inherit; font-size:14px; padding:8px 9px; color:var(--ink);
}
.te-il .te-name.rest{display:block;font-size:14px;color:var(--muted);padding:8px 2px}
.te-ir{display:flex;align-items:center;gap:6px}
.te-t{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:0 6px}
.te-t input{width:46px;border:none;background:none;font:inherit;font-size:14px;padding:7px 2px;text-align:right;color:var(--ink)}
.te-t input:focus{outline:none}
.te-u{font-size:11px;color:var(--muted);padding-left:2px}
.te-x{font-size:12px;color:var(--muted);padding-right:2px}
.te-mv, .te-del{
  flex:none; background:#fff; border:1px solid var(--line); border-radius:8px;
  font-family:inherit; font-size:12px; color:var(--sub,#5c646e); padding:7px 9px; cursor:pointer;
}
.te-mv{width:34px}
.te-mv[disabled]{opacity:.35}
.te-del{margin-left:auto;color:var(--muted)}
.te-adds{display:flex;gap:8px;margin:10px 0 0}
.te-adds .btn{flex:1}
.te-total{margin:14px 0 0;font-size:14px;color:var(--ink)}
.te-total b{font-size:16px;font-variant-numeric:tabular-nums}
.te-note{font-size:11.5px;color:var(--muted);margin-left:6px}

/* ── 下部ナビの真上に固定するサブタブ（.subtab-btm）は廃止した ──
   Training の「記録／履歴」は Check へ一本化し（R-37）、Check のタブは
   【画面の中・カレンダーの直下】へ移した（ユーザー指示 2026-09-16）。
   使う画面が無くなったので、規則と --sub-h ごと外してある。
   画面内のタブの装飾は下の .typetab を共用する。 */

/* ── タイプタブ（22 §Training のタブ・P03-05.008 R-2）──
   ★「タブの形」にする：上だけ角丸・下辺は開いて本体につながる。
   丸いピル型にしない——押すと画面がまるごと変わるので、タブだと分かる形であること。 */
.typetab{
  display:flex; align-items:flex-end; gap:3px;
  margin:0 0 6px; padding:0 2px;
  border-bottom:2px solid var(--brand);
}
.typetab button{
  flex:1 1 0; min-width:0; cursor:pointer; font-family:inherit;
  padding:8px 4px; font-size:12.5px; line-height:1.2; color:var(--muted);
  background:var(--panel); border:1px solid var(--line); border-bottom:none;
  border-radius:8px 8px 0 0; position:relative; bottom:-1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.typetab button.on{
  background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700;
}

/* ── 一覧の見出し行（22 §SC-06）──
   ★ 左に案内、右に「⚙ Edit」。**タブの中身の側**に置く（ユーザー指示 2026-09-12）。
     タブそのものの中に入れると、押し分けが分かりにくく、タブの幅も動く。 */
.tr-listhead{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:4px 0 2px;
}
.tr-listhead .hint{margin:0;flex:1;min-width:0}
.tr-edit-btn{
  flex:none; display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:700; color:var(--accent);
  background:#fff; border:1px solid var(--brand); border-radius:999px; padding:5px 11px 5px 9px;
}
.tr-edit-btn svg{width:14px;height:14px;display:block}

/* ── 一覧の列タイトル（22 §SC-06・P03-05.008 R-12）──
   ★ 数字と横棒は同じものを指すので、見出しは「未実施日数」の1つにまとめる */
.tr-colhead{
  display:grid; grid-template-columns:18px 1fr auto 84px; align-items:center; gap:10px;
  padding:2px 12px 3px; font-size:11.5px; color:var(--muted); letter-spacing:.04em;
}
.tr-colhead .c-days{grid-column:3 / span 2}
.tr-colhead.sets{grid-template-columns:18px 1fr auto 88px 74px}
.tr-colhead.sets span:last-child{text-align:right}

/* ── セットの一覧（22 §SC-06・ストレッチ/HIIT）── */
/* 行そのもの（押すと開閉）と、その右の「開始」を横に並べる */
.tr-set-head{display:flex; align-items:center}
.tr-set-row{
  flex:1; min-width:0;
  width:100%; display:grid; grid-template-columns:18px 1fr auto 88px; align-items:center; gap:10px;
  background:none; border:none; padding:13px 12px; font-size:15px; color:var(--ink);
  text-align:left; cursor:pointer; font-family:inherit;
}
.tr-set-time{font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tr-items{border-top:1px solid var(--line); padding:2px 0 4px}
.tr-item{
  display:grid; grid-template-columns:18px 1fr auto 88px; align-items:center; gap:10px;
  padding:9px 12px; font-size:13.5px; color:var(--ink); border-bottom:1px solid var(--line);
}
.tr-item:last-child{border-bottom:none}
.tr-item.rest{color:var(--muted)}
.tr-item .tr-caret{font-size:11px}
.tr-item .tr-days{font-size:14px}

/* ── カレンダー（22 SC-11・23 C-T2b／R-24）──
   白基調。丸は【日付の数字の背景に敷く】（❷のように数字が丸の上に載る）。
   塗り（●）＝実績あり で統一し、色（赤／薄い灰色）で「本日かどうか」を表す。
   2つの意味を別の軸に載せているので、本日かつ記録ありでも丸が二重にならない。 */
/* カレンダーは左 3・右 1 に分ける（UAT 2026-09-05）。
   右は今後の情報の置き場で、いまは枠だけ。gap を挟むので比で持つ（%だと溢れる） */
.tr-calrow,.cal-row{display:flex;gap:8px;align-items:stretch;margin-bottom:12px}
#tr-cal,#ck-cal{
  flex:3 1 0; min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 6px 9px;
}
#tr-side{
  flex:1 1 0; min-width:0;
  background:var(--panel);border:1px dashed var(--line);border-radius:10px;
}
/* Check の右の列。いまは空の枠（今後の情報の置き場）。
   ★ Vlog作成は Camera タブの中へ移した（ユーザー指示 2026-09-16）——
     変遷動画の素材は360度分析なので、その中身と同じ場所にある方が筋が通る */
#ck-side{
  flex:1 1 0; min-width:0;
  background:var(--panel);border:1px dashed var(--line);border-radius:10px;
}
/* Camera タブの一番上に置く操作（Vlog作成） */
.ck-ops{display:flex;gap:8px;margin:0 0 12px}
.ck-ops .btn{flex:1}
.ck-daylabel{
  font-size:13px;color:var(--muted);margin:2px 0 8px;letter-spacing:.04em;
}
/* 過去の回を押して開ける形にする（見た目は一覧の行のまま） */
.gi-lapopen{
  width:100%; text-align:left; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font:inherit;
}
.gi-lapopen:active{background:var(--brand-soft)}
/* 普段は押さない道具は、中身の下に少し離して置く */
.gi-maint{margin-top:18px;opacity:.85}
.cal-head{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:5px}
.cal-ym{font-size:12.5px;font-weight:700;letter-spacing:.02em;flex:1;text-align:center;white-space:nowrap}
.cal-mv{
  border:1px solid var(--line);background:var(--panel);border-radius:7px;
  width:24px;height:24px;font-size:14px;line-height:1;color:var(--ink);cursor:pointer;
  padding:0;flex:none;
}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px 0}
.cal-dow{
  text-align:center;font-size:8.5px;letter-spacing:.02em;color:var(--muted);
  padding-bottom:2px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* 1マス。数字の背景に円を敷く。
   高さは aspect-ratio で幅に追従させず**固定**する——幅を 3/4 に絞ったうえで
   さらに縦を詰めたいため（UAT 2026-09-05：縦 2/3・横 3/4） */
.cal-cell{
  position:relative; height:30px;
  border:none;background:none;cursor:pointer;padding:0;
  font-size:12px;color:var(--ink);line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.cal-cell::before{
  /* これが「●」。数字の後ろに敷く円 */
  content:""; position:absolute; width:25px; height:25px; border-radius:50%;
  background:transparent; border:1.5px solid transparent; z-index:0;
}
.cal-cell > *, .cal-cell{z-index:0}
/* 記録がある日（本日以外）＝薄い灰色の塗り。数字は白抜きにしない（薄い地の上では読めなくなる） */
.cal-cell.on::before{background:#e3e6ea}
/* 本日・記録なし＝赤の輪郭だけ */
.cal-cell.today::before{border-color:var(--neg);background:transparent}
/* 本日・記録あり＝赤の塗り。数字は白抜き */
.cal-cell.today.on::before{background:var(--neg);border-color:var(--neg)}
.cal-cell.today.on{color:#fff;font-weight:700}
/* 前後の月は薄く。丸は付けない（その月の実績を数える面ではない） */
.cal-cell.out{color:#b9bfc7}
.cal-cell.out::before{background:transparent;border-color:transparent}
/* 選択中は【丸で表さない】（丸を3つ目の意味に使うと読み方が崩れる）。下線で示す */
.cal-cell.sel::after{
  content:""; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  width:14px; height:2px; border-radius:1px; background:var(--accent);
}
/* コピー元の日（P03-05.010 R-29）。★ 3つ目の視覚軸は **輪郭**。
   ::before は「記録あり／本日」の塗りで、::after は「選択中」の下線で埋まっている。
   輪郭にすると「予約があり、かつコピー元」も同時に出せる */
.cal-cell.cal-copysrc::before{ box-shadow:0 0 0 2px var(--brand) }
.cal-cell.cal-copysrc{ font-weight:700 }
/* 移動元の日（R-31）。コピーと取り違えないよう色を変える */
.cal-cell.cal-movesrc::before{ box-shadow:0 0 0 2px var(--neg) }
.cal-cell.cal-movesrc{ font-weight:700 }

/* 数字を円より前に出す */
.cal-cell{ isolation:isolate }
.cal-cell::before{ z-index:-1 }

/* ── その日の記録（22 SC-11）── */
.tr-daydate{font-size:13px;color:var(--muted);margin:2px 0 8px;letter-spacing:.04em}
.tr-part-h{
  font-size:13px;font-weight:700;color:var(--accent);
  margin:14px 0 6px;padding-left:2px;letter-spacing:.04em;
}
/* メニューのカード。タップで SC-07 を編集モードで開く（22 §既存記録の修正） */
.tr-card{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin:0 0 8px;font:inherit;color:inherit;
}
.tr-cname{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
/* セット行は SC-07 の入力欄と同じ並び・同じ幅感で、小さめに（表示専用） */
.tr-cs{
  display:grid;grid-template-columns:2.2em 4.6em 3.6em 1fr;
  gap:6px;align-items:baseline;font-size:12px;color:var(--muted);
  padding:2px 0;
}
.tr-cs .tr-no{color:var(--muted);font-size:11px}
.tr-cv{color:var(--ink)}
/* セットの記録の行は「種目名＋時間」。名前が主役なので列の幅を変える */
.tr-cs.set{grid-template-columns:2.2em 1fr 4.4em 1fr}
.tr-cnm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600}
.tr-cm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══════════════════════════════════════════════════════
   プラン（SC-08 読み返し／SC-09 記入 P1／SC-10 確認 P2）
   ══════════════════════════════════════════════════════ */
.pl-head{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:12px;
}
.pl-purpose{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.06em}
.pl-title{font-size:17px;font-weight:700;margin:2px 0 4px;line-height:1.35}
.pl-period{font-size:12px;color:var(--muted)}

.pl-sec{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.pl-sec h3{font-size:13px;font-weight:700;color:var(--accent);margin:0 0 6px;letter-spacing:.04em}
/* 本文は【書かれた文章をそのまま】出す。改行を保持し、要約も整形もしない（R-5・R-8） */
/* ★ 文字の大きさは 題 ＞ 小見出し ＞ 本文（2026-10-02 ユーザー指示：小見出しが本文より小さかった）。
   本文は1段小さく（14 → 13px）、題（17px）と小見出し（14.5px）を上げた */
.pl-body{margin:0;font-size:13px;line-height:1.75;white-space:normal;word-break:break-word}
.pl-empty{margin:0;font-size:12.5px;color:var(--muted)}

.pl-ops{display:flex;gap:8px;margin:14px 0 8px}
.pl-ops .btn{flex:1}

.pl-hist{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:14px}
.pl-hist h3{font-size:13px;font-weight:700;color:var(--accent);margin:0 0 6px;letter-spacing:.04em}
.pl-hist-row{
  display:block;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:none;border:none;border-top:1px solid var(--line);padding:9px 0;
}
.pl-hist-row:first-of-type{border-top:none}
.pl-hist-period{display:inline-block;font-size:11px;color:var(--muted);margin-right:8px}
.pl-hist-purpose{display:inline-block;font-size:11px;color:var(--accent)}
.pl-hist-title{display:block;font-size:14px;font-weight:700}

/* ── P1：7項目を縦に1枚。ページ送りにしない（R-3）── */
.pl-field{margin-bottom:14px}
.pl-field > label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
.pl-hintlabel{font-weight:400;color:var(--muted);font-size:11px;margin-left:6px}
/* 目的はプルダウン（2026-10-01 ユーザー指示。旧版は2択のボタン .pl-purpose-btn）。
   ★ 既存のプルダウン（.te-f select）と同じ作り：端末の選択肢の出し方をそのまま使う */
.pl-purpose-sel{
  width:100%;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  font:inherit;font-size:13.5px;padding:8px 6px;color:var(--ink);
}
.pl-title-in,.pl-note{
  width:100%;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  padding:9px 10px;font:inherit;font-size:14px;color:var(--ink);
}
/* 中身に合わせて伸ばす（plan-ui.js fitArea）。P1 は縦スクロール1枚なので、
   欄の中でスクロールさせない——書いたものが読み返せなくなるため */
.pl-note{line-height:1.7;resize:vertical;min-height:3.4em;overflow-y:hidden}
.pl-period-in{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pl-period-in input[type=date]{
  flex:1;min-width:8.5em;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  padding:9px 8px;font:inherit;font-size:14px;color:var(--ink);
}
.pl-tilde{color:var(--muted)}
/* ★ R-34：width:100% を外して同じ行の右端に寄せる。
   これだけで対象期間が2行 → 1行になり、前半が1行ぶん縮む
   （flex-wrap:wrap の中で width:100% を持つと【必ず】改行していた） */
.pl-span{font-size:12px;color:var(--muted);margin-left:auto;flex:none;white-space:nowrap}

/* ── P2：文字数だけ返す。本文を要約しない（R-8）── */
.pl-count,.pl-link{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:13px}
.pl-count + .pl-count,.pl-link + .pl-link{border-top:1px solid var(--line)}
.pl-count span,.pl-link span{color:var(--muted)}
.pl-count b{font-size:14px}
.pl-link b{font-size:12px;font-weight:400}
.pl-link b.muted{color:var(--muted)}
.warn-line{font-size:12px;color:var(--warn);margin:0 0 10px;line-height:1.6}
/* ══════════════════════════════════════════════════════
   P03-05.007 — 周径の検証（計測用の道具・既定は非表示）
   ══════════════════════════════════════════════════════ */
.gi-panes{display:flex;gap:8px;margin:8px 0}
.gi-pane{flex:1 1 0;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px}
.gi-pane h3{font-size:12px;font-weight:700;color:var(--accent);margin:0 0 6px;letter-spacing:.04em}
.gi-file{width:100%;font-size:11px;margin-bottom:6px}
.gi-canvas-wrap{background:#f0f2f4;border-radius:6px;overflow:hidden;min-height:90px;display:flex}
.gi-canvas-wrap canvas{width:100%;height:auto;display:block}
.gi-row{display:flex;align-items:center;gap:6px;margin-top:6px}
.gi-row > label{font-size:11px;color:var(--muted);flex:0 0 6.6em;line-height:1.25}
.gi-row input[type=range]{flex:1;min-width:0}
.gi-val{font-size:11px;color:var(--muted);flex:0 0 auto;white-space:nowrap}
.gi-val.ok{color:var(--good);font-weight:700}
.gi-val.ng{color:var(--neg);font-weight:700}

.gi-calc{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px}
.gi-out{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:13px}
.gi-out + .gi-out{border-top:1px solid var(--line)}
.gi-out span{color:var(--muted)}
.gi-out b{font-size:14px}
.gi-out.gi-est b{font-size:19px;color:var(--accent)}
.gi-ops{display:flex;gap:8px;margin-top:10px}
.gi-ops .btn{flex:1}

.gi-sum{font-size:12px;color:var(--muted);margin:12px 0 6px}
.gi-sum b{color:var(--ink);font-size:13px}
.gi-h4{margin:18px 0 6px;font-size:15px;font-weight:700;color:#1b2026}
.gi-table{width:100%;border-collapse:collapse;font-size:11.5px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gi-table th,.gi-table td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}
.gi-table th{background:var(--brand-soft);color:var(--accent);font-weight:700;font-size:10.5px}
.gi-table td.ok{color:var(--good);font-weight:700}
.gi-table td.ng{color:var(--neg);font-weight:700}

/* 周径タブ v2：撮る／選ぶ・カメラ（P03-05.007・2026-09-05） */
.gi-cam{position:fixed;inset:0;background:#000;z-index:60;display:flex;flex-direction:column}
.gi-cam.hidden{display:none !important}
/* 映像の枠。**枠線がカメラの見ている範囲そのもの**になるよう、
   video の大きさを中身の縦横比どおりにする（画面いっぱいには広げない）。
   広げて切り取ると、見えている範囲と測る範囲がずれ、全身の判定を目で確かめられない */
/* 枠は映像の縦横比に合わせる（JS が aspect-ratio を入れる）。
   合わせないと、映像が横長なのに枠が縦長で上下に黒帯が出る */
/* 縦に構えたら縦長に映す（標準カメラと同じ見え方）。
   枠は画面いっぱいに取り、映像は cover で埋める。左右は隠れるが、
   **縦は全部見える**——全身が入っているかを見たいのは縦方向だから */
.gi-stage{
  flex:1;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
/* ★ 拡大しない。**映っている全体をそのまま出す**（cover は左右を切って拡大するので望遠に見える） */
.gi-cam video{
  width:100%;height:100%;object-fit:contain;background:#000;display:block;
}
.gi-caminfo{
  color:rgba(255,255,255,.65);font-size:11px;text-align:center;padding:2px 12px 0;
  font-variant-numeric:tabular-nums;
}
.gi-camops{display:flex;gap:8px;padding:12px;padding-bottom:calc(12px + var(--sab))}
.gi-camops .btn{flex:1}

/* ── 周径の検証：測り方の切り替え・全身の判定 ── */
.gi-modes{display:flex;gap:8px;margin:10px 0 4px}
.gi-mode{
  flex:1;padding:10px 6px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--muted);font-family:inherit;font-size:13px;cursor:pointer;
}
.gi-mode.on{border-color:var(--brand);color:var(--ink);font-weight:700;background:#f2f6f1}
.gi-ok{font-size:11px;min-height:14px;margin:2px 0 4px}
.gi-ok.ok{color:var(--brand)}
.gi-ok.ng{color:#c0392b}
/* 案内は映像の下に置く（映像に重ねると、その部分の体が見えなくなる） */
.gi-guide{
  text-align:center;color:#fff;font-size:13px;line-height:1.5;
  padding:8px 16px 0;min-height:20px;
}

/* 結果の表に直接入れる実測欄 */
.gi-cell{
  width:72px;padding:5px 6px;border:1px solid var(--line);border-radius:7px;
  font-size:13px;font-family:inherit;text-align:right;
}

/* 撮った写真は .gi-strip／.gi-slide（下）へ移った（2026-09-11）。
   横に3枚並べる .gi-photos／.gi-ph は、それと入れ替わりで使われなくなったので消した */

/* ── 撮影タイプ（2026-09-11）。Camera タブの入口 ── */
/* ★ 2026-09-11：**薄く・詰める。**入口のボタンなので主役ではない */
.hint-tight{margin:0 0 4px;font-size:11.5px}
.stypes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 10px}
.stype{appearance:none;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);
  border-radius:11px;padding:7px 8px;font-size:13px;font-weight:700;line-height:1.35;
  display:flex;flex-direction:row;gap:6px;align-items:baseline;justify-content:center;cursor:pointer}
.stype small{font-weight:400;font-size:11px;color:var(--muted)}
.stype.on{border-color:var(--accent);background:var(--brand-soft);color:var(--accent)}

/* ── 360度分析のカード。上半分＝人型＋説明、下半分＝身長とトグル ── */
/* .hidden は先頭で display:none !important を持っているので、
   ここで書き直す必要は無い（.gi-cam.hidden などは以前からの書き癖） */
.lapcard{border:1.5px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.lc-top{display:grid;grid-template-columns:112px 1fr;gap:12px;padding:14px}
.lc-art{display:grid;place-items:center;background:var(--bg);border-radius:12px;
  min-height:150px;color:var(--line)}
.lc-art .posefig{width:100%;height:auto;max-height:150px}
.lc-txt{display:flex;flex-direction:column;gap:6px;justify-content:center;min-width:0}
.lc-title{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.lc-desc{margin:0;font-size:12.5px;line-height:1.7;color:var(--muted)}
.lc-go{margin-top:4px}
.lc-opts{border-top:1px solid var(--line);padding:10px 14px 14px;display:flex;flex-direction:column;gap:2px}
.lc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.lc-row:last-of-type{border-bottom:none}
.lc-row label,.lc-lb{font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:6px}
.lc-req{font-size:10px;font-weight:700;color:var(--neg);background:#fdecea;
  border-radius:5px;padding:1px 5px;margin-left:6px}
.lc-numwrap{display:inline-flex;align-items:center;gap:6px}
.lc-num{width:96px;text-align:right;font-size:15px;padding:7px 10px;border-radius:9px;
  border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.lc-unit{font-size:13px;color:var(--muted);flex:0 0 auto}
.lc-i{width:17px;height:17px;border-radius:50%;border:1.2px solid var(--line);
  background:transparent;color:var(--muted);font-size:11px;font-weight:700;line-height:1;
  display:grid;place-items:center;cursor:pointer;padding:0}
.lc-i.on{border-color:var(--accent);color:var(--accent)}
.lc-info{margin:8px 0 0;font-size:12px;line-height:1.75;color:var(--muted);
  background:var(--bg);border-radius:9px;padding:9px 11px}
/* トグル */
.tgl{position:relative;width:46px;height:27px;border-radius:999px;border:none;
  background:var(--line);cursor:pointer;padding:0;flex:0 0 auto;transition:background .15s}
.tgl span{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.tgl.on{background:var(--accent)}
.tgl.on span{transform:translateX(19px)}

/* ── Check タブ：写真を横に流す帯（2026-09-11）──
   2枚ぶんの幅で見せ、スワイプで残りが出る。1枚ずつ止まるよう scroll-snap を使う */
.gi-strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;margin:8px 0 4px;
  padding-bottom:4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gi-strip::-webkit-scrollbar{height:5px}
.gi-strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.gi-slide{flex:0 0 calc((100% - 8px) / 2);margin:0;scroll-snap-align:start}
.gi-slide img{width:100%;height:auto;display:block;border-radius:10px;background:var(--bg)}
.gi-slide figcaption{font-size:11px;color:var(--muted);text-align:center;padding-top:3px}
.gi-swipe{margin:2px 0 10px;font-size:11px}

/* 目標の行はどこを押しても直せる（P03-05.008・/code-review 4回目） */
.tr-today-box{ cursor:pointer; }
.tr-goal-ed{ margin-left:6px; color:#4b7f52; font-weight:700; }
/* いまのセットから外れた種目（記録には残っている） */
.tr-chk-tag{
  margin-left:6px; padding:1px 5px; border-radius:4px;
  background:#f0f2f5; color:#8892a0; font-size:10px; font-weight:700;
}

/* ── R-48 ヘッダの時計（A では置くだけ・押せない）── */
.abtimer{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-right:2px; padding:0;
  background:none; border:none; color:var(--ink); cursor:pointer;
}
.abtimer svg{ width:21px; height:21px; }
.abtimer[disabled]{ cursor:default; opacity:.9; }   /* まだ押せないが、薄くしすぎない */

/* ── R-39 右上のアカウント ── */
.abme{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; margin-left:4px; padding:0; flex:none;
  background:var(--line); border:none; border-radius:999px;
  color:var(--ink); cursor:pointer; overflow:hidden;
}
.abme-img{ width:100%; height:100%; object-fit:cover; display:block; }
.abme-ini{ font-size:13px; font-weight:600; line-height:1; }
.abme-img.hidden, .abme-ini.hidden{ display:none; }

.ac-card{ width:min(360px, calc(100vw - 32px)); }
.ac-body{ padding:14px 16px 16px; }
.ac-me{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ac-img{ width:48px; height:48px; border-radius:999px; object-fit:cover; flex:none; }
.ac-ini{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:999px; flex:none;
  background:var(--line); font-size:20px; font-weight:600;
}
.ac-img.hidden, .ac-ini.hidden{ display:none; }
.ac-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ac-txt b{ font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-txt small{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-out{
  width:100%; padding:12px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); color:#c0392b; font-size:15px; font-weight:600; cursor:pointer;
}
.ac-out:disabled{ opacity:.6; cursor:default; }
.ac-note{ margin:12px 2px 0; font-size:11.5px; line-height:1.7; color:var(--muted); }

/* ── ホイール（ドラム）式の選択（2026-09-15）──
   指の動きは追いかけない。**ブラウザのスクロール**を scroll-snap で吸い付かせる。
   こうすると iOS の慣性・跳ね返り・VoiceOver が全部そのまま効く。 */
.wh{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:6px; height:180px; margin:4px 0 12px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.wh-col{ display:flex; align-items:center; gap:4px; }
.wh-list{
  height:180px; overflow-y:auto; overscroll-behavior:contain;
  scroll-snap-type:y mandatory; scrollbar-width:none;
  /* ★ iOS で慣性を効かせる */
  -webkit-overflow-scrolling:touch;
}
.wh-list::-webkit-scrollbar{ display:none; }
/* 上下の空き＝(枠の高さ − 1つぶん) ÷ 2。最初と最後の値も真ん中に来られる */
.wh-pad{ height:72px; }
.wh-item{
  height:36px; line-height:36px; scroll-snap-align:center;
  min-width:2.2em; text-align:center;
  font-size:26px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--muted); opacity:.45; transition:opacity .12s, color .12s;
  cursor:pointer; user-select:none;
}
.wh-item.on{ color:var(--ink); opacity:1; }
.wh-unit{ font-size:12px; color:var(--muted); font-weight:600; }
/* 選ばれている場所を示す横線 */
.wh-bar{
  position:absolute; left:8px; right:8px; top:50%; height:36px;
  transform:translateY(-50%); border-radius:8px;
  background:var(--line); opacity:.5; pointer-events:none;
}

/* 長さを決めて始めるボタン（ホイールの下） */
/* よく使う長さ（ドラムの下）。押すとドラムが動くだけで、始まりはしない */
.tm-quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:2px; }
.tm-quick-b{
  height:40px; border:1px solid var(--line); border-radius:11px; background:var(--panel);
  color:var(--ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer;
}
.tm-quick-b.on{ border-color:#4b7f52; color:#4b7f52; background:rgba(75,127,82,.08); }

.tm-dial-go{
  width:100%; margin-top:6px; padding:13px; border:none; border-radius:12px;
  background:#4b7f52; color:#fff; font-size:16px; font-weight:700; cursor:pointer;
}

/* ── 360度分析の一覧（Check タブ・2026-09-15）── */
.gi-stale{ color:#c0392b; font-weight:800; }

.gi-laps{ margin:8px 0 14px; }
.gi-lapline{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 2px; border-bottom:1px solid var(--line);
}
.gi-lapday{ flex:none; display:flex; flex-direction:column; font-size:13px; font-weight:700; }
.gi-lapday > small{ font-size:10.5px; font-weight:600; color:var(--muted); }
.gi-lapsum{ display:flex; flex-direction:column; gap:2px; font-size:12.5px; min-width:0; }
.gi-lapsum > small{ font-size:10.5px; color:var(--muted); }

/* ── Vlog（変遷動画・2026-09-15）── */
.vl-player{ margin-bottom:14px; }
.vl-player.hidden{ display:none; }
.vl-card{
  display:flex; align-items:center; gap:12px;
  padding:10px 2px; border-bottom:1px solid var(--line);
}
.vl-card.off{ opacity:.65; }
.vl-thumb{
  flex:none; width:54px; height:96px; border-radius:8px; overflow:hidden;
  background:var(--line); display:block;
}
.vl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vl-body{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.vl-body b{ font-size:15px; font-weight:700; }
.vl-body small{ font-size:11px; color:var(--muted); }
.vl-go{ align-self:flex-start; padding:7px 14px; font-size:13px; }
.vl-need{ font-size:11.5px; color:var(--muted); font-weight:700; }

/* 前回の書き出し（R-41）。R2 に置いた1本へ画面から辿る道 */
.vl-saved{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11.5px; color:var(--muted);
}
.vl-open{ padding:4px 10px; font-size:12px; }
.vl-out{ display:block; margin-top:8px; }
.vl-out.hidden{ display:none !important; }

/* ── R-47 タブの下で入力するときの頭 ── */
.tr-inhead{
  display:flex; align-items:center; gap:8px;
  margin:2px 0 8px; padding:0 2px;
}
.tr-inback{
  flex:none; padding:4px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel); color:var(--accent); font:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer;
}
.tr-inttl{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:15px; font-weight:800; color:var(--ink);
}

/* ── R-46 送信待ち ── */
.tr-pend{
  display:flex; align-items:center; gap:10px;
  margin:8px 0 0; padding:8px 12px;
  border:1px solid #e4c98a; border-radius:12px; background:#fdf7e8;
}
.tr-pend-n{ flex:1; min-width:0; font-size:13px; font-weight:700; color:#8a6d1f; }
.tr-pend-go{
  flex:none; padding:5px 12px; border:1px solid #e4c98a; border-radius:999px;
  background:var(--panel); color:#8a6d1f; font:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer;
}
.tr-pend-go[disabled]{ opacity:.6; cursor:default; }
/* 送れないまま残っているもの（送信待ちとは別） */
.tr-pend.bad{ border-color:#e0a0a0; background:#fdf0f0; }
.tr-pend.bad .tr-pend-n{ color:#a03a3a; }
.tr-pend.bad .tr-pend-go{ border-color:#e0a0a0; color:#a03a3a; }
.tr-wait.bad{ background:#fbe2e2; color:#a03a3a; }
.tr-card.pending{ border-style:dashed; }
.tr-wait{
  margin-left:6px; padding:1px 6px; border-radius:4px;
  background:#fdf0d0; color:#8a6d1f; font-size:10px; font-weight:700;
}

/* ══ タイマー（SC-17・R-49／R-52）══
   ★ 画面の上に重ねる。後ろは暗くするが、**押すと閉じる**だけで止めない */
.tm-wrap{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; }
.tm-wrap.hidden{ display:none; }
.tm-bg{ position:absolute; inset:0; background:rgba(16,20,26,.62); }
.tm-card{
  position:relative; width:min(340px, calc(100vw - 32px));
  max-height:calc(100vh - var(--sat) - var(--sab) - 48px);
  display:flex; flex-direction:column;
  border-radius:18px; background:var(--panel); box-shadow:0 18px 48px rgba(0,0,0,.38);
  overflow:hidden;
}
.tm-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); }
.tm-ttl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
         font-size:14px; font-weight:800; color:var(--ink); }
/* 音の入り切りはアイコンだけ（ユーザー指示 2026-09-13） */
.tm-sound{ flex:none; display:inline-flex; align-items:center; justify-content:center;
           width:32px; height:32px; padding:0; border:none; border-radius:8px;
           background:none; color:var(--ink); cursor:pointer; }
.tm-sound svg{ width:21px; height:21px; fill:currentColor; }
.tm-sound.off{ color:var(--muted); }
.tm-close{ flex:none; width:28px; height:28px; padding:0; border:none; border-radius:8px;
           background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; }

.tm-body{ padding:14px 14px 16px; overflow-y:auto; text-align:center; }
.tm-body.go{ background:#eef6ee; }      /* 種目 */
.tm-body.rest{ background:#fdeeee; }    /* 休憩 */
.tm-body.done{ background:#eef2f7; }
.tm-name{ font-size:15px; font-weight:800; color:var(--ink); }
.tm-of{ margin-left:8px; padding:1px 7px; border-radius:999px; background:var(--panel);
        color:var(--muted); font-size:11px; }
.tm-clock{ margin:2px 0 6px; font-size:56px; font-weight:800; letter-spacing:1px;
           font-variant-numeric:tabular-nums; color:var(--ink); }
.tm-meta{ display:flex; gap:10px; justify-content:center; margin-bottom:12px; }
.tm-meta span{ flex:1; padding:6px 4px; border-radius:10px; background:var(--panel); }
.tm-meta b{ display:block; font-size:17px; font-variant-numeric:tabular-nums; color:var(--ink); }
.tm-meta i{ font-style:normal; font-size:10.5px; color:var(--muted); }

.tm-ops{ display:flex; align-items:center; gap:8px; }
.tm-op{ flex:none; width:44px; height:44px; display:inline-flex; align-items:center;
        justify-content:center; border:1px solid var(--line); border-radius:12px;
        background:var(--panel); color:var(--ink); cursor:pointer; }
.tm-op svg{ width:20px; height:20px; fill:currentColor; }
.tm-op[disabled]{ opacity:.4; cursor:default; }
/* 再生・一時停止もアイコンだけ */
.tm-go{ flex:1; height:44px; display:inline-flex; align-items:center; justify-content:center;
        border:none; border-radius:12px; background:var(--accent); color:#fff; cursor:pointer; }
.tm-go svg{ width:26px; height:26px; fill:currentColor; }

/* ★ 2026-09-15：線で描いたアイコン（fill="none"）が **塗り潰されて丸い塊になっていた**。
   CSS の fill:currentColor は svg 要素のプレゼンテーション属性 fill="none" に勝つため、
   「もう一度」の弧が塗られて爆弾のような形に見えていた。
   属性で fill="none" と書いてあるものは、そのとおり塗らない。
   ここ1つで、線のアイコンを足すたびに同じ罠を踏むのを防ぐ。 */
.tm-sound svg[fill="none"],
.tm-op svg[fill="none"],
.tm-go svg[fill="none"]{ fill:none; }
.tm-again{ margin-top:8px; }
.tm-again button{ border:none; background:none; color:var(--accent); font:inherit; font-size:12px;
                  font-weight:700; cursor:pointer; }

.tm-list{ margin:12px 0 0; padding:0; list-style:none; text-align:left; }
.tm-list li{ display:flex; justify-content:space-between; gap:8px; padding:5px 8px;
             border-radius:8px; font-size:12.5px; color:var(--muted); }
.tm-list li.now{ background:var(--panel); color:var(--ink); font-weight:800; }
.tm-list li.rest{ opacity:.75; }
.tm-next{ display:block; margin-top:2px; font-size:12px; font-weight:700; color:var(--muted); }
.tm-li-next{ margin-left:6px; font-style:normal; font-size:11px; color:var(--muted); }

.tm-body.pick .tm-name{ margin-bottom:10px; }
.tm-hint{ margin:12px 0 0; font-size:11.5px; color:var(--muted); line-height:1.5; }

/* セットのボタンは2つ並べる（R-50）。並べる指定は上の .tr-setrec-wrap に足した */
.tr-setrec-wrap .btn{ flex:1; }

/* セットの行から直接タイマーへ（ユーザー指示 2026-09-13） */
.tr-settimer{
  flex:none; display:inline-flex; align-items:center; gap:3px;
  margin-right:12px; padding:6px 10px;
  border:1px solid var(--accent); border-radius:999px;
  background:var(--panel); color:var(--accent);
  font:inherit; font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer;
}
.tr-settimer svg{ width:15px; height:15px; }

/* ══ SC-20 サインイン（P03-05.006 R-1）══ */
.gate-form{ width:100%; max-width:320px; display:flex; flex-direction:column; gap:10px; text-align:left; }
.gate-f{ display:block; }
.gate-f span{ display:block; margin-bottom:4px; font-size:12.5px; color:var(--muted); }
.gate-f input{
  width:100%; box-sizing:border-box; height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  font:inherit; font-size:16px; color:var(--ink);   /* 16px 未満だと iOS が拡大する */
}
.gate-form .btn{ height:46px; }
.gate-or{ position:relative; text-align:center; margin:2px 0; }
.gate-or::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); }
.gate-or span{ position:relative; padding:0 10px; background:var(--bg); font-size:12px; color:var(--muted); }
.gate-g{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.gate-gi{ width:17px; height:17px; }
.gate-switch{ margin:2px 0 0; font-size:12.5px; color:var(--muted); text-align:center; }
.gate-switch a{ color:var(--accent); font-weight:700; text-decoration:none; }


/* ══ SC-26 トレーニングメニューの予約（P03-05.010）══ */
/* 見出し行：プラン名 ＋ 切り替え ＋ 戻る／やり直し（保存ボタンは 2026-09-29 にやめた＝自動保存） */
.rs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.rs-plan{margin:0;flex:1;min-width:0;font-size:13px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* コピー中／移動先を選んでください（R-29・R-31）。★ 色で取り違えを防ぐ */
.rs-mode{margin:0 0 8px;padding:7px 10px;border-radius:8px;font-size:12.5px;font-weight:700}
.rs-mode.is-copy{background:#eef2fb;border:1px solid var(--brand);color:var(--brand)}
.rs-mode.is-move{background:#fdecea;border:1px solid var(--neg);color:var(--neg)}
/* 右枠（カレンダーの隣）。★ 外寸 ≈ 89px なのでボタンは **縦積み**。横並びは入らない */
#rs-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;
  background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:6px}
#rs-cal{flex:3 1 0;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:8px 6px 9px}
.rs-op{width:100%;font-size:12px;padding:8px 0}
/* 部位と種目だけの1行カード（R-26） */
.rs-card{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:9px 10px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  /* ★ pan-y を残す＝長押しが決まるまでは【ふつうに縦スクロールできる】。
     none にすると、並べ替える気が無いのに一覧の上で指が滑らなくなる。
     持ち上げたあとは JS が touchmove を止める（reserve.js） */
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;   /* 長押しで文字が選択されない */
  -webkit-touch-callout:none}                  /* iOS の長押しメニューを出さない */
.rs-part{flex:0 0 auto;font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.rs-name{flex:1;min-width:0;font-size:13px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-del{flex:0 0 auto;width:28px;height:28px;border:none;background:none;
  color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.rs-go{flex:0 0 auto;color:var(--muted)}
/* 長押し中（R-27）。★【宙に浮いて指に吸い付く】ように見せる。
   ・持ち上がり＝影を強くして、少しだけ大きく見せる（scale は transform を
     JS が translate3d で使うので **ここでは使わない**——上書きし合う）
   ・他の行は transform の transition でよけるので、こちらは transition を付けない */
.rs-card.is-drag{
  z-index:5; position:relative;
  background:#fff;
  border-color:var(--brand);
  box-shadow:0 8px 20px rgba(16,20,26,.22), 0 2px 6px rgba(16,20,26,.12);
  opacity:.97;
  /* 指の下にあるので、影が落ちる先を少しだけ空ける */
  will-change:transform;
}
.rs-add{width:100%;margin-top:4px;font-size:13px;padding:10px 0}
/* ＋予定を追加／＋実績を追加（左右2つ・2026-09-29）。★ 色は予定・実績の色 */
.rs-adds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.rs-adds .rs-add{margin-top:0;font-weight:700;color:#fff}
.rs-add.is-plan{background:var(--plan);border-color:var(--plan)}
.rs-add.is-actual{background:var(--act);border-color:var(--act)}


/* ══ SC-21 アカウント：名乗りと公開用 ID（P03-05.010）══ */
.ac-sep{border:none;border-top:1px solid var(--line);margin:12px 0}
.ac-field{margin-bottom:10px}
.ac-lb{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.ac-fix{font-weight:400;font-size:11px;color:var(--muted)}
.ac-in{width:100%;box-sizing:border-box;font-size:15px;padding:9px 10px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.ac-in:disabled{background:var(--panel2);color:var(--muted)}
.ac-hint{margin:4px 0 0;font-size:11px;color:var(--muted);line-height:1.5}
.ac-warn-line{color:var(--neg)}
/* ★ 検査に落ちた理由は【欄の近く】に出す。toast だけだと消えてしまい、
   どの欄が悪いのか分からなくなる（23 C-E1・C-E2） */
.ac-err{margin:4px 0 0;font-size:11.5px;font-weight:700;color:var(--neg)}
.ac-psave{width:100%;font-size:14px;padding:11px 0}
.ac-link{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;padding:11px 2px;font-size:13.5px;color:var(--ink);
  cursor:pointer;text-align:left}
.ac-link span{color:var(--muted)}
.ac-link + .ac-link{border-top:1px solid var(--line)}

/* ══════════════════════════════════════════════════════════════
   Portal 連携の画面（P03-05.010 SC-22・SC-24・SC-25）
   ★ 3画面で同じ器（#screen-portal ＞ #pt-body）を使う。
     見出し・帯・行・カードの4種だけで足りるので、画面ごとの CSS は作らない
   ══════════════════════════════════════════════════════════════ */
#pt-body{padding:14px 14px 28px}
.pt-ttl{font-size:15px;font-weight:700;margin:2px 0 8px}

/* 帯。★「押しても Portal にすぐ出ない」を出し続けるためのもの（R-9）。
   目立ちすぎると読み飛ばされ、地味すぎると読まれない——面で塗り、枠は付けない */
.pt-band{background:var(--brand-soft);color:var(--accent);border-radius:9px;
  padding:9px 11px;font-size:12.5px;line-height:1.65;margin:0 0 12px}
.pt-band.is-warn{background:#fdf4e3;color:#7a5a12}
.pt-band b{font-weight:700}

/* 選ぶところ（SC-22） */
.pt-grp{margin:0 0 14px}
.pt-grp h4{font-size:12px;color:var(--muted);font-weight:700;margin:0 0 6px;
  letter-spacing:.04em}
.pt-row{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.55;
  padding:8px 2px;margin:0;border-top:1px solid var(--line)}
.pt-grp .pt-row:first-of-type{border-top:none}
/* ★ 指で押す的を大きくする。文字だけだと 13.5px の行を狙わせることになる */
.pt-row input[type="checkbox"]{width:20px;height:20px;flex:none;margin-top:1px;
  accent-color:var(--brand)}

/* 下の足（数と主ボタン）。★ 数を左に置く——押す前に「何件出すのか」が読める */
.pt-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:16px 0 6px}
.pt-foot .hint{text-align:left;flex:1}
.pt-note{margin:10px 0 0}
.pt-drop{text-align:left;margin:10px 0 0}
.pt-wide{width:100%;margin-top:12px}

/* 保存しているもの（SC-24） */
.pt-card{border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin:0 0 10px}
/* ★ 取り下げ済みは【薄くするだけ】にして、一覧から消さない。
   消すと「取り下げたのに Portal にまだ出ている」あいだ、確かめる先が無くなる（R-9） */
.pt-card.is-out{background:#fafafa;color:var(--muted)}
.pt-card-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.pt-card-t{font-size:14px;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-badge{font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 8px;flex:none;
  background:var(--brand-soft);color:var(--accent)}
.pt-card.is-out .pt-badge{background:#eee;color:var(--muted)}
.pt-card-s{font-size:12px;color:var(--muted);margin:2px 0 0;line-height:1.5}
/* ★ 取り下げは赤にする。押したら Portal から消える＝戻すには保存し直しが要る */
.pt-wd{margin-top:9px;border-color:var(--neg);color:var(--neg)}
.pt-wd:active{background:#fdecea}

/* ══════════════════════════════════════════════════════════════
   Plan集中のトグル（P03-05.010 SC-27・R-33）
   ★ タイマーの左横。Training のタブに居るときだけ出す
   ══════════════════════════════════════════════════════════════ */
/* ── Portal を開く（右上・2026-10-03 ユーザー指示）。★ 地球のマークの下に小さく「Portal」。
   幅はタイマーのマークと同じくらいに収める——札の形（Plan集中と同じ）にしたら、
   長い見出し（「トレーニングの予約」）が欠けた（2026-10-03 に描いて確かめた） ── */
.abportal{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; flex:none;
  width:34px; height:36px; padding:0; margin-right:0;
  background:none; border:none; color:var(--accent); cursor:pointer; font-family:inherit;
}
.abportal svg{ width:18px; height:18px; }
.abportal span{ font-size:8.5px; font-weight:700; letter-spacing:.02em; line-height:1; }
.abportal:active{ opacity:.6; }
.abfocus{
  display:flex; align-items:center; gap:4px; flex:none;
  background:none; border:1px solid var(--line); border-radius:999px;
  color:var(--muted); padding:3px 9px 3px 7px; margin-right:6px; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.01em; line-height:1;
}
.abfocus svg{ width:14px; height:14px; }
/* ★ ON は「面で塗る」。枠の色だけを変えると、明るい画面では入っているのか分からない */
.abfocus[aria-pressed="true"]{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
/* 狭い端末では字を落としてマークだけにする。★ 的の大きさは変えない */
@media (max-width:359px){
  .abfocus span{ display:none; }
  .abfocus{ padding:5px 7px; }
}

/* ══════════════════════════════════════════════════════════════
   予約の聞き返し（P03-05.010 SC-26）。タイマーの器（.tm-card）の中身
   ★ window.prompt を置き換えるためのもの。prompt は
     ・iOS の PWA では出ないことがある
     ・番号を打たせるので、種目が増えるほど読み上げが長くなる
     ・押す的が無いので、選び直しが「打ち直し」になる
   ══════════════════════════════════════════════════════════════ */
#rs-mbody{ text-align:left; }
/* 選ぶ行。★ 的は行そのもの（44px 以上）。文字だけを狙わせない */
.rs-pick{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; border-top:1px solid var(--line);
  padding:11px 2px; font-size:13.5px; color:var(--ink); cursor:pointer; text-align:left;
  min-height:44px;
}
.rs-pick:first-child{ border-top:none; }
.rs-pick:active{ background:var(--brand-soft); }
/* 部位（左）は幅を決めて縦に揃える——種目名の始まりが行ごとにずれると読みにくい */
.rs-pick-part{
  flex:none; width:68px; font-size:11px; font-weight:700; color:var(--accent);
  background:var(--brand-soft); border-radius:999px; padding:3px 0; text-align:center;
}
.rs-pick-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 部位の見出し（種目の一覧をまとめる） */
.rs-pick-h{
  font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.04em;
  margin:12px 0 2px; padding-top:8px; border-top:1px solid var(--line);
}
.rs-pick-h:first-child{ margin-top:0; padding-top:0; border-top:none; }
/* 3択（移動）。★ 縦積み。横並びにすると「以降を全てシフト」の字が入らない */
.rs-ask{ display:flex; flex-direction:column; gap:9px; }
.rs-ask .btn{ width:100%; }
.rs-ask-q{ font-size:13.5px; line-height:1.6; margin:0 0 4px; }
/* 検索。★ 種目が増えたときに、目で探させない */
.rs-pick-q{
  width:100%; box-sizing:border-box; margin:0 0 4px;
  border:1px solid var(--line); border-radius:9px; padding:9px 10px; font-size:13.5px;
}
.rs-pick-q:focus{ outline:none; border-color:var(--brand); }
.rs-pick-none{ font-size:12.5px; color:var(--muted); padding:12px 2px; }
/* ★ 2026-10-02：「＋予定を追加／＋実績を追加」は Training タブ（Plan集中でないとき）と同じ単位の折りたたみ。
   タブ（筋トレ／有酸素／ストレッチ/HIIT）・部位の行・セットの行は Training の部品（.typetab・.tr-part 等）をそのまま使い、
   器の中なので余白だけ少し詰める。セットの右のボタンは Training の［開始］と同じ形（［＋追加］／［記録］） */
#rs-mbody .tr-part{ margin:4px 0; }
#rs-mbody .tr-head, #rs-mbody .tr-set-row{ padding:11px 10px; font-size:14px; }
#rs-mbody .tr-menu{ padding:11px 10px 11px 26px; font-size:13.5px; }
.rs-pick-tabs{ margin-top:2px; }
/* ★ 器の中は狭いので、タブの幅は字の長さに合わせる（「ストレッチ/HIIT」を切らない） */
.rs-pick-tabs button{ flex:1 1 auto; }
/* セットの中の種目の行（名前と時間）。★ 名前の列を広く取り、時間は右に寄せる（重量・回数用の等分だと名前が途中で折れる） */
.rs-pa .rs-set.is-sl{ grid-template-columns:1.6em 1fr auto; gap:4px; }
.rs-set.is-sl .tr-cv:last-child{ text-align:right; white-space:nowrap; }
.rs-pick-add{ margin-right:8px; }
/* セットの予定の左（予定）は押しても何も開かない（入れるもの＝重量・回数が無い） */
.rs-pbox.is-setplan{ cursor:default; }
.rs-pbox.is-setplan:active{ border-color:var(--plan-line); }

/* ══════════════════════════════════════════════════════════════
   SC-28 プラン入力画面（P03-05.010 R-34〜R-37）
   前半を詰め、運動欄に予約を読み取り専用で差し込む。
   ★ 2026-10-01：目的はプルダウンでプラン名と1行／対象期間と目標値は目標の枠の中／
     4欄は折りたたまない（ユーザー指示）
   ══════════════════════════════════════════════════════════════ */

/* ── 前半（目的・プラン名）を1枚の枠に詰める（R-34）── */
.pl-top{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px 4px; margin-bottom:12px;
}
/* ★ 4欄と同じ 14px ではなく 6px。項目は減らさず、余白だけを落とす */
.pl-field-t{ margin-bottom:6px; }
.pl-field-t > label{ font-size:12px; margin-bottom:3px; color:var(--muted); }
/* ★ 目的（プルダウン・幅を縮める）とプラン名を【1行】に収める（2026-10-01 ユーザー指示） */
.pl-row1{ display:grid; grid-template-columns:7.6em minmax(0, 1fr); gap:8px; align-items:start; }
/* ★ 見出しの高さをそろえ、プルダウンと入力欄も同じ高さにする（端末ごとのプルダウンの高さの違いに引きずられない） */
.pl-row1 .pl-purpose-sel, .pl-row1 .pl-title-in{ box-sizing:border-box; height:38px; }
.pl-top .pl-title-in{ padding:8px 9px; font-size:13.5px; }
.pl-top .pl-period-in input[type=date],
.pl-box .pl-period-in input[type=date]{ padding:7px 8px; font-size:12.5px; }

/* ── 4欄（2026-10-01 から折りたたまない）── */
.pl-box{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px 12px; margin-bottom:10px;
}
/* 編集画面の欄の見出し（小見出し）。★ 入力欄の字（14px）より大きく */
.pl-box-h{ margin:0 0 8px; font-size:15px; font-weight:700; color:var(--accent); letter-spacing:.04em; }
.pl-box .pl-field-t{ margin-bottom:8px; }
.pl-box .pl-hintlabel{ display:block; margin:0 0 5px; }
/* 目標値（体重・体脂肪率）。★ 1行に2つ。数は右寄せ・等幅の数字 */
.pl-target{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.pl-tg{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); }
.pl-tg input{
  width:4.8em; border:1px solid var(--line); border-radius:9px; background:var(--panel);
  padding:7px 8px; font:inherit; font-size:14px; color:var(--ink);
  text-align:right; font-variant-numeric:tabular-nums;
}
.pl-tg input:focus{ outline:none; border-color:var(--brand); }

/* ★ R-35 既定7行。rows="7" は初期値でしかなく、fitArea() が height を書くと負ける。
   ここの min-height と fitArea() の Math.max が揃って初めて7行になる
   （14px × 行間1.7 × 7 ＋ 上下 padding ＋ border ＝ 約13.4em） */
.pl-note{ min-height:13.4em; }

/* ── 運動欄の予約（R-37）── */
/* ★ 入力欄と見分けが付く背景にする。同じ白だと「ここも書ける」と読まれる */
.pl-resv{
  margin-top:10px; background:#f5f6f8; border:1px solid var(--line); border-radius:9px;
  padding:9px 11px;
}
.pl-resv-h{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.pl-resv-t{ flex:1; min-width:0; font-size:11.5px; font-weight:700; color:var(--muted); }
/* 押せる口はこの1つだけ（ここでは1件も直せない） */
.pl-resv-go{
  flex:none; background:none; border:1px solid var(--line); border-radius:999px;
  color:var(--accent); font-size:11px; font-weight:700; padding:4px 9px; cursor:pointer;
  white-space:nowrap;
}
.pl-resv-go:active{ background:var(--brand-soft); }
.pl-resv-none{ font-size:12px; color:var(--muted); margin:6px 0 2px; }
.pl-resv-day{ padding:7px 0 0; }
.pl-resv-day + .pl-resv-day{ border-top:1px solid #e6e9ee; margin-top:5px; }
.pl-resv-dow{ font-size:12px; font-weight:700; color:var(--ink); margin:0; }
/* ★ 1行カードにしない——見るだけなので、種目は「／」で連ねる */
.pl-resv-ex{ font-size:12px; color:var(--muted); margin:2px 0 3px; line-height:1.6; }
/* 期間の外に出た日の印。★ 消さずに出す（黙って消すと期間を1日縮めただけで消えうる） */
.pl-resv-out{ font-size:10.5px; font-weight:700; color:var(--neg); margin-left:4px; }

/* ══════════════════════════════════════════════════════════════
   SC-29 プラン初期画面（P03-05.010 R-38〜R-40）
   上部の表 → タブ → 一覧 の【ただの縦積み】（Check と同じ骨格）。
   ★ 上部を画面に貼り付けない（position:sticky を新設しない・Check も固定していない）
   ══════════════════════════════════════════════════════════════ */

/* ── 上部＝体重・体脂肪率の比較表（R-39）── */
.pl-cmp{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px 12px; margin:0 0 12px;
}
.pl-cmp-h{ display:flex; align-items:baseline; gap:8px; margin-bottom:7px; }
.pl-cmp-h h3{ flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--accent);
              margin:0; letter-spacing:.04em; }
/* ★ いつの実測かを右寄せで1行。日付が無いまま数だけ出すと「いまの値」と読まれる */
.pl-cmp-as{ flex:none; font-size:11px; color:var(--muted); }
.pl-cmp-t{ width:100%; border-collapse:collapse; }
.pl-cmp-t thead th{
  font-size:11px; font-weight:700; color:var(--muted); text-align:right;
  padding:0 0 4px; border-bottom:1px solid var(--line);
}
.pl-cmp-t thead th:first-child{ text-align:left; }
.pl-cmp-t tbody th{
  font-size:12.5px; font-weight:700; color:var(--ink); text-align:left;
  padding:7px 0; border-bottom:1px solid #eef0f3; white-space:nowrap;
}
.pl-cmp-t tbody td{
  font-size:13px; color:var(--ink); text-align:right;
  padding:7px 0; border-bottom:1px solid #eef0f3;
  /* ★ 数を縦に揃える（等幅の数字）。桁がずれると比べられない */
  font-variant-numeric:tabular-nums;
}
.pl-cmp-t tbody tr:last-child th,
.pl-cmp-t tbody tr:last-child td{ border-bottom:none; }
.pl-cmp-d{ font-weight:700; }

/* ── 一覧（R-40）── */
.pl-list{ margin-top:10px; }
.pl-none{ font-size:13px; color:var(--muted); text-align:center; padding:18px 0 10px; }

/* ★★ 外枠は1件につき1枚だけ。いまは .pl-head 1枚＋.pl-sec 4枚が
   枠線・背景・角丸・パディングすべて同じ値で並び、入れ子も字下げも無いので
   「別の情報に見える」——これをやめるのがこの画面の主目的 */
.pl-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  margin-bottom:10px; overflow:hidden;
}
.pl-card.is-open{ border-color:var(--brand); }
/* 見出し：1行目＝種別（左）と期間・残日数（右）／2行目＝タイトル */
.pl-card-h{
  display:block; width:100%; background:none; border:none; cursor:pointer;
  padding:11px 13px; text-align:left;
}
.pl-card-r1{ display:flex; align-items:baseline; gap:8px; }
.pl-card-purpose{
  flex:none; font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 8px;
  background:var(--brand-soft); color:var(--accent);
}
.pl-card-period{ flex:1; min-width:0; font-size:11px; color:var(--muted); text-align:right;
                 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-card-r2{ display:block; font-size:17px; font-weight:700; color:var(--ink);
             margin-top:3px; }
.pl-card-b{ padding:0 13px 12px; }

/* ★ 内側は枠を持たない。左の細い罫と小見出しだけで従属を示す */
.pl-nest{ border-left:2px solid #dfe4ea; padding:0 0 0 10px; margin:0 0 10px; }
.pl-nest h4{ font-size:14.5px; font-weight:700; color:var(--accent); margin:0 0 4px;
             letter-spacing:.04em; }
.pl-nest .pl-body{ margin:0; }
.pl-nest .pl-empty{ margin:0; }
/* 欄（目標・食事プラン…）のあいだの区切り線（2026-10-02 ユーザー指示）。
   ★ 欄の下の余白は線の上下で持つ（欄の margin と足すと、線の上だけ広くなる） */
.pl-card-b .pl-nest{ margin:0; }
.pl-sep{ border:none; border-top:1px solid var(--line); margin:11px 0; }

/* ★ 2026-10-01：本文は畳まずに全文を出す（ユーザー指示）。旧 .pl-clamp／.pl-more は外した */
/* 目標の枠の目標値（入っているものだけ） */
.pl-tline{ margin:0 0 3px; font-size:13px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }

/* ［＋ 新規作成］：一覧の最下部・カードの枠の外（2026-10-01 ユーザー指示）。
   ★ カードと同じ幅・角丸で、点線の枠＝「ここに1枚足せる」 */
.pl-newcard{
  display:block; width:100%; margin:2px 0 12px; padding:14px 0;
  background:var(--panel); border:1.5px dashed var(--brand); border-radius:12px;
  color:var(--accent); font:inherit; font-size:14px; font-weight:700; cursor:pointer;
}
.pl-newcard:active{ background:var(--brand-soft); }

/* 確認画面：重なっている過去のプランがあるときの案内（止めるのではなく、押したら聞く） */
.pl-ovnote{
  margin:0 0 10px; padding:9px 11px; border-radius:9px; font-size:12.5px; line-height:1.6;
  color:#7a5a12; background:#fdf4e3;
}
/* 終了日を縮めてよいかの聞き返し */
.pl-trim-list{ margin:4px 0 8px; padding:0 0 0 18px; font-size:12.5px; line-height:1.6; }
.pl-trim-list li{ margin:0 0 6px; }
.pl-trim-to{ color:var(--neg); }
/* ★ 日付の範囲は途中で折り返さない（「2026-」と「09-30」が行で分かれると読めない） */
.pl-trim-range{ white-space:nowrap; }
/* ★ 押せない［はじめる］は薄くする（押せるように見えて押しても何も起きない、にしない） */
.pl-ops .btn:disabled{ opacity:.45; cursor:default; }
.pl-trim-note{ margin:0 0 12px; font-size:11.5px; color:var(--muted); line-height:1.6; }

/* ★ カードの中は外より 26px 狭い（main の padding ＋ 枠 ＋ カードの padding）。
   .pl-ops は flex:1 の2等分なので、1列あたり約164px——
   「新しいプランをつくる」（11字 × 14px ＋ 左右 padding 32px ＝ 約178px）が
   【必ず2行に折り返す】（2026-09-24 レンダリングで実測）。
   字を小さくして逃げるのではなく、padding を詰めて1行に収める */
.pl-card-b .pl-ops{ gap:7px; margin:12px 0 4px; }
.pl-card-b .pl-ops .btn{ padding:9px 6px; font-size:13px; white-space:nowrap; }
/* ★ それでも入らない端末（狭い・字を大きくしている）では、折り返さずに縮める */
.pl-card-b .pl-ops .btn{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
/* ★ 選べないのに必ず出るもの（プランの名前と対象期間）の断り。
   選択肢の上に置く——下に置くと、選び終わってから知ることになる */
.pt-always{ text-align:left; margin:8px 0 12px; padding:7px 9px;
  background:#fdf4e3; color:#7a5a12; border-radius:8px; }

/* ══════════════════════════════════════════════════════════════
   セット登録／セット表示（予約の画面・ユーザー指示 2026-09-28）
   ══════════════════════════════════════════════════════════════ */
/* 状態の帯。★ 定型セットのときは赤（本日の日付と同じ色）で、操作する右枠と揃える
   （2026-09-29 ユーザー指示。旧版は緑） */
.rs-mode.is-set{background:#fdecea;border:1px solid var(--neg);color:var(--neg)}
/* ★ 定型セットのあいだは右枠を赤の実線にする＝いま操作するのはこちら、と分かる */
#rs-side.is-sets{border:2px solid var(--neg);padding:5px}
/* 見出し「定型セット」（旧「戻る」の位置） */
.rs-sets-h{margin:0;padding:2px 0 3px;font-size:11.5px;font-weight:700;color:var(--neg);
  text-align:center;letter-spacing:.04em}
/* 定型セット貼付で選んだセット */
.rs-slot.is-pick .rs-slot-b{background:var(--neg);border-color:var(--neg);color:#fff}
/* コピー中・移動中は、そのボタンが「×」（押すとやめる） */
#rs-side .rs-op.is-cancel{font-size:17px;font-weight:700;line-height:1;padding:6px 0;
  color:var(--neg);border-color:var(--neg)}
/* 削除（その日の予定を全部外す） */
#rs-side .rs-op-del{color:var(--neg)}
.btn.rs-danger{background:var(--neg);border-color:var(--neg);color:#fff;font-weight:700}

/* 右枠：表示１は6つに増えたので少し詰める（外寸 ≈ 89px・縦積みのまま） */
#rs-side .rs-op{padding:7px 0;font-size:11.5px;line-height:1.25}

/* 表示２：セットA〜E */
/* ★「戻る」は一番下（2026-09-29 ユーザー指示）。右枠は縦並びなので margin-top:auto で底へ寄せる */
.rs-back{background:none;border:none;margin-top:auto;padding:6px 2px 2px;font-size:11.5px;font-weight:700;
  color:var(--accent);text-align:center;cursor:pointer}
.rs-slot{display:flex;align-items:stretch;gap:3px}
/* ★ 名前が長くても枠からはみ出させない（全文は title と確認画面に出る） */
.rs-slot-b{flex:1;min-width:0;padding:8px 4px;font-size:11.5px;font-weight:700;
  background:var(--panel);border:1px solid var(--brand);color:var(--accent);border-radius:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.rs-slot-b:active{background:var(--brand-soft)}
.rs-slot-ren{flex:none;width:20px;padding:0;background:none;border:none;color:var(--muted);
  font-size:12px;cursor:pointer}
/* ★ 中身の無い枠は薄くする（当てても何も入らないことが、押す前に分かる） */
.rs-slot.is-empty .rs-slot-b{border-style:dashed;border-color:var(--line);color:var(--muted);font-weight:400}

/* 登録の確認画面 */
.rs-sm-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;
  font-weight:700;margin:4px 0 2px}
.rs-sm-name input{flex:1;min-width:8em;border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;font-size:14px;font-weight:400}
.rs-sm-name input:focus{outline:none;border-color:var(--brand)}
.rs-sm-err{margin:2px 0 4px;min-height:1em}
.rs-sm-warn{font-size:12px;color:#7a5a12;background:#fdf4e3;border-radius:7px;padding:6px 9px;margin:4px 0 8px}
.rs-sm-list{margin:6px 0 12px;max-height:46vh;overflow-y:auto}
.rs-sm-ex{border-top:1px solid var(--line);padding:8px 0 6px}
.rs-sm-ex:first-child{border-top:none}
/* ★ 部位と種目は1行（「[胸] プッシュアップ」）。削除は右端 */
.rs-sm-h{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.rs-sm-t{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-sm-del{flex:none;background:none;border:1px solid var(--neg);color:var(--neg);
  border-radius:999px;font-size:11px;font-weight:700;padding:3px 10px;cursor:pointer}
.rs-sm-del:active{background:#fdecea}
/* 1セットぶんの行（「1　自重　10回」）。★ Check の Training と同じ並び・同じ数字の揃え */
.rs-sm-set{display:grid;grid-template-columns:2.2em 5em 1fr;align-items:baseline;
  font-size:13px;padding:2px 0 2px 6px;font-variant-numeric:tabular-nums}
.rs-sm-set .tr-no{font-size:11px}
.rs-sm-from{font-size:11px;color:var(--muted);margin:2px 0 0 6px}

/* ══════════════════════════════════════════════════════════════
   予約のカードにセットの行を足す（2026-09-29 ユーザー指示）
     [胸] プッシュアップ  ×
       1  自重   10 回
   ══════════════════════════════════════════════════════════════ */
/* ★ カードは縦積みにする。1行目（.rs-row）が今までの横並び、その下にセットの行 */
.rs-card{flex-direction:column;align-items:stretch;gap:0;cursor:pointer}
.rs-row{display:flex;align-items:center;gap:8px;min-width:0}
.rs-sets{display:block;margin:4px 0 0 2px}
/* 1セットぶんの行。★ Check の Training と同じ並び（番号・重量・回数）と数字の揃え */
.rs-set{display:grid;grid-template-columns:2.2em 5.2em 1fr;align-items:baseline;
  font-size:12.5px;color:var(--ink);padding:1px 0 1px 4px;font-variant-numeric:tabular-nums}
.rs-set .tr-no{font-size:11px}
/* 確認画面（セット登録）の種目の行でも、予約のカードと同じ部位の札を使う */
.rs-sm-t .rs-part{margin-right:6px;font-weight:400}

/* セットの入力（カードをタップしたとき） */
.rs-se-head,.rs-se-row{display:grid;grid-template-columns:2em 1fr 1fr 28px;gap:8px;align-items:center}
.rs-se-head{font-size:11px;color:var(--muted);font-weight:700;margin:0 0 4px}
.rs-se-row{margin:0 0 6px}
.rs-se-row input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);
  border-radius:8px;padding:8px 9px;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.rs-se-row input:focus{outline:none;border-color:var(--brand)}
.rs-se-row input::placeholder{color:#b3b9c1;text-align:right}
.rs-se-del{width:28px;height:28px;border:none;background:none;color:var(--muted);font-size:17px;cursor:pointer}
.rs-se-add{width:100%;margin:4px 0 6px}
.rs-se-note{text-align:left;margin:0 0 12px}

/* ══════════════════════════════════════════════════════════════
   予定と実績の共通画面（2026-09-29 ユーザー指示）
   上部＝予定入力／実績入力で切り替え、下部＝共通（枠の左が予定、右が実績）
   ══════════════════════════════════════════════════════════════ */
/* 「プラン：◯◯」はボタン（タップで Plan の取組ー運動欄へ）。★ 押せることが分かるよう › を添える */
.rs-plan{background:none;border:none;padding:0;text-align:left;cursor:pointer;font:inherit;
  font-size:13px;color:var(--muted)}
.rs-plan::after{content:" ›";color:var(--muted)}
.rs-plan:active{color:var(--ink)}
/* 「予定をまとめて編集」／「編集完了」。★ 押すと何が起きるかを書き、色は【行き先の色】
   （2026-09-29 ユーザー指示：表記と色を逆に）。行き先を書いたので ⇄ は外した */
.rs-view{flex:0 0 auto;border:none;border-radius:999px;padding:7px 12px;cursor:pointer;
  font-size:12.5px;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap}
.rs-view.is-plan{background:var(--plan)}
.rs-view.is-actual{background:var(--act)}
/* 戻る／やり直し（「編集完了」の右）。★ 形で分かる矢印に、小さく言葉を添える。
   見出し行に3つ並ぶので、言葉は矢印の下に置いて幅を取らない */
.rs-undo,.rs-redo{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:40px;padding:3px 4px 2px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);font:inherit;font-size:9.5px;line-height:1.1;cursor:pointer}
.rs-undo svg,.rs-redo svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.rs-undo:active,.rs-redo:active{background:var(--plan-soft)}
/* ★ 戻せるものが無いときは薄くする（押しても何も起きないことが、押す前に分かる） */
.rs-undo:disabled,.rs-redo:disabled{color:#b3b9c1;cursor:default;background:var(--panel)}
/* 自動保存に失敗したときの帯（失敗を黙っていると気付けない） */
.rs-savebad{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;padding:7px 10px;
  border-radius:8px;font-size:12.5px;font-weight:700;background:#fdecea;border:1px solid var(--neg);color:var(--neg)}
.rs-retry{margin-left:auto;background:var(--neg);color:#fff;border:none;border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
/* 実績入力では右枠を出さない＝カレンダーが横いっぱい */
#rs-side.hidden{display:none !important}
/* 実績入力のカレンダー：記録のある日に橙の輪（予約のある日の塗りと重ねて見える） */
.cal-cell.cal-done::before{ box-shadow:0 0 0 2px var(--act) }
.cal-cell.cal-done{ font-weight:700 }

/* 下部：種目ごとの枠。1行目は「[部位] 種目 ×」、その下に予定（左）と実績（右） */
.rs-pa{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.rs-pbox,.rs-abox{display:block;min-width:0;text-align:left;border-radius:8px;padding:5px 6px 6px;
  font:inherit;cursor:pointer}
.rs-pbox{background:var(--plan-soft);border:1px solid var(--plan-line)}
.rs-abox{background:var(--act-soft);border:1px solid var(--act-line)}
.rs-pbox:active{border-color:var(--plan)}
.rs-abox:active{border-color:var(--act)}
/* ★ 予定の無い枠は「予定なし」を薄く出すだけ（押しても何も起きない枠を押せそうに見せない） */
.rs-pbox.is-none{background:transparent;border-style:dashed;cursor:default}
/* ★ 2026-10-02（ユーザー指示）：片方しか無い枠は、無いほうの欄を【点線・薄く】する。
   実績あり・予定なし → 予定の欄／予定あり・実績なし → 実績の欄。
   実績の欄は薄くしても押せる（押せば記録の画面）。押したときだけ少し濃くして、押せたことを見せる */
.rs-pbox.is-none,.rs-abox.is-none{background:transparent;border-style:dashed;opacity:.5}
.rs-abox.is-none:active{opacity:.8;border-color:var(--act)}
.rs-box-h{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;margin:0 0 2px}
.rs-pbox .rs-box-h{color:var(--plan)}
.rs-abox .rs-box-h{color:var(--act)}
.rs-box-none{display:block;font-size:11.5px;color:var(--muted);padding:2px 0}
/* 枠の中のセットの行は半分の幅に収める */
.rs-pa .rs-set{grid-template-columns:1.6em 1fr 1fr;font-size:12px;padding:1px 0}
/* 実績だけの枠（予定に無い種目をやった）。★ 予定の枠と見分けが付くよう点線 */
.rs-card.is-actonly{border-style:dashed;cursor:default}

/* Plan の取組ー運動欄へ飛んできたとき、一瞬だけ目立たせる */
.pl-nest{transition:background-color .6s ease}
.pl-nest.is-flash{background:var(--brand-soft)}