/* =========================================================
   作品カード（展示会 single の作品一覧）
   配置: assets/css/al/artwork.css（aL固有）
   lr- 規約：構造=クラス／状態=データ属性／赤は能動アクションの一点のみ。
   色はトークン参照に統一。
   ========================================================= */
.lr-artwork-card {
	display: flex;
	flex-direction: column;
	background: var(--lr-bg);
}

/* カード全体を覆うリンク */
.lr-artwork-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* 画像領域：正方形に統一 */
.lr-artwork-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--lr-off-white);
}
.lr-artwork-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.lr-artwork-card__link:hover .lr-artwork-card__media img {
	transform: scale(1.04);
}

/* バッジ（画像左上） */
.lr-artwork-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-artwork-card__badge[data-status="on-sale"],
.lr-artwork-card__badge[data-status="lottery"]      { background: var(--lr-accent); }
/* 要問合せ系（チャコール） */
.lr-artwork-card__badge[data-status="negotiating"],
.lr-artwork-card__badge[data-status="inquiry"],
.lr-artwork-card__badge[data-status="store-only"]   { background: var(--lr-charcoal); }
/* 終了・非販売・開催前系（グレー） */
.lr-artwork-card__badge[data-status="sold"],
.lr-artwork-card__badge[data-status="ended"],
.lr-artwork-card__badge[data-status="not-for-sale"],
.lr-artwork-card__badge[data-status="upcoming"]     { background: var(--lr-muted); }

/* 本文 */
.lr-artwork-card__body { padding: 10px 2px 0; }
.lr-artwork-card__title {
	font-size: 14px;
	font-weight: var(--lr-weight-bold);
	line-height: 1.5;
	color: var(--lr-black);
	margin: 0;
}
.lr-artwork-card__price {
	font-size: 14px;
	color: var(--lr-text);
	margin: 4px 0 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.lr-artwork-card__onsale {
	font-size: 12px;
	color: var(--lr-muted);
	font-weight: var(--lr-weight-normal);
}
.lr-artwork-card__price-note {
	font-size: 12px;
	color: var(--lr-muted);
}
.lr-artwork-card__technique,
.lr-artwork-card__size,
.lr-artwork-card__artist {
	font-size: 12px;
	color: var(--lr-muted);
	margin: 4px 0 0;
	line-height: 1.5;
}

/* アクションボタン */
.lr-artwork-card__action { margin-top: 10px; }
.lr-artwork-card__btn {
	display: block;
	text-align: center;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: var(--lr-weight-bold);
	border-radius: var(--lr-radius);
	background: var(--lr-accent);
	color: var(--lr-white);
	text-decoration: none;
	transition: opacity .2s ease;
}
.lr-artwork-card__btn:hover { opacity: .85; }
.lr-artwork-card__btn[data-action="inquiry"],
.lr-artwork-card__btn[data-action="negotiate"] {
	background: var(--lr-charcoal);
}

/* =========================================================
   作品詳細ページ レイアウト（al固有・移植で置いていく）
   ※ 既存 assets/css/al/40-artwork.css の末尾に追記すること（丸ごと上書き禁止）
   汎用部品（lr-button / lr-price）は core 側。ここは作品ページ固有の骨格のみ。
   ========================================================= */

/* ===== レイアウト骨格（スマホ1カラム → 900pxで画像／情報の2カラム） ===== */
.lr-artwork__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lr-space-40, 40px);
}
@media (min-width: 900px) {
	.lr-artwork__layout {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		align-items: start;
	}
}

/* ===== 画像エリア ===== */
.lr-artwork__media {
	margin: 0;
}
.lr-artwork__main-image {
	width: 100%;
	height: auto;
	display: block;
	background: var(--lr-bg-subtle, #f2f0ef);
}
.lr-artwork__no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--lr-bg-subtle, #f2f0ef);
	color: var(--lr-muted);
	font-size: var(--lr-font-sm, 13px);
}

/* サムネイル列（複数画像時） */
.lr-artwork__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}
.lr-artwork__thumb img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	cursor: pointer;
	background: var(--lr-bg-subtle, #f2f0ef);
}

/* ===== 情報エリア ===== */
.lr-artwork__header {
	margin-bottom: var(--lr-space-24, 24px);
}
.lr-artwork__artist {
	margin: 0 0 4px;
	font-size: var(--lr-font-sm, 13px);
	color: var(--lr-muted);
}
.lr-artwork__artist a {
	color: var(--lr-text);
	text-decoration: none;
}
.lr-artwork__artist a:hover { text-decoration: underline; }
.lr-artwork__artist-en {
	margin-left: 8px;
	color: var(--lr-muted);
}
.lr-artwork__title {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: var(--lr-weight-black);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--lr-text);
}
.lr-artwork__title-reading {
	display: block;
	margin-top: 4px;
	font-size: var(--lr-font-sm, 13px);
	font-weight: var(--lr-weight-normal, 400);
	color: var(--lr-muted);
}

/* スペック定義リスト */
.lr-artwork__spec {
	margin: 0 0 var(--lr-space-24, 24px);
	padding: 0;
}
.lr-artwork__spec-row {
	display: grid;
	grid-template-columns: 5em 1fr;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--lr-line, #e5e2e0);
}
.lr-artwork__spec-key {
	margin: 0;
	font-size: var(--lr-font-sm, 13px);
	color: var(--lr-muted);
}
.lr-artwork__spec-val {
	margin: 0;
	font-size: var(--lr-font-sm, 13px);
	color: var(--lr-text);
}

/* 購入セクション */
.lr-artwork__purchase {
	margin: 0 0 var(--lr-space-24, 24px);
	padding: var(--lr-space-24, 24px);
	background: var(--lr-bg-subtle, #f2f0ef);
	border-radius: var(--lr-radius, 2px);
}
.lr-artwork__price {
	margin-bottom: var(--lr-space-16, 16px);
	display: flex;
	align-items: baseline;   /* 価格の文字とバッジの下端を揃える */
	flex-wrap: wrap;
	gap: 8px;
}
.lr-artwork__status {
	font-size: var(--lr-font-xs, 12px);
	font-weight: var(--lr-weight-bold);
	padding: 2px 10px;
	border-radius: 2px;
	color: var(--lr-white);
	background: var(--lr-muted);
	line-height: 1.8;
}
/* 状態色：能動＝赤、交渉・問合せ系＝チャコール、終了・非販売・開催前＝グレー
   data-status は al_artwork_badge() の type（ハイフン区切り）と一致させる */
.lr-artwork__status[data-status="on-sale"],
.lr-artwork__status[data-status="lottery"]      { background: var(--lr-accent); }
.lr-artwork__status[data-status="negotiating"],
.lr-artwork__status[data-status="inquiry"],
.lr-artwork__status[data-status="store-only"]   { background: var(--lr-text); }
.lr-artwork__status[data-status="sold"],
.lr-artwork__status[data-status="ended"],
.lr-artwork__status[data-status="not-for-sale"],
.lr-artwork__status[data-status="upcoming"]     { background: var(--lr-muted); }

.lr-artwork__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lr-artwork__actions .lr-button { width: 100%; }
.lr-artwork__shipping-note {
	margin: 0;
	font-size: var(--lr-font-xs, 12px);
	color: var(--lr-muted);
}

/* 説明文・作家経歴 */
.lr-artwork__description {
	margin: 0 0 var(--lr-space-24, 24px);
}
.lr-artwork__artist-bio {
	margin: 0 0 var(--lr-space-24, 24px);
}

/* フッターメタ */
.lr-artwork__meta {
	margin-top: var(--lr-space-24, 24px);
	padding-top: var(--lr-space-16, 16px);
	border-top: 1px solid var(--lr-line, #e5e2e0);
	font-size: var(--lr-font-sm, 13px);
	color: var(--lr-muted);
}
.lr-artwork__meta a {
	color: var(--lr-text);
	text-decoration: none;
}
.lr-artwork__meta a:hover { text-decoration: underline; }
.lr-artwork__exhibition { margin: 0 0 4px; }
.lr-artwork__sku { margin: 0; }

/* =============================================================
   作品ナビゲーション（前後 ｜ 親）— A案：線で区切る
   ※ 既存 40-artwork.css の「作品ナビゲーション」ブロックを
     まるごとこの内容に差し替えること（旧 lr-artwork-nav 定義を置換）。
   ・PC   … 3カラム、前後リンクと中央を縦罫で区切る
   ・スマホ … 3等分、各セル min-height 44px 確保（タップ領域）
   ・中央のみ赤（--lr-accent／能動）、前後はチャコール
   ・アイコンは currentColor 継承（JSがインラインSVGを差し込む）
   ============================================================= */

.lr-artwork-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	position: relative;   /* 追加 */
	/* border-top / border-bottom は削除 */
}

.lr-artwork-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	position: relative;   /* 追加 */
	/* border-top / border-bottom は削除 */
}

/* 上下の線だけビューポート全幅に伸ばす */
.lr-artwork-nav::before,
.lr-artwork-nav::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	border-top: 1px solid var(--lr-line, #e5e2e0);
	pointer-events: none;
}
.lr-artwork-nav::before { top: 0; }
.lr-artwork-nav::after  { bottom: 0; }

.lr-artwork-nav[hidden] { display: none; }

/* 各スロット */
.lr-artwork-nav__prev,
.lr-artwork-nav__parent,
.lr-artwork-nav__next {
	display: flex;
	min-height: 44px;
}
.lr-artwork-nav__prev   { justify-content: flex-start; }
.lr-artwork-nav__parent { justify-content: center; }
.lr-artwork-nav__next   { justify-content: flex-end; }

/* 中央を縦罫で挟む（A案の肝） */
.lr-artwork-nav__parent {
	border-left: 1px solid var(--lr-line, #e5e2e0);
	border-right: 1px solid var(--lr-line, #e5e2e0);
}

/* リンク共通 */
.lr-artwork-nav__link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 12px 20px;
	text-decoration: none;
	color: var(--lr-text);
	transition: background-color .2s ease, color .2s ease;
}
.lr-artwork-nav__link--prev { align-items: flex-start; text-align: left; }
.lr-artwork-nav__link--next { align-items: flex-end;  text-align: right; }
.lr-artwork-nav__link:hover { background: var(--lr-bg-subtle, #f7f6f5); }

/* 前後：方向ラベル＋作品名 */
.lr-artwork-nav__dir {
	font-size: var(--lr-font-xs, 12px);
	color: var(--lr-muted);
}
.lr-artwork-nav__title {
	font-size: var(--lr-font-sm, 14px);
	line-height: 1.3;
}

/* 中央（親）：アイコン＋ラベル・横並び・赤（能動） */
.lr-artwork-nav__link--parent {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	color: var(--lr-accent);
	font-weight: var(--lr-weight-black);
}
.lr-artwork-nav__icon {
	flex: none;
	display: block;
}
.lr-artwork-nav__parent-label {
	font-size: var(--lr-font-sm, 14px);
}

/* ---------- スマホ：3等分・アイコン上/ラベル下で均等 ---------- */
@media (max-width: 599px) {
	.lr-artwork-nav {
		grid-template-columns: 1fr 1fr 1fr;
	}
	/* 前後も中央寄せにして3つを視覚的に均等化 */
	.lr-artwork-nav__prev,
	.lr-artwork-nav__next {
		justify-content: center;
	}
	.lr-artwork-nav__link {
		align-items: center;
		text-align: center;
		padding: 10px 8px;
		width: 100%;
	}
	.lr-artwork-nav__link--prev,
	.lr-artwork-nav__link--next {
		align-items: center;
		text-align: center;
	}
	/* スマホは作品名を省き、方向のみ（幅が狭いため） */
	.lr-artwork-nav__title { display: none; }
	.lr-artwork-nav__dir {
		font-size: var(--lr-font-sm, 13px);
		color: var(--lr-text);
	}
	/* 中央はアイコン上・ラベル下の縦積み */
	.lr-artwork-nav__link--parent {
		flex-direction: column;
		gap: 4px;
	}
}

/* ---------- h2要素の調整 ---------- */
.lr-artwork .lr-heading {
    margin: 0 0 var(--lr-space-sm);
	border-left: 6px solid var(--lr-charcoal);
}
.lr-artwork .lr-heading__title {
    font-size: var(--lr-font-md);
}

/* ---------- 作家ページリンクの調整 ---------- */
.lr-artwork__artist-more {
    margin: var(--lr-space-md) 0 0;
}