@charset "UTF-8";
/* ==========================================================================
   Legacy HTML 相容層（決策 D2）
   規範來源：docs/05-PAGE-SPECS.md §6

   news_content 是 15 筆 RadEditor / Word / Excel 貼上的內容，資料庫零改動。
   本檔負責收束失控的固定寬度、字級與字體，並支援 LegacyHtml.vb 產生的容器：
     .dt-table-scroll   最外層表格的橫向滑動容器
     .dt-longtable      超大內容（news_id=4 為 182KB、id=17 為 101KB）摺疊
     .dt-gallery        圖片牆（news_id=23 / 25）
     .dt-embed          內嵌框架（news_id=9 的 Google Maps）
     .dt-preformatted   以連續空白排欄的內容（news_id=3）
   重構 2026-08
   ========================================================================== */

.legacy-content {
  line-height: 1.6;
  color: var(--dt-text);
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   固定寬度收束
   -------------------------------------------------------------------------- */
.legacy-content img,
.legacy-content video {
  max-width: 100%;
  height: auto;
}

/* 保留 img 的 width/height 屬性可避免 CLS，尺寸溢出由上面兩行收束。
   其餘元素的固定寬度一律收束。 */
.legacy-content div[width],
.legacy-content span[width],
.legacy-content p[width] { max-width: 100%; }

.legacy-content div[style*="width"],
.legacy-content span[style*="width"],
.legacy-content p[style*="width"] { max-width: 100% !important; }

/* --------------------------------------------------------------------------
   行內字級與字體統一
   原文混用 14pt / 18px、times new roman / verdana / arial
   -------------------------------------------------------------------------- */
.legacy-content [style*="font-size"] { font-size: revert !important; }
.legacy-content font[size] { font-size: revert !important; }
.legacy-content [style*="font-family"] { font-family: var(--dt-font-body) !important; }
.legacy-content font[face] { font-family: var(--dt-font-body) !important; }

/* 行內顏色（rgb(153,51,0) 棕紅、rgb(51,51,255) 亮藍）為品牌歷史色，
   刻意保留不覆寫。.legacy-content 一律白底，不會出現深底低對比組合。 */

/* --------------------------------------------------------------------------
   表格：容器負責橫向滑動，表格本身維持 display:table
   （不用 table{display:block}，那會讓內部佈局在部分瀏覽器跑掉）
   -------------------------------------------------------------------------- */
.dt-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin-bottom: var(--dt-sp-4);
}
.dt-table-scroll:focus-visible {
  outline: 3px solid var(--dt-accent-bright);
  outline-offset: 2px;
}
/* 右側漸層提示還有內容可滑動 */
.dt-table-scroll::after {
  content: "";
  position: sticky;
  right: 0; top: 0;
  float: right;
  width: 24px; height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
  pointer-events: none;
}

.legacy-content table { border-collapse: collapse; }
.dt-table-scroll > table { max-width: none; }

.legacy-content td, .legacy-content th {
  padding: var(--dt-sp-2) var(--dt-sp-3);
  vertical-align: top;
}
.legacy-content th { text-align: left; }

/* --------------------------------------------------------------------------
   超大內容摺疊（桌機由 site.js 設為展開，手機預設收合）
   -------------------------------------------------------------------------- */
.dt-longtable { margin-bottom: var(--dt-sp-4); }
.dt-longtable > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9375rem;
  padding: var(--dt-sp-3) var(--dt-sp-4);
  background: var(--dt-surface);
  border: var(--dt-border);
  border-radius: var(--dt-radius);
  list-style-position: inside;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.dt-longtable > summary:hover { background: var(--dt-steel-100); }
.dt-longtable > summary:focus-visible {
  outline: 3px solid var(--dt-accent-bright);
  outline-offset: 2px;
}
.dt-longtable[open] > summary { margin-bottom: var(--dt-sp-4); }

/* --------------------------------------------------------------------------
   圖片牆 → 響應式 gallery
   -------------------------------------------------------------------------- */
.dt-gallery {
  display: grid;
  gap: var(--dt-sp-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-bottom: var(--dt-sp-4);
}
.dt-gallery figure { margin: 0; }
.dt-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--dt-border);
  border-radius: var(--dt-radius);
  background: var(--dt-steel-100);
}

/* --------------------------------------------------------------------------
   內嵌框架（Google Maps）
   比例由 LegacyHtml 依原始 width/height 以行內 aspect-ratio 設定
   -------------------------------------------------------------------------- */
.dt-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;      /* 無原始尺寸時的預設值 */
  margin-bottom: var(--dt-sp-4);
  background: var(--dt-steel-100);
  border: var(--dt-border);
  border-radius: var(--dt-radius);
  overflow: hidden;
}
.dt-embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   以連續空白排欄的內容（news_id=3）
   對齊空白是 U+00A0（不換行空白），依定義不會折行，
   故手機上的需求是「不撐破版面」→ 允許容器橫向滑動，而非切換 white-space。
   -------------------------------------------------------------------------- */
.dt-preformatted {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   標題（LegacyHtml 已將內容內的 h1 降為 h2、h2 降為 h3…）
   -------------------------------------------------------------------------- */
.legacy-content h2 { font-size: var(--bs-h2-font-size, 1.75rem); margin: var(--dt-sp-6) 0 var(--dt-sp-3); }
.legacy-content h3 { font-size: 1.4rem; margin: var(--dt-sp-5) 0 var(--dt-sp-2); }
.legacy-content h4 { font-size: 1.2rem; margin: var(--dt-sp-5) 0 var(--dt-sp-2); }
.legacy-content h5, .legacy-content h6 { font-size: 1.05rem; margin: var(--dt-sp-4) 0 var(--dt-sp-2); }

/* --------------------------------------------------------------------------
   段落與清單
   -------------------------------------------------------------------------- */
.legacy-content p { margin: 0 0 var(--dt-sp-4); }
.legacy-content p:empty { display: none; }
.legacy-content ul,
.legacy-content ol { padding-left: var(--dt-sp-5); margin-bottom: var(--dt-sp-4); }
.legacy-content hr {
  border: 0;
  border-top: var(--dt-border);
  margin: var(--dt-sp-5) 0;
}

/* --------------------------------------------------------------------------
   連結
   -------------------------------------------------------------------------- */
.legacy-content a { color: var(--dt-accent); }
.legacy-content a:hover { color: var(--dt-accent-hover); }

/* --------------------------------------------------------------------------
   列印：展開所有摺疊、解除滑動裁切
   -------------------------------------------------------------------------- */
@media print {
  .dt-table-scroll,
  .dt-preformatted { overflow: visible !important; }
  .dt-table-scroll::after { display: none; }
  .dt-longtable > summary { display: none; }
  .dt-longtable > .dt-longtable-body { display: block !important; }
  .dt-embed { display: none; }        /* 內嵌地圖列印無意義 */
  .dt-gallery { grid-template-columns: repeat(3, 1fr); }
}