/*
     * 공유 chrome은 폰트를 직접 고정한다.
     * body에서 상속받게 두면 페이지마다 body font-family가 달라 같은 컴포넌트가 다르게 렌더된다.
     * 실제로 admin_landing.css만 Pretendard 스택을 써서(웹폰트 미로드 → -apple-system 폴백)
     * .badge처럼 내용 폭으로 크기가 정해지는 요소가 다른 어드민 페이지와 어긋났다.
     */
    .topbar,
    .admin-nav-wrap {
      font-family: 'Segoe UI', sans-serif;
    }

    .topbar {
      background: #1a202c;
      color: #fff;
      padding: 14px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .topbar h1 {
      /*
       * h1의 브라우저 기본 margin(0.67em ≈ 12px 상하)을 여기서 직접 없앤다.
       * 이 값을 페이지별 CSS의 `* { margin: 0 }` 리셋에 맡기면, 그 리셋이 없는 페이지에서만
       * topbar가 ~24px 높아진다(실제로 admin_landing.css에서 발생했다).
       * 공유 컴포넌트는 사용하는 쪽의 전역 리셋에 의존하지 않아야 한다.
       */
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .topbar .badge {
      display: inline-block;
      padding: 3px 8px;
      background: #2d3748;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 700;
    }
    .topbar .user-info {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
    }
    .admin-nav-wrap { background: #fff; border-bottom: 1px solid #e2e8f0; }
    .admin-nav {
      max-width: 1180px;
      margin: 0 auto;
      padding: 10px 16px;
      display: flex;
      gap: 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .admin-nav::-webkit-scrollbar { display: none; }
    .admin-nav-link {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 9px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #fff;
      color: #4a5568;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      text-decoration: none;
      white-space: nowrap;
    }
    /* 서비스 바로가기 */
    .admin-nav-link.admin-nav-service { background: #f7fafc; }
    /* 데스크톱: 메뉴가 많아도 가로 스크롤에 숨지 않도록 줄바꿈한다(모바일은 기존처럼 가로 스크롤). */
    @media (min-width: 769px) {
      .admin-nav { flex-wrap: wrap; overflow-x: visible; }
    }
    .admin-nav-link.active,
    .admin-nav-link:hover { background: #ebf2ff; border-color: #c3cdf3; color: #2b4acb; }

    @media (max-width: 768px) {
      .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
      }
      .topbar .user-info {
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }
      #userName {
        flex-basis: 100%;
        order: -1;
        font-size: 14px;
      }
      .admin-nav { padding: 8px 14px; }
    }