/* ========================= */
/* Navbar Tab */
/* ========================= */
.navbar-tab::-webkit-scrollbar{
  display:none;
}

.navbar-tab{
  position:fixed;
  overflow: hidden;
	overscrollBehaviorY: contain;
	touch-action: pan-x;
  top:55px; /* navbarの高さに合わせる */
  left:0;
  width:100%;
  height:40px;

  display:flex;
  align-items:center;

  background:#3a3f47;
  z-index:20;
	overflow-x:auto; /* ← 追加 */
  -webkit-overflow-scrolling:touch;
	scroll-snap-type:x mandatory; /* ← スナップON */
}



/* ========================= */
/* Tab */
/* ========================= */

.tab{
	position:relative;

  scroll-snap-align:start; /* ← スナップ位置 */
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;

  display:flex;
  align-items:center;
  justify-content:center;
	

  padding:0 12px;

  font-size:13px;
  color:#aaa;

  background:transparent;
  border:none;
	



  border:0.5px solid rgba(255,255,255,0.08);
	height:44px;
}


/* ========================= */
/* 1〜3個（均等） */
/* ========================= */

.navbar-tab.fit .tab{
  flex:1;
}


/* ========================= */
/* 4個以上（3固定 + scroll） */
/* ========================= */

.navbar-tab.scroll .tab{
  flex:0 0 calc(100% / 3);
}



/* ========================= */
/* Active */
/* ========================= */

.tab.active{
  background:rgba(255,255,255,0.18);
  color:#fff;
  backdrop-filter: blur(10px);
  height:44px;
  z-index:20;
}


/* ========================= */
/* Press（押した時） */
/* ========================= */

.tab:active{
  background:#444a52;
}

.tab-icon:active,
.tab-icon:active svg{
  color:#fff;
}

.tab.closing{
  background:#444a52;
}
/* ========================= */
/* ラベル（中央固定） */
/* ========================= */

.tab-label{
  justify-content:center;
	align-items:center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width:60%;
}

/* ========================= */
/* Label Drag 禁止 */
/* ========================= */

.tab-label{
  user-select:none;
  -webkit-user-drag:none;
  -webkit-user-select:none;
}


/* ========================= */
/* Icon */
/* ========================= */

.tab-icon{
	position:absolute;
	left: 5%;
	
  display:none;
  width:20px;
  height:20px;
  color:rgba(255,255,255,0.6);
	opacity:0.8;
}

.tab-icon svg{
  width:100%;
  height:100%;
	
}


/* ========================= */
/* Activeだけ表示 */
/* ========================= */

.tab.active .tab-icon{
  display:block;
}


/* ========================= */
/* Pin Icon */
/* ========================= */

.tab-pin{
  position:absolute;
  right:5%;

  width:20px;
  height:20px;

  display:none; /* ← デフォルト非表示 */

  align-items:center;
  justify-content:center;

  color:rgba(255,255,255,0.6);
  opacity:0.8;
}

/* activeのときだけ表示 */
.tab.active .tab-pin{
  display:flex;
}

/* ========================= */
/* ON/OFF切替 */
/* ========================= */

/* 初期（OFF表示） */
.pin-on{
  display:none;
}

/* pinned時 */
.tab.pinned .pin-off{
  display:none;
}

.tab.pinned .pin-on{
  display:block;
  color:#fff;
}

/* ========================= */
/* ピンON時は×非表示 */
/* ========================= */

.tab.pinned .tab-icon{
  display:none;
}