/* =========================================================
   期間限定・モニタープランカード（jjpm-special-card）＋ モーダル
   施術MV直下に表示する、通常サムネイルとは異なる専用カード。
   スクエア画像（上）＋テキスト（下）。PC 2列 / SP 1列。
   テーマのデザイントークンを var(..., fallback) で利用。
   ========================================================= */

/* ---- セクション（上下余白＋タイトル） ---- */
.jjpm-special-section {
	padding-block: var(--section-py, var(--space-8-xl, 6.4rem));
}

/* 見出しの見た目は c-heading-05 コンポーネントに委ねる。ここは配置のみ。 */
.jjpm-special-section__title {
	max-width: var(--width-inner, 120rem);
	margin-inline: auto;
	padding-inline: var(--container-padding, 1.6rem);
}

.jjpm-special-tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	max-width: var(--layout-md);
	margin: var(--space-4-xl) auto var(--space-3-xl);
	padding-inline: var(--container-padding);
	border-bottom: 1px solid var(--color-border-light);
}

.jjpm-special-tab {
	--jjpm-tab-color: var(--color-primary-dark);

	min-width: 0;
	min-height: var(--touch-target-min);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	color: var(--color-text-light);
	background: transparent;
	border: 0;
	border-bottom: var(--space-4-xs) solid transparent;
	font: inherit;
	font-weight: var(--font-weight-bold);
	cursor: pointer;
}

.jjpm-special-tab[aria-selected="true"] {
	color: var(--jjpm-tab-color);
	background: var(--color-primary-lightest);
	border-bottom-color: var(--jjpm-tab-color);
}

.jjpm-special-tab[data-jjpm-offer-tab="monitor"][aria-selected="true"] {
	--jjpm-tab-color: var(--color-badge-monitor);
}

.jjpm-special-tab:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

.jjpm-special-tab__count {
	min-width: var(--space-2-xl);
	padding: var(--space-4-xs) var(--space-3-xs);
	color: var(--color-white);
	background: var(--jjpm-tab-color);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-4-xs);
	line-height: var(--line-height-none);
}

.jjpm-special-panel[hidden] {
	display: none;
}

/* ---- カードグリッド（幅に応じて 3 / 2 / 1 列。1枚時もカード上限を維持） ---- */
.jjpm-special-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--card-lg, 30rem), 100%), var(--card-xl, 38rem)));
	justify-content: center;
	gap: var(--space-2-xl, 2rem);
	max-width: var(--width-inner, 120rem);
	margin: 0 auto;
	padding-inline: var(--container-padding, 1.6rem);
}

/* ---- カード本体（ボタン） ---- */
.jjpm-special-card {
	--jjpm-offer-color: var(--color-primary);

	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--card-xl, 38rem);
	padding: 0;
	border: 1px solid var(--jjpm-offer-color);
	border-radius: var(--radius-lg, 1.2rem);
	background: var(--color-bg, #fff);
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: opacity var(--transition-fast);
}

.jjpm-special-card--monitor,
.jjpm-special-modal--monitor {
	--jjpm-offer-color: var(--color-badge-monitor);
}

.jjpm-special-card--monitor {
	color: inherit;
	text-decoration: none;
}

.jjpm-special-card:hover {
	opacity: 0.9;
}

.jjpm-special-card:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* ---- サムネイル（スクエア） ---- */
.jjpm-special-card__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f3efe9;
}

.jjpm-special-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 画像なし時のプレースホルダー */
.jjpm-special-card__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #faf6f0 0%, #f1e7da 100%);
}

.jjpm-special-card__thumb--placeholder::before {
	content: "local_offer";
	font-family: "Material Icons";
	font-size: 6.4rem;
	color: var(--color-primary, #c8a47a);
	opacity: 0.5;
}

/* 「期間限定」コーナーラベル */
.jjpm-special-card__label {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 0.4rem 1.2rem;
	font-size: var(--font-size-2-xs, 1.2rem);
	font-weight: var(--font-weight-bold, 700);
	letter-spacing: 0.05em;
	color: #fff;
	background: var(--jjpm-offer-color);
	border-bottom-right-radius: var(--radius-md, 0.8rem);
}

/* ---- カードテキスト（下部） ---- */
.jjpm-special-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2-xs, 0.6rem);
	flex: 1 1 auto;
	padding: var(--space-xl, 1.6rem) var(--space-2-xl, 2rem) var(--space-2-xl, 2rem);
}

.jjpm-special-card__title {
	font-size: var(--font-size-lg, 1.6rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-text, #333);
	line-height: var(--line-height-snug, 1.4);
}

.jjpm-special-card__period {
	font-size: var(--font-size-sm, 1.4rem);
	color: var(--jjpm-offer-color);
	font-weight: var(--font-weight-medium, 500);
}

.jjpm-special-card__price {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--jjpm-offer-color);
}

/* モーダルを開くアイコン（カード右下） */
.jjpm-special-card__more {
	margin-top: auto;
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: var(--radius-pill, 999px);
	background: var(--jjpm-offer-color);
	color: #fff;
}

.jjpm-special-card__more .material-icons {
	font-size: 2rem;
}

/* ---- モーダル ---- */
.jjpm-special-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-2-xl, 2rem);
}

.jjpm-special-modal.is-open {
	display: flex;
}

.jjpm-special-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.jjpm-special-modal__container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--width-narrow, 90rem);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--color-bg, #fff);
	border-radius: var(--radius-lg, 1.2rem);
	box-shadow: var(--shadow-xl, 0 2rem 5rem rgba(0, 0, 0, 0.3));
}

.jjpm-special-modal__close {
	position: sticky;
	top: var(--space-md, 1.2rem);
	left: 100%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: var(--space-md, 1.2rem) var(--space-md, 1.2rem) 0 0;
	border: none;
	border-radius: 50%;
	background: var(--color-bg, #fff);
	box-shadow: var(--shadow-md, 0 0.2rem 0.8rem rgba(0, 0, 0, 0.15));
	cursor: pointer;
	color: var(--color-text, #333);
}

.jjpm-special-modal__close:hover {
	opacity: 0.7;
}

.jjpm-special-modal__body {
	padding: 0 var(--space-4-xl, 2.8rem) var(--space-4-xl, 2.8rem);
	margin-top: calc(-4rem - var(--space-md, 1.2rem));
}

/* ファーストビュー: 50vh のサムネイルを中央配置（上下左右マージン + 左右中央寄せ） */
.jjpm-special-modal__img {
	display: block;
	height: 50vh;
	width: auto;
	max-width: calc(100% - var(--space-xl, 1.6rem) * 2);
	object-fit: contain;
	margin: var(--space-xl, 1.6rem) auto;
	border-radius: var(--radius-md, 0.8rem);
}

.jjpm-special-modal__period {
	display: inline-block;
	margin-bottom: var(--space-xl, 1.6rem);
	padding: 0.4rem 1.4rem;
	font-size: var(--font-size-sm, 1.4rem);
	font-weight: var(--font-weight-bold, 700);
	color: #fff;
	background: var(--jjpm-offer-color, var(--color-primary));
	border-radius: var(--radius-pill, 9999px);
}

.jjpm-special-modal__summary {
	display: grid;
	gap: var(--space-md);
	margin: 0 0 var(--space-3-xl);
	padding: var(--space-xl);
	background: var(--color-bg-sub);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-md);
}

.jjpm-special-modal__summary-row {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--space-md);
	align-items: start;
}

.jjpm-special-modal__summary :is(dt, dd) {
	margin: 0;
}

.jjpm-special-modal__summary dt {
	color: var(--color-text-light);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
}

.jjpm-special-modal__summary-price {
	color: var(--jjpm-offer-color);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.jjpm-special-modal__conditions {
	margin: 0;
	padding-inline-start: var(--space-xl);
}

.jjpm-special-modal__content {
	font-size: var(--font-size-lg, 1.6rem);
	line-height: var(--line-height-relaxed, 1.8);
	color: var(--color-text, #333);
}

/* body スクロールロック */
body.jjpm-special-lock {
	overflow: hidden;
}

/* ---- レスポンシブ（列数は auto-fill が自動調整。SP はモーダル余白のみ調整） ---- */
@media (max-width: 767px) {
	.jjpm-special-tabs {
		margin-block: var(--space-3-xl) var(--space-2-xl);
	}

	.jjpm-special-modal__body {
		padding: 0 var(--space-xl, 1.6rem) var(--space-2-xl, 2rem);
	}

	.jjpm-special-modal__summary-row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-3-xs);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jjpm-special-card {
		transition: none;
	}
}