/**
 * 会員検索（Phase 8-D）スタイル — モック search-mock.html 準拠
 *
 * 配色：炉種 #144a6c（現行サイト色）／製品大分類 #4b5563／賛助識別 #2f6b4f
 *
 * @package Jifma_v3
 */

.member-search {
	--ms-muted: #6b7280;
	display: block; /* <search> 要素の保険 */
	font-feature-settings: "palt";
	color: #1f2937;
}

/* スクリーンリーダー専用（視覚的に隠す） */
.ms-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ===== 検索ボックス ===== */
.ms-box {
	/* 背景・枠線・角丸は main.css の共通カード面（.ms-box/.ms-card/.sm-card）に集約 */
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	padding: 20px 22px;
	margin-bottom: 22px;
}
.ms-input {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid var(--jifma-line);
	border-radius: 8px;
	font-size: 16px;
	font-family: inherit;
	outline: none;
	transition: border-color .15s;
}
.ms-input:focus { border-color: var(--ms-muted); }
.ms-input::placeholder { color: #9ca3af; }

.ms-filter-row {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.ms-flabel {
	font-size: 12px;
	color: var(--ms-muted);
	white-space: nowrap;
	min-width: 72px;
}

/* ===== 会員区分トグル ===== */
.ms-toggle { display: inline-flex; gap: 4px; }
.ms-tg {
	background: #fff;
	border: 1px solid #8b9097; /* 区分トグルの枠はさらに濃いめ */
	color: #374151;
	padding: 5px 14px;
	border-radius: 4px; /* 正方形寄りの軽い角丸 */
	font-size: 13px;
	cursor: pointer;
	transition: all .1s;
}
.ms-tg:hover { background: #f3f4f6; }
.ms-tg[aria-pressed="true"] { background: #374151; color: #fff; border-color: #374151; font-weight: 700; }

/* ===== チップ ===== */
/* チップ群のラッパー。PC では従来どおり折り返し、スマホでは横スクロール（下のメディアクエリ）。 */
.ms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	flex: 1 1 0%; /* basis 0：ラベルと同じ行に収め、残り幅いっぱいに広げる（auto だと内容幅で次行へカラム落ちする） */
	min-width: 0;
}
.ms-chip {
	background: #fff;
	padding: 3px 12px;
	border-radius: 999px; /* 炉種・賛助識別・製品大分類のフィルタは丸い角丸（ピル） */
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: all .1s;
	border: 1px solid currentColor;
}
.ms-chip--furnace { color: var(--jifma-furnace); }
.ms-chip--cat     { color: var(--jifma-cat); font-size: 12px; }
.ms-chip--support { color: var(--jifma-support); font-size: 12px; }
.ms-chip:hover { filter: brightness(.97); background: #f7f9fb; }
.ms-chip[aria-pressed="true"] { color: #fff; }
.ms-chip--furnace[aria-pressed="true"] { background: var(--jifma-furnace); }
.ms-chip--cat[aria-pressed="true"]     { background: var(--jifma-cat); }
.ms-chip--support[aria-pressed="true"] { background: var(--jifma-support); }

/* ===== 所在地セレクト ===== */
.ms-select {
	padding: 6px 10px;
	border: 1px solid var(--jifma-line);
	border-radius: 6px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
}

/* ===== 件数 ===== */
.ms-count {
	font-size: 13px;
	color: var(--ms-muted);
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #f3f4f6;
}
.ms-count b { color: #111827; }
.ms-clear {
	font-size: 12px;
	color: var(--ms-muted);
	background: none;
	border: 1px solid var(--jifma-line);
	border-radius: 4px;
	padding: 2px 10px;
	cursor: pointer;
	margin-left: 10px;
}
.ms-clear:hover { background: #f3f4f6; }

/* ===== 結果カード（ul/li リスト） ===== */
.ms-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.ms-card-item { display: flex; } /* li をグリッドアイテムにし、カードが高さいっぱいに */
.ms-card {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* 背景・枠線・角丸は main.css の共通カード面に集約 */
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
	padding: 16px 20px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s, transform .15s;
}
.ms-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.ms-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 10px;
}
.ms-card-name { font-size: 16px; font-weight: 700; line-height: 1.4; min-width: 0; margin: 0; }
.ms-card-en { display: block; font-size: 11px; color: var(--ms-muted); font-weight: 400; margin-top: 2px; }
.ms-card-hq { font-size: 12px; color: #9ca3af; white-space: nowrap; flex-shrink: 0; padding-top: 4px; }
.ms-tag-row { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
/* .ms-tag のベース形状は main.css に共通化（.sm-tag と一元管理）。ここは色のみ。 */
.ms-tag--furnace { color: var(--jifma-furnace); }
.ms-tag--cat     { color: var(--jifma-cat); }
.ms-tag--support { color: var(--jifma-support); }
.ms-card-products {
	font-size: 12px;
	color: #4b5563;
	line-height: 1.7;
	border-top: 1px solid #f3f4f6;
	padding-top: 8px;
	white-space: pre-line;
	/* 最大3行まで表示し、超過分は … で省略 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.member-search mark { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px; }

.ms-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px;
	color: #9ca3af;
	font-size: 14px;
}
.ms-noscript { color: #b45309; }

/* ===== ページ上余白（他ページの main.second の padding-top:40px と揃える） =====
   会員検索は .second 枠ではないため上の余白が不足する。同じ上余白を与える。 */
.archive-member {
	padding-top: 40px;
}
@media screen and (max-width: 1024px) {
	.archive-member { padding-top: 4%; }
}
@media screen and (max-width: 680px) {
	.archive-member { padding-top: 25px; }
}

/* ===== ページ見出し（他ページの .second .page-title と同じ見た目に揃える） =====
   会員検索は .second 枠ではないため、legacy の .second .page-title が当たらない。
   ここで同じスタイルを .archive-member .page-title に与える。 */
.archive-member .page-title {
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
	.archive-member .page-title { font-size: 2.6rem; }
}
@media screen and (max-width: 680px) {
	.archive-member .page-title { font-size: 2.5rem; margin-bottom: 15px; }
}

/* ===== レスポンシブ ===== */
@media (max-width: 700px) {
	.ms-results { grid-template-columns: 1fr; }
	.ms-flabel { min-width: 100%; margin-bottom: 2px; }
	/* .ms-tag のスマホ縮小は main.css の共通 @media に集約 */

	/* 炉種分類・賛助識別・製品大分類は項目数が多いので、スマホでは
	   折り返さず1行の横スクロール表示にする（ラベルは上に出る）。 */
	.ms-filter-row[data-group] .ms-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		box-sizing: border-box; /* width:100%+padding でも箱からはみ出さないように */
		/* .ms-box の左右余白（22px）で見切れるため、横方向は箱の端いっぱいまで広げる。
		   負マージンで箱の padding を打ち消し、同じ値の padding で中身の位置を元に戻す。 */
		margin-left: -22px;
		margin-right: -22px;
		padding-left: 22px;
		padding-right: 22px;
		padding-bottom: 6px; /* スクロールバー分の余白 */
		scrollbar-width: thin;
	}
	.ms-filter-row[data-group] .ms-chips > .ms-chip {
		flex: 0 0 auto; /* 縮まずに横へあふれてスクロールできるように */
	}
}