/* ================================================================
   頁面背景層次 — 極簡白
   ================================================================ */
.EntrancePage {
    background: #ffffff;
}

/* ================================================================
   設計權杖 — 極簡白風格（細邊框、極淡陰影）
   ================================================================ */
:root {
    --sf-card-bg: #ffffff;
    --sf-card-border: #eef0f4;
    --sf-card-radius: 14px;
    --sf-card-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    --sf-card-shadow-hover: 0 6px 20px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --sf-brand: #FF6B47;
    --sf-brand-deep: #C44726;
    --sf-text: #0f172a;
    --sf-text-muted: #64748b;
    --sf-section-gap: 56px;
}

/* ================================================================
   LoginCard — 公告 + 登入 統一分割卡片
   ================================================================ */

.LoginCard {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    grid-template-areas:
        "news   sep    form";
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    overflow: visible;
    margin-top: 0;
    align-items: stretch;
}

/* 左：公告面板（透明，融入頁面） */
.LoginCard__newsPane {
    grid-area: news;
    padding: 4px 36px 4px 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 0;
}

/* 垂直分隔線 */
.LoginCard__sep {
    grid-area: sep;
    background: #eef0f4;
    margin: 12px 0;
}

/* 右：登入面板（透明，融入頁面） */
.LoginCard__formPane {
    grid-area: form;
    padding: 4px 0 4px 36px;
    background: transparent;
}

/* ── 公告面板內部元素 ───────────────────────────────────────── */
.LC-NewsHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding-bottom: 4px;
}

.LC-NewsAccent {
    width: 3px;
    height: 16px;
    background: var(--sf-brand);
    border-radius: 2px;
    flex-shrink: 0;
}

.LC-NewsTitle {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--sf-text);
    letter-spacing: -.01em;
    line-height: 1.25;
}

.LC-NewsFooterLink {
    display: block;
    margin-top: auto;
    padding-top: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #FF6B47;
    text-decoration: none;
    transition: color .15s;
}

.LC-NewsFooterLink:hover {
    color: #ED5631;
    text-decoration: underline;
}

.LC-NewsBadge {
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .02em;
    border: 1px solid #e6ebf2;
}

/* ── 登入面板頂部文字 ──────────────────────────────────────── */
.LC-FormTitle {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.LC-FormSubtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 24px;
    line-height: 1.5;
}

/* ── NewsList 樣式（統一） ────────────────────────────────── */
.NewsList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── SFAlert 在新結構裡的樣式 ─────────────────────────────── */
.LoginCard__formPane .SFAlert {
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: #FFF4EE;
    border: 1px solid #FFCDB8;
    color: #C44726;
}
.LoginCard__formPane .SFAlert--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .LoginCard {
        grid-template-columns: 1fr;
        grid-template-areas:
            "form"
            "sep"
            "news";
    }

    .LoginCard__sep {
        height: 1px;
        width: auto;
        margin: 24px 0;
        background: #eef0f4;
    }

    .LoginCard__newsPane {
        background: transparent;
        padding: 4px 4px 8px;
    }

    .LoginCard__formPane {
        padding: 4px 4px 8px;
    }
}

@media (max-width: 480px) {
    .LoginCard { margin-top: 8px; }
    .LoginCard__formPane { padding: 0; }
    .LoginCard__newsPane { padding: 0; }
}

/* ================================================================
   Login Form — 新版登入區塊樣式（LF- 前綴）
   ================================================================ */

/* 欄位容器 */
.LF-Field {
    margin-bottom: 16px;
}

/* 標籤列（含忘記密碼連結） */
.LF-LabelRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.LF-Label {
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 7px;
    display: block;
    letter-spacing: .01em;
}

.LF-Label i {
    color: #94a3b8;
    font-size: 11px;
    margin-right: 3px;
}

.LF-LabelRow .LF-Label { margin-bottom: 0; }

/* 忘記密碼 — 放在密碼標籤右側，低調文字連結 */
.LF-ForgotLink {
    font-size: 12px;
    color: #94a3b8;
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
.LF-ForgotLink:hover { color: #FF6B47; text-decoration: none; }

/* Input — 精緻細邊框、柔和聚焦光暈 */
.LF-Input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    font-family: inherit;
}
.LF-Input::placeholder { color: #94a3b8; }
.LF-Input:hover { border-color: #cbd5e1; }
.LF-Input:focus {
    border-color: #FF6B47;
    box-shadow: 0 0 0 4px rgba(255, 107, 71, .10);
    background: #fff;
}
.LF-Input.is-error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .08); }

/* 密碼欄含眼睛按鈕 */
.LF-PasswordWrap {
    position: relative;
    display: flex;
    align-items: center;
}
.LF-PasswordWrap .LF-Input { padding-right: 44px; }

.LF-EyeBtn {
    position: absolute;
    right: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #94a3b8;
    font-size: 14px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color .15s, background-color .15s;
}
.LF-EyeBtn:hover { color: #FF6B47; background: #FFF3EC; }

/* ── 主要登入按鈕：品牌色漸層 + 多層陰影 ────────────────────── */
.LF-BtnPrimary {
    width: 100%;
    height: 48px;
    background: linear-gradient(135deg, #FF6B47 0%, #ED5631 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 1px 2px rgba(15, 30, 70, .08),
        0 10px 26px rgba(255, 107, 71, .24);
    transition: transform .2s ease, box-shadow .25s ease;
}
.LF-BtnPrimary:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 2px 4px rgba(15, 30, 70, .1),
        0 14px 34px rgba(255, 107, 71, .34);
}
.LF-BtnPrimary:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 6px 16px rgba(255, 107, 71, .26);
}
.LF-BtnPrimary:disabled {
    background: #cbd5e1;
    color: #fff;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    border-color: transparent;
}

/* ── 或 分隔線：精緻、字母大寫展開 ───────────────────────── */
.LF-Divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.LF-Divider::before,
.LF-Divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eef0f4;
}

/* ── LINE 登入按鈕：白底綠線，與極簡風格一致 ───────────────── */
.LF-BtnLine {
    width: 100%;
    height: 48px;
    background: #ffffff;
    color: #06A647;
    border: 1px solid #d8f0e0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 30, 70, .04);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .25s ease, color .2s ease;
}
.LF-BtnLine i { font-size: 19px; color: #06C755; }
.LF-BtnLine:hover {
    background: #f5fdf8;
    border-color: #a8e0bd;
    color: #058036;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(6, 199, 85, .14);
}
.LF-BtnLine:active { transform: translateY(0); }

/* ── 尚未註冊提示 ────────────────────────────────────────────── */
.LF-SignupHint {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin: 22px 0 4px;
    line-height: 1.5;
}
.LF-SignupLink {
    color: #FF6B47;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: color .15s;
}
.LF-SignupLink::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity .15s;
}
.LF-SignupLink:hover { color: #ED5631; text-decoration: none; }
.LF-SignupLink:hover::after { opacity: 1; }

/* ================================================================
   以下為原有樣式（保持相容）
   ================================================================ */

/* ... existing code ... */

.FormSection {
    display: grid;
    grid-template-columns: 100px 1fr; /* 修改第一列为 100px */
    gap: 8px 14px;
    padding: 0 10px;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;

}

/* 每組欄位使用兩格：左為標籤，右為控制項 */
.FormDiv {
    display: contents; /* 讓內部子元素直接參與 grid 佈局 */
}

/* 標籤欄 */
.FormDiv .FormDivTitle {
    grid-column: 1 / 2;
    line-height: 32px; /* 原為 36px，縮短讓上下更貼近 */
    width: 100px;
    font-weight: 600 !important;
    color: #fff;
    display: inline-block;
    margin-bottom: 0; /* 確保無額外間距 */
}

/* 控制項欄 */
.FormDiv .FormControl {
    grid-column: 2 / 3;
}

.Input {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    line-height: 22px;
    height: 38px; /* 原為 40px，微縮提高貼近感 */
    padding: 0 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    background:#fff;
    width: 100%;
    max-width: 420px;
}
.Input:focus {
    border-color: #FF6B47;
    box-shadow: 0 0 0 3px rgba(255,107,71,0.15);
}
.Input::placeholder {
    color:#9ca3af;
}

/* 密碼輸入容器（含顯示切換按鈕） */
.PasswordWrap {
    position: relative;
    width: 100%;
    max-width: 420px;
}
.PasswordToggleBtn {
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    cursor:pointer;
    color:#6b7280;
    line-height: 1;
    padding: 6px; /* 提升可點擊區域 */
}

/* 記住我：跨兩欄，並垂直置中 */
.FormDiv--inline {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.FormDiv--inline input[type="checkbox"]{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 提交區：跨兩欄，按鈕自適應換行 */
.FormActions {
    grid-column: 1 / -1;
    margin-top: 4px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}
.FormActions .UIButton {
    min-width: 160px;
}

/* 寬度工具維持，但在小螢幕調整為滿版 */
.W-100 { min-width: 220px; }
.W-70 { min-width: 160px; }

/* LoginBlock 內距統一 */
.LoginBlock {
    padding: 16px;
}

/* 原有輸入統一樣式（保留相容性） */
.LoginBlock input{
    border-radius: 8px;
    line-height: 22px;
    border: 1px solid #e5e7eb;
    padding-left: 12px;
    margin-bottom: 2px;
    height: 40px;
}

/* Buttons */
.UIButton {
    appearance: none;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: transform .05s ease, box-shadow .15s ease, background-color .15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    user-select: none;
}
.UIButton:active {
    transform: translateY(1px);
}
.UIButton.Primary {
    background: #FF6B47;
    color: #fff;
}
.UIButton.Primary:hover { background:#ED5631; }
.UIButton.Success {
    background: #06c755;
    color: #fff;
}
.UIButton.Success:hover { background:#05a646; }
.UIButton.Ghost {
    background: #f3f4f6;
    color: #111827;
}
.UIButton.Ghost:hover { background:#e5e7eb; }

/* Alerts */
.SFAlert {
    border-radius: 8px;
    background: #FFF4EE;
    color: #FF6B47;
    padding: 10px 12px;
    margin: 8px 10px;
    border: 1px solid #FFD7C7;
}

/* ── 公告列表 NewsItem ───────────────────────────────────────── */
.NewsList {
    gap: 0;
}

.NewsItem {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: opacity .15s;
}

.NewsItem::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #f1f3f6;
}

.NewsList > .NewsItem:last-child::before {
    display: none;
}

.NewsItem:hover .NewsItem__title {
    color: #FF6B47;
}

.NewsItem--empty,
.NewsItem--loading,
.NewsItem--error {
    color: #9ca3af;
    font-size: 13px;
    cursor: default;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
}

.NewsItem--error { color: #dc2626; }

.NewsItem__spinner {
    width: 13px;
    height: 13px;
    border: 2px solid #d1d5db;
    border-top-color: #6b7280;
    border-radius: 50%;
    flex-shrink: 0;
    animation: niSpin .7s linear infinite;
}

@keyframes niSpin { to { transform: rotate(360deg); } }

.NewsItem__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.NewsItem__date {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: .02em;
}

.NewsItem__badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e6ebf2;
    white-space: nowrap;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

.NewsItem__badge i {
    font-size: 9px;
    opacity: .8;
}

.NewsItem__badge--urgent {
    background: #fff1f2;
    color: #be123c;
    border-color: #fecdd3;
}

.NewsItem__badge--important {
    background: #FFF4EE;
    color: #ED5631;
    border-color: #FFC2A8;
}

.NewsItem__badge--notice {
    background: #ecfdf3;
    color: #047a4d;
    border-color: #b8eecf;
}

.NewsItem__title {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.5;
    text-decoration: none;
    word-break: break-word;
    transition: color .15s;
    letter-spacing: -.005em;
}

.NewsItem__title:hover {
    color: #FF6B47;
    text-decoration: none;
}

/* ── 公告 Modal ──────────────────────────────────────────────── */
.NM-Backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.NM-Box {
    width: min(580px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    display: flex;
    flex-direction: column;
    animation: nmFadeIn .18s ease;
}

@keyframes nmFadeIn {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.NM-Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid #f0f2f5;
    flex-shrink: 0;
}

.NM-HeaderLeft {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.NM-Badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.NM-Badge--urgent  { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.NM-Badge--important { background: #FFF4EE; color: #C44726; border-color: #FFCDB8; }
.NM-Badge--notice  { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }

.NM-Date {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

.NM-CloseBtn {
    border: none;
    background: #f3f4f6;
    color: #374151;
    border-radius: 999px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    flex-shrink: 0;
    transition: background .15s;
    padding: 0;
}

.NM-CloseBtn:hover { background: #e5e7eb; }

.NM-Title {
    margin: 0;
    padding: 14px 18px 10px;
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    line-height: 1.4;
    flex-shrink: 0;
}

.NM-Content {
    padding: 4px 18px 22px;
    color: #374151;
    font-size: 14px;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 480px) {
    .NM-Box { border-radius: 12px; }
    .NM-Title { font-size: 15px; }
}

/* 桌機：LoginNewsLayout 雙欄（公告 + 登入） */
@media screen and (min-width: 992px) {
    .LoginNewsLayout {
        display:grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        align-items:start !important;
    }
}

/* 平板與手機：FormSection 單欄、按鈕滿版 */
@media screen and (max-width: 768px) {
    .FormSection {
        grid-template-columns: 1fr;
        gap: 8px; /* 原為 10px，縮小行距 */
        padding: 0 8px;
    }
    .FormDiv .FormDivTitle {
        grid-column: 1 / -1;
        line-height: 26px; /* 原為 28px，縮短 */
        margin-bottom: 2px; /* 標籤與輸入更靠近 */
    }
    .FormDiv .FormControl,
    .PasswordWrap,
    .Input {
        grid-column: 1 / -1;
        max-width: 100%;
        width: 100%;
    }
    .FormActions .UIButton,
    .W-100, .W-70 {
        width: 100%;
        min-width: 0;
    }
}

/* 小手機微調 */
@media screen and (max-width: 475px) {
    .LoginBlock {
        width: 100%;
        height: auto;
        top: 0;
        left: 0;
        padding: 14px;
    }
}

.ServiceBody {
    flex: 1;
    padding: 4px;
    transition: all 0.3s ease;
}

.ServiceTitle {
    font-weight: 800;
    font-size: 16px;
    line-height: 1.4;
    color: #1a1a1a;
    margin-bottom: 8px;
    position: relative;
    padding-bottom: 8px;
}

.ServiceTitle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #FF6B47;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.3s ease;
}

.ServiceDesc {
    color: #4a5568;
    line-height: 1.7;
    font-size: 14px;
    margin-top: 4px;
    transition: color 0.3s ease;
}

/* ================================================================
   首頁共用 Section 系統
   ================================================================ */

/* 區塊間距 */
.HomeSection {
    margin-top: var(--sf-section-gap);
}

/* 白底卡片容器（運費試算用） */
.HomeCard {
    background: var(--sf-card-bg);
    border: 1px solid var(--sf-card-border);
    border-radius: var(--sf-card-radius);
    box-shadow: var(--sf-card-shadow);
    padding: 32px 32px 28px;
}

/* ── 統一區塊標題（極簡：純排版） ─────────────────────────────── */
.SectionHead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.SectionHead--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    margin-bottom: 32px;
}

/* 極簡風格：移除裝飾條，直接以排版層次表達 */
.SectionAccent {
    display: none;
}

.SectionTitle {
    font-size: 22px;
    font-weight: 700;
    color: var(--sf-text);
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.SectionSubtitle {
    font-size: 14px;
    color: var(--sf-text-muted);
    margin: 0;
    line-height: 1.6;
    font-weight: 400;
}

/* ── 注意事項 InfoNotice（極簡：淺灰底） ────────────────────── */
.InfoNotice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fafbfc;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 24px;
}

.InfoNotice__icon {
    color: #FF6B47;
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.InfoNotice__title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 6px;
}

.InfoNotice__list {
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.8;
}

/* ── 運費試算輸入 Grid ────────────────────────────────────────── */
.CalcGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.CalcField {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.CalcField--wide {
    grid-column: span 2;
}

.CalcLabel {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.CalcInput {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    appearance: auto;
}

.CalcInput:focus {
    border-color: #FF6B47;
    box-shadow: 0 0 0 3px rgba(255,107,71,.12);
}

/* 計算按鈕列 */
.CalcActions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.CalcBtn {
    height: 44px;
    padding: 0 22px;
    background: #FF6B47;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 12px rgba(255,107,71,.28);
    transition: background .2s, box-shadow .2s, transform .1s;
    flex-shrink: 0;
}

.CalcBtn:hover {
    background: #ED5631;
    box-shadow: 0 6px 16px rgba(255,107,71,.36);
}

.CalcBtn:active { transform: scale(.97); }

.CalcHint {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.5;
}

/* 結果顯示 */
.CalcResult {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    min-height: 100px;
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
}

/* ── 服務卡片 ─────────────────────────────────────────────────── */
.ServicesSection {
    margin-bottom: 24px;
}

.ServiceCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ServiceCard {
    background: var(--sf-card-bg);
    border: 1px solid var(--sf-card-border);
    border-radius: var(--sf-card-radius);
    overflow: hidden;
    box-shadow: var(--sf-card-shadow);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    /* 進場動畫 */
    opacity: 0;
    transform: translateY(24px);
    animation: scFadeUp .5s ease forwards;
}

.ServiceCard:nth-child(1) { animation-delay: .05s; }
.ServiceCard:nth-child(2) { animation-delay: .10s; }
.ServiceCard:nth-child(3) { animation-delay: .15s; }
.ServiceCard:nth-child(4) { animation-delay: .20s; }
.ServiceCard:nth-child(5) { animation-delay: .25s; }
.ServiceCard:nth-child(6) { animation-delay: .30s; }

@keyframes scFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

.ServiceCard:hover {
    transform: translateY(-3px);
    box-shadow: var(--sf-card-shadow-hover);
    border-color: #e0e4eb;
}

.ServiceCard:focus-visible {
    outline: 2px solid #FF6B47;
    outline-offset: 3px;
}

/* 服務圖片 */
.ServiceImg {
    width: 100%;
    height: 170px;
    background-size: cover;
    background-position: center;
    background-color: #f3f4f6;
    flex-shrink: 0;
    transition: transform .35s ease;
}

.ServiceCard:hover .ServiceImg {
    transform: scale(1.04);
}

/* 卡片文字區 */
.ServiceBody {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ServiceTitle {
    font-size: 16px;
    font-weight: 800;
    color: #111827;
    line-height: 1.4;
}

.ServiceDesc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.7;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .CalcGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .CalcField--wide { grid-column: span 1; }
    .ServiceCards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 600px) {
    .HomeCard { padding: 20px 16px; }
    .CalcGrid { grid-template-columns: repeat(2, 1fr); }
    .ServiceCards { grid-template-columns: 1fr; gap: 14px; }
    .ServiceImg { height: 150px; }
}

@media (max-width: 400px) {
    .CalcGrid { grid-template-columns: 1fr 1fr; }
    .CalcField--wide { grid-column: 1 / -1; }
}

/* ████████████████████████████████████████████████████████████████
   LINE 客服浮動按鈕（FAB）
   ████████████████████████████████████████████████████████████████ */
.LineFloat {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(135deg, #06C755 0%, #05A849 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 12px 22px 12px 16px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .25),
        0 1px 3px rgba(6, 100, 50, .15),
        0 12px 32px rgba(6, 199, 85, .38);
    transition: transform .25s cubic-bezier(.2,.7,.3,1),
                box-shadow .25s ease,
                background-color .2s ease;
}

.LineFloat:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        0 2px 4px rgba(6, 100, 50, .18),
        0 18px 44px rgba(6, 199, 85, .55);
}

.LineFloat:active {
    transform: translateY(-1px) scale(1);
}

/* 內容容器（icon + 文字） */
.LineFloat__inner {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.LineFloat__icon {
    font-size: 26px;
    line-height: 1;
    color: #ffffff;
}

.LineFloat__text {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
    text-align: left;
}

.LineFloat__title {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .04em;
}

.LineFloat__hint {
    font-size: 11px;
    font-weight: 500;
    opacity: .9;
    letter-spacing: .02em;
}

/* 兩層脈動光暈 */
.LineFloat__pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #06C755;
    opacity: .55;
    z-index: 0;
    animation: lineFloatPulse 2.2s ease-out infinite;
    pointer-events: none;
}

.LineFloat__pulse--delay {
    animation-delay: 1.1s;
}

@keyframes lineFloatPulse {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.3);  opacity: 0; }
    100% { transform: scale(1.3);  opacity: 0; }
}

/* 滑鼠 hover 時暫停脈動 */
.LineFloat:hover .LineFloat__pulse {
    animation-play-state: paused;
    opacity: 0;
}

/* Responsive — 手機壓縮成圓形圖示按鈕 */
@media (max-width: 600px) {
    .LineFloat {
        bottom: 18px;
        right: 18px;
        padding: 0;
        width: 58px;
        height: 58px;
        justify-content: center;
    }
    .LineFloat__inner { gap: 0; }
    .LineFloat__icon { font-size: 26px; }
    .LineFloat__text { display: none; }
}

/* 減少動態偏好 (a11y) */
@media (prefers-reduced-motion: reduce) {
    .LineFloat__pulse { animation: none; opacity: 0; }
    .LineFloat { transition: none; }
}

/* ████████████████████████████████████████████████████████████████
   新版首頁區塊系統 — Hero / Stats / HowItWorks / FAQ / BottomCTA
   ████████████████████████████████████████████████████████████████ */

main { display: block; }

/* ════════ Hero — 左文案 + 右登入卡 ════════ */
.Hero {
    position: relative;
    padding: 64px 24px 56px;
    background: #ffffff;
    overflow: hidden;
}

.Hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(680px 380px at 10% 18%, rgba(255, 107, 71, .06), transparent 60%),
        radial-gradient(600px 340px at 95% 95%, rgba(255, 107, 71, .045), transparent 65%);
    pointer-events: none;
}

.Hero__inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.Hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.Hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FF6B47;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    padding: 6px 14px 6px 10px;
    border: 1px solid #FFD7C7;
    background: #FFF4EE;
    border-radius: 999px;
    margin-bottom: 28px;
}

.Hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    background: #FF6B47;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 107, 71, .14);
}

.Hero__title {
    font-size: 3.3rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.18;
    margin: 0 0 32px;
    letter-spacing: -.025em;
}

.Hero__title-accent {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #FF6B47 0%, #ED5631 55%, #FFA889 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 手繪式底線 — SVG path */
.Hero__title-underline {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -10px;
    width: 92%;
    height: 14px;
    color: #FFA889;
    opacity: .55;
    pointer-events: none;
}

.Hero__subtitle {
    font-size: 16.5px;
    color: #475569;
    line-height: 1.95;
    margin: 0 0 36px;
    max-width: 540px;
}

.Hero__subtitle strong {
    color: #0f172a;
    font-weight: 700;
    background: linear-gradient(180deg, transparent 60%, rgba(255, 215, 199, .55) 60%);
    padding: 0 2px;
}

.Hero__actions {
    display: flex;
    gap: 12px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

/* 信任區塊 (頭像 + 文案) */
.Hero__trust {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #FFFAF6 0%, #FFF4EE 100%);
    border: 1px solid #FFE4D5;
    border-radius: 14px;
    max-width: 460px;
}

.HeroAvatars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.HeroAvatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid #ffffff;
    margin-left: -10px;
    box-shadow: 0 2px 6px rgba(15, 30, 70, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
}

.HeroAvatar:first-child { margin-left: 0; }

.HeroAvatar--1 { background: linear-gradient(135deg, #FFD7C7 0%, #FFA889 100%); }
.HeroAvatar--2 { background: linear-gradient(135deg, #FFC2A8 0%, #FF8C5A 100%); }
.HeroAvatar--3 { background: linear-gradient(135deg, #FFA889 0%, #FF6B47 100%); }

.HeroAvatar--more {
    background: #ffffff;
    color: #FF6B47;
    font-size: 14px;
    font-weight: 800;
    border-color: #FFD7C7;
}

.Hero__trustText {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.45;
}

.Hero__trustText strong {
    color: #0f172a;
    font-weight: 700;
}

/* 特色標籤群 */
.Hero__featuresLabel {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.Hero__featuresLabel::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #eef0f4 0%, transparent 100%);
}

.Hero__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.Hero__feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #334155;
    font-weight: 600;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 999px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.Hero__feature:hover {
    border-color: #FFD7C7;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 30, 70, .06);
}

.Hero__feature i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFF4EE 0%, #FFE0D0 100%);
    color: #FF6B47;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* ════════ HeroCTA — 主要 / 次要 CTA ════════ */
.HeroCTA {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #FF6B47 0%, #ED5631 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 6px 6px 6px 26px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 1px 2px rgba(15, 30, 70, .08),
        0 12px 30px rgba(255, 107, 71, .26);
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background-color .2s ease, color .2s ease;
}

.HeroCTA__text { line-height: 1; }

.HeroCTA__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
    font-size: 13px;
    transition: transform .3s cubic-bezier(.2,.7,.3,1), background-color .25s ease;
}

.HeroCTA:hover {
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        0 4px 8px rgba(15, 30, 70, .12),
        0 18px 40px rgba(255, 107, 71, .36);
}

.HeroCTA:hover .HeroCTA__arrow {
    background: rgba(255, 255, 255, .28);
    transform: translateX(3px);
}

.HeroCTA:active { transform: translateY(0); }

.HeroCTA:focus-visible {
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        0 0 0 4px rgba(255, 107, 71, .25),
        0 14px 36px rgba(255, 107, 71, .3);
}

/* Ghost：白底外框次要 CTA */
.HeroCTA--ghost {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e2e6ec;
    padding: 12px 22px;
    box-shadow: none;
    gap: 8px;
}

.HeroCTA--ghost:hover {
    background: #fff;
    color: #FF6B47;
    border-color: #FFC2A8;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 30, 70, .08);
}

.HeroCTA--ghost i {
    color: #FF6B47;
    font-size: 14px;
}

/* Light：在深色 CTA 區用 */
.HeroCTA--light {
    background: #ffffff;
    color: #C44726;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 8px 24px rgba(0, 0, 0, .22);
}

.HeroCTA--light .HeroCTA__arrow {
    background: rgba(196, 71, 38, .12);
    color: #C44726;
}

.HeroCTA--light:hover {
    color: #C44726;
    background: #FFF1EB;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 14px 32px rgba(0, 0, 0, .3);
}

.HeroCTA--light:hover .HeroCTA__arrow {
    background: rgba(196, 71, 38, .2);
}

.HeroCTA--ghostLight {
    background: transparent;
    color: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 12px 22px;
    box-shadow: none;
    gap: 8px;
    font-weight: 500;
}

.HeroCTA--ghostLight:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .5);
    transform: translateY(-1px);
    box-shadow: none;
}

/* ════════ LoginPanel — Hero 右側登入卡 ════════ */
.LoginPanel {
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    padding: 32px 32px 28px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 28px 60px -22px rgba(15, 30, 70, .14),
        0 10px 24px -8px rgba(15, 30, 70, .06);
}

.LoginPanel__title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.LoginPanel__subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 24px;
    line-height: 1.5;
}

.LoginPanel .SFAlert {
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    background: #FFF4EE;
    border: 1px solid #FFCDB8;
    color: #C44726;
}

.LoginPanel .SFAlert--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* ════════ StatsStrip — 信任數據條 ════════ */
.StatsStrip {
    background: #fafbfc;
    border-top: 1px solid #eef0f4;
    border-bottom: 1px solid #eef0f4;
    padding: 28px 24px;
}

.StatsStrip__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.Stat {
    text-align: center;
    padding: 6px;
    position: relative;
}

.Stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 36px;
    background: #e7ebf2;
}

.Stat__value {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.02em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
}

.Stat__unit {
    font-size: 16px;
    font-weight: 700;
    color: #FF6B47;
    margin-left: 2px;
}

.Stat__label {
    font-size: 13px;
    color: #64748b;
    margin-top: 8px;
    letter-spacing: .02em;
}

/* ════════ Section Eyebrow & 右側連結 ════════ */
.SectionEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FF6B47;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: 10px;
    padding: 4px 12px;
    background: #FFF4EE;
    border: 1px solid #FFD7C7;
    border-radius: 999px;
}

.SectionEyebrow::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #FF6B47;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 107, 71, .14);
}

.SectionLink {
    margin-left: auto;
    font-size: 13.5px;
    color: #FF6B47;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .15s ease;
}

.SectionLink:hover {
    text-decoration: none;
    color: #ED5631;
    gap: 10px;
}

.SectionLink i { font-size: 11px; }

/* 更新 SectionHead/Title 規格以配合新尺度 */
.HomeSection {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 88px;
}

.HomeCard { padding: 36px 36px 30px; }

.SectionTitle {
    font-size: 28px;
    letter-spacing: -.015em;
}

.SectionSubtitle { font-size: 15px; }

/* ════════ HowSteps — 運作流程（精修版） ════════ */
.HowSteps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.HowStep {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #fdfdfe 100%);
    border: 1px solid #eef0f4;
    border-radius: 18px;
    padding: 28px 26px 26px;
    transition: transform .3s cubic-bezier(.2,.7,.3,1),
                border-color .25s ease,
                box-shadow .3s ease,
                background-color .3s ease;
}

/* 頂部：圖示 + 步驟徽章 */
.HowStep__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 10px;
}

.HowStep__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FFF4EE 0%, #FFE0D0 100%);
    color: #FF6B47;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 4px 14px rgba(255, 107, 71, .14);
    transition: transform .35s cubic-bezier(.2,.7,.3,1),
                box-shadow .25s ease;
}

.HowStep__numBadge {
    font-size: 11px;
    font-weight: 700;
    color: #FF6B47;
    letter-spacing: .08em;
    padding: 4px 10px;
    background: #FFF4EE;
    border: 1px solid #FFD7C7;
    border-radius: 999px;
    line-height: 1;
}

.HowStep__title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    letter-spacing: -.005em;
    line-height: 1.35;
}

.HowStep__desc {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.75;
}

/* Hover 效果 */
.HowStep:hover {
    transform: translateY(-5px);
    border-color: #FFC2A8;
    background: linear-gradient(180deg, #ffffff 0%, #FFFBF8 100%);
    box-shadow:
        0 18px 40px rgba(15, 30, 70, .08),
        0 6px 14px rgba(255, 107, 71, .08);
}

.HowStep:hover .HowStep__icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        0 10px 24px rgba(255, 107, 71, .26);
}


/* ════════ ServiceCard 新版（icon 取代圖片） ════════ */
.ServiceCard {
    padding: 28px 26px 24px;
    overflow: visible;
}

.ServiceCard__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FFF4EE 0%, #FFE0D0 100%);
    color: #FF6B47;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
}

.ServiceCard:hover .ServiceCard__icon {
    transform: scale(1.08) rotate(-3deg);
}

.ServiceCard__title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    letter-spacing: -.005em;
}

.ServiceCard__desc {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
    line-height: 1.7;
}

/* ════════ FAQ ════════ */
.FAQList {
    max-width: 780px;
    margin: 0 auto;
    border-top: 1px solid #eef0f4;
}

.FAQItem {
    border-bottom: 1px solid #eef0f4;
}

.FAQItem__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 4px;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    list-style: none;
    transition: color .15s;
}

.FAQItem__q::-webkit-details-marker { display: none; }
.FAQItem__q::marker { content: ''; }

.FAQItem__q:hover { color: #FF6B47; }

.FAQItem__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFF3EC;
    color: #FF6B47;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: transform .25s ease, background-color .15s, color .15s;
}

.FAQItem[open] .FAQItem__icon {
    transform: rotate(45deg);
    background: #FF6B47;
    color: #fff;
}

.FAQItem__a {
    padding: 0 4px 22px;
    font-size: 14.5px;
    color: #475569;
    line-height: 1.75;
    max-width: 700px;
    animation: faqFade .25s ease;
}

@keyframes faqFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ════════ BottomCTA — 底部行動呼籲 ════════ */
.BottomCTA {
    position: relative;
    overflow: hidden;
    background: #2A1810;
    margin-top: 88px;
    padding: 76px 24px;
}

.BottomCTA__decor {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 15% 30%, rgba(255, 140, 90, .25), transparent 60%),
        radial-gradient(700px 350px at 85% 70%, rgba(255, 107, 71, .22), transparent 65%);
    pointer-events: none;
}

.BottomCTA__decor::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .45;
}

.BottomCTA__inner {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.BottomCTA__title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: -.02em;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}

.BottomCTA__subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 32px;
    line-height: 1.6;
}

.BottomCTA__actions {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* ════════ NewsSection — 獨立公告區 ════════ */
.NewsSection .NewsList {
    margin: 0;
    border-top: 1px solid #eef0f4;
}

.NewsSection .NewsItem {
    padding: 14px 0;
}

.NewsSection .NewsItem__title {
    font-size: 15px;
    font-weight: 600;
}

/* 縮短標題與第一筆公告間距 */
.NewsSection .SectionHead {
    margin-bottom: 12px;
}

/* ════════ Responsive ════════ */
@media (max-width: 1024px) {
    .Hero__inner { gap: 40px; }
    .Hero__title { font-size: 2.8rem; }
}

@media (max-width: 900px) {
    .Hero { padding: 48px 20px 44px; }
    .Hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .Hero__title { font-size: 2.4rem; }
    .Hero__subtitle { font-size: 15.5px; }

    .StatsStrip__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 12px;
    }
    .Stat:not(:last-child)::after { display: none; }
    .Stat:nth-child(odd)::after {
        content: '';
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 32px;
        background: #e7ebf2;
        display: block;
    }

    .HowSteps {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .HowStep { padding: 24px 22px 22px; border-radius: 16px; }
    .HowStep__icon { width: 46px; height: 46px; font-size: 18px; border-radius: 12px; }
    .HowStep__title { font-size: 16px; }

    .HomeSection { margin-top: 64px; padding-left: 20px; padding-right: 20px; }
    .HomeCard { padding: 28px 24px; }
    .SectionTitle { font-size: 24px; }
    .SectionSubtitle { font-size: 14px; }

    .BottomCTA { padding: 60px 20px; margin-top: 64px; }
    .BottomCTA__title { font-size: 1.7rem; }
}

@media (max-width: 600px) {
    .Hero { padding: 36px 18px 32px; }
    .Hero__title { font-size: 2rem; margin-bottom: 24px; line-height: 1.22; }
    .Hero__subtitle { font-size: 14.5px; line-height: 1.85; margin-bottom: 28px; }
    .Hero__eyebrow { margin-bottom: 22px; }
    .Hero__actions { gap: 10px; margin-bottom: 28px; }
    .Hero__trust { margin-bottom: 26px; }
    .Hero__features { gap: 8px; }
    .Hero__feature { padding: 7px 12px; font-size: 12.5px; }
    .Hero__trust { padding: 12px 14px; gap: 12px; }
    .Hero__trustText { font-size: 12.5px; }
    .HeroAvatar { width: 32px; height: 32px; }
    .Hero__featuresLabel { font-size: 10px; }

    .HeroCTA { font-size: 14px; padding: 5px 5px 5px 22px; gap: 12px; }
    .HeroCTA__arrow { width: 32px; height: 32px; font-size: 12px; }
    .HeroCTA--ghost,
    .HeroCTA--ghostLight { padding: 11px 18px; font-size: 14px; }

    .LoginPanel { padding: 24px 22px 22px; }

    .StatsStrip { padding: 22px 16px; }
    .Stat__value { font-size: 26px; }
    .Stat__unit { font-size: 14px; }

    .HowSteps { grid-template-columns: 1fr; }
    .HowStep::after { display: none !important; }

    .FAQItem__q { font-size: 15px; padding: 18px 4px; }
    .FAQItem__a { font-size: 14px; padding: 0 4px 18px; }

    .BottomCTA { padding: 44px 18px; }
    .BottomCTA__title { font-size: 1.45rem; }
    .BottomCTA__subtitle { font-size: 14.5px; margin-bottom: 24px; }
    .BottomCTA__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .BottomCTA__actions .HeroCTA { justify-content: center; }
}