/* basic */


*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

a, *:hover, *:active{-webkit-transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; -moz-transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; -ms-transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; -o-transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; transition: background 300ms ease-in-out, height 300ms ease-in-out, color 300ms ease-in-out; }

a,html,body,h1,h2,h3,h4,ul{
    -webkit-overflow-scrolling : touch !important;
    margin:0;
    padding: 0;
    font-family:"Noto Sans TC" ,"微軟正黑體";
    font-size: 1rem;
    list-style-type:none;
    text-decoration:none;
    
}
body{margin:0;   font-family:"Noto Sans TC" ,"微軟正黑體";font-size:0.75em; position: relative;overflow-x: hidden;background-color: #f8f8f8; }
.fc-daygrid-day-number:after {
    content: none;
  }

.content {
    width: 100%;
    height: auto;
    margin: auto;
  position: absolute;
    overflow-x:hidden;
  z-index: -1;
  }

  .anchor{opacity: 0;display: block; margin-top: -100px; padding-top: 100px;}
.img01{width: 100%;margin: 130px 0 0 0;}
.fc-view-harness{height: 1300px!important;}


.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.a_c01{display: block;}
.clear{clear: both;}


   /* =========================================
   變數與全局設定 (香檳金高級漸層色調)
   ========================================= */
:root {
    --primary-gradient: linear-gradient(90deg, #4f5a6d, #5e6886, #6e748f 50%);
    --primary-solid: #54555e;
    --primary-hover: #8481a8;
    
    --bg-color: #fbfaf8;
    --surface-color: #ffffff;
    --text-main: #333333;
    --text-muted: #888888;
    
    --border-color: #eaeaea;
    --transition-fast: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Arial, 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-color);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--primary-solid);
    outline-offset: 2px;
}

/* =========================================
   共用組件 (Components)
   ========================================= */
.section {
    padding: 60px 5%;
    max-width: 1300px;
    margin: 0 auto;
}

.section.bg-light {
    background-color: var(--surface-color);
    max-width: 100%;
    padding: 40px 15%;
}

.section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.section__title {
    font-size: 1.8rem;
    font-weight: 500;
    background: #4b4c4e;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
}

.section__header--style{justify-content:center;}


.section__subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 5px;
}

.section__more {
    font-size: 0.9rem;
    color: var(--text-muted);

    padding: 2px  6px;
}


.section__more i{
    font-size:.75rem;
    transition:.3s;
}

.section__more:hover{
    color:var(--primary-solid);
}

.section__more:hover i{
    transform:translateX(4px);
}
.section__more:hover {
    color: var(--primary-solid);
}

/* =========================================
   Header 導覽列
   ========================================= */
.header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.header__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    font-size: 1.5rem;
    font-weight: 500;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

.nav__list {
    display: flex;
    gap: 30px;
}

.nav__link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
    position: relative;
}

.nav__link:hover {
    color: var(--primary-solid);
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-gradient);
    transition: width var(--transition-fast);
}

.nav__link:hover::after {
    width: 100%;
}

.header__toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--primary-solid);
    cursor: pointer;
}

/* =========================================
   首頁搜尋區塊 (Hero)
   ========================================= */
.hero {
    height: 40vh;
    min-height: 500px;
    background-color: #e8e8f1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero__content {
    max-width:1100px;
    width: 90%;
}

.hero__title {
    font-size: 2.8rem;
    font-weight: 400;
    color: #4b4b4b;
   
    margin-bottom: 10px;
    letter-spacing: 4px;
}

.hero__subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.search-box {
    display: flex;
    background-color: var(--surface-color);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(191, 148, 94, 0.1);
    flex-wrap: wrap;
}

.search-box__group {
    flex: 1;
    min-width: 150px;
    border-right: 1px solid var(--border-color);
}

.search-box__group:last-of-type {
    border-right: none;
}

.search-box__input {
    width: 100%;
    padding: 15px;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
}

.search-box__btn {
    background: var(--primary-gradient);
    color: white;
    border: none;
    padding: 0 30px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    background-size: 200% auto;
    transition: background-position 0.5s ease;
}

.search-box__btn:hover {
    background-position: right center;
}

/* =========================================
   推薦診所 (Clinic Cards)
   ========================================= */
.clinics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.clinic-card {
    background-color: var(--surface-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.clinic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(191, 148, 94, 0.15);
}

.clinic-card__image {
    position: relative;
    height: 200px;
}

.img-placeholder {
    width: 100%;
    height: 100%;
    background-color: #efeadf;
}

.clinic-card__content {
    padding: 20px;
}

.clinic-card__name {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--primary-solid);
}

.clinic-card__location {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.clinic-card__tags {

    gap: 10px;
    flex-wrap: wrap;
    text-align: right;
    display: block;
    margin: 35px 0 0 0;
}
.tag {
    font-size: 0.8rem;
    padding: 4px 10px;
    border: 1px solid #a2a8ad;
    color: rgb(97, 97, 97);
    border-radius: 10px;
}

.clinic-card-title{display: flex;justify-content: space-between;align-items: baseline;margin: 0 0 10px 0;}



/* 2. 星數 (評論數) 欄位 */
.rating-row {
    font-size: 0.85rem;
    color: var(--dark-blue);
    font-weight: 400;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rating-row i { 
    color: #F39C12; 
}




/* =========================================
   四大區塊 (Services)
   ========================================= */
.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    max-width: 100%;
    margin: 0 auto;
}

.service-block {
    text-align: center;
    padding: 40px 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all var(--transition-fast);
}

.service-block:hover {
    border-color: var(--primary-solid);
    background-color: white;
    box-shadow: 0 10px 20px rgba(191, 148, 94, 0.08);
}

.service-block__icon {
    font-size: 2.5rem;
    background: #7481a0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.service-block__title {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.service-block__desc {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* =========================================
   美學專欄 - 雜誌風條列式 (List Style)
   ========================================= */

.news{padding: 50px 2%;}


.news-list {
    display: flex;
    flex-direction: column;
}

.news-list__item {
    display: flex;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid var(--border-color);
    transition: all var(--transition-fast);
    group: article;
}

.news-list__item:first-child {
    border-top: 1px solid var(--border-color);
}

.news-list__item:hover {
    background-color: #f4f5f8; /* 極淺灰藍色，帶出漸層的視覺延續 */
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 8px;
    border-bottom-color: transparent;
}

.news-list__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding-right: 25px;
    border-right: 2px solid var(--primary-solid);
    margin-right: 25px;
}

.news-list__date .day {
    font-size: 2rem;
    font-weight: 700;
    color: #4c8bc2;
    line-height: 1;
}

.news-list__date .month-year {
    font-size: 0.8rem;
      color: #4c8bc2;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* 修改原有的 content 區塊，讓內文與標題排列更美觀 */
.news-list__content {
    flex-grow: 1;
    padding-right: 20px; /* 留點空間給右側滑出的箭頭 */
}

/* 新增：兩行內文描述 */
.news-list__desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 8px;
    
    /* 核心：強制限制為剛好 2 行，超出部分自動顯示省略號 (...) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    
    transition: color var(--transition-fast);
}

/* 滑鼠懸停時，內文字體顏色微調成稍微深一點的層次，增加質感 */
.news-list__item:hover .news-list__desc {
    color: #555555;
}
.news-list__title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-main);
    transition: color var(--transition-fast);
}

.news-list__item:hover .news-list__title {
    color: var(--primary-solid);
}

.news-list__arrow {
    color: var(--text-muted);
    font-size: 1.2rem;
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.4s ease;
}

.news-list__item:hover .news-list__arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--primary-solid);
}

/* =========================================
   Q&A 常見問題 - 懸浮對話框
   ========================================= */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.qa-box {
    background: var(--surface-color);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(79, 90, 109, 0.05);
    position: relative;
    border-top: 4px solid  #8dadc9;;
    transition: transform var(--transition-fast);
}

.qa-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(79, 90, 109, 0.12);
}

.qa-box__q, .qa-box__a {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.qa-box__q {
    margin-bottom: 20px;
}

.qa-mark {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    background: var(--primary-gradient);
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.qa-mark--a {
    background: #e4e7ed;
    color: var(--primary-solid);
}

.qa-box__q h4 {
    font-size: 1.1rem;
    color: var(--text-main);
    line-height: 1.4;
    margin-top: 4px;
    font-weight: 500;
}

.qa-box__a p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-top: 2px;
}

/* =========================================
   醫美課程 - 官方專業風格 (Official & Professional)
   ========================================= */
.courses {
    padding: 40px 10px 50px;
    background-color: #eef3f8; /* 微淺灰底色，襯托白色卡片 */
    width: 100%;
    max-width:100%;
    margin: auto;
}
.courses-content{max-width:1200px;height: auto; margin: auto;}


.courses-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.official-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #8dadc9; /* 專業醫療深藍色 */
    border-radius: 8px;
    padding: 35px 30px;
    position: relative;
    color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.official-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-top-color: #546072; /* 懸停時提亮邊框顏色 */
}

.official-card__title {
    color: #0f172a;
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e2e8f0; /* 標題分隔線 */
    letter-spacing: 0.5px;
}

.official-card__desc {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 25px;
    flex-grow: 1;
}

.official-card__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4a556d;
    font-weight: 400;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.official-card__link i {
    transition: transform 0.3s ease;
}

.official-card:hover .official-card__link {
    color: #74849c;
}

.official-card:hover .official-card__link i {
    transform: translateX(4px);
}

/* =========================================
   相關連結 - 條列式專業選單 (Vertical List)
   ========================================= */
.links {
    padding: 40px 2%;
}

.link-list-container {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 2px solid #e2e8f0;
}

.list-link-item {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    color: #334155;
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    background-color: transparent;
}

.list-link-icon {
    font-size: 1.2rem;
    color: #64748b;
    width: 30px;
    text-align: left;
    margin-right: 15px;
    transition: color 0.3s ease;
}

.list-link-arrow {
    margin-left: auto;
    color: #cbd5e1;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.list-link-item:hover {
    background-color: #f8fafc;
    padding-left: 25px; /* 懸停時整體向右微微推移 */
    color: #1e3a8a;
}

.list-link-item:hover .list-link-icon {
    color: #1e3a8a;
}

.list-link-item:hover .list-link-arrow {
    transform: translateX(5px);
    color: #1e3a8a;
}


.location-badge {
    display: inline-flex; /* 讓 icon 和文字垂直置中對齊 */
    align-items: center;
    gap: 6px; /* icon 和文字的間距 */
    background-color: #e8f3ff; /* 淺藍色背景 (也可改成捷運紅線的淺粉色 #fce7e7) */
    color: #3670ad; /* 深藍色文字 */
    padding: 4px 12px; /* 內邊距 */
    border-radius: 50px; /* 圓角 */
    font-weight: 600; /* 字體加粗 */
    font-size: 0.9rem; /* 稍微調整字體大小 */
    margin: 5px 0; /* 與上下內容保持呼吸空間 */
}

/* 讓 Icon 顏色更跳一點 (選擇性) */
.location-badge i {
    color: #5895d6;
}


/* =========================================
   Footer
   ========================================= */
.footer {
    background-color: #363a41;
    color: white;
    padding: 40px 5% 20px;
}

.footer__container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer__logo {
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #e4e4e4;
    font-size: 1.5rem;
}

.footer__desc {
    color: #e4e4e4;
    font-size: 0.9rem;
    max-width: 300px;
}

.footer__title {
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 400;
    color: #e0e0e0
}

.footer__links ul li, .footer__contact ul li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #e4e4e4;
}

.footer__links a:hover {
    color: white;
}

.footer__bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.212);
    font-size: 0.85rem;
    color: #e4e4e4;
}



.section--services{display: block;text-align: center;}



/* 下拉式容器 */
.search-box__dropdown {
    position: relative;
    cursor: pointer;
}

.dropdown-trigger {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-main);
}

.trigger-text {
    font-size: 1rem;
    color: var(--text-muted);
}

/* 下拉內容選單 */
.dropdown-content {
    display: none; /* 預設隱藏 */
    position: absolute;
    top: 105%;
    left: 0;
    width: 250px;
    background: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 15px;
    z-index: 10;
    border: 1px solid var(--border-color);
}

/* 顯示類別 */
.search-box__dropdown.is-active .dropdown-content {
    display: block;
    animation: fadeIn 0.2s ease;
}

.search-box__dropdown.is-active .fa-chevron-down {
    transform: rotate(180deg);
}

/* 讓行政區在手機版也能優雅顯示 */
.checkbox-label {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    cursor: pointer;
    border-bottom: 1px solid #f9f9f9;
}

.checkbox-label:last-child {
    border-bottom: none;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-solid);
}


/* 新增單選標籤樣式，與 checkbox-label 一致 */
.radio-label {
    display: flex;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-main);
    transition: color 0.2s;
}

.radio-label:hover {
    color: var(--primary-solid);
}

.radio-label input[type="radio"] {
    margin-right: 10px;
    accent-color: var(--primary-solid);
    width: 16px;
    height: 16px;
}




    .inner-banner {
        height: 220px;
        background-color: #a2afc0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #ffffff;
    }

    .inner-banner__title {
        font-family: 'Noto Serif TC', serif;
        font-size: 2.2rem;
        font-weight: 500;
        letter-spacing: 3px;
        margin-bottom: 8px;
        color: #f0f0f0;
    }

    .inner-banner__subtitle {
        font-size: 0.95rem;
        color: #eeeeee;
        letter-spacing: 1px;
    }

    /* =========================================
   麵包屑導覽 (Breadcrumbs)
   ========================================= */
    .breadcrumbs-nav {
        max-width: 1400px;
        margin: 20px auto 0;
        padding: 0 5%;
    }

    .breadcrumbs {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .breadcrumbs a:hover {
        color: var(--primary-solid);
    }

    .breadcrumbs li:not(:last-child)::after {
        content: '/';
        margin-left: 8px;
        color: #ccc;
    }

    .breadcrumbs li:last-child {
        color: var(--primary-solid);
        font-weight: 500;
    }

    /* =========================================
   搜尋核心區塊 (與首頁一致)
   ========================================= */
    .search-section {
        max-width: 1400px;
        margin: 20px auto 40px;
        padding: 0 5%;
    }

    .search-box {
        display: flex;
        background-color: var(--surface-color);
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 10px 30px rgba(191, 148, 94, 0.08);
        flex-wrap: wrap;
        align-items: center;
    }

    .search-box__group {
        flex: 1;
        min-width: 150px;
        border-right: 1px solid var(--border-color);
    }

    .search-box__group:nth-last-of-type(2) {
        border-right: none;
    }

    .search-box__input {
        width: 100%;
        padding: 15px;
        border: none;
        background: transparent;
        font-size: 1rem;
        color: var(--text-main);
    }

    input.search-box__input {
        outline: none;
    }

    .search-box__btn {
        background: var(--primary-gradient);
        color: white;
        border: none;
        padding: 15px 30px;
        border-radius: 6px;
        font-size: 1rem;
        cursor: pointer;
        background-size: 200% auto;
        transition: background-position 0.5s ease;
    }

    .search-box__btn:hover {
        background-position: right center;
    }

    .search-box__filters {
        flex: 1 1 100%;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 15px;
        text-align: left;
    }

    .filters-title {
        font-size: 0.9rem;
        color: var(--text-main);
        font-weight: 500;
        white-space: nowrap;
    }

    .filters-options {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    .checkbox-label {
        font-size: 0.9rem;
        color: var(--text-main);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        user-select: none;
    }

    .checkbox-label:hover {
        color: var(--primary-solid);
    }

    .checkbox-label input[type="checkbox"] {
        accent-color: var(--primary-solid);
        width: 16px;
        height: 16px;
    }







    
    /* =========================================
   搜尋結果資訊與主列表區
   ========================================= */
    .results-container {
        max-width: 1700px;
        margin: 0 auto 60px;
        padding: 0 5%;
    }

    .results-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }

    .results-count {
        font-size: 0.95rem;
        color: var(--text-main);
    }

    .results-count span {
        color: var(--primary-solid);
        font-weight: 700;
        margin: 0 3px;
    }

    .results-sort select {
        padding: 6px 12px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background-color: #fff;
        font-size: 0.9rem;
        color: var(--text-main);
        outline: none;
        cursor: pointer;
    }

    /* 診所列表網格卡片 - 修改為一列 4 個 */
    .clinics-list-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }

    .search-clinic-card {
        background-color: var(--surface-color);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
        border: 1px solid var(--border-color);
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        display: flex;
        flex-direction: column;
    }

    .search-clinic-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(191, 148, 94, 0.12);
        border-color: #e2d2bc;
    }

    .search-clinic-card__img-box {
        height: 150px;
        background-color: #efeadf;
        position: relative;
    }

    .search-clinic-card__badges {
        position: absolute;
        top: 12px;
        left: 12px;
        display: flex;
        gap: 4px;
    }

    .feature-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 500;
        color: #fff;
    }

    .feature-badge--mrt {
        background-color: #2b8a3e;
    }

    .feature-badge--sunday {
        background-color: #e03131;
    }

    .search-clinic-card__content {
        padding: 20px 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .search-clinic-card__name {
        font-size: 1.15rem;
        font-weight: 500;
        color: #222;
        margin-bottom: 8px;
    }

    .search-clinic-card__rating-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 12px;
        font-size: 0.85rem;
    }

    .stars {
        color: #fcc419;
    }

    .rating-score {
        font-weight: 700;
        color: var(--text-main);
    }

    .review-count {
        color: var(--text-muted);
    }

    .search-clinic-card__info {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .search-clinic-card__tags {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: auto;
    }

    .search-tag {
        font-size: 0.75rem;
        padding: 2px 8px;
        background-color: #f5efe6;
        color: #8a6d43;
        border-radius: 4px;
        font-weight: 500;
    }


    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 50px;
    }

    .page-btn {
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color);
        background-color: #fff;
        border-radius: 6px;
        font-size: 0.95rem;
        color: var(--text-main);
        cursor: pointer;
        transition: all var(--transition-fast);
    }

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

    .page-btn.active {
        background: var(--primary-gradient);
        color: #fff;
        border: none;
        font-weight: 500;
    }

    .page-btn.disabled {
        color: #ccc;
        cursor: not-allowed;
        background-color: #fafafa;
    }

/* 區塊標題通用樣式 */
.section-title-box {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.8rem;
    color: #222;
    position: relative;
    padding-bottom: 15px;
    font-weight: 500;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: var(--primary-gradient);
}

.section-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 10px;
    letter-spacing: 1px;
}

/* 動畫 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}




   /* =========================================
   核心內容：四大醫美資訊區塊
   ========================================= */
    .info-main-container {
        max-width: 1400px;
        margin: 40px auto 60px;
        padding: 0 5%;
    }

    .info-section {
        margin-bottom: 80px;
    }

    /* --- 區塊一：四大療程領域導覽 (一列 4 個) --- */
    .category-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }

    .category-card {
        background-color: var(--surface-color);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 30px 20px;
        text-align: center;
        transition: all var(--transition-fast);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    }

    .category-card:hover {
        transform: translateY(-5px);
        border-color: #e2d2bc;
        box-shadow: 0 10px 25px rgba(191, 148, 94, 0.1);
    }

    .category-card__icon {
        width: 60px;
        height: 60px;
        background: #fdfaf4;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        font-size: 1.5rem;
        color: var(--primary-solid);
        border: 1px solid #f3ebd8;
    }

    .category-card__title {
        font-size: 1.2rem;
        font-weight: 500;
        color: #222;
        margin-bottom: 12px;
    }

    .category-card__desc {
        font-size: 0.9rem;
        color: var(--text-muted);
        line-height: 1.6;
    }


    /* --- 區塊二：醫美新手安心指南 (流程圖佈局) --- */
    .guide-timeline {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        background-color: #fff;
        padding: 40px 30px;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
        border: 1px solid var(--border-color);
        position: relative;
    }

    .guide-step {
        text-align: center;
        position: relative;
    }


    .guide-step__num {
        font-family: 'Noto Serif TC', serif;
        font-size: 1.8rem;
        font-weight: 700;
        color: #648cb1;
        margin-bottom: 10px;
        display: block;
    }

    .guide-step__title {
        font-size: 1.1rem;
        font-weight: 500;
        color: #222;
        margin-bottom: 10px;
    }

    .guide-step__desc {
        font-size: 0.9rem;
        color: var(--text-muted);
        padding: 0 15px;
    }


    /* --- 區塊三：年度熱門療程精選 (一列 4 個卡片) --- */
    .treatment-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .treatment-card {
        background-color: var(--surface-color);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
        border: 1px solid var(--border-color);
        transition: all var(--transition-fast);
        display: flex;
        flex-direction: column;
    }

    .treatment-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(191, 148, 94, 0.12);
        border-color: #e2d2bc;
    }

    .treatment-card__img-box {
        height: 140px;
        background-color: #efeadf;
        position: relative;
    }

.treatment-card__img-box img{width: 100%;height: auto;display: block;}

    .treatment-card__badge {
        position: absolute;
        top: 12px;
        left: 12px;
        font-size: 0.75rem;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: 500;
        color: #fff;
        background-color: #bf945e;
    }

    .treatment-card__content {
        padding: 20px 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .treatment-card__title {
        font-size: 1.15rem;
        font-weight: 500;
        color: #222;
        margin-bottom: 8px;
    }

    .treatment-card__desc {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .treatment-card__meta {
        font-size: 0.8rem;
        color: #8a6d43;
        background-color: #f5efe6;
        padding: 5px 10px;
        border-radius: 4px;
        margin-top: auto;
        display: flex;
        justify-content: space-between;
    }


    /* --- 區塊四：醫美安全與常見問答 (手風琴結構) --- */
    .faq-list {
        max-width: 900px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .faq-item {
        background-color: #fff;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        transition: border-color var(--transition-fast);
    }

    .faq-item:hover {
        border-color: #e2d2bc;
    }

    .faq-toggle {
        width: 100%;
        padding: 20px;
        background: none;
        border: none;
        text-align: left;
        font-size: 1rem;
        font-weight: 500;
        color: #222;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .faq-toggle i {
        color: var(--primary-solid);
        transition: transform var(--transition-fast);
    }

    .faq-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        background-color: #faf9f6;
    }

    .faq-content__inner {
        padding: 20px;
        font-size: 0.92rem;
        color: #555;
        border-top: 1px solid #f5f5f5;
        line-height: 1.7;
    }

    /* 手風琴激活狀態 */
    .faq-item.active .faq-content {
        max-height: 200px;
        /* 足夠容納內容即可 */
    }

    .faq-item.active .faq-toggle i {
        transform: rotate(180deg);
    }



/* =========================================
   專欄主佈局區塊 (雙欄結構)
   ========================================= */
.blog-container {
    max-width: 1400px;
    margin: 40px auto 80px;
    padding: 0 5%;
    display: grid;
    grid-template-columns: 300px 1fr; /* 左側固定，右側自適應 */
    gap: 40px;
    align-items: start;
}

/* --- 左側側邊欄 Aside --- */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky;
    top: 90px; /* 隨捲動固定於頂部 */
}

.sidebar-widget {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.01);
}

.sidebar-widget__title {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.15rem;
    color: #222;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f3ebd8;
    position: relative;
    font-weight: 700;
}


.category-list li {
    margin-bottom: 12px;
}
.category-list a {
    font-size: 0.95rem;
    color: #555;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.category-list a:hover, .category-list li.active a {
    color: var(--primary-solid);
    font-weight: 500;
    padding-left: 5px;
}
.category-list__count {
    font-size: 0.8rem;
    color: var(--text-muted);
    background-color: #f7f5f0;
    padding: 2px 8px;
    border-radius: 20px;
}


.recent-posts-list li {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
}
.recent-posts-list li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.recent-posts__date {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
}
.recent-posts__title {
    font-size: 0.92rem;
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
}
.recent-posts-list a:hover .recent-posts__title {
    color: var(--primary-solid);
}



.blog-content-area {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.article-list-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01);
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
}

.article-list-card:hover {
    transform: translateY(-3px);
    border-color: #e2d2bc;
    box-shadow: 0 10px 25px rgba(191, 148, 94, 0.08);
}

.article-list-card__date {
    font-size: 0.88rem;
    color: var(--primary-solid);
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.article-list-card__title {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.4rem;
    color: #222;
    margin-bottom: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.article-list-card__title a:hover {
    color: var(--primary-solid);
}

/* 內文強制截斷為 2 行 */
.article-list-card__excerpt {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 查看按鈕樣式 */
.article-list-card__btn-row {
    display: flex;
    justify-content: flex-start;
}

.view-article-btn {
    padding: 8px 24px;
    border: 1px solid var(--primary-solid);
    color: var(--primary-solid);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.view-article-btn:hover {
    background: var(--primary-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(191, 148, 94, 0.2);
}

/* =========================================
   頁碼純樣式組件 (保持全站一致)
   ========================================= */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.page-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background-color: #fff;
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--text-main);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.page-btn:hover:not(.disabled) { border-color: var(--primary-solid); color: var(--primary-solid); }
.page-btn.active { background: var(--primary-gradient); color: #fff; border: none; font-weight: 500; }
.page-btn.disabled { color: #ccc; cursor: not-allowed; background-color: #fafafa; }



 /* =========================================
   主版面排佈：雙欄文章詳細頁
   ========================================= */
    .article-container {
        max-width: 1400px;
        margin: 40px auto 80px;
        padding: 0 5%;
        display: grid;
        grid-template-columns: 1fr 320px;
  
        gap: 50px;
        align-items: start;
    }

    .article-main {
        background-color: var(--surface-color);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        padding: 40px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    }

    /* 文章中介資訊 */
    .article-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 0.88rem;
        color: var(--text-muted);
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border-color);
    }

    .article-meta span i {
        color: var(--primary-solid);
        margin-right: 6px;
    }

    /* 文章大標題 */
    .article-title {
        font-family: 'Noto Serif TC', serif;
        font-size: 2rem;
        color: #111;
        line-height: 1.4;
        margin-bottom: 30px;
        font-weight: 700;
    }

    /* 文章內文排版樣式 */
    .article-body {
        font-size: 1.05rem;
        color: #444;
    }

    .article-body p {
        margin-bottom: 25px;
        text-align: justify;
    }

    .article-body h2 {
        font-family: 'Noto Serif TC', serif;
        font-size: 1.5rem;
        color: #222;
        margin: 45px 0 20px;
        padding-left: 12px;
        border-left: 4px solid var(--primary-solid);
        line-height: 1.3;
    }

    .article-body h3 {
        font-size: 1.2rem;
        color: #333;
        margin: 30px 0 15px;
        font-weight: 600;
    }

    /* 模擬文章大圖/插圖區塊 */
    .article-image-placeholder {
        width: 100%;
        height: 350px;
        background-color: #f4eee2;
        border-radius: 8px;
        margin: 35px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a89475;
        font-size: 0.95rem;
        border: 1px dashed #dfd3bd;
    }

    /* 專業醫師語錄/重點強調 blockquote */
    .article-blockquote {
        background-color: #fcfbf9;
        border-left: 4px solid var(--primary-solid);
        padding: 25px 30px;
        margin: 35px 0;
        border-radius: 0 8px 8px 0;
    }

    .article-blockquote p {
        font-family: 'Noto Serif TC', serif;
        font-size: 1.1rem;
        color: #795e38;
        font-style: italic;
        margin-bottom: 0;
    }

    .article-blockquote__author {
        display: block;
        text-align: right;
        font-size: 0.88rem;
        color: var(--text-muted);
        margin-top: 10px;
        font-style: normal;
    }

    /* 文章底部標籤與社群分享 */
    .article-footer {
        margin-top: 50px;
        padding-top: 25px;
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .article-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .article-tag {
        font-size: 0.8rem;
        padding: 4px 12px;
        background-color: #f5efe6;
        color: #8a6d43;
        border-radius: 4px;
    }

    .article-share {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.9rem;
        color: var(--text-main);
    }

    .share-btn {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #555;
        transition: all var(--transition-fast);
    }

    .share-btn:hover {
        background-color: var(--primary-solid);
        color: #fff;
    }

    /* 上一篇、下一篇導覽 */
    .post-navigation {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 40px;
        padding-top: 30px;
        border-top: 1px solid var(--border-color);
    }

    .nav-link-box {
        display: flex;
        flex-direction: column;
        padding: 15px 20px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: #fff;
    }

    .nav-link-box:hover {
        border-color: #e2d2bc;
    }

    .nav-link-box--next {
        text-align: right;
    }

    .nav-link-box__label {
        font-size: 0.78rem;
        color: var(--text-muted);
        margin-bottom: 5px;
    }

    .nav-link-box__title {
        font-size: 0.92rem;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }

    .nav-link-box:hover .nav-link-box__title {
        color: var(--primary-solid);
    }

/* =========================================
   聯絡我們 主版面排佈 (文案 + 圖片)
   ========================================= */
.contact-container {
    max-width: 1400px;
    margin: 120px auto 120px;
    padding: 0 5%;
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* 左側文案略寬，右側圖片平衡平衡 */
    gap: 60px;
    align-items: center; /* 垂直居中對齊 */
}

/* --- 左側：文案與聯絡資訊區塊 --- */
.contact-text-block {
    display: flex;
    flex-direction: column;
}

.contact-main-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.8rem;
    color: #222;
    margin-bottom: 20px;
    font-weight: 500;
    position: relative;
    padding-bottom: 12px;
}

.contact-main-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: var(--primary-gradient);
}

.contact-lead-text {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 35px;
    text-align: justify;
}

/* 條列式精緻聯絡清單 */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.info-row__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f6f1e7;
    color: var(--primary-solid);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid #f0e4d0;
}

.info-row__content h4 {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.info-row__content p {
    font-size: 1.1rem;
    color: #222;
    font-weight: 500;
}

.info-row__content a:hover {
    color: var(--primary-solid);
}



.contact-image-wrapper {
    width: 100%;  height:auto;text-align: center;
}


.contact-image-wrapper  img {
    width:250px;
    height:auto;
    max-width: 100%;
}




/* 回到頂部按鈕 */
.footer-top {
    width: 46px;
    height: 46px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    background: #4f515f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.footer-top_font {
    width: 10px;
    height: 10px;
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg);
}

  @media (max-width: 1450px) {
      
       
    .qa-grid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
    
    }


    /* =========================================
   RWD 響應式佈局斷點
   ========================================= */
    @media (max-width: 1200px) {
        .category-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .treatment-grid {
            grid-template-columns: repeat(3, 1fr);
        }
        .section.bg-light{padding: 80px 5%;}
    
   
    }

    @media (max-width: 992px) {
        .treatment-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .guide-timeline {
            grid-template-columns: 1fr;
            gap: 40px;
            padding: 30px 20px;
        }
  .qa-grid{grid-template-columns:repeat(auto-fit, minmax(100%, 1fr))}
    
    }
/* =========================================
   RWD 響應式佈局斷點
   ========================================= */
@media (max-width: 992px) {
    .blog-container { grid-template-columns: 1fr; gap: 30px; } /* 改為單欄疊加 */
    .blog-sidebar { position: static; } /* 取消固定效果 */
}

    @media (max-width: 768px) {
      
       
        .category-grid {
            grid-template-columns: 1fr;
        }

        .treatment-grid {
            grid-template-columns: 1fr;
        }

        .dropdown-content {
        width: 100%;
        position: static;
        box-shadow: none;
        border: none;
        background: #fdfdfd;
    }
        .article-list-card { padding: 20px; }
    .article-list-card__title { font-size: 1.25rem; }
    .footer__container { grid-template-columns: 1fr; gap: 30px; }
     .contact-container { 
        grid-template-columns: 1fr; 
        gap: 40px; 
    }
    .contact-premium-image {
        height: 350px; /* 行動裝置縮減高度 */
    }
    .post-navigation { grid-template-columns: 1fr; }
    }




/* =========================================
   RWD 響應式佈局
   ========================================= */
@media (max-width: 1200px) {
    .clinics-list-grid { grid-template-columns: repeat(3, 1fr); } /* 中大螢幕改為 3 列 */
}

@media (max-width: 992px) {
    .clinics-list-grid { grid-template-columns: repeat(2, 1fr); } /* 平板改為 2 列 */
    
}

@media (max-width: 768px) {
    .hero__title{font-size: 1.8em;margin: 20px 0 0 0;}
    .header__toggle { display: block; }
    .nav__list { display: none; }
    
    .search-box { flex-direction: column; align-items: stretch; }
    .search-box__group { border-right: none; border-bottom: 1px solid var(--border-color); }
    .search-box__btn { width: 100%; margin-top: 10px; padding: 15px; }
    
    .search-box__filters { flex-direction: column; align-items: flex-start; gap: 10px; }
    .filters-options { gap: 10px 15px; }
    
    .clinics-list-grid { grid-template-columns: 1fr; } /* 手機改為 1 列 */
    .footer__container { grid-template-columns: 1fr; gap: 30px; }
    .results-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
     .header {
        position: sticky;
        top: 0;
    }
    .header__container {
        position: relative;
    }

    .header__toggle {
        display: block;
    }
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 10px 20px rgba(0,0,0,.08);
        display: none;
    }
    .nav.active {
        display: block;
    }
    .nav__list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .nav__item {
        border-bottom: 1px solid #eee;
    }
    .nav__link {
        display: block;
        padding: 15px 20px;
    }
    .nav__link::after {
        display: none;
    }
    .section__header{display: block;text-align: center;}
    .courses-showcase {
 
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}

}