/* ============================================================
   auth-v2.css — 登入 / 註冊 / 忘記密碼 新版套版專用
   - 對應 01-3 原型 login.html / register.html / forgot-password.html
   - 全部 class 加 iv2- 前綴,scope 在 .iv2-root 內
   - 不動 Bootstrap reset / .container / .row,reset 一律 scope 在 .iv2-root
   - 字體統一 Noto Sans Traditional Chinese(同 faq-v2 / feature-v2 / plan-v2)
   - 中文文案全形標點;CSS 內一律半形
   - 版面:移除 main.master 頂列主站導覽、保留頁尾;改用頁內精簡品牌列 + 返回首頁
   - RWD 斷點:900(雙欄改單欄,品牌區下移)/ 600 / 380
   ============================================================ */

/* ============ 移除主站頂列導覽(僅本三頁載入此檔,不影響其他頁)============ */
#container > header { display: none !important; }
/* 導覽下方的 64px 占位 div(緊鄰 header 之後)一併移除 */
#container > header + div[style*="margin-top"] { display: none !important; }
/* slicknav 行動選單若注入於 body,亦隱藏 */
.slicknav_menu { display: none !important; }

.iv2-root {
  --iv2-brand-navy: #0a1530;
  --iv2-brand-navy-deep: #070f24;
  --iv2-brand-navy-mid: #1a2a52;
  --iv2-primary: #5645d4;
  --iv2-primary-pressed: #4534b3;
  --iv2-primary-deep: #3a2a99;
  --iv2-primary-soft: #ece9fb;
  --iv2-accent-red: #ff385c;
  --iv2-accent-amber: #f5d75e;
  --iv2-success: #1aae39;
  --iv2-warning: #dd5b00;
  --iv2-error: #e03131;
  --iv2-canvas: #ffffff;
  --iv2-surface: #f6f5f4;
  --iv2-surface-soft: #fafaf9;
  --iv2-hairline: #e5e3df;
  --iv2-hairline-soft: #ede9e4;
  --iv2-hairline-strong: #c8c4be;
  --iv2-ink: #1a1a1a;
  --iv2-charcoal: #37352f;
  --iv2-slate: #5d5b54;
  --iv2-muted: #bbb8b1;
  --iv2-tint-mint: #d9f3e1;
  --iv2-r-sm: 10px;
  --iv2-r-md: 14px;
  --iv2-r-lg: 20px;
  --iv2-r-pill: 999px;
  --iv2-s-2: 8px;
  --iv2-s-3: 12px;
  --iv2-s-4: 16px;
  --iv2-s-5: 24px;
  --iv2-s-6: 32px;
  --iv2-s-7: 48px;
  --iv2-s-8: 64px;
  /* v2.11: 陰影 token 微提升,全公開頁一致,卡片更有浮起深度感 */
  --iv2-shadow-sm: 0 2px 5px rgba(15,23,48,0.07);
  --iv2-shadow-md: 0 6px 16px rgba(15,23,48,0.10);
  --iv2-shadow-lg: 0 16px 40px rgba(15,23,48,0.15);
  --iv2-font: 'Noto Sans Traditional Chinese', 'Noto Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', PingFangTC, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--iv2-font);
  font-size: 17px;
  color: var(--iv2-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 本頁 body / footer 一併套字體(同 faq-v2 規則) */
body,
body button,
body input,
body select,
body textarea {
  font-family: 'Noto Sans Traditional Chinese', 'Noto Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', PingFangTC, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 防止頁面橫向溢出 */
html { overflow-x: hidden; }
@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* reset 一律 scope 在 .iv2-root 內,不汙染 main.master footer */
.iv2-root *,
.iv2-root *::before,
.iv2-root *::after { box-sizing: border-box; }
.iv2-root img,
.iv2-root svg { display: block; max-width: 100%; }
.iv2-root a { color: inherit; text-decoration: none; }
.iv2-root ul { padding: 0; margin: 0; list-style: none; }
.iv2-root h1,
.iv2-root h2,
.iv2-root h3,
.iv2-root h4,
.iv2-root p { margin: 0; }
.iv2-root button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.iv2-root input,
.iv2-root select { font: inherit; }

/* ============ 按鈕(共用)============ */
.iv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--iv2-r-pill); font-weight: 600; font-size: 0.95em; transition: all .15s; white-space: nowrap; border: none; cursor: pointer; font-family: inherit; }
.iv2-btn-primary { background: var(--iv2-primary); color: #fff; box-shadow: 0 6px 18px rgba(86,69,212,0.30); }
.iv2-btn-primary:hover { background: var(--iv2-primary-pressed); color: #fff; }
.iv2-btn-ghost { background: var(--iv2-surface); color: var(--iv2-charcoal); border: 1px solid var(--iv2-hairline); }
.iv2-btn-ghost:hover { background: var(--iv2-surface-soft); border-color: var(--iv2-primary); color: var(--iv2-primary); }
.iv2-btn-sm { height: 36px; padding: 0 16px; font-size: 0.85em; }
.iv2-btn-lg { height: 52px; padding: 0 28px; font-size: 1em; }
.iv2-btn:disabled { background: var(--iv2-muted); color: #fff; cursor: not-allowed; box-shadow: none; }
.iv2-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============ 版面外殼(雙欄)============ */
.iv2-auth-root { background: var(--iv2-canvas); }
.iv2-auth-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--iv2-canvas);
}
@media (max-width: 900px) { .iv2-auth-shell { grid-template-columns: 1fr; min-height: 0; } }

/* ============ 左側:表單區 ============ */
.iv2-auth-form-side {
  padding: clamp(var(--iv2-s-6), 4vw, var(--iv2-s-8)) clamp(var(--iv2-s-5), 4vw, var(--iv2-s-8));
  display: flex; flex-direction: column;
}

/* 頁內精簡品牌列(取代被移除的主站導覽)*/
.iv2-auth-top { display: flex; align-items: center; justify-content: space-between; gap: var(--iv2-s-4); flex-wrap: wrap; row-gap: 12px; }
.iv2-auth-brand { display: flex; align-items: center; gap: 12px; }
.iv2-auth-brand .iv2-logo { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(135deg, var(--iv2-primary), var(--iv2-brand-navy-mid)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; box-shadow: var(--iv2-shadow-sm); flex-shrink: 0; }
.iv2-auth-brand .iv2-bname { font-weight: 700; color: var(--iv2-brand-navy); font-size: 1em; line-height: 1.15; }
.iv2-auth-brand .iv2-bsub { display: block; font-size: 0.62em; font-weight: 600; color: var(--iv2-slate); letter-spacing: 0.08em; }
/* 實際 LOGO 圖檔 — wordmark 以「寬度」控制較直覺(可縮放,手機自適應) */
.iv2-auth-brand .iv2-auth-logo-img { width: clamp(170px, 22vw, 220px); height: auto; }
.iv2-auth-back { font-size: 0.88em; color: var(--iv2-slate); display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.iv2-auth-back:hover { color: var(--iv2-primary); }
.iv2-auth-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.iv2-auth-form-wrap { max-width: 440px; width: 100%; margin: auto; padding-block: var(--iv2-s-7); }
.iv2-auth-form-wrap h1 { font-size: clamp(26px, 16px + 1.8vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--iv2-ink); }
.iv2-root .iv2-auth-sub { color: var(--iv2-slate); margin-top: var(--iv2-s-4); font-size: 1.02em; line-height: 1.65; }

/* 表單欄位 */
.iv2-auth-form { display: flex; flex-direction: column; gap: var(--iv2-s-4); margin-top: var(--iv2-s-6); }
.iv2-field { display: flex; flex-direction: column; gap: 7px; }
.iv2-field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 0.92em; font-weight: 600; color: var(--iv2-charcoal); }
.iv2-field-label .iv2-req { color: var(--iv2-accent-red); margin-left: 2px; }
.iv2-field-label .iv2-field-link { font-weight: 600; color: var(--iv2-primary); font-size: 0.92em; }
.iv2-field-label .iv2-field-link:hover { text-decoration: underline; }
.iv2-field-input { position: relative; }
.iv2-field-input input {
  width: 100%; height: 50px; padding: 0 16px;
  background: var(--iv2-canvas); color: var(--iv2-ink);
  border: 1px solid var(--iv2-hairline-strong); border-radius: var(--iv2-r-sm);
  font-size: 1em; transition: border .15s, box-shadow .15s; outline: none;
}
.iv2-field-input input:focus { border-color: var(--iv2-primary); box-shadow: 0 0 0 4px var(--iv2-primary-soft); }
.iv2-field-input input::placeholder { color: var(--iv2-muted); }
.iv2-field-input input[type="password"] { padding-right: 48px; }
.iv2-field-input .iv2-input-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--iv2-slate); cursor: pointer; padding: 6px; line-height: 0;
  border-radius: 6px; background: none; border: none;
}
.iv2-field-input .iv2-input-eye:hover { background: var(--iv2-surface); }
.iv2-field-input .iv2-input-eye svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Email 驗證碼:輸入框右側的「發送驗證碼」鈕 */
.iv2-field-input.iv2-has-otpbtn input { padding-right: 124px; }
.iv2-field-input .iv2-otp-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 38px; padding: 0 14px;
  background: var(--iv2-ink); color: #fff; border-radius: var(--iv2-r-pill);
  font-size: 0.8em; font-weight: 600; border: none; cursor: pointer; white-space: nowrap;
}
.iv2-field-input .iv2-otp-btn:hover { background: #000; }
.iv2-field-input .iv2-otp-btn:disabled { background: var(--iv2-muted); cursor: not-allowed; }
.iv2-field-hint { font-size: 0.82em; color: var(--iv2-slate); line-height: 1.55; }
.iv2-field-hint.iv2-is-error { color: var(--iv2-error); }
.iv2-field-hint.iv2-is-success { color: var(--iv2-success); }

/* 密碼強度條(建議性,不強制) */
.iv2-pw-strength { display: flex; gap: 5px; margin-top: 7px; }
.iv2-pw-strength span { flex: 1; height: 4px; background: var(--iv2-hairline); border-radius: 2px; transition: background .15s; }
.iv2-pw-strength.iv2-w span:nth-child(1) { background: var(--iv2-error); }
.iv2-pw-strength.iv2-m span:nth-child(1), .iv2-pw-strength.iv2-m span:nth-child(2) { background: var(--iv2-warning); }
.iv2-pw-strength.iv2-s span { background: var(--iv2-success); }

/* checkbox */
.iv2-auth-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9em; color: var(--iv2-charcoal); cursor: pointer; line-height: 1.55; }
.iv2-auth-check input { width: 17px; height: 17px; accent-color: var(--iv2-primary); margin-top: 2px; flex-shrink: 0; }
.iv2-auth-check a { color: var(--iv2-primary); font-weight: 600; }
.iv2-auth-check a:hover { text-decoration: underline; }

.iv2-auth-submit { width: 100%; margin-top: var(--iv2-s-3); }

.iv2-auth-foot { text-align: center; font-size: 0.92em; color: var(--iv2-slate); margin-top: var(--iv2-s-6); }
.iv2-auth-foot a { color: var(--iv2-primary); font-weight: 600; }
.iv2-auth-foot a:hover { text-decoration: underline; }

/* 表單區頁尾的法律連結 */
.iv2-auth-legal { text-align: center; color: var(--iv2-muted); font-size: 0.8em; margin-top: var(--iv2-s-6); }
.iv2-auth-legal a { color: var(--iv2-slate); }
.iv2-auth-legal a:hover { color: var(--iv2-primary); }
.iv2-auth-legal .iv2-dot { margin: 0 8px; }

/* ============ 右側:品牌信賴牆 ============ */
.iv2-auth-brand-side {
  background:
    radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(160deg, var(--iv2-brand-navy) 0%, var(--iv2-brand-navy-mid) 60%, #122142 100%);
  background-size: 24px 24px, auto;
  color: #fff;
  padding: clamp(var(--iv2-s-7), 4vw, var(--iv2-s-8)) clamp(var(--iv2-s-5), 4vw, var(--iv2-s-8));
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.iv2-auth-brand-side::before, .iv2-auth-brand-side::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
}
.iv2-auth-brand-side::before { width: 420px; height: 420px; background: var(--iv2-primary); top: -140px; right: -90px; opacity: 0.5; animation: iv2GlowA 15s ease-in-out infinite; }
.iv2-auth-brand-side::after { width: 320px; height: 320px; background: #2a9d99; bottom: -110px; left: -70px; opacity: 0.32; animation: iv2GlowB 17s ease-in-out infinite; }
@keyframes iv2GlowA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-22px, 22px); } }
@keyframes iv2GlowB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -16px); } }
@media (prefers-reduced-motion: reduce) {
  .iv2-auth-brand-side::before, .iv2-auth-brand-side::after { animation: none; }
}
.iv2-auth-brand-inner {
  position: relative; z-index: 1; max-width: 480px;
  padding: clamp(28px, 3vw, 40px);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* eyebrow:琥珀膠囊標籤 */
.iv2-brand-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: var(--iv2-r-pill); background: rgba(245,215,94,0.12); border: 1px solid rgba(245,215,94,0.32); color: var(--iv2-accent-amber); font-size: 0.8em; font-weight: 700; letter-spacing: 0.06em; }
.iv2-brand-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--iv2-accent-amber); box-shadow: 0 0 0 4px rgba(245,215,94,0.18); flex-shrink: 0; }
.iv2-auth-brand-side h2 { color: #fff; font-size: clamp(30px, 16px + 2vw, 44px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin-top: var(--iv2-s-5); text-shadow: 0 2px 24px rgba(0,0,0,0.28); }
/* 標題關鍵詞:琥珀色點題 */
.iv2-brand-hl { color: var(--iv2-accent-amber); }
/* 標題下方裝飾短線 */
.iv2-brand-rule { width: 52px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--iv2-accent-amber), rgba(245,215,94,0)); margin-top: var(--iv2-s-5); }
/* 主段落 — 加 .iv2-root 提高優先序,蓋過 .iv2-root p{margin:0} 的 reset(否則段距會被歸零)*/
.iv2-root .iv2-brand-lead { color: rgba(255,255,255,0.9); margin-top: var(--iv2-s-5); line-height: 2.05; font-size: 1.15em; text-align: justify; }
/* 次段落(層次較弱、左右對齊、段落間留白)*/
.iv2-root .iv2-brand-body { color: rgba(255,255,255,0.72); margin-top: var(--iv2-s-6); line-height: 2.05; font-size: 1em; text-align: justify; }
/* 重點標籤列(登入頁)*/
.iv2-brand-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--iv2-s-7); }
.iv2-brand-tag { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: var(--iv2-r-pill); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 0.88em; font-weight: 600; }
.iv2-brand-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--iv2-accent-amber); flex-shrink: 0; box-shadow: 0 0 0 3px rgba(245,215,94,0.18); }

/* 品牌區:重點清單 */
.iv2-brand-list { display: flex; flex-direction: column; gap: 14px; margin-top: var(--iv2-s-7); }
.iv2-brand-list li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,0.92); font-size: 0.96em; }
.iv2-brand-list .iv2-bl-check {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.12); display: grid; place-items: center; color: #fff;
}
.iv2-brand-list .iv2-bl-check svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* 品牌區:服務時間標籤 */
.iv2-brand-hours { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--iv2-s-7); color: rgba(255,255,255,0.78); font-size: 0.88em; }
.iv2-brand-hours .iv2-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--iv2-success); box-shadow: 0 0 0 4px rgba(26,174,57,0.25); }

/* 品牌區:客服資訊卡(忘記密碼頁) */
.iv2-brand-contact { display: flex; flex-direction: column; gap: 12px; margin-top: var(--iv2-s-7); }
.iv2-contact-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--iv2-r-md);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.iv2-contact-row:hover { background: rgba(255,255,255,0.10); }
.iv2-contact-row .iv2-cr-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.12); display: grid; place-items: center; color: #fff;
}
.iv2-contact-row .iv2-cr-icon svg { width: 20px; height: 20px; }
.iv2-contact-row .iv2-cr-meta { min-width: 0; }
.iv2-contact-row .iv2-cr-label { font-size: 0.78em; color: rgba(255,255,255,0.6); }
.iv2-contact-row .iv2-cr-val { font-size: 1.02em; font-weight: 600; color: #fff; word-break: break-word; }

/* ============ 忘記密碼:步驟 / 寄出狀態 ============ */
.iv2-steps { display: flex; gap: 8px; margin: var(--iv2-s-5) 0; }
.iv2-step-dot { flex: 1; height: 4px; border-radius: 999px; background: var(--iv2-hairline); transition: background .15s; }
.iv2-step-dot.iv2-is-active { background: var(--iv2-primary); }
.iv2-step-dot.iv2-is-done { background: var(--iv2-success); }
.iv2-step-meta { font-size: 0.8em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--iv2-primary); }

.iv2-sent-card {
  background: var(--iv2-tint-mint); color: #0c5e1b; border-radius: var(--iv2-r-md);
  padding: var(--iv2-s-5); display: flex; gap: var(--iv2-s-3); align-items: flex-start; margin-top: var(--iv2-s-5);
}
.iv2-sent-card .iv2-sc-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--iv2-success); color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.iv2-sent-card .iv2-sc-title { font-weight: 700; font-size: 1.02em; }
.iv2-sent-card .iv2-sc-desc { margin-top: 6px; font-size: 0.9em; line-height: 1.65; color: #134d22; word-break: break-word; }
.iv2-sent-card .iv2-sc-actions { margin-top: var(--iv2-s-4); display: flex; gap: 10px; flex-wrap: wrap; }

.iv2-help-box { margin-top: var(--iv2-s-5); padding: var(--iv2-s-4); background: var(--iv2-surface); border-radius: var(--iv2-r-md); }
.iv2-help-box .iv2-hb-title { font-weight: 600; font-size: 0.9em; color: var(--iv2-charcoal); }
.iv2-help-box ul { font-size: 0.88em; color: var(--iv2-slate); line-height: 1.8; margin-top: 8px; padding-left: 18px; list-style: disc; }
.iv2-help-box ul a { color: var(--iv2-primary); font-weight: 600; }

/* ============ RWD ============ */
@media (max-width: 900px) {
  .iv2-auth-form-side { padding: var(--iv2-s-6) var(--iv2-s-5); }
  .iv2-auth-form-wrap { padding-block: var(--iv2-s-6); }
  .iv2-auth-brand-side { padding: var(--iv2-s-7) var(--iv2-s-5); }
  /* 品牌區下移至表單下方;登入 / 註冊頁的見證牆在手機隱藏以縮短頁面 */
  .iv2-hide-mobile { display: none; }
}
@media (max-width: 600px) {
  .iv2-root { font-size: 16px; }
  .iv2-auth-form-side { padding: var(--iv2-s-6) 18px; }
  .iv2-auth-brand-side { padding: var(--iv2-s-6) 18px; }
  .iv2-field-input input { height: 48px; }
}
@media (max-width: 380px) {
  .iv2-field-input.iv2-has-otpbtn input { padding-right: 16px; }
  .iv2-field-input .iv2-otp-btn { position: static; transform: none; width: 100%; margin-top: 8px; height: 42px; }
}