@charset "utf-8";
/* ==========================================================================
   dz-faq  |  dentalzh.com 五頁「常見問題」區塊
   適用頁面
     1. 首頁         /          -> .dz-faq--home
     2. 醫院簡介     /yyjj/     -> .dz-faq--yyjj
     3. 醫生介紹     /ysjs/     -> .dz-faq--ysjs
     4. 收費標準     /sfbz/     -> .dz-faq--sfbz
     5. 就醫指引     /jyzy/     -> .dz-faq--jyzy

   約定
     - 底座樣式統一，各頁僅在標題、容器、描邊上向既有版式靠攏。
     - 交互用原生 <details>/<summary>，不依賴 JS；腳本失效時內容照樣可見。
     - 標題層級：區塊 h2 + 每條問題 h3（問題本體是標題，不是按鈕文案）。
   ========================================================================== */

.dz-faq,
.dz-faq *,
.dz-faq *::before,
.dz-faq *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.dz-faq {
    width: 100%;
    clear: both;
    padding: 40px 0 46px;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.dz-faq .dz-faq-in {
    width: 94%;
    max-width: 1020px;
    margin: 0 auto;
}

/* ---------- 區塊標題 ---------- */
.dz-faq .dz-faq-title {
    margin: 0;
    font-family: Tahoma, Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
}

.dz-faq .dz-faq-title .dz-faq-en {
    margin-left: 4px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .5px;
    color: #9a9a9a;
}

/* ---------- 列表與條目 ---------- */
.dz-faq .dz-faq-list {
    margin: 14px 0 0;
    padding: 0;
}

.dz-faq .dz-faq-item {
    border-bottom: 1px solid #ececec;
}

/*.dz-faq .dz-faq-item:last-child {*/
/*    border-bottom: 0;*/
/*}*/

.dz-faq .dz-faq-q {
    position: relative;
    display: block;
    padding: 16px 36px 16px 0;
    list-style: none;
    cursor: pointer;
}

.dz-faq .dz-faq-q::-webkit-details-marker {
    display: none;
}

.dz-faq .dz-faq-q::marker {
    content: "";
}

.dz-faq .dz-faq-h {
    margin: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    color: #333;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
}

.dz-faq .dz-faq-q:hover .dz-faq-h {
    color: #00a2ea;
}

/* 展開指示箭頭（純 CSS，不引用圖片） */
.dz-faq .dz-faq-ic {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border-right: 2px solid #b9b9b9;
    border-bottom: 2px solid #b9b9b9;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: -webkit-transform .3s ease, border-color .2s ease;
    transition: transform .3s ease, border-color .2s ease;
}

.dz-faq .dz-faq-item[open] .dz-faq-ic {
    border-color: #336fcc;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

/* ---------- 答案 ---------- */
.dz-faq .dz-faq-a {
    padding: 0 40px 18px 0;
    font-size: 15px;
    line-height: 1.9;
    color: #666;
}

.dz-faq .dz-faq-a p {
    margin: 0 0 8px;
}

.dz-faq .dz-faq-a p:last-child {
    margin-bottom: 0;
}

/* 聯絡方式清單（就醫指引第 4 題） */
.dz-faq .dz-faq-tel {
    margin: 6px 0 0;
    padding: 0;
}

.dz-faq .dz-faq-tel li {
    list-style: none;
    padding: 2px 0;
}

.dz-faq .dz-faq-tel a {
    color: #336fcc;
    text-decoration: none;
}

.dz-faq .dz-faq-tel a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   1. 首頁 —— 對齊 .in_h1「醫院簡介 / Hospital Introduction」的左標題節奏
   ========================================================================== */
.dz-faq--home {
    padding: 34px 0 40px;
}

.dz-faq--home .dz-faq-title {
    padding-top: 20px;
    font-size: 20px;
}

.dz-faq--home .dz-faq-title .dz-faq-en::before {
    content: "/ ";
}

.dz-faq--home .dz-faq-item {
    border-bottom-color: #ededed;
}

/* ==========================================================================
   2. 醫院簡介 —— 對齊 h1 + .line（50px 寬、2px 深色下劃線）
   ========================================================================== */
.dz-faq--yyjj .dz-faq-title {
    font-size: 22px;
}

.dz-faq--yyjj .dz-faq-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 0;
    margin-top: 10px;
    border-bottom: 2px solid #333;
}

.dz-faq--yyjj .dz-faq-title .dz-faq-en {
    display: none;
}

/* ==========================================================================
   3. 醫生介紹 —— 對齊 .ysjs 卡片（細分割線、置中姓名、#7c7c7c 灰文）
   ========================================================================== */
.dz-faq--ysjs .dz-faq-in {
    max-width: 1020px;
}

.dz-faq--ysjs .dz-faq-item {
    border-bottom-color: #dedede;
}

.dz-faq--ysjs .dz-faq-h {
    font-size: 16.5px;
}

.dz-faq--ysjs .dz-faq-a {
    color: #7c7c7c;
}

/* ==========================================================================
   4. 收費標準 —— 對齊價目表（1px 淺灰描邊、淺藍表頭、#0063B7 標題）
   ========================================================================== */
.dz-faq--sfbz {
    padding: 26px 0 44px;
}

/* 本區塊位於 <main>（價目表版心）之內，直接沿用其寬度 */
.dz-faq--sfbz .dz-faq-in {
    width: 100%;
    max-width: none;
}

.dz-faq--sfbz .dz-faq-title {
    margin: 0;
    padding: 13px 16px;
    background: #eef4fa;
    border: 1px solid #000;
    border-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #0063b7;
    text-align: center;
}

.dz-faq--sfbz .dz-faq-title .dz-faq-en {
    display: none;
}

.dz-faq--sfbz .dz-faq-list {
    margin: 0;
    border: 1px solid #000;
    border-bottom: 0;
}

.dz-faq--sfbz .dz-faq-item {
    padding: 0 18px;
    border-bottom: 1px solid #000;
}

.dz-faq--sfbz .dz-faq-a {
    padding-right: 36px;
    color: #4a4a4a;
}

/* ==========================================================================
   5. 就醫指引 —— 對齊 .guide-part（50%/720px 版心、#B4C0C6 灰藍條頭與描邊）
   ========================================================================== */
.dz-faq--jyzy {
    padding: 0 0 44px;
}

.dz-faq--jyzy .dz-faq-in {
    width: 50%;
    max-width: 720px;
}

.dz-faq--jyzy .dz-faq-title {
    margin: 0;
    padding: 7px 0;
    background: #b4c0c6;
    border: 1px solid #b4c0c6;
    border-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #22313a;
    text-align: center;
}

.dz-faq--jyzy .dz-faq-title .dz-faq-en {
    display: none;
}

.dz-faq--jyzy .dz-faq-list {
    margin: 0;
    padding: 0 3%;
    border: 1px solid #b4c0c6;
}

.dz-faq--jyzy .dz-faq-q {
    padding: 15px 32px 15px 0;
}

.dz-faq--jyzy .dz-faq-a {
    padding: 0 10px 16px 0;
    color: #666;
}

/* ==========================================================================
   響應式
   ========================================================================== */
@media screen and (max-width: 1200px) {
    .dz-faq .dz-faq-in {
        max-width: none;
    }
}

@media screen and (max-width: 768px) {
    .dz-faq {
        padding: 26px 0 32px;
    }

    .dz-faq .dz-faq-in,
    .dz-faq--jyzy .dz-faq-in {
        width: 94%;
        max-width: none;
    }

    .dz-faq .dz-faq-title,
    .dz-faq--home .dz-faq-title,
    .dz-faq--yyjj .dz-faq-title {
        font-size: 18px;
    }

    .dz-faq .dz-faq-h {
        font-size: 15.5px;
        line-height: 1.6;
    }

    .dz-faq .dz-faq-q {
        padding: 14px 30px 14px 0;
    }

    .dz-faq .dz-faq-a {
        padding: 0 8px 15px 0;
        font-size: 14px;
        line-height: 1.8;
    }

    .dz-faq--sfbz .dz-faq-title {
        padding: 11px 12px;
        font-size: 16px;
        letter-spacing: 1px;
    }

    .dz-faq--sfbz .dz-faq-item {
        padding: 0 12px;
    }

    .dz-faq--jyzy .dz-faq-title {
        font-size: 16px;
    }
}

@media screen and (max-width: 425px) {
    .dz-faq .dz-faq-title {
        font-size: 16px;
    }

    .dz-faq .dz-faq-h {
        font-size: 15px;
    }
}