@charset "UTF-8";

/* ====================================
   生体詳細ページ（stock.php）
   ==================================== */

/* ====================================
   タイトル（h1）
   ==================================== */

.stock-title {
	/* components.css の h1 スタイルを継承 */
}

.stock-title-slogan {
	display: block;
	font-size: 0.6em;
	margin-bottom: 0.3em;
}

.stock-title-name {
	display: block;
}

.stock-title-variety {
	font-size: 0.7em;
	margin-left: 0.3em;
}

@media (max-width: 767px) {
	.stock-title-slogan {
		margin-bottom: 0.5em;
	}
	.stock-title-variety {
		display: block;
		margin-left: 0;
		margin-top: 0.2em;
	}
}

/* ====================================
   メインエリア: PC=2カラム / SP=1カラム
   ==================================== */

.stock-main-area {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	margin-bottom: 2em;
}

@media (min-width: 768px) {
	.stock-main-area {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2em;
		align-items: start;
	}
}

/* ====================================
   写真カラム
   ==================================== */

.stock-photo-col {
	width: 100%;
}

.stock-photo-main {
	position: relative;
	margin-bottom: 0.75em;
}

.stock-photo-main img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.stock-photo-main img.clickable {
	cursor: pointer;
}

.stock-photo-main img.no-image {
	cursor: default;
}

/* SOLD / 交渉中バッジ（写真右上） */
.stock-badge {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	font-size: 0.9em;
	font-weight: bold;
	padding: 0.3em 0.6em;
	border-radius: 4px;
	pointer-events: none;
}

.stock-badge-sold {
	color: #fff;
	background: rgba(200, 0, 0, 0.9);
}

.stock-badge-negotiating {
	color: #fff;
	background: rgba(200, 150, 0, 0.9);
}

/* ステータス通知（情報欄内） */
.stock-status-notice {
	margin-top: 1em;
	padding: 0.6em 0.8em;
	border-radius: 4px;
	font-weight: bold;
	text-align: center;
}

.stock-status-sold {
	background: light-dark(#fdeaea, #3a2020);
	color: light-dark(#c00, #ff6b6b);
	border: 1px solid light-dark(#f5c6c6, #5a3030);
}

.stock-status-negotiating {
	background: light-dark(#fef8e6, #3a3520);
	color: light-dark(#b8860b, #daa520);
	border: 1px solid light-dark(#f0e0a0, #5a5030);
}

/* 法的規制注意書き（特定動物/CITES1） */
.stock-regulation-notice {
	margin-top: 1em;
	padding: 0.8em 1em;
	border-radius: 4px;
	background: light-dark(#fff3f3, #3a2525);
	border: 2px solid light-dark(#d00, #a44);
	color: light-dark(#900, #faa);
}

.stock-regulation-notice strong {
	display: block;
	margin-bottom: 0.5em;
	font-size: 0.95em;
}

.stock-regulation-notice ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
	font-size: 0.85em;
	line-height: 1.6;
}

.stock-regulation-notice li {
	margin-bottom: 0.3em;
	padding-left: 1em;
	text-indent: -1em;
}

.stock-regulation-notice li::before {
	content: '・';
}

.stock-regulation-notice li:only-child {
	padding-left: 0;
	text-indent: 0;
}

.stock-regulation-notice li:only-child::before {
	content: none;
}

.stock-regulation-notice li:last-child {
	margin-bottom: 0;
}

/* サムネイル */
.stock-photo-thumbnails {
	display: flex;
	gap: 0.5em;
}

.stock-photo-thumbnails img {
	width: calc((100% - 1em) / 3);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.2s;
}

.stock-photo-thumbnails img:hover {
	border-color: light-dark(#007bff, #4a9eff);
}

/* ====================================
   情報カラム
   ==================================== */

.stock-info-col {
	width: 100%;
}

/* 情報リスト（dl） */
.stock-info-list {
	display: grid;
	gap: 0;
}

.stock-info-row {
	display: grid;
	grid-template-columns: 7em 1fr;
	border-bottom: 1px solid light-dark(#eee, #444);
	padding: 0.6em 0;
}

.stock-info-row:first-child {
	border-top: 1px solid light-dark(#eee, #444);
}

.stock-info-row dt {
	font-weight: bold;
	color: light-dark(#555, #bbb);
	font-size: 0.85em;
}

.stock-info-row dd {
	color: light-dark(#333, #ddd);
}

/* 親情報リンク */
.stock-info-row dd a {
	color: light-dark(#007bff, #4a9eff);
	text-decoration: none;
}

.stock-info-row dd a:hover {
	text-decoration: underline;
}

/* 価格行 */
.stock-price-row dd {
	font-size: 1.2em;
	font-weight: bold;
}

.stock-price {
	color: light-dark(#c00, #ff6b6b);
}

/* 商品説明 */
.stock-notes {
	margin-top: 1em;
	padding: 0.75em;
	background: light-dark(#fafafa, #2a2a2a);
	border-radius: 4px;
	line-height: 1.7;
}

/* 文字数に応じたサイズ調整 */
.stock-notes-md {
	font-size: 0.95em;
}

.stock-notes-sm {
	font-size: 0.9em;
}

.stock-notes-xs {
	font-size: 0.85em;
}

/* ====================================
   血統表（ペディグリーチャート）
   netkeiba風: 父系=薄青、母系=薄赤、2列構成
   ==================================== */

.stock-pedigree {
	margin-bottom: 2em;
}

.stock-pedigree-heading {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 0.5em;
	color: light-dark(#333, #ddd);
}

/* 2列×4行グリッド（本個体なし） */
.pedigree-chart {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(4, auto);
	border: 1px solid light-dark(#ddd, #555);
	border-radius: 4px;
	overflow: hidden;
}

/* グリッド配置: 父(上2行) → 父父 → 父母 → 母(下2行) → 母父 → 母母 */
/* 父: 上2行ぶち抜き */
.pedigree-cell:nth-child(1) {
	grid-column: 1;
	grid-row: 1 / 3;
}

/* 父の父 */
.pedigree-cell:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

/* 父の母 */
.pedigree-cell:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

/* 母: 下2行ぶち抜き */
.pedigree-cell:nth-child(4) {
	grid-column: 1;
	grid-row: 3 / 5;
}

/* 母の父 */
.pedigree-cell:nth-child(5) {
	grid-column: 2;
	grid-row: 3;
}

/* 母の母 */
.pedigree-cell:nth-child(6) {
	grid-column: 2;
	grid-row: 4;
}

/* セル共通 */
.pedigree-cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0.6em 0.8em;
	border-right: 1px solid light-dark(#ddd, #555);
	border-bottom: 1px solid light-dark(#ddd, #555);
}

/* 最終行のbottom不要 */
.pedigree-cell:nth-child(3),
.pedigree-cell:nth-child(6) {
	border-bottom: none;
}

.pedigree-cell:nth-child(4) {
	border-bottom: none;
}

/* 右列のborder-right不要 */
.pedigree-cell:nth-child(2),
.pedigree-cell:nth-child(3),
.pedigree-cell:nth-child(5),
.pedigree-cell:nth-child(6) {
	border-right: none;
}

/* 父系（オス）= 薄青 */
.pedigree-sire {
	background: light-dark(#e8f0fe, #1a2a3a);
}

/* 母系（メス）= 薄赤 */
.pedigree-dam {
	background: light-dark(#fde8e8, #3a1a1a);
}

/* 名前 */
.pedigree-name {
	font-size: 0.9em;
	font-weight: bold;
	color: light-dark(#333, #ddd);
	word-break: break-all;
}

a.pedigree-name {
	color: light-dark(#007bff, #4a9eff);
	text-decoration: none;
}

a.pedigree-name:hover {
	text-decoration: underline;
}

.pedigree-empty {
	font-weight: normal;
	color: light-dark(#999, #888);
}

/* 付加情報（誕生年・キャッチコピー） */
.pedigree-meta {
	display: block;
	font-size: 0.75em;
	font-weight: normal;
	color: light-dark(#777, #999);
	margin-top: 0.15em;
}

/* SP: フォント縮小 */
@media (max-width: 767px) {
	.pedigree-cell {
		padding: 0.4em 0.5em;
	}

	.pedigree-name {
		font-size: 0.75em;
	}

	.pedigree-meta {
		font-size: 0.65em;
	}
}

/* ====================================
   動画セクション
   ==================================== */

.stock-video {
	margin-bottom: 2em;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
	max-width: 100%;
	border-radius: 4px;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ====================================
   追加情報セクション（グリッド表示）
   ==================================== */

.stock-additional-info {
	margin-bottom: 2em;
}

.stock-additional-info-heading {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 0.5em;
	color: light-dark(#333, #ddd);
}

/* 追加情報用グリッド: PC=3列 / SP=2列 */
.stock-additional-info .stock-info-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	border: 1px solid light-dark(#eee, #444);
	border-radius: 4px;
	overflow: hidden;
}

@media (min-width: 768px) {
	.stock-additional-info .stock-info-list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.stock-additional-info .stock-info-row {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	padding: 0.4em 0.6em;
	border-bottom: 1px solid light-dark(#eee, #444);
	border-right: 1px solid light-dark(#eee, #444);
	background: light-dark(#fafafa, #252525);
}

@media (min-width: 768px) {
	.stock-additional-info .stock-info-row {
		flex-direction: row;
		align-items: baseline;
		gap: 0.4em;
	}
}

/* 右端セルの右ボーダー消す */
.stock-additional-info .stock-info-row:nth-child(2n) {
	border-right: none;
}
@media (min-width: 768px) {
	.stock-additional-info .stock-info-row:nth-child(2n) {
		border-right: 1px solid light-dark(#eee, #444);
	}
	.stock-additional-info .stock-info-row:nth-child(4n) {
		border-right: none;
	}
}

/* first-childのborder-top不要（外枠で対応） */
.stock-additional-info .stock-info-row:first-child {
	border-top: none;
}

.stock-additional-info .stock-info-row dt {
	font-size: 0.75em;
	white-space: nowrap;
}

.stock-additional-info .stock-info-row dt::after {
	content: ':';
}

.stock-additional-info .stock-info-row dd {
	font-size: 0.85em;
}

.stock-species-notes {
	padding: 1em;
	background: light-dark(#f9f9f9, #2a2a2a);
	border-radius: 4px;
	line-height: 1.8;
}

/* ====================================
   画像クリック可能表示
   ==================================== */

.clickable {
	cursor: pointer;
	transition: opacity 0.2s;
}

.clickable:hover {
	opacity: 0.9;
}

/* ====================================
   レスポンシブ
   ==================================== */

@media (max-width: 767px) {
	.stock-info-row {
		grid-template-columns: 6em 1fr;
	}

	.stock-info-row dt {
		font-size: 0.8em;
	}

	.stock-badge {
		font-size: 0.8em;
	}
}