/* 화안서당 공통 헤더 보강 — 홈페이지 GNB/드로어와 동일한 톤.
   site-nav.js가 헤더(header.gnb 또는 body>nav)에 sn-host 클래스를 붙이고 메뉴를 얹는다.
   로그인 요소(#authLogin/#authUser/#authMenu)는 건드리지 않는다. */
body > .sn-host {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  height: 64px; padding: 0 20px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #dde3e0;
}
body > .sn-host > :last-child { margin-left: auto; }
.sn-hide { display: none !important; }

.sn-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.sn-brand .sn-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(160deg, #172f48 0%, #0f2235 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Noto Serif KR', Georgia, serif; font-weight: 700; font-size: 19px;
  color: #f6c85f; box-shadow: 0 2px 6px rgba(23,47,72,0.25);
}
.sn-brand .sn-text { display: flex; flex-direction: column; line-height: 1.25; }
.sn-brand .sn-hanja { font-family: 'Noto Serif KR', Georgia, serif; font-weight: 700; font-size: 17px; color: #172f48; white-space: nowrap; }
.sn-brand .sn-kr { font-size: 11px; color: #718693; font-family: 'JetBrains Mono', monospace; }

.sn-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.sn-links a {
  font-size: 14px; font-weight: 500; color: #1f2a33; text-decoration: none;
  padding: 8px 14px; border-radius: 8px; position: relative; white-space: nowrap;
}
.sn-links a:hover { background: #e9eef1; color: #172f48; }
.sn-links a.active { color: #172f48; font-weight: 700; }
.sn-links a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: #d7a83c; border-radius: 2px;
}

.sn-menu-btn {
  display: none; width: 36px; height: 36px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid #dde3e0; background: #fff; cursor: pointer; padding: 0;
}
.sn-menu-btn span { display: block; width: 16px; height: 2px; background: #1f2a33; position: relative; }
.sn-menu-btn span::before, .sn-menu-btn span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: #1f2a33;
}
.sn-menu-btn span::before { top: -5px; }
.sn-menu-btn span::after { top: 5px; }

.sn-overlay { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(15,23,42,0.4); }
.sn-overlay.open { display: block; }
.sn-overlay { overscroll-behavior: contain; }
/* 메뉴가 열린 동안 뒤 화면 스크롤 잠금 */
html.sn-lock, html.sn-lock body { overflow: hidden; }
.sn-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 301;
  width: 78%; max-width: 300px; background: #fff;
  transform: translateX(-100%); transition: transform 0.25s ease;
  padding: 20px; overflow-y: auto; overscroll-behavior: contain;
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}
.sn-drawer.open { transform: translateX(0); }
.sn-drawer-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid #dde3e0; background: #fff;
  margin-bottom: 14px; font-size: 16px; cursor: pointer; color: #1f2a33;
}
.sn-drawer a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; border-bottom: 1px solid #dde3e0;
  font-size: 15px; font-weight: 600; color: #1f2a33; text-decoration: none;
}
.sn-drawer a.active { color: #172f48; }
.sn-drawer a .sn-arrow { color: #bd8417; font-family: 'JetBrains Mono', monospace; }

@media (max-width: 900px) {
  .sn-links { display: none; }
  .sn-menu-btn { display: flex; }
  .sn-brand .sn-kr { display: none; }
  body > .sn-host { gap: 12px; padding: 0 16px; }
}

/* 로그인 칩(#authUser) — 헤더 왼쪽(메뉴 버튼·브랜드)이 차지하는 폭이 기기·글꼴마다 달라도 칩이 오른쪽 밖으로 넘치지 않게 한다.
   고정 숫자로 폭을 계산하지 않고, 칩을 감싼 flex 항목들이 남는 폭만큼 줄어들도록(min-width:0) 풀어 주고
   이메일 글자만 말줄임(…)으로 줄인다. 넓은 화면에서는 기존 상한(110px)을 유지한다.
   (페이지마다 복사된 인라인 max-width:110px보다 우선하려면 !important가 필요하다.) */
/* 헤더는 페이지에 따라 header.gnb 또는 body > nav */
:is(header.gnb, body > nav) > div:has(#authUser) { min-width: 0; flex: 0 1 auto; }
div:has(> #authUser) { min-width: 0; max-width: 100%; }
#authUser { max-width: 100%; overflow: hidden; }
#authEmail { max-width: min(110px, calc(100% - 17px)) !important; }