/* site-header-cert.css — 종목 홈 전역 머리띠 정식 조각 CSS(DD-36 · ORDER-D8 · 2026-10-14 디자인팀).
 * 앱 공개 쪽 PublicHeader.tsx 와 같은 꼴(높이 56 · sticky · 아래 선 · 우측 CTA)을
 * 공개 사이트 토큰(tokens.css)으로 옮긴 것. 색·글자·모서리는 변수만 쓴다(D-04 · 새 hex 없음).
 * 짝 조각: 디자인 rounds cert-header-20261014/fragment-site-header-cert.html(운영이 맞바꿔 넣는다).
 * 링크 순서: tokens.css → layers.css → components.css → cert-home.css → 이 파일(마지막).
 *
 * 선택자에 body .site-head--cert 접두를 붙이는 이유(무게):
 *   layers.css .site-head(0,1,0)·components.css body .site-head(0,1,1)의 760px 폭·패딩을 이기고,
 *   layers.css .page a(0,1,1)가 CTA 글자를 --primary-strong 로 덮어쓰는 것도 막는다
 *   (cert-home.css .ch-action--primary 각주와 같은 함정 — 임시 머리띠가 실제로 걸렸던 것). */

/* ── 머리띠 바 ── */
body .site-head--cert {
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: none;          /* layers.css .site-head 의 760px 상속을 끊는다 — 앱·sets.css 처럼 온 폭 */
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: max(56px, var(--touch-min)); /* 앱 h-14=56 · 큰 글씨는 누르는 높이 64 에 맞춘다 */
  margin: 0;
  padding: 0 16px;          /* components.css body .site-head 의 패딩을 지운다(줄 높이는 min-height 로 잡는다) */
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
/* 768px 부터는 본문을 sets.css 머리띠와 같은 72rem(1152px) 중앙에 두고 좌우 여백 24px */
@media (min-width: 768px) {
  body .site-head--cert {
    padding-left: max(24px, calc((100% - 72rem) / 2 + 24px));
    padding-right: max(24px, calc((100% - 72rem) / 2 + 24px));
  }
}

/* ── 로고 ── sets.css 의 로고 상자를 그대로(2rem · radius-sm · 주조 면) */
body .site-head--cert .site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--touch-min);
  text-decoration: none;
  color: var(--foreground);
}
body .site-head--cert .site-logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background-color: var(--primary);
  color: var(--primary-foreground);
}
body .site-head--cert .site-logo-icon svg { display: block; width: 18px; height: 18px; }
body .site-head--cert .site-logo-text {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--foreground);
}

/* ── 메뉴 ── */
body .site-head--cert .site-nav { display: flex; align-items: center; min-width: 0; }
body .site-head--cert .site-nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
body .site-head--cert .site-nav-item { list-style: none; margin: 0; padding: 0; }
body .site-head--cert .site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min); /* 누르는 영역 48px(D-10) — 56px 머리띠 안에 들어간다 */
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
}
body .site-head--cert .site-nav-link:hover,
body .site-head--cert .site-nav-link:focus-visible {
  background: var(--muted);
  color: var(--foreground);
}
/* 768px 미만에서는 자격증 정보·샘플 문제를 숨겨 한 줄을 지킨다(앱 PublicHeader 의 sm:inline-block 과 같은 행동) */
body .site-head--cert .site-nav-link--info { display: none; }
@media (min-width: 768px) {
  body .site-head--cert .site-nav-link--info { display: inline-flex; }
}

/* ── 무료로 시작(CTA) ── 주조 면 · 굵은 글자. 색은 접두가 .page a 를 이겨 --primary-foreground 가 산다 */
body .site-head--cert .site-nav-cta {
  min-height: var(--touch-min);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
}
body .site-head--cert .site-nav-cta:hover,
body .site-head--cert .site-nav-cta:focus-visible {
  background: var(--primary-strong);
  color: var(--primary-foreground);
}

/* ── 종목 상단 메뉴(C-66 ② · 2026-10-15 주인님 「맞아」 — DD-36 앱 첫 화면 머리띠를 대체) ──
   왼쪽 <종목> CBT · 가운데 메뉴(폰에서는 옆으로 밀어 봄 · 줄바꿈 없음) · 오른쪽 로그인 고정(앱 CertTopMenu 와 같은 행동) */
body .site-head--menu { flex-wrap: nowrap; gap: 8px; }
body .site-head--menu .site-logo--cert { flex: 0 0 auto; }
body .site-head--menu .site-logo--cert .site-logo-text { white-space: nowrap; }
body .site-head--menu .site-nav--cert { flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body .site-head--menu .site-nav--cert::-webkit-scrollbar { display: none; }
body .site-head--menu .site-nav--cert .site-nav-list { flex-wrap: nowrap; }
body .site-head--menu .site-nav--cert .site-nav-link { white-space: nowrap; }
body .site-head--menu .site-nav-login { flex: 0 0 auto; white-space: nowrap; }
body .site-head--menu .site-nav-details { position: relative; }
body .site-head--menu .site-nav-details > summary { list-style: none; cursor: pointer; }
body .site-head--menu .site-nav-details > summary::-webkit-details-marker { display: none; }
/* 펼침판: 폰에서는 머리띠 바로 아래 가로 전체(fixed — 옆으로 미는 nav 의 overflow 에 잘리지 않게), 768px 부터는 단추 아래(absolute) */
body .site-head--menu .site-nav-menu { position: fixed; left: 16px; right: 16px; top: 56px; z-index: 50; max-height: 70vh; overflow-y: auto; padding: 8px 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
body .site-head--menu .site-nav-menu-tab { margin: 6px 12px 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
body .site-head--menu .site-nav-menu ul { list-style: none; margin: 0; padding: 0; }
body .site-head--menu .site-nav-menu li { list-style: none; }
body .site-head--menu .site-nav-menu a { display: block; padding: 6px 12px; white-space: nowrap; text-decoration: none; }
@media (min-width: 768px) {
  body .site-head--menu .site-nav--cert { overflow: visible; }
  body .site-head--menu .site-nav-menu { position: absolute; left: 0; right: auto; top: 100%; min-width: 260px; max-height: none; overflow: visible; }
}