/* main.css (최종 수정본) */

/* ▼▼▼ [추가] notice.css와 색상 통일을 위한 변수 정의 ▼▼▼ */
:root {
  --text-main: #111;
  --text-sub: #5f5f5f;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  background: linear-gradient(135deg, #e0f7fa 0%, #f5f7fa 100%);
}

/* ▼▼▼ [수정] 내비게이션 링크 전체를 탭 버튼 디자인으로 교체 ▼▼▼ */
.nav-link {
  /* 크기 및 모양 */
  padding: 12px 24px;
  border-radius: 12px;

  /* 배경 및 글자 스타일 */
  background-color: transparent;
  color: var(--text-sub); /*<-- 변수 사용*/
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;

  /* 입체 그림자 효과 */
  box-shadow: 4px 4px 8px #dce1e4, -4px -4px 8px #ffffff;
  transition: color 0.3s, box-shadow 0.3s;
}

.nav-link:hover:not(.active) {
  /* 마우스 호버 효과 */
  color: var(--text-main); /*<-- 변수 사용*/
  background-color: transparent;
}

.nav-link.active {
  /* 활성화(눌렸을 때) 상태 */
  color: var(--text-main); /*<-- 변수 사용*/
  background-color: transparent;

  /* 눌린듯한 inset 그림자 효과 */
  box-shadow: inset 2px 2px 4px #dce1e4, inset -2px -2px 4px #ffffff;
}
/* ▲▲▲ [수정] 내비게이션 링크 전체 수정 끝 ▲▲▲ */


/* 프로필 및 드롭다운 스타일 (기존과 동일) */
.user-wrapper {
  position: relative;
}
.user-box {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f5f6fa;
  box-shadow: inset 3px 3px 7px #d4d5d9, 
              inset -3px -3px 7px #ffffff;
}
#profileName {
  font-size: 0.8rem;
  font-weight: 600;
  color: #444;
  margin: 0;
}
.user-box i {
  font-size: 0.8rem;
  color: #888;
  transition: .2s;
}
.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 160px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  padding: 8px 0;
  display: none;
  z-index: 20;
}
.dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: .92rem;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  transition: .13s;
}
.dropdown a:hover {
  background: #f8f8f8;
}
.user-box.loading * {
  visibility: hidden;
}


@media (max-width: 1023px) { /* Tailwind의 lg breakpoint와 맞춤 */
  /* 드롭다운에서 '내 프로필' 숨기기 */
  .dropdown .pc-only-item {
    display: none;
  }

  /* [수정] 메인 콘텐츠 영역이 스크롤되도록 설정 */
  main#content-area {
    padding-bottom: 90px;
  }
  /* ▼▼▼ [추가] 새로운 하단 메뉴 스타일 ▼▼▼ */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 24px;
    left: 24px;   /* [수정] 좌우 여백을 주어 전체 폭 축소 */
    right: 24px;  /* [수정] 좌우 여백을 주어 전체 폭 축소 */
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;    /* [수정] 뒤로가기 버튼과 메뉴 풍선 사이 간격 축소 */
    padding: 0;   /* [수정] 내부 패딩 제거 */
    z-index: 1000;
    transition: transform 0.4s ease-in-out; /* 애니메이션 효과 */
  }
    .mobile-bottom-nav--hidden {
    transform: translateY(150%);
  }
  .back-button {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  .nav-bubble {
    display: flex;
    align-items: center;
    justify-content: center; /* [수정] 아이콘들을 가운데로 모음 */
    gap: 20px;               /* [추가] 아이콘들 사이의 간격을 직접 지정 */
    flex-grow: 1;
    height: 56px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    padding: 0 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  .icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    color: #333;
    border: none; /* [수정] 테두리 제거 */
    transition: all 0.2s ease;
  }
  .icon-button.active {
    color: #007BFF; /* [수정] 활성화 시 아이콘 색상만 변경 */
  }

    #goAdminPage {
    display: none !important;
  }
}