*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#E8E8F0;--bg2:#DDDDE8;--bg3:#D0D0DC;--nm-bg:#E8E8F0;--nm-light:#FFFFFF;--nm-dark:#C8C8D4;--nm-shadow:rgba(160,160,180,.45);--nm-highlight:rgba(255,255,255,.85);--nm-accent:#7B7FCF;--nm-accent2:#A78BFA;--gold:#7B7FCF;--gold-light:#C4C4E0;--gold-dark:#5A5E9A;--rose:#E8837A;--rose-light:#FDECEA;--cream:#F0F0FA;
  --text:#1a1a1a;--text2:#666;--text3:#aaa;
  --border:#e8e8e4;--border2:#d4d4ce;
  --green:#1D9E75;--green-dark:#0F6E56;--green-bg:#E1F5EE;
  --red:#E24B4A;--red-dark:#A32D2D;--red-bg:#FCEBEB;
  --blue:#378ADD;--blue-dark:#185FA5;--blue-bg:#E6F1FB;
  --purple:#7F77DD;--purple-dark:#534AB7;--purple-bg:#EEEDFE;
  --amber:#BA7517;--amber-dark:#633806;--amber-bg:#FAEEDA;
  --r:14px;--rsm:9px;
}
html,body{height:100%;background:var(--bg3);font-family:'M PLUS Rounded 1c',-apple-system,'Hiragino Sans',sans-serif;color:var(--text);font-size:16px;line-height:1.5;overflow:hidden}
button{font-family:inherit;cursor:pointer;outline:none;-webkit-appearance:none}
input,select{font-family:inherit;outline:none;-webkit-appearance:none}
.app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;height:var(--okidoki-app-vh, 100dvh);display:flex;flex-direction:column;background:var(--bg3);overflow:hidden;padding-top:env(safe-area-inset-top)}
.screen{display:none;flex-direction:column;height:100%;overflow-x:hidden}
.screen.active{display:flex}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes tutHandWobble{0%,100%{transform:translateX(0)}50%{transform:translateX(-9px)}}
@keyframes tutHandWobbleV{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* HOME */
.home-wrap{flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,#C6C6D8 0%,var(--nm-bg) 42%);justify-content:space-between;padding-bottom:44px;position:relative;z-index:0}
.home-top-wave{position:absolute;top:0;left:0;width:100%;height:140px;pointer-events:none;z-index:-1}
.home-wrap.no-ad-spacing{padding-bottom:94px;}
.home-top{position:relative;z-index:1;display:flex;flex-direction:column;opacity:0}
.home-top.show{animation:fadeUp .5s ease .1s forwards}
/* プロフィール行 */
.home-profile-row{display:flex;align-items:center;gap:16px;padding:32px 28px 18px}
.home-profile-text{flex:1;min-width:0}
.home-greeting{font-size:10px;font-weight:700;color:var(--nm-accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;opacity:.8;text-align:center}
.home-username{font-size:22px;font-weight:700;color:#4A4A6A;letter-spacing:-.02em;text-align:center;position:relative;z-index:25}
/* ホームのユーザーアイコン右：生理周期フェーズをいつでも見返せるアイコン
   （fa-float=ゆっくり浮遊+回転／中のfa-fade=ゆっくり明滅、を別要素にして両方同時にかけている） */
.cycle-phase-bubble-btn{position:absolute;left:calc(100% - 4px);top:6%;
  width:60px;height:60px;border:none;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:15;
  color:#E0607A;font-size:36px;
  filter:drop-shadow(2px 3px 4px rgba(0,0,0,.15));
  transition:transform .1s ease-out}
/* タップした瞬間、はっきり分かるくらい大きく縮める。
   :active ではなくpointerdown/upのJS制御にしているのは、モバイルブラウザによっては
   :active が意図通り発火しないことがあり、確実に効かせたいため。 */
.cycle-phase-bubble-btn.cpb-pressed{transform:scale(.55)}
/* ホームのユーザーアイコン右下：今日スケジュールモードの予定が1件でもあれば出す浮遊アイコン。
   ハートアイコン(.cycle-phase-bubble-btn)と重ならない位置に配置。
   浮遊・波紋(.cpb-ripple)・押下時の縮小(.cpb-pressed)の仕組みはハートと共通の
   .fa-floatクラスをそのまま流用するが（新しいクラスは増やさない）、動きの軌道自体は
   ハートとはっきり区別できるよう、.schedule-float-btn配下でだけ別のキーフレームに
   差し替えている。アイコン自体(.fa-swing)は看板のように左右に振り子運動する。 */
.schedule-float-btn{position:absolute;left:calc(100% - 4px);top:62%;
  width:60px;height:60px;border:none;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:15;
  color:#6666AA;font-size:36px;
  filter:drop-shadow(2px 3px 4px rgba(0,0,0,.15));
  transition:transform .1s ease-out}
.schedule-float-btn.cpb-pressed{transform:scale(.55)}
.fa-float{position:relative;display:inline-block;animation:cyclePhaseFloat 5.5s ease-in-out infinite}
@keyframes cyclePhaseFloat{
  0%{transform:translate(0,0) rotate(0deg)}
  22%{transform:translate(3px,-6px) rotate(4deg)}
  50%{transform:translate(-2px,-10px) rotate(-3deg)}
  74%{transform:translate(-4px,-4px) rotate(3deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}
.schedule-float-btn .fa-float{animation:scheduleOrbit 4s ease-in-out infinite}
@keyframes scheduleOrbit{
  0%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(-6px,-4px) rotate(-6deg)}
  50%{transform:translate(0,-9px) rotate(0deg)}
  75%{transform:translate(6px,-4px) rotate(6deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}
.fa-swing{display:inline-block;transform-origin:50% 0%;animation:faSwing 1.8s ease-in-out infinite}
@keyframes faSwing{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(14deg)}
  75%{transform:rotate(-14deg)}
}
/* タップできることが伝わるよう、ハート（浮遊中の今の位置）から4秒に1回、
   細い白の二重リングがふわっと広がって消える */
.cpb-ripple{position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;
  border-radius:50%;border:1.5px solid #fff;opacity:0;pointer-events:none;
  animation:cpbRipple 4s ease-out infinite}
.cpb-ripple-2{animation-delay:.28s}
/* その日一度でも開いて確認済み（かつ予定アイコンなら新着バッジも無い）場合は波紋を止める */
.no-ripple .cpb-ripple{display:none}
@keyframes cpbRipple{
  0%{opacity:0;transform:scale(.6)}
  6%{opacity:.85}
  40%{opacity:0;transform:scale(2.3)}
  100%{opacity:0;transform:scale(2.3)}
}
@media (prefers-reduced-motion: reduce){
  .fa-float{animation:none}
  .schedule-float-btn .fa-float{animation:none}
  .fa-swing{animation:none}
  .cpb-ripple{animation:none;display:none}
  .daily-post-float-btn{animation:none}
}
/* ヒーローエリア */
.home-hero-area{padding:4px 28px 10px}
.home-center-top{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 28px 20px}
.home-wrap.no-ad-spacing .home-center-top{padding-top:98px;}
.home-date{font-size:11px;color:#8888AA;font-weight:500;letter-spacing:.04em;text-align:center}
.home-title{font-size:19px;font-weight:700;color:#4A4A6A;letter-spacing:-.02em;text-align:center}
/* ボタンエリア */
.home-btns{display:flex;flex-direction:column;gap:0;padding:0 28px;opacity:0;justify-content:space-between;flex:1}
.home-sub-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:320px;margin:0 auto;width:100%}
.home-btns.show{animation:fadeUp .6s ease .42s forwards}
.home-btn{display:none}
.home-btn:active{display:none}
.home-btn.primary,.home-btn.secondary{display:none}
.hb-icon{font-size:28px;line-height:1}
.hb-label{font-size:15px;font-weight:700;letter-spacing:-.01em}
/* ヒーローボタン（ニューモーフィズム浮き上がり） */
.home-btn-hero{width:220px;height:220px;background:linear-gradient(145deg,#C8C8B4,#B7B7A4);border:none;border-radius:50%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;box-shadow:inset 3px 3px 10px rgba(255,255,255,.55),inset -2px -2px 8px rgba(140,135,120,.3);transition:all .18s;position:relative;overflow:hidden;margin:0 auto}
.home-btn-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,transparent 100%);border-radius:50% 50% 0 0;pointer-events:none}
.home-btn-hero:active{box-shadow:4px 4px 10px rgba(100,100,160,.4),-2px -2px 6px rgba(255,255,255,.6);transform:scale(.985)}
.hero-check-icon{font-size:42px;font-weight:800;color:rgba(255,255,255,.95);line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.hero-label{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.01em}
.hero-sub{font-size:11px;color:rgba(255,255,255,.72);font-weight:500;letter-spacing:.06em}
/* サブボタン（ニューモーフィズムカード） */
.home-btn-hero-ring{position:relative;width:220px;height:220px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;margin:0 auto;box-shadow:16px 16px 40px rgba(140,130,160,.65),-14px -14px 34px rgba(255,255,255,.95),inset 3px 3px 8px rgba(255,255,255,.7),inset -2px -2px 6px rgba(160,150,180,.3)}
/* ホーム中央の「今日のチェック」ボタン右上：その日のチェックを完了済み（日付が変わるまで）の間だけ出す、
   一言投稿への浮遊アイコン。波紋(.cpb-ripple)・押下時の縮小(.cpb-pressed)の仕組みはハート・予定アイコンと
   共通のものをそのまま流用するが、動き自体はチェックボタンの周りをぐるぐる周回する専用アニメーション
   (dailyPostOrbit)にしており、ボタン本体ごと動かして向きも一緒に変える（衛星のように回る）。 */
/* left/topはJS側（_positionDailyPostFloatBtn）でリング中心の座標を計算して都度セットする。
   .home-top（かつてない親）と同じスタッキングコンテキストに入れる必要があるため、
   .home-btn-hero-ringの中から.home-topの直下（.home-center-topの兄弟）に移設した。 */
.daily-post-float-btn{position:absolute;left:0;top:0;margin:-23px 0 0 -23px;
  width:46px;height:46px;border:none;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:16;
  color:#fff;font-size:26px;
  filter:drop-shadow(2px 3px 4px rgba(0,0,0,.15));
  transition:transform .1s ease-out, opacity .4s ease;
  animation:dailyPostOrbit 12s linear infinite}
.daily-post-float-btn.cpb-pressed{transform:scale(.55)}
.daily-post-float-btn .fa-float{animation:none} /* 本体ごと周回させるので、アイコン単体の浮遊アニメは重ねない */
/* 土星の輪っかのイメージ：中心線ではなくかなり上寄りに、横長の平たい楕円を描いて周回する */
/* 土星の輪っかのような、平べったい横長の楕円軌道。中心の高さではなく、かなり上寄りの位置をぐるぐる周回する。
   下側の弧（リングに近い側）を通る間はずっと左向き、上側の弧（リングから遠い側）を通る間はずっと右向きにする。
   左向きは rotate(180deg) だと上下逆さになってしまうため、scaleX(-1) で左右反転だけを行い、
   左右の端（軌道が一番外側に来た瞬間）は scaleX(0) で一瞬すぼめてから反対向きに開く形で切り替える。 */
@keyframes dailyPostOrbit{
  0%{transform:translate(120px,-130px) scale(0,1); z-index:30}
  4.17%{transform:translate(115.9px,-123.53px) scale(-1,1); z-index:30}
  12.5%{transform:translate(84.9px,-112.3px) scale(-1.1,1.1); z-index:30}
  25%{transform:translate(0px,-105px) scale(-1.2,1.2); z-index:30}
  37.5%{transform:translate(-84.9px,-112.3px) scale(-1.1,1.1); z-index:30}
  45.83%{transform:translate(-115.9px,-123.53px) scale(-1,1); z-index:30}
  50%{transform:translate(-120px,-130px) scale(0,1); z-index:30}
  54.17%{transform:translate(-115.9px,-136.47px) scale(1,1); z-index:30}
  62.5%{transform:translate(-84.9px,-147.7px) scale(0.85,0.85); z-index:20}
  75%{transform:translate(0px,-155px) scale(0.7,0.7); z-index:20}
  87.5%{transform:translate(84.9px,-147.7px) scale(0.85,0.85); z-index:20}
  95.83%{transform:translate(115.9px,-136.47px) scale(1,1); z-index:30}
  100%{transform:translate(120px,-130px) scale(0,1); z-index:30}
}
.home-sub-btn{background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.home-sub-btn-inner{background:var(--nm-bg);border-radius:50%;width:80px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:none;box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 2px 2px 5px rgba(255,255,255,.7),inset -1px -1px 4px rgba(160,150,180,.25);transition:all .18s;position:relative;margin:0 auto}
.home-sub-btn:active .home-sub-btn-inner{box-shadow:2px 2px 6px var(--nm-shadow),-1px -1px 4px var(--nm-highlight);transform:scale(.95)}
/* オンボーディング中：未解放の機能ボタン */
.home-sub-btn.locked .home-sub-btn-inner{opacity:.4;filter:grayscale(1)}
.home-sub-btn.locked .home-sub-btn-inner::after{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;right:2px;bottom:6px;font-size:11px;color:#8888AA;opacity:.9}
/* オンボーディング中：未解放のFABボタン（カレンダー・グラフ類） */
.cal-fab.locked,.qgraph-fab.locked,.weight-fab.locked{opacity:.35;filter:grayscale(1)}
.sub-icon{font-size:22px;line-height:1}
.sub-label{font-size:10px;font-weight:700;color:#6666AA;letter-spacing:.01em;white-space:nowrap}

/* SUB HEADER */
.sub-header{position:relative;background:var(--bg);border-bottom:0.5px solid var(--border);padding:12px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.back-btn{background:var(--nm-bg);border:none;border-radius:50%;width:46px;height:46px;font-size:18px;color:#6666AA;display:flex;align-items:center;justify-content:center;box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 2px 2px 5px rgba(255,255,255,.7),inset -1px -1px 4px rgba(160,150,180,.25);cursor:pointer;transition:all .18s}
.back-btn:active{box-shadow:2px 2px 6px var(--nm-shadow),-1px -1px 4px var(--nm-highlight);transform:scale(.94)}
.sub-title{font-size:17px;font-weight:700;color:var(--text);position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;white-space:nowrap}

/* CHECK */
.check-outer{flex:1;display:flex;flex-direction:column;overflow:hidden}
.progress-bar-wrap{flex-shrink:0;background:var(--bg);padding:11px 20px 9px;border-bottom:0.5px solid var(--border)}
.progress-row{display:flex;justify-content:space-between;margin-bottom:6px}
.progress-lbl{font-size:13px;color:var(--text2)}
.progress-pct{font-size:13px;font-weight:700;color:#6666AA}
.progress-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:#6666AA;border-radius:2px;transition:width .4s ease}
.q-center{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;padding:20px 22px}
.q-inner{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:18px;margin:auto 0}
.q-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.03em;align-self:flex-start}
.q-text{font-size:21px;font-weight:700;color:var(--text);line-height:1.45;letter-spacing:-.02em;text-align:center;width:100%}
.q-text-cursor{display:inline-block;width:2px;height:1em;background:var(--nm-accent);margin-left:1px;vertical-align:-0.15em;animation:qTextBlink .8s step-end infinite}
@keyframes qTextBlink{0%,100%{opacity:1}50%{opacity:0}}
/* 3GT（今日良かったこと3つ）：ノートのページに直接書き込むような見た目。
   大きな番号(1.2.3.)＋枠線の無い書き込みエリア。手書き風に見えるよう明朝×筆記体寄りの
   Yuji Syukuフォントを使う。横スクロールさせず、はみ出す分は自然に折り返す。 */
.gt-notebook{width:100%;max-width:400px;margin:6px auto 0;box-sizing:border-box;position:relative;
  background:#FBF8EF;border-radius:8px;padding:16px 22px 14px 40px;
  box-shadow:0 4px 14px rgba(80,60,30,.10),0 1px 4px rgba(80,60,30,.08);}
.gt-notebook-holes{position:absolute;left:14px;top:0;bottom:0;width:12px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;pointer-events:none}
.gt-notebook-holes span{display:block;width:10px;height:10px;border-radius:50%;
  background:rgba(0,0,0,.32);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.gt-notebook-row{display:flex;align-items:flex-start;gap:8px;padding:10px 0;border-bottom:1px dashed rgba(60,45,20,.14)}
.gt-notebook-row:last-child{border-bottom:none}
.gt-notebook-num{font-family:'Yuji Syuku',serif;font-size:32px;line-height:1.1;color:var(--text);flex-shrink:0;padding-top:2px;user-select:none}
.gt-notebook-input{flex:1;min-width:0;height:105px;border:none;background:none;outline:none;resize:none;overflow:hidden;
  font-family:'Yuji Syuku',serif;font-size:19px;color:#3A3226;line-height:1.6;padding:4px 0 0;margin:0;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word}
.gt-notebook-input::placeholder{font-family:'Yuji Syuku',serif;color:#CBBFA0}
.yn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.yn-btn{padding:17px;border-radius:var(--rsm);border:1.5px solid var(--border2);background:var(--bg2);font-size:17px;font-weight:700;color:var(--text2);display:flex;align-items:center;justify-content:center;gap:7px;transition:all .15s}
.yn-btn.yes.sel{background:#E8E8F8;border-color:var(--nm-accent);color:var(--nm-accent)}
.yn-btn.no.sel{background:var(--red-bg);border-color:var(--red);color:var(--red-dark)}
.yn-btn:active{transform:scale(.96)}
/* 今日のチェックの標準YES/NOボタン：ホームのサブボタン(80px)より一回り大きい丸ボタン、
   質感・配色もサブボタンと同じニューモーフィズム。選択時だけYES=パープル/NO=赤に色付く。 */
.ynb-row{display:flex;justify-content:center;align-items:flex-start;gap:28px;width:100%;padding:6px 0}
.ynb-btn{background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center}
.ynb-btn-inner{background:var(--nm-bg);border-radius:50%;width:96px;height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 2px 2px 5px rgba(255,255,255,.7),inset -1px -1px 4px rgba(160,150,180,.25);transition:all .18s;margin:0 auto}
.ynb-btn:active .ynb-btn-inner{box-shadow:2px 2px 6px var(--nm-shadow),-1px -1px 4px var(--nm-highlight);transform:scale(.95)}
.ynb-icon{font-size:30px;color:#6666AA;line-height:1;transition:color .15s}
.ynb-label{font-size:12px;font-weight:800;color:#6666AA;letter-spacing:.02em;transition:color .15s}
.ynb-btn.yes.sel .ynb-btn-inner{background:#E8E8F8}
.ynb-btn.yes.sel .ynb-icon,.ynb-btn.yes.sel .ynb-label{color:var(--nm-accent)}
.ynb-btn.no.sel .ynb-btn-inner{background:var(--red-bg)}
.ynb-btn.no.sel .ynb-icon,.ynb-btn.no.sel .ynb-label{color:var(--red-dark)}
.supp{background:var(--bg2);border-radius:var(--rsm);padding:14px;border:0.5px solid var(--border);width:100%}
.supp-lbl{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:8px}
.supp input{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;font-size:16px;color:var(--text)}
.supp input:focus{border-color:var(--green)}
/* 5段階評価ボタン：一列に並ぶ小さめの丸ボタン。低評価(赤)〜高評価(青)のグラデーションで色付けし、
   お通じ記録の丸いカラーサンプルと同じ光沢（左上ハイライト＋右下シャドウ）を重ねている。
   背景色そのものは各ボタンごとにインラインで指定する（_scoreLevelColor()参照）。*/
.score-row{display:flex;justify-content:center;align-items:flex-start;gap:8px;width:100%;flex-wrap:nowrap}
.score-btn{position:relative;width:42px;height:42px;flex-shrink:0;border-radius:50%;border:none;font-size:14px;font-weight:800;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;cursor:pointer;transition:transform .15s;box-shadow:0 2px 5px rgba(0,0,0,.28)}
.score-btn::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 12%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 72% 80%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(155deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.12) 100%);
}
.score-btn>*{position:relative;z-index:1;line-height:1}
.score-btn .score-hint{font-size:6.5px;font-weight:700;opacity:.95;margin-top:1px;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.score-btn i{font-size:19px;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.score-btn.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--nm-accent),0 2px 5px rgba(0,0,0,.28);transform:scale(1.14)}
.score-btn:active{transform:scale(.92)}
.nav-bar{flex-shrink:0;background:var(--bg);border-top:0.5px solid var(--border);padding:12px 20px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nav-btn{padding:15px;border-radius:var(--rsm);border:0.5px solid var(--border2);background:var(--bg2);font-size:15px;font-weight:700;color:var(--text2);transition:all .15s}
.nav-btn.next{background:var(--nm-accent);border-color:var(--nm-accent);color:#fff}
.nav-btn:disabled{opacity:.3;pointer-events:none}
.nav-btn:not(:disabled):active{transform:scale(.97)}

/* SUMMARY */
.scroll-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 16px 32px}
.summary-hero{text-align:center;padding:0 0 20px}
.summary-score{font-size:68px;font-weight:700;letter-spacing:-.05em;line-height:1}
.summary-sub{font-size:14px;color:var(--text2);margin-top:10px}
/* 達成度のデジタル電光掲示板風表示（画面幅いっぱいの黒スクリーン） */
.summary-score-digital-wrap{display:block;margin:-20px -16px 0;background:#0A0A0A;padding:34px 10px;box-shadow:inset 0 -6px 14px rgba(0,0,0,.5);position:relative;overflow:visible}
.summary-score-digital{font-family:'VT323',monospace;font-size:min(30vw,150px);line-height:1;letter-spacing:.02em;color:#F5D33C;text-shadow:0 0 8px rgba(245,211,60,.85),0 0 22px rgba(245,211,60,.55),0 0 40px rgba(245,211,60,.3);white-space:nowrap;display:inline-block;transform:scale(1);transition:transform 1.4s cubic-bezier(.16,.84,.44,1)}
.summary-score-digital.grown{transform:scale(1.7);position:relative;z-index:50}
/* CONFETTI */
.confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}
@keyframes scorePopIn{0%{transform:scale(0.3);opacity:0}60%{transform:scale(1.18)}80%{transform:scale(0.95)}100%{transform:scale(1);opacity:1}}
.score-celebrate{animation:scorePopIn .55s cubic-bezier(.36,.07,.19,.97) forwards}

.summary-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.s-row{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--rsm);padding:12px 14px;display:flex;align-items:flex-start;gap:10px}
.s-q{flex:1;font-size:14px;color:var(--text);line-height:1.4}
.s-supp{font-size:11px;color:var(--text2);margin-top:3px}
.s-ans{font-size:13px;font-weight:700;flex-shrink:0}
.s-ans.yes{color:var(--nm-accent)}
.s-ans.no{color:var(--red-dark)}
.primary-btn{width:100%;padding:15px;background:var(--nm-accent);color:#fff;border:none;border-radius:var(--r);font-size:15px;font-weight:700;margin-bottom:10px}
.primary-btn:active{opacity:.85}
.redo-btn{width:100%;padding:14px 8px;background:var(--bg);border:none;border-radius:22px;font-size:14px;font-weight:700;color:var(--nm-accent);cursor:pointer;box-shadow:6px 6px 14px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 1px 1px 2px rgba(255,255,255,.7);transition:all .15s}.secondary-btn{width:100%;padding:15px;background:var(--bg);color:var(--text);border:0.5px solid var(--border2);border-radius:var(--r);font-size:15px;font-weight:700;margin-bottom:10px}
.secondary-btn:active{background:var(--bg2)}
.ghost-btn{width:100%;padding:13px;background:none;border:0.5px solid var(--border2);border-radius:var(--r);font-size:14px;color:var(--text2)}
.ghost-btn:active{background:var(--bg2)}

/* HISTORY */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.stat-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--rsm);padding:12px 8px;text-align:center}
.stat-val{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.03em}
.stat-lbl{font-size:11px;color:var(--text2);margin-top:2px}
.period-tabs{display:flex;gap:6px;margin-bottom:16px}
.p-tab{padding:7px 16px;border-radius:20px;border:1px solid var(--border2);background:var(--bg);font-size:13px;font-weight:700;color:var(--text2);box-shadow:4px 4px 10px var(--nm-shadow),-3px -3px 8px rgba(255,255,255,0.4);transition:all .15s}
.p-tab.active{background:var(--nm-accent);color:#fff;border-color:var(--nm-accent);box-shadow:inset 2px 2px 6px rgba(0,0,0,0.18),inset -1px -1px 3px rgba(255,255,255,0.15)}
.sec-lbl{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.heat-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:4px}
.heat-row{display:flex;gap:4px;min-width:max-content}
.heat-col{display:flex;flex-direction:column;gap:2px;align-items:center}
.heat-day-lbl{font-size:9px;color:var(--text3);height:12px;display:flex;align-items:center}
.heat-cell{width:32px;height:32px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.hc-none{background:var(--bg3);color:var(--text3)}
.hc-low{background:#9FE1CB;color:#085041}
.hc-mid{background:#5DCAA5;color:#04342C}
.hc-high{background:#1D9E75;color:#fff}
.hc-full{background:#0F6E56;color:#fff}
.legend-row{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text3);margin-top:6px;margin-bottom:18px;flex-wrap:wrap}
.lc{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.bar-lbl{font-size:12px;color:var(--text2);width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.bar-track{flex:1;height:9px;background:var(--bg3);border-radius:5px;overflow:hidden}
.bar-fill{height:100%;background:var(--green);border-radius:5px;transition:width .5s}
.bar-pct{font-size:11px;color:var(--text2);width:30px;text-align:right;flex-shrink:0}
.empty{text-align:center;padding:32px;color:var(--text3);font-size:14px;line-height:1.8}


/* PHOTO */
.home-photo-wrap{width:130px;height:130px;border-radius:50%;overflow:hidden;border:none;box-shadow:0 0 15px 10px rgba(255,255,255,1),0 0 40px 25px rgba(255,255,255,.75),0 0 80px 35px rgba(255,255,255,.4);background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
/* 缶バッジ風の丸い屈折効果は、SVGフィルター(feImage+feDisplacementMap)で試したが、
   iOS Safari (WebKit) でfeImageがdata URIのラスター画像を正しく扱えず、まったく効果が
   出なかったり、変位マップが壊れて写真の端が透明になったりする不具合が解消できなかった。
   そのため、CSSのSVGフィルターには頼らず、<canvas>に直接ピクセル単位で書き込む方式に
   切り替えた（getImageData/putImageDataはSafariでも昔から安定して動く枯れたAPIのため）。
   実際の描画・warp処理は _drawHomePhotoBulge() を参照。 */
.home-photo-wrap canvas{width:100%;height:100%;display:block;border-radius:50%}
/* 缶バッジ風の光沢・立体感（ドーム状のハイライトと影）。写真より手前に重ねる疑似要素なので、
   写真の内容そのものは一切いじらずに済む。輪郭のリング線は、屈折効果の見え方を邪魔していたため外した */
.home-photo-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.4) 12%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 72% 80%, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 42%),
    linear-gradient(155deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.14) 100%);
}
.home-photo-placeholder{font-size:40px;color:var(--text3);line-height:1}
.photo-upload-area{border:2px dashed var(--border2);border-radius:var(--r);padding:20px;text-align:center;cursor:pointer;background:var(--bg2);transition:border-color .2s}
.photo-upload-area:active{border-color:var(--green)}
.photo-preview-wrap{position:relative;width:100%;aspect-ratio:3/2}
.photo-preview-frame{position:absolute;inset:0;clip-path:url(#motivPhotoClip);-webkit-clip-path:url(#motivPhotoClip);background:#fff}
.photo-preview-clip{position:absolute;inset:1px;clip-path:url(#motivPhotoClip);-webkit-clip-path:url(#motivPhotoClip);overflow:hidden;background:var(--bg2)}
.photo-preview-img{width:100%;height:100%;object-fit:cover;display:block}
.photo-remove-btn{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:#D8D8D2;color:#666;border:none;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.photo-camera-btn{position:absolute;right:6px;bottom:6px;width:32px;height:32px;border-radius:50%;background:var(--bg2);border:0.5px solid var(--border2);color:var(--text2);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:2px 2px 6px rgba(0,0,0,.12);z-index:2}

/* REWARD POPUP */
.reward-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:3000;animation:fadeIn .2s ease}
.reward-popup{background:var(--bg);border-radius:20px;padding:32px 24px 28px;width:calc(100% - 48px);max-width:340px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);position:relative;overflow:hidden}
.reward-cracker-l,.reward-cracker-r{position:absolute;top:12px;font-size:40px;animation:crackerPop .5s ease forwards}
.reward-cracker-l{left:12px;transform-origin:bottom right}
.reward-cracker-r{right:12px;transform-origin:bottom left}
@keyframes crackerPop{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.3) rotate(10deg)}100%{transform:scale(1) rotate(0deg);opacity:1}}
.reward-emoji{font-size:48px;margin-bottom:12px;display:block;animation:scorePopIn .5s .3s ease both}
.reward-title{font-size:13px;font-weight:700;color:#6666AA;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.reward-msg{font-size:20px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:20px}
.reward-close{width:100%;padding:13px;background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;border:none;border-radius:var(--r);font-size:15px;font-weight:700;box-shadow:4px 4px 10px rgba(80,70,140,.45),-3px -3px 8px rgba(255,255,255,.6),inset 2px 2px 4px rgba(255,255,255,.25);cursor:pointer;transition:all .15s}
.reward-close:active{box-shadow:2px 2px 5px rgba(80,70,140,.4),-1px -1px 3px rgba(255,255,255,.5);transform:scale(.97)}
/* ごほうび設定フォーム */
.reward-form{background:#DCDCF4;border:1px solid #A0A0D0;border-radius:var(--rsm);padding:12px;margin-top:8px}
.reward-form-title{font-size:12px;font-weight:700;color:var(--amber-dark);margin-bottom:8px}
.reward-form input{width:100%;background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--rsm);padding:9px 12px;font-size:14px;color:var(--text);margin-bottom:8px}
.reward-form input:last-of-type{margin-bottom:0}
/* TOAST */
.toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.85);
  background:rgba(85,85,170,0.95);color:#fff;
  padding:14px 22px;border-radius:20px;
  font-size:15px;font-weight:700;letter-spacing:-.01em;
  white-space:normal;word-break:break-word;max-width:300px;width:calc(100% - 48px);text-align:center;z-index:9999;
  pointer-events:none;
  opacity:0;transition:opacity .22s ease,transform .22s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* TASKS */
.task-add-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:14px}
.task-add-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px}
.task-input-row{display:flex;gap:8px;margin-bottom:10px}
.task-input-wrap{position:relative;flex:1}
.task-input-wrap input{width:100%;box-sizing:border-box;background:#fff;border:0.5px solid var(--border2);border-radius:var(--rsm);padding:10px 34px 10px 12px;font-size:14px;color:var(--text)}
.task-input-wrap input:focus{border-color:#8888CC;background:var(--bg)}
.task-input-count{position:absolute;right:8px;bottom:8px;font-size:9px;color:var(--text3);pointer-events:none}
input[type=time]::-webkit-clear-button{display:none}
input[type=time]::-webkit-inner-spin-button{display:none}
input[type=time]::-ms-clear{display:none}
.task-add-btn{width:100%;padding:12px;background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;border:none;border-radius:var(--rsm);font-size:14px;font-weight:700;box-shadow:4px 4px 10px rgba(80,70,140,.45),-3px -3px 8px rgba(255,255,255,.6),inset 2px 2px 4px rgba(255,255,255,.25),inset -1px -1px 3px rgba(60,50,110,.3);transition:all .15s;cursor:pointer}
.task-add-btn:active{box-shadow:2px 2px 5px rgba(80,70,140,.4),-1px -1px 3px rgba(255,255,255,.5);transform:scale(.98)}
/* やること／おぼえがき／かいものリストの追加ボタン：入力欄と同じ行に収まる、テキスト「+」だけの
   丸ボタン。影が周囲の要素で見切れないよう、置き場所側（各task-input-row等）は
   overflow:hiddenにしないよう注意している。 */
.list-add-circle-btn{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;border:none;font-size:20px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:4px 4px 10px rgba(80,70,140,.45),-3px -3px 8px rgba(255,255,255,.6),inset 2px 2px 4px rgba(255,255,255,.25),inset -1px -1px 3px rgba(60,50,110,.3);transition:all .15s}
.list-add-circle-btn:active{box-shadow:2px 2px 5px rgba(80,70,140,.4),-1px -1px 3px rgba(255,255,255,.5);transform:scale(.92)}
.task-list-wrap{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.task-item{display:flex;align-items:center;gap:0;border-bottom:0.5px solid var(--border);background:var(--bg);transition:box-shadow .15s,transform .15s;user-select:none}
.task-item:last-child{border-bottom:none}
.task-item.dragging{box-shadow:0 8px 24px rgba(0,0,0,.13);opacity:.95;z-index:100;border-radius:var(--rsm);transform:scale(1.02)}
.task-item.drag-over{border-top:none;box-shadow:inset 0 3px 0 0 var(--nm-accent)}
.task-item.dragging.drag-over{box-shadow:0 8px 24px rgba(0,0,0,.13),inset 0 3px 0 0 var(--nm-accent)}
.task-drag-handle{padding:16px 8px 16px 14px;color:var(--text3);font-size:18px;cursor:grab;flex-shrink:0;display:flex;align-items:center}
.task-body{flex:1;padding:12px 0}
.task-text{font-size:14px;font-weight:600;color:var(--text);line-height:1.4;cursor:pointer}
.task-text-edit-input{width:100%;box-sizing:border-box;font-size:14px;font-weight:600;color:var(--text);line-height:1.4;font-family:inherit;background:transparent;border:none;border-bottom:1.5px solid var(--nm-accent);padding:0 0 2px}
.task-text-edit-input:focus{outline:none}
.task-time-badge{display:inline-flex;align-items:center;vertical-align:middle;gap:4px;font-size:11px;color:var(--blue-dark);background:var(--blue-bg);padding:2px 8px;border-radius:20px;margin-top:4px}
/* ===== 設定ウィザード（下から迫り上がるボトムシート・1問ずつ聞いていく） =====
   生理周期セクションで導入。他のセクションにも同じ形式で展開していく前提の汎用クラス */
.wiz-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;
  display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}
.wiz-sheet{background:var(--bg);border-radius:24px 24px 0 0;width:100%;max-width:480px;max-height:88vh;
  display:flex;flex-direction:column;padding:10px 18px 30px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 -8px 30px rgba(0,0,0,.22);
  animation:wizSlideUp .34s cubic-bezier(.2,.9,.3,1) both}
@keyframes wizSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.wiz-sheet.closing{animation:wizSlideDown .26s cubic-bezier(.5,0,.75,.3) both}
@keyframes wizSlideDown{from{transform:translateY(0)}to{transform:translateY(100%)}}
.wiz-grip{width:38px;height:4px;border-radius:2px;background:var(--border2);margin:0 auto 14px}
/* 進捗ドット */
.wiz-steps{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.wiz-steps span{width:7px;height:7px;border-radius:50%;background:var(--border2);transition:all .25s}
.wiz-steps span.on{background:var(--nm-accent);width:20px;border-radius:4px}
.wiz-q{font-size:17px;font-weight:800;color:var(--text);text-align:center;line-height:1.5;margin-bottom:18px}
.wiz-input{width:100%;box-sizing:border-box;background:var(--bg2);border:1.5px solid #F0A0C0;border-radius:var(--rsm);
  padding:14px 14px;font-size:17px;font-weight:700;color:var(--text);text-align:center;font-family:inherit}
.wiz-input:focus{outline:none;border-color:var(--nm-accent)}
/* 日付入力欄：空欄時に高さが縮むのを防ぎ、代わりのラベルを表示する */
.wiz-date-wrap{position:relative;height:52px}
.wiz-date{width:100%;height:100%}
.wiz-date.empty{color:transparent}
.wiz-date-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:var(--text3);pointer-events:none;opacity:0;transition:opacity .1s}
.wiz-date.empty+.wiz-date-ph{opacity:1}
.wiz-unit{font-size:13px;font-weight:700;color:var(--text3);text-align:center;margin-top:8px}
.wiz-note{font-size:11.5px;color:var(--text3);line-height:1.75;margin-top:14px;
  background:var(--bg2);border-radius:var(--rsm);padding:11px 13px}
.wiz-btn{width:100%;margin-top:20px;padding:14px;border:none;border-radius:var(--rsm);cursor:pointer;
  background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;font-size:15px;font-weight:800;font-family:inherit;
  box-shadow:4px 4px 12px rgba(80,70,140,.45),-3px -3px 8px rgba(255,255,255,.5),inset 2px 2px 4px rgba(255,255,255,.25)}
.wiz-btn:active{transform:translateY(1px)}
.wiz-back{width:100%;margin-top:8px;padding:10px;background:none;border:none;cursor:pointer;
  font-size:12.5px;color:var(--text3);font-family:inherit}
/* 登録済みの内容を出すサマリー行 */
.cyc-summary{margin-top:12px;background:var(--bg2);border-radius:var(--rsm);padding:12px 14px}
.cyc-row{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;font-size:13px;gap:10px}
.cyc-row+.cyc-row{border-top:0.5px solid var(--border)}
.cyc-row .k{color:var(--text3);font-weight:700;flex:0 0 118px;white-space:nowrap}
.cyc-row .v{color:var(--text);font-weight:800;text-align:right;flex:1;min-width:0}
@media (prefers-reduced-motion: reduce){
  .wiz-sheet,.wiz-sheet.closing{animation:none}
}
/* ===== ルーティン登録ウィザード：時間+内容の行、追加ボタン、ごほうびチップ ===== */
.rt-row{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.rt-time-wrap{position:relative;flex:0 0 60px;width:60px;height:42px}
.rt-time{width:100%;height:100%;box-sizing:border-box;background:#fff;border:1.5px solid var(--border2);
  border-radius:var(--rsm);padding:0 2px;font-size:11.5px;color:var(--text);font-family:inherit;text-align:center}
.rt-time.empty{color:transparent}
.rt-time-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--text3);pointer-events:none;opacity:0;transition:opacity .1s}
.rt-time.empty+.rt-time-ph{opacity:1}
.rt-text-wrap{position:relative;flex:1;min-width:0;height:42px}
.rt-text{width:100%;height:100%;box-sizing:border-box;background:#fff;border:1.5px solid var(--border2);
  border-radius:var(--rsm);padding:9px 34px 9px 36px;font-size:14px;color:var(--text);font-family:inherit}
.rt-text:focus,.rt-time:focus{outline:none;border-color:var(--nm-accent)}
.rt-text-count{position:absolute;right:8px;bottom:3px;font-size:9px;color:var(--text3);pointer-events:none}
.rt-row-del{flex-shrink:0;width:30px;height:30px;border:none;border-radius:50%;background:var(--bg2);
  color:var(--text3);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rt-row-move{flex-shrink:0;width:22px;height:16px;border:none;border-radius:4px;background:var(--bg2);
  color:var(--text3);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rt-text-icon-btn{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;
  border:none;border-radius:50%;background:var(--bg2);color:var(--text3);font-size:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:1}
.rt-text-icon-btn.applied{color:#D9506F;background:#FCE8EE}
.rt-text.icon-applied{color:var(--text2);background:var(--bg2)}
/* 項目と項目をつなぐ「↓」 */
.rt-arrow{text-align:center;font-size:13px;font-weight:800;color:var(--nm-accent);line-height:1;padding:2px 0;opacity:.65}
.rt-add-btn{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;font-size:16px;
  box-shadow:3px 3px 8px rgba(80,70,140,.4),-2px -2px 6px rgba(255,255,255,.5),inset 1px 1px 2px rgba(255,255,255,.25)}
.rt-tier-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.rt-tier-chip{padding:8px 14px;border-radius:18px;border:1.5px solid var(--border2);background:var(--bg2);
  font-size:13px;font-weight:700;color:var(--text2);cursor:pointer;font-family:inherit}
.rt-tier-chip.on{background:var(--nm-accent);border-color:var(--nm-accent);color:#fff;
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.2)}
/* ルーティン設定メニュー(モーニング①の編集、など)の選択項目 */
.rt-menu-item{width:100%;text-align:left;padding:14px 16px;border-radius:var(--rsm);
  border:0.5px solid var(--border2);background:var(--bg2);color:var(--text);
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.rt-menu-item:active{background:var(--purple-bg)}
/* 箇条書きの注釈（wiz-noteの中で使う） */
.wiz-note ul{margin:0;padding-left:16px}
.wiz-note li{margin-bottom:2px}
/* 表示リスト（routine-display）内の「↓」 */
.routine-display-arrow{text-align:center;font-size:12px;font-weight:800;color:#B57A2E;opacity:.6;padding:1px 0}
/* 今日のチェック画面：ルーティンが複数バージョンある時の左右スワイプ切替 */
.rt-version-badge{font-size:11px;font-weight:800;color:#8B6000;text-align:center;margin-bottom:6px}
@keyframes rtCardSwipeIn{
  0%{transform:translateX(var(--rt-swipe-dir,100%))}
  100%{transform:translateX(0)}
}
.rt-card-swiping{animation:rtCardSwipeIn .28s cubic-bezier(.22,.85,.32,1)}
/* ===== エクササイズ登録ウィザード：種目カード ===== */
.ex-row{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rsm);padding:12px;margin-bottom:10px}
.ex-row-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ex-name-wrap{position:relative;flex:1;min-width:0}
.ex-name{width:100%;box-sizing:border-box;background:#fff;border:1.5px solid var(--border2);
  border-radius:var(--rsm);padding:9px 34px 9px 10px;font-size:14px;color:var(--text);font-family:inherit}
.ex-name:focus{outline:none;border-color:var(--nm-accent)}
.ex-name-count{position:absolute;right:8px;bottom:3px;font-size:9px;color:var(--text3);pointer-events:none}
.ex-type-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.ex-type-btn{padding:8px;border-radius:var(--rsm);border:1.5px solid var(--border2);background:none;
  font-size:12px;font-weight:700;color:var(--text3);cursor:pointer;font-family:inherit}
.ex-type-btn.on{border-color:var(--nm-accent);background:var(--nm-accent);color:#fff}
.ex-lbl{font-size:10.5px;color:var(--text3);font-weight:700;margin-bottom:3px}
.ex-fields-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.ex-fields-row input{width:100%;box-sizing:border-box;background:#fff;border:1.5px solid var(--border2);
  border-radius:var(--rsm);padding:8px 8px;font-size:13px;color:var(--text);font-family:inherit;text-align:center}
.ex-fields-row input:focus{outline:none;border-color:var(--nm-accent)}
.ex-memo{width:100%;box-sizing:border-box;background:#fff;border:1.5px solid var(--border2);
  border-radius:var(--rsm);padding:8px 10px;font-size:12.5px;color:var(--text);font-family:inherit;resize:none}
.ex-memo:focus{outline:none;border-color:var(--nm-accent)}
.ex-row-del{flex-shrink:0;width:28px;height:28px;border:none;border-radius:50%;background:var(--bg);
  color:var(--text3);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* YES/NO ボタン（性行為カード確認画面） */
.ex-yn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.ex-yn-btn{padding:13px;border-radius:var(--rsm);border:1.5px solid var(--border2);background:var(--bg2);
  font-size:15px;font-weight:800;color:var(--text2);cursor:pointer;font-family:inherit}
.ex-yn-btn.on{border-color:var(--nm-accent);background:var(--nm-accent);color:#fff;
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.2)}
.ex-toggle-row{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;
  background:var(--bg2);border-radius:var(--rsm)}
.ex-toggle-row.disabled{opacity:.45;pointer-events:none}
.ex-toggle-sw{flex-shrink:0;width:44px;height:26px;border-radius:13px;border:none;cursor:pointer;position:relative}
.ex-toggle-sw .knob{position:absolute;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:2px 2px 4px rgba(0,0,0,.2);transition:left .2s}
.ex-review-card{position:relative;background:#fff;border:0.5px solid var(--border2);border-radius:var(--rsm);padding:14px;margin-bottom:12px;box-shadow:0 4px 10px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08)}
.ex-review-name{font-size:14px;font-weight:800;color:var(--text);margin-bottom:3px}
.ex-review-meta{font-size:12px;color:var(--text3)}
.ex-review-memo{font-size:11.5px;color:#6666AA;margin-top:4px}
/* ===== フェーズ達成のごほうび（カード自体は通常のやることリストと同じ見た目。
   「ごほうび」タグだけ、丸く囲って中を虹色に煌めかせて目立たせる） ===== */
@keyframes rewardTagFlow{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.task-reward-tag{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:2px 10px;border-radius:20px;
  background:linear-gradient(110deg,#ff8a8a,#ffb84d,#ffe14d,#5be07a,#4dc8ff,#a389ff,#ff7fd4,#ff8a8a);
  background-size:300% 100%;animation:rewardTagFlow 4s linear infinite;
  font-size:10px;font-weight:800;color:#fff;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.2)}
@media (prefers-reduced-motion: reduce){
  .task-reward-tag{animation:none}
}
/* 「達成」ボタンの基本スタイル：かいものリストの「✓ 買った」ボタンと同系統のイエローに統一
   （ごほうびカードの達成ボタンも、以前のパープル系上書きをやめてこの色で統一した） */
.task-done-btn{flex-shrink:0;margin:10px 14px 10px 8px;padding:8px 14px;background:rgba(245,194,75,.88);border:none;border-radius:22px;font-size:12px;font-weight:700;color:#5C4400;cursor:pointer;transition:all .15s;box-shadow:4px 4px 10px rgba(150,110,20,.35),-3px -3px 8px rgba(255,255,255,.6),inset 2px 2px 4px rgba(255,255,255,.3),inset -1px -1px 2px rgba(150,110,20,.2)}
.task-done-btn:active{box-shadow:2px 2px 5px rgba(80,70,140,.4),-1px -1px 3px rgba(255,255,255,.5);transform:scale(.96)}
.task-empty{text-align:center;padding:32px;color:var(--text3);font-size:14px;line-height:1.8}
.task-count{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}

/* タスク通知オーバーレイ */
.task-alert-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:2500;animation:fadeIn .2s ease}
.task-alert{background:var(--bg);border-radius:var(--r);padding:24px 20px 18px;width:calc(100% - 48px);max-width:320px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.18)}
.task-alert-icon{font-size:36px;margin-bottom:10px}
.task-alert-title{font-size:13px;font-weight:700;color:var(--blue-dark);letter-spacing:.04em;margin-bottom:8px}
.task-alert-msg{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.4}
.task-alert-time{font-size:13px;color:var(--text2);margin-bottom:18px}
.task-alert-close{width:100%;padding:12px;background:var(--blue-dark);color:#fff;border:none;border-radius:var(--rsm);font-size:14px;font-weight:700}
.task-alert-close:active{opacity:.85}






/* FONT AWESOME ICONS */
.fa-home-icon{font-size:22px;color:#6666AA;line-height:1}
.fa-hero-icon{font-size:38px;color:rgba(255,255,255,.95);filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));line-height:1}
.fa-fab-icon{font-size:18px;color:#fff;line-height:1}
/* SWIPE HINT */
.swipe-hint{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text3);margin-top:4px;justify-content:flex-end;animation:swipeHint 1.8s ease-in-out infinite}
@keyframes swipeHint{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(-5px);opacity:1}}

/* DIET BUBBLE ANIMATION */
@keyframes bubbleSlideIn{
  0%{opacity:0;transform:translateY(-50%) translateX(10px)}
  100%{opacity:1;transform:translateY(-50%) translateX(-10px)}
}
.diet-bubble-hidden{opacity:0;pointer-events:none}
.diet-bubble-show{animation:bubbleSlideIn .5s ease forwards}
/* DIET GOAL */
.diet-bubble{display:inline-block;position:relative}
.diet-bubble canvas{display:block}
.diet-bubble-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);text-align:center;font-size:11px;font-weight:700;color:#7A5200;line-height:1.7;white-space:nowrap;pointer-events:none}
/* TRAINING */
.training-menu-form{background:#FFF8F2;border:1px solid #FFE8D6;border-radius:var(--rsm);padding:14px;margin-top:10px}
.training-menu-form-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px;text-align:center}
.training-menu-list{display:flex;flex-direction:column;gap:0;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.training-menu-item{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:0.5px solid var(--border)}
.training-menu-item:last-child{border-bottom:none}
.training-menu-item-body{flex:1}
.training-menu-item-name{font-size:14px;font-weight:600;color:var(--text)}
.training-menu-item-meta{font-size:11px;color:var(--text3);margin-top:2px}
.training-menu-del{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;padding:4px}
/* トレーニング選択ページ */
.training-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 10px;margin:16px 0 18px}
.training-select-card{position:relative;padding:14px 12px;background:#fff;border:0.5px solid var(--border2);border-radius:var(--rsm);font-size:13px;font-weight:700;color:var(--text);cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);transition:all .15s;text-align:center;width:100%;box-sizing:border-box}
.training-select-card.selected{filter:brightness(.92);box-shadow:inset 3px 3px 8px rgba(0,0,0,.15),inset -2px -2px 5px rgba(255,255,255,.4)}
.training-select-card:active{transform:scale(.96)}
.training-select-card-meta{font-size:10px;color:var(--text3);margin-top:3px;font-weight:500}
.training-select-card-days{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:4px}
.ex-day-dot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#333;color:#fff;font-size:8.5px;font-weight:700;line-height:1;flex-shrink:0}
.training-select-card-pin{position:absolute;top:-4px;left:-6px;font-size:21px;color:#F5C24B;text-shadow:0 1px 2px rgba(0,0,0,.25);pointer-events:none}
/* エクササイズカード中央上部の「種目」タグ。かいものリストのタグと違い、傾けずまっすぐ表示する */
.ex-category-tape{position:absolute;top:-9px;background:rgba(245,194,75,.88);color:#5C4400;font-size:9.5px;font-weight:800;padding:3px 10px;border-radius:2px;box-shadow:1px 2px 4px rgba(0,0,0,.18);z-index:3;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* お通じ記録：便の色を選ぶ丸いカラーサンプル。ホーム画面のユーザーアイコンと同じ「光沢のある
   ドーム」の見た目（左上に強いハイライト、右下にうっすら影）を、小さな円ボタンに施している */
.bowel-color-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:6px 0 10px}
.bowel-color-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.bowel-color-swatch{position:relative;width:36px;height:36px;border-radius:50%;cursor:pointer;border:none;padding:0;flex-shrink:0;box-shadow:0 2px 5px rgba(0,0,0,.28);transition:transform .15s}
.bowel-color-swatch::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 12%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 72% 80%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(155deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.12) 100%);
}
.bowel-color-swatch.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--nm-accent),0 2px 5px rgba(0,0,0,.28);transform:scale(1.1)}
.bowel-color-check{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--nm-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;box-shadow:0 1px 3px rgba(0,0,0,.35);z-index:2}
.bowel-color-label{font-size:9.5px;color:var(--text3);text-align:center;line-height:1.2;max-width:44px}
.bowel-color-label.sel{color:var(--nm-accent);font-weight:700}
/* カレンダーのお通じ表示用：小さいバージョンのカラーサンプル（光沢エフェクトは同じものを流用） */
.bowel-color-swatch-sm{width:20px;height:20px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
/* カレンダー睡眠脚注などの、文中インラインで使う極小バージョン（光沢エフェクトは同じものを流用） */
.bowel-color-swatch-xs{width:12px;height:12px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.training-color-chk{
  position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.85);background:rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;
}
.training-color-chk.checked{background:var(--nm-accent);border-color:var(--nm-accent);color:#fff}
.training-color-swatch{
  width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;
  box-shadow:2px 2px 6px rgba(0,0,0,.2);transition:transform .1s;
}
.training-color-swatch.picked{border-color:var(--text);transform:scale(1.1)}
/* タイマー画面 */
.timer-screen{display:flex;flex-direction:column;height:100%}
.timer-phase-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.timer-exercise-name{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:-.02em}
.timer-set-info{font-size:13px;color:var(--text2);margin-bottom:24px}
.timer-circle-wrap{display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.timer-circle{width:180px;height:180px;border-radius:50%;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:var(--bg)}
.timer-circle svg{position:absolute;top:0;left:0;width:100%;height:100%}
.timer-number{font-size:52px;font-weight:700;letter-spacing:-.04em;line-height:1;position:relative;z-index:1}
.timer-unit{font-size:14px;color:var(--text2);position:relative;z-index:1}
.timer-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 20px}
.timer-btn-start{padding:16px;background:linear-gradient(145deg,#A8A896,#989884);color:#3A3A2A;border:none;border-radius:var(--r);font-size:16px;font-weight:700;cursor:pointer;box-shadow:inset 4px 4px 10px rgba(100,95,75,.45),inset -2px -2px 6px rgba(255,255,255,.2),2px 2px 4px rgba(100,95,75,.2);transition:all .15s;text-shadow:-1px -1px 0 rgba(255,255,255,.6),1px -1px 0 rgba(255,255,255,.6),-1px 1px 0 rgba(255,255,255,.6),1px 1px 0 rgba(255,255,255,.6)}
.timer-btn-skip{padding:16px;background:var(--nm-bg);border:none;border-radius:var(--r);font-size:15px;font-weight:700;color:#6666AA;cursor:pointer;box-shadow:5px 5px 12px var(--nm-shadow),-3px -3px 8px rgba(255,255,255,0.4),inset 1px 1px 3px rgba(255,255,255,.6),inset -1px -1px 2px rgba(160,150,180,.2);transition:all .15s}
.timer-btn-pause{padding:16px;background:linear-gradient(145deg,#C8C8B4,#B7B7A4);border:none;border-radius:var(--r);font-size:15px;font-weight:700;color:#3A3A2A;cursor:pointer;box-shadow:5px 5px 12px rgba(140,130,100,.4),-3px -3px 8px rgba(255,255,255,.7),inset 1px 1px 3px rgba(255,255,255,.5),inset -1px -1px 2px rgba(120,115,90,.2);transition:all .15s}
.timer-progress-bar{height:5px;background:var(--border);margin:0 20px 20px;border-radius:3px;overflow:hidden}
.timer-progress-fill{height:100%;border-radius:3px;transition:width .1s linear;background:#6666AA}
.flash-overlay{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9999;transition:opacity .1s}
.flash-overlay.flash{opacity:.85}
/* SHOPPING */
.shop-preset-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.shop-preset-card{padding:8px 14px;background:#fff;border:0.5px solid var(--border2);border-radius:20px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s;box-shadow:4px 4px 10px rgba(0,0,0,.1),-2px -2px 5px rgba(255,255,255,.5);white-space:nowrap;position:relative}
/* 5段階評価ボタン(.score-btn)と全く同じ光沢（左上ハイライト＋右下シャドウ）を、カードの
   背景色に関わらず常に重ねる。カラー編集でどの色に変えても同じ光沢がかかるよう、色そのものは
   inline styleのbackgroundに任せ、この::afterは常に透明度だけの層として上から乗る。 */
.shop-preset-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 12%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 72% 80%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(155deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.12) 100%);
}
.shop-preset-card>*{position:relative;z-index:1}
.shop-preset-card:active{transform:scale(.95);box-shadow:2px 2px 6px rgba(160,160,180,.4),-2px -2px 5px rgba(255,255,255,.7)}
.shop-preset-card.used{opacity:.3;pointer-events:none}
.shop-item{display:flex;align-items:center;gap:0;padding:12px 14px;background:#fff}
.shop-item:last-child{border-bottom:none}
.shop-item-text{flex:1;font-size:14px;font-weight:600;color:var(--text);padding-left:1em;text-indent:-1em}
.shop-item-preset-tag{font-size:10px;color:var(--text3);margin-left:6px}
.shop-bought-btn{flex-shrink:0;padding:8px 14px;background:rgba(245,194,75,.88);border:none;border-radius:22px;font-size:12px;font-weight:700;color:#5C4400;cursor:pointer;transition:all .15s;box-shadow:4px 4px 10px rgba(150,110,20,.35),-3px -3px 8px rgba(255,255,255,.6),inset 2px 2px 4px rgba(255,255,255,.3),inset -1px -1px 2px rgba(150,110,20,.2)}
.shop-bought-btn:active{box-shadow:2px 2px 5px rgba(80,70,140,.4),-1px -1px 3px rgba(255,255,255,.5);transform:scale(.96)}
.shop-edit-card{background:var(--bg2);border-radius:var(--r);padding:14px;margin-top:14px;border:0.5px solid var(--border)}
.shop-edit-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.shop-card-list{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.shop-card-item{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--bg);border:1px solid var(--border2);border-radius:20px;font-size:12px;color:var(--text2)}
.shop-card-del{background:none;border:none;color:var(--text3);font-size:14px;cursor:pointer;padding:0 0 0 4px;line-height:1}
/* TASKS TABS */
.tasks-tab-bar{display:flex;border-bottom:0.5px solid var(--border);background:var(--bg);flex-shrink:0;position:relative}
.tasks-tab{flex:1;padding:11px 0;font-size:14px;font-weight:700;border:none;background:none;color:var(--text3);border-bottom:none;transition:color .25s;cursor:pointer}
.tasks-tab.active{color:#6666AA}

/* SLIDING TAB INDICATOR */
.tasks-tab-slider{position:absolute;bottom:0;height:2.5px;background:#6666AA;border-radius:2px;transition:left .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1)}



/* REMIND POPUP */
.remind-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:2000}
.remind-popup{background:#fff;border:0.5px solid var(--border2);border-radius:var(--rsm);padding:16px 18px;width:calc(100% - 48px);max-width:340px;box-shadow:0 4px 10px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease}
.remind-popup-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.04em;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.remind-popup-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.remind-popup-item{background:var(--bg2);border-radius:var(--rsm);padding:11px 13px;font-size:14px;font-weight:600;color:var(--text);line-height:1.4}
.remind-popup-sub{font-size:11px;color:var(--text3);margin-top:3px}
.remind-popup-close{width:100%;padding:11px;background:linear-gradient(145deg,#C8987A,#B07A5A);color:#fff;border:none;border-radius:var(--rsm);font-size:14px;font-weight:700;cursor:pointer}
.remind-popup-close:active{opacity:.85}

/* REPEAT SETTING */
.repeat-form{padding:0;margin-top:8px}
.repeat-form-title{font-size:12px;font-weight:700;color:#5555AA;margin-bottom:8px}
/* タイミング(なし/今日/明日/毎日/毎週)は、今日のチェックの5段階評価ボタンと全く同じ丸型・光沢
   （.score-btnをそのまま流用）にして、5個を横一列に並べる。配色は評価ボタンの色をそのまま
   踏襲：今日=rank5(青)、明日=rank4(水色)、毎日=rank3(薄紫)、毎週=rank2(オレンジ)、なし=白。 */
.repeat-type-row{display:flex;justify-content:center;gap:8px;margin-bottom:8px;flex-wrap:nowrap}
.repeat-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.repeat-dow-btn{padding:7px 0;border-radius:var(--rsm);border:1.5px solid var(--border2);background:var(--bg);font-size:11px;font-weight:700;color:var(--text2);cursor:pointer}
.repeat-dow-btn.sel{background:#F0F0FA;border-color:#6666AA;color:#6666AA}
.repeat-tag{display:inline-flex;align-items:center;vertical-align:middle;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:#F0F0FA;color:#6666AA;margin-top:4px;cursor:pointer}
/* REMIND BADGE */
.home-btn-badge{position:relative}
.remind-badge{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}
.icon-badge-stack{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;gap:3px;z-index:1}
.icon-badge{width:20px;height:20px;border-radius:50%;background:#E0607A;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.course-suggest-bubble{position:fixed;background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;padding:9px 16px;border-radius:16px;font-size:12.5px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.22);z-index:4000;white-space:nowrap;animation:courseSuggestFloat 1.6s ease-in-out infinite}
.course-suggest-bubble:after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border-width:6px 6px 0;border-style:solid;border-color:#5555AA transparent transparent}
@keyframes courseSuggestFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
.course-suggest-glow{animation:courseSuggestPulse 1.2s ease-in-out infinite}
@keyframes courseSuggestPulse{0%,100%{box-shadow:inset 0 0 0 3px var(--nm-accent),inset 0 0 10px rgba(120,120,188,.4)}50%{box-shadow:inset 0 0 0 4px var(--nm-accent),inset 0 0 16px rgba(120,120,188,.6)}}
/* リマインド設定 */
.remind-form{background:var(--purple-bg);border:1px solid var(--purple);border-radius:var(--rsm);padding:12px;margin-top:8px}
.remind-form-title{font-size:12px;font-weight:700;color:var(--purple-dark);margin-bottom:8px}
.remind-type-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.remind-type-btn{padding:8px 0;border-radius:var(--rsm);border:1.5px solid var(--border2);background:var(--bg);font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;transition:all .15s}
.remind-type-btn.sel{background:var(--purple-bg);border-color:var(--purple);color:var(--purple-dark)}
.remind-dow-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}
.remind-dow-btn{padding:7px 0;border-radius:var(--rsm);border:1.5px solid var(--border2);background:var(--bg);font-size:11px;font-weight:700;color:var(--text2);cursor:pointer}
.remind-dow-btn.sel{background:var(--purple-bg);border-color:var(--purple);color:var(--purple-dark)}
.remind-date-input{width:100%;background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--rsm);padding:9px 12px;font-size:14px;color:var(--text);margin-bottom:0}
.remind-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--purple-bg);color:var(--purple-dark);margin-top:4px}


/* ROUTINE */
.routine-form{background:#FFF8F2;border:1px solid #FFE8D6;border-radius:var(--rsm);padding:14px;margin-top:10px}
.routine-form-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px;text-align:center}
.routine-form textarea{width:100%;background:var(--bg);border:0.5px solid #FFE8D6;color:var(--text);border-radius:var(--rsm);padding:10px 12px;font-size:14px;color:var(--text);resize:vertical;min-height:80px;font-family:inherit}
.routine-display{background:var(--amber-bg);border:1px solid var(--amber);border-radius:var(--rsm);padding:10px 12px;font-size:13px;color:var(--text);line-height:1.6;white-space:pre-wrap;margin-bottom:10px;overflow:hidden}
.routine-display-item{display:flex;align-items:baseline;gap:8px;padding:4px 0}
.routine-display-item+.routine-display-item{border-top:0.5px dashed var(--amber)}
.routine-display-time{flex-shrink:0;font-size:11px;font-weight:800;color:#8B6000;background:rgba(255,255,255,.55);border-radius:8px;padding:1px 7px;min-width:44px;text-align:center}
.routine-display-time.none{color:var(--text3);background:transparent}
/* 設定画面「ルーティンの内容を表示」カード：コース選択カードと同じ見た目＋テープタグ＋時刻タイムライン */
.rt-info-card-wrap{position:relative;margin-top:20px}
.rt-info-tape{position:absolute;top:-10px;left:12px;background:rgba(245,194,75,.88);color:#5C4400;font-size:10.5px;font-weight:800;padding:3px 12px;border-radius:2px;transform:rotate(-6deg);box-shadow:1px 2px 4px rgba(0,0,0,.18);z-index:3;pointer-events:none}
/* おぼえがきリスト：カテゴリ管理チップ（追加/名前変更/削除、長押しドラッグで並び替え） */
.memo-cat-grid{display:flex;flex-wrap:wrap;gap:8px}
.memo-cat-chip{position:relative;padding:7px 22px 7px 12px;border-radius:16px;border:1.5px solid var(--border2);background:var(--bg);font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;transition:all .15s}
.memo-cat-chip.sel{border-color:rgba(245,194,75,.9);background:rgba(245,194,75,.25);color:#8B6000}
.memo-cat-chip.dragging{opacity:.5}
.memo-cat-del{position:absolute;top:50%;right:5px;transform:translateY(-50%);width:15px;height:15px;border-radius:50%;
  background:rgba(0,0,0,.14);color:inherit;font-size:9px;display:flex;align-items:center;justify-content:center}
/* おぼえがきリスト：白カード上端のカテゴリタグ（左/中央/右）。前面は通常のマスキングテープ、
   覗いてる側は色を薄くし下半分を隠して「下に隠れてる」演出にする。
   覗いてる側は、外側の非回転のクリップ用ラッパー（.memo-cat-tape-peek-clip）で
   overflow:hiddenにより見切れさせることで、中身が斜めに傾いていても、見切れる境界線は
   常にカード上端の枠線とぴったり水平に揃うようにしている（clip-pathを回転した要素自身に
   掛けると、見切れ線も一緒に傾いてしまうため）。 */
.memo-cat-tape{position:absolute;top:-10px;font-size:10.5px;font-weight:800;padding:3px 12px;border-radius:2px;
  box-shadow:1px 2px 4px rgba(0,0,0,.18);z-index:3;white-space:nowrap;max-width:104px;overflow:hidden;text-overflow:ellipsis}
.memo-cat-tape.front{background:rgba(245,194,75,.88);color:#5C4400;pointer-events:none;z-index:4}
.memo-cat-tape.peek{background:rgba(245,194,75,.4);color:rgba(92,68,0,.7)}
.memo-cat-tape.memo-tape-left{left:12px;transform:rotate(-6deg)}
.memo-cat-tape.memo-tape-center{left:50%;transform:translateX(-50%) rotate(-2deg)}
.memo-cat-tape.memo-tape-right{right:12px;transform:rotate(6deg)}
.memo-cat-tape-peek-clip{position:absolute;top:-13px;height:13px;overflow:hidden;z-index:2;cursor:pointer}
.memo-cat-tape-peek-clip.memo-tape-left{left:12px}
.memo-cat-tape-peek-clip.memo-tape-center{left:50%;transform:translateX(-50%)}
.memo-cat-tape-peek-clip.memo-tape-right{right:12px}
.memo-cat-tape-peek-clip .memo-cat-tape{position:static;top:auto;display:inline-block} /* display:inline-blockが無いと、position:staticなspanにはtransform(傾き)が効かない */
.rt-info-card{position:relative;border:0.5px solid var(--border2);border-radius:var(--rsm);padding:16px 14px 14px;overflow:hidden;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08)}
.rt-info-card .task-item{background:transparent}
.rt-info-card .task-list-wrap{background:transparent;border:none;border-radius:0}
.rt-info-timeline{position:relative}
.rt-info-line{position:absolute;left:21px;width:2px;background:#5A5A5A}
.rt-info-row{position:relative;display:flex;align-items:flex-start;min-height:40px;padding:3px 0}
.rt-info-time-col{width:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.rt-info-time-circle{width:34px;height:34px;border-radius:50%;background:#5A5A5A;color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1.1}
.rt-info-content{flex:1;font-size:13px;color:var(--text);padding-left:calc(10px + 1em);padding-top:7px;text-indent:-1em;white-space:normal;overflow-wrap:break-word;line-height:1.5}
/* アイコン付き行は、text-indentのハンギングインデント技（アトミックなinline-flexボックスに対して
   ブラウザによって挙動が不安定なことがある）に頼らず、常に固定の10pxから描画を開始させる */
.rt-info-content-icon{text-indent:0;padding-left:10px}
.routine-cause-area{background:var(--bg2);border-radius:var(--rsm);padding:14px;margin-top:10px;border:0.5px solid var(--border);width:100%}
.routine-cause-lbl{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:8px}
.routine-cause-area input{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;font-size:15px;color:var(--text)}
/* ルーティン達成度（サマリー） */
.routine-summary-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:12px}
.routine-summary-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.routine-bar-wrap{margin-bottom:8px}
.routine-bar-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.routine-bar-track{height:10px;background:var(--bg3);border-radius:5px;overflow:hidden}
.routine-bar-fill-m{height:100%;border-radius:5px;background:var(--amber);transition:width .5s}
.routine-bar-fill-n{height:100%;border-radius:5px;background:#6060D0;transition:width .5s}
/* インサイトポップアップ */
.insight-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:2500}
.insight-popup{background:#fff;border:0.5px solid var(--border2);border-radius:var(--rsm);padding:18px 18px 16px;width:calc(100% - 48px);max-width:340px;box-shadow:0 4px 10px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease;position:relative}
.insight-popup.show{opacity:1;transform:translateY(0)}
.insight-icon{font-size:28px;text-align:center;margin-bottom:6px}
.insight-title{font-size:14px;font-weight:700;color:#8B5A3A;letter-spacing:.04em;margin-bottom:8px;text-align:center}
.insight-msg{font-size:14px;color:var(--text);line-height:1.7;margin-bottom:14px;white-space:pre-wrap}
.insight-ok{width:100%;padding:11px;background:linear-gradient(145deg,#C8987A,#B07A5A);color:#fff;border:none;border-radius:var(--rsm);font-size:14px;font-weight:700;cursor:pointer}
/* WELLNESS */
.wellness-reason{background:var(--bg2);border-radius:var(--rsm);padding:12px;margin-top:10px;border:0.5px solid var(--border);width:100%;animation:fadeIn .2s ease}
.wellness-reason-lbl{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:7px}
.wellness-reason input{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:10px 12px;font-size:15px;color:var(--text)}
.wellness-reason input:focus{border-color:var(--green)}


/* MENSTRUAL CYCLE */
.cycle-form{background:#FFF8F2;border:1px solid #FFE8D6;border-radius:var(--rsm);padding:14px;margin-top:10px}
.cycle-form-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px;text-align:center;justify-content:center;display:flex;align-items:center;gap:6px}
.cycle-form .f-row input,.cycle-form .f-row select{background:var(--bg);border-color:#FFE8D6}
.cycle-phase-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;font-size:11px}
.cycle-phase-item{display:flex;align-items:center;gap:5px;color:var(--text2)}
.cycle-phase-swatch{width:28px;height:12px;border-radius:3px}

/* 帯カレンダー */
.band-cal-wrap{margin-bottom:20px;overflow:hidden;margin-left:-3px;margin-right:-3px}
.band-cal-nav{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.band-cal-nav button{background:none;border:0.5px solid var(--border2);border-radius:var(--rsm);padding:5px 12px;font-size:13px;color:var(--text2);cursor:pointer}
.band-cal-nav span{flex:1;text-align:center;font-size:14px;font-weight:700;color:var(--text)}
.band-cal-view-row{display:flex;gap:6px;margin-bottom:10px}
.band-view-btn{flex:1;padding:7px 0;border-radius:var(--rsm);border:1.5px solid var(--border2);background:none;font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;box-shadow:4px 4px 10px var(--nm-shadow),-3px -3px 8px rgba(255,255,255,0.4);transition:all .15s}
.band-view-btn.active-mental{background:#6B705C;border-color:#6B705C;color:#fff;box-shadow:inset 2px 2px 6px rgba(0,0,0,0.18),inset -1px -1px 3px rgba(255,255,255,0.15)}
.band-view-btn.active-physical{background:#CB997E;border-color:#CB997E;color:#fff;box-shadow:inset 2px 2px 6px rgba(0,0,0,0.18),inset -1px -1px 3px rgba(255,255,255,0.15)}
.band-view-btn.active-both{background:#8B85C7;border-color:#8B85C7;color:#fff;box-shadow:inset 2px 2px 6px rgba(0,0,0,0.18),inset -1px -1px 3px rgba(255,255,255,0.15)}
.band-view-btn.active-exercise{background:#B7B7A4;border-color:#B7B7A4;color:#fff;box-shadow:inset 2px 2px 6px rgba(0,0,0,0.18),inset -1px -1px 3px rgba(255,255,255,0.15)}
.band-view-btn.active-icon{background:#8B8FA8;border-color:#8B8FA8;color:#fff;box-shadow:inset 2px 2px 6px rgba(0,0,0,0.18),inset -1px -1px 3px rgba(255,255,255,0.15)}
.band-view-btn.active-bowel{background:#B08D5A;border-color:#B08D5A;color:#fff;box-shadow:inset 2px 2px 6px rgba(0,0,0,0.18),inset -1px -1px 3px rgba(255,255,255,0.15)}
.band-view-btn.active-sleep{background:#5B9BD5;border-color:#5B9BD5;color:#fff;box-shadow:inset 2px 2px 6px rgba(0,0,0,0.18),inset -1px -1px 3px rgba(255,255,255,0.15)}
/* グリッド：左に日付列、右にコンテンツ */
.band-cal-grid{display:grid;grid-template-columns:32px 1fr;gap:0}
.band-cal-header{display:grid;grid-template-columns:32px 1fr;gap:0;margin-bottom:2px}
.band-header-empty{} 
.band-header-dates{display:grid;gap:1px}
.band-dow-row{display:flex;background:#333333;border-radius:12px;padding:5px 0;margin-bottom:4px}
.band-dow{font-size:9px;font-weight:700;color:#fff;text-align:center;flex:1}
.band-row-label{font-size:10px;color:var(--text3);writing-mode:horizontal-tb;display:flex;align-items:center;justify-content:center;padding:2px 0}
/* 日付行 */
.band-dates-row{display:flex;gap:1px;height:22px;margin-bottom:1px}
.band-date-cell{flex:1;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text3);border-radius:3px;position:relative}
.band-date-cell.other-month{color:#ccc}

/* MOON PHASE */
.band-date-cell{position:relative}
.moon-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.moon-icon img{width:20px;height:20px}

/* WEATHER */


/* CALENDAR MEMO */
.band-date-cell.has-memo{cursor:pointer}
.band-date-cell.has-memo:active{background:var(--purple-bg)}
.band-date-cell .memo-icon{
  display:flex;align-items:center;justify-content:center;
  width:9px;height:9px;border-radius:50%;
  background:#E0607A;color:#fff;
  font-size:5px;line-height:1;
  position:absolute;top:1px;left:calc(50% + 7px);z-index:1;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
/* スケジュールモードのアイコンに一言メモが付いている時の、右上の小さな赤い鉛筆バッジ
   （カレンダー日付欄の.memo-iconと全く同じ見た目・意味合い） */
.cal-schedule-memo-badge{
  display:flex;align-items:center;justify-content:center;
  width:11px;height:11px;border-radius:50%;
  background:#E0607A;color:#fff;
  font-size:6px;line-height:1;
  position:absolute;top:-2px;right:-2px;z-index:2;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
/* スケジュールモードのタイムライン：角丸の白い枠で囲む */
.cal-schedule-list{
  background:#fff;border-radius:var(--r);border:0.5px solid var(--border2);
  overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.06);
}
/* 隣接する時間に同じアイコンが連続登録された時の「コの字」ブラケット線。
   縦の太い赤線＋上下端で少し左に飛び出すツノで、まとまりを囲って見せる。 */
.cal-schedule-bracket{
  position:absolute;width:3px;background:#E24B4A;border-radius:2px;pointer-events:none;
}
.cal-schedule-bracket::before,.cal-schedule-bracket::after{
  content:'';position:absolute;left:-6px;width:9px;height:3px;background:#E24B4A;border-radius:2px;
}
.cal-schedule-bracket::before{top:0}
.cal-schedule-bracket::after{bottom:0}
/* カレンダーの精神/肉体/精神+肉体スコアが満点の時のきらめきエフェクト。
   セルの内側だけで完結する演出にしてある(box-shadowで外に滲ませる方式は
   隣接セルや上下の帯に隠れて見えなくなってしまうため不採用)。
   斜めの光の帯がセル内を横切って、キラッと反射するような見た目にしている。 */
@keyframes scoreSparkleSweep{
  0%,15%{left:-60%}
  55%,100%{left:130%}
}
@keyframes scoreSparkleTwinkle{
  0%,100%{opacity:.35;transform:scale(.8) rotate(0deg)}
  50%{opacity:1;transform:scale(1.2) rotate(15deg)}
}
/* カレンダーの心身スコア用：便の色スワッチと同じ光沢を、擬似要素ではなく実要素(.cal-score-gloss)で重ねる。
   score-cell-perfect/worstが既に::after/::beforeを使っているため、同じ擬似要素は使えない。 */
.cal-score-gloss{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 12%, rgba(255,255,255,0) 32%),
    radial-gradient(circle at 72% 80%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(155deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.12) 100%);
}
.score-cell-perfect{position:relative;overflow:hidden}
.score-cell-perfect::after{
  content:'';position:absolute;top:-30%;left:-60%;width:36%;height:160%;
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%);
  transform:rotate(0deg);
  animation:scoreSparkleSweep 2.4s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
.score-cell-perfect .sparkle-ic{
  position:absolute;top:1px;right:1px;font-size:9px;color:#FFD700;
  animation:scoreSparkleTwinkle 1.3s ease-in-out infinite;
  text-shadow:0 0 4px rgba(255,215,0,.9);pointer-events:none;z-index:1;
}
/* 最低点の時、漫画の「ガーン」表現のような白いショックラインを枠上部に表示する */
.score-cell-worst{position:relative;overflow:hidden}
.score-cell-worst::before{
  content:'';position:absolute;top:0;left:2px;right:2px;height:42%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'><g stroke='%23333333' stroke-width='4' stroke-linecap='round'><line x1='4' y1='0' x2='3' y2='28'/><line x1='12' y1='0' x2='13' y2='15'/><line x1='20' y1='0' x2='19' y2='34'/><line x1='28' y1='0' x2='29' y2='13'/><line x1='36' y1='0' x2='35' y2='30'/><line x1='44' y1='0' x2='45' y2='17'/><line x1='52' y1='0' x2='51' y2='32'/><line x1='60' y1='0' x2='61' y2='15'/><line x1='68' y1='0' x2='67' y2='28'/><line x1='76' y1='0' x2='77' y2='13'/><line x1='84' y1='0' x2='83' y2='30'/><line x1='92' y1='0' x2='93' y2='17'/><line x1='100' y1='0' x2='99' y2='32'/><line x1='108' y1='0' x2='109' y2='15'/><line x1='116' y1='0' x2='115' y2='26'/></g></svg>");
  background-size:100% 100%;background-repeat:no-repeat;
  pointer-events:none;z-index:0;
}
.cal-memo-popup{background:var(--bg);border-radius:var(--r);padding:16px;max-height:70vh;overflow-y:auto}
.cal-memo-popup-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-memo-popup-title{font-size:14px;font-weight:700;color:var(--text)}
.cal-memo-popup-close{width:28px;height:28px;border-radius:50%;border:none;background:var(--bg2);color:var(--text2);font-size:16px;cursor:pointer;font-weight:700;box-shadow:inset 3px 3px 7px rgba(0,0,0,.18),inset -2px -2px 5px rgba(255,255,255,.75);}
.cal-memo-item{padding:10px 0;border-bottom:0.5px solid var(--border)}
.cal-memo-item:last-child{border-bottom:none}
.cal-memo-item-text{font-size:14px;color:var(--text);line-height:1.5}
.cal-memo-add-area{margin-top:12px;display:flex;gap:8px;align-items:center}
.cal-memo-input-wrap{position:relative;flex:1;min-width:0}
.cal-memo-input-wrap input{width:100%;box-sizing:border-box;background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--rsm);padding:9px 34px 9px 10px;font-size:14px;color:var(--text)}
.cal-memo-input-count{position:absolute;right:8px;bottom:3px;font-size:9px;color:var(--text3);pointer-events:none}
.cal-memo-add-btn{flex-shrink:0;white-space:nowrap;padding:9px 14px;background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;border:none;border-radius:var(--rsm);font-size:13px;font-weight:700;cursor:pointer;box-shadow:4px 4px 10px rgba(80,70,140,.45),-3px -3px 8px rgba(255,255,255,.6),inset 2px 2px 4px rgba(255,255,255,.25);transition:all .15s}

/* WEIGHT FAB */
.weight-fab{position:fixed;top:14px;right:68px;width:46px;height:46px;border-radius:50%;background:var(--nm-bg);border:none;color:#6666AA;font-size:18px;display:none;align-items:center;justify-content:center;z-index:800;box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 2px 2px 5px rgba(255,255,255,.7),inset -1px -1px 4px rgba(160,150,180,.25);cursor:pointer;transition:all .18s}
.weight-fab.visible{display:flex}.weight-fab:active{box-shadow:2px 2px 6px var(--nm-shadow),-1px -1px 4px var(--nm-highlight);transform:scale(.94)}
.weight-fab:active{transform:scale(.92)}
.qgraph-fab{position:fixed;top:14px;right:122px;width:46px;height:46px;border-radius:50%;background:var(--nm-bg);border:none;font-size:18px;display:none;align-items:center;justify-content:center;z-index:800;box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 2px 2px 5px rgba(255,255,255,.7),inset -1px -1px 4px rgba(160,150,180,.25);cursor:pointer;transition:all .18s;color:#6666AA}
.qgraph-fab.visible{display:flex}.qgraph-fab:active{box-shadow:2px 2px 6px var(--nm-shadow),-1px -1px 4px var(--nm-highlight);transform:scale(.94)}
/* 体重グラフモーダル */
.weight-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1500;display:flex;align-items:flex-start;justify-content:center;padding:16px 10px;overflow-y:auto;animation:fadeIn .2s ease}
.weight-modal{background:var(--bg);border-radius:var(--r);width:100%;max-width:500px;padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.2)}
.weight-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.weight-modal-title{font-size:15px;font-weight:700;color:var(--text)}
.weight-modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg2);color:var(--text2);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 3px 3px 7px rgba(0,0,0,.18),inset -2px -2px 5px rgba(255,255,255,.75);}
/* CALENDAR FAB */
.cal-fab{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:var(--green-dark);color:#fff;border:none;font-size:20px;display:flex;align-items:center;justify-content:center;z-index:1000;box-shadow:0 2px 12px rgba(0,0,0,.18);cursor:pointer;transition:transform .12s}
.cal-fab:active{transform:scale(.92)}
/* カレンダーモーダル */
.cal-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1500;display:flex;align-items:flex-start;justify-content:center;padding:20px 10px;overflow-y:auto;animation:fadeIn .2s ease}
.cal-modal{background:var(--bg);border-radius:var(--r);width:100%;max-width:420px;padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.2)}
.cal-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-modal-title{font-size:16px;font-weight:700;color:var(--text)}
.cal-modal-close{background:none;border:none;font-size:22px;color:var(--text3);cursor:pointer;font-weight:700;padding:4px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 3px 3px 7px rgba(0,0,0,.18),inset -2px -2px 5px rgba(255,255,255,.75);}
.band-date-cell.moon-full{color:#1C1C3A;font-weight:800}
.band-date-cell.moon-new{color:#fff;font-weight:800}
.band-date-cell.is-today{color:#fff}
.band-date-cell.is-today::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;background:var(--red);z-index:0;
}
/* フェーズ帯 */
.phase-band-row{display:flex;gap:1px;height:13px;margin-bottom:3px;position:relative}
.custom-bar-row{height:20px;margin-bottom:3px;position:relative}
/* カラーバーの進捗が100%に達した時の、虹色にきらめくアニメーション */
@keyframes calBarRainbow{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
.phase-band-row .phase-band-seg{flex:1;border-radius:0}
.phase-band-row .phase-band-seg.start{border-radius:9px 0 0 9px}
.phase-band-row .phase-band-seg.end{border-radius:0 9px 9px 0}
.phase-band-row .phase-band-seg.solo{border-radius:9px}
.phase-band-row .phase-band-seg.start.end{border-radius:9px}
.phase-seg-menstrual{background:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0px,rgba(255,255,255,.28) 2px,transparent 2px,transparent 6px),#E8827E}
.phase-seg-follicular{background:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0px,rgba(255,255,255,.28) 2px,transparent 2px,transparent 6px),#5BB89A}
.phase-seg-ovulation{background:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0px,rgba(255,255,255,.28) 2px,transparent 2px,transparent 6px),#9B95E0}
.phase-seg-luteal{background:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0px,rgba(255,255,255,.28) 2px,transparent 2px,transparent 6px),#F0C76A}
.phase-band-label{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;pointer-events:none;letter-spacing:.02em}
/* スコア帯 */
.score-band-row{display:flex;gap:1px;height:26px;margin-bottom:2px}

/* WELLNESS TOOLTIP */
.wellness-tooltip-overlay{position:fixed;inset:0;z-index:1600;background:rgba(0,0,0,.45)}
.wellness-tooltip{
  position:fixed;
  background:var(--bg);
  border:0.5px solid var(--border2);
  border-radius:var(--r);
  padding:12px 14px 12px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  z-index:501;
  min-width:160px;
  max-width:240px;
  pointer-events:auto;
}
/* 吹き出しの三角（下向き） */
.wellness-tooltip::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:var(--tri-pct,50%);
  transform:translateX(-50%);
  border:8px solid transparent;
  border-bottom:none;
  border-top-color:var(--bg);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.08));
}
.wellness-tooltip::before{
  content:'';
  position:absolute;
  bottom:-9px;
  left:var(--tri-pct,50%);
  transform:translateX(-50%);
  border:9px solid transparent;
  border-bottom:none;
  border-top-color:var(--border2);
}
/* 上向き三角（下に表示する場合） */
.wellness-tooltip.tip-down::after{
  bottom:auto;top:-8px;
  left:var(--tri-pct,50%);
  border-top:none;border-bottom:8px solid var(--bg);
}
.wellness-tooltip.tip-down::before{
  bottom:auto;top:-9px;
  left:var(--tri-pct,50%);
  border-top:none;border-bottom:9px solid var(--border2);
}
.wt-date{font-size:11px;font-weight:700;color:var(--text3);margin-bottom:8px;text-align:center}
.wt-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.wt-row:last-child{margin-bottom:0}
.wt-score-badge{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.wt-content{flex:1}
.wt-label{font-size:10px;font-weight:700;color:var(--text3);margin-bottom:2px}
.wt-reason{font-size:13px;color:var(--text);line-height:1.4}
.wt-no-reason{font-size:12px;color:var(--text3);font-style:italic}
.score-band-cell{flex:1;border-radius:3px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;font-weight:700;color:#fff}
.score-band-cell.empty{background:var(--bg3)}


/* CALENDAR MEMO */
.band-date-cell.has-memo{cursor:pointer}
.band-date-cell.has-memo:active{background:var(--purple-bg)}
.cal-memo-popup{background:var(--bg);border-radius:var(--r);padding:16px;max-height:70vh;overflow-y:auto}
.cal-memo-popup-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-memo-popup-title{font-size:14px;font-weight:700;color:var(--text)}
.cal-memo-popup-close{width:28px;height:28px;border-radius:50%;border:none;background:var(--bg2);color:var(--text2);font-size:16px;cursor:pointer;font-weight:700;box-shadow:inset 3px 3px 7px rgba(0,0,0,.18),inset -2px -2px 5px rgba(255,255,255,.75);}
.cal-memo-item{padding:10px 0;border-bottom:0.5px solid var(--border)}
.cal-memo-item:last-child{border-bottom:none}
.cal-memo-item-text{font-size:14px;color:var(--text);line-height:1.5}
.cal-memo-add-area{margin-top:12px;display:flex;gap:8px;align-items:center}
.cal-memo-input-wrap{position:relative;flex:1;min-width:0}
.cal-memo-input-wrap input{width:100%;box-sizing:border-box;background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--rsm);padding:9px 34px 9px 10px;font-size:14px;color:var(--text)}
.cal-memo-input-count{position:absolute;right:8px;bottom:3px;font-size:9px;color:var(--text3);pointer-events:none}
.cal-memo-add-btn{flex-shrink:0;white-space:nowrap;padding:9px 14px;background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;border:none;border-radius:var(--rsm);font-size:13px;font-weight:700;cursor:pointer;box-shadow:4px 4px 10px rgba(80,70,140,.45),-3px -3px 8px rgba(255,255,255,.6),inset 2px 2px 4px rgba(255,255,255,.25);transition:all .15s}

/* WEIGHT FAB */
.weight-fab{position:fixed;top:14px;right:68px;width:46px;height:46px;border-radius:50%;background:var(--nm-bg);border:none;color:#6666AA;font-size:18px;display:none;align-items:center;justify-content:center;z-index:800;box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 2px 2px 5px rgba(255,255,255,.7),inset -1px -1px 4px rgba(160,150,180,.25);cursor:pointer;transition:all .18s}
.weight-fab.visible{display:flex}.weight-fab:active{box-shadow:2px 2px 6px var(--nm-shadow),-1px -1px 4px var(--nm-highlight);transform:scale(.94)}
.weight-fab:active{transform:scale(.92)}
.qgraph-fab{position:fixed;top:14px;right:122px;width:46px;height:46px;border-radius:50%;background:var(--nm-bg);border:none;font-size:18px;display:none;align-items:center;justify-content:center;z-index:800;box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 2px 2px 5px rgba(255,255,255,.7),inset -1px -1px 4px rgba(160,150,180,.25);cursor:pointer;transition:all .18s;color:#6666AA}
.qgraph-fab.visible{display:flex}.qgraph-fab:active{box-shadow:2px 2px 6px var(--nm-shadow),-1px -1px 4px var(--nm-highlight);transform:scale(.94)}
/* 体重グラフモーダル */
.weight-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1500;display:flex;align-items:flex-start;justify-content:center;padding:16px 10px;overflow-y:auto;animation:fadeIn .2s ease}
.weight-modal{background:var(--bg);border-radius:var(--r);width:100%;max-width:500px;padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.2)}
.weight-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.weight-modal-title{font-size:15px;font-weight:700;color:var(--text)}
.weight-modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg2);color:var(--text2);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 3px 3px 7px rgba(0,0,0,.18),inset -2px -2px 5px rgba(255,255,255,.75);}
/* CALENDAR FAB */
.cal-fab{position:fixed;top:14px;right:14px;width:46px;height:46px;border-radius:50%;background:var(--nm-bg);border:none;font-size:18px;display:flex;align-items:center;justify-content:center;z-index:800;box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 2px 2px 5px rgba(255,255,255,.7),inset -1px -1px 4px rgba(160,150,180,.25);cursor:pointer;transition:all .18s;color:#6666AA}
.cal-fab:active{box-shadow:2px 2px 6px var(--nm-shadow),-1px -1px 4px var(--nm-highlight);transform:scale(.94)}
/* カレンダーモーダル */
.cal-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1500;display:flex;align-items:flex-start;justify-content:center;padding:20px 10px;overflow-y:auto;animation:fadeIn .2s ease}
.cal-modal{background:var(--bg);border-radius:var(--r);width:100%;max-width:420px;padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.2)}
.cal-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-modal-title{font-size:15px;font-weight:700;color:var(--text)}
.cal-modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg2);color:var(--text2);font-size:18px;cursor:pointer;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:inset 3px 3px 7px rgba(0,0,0,.18),inset -2px -2px 5px rgba(255,255,255,.75);}
/* WELLNESS CALENDAR */
.wellness-cal-wrap{margin-bottom:20px}
.wellness-cal-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cal-nav{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cal-nav button{background:none;border:0.5px solid var(--border2);border-radius:var(--rsm);padding:5px 12px;font-size:13px;color:var(--text2);cursor:pointer}
.cal-nav span{flex:1;text-align:center;font-size:14px;font-weight:700;color:var(--text)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{font-size:10px;font-weight:700;color:var(--text3);text-align:center;padding:4px 0}
.cal-day{border-radius:6px;padding:3px 2px;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--text2)}
.cal-day.today{border:1.5px solid var(--green)}
.cal-day.other-month{opacity:.3}
.cal-day-num{font-size:11px;font-weight:700;line-height:1}
.cal-dot-row{display:flex;gap:2px;align-items:center}
.cal-dot{width:18px;height:18px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}
.cal-dot.m1{background:#C4B8F8}
.cal-dot.m2{background:#9F8EE8}
.cal-dot.m3{background:#7F77DD}
.cal-dot.m4{background:#5B50CC}
.cal-dot.m5{background:#3D30B8}
.cal-dot.p1{background:#A8D4F5}
.cal-dot.p2{background:#70BAEF}
.cal-dot.p3{background:#378ADD}
.cal-dot.p4{background:#1F6AB8}
.cal-dot.p5{background:#0E4A8A}
.cal-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:10px;color:var(--text3)}
.cal-legend-item{display:flex;align-items:center;gap:4px}
.cal-legend-dot{width:12px;height:12px;border-radius:3px}
.wellness-tooltip{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--rsm);padding:10px 12px;font-size:12px;color:var(--text2);margin-top:6px;line-height:1.7}
/* CHART STYLES */
.q-chart-section{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--r);padding:14px 14px 10px;margin-bottom:14px}
.q-chart-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-chart-sub{font-size:11px;color:var(--text2);margin-bottom:10px}
.chart-canvas-wrap{width:100%;overflow:hidden}
.chart-type-row{display:flex;gap:6px;margin-bottom:12px}
.ct-btn{padding:5px 12px;border-radius:20px;border:1px solid var(--border2);background:none;font-size:12px;font-weight:700;color:var(--text2)}
.ct-btn.active{background:var(--nm-accent);color:#fff;border-color:var(--nm-accent)}
.pie-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px}
.pie-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text2)}
.pie-legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.chart-sel-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center}
.chart-sel-btn{flex:1;padding:8px;border-radius:var(--rsm);border:1.5px solid var(--border2);background:var(--bg2);font-size:12px;font-weight:700;color:var(--text2);transition:all .15s}
.chart-sel-btn.sel-line{background:#E6F1FB;border-color:#378ADD;color:#185FA5}
.chart-sel-btn.sel-pie{background:#EEEDFE;border-color:#7F77DD;color:#534AB7}
.chart-sel-btn.sel-none{background:var(--bg2);color:var(--text3)}


/* SETTINGS */
.add-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:16px;overflow:hidden}
.add-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:14px}
.f-row{margin-bottom:12px;max-width:100%;overflow:hidden}
.f-lbl{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:6px}
.f-row input,.f-row select{width:100%;background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--rsm);padding:10px 12px;font-size:14px;color:var(--text)}
.f-row input:focus,.f-row select:focus{border-color:var(--green);background:var(--bg)}
.cat-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.cat-btn{padding:10px 0;border-radius:var(--rsm);border:1.5px solid var(--border2);background:var(--bg2);font-size:13px;font-weight:700;color:var(--text2);transition:all .15s}
.supp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:100%;overflow:hidden}
.form-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.form-btns:has(button:only-child){grid-template-columns:1fr}
.add-btn{width:100%;padding:10px 16px;background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;border:none;border-radius:var(--rsm);font-size:13px;font-weight:700;box-shadow:4px 4px 10px rgba(80,70,140,.45),-3px -3px 8px rgba(255,255,255,.6),inset 2px 2px 4px rgba(255,255,255,.25);cursor:pointer;transition:all .15s}
.add-btn:active{box-shadow:2px 2px 5px rgba(80,70,140,.4),-1px -1px 3px rgba(255,255,255,.5);transform:scale(.98)}
.cancel-btn{padding:13px;background:var(--nm-bg);border:none;border-radius:var(--rsm);font-size:14px;font-weight:700;color:#6666AA;box-shadow:4px 4px 10px var(--nm-shadow),-3px -3px 8px rgba(255,255,255,0.4),inset 1px 1px 3px rgba(255,255,255,.6),inset -1px -1px 2px rgba(160,150,180,.2);cursor:pointer;transition:all .15s}
.cancel-btn:active{box-shadow:2px 2px 5px var(--nm-shadow),-1px -1px 3px var(--nm-highlight);transform:scale(.97)}

/* 設問リスト（ドラッグ対応） */
.q-list-wrap{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:8px;margin-left:4px;margin-right:4px}
/* 設問設定「内容を表示」専用：コース選択カード等と同じ、個別カード形式の見た目にする（タスク/メモの一覧はq-list-wrapの通常スタイルのまま） */
#q-list.q-list-wrap{background:transparent;border:none;overflow:visible}
#q-list.q-list-wrap .q-item{background:#fff;border:0.5px solid var(--border2);border-radius:var(--rsm);box-shadow:0 4px 10px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);margin-bottom:10px}
#q-list.q-list-wrap .q-item-body{padding-right:14px}
#q-list.q-list-wrap .q-item:last-child{margin-bottom:0}
.q-item{
  display:flex;align-items:center;gap:0;
  border-bottom:0.5px solid var(--border);
  background:var(--bg);
  transition:box-shadow .15s,transform .15s;
  user-select:none;
}
.q-item:last-child{border-bottom:none}
.q-item.dragging{
  box-shadow:0 8px 24px rgba(0,0,0,.13);
  opacity:.95;
  z-index:100;
  border-radius:var(--rsm);
  transform:scale(1.02);
}
.q-item.drag-over{box-shadow:inset 0 3px 0 0 var(--nm-accent)}
.q-item.dragging.drag-over{box-shadow:0 8px 24px rgba(0,0,0,.13),inset 0 3px 0 0 var(--nm-accent)}
.drag-handle{
  padding:16px 10px 16px 14px;
  color:var(--text3);
  font-size:18px;
  cursor:grab;
  flex-shrink:0;
  display:flex;align-items:center;
}
.drag-handle:active{cursor:grabbing}
.q-item-body{flex:1;padding:13px 0;cursor:pointer}
.q-item-body:active{opacity:.7}
.q-item-text{font-size:14px;color:var(--text);line-height:1.4}
.q-item-meta{display:flex;gap:6px;margin-top:3px;flex-wrap:wrap}
.qi-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.qi-supp{font-size:10px;color:var(--text3)}
/* 「ごほうび設定済み」タグ：アイコンを虹色にし、タップで詳細ポップアップを開けるようにする */
.qi-reward-tag{display:inline-flex;align-items:center;gap:4px;border:none;background:none;padding:2px 4px 2px 0;
  font-size:10px;color:var(--text2);font-weight:700;cursor:pointer;font-family:inherit}
.qi-reward-tag i{
  background:linear-gradient(100deg,#ff4d4d,#ffa24d,#ffe94d,#4dff88,#4dd2ff,#8b4dff,#ff4dd2,#ff4d4d);
  background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:medalRainbow 3.2s linear infinite}
@media (prefers-reduced-motion: reduce){
  .qi-reward-tag i{animation:none}
}
/* ===== 設問設定ウィザード ===== */
.q-wiz-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.q-wiz-bulb{position:relative;flex-shrink:0;width:34px;height:34px;border-radius:50%;border:none;
  background:var(--bg2);color:var(--nm-accent);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
/* しっぽは電球の真下（左端寄り）に固定し、本体は右にずらして画面外へのはみ出しを防ぐ */
.q-wiz-bulb-tip{position:absolute;top:calc(100% + 8px);left:-6px;transform:translateY(-4px);
  white-space:nowrap;background:#3A3A4A;color:#fff;font-size:10.5px;font-weight:700;padding:5px 9px;border-radius:8px;
  opacity:0;pointer-events:none;animation:qBulbTip 3.6s ease-in-out infinite;animation-delay:.6s;z-index:50}
.q-wiz-bulb-tip::after{content:'';position:absolute;bottom:100%;left:14px;
  border:4px solid transparent;border-bottom-color:#3A3A4A}
@keyframes qBulbTip{
  0%,8%{opacity:0;transform:translateY(-4px)}
  18%,72%{opacity:1;transform:translateY(0)}
  85%,100%{opacity:0;transform:translateY(-4px)}
}
/* 表示回数の上限に達したら、吹き出しを完全に消す */
.q-wiz-bulb.q-tip-done .q-wiz-bulb-tip{display:none}
.q-wiz-text-wrap{position:relative;flex:1;min-width:0}
.q-wiz-text{width:100%;box-sizing:border-box;background:#fff;border:1.5px solid var(--border2);
  border-radius:var(--rsm);padding:10px 44px 10px 12px;font-size:14px;color:var(--text);font-family:inherit}
.q-wiz-text:focus{outline:none;border-color:var(--nm-accent)}
.q-wiz-text-count{position:absolute;right:8px;bottom:5px;font-size:9px;color:var(--text3);pointer-events:none}
.q-wiz-sub-wrap{position:relative;flex:1;min-width:0}
.q-wiz-trigger,.q-wiz-fallback{width:100%;box-sizing:border-box;background:#fff;border:0.5px solid var(--border2);border-radius:8px;padding:7px 34px 7px 10px;font-size:12px;color:var(--text)}
.q-wiz-sub-count{position:absolute;right:8px;bottom:4px;font-size:8.5px;color:var(--text3);pointer-events:none}
/* ごほうび設定リスト（第2ページ） */
.q-gift-row{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:0.5px solid var(--border)}
.q-gift-row:last-child{border-bottom:none}
.q-gift-row-text{flex:1;min-width:0;font-size:13.5px;color:var(--text);line-height:1.4}
.q-gift-btn{flex-shrink:0;width:36px;height:36px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:19px}
.q-gift-btn i{color:var(--border2)}
.q-gift-btn.set i{
  background:linear-gradient(100deg,#ff4d4d,#ffa24d,#ffe94d,#4dff88,#4dd2ff,#8b4dff,#ff4dd2,#ff4d4d);
  background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:medalRainbow 3.2s linear infinite}
/* ごほうび個別設定ポップアップ */
.q-reward-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.q-reward-mode-btn{padding:11px 8px;border-radius:var(--rsm);border:1.5px solid var(--border2);background:var(--bg2);
  font-size:12.5px;font-weight:700;color:var(--text2);cursor:pointer;font-family:inherit;line-height:1.4}
.q-reward-mode-btn.on{border-color:var(--nm-accent);background:var(--nm-accent);color:#fff}
.q-tier-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.q-tier-label{flex:0 0 74px;font-size:12.5px;font-weight:800;color:var(--text2)}
.q-tier-input{flex:1;min-width:0;box-sizing:border-box;background:var(--bg2);border:1.5px solid var(--border2);
  border-radius:var(--rsm);padding:8px 10px;font-size:13px;color:var(--text);font-family:inherit}
.q-tier-input:focus{outline:none;border-color:var(--nm-accent)}
.q-interval-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--text);margin-bottom:10px}
.q-interval-row input[type=number]{width:56px;text-align:center;padding:7px 4px;border:0.5px solid var(--border2);
  border-radius:8px;background:var(--bg2);font-size:13px;color:var(--text)}
/* 例文ピッカーの検索窓 */
.ex-search-wrap{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.ex-search-input-wrap{position:relative;flex:1;min-width:0}
.ex-search-input{width:100%;box-sizing:border-box;background:var(--bg2);border:1.5px solid var(--border2);
  border-radius:20px;padding:10px 36px 10px 34px;font-size:13.5px;color:var(--text);font-family:inherit}
.ex-search-input:focus{outline:none;border-color:var(--nm-accent)}
.ex-search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:13px;pointer-events:none}
.ex-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;
  background:var(--border2);border-radius:50%;color:var(--text3);font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.ex-search-go-btn{flex-shrink:0;width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(145deg,#7878BC,#5555AA);color:#fff;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:3px 3px 8px rgba(80,70,140,.4),-2px -2px 6px rgba(255,255,255,.5),inset 1px 1px 2px rgba(255,255,255,.25)}
.ex-search-go-btn:active{transform:scale(.94)}
.q-wiz-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.q-wiz-btn-row .wiz-btn,.q-wiz-btn-row .modal-cancel{margin-top:0}
.q-del{background:none;border:none;color:var(--text3);font-size:20px;padding:14px 14px 14px 8px;line-height:1;flex-shrink:0}
.q-del:active{color:var(--red)}
.drag-hint{font-size:11px;color:var(--text3);text-align:center;padding:6px 0 2px}

/* 削除確認モーダル */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
  animation:fadeIn .18s ease;
}
.modal{
  background:var(--bg);border-radius:var(--r);
  padding:24px 20px 16px;
  width:calc(100% - 48px);max-width:340px;
  max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
.modal-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px}
.modal-msg{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:20px}
.modal-q{font-size:14px;font-weight:700;color:var(--text);background:var(--bg2);border-radius:var(--rsm);padding:10px 12px;margin-bottom:20px;line-height:1.4}
.modal-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-cancel{padding:13px;background:var(--nm-bg);border:none;border-radius:var(--rsm);font-size:15px;font-weight:700;color:#6666AA;box-shadow:4px 4px 10px var(--nm-shadow),-3px -3px 8px rgba(255,255,255,0.4),inset 1px 1px 3px rgba(255,255,255,.6),inset -1px -1px 2px rgba(160,150,180,.2);cursor:pointer;transition:all .15s}
.modal-cancel:active{box-shadow:2px 2px 5px var(--nm-shadow),-1px -1px 3px var(--nm-highlight);transform:scale(.97)}
.modal-ok{padding:13px;background:linear-gradient(145deg,#CC4444,#AA2222);border:none;border-radius:var(--rsm);font-size:15px;font-weight:700;color:#fff;box-shadow:4px 4px 10px rgba(180,50,50,.4),-3px -3px 8px rgba(255,255,255,.6),inset 2px 2px 4px rgba(255,255,255,.2);cursor:pointer;transition:all .15s}
.modal-ok:active{box-shadow:2px 2px 5px rgba(180,50,50,.35),-1px -1px 3px rgba(255,255,255,.5);transform:scale(.97)}

/* 編集フォームモーダル */
.edit-modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:1000;
  animation:fadeIn .18s ease;
}
.edit-modal{
  background:var(--bg);
  border-radius:var(--r) var(--r) 0 0;
  padding:20px 20px 32px;
  width:100%;max-width:480px;
  max-height:85vh;overflow-y:auto;
}
.edit-modal-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.edit-modal-close{background:none;border:none;font-size:22px;color:var(--text3);padding:0 0 0 12px}
/* ===== OK!スタンプ（オンボーディング・習慣達成） ===== */
.stamp-card{position:relative;background:var(--bg2);border-radius:16px;padding:16px 14px 14px;margin-bottom:12px;box-shadow:3px 3px 8px rgba(0,0,0,.07),-2px -2px 6px rgba(255,255,255,.6)}
.stamp-card-title{font-size:12px;font-weight:800;color:var(--text2);text-align:center;margin-bottom:4px;letter-spacing:.03em}
.stamp-card-habit{font-size:14px;font-weight:700;color:var(--text);text-align:center;line-height:1.5;margin-bottom:12px;word-break:break-word}
.stamp-grid{display:grid;gap:8px;justify-content:center;margin-bottom:6px}
.stamp-slot{position:relative;aspect-ratio:1;border-radius:50%;background:rgba(120,120,160,.09);box-shadow:inset 2px 2px 5px rgba(120,120,160,.16),inset -1px -1px 3px rgba(255,255,255,.5)}
.stamp-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
/* すでに押されているスタンプ（アニメーションなしで表示） */
.stamp-slot.filled img{opacity:1}
/* 今回新しく押されるスタンプ：着弾するまで枠の中身は隠しておく（実体は .stamp-flyer が飛ぶ） */
.stamp-slot.stamping img{opacity:0}
/* 着弾の瞬間に枠側で小さく弾む */
.stamp-slot.landed img{opacity:1;animation:stampLand .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes stampLand{
  0%{transform:scale(1.16)}
  45%{transform:scale(.93)}
  75%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
/* 画面中央にどーんと出て、枠へ吸い込まれていく実体 */
.stamp-flyer{position:fixed;left:0;top:0;pointer-events:none;z-index:3400;will-change:transform,opacity,filter}
/* スタンプが連続で押されている間、スクロールと上部ボタンを一時的にロックする */
.scroll-body.stamp-locked{touch-action:none;overscroll-behavior:contain}
.stamp-ui-locked{pointer-events:none!important;opacity:.4;filter:grayscale(.4);transition:opacity .2s}
/* スタンプが押された瞬間の衝撃（枠が揺れる） */
.stamp-card.shake{animation:stampShake .4s ease}
@keyframes stampShake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3px,2px)}
  40%{transform:translate(3px,-2px)}
  60%{transform:translate(-2px,1px)}
  80%{transform:translate(2px,-1px)}
}
.stamp-progress{font-size:12px;font-weight:800;color:var(--nm-accent);text-align:center;letter-spacing:.04em}
/* 今日NOだった設問カードに出す「今からでもやってみる？」ボタン */
.stamp-retry-btn{width:100%;margin-top:12px;padding:10px;border:1.5px dashed var(--border2);border-radius:var(--rsm);
  background:var(--bg2);font-size:13px;font-weight:700;color:var(--nm-accent);cursor:pointer;font-family:inherit}
.stamp-retry-btn:active{transform:scale(.97)}
/* ===== 30回ループ達成メダル（カード左上に貼り付いているように見せる） ===== */
.stamp-medal{position:absolute;top:-11px;left:-7px;z-index:6;line-height:1;transform:rotate(-13deg);pointer-events:none}
.stamp-medal i{display:block;font-size:44px;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stamp-medal i.medal-base{filter:drop-shadow(2px 3px 3px rgba(0,0,0,.3)) drop-shadow(0 0 1px rgba(0,0,0,.25))}
/* メダルと同じ形をもう1枚重ね、白い帯を流して「光の筋」にする */
.stamp-medal i.medal-shine{position:absolute;top:0;left:0;
  background:linear-gradient(112deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.98) 48%,rgba(255,255,255,0) 58%);
  background-size:280% 100%;background-position:-90% 0}
.medal-bronze  i.medal-base{background:linear-gradient(145deg,#F2C795,#C87F3E 42%,#8B4E1E 72%,#DE9B60)}
.medal-silver  i.medal-base{background:linear-gradient(145deg,#FBFCFD,#C3C9D2 42%,#868E9B 72%,#E6EAEF)}
.medal-gold    i.medal-base{background:linear-gradient(145deg,#FFF0B8,#F5C24B 42%,#B8830F 72%,#FFDD79)}
.medal-red     i.medal-base{background:linear-gradient(145deg,#FFB0B0,#E23B3B 45%,#8E1616 75%,#F26B6B)}
.medal-green   i.medal-base{background:linear-gradient(145deg,#B6EFA8,#3FA83F 45%,#1B6320 75%,#71CD65)}
.medal-blue    i.medal-base{background:linear-gradient(145deg,#AEDBFF,#3182E0 45%,#12468C 75%,#65AAF1)}
.medal-purple  i.medal-base{background:linear-gradient(145deg,#E0BEFA,#8B4FD1 45%,#4E2080 75%,#B27EE8)}
.medal-rainbow i.medal-base{background:linear-gradient(100deg,#ff4d4d,#ffa24d,#ffe94d,#4dff88,#4dd2ff,#8b4dff,#ff4dd2,#ff4d4d);
  background-size:320% 100%;animation:medalRainbow 3.2s linear infinite}
@keyframes medalRainbow{0%{background-position:0% 50%}100%{background-position:320% 50%}}
/* 着弾の衝撃で広がる輪 */
.stamp-medal .medal-ring{position:absolute;left:22px;top:20px;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:50%;border:2px solid rgba(95,88,160,.5);opacity:0;pointer-events:none}
/* 今この瞬間に獲得したメダルは、スタンプが着弾するまで隠しておく */
.stamp-medal.medal-new{opacity:0}
.stamp-medal.medal-new.slam{animation:medalSlam 500ms cubic-bezier(.2,1.5,.35,1) both}
@keyframes medalSlam{
  0%{opacity:0;transform:rotate(-100deg) scale(3);filter:blur(5px)}
  38%{opacity:1;filter:blur(0)}
  56%{transform:rotate(-3deg) scale(1.16)}
  73%{transform:rotate(-19deg) scale(.94)}
  88%{transform:rotate(-10deg) scale(1.05)}
  100%{opacity:1;transform:rotate(-13deg) scale(1);filter:blur(0)}
}
.stamp-medal.slam i.medal-shine{animation:medalShine 720ms ease-out 320ms both}
@keyframes medalShine{from{background-position:-90% 0}to{background-position:190% 0}}
.stamp-medal.slam .medal-ring{animation:medalRing 520ms ease-out 130ms both}
@keyframes medalRing{0%{opacity:.85;transform:scale(.35)}100%{opacity:0;transform:scale(6)}}
/* 虹メダルが2周目以降に入ったときの回数バッジ */
.stamp-medal-num{position:absolute;right:-5px;bottom:-3px;min-width:18px;height:18px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  background:var(--bg2);border:1.5px solid var(--nm-accent);border-radius:9px;
  font-size:11px;font-weight:800;color:var(--nm-accent);
  transform:rotate(13deg);box-shadow:1px 2px 3px rgba(0,0,0,.18)}
@media (prefers-reduced-motion: reduce){
  .stamp-medal.medal-new{opacity:1}
  .stamp-medal.medal-new.slam{animation:none}
  .stamp-medal.slam i.medal-shine{animation:none}
  .stamp-medal.slam .medal-ring{animation:none}
  .medal-rainbow i.medal-base{animation:none}
}
@media (prefers-reduced-motion: reduce){
  .stamp-slot.stamping img{animation:none;opacity:1}
  .stamp-slot.landed img{animation:none}
  .stamp-card.shake{animation:none}
  .stamp-flyer{display:none}
}
/* ===== ごほうびアンロック派手演出 ===== */
#rwd-fx{position:fixed;inset:0;z-index:3500;display:none;align-items:center;justify-content:center}
#rwd-flash{position:fixed;inset:0;opacity:0;pointer-events:none;z-index:3499}
#rwd-rays{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:3500}
.rwd-ray{position:absolute;width:3px;height:50vh;transform-origin:bottom center;border-radius:2px}
.rwd-particle,.rwd-spark{position:fixed;pointer-events:none;z-index:3600}
/* P1 ガチャ */
#rwdp1-card{position:relative;background:linear-gradient(135deg,#1e1040,#2d1b69,#1e1040);border-radius:24px;padding:36px 28px 28px;width:300px;max-width:86vw;text-align:center;opacity:0;transform:scale(0.4) translateY(60px);box-shadow:0 0 40px rgba(160,100,255,0.6),0 0 80px rgba(160,100,255,0.3)}
#rwdp1-border{position:absolute;inset:-2px;border-radius:26px;z-index:-1;opacity:0;background:linear-gradient(135deg,#FFD700,#DA70D6,#7DF9FF,#FFD700);background-size:300% 300%;animation:rwdBGlow 2s linear infinite}
@keyframes rwdBGlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
#rwdp1-banner{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#FFD700,#FFA500,#FFD700);color:#3a2000;font-size:11px;font-weight:900;letter-spacing:3px;padding:4px 18px;border-radius:20px;white-space:nowrap;box-shadow:0 2px 10px rgba(255,165,0,0.6);opacity:0}
#rwdp1-icon{font-size:52px;display:inline-block;opacity:0;transform:scale(0) rotate(-20deg);filter:drop-shadow(0 0 12px rgba(255,200,100,0.8));color:#FFD86B}
#rwdp1-title{font-size:11px;font-weight:800;letter-spacing:4px;color:rgba(200,160,255,0.8);margin:12px 0 6px;opacity:0}
#rwdp1-name{font-size:20px;font-weight:900;color:#fff;margin-bottom:10px;opacity:0;text-shadow:0 0 20px rgba(200,160,255,0.8);line-height:1.4}
#rwdp1-sub{font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:16px;opacity:0}
.rwd-close-btn{background:linear-gradient(135deg,#7B6CF6,#A855F7);color:#fff;border:none;border-radius:14px;padding:12px;font-size:14px;font-weight:800;cursor:pointer;width:100%;opacity:0;box-shadow:0 4px 16px rgba(120,80,255,0.5)}
/* P3 金庫 */
#rwdp3-vault{width:240px;height:240px;position:relative;margin-bottom:0}
#rwdp3-door{width:200px;height:200px;border-radius:50%;margin:20px auto 0;background:linear-gradient(135deg,#8B6914,#DAA520,#8B6914);border:6px solid #DAA520;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(218,165,32,0.5),inset 0 4px 8px rgba(255,255,255,0.2);transform-origin:left center}
#rwdp3-dial{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#555,#888,#555);border:4px solid #aaa;position:absolute;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 6px rgba(0,0,0,0.5)}
#rwdp3-dial-line{width:3px;height:28px;background:#FFD700;border-radius:2px;transform-origin:bottom center}
#rwdp3-handle{width:20px;height:50px;background:linear-gradient(#aaa,#777);border-radius:10px;position:absolute;right:-4px;top:50%;transform:translateY(-50%)}
#rwdp3-light{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-radius:50%}
#rwdp3-text{text-align:center;opacity:0;transform:scale(2.5);filter:blur(10px);padding:0 20px;position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3610;pointer-events:none}
#rwdp3-name{font-size:min(11vw,48px);font-weight:900;color:#fff;text-shadow:0 0 30px rgba(218,165,32,1),0 0 60px rgba(218,165,32,0.5),0 0 100px rgba(218,165,32,0.3);line-height:1.3;letter-spacing:-1px}
#rwdp3-sub{font-size:13px;color:rgba(255,255,255,0.7);font-weight:700;letter-spacing:3px;opacity:0;z-index:3611;position:fixed;text-align:center;width:100%}
#rwdp3-card{background:rgba(255,255,255,0.05);border:1px solid rgba(218,165,32,0.4);border-radius:20px;padding:24px;text-align:center;width:280px;max-width:84vw;opacity:0;z-index:3611;position:fixed;backdrop-filter:blur(10px)}
#rwdp3-card-label{font-size:11px;color:#DAA520;font-weight:800;letter-spacing:3px;margin-bottom:8px}
#rwdp3-card-name{font-size:20px;color:#fff;font-weight:900;line-height:1.4;margin-bottom:14px}
#rwdp3-card-btn{background:linear-gradient(135deg,#DAA520,#FFA500);color:#3a2000;border:none;border-radius:12px;padding:12px;font-size:14px;font-weight:900;cursor:pointer;width:100%;opacity:0}
/* P4 タイプライター */
#rwdp4-wrap{display:none;position:fixed;inset:0;z-index:3501;align-items:center;justify-content:center;flex-direction:column;background:rgba(0,0,0,0.82);padding:30px}
#rwdp4-scan{position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,150,0.03) 2px,rgba(0,255,150,0.03) 4px);pointer-events:none;z-index:3602}
#rwdp4-border{border:2px solid #0f0;border-radius:4px;padding:28px;width:100%;max-width:320px;position:relative;box-shadow:0 0 20px rgba(0,255,100,0.3),inset 0 0 20px rgba(0,255,100,0.05)}
#rwdp4-header{font-size:10px;color:#0f0;letter-spacing:3px;margin-bottom:16px;opacity:0.7;font-family:monospace}
#rwdp4-unlock{font-size:13px;color:#0f0;font-family:monospace;letter-spacing:2px;margin-bottom:20px;min-height:20px}
#rwdp4-divider{border:none;border-top:1px solid rgba(0,255,100,0.3);margin:12px 0}
#rwdp4-label{font-size:10px;color:rgba(0,255,100,0.6);letter-spacing:3px;font-family:monospace;margin-bottom:8px}
#rwdp4-reward{font-size:24px;font-weight:900;color:#fff;text-shadow:0 0 20px rgba(0,255,100,0.8),0 0 40px rgba(0,255,100,0.4);line-height:1.4;min-height:60px}
#rwdp4-cursor{display:inline-block;width:3px;height:24px;background:#0f0;vertical-align:middle;animation:rwdBlink 0.7s infinite}
@keyframes rwdBlink{0%,100%{opacity:1}50%{opacity:0}}
#rwdp4-btn{margin-top:20px;background:transparent;border:1px solid #0f0;color:#0f0;border-radius:4px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;width:100%;font-family:monospace;letter-spacing:2px;opacity:0;box-shadow:0 0 10px rgba(0,255,100,0.2)}
/* P5 宝箱 */
#rwdp5-chest-wrap{position:relative;width:140px;height:140px;margin-bottom:6px}
#rwdp5-chest{font-size:90px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 20px rgba(255,200,0,0.6))}
#rwdp5-coins{position:absolute;inset:0;pointer-events:none}
#rwdp5-bigtext{font-size:min(14vw,72px);font-weight:900;color:#FFD700;text-align:center;line-height:1.1;letter-spacing:-1px;opacity:0;transform:scale(3.5);filter:blur(12px);text-shadow:0 0 40px rgba(255,200,0,0.9),0 0 80px rgba(255,150,0,0.5);padding:0 16px;position:relative;z-index:2;margin-bottom:16px}
#rwdp5-card{background:linear-gradient(135deg,rgba(255,200,0,0.1),rgba(255,150,0,0.05));border:2px solid rgba(255,200,0,0.4);border-radius:20px;padding:22px;text-align:center;width:280px;max-width:84vw;opacity:0;transform:translateY(20px);margin-top:10px;backdrop-filter:blur(10px)}
#rwdp5-label{font-size:11px;color:#FFD700;font-weight:800;letter-spacing:3px;margin-bottom:8px}
#rwdp5-name{font-size:21px;font-weight:900;color:#fff;text-shadow:0 0 20px rgba(255,200,0,0.8);line-height:1.4;margin-bottom:14px}
#rwdp5-btn{background:linear-gradient(135deg,#FFD700,#FF8C00);color:#1a0a00;border:none;border-radius:12px;padding:12px;font-size:14px;font-weight:900;cursor:pointer;width:100%;opacity:0}

/* ===== 広告バナー ===== */
#ad-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:800;
  background:var(--nm-bg);
  height:130px;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  padding:0;
  transition:height .2s ease;
}
#ad-banner.hidden{display:none;}
#ad-banner.ad-size-adsense{height:110px;}
#ad-banner.ad-size-rakuten{height:70px;}
#ad-banner.ad-size-custom{height:140px;}
#ad-banner img{width:100%;height:100%;object-fit:cover;display:block}
#ad-banner a{display:block;width:100%;height:100%}
/* 広告表示時は画面下部にpadding追加 */
.screen.ad-shown{padding-bottom:140px;transition:padding-bottom .2s ease}
.screen.ad-shown.ad-pad-adsense{padding-bottom:110px;}
.screen.ad-shown.ad-pad-rakuten{padding-bottom:70px;}
.screen.ad-shown.ad-pad-custom{padding-bottom:140px;}

/* 横向き案内オーバーレイ（縦向き専用アプリのため） */
#rotate-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:var(--nm-bg);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:32px;
  text-align:center;
}
#rotate-overlay i{
  font-size:48px;
  color:var(--nm-accent);
  margin-bottom:20px;
  animation:rotateHint 1.6s ease-in-out infinite;
}
#rotate-overlay .rotate-msg{
  font-size:16px;
  font-weight:700;
  color:var(--text);
  line-height:1.7;
}
@keyframes rotateHint{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(-90deg);}
}
@media (orientation: landscape){
  #rotate-overlay{display:flex;}
}

/* ===== オキドキサンに聞いてみよう（覗きアイコン・グレーアウト・飛び出し演出） ===== */
/* 常時表示の覗きアイコン：画面下から1/3あたり、左端から顔の右半分だけ覗く */
#okidoki-peek{
  position:fixed;left:-25px;bottom:33%;z-index:2400;
  width:64px;height:64px;border:none;padding:0;background:none;
  display:flex;align-items:center;justify-content:flex-end;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:okidokiPeekBob 3.2s ease-in-out infinite;
}
#okidoki-peek img{
  width:64px;height:auto;pointer-events:none;
  filter:drop-shadow(2px 3px 6px rgba(90,90,140,.35));
  transform:rotate(90deg);
}
#okidoki-peek.okidoki-hidden{display:none}
@keyframes okidokiPeekBob{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}
#okidoki-peek.okidoki-popin{
  animation:okidokiPeekPopin .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes okidokiPeekPopin{
  0%{transform:translateX(-36px) scale(.7);opacity:0}
  100%{transform:translateX(0) scale(1);opacity:1}
}
/* チュートリアル等のオキドキサン登場時、覗きアイコンが一旦左へサッと消える */
#okidoki-peek.okidoki-peek-slipout{
  animation:none;
  transition:transform .18s cubic-bezier(.5,0,1,1),opacity .18s ease;
  transform:translateX(-60px);
  opacity:0;
}
/* その後、少し間を置いてからゆっくり下から出てきて定位置に着地する */
#okidoki-peek.okidoki-popfrombelow{
  animation:okidokiPeekPopFromBelow .9s cubic-bezier(.22,1.1,.36,1) both;
}
@keyframes okidokiPeekPopFromBelow{
  0%{transform:translateY(46px) scale(.75);opacity:0}
  100%{transform:translateY(0) scale(1);opacity:1}
}

/* グレーアウト（タップ即座にフェードイン） */
#okidoki-overlay{
  position:fixed;inset:0;z-index:2500;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
#okidoki-overlay.okidoki-open{opacity:1;pointer-events:auto}
#okidoki-overlay .okidoki-scrim{
  position:absolute;inset:0;
  background:rgba(15,15,22,.78);
}
/* 「オキドキサンに聞いてみよう！」初回チュートリアル中は、フィード内の吹き出し
   (次へ/了解ボタン)以外の操作をすべてロックする。 */
#okidoki-overlay.okidoki-tut-locking .okidoki-input-row,
#okidoki-overlay.okidoki-tut-locking .okidoki-model-toggle,
#okidoki-overlay.okidoki-tut-locking #okidoki-toolbar,
#okidoki-overlay.okidoki-tut-locking .okidoki-close-btn,
#okidoki-overlay.okidoki-tut-locking .okidoki-header-info-btn{
  pointer-events:none;
}

/* ビューンと飛ぶ本体（曲線軌道はJSでleft/topを直接駆動） */
#okidoki-flying{
  position:fixed;z-index:2650;width:64px;height:auto;
  pointer-events:none;
  filter:drop-shadow(2px 4px 8px rgba(0,0,0,.3));
  opacity:0;
}

/* 定位置に着地した後のパネル（ヘッダー・入力欄・トークン表示） */
#okidoki-panel{
  position:absolute;top:0;left:0;right:0;z-index:2620;
  padding:calc(env(safe-area-inset-top) + 18px) 20px 0;
  opacity:0;transform:translateY(-10px);
  transition:opacity .3s ease .05s,transform .3s ease .05s;
}
#okidoki-panel.okidoki-show{opacity:1;transform:translateY(0)}
.okidoki-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.okidoki-panel-title{
  font-size:16px;font-weight:700;color:#fff;letter-spacing:.02em;
}
.okidoki-close-btn{
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.18);color:#fff;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.okidoki-input-row{
  position:relative;
  display:flex;align-items:center;gap:8px;
  background:var(--cream);border-radius:var(--r);
  padding:8px 8px 8px 8px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.okidoki-input-wrap{
  position:relative;flex:1;min-width:0;display:flex;align-items:center;
}
.okidoki-input-wrap input{
  flex:1;min-width:0;border:none;background:none;font-size:15px;color:var(--text);
  position:relative;z-index:1;
}
.okidoki-input-wrap input::placeholder{color:var(--text3);transition:opacity .2s ease}
/* 入力欄未選択時、質問候補をルーレット風に縦スライドで入れ替え表示する */
.okidoki-idle-suggest{
  position:absolute;left:0;right:0;top:0;bottom:0;
  overflow:hidden;pointer-events:none;
}
.okidoki-idle-suggest-text{
  position:absolute;left:0;right:0;top:0;bottom:0;
  display:flex;align-items:center;
  font-size:15px;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform:translateY(0);opacity:1;
  transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .8s ease;
}
.okidoki-suggest-bulb{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;border:none;
  background:#fff;color:var(--nm-accent);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.okidoki-send-btn{
  width:38px;height:38px;border-radius:50%;border:none;
  background:var(--nm-accent);color:#fff;font-size:16px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.okidoki-token-row{}

/* 電球タップ時、フィード等の背景をグレーアウトする専用スクリム。
   #okidoki-panel(ヘッダー・入力欄自体)より下、フィード/ツールバー/dockより上に置くことで、
   入力欄まわりはくっきり見せつつ、その奥の会話フィードだけを暗くする。
   広告バナー(z-index:800)より遥かに上なので、広告の表示有無やその分の余白は一切気にしなくてよい。 */
#okidoki-suggest-scrim{
  position:fixed;inset:0;z-index:2615;
  background:rgba(10,8,20,.5);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
#okidoki-suggest-scrim.okidoki-show{opacity:1;pointer-events:auto}

/* 電球タップで出す質問候補チップ(3つ、入力欄の下に浮き出るオーバーレイ。
   下にあるモデル切り替えボタン等のレイアウトは一切押し下げない) */
#okidoki-suggest-chips{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:2620;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  /* 広告バナー分の余白などは考慮せず、画面下端近くまで目一杯使ってよい */
  max-height:min(85vh,720px);
  overflow-y:auto;
}
#okidoki-suggest-chips.okidoki-show{opacity:1;transform:translateY(0);pointer-events:auto}
.okidoki-suggest-chip{
  display:block;width:100%;text-align:left;border:none;border-radius:999px;
  padding:9px 14px;font-size:12.5px;font-weight:700;color:#fff;
  background:rgba(40,36,64,.88);cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

/* 電球チップの下に表示する「オキドキサン 便利プロンプト集」カード */
.okidoki-prompt-library{
  background:rgba(255,255,255,.97);border-radius:14px;
  padding:14px 16px 16px;margin-top:2px;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  font-size:12px;line-height:1.6;color:var(--text2);
}
.okidoki-prompt-library-title{
  font-size:13.5px;font-weight:800;color:var(--text);margin-bottom:6px;
}
.okidoki-prompt-library-desc{margin-bottom:8px}
.okidoki-prompt-tips-title{font-weight:800;color:var(--text);margin-top:4px;margin-bottom:2px}
.okidoki-prompt-tips{margin:0 0 4px;padding-left:16px}
.okidoki-prompt-tips li{margin-bottom:3px}
.okidoki-prompt-group{margin-top:10px}
.okidoki-prompt-group-label{
  font-size:11px;font-weight:800;color:var(--nm-accent);margin-bottom:5px;
}
.okidoki-prompt-item{
  display:block;width:100%;text-align:left;border:1px solid var(--border2);border-radius:10px;
  padding:8px 10px;margin-bottom:5px;font-size:12px;font-weight:600;color:var(--text);
  background:var(--bg2);cursor:pointer;
}
.okidoki-prompt-item:last-child{margin-bottom:0}

/* 過去ログ・トークンショップ・残高を横並びにした右詰めツールバー */
#okidoki-toolbar{
  position:absolute;right:20px;z-index:2610;
  display:flex;align-items:center;gap:8px;
  opacity:0;transition:opacity .3s ease .15s;
}
#okidoki-toolbar.okidoki-show{opacity:1}
.okidoki-toolbar-btn{
  border:none;border-radius:999px;padding:5px 12px;
  background:rgba(255,255,255,.92);color:var(--nm-accent);
  font-size:11px;font-weight:700;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.okidoki-toolbar-balance{
  border:none;background:none;padding:0;font-family:inherit;
  font-size:11px;font-weight:700;color:#fff;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.3);cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}

/* 定位置に着地したオキドキサン（ツールバーと同じ高さ、左寄り固定） */
#okidoki-dock{
  position:absolute;left:20px;z-index:2610;width:56px;height:auto;
  opacity:0;pointer-events:none;
}
#okidoki-dock.okidoki-show{opacity:1}

/* 回答の吹き出し（オキドキサンの下、画面幅いっぱいに表示） */
/* フィード全体(新しい発言が上に積まれる。オキドキサンの下から画面下端まで) */
#okidoki-feed{
  position:absolute;z-index:2605;left:20px;right:20px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:10px;
  padding-top:10px;padding-bottom:20px;
}
/* ===== カロリー相談チャット専用オーバーレイ：レイアウト用のID指定は上のオキドキサンチャットと
   全く同じ値を、別IDの下に複製してある（お互い独立させ、片方の変更がもう片方に影響しないように） ===== */
#mealai-overlay{
  position:fixed;inset:0;z-index:2500;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
#mealai-overlay.okidoki-open{opacity:1;pointer-events:auto}
#mealai-overlay .okidoki-scrim{
  position:absolute;inset:0;
  background:rgba(15,15,22,.78);
}
#mealai-flying{
  position:fixed;z-index:2650;width:64px;height:auto;
  pointer-events:none;
  filter:drop-shadow(2px 4px 8px rgba(0,0,0,.3));
  opacity:0;
}
#mealai-panel{
  position:absolute;top:0;left:0;right:0;z-index:2620;
  padding:calc(env(safe-area-inset-top) + 18px) 20px 0;
  opacity:0;transform:translateY(-10px);
  transition:opacity .3s ease .05s,transform .3s ease .05s;
}
#mealai-panel.okidoki-show{opacity:1;transform:translateY(0)}
#mealai-toolbar{
  position:absolute;right:20px;z-index:2610;
  display:flex;align-items:center;gap:8px;
  opacity:0;transition:opacity .3s ease .15s;
}
#mealai-toolbar.okidoki-show{opacity:1}
#mealai-dock{
  position:absolute;left:20px;z-index:2610;width:56px;height:auto;
  opacity:0;pointer-events:none;
}
#mealai-dock.okidoki-show{opacity:1}
#mealai-feed{
  position:absolute;z-index:2605;left:20px;right:20px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:10px;
  padding-top:10px;padding-bottom:20px;
}
.okidoki-turn{
  position:relative;max-width:100%;
  border-radius:var(--r);padding:12px 14px;
  font-size:14px;line-height:1.6;color:var(--text);
  white-space:pre-wrap;overflow-wrap:break-word;
  box-shadow:0 3px 12px rgba(0,0,0,.14);
  animation:okidokiTurnIn .22s ease backwards;
}
@keyframes okidokiTurnIn{
  0%{opacity:0;transform:translateY(-6px)}
  100%{opacity:1;transform:translateY(0)}
}
/* ユーザーの発言：背景を少し色味変え、名前はアプリ共通のパープル系に */
.okidoki-turn.okidoki-turn-user{
  background:var(--purple-bg,#EDE9FE);margin-left:28px;
}
/* 「ぽよん」の飛び出しアニメーションは、今まさに送信した発言だけに付ける
   (過去ログを復元表示する時には付けない) */
.okidoki-turn.okidoki-turn-user.okidoki-turn-user-enter{
  animation:okidokiUserTurnIn .85s cubic-bezier(.22,.9,.32,1) backwards;
}
@keyframes okidokiUserTurnIn{
  0%{opacity:0;transform:translateX(70px)}
  40%{opacity:1;transform:translateX(-24px)}
  62%{transform:translateX(13px)}
  80%{transform:translateX(-6px)}
  93%{transform:translateX(2px)}
  100%{opacity:1;transform:translateX(0)}
}
.okidoki-turn-username{
  font-size:11px;font-weight:700;color:var(--purple-dark,#534AB7);margin-bottom:3px;
}
/* オキドキサンの発言：白背景 */
.okidoki-turn.okidoki-turn-assistant{
  background:#fff;margin-right:10px;
}
/* しっぽは「最新のオキドキサン発言」だけに付ける(オキドキサンアイコンの位置に合わせる) */
.okidoki-turn.okidoki-turn-assistant.okidoki-turn-latest::before{
  content:'';position:absolute;left:22px;top:-7px;
  border-width:0 7px 8px 7px;border-style:solid;
  border-color:transparent transparent #fff transparent;
}
.okidoki-turn-loading::after{
  content:'…';color:var(--text3);font-weight:700;letter-spacing:2px;
}
.okidoki-turn-typing .okidoki-save-log-btn,
.okidoki-turn-typing .okidoki-turn-disclaimer,
.okidoki-turn-typing .okidoki-action-btn,
.okidoki-turn-loading .okidoki-save-log-btn,
.okidoki-turn-loading .okidoki-turn-disclaimer,
.okidoki-turn-loading .okidoki-action-btn{display:none}
.okidoki-save-log-btn{
  display:block;border:none;background:none;padding:0;margin-top:8px;
  font-size:12px;font-weight:700;color:var(--nm-accent);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.okidoki-save-log-btn.okidoki-saved{color:var(--text3);text-decoration:none;pointer-events:none}
/* オキドキサンからの「ルーティン/エクササイズメニュー/設問への追加」提案ボタン */
.okidoki-action-btn{
  display:flex;align-items:center;gap:6px;width:100%;text-align:left;
  border:none;border-radius:var(--rsm);margin-top:10px;padding:9px 12px;
  font-size:12.5px;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(145deg,var(--nm-accent),#6B6FC0);
  box-shadow:0 2px 8px rgba(108,99,200,.35);
}
.okidoki-action-btn::before{content:'+';font-size:14px;font-weight:800}
.okidoki-action-btn.okidoki-action-done{
  background:var(--bg2);color:var(--text3);box-shadow:none;pointer-events:none;
}
.okidoki-action-btn.okidoki-action-done::before{content:'✓'}
/* チュートリアルの「次へ/了解」ボタン：中央寄せ・押しやすい程度の普通サイズ(横幅いっぱいにしない) */
.okidoki-tut-next-btn{
  display:block;width:auto;min-width:96px;margin:14px auto 0;text-align:center;
  border:none;border-radius:999px;padding:9px 28px;
  font-size:13px;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(145deg,var(--nm-accent),#6B6FC0);
  box-shadow:0 2px 8px rgba(108,99,200,.35);
}
.okidoki-cache-info{
  font-size:9.5px;color:#B57A2E;margin-top:6px;line-height:1.4;
}
.okidoki-cache-active,.okidoki-cache-countdown{color:#E0607A;font-weight:700}
.okidoki-turn-typing .okidoki-cache-info,
.okidoki-turn-loading .okidoki-cache-info{display:none}
.okidoki-turn-disclaimer{
  font-size:10px;color:var(--text3);margin-top:8px;line-height:1.4;
}

/* 送信中は入力欄・送信ボタンを触れなくする */
.okidoki-input-row.okidoki-sending input{opacity:.5}
.okidoki-send-btn:disabled{opacity:.45;pointer-events:none}

/* Haiku/Sonnet切り替えトグル(入力欄の下、常時表示) */
.okidoki-model-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;
}
.okidoki-model-btns{display:flex;gap:6px}
.okidoki-model-btn{
  border:none;border-radius:999px;padding:4px 12px;
  background:rgba(255,255,255,.18);color:rgba(255,255,255,.75);
  font-size:11px;font-weight:700;cursor:pointer;
}
.okidoki-model-btn.okidoki-model-sel{
  background:#fff;color:var(--nm-accent);
}
/* ハイグレード選択時は虹色に煌めくボタンにする */
.okidoki-model-btn[data-model="sonnet"].okidoki-model-sel{
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);
  background:linear-gradient(90deg,#FF5B5B,#FFB84D,#FFF066,#6EE79A,#5BC8FF,#8C7CFF,#FF6FD8,#FF5B5B);
  background-size:300% 100%;
  animation:okidokiRainbowShift 2.6s linear infinite;
}
@keyframes okidokiRainbowShift{
  0%{background-position:0% 0%}
  100%{background-position:300% 0%}
}
.okidoki-model-btn:disabled{opacity:.5;pointer-events:none}

/* 「サクッと/じっくり」回答の長さ切り替え(スライド式トグル、モデルボタンとは見た目を分ける) */
.okidoki-length-toggle{
  position:relative;flex-shrink:0;display:flex;
  width:112px;height:24px;border-radius:999px;
  background:rgba(255,255,255,.18);padding:2px;cursor:pointer;
}
.okidoki-length-thumb{
  position:absolute;top:2px;left:2px;
  width:calc(50% - 2px);height:calc(100% - 4px);
  border-radius:999px;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .25s cubic-bezier(.34,1.4,.4,1);
}
.okidoki-length-toggle.okidoki-length-detailed .okidoki-length-thumb{
  transform:translateX(100%);
}
.okidoki-length-label{
  position:relative;flex:1;text-align:center;z-index:1;
  font-size:9.5px;font-weight:700;line-height:20px;
  color:rgba(255,255,255,.8);transition:color .25s ease;
}
.okidoki-length-toggle:not(.okidoki-length-detailed) .okidoki-length-label:first-of-type{color:var(--nm-accent)}
.okidoki-length-toggle.okidoki-length-detailed .okidoki-length-label:last-of-type{color:var(--nm-accent)}

/* トークンショップモーダル(4パック) */
#okidoki-shop-overlay{
  position:fixed;inset:0;z-index:2900;
  background:rgba(20,20,30,.6);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
#okidoki-shop-overlay.okidoki-show{opacity:1;pointer-events:auto}
.okidoki-shop-sheet{
  width:100%;max-width:480px;background:var(--nm-bg);
  border-radius:20px 20px 0 0;padding:20px 20px calc(env(safe-area-inset-bottom) + 20px);
  transform:translateY(24px);transition:transform .22s ease;
  max-height:80vh;overflow-y:auto;
}
#okidoki-shop-overlay.okidoki-show .okidoki-shop-sheet{transform:translateY(0)}
.okidoki-shop-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
}
.okidoki-shop-title{font-size:16px;font-weight:700;color:var(--text)}
.okidoki-shop-close{
  width:30px;height:30px;border-radius:50%;border:none;
  background:var(--nm-bg2,var(--bg2));color:var(--text2);font-size:16px;
}
.okidoki-pack-list{display:flex;flex-direction:column;gap:10px}
.okidoki-pack-btn{
  display:flex;align-items:center;justify-content:space-between;
  border:none;border-radius:var(--r);padding:14px 16px;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);
  text-align:left;
}
.okidoki-pack-btn:disabled{opacity:.5;pointer-events:none}
.okidoki-pack-name{font-size:14px;font-weight:700;color:var(--text)}
.okidoki-pack-tokens{font-size:12px;color:var(--text2);margin-top:2px}
.okidoki-pack-price{font-size:16px;font-weight:700;color:var(--nm-accent)}
.okidoki-shop-note{font-size:11px;color:var(--text3);margin-top:12px;text-align:center}

/* 埋め込み型Checkout(ページ遷移せずiframeで決済を完結させる) */
#okidoki-embedded-checkout-overlay{
  position:fixed;inset:0;z-index:3000;
  background:var(--nm-bg);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
#okidoki-embedded-checkout-overlay.okidoki-show{opacity:1;pointer-events:auto}
.okidoki-embedded-checkout-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 16px) 20px 14px;
  flex-shrink:0;
}
#okidoki-embedded-checkout-mount{
  flex:1;min-height:0;overflow-y:auto;padding:0 20px calc(env(safe-area-inset-bottom) + 20px);
}

/* 過去ログモーダル */
#okidoki-history-overlay,
#okidoki-token-ledger-overlay{
  position:fixed;inset:0;z-index:2950;
  background:var(--nm-bg);
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
#okidoki-history-overlay.okidoki-show,
#okidoki-token-ledger-overlay.okidoki-show{opacity:1;pointer-events:auto}
.okidoki-history-head{
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 16px) 20px 14px;
  flex-shrink:0;
}
.okidoki-history-title{font-size:16px;font-weight:700;color:var(--text);flex-shrink:0}
.okidoki-history-search{
  flex:1;min-width:0;
  display:flex;align-items:center;
  background:#fff;border-radius:999px;
  padding:7px 12px;box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.okidoki-history-search input{
  flex:1;min-width:0;border:none;background:none;font-size:13px;color:var(--text);
}
.okidoki-history-search input::placeholder{color:var(--text3)}
.okidoki-history-close{
  width:32px;height:32px;border-radius:50%;border:none;flex-shrink:0;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);color:var(--text2);font-size:16px;
}
.okidoki-history-list{flex:1;min-height:0;overflow-y:auto;padding:0 20px 24px;display:flex;flex-direction:column;gap:14px}
.okidoki-history-empty{text-align:center;color:var(--text3);font-size:13px;margin-top:40px}
.okidoki-history-item{position:relative;flex-shrink:0;border-radius:var(--r);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.okidoki-history-delete-btn{
  position:absolute;top:8px;right:8px;z-index:1;
  width:22px;height:22px;border-radius:50%;border:none;
  background:rgba(0,0,0,.18);color:#fff;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.okidoki-history-mark{background:#FFF176;color:inherit;border-radius:3px;padding:0 1px}

/* トークン増減ログ一覧 */
.okidoki-ledger-item{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border-radius:var(--r);padding:12px 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.okidoki-ledger-date{font-size:11px;color:var(--text3)}
.okidoki-ledger-reason{font-size:12px;color:var(--text2);margin-top:2px}
.okidoki-ledger-delta{font-size:15px;font-weight:700;white-space:nowrap}
.okidoki-ledger-delta.plus{color:var(--green,#1D9E75)}
.okidoki-ledger-delta.minus{color:var(--rose,#E0607A)}
.okidoki-ledger-balance{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap}
.okidoki-history-q,.okidoki-history-a{padding:10px 14px;font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word}
.okidoki-history-q{background:var(--blue-bg);color:var(--blue-dark)}
.okidoki-history-a{background:var(--purple-bg);color:var(--purple-dark)}
.okidoki-history-q-label,.okidoki-history-a-label{
  font-size:10px;font-weight:700;letter-spacing:.06em;margin-bottom:3px;opacity:.75;
}

/* ===== 食事記録カロリー計算機 UI（calc_proto.htmlより移植） ===== */
:root{
  --bg:#E8E8F0;--bg2:#DDDDE8;--bg3:#D0D0DC;--nm-bg:#E8E8F0;--nm-light:#FFFFFF;--nm-dark:#C8C8D4;
  --nm-shadow:rgba(160,160,180,.45);--nm-highlight:rgba(255,255,255,.85);--nm-accent:#7B7FCF;--nm-accent2:#A78BFA;
  --text:#1a1a1a;--text2:#666;--text3:#aaa;--border:#e8e8e4;--border2:#d4d4ce;--r:14px;--rsm:9px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* ===== モック用の背景ページ ===== */
.mock-page{padding:24px 20px 100px;max-width:480px;margin:0 auto}
.mock-title{font-size:18px;font-weight:800;margin-bottom:6px}
.mock-sub{font-size:12px;color:var(--text3);margin-bottom:24px}
.mock-card{background:var(--nm-bg);border-radius:var(--r);padding:18px;
  box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight);margin-bottom:16px}
/* 食事記録タブ内に置く、固定配置ではないインライン版の計算機呼び出しボタン */
.calc-trigger-inline{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;
  border-radius:var(--r);padding:14px;background:linear-gradient(145deg,#8B8FE0,#6B6FBF);color:#fff;
  font-size:14px;font-weight:700;font-family:inherit;
  box-shadow:5px 5px 14px rgba(90,90,150,.35),-2px -2px 8px rgba(255,255,255,.5);cursor:pointer}
.calc-trigger-inline:active{transform:scale(.98)}
.calc-trigger-inline i{font-size:18px}
/* 食事記録タブ内の「食事記録」呼び出しボタン：ホームのサブボタンと同じ丸型・質感、色だけ虹色 */
.food-record-btn{background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.food-record-btn:active .food-record-btn-inner{box-shadow:2px 2px 6px var(--nm-shadow),-1px -1px 4px var(--nm-highlight);transform:scale(.95)}
/* 食事記録／体組成タブ切り替え（ベーシック／アドバンスタブと全く同じ、スライドするパープルの
   インジケーターdiv `.diet-tab-slider` を使う方式。詳しくは_dietTabRowHtml()参照） */
.diet-tab-row{position:relative;display:flex;gap:4px;margin:16px 0 12px;padding:4px;
  background:var(--bg2);border-radius:14px}
.diet-tab-slider{position:absolute;top:4px;bottom:4px;width:calc(50% - 6px);border-radius:10px;
  background:linear-gradient(145deg,#7878BC,#5555AA);
  box-shadow:3px 3px 8px rgba(80,70,140,.35),-2px -2px 6px rgba(255,255,255,.5),inset 1px 1px 3px rgba(255,255,255,.25);
  transition:left .25s cubic-bezier(.4,0,.2,1);z-index:0}
.diet-tab-btn{position:relative;z-index:1;flex:1;padding:11px 0;border:none;border-radius:10px;
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;background:none;
  color:var(--text3);transition:color .15s}
.diet-tab-btn.active{color:#fff}

/* ホームのスケジュール吹き出しポップアップ：予定／やること／おぼえがき／かいものの4タブ。
   ベーシック/アドバンス・食事記録/体組成タブと同じスライド式パープルインジケーター方式だが、
   4分割の位置計算が必要なため専用クラスにしてある（詳細は_homeScheduleTabRowHtml()参照）。 */
.home-sched-tab-row{position:relative;display:flex;gap:4px;margin:0 0 12px;padding:4px;
  background:var(--bg2);border-radius:14px}
.home-sched-tab-slider{position:absolute;top:4px;bottom:4px;width:calc(25% - 5px);border-radius:10px;
  background:linear-gradient(145deg,#7878BC,#5555AA);
  box-shadow:3px 3px 8px rgba(80,70,140,.35),-2px -2px 6px rgba(255,255,255,.5),inset 1px 1px 3px rgba(255,255,255,.25);
  transition:left .25s cubic-bezier(.4,0,.2,1);z-index:0}
.home-sched-tab-btn{position:relative;z-index:1;flex:1;padding:9px 0;border:none;border-radius:10px;
  font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer;background:none;
  color:var(--text3);transition:color .15s}
.home-sched-tab-btn.active{color:#fff}
/* タブ文字右上のバッジ（旧・ホームのリストボタン上のバッジ表示を廃止し、こちらへ移設） */
.home-sched-tab-badge{position:absolute;top:3px;right:10%;width:7px;height:7px;border-radius:50%;
  background:#E0607A;box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:2}

/* ===== ボトムシート ===== */
.calc-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:2000;display:flex;align-items:flex-end;
  justify-content:center;pointer-events:none;transition:background .28s ease}
.calc-overlay.open{background:rgba(0,0,0,.55);pointer-events:auto}
.calc-sheet{background:var(--bg);border-radius:24px 24px 0 0;width:100%;max-width:480px;
  height:calc(100vh - 16px);height:calc(100dvh - 16px);
  display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s cubic-bezier(.22,.9,.32,1);
  box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.calc-overlay.open .calc-sheet{transform:translateY(0)}
.calc-grip{width:38px;height:4px;border-radius:2px;background:var(--border2);margin:10px auto 6px;flex-shrink:0}
.calc-close{position:absolute;top:10px;right:14px;width:30px;height:30px;border-radius:50%;border:none;
  background:var(--bg2);color:var(--text2);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ===== 検索バー ===== */
.calc-meal-prompt{flex-shrink:0;padding:0 16px 8px;font-size:13.5px;font-weight:800;color:var(--text);
  text-align:center;display:none}
.calc-meal-prompt.show{display:block}
.calc-subprompt{font-size:11px;color:var(--text3);text-align:center;padding:4px 4px 2px}
.calc-search-wrap{flex-shrink:0;padding:2px 52px 10px 16px;position:relative;display:none}
.calc-search-wrap.enabled{display:block}
.calc-search{width:100%;border:1.5px solid var(--border2);border-radius:20px;background:#fff;
  padding:10px 36px 10px 16px;font-size:14px;font-family:inherit;color:var(--text)}
.calc-search:focus{outline:none;border-color:var(--nm-accent)}
.calc-search-icon{position:absolute;right:64px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none}
.calc-search-clear{position:absolute;right:60px;top:50%;transform:translateY(-50%);width:20px;height:20px;
  border-radius:50%;border:none;background:var(--bg3);color:var(--text2);font-size:10px;display:none;
  align-items:center;justify-content:center;cursor:pointer}
.calc-search-wrap.has-text .calc-search-icon{display:none}
.calc-search-wrap.has-text .calc-search-clear{display:flex}
/* ユーザー登録データ表示トグル（オン/オフのピルスイッチ） */
#calcShowUserFoodsToggle{background:var(--border2)}
#calcShowUserFoodsToggle::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
#calcShowUserFoodsToggle.on{background:var(--nm-accent)}
#calcShowUserFoodsToggle.on::after{transform:translateX(15px)}

/* ===== パンくずリスト ===== */
.calc-crumbs{flex-shrink:0;display:flex;gap:5px;padding:0 16px 8px;overflow-x:auto;scrollbar-width:none}
.calc-crumbs::-webkit-scrollbar{display:none}
.calc-crumb{flex-shrink:0;background:var(--bg2);border:none;border-radius:14px;padding:5px 12px 5px 10px;
  font-size:11.5px;font-weight:700;color:var(--text2);white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:4px}
.calc-crumb:last-child{background:var(--nm-accent);color:#fff}
.calc-crumb .arrow{font-size:9px;opacity:.6}
.calc-crumb-clear, .calc-crumb-clear:last-child{background:var(--bg3);color:var(--text2)}
.calc-crumb-top{background:var(--bg3);color:var(--text2)}

/* ===== メインの中身（スクロール） ===== */
.calc-body{flex:1;overflow-y:auto;padding:4px 16px 10px;-webkit-overflow-scrolling:touch}

/* 円形ボタングリッド（食事タイム／大中小カテゴリ共通） */
.calc-btn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;padding:8px 4px 4px}
/* 食事タイム選択（朝ごはん等）だけは特別に大きく、2×2で画面中段に配置する */
.calc-mealtime-wrap{min-height:100%;display:flex;align-items:center;justify-content:center}
.calc-mealtime-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 26px;padding:20px 10px}
.calc-mealtime-grid .calc-circle-inner{width:118px;height:118px}
.calc-mealtime-grid .calc-circle-inner i{font-size:30px}
.calc-mealtime-grid .calc-circle-inner-label{font-size:13px}
/* 食事タイムボタンの初回登場アニメーション：シートのスライドアップ待機中は透明にしておき、
   その後4つの円が中央付近に隊列を保ったまま寄り、その隊列ごと中心の周りを時計回りに
   3周（追いかけっこするように公転）してから、ふわっと定位置へ広がりながらサイズアップする。
   実際の座標計算・transform適用はJS側（playMealtimeEntranceAnimation）で行う。 */
.calc-mealtime-grid.calc-mealtime-hidden .calc-circle-inner{opacity:0}
.calc-mealtime-grid.calc-mealtime-hidden,
.calc-mealtime-grid.calc-mealtime-animating{pointer-events:none}
/* お気に入りは1段目に単独・中央・大きめ（食事タイムボタンと同じサイズ）で表示する。
   ヘビロテ献立ボタンも同じ列に、同サイズで隣接配置する */
.calc-fav-row-solo{display:flex;justify-content:center;gap:22px;padding:8px 4px 4px}
.calc-fav-row-solo .calc-circle-btn.big .calc-circle-inner{width:118px;height:118px}
.calc-fav-row-solo .calc-circle-btn.big .calc-circle-inner i{font-size:30px}
.calc-fav-row-solo .calc-circle-btn.big .calc-circle-inner-label{font-size:13px}
.calc-circle-btn.heybi.cat .calc-circle-inner{background:linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 55%),
  linear-gradient(145deg,#6B6B6B,#4A4A4A);color:#fff}
.calc-circle-btn.heybi.cat .calc-circle-inner-label{color:#fff}
.calc-circle-btn{background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:6px}
.calc-circle-inner{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:5px 5px 12px var(--nm-shadow),-4px -4px 10px var(--nm-highlight),inset 1px 1px 3px rgba(255,255,255,.6);
  font-size:24px;color:#fff;transition:transform .12s}
.calc-circle-btn:active .calc-circle-inner{transform:scale(.92)}
.calc-circle-label{font-size:11px;font-weight:700;color:var(--text);text-align:center;line-height:1.25}
.calc-circle-btn.fav .calc-circle-inner{background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%),
  linear-gradient(145deg,var(--bg2),var(--bg3));color:var(--text2)}
/* カテゴリ（大中小）ボタンは、アイコン＋カテゴリ名を円の内側に収める形式。
   背景は色相を保ちつつ40%の半透明にし、左上から光沢のグラデーションを重ねている */
.calc-circle-btn.cat .calc-circle-inner{flex-direction:column;gap:2px;color:var(--text)}
.calc-circle-btn.cat .calc-circle-inner i{font-size:19px}
.calc-circle-btn.cat .calc-circle-inner img{width:19px;height:19px;object-fit:contain}
.calc-circle-inner-label{font-size:8.5px;font-weight:700;line-height:1.15;text-align:center;
  padding:0 5px;max-width:100%;overflow:hidden;white-space:normal;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* 料理リスト（葉レベル／検索結果） */
.calc-dish-list{display:flex;flex-direction:column;gap:7px;padding:6px 2px 4px}
.calc-dish-row{background:#fff;border:1.5px solid var(--border2);border-radius:var(--rsm);
  padding:11px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:10px}
.calc-dish-row:active{border-color:var(--nm-accent);background:#EEEDFE}
.calc-fav-row.dragging{opacity:.6;border-color:var(--nm-accent);box-shadow:0 4px 10px rgba(0,0,0,.2)}
.calc-dish-name{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.35}
.calc-dish-unit{font-size:10.5px;color:var(--text3);margin-top:2px}
.calc-dish-kcal{flex-shrink:0;font-size:13px;font-weight:800;color:var(--text2);white-space:nowrap}
.calc-empty{text-align:center;color:var(--text3);font-size:13px;padding:40px 20px}
/* ヘビロテ献立カード内：セットに含まれる献立メニュー名を全部並べて見せる小さなタグ一覧 */
.calc-heybi-items{display:flex;flex-wrap:wrap;gap:5px;padding-top:8px;border-top:0.5px dashed var(--border2)}
.calc-heybi-item-chip{font-size:10.5px;color:var(--text2);background:var(--bg2);border:0.5px solid var(--border2);
  border-radius:20px;padding:3px 9px;line-height:1.3}
.calc-search-helpers{display:flex;flex-direction:column;gap:7px;padding:12px 2px 4px}
.calc-search-helper-btn{width:100%;text-align:left;padding:11px 14px;border:none;
  border-radius:var(--rsm);background:radial-gradient(circle at 35% 28%,#E8E8E8 0%,#DCDCDC 55%,#C9C9C9 100%);
  color:var(--text2);font-size:12.5px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:8px}
.calc-search-helper-btn i{color:var(--nm-accent);flex-shrink:0}
.calc-fav-footnote{font-size:10.5px;color:var(--text3);text-align:center;padding:2px 4px 8px}

/* ===== お盆（トレイ）エリア ===== */
.calc-tray-wrap{flex-shrink:0;border-top:1px solid var(--border2);background:var(--bg2);padding:0;
  display:none;position:relative;box-shadow:0 -10px 16px rgba(0,0,0,.3);
  transition:padding-bottom .28s ease;min-height:14px}
.calc-tray-wrap.show{display:block}
.calc-tray-toggle-btn{position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:linear-gradient(145deg,#FFFFFF,#F2F2F2 40%,#E6E6E6);color:var(--text2);border:none;
  border-radius:4px;width:46px;height:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:5;padding:0}
/* overflow:hiddenは開閉アニメーションに必要だが、そのままだと内側の.calc-trayが持つ
   box-shadow（浮き上がり効果）まで一緒に切り取られてしまうため、影が収まるだけの
   余白をpaddingとして持たせておく（.calc-tray-wrap側のpaddingはこちらへ移動した） */
.calc-tray-collapsible{overflow:hidden;max-height:600px;padding:16px 24px 28px;
  transition:max-height .28s ease,opacity .22s ease,padding .28s ease}
.calc-tray-wrap.collapsed .calc-tray-collapsible{max-height:0!important;opacity:0;
  padding-top:0!important;padding-bottom:0!important}
/* 収納時は、transformで見た目だけ動かすと、元あった場所に何も残らず下地(シートの背景色)が
   透けて見えてしまう。代わりにpadding-bottomを足して箱自体を高くすることで、
   お盆自身の背景色(bg2)がその分の空間もそのまま塗りつぶすようにする */
.calc-tray-wrap.collapsed{padding-bottom:26px}
.calc-tray-title{font-size:10.5px;font-weight:700;color:var(--text3);margin-bottom:8px;display:flex;
  align-items:center;justify-content:space-between}
.calc-tray-total{font-size:11px;font-weight:800;color:var(--nm-accent)}
.calc-tray{background:linear-gradient(145deg,#FFFFFF,#F2F2F2 40%,#E6E6E6);border-radius:16px;padding:12px 10px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  box-shadow:0 10px 20px rgba(60,40,10,.3),0 3px 6px rgba(60,40,10,.2),inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -2px 4px rgba(60,40,10,.15)}
.calc-tray-circle{position:relative;width:100%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#FBF9F4 0%,#F3F0E8 55%,#E2DCCD 100%);
  box-shadow:0 6px 10px rgba(50,35,10,.25),0 2px 3px rgba(50,35,10,.18),inset 0 1.5px 1px rgba(255,255,255,.7);
  overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center}
.calc-tray-circle.empty{background:radial-gradient(circle at 35% 28%,#E8E8E8 0%,#DCDCDC 55%,#C9C9C9 100%)}
.calc-tray-circle.empty .calc-tray-empty-label{font-size:26px;font-weight:800;color:#c7c7c7;text-align:center;
  line-height:1.05;padding:0 6px;
  text-shadow:-1.5px -1.5px 1.5px rgba(0,0,0,.28),1.5px 1.5px 1.5px rgba(255,255,255,.85)}
.calc-tray-items{position:absolute;inset:6px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;overflow:hidden}
.calc-tray-item-text{font-size:8px;color:var(--text2);text-align:center;line-height:1.15;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-tray-kcal-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;line-height:1}
.calc-tray-kcal-num{font-size:40px;font-weight:800;color:rgba(245,194,75,.6);
  text-shadow:-1.5px -1.5px 1.5px rgba(0,0,0,.28),1.5px 1.5px 1.5px rgba(255,255,255,.85);
  white-space:nowrap}
.calc-tray-kcal-unit{position:absolute;right:14%;bottom:16%;font-size:10px;font-weight:800;
  color:rgba(245,194,75,.6);text-shadow:-1px -1px 1px rgba(0,0,0,.28),1px 1px 1px rgba(255,255,255,.85);
  pointer-events:none}
.calc-tray-cat-label{position:absolute;bottom:1px;left:0;right:0;text-align:center;font-size:7px;
  font-weight:700;color:var(--text3);pointer-events:none}

.calc-register-row{display:none;gap:10px;margin-top:12px}
.calc-register-row.show{display:flex}
.calc-register-btn{flex:1;padding:13px;border:none;border-radius:var(--rsm);
  background:linear-gradient(145deg,#8B8FE0,#6B6FBF);color:#fff;font-size:14.5px;font-weight:800;cursor:pointer;
  box-shadow:3px 4px 10px rgba(90,90,150,.4)}
.calc-heybirote-btn{flex:1;padding:13px;border:none;border-radius:var(--rsm);
  background:linear-gradient(145deg,#6B6B6B,#4A4A4A);color:#fff;font-size:13px;font-weight:800;cursor:pointer;
  box-shadow:3px 4px 10px rgba(50,50,50,.4)}

/* ===== トレイ編集ポップアップ ===== */
.calc-edit-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2200;display:none;
  align-items:center;justify-content:center;padding:20px}
.calc-edit-overlay.show{display:flex}
.calc-edit-box{background:#fff;border-radius:var(--r);padding:18px;width:100%;max-width:340px;
  max-height:70vh;overflow-y:auto;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.calc-edit-title{font-size:14px;font-weight:800;margin-bottom:12px}
.calc-edit-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid var(--border)}
.calc-edit-row:last-child{border-bottom:none}
.calc-edit-name{font-size:13px;color:var(--text);cursor:pointer;flex:1}
.calc-edit-kcal{font-size:11.5px;color:var(--text3);margin-right:8px;flex-shrink:0}
.calc-edit-del{background:none;border:none;color:#D96060;font-size:15px;cursor:pointer;padding:4px 6px;flex-shrink:0}
.calc-edit-close{width:100%;margin-top:14px;padding:10px;border:none;border-radius:var(--rsm);
  background:var(--bg2);color:var(--text2);font-weight:700;cursor:pointer}

/* ヘビロテ献立：名前入力ダイアログ */
.calc-heybi-name-input{width:100%;padding:10px 12px;border:1.5px solid var(--border2);border-radius:var(--rsm);
  font-size:14px;margin-top:4px;box-sizing:border-box}
.calc-heybi-name-counter{text-align:right;font-size:11px;color:var(--text3);margin-top:4px}
.calc-heybi-name-btns{display:flex;gap:8px;margin-top:14px}
.calc-heybi-name-btns .calc-edit-close{flex:1;margin-top:0}
.calc-heybi-name-btns .calc-heybi-save-btn{flex:1;margin-top:0;padding:10px;border:none;border-radius:var(--rsm);
  background:linear-gradient(145deg,#8B8FE0,#6B6FBF);color:#fff;font-weight:800;cursor:pointer}

/* 汎用確認ダイアログ（ヘビロテ献立の上書き確認など） */
.calc-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2300;display:none;
  align-items:center;justify-content:center;padding:20px}
.calc-confirm-overlay.show{display:flex}
.calc-confirm-box{background:#fff;border-radius:var(--r);padding:20px 18px;width:100%;max-width:320px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);text-align:center}
.calc-confirm-msg{font-size:14px;font-weight:700;color:var(--text);line-height:1.6;margin-bottom:16px}
.calc-confirm-btns{display:flex;gap:8px}
.calc-confirm-cancel{flex:1;padding:10px;border:none;border-radius:var(--rsm);
  background:var(--bg2);color:var(--text2);font-weight:700;cursor:pointer}
.calc-confirm-ok{flex:1;padding:10px;border:none;border-radius:var(--rsm);
  background:linear-gradient(145deg,#8B8FE0,#6B6FBF);color:#fff;font-weight:800;cursor:pointer}

/* ===== 倍率・個数選択ポップアップ ===== */
.calc-portion-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2200;display:none;
  align-items:center;justify-content:center;padding:20px}
.calc-portion-overlay.show{display:flex}
.calc-portion-box{background:#fff;border-radius:var(--r);padding:20px;width:100%;max-width:340px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);position:relative}
.calc-portion-fav-btn{position:absolute;top:14px;right:14px;background:none;border:none;
  color:#D9A62E;font-size:19px;cursor:pointer;padding:4px;line-height:1;z-index:2}
.calc-portion-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:2px;
  padding-right:28px}
.calc-portion-unit{font-size:11px;color:var(--text3);margin-bottom:16px}
.calc-portion-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.calc-portion-opt{padding:12px 6px;border:1.5px solid var(--border2);border-radius:var(--rsm);
  background:#fff;color:var(--text2);font-size:13px;font-weight:700;cursor:pointer}
.calc-portion-opt.on{border-color:var(--nm-accent);background:#EEEDFE;color:#444499}
.calc-portion-stepper{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 0}
.calc-portion-step-btn{width:42px;height:42px;border-radius:50%;border:none;background:var(--bg2);
  color:var(--text);font-size:18px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center}
.calc-portion-step-btn:active{background:var(--bg3)}
.calc-portion-count{font-size:16px;font-weight:800;color:var(--text);min-width:76px;text-align:center}
.calc-portion-count-sub{display:block;font-size:9.5px;font-weight:500;color:var(--text3);margin-top:1px}
.calc-portion-preview{text-align:center;font-size:12.5px;font-weight:700;color:var(--nm-accent);
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.calc-portion-confirm{width:100%;margin-top:14px;padding:12px;border:none;border-radius:var(--rsm);
  background:linear-gradient(145deg,#8B8FE0,#6B6FBF);color:#fff;font-size:14px;font-weight:800;cursor:pointer}
.calc-portion-manual-btn{width:100%;margin-top:10px;padding:10px;border:1.5px dashed var(--border2);
  border-radius:var(--rsm);background:none;color:var(--text2);font-size:12.5px;font-weight:700;cursor:pointer}
.calc-manual-ref{text-align:left;font-size:11px;color:var(--text3);background:var(--bg2);
  border-radius:8px;padding:8px 10px;margin-bottom:12px;max-height:120px;overflow-y:auto}
.calc-manual-ref-list{margin:0;padding-left:16px;list-style:disc}
.calc-manual-ref-list li{font-size:11px;color:var(--text3);line-height:1.6}
.calc-freemult-row{display:flex;align-items:center;gap:8px;
  padding:8px 2px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.calc-freemult-toggle-col{margin-left:auto;flex-shrink:0;display:flex;flex-direction:column;
  align-items:center;gap:3px}
.calc-freemult-label{font-size:8.5px;font-weight:700;color:var(--text3)}
.calc-toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.calc-toggle-switch input{opacity:0;width:0;height:0}
.calc-toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--bg3);
  border-radius:22px;transition:background .2s}
.calc-toggle-slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.calc-toggle-switch input:checked+.calc-toggle-slider{background:var(--nm-accent)}
.calc-toggle-switch input:checked+.calc-toggle-slider::before{transform:translateX(16px)}
/* 「平均計算に含めない日を選ぶ」ポップアップの本物の四角いチェックボックス。
   input,select{-webkit-appearance:none}のグローバルリセットでネイティブの見た目
   （枠・チェックマーク）が消えてしまうため、.calc-toggle-switchと同じ考え方で、
   実物のinputは透明化して、隣接する.diet-exclude-checkbox-boxで完全に自前描画する。 */
.diet-exclude-checkbox-wrap{position:relative;display:inline-flex;width:18px;height:18px;flex-shrink:0}
.diet-exclude-checkbox-wrap input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.diet-exclude-checkbox-box{position:absolute;inset:0;border:2px solid var(--border2);border-radius:4px;background:#fff;pointer-events:none;transition:all .15s}
.diet-exclude-checkbox-wrap input:checked+.diet-exclude-checkbox-box{background:#DC2626;border-color:#DC2626}
.diet-exclude-checkbox-wrap input:checked+.diet-exclude-checkbox-box::after{
  content:'';position:absolute;left:5px;top:1px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.calc-freemult-control{display:flex;align-items:center;justify-content:center;gap:8px;
  flex:1;min-width:0}
.calc-freemult-step-btn{width:30px;height:30px;border-radius:50%;border:none;background:var(--bg2);
  color:var(--text2);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0}
.calc-freemult-step-btn.small{width:24px;height:24px;font-size:10px}
.calc-freemult-step-btn:active{background:var(--bg3)}
.calc-freemult-value{font-size:15px;font-weight:800;color:var(--text);min-width:52px;text-align:center;
  flex-shrink:0}
.calc-manual-grid{display:flex;flex-direction:column;gap:8px}
.calc-manual-field{display:flex;align-items:center;gap:8px}
.calc-manual-label{flex:1;font-size:12px;font-weight:700;color:var(--text2)}
.calc-manual-field input{width:74px;border:1.5px solid var(--border2);border-radius:var(--rsm);
  padding:7px 8px;font-size:14px;text-align:right;font-family:inherit;color:var(--text)}
.calc-manual-field input:focus{outline:none;border-color:var(--nm-accent)}
.calc-manual-field input:disabled{background:none;border-color:transparent;color:#000;
  -webkit-text-fill-color:#000;opacity:1;padding-right:0}
.calc-manual-unit{width:34px;font-size:11px;color:var(--text3)}

/* トースト（サンプル用の簡易通知） */
.calc-toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,10px);background:rgba(20,20,26,.88);
  color:#fff;font-size:12.5px;padding:9px 18px;border-radius:20px;z-index:3000;opacity:0;
  transition:all .22s ease;pointer-events:none}
.calc-toast.show{opacity:1;transform:translate(-50%,0)}