/* 도움말 판 · 쪽지함 창 · 로그인 칸 도움말 단추 · 맨 아래 카피라이트 줄 (2026-11-09 요청 49~52, 시안 tools/mockups/help-inquiry.html A안)
   틀은 head.php의 내 설정 판(.va-set)과 같아요: 휴대폰은 아래에서 올라오는 판, 컴퓨터(721px 이상)는 가운데 작은 창.
   다크(기본)는 내 설정 판과 같은 색, 화이트는 맨 아래 [data-theme="light"] (theme-light.css의 --lt-* 변수) */

/* ── 로그인 칸: 도움말 단추 · 안 읽은 쪽지 점 ── */
.va-me-links a { position: relative; }
.va-me-links .va-dot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff2e63; box-shadow: 0 0 0 2px #000; }
@media (min-width: 1024px) {
  .va-me-links .va-me-set .va-dot { position: static; display: inline-block; margin: -10px 0 0 3px; box-shadow: none; }   /* 컴퓨터: '내 설정' 글자 오른쪽 위 */
}
@media (max-width: 1023px) {
  .va-me-links .va-dot { top: 4px; right: 4px; }
  /* 손님: [로그인] · ⚙ · ? — 칸이 좁아서(☰ 메뉴 260px) 사진 · '로그인이 필요해요'는 빼고 이름만 한 줄 (단추가 바로 옆이라 같은 말이에요).
     head.php의 같은 규칙(오른쪽 여백 106px)이 이 파일보다 뒤에 읽혀서, 앞에 .va-sidebar를 붙여 한 단계 더 구체적으로 써요 */
  .va-sidebar .va-membership.is-guest .avatar,
  .va-sidebar .va-membership.is-guest .who .hint { display: none; }
  .va-sidebar .va-membership.is-guest .who { padding-right: 150px; }
  .va-sidebar .va-me-links.is-guest a.is-main { padding: 0 12px; }
}
/* 손님 '로그인이 필요합니다'는 어느 폭 · 글꼴에서도 한 줄 (2026-11-09 작업 04의 1번: 아이폰에서 두 줄이었어요).
   ☰ 메뉴 폭은 위 규칙대로 이름만, 컴퓨터 왼쪽 칸은 칸보다 길면 끝을 … 로. 손님 표시는 head.php가 .va-membership에 붙이는 is-guest라 :has()를 못 쓰는 브라우저도 같아요 */
.va-membership.is-guest .who { min-width: 0; }
.va-membership.is-guest .who .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 내 설정 판: 쪽지함 안 읽은 수 ── */
.va-set-badge { margin-left: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff2e63; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
.va-set-badge[hidden] { display: none; }
.va-set-memo .va-set-badge { margin-left: auto; margin-right: 8px; }            /* 시안 ④: 숫자는 오른쪽 › 바로 앞 */
.va-set-memo:has(.va-set-badge:not([hidden]))::after { margin-left: 0; }

/* ── 도움말 판 ── */
.va-help .va-set-box { min-height: min(72vh, 620px); }
.vh-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 14px 0 4px; padding: 4px; border-radius: 12px; background: #26262b; }
.vh-tabs button { min-width: 0; height: 38px; padding: 0 4px; border: 0; border-radius: 9px; background: transparent; color: #bdbdc4; font: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.vh-tabs button[aria-selected="true"] { background: #3a3a42; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.vh-pane { padding-top: 4px; }
.vh-pane[hidden] { display: none; }
.vh-sec { margin: 16px 0 6px; font-size: 12.5px; font-weight: 800; color: #a5a5ad; letter-spacing: .2px; }
.vh-feats { list-style: none; margin: 0; padding: 0; }
.vh-feat { display: flex; align-items: flex-start; gap: 11px; padding: 10px 2px; border-bottom: 1px solid #2e2e33; color: inherit; text-decoration: none; }
.vh-feats li:last-child .vh-feat { border-bottom: 0; }
.vh-feat.is-link::after { content: "›"; margin-left: auto; align-self: center; color: #6c6c77; font-size: 20px; line-height: 1; }
.vh-feat.is-link:hover b { text-decoration: underline; }
.vh-ic { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #26262b; color: #ff7aa0; font-size: 14px; }
.vh-ft { min-width: 0; display: block; font-size: 13px; line-height: 1.45; color: #a5a5ad; }
.vh-ft b { display: block; margin-bottom: 1px; font-size: 14.5px; color: #ededed; }
/* 단축키 표 (js/edm-shortcuts.js EDMKeys.render) */
.vh-kgrp h4 { margin: 16px 0 4px; font-size: 12.5px; font-weight: 800; color: #a5a5ad; }
.vh-krow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #2e2e33; font-size: 13.5px; }
.vh-k { flex: none; width: 112px; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.vh-kd { min-width: 0; color: #d6d6dc; }
.vh-keys kbd { display: inline-block; min-width: 24px; padding: 1px 6px; border: 1px solid #45454d; border-bottom-width: 2px; border-radius: 6px; background: #222227; color: #f1f1f4; font: 700 11.5px/1.6 ui-monospace, Menlo, Consolas, monospace; text-align: center; }
.vh-kj { color: #8d8d96; font-size: 12px; }
.vh-knote { margin: 10px 0 0; font-size: 12px; color: #8d8d96; }
.vh-kfoot { margin-top: 14px; }
.vh-hands { margin: 8px 0 0; }
.vh-hands summary { cursor: pointer; padding: 6px 0; font-size: 13px; font-weight: 700; color: #ff7aa0; }
.vh-hands h5 { margin: 12px 0 2px; font-size: 12px; color: #a5a5ad; }
.vh-hands .vh-k { width: 92px; }
/* 문의하기 */
.vh-lock { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 8px; padding: 10px 12px; border-radius: 12px; background: rgba(34,197,94,.12); color: #9be3b4; font-size: 13px; line-height: 1.5; }
.vh-lock i { margin-top: 3px; }
.vh-lock b { color: #c8f3d6; }
.vh-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.vh-btn { min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 8px; border-radius: 11px; border: 1px solid #34343c; color: #ededed; font-weight: 800; font-size: 14px; text-decoration: none; text-align: center; line-height: 1.2; }
.vh-btn.is-main { background: #ff2e63; border-color: #ff2e63; color: #fff; }
.vh-guest { margin: 14px 2px 0; font-size: 13.5px; font-weight: 700; color: #ededed; }
.vh-more { display: inline-block; margin: 12px 2px 0; font-size: 13px; color: #ff7aa0; text-decoration: none; }
@media (min-width: 721px) {
  .va-help .va-set-box { width: 560px; min-height: 0; height: min(640px, 86vh); }
}

/* ── 쪽지함 창 (그누보드 쪽지 화면을 창 안에) ── */
.va-memo .va-set-box { display: flex; flex-direction: column; height: 82vh; max-height: 82vh; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
.va-memo-frame { flex: 1 1 auto; width: 100%; min-height: 0; margin: 10px 0 0; border: 0; border-radius: 12px; background: #141417; }
@media (min-width: 721px) {
  .va-memo .va-set-box { width: 660px; height: min(720px, 86vh); max-height: 86vh; padding-bottom: 18px; }
}

/* ── 맨 아래 카피라이트 줄 (요청 50, tail.php) ── */
.va-foot { margin: 48px 0 0; padding: 18px 2px 22px; border-top: 1px solid rgba(255,255,255,.12); color: #8d8d96; font-size: 12.5px; line-height: 1.6; text-align: left; }
.va-foot-main { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.va-foot-main > * + *::before { content: "·"; margin: 0 8px; color: #55555c; }
.va-foot-copy { font-weight: 700; color: #a5a5ad; }
.va-foot a { color: #c9c9cf; font-weight: 700; text-decoration: none; }
.va-foot a:hover { text-decoration: underline; }
.va-foot a.va-foot-strong { color: #ededed; }
.va-foot-info { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 4px; font-size: 11.5px; }
@media (max-width: 720px) { .va-foot { margin-top: 36px; padding: 16px 4px 24px; text-align: center; } .va-foot-main, .va-foot-info { justify-content: center; } }

/* ── 화이트 ── */
[data-theme="light"] .va-me-links .va-dot { background: var(--lt-accent); box-shadow: 0 0 0 2px var(--lt-surface); }
[data-theme="light"] .va-set-badge { background: var(--lt-accent); }
[data-theme="light"] .vh-tabs { background: var(--lt-fill); }
[data-theme="light"] .vh-tabs button { color: var(--lt-text-2); }
[data-theme="light"] .vh-tabs button[aria-selected="true"] { background: var(--lt-surface); color: var(--lt-text); box-shadow: var(--lt-shadow-sm), 0 0 0 1px var(--lt-border); }
[data-theme="light"] .vh-sec, [data-theme="light"] .vh-kgrp h4, [data-theme="light"] .vh-hands h5 { color: var(--lt-text-3); }
[data-theme="light"] .vh-feat { border-bottom-color: var(--lt-divider); }
[data-theme="light"] .vh-feat.is-link::after { color: var(--lt-text-4); }
[data-theme="light"] .vh-ic { background: var(--lt-fill); color: var(--lt-accent-text); }
[data-theme="light"] .vh-ft { color: var(--lt-text-3); }
[data-theme="light"] .vh-ft b { color: var(--lt-text); }
[data-theme="light"] .vh-krow { border-bottom-color: var(--lt-divider); }
[data-theme="light"] .vh-kd { color: var(--lt-text-2); }
[data-theme="light"] .vh-keys kbd { background: var(--lt-side); border-color: var(--lt-border-strong); color: var(--lt-text); }
[data-theme="light"] .vh-kj, [data-theme="light"] .vh-knote { color: var(--lt-text-3); }
[data-theme="light"] .vh-hands summary, [data-theme="light"] .vh-more { color: var(--lt-accent-text); }
[data-theme="light"] .vh-lock { background: #e5f4ec; color: #145c3c; }
[data-theme="light"] .vh-lock b { color: #0f4a30; }
[data-theme="light"] .vh-btn { border-color: var(--lt-border-strong); color: var(--lt-text); }
[data-theme="light"] .vh-btn.is-main { background: var(--lt-accent); border-color: var(--lt-accent); color: #fff; }
[data-theme="light"] .vh-guest { color: var(--lt-text); }
[data-theme="light"] .va-memo-frame { background: var(--lt-surface); box-shadow: 0 0 0 1px var(--lt-border); }
[data-theme="light"] .va-foot { border-top-color: var(--lt-divider); color: var(--lt-text-3); }
[data-theme="light"] .va-foot-main > * + *::before { color: var(--lt-text-4); }
[data-theme="light"] .va-foot-copy { color: var(--lt-text-2); }
[data-theme="light"] .va-foot a { color: var(--lt-text-2); }
[data-theme="light"] .va-foot a.va-foot-strong { color: var(--lt-text); }