/* ============================================================
   moffit マニュアル — 画面モック（CSSスクリーンショット）
   アプリ実装のテーマトークン（apps/doctor/src/theme.ts /
   apps/patient/src/theme.ts）を約0.78倍スケールで再現する部品集。
   使い方: <figure class="shot phone"><div class="mk mk--doc">…</div>
           <figcaption>…</figcaption></figure>
   医院版 = .mk--doc（ティール）/ 患者版 = .mk--pat（コーラル）
   ============================================================ */
.shot .mk {
  width: 100%; max-width: 300px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--sh-sm); overflow: hidden;
  background: var(--mk-bg); color: var(--mk-tx);
  font-family: var(--font-jp); font-size: 11.5px; line-height: 1.5;
  text-align: left; position: relative;
  word-break: normal; overflow-wrap: break-word;
}
.mk--doc {
  --mk-p: #0F766E; --mk-pd: #0B5D57; --mk-pt: #E6F4F1;
  --mk-acc: #2563EB; --mk-acct: #EFF4FE;
  --mk-suc: #178A5B; --mk-suct: #E8F5EE;
  --mk-wrn: #B45309; --mk-wrnt: #FBF0DE;
  --mk-dng: #DC2626; --mk-dngt: #FDECEC;
  --mk-tx: #1F2937; --mk-tx2: #6B7280;
  --mk-bd: #E5E7EB; --mk-bg: #F6F8FA; --mk-sf: #FFFFFF; --mk-dis: #C7CDD4;
  --mk-rc: 10px; --mk-rb: 8px; --mk-ri: 8px;
}
.mk--pat {
  --mk-p: #FF7A59; --mk-pd: #E8603F; --mk-pt: #FFF0EB;
  --mk-acc: #4A90D9; --mk-acct: #EBF3FB;
  --mk-suc: #34B58C; --mk-suct: #E7F7F1;
  --mk-wrn: #E8A13A; --mk-wrnt: #FBF3E6;
  --mk-dng: #E05B4F; --mk-dngt: #FCEDEB;
  --mk-tx: #3A2E2A; --mk-tx2: #8A7F7A;
  --mk-bd: #F0E5DF; --mk-bg: #FAF7F4; --mk-sf: #FFFFFF; --mk-dis: #D9D0CB;
  --mk-rc: 16px; --mk-rb: 12px; --mk-ri: 11px;
}
.mk svg { display: inline-block; vertical-align: -2px; flex-shrink: 0; }

/* ---- 画面骨格 ---- */
.mk-body { padding: 14px 12px 16px; }
/* 患者版の画面上部グロー（HeaderGlow 再現） */
.mk--pat .mk-body.glow {
  background: linear-gradient(180deg, rgba(255,122,89,.16) 0%, rgba(255,179,138,.09) 55%, rgba(250,247,244,0) 100%);
}
/* 医院版 Stackヘッダー（戻る/タイトル） */
.mk-navbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: var(--mk-sf); border-bottom: 1px solid var(--mk-bd);
  padding: 10px 12px; font-size: 12px;
}
.mk-navbar .bk { color: var(--mk-p); font-weight: 500; display: flex; align-items: center; gap: 2px; }
.mk-navbar .tt { font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.mk-navbar .rt { text-align: right; color: var(--mk-tx2); }
/* 医院版タブ画面のヘッダー */
.mk-toph {
  background: var(--mk-sf); border-bottom: 1px solid var(--mk-bd);
  padding: 12px; font-weight: 600; font-size: 13px; text-align: center;
}
/* 患者版の画面内タイトル */
.mk-h1 { font-size: 18px; font-weight: 800; line-height: 1.35; margin-bottom: 2px; }
.mk-h1.sm { font-size: 16px; }
.mk-sub { color: var(--mk-tx2); font-size: 10.5px; }

/* ---- 汎用部品 ---- */
.mk-card {
  background: var(--mk-sf); border: 1px solid var(--mk-bd); border-radius: var(--mk-rc);
  padding: 10px 12px; margin: 8px 0;
  box-shadow: 0 3px 9px rgba(15,23,42,.04);
}
.mk--pat .mk-card { box-shadow: 0 3px 9px rgba(58,46,42,.05); }
.mk-card.flat { box-shadow: none; }
.mk-card.tint { background: var(--mk-pt); border-color: transparent; }
.mk-card.on { border-color: var(--mk-p); }
.mk-card.dim { opacity: .7; }
.mk-sec { font-size: 10px; font-weight: 700; color: var(--mk-tx2); margin: 12px 2px 4px; }
.mk-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; }
.mk-row + .mk-row { border-top: 1px solid var(--mk-bd); }
.mk-row .grow { flex: 1; min-width: 0; }
.mk-row .val { color: var(--mk-tx); font-weight: 500; }
.mk-name { font-weight: 600; font-size: 12.5px; }
.mk-cap { font-size: 9.5px; color: var(--mk-tx2); }
.mk-cap.dis { color: var(--mk-dis); }
.mk-hr { border: none; border-top: 1px solid var(--mk-bd); margin: 8px 0; }
.mk-center { text-align: center; }

/* ボタン */
.mk-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--mk-p); color: #fff; font-weight: 700; font-size: 12px;
  border-radius: var(--mk-rb); padding: 10px; margin: 8px 0;
}
.mk-btn.line { background: var(--mk-sf); color: var(--mk-p); border: 1.5px solid var(--mk-p); }
.mk-btn.dngline { background: var(--mk-sf); color: var(--mk-dng); border: 1px solid var(--mk-dng); }
.mk-btn.dng { background: var(--mk-dng); }
.mk-btn.wrn { background: var(--mk-wrn); }
.mk-btn.dis { opacity: .5; }
.mk-btn.sm { padding: 7px 10px; font-size: 11px; margin: 6px 0; }
.mk-link { color: var(--mk-p); font-weight: 600; font-size: 11.5px; text-align: center; margin: 6px 0; }
/* 破線の追加ボタン（患者版 連携コードで追加 等） */
.mk-btn.dash { background: var(--mk-sf); color: var(--mk-p); border: 1.5px dashed var(--mk-bd); }

/* チップ・バッジ */
.mk-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--mk-bd); background: var(--mk-sf);
  font-size: 10px; font-weight: 600; color: var(--mk-tx2);
}
.mk-chip.on { background: var(--mk-p); color: #fff; border-color: var(--mk-p); }
.mk-chip.tint { background: var(--mk-pt); color: var(--mk-p); border-color: transparent; }
.mk-chip.sel { background: var(--mk-pt); color: var(--mk-pd); border-color: var(--mk-p); }
.mk-chip.off { opacity: .35; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.mk-badge {
  display: inline-block; font-size: 8.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; vertical-align: 1px;
}
.mk-badge.p { background: var(--mk-pt); color: var(--mk-p); }
.mk-badge.a { background: var(--mk-acct); color: var(--mk-acc); }
.mk-badge.w { background: var(--mk-wrnt); color: var(--mk-wrn); }
.mk-badge.g { background: var(--mk-bd); color: var(--mk-tx2); }
.mk-badge.s { background: var(--mk-suct); color: var(--mk-suc); }
.mk-badge.pill { border-radius: 999px; padding: 2px 8px; }

/* 入力欄 */
.mk-input {
  border: 1px solid var(--mk-bd); border-radius: var(--mk-ri);
  background: var(--mk-bg); padding: 8px 10px; margin: 4px 0 8px;
  font-size: 12px; color: var(--mk-tx);
}
.mk--pat .mk-input { background: var(--mk-sf); }
.mk-input .phd { color: var(--mk-dis); }
.mk-label { font-size: 10px; font-weight: 600; color: var(--mk-tx2); margin-top: 6px; }

/* アバター・FAB */
.mk-avatar {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  background: var(--mk-pt); color: var(--mk-p);
  display: flex; align-items: center; justify-content: center;
}
.mk-avatar.on { background: var(--mk-p); color: #fff; }
.mk-fab {
  position: absolute; right: 12px; bottom: 54px;
  width: 42px; height: 42px; border-radius: 21px;
  background: var(--mk-p); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 300; line-height: 1;
  box-shadow: 0 4px 10px rgba(15,23,42,.25);
}

/* タブバー */
.mk-tabbar {
  display: flex; background: var(--mk-sf); border-top: 1px solid var(--mk-bd);
  padding: 5px 0 9px; margin-top: 8px;
}
.mk-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 8.5px; font-weight: 600; color: var(--mk-tx2);
}
.mk-tab.on { color: var(--mk-p); }

/* セグメント（毎日/週ごと、離乳完了前/後 等） */
.mk-seg { display: flex; gap: 6px; margin: 6px 0; }
.mk-seg span {
  flex: 1; text-align: center; padding: 6px 4px; font-size: 10.5px; font-weight: 600;
  border: 1px solid var(--mk-bd); border-radius: var(--mk-rb); background: var(--mk-sf); color: var(--mk-tx2);
}
.mk-seg span.on { border-color: var(--mk-p); background: var(--mk-pt); color: var(--mk-pd); font-weight: 700; }
.mk-seg span.fill { border-color: var(--mk-p); background: var(--mk-p); color: #fff; }

/* チェックボックス */
.mk-check {
  width: 15px; height: 15px; border: 2px solid var(--mk-bd); border-radius: 5px;
  background: var(--mk-sf); flex-shrink: 0; position: relative;
}
.mk-check.on { background: var(--mk-p); border-color: var(--mk-p); }
.mk-check.on::after {
  content: ""; position: absolute; left: 3px; top: 0.5px;
  width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 記録4択ボタン（患者版 今日のメニュー） */
.mk-rec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.mk-rec.two { grid-template-columns: repeat(2, 1fr); }
.mk-rec span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1.5px solid var(--mk-bd); border-radius: 10px; background: var(--mk-sf);
  padding: 7px 2px; font-size: 8px; font-weight: 700; color: var(--mk-tx2); text-align: center;
}
.mk-rec span svg { color: var(--mk-dis); }
.mk-rec .exc svg { color: var(--mk-suc); } .mk-rec .exc.on { background: var(--mk-suct); border-color: var(--mk-suc); color: var(--mk-suc); }
.mk-rec .good svg { color: var(--mk-acc); } .mk-rec .good.on { background: var(--mk-acct); border-color: var(--mk-acc); color: var(--mk-acc); }
.mk-rec .part svg { color: var(--mk-wrn); } .mk-rec .part.on { background: var(--mk-wrnt); border-color: var(--mk-wrn); color: var(--mk-wrn); }
.mk-rec .skip svg { color: var(--mk-tx2); } .mk-rec .skip.on { background: #F1EDEA; border-color: var(--mk-tx2); color: var(--mk-tx2); }
.mk-rec .exc.on svg, .mk-rec .good.on svg, .mk-rec .part.on svg, .mk-rec .skip.on svg { color: inherit; }

/* カレンダー */
.mk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin: 6px 0; font-size: 9.5px; text-align: center; }
.mk-cal .wd { font-size: 8.5px; font-weight: 600; color: var(--mk-tx2); padding: 2px 0; }
.mk-cal .wd.sun { color: var(--mk-dng); } .mk-cal .wd.sat { color: var(--mk-acc); }
.mk-cal .d {
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0; border-radius: 8px; line-height: 1.2;
}
.mk-cal .d.today { background: var(--mk-pt); color: var(--mk-pd); font-weight: 800; }
.mk-cal .d.selected { background: var(--mk-p); color: #fff; font-weight: 800; }
.mk-cal .d .dot { width: 5px; height: 5px; border-radius: 3px; background: var(--mk-wrn); opacity: .55; }
.mk-cal .d .sp { width: 8px; height: 8px; }
.mk-cal svg { vertical-align: 0; }
/* 医院版 7日間グリッド */
.mk-grid7 { display: grid; grid-template-columns: 1fr repeat(7, 22px); gap: 2px; align-items: center; font-size: 9.5px; margin: 6px 0; }
.mk-grid7 .hd { font-size: 8.5px; font-weight: 600; color: var(--mk-tx2); text-align: center; }
.mk-grid7 .nm { font-size: 9.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-grid7 .cell { text-align: center; color: var(--mk-dis); }
.mk-grid7 .cell.na { background: var(--mk-bd); border-radius: 4px; height: 12px; }

/* QRコード（ダミーパターン） */
.mk-qr {
  width: 110px; height: 110px; margin: 8px auto;
  background:
    conic-gradient(#1F2937 25%, transparent 0 50%, #1F2937 0 75%, transparent 0) 0 0/14px 14px,
    #fff;
  outline: 5px solid #fff; border: 1px solid var(--mk-bd); border-radius: 2px;
}

/* ボトムシート（画面下モーダル） */
.mk-sheet {
  background: var(--mk-sf); border-radius: 18px 18px 0 0;
  padding: 8px 14px 16px; margin-top: 10px;
  box-shadow: 0 -6px 20px rgba(15,23,42,.12);
}
.mk-sheet::before {
  content: ""; display: block; width: 34px; height: 4px; border-radius: 2px;
  background: var(--mk-bd); margin: 0 auto 10px;
}
.mk-sheet .sh-t { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.mk-scrim { background: rgba(15,23,42,.45); padding: 40px 0 0; }
.mk--pat .mk-scrim { background: rgba(58,46,42,.4); }

/* アラート（OSダイアログ風） */
.mk-alert {
  background: #F2F2F7; border-radius: 12px; max-width: 210px; margin: 20px auto;
  text-align: center; overflow: hidden; font-size: 11px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2); color: #111;
}
.mk-alert .al-t { font-weight: 700; padding: 12px 12px 2px; }
.mk-alert .al-b { padding: 0 12px 10px; font-size: 10px; line-height: 1.5; color: #333; }
.mk-alert .al-a { display: flex; border-top: 0.5px solid #C6C6C8; }
.mk-alert .al-a span { flex: 1; padding: 8px 4px; color: #007AFF; font-weight: 500; }
.mk-alert .al-a span + span { border-left: 0.5px solid #C6C6C8; }
.mk-alert .al-a .b { font-weight: 700; }
.mk-alert .al-a .d { color: #FF3B30; }

/* ストリーク・達成バナー（患者版） */
.mk-banner {
  display: flex; align-items: center; gap: 8px;
  border-radius: var(--mk-rc); padding: 9px 12px; margin: 8px 0;
  font-size: 11px; font-weight: 700;
}
.mk-banner.p { background: var(--mk-pt); color: var(--mk-p); }
.mk-banner.s { background: var(--mk-suct); color: var(--mk-suc); }
.mk-banner.w { background: var(--mk-wrnt); color: var(--mk-wrn); }
.mk-banner .ic {
  width: 26px; height: 26px; border-radius: 9px; background: var(--mk-sf); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* モフィー顔（サイズ調整用） */
.mk-moffy { display: block; margin: 8px auto; }

/* トグルスイッチ */
.mk-switch { width: 34px; height: 20px; border-radius: 10px; background: var(--mk-bd); position: relative; flex-shrink: 0; }
.mk-switch.on { background: var(--mk-p); }
.mk-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.mk-switch.on::after { left: auto; right: 2px; }

/* 768px以下でも .mk は幅300のまま中央寄せ（モックは縮めない） */