@charset "UTF-8";

/* =====================================================================
   工研院投資地圖網 — 前台 內頁專屬樣式（content.css）
   內頁載入（近期活動列表 / 活動資訊 / 活動報名 / 諮詢申請 / 政策頁等）；
   共用 token / 元件請見 style.css；首頁專屬請見 index.css。
   ---------------------------------------------------------------------
   目錄（隨內頁切版逐步填入）
     1. 內頁版面（內容容器 / 列表卡）
     2. Breadcrumb（麵包屑）
     3. Pagination（分頁）
     4. Stepper（報名 / 諮詢 多步驟步驟條）
     5. 活動資訊（活動詳情頁）
     6. 表單步驟版面（諮詢 / 報名）
     7. 政策長文排版（隱私權 / 資訊安全）
     8. Empty State（無資料）
   8.5. Icon Font（Lineicons 內頁圖標）
     9. Style Guide（元件庫展示頁）
    10. RWD（md ≤ 1199 / sm ≤ 767）
   ===================================================================== */


/* =====================================================================
   1. 內頁版面
   ===================================================================== */
.page-inner {
  background: var(--color-bg-lighter);
  padding-block: var(--space-24) var(--space-40);
}
.page-inner__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-32);
}


/* =====================================================================
   2. Breadcrumb（麵包屑）
   ===================================================================== */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-20);
  font-size: var(--font-size-body-s);
}
.breadcrumb__item { color: var(--color-text-dark); }
.breadcrumb__item:hover { color: var(--color-primary); }
.breadcrumb__item[aria-current="page"] {
  color: var(--color-text-base);
  font-weight: var(--font-weight-bold);
  pointer-events: none;
}
.breadcrumb__sep { color: var(--color-border-dark); }


/* =====================================================================
   3. Pagination（分頁）
   ===================================================================== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
}
.pagination__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body-m);
  color: var(--color-text-base);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.pagination__btn img { width: var(--icon-20); height: var(--icon-20); }
.pagination__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
  pointer-events: none;
}
.pagination__btn:disabled,
.pagination__btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination__ellipsis {
  min-width: 32px;
  text-align: center;
  color: var(--color-text-dark);
}
.pagination__total {
  margin-left: var(--space-8);
  font-size: var(--font-size-body-s);
  color: var(--color-text-dark);
}
.pagination__perpage {
  width: auto;
  min-height: 40px;
  min-width: 96px;
  padding-block: var(--space-6);
}


/* =====================================================================
   5. 活動資訊（活動詳情頁）
   版面：標題（跨欄）→ 重點資訊列（跨欄）→ 兩欄區（左 正文+附件 / 右 封面圖+主辦資訊）→ 報名按鈕。
   封面圖與主辦資訊卡皆為選填，後台未上稿時整塊不輸出即可，版面自動補滿。
   ===================================================================== */
/* 頂列：麵包屑（左） + 返回列表（右） */
.event-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-20);
}
.event-topbar .breadcrumb { margin-bottom: 0; }
.event-back { flex: 0 0 auto; }
.event-back img { width: var(--icon-20); height: var(--icon-20); }

/* 內容卡 */
.event-detail {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--space-40);
}

/* 標題（跨欄） */
.event-detail__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary-dark);
  line-height: 1.3;
  margin-bottom: var(--space-20);
}

/* 重點資訊列（跨欄）：報名截止 / 活動時間 / 活動地點 */
.event-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-32);
  padding: var(--space-16) 0;
  margin-bottom: var(--space-32);
  border-block: 1px solid var(--color-border-light);
}
.event-highlights__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-dark);
}
.event-highlights__item img { width: var(--icon-20); height: var(--icon-20); flex: 0 0 auto; }
.event-highlights__item strong { color: var(--color-text-base); font-weight: var(--font-weight-bold); }
/* 報名截止：強調 */
.event-highlights__item--deadline { color: var(--color-danger); }
.event-highlights__item--deadline strong { color: var(--color-danger); }

/* 兩欄區 */
.event-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-40);
  align-items: start;
}
/* 無封面圖且無主辦卡時：側欄隱藏，正文改單欄滿版 */
.event-detail__grid--single { grid-template-columns: 1fr; }
.event-detail__main { display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }
.event-detail__side { display: flex; flex-direction: column; gap: var(--space-20); min-width: 0; }
/* flex / grid 子項需 min-width:0，否則寬表格（nowrap）會把欄位撐破，
   導致整個 body 溢出、產生「整頁」橫向捲軸而非表格內部捲軸 */
.event-detail__body,
.event-detail__files,
.event-detail__cover,
.event-info-card { min-width: 0; max-width: 100%; }

/* 左欄上方：內容編輯器上稿正文（富文本 / prose）
   後台 WYSIWYG 輸出的是裸標籤（無 class），故此處一律用元素選擇器涵蓋；
   圖片與表格皆限制不超過容器寬度，表格過寬時由 .table-wrap 產生橫向捲軸。 */
.event-detail__body { color: var(--color-text-base); line-height: 1.9; }
.event-detail__body > :first-child { margin-top: 0; }
.event-detail__body > :last-child { margin-bottom: 0; }
.event-detail__body p { margin: 0 0 var(--space-16); }
.event-detail__body h2 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-base);
  margin: var(--space-24) 0 var(--space-12);
}
.event-detail__body h3 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-base);
  margin: var(--space-20) 0 var(--space-8);
}
.event-detail__body ul,
.event-detail__body ol { margin: 0 0 var(--space-16); padding-left: var(--space-24); }
.event-detail__body ul { list-style: disc; }
.event-detail__body ol { list-style: decimal; }
.event-detail__body li { line-height: 1.9; color: var(--color-text-dark); }
.event-detail__body li + li { margin-top: var(--space-4); }
.event-detail__body strong { font-weight: var(--font-weight-bold); color: var(--color-text-base); }
.event-detail__body a { color: var(--color-primary); text-decoration: underline; }
.event-detail__body a:hover { color: var(--color-primary-dark); }

/* 內嵌圖片：最寬 100%、等比縮放 */
.event-detail__body figure { margin: var(--space-16) 0; }
.event-detail__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-16) 0;
  border-radius: var(--radius-md);
}
.event-detail__body figure img { margin: 0; }
.event-detail__body figcaption {
  margin-top: var(--space-8);
  font-size: var(--font-size-body-s);
  color: var(--color-text-dark);
  text-align: center;
}

/* 表格（共用）：正文／元件庫表格一律包一層 .table-wrap，限制寬度並在過寬時橫向捲軸。
   樣式掛在 .table-wrap 上（非綁定活動詳情），任何頁面包此容器的表格皆適用。 */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 var(--space-16);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body-s);
}
.table-wrap th,
.table-wrap td {
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-border-light);
  text-align: left;
  vertical-align: top;
  white-space: nowrap; /* 欄位不擠壓，內容總寬超過容器時觸發橫向捲軸 */
}
.table-wrap thead th {
  background: var(--color-bg-lighter);
  color: var(--color-text-base);
  font-weight: var(--font-weight-bold);
}
.table-wrap tbody tr:nth-child(even) { background: var(--color-bg-lighter); }

/* 左欄下方：附件 */
.event-detail__files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-border-light);
}
.event-detail__files-label {
  flex: 0 0 auto;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-base);
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  background: var(--color-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body-m);
  color: var(--color-text-base);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.file-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.file-chip img { width: var(--icon-20); height: var(--icon-20); flex: 0 0 auto; }

/* 右欄：封面圖（選填） */
.event-detail__cover {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* 右欄：主辦單位資訊卡（選填，欄位皆非必填） */
.event-info-card {
  background: var(--color-bg-lighter);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-20);
}
.event-info-card__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border-default);
}
.event-info-card__list { display: flex; flex-direction: column; gap: var(--space-12); }
.event-info-row__label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-body-s);
  color: var(--color-text-dark);
  margin-bottom: 2px;
}
.event-info-row__label img { width: var(--icon-20); height: var(--icon-20); flex: 0 0 auto; }
.event-info-row__value {
  color: var(--color-text-base);
  line-height: 1.6;
  word-break: break-word;
}

/* 行動按鈕（跨欄置中） */
.event-detail__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-40);
}
.event-detail__submit {
  min-width: 200px;
  padding-block: var(--space-12);
}


/* =====================================================================
   6. 表單步驟版面（活動報名 step1 / step2 / 完成）
   ===================================================================== */
/* 報名內容卡（與 .event-detail 同風格） */
.reg-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--space-40);
}
.reg-card__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary-dark);
  text-align: center;
  line-height: 1.3;
  margin-bottom: var(--space-32);
}

/* --- step1：個資告知須知（可捲動框） --- */
.reg-notice {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-lighter);
  padding: var(--space-24);
  max-height: 380px;
  overflow-y: auto;
  color: var(--color-text-base);
  line-height: 1.9;
  scrollbar-width: thin;                                       /* Firefox */
  scrollbar-color: var(--color-border-dark) transparent;
}
.reg-notice::-webkit-scrollbar { width: 12px; }
.reg-notice::-webkit-scrollbar-track { background: transparent; }
.reg-notice::-webkit-scrollbar-thumb {
  background: var(--color-border-dark);
  border-radius: 999px;
  border: 3px solid var(--color-bg-lighter);                   /* 與底色同色內縮，thumb 視覺較細圓 */
}
.reg-notice::-webkit-scrollbar-thumb:hover { background: var(--color-text-dark); }
.reg-notice__lead { margin-bottom: var(--space-12); }
.reg-notice ol { margin: 0; padding-left: var(--space-20); list-style: decimal; }
.reg-notice > ol > li { margin-bottom: var(--space-8); }
.reg-notice ol ol,
.reg-notice ul { margin: var(--space-4) 0 0; padding-left: var(--space-20); }
.reg-notice ol ol { list-style: lower-alpha; }
.reg-notice ul { list-style: none; padding-left: 0; }

/* 同意 checkbox（置中一列） */
.reg-agree { display: flex; justify-content: center; margin-top: var(--space-24); }

/* --- step2：分區 + 兩欄表單 --- */
.reg-section { margin-bottom: var(--space-32); }
.reg-section:last-of-type { margin-bottom: 0; }
.reg-section__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary-dark);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-20);
  border-bottom: 2px solid var(--color-border-default);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24) var(--space-32);
}
.form-grid .form-group { margin-bottom: 0; }
.form-grid__full { grid-column: 1 / -1; }

/* 動作按鈕列 */
.reg-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-32);
}
.reg-actions .btn { min-width: 150px; }

/* --- 完成頁 --- */
.reg-result {
  text-align: center;
  padding: var(--space-24) var(--space-16);
}
.reg-result__icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-24);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-success);
  color: var(--color-text-white);
  border-radius: var(--radius-round);
  font-size: 2rem;
}
.reg-result__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-base);
  margin-bottom: var(--space-16);
}
.reg-result__desc { color: var(--color-text-dark); line-height: 1.9; margin-bottom: var(--space-24); }
/* 編號回顯：父層 reg-result 為 text-align:center，inline-flex 自動置中 */
.reg-result__no {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-bottom: var(--space-32);
  padding: var(--space-12) var(--space-24);
  background: var(--color-bg-lighter);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body-m);
  color: var(--color-text-dark);
}
.reg-result__no strong {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  letter-spacing: 0.02em;
}
.reg-result__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-16); }


/* --- 諮詢申請 step1–4 --- */
/* 分段主標題（一、二、三、四） */
.consult-card__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary-dark);
  line-height: 1.3;
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-16);
  border-bottom: 2px solid var(--color-border-light);
  position: relative;
}
/* 標題下方主色強調短線 */
.consult-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--color-primary);
}

/* ============================================================
   step1 輔導申請書「封面說明頁」專屬版型（consult-cover）
   ============================================================ */
.consult-cover {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;                       /* 讓 hero 漸層滿版貼齊卡片圓角 */
}

/* --- Hero：深藍漸層橫幅 --- */
.consult-hero {
  position: relative;
  padding: var(--space-40) var(--space-40) var(--space-32);
  text-align: center;
  color: var(--color-text-white);
  background: linear-gradient(135deg, var(--color-primary-darker) 0%, var(--color-primary) 100%);
  overflow: hidden;
}
/* 右上斜向光暈裝飾 */
.consult-hero::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.consult-hero__eyebrow {
  position: relative;
  display: inline-block;
  font-size: var(--font-size-body-s);
  letter-spacing: 0.12em;
  padding: var(--space-4) var(--space-16);
  margin-bottom: var(--space-16);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-round, 999px);
  color: var(--color-text-white);
}
.consult-hero__title {
  position: relative;
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-heavy);
  line-height: 1.35;
  margin: 0 0 var(--space-16);
  color: var(--color-text-white);
}
.consult-hero__sub {
  position: relative;
  font-size: var(--font-size-body-m);
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

/* --- 內文容器 --- */
.consult-cover__body { padding: var(--space-40); }

/* --- 引言段落（純文章排版，可讀寬度） --- */
.consult-doc {
  margin: 0 auto;
  color: var(--color-text-base);
  line-height: 1.95;
}
.consult-doc p { margin: 0 0 var(--space-16); }
.consult-doc p:last-child { margin-bottom: 0; }
/* 首段加粗強調，左側主色細線 */
.consult-doc__lead {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  padding-left: var(--space-16);
  border-left: 3px solid var(--color-primary);
}
/* 個資告知：淺底圓角小框 + icon */
.consult-doc__note {
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;
  margin-top: var(--space-20) !important;
  padding: var(--space-12) var(--space-16);
  background: var(--color-bg-lighter);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body-s);
  color: var(--color-text-dark);
  line-height: 1.7;
}
.consult-doc__note i { flex: 0 0 auto; margin-top: 0.2em; color: var(--color-secondary); }

/* --- 置中分隔標題（線條 + 文字 + 線條） --- */
.consult-divider {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: var(--space-32) 0 var(--space-24);
}
.consult-divider::before,
.consult-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-light);
}
.consult-divider__text {
  flex: 0 0 auto;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary-dark);
}

/* --- 同意 checkbox：強調列 --- */
.consult-agree {
  margin-top: var(--space-32);
  padding: var(--space-20) var(--space-24);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-md);
}
.consult-agree .checkbox { align-items: flex-start; }

/* step2–4 問題 label：統一 Body.S、顏色比選項淺、自動前置 Q 編號 */
.js-consult-form { counter-reset: q; }
.js-consult-form .form-label,
.js-consult-form .consult-group__title {
  font-size: var(--font-size-body-s);
  color: var(--color-text-dark);
}
.js-consult-form .form-label::before,
.js-consult-form .consult-group__title::before {
  counter-increment: q;
  content: "Q" counter(q) ". ";
}
/* step2 區塊間距與其他步驟一致 */
.js-consult-form .form-grid { margin-bottom: var(--space-32); }

/* 子分組（投資動機 / 諮詢或專業支援…） */
.consult-group { margin-bottom: var(--space-32); }
.consult-group:last-child { margin-bottom: 0; }
.consult-group__title {
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-base);
  margin-bottom: var(--space-12);
}
.consult-group__title--required::after {
  content: " *（必填）";
  color: var(--color-danger);
}
.consult-group__hint { font-weight: var(--font-weight-normal); color: var(--color-text-dark); }
.consult-group__note { margin-top: var(--space-8); font-size: var(--font-size-body-s); color: var(--color-text-dark); }

/* 選項多欄排列（checkbox / radio） */
.choice-grid { display: grid; gap: var(--space-16) var(--space-24); }
.choice-grid--2 { grid-template-columns: repeat(2, 1fr); }
.choice-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 「其他」：選項 + 填寫框並排；選項不換行，未勾選時填寫框停用 */
.choice-other { display: flex; align-items: center; gap: var(--space-8); }
.choice-other > .checkbox,
.choice-other > .radio { flex: 0 0 auto; }
.choice-other .checkbox__label,
.choice-other .radio__label { white-space: nowrap; }
.choice-other .form-control { flex: 1 1 auto; min-width: 0; max-width: 220px; }
/* 必填複選組錯誤 */
.consult-group .form-error { display: none; margin-top: var(--space-8); }
.consult-group.is-error .form-error { display: block; }
.consult-group.is-error .consult-group__title { color: var(--color-danger); }
/* BUG修正：群組必填錯誤（整題未勾任何項）時，停用中的「其他」補充框不應誤染紅；
   僅當勾選「其他」(框啟用) 卻沒填內容時，才由 .form-group.is-error .form-control 維持紅框 */
.consult-group.is-error .choice-other .form-control:disabled { border-color: var(--color-border-default); }


/* =====================================================================
   7. 政策長文排版（隱私權 / 資訊安全）
   ===================================================================== */
.policy {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--space-40);
}
.policy__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heavy);
  color: var(--color-primary-dark);
  line-height: 1.3;
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-border-light);
}
/* 內文（裸標籤富文本） */
.policy__body { color: var(--color-text-base); line-height: 1.9; }
.policy__body > :first-child { margin-top: 0; }
.policy__body p { margin: 0 0 var(--space-16); }
.policy__body h2 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  margin: var(--space-32) 0 var(--space-12);
}
.policy__body ul,
.policy__body ol { margin: 0 0 var(--space-16); padding-left: var(--space-24); }
.policy__body ul { list-style: disc; }
.policy__body ol { list-style: decimal; }
.policy__body li { margin-bottom: var(--space-8); line-height: 1.9; }
.policy__body a { color: var(--color-primary); text-decoration: underline; }
.policy__body a:hover { color: var(--color-primary-dark); }


/* =====================================================================
   8.5 Icon Font（Lineicons）— 內頁圖標
   內頁改用 Lineicons 字型圖示（vendors/lineicons）。尺寸用 font-size、
   顏色預設 inherit（多數情境直接繼承父層 color，可隨 hover/active 連動）；
   僅深底 header、淺底 footer 圓圈需明確指定顏色。此檔僅內頁載入，首頁不受影響。
   ===================================================================== */
/* Header / Footer 的字型圖標樣式已移至 style.css（首頁與內頁共用）。
   以下為內頁專屬。分頁 / 活動列 / 活動詳情：顏色一律繼承父層 */
.pagination__btn .lni { font-size: 1.25rem; }
.event-back .lni { font-size: 1.125rem; }
.event-highlights__item .lni { font-size: 1.125rem; }
.file-chip .lni { font-size: 1.125rem; }
/* styleguide 展示用 */
.sg .lni { font-size: 1.25rem; }


/* =====================================================================
   9. Style Guide（元件庫展示頁）
   ===================================================================== */
.sg {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: var(--space-40) var(--space-24) var(--space-56);
}
.sg__head { margin-bottom: var(--space-40); }
.sg__head .heading-1 { color: var(--color-primary-dark); margin-bottom: var(--space-8); }
.sg__section { margin-bottom: var(--space-40); }
.sg__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-16);
  border-bottom: 2px solid var(--color-border-default);
}
.sg-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.sg-card .heading-1,
.sg-card .heading-2,
.sg-card .heading-3,
.sg-card .heading-4 { color: var(--color-text-base); }
.sg__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.sg__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16) var(--space-24); }
.sg__grid-2 .form-group { margin-bottom: 0; }
.sg__col-span { grid-column: 1 / -1; }

.sg__swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-12);
}
.sg-swatch { display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-size-body-s); color: var(--color-text-dark); }
.sg-swatch__chip {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.sg-swatch__chip--border { box-shadow: inset 0 0 0 1px var(--color-border-default); }

/* 區塊說明文字 */
.sg__hint { font-size: var(--font-size-body-s); color: var(--color-text-dark); margin: 0; }
/* 焦點環示意：靜態重現全域 :focus-visible 的雙色環（內白＋外深藍），
   方便交接時直接看見效果，不必真的用鍵盤 Tab 才看得到 */
.sg-demo-ring { outline: 2px solid var(--color-border-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-white); }
/* 深色底示意條：驗證深色／彩色背景下內白環是否凸顯 */
.sg-darkstrip { background: var(--color-primary-darker); padding: var(--space-20); border-radius: var(--radius-md); }
.sg-darkstrip .sg__hint { color: var(--color-text-white); }
.sg-darkstrip__link { color: var(--color-text-white); padding: var(--space-6); }

@media (max-width: 767px) {
  .sg { padding: var(--space-24) var(--space-16) var(--space-40); }
  .sg__grid-2 { grid-template-columns: 1fr; }
}


/* =====================================================================
   10. RWD（md ≤ 1199 / sm ≤ 767）— 內頁元件響應式
   ===================================================================== */
@media (max-width: 1199px) {
  /* 活動詳情：側欄縮窄 */
  .event-detail__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-24); }
  /* 諮詢：產業 4 欄改 2 欄 */
  .choice-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .page-inner__container { padding-inline: var(--space-16); }
  /* 分頁：手機改為置中換行、筆數資訊另起一行 */
  .pagination { gap: var(--space-6); }
  .pagination__total,
  .pagination__perpage { flex-basis: 100%; margin-left: 0; text-align: center; }
  .pagination__perpage { min-width: 0; max-width: 140px; margin-inline: auto; }

  /* 活動詳情：頂列堆疊、兩欄改單欄、卡片內距縮小 */
  .event-topbar { flex-direction: column; align-items: stretch; }
  .event-back { align-self: flex-end; }
  .event-detail { padding: var(--space-24) var(--space-20); }
  /* 兩欄拆平：display:contents 讓左右欄子項上浮到單欄 flow，再用 order 排成
     封面圖 → 正文 → 附件 → 主辦資訊卡。
     需覆蓋桌機的 align-items:start，否則子項在交叉軸不撐滿（卡片會縮成內容寬）。 */
  .event-detail__grid { display: flex; flex-direction: column; gap: var(--space-20); align-items: stretch; }
  .event-detail__main,
  .event-detail__side { display: contents; }
  .event-detail__cover { order: 1; }
  .event-detail__body  { order: 2; }
  .event-detail__files { order: 3; }
  .event-info-card     { order: 4; }
  .event-detail__files { align-items: flex-start; }
  .event-detail__submit { width: 100%; }

  /* 報名表單 / 政策頁：卡片內距縮小、表單改單欄、按鈕滿寬堆疊 */
  .reg-card,
  .policy { padding: var(--space-24) var(--space-20); }
  .form-grid { grid-template-columns: 1fr; }
  .reg-actions { flex-direction: column; }
  .reg-actions .btn { width: 100%; }
  .reg-result__actions .btn { width: 100%; }

  /* 諮詢：選項一律單欄、其他填寫框放寬 */
  .choice-grid--2,
  .choice-grid--4 { grid-template-columns: 1fr; }
  .choice-other .form-control { max-width: none; }

  /* 諮詢 step1 封面頁：hero 與內距縮小 */
  .consult-hero { padding: var(--space-32) var(--space-20) var(--space-24); }
  .consult-hero__title { font-size: var(--font-size-h2); }
  .consult-cover__body { padding: var(--space-24) var(--space-20); }
  .consult-divider { gap: var(--space-12); }
}