/* ── Utility bar ─────────────────────────────── */
.utility-bar {
  border-bottom: 1px solid var(--border);
  padding: 4px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--gray);
}
.utility-bar nav { display: flex; gap: 18px; }
.utility-bar a:hover { color: var(--red); }

/* ── Masthead ────────────────────────────────── */
/* 3-column grid: [좌측 더미] [가운데 로고] [우측 lang-toggle].
 * minmax(0, 1fr) 좌·우 동일 → 모바일에서 lang-toggle min-content 가
 * 1fr 보다 커서 column 3 가 확장되며 로고가 좌측으로 쏠리던 증상 차단. */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 10px 24px 8px;
  border-bottom: 3px double var(--black);
}
.masthead-center {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  text-align: center;
}
.masthead-side {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
}
.masthead > .lang-toggle {
  grid-column: 3;
  grid-row: 1;
}
/* KO/EN 토글·로그인 아이콘을 로고 기준 위로 15px (요청) */
.masthead-side,
.masthead-utils {
  position: relative;
  top: -11px;
}
.masthead h1 {
  font-family: 'Noto Serif KR', Georgia, serif;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
}
.masthead p {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
}

/* ── Main nav ────────────────────────────────── */
/* main-nav 좌우 padding 을 masthead 와 동일하게(24px) 두어,
 * 두 영역의 콘텐츠 시작·끝 라인을 정확히 일치시킴. */
.main-nav {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden; /* 절대배치 검색바가 세로로 살짝 넘쳐도 스크롤바 안 뜨게 */
}
.main-nav a {
  min-width: 92px;
  padding: 13px 0; /* 탭 영역 자체를 키워 검색바를 자연스럽게 수용 */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #999;
  transition: color .15s;
}
.main-nav a:hover { color: var(--black); }
.main-nav a.active { color: var(--black); font-weight: 900; }

/* ── Main container ──────────────────────────── */
.container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section label ───────────────────────────── */
h2.section-label,
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 4px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
}
.section-label::after {
  content: '';
  flex: 1;
  height: 0;
}

/* ── Dividers ────────────────────────────────── */
.rule       { border: none; border-top: 1px solid var(--border); margin: 2px 0; }
.rule-thick { border: none; border-top: 3px solid var(--black);  margin: 4px 0; }

/* ── News section ────────────────────────────── */
.news-section { padding-bottom: 24px; }

/* ── Responsive ──────────────────────────────── */
/* AX BRIEF Benchmark 6축 그리드는 components.css의 @media (max-width: 900px) 가 담당.
   옛 4축 토글 시대 강제 2열 규칙은 제거됨 (2026-05-12). */

@media (max-width: 760px) {
  /* KO/EN·구글 로그인을 화면 모서리로 바짝 붙임 (좌우 여백 24→12) */
  .masthead { padding-left: 12px; padding-right: 12px; }
  .main-nav {
    justify-content: center;
  }
  .main-nav a {
    min-width: 60px; /* 72→60: 좁은 화면에서 5탭 + 우측 돋보기 한 줄 수용 */
    padding: 7px 0;
    font-size: 11px;
    letter-spacing: 0;
  }
  .home-benchmark-section > .section-label {
    display: none !important;
  }
}