/* ============================================================
   stockpile.css — 備蓄シミュレーター（[okadaya_stockpile]）
   固定ページ本文（.page-body）内に挿入される。prose の後に読み込み、
   .stockpile 配下のリンク色/下線は .stockpile プレフィックス（0,2,0）で
   prose（.page-body a・0,1,1）に勝たせる。

   デザインは現テーマのトークンに合わせる:
     結果パネル背景 = --safety-bg（防災の濃紺）/ 数字・見積りボタン = --hozon
     設問バッジ・日数選択・タグ・リンク = --brand
     大見出し = --font-serif / eyebrow(白背景) = --accent
   画像は CSS の相対パス（背景画像・商品ごとの modifier）で参照する。
   幅広い配置（幅広/全幅ブロック）に置くと本来のカード横並びになる。
   ============================================================ */

.stockpile {
	margin-block: var(--wp--preset--spacing--50);
}

/* --- 設問パネル（白の設問 + 濃紺の結果を1つの角丸に） --- */
.stockpile-panel {
	border: 1px solid var(--line);
	border-radius: 16px; /* reason: パネルの角丸。radius スケール内の意図的な値 */
	overflow: hidden;
}

/* --- 設問（Q1 / Q2 の2カラム） --- */
.stockpile-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--paper);
}
.stockpile-q {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.stockpile-q--days {
	border-left: 1px solid var(--line);
}
.stockpile-q__head {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
}
.stockpile-q__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%; /* reason: バッジの完全な丸。意図的な形状 */
	background: var(--brand);
	color: var(--paper);
	font-family: var(--font-en);
	font-size: var(--text-xs);
	font-weight: 700;
}
.stockpile-q__label {
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--ink);
}
.stockpile-q__desc {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--text-sm);
	color: var(--muted);
}

/* --- 入力（人数 select） --- */
.stockpile-field {
	margin-top: var(--wp--preset--spacing--40);
}
.stockpile-select {
	width: 100%;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	color: var(--ink);
	background: var(--bg-subtle);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	cursor: pointer;
}
.stockpile-select:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* --- 日数（radio ボタン） --- */
.stockpile-days {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap-sm);
	margin-top: var(--wp--preset--spacing--40);
}
.stockpile-days__opt {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--line);
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--ink);
	background: var(--paper);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.stockpile-days__opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.stockpile-days__opt:hover {
	border-color: var(--brand);
	color: var(--brand);
}
.stockpile-days__opt:has(input:checked) {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--paper);
}
.stockpile-days__opt:has(input:focus-visible) {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

/* --- 結果パネル（背景 safety-bg 濃紺） --- */
.stockpile-result {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background: var(--safety-bg);
	color: var(--paper);
}
.stockpile-result__eyebrow {
	font-family: var(--font-en);
	font-size: var(--text-sm);
	letter-spacing: .22em;
	font-weight: 700;
	color: var(--hozon);
}
.stockpile-result__summary {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--text-base);
	color: var(--paper);
}

.stockpile-result__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: var(--wp--preset--spacing--40);
	border: 1px solid var(--line-on-dark);
	border-radius: 8px; /* reason: 内側ボックスの角丸。radius スケール内 */
}
.stockpile-result__cell {
	padding: var(--wp--preset--spacing--40);
}
.stockpile-result__cell + .stockpile-result__cell {
	border-left: 1px solid var(--line-on-dark);
}
.stockpile-result__cap {
	font-size: var(--text-sm);
	color: var(--text-on-dark);
}
.stockpile-result__per {
	font-size: var(--text-xs);
	color: var(--text-on-dark);
	margin-left: .25em;
}
.stockpile-result__figure {
	display: flex;
	align-items: baseline;
	gap: .2em;
	margin-top: var(--wp--preset--spacing--20);
}
.stockpile-result__num {
	font-family: var(--font-en);
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: 1;
	color: var(--hozon);
}
.stockpile-result__unit {
	font-size: var(--text-base);
	color: var(--paper);
}

.stockpile-result__lead {
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--paper);
}
.stockpile-result__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gap-md);
	margin-top: var(--wp--preset--spacing--40);
}
/* 見積りボタン（hozon 塗り）— prose の .page-body a に勝つよう .stockpile で 0,2,0 */
.stockpile .stockpile-result__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background: var(--hozon);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 700;
	border-radius: 4px;
	text-decoration: none;
	transition: transform .2s ease;
}
.stockpile .stockpile-result__cta:hover {
	transform: translateY(-2px);
}
.stockpile .stockpile-result__textlink {
	color: var(--paper);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
}
.stockpile .stockpile-result__textlink:hover {
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* --- 計算式ストリップ --- */
.stockpile-formula {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--bg-subtle);
	border-radius: 8px; /* reason: ストリップの角丸。radius スケール内 */
	font-size: var(--text-sm);
}
.stockpile-formula__label {
	font-weight: 700;
	color: var(--brand);
}
.stockpile-formula__item {
	color: var(--muted);
}

/* --- 注記 --- */
.stockpile-note {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--text-xs);
	line-height: 1.7;
	color: var(--muted);
}

/* --- おすすめ商品 --- */
.stockpile-rec {
	margin-top: var(--wp--preset--spacing--80);
}
.stockpile-rec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap-md);
}
.stockpile-rec__eyebrow {
	font-family: var(--font-en);
	font-size: var(--text-sm);
	letter-spacing: .22em;
	font-weight: 700;
	color: var(--accent);
}
.stockpile-rec__title {
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--ink);
}
.stockpile .stockpile-rec__more {
	color: var(--brand);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
}
.stockpile .stockpile-rec__more:hover {
	text-decoration: underline;
	text-underline-offset: .18em;
}

.stockpile-rec__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--gap-md);
	margin-top: var(--wp--preset--spacing--50);
}

/* --- 商品カード --- */
.stockpile-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 8px; /* reason: カードの角丸。radius スケール内 */
	overflow: hidden;
}
.stockpile-card__img {
	position: relative;
	aspect-ratio: 4 / 3;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.stockpile-card__imglabel {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 2px 8px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	font-size: var(--text-xs);
	color: var(--muted);
}
.stockpile-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	flex: 1;
}
.stockpile-card__tag {
	font-family: var(--font-en);
	font-size: var(--text-xs);
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--brand);
}
.stockpile-card__title {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
}
.stockpile-card__desc {
	font-size: var(--text-sm);
	line-height: 1.7;
	color: var(--muted);
	flex: 1;
}
.stockpile-card__foot {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--line);
}
.stockpile-card__price {
	font-family: var(--font-en);
	font-size: var(--text-sm);
	color: var(--muted);
}
.stockpile-card__price-num {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--ink);
}
.stockpile-card__tax {
	font-size: var(--text-xs);
}
.stockpile .stockpile-card__link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	color: var(--brand);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
}
.stockpile .stockpile-card__link:hover {
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* --- 商品画像（modifier で出し分け。未配置なら bg-subtle の空箱）
   ※ 実ファイル名は商品コード由来で紛らわしい（suibou-2l.jpg は中身が
     500ml、hw9.jpg が 2L）。slug と実物の対応をコメントで明記しておく。 */
.stockpile-card__img--suibou-2l  { background-image: url(../images/hw9.jpg); }       /* 2L×6本 */
.stockpile-card__img--suibou-500 { background-image: url(../images/suibou-2l.jpg); } /* 500ml×24本 */
.stockpile-card__img--cellret-50 { background-image: url(../images/kt28.jpg); }      /* セルレット50回 */
.stockpile-card__img--mylet-100  { background-image: url(../images/kt14.jpg); }      /* マイレットS-100 */
.stockpile-card__img--mylet-500  { background-image: url(../images/kt37.jpg); }      /* マイレットS-500 */

/* --- レスポンシブ --- */
@media (max-width: 700px) {
	.stockpile-form {
		grid-template-columns: 1fr;
	}
	.stockpile-q--days {
		border-left: none;
		border-top: 1px solid var(--line);
	}
	.stockpile-result__grid {
		grid-template-columns: 1fr;
	}
	.stockpile-result__cell + .stockpile-result__cell {
		border-left: none;
		border-top: 1px solid var(--line-on-dark);
	}
}

@media (min-width: 768px) {
	.stockpile-formula {
		justify-content: center;
	}
	.stockpile-note {
		text-align: center;
	}
}