.snow-tunnel-turtle-page {
  background: #f6f8fc;
}

/* 本頁整體放寬：header / 麵包屑 / 標題 / footer 共用同一條加寬基準線，
   站上其他頁面不受影響（.container 預設仍是 1180px）。 */
.snow-tunnel-turtle-page .container {
  width: min(1520px, calc(100% - 56px));
}

.snow-tunnel-heading {
  padding: 34px 0 22px;
  background: linear-gradient(135deg, #eef7e9 0%, #f7fbff 58%, #e8f2ff 100%);
  border-bottom: 1px solid #dce6ef;
}

.snow-tunnel-heading h1 {
  margin: 18px 0 4px;
  color: #183653;
  font-size: clamp(1.8rem, 4vw, 2.65rem);
}

.snow-tunnel-heading p {
  margin: 0;
  color: #53708c;
}

/* 看板寬度對齊上方麵包屑（同 .snow-tunnel-turtle-page .container），
   外層再加一圈金邊深色外框，讓深色看板落在淺色頁面上不突兀。 */
.snow-tunnel-board-wrap {
  position: relative;
  width: min(1520px, calc(100% - 56px));
  margin: 26px auto 48px;
  padding: 12px;
  border-radius: 26px;
  background: linear-gradient(150deg, #143d66 0%, #0c1b2f 46%, #143d66 100%);
  border: 1px solid rgba(255, 207, 63, .38);
  box-shadow:
    0 22px 52px rgba(16, 44, 72, .28),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* 內側金色細線，做出「相框」層次 */
.snow-tunnel-board-wrap::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 20px;
  border: 1px solid rgba(255, 207, 63, .22);
  pointer-events: none;
}

.snow-tunnel-board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  border: 0;
  border-radius: 16px;
  background: #0c1b2f;
}

/* iframe 寬度 <= 900px 時看板會切成直式堆疊，高度改由 JS 依內容量測，
   這裡的 2600px 只是 JS 失效時的備援值 */
@media (max-width: 968px) {
  .snow-tunnel-board {
    aspect-ratio: auto;
    height: 2600px;
  }
}

@media (max-width: 900px) {
  .snow-tunnel-heading {
    padding: 22px 0 18px;
  }

  /* 跟站上其他頁一樣的窄螢幕留白 */
  .snow-tunnel-turtle-page .container {
    width: min(100% - 24px, 1520px);
  }

  .snow-tunnel-board-wrap {
    width: min(100% - 24px, 1520px);
    margin: 18px auto 32px;
    padding: 8px;
    border-radius: 20px;
  }

  .snow-tunnel-board-wrap::before {
    inset: 4px;
    border-radius: 15px;
  }
}

/* ============================================================
   SEO 內容區：看板在 iframe 裡，其文字不會被算進本頁，
   所以下面這些區塊同時要「說明給人看」和「給搜尋引擎看」。
   配色沿用看板的 CSS 變數（navy / gold / green / blue），
   讓它接在深色看板後面不會像另一個網站。
   ============================================================ */
.stt-content {
  --stt-navy: #22384f;
  --stt-soft: #4d6480;
  --stt-gold: #ffcf3f;
  --stt-green: #357d1c;
  --stt-blue: #1c5698;
  --stt-line: #dce6ef;

  /* 與 .container 及看板同一條基準線，三者才會切齊 */
  width: min(1520px, calc(100% - 56px));
  margin: 0 auto 60px;
  color: var(--stt-navy);
}

.stt-sec { margin-bottom: 44px; }

.stt-sec h2 {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--stt-navy);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 金色短線呼應看板外框的金邊 */
.stt-sec h2::before {
  content: "";
  width: 6px; height: 1.05em;
  border-radius: 3px;
  background: var(--stt-gold);
  flex: none;
}
.stt-lead { margin: 0 0 20px; color: var(--stt-soft); line-height: 1.75; }

/* --- 三張說明卡 --- */
.stt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .stt-cards { grid-template-columns: 1fr; } }

.stt-card {
  background: #fff;
  border: 1px solid var(--stt-line);
  border-top: 4px solid var(--stt-gold);
  border-radius: 18px;
  padding: 20px 22px 22px;
  box-shadow: 0 10px 26px rgba(16, 44, 72, .07);
}
.stt-card.is-green { border-top-color: var(--stt-green); }
.stt-card.is-blue  { border-top-color: var(--stt-blue); }
.stt-card img { display: block; width: 76px; height: 76px; margin-bottom: 6px; }
.stt-card h3 { margin: 0 0 6px; font-size: 1.08rem; color: var(--stt-navy); }
.stt-card p  { margin: 0; color: var(--stt-soft); line-height: 1.75; font-size: .95rem; }

/* --- 基本資料 --- */
.stt-spec {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  margin: 0; background: var(--stt-line);
  border: 1px solid var(--stt-line); border-radius: 16px; overflow: hidden;
}
@media (max-width: 820px) { .stt-spec { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stt-spec { grid-template-columns: 1fr; } }
.stt-spec > div { background: #fff; padding: 15px 18px; }
.stt-spec dt { font-size: .8rem; color: var(--stt-soft); margin-bottom: 3px; }
.stt-spec dd { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--stt-navy); }

/* --- 常見問題 --- */
.stt-faq {
  border: 1px solid var(--stt-line); border-radius: 16px;
  overflow: hidden; background: #fff;
}
.stt-faq details + details { border-top: 1px solid var(--stt-line); }
.stt-faq summary {
  padding: 15px 46px 15px 18px; cursor: pointer; position: relative;
  font-weight: 800; color: var(--stt-navy); list-style: none;
}
.stt-faq summary::-webkit-details-marker { display: none; }
.stt-faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); font-size: 1.35rem; font-weight: 700;
  color: var(--stt-gold); line-height: 1;
}
.stt-faq details[open] summary::after { content: "\2212"; }
.stt-faq summary:hover { background: #f9fbfe; }
.stt-faq summary:focus-visible { outline: 3px solid var(--stt-gold); outline-offset: -3px; }
.stt-faq details p {
  margin: 0; padding: 0 18px 17px; color: var(--stt-soft); line-height: 1.8; font-size: .95rem;
}
.stt-faq strong { color: var(--stt-navy); }

/* --- 其他工具 --- */
.stt-links { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.stt-links a {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--stt-line); background: #fff;
  font-weight: 700; font-size: .92rem; color: var(--stt-navy);
}
.stt-links a:hover { border-color: var(--stt-gold); background: #fffdf4; }

.stt-note {
  margin: 0; padding-top: 18px; border-top: 1px solid var(--stt-line);
  font-size: .84rem; color: var(--stt-soft); line-height: 1.75;
}

/* --- 技術說明：流程圖與狀態標示 --- */
.stt-status {
  margin: 0 0 18px; padding: 11px 15px; border-radius: 10px;
  font-size: .92rem; line-height: 1.7;
}
.stt-status.is-planned { background: #fff8e6; border: 1px solid #f0d089; color: #8a6316; }
.stt-status.is-live    { background: #f1faf3; border: 1px solid #a9dcb9; color: #256b3c; }

.stt-figure { margin: 0 0 26px; }
/* 圖夠寬才讀得清楚，手機上讓它橫向捲動而不是縮到看不見 */
.stt-figscroll { overflow-x: auto; padding-bottom: 6px; }
.stt-figscroll svg {
  display: block; width: 100%; min-width: 420px; height: auto;
}
.stt-figure figcaption {
  margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--stt-gold);
  font-size: .86rem; color: var(--stt-soft); line-height: 1.7;
}

.stt-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
@media (max-width: 900px) { .stt-tech-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .stt-tech-grid { grid-template-columns: 1fr; } }
.stt-tech-grid article {
  background: #fff; border: 1px solid var(--stt-line);
  border-radius: 14px; padding: 16px 18px;
}
.stt-tech-grid h3 { margin: 0 0 6px; font-size: 1rem; color: var(--stt-navy); }
.stt-tech-grid p  { margin: 0; font-size: .91rem; line-height: 1.75; color: var(--stt-soft); }


/* --- 技術說明：實際輸出截圖 + 流程圖並排 --- */
/* 左欄固定成截圖的合理寬度，右欄吃掉剩下的空間。
   來源畫面只有 352×240，檔案是 2 倍放大存的；顯示超過 460px
   就只是把模糊放大，所以左欄不用 fr 而是給固定上限。 */
.stt-pipeline {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 24px; align-items: start;
}
@media (max-width: 900px) { .stt-pipeline { grid-template-columns: 1fr; } }

.stt-shot img {
  display: block; width: 100%; max-width: 460px; height: auto;
  border-radius: 14px; border: 1px solid var(--stt-line);
  background: #0c1b2f;
}
.stt-shotcap { margin: 8px 0 0; max-width: 460px; font-size: .82rem; color: var(--stt-soft); }

/* 圖例：用色塊直接對應截圖上的三種標記 */
.stt-legend { list-style: none; margin: 12px 0 0; padding: 0; max-width: 460px;
              display: flex; flex-direction: column; gap: 7px; }
.stt-legend li { display: flex; align-items: center; gap: 9px;
                 font-size: .88rem; color: var(--stt-soft); line-height: 1.5; }
.stt-legend i { flex: none; width: 22px; height: 4px; border-radius: 2px; }
.stt-legend .k-red    { background: #e0492a; }
.stt-legend .k-yellow { background: #ffcf3f; }
.stt-legend .k-blue   { background: #2f9ae0; }

/* 為什麼不用通過率 */
.stt-why {
  margin-top: 22px; padding: 15px 18px; border-radius: 12px;
  background: #fff; border: 1px solid var(--stt-line);
  font-size: .91rem; line-height: 1.85; color: var(--stt-soft);
}
.stt-why strong { display: block; color: var(--stt-navy); font-size: 1rem; margin-bottom: 4px; }
.stt-why b { color: var(--stt-navy); }
.stt-why span {
  display: block; margin: 8px 0 0; padding: 8px 12px;
  border-radius: 8px; font-size: .89rem;
}
.stt-why .stt-why-a { background: #f4fbf6; border: 1px solid #a9dcb9; color: #26794a; }
.stt-why .stt-why-b { background: #fdf2ef; border: 1px solid #f0b5a6; color: #b8341a; }