@layer components {
  .topnav {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem max(1rem, env(safe-area-inset-left)) 0.5rem max(1rem, env(safe-area-inset-right));
    background: var(--pc-bg, var(--dm-surface));
    border-bottom: 1px solid var(--gray-200);
  }

  .topnav__left,
  .topnav__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .topnav__right {
    flex: 0 0 auto;
    min-width: max(44px, 2.5rem);
    padding-left: 2px; /* 아바타와 메뉴 간 최소 간격 */
  }

  .topnav__center {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto; /* 가로 스크롤 활성화 */
    overflow-y: hidden;
    scroll-snap-type: x proximity; /* 스냅 보조 */
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    scrollbar-width: none; /* Firefox: 스크롤바 숨김 */
    -ms-overflow-style: none; /* IE/Edge 레거시: 스크롤바 숨김 */
  }
  .topnav__center::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }

  .topnav__center > * {
    flex: 0 0 auto;
  }

  .topnav__center .nav-btn,
  .topnav__center .topnav__item {
    flex: 0 0 auto !important;
    min-width: max-content;
    white-space: nowrap;
  }

  .topnav__scroll {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
  }

  /* 헤더 네비게이션 아바타 - 랭킹 페이지 CSS에 영향받지 않도록 !important 사용 */
  .user-avatar-btn img,
  #user-avatar-img,
  .topnav__right .user-avatar-btn img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
  }
  
  /* 플레이스홀더 아바타도 동일 크기 보장 */
  .user-avatar-btn .user-avatar,
  .topnav__right .user-avatar-btn .user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
  }

  .topnav__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    scroll-snap-align: start; /* 항목 시작에 스냅 */
  }

  /* 선택된 메뉴: 배경 대신 텍스트 색상 + 하단 라인 */
  .topnav__item[aria-current="page"] {
    background: transparent;
    font-weight: 600;
    color: var(--dm-text-primary, #1f2937);
    border-bottom: 2px solid var(--dm-primary, #3b82f6);
    border-radius: 0;
    padding-bottom: 0.5rem;
  }

  /* 다크 모드: 더 밝은 텍스트 색상으로 가시성 확보 */
  [data-theme="dark"] .topnav__item[aria-current="page"],
  .dark .topnav__item[aria-current="page"] {
    color: #f9fafb;
    border-bottom-color: #60a5fa;
  }

  @media (prefers-color-scheme: dark) {
    .topnav__item[aria-current="page"] {
      color: #f9fafb;
      border-bottom-color: #60a5fa;
    }
  }

  .topnav__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    color: inherit;
    white-space: nowrap;
  }

  .topnav__action {
    min-height: 44px;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
  }

  .topnav__action:focus-visible,
  .topnav__item:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }
}

@layer utilities {
  .tap-44 {
    min-height: 44px;
  }
}

@layer components {
  .app-header.topnav {
    position: sticky !important;
    top: 0 !important;
    bottom: auto !important;
  }

  .app-header.topnav .app-nav {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    height: auto !important;
    border-top: 0 !important;
    box-shadow: none !important;
    justify-content: flex-start;
    gap: 0.25rem;
  }

  .app-bottom-nav,
  .bottom-nav,
  .mobile-bottom-nav,
  .mobile-nav,
  .nav-bottom {
    display: none !important;
  }

  @media (max-width: 768px) {
    .app-main {
      padding: 1.5rem 1rem 1.5rem 1rem !important;
    }
  }

  /* === 모바일 최적화: 로고 감추고 단일 행 유지 === */
  @media (max-width: 480px) {
    .topnav__brand,
    .app-header.topnav .logo {
      display: none !important;
    }

    .app-header.topnav {
      grid-template-columns: 1fr auto !important;
    }

    .topnav__center { gap: 0.125rem !important; }
    .topnav__item { padding: 0.25rem 0.4rem !important; font-size: 0.9rem; }
  }

  @media (max-width: 430px) {
    .topnav__item {
      padding: 0.25rem 0.5rem !important;
    }
  }

  @media (max-width: 360px) {
    .topnav__center { gap: 0.1rem !important; }
    .topnav__item { padding: 0.25rem 0.3rem !important; font-size: 0.85rem; }
  }

  /* 데스크톱/모바일 동일: 리본 스크롤 유지 */

  /* 상단 내비 환경에서 프로필 메뉴 드롭다운을 항상 아래로 펼침 */
  .app-header.topnav .user-profile-dropdown { position: relative !important; }
  .app-header.topnav .user-menu {
    top: calc(100% + 10px) !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    max-height: min(80dvh, 480px);
    overflow: auto;
  }
}