/**
 * MR SNS Suite フロントスタイル
 * レイアウト: grid（既定）/ masonry / carousel / list ＋ ライトボックス
 */

.mr-sns-suite {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, 1fr);
}

.mr-sns-suite--cols-1 { grid-template-columns: repeat(1, 1fr); }
.mr-sns-suite--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mr-sns-suite--cols-3 { grid-template-columns: repeat(3, 1fr); }
.mr-sns-suite--cols-4 { grid-template-columns: repeat(4, 1fr); }
.mr-sns-suite--cols-5 { grid-template-columns: repeat(5, 1fr); }
.mr-sns-suite--cols-6 { grid-template-columns: repeat(6, 1fr); }

.mr-sns-suite__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	line-height: 0;
}

.mr-sns-suite__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.mr-sns-suite__item:hover .mr-sns-suite__image,
.mr-sns-suite__item:focus-visible .mr-sns-suite__image {
	transform: scale(1.05);
}

.mr-sns-suite__badge {
	position: absolute;
	top: 6px;
	right: 8px;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	z-index: 1;
}

/* ---- ホバーオーバーレイ（キャプション・日付） ---- */

.mr-sns-suite__overlay {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 24px 10px 10px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.mr-sns-suite__item:hover .mr-sns-suite__overlay,
.mr-sns-suite__item:focus-visible .mr-sns-suite__overlay {
	opacity: 1;
}

.mr-sns-suite__overlay .mr-sns-suite__date {
	font-size: 11px;
	opacity: 0.85;
}

/* ---- 全体ラッパー・プロフィールヘッダー・もっと見る ---- */

.mr-sns-suite__item--hidden {
	display: none;
}

.mr-sns-suite-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.mr-sns-suite-header__user {
	font-size: 15px;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

/*
 * フォローボタンの色は設定画面から上書きできる（--mr-sns-follow-bg / --mr-sns-follow-color）。
 * 未設定のときは各SNSのブランド色にフォールバックする。文字色はテーマのリンク色に
 * 負けてアイコンまで着色されるのを防ぐため !important を付ける。
 */
.mr-sns-suite-header__follow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: 9999px;
	background: var(--mr-sns-follow-bg, #e1306c);
	color: var(--mr-sns-follow-color, #fff) !important;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
}

.mr-sns-suite-header__follow:hover {
	opacity: 0.85;
}

.mr-sns-suite-header__follow svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex: 0 0 auto;
}

.mr-sns-suite-more {
	display: block;
	margin: 16px auto 0;
	padding: 8px 28px;
	border: 1px solid #c3c4c7;
	border-radius: 9999px;
	background: #fff;
	color: inherit;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

.mr-sns-suite-more:hover {
	background: #f5f5f5;
}

/* ---- hero（1枚目を大きく表示） ---- */

.mr-sns-suite--layout-hero .mr-sns-suite__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.mr-sns-suite--layout-hero.mr-sns-suite--cols-1 .mr-sns-suite__item:first-child {
	grid-column: auto;
	grid-row: auto;
}

/* ---- キャプション常時表示カード（captions="always"） ---- */

.mr-sns-suite__item--card {
	aspect-ratio: auto;
	overflow: visible;
	line-height: 1.5;
	color: inherit;
	text-decoration: none;
}

.mr-sns-suite__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	line-height: 0;
}

.mr-sns-suite--layout-masonry .mr-sns-suite__media {
	aspect-ratio: auto;
}

.mr-sns-suite__item--card .mr-sns-suite__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 2px 0;
	font-size: 13px;
	line-height: 1.5;
}

.mr-sns-suite__item--card .mr-sns-suite__date {
	font-size: 12px;
	color: #757575;
}

/* ---- masonry（CSSカラム・元の縦横比を活かす） ---- */

.mr-sns-suite--layout-masonry {
	display: block;
	column-gap: 8px;
}

.mr-sns-suite--layout-masonry.mr-sns-suite--cols-1 { column-count: 1; }
.mr-sns-suite--layout-masonry.mr-sns-suite--cols-2 { column-count: 2; }
.mr-sns-suite--layout-masonry.mr-sns-suite--cols-3 { column-count: 3; }
.mr-sns-suite--layout-masonry.mr-sns-suite--cols-4 { column-count: 4; }
.mr-sns-suite--layout-masonry.mr-sns-suite--cols-5 { column-count: 5; }
.mr-sns-suite--layout-masonry.mr-sns-suite--cols-6 { column-count: 6; }

.mr-sns-suite--layout-masonry .mr-sns-suite__item {
	margin: 0 0 8px;
	aspect-ratio: auto;
	break-inside: avoid;
}

.mr-sns-suite--layout-masonry .mr-sns-suite__image {
	height: auto;
}

/* ---- carousel（横スクロール＋スナップ） ---- */

.mr-sns-suite-carousel {
	position: relative;
}

.mr-sns-suite--layout-carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.mr-sns-suite--layout-carousel .mr-sns-suite__item {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - 16px) / 3);
}

.mr-sns-suite--layout-carousel.mr-sns-suite--cols-1 .mr-sns-suite__item { flex-basis: 100%; }
.mr-sns-suite--layout-carousel.mr-sns-suite--cols-2 .mr-sns-suite__item { flex-basis: calc((100% - 8px) / 2); }
.mr-sns-suite--layout-carousel.mr-sns-suite--cols-3 .mr-sns-suite__item { flex-basis: calc((100% - 16px) / 3); }
.mr-sns-suite--layout-carousel.mr-sns-suite--cols-4 .mr-sns-suite__item { flex-basis: calc((100% - 24px) / 4); }
.mr-sns-suite--layout-carousel.mr-sns-suite--cols-5 .mr-sns-suite__item { flex-basis: calc((100% - 32px) / 5); }
.mr-sns-suite--layout-carousel.mr-sns-suite--cols-6 .mr-sns-suite__item { flex-basis: calc((100% - 40px) / 6); }

.mr-sns-suite-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	color: #333;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mr-sns-suite-carousel__nav:hover {
	background: #fff;
}

.mr-sns-suite-carousel__nav--prev { left: 8px; }
.mr-sns-suite-carousel__nav--next { right: 8px; }

.mr-sns-suite-carousel__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ---- list（画像＋キャプションの横並びカード） ---- */

.mr-sns-suite--layout-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mr-sns-suite__item--list {
	display: flex;
	gap: 12px;
	aspect-ratio: auto;
	overflow: visible;
	line-height: 1.6;
	color: inherit;
	text-decoration: none;
}

.mr-sns-suite__item--list:hover .mr-sns-suite__image,
.mr-sns-suite__item--list:focus-visible .mr-sns-suite__image {
	transform: none;
	opacity: 0.85;
}

.mr-sns-suite__thumb {
	position: relative;
	flex: 0 0 120px;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	line-height: 0;
}

.mr-sns-suite__item--list .mr-sns-suite__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	font-size: 14px;
}

.mr-sns-suite__item--list .mr-sns-suite__date {
	font-size: 12px;
	color: #757575;
}

/* ---- ライトボックス ---- */

.mr-sns-suite-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.85);
}

.mr-sns-suite-lightbox[hidden] {
	display: none;
}

.mr-sns-suite-lightbox__inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(720px, 92vw);
	max-height: 90vh;
}

.mr-sns-suite-lightbox__embed {
	width: min(720px, 92vw);
	aspect-ratio: 16 / 9;
	border: none;
	border-radius: 4px;
	background: #000;
}

.mr-sns-suite-lightbox__embed[hidden] {
	display: none;
}

.mr-sns-suite-lightbox__image {
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
	border-radius: 4px;
}

.mr-sns-suite-lightbox__video {
	max-width: 100%;
	max-height: 70vh;
	border-radius: 4px;
	background: #000;
}

.mr-sns-suite-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.mr-sns-suite-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.3);
}

.mr-sns-suite-lightbox__nav[hidden] {
	display: none;
}

.mr-sns-suite-lightbox__nav--prev {
	left: 16px;
}

.mr-sns-suite-lightbox__nav--next {
	right: 16px;
}

.mr-sns-suite-lightbox__caption {
	margin: 0;
	color: #fff;
	font-size: 13px;
	line-height: 1.6;
	max-height: 20vh;
	overflow-y: auto;
}

.mr-sns-suite-lightbox__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mr-sns-suite-lightbox__date {
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
}

.mr-sns-suite-lightbox__link {
	color: #fff;
	font-size: 13px;
	text-decoration: underline;
}

.mr-sns-suite-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mr-sns-suite-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* ---- レスポンシブ ---- */
/*
 * カラム数は3段階で指定する。PHP 側（MR_SNS_Suite_Shortcode::responsive_classes）が
 * 常に3つとも出力するため、ここでの上書きは端末判定なしで完結する。
 *   デスクトップ = --cols-N ／ タブレット（〜782px） = --tcols-N ／ モバイル（〜600px） = --mcols-N
 * モバイルのカラム数を指定しない場合、PHP 側が従来どおり2カラム（3カラム以上のとき）を割り当てる。
 */

@media (max-width: 782px) {
	.mr-sns-suite--tcols-1 { grid-template-columns: repeat(1, 1fr); }
	.mr-sns-suite--tcols-2 { grid-template-columns: repeat(2, 1fr); }
	.mr-sns-suite--tcols-3 { grid-template-columns: repeat(3, 1fr); }
	.mr-sns-suite--tcols-4 { grid-template-columns: repeat(4, 1fr); }
	.mr-sns-suite--tcols-5 { grid-template-columns: repeat(5, 1fr); }
	.mr-sns-suite--tcols-6 { grid-template-columns: repeat(6, 1fr); }

	.mr-sns-suite--layout-masonry.mr-sns-suite--tcols-1 { column-count: 1; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--tcols-2 { column-count: 2; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--tcols-3 { column-count: 3; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--tcols-4 { column-count: 4; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--tcols-5 { column-count: 5; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--tcols-6 { column-count: 6; }

	.mr-sns-suite--layout-carousel.mr-sns-suite--tcols-1 .mr-sns-suite__item { flex-basis: 100%; }
	.mr-sns-suite--layout-carousel.mr-sns-suite--tcols-2 .mr-sns-suite__item { flex-basis: calc((100% - 8px) / 2); }
	.mr-sns-suite--layout-carousel.mr-sns-suite--tcols-3 .mr-sns-suite__item { flex-basis: calc((100% - 16px) / 3); }
	.mr-sns-suite--layout-carousel.mr-sns-suite--tcols-4 .mr-sns-suite__item { flex-basis: calc((100% - 24px) / 4); }
	.mr-sns-suite--layout-carousel.mr-sns-suite--tcols-5 .mr-sns-suite__item { flex-basis: calc((100% - 32px) / 5); }
	.mr-sns-suite--layout-carousel.mr-sns-suite--tcols-6 .mr-sns-suite__item { flex-basis: calc((100% - 40px) / 6); }

	/* 1カラムでは hero の1枚目を大きくできないため通常タイルに戻す */
	.mr-sns-suite--layout-hero.mr-sns-suite--tcols-1 .mr-sns-suite__item:first-child {
		grid-column: auto;
		grid-row: auto;
	}
}

@media (max-width: 600px) {
	.mr-sns-suite--mcols-1 { grid-template-columns: repeat(1, 1fr); }
	.mr-sns-suite--mcols-2 { grid-template-columns: repeat(2, 1fr); }
	.mr-sns-suite--mcols-3 { grid-template-columns: repeat(3, 1fr); }
	.mr-sns-suite--mcols-4 { grid-template-columns: repeat(4, 1fr); }
	.mr-sns-suite--mcols-5 { grid-template-columns: repeat(5, 1fr); }
	.mr-sns-suite--mcols-6 { grid-template-columns: repeat(6, 1fr); }

	.mr-sns-suite--layout-masonry.mr-sns-suite--mcols-1 { column-count: 1; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--mcols-2 { column-count: 2; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--mcols-3 { column-count: 3; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--mcols-4 { column-count: 4; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--mcols-5 { column-count: 5; }
	.mr-sns-suite--layout-masonry.mr-sns-suite--mcols-6 { column-count: 6; }

	.mr-sns-suite--layout-carousel.mr-sns-suite--mcols-1 .mr-sns-suite__item { flex-basis: 100%; }
	.mr-sns-suite--layout-carousel.mr-sns-suite--mcols-2 .mr-sns-suite__item { flex-basis: calc((100% - 8px) / 2); }
	.mr-sns-suite--layout-carousel.mr-sns-suite--mcols-3 .mr-sns-suite__item { flex-basis: calc((100% - 16px) / 3); }
	.mr-sns-suite--layout-carousel.mr-sns-suite--mcols-4 .mr-sns-suite__item { flex-basis: calc((100% - 24px) / 4); }
	.mr-sns-suite--layout-carousel.mr-sns-suite--mcols-5 .mr-sns-suite__item { flex-basis: calc((100% - 32px) / 5); }
	.mr-sns-suite--layout-carousel.mr-sns-suite--mcols-6 .mr-sns-suite__item { flex-basis: calc((100% - 40px) / 6); }

	/* 1カラムでは hero の1枚目を大きくできないため通常タイルに戻す */
	.mr-sns-suite--layout-hero.mr-sns-suite--mcols-1 .mr-sns-suite__item:first-child {
		grid-column: auto;
		grid-row: auto;
	}

	/* モバイルだけ表示件数を減らす（「もっと見る」で展開したあとは解除する） */
	.mr-sns-suite--mcount-1:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+2) { display: none; }
	.mr-sns-suite--mcount-2:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+3) { display: none; }
	.mr-sns-suite--mcount-3:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+4) { display: none; }
	.mr-sns-suite--mcount-4:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+5) { display: none; }
	.mr-sns-suite--mcount-5:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+6) { display: none; }
	.mr-sns-suite--mcount-6:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+7) { display: none; }
	.mr-sns-suite--mcount-7:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+8) { display: none; }
	.mr-sns-suite--mcount-8:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+9) { display: none; }
	.mr-sns-suite--mcount-9:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+10) { display: none; }
	.mr-sns-suite--mcount-10:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+11) { display: none; }
	.mr-sns-suite--mcount-11:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+12) { display: none; }
	.mr-sns-suite--mcount-12:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+13) { display: none; }
	.mr-sns-suite--mcount-13:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+14) { display: none; }
	.mr-sns-suite--mcount-14:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+15) { display: none; }
	.mr-sns-suite--mcount-15:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+16) { display: none; }
	.mr-sns-suite--mcount-16:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+17) { display: none; }
	.mr-sns-suite--mcount-17:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+18) { display: none; }
	.mr-sns-suite--mcount-18:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+19) { display: none; }
	.mr-sns-suite--mcount-19:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+20) { display: none; }
	.mr-sns-suite--mcount-20:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+21) { display: none; }
	.mr-sns-suite--mcount-21:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+22) { display: none; }
	.mr-sns-suite--mcount-22:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+23) { display: none; }
	.mr-sns-suite--mcount-23:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+24) { display: none; }
	.mr-sns-suite--mcount-24:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+25) { display: none; }
	.mr-sns-suite--mcount-25:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+26) { display: none; }
	.mr-sns-suite--mcount-26:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+27) { display: none; }
	.mr-sns-suite--mcount-27:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+28) { display: none; }
	.mr-sns-suite--mcount-28:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+29) { display: none; }
	.mr-sns-suite--mcount-29:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+30) { display: none; }
	.mr-sns-suite--mcount-30:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+31) { display: none; }
	.mr-sns-suite--mcount-31:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+32) { display: none; }
	.mr-sns-suite--mcount-32:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+33) { display: none; }
	.mr-sns-suite--mcount-33:not(.mr-sns-suite--expanded) .mr-sns-suite__item:nth-child(n+34) { display: none; }

	.mr-sns-suite__thumb {
		flex-basis: 88px;
	}
}

.mr-sns-suite-error {
	padding: 8px 12px;
	background: #fcf0f1;
	border-left: 4px solid #b32d2e;
	font-size: 14px;
}

/* ---- SNSシェアボタン（[mr_sns_share]） ---- */

.mr-sns-share {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 32px 0 16px;
	padding: 0;
	list-style: none;
}

.mr-sns-share li {
	margin: 0;
	list-style: none;
}

.mr-sns-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	/* テーマのリンク色が fill: currentColor に効いてアイコンが着色されるのを防ぐ。 */
	color: var(--mr-sns-follow-color, #fff) !important;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.mr-sns-share__btn:hover,
.mr-sns-share__btn:focus-visible {
	opacity: 0.8;
}

.mr-sns-share__btn svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.mr-sns-share__btn--x { background: #000; }
.mr-sns-share__btn--facebook { background: #1877f2; }
.mr-sns-share__btn--line { background: #06c755; }
.mr-sns-share__btn--hatena { background: #00a4de; }
.mr-sns-share__btn--threads { background: #000; }
.mr-sns-share__btn--copy { background: #616161; }
.mr-sns-share__btn--instagram { background: #e1306c; }
.mr-sns-share__btn--youtube { background: #f00; }

/* 設定画面で背景色を指定したフォローボタン（ブランド色より優先）。 */
.mr-sns-share--custom-bg .mr-sns-share__btn { background: var(--mr-sns-follow-bg) !important; }

/* シェア・フォローボタンの表示オプション（size / labels / shape / align） */
.mr-sns-share--center { justify-content: center; }
.mr-sns-share--right { justify-content: flex-end; }

.mr-sns-share--small { gap: 8px; }

.mr-sns-share--small .mr-sns-share__btn {
	width: 32px;
	height: 32px;
}

.mr-sns-share--small .mr-sns-share__btn svg {
	width: 16px;
	height: 16px;
}

.mr-sns-share--large .mr-sns-share__btn {
	width: 48px;
	height: 48px;
}

.mr-sns-share--large .mr-sns-share__btn svg {
	width: 24px;
	height: 24px;
}

.mr-sns-share--labels .mr-sns-share__btn {
	width: auto;
	padding: 0 14px;
	gap: 7px;
	border-radius: 9999px;
}

.mr-sns-share--labels.mr-sns-share--small .mr-sns-share__btn { padding: 0 10px; gap: 5px; }
.mr-sns-share--labels.mr-sns-share--large .mr-sns-share__btn { padding: 0 18px; gap: 8px; }

.mr-sns-share__label {
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
}

.mr-sns-share--small .mr-sns-share__label { font-size: 12px; }
.mr-sns-share--large .mr-sns-share__label { font-size: 14px; }

/* shape="square" は labels より後に定義して角丸を優先させる */
.mr-sns-share--square .mr-sns-share__btn { border-radius: 8px; }

/* フローティングシェアバー（PC: 左端追従 / モバイル: 下部固定） */
.mr-sns-share-float {
	position: fixed;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9990;
}

.mr-sns-share-float .mr-sns-share {
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

@media (max-width: 782px) {
	.mr-sns-share-float {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		transform: none;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.12);
	}

	.mr-sns-share-float .mr-sns-share {
		flex-direction: row;
		justify-content: center;
	}
}

/* ---- YouTube フィード（[mr_youtube_feed]・Instagramと共通レイアウトの16:9版） ---- */

.mr-sns-suite--yt .mr-sns-suite__item {
	aspect-ratio: 16 / 9;
	background: #000;
}

.mr-sns-suite--yt .mr-sns-suite__item--card,
.mr-sns-suite--yt .mr-sns-suite__item--list,
.mr-sns-suite--yt.mr-sns-suite--layout-masonry .mr-sns-suite__item {
	aspect-ratio: auto;
	background: none;
}

.mr-sns-suite--yt .mr-sns-suite__media {
	aspect-ratio: 16 / 9;
	background: #000;
}

.mr-sns-suite--yt .mr-sns-suite__thumb {
	flex-basis: 160px;
	aspect-ratio: 16 / 9;
	background: #000;
}

/* 中央の再生バッジ */
.mr-sns-suite__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 32px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	pointer-events: none;
	z-index: 1;
}

.mr-sns-suite-header__follow--youtube {
	background: var(--mr-sns-follow-bg, #f00);
}

@media (max-width: 600px) {
	.mr-sns-suite--yt .mr-sns-suite__thumb {
		flex-basis: 120px;
	}
}

.mr-sns-share__check {
	display: none;
	font-size: 18px;
	line-height: 1;
}

.mr-sns-share__btn--done svg {
	display: none;
}

.mr-sns-share__btn--done .mr-sns-share__check {
	display: block;
}

/* ---- デモ（[mr_instagram_feed_demo]・表示プレビュー共通） ---- */

.mr-sns-suite-demo__section {
	margin: 0 0 48px;
}

.mr-sns-suite-demo__title {
	margin: 0 0 4px;
	font-size: 18px;
}

.mr-sns-suite-demo__code {
	display: inline-block;
	margin: 0 0 12px;
	padding: 2px 8px;
	background: rgba(0, 0, 0, 0.05);
	font-size: 12px;
}

.mr-sns-suite-demo__note {
	font-size: 12px;
	color: #757575;
}