/* =========================
   Theme
   ========================= */
:root{
  --primary:#069393;
  --primary-600:#058585;
  --primary-700:#047676;
  --primary-50:#e6f6f6;
  --ink:#253238;
  --muted:#64748b;
  --line:#e6e8ec;
  --bg:#f6f9f9;
  --white:#fff;
}

/* =========================
   Base
   ========================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Noto Sans TC", "Segoe UI", Roboto, Helvetica, Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* =========================
   Topbar
   ========================= */
header.topbar{
  background:var(--primary);
  color:#fff;
  padding:14px 20px;
}
header.topbar h1{
  margin:0;
  font-size:20px;
  font-weight:700;
  letter-spacing:.3px;
}

/* =========================
   FAQ Layout
   ========================= */
#faqApp{
  padding:20px;
  max-width:1200px;
  margin:auto;
}
#faqApp header{
  margin-bottom:14px;
}
#faqMsg{
  font-size:14px;
  color:var(--muted);
}

/* =========================
   Loading banner / spinner
   ========================= */
.loading.banner{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:8px 0 12px;
  border-radius:10px;
  background:var(--primary-50);
  color:var(--primary-700);
  border:1px solid #d9efef;
}
.spinner{
  width:16px;height:16px;
  border:2px solid rgba(6,147,147,.25);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================
   Table card
   ========================= */
.table-wrap{
  overflow:auto;
  background:var(--white);
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(6,147,147,.12);
}

/* Table */
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid #f1f3f5}
th{
  position:sticky; top:0; z-index:1;
  background:#fbfcfd;
  font-size:12px; letter-spacing:.4px; text-transform:none;
  color:var(--muted);
  border-bottom:1px solid #edf1f3;
}

/* Group header row */
tr.group-row td{
  background:var(--primary-50);
  border-bottom:1px solid #dff0f0;
  font-weight:700;
  color:#184247;
}
tr.group-row td:first-child{
  border-left:4px solid var(--primary);
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}

/* Question row */
tr.q-row{
  cursor:pointer;
  transition:background-color .18s ease, box-shadow .18s ease;
}
tr.q-row:hover{
  background:#f0fbfb;
}
tr.q-row .caret{
  color:var(--primary);
  font-weight:700;
}

/* Answer row */
tr.a-row td{
  background:#fcffff;
  border-bottom:1px solid #e9f3f3;
  border-left:3px solid var(--primary);
  border-right:1px solid #eef4f4;
}

/* Answer text */
.answer{
  white-space:pre-wrap;
  line-height:1.7;
  color:#2a3a3d;
}
.answer b, .answer strong{font-weight:700}
.answer i, .answer em{font-style:italic}
.answer u{text-decoration:underline}
.answer code{
  background:#f4f7f7;
  padding:.1em .35em;
  border-radius:4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
  font-size:.95em;
}
.answer a{
  color:var(--primary);
  text-decoration:underline dotted;
}
.answer a:hover{color:var(--primary-700)}

/* =========================
   Media grid under answer
   ========================= */
.answer-media{margin-top:12px}
.answer-media .media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
}
.answer-media .answer-media-item img,
.answer-media .faq-thumb{
  width:100%; height:auto; display:block;
  border-radius:10px;
  border:1px solid #e9eef0;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .2s ease;
  cursor:zoom-in;
}
.answer-media .answer-media-item img:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* =========================
   Lightbox
   ========================= */
.faq-lb{
  position:fixed; inset:0;
  display:none;
  justify-content:center; align-items:center;
  background:rgba(0,0,0,.78);
  padding:16px; z-index:9999;
}
.faq-lb.show{display:flex}
.faq-lb__img{
  max-width:96vw; max-height:90vh;
  border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.faq-lb__close{
  position:fixed; top:10px; right:10px;
  width:40px; height:40px;
  border:0; border-radius:999px;
  background:rgba(6,147,147,.85);
  color:#fff; font-size:20px; line-height:40px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(6,147,147,.35);
}
.faq-lb__close:hover{background:var(--primary-700)}

/* =========================
   Utilities
   ========================= */
tr:last-child td{border-bottom:0}

/* Scrollbar (desktop) */
@media (hover:hover){
  .table-wrap::-webkit-scrollbar{height:10px}
  .table-wrap::-webkit-scrollbar-track{background:#f0f4f5;border-radius:10px}
  .table-wrap::-webkit-scrollbar-thumb{background:#cfe6e6;border-radius:10px}
  .table-wrap::-webkit-scrollbar-thumb:hover{background:#b8dada}
}
/* ===*
/* ========= QuickNav（分類快速導覽） ========= */
.installfaq-quicknav{
  position:fixed;
  right:12px;
  top:110px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

/* Toggle button（手機上使用） */
.installfaq-quicknav__toggle{
  display:none; /* 桌機預設隱藏 */
  background:var(--primary);
  color:#fff;
  border:0;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(6,147,147,.25);
  cursor:pointer;
}

/* Panel */
.installfaq-quicknav__panel{
  width:220px;
  max-height:60vh;
  overflow:auto;
  padding:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(6,147,147,.18);
}
.installfaq-quicknav__panel.is-ready{visibility:visible}
.installfaq-quicknav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.installfaq-quicknav__item{
  width:100%;
  text-align:left;
  background:#f2fbfb;
  color:#0f4f52;
  border:1px solid #d6eeee;
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.installfaq-quicknav__item:hover{background:#e9f8f8}
.installfaq-quicknav__item.is-active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* 桌機：固定展開；手機：浮動開合 */
@media (max-width: 768px){
  .installfaq-quicknav{
    right:10px; bottom:18px;
    top:auto;
    align-items:flex-end;
  }
  .installfaq-quicknav__toggle{ display:inline-block; }
  .installfaq-quicknav__panel{
    display:none;
    width:min(92vw, 360px);
    max-height:55vh;
    padding:12px;
    border-radius:16px;
  }
  .installfaq-quicknav.open .installfaq-quicknav__panel{ display:block; }
}
/* 答案內的段落與清單 */
.answer { line-height: 1.7; }
.answer p { margin: 0 0 .6em; }
.answer ul, .answer ol {
  margin: .4em 0 .8em;
  padding-left: 1.25em;
  white-space: normal; /* 清單不要 pre-wrap 的副作用 */
}
.answer ul li, .answer ol li { margin: .25em 0; }
.answer ul li::marker { color: var(--primary); }          /* 無序清單子彈上色 */
.answer ol li::marker { color: var(--primary); font-weight: 600; } /* 有序清單序號上色 */