/**
 * util-bar-auth.css  v20260617
 * ─────────────────────────────────────────────────────────────
 * g-util-links 인증 상태별 분기 스타일
 * - .g-util-list[data-auth-state] 기본 hidden → JS가 제거
 * - 기존 .g-util-links 타이포·간격·색상과 시각적으로 동일 유지
 * - 새 토큰·외부 폰트 도입 없음 (mws-tokens.css 기존 변수만 사용)
 * ─────────────────────────────────────────────────────────────
 */

/* ── 기존 g-util-links는 flex 컨테이너 역할 유지 ──────────── */
.g-util-links {
  display: flex;
  align-items: center;
}

/* ── ul 래퍼: 아이템을 가로 나열 ─────────────────────────── */
.g-util-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* hidden 속성이 있으면 숨김 (JS 제거 전 FOUC 방지) */
.g-util-list[hidden] {
  display: none !important;
}

/* ── 각 항목 ─────────────────────────────────────────────── */
.g-util-item {
  display: flex;
  align-items: center;
}

/* 항목 사이 구분선 — ::before로 인접 항목 간 자동 삽입 */
.g-util-item + .g-util-item::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--border, #eaecef);
  margin: 0 10px;
  flex-shrink: 0;
}

/* ── 링크 기본 스타일 ────────────────────────────────────── */
.g-util-link {
  font-size: 12px;
  color: var(--tx3, #8a94a6);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tr-fast, 0.14s ease);
  line-height: 1;
}

.g-util-link:hover,
.g-util-link:focus-visible {
  color: var(--tx-p, #A8884E);
  outline: none;
}

/* 파트너 입점 — CTA 강조 (마지막 항목 항상 적용) */
.g-util-item:last-child .g-util-link {
  color: var(--tx-p, #A8884E);
  font-weight: 700;
}

.g-util-item:last-child .g-util-link:hover {
  color: var(--p-dk, #A8884E);
}

/* ── FOUC 방지: html[data-auth] 설정 전 두 목록 모두 숨김 ─── */
/* JS가 data-auth 를 부여하기 전까지 아무것도 노출하지 않음    */
html:not([data-auth]) .g-util-list {
  visibility: hidden;
}