/* --- CSS 變數 --- */
:root {
    --body-background: #e6f3f5;
    --header-background: #ccedf0;
    --header-text-color: #333333;
    --header-border-color: #b8dadf;
    --marquee-background: #f9fcfc;
    --marquee-text-color: #4d4d4d;
    --card-area-background: #e7f9fd;
    --card-background: #ffffff;
    --card-header-background: #006d8c;
    --card-header-text-color: #ffffff;
    --card-border-color: #e0e0e0;
    --border-color-light: #eeeeee;
    --text-primary: #333333;
    --text-secondary: #555555;
    --highlight-primary: #ff0000;
    --btn-bg: #4caf50;
    --btn-bg-hover: #45a049;
    --btn-text-color: #ffffff;
    --status-success: #4caf50;
    --status-warning: #ffc107;
    --status-error: #dc3545;
    --font-size-base: 19px;
    --line-height-base: 1.65;
    --border-radius-large: 16px;
    --border-radius-medium: 12px;
    --spacing-unit: 8px;
    --marquee-animation-duration: 70s;
    --marquee-item-padding-horizontal: 12px;
}

/* 橫幅 */
.top-banner { width: 100%; margin-bottom: calc(var(--spacing-unit) * 2); line-height: 0; }
.top-banner picture img { width: 100%; height: auto; display: block; border-radius: var(--border-radius-large); }

/* 基本樣式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", "PingFang TC", "LiHei Pro", "Microsoft JhengHei", sans-serif;
    margin: 0; padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 2); background-color: var(--body-background); color: var(--text-primary); line-height: var(--line-height-base); font-size: var(--font-size-base);
}
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

h1 {
    background-color: var(--header-background); color: var(--header-text-color); padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); border-radius: var(--border-radius-large); border: 1px solid var(--header-border-color); box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-align: center; font-size: 1.8rem; font-weight: 600; margin: 0 auto calc(var(--spacing-unit) * 2); display: flex; align-items: center; justify-content: center;
}
h1 .header-logo { width: 48px; height: 48px; object-fit: contain; margin-right: 12px; }

/* 跑馬燈 */
.marquee-container { width: 100%; overflow: hidden; background-color: var(--marquee-background); color: var(--marquee-text-color); padding: calc(var(--spacing-unit) * 1) 0; margin-bottom: calc(var(--spacing-unit) * 2); box-shadow: 0 2px 4px rgba(0,0,0,0.04); border-radius: var(--border-radius-medium); border: 1px solid #e0e0e0; position: relative; }
.marquee-container::before { content: '📢'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; z-index: 2; }
.marquee-container::after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 45px; height: 100%; background-color: var(--marquee-background); z-index: 1; }
.marquee-content-wrapper { display: flex; width: fit-content; animation: marquee-scroll var(--marquee-animation-duration) linear infinite; padding-left: 45px; }
.marquee-text { display: inline-block; white-space: nowrap; }
.marquee-text span { display: inline-block; padding: 0 var(--marquee-item-padding-horizontal); font-size: 0.95rem; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 診所卡片網格 */
.clinic-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: calc(var(--spacing-unit) * 9); max-width: 1600px; margin: 0 auto; background-color: var(--card-area-background); padding: calc(var(--spacing-unit) * 3); border-radius: var(--border-radius-large); border: 1px solid #d4eff5; padding-top: 60px;
}

/* 卡片標題與 Header 按鈕 */
.clinic-card { position: relative; background-color: transparent; border: none; box-shadow: none; }
.clinic-card h2 {
    position: absolute; top: -50px; left: 0; width: 100%; display: flex; justify-content: flex-end; align-items: center; height: 50px; z-index: 2; padding: 0 20px; margin: 0; background: none; border: none; font-size: 0; pointer-events: none;
}
.clinic-card h2::before {
    content: attr(data-title); position: absolute; left: 20px; /* 電腦版靠左距離 */ top: 0; display: flex; align-items: center; justify-content: center; padding: 0 30px; height: 100%; background-color: var(--card-header-background); color: var(--card-header-text-color); font-size: 1.4rem; font-weight: 600; border-radius: 1em 1em 2% 2%; pointer-events: auto; z-index: 1;
}

/* Header 介紹按鈕 */
.btn-header-info {
    pointer-events: auto; background-color: #17a2b8; color: white; border: 1px solid #17a2b8; padding: 5px 12px; border-radius: 20px; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; z-index: 2; backdrop-filter: none; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-header-info:hover { background-color: #138496; border-color: #117a8b; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }

/* 資訊內容區域 */
.clinic-data-area { background-color: var(--card-background); border: 1px solid var(--card-border-color); border-radius: var(--border-radius-medium); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); padding: calc(var(--spacing-unit) * 2); padding-top: 25px; flex-grow: 1; display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 1; }

/* ================================================================== */
/* ==========[ 修改：左圖右文排版 (Photo + Text Layout) ]========== */
/* ================================================================== */

/* 診間列表容器 */
.room-list { 
    flex-grow: 1; 
    margin-bottom: calc(var(--spacing-unit) * 1.5); 
    overflow-y: auto; 
    min-height: 30px;
    width: 100%;
    
    /* [新增] 隱藏 Firefox 的捲動列 */
    scrollbar-width: none; 
    /* [新增] 隱藏 IE/Edge 的捲動列 */
    -ms-overflow-style: none; 
}

/* [新增] 隱藏 Chrome/Safari/Webkit 的捲動列 */
.room-list::-webkit-scrollbar {
    display: none;
}

.room-info { 
    border-bottom: 1px solid var(--border-color-light); 
    padding-bottom: 16px; 
    margin-bottom: 16px;
    
    /* [關鍵] 改為左右排列 */
    display: flex;
    flex-direction: row; 
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 整體置中 */
    gap: 20px; /* 圖片與文字的間距 */
}

.room-info:last-child { 
    border-bottom: none; 
    margin-bottom: 0; 
    padding-bottom: 0; 
}

/* 左側：醫師照片容器 (修正版：長方形證件照風格) */
.doctor-photo-container {
    /* [修改] 寬度維持，但高度拉長，顯示更多細節 */
    width: 110px; 
    height: 135px; /* 改成長方形比例 */
    
    /* [修改] 改用圓角矩形，不再是圓形 */
    border-radius: 10px; 
    
    overflow: hidden; 
    border: 3px solid #fff; /* 邊框改為純白，比較乾淨 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* 加強陰影 */
    flex-shrink: 0; 
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 照片靠上對齊 */
    
    /* [關鍵修正] 增加底部外距，保留空間給陰影，避免被切掉 */
    margin-bottom: 8px;
}

.doctor-img {
    width: 100%;
    height: 100%;
    
    /* 保持填滿容器，不變形 */
    object-fit: cover; 
    
    /* [關鍵 1] 定位點：確保照片是以「上方中間」為基準 */
    object-position: center 15%; 
    
    /* [關鍵 2] 放大倍率：原本是 1，改成 1.35 (放大 35%) */
    /* 您可以依需求調整這個數字，例如 1.2 (小一點) 或 1.5 (大一點) */
    transform: scale(1.6); 
    
    /* [關鍵 3] 縮放基準點：從「上方」開始放大，才不會把頭頂切掉 */
    transform-origin: center 15%;
    
    /* 稍微往下移一點點，避免頭頂太貼邊緣 (視情況調整) */
    margin-top: 5px; 
}

/* ================================================================== */
/* ==========[ 修改：右側文字區塊 (對齊修正 + 放大) ]========== */
/* ================================================================== */

/* 右側：文字資訊容器 */
.room-text-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* [修改 1] 改為靠左對齊 (原本是 right) */
    text-align: left; 
    align-items: flex-start;
    
    padding-left: 25px; /* 增加與照片的距離 */
    border-left: 2px solid #e0e0e0; /* 分隔線顏色淡一點 */
    min-width: 160px; /* 稍微加寬容器 */
}

/* 每一行文字的設定 */
.room-text-info p {
    margin: 4px 0;
    
    /* [修改 2] 使用 Flex 佈局來控制對齊 */
    display: flex;
    align-items: baseline; /* 讓文字底部對齊 */
    width: 100%; /* 佔滿容器寬度 */
    
    /* [修改 3] 放大通用字體 */
    font-size: 1.3rem; 
    color: var(--text-primary);
    line-height: 1.4;
}

/* 標籤樣式 (診間、醫師、號碼) */
.room-text-info .label {
    /* [修改 4] 放大標籤字體 */
    font-size: 1.1rem; 
    color: #888;
    font-weight: 500;
    
    /* [關鍵] 給標籤一個固定寬度，讓右邊的內容可以「齊頭」 */
    width: 50px; 
    text-align: justify; /* 或是 right，看您喜歡哪種 */
    text-align-last: justify; /* 讓兩個字的標籤分散對齊 */
    margin-right: 12px; /* 標籤與數值的間距 */
}

/* 數值樣式 (一診、姓名) */
.room-text-info .value {
    font-weight: 700; /* 加粗 */
    color: var(--text-secondary);
    /* 確保數值靠左 */
    flex: 1; 
}

/* 醫師名字特別樣式 */
.room-text-info .doctor-name {
    /* [修改 5] 放大醫師名字 */
    font-size: 1.45rem; 
    color: #333;
    font-weight: 800;
    letter-spacing: 1px; /* 增加字距讓名字更有氣勢 */
}

/* 大號碼樣式 */
.room-text-info .current-number:not(.na-value) {
    font-weight: 900;
    color: var(--highlight-primary);
    
    /* [修改 6] 超級放大號碼 */
    font-size: 2.2rem; 
    line-height: 1;
    font-family: "Arial", sans-serif; /* 數字用 Arial 比較清楚 */
    position: relative;
    top: 3px; /* 微調垂直位置 */
}

/* 無資料時的樣式 */
.na-value { 
    color: var(--text-tertiary) !important; 
    font-weight: 400 !important; 
    font-size: 1.2rem; 
}

/* 底部資訊列 */
.card-footer-info { margin-top: auto; padding-top: calc(var(--spacing-unit) * 1.5); border-top: 1px solid var(--border-color-light); display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 15px; }
.location-tag { color: #006d8c; font-weight: 600; display: flex; align-items: center; }
.status { margin-top: 0; padding-top: 0; border-top: none; text-align: right; }
.status-success { color: var(--status-success) !important; }
.status-warning { color: var(--text-secondary) !important; }
.status-error { color: var(--status-error) !important; font-weight: 600; }
.loading-message, .error-message { color: var(--text-secondary); text-align: center; padding: var(--spacing-unit) * 3; font-size: 1rem; }
.error-message { color: var(--status-error); font-weight: 500; background-color: rgba(220, 53, 69, 0.05); border: 1px solid rgba(220, 53, 69, 0.2); border-radius: var(--border-radius-medium); padding: var(--spacing-unit) * 1.5; text-align: left; }

/* 預約按鈕 */
.btn-appointment { display: block; width: 100%; align-self: center; margin-top: 0; padding: calc(var(--spacing-unit) * 1) 0; background-color: var(--btn-bg); color: var(--btn-text-color); text-align: center; text-decoration: none; font-size: 1.1rem; font-weight: 600; border-radius: 50px; border: none; transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; }
.btn-appointment:hover { background-color: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.btn-appointment:active { transform: scale(0.96); }

/* 彈出視窗 */
.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(4px); animation: fadeIn 0.3s; }
.modal-content { background-color: #fff; margin: 40px auto; width: 90%; max-width: 700px; height: auto; max-height: 90vh; border-radius: var(--border-radius-large); position: relative; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: slideUp 0.3s; }
.modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background-color: #f9fcfc; border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; }
.modal-header h2 { margin: 0; font-size: 1.5rem; color: var(--card-header-background); padding: 0; border: none; position: static; height: auto; width: auto; box-shadow: none; pointer-events: auto; justify-content: flex-start; }
.close-btn { color: #888; font-size: 32px; font-weight: bold; line-height: 1; cursor: pointer; padding: 0 10px; transition: color 0.2s; }
.close-btn:hover { color: #333; }
.modal-body { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal-section { margin-bottom: 25px; }
.modal-section h3 { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 10px; border-left: 4px solid #17a2b8; padding-left: 10px; }
.map-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; border-radius: var(--border-radius-medium); border: 1px solid #ddd; }
.map-responsive iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; }
.nav-link { display: inline-block; margin-left: 10px; font-size: 0.9rem; color: #007bff; text-decoration: none; font-weight: 600; }
.doctor-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; padding: 0; list-style: none; }
.doctor-list li { background-color: #e7f9fd; color: #006d8c; padding: 10px; text-align: center; border-radius: 8px; font-weight: 500; font-size: 1rem; }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes slideUp { from {transform: translateY(50px); opacity:0;} to {transform: translateY(0); opacity:1;} }

/* ================================================================== */
/* 響應式設計 (手機版優化) */
/* ================================================================== */
@media (max-width: 1200px) { .clinic-grid { gap: calc(var(--spacing-unit) * 2.5); padding: calc(var(--spacing-unit) * 2); } }
@media (max-width: 768px) {
    :root { --font-size-base: 16px; --line-height-base: 1.5; }
    body { padding: var(--spacing-unit) * 2; }
    
    /* 標題字體縮小並強制不換行 */
    h1 { font-size: 1.5rem; padding: 12px 8px; margin-bottom: 16px; white-space: nowrap; }
    h1 .header-logo { width: 32px; height: 32px; margin-right: 8px; }
    
    .marquee-container { margin-bottom: var(--spacing-unit) * 2; }
    .marquee-container::before { left: 10px; font-size: 1rem; }
    .marquee-container::after { width: 40px; }
    .marquee-content-wrapper { padding-left: 40px; }
    
    /* [修正] 手機版網格改為 Flex Column 置中排列 */
    .clinic-grid { 
        display: flex;
        flex-direction: column;
        align-items: center; /* 水平置中 */
        gap: 64px; 
        padding: 12px; 
        padding-top: 55px; 
        margin-top: 20px; 
    }
    
    /* [修正] 限制卡片最大寬度，避免過寬，讓 Header 元素更緊湊 */
    .clinic-card {
        width: 100%;
        max-width: 350px; /* 模擬接近桌機版卡片的寬度 */
    }
    
    /* Header 微調 */
    .clinic-card h2 { padding: 0 15px; height: 45px; top: -45px; font-size: 1rem; }
    /* 手機版標籤靠左歸零，避免過於右移 */
    .clinic-card h2::before { font-size: 1.2rem; padding: 0 20px; left: 20px; }
    
    /* 手機版全螢幕 Modal */
    .modal-content { width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
    .modal-header { padding: 15px; background-color: #fff; border-bottom: 1px solid #ddd; position: sticky; top: 0; z-index: 10; }
    .modal-body { padding: 20px 15px 80px 15px; }
    .modal-header h2 { font-size: 1.4rem; width: auto; box-shadow: none; }
    .close-btn { font-size: 40px; padding: 5px 15px; }
    .map-responsive { padding-bottom: 75%; }
    
    .btn-appointment { font-size: 1rem; padding: calc(var(--spacing-unit) * 0.8) 0; border-radius: 50px; }
}