/* SEcMS Blog — 고정 프레임 + 카테고리 트리/필터 + 모바일 최적화 (2026-07-06 v2) */

/* ── sticky를 깨던 overflow-x:hidden → clip 으로 교체(가로스크롤 방지는 유지, sticky 복구) ── */
html, body { overflow-x: clip !important; }

/* ── 상단 nav 완전 고정: position:fixed 는 조상 overflow 영향을 받지 않음 ── */
.site-nav, .nav {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(13,17,23,0.96);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--dk-border, rgba(255,255,255,.08));
}
/* 고정 nav 높이만큼 본문 밀기 */
body { padding-top: 64px; }

/* ── 우측 사이드바 고정(프레임) ── */
.blog-grid { align-items: start; }
.blog-sidebar {
  position: sticky; top: 80px; align-self: start;
  max-height: calc(100vh - 96px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.blog-sidebar::-webkit-scrollbar { width: 6px; }
.blog-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

/* ── 상단 카테고리 탭: 사이드바와 동일 필터로 동작 ── */
.cat-tabs a { cursor: pointer; scroll-snap-align: start; }
.cat-tabs a.active { color: var(--dk-accent, #58a6ff) !important; font-weight: 800; }

/* ── 카테고리 트리 ── */
.cat-tree { list-style: none; display: flex; flex-direction: column; gap: .12rem; margin: 0; padding: 0; }
.cat-tree a {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border-radius: 8px; text-decoration: none;
  color: var(--dk-text, #e6edf3); font-size: .9rem; line-height: 1.3; cursor: pointer;
  transition: background .15s, color .15s;
}
.cat-tree a:hover { background: rgba(88,166,255,.10); }
.cat-tree a.active { background: rgba(88,166,255,.16); color: var(--dk-accent, #58a6ff); font-weight: 700; }
.cat-tree .cat-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-count {
  flex-shrink: 0; font-size: .72rem; color: var(--dk-muted, #9ca3af);
  background: rgba(255,255,255,.06); border-radius: 10px;
  padding: .06rem .5rem; min-width: 1.7rem; text-align: center; font-variant-numeric: tabular-nums;
}
.cat-divider { height: 1px; background: var(--dk-border, rgba(255,255,255,.08)); margin: .45rem .2rem; }

/* ═══════════ 모바일 최적화 ═══════════ */
@media (max-width: 900px) {
  body { padding-top: 56px; }
  .blog-sidebar { position: static; max-height: none; overflow: visible; }
  .cat-tabs { -ms-overflow-style: none; scroll-snap-type: x proximity; }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tabs a { min-height: 40px; display: inline-flex; align-items: center; padding: .4rem .7rem; white-space: nowrap; }
}
@media (max-width: 640px) {
  body { padding-top: 52px; }
  .nav-cta { display: none; }               /* 좁은 화면에서 CTA 숨김 → 탭 공간 확보 */
  .brand-sub { display: none; }
  .cat-tree a { padding: .6rem .6rem; font-size: .92rem; }  /* 터치 타깃 확대 */
  .cat-tree a, .cat-count { min-height: 40px; }
}