/*
 * 共通スタイル。02-design.md §5 タイポグラフィ / §6 レイアウト / §8 コンポーネント
 *
 * 色・余白・フォントは tokens.css の CSS 変数のみを使う。#hex の直書きは禁止。
 * SWELL のクラス名を上書きするときは詳細度を上げず、子テーマ側の独自クラスを付ける。
 */

/* ---------------------------------------------------------- 基本 */

.wb-body {
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-gothic);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-body);
}

.wb-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (min-width: 1024px) {
	.wb-container { padding-inline: var(--space-6); }
}

.wb-section { margin-block: var(--space-12); }

@media (min-width: 1024px) {
	.wb-section { margin-block: var(--space-16); }
}

.wb-stack > * + * { margin-top: var(--space-3); }

.num {
	font-family: var(--font-figure);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.wb-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------- 見出し */

.wb-h1 {
	font-size: var(--text-h1);
	line-height: var(--leading-heading);
	font-weight: 700;
	margin: 0 0 var(--space-3);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.wb-h2 {
	font-size: var(--text-h2);
	line-height: var(--leading-heading);
	font-weight: 700;
	margin: 0 0 var(--space-3);
}

.wb-h3 {
	font-size: var(--text-h3);
	font-weight: 700;
	margin: 0 0 var(--space-2);
}

/* セクション見出し：下に水引の結び目 + hairline（§7.1） */
.wb-section-head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.wb-section-head__title {
	font-size: var(--text-h2);
	font-weight: 700;
	margin: 0;
	white-space: nowrap;
}

.wb-section-head__rule {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.wb-section-head__rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-line);
}

.wb-mizuhiki { color: var(--color-primary); flex: none; }

.wb-lead {
	color: var(--color-ink-muted);
	margin: 0 0 var(--space-4);
}

/* ---------------------------------------------------------- ボタン */

.wb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius);
	border: 1px solid transparent;
	font: inherit;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	background: none;
	transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.wb-btn:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.wb-btn--primary {
	background: var(--color-primary);
	color: var(--color-surface);
	font-weight: 700;
}
.wb-btn--primary:hover { background: var(--color-primary-dark); color: var(--color-surface); }

.wb-btn--secondary {
	background: var(--color-surface);
	border-color: var(--color-ink);
	color: var(--color-ink);
}
.wb-btn--secondary:hover { background: var(--color-surface-alt); color: var(--color-ink); }

.wb-btn--ghost { color: var(--color-ink); }
.wb-btn--ghost:hover { background: var(--color-surface-alt); }

.wb-btn--danger {
	color: var(--color-danger);
	text-decoration: underline;
	min-height: 32px;
	padding-inline: 0;
}

.wb-btn--sm { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.wb-btn--md { min-height: 40px; }
.wb-btn--block { width: 100%; }

.wb-btn[disabled],
.wb-btn.is-disabled {
	background: var(--color-surface-alt);
	border-color: var(--color-line);
	color: var(--color-ink-faint);
	cursor: not-allowed;
	pointer-events: none;
}

/* 追加済み（§8.2） */
.wb-btn.is-added {
	background: var(--color-primary-tint);
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
	font-weight: 700;
}

.wb-ext::after { content: "↗"; font-size: 0.9em; }

/* ---------------------------------------------------------- バッジ・チップ */

.wb-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px var(--space-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	line-height: 1.6;
	border: 1px solid transparent;
	background: var(--color-surface);
}

.wb-badge--pr {
	border-color: var(--color-accent);
	color: var(--color-accent);
	letter-spacing: 0.08em;
}

.wb-badge--rank {
	background: var(--color-accent);
	color: var(--color-surface);
	font-family: var(--font-figure);
	font-weight: 600;
}

.wb-badge--rank-low {
	background: var(--color-surface-alt);
	color: var(--color-ink);
	font-family: var(--font-figure);
}

.wb-badge--category {
	border-color: var(--color-ink);
	color: var(--color-ink);
	border-radius: var(--radius-full);
}

.wb-badge--tag {
	background: var(--color-surface-alt);
	color: var(--color-ink);
	border-radius: var(--radius-full);
}

.wb-badge--incentive { border-color: var(--color-ink-muted); color: var(--color-ink-muted); }
.wb-badge--verified { border-color: var(--color-success); color: var(--color-success); }
.wb-badge--required { border-color: var(--color-primary); color: var(--color-primary); font-size: 11px; }

.wb-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 4px var(--space-3);
	border-radius: var(--radius-full);
	background: var(--color-primary-tint);
	border: 1px solid var(--color-primary);
	color: var(--color-primary-dark);
	font-size: var(--text-sm);
	text-decoration: none;
}

.wb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ---------------------------------------------------------- カード */

.wb-card {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: var(--space-4);
}

@media (min-width: 640px) {
	.wb-card { padding: var(--space-5, 20px); }
}

.wb-card--pr { background: var(--color-surface-alt); }

.wb-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-card); }

/* ---------------------------------------------------------- 評価 */

.wb-rating { display: inline-flex; align-items: center; gap: var(--space-2); }

.wb-stars {
	position: relative;
	display: inline-block;
	color: var(--color-line-strong);
	font-size: 15px;
	letter-spacing: 1px;
}

.wb-stars__fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--color-accent);
}

.wb-rating__value { font-family: var(--font-figure); font-weight: 600; }
.wb-rating__count { color: var(--color-ink-muted); font-size: var(--text-sm); }
.wb-rating--empty { color: var(--color-ink-muted); font-size: var(--text-sm); }

/* ---------------------------------------------------------- 通知・空状態 */

.wb-notice {
	border: 1px solid var(--color-line);
	background: var(--color-surface);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
}

.wb-notice--caution { border-color: var(--color-accent); }
.wb-notice__label {
	display: inline-block;
	margin-right: var(--space-2);
	color: var(--color-accent);
	font-weight: 700;
	font-size: var(--text-xs);
}

.wb-notice--info { border-color: var(--color-info); }

.wb-empty {
	background: var(--color-surface-alt);
	border-radius: var(--radius);
	padding: var(--space-6);
	color: var(--color-ink-muted);
	text-align: center;
}

.wb-empty .wb-btn { margin-top: var(--space-3); }

.wb-storage-note {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
	margin: var(--space-3) 0 0;
}

.wb-loading { color: var(--color-ink-muted); padding: var(--space-8) 0; text-align: center; }

/* 打消し表示（景表法）。折りたたみ・ツールチップに逃がさない。 */
.wb-disclaimer {
	font-size: 11px;
	line-height: 1.7;
	color: var(--color-ink-muted);
	margin: var(--space-2) 0 0;
}

/* ---------------------------------------------------------- フォーム */

.wb-field { margin-bottom: var(--space-5, 20px); }
.wb-field__label { display: block; font-weight: 500; margin-bottom: var(--space-2); }
.wb-field__help { font-size: var(--text-sm); color: var(--color-ink-muted); margin: var(--space-2) 0 0; }
.wb-required { display: inline-block; margin-left: var(--space-2); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; }

.wb-field__check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	min-height: 24px;
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	cursor: pointer;
}
.wb-field__check input { width: 20px; height: 20px; flex: none; margin-top: 2px; }

.wb-input,
.wb-select,
.wb-textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--space-3);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-ink);
	font: inherit;
}

.wb-input:focus-visible,
.wb-select:focus-visible,
.wb-textarea:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: 0;
	border-color: var(--color-ink);
}

.wb-check { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 24px; cursor: pointer; }
.wb-check input { width: 24px; height: 24px; flex: none; }

/* ---------------------------------------------------------- ドロワー・トースト */

.wb-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(360px, 100%);
	background: var(--color-surface);
	border-left: 1px solid var(--color-line);
	box-shadow: var(--shadow-raised);
	z-index: var(--z-drawer);
	display: flex;
	flex-direction: column;
	padding: var(--space-4);
	overflow-y: auto;
}

.wb-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.wb-drawer__list { list-style: none; margin: 0; padding: 0; }
.wb-drawer__item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-line);
}
.wb-drawer__title { text-decoration: none; color: var(--color-ink); font-weight: 500; }
.wb-drawer__meta { color: var(--color-ink-muted); font-size: var(--text-sm); }

.wb-toasts {
	position: fixed;
	left: 50%;
	bottom: var(--space-6);
	transform: translateX(-50%);
	z-index: var(--z-toast);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

@media (min-width: 640px) {
	.wb-toasts { left: auto; right: var(--space-6); transform: none; }
}

.wb-toast {
	background: var(--color-ink);
	color: var(--color-surface);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	box-shadow: var(--shadow-raised);
}

.wb-toast.is-error { background: var(--color-danger); }

/* バッジのマイクロインタラクション（唯一） */
.wb-count-badge {
	display: inline-flex;
	min-width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: var(--color-surface);
	font-family: var(--font-figure);
	font-size: 11px;
	font-weight: 600;
}

.wb-count-badge.is-pulse { animation: wb-pulse var(--duration-fast) var(--ease); }

@keyframes wb-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

/* ---------------------------------------------------------- 固定CTA（SP） */

.wb-sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: var(--z-sticky-cta);
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface);
	border-top: 1px solid var(--color-line);
	display: flex;
	gap: var(--space-3);
}

.wb-sticky-cta.is-empty .wb-btn { background: var(--color-surface-alt); color: var(--color-ink-faint); pointer-events: none; }

@media (min-width: 1024px) {
	.wb-sticky-cta { display: none; }
}

/* ---------------------------------------------------------- ページネーション */

.wb-pagination { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-8); }
.wb-pagination .page-numbers {
	min-width: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-ink);
	text-decoration: none;
	font-family: var(--font-figure);
	font-weight: 600;
}
.wb-pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-surface); }
.wb-pagination .page-numbers.next,
.wb-pagination .page-numbers.prev { font-family: var(--font-gothic); font-weight: 400; }

/* ---------------------------------------------------------- パンくず */

.wb-breadcrumb { font-size: var(--text-sm); color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.wb-breadcrumb a { color: var(--color-ink-muted); }
.wb-breadcrumb span + span::before { content: " / "; }

body.wb-drawer-open,
body.wb-modal-open { overflow: hidden; }

/* ---------------------------------------------------------- 準備タイムライン（§7.2） */

.wb-timeline { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; }

.wb-timeline__bands { display: grid; grid-template-columns: 4fr 3fr; gap: var(--space-2); margin-bottom: var(--space-3); min-width: 640px; }
.wb-timeline__band { font-size: var(--text-xs); color: var(--color-ink-muted); padding: var(--space-1) var(--space-2); background: var(--color-surface-alt); border-radius: var(--radius-sm); text-align: center; }
.wb-timeline__band--life { background: var(--color-primary-tint); color: var(--color-primary-dark); }

.wb-timeline__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); min-width: 640px; }
.wb-timeline__step { text-align: center; position: relative; }
.wb-timeline__step::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 1px; background: var(--color-line-strong); }
.wb-timeline__step:first-child::before { left: 50%; }
.wb-timeline__step:last-child::before { right: 50%; }

.wb-timeline__dot {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	border-radius: var(--radius-full);
	background: var(--color-surface);
	border: 1px solid var(--color-line-strong);
	color: var(--color-primary);
}

.wb-timeline__step--life .wb-timeline__dot { border-color: var(--color-primary); }
.wb-timeline__knot { display: inline-flex; align-items: center; justify-content: center; }
.wb-timeline__knot[hidden] { display: none; }
.wb-timeline__label { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); margin-top: var(--space-2); }

.wb-hero-top { padding-block: var(--space-8); }

/* ---------------------------------------------------------- 一括問い合わせ */

.wb-requests { max-width: var(--container-diagnosis); margin-inline: auto; }

.wb-requests__cart-foot { margin-top: var(--space-6); }
.wb-requests__cart-note { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0 0 var(--space-3); }

.wb-requests__types { display: grid; gap: var(--space-4); }
.wb-requests__type-row {
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: var(--space-4);
	background: var(--color-surface);
}
.wb-requests__type-title { font-weight: 700; margin: 0 0 var(--space-3); }
.wb-requests__type-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wb-requests__type-options label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-height: 36px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	cursor: pointer;
}
.wb-requests__type-options input { width: 16px; height: 16px; }

.wb-requests__error { color: var(--color-danger, #c0392b); font-size: var(--text-sm); margin-top: var(--space-4); }

.wb-requests__complete { text-align: center; padding: var(--space-8) 0; }
.wb-requests__complete-icon { font-size: 40px; line-height: 1; margin-bottom: var(--space-4); }
.wb-requests__token-url {
	display: block;
	width: 100%;
	margin-top: var(--space-4);
	padding: var(--space-3);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
	font-family: var(--font-figure);
	text-align: center;
}

/* ---- 口コミ投稿・編集（template-review-form.php / template-review-edit.php） ---- */
.wb-review-form__suggest {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: 0;
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.wb-review-form__suggest:empty { border: none; }
.wb-review-form__suggest-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--space-3);
	border: none;
	border-bottom: 1px solid var(--color-line);
	background: var(--color-surface);
	text-align: left;
	cursor: pointer;
	font-size: var(--text-sm);
}
.wb-review-form__suggest-item:last-child { border-bottom: none; }
.wb-review-form__suggest-item:hover,
.wb-review-form__suggest-item:focus-visible { background: var(--color-surface-alt); }
.wb-review-form__suggest-item span { color: var(--color-ink-muted); font-size: var(--text-xs); }

.wb-review-form__consult-note {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px dashed var(--color-line-strong);
	font-size: var(--text-sm);
}

.wb-reviews__cta { margin-top: var(--space-6); text-align: center; }

/* ---------------------------------------------------------- 月間ランキング（T-27） */

.wb-ranking__empty { color: var(--color-ink-muted); }

.wb-ranking__notes {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: var(--space-3) var(--space-4);
	margin: var(--space-3) 0 var(--space-6);
}
.wb-ranking__notes ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.wb-ranking__notes li { font-size: var(--text-xs); color: var(--color-ink-muted); line-height: 1.6; }

.wb-ranking-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}
.wb-ranking-tabs__btn {
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-line-strong);
	border-radius: 999px;
	background: var(--color-surface);
	cursor: pointer;
	font-size: var(--text-sm);
}
.wb-ranking-tabs__btn.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.wb-requests__confirm-item {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	align-items: baseline;
	border-bottom: 1px solid var(--color-line);
	padding: var(--space-3) 0;
}
.wb-requests__confirm-status { font-size: var(--text-sm); color: var(--color-ink-muted); flex: none; }

/* ---------------------------------------------------------- 表示制御 */

/*
 * hidden 属性より display 指定が勝ってしまうため明示的に打ち消す。
 * （ドロワー・件数バッジ・保存条件の通知が初期表示で出てしまう問題への対処）
 */
[hidden] { display: none !important; }

/*
 * WeddingBase の画面は1カラムで使う。SWELL のサイドバーを出さない。
 * SWELL は body クラスを #body_wrap に付けるため、そこに wb-nosidebar が付く。
 */
.wb-nosidebar .l-sidebar { display: none !important; }
.wb-nosidebar #content.l-content { display: block !important; }
.wb-nosidebar .l-mainContent { width: 100% !important; max-width: none !important; }