@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

/* ===================================================
    CSS 變數設定
==================================================== */
:root {
    /* 字體設定 */
    --font16: 16px;
    --tw-bold: bold;
    --tw-xs: 500;
    --tw-sm: 600;
    --tw-md: 700;
    
    /* 主要顏色 */
    --primary: #f14d4c;
    --input-border: rgba(241, 77, 76, 0.5);
    --primary-soft: rgba(241, 77, 76, 0.1);
    --warm-red-soft: rgba(241, 77, 76, 0.85);
    --primary-pink: rgba(241, 77, 76, 0.2);
    --primary-light: rgba(241, 77, 76, 0.05);
    
    /* 次要顏色 */
    --secondary: #00bbb3;
    --secondary-soft: rgba(0, 187, 179, 0.1);
    
    /* 背景與前景 */
    --background: #fff6eb;
    --foreground: #312d29;
    --white: #fff;
    
    /* 灰階色系 */
    --grey-title: rgba(49, 45, 41, 0.7);
    --grey-text: rgba(49, 45, 41, 0.7);
    --grey-border: #e3ddd8;
    
    /* 間距 */
    --spacing: 4px;
}

/* ===================================================
    基礎設定
==================================================== */
html, body {
    height: 100%;
    margin: 0;
}

html {
    font-size: var(--font16);
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
}

/* 文字反白效果 */
::selection {
    background: #ac8c36;
    color: var(--white);
}

::-moz-selection {
    background: #ac8c36;
    color: var(--white);
}


/* ===================================================
    共用佈局樣式
==================================================== */
.wrapper {
    flex-grow: 1;
}

.container {
    max-width: 800px;
}

.grid-width-900px {
    max-width: 800px;
    margin: 64px auto 0 auto;
    padding: 0 15px;
}

.max-w-1024 {
    max-width: 1024px;
    margin: 0 auto;
}

.grid-w-50 {
    width: 90%;
    margin: 0 auto;
}

.grid-rows-2-1 {
    text-align: center;
    height: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 24px;
}


/* ===================================================
    共用背景與顏色
==================================================== */
.hero-section {
    background: linear-gradient(156deg, rgb(252, 229, 221) 0%, rgba(255, 246, 235, 1) 50%, rgb(235, 248, 235) 100%);
    padding-block: 80px;
}

.section-class {
    padding-block: 64px;
    background-color: var(--white);
}

.section-class:nth-child(odd) {
    background-color: var(--background);
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.secondary-svg {
    background-color: var(--secondary-soft) !important;
    color: var(--secondary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}


/* ===================================================
    共用標題與文字樣式
==================================================== */
.section-class .one-div,
.hero-section .one-div {
    text-align: center;
    margin-bottom: 48px;
}

/* 徽章標題 */
.badge-title {
    color: var(--primary);
    background-color: var(--primary-soft);
    font-weight: var(--tw-sm);
    font-size: 18px;
    padding: 10px 20px;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
    border-radius: 30px;
}

/* 主標題 */
.eecp-title {
    font-size: 36px;
    font-weight: var(--tw-bold);
    line-height: 1.2;
    margin-bottom: 32px;
}

.eecp-highlight {
    color: var(--primary);
    margin-top: 8px;
    font-size: 36px;
}

.eecp-subtitle {
    margin-top: 16px;
    color: var(--grey-title);
    font-size: 24px;
}

.eecp-description {
    margin: 0 0 32px 0;
    color: var(--grey-text);
    font-size: 1.25rem;
}

/* 內容標題 */
.content-title {
    margin-bottom: 24px;
    font-weight: var(--tw-bold);
    color: var(--foreground);
    font-size: 1.88rem;
    line-height: 1.2;
}

.content-description {
    line-height: 1.55;
    font-size: 1.25rem;
    color: var(--grey-text);
}

.content-description span {
    font-weight: var(--tw-bold);
}

/* 資訊文字 */
.info-title {
    color: var(--foreground);
    line-height: 1.4;
    font-weight: var(--tw-sm);
    white-space: nowrap;
    font-size: 1rem;
}

.info-text { 
    color: var(--grey-text);
    font-size: 16px;
    line-height: 1.4;
}

.q-title {
    font-weight: var(--tw-bold);
    font-size: 18px;
    line-height: 1.5;
}

.q-title::before {
    content: "Q :";
    color: var(--primary);
    white-space: nowrap;
} 


/* ===================================================
    共用卡片樣式
==================================================== */
.card {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    transition: box-shadow 0.25s ease, transform 0.15s ease;
    border-radius: 20px;
    padding-block: 24px;
    height: 100%;
    gap: 24px;
    background-color: var(--white);
    color: var(--foreground);
}

.gradient-card {
    background: linear-gradient(156deg, rgb(252, 229, 221) 0%, rgba(255, 246, 235, 1) 50%, rgb(235, 248, 235) 100%);
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    box-shadow: rgba(60, 64, 67, 0.2) 0px 1px 6px 0px, rgba(60, 64, 67, 0.09) 0px 2px 6px 0px;
}

/* 紅色邊框動畫效果 */
.red-border-animate {
    box-shadow: rgba(60, 64, 67, 0.2) 0px 0px 1px 0px, rgba(60, 64, 67, 0.09) 0px 1px 0px 1px;
    transition: box-shadow 0.3s ease;
}

.red-border-animate:hover,
.red-border-animate:focus,
.red-border-animate:focus-within,
.red-border-animate:active {
    box-shadow:
        0 0 0 2px var(--input-border),
        0 2px 0px rgba(241, 77, 76, 0.25);
    outline: none;
}


/* ===================================================
    共用項目框樣式
==================================================== */
.item-card .row {
    gap: 30px 0;
}

.item-box {
    gap: 20px;
    padding-inline: 35px;
    display: flex;
    flex-direction: column;
}

.item-box div {
    gap: 20px;
    display: flex;
    align-items: center;
}

.item-box .svg-box + h3 {
    font-size: 1.44rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.item-box > div > p {
    color: var(--grey-text);
    font-size: 1rem;
    margin-bottom: 0;
}

/* 列表樣式 */
.list-box {
    padding-inline: 24px;
}

.list-box .row {
    gap: 15px 0;
}

.list-box .col-md-6 {
    display: flex;
    align-items: start;
    gap: 12px;
    font-size: 1rem;
}

.list-box .col-md-6 svg {
    color: var(--secondary);
}

.list-box .list-dotted {
    width: 6px;
    height: 6px;
    border-radius: 3.4px;
    background-color: var(--primary);
    margin-right: 10px;
}


/* ===================================================
    共用表單樣式
==================================================== */
.form-group {
    margin-bottom: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: var(--tw-xs);
    margin-bottom: 8px;
    color: var(--foreground);
    display: block;
}

.form-group input,
.form-group textarea {
    width: 100%;
    min-width: 0;
    height: 36px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    padding-block: 4px;
    padding-inline: 12px;
    border: 1px solid var(--grey-border);
    transition: border-color 0.2s ease;
}

input[type="date"] {
    height: auto;
    min-height: 36px;
    padding: 4px 12px;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none; /* 部分解除」iOS 原生樣式 */
    appearance: none; /* 部分解除」iOS 原生樣式 */
}

.form-group textarea {
    min-height: 50px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border: 3px solid var(--input-border) !important;
}

.captcha-img {
    height: 50px;
    border-radius: 4px;
    border: 1px solid var(--grey-border);
    width: 40%;
}

.btn-refresh {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.3s;
    width: 10%;
}

.btn-refresh:hover {
    transform: rotate(180deg);
}

.errorlist {
    display: none;
    color: var(--primary);
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    font-size: 14px;
}


/* ===================================================
    共用按鈕樣式
==================================================== */
.btnn-div {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 48px;
}

.btnn {
    font-size: 1.3rem;
    font-weight: var(--tw-xs);
    color: var(--grey-title);
    border: 1px solid var(--grey-border);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    white-space: nowrap;
    padding-block: 1.6rem;
    padding-inline: 20px;
    line-height: calc(1.75 / 1.125);
    height: calc(var(--spacing) * 10);
    gap: 10px;
}

.btnn:hover {
    color: inherit;
    text-decoration: none;
    background-color: var(--background);
}

.btnn.red {
    background-color: var(--primary);
    border: 0;
    color: var(--white);
}

.btnn.red:hover {
    background-color: var(--warm-red-soft);
}


/* ===================================================
    共用 SVG 圖標樣式
==================================================== */
.svg-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-soft);
    border-radius: 50%;
    color: var(--primary);
    flex-shrink: 0;
    padding: 8px;
    font-weight: var(--tw-bold);
}

/* SVG 尺寸 */
.svg-xs { width: 16px; height: 16px; }
.svg-20 { width: 20px; height: 20px; }
.svg-24 { width: 24px; height: 24px; }
.svg-sm { width: 32px; height: 32px; }
.svg-md { width: 48px; height: 48px; }
.svg-lg { width: 64px; height: 64px; }


/* ===================================================
    共用動畫效果
==================================================== */
/* 淡入效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
    頁尾樣式
==================================================== */
.footer {
    padding-block: 48px;
    background-color: var(--white);
    text-align: center;
    border-top: 1px solid var(--grey-border);
}

.footer .svg-box {
    gap: 10px;
    margin-bottom: 1rem;
    font-weight: var(--tw-md);
    font-size: 24px;
    background-color: transparent;
    color: initial;
}

.footer p.info-text {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.footer div.info-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 1rem;
    font-size: 14px;
}

.footer .copyright {
    padding-top: 24px;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid var(--grey-border);
}


/* ---------------------------------------------------
    Loading 轉頁效果
----------------------------------------------------- */
#page-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    opacity: 1;
    visibility: visible;
    /* ✅ 保險機制：5秒後自動隱藏 */
    animation: auto-hide-fallback 5s forwards;
}

#page-loading.fade-out {
    opacity: 0;
    visibility: hidden;
    /* ✅ 當手動觸發淡出時，取消自動隱藏動畫 */
    animation: none;
}

#page-loading .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fff6eb 0%, #ffffff 50%, #fff6eb 100%);
    opacity: 0.98;
}

.eecp-loading-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* Logo 脈動效果 */
.logo-pulse-wrapper {
    width: 180px;
    height: 180px;
    position: relative;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eecp-logo {
    width: 140px;
    height: auto;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 12px rgba(241, 77, 76, 0.2));
    animation: bloodCirculation 3s ease-in-out infinite;
}

/* 血液粒子 */
.blood-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #ff6b6a, #f14d4c, #d63939);
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(241, 77, 76, 0.8),
        0 0 20px rgba(241, 77, 76, 0.4),
        inset 0 0 4px rgba(255, 255, 255, 0.3);
    opacity: 0;
}

.blood-particle-1 {
    animation: bloodFloat1 3s ease-in-out infinite;
    animation-delay: 0s;
}

.blood-particle-2 {
    animation: bloodFloat2 3.5s ease-in-out infinite;
    animation-delay: 0.4s;
}

.blood-particle-3 {
    animation: bloodFloat3 2.8s ease-in-out infinite;
    animation-delay: 0.8s;
}

.blood-particle-4 {
    animation: bloodFloat4 3.2s ease-in-out infinite;
    animation-delay: 1.2s;
}

.blood-particle-5 {
    animation: bloodFloat5 2.9s ease-in-out infinite;
    animation-delay: 1.6s;
}

.blood-particle-6 {
    animation: bloodFloat6 3.3s ease-in-out infinite;
    animation-delay: 2s;
}

.blood-particle-7 {
    animation: bloodFloat7 3.1s ease-in-out infinite;
    animation-delay: 2.4s;
}

.blood-particle-8 {
    animation: bloodFloat8 2.7s ease-in-out infinite;
    animation-delay: 2.8s;
}

/* 血液循環動畫 - 模擬心臟收縮和舒張推動血液循環 */
@keyframes bloodCirculation {
    0% { 
        transform: scale(1);
        filter: drop-shadow(0 4px 12px rgba(241, 77, 76, 0.2));
    }
    15% { 
        transform: scale(1.08);
        filter: drop-shadow(0 6px 20px rgba(241, 77, 76, 0.5));
    }
    30% { 
        transform: scale(1);
        filter: drop-shadow(0 4px 12px rgba(241, 77, 76, 0.2));
    }
    45% { 
        transform: scale(1.12);
        filter: drop-shadow(0 8px 24px rgba(241, 77, 76, 0.6));
    }
    60% { 
        transform: scale(1);
        filter: drop-shadow(0 4px 12px rgba(241, 77, 76, 0.2));
    }
    100% { 
        transform: scale(1);
        filter: drop-shadow(0 4px 12px rgba(241, 77, 76, 0.2));
    }
}

/* 血液粒子隨意環繞動畫 - 每個粒子獨立軌跡 */
@keyframes bloodFloat1 {
    0%, 100% { top: -5%; left: 52%; transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
    10% { opacity: 1; }
    25% { top: 18%; left: 98%; transform: translate(-50%, -50%) scale(1.1); }
    50% { top: 75%; left: 88%; transform: translate(-50%, -50%) scale(1.2); }
    75% { top: 108%; left: 35%; transform: translate(-50%, -50%) scale(1); }
    90% { opacity: 1; }
}

@keyframes bloodFloat2 {
    0%, 100% { top: 45%; left: 105%; transform: translate(-50%, -50%) scale(1); opacity: 0; }
    10% { opacity: 1; }
    25% { top: 92%; left: 78%; transform: translate(-50%, -50%) scale(1.2); }
    50% { top: 112%; left: 25%; transform: translate(-50%, -50%) scale(0.9); }
    75% { top: 68%; left: -5%; transform: translate(-50%, -50%) scale(1.1); }
    90% { opacity: 1; }
}

@keyframes bloodFloat3 {
    0%, 100% { top: 95%; left: 48%; transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
    10% { opacity: 1; }
    25% { top: 88%; left: 2%; transform: translate(-50%, -50%) scale(1); }
    50% { top: 32%; left: -8%; transform: translate(-50%, -50%) scale(1.2); }
    75% { top: 5%; left: 32%; transform: translate(-50%, -50%) scale(0.9); }
    90% { opacity: 1; }
}

@keyframes bloodFloat4 {
    0%, 100% { top: 25%; left: 2%; transform: translate(-50%, -50%) scale(1); opacity: 0; }
    10% { opacity: 1; }
    25% { top: -2%; left: 38%; transform: translate(-50%, -50%) scale(1.1); }
    50% { top: 12%; left: 92%; transform: translate(-50%, -50%) scale(1.2); }
    75% { top: 58%; left: 108%; transform: translate(-50%, -50%) scale(1); }
    90% { opacity: 1; }
}

@keyframes bloodFloat5 {
    0%, 100% { top: 65%; left: -8%; transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
    10% { opacity: 1; }
    25% { top: 22%; left: 12%; transform: translate(-50%, -50%) scale(0.9); }
    50% { top: -8%; left: 62%; transform: translate(-50%, -50%) scale(1.1); }
    75% { top: 28%; left: 102%; transform: translate(-50%, -50%) scale(1); }
    90% { opacity: 1; }
}

@keyframes bloodFloat6 {
    0%, 100% { top: 8%; left: 75%; transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
    10% { opacity: 1; }
    25% { top: 42%; left: 110%; transform: translate(-50%, -50%) scale(1.2); }
    50% { top: 88%; left: 95%; transform: translate(-50%, -50%) scale(1); }
    75% { top: 115%; left: 58%; transform: translate(-50%, -50%) scale(1.1); }
    90% { opacity: 1; }
}

@keyframes bloodFloat7 {
    0%, 100% { top: 82%; left: 18%; transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
    10% { opacity: 1; }
    25% { top: 105%; left: 65%; transform: translate(-50%, -50%) scale(1); }
    50% { top: 78%; left: 108%; transform: translate(-50%, -50%) scale(1.2); }
    75% { top: 35%; left: 82%; transform: translate(-50%, -50%) scale(0.9); }
    90% { opacity: 1; }
}

@keyframes bloodFloat8 {
    0%, 100% { top: 48%; left: -2%; transform: translate(-50%, -50%) scale(1); opacity: 0; }
    10% { opacity: 1; }
    25% { top: -5%; left: 32%; transform: translate(-50%, -50%) scale(1.1); }
    50% { top: 15%; left: 78%; transform: translate(-50%, -50%) scale(0.9); }
    75% { top: 55%; left: 98%; transform: translate(-50%, -50%) scale(1.2); }
    90% { opacity: 1; }
}

/* 載入訊息區 */
.loading-info {
    text-align: center;
    color: #312d29;
}

#page-loading .eecp-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(241, 77, 76, 0.15);
    font-family: 'Microsoft JhengHei', sans-serif;
}

.loading-status {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.status-text {
    font-size: 16px;
    color: rgba(49, 45, 41, 0.7);
    margin-right: 10px;
    font-family: 'Microsoft JhengHei', sans-serif;
}

.status-dots {
    display: flex;
    gap: 6px;
}

.status-dots .dot {
    width: 5px;
    height: 5px;
    background: rgba(49, 45, 41, 0.7);
    border-radius: 50%;
    animation: dotBlink 1.4s infinite;
    box-shadow: 0 0 4px rgba(49, 45, 41, 0.3);
}

.status-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.status-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotBlink {
    0%, 60%, 100% { 
        opacity: 0.4;
        transform: scale(0.8);
    }
    30% { 
        opacity: 1;
        transform: scale(1.2);
    }
}

/* 進度條 */
#page-loading .progress-bar-container {
    width: 320px;
    margin-top: 10px;
}

#page-loading .progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(241, 77, 76, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 10px rgba(241, 77, 76, 0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        #f14d4c 0%, 
        #ff7a79 50%, 
        #f14d4c 100%);
    border-radius: 10px;
    animation: progressFill 2.5s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(241, 77, 76, 0.5);
}

.progress-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.8) 50%, 
        transparent 100%);
    animation: progressGlow 2.5s ease-in-out infinite;
}

@keyframes progressFill {
    0% { width: 0%; }
    50% { width: 75%; }
    100% { width: 100%; }
}

@keyframes progressGlow {
    0% { left: -100%; }
    100% { left: 100%; }
}


/* ===================================================
    特定 Section 樣式
==================================================== */
/* EECP Slogan (行銷標語) */
#eecp-slogan .btnn-div {
    gap: 22px;
    margin-top: 40px;
    flex-wrap: wrap;
}

/* EECP Problems (您是否有這些困擾？) */
#eecp-problems .row {
    gap: 30px 0;
}

#eecp-problems .row .card .card-body {
    padding: .8rem 1.25rem;
}

#eecp-problems .row .card .card-body > div {
    display: flex;
    align-items: center;
    gap: 15px;
}

#eecp-problems .row .card .card-body > div > p {
    margin-bottom: 0 !important;
    font-size: 1.125rem;
}

#eecp-problems .row .card .card-body > div > div > svg {
    color: var(--primary);
}


/* 什麼是 EECP 體外反搏療法？ */
.intro-body {
    padding: 32px 24px 0 24px;
}

.intro-content {
    display: flex;
    align-items: start;
    gap: 16px;
}

.intro-content h3 {
    font-weight: var(--tw-md);
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 12px;
}

.intro-content p {
    color: var(--grey-text);
    line-height: 1.625;
    font-size: 1.125rem;
    text-align: justify;
}

.intro-memo {
    border-radius: 20px;
    background-color: var(--white);
    padding: 24px;
    border: 1px solid #dee2e6;
    font-size: 1.125rem;
}

.intro-memo p {
    text-align: center;
    margin-bottom: 0 !important;
    font-weight: var(--tw-xs);
}

.intro-memo p span {
    color: var(--primary);
    font-weight: var(--tw-bold);
}

/* 6 大健康促進功效 */
#eecp-six-benefit .svg-box {
    width: 64px;
    height: 64px;
}

/* EECP 獨特優勢 */
#eecp-benefit-item .gradient-card,
#care-steps .gradient-card {
    background: linear-gradient(-5deg, rgb(252, 229, 220) 0%, rgba(255, 246, 235, 1) 60%, rgb(235, 248, 235) 100%);
    padding-block: 24px;
    gap: 30px;
}

#eecp-benefit-item .gradient-card > div,
#care-center .item-card .card,
.info-title-box,
.contact-form-list,
.info-contact-box,
.contact-area-service > div {
    padding-inline: 24px;
}

#eecp-benefit-item .item-box div {
    flex-direction: column;
}

#eecp-benefit-item .item-box .svg-box + h3 {
    font-size: 1.25rem;
    line-height: 1.5;
}

#eecp-benefit-item .item-box > div > p {
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.5;
}

#eecp-benefit-item .gradient-card h3 {
    font-weight: var(--tw-sm);
    font-size: 24px;
    line-height: 1.3;
    text-align: center;
}


/* 誰適合 EECP 治療？ */
#eecp-suitable .item-card > .row {
    gap: 25px 0;
}

#eecp-suitable .item-box {
    padding-inline: 10px;
    gap: 10px;
}

#eecp-suitable .item-box div {
    gap: 5px;
}

#eecp-suitable .item-box .svg-box + h3 {
    font-size: 1.25rem;
}

#eecp-suitable .svg-box {
    background-color: var(--white);
    margin-left: 10px;
}
/* 特別注意 (紅底訊息提醒框) */
.alert-memo {
    margin: 48px 0;
}
.alert-memo .card {
    background-color: var(--primary-light);
    border: 1px solid var(--primary-pink);
    padding-inline: 24px;
    text-align: center;
    gap: 5px;
    justify-content: center;
    padding-block: 24px;
}
.alert-memo .card span{
    font-weight: var(--tw-bold);
}


/* 快速評估您是否適合 EECP */
.section-eecp-assessment{
    padding-top: 48px;
    margin-top: 4px;
    border-top: 1px solid var(--grey-border);
}
.eecp-assessment-header{
    text-align: center;
    margin-bottom: 32px;
}
.eecp-assessment-title{
    font-size: 30px;
    line-height: 1.2;
    font-weight: var(--tw-md);
    text-align: center;
    margin-bottom: 24px;
}
.eecp-assessment-desc{
    color: var(--grey-title);
    font-size: 18px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 680px;
}


/* ===================================================
    測驗系統樣式
==================================================== */
/* 測驗容器 */
.eecp-test {
    background: white;
    border-radius: 20px;
    box-shadow: rgba(60, 64, 67, 0.2) 0px 1px 6px 0px, rgba(60, 64, 67, 0.09) 0px 2px 6px 0px;
}

/* 進度條 */
.quiz-progress {
    margin-bottom: 32px;
    padding: 24px 24px 0 24px;
}

.quiz-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
    flex-wrap: wrap;
}

.quiz-progress-title {
    font-size: 24px;
    font-weight: var(--tw-sm);
    color: var(--foreground);
    white-space: nowrap;
}

.quiz-progress-text {
    text-align: right;
    color: var(--grey-text);
    font-size: 14px;
    font-weight: var(--tw-xs);
    white-space: nowrap;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #ffe5e5;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    transition: width 0.4s ease;
    border-radius: 4px;
    width: 12.5%;
}

/* 問題區塊 */
.quiz-question {
    display: none;
    margin: 24px;
    padding-bottom: 24px;
}

.quiz-question.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.question-title {
    font-size: 22px;
    font-weight: var(--tw-sm);
    margin-bottom: 12px;
    color: var(--foreground);
}

.question-description {
    font-size: 1rem;
    color: var(--grey-text);
    margin-bottom: 28px;
    line-height: 1.6;
}
/* 測驗選項 */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.quiz-option {
    padding: 16px 20px;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    display: flex;
    align-items: center;
    gap: 12px;
}

.quiz-option:hover {
    border-color: var(--primary);
    background-color: var(--primary-light);
}

.quiz-option input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary);
}

.quiz-option label {
    flex: 1;
    cursor: pointer;
    font-size: 1rem;
    margin: 0;
}

/* 測驗導航按鈕 */
.quiz-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.quiz-btn {
    padding: 8px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: var(--tw-xs);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;
    white-space: nowrap;
    width: 100%;
}
.quiz-btn > svg{
    margin-right: 8px;
    vertical-align: middle;
}

.quiz-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quiz-btn-prev {
    background: var(--white);
    border: 2px solid var(--grey-border);
    color: var(--grey-text);
}

.quiz-btn-prev:not(:disabled):hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quiz-btn-next,
.quiz-btn-result {
    background: var(--primary);
    color: var(--white);
}

.quiz-btn-next:not(:disabled):hover,
.quiz-btn-result:not(:disabled):hover {
    background-color: var(--warm-red-soft);
}

.quiz-btn-result:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(241, 77, 76, 0.3);
}
/* 測驗結果 */
.quiz-result {
    display: none;
    text-align: center;
    padding: 40px;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

.quiz-result.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

.quiz-result.risk-low {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
    border: 3px solid #6ad76f4d;
}

.quiz-result.risk-medium {
    background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
    border: 3px solid #f3ab62a1;
}

.quiz-result.risk-high {
    background: linear-gradient(135deg, #ffebee 0%, #fff5f5 100%);
    border: 3px solid #f14d4c5e;
}

.result-title {
    font-size: 28px;
    font-weight: var(--tw-md);
    margin-bottom: 16px;
    color: var(--foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.result-title::before {
    content: '';
    width: 48px;
    height: 48px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.quiz-result.risk-low .result-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%2343a047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
}

.quiz-result.risk-medium .result-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23f57c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}

.quiz-result.risk-high .result-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23f14d4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'%3E%3C/path%3E%3C/svg%3E");
}

.result-status {
    font-size: 24px;
    font-weight: var(--tw-sm);
    margin-bottom: 12px;
}

.quiz-result.risk-low .result-status { color: #43a047; }
.quiz-result.risk-medium .result-status { color: #f57c00; }
.quiz-result.risk-high .result-status { color: #f14d4c; }

.result-description {
    font-size: 1rem;
    color: var(--grey-text);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.result-score {
    font-size: 18px;
    color: var(--grey-title);
    margin-bottom: 32px;
    font-weight: var(--tw-xs);
}

.result-recommendation {
    background: var(--white);
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 32px;
    text-align: left;
    border: 1px solid var(--grey-border);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.result-recommendation h4 {
    font-size: 18px;
    font-weight: var(--tw-sm);
    margin-bottom: 8px;
    color: var(--foreground);
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-recommendation p {
    margin: 0;
    color: var(--grey-title);
    line-height: 1.6;
}

.result-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

.result-action-card {
    background: white;
    border: 1px solid var(--grey-border);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.result-action-card h5 {
    font-size: 18px;
    font-weight: var(--tw-sm);
    margin-bottom: 8px;
    color: var(--foreground);
}

.result-action-card:nth-child(1) h5::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2352c41a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'%3E%3C/polyline%3E%3Cpolyline points='16 7 22 7 22 13'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.result-action-card:nth-child(2) h5::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f14d4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.result-action-card p {
    margin: 0;
    font-size: 14px;
    color: var(--grey-text);
    line-height: 1.5;
}

.result-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

.quiz-btn-secondary {
    background: white;
    border: 1px solid var(--grey-border);
    color: var(--foreground);
}

.quiz-btn-secondary:hover {
    background: var(--background);
    color: var(--foreground);
}

.quiz-btn-primary {
    background: var(--primary);
    color: white;
}

.quiz-btn-primary:hover {
    background-color: var(--warm-red-soft);
}

/* 測驗表單 */
.quiz-form {
    display: none;
    max-width: 90%;
    margin: 0 auto;
    text-align: left;
    padding: 24px 0;
}

.quiz-form.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.form-title {
    font-size: 24px;
    font-weight: var(--tw-md);
    margin-bottom: 12px;
}

.form-description {
    font-size: 1rem;
    color: var(--grey-text);
    margin-bottom: 28px;
}

.form-result-display {
    background: linear-gradient(135deg, var(--primary-soft) 0%, rgba(255, 138, 0, 0.1) 100%);
    border-left: 4px solid var(--primary);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 28px;
    transition: all 0.3s ease;
}

.form-result-display.risk-low {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
    border-left-color: #43a047;
}

.form-result-display.risk-medium {
    background: linear-gradient(135deg, #fff9e6 0%, #fffbf0 100%);
    border-left-color: #f57c00;
}

.form-result-display.risk-high {
    background: linear-gradient(135deg, #ffebee 0%, #fff5f5 100%);
    border-left-color: #f14d4c;
}

.form-result-display p {
    margin: 0;
    font-weight: var(--tw-xs);
    color: var(--grey-title);
}

.form-result-display strong {
    color: var(--primary);
}

.result-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: var(--tw-sm);
    font-size: 1rem;
    margin-left: 8px;
}

.result-badge.risk-low {
    background-color: #e8f5e9;
    color: #43a047;
    border: 1px solid #81c784;
}

.result-badge.risk-medium {
    background-color: #fff9e6;
    color: #f57c00;
    border: 1px solid #ffb74d;
}

.result-badge.risk-high {
    background-color: #ffebee;
    color: #f14d4c;
    border: 1px solid #e57373;
}

.form-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-buttons button {
    flex: 1;
}

/* 測驗-驗證碼 / 倒數計時 */
.captcha-container{
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#quizContactForm .captcha-container{
    flex-wrap: wrap;
}
#quizCaptcha{
    flex: 1;
    min-width: 120px;
    height: 36px;
    border-radius: 14px;
    font-size: 14px;
    padding: 4px 12px;
    border: 1px solid var(--grey-border);
    min-width: 100%;
}
#quiz-captcha-timer,
#captcha-timer{
    width: 42%;
    text-align: justify;
}


/* ===================================================
    治療流程與醫療中心
==================================================== */
/* 治療流程 */
#care-steps .item-box {
    gap: 30px;
    padding-inline: 24px;
}

#care-steps .svg-box {
    background-color: var(--primary);
    color: var(--white);
    font-size: 1.25rem;
    line-height: 1.4;
    width: 48px;
    height: 48px;
}

#care-steps .svg-box:has(svg) {
    background-color: transparent;
    color: var(--primary);
    margin-bottom: 16px;
    width: auto;
    height: auto;
}

#care-steps .gradient-card {
    margin-top: 64px;
    text-align: center;
    gap: 0;
    padding-inline: 24px;
}

#care-steps .gradient-card .svg-box + h3 {
    margin-bottom: 20px;
}

#care-steps .gradient-card p:first-of-type {
    font-size: 1.25rem;
    line-height: 1.5;
}

#care-steps .gradient-card p:last-of-type {
    color: var(--grey-title);
    margin-bottom: 0;
}

/* 醫療中心 */
#care-center .item-card .card h3 {
    font-size: 24px;
    font-weight: var(--tw-sm);
    line-height: 1.3;
}

.c-address,
.c-tel {
    display: flex;
    align-items: center;
    gap: 12px;
}

.c-address {
    margin-bottom: 12px;
}

.c-tel {
    font-weight: var(--tw-xs);
}

.c-tel a {
    font-weight: var(--tw-xs);
    font-size: 18px;
    color: var(--primary);
}


/* ===================================================
    FAQ 常見問題
==================================================== */

#faq-section .item-box {
    padding-inline: 20px;
}

#faq-section .item-box div {
    gap: 10px;
}

#faq-section .item-box .info-text {
    padding-left: 25px;
}


/* ===================================================
    聯絡區域
==================================================== */
#contact-area {
    padding-block: 96px;
}

#contact-area .info-contact-box a:hover {
    background-color: var(--background);
    text-decoration: none;
}

#contact-area .grid-width-900px .row {
    gap: 15px;
}

.info-title-box,
.contact-form-list {
    gap: 8px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.contact-form-list .form-group label {
    color: var(--foreground);
    line-height: 1.4;
    font-weight: var(--tw-sm);
    white-space: nowrap;
    font-size: 1rem;
}

.info-contact-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.contact-item {
    padding-inline: 12px;
    white-space: nowrap;
    font-weight: var(--tw-xs);
    font-size: 14px;
    line-height: 1.4;
    padding-block: 16px;
    border: 1px solid var(--grey-border);
    border-radius: 14px;
    gap: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    width: 100%;
    flex: 1;
}

.contact-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--primary);
}

.contact-item svg + div {
    text-align: left;
}

.contact-item svg + div > .info-title {
    font-size: 16px;
}

.contact-form-list button[type="submit"] {
    padding-inline: 16px;
    white-space: nowrap;
    font-weight: var(--tw-xs);
    font-size: 14px;
    line-height: 1.4;
    border-radius: 14px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    background-color: var(--primary);
    color: var(--white);
    border: 1px solid var(--grey-border);
}

.contact-form-list button[type="submit"]:hover {
    background-color: var(--warm-red-soft);
    text-decoration: none;
}

.contact-area-service {
    color: var(--foreground);
    background-color: var(--primary-light);
    border: 2px solid var(--primary-pink);
    display: flex;
    flex-direction: column;
    padding-block: 24px;
    gap: 24px;
}

.contact-area-service > div {
    padding-top: 24px;
    text-align: center;
}

.contact-area-service > div > svg {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    color: var(--primary);
    margin-bottom: 20px;
}

.contact-area-service .info-title {
    font-size: 1.125rem;
}

.contact-area-service p.info-text {
    font-size: 1rem;
}


/* ===================================================
    響應式設計 (RWD)
==================================================== */
/* 手機版預設 */
.result-actions {
    grid-template-columns: 1fr;
}

.result-buttons,
.form-buttons {
    flex-direction: column;
}

@media (min-width: 414px) {
    #quizCaptcha{
        min-width: auto;
    }
    .captcha-img,
    .btn-refresh,
    #quiz-captcha-timer,
    #captcha-timer{
        width: auto;
    }
}


/* Loading 響應式設計 */
@media (max-width: 768px) {
    .logo-pulse-wrapper {
        width: 150px;
        height: 150px;
    }
    
    .eecp-logo {
        width: 110px;
    }
    
    #page-loading .eecp-title {
        font-size: 24px;
    }
    
    #page-loading .progress-bar-container {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .logo-pulse-wrapper {
        width: 130px;
        height: 130px;
    }
    
    .eecp-logo {
        width: 95px;
    }
    
    #page-loading .eecp-title {
        font-size: 20px;
    }
    
    .status-text {
        font-size: 14px;
    }
    
    #page-loading .progress-bar-container {
        width: 240px;
    }
}


/* 大於 768px (平板) */
@media (min-width: 768px) {
    /* 佈局 */
    .container {
        max-width: 910px;
    }
    .hero-section {
        padding-block: 130px;
    }
    
    .section-class {
        padding-block: 96px;
    }
    
    .grid-w-50 {
        width: 75%;
    }
    
    /* 標題 */
    .eecp-title {
        font-size: 80px;
    }
    
    .eecp-highlight {
        font-size: 60px;
    }
    
    .eecp-subtitle {
        font-size: 36px;
    }
    
    .eecp-description {
        margin: 0 112px 32px 112px;
    }
    
    .content-title {
        font-size: 2.5rem;
    }
    
    .content-description {
        font-size: 1.25rem;
    }
    /* 特別注意 (紅底訊息提醒框) */
    .alert-memo .card {
        flex-direction: row;
        gap: 0;
    }
    
    /* 聯絡區域 */
    #contact-area .grid-width-900px .row {
        gap: 0;
    }
    
    .eecp-test {
        padding: initial;
    }
    
    .result-actions {
        grid-template-columns: 1fr 1fr;
    }
    
    .result-buttons,
    .form-buttons {
        flex-direction: row;
    }
}

/* 大於 992px (桌機) */
@media (min-width: 992px) {    
    .grid-width-900px {
        max-width: 900px;
    }
    
    .grid-container .card .card-body > div > p {
        font-size: 1.25rem;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1300px;
    }
    .grid-w-50 {
        width: 50%;
    }
}