/* 착한타이어 VB0~VB3 공통 블랙 (2026-10-24)
   짜임: v0 의 CSS(base·layout·home·type·finder·guide·v3·v3b·v0) → vb-dark.css(자동 생성, 고정 밝은 색을 검정 단계로) → 이 파일(색 변수·공통) → vbN.css(시안별 포인트 색·글꼴·첫 화면)
   톤: 현테크이엔지 V4 블랙 — 검정 #000·#111·#151515·#212121, 흰 글·회색, 파랑 없음, 포인트 색(--acc)은 몇 곳만 */
html.vb[data-c] {
  --acc: #C9A86A; --acc-rgb: 201,168,106; --acc-ink: #000;
  --bg: #000; --bg-2: #0B0B0B; --bg-3: #151515; --card-bg: #111; --line: rgba(255,255,255,.1);
  --ink: #F2F2F2; --ink-2: #B4B4B4; --ink-3: #7E7E7E; --price: #FFF;
  --brand: var(--acc); --brand-ink: var(--acc-ink); --new: var(--acc); --svc-ic: var(--acc); --good: #8BD3A0; --warn: #F0A070;
  --dock-bg: rgba(0,0,0,.94); --svc-bg: #111;
  --hd-bg: #000; --hd-ink: #FFF; --hd-ink-2: rgba(255,255,255,.62); --hd-line: rgba(255,255,255,.1); --hd-util-bg: #0B0B0B;
  --hd-search-bg: #151515; --hd-search-ink: #FFF; --hd-accent: var(--acc); --hd-accent-ink: var(--acc-ink); --hd-car-bg: rgba(255,255,255,.05);
  --hd-accent-txt: var(--acc); --hd-dot: var(--acc);
  --v3-dark: #111; --v3-dark-2: #1A1A1A; --v3-acc: var(--acc); --v3-acc-2: #1A1A1A; --acc-txt: var(--acc);
  --sk: #151515; --bt: #151515; --mt: #151515; --lv: #151515; --pc: #151515; --oat: #111; --cream: #0B0B0B;
  --btn-y: var(--acc); --btn-y-ink: var(--acc-ink); --btn-y-sh: transparent; --acc-sh: transparent; --acc-glow: rgba(var(--acc-rgb),.22); --bd-soft: rgba(255,255,255,.12);
  --t-y: #111; --t-b: #111; --t-g: #111; --t-o: #111; --t-v: #111; --tag-ink: var(--acc); --star: var(--acc); --dot: #333;
  --v3-shadow: none; --stitch: 1px solid rgba(255,255,255,.08);
  --wc1: #1A1A1A; --wc2: #1A1A1A; --wc3: #1A1A1A; --wc4: #1A1A1A; --wc5: #1A1A1A; --wc6: #1A1A1A; --wc7: #1A1A1A; --wc8: #1A1A1A; --wline: #D8D8D8; --wpt: var(--acc);
  --logo-color: #FFF; --logo-sub: #8A8A8A;
  color-scheme: dark;
}
html.vb body.v3 { background: var(--bg); color: var(--ink); }
html.vb ::selection { background: rgba(var(--acc-rgb),.35); color: #FFF; }

/* 버전 띠: VB0~VB3 · v0 · v1 · v2 */
html.vb .ct-vtabs { background: #000; border-bottom: 1px solid rgba(255,255,255,.08); }
html.vb .ct-vtabs a { color: #7A7A7A; }
html.vb .ct-vtabs a:hover { color: #FFF; }
html.vb .ct-vtabs a.on { background: var(--acc); color: var(--acc-ink); }
html.vb .ct-vtabs i { width: 1px; height: 12px; background: rgba(255,255,255,.18); margin: 0 6px; }

/* 사진: 검정 톤에 맞게 살짝 어둡게 (상품 사진은 그대로) */
html.vb .v3-svcimg img, html.vb .svcgrid img { filter: grayscale(.35) brightness(.85); transition: filter .35s; }
html.vb .v3-svc a:hover .v3-svcimg img, html.vb .svcgrid li:hover img { filter: none; }

/* 숫자·흰 카드가 남는 곳 정리 */
html.vb .v3-makers button img { filter: grayscale(1) invert(1) brightness(1.4); opacity: .85; }
/* 타이어 브랜드 로고는 흰 바탕용 그림 → 옅은 회색 칸 위에 (현테크 블랙의 고객사 로고와 같은 방식) */
html.vb .bmk-logo { background: #E9E9E9 !important; box-shadow: none !important; }
/* v3b 아이콘 선이 --v3-dark(검정 바탕색)를 써서 안 보이던 것 */
html.vb .v3b .v3-gic svg, html.vb .v3b .v3-torque svg { stroke: #D8D8D8; }
html.vb .v3b .v3-gate li:nth-child(-n+2) .v3-gic svg { stroke: var(--acc); }
html.vb .v3b .v3-torque .f0 { fill: #1A1A1A; }
html.vb input, html.vb select, html.vb textarea { background: #111; color: #FFF; border-color: rgba(255,255,255,.14); }
html.vb input::placeholder { color: #6E6E6E; }

/* 휴대폰 아래 띠: 전화 · 문자 · 길찾기 */
html.vb .dock { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; padding: 0; background: #0B0B0B; border-top: 1px solid rgba(255,255,255,.1); }
html.vb .dock a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 58px; border-radius: 0; font-weight: 600; font-size: 14px; color: #FFF; background: none; }
html.vb .dock a.call { background: var(--acc); color: var(--acc-ink); }
html.vb .dock a + a { border-left: 1px solid rgba(255,255,255,.08); }
@media (min-width: 900px) { html.vb .dock { display: none; } }

/* 첫 화면 (시안별 vbN.css 에서 모양) 공통 뼈대 */
.vb-hero { position: relative; overflow: hidden; background: #000; color: #FFF; }
.vb-hero .v3-wrap { position: relative; z-index: 2; }
.vb-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.vb-hero-bg::after { content: ""; position: absolute; inset: 0; }
.vb-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.vb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #FFF; }
.vb-btn.pri { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.vb-btn:hover { filter: brightness(1.1); }

/* 팝업 모양은 /vbc/popup.js 안에 (v0 에서도 같이 쓰려고) */

html.vb .v3-mycar-ic { background: rgba(var(--acc-rgb),.12); }
html.vb .v3-mycar-ic svg { stroke: var(--acc); fill: none; }

/* 하위 화면 탭: 고른 탭이 자동 변환(검정 칸)에 덮여 안 보이던 것 */
html.vb .v3b .v3-subtabs a, html.vb .v3b .v3-subtabs button { background: #111; color: #CFCFCF; border-color: rgba(255,255,255,.14); }
html.vb .v3b .v3-subtabs a.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
html.vb .dock a.call { color: var(--acc-ink) !important; }
html.vb .dock a.call svg { stroke: var(--acc-ink) !important; }

/* ===== 2026-10-24 휴대폰 정밀 (현테크 기준: 360·384·390·412 · 메뉴·단추 한 줄 · 화면 밖 0) ===== */
@media (max-width: 420px) {
  html.vb .ct-vtabs > div { padding: 4px 8px; gap: 1px; }
  html.vb .ct-vtabs a { padding: 5px 7px; font-size: 12px; letter-spacing: 0; }
  html.vb .ct-vtabs i { margin: 0 3px; }
}
@media (max-width: 599px) {
  /* 첫 화면 단추: 주요 단추 한 줄 전체 + 나머지 둘 나란히 */
  .vb-hero .vb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vb-hero .vb-btns > :first-child { grid-column: 1 / -1; }
  .vb-hero .vb-btn { min-height: 50px; padding: 0 12px; font-size: 15px; }
  /* 누르는 칸 최소 높이 (손가락) */
  html.vb .v3-more { min-height: 40px; display: inline-flex; align-items: center; }
  html.vb .pr.ask { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ===== 오시는 길 채움: 영업시간 표(관리툴 '영업시간' 값) · 찾아오는 길 · 길찾기 단추 ===== */
.vb-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.vb-visit > div { background: #111; border: 1px solid rgba(255,255,255,.1); border-radius: var(--v3-r, 12px); padding: 22px 22px 20px; }
.vb-visit h3 { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: #FFF; display: flex; align-items: center; gap: 8px; }
.vb-visit h3 small { font-size: 12px; font-weight: 600; color: var(--acc-ink); background: var(--acc); padding: 3px 9px; border-radius: 10px; }
.vb-hours { width: 100%; border-collapse: collapse; font-size: 15px; }
.vb-hours th, .vb-hours td { padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.07); text-align: left; font-weight: 500; }
.vb-hours th { width: 64px; color: #9A9A9A; }
.vb-hours td { color: #EDEDED; font-variant-numeric: tabular-nums; }
.vb-hours tr.today th, .vb-hours tr.today td { color: var(--acc); font-weight: 700; }
.vb-hours td.off { color: #777; }
.vb-visit p.note { margin: 12px 0 0; font-size: 13px; color: #8A8A8A; line-height: 1.6; }
.vb-route { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; font-size: 15px; color: #DDD; }
.vb-route li { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.vb-route li b { color: #9A9A9A; font-weight: 500; }
.vb-go { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vb-go a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; background: rgba(255,255,255,.07); color: #FFF; text-align: center; }
.vb-go a.pri { background: var(--acc); color: var(--acc-ink); }
.vb-go a i { width: 18px; height: 18px; border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.vb-go a i.n { background: #03C75A; color: #FFF; } .vb-go a i.k { background: #FEE500; color: #191919; }
html.vb.vb0 .vb-go a, html.vb.vb3 .vb-go a, html.vb.vb0 .vb-visit > div, html.vb.vb3 .vb-visit > div { border-radius: 0; }
@media (max-width: 899px) { .vb-visit { grid-template-columns: 1fr; } .vb-visit > div { padding: 18px 16px; } }
html.vb .nmap-sw button { min-height: 40px; }
/* 지도: 위성·지도 바꾸기를 왼쪽 위로 (아래 '네이버 지도에서 길찾기' 단추와 겹치지 않게) */
html.vb .map-ph .nmap-sw { top: 10px; bottom: auto; left: 10px; right: auto; }