/* v0 — 5색 파스텔 홈페이지 (2026-10-17)
   사용자: "블루를 메인으로 블루·파스텔·옐로·핑크·그린 순서로, 현테크 화이트/블랙처럼 맨 위에서 고르기. 동일 디자인에 색상만 다른 5개"
           "중고타이어·우리 가게 장점은 은은하게 강조" · "신품도 저렴하지만 반드시 문의 필수"
   짜임: v3.css(공통) → v3b.css(B안 귀여운 요소, 색은 변수) → 이 파일(색 5벌 + 은은한 강조 + 색 고르기 + 하위 화면)
   색은 <html data-c="blue|pastel|yellow|pink|green"> 로 바뀜. 새 색을 더할 땐 아래 묶음 하나 + v0.js COLORS 한 줄 */

/* ---------- 색 5벌 ---------- */
html[data-c="blue"] {
  --bg-2: #F3F8FF; --bg-3: #E7F0FC; --line: #E1EAF6; --ink: #2F3B52; --ink-2: #5C6A82; --ink-3: #94A0B4; --price: #2F3B52;
  --brand: #3B7BD8; --new: #3B7BD8; --svc-ic: #3B7BD8; --good: #2F9A6E;
  --hd-ink: #2F3B52; --hd-ink-2: #5C6A82; --hd-line: #E1EAF6; --hd-util-bg: #EAF3FF; --hd-accent: #3B7BD8; --hd-accent-txt: #9CC6F5;
  --v3-dark: #34425E; --v3-dark-2: #E3F0FF; --v3-acc: #3B7BD8; --v3-acc-2: #E3F0FF; --acc-ink: #FFFFFF; --acc-txt: #2F6BC2;
  --sk: #D6E9FF; --bt: #DDF3FF; --mt: #D9F4F1; --lv: #E2E6FF; --pc: #E6F0FF; --oat: #EAF3FF; --cream: #F7FBFF;
  --btn-y: #9CCBFF; --btn-y-ink: #1F3A66; --btn-y-sh: #7AB2F0; --acc-sh: #2A5FAE; --acc-glow: rgba(59,123,216,.3); --bd-soft: #C8DDF7;
  --t-y: #F3F8FF; --t-b: #EEF5FF; --t-g: #EEF9F7; --t-o: #F1F4FF; --t-v: #F3F3FF; --tag-ink: #24508F; --star: #3B7BD8; --dot: #CBD9EC;
  --v3-shadow: 0 6px 18px rgba(50,80,130,.08); --stitch: 2px dashed rgba(60,100,160,.16);
  --wc1: #D6E9FF; --wc2: #DDF3FF; --wc3: #D9F4F1; --wc4: #D6E9FF; --wc5: #E2E6FF; --wc6: #D9F4F1; --wc7: #DDF3FF; --wc8: #E2E6FF; --wline: #34425E; --wpt: #2F6BC2;
}
html[data-c="pastel"] {
  --bg-2: #FBF6EC; --bg-3: #F4ECDD; --line: #EFE6D6; --ink: #3F3A36; --ink-2: #6E665E; --ink-3: #A39A8F; --price: #3F3A36;
  --brand: #3A86CC; --new: #3A86CC; --svc-ic: #3A86CC; --good: #3D9A6E;
  --hd-ink: #3F3A36; --hd-ink-2: #6E665E; --hd-line: #EFE6D6; --hd-util-bg: #F7F0E3; --hd-accent: #3A86CC; --hd-accent-txt: #9CCBF2;
  --v3-dark: #4E4740; --v3-dark-2: #E6F2FC; --v3-acc: #3A86CC; --v3-acc-2: #E6F2FC; --acc-ink: #FFFFFF; --acc-txt: #2F72B3;
  --sk: #DCEEFB; --bt: #FFEAA8; --mt: #DDF2E6; --lv: #ECE6FA; --pc: #FFE7CF; --oat: #F7F0E3; --cream: #FFFBF2;
  --btn-y: #FFD45C; --btn-y-ink: #4A3826; --btn-y-sh: #EDBE3E; --acc-sh: #2C6CA8; --acc-glow: rgba(58,134,204,.3); --bd-soft: #C9E1F5;
  --t-y: #FFF8E1; --t-b: #EEF6FD; --t-g: #EEF8F1; --t-o: #FFF3E6; --t-v: #F4F0FC; --tag-ink: #6B5200; --star: #E0A800; --dot: #E3DACB;
  --v3-shadow: 0 6px 18px rgba(110,90,60,.08); --stitch: 2px dashed rgba(110,90,60,.15);
  --wc1: #FFEAA8; --wc2: #DCEEFB; --wc3: #DDF2E6; --wc4: #DCEEFB; --wc5: #FFEAA8; --wc6: #DDF2E6; --wc7: #FFE7CF; --wc8: #ECE6FA; --wline: #4E4740; --wpt: #2F72B3;
}
html[data-c="yellow"] {
  --bg-2: #FFF9E6; --bg-3: #FFF2C9; --line: #F2E8C8; --ink: #3E3A2E; --ink-2: #6B6450; --ink-3: #A39B82; --price: #3E3A2E;
  --brand: #9A6A00; --new: #9A6A00; --svc-ic: #9A6A00; --good: #4E9A3E;
  --hd-ink: #3E3A2E; --hd-ink-2: #6B6450; --hd-line: #F2E8C8; --hd-util-bg: #FFF6D6; --hd-accent: #F4BC1C; --hd-accent-txt: #FFE08A;
  --v3-dark: #4A4230; --v3-dark-2: #FFF6D6; --v3-acc: #F4BC1C; --v3-acc-2: #FFF4CC; --acc-ink: #3A2C00; --acc-txt: #9A6A00;
  --sk: #FFF1C2; --bt: #FFE38A; --mt: #E6F4D9; --lv: #F3EBD6; --pc: #FFE6C4; --oat: #FFF5D8; --cream: #FFFDF4;
  --btn-y: #FFD45C; --btn-y-ink: #3A2C00; --btn-y-sh: #E3B53A; --acc-sh: #D9A20C; --acc-glow: rgba(244,188,28,.35); --bd-soft: #F2DFA0;
  --t-y: #FFF9E3; --t-b: #FFF6DC; --t-g: #F3F9EA; --t-o: #FFF2E0; --t-v: #FAF4E6; --tag-ink: #7A5600; --star: #E0A800; --dot: #EADFC0;
  --v3-shadow: 0 6px 18px rgba(120,95,30,.08); --stitch: 2px dashed rgba(140,110,30,.18);
  --wc1: #FFE38A; --wc2: #FFF1C2; --wc3: #E6F4D9; --wc4: #FFF1C2; --wc5: #FFE38A; --wc6: #E6F4D9; --wc7: #FFE6C4; --wc8: #F3EBD6; --wline: #4A4230; --wpt: #9A6A00;
}
html[data-c="pink"] {
  --bg-2: #FFF4F5; --bg-3: #FCE8EC; --line: #F6E3E6; --ink: #46383E; --ink-2: #75636B; --ink-3: #AE9AA2; --price: #46383E;
  --brand: #D9577F; --new: #D9577F; --svc-ic: #D9577F; --good: #3D9A6E;
  --hd-ink: #46383E; --hd-ink-2: #75636B; --hd-line: #F6E3E6; --hd-util-bg: #FFEFF3; --hd-accent: #E46A8E; --hd-accent-txt: #FFC2D3;
  --v3-dark: #5A4450; --v3-dark-2: #FFEFF3; --v3-acc: #E0658B; --v3-acc-2: #FFE9EF; --acc-ink: #FFFFFF; --acc-txt: #C2456C;
  --sk: #FFE1EA; --bt: #FFF0B8; --mt: #DDF2E8; --lv: #F0E4FA; --pc: #FFE4D6; --oat: #FFF0F2; --cream: #FFFAF9;
  --btn-y: #FFC2D3; --btn-y-ink: #5A2236; --btn-y-sh: #EE9FB6; --acc-sh: #C24E72; --acc-glow: rgba(224,101,139,.3); --bd-soft: #F6CFDA;
  --t-y: #FFF7F0; --t-b: #FFF1F5; --t-g: #F1F9F4; --t-o: #FFF3EE; --t-v: #F8F1FC; --tag-ink: #8A3A55; --star: #E0658B; --dot: #EED3DB;
  --v3-shadow: 0 6px 18px rgba(130,70,90,.08); --stitch: 2px dashed rgba(150,80,105,.16);
  --wc1: #FFE1EA; --wc2: #FFF0B8; --wc3: #DDF2E8; --wc4: #FFE1EA; --wc5: #FFF0B8; --wc6: #DDF2E8; --wc7: #FFE4D6; --wc8: #F0E4FA; --wline: #5A4450; --wpt: #C2456C;
}
html[data-c="green"] {
  --bg-2: #F1F8EF; --bg-3: #E4F1E2; --line: #E1EEDF; --ink: #2F3B33; --ink-2: #5B6A60; --ink-3: #95A399; --price: #2F3B33;
  --brand: #3C9A6A; --new: #3C9A6A; --svc-ic: #3C9A6A; --good: #2D7F55;
  --hd-ink: #2F3B33; --hd-ink-2: #5B6A60; --hd-line: #E1EEDF; --hd-util-bg: #E9F5EC; --hd-accent: #3C9A6A; --hd-accent-txt: #A8DFBF;
  --v3-dark: #34463B; --v3-dark-2: #E6F5EC; --v3-acc: #3C9A6A; --v3-acc-2: #E3F4EA; --acc-ink: #FFFFFF; --acc-txt: #2D7F55;
  --sk: #DDF2E6; --bt: #FFF1C4; --mt: #D3EFDF; --lv: #E7EEDC; --pc: #F3EED8; --oat: #EAF5EC; --cream: #F8FCF7;
  --btn-y: #A8DFBF; --btn-y-ink: #1F4A33; --btn-y-sh: #86CBA4; --acc-sh: #2D7A52; --acc-glow: rgba(60,154,106,.3); --bd-soft: #CDE6D6;
  --t-y: #F7FAEE; --t-b: #EFF8F2; --t-g: #EAF6EE; --t-o: #F6F6EC; --t-v: #F1F5EC; --tag-ink: #2D6B47; --star: #3C9A6A; --dot: #CFE0D3;
  --v3-shadow: 0 6px 18px rgba(50,90,65,.08); --stitch: 2px dashed rgba(60,110,80,.16);
  --wc1: #DDF2E6; --wc2: #FFF1C4; --wc3: #D3EFDF; --wc4: #DDF2E6; --wc5: #FFF1C4; --wc6: #D3EFDF; --wc7: #F3EED8; --wc8: #E7EEDC; --wline: #34463B; --wpt: #2D7F55;
}
html { transition: background-color .3s; }

/* 강조색 위 글자색(옐로는 진한 글자) · 글자로 쓰는 강조색(옐로는 진한 겨자색) */
.v0 .v3-btn.pri, .v0 .v3-band .v3-btn.pri, .v0 .v3-band .v3-btn.pri span, .v0 .v3-subtabs a.on, .v0 .dock .call { color: var(--acc-ink); }
.v0 .v3-more, .v0 .v3-slogan b, .v0 .v3-util a:hover, .v0 .v3-torque small, .v0 .v3-tips li.big .v3-go, .v0 .v3-inchgrid a:hover,
.v0 .v3-carlinks a:hover, .v0 .v3-carlinks button:hover, .v0 .v3-steps a, .v0 .v3-steps button { color: var(--acc-txt); }
.v0 .v3-mycar-ic svg { stroke: var(--acc-txt); }

/* ---------- 색 고르기 (맨 위 띠) ---------- */
.v0-colors { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.v0-colors small { font-size: 11.5px; color: var(--ink-2); margin-right: 4px; }
.v0-colors button { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 7px 0 4px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; }
.v0-colors button i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.v0-colors button[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.v0-colors button[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--acc-txt); }
@media (max-width: 899px) {
  .v0 .v3-slogan { display: none; }
  .v0 .v3-util .v3-wrap { justify-content: space-between; }
  .v0-colors small { display: none; }
  .v0-colors button { padding: 0 5px; }
  .v0-colors button span { display: none; }                 /* 휴대폰: 동그라미만, 고른 색만 이름 */

  .v0 .v3-utlinks a:not(.login) { display: none; }          /* 휴대폰 맨 위 띠: 색 · 영업 상태 · login 만 */
}

/* ---------- 장점은 은은하게 (10/17) — 큰 색 판 대신 흰 카드 + 얇은 점선, 숫자만 강조색 ---------- */
.v0 .v3-why .v3-sec-h h2::before { animation: none; }
.v0 .v3-why3 li, .v0 .v3-why3 li.w1, .v0 .v3-why3 li.w2, .v0 .v3-why3 li.w3 { background: #fff; box-shadow: none; outline: var(--stitch); outline-offset: -6px; }
.v0 .v3-why3 .v3-wic { width: 54px; height: 54px; }
.v0 .v3-why3 li { grid-template-columns: 54px 1fr; }
.v0 .v3-why3 b { font-size: 17px; }
.v0 .v3-why3 strong { font-size: 1em; color: var(--acc-txt); }
.v0 .v3-why3 small { color: var(--ink-3); }
.v0 .v3-free { background: var(--bg-2); box-shadow: none; outline: 0; }
.v0 .v3-free h3 { font-size: 16px; }
.v0 .v3-free h3 em { color: var(--acc-txt); }
.v0 .v3-fic { width: 46px; height: 46px; padding: 7px; box-shadow: none; background: #fff !important; }
.v0 .v3-torque { background: #fff; box-shadow: none; outline: var(--stitch); outline-offset: -6px; }
.v0 .v3-torque .v3-wic { width: 52px; height: 52px; }
.v0 .v3-torque b { font-size: 16.5px; }
.v0 .v3-torque strong { color: var(--acc-txt); font-size: 1em; }
.v0 .v3-trust li::before { content: '✓'; font-size: 10px; font-weight: 700; background: var(--v3-acc-2); color: var(--acc-txt); }
@media (min-width: 900px) {
  .v0 .v3-why3 li { grid-template-columns: 1fr; }
  .v0 .v3-why3 .v3-wic { width: 68px; height: 68px; }
  .v0 .v3-why3 b { font-size: 19px; }
  .v0 .v3-fic { width: 60px; height: 60px; padding: 10px; }
}

/* 색 고르기: 색 동그라미만, 글자 없음 (10/17 사용자) — 이름은 title·aria-label 로만 */
.v0-colors small, .v0-colors button span { display: none !important; }
.v0-colors { gap: 4px; }
.v0-colors button { width: 26px; height: 26px; padding: 0; justify-content: center; }
.v0-colors button i { width: 16px; height: 16px; }

/* ---------- 하위 화면 (10/17) ---------- */
.v0-note { margin: 10px 0 0; padding: 8px 12px 8px 30px; border-radius: 12px; background: rgba(255,255,255,.7); color: var(--ink-2); font-size: 13px; line-height: 1.5; position: relative; }
.v0-note::before { content: '✓'; position: absolute; left: 11px; top: 8px; color: var(--acc-txt); font-weight: 700; }
.v0 .v3-subhd h1 { font-size: 24px; }
@media (min-width: 900px) { .v0-note { display: inline-block; font-size: 13.5px; } .v0-note[hidden] { display: none; } }