/*--------------------------------------------------------------
# navbar 
--------------------------------------------------------------*/

.navbar{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


#nav-uj{
  width: 100%;
  margin: auto;
  transition: background-color .25s ease, box-shadow .25s ease;
  background-color: transparent; 
}

@media (min-width: 1400px) {
  .container{
    max-width: 1320px;
  } 
}


#nav-menu{
  position: relative;
  display: flex;
  align-items: center;
}



/* 共用 X 按鈕 */
.btn-blue{
  position: relative;
  padding: 5px 28px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient( 180deg, #008ff3 50%, #047fd5 50%);
  border: 2px solid #ffffff;
  border-radius: 999px; /* 膠囊形狀 */
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 9;

}
.btn-blue::before{
  content: "";
  position: absolute;
  top: 15%;
  left: 13%;
  width: 100%;
  max-width: 5px;
  height: 100%;
  max-height: 5px;
  border-radius: 25px;
  border: 1px solid #fff;
  background: #fff;
  z-index: 19;
} 
.btn-blue::after{
  content: "";
  position: absolute;
  top: 10%;
  left: 23%;
  width: 100%;
  max-width: 3px;
  height: 100%;
  max-height: 3px;
  border-radius: 25px;
  border: 1px solid #fff;
  background: #fff;
  z-index: 19;
} 


.btn-blue:hover {
  background: linear-gradient( to bottom, #63d1ff 0%,#2196f3 100%);
}
.btn-blue:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}



#nav_account button.btn-blue{
  width: 100px;
  padding: 0px;
  margin-left: .5rem;
}





/* 共用 X 天標-字體樣式 */
  .txt_nav_menu{
    width: max-content;
    font-size: 15px;
    font-weight: 600;
    color: #3358a0;
    text-shadow:
      -2px -2px 0 #ffffff,
      0px -2px 0 #ffffff,
      2px -2px 0 #ffffff,
      -2px  0px 0 #ffffff,
      2px  0px 0 #ffffff,
      -2px  2px 0 #ffffff,
      0px  2px 0 #ffffff,
      2px  2px 0 #ffffff,

      /* 陰影 */
      2px  2px 0 rgba(0,0,0,0.15);
  }






/* 捲動超過 1000px 後套用 X 導覽列滾動後縮小效果 */
  #nav-uj.scrolled {
    background-color:rgb(251 250 251 / 52%);      
    box-shadow: 0 6px 20px rgba(170, 172, 175, 0.25);
    -webkit-backdrop-filter: saturate(150%) blur(6px);
    backdrop-filter: saturate(150%) blur(6px);  /* 玻璃霧面效果 */
    height: 70px;
    transition: all 0.35s ease;
  }

  #nav-uj.scrolled .container {
    align-items: center;
    /* width: 70%; */
    transition: all 0.35s ease;
  }
  
/* LOGO 單獨微縮 + 調整間距 */
  #nav-uj.scrolled .nav-logo img {
    transform: scale(0.75);
    filter: drop-shadow(0 0 0.15rem rgba(255,255,255,0.8));
    transition: transform 0.35s ease, filter 0.35s ease;
  }

/* 導覽項縮小字距與 padding，視覺集中 */
  #nav-uj.scrolled .tt_all a {
    /* padding-top: 4px; */
    /* letter-spacing: 0.5px; */
    /* transform: scale(0.75); */
    transition: all 0.35s ease;
  }

  #nav-uj.scrolled .icon_all a {
    /* letter-spacing: 0.5px; */
    /* transform: scale(0.75); */
    transition: all 0.35s ease;
  }


/* 固定導覽列浮在上方（比 offcanvas backdrop 高一點） */
/* Bootstrap offcanvas/backdrop 預設 z-index 1045，保留不動 */
  #nav-uj.navbar.fixed-top {
    z-index: 1046;
  } 


/* 769px以下收起 */
  #nav-uj.nav-hide {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none; /* 隱藏後不佔互動 */
    position: fixed;      /* 固定於頂端移動 */
  }





.navbar-brand {
  margin-right: 0;
}

#nav-uj .container {
  width: 100%;
  /* border: 1px solid #fff; */
  align-items: center;
}

.nav-logo {
  width: fit-content;
}

.nav-logo img {
  position: relative;
  width: 100%;
  max-width: 180px;
  z-index: 100;
  margin-top: 0px;
  filter: drop-shadow(0 0 0.2rem rgb(255, 255, 255));
}

.nav-logo.logo_jp,
.nav-logo.logo_en,
.icon_all_mb{
  display: none !important;
}



.tt_all {
  display: flex;
  gap: 2rem;
  padding-right: 1.5rem;
  /* border: 1px solid #fff; */
}
.tt_all a{
  /* width: 120px; */
  padding-top: 10px;
  padding-bottom: 10px;
}



/* 社群 X 語系 X ICON */
.icon_all {
  display: flex;
  align-items: center;
  /* border: 1px solid #fff; */
}

.icon_all a {
  /* padding: 10px 7px; */
  padding-left: 0;
}

.icon_all a:hover {
  filter: drop-shadow(2px 4px 6px #fd80ec) blur(.5px);
}

.icon_all img {
  width: 35px;
}

#nav_account{
  display: flex;
  flex-direction: row;

}


#nav_account img.img_nav_account{
  width: 25px;
  padding:5px 0px;
}


#nav_account button{
  margin-right: 1rem;
}

.nav-login-max,
.nav-login-sm,
.nav-logo2 {
  display: none;
}



/*語系*/
#language_pc a#langDropdown{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ee6a8c;
  width: 100%;
  color: #fff;
  padding: 0 15px !important;
  border-radius: 50px;
}

#langDropdown img{
  margin: 5px 5px 5px 0px;
}


.dropdown .nav-link img{
  margin: 10px 7px;
}

.dropdown .nav-link:hover{
  filter:blur(0) drop-shadow(1px 1px 3px #FFF) brightness(1.2);
}

.icon_all a:nth-of-type(1) {
  opacity: 1;
}

.icon_all a:nth-of-type(1) i {
  width: 100%;
  height: 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  position: relative;
  left: 0;
  top: 0;
  z-index: 99;
}



/* 語系選單：容器 */
.lang-switch { position: relative; }

/* 下拉面板 */
.lang-menu {
  /* min-width: 210px; */
  width: 100%;
  min-width: unset;
  /* padding: .5rem 0; */
  /* border-radius: 12px; */
  background: rgb(250, 249, 250);
  border: 2px solid #f88da9;
  /* box-shadow: 0 12px 30px rgba(10, 6, 60, .3); */
  backdrop-filter: blur(4px);
  z-index: 1060; /* 確保蓋住前景 */
}

/* 文字排版（中文在上，英文小字在下） */
.lang-menu .dropdown-item {
  display: block;
  padding: 1.2rem 1rem !important;
  /* padding: .65rem 1rem; */
  /* margin: .7rem 0; */
  color: #ee6a8c;
  line-height: 1.2;
}
.lang-menu .dropdown-item:hover {
  background: linear-gradient(180deg, rgba(135,215,245,.12), rgba(135,215,245,.06));
}

.lang-menu .dropdown-item:hover{
  background: #f88da9 !important;
  color: #FFF;
  filter: none;
}




/* 中文行（主標） */
.lang-menu .dropdown-item .zh {
  display: block;
  font-weight: 600;
  letter-spacing: .02em;
  color: #f7ecfa;
}

/* 英文行（副標） */
.lang-menu .dropdown-item small {
  display: block;
  font-size: .72rem;
  opacity: .75;
}


/* 手機：下拉面板寬度稍微收斂 */
/* @media (max-width: 991.98px){
  .lang-menu { min-width: 160px; }
} */






/* ========== 導覽列平滑縮放（取代 .scrolled 突兀效果） ========== */
#nav-uj .container{
  --shrink: 0;
  transform-origin: top center;
  transform: scale(calc(1 - 0.08 * var(--shrink)));
  background-color: rgba(20, 3, 41, calc(0.78 * var(--shrink)));
  box-shadow: 0 6px 20px rgba(0,0,0,calc(0.25 * var(--shrink)));
  /* backdrop-filter: saturate(150%) blur(calc(6px * var(--shrink))); */
  transition: none; /* JS 控制變化，不用 transition */
}

/* LOGO 連續縮放 */
#nav-uj .nav-logo img {
  transform: scale(calc(1 - 0.15 * var(--shrink)));
  filter: drop-shadow(0 0 .15rem rgba(255,255,255,calc(.8 * var(--shrink))));
  transition: none;
}

/* 導覽項縮小字距與 padding */
#nav-uj .tt_all a,
#nav-uj .icon_all a {
  padding-top: calc(7px - 4px * var(--shrink));
  transform: scale(calc(1 - 0.15 * var(--shrink)));
  transition: none;
}

/* 桌機以外不要縮 */
@media (max-width: 991.98px) {
  #nav-uj {
    transform: none;
    background-color: rgba(20, 3, 41, calc(0.78 * var(--shrink)));
  }
}
/* ========== 導覽列平滑縮放（取代 .scrolled 突兀效果） ========== */









/* ========== 手機版 右側選單 ========== */
.navbar-light .navbar-toggler{
  width: 4rem;
  border: none;
  filter: drop-shadow(0px 0px 3px #fff);
}
  /*手機版 語系*/
  #language_mb #langDropdownMbIndex{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ee6a8c;
    width: 100%;
    color: #fff;
    font-size: 15px;
    padding: 0 10px 0 0px !important;
    border-radius: 50px;
  }
  #langDropdownMbIndex img{
    width: 25px;
  }




.offcanvas-body{
  background: rgba(10, 6, 60, 0.9);
  text-align: center;
  /* overflow-y:unset; */
  flex: 1 1 auto;    /* 讓 body 自動撐開剩餘空間 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 2rem; /* 避免內容被底部遮住 */
  }

#ujOffcanvas .offcanvas-header {
    flex: 0 0 auto;
    padding-top: 1rem;
  }


.offcanvas-body .tt_all{
    flex-direction:column;
}

.offcanvas-body .icon_all{
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.offcanvas-body .tt_all a{
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.offcanvas-body .icon_all a{
    display: flex;
    justify-content: center;
    width: 30%;
}


/* Offcanvas 外觀 */
#ujOffcanvas {
  background: rgba(10, 6, 60, 0.9);
  backdrop-filter: blur(6px);
  color: #fff;
  border-left: 1px solid rgba(135, 215, 245, 0.25);
  height: 100vh !important;            /* 高度填滿整個螢幕 */
    min-height: 100vh !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;                    /* 超出內容可捲動 */
}

.offcanvas-end{
  width: auto;
}

#ujOffcanvas .nav-link {
  color: #fff;
  font-weight: 500;
  padding: 0.6rem 0.25rem;
  text-decoration: none;
}

#ujOffcanvas .nav-link:hover {
  filter: drop-shadow(0 0 6px #e680fd);
}

#ujOffcanvas .tt_all img {
  width: 140px;
  height: auto;
  transition: filter .2s ease;
}

#ujOffcanvas .tt_all a:hover img,
#ujOffcanvas .icon_all a:hover img {
  filter: drop-shadow(2px 4px 6px #fd80ec) blur(.3px);
}

#ujOffcanvas .icon_all img {
  width: 40px; /* 縮小貼合手機 */
}

#ujOffcanvas .icon_all a {
    padding: 10px 7px;
}

/* 手機版：左 Close X 右漢堡對稱 */
.navbar .navbar-close {
  padding: 0.25rem;
  line-height: 1;
  /* close 深色背景清楚 */
  background: transparent;
  border: 0;
}
.offcanvas-header .btn-close{
  width: 1.5rem;
  height: auto;
  padding: none;
}

/* 若navbar 背景偏深，使用白色 close 圖示 */
.navbar .btn-close.btn-close-white {
  filter: invert(1) grayscale(100%);
}
/* ========== 手機版 右側選單 ========== */







@media (max-width: 1025px) {

}

/* ========== Mobile Offcanvas Nav ========== */
@media (max-width: 991.98px) {
  #nav-uj{
    width: 100%;
  }
  .nav-logo img{
    max-width: 150px;
  }
  .nav_mb{
    display: flex;
  }


  .tt_all,
  .icon_all_pc {
    display: none !important;
  }
  .icon_all_mb a.dc,
  .icon_all_mb a.yt,
  .icon_all_mb a.fb{
    display: none !important;
  }

  .icon_all a{
    padding: 5px;
  }

  .icon_all_mb{
    display: flex !important;
  }

  #ujOffcanvas .tt_all,
  #ujOffcanvas .icon_all {
    display: flex !important;
    align-items: center;
    padding-right: 0;
    margin-right: 0;
  }


  #language_mb { 
    display: flex !important;
  }
}





@media (max-width: 769px) {  
  #nav-uj.scrolled .container{
    width: 100%;
    height: 75px;
  }


  #nav-uj {
    transform: translateY(0);  /* 預設不移動 */
    transition: transform 0.35s ease, opacity 0.35s ease;
    opacity: 1;
  }
  #nav-uj .nav-logo img,
  #nav-uj .tt_all a,
  #nav-uj .icon_all a {
    transform: none !important;
    opacity: 1 !important;
  }
  #nav-uj.nav-hide {
    transform: translateY(-100%);
    opacity: 0;
  }


}

@media (max-width: 681px) {  
  .nav-logo img{
    max-width: 130px;
  }
}



@media (max-width:540px) {
  #nav-uj .container{
    width: 100%;
  }
  #ujOffcanvas .tt_all img{
    width: 120px;
  }
}


@media (max-width: 431px) {

  .icon_all img {
    width: 35px;
  }

}