/* VVAVE 공통 테마 — 퍼플 버튜버 무드 + 온글잎 손글씨.
   각 페이지 인라인 <style> 뒤에 <link>로 로드해 토큰·공통 컴포넌트를 덮어쓴다.
   토큰/무드 정본: 루트 DESIGN_vvave.md */
@font-face{font-family:'Onglyph';src:url('../fonts/onglyph-positive.woff2?v=3') format('woff2');font-weight:400;font-display:swap;}

:root{--cute:'Onglyph',-apple-system,BlinkMacSystemFont,sans-serif;
      --bg:#faf8fd;--surface:#fff;--surface-soft:#f3f0fb;--line:#e7e3f2;--ink:#1c1a26;--muted:#6b6680;--hint:#9b96ad;
      --accent:#6d5ae6;--accent-soft:#ece8fb;--grad-a:#6d5ae6;--grad-b:#b06ae0;--chip:#f0edf9;--yt:#e24b4a;--up:#3b8a4e;--down:#cc4b4b;}
@media(prefers-color-scheme:dark){:root{--bg:#0f0d17;--surface:#1a1726;--surface-soft:#211d30;--line:#2e2942;--ink:#ece9f5;
      --muted:#a9a3c0;--hint:#7d7894;--accent:#9d8cf5;--accent-soft:#2a2440;--grad-a:#8a76f0;--grad-b:#c07ee8;--chip:#231f33;--yt:#f09595;--up:#7bc98c;--down:#e88;}}

/* 수동 테마 토글 (vvave-theme.js) — OS 설정보다 우선. data-theme 속성으로 강제 */
:root[data-theme="light"]{--bg:#faf8fd;--surface:#fff;--surface-soft:#f3f0fb;--line:#e7e3f2;--ink:#1c1a26;--muted:#6b6680;--hint:#9b96ad;
      --accent:#6d5ae6;--accent-soft:#ece8fb;--grad-a:#6d5ae6;--grad-b:#b06ae0;--chip:#f0edf9;--yt:#e24b4a;--up:#3b8a4e;--down:#cc4b4b;}
:root[data-theme="dark"]{--bg:#0f0d17;--surface:#1a1726;--surface-soft:#211d30;--line:#2e2942;--ink:#ece9f5;
      --muted:#a9a3c0;--hint:#7d7894;--accent:#9d8cf5;--accent-soft:#2a2440;--grad-a:#8a76f0;--grad-b:#c07ee8;--chip:#231f33;--yt:#f09595;--up:#7bc98c;--down:#e88;}

/* 묶음 탭의 하위 서브탭 (음악·놀이터) */
.subnav-wrap{max-width:1180px;margin:0 auto;padding:12px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.subnav{display:flex;gap:6px;flex-wrap:wrap;}
.subnav-search{width:220px;max-width:46vw;flex:0 0 auto;height:32px;border:0.5px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 12px;font-size:13px;font-family:inherit;outline:none;line-height:32px;}
.subnav-search:focus{border-color:var(--accent);}
.subnav a{font-size:13px;font-weight:500;padding:7px 15px;border-radius:18px;background:var(--chip);
      color:var(--muted);text-decoration:none;white-space:nowrap;}
.subnav a:hover{color:var(--accent);}
.subnav a.on{background:var(--accent);color:#fff;}

/* 테마 토글 버튼 (SVG 아이콘) */
.vv-theme{font-family:inherit;line-height:1;background:var(--chip);border:0.5px solid var(--line);
      border-radius:7px;padding:4px 8px;cursor:pointer;color:var(--ink);flex-shrink:0;display:inline-flex;align-items:center;}
.vv-theme:hover{border-color:var(--accent);color:var(--accent);}
.vv-theme svg{width:16px;height:16px;display:block;}

/* 로고 — 심볼 타일 + 손글씨 그라데이션 텍스트 (스샷 레이아웃) */
.brand{font-family:var(--cute);font-size:31px;font-weight:400;letter-spacing:0;}
.brand a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;}
.brand .blogo{flex:0 0 auto;width:1.15em;height:1.15em;}
.brand a span{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif;font-weight:600;letter-spacing:-.5px;color:var(--ink);}
/* 모바일: 로고 그림만, VVAVE 텍스트 숨김 → 상단바 공간 확보 (전 페이지 공통) */
@media(max-width:640px){.brand a span{display:none;} #vv-theme-toggle{display:none;}}

/* 탭 네비 — 가로 스크롤 (좁은 화면서 글자 세로 깨짐 방지) */
.tab-links{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.tab-links::-webkit-scrollbar{display:none;}
.tab{font-family:var(--cute);font-size:19px;white-space:nowrap;flex-shrink:0;}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);}

/* 모바일: 탭은 아래 줄 전체폭 가로스크롤, CTA칩은 위 줄 */
@media(max-width:640px){
  .tabs{flex-wrap:wrap;row-gap:8px;}
  .tab-links{order:2;width:100%;}
  .tab{font-size:16px;padding:8px 11px;}
  .cta-tab{font-size:13px;padding:5px 11px;}
}

/* CTA 칩 — 퍼플 pill */
.cta-tab{font-family:var(--cute);font-size:17px;background:var(--accent-soft);border:none;border-radius:9999px;color:var(--accent);font-weight:400;}
.cta-tab:hover{background:var(--accent);color:#fff;}

/* 섹션 타이틀 */
.sectitle{font-family:var(--cute);font-size:23px;font-weight:400;letter-spacing:0;}
/* 온글잎(positive)은 단일 두께라 윤곽 stroke로 굵기 보강 — 손글씨 뭉개짐 방지 위해 약하게 */
.brand,.tab,.cta-tab,.sectitle{-webkit-text-stroke:.5px currentColor;paint-order:stroke fill;}

/* pill 세그/기간 토글 (여러 페이지 공용) */
.seg,.periods{border-radius:9999px;}
.seg button,.periods button{border-radius:9999px;}
.seg button.on,.periods button.on{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:0 1px 3px rgba(109,90,230,.15);}