@charset "utf-8";
/* ==========================================================================
   維港口腔 · 收費問答（共用組件 v1.0  2026-10-30）
   上傳位置：/skin/css/vkp-faq.css
   用法：<section class="vkp-faq vkp-faq--home|--ppjj|--ystd|--jyzy">
   同一套骨架 + 四套頁面變體，顏色／字級／容器寬度跟隨所在頁面既有設計。
   純 CSS 折疊（<details>），不依賴 jQuery，禁用 JS 亦可完整閱讀。
   ========================================================================== */

/* ---------- 1. 骨架（四頁共用） ---------- */
.vkp-faq {
  --vp-accent: #4688af;
  --vp-q: #1a1a1a;
  --vp-a: #5b6770;
  --vp-line: #e3eef6;
  --vp-num: #a9c6d8;
  box-sizing: border-box;
  color: var(--vp-q);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.vkp-faq__inner {
  margin: 0 auto;
}

.vkp-faq__lead {
  color: #8ba3b4;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}

.vkp-faq__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vkp-faq details {
  margin: 0;
  padding: 0;
}

.vkp-faq summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.vkp-faq summary::-webkit-details-marker {
  display: none;
}

.vkp-faq summary::marker {
  content: "";
}

.vkp-faq summary:focus-visible {
  outline: 2px solid var(--vp-accent);
  outline-offset: 3px;
}

.vkp-faq__num {
  flex: 0 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.vkp-faq__q {
  flex: 1 1 auto;
  display: block;
  transition: color 0.3s ease;
}

/* 加號 → 減號（open 時豎線收起） */
.vkp-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: auto;
  color: var(--vp-accent);
  transition: color 0.3s ease;
}

.vkp-faq__icon::before,
.vkp-faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.34s ease;
}

.vkp-faq__icon::before {
  width: 15px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.vkp-faq__icon::after {
  width: 2px;
  height: 15px;
  transform: translate(-50%, -50%);
}

.vkp-faq details[open] .vkp-faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

/* 答案展開動畫（0fr → 1fr，不支援時自動全展開，內容不會被截斷） */
.vkp-faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.vkp-faq details[open] .vkp-faq__body {
  grid-template-rows: 1fr;
}

.vkp-faq__body > div {
  overflow: hidden;
}

.vkp-faq__body p {
  margin: 0;
}

.vkp-faq__body p + p {
  margin-top: 0.6em;
}

.vkp-faq__foot {
  color: #93a7b5;
  font-size: 15px;
  line-height: 1.8;
}

.vkp-faq__foot a {
  color: var(--vp-accent);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  transition: opacity 0.25s ease;
}

.vkp-faq__foot a:hover {
  opacity: 0.72;
}

/* ==========================================================================
   2. 變體 A：維港首頁（.column 標題 + 細線列表，60% 窄欄，主色 #4688af / #008fe2）
   ========================================================================== */
.vkp-faq--home {
  margin-top: 90px;
  padding-bottom: 20px;
  background: #fff;
  --vp-accent: #008fe2;
}

.vkp-faq--home .vkp-faq__inner {
  width: 60%;
  max-width: 1120px;
}

.vkp-faq--home .vkp-faq__lead {
  margin-top: 16px;
  padding: 0 6%;
}

.vkp-faq--home .vkp-faq__list {
  margin-top: 36px;
  border-top: 1px solid var(--vp-line);
}

.vkp-faq--home details {
  border-bottom: 1px solid var(--vp-line);
  transition: background-color 0.35s ease;
}

.vkp-faq--home details[open] {
  background: #f6fbfe;
}

.vkp-faq--home summary {
  padding: 24px 4px;
}

.vkp-faq--home .vkp-faq__num {
  width: 34px;
  font-size: 13px;
  color: var(--vp-num);
  padding-top: 5px;
}

.vkp-faq--home .vkp-faq__q {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  color: #1a1a1a;
}

.vkp-faq--home details[open] .vkp-faq__q,
.vkp-faq--home summary:hover .vkp-faq__q {
  color: var(--vp-accent);
}

.vkp-faq--home .vkp-faq__icon {
  margin-top: 3px;
}

.vkp-faq--home .vkp-faq__body p {
  padding: 0 46px 26px 54px;
  font-size: 17px;
  line-height: 1.95;
  color: var(--vp-a);
  text-align: justify;
  text-wrap: pretty;
}

.vkp-faq--home .vkp-faq__foot {
  margin-top: 28px;
  text-align: right;
}

/* ==========================================================================
   3. 變體 B：品牌簡介（.title 標題 + 編排版式，75% 寬欄，主色 #10aaf0）
   ========================================================================== */
.vkp-faq--ppjj {
  margin-top: 5%;
  --vp-accent: #10aaf0;
}

.vkp-faq--ppjj .vkp-faq__inner {
  width: 75%;
  max-width: 1320px;
}

.vkp-faq--ppjj .vkp-faq__lead {
  margin-top: 1.6%;
  padding: 0 8%;
  font-size: clamp(15px, 1.05vw, 19px);
  color: #666;
}

.vkp-faq--ppjj .vkp-faq__list {
  margin-top: 3.2%;
}

.vkp-faq--ppjj details {
  border-bottom: 1px solid #edf2f5;
  transition: background-color 0.35s ease;
}

.vkp-faq--ppjj details:first-of-type {
  border-top: 1px solid #edf2f5;
}

.vkp-faq--ppjj summary {
  padding: 2.1% 3.2%;
  align-items: center;
}

.vkp-faq--ppjj .vkp-faq__num {
  width: 3.4vw;
  max-width: 62px;
  font-size: clamp(20px, 1.72vw, 32px);
  font-weight: 700;
  color: #b9e2f5;
  line-height: 1;
}

.vkp-faq--ppjj .vkp-faq__q {
  font-size: clamp(16px, 1.24vw, 23px);
  font-weight: 600;
  line-height: 1.65;
  color: #1a1a1a;
  padding-right: 2%;
}

.vkp-faq--ppjj details[open] {
  background: #f5fbfe;
  box-shadow: inset 3px 0 0 var(--vp-accent);
}

.vkp-faq--ppjj details[open] .vkp-faq__q,
.vkp-faq--ppjj summary:hover .vkp-faq__q {
  color: #0b93d2;
}

.vkp-faq--ppjj details[open] .vkp-faq__num {
  color: var(--vp-accent);
}

.vkp-faq--ppjj .vkp-faq__body p {
  padding: 0 3.2% 2.2% calc(3.2% + 3.4vw + 16px);
  font-size: clamp(14px, 1.05vw, 19px);
  line-height: 1.9;
  color: #666;
  text-indent: 2em;
  text-align: justify;
}

.vkp-faq--ppjj .vkp-faq__foot {
  margin-top: 2.4%;
  text-align: center;
  font-size: clamp(14px, 0.98vw, 17px);
}

/* ==========================================================================
   4. 變體 C：醫生團隊（卡片式，1200px 對齊 .doctor_wrap，主色 #0A6A9B）
   ========================================================================== */
.vkp-faq--ystd {
  --vp-accent: #0a6a9b;
  margin: 4% auto 4%;
}

.vkp-faq--ystd .vkp-faq__inner {
  width: 1200px;
  max-width: 96%;
}

.vkp-faq--ystd .vkp-faq__head {
  text-align: center;
  margin-bottom: 34px;
}

.vkp-faq--ystd .vkp-faq__head h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #0a6a9b;
  letter-spacing: 0.02em;
}

.vkp-faq--ystd .vkp-faq__head h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: #0a6a9b;
}

.vkp-faq--ystd .vkp-faq__head p {
  margin: 16px 0 0;
  font-size: 15px;
  color: #7b8b95;
}

.vkp-faq--ystd details {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px 3px #f0f6f9;
  margin-bottom: 14px;
  transition: box-shadow 0.3s ease;
}

.vkp-faq--ystd details:last-of-type {
  margin-bottom: 0;
}

.vkp-faq--ystd details[open] {
  box-shadow: 0 8px 22px rgba(10, 106, 155, 0.14);
}

.vkp-faq--ystd summary {
  padding: 22px 28px;
  align-items: center;
  gap: 14px;
}

.vkp-faq--ystd .vkp-faq__num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef7fb;
  color: #0a6a9b;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.vkp-faq--ystd details[open] .vkp-faq__num {
  background: #0a6a9b;
  color: #fff;
}

.vkp-faq--ystd .vkp-faq__q {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: #0a6a9b;
}

.vkp-faq--ystd summary:hover .vkp-faq__q {
  color: #0d8dcb;
}

.vkp-faq--ystd .vkp-faq__body p {
  padding: 0 28px 24px 72px;
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  text-align: justify;
}

.vkp-faq--ystd .vkp-faq__foot {
  margin-top: 24px;
  text-align: center;
  font-size: 15px;
}

/* ==========================================================================
   5. 變體 D：就醫指引（圓角大卡，65% 對齊 main，主色 #2478A8 / #4688AF）
   ========================================================================== */
.vkp-faq--jyzy {
  --vp-accent: #2478a8;
  padding: 56px 0 72px;
}

.vkp-faq--jyzy .vkp-faq__inner {
  width: 65%;
}

.vkp-faq--jyzy .vkp-faq__head {
  text-align: center;
}

.vkp-faq--jyzy .vkp-faq__head h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: #4688af;
}

.vkp-faq--jyzy .vkp-faq__head p {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: bold;
  color: #2e414d;
}

.vkp-faq--jyzy .vkp-faq__card {
  margin-top: 30px;
  padding: 14px 44px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 30px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.vkp-faq--jyzy details {
  border-bottom: 1px solid #f0f3f5;
}

.vkp-faq--jyzy details:last-of-type {
  border-bottom: 0;
}

.vkp-faq--jyzy summary {
  padding: 22px 0;
  align-items: center;
}

.vkp-faq--jyzy .vkp-faq__num {
  width: 34px;
  font-size: 14px;
  color: #a9c3d4;
}

.vkp-faq--jyzy .vkp-faq__q {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: #2478a8;
}

.vkp-faq--jyzy details[open] .vkp-faq__q,
.vkp-faq--jyzy summary:hover .vkp-faq__q {
  color: #0c699f;
}

.vkp-faq--jyzy .vkp-faq__body p {
  padding: 0 30px 24px 50px;
  font-size: 16px;
  line-height: 1.9;
  color: #2e414d;
  text-align: justify;
}

.vkp-faq--jyzy .vkp-faq__foot {
  margin-top: 26px;
  text-align: center;
}

/* ==========================================================================
   6. 響應式（對齊各頁既有斷點 1400 / 980 / 768 / 500）
   ========================================================================== */
@media screen and (max-width: 1400px) {
  .vkp-faq--home .vkp-faq__inner {
    width: 66%;
  }

  .vkp-faq--home .vkp-faq__q {
    font-size: 19px;
  }

  .vkp-faq--ppjj .vkp-faq__inner {
    width: 84%;
  }

  .vkp-faq--ystd .vkp-faq__inner {
    width: 980px;
  }

  .vkp-faq--ystd .vkp-faq__q {
    font-size: 17px;
  }

  .vkp-faq--jyzy .vkp-faq__inner {
    width: 77%;
  }

  .vkp-faq--jyzy .vkp-faq__head h3 {
    font-size: 26px;
  }
}

@media screen and (max-width: 980px) {
  .vkp-faq--home .vkp-faq__inner {
    width: 74%;
  }

  .vkp-faq--home .vkp-faq__body p {
    font-size: 16px;
  }

  .vkp-faq--ppjj .vkp-faq__inner {
    width: 88%;
  }

  .vkp-faq--ystd .vkp-faq__inner {
    width: 768px;
  }

  .vkp-faq--jyzy .vkp-faq__inner {
    width: 86%;
  }
}

@media screen and (max-width: 768px) {
  .vkp-faq--home {
    margin-top: 52px;
  }

  .vkp-faq--home .vkp-faq__inner {
    width: 92%;
  }

  .vkp-faq--home .vkp-faq__lead {
    padding: 0;
    font-size: 15px;
  }

  .vkp-faq--home .vkp-faq__list {
    margin-top: 24px;
  }

  .vkp-faq--home summary {
    padding: 18px 2px;
    gap: 10px;
  }

  .vkp-faq--home .vkp-faq__num {
    width: 26px;
    font-size: 12px;
  }

  .vkp-faq--home .vkp-faq__q {
    font-size: 17px;
  }

  .vkp-faq--home .vkp-faq__body p {
    padding: 0 0 20px 36px;
    font-size: 15px;
    line-height: 1.85;
  }

  .vkp-faq--ppjj {
    margin-top: 8%;
  }

  .vkp-faq--ppjj .vkp-faq__inner {
    width: 92%;
  }

  .vkp-faq--ppjj summary {
    padding: 4% 3.5%;
    gap: 12px;
  }

  .vkp-faq--ppjj .vkp-faq__num {
    width: 9%;
    max-width: 46px;
    font-size: 20px;
  }

  .vkp-faq--ppjj .vkp-faq__q {
    font-size: 16px;
    padding-right: 0;
  }

  .vkp-faq--ppjj .vkp-faq__body p {
    padding: 0 3.5% 4% calc(3.5% + 9% + 12px);
    font-size: 14px;
    line-height: 1.85;
    text-indent: 0;
  }

  .vkp-faq--ystd .vkp-faq__inner {
    width: 92%;
    max-width: 92%;
  }

  .vkp-faq--ystd .vkp-faq__head h3 {
    font-size: 22px;
  }

  .vkp-faq--ystd summary {
    padding: 18px 18px;
    gap: 12px;
  }

  .vkp-faq--ystd .vkp-faq__num {
    width: 26px;
    height: 26px;
    font-size: 12px;
    line-height: 26px;
  }

  .vkp-faq--ystd .vkp-faq__q {
    font-size: 16px;
  }

  .vkp-faq--ystd .vkp-faq__body p {
    padding: 0 18px 20px 52px;
    font-size: 15px;
  }

  .vkp-faq--jyzy {
    padding: 40px 0 48px;
  }

  .vkp-faq--jyzy .vkp-faq__inner {
    width: 94%;
  }

  .vkp-faq--jyzy .vkp-faq__head h3 {
    font-size: 24px;
  }

  .vkp-faq--jyzy .vkp-faq__card {
    margin-top: 22px;
    padding: 6px 22px;
    border-radius: 22px;
  }

  .vkp-faq--jyzy summary {
    padding: 18px 0;
    gap: 10px;
  }

  .vkp-faq--jyzy .vkp-faq__num {
    width: 26px;
    font-size: 12px;
  }

  .vkp-faq--jyzy .vkp-faq__q {
    font-size: 16px;
  }

  .vkp-faq--jyzy .vkp-faq__body p {
    padding: 0 0 20px 36px;
    font-size: 15px;
  }
}

@media screen and (max-width: 500px) {
  .vkp-faq--home .vkp-faq__inner {
    width: 90%;
  }

  .vkp-faq--home .vkp-faq__q {
    font-size: 16px;
  }

  .vkp-faq--home .vkp-faq__icon,
  .vkp-faq--ppjj .vkp-faq__icon,
  .vkp-faq--ystd .vkp-faq__icon,
  .vkp-faq--jyzy .vkp-faq__icon {
    width: 18px;
    height: 18px;
  }

  .vkp-faq--home .vkp-faq__icon::before,
  .vkp-faq--ppjj .vkp-faq__icon::before,
  .vkp-faq--ystd .vkp-faq__icon::before,
  .vkp-faq--jyzy .vkp-faq__icon::before {
    width: 12px;
  }

  .vkp-faq--home .vkp-faq__icon::after,
  .vkp-faq--ppjj .vkp-faq__icon::after,
  .vkp-faq--ystd .vkp-faq__icon::after,
  .vkp-faq--jyzy .vkp-faq__icon::after {
    height: 12px;
  }

  .vkp-faq--ppjj .vkp-faq__q,
  .vkp-faq--ystd .vkp-faq__q,
  .vkp-faq--jyzy .vkp-faq__q {
    font-size: 15px;
  }

  .vkp-faq--ppjj .vkp-faq__body p,
  .vkp-faq--ystd .vkp-faq__body p,
  .vkp-faq--jyzy .vkp-faq__body p {
    font-size: 14px;
  }

  .vkp-faq--ystd summary {
    padding: 16px 14px;
  }

  .vkp-faq--ystd .vkp-faq__body p {
    padding: 0 14px 18px 52px;
  }

  .vkp-faq--jyzy .vkp-faq__card {
    padding: 4px 16px;
    border-radius: 18px;
  }

  .vkp-faq__foot {
    font-size: 13px;
  }
}