/* ============================================================
   style.css — 玉山銀行 × Tesla 信貸購車
   ============================================================
   目錄 Table of Contents
   1. CSS Variables / 設計變數
   2. Reset & Base / 基礎重置
   3. Typography / 文字排版
   4. Layout / 版面佈局
   5. Components / 元件樣式
      5-1. Navbar
      5-2. Hero Section
      5-3. Benefits Section
      5-4. Table Section
      5-5. Car Selector Section
      5-6. Ecosystem Section
      5-7. Footer
      5-8. FAB
      5-9. Buttons
   6. Utilities / 工具類別
   7. RWD Breakpoints / 響應式斷點
   8.
   ============================================================ */


/* ============================================================
   1. CSS Variables / 設計變數
   ============================================================ */
:root {
    /* 品牌色彩 Brand Colors */
    --color-primary: #28C0FC;          /* E.SUN 品牌藍 - 信貸主色 */
    --color-secondary: #469F94;        /* E.SUN 品牌綠 - 行動/按鈕 */
    --color-esun-green: #009D95;       /* E.SUN Logo 綠 */

    /* 文字色彩 Text Colors */
    --color-text-dark: #333333;
    --color-text-darker: #1C1C1C;
    --color-text-muted: #7C7C7C;
    --color-text-white: #FFFFFF;
    --color-text-highlight: #FF9900;

    /* 背景色彩 Background Colors */
    --color-bg-white: #FFFFFF;
    --color-bg-light: #F5F5F5;
    --color-bg-lighter: #F0F0F0;
    --color-bg-label: #EAEAEA;
    --color-bg-footer: #4D4D4D;
    --color-bg-dark: #000000;
    --color-border: #B9B9B9;


    /* 字型 Typography */
    --font-family-base: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;

    --font-size-xs:   14px;
    --font-size-sm:   16px;
    --font-size-base: 18px;
    --font-size-md:   20px;
    --font-size-lg:   24px;
    --font-size-xl:   30px;
    --font-size-2xl:  32px;
    /* 以下改36? */
    --font-size-3xl:  36px; 
    --font-size-4xl:  46px;

    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-bold:    700;

    /* 行高 Line Heights */
    --line-height-tight:  1.2;
    --line-height-normal: 1.4;
    --line-height-loose:  1.6;

    /* 間距 Spacing */
    --spacing-xs:   8px;
    --spacing-sm:   12px;
    --spacing-md:   16px;
    --spacing-lg:   24px;
    --spacing-xl:   40px;
    --spacing-2xl:  60px;
    --spacing-3xl:  80px;

    /* 圓角 Border Radius */
    --radius-sm:     4px;
    --radius-full:   9999px;

    /* 陰影 Shadows */
    --shadow-navbar: 0 4px 4px rgba(0, 0, 0, 0.25);
    --shadow-text:   2px 2px 2px rgba(0, 0, 0, 0.75);
    --shadow-hero-text: 0 4px 4px rgba(0, 0, 0, 0.25);

    /* 元件尺寸 Component Sizes */
    --navbar-height:      60px;
    --container-max-width: 1440px;
    --table-max-width:    980px;
}


/* ============================================================
   2. Reset & Base / 基礎重置
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    line-height: var(--line-height-normal);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-family-base);
}

/* 設定 400 (Regular) */
@font-face {
    font-family: 'Noto Sans TC';
    src: url('./fonts/NotoSansTC-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 設定 500 (Medium) */
@font-face {
    font-family: 'Noto Sans TC';
    src: url('../fonts/NotoSansTC-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* 設定 700 (Bold) */
@font-face {
    font-family: 'Noto Sans TC';
    src: url('../fonts/NotoSansTC-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   3. Typography / 文字排版
   ============================================================ */
.section-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-dark);
    text-align: center;
    line-height: var(--line-height-tight);
}


/* ============================================================
   4. Layout / 版面佈局
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
}


/* ============================================================
   5. Components / 元件樣式
   ============================================================ */

/* --- 5-9. Buttons (先定義，其他元件使用) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: 1.25;
    border-radius: var(--radius-sm);
    /*padding: 0px 20px;*/
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    height: 65px;
    width: 200px;
}

/* 主要按鈕 Primary Button (#469F94 填色) */
.btn--primary {
    background-color: var(--color-secondary);
    color: var(--color-text-white);
    border: 1px solid var(--color-secondary);
}

.btn--primary:hover {
    background-color: #3a8e84;
    border-color: #3a8e84;
}

.btn--primary:active {
    background-color: #2f7a71;
    border-color: #2f7a71;
}

.btn--primary:disabled {
    background-color: #a8d5d1;
    border-color: #a8d5d1;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn--primary:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* 信貸藍主要按鈕 Primary Blue (#28C0FC 填色) */
.btn--primary-blue {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: 1px solid var(--color-primary);
    padding: 12px 50px;
}

.btn--primary-blue:hover {
    background-color: #1aabec;
    border-color: #1aabec;
}

.btn--primary-blue:active {
    background-color: #0e96d6;
    border-color: #0e96d6;
}

.btn--primary-blue:disabled {
    background-color: #a0dffa;
    border-color: #a0dffa;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn--primary-blue:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* 小尺寸按鈕 Small Button (Navbar) */
.btn--sm {
    height: 45px;
    width: 140px;s
    font-size: var(--font-size-sm);
}

/* 白色外框按鈕 Outline White (生態圈卡片) */
.btn--outline-white {
    background-color: transparent;
    color: var(--color-text-white);
    border: 1px solid var(--color-text-white);
    /*padding: 12px 50px;*/
}

.btn--outline-white:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.btn--outline-white:active {
    background-color: rgba(255, 255, 255, 0.3);
}

.btn--outline-white:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn--outline-white:focus-visible {
    outline: 2px solid var(--color-text-white);
    outline-offset: 2px;
}

/* 品牌綠外框按鈕 Outline Teal (成為合作夥伴) */
.btn--outline-teal {
    background-color: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    /*padding: 12px 50px;*/
    border-radius: var(--radius-sm);
}

.btn--outline-teal:hover {
    opacity: 0.6;
}

.btn--outline-teal:active {
    background-color: rgba(70, 159, 148, 0.2);
}

.btn--outline-teal:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn--outline-teal:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}


/* --- 5-1. Navbar / 導航列 --- */
.navbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--color-bg-white);
    box-shadow: var(--shadow-navbar);
    height: 60px;
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 100px;
}

/* Logo 群組 */
.navbar__logo-link {
    display: flex;
    align-items: center;
    gap: 16px;
}

.navbar__logo-esun {
    height: 31px;
    width: auto;
}

.navbar__logo-divider {
    color: #2B2B2B;
    font-size: var(--font-size-md);
    line-height: 1;
    opacity: 0.5;
}

.navbar__logo-tesla {
    height: 30px;
    width: auto;
}

/* 漢堡選單按鈕（手機專用） */
.navbar__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
}

.navbar__hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-text-dark);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 漢堡開啟狀態 */
.navbar__hamburger--open .navbar__hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar__hamburger--open .navbar__hamburger-line:nth-child(2) {
    opacity: 0;
}

.navbar__hamburger--open .navbar__hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 導航連結 */
.navbar__nav-list {
    display: flex;
    align-items: center;
    gap: 16px;
}

.navbar__nav-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-dark);
    transition: color 0.2s ease;
    padding: 4px 0;
}

.navbar__nav-link--active {
    color: var(--color-secondary);
}

.navbar__nav-link:hover {
    color: var(--color-secondary);
}

.navbar__nav-link:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}


/* --- 5-2. Hero Section / 英雄主視覺 --- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.hero-section {
    position: relative;
    width: 100%;
    height: calc(80vh - 60px); 
    /*height: calc(100vh - 60px); */
    display: flex;
    align-items: center;
    justify-content: center;  
    overflow: hidden;
}


@media (orientation: landscape) {
  .hero-section {
      /*height: calc(85vh - 60px); */
      height: 450px; 
  }
}


.hero-section__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.hero-section__content {
    position: absolute;
    left: 10%; 
    top: 12%;    
    
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    
    max-width: 500px;
    width: 100%;
    text-align: center; 
}

.hero-section__subtitle {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-primary);
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-shadow: var(--shadow-text);
}

.hero-section__title {
    font-size: 40px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-white);
    line-height: 1.4;
    /*text-align: center;*/
    text-shadow: var(--shadow-hero-text);
    letter-spacing: 0.2em;
    align-self: center;
}

.hero-section__social-proof {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-white);
    line-height: 1.2;
}


.mobile-space {
    display: none;
}

.pc-break {
    display: block;
}



/* --- 5-3. Benefits Section / 信貸優勢 --- */
.benefits-section {
    background-color: var(--color-bg-white);
    padding-top: var(--spacing-3xl);
}

.benefits-section__header {
    padding-bottom: var(--spacing-xl);
    text-align: center;
}

/* 優勢列 */
.benefits-section__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 310px;
}

/* 文字與圖片各佔50% */
.benefits-section__text-group,
.benefits-section__image-group {
    flex: 0 0 50%;
    width: 50%;
}

/* 文字群組 */
.benefits-section__text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0 60px;
    height: 100%;
}

.benefits-section__subtitle {
    font-size: 26px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-dark);
    text-align: center;
    line-height: var(--line-height-tight);
}

.benefits-section__desc {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-dark);
    text-align: center;
    line-height: var(--line-height-normal);
}

/* 圖片群組 */
.benefits-section__image-group {
    height: 100%;
    overflow: hidden;
}

.benefits-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 反向排列（圖片左、文字右） */
.benefits-section__row--reverse {
    flex-direction: row-reverse;
}


/* --- 5-4. Table Section / 比較表 --- */
.table-section {
    background-color: var(--color-bg-light);
    /*padding: var(--spacing-3xl) 0;*/
    padding: 100px 0px;
}

.table-section__header {
    padding-bottom: var(--spacing-xl);
    text-align: center;
}

/* 比較表容器 */
.comparison-table {
    width: 100%;
    max-width: var(--table-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 表格列 */
.comparison-table__row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

/* 表格儲存格 */
.comparison-table__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    font-size: var(--font-size-base);
    line-height: 1.2;
    border: 3px solid var(--color-bg-light);
    text-align: center;
    box-sizing: border-box;
}

/* 標籤欄（第一欄） */
.comparison-table__cell--label {
    flex: 0 0 200px;
    background-color: var(--color-bg-label);
    color: var(--color-text-dark);
    font-weight: var(--font-weight-regular);
}

/* 資料欄（第二、三欄） */
.comparison-table__cell--data {
    flex: 1;
    background-color: var(--color-bg-white);
    color: var(--color-text-dark);
    font-weight: var(--font-weight-regular);
}

/* 玉山欄高亮 */
.comparison-table__cell--highlight {
    background-color: var(--color-bg-white);
    display: flex; 
    flex-direction: row;
}

.text-highlight {
    color: var(--color-text-highlight); 
}

.text-bold {
    font-weight: var(--font-weight-bold);
}

/* 表頭欄 1（一般汽車代款） */
.comparison-table__row--header .comparison-table__cell--col1 {
    background-color: var(--color-text-muted);
    color: var(--color-text-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    flex: 1;
    border: 3px solid var(--color-bg-light);
    min-width: 0;
}

/* 表頭欄 2（玉山信用貸款） */
.comparison-table__row--header .comparison-table__cell--col2 {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    flex: 1;
    border: 3px solid var(--color-bg-light);
    min-width: 0;
}

/* 玉山欄徽章 */
.comparison-table__badge {
    display: inline-block;
    align-items: center;
    white-space: normal; 
    word-break: break-all;
    
}

.comparison-table__badge::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    
    
    width: 20px;
    height: 20px;
    margin-left: 2px; 
    
    
    background-image: url('../images/icon-check.svg'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(3px);
}


/* --- 5-5. Car Selector Section / 車款選擇器 --- */
.car-selector-section {
    background-color: var(--color-bg-white);
    /*padding-top: var(--spacing-3xl);*/
    /*padding-top: 100px;*/
}

.car-selector-section.selectheader {
    /*padding-bottom: 80px;
    padding-top: 60px;*/
    padding: 60px 0px;
}

.car-selector-section__header {
    /*padding-bottom: var(--spacing-xl);*/
    padding: var(--spacing-xl) 0px;
    text-align: center;
}

/* Tab 選單 */
.car-tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.car-tabs__tab {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-dark);
    padding: 10px 24px;
    /* 四面無外框，只留底部細線 */
    border: none;
    border-bottom: 3px solid rgba(40, 192, 252, 0.3);
    background-color: transparent;
    line-height: 1.2;
    transition: color 0.1s ease, border-bottom-width 0.1s ease;
    cursor: pointer;
}

.car-tabs__tab:hover {
    color: var(--color-primary);
}

/* 選中的 tab：底部線條加粗，文字品牌藍加粗 */
.car-tabs__tab--active {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    border-bottom: 3px solid var(--color-primary);
}

.car-tabs__tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Tab 內容 */
.car-tabs__content {
   /* padding: 0 140px;
    margin-top: 0;*/
    display: flex;
    align-self: center;
}

.car-tabs__panel {
    display: flex;
    justify-content: center; 
    align-items: center; 
    flex-direction: row;
    width: 100%;
}

.car-tabs__panel[hidden] {
    display: none;
}

/* 車款圖片 */
.car-tabs__image-container {
    flex: 0 0 740px;
    overflow: hidden;
}

.car-tabs__car-img {
    width: 100%;
    height: 400px;
    object-fit: contain;
    object-position: center;
}

/* 車款詳細資訊 */
.car-tabs__detail {
    /*flex: 1;*/
    flex: 0 0 240px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 16px;
}

.car-tabs__model-name {
    font-size: clamp(28px, 3.2vw, var(--font-size-4xl));
    font-weight: var(--font-weight-medium);
    color: var(--color-text-dark);
    line-height: var(--line-height-tight);
    text-align: left;
    align-self: flex-start;
}

.car-tabs__price {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-dark);
    line-height: var(--line-height-normal);
    align-self: flex-start;
}

/* 車款探索按鈕（使用品牌藍） */
.car-tabs__detail .btn--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    align-self: flex-start;
}

.car-tabs__detail .btn--primary:hover {
    background-color: #1aabec;
    border-color: #1aabec;
}


/* --- 5-6. Ecosystem Section / 電動車生態圈 --- */
.ecosystem-section {
    background-color: var(--color-bg-white);
    /*padding: var(--spacing-3xl) 0;*/
    padding: 100px 0;
}

.ecosystem-section__header {
    padding-bottom: var(--spacing-xl);
    text-align: center;
}

/* 卡片列 */
.ecosystem-section__row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

/* 特色卡片 */
.feature-card {
    position: relative;
    flex: 1;
    height: 380px;
    overflow: hidden;
}

/* 卡片背景圖 */
.feature-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.4s ease;
}

.feature-card:hover .feature-card__img {
    transform: scale(1.05);
}

/* 深色遮罩 */
.feature-card__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
    transition: background-color 0.3s ease;
}

.feature-card:hover .feature-card__overlay {
    background-color: rgba(0, 0, 0, 0.35);
}

/* 卡片文字內容 */
.feature-card__content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 30px;
}

.feature-card__title {
    font-size: 24px;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-white);
    text-align: center;
    line-height: var(--line-height-tight);
}

/* 合作夥伴按鈕區 */
.ecosystem-section__partner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: var(--spacing-2xl);
}


/* --- 5-7. Footer / 頁尾 --- */
.footer {
    width: 100%;
}

/* 法律聲明區 */
.footer__disclaimer {
    background-color: var(--color-bg-lighter);
    padding: 40px 60px;
}

.footer__disclaimer-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.footer__slogan {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-darker);
    white-space: nowrap;
    padding: 0 10px;
    line-height: 1.2;
    letter-spacing: 0.2em;
}

.footer__legal {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-darker);
    line-height: var(--line-height-loose);
    max-width: 913px;
}

/* 頁尾導航列 */
.footer__nav {
    background-color: var(--color-bg-footer);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 16px 0;
    gap: 0;
}

.footer__nav-link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-white);
    line-height: 1.43;
    padding: 0 10px;
    transition: opacity 0.2s ease;
}

.footer__nav-link:not(.footer__nav-link--copyright):not(:last-child) {
    border-right: 1px solid var(--color-text-white);
}

.footer__nav-link:not(.footer__nav-link--copyright):hover {
    opacity: 0.75;
}

.footer__nav-link--copyright {
    color: var(--color-text-white);
    cursor: default;
}


/* --- 5-8. FAB / 浮動行動按鈕 --- */
.fab-group {
    position: fixed;
    right: 24px;
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    bottom: 24px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.fab-group__btn {
    width: 80px;
    height: 80px;
    border-radius: 38px;
    background-color: var(--color-secondary);
    color: var(--color-text-white);
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: 1.43;
    text-align: center;
    border: none;
    cursor: pointer;
    /*padding: 21px 24px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);*/
}

.fab-group__btn:hover {
    background-color: #3a8e84;
    transform: scale(1.05);
}

.fab-group__btn:active {
    background-color: #2f7a71;
    transform: scale(0.98);
}

.fab-group__btn:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* 底部固定容器 手機才出現*/
.bottom-btn-group {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  display: none;
}

/* 共用按鈕樣式*/
.bottom-btn-group a{
  flex: 1;
  height: 55px;
  line-height: 55px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
}

.btn-left,
.btn-right {
  background-color: var(--color-secondary);
}

.btn-right {
  border-left: 1px solid white;
}


/* ============================================================
   5-10. Page2 專屬樣式 Page2 Specific
   ============================================================ */

/* --- Page2 車款 Variant 下拉選單 --- */
.car-tabs__variant-select {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1px solid #D0D0D0;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.car-tabs__variant-select:focus {
    outline: none;
    outline-offset: 2px;
    /*border-color: white;*/
}


/* --- Page2 購車金試算 Calculator Section --- */

/* 外層藍色背景 Blue wrapper */
.p2-calc {
    background-color: var(--color-primary);
    padding: 80px var(--spacing-xl);
}

/* 整體白卡（含標題）One large white card */
.p2-calc__card {
    max-width: 1060px;
    margin: 0 auto;
    background-color: var(--color-bg-white);
    border-radius: 8px;
    padding: var(--spacing-xl) var(--spacing-3xl);
}

/* 標題（白卡內，深色文字）Title inside white card */
.p2-calc__title {
    font-size: clamp(22px, 2.5vw, var(--font-size-4xl));
    font-weight: var(--font-weight-medium);
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

/* 雙欄主體 Two-column body */
.p2-calc__body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /*gap: var(--spacing-2xl);*/
    align-items: flex-start;
    width: 100%;
}

.p2_link {
    color: var(--color-primary);
    text-decoration: underline;
    transition: opacity 0.2s ease;
    text-underline-offset: 4px;
}

/* ─── 複製貸款條件 ─── */
.toast-message {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%) translateY(16px);
  opacity: 0;

  background: rgba(0, 0, 0, 0.80);
  color: #fff;
  padding: 14px 20px 14px 16px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  /*gap: 4px;*/

  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;

  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999;
  pointer-events: none;
}

.toast-message.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


.toast-message::before {
  content: "";
  width: 30px;
  height: 30px;

  background-image: url("../images/icon-done.svg"); 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  flex-shrink: 0;
}



/* ─── 左欄：車款資訊 + 月付金 ─── */
.p2-calc__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-right: 32px;
    border-right: 1px #D0D0D0 solid;
    height: 100%;

    align-items: stretch;
}

.p2-calc__car-name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    line-height: var(--line-height-tight);
}

.p2-calc__car-price {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.p2-calc__monthly-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    margin-top: 48px;
    display: flex;
}

.p2-calc__monthly-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.p2-calc__monthly-amount {
    font-size: clamp(30px, 3.5vw, 48px);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-highlight);
    line-height: 1;
}

.p2-calc__monthly-unit {
    font-size: var(--font-size-md);
    color: var(--color-text-dark);
}

.p2-calc__actions {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
}

.p2-calc__actions .btn {
    flex: 1;
    padding: 12px var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* ─── 右欄：試算表單（白底）─── */
.p2-calc__form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-left: 32px;
}

.p2-calc__form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
}

/* 標籤 Label */
.p2-calc__form-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    white-space: nowrap;
    min-width: 68px;
}

/* 可編輯輸入框（貸款金額）Editable input */
.p2-calc__form-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #D0D0D0;
    border-radius: var(--radius-sm);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    text-align: left;    /* 數字靠左 */
}

.p2-calc__form-input:focus {
    outline: none;
}

/* 單位文字 Unit text */
.p2-calc__form-unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    white-space: nowrap;
    min-width: 28px;
}
.unit{
    /*font-size: var(--font-size-sm);*/
    color: var(--color-text-dark);
    font-weight: var(--font-weight-regular);
}


/* 純顯示值（貸款利率、貸款費用，不需 input）Read-only display value */
.p2-calc__form-value {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-highlight);
    font-weight: var(--font-weight-bold);
    padding: 8px 0;
}

/* 滑桿列 Slider row align top */
.p2-calc__form-row--slider {
    align-items: flex-start;
}

/* 滑桿容器 Slider wrap */
.p2-calc__slider-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;   /* 讓 flex 子元素可以縮小 */
}

/* 當前值標籤 Current value label */
.p2-calc__slider-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-highlight);
    font-weight: var(--font-weight-bold);
    text-align: center;
    text-align: left;
}

/* range input 本體 */
.p2-calc__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px; /* 軌道細一點 */
    background: #e0e0e0;
    border: 1px solid #999999;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    margin: 8px 0px;
}

/* 讓圓鈕變大，且垂直置中 */
.p2-calc__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; /* 點點很大 */
    height: 20px;
    background: #469F94;
    border-radius: 50%;
    margin-top: -2px; /* (軌道高度/2 - 圓鈕高度/2) 讓它垂直置中 */
}

/* Firefox 直接支援填滿色 */
.p2-calc__slider::-moz-range-progress {
    background: #5FC7B9;
    height: 8px;
    border-radius: 4px;
}

/* 端點標籤 Min/Max labels */
.p2-calc__slider-labels {
    display: flex;
    justify-content: space-between;
}

.p2-calc__slider-min,
.p2-calc__slider-max {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.p2-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: var(--spacing-xs);
}


/* --- Page2 信貸購車方案（3 feature cards）--- */
.p2-loan-features {
    background-color: var(--color-bg-white);
    /*padding: var(--spacing-3xl) 0;*/
    padding: 100px 0;
}

.p2-loan-features__header {
    text-align: center;
    padding-bottom: var(--spacing-xl);
}

.p2-loan-features__cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    padding: 0 var(--spacing-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.p2-loan-feature-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: var(--spacing-2xl) var(--spacing-lg);
    border: 1.5px solid #D0D0D0;
    border-radius: 8px;
    text-align: center;
    transition: box-shadow 0.2s ease;
}

.p2-loan-feature-card__icon {
    width: 100px;        /* 依照設計稿寬度 */
    height: 100px;       /* 依照設計稿高度 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 圖片本身：強制適應容器 */
.p2-loan-feature-card__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.p2-loan-feature-card__text {
    font-size: var(--font-size-md);
    color: var(--color-text-dark);
    line-height: var(--line-height-tight);
}

.p2-loan-feature-card__highlight {
    color: var(--color-text-highlight);
    font-weight: var(--font-weight-bold);
}

.p2-perks {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), 
        url('../images/shutterstock_1499756786.jpg'); 
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 20px;
}

.p2-perks__header {
    text-align: center;
    padding-bottom: var(--spacing-xl);
    position: relative;
    z-index: 1;
}

.p2-perks__title {
    font-size: clamp(28px, 3.2vw, var(--font-size-4xl));
    font-weight: var(--font-weight-medium);
    color: var(--color-text-white);
    line-height: var(--line-height-tight);
}

.p2-perks__cards {
    display: flex;
    flex-direction: row;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    /*padding: 0 var(--spacing-xl);*/
    position: relative;
    z-index: 1;
}

.p2-perk-card {
    flex: 1;
    background-color: var(--color-bg-white);
    border-radius: 8px;
    padding: var(--spacing-xl) var(--spacing-lg);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

.p2-perk-card__icon {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p2-perk-card__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* 確保圖片不失真且完整顯示 */
}

.p2-perk-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.p2-perk-card__title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: var(--line-height-tight);
}

.p2-perk-card__desc {
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    line-height: var(--line-height-normal);
}


/* --- Page2 線上申請3步驟 --- */
.p2-steps {
    background-color: var(--color-bg-white);
    /*padding: var(--spacing-3xl) 0;*/
    padding: 100px 0;
}

.p2-steps__header {
    text-align: center;
    padding-bottom: var(--spacing-2xl);
}

.p2-steps__list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 0 var(--spacing-3xl);
}

.p2-step {
    /*flex: 1;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--spacing-md);
    position: relative;
    width: 320px;
}

.p2-step__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background-color: var(--color-bg-light);
    padding: 2px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 8px;
}

.p2-step__icon {
    width: 200px;      
    height: 200px;     
    display: flex;
    align-items: center;
    justify-content: center;
}

.p2-step__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.p2-step__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
}

.p2-step__desc {
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    line-height: var(--line-height-normal);
}

.p2-step__link {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.p2-steps__actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-md);

    margin: var(--spacing-2xl) 0 0 0;
}


/* --- Page2 注意事項 --- */
.p2-notes {
    background-color: var(--color-bg-light);
    /*padding: var(--spacing-2xl) 0;*/
    padding: 80px 0;
}

.p2-notes__header {
    text-align: center;
    padding-bottom: var(--spacing-xl);
}

.p2-notes__list {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-2xl);
    display: flex;
    flex-direction: column;
}

.p2-notes__item {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-loose);
    display: flex;
}



/* ============================================================
   6. Utilities / 工具類別
   ============================================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   7. RWD Breakpoints / 響應式斷點
   ============================================================ */

/* Tablet: @media (min-width: 576px) */
@media (min-width: 576px) {

    /*.hero-section__content {
        left: 80px;
        top: 140px;
        max-width: 360px;
    }*/

    
}

/* Desktop: @media (min-width: 992px) */
@media (min-width: 992px) {

    .navbar__hamburger {
        display: none;
    }

    .navbar__nav {
        display: flex;
    }


    .hero-section__bg-img {
        /*object-position: right center;*/
      }



}

/* Wide: @media (min-width: 1200px) */
@media (min-width: 1200px) {

    /*.car-tabs__content {
        padding: 0 160px;
    }*/
}


/* ======================================================
   Mobile 調整（max-width 小螢幕覆蓋）
   ====================================================== */
@media (max-width: 991px) {

    /* 平板navbar */
    .navbar__inner {
        padding: 0 20px;
    }

    .navbar__hamburger {
        display: flex;
    }

    .navbar__nav {
        display: none;
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        background-color: var(--color-bg-white);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 16px 20px 20px;
        z-index: 99;
    }

    .navbar__nav.navbar__nav--open {
        display: flex;
    }

    .navbar__nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        width: 100%;
    }

    .navbar__nav-item:last-child {
        align-self: flex-start;
    }

    /* 平板hero-section */
    .hero-section__content {
        left: 50%;
        transform: translateX(-50%); 
        top: 60px;
        align-items: center; 
        text-align: center;
        gap: 20px;
        padding: 0 12px;
        width: 100%;            
        max-width: none; 
        box-sizing: border-box;
    }

    .hero-section__subtitle {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-medium);
        letter-spacing: 0.1em;
        text-shadow: none;
    }

    .hero-section__title {
        font-size: 45px;
        letter-spacing: 0.1em;
    }
    
    .pc-break {
        display: inline;
    }
    
    .hero-section__social-proof {
        /*font-size: var(--font-size-md);*/
    }

    /* 平板共用 */
    .section-title {
        font-size: var(--font-size-lg);
    }

    .table-section,
    .car-selector-section,
    .ecosystem-section,
    .p2-loan-features,
    .p2-perks,
    .p2-steps,
    .p2-notes {
        /*padding: var(--spacing-xl) 0;*/
        padding: 60px 0;
    }

    .benefits-section__header,
    .table-section__header,
    .car-selector-section__header,
    .ecosystem-section__header,
    .p2-loan-features__header,
    .p2-perks__header,
    .p2-steps__header,
    .p2-notes__header {
        padding-bottom: var(--spacing-lg);
    }

    /* 平板benefits-section */
    .benefits-section {
        /*padding-top: var(--spacing-xl);*/
        padding-top: 60px;
    }

    .benefits-section__row {
        height: auto;
    }

    .benefits-section__text-group,
    .benefits-section__image-group {
        width: 100%;
    }
    
    .benefits-section__text-group {
        gap: var(--spacing-xs);
    }

    .benefits-section__subtitle {
        font-size: var(--font-size-md);
    }

    .benefits-section__desc {
        font-size: var(--font-size-sm);
    }


    /* 平板table-section */
    .comparison-table {
        max-width: 100%;
        padding: 0 16px;
    }

    .comparison-table__cell {
        font-size: var(--font-size-sm);
        padding: 12px 10px;
        border: 1px solid var(--color-bg-light);
    }

    .comparison-table__row--header .comparison-table__cell--col1,
    .comparison-table__row--header .comparison-table__cell--col2 {
        border: 1px solid var(--color-bg-light);
    }

    .comparison-table__cell--label {
        flex: 0 0 90px;
    }

    /* 平板car-selector-section */
    .car-tabs__content {
        padding: 0 16px;
    }

    .car-tabs__panel {
        flex-direction: column;
    }

    .car-tabs__image-container {
        flex: none;
        width: 100%;
    }

    .car-tabs__car-img {
        height: 240px;
    }

    .car-tabs__detail {
        flex: none;
    }

    .car-tabs__detail .car-tabs__model-name,
    .car-tabs__detail .car-tabs__price,
    .car-tabs__detail a,
    .car-tabs__detail button{
        width: 100%;
        display: flex;
        justify-content: center; /* 子元素內部的文字水平置中 */
        align-items: center;
    }

    /* 平板ecosystem-section */
    .feature-card {
        height: 240px;
    }

    .feature-card__title{
        font-size: var(--font-size-md);
    }

    .ecosystem-section__partner{
        padding: 36px 52px 0px 52px;
        display: flex;
    }



    /* Footer */
    .footer__disclaimer-inner {
        flex-direction: column;
        gap: 16px;
        padding: 0;
    }

    .footer__disclaimer {
        padding: 32px 20px;
    }

    .footer__slogan {
        font-size: 22px;
    }

    .footer__nav {
        padding: 12px 16px;
        gap: 8px;
    }

    /* FAB */
    .fab-group {
        right: 12px;
    }

    .fab-group__btn {
        width: 64px;
        height: 64px;
        font-size: 12px;
    }

    /* 平板 Page2 RWD */
    .p2-calc {
        /*padding: var(--spacing-xl) var(--spacing-md);*/
        padding: 60px var(--spacing-md);
    }

    .p2-calc__card {
        padding: var(--spacing-lg) var(--spacing-xl);
    }


    .p2-calc__body {
        width: 100%;
    }

    .p2-calc__info,
    .p2-calc__form{
        display: flex;
        flex: 1;
        align-items: stretch;
    }

    .p2-calc__actions{
        flex-direction: column;
    }

    .p2-loan-features__cards {
        max-width: 720px;
        /*flex-direction: column;*/
        gap: 16px;
        padding: 0 var(--spacing-md);
    }

    .p2-loan-feature-card {
        padding: var(--spacing-lg) 0 ;
    }

    .p2-loan-feature-card__text {
        font-size: var(--font-size-base);
    }

    .p2-loan-feature-card__icon {
        width: 70px;   
        height: 70px;    
    }

    .p2-loan-feature-card__highlight span {
        font-size: var(--font-size-base);
    }

    .p2-perks__cards {
        flex-direction: column;
        gap: var(--spacing-md);
        padding: 0 var(--spacing-md);
    }

    .p2-perk-card {
        padding: var(--spacing-lg);
    }

    .p2-perk-card__title {
        font-size: var(--font-size-md);
    }



    .p2-steps__list {
        /*flex-direction: column;*/
        gap: 24px;
        padding: 0 var(--spacing-md);
    }

    .p2-step:not(:last-child)::after {
        display: none;
    }

    .p2-step__icon {
    width: 160px;      
    height: 160px;     
    }

    .p2-step__title {
        font-size: var(--font-size-base);
    }
    
    .p2-step__desc {
        font-size: var(--font-size-sm);
    }

    .p2-steps__actions {
        align-items: center;
        padding: 0px 16px;
    }

    .p2-notes__list {
        padding: 0 var(--spacing-md);
    }
}

@media (max-width: 575px) {

    /* 手機navbar */
    .navbar__logo-link {
        gap: 12px;
    }

    .navbar__logo-esun {
        height: 28px;
    }
    
    .navbar__logo-tesla {
        height: 26px;
        transform: translateY(2px);
    }

    .navbar__logo-divider {
       font-size: var(--font-size-base);
    }

    .hero-section__subtitle {
        font-size: var(--font-size-base);
    }

    .hero-section__title {
        font-size: 25px;
    }


    .hero-section__social-proof {
        font-size: var(--font-size-sm);
    }

    .fab-group{
        display: none;
    }

    .bottom-btn-group {
        display: flex;
    }

    footer{
        padding-bottom: 55px;
    }

    
    /* 手機benefits-section */
    .benefits-section {
        padding-top: var(--spacing-xl);
    }

    .benefits-section__row {
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .benefits-section__row:nth-child(even) {
        flex-direction: column; 
    }

    .benefits-section__text-group {
        padding: 24px 16px;
        order: 2;
        gap: var(--spacing-xs);
    }
    
    .benefits-section__image-group {
        order: 1;
    }


    .benefits-section__subtitle {
        font-size: var(--font-size-base);
    }

    .benefits-section__desc {
        font-size: var(--font-size-xs);
    }

    .benefits-section__image-group {
        height: 180px;
    }

    /* 手機table-section */
    .comparison-table__row--header .comparison-table__cell--col1,
    .comparison-table__row--header .comparison-table__cell--col2 {
        font-size: var(--font-size-xs);
    }

    .comparison-table__cell {
        font-size: 12px;
    }

    .comparison-table__badge::after {
        width: 14px;
        height: 14px;
        transform: translateY(3px);
    }

    /* 手機car-selector-section */
    .car-tabs {
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 16px;
    }

    .car-tabs__tab {
        font-size: 14px;
        padding: 8px 16px;
        flex-shrink: 0;
    }

    .car-tabs__price {
        font-size: var(--font-size-xs);
    }
    


    /* 手機ecosystem-section */
    .ecosystem-section__row {
        flex-direction: column;
    }

    .feature-card__content {
        padding: 32px 30px;
        gap: 16px;
    }

    .feature-card__title{
        font-size: var(--font-size-base);
    }

    .ecosystem-section__partner{
        padding: 36px 52px 0px 52px;
        display: flex;
    }



    /* 手機footer */
    .footer__nav {
        justify-content: center;
        padding: 20px 16px;
        gap: 0px;
    }

    .footer__nav-link {
        font-size: 13px;
        padding-right: 6px;
        padding-left: 6px;
        line-height: 1;
    }

    .footer__nav-link:first-child{
        padding-left: 0px;
    }

    .footer__nav-link:last-child{
        padding-right: 0px;
    }

    

    /* 手機 page2 */
    .p2-calc__title {
        margin-bottom: var(--spacing-md);
    }

    .p2-calc__car-name {
        font-size: var(--font-size-lg);
    }

    .p2-calc__info {
        gap: var(--spacing-md);
    }


    .p2-calc__body{
        flex-direction: column;
        gap: 16px;
    }

    .p2-calc__card {
        padding: var(--spacing-lg);
    }


    /* 以下是順序改變區塊 */
    .p2-calc__info, 
    .p2-calc__form {
        display: contents; 
    }

    #calc-car-name { order: 1; }
    #calc-car-price { order: 2; }
    
    .p2-calc__form-row { order: 3; }

    .p2-calc__monthly-label { order: 4; }
    .p2-calc__monthly-row { order: 5; }
    .p2-calc__actions { order: 6; }
    .p2-note { order: 7; }
    /* 以上是順序改變區塊 */
    
    .p2-calc__car-price{
        margin-bottom: 24px;
    }
    .p2-calc__monthly-label{
        margin-top: 24px;
    }

    .p2-calc__form-row{
        width: 100%;
    }

    .p2-calc__form-input{
        flex: 1;
        display: flex;
    }

    .p2-calc__info {
        flex: none;
        width: 100%;
    }

    .p2-calc__actions{
        margin-top: 0px;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .p2-calc__actions .btn{
        flex: 1;
        display: flex;
        justify-content: center;
    }
    .p2-perk-card__desc{
        font-size: 16px;
    }
    .p2-note{
        font-size: 14px;
    }
    .p2-loan-features__cards{
        flex-direction: column;
    }

    .p2-steps__list{
        flex-direction: column;
        gap: 56px;
    }

}


/* ============================================================
   Page3 Tab 切換 Page3 Tabs
   ============================================================ */

/* --- P3-hero 英雄橫幅（純圖片，無文字遮罩）--- */
.p3-hero {
    width: 100%;
    height: 360px;
    overflow: hidden;
    display: block;
}

.p3-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


/* --- P3-ecosystem 生態圈主區塊 --- */
.p3-ecosystem {
    background-color: var(--color-bg-white);
    padding-bottom: var(--spacing-3xl);
}

.p3-ecosystem__header {
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
    text-align: center;
}


/* --- eco-tabs Tab 列 --- */
.eco-tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-bottom: var(--spacing-xl);
}

.eco-tabs__tab {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-dark);
    padding: 10px 40px;
    border: none;
    border-bottom: 3px solid rgba(0, 157, 149, 0.3);
    background-color: transparent;
    line-height: 1.2;
    transition: color 0.2s ease, border-bottom-width 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.eco-tabs__tab:hover {
    color: var(--color-secondary);
}

/* 選中狀態：底部線條加粗、文字品牌綠加粗 */
.eco-tabs__tab--active {
    color: var(--color-secondary);
    font-weight: var(--font-weight-bold);
    border-bottom: 3px solid var(--color-secondary);
}

.eco-tabs__tab:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Tab 內容面板 */
.eco-tabs__panel {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.eco-tabs__panel[hidden] {
    display: none;
}


/* --- 合作夥伴列表 Partner List --- */
.p3-partner-list {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.p3-partner-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-bg-light);
}

.p3-partner-item:last-child {
    border-bottom: none;
}

/* Logo 方塊 */
.p3-partner-item__logo {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    object-fit: contain; 
    border-radius: var(--radius-sm);
}



.p3-partner-item__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 文字區 */
.p3-partner-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.p3-partner-item__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    line-height: var(--line-height-tight);
}

.p3-partner-item__desc {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-dark);
    line-height: var(--line-height-normal);
}

/* 子彈清單（保險 Tab 使用）*/
.p3-partner-item__bullet-list {
    list-style: disc;
    padding-left: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 連結區 */
.p3-partner-item__links {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.p3-partner-link {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    font-weight: var(--font-weight-regular);
    transition: opacity 0.2s ease;
    text-decoration: underline;
    text-underline-offset: 4px;

}

.p3-partner-link:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.p3-partner-link:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}


/* --- FAQ 手風琴 FAQ Accordion --- */
.p3-faq-list {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-2xl);
}

.p3-faq-item {
    border-bottom: 1px solid var(--color-bg-lighter);
}

.p3-faq-item:first-child {
    /*border-top: 1px solid var(--color-bg-lighter);*/
}

.p3-faq-item__question {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) 0;
    cursor: pointer;
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    gap: var(--spacing-md);
    transition: color 0.2s ease;
}

.p3-faq-item__question:hover {
    color: var(--color-secondary);
}

.p3-faq-item__question:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* 箭頭圖示 Chevron */
.p3-faq-item__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

/* 展開狀態：箭頭旋轉 */
.p3-faq-item--open .p3-faq-item__icon {
    transform: rotate(180deg);
}

/* 答案區塊（預設收合）*/
.p3-faq-item__answer {
    display: none;
    padding-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    line-height: var(--line-height-loose);
}

/* 展開狀態 */
.p3-faq-item--open .p3-faq-item__answer {
    display: block;
}

.p3-faq-item__answer-text {
    margin-bottom: var(--spacing-xs);
}

.p3-faq-item__answer-list {
    padding-left: var(--spacing-md);
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 4px;
}





/* --- Page3 RWD 響應式斷點 --- */
@media (max-width: 991px) {

    .p3-hero {
        height: 280px;
    }
    
    .p3-ecosystem__header {
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    }

    .eco-tabs {
        overflow-x: auto;
        justify-content: center;
        padding: 0 16px;
    }

    .eco-tabs__tab {
        flex-shrink: 0;
        padding: 10px 24px;
    }

    .eco-tabs__panel {
        padding: 0 var(--spacing-md);
    }

    .p3-partner-item {
        gap: var(--spacing-md);
    }

    .p3-faq-list,
    .p3-partner-item  { 
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);

    }

    .p3-partner-item__logo {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 575px) {

    .p3-hero {
        height: 220px;
    }

    .eco-tabs {
        margin-bottom: var(--spacing-lg);
    }

    .eco-tabs__tab,
    .p3-partner-item__desc,
    .p3-partner-link {
        font-size: var(--font-size-sm);
    }

    .p3-ecosystem {
        padding-bottom: var(--spacing-xl);
    }

    .p3-partner-item {
        align-items: flex-start;
    }

    .p3-faq-list,
    .p3-partner-item  { 
        padding-left: 0;
        padding-right: 0;

    }

    .p3-partner-item__title{
        font-size: var(--font-size-base);
    }

    .p3-faq-item__question {
        font-size: var(--font-size-sm);
    }
}


/* ============================================================
   Page4 Tab 切換 Page4 Tabs
   ============================================================ */

/* --- P4-hero 英雄橫幅 --- */
.p4-hero {
    width: 100%;
    height: 420px;
    overflow: hidden;
    display: block;
}

.p4-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}


/* --- P4-faq-page 常見問題主區塊 --- */
.p4-faq-page {
    background-color: var(--color-bg-white);
    padding-bottom: var(--spacing-3xl);
}

.p4-faq-page__header {
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
    text-align: center;
}

/* FAQ 面板寬度（比 eco-tabs__panel 略寬一些）*/
.p4-faq-panel {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}


/* --- P4-faq-compare 電動車 vs 燃油車比較表 --- */
.p4-faq-compare {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

/* 表頭欄 */
.p4-faq-compare__th {
    padding: 14px 20px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    text-align: left;
    border: 1px solid var(--color-bg-lighter);
}

/* 燃油車欄頭：灰色 */
.p4-faq-compare__th--fuel {
    background-color: var(--color-text-muted);
    width: 50%;
}

/* 電動車欄頭：品牌綠 */
.p4-faq-compare__th--ev {
    background-color: var(--color-secondary);
    width: 50%;
}

/* 資料列 */
.p4-faq-compare__row {
    border-bottom: 1px solid var(--color-bg-lighter);
}

.p4-faq-compare__row:last-child {
    border-bottom: none;
}

/* 資料格 */
.p4-faq-compare__td {
    padding: 12px 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-bg-lighter);
    line-height: var(--line-height-normal);
    vertical-align: middle;
}

/* 內文連結 Inline Link */
.p4-inline-link {
    color: var(--color-secondary);
    text-decoration: underline;
    transition: opacity 0.2s ease;
    text-underline-offset: 4px;
}

.p4-inline-link:hover {
    opacity: 0.75;
}


/* --- Page4 RWD 響應式斷點 --- */
@media (max-width: 991px) {

    .p4-hero {
        height: 300px;
    }
    
    .p4-faq-page__header {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
    }

    .p4-faq-panel {
        padding: 0 var(--spacing-md);
    }

    .p4-faq-compare {
        max-width: 100%;
    }
}

@media (max-width: 575px) {

    .p4-hero {
        height: 220px;
    }

    
    .eco-tabs {
      overflow: auto;              /* 保持可捲動 */
      -ms-overflow-style: none;    /* IE / 舊 Edge */
      scrollbar-width: none;       /* Firefox */
      /*justify-content: flex-start;*/
    }
    
    /* Chrome / Safari / 新 Edge */
    .eco-tabs::-webkit-scrollbar {
      display: none;
    }



    .p4-faq-page{
        padding: 0 var(--spacing-md);
    }

    .p4-faq-panel{
        padding: 0;
    }

    .p4-faq-compare__th,
    .p4-faq-compare__td {
        padding: 10px 12px;
        font-size: var(--font-size-xs);
    }
}