/* 帳號頁(/auth/*,twfood/architect 第 56 號單)。
   配色沿用 quote-check.css 的 --qc-*(先載入),和會員區 member.css 同一套。
   字級:內文、按鈕、輸入框 16px(手機上輸入框 16px 也避免 iOS 自動放大),次要說明最小 14px。 */

.mb-auth {
    background: #fff;
    border: 1px solid var(--qc-line-2, #e6eae4);
    border-top: 3px solid var(--qc-sage, #4a6b52);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1.5rem;
    margin: .5rem 0 1.5rem;
    font-size: 1rem;
    color: var(--qc-ink-2, #43524d);
}
.mb-auth__title {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.25rem; font-weight: 700; color: var(--qc-ink, #16201d);
    margin: 0 0 1rem;
}
.mb-auth__title .fa { color: var(--qc-sage, #4a6b52); }
.mb-auth__lead { font-size: 1rem; margin-bottom: .75rem; }

/* 欄位:標籤在上、錯誤在欄位下方 */
.mb-auth__field { margin-bottom: 1rem; }
.mb-auth .form-label { font-size: 1rem; font-weight: 600; color: var(--qc-ink, #16201d); margin-bottom: .3rem; }
.mb-auth .form-control, .mb-auth .form-select { font-size: 1rem; padding: .55rem .75rem; border-radius: 8px; }
.mb-auth .form-control:focus, .mb-auth .form-select:focus {
    border-color: var(--qc-sage, #4a6b52);
    box-shadow: 0 0 0 .2rem rgba(74, 107, 82, .2);
}
.mb-auth .form-control[readonly] { background: var(--qc-line-2, #e6eae4); }
.mb-auth__error { font-size: .875rem; color: #b42318; margin-top: .3rem; }
.mb-auth__error:empty { display: none; }
.mb-auth__field.is-invalid .form-control, .mb-auth__field.is-invalid .form-select { border-color: #b42318; }
.mb-auth__hint { font-size: .875rem; color: var(--qc-ink-3, #76857f); margin-top: .25rem; }
.mb-auth__check { display: flex; align-items: center; gap: .5rem; }
.mb-auth__check label { font-size: 1rem; display: flex; align-items: center; gap: .5rem; margin: 0; }
.mb-auth__check .form-check-input { margin: 0; width: 1.1rem; height: 1.1rem; }

.mb-auth__submit {
    display: block; width: 100%;
    font-size: 1rem; font-weight: 700;
    padding: .65rem 1rem; border: 0; border-radius: 8px;
    background: var(--qc-sage, #4a6b52); color: #fff;
}
.mb-auth__submit:hover, .mb-auth__submit:focus { background: #3c5844; color: #fff; }
.mb-auth__profile .mb-auth__submit { width: auto; padding-inline: 2rem; margin-top: .25rem; }

.mb-auth__google {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: .65rem 1rem; border-radius: 8px;
    border: 1px solid var(--qc-line-2, #e6eae4); background: #fff;
    font-size: 1rem; font-weight: 600; color: var(--qc-ink, #16201d); text-decoration: none;
}
.mb-auth__google .fab { color: #df4a30; font-size: 1.1rem; }
.mb-auth__google:hover { background: var(--qc-sage-soft, #e3ebe2); color: var(--qc-ink, #16201d); }

.mb-auth__or {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.25rem 0 1rem; font-size: .875rem; color: var(--qc-ink-3, #76857f);
}
.mb-auth__or::before, .mb-auth__or::after { content: ""; flex: 1; border-top: 1px solid var(--qc-line-2, #e6eae4); }

.mb-auth__links {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem;
    margin-top: 1rem; font-size: 1rem;
}
.mb-auth__links a { color: var(--qc-sage, #4a6b52); }

.mb-auth__captcha { display: flex; align-items: center; gap: .75rem; }
.mb-auth__captcha img { border: 1px solid var(--qc-line-2, #e6eae4); border-radius: 6px; cursor: pointer; flex: 0 0 auto; }
.mb-auth__captcha .form-control { flex: 1; min-width: 0; }

.mb-auth__note { font-size: 1rem; padding: .8rem 1rem; border-radius: 8px; }
.mb-auth__note--ok { background: var(--qc-sage-soft, #e3ebe2); color: var(--qc-ink, #16201d); }
.mb-auth__note--info { background: #eef4f8; color: var(--qc-ink, #16201d); }

/* 帳號與方案頁首的動作(變更密碼) */
.mb-auth__actions { margin: -.25rem 0 1rem; }
.mb-auth__action {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: 1rem; padding: .4rem .9rem; border-radius: 8px;
    border: 1px solid var(--qc-line-2, #e6eae4); background: #fff;
    color: var(--qc-sage, #4a6b52); text-decoration: none;
}
.mb-auth__action:hover { background: var(--qc-sage-soft, #e3ebe2); color: var(--qc-ink, #16201d); }

/* 第 60 號:登入頁的「舊會員帳號密碼登入」,一行小字,點了才展開帳密表單 */
.mb-auth__legacy { margin-top: 1.25rem; }
/* 收合區塊裡的欄位原本是 content-box,width:100% 再加 padding 會超出卡片右緣 */
.mb-auth__legacy, .mb-auth__legacy * { box-sizing: border-box; }
.mb-auth__legacy > summary { font-size: .875rem; color: var(--qc-sage, #4a6b52); cursor: pointer; text-align: center; list-style: none; }
.mb-auth__legacy > summary::-webkit-details-marker { display: none; }
.mb-auth__legacy > summary::after { content: " ▾"; }
.mb-auth__legacy[open] > summary::after { content: " ▴"; }
.mb-auth__legacy[open] > summary { margin-bottom: .75rem; }

/* 第 60 號(owner 2026-10-28):未登入的帳號頁(登入、忘記密碼…)卡片往下移,落在畫面上方約三分之一,
   不貼著導覽列、也不放正中央。只加在 _frame.php 的未登入版型上,會員區不受影響。
   手機留小一點的間距,免得輸入框被擠到鍵盤底下。 */
.mb-auth-guest { margin-block: clamp(1.5rem, 8vh, 5rem); }
@media (max-width: 575.98px) {
    .mb-auth-guest { margin-block: 1.5rem; }
}