/* 整形醫師介紹頁（lesson_content.html，正式站 /doctor/xxx）底部「其他整形醫師」「熱門整形知識」區塊
   比照 breast-augmentation-introduction（multi-service.css）的區塊與卡片做法；class 另外取名，不載入也不依賴 multi-service.css */

/* ---------- 區塊容器與置中標題 ---------- */
.doctor-section{margin-top: 40px;padding: 40px 28px 16px 28px;background: #faf6f1;border-radius: 20px;}
.doctor-section-title{margin: 0 0 30px 0;padding: 0;text-align: center;color: #8b776d;font-size: 26px;font-weight: bold;line-height: 1.4;letter-spacing: 1px;}
.doctor-section-title::after{content: "";display: block;width: 36px;height: 2px;margin: 14px auto 0 auto;background: #cfbdaa;}

/* ---------- 其他整形醫師：白色圓角卡、照片／姓名＋職稱膠囊／簡介／整寬按鈕 ---------- */
.doctor-related-list{display: flex;flex-wrap: wrap;margin: 0 -12px;padding: 0;list-style: none;}
.doctor-related-list > li{width: 33.33%;box-sizing: border-box;padding: 0 12px;margin-bottom: 24px;list-style: none;}
.doctor-related-card{display: flex;flex-direction: column;height: 100%;background: #fff;border-radius: 18px;overflow: hidden;}
/* 醫師照 800×1200 直式，固定 2:3 完整顯示，與 /doctor 列表頁一致 */
.doctor-related-photo{position: relative;display: block;padding-top: 150%;background: #f3e9df;overflow: hidden;line-height: 0;}
.doctor-related-photo img{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform .6s, opacity .4s;}
.doctor-related-body{display: flex;flex-direction: column;flex: 1 1 auto;padding: 22px 24px 24px 24px;text-align: left;}
.doctor-related-name{margin: 0 0 12px 0;padding: 0;font-size: 22px;font-weight: bold;line-height: 1.4;}
.doctor-related-name a{color: #4d4d4d;font-size: 22px;font-weight: bold;text-decoration: none;transition: color .3s;}
.doctor-related-name span{display: inline-block;margin-left: 10px;padding: 0 10px;background: #8b776d;border-radius: 20px;color: #fff;font-size: 12px;font-weight: bold;letter-spacing: 1px;line-height: 22px;vertical-align: 4px;}
.doctor-related-summary{margin: 0 0 18px 0;color: #666666;font-size: 14px;line-height: 1.8;}
.doctor-related-link{display: block;margin-top: auto;background: #8b776d;border-radius: 50px;color: #fff;font-size: 15px;font-weight: bold;letter-spacing: 1px;line-height: 46px;text-align: center;text-decoration: none !important;transition: background-color .4s ease;}
.doctor-related-link i{margin-left: 6px;font-size: 17px;vertical-align: -1px;}

/* ---------- 熱門整形知識：白色圓角卡、列表圖／分類膠囊／標題兩行／摘要／瀏覽數／閱讀連結 ---------- */
.doctor-article-list{display: flex;flex-wrap: wrap;margin: 0 -12px;padding: 0;list-style: none;}
.doctor-article-list > li{width: 33.33%;box-sizing: border-box;padding: 0 12px;margin-bottom: 24px;list-style: none;}
.doctor-article{position: relative;display: flex;flex-direction: column;height: 100%;box-sizing: border-box;background: #fff;border-radius: 16px;overflow: hidden;}
/* 文章列表圖 460×256，比例 55.65% 完整顯示不裁切 */
.doctor-article-image{position: relative;display: block;padding-top: 55.65%;background: #f3e9df;overflow: hidden;line-height: 0;}
.doctor-article-image img{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform .6s, opacity .4s;}
.doctor-article-body{display: flex;flex-direction: column;flex: 1 1 auto;padding: 18px 22px 22px 22px;text-align: left;}
.doctor-article-tag-row{margin: 0 0 10px 0;font-size: 0;}
.doctor-article-tag{display: inline-block;padding: 0 10px;background: #f3e9df;border-radius: 20px;color: #8b776d;font-size: 12px;font-weight: bold;letter-spacing: .5px;line-height: 22px;text-decoration: none;transition: background-color .3s, color .3s;}
.doctor-article-tag i{margin-right: 4px;color: inherit;}
/* 全站 font-awesome.css 被客製過：.fa-tags:before{color:#999}，要在 ::before 上改回繼承膠囊文字色 */
.doctor-article-tag .fa-tags::before{color: inherit;}
.doctor-article-title{margin: 0 0 8px 0;padding: 0;font-size: 17px;font-weight: bold;line-height: 24px;}
.doctor-article-title a{color: #4d4d4d;font-size: 17px;font-weight: bold;line-height: 24px;height: 48px;text-decoration: none;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;transition: color .3s;}
/* 摘要完整顯示不截行；卡片等高由 flex 撐開，底列仍對齊 */
.doctor-article-text{margin-bottom: 8px;color: #888888;font-size: 14px;line-height: 22px;letter-spacing: .3px;}
/* 瀏覽數：固定在卡片底部（margin-top:auto），摘要長短只影響中間留白 */
.doctor-article-info{display: flex;align-items: center;margin: auto 0 16px 0;padding-top: 8px;color: #cfbdaa;font-size: 12px;line-height: 18px;white-space: nowrap;}
.doctor-article-views{color: #cfbdaa;cursor: default;}
.doctor-article-views i{margin-right: 4px;color: #cfbdaa;}
/* 全站 aqindex.css 有 .fa-eye{color:#999!important}，要用 !important 壓回同色 */
.doctor-article-views .fa-eye{color: #cfbdaa!important;}
.doctor-article-foot{display: flex;align-items: center;justify-content: space-between;padding-top: 14px;border-top: 1px solid #f3ece4;}
.doctor-article-more{display: inline-block;padding-bottom: 3px;color: #8b776d;font-size: 14px;font-weight: bold;line-height: 20px;text-decoration: none;background: linear-gradient(#8b776d, #8b776d) no-repeat left bottom;background-size: 0 1px;transition: background-size .3s;}
.doctor-article-more::after{content: "\f105";font-family: 'FontAwesome';margin-left: 6px;font-weight: normal;}

/* ---------- 桌機 hover：只變色、圖片放大，壓掉 pixy-style 全站 a:hover opacity ---------- */
@media (min-width: 1080px){
    .doctor-section a:hover{opacity: 1!important;}
    .doctor-related-card:hover .doctor-related-photo img{transform: scale(1.05);opacity: .88;}
    .doctor-related-name a:hover{color: #8b776d;}
    .doctor-related-link:hover{background-color: #6a584f;color: #fff;}
    .doctor-article-image:hover img{transform: scale(1.05);}
    .doctor-article-title a:hover{color: #8b776d;}
    .doctor-article-tag:hover{background-color: #8b776d;color: #fff;}
    .doctor-article-tag:hover i{color: #fff;}
    .doctor-article-more:hover{background-size: 100% 1px;}
}

/* ---------- 平板：兩欄 ---------- */
@media (max-width: 1023px){
    .doctor-related-list > li,
    .doctor-article-list > li{width: 50%;}
}

/* ---------- 手機：醫師卡與文章卡都單欄 ---------- */
@media (max-width: 767px){
    .doctor-section{margin-top: 30px;padding: 28px 14px 8px 14px;border-radius: 14px;}
    .doctor-section-title{margin-bottom: 20px;font-size: 21px;}
    .doctor-section-title::after{margin-top: 10px;}
    .doctor-related-list > li{width: 100%;margin-bottom: 16px;}
    .doctor-related-card{border-radius: 14px;}
    .doctor-related-body{padding: 18px 18px 20px 18px;}
    .doctor-related-name{margin-bottom: 8px;font-size: 19px;}
    .doctor-related-name a{font-size: 19px;}
    .doctor-related-summary{margin-bottom: 16px;}
    .doctor-related-link{font-size: 14px;line-height: 42px;}
    .doctor-article-list > li{width: 100%;margin-bottom: 16px;}
}

/* ---------- 手術 Q&A 短影音：直式 9:16 卡片，桌機一排三張、手機一張（放在編輯器內文區、擅長手術項目之後，覆寫規則見檔尾） ----------
   縮圖：全站 new_index.js 只會抓 16:9 的 hqdefault（直式影片兩側黑邊），所以卡片框改用 YouTube 直式圖 oar2.jpg 當背景（inline style），
   腳本產生的 img 隱藏，保留它的外層 div 當點擊範圍與播放鍵，點了一樣換成 iframe 播放 */
.doctor-short-list{display: flex;flex-wrap: wrap;margin: 0 -12px;padding: 0;list-style: none;}
.doctor-short-list > li{width: 33.333%;box-sizing: border-box;padding: 0 12px;margin-bottom: 24px;list-style: none;}
.doctor-short{display: flex;flex-direction: column;height: 100%;box-sizing: border-box;background: #faf6f1;border-radius: 16px;overflow: hidden;}
.doctor-short-frame{position: relative;padding-top: 177.78%;background: #000 center center / cover no-repeat;overflow: hidden;}
.doctor-short-frame iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}
.doctor-short-frame .youtube-player{position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin: 0;padding: 0;max-width: none;background: transparent;}
.doctor-short-frame .youtube-player > div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;}
.doctor-short-frame .youtube-player img{display: none;}
/* 播放鍵：內容頁另外載入的 new_css/video.css 把 .youtube-player .play 的背景換成 imgur 外連圖，該圖已失效會顯示破圖，這裡指回站內 play-button.png */
.doctor-short-frame .youtube-player .play{width: 64px;height: 64px;margin: -32px 0 0 -32px;background: url("/assets/images/play-button.png") no-repeat center center / contain;transition: transform .3s;}
.doctor-short-frame .youtube-player > div::after{content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 40%;background: linear-gradient(transparent, rgba(0,0,0,.35));pointer-events: none;}
.doctor-short-body{display: flex;flex-direction: column;flex: 1 1 auto;padding: 16px 20px 18px 20px;text-align: left;}
.doctor-short-title{margin: 0;padding: 0;color: #4d4d4d;font-size: 17px;font-weight: bold;line-height: 24px;height: 48px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
@media (min-width: 1080px){
    .doctor-short:hover .youtube-player .play{transform: scale(1.1);}
}
@media (max-width: 767px){
    .doctor-short-list{margin: 0;}
    .doctor-short-list > li{width: 100%;padding: 0;margin-bottom: 16px;}
    .doctor-short{border-radius: 14px;}
    .doctor-short-body{padding: 14px 16px 16px 16px;}
    .doctor-short-title{font-size: 16px;line-height: 23px;height: 46px;}
}

/* ============================================================
   編輯器內文（.services-edit > #course-content）：只改樣式、不動後台編輯器內容
   比照 breast-augmentation-introduction 的內文排版；四位醫師頁的結構一致：
   首圖 p[img] → 錨點 p[a#id] → 首段（<em>首字</em>）→ h2 ＋ p[img] ＋ ul ＋ p 重複；池醫師頁另有 h3
   lesson_content.html 的 .services-edit 加了 doctor-content class，以下規則只對醫師頁生效
   ============================================================ */

/* 拿掉舊的灰色粗框，內文直接貼齊內容欄 */
.services-edit.doctor-content{border: 0;padding: 0;margin-bottom: 0;}
/* aqxinz.css 把整個內文置中（!important），這裡改回靠左；aqxinz 的 span 12px 也還原 */
.doctor-content #course-content{text-align: left!important;color: #4d4d4d;}
.doctor-content #course-content span{font-size: inherit;}

/* 圖片：圓角、置中、不再有 aqxinz 的負邊距；首圖 banner 滿版 */
.doctor-content #course-content img{display: block;max-width: 100%;height: auto;margin: 0 auto;border-radius: 12px;}
.doctor-content #course-content > p:first-child img{width: 100%;border-radius: 16px;}
.doctor-content #course-content p img{margin: 4px auto 20px auto;}

/* 區段錨點的空段落不佔高度；錨點與 h2 捲動時避開固定表頭 */
.doctor-content #course-content p:has(> a[id]:only-child){margin: 0;height: 0;line-height: 0;overflow: hidden;}
.doctor-content #course-content a[id],
.doctor-content #course-content h2,
.doctor-content #course-content h3{scroll-margin-top: 100px;}

/* 段落 */
.doctor-content #course-content p{margin: 0 0 18px 0;color: #666666;font-size: 16px;line-height: 1.9;text-align: left;letter-spacing: .3px;}
/* 首段的 <em>首字</em>：放大的行內首字（不下沉、不跨行），與隆乳頁的 em 相同；其他 em 也套同一組 */
.doctor-content #course-content em{color: #8b776d;font-size: 1.6em;font-style: normal;font-weight: bold;line-height: 1;vertical-align: -2px;}
/* 強調字：淡米色底線標記，取代原本的橘色字 */
.doctor-content #course-content strong{padding: 0 2px;background: linear-gradient(transparent 58%, #ecd9c3 58%);color: #4a3b33;font-size: inherit;font-weight: bold;}
/* 連結：品牌棕色底線，hover 只變色不變淡 */
.doctor-content #course-content a{color: #8b776d;font-size: inherit;text-decoration: underline!important;text-underline-offset: 3px;transition: color .3s;}
.doctor-content #course-content a:hover{color: #b29d8a;opacity: 1;}

/* 標題：h2 左側色條＋米色底（aqxinz 的 padding 是 !important，這裡也要 !important 才蓋得掉） */
.doctor-content #course-content h2{position: relative;margin: 52px 0 22px 0;padding: 14px 20px 14px 24px!important;background: #faf6f1;border-left: 5px solid #b29d8a;border-radius: 0 12px 12px 0;color: #8b776d;font-size: 24px;font-weight: bold;line-height: 1.4;letter-spacing: 1px;text-align: left;}
.doctor-content #course-content h3{position: relative;margin: 36px 0 14px 0;padding: 0 0 12px 24px;border-bottom: 1px solid #e8dccd;color: #4d4d4d;font-size: 20px;font-weight: bold;line-height: 1.4;text-align: left;}
.doctor-content #course-content h3::before{content: "";position: absolute;left: 0;top: 8px;width: 12px;height: 12px;background: #cfbdaa;border-radius: 3px;}
.doctor-content #course-content h4{position: relative;margin: 26px 0 10px 0;padding: 0 0 0 16px;color: #6b5b52;font-size: 17px;font-weight: bold;line-height: 1.6;text-align: left;}
.doctor-content #course-content h4::before{content: "";position: absolute;left: 0;top: 10px;width: 7px;height: 7px;background: #cfbdaa;border-radius: 50%;}

/* 條列：米色圓角框、兩欄排版、圓點自訂（aqxinz 的 ul 是 inline-block 置中、disc 圓點，這裡整組改掉） */
.doctor-content #course-content ul,
.doctor-content #course-content ol{display: block;margin: 0 0 22px 0;padding: 18px 24px;background: #faf6f1;border-radius: 12px;text-align: left;}
.doctor-content #course-content ul{columns: 2;column-gap: 36px;}
.doctor-content #course-content ul li,
.doctor-content #course-content ol li{position: relative;margin: 0;padding: 4px 0 4px 20px;color: #4d4d4d;font-size: 15px;line-height: 1.8;break-inside: avoid;}
.doctor-content #course-content ul li{list-style: none;}
.doctor-content #course-content ul li::before{content: "";position: absolute;left: 2px;top: 14px;width: 7px;height: 7px;background: #b29d8a;border-radius: 50%;}
.doctor-content #course-content ol{padding-left: 44px;}
.doctor-content #course-content ol li{padding-left: 4px;list-style: decimal outside;}
.doctor-content #course-content ol li::marker{color: #b29d8a;font-weight: bold;}

/* 手機 */
@media (max-width: 767px){
    .doctor-content #course-content p{font-size: 15px;line-height: 1.85;}
    .doctor-content #course-content h2{margin: 36px 0 16px 0;padding: 10px 14px 10px 16px!important;border-left-width: 4px;border-radius: 0 10px 10px 0;font-size: 20px;}
    .doctor-content #course-content h3{margin: 28px 0 12px 0;padding: 0 0 10px 20px;font-size: 18px;}
    .doctor-content #course-content h3::before{top: 6px;width: 10px;height: 10px;}
    .doctor-content #course-content ul,
    .doctor-content #course-content ol{padding: 12px 16px;border-radius: 10px;}
    .doctor-content #course-content ul{columns: 1;}
    .doctor-content #course-content ol{padding-left: 36px;}
    .doctor-content #course-content ul li,
    .doctor-content #course-content ol li{font-size: 14px;}
    .doctor-content #course-content > p:first-child img{border-radius: 12px;}
}

/* ============================================================
   編輯器內「醫師擅長手術項目」服務圖卡（後台編輯器貼入的 .doctor-service-list 區塊）
   比照 breast-augmentation-introduction 的 breast-augmentation-service 圖卡，改成一排三張，圖片左上加服務分類膠囊
   這些規則都在 #course-content 底下，前綴比上面內文規則多一層 class，才能蓋掉內文的 a／img／p／h3 樣式
   ============================================================ */
.doctor-content #course-content .doctor-service-list{display: flex;flex-wrap: wrap;margin: 24px -12px 0 -12px;padding: 0;}
.doctor-content #course-content .doctor-service-card{position: relative;display: flex;flex-direction: column;flex: 0 0 calc(33.333% - 24px);width: calc(33.333% - 24px);box-sizing: border-box;margin: 0 12px 24px 12px;background: #faf6f1;border-radius: 16px;overflow: hidden;}
/* 圖片 3:2 裁切；蓋掉內文的 img 置中圓角與連結底線 */
.doctor-content #course-content .doctor-service-image{position: relative;display: block;padding-top: 62%;background: #f3e9df;overflow: hidden;line-height: 0;text-decoration: none!important;}
.doctor-content #course-content .doctor-service-image img{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;margin: 0;object-fit: cover;border-radius: 0;transition: transform .6s, opacity .4s;}
/* 服務分類膠囊：放在文字區最上方（標題之前），米色底棕字，與文章卡的分類膠囊同款 */
.doctor-content #course-content .doctor-service-cat{display: inline-block;align-self: flex-start;margin: 0 0 10px 0;padding: 0 10px;background: #f3e9df;border-radius: 20px;color: #8b776d;font-size: 12px;font-weight: bold;letter-spacing: .5px;line-height: 22px;text-decoration: none!important;transition: background-color .3s, color .3s;}
.doctor-content #course-content .doctor-service-body{display: flex;flex-direction: column;flex: 1 1 auto;padding: 20px 22px 22px 22px;}
/* 標題：蓋掉內文 h3 的底線與方塊標記 */
.doctor-content #course-content .doctor-service-title{margin: 0 0 10px 0;padding: 0;border: 0;color: #4d4d4d;font-size: 18px;font-weight: bold;line-height: 1.45;}
.doctor-content #course-content .doctor-service-title::before{display: none;}
.doctor-content #course-content .doctor-service-title a{color: #4d4d4d;font-size: inherit;text-decoration: none!important;transition: color .3s;}
/* 簡介三行截斷，卡片等高、連結貼底 */
.doctor-content #course-content .doctor-service-text{margin: 0 0 18px 0;color: #808080;font-size: 14px;line-height: 22px;height: 66px;letter-spacing: 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.doctor-content #course-content .doctor-service-link{display: inline-block;align-self: flex-start;margin-top: auto;padding-bottom: 3px;color: #8b776d;font-size: 14px;font-weight: bold;text-decoration: none!important;background: linear-gradient(#8b776d, #8b776d) no-repeat left bottom;background-size: 0 1px;transition: background-size .3s;}
.doctor-content #course-content .doctor-service-link::after{content: "\f105";font-family: 'FontAwesome';margin-left: 6px;font-weight: normal;}

@media (min-width: 1080px){
    /* 滑到整張卡：圖片放大微淡、標題變棕，其餘只變色 */
    .doctor-content #course-content .doctor-service-card:hover .doctor-service-image img{transform: scale(1.05);opacity: .88;}
    .doctor-content #course-content .doctor-service-card:hover .doctor-service-title a{color: #8b776d;}
    .doctor-content #course-content .doctor-service-cat:hover{background: #8b776d;color: #fff;opacity: 1;}
    .doctor-content #course-content .doctor-service-link:hover{background-size: 100% 1px;color: #8b776d;opacity: 1;}
    .doctor-content #course-content .doctor-service-image:hover,
    .doctor-content #course-content .doctor-service-title a:hover{opacity: 1;}
}
/* 平板兩欄、手機單欄 */
@media (max-width: 1023px){
    .doctor-content #course-content .doctor-service-card{flex-basis: calc(50% - 24px);width: calc(50% - 24px);}
}
@media (max-width: 767px){
    .doctor-content #course-content .doctor-service-list{margin: 16px -6px 0 -6px;}
    .doctor-content #course-content .doctor-service-card{flex-basis: calc(100% - 12px);width: calc(100% - 12px);margin: 0 6px 14px 6px;border-radius: 14px;}
    .doctor-content #course-content .doctor-service-body{padding: 16px 16px 18px 16px;}
    .doctor-content #course-content .doctor-service-text{height: auto;-webkit-line-clamp: unset;display: block;}
}

/* ---------- 短影音放在 #course-content 內：蓋掉內文的 ul 米色框／兩欄／圓點、h3 底線、a 底線 ---------- */
.doctor-content #course-content .doctor-short-list{display: flex;flex-wrap: wrap;margin: 24px -12px 0 -12px;padding: 0;background: none;border-radius: 0;columns: auto;column-gap: normal;}
.doctor-content #course-content .doctor-short-list > li{width: 33.333%;box-sizing: border-box;padding: 0 12px;margin: 0 0 24px 0;list-style: none;font-size: inherit;line-height: inherit;}
.doctor-content #course-content .doctor-short-list > li::before{display: none;}
.doctor-content #course-content .doctor-short-title{margin: 0;padding: 0;border: 0;color: #4d4d4d;font-size: 17px;font-weight: bold;line-height: 24px;height: 48px;text-align: left;}
.doctor-content #course-content .doctor-short-title::before{display: none;}
.doctor-content #course-content .doctor-short-frame .youtube-player img{display: none;}
@media (max-width: 767px){
    .doctor-content #course-content .doctor-short-list{margin: 16px 0 0 0;}
    .doctor-content #course-content .doctor-short-list > li{width: 100%;padding: 0;margin-bottom: 16px;}
    .doctor-content #course-content .doctor-short-title{font-size: 16px;line-height: 23px;height: 46px;}
}

/* ---------- 手術故事案例：兩欄摘要卡（放在 #course-content 內、擅長手術項目之後），文字擷取自隆乳頁案例、保留本人口吻，不另外連回隆乳頁 ---------- */
.doctor-content #course-content .doctor-case-list{display: flex;flex-wrap: wrap;margin: 24px -12px 0 -12px;padding: 0;background: none;border-radius: 0;columns: auto;column-gap: normal;}
.doctor-content #course-content .doctor-case-list > li{width: 50%;box-sizing: border-box;padding: 0 12px;margin: 0 0 24px 0;list-style: none;font-size: inherit;line-height: inherit;}
.doctor-content #course-content .doctor-case-list > li::before{display: none;}
.doctor-content #course-content .doctor-case{display: flex;flex-direction: column;height: 100%;background: #faf6f1;border-radius: 16px;overflow: hidden;}
/* 案例照桌機 1200×580（48.33%），手機換正方形版 */
.doctor-content #course-content .doctor-case-image{position: relative;display: block;padding-top: 48.33%;background: #f3e9df;overflow: hidden;line-height: 0;text-decoration: none!important;}
.doctor-content #course-content .doctor-case-image img{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;margin: 0;object-fit: cover;border-radius: 0;}
.doctor-content #course-content .doctor-case-body{display: flex;flex-direction: column;flex: 1 1 auto;padding: 20px 24px 24px 24px;}
/* 類型標籤：棕底白字膠囊 */
.doctor-content #course-content .doctor-case-tag{display: inline-block;align-self: flex-start;margin: 0 0 12px 0;padding: 0 12px;background: #8b776d;border-radius: 20px;color: #fff;font-size: 12px;font-weight: bold;letter-spacing: 1px;line-height: 24px;}
.doctor-content #course-content .doctor-case-title{margin: 0 0 10px 0;padding: 0;border: 0;color: #4d4d4d;font-size: 18px;font-weight: bold;line-height: 1.5;text-align: left;}
.doctor-content #course-content .doctor-case-title::before{display: none;}
.doctor-content #course-content .doctor-case-text{margin: 0 0 14px 0;color: #666666;font-size: 14px;line-height: 1.8;letter-spacing: .2px;}
/* 亮點：白底細框小膠囊 */
.doctor-content #course-content .doctor-case-points{margin: auto 0 0 0;padding-top: 4px;font-size: 0;}
.doctor-content #course-content .doctor-case-points span{display: inline-block;margin: 0 6px 6px 0;padding: 0 10px;background: #fff;border: 1px solid #e8dccd;border-radius: 20px;color: #8b776d;font-size: 12px;line-height: 24px;}
@media (max-width: 767px){
    .doctor-content #course-content .doctor-case-list{margin: 16px -6px 0 -6px;}
    .doctor-content #course-content .doctor-case-list > li{width: 100%;padding: 0 6px;margin-bottom: 14px;}
    .doctor-content #course-content .doctor-case{border-radius: 14px;}
    /* 手機版換 800×800 正方形案例照，圖上有標語，要完整顯示不裁切 */
    .doctor-content #course-content .doctor-case-image{padding-top: 100%;}
    .doctor-content #course-content .doctor-case-body{padding: 16px 16px 18px 16px;}
    .doctor-content #course-content .doctor-case-title{font-size: 16px;}
}

/* ---------- 預約 CTA（案例區塊之後）：比照隆乳頁 breast-augmentation-cta 的膠囊按鈕；在 #course-content 內要壓掉內文連結底線與 hover 變淡 ---------- */
.doctor-content #course-content .doctor-cta{margin: 8px 0 40px 0;text-align: center;}
.doctor-content #course-content .doctor-cta-link{display: inline-block;min-width: 240px;box-sizing: border-box;padding: 0 40px;background: #8b776d;border-radius: 50px;color: #fff;font-size: 16px;font-weight: bold;letter-spacing: 2px;line-height: 52px;text-align: center;text-decoration: none!important;transition: background-color .4s ease;}
.doctor-content #course-content .doctor-cta-link i{margin-left: 8px;font-size: 18px;vertical-align: -1px;}
/* pixy-style 全站 a:hover{opacity:.7!important} 會讓按鈕 hover 變半透明，這裡用 !important 壓回不透明，只靠底色變深 */
.doctor-content #course-content .doctor-cta-link,
.doctor-content #course-content .doctor-cta-link:hover{opacity: 1!important;}
.doctor-content #course-content .doctor-cta-link:hover{background-color: #6a584f;color: #fff;}
@media (max-width: 767px){
    .doctor-content #course-content .doctor-cta{margin: 4px 0 30px 0;}
    .doctor-content #course-content .doctor-cta-link{min-width: 0;width: 100%;padding: 0 20px;font-size: 15px;line-height: 48px;}
}

/* ---------- 線上預約表單＋聯絡資訊（接在編輯器內文之後）：比照 multi-service.css 的 multi-service-booking／form／contact ---------- */
.doctor-booking{margin: 48px 0 10px 0;padding: 40px 28px 16px 28px;background: #faf6f1;border-radius: 20px;}
.doctor-booking .doctor-section-title{scroll-margin-top: 100px;}
/* 預約引言：h2 與表單之間，置中、比內文小一階 */
.doctor-booking-note{max-width: 760px;margin: -12px auto 24px auto;padding: 0;color: #7d7d7d;font-size: 14px;line-height: 1.9;text-align: center;}
.doctor-booking-form{margin-bottom: 20px;}
.doctor-booking-form .no-mobile{padding-left: 2%;}
/* 1024 以上：預約人資訊欄位改兩欄格線（手機＋信箱、LINE＋預約項目並排），與隆乳頁相同；:has 包在 :where 裡歸零權重 */
@media (min-width: 1024px){
    .doctor-booking-form .formContainer .formText:where(:has(#email)){display: grid;grid-template-columns: 1fr 1fr;column-gap: 24px;grid-auto-flow: row dense;align-items: end;}
    .doctor-booking-form .formContainer .formText:where(:has(#email)) > *{grid-column: 1 / -1;min-width: 0;}
    .doctor-booking-form .formContainer .formText > .formGp.area-switch,
    .doctor-booking-form .formContainer .formText > .formGp:where(:has(#email)),
    .doctor-booking-form .formContainer .formText > .formGp:where(:has(#line_acc)),
    .doctor-booking-form .formContainer .formText > .formGp:where(:has(#select1)){grid-column: auto;}
    .doctor-booking-form .formContainer .select-item{width: 30%;}
    .doctor-booking-form .formContainer .code-item{width: 28%;}
    .doctor-booking-form .formContainer .mobile-item-other{width: 38%;}
    .doctor-booking-form .formContainer .area-panel-oversea .form-groups-select{width: 100%;}
    .doctor-booking-form .formContainer .area-panel-oversea .formGpinp{padding: 0 12px;}
}
/* 聯絡資訊：表單底下的 h3 區塊，六格（LINE／電話／FB／地址／時間／信箱） */
.doctor-booking-contact{margin-top: 24px;padding: 36px 20px 16px 20px;background: #fff7f0;border-radius: 12px;}
.doctor-booking-contact-title{margin: 0 0 24px 0;padding: 0;text-align: center;color: #8b776d;font-size: 20px;font-weight: bold;line-height: 1.4;letter-spacing: 1px;}
.doctor-booking-contact-list{display: flex;flex-wrap: wrap;margin: 0 -10px;padding: 0;list-style: none;}
.doctor-booking-contact-list > li{width: 33.33%;box-sizing: border-box;padding: 0 10px;margin-bottom: 20px;list-style: none;}
.doctor-booking-contact-item{position: relative;display: flex;align-items: center;height: 100%;min-height: 92px;box-sizing: border-box;padding: 18px 44px 18px 20px;background: #fff;border: 1px solid #f0e6dc;border-radius: 16px;color: #7d7d7d;font-size: 15px;line-height: 1.6;text-decoration: none !important;transition: background .3s, border-color .3s;}
.doctor-booking-contact-static{padding-right: 20px;}
.doctor-booking-contact-icon{flex: 0 0 46px;width: 46px;margin-right: 16px;line-height: 0;}
.doctor-booking-contact-icon img{width: 46px;vertical-align: middle;}
.doctor-booking-contact-note{display: inline-block;margin-left: 6px;color: #aaaaaa;font-size: 12px;font-weight: normal;letter-spacing: 0;vertical-align: 1px;}
.doctor-booking-icon-active{display: none;}
.doctor-booking-contact-body{flex: 1 1 auto;min-width: 0;word-break: break-word;}
.doctor-booking-contact-name{margin: 0;padding: 0;text-align: left;color: #8b776d;font-size: 17px;font-weight: bold;line-height: 1.5;}
.doctor-booking-contact-text{margin: 2px 0 0 0;padding: 0;color: #7d7d7d;font-size: 14px;line-height: 1.6;}
.doctor-booking-contact-arrow{position: absolute;right: 18px;top: 50%;margin-top: -12px;color: #cfbdaa;font-size: 22px;line-height: 24px;transition: color .3s;}
@media (min-width: 1080px){
    a.doctor-booking-contact-item:hover{background: #f3e9df;border-color: #f3e9df;opacity: 1!important;}
    a.doctor-booking-contact-item:hover .doctor-booking-icon-default{display: none;}
    a.doctor-booking-contact-item:hover .doctor-booking-icon-active{display: inline-block;}
    a.doctor-booking-contact-item:hover .doctor-booking-contact-arrow{color: #8b776d;}
}
@media (max-width: 1023px){
    .doctor-booking-contact-list > li{width: 50%;}
}
@media (max-width: 767px){
    .doctor-booking{margin-top: 30px;padding: 28px 14px 8px 14px;border-radius: 14px;}
    .doctor-booking-note{margin: -6px 0 18px 0;font-size: 13px;}
    .doctor-booking-contact{margin-top: 30px;padding: 30px 12px 8px 12px;}
    .doctor-booking-contact-title{margin-bottom: 18px;font-size: 17px;}
    .doctor-booking-contact-list{margin: 0;}
    .doctor-booking-contact-list > li{width: 100%;padding: 0;margin-bottom: 12px;}
    .doctor-booking-contact-item{min-height: 0;padding: 14px 40px 14px 16px;border-radius: 12px;}
    .doctor-booking-contact-static{padding-right: 16px;}
    .doctor-booking-contact-icon{flex-basis: 36px;width: 36px;margin-right: 12px;}
    .doctor-booking-contact-icon img{width: 36px;}
    .doctor-booking-contact-note{margin-left: 4px;font-size: 11px;}
    .doctor-booking-contact-name{font-size: 16px;}
    .doctor-booking-contact-text{font-size: 13px;}
    .doctor-booking-contact-arrow{right: 14px;font-size: 20px;}
}