/* =====================
   Bottom Nav
   ===================== */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  height: calc(58px + env(safe-area-inset-bottom, 0px)); /* 기존 56px → 위로 2px 증가 */
  display: flex;
  background: #0f1114;
  border-top: 1px solid #1f2226;
  z-index: 1000;
}

/* 공통 버튼 */
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-decoration: none;   /* 밑줄 제거 */
  outline: none;           /* 포커스 라인 제거 */
  box-shadow: none;        /* 잔상 제거 */

  background: none;
  border: none;

  color: #777;
  font-size: 12px;
  font-weight: 400;
}

/* 클릭/포커스 시 생기는 잔상 제거 */
.bottom-nav a:focus,
.bottom-nav a:active,
.bottom-nav a:visited {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

/* =====================
   Active 상태
===================== */

.bottom-nav a.active {
  color: #A259FF;
  font-weight: 700;
}

.bottom-nav a.active,
.bottom-nav a.active span,
.bottom-nav a.active .label {
  color: #A259FF;
  font-weight: 700;
}

/* =====================
   Icon System (fill0 / fill1)
===================== */

/* 아이콘 래퍼: 모든 아이콘 기준 박스 통일 */
.bottom-nav .icon {
  position: relative;
  width: 23px;   /* 🔽 전체 아이콘 1px 감소 (24 → 23) */
  height: 23px;  /* 🔽 전체 아이콘 1px 감소 (24 → 23) */
  margin-bottom: 4px;

  display: block;
}

/* 아이콘 공통: 항상 같은 좌표, 같은 박스 기준 */
.bottom-nav .icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: contain;
}

/* 기본 상태: fill0 보이고 fill1 숨김 */
.bottom-nav .icon .icon-fill0 {
  display: block;
}

.bottom-nav .icon .icon-fill1 {
  display: none;
}

/* 활성 상태: fill1 보이고 fill0 숨김 */
.bottom-nav a.active .icon .icon-fill0 {
  display: none;
}

.bottom-nav a.active .icon .icon-fill1 {
  display: block;
}

/* =====================
   Fill 아이콘 미세 위치 보정
   (눌렀을 때 푹 꺼지는 느낌 방지)
===================== */

.bottom-nav .icon .icon-fill1 {
  transform: translateY(-3px);
}

/* =====================
   페이지별 아이콘 미세 보정
===================== */

/* 홈: 아이콘 전체 1px 키움 (fill 포함) */
.bottom-nav a[data-page="home"] .icon {
  width: 24px;   /* 🔽 기존 25 → 24 */
  height: 24px;  /* 🔽 기존 25 → 24 */
}

/* 채팅: 아이콘 전체 2px 아래로 */
.bottom-nav a[data-page="chat"] .icon {
  transform: translateY(2px);
}

/* 제작: 아이콘 전체 1px 아래로 (fill0 / fill1 둘 다 같이) */
.bottom-nav a[data-page="create"] .icon {
  transform: translateY(1px);
}

/* 프로필: 아이콘 전체 1px 아래로 */
.bottom-nav a[data-page="profile"] .icon {
  transform: translateY(1px);
}

/* =====================
   Label
===================== */

.bottom-nav .label {
  font-size: 12px;
  color: #777;
  line-height: 1;
  margin-top: 0px;
}

/* 활성 라벨 색상 보장 */
.bottom-nav a.active .label {
  color: #A259FF !important;
  font-weight: 700 !important;
}

/* =====================
   Legacy SVG 대응 (혹시 남아있을 경우)
===================== */

.bottom-nav a.active svg {
  fill: #A259FF;
}

.bottom-nav a.active svg path {
  fill: #A259FF;
}

.bottom-nav {
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}