/*
 * sale-banner-maker フロント表示用バナースタイル
 *
 * HTML版試作ツール（index.html v4.2）の「生成バナー用スタイル（sbm-接頭辞で独自設計）」を
 * そのまま移植する。外部CDN・外部ライブラリは使用しない。
 */

.sbm-wrap {
	/* 改修項目15：PCはこれまでどおりmax-width 720pxで現状維持。 */
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	box-sizing: border-box;
}
/* 改修項目15：スマホ表示のバナー幅を画面幅に連動させる（画面幅より少し狭い程度＝
   左右にわずかな余白の、ほぼ全幅）。記事テーマ側の本文コンテナに左右パディングが
   無い場合でも、バナーが画面端へべったり付かないよう最低限の余白を確保する。
   親要素（記事本文コンテナ）の幅を超えて広がることはない（width:100%が上限のため）。 */
@media (max-width: 480px) {
	.sbm-wrap {
		max-width: 100%;
		width: calc(100% - 16px);
		margin-left: auto;
		margin-right: auto;
	}
}
.sbm-wrap *,
.sbm-wrap *::before,
.sbm-wrap *::after {
	box-sizing: border-box;
}
/* 改修項目6・7：デザイン・訴求文はv1.1.0でカード単位になり、訴求文（.sbm-catch）は
   各スライド（.sbm-panel-slide）の中に個別に描画される。フェード表示中は現在アクティブな
   スライドの訴求文だけが見た目上表示される（親.sbm-panel-slideのopacity/visibility制御に従う）。 */
.sbm-catch {
	text-align: center;
	font-weight: 800;
	font-size: 1rem;
	margin: 0 0 8px;
	letter-spacing: .02em;
}
.sbm-stage {
	position: relative;
	width: 100%;
	border-radius: 14px;
	overflow: hidden;
}
.sbm-track {
	position: relative;
	width: 100%;
}
.sbm-panel-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease;
	display: flex;
	flex-direction: column;
}
.sbm-panel-slide.sbm-active {
	position: relative;
	opacity: 1;
	visibility: visible;
}
.sbm-panel-slide-link {
	text-decoration: none;
	display: block;
	flex: 1;
}
.sbm-card {
	border-radius: 14px;
	padding: 18px 20px;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	position: relative;
}
.sbm-main-text {
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.35;
	margin: 2px 0 0;
}
.sbm-sub-text {
	font-size: .82rem;
	opacity: .92;
	margin: 0;
}
.sbm-cta {
	align-self: flex-start;
	margin-top: 8px;
	padding: 6px 16px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
}
.sbm-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	display: flex;
	justify-content: center;
	gap: 5px;
}
.sbm-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	border: none;
	padding: 0;
	cursor: pointer;
}
.sbm-dot.sbm-dot-active {
	background: #fff;
	width: 16px;
	border-radius: 4px;
}
@media (max-width: 480px) {
	.sbm-main-text {
		font-size: 1.12rem;
	}
	.sbm-card {
		min-height: 170px;
		padding: 16px;
	}
}

/* ==== デザイン「テキスト」専用スタイル（カード全体はリンクにせず、青文字テキスト行だけがリンク） ==== */
.sbm-panel-slide-text {
	text-decoration: none;
}
.sbm-card-text {
	/* border-colorは既定値のみ（実際の色はPHP側でcolors.borderをインラインstyleで
	   上書きする。改修項目3：テキストデザインに枠色設定を反映）。 */
	background: #ffffff;
	border: 1px solid #e0e0e0;
	justify-content: flex-start;
	gap: 4px;
}
.sbm-main-text-plain {
	color: #20242c;
}
.sbm-sub-text-plain {
	color: #666d7a;
	opacity: 1;
}
.sbm-text-link {
	/* 改修項目10：リンク色・下線をここで指定せず、テーマのaタグスタイルを継承する
	   （color・text-decorationともプラグイン側では一切指定しない）。line-heightは
	   PHP側でフォントサイズと同じstyle属性に相対値(1.5倍)で出力するため、ここでは
	   指定しない（改修項目2：固定line-heightによる文字重なりの再発防止）。 */
	display: inline-block;
	align-self: flex-start;
	margin-top: 6px;
	font-weight: 600;
	word-break: break-word;
}
/* 改修項目6：デザインはカード単位（.sbm-panel-slide.sbm-design-text）になったため、
   旧 .sbm-wrap.sbm-design-text 系セレクタ（セット単位デザイン前提）を、
   スライド単位・バナー全体単位それぞれで成立する形に置き換える。
   テキストデザインはカード高さが内容次第で変動するため、絶対配置スライドでも高さを確保する。 */
.sbm-panel-slide.sbm-design-text .sbm-card {
	min-height: 0;
}
/* 1バナー内にテキストデザインのカードが1枚でも含まれる場合は、stage/trackの高さ制御を
   overflow:visibleへ切り替える必要がある。sbm-wrap側にJS（banner-slider.js）が
   data-sbm-has-text-design="1" を付与し、それをセレクタに使う（改修項目6対応）。 */
.sbm-wrap[data-sbm-has-text-design="1"] .sbm-stage {
	overflow: visible;
	display: flex;
	flex-direction: column;
}
.sbm-wrap[data-sbm-has-text-design="1"] .sbm-track {
	position: relative;
	min-height: 88px;
}
.sbm-wrap[data-sbm-has-text-design="1"] .sbm-dots {
	position: static;
	margin-top: 8px;
	justify-content: flex-start;
}
.sbm-wrap[data-sbm-has-text-design="1"] .sbm-dot {
	background: #c9ccd2;
}
.sbm-wrap[data-sbm-has-text-design="1"] .sbm-dot.sbm-dot-active {
	background: #0000EE;
}