@use "variables" as *;

// ===========================================================================
// 体質チェック (page-chart.php, slug `chart`) — 健康チェック / Check の一機能。
// 現行サイト tozai-yakkyoku.com/chart/ の8問チェックを流用。チェックすると
// 薄緑 → 黄色 に変わり、選択ベクトル(A〜H)を JS(main.js) が合算して
// 8タイプのスコアを表示する。
// ---------------------------------------------------------------------------
//   配点タイプ : A瘀血 / B気滞 / C血虚 / D気虚 / E陽虚 / F陽盛 / G陰虚 / H美人
// ===========================================================================

// 未選択=薄緑 → 選択中=黄色
$chart-water: #d9ecc4; // 未選択（薄緑）
$chart-orange: #ffe14d; // 選択中（黄色）

// --- ヒーロー写真 (1024 x 350) --------------------------------------------
.chart-hero {
	margin: 0;
	aspect-ratio: 1024 / 350;
	border-radius: rem(20);
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.9;
	}

	@include sp {
		aspect-ratio: 343 / 180;
	}
}

// --- リード文 + 本文 --------------------------------------------------------
.chart-intro {
	margin-top: rem(60);

	@include sp {
		margin-top: rem(40);
	}
}

.chart-intro__lead {
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(18);
	color: $color-green;
	line-height: 1.75;
	text-align: center;

	@include sp {
		font-size: rem(17);
		text-align: left;
	}
}

.chart-intro__body {
	margin-top: rem(40); // Figma: lead→body 40
	font-size: rem(16);
	line-height: 2; // 32 / 16

	@include sp {
		margin-top: rem(30);
	}
}

// --- 操作説明ボックス (白地・緑2pxボーダー) --------------------------------
.chart-howto {
	margin-top: rem(60); // Figma: intro→操作説明ボックス 60
	padding: rem(28) rem(40) rem(28) rem(56); // extra left inset for the markers
	background: $color-white;
	border: 2px solid $color-green;
	border-radius: rem(20);

	li {
		list-style: disc; // browser-drawn bullet (no glyph in markup); wraps hang under the text
		font-size: rem(16);
		line-height: 2;
	}

	@include sp {
		margin-top: rem(40);
		padding: rem(20) rem(20) rem(20) rem(36);
	}
}

// ===========================================================================
// チェックフォーム
// ===========================================================================
.chart-quiz {
	margin-top: rem(60);

	@include sp {
		margin-top: rem(40);
	}
}

.chart-q + .chart-q {
	margin-top: rem(50);

	@include sp {
		margin-top: rem(40);
	}
}

.chart-q__title {
	padding-bottom: rem(10);
	margin-bottom: rem(20);
	border-bottom: 1px solid $color-green;
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(20);
	color: $color-green;
	line-height: 1.4;

	@include sp {
		font-size: rem(18);
	}
}

.chart-q__options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: rem(12);

	@include sp {
		grid-template-columns: 1fr;
	}
}

// --- 1選択肢 = label(checkbox + box) ---------------------------------------
.chart-opt {
	display: block;
	cursor: pointer;
}

.chart-opt__input {
	// visually hidden but keyboard-focusable
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	white-space: nowrap;
}

.chart-opt__box {
	display: flex;
	align-items: center;
	min-height: rem(56);
	height: 100%;
	padding: rem(10) rem(16);
	background: $chart-water;
	border-radius: rem(10);
	font-size: rem(15);
	font-weight: 700;
	line-height: 1.5;
	color: $color-text;
	transition: background-color 0.2s;
}

.chart-opt:hover .chart-opt__box {
	opacity: 0.85;
}

.chart-opt__input:checked + .chart-opt__box {
	background: $chart-orange;
}

.chart-opt__input:focus-visible + .chart-opt__box {
	outline: 2px solid $color-green;
	outline-offset: 2px;
}

// ===========================================================================
// 結果カード (2行 x 4列) — 全タイプ共通の緑アウトライン
// ===========================================================================
.chart-result {
	margin-top: rem(60);
	display: grid;
	grid-template-columns: repeat(4, 1fr); // default (体質チェック)
	gap: rem(20);

	@include sp {
		margin-top: rem(40);
		grid-template-columns: repeat(2, 1fr);
		gap: rem(12);
	}
}

// 列数モディファイア — 体質=4列 / 便秘=3列。SP は共通2列。
.chart-result--cols-3 {
	grid-template-columns: repeat(3, 1fr);

	@include sp {
		grid-template-columns: repeat(2, 1fr);
	}
}

.chart-result--cols-4 {
	grid-template-columns: repeat(4, 1fr);

	@include sp {
		grid-template-columns: repeat(2, 1fr);
	}
}

.chart-type {
	display: flex;
	align-items: center;
	gap: rem(8);
	min-height: rem(106);
	padding: rem(12) rem(16);
	background: $color-white;
	border: 2px solid $color-green;
	border-radius: rem(10);
	color: $color-text;
	transition: background-color 0.3s, color 0.3s;
}

// only the clickable (linked) types react to hover
a.chart-type:hover {
	background: $color-green;
	color: $color-white;
	text-decoration: none;

	.chart-type__count,
	.chart-type__name {
		color: $color-white;
	}

	.chart-type__arrow {
		background: $color-white;

		&::before {
			border-left-color: $color-green;
		}
	}
}

.chart-type__count {
	flex-shrink: 0;
	width: rem(48);
	font-family: $font-sans;
	font-weight: 700;
	font-size: rem(50);
	line-height: 1;
	color: $color-green;
	text-align: center;

	@include sp {
		width: rem(40);
		font-size: rem(44);
	}
}

.chart-type__label {
	flex: 1 1 auto;
	min-width: 0;
}

.chart-type__desc {
	display: block;
	font-size: rem(13);
	line-height: 1.4;
}

.chart-type__name {
	display: block;
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(20);
	line-height: 1.3;
	color: $color-green;

	@include sp {
		font-size: rem(18);
	}
}

.chart-type__arrow {
	@include circle-arrow($size: 20, $bg: $color-green, $fg: $color-white, $tw: 4, $tl: 6);
}

// 美人タイプ = クリック不可 (矢印分の余白だけ確保)
.chart-type--static .chart-type__arrow {
	visibility: hidden;
}

.chart-note {
	margin-top: rem(40); // Figma: 結果カード→注記 40
	font-size: rem(14);
	line-height: 2;
	color: $color-text;
}

// ===========================================================================
// 結果ページ (tmpl-chart-result.php) — 瘀血/気滞… 各タイプの解説
// ===========================================================================
.chart-result-lead {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(20);
	line-height: 1.6;
	color: $color-green;

	@include sp {
		font-size: rem(18);
	}
}

// 各セクション見出し(特徴/月経/改善対策/こんな漢方薬がおすすめ…)に緑の左ボーダー
.page-chart-result .entry-content h2 {
	padding-left: rem(16);
	border-left: rem(4) solid $color-green;
}

// --- 別の体質もチェック nav (緑アウトラインのピル / 現在地は塗り) ----------
.chart-types-nav {
	margin-top: rem(60);

	@include sp {
		margin-top: rem(40);
	}
}

.chart-types-nav__label {
	font-family: $font-serif;
	font-weight: 700;
	font-size: rem(18);
	color: $color-green;
	margin-bottom: rem(16);
}

.chart-types-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: rem(12);
	list-style: none;
	padding: 0;
	margin: 0;
}

.chart-types-nav__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: rem(72);
	padding: rem(8) rem(20);
	background: $color-white;
	border: 1px solid $color-green;
	border-radius: $radius-pill;
	font-weight: 700;
	font-size: rem(15);
	color: $color-green;
	transition: background-color 0.3s, color 0.3s;
}

a.chart-types-nav__pill:hover {
	background: $color-green;
	color: $color-white;
	text-decoration: none;
}

.chart-types-nav__pill.is-current {
	background: $color-green;
	color: $color-white;
}

.chart-result-back {
	margin-top: rem(60);
	text-align: center;

	@include sp {
		margin-top: rem(40);
	}
}