/* 모바일 햄버거 메뉴 — 랜딩·요금제·블로그 공용 (static/site-nav.js 가 마크업을 만든다).
   페이지마다 헤더 구조와 테마가 달라서, 스타일은 여기 한 곳에 두고 밝은/어두운 두
   테마만 data-theme 로 가른다. 링크 목록은 JS 가 기존 헤더에서 읽어오므로 여기에도
   각 페이지에도 메뉴를 중복해 적을 필요가 없다. */

/* ---------- 햄버거 버튼 ---------- */
.site-nav-toggle {
  display: none;                       /* 데스크톱에서는 원래 네비가 보인다 */
  align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  margin-left: 4px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--ink, #333);
  -webkit-tap-highlight-color: transparent;
}
.site-nav-toggle[data-theme="dark"] { color: var(--fg, #f2f4f2); }
.site-nav-toggle .bars { display: block; position: relative; width: 20px; height: 14px; }
.site-nav-toggle .bars i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), opacity .18s, top .25s cubic-bezier(.22,.61,.36,1);
}
.site-nav-toggle .bars i:nth-child(1) { top: 0; }
.site-nav-toggle .bars i:nth-child(2) { top: 6px; }
.site-nav-toggle .bars i:nth-child(3) { top: 12px; }
/* 열리면 X 로 — 같은 버튼이 닫기 버튼을 겸한다(닫으려고 다른 곳을 찾지 않게). */
.site-nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ---------- 펼침 패널 ---------- */
.site-nav-panel {
  position: fixed; left: 0; right: 0;
  top: var(--site-nav-top, 64px);      /* JS 가 헤더 실제 높이로 채운다 */
  z-index: 99;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 20px 20px;
  max-height: calc(100dvh - var(--site-nav-top, 64px));
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid var(--line, #d9dedc);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
  /* 닫힌 상태에서 위로 접힌다. hidden 이 붙어 있으면 렌더 자체를 안 하므로
     애니메이션은 hidden 을 떼고 나서 한 프레임 뒤에 시작한다(JS). */
  transform: translateY(-8px); opacity: 0;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .18s;
}
.site-nav-panel.is-open { transform: translateY(0); opacity: 1; }
.site-nav-panel[hidden] { display: none; }

.site-nav-panel a {
  display: flex; align-items: center;
  padding: 13px 4px;
  font-size: 16px; font-weight: 400; letter-spacing: -.025em; line-height: 1.5;
  color: var(--ink, #333); text-decoration: none;
  border-bottom: 1px solid var(--line-soft, #eee);
}
.site-nav-panel a:last-child { border-bottom: none; }
.site-nav-panel a[aria-current="page"] { color: var(--green, #00974b); font-weight: 600; }
/* 새 창으로 열리는 링크는 그렇다고 알려준다 — 모바일에서 탭이 갑자기 늘면 당황한다. */
.site-nav-panel a[target="_blank"]::after {
  content: "↗"; margin-left: 6px; font-size: 13px; opacity: .45;
}
/* 주요 행동(무료로 시작하기)은 목록 항목이 아니라 버튼으로 남는다. */
.site-nav-panel a.site-nav-cta {
  justify-content: center;
  margin-top: 12px; padding: 13px 18px;
  border: none; border-radius: 100px;
  font-weight: 500; color: #fff;
  background: var(--grad-btn, linear-gradient(90deg, #00974b 0%, #1ed760 100%));
}
.site-nav-panel a.site-nav-cta::after { content: none; }

/* 어두운 테마(요금제) */
.site-nav-panel[data-theme="dark"] {
  background: #0c0d0c;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .08));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}
.site-nav-panel[data-theme="dark"] a {
  color: rgba(255, 255, 255, .78);
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08));
}
.site-nav-panel[data-theme="dark"] a[aria-current="page"] { color: var(--mint, #1ed760); font-weight: 700; }
.site-nav-panel[data-theme="dark"] a.site-nav-cta {
  color: #04150a; font-weight: 700; border-radius: 10px;
  background: var(--mint, #1ed760);
}

/* 패널 뒤를 덮는 막. 바깥을 눌러 닫는 판정도 이 요소가 받는다. */
.site-nav-scrim {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(0, 0, 0, .28);
  opacity: 0; transition: opacity .18s;
}
.site-nav-scrim.is-open { opacity: 1; }
.site-nav-scrim[hidden] { display: none; }

@media (max-width: 767px) {
  .site-nav-toggle { display: inline-flex; }
}
/* 데스크톱 폭으로 돌아가면 흔적 없이 사라져야 한다 — JS 가 닫지 못한 경우의 안전망. */
@media (min-width: 768px) {
  .site-nav-panel, .site-nav-scrim { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav-panel, .site-nav-scrim, .site-nav-toggle .bars i { transition: none; }
}