/*
 * ソーシャルログイン（SP）ボタン用スタイル。
 * 制作会社モックのデザインを正本とし、SP カード・ボタンは既存 BS-FINE の
 * .card__header / .card__body 骨格に載せず、social-login 名前空間で自己完結させる。
 * ボタンは会員登録モックの .social-entry-btn を正本とし、ログイン／会員登録／
 * マイページで共通利用できる部品として実装する。
 * セレクタは .bsfine-ec スコープ配下に置き、.bsfine-ec a { color: inherit } 等の
 * 既存リセットより詳細度を高くして確実に適用する（正本 .bsfine-ec .social-entry-btn と同方針）。
 */

/* SP カード（白カード枠は .card を流用。内側の余白と見出しをここで定義） */
.bsfine-ec .social-login-card {
    padding: 28px 25px 30px;
}

/* SP セクション見出し（ログインモック .card-title 準拠：左寄せ太字） */
.bsfine-ec .social-login-card__title {
    margin: 0 0 6px;
    color: #222;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
    text-align: left;
}

/* SP セクション案内文（見出し直下・左寄せ・注記より視認性を持たせる） */
.bsfine-ec .social-login-card__lead {
    margin: 0;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}

/* SP ボタン（pill・左アイコン・白文字太字） */
.bsfine-ec .social-login-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 52px;
    margin-top: 22px;
    padding: 0 58px;
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* ボタン内アイコン（左端に絶対配置） */
.bsfine-ec .social-login-btn img {
    position: absolute;
    left: 20px;
    top: 50%;
    width: 28px;
    height: 28px;
    object-fit: contain;
    transform: translateY(-50%);
}

/* ブランド別配色 */
.bsfine-ec .social-login-btn--line {
    background: #06c755;
}

.bsfine-ec .social-login-btn--yahoo {
    background: #ff0033;
}

/* 未知プロバイダ用の中立ボタン（アイコンなし） */
.bsfine-ec .social-login-btn--neutral {
    background: #555;
    padding: 0 24px;
}

/* 注記（LINE 友だち追加など） */
.bsfine-ec .social-login-note {
    margin-top: 10px;
    color: #666;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

/* 会員登録：SP 登録カード枠。ログインの白カード（.social-login-card）とは異なり、
   会員登録モックは白カードに載せず中央寄せの独立ブロック（見出し＋リード＋ボタン）。
   ボタン部品（.social-login-btn 系）は共通利用し、枠のみここで定義する。 */
.bsfine-ec .social-login-entry-card {
    width: 100%;
    margin-top: -2px;
    margin-bottom: 4px;
}

.bsfine-ec .social-login-entry-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 会員登録の見出しは中央寄せ（ログインの左寄せ .social-login-card__title と別） */
.bsfine-ec .social-login-entry-card__title {
    max-width: 28em;
    margin-inline: auto;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.bsfine-ec .social-login-entry-card__lead {
    max-width: 38em;
    margin-inline: auto;
    color: #444;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

/* ボタン群のラッパー。間隔は gap で管理する */
.bsfine-ec .social-login-actions {
    display: grid;
    gap: 10px;
    width: 100%;
}

/* actions グリッド内はボタン間隔を gap で管理するため、共通ボタンの上マージンを無効化 */
.bsfine-ec .social-login-actions .social-login-btn {
    margin-top: 0;
}

/* 会員登録の注記（ボタン直下に詰める） */
.bsfine-ec .social-login-actions .social-login-note {
    margin-top: -6px;
}

/* モバイル幅：文言はみ出し回避（モック common.css の @media 640px を踏襲） */
@media (max-width: 640px) {
    .bsfine-ec .social-login-card__title,
    .bsfine-ec .social-login-card__lead {
        overflow-wrap: anywhere;
    }

    .bsfine-ec .social-login-entry-card__title,
    .bsfine-ec .social-login-entry-card__lead {
        overflow-wrap: anywhere;
    }

    .bsfine-ec .social-login-btn {
        padding-right: 44px;
        padding-left: 58px;
        white-space: normal;
    }

    /* 中立ボタンはアイコンが無いため左余白も詰める */
    .bsfine-ec .social-login-btn--neutral {
        padding-right: 24px;
        padding-left: 24px;
    }
}