/**
 * 登入頁社群登入區塊樣式
 * 建立：2026-08-11
 *
 * 問題：社群登入按鈕被塞在登入表單下方、靠左對齊，跟靠右的「登入」鈕
 *       互不相干，看起來像硬塞進來的附屬品，整塊版面顯得散亂。
 *
 * 修法：只處理社群區塊本身 —— 加分隔線與置中，讓它成為「帳密登入」以外
 *       一條對等、明確的第二路徑，並把圖示放大到易點擊的尺寸。
 *
 * ⚠️ 刻意不做的事（試過，會更糟）：
 *   - 不對 .login-box 設 display:flex 做兩欄等高。Journal3 改過 Bootstrap grid，
 *     把 row 變成 flex container 會讓 col-sm-6 寬度失效、兩欄塌成滿寬堆疊。
 *   - 不把 .buttons 絕對定位到卡片底部對齊 CTA，那會蓋住下方的社群按鈕區。
 *   兩欄高度不等是既有現象，影響遠小於改壞 grid 的風險。
 */

/* 浮動按鈕造成的容器高度塌陷 */
.login-box .buttons::after {
    content: "";
    display: table;
    clear: both;
}

/* ── 社群登入：與帳密表單明確分隔，成為對等的第二條路徑 ── */
.ym-social-login {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
    text-align: center;
}

.ym-social-login .box-heading {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: #888;
}

.ym-social-login .kbsocial-icons {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ym-social-login .kbsocial-icons li {
    float: none;
    margin: 0;
    padding: 0;
}

.ym-social-login .kbsocial-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.ym-social-login .kbsocial-icons a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* 鍵盤操作要看得見焦點 */
.ym-social-login .kbsocial-icons a:focus-visible {
    outline: 2px solid #e94f78;
    outline-offset: 3px;
}

/* ── LINE 登入：獨立一列的寬按鈕 ──
 * 不做成第三顆小圖示，是因為台灣使用者 LINE 的普及率遠高於 FB / Google，
 * 值得給它更明確、更好點的位置。綠色為 LINE 品牌色 #06C755。
 */
.ym-social-login .ym-line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 260px;
    margin: 16px auto 0;
    padding: 12px 18px;
    border-radius: 10px;
    background: #06c755;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.ym-social-login .ym-line-btn:hover,
.ym-social-login .ym-line-btn:focus {
    background: #05b34c;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.ym-social-login .ym-line-btn:focus-visible {
    outline: 2px solid #2d2226;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ym-social-login .kbsocial-icons a,
    .ym-social-login .ym-line-btn {
        transition: none;
    }

    .ym-social-login .kbsocial-icons a:hover,
    .ym-social-login .ym-line-btn:hover {
        transform: none;
    }
}