/* 상단 메뉴 (2026-11-07 신설) — 헤더 아래 한 줄, 좁은 화면에선 메뉴 줄만 가로로 밀린다 */
html { scroll-padding-top: 124px; }

.site-nav { border-top: 1px solid var(--line); }
.site-nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-nav__inner::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-nav a:hover { background: var(--paper); color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent-dark); }

@media (max-width: 560px) {
  html { scroll-padding-top: 116px; }
  .site-nav__inner { padding: 0 8px; height: 44px; gap: 1px; }
  .site-nav a { font-size: 13.5px; padding: 6px 9px; }
}
/* 아주 좁은 화면(360px 미만)에선 메뉴 줄만 옆으로 밀리고, 끝을 흐리게 해 더 있다는 걸 보여준다 */
@media (max-width: 359px) {
  .site-nav__inner {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
            mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .site-nav a:last-child { margin-right: 20px; }
}

/* 소셜 아이콘 (2026-11-08) — style.css 는 560px 아래에서 .social-links 를 숨긴다.
   폰에서도 인스타그램(@gyeoreul.ai)·유튜브가 보이게 되살린다. style.css 는 /pay/ 도 쓰므로 여기서만 덮는다. */
@media (max-width: 560px) {
  .site-header .social-links { display: flex; gap: 6px; }
  .site-header .social-icon { width: 34px; height: 34px; }
  .site-header .header-actions { gap: 8px; }
}
@media (max-width: 340px) {
  .site-header .social-icon[aria-label="YouTube"] { display: none; }
}