@font-face {
  font-family: 'BpmfGenSenRounded-B';
  src: url('../fonts/outputs/BpmfGenSenRounded-B.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 預留 navbar 上方空間 */
body {
  padding-top: 86px; /* 預留 navbar 高度 */
  font-family: 'BpmfGenSenRounded-B', sans-serif;
}

/* 轉場動畫 */
.col-md-4, .col-sm-6, .col-12 {
  transition: width 0.4s ease;
}

:root {
  /* 卡片、標題通用配色 */
  --bg1: #41B8E2; --text-bg1: #0081A4;
  --bg2: #F7BE36; --text-bg2: #B88900;
  --bg3: #57BBAF; --text-bg3: #00A295;
  --bg4: #FF897D; --text-bg4: #C85039;
  --bg5: #FFACE9; --text-bg5: #D36ABF;
  --bg6: #B89BFF; --text-bg6: #855EE0;
}

/* 卡片、頁首背景共用 */
.card-bg,
.page-title-bg {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* 卡片尺寸 */
.card-bg {
  width: 100%;
  max-width: 330px;
  height: 240px;
  margin: 0 auto;
}

/* 每頁標題尺寸 */
.page-title-bg {
  width: 100%;
  height: 25vh;
}

/* 半透明網格背景 */
.card-bg::before,
.page-title-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/net-bg.png);
  background-size: 60px 60px;
  opacity: 0.05;
  z-index: 0;
}

/* 白色虛線框（內縮） */
.card-bg::after,
.page-title-bg::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}

/* hover效果（卡片才需要） */
.card-bg:hover {
  transform: scale(1.01);
  filter: brightness(1.1);
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

/* 背景色共用 */
.card-bg[data-index="1"], .page-title-bg[data-index="1"] { background-color: var(--bg1); }
.card-bg[data-index="2"], .page-title-bg[data-index="2"] { background-color: var(--bg2); }
.card-bg[data-index="3"], .page-title-bg[data-index="3"] { background-color: var(--bg3); }
.card-bg[data-index="4"], .page-title-bg[data-index="4"] { background-color: var(--bg4); }
.card-bg[data-index="5"], .page-title-bg[data-index="5"] { background-color: var(--bg5); }
.card-bg[data-index="6"], .page-title-bg[data-index="6"] { background-color: var(--bg6); }

/* 標題背景色共用 */
.card-title[data-index="1"], .page-title[data-index="1"] { background-color: var(--text-bg1); }
.card-title[data-index="2"], .page-title[data-index="2"] { background-color: var(--text-bg2); }
.card-title[data-index="3"], .page-title[data-index="3"] { background-color: var(--text-bg3); }
.card-title[data-index="4"], .page-title[data-index="4"] { background-color: var(--text-bg4); }
.card-title[data-index="5"], .page-title[data-index="5"] { background-color: var(--text-bg5); }
.card-title[data-index="6"], .page-title[data-index="6"] { background-color: var(--text-bg6); }

/* 卡片標題 */
.card-title {
  position: absolute;
  min-width: 55%;
  top: 15%;
  padding: 0.5rem 1rem;
  border-radius: 0 8px 8px 0;
  font-size: 1.6rem;
  color: #fff;
  z-index: 3;
}

/* 卡片圖片 */
.card-img {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 140px;
  height: auto;
  z-index: 2;
}

/* 頁面標題 */
.page-title {
  position: absolute;
  transform: translate(0, -50%);
  top: 50%;
  padding: 0.5rem 1rem;
  border-radius: 0 8px 8px 0;
  font-size: 1.6rem;
  color: #fff;
  z-index: 3;
}

/* 頁首圖片 */
.page-title-img {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  right: -5%;
  width: 140px;
  height: auto;
  z-index: 2;
}

/* 小螢幕：讓頁首和卡片一致 */
@media (max-width: 576px) {
  .page-title-bg {
    max-width: 330px;
    height: 240px;
    margin: 0 auto;
  }
  .page-title {
    min-width: 55%;
    top: 15%;
    transform: none;
  }
  .page-title-img {
    top: auto;
    bottom: 10px;
    right: 10px;
    transform: none;
  }
}

/* 手風琴樣式 */
.accordion.accordion-flush .accordion-item {
  border-radius: 1.5rem !important; /* 強制套用圓角 */
  overflow: hidden;
  border: 1px solid #ddd; /* 可選 */
}
  
.accordion-item {
  background-color: #EEECDD;
}

.accordion-item  button{
  background-color: #EEECDD;
}

.accordion button i{
  color: #00A295;
}

/* Footer 樣式 */
.site-footer {
  color: white;
  text-decoration: none;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.footer-list a {
  color: inherit;       /* 使用繼承的文字顏色 */
  text-decoration: none; /* 移除底線 */
}


.footer-list li {
  margin-bottom: 0.25rem;
}

.site-footer .row {
  background-color: #006D42;
  padding: 1rem 0;
}

/* 右側圖片設定 */
.footer-img-right {
  position: absolute;
  width: 140px;
  bottom: 20px;
  right: 30px;
  max-width: 100%;
  height: auto;
}

/* 小螢幕時改靠左且靠頂 */
@media (max-width: 767.98px) {
  .footer-img-right {
    right: auto;
    left: 30px;
    top: 0;
  }
}

/******無障礙 start******/

/* 初始：螢幕閱讀器可讀，視覺上隱藏 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* 聚焦時顯示在頁面上方（左上角） */
a.sr-only:focus {
    position: fixed; /* 固定在畫面上方 */
    top: 10px;
    left: 10px;
    width: auto;
    height: auto;
    padding: 8px 12px;
    background: #000;
    color: #fff;
    clip: auto;
    overflow: visible;
    z-index: 10000;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    border-radius: 4px;
}

.acc-key a:focus {
    outline: 3px dashed #E60000 !important;
    outline-offset: -3px;
}

*:focus {
    outline: 3px dashed #E60000 !important;
    outline-offset: -3px;
}

a:focus {
    display: block;
}

input[type=text]:focus {
    background: #ffe8e8 !important;
}

.rwd_abgne_marquee a:focus {
    outline: 3px dashed #FFFF00 !important;
    outline-offset: -3px;
}

*:focus-visible {
    outline: none;
}

.header .acc-key {
    position: fixed; /* 固定在畫面上，而非 header 裡 */
    top: 10px; /* 距離視窗上方 */
    left: 13px; /* 距離視窗左側 */
    z-index: 9999; /* 確保浮在最上層 */
    background: #000; /* 背景色，方便辨識 */
    color: #fff; /* 字體顏色 */
    padding: 6px 10px; /* 增加可點擊區域 */
    text-decoration: none; /* 移除底線 */
}

.crumb .acc-key {
    position: absolute;
    left: 13px;
    z-index: 99;
    width: auto;
    border-right: none;
}

.footer .acc-key {
    position: absolute;
    left: 13px;
    z-index: 99;
}

.page .acc-key {
    display: block;
    width: 12px;
}

/******無障礙 END******/