/*
 * ログイン画面をモック（social-login/login）に忠実再現するためのスタイル。
 * モックの汎用クラス名（.card / .card-title / .field / .primary-btn 等）はサイトの
 * グローバル CSS（Bootstrap）や既存 BS-FINE（.bsfine-ec .card 等）と衝突するため、
 * .sns-login-page スコープ配下でのみ適用する（このクラスを持たない他ページには影響しない）。
 * 本 CSS は CssFiles の最後に読み込み、同詳細度の既存ルールより後勝ちで確実に適用する。
 */

/* ログインページ外枠：モック .site 相当の幅へ。KS 標準の page-wrapper(max-width:640px) を
   ログイン画面のときのみ上書きする（.sns-login-wrapper が付くのはログイン画面だけ＝他ページ非影響）。
   グレー背景・中央寄せ・min-height は既存 .bsfine-ec.page-wrapper を流用。 */
.bsfine-ec.page-wrapper.sns-login-wrapper {
    /* レガシー .container の inset を打ち消し、グレー枠をビューポート幅まで広げる（full-bleed）。
       KS 標準の 640px 上限とレガシーコンテナの左右余白を、ログイン画面のみ解除する。 */
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* full-bleed の width:100vw は縦スクロールバー幅ぶん横にはみ出し、Windows 等の
   非オーバーレイ・スクロールバー環境で横スクロールが出る。外側のサイトコンテナで
   横方向をクリップして抑止する。本 CSS はログイン画面でのみ読み込まれるため
   他ページには影響しない。 */
.ms-site-container {
    overflow-x: hidden;
}

/* ログインのコンテンツ列（モック .login-main 相当：592px 中央寄せ）。
   外枠（グレー 1180px）の中でカード群を中央に置く。 */
.sns-login-page {
    --snsl-paper: #ffffff;
    --snsl-line: #dddddd;
    --snsl-red: #ef4f46;
    --snsl-amazon: #f0bf25;
    --snsl-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    /* width:100% を明示。親 .page-content(flex) の align-items に依存せず 592px まで伸ばす
       （max-width だけだと中身の幅に縮み、カードが狭くなるため）。 */
    width: 100%;
    max-width: 592px;
    margin-inline: auto;
    box-sizing: border-box;
}

/* カード枠 */
.sns-login-page .card {
    background: var(--snsl-paper);
    border-radius: 7px;
    box-shadow: var(--snsl-shadow);
    overflow: hidden;
}

.sns-login-page .card + .card {
    margin-top: 16px;
}

/* 見出し */
.sns-login-page .card-title {
    margin: 0;
    color: #222;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
}

.sns-login-page .login-card .card-title {
    padding: 15px 24px;
    background: #fafafa;
    border-bottom: 1px solid var(--snsl-line);
    font-size: 16px;
}

/* 新規会員カード */
.sns-login-page .new-user {
    padding: 20px 15px;
    text-align: center;
}

.sns-login-page .new-user .card-title {
    margin-bottom: 12px;
}

/* ログイン本文 */
.sns-login-page .login-body {
    padding: 24px 25px 28px;
}

/* 共通ボタン（pill） */
.sns-login-page .outline-btn,
.sns-login-page .primary-btn,
.sns-login-page .amazon-btn {
    display: inline-grid;
    place-items: center;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.sns-login-page .outline-btn {
    border: 2px solid var(--snsl-red);
    color: var(--snsl-red);
    background: #fff;
    font-size: 16px;
}

.sns-login-page .primary-btn {
    color: #fff;
    background: var(--snsl-red);
    font-size: 18px;
    box-shadow: 0 6px 12px rgba(239, 79, 70, 0.28);
}

.sns-login-page .login-body .primary-btn {
    margin-top: 26px;
}

/* 入力フィールド */
.sns-login-page .field + .field {
    margin-top: 24px;
}

.sns-login-page .field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 800;
}

.sns-login-page .required {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 21px;
    border-radius: 3px;
    background: var(--snsl-red);
    color: #fff;
    font-size: 12px;
}

.sns-login-page .input-wrap {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 15px;
}

.sns-login-page .input-wrap input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #555;
    font-size: 15px;
}

.sns-login-page .input-wrap input::placeholder {
    color: #999999;
}

/* パスワード表示切替ボタン（login.js が #passwordDisplayButton と子 SVG を参照するため機能保持） */
.sns-login-page #passwordDisplayButton {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #999999;
    cursor: pointer;
}

.sns-login-page #passwordDisplayButton svg {
    width: 20px;
    height: 20px;
}

/* 自動ログイン（モックに無いが UseAutoLogin 時のみ表示・体裁を馴染ませる） */
.sns-login-page .checkbox {
    margin-top: 16px;
}

.sns-login-page .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

/* reCAPTCHA 表示領域（モックに無いが機能保持のため余白のみ） */
.sns-login-page .recap-area {
    margin-top: 16px;
}

.sns-login-page .recap-area #element_msg {
    text-align: center;
}

/* パスワードお忘れ（モック基底 a の青＋下線を .bsfine-ec a リセットに勝たせて再現） */
.sns-login-page .forgot {
    display: block;
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #0066cc;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* または区切り */
.sns-login-page .or-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 24px 0 12px;
    color: #666666;
    font-size: 12px;
}

.sns-login-page .or-divider::before,
.sns-login-page .or-divider::after {
    content: "";
    height: 1px;
    background: #eeeeee;
}

/* AmazonPay */
.sns-login-page .amazon-card {
    padding: 16px 15px 20px;
}

.sns-login-page .amazon-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
}

.sns-login-page .amazon-card p {
    margin: 0;
    color: #333333;
    font-size: 14px;
    line-height: 1.55;
}

/* PC 幅：カードを中央・ボタン幅制限・左右パディング拡大（モック @media min-width:900） */
@media (min-width: 900px) {
    .sns-login-page .new-user .outline-btn {
        max-width: 360px;
        margin-inline: auto;
    }

    .sns-login-page .login-card .card-title,
    .sns-login-page .login-body,
    .sns-login-page .amazon-card {
        padding-inline: 28px;
    }
}