/**
 * ショップ v2 スタイル。
 *
 * 色・余白・角丸・影はすべて sys-tre-ds の tokens.css（--ds-*）を参照する。
 * v1（ea-product-listing-styles.css）は #f97316 等を直書きしていてトークンを使っていない。
 * ここでは直書きしない。ただし tokens.css が読まれない文脈でも崩れないよう var() に既定値を添える。
 *
 * カード全体のクリックは商品名リンクの ::after を敷いて実現する（stretched link）。
 * <a> の入れ子は不正なので、カードを <a> で包む実装にはしない。
 * ストアリンクだけは別 URL を指すので、敷物より上（z-index）に出す。
 */

/* =========================================================
 *  ヘッダー
 * ========================================================= */

.ssr-shop__header {
	margin-bottom: var(--ds-space-6, 24px);
}

.ssr-shop__title {
	margin: 0 0 var(--ds-space-2, 8px);
	font-size: var(--ds-text-h2, 1.5rem);
	font-weight: var(--ds-fw-bold, 700);
	line-height: var(--ds-lh-heading, 1.4);
	color: var(--ds-text, #1E1810);
}

.ssr-shop__lead {
	margin: 0;
	font-size: var(--ds-text-sm, 0.875rem);
	line-height: var(--ds-lh-body, 1.75);
	color: var(--ds-text-sub, #575250);
}

.ssr-shop__count {
	margin: var(--ds-space-2, 8px) 0 0;
	font-size: var(--ds-text-xs, 0.75rem);
	color: var(--ds-text-muted, #6B6560);
}

.ssr-shop__empty {
	padding: var(--ds-space-8, 32px);
	text-align: center;
	color: var(--ds-text-muted, #6B6560);
	background: var(--ds-surface-alt, #F8F5F4);
	border-radius: var(--ds-radius-md, 16px);
}

/* =========================================================
 *  検索・クイックチップ・絞り込み
 * ========================================================= */

.ssr-tools {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-3, 12px);
	margin-bottom: var(--ds-space-6, 24px);
}

/* --- 検索 --- */

.ssr-search__label {
	display: block;
	margin-bottom: var(--ds-space-1, 4px);
	font-size: var(--ds-text-xs, 0.75rem);
	color: var(--ds-text-muted, #6B6560);
}

.ssr-search__row {
	display: flex;
	gap: var(--ds-space-2, 8px);
}

.ssr-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0 var(--ds-space-3, 12px);
	border: 1px solid var(--ds-border-strong, #D4CFCA);
	border-radius: var(--ds-radius, 10px);
	background: var(--ds-surface, #fff);
	color: var(--ds-text, #1E1810);
	font-size: var(--ds-text-body, 1rem);
}

.ssr-search__input:focus-visible {
	outline: none;
	border-color: var(--ds-primary, #FF7A3D);
	box-shadow: var(--ds-focus-ring, 0 0 0 3px rgba(255, 122, 61, .3));
}

.ssr-search__submit {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 var(--ds-space-5, 20px);
	border: 0;
	border-radius: var(--ds-radius, 10px);
	background: var(--ds-gray-800, #3D3128);
	color: var(--ds-text-inverse, #fff);
	font-size: var(--ds-text-sm, 0.875rem);
	font-weight: var(--ds-fw-bold, 700);
	cursor: pointer;
}

.ssr-search__submit:hover {
	background: var(--ds-gray-900, #1E1810);
}

/* --- 目的別3カード --- */

/*
 * «何のために探しているか» から入る導線。カード全体が1本のリンク。
 *
 * 中にチップを並べていたが、カードとチップのどちらを押すのかが伝わらなかった。
 * チップは粒度が違う導線なので独立した1行として上に出し、ここは «目的» だけを大きく見せる。
 *
 * 色はカードごとに1つの変数（--ssr-purpose）に集約し、枠線・アイコン・見出しがそれを見る。
 * 3箇所に色を直接書くと、後で1色だけ変えたときに «見出しだけ元の色» という半端な状態になる。
 * 値は tokens.css の意味づきトークン（primary / success / info）をそのまま使う。
 */
.ssr-purpose {
	margin: 0;
}

.ssr-purpose__title {
	margin: 0 0 var(--ds-space-2, 8px);
	font-size: var(--ds-text-xs, 0.75rem);
	font-weight: var(--ds-fw-bold, 700);
	color: var(--ds-text-muted, #6B6560);
}

.ssr-purpose__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ds-space-3, 12px);
}

.ssr-purpose__card {
	--ssr-purpose: var(--ds-primary, #FF7A3D);
	--ssr-purpose-bg: var(--ds-primary-bg, #FFF3E8);
	display: flex;
	align-items: center;
	gap: var(--ds-space-3, 12px);
	padding: var(--ds-space-4, 16px);
	border: 1px solid var(--ds-border, #E8E4E0);
	border-radius: var(--ds-radius-md, 16px);
	background: var(--ds-surface-card, #fff);
	text-decoration: none;
	transition: border-color var(--ds-dur-fast, 150ms) var(--ds-ease, ease),
	            box-shadow var(--ds-dur-fast, 150ms) var(--ds-ease, ease);
}

.ssr-purpose__card:hover,
.ssr-purpose__card:focus-visible {
	border-color: var(--ssr-purpose);
	box-shadow: var(--ds-shadow, 0 4px 24px rgba(14, 10, 6, .08));
	text-decoration: none;
}

.ssr-purpose__card:focus-visible {
	outline: 2px solid var(--ssr-purpose);
	outline-offset: 2px;
}

/* 選択中は面を薄く塗る。塗るのは «今この条件で見ている» ことを示すときだけ。 */
.ssr-purpose__card.is-on {
	background: var(--ssr-purpose-bg);
	border-color: var(--ssr-purpose);
}

.ssr-purpose__card--profit {
	--ssr-purpose: var(--ds-success, #16A34A);
	--ssr-purpose-bg: var(--ds-success-bg, #DCFCE7);
}

.ssr-purpose__card--strategy {
	--ssr-purpose: var(--ds-info, #2563EB);
	--ssr-purpose-bg: var(--ds-info-bg, #DBEAFE);
}

.ssr-purpose__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ds-radius, 10px);
	background: var(--ssr-purpose-bg);
	color: var(--ssr-purpose);
}

.ssr-purpose__text {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
}

.ssr-purpose__head {
	display: block;
	font-size: var(--ds-text-base, 1rem);
	font-weight: var(--ds-fw-bold, 700);
	line-height: 1.4;
	color: var(--ds-text, #1E1810);
}

.ssr-purpose__lead {
	display: block;
	font-size: var(--ds-text-xs, 0.75rem);
	line-height: 1.5;
	color: var(--ds-text-muted, #6B6560);
}

.ssr-purpose__arrow {
	flex: 0 0 auto;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--ssr-purpose);
}

@media (max-width: 900px) {
	.ssr-purpose__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- クイックチップ --- */

.ssr-quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssr-quick__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-1, 4px);
	min-height: 36px;
	padding: 0 var(--ds-space-3, 12px);
	border: 1px solid var(--ds-border-strong, #D4CFCA);
	border-radius: var(--ds-radius-pill, 999px);
	background: var(--ds-surface, #fff);
	color: var(--ds-text-sub, #575250);
	font-size: var(--ds-text-sm, 0.875rem);
	text-decoration: none;
	white-space: nowrap;
}

a.ssr-quick__btn:hover {
	border-color: var(--ds-primary, #FF7A3D);
	color: var(--ds-text-link, #FF5100);
}

a.ssr-quick__btn:focus-visible {
	outline: 2px solid var(--ds-primary, #FF7A3D);
	outline-offset: 2px;
}

.ssr-quick__btn.is-on {
	background: var(--ds-primary, #FF7A3D);
	border-color: var(--ds-primary, #FF7A3D);
	color: var(--ds-text-on-primary, #fff);
	font-weight: var(--ds-fw-bold, 700);
}

/* 0件のチップは押させない（押した先が空になる導線を作らない） */
.ssr-quick__btn--empty {
	opacity: .45;
	cursor: not-allowed;
}

.ssr-quick__n {
	font-size: var(--ds-text-xs, 0.75rem);
	opacity: .75;
	font-feature-settings: "tnum";
}

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

.ssr-filters {
	border: 1px solid var(--ds-border, #E8E4E0);
	border-radius: var(--ds-radius-md, 16px);
	background: var(--ds-surface, #fff);
	/* 画面より背が高くなったらパネルの中だけをスクロールさせる（結果側は動かさない） */
	max-height: calc(100vh - var(--ds-space-8, 32px));
	overflow-y: auto;
}

@media (max-width: 900px) {
	.ssr-filters { max-height: none; overflow-y: visible; }
}

.ssr-filters__summary {
	padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
	font-size: var(--ds-text-sm, 0.875rem);
	font-weight: var(--ds-fw-bold, 700);
	color: var(--ds-text-sub, #575250);
	cursor: pointer;
}

.ssr-filters__summary:focus-visible {
	outline: 2px solid var(--ds-primary, #FF7A3D);
	outline-offset: -2px;
}

.ssr-filters__form {
	padding: 0 var(--ds-space-4, 16px) var(--ds-space-4, 16px);
}

.ssr-filters__group {
	margin: 0 0 var(--ds-space-3, 12px);
	padding: var(--ds-space-3, 12px) 0 0;
	border: 0;
	border-top: 1px solid var(--ds-border, #E8E4E0);
}

.ssr-filters__group legend {
	padding: 0;
	font-size: var(--ds-text-xs, 0.75rem);
	font-weight: var(--ds-fw-bold, 700);
	color: var(--ds-text-muted, #6B6560);
}

.ssr-filters__opts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-2, 8px) var(--ds-space-4, 16px);
	margin-top: var(--ds-space-2, 8px);
}

.ssr-opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--ds-text-sm, 0.875rem);
	color: var(--ds-text-sub, #575250);
	cursor: pointer;
}

.ssr-opt input {
	accent-color: var(--ds-primary, #FF7A3D);
	width: 18px;
	height: 18px;
	margin: 0;
}

.ssr-opt__n {
	font-size: var(--ds-text-xs, 0.75rem);
	color: var(--ds-text-muted, #6B6560);
	font-feature-settings: "tnum";
}

.ssr-num {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-2, 8px);
	font-size: var(--ds-text-sm, 0.875rem);
	color: var(--ds-text-sub, #575250);
}

.ssr-num input {
	width: 88px;
	min-height: 36px;
	padding: 0 var(--ds-space-2, 8px);
	border: 1px solid var(--ds-border-strong, #D4CFCA);
	border-radius: var(--ds-radius-sm, 8px);
	background: var(--ds-surface, #fff);
	color: var(--ds-text, #1E1810);
}

.ssr-filters__note {
	flex: 1 0 100%;
	margin: 0;
	font-size: var(--ds-text-xs, 0.75rem);
	color: var(--ds-text-muted, #6B6560);
	line-height: 1.6;
}

.ssr-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-space-3, 12px);
	padding-top: var(--ds-space-3, 12px);
	border-top: 1px solid var(--ds-border, #E8E4E0);
}

.ssr-filters__submit {
	min-height: 44px;
	padding: 0 var(--ds-space-6, 24px);
	border: 0;
	border-radius: var(--ds-radius, 10px);
	background: var(--ds-primary, #FF7A3D);
	color: var(--ds-text-on-primary, #fff);
	font-size: var(--ds-text-sm, 0.875rem);
	font-weight: var(--ds-fw-bold, 700);
	cursor: pointer;
}

.ssr-filters__submit:hover {
	background: var(--ds-primary-dark, #FF5100);
}

.ssr-filters__clear,
.ssr-result__clear {
	color: var(--ds-text-link, #FF5100);
	font-size: var(--ds-text-sm, 0.875rem);
}

.ssr-result {
	margin: 0;
	font-size: var(--ds-text-sm, 0.875rem);
	color: var(--ds-text-sub, #575250);
}

/* =========================================================
 *  2段組（左＝絞り込み / 右＝結果）
 * ========================================================= */

/*
 * 検索・チップ・目的別カードは «入口» なので全幅のまま、その下だけを2段組にする。
 *
 * 絞り込みを上の開閉パネルに置いていたときは、条件を1つ変えるたびに
 * «開く → 選ぶ → 送る → 閉じている» を繰り返すことになり、今どの条件が効いているのかも見えなかった。
 * 横に出しておけば、結果を見ながら条件を足せる。
 *
 * 左の幅は px で固定する。% にすると画面が広いほどフィルターまで太り、
 * 商品が並ぶ幅（＝この画面の主役）が痩せる。
 */
.ssr-main {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--ds-space-6, 24px);
	align-items: start;
}

/* 絞り込みは画面に貼り付ける。長い一覧をスクロールしても条件が視野に残る。 */
.ssr-side {
	position: sticky;
	top: var(--ds-space-4, 16px);
	min-width: 0;
}

.ssr-list {
	min-width: 0;
}

@media (max-width: 900px) {
	/*
	 * 狭い画面では1列。絞り込みは «商品より後» に回す。
	 * 開いたまま先頭に置くと、商品にたどり着くまでに画面2つぶんスクロールすることになる。
	 */
	.ssr-main {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ds-space-4, 16px);
	}
	.ssr-side {
		position: static;
		order: 2;
	}
	.ssr-list {
		order: 1;
	}
}

/* =========================================================
 *  並び替え
 * ========================================================= */

/*
 * 選択中は下線で示す。タブは «今どれで並んでいるか» を伝えるものなので、
 * 押せる3つのうち1つだけ色を変えるより、選択中に線を引くほうが «現在地» として読める。
 * 選択中は <a> ではなく <span>（押しても何も起きないものをリンクにしない）。
 */
.ssr-sort {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-space-3, 12px);
	flex-wrap: wrap;
	margin: 0 0 var(--ds-space-4, 16px);
	padding-bottom: var(--ds-space-2, 8px);
	border-bottom: 1px solid var(--ds-border, #E8E4E0);
}

.ssr-sort__tabs {
	display: flex;
	gap: var(--ds-space-1, 4px);
	flex-wrap: wrap;
}

.ssr-sort__tab {
	position: relative;
	padding: var(--ds-space-2, 8px) var(--ds-space-3, 12px);
	border-radius: var(--ds-radius-sm, 8px) var(--ds-radius-sm, 8px) 0 0;
	font-size: var(--ds-text-sm, 0.875rem);
	color: var(--ds-text-muted, #6B6560);
	text-decoration: none;
	white-space: nowrap;
}

a.ssr-sort__tab:hover {
	color: var(--ds-text-link, #FF5100);
	background: var(--ds-primary-bg, #FFF3E8);
}

a.ssr-sort__tab:focus-visible {
	outline: 2px solid var(--ds-primary, #FF7A3D);
	outline-offset: -2px;
}

.ssr-sort__tab.is-on {
	color: var(--ds-text, #1E1810);
	font-weight: var(--ds-fw-bold, 700);
}

.ssr-sort__tab.is-on::after {
	content: "";
	position: absolute;
	left: var(--ds-space-3, 12px);
	right: var(--ds-space-3, 12px);
	bottom: -9px;
	height: 2px;
	background: var(--ds-primary, #FF7A3D);
}

/* 件数と表示切替は右端でひとまとまり */
.ssr-sort__right {
	display: flex;
	align-items: center;
	gap: var(--ds-space-3, 12px);
}

/*
 * 表示切替。図形だけのボタンなので、意味は title 属性と読み上げ専用テキストが持つ。
 * 選択中は <span>（押しても何も起きないものをリンクにしない）。
 */
.ssr-view {
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: var(--ds-radius-sm, 8px);
	background: var(--ds-surface-alt, #F8F5F4);
}

.ssr-view__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 30px;
	border-radius: var(--ds-radius-sm, 6px);
	color: var(--ds-text-muted, #6B6560);
	text-decoration: none;
}

a.ssr-view__btn:hover {
	color: var(--ds-text-link, #FF5100);
}

a.ssr-view__btn:focus-visible {
	outline: 2px solid var(--ds-primary, #FF7A3D);
	outline-offset: 1px;
}

.ssr-view__btn.is-on {
	background: var(--ds-surface, #fff);
	color: var(--ds-text, #1E1810);
	box-shadow: 0 1px 3px rgba(14, 10, 6, .12);
}

/* 読み上げにだけ渡す文字（図形ボタンの意味） */
.ssr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ssr-sort__count {
	margin: 0;
	font-size: var(--ds-text-sm, 0.875rem);
	color: var(--ds-text-muted, #6B6560);
	font-feature-settings: "tnum";
}

/* =========================================================
 *  グリッド
 * ========================================================= */

/**
 * 一覧全体の器。
 *
 * ■ 自分で幅を決める（テーマに任せない）
 *   このショートコードが置かれる /shop/ と /shop-renewal/ は Astra の
 *   «ページビルダーテンプレート»（body.ast-page-builder-template）で、
 *   .ast-container も .site-content も max-width を持たない＝中身は画面幅いっぱいに伸びる。
 *   実測 1920px で見出しが left:0 / width:1920px、カード1枚が 624×1090px になり、
 *   1画面に1行も収まらなかった。
 *   v1 は Elementor のセクション側が余白を持っていて中身は 1580px に収まっている（実測）ので、
 *   同じ /shop/ を置き換えるこちらも同じ範囲に収める。
 *
 * ■ 上限を «画面幅の割合» でなく px で決める
 *   4K で 3列のまま引き伸ばすと1枚が巨大になる。上限を決めたうえで列数を増やす方が、
 *   «1画面に何枚見えるか» が画面サイズによらず安定する。
 */
.ssr-shop {
	--ssr-gap: var(--ds-space-6, 24px);
	max-width: 1560px;
	margin-inline: auto;
	padding-inline: clamp(var(--ds-space-4, 16px), 4vw, var(--ds-space-10, 40px));
	font-family: var(--ds-font-jp, sans-serif);
	color: var(--ds-text, #1E1810);
}

/**
 * リンクの下線を外す。
 *
 * Astra は本文リンクに text-decoration: underline を当てており、
 * 単一クラス（.ssr-card__cta = 0,1,0）では負ける（.entry-content a = 0,1,1）。
 * 実測でチップ・CTA・カード見出し・ページ送りの全てに下線が付いていた。
 * «.ssr-shop + a + クラス» で 0,2,1 にして確実に勝たせる。
 * ボタン・ピル・カード見出しに下線は要らない（見出しだけ hover で下線を出す）。
 */
.ssr-shop a.ssr-card__link,
.ssr-shop a.ssr-card__media,
.ssr-shop a.ssr-card__cta,
.ssr-shop a.ssr-card__store-link,
.ssr-shop a.ssr-quick__btn,
.ssr-shop a.ssr-purpose__card,
.ssr-shop a.ssr-sort__tab,
.ssr-shop a.ssr-view__btn,
.ssr-shop a.ssr-pager__link {
	text-decoration: none;
}

.ssr-shop a.ssr-card__link:hover {
	text-decoration: underline;
}

/**
 * 列数は固定しない。
 *
 * 3列固定だと画面が広いほど1枚が大きくなり、1920px では 624px 幅・1090px 高になって
 * 1画面に1行も入らなかった（実測）。«1枚の幅» を決めて列数を画面に決めさせる方が、
 * どの画面幅でも «1画面に何枚見えるか» が安定する。
 * 下限 300px は、カード内の指標行（勝率・PF・取引数）が2列で収まる最小幅。
 */
.ssr-shop__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--ssr-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 640px) {
	.ssr-shop__grid { grid-template-columns: minmax(0, 1fr); }
	.ssr-shop { --ssr-gap: var(--ds-space-4, 16px); }
}

/*
 * リスト表示。1行1件にして、指標の桁を縦にそろえる。
 *
 * HTML は カード表示とまったく同じ（中身も並び順も変えない）。
 * 別の HTML を組むと «一覧» が2つある状態になり、片方だけ直す事故が起きる。
 *
 * 狭い画面では列に割る余地が無いので、カード表示と同じ形に戻す
 * （1行1件にしても «横に並ぶもの» が縦に積まれるだけで、比べやすさが出ない）。
 */
@media (min-width: 641px) {
	.ssr-shop__grid--list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ds-space-3, 12px);
	}

	/*
	 * 列は 見出し / 折れ線 / 指標 / 導線 の4つ。
	 * 3列にしていたら導線だけが次の行に折り返して、行の高さが倍になっていた
	 * （.ssr-card__body に display:contents を当てているので、中身は card の直接の子として並ぶ）。
	 */
	.ssr-shop__grid--list .ssr-card {
		display: grid;
		grid-template-columns: minmax(190px, 1.3fr) minmax(110px, 1fr) minmax(230px, 1.5fr) auto;
		align-items: center;
		gap: var(--ds-space-4, 16px);
		padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px);
	}

	.ssr-shop__grid--list .ssr-card__head,
	.ssr-shop__grid--list .ssr-card__body {
		padding: 0;
	}

	.ssr-shop__grid--list .ssr-card__body {
		display: contents;
	}

	.ssr-shop__grid--list .ssr-card__media {
		width: 64px;
	}

	/* 折れ線は幅を取り合う相手が多いので、リストでは高さを詰める */
	.ssr-shop__grid--list .ssr-card__spark svg {
		height: 36px;
	}

	/* 2026-08-05: 指標が2つになったので 4 列指定をやめる（空の2列ぶん右が空いていた）。 */
	.ssr-shop__grid--list .ssr-card__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 1行に収めるため、リストでは注記とバッジを畳む（同じ内容は商品ページにある） */
	.ssr-shop__grid--list .ssr-card__lotnote,
	.ssr-shop__grid--list .ssr-card__traits {
		display: none;
	}

	.ssr-shop__grid--list .ssr-card__foot {
		margin: 0;
		padding: 0;
		justify-content: flex-end;
	}
}

/* =========================================================
 *  カード
 * ========================================================= */

.ssr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ds-surface-card, #fff);
	border: 1px solid var(--ds-border, #E8E4E0);
	border-radius: var(--ds-radius-md, 16px);
	overflow: hidden;
	transition: box-shadow var(--ds-dur, 250ms) var(--ds-ease, ease),
	            transform var(--ds-dur, 250ms) var(--ds-ease, ease),
	            border-color var(--ds-dur, 250ms) var(--ds-ease, ease);
}

.ssr-card:hover {
	border-color: var(--ds-primary-light, #FFB387);
	box-shadow: var(--ds-shadow, 0 4px 24px rgba(14, 10, 6, .08));
	transform: translateY(-2px);
}

/* キーボード操作でもカードが光るようにする（敷物リンクにフォーカスが乗る） */
.ssr-card:focus-within {
	border-color: var(--ds-primary, #FF7A3D);
	box-shadow: var(--ds-focus-ring, 0 0 0 3px rgba(255, 122, 61, .3));
}

@media (prefers-reduced-motion: reduce) {
	.ssr-card { transition: none; }
	.ssr-card:hover { transform: none; }
}

/* --- 見出し（画像 + 名前）--- */

/*
 * 画像を左に小さく置き、名前・属性・ストアを右に並べる。
 *
 * 画像をカード幅いっぱいに敷くと、それだけでカードの縦を半分使う
 * （実測 1920px で 622px / カード 1090px）。横に置けば、
 *   ・カード1枚が «一覧» として成立する高さに収まる
 *   ・元画像（正方形が支配的）を切らずに全体を出せる＝EA 名が画像内で読める
 * 幅いっぱいに敷いたまま高さを抑えるには 16:9 で切るしかなく、それだと
 * 画像に入った EA 名の上下が欠ける（v1 で «金龍EA» が «龍EA» になっている）。
 */
.ssr-card__head {
	display: flex;
	align-items: flex-start;
	gap: var(--ds-space-3, 12px);
	/* 2026-08-05: 上 16→12。 */
	padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px) 0;
}

.ssr-card__media {
	display: block;
	flex: 0 0 auto;
	/* 2026-08-05: 88px から詰めた。画像は «どれのことか» が判ればよく、
	   ここを大きくしても一覧で読み取れる情報は増えないのに、カードの縦だけ伸びる。 */
	width: 76px;
	border-radius: var(--ds-radius-sm, 8px);
	background: var(--ds-gray-100, #F4F1EE);
	overflow: hidden;
	line-height: 0;
}

.ssr-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ssr-card__img--none {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--ds-gray-100, #F4F1EE);
}

.ssr-card__headtext {
	min-width: 0;
	flex: 1 1 auto;
}

/* 通貨ペア / 戦略 / 端末。押せない «見分けるための属性» なので線も背景も持たせない。 */
.ssr-card__meta {
	margin: 2px 0 0;
	font-size: var(--ds-text-xs, 0.75rem);
	line-height: 1.5;
	color: var(--ds-text-muted, #6B6560);
	overflow-wrap: anywhere;
}

/* --- 本文 --- */

.ssr-card__body {
	display: flex;
	flex-direction: column;
	/* 2026-08-05: gap 8→6 / 上下 padding 12・16→8・12。
	   一覧は «並べて比べる» 場所なので、1枚の余白より «1画面に何枚見えるか» を優先する。 */
	gap: 6px;
	padding: var(--ds-space-2, 8px) var(--ds-space-4, 16px) var(--ds-space-3, 12px);
	flex: 1 1 auto;
}

.ssr-card__title {
	margin: 0;
	/* 商品名は «BBBreakerRush_AUDJPY» のように長いものが多く、幅 322px では 1.125rem だと必ず2行になる。
	   見出しとしての強さは太字で足りているので、行数のほうを優先する。 */
	font-size: var(--ds-text-base, 1rem);
	font-weight: var(--ds-fw-bold, 700);
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.ssr-card__link {
	color: var(--ds-text, #1E1810);
	text-decoration: none;
}

.ssr-card__link:hover {
	color: var(--ds-text-link, #FF5100);
}

/* カード全面クリック。ストアリンク・CTA・画像リンクはこの下に潜らせない。 */
.ssr-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ssr-card__media,
.ssr-card__store-link,
.ssr-card__cta {
	position: relative;
	z-index: 2;
}

.ssr-card__store {
	margin: 0;
	font-size: var(--ds-text-xs, 0.75rem);
	color: var(--ds-text-muted, #6B6560);
}

.ssr-card__store-link {
	color: var(--ds-text-muted, #6B6560);
	text-decoration: none;
	border-bottom: 1px solid var(--ds-border-strong, #D4CFCA);
}

.ssr-card__store-link:hover {
	color: var(--ds-text-link, #FF5100);
	border-bottom-color: currentColor;
}

/* =========================================================
 *  チップ（通貨ペア / 戦略 / プラットフォーム）
 * ========================================================= */

/* =========================================================
 *  スパークライン
 * ========================================================= */

.ssr-card__spark {
	margin-top: var(--ds-space-1, 4px);
}

.ssr-spark {
	display: block;
	width: 100%;
	/* 2026-08-05: 44px から詰めた。折れ線が伝えるのは «上がっているか» の向きだけで、
	   高さを取っても目盛りが無い以上そこから読める量は増えない。 */
	height: 34px;
	overflow: visible;
}

.ssr-spark__line {
	fill: none;
	stroke-width: 1.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.ssr-spark--up   .ssr-spark__line { stroke: var(--ds-success, #16A34A); }
.ssr-spark--down .ssr-spark__line { stroke: var(--ds-danger, #DC2626); }

.ssr-spark__zero {
	stroke: var(--ds-border-strong, #D4CFCA);
	stroke-width: 1;
	stroke-dasharray: 2 3;
	vector-effect: non-scaling-stroke;
}

/* 折れ線の上に置く。絶対配置で重ねると線と衝突して読めない。 */
.ssr-card__spark-cap {
	display: block;
	text-align: right;
	font-size: 10px;
	line-height: 1.4;
	color: var(--ds-text-muted, #6B6560);
}

/* =========================================================
 *  主要2指標
 * ========================================================= */

/*
 * 指標は «囲って» 出す。
 * 罫線1本で区切っただけだと本文と地続きに見えて、どこからどこまでが計測値なのか読み取れない。
 * v1 も同じ形（グレー地 + 枠 + 中央揃え）で出しており、これは既存の見え方の踏襲。
 */
.ssr-card__stats {
	display: grid;
	/* 2026-08-05: 指標が2つ（累計損益 pips / 取引数）になったので、常に横に2つ並べる。
	   auto-fit + minmax(120px) のままだと、狭いカードで縦に積まれてカードが伸びる。
	   pips 表記は «+35,100pips» が最長で、この幅なら1行に収まる（実測）。 */
	grid-template-columns: 1fr 1fr;
	gap: var(--ds-space-1, 4px) var(--ds-space-2, 8px);
	margin: 0;
	padding: var(--ds-space-2, 8px);
	background: var(--ds-surface-sub, #F8F5F4);
	border: 1px solid var(--ds-border, #E8E4E0);
	border-radius: var(--ds-radius-sm, 8px);
}

.ssr-stat {
	min-width: 0;
	text-align: center;
}

.ssr-stat__label {
	margin: 0 0 2px;
	font-size: 10px;
	color: var(--ds-text-muted, #6B6560);
	line-height: 1.3;
}

.ssr-stat__value {
	margin: 0;
	font-size: var(--ds-text-sm, 0.875rem);
	font-weight: var(--ds-fw-bold, 700);
	font-feature-settings: "tnum";
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.ssr-stat__value--up   { color: var(--ds-success, #16A34A); }
.ssr-stat__value--down { color: var(--ds-danger, #DC2626); }

/* 値が無いものは 0 を出さない。太字にもしない（実測値と見分けが付くようにする） */
.ssr-stat__value--none {
	color: var(--ds-text-muted, #6B6560);
	font-weight: var(--ds-fw-regular, 400);
}

.ssr-stat__sub {
	display: block;
	font-size: 10px;
	font-weight: var(--ds-fw-regular, 400);
	color: var(--ds-text-muted, #6B6560);
	line-height: 1.4;
}

.ssr-card__lotnote {
	margin: 0;
	font-size: 10px;
	color: var(--ds-text-muted, #6B6560);
	line-height: 1.5;
}

/* =========================================================
 *  バッジ
 * ========================================================= */

/*
 * 性質のバッジと導線は同じ行に置き、行そのものをカードの下端に貼り付ける。
 * バッジの数はカードごとに 0〜3 と揃わないので、CTA を別行にすると
 * カードごとにボタンの高さがずれて «列» に見えなくなる。
 */
.ssr-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-space-2, 8px);
	margin-top: auto;
	/* 2026-08-05: 8→4。上の指標との間は body の gap が既に空けている。 */
	padding-top: 4px;
}

.ssr-card__traits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-1, 4px);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.ssr-trait {
	padding: 2px 8px;
	border-radius: var(--ds-radius-pill, 999px);
	font-size: 10px;
	font-weight: var(--ds-fw-bold, 700);
	line-height: 1.6;
	white-space: nowrap;
}

/* 選ぶ理由になる性質 */
.ssr-trait--good {
	background: var(--ds-success-bg, #DCFCE7);
	color: var(--ds-success, #16A34A);
}

/* 状態（良し悪しではないので彩度を落とす） */
.ssr-trait--stopped {
	background: var(--ds-gray-100, #F4F1EE);
	color: var(--ds-text-sub, #575250);
	white-space: normal;
}

.ssr-trait--paidonly {
	background: var(--ds-warning-bg, #FEF3C7);
	color: var(--ds-warning, #F59E0B);
}

.ssr-card__cta {
	display: inline-block;
	flex: 0 0 auto;
	padding: var(--ds-space-2, 8px) var(--ds-space-4, 16px);
	border-radius: var(--ds-radius, 10px);
	background: var(--ds-primary, #FF7A3D);
	color: var(--ds-text-on-primary, #fff);
	font-size: var(--ds-text-sm, 0.875rem);
	font-weight: var(--ds-fw-bold, 700);
	text-align: center;
	text-decoration: none;
	transition: background var(--ds-dur-fast, 150ms) var(--ds-ease, ease);
}

.ssr-card__cta:hover,
.ssr-card__cta:focus {
	background: var(--ds-primary-dark, #FF5100);
	color: var(--ds-text-on-primary, #fff);
}

.ssr-card__cta:focus-visible {
	outline: 2px solid var(--ds-primary-dark, #FF5100);
	outline-offset: 2px;
}

/* =========================================================
 *  ページ送り
 * ========================================================= */

.ssr-pager {
	margin-top: var(--ds-space-8, 32px);
}

.ssr-pager__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--ds-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssr-pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--ds-space-3, 12px);
	border: 1px solid var(--ds-border, #E8E4E0);
	border-radius: var(--ds-radius-sm, 8px);
	background: var(--ds-surface, #fff);
	color: var(--ds-text-sub, #575250);
	font-size: var(--ds-text-sm, 0.875rem);
	text-decoration: none;
}

a.ssr-pager__link:hover {
	border-color: var(--ds-primary, #FF7A3D);
	color: var(--ds-text-link, #FF5100);
}

a.ssr-pager__link:focus-visible {
	outline: 2px solid var(--ds-primary, #FF7A3D);
	outline-offset: 2px;
}

.ssr-pager__link--current {
	background: var(--ds-primary, #FF7A3D);
	border-color: var(--ds-primary, #FF7A3D);
	color: var(--ds-text-on-primary, #fff);
	font-weight: var(--ds-fw-bold, 700);
}

.ssr-pager__gap {
	display: inline-block;
	min-width: 24px;
	text-align: center;
	color: var(--ds-text-muted, #6B6560);
}

/* =========================================================
 *  信頼バッジ（一覧の下）
 * ========================================================= */

/*
 * «ここがどういう場所か» を4つで示す帯。2段組の外に出して全幅で置く。
 *
 * 押せる形にしない（説明であって導線ではない）ので、
 * 目的別カードのような hover の色変化・枠線の強調・矢印は付けない。
 * 押せそうに見えるものを増やすと «どれを押すか» が伝わらなくなる。
 *
 * 面を1枚敷いて内側を仕切る形にしているのは、4つが «同じ1つの説明» だと見せるため。
 * 4枚のカードとして並べるとカードの一覧（商品）と粒度が混ざる。
 */
.ssr-trust {
	margin-top: var(--ds-space-8, 32px);
	padding: var(--ds-space-5, 20px);
	border: 1px solid var(--ds-border, #E8E4E0);
	border-radius: var(--ds-radius-md, 16px);
	background: var(--ds-surface-sub, #F8F5F4);
}

.ssr-trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ds-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssr-trust__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ds-space-3, 12px);
	min-width: 0;
	margin: 0;
}

.ssr-trust__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ds-radius, 10px);
	background: var(--ds-primary-bg, #FFF3E8);
	color: var(--ds-primary, #FF7A3D);
}

.ssr-trust__text {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
}

.ssr-trust__head {
	display: block;
	font-size: var(--ds-text-sm, 0.875rem);
	font-weight: var(--ds-fw-bold, 700);
	line-height: 1.4;
	color: var(--ds-text, #1E1810);
}

.ssr-trust__lead {
	display: block;
	margin-top: 2px;
	font-size: var(--ds-text-xs, 0.75rem);
	line-height: 1.5;
	color: var(--ds-text-muted, #6B6560);
}

/* 4列 → 2列 → 1列。訳が長い言語（de / ru）で 1列あたりの幅が足りなくなる前に落とす。 */
@media (max-width: 1100px) {
	.ssr-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.ssr-trust__list { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   SSR-HEADER-ACCENT-20260804
   一覧見出しブロックの装飾。
   ------------------------------------------------------------------
   ★ カードにはしない
     周りは白いカード（商品・フィルター）が並ぶ面なので、見出しまで
     白い面にすると «商品と同じ階層» に見える。地の色 (#F8F5F4) は
     残したまま、縦のアクセントと件数バッジだけで入口を作る。
   ★ オレンジは 1 箇所だけ
     アイコン・タグ・下線バーを同時にオレンジにすると /ranking/ で
     «三重掛け» と言われた見え方になる。ここでは縦バーにしか使わない。
   ================================================================== */
.ssr-shop__header {
	position: relative;
	padding: 2px 0 var(--ds-space-4, 16px) var(--ds-space-4, 16px);
	border-bottom: 1px solid var(--ds-border, #E8E4E0);
}
/* 見出し 1 行ぶんだけ伸びる縦アクセント（文字数が変わっても崩れない） */
.ssr-shop__header::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 4px;
	height: 1.45em;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, var(--ds-primary, #FF7A3D), #FFB27A);
}
.ssr-shop__title {
	font-size: var(--ds-text-h1, 1.75rem);
	letter-spacing: .01em;
}
/* 1 行が長いと読み戻しが起きるので折り返し幅を決める。
   ★ ch は "0" の字幅なので、日本語では見た目の 6 割ほどの幅にしかならない。
     はじめ 62ch で入れたら «比較できま / す。» と 2 文字だけ 2 行目に落ちた。
     日本語の本文幅は em で決める。 */
.ssr-shop__lead {
	max-width: 48em;
}
/* «203件» は読ませたい数字なので、文中の灰色テキストからバッジに上げる */
.ssr-shop__count {
	display: inline-flex;
	align-items: center;
	margin-top: var(--ds-space-3, 12px);
	padding: 5px 12px;
	border: 1px solid var(--ds-border, #E8E4E0);
	border-radius: 999px;
	background: #FFF;
	color: var(--ds-text-sub, #575250);
	font-size: var(--ds-text-xs, 0.75rem);
	font-weight: var(--ds-fw-bold, 700);
	letter-spacing: .02em;
}
/* 検索の見出し。入力欄から浮いていたのでラベルらしく締める */
.ssr-search__label {
	display: block;
	margin-bottom: var(--ds-space-2, 8px);
	color: var(--ds-text-sub, #575250);
	font-size: var(--ds-text-xs, 0.75rem);
	font-weight: var(--ds-fw-bold, 700);
	letter-spacing: .02em;
}
@media (max-width: 640px) {
	.ssr-shop__header {
		padding-left: var(--ds-space-3, 12px);
	}
	.ssr-shop__title {
		font-size: var(--ds-text-h2, 1.5rem);
	}
}