/* /assets/common/bottom-nav.css */

/* 下ナビ（マイページのバランスを基準に統一） */
nav.bottom-nav,
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  height: 64px;
  background: #fff;

  display: flex;
  justify-content: space-around;
  align-items: flex-start;

  box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
  z-index: 999;

  /* マイページの値を踏襲 */
  padding-top: 30px;

  /* iPhoneのsafe-areaに対応（見た目を崩さず、端末差のズレを抑える） */
  padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
}

/* 各タブ */
nav.bottom-nav a,
.bottom-nav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #888;
  font-size: 0.5rem;

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

  /* 元コードの「padding: -12px 0;」は無効値なので、意図を崩さず0に固定 */
  padding: 0;

  /* マイページの値を踏襲 */
  margin-top: -16px;

  -webkit-tap-highlight-color: transparent;
}

/* アイコン枠 */
nav.bottom-nav a i,
.bottom-nav a i {
  width: 22px;
  height: 22px;

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

  margin-bottom: 4px;
}

/* ラベル */
nav.bottom-nav a div,
.bottom-nav a div {
  margin-top: 4px;
  margin-bottom: 1px;
  line-height: 1.2;
}

/* lucideのSVG */
nav.bottom-nav a i svg,
.bottom-nav a i svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* アクティブ */
nav.bottom-nav a.active,
.bottom-nav a.active {
  color: #007aff;
  font-weight: bold;
}

nav.bottom-nav a.active svg,
.bottom-nav a.active svg {
  stroke: #007aff;
}