/* V4 블랙(B) 화면 - tools/dark/gen_dark.mjs 로 자동 생성 (2026-10-24). 직접 고칠 것은 dark-fix.css 에 */

/* ── base.css ── */
html.vb {
  --brand: #a8a8a8;
}
html.vb body {
  background: #111111;
}
html.vb .logo-mark {
  color: #d0d0d2;
}
html.vb .btn-ghost {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
html.vb .tcard {
  background: #111111;
}
html.vb .badge-new {
  color: #e2e2e3;
}
html.vb .size-row select,
html.vb .car-row select {
  background: #111111;
}
html.vb .chips button {
  background: #111111;
}
html.vb .carsize {
  background: #111111;
}
html.vb .map-ph {
  background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.07) 38px 40px),
  repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.07) 38px 40px), var(--bg-2);
}
html.vb .dock {
  background: rgba(17,17,17,0.96);
}
html.vb .dock a {
  background: #111111;
}

/* ── layout.css ── */
html.vb body {
  background: #111111;
}
html.vb .hero-photo::after {
  background: var(--hero-fade, linear-gradient(180deg, rgba(255,255,255,0.02) 55%, rgba(0,0,0,.45) 100%));
}
html.vb .tag.line {
  border: 1px solid rgba(255,255,255,0.1);
}
html.vb .filters {
  background: #111111;
}
html.vb .badge-new {
  color: #e2e2e3;
}
html.vb .more .btn {
  background: #111111;
}
html.vb .car-row select {
  background: #111111;
}
html.vb .carsize {
  background: #111111;
}
html.vb .box.new-tire {
  background: linear-gradient(135deg, #212121 0%, #212121 100%);
}
html.vb .brands span {
  background: rgba(255,255,255,0.08);
}
html.vb .new-tire .btn {
  background: #111111;
}
html.vb .new-tire .btn.w {
  background: rgba(255,255,255,0.08);
}
html.vb .map-ph {
  background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.07) 38px 40px),
  repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.07) 38px 40px), #111111;
}
html.vb .dock a {
  background: #111111;
}

/* ── home.css ── */
html.vb .rcard i {
  color: #e8e8e9;
}
html.vb .carlist button.on,
html.vb .gens button.on,
html.vb .trims button.on {
  background: #111111;
}
html.vb .axle .acts button {
  background: #111111;
}
html.vb .sheet {
  background: #111111;
}
html.vb .closed-line {
  color: #f6ab8d;
}
html.vb .tcard-img {
  background: var(--bg-3, #151515);
}
html.vb .tcard-img::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.08) 100%);
}
html.vb .bmk-logo {
  background: #111111;
}
html.vb .btn.kakao,
html.vb .dock a.kakao {
  background: #212121;
  color: #e3e3e4;
  border-color: rgba(255,255,255,0.1);
}
html.vb .btn.kakao .ic,
html.vb .dock a.kakao .ic {
  color: #e3e3e4;
}
html.vb .ts-box {
  border: 1.5px solid rgba(255,255,255,0.1);
  background: #111111;
}
html.vb .ts-box:focus-within {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.44);
}
html.vb .ts-list {
  background: #111111;
}
html.vb .ts-chips button {
  background: #111111;
}
html.vb .rcard .bmk-logo,
html.vb .tcard .bmk-logo {
  background: rgba(17,17,17,0.95);
}
html.vb .ts-chips button.has {
  background: #000000;
}
html.vb .ts-chips button.has small {
  color: #b3edc6;
}
html.vb .map-ph.live {
  background: #151515;
}
html.vb .nmap-sw button {
  background: #111111;
  color: #e2e2e4;
}
html.vb .nmap-sw button.on {
  background: #111111;
}

/* ── finder.css ── */
html.vb .qk2 button {
  border: 1px solid rgba(255,255,255,0.18);
  background: #000000;
  color: #e2e2e4;
}
html.vb .qk2 button:hover {
  border-color: rgba(255,255,255,0.32);
  background: #111111;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
html.vb .qk2 .ic2 {
  background: #111111;
}
html.vb .qk2 small {
  color: #adadb0;
}
html.vb .qk2 .go {
  color: #ffffff;
}
html.vb .b17-ov {
  background: rgba(0,0,0,0.55);
}
html.vb .b17-dlg {
  background: #111111;
  color: #e2e2e4;
}
html.vb .b17-hd {
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
html.vb .b17-x {
  color: #e2e2e4;
}
html.vb .b17-x:hover {
  background: #000000;
}
html.vb .b17-lead {
  color: #adadb0;
}
html.vb .b17-btn {
  border: 1px solid rgba(255,255,255,0.18);
  background: #111111;
  color: #e2e2e4;
}
html.vb .b17-btn.pri {
  background: #111111;
  border-color: rgba(255,255,255,0.32);
}
html.vb .b17-btn:hover {
  border-color: rgba(255,255,255,0.32);
}
html.vb .b17-mkg h3 {
  color: #adadb0;
}
html.vb .b17-mkb {
  border: 1px solid rgba(255,255,255,0.18);
  background: #111111;
  color: #e2e2e4;
}
html.vb .b17-mkb:hover {
  border-color: rgba(255,255,255,0.32);
  box-shadow: 0 4px 12px rgba(0,0,0,0.44);
}
html.vb .b17-cbin {
  border: 1.5px solid rgba(255,255,255,0.1);
  background: #111111;
}
html.vb .b17-cbin:focus-within {
  border-color: rgba(255,255,255,0.32);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.44);
}
html.vb .b17-cbin input {
  color: #e2e2e4;
}
html.vb .b17-cbin button {
  color: #adadb0;
}
html.vb .b17-cbl {
  background: #111111;
  border: 1px solid rgba(255,255,255,0.18);
}
html.vb .b17-cbl li:hover,
html.vb .b17-cbl li.hi {
  background: #000000;
}
html.vb .b17-cbl li.none {
  color: #adadb0;
}
html.vb .b17-chips button {
  border: 1px solid rgba(255,255,255,0.18);
  background: #111111;
  color: #e2e2e4;
}
html.vb .b17-chips button:hover {
  border-color: rgba(255,255,255,0.32);
  color: #ffffff;
}
html.vb .b17-pickd {
  background: #000000;
}
html.vb .b17-chg {
  color: #ffffff;
}
html.vb .b17-gpick p {
  color: #adadb0;
}
html.vb .b17-gpick button {
  border: 1.5px solid rgba(255,255,255,0.18);
  background: #111111;
  color: #e2e2e4;
}
html.vb .b17-gpick button:hover {
  border-color: rgba(255,255,255,0.32);
}
html.vb .b17-gpick small {
  color: #adadb0;
}
html.vb .b17-empty {
  color: #adadb0;
}
html.vb .b17-empty b {
  color: #e2e2e4;
}
html.vb .b17-photo {
  background: linear-gradient(180deg, #151515, #151515);
}
html.vb .b17-info dt {
  color: #adadb0;
}
html.vb .b17-sizes {
  border: 2px solid rgba(255,255,255,0.32);
  background: #111111;
}
html.vb .b17-sizes-h {
  color: #ffffff;
}
html.vb .b17-sizes-h small {
  color: #adadb0;
}
html.vb .b17-sizes li {
  border-top: 1px solid rgba(255,255,255,0.18);
}
html.vb .b17-inch {
  color: #adadb0;
}
html.vb .b17-size b {
  color: #ffffff;
  background: linear-gradient(transparent 62%, #151515 62%);
}
html.vb .b17-size small {
  background: #111111;
}
html.vb .b17-steps li {
  border-bottom: 3px solid rgba(255,255,255,0.18);
}
html.vb .b17-steps i {
  background: #151515;
}
html.vb .b17-steps li.done {
  color: #ffffff;
  border-color: rgba(255,255,255,0.18);
}
html.vb .b17-steps li.done i {
  background: #212121;
}
html.vb .b17-steps li.on {
  color: #ffffff;
  border-color: rgba(255,255,255,0.32);
}
html.vb .b17-steps li.on i {
  background: #111111;
}
html.vb .b17-fld label {
  color: #adadb0;
}
html.vb .b17-mksel {
  border: 1.5px solid rgba(255,255,255,0.1);
  background: #111111;
  color: #e2e2e4;
}
html.vb .b17-pop {
  border: 1px solid rgba(255,255,255,0.18);
  background: #000000;
}
html.vb .b17-hint {
  background: #000000;
  color: #adadb0;
}
html.vb .b17-hint b {
  color: #e2e2e4;
}
html.vb .b17-crumbs button {
  background: #111111;
}
html.vb .b17-mkg.rows .b17-mkb {
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
html.vb .b17-mkg.rows .b17-mkb:hover {
  background: #000000;
}
html.vb .b17-rows button {
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: #e2e2e4;
}
html.vb .b17-rows button:hover {
  background: #000000;
}
html.vb .b17-rows small {
  color: #adadb0;
}
html.vb .b17-how {
  box-shadow: 0 6px 16px rgba(0,0,0,0.44);
}
html.vb .b17-howg li {
  border: 1px solid rgba(255,255,255,0.18);
}
html.vb .b17-howg b i,
html.vb .b17-howr .n {
  background: #111111;
}
html.vb .b17-howg small {
  color: #adadb0;
}
html.vb .b17-decode {
  background: #111111;
}
html.vb .b17-howl li {
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
html.vb .b17-howl small {
  color: #adadb0;
}
html.vb .b17-howr li {
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
html.vb .b17-howr .n {
  border: 2px solid rgba(255,255,255,0.1);
}
html.vb .b17-howr em {
  color: #ffffff;
}
html.vb .b17-howr small {
  color: #adadb0;
}
html.vb .b17-mk.logo {
  background: #111111;
}
html.vb .b17-photo.has figcaption {
  background: rgba(17,17,17,0.85);
}
html.vb .b17-size em {
  color: #adadb0;
}
html.vb .b17-none {
  color: #e2e2e4;
}
html.vb .b17-qs {
  background: #000000;
}
html.vb .b17-qrow input#b17qy {
  border: 1.5px solid rgba(255,255,255,0.1);
}
html.vb .b17-qmsg {
  color: #f6ab8d;
}
html.vb .b17-cbl li small {
  color: #adadb0;
}
html.vb .b17-or {
  color: #adadb0;
}
html.vb .b17-or::before,
html.vb .b17-or::after {
  background: #151515;
}
html.vb .b17-all {
  border: 1px solid rgba(255,255,255,0.18);
}
html.vb .b17-all-h small {
  color: #adadb0;
}
html.vb .b17-all li {
  border-top: 1px solid rgba(255,255,255,0.18);
}
html.vb .b17-thumb {
  background: #000000;
}
html.vb .b17-gn small {
  color: #adadb0;
}
html.vb .b17-gs em {
  color: #ffffff;
  background: linear-gradient(transparent 62%, #151515 62%);
}
html.vb .b17-gs em small {
  color: #adadb0;
}
html.vb .b17-gs .none {
  color: #adadb0;
}
html.vb .hd-sub {
  background: #111111;
}
html.vb .hd-sub button {
  color: #e2e2e4;
}
html.vb .hd-sub button:hover {
  background: #000000;
  color: #ffffff;
}
html.vb .b17-howl li:hover {
  background: #000000;
}
html.vb .b17-howl li.on {
  background: #151515;
  box-shadow: inset 3px 0 0 rgba(0,0,0,0.6);
}
html.vb .b17-how2 h3 small {
  color: #adadb0;
}
html.vb .b17-hdesc {
  background: #111111;
}
html.vb .b17-gmain {
  background: #000000;
}
html.vb .b17-gthumbs button.on {
  border-color: rgba(255,255,255,0.32);
}
html.vb .b17-gsz {
  color: #ffffff;
}
html.vb .b17-gmeta {
  color: #adadb0;
}
html.vb .b17-gpr small {
  color: #adadb0;
}
html.vb .b17-more {
  border: 1px dashed rgba(255,255,255,0.1);
  background: #111111;
  color: #ffffff;
}
html.vb .b17-allph {
  background: linear-gradient(180deg, #151515, #151515);
}

/* ── guide.css ── */
html.vb .gd-card {
  background: #111111;
}
html.vb .gd-ic {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
html.vb .gd-decode {
  background: #111111;
}

/* ── v3.css ── */
html.vb body.v3 {
  background: #111111;
}
html.vb .v3-hd {
  background: #111111;
}
html.vb .v3-burger i {
  background: #111111;
}
html.vb .v3-tel svg {
  stroke: #111111;
}
@media (min-width: 1024px) {
  html.vb .v3-hsearch {
    background: #111111;
  }
}
html.vb .v3-mega {
  background: #111111;
}
html.vb .v3-mycar-ic {
  background: rgba(255,255,255,0.06);
}
html.vb .v3-mycar-ic svg {
  stroke: #111111;
}
html.vb .v3-msearch {
  background: #111111;
}
html.vb .v3-drawer {
  background: #111111;
}
html.vb .v3-drawer-h {
  background: #111111;
}
html.vb .v3-slide.is-msg {
  background: #111111 center/cover no-repeat;
  background-image: linear-gradient(90deg, rgba(20,22,26,.86) 0%, rgba(20,22,26,.55) 60%, rgba(255,255,255,0.08) 100%), #111111;
}
html.vb .v3-dots button {
  background: rgba(17,17,17,0.5);
}
html.vb .v3-dots button.on {
  background: #111111;
}
html.vb .v3-findbtn svg {
  stroke: #111111;
}
html.vb .v3-slide .v3-btn.line {
  border-color: rgba(255,255,255,0.1);
}
html.vb .v3-trust li {
  background: #111111;
}
html.vb .v3 .rcard {
  background: #111111;
}
html.vb .v3-makers button {
  background: #111111;
}
html.vb .v3-inchgrid a {
  background: #111111;
}
html.vb .v3-sizechips button {
  background: #111111;
}
html.vb .v3-tips li.big a {
  background-image: radial-gradient(circle at 92% 30%, rgba(255,106,26,.55) 0 46px, transparent 47px), radial-gradient(circle at 92% 30%, rgba(255,255,255,0.04) 0 72px, transparent 73px);
}
html.vb .v3-svc a {
  background: #111111;
}
html.vb .v3-subtabs a,
html.vb .v3-subtabs button {
  border: 1px solid rgba(255,255,255,0.11);
}
html.vb .v3-subtabs a.on {
  background: #111111;
  border-color: rgba(255,255,255,0.1);
}
html.vb .v3-foot-top {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
html.vb .v3-top {
  background: #111111;
}
@media (min-width: 1024px) {
  html.vb .v3-carlinks a,
html.vb .v3-carlinks button {
    border: 1px solid rgba(255,255,255,0.1);
  }
}
html.vb .v3-why .f0 {
  fill: #111111;
}
html.vb .v3-why3 li {
  background: #111111;
}
html.vb .v3-fic {
  background: #111111;
}
html.vb .v3-fic .w {
  fill: #111111;
}
html.vb .v3-fic.f5 circle:nth-child(2) {
  fill: #111111;
}
html.vb .v3-torque svg {
  stroke: #111111;
}
@media (min-width: 768px) {
  html.vb .v3 .v3-slide.is-photo {
    background-color: #151515;
    background-image: linear-gradient(90deg, #151515 0, #151515 46%, transparent 66%), linear-gradient(90deg, rgba(20,22,26,.45), rgba(255,255,255,0.08)), #111111;
  }
}

/* ── v3b.css ── */
html.vb {
  --brand: #a8a8a8;
  --new: #a8a8a8;
  --svc-ic: #a8a8a8;
  --hd-accent: #a8a8a8;
  --hd-accent-txt: #6a6a6a;
  --v3-dark-2: #6a6a6a;
  --v3-acc: #a8a8a8;
  --v3-acc-2: #6a6a6a;
  --sk: #6a6a6a;
  --lv: #6a6a6a;
  --acc-sh: #a8a8a8;
  --acc-glow: rgba(168,168,168,0.3);
  --bd-soft: #6a6a6a;
  --t-b: #6a6a6a;
  --t-v: #6a6a6a;
  --wc2: #6a6a6a;
  --wc4: #6a6a6a;
  --wc8: #6a6a6a;
  --wpt: #a8a8a8;
}
html.vb .v3b .v3-util,
html.vb .v3b .v3-util a {
  color: #acacaf;
}
html.vb .v3b .v3-hd {
  background: rgba(17,17,17,0.96);
}
html.vb .v3b .v3-mycar-ic {
  background: #111111;
}
html.vb .v3b .v3-carlinks a,
html.vb .v3b .v3-carlinks button {
  background: #111111;
}
html.vb .v3b .v3-drawer-h {
  background: #111111;
}
html.vb .v3b .v3-slide.is-msg {
  background-image: linear-gradient(0deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 100%), #111111;
}
html.vb .v3b .v3-slide-t {
  background: rgba(17,17,17,0.96);
}
html.vb .v3b .v3-slide .v3-btn.line {
  background: #111111;
}
html.vb .v3b .v3-slide-ctl {
  background: rgba(17,17,17,0.9);
}
html.vb .v3b .v3-trust li {
  background: #111111;
}
html.vb .v3b .v3-tips a {
  background: #111111;
}
html.vb .v3b .v3-tips li.big a {
  background-image: radial-gradient(circle at 90% 28%, var(--bt) 0 34px, transparent 35px), radial-gradient(circle at 90% 28%, rgba(17,17,17,0.55) 0 62px, transparent 63px);
}
html.vb .v3b .v3-free {
  background: #111111;
}
html.vb .v3b .v3-steps li {
  background: #111111;
}
html.vb .v3b .v3-steps li:nth-child(3) .v3-stepn {
  color: #b1e5cc;
}
html.vb .v3b .v3-ibox {
  background: #111111;
}
html.vb .v3b .v3-subtabs a,
html.vb .v3b .v3-subtabs button {
  background: #111111;
}

/* ── v0.css ── */
html.vb[data-c="blue"] {
  --bg-2: #6a6a6a;
  --bg-3: #6a6a6a;
  --line: #6a6a6a;
  --ink: #111111;
  --price: #111111;
  --brand: #a8a8a8;
  --new: #a8a8a8;
  --svc-ic: #a8a8a8;
  --hd-ink: #111111;
  --hd-line: #6a6a6a;
  --hd-util-bg: #6a6a6a;
  --hd-accent: #a8a8a8;
  --hd-accent-txt: #6a6a6a;
  --v3-dark: #e6cc98;
  --v3-dark-2: #6a6a6a;
  --v3-acc: #a8a8a8;
  --v3-acc-2: #6a6a6a;
  --acc-txt: #a8a8a8;
  --sk: #6a6a6a;
  --bt: #6a6a6a;
  --lv: #6a6a6a;
  --pc: #6a6a6a;
  --oat: #6a6a6a;
  --cream: #6a6a6a;
  --btn-y: #6a6a6a;
  --btn-y-ink: #111111;
  --btn-y-sh: #8c8c8c;
  --acc-sh: #a8a8a8;
  --acc-glow: rgba(168,168,168,0.3);
  --bd-soft: #6a6a6a;
  --t-y: #6a6a6a;
  --t-b: #6a6a6a;
  --t-o: #6a6a6a;
  --t-v: #6a6a6a;
  --tag-ink: #e6cc98;
  --star: #a8a8a8;
  --dot: #6a6a6a;
  --v3-shadow: 0 6px 18px rgba(230,204,152,0.08);
  --stitch: 2px dashed rgba(168,168,168,0.16);
  --wc1: #6a6a6a;
  --wc2: #6a6a6a;
  --wc4: #6a6a6a;
  --wc5: #6a6a6a;
  --wc7: #6a6a6a;
  --wc8: #6a6a6a;
  --wline: #e6cc98;
  --wpt: #a8a8a8;
}
html.vb[data-c="pastel"] {
  --brand: #a8a8a8;
  --new: #a8a8a8;
  --svc-ic: #a8a8a8;
  --hd-accent: #a8a8a8;
  --hd-accent-txt: #6a6a6a;
  --v3-dark-2: #6a6a6a;
  --v3-acc: #a8a8a8;
  --v3-acc-2: #6a6a6a;
  --acc-txt: #a8a8a8;
  --sk: #6a6a6a;
  --lv: #6a6a6a;
  --acc-sh: #a8a8a8;
  --acc-glow: rgba(168,168,168,0.3);
  --bd-soft: #6a6a6a;
  --t-b: #6a6a6a;
  --t-v: #6a6a6a;
  --wc2: #6a6a6a;
  --wc4: #6a6a6a;
  --wc8: #6a6a6a;
  --wpt: #a8a8a8;
}
html.vb[data-c="pink"] {
  --lv: #6a6a6a;
  --t-v: #6a6a6a;
  --wc8: #6a6a6a;
}
html.vb .v0-colors button[aria-pressed="true"] {
  background: #111111;
}
html.vb .v0-colors button[aria-pressed="true"] i {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 0 3.5px var(--acc-txt);
}
html.vb .v0 .v3-why3 li,
html.vb .v0 .v3-why3 li.w1,
html.vb .v0 .v3-why3 li.w2,
html.vb .v0 .v3-why3 li.w3 {
  background: #111111;
}
html.vb .v0 .v3-fic {
  background: #111111 !important;
}
html.vb .v0 .v3-torque {
  background: #111111;
}
html.vb .v0-note {
  background: rgba(17,17,17,0.7);
}