/* ═══════════════════════════════════════════════════════════════════
   🧭 VEL 공용 헤더 (2026-09-28 신설 · 헤더 2종 통일 1차)
   ─────────────────────────────────────────────────────────────────
   ─ 하는 일 ─ 페이지마다 제각각이던 상단 헤더(15종)를 **2종**으로 맞춘다.
       ① 탭형  <header class="vh vh--tab">  : 하단 탭 5곳(main·chating·creation·char·mypage). ← 없음
       ② 서브형 <header class="vh">          : 나머지. ← + 제목 (+ 부제) (+ 오른쪽 칸)

   ─ 마크업 ─
     <header class="vh">
       <button class="vh-back" type="button" aria-label="뒤로가기" onclick="velBack()">←</button>
       <div class="vh-titles">                       ← 부제가 없으면 이 줄 없이 h1 만 둬도 된다
         <h1 class="vh-title">MAILBOX</h1>
         <span class="vh-sub">부제(선택)</span>
       </div>
       <div class="vh-right"> 오른쪽 버튼들 · (나중에) 테마 토글 </div>
     </header>

   ─ 규격 ─ 높이 56px(+아이폰 노치 여백) · 스크롤해도 위에 붙음(sticky) · 겹침순서 100
   ─ 색 ─ 여기서 직접 정한다. vel_icons.css 를 안 부르는 페이지에서도 똑같이 보이게.
         다크 = 종전 헤더와 같은 값 / 라이트 = 라벤더 미스트(vel_icons.css 라이트 블록과 같은 값)

   ⚠️ 셀렉터는 `header.vh` 처럼 태그+클래스로 쓴다.
      페이지마다 남아 있는 옛 `header { … }` 규칙(태그만)보다 항상 이기게 하려는 것.
   ⚠️ 옛 `.header` · `.header-title` · `.detail-header` 규칙은 지우지 않았다(다른 화면이 쓸 수 있음).
      새 헤더는 그 이름표를 **안 쓰므로** 옛 규칙의 영향을 받지 않는다.
   ═══════════════════════════════════════════════════════════════════ */

header.vh {
  --vh-bg:     rgba(13,13,17,0.96);
  --vh-border: #2A2733;
  --vh-title:  #E8E6F2;
  --vh-back:   #A9A4BA;
  --vh-sub:    #77718F;

  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  height: calc(56px + env(safe-area-inset-top, 0px));
  min-height: 0;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) 16px 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vh-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  border-bottom: 1px solid var(--vh-border);
  transition: background-color .35s ease, border-color .35s ease;

  /* 페이지에 남아 있는 옛 `header { … }` 규칙이 새 헤더를 흔들지 못하게 되돌려 둔다
     (예: follow.html 의 justify-content: space-between → 제목이 오른쪽으로 밀렸음) */
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  width: auto;
  max-width: none;
  left: auto;
  right: auto;
  text-align: left;
  overflow: visible;
  transform: none;
  box-shadow: none;
}

:root[data-theme="light"] header.vh {
  --vh-bg:     rgba(246,244,251,0.96);
  --vh-border: #DFD9EE;
  --vh-title:  #25212F;
  --vh-back:   #625C72;
  --vh-sub:    #7E7891;
}

/* 고정형 변형 — 헤더 높이에 맞춰 다른 요소(탭바 등)가 fixed 로 붙어 있는 페이지 전용 (char.html)
   모양·높이는 같고, 스크롤 영역 밖에 떠 있는 것만 다르다 */
header.vh.vh--fixed {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

/* ← 뒤로가기 */
header.vh .vh-back {
  flex-shrink: 0;
  width: 32px;
  height: 40px;
  margin: 0 0 0 -6px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--vh-back);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease;
}
header.vh .vh-back:hover { color: var(--vh-title); }

/* 제목 묶음 (부제 있을 때) */
header.vh .vh-titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}

/* 제목 — 종전 헤더 제목과 같은 글꼴·크기·굵기 */
header.vh .vh-title {
  margin: 0;
  padding: 0;
  min-width: 0;
  font-family: var(--m-font, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--vh-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .35s ease;
}
header.vh .vh-titles .vh-title { font-size: 18px; }

/* 부제 (벨코르도 등) */
header.vh .vh-sub {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--vh-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 오른쪽 칸 — 버튼들 · 토글. 비어 있어도 자리만 차지하고 아무것도 안 보인다 */
header.vh .vh-right {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
header.vh .vh-right:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   🌗 테마 토글 (2026-09-28 · 디자인 B — 양옆 달/해, 동글이는 민짜)
   ─ vel_header.js 가 오른쪽 칸 맨 끝에 자동으로 꽂는다. 여기서는 모양만.
   ─ 🆕 헤더 밖(채팅방 설정·명예의전당)에서도 같은 모양으로 쓰도록 셀렉터를 .vh-toggle 로 둔다.
   ─ 동글이 위치·색은 :root[data-theme] 만 보고 움직인다(JS 는 aria 만 맞춤).
   ═══════════════════════════════════════════════════════════════════ */
.vh-toggle {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 26px;
  margin: 0;
  padding: 0;
  border-radius: 13px;
  border: 1px solid #3A3350;
  background: #1B1728;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
.vh-toggle:focus-visible { outline: 2px solid #8F7CFF; outline-offset: 2px; }

.vh-toggle-ic {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  display: block;
  color: #8C84B8;
  transition: color .35s ease, opacity .35s ease;
}
.vh-toggle-ic svg { width: 100%; height: 100%; display: block; }
.vh-toggle-moon { left: 7px; }
.vh-toggle-moon svg { fill: currentColor; }
.vh-toggle-sun  { right: 6px; }
.vh-toggle-sun svg { fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.vh-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #CFC8EE;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  z-index: 1;
  transition: transform .35s cubic-bezier(.4,1.4,.5,1), background-color .35s ease;
}

/* 라이트 — 동글이가 해 쪽(오른쪽)으로, 금색 */
:root[data-theme="light"] .vh-toggle { background: #E4DDFB; border-color: #C9BFF0; }
:root[data-theme="light"] .vh-toggle-knob { transform: translateX(22px); background: #F4C85E; box-shadow: 0 1px 3px rgba(138,100,24,0.35); }
:root[data-theme="light"] .vh-toggle-ic { color: #9A8FD0; }

@media (prefers-reduced-motion: reduce) {
  .vh-toggle, .vh-toggle-knob, .vh-toggle-ic { transition: none; }
}
header.vh .vh-toggle { margin-left: 4px; }   /* 헤더 안에서만 앞 버튼과 살짝 띄움 */