@charset "UTF-8";
/* きょうのレシピ帖 — ブレークポイント定義
   撮影モード(?shoot)ではこのファイルが丸ごと無効化され、
   狭幅でもデスクトップのカラム比・文字組みが保たれる。詳細は shoot.js を参照 */

@media (max-width: 1060px) {
  :root { --surface-w: 100%; }
  .page { margin: 12px 14px 36px; padding: 34px 30px 40px; }
  .breadcrumb { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 820px) {
  .recipe h1 { font-size: 27px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 28px 22px 34px; }
}

@media (max-width: 640px) {
  .header-top { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .search-form { order: 3; flex-basis: 100%; }
  .header-links { margin-left: auto; }
  .related-grid { grid-template-columns: 1fr; }
  .recipe h1 { font-size: 23px; }
  .steps li { padding-left: 46px; }
  .page { margin: 10px 10px 28px; padding: 22px 16px 28px; }
  .nutrition-table th, .nutrition-table td { padding: 9px 10px; }
}