/* 色票（可依品牌調整） */
:root {
  --bg: #0f0f10;
  --fg: #e6e6e6;
  --fg-muted: #bdbdbd;
  --panel-bg: #171717;
  --panel-elev: #1c1c1c;

  --accent: #d8a84d;      /* 主邊框/強調色（沿用金色系） */
  --accent-strong: #ffcc66;
  --border: #2b2b2b;

  --link: #89bfff;        /* 在深色底上與正文 4.5:1 對比 */
  --link-hover: #cfe2ff;

  --focus: #ffcc66;       /* 可視焦點 */
}

/* 1) 全站排版：相對字級 + 舒適行距 */
html { font-size: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC",
               "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;  /* 17px — 全站基準 */
  line-height: 1.65;     /* 舒適閱讀行距 */
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* 2) 容器與基本間距 */
.container {
  max-width: 72rem;      /* ~1152px */
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

.page-title {
  font-size: 1.625rem;   /* 26px @ 16px base */
  line-height: 1.3;
  margin: 1rem 0 1.25rem;
  color: var(--accent-strong);
}

/* 3) 連結樣式（對比與可用性） */
a { color: var(--link); text-decoration: underline; }
a:hover, a:focus { color: var(--link-hover); }
a:visited { color: #b7cfff; }

/* 4) 可視焦點 */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
  outline: 0.125rem solid var(--focus);
  outline-offset: 0.125rem;
  box-shadow: none;
}

/* 5) Skip link（由 Template 產生） */
.skip-link {
  position: absolute;
  left: -999rem;
  top: 0;
  z-index: 1000;
  padding: .5rem .75rem;
  background: var(--panel-elev);
  color: var(--fg);
  border: 0.0625rem solid var(--focus);
  border-radius: .5rem;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* 6) Header / Footer 細節 */
.header .site-title {
  font-size: 1.25rem;
  margin: 0;
}
.header .divider { border: 0; border-top: 0.0625rem solid var(--border); }

.footer { margin-top: 2rem; border-top: 0.0625rem solid var(--border); }
.footer-inner p { margin: .25rem 0; color: var(--fg-muted); }

/* 7) Panel（統一卡片樣式，符合對比） */
.panel {
  background: var(--panel-bg);
  border: 0.0625rem solid var(--accent);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  color: var(--fg);
}
.panel + .panel { margin-top: 1rem; }

.panel .panel-heading {
  margin: 0 0 .75rem;
  padding: 0 0 .25rem;
  font-weight: 700;
  color: var(--accent-strong);
  border-bottom: 0.0625rem solid var(--border);
}
.panel .panel-body { padding: 0; }

/* 8) 表格（可橫向捲動、易讀） */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.table th, .table td {
  border-top: 0.0625rem solid var(--border);
  border-bottom: 0.0625rem solid var(--border);
  padding: .625rem .75rem;
  vertical-align: top;
}
.table thead th {
  background: #1e1e1e;
  color: #fff;
  font-weight: 700;
}
@media (max-width: 40rem) { /* <= 640px */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 9) 列表與段落（提升易讀性） */
ul, ol { margin: .5rem 0 1rem 1.25rem; }
li { margin: .375rem 0; }
p { margin: .5rem 0 1rem; color: var(--fg); }
.small, small { color: var(--fg-muted); }

/* 10) 首頁：命名空間，避免 legacy CSS 互相覆蓋
   ------------------------------------------------------------------ */
#home-page .wrapper-body,
#home-page .main-area,
#home-page .footer-main-area {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* （新版）首頁直向四區塊：由上到下堆疊 */
#home-page .wrapper-body > .row {
  display: flex !important;
  flex-direction: column;
  gap: 1.5rem;            /* 區塊間距一致 */
  margin: 0 !important;
  padding: 0 !important;
}

/* 左/右欄容器都吃滿寬（改為單欄） */
#home-page .col-lg-8,
#home-page .col-lg-4 {
  flex: 0 0 auto;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 右欄原三塊也改成直向堆疊 */
#home-page .main-area {
  display: flex !important;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0 !important;
  padding: 0 !important;
}

/* 面板統一寬度與外觀 */
#home-page .panel {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
#home-page .panel .panel-heading {
  margin-bottom: .5rem !important;
  padding-bottom: .375rem !important;
  font-size: 1.125rem;
  color: var(--accent-strong);
  border-bottom: 1px solid rgba(216,168,77,.35);
}
#home-page .panel .panel-body {
  padding: 0 !important;
  color: var(--fg);
  background: transparent !important;
}

/* 11) 表單細節（全站通用） */
.form-control {
  width: 100%;
  color: var(--fg);
  background: #101010;
  border: 1px solid #8a7340;
  border-radius: .5rem;
  padding: .75rem .875rem;
  font-size: 1.125rem;   /* 18px — 閱讀/輸入區 */
  line-height: 1.5;
}
.form-control:focus {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 0.125rem rgba(255, 204, 102, .25);
}

/* 表單元素字級統一 */
.ui-inputfield,
.ui-selectonemenu-label {
  font-size: 1.125rem !important;  /* 18px */
  padding: .75rem .875rem;
}
label {
  font-size: 1.0625rem;  /* 17px — 跟 body 一致 */
}
.form-group label,
.form-group legend,
.reg-page label,
.reg-page legend {
  margin-bottom: .5rem;
}

/* 12) 按鈕（全站通用） */
.btn {
  display: inline-block;
  font: inherit;
  padding: .5rem .875rem;
  border-radius: .5rem;
  border: 0.0625rem solid var(--border);
  color: var(--fg);
  background: #222;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .btn:focus { background: #2a2a2a; border-color: var(--focus); }
.btn-primary {
  background: #2d2d2d;
  border-color: var(--accent);
}
.btn-primary:hover, .btn-primary:focus { background: #353535; }

/* 13) reCAPTCHA 在深色底的間距（不改外部腳本） */
.g-recaptcha { margin-top: .75rem; }

/* 14) 動畫偏好：尊重使用者設定 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===== Fix: DB 內文帶黑字 / 淺底，導致深色主題難讀（僅首頁） ===== */
#home-page .panel .panel-body,
#home-page .panel .panel-body * {
  color: var(--fg) !important;                  /* 蓋掉 <font color=black> 等 */
  background: transparent !important;           /* 清除 DB 內嵌的淺底 */
}

/* 連結顏色維持對比 */
#home-page .panel .panel-body a {
  color: var(--link) !important;
  text-decoration: underline;
}
#home-page .panel .panel-body a:hover,
#home-page .panel .panel-body a:focus {
  color: var(--link-hover) !important;
}

/* 內文標題層級對比 */
#home-page .panel .panel-body h1,
#home-page .panel .panel-body h2,
#home-page .panel .panel-body h3,
#home-page .panel .panel-body h4,
#home-page .panel .panel-body h5,
#home-page .panel .panel-body h6 {
  color: var(--accent-strong) !important;
  margin: .75rem 0 .5rem;
}

/* 段落/列表間距 */
#home-page .panel .panel-body p { margin: .5rem 0 1rem !important; }
#home-page .panel .panel-body ul,
#home-page .panel .panel-body ol { margin: .5rem 0 1rem 1.25rem !important; }
#home-page .panel .panel-body li { margin: .375rem 0 !important; }

/* 表格在內文的樣式 */
#home-page .panel .panel-body table { width: 100%; border-collapse: collapse; }
#home-page .panel .panel-body th,
#home-page .panel .panel-body td {
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: .5rem .625rem !important;
}

/* 「要點、須知與作業下載」常見的包裹元素去底色並讓連結分行 */
#home-page .main-download .panel-body div,
#home-page .main-download .panel-body section,
#home-page .main-download .panel-body article {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
#home-page .main-download .panel-body a {
  display: block;
  margin: .375rem 0;
}

/* 小調：讓四個面板邊線與內距視覺更齊 */
#home-page .panel .panel-body > * { margin-top: 0 !important; }
#home-page .panel .panel-body p + p,
#home-page .panel .panel-body ul + p,
#home-page .panel .panel-body p + ul,
#home-page .panel .panel-body ul + ul { margin-top: .5rem !important; }

/* ===== Fix pack: footer 重疊 / 區塊同寬 / Header 對齊與配色 ===== */

/* 內容區與 footer 的安全距離，避免重疊 */
#home-page .wrapper-body { 
  margin-bottom: 2.5rem !important;
}
.footer { 
  position: static !important; 
  clear: both !important; 
  z-index: 0 !important;
}

/* 四個面板同寬，吃滿容器（避免某些舊樣式限制寬度） */
#home-page .panel,
#home-page .col-lg-8,
#home-page .col-lg-4,
#home-page .main-area,
#home-page .main-area > [class*="col-"],
#home-page .footer-main-area,
#home-page .main-time,
#home-page .main-download {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Header：標題金色、登入/網站導覽靠右
   （不改 HTML：以彈性排版將非 .site-title 的直屬子元素推到右側） */
.header .container.header-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;              /* 窄螢幕自動換行 */
}
.header .container.header-inner .site-title {
  color: var(--accent-strong) !important;
  margin: 0;
  line-height: 1.2;
}
/* 只要不是標題的直屬節點，一律推到右邊；常見情境：登入/網站導覽的容器或連結 */
.header .container.header-inner > *:not(.site-title) {
  margin-left: auto;            /* 將其推到最右側 */
}
/* 若登入/網站導覽是一串連結，讓它橫向排好間距 */
.header .container.header-inner > *:not(.site-title) a {
  margin-left: 1rem;
  white-space: nowrap;
}

/* 首頁直向四區塊間距微調（更穩定的視覺節奏） */
#home-page .wrapper-body > .row {
  display: flex !important;
  flex-direction: column;
  gap: 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Panel 標題與內容的一致內距 */
#home-page .panel .panel-heading {
  margin-bottom: .5rem !important;
  padding-bottom: .375rem !important;
  border-bottom: 1px solid rgba(216,168,77,.35) !important;
}
#home-page .panel .panel-body {
  padding: 0 !important;
}

/* 防 DB 內嵌黑字／淺底：維持深色主題可讀性 */
#home-page .panel .panel-body,
#home-page .panel .panel-body * {
  color: var(--fg) !important;
  background: transparent !important;
}

/* ===== Panel 對齊修正：統一左右內距 & 標題下線寬度 ===== */

/* 1) 所有面板統一內邊距與邊框厚度 */
#home-page .panel {
  border-width: 1px !important;
  padding: 1rem 1.25rem !important;              /* 統一左右內距 */
  box-sizing: border-box;
}

/* 2) 清掉可能來自舊樣式的額外左右 padding，避免看起來「縮進量」不同 */
#home-page .footer-main-area,
#home-page .main-area > [class*="col-"],
#home-page .main-time,
#home-page .main-download {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) 面板內容區不再額外縮進，與外層 padding 對齊 */
#home-page .panel .panel-heading,
#home-page .panel .panel-body {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) 用 ::after 畫出等寬的下劃線（取代各區塊原來不一致的 border-bottom） */
#home-page .panel .panel-heading {
  border-bottom: none !important;                /* 先拔掉原本各異的底線 */
  position: relative;
}
#home-page .panel .panel-heading::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(216, 168, 77, .35);          /* 與全站金色系一致 */
  margin-top: .375rem;                           /* 與標題行距 */
  /* 這條線會自動吃滿面板內側寬度，左右與文字齊頭 */
}

/* ===== Podcast 清單頁：局部樣式補強（僅作用於 #podcast-page） ===== */
#podcast-page .panel { margin: 1rem 0; }
#podcast-page .panel .panel-heading {
  font-size: 1.125rem;
  color: var(--accent-strong);
  border-bottom: 1px solid rgba(216,168,77,.35);
  margin-bottom: .5rem;
  padding-bottom: .375rem;
}
#podcast-page .table .ui-datatable-tablewrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#podcast-page .col-actions .btn { text-decoration: underline; }
#podcast-page .col-actions .btn:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
#podcast-page .ui-paginator .ui-paginator-page,
#podcast-page .ui-paginator .ui-paginator-next,
#podcast-page .ui-paginator .ui-paginator-prev {
  min-width: 2rem;
  min-height: 2rem;
}
#podcast-page .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ===== Podcast 清單頁：局部樣式補強（僅 #podcast-page） ===== */
#podcast-page .panel { margin: 1rem 0; }
#podcast-page .panel .panel-heading {
  font-size: 1.125rem;
  color: var(--accent-strong);
  border-bottom: 1px solid rgba(216,168,77,.35);
  margin-bottom: .5rem;
  padding-bottom: .375rem;
}
#podcast-page .table .ui-datatable-tablewrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#podcast-page .col-actions .btn { text-decoration: underline; }
#podcast-page .col-actions .btn:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
#podcast-page .ui-paginator .ui-paginator-page,
#podcast-page .ui-paginator .ui-paginator-next,
#podcast-page .ui-paginator .ui-paginator-prev {
  min-width: 2rem;
  min-height: 2rem;
}
#podcast-page .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ===== Podcast 清單頁：表格可讀性與焦點（僅 #podcast-page） ===== */
#podcast-page .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

#podcast-page .gba-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel-bg);
  color: var(--fg);
}
#podcast-page .gba-table th,
#podcast-page .gba-table td {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: .625rem .75rem;
  vertical-align: top;
}
#podcast-page .gba-table thead th {
  background: #1e1e1e;
  color: #fff;
}
#podcast-page .text-danger { color: #ff8a80 !important; }
#podcast-page .btn:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 窄螢幕可橫向捲動（若外層沒有做 overflow） */
@media (max-width: 48rem) {
  #podcast-page .gba-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* === Podcast 作品列表表格強化 (無障礙 + 對齊修正) === */
#podcast-page .work-area-table {
  margin-top: 1rem;
  padding: 1rem 0;
}

#podcast-page .gba-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: #111;
  color: #eee;
  border: 1px solid rgba(216,168,77,0.5);
}

#podcast-page .gba-table th,
#podcast-page .gba-table td {
  border: 1px solid rgba(216,168,77,0.25);
  padding: 0.75rem 1rem;
  vertical-align: top;
  word-wrap: break-word;
}

#podcast-page .gba-table th {
  background-color: #1c1c1c;
  color: #f7c562;
  font-weight: 600;
  text-align: center;
}

#podcast-page .gba-table td {
  background-color: #191919;
}

#podcast-page .gba-table tr:hover td {
  background-color: #222;
}

#podcast-page .gba-caption {
  color: #bbb;
  font-size: 0.95rem;
  display: inline-block;
  min-width: 6rem;
}

#podcast-page .text-danger {
  color: #ff6f6f;
}

/* 按鈕區塊對齊 */
#podcast-page .btn {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

#podcast-page .btn:focus {
  outline: 2px solid #f7c562;
  outline-offset: 2px;
}

/* 表格可橫向捲動，避免窄螢幕壓縮 */
@media (max-width: 768px) {
  #podcast-page .gba-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Podcast 作品列表（podcastWork.xhtml）精修 ===== */
#podcast-page .work-area-table { margin-top: 1rem; padding: 0.5rem 0 1rem; }

/* 框線、寬度、對比一致化 */
#podcast-page .gba-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#111;
  color:#eee;
  border:1px solid rgba(216,168,77,.45);
}

#podcast-page .gba-table thead th{
  background:#1c1c1c;
  color:#f7c562;                  /* 金色 */
  font-weight:600;
  text-align:center;
  border:1px solid rgba(216,168,77,.45);
  padding:.75rem 1rem;
}

#podcast-page .gba-table td{
  background:#191919;
  border:1px solid rgba(216,168,77,.25);
  padding:.75rem 1rem;
  vertical-align:top;
  word-wrap:break-word;
}

/* 斑馬線與 hover，提升掃讀 */
#podcast-page .gba-table tbody tr:nth-child(odd) td { background:#181818; }
#podcast-page .gba-table tbody tr:hover td { background:#222; }

/* 左欄欄寬微調，讓「播送資訊」更寬一些 */
#podcast-page .gba-table colgroup col:first-child { width:32%; }
#podcast-page .gba-table colgroup col:nth-child(2) { width:48%; }
#podcast-page .gba-table colgroup col:nth-child(3),
#podcast-page .gba-table colgroup col:nth-child(4) { width:10%; }

/* 如果頁面沒有 colgroup，也用備援選擇器 */
#podcast-page .gba-table td:nth-child(1){ width:32%; }
#podcast-page .gba-table td:nth-child(2){ width:48%; }

/* 小標籤、提醒色 */
#podcast-page .gba-caption{ color:#bbb; display:inline-block; min-width:6rem; }
#podcast-page .text-danger{ color:#ff6f6f; }

/* 操作按鈕區聚焦可見 */
#podcast-page .btn{ padding:.25rem .5rem; border-radius:4px; }
#podcast-page .btn:focus{ outline:2px solid #f7c562; outline-offset:2px; }

/* 手機／窄螢幕不擠爆，允許橫向捲動 */
@media (max-width: 768px){
  #podcast-page .gba-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* 與頁尾避免重疊（若曾遇到） */
.wrapper-body{ padding-bottom:4rem; }

/* =========================
   Podcast 作品列表（podcastWork.xhtml）局部微調
   ========================= */

/* 1) 折疊選單：桌機隱藏「Toggle navigation」與邊框，保留無障礙可聚焦 */
#podcast-page .navbar,
#podcast-page .navbar-default,
#podcast-page .navbar-collapse,
#podcast-page .navbar-form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 桌機不顯示 toggler；行動裝置仍可使用 */
@media (min-width: 768px) {
  #podcast-page .navbar-toggle { display: none !important; }
}

/* 若滾到純文字的 toggler（某些版型會直接輸出文字），以 CSS 視覺隱藏但保留可存取性 */
#podcast-page .navbar-toggle { font-size: 0; line-height: 0; }
#podcast-page .navbar-toggle::after {
  content: "";
  font-size: 14px; line-height: 1;   /* 需要可見時再改文字 */
}

/* 2) 左側選單（workHomeMenu）— 間距、對比、可讀性 */
#podcast-page .p-d-a-0 ul {       /* workHomeMenu 通常輸出在這個容器裡 */
  margin: 0 0 1rem 1.25rem;
  padding: 0;
  list-style: disc;
}
#podcast-page .p-d-a-0 ul li { margin: .375rem 0; }
#podcast-page .p-d-a-0 ul li a {
  color: #f7c562;                  /* 主題金色 */
  text-decoration: underline;
}
#podcast-page .p-d-a-0 ul li a:focus,
#podcast-page .p-d-a-0 ul li a:hover {
  text-decoration-thickness: 2px;
  outline: 2px solid #f7c562;
  outline-offset: 2px;
}

/* 3) 作品列表表格—欄寬一致、對比提升、操作欄置中、圖示更明顯 */
#podcast-page .gba-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:#111;
  color:#e6e6e6;                   /* 內文字再亮一階 */
  border:1px solid rgba(216,168,77,.45);
}
#podcast-page .gba-table thead th{
  background:#1c1c1c;
  color:#f7c562;
  font-weight:600;
  text-align:center;
  border:1px solid rgba(216,168,77,.45);
  padding:.75rem 1rem;
}
#podcast-page .gba-table td{
  background:#191919;
  border:1px solid rgba(216,168,77,.25);
  padding:.75rem 1rem;
  vertical-align:top;
  word-wrap:break-word;
}

/* 欄寬：作品 32% / 播送 48% / 操作 10% + 10% */
#podcast-page .gba-table td:nth-child(1),
#podcast-page .gba-table th:nth-child(1){ width:32%; }
#podcast-page .gba-table td:nth-child(2),
#podcast-page .gba-table th:nth-child(2){ width:48%; }
#podcast-page .gba-table td:nth-child(3),
#podcast-page .gba-table th:nth-child(3),
#podcast-page .gba-table td:nth-child(4),
#podcast-page .gba-table th:nth-child(4){ width:10%; text-align:center; }

/* 內文提示與數字對比 */
#podcast-page .gba-caption{ color:#cfcfcf; display:inline-block; min-width:6rem; }
#podcast-page .gba-table td, 
#podcast-page .gba-table td * { color:#ddd; }
#podcast-page .text-danger{ color:#ff7676; }

/* 操作按鈕（鉛筆等）更醒目、可聚焦 */
#podcast-page .glyphicon{ color:#f7c562 !important; opacity:1; }
#podcast-page .btn{ padding:.25rem .5rem; border-radius:4px; }
#podcast-page .btn:focus{ outline:2px solid #f7c562; outline-offset:2px; }

/* 列的 hover 提升掃讀 */
#podcast-page .gba-table tbody tr:nth-child(odd) td { background:#181818; }
#podcast-page .gba-table tbody tr:hover td { background:#222; }

/* 窄螢幕允許橫向捲動，避免壓碎 */
@media (max-width: 768px){
  #podcast-page .gba-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* 頁面與頁腳避免重疊（若遇到） */
.wrapper-body{ padding-bottom:4rem; }

/* =========================
   workHomeMenu 橫式導覽（桌機）
   作用範圍：podcastWork 頁
   ========================= */

/* 先把原本的清單樣式歸零，避免點點與外距 */
#podcast-page .p-d-a-0 ul{
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
}

/* 桌機：改為橫排，遇邊界自動換行 */
@media (min-width: 768px){
  #podcast-page .p-d-a-0 ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;                 /* 行內與項目間距 */
  }
  #podcast-page .p-d-a-0 ul li{
    margin: 0;                        /* 交由 gap 控制 */
    position: relative;
    padding-right: .85rem;            /* 預留分隔符間距 */
  }
  /* 斜線分隔符：最後一個不顯示 */
  #podcast-page .p-d-a-0 ul li:not(:last-child)::after{
    content: "／";
    color: #f7c562;                   /* 與主色一致 */
    opacity: .75;
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* 連結對比與可聚焦（無障礙） */
#podcast-page .p-d-a-0 ul li a{
  color: #f7c562;
  text-decoration: none;
  padding: .15rem .1rem;
  border-radius: 4px;
}
#podcast-page .p-d-a-0 ul li a:hover{
  text-decoration: underline;
}
#podcast-page .p-d-a-0 ul li a:focus{
  outline: 2px solid #f7c562;
  outline-offset: 2px;
}

/* 小螢幕（<768px）：保留直式清單、留空隙好點按 */
@media (max-width: 767.98px){
  #podcast-page .p-d-a-0 ul{
    display: block;
    margin-left: 1.25rem;
  }
  #podcast-page .p-d-a-0 ul li{ margin: .4rem 0; }
  #podcast-page .p-d-a-0 ul li::after{ content: none !important; }
}

/* 如果頁面仍看到 "Toggle navigation"，桌機隱藏（行動保留） */
@media (min-width: 768px){
  #podcast-page .navbar-toggle{ display: none !important; }
}

/* ---- workHomeMenu 橫式導覽：依現有結構鎖定 .p-d-a-0 底下的第一層 UL ---- */

/* 歸零預設清單樣式 */
.p-d-a-0 > ul{
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
}

/* 桌機：改橫排、加分隔符，遇邊界自動換行 */
@media (min-width: 768px){
  .p-d-a-0 > ul{
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
  }
  .p-d-a-0 > ul > li{
    margin: 0;
    position: relative;
    padding-right: .85rem;
  }
  .p-d-a-0 > ul > li:not(:last-child)::after{
    content: "／";
    color: #f7c562;
    opacity: .75;
    position: absolute;
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* 連結對比與可聚焦（AA） */
.p-d-a-0 > ul > li > a{
  color: #f7c562;
  text-decoration: none;
  padding: .15rem .1rem;
  border-radius: 4px;
}
.p-d-a-0 > ul > li > a:hover{
  text-decoration: underline;
}
.p-d-a-0 > ul > li > a:focus{
  outline: 2px solid #f7c562;
  outline-offset: 2px;
}

/* 手機維持直式、好點按 */
@media (max-width: 767.98px){
  .p-d-a-0 > ul{ display: block; margin-left: 1.25rem; }
  .p-d-a-0 > ul > li{ margin: .4rem 0; }
  .p-d-a-0 > ul > li::after{ content: none !important; }
}

/* 桌機隱藏 “Toggle navigation”，行動保留 */
@media (min-width: 768px){
  .navbar-toggle{ display: none !important; }
}

/* ===== workHomeMenu（/resources/component/workHomeMenu.xhtml）橫式導覽與對齊 ===== */

/* 清乾淨 navbar 外觀，避免把清單擠下去 */
.gba-sub-menu .navbar,
.gba-sub-menu .navbar-default{
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

/* 永遠展開，避免 collapse 造成行為不一致 */
.gba-sub-menu .navbar-collapse{
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  padding: 0;
}

/* 橫式清單：自動換行、間距一致（涵蓋「密碼變更／登出」等 li） */
.gba-sub-menu .navbar-nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;            /* 上下 / 左右間距 */
  list-style: none;
  margin: .5rem 0 1rem 0;
  padding: 0;
}
.gba-sub-menu .navbar-nav > li{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 連結/按鈕的可點範圍、視覺與焦點（含 p:commandButton.commandBtnMultiLine） */
.gba-sub-menu .navbar-nav > li > a,
.gba-sub-menu .navbar-nav > li > .ui-button,
.gba-sub-menu .navbar-nav > li > button,
.gba-sub-menu .navbar-nav > li > .commandBtnMultiLine{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: .375rem .75rem;
  border-radius: .5rem;
  text-decoration: none;
  line-height: 1.2;
  font-size: 1rem;            /* 相對字級，通過 AA */
  border: 1px solid transparent;
  color: #f7c562;
}
.gba-sub-menu .navbar-nav > li > a:hover,
.gba-sub-menu .navbar-nav > li > .ui-button:hover,
.gba-sub-menu .navbar-nav > li > .commandBtnMultiLine:hover{
  text-decoration: underline;
}
.gba-sub-menu .navbar-nav > li > a:focus,
.gba-sub-menu .navbar-nav > li > .ui-button:focus,
.gba-sub-menu .navbar-nav > li > button:focus,
.gba-sub-menu .navbar-nav > li > .commandBtnMultiLine:focus{
  outline: 2px solid #f5c15e;
  outline-offset: 2px;
}

/* 多行字的按鈕不跳動（你們用 &#10; 換行） */
.gba-sub-menu .commandBtnMultiLine{
  white-space: pre-line;
  text-align: center;
}

/* 「Toggle navigation」桌機隱藏（行動仍保留） */
@media (min-width: 768px){
  .gba-navbar-header .navbar-toggle{ display: none !important; }
}

/* 小螢幕：改回直式、滿版好點按 */
@media (max-width: 640px){
  .gba-sub-menu .navbar-nav{
    display: block;
    margin: .5rem 0 1rem 0;
  }
  .gba-sub-menu .navbar-nav > li{
    margin: 0 0 .5rem 0;
  }
  .gba-sub-menu .navbar-nav > li > a,
  .gba-sub-menu .navbar-nav > li > .ui-button,
  .gba-sub-menu .navbar-nav > li > .commandBtnMultiLine{
    width: 100%;
    justify-content: flex-start;
  }
}

/* ====== 強制把 workHomeMenu 變成橫式（高優先度版） ====== */
.gba-sub-menu #work-home-menu { 
  display: block !important; 
  height: auto !important; 
  visibility: visible !important; 
  padding: 0 !important;
  margin: 0 !important;
}

.gba-sub-menu #work-home-menu > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .5rem 1rem !important;   /* 上下 / 左右間距 */
  list-style: none !important;
  margin: .5rem 0 1rem 0 !important;
  padding: 0 !important;
}

.gba-sub-menu #work-home-menu > ul > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 連結 / 按鈕的外觀與可點範圍（含 commandBtnMultiLine） */
.gba-sub-menu #work-home-menu > ul > li > a,
.gba-sub-menu #work-home-menu > ul > li > .ui-button,
.gba-sub-menu #work-home-menu > ul > li > button,
.gba-sub-menu #work-home-menu > ul > li > .commandBtnMultiLine {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.25rem !important;
  padding: .375rem .75rem !important;
  border-radius: .5rem !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  font-size: 1rem !important;    /* 相對字級 */
  border: 1px solid transparent !important;
  color: #f7c562 !important;
}

/* hover / focus 可見 */
.gba-sub-menu #work-home-menu > ul > li > a:hover,
.gba-sub-menu #work-home-menu > ul > li > .ui-button:hover,
.gba-sub-menu #work-home-menu > ul > li > .commandBtnMultiLine:hover {
  text-decoration: underline !important;
}
.gba-sub-menu #work-home-menu > ul > li > a:focus,
.gba-sub-menu #work-home-menu > ul > li > .ui-button:focus,
.gba-sub-menu #work-home-menu > ul > li > .commandBtnMultiLine:focus {
  outline: 2px solid #f5c15e !important;
  outline-offset: 2px !important;
}

/* 多行按鈕（你們用 &#10; 換行）不擠位 */
.gba-sub-menu #work-home-menu .commandBtnMultiLine {
  white-space: pre-line !important;
  text-align: center !important;
}

/* 桌機隱藏「Toggle navigation」 */
.gba-navbar-header .navbar-toggle { 
  display: none !important; 
}

/* 小螢幕回直式滿版 */
@media (max-width: 640px){
  .gba-sub-menu #work-home-menu > ul { display: block !important; }
  .gba-sub-menu #work-home-menu > ul > li { margin: 0 0 .5rem 0 !important; }
  .gba-sub-menu #work-home-menu > ul > li > a,
  .gba-sub-menu #work-home-menu > ul > li > .ui-button,
  .gba-sub-menu #work-home-menu > ul > li > .commandBtnMultiLine {
    width: 100% !important; 
    justify-content: flex-start !important;
  }
}

/* ===== Header links: force horizontal, right align, keep focus ===== */

/* 1) 作用範圍盡量限縮在 header form，避免影響內容區塊 */
form[id$="headerForm"] .navbar-collapse .nav,
form[id$="headerForm"] .nav.navbar-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  /* 橫排 + 間距 */
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
}

/* 2) 移除 li 的直向排列，改成 inline-block（再加保險） */
form[id$="headerForm"] .nav > li {
  display: inline-block !important;
  margin: 0;
  padding: 0;
}

/* 3) 連結外觀與可點擊區域 */
form[id$="headerForm"] .nav > li > a,
form[id$="headerForm"] .ui-commandlink {
  display: inline-block;
  padding: 6px 10px;
  text-decoration: none;
  border-radius: 6px;
  line-height: 1.3;
}

/* 4) 顏色（沿用你站的黃），滑過/焦點狀態（無障礙） */
form[id$="headerForm"] .nav > li > a {
  color: #f7bf4a;               /* 與全站黃一致 */
}
form[id$="headerForm"] .nav > li > a:hover,
form[id$="headerForm"] .nav > li > a:focus {
  text-decoration: underline;
  outline: 2px solid #f7bf4a;   /* 清楚的焦點框 */
  outline-offset: 2px;
}

/* 5) 讓這串功能連結靠右（若容器支援 bootstrap 的 .navbar-right） */
form[id$="headerForm"] .navbar-right {
  margin-left: auto !important;
}

/* 6) 小螢幕時避免擠爆，允許自動換行並縮小間距 */
@media (max-width: 768px) {
  form[id$="headerForm"] .navbar-collapse .nav {
    gap: 8px;
  }
}

/* ====== WorkHomeMenu 橫向選單（僅限 .gba-sub-menu 範圍）====== */
.gba-sub-menu .navbar{
  background: transparent;
  border: 0;
  margin: 0 0 8px;
}
.gba-sub-menu .container-fluid{ padding: 0; }

/* 關閉舊版的摺疊按鈕與多餘品牌列，避免擠壓版面 */
.gba-sub-menu .navbar-toggle{ display: none !important; }
.gba-sub-menu .gba-brand{ display: none !important; }

/* 讓清單橫向排列、可自動換行，並清掉任何外層浮動 */
.gba-sub-menu .navbar-right{ float: none !important; }
.gba-sub-menu .navbar-nav{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;               /* row-gap / column-gap */
  margin: 0 !important;
  padding: 6px 0 10px !important;
  list-style: none;
}
.gba-sub-menu .navbar-nav > li{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 連結/按鈕的共同外觀：黃字、無底色、對比足夠 */
.gba-sub-menu .navbar-nav > li a,
.gba-sub-menu .navbar-nav > li button,
.gba-sub-menu .navbar-nav > li .ui-button,
.gba-sub-menu .navbar-nav > li .ui-commandlink {
  background: none !important;
  border: 0 !important;
  color: #f5d28a !important;        /* 與整體黃一致 */
  text-decoration: none !important;
  font-size: 16px;                   /* 遵循相對字級基準 */
  line-height: 1.6;
  padding: 2px 0 !important;
  box-shadow: none !important;
}

/* 聚焦/滑過：顯示底線，強化可見性（無障礙） */
.gba-sub-menu .navbar-nav > li a:hover,
.gba-sub-menu .navbar-nav > li a:focus,
.gba-sub-menu .navbar-nav > li .ui-button:focus {
  text-decoration: underline !important;
  outline: 2px solid transparent;   /* 保留不跳動 */
}

/* 讓多行按鈕（原本 value 內含換行）視覺更穩 */
.gba-sub-menu .commandBtnMultiLine{
  white-space: pre-line;             /* 允許換行 */
  text-align: left;
  padding: 0 !important;
}

/* 與主標題保持距離，避免擠在一起 */
.header-line + .container .gba-sub-menu,
.gba-sub-menu{ margin-top: 4px; }

/* ===== Contestant work pages header fixes (scoped) ===== */
.gba-sub-menu .navbar { min-height: 50px; }

/* 讓左側品牌區（包含「60 金鐘獎報名系統」）不會壓到功能連結 */
.gba-sub-menu .navbar-header { position: relative; }
.gba-sub-menu .navbar-brand { 
  white-space: nowrap; 
  line-height: 1.1;
  /* 給徽章預留空間，避免與連結重疊 */
  padding-left: 68px; 
}

/* 如果徽章是獨立元素，縮小並往上左移一點（選到就生效；沒選到也不影響） */
.gba-sub-menu .navbar-brand .logo,
.gba-sub-menu .navbar-brand .badge,
.gba-sub-menu .navbar-brand .brand-badge,
.gba-sub-menu .navbar-brand .logo-number {
  position: absolute; left: 6px; top: -4px; transform: scale(.82);
}

/* 上方功能連結橫向排、等距，右側連結靠右對齊 */
.gba-sub-menu .navbar-collapse { display: block !important; height: auto !important; }
.gba-sub-menu .navbar-nav { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 18px; 
  margin: 0; 
  padding: 6px 0 0; 
}
.gba-sub-menu .navbar-nav > li { float: none; }

/* 右側（密碼變更／登出）保持靠右 */
.gba-sub-menu .navbar-nav.navbar-right { margin-left: auto; }

/* 樣式細節：連結大小與可讀性 */
.gba-sub-menu .navbar-nav > li > a,
.gba-sub-menu .navbar-brand { 
  font-size: 16px; 
  font-weight: 700; 
  text-decoration: none;
}

/* 桌機再拉開一點距離，避免擠到表格標題 */
@media (min-width: 992px) {
  .gba-sub-menu .navbar { margin-bottom: 10px; }
}

/* ====== Contestant header fix: adjust 60 logo and links ====== */
.gba-sub-menu ~ form[id^="j_idt0:headerForm"] .navbar-header {
  position: relative;
}

/* 專治 60 徽章與標題排版錯亂，只改 header 裡的那個字 */
.gba-sub-menu ~ form[id^="j_idt0:headerForm"] .navbar-brand-text {
  display: inline-block;
  font-size: 20px !important;
  font-weight: 700 !important;
  padding-left: 64px; /* 給 60 預留空間 */
  line-height: 1.2;
  vertical-align: middle;
  position: relative;
}

/* 針對 60 標誌位置微調，避免壓到標題 */
.gba-sub-menu ~ form[id^="j_idt0:headerForm"] .navbar-brand-text::before {
  content: "60";
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 54px;
  font-weight: 800;
  color: #f7bf4a; /* 依全站配色 */
  line-height: 1;
}

/* 功能連結維持橫向、對齊 */
.gba-sub-menu ~ form[id^="j_idt0:headerForm"] .navbar-nav {
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 6px 0 0;
  align-items: center;
}
.gba-sub-menu ~ form[id^="j_idt0:headerForm"] .navbar-nav.navbar-right {
  margin-left: auto;
}

/* ========= podcastWork 專用：頂端子選單排版、標題不被「60」壓住 ========= */
/* 讓頂端那串功能連結橫向排列並保留間距 */
.gba-sub-menu .navbar-collapse .nav.navbar-nav {
  display: flex !important;
  flex-wrap: wrap;                 /* 超長時自動換行 */
  gap: 16px 20px;                  /* 橫向/縱向間距 */
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}

/* 去除 li 的預設間距，避免不規則凹凸 */
.gba-sub-menu .nav.navbar-nav > li {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* 讓每個按鈕/連結高度一致、易讀 */
.gba-sub-menu .nav.navbar-nav > li > a,
.gba-sub-menu .nav.navbar-nav > li > button,
.gba-sub-menu .nav.navbar-nav > li > .ui-commandlink,
.gba-sub-menu .nav.navbar-nav > li > .ui-button {
  display: inline-flex;
  align-items: center;
  line-height: 1.6;
  padding: 6px 8px !important;
  white-space: nowrap;             /* 連結文字不拆行 */
}

/* ---- 修正左上的「播客（Podcast）獎 / …」品牌文字位置，避免被「60」蓋住 ---- */
/* 你的 DOM 裡品牌文字用的是 .navbar-brand-text（PrimeFaces 生成），
   這裡將它往右推，並確保在 60 的圖樣之上顯示。 */
.navbar-brand-text {
  margin-left: 72px !important;    /* 讓文字避開左側「60」 */
  position: relative;
  z-index: 2;                      /* 壓在 60 之上 */
  font-size: 18px !important;
  font-weight: 700;
}

/* 如果 60 那塊是絕對定位的品牌底圖（常見 class 如 .navbar-default-gba-background 或 .gba-background），
   統一降低它的 z-index，避免壓住品牌字與表頭。沒有該 class 也沒關係，不會出錯。 */
.navbar-default-gba-background,
.gba-background,
.gba-brand-bg,
.brand-bg {
  position: relative;
  z-index: 1 !important;
}

/* 表格上方的主標題（「播客（Podcast）獎 ‧ 作品列表」）與 60 避讓 */
.wrapper-body h1.page-title,
h1.page-title {
  position: relative;
  z-index: 2;
  margin-top: 8px;                 /* 視覺上與 60 拉開一點距離 */
}

/* ---- 桌機與平板的 RWD 微調 ---- */
@media (max-width: 1200px) {
  .navbar-brand-text { margin-left: 60px !important; font-size: 17px !important; }
}
@media (max-width: 991px) {
  .gba-sub-menu .navbar-collapse .nav.navbar-nav { gap: 14px 16px; }
  .navbar-brand-text { margin-left: 48px !important; font-size: 16px !important; }
}
@media (max-width: 767px) {
  .navbar-brand-text { margin-left: 40px !important; font-size: 16px !important; }
}

/* -------- Header brand 對齊（不動原 HTML） -------- */

/* 讓品牌容器用 flex 垂直置中；和各頁共用，安全覆寫 */
.navbar .navbar-header,
.navbar .navbar-brand {
  display: flex !important;
  align-items: center !important;
}

/* 品牌整體高度與內距：避免「60」溢出或下墜 */
.navbar .navbar-header {
  min-height: 56px;            /* 視覺高度 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 標題文字（你目前看到的 .navbar-brand-text） */
.navbar .navbar-brand-text {
  margin: 0 10px !important;   /* 移除原本 37px 的上邊距 */
  line-height: 1.1 !important;
  display: inline-block !important;
}

/* 「60」這個數字通常是品牌區第一個 span（沒有固定 class 時用這招）*/
.navbar .navbar-brand > span:first-child {
  line-height: 1 !important;
  margin: 0 8px 0 0 !important; /* 與標題留一點間距 */
}

/* 右側功能選單（密碼變更／登出）垂直置中 */
.navbar-nav.navbar-right > li > a {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* 防止其他地方把 brand 拉下來 */
.navbar .navbar-brand-text,
.navbar .navbar-brand > span:first-child {
  position: relative !important;
  top: 0 !important;
}

/* ===============================
   Header 高度與品牌文字校正
   適用 podcastWork 等登入後頁面
   =============================== */

/* 移除整條 navbar 被推下的空白 */
.navbar.navbar-default {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 60px !important; /* 統一高度 */
}

/* 校正「60」與品牌文字垂直對齊 */
.navbar-default .navbar-brand {
  display: flex !important;
  align-items: center !important;
  height: 60px !important;
  padding: 0 15px !important;
}

/* 「60」數字 */
.navbar-default .navbar-brand > span:first-child {
  line-height: 1 !important;
  transform: translateY(-1px); /* 再往上調 1px，可依實際微調 */
}

/* 標題文字「金鐘報名系統」 */
.navbar-default .navbar-brand-text {
  margin: 0 0 0 8px !important; /* 移除原本上邊距，稍微右移 */
  line-height: 1 !important;
  font-weight: 700;
  font-size: 18px;
  position: relative;
  top: 0 !important;
}

/* 防止 header 整體被內容區塊壓住 */
.navbar.navbar-default .container-fluid {
  overflow: visible !important;
}

/* 確保後續內容（例如播客標題）不被 60 壓住 */
body > .wrapper-body,
.wrapper-body {
  margin-top: 10px !important;
}

/* === Header / Brand 對齊（讓 60 與系統名稱不上下錯位、不壓內容） === */
.navbar { min-height: 56px; }
.navbar-header { display: flex; align-items: flex-end; gap: 8px; }

/* 站台名稱容器（原本 gba.css 有 .navbar-brand-text） */
.navbar .navbar-brand-text {
  display: flex;
  align-items: flex-end;     /* 讓 60 與文字同一條基線 */
  gap: 10px;
  margin: 0 !important;      /* 清掉 gba.css 原先 37px 的 top margin */
  line-height: 1;
}

/* 假如品牌字樣有兩段（大號數字＋名稱），盡量貼齊底線 */
.navbar .navbar-brand-text .brand-no,
.navbar .navbar-brand-text .no,
.navbar .navbar-brand-text b {
  line-height: 1;
}

/* === 功能連結（登入後那串：播客、瀏覽/列印、各獎項…、密碼變更、登出）橫排 === */
/* 這串連結通常在 header 的 navbar-collapse；以下兩組同時覆寫 header 與 workHomeMenu 兩種來源 */
.navbar .navbar-collapse,
#work-home-menu.navbar-collapse {
  display: block !important;   /* 桌機固定展開 */
  height: auto !important;
  padding: 0;
  border: 0;
}

/* 真正的 UL 改成彈性橫排，移除 float */
.navbar .nav.navbar-nav,
#work-home-menu .nav.navbar-nav {
  float: none !important;
  display: flex !important;
  flex-wrap: wrap;             /* 螢幕寬時單行；窄時自動換行 */
  align-items: center;
  gap: 28px;                   /* 連結間距 */
  margin: 0;
}

/* 取消 LI 的舊 float，避免產生高度錯位 */
.navbar .nav > li,
#work-home-menu .nav > li { float: none !important; }

/* 功能連結字級與上下內距，讓整條與 Brand 對齊 */
.navbar .nav > li > a,
#work-home-menu .nav > li > a,
#work-home-menu .ui-button { 
  padding: 4px 0 !important;
  font-size: 16px;
  line-height: 1.25;
  background: transparent;
  border: 0;
}

/* === 安全邊界：避免 header 過高把內容往下擠／或內容溢出壓到 header === */
.header-line { margin-top: 8px; }             /* header 與內容之間留一點空 */
.container-fluid:has(> .navbar-header) { overflow: visible; }

/* === RWD：窄螢幕時讓功能連結自動換行，但保持整齊 === */
@media (max-width: 992px) {
  .navbar { min-height: 52px; }
  .navbar .nav.navbar-nav,
  #work-home-menu .nav.navbar-nav { gap: 16px; }
  .navbar .navbar-brand-text { gap: 8px; }
}

/* === 保守兜底：若仍看到「60」偏低，可微調基線（僅在需要時打開）
.navbar .navbar-brand-text { align-items: center; }
*/

/* 1) Brand 與「60」對齊，不再把內容往下擠 */
.navbar { min-height: 56px; }
.navbar-header { display: flex; align-items: flex-end; gap: 8px; }

.navbar .navbar-brand { display: flex; align-items: flex-end; gap: 10px; }
.navbar .navbar-brand-text { margin: 0 !important; line-height: 1; } /* 蓋掉原本 37px */

/* 2) 功能連結橫排＆靠右（播客／瀏覽列印／規則說明｜密碼變更｜登出） */
#bs-example-navbar-collapse-1 { float: none !important; }          /* 取消舊 float 行為 */
#bs-example-navbar-collapse-1 .nav.navbar-nav {
  float: none !important;
  display: flex !important;
  flex-wrap: wrap;          /* 寬螢幕單行，窄螢幕自動斷行 */
  align-items: center;
  gap: 28px;
  margin: 0;
}
#bs-example-navbar-collapse-1 .nav.navbar-nav.navbar-right { margin-left: auto; }

/* 3) 連結字級與內距統一，避免高低不齊 */
#bs-example-navbar-collapse-1 .nav > li > a {
  padding: 4px 0 !important;
  font-size: 16px;
  line-height: 1.25;
}

/* 4) header 與主內容留一點距離，避免看起來擠到一起 */
.header-line { margin-top: 8px; }

/* 5) RWD 微調 */
@media (max-width: 992px) {
  .navbar { min-height: 52px; }
  #bs-example-navbar-collapse-1 .nav.navbar-nav { gap: 16px; }
}

/* ===== 1) 頂部主導覽（含 60 與「金鐘獎報名系統」）對齊修正 ===== */
.navbar.gba-background .navbar-brand {
  white-space: nowrap;            /* 避免換行把導覽擠下去 */
}
.navbar.gba-background .navbar-brand .navbar-brand-text {
  display: inline-block;
  margin: 0 10px 0 10px !important; /* 取代舊的 37px 上外距，讓文字與「60」對齊 */
  line-height: 1.15;
  vertical-align: bottom;
}
/* 讓「60」和右側文字在同一基線 */
.navbar.gba-background .navbar-brand span[style*="font-size"] {
  display: inline-block;
  line-height: 1;
  vertical-align: bottom;
}
/* 保持切換鈕與導覽列在同一行（桌機寬度） */
.navbar.gba-background .navbar-header { float: left; }
.navbar.gba-background .navbar-collapse { float: none; }

/* ===== 2) 本頁子導覽（gba-sub-menu）排版與無障礙 ===== */
.gba-sub-menu .navbar { margin-bottom: 16px; }
.gba-sub-menu .navbar-nav > li { margin-right: 12px; }
.gba-sub-menu .navbar-nav > li:last-child { margin-right: 0; }

/* 子導覽的字級與行高（與設計稿一致） */
.gba-sub-menu .navbar-nav > li > a,
.gba-sub-menu .commandBtnMultiLine {
  font-size: 16px;
  line-height: 1.4;
}

/* 行動版：導覽收合時保持在品牌列下方，且每個項目獨立一行 */
@media (max-width: 991px) {
  .gba-sub-menu .navbar-header { float: none; }
  .gba-sub-menu #work-home-menu { clear: both; }
  .gba-sub-menu .navbar-toggle { margin-top: 10px; margin-bottom: 10px; }
  .gba-sub-menu .navbar-nav > li { float: none; margin: 0 0 8px; }
}

/* 鍵盤可見焦點（WCAG） */
.gba-sub-menu .navbar a:focus,
.gba-sub-menu .commandBtnMultiLine:focus {
  outline: 2px solid #ffd166;
  outline-offset: 2px;
}

.a11y-icon-btn .fa { font-size: 14px; }   /* 圖示大小 */
.a11y-icon-btn.ui-button { min-width: 36px; min-height: 28px; } /* 點擊範圍 */
.a11y-icon-btn.ui-button:focus { outline: 2px solid #ffd166; outline-offset: 2px; }

/* === 無障礙輔助樣式 === */

/* 僅供螢幕閱讀器讀取的隱藏文字 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* fieldset 語義用，不影響外觀 */
.sr-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

/* 輸入群組對齊微調 */
.gba-input-group {
  margin-bottom: 16px;
}
.gba-input-group .gba-label {
  font-weight: 600;
  margin-bottom: 4px;
}

/* === Password page only === */
.password-form .gba-input-group{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.password-form .gba-input-group .gba-label{
  flex:0 0 8rem;        /* 8rem ≈ 128px：統一左欄寬 */
  max-width:8rem;
}

.password-form .gba-input-group input.ui-password.gba-input-control{
  flex:1 1 auto;        /* 讓輸入框吃滿剩餘寬度 */
  width:100%;
  box-sizing:border-box;
}

/* 第二列的可見說明獨佔下一行，並與欄位左緣對齊 */
.password-form .visible-help{
  display:block;
  flex-basis:100%;
  margin-left:8rem;     /* 與 .gba-label 寬度一致 */
  margin-top:.25rem;
  color:#000;           /* 你原本的樣式 */
}

/* RWD：窄螢幕改為上下堆疊 */
@media (max-width: 768px){
  .password-form .gba-input-group{
    flex-direction:column;
    align-items:stretch;
  }
  .password-form .gba-input-group .gba-label{
    flex:0 0 auto;
    max-width:none;
    width:auto;
  }
  .password-form .visible-help{
    margin-left:0;
  }
}

/* === Summary Report 表格：RWD 卡片化（≤992px）=== */
@media (max-width: 992px) {
  /* 外層容器在手機版不需要橫向捲動了 */
  .summary-table-wrap {
    overflow-x: visible !important;
  }

  /* 隱藏表頭，改由 td::before 顯示欄位名稱 */
  table.summary-table thead {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* 把表格拆成「卡片」 */
  table.summary-table,
  table.summary-table tbody,
  table.summary-table tr,
  table.summary-table td {
    display: block !important;
    width: 100% !important;
  }

  table.summary-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  table.summary-table tr {
    margin: 0 0 12px 0 !important;
    border: 1px solid #3a3a3a !important;         /* 黑底金邊風格 */
    border-radius: 8px !important;
    background: #111 !important;
  }

  table.summary-table td {
    border: 0 !important;
    border-bottom: 1px solid #2a2a2a !important;
    padding: 12px 16px !important;
    text-align: left !important;
    white-space: normal !important;               /* 允許換行，避免擠成直書 */
  }

  table.summary-table td:last-child {
    border-bottom: 0 !important;
  }

  /* 用 data-label 當作欄位標籤 */
  table.summary-table td::before {
    content: attr(data-label) !important;
    display: block !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
    color: #d6c29b !important;                     /* 金色標籤，符合整體色系 */
    line-height: 1.3 !important;
  }
}

/* === 桌機版（≥993px）：維持寬表＋可橫向捲動 === */
@media (min-width: 993px) {
  .summary-table-wrap {
    overflow-x: auto;                              /* 寬欄位可左右捲動 */
    -webkit-overflow-scrolling: touch;
  }

  table.summary-table th,
  table.summary-table td {
    white-space: nowrap;                           /* 標頭維持單行 */
  }

  /* 提升表頭可讀性（黑底金邊） */
  table.summary-table thead tr.gba-header th {
    background: #1a1a1a;
    color: #f4e7c6;
    border-color: #4a3b21;
  }
}

/* === Summary：卡片版可讀性強化（≤992px） === */
@media (max-width: 992px) {
  /* 卡片容器（tr） */
  .summary-table tbody tr {
    background: #141414;                          /* 比 #000 稍亮，降低炫光 */
    border: 1px solid rgba(215,181,109, .28);     /* 金邊但更細緻 */
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);       /* 浮起一點點 */
    margin: 16px 0;                               /* 卡片間距 */
    overflow: hidden;
  }

  /* 每一格（td） */
  .summary-table td {
    display: block;
    width: 100%;
    padding: 14px 16px;                           /* 觸控友善的邊距 */
    border: 0;
    border-bottom: 1px solid rgba(215,181,109,.22);
    line-height: 1.6;                             /* 行高提升 */
  }
  .summary-table td:last-child {
    border-bottom: 0;
  }

  /* 標籤（表頭對應） */
  .summary-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-size: 0.98rem;                           /* 稍大一點 */
    font-weight: 600;
    letter-spacing: .02em;
    color: #E9D69A;                                /* 淡金，對比充足 */
  }

  /* 內容文字 */
  .summary-table td,
  .summary-table td .cell-value {
    font-size: 1.05rem;                           /* 內容再大一點 */
    color: #F5F5F5;                               /* 幾乎白，4.5+:1 對比 */
  }

  /* 小提示類（例如「, 34集」這種）如果需要更弱化 */
  .summary-table .muted,
  .summary-table td small {
    color: #C9C9C9;
    font-size: .95rem;
  }

  /* 卡片的欄位群組（如果有多行資訊） */
  .summary-table .field-block + .field-block {
    margin-top: 6px;
  }
}

/* === Summary：卡片版（僅行動 ≤992px）；桌面不變 === */
@media (max-width: 992px) {
  /* 外層可視需要可以包一層 .summary-table-wrap（非必須） */
  .summary-table-wrap {
    overflow-x: hidden;
    padding: 0 4px;
  }

  /* 每筆資料卡片（tr -> block） */
  .summary-table tbody tr {
    display: block;
    background: #141414;
    border: 1px solid rgba(215,181,109, .28);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
    margin: 16px 0;
    overflow: hidden;
  }

  /* 每一格（td -> block） */
  .summary-table td {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid rgba(215,181,109,.22);
    line-height: 1.6;
    text-align: left;
    color: #F5F5F5;              /* 內容字色 */
    font-size: 1.05rem;         /* 內容字級 */
  }
  .summary-table td:last-child {
    border-bottom: none;
  }

  /* 標籤（表頭對應） */
  .summary-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #E9D69A;             /* 金色標籤 */
  }

  .summary-table .muted,
  .summary-table td small {
    color: #C9C9C9;
    font-size: .95rem;
  }
}

/* 讓 PrimeFaces confirm 對話框的 message 會換行顯示 \n */
.ui-confirm-dialog .ui-confirm-dialog-message {
  white-space: pre-line;
}

/* ======= Home / Index 無障礙與強調樣式 ======= */

/* 基礎提示盒 */
.notice-box {
  background-color: #1b1b1b;
  /*border: 2px solid #f0b400;*/
  color: #fff;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem 0;
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(240, 180, 0, 0.15);
}

/* 左右括號造型線條 */
.framed-alert::before,
.framed-alert::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  width: 6px;
  background-color: #f0b400;
  border-radius: 3px;
}
.framed-alert::before {
  left: 0.75rem;
}
.framed-alert::after {
  right: 0.75rem;
}

/* 文字強調 */
.notice-title {
  font-size: 1.25rem; /* 約 20px */
  font-weight: 800;
  color: #f6d445;
  margin: 0 0 0.5rem 0;
}
.notice-text {
  font-size: 1.0625rem; /* 約 17px */
  line-height: 1.7;
  color: #ffffff;
  margin: 0;
}

/* RWD 微調 */
@media (max-width: 992px) {
  .notice-box {
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
  }
  .framed-alert::before,
  .framed-alert::after {
    top: 8%;
    bottom: 8%;
    width: 4px;
  }
  .notice-title {
    font-size: 1.125rem;
  }
  .notice-text {
    font-size: 1rem;
  }
}

/* 鍵盤焦點仍保留明顯對比 */
.notice-box:focus-within {
  outline: 3px solid #f6d445;
  outline-offset: 3px;
}

/* Header links: 微調註冊按鈕強調 */
.header-actions .link-action {
  color: #f0b400;
  font-weight: 600;
  margin-left: 1rem;
}
.header-actions .link-action:hover,
.header-actions .link-action:focus {
  color: #fff;
  text-decoration: underline;
  outline: 2px dashed #f0b400;
  outline-offset: 2px;
}

.ui-fileupload, .ui-fileupload * { font-size:1.4375rem !important; line-height:1.6; }

/* ═══════════════════════════════════════════════════
   註冊頁 (.reg-page)
   遵循 login.xhtml 的 form-group + form-control 設計系統
   所有色彩走 CSS variable，不硬寫色碼
   ═══════════════════════════════════════════════════ */

/* --- 頁面容器 --- */
.reg-page {
  max-width: 56rem;       /* ≈ 896px，容納雙欄 + 上傳區 */
  padding-bottom: 3rem;
}
.reg-page .form-group {
  margin-bottom: 1.25rem;
}

/* 單欄 input/select 撐滿容器（右邊界對齊） */
.reg-page .form-group > .form-control,
.reg-page .form-group > .ui-inputfield,
.reg-page .form-group > .ui-selectonemenu,
.reg-page .reg-fieldset > .form-control,
.reg-page .reg-fieldset > .ui-inputfield {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
/* 複合列也撐滿 */
.reg-uid-row,
.reg-address-row,
.reg-contact-row,
.reg-ext-row {
  width: 100%;
  box-sizing: border-box;
}

/* --- 區塊間距 --- */
.reg-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid var(--border);
}
.reg-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* --- 說明提示 --- */
.reg-notice {
  background: var(--panel-elev);
  border: 0.0625rem solid var(--border);
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--fg-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}
.reg-notice ul {
  padding-left: 1.2rem;
  margin: 0;
}
.reg-notice li {
  margin-bottom: 0.25rem;
}

/* --- Placeholder 可見度 --- */
.reg-page input::placeholder,
.reg-page textarea::placeholder {
  color: var(--fg-muted);
  opacity: 0.6;
}

/* --- 清除 text-shadow（來源：PrimeFaces Aristo .ui-state-default）--- */
.reg-page input,
.reg-page textarea,
.reg-page select,
.reg-page .ui-inputfield,
.reg-page .ui-selectonemenu,
.reg-page .ui-selectonemenu-label {
  text-shadow: none;
}

/* --- 輸入框邊框 + 清除 inset box-shadow ---
     box-shadow 來源：
       PrimeFaces Aristo .ui-inputfield → inset 0 2px 2px #8f8f8f
       PrimeFaces Aristo .ui-state-default → inset 0px 1px 0px #fff
       Bootstrap .form-control → inset 0 1px 1px rgba(0,0,0,.075)
     全部清除，只保留 focus 狀態的 glow --- */
.reg-page .form-control,
.reg-page .ui-inputfield,
.reg-page .ui-selectonemenu {
  border: 1px solid #8a7340;
  box-shadow: none;
}
.reg-page .form-control:focus,
.reg-page .ui-inputfield.ui-state-focus,
.reg-page .ui-inputfield:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 .125rem rgba(255, 204, 102, .25);
}

/* --- 必填星號（用金色，不用紅色）--- */
.reg-page .required::before {
  content: "* ";
  color: var(--accent-strong);
}

/* --- fieldset 重設（地址、聯絡人、分機等複合欄位）--- */
.reg-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.reg-fieldset > legend {
  float: none;
  width: auto;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
  border: none;
  margin-bottom: .375rem;
  color: var(--fg);
}

/* --- 申請身分下拉限寬 --- */
.reg-page .reg-section:first-of-type .ui-selectonemenu {
  max-width: 16rem;
}

/* --- PrimeFaces selectOneMenu 對齊 form-control --- */
.reg-page .ui-selectonemenu {
  background: #101010;
  border: 1px solid #8a7340;
  border-radius: .5rem;
  box-shadow: none;
  color: var(--fg);
  width: 100%;
}
.reg-page .ui-selectonemenu .ui-selectonemenu-label {
  padding: .625rem .75rem;
  color: var(--fg);
  background: transparent;
  line-height: 1.5;
  text-shadow: none;
}
.reg-page .ui-selectonemenu .ui-selectonemenu-trigger {
  background: transparent;
  border-left: 1px solid #8a7340;
  border-radius: 0 .5rem .5rem 0;
  box-shadow: none;
}
.reg-page .ui-selectonemenu:hover,
.reg-page .ui-selectonemenu.ui-state-focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 .125rem rgba(255, 204, 102, .25);
}

/* selectOneMenu 下拉面板（append 到 body，不在 .reg-page DOM 內）*/
.ui-selectonemenu-panel {
  background: #1c1c1c !important;
  border: 1px solid #8a7340 !important;
  border-radius: .5rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.4) !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-list {
  background: #1c1c1c;
  color: var(--fg);
}
.ui-selectonemenu-panel .ui-selectonemenu-item {
  color: var(--fg) !important;
  padding: .5rem .75rem !important;
  text-shadow: none !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight {
  background: var(--accent) !important;
  color: #000 !important;
}
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-hover {
  background: #2d2d2d !important;
  color: var(--fg) !important;
}

/* --- PrimeFaces selectOneRadio / selectManyCheckbox --- */
.reg-page .ui-selectoneradio,
.reg-page .ui-selectmanycheckbox {
  width: 100%;
}
.reg-page .ui-selectoneradio label,
.reg-page .ui-selectmanycheckbox label,
.reg-page .ui-selectbooleancheckbox + span {
  color: var(--fg);
}
.reg-page .ui-radiobutton-box,
.reg-page .ui-chkbox-box {
  background: #101010;
  border-color: #8a7340;
  box-shadow: none;
  text-shadow: none;
}
.reg-page .ui-radiobutton-box.ui-state-active,
.reg-page .ui-chkbox-box.ui-state-active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

/* --- 統一編號查詢列 --- */
.reg-uid-row {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.reg-uid-row .form-control {
  flex: 1;
}
.reg-uid-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- 地址列（縣市+鄉鎮區 各 50%）--- */
.reg-address-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .5rem;
  width: 100%;
}
.reg-address-row .ui-selectonemenu {
  flex: 1 1 0;
  min-width: 0;
}

/* --- 聯絡人列（姓名+稱謂 inline）--- */
.reg-contact-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}
.reg-contact-row .form-control {
  flex: 1;
  min-width: 10rem;
}
.reg-contact-row .ui-selectoneradio {
  flex-shrink: 0;
  width: auto;
}
/* radio table 去掉不必要的 width */
.reg-contact-row .ui-selectoneradio table {
  width: auto;
}

/* --- 雙欄排列（手機+電話、分機+FAX）--- */
.reg-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
@media (max-width: 40rem) {
  .reg-row-2col {
    grid-template-columns: 1fr;
  }
}

/* --- 分機+無分機 checkbox inline --- */
.reg-ext-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.reg-ext-row .form-control {
  flex: 1;
}
.reg-checkbox-label {
  display: flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  color: var(--fg);
  font-weight: normal;
  cursor: pointer;
}

/* --- 事業種類 checkbox 雙欄 grid --- */
.reg-biz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}
@media (max-width: 40rem) {
  .reg-biz-grid {
    grid-template-columns: 1fr;
  }
}
.reg-biz-col .ui-selectmanycheckbox table {
  width: 100%;
}

/* --- 電臺詳細資料子區塊 --- */
.reg-radio-detail {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--panel-bg);
  border: 0.0625rem solid var(--border);
  border-radius: .5rem;
}

/* --- 上傳拖曳區 --- */
.reg-dropzone {
  border: 0.125rem dashed var(--border);
  border-radius: .5rem;
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  background: var(--panel-elev);
  transition: border-color .2s, background .2s;
  color: var(--fg-muted);
  font-size: 0.875rem;
}
.reg-dropzone:hover,
.reg-dropzone.dragover {
  border-color: var(--accent);
  background: rgba(216, 168, 77, 0.05);
}
.reg-dropzone .drop-icon {
  font-size: 1.5rem;
  margin-right: .25rem;
  vertical-align: middle;
}
.reg-dropzone .browse-link {
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}

/* --- 已上傳檔案表格 --- */
.reg-upload-table {
  width: 100%;
  margin-top: .75rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.reg-upload-table th {
  text-align: left;
  padding: .5rem;
  border-bottom: 0.0625rem solid var(--border);
  color: var(--fg-muted);
  font-weight: 600;
}
.reg-upload-table td {
  padding: .5rem;
  border-bottom: 0.0625rem solid var(--border);
  color: var(--fg);
  vertical-align: middle;
}
.reg-upload-table img {
  border-radius: .25rem;
  object-fit: cover;
}
.reg-upload-empty {
  text-align: center;
  color: var(--fg-muted);
  font-style: italic;
  padding: 1rem .5rem !important;
}

/* --- 送出區塊 --- */
.reg-submit-section {
  text-align: center;
}
.reg-consent {
  color: var(--fg);
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.6;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}
.reg-page .btn-lg {
  padding: .625rem 2.5rem;
  font-size: 1rem;
}

/* --- PrimeFaces 驗證錯誤訊息 --- */
.reg-page .ui-message-error {
  color: #ff6b6b;
  font-size: 0.8125rem;
  margin-top: .25rem;
  display: block;
}

/* --- alert-area 焦點 --- */
.reg-page .alert-area:focus {
  outline: 0.125rem solid var(--focus);
  outline-offset: 0.125rem;
}

/* --- p:calendar 按鈕對齊 --- */
.reg-page .ui-calendar .ui-datepicker-trigger {
  background: var(--panel-elev);
  border: 0.0625rem solid var(--border);
  border-radius: 0 .5rem .5rem 0;
  color: var(--fg);
}

/* --- p:blockUI 遮罩 --- */
.reg-page .ui-blockui-content {
  background: var(--panel-elev) !important;
  color: var(--fg) !important;
}

/* === 註冊結果頁 === */
.reg-result-card {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 2.5rem 11rem;
  background: var(--panel-elev);
  border: 0.0625rem solid var(--border);
  border-radius: .75rem;
  text-align: center;
}
.reg-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.reg-result-heading {
  font-size: 1.375rem;
  color: var(--accent-strong);
  margin: 0 0 1rem;
}
.reg-result-msg {
  color: var(--fg);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.reg-result-tips {
  text-align: left;
  color: var(--fg-muted);
  font-size: .9375rem;
  line-height: 1.6;
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.reg-result-tips li {
  margin-bottom: .35rem;
}
.reg-result-tips a {
  color: var(--link);
}
.reg-result-action {
  margin-top: 1rem;
}
.reg-result-action .btn {
  padding: .625rem 2rem;
  font-size: 1rem;
}

/* 錯誤訊息區焦點 */
.register-form .alert-area:focus {
  outline: 2px solid #ffcc66 !important;
  outline-offset: 2px !important;
}