/* ================================================================
   WP Bio Link v4 — フロントエンド CSS（スタンドアロン + 全機能）
   ================================================================ */

/* ── Body リセット (スタンドアロン用) ── */
body { margin: 0; padding: 0; background: #f8fafc; }

/* ── SWELL / テーマ隔離 ── */
body.wbl-standalone .l-header,
body.wbl-standalone .l-fixHeader,
body.wbl-standalone .c-pageTitle,
body.wbl-standalone .p-breadcrumb,
body.wbl-standalone .l-footer,
body.wbl-standalone .p-fixBtnWrap,
body.wbl-standalone #fix_bottom_menu,
body.wbl-standalone .widget-area,
body.wbl-standalone #sidebar,
body.wbl-standalone .l-mainContent__inner > .post_title,
body.wbl-standalone .l-mainContent__inner > h1.c-pageTitle,
body.wbl-standalone nav.c-breadcrumb { display: none !important; }

body.wbl-standalone .l-mainContent__inner,
body.wbl-standalone .l-mainContent,
body.wbl-standalone .l-content,
body.wbl-standalone .l-container {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.wbl-standalone .post_content,
body.wbl-standalone .e-content,
body.wbl-standalone .entry-content {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ── ベース ── */
.wbl-page {
	width: 100%;
	min-height: 100vh;
	font-family: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.wbl-content {
	max-width: 480px !important;
	margin: 0 auto !important;
	padding: 40px 20px 60px !important;
	box-sizing: border-box !important;
}

.wbl-page *, .wbl-page *::before, .wbl-page *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.wbl-page a { color: inherit; text-decoration: none; }
.wbl-page img { max-width: 100%; height: auto; }
.wbl-page h1, .wbl-page h2, .wbl-page h3 { margin: 0; padding: 0; border: none; background: none; }

/* ── プロフィール ── */
.wbl-profile { text-align: center; margin-bottom: 32px; }
.wbl-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; }
.wbl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wbl-name { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.wbl-bio { font-size: 14px; opacity: 0.7; line-height: 1.6; }

/* ── アイテム共通 ── */
.wbl-items { display: flex; flex-direction: column; gap: 12px; }

/* ── リンクカード ── */
.wbl-link-card {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 20px; border-radius: 12px;
	text-decoration: none !important;
	font-weight: 500; font-size: 15px;
	transition: transform 0.15s, box-shadow 0.15s;
	cursor: pointer;
}
.wbl-link-card:hover { transform: translateY(-2px); }
.wbl-link-icon { font-size: 20px; flex-shrink: 0; }
.wbl-link-icon i { font-size: 20px; }
.wbl-link-label { flex: 1; text-align: center; }

/* Link: heading style */
.wbl-link-heading {
	display: block; text-align: center;
	padding: 18px 20px; border-radius: 12px;
	text-decoration: none !important;
	font-weight: 700; font-size: 18px;
	transition: transform 0.15s;
	cursor: pointer;
}
.wbl-link-heading:hover { transform: translateY(-2px); }

/* Link: image style */
.wbl-link-image {
	display: block; border-radius: 12px; overflow: hidden;
	text-decoration: none !important;
	transition: transform 0.15s, box-shadow 0.15s;
	cursor: pointer;
}
.wbl-link-image img { width: 100%; display: block; }
.wbl-link-image:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }

/* Link: OGP card */
.wbl-ogp-card {
	display: block; border-radius: 12px; overflow: hidden;
	text-decoration: none !important;
	transition: transform 0.15s, box-shadow 0.15s;
	cursor: pointer;
	border: 1px solid rgba(128,128,128,0.2);
}
.wbl-ogp-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.wbl-ogp-image { overflow: hidden; }
.wbl-ogp-image img { width: 100%; display: block; height: auto; object-fit: contain; }
.wbl-ogp-body { padding: 10px 14px; }
.wbl-ogp-title { font-weight: 600; font-size: 13px; margin-bottom: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wbl-ogp-desc { font-size: 11px; opacity: 0.6; line-height: 1.4; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wbl-ogp-url { font-size: 11px; opacity: 0.4; }
/* OGP Summary (horizontal card) */
.wbl-ogp-card.wbl-ogp-summary { display: flex !important; flex-direction: row; }
.wbl-ogp-card.wbl-ogp-summary .wbl-ogp-image { width: 120px; min-width: 120px; max-width: 120px; flex-shrink: 0; }
.wbl-ogp-card.wbl-ogp-summary .wbl-ogp-image img { width: 100%; height: 100%; object-fit: cover; }
.wbl-ogp-card.wbl-ogp-summary .wbl-ogp-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* ── ボタン ── */
.wbl-button {
	display: block; text-align: center;
	padding: 14px 20px; border-radius: 12px;
	text-decoration: none !important;
	font-weight: 700; font-size: 16px;
	transition: transform 0.15s, box-shadow 0.15s;
	cursor: pointer; color: #fff;
}
.wbl-button:hover { transform: translateY(-2px); }

/* SWELL-inspired button styles */
.wbl-btn-3d { position: relative; transform: translateY(0); }
.wbl-btn-3d:hover { transform: translateY(-2px); }
.wbl-btn-3d:active { transform: translateY(2px); box-shadow: none !important; }
.wbl-btn-shiny { position: relative; overflow: hidden; }
.wbl-btn-shiny::after {
	content: ''; position: absolute; top: -50%; left: -60%; width: 30%; height: 200%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
	transform: skewX(-25deg);
	animation: wbl-shiny 3s infinite;
}
@keyframes wbl-shiny { 0%{left:-60%} 20%{left:120%} 100%{left:120%} }
.wbl-btn-outline { background: transparent !important; }

/* ── PR/ステマ規制 disclosure label ── */
.wbl-pr-label {
	position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
	padding: 6px 16px; font-size: 11px; text-align: center;
	background: rgba(107,114,128,0.9); color: #fff; letter-spacing: .05em;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wbl-page { padding-top: 0; }
body:has(.wbl-pr-label) .wbl-page { padding-top: 32px; }
@media (max-width: 768px) {
	.wbl-pr-label { top: auto; bottom: 0; position: fixed; }
	body:has(.wbl-pr-label) .wbl-page { padding-top: 0; padding-bottom: 32px; }
}

/* ── 見出し & 区切り & テキスト ── */
.wbl-heading { font-size: 16px; font-weight: 600; margin: 16px 0 4px; text-align: center; }
.wbl-heading-emoji { margin-right: 6px; }
.wbl-heading-icon { margin-right: 6px; display: inline-flex; align-items: center; }
.wbl-heading-icon i { font-size: 18px; }
.wbl-text { font-size: 14px; line-height: 1.7; margin: 4px 0; opacity: 0.85; text-align: center; }
.wbl-text-box { padding: 16px 20px; border-radius: 12px; }
.wbl-text-box-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.wbl-text-box-body { font-size: 13px; line-height: 1.7; opacity: 0.8; }
.wbl-divider { border: none; border-top: 1px solid rgba(128,128,128,0.2); margin: 8px 0; }

/* ── 余白 ── */
.wbl-spacer-s { height: 16px; }
.wbl-spacer-m { height: 32px; }
.wbl-spacer-l { height: 48px; }

/* ── カラム ── */
.wbl-columns { display: grid; gap: 12px; }
.wbl-columns-2 { grid-template-columns: repeat(2, 1fr); }
.wbl-columns-3 { grid-template-columns: repeat(3, 1fr); }
.wbl-columns-4 { grid-template-columns: repeat(4, 1fr); }
.wbl-column { display: flex; flex-direction: column; gap: 8px; }
.wbl-column-empty { min-height: 40px; }

@media (max-width: 600px) {
	.wbl-columns-3 { grid-template-columns: 1fr; }
	.wbl-columns-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── 埋め込み ── */
.wbl-embed { border-radius: 12px; overflow: hidden; }
.wbl-embed-responsive { position: relative; padding-bottom: 56.25%; height: 0; }
.wbl-embed-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; }
.wbl-embed-x, .wbl-embed-instagram { max-width: 100%; }
.wbl-embed-x blockquote, .wbl-embed-instagram blockquote { margin: 0 !important; }
.wbl-embed-custom iframe { width: 100%; border: none; border-radius: 12px; }

/* ── フォーム ── */
.wbl-form { padding: 16px; border-radius: 12px; }
.wbl-form-label { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.wbl-form-inline { display: flex; gap: 8px; }
.wbl-form-stack { display: flex; flex-direction: column; gap: 8px; }
.wbl-input { flex: 1; padding: 10px 14px; border: 1px solid rgba(128,128,128,0.3); border-radius: 8px; font-size: 14px; outline: none; background: transparent; }
.wbl-input:focus { border-color: #059669; }
.wbl-submit-btn { padding: 10px 20px; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: opacity 0.15s; }
.wbl-submit-btn:hover { opacity: 0.9; }
.wbl-form-msg { font-size: 13px; margin-top: 8px; padding: 6px 10px; border-radius: 6px; }
.wbl-form-disabled { text-align: center; padding: 20px; opacity: 0.5; }
.wbl-form-notice { font-size: 13px; color: #94a3b8; }
.wbl-form-notice i { margin-right: 4px; }

/* ── 埋め込みフォーム Bootstrap上書き (Utage 等) ── */
.wbl-form-embed .card-body {
	padding: 0;
}
.wbl-form-embed .form-group {
	margin-bottom: 14px;
}
.wbl-form-embed label {
	display: block;
	font-family: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 8px;
	color: inherit;
}
.wbl-form-embed .badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 99px;
	margin-left: 6px;
	vertical-align: middle;
	line-height: 1.4;
}
.wbl-form-embed .badge-danger {
	background: rgba(239,68,68,0.15);
	color: #ef4444;
}
.wbl-form-embed .form-control {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid rgba(128,128,128,0.3);
	border-radius: 10px;
	font-family: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	outline: none;
	background: transparent;
	color: inherit;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none;
	appearance: none;
}
.wbl-form-embed .form-control:focus {
	border-color: #10b981;
	box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.wbl-form-embed .form-control::placeholder {
	opacity: 0.5;
}
.wbl-form-embed .btn {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: 12px;
	font-family: 'Inter', 'Noto Sans JP', -apple-system, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
	text-decoration: none;
	line-height: 1.4;
	letter-spacing: 0.02em;
}
.wbl-form-embed .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.wbl-form-embed .btn:active {
	transform: translateY(0);
}
.wbl-form-embed .btn-success,
.wbl-form-embed .btn-primary {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: #fff;
}
.wbl-form-embed .btn-block {
	width: 100%;
}
.wbl-form-embed .btn-lg {
	padding: 16px 24px;
	font-size: 17px;
}

/* ── テーマ別 埋め込みフォーム調整 ── */

/* Default */
.wbl-theme-default .wbl-form-embed .form-control {
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #0f172a;
}
.wbl-theme-default .wbl-form-embed .form-control:focus {
	border-color: #059669;
	box-shadow: 0 0 0 3px rgba(5,150,105,0.12);
}

/* Dark */
.wbl-theme-dark .wbl-form-embed .form-control {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.15);
	color: #e2e8f0;
}
.wbl-theme-dark .wbl-form-embed .form-control:focus {
	border-color: #10b981;
	box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
}
.wbl-theme-dark .wbl-form-embed .form-control::placeholder {
	color: rgba(255,255,255,0.4);
}
.wbl-theme-dark .wbl-form-embed .btn-success,
.wbl-theme-dark .wbl-form-embed .btn-primary {
	background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
	color: #0a0a1a;
}
.wbl-theme-dark .wbl-form-embed .badge-danger {
	background: rgba(239,68,68,0.2);
	color: #f87171;
}

/* Gradient */
.wbl-theme-gradient .wbl-form-embed .form-control {
	background: rgba(255,255,255,0.15);
	border-color: rgba(255,255,255,0.3);
	color: #fff;
}
.wbl-theme-gradient .wbl-form-embed .form-control:focus {
	border-color: rgba(255,255,255,0.6);
	box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}
.wbl-theme-gradient .wbl-form-embed .form-control::placeholder {
	color: rgba(255,255,255,0.5);
}
.wbl-theme-gradient .wbl-form-embed .btn-success,
.wbl-theme-gradient .wbl-form-embed .btn-primary {
	background: #fff;
	color: #764ba2;
}
.wbl-theme-gradient .wbl-form-embed .badge-danger {
	background: rgba(255,255,255,0.2);
	color: #fff;
}

/* Minimal */
.wbl-theme-minimal .wbl-form-embed .form-control {
	border-radius: 0;
	border-color: #1a1a1a;
}
.wbl-theme-minimal .wbl-form-embed .btn {
	border-radius: 0;
	background: #1a1a1a;
	color: #fff;
}

/* Bento */
.wbl-theme-bento .wbl-form-embed .form-control {
	background: #f8fafc;
	border-color: #e2e8f0;
}

/* Custom */
.wbl-theme-custom .wbl-form-embed .form-control {
	background: rgba(128,128,128,0.1);
	border-color: rgba(128,128,128,0.2);
}
.wbl-theme-custom .wbl-form-embed .btn-success,
.wbl-theme-custom .wbl-form-embed .btn-primary {
	background: rgba(128,128,128,0.2);
	color: inherit;
}

/* ── SNS フッターアイコン ── */
.wbl-social-links {
	display: flex; justify-content: center; gap: 16px;
	margin-top: 32px; flex-wrap: wrap;
}
.wbl-social-link {
	width: 36px; height: 36px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; transition: all .2s;
	opacity: .6; text-decoration: none !important;
}
.wbl-social-link:hover { opacity: 1; transform: scale(1.15); }
.wbl-social-link svg { width: 20px; height: 20px; }

/* ── フッター ── */
.wbl-footer { text-align: center; margin-top: 40px; font-size: 12px; opacity: 0.4; }
.wbl-footer a { text-decoration: underline; }


/* ================================================================
   テーマ: Default（ライト）
   ================================================================ */
.wbl-theme-default { background: #f8fafc; color: #0f172a; }
.wbl-theme-default .wbl-link-card { background: #fff; border: 1px solid #e2e8f0; color: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.wbl-theme-default .wbl-link-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.wbl-theme-default .wbl-link-heading { background: #fff; border: 1px solid #e2e8f0; color: #0f172a; }
.wbl-theme-default .wbl-button { background: #059669; }
.wbl-theme-default .wbl-form { background: #fff; border: 1px solid #e2e8f0; }
.wbl-theme-default .wbl-input { background: #f8fafc; color: #0f172a; }
.wbl-theme-default .wbl-submit-btn { background: #059669; color: #fff; }
.wbl-theme-default .wbl-social-link { color: #475569; }
.wbl-theme-default .wbl-ogp-card { background: #fff; }
.wbl-theme-default .wbl-text-box { background: #fff; border: 1px solid #e2e8f0; }

/* ================================================================
   テーマ: Dark
   ================================================================ */
.wbl-theme-dark { background: #0a0a1a; color: #e2e8f0; }
.wbl-theme-dark .wbl-link-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; }
.wbl-theme-dark .wbl-link-card:hover { background: rgba(255,255,255,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.wbl-theme-dark .wbl-link-heading { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; }
.wbl-theme-dark .wbl-button { background: #10b981; color: #0a0a1a; }
.wbl-theme-dark .wbl-form { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.wbl-theme-dark .wbl-input { background: rgba(255,255,255,0.08); color: #e2e8f0; border-color: rgba(255,255,255,0.15); }
.wbl-theme-dark .wbl-submit-btn { background: #10b981; color: #0a0a1a; }
.wbl-theme-dark .wbl-footer a { color: #10b981; }
.wbl-theme-dark .wbl-social-link { color: #94a3b8; }
.wbl-theme-dark .wbl-ogp-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
.wbl-theme-dark .wbl-text-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }

/* ================================================================
   テーマ: Gradient (colors set via inline style)
   ================================================================ */
.wbl-theme-gradient { color: #fff; min-height: 100vh; }
.wbl-theme-gradient .wbl-link-card { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); color: #fff; }
.wbl-theme-gradient .wbl-link-card:hover { background: rgba(255,255,255,0.25); box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.wbl-theme-gradient .wbl-link-heading { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); color: #fff; }
.wbl-theme-gradient .wbl-button { background: #fff; color: #764ba2; }
.wbl-theme-gradient .wbl-form { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); }
.wbl-theme-gradient .wbl-input { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
.wbl-theme-gradient .wbl-input::placeholder { color: rgba(255,255,255,0.6); }
.wbl-theme-gradient .wbl-submit-btn { background: #fff; color: #764ba2; }
.wbl-theme-gradient .wbl-social-link { color: #fff; }
.wbl-theme-gradient .wbl-ogp-card { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.wbl-theme-gradient .wbl-text-box { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); }

/* ================================================================
   テーマ: Minimal
   ================================================================ */
.wbl-theme-minimal { background: #fff; color: #1a1a1a; }
.wbl-theme-minimal .wbl-link-card { background: transparent; border: 2px solid #1a1a1a; color: #1a1a1a; border-radius: 0; }
.wbl-theme-minimal .wbl-link-card:hover { background: #1a1a1a; color: #fff; }
.wbl-theme-minimal .wbl-link-heading { border: 2px solid #1a1a1a; border-radius: 0; }
.wbl-theme-minimal .wbl-button { background: #1a1a1a; color: #fff; border-radius: 0; }
.wbl-theme-minimal .wbl-form { background: #f5f5f5; border-radius: 0; }
.wbl-theme-minimal .wbl-input { border-radius: 0; }
.wbl-theme-minimal .wbl-submit-btn { background: #1a1a1a; color: #fff; border-radius: 0; }
.wbl-theme-minimal .wbl-avatar { border-radius: 0; }
.wbl-theme-minimal .wbl-social-link { color: #1a1a1a; }
.wbl-theme-minimal .wbl-ogp-card { border-radius: 0; }

/* ================================================================
   テーマ: Bento Grid
   ================================================================ */
.wbl-theme-bento { background: #f0f0f0; color: #1a1a1a; }
.wbl-theme-bento .wbl-content { max-width: 600px !important; }
.wbl-theme-bento .wbl-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wbl-theme-bento .wbl-link-card { background: #fff; border: none; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); flex-direction: column; text-align: center; padding: 24px 16px; min-height: 100px; justify-content: center; }
.wbl-theme-bento .wbl-link-icon { font-size: 28px; }
.wbl-theme-bento .wbl-link-label { font-size: 13px; }
.wbl-theme-bento .wbl-link-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.wbl-theme-bento .wbl-button { background: #059669; color: #fff; grid-column: 1 / -1; }
.wbl-theme-bento .wbl-heading, .wbl-theme-bento .wbl-text, .wbl-theme-bento .wbl-text-box, .wbl-theme-bento .wbl-divider, .wbl-theme-bento .wbl-embed, .wbl-theme-bento .wbl-form, .wbl-theme-bento .wbl-columns,
.wbl-theme-bento .wbl-price-card, .wbl-theme-bento .wbl-accordion, .wbl-theme-bento .wbl-steps, .wbl-theme-bento .wbl-testimonial, .wbl-theme-bento .wbl-table-wrap, .wbl-theme-bento .wbl-group, .wbl-theme-bento .wbl-image-card, .wbl-theme-bento .wbl-rich-text,
.wbl-theme-bento [class^="wbl-spacer-"] { grid-column: 1 / -1; }
.wbl-theme-bento .wbl-form { background: #fff; border: none; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.wbl-theme-bento .wbl-submit-btn { background: #059669; color: #fff; }
.wbl-theme-bento .wbl-social-link { color: #475569; }

/* ================================================================
   テーマ: Custom (colors set via inline style)
   ================================================================ */
.wbl-theme-custom .wbl-link-card { background: rgba(128,128,128,0.1); border: 1px solid rgba(128,128,128,0.2); }
.wbl-theme-custom .wbl-link-card:hover { background: rgba(128,128,128,0.15); }
.wbl-theme-custom .wbl-link-heading { background: rgba(128,128,128,0.1); border: 1px solid rgba(128,128,128,0.2); }
.wbl-theme-custom .wbl-button { background: rgba(128,128,128,0.2); }
.wbl-theme-custom .wbl-form { background: rgba(128,128,128,0.08); border: 1px solid rgba(128,128,128,0.15); }
.wbl-theme-custom .wbl-input { background: rgba(128,128,128,0.1); border-color: rgba(128,128,128,0.2); }
.wbl-theme-custom .wbl-submit-btn { background: rgba(128,128,128,0.2); }
.wbl-theme-custom .wbl-social-link { opacity: 0.7; }
.wbl-theme-custom .wbl-ogp-card { background: rgba(128,128,128,0.08); border-color: rgba(128,128,128,0.15); }


/* ================================================================
   v2 ブロックスタイル
   ================================================================ */

/* ── Image blocks ── */
.wbl-image { margin: 0; }
.wbl-image img { width: 100%; height: auto; display: block; border-radius: 6px; }
.wbl-image-rounded img { border-radius: 16px; }

/* Carousel */
.wbl-carousel { position: relative; overflow: hidden; border-radius: 8px; }
.wbl-carousel-track { display: flex; transition: transform .3s ease; }
.wbl-carousel-slide { min-width: 100%; }
.wbl-carousel-slide img { width: 100%; height: auto; display: block; }
.wbl-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.4); color: #fff; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
.wbl-carousel-prev { left: 8px; }
.wbl-carousel-next { right: 8px; }
.wbl-carousel-dots { display: flex; justify-content: center; gap: 6px; padding: 8px 0; }
.wbl-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(128,128,128,.3); cursor: pointer; }
.wbl-carousel-dot.active { background: rgba(128,128,128,.8); }

/* Grid */
.wbl-image-grid { display: grid; gap: 4px; border-radius: 8px; overflow: hidden; }
.wbl-grid-2 { grid-template-columns: 1fr 1fr; }
.wbl-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.wbl-grid-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; display: block; }

/* Tag Cloud */
.wbl-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.wbl-tag-cloud-item { flex: 0 0 auto; }
.wbl-tag-cloud-item:nth-child(odd) img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; }
.wbl-tag-cloud-item:nth-child(even) img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; }

/* ── Rich Text ── */
.wbl-rich-text { font-size: 14px; line-height: 1.7; padding: 4px 0; }
.wbl-rich-text mark { background: linear-gradient(transparent 60%, #fde68a 60%); padding: 0 2px; }

/* ── Accordion ── */
.wbl-accordion { display: flex; flex-direction: column; gap: 6px; }
.wbl-accordion-item { overflow: hidden; }
.wbl-accordion-q { padding: 12px 16px; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.wbl-accordion-q::after { content: '▼'; font-size: 10px; transition: transform .2s; opacity: .5; }
.wbl-accordion-item[open] .wbl-accordion-q::after { transform: rotate(180deg); }
.wbl-accordion-q::-webkit-details-marker { display: none; }
.wbl-accordion-a { padding: 0 16px 14px; font-size: 13px; line-height: 1.7; opacity: .85; }

/* Accordion: transparent */
.wbl-accordion-transparent .wbl-accordion-item { border: none; border-radius: 0; border-bottom: 1px solid rgba(128,128,128,.15); }
.wbl-accordion-transparent .wbl-accordion-item:last-child { border-bottom: none; }
.wbl-accordion-transparent .wbl-accordion-q { padding-left: 0; padding-right: 0; }
.wbl-accordion-transparent .wbl-accordion-a { padding-left: 0; padding-right: 0; }

/* Accordion: bordered (default) */
.wbl-accordion-bordered .wbl-accordion-item { border: 1px solid rgba(128,128,128,.2); border-radius: 8px; }

/* Accordion: card */
.wbl-accordion-card .wbl-accordion-item { border: none; border-radius: 10px; background: rgba(128,128,128,.06); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.wbl-accordion-card .wbl-accordion-q { font-weight: 700; }

/* Accordion: minimal */
.wbl-accordion-minimal .wbl-accordion-item { border: none; border-radius: 0; }
.wbl-accordion-minimal .wbl-accordion-q { padding: 10px 0; border-bottom: 1px dashed rgba(128,128,128,.2); font-size: 13px; }
.wbl-accordion-minimal .wbl-accordion-a { padding: 8px 0 12px; font-size: 12px; }

/* ── Steps ── */
.wbl-steps { display: flex; flex-direction: column; gap: 16px; }
.wbl-step { display: flex; gap: 14px; align-items: flex-start; }
.wbl-step-number {
	width: 36px; height: 36px; border-radius: 50%;
	background: #3b82f6; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 15px; flex-shrink: 0;
	line-height: 1;
}
.wbl-step-content { flex: 1; padding-top: 6px; }
.wbl-step-title { font-weight: 700; font-size: 16px; line-height: 1.3; }
.wbl-step-desc { font-size: 14px; opacity: .7; margin-top: 4px; line-height: 1.7; }

/* Steps: simple (default) */
.wbl-steps-simple .wbl-step-number {
	background: #3b82f6;
}

/* Steps: timeline — vertical line through number centers */
.wbl-steps-timeline { position: relative; padding-left: 0; }
.wbl-steps-timeline::before {
	content: ''; position: absolute;
	left: 18px; /* center of 36px circle */
	top: 36px; /* start below first circle */
	bottom: 18px;
	width: 3px;
	background: linear-gradient(to bottom, #3b82f6, #10b981);
	border-radius: 2px;
	transform: translateX(-50%);
}
.wbl-steps-timeline .wbl-step { position: relative; z-index: 1; }
.wbl-steps-timeline .wbl-step-number {
	width: 36px; height: 36px; font-size: 14px;
	background: #3b82f6;
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px #3b82f6;
	z-index: 2;
}

/* Steps: cards */
.wbl-steps-cards .wbl-step {
	background: rgba(128,128,128,.04); border: 1px solid rgba(128,128,128,.12);
	border-radius: 12px; padding: 16px 18px;
	transition: box-shadow .2s, transform .2s;
}
.wbl-steps-cards .wbl-step:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
	transform: translateY(-1px);
}
.wbl-steps-cards .wbl-step-number {
	width: 40px; height: 40px; font-size: 16px;
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	box-shadow: 0 2px 6px rgba(59,130,246,.25);
}
.wbl-steps-cards .wbl-step-title { font-size: 16px; }

/* Steps: animated */
.wbl-steps-animated .wbl-step {
	opacity: 0; transform: translateX(-20px);
	animation: wbl-step-slidein .6s ease forwards;
}
.wbl-steps-animated .wbl-step:nth-child(1) { animation-delay: 0s; }
.wbl-steps-animated .wbl-step:nth-child(2) { animation-delay: .15s; }
.wbl-steps-animated .wbl-step:nth-child(3) { animation-delay: .3s; }
.wbl-steps-animated .wbl-step:nth-child(4) { animation-delay: .45s; }
.wbl-steps-animated .wbl-step:nth-child(5) { animation-delay: .6s; }
.wbl-steps-animated .wbl-step:nth-child(6) { animation-delay: .75s; }
.wbl-steps-animated .wbl-step:nth-child(7) { animation-delay: .9s; }
.wbl-steps-animated .wbl-step:nth-child(8) { animation-delay: 1.05s; }
@keyframes wbl-step-slidein { to { opacity: 1; transform: translateX(0); } }
.wbl-steps-animated .wbl-step-number {
	background: linear-gradient(135deg, #8b5cf6, #6366f1);
	box-shadow: 0 3px 12px rgba(99,102,241,.35);
}
.wbl-steps-animated .wbl-step-title { color: #6366f1; }

/* Steps: numbered (bold number emphasis) */
.wbl-steps-numbered .wbl-step { gap: 18px; }
.wbl-steps-numbered .wbl-step-number {
	width: 48px; height: 48px; font-size: 22px; font-weight: 900;
	background: transparent; color: #3b82f6;
	border: 3px solid #3b82f6; border-radius: 14px;
}
.wbl-steps-numbered .wbl-step-content { padding-top: 10px; }
.wbl-steps-numbered .wbl-step-title { font-size: 17px; font-weight: 700; }

/* ── Testimonial ── */
.wbl-testimonials { display: flex; flex-direction: column; gap: 8px; }
.wbl-testimonial-item { padding: 14px 16px; border: 1px solid rgba(128,128,128,.15); border-radius: 10px; }
.wbl-testimonial-header { display: flex; align-items: center; gap: 10px; }
.wbl-testimonial-avatar {
	width: 40px; height: 40px; border-radius: 50%;
	object-fit: cover; flex-shrink: 0;
}
.wbl-testimonial-stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
.wbl-testimonial-author { font-size: 12px; opacity: .55; }
.wbl-testimonial-comment { font-size: 13px; line-height: 1.7; margin-top: 8px; }
.wbl-testimonial-image { margin-top: 8px; border-radius: 8px; overflow: hidden; }
.wbl-testimonial-image img { width: 100%; display: block; }

/* ── Price Card ── */
.wbl-price-card { border: 1px solid rgba(128,128,128,.15); border-radius: 12px; padding: 20px; }
.wbl-price-title { font-weight: 700; font-size: 18px; }
.wbl-price-image { width: 100%; border-radius: 8px; margin-top: 10px; display: block; }
.wbl-price-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.wbl-price-tag { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(99,102,241,.1); color: #6366f1; }
.wbl-price-desc { font-size: 13px; line-height: 1.6; margin-top: 10px; opacity: .8; }
.wbl-price-amount { margin-top: 12px; font-size: 14px; }
.wbl-price-original { text-decoration: line-through; opacity: .5; margin-right: 8px; }
.wbl-price-sale { font-weight: 700; font-size: 22px; color: #ef4444; }
.wbl-price-note { font-size: 11px; opacity: .55; margin-top: 6px; }
.wbl-price-cta { display: block; text-align: center; color: #fff; padding: 10px 16px; border-radius: 8px; margin-top: 14px; font-weight: 600; text-decoration: none; font-size: 14px; }

/* ── Image Card ── */
.wbl-image-card { border: 1px solid rgba(128,128,128,.15); border-radius: 12px; overflow: hidden; position: relative; }
.wbl-image-card-badge { position: absolute; top: 8px; left: 8px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; z-index: 1; }
.wbl-image-card-img { width: 100%; height: 180px; object-fit: cover; display: block; }
.wbl-image-card-body { padding: 14px 16px; }
.wbl-image-card-title { font-weight: 700; font-size: 15px; }
.wbl-image-card-sub { font-size: 12px; opacity: .6; margin-top: 2px; }
.wbl-image-card-price { margin-top: 6px; }
.wbl-image-card-cta { display: block; text-align: center; background: #059669; color: #fff; padding: 8px 12px; border-radius: 6px; margin-top: 10px; font-weight: 600; text-decoration: none; font-size: 13px; }

@media (max-width: 600px) {
	.wbl-image-card-img { height: 140px; }
}

/* ── Table ── */
.wbl-table-wrap { overflow-x: auto; border-radius: 8px; }
.wbl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wbl-table th { padding: 8px 12px; text-align: left; font-weight: 600; }
.wbl-table td { padding: 8px 12px; }

/* Table: default */
.wbl-table-default { border: 1px solid rgba(128,128,128,.15); }
.wbl-table-default .wbl-table th { background: rgba(128,128,128,.08); }
.wbl-table-default .wbl-table td { border-top: 1px solid rgba(128,128,128,.1); }

/* Table: striped */
.wbl-table-striped { border: 1px solid rgba(128,128,128,.12); }
.wbl-table-striped .wbl-table th { background: rgba(128,128,128,.08); border-bottom: 2px solid rgba(128,128,128,.15); }
.wbl-table-striped .wbl-table tbody tr:nth-child(even) { background: rgba(128,128,128,.04); }
.wbl-table-striped .wbl-table td { border-top: none; }

/* Table: bordered */
.wbl-table-bordered { border: 2px solid rgba(128,128,128,.2); }
.wbl-table-bordered .wbl-table th { background: rgba(128,128,128,.08); border: 1px solid rgba(128,128,128,.15); }
.wbl-table-bordered .wbl-table td { border: 1px solid rgba(128,128,128,.15); }

/* Table: minimal */
.wbl-table-minimal { border: none; }
.wbl-table-minimal .wbl-table th { background: none; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .6; border-bottom: 2px solid rgba(128,128,128,.15); padding: 6px 12px; }
.wbl-table-minimal .wbl-table td { border: none; border-bottom: 1px solid rgba(128,128,128,.06); }
.wbl-table-minimal .wbl-table tr:last-child td { border-bottom: none; }


/* ================================================================
   v3 グループ要素
   ================================================================ */
.wbl-group {
	padding: 20px; border-radius: 12px;
	display: flex; flex-direction: column; gap: 12px;
	border: 1px solid #e2e8f0;
}

/* Group: rounded (default) */
.wbl-group-rounded { border-radius: 16px; }

/* Group: shadow */
.wbl-group-shadow {
	border: none; border-radius: 16px;
	box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* Group: bordered */
.wbl-group-bordered {
	border: 2px solid rgba(128,128,128,.2); border-radius: 8px;
}

/* Group: flat */
.wbl-group-flat {
	border: none; border-radius: 0;
	background: rgba(128,128,128,.04);
}

/* Group: glass */
.wbl-group-glass {
	border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
	background: rgba(255,255,255,.08) !important;
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ── Carousel button fix ── */
.wbl-carousel { position: relative; }
.wbl-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.1); border-radius: 50%; width: 36px; height: 36px; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.2s; }
.wbl-carousel-btn:hover { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.wbl-carousel-prev { left: 8px; }
.wbl-carousel-next { right: 8px; }

/* ── Testimonial Marquee ── */
.wbl-testimonials-marquee,
.wbl-testimonials-dual_marquee { overflow: hidden; }
.wbl-marquee-row { overflow: hidden; padding: 8px 0; }
.wbl-marquee-track {
  display: flex;
  gap: 16px;
  animation: wblMarquee 30s linear infinite;
  animation-direction: var(--marquee-direction, normal);
  width: max-content;
}
.wbl-marquee-track:hover { animation-play-state: paused; }
@keyframes wblMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.wbl-marquee-card {
  flex: 0 0 280px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.wbl-marquee-card .wbl-testimonial-header { margin-top: 12px; }
.wbl-marquee-card .wbl-testimonial-comment { font-size: 13px; line-height: 1.6; color: #374151; margin-top: 8px; }

/* ── Price Card Microcopy ── */
.wbl-price-microcopy {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #d97706;
  margin-bottom: -4px;
  letter-spacing: 1px;
}