/* 디자인 4안 — 히어로(페이지 헤더) 제거 + '제목 통합 단일 바' 메뉴.
   body.headbar 페이지에만 적용. 내용은 그대로 두고 배치·스타일만 바꾼다. 빼면 즉시 원복. */

/* 고정 네비게이션 높이만큼 상단 확보 (히어로가 하던 역할 대체) — 실제 높이는 JS가 --nav-h로 전달 */
body.headbar { padding-top: var(--nav-h, 72px); }
/* 콘텐츠 상단 여백은 0으로 두고, 그 간격을 페이지헤더 자체가 갖게 함(고정 시에도 동일 간격 유지) */
body.headbar .docs-layout { padding-top: 0; }

/* 제목 + 세부탭을 한 줄 바로 */
body.headbar .page-headbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 1.5rem 0 1rem;   /* 상단 간격을 페이지헤더가 직접 보유 → 첫 진입/스크롤 항상 동일 */
  margin-bottom: 1.2rem;
}
body.headbar .page-headbar .ph-title { display: flex; flex-direction: column; gap: 3px; }
body.headbar .page-headbar .ph-kicker {
  font-size: .95rem; font-weight: 700; letter-spacing: .01em; color: var(--accent-dark);
}
body.headbar .page-headbar h1 { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--heading); }

/* 세부탭(chapter-tabs)을 텍스트 밑줄 탭으로 */
body.headbar .page-headbar .chapter-tabs {
  display: flex; gap: 18px; margin: 0; padding: 0; grid-template-columns: none;
}
body.headbar .page-headbar .chapter-tabs a {
  border: 0; background: none; box-shadow: none; border-radius: 0;
  padding: 4px 0; font-size: .9rem; font-weight: 600; color: var(--text-light);
  border-bottom: 2px solid transparent;
}
body.headbar .page-headbar .chapter-tabs a:hover { color: var(--heading); border-bottom-color: #cfe9d6; }
body.headbar .page-headbar .chapter-tabs a.active {
  background: none; color: var(--accent-dark); border-color: transparent;
  border-bottom-color: var(--accent); box-shadow: none;
}
body.headbar .page-headbar .chapter-tabs a.active::after { display: none; }

/* 페이지 설명 줄 (히어로 설명 보존) */
body.headbar .ph-desc { color: var(--text-light); font-size: .92rem; margin: 0 0 1rem; line-height: 1.6; }

/* 섹션 메뉴(page-toc) — 4안(세그먼트 토글) + 7안(번호 배지). 글자 길이에 맞춰 폭 자동 조정 */
body.headbar .page-toc {
  position: static; z-index: auto; background: transparent; border-bottom: 0;
  margin: 0 0 1.4rem;
}
body.headbar .page-toc .ptc {
  display: inline-flex; flex-wrap: wrap; gap: 6px;
  background: #eef1ef; border-radius: 999px; padding: 4px;
  counter-reset: sec;
}
body.headbar .page-toc .ptc a {
  counter-increment: sec;
  flex: 0 0 auto; min-width: 0; margin: 0; background: transparent; text-align: left;
  border: 1px solid #d4dbd6;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 14px 6px 7px; border-radius: 999px;
  color: var(--text-light); font-size: .86rem; font-weight: 700; text-decoration: none;
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}
body.headbar .page-toc .ptc a::before {
  content: counter(sec);
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%;
  background: #fff; color: var(--text-light);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
}
body.headbar .page-toc .ptc a:hover:not(.active) { color: var(--heading); border-color: var(--accent); }
body.headbar .page-toc .ptc a.active {
  background: #fff; color: var(--accent-dark); border-color: transparent;
  box-shadow: 0 1px 5px rgba(0,0,0,.12);
}
body.headbar .page-toc .ptc a.active::before { background: var(--accent); color: #fff; }

@media (max-width: 560px) {
  body.headbar .page-headbar { align-items: flex-start; }
  body.headbar .page-headbar h1 { font-size: 1.2rem; }
}


/* 세부탭 자리에 올라온 섹션 메뉴(page-toc) 정렬 */
body.headbar .page-headbar .page-toc { margin: 0; }
body.headbar .page-headbar .page-toc .ptc { justify-content: flex-end; }


/* 스크롤 시 메인 헤더 숨김 + 헤더바(제목+섹션) 상단 고정 */
.navbar { transition: transform .3s ease; }
body.headbar.scrolled .navbar { transform: translateY(-100%); }
body.headbar { overflow-x: clip; }            /* 전체폭 배경 띠가 가로 스크롤을 만들지 않도록 (sticky는 안 깨짐) */
body.headbar .page-headbar {
  position: sticky; top: var(--nav-h, 72px); z-index: 1020; transition: top .25s ease;
  background: #fff;
}
/* 메뉴바가 스크롤로 사라질 때, 사라진 메뉴바 높이만큼 페이지헤더 아래에 여백을 확보해
   본문 상단이 고정된 페이지헤더 뒤로 말려 들어가 가려지지 않게 한다.
   (브라우저 스크롤 앵커링이 이 여백 변화를 상쇄해버리지 않도록 보정을 끈다) */
body.headbar { overflow-anchor: none; }
body.headbar.scrolled .page-headbar { margin-bottom: calc(1.2rem + var(--nav-h, 72px)); }
/* 헤더 숨김(스크롤): 맨 위로 (여백/높이는 동일하게 유지 — 토글 시 레이아웃 안 흔들림) */
body.headbar.scrolled .page-headbar {
  top: 0;
}
/* 전체폭 배경 띠·가로선 — 항상 표시 (안쪽 글자는 본문폭 유지) */
body.headbar .page-headbar::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background: #fff; border-bottom: 1px solid #e5e7eb; z-index: -1;
}
body.headbar.scrolled .page-headbar::before { box-shadow: 0 3px 14px rgba(0,0,0,.06); }

/* 메뉴 페이지: 메인 메뉴 헤더를 푸터처럼 진한 배경 + 대비(흰) 글자 */
body.headbar .navbar { background: #0f172a; box-shadow: 0 2px 16px rgba(0,0,0,.28); }
body.headbar .navbar .navbar-brand,
body.headbar .navbar .nav-link,
body.headbar .navbar .btn-lang,
body.headbar .navbar .navbar-toggler { color: #fff !important; }
body.headbar .navbar .navbar-brand i { color: var(--accent); }
body.headbar .navbar .nav-link:hover { color: var(--accent) !important; }
body.headbar .navbar .btn-lang { border-color: rgba(255,255,255,.35); }
body.headbar .navbar .btn-lang:hover { border-color: var(--accent); color: var(--accent) !important; }
body.headbar .navbar .navbar-toggler { border: none !important; }
body.headbar .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e");
}
/* 모바일 햄버거 패널(흰 배경) 안에서는 글자를 다시 진하게 */
@media (max-width: 1199.98px) {
  body.headbar .navbar .offcanvas .nav-link,
  body.headbar .navbar .offcanvas .btn-lang { color: var(--heading) !important; border-color: #ddd; }
  body.headbar .navbar .offcanvas .btn-lang:hover { color: var(--accent) !important; }
}

/* 알약 클릭으로 섹션 점프 시 헤더(메뉴+페이지) 아래로 앉도록 — 높이는 JS가 --scroll-offset로 전달 */
body.headbar .docs-content [id] { scroll-margin-top: var(--scroll-offset, 170px); }

/* 페이지 리드 문구 — 단색 아이콘 + 텍스트 (패널 없이, 텍스트만 세련되게) */
body.headbar .docs-lead-row { display: flex; align-items: flex-start; gap: 9px; margin: 1.1rem 0 0.7rem; }
body.headbar .docs-lead-row .lead-icon { color: var(--accent); font-size: 1.05rem; flex: 0 0 auto; line-height: 1.7; }
body.headbar .docs-lead-row .docs-lead { margin: 0; font-weight: 700; color: var(--heading); }

/* 메인 헤더 숨김(스크롤) 시: 페이지헤더를 메인헤더와 같은 진한색 + 대비(밝은) 글자 */
body.headbar .page-headbar { transition: top .25s ease, background .25s ease; }
body.headbar .page-headbar::before { transition: background .25s ease; }
body.headbar.scrolled .page-headbar { background: #0f172a; }
body.headbar.scrolled .page-headbar::before { background: #0f172a; border-bottom-color: rgba(255,255,255,.14); }
body.headbar.scrolled .page-headbar .ph-kicker { color: var(--accent); }
body.headbar.scrolled .page-headbar h1 { color: #fff; }

/* 메인 헤더 숨김 시: 섹션 알약(세그먼트)도 어두운 헤더에 맞춤 (활성은 흰 알약 유지) */
body.headbar.scrolled .page-toc .ptc { background: rgba(255,255,255,.08); }
body.headbar.scrolled .page-toc .ptc a:not(.active) { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.2); }
body.headbar.scrolled .page-toc .ptc a:not(.active)::before { background: rgba(255,255,255,.14); color: rgba(255,255,255,.82); }
body.headbar.scrolled .page-toc .ptc a:hover:not(.active) { color: #fff; border-color: var(--accent); }

/* 도구 페이지(대학찾기)도 헤더바 통일 — 상단 여백 보정 */
body.headbar .subpage-body { padding-top: 0; }