﻿/* ============================================================
   faq-v2.css — 購物 Q&A faq.aspx 新版套版專用
   - 對應 demo\faq_demo.html(2026-05-19 定案)
   - 全部 class 加 iv2- 前綴,scope 在 .iv2-root 內
   - 不動 Bootstrap reset / .container / .row,reset 一律 scope 在 .iv2-root
   - 字體統一 Noto Sans Traditional Chinese(同 feature-v2 / plan-v2)
   - 中文文案全形標點;CSS 內一律半形
   - RWD 斷點:960(sidebar 改頂部橫向 chip)/ 800(contact 單欄)/ 768 / 600 / 380
   ============================================================ */

.iv2-root {
  --iv2-brand-navy: #0a1530;
  --iv2-brand-navy-mid: #1a2a52;
  --iv2-primary: #5645d4;
  --iv2-primary-pressed: #4534b3;
  --iv2-primary-deep: #3a2a99;
  --iv2-primary-soft: #ece9fb;
  --iv2-accent-red: #ff385c;
  --iv2-accent-amber: #f5d75e;
  --iv2-success: #1aae39;
  --iv2-warning: #dd5b00;
  --iv2-canvas: #ffffff;
  --iv2-surface: #f6f5f4;
  --iv2-surface-soft: #fafaf9;
  --iv2-hairline: #e5e3df;
  --iv2-hairline-soft: #ede9e4;
  --iv2-hairline-strong: #c8c4be;
  --iv2-ink: #1a1a1a;
  --iv2-charcoal: #37352f;
  --iv2-slate: #5d5b54;
  --iv2-muted: #bbb8b1;
  --iv2-tint-peach: #ffe8d4;
  --iv2-tint-mint: #d9f3e1;
  --iv2-tint-lavender: #e6e0f5;
  --iv2-tint-sky: #dcecfa;
  --iv2-tint-yellow: #fef7d6;
  --iv2-r-sm: 10px;
  --iv2-r-md: 14px;
  --iv2-r-lg: 20px;
  --iv2-r-pill: 999px;
  --iv2-s-2: 8px;
  --iv2-s-3: 12px;
  --iv2-s-4: 16px;
  --iv2-s-5: 24px;
  --iv2-s-6: 32px;
  --iv2-s-7: 48px;
  --iv2-s-8: 64px;
  --iv2-s-9: 96px;
  /* v2.11: 陰影 token 微提升,全公開頁一致,卡片更有浮起深度感 */
  --iv2-shadow-sm: 0 2px 5px rgba(15,23,48,0.07);
  --iv2-shadow-md: 0 6px 16px rgba(15,23,48,0.10);
  --iv2-shadow-lg: 0 16px 40px rgba(15,23,48,0.15);
  --iv2-shadow-xl: 0 24px 60px rgba(15,23,48,0.18);
  --iv2-font: 'Noto Sans Traditional Chinese', 'Noto Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', PingFangTC, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--iv2-font);
  font-size: 17px;
  color: var(--iv2-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faq.aspx 本頁:body / nav / footer 一併套字體(同 feature-v2 / plan-v2 規則) */
body,
body button,
body input,
body select,
body textarea {
  font-family: 'Noto Sans Traditional Chinese', 'Noto Sans TC', 'Noto Sans CJK TC', 'Microsoft JhengHei', PingFangTC, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 防止頁面橫向溢出。桌機只鎖 html(不鎖 body)以避免破壞 sidebar 的 position: sticky */
html { overflow-x: hidden; }
/* 手機 / 平板(< 960px sidebar 已非 sticky)額外鎖 body,確保長字串 / email 不會橫向溢出 */
@media (max-width: 960px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}

/* reset 一律 scope 在 .iv2-root 內,不汙染 main.master nav / footer */
.iv2-root *,
.iv2-root *::before,
.iv2-root *::after { box-sizing: border-box; }
.iv2-root img,
.iv2-root svg { display: block; max-width: 100%; }
.iv2-root a { color: inherit; text-decoration: none; }
.iv2-root ul { padding: 0; margin: 0; list-style: none; }
.iv2-root h1,
.iv2-root h2,
.iv2-root h3,
.iv2-root h4,
.iv2-root p { margin: 0; }
.iv2-root button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.iv2-root input,
.iv2-root select { font: inherit; }

/* ============ 容器 / 共用 ============ */
/* 寬度占比:電腦 80% / 平板 90% / 手機 100% */
.iv2-wrap { width: 80%; max-width: none; margin-inline: auto; padding-inline: var(--iv2-s-5); }
@media (max-width: 1024px) { .iv2-wrap { width: 90%; } }
@media (max-width: 600px) { .iv2-wrap { width: 100%; padding-inline: 14px; } }

.iv2-t-eyebrow { font-size: 0.85em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--iv2-primary); }
.iv2-t-h1 { font-size: clamp(28px, 18px + 1.8vw, 40px); font-weight: 700; line-height: 1.2; color: var(--iv2-ink); }
.iv2-t-h2 { font-size: clamp(22px, 14px + 1.2vw, 28px); font-weight: 700; line-height: 1.3; color: var(--iv2-ink); }
.iv2-t-lead { font-size: 1.05em; line-height: 1.65; color: var(--iv2-slate); }
@media (max-width: 600px) {
  .iv2-root { font-size: 16px; }
  .iv2-t-lead { font-size: 1em; }
}

.iv2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--iv2-r-pill); font-weight: 600; font-size: 0.95em; transition: all .15s; white-space: nowrap; border: none; cursor: pointer; font-family: inherit; }
.iv2-btn-primary { background: var(--iv2-primary); color: #fff; }
.iv2-btn-primary:hover { background: var(--iv2-primary-pressed); color: #fff; }
.iv2-btn-ghost { background: var(--iv2-surface); color: var(--iv2-charcoal); border: 1px solid var(--iv2-hairline); }
.iv2-btn-ghost:hover { background: var(--iv2-surface-soft); border-color: var(--iv2-primary); color: var(--iv2-primary); }
.iv2-btn-sm { height: 36px; padding: 0 16px; font-size: 0.85em; }

/* ============ Hero(使用者要求 #1:英文標題與背景圖案皆置中)============ */
.iv2-faq-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(at 18% 20%, rgba(86,69,212,0.16) 0%, transparent 55%),
    radial-gradient(at 82% 30%, rgba(42,157,153,0.12) 0%, transparent 50%),
    linear-gradient(180deg, var(--iv2-surface-soft) 0%, var(--iv2-canvas) 100%);
  border-bottom: 1px solid var(--iv2-hairline-soft);
  padding-block: clamp(56px, 7vw, 96px);
}
/* dot-grid:底圖以 center center 對齊,mask 同樣 50% 50% — 圖案完全置中 */
.iv2-faq-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,21,48,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,21,48,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
}
.iv2-faq-hero-inner {
  position: relative; z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.iv2-faq-hero .iv2-crumb { color: var(--iv2-charcoal); font-size: 1em; font-weight: 600; }
.iv2-faq-hero .iv2-crumb a:hover { color: var(--iv2-primary); }
.iv2-faq-hero .iv2-crumb .iv2-sep { margin: 0 8px; color: var(--iv2-muted); }

/* 英文標題 — 置中 pill 樣式(eyebrow) */
.iv2-faq-hero .iv2-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--iv2-s-4);
  padding: 6px 16px;
  background: var(--iv2-primary-soft);
  border: 1px solid rgba(86,69,212,0.18);
  color: var(--iv2-primary-deep);
  border-radius: var(--iv2-r-pill);
  font-size: 0.78em; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.iv2-faq-hero .iv2-hero-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--iv2-primary);
}
.iv2-faq-hero h1 {
  font-size: clamp(32px, 19.2px + 2.6vw, 52px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.18;
  margin-top: var(--iv2-s-3); color: var(--iv2-ink);
}
.iv2-faq-hero h1 .iv2-em { color: var(--iv2-primary); }
.iv2-faq-hero .iv2-lead {
  color: var(--iv2-charcoal);
  font-size: 1.0625em; line-height: 1.7;
  margin-top: var(--iv2-s-4);
  max-width: 600px; margin-inline: auto;
}

.iv2-faq-search {
  margin-top: var(--iv2-s-6);
  display: flex; align-items: center; gap: var(--iv2-s-2);
  background: var(--iv2-canvas); border: 1px solid var(--iv2-hairline);
  border-radius: var(--iv2-r-pill);
  padding: 8px 8px 8px 20px;
  box-shadow: var(--iv2-shadow-md);
  width: 100%; max-width: 540px;
  margin-inline: auto;
}
.iv2-faq-search:focus-within { border-color: var(--iv2-primary); box-shadow: 0 0 0 4px var(--iv2-primary-soft); }
.iv2-faq-search svg { width: 20px; height: 20px; color: var(--iv2-slate); flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; }
.iv2-faq-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--iv2-ink);
  padding: 10px 4px;
}
.iv2-faq-search input::placeholder { color: var(--iv2-muted); }
.iv2-faq-search .iv2-btn { height: 40px; padding: 0 22px; }

.iv2-faq-quicktags {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: var(--iv2-s-5);
}
.iv2-faq-quicktags a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--iv2-r-pill);
  background: var(--iv2-canvas); border: 1px solid var(--iv2-hairline);
  color: var(--iv2-charcoal); font-size: 0.85em; font-weight: 500;
  transition: all .15s ease;
}
.iv2-faq-quicktags a:hover { background: var(--iv2-primary); color: #fff; border-color: var(--iv2-primary); }
.iv2-faq-quicktags a .iv2-tagdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; }

/* 使用者要求 #3:手機版適應 */
@media (max-width: 768px) {
  .iv2-faq-hero { padding-block: clamp(40px, 8vw, 64px); }
  .iv2-faq-hero::after { background-size: 40px 40px; }
}
@media (max-width: 600px) {
  .iv2-faq-hero h1 { font-size: clamp(26.4px, 19.2px + 1.8vw, 32px); line-height: 1.22; }
  .iv2-faq-hero .iv2-lead { font-size: 0.95em; margin-top: 12px; }
  .iv2-faq-hero .iv2-hero-eyebrow { font-size: 0.7em; padding: 5px 12px; letter-spacing: 0.12em; }
  .iv2-faq-search { padding: 6px 6px 6px 16px; margin-top: var(--iv2-s-5); }
  .iv2-faq-search input { font-size: 16px; padding: 9px 2px; }
  .iv2-faq-search .iv2-btn { height: 36px; padding: 0 14px; font-size: 0.85em; }
  .iv2-faq-quicktags { gap: 6px; margin-top: var(--iv2-s-4); }
  .iv2-faq-quicktags a { font-size: 0.78em; padding: 5px 12px; }
}
@media (max-width: 380px) {
  .iv2-faq-search .iv2-btn svg { display: none; }
}

/* ============ Layout ============ */
.iv2-faq-wrap {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--iv2-s-7);
  padding-block: var(--iv2-s-8);
}
@media (max-width: 960px) {
  .iv2-faq-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--iv2-s-5); padding-block: var(--iv2-s-6); }
}

/* ============ Sidebar ============ */
.iv2-faq-side { position: sticky; top: 88px; align-self: start; min-width: 0; }
@media (max-width: 960px) { .iv2-faq-side { position: static; } }

.iv2-faq-side .iv2-side-title {
  font-size: 0.75em; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--iv2-slate); font-weight: 700; margin-bottom: var(--iv2-s-3);
  padding: 0 var(--iv2-s-3);
}
.iv2-faq-nav { display: flex; flex-direction: column; gap: 2px; }
.iv2-faq-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--iv2-r-sm);
  color: var(--iv2-charcoal); font-size: 0.95em; font-weight: 500;
  border-left: 2px solid transparent;
  transition: all .15s ease;
}
.iv2-faq-nav a:hover { background: var(--iv2-surface-soft); color: var(--iv2-ink); }
.iv2-faq-nav a.is-active {
  background: var(--iv2-primary-soft); color: var(--iv2-primary-deep);
  font-weight: 600; border-left-color: var(--iv2-primary);
}
.iv2-faq-nav .iv2-nav-glyph {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.iv2-faq-nav .iv2-ng-1 { background: var(--iv2-tint-lavender); color: var(--iv2-primary-deep); }
.iv2-faq-nav .iv2-ng-2 { background: var(--iv2-tint-mint); color: #0c5e1b; }
.iv2-faq-nav .iv2-ng-3 { background: var(--iv2-tint-peach); color: #7a3f0e; }
.iv2-faq-nav .iv2-ng-4 { background: var(--iv2-tint-sky); color: #0a4880; }
.iv2-faq-nav .iv2-ng-5 { background: var(--iv2-tint-yellow); color: #7a5b0e; }
.iv2-faq-nav .iv2-ng-6 { background: #ffe1e7; color: #b32346; }
.iv2-faq-nav .iv2-ng-7 { background: #d6f0ee; color: #0c6b64; }
.iv2-faq-nav .iv2-nav-count { margin-left: auto; font-size: 0.75em; color: var(--iv2-muted); font-weight: 600; font-variant-numeric: tabular-nums; }

.iv2-side-help {
  margin-top: var(--iv2-s-6);
  background: var(--iv2-brand-navy); color: #fff;
  border-radius: var(--iv2-r-lg); padding: var(--iv2-s-5);
  position: relative; overflow: hidden;
}
.iv2-side-help::after {
  content: ""; position: absolute; width: 180px; height: 180px;
  background: var(--iv2-primary); border-radius: 50%;
  filter: blur(80px); opacity: 0.45; right: -60px; bottom: -60px;
}
.iv2-side-help .iv2-sh-eye { font-size: 0.75em; color: var(--iv2-accent-amber); letter-spacing: 0.1em; font-weight: 700; position: relative; z-index: 1; }
.iv2-side-help h4 { color: #fff; font-size: 1.125em; margin-top: 8px; position: relative; z-index: 1; }
.iv2-side-help p { color: rgba(255,255,255,0.88); font-size: 1em; font-weight: 600; margin-top: 8px; line-height: 1.55; position: relative; z-index: 1; }
.iv2-side-help .iv2-btn { margin-top: var(--iv2-s-3); position: relative; z-index: 1; }

/* 使用者要求 #3:手機 sidebar 改頂部橫向卷軸 chip 列 */
@media (max-width: 960px) {
  .iv2-faq-side .iv2-side-title { display: none; }
  .iv2-faq-nav {
    flex-direction: row; gap: 8px; overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .iv2-faq-nav::-webkit-scrollbar { display: none; }
  .iv2-faq-nav a {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-left: 0; border-radius: var(--iv2-r-pill);
    background: var(--iv2-canvas); border: 1px solid var(--iv2-hairline);
    white-space: nowrap;
  }
  .iv2-faq-nav a.is-active { border-color: var(--iv2-primary); }
  .iv2-faq-nav .iv2-nav-count { display: none; }
  .iv2-side-help { margin-top: var(--iv2-s-4); padding: var(--iv2-s-4); }
}

/* ============ Main ============ */
.iv2-faq-main { min-width: 0; }
.iv2-faq-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 var(--iv2-s-4); border-bottom: 1px solid var(--iv2-hairline-soft);
  flex-wrap: wrap; gap: var(--iv2-s-3);
}
.iv2-faq-toolbar .iv2-count { color: var(--iv2-charcoal); font-size: 1em; font-weight: 600; }
.iv2-faq-toolbar .iv2-count strong { color: var(--iv2-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.iv2-faq-toolbar .iv2-actions { display: flex; gap: var(--iv2-s-2); }
.iv2-faq-toolbar .iv2-actions button {
  background: transparent; border: 1px solid var(--iv2-hairline);
  color: var(--iv2-charcoal); padding: 6px 14px; border-radius: var(--iv2-r-pill);
  font: inherit; font-size: 0.85em; font-weight: 500; cursor: pointer;
  transition: all .15s ease;
}
.iv2-faq-toolbar .iv2-actions button:hover { border-color: var(--iv2-primary); color: var(--iv2-primary); }

.iv2-faq-group { margin-top: var(--iv2-s-7); scroll-margin-top: 100px; }
.iv2-faq-group:first-child { margin-top: var(--iv2-s-6); }
.iv2-group-head { display: flex; align-items: center; gap: var(--iv2-s-3); margin-bottom: var(--iv2-s-4); }
.iv2-group-head .iv2-gh-glyph {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
  flex-shrink: 0;
}
.iv2-group-head .iv2-gh-glyph.iv2-g-1 { background: var(--iv2-tint-lavender); color: var(--iv2-primary-deep); }
.iv2-group-head .iv2-gh-glyph.iv2-g-2 { background: var(--iv2-tint-mint); color: #0c5e1b; }
.iv2-group-head .iv2-gh-glyph.iv2-g-3 { background: var(--iv2-tint-peach); color: #7a3f0e; }
.iv2-group-head .iv2-gh-glyph.iv2-g-4 { background: var(--iv2-tint-sky); color: #0a4880; }
.iv2-group-head .iv2-gh-glyph.iv2-g-5 { background: var(--iv2-tint-yellow); color: #7a5b0e; }
.iv2-group-head .iv2-gh-glyph.iv2-g-6 { background: #ffe1e7; color: #b32346; }
.iv2-group-head .iv2-gh-glyph.iv2-g-7 { background: #d6f0ee; color: #0c6b64; }
.iv2-group-head h2 { font-size: 1.45em; color: var(--iv2-ink); letter-spacing: -0.015em; }
.iv2-group-head .iv2-gh-sub { color: var(--iv2-charcoal); font-size: 1em; font-weight: 600; margin-top: 3px; }

/* accordion */
.iv2-qa-list { display: flex; flex-direction: column; gap: 8px; }
.iv2-qa-item {
  background: var(--iv2-canvas); border: 1px solid var(--iv2-hairline);
  border-radius: var(--iv2-r-md); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.iv2-qa-item:hover { border-color: var(--iv2-hairline-strong); }
.iv2-qa-item[open] { border-color: var(--iv2-primary); box-shadow: var(--iv2-shadow-md); }
.iv2-qa-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--iv2-s-3);
  padding: 18px 22px;
  font-size: 1.0625em; font-weight: 600; color: var(--iv2-ink); line-height: 1.5;
  user-select: none;
}
.iv2-qa-item summary::-webkit-details-marker { display: none; }
.iv2-qa-item summary:hover { background: var(--iv2-surface-soft); }
.iv2-qa-item .iv2-q-num {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
  background: var(--iv2-primary-soft); color: var(--iv2-primary-deep);
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.875em; font-variant-numeric: tabular-nums;
}
.iv2-qa-item[open] .iv2-q-num { background: var(--iv2-primary); color: #fff; }
.iv2-qa-item .iv2-q-text { flex: 1; min-width: 0; word-break: break-word; }
.iv2-qa-item .iv2-q-chev {
  flex-shrink: 0; width: 24px; height: 24px;
  display: grid; place-items: center; color: var(--iv2-slate);
  transition: transform .2s ease;
}
.iv2-qa-item[open] .iv2-q-chev { transform: rotate(180deg); color: var(--iv2-primary); }
.iv2-qa-item .iv2-q-chev svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.iv2-qa-body {
  padding: 0 22px 22px 70px;
  color: var(--iv2-ink); font-size: 1em; font-weight: 600; line-height: 1.8;
  overflow-wrap: break-word; word-break: break-word;
}
/* 強制答案內文 p / li 套用 qa-body 的字級與字重,避免被 Bootstrap 等 element 選擇器壓小(inherit 取父層計算值,不會重複放大)*/
.iv2-qa-body p, .iv2-qa-body li { font-size: inherit; font-weight: inherit; }
.iv2-qa-body p { margin-top: var(--iv2-s-2); }
.iv2-qa-body p:first-child { margin-top: 0; }
.iv2-qa-body strong { color: var(--iv2-ink); font-weight: 700; }
.iv2-qa-body a { color: var(--iv2-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; word-break: break-all; }
.iv2-qa-body a:hover { color: var(--iv2-primary-deep); }
.iv2-qa-body .iv2-warn { color: var(--iv2-accent-red); }
.iv2-qa-body ul { margin-top: var(--iv2-s-2); padding-left: 0; list-style: none; }
.iv2-qa-body ul li {
  position: relative; padding-left: 22px; margin-top: 4px;
}
.iv2-qa-body ul li::before {
  content: ""; position: absolute; left: 6px; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--iv2-primary);
}
.iv2-qa-body ol { margin-top: var(--iv2-s-2); padding-left: 22px; list-style: decimal outside; }
.iv2-qa-body ol li { margin-top: 4px; list-style-type: decimal; }
.iv2-qa-body ol li::marker { color: var(--iv2-primary); font-weight: 700; }

.iv2-qa-section-title {
  display: block; font-weight: 700; color: var(--iv2-ink); margin-top: var(--iv2-s-3);
  padding-bottom: 4px; border-bottom: 1px dashed var(--iv2-hairline);
}
.iv2-qa-section-title.iv2-warn { color: var(--iv2-accent-red); border-bottom-color: rgba(255,56,92,0.3); }

.iv2-qa-callout {
  margin-top: var(--iv2-s-4); padding: 14px 16px;
  background: var(--iv2-surface-soft); border-left: 3px solid var(--iv2-primary);
  border-radius: var(--iv2-r-sm);
}
.iv2-qa-callout .iv2-qc-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--iv2-ink); font-size: 0.9375em;
}
.iv2-qa-callout .iv2-qc-head svg { width: 18px; height: 18px; color: var(--iv2-primary); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.iv2-qa-callout ul li::before { background: var(--iv2-primary); }

/* 使用者要求 #3:手機 accordion 內距收緊,Q 編號靠左,內文不再大幅內縮 */
@media (max-width: 600px) {
  .iv2-faq-toolbar .iv2-actions button { padding: 5px 12px; font-size: 0.8em; }
  .iv2-group-head .iv2-gh-glyph { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
  .iv2-group-head h2 { font-size: 1.25em; }
  .iv2-qa-item summary { padding: 14px 14px; font-size: 1em; gap: 10px; }
  .iv2-qa-item .iv2-q-num { width: 28px; height: 28px; font-size: 0.78em; }
  .iv2-qa-body { padding: 0 14px 16px 14px; font-size: 1em; line-height: 1.8; }
  .iv2-qa-body ul li { padding-left: 18px; }
  .iv2-qa-body ul li::before { left: 4px; top: 11px; }
  .iv2-qa-body ol { padding-left: 18px; }
  .iv2-qa-callout { padding: 12px 14px; }
}

/* ============ Contact ============ */
.iv2-contact-section {
  background: var(--iv2-surface-soft);
  border-block: 1px solid var(--iv2-hairline-soft);
  padding-block: var(--iv2-s-8);
}
.iv2-contact-head { text-align: center; max-width: 640px; margin: 0 auto var(--iv2-s-6); }
.iv2-contact-head .iv2-t-eyebrow { display: inline-block; }
.iv2-contact-head h2 { font-size: clamp(25.6px, 16px + 1.6vw, 35.2px); letter-spacing: -0.02em; margin-top: 8px; }
.iv2-contact-head p { color: var(--iv2-charcoal); font-size: 1em; font-weight: 600; margin-top: var(--iv2-s-3); }

.iv2-contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--iv2-s-4);
  max-width: 960px; margin: 0 auto;
}
@media (max-width: 800px) { .iv2-contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--iv2-s-3); } }

.iv2-contact-card {
  background: var(--iv2-canvas); border: 1px solid var(--iv2-hairline);
  border-radius: var(--iv2-r-lg); padding: var(--iv2-s-5);
  text-align: center; transition: all .2s ease;
  display: flex; flex-direction: column; align-items: center;
}
.iv2-contact-card:hover { transform: translateY(-3px); box-shadow: var(--iv2-shadow-lg); border-color: var(--iv2-primary); }
.iv2-contact-card .iv2-cc-glyph {
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  margin-bottom: var(--iv2-s-3);
}
.iv2-contact-card .iv2-cc-glyph svg { width: 26px; height: 26px; }
.iv2-contact-card.iv2-line .iv2-cc-glyph { background: rgba(6,199,85,0.1); color: #06c755; }
.iv2-contact-card.iv2-mail .iv2-cc-glyph { background: var(--iv2-tint-lavender); color: var(--iv2-primary-deep); }
.iv2-contact-card.iv2-tel .iv2-cc-glyph { background: var(--iv2-tint-peach); color: #7a3f0e; }
.iv2-contact-card h4 { font-size: 1.0625em; color: var(--iv2-ink); }
.iv2-contact-card .iv2-cc-val {
  font-size: 1.125em; color: var(--iv2-ink); font-weight: 600;
  margin-top: 6px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.iv2-contact-card .iv2-cc-val.iv2-mail-val { font-size: 0.92em; }
.iv2-contact-card .iv2-cc-sub { color: var(--iv2-charcoal); font-size: 1em; font-weight: 600; margin-top: 8px; line-height: 1.55; }
.iv2-contact-card .iv2-btn { margin-top: var(--iv2-s-4); width: 100%; }

.iv2-service-hours {
  margin-top: var(--iv2-s-6);
  color: var(--iv2-charcoal); font-size: 0.95em; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--iv2-r-pill);
  background: var(--iv2-canvas); border: 1px solid var(--iv2-hairline-soft);
}
.iv2-service-hours .iv2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--iv2-success); box-shadow: 0 0 0 4px rgba(35,180,90,0.18); }
.iv2-contact-section .iv2-center { text-align: center; }

@media (max-width: 600px) {
  .iv2-contact-section { padding-block: var(--iv2-s-7); }
  .iv2-contact-card { padding: var(--iv2-s-4); }
  .iv2-contact-card .iv2-cc-glyph { width: 48px; height: 48px; border-radius: 14px; }
  .iv2-contact-card .iv2-cc-glyph svg { width: 22px; height: 22px; }
  .iv2-service-hours { font-size: 0.9em; padding: 7px 14px; }
}
