/*
 * サービス一覧・詳細。02-design.md §8.3 §8.7 / 01-requirements.md §7.3 §7.4
 */

/* ---------------------------------------------------------- 一覧レイアウト */

.wb-list { display: grid; gap: var(--space-6); }

@media (min-width: 1024px) {
	.wb-list {
		grid-template-columns: var(--sidebar-filter) 1fr;
		align-items: start;
		gap: var(--space-8);
	}
}

.wb-list__side { min-width: 0; }

@media (min-width: 1024px) {
	.wb-list__side { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
}

.wb-list__main { min-width: 0; }

/* ---------------------------------------------------------- 操作バー */

.wb-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	justify-content: space-between;
	padding: var(--space-3) 0;
	border-block: 1px solid var(--color-line);
	margin-bottom: var(--space-4);
}

.wb-toolbar__count { font-size: var(--text-sm); color: var(--color-ink-muted); }
.wb-toolbar__count strong { font-family: var(--font-figure); font-size: var(--text-h3); color: var(--color-ink); }
.wb-toolbar__sorts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

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

.wb-sort.is-current { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary-dark); font-weight: 700; }

/* ---------------------------------------------------------- 絞り込みパネル */

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

.wb-filter__group { padding-block: var(--space-3); border-bottom: 1px solid var(--color-line); }
.wb-filter__group:last-child { border-bottom: 0; }
.wb-filter__legend { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-2); }

.wb-filter__options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.wb-filter__options li:nth-child(n+6) { display: none; }
.wb-filter__group.is-expanded .wb-filter__options li { display: block; }

.wb-filter__option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 32px;
	font-size: var(--text-sm);
	cursor: pointer;
}

.wb-filter__option input { width: 20px; height: 20px; flex: none; }
.wb-filter__option.is-zero { color: var(--color-ink-faint); cursor: not-allowed; }
.wb-filter__count { margin-left: auto; color: var(--color-ink-muted); font-family: var(--font-figure); }

.wb-filter__foot { margin-top: var(--space-4); display: none; }

/* SPは全画面モーダル */
@media (max-width: 1023px) {
	.wb-filter {
		position: fixed;
		inset: 0;
		z-index: var(--z-modal);
		border-radius: 0;
		overflow-y: auto;
		display: none;
		padding-bottom: 96px;
	}
	.wb-filter.is-open { display: block; }
	.wb-filter__foot {
		display: block;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		padding: var(--space-3) var(--space-4);
		background: var(--color-surface);
		border-top: 1px solid var(--color-line);
	}
}

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

/* ---------------------------------------------------------- サービスカード */

.wb-cards { display: grid; gap: var(--space-4); }

@media (min-width: 640px) and (max-width: 1023px) {
	.wb-cards { grid-template-columns: repeat(2, 1fr); }
}

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

.wb-service-card--pr { background: var(--color-surface-alt); }
.wb-service-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-card); }

.wb-service-card__head { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }

@media (min-width: 480px) {
	.wb-service-card__head { grid-template-columns: 1fr 160px; }
}

.wb-service-card__title { font-size: var(--text-h3); font-weight: 700; margin: 0 0 4px; line-height: 1.5; }
.wb-service-card__title a { color: var(--color-ink); text-decoration: none; }
.wb-service-card__title a:hover { text-decoration: underline; }
.wb-service-card__company { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0 0 var(--space-2); }

.wb-service-card__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-surface-alt);
}

.wb-service-card__media img { width: 100%; height: 100%; object-fit: cover; }

.wb-service-card__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--text-sm); }
.wb-service-card__features li { padding-left: 1em; text-indent: -1em; color: var(--color-ink-muted); }
.wb-service-card__features li::before { content: "・"; }

.wb-service-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-line);
}

.wb-price { font-family: var(--font-figure); font-size: var(--text-figure-lg); font-weight: 600; line-height: 1.1; }
.wb-price__note { font-family: var(--font-gothic); font-size: var(--text-xs); color: var(--color-ink-muted); font-weight: 400; }
.wb-service-card__meta { font-size: var(--text-sm); color: var(--color-ink-muted); }
.wb-service-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------------------------------------------------------- 相場ブロック */

.wb-market {
	display: grid;
	gap: var(--space-4);
	background: var(--color-surface-alt);
	border-radius: var(--radius);
	padding: var(--space-4);
	margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
	.wb-market { grid-template-columns: repeat(3, 1fr); }
}

.wb-market__label { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0 0 4px; }
.wb-market__value { font-family: var(--font-figure); font-size: var(--text-figure-lg); font-weight: 600; margin: 0; }

/* ---------------------------------------------------------- 詳細 */

.wb-detail { display: grid; gap: var(--space-8); }

.wb-hero { display: grid; gap: var(--space-4); }

@media (min-width: 768px) {
	.wb-hero { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

.wb-hero__media { aspect-ratio: 4 / 3; background: var(--color-surface-alt); border-radius: var(--radius); overflow: hidden; }
.wb-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.wb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

.wb-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.wb-table th, .wb-table td { border-bottom: 1px solid var(--color-line); padding: var(--space-3); text-align: left; vertical-align: top; }
.wb-table th { width: 32%; color: var(--color-ink-muted); font-weight: 500; background: var(--color-surface-alt); }

.wb-plans { display: grid; gap: var(--space-3); }
.wb-plan { border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); background: var(--color-surface); }
.wb-plan__name { font-weight: 700; margin: 0 0 var(--space-2); }
.wb-plan__price { font-family: var(--font-figure); font-size: var(--text-figure-lg); font-weight: 600; }

.wb-features { display: grid; gap: var(--space-4); }
.wb-feature { border-left: 2px solid var(--color-primary); padding-left: var(--space-4); }
.wb-feature__title { font-weight: 700; margin: 0 0 var(--space-1); }
.wb-feature__body { margin: 0; color: var(--color-ink-muted); }

.wb-reviews { display: grid; gap: var(--space-4); }
.wb-review { border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); background: var(--color-surface); }
.wb-review__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.wb-review__body { margin: 0; }
.wb-review__meta { font-size: var(--text-sm); color: var(--color-ink-muted); margin-top: var(--space-2); }
.wb-review__reply { margin-top: var(--space-3); padding: var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius-sm); font-size: var(--text-sm); }

.wb-axes { display: grid; gap: var(--space-2); }
.wb-axis { display: grid; grid-template-columns: 8em 1fr 3em; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.wb-axis__bar { height: 6px; background: var(--color-surface-alt); border-radius: var(--radius-full); overflow: hidden; }
.wb-axis__fill { height: 100%; background: var(--color-primary); }

.wb-hist { display: grid; gap: var(--space-2); }
.wb-hist__row { display: grid; grid-template-columns: 7em 1fr 3em; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.wb-hist__bar { height: 10px; background: var(--color-surface-alt); border-radius: var(--radius-sm); overflow: hidden; }
.wb-hist__fill { height: 100%; background: var(--color-info); }

.wb-faq { display: grid; gap: var(--space-3); }
.wb-faq__item { border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-3); }
.wb-faq__q { font-weight: 700; margin: 0 0 var(--space-2); }
.wb-faq__a { margin: 0; color: var(--color-ink-muted); }