/**
 * GBP カテゴリ一覧（ショートコード [om_gbp_categories]）
 *
 * post 9275 /mybusiness_category/ で使う。2026-07-21 に xyz-ips スニペット
 * snippet="categorylist" の <style> とインライン style から移設した。
 * 配信は inc/gbp-category-list.php が has_shortcode() で判定する（ページ ID 直書きではない）。
 *
 * 【見た目は移設前と一致させてある】色・余白・角丸は逐語で移した。デザインを v3 トークン
 * （真朱・紺藍・銀鼠）へ寄せるのは別タスク（Kanban「9275 UI 刷新」）。そのため、ここでの
 * HEX は --om-gbp-* のローカル変数に束ねるだけに留め、--om-* の共通トークンへは寄せていない。
 *
 * @since 2026-07-21
 */

/*
 * ページャのアンカー移動を滑らかにする。html セレクタだが、この CSS はショートコードのある
 * ページにしか配信されないため、影響範囲は移設前（本文の <style>）と同じ。
 */
html {
	scroll-behavior: smooth;
}

.om-gbp {
	/*
	 * 移設前は body{} に書かれており、ページ全体の font-family と line-height を上書きしていた
	 * （実測: /mybusiness_category/ だけ body が serif・行間 1.6 で、サイト標準の 1.8 が効いていなかった）。
	 * スコープをこの部品へ絞ったので、部品の中の見た目は移設前のまま、ページ全体は標準に戻る。
	 */
	font-family: serif;
	font-size: 16px;
	line-height: 1.6;

	--om-gbp-accent: #1A73E8;
	--om-gbp-border: #e5e7eb;
	--om-gbp-bg-soft: #f9fafb;
	--om-gbp-bg-modal: #f4f4f4;
	--om-gbp-modal-head: lightblue;
	/* SP のカード表示で、項目名と英語 ID を本文より一段落とすための色（2026-07-22 追加） */
	--om-gbp-muted: #5C6873;
	/* 英語のカテゴリ ID を等幅で見せる。日本語は含まれないので欧文スタックのみ */
	--om-gbp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- 検索フォーム ---------- */

.om-gbp .searchbar {
	display: flex;
	justify-content: center;
	gap: .5rem;
	flex-wrap: wrap;
	align-items: center;
	margin: .5rem 0;
}

.om-gbp .searchbar select {
	padding: 4px 8px;
	font-size: 1rem;
}

/* ---------- 件数表示 ---------- */

.om-gbp-count {
	text-align: center;
}

/* ---------- 重複カテゴリ ---------- */

.om-gbp #dupSection {
	width: 100%;
	margin: 1rem auto;
	padding: 1rem;
	background: var(--om-gbp-bg-soft);
	border: 1px solid var(--om-gbp-border);
	border-radius: .75rem;
	text-align: center;
	box-sizing: border-box;
}

/*
 * 【2026-07-22 追加】div から details へ変えた（既定は畳み、絞り込み中だけ PHP 側が open を付ける）。
 * 既定の開閉マーカーは text-align:center と噛み合わず左端に取り残されるので、消して見出しの直後に出す。
 * 開閉は content の差し替えだけで表し、回転アニメーションは入れない
 * （このファイルに prefers-reduced-motion の備えが無く、1 箇所のためだけに増やす必要がない）。
 */
.om-gbp #dupSection > summary {
	cursor: pointer;
	list-style: none;
	/* Safari は display:list-item のままだと ::-webkit-details-marker が残る */
	display: block;
}

.om-gbp #dupSection > summary::-webkit-details-marker {
	display: none;
}

.om-gbp #dupSection > summary::after {
	content: "▼";
	margin-left: .4em;
	font-size: .8em;
	color: var(--om-gbp-accent);
}

.om-gbp #dupSection[open] > summary::after {
	content: "▲";
}

/*
 * 【2026-07-22 変更】移設前は grid（minmax(260px, 1fr)）に li{width:100%} を重ねていた。
 * ピルの実幅は 100px 前後なのにセルが 260px へ引き伸ばされ、左右に 150px の空白ができて、
 * 76 件が 4 列 × 19 行・縦 1,000px 超を占めていた。ピルは中身の幅で流し込む部品なので
 * grid をやめ、行あたりの個数を文字数に委ねる。
 */
.om-gbp #dupList {
	list-style: none;
	padding: 0;
	margin: .75rem auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	max-width: 100%;
}

.om-gbp .pill-dup {
	display: inline-block;
	padding: .2rem .7rem;
	border-radius: 999px;
	font-size: .85rem;
	line-height: 1.6;
	border: 1px solid var(--om-gbp-accent);
	text-decoration: none;
	color: var(--om-gbp-accent);
}

/*
 * リンク先が「その名前で一覧を絞り込む」実効を持つようになったので、押せることを見た目で伝える。
 * 淡い背景色を敷く案は採らない（#1A73E8 の文字が 4.0:1 まで落ちて AA 未達になる）。
 * 反転なら白文字 4.5:1 で AA を満たす。
 */
.om-gbp .pill-dup:hover,
.om-gbp .pill-dup:focus-visible {
	background: var(--om-gbp-accent);
	color: #fff;
}

.om-gbp-dup-note {
	margin-top: .6rem;
	font-size: .9rem;
}

/* ---------- ページャ ---------- */

.om-gbp .pager {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 12px auto;
	width: 100%;
	text-align: center;
}

.om-gbp .pager a,
.om-gbp .pager span {
	padding: .25rem .6rem;
	border: 1px solid var(--om-gbp-border);
	border-radius: .5rem;
	text-decoration: none;
}

.om-gbp .pager .is-active {
	background: var(--om-gbp-accent);
	color: #fff;
	border-color: var(--om-gbp-accent);
}

/* ---------- 一覧テーブル ---------- */

/* タブレット幅では横スクロールで 1 行表示を保つ。SP は下のカード表示へ切り替える。 */
.om-gbp .tableScroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.om-gbp .categoryList {
	width: 100%;
	border-collapse: collapse;
}

.om-gbp .categoryList td {
	border-bottom: 1px solid var(--om-gbp-border);
	padding: 6px 8px;
	white-space: nowrap;
}

.om-gbp .col-service .svc-link {
	cursor: pointer;
	text-decoration: underline;
}

/* ---------- PC: 表だけ本文枠の外まで使う（2026-07-22 追加） ----------
 *
 * Snow Monkey は :where(.c-entry__content > :not(.alignleft):not(.alignright):not(.alignfull))
 * で本文直下の要素を --wp--custom--content-width（実測 1180px）に抑える。この表は 4 列 nowrap で
 * 1374px 必要なため、1920px のディスプレイでも右端の Schema.org タイプ列が 194px 切れていた
 * （移設前から同じ・実測で確認）。
 *
 * :where() の詳細度は 0 なので .om-gbp（0,1,0）で上書きできる。表以外は本文幅のまま中央に置き、
 * 記事としての読みやすさを保つ。
 */
@media (min-width: 1024px) {
	.om-gbp {
		max-width: none;
	}

	.om-gbp > *:not(.tableScroll) {
		max-width: var(--wp--custom--content-width, 1180px);
		margin-left: auto;
		margin-right: auto;
	}

	/*
	 * 左端に SNS シェアボタンが position:fixed で居座る（実測 left 4px〜49px）。
	 * 本文枠いっぱいまで広げると先頭列がその下に潜るため、左右に 90px ずつ空ける
	 * （ボタン右端 49px に対して 41px の余裕がある）。
	 * この 90px は 1440px のディスプレイで表（実測 1244px）が横スクロールなしに収まる境界でもある。
	 * 上限 1600px は、これ以上広げても表の幅を超えて余るだけだから。
	 */
	.om-gbp .tableScroll {
		max-width: min(1600px, calc(100vw - 180px));
		margin-left: auto;
		margin-right: auto;
	}

	/*
	 * 枠に対して width:100% だと 4 列が均等に間延びする（実測 577/395/363/527）。
	 * 内容に必要な幅だけ使って中央に置く（同 434/364/183/393）。
	 * 枠に収まらない幅（1440px 等）では従来どおり tableScroll が横スクロールを担う。
	 */
	.om-gbp .categoryList {
		width: max-content;
		/* 絞り込みで数件になっても本文幅までは保つ（それ以下だと本文より細くなって浮く） */
		min-width: var(--wp--custom--content-width, 1180px);
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- タブレット以下: 表をやめて 1 行 1 枚のカードにする（2026-07-22 追加） ----------
 *
 * 表のままだと 375px で 75%、768px でも 48% が横スクロールの向こう側にあり（いずれも実測）、
 * しかも最初に見えるのが英語 ID だった。探しているのは日本語名なので、名前を先頭に出す。
 * DOM の列順（ID → 名前 → サービスタイプ → Schema.org）は変えていないので、
 * PC の表と読み上げ順は従来どおり。段組みだけを幅ごとに下で切り替える。
 */
@media (max-width: 1023px) {
	.om-gbp .tableScroll {
		overflow-x: visible;
	}

	.om-gbp .categoryList,
	.om-gbp .categoryList tbody {
		display: block;
		width: 100%;
	}

	/* 各セルが項目名を自分で持つのでヘッダ行は不要 */
	.om-gbp .categoryList thead {
		display: none;
	}

	.om-gbp .categoryList tr {
		padding: .7rem .1rem;
		border-bottom: 1px solid var(--om-gbp-border);
	}

	.om-gbp .categoryList td {
		display: block;
		border: 0;
		padding: 0;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.om-gbp .categoryList td.col-ja {
		font-size: 1.02rem;
		font-weight: 700;
		line-height: 1.45;
	}

	.om-gbp .categoryList td.col-id {
		font-family: var(--om-gbp-mono);
		font-size: .74rem;
		line-height: 1.5;
		color: var(--om-gbp-muted);
	}

	.om-gbp .categoryList td.col-service,
	.om-gbp .categoryList td.col-schema-org-type {
		font-size: .84rem;
	}

	/* 項目名は data-label 属性から出す（HTML には見出しテキストを増やさない） */
	.om-gbp .categoryList td.col-service::before,
	.om-gbp .categoryList td.col-schema-org-type::before {
		content: attr(data-label);
		display: inline-block;
		min-width: 7.5em;
		color: var(--om-gbp-muted);
		font-family: inherit;
		font-size: .78rem;
	}

	/* Schema.org タイプが未設定のカテゴリでは、項目名だけが浮くのを避ける */
	.om-gbp .categoryList td.col-schema-org-type:empty {
		display: none;
	}

	/*
	 * サービスタイプを持たないカテゴリ（全体の大半）では、この行ごと省く。
	 * 「サービスタイプ −」が全カードに並ぶと、値のある行が埋もれるため。
	 * PC の表では列が揃っている必要があるので従来どおり「−」を出す。
	 */
	.om-gbp .categoryList td.col-service[data-empty] {
		display: none;
	}
}

/* スマホ: 幅が足りないので 1 列 4 段に積む */
@media (max-width: 640px) {
	.om-gbp .categoryList tr {
		display: flex;
		flex-direction: column;
		gap: .1rem;
	}

	.om-gbp .categoryList td.col-ja { order: 1; }
	.om-gbp .categoryList td.col-id { order: 2; }

	.om-gbp .categoryList td.col-service {
		order: 3;
		margin-top: .2rem;
	}

	.om-gbp .categoryList td.col-schema-org-type { order: 4; }
}

/*
 * タブレット: 横幅に余裕があるので 2 列 2 段に組む。
 * 左に「名前 → サービスタイプ」、右に「ID → Schema.org」を置き、
 * 目線が左上から始まって日本語名に最初に当たるようにする。
 */
@media (min-width: 641px) and (max-width: 1023px) {
	.om-gbp .categoryList tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: .2rem 1.75rem;
		align-items: baseline;
	}

	.om-gbp .categoryList td.col-ja {
		grid-column: 1;
		grid-row: 1;
	}

	.om-gbp .categoryList td.col-id {
		grid-column: 2;
		grid-row: 1;
	}

	.om-gbp .categoryList td.col-service {
		grid-column: 1;
		grid-row: 2;
	}

	.om-gbp .categoryList td.col-schema-org-type {
		grid-column: 2;
		grid-row: 2;
	}
}

/* ---------- サービスタイプのモーダル ---------- */

.om-gbp .modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}

/*
 * 移設前は width:50% だった。画面幅に比例するので、広い画面では中身に対して間延びし、
 * 狭い画面では極端に細くなっていた（638px の環境で 319px しかなく、中の表が横スクロールに
 * なっていた）。上限を決めて、狭い画面では画面幅に追従させる。
 */
.om-gbp .modal-content {
	background: var(--om-gbp-bg-modal);
	margin: 8vh auto;
	width: min(92vw, 640px);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	padding: 0;
	position: relative;
	box-shadow: 0 5px 8px rgba(0, 0, 0, .2), 0 7px 20px rgba(0, 0, 0, .17);
}

/*
 * 列見出しを載せる帯。一覧は下の modal-body だけがスクロールするので、見出しは常に見える。
 * 左右の padding は modal-body と同じ 20px にしてある（列位置を揃えるため。片方だけ
 * 変えると見出しと中身がずれる）。
 */
.om-gbp .modal-header {
	background: var(--om-gbp-modal-head);
	padding: 10px 20px;
	flex-shrink: 0;
}

/*
 * 見出しの列比率と、下の表の列幅（table-layout: fixed）を同じ 42% にしてある。
 * 片方を変えるときは必ず両方を変える。
 */
.om-gbp .om-gbp-svc-heads {
	display: grid;
	grid-template-columns: 42% 1fr;
	font-weight: 700;
}

.om-gbp .om-gbp-svc-heads span {
	padding: 0 8px;
}

/* 閉じるボタンは帯の中ではなくモーダルの角に浮かせる（帯の中に入れると列位置がずれる） */
.om-gbp .modalClose {
	position: absolute;
	top: 0;
	right: 12px;
	z-index: 2;
	font-size: 2rem;
	line-height: 1.2;
	cursor: pointer;
}

.om-gbp .modalClose:focus-visible {
	outline: 2px solid var(--om-gbp-accent);
	outline-offset: 2px;
}

.om-gbp .modal-body {
	padding: 4px 20px 10px;
	color: #000;
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* モーダル内の一覧。移設前は JS が 1 セルずつインライン style を書いていた。 */
.om-gbp .om-gbp-svc-table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

/* 見出しは帯に出してあるので視覚的には隠す。読み上げには残す。 */
.om-gbp .om-gbp-svc-table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * 1 列目の幅。ヘッダ帯の .om-gbp-svc-heads の grid-template-columns と同じ値にすること
 * （片方だけ変えると見出しと中身がずれる）。td ではなく col に指定しているのは、
 * thead を視覚的に隠すと td 側の指定が table-layout:fixed に拾われないため。
 */
.om-gbp .om-gbp-svc-col--id {
	width: 42%;
}

.om-gbp .om-gbp-svc-table td {
	padding: 4px 8px;
	border-bottom: 1px solid var(--om-gbp-border);
	overflow-wrap: anywhere;
	vertical-align: top;
}

/*
 * 狭い画面では 2 列の表をやめて 1 件 1 枚のカードにする。サービスタイプ ID は
 * smart_home_automation_and_wifi のように長く、2 列のままだと必ず横スクロールになるため。
 * 一覧本体と同じく、日本語名を主・英語 ID を従として並べる。
 */
@media (max-width: 560px) {
	/*
	 * カードは「名前 → ID」の順に積むので、帯の見出しも同じ順で 2 行にする。
	 * 各行が何を指しているかが、カードを見る前に分かる。
	 * DOM 順は「ID → 名前」のままなので order で入れ替える（表側と共有しているため）。
	 */
	.om-gbp .om-gbp-svc-heads {
		display: flex;
		flex-direction: column;
		gap: .1rem;
		/* 右上の閉じるボタンに重ならない幅に留める */
		padding-right: 2.2rem;
	}

	.om-gbp .om-gbp-svc-heads span {
		padding: 0;
	}

	/* 1 番目 = サービスタイプID。カード側の ID と同じ見た目にして対応づける */
	.om-gbp .om-gbp-svc-heads span:first-child {
		order: 2;
		font-family: var(--om-gbp-mono);
		font-size: .74rem;
		font-weight: 400;
		color: var(--om-gbp-muted);
	}

	/* 2 番目 = サービスタイプ名 */
	.om-gbp .om-gbp-svc-heads span:last-child {
		order: 1;
		font-size: .9rem;
	}

	.om-gbp .modal-header {
		padding: 8px 20px;
	}

	.om-gbp .om-gbp-svc-table,
	.om-gbp .om-gbp-svc-table tbody {
		display: block;
	}

	.om-gbp .om-gbp-svc-table tr {
		display: flex;
		flex-direction: column;
		padding: .5rem 0;
		border-bottom: 1px solid var(--om-gbp-border);
	}

	.om-gbp .om-gbp-svc-table td {
		display: block;
		padding: 0;
		border: 0;
	}

	/* 1 列目 = ID、2 列目 = 名前。表示だけ入れ替える */
	.om-gbp .om-gbp-svc-table td:first-child {
		order: 2;
		font-family: var(--om-gbp-mono);
		font-size: .74rem;
		line-height: 1.5;
		color: var(--om-gbp-muted);
	}

	.om-gbp .om-gbp-svc-table td:last-child {
		order: 1;
		font-weight: 700;
	}
}

/* ---------- 表示できない時の代替 ---------- */

.om-gbp-notice {
	text-align: center;
}

.om-gbp-notice__admin {
	text-align: center;
	font-size: .9rem;
	color: #B00020;
}