/* 공용 셸(상단바 + 드로어) — 서브 페이지(/stocks·/hyperliquid·/contact)용.
   홈(index.html)은 SSR·단일요청 유지를 위해 동일 규칙을 인라인으로 갖고 있다.
   ※ 값을 바꾸면 index.html 의 헤더/드로어 규칙도 함께 고칠 것. */
:root{
  --sh-bg:#EEF0F3; --sh-card:#FFFFFF; --sh-ink:#1E2126; --sh-sub:#8B909A;
  --sh-line:#E4E6EA; --sh-header:#17191D; --sh-up:#F04452;
  --sh-maxw:720px; --nav-item-size:18px;
}
.sh-header{background:var(--sh-header);height:52px;display:flex;align-items:center;
  justify-content:space-between;padding:0 12px;position:sticky;top:0;z-index:30;}
.sh-header .header-inner{width:100%;max-width:var(--sh-maxw);margin:0 auto;display:flex;
  align-items:center;justify-content:space-between;}
.sh-header .hamburger{width:40px;height:40px;border:none;background:none;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:flex-start;padding-left:4px;}
.sh-header .hamburger span{display:block;width:22px;height:2.5px;background:#4ADE80;border-radius:2px;}
.sh-header .logo{font-size:20px;font-weight:800;color:#fff;letter-spacing:-0.5px;text-decoration:none;}
.sh-header .logo b{color:var(--sh-up);}
.sh-header .spacer{width:40px;}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;}
.drawer{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:82vw;background:#fff;z-index:50;
  transform:translateX(-100%);transition:transform .22s ease;display:flex;flex-direction:column;}
body.menu-open .scrim{opacity:1;pointer-events:auto;}
body.menu-open .drawer{transform:translateX(0);}
.drawer-head{background:var(--sh-header);padding:18px 16px;}
.drawer-head .logo{font-size:18px;font-weight:800;color:#fff;letter-spacing:-0.5px;}
.drawer-head .logo b{color:var(--sh-up);}
.drawer-head p{color:#8B909A;font-size:11.5px;margin-top:4px;}
.drawer-nav{flex:1;overflow-y:auto;padding:10px 8px;}
.nav-sec{font-size:16px;font-weight:800;color:#16202e;letter-spacing:-.01em;padding:8px 12px 4px;}
/* 커뮤니티·뉴스는 상위 뎁스 자체가 이동 버튼이다(하위 목록 없음). */
.nav-sec-btn{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  text-decoration:none;border-radius:10px;padding:11px 12px;}
.nav-sec-btn:hover{background:#f1f5fb;}
.nav-sec-btn.on{background:#e8f6ee;color:#128a4a;}
.nav-sec-link{display:block;text-decoration:none;border-radius:10px;padding:11px 12px;}
.nav-sec-link:hover{background:#f1f5fb;}
.nav-div{height:1px;background:var(--sh-line);margin:12px 8px;}
.nav-item{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;text-decoration:none;
  font-size:var(--nav-item-size);font-weight:600;color:#16202e;padding:11px 14px;border-radius:10px;}
.nav-item:hover{background:#f1f5fb;}
.nav-item.on{background:#e8f6ee;color:#128a4a;}
.nav-link{color:#16202e;}
/* 일부 페이지(cluster/category)는 a:hover 밑줄 규칙이 있다 — 셸 안에서는 끈다. */
.sh-header a:hover,.drawer a:hover{text-decoration:none;}

/* ── 데스크탑 탑 네비(≥900px) — 홈(index.html)과 같은 모양·같은 breakpoint.
   서브 페이지에서도 햄버거 옆에 1차 메뉴가 보여야 한다. */
.sh-header .topnav{display:none;}
.sh-header .topnav-item{background:none;border:0;font:inherit;font-size:14.5px;font-weight:700;
  color:#C9CDD4;cursor:pointer;padding:0 12px;height:52px;display:flex;align-items:center;gap:4px;
  text-decoration:none;}
.sh-header .topnav-item:hover,.sh-header .topnav-group.open>.topnav-item{color:#fff;}
.sh-header .topnav-item.on{color:var(--sh-up);}
.sh-header .topnav-caret{font-size:9px;opacity:.7;}
.sh-header .topnav-group{position:relative;}
.sh-header .topnav-drop{display:none;position:absolute;top:52px;left:0;min-width:170px;
  background:var(--sh-header);border:1px solid #2F333A;border-radius:0 0 10px 10px;
  padding:6px 0;box-shadow:0 10px 28px rgba(0,0,0,.35);z-index:40;}
.sh-header .topnav-group.open>.topnav-drop{display:block;}
.sh-header .topnav-drop a{display:block;width:100%;text-align:left;background:none;
  border:0;font:inherit;font-size:13.5px;font-weight:600;color:#C9CDD4;
  padding:9px 14px;cursor:pointer;white-space:nowrap;text-decoration:none;}
.sh-header .topnav-drop a:hover,.sh-header .topnav-drop a:focus-visible{background:#2A2D33;color:#fff;}
@media(min-width:900px){
  .sh-header .header-inner{justify-content:flex-start;gap:2px;}
  .sh-header .topnav{display:flex;align-items:center;margin-left:10px;}
  .sh-header .spacer{margin-left:auto;}
}