/* =============================================================
   43-kal.css — K.aL（カエル／作品販売ページ）
   トークンは core/00-tokens.css を参照（:root 再定義しない）。
   aL固有（移植で置いていく）。

   このファイルが持つもの：
     A) 導入（K.aL ロゴ＋タグライン）
     B) 2カラムレイアウト（左＝細い検索目次／右＝作品一覧）
     C) 左カラム：作品を探す（静かなアコーディオン）／aLから出会う
     D) スマホ：作品を絞り込むトグル
     E) K.aL 専用作品カード（比率尊重・枠/影/背景なし・作家名あり）

   設計方針：サイドバーではなく「作品を探すための目次」。
     背景BOXにしない。ページ背景と同じ白。細い罫・余白・テキストで構成。
     赤（--lr-accent）は選択中・hover・小さなアクセントのみ。
   ============================================================= */

/* =============================================================
   A) 導入
   ============================================================= */
.lr-kal__intro {
	padding-block: var(--lr-space-md) var(--lr-space-lg);
}
.lr-kal__logo {
	margin: 0;
	font-weight: var(--lr-weight-black);
	font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
	line-height: 1.05;
	letter-spacing: var(--lr-tracking-tight);
	color: var(--lr-text);
}
.lr-kal__reading {
	margin-left: var(--lr-space-sm);
	font-size: var(--lr-font-md);
	font-weight: var(--lr-weight-normal);
	letter-spacing: 0.24em;
	color: var(--lr-text-muted);
	vertical-align: baseline;
}
.lr-kal__tagline {
	margin: var(--lr-space-sm) 0 0;
	font-size: var(--lr-font-md);
	color: var(--lr-text);
	letter-spacing: 0.04em;
}

/* intro セクションの下は詰める（本体をすぐ始める） */
.lr-kal__section {
	padding-top: 0;
}

/* =============================================================
   B) 2カラムレイアウト（左：細い／右：広い）
   ------------------------------------------------------------
   スマホ … 1カラム縦積み（左ナビはトグルで開閉）
   900px〜 … 左 minmax(200px,1fr) ＋ 右 3fr（≒ 左25% / 右75%）
   ============================================================= */
.lr-kal__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lr-space-lg);
}
@media (min-width: 900px) {
	.lr-kal__layout {
		grid-template-columns: minmax(200px, 1fr) 3fr;
		gap: var(--lr-space-xl);
		align-items: start;
	}
}
.lr-kal__main { min-width: 0; }

/* 左カラムを画面に追従（PC・作家詳細と同じ流儀の sticky） */
@media (min-width: 900px) {
	.lr-kal__nav {
		position: sticky;
		top: calc(var(--lr-header-h, 64px) + var(--lr-space-md));
	}
}

/* =============================================================
   C) 左カラム：作品を探す目次
   ============================================================= */

/* ブロック見出し（作品を探す／aLから出会う）
   看板見出し lr-heading とは別階層。小さく・字間広め・ミュート寄り。 */
.lr-kal__nav-heading {
	margin: 0 0 var(--lr-space-sm);
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-bold);
	letter-spacing: 0.12em;
	color: var(--lr-text);
}

/* 「aLから出会う」ブロックは上に余白＋細い区切り線 */
.lr-kal__discover {
	margin-top: var(--lr-space-lg);
	padding-top: var(--lr-space-lg);
	border-top: 1px solid var(--lr-border);
}

/* ---- アコーディオン（作品を探す） ---- */
.lr-kal__acc {
	border-bottom: 1px solid var(--lr-border);
}
.lr-kal__finder .lr-kal__acc:first-of-type {
	border-top: 1px solid var(--lr-border);
}

/* トリガー：枠なしのテキストボタン。右端に ＋ / − マーク */
.lr-kal__acc-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lr-space-sm);
	width: 100%;
	padding: var(--lr-space-sm) 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--lr-font-base);
	color: var(--lr-text);
	text-align: left;
	cursor: pointer;
	transition: color var(--lr-ease);
}
.lr-kal__acc-trigger:hover {
	color: var(--lr-accent);
}

/* ＋ / − マーク（CSSのみ・open で − に） */
.lr-kal__acc-mark {
	position: relative;
	flex: none;
	width: 12px;
	height: 12px;
}
.lr-kal__acc-mark::before,
.lr-kal__acc-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
}
.lr-kal__acc-mark::before { width: 12px; height: 1px; }      /* 横棒 */
.lr-kal__acc-mark::after  { width: 1px;  height: 12px; }     /* 縦棒 */
.lr-kal__acc-trigger[aria-expanded="true"] .lr-kal__acc-mark::after {
	transform: scaleY(0);   /* open で縦棒を消し − にする */
}

/* パネル：開いた条件の選択肢 */
.lr-kal__acc-panel {
	padding: 0 0 var(--lr-space-sm);
}
.lr-kal__acc-panel[hidden] { display: none; }

.lr-kal__options {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--lr-space-2xs);
}
.lr-kal__option {
	display: block;
	padding: var(--lr-space-2xs) 0;
	font-size: var(--lr-font-sm);
	line-height: 1.6;
	color: var(--lr-text);
	text-decoration: none;
	transition: color var(--lr-ease);
}
.lr-kal__option:hover {
	color: var(--lr-accent);
}
/* 選択中（JSが aria-current を付ける想定）：赤＋左に細い罫 */
.lr-kal__option[aria-current="true"] {
	color: var(--lr-accent);
	font-weight: var(--lr-weight-bold);
}
.lr-kal__option-empty {
	padding: var(--lr-space-2xs) 0;
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
}

/* ---- aLから出会う（アコーディオンにせず常時開いたリンク列） ---- */
.lr-kal__discover-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--lr-space-xs);
}
.lr-kal__discover-link {
	display: block;
	font-size: var(--lr-font-sm);
	line-height: 1.6;
	color: var(--lr-text);
	text-decoration: none;
	transition: color var(--lr-ease);
}
.lr-kal__discover-link:hover {
	color: var(--lr-accent);
}
.lr-kal__discover-link[aria-current="true"] {
	color: var(--lr-accent);
	font-weight: var(--lr-weight-bold);
}

/* =============================================================
   D) スマホ：作品を絞り込むトグル
   ------------------------------------------------------------
   PC（900px〜）では非表示。左ナビは常時表示。
   スマホでは左ナビを閉じておき、トグルで開く。
   ============================================================= */
.lr-kal__filter-toggle {
	display: block;
	width: 100%;
	margin-bottom: var(--lr-space-md);
	padding: var(--lr-space-sm);
	border: 1px solid var(--lr-text);
	background: none;
	font: inherit;
	font-size: var(--lr-font-base);
	color: var(--lr-text);
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: color var(--lr-ease), border-color var(--lr-ease);
}
.lr-kal__filter-toggle:hover {
	color: var(--lr-accent);
	border-color: var(--lr-accent);
}
.lr-kal__filter-toggle[aria-expanded="true"] {
	border-color: var(--lr-accent);
	color: var(--lr-accent);
}

/* スマホ：ナビは data-open で開閉 */
@media (max-width: 899px) {
	.lr-kal__nav[data-open="false"] {
		display: none;
	}
	.lr-kal__nav[data-open="true"] {
		margin-bottom: var(--lr-space-lg);
	}
}

/* PC：トグルは不要 */
@media (min-width: 900px) {
	.lr-kal__filter-toggle {
		display: none;
	}
	/* PCでは data-open に関わらず常時表示 */
	.lr-kal__nav[data-open="false"] {
		display: block;
	}
}

/* =============================================================
   E) K.aL 専用作品カード
   ------------------------------------------------------------
   画像・作品名・作家名・価格のみ。枠/背景/影/radius なし。
   作品比率を尊重（正方形クロップしない）。
   ============================================================= */
.lr-kal-card {
	background: none;
}
.lr-kal-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* 画像：一覧では正方形にクロップ（高さを揃えグリッドのガタつきを防ぐ）。
   作品本来の比率は詳細ページで見せる。 */
.lr-kal-card__media {
	margin: 0 0 var(--lr-space-sm);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--lr-bg-subtle);
	line-height: 0;
}
.lr-kal-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 画像なし時のプレースホルダ（media が正方形を確保するので中身だけ中央寄せ） */
.lr-kal-card__noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--lr-text-muted);
	font-size: var(--lr-font-sm);
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.lr-kal-card__body {
	line-height: 0;   /* 子要素の行間リセット（各 p/h3 で明示） */
}
.lr-kal-card__title {
	margin: 0;
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-bold);
	line-height: 1.5;
	color: var(--lr-text);
}
.lr-kal-card__artist {
	margin: 2px 0 0;
	font-size: var(--lr-font-xs);
	line-height: 1.5;
	color: var(--lr-text-muted);
}
.lr-kal-card__price {
	margin: var(--lr-space-2xs) 0 0;
	font-size: var(--lr-font-sm);
	line-height: 1.5;
	color: var(--lr-text);
	font-variant-numeric: tabular-nums;
}
.lr-kal-card__price-note {
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
}

/* hover：画像をわずかに沈める（枠を出さず静かに） */
.lr-kal-card__link:hover .lr-kal-card__img {
	opacity: 0.88;
	transition: opacity var(--lr-ease);
}

/* =============================================================
   F) 選択中フィルタ（チップ）・件数・ページャ
   ============================================================= */

/* ---- 選択中フィルタ ---- */
.lr-kal__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lr-space-xs);
	margin-bottom: var(--lr-space-md);
}
.lr-kal__active-label {
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
}
.lr-kal__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	font-size: var(--lr-font-sm);
	line-height: 1.5;
	color: var(--lr-accent);
	text-decoration: none;
	border: 1px solid var(--lr-accent);
	border-radius: 999px;
	transition: background var(--lr-ease), color var(--lr-ease);
}
.lr-kal__chip:hover {
	background: var(--lr-accent);
	color: var(--lr-white);
}
.lr-kal__chip-x {
	font-size: 0.9em;
	line-height: 1;
}
.lr-kal__clear {
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
	text-decoration: underline;
}
.lr-kal__clear:hover {
	color: var(--lr-accent);
}

/* ---- 件数 ---- */
.lr-kal__count {
	margin: 0 0 var(--lr-space-md);
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- ページャ ---- */
.lr-kal__pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lr-space-2xs);
	margin-top: var(--lr-space-xl);
}
.lr-kal__pager-item .page-numbers {
	display: inline-block;
	min-width: 2.5em;
	padding: 8px 12px;
	font-size: var(--lr-font-sm);
	text-align: center;
	text-decoration: none;
	color: var(--lr-text);
	border: 1px solid var(--lr-border);
	transition: color var(--lr-ease), border-color var(--lr-ease);
}
.lr-kal__pager-item .page-numbers:hover {
	color: var(--lr-accent);
	border-color: var(--lr-accent);
}
.lr-kal__pager-item .page-numbers.current {
	color: var(--lr-white);
	background: var(--lr-accent);
	border-color: var(--lr-accent);
}
.lr-kal__pager-item .page-numbers.dots {
	border-color: transparent;
}

/* =============================================================
   アクセシビリティ：reduce-motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
	.lr-kal__acc-trigger,
	.lr-kal__option,
	.lr-kal__discover-link,
	.lr-kal__filter-toggle,
	.lr-kal-card__img {
		transition: none;
	}
}

/* =============================================================
   G) K.aL のイントロ差別化（このページだけ）
   ------------------------------------------------------------
   共通 lr-intro（黒幕・中央寄せ・画面比の高さ）を利用しつつ、
   K.aL に限り：白背景／通常文字色／中身左寄せ／高さは中身なり／
   左右幅と左端を本体 lr-section(wide) と一致させる。
   識別は body.page-template-page-kal。他ページには影響させない。

   左端一致の要点：
     本体 .lr-section__inner(wide) は
       max-width = var(--lr-width-wide) + gutter*2、左右 padding = gutter。
     イントロも同じ計算にすることで、下の一覧と左端がピクセル単位で揃う。
   ============================================================= */

/* --- 外側：白背景・黒幕解除・画面比の高さを無効化 --- */
.page-template-page-kal .lr-intro {
	background: var(--lr-white, #fff);
	min-height: 0;
	padding-top: calc(var(--lr-header-h, 64px) + var(--lr-space-lg));
	padding-bottom: var(--lr-space-lg);
}

/* --- 内側：本体 wide と同じ幅・同じガター・左寄せ --- */
.page-template-page-kal .lr-intro__inner {
	max-width: calc(var(--lr-width-wide) + var(--lr-gutter) * 2);
	margin-inline: auto;                 /* 中央寄せの幅ブロック（本体と同じ） */
	padding-inline: var(--lr-gutter);    /* 本体と同じガター＝左端が一致 */
	text-align: left;                    /* 中身は左寄せ */
}

/* スマホは本体と同じくガターを詰める（.lr-section__inner の 599px 以下に合わせる） */
@media (max-width: 599px) {
	.page-template-page-kal .lr-intro__inner {
		padding-inline: var(--lr-space-md);   /* 16px */
	}
}

/* --- 文字色：黒幕前提の白文字を通常色へ --- */
.page-template-page-kal .lr-intro__title,
.page-template-page-kal .lr-intro__overview {
	color: var(--lr-text);
}
.page-template-page-kal .lr-intro__subtitle {
	color: var(--lr-text-muted);
}

.page-template-page-kal .lr-intro__title-image img {
	margin-inline: 0;
	max-width: min(160px, 27%);   /* 前回 240px の約 2/3 */
	height: auto;
}

/* --- overview・区切り線も左端へ（中央 auto を解除） --- */
.page-template-page-kal .lr-intro__overview {
	margin-inline: 0;
}

/* PC（900px〜）：概要だけを右へ絶対配置で逃がす。
   左サイド（.lr-intro__inner と title-image/title/subtitle）は一切触らない
   ＝現状の「本体 wide 幅・左端一致・左寄せ」の見た目をそのまま保つ。

   概要の左端＝本体 .lr-kal__layout の右カラム開始位置に合わせる。
   本体は minmax(200px,1fr) 3fr ＋ gap＝--lr-space-xl。
   コンテンツ幅（inner の padding 内側）を C とすると
     左カラム幅 = (C - gap) × 1/4
     概要の左端 = 左padding(gutter) + 左カラム幅 + gap
   100% は padding-box 基準なので (C) に相当する式を calc で組む。

   注意：概要が左サイドより背が高いと下の本体一覧に重なる。
   K.aL の概要はほぼ固定長のため実用上問題ない。長文運用に変わったら grid 方式へ。 */
@media (min-width: 900px) {
	.page-template-page-kal .lr-intro__inner {
		position: relative;   /* 概要の絶対配置の基準（見た目は不変） */
	}

	.page-template-page-kal .lr-intro__overview {
		position: absolute;
		top: var(--lr-space-2xs);   /* タイトル画像の視覚的天との軽い揃え。0 でも可 */
		left: calc(
			var(--lr-gutter)
			+ (100% - var(--lr-gutter) * 2 - var(--lr-space-xl)) / 4
			+ var(--lr-space-xl)
		);
		right: var(--lr-gutter);
		max-width: none;   /* 本体 intro の max-width:640px を解除 */
	}
}
.page-template-page-kal .lr-intro__subtitle::after {
	margin-inline: 0;
	background: var(--lr-accent);        /* 白地なのでブランド赤の短い罫に */
}

.lr-kal-card__media { position: relative; }

.lr-kal-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-block;
	padding: 2px 10px;
	font-size: var(--lr-font-xs);
	font-weight: var(--lr-weight-bold);
	line-height: 1.6;
	border-radius: 2px;
	color: var(--lr-white);
	background: var(--lr-muted);
}
.lr-kal-card__badge[data-status="negotiating"],
.lr-kal-card__badge[data-status="inquiry"]  { background: var(--lr-charcoal); }