/* ============================================================
 * Sound Collective — Online Subscription ページ 専用CSS
 * Figma "/online-subscription"  PC: 1803:20919  SP: 1332:11729
 * デザイントークンは sc-design-tokens.css の :root を利用。クラスは sc-osub-* で衝突回避
 * (他ファイルに存在しないユニーク接頭辞)。
 * ============================================================ */

.sc-osub {
	--sc-osub-margin: 16px;      /* Main content 左右パディング */
	background: var(--sc-bg);
	color: var(--sc-fg);
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-medium);
	line-height: var(--sc-lh);
}
.sc-osub *, .sc-osub *::before, .sc-osub *::after { box-sizing: border-box; }
.sc-osub h1, .sc-osub h2, .sc-osub h3, .sc-osub p { margin: 0; }
.sc-osub img { max-width: 100%; display: block; }

/* ============================== Hero (Title 1803:21203) ============================== */
.sc-osub-hero {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
	min-height: 320px; padding: 96px 16px 48px;
}
.sc-osub-hero__bg {
	position: absolute; inset: -40px 0; z-index: 0;
	background: #4d4d4d center/cover no-repeat;
	filter: blur(4px); mix-blend-mode: lighten; opacity: .3; pointer-events: none;
}
.sc-osub-hero__title {
	position: relative; z-index: 1;
	max-width: 900px; text-align: center;
	font-size: 40px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-white);
}
.sc-osub-hero__subtitle {
	position: relative; z-index: 1;
	max-width: 720px; text-align: center;
	font-size: 18px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-white);
}

/* ============================== Main content / Plan grid (1803:26657 / 1803:32447) ============================== */
.sc-osub-main {
	display: flex; justify-content: center;
	background: var(--sc-bg);
	padding: 48px var(--sc-osub-margin);
}
.sc-osub-plans {
	display: flex; align-items: stretch; justify-content: center; gap: 16px;
	width: 100%; max-width: 1280px; margin-inline: auto;
	padding: 32px 16px;
}

/* ============================== Subscription card (CardSubscription 1805:13900) ============================== */
.sc-osub-card {
	position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
	display: flex; flex-direction: column; align-items: center;
	background: var(--sc-bg-bright);
	border: 1px solid var(--sc-border-dim); border-radius: var(--sc-radius-card);
}
/* Full Site Basic はハイライト枠 + 下部の赤いグロー
 * #238: 実装が radial-gradient の自前近似だったため赤味が強すぎた。Figma 1803:32448 の
 * グローレイヤー(I1803:32448;1805:13924)は「画像レイヤー + mix-blend-mode: lighten」で、
 * 中身は #F04B50 の波形 2 本に強いガウシアンブラー(stdDeviation 62 / 40)+ ノイズを掛けた
 * ベクターグループ。Figma MCP から書き出した実アセットを assets/images/sc-osub-glow.svg
 * としてテーマに取り込み(外部ホスト参照はしない = guardrails §1)、寸法も Figma 実測値に合わせた。
 *
 * 寸法(Figma 実測 / カード幅 300px 基準):
 *   グローレイヤー枠 … bottom:-72.5px / left:-94.28% / right:-39.16% / height:201px
 *   枠内の画像       … inset:-61.69% -4.26% -49.19% -4.26%(枠より大きく描いて中央寄せ)
 * 画像側の inset を background-position/size に変換(枠高さ H に依存しない % 表現):
 *   size-y   = (1 + .6169 + .4919) = 210.88%     size-x = (1 + .0426*2) = 108.52%
 *   pos-y    = -.6169H / (H - 2.1088H) = 55.64%  pos-x  = 左右対称なので 50%
 * → SP で枠の height を変えても比率が崩れない。
 *
 * はみ出しは .sc-osub-card の overflow:hidden がクリップする(Figma 側もカードルートが
 * overflow-clip)。ページに横スクロールは出ない。 */
.sc-osub-card--featured { border-color: #9a9a9a; }
.sc-osub-card--featured::after {
	content: ""; position: absolute;
	left: -94.28%; right: -39.16%; bottom: -72.5px; height: 201px;
	z-index: 0; pointer-events: none;
	background: url("../images/sc-osub-glow.svg") 50% 55.64% / 108.52% 210.88% no-repeat;
	mix-blend-mode: lighten;
	/* 🔴 #238 追い FB(2026-07-30): 「境目がプツッと切れて見える」。
	 * `mix-blend-mode` も SVG 参照も正しかったが、**カードの `overflow: hidden` が
	 * グローを直線でクリップしていた**のが見た目の硬さの原因(Figma は枠外へはみ出す配置)。
	 * カードの overflow は角丸クリップに必要なので外さず、**グロー自身を端に向けて
	 * フェードさせる**(mask)ことで切り口を消す。
	 * ⚠️ `mask-image` は blend/合成の前段で効くので、lighten の見た目は保たれる。 */
	-webkit-mask-image: radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%);
	mask-image: radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%);
}

/* サムネイル(上部120px。下端に向かって bg-bright にフェード) */
.sc-osub-card__thumb {
	position: relative; width: 100%; height: 120px; flex: 0 0 120px;
	background: #4d4d4d center/cover no-repeat;
}
.sc-osub-card__thumb::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(1deg, #272727 0.93%, rgba(39, 39, 39, 0.00) 99.07%);
}

/* 右上 "Online" チップは #38(Figma 1803:20919)で削除。描画元(sc-online-subscription.php)から span を撤去済み。 */

/* 本文領域(Footer Buttons 1805:13903) */
.sc-osub-card__body {
	position: relative; z-index: 1;
	flex: 1 0 auto; width: 100%;
	display: flex; flex-direction: column; gap: 16px; align-items: stretch;
	padding: 16px 20px;
}
.sc-osub-card__info { flex: 1 0 auto; display: flex; flex-direction: column; gap: 4px; }

.sc-osub-card__tag {
	align-self: flex-start;
	display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 54px;
	background: var(--sc-bg-hover-strong); color: var(--sc-fg);
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.4;
}
.sc-osub-card__title { font-size: 24px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }

/* 統計(Courses / Hours / Instructors) */
.sc-osub-card__stats {
	display: flex; gap: 16px; align-items: flex-start; width: 100%;
	padding-bottom: 8px; border-bottom: 1px solid var(--sc-border);
}
.sc-osub-card__stat { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.sc-osub-card__stat-label { font-size: 12px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary); }
.sc-osub-card__stat-value { font-size: 16px; font-weight: var(--sc-fw-bold); line-height: 1.4; color: var(--sc-fg); }

.sc-osub-card__desc { font-size: 16px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg); }
.sc-osub-card__desc strong { font-weight: var(--sc-fw-bold); }

.sc-osub-card__pricewrap { display: flex; flex-direction: column; gap: 4px; }
.sc-osub-card__price { font-size: 20px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-osub-card__note { font-size: 12px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg-secondary); }

/* Add to Cart ボタン */
.sc-osub-card__btn {
	position: relative; z-index: 2; align-self: center;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 36px; padding: 7px 24px; width: max-content;
	border-radius: var(--sc-radius-pill); text-decoration: none; cursor: pointer;
	font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
	background: var(--sc-primary); color: var(--sc-white); border: 0;
	transition: filter .15s ease, background-color .15s ease, color .15s ease;
}
.sc-osub-card__btn:hover { filter: brightness(1.08); color: var(--sc-white); }
.sc-osub-card__btn i { font-size: 16px; }
/* Full Site Basic は白ボタン + 濃色文字 */
.sc-osub-card__btn--invert { background: var(--sc-white); color: var(--sc-btn-filled-text); }
.sc-osub-card__btn--invert:hover { background: #fff; color: var(--sc-btn-filled-text); }

/* ============================================================
 * SP (Figma 1332:11729) — max-width:1024px
 * ============================================================ */
@media (max-width: 1024px) {
	.sc-osub { overflow-x: clip; }

	.sc-osub-hero { padding: 64px 16px 40px; min-height: 240px; }
	.sc-osub-hero__title { font-size: 32px; }
	.sc-osub-hero__subtitle { font-size: 16px; }

	.sc-osub-main { padding: 32px 16px; }
	.sc-osub-plans { flex-direction: column; align-items: stretch; padding: 16px 0; gap: 16px; }
	.sc-osub-card { flex: 1 1 auto; }
	/* #238: グローの SP 上書き(bottom:-32px / height:160px)を撤去。Figma SP の同カード
	 * (1805:21003 の Group 2)も PC と同じ bottom:-72.5px / height:201px / -94.28% / -39.16%
	 * なので、PC 側の指定をそのまま使う(左右は % なので SP のカード幅 361px にも追従する)。 */
}