/* 縮小失敗。正在傳回未縮小的內容。
(61,36): run-time error CSS1034: Expected closing parenthesis, found ','
(61,36): run-time error CSS1042: Expected function, found ','
(61,41): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(69,32): run-time error CSS1034: Expected closing parenthesis, found ','
(69,32): run-time error CSS1042: Expected function, found ','
(69,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(108,36): run-time error CSS1034: Expected closing parenthesis, found ','
(108,36): run-time error CSS1042: Expected function, found ','
(108,41): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* CSS Document */
*{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{ width:100%; height:100%; font-family:Arial, Helvetica,"微軟正黑體",sans-serif; text-size-adjust:none; font-size:16px;}
ul{ margin: 0; padding: 0; list-style: none;}
img{ display: block;}

/* == 桌機版優先 ============================================================================= */

/* 主要內容外層 */
main{ margin-bottom: 50px; padding: 0 calc((100% - 1280px)/2);}
.experience-wrap{ margin-top: 30px; width: 100%; display: flex; justify-content: space-between;}
.experience-wrap article{ width: 70%;}
.experience-wrap aside{ width: 25%;}

/* 麵包屑 */
main .bread_list{ display: block; margin: 20px 0; width: 100%;}
main .bread_list ol{ display: flex; list-style: none; flex-wrap: wrap;}
main .bread_list ol li{ color: #333333; font-size: 15px;}
main .bread_list ol li a{ color: rgb(0, 149, 144); text-decoration: none; }
main .bread_list ol li::after{ content: '\f054'; font-family:"Font Awesome 5 Free"; font-weight: 900; margin: 0 10px; color: #cccccc;}
main .bread_list ol li:last-child::after{ display: none;}

/* 單元主題標題 */
.page-title{ width: 100%; padding: 25px 40px; background-color: #fff; opacity: 1; background-image: radial-gradient(#cdcdcd 0.45px, #fff 0.45px); 
  background-size: 9px 9px; border: 1px solid #E9E9E9; border-radius: 15px;}
.page-title h1{ font-size: 2.5em; font-weight: normal; color: #333333;}

section{ padding: 20px 0 0;}
/* 篩選年份 */
.filter-wrap{ margin: 0 0 40px;}
.filter-wrap ul{ display: flex;}
.filter-wrap ul li{ display: flex; justify-content: space-between; align-items: center; width: 20%; margin-right: 5px;}
.filter-wrap ul li:last-child{ width: 6%; margin-right: 0;}
.filter-wrap ul li select{ width: 100%; padding: 5px; font-size: 1em; color: #666666; border: 1px solid #999999;}
.filter-wrap ul li input[type=button]{ width: 100%; padding: 5px 0; font-size: 1em; color: #ffffff; background-color: #FA8C16; border: 0; border-radius: 0 50px 50px 0; cursor: pointer;}

/* 榜單BN */
.board-list{ width: 100%;}
.board-list ul{ display: flex; flex-wrap: wrap;}
.board-list ul li{ margin-right:30px; margin-bottom: 10px; width: 230px;}
.board-list ul li:nth-child(5n){ margin-right:0;}
.board-list ul li img{ max-width: 100%;}
.board-list ul li a{ text-decoration: none; display: block;}
.board-list ul li p{ padding: 10px 0; font-size: 1em; color: #333333; line-height: 1.5;}

/* 2026.1月改版-------------------------------------------------------------------------------------- */

/*好成績大聲說*/
.board-categories{ margin:0 0 30px;}
.board-categories h2{ margin: 20px 0; font-size: 1.5em; color: #333;
    font-weight: normal; line-height: 1; border-left: 5px solid #fa8c16;
    padding-left: 8px;
}
.category-grid{ display:grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.board-categories .category{
  background-color: #ffffff;
  border: 1px solid rgb(0, 149, 144, 0.3);
  border-radius: 15px;
  box-shadow: 0 1px 0 rgba(0, 149, 144, .05);
  padding: 16px 16px 14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.board-categories .category:hover{
  transform: translateY(-2px);
  border-color: rgb(0, 149, 144, 0.5);
  box-shadow: 0 5px 5px rgba(0, 149, 144, .09);
}

.board-categories .category a{ color: #333; text-decoration: none;}
.board-categories .category a:hover{ text-decoration: underline; }

/* 桌機：全部展開就好（不用折疊感），可讓 summary 看起來像標題列 */
#categoriesboard details.category summary::-webkit-details-marker{ display:none; /* Safari / 舊版 Chrome */}
#categoriesboard details.category summary{ 
    cursor: default; list-style: none; /* 大多數瀏覽器 */ background-color: #EEF6F3; padding: 0 15px;
    display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
#categoriesboard details.category h3{ margin: 0; padding: 10px 0; color: #003945;}
#categoriesboard details.category{ padding: 0; overflow: hidden;}
/* 桌機：隱藏 + / - */
#categoriesboard details.category summary::after{ content: "";}

#categoriesboard .category ul{
  display:grid;
  grid-template-rows: repeat(3, auto); /* 直向 3 個 */
  grid-template-columns: repeat(2, 1fr); /* 強制固定 2 欄 */
  grid-auto-flow: column;              /* 滿了往右開新欄 */
  gap: 0.4em 1.2em;                    /* row / column 間距 */
  margin: 0;
  padding: 15px;
}

/* 近期榜單總覽列表 */
.board-latest{ margin-top: 40px;}
.board-latest .board-group{
  display: grid; grid-template-columns: 1fr 8fr;
  margin: 45px 0 0;
}

.board-latest .board-group .board-head{
  background-color: #f6fdfb; opacity: 1;
  background-size: 9px 9px; 
  background-image: repeating-linear-gradient(45deg, #ffffff 0, #ffffff 0.9px, #f6fdfb 0, #f6fdfb 50%);
  border: 1px solid rgb(0, 149, 144, 0.3);
  border-radius: 15px;
  box-shadow: 0 5px 5px rgba(0, 149, 144, .2);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  margin: 0 0 15px;
}
.board-latest .board-group .board-head h3{ 
  font-size: 1.4rem;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  background: linear-gradient(to bottom, #009590 40%, #003945 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.board-latest .board-group .board-head img{ display: block; max-width: 100%;}

.board-latest .board-group ul{
  display: flex;
  flex-wrap: nowrap; /* 強制不換行，讓所有 li 排成一列 */
  gap: 15px;/* 項目間距 */
  padding: 0 0 10px;
  margin-left: 20px;
  overflow-x: auto; /* 核心：開啟橫向捲軸 */
  scroll-snap-type: x mandatory; /* 啟用水平強制吸附 */
  -webkit-overflow-scrolling: touch; /* 讓手機版滑動更有「彈性」感 */
}
/* scrollbar（可留） */
.board-latest .board-group ul::-webkit-scrollbar{ height: 8px;}
.board-latest .board-group ul::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.20); border-radius: 999px;}
.board-latest .board-group ul li{
  flex: 0 0 230px; /* flex-grow不放大 flex-shrink不壓縮，flex-basis固定BN尺寸230px */
  border: 1px solid #e5e7eb; background: #fff;
  border-radius: 15px;
  overflow: hidden;
  scroll-snap-align: start;
}
.board-latest .board-group ul li a{ text-decoration: none;}
.board-latest .board-group ul li img{ max-width: 100%; display: block;}
.board-latest .board-group ul li p{ padding: 10px 15px; font-size: 0.9em; color: #333;}


/* ===== other ====================================================================================== */
@media(max-width:1279px){

  main{ margin-bottom: 50px; padding: 0 1%;}

  /* 榜單BN */
  .board-list ul li{ margin-right:20px; width: calc((100% - 80px)/5);}

}

@media(max-width:1200px){

   /* 篩選年份 */
   .filter-wrap ul li{ width: 30%; margin-right: 5px;}
   .filter-wrap ul li:last-child{ width: 10%; margin-right: 0;}

    /* 榜單BN */
    .board-list ul li{ margin-right:15px; width: calc((100% - 60px)/5);}
    .board-list li img{ max-width: 100%;}
    .board-list ul li p{ font-size: 15px; line-height: 1.3;}


}

/* ===== phone ========================================================================================= */

@media(max-width:820px){

  main{ margin-bottom: 50px; padding: 0 2%;}

  section{ padding: 40px 0 0;}

  /* 篩選年份 */
  .filter-wrap ul li select{ width: 100%; padding: 5px; font-size: 15px;}
  .filter-wrap ul li input[type=button]{ font-size: 15px;}

  /* 榜單BN */
  .board-list ul li{ margin-right:10px; width: calc((100% - 40px)/5);}

  
  /*2026.1月改版 好成績大聲說-------------------------------------------------------------*/
  #categoriesboard .category-grid{ 
    gap: 12px; 
    grid-template-columns: repeat(2, 1fr); align-items: start;}

  #categoriesboard details.category h3{ font-size: 1em; font-weight: 900;}
  #categoriesboard details.category:hover{ transform: none;}
  /* 如果 JS 還沒執行完，先讓內容預設不顯示，避免閃爍--AI建議但是還是會閃爍 */
  #categoriesboard details.category:not([open]) > ul{ display: none;}

  /*重新開啟點擊功能 */
  #categoriesboard details.category summary{
  pointer-events: auto; /* 恢復點擊 */    cursor: pointer; /* 手型游標 */  }

  /* 顯示 + / - */
  #categoriesboard details.category summary::after{ content:"＋"; color: #003945; font-weight: 900;}
  #categoriesboard details.category[open] summary::after{ content:"－";}

  #categoriesboard .category ul{
  grid-template-rows: none;  grid-auto-flow: row;
  grid-template-columns: 1fr;  gap: 0.6em 0;}

  /* 近期榜單總覽列表 */
  .board-latest{ margin-top: 40px;}
  .board-latest .board-group{
  grid-template-columns: 1fr; gap: 10px;
  margin: 20px 0;}

  .board-latest .board-group .board-head{
  background-color: unset;
  background-image: unset;
  border: 0px;
  box-shadow: none !important;
  flex-direction: row;
  margin: 0 0 10px;
  }
  .board-latest .board-group .board-head h3{ 
  font-size: 1.6rem; letter-spacing: 1px;
  position: relative;
  display: inline;
  }
  .board-latest .board-group .board-head h3::after {
  content: "";
  position: absolute;
  bottom: 2px; /* 調整底線高度，稍微遮住文字底部更有設計感 */
  left: 0;
  width: 100%; height: 5px;
  background-color: #23d9bd;
  z-index: -1; /* 讓底線在文字後方 */
  opacity: 0.4;
}
  .board-latest .board-group .board-head img{ display: none;}
  .board-latest .board-group ul{
  gap: 15px;/* 項目間距 */
  padding: 0 0 10px;
  margin-left: 0;
}

}

@media(max-width:600px){

  main{ margin-bottom: 25px; padding: 0 2%;}

  /* 麵包屑 */
  main .bread_list{ margin: 10px 0;}

  /* 單元主題標題 */
  .page-title{ width: 100%; padding: 20px;}
  .page-title h1{ font-size: 1.8em;}

  section{ padding: 20px 0 0;}

  /* 篩選年份 */
  .filter-wrap ul li{ width: 60%;}
  .filter-wrap ul li:last-child{ width: 20%;}

  /* 榜單BN */
  .board-list ul{ justify-content: space-between;}
  .board-list ul li{ margin-right:0; width: 48%;}
  .board-list ul li:nth-child(2n){ margin-right:0;}
  .board-list ul li:nth-child(5n){ margin-right:0;}


}