/* ============================================================
   about.css — ABOUT SEFU ページ専用スタイル
   （is_page_template('page-about.php') でのみ enqueue）
   現在含む: SHIP DATA セクション
   今後: DECK PLAN セクション（タブ切替）を追加予定
   ※ 配色/フォント/余白はサイト共通トークン（style.css :root）を使用
   ============================================================ */

/* ===== SHIP DATA ========================================
   テキスト+画像の横並び。左=見出し+本文+スペック表 / 右=船舶外観写真 */
.ship-data {
	padding: var(--s-section-y) 0 8rem; /* 下80px：DECK PLAN上80pxと合わせて間隔160px */
}

.ship-data__inner {
	width: 128rem; /* 1280px固定。section-profile と同じグリッド基準で中央寄せ */
	margin: 0 auto;
	display: grid;
	grid-template-columns: 40rem 78rem; /* 左400px / 右780px。右カラム左端=DESIGNER左カラム右端(500px)、左カラム左端=0で揃う */
	column-gap: 10rem; /* 左右カラム間 100px */
	align-items: center;
}

/* --- 左カラム: テキスト --- */
.ship-data__body {
	margin-top: 2.4rem;
	max-width: 48rem;
	color: var(--c-ink);
	font-size: 1.5rem;
	line-height: 2.2; /* v3.175: 他ページ本文（.section__body）と統一（2.1→2.2） */
}

.ship-data__body p + p {
	margin-top: 0.5em; /* v3.175: 段落間 0.5em（.section__body と統一。旧 1.6rem を置換） */
}

/* --- スペック表（2カラムの定義リスト） --- */
.ship-data__specs {
	margin-top: 4rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 4rem;
}

/* グループ（基本データ / 要目） */
.ship-data__spec-group {
	min-width: 0;
}

.ship-data__spec-list {
	margin: 0;
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
	padding: 0.8rem 0;
}

/* 1項目：ラベル …… 値（点線リーダーで連結、値は右端で揃う） */
.ship-data__spec {
	display: flex;
	align-items: baseline;
	padding: 1rem 0.4rem;
}

.ship-data__spec-label {
	display: flex;
	align-items: baseline;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
	color: var(--c-ink-mute);
}

.ship-data__spec-label::after {
	content: '';
	flex: 1 1 auto;
	margin: 0 0.8rem;
	border-bottom: 1px dotted var(--c-ink-mute);
	transform: translateY(-0.25em);
	opacity: 0.6;
}

.ship-data__spec-value {
	flex: 0 0 auto;
	margin: 0;
	font-size: 1.4rem;
	letter-spacing: 0.04em;
	color: var(--c-ink);
	white-space: nowrap;
}

/* --- 右カラム: 画像 --- */
.ship-data__media {
	position: relative;
}

.ship-data__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.ship-data__img--placeholder {
	aspect-ratio: 4 / 3;
	background-color: var(--c-bg-alt);
}

/* ===== レスポンシブ（SP: 縦積み） ======================== */
@media (max-width: 768px) {
	/* v3.174/v3.175: SP のセクション間余白を統一。profile→ship-data（PC接続マージン3.2rem）を SP で 0 に戻し、
	   ship-data 下 padding(8rem) を撤去、deck-plan 上 padding を 8rem→var(--s-section-y) に下げる。
	   これで profile→ship-data と ship-data→deck-plan が同じ 6.4rem（= var(--s-section-y)）に揃う。 */
	.section-profile + .ship-data {
		margin-top: 0; /* v3.175: PC の 160px 接続マージンを SP で解除 */
	}
	.ship-data {
		padding-bottom: 0; /* 下 8rem は SP 不要。間隔は次セクションの上 padding に一本化 */
	}
	.deck-plan {
		padding-top: var(--s-section-y); /* 8rem→6.4rem（SP）。ship-data 上と同間隔に */
	}

	.ship-data__inner {
		width: 100%;
		padding: 0 var(--s-page-x);
		grid-template-columns: 1fr;
		gap: 0; /* v3.166: 均一 gap を廃し、各要素の margin で間隔を個別制御 */
	}

	/* v3.164: SP の表示順を 見出し → 画像 → 本文 → スペック に。
	   heading/body/specs は __text 内、media は別要素なので、__text を display:contents で
	   解体して __inner(grid 1fr) 直下に出し、order で並べ替える。 */
	.ship-data__text {
		display: contents;
	}
	.ship-data .section-heading {
		order: 1;
		margin-bottom: 0; /* v3.166: 見出し↔画像 を詰める（全 .section-heading ではなく ship-data 限定） */
	}
	.ship-data__media { order: 2; }
	.ship-data__body  { order: 3; }
	.ship-data__specs { order: 4; }

	.ship-data__body {
		max-width: none;
		font-size: 1.4rem;
		margin-top: 1.2rem; /* v3.166: 画像↔本文 を 2.4rem→1.2rem に詰める（gap:0 化に伴い margin で制御） */
		/* v3.175: line-height:2 を撤去し base の 2.2 を継承（他ページ本文と統一） */
	}

	.ship-data__specs {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 0; /* v3.164: 2グループを隙間なく連結 */
		margin-top: 3.2rem;
	}

	/* v3.164: SP は2グループが縦積み。1つ目の下罫線と2つ目の上罫線を消し、隙間も無くして
	   2つで1つの spec-group に見せる（グループが2つある時のみ適用） */
	.ship-data__spec-group:first-child:not(:last-child) .ship-data__spec-list {
		border-bottom: none;
		padding-bottom: 0; /* v3.165: margin は元から0。連結部の余白源は padding なのでこれを0に（項目間2remと揃い継ぎ目が消える） */
	}
	.ship-data__spec-group:last-child:not(:first-child) .ship-data__spec-list {
		border-top: none;
		padding-top: 0; /* v3.165 */
	}
}

/* ===== DECK PLAN ========================================
   タブ切替。左=デッキ図(+ホットスポット) / 右=縦カルーセル写真。
   引き出し線(SVG)・クリックで中央表示(スロットマシン)は about.js。
   写真は 380×214 固定。1〜3枚=静止（プランに対し上下中央）/ 4枚以上=縦ループ。 */
.deck-plan {
	padding: 8rem var(--s-page-x) var(--s-section-y); /* 上80px：SHIP DATA下80pxと合わせて間隔160px */
}
.deck-plan__inner {
	max-width: var(--s-content-max);
	margin: 0 auto;
}

/* --- タブ --- */
.deck-plan__tabs {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 2.8rem;
	margin: 4rem 0 0;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--c-rule);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.deck-plan__tabs::-webkit-scrollbar { display: none; }

.deck-plan__tab {
	flex: 0 0 auto;
	position: relative;
	padding: 0.4rem 0.2rem;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--f-en);
	font-size: 1.5rem;
	letter-spacing: 0.06em;
	color: var(--c-ink-mute);
	white-space: nowrap;
	transition: color 0.3s ease;
}
.deck-plan__tab::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1.7rem;
	width: 100%;
	height: 1px;
	background: var(--c-accent);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.deck-plan__tab:hover { color: var(--c-ink); }
.deck-plan__tab.is-active { color: var(--c-ink); }
.deck-plan__tab.is-active::after { opacity: 1; }

/* --- パネル --- */
.deck-plan__panel {
	position: relative;
	margin-top: 3rem; /* v3.190: 5.6→3rem（見出し/タブ↔パネルを詰める） */
	opacity: 1;
	transition: opacity 0.55s cubic-bezier(0.33, 1, 0.68, 1); /* 表示=ゆっくりふわっと */
}
.deck-plan__panel[hidden] { display: none; }
.deck-plan__panel.is-entering { opacity: 0; transition: none; }  /* 開始状態（瞬間にゼロ） */
.deck-plan__panel.is-leaving {
	opacity: 0;
	transition: opacity 0.43s cubic-bezier(0.45, 0, 0.55, 1);     /* 退場=やわらかく */
}
@media (prefers-reduced-motion: reduce) {
	.deck-plan__panel,
	.deck-plan__panel.is-leaving { transition: none; }
}

/* 地図(左) / カルーセル(右) の2カラム。SVGはこのグリッドの外側に重ねる */
.deck-plan__grid {
	display: grid;
	grid-template-columns: minmax(0, 38rem) 38rem; /* v3.188: 左カラムの 1fr を廃止（マップが左に寄り右カルーセルとの間に大余白が出るため） */
	justify-content: center;                       /* v3.188: 図＋カルーセルを1つのまとまりとして左右中央へ */
	align-items: center;
	gap: 4rem;                                     /* v3.188: 5.6→4rem（図とカルーセルを少し近づける） */
}
/* v3.189: 写真画像が0枚のデッキはマップ単独・左右中央（空カルーセル枠を出さない） */
.deck-plan__grid--map-only { grid-template-columns: minmax(0, 38rem); }
.deck-plan__grid--map-only .deck-plan__viewport { display: none; }

/* --- Yacht view（左=詳細テキスト / 右=全デッキプラン画像） --- */
.deck-plan__yacht {
	display: grid;
	grid-template-columns: 24rem minmax(0, 1fr);
	gap: 4.8rem;
	align-items: start;
	margin-top: 5.6rem;
}
.deck-plan__yacht-detail { display: flex; flex-direction: column; gap: 3.2rem; }
.deck-plan__spec-title,
.deck-plan__legend-title {
	font-family: var(--f-en);
	font-size: 1.3rem;
	letter-spacing: 0.16em;
	color: var(--c-accent);
	font-weight: 300; /* v3.103 */
	margin-bottom: 1.2rem;
}
.deck-plan__spec-list { display: flex; flex-direction: column; gap: 0; }
.deck-plan__spec-row {
	display: flex;
	justify-content: space-between;
	gap: 1.2rem;
	font-size: 1.25rem;
	color: var(--c-ink-mute);
	border-bottom: 1px solid var(--c-rule);
	padding: 0.7rem 0;
}
.deck-plan__spec-row dt { letter-spacing: 0.04em; }
.deck-plan__spec-row dd { margin: 0; color: var(--c-ink); }
.deck-plan__legend-list,
.deck-plan__symbols { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.deck-plan__legend-item { display: flex; align-items: center; gap: 1rem; font-size: 1.2rem; color: var(--c-ink-mute); }
.deck-plan__swatch { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border: 1px solid rgba(255, 255, 255, 0.2); }
.deck-plan__symbols li { font-size: 1.2rem; color: var(--c-ink-mute); letter-spacing: 0.02em; font-variant-emoji: text; /* v3.187: ↕等を確実にテキスト(モノクロ)表示（VS15 の補強） */ }
.deck-plan__yacht-plan { min-width: 0; }
.deck-plan__yacht-img { display: block; width: 100%; height: auto; border-radius: 0.4rem; } /* v3.190: 白地ラインアートを紺地に置くため軽い角丸 */
.deck-plan__yacht-img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 7;
	background-color: var(--c-bg-alt);
	color: var(--c-ink-mute);
	font-size: 1.3rem;
	text-align: center;
	line-height: 1.9;
}

/* --- 引き出し線（SVGオーバーレイ・パネル全体に重なる） --- */
/* --- 引き出し線（デッキ図に固定。viewBox 0 0 100 で%座標） --- */
.deck-plan__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}
.deck-plan__line {
	stroke: var(--c-ink-mute); /* v3.222: ゴールド→サイトのグレー系で統一 */
	stroke-width: 1;
	opacity: 0.5;
	vector-effect: non-scaling-stroke;
}

/* --- 左: デッキ図 + ホットスポット --- */
.deck-plan__map { position: relative; }
.deck-plan__map-inner { position: relative; max-width: 38rem; margin: 0 auto; } /* v3.188: 34→38rem（マップを少し大きく） */
.deck-plan__map-img { display: block; width: 100%; height: auto; }
.deck-plan__map-img--placeholder { aspect-ratio: 3 / 4; background-color: var(--c-bg-alt); }

.deck-plan__hotspot {
	position: absolute;
	transform: translate(-100%, -50%); /* v3.224: 中央(-50%)→右端(-100%)基準。同じXでラベル右端が揃う／引き出し線は右端から出る */
	z-index: 3;
	padding: 0.5rem 1.2rem;
	background: var(--c-ink-mute); /* v3.222: ゴールド→サイトのグレー系で統一（線と揃える） */
	color: var(--c-bg);
	border: 0;
	cursor: pointer;
	font-family: var(--f-en);
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	line-height: 1;
	white-space: nowrap;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.deck-plan__hotspot:hover { transform: translate(-100%, -50%) scale(1.04); }
/* v3.227: アクティブ（選択中）＝ゴールド塗り。画像側の枠（--c-accent）と色を統一し「対」と分かるように */
.deck-plan__hotspot.is-active {
	background: var(--c-accent);
	color: var(--c-bg);
	box-shadow: 0 0 0 0.4rem rgba(201, 184, 137, 0.30); /* ゴールドの淡いグロー */
}
/* v3.187/227: 画像なし photo のタグ＝MAPPING のみ（カルーセル非連動・クリック不可）。
   塗り（＝クリック可）と区別するため、透明地＋ハーフラインの「ゴースト」表示に */
.deck-plan__hotspot--static {
	cursor: default;
	background: transparent;
	color: var(--c-ink-mute);
	box-shadow: inset 0 0 0 1px var(--c-ink-mute);
}
.deck-plan__hotspot--static:hover { transform: translate(-100%, -50%); }

/* --- 右: 縦カルーセル --- */
.deck-plan__viewport {
	position: relative;
	z-index: 2;
	width: 38rem;
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
/* is-looping 時は about.js が height（3スロット分）を設定。縦送りはCSSトランジション */
.deck-plan__viewport.is-looping .deck-plan__track {
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 手動操作（マウスドラッグ／ホイール）可能なことを示すカーソル */
.deck-plan__viewport.is-looping { cursor: grab; }
.deck-plan__viewport.is-dragging { cursor: grabbing; }
.deck-plan__viewport.is-dragging .deck-plan__track { transition: none; } /* ドラッグ中は指に追従 */
.deck-plan__track {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	will-change: transform;
}

.deck-plan__photo {
	flex: 0 0 auto;
	width: 38rem;
	max-width: 100%;
	cursor: pointer; /* v3.227: 画像クリックで対応ボタンをactiveに（双方向） */
}
.deck-plan__photo-fig { margin: 0; transition: opacity 0.4s ease; }
.deck-plan__photo-img {
	display: block;
	width: 38rem;
	max-width: 100%;
	height: 21.4rem;
	object-fit: cover;
}
.deck-plan__photo-img--placeholder { background-color: var(--c-bg-alt); }
.deck-plan__photo-cap {
	margin-top: 1rem;
	text-align: right;
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--c-ink-mute);
}
.deck-plan__photo.is-focus .deck-plan__photo-img {
	outline: 2px solid var(--c-accent); /* v3.227: 1→2px で選択を明確化（ボタンのゴールドと統一） */
	outline-offset: -2px;
}
/* v3.227: 選択中(has-focus)のみ、非選択の写真を減光＝active/非activeを区別（選択前は全て通常表示） */
.deck-plan__track.has-focus .deck-plan__photo:not(.is-focus) .deck-plan__photo-fig { opacity: 0.4; }

/* ===== レスポンシブ（SP: マップ縮小＋写真は横スクロール／連動はabout.js維持） === */
@media (max-width: 768px) {
	/* v3.230: タブ列だけ全幅(100vw)に出し、右端を画面端で見切れさせてスクロール可能と示す。
	   親パディングを margin で相殺して画面左端まで広げ、padding-left で1枚目(YACHT VIEW)の
	   開始位置は現行どおりコンテンツ左(=var(--s-page-x))に維持。padding-bottom はベース継承。 */
	.deck-plan__tabs {
		justify-content: flex-start;
		gap: 2rem;
		width: 100vw;
		margin: 0 0 0 calc(-1 * var(--s-page-x));
		padding-left: var(--s-page-x);
		padding-right: var(--s-page-x);
		scroll-padding-left: var(--s-page-x);
	}
	.deck-plan__panel { margin-top: 3.2rem; }
	.deck-plan__grid {
		grid-template-columns: 1fr;
		gap: 3.2rem;
	}
	.deck-plan__yacht {
		grid-template-columns: 1fr;
		gap: 3.2rem;
	}
	/* v3.231: マップを中央寄りに。左端は40%のまま維持（=ラベルの逃げ場は不変）、
	   サイズ縮小＋右に14%の余白を作って「右端ベタ付き」を解消し中央寄せ感を出す。 */
	.deck-plan__map-inner { max-width: 46%; margin-left: auto; margin-right: 14%; }
	.deck-plan__hotspot {
		font-size: 0.8rem;       /* v3.231: 0.9→0.8（重なり・はみ出し回避） */
		padding: 0.3rem 0.6rem;  /* v3.231: 0.35rem 0.7rem→縮小 */
		letter-spacing: 0.03em;
	}
	.deck-plan__hotspot:hover { transform: translate(-100%, -50%); } /* SPはhover拡大なし */

	/* v3.229: 写真カルーセルを縦→横スクロール（ネイティブ・スナップ）。連動はabout.jsが維持 */
	.deck-plan__viewport {
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.deck-plan__viewport::-webkit-scrollbar { display: none; }
	.deck-plan__track {
		flex-direction: row;
		gap: 1.6rem;
	}
	.deck-plan__photo {
		flex: 0 0 86%;
		width: 86%;
		scroll-snap-align: center;
	}
	.deck-plan__photo-img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.deck-plan__photo-cap { text-align: center; }
}
/* ============================================================
   ABOUT Intro: SHIP NAME ラベル + SEFU ロゴ
   （section-intro-carousel の section__inner 先頭。ABOUT専用）
   ============================================================ */
.section__shipname-label {
	text-align: center;  /* SHIP NAME センタリング */
	font-size: 1.4rem;
	letter-spacing: 0.25em;
	color: var(--c-ink-mute);
	margin: 0 0 2.4rem;  /* SHIP NAME → SEFU */
}

.section__shipname-logo {
	width: 20rem;        /* 200px。23rem→20remにサイズダウン（v3.61） */
	margin: 0 auto 5rem; /* SEFU → 見出しの余白 */
	color: var(--c-ink); /* SVGは currentColor＝白 */
	line-height: 0;
}

.section__shipname-logo-svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ABOUT のみ Intro 本文をセンタリング（他ページは左寄せのまま） */
.section--intro-carousel .section__body {
	text-align: center;
}

/* 見出し → 本文 の余白をカンプ寄せに（ABOUT Intro限定） */
.section--intro-carousel .section__heading {
	margin-bottom: 5rem;
}

/* ============================================================
   ABOUT 画像ギャラリー（feature-section__gallery を流用）
   6枚＝3カラム×2行。4枚目以降（2行目）の上マージンを row-gap で確保。
   ============================================================ */
.feature-section__gallery {
	margin: 10rem auto 0; /* 本文→ギャラリーの上余白 80→100px（ABOUT限定） */
	row-gap: 4rem;        /* 上3つ↔下3つ。5rem から10px縮小 */
}

/* Intro（ギャラリー含む） → DESIGNER のセクション間余白をカンプ寄せに */
.section--intro-carousel + .section-profile { margin-top: 6.4rem; }

@media (max-width: 768px) {
	/* v3.167: SP は intro-carousel → section-profile の余白を 0 に（PC は 6.4rem 維持） */
	.section--intro-carousel + .section-profile { margin-top: 0; }
	.section__shipname-logo { width: 18rem; margin-bottom: 3.6rem; }
	.feature-section__gallery { margin-top: 5.6rem; row-gap: 3.2rem; } /* SPは上余白56px・既定gap */
}

/* ============================================================
   SHIP DATA / DECK PLAN の見出しを DESIGNER（section-profile）と同フォントに
   英: 24→36px(SP32px) / 日: 1.4rem。weight・字間も label-en/ja に合わせる。
   ============================================================ */
.ship-data .section-heading--a .section-heading__en,
.deck-plan .section-heading--a .section-heading__en {
	font-size: 3.6rem;       /* 36px = DESIGNER label-en */
	font-weight: 300;
	letter-spacing: 0.1em;
	margin-bottom: 0.8rem;
}
.ship-data .section-heading--a .section-heading__ja,
.deck-plan .section-heading--a .section-heading__ja {
	font-size: 1.4rem;       /* デザイナー/総料理長と同じ */
	letter-spacing: 0.1em;
}

@media (max-width: 768px) {
	.ship-data .section-heading--a .section-heading__en,
	.deck-plan .section-heading--a .section-heading__en {
		font-size: 3.2rem;   /* 32px = DESIGNER label-en の SP値 */
	}
}

/* SHIP DATA の見出しは左寄せ（section-heading のデフォルト中央を上書き。DECK PLANは中央のまま） */
.ship-data .section-heading {
	text-align: left;
}

/* v3.162: SP では SHIP DATA 見出しを中央寄せ（PC は左のまま）。
   base の text-align:left（同詳細度）より後ろに置いて SP で後勝ちにする。 */
@media (max-width: 768px) {
	.ship-data .section-heading {
		text-align: center;
	}
}