/*
 * 移行後に追加した機能のスタイル。
 *
 * ここに書くのは **移行前に存在しなかった要素だけ**。
 * Snow Monkey 由来のクラス（l- / c- / p- / smb- / sme- / profile-）には一切触らない。
 * 触ると 24KB あるカスタマイザーの追加CSS との詳細度勝負が始まる（CLAUDE.md §4）。
 *
 * 命名は既存の独自機能に合わせて `nm-` プレフィックス
 * （既に .nm-blog-card / .nm-voice-gallery / .nm-seikon-badge が本番で使われている）。
 *
 * 色はサイトの既存パレットから採っている。
 *   #2A8EFF / #1a3552 … 追加CSS の .nm-blog-card 系
 *   #1976d2          … 追加CSS の .voice-* 系
 *   var(--accent-color) は #3f55db（_tokens.css）
 */

/* =========================================================================
 * 一覧の絞り込み
 * ========================================================================= */

/*
 * `<details>` で畳む（D-055）。素の HTML は open で出し、JS が閉じる。
 * 閉じているときは summary の1行だけになり、会員カードが上に来る。
 */
.nm-profile-filter {
	margin: 0 auto 20px;
	max-width: 1100px;
	background: #f6f9ff;
	border: 1px solid #dbe7f8;
	border-radius: 12px;
	text-align: left;
}

.nm-profile-filter__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* 既定の三角マーカーを消して、自前の ▼ を出す（Safari は ::-webkit-details-marker） */
.nm-profile-filter__summary::-webkit-details-marker {
	display: none;
}

.nm-profile-filter__summary::after {
	content: "▼";
	margin-left: auto;
	font-size: 0.7rem;
	color: #4a5b70;
	transition: transform 0.2s ease;
}

.nm-profile-filter[open] > .nm-profile-filter__summary::after {
	transform: rotate(180deg);
}

.nm-profile-filter__summary:hover {
	background: #eef4ff;
	border-radius: 12px;
}

.nm-profile-filter[open] > .nm-profile-filter__summary:hover {
	border-radius: 12px 12px 0 0;
}

.nm-profile-filter__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #1a3552;
	letter-spacing: 0.02em;
}

.nm-profile-filter__applied {
	font-size: 0.85rem;
	font-weight: 400;
	color: #4a5b70;
}

.nm-profile-filter__body {
	padding: 4px 20px 14px;
	border-top: 1px solid #e3edfa;
}

.nm-profile-filter__group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
	margin-top: 12px;
}

.nm-profile-filter__label {
	flex: 0 0 5.5em;
	font-size: 0.85rem;
	font-weight: 700;
	color: #4a5b70;
}

.nm-profile-filter__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-profile-filter__item {
	margin: 0;
	list-style: none;
}

.nm-profile-filter__option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #1a3552;
	background: #fff;
	border: 1px solid #cfdff5;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nm-profile-filter__option:hover {
	border-color: #2a8eff;
	color: #1565c0;
}

.nm-profile-filter__option.is-current {
	background: #2a8eff;
	border-color: #2a8eff;
	color: #fff;
}

.nm-profile-filter__option.is-current:hover {
	color: #fff;
}

.nm-profile-filter__option.is-disabled {
	color: #9aa7b6;
	background: #f0f3f7;
	border-color: #e2e7ee;
	cursor: default;
}

.nm-profile-filter__count {
	font-size: 0.75rem;
	color: inherit;
	opacity: 0.75;
}

.nm-profile-filter__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 12px 0 0;
	padding-top: 10px;
	border-top: 1px dashed #dbe7f8;
	font-size: 0.85rem;
	color: #4a5b70;
}

.nm-profile-filter__reset {
	color: #1565c0;
	font-weight: 600;
	text-decoration: underline;
}

.nm-profile-filter__empty {
	margin: 0 auto 24px;
	padding: 28px 20px;
	max-width: 1100px;
	text-align: center;
	color: #4a5b70;
	background: #fff;
	border: 1px dashed #cfdff5;
	border-radius: 12px;
}

@media (max-width: 600px) {
	.nm-profile-filter {
		border-radius: 10px;
	}

	.nm-profile-filter__summary {
		padding: 10px 14px;
	}

	.nm-profile-filter__body {
		padding: 2px 14px 12px;
	}

	.nm-profile-filter__label {
		flex: 0 0 100%;
	}
}

/* =========================================================================
 * 写真の直下の問い合わせ導線（D-056）
 * ========================================================================= */

.nm-profile-cta {
	margin: 4px 0 0;
	text-align: center;
}

.nm-profile-cta__link {
	display: block;
	padding: 13px 20px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: linear-gradient(135deg, #2a8eff, #5aabff);
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 40, 100, 0.12);
	transition: filter 0.2s ease, transform 0.2s ease;
}

.nm-profile-cta__link:hover,
.nm-profile-cta__link:focus-visible {
	color: #fff;
	filter: brightness(1.06);
	transform: translateY(-1px);
}

/* =========================================================================
 * ほかの女性会員も見る（旧「条件が近い会員」）
 * =========================================================================
 * 2026-09-03: 3件 → 2件。問い合わせフォームより下に置くので縦の占有を減らす。
 * `c-row` をやめて独自グリッドにし、カード幅を抑えて写真を小さくしている。
 *
 * 2026-09-08（D-063）: 2件 → **4件**。pc は4列、sp は2列で折り返す。
 * カード幅（202px）とギャップ（16px）は据え置きなので、写真の大きさは変わらない。
 */

.nm-profile-similar {
	margin: 36px auto 0;
	max-width: 1100px;
}

.nm-profile-similar__title {
	margin: 0 0 14px;
	padding-bottom: 8px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1a3552;
	border-bottom: 2px solid #2a8eff;
}

.nm-profile-similar__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 420px;
}

/* pc は4列。202px × 4 + 16px × 3 = 856px でカード幅は sp/pc とも据え置き。 */
@media (min-width: 1024px) {
	.nm-profile-similar__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-width: 856px;
	}
}

/* -------------------------------------------------------------------------
 * カード画像の縦横比を固定する（D-063）
 * -------------------------------------------------------------------------
 * 症状: カードごとに画像の高さが違った。実測（`/profile/a1189/` pc）:
 *
 *   1件目  202 × 252.5      2件目  202 × 403.1
 *
 * 原因は `img` の `aspect-ratio` が `auto 267 / 294` だったこと。
 * `auto` キーワードが付いていると、**画像が読み込まれた時点で HTML 属性の比
 * （267×294）ではなく元画像の実比率が優先される**。実体は 575×800 や
 * 882×1760 とばらばら（D-005 の width/height 不一致）なので、
 * その差がそのままカードの高さの差になっていた。
 *
 * 一覧（`/profile/`）は `inc/profile.php` の `nm-profile-card-frame-fix` が
 * 枠側に 3/4 を敷いて `img` を `position:absolute; inset:0` で流し込んでいる。
 * ただしあれは `body.post-type-archive-profile` 限定なので、詳細ページの
 * このセクションには効かない。**同じ手を同じ比率（3/4。Q-008）で敷く。**
 *
 * `!important` が要るのは、追加CSS（カスタマイザー）側の
 * `.profile-card__image{aspect-ratio:4/5!important}` /
 * `.profile-card__image > a > img{height:100%!important}` を越えるため。
 * 詳細度は `.nm-profile-similar` を足したぶんこちらが上なので、
 * 追加CSS がテーマCSSより後に出力されても勝つ。
 * ------------------------------------------------------------------------- */

.nm-profile-similar .profile-card__image {
	display: block !important;
	position: relative !important;
	overflow: hidden !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: 3 / 4 !important;
}

.nm-profile-similar .profile-card__image > a {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}

/*
 * `img` は子セレクタで書けない。EWWW が WebP を配る画像だけ
 * `a > picture > img` になり、そうでない画像は `a > img` のまま
 * （実測: `/profile/a1189/` の4件目 A1193 だけが `<picture>` 付き）。
 * `inc/profile.php` の一覧側の修正が子セレクタを使っていないのと同じ理由。
 */
.nm-profile-similar .profile-card__image img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	object-position: center top !important;
}

.nm-profile-similar__item .profile-card__info p {
	font-size: 0.8rem;
	line-height: 1.6;
}

.nm-profile-similar__more {
	margin: 14px 0 0;
	text-align: left;
}

.nm-profile-similar__more a {
	display: inline-block;
	padding: 8px 22px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #1565c0;
	border: 1px solid #2a8eff;
	border-radius: 999px;
	text-decoration: none;
}

/* =========================================================================
 * 詳細ページの問い合わせフォーム
 * ========================================================================= */

.nm-profile-contact {
	margin: 44px auto 0;
	padding: 24px 22px;
	max-width: 1100px;
	background: #f6f9ff;
	border: 1px solid #dbe7f8;
	border-radius: 12px;
}

.nm-profile-contact__title {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 700;
	color: #1a3552;
}

.nm-profile-contact__lede {
	margin: 0 0 20px;
	font-size: 0.9rem;
	line-height: 1.8;
	color: #4a5b70;
}

@media (max-width: 600px) {
	.nm-profile-contact {
		padding: 18px 14px;
		border-radius: 10px;
	}
}

/* =========================================================================
 * プロフィール詳細を sp / タブレットで積む（D-058）
 * =========================================================================
 * カスタマイザーの追加CSS（DB）は次の2本を持っている。
 *
 *   @media (max-width: 1023px) .profile-layout { display:grid; grid-template-columns:1fr 1fr }
 *   @media (max-width:  426px) .profile-layout { display:flex; flex-direction:column }
 *
 * つまり **427〜1023px は写真とテーブルが横並び**で、テーブルの取り分が
 * 半分しかない。実測（/profile/a1208/ の16ラベル中いくつが折り返すか）:
 *
 *   375px  積む     table 337   5 / 16 が折り返す
 *   480px  横並び   table 209  16 / 16（「会/員/番/号」＝1文字ずつ）
 *   600px  横並び   table 269  12 / 16
 *   767px  横並び   table 352   5 / 16
 *   1024px 横並び   table 471   1 / 16
 *   1100px 横並び   table 509   0 / 16   ← ラベルが全部1行に収まる最小
 *
 * 対処は2つ。どちらも **pc（768px 以上）のレイアウトは変えない**。
 *
 *   1. 767px 以下で積む。いちばん壊れる 427〜767px を積む側へ寄せる
 *      （1100px まで積むと pc のレイアウトが変わるのでやらない）
 *   2. ラベルを `white-space: nowrap` にする。これで **どの幅でも**
 *      ラベルは1行になる。列幅は th がテキスト分だけ取り、値側が折り返す
 *
 * DB の追加CSS はテーマCSSより後に読まれるので、詳細度で上回る必要がある。
 * `.profile-layout`（0,1,0）に対して `body.single-profile .profile-layout`（0,2,0）。
 */
@media (max-width: 767px) {
	body.single-profile .profile-layout {
		display: flex;
		flex-direction: column;
	}
}

body.single-profile .profile-table th {
	white-space: nowrap;
}

/* =========================================================================
 * トピッククラスタの相互リンク（本文末尾）
 * ========================================================================= */

.nm-topic-cluster {
	display: block;
	margin: 40px 0 0;
	padding: 20px 22px;
	background: #f6f9ff;
	border: 1px solid #dbe7f8;
	border-left: 4px solid #2a8eff;
	border-radius: 8px;
}

.nm-topic-cluster__title {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #1a3552;
}

.nm-topic-cluster__lede {
	margin: 0 0 12px;
	font-size: 0.85rem;
	color: #4a5b70;
}

.nm-topic-cluster__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-topic-cluster__item {
	margin: 0 0 8px;
	padding-left: 1.1em;
	position: relative;
	list-style: none;
}

.nm-topic-cluster__item::before {
	content: "›";
	position: absolute;
	left: 0;
	color: #2a8eff;
	font-weight: 700;
}

.nm-topic-cluster__item--pillar {
	font-weight: 700;
}

.nm-topic-cluster__link {
	color: #1565c0;
	font-size: 0.92rem;
	line-height: 1.6;
	text-decoration: none;
}

.nm-topic-cluster__link:hover {
	text-decoration: underline;
}

.nm-topic-cluster__more {
	margin: 12px 0 0;
	font-size: 0.85rem;
}

.nm-topic-cluster__more a {
	color: #1565c0;
	font-weight: 600;
}

@media (max-width: 600px) {
	.nm-topic-cluster {
		padding: 16px 14px;
	}
}

/* =========================================================================
 * トップページの手書きセクションの中央ずれ（2026-09-03）
 * =========================================================================
 * トップの下部3セクション（成婚報告 / お客様の声 / 国際結婚コラム）だけが
 * 他の6セクションより左に寄っていた。1500px 幅での実測:
 *
 *   他の6セクション … 幅 1500 / 中心 750（.c-container 1338 → 中身 1280 @750）
 *   この3セクション … 幅 1280 / 中心 640（.c-container 1280 → 中身 1222 @640）
 *
 * 原因は `_components.css` の
 *   :where(.c-entry__content > :not(.alignleft):not(.alignright):not(.alignfull))
 *     { max-width: var(--wp--custom--content-width) }
 * で、**max-width は付くが auto マージンが付かない**。
 * これは本番（Snow Monkey）foundation からの忠実な移植なので、そちらは変えない。
 *
 * 他の6セクションは `alignfull` を持つのでこの規則から除外されている。
 * 3セクションは本文に手書きされたマークアップで `alignfull` を持たない。
 *
 * 中央寄せ（margin-inline:auto）ではなく **max-width を外す**ほうを選んだ。
 * auto マージンだと中身が 1222 のままで、他セクションの 1280 と 58px ずれる。
 * max-width を外すとセクションが 1500 になり、中の `.c-container` が
 * 1338 → 中身 1280 @750 と、他の6セクションと**1px単位で一致**する。
 *
 * 【スコープ】`--wp--custom--content-width` が 1280px になるのはトップだけ。
 * 他の固定ページは blank-content テンプレートで `none`（実測で確認）。
 * それでも取りこぼしを防ぐため、トップ専用の `.p-section-front-page-content`
 * を先頭に付けて限定している。
 *
 * ---------------------------------------------------------------------------
 * 2026-09-08 追記: `.smb-btn-box` の取りこぼし（D-060）
 * ---------------------------------------------------------------------------
 * 上の規則は `.smb-section` だけを対象にしていたため、**セクションの外に
 * 直接置かれたボタンボックス**（「特徴をもっと知る」）が取りこぼされていた。
 * 症状も原因も D-059 とまったく同じで、`max-width` だけが付いて
 * auto マージンが付かないため左に寄る。実測（ウィンドウ幅 1486px）:
 *
 *   女性プロフィールをもっと見る（セクション内） 611..875  中心 743
 *   特徴をもっと知る            （セクション外） 508..772  中心 640  ← 96px 左
 *   サービス・料金案内          （セクション内） 611..875  中心 743
 *
 * `max-width` を外すと `.smb-btn-box > .c-container` が中央寄せを担当し、
 * セクション内の2つと中心が一致する。セクション内のボタンは
 * `.c-entry__content` の直下ではないのでこの規則に当たらず、位置は変わらない。
 */
.p-section-front-page-content .c-entry__content > .smb-section:not(.alignfull),
.p-section-front-page-content .c-entry__content > .smb-btn-box:not(.alignfull) {
  max-width: none;
}