/* =============================================================
   もふ手帳 — 互換レイヤー（旧クラス → デザインシステムv1）
   既存ページの旧クラス名・旧CSS変数を、tokens.css / components.css
   のデザインへ橋渡しする。HTML/PHPロジックは不変のまま新トーンに。
   ============================================================= */

/* ---- 旧CSS変数のエイリアス（インラインstyle互換） ---- */
:root{
  --coral:      var(--color-coral);
  --coral-dark: var(--color-coral-dark);
  --peach:      var(--color-bg-peach);
  --ink:        var(--color-text);
  --ink-soft:   var(--color-text-sub);
  --muted:      var(--color-text-faint);
  --border:     var(--color-border);
  --bg:         var(--color-bg);
  --ok:         var(--color-success);
  --warn:       var(--color-warning);
}

/* ---- 見出し ---- */
.page h1{
  font-size:var(--fs-xl);font-weight:700;line-height:var(--lh-tight);
  color:var(--color-text);margin:0 0 var(--space-5);
}
.page h2{
  font-size:var(--fs-md);font-weight:700;color:var(--color-text);
  margin:var(--space-5) 0 var(--space-3);
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
}

/* ---- 旧 .wrap（mainに付与・余白はcomponents.cssの.pageに委譲） ---- */
.page.wrap{max-width:none;}

/* ---- ブランド（トップバー内） ---- */
.brand{
  display:flex;align-items:center;gap:var(--space-2);
  font-weight:700;color:var(--color-coral-dark);
  font-size:var(--fs-md);text-decoration:none;letter-spacing:.02em;
}
.navlinks{display:flex;gap:var(--space-2);align-items:center;}

/* ---- カード（旧 .card は margin-bottom 流儀） ---- */
.card{margin-bottom:var(--space-4);overflow:hidden;}
.card:last-child{margin-bottom:0;}
.card h2:first-child,.card h2[style*="margin-top:0"]{margin-top:0;}

/* ---- ボタン（旧4種 → 新4種） ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--tap-min);padding:0 var(--space-5);
  font-size:var(--fs-base);font-weight:700;line-height:1.3;text-align:center;
  background:var(--color-coral);color:#fff;
  border:1.5px solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;
  transition:transform .08s ease,background .15s ease,box-shadow .15s ease;
}
.btn:hover{background:var(--color-coral-dark);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.btn.full{display:flex;width:100%;}
.btn.ghost{background:var(--color-surface);color:var(--color-coral-dark);border-color:var(--color-border);}
.btn.ghost:hover{background:var(--color-bg-peach);}
.btn.gray{background:var(--color-border);color:#fff;cursor:not-allowed;pointer-events:none;}
.btn.small{min-height:44px;padding:0 var(--space-4);font-size:var(--fs-sm);border-radius:var(--radius-pill);}

/* ---- フォーム（素の要素 → .input/.select 相当・16px維持） ---- */
.page input,.page select,.page textarea{
  width:100%;max-width:100%;min-width:0;
  font-family:inherit;font-size:var(--fs-base); /* 16px iOSズーム防止 */
  color:var(--color-text);background:var(--color-surface);
  border:1.5px solid var(--color-border);border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);min-height:var(--tap-min);line-height:1.5;
}
.page input::placeholder,.page textarea::placeholder{color:var(--color-text-faint);}
.page input:focus,.page select:focus,.page textarea:focus{
  outline:none;border-color:var(--color-coral);box-shadow:var(--shadow-focus);
}
.page textarea{min-height:96px;resize:vertical;}
.page select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%237A4A35' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--space-4) center;
  padding-right:var(--space-8);
}
.page input[type=date]{-webkit-appearance:none;appearance:none;display:block;height:var(--tap-min);text-align:left;}
.page input[type=checkbox],.page input[type=radio]{
  width:auto;min-height:0;min-width:0;padding:0;accent-color:var(--color-coral);
  width:18px;height:18px;vertical-align:-3px;
}
.page input[type=file]{border:none;padding:var(--space-2) 0;min-height:0;background:transparent;}
.page input[readonly]{background:var(--color-bg-peach);}
.page label{
  display:block;font-size:var(--fs-sm);font-weight:700;color:var(--color-text);
  margin:var(--space-4) 0 var(--space-2);
}

/* ---- 補足テキスト ---- */
.note{font-size:var(--fs-sm);color:var(--color-text-sub);line-height:var(--lh-base);}
.note a{font-weight:700;}

/* ---- メッセージ（旧 .okm / .err → 新 .message） ---- */
.okm,.err{
  display:flex;align-items:flex-start;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--fs-sm);line-height:var(--lh-base);
  margin-bottom:var(--space-4);border:none;
}
.okm{background:var(--color-success-bg);color:var(--color-success);}
.err{background:var(--color-warning-bg);color:var(--color-warning);}
.okm::before{content:"✅";flex:0 0 auto;}
.err::before{content:"⚠️";flex:0 0 auto;}

/* ---- ピル（旧 .pill / .pill.g / .pill.r） ---- */
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 10px;font-size:var(--fs-xs);font-weight:700;
  border-radius:var(--radius-pill);white-space:nowrap;
  background:var(--pill-note-bg);color:var(--pill-note-fg);
}
.pill.g{background:var(--color-success-bg);color:var(--color-success);}
.pill.r{background:var(--color-warning-bg);color:var(--color-warning);}

/* ---- チップ（旧 .chiprow / .chip 表示用） ---- */
.chiprow{display:flex;gap:var(--space-2);flex-wrap:wrap;}
.chip{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:var(--space-1) var(--space-3);
  font-size:var(--fs-xs);font-weight:700;
  background:var(--color-bg-peach);color:var(--color-coral-dark);
  border-radius:var(--radius-pill);
}

/* ---- 一覧テーブル（旧 table.list） ---- */
table.list{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
table.list td{
  padding:var(--space-3) var(--space-1);
  border-bottom:1px solid var(--color-border);vertical-align:top;
}
table.list tr:last-child td{border-bottom:none;}

/* ---- 旧バナー（app_head外で使用時の保険） ---- */
.page .banner{margin-bottom:var(--space-4);}

/* ---- 体重グラフ（自前SVG）まわりの保険 ---- */
.page svg{max-width:100%;}

/* ---- 印刷（受診メモ） ---- */
@media print{
  .app{box-shadow:none;max-width:100%;}
  body{background:#fff;}
}

/* ---- 完了トースト（節目I・No.89） ---- */
#mofuToast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 20px);
  transform:translateX(-50%) translateY(8px);
  background:rgba(74,27,12,.92);color:#fff;
  font-size:var(--fs-sm);font-weight:700;
  padding:10px 18px;border-radius:var(--radius-pill);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  z-index:90;max-width:86%;text-align:center;
}
#mofuToast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---- 送信中のボタン状態（二重送信防止） ---- */
.btn.is-busy,button.is-busy{opacity:.55;pointer-events:none;}

/* ---- 確認モーダル（節目J・P1-6） ---- */
.mofu-modal{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(74,27,12,.45);z-index:95;display:flex;align-items:center;justify-content:center;padding:24px;}
.mofu-modal__card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6) var(--space-5);max-width:340px;width:100%;}
.mofu-modal__msg{font-size:var(--fs-sm);font-weight:700;color:var(--color-text);line-height:var(--lh-base);margin:0 0 var(--space-5);}
.mofu-modal__row{display:flex;gap:var(--space-3);justify-content:flex-end;}
.mofu-modal__row .btn{min-height:44px;padding:0 18px;}

/* ---- AI相談ローディング（P1-7） ---- */
@keyframes mofuDots{0%,80%,100%{opacity:.25;}40%{opacity:1;}}
.ai-loading span.d{display:inline-block;animation:mofuDots 1.2s infinite;}
.ai-loading span.d:nth-child(2){animation-delay:.2s;}
.ai-loading span.d:nth-child(3){animation-delay:.4s;}