/* 하위 페이지(가이드·글 모음) 공통 상단 막대 — 홈(index.html)의 상단 메뉴와 같은 모양.
   마크업은 scripts/site_nav.py 가 넣는다. 홈 메뉴 색을 바꾸면 여기도 같이 바꾼다.
   페이지 쪽 ul·li a·a 규칙이 새지 않게 전부 .snav 아래로만 쓴다. */
@font-face { font-family: "Wanted Sans"; src: url("/alllens-renewal-assets/fonts/wanted-sans/webfonts/variable/complete/woff2/WantedSansVariable.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
.snav-wrap {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22, 21, 19, .96); border-bottom: 1px solid #35322d;
  color: #f4f1ea; font-family: "Wanted Sans", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.snav {
  position: relative; max-width: 1120px; min-height: 72px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 20px;
}
.snav a { color: inherit; text-decoration: none; }
.snav-brand { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.snav-brand img { width: 30px; height: 30px; }
.snav-brand span {
  margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .2);
  font-size: 15px; font-weight: 650; color: #bdb7ab; letter-spacing: 0;
}
.snav ul { display: flex; gap: 2px; margin: 0 auto 0 12px; padding: 0; border: 0; list-style: none; }
.snav li { margin: 0; padding: 0; border: 0; }
.snav li a {
  position: relative; display: block; padding: 8px 12px; border: 0; border-radius: 8px;
  font-size: 18px; font-weight: 600; color: #bdb7ab;
}
.snav li a:hover { color: #f4f1ea; background: rgba(255, 255, 255, .06); }
.snav li a[aria-current="page"] { color: #f4f1ea; }
.snav li a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px; border-radius: 2px; background: #f4f1ea;
}
.snav-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 12px; font-size: 17px; font-weight: 750; white-space: nowrap;
}
.snav .snav-solid { background: #f4f1ea; color: #161513; }
.snav .snav-solid:hover { background: #fff; }

/* 좁은 화면: 메뉴 목록 대신 세 줄 버튼(자바스크립트 없이 details 로 펼친다) */
.snav-more { display: none; }
.snav-more summary {
  display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); cursor: pointer; list-style: none;
}
.snav-more summary::-webkit-details-marker { display: none; }
.snav-more summary span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #f4f1ea; }
.snav-drop {
  position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 4px 12px 12px;
  background: #161513; border-bottom: 1px solid #35322d;
}
.snav-drop a { display: block; padding: 16px 18px; border-radius: 12px; font-size: 20px; font-weight: 750; }
.snav-drop a + a { border-top: 1px solid rgba(255, 255, 255, .06); }
.snav-drop a:hover { background: rgba(255, 255, 255, .06); }

@media (min-width: 901px) and (max-width: 1100px) {   /* 메뉴 7개 + 버튼이 한 줄에 들어가게 */
  .snav { gap: 14px; }
  .snav-brand span { display: none; }
  .snav ul { margin-left: 4px; }
  .snav li a { padding: 8px 9px; font-size: 17px; }
}
@media (max-width: 900px) {
  .snav ul { display: none; }
  .snav .snav-solid { margin-left: auto; }
  .snav-more { display: block; }
}
@media (max-width: 640px) {
  .snav { min-height: 60px; padding: 8px 12px; gap: 8px; }
  .snav-brand { font-size: 19px; gap: 8px; }
  .snav-brand img { width: 26px; height: 26px; }
  .snav-brand span { margin-left: 2px; padding-left: 8px; font-size: 14px; }
  .snav-btn { padding: 0 14px; }
}
@media (max-width: 370px) { .snav-brand span { display: none; } }