/* 画面下部の共通タブバー。全ページで読み込む。
   デザインから採取した色: 背景#F1F1F1 / アクティブ#DA2769 */
:root {
  --tabbar-h: 62px;
  --tab-active: #DA2769;
  --tab-idle: #8a8a8a;
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #F1F1F1;
  border-top: 1px solid #e0dcde;
}

.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--tab-idle);
  font-size: 11px;
  font-weight: bold;
  -webkit-tap-highlight-color: transparent;
}

.tabbar a.active { color: var(--tab-active); }

.tabbar svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* タブバーに隠れないよう、各ページの本文末尾に余白を確保する */
.tabbar-spacer {
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}