@charset "utf-8";

/*頁籤切換區--------------------------------*/
.tabBox{ display: flex; gap: 24px;/*頁籤和內容的間距*/ align-items: flex-start;}

/*--頁籤選單----*/
.tabMenu{ list-style: none; margin: 0; padding: 0; width: 430px;/*頁籤選單寬度*/}
.tabMenu img{ display: block;}
.tabMenu li{ margin: 0 0 8px; border: #000 4px solid;/*頁籤外框*/ border-radius: 16px;/*頁籤圓角*/ cursor: pointer; user-select: none;/*禁止點擊拖曳時反白*/}
/*頁籤底色*/
.tabMenu > li:nth-child(1){ background-color: #ffb657;}
.tabMenu > li:nth-child(2){ background-color: #87ca74;}
.tabMenu > li:nth-child(3){ background-color: #aea2da;}
/*頁籤(滑入)底色*/
.tabMenu > li:nth-child(1)[aria-selected="true"]{ background:#f5a524;}
.tabMenu > li:nth-child(2)[aria-selected="true"]{ background:#5ebe44;}
.tabMenu > li:nth-child(3)[aria-selected="true"]{ background:#9685d3;}
/*頁籤(點擊)外框*/
.tabMenu li:focus{ outline: 3px dashed #000; outline-offset: 2px;}

/*--頁籤內容----*/
.tabContents{ width: calc(100% - 430px);/*扣掉選單的寬度*/ flex: 1 1 auto; min-width: 0; position: relative;}

/*頁籤內容：用aria-hidden切換(不用display:none;)*/
/*滑鼠未滑入，不顯示內容*/
.mainTabCon[aria-hidden="true"]{
  position: absolute;
  inset: 0;            /*把元素固定在父層範圍內*/
  height: 0;           /*高度歸零，不佔空間*/
  overflow: hidden;    /*裡面的東西不要露出*/
  visibility: hidden;  /*不顯示*/
  pointer-events: none;
  opacity: 0;
}
/*滑鼠滑入，顯示對應內容*/
.mainTabCon[aria-hidden="false"]{
  position: relative;
  height: auto;
  overflow: visible;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

/*頁籤內容(外框設定)*/
.tabConBg{ padding: 16px;/*內容內間距*/ /*border: 8px solid #000;*//*內容外框*/ border-radius: 20px;/*內容圓角*/ /*background:#fff;*/}
/*頁籤內容(對應底色)*/
/* .tabConBg.t1{ background: #ffb657;}
.tabConBg.t2{ background: #87ca74;}
.tabConBg.t3{ background: #aea2da;} */


/*頁籤切換區(小於1024)：隱藏 tabMenu，改用 topTabBox 控制；內容仍維持「單一分頁顯示」*/
/*若要搬進 index.css，請放在所有 @media 斷點的最下面*/
@media (max-width: 1024px){
  /*--頁籤選單----*/
  .tabMenu{ display: none;}/*隱藏*/

  /*--頁籤內容----*/
  .tabContents{ width: 100%;}
}

/*topTabBox：捲到內容區時，固定在底部*/
.topTabBox.isFloating{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1%;
  width: 100%;
  max-width: 1150px;
  z-index: 999;
}

/*避免 topTabBox 固定時，原本位置塌陷造成跳動：由 JS 動態控制高度與顯示 */
.topTabBoxPlaceholder{ display: none; }


/*固定在底部時避開右下的浮動按鈕(top鈕+分享鈕)*/
@media (max-width: 1250px){ /*要大於上方的max-width: 1200px;*/
  /*topTabBox：捲到內容區時，固定在底部*/
  .topTabBox.isFloating{
    position: fixed;
    left: 1%;
    transform: translateX(0);
    bottom: 0;
    width: calc( 100% - 65px);
    /* max-width: 1300px; */
  }
}