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

/* SSO-629: Step1 の form__label (「メールアドレス」) は Figma で letter-spacing 0.16px。
   共通の form__label は Step2-5 用に 0.96px だが、 Step1 のみ Figma 値で上書き。 */
.form-area .form__label {
    letter-spacing: 0.16px;
}

/* ===== 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-primary);
    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: -38px;
    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: 4px;
    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 (ネイビー #00104c) は
     キャッチが沈んで重い印象だったため。
   - ドットは白 fill-opacity 0.15。白背景の primary-pale (#edeef4) ドットと近い ΔE
     (背景との差) になるように弱めて視覚バランスを揃える。 */
.side-panel {
    flex: 0 0 480px;
    align-self: stretch;
    background-color: var(--primary-pale);
    color: var(--primary);
}

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

.side-panel__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    color: var(--primary);
    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.5;
    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: -32px;
        top: -60px;
        width: 56px;
        height: 56px;
        font-size: 13px;
    }
}

/* ===== SSO-629: メールアドレスのドメインサジェスト =====
   候補リストは input 直下に絶対配置する。.form__field (common.css) は Step1〜5 で
   共用するため position を持たせず、この専用ラッパーを配置基準にする。 */
.mail-suggest-wrap {
	position: relative;
}

.mail-suggest {
	position: absolute;
	z-index: 10;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--primary-pale);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 50, 64, 0.12);
}

.mail-suggest[hidden] {
	display: none;
}

.mail-suggest__item {
	padding: 12px 20px;
	font-size: 16px;
	letter-spacing: 0.16px;
	color: var(--text-primary);
	cursor: pointer;
	/* 長いローカル部でも枠外にはみ出さない */
	overflow-wrap: anywhere;
}

/* 選択中の候補。キーボードの ↑↓ に加え、マウスを乗せた時も JS 側が選択位置を
   移動させる (mousemove → setActive)。:hover を独立して着色しないことで、
   着色が常に 1 つに保たれ、aria-activedescendant とも一致する。 */
.mail-suggest__item[aria-selected="true"] {
	background: var(--primary-pale);
}

/* 押下中の手応え。hover を除外したタッチ端末でもタップが伝わるようにする。
   指 / ボタンを離せば解除されるため、hover のように着色が残ることはない。
   iOS Safari は touch 系リスナーが無い要素に :active を当てないため、
   mailDomainSuggest.js 側で touchstart の空リスナーを付けている。 */
.mail-suggest__item:active {
	background: var(--primary-pale);
}


/* SSO-629: リアルタイム入力チェックの表示先。空の間は flex gap (12px) を消すため
   要素ごと非表示にする (.form__field の gap が空の <p> にも効いてしまうため)。 */
#errMailAddress:empty {
	display: none;
}