/* SSO-619 V2: Step1 (accountRegistV2.html) 専用スタイル
   - hero (見出し + 1分で完了 badge) / notice (吹き出し型ヘルプ) / login-prompt /
     右カラム side-panel
   - common.css の後に読み込む */

/* ===== Hero =====
   title 行と sub 行をそれぞれ自己幅で中央寄せ。badge は h1 を相対基準にして右に float。 */
.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* h1 自体を inline-block + position:relative にして、badge (absolute) の
   containing block にする。inline-block でないと幅が flex 親いっぱいに広がってしまい
   badge の right オフセットがズレる。 */
.hero__title {
	position: relative;
	display: inline-block;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: 0.25px;
	line-height: 1.8;
	color: var(--text-secondary);
	margin: 0;
}

.hero__sub {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.2px;
	line-height: 1.8;
	color: var(--text-primary);
	margin: 0;
}

/* ===== Hero badge (1分で完了) ===== */
.hero-badge {
	position: absolute;
	top: -28px;
	right: -74px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	border-radius: 50%;
	color: var(--text-primary);
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: 0.145px;
	line-height: 1.23;
	text-align: center;
}

.hero-badge__de {
	font-size: 10.87px;
}

/* バッジしっぽはデザイン提供 polygon SVG を回転で再現 (CSS 三角形では特殊変形が表現できない) */
.hero-badge::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0px;
	width: 17px;
	height: 13px;
	background-image: url("../../../images/login/v2/badge_tail.svg");
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(222deg);
	transform-origin: 50% 50%;
}

/* ===== Notice (closed-state pill + popup) =====
   旧名: tooltip。実体は click-to-expand なので notice にリネーム。 */
.notice {
	position: relative;
	margin-top: 8px;
}

.notice__toggle {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px;
	background: var(--bg);
	border: 1px dashed var(--text-tertiary);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14px;
	line-height: 1.8;
	color: var(--text-secondary);
	cursor: pointer;
}

.notice__icon {
	width: 18px;
	height: 18px;
	display: inline-block;
}

.notice__icon img {
	display: block;
	width: 100%;
	height: 100%;
}

/* popup (yellow message)。浮かせて配置 (後続のログインリンク等の上に被さる)。 */
.notice__popup {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	right: 0;
	z-index: 10;
	padding: 16px 14px;
	background: var(--accent);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14px;
	line-height: 1.8;
	color: var(--text-primary);
	display: none;
}

/* 透明 hover ブリッジ: toggle と popup の間 14px 空白を popup の hit area に取り込む。
   これにより toggle → popup の縦移動中に :hover が一瞬切れて popup が消える問題を防ぐ
   (popup 内リンクへ到達できるようにする)。 */
.notice__popup::after {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

.notice__popup.is-open {
	display: block;
}

/* hover 可能なポインタ環境では、click トグル無しで notice toggle に
   ホバー / フォーカスしている間だけ popup を見せる。
   タッチ端末 (hover: none) はこのルール対象外なので click トグル動作に戻る。
   画面幅は問わない (= 横にした iPad など hover あり SP 幅でも hover で動く)。 */
@media (hover: hover) {
	.notice:hover .notice__popup,
	.notice:focus-within .notice__popup {
		display: block;
	}
}

/* 矢印は popup 中央ではなく toggle 内「?」アイコン中心に合わせる。
   toggle 内 inner content (icon 18 + gap 10 + text 240 = 268px) を中央寄せ。
   icon 中心 = toggle 幅/2 − 125px (= inner 半幅 134 − icon 半径 9)。
   矢印 box (24×12) の中心 (=apex) を icon 中心に揃えるため左端を `50% − 137px` に置く。 */
.notice__popup::before {
	content: "";
	position: absolute;
	top: -10px;
	left: calc(50% - 137px);
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 12px solid var(--accent);
}

.notice__popup p {
	margin: 0;
}

.notice__popup p + p {
	margin-top: 4px;
}

.notice__popup a {
	color: inherit;
	text-decoration: underline;
}

/* ===== Login prompt (すでにアカウントをお持ちの方は…) ===== */
.login-prompt {
	margin-top: 6px;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: var(--text-secondary);
	letter-spacing: 0.16px;
}

.login-prompt__btn {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var(--text-secondary);
	text-decoration: underline;
	cursor: pointer;
}

/* ===== Side panel (desktop only) =====
   旧名: cover。Step1 のみで右側に表示するキャッチコピー入りパネル。
   - 背景は primary-light (より淡いシアン) を使用。--primary (#0097bf) はキャッチが沈んで重い印象だったため。
   - ドットは白 fill-opacity 0.15。白背景の primary-pale (#e0f2f7) ドットと
     近い ΔE (背景との差) になるように 0.35 → 0.15 に弱めて視覚バランスを揃える。 */
.side-panel {
	flex: 0 0 480px;
	align-self: stretch;
	background-color: var(--primary-light);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='23'><circle cx='1.5' cy='1.5' r='1.5' fill='%23ffffff' fill-opacity='0.15'/></svg>");
	background-size: 23px 23px;
	background-position: 20px 20px;
	color: var(--white);
}

/* 内側を sticky で 100vh 固定にし、左カラム高さ変動の影響を受けない */
.side-panel__inner {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 40px;
	box-sizing: border-box;
}

.side-panel__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	color: var(--white);
	font-weight: 700;
	text-align: center;
	margin-bottom: 16px;
}

.side-panel__catch {
	font-size: 16px;
	letter-spacing: 0.16px;
	line-height: 1.8;
	margin: 0;
}

.side-panel__title {
	font-size: 20px;
	letter-spacing: 0.2px;
	line-height: 1.8;
	margin: 0;
	word-break: keep-all;
}

.side-panel__image {
	width: 100%;
	max-width: 360px;
	height: auto;
	display: block;
}

/* ===== Tablet & narrower (≤ 1023px): hide side panel so form has room =====
   左カラム幅 = viewport - 480px となるため、~1024px を割ると form の max-width 480px に対して
   左右マージンがほぼ消える。ここで side-panel を畳んで 1 カラムにする。 */
@media (max-width: 1023px) {
	.side-panel {
		display: none;
	}
}

/* ===== Step1 mobile (≤ 767px) ===== */
@media (max-width: 767px) {
	/* Step1 のみ SP では page__main の上余白を 28px に拡張 (badge 干渉回避)。
	   common.css の SP 値 (padding-top:8px) を後勝ちで上書き。 */
	.page__main {
		padding-top: 28px;
	}
	.hero__title {
		font-size: 20px;
	}
	.hero__sub {
		font-size: 16px;
	}
	.login-prompt {
		font-size: 14px;
		letter-spacing: 0.14px;
		margin-top: 8px;
		margin-bottom: 32px;
	}
	/* SP も PC と同じく h1 を containing block にする。badge は h1 の右上に張り付き、
	   タイトル末尾の右にぶら下がる形になる。サイズ / 文字サイズだけ SP 用に微縮。 */
	.hero-badge {
		right: -10px;
		top: -60px;
		width: 56px;
		height: 56px;
		font-size: 13px;
	}
}