/* Jフェスモック共通コンポーネント（activity_main.xml + main_bottom_navigation.xml + toolbar 準拠） */

/* iPhone 端末フレーム */
.phone {
  position: relative;
  width: 393px;      /* iPhone 15 pt 幅相当 */
  min-height: 100svh;
  margin: 0 auto;
  background: var(--Bg_1);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--Divider_default);
}

/* ヘッダー: RIJF テーマ色 = --Header_bg_RIJF (#0f4fd1) */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 56px;
  background: var(--Header_bg_RIJF);
  color: var(--Header_txt);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 4px;
}
.app-header__back {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--Header_txt);
  cursor: pointer;
  border-radius: 50%;
}
.app-header__back svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.app-header__title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  color: var(--Header_txt);
  text-align: center;
  padding: 0 8px;
}
.app-header__action {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--Header_txt);
  cursor: pointer;
}
.app-header__action svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Bottom Navigation: activity_main.xml から
   - margin bottom 8dp / start 6dp / end 6dp
   - background: TabBar_bg = #232429
   - selected icon color: accent (#e5273e)
   - unselected: fill_13 (#c8c8c8) */
.bottom-nav {
  position: fixed;
  left: 6px;
  right: 6px;
  bottom: 8px;
  height: 62px;
  background: var(--TabBar_bg);
  border-radius: 20px;
  display: flex;
  align-items: stretch;
  padding: 6px 4px;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
@media (min-width: 393px) {
  .bottom-nav {
    left: max(6px, calc(50% - 197px + 6px));
    right: max(6px, calc(50% - 197px + 6px));
    max-width: 381px;
    margin: 0 auto;
  }
}
.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--fill_13);
  cursor: pointer;
  padding: 4px 2px;
  text-decoration: none;
  font-size: 10px;
  line-height: 1;
}
.bottom-nav__item svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.bottom-nav__item .mask-icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  display: inline-block;
}
.mask-icon--home  { -webkit-mask-image: url("../assets/icons/ic_main_navigation_home.svg");  mask-image: url("../assets/icons/ic_main_navigation_home.svg"); }
.mask-icon--ticket{ -webkit-mask-image: url("../assets/icons/ic_main_navigation_ticket.svg");mask-image: url("../assets/icons/ic_main_navigation_ticket.svg"); }
.mask-icon--lineup{ -webkit-mask-image: url("../assets/icons/ic_main_navigation_lineup.svg");mask-image: url("../assets/icons/ic_main_navigation_lineup.svg"); }
.mask-icon--goods { -webkit-mask-image: url("../assets/icons/ic_main_navigation_goods.svg"); mask-image: url("../assets/icons/ic_main_navigation_goods.svg"); }
.mask-icon--map   { -webkit-mask-image: url("../assets/icons/ic_main_navigation_map.svg");   mask-image: url("../assets/icons/ic_main_navigation_map.svg"); }
.mask-icon--others{ -webkit-mask-image: url("../assets/icons/ic_main_navigation_others.svg");mask-image: url("../assets/icons/ic_main_navigation_others.svg"); }
.bottom-nav__item.is-active {
  color: var(--accent);
}
.bottom-nav__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* コンテンツエリア（bottom nav 分の空きを確保） */
.screen {
  padding-bottom: calc(var(--space-bottom-padding) + env(safe-area-inset-bottom, 0px));
}
.screen.no-nav {
  padding-bottom: 0;
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn--accent {
  background: var(--accent);
  color: #fff;
}
.btn--fill {
  background: var(--Btn_Bg_Fill);
  color: var(--Btn_Txt_Fill);
}
.btn--line {
  background: transparent;
  color: var(--Btn_Txt_Line);
  border: 1px solid var(--Btn_Bg_Line);
}
.btn--navy {
  background: var(--Btn_Bg_Navy);
  color: var(--Btn_Txt_Navy);
}
.btn--block {
  width: 100%;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--Divider_default);
  border: none;
}