/* v3 B안 — 포근한 파스텔 · 아기자기 (2026-10-17 3차)
   사용자: "B안 가장 좋음, 더 아기자기·귀엽게, 바탕은 더 포근한 파스텔, 매장 플래카드가 분홍이니 홈페이지는 분홍 최대한 줄이기"
   → 크림·오트밀 바탕 + 하늘(간판 사진의 하늘과 어울림)·버터 노랑·민트·연보라, 분홍 없음
   귀여운 요소: 웃는 타이어 친구(제목 앞), 바느질 점선 카드, 몽글한 아이콘 바탕, 물결(스캘럽) 구분선, 살짝 뜨는 카드
   A안(v3.css) 위에 덧씌움 — 문구·기능·짜임은 A안과 같음 */
:root {
  --bg: #FFFFFF; --bg-2: #FBF6EC; --bg-3: #F4ECDD; --line: #EFE6D6;
  --ink: #3F3A36; --ink-2: #6E665E; --ink-3: #A39A8F;
  --brand: #3A86CC; --new: #3A86CC; --good: #3D9A6E; --svc-ic: #3A86CC; --price: #3F3A36;
  --hd-bg: #FFFFFF; --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; --v3-r: 26px;
  --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, .09);
  --stitch: 2px dashed rgba(110, 90, 60, .16);
  --wc1: #FFEAA8; --wc2: #DCEEFB; --wc3: #DDF2E6; --wc4: #DCEEFB; --wc5: #FFEAA8; --wc6: #DDF2E6; --wc7: #FFE7CF; --wc8: #ECE6FA; --wline: #4E4740; --wpt: #3A86CC;
}
body.v3b { background: var(--cream); }
.v3b h2, .v3b .v3-slide-t b, .v3b .v3-free h3, .v3b .v3-why3 b, .v3b .v3-torque b, .v3b .v3-findbtn span, .v3b .v3-subhd h1, .v3b .v3-band b { font-family: 'Jua', 'Pretendard', 'Malgun Gothic', sans-serif; font-weight: 400; letter-spacing: 0; }
.v3b .v3-why3 strong, .v3b .v3-torque strong, .v3b .v3-free h3 em { font-weight: 400; }

/* 웃는 타이어 친구 — 섹션 제목 앞 */
.v3b .v3-sec-h h2::before { content: ''; display: inline-block; width: 26px; height: 26px; margin-right: 7px; vertical-align: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.5' fill='%234E4740'/%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23fff' stroke-width='1.6' stroke-dasharray='2 2.6' opacity='.55'/%3E%3Ccircle cx='16' cy='16' r='8.2' fill='%23FFEAA8'/%3E%3Ccircle cx='13.4' cy='15' r='1.25' fill='%234E4740'/%3E%3Ccircle cx='18.6' cy='15' r='1.25' fill='%234E4740'/%3E%3Cpath d='M13.6 18.2q2.4 2.1 4.8 0' stroke='%234E4740' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='11.4' cy='17.6' r='1.3' fill='%23FFC9A0' opacity='.8'/%3E%3Ccircle cx='20.6' cy='17.6' r='1.3' fill='%23FFC9A0' opacity='.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.v3b .v3-why .v3-sec-h h2::before { animation: v3bWig 3.2s ease-in-out infinite; }
@keyframes v3bWig { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-14deg); } 95% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .v3b .v3-why .v3-sec-h h2::before { animation: none; } }

/* 맨 위 띠: 오트밀 */
.v3b .v3-util, .v3b .v3-util a { color: #6E665E; }
.v3b .v3-util a:hover { color: var(--v3-acc); }
.v3b .v3-slogan b { color: var(--v3-acc); }
.v3b .v3-utlinks .open { color: var(--good); font-weight: 600; }

/* 머리말: 흰 바탕 */
.v3b .v3-hd { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.v3b .v3-logo .logo, .v3b .v3-logo .logo-text b { color: var(--ink); }
.v3b .v3-logo .logo-text small { color: var(--ink-3); }
.v3b .v3-burger i { background: var(--ink); border-radius: 2px; }
.v3b .v3-gnb a { color: var(--ink); z-index: 0; }
.v3b .v3-gnb a::after { background: var(--bt); height: 9px; bottom: 23px; border-radius: 5px; z-index: -1; left: 10px; right: 10px; }
.v3b .v3-hsearch { background: var(--oat); border-radius: 999px; }
.v3b .v3-tel { background: var(--btn-y); color: var(--btn-y-ink); border-radius: 999px; box-shadow: 0 4px 0 var(--btn-y-sh); }
.v3b .v3-tel svg { stroke: var(--btn-y-ink); }
/* 내 차 띠: 연하늘 */
.v3b .v3-carbar { background: var(--v3-dark-2); }
.v3b .v3-mycar { color: var(--ink); }
.v3b .v3-mycar small { color: var(--ink-2); }
.v3b .v3-mycar-ic { background: #fff; }
.v3b .v3-mycar-ic svg { stroke: var(--v3-acc); }
.v3b .v3-msearch { box-shadow: inset 0 0 0 1.5px var(--bd-soft); border-radius: 999px; }
.v3b .v3-carlinks a, .v3b .v3-carlinks button { color: var(--ink); border-color: var(--bd-soft); background: #fff; border-radius: 999px; }
.v3b .v3-carlinks a:hover, .v3b .v3-carlinks button:hover { color: var(--v3-acc); border-color: var(--v3-acc); }
.v3b .v3-mega { box-shadow: 0 24px 40px rgba(110,90,60,.12); }
.v3b .v3-mcol .v3-mtit { border-bottom-color: var(--bt); }
.v3b .v3-drawer-h { background: #fff; border-bottom: 1px solid var(--line); }
.v3b .v3-drawer-h .logo, .v3b .v3-drawer-h .logo-text b { color: var(--ink); }
.v3b .v3-drawer-h button { color: var(--ink); }

/* 버튼: 하늘(주) · 버터(전화·찾기) — 통통한 아래 그림자 */
.v3b .v3-btn { border-radius: 999px; }
.v3b .v3-btn.pri { background: var(--v3-acc); color: #fff; box-shadow: 0 3px 0 var(--acc-sh); }
.v3b .v3-findbtn { background: var(--btn-y); color: var(--btn-y-ink); border-radius: 999px; box-shadow: 0 5px 0 var(--btn-y-sh), 0 12px 24px rgba(110,90,60,.18); }
.v3b .v3-findbtn svg { stroke: var(--btn-y-ink); }

/* 배너: 둥근 카드 + 흰 말풍선 판 (바깥 칸에서 잘라야 넘기는 중에 옆 장이 비치지 않음) */
.v3b .v3-hero { background: transparent; padding: 0; margin: 12px 12px 0; border-radius: var(--v3-r); overflow: hidden; }
.v3b .v3-slide { overflow: hidden; }
.v3b .v3-hero-find { padding: 0 10px 2px; }
.v3b .v3-slide.is-msg { background-image: linear-gradient(0deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 100%), var(--bg); align-items: flex-end; }
.v3b .v3-slide-t { margin: 0 14px 44px; padding: 16px 18px; background: rgba(255,253,247,.96); color: var(--ink); border-radius: 22px; box-shadow: var(--v3-shadow); max-width: 420px; outline: var(--stitch); outline-offset: -7px; }
.v3b .v3-slide-t small { background: var(--bt); color: var(--tag-ink); border-radius: 999px; }
.v3b .v3-slide-t b { font-size: 24px; margin: 8px 0 4px; }
.v3b .v3-slide-t > span { color: var(--ink-2); font-size: 13px; }
.v3b .v3-slide .v3-btn.line { color: var(--ink); border-color: var(--line); background: #fff; }
.v3b .v3-slide-ctl { background: rgba(255,253,247,.9); color: var(--ink); }
.v3b .v3-dots button { background: var(--dot); } .v3b .v3-dots button.on { background: var(--v3-acc); }
.v3b .v3-slide-pause { color: var(--ink); }
@media (min-width: 768px) { .v3b .v3-hero { max-width: 1240px; margin: 18px auto 0; } .v3b .v3-slide-t { margin: 0 40px 56px; padding: 24px 28px; } .v3b .v3-slide-t b { font-size: 34px; } }

/* 약속 칩: 버터 별 */
.v3b .v3-trust li { border: 0; border-radius: 999px; padding-left: 36px; position: relative; background: #fff; box-shadow: var(--v3-shadow); }
.v3b .v3-trust li::before { content: '★'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--bt); color: var(--star); font-size: 10px; display: grid; place-items: center; }

/* 섹션: 오트밀 칸 위에 몽글한 물결 구분선 */
.v3b .v3-gray { background: var(--oat); position: relative; }
.v3b .v3-gray::before { content: ''; position: absolute; left: 0; right: 0; top: -11px; height: 12px;
  background: radial-gradient(circle at 12px 12px, var(--oat) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x; }
.v3b .v3-gray + .v3-gray::before { display: none; }
.v3b .v3-sec-h h2 em { color: inherit; background: linear-gradient(transparent 58%, var(--bt) 58%, var(--bt) 92%, transparent 92%); padding: 0 3px; }
.v3b .v3-more { color: var(--v3-acc); font-weight: 600; }

/* 바로가기: 몽글몽글 파스텔 (칸마다 다른 색, 분홍 없음) */
.v3b .v3-gic { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; box-shadow: none; transition: transform .2s; }
.v3b .v3-gate a:hover .v3-gic, .v3b .v3-gate button:hover .v3-gic { transform: translateY(-3px) rotate(-4deg); }
.v3b .v3-gate li:nth-child(5n+1) .v3-gic { background: var(--sk); }
.v3b .v3-gate li:nth-child(5n+2) .v3-gic { background: var(--bt); }
.v3b .v3-gate li:nth-child(5n+3) .v3-gic { background: var(--mt); }
.v3b .v3-gate li:nth-child(5n+4) .v3-gic { background: var(--lv); }
.v3b .v3-gate li:nth-child(5n+5) .v3-gic { background: var(--pc); }
.v3b .v3-gic svg { stroke: var(--v3-dark); }

/* 카드: 테두리 없이 그림자, 둥글게, 살짝 뜨기 */
.v3b .rcard, .v3b .v3-makers button, .v3b .v3-inchgrid a, .v3b .v3-sizechips button, .v3b .v3-svc a, .v3b .btile .bwrap { border: 0 !important; box-shadow: var(--v3-shadow); transition: transform .2s, box-shadow .2s; }
.v3b .rcard:hover, .v3b .v3-makers button:hover, .v3b .v3-inchgrid a:hover, .v3b .v3-svc a:hover { transform: translateY(-3px); }
.v3b .rcard { border-radius: 22px; }
.v3b .rcard i { background: var(--bt); color: var(--tag-ink); border-radius: 999px; }
.v3b .v3-makers button, .v3b .v3-inchgrid a, .v3b .v3-sizechips button { border-radius: 22px; }
.v3b .v3-inchgrid a:hover { color: var(--v3-acc); box-shadow: 0 0 0 2px var(--v3-acc); }
.v3b .v3-svc a { border-radius: 22px; }
.v3b .v3-tips a { background: #fff; box-shadow: var(--v3-shadow); }
.v3b .v3-tips li.big a { background: var(--sk); color: var(--ink); background-image: radial-gradient(circle at 90% 28%, var(--bt) 0 34px, transparent 35px), radial-gradient(circle at 90% 28%, rgba(255,255,255,.55) 0 62px, transparent 63px); }
.v3b .v3-tips li.big a * { color: var(--ink); }
.v3b .v3-tips li.big .v3-go { color: var(--v3-acc); }

/* 중고 장점: 바느질 점선 패치 카드 */
.v3b .v3-why3 li { border: 0; box-shadow: var(--v3-shadow); outline: var(--stitch); outline-offset: -7px; }
.v3b .v3-why3 li.w1 { background: var(--t-y); } .v3b .v3-why3 li.w2 { background: var(--t-b); } .v3b .v3-why3 li.w3 { background: var(--t-g); }
.v3b .v3-why3 small { color: var(--ink-3); }
.v3b .v3-free { background: #fff; box-shadow: var(--v3-shadow); outline: var(--stitch); outline-offset: -7px; }
.v3b .v3-fic { box-shadow: 0 3px 10px rgba(110,90,60,.1); border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; }
.v3b .v3-fic.f4 { background: var(--t-b); } .v3b .v3-fic.f5 { background: var(--t-y); } .v3b .v3-fic.f6 { background: var(--t-g); } .v3b .v3-fic.f7 { background: var(--t-o); } .v3b .v3-fic.f8 { background: var(--t-v); }
.v3b .v3-torque { background: var(--sk); color: var(--ink); outline: var(--stitch); outline-offset: -7px; }
.v3b .v3-torque svg { stroke: var(--v3-dark); } .v3b .v3-torque .f0 { fill: var(--bt); }
.v3b .v3-torque small { color: var(--v3-acc); }
.v3b .v3-torque p { color: var(--ink-2); }

/* 이용 순서·안내 띠·매장 안내 */
.v3b .v3-steps li { background: #fff; box-shadow: var(--v3-shadow); }
.v3b .v3-stepn, .v3b .v3-steps li:first-child .v3-stepn { background: var(--sk); color: var(--acc-sh); }
.v3b .dock .call { background: var(--v3-acc); color: #fff; border: 0; outline: 0; box-shadow: 0 4px 0 var(--acc-sh), 0 10px 22px var(--acc-glow); }
.v3b .v3-steps li:nth-child(2) .v3-stepn { background: var(--bt); color: var(--tag-ink); }
.v3b .v3-steps li:nth-child(3) .v3-stepn { background: var(--mt); color: #2E7D57; }
.v3b .v3-band { background: var(--bt); color: var(--ink); }
.v3b .v3-band b, .v3b .v3-band span { color: var(--ink); }
.v3b .v3-band .v3-btn.pri { background: var(--v3-acc); color: #fff; }
.v3b .v3-band .v3-btn span { color: #fff; }
.v3b .v3-ibox { background: #fff; box-shadow: var(--v3-shadow); outline: var(--stitch); outline-offset: -7px; }
.v3b .v3-big .open { color: var(--good); }

/* 메뉴별 화면 머리 */
.v3b .v3-subhd { background: var(--v3-dark-2); color: var(--ink); }
.v3b .v3-crumb, .v3b .v3-crumb a { color: var(--ink-2); }
.v3b .v3-subtabs a, .v3b .v3-subtabs button { color: var(--ink); border-color: var(--bd-soft); background: #fff; border-radius: 999px; }
.v3b .v3-subtabs a.on { background: var(--v3-acc); color: #fff; border-color: var(--v3-acc); }

/* 꼬리말: 오트밀 + 물결 */
.v3b .v3-foot { background: var(--oat); color: var(--ink-2); position: relative; }
.v3b .v3-foot::before { content: ''; position: absolute; left: 0; right: 0; top: -11px; height: 12px;
  background: radial-gradient(circle at 12px 12px, var(--oat) 11.5px, transparent 12px) 0 0 / 24px 12px repeat-x; }
.v3b .v3-foot .logo, .v3b .v3-foot .logo-text b { color: var(--ink); } .v3b .v3-foot .logo-text small { color: var(--ink-3); }
.v3b .v3-foot-links a { color: var(--ink); }
.v3b .v3-foot-top { border-bottom-color: var(--line); }
.v3b .v3-foot .copy { color: var(--ink-3); }

/* 배너 사진: 휴대폰은 사진 위 흰 말풍선, PC는 왼쪽 오트밀 바탕이 사진으로 부드럽게 번짐 */
@media (min-width: 768px) {
  .v3b .v3-slide.is-photo { --slide-fill: var(--oat); background-image: linear-gradient(90deg, var(--oat) 0, var(--oat) 46%, transparent 68%), var(--bg); background-size: 100% 100%, 56% auto; background-position: 0 0, right center; }
  .v3b .v3-slide.is-photo .v3-slide-t { align-self: center; margin-bottom: 0; }
}