/* === SPKLOVE: Sidebar on top, header under, perfect seam, animated collapse === */
:root{
  --header-h: 64px;
  --sidebar-w: 260px;            /* 펼침 폭 */
  --sidebar-w-collapsed: 72px;   /* 접힘 폭 */
  --gap: 16px;
  --toggle-gap: 32px;            /* 토글 버튼이 경계선에서 떨어지는 거리 */

  --bg:#121212; --panel:#141820; --panel-2:#121212;
  --text:#e6eaf2; --muted:#9aa4b2;
  --brand:#ff6b88; --accent:#ffd5de; --border:#212734;

  --header-bg:#121212;           /* 상단 가로바 색상 */
  --sidebar-bg:#12161c;          /* 좌측 레일 */
}

/* 기본 톤 */
body{ background: var(--bg); color: var(--text); }

/* ===== 상단 가로바(헤더) — 사이드바 아래(z-index 낮게), 왼쪽 영역은 사이드바 색으로 연장 ===== */
header .navbar{
  position: sticky; top: 0; z-index: 900;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  min-height: var(--header-h);
  display: flex; align-items: center;
  position: relative;
}
header .navbar::before{
  content:""; position:absolute; top:0; bottom:0; left:0;
  width: var(--sidebar-w);                /* 접힘/펼침과 연동 */
  background: var(--sidebar-bg);
  pointer-events:none;                    /* 세로 경계선은 사이드바에서만 그림 */
  border-right: none;
  transition: width .25s ease;
}

/* ===== 좌측 고정 사이드바 — 헤더보다 위(z-index ↑) ===== */
.vnav{
  position: fixed; top: 0; left: 0; z-index: 2000;
  width: var(--sidebar-w); height: 100dvh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);  /* 유일한 세로 경계선 */
  padding: calc(var(--header-h) + 12px) 10px 16px;  /* 목록은 헤더 아래에서 시작 */
  overflow: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  transition: width .25s ease, padding .25s ease;
}

/* === BRAND: 상단 빈공간에 로고 + 텍스트(접으면 로고만) === */
.brand{
  position: fixed; top: 0; left: 0; z-index: 2500;
  width: var(--sidebar-w); height: var(--header-h);
  background: var(--sidebar-bg);
  display:flex; align-items:center; justify-content:center;
  padding: 0 16px; margin: 0; box-sizing: border-box;
  transition: width .25s ease;
}
.brand-link{
  display:flex; align-items:center; justify-content:center;
  gap: 12px; width:100%; text-decoration:none; color:#e6eaf2; text-align:center;
}
.brand-logo{
  width:30px; height:30px; border-radius:10px; object-fit:cover;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.brand-name{
  font-weight:800; letter-spacing:.4px; white-space:nowrap;
  max-width:200px; opacity:1; transform:translateX(0);
  transition: opacity .22s ease, transform .22s ease, max-width .22s ease;
}

/* ===== 메뉴 아이템 ===== */
.vnav__list{ display:flex; flex-direction:column; gap:8px; }
.vnav__item{
  display:flex; align-items:center; gap:12px;
  height:44px; padding:0 12px; border-radius:12px;
  border:1px solid transparent; background:transparent;
  color:var(--muted); text-decoration:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vnav__item i{ width:20px; text-align:center; font-size:16px; color:inherit; }
.vnav__item:hover{ background:rgba(255,255,255,.03); border-color:var(--border); color:var(--text); }
.vnav__item.is-active{
  background:linear-gradient(135deg,var(--brand),#ffa1b5);
  color:#FFF; border-color:transparent; box-shadow:0 6px 16px rgba(255,107,136,.25);
}

/* ===== 콘텐츠/푸터는 사이드바 폭만큼 밀기 ===== */
.content{ margin-left: calc(var(--sidebar-w) + var(--gap)); padding: var(--gap); min-width:0; transition: margin-left .25s ease; }
.site-footer{ margin-left: calc(var(--sidebar-w) + var(--gap)); border-top: 1px solid var(--border); transition: margin-left .25s ease; }

.nav-collapse-btn{
  position: absolute;                /* ← fixed 에서 absolute로 변경 */
  left: calc(var(--sidebar-w) + var(--toggle-gap));  /* 사이드바 경계선 + 간격 */
  top: 50%;
  transform: translateY(-50%);       /* 헤더 세로 중앙 정렬 */
  z-index: 950;                      /* 헤더 안 위쪽에만 보이도록 */

  width: 36px; height: 36px; padding: 0;
  background: transparent !important;
  border: none !important; box-shadow: none !important; outline: none !important;
  -webkit-tap-highlight-color: transparent;

  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; cursor: pointer;
  transition: left .25s ease, transform .25s ease;
}
.nav-collapse-btn::after{ content:""; position:absolute; inset:-6px; } /* 보이지 않는 히트박스 */
.nav-collapse-btn .bar{
  display:block; width:20px; height:2px; border-radius:2px;
  background:#c9d1e2; opacity:.9; margin:0;
}
.nav-collapse-btn:hover .bar{ opacity:1; }

/* ===== 접힘 상태 (로고만, 간격 제거, 너비/마진/토글 위치 자동 보정) ===== */
body.sidebar-collapsed{ --sidebar-w: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .vnav__item .label{ display:none; }
body.sidebar-collapsed .vnav__item{ justify-content:center; padding:0; }

body.sidebar-collapsed .brand{ width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .brand-link{ gap:0; }
body.sidebar-collapsed .brand-name{ display:none; }

body.sidebar-collapsed .content,
body.sidebar-collapsed .site-footer{ margin-left: calc(var(--sidebar-w-collapsed) + var(--gap)); }

/* ===== 푸터 색감 유지 ===== */
.site-footer .footer-content{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  padding:16px; color:var(--text);
}
.site-footer .footer-title{ color:#ffd5de; font-weight:800; }
.site-footer .footer-description{ color:var(--muted); }
.site-footer .footer-nav a{
  display:inline-flex; align-items:center; height:36px; padding:0 12px; margin:2px;
  border-radius:12px; border:1px solid var(--border);
  background:#10151c; color:var(--muted); text-decoration:none;
}
.site-footer .footer-nav a:hover{ color:var(--text); border-color:var(--accent); }
.site-footer .footer-bottom{ text-align:center; color:var(--muted); padding:12px 16px 24px; }

/* ===== 반응형: 기본은 접힘 폭 사용 ===== */
@media (max-width: 992px){
  body:not(.sidebar-collapsed){ --sidebar-w: var(--sidebar-w-collapsed); }
  .vnav__item .label{ display:none; }
  .vnav__item{ justify-content:center; padding:0; }
  .content, .site-footer{ margin-left: calc(var(--sidebar-w-collapsed) + var(--gap)); }
}

.spklove-logo{
  width:24px; height:24px;
}


:root{
  --sidebar-pad-x-expanded: 10px; /* 펼침 좌우 */
  --sidebar-pad-x-collapsed: 8px; /* 접힘 좌우 (대칭) */
}

/* 사용자가 접었을 때 */
body.sidebar-collapsed .vnav{
  padding-left:  var(--sidebar-pad-x-collapsed);
  padding-right: var(--sidebar-pad-x-collapsed);
}
body.sidebar-collapsed .vnav__item{ justify-content: center; padding: 0; width: auto; }
body.sidebar-collapsed .vnav__item .label{ display: none; }
body.sidebar-collapsed .brand{ width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .brand-link{ gap: 0; }
body.sidebar-collapsed .brand-name{ display: none; }

/* 화면이 좁아져 자동-축소될 때(토글 안 눌러도 동일한 레이아웃 적용) */
@media (max-width: 992px){
  /* 자동으로 폭을 접힘값으로 */
  body:not(.sidebar-collapsed){ --sidebar-w: var(--sidebar-w-collapsed); }

  /* 좌/우 패딩 대칭 + 아이템 센터링 */
  .vnav{
    padding-left:  var(--sidebar-pad-x-collapsed);
    padding-right: var(--sidebar-pad-x-collapsed);
  }
  .vnav__item{ justify-content: center; padding: 0; width: auto; }
  .vnav__item .label{ display: none; }

  /* 브랜드(로고)도 접힘 스타일 */
  .brand{ width: var(--sidebar-w-collapsed); }
  .brand-link{ gap: 0; }
  .brand-name{ display: none; }
}