/* ──────────────────────────────────────────────────────────────────────────
   The site's top bar (상단 메뉴) — one bar on every public page of www.vexar.team.
   Chris 2026-11-04: "top menu should stay all the time": the home's bar (logo, 업종별 데모 · 사용법 영상 · 요금 · 도입 상담 ·
   자료실 · 도움말, 로그인 · 회원가입 · 데모 열기, ☰ on a phone) is the same on the home, /videos, /help, /demo, /download,
   /resources, /privacy, /account-deletion and every /guide/*, and it stays at the top while the page scrolls.
   This file carries the whole bar, with its own colours (--vb-*), so it looks the same on the pages built on css/style.css
   and on the ones with their own look (/videos, /guide/*). The ☰ panel is js/main.js. A page's own links (a guide's title
   and 데모, the demo page's 업종 row) go in a .subnav strip right under the bar. teamloom-app/scripts/site-menu-check.js
   checks that every page carries the same bar markup.
   ────────────────────────────────────────────────────────────────────────── */
.bar, .subnav {
  --vb-bg: #F5F3EC; --vb-fg: #16201B; --vb-fg84: rgba(22,32,27,.86); --vb-fg72: #3A443E; --vb-fg60: #5A635D; --vb-fg48: #7B847E; --vb-fg28: #A7ADA8;
  --vb-fg14: #E2DED2; --vb-fg8: #ECE9E0; --vb-accent: #1E4D3A; --vb-accent-2: #1E4D3A; --vb-on-accent: #ffffff;
  --vb-bar-bg: rgba(245,243,236,.92); --vb-shadow: rgba(22,32,27,.08);
  --vb-w: 1080px; --vb-pad: 32px; --vb-h: 58px;
  --vb-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bar, :root:not([data-theme="light"]) .subnav {
    --vb-bg: #0F1612; --vb-fg: #EEF2EE; --vb-fg84: rgba(238,242,238,.86); --vb-fg72: #C3CDC6; --vb-fg60: #9DA9A1; --vb-fg48: #7F8B84; --vb-fg28: #4A5A50;
    --vb-fg14: #24302A; --vb-fg8: #1C271F; --vb-accent: #7CC3A0; --vb-accent-2: #A3D6BC; --vb-on-accent: #0F1612;
    --vb-bar-bg: rgba(22,32,27,.92); --vb-shadow: rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] .bar, :root[data-theme="dark"] .subnav {
  --vb-bg: #0F1612; --vb-fg: #EEF2EE; --vb-fg84: rgba(238,242,238,.86); --vb-fg72: #C3CDC6; --vb-fg60: #9DA9A1; --vb-fg48: #7F8B84; --vb-fg28: #4A5A50;
  --vb-fg14: #24302A; --vb-fg8: #1C271F; --vb-accent: #7CC3A0; --vb-accent-2: #A3D6BC; --vb-on-accent: #0F1612;
  --vb-bar-bg: rgba(22,32,27,.92); --vb-shadow: rgba(0,0,0,.35);
}
@media (max-width: 860px) { .bar, .subnav { --vb-pad: 20px; } }

/* the page's own type and link styles stop at the bar (:where keeps these weaker than every rule below) */
.bar, .subnav { font-family: var(--vb-font); font-size: 15.5px; line-height: 1.6; letter-spacing: -.011em; color: var(--vb-fg); -webkit-font-smoothing: antialiased; word-break: normal; overflow-wrap: normal; }
:where(.bar, .subnav), :where(.bar, .subnav) *, :where(.bar, .subnav) *::before, :where(.bar, .subnav) *::after { box-sizing: border-box; }
:where(.bar, .subnav) a { color: inherit; text-decoration: none; }
:where(.bar, .subnav) svg { display: block; }
:where(.bar, .subnav) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(.bar, .subnav) a:focus-visible, :where(.bar, .subnav) button:focus-visible { outline: 2px solid var(--vb-accent-2); outline-offset: 3px; border-radius: 3px; }

/* ---------- The bar: sticky at the top of every page ---------- */
.bar { position: sticky; top: 0; z-index: 40; background: var(--vb-bar-bg); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--vb-fg8); }
.bar-in { max-width: calc(var(--vb-w) + 2 * var(--vb-pad)); margin: 0 auto; padding: 0 var(--vb-pad); height: var(--vb-h); display: flex; align-items: center; gap: 24px; }
.bar .brand { display: inline-flex; align-items: center; gap: 9px; flex: none; color: var(--vb-fg); }
.bar .brand-word { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.bar-nav { display: flex; gap: 22px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bar-nav::-webkit-scrollbar { display: none; }
.bar-nav a { font-size: 14px; font-weight: 600; color: var(--vb-fg60); white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; }
.bar-nav a:hover { color: var(--vb-fg); }
.bar-nav a.on { color: var(--vb-fg); border-bottom-color: var(--vb-accent); }
.bar-act { display: flex; align-items: center; gap: 14px; flex: none; }
.bar .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 0; border: 0; background: var(--vb-accent); color: var(--vb-on-accent);
  font-weight: 700; font-size: 15px; line-height: 1.6; padding: 12px 22px; border-radius: 6px; white-space: nowrap; transition: background-color .14s ease, transform .14s ease; }
.bar .btn:hover { background: var(--vb-accent-2); }
.bar .btn:active { transform: translateY(1px); }
.bar .btn-sm { font-size: 13.5px; padding: 8px 15px; }
.bar .btn-out { background: none; color: var(--vb-fg); box-shadow: inset 0 0 0 1px var(--vb-fg28); }
.bar .btn-out:hover { background: var(--vb-fg8); box-shadow: inset 0 0 0 1px var(--vb-fg48); }
.bar .lnk { font-size: 14px; font-weight: 600; color: var(--vb-fg72); }
.bar .lnk:hover { color: var(--vb-fg); }
/* ☰ on phones: the links fold into a panel under the bar (js/main.js) */
.bar-menu { display: none; flex: none; width: 40px; height: 40px; margin-right: -8px; align-items: center; justify-content: center; background: none; border: 0; border-radius: 10px; color: var(--vb-fg84); font-size: 21px; line-height: 1; cursor: pointer; }
.bar-menu:hover { background: var(--vb-fg8); color: var(--vb-fg); }
.bar-menu .i-open, .bar.open .bar-menu .i-closed { display: none; }
.bar.open .bar-menu .i-open { display: inline; }
.bar-nav .bar-nav-app { display: none; }
/* the ☰ panel's last line: 밝기 and English (StoreCrew), small and dim; never in the PC row */
.bar-nav-foot { display: none; align-items: center; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--vb-fg8); }
.bar .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--vb-fg14); border-radius: 999px; color: var(--vb-fg60); background: none; cursor: pointer; flex: none; }
.bar .theme-toggle:hover { color: var(--vb-fg); border-color: var(--vb-fg28); }
.bar .bar-nav-foot .theme-toggle { width: 26px; height: 26px; }
/* a laptop-width window: the six links and the three buttons share the row */
@media (min-width: 861px) and (max-width: 1180px) {
  .bar-in { gap: 18px; }
  .bar-nav { gap: 16px; }
  .bar-act { gap: 10px; }
}
@media (max-width: 860px) {
  .bar-in { gap: 14px; }
  .bar-nav { gap: 16px; }
  /* (the English demo page's bar keeps its company row instead of ☰) */
  .bar:not(.bar-demo) .bar-menu { display: inline-flex; }
  .bar:not(.bar-demo) .bar-nav { display: none; }
  .bar:not(.bar-demo) .bar-act { margin-left: auto; }
  .bar.open .bar-nav { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%; padding: 4px var(--vb-pad) 12px;
    background: var(--vb-bg); border-bottom: 1px solid var(--vb-fg14); box-shadow: 0 18px 40px var(--vb-shadow); overflow: visible; max-height: calc(100vh - var(--vb-h)); max-height: calc(100dvh - var(--vb-h)); overflow-y: auto; }
  .bar.open .bar-nav a { font-size: 17px; padding: 13px 0; border-bottom: 1px solid var(--vb-fg8); color: var(--vb-fg84); }
  .bar.open .bar-nav a.on { color: var(--vb-accent-2); border-bottom-color: var(--vb-fg8); }
  .bar.open .bar-nav .bar-nav-app { display: block; border-bottom: 0; }
  .bar.open .bar-nav .bar-nav-app:not(:last-child) { border-bottom: 1px solid var(--vb-fg8); }
  .bar.open .bar-nav .bar-nav-foot { display: flex; }
  .bar.open .bar-nav .bar-nav-foot a { font-size: 13px; font-weight: 600; color: var(--vb-fg48); padding: 0; border-bottom: 0; }
  .bar.open .bar-nav .bar-nav-foot a:hover { color: var(--vb-fg); }
}
/* a phone: 로그인 · 회원가입 · 데모 열기 and ☰ share the row with the logo */
@media (max-width: 420px) {
  .bar-in { gap: 10px; }
  .bar-act { gap: 6px; }
  .bar-act .btn-sm { padding: 8px 11px; font-size: 13px; }
  .bar-act .theme-toggle { width: 28px; height: 28px; }
}
@media (max-width: 370px) { .bar .brand-word { display: none; } }

/* ---------- A page's own links, in a strip right under the bar ---------- */
.subnav { background: var(--vb-bg); border-bottom: 1px solid var(--vb-fg8); }
.subnav-in { max-width: calc(var(--vb-w) + 2 * var(--vb-pad)); margin: 0 auto; padding: 0 var(--vb-pad); min-height: 46px; display: flex; align-items: center; gap: 20px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav-t { flex: none; font-size: 14px; font-weight: 700; color: var(--vb-fg); white-space: nowrap; }
.subnav-in a { flex: none; font-size: 14px; font-weight: 600; color: var(--vb-fg60); white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; }
.subnav-in a:hover { color: var(--vb-fg); }
.subnav-in a.on { color: var(--vb-fg); border-bottom-color: var(--vb-accent); }
.subnav-in .subnav-end { margin-left: auto; }
.subnav-in a[aria-current] { color: var(--vb-fg); background: none; border-bottom-color: var(--vb-accent); }
/* 한국어 · English on the legal pages (js/main.js offers the English one to a browser not set to Korean) */
.subnav .lang { display: inline-flex; gap: 16px; border: 0; padding: 0; border-radius: 0; }
.subnav .lang a { font-family: inherit; letter-spacing: 0; border-radius: 0; }
/* a strip that stays too (the demo page's 업종 row): right under the bar, never under it; a link to a section lands below both */
.subnav-sticky { position: sticky; top: calc(var(--vb-h) + 1px); z-index: 39; }
body:has(.subnav-sticky) .sec { scroll-margin-top: 106px; }
body:has(.subnav-sticky) .mod { scroll-margin-top: 126px; }
@media (max-width: 560px) {
  .subnav-in { gap: 16px; }
  /* a row longer than the phone scrolls sideways; a fade at the right edge says so */
  .subnav-scroll { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 28px; }
}