/*
 * Services 頁「活動判型」quick finder — widget 專屬樣式
 * ---------------------------------------------------------
 * 所有 selector 一律 .fh-qf 前綴，NEVER 裸 body/h1/h2（避免污染 services 頁）。
 * 品牌 token 值 scoped 複製自 /opt/fh-shared/brand/brand_tokens.py（= fh_ci.css），
 * NEVER @import fh_ci.css（含裸全域選擇器會重上色整頁）；NEVER 另行硬編色碼。
 */
.fh-qf {
  /* ── scoped 品牌 token（來源 fh_ci.css，檔頭明文授權「複製此片段」）── */
  --qf-red: #E4002B;          /* --fh-red */
  --qf-ink: #1A1A1A;          /* --fh-gray-ink */
  --qf-body: #4D4D4D;         /* --fh-gray-body */
  --qf-muted: #808080;        /* --fh-gray-muted */
  --qf-divider: #E6E6E6;      /* --fh-gray-divider */
  --qf-surface: #F5F5F5;      /* --fh-gray-surface */
  --qf-success: #1E7B45;      /* --fh-success */
  --qf-line: #06C755;         /* LINE 品牌綠（CTA 專用，非版面色） */

  /* ── v10 棋盤/平臺分類色 ──
   * 來源＝Aaron 逐版拍板 10 輪定版檔 designs/qf-chart-v10-final-20260716.html
   * （此即「有來源」：設計權威檔，非另行發明）；不在 fh_ci.css 品牌 token，故 scoped 於此。*/
  --qfc-blu: #1971c2;   /* 藍＝含視訊連線 */
  --qfc-pur: #7048e8;   /* 紫＝全線上 */
  --qfc-grn: #2b8a3e;   /* 綠＝社群公開 */
  --qfc-org: #e8590c;   /* 橘＝加密串流 */
  --qf-body-size: 15px;       /* --fh-body-size */
  --qf-footnote-size: 12px;   /* --fh-footnote-size */
  --qf-h-size: 27px;          /* --fh-h2-size */
  --qf-font: 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;

  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 24px;
  font-family: var(--qf-font);
}
.fh-qf *, .fh-qf *::before, .fh-qf *::after { box-sizing: border-box; }

.fh-qf .fh-qf-inner {
  background: var(--qf-surface);
  border: 1px solid var(--qf-divider);
  border-top: 3px solid var(--qf-red);
  border-radius: 12px;
  padding: 30px 28px;
}

.fh-qf .fh-qf-heading {
  margin: 0 0 4px;
  color: var(--qf-ink);
  font-size: var(--qf-h-size);
  font-weight: 700;
  line-height: 1.3;
}
.fh-qf .fh-qf-sub {
  margin: 0 0 22px;
  color: var(--qf-body);
  font-size: var(--qf-body-size);
}

/* ── 4 題 grid（桌機兩欄，手機單欄）── */
.fh-qf .fh-qf-questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.fh-qf .fh-qf-question {
  border: 1px solid var(--qf-divider);
  border-radius: 10px;
  padding: 16px 16px 12px;
  margin: 0;
  background: #fff;
}
.fh-qf .fh-qf-q-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 12px;
  font-size: var(--qf-body-size);
  font-weight: 700;
  color: var(--qf-ink);
}
.fh-qf .fh-qf-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--qf-red);
  color: #fff;
  font-size: var(--qf-footnote-size);
  flex: 0 0 auto;
}

.fh-qf .fh-qf-options { display: grid; gap: 8px; }
.fh-qf .fh-qf-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;                 /* 觸控目標 ≥44px */
  border: 1.5px solid var(--qf-divider);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  background: #fff;
  transition: border-color .12s, background .12s;
}
.fh-qf .fh-qf-option:hover { border-color: var(--qf-muted); }
.fh-qf .fh-qf-option:focus-within { outline: 3px solid rgba(228,0,43,.28); outline-offset: 1px; }
.fh-qf .fh-qf-option.selected { border-color: var(--qf-red); background: #fff5f6; }
.fh-qf .fh-qf-option input {
  margin-top: 2px;
  width: 18px; height: 18px;
  accent-color: var(--qf-red);
  flex: 0 0 auto;
}
.fh-qf .fh-qf-opt-text { display: flex; flex-direction: column; }
.fh-qf .fh-qf-opt-label { font-size: var(--qf-body-size); color: var(--qf-ink); line-height: 1.35; }
.fh-qf .fh-qf-opt-note { font-size: var(--qf-footnote-size); color: var(--qf-muted); margin-top: 2px; line-height: 1.4; }

/* ── 結果區 ── */
.fh-qf .fh-qf-result {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--qf-divider);
  border-radius: 10px;
  padding: 22px 24px;
}
.fh-qf .fh-qf-result-empty { margin: 0; color: var(--qf-muted); font-size: var(--qf-body-size); }
.fh-qf .fh-qf-result-label {
  font-size: var(--qf-footnote-size);
  color: var(--qf-muted);
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.fh-qf .fh-qf-result-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--qf-red);
  line-height: 1.3;
  word-break: break-word;
}
.fh-qf .fh-qf-result-oneliner {
  margin: 8px 0 0;
  color: var(--qf-body);
  font-size: var(--qf-body-size);
  line-height: 1.6;
}
.fh-qf .fh-qf-advisory {
  list-style: none;
  padding: 12px 14px;
  margin: 14px 0 0;
  background: #fff8f0;
  border: 1px solid #f0d9b8;
  border-radius: 8px;
}
.fh-qf .fh-qf-advisory li {
  position: relative;
  padding: 3px 0 3px 18px;
  color: var(--qf-body);
  font-size: var(--qf-body-size);
  line-height: 1.5;
}
.fh-qf .fh-qf-advisory li::before { content: '💡'; position: absolute; left: 0; font-size: 12px; }

/* ── CTA ── */
.fh-qf .fh-qf-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.fh-qf .fh-qf-btn {
  display: inline-block;
  font-size: var(--qf-body-size);
  font-family: var(--qf-font);
  text-decoration: none;
  border-radius: 7px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
}
.fh-qf .fh-qf-btn-primary { background: var(--qf-red); color: #fff; }
.fh-qf .fh-qf-btn-primary:hover { filter: brightness(.93); }
.fh-qf .fh-qf-btn-line { background: var(--qf-line); color: #fff; }
.fh-qf .fh-qf-btn-line:hover { filter: brightness(.93); }
.fh-qf .fh-qf-btn-ghost { background: #fff; color: var(--qf-body); border-color: var(--qf-divider); }
.fh-qf .fh-qf-btn-ghost:hover { border-color: var(--qf-muted); }
.fh-qf .fh-qf-btn:focus-visible { outline: 3px solid rgba(228,0,43,.4); outline-offset: 2px; }

.fh-qf .fh-qf-result-note {
  margin: 16px 0 0;
  font-size: var(--qf-footnote-size);
  color: var(--qf-muted);
  border-top: 1px solid var(--qf-divider);
  padding-top: 12px;
}

/* ============================================================
 * v10 棋盤圖 ＋ 播出平臺光譜帶
 * 全部 scoped 於 .fh-qf；HTML/CSS 對齊定版檔
 * designs/qf-chart-v10-final-20260716.html（NEVER 自改設計）。
 * ============================================================ */

/* ── 棋盤圖 ── */
.fh-qf .fh-qf-chart { margin-top: 24px; }
.fh-qf .qfc-grid { display: grid; grid-template-columns: 58px repeat(5, 1fr); gap: 8px; }
.fh-qf .qfc-rowhead {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--qf-muted); font-weight: 700; text-align: center;
}
.fh-qf .qfc-colhead { font-size: 12px; color: var(--qf-muted); font-weight: 700; text-align: center; padding: 4px 0 0; }
.fh-qf .qfc-tile-blank { border: none; }
.fh-qf .qfc-tile {
  border-radius: 10px; padding: 14px 8px; min-height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.45;
  border: 2px solid transparent; position: relative;
}
.fh-qf .qfc-tile small { font-weight: 400; font-size: 11px; opacity: .75; margin-top: 2px; }
.fh-qf .qfc-tile.t-pre   { background: #f6f6f6; border-color: #c9c9c9; color: #555; border-style: dashed; }
.fh-qf .qfc-tile.t-live  { background: var(--qf-ink); color: #fff; }
.fh-qf .qfc-tile.t-link  { background: #e7f0fa; border-color: var(--qfc-blu); color: #14507e; }
.fh-qf .qfc-tile.t-plink { background: #f3f8fd; border-color: #8ab8e0; color: #3a6f9e; border-style: dashed; }
.fh-qf .qfc-tile.t-onl   { background: #f1ecfd; border-color: var(--qfc-pur); color: #4b2fb8; }
.fh-qf .qfc-tile.t-you   { background: var(--qf-red); color: #fff; border-color: var(--qf-red); box-shadow: 0 0 0 5px rgba(228,0,43,.15); }
.fh-qf .qfc-tile .qfc-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-size: 10px; background: #fff; color: var(--qf-red); border: 1.5px solid var(--qf-red);
  border-radius: 8px; padding: 0 8px; white-space: nowrap;
}
.fh-qf .qfc-zoneband { grid-column: 1/7; display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.fh-qf .qfc-zoneband .qfc-line { flex: 1; border-top: 2px dashed #d5cdf5; }
.fh-qf .qfc-zoneband .qfc-zl { font-size: 12px; font-weight: 700; color: var(--qfc-pur); background: rgba(112,72,232,.1); padding: 2px 10px; border-radius: 12px; }
.fh-qf .qfc-zoneband.loc .qfc-zl { color: var(--qf-ink); background: #f0f0f0; }
.fh-qf .qfc-zoneband.loc .qfc-line { border-color: var(--qf-divider); }
.fh-qf .qfc-axisy-note { font-size: 11.5px; color: var(--qf-muted); margin: 10px 0 0 2px; }
.fh-qf .qfc-legend { margin-top: 12px; font-size: 12px; color: var(--qf-muted); line-height: 1.8; }
.fh-qf .qfc-sw { display: inline-block; width: 13px; height: 13px; border-radius: 4px; vertical-align: -2px; margin-right: 2px; border: 1.5px solid transparent; }
.fh-qf .qfc-sw.sw-pre  { background: #f6f6f6; border-color: #c9c9c9; border-style: dashed; }
.fh-qf .qfc-sw.sw-link { background: #e7f0fa; border-color: var(--qfc-blu); }
.fh-qf .qfc-sw.sw-live { background: var(--qf-ink); }
.fh-qf .qfc-sw.sw-onl  { background: #f1ecfd; border-color: var(--qfc-pur); }
.fh-qf .qfc-sw.sw-you  { background: var(--qf-red); }

/* ── 播出平臺光譜帶 ── */
.fh-qf .qfc-pband { margin-top: 30px; border-top: 1px solid var(--qf-divider); padding-top: 20px; }
.fh-qf .qfc-ptitle { margin: 0 0 4px; font-size: 17px; color: var(--qf-ink); }
.fh-qf .qfc-psub { margin: 0 0 14px; color: var(--qf-muted); font-size: 13px; }
.fh-qf .qfc-spec-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--qf-muted); margin-bottom: 6px; }
.fh-qf .qfc-spec-bar {
  height: 6px; border-radius: 3px; margin-bottom: 14px; opacity: .55;
  background: linear-gradient(to right, var(--qfc-grn) 0%, var(--qfc-grn) 45%, var(--qfc-org) 55%, var(--qfc-org) 72%, var(--qfc-blu) 82%, var(--qfc-blu) 100%);
}
.fh-qf .qfc-spec-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; }
.fh-qf .qfc-pseg { border: 2px solid var(--qf-divider); border-radius: 12px; padding: 12px 12px 10px; position: relative; }
.fh-qf .qfc-pseg .qfc-ph { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
.fh-qf .qfc-pseg .qfc-pd { font-size: 11.5px; color: var(--qf-muted); line-height: 1.5; margin-bottom: 9px; }
.fh-qf .qfc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fh-qf .qfc-chip { font-size: 11.5px; border-radius: 20px; padding: 2.5px 10px; background: #f2f2f2; color: #444; white-space: nowrap; }
.fh-qf .qfc-chip.bridge { border: 1.5px dashed #c9a06b; background: #fff8ef; color: #9a6b1f; }
.fh-qf .qfc-pseg.pub  { border-color: #b8dfc2; } .fh-qf .qfc-pseg.pub .qfc-ph { color: var(--qfc-grn); }  .fh-qf .qfc-pseg.pub .qfc-chip { background: #e9f6ec; color: #257033; }
.fh-qf .qfc-pseg.shop { border-color: #f2d38b; } .fh-qf .qfc-pseg.shop .qfc-ph { color: #b07d10; }        .fh-qf .qfc-pseg.shop .qfc-chip { background: #fdf6e3; color: #8a6410; }
.fh-qf .qfc-pseg.enc  { border-color: #f5cdb4; } .fh-qf .qfc-pseg.enc .qfc-ph { color: var(--qfc-org); }  .fh-qf .qfc-pseg.enc .qfc-chip { background: #fdeee3; color: #b3450a; }
.fh-qf .qfc-pseg.meet { border-color: #a9cbe8; } .fh-qf .qfc-pseg.meet .qfc-ph { color: var(--qfc-blu); } .fh-qf .qfc-pseg.meet .qfc-chip { background: #e7f0fa; color: #14507e; }
.fh-qf .qfc-pseg.rec, .fh-qf .qfc-webstrip.rec { border-color: var(--qf-red); box-shadow: 0 0 0 4px rgba(228,0,43,.12); }
.fh-qf .qfc-rtag {
  position: absolute; top: -11px; left: 14px; font-size: 10.5px;
  background: var(--qf-red); color: #fff; border-radius: 8px; padding: 1px 9px; font-weight: 700;
}
.fh-qf .qfc-webstrip {
  grid-column: 1/-1; border: 2px dashed #c9c9c9; border-radius: 12px; padding: 10px 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; background: #fafafa; position: relative;
}
.fh-qf .qfc-webstrip .qfc-ph { font-size: 13px; font-weight: 700; color: #555; }
.fh-qf .qfc-webstrip .qfc-pd { font-size: 11.5px; color: var(--qf-muted); }
.fh-qf .qfc-webstrip.strip-cn  { border-style: solid; border-color: #e0b4b4; background: #fdf7f7; }
.fh-qf .qfc-webstrip.strip-cn .qfc-ph { color: #a03535; }
.fh-qf .qfc-webstrip.strip-cn .strip-chip { background: #f9e9e9; color: #a03535; }
.fh-qf .qfc-webstrip.strip-reg { border-style: solid; border-color: #c9bfa4; background: #fbf9f3; }
.fh-qf .qfc-webstrip.strip-reg .qfc-ph { color: #7a6a35; }
.fh-qf .qfc-webstrip.strip-reg .strip-chip { background: #f3edd9; color: #7a6a35; }
.fh-qf .qfc-pnote { font-size: 11.5px; color: var(--qf-muted); margin-top: 10px; line-height: 1.7; }

/* ── RWD：手機單欄、CTA 直排滿寬 ── */
@media (max-width: 560px) {
  .fh-qf { padding: 36px 16px; }
  .fh-qf .fh-qf-inner { padding: 22px 16px; }
  .fh-qf .fh-qf-questions { grid-template-columns: 1fr; }
  .fh-qf .fh-qf-cta { flex-direction: column; }
  .fh-qf .fh-qf-btn { width: 100%; }
  .fh-qf .fh-qf-result-name { font-size: 21px; }

  /* 棋盤：橫向捲動保 2D 地圖語意（plan §8 決策 4）— 外層可捲、內層維持 6 欄最小寬 */
  .fh-qf .fh-qf-chart {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,0) 12px) left/24px 100% no-repeat;
  }
  .fh-qf .qfc-grid { min-width: 560px; }
  .fh-qf .fh-qf-chart::before {
    content: '← 左右滑動看完整棋盤 →'; display: block;
    font-size: 11px; color: var(--qf-muted); text-align: center; margin-bottom: 6px;
  }
  /* 平臺帶：四段直排；全寬 strip 本就滿寬；chips 自動換行 */
  .fh-qf .qfc-spec-row { grid-template-columns: 1fr; }
}