/* recipe-ios.css — ?design=ios 専用。全ルールを .ios-design-new 配下にスコープ。 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700;900&family=Shippori+Mincho:wght@500;700;800&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Kurenaido&display=swap');

/* ---- ローカルトークン（:root を汚さない） ---- */
.ios-design-new{
  --ds-cream:#f7f3ea; --ds-ink:#1a1714; --ds-ink-on-yellow:#38322a;
  --ds-yellow:#ffd400; --ds-yellow-hover:#e8c200; --ds-yellow-pale:#fdf6e8;
  /* 副アクセント＝マゼンタ */
  --ds-accent:#7C3946; --ds-accent-text:#7C3946;
  --ds-rule:#e2dac9;
  --ds-muted:#6e6353; --ds-disabled:#cfc6b4; --ds-card-bg:#ffffff;
  --ds-ff-gothic:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --ds-ff-body:"Noto Sans JP","Hiragino Sans",sans-serif;
  --ds-ff-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ds-ff-hand:"Zen Kurenaido","Yuji Syuku","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif; /* 手書き＝決め手カード用（元サイト踏襲） */
  --ds-radius:6px; --ds-radius-lg:12px; --ds-radius-pill:999px;
  /* v2 shadow tokens — 2層構造 */
  --ds-shadow-card:0 1px 2px rgba(26,23,20,.05), 0 8px 24px rgba(26,23,20,.07);
  --ds-shadow-hover:0 2px 4px rgba(26,23,20,.06), 0 14px 32px rgba(26,23,20,.10);
  --ds-focus-ring:0 0 0 3px rgba(124,57,70,.8);
}

/* ---- コンテンツ領域のベース（グローバルchrome=Flatsomeヘッダ/フッタは対象外） ---- */
/* 地＝生成り。白面(#main)を廃止し、白い余白をゼロに。 */
.ios-design-new #main{ background:var(--ds-cream); }
/* 記事はカード化やめ（地に溶かす）。白カードは内側の各コンポーネント側で出す。 */
.ios-design-new article.post,
.ios-design-new .article-inner{
  background:transparent; color:var(--ds-ink);
  font-family:var(--ds-ff-body); line-height:1.8;
}
.ios-design-new .article-inner{ padding:16px 20px; border-radius:0; }
@media (max-width:600px){ .ios-design-new .article-inner{ padding:12px 12px; } }
/* デスクトップ＝最大幅で中央寄せ（余白は生成り）／モバイル＝全幅 */
.ios-design-new #content .row.align-center{ max-width:100%; }
.ios-design-new #content .large-10.col{
  max-width:900px; flex-basis:auto; width:100%; margin-left:auto; margin-right:auto;
}
@media (max-width:600px){ .ios-design-new #content .large-10.col{ max-width:100%; } }
.ios-design-new #content.blog-single{ padding-top:12px; }
.ios-design-new a{ color:var(--ds-accent-text); text-underline-offset:3px; }
.ios-design-new :focus-visible{ outline:none; box-shadow:var(--ds-focus-ring); }

/* ---- 見出し ---- */
.ios-design-new .entry-title{
  font-family:var(--ds-ff-gothic); font-weight:900; line-height:1.3; color:var(--ds-ink);
}
/* h1 黄マーカー（テキストは増やさない・背景ハイライトのみ） */
.ios-design-new .entry-title{
  background:linear-gradient(transparent 62%, var(--ds-yellow) 62%);
  display:inline; padding:0 .08em;
}
/* ===== 章見出し v2：白抜き番号＋黄左罫を置換。カウンタは article.post で通し採番 01→05 ===== */
/* カウンタリセット — article.post は 3 本の h2 ＋ FAQ ＋ 関連 すべての共通祖先 */
.ios-design-new article.post{ counter-reset:ios-sec }
/* .article-inner 内の h2（材料/作り方/出来上がり）*/
.ios-design-new .article-inner h2{
  font-family:var(--ds-ff-gothic); font-weight:900; font-size:22px; color:var(--ds-ink);
  border-left:none; padding-left:64px; min-height:52px;
  margin:32px 0 14px; position:relative;
  counter-increment:ios-sec; letter-spacing:.02em;
}
.ios-design-new .article-inner h2::before{
  content:counter(ios-sec,decimal-leading-zero);
  position:absolute; left:0; top:-4px;
  font-weight:900; font-size:48px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--ds-ink);
  font-feature-settings:"tnum";
}
@supports not (-webkit-text-stroke:1px #000){
  .ios-design-new .article-inner h2::before{ color:var(--ds-ink); opacity:.15; }
}
.ios-design-new .article-inner h2 strong{ font-weight:900; }
/* h2 letter-spacing（h1 も同期） */
.ios-design-new .entry-title{ letter-spacing:.02em; }
.ios-design-new .article-inner h3{
  font-family:var(--ds-ff-gothic); font-weight:700; font-size:17px; color:var(--ds-ink);
}

/* ===== 材料テーブル（spec-table 後継） ===== */
.ios-design-new .ios-ingredient-table{
  width:100%; border-collapse:collapse; background:var(--ds-card-bg);
  border-radius:0; overflow:hidden; box-shadow:var(--ds-shadow-card);
}
.ios-design-new .ios-ingredient-row{ border-bottom:1px solid var(--ds-rule); }
.ios-design-new .ios-ingredient-row:last-child{ border-bottom:none; }
/* R1: 商品名リンク = accent文字（旧アンバー→マゼンタ。fixture inline CSS 0,3,0 に勝つため !important） */
.ios-design-new .ios-ingredient-main,
.ios-design-new .ios-ingredient-name{ font-family:var(--ds-ff-body); font-weight:700; color:var(--ds-ink); }
.ios-design-new .ios-ingredient-name a{ color:var(--ds-accent-text) !important; text-decoration:underline; }
.ios-design-new .ios-ingredient-amount{
  font-family:var(--ds-ff-gothic); font-weight:700; color:var(--ds-ink); white-space:nowrap;
}
/* R4: 価格 = 墨/900。インライン a は色を継承させず ink で上書き */
.ios-design-new .ios-ingredient-price-inline a{ color:var(--ds-ink) !important; font-weight:900; text-decoration:underline; font-feature-settings:"tnum"; }
.ios-design-new .ios-ingredients-tax{ color:var(--ds-muted); font-size:11px; }
/* R3: グループ見出し（「食材」「スパイスA」等）= 同格の黄左罫スタイル（2026-08-02 食材を格上げ） */
.ios-design-new .ios-ingredient-group,
.ios-design-new .ios-spice-group{
  display:block; border-radius:0; box-shadow:none;
  font-family:var(--ds-ff-gothic); font-weight:900; font-size:16px; color:var(--ds-ink) !important;
  border-left:4px solid var(--ds-yellow) !important;
  padding:4px 0 4px 14px !important;
  margin:32px 0 14px !important; background:none !important;
}
/* R1: 「チェックした商品をまとめて購入できます！」ピル — 旧アンバー枠/文字を廃止しmuteテキストのみに */
.ios-design-new .ios-ingredients-tip{
  border:1px solid var(--ds-rule) !important;
  color:var(--ds-muted) !important;
  background:var(--ds-card-bg) !important;
}
.ios-design-new .ios-ingredients-tip::before{
  border-color:var(--ds-rule) transparent transparent transparent !important;
}
.ios-design-new .ios-ingredients-tip::after{
  border-color:var(--ds-card-bg) transparent transparent transparent !important;
}
.ios-design-new .ios-ingredients-tip-text{ color:var(--ds-muted) !important; }
/* チェックボックス・合計フッタ */
.ios-design-new .ios-ingredients-footer{
  background:var(--ds-yellow-pale); border-top:1px solid var(--ds-rule);
  padding:12px 16px; border-radius:0 0 var(--ds-radius-lg) var(--ds-radius-lg);
}
.ios-design-new .ios-ingredients-total-value{
  font-family:var(--ds-ff-gothic); font-weight:900; color:var(--ds-ink); font-feature-settings:"tnum";
}
.ios-design-new .ios-ingredients-add-to-cart.button.primary{
  background:var(--ds-yellow); color:var(--ds-ink-on-yellow);
  font-family:var(--ds-ff-gothic); font-weight:900; border:none; border-radius:var(--ds-radius);
  font-size:15px !important; white-space:nowrap; letter-spacing:.02em;
}
.ios-design-new .ios-ingredients-add-to-cart.button.primary:hover{
  background:var(--ds-yellow-hover);
}

/* ===== 料理モード トグル ===== */
/* 2026-08-05: 02「作り方」直下へ移設＋1行コンパクト化（道具は必要になる直前に置く）。
   デスクトップは消灯課題がないので非表示。 */
.ios-design-new .ios-cook-mode{
  background:transparent; border:none; border-top:1px solid var(--ds-rule);
  border-bottom:1px solid var(--ds-rule);
  border-radius:0; padding:10px 2px; margin:0 0 18px;
}
.ios-design-new .ios-cook-mode-row{
  display:flex; align-items:center; gap:10px;
}
.ios-design-new .ios-cook-mode-label{
  font-family:var(--ds-ff-gothic); font-weight:700; font-size:14px; color:var(--ds-ink);
}
.ios-design-new .ios-cook-mode-desc{
  color:var(--ds-muted); font-size:12px; margin:0; flex:1 1 auto;
}
.ios-design-new .ios-cook-mode .ios-switch{ margin-left:auto; flex:none; }
/* オン時だけ出る状態メッセージ（role=status） */
.ios-design-new .ios-cook-mode-note{
  margin:8px 0 0; padding-left:2px;
  font-size:12px; line-height:1.7; color:var(--ds-muted);
}
.ios-design-new .ios-cook-mode-note.is-error{ color:var(--ds-accent-text); }
.ios-design-new .ios-cook-mode-note[hidden]{ display:none; }
@media (min-width:601px){
  .ios-design-new .ios-cook-mode{ display:none; }
}

/* ===== 決め手（pickup）callout =====
   構造: <section.ios-pickup-spice>（バンド）> .ios-pickup-heading（eyebrow+見出し） + a.ios-pickup-card（商品ミニカード）
   callout の見た目は外側 .ios-pickup-spice に当て、内側 .ios-pickup-card は透明フレックスのまま＝二重箱にしない。 */
/* 「手書きメモ（メタ・バラッツの推薦）」タイプ：温かい生成りメモ地＋筆書きの見出し */
.ios-design-new .ios-pickup-spice{
  background:var(--ds-yellow-pale);
  border:1px solid #efe2c2; border-left:5px solid var(--ds-yellow);
  border-radius:0; box-shadow:var(--ds-shadow-card);
  padding:14px 16px !important; overflow:hidden;
}
.ios-design-new .ios-pickup-card{
  background:transparent; border:none; border-radius:0; padding:0; box-shadow:none;
}
.ios-design-new .ios-pickup-heading{ min-width:0; }
/* eyebrow「＼メタ・バラッツの／」＝筆書きの署名風。末尾全角スペースはクリップ。 */
.ios-design-new .ios-pickup-badge{
  background:transparent; padding:0; color:var(--ds-accent-text);
  font-family:var(--ds-ff-hand); font-weight:400; font-size:13px; letter-spacing:.04em;
  display:block; max-width:100%; white-space:nowrap; overflow:hidden;
}
.ios-design-new .ios-pickup-heading-main{
  font-family:var(--ds-ff-hand); font-weight:400; color:var(--ds-ink);
  font-size:19px; line-height:1.3; letter-spacing:.02em;
}
.ios-design-new .ios-pickup-heading{ margin-bottom:.35rem; }
.ios-design-new .ios-pickup-thumb img{ width:56px !important; height:56px !important; border-radius:var(--ds-radius); }
.ios-design-new .ios-pickup-title{ font-family:var(--ds-ff-gothic); font-weight:900; color:var(--ds-ink); font-size:14px !important; margin-bottom:2px !important; }
.ios-design-new .ios-pickup-text{
  color:var(--ds-ink); font-size:12px !important; line-height:1.6 !important;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.ios-design-new .ios-pickup-price{ font-family:var(--ds-ff-gothic); font-weight:900; color:var(--ds-ink); font-feature-settings:"tnum"; font-size:12px !important; margin-bottom:0 !important; }
.ios-design-new .ios-pickup-link-hint{ color:var(--ds-accent-text); font-weight:700; font-size:11px; margin-top:.15rem !important; }

/* ===== 手順（process）テーブル v3: 線形コンパクト＋写真角の白抜き番号 =====
   マークアップは class なしの <table><thead>（1行=写真th+説明th、番号div.numberは
   インラインstyleの黄丸）。ingredient 系テーブルに誤爆しないよう table:not([class]) で縛る。 */
.ios-design-new .ios-recipe-ingredients + table,         /* 念のため */
.ios-design-new .article-inner table{ border-collapse:collapse; }
/* 手順の説明セル */
.ios-design-new .article-inner thead th{ font-weight:400; vertical-align:top; }
.ios-design-new .article-inner thead th:last-child{
  font-size:15px; line-height:1.85; color:var(--ds-ink);
}
/* デスクトップ: 写真列を 300px/4:3 に絞り、テキストを垂直センタリング。工程間はヘアライン */
@media (min-width:601px){
  .ios-design-new .article-inner table:not([class]){ display:block; width:100%; }
  .ios-design-new .article-inner table:not([class]) thead{ display:block; }
  .ios-design-new .article-inner table:not([class]) thead tr{
    display:flex; align-items:center; gap:28px;
    border-top:1px solid var(--ds-rule); padding:22px 0;
  }
  .ios-design-new .article-inner table:not([class]) thead tr:first-child{ border-top:none; padding-top:6px; }
  .ios-design-new .article-inner table:not([class]) thead tr > th:first-child{
    flex:0 0 300px; padding:0;
  }
  .ios-design-new .article-inner table:not([class]) thead tr > th:last-child{
    flex:1 1 auto; padding:0;
  }
}
.ios-design-new .article-inner table:not([class]) thead th:first-child p{ margin:0; }
.ios-design-new .article-inner table:not([class]) thead th:first-child img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
}
/* 番号: 黄丸バッジ → 写真左上に重なる白抜き数字（版ズレ言語・章番号と同系）
   インライン style(#DC9814丸・25px) に勝つため !important */
.ios-design-new .number{
  background:transparent !important;
  box-shadow:none;
  width:auto !important; height:auto !important; line-height:1 !important;
  border-radius:0 !important;
  top:10px !important; left:12px !important;
  font-family:var(--ds-ff-gothic); font-weight:900; font-size:44px;
  color:transparent !important;
  -webkit-text-stroke:2px #fff;
  filter:drop-shadow(0 1px 3px rgba(26,23,20,.5));
  font-feature-settings:"tnum";
  z-index:2;
}
@supports not (-webkit-text-stroke:1px #000){
  /* 白抜き不可ブラウザは白ソリッド数字で代替 */
  .ios-design-new .number{ color:#fff !important; }
}
@media (max-width:600px){
  .ios-design-new .number{ font-size:30px; top:12px !important; left:9px !important; -webkit-text-stroke-width:1.5px; }
}

/* ===== FAQ ===== */
/* FAQ 見出し — v2：カウンタ採番（通し05の4番目）・黄左罫を白抜き番号に置換 */
.ios-design-new .iosp-faq-heading{
  font-family:var(--ds-ff-gothic) !important; font-weight:900 !important;
  border-bottom:none !important; border-left:none !important;
  padding:0 0 0 64px !important; min-height:52px !important;
  color:var(--ds-ink); position:relative;
  counter-increment:ios-sec; letter-spacing:.02em;
}
.ios-design-new .iosp-faq-heading::before{
  content:counter(ios-sec,decimal-leading-zero);
  position:absolute; left:0; top:-4px;
  font-weight:900; font-size:48px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--ds-ink);
  font-feature-settings:"tnum";
}
@supports not (-webkit-text-stroke:1px #000){
  .ios-design-new .iosp-faq-heading::before{ color:var(--ds-ink); opacity:.15; }
}
/* R2: FAQ Q箱 = 白カード＋rule枠（インライン background:#fdf6e8 を !important で上書き） */
.ios-design-new .iosp-recipe-faq dt{
  background:var(--ds-card-bg) !important; color:var(--ds-ink) !important;
  border:1px solid var(--ds-rule) !important;
  font-family:var(--ds-ff-gothic); font-weight:700; border-radius:var(--ds-radius) !important;
}
/* Q. マーカーの旧アンバーをマゼンタへ（インライン旧色を !important で上書き） */
.ios-design-new .iosp-recipe-faq dt span{ color:var(--ds-accent-text) !important; } /* Q. */
.ios-design-new .iosp-recipe-faq dd{ color:var(--ds-ink); line-height:1.85; }
.ios-design-new .iosp-recipe-faq dd span{ color:var(--ds-accent-text) !important; }     /* A. */
.ios-design-new .iosp-recipe-faq dd a{ color:var(--ds-accent-text); }

/* ===== 著者メタ（バイライン圧縮版: インライン折り返しでモバイル2行/デスクトップ1行） ===== */
.ios-design-new .ios-recipe-meta{ color:var(--ds-muted) !important; font-size:12px !important; line-height:1.9 !important; }
.ios-design-new .ios-recipe-meta a{ color:var(--ds-accent-text) !important; }
.ios-design-new .ios-meta-sep{ color:var(--ds-disabled); margin:0 2px; }

/* ===== 関連レシピ ===== */
/* 関連レシピ見出し — v2：カウンタ採番（通し05の5番目）・黄左罫を白抜き番号に置換 */
.ios-design-new .ios-related-heading{
  font-family:var(--ds-ff-gothic); font-weight:900; font-size:22px; color:var(--ds-ink);
  border-left:none; padding-left:64px; min-height:52px;
  position:relative; counter-increment:ios-sec; letter-spacing:.02em;
}
.ios-design-new .ios-related-heading::before{
  content:counter(ios-sec,decimal-leading-zero);
  position:absolute; left:0; top:-4px;
  font-weight:900; font-size:48px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--ds-ink);
  font-feature-settings:"tnum";
}
@supports not (-webkit-text-stroke:1px #000){
  .ios-design-new .ios-related-heading::before{ color:var(--ds-ink); opacity:.15; }
}
/* ===== dotrule — 3色スパイス点描帯（関連レシピ前） ===== */
/* sp-12 = 48px。content:"" で擬似要素に高さを与える */
.ios-design-new .ios-related-recipes{
  position:relative;
}
.ios-design-new .ios-related-recipes::before{
  content:"";
  display:block;
  height:14px;
  margin:48px 0;
  background-image:
    radial-gradient(circle at 3px 3px, var(--ds-ink) 1.6px, transparent 1.8px),
    radial-gradient(circle at 10px 9px, var(--ds-yellow) 2.4px, transparent 2.6px),
    radial-gradient(circle at 17px 4px, var(--ds-accent) 1.3px, transparent 1.5px);
  background-size:20px 14px;
  background-repeat:repeat-x;
  border:none;
}

/* グリッド：左右ギャップは詰め、上下は確保 */
.ios-design-new .ios-related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px 10px; }
@media (max-width:768px){ .ios-design-new .ios-related-grid{ grid-template-columns:repeat(2,1fr); gap:16px 10px; } }
@media (max-width:549px){ .ios-design-new .ios-related-grid{ grid-template-columns:1fr; gap:14px; } }
/* カード：等高フレックス（タイトル/抜粋クランプ＋タグを底に揃える） */
/* 関連カード print-quiet: radius-0、hover は持ち上がりなし（影拡張のみ）、サムネ4:3 */
.ios-design-new .ios-related-card-link{
  display:flex; flex-direction:column; height:100%;
  background:var(--ds-card-bg); border:none;
  border-radius:0; overflow:hidden; box-shadow:var(--ds-shadow-card);
  transition:box-shadow .18s; text-decoration:none;
}
.ios-design-new .ios-related-card-link:hover{ box-shadow:var(--ds-shadow-hover); }
.ios-design-new .ios-related-thumb{ aspect-ratio:4/3; overflow:hidden; }
.ios-design-new .ios-related-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ios-design-new .ios-related-body{ padding:18px 18px 12px; }
.ios-design-new .ios-related-title{
  font-family:var(--ds-ff-body); font-weight:700; color:var(--ds-ink);
  font-size:14px; line-height:1.55; margin:0 0 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ios-design-new .ios-related-excerpt{
  color:var(--ds-muted); font-size:12px; line-height:1.7; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* タグ：最大5個・墨グレー・極小・折り返し可（見切れ防止）・カード底に */
.ios-design-new .ios-related-tags{
  display:flex; flex-wrap:wrap; gap:5px;
  padding:0 18px 16px; margin-top:auto;
}
/* a11y: タグは10px・新muted（8px→10px、ユーザー承認済み） */
.ios-design-new .ios-related-tag{
  display:inline-block; color:var(--ds-muted); font-size:10px; line-height:1.5;
  padding:1px 5px; white-space:nowrap; border-radius:10px;
  box-shadow:inset 0 0 0 1px var(--ds-rule);
}
.ios-design-new .ios-related-tag:nth-of-type(n+6){ display:none; }
/* ===== ボタン（二次） ===== */
.ios-design-new .button.secondary,
.ios-design-new .ios-related-load-more.button{
  background:var(--ds-card-bg); color:var(--ds-ink);
  box-shadow:none; border:1.5px solid var(--ds-ink) !important;
  border-radius:var(--ds-radius-pill) !important;
  font-family:var(--ds-ff-gothic); font-weight:700; padding:.7em 1.8em;
}
/* 2026-08-07 P2: secondary の hover 塗りも黄→墨（黄は購買アクション専用） */
.ios-design-new .button.secondary:hover,
.ios-design-new .ios-related-load-more.button:hover{
  background:var(--ds-ink); color:var(--ds-cream);
  border-color:var(--ds-ink) !important;
}
/* ===== 出来上がり・本文画像の角丸 ===== */
.ios-design-new .article-inner img{ border-radius:var(--ds-radius); }

/* ===== 読み物変種 .ios-article（2026-08-02 /article/ 拡張） =====
   非レシピpost＋/article/ハブに付与。レシピ工程用のテーブル装飾を通常テーブルに戻す。 */
@media (min-width:601px){
  .ios-design-new.ios-article .article-inner table:not([class]){ display:table; width:100%; }
  .ios-design-new.ios-article .article-inner table:not([class]) thead{ display:table-header-group; }
  .ios-design-new.ios-article .article-inner table:not([class]) thead tr{ display:table-row; border-top:none; padding:0; }
  .ios-design-new.ios-article .article-inner table:not([class]) thead tr > th:first-child,
  .ios-design-new.ios-article .article-inner table:not([class]) thead tr > th:last-child{
    display:table-cell; flex:none; padding:.55em .7em;
  }
}
.ios-design-new.ios-article .article-inner table:not([class]) th,
.ios-design-new.ios-article .article-inner table:not([class]) td{
  border-bottom:1px solid var(--ds-rule); padding:.55em .7em; vertical-align:top; text-align:left;
}
.ios-design-new.ios-article .article-inner table:not([class]) thead th:first-child img{
  width:auto; aspect-ratio:auto; object-fit:initial;
}
.ios-design-new.ios-article .article-inner table:not([class]) thead th:first-child p{ margin:revert; }

/* ===== 読み物ハブ /article/ 一覧（shortcode iosp_article_list。インラインstyleを上書き） ===== */
.ios-design-new .iosp-article-list{ margin:24px 0 48px; }
.ios-design-new .iosp-article-list li{
  margin:0 !important; padding:14px 2px !important;
  border-bottom:1px solid var(--ds-rule) !important;
  display:flex; align-items:baseline; gap:14px;
}
.ios-design-new .iosp-article-list li a{
  order:2;
  color:var(--ds-ink) !important; font-family:var(--ds-ff-body); font-weight:700; font-size:15px;
  text-decoration:none; line-height:1.6;
}
.ios-design-new .iosp-article-list li a:hover{ color:var(--ds-accent-text) !important; text-decoration:underline; text-underline-offset:3px; }
.ios-design-new .iosp-article-list li small{
  order:1; flex:none; min-width:6.2em;
  color:var(--ds-muted) !important; font-feature-settings:"tnum"; font-size:12px;
  margin-left:0 !important;
}

/* ===== 購入特典 recipebook バナー（旧アンバー塗り＋旧ブルーCTA → 新パレット） ===== */
/* 旧アンバー塗りは __inner の linear-gradient。card 地＋黄左罫へ。旧ブルーCTA→黄。 */
.ios-design-new .ios-recipebook-banner__inner{
  background:var(--ds-card-bg);
  border:1px solid var(--ds-rule); border-left:5px solid var(--ds-yellow);
  box-shadow:var(--ds-shadow-card);
}
.ios-design-new .ios-recipebook-banner__inner::before{ display:none; }
.ios-design-new .ios-recipebook-banner__link{ color:var(--ds-ink); text-decoration:none; }
/* 2026-08-07 P2 黄スコープ是正: 「購入特典」はラベルであって購買アクションではない。黄塗り→ワイン塗り。 */
.ios-design-new .ios-recipebook-banner__badge{
  background:var(--ds-accent); color:#fff;
  border-radius:0;
  font-family:var(--ds-ff-gothic); font-weight:900;
}
.ios-design-new .ios-recipebook-banner__headline{
  font-family:var(--ds-ff-gothic); font-weight:900; color:var(--ds-ink);
}
.ios-design-new .ios-recipebook-banner__sub{ color:var(--ds-muted); }
/* 2026-08-07 P2: 遷移先は /purchase_benefits/（特典の説明ページ）＝カート投入ではない。黄塗り→墨枠 secondary。 */
.ios-design-new .ios-recipebook-banner__cta{
  background:transparent; border-radius:0; border:1.5px solid var(--ds-ink);
}
.ios-design-new .ios-recipebook-banner__cta-label{
  color:var(--ds-ink); font-family:var(--ds-ff-gothic); font-weight:900;
}
/* hover はコンポーネント側インラインCSSが旧ロイヤルブルー(#2563EB)を (0,3,0) で当ててくる。
   墨枠 secondary に合わせて墨反転へ上書き（(0,4,0) で勝たせる）。 */
.ios-design-new .ios-recipebook-banner__link:hover .ios-recipebook-banner__cta{
  background:var(--ds-ink); border-color:var(--ds-ink);
}
.ios-design-new .ios-recipebook-banner__link:hover .ios-recipebook-banner__cta-label,
.ios-design-new .ios-recipebook-banner__link:hover .ios-recipebook-banner__cta-arrow{
  color:var(--ds-cream);
}

/* 材料リスト: チェック列の左余白（2026-08-05 実機FB。fixture inline の 4px は狭すぎ、
   フッター「すべてチェック」の 16px インデントに合わせる） */
.ios-design-new .ios-ingredient-check{
  padding-left:21px !important; padding-right:10px !important;
}
@media (max-width:600px){
  .ios-design-new .ios-ingredient-check{ padding-left:21px !important; }
}

/* ===== 2026-08-05 DS監査の指摘対応 ===== */
/* ① ブランケット `.ios-design-new a{color:accent}` がボタンの文字色まで塗り、
   ワイン地(theme mods primary=#7C3946)×ワイン文字で不可視になっていた。
   カートドロワー「ショップに戻る」等。primary ボタンは白文字に戻す。
   ※ 黄面の .ios-ingredients-add-to-cart は 4クラス指定で本ルールより強く、影響しない。
   ※ .button.secondary / .ios-related-load-more は .primary を持たないため非該当。 */
.ios-design-new a.button.primary,
.ios-design-new button.button.primary{ color:#fff; }

/* ② 購入特典バナーCTA: 面を黄に変えた際、__cta-label だけ温チャコールにしていたため
   兄弟の ▶(__cta-arrow) が親から継承した白のまま黄地に乗り判読不能だった。
   親に色を当てて子要素すべてを温チャコールに揃える（黄地に白文字はDS禁止）。 */
.ios-design-new .ios-recipebook-banner__cta{ color:var(--ds-ink-on-yellow); }

/* ---- 追補：CTA階層の是正（2026-08-05 ユーザーFB） ----
   「関連レシピをもっと見る」は遷移ではなく開示操作。購買ボタンと同格の墨枠pillだったので
   tertiary のテキストリンクへ（商品ページの「もっと見る(+N)」と語彙を統一）。
   あわせてボタン族の角丸を --ds-radius(6px) に統一（Flatsome既定5pxが漏れていた）。 */
.ios-design-new .ios-related-load-more.button{
  background:transparent !important; border:none !important; box-shadow:none !important;
  border-radius:0 !important;
  color:var(--ds-accent-text) !important;
  font-family:var(--ds-ff-gothic); font-weight:700; font-size:13px;
  padding:.6em .2em; min-height:44px;
  text-decoration:underline; text-underline-offset:4px;
}
.ios-design-new .ios-related-load-more.button:hover{
  background:transparent !important; color:var(--ds-ink) !important; border-color:transparent !important;
}
.ios-design-new .ios-ingredients-add-to-cart.button.primary{
  border-radius:var(--ds-radius) !important;
}

/* 読み物ハブ /article/ の見出し（2026-08-05 監査: H1が Flatsome既定 sans-serif #555 のままだった） */
.ios-design-new.page #main h1,
.ios-article #main h1,
.ios-design-new .iosp-article-hub__title{
  font-family:var(--ds-ff-gothic) !important;
  font-weight:900 !important;
  color:var(--ds-ink) !important;
  letter-spacing:.02em;
}


/* ---- 追補：リンク下線の統一（2026-08-05） ----
   基盤spec §11「リンクは色だけに頼らず下線併用（色覚多様性対応）」。
   ただし全リンクに引くと目次・カード一覧が線だらけになるため、文脈で切り分ける:
     散文中のインラインリンク / 単独行のtertiary CTAリンク → 下線あり
     ナビゲーション一覧（目次・カードタイトル・メニュー）   → 下線なし（一覧の文脈がアフォーダンス） */
.ios-design-new .iosp-autolink,
.ios-design-new .iosp-recipe-faq dd a,
.ios-design-new .iosp-free-top a,
.ios-design-new .iosp-free-bottom a{
  text-decoration:underline; text-underline-offset:3px;
}


/* ---- 2026-08-06 章番号の統一 ----
   章見出しの白抜き番号を「絶対配置+padding」から flex+中央揃えへ。
   旧実装は番号48pxがタイトル22pxの下に垂れ、ページ間で高さ関係もバラバラだった。
   確定形: flex / align-items:center / 番号40px / gap 12px（デスクトップ14px）。 */
.ios-design-new .article-inner h2,
.ios-design-new .iosp-faq-heading,
.ios-design-new .ios-related-heading{
  display:flex; align-items:center; gap:12px;
  position:static;
  padding-left:0 !important;
  min-height:0 !important;
}
.ios-design-new .article-inner h2::before,
.ios-design-new .iosp-faq-heading::before,
.ios-design-new .ios-related-heading::before{
  position:static; top:auto; left:auto;
  flex:none;
  font-family:var(--ds-ff-gothic);
  font-size:40px;
}
@media (min-width:601px){
  .ios-design-new .article-inner h2,
  .ios-design-new .iosp-faq-heading,
  .ios-design-new .ios-related-heading{ gap:14px; }
}