/*
 * 診断ページ(/diagnosis/)に足した見た目。2026-09-30 オーナー決定
 * 旧サイトの ibc-app.css(assets/diagnosis/css/ibc-app.css)は本番と同じファイルのまま使い、このファイルを </head> の直前で読み込んで上書きする
 * (ibc-app.css とページ内の <style> より後なので、同じ強さの指定ならこちらが勝つ。ibc-app.css が !important で決めているものだけ !important で上書きする)。
 *
 * 1. 表紙(「IBC診断へようこそ」)。ほかのステップと同じ白いカード・見出し・ボタンの class を使い、足すのは余白だけ。
 *    あわせて、説明文を消したステップ 1 の見出しの下の余白
 * 2. ステップ 4「あなたの特徴」の 2 つの 2 軸マップ(【例】2軸マップ と「あなたの今の興味は…」)
 *    - 横の矢印(両端の三角を含む)が「内面」「外面」に重ならないようにし、4 つの文字を枠の内側に収める
 *    - 上の段・横の矢印・下の段の間と、「集団・社会」「個人」とのあいだを詰める
 *    そのために、箱(象限)の並べ方を「枠の上端・下端からの位置で決め打ち」から、枠そのものを「上の段・段のすき間・下の段」の
 *    3 行のグリッドにする形に変える。横の矢印と「内面」「外面」は、すき間の行(2 行目)を基準にして上下の真ん中に置く
 *    (絶対配置の要素に grid-row: 2 / 3 を付けると、その行が上下の位置の基準になる。終わりの線まで書かないと枠の下端までが基準になる。
 *    左右は枠の端が基準のまま)。
 *    上下の段の高さが違っても(カードが 1 つの象限に集まったときなど)、矢印はいつも段と段のすき間の真ん中に来る。
 *    矢印・文字・色・箱の形はそのまま
 *
 *    幅ごとの値(文字の大きさ・矢印の太さと三角の大きさは ibc-app.css のまま):
 *                       文字     三角(長さ×幅)  段と段の間  縦の三角と文字の間  横の三角と文字の間
 *    スマホ(〜767px)    16px    12 × 16         32px(三角と箱の間 8px)   6px   8px
 *    768px〜            22/28px 18 × 24         52px(三角と箱の間 14px)  7〜10px   10〜12px
 */

/* =========================================================
   1. 表紙
   ========================================================= */

.ibc-cover .ibc-step-header {
	margin-bottom: 0;
	padding-top: 24px;
}

.ibc-cover .ibc-step-subtitle {
	margin: 0;
}

.ibc-cover .ibc-step-title {
	margin: 12px 0 0;
}

/* 日本語を文節の切れ目で折り返す(対応していないブラウザでは、いつもどおりの折り返しになる) */
.ibc-cover .ibc-step-description {
	margin-top: 18px;
	word-break: auto-phrase;
}

.ibc-cover .ibc-step-actions {
	margin-top: 40px;
	margin-bottom: 24px;
}

/* ステップ 1: 見出しの下の説明文を消したので、見出しと「0/5枚選択」のあいだを、これまでの「見出しと説明文のあいだ」と同じ 30px にする
   (見出しの下の余白 30px と「0/5枚選択」の上の余白 18px は、「0/5枚選択」が inline-flex のため重ならずに足される。30 = 12 + 18) */
.ibc-step[data-step="1"] .ibc-step-title {
	margin-bottom: 12px;
}

/* 「始める」のあと、キーボードの位置をステップ 1 の見出しへ移す(tabindex="-1")。マウスで押したときは枠を出さない */
.ibc-step-title[tabindex="-1"]:focus:not(:focus-visible) {
	outline: none;
}

/* =========================================================
   2. 【例】2軸マップ(.ibc-axis-overview)
   ========================================================= */

/* 1 行目: 上の段、2 行目: 段のすき間(横の矢印の通り道)、3 行目: 下の段 */
.ibc-axis-overview {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto 52px auto;
	column-gap: 54px;
	row-gap: 0;
	min-height: 0;
	padding: 96px 110px;
}

/* 箱はグリッドのマスに置く(ibc-app.css の top / left / right / bottom での配置はやめる) */
.ibc-axis-overview-box {
	position: static !important;
	width: auto;
	max-width: none;
}

.ibc-axis-overview-box-club {
	grid-area: 1 / 1;
}

.ibc-axis-overview-box-diamond {
	grid-area: 1 / 2;
}

.ibc-axis-overview-box-heart {
	grid-area: 3 / 1;
}

.ibc-axis-overview-box-spade {
	grid-area: 3 / 2;
}

/* 横の矢印と「内面」「外面」は、すき間の行の上下の真ん中に置く(ibc-app.css の top: 50% と translateY(-50%) がこの行に対して効く) */
.ibc-axis-overview-cross-h,
.ibc-axis-overview-left-label,
.ibc-axis-overview-right-label {
	grid-row: 2 / 3;
}

.ibc-axis-overview-top-label {
	top: 24px;
}

.ibc-axis-overview-bottom-label {
	bottom: 24px;
}

.ibc-axis-overview-left-label {
	left: 0;
}

.ibc-axis-overview-right-label {
	right: 0;
}

/* 縦の矢印: 三角の先が「集団・社会」「個人」から 8px 離れる位置(文字の下端 + 8px + 三角 18px) */
.ibc-axis-overview-cross-v {
	top: 88px;
	bottom: 88px;
}

/* 横の矢印: 三角の先が「内面」「外面」(28px の 2 文字 = 56px)から 12px 離れる位置(56 + 12 + 三角 18px) */
.ibc-axis-overview-cross-h {
	left: 86px;
	right: 86px;
}

@media (max-width: 1024px) {
	.ibc-axis-overview {
		padding: 78px 70px;
	}

	.ibc-axis-overview-top-label {
		top: 16px;
	}

	.ibc-axis-overview-bottom-label {
		bottom: 16px;
	}

	.ibc-axis-overview-cross-v {
		top: 70px;
		bottom: 70px;
	}

	/* 22px の 2 文字 = 44px + 10px + 三角 18px */
	.ibc-axis-overview-cross-h {
		left: 72px;
		right: 72px;
	}
}

@media (max-width: 767px) {
	.ibc-axis-overview {
		grid-template-rows: auto 32px auto;
		column-gap: 24px;
		padding: 45px 16px;
	}

	.ibc-axis-overview-top-label {
		top: 2px;
	}

	.ibc-axis-overview-bottom-label {
		bottom: 2px;
	}

	/* 文字の下端(2 + 19px)+ 6px + 三角 12px */
	.ibc-axis-overview-cross-v {
		top: 39px;
		bottom: 39px;
	}

	/* 16px の 2 文字 = 32px + 8px + 三角 12px */
	.ibc-axis-overview-cross-h {
		left: 52px;
		right: 52px;
	}
}

/* =========================================================
   2. あなたの今の興味は…(.ibc-axis-result-board)
   象限を枠いっぱいに絶対配置していた .ibc-axis-map-wrap と .ibc-axis-map を箱として使うのをやめ(display: contents)、
   4 つの象限を枠(.ibc-axis-result-board)のグリッドに直接並べる。枠の高さは中身で決まる
   (象限に入るカードが多いときも、象限が伸びて切れない)。象限の最小の高さは、これまでの見た目の高さのまま。
   .ibc-axis-map-wrap・.ibc-axis-map には色も枠線も無い(ibc-app.css で透明・枠なし)ので、箱を無くしても見た目は変わらない
   ========================================================= */

/* 1 行目: 上の段、2 行目: 段のすき間(横の矢印の通り道)、3 行目: 下の段 */
.ibc-axis-result-board {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto 52px auto;
	column-gap: 90px;
	row-gap: 0;
	min-height: 0;
	padding: 76px 64px;
}

.ibc-axis-map-wrap,
.ibc-axis-map {
	display: contents;
}

.ibc-axis-map .ibc-axis-social-inner {
	grid-area: 1 / 1;
}

.ibc-axis-map .ibc-axis-social-outer {
	grid-area: 1 / 2;
}

.ibc-axis-map .ibc-axis-personal-inner {
	grid-area: 3 / 1;
}

.ibc-axis-map .ibc-axis-personal-outer {
	grid-area: 3 / 2;
}

/* 横の矢印と「内面」「外面」は、すき間の行の上下の真ん中に置く(ibc-app.css の top: 50% と translateY(-50%) がこの行に対して効く) */
.ibc-axis-result-cross-h,
.ibc-axis-result-left-label,
.ibc-axis-result-right-label {
	grid-row: 2 / 3;
}

/* これまでの高さ: (枠 760px - 上下の余白 92px・72px - 段の間 70px) ÷ 2 */
.ibc-axis-map .ibc-axis-quadrant {
	min-height: 263px;
}

.ibc-axis-result-top-label {
	top: 8px;
}

.ibc-axis-result-bottom-label {
	bottom: 8px;
}

/* これまでは枠の外へ 10px はみ出していた */
.ibc-axis-result-left-label {
	left: 0;
}

.ibc-axis-result-right-label {
	right: 0;
}

/* 文字の下端(8 + 34px)+ 8px + 三角 18px */
.ibc-axis-result-cross-v {
	top: 68px;
	bottom: 68px;
}

/* 28px の 2 文字 = 56px + 10px + 三角 18px */
.ibc-axis-result-cross-h {
	left: 84px;
	right: 84px;
}

@media (max-width: 767px) {
	.ibc-axis-result-board {
		grid-template-rows: auto 32px auto;
		column-gap: 28px;
		padding: 45px 26px;
	}

	/* これまでの高さ: (枠 470px - 上下の余白 62px・44px - 段の間 24px) ÷ 2 */
	.ibc-axis-map .ibc-axis-quadrant {
		min-height: 170px;
	}

	.ibc-axis-result-top-label {
		top: 2px;
	}

	.ibc-axis-result-bottom-label {
		bottom: 2px;
	}

	.ibc-axis-result-left-label {
		left: 0;
	}

	.ibc-axis-result-right-label {
		right: 0;
	}

	/* 文字の下端(2 + 19px)+ 6px + 三角 12px */
	.ibc-axis-result-cross-v {
		top: 39px;
		bottom: 39px;
	}

	/* 16px の 2 文字 = 32px + 8px + 三角 12px */
	.ibc-axis-result-cross-h {
		left: 52px;
		right: 52px;
	}
}