/* =========================================================
   datsuryoku.css
   ---------------------------------------------------------
   「料理したくない脱力レシピ」専用ページ (/datsuryoku-recipes/)
   のスタイル。page-datsuryoku-recipes.php からのみ enqueue される。

   スコープ:
     すべてのルールは .dr-root 配下、または .dr- プレフィックスを
     持つクラスに限定して書く。サイト全体の .nt-* スタイルや
     他ページ (Home / Products / Services / 本音辞典 / CHILL BIZ /
     haitou) には影響しないこと。

   配色トーン (最終モック準拠):
     - アイボリー背景   #fbf6ea  (ページ全体の地)
     - カード白         #fffdf7  (ほんのり暖色の白)
     - 朱赤アクセント   #d9472b  (見出し / ハンコ / 主ボタン)
     - オレンジ         #ef8a3c  (サブアクセント / バッジ)
     - 暗テキスト       #4a352a  (本文・見出し、温かい焦茶)
     - サブテキスト     #8a7263  (説明文)
     - 淡オレンジ地     #fdeedd  (チップ / --alt セクション)

   デザイン原則 (モック準拠):
     角丸カード / やさしい影 / 余白多め / 手描き風装飾
     (ブラシ風アンダーライン・点線罫・メモ風カードのテープ)。

   レイアウト前提:
     親テーマの .nt-container の幅トークンはそのまま活かし、
     脱力レシピ専用の装飾だけ .dr-* に閉じる。
     横スクロール禁止 (すべての装飾は overflow に配慮)。
   ========================================================= */

/* ---- ローカルトークン (脱力レシピページ内のみ有効) ----
   配色は最終モック基準 (docs/design/README.md):
   背景 #fff8e8〜#fff4d8 / カード #fffdf6 / 線 #ecd6aa /
   赤 #df3f32〜#e8543f / オレンジ #f2a33a / 文字 #2f211b */
.dr-root {
	--dr-color-ivory:      #fff8e8;
	--dr-color-card:       #fffdf6;
	--dr-color-red:        #e8543f;
	--dr-color-red-deep:   #df3f32;
	--dr-color-orange:     #f2a33a;
	--dr-color-orange-soft:#fff4d8;
	--dr-color-text:       #2f211b;
	--dr-color-text-sub:   #8a7263;
	--dr-color-border:     #ecd6aa;

	--dr-radius-card:      22px;
	--dr-radius-sm:        12px;
	--dr-radius-pill:      999px;

	--dr-shadow-soft:      0 8px 24px rgba(181, 58, 34, 0.08);
	--dr-shadow-hover:     0 14px 32px rgba(181, 58, 34, 0.13);

	color: var(--dr-color-text);
	background: var(--dr-color-ivory);
	overflow-x: clip; /* 万一の装飾はみ出しでも横スクロールを出さない */
}

/* =========================================================
   専用サイトヘッダー (このページ限定 / 最終モック準拠)
   ---------------------------------------------------------
   表示順: (1) Neutrope Biz 共通ヘッダー (.nt-header、親テーマ) →
           (2) この専用ヘッダー (.dr-siteheader) → (3) LP 本体。
   共通ヘッダーは非表示にせず通常表示のまま。専用ヘッダーは共通
   ヘッダーの直下に通常フロー (static) で並べる。共通ヘッダーが
   sticky なので、専用ヘッダーを sticky にすると重なる・admin-bar と
   干渉するため、専用ヘッダーは sticky にしない。
   .dr-siteheader は .dr-root の外に出るため、CSS 変数 (.dr-root
   ローカルトークン) は使わずモック配色を直接指定する。
   ========================================================= */

.dr-siteheader {
	position: static; /* 共通ヘッダーの下に通常フローで並べる (sticky にしない) */
	background: #fffdf6;
	border-bottom: 1px solid #ecd6aa;
	box-shadow: 0 2px 10px rgba(181, 58, 34, 0.06);
}

.dr-siteheader__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-block: 8px;
}

.dr-siteheader__logo {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: clamp(0.95rem, 1.4vw, 1.12rem);
	font-weight: 800;
	color: #2f211b;
	text-decoration: none;
	line-height: 1.2;
}

.dr-siteheader__logo-icon {
	font-size: 1.2em;
}

.dr-siteheader__logo:hover,
.dr-siteheader__logo:focus-visible {
	color: #df3f32;
}

.dr-siteheader__nav {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.8vw, 28px);
	flex-wrap: wrap;
}

.dr-siteheader__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.85rem;
	font-weight: 700;
	color: #6b5648;
	text-decoration: none;
	padding: 0.3em 0.1em;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.dr-siteheader__link span {
	font-size: 0.95em;
}

.dr-siteheader__link:hover,
.dr-siteheader__link:focus-visible {
	color: #df3f32;
	border-bottom-color: #f2a33a;
}

/* アンカージャンプ時のオフセット。専用ヘッダーは static だが、
   親テーマ共通ヘッダー (.nt-header--sticky) が上部に残るため、
   その高さ分セクションを下げて隠れないようにする。 */
.dr-root section[id],
#dr-hero,
#dr-today,
#dr-ng,
#dr-weekly,
#dr-steps {
	scroll-margin-top: 76px;
}

/* SP: ロゴとナビを縦積みに (専用ヘッダーは PC/SP とも static) */
@media (max-width: 700px) {
	.dr-siteheader__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-block: 10px;
	}

	.dr-siteheader__nav {
		width: 100%;
		gap: 8px 14px;
	}

	.dr-siteheader__link {
		font-size: 0.8rem;
	}

	.dr-root section[id],
	#dr-hero, #dr-today, #dr-ng, #dr-weekly, #dr-steps {
		scroll-margin-top: 14px;
	}
}

/* SP でのみ <br> を効かせる小ヘルパ (脱力レシピページ専用) */
.dr-root .dr-br-sp { display: none; }
@media (max-width: 600px) {
	.dr-root .dr-br-sp { display: inline; }
}

/* PC / tablet でのみ <br> を効かせる小ヘルパ */
.dr-root .dr-br-pc { display: inline; }
@media (max-width: 600px) {
	.dr-root .dr-br-pc { display: none; }
}

/* =========================================================
   共通要素
   ========================================================= */
.dr-root .dr-section {
	/* モック準拠: セクション間を詰めて 1 枚のポスター感を出す */
	padding-block: clamp(38px, 5vw, 64px);
	background: var(--dr-color-ivory);
}

.dr-root .dr-section--alt {
	background: var(--dr-color-orange-soft);
}

/* モック準拠: セクション見出しは左寄せ + 見出し横にキラキラ装飾。
   (ヒーロー .dr-hero__center / 応援バナー .dr-cheer__title は別構造で
    中央寄せのまま) */
.dr-root .dr-section__head {
	text-align: left;
	max-width: none;
	margin: 0 0 clamp(22px, 3.2vw, 38px);
}

.dr-root .dr-section__head h2 {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: clamp(1.45rem, 2.7vw, 1.95rem);
	line-height: 1.4;
	color: var(--dr-color-red-deep);
	letter-spacing: 0.01em;
	margin: 0.3em 0 0.5em;
}

/* 見出し右の手描き風キラキラ */
.dr-root .dr-section__head h2::after {
	content: "✦";
	font-size: 0.7em;
	color: var(--dr-color-orange);
	transform: translateY(-0.15em);
}

/* eyebrow は見出しの上に単独行で置く (横並び防止) */
.dr-root .dr-section__head .dr-eyebrow {
	display: block;
	width: fit-content;
	margin-bottom: 0.7em;
}

.dr-root .dr-section__lead {
	color: var(--dr-color-text-sub);
	line-height: 1.85;
	margin: 0;
}

.dr-root .dr-eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	color: var(--dr-color-red);
	font-weight: 700;
	background: rgba(232, 84, 63, 0.10);
	padding: 0.3em 0.9em;
	border-radius: var(--dr-radius-pill);
}

/* ---- ボタン ---- */
.dr-root .dr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.6em;
	border-radius: var(--dr-radius-pill);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	border: 1px solid transparent;
	cursor: pointer;
}

.dr-root .dr-btn--primary {
	background: var(--dr-color-red);
	color: #ffffff;
	box-shadow: 0 6px 16px rgba(217, 71, 43, 0.25);
}

.dr-root .dr-btn--primary:hover,
.dr-root .dr-btn--primary:focus-visible {
	background: var(--dr-color-orange);
	color: #ffffff;
	box-shadow: 0 10px 22px rgba(239, 138, 60, 0.32);
	transform: translateY(-1px);
}

/* 副ボタンは白系カード地 (モック準拠) */
.dr-root .dr-btn--ghost {
	background: #ffffff;
	color: var(--dr-color-red-deep);
	border-color: var(--dr-color-border);
	box-shadow: 0 4px 12px rgba(223, 63, 50, 0.08);
}

.dr-root .dr-btn--ghost:hover,
.dr-root .dr-btn--ghost:focus-visible {
	background: var(--dr-color-card);
	border-color: var(--dr-color-red);
}

/* =========================================================
   1. ヒーロー
   ========================================================= */
.dr-root .dr-hero {
	background:
		radial-gradient(1100px 380px at 50% -120px, rgba(239, 138, 60, 0.16), transparent 70%),
		var(--dr-color-ivory);
	padding-block: clamp(48px, 7vw, 88px) clamp(40px, 6vw, 64px);
	border-bottom: 1px solid var(--dr-color-border);
}

.dr-root .dr-hero {
	position: relative; /* キラキラ装飾 (.dr-deco) の基準 */
}

.dr-root .dr-hero__inner {
	display: grid;
	/* モック準拠: 左右キャラ列を可変で広げ、コピーを左右から挟む構図に。
	   gap を詰めてキャラとコピーを近接させる */
	grid-template-columns: minmax(180px, 0.9fr) minmax(380px, 1.5fr) minmax(180px, 0.9fr);
	gap: 6px 12px;
	align-items: end;
}

/* ---- ヒーローの料理アイコン・キラキラ・音符装飾 (モック準拠で大きく) ---- */
.dr-root .dr-deco {
	position: absolute;
	/* キラキラ/音符/ハート: 18〜32px 程度 */
	font-size: clamp(1.1rem, 1.8vw, 2rem);
	opacity: 0.65;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* 料理アイコンははっきり見えるサイズに (32〜56px 程度) */
.dr-root .dr-deco--food {
	font-size: clamp(2rem, 3.4vw, 3.4rem);
	opacity: 0.85;
}

.dr-root .dr-deco--1 { top: 10%;    left: 10%;  transform: rotate(-8deg); }
.dr-root .dr-deco--2 { top: 13%;    right: 28%; transform: rotate(12deg); }
.dr-root .dr-deco--3 { top: 56%;    left: 11%;  transform: rotate(6deg); }
.dr-root .dr-deco--4 { top: 11%;    right: 13%; }
.dr-root .dr-deco--5 { bottom: 18%; right: 27%; transform: rotate(-12deg); }
.dr-root .dr-deco--6 { bottom: 26%; left: 24%; }
.dr-root .dr-deco--7 { bottom: 20%; left: 9%;   transform: rotate(10deg); }
.dr-root .dr-deco--8 { top: 40%;    right: 11%; }

@media (max-width: 900px) {
	.dr-root .dr-deco { display: none; }
}

.dr-root .dr-hero__center {
	text-align: center;
	align-self: center;
	min-width: 0;
}

.dr-root .dr-hero__eyebrow {
	display: inline-block;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	font-weight: 700;
	color: #ffffff;
	background: linear-gradient(120deg, var(--dr-color-red), var(--dr-color-orange));
	padding: 0.35em 1.1em;
	border-radius: var(--dr-radius-pill);
}

.dr-root .dr-hero__title {
	/* モック準拠: 太く・大きく、ヒーローの視線の中心に */
	font-size: clamp(1.95rem, 3.9vw, 2.95rem);
	font-weight: 800;
	line-height: 1.42;
	color: var(--dr-color-text);
	letter-spacing: 0.02em;
	margin: 0.55em 0 0.5em;
	white-space: nowrap; /* 2 行のきれいな改行を <br> で固定 (SP は解除) */
}

@media (max-width: 700px) {
	.dr-root .dr-hero__title {
		white-space: normal;
		font-size: clamp(1.5rem, 6.4vw, 1.8rem);
	}
}

/* 「ちゃんと食べる」強調: 赤〜オレンジのグラデ文字 +
   手描き風ブラシアンダーライン (薄いオレンジの帯を少し傾けて敷く) */
.dr-root .dr-hero__em {
	position: relative;
	display: inline-block;
	font-style: normal;
	font-size: 1.28em; /* モック準拠: 「ちゃんと食べる」をより大きく強調 */
	font-weight: 800;
	letter-spacing: 0.03em;
	background: linear-gradient(115deg, var(--dr-color-red) 25%, var(--dr-color-orange) 85%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	z-index: 0;
}

.dr-root .dr-hero__em::after {
	content: "";
	position: absolute;
	left: -2%;
	right: -2%;
	bottom: 0.05em;
	height: 0.38em;
	background: linear-gradient(100deg, rgba(239, 138, 60, 0.30), rgba(217, 71, 43, 0.22));
	border-radius: 4px 10px 6px 12px / 10px 4px 12px 6px; /* 手描き風の不揃い角丸 */
	transform: rotate(-1.2deg);
	z-index: -1;
}

.dr-root .dr-hero__lead {
	color: var(--dr-color-text-sub);
	line-height: 1.9;
	margin: 0 0 1.4em;
}

/* ---- ヒーロー チェック4項目 ---- */
.dr-root .dr-hero__checks {
	list-style: none;
	margin: 0 auto 1.6em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, auto));
	gap: 10px 26px;
	justify-content: center;
	text-align: left;
}

.dr-root .dr-hero__check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--dr-color-text);
}

.dr-root .dr-hero__check-mark {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.35em;
	height: 1.35em;
	font-size: 0.85em;
	font-weight: 800;
	color: #ffffff;
	background: linear-gradient(120deg, var(--dr-color-red), var(--dr-color-orange));
	border-radius: 50%;
}

@media (max-width: 600px) {
	.dr-root .dr-hero__checks {
		grid-template-columns: minmax(0, auto);
		gap: 8px;
	}
}

.dr-root .dr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

/* モック準拠: ヒーローの CTA を少し大きく・かわいく (共通 .dr-btn は不変) */
.dr-root .dr-hero__actions .dr-btn {
	font-size: 1.02rem;
	padding: 0.95em 2em;
	border-radius: var(--dr-radius-pill);
}

.dr-root .dr-hero__actions .dr-btn--primary {
	box-shadow: 0 8px 20px rgba(232, 84, 63, 0.28);
}

/* ---- 左右アシスタントキャラ ----
   .dr-chara__face 内の .dr-chara__emoji は、将来
   <img class="dr-chara__img"> に差し替えられるプレースホルダー構造 */
.dr-root .dr-hero__side {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: center;
}

.dr-root .dr-chara {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.dr-root .dr-chara__bubble {
	position: relative;
	display: inline-block;
	background: var(--dr-color-card);
	border: 1.5px solid var(--dr-color-border);
	border-radius: 14px;
	padding: 0.55em 0.9em;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--dr-color-text);
	text-align: center;
	box-shadow: var(--dr-shadow-soft);
}

.dr-root .dr-chara__bubble::after {
	content: "";
	position: absolute;
	bottom: -7px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: var(--dr-color-card);
	border-right: 1.5px solid var(--dr-color-border);
	border-bottom: 1.5px solid var(--dr-color-border);
}

.dr-root .dr-chara__face {
	display: grid;
	place-items: center;
	width: clamp(72px, 8vw, 104px);
	height: clamp(72px, 8vw, 104px);
	background: var(--dr-color-card);
	border: 2px solid var(--dr-color-orange);
	border-radius: 50%;
	box-shadow: var(--dr-shadow-soft);
	overflow: hidden;
	animation: dr-bob 3.4s ease-in-out infinite;
}

.dr-root .dr-chara__emoji {
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	line-height: 1;
}

/* 将来の画像差し替え用 (<img class="dr-chara__img"> を入れた場合) */
.dr-root .dr-chara__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- 正式立ち絵モード (.has-image) ----
   assistant-*.png (透過 PNG / 3:4 の立ち姿) が置かれると PHP が枠に
   has-image を付与する。円形クロップ・枠線・背景を解除して、立ち絵を
   そのまま表示する (頭が切れないように)。 */
.dr-root .dr-chara__face.has-image {
	/* モック準拠: 男性キャラを大きく (3:4 → 高さ 〜360px / 幅 〜270px) */
	width: clamp(180px, 21vw, 270px);
	height: auto;
	aspect-ratio: 3 / 4;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* 女性キャラはひと回り小さく (高さ 〜330px / 幅 〜248px) */
.dr-root .dr-chara--right .dr-chara__face.has-image {
	width: clamp(165px, 19.5vw, 248px);
}

@media (max-width: 900px) {
	/* SP はキャラが大きすぎないように抑える */
	.dr-root .dr-chara__face.has-image,
	.dr-root .dr-chara--right .dr-chara__face.has-image {
		width: clamp(110px, 30vw, 150px);
	}
}

.dr-root .dr-chara__face.has-image .dr-chara__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(181, 58, 34, 0.18));
}

.dr-root .dr-chara--right .dr-chara__face {
	border-color: var(--dr-color-red);
	animation-delay: 1.2s;
}

/* テスト用キャラ名 (フライパンの精 / ほめクマ) は画面に出さない。
   モックのヒーローでは名前ラベルが無いため。HTML / alt には残す。 */
.dr-root .dr-chara__name {
	display: none;
}

@keyframes dr-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
	.dr-root .dr-chara__face { animation: none; }
}

/* ---- ヒーロー レスポンシブ ---- */
@media (max-width: 900px) {
	.dr-root .dr-hero__inner {
		grid-template-columns: 1fr;
	}

	.dr-root .dr-hero__center {
		order: 1;
	}

	/* SP/タブレットでは キャラ2体を下段の横並びに */
	.dr-root .dr-hero__side {
		order: 2;
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		gap: 40px;
	}
}

/* =========================================================
   1-b. 画像主体ヒーロー (.dr-hero--visual)
   ---------------------------------------------------------
   hero-visual-pc.png (2172x724) / hero-visual-sp.png (1122x1402) に
   左右キャラ・フライパン・ごはん・サラダ・キラキラ・音符・ハート・
   背景装飾をすべて描き込み、HTML 側ではメインコピー / チェック /
   CTA だけを画像中央の空きスペースへ重ねる。画像が 2 枚揃ったときだけ
   PHP が .dr-hero--visual を付与し、旧 .dr-deco / .dr-hero__side は
   出力しない (重複表示しない)。この block は base の .dr-hero より後段に
   置き、padding / background / レイアウトを上書きする。
   ========================================================= */
.dr-root .dr-hero--visual {
	padding: 0;
	background: var(--dr-color-ivory); /* 画像読込前の下地 (背景の跳ね防止) */
	overflow: hidden;
	/* position: relative は base .dr-hero から継承。overlay の絶対配置基準 */
}

/* 画像本体: in-flow で高さを確定し CLS を抑える。
   width/height 属性 (picture/source) で読込前のアスペクト比も確保。 */
.dr-root .dr-hero__visual,
.dr-root .dr-hero__visual-img {
	display: block;
	width: 100%;
	height: auto;
}

/* オーバーレイ層: 画像の上に重ねてコピーを中央寄せ。
   画像クリックは透過し、操作要素 (.dr-hero__center) だけ pointer-events 復活。 */
.dr-root .dr-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	pointer-events: none;
}

/* 画像主体時のセンターコピー (grid ではなく overlay 内の中央 1 カラム)。
   PC は中央の空きスペース幅に収める。 */
.dr-root .dr-hero--visual .dr-hero__center {
	pointer-events: auto;
	width: min(48%, 540px);
	margin: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* タイトルは画像と馴染む範囲にやや抑える + クリーム下地への軽い縁取り */
.dr-root .dr-hero--visual .dr-hero__title {
	font-size: clamp(1.5rem, 3.2vw, 2.5rem);
	margin: 0.35em 0 0.5em;
	text-shadow: 0 1px 0 rgba(255, 252, 245, 0.95), 0 2px 10px rgba(255, 248, 232, 0.85);
}

/* 「ちゃんと食べる」は強調しつつ、大きすぎてバランスを崩さない程度に。
   em はグラデのテキストクリップ (透明塗り) なので、タイトルの text-shadow が
   文字の隙間から透けて白っぽくゴースト化する。em では text-shadow を無効化し、
   グラデ文字 + 下線 (::after) 本来の発色で見せる。 */
.dr-root .dr-hero--visual .dr-hero__em {
	font-size: 1.16em;
	text-shadow: none;
}

.dr-root .dr-hero--visual .dr-hero__eyebrow {
	box-shadow: 0 4px 12px rgba(232, 84, 63, 0.22);
}

/* チェック項目は詰めて、背景に負けないよう薄い縁取りを付ける */
.dr-root .dr-hero--visual .dr-hero__checks {
	margin: 0 auto 1.3em;
	gap: 8px 22px;
}

.dr-root .dr-hero--visual .dr-hero__check {
	font-size: 0.86rem;
	text-shadow: 0 1px 2px rgba(255, 252, 245, 0.95);
}

/* ---- 画像主体ヒーロー: SP (縦長画像 hero-visual-sp.png) ----
   キャラは画像下半分、上半分が空きスペースなのでコピーを上寄せにし、
   左右キャラの間の中央チャンネルに収まる幅へ絞る。 */
@media (max-width: 700px) {
	.dr-root .dr-hero--visual .dr-hero__overlay {
		align-items: flex-start;
		padding-top: clamp(20px, 7vw, 44px);
	}

	.dr-root .dr-hero--visual .dr-hero__center {
		width: min(80%, 360px);
	}

	.dr-root .dr-hero--visual .dr-hero__title {
		font-size: clamp(1.3rem, 5.6vw, 1.7rem);
		margin-bottom: 0.45em;
	}

	.dr-root .dr-hero--visual .dr-hero__checks {
		grid-template-columns: minmax(0, auto);
		gap: 6px;
		margin-bottom: 1em;
	}

	.dr-root .dr-hero--visual .dr-hero__actions {
		gap: 10px;
	}

	.dr-root .dr-hero--visual .dr-hero__actions .dr-btn {
		font-size: 0.92rem;
		padding: 0.8em 1.5em;
	}
}

/* =========================================================
   2. 今日の脱力レシピ (3品セット + 右側ほめハンコ)
   ========================================================= */

/* ---- 献立ヘッダ (30日中○日目 / 献立タイトル / 合計時間・難易度) ---- */
.dr-root .dr-menu-head {
	text-align: center;
	margin: 0 auto clamp(20px, 3vw, 30px);
	max-width: 640px;
}

.dr-root .dr-menu-head__day {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--dr-color-orange);
	background: rgba(239, 138, 60, 0.12);
	padding: 0.3em 1em;
	border-radius: var(--dr-radius-pill);
}

.dr-root .dr-menu-head__title {
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	font-weight: 800;
	color: var(--dr-color-text);
	line-height: 1.5;
	margin: 0.5em 0 0.45em;
}

.dr-root .dr-menu-head__meta {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---- NG食材の注意カード (該当時のみ JS が表示) ---- */
.dr-root .dr-ng-alert {
	max-width: 640px;
	margin: 0 auto clamp(20px, 3vw, 28px);
	background: var(--dr-color-card);
	border: 1.5px dashed var(--dr-color-red);
	border-radius: var(--dr-radius-card);
	padding: 18px 20px;
	text-align: center;
	box-shadow: var(--dr-shadow-soft);
}

.dr-root .dr-ng-alert__text {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dr-color-red-deep);
	line-height: 1.8;
	margin: 0 0 12px;
}

.dr-root .dr-ng-alert__actions {
	display: flex;
	justify-content: center;
}

.dr-root .dr-ng-alert__btn {
	font-size: 0.88rem;
}

/* ---- 献立切り替え中のお知らせ行 ---- */
.dr-root .dr-menu-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
	max-width: 640px;
	margin: 0 auto clamp(20px, 3vw, 28px);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
	text-align: center;
}

.dr-root .dr-menu-note__back {
	background: transparent;
	border: 1px solid var(--dr-color-border);
	border-radius: var(--dr-radius-pill);
	padding: 0.35em 1em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--dr-color-red-deep);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.dr-root .dr-menu-note__back:hover,
.dr-root .dr-menu-note__back:focus-visible {
	border-color: var(--dr-color-red);
	background: rgba(217, 71, 43, 0.05);
}

/* モック準拠: 3 品カード + ほめハンコを 1 枚の大カードにまとめる */
.dr-root .dr-today-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: clamp(16px, 2.2vw, 26px);
	align-items: stretch;
	background: var(--dr-color-card);
	border: 2px dashed rgba(242, 163, 58, 0.45); /* モック準拠の手描き風点線枠 */
	border-radius: calc(var(--dr-radius-card) + 6px);
	padding: clamp(16px, 2.4vw, 26px);
	box-shadow: var(--dr-shadow-soft);
}

.dr-root .dr-recipe-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 22px);
}

@media (max-width: 1100px) {
	.dr-root .dr-today-layout {
		grid-template-columns: 1fr;
	}

	.dr-root .dr-today-layout .dr-stamp-card {
		max-width: 340px;
		margin-inline: auto;
	}
}

@media (max-width: 860px) {
	.dr-root .dr-recipe-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-inline: auto;
	}
}

.dr-root .dr-recipe-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #ffffff;
	border: 1.5px solid #f3e3c2;
	border-radius: var(--dr-radius-card);
	padding: 18px 14px 16px;
	box-shadow: none;
	transition: box-shadow 0.25s ease, opacity 0.25s ease;
}

.dr-root .dr-recipe-card:hover {
	box-shadow: var(--dr-shadow-soft);
}

/* NG食材を含むカード (JS が .has-ng を付与) */
.dr-root .dr-recipe-card.has-ng {
	opacity: 0.72;
	border-style: dashed;
	border-color: var(--dr-color-orange);
}

/* 種別ラベル (メイン / サラダ / ごはん) */
.dr-root .dr-recipe-card__type {
	position: absolute;
	top: -12px;
	left: 16px;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #ffffff;
	padding: 0.32em 1em;
	border-radius: var(--dr-radius-pill);
	box-shadow: 0 4px 10px rgba(181, 58, 34, 0.18);
}

/* 種別ラベルの色 (モック準拠: メイン=赤 / サラダ=緑 / ごはん=オレンジ) */
.dr-root .dr-recipe-card__type--main  { background: var(--dr-color-red); }
.dr-root .dr-recipe-card__type--salad { background: #6cae5c; }
.dr-root .dr-recipe-card__type--rice  { background: #e0922e; }

/* 料理画像プレースホルダー (将来 <img class="dr-recipe-card__img"> 差し替え可能) */
.dr-root .dr-recipe-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(circle at 30% 25%, rgba(239, 138, 60, 0.16), transparent 65%),
		var(--dr-color-orange-soft);
	border: 1.5px dashed rgba(239, 138, 60, 0.45); /* 手描き風の点線枠 */
	border-radius: var(--dr-radius-sm);
	margin-top: 8px;
	overflow: hidden;
}

.dr-root .dr-recipe-card__media-emoji {
	font-size: 2.8rem;
	line-height: 1;
}

.dr-root .dr-recipe-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 料理画像あり: プレースホルダー風の点線枠・地色をやめて写真枠に */
.dr-root .dr-recipe-card__media.has-image {
	border: 1.5px solid var(--dr-color-border);
	background: var(--dr-color-ivory);
}

.dr-root .dr-recipe-card__title {
	font-size: 1.08rem;
	color: var(--dr-color-text);
	margin: 0;
	line-height: 1.5;
}

/* 約20分 / 計量なし / 包丁ほぼなし チップ列
   モック準拠: 枠なしのフラットなアイコン付きタグ (✓緑 / 時間=⏱赤) */
.dr-root .dr-recipe-card__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 3px 13px;
}

.dr-root .dr-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
	background: transparent;
	padding: 0;
	border-radius: 0;
}

.dr-root .dr-chip::before {
	content: "✓";
	color: #6cae5c;
	font-size: 0.92em;
	font-weight: 800;
}

.dr-root .dr-chip--time {
	color: var(--dr-color-red);
}

.dr-root .dr-chip--time::before {
	content: "⏱";
	color: var(--dr-color-red);
}

.dr-root .dr-recipe-card__desc {
	font-size: 0.85rem;
	color: var(--dr-color-text-sub);
	line-height: 1.8;
	margin: 0;
}

/* 材料行 (モック準拠で控えめに小さく。JS が献立データから流し込む) */
.dr-root .dr-recipe-card__ings {
	font-size: 0.72rem;
	color: var(--dr-color-text-sub);
	line-height: 1.7;
	margin: 0;
	background: var(--dr-color-orange-soft);
	border-radius: var(--dr-radius-sm);
	padding: 6px 10px;
}

.dr-root .dr-recipe-card__ings-label {
	display: inline-block;
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--dr-color-orange);
	margin-right: 0.6em;
}

/* 使い切りたい食材がこの料理に入っている時の前向きバッジ (緑。NG注意=赤の逆) */
.dr-root .dr-recipe-card__useup {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.74rem;
	font-weight: 800;
	color: #3d7a2e;
	background: rgba(108, 174, 92, 0.14);
	border: 1px solid rgba(108, 174, 92, 0.4);
	border-radius: var(--dr-radius-sm);
	padding: 5px 9px;
	margin: 6px 0 0;
}
.dr-root .dr-recipe-card__useup[hidden] {
	display: none;
}

.dr-root .dr-recipe-card__ng-note {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--dr-color-red-deep);
	background: rgba(217, 71, 43, 0.08);
	border: 1px dashed rgba(217, 71, 43, 0.4);
	border-radius: var(--dr-radius-sm);
	padding: 8px 10px;
	margin: 0;
}

/* ---- 今日のほめハンコ (大カード右側に一体化 / モック準拠) ---- */
.dr-root .dr-stamp-card {
	background: transparent;
	border: none;
	border-left: 1.5px dashed var(--dr-color-border);
	border-radius: 0;
	padding: 14px 8px 10px 20px;
	text-align: center;
	box-shadow: none;
	align-self: center;
}

@media (max-width: 1100px) {
	.dr-root .dr-stamp-card {
		border-left: none;
		border-top: 1.5px dashed var(--dr-color-border);
		padding: 18px 8px 6px;
	}
}

.dr-root .dr-stamp-card__title {
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	color: var(--dr-color-red-deep);
	margin: 0 0 14px;
}

.dr-root .dr-stamp {
	position: relative;
	display: grid;
	place-items: center;
	gap: 4px;
	width: 168px;  /* モック準拠: ハンコを大きめに */
	height: 168px;
	margin: 0 auto;
	padding: 20px;
	border: 3px solid var(--dr-color-red);
	border-radius: 50%;
	color: var(--dr-color-red);
	transform: rotate(-7deg);
	background:
		radial-gradient(circle at 30% 25%, rgba(217, 71, 43, 0.06), transparent 60%),
		transparent;
}

.dr-root .dr-stamp__ring {
	position: absolute;
	inset: 5px;
	border: 1.5px solid rgba(217, 71, 43, 0.55);
	border-radius: 50%;
	pointer-events: none;
}

/* ---- 画像ハンコ (正式素材の差し替え用) ----
   COOKED_PRAISES[n].image に URL を設定すると JS が <img> を生成し、
   .has-image を付与して CSS ハンコ (円 + 文言 + 日付) を隠す。 */
.dr-root .dr-stamp__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.dr-root .dr-stamp.has-image {
	border-color: transparent;
	background: none;
}

.dr-root .dr-stamp.has-image .dr-stamp__ring,
.dr-root .dr-stamp.has-image .dr-stamp__text,
.dr-root .dr-stamp.has-image .dr-stamp__date {
	visibility: hidden;
}

.dr-root .dr-stamp__text {
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: 0.03em;
}

.dr-root .dr-stamp__date {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba(217, 71, 43, 0.75);
}

/* ハンコ押し直しアニメーション (JS が .is-stamping を付け外し) */
.dr-root .dr-stamp.is-stamping {
	animation: dr-stamp-in 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}

@keyframes dr-stamp-in {
	0%   { transform: rotate(-7deg) scale(1.45); opacity: 0; }
	60%  { transform: rotate(-7deg) scale(0.96); opacity: 1; }
	100% { transform: rotate(-7deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.dr-root .dr-stamp.is-stamping { animation: none; }
}

.dr-root .dr-stamp-card__lead {
	font-size: 0.78rem;
	color: var(--dr-color-text-sub);
	line-height: 1.7;
	margin: 14px 0 0;
}

.dr-root .dr-stamp-card__reroll {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: transparent;
	border: 1px solid var(--dr-color-border);
	border-radius: var(--dr-radius-pill);
	padding: 0.45em 1em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.dr-root .dr-stamp-card__reroll:hover,
.dr-root .dr-stamp-card__reroll:focus-visible {
	color: var(--dr-color-red-deep);
	border-color: var(--dr-color-red);
	background: rgba(217, 71, 43, 0.05);
}

/* =========================================================
   2.5. 今日やること (作り方 +「作った!」完了フロー)
   ========================================================= */
.dr-root .dr-steps {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 2vw, 20px);
}

.dr-root .dr-steps-block {
	background: var(--dr-color-card);
	border: 1.5px solid var(--dr-color-border);
	border-radius: var(--dr-radius-card);
	padding: clamp(14px, 2vw, 20px) clamp(16px, 2.5vw, 26px);
	box-shadow: none;
}

.dr-root .dr-steps-block__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.dr-root .dr-steps-block__label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #ffffff;
	padding: 0.32em 1em;
	border-radius: var(--dr-radius-pill);
}

.dr-root .dr-steps-block__label--main  { background: var(--dr-color-red); }
.dr-root .dr-steps-block__label--salad { background: #6cae5c; }
.dr-root .dr-steps-block__label--rice  { background: #e0922e; }

.dr-root .dr-steps-block__title {
	font-size: 1.05rem;
	color: var(--dr-color-text);
	margin: 0;
	line-height: 1.5;
}

/* 手順リスト: 丸数字風のスタンプ番号 */
.dr-root .dr-steps-block__list {
	list-style: none;
	counter-reset: dr-step;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dr-root .dr-steps-block__list li {
	counter-increment: dr-step;
	position: relative;
	padding-left: 2.2em;
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--dr-color-text);
}

.dr-root .dr-steps-block__list li::before {
	content: counter(dr-step);
	position: absolute;
	left: 0;
	top: 0.22em;
	display: grid;
	place-items: center;
	width: 1.55em;
	height: 1.55em;
	font-size: 0.82em;
	font-weight: 800;
	color: var(--dr-color-red);
	border: 1.5px solid var(--dr-color-red);
	border-radius: 50%;
	transform: rotate(-6deg); /* ハンコ風に少し傾ける */
	background: rgba(217, 71, 43, 0.05);
}

.dr-root .dr-steps-block__memo {
	font-size: 0.78rem;
	color: var(--dr-color-text-sub);
	margin: 14px 0 0;
	padding-top: 10px;
	border-top: 1px dashed var(--dr-color-border);
}

.dr-root .dr-steps-block__memo::before {
	content: "✎ ";
	color: var(--dr-color-orange);
}

/* ---- 作り方の補足: レンジ目安(⏱️) / 初心者メモ(💡) (小さな紙メモ風) ----
   料理初心者でも止まらないように手順の下に控えめに出す。注意喚起しすぎない
   やわらかい配色。SP でも読めるサイズ。 */
.dr-root .dr-cook-notes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0 0;
}
.dr-root .dr-cook-note {
	border: 1px dashed var(--dr-color-border);
	border-radius: var(--dr-radius-sm);
	padding: 8px 11px;
}
.dr-root .dr-cook-note--mw {
	background: rgba(242, 163, 58, 0.10);
}
.dr-root .dr-cook-note--tips {
	background: rgba(108, 174, 92, 0.10);
}
.dr-root .dr-cook-note__title {
	display: block;
	font-size: 0.76rem;
	font-weight: 800;
	color: var(--dr-color-text);
	margin-bottom: 3px;
}
.dr-root .dr-cook-note__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dr-root .dr-cook-note__list li {
	position: relative;
	font-size: 0.76rem;
	line-height: 1.55;
	color: var(--dr-color-text-sub);
	padding-left: 0.9em;
}
.dr-root .dr-cook-note__list li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: var(--dr-color-orange);
}

/* ---- 「作った!」完了フロー ----
   (モック準拠の再配置で「今日作ったらほめます」専用セクション
    #dr-homare 内に移動。セクション見出し直下に置くため余白なし) */
.dr-root .dr-cooked {
	position: relative; /* 完了演出レイヤ (.dr-celebrate) の基準 */
	margin-top: 0;
	text-align: center;
}

/* ---- 完了演出 (紙吹雪 + ミニ「えらい！」) ---- */
.dr-root .dr-celebrate {
	position: absolute;
	inset: 0;
	overflow: hidden; /* 横スクロールを出さない */
	pointer-events: none;
	z-index: 1;
}

.dr-root .dr-confetti {
	position: absolute;
	top: 16px;
	left: 50%;
	width: 9px;
	height: 13px;
	border-radius: 2px;
	opacity: 0;
	animation: dr-confetti-fall 1.5s ease-out var(--dr-delay, 0s) forwards;
}

.dr-root .dr-confetti--red    { background: var(--dr-color-red); }
.dr-root .dr-confetti--orange { background: var(--dr-color-orange); }
.dr-root .dr-confetti--gold   { background: #e3b34c; }
.dr-root .dr-confetti--leaf   { background: #8fbc7f; }

@keyframes dr-confetti-fall {
	0% {
		opacity: 1;
		transform: translate(0, 0) rotate(0deg);
	}
	100% {
		opacity: 0;
		transform: translate(var(--dr-dx, 0px), 180px) rotate(var(--dr-rot, 180deg));
	}
}

.dr-root .dr-float-praise {
	position: absolute;
	top: 30px;
	left: 50%;
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--dr-color-red);
	white-space: nowrap;
	opacity: 0;
	animation: dr-float-up 1.3s ease-out var(--dr-delay, 0s) forwards;
}

@keyframes dr-float-up {
	0% {
		opacity: 0;
		transform: translate(calc(-50% + var(--dr-dx, 0px)), 10px) scale(0.7);
	}
	25% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(calc(-50% + var(--dr-dx, 0px)), -52px) scale(1.05);
	}
}

/* 動きを減らす設定では演出アニメを無効化 (JS 側でも生成をスキップ) */
@media (prefers-reduced-motion: reduce) {
	.dr-root .dr-confetti,
	.dr-root .dr-float-praise {
		animation: none;
		opacity: 0;
	}
}

.dr-root .dr-cooked__btn {
	font-size: 1.05rem;
	padding: 1em 2.4em;
}

/* 完了済み状態 (JS が .is-done を付与) */
.dr-root .dr-cooked__btn.is-done {
	background: linear-gradient(120deg, var(--dr-color-orange), var(--dr-color-red));
}

.dr-root .dr-cooked__hint {
	font-size: 0.8rem;
	color: var(--dr-color-text-sub);
	line-height: 1.7;
	margin: 12px 0 0;
}

/* 押印演出エリア */
.dr-root .dr-cooked-stamp {
	margin-top: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.dr-root .dr-cooked-stamp__msg {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--dr-color-red-deep);
	margin: 0;
}

/* ---- キャラの完了リアクション ---- */
.dr-root .dr-cooked-chara {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 4px 0 0;
}

.dr-root .dr-cooked-chara__face {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	font-size: 1.3rem;
	background: var(--dr-color-card);
	border: 2px solid var(--dr-color-orange);
	border-radius: 50%;
	flex: 0 0 auto;
}

.dr-root .dr-cooked-chara__bubble {
	position: relative;
	display: inline-block;
	background: var(--dr-color-card);
	border: 1.5px solid var(--dr-color-border);
	border-radius: 12px;
	padding: 0.5em 0.9em;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--dr-color-text);
	box-shadow: var(--dr-shadow-soft);
}

.dr-root .dr-cooked-chara__bubble::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background: var(--dr-color-card);
	border-left: 1.5px solid var(--dr-color-border);
	border-bottom: 1.5px solid var(--dr-color-border);
}

/* ---- 連続記録 ---- */
.dr-root .dr-streak {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 20px 0 0;
}

.dr-root .dr-streak__main {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--dr-color-red-deep);
}

.dr-root .dr-streak__sub {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
}

/* ---- ほめハンココレクション ---- */
.dr-root .dr-collection {
	max-width: 480px;
	margin: clamp(18px, 2.5vw, 26px) auto 0;
	background: var(--dr-color-card);
	border: 1.5px solid var(--dr-color-border);
	border-radius: var(--dr-radius-card);
	padding: 16px 18px 18px;
	box-shadow: var(--dr-shadow-soft);
}

.dr-root .dr-collection__title {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: var(--dr-color-red-deep);
	margin: 0 0 12px;
	text-align: center;
}

.dr-root .dr-collection__count {
	display: inline-block;
	margin-left: 0.4em;
	font-size: 0.8rem;
	color: var(--dr-color-orange);
}

.dr-root .dr-collection__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/* 小さな赤いスタンプ風カード。未取得は薄いグレーの ？？？ */
.dr-root .dr-collection__item {
	font-size: 0.74rem;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	padding: 0.6em 0.5em;
	border: 1.5px dashed var(--dr-color-border);
	border-radius: var(--dr-radius-sm);
	color: #b9aa9b;
	background: var(--dr-color-ivory);
	letter-spacing: 0.06em;
}

.dr-root .dr-collection__item.is-owned {
	border: 1.5px solid var(--dr-color-red);
	color: var(--dr-color-red);
	background: rgba(217, 71, 43, 0.05);
	transform: rotate(-1.5deg); /* ハンコっぽい傾き */
	letter-spacing: 0.02em;
}

.dr-root .dr-collection__item.is-owned:nth-child(even) {
	transform: rotate(1.2deg);
}

/* ---- 取得済み + 画像ハンコのセル ----
   画像ありの場合だけ枠を控えめにして、ハンコ画像そのものを主役にする。
   2 列グリッドは維持。SP でも潰れないよう最大幅を抑えて中央寄せ。 */
.dr-root .dr-collection__item.is-owned.has-image {
	display: grid;
	place-items: center;
	padding: 10px 8px;
	background: var(--dr-color-card);
	border-style: solid;
}

.dr-root .dr-collection__img {
	width: 100%;
	max-width: 112px;
	height: auto;
	display: block;
}

/* ---- 最近のほめハンコ: 行内の小さなハンコサムネイル ---- */
.dr-root .dr-stamp-history__thumb {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	object-fit: contain;
	align-self: center;
}

/* ---- 最近のほめハンコ履歴 ---- */
.dr-root .dr-stamp-history {
	max-width: 420px;
	margin: clamp(22px, 3vw, 30px) auto 0;
	background: var(--dr-color-card);
	border: 1.5px solid var(--dr-color-border);
	border-radius: var(--dr-radius-card);
	padding: 16px 20px;
	box-shadow: var(--dr-shadow-soft);
	text-align: left;
}

.dr-root .dr-stamp-history__title {
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: var(--dr-color-red-deep);
	margin: 0 0 10px;
	text-align: center;
}

.dr-root .dr-stamp-history__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dr-root .dr-stamp-history__item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 0.82rem;
	line-height: 1.7;
	border-bottom: 1px dashed var(--dr-color-border);
	padding-bottom: 6px;
}

.dr-root .dr-stamp-history__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.dr-root .dr-stamp-history__date {
	flex: 0 0 auto;
	font-weight: 800;
	color: var(--dr-color-orange);
	min-width: 2.8em;
}

.dr-root .dr-stamp-history__day {
	flex: 0 0 auto;
	font-size: 0.74rem;
	color: var(--dr-color-text-sub);
	min-width: 3.4em;
}

.dr-root .dr-stamp-history__text {
	color: var(--dr-color-red-deep);
	font-weight: 700;
}

/* =========================================================
   3. NG食材設定チップ (モック準拠: 横長カード + 右に紙メモ)
   ========================================================= */
.dr-root .dr-ng-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	gap: clamp(18px, 2.5vw, 34px);
	align-items: center;
	background: var(--dr-color-card);
	border: 2px dashed rgba(242, 163, 58, 0.45); /* モック準拠の手描き風点線枠 */
	border-radius: calc(var(--dr-radius-card) + 6px);
	padding: clamp(18px, 2.3vw, 26px); /* モック準拠で密度を上げる */
	box-shadow: var(--dr-shadow-soft);
}

@media (max-width: 900px) {
	.dr-root .dr-ng-layout {
		grid-template-columns: 1fr;
	}

	.dr-root .dr-ng-memo {
		max-width: 300px;
		margin-inline: auto;
	}
}

/* 旧: チップ群を包んでいたカード。大カード内に入ったので chrome なし */
.dr-root .dr-ng-panel {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	min-width: 0;
}

.dr-root .dr-ng-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

/* チップ 9 個 (きのこ/トマト/魚/貝/海藻/小麦粉/辛いもの/卵/乳製品)。
   PC では折り返して 2〜3 行、SP では自然に 1〜2 列。余白を少し詰めて
   カードが縦長になりすぎないようにする */
.dr-root .dr-ng-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dr-color-text);
	background: var(--dr-color-ivory);
	border: 2px solid var(--dr-color-border);
	border-radius: var(--dr-radius-pill);
	padding: 0.45em 0.9em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* ---- 右側の紙メモ (モック準拠) ---- */
.dr-root .dr-ng-memo {
	position: relative;
	background:
		repeating-linear-gradient(
			transparent,
			transparent 25px,
			rgba(242, 163, 58, 0.18) 25px,
			rgba(242, 163, 58, 0.18) 26px
		),
		#fffef9;
	border: 1.5px solid var(--dr-color-border);
	border-radius: var(--dr-radius-sm);
	padding: 30px 16px 20px;
	text-align: center;
	font-size: 0.92rem;
	font-weight: 800;
	line-height: 2;
	color: var(--dr-color-red-deep);
	box-shadow: var(--dr-shadow-soft);
	transform: rotate(1.2deg);
}

.dr-root .dr-ng-memo::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	width: 84px;
	height: 20px;
	background: rgba(242, 163, 58, 0.4);
	border-left: 1px dashed rgba(255, 255, 255, 0.7);
	border-right: 1px dashed rgba(255, 255, 255, 0.7);
	border-radius: 2px;
}

.dr-root .dr-ng-chip:hover,
.dr-root .dr-ng-chip:focus-visible {
	border-color: var(--dr-color-orange);
	transform: translateY(-1px);
}

/* チェックマーク: OFF 時は隠し、ON で表示 */
.dr-root .dr-ng-chip__check {
	display: none;
	width: 1.25em;
	height: 1.25em;
	place-items: center;
	font-size: 0.8em;
	font-weight: 800;
	color: #ffffff;
	background: var(--dr-color-red);
	border-radius: 50%;
}

/* ON 状態 (aria-pressed="true"): 赤枠 + チェック表示 */
.dr-root .dr-ng-chip[aria-pressed="true"] {
	border-color: var(--dr-color-red);
	background: rgba(217, 71, 43, 0.07);
	color: var(--dr-color-red-deep);
	box-shadow: 0 4px 10px rgba(217, 71, 43, 0.12);
}

.dr-root .dr-ng-chip[aria-pressed="true"] .dr-ng-chip__check {
	display: inline-grid;
}

.dr-root .dr-ng-status {
	text-align: center;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
	margin: 18px 0 0;
}

.dr-root .dr-ng-actions {
	display: flex;
	justify-content: center;
	margin-top: 12px;
}

.dr-root .dr-ng-reset {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: transparent;
	border: 1px solid var(--dr-color-border);
	border-radius: var(--dr-radius-pill);
	padding: 0.5em 1.2em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.dr-root .dr-ng-reset:hover,
.dr-root .dr-ng-reset:focus-visible {
	color: var(--dr-color-red-deep);
	border-color: var(--dr-color-red);
	background: rgba(217, 71, 43, 0.05);
}

.dr-root .dr-ng-panel__note {
	text-align: center;
	font-size: 0.76rem;
	color: var(--dr-color-text-sub);
	margin: 16px 0 0;
}

/* =========================================================
   4. 1週間まとめ買い (4カテゴリ + 買い物のコツ メモ)
   ========================================================= */
/* NG食材ON時の注記 (NG日をスキップ / 〇日分です) を控えめに表示 */
.dr-root .dr-weekly-note {
	margin: 12px auto 0;
	max-width: 38em;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--dr-color-red-deep);
	background: rgba(217, 71, 43, 0.06);
	border: 1px solid rgba(217, 71, 43, 0.18);
	border-radius: var(--dr-radius-pill);
	padding: 0.5em 1.1em;
	text-align: center;
}

.dr-root .dr-weekly-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: clamp(18px, 2.5vw, 30px);
	align-items: start;
}

/* モック準拠: 4 カテゴリ + 買い物のコツを 1 枚の大カードにまとめる */
.dr-root .dr-weekly-layout {
	background: var(--dr-color-card);
	border: 2px dashed rgba(242, 163, 58, 0.45); /* モック準拠の手描き風点線枠 */
	border-radius: calc(var(--dr-radius-card) + 6px);
	padding: clamp(14px, 2vw, 24px); /* モック準拠で密度を上げる */
	box-shadow: var(--dr-shadow-soft);
}

/* 右カラム: 買い物のコツ メモ + LINE共有ブロックの縦積みラッパ */
.dr-root .dr-weekly-side {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.8vw, 20px);
	min-width: 0;
}

@media (max-width: 1100px) {
	.dr-root .dr-weekly-layout {
		grid-template-columns: 1fr;
	}

	.dr-root .dr-weekly-side {
		max-width: 480px;
		width: 100%;
		margin-inline: auto;
	}
}

.dr-root .dr-weekly-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 22px);
}

@media (max-width: 720px) {
	.dr-root .dr-weekly-grid {
		grid-template-columns: 1fr;
	}
}

.dr-root .dr-weekly-cat {
	background: #ffffff;
	border: 1.5px solid #f3e3c2;
	border-radius: var(--dr-radius-card);
	padding: 16px 14px;
	box-shadow: none;
}

.dr-root .dr-weekly-cat__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	color: var(--dr-color-red-deep);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px dashed var(--dr-color-border); /* 手描き風点線罫 */
}

.dr-root .dr-weekly-cat__icon {
	font-size: 1.3rem;
	line-height: 1;
}

.dr-root .dr-weekly-cat__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dr-root .dr-weekly-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--dr-color-ivory);
	border: 1px solid var(--dr-color-border);
	border-radius: var(--dr-radius-sm);
	padding: 9px 12px;
	transition: opacity 0.2s ease;
}

.dr-root .dr-weekly-item__name {
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--dr-color-text);
}

/* 「ほか○件」行 (表示は上位 5〜6 件、全件は LINE/コピーに含む) */
.dr-root .dr-weekly-item--more {
	border-style: dashed;
	background: transparent;
	text-align: center;
}

.dr-root .dr-weekly-item--more .dr-weekly-item__name {
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
}

.dr-root .dr-weekly-item__hint {
	font-size: 0.74rem;
	color: var(--dr-color-text-sub);
}

/* NG食材を含む買い物項目 (JS が .has-ng を付与) */
.dr-root .dr-weekly-item.has-ng {
	opacity: 0.55;
	border-style: dashed;
	border-color: var(--dr-color-orange);
}

.dr-root .dr-weekly-item.has-ng .dr-weekly-item__name {
	text-decoration: line-through;
	text-decoration-color: var(--dr-color-red);
	text-decoration-thickness: 2px;
}

/* ---- 買い物のコツ (メモ風カード) ----
   方眼ノート風の背景 + 上部にマスキングテープ風の飾り + 少し傾き */
.dr-root .dr-weekly-memo {
	position: relative;
	background:
		repeating-linear-gradient(
			transparent,
			transparent 27px,
			rgba(239, 138, 60, 0.16) 27px,
			rgba(239, 138, 60, 0.16) 28px
		),
		#fffef9;
	border: 1.5px solid var(--dr-color-border);
	border-radius: var(--dr-radius-sm);
	padding: 30px 22px 20px;
	box-shadow: var(--dr-shadow-soft);
	transform: rotate(0.8deg); /* メモを貼った感 */
}

/* マスキングテープ風 */
.dr-root .dr-weekly-memo::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	width: 96px;
	height: 22px;
	background: rgba(239, 138, 60, 0.38);
	border-left: 1px dashed rgba(255, 255, 255, 0.7);
	border-right: 1px dashed rgba(255, 255, 255, 0.7);
	border-radius: 2px;
}

.dr-root .dr-weekly-memo__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 1rem;
	color: var(--dr-color-red-deep);
	margin: 0 0 12px;
}

.dr-root .dr-weekly-memo__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dr-root .dr-weekly-memo__list li {
	position: relative;
	padding-left: 1.3em;
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--dr-color-text);
}

.dr-root .dr-weekly-memo__list li::before {
	content: "✿";
	position: absolute;
	left: 0;
	color: var(--dr-color-orange);
	font-size: 0.85em;
}

.dr-root .dr-weekly-memo__note {
	font-size: 0.74rem;
	color: var(--dr-color-text-sub);
	margin: 14px 0 0;
	padding-top: 10px;
	border-top: 1px dashed var(--dr-color-border);
}

/* =========================================================
   5-b. 買い物メモの調整 UI (日数/人数/量/朝昼夕) + 栄養目安
   ========================================================= */

/* 選択サマリ (見出し下に「3日分・2人分・普通・夕の買い物リスト」) */
.dr-root .dr-weekly-summary {
	margin: 10px 0 0;
	font-size: 0.92rem;
	font-weight: 800;
	color: var(--dr-color-red-deep);
}
.dr-root .dr-weekly-summary:empty {
	display: none;
}

/* 調整カード (手描き点線の紙カード風) */
.dr-root .dr-shop-prefs {
	margin: 20px 0 26px;
	background: var(--dr-color-card);
	border: 2px dashed rgba(242, 163, 58, 0.5);
	border-radius: calc(var(--dr-radius-card) + 4px);
	padding: clamp(16px, 2.4vw, 24px);
	box-shadow: var(--dr-shadow-soft);
}
.dr-root .dr-shop-prefs__title {
	margin: 0 0 4px;
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--dr-color-text);
}
.dr-root .dr-shop-prefs__lead {
	margin: 0 0 16px;
	font-size: 0.82rem;
	color: var(--dr-color-text-sub);
	line-height: 1.6;
}
.dr-root .dr-shop-prefs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 20px;
}
.dr-root .dr-shop-prefs__field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}
.dr-root .dr-shop-prefs__label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
}
.dr-root .dr-shop-prefs__select {
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--dr-color-text);
	background: var(--dr-color-ivory);
	border: 2px solid var(--dr-color-border);
	border-radius: var(--dr-radius-pill);
	padding: 0.5em 0.9em;
	cursor: pointer;
}
.dr-root .dr-shop-prefs__select:focus-visible {
	outline: 2px solid var(--dr-color-orange);
	outline-offset: 1px;
}

/* セグメントボタン (量 / 朝昼夕) */
.dr-root .dr-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.dr-root .dr-seg__btn {
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--dr-color-text);
	background: var(--dr-color-ivory);
	border: 2px solid var(--dr-color-border);
	border-radius: var(--dr-radius-pill);
	padding: 0.45em 1.05em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.dr-root .dr-seg--meal .dr-seg__btn {
	min-width: 2.8em;
	text-align: center;
}
.dr-root .dr-seg__btn:hover,
.dr-root .dr-seg__btn:focus-visible {
	border-color: var(--dr-color-orange);
	transform: translateY(-1px);
}
.dr-root .dr-seg__btn[aria-pressed="true"] {
	color: #ffffff;
	background: linear-gradient(120deg, var(--dr-color-red), var(--dr-color-orange));
	border-color: var(--dr-color-red);
	box-shadow: 0 4px 10px rgba(217, 71, 43, 0.2);
}

/* 栄養バランス / カロリー目安カード */
.dr-root .dr-nutri {
	background: var(--dr-color-card);
	border: 1.5px solid var(--dr-color-border);
	border-radius: var(--dr-radius-card);
	padding: 18px 16px;
	box-shadow: var(--dr-shadow-soft);
	margin-bottom: 16px;
}
.dr-root .dr-nutri__title {
	margin: 0 0 12px;
	font-size: 0.98rem;
	font-weight: 800;
	color: var(--dr-color-text);
}
.dr-root .dr-nutri__cal {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--dr-color-border);
}
.dr-root .dr-nutri__cal-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}
.dr-root .dr-nutri__cal-label {
	font-size: 0.78rem;
	color: var(--dr-color-text-sub);
}
.dr-root .dr-nutri__cal-val {
	font-size: 0.98rem;
	font-weight: 800;
	color: var(--dr-color-red-deep);
	white-space: nowrap;
}
.dr-root .dr-nutri__bars {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dr-root .dr-nutri-row {
	display: grid;
	grid-template-columns: 5.5em 1fr 4.5em;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--dr-color-text);
}
.dr-root .dr-nutri-row__label {
	white-space: nowrap;
}
.dr-root .dr-nutri-row__val {
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
	text-align: right;
}
.dr-root .dr-nutri-bar {
	display: flex;
	gap: 3px;
	min-width: 0;
}
.dr-root .dr-nutri-seg {
	flex: 1 1 0;
	min-width: 0;
	height: 12px;
	border-radius: 3px;
	background: rgba(242, 163, 58, 0.15);
	border: 1px solid rgba(242, 163, 58, 0.28);
}
.dr-root .dr-nutri-seg.is-on {
	background: linear-gradient(120deg, var(--dr-color-red), var(--dr-color-orange));
	border-color: transparent;
}
.dr-root .dr-nutri__fiber {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--dr-color-border);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--dr-color-text);
}
.dr-root .dr-nutri__msg {
	margin: 8px 0 0;
	font-size: 0.78rem;
	color: var(--dr-color-text-sub);
	line-height: 1.6;
}
.dr-root .dr-nutri__msg:empty {
	display: none;
}

/* SP: 調整UIは1列に */
@media (max-width: 600px) {
	.dr-root .dr-shop-prefs__grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   5-c. 使い切りたい食材 (.dr-useup) + 家にあるもの (.dr-home)
   ---------------------------------------------------------
   NG (赤) の逆で、前向きな緑〜クリーム系。「使う食材」を選ぶ UI。
   ========================================================= */

/* 今日のレシピ付近の優先メモ */
.dr-root .dr-useup-note {
	margin: 12px 0 0;
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.6;
	color: #3d7a2e;
	background: rgba(108, 174, 92, 0.12);
	border: 1px solid rgba(108, 174, 92, 0.3);
	border-radius: var(--dr-radius-sm);
	padding: 0.55em 1.1em;
}
.dr-root .dr-useup-note:empty {
	display: none;
}

/* 調整カード (手描き点線・緑) */
.dr-root .dr-useup {
	margin: 0 0 26px;
}
/* 今日のレシピ付近に置くとき: 上下の余白を少し詰める */
.dr-root .dr-useup--today {
	margin: 6px 0 18px;
}
.dr-root .dr-useup {
	background: var(--dr-color-card);
	border: 2px dashed rgba(108, 174, 92, 0.5);
	border-radius: calc(var(--dr-radius-card) + 4px);
	padding: clamp(16px, 2.4vw, 24px);
	box-shadow: var(--dr-shadow-soft);
}
.dr-root .dr-useup__title {
	margin: 0 0 4px;
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--dr-color-text);
}
.dr-root .dr-useup__lead {
	margin: 0 0 14px;
	font-size: 0.82rem;
	color: var(--dr-color-text-sub);
	line-height: 1.6;
}
.dr-root .dr-useup__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.dr-root .dr-useup__chip {
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--dr-color-text);
	background: var(--dr-color-ivory);
	border: 2px solid var(--dr-color-border);
	border-radius: var(--dr-radius-pill);
	padding: 0.4em 0.9em;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.dr-root .dr-useup__chip:hover,
.dr-root .dr-useup__chip:focus-visible {
	border-color: #6cae5c;
	transform: translateY(-1px);
}
.dr-root .dr-useup__chip[aria-pressed="true"] {
	color: #ffffff;
	background: linear-gradient(120deg, #6cae5c, #9ccb5a);
	border-color: #5a9b4c;
	box-shadow: 0 4px 10px rgba(108, 174, 92, 0.25);
}
.dr-root .dr-useup__inputlabel {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--dr-color-text-sub);
	margin-bottom: 6px;
}
.dr-root .dr-useup__input {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--dr-color-text);
	background: var(--dr-color-ivory);
	border: 2px solid var(--dr-color-border);
	border-radius: var(--dr-radius-sm);
	padding: 0.5em 0.8em;
}
.dr-root .dr-useup__input:focus-visible {
	outline: 2px solid #6cae5c;
	outline-offset: 1px;
}
.dr-root .dr-useup__status {
	margin: 10px 0 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: #3d7a2e;
}

/* 家にあるもの・先に使うもの (買い物レイアウト上部に全幅) */
.dr-root .dr-home {
	grid-column: 1 / -1;
	background: rgba(108, 174, 92, 0.10);
	border: 1px dashed rgba(108, 174, 92, 0.45);
	border-radius: var(--dr-radius-sm);
	padding: 14px 16px;
	margin-bottom: 4px;
}
.dr-root .dr-home__title {
	margin: 0 0 8px;
	font-size: 0.92rem;
	font-weight: 800;
	color: #3d7a2e;
}
.dr-root .dr-home__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
}
.dr-root .dr-home-item {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--dr-color-text);
	background: var(--dr-color-card);
	border: 1px solid rgba(108, 174, 92, 0.4);
	border-radius: var(--dr-radius-pill);
	padding: 0.3em 0.85em;
}
.dr-root .dr-home-item::before {
	content: "✓ ";
	color: #6cae5c;
	font-weight: 800;
}
.dr-root .dr-home__note {
	margin: 10px 0 0;
	font-size: 0.76rem;
	color: var(--dr-color-text-sub);
}

/* ---- 調味料・常備品 (家にある前提。買い物リストから別枠に分離) ---- */
.dr-root .dr-pantry-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 10px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--dr-color-text);
	cursor: pointer;
}
.dr-root .dr-pantry-toggle__input {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	accent-color: #c98a3a;
	cursor: pointer;
}
.dr-root .dr-pantry {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--dr-color-text-sub);
	background: rgba(201, 138, 58, 0.08);
	border: 1px dashed rgba(201, 138, 58, 0.45);
	border-radius: var(--dr-radius-sm);
	padding: 10px 12px;
}
.dr-root .dr-pantry__label {
	font-weight: 800;
	color: #a9712a;
}
.dr-root .dr-pantry__items {
	color: var(--dr-color-text);
}
/* トグルON時に買うものとして表示する調味料リスト (OFF時は空で非表示同然) */
.dr-root .dr-weekly-cat__list--pantry:empty {
	margin: 0;
}

/* ---- 買い物リストの LINE共有 / コピー (メモカードの下、控えめに) ---- */
.dr-root .dr-share {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 4px 4px 0;
	box-shadow: none;
	text-align: center;
}

.dr-root .dr-share__line {
	width: 100%;
	font-size: 0.85rem;
	padding: 0.75em 1.2em;
	box-shadow: 0 4px 12px rgba(232, 84, 63, 0.18);
}

/* LINEらしさを出す小バッジ (LINE ブランドグリーンの文字) */
.dr-root .dr-share__line-badge {
	display: inline-grid;
	place-items: center;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1;
	color: #06c755;
	background: #ffffff;
	border-radius: 6px;
	padding: 0.35em 0.5em;
}

.dr-root .dr-share__copy {
	width: 100%;
	font-size: 0.8rem;
	padding: 0.65em 1.2em;
}

.dr-root .dr-share__note {
	font-size: 0.76rem;
	color: var(--dr-color-text-sub);
	line-height: 1.7;
	margin: 2px 0 0;
}

/* PC で LINE が開かない時のコピー導線の補足 (控えめ) */
.dr-root .dr-share__note--pc {
	font-size: 0.72rem;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--dr-color-border);
}

.dr-root .dr-share__status {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--dr-color-red-deep);
	margin: 0;
}

/* =========================================================
   5. 脱力レシピのポイント 4カード
   ========================================================= */
.dr-root .dr-point-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 22px);
}

@media (max-width: 900px) {
	.dr-root .dr-point-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.dr-root .dr-point-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-inline: auto;
	}
}

.dr-root .dr-point-card {
	background: var(--dr-color-card);
	border: 1.5px solid var(--dr-color-border);
	border-radius: var(--dr-radius-card);
	padding: 18px 14px;
	text-align: center;
	box-shadow: var(--dr-shadow-soft);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dr-root .dr-point-card:hover {
	box-shadow: var(--dr-shadow-hover);
	transform: translateY(-2px);
}

/* モック準拠: アイコンを角丸四角の枠に収める */
.dr-root .dr-point-card__icon {
	display: inline-grid;
	place-items: center;
	width: 2.7em;
	height: 2.7em;
	font-size: 1.55rem;
	line-height: 1;
	background: var(--dr-color-orange-soft);
	border: 1.5px solid var(--dr-color-border);
	border-radius: 14px;
}

.dr-root .dr-point-card__title {
	font-size: 0.95rem;
	color: var(--dr-color-red-deep);
	margin: 0.6em 0 0.4em;
}

.dr-root .dr-point-card__desc {
	font-size: 0.78rem;
	color: var(--dr-color-text-sub);
	line-height: 1.7;
	margin: 0;
}

/* =========================================================
   6. 下部の応援バナー (中央コピー + 左右キャラ吹き出し)
   ========================================================= */
.dr-root .dr-cheer-section {
	padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 112px);
}

.dr-root .dr-cheer {
	position: relative;
	display: grid;
	/* モック準拠: キャラ列を広げてキャラを大きく見せる */
	grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) minmax(150px, 230px);
	gap: clamp(12px, 2vw, 26px);
	align-items: center;
	/* モック準拠: 明るいクリーム背景 + 濃い文字でやわらかい締め感に */
	background:
		radial-gradient(680px 280px at 50% 120%, rgba(242, 163, 58, 0.18), transparent 70%),
		linear-gradient(160deg, #fff7e4 0%, #ffeccd 100%);
	border: 2px solid #f3d9a6;
	border-radius: calc(var(--dr-radius-card) + 8px);
	padding: clamp(30px, 4.5vw, 48px) clamp(20px, 4vw, 44px);
	color: var(--dr-color-text);
	box-shadow: 0 12px 30px rgba(181, 58, 34, 0.10);
	overflow: hidden;
}

/* 手描き風の点線内枠 */
.dr-root .dr-cheer::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1.5px dashed rgba(242, 163, 58, 0.55);
	border-radius: var(--dr-radius-card);
	pointer-events: none;
}

.dr-root .dr-cheer__center {
	text-align: center;
	min-width: 0;
}

.dr-root .dr-cheer__title {
	font-size: clamp(1.45rem, 3vw, 2rem);
	line-height: 1.55;
	color: var(--dr-color-text);
	margin: 0;
}

/* 「応援します。」を赤強調 (モック準拠) */
.dr-root .dr-cheer__title em {
	font-style: normal;
	color: var(--dr-color-red-deep);
}

/* 左右の吹き出し + キャラ (将来 <img> 差し替え可能な .dr-chara__emoji 構造) */
.dr-root .dr-cheer__side {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	z-index: 1;
}

.dr-root .dr-cheer__bubble {
	position: relative;
	display: inline-block;
	background: #fffdf7;
	border-radius: 14px;
	padding: 0.6em 0.95em;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.55;
	color: var(--dr-color-red-deep);
	text-align: center;
	box-shadow: 0 6px 14px rgba(74, 30, 16, 0.18);
}

.dr-root .dr-cheer__bubble::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: #fffdf7;
}

.dr-root .dr-cheer__face {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	background: rgba(255, 253, 247, 0.92);
	border: 2px solid rgba(255, 253, 247, 0.8);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 6px 14px rgba(74, 30, 16, 0.18);
}

.dr-root .dr-cheer__face .dr-chara__emoji {
	font-size: 2.2rem;
}

/* 応援バナー側の正式立ち絵モード (.has-image): 白円をやめて
   立ち姿のままバナー上に立たせる (モック準拠でひと回り大きく) */
.dr-root .dr-cheer__face.has-image {
	width: clamp(110px, 13vw, 190px);
	height: auto;
	aspect-ratio: 3 / 4;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.dr-root .dr-cheer__face.has-image .dr-chara__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 8px 14px rgba(74, 30, 16, 0.3));
}

@media (max-width: 760px) {
	.dr-root .dr-cheer {
		grid-template-columns: 1fr;
	}

	.dr-root .dr-cheer__center {
		order: 1;
	}

	/* SP では吹き出し+キャラを中央コピーの下に横並びで */
	.dr-root .dr-cheer__side--left  { order: 2; }
	.dr-root .dr-cheer__side--right { order: 3; }
}

/* =========================================================
   7-b. 画像主体 応援バナー (.dr-cheer--visual)
   ---------------------------------------------------------
   support-visual-pc.png (2172x724) / support-visual-sp.png (1122x1402) に
   左右キャラ・吹き出し・キラキラ・ハート・手描き装飾・紙テープ風背景・
   スプーン/フォークを描き込み、HTML 側は中央コピー (がんばらなくていい
   自炊、応援します。) だけを紙の上へ重ねる。画像が 2 枚揃ったときだけ
   PHP が .dr-cheer--visual を付与し、旧 .dr-cheer__side は出力しない
   (重複表示しない)。base .dr-cheer の grid / padding / 点線内枠を上書きし、
   画像 + overlay の構成にする。border-radius / 影 / overflow:hidden は
   base から継承し、角丸カードとして見せる。
   ========================================================= */
.dr-root .dr-cheer--visual {
	display: block;
	padding: 0;
	/* position: relative / overflow: hidden / border / radius / shadow は
	   base .dr-cheer から継承。background も base のクリームを読込前下地に流用 */
}

/* 画像に紙テープ風の枠が含まれるため、base の点線内枠は出さない */
.dr-root .dr-cheer--visual::before {
	content: none;
}

/* 画像本体: in-flow + width/height 属性で高さを確保し CLS を抑える */
.dr-root .dr-cheer__visual,
.dr-root .dr-cheer__visual-img {
	display: block;
	width: 100%;
	height: auto;
}

/* オーバーレイ層: 紙の上に中央コピーを重ねる。
   画像はクリック透過、コピーだけ pointer-events 復活 (将来リンク化に備え)。 */
.dr-root .dr-cheer__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(14px, 3vw, 40px);
	pointer-events: none;
}

/* SP 専用の改行 (.dr-cheer__sp-break): PC では無効化して 2 行、SP では
   有効化して 3 行にする。<br> は display:none で改行が消え、display:inline で
   復活する。 */
.dr-root .dr-cheer__sp-break {
	display: none;
}

/* 中央コピー (PC): 紙はほぼ画像中央 (≈51%)。紙の中心を基準に絶対配置で
   置き、フォントを少し下げて 1 行目「がんばらなくていい自炊、」が紙枠内に
   左右の余白を持って収まるようにする。スプーン/フォーク装飾 (中央やや下)
   を避けて少し上寄り。em の赤強調 (.dr-cheer__title em) は base のまま効く。
   前回の translate(12px,-9%) / width:min(42%,540px) の小手先調整は廃止。 */
.dr-root .dr-cheer--visual .dr-cheer__title {
	pointer-events: auto;
	position: absolute;
	left: 51%;
	top: 41%;
	width: min(42%, 470px);
	transform: translate(-50%, -50%);
	margin: 0;
	text-align: center;
	font-size: clamp(1.1rem, 2.15vw, 1.8rem);
	line-height: 1.55;
}

/* ---- 画像主体バナー: SP (縦長画像 support-visual-sp.png) ----
   2 行のままでは 1 行目が紙幅に入らず左右キャラへかかるため、SP だけ
   sp-break を表示して 3 行 (がんばらなくていい / 自炊、/ 応援します。) に。
   紙の中心に絶対配置し、幅を絞り・文字を少し落として左右キャラに
   かからないようにする。 */
@media (max-width: 700px) {
	.dr-root .dr-cheer__sp-break {
		display: inline;
	}

	.dr-root .dr-cheer--visual .dr-cheer__title {
		left: 50%;
		top: 47%;
		width: min(58%, 220px);
		transform: translate(-50%, -50%);
		font-size: clamp(1rem, 4.2vw, 1.3rem);
		line-height: 1.5;
		letter-spacing: 0.01em;
	}
}