/* 시안 B '쇼룸' — Uber 규격: 흑백, 모든 버튼·칩 알약(999px), 카드 16px, 제목 700, 4:3 일러스트, 중간 반전 띠 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.6 var(--font-body)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block}
h1,h2,h3{font-family:var(--font-head);font-weight:700;margin:0;letter-spacing:-.01em;line-height:1.2}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--primary);color:var(--on-primary);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-pill);z-index:99}.skip:focus{left:8px}
.mono{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* 헤더 */
.hdr{background:var(--bg);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border)}
.hdr-in{display:flex;align-items:center;gap:var(--sp-5);min-height:68px}
.logo{font:700 1.375rem/1 var(--font-head);letter-spacing:-.02em}
.logo small{font:500 .75rem var(--font-body);color:var(--text-2);margin-left:4px}
.hdr-nav{display:flex;gap:var(--sp-1)}
.hdr-nav a{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);font-weight:500;font-size:var(--fs-sm)}
.hdr-nav a:hover,.hdr-nav a.on{background:var(--soft)}
.search{flex:1;display:flex;align-items:center;gap:var(--sp-2);height:44px;padding:0 var(--sp-4);background:var(--soft);border-radius:var(--r-pill);max-width:420px;margin-left:auto}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:.9375rem}
.search:focus-within{outline:2px solid var(--focus)}
.hdr-act{display:flex;gap:var(--sp-2);align-items:center}
.pill-btn{height:44px;display:inline-flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-4);border-radius:var(--r-pill);border:0;background:var(--soft);font-weight:500;font-size:var(--fs-sm);cursor:pointer;max-width:240px;white-space:nowrap}
.pill-btn .js-carlabel{overflow:hidden;text-overflow:ellipsis}
.pill-btn:hover{background:var(--pressed)}
.pill-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--text-2);flex:none}
.pill-btn.on{background:var(--primary);color:var(--on-primary)}.pill-btn.on .dot{background:var(--ok)}
.cnt{min-width:22px;height:22px;border-radius:var(--r-pill);background:var(--primary);color:var(--on-primary);font-size:.75rem;display:grid;place-items:center;padding:0 6px}
.round-btn{width:44px;height:44px;border-radius:50%;border:0;background:var(--soft);display:grid;place-items:center;cursor:pointer}
.catnav .wrap{display:flex;gap:var(--sp-2);overflow-x:auto;padding-block:var(--sp-2) var(--sp-3);scrollbar-width:none}
.catnav a{flex:none;padding:6px var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-sm);color:var(--text-2)}
.catnav a:hover{background:var(--soft);color:var(--text)}
.catnav .nav-strong{color:var(--text);font-weight:600;background:var(--soft)}
.demo-note{margin:0;text-align:center;font-size:var(--fs-xs);color:var(--text-2);padding:6px;background:var(--softer)}

/* 버튼 · 입력 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:var(--sp-3) var(--sp-5);border:0;border-radius:var(--r-pill);font-weight:500;font-size:1rem;cursor:pointer;white-space:nowrap;transition:transform .15s var(--ease),background .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-ghost{background:var(--soft);color:var(--text)}.btn-ghost:hover{background:var(--pressed)}
.btn:disabled{opacity:.5;cursor:not-allowed}.btn.block{width:100%}
.inp{width:100%;min-height:52px;padding:var(--sp-3) var(--sp-4);background:var(--soft);border:0;border-radius:0;font-size:1rem;outline-offset:-2px}
textarea.inp{resize:vertical}
.sel{width:100%;min-height:52px;padding:0 var(--sp-4);background:var(--soft);border:0;border-radius:var(--r-pill);font-size:1rem;appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.sel:disabled{opacity:.45}
.chip{min-height:36px;padding:0 var(--sp-3);border:0;border-radius:var(--r-pill);background:var(--soft);font-size:var(--fs-xs);font-weight:500;cursor:pointer}
.chip:hover{background:var(--pressed)}
.tag{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);background:var(--soft);font-size:var(--fs-xs);font-weight:500}
.help{font-size:var(--fs-sm);color:var(--text-2);margin:var(--sp-2) 0}
.spin{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(1turn)}}
.note{padding:var(--sp-4);border-radius:var(--r-lg);background:var(--soft);font-size:var(--fs-sm);margin:var(--sp-3) 0}
.note small{display:block;color:var(--text-2);margin-top:2px}
.note.ok{background:var(--ok-soft)}.note.bad{background:var(--bad-soft)}.note.warn{background:var(--warn-soft)}
.note.ok b{color:var(--ok)}.note.bad b,.note.bad{color:var(--text)}
.note a{text-decoration:underline;font-weight:600}
.ok-t{color:var(--ok)}.bad-t{color:var(--bad)}

/* 홈: 가운데 정렬 대형 제목 + 알약 탭 + 큰 입력 */
.hero{padding-block:var(--sp-7) var(--sp-6)}
.hero-in{max-width:860px;text-align:center}
.eyebrow{font-size:var(--fs-sm);color:var(--text-2);margin:0 0 var(--sp-3);font-weight:500}
.hero .display{font:700 var(--fs-hero)/1.08 var(--font-head);letter-spacing:-.03em}
.seg{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);background:var(--soft);border-radius:var(--r-pill);margin:var(--sp-6) 0 var(--sp-4)}
.seg button{min-height:44px;padding:0 var(--sp-5);border:0;border-radius:var(--r-pill);background:transparent;font-weight:500;cursor:pointer}
.seg button.on{background:var(--surface);box-shadow:var(--shadow)}
.finder{text-align:left;background:var(--surface);border-radius:var(--r-xl);padding:var(--sp-5);box-shadow:var(--shadow);border:1px solid var(--border)}
.f-row{display:flex;gap:var(--sp-2)}
.f-row .inp{flex:1;min-width:0;border-radius:var(--r-pill);padding-inline:var(--sp-5)}
.finder[data-t="vin"] .inp{font-size:1.125rem;letter-spacing:.04em}
.inp.plate{text-align:center;font-weight:600;letter-spacing:.08em}
.samples{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--text-2)}
.where{margin-top:var(--sp-3);font-size:var(--fs-sm)}
.where summary{cursor:pointer;font-weight:500;min-height:36px;display:flex;align-items:center;text-decoration:underline}
.where p{margin:var(--sp-1) 0;color:var(--text-2)}.where b{color:var(--text);margin-right:6px}
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.pick{display:flex;flex-direction:column;gap:6px}
.step{font-size:var(--fs-xs);color:var(--text-2);display:flex;gap:6px;align-items:center;font-weight:500}
.step i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font-size:.6875rem}
.cands{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.cand{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);text-align:left;width:100%;padding:var(--sp-3) var(--sp-4);background:var(--surface);border:0;border-radius:var(--r-lg);cursor:pointer}
.cand:hover{background:var(--pressed)}.cand small{display:block;color:var(--text-2)}
.mycar-wrap{margin-bottom:var(--sp-5)}
.mycar-strip{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);background:var(--soft);border-radius:var(--r-xl)}
.mycar-strip .lbl{font-size:var(--fs-xs);background:var(--primary);color:var(--on-primary);padding:3px 10px;border-radius:var(--r-pill)}
.mycar-strip .go{margin-left:auto;font-weight:600}

.band{padding-block:var(--sp-7)}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}
.band-head h2{font-size:var(--fs-display);letter-spacing:-.02em}
.band-head p{margin:0;color:var(--text-2)}
.link{font-weight:600;text-decoration:underline}
.makes{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.make{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:56px;padding:0 var(--sp-5) 0 var(--sp-2);border:0;border-radius:var(--r-pill);background:var(--soft);cursor:pointer;font-size:1rem}
.make:hover{background:var(--pressed)}
.make .emb{min-width:40px;height:40px;padding:0 8px;border-radius:var(--r-pill);background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font:700 .625rem/1 var(--font-head)}
.make small{color:var(--text-2);font-size:var(--fs-xs)}
.illos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.illo-card{display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);border:1px solid var(--border);transition:transform .2s var(--ease)}
.illo-card:hover{transform:translateY(-3px)}
.illo{width:100%;height:auto;aspect-ratio:4/3;color:var(--illo-ink)}
.illo-bg{fill:var(--illo-bg)}.illo-disc{fill:var(--illo-disc)}.illo-dot{fill:var(--illo-dot)}
.illo-txt{padding:var(--sp-4) var(--sp-5);display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2)}
.illo-txt b{font:700 var(--fs-h3) var(--font-head)}.illo-txt small{color:var(--text-2)}
.pills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.pill{padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);background:var(--soft);font-weight:500}
.pill:hover{background:var(--pressed)}
.band-soft{background:var(--band);color:var(--on-band)}
.band-soft .band-head h2{color:var(--on-band)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);counter-reset:s}
.steps li{counter-increment:s;padding-top:var(--sp-4);border-top:1px solid var(--band-2)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:700 var(--fs-display)/1 var(--font-head);margin-bottom:var(--sp-4)}
.steps b{display:block;font:700 var(--fs-h3) var(--font-head);margin-bottom:var(--sp-2)}
.steps span{color:var(--on-band-2)}
.pbrands{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pbrand{display:inline-flex;gap:var(--sp-2);align-items:baseline;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);border:1px solid var(--border)}
.pbrand:hover{background:var(--soft)}.pbrand b{font:700 .9375rem var(--font-head)}.pbrand small{color:var(--text-2);font-size:var(--fs-xs)}
.promo-dark{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-5);padding:var(--sp-6);border-radius:var(--r-xl);background:var(--band);color:var(--on-band);flex-wrap:wrap}
.promo-dark b{display:block;font:700 var(--fs-h2)/1.25 var(--font-head)}.promo-dark small{color:var(--on-band-2);font-size:var(--fs-body)}
.promo-dark .btn-primary{background:var(--on-band);color:var(--band)}

/* 공통 페이지 */
.page{padding-block:var(--sp-5) var(--sp-section)}
.page.narrow{max-width:860px}
.crumb{font-size:var(--fs-sm);color:var(--text-2);margin:0 0 var(--sp-4)}.crumb a:hover{color:var(--text);text-decoration:underline}
.page-title{font-size:var(--fs-h1);margin:0 0 var(--sp-2)}
.page-sub{color:var(--text-2);margin:0 0 var(--sp-5)}.page-sub a{text-decoration:underline;color:var(--text)}
.empty{padding:var(--sp-6);border-radius:var(--r-xl);background:var(--soft);text-align:center;color:var(--text-2)}
.empty a{color:var(--text);text-decoration:underline;font-weight:600}
.box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.box h2{font-size:var(--fs-h3);margin:0 0 var(--sp-4)}.box h2 small{font:400 var(--fs-xs) var(--font-body);color:var(--text-2);margin-left:var(--sp-2)}

.carhead{display:grid;grid-template-columns:1fr auto;gap:var(--sp-5);background:var(--band);color:var(--on-band);border-radius:var(--r-xl);padding:var(--sp-6)}
.carhead .tag{background:var(--band-2);color:var(--on-band)}
.carhead h1{font-size:var(--fs-display);margin:var(--sp-3) 0;letter-spacing:-.02em}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.carhead-side{display:flex;flex-direction:column;gap:var(--sp-2);min-width:220px}
.carhead .btn-primary{background:var(--on-band);color:var(--band)}
.carhead .btn-ghost{background:var(--band-2);color:var(--on-band)}
.perf{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--on-band-2)}
.perf i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.specs{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-2);margin:0}
.specs div{background:var(--band-2);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4)}.specs dt{font-size:var(--fs-xs);color:var(--on-band-2)}.specs dd{margin:2px 0 0;font-weight:600}
.listing{margin-top:var(--sp-5)}
.facets{display:flex;gap:var(--sp-2);overflow-x:auto;padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);scrollbar-width:none}
.facets h2{display:none}
.facets a{flex:none;display:inline-flex;gap:6px;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);background:var(--soft);font-size:var(--fs-sm);font-weight:500;min-height:40px;align-items:center}
.facets a span{color:var(--text-2)}
.facets a.on{background:var(--primary);color:var(--on-primary)}.facets a.on span{color:var(--on-primary)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.pcard{display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);border:1px solid var(--border);transition:transform .2s var(--ease)}
.pcard:hover{transform:translateY(-3px)}
.pcard-img{position:relative;display:block}
.badge-fit{position:absolute;top:var(--sp-3);left:var(--sp-3);background:var(--primary);color:var(--on-primary);font-size:var(--fs-xs);font-weight:600;padding:4px 10px;border-radius:var(--r-pill)}
.pcard-body{display:flex;flex-direction:column;gap:4px;padding:var(--sp-4)}
.pbrandname{font-weight:700;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;margin:0;font-family:var(--font-head)}
.pname{font-weight:600}
.pno{font-size:var(--fs-xs);color:var(--text-2)}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap}
.price{font:700 1.125rem var(--font-head)}
.stock{font-size:var(--fs-xs);font-weight:500}.stock.kr{color:var(--ok)}.stock.ov{color:var(--text-2)}

.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-7);align-items:start}
.pd-img{border-radius:var(--r-xl);overflow:hidden}
.pd-info h1{font-size:var(--fs-display);margin:var(--sp-2) 0;letter-spacing:-.02em}
.pd-no{font-size:var(--fs-xs);color:var(--text-2);margin:0}
.price.big{font-size:var(--fs-h1);margin:var(--sp-4) 0}
.kv{display:grid;grid-template-columns:130px 1fr;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);padding:var(--sp-4) 0;margin:var(--sp-4) 0;border-top:1px solid var(--border)}
.kv dt{color:var(--text-2)}.kv dd{margin:0}
.qty-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.qty{display:flex;align-items:center;background:var(--soft);border-radius:var(--r-pill);padding:0 4px}
.qty button{width:40px;height:40px;border:0;border-radius:50%;background:transparent;cursor:pointer;font-size:1.125rem}
.qty button:hover{background:var(--pressed)}
.qty input{width:36px;border:0;text-align:center;background:transparent}
.qty.sm button{width:36px;height:36px}
.tabs{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);background:var(--soft);border-radius:var(--r-pill);margin-top:var(--sp-7);max-width:100%;overflow-x:auto}
.tabs button{min-height:44px;padding:0 var(--sp-4);border:0;border-radius:var(--r-pill);background:none;cursor:pointer;font-weight:500;white-space:nowrap}
.tabs button.on{background:var(--surface);box-shadow:var(--shadow)}
.panel{margin-top:var(--sp-4)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-xl)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{text-align:left;font-weight:600;padding:var(--sp-3) var(--sp-4);background:var(--soft)}
.tbl td{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border)}
.tbl tr.mine td{background:var(--softer);font-weight:600}
.tbl a:hover{text-decoration:underline}

.checkout{display:grid;grid-template-columns:1fr 360px;gap:var(--sp-5);align-items:start}
.lines{list-style:none;margin:0;padding:0}
.lines li{display:grid;grid-template-columns:48px 1fr auto auto 36px;gap:var(--sp-3);align-items:center;padding:var(--sp-3) 0;border-bottom:1px solid var(--border)}
.l-ico{width:48px;height:48px;border-radius:50%;background:var(--soft);display:grid;place-items:center}
.l-main{display:flex;flex-direction:column;gap:2px;min-width:0}.l-main small{color:var(--text-2);font-size:var(--fs-xs)}
.fit{font-size:var(--fs-xs);font-weight:600}
.l-price{font-weight:700;min-width:90px;text-align:right}
.x{width:36px;height:36px;border:0;border-radius:50%;background:var(--soft);cursor:pointer}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.f-grid label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);font-weight:500}
.f-grid .full{grid-column:1/-1}
.summary{position:sticky;top:120px}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2);font-size:var(--fs-sm);margin:0}
.summary dt{color:var(--text-2)}.summary dd{margin:0;text-align:right}
.sum{font:700 var(--fs-h1)/1.2 var(--font-head);text-align:right;margin:var(--sp-4) 0}
.done .btn{margin-top:var(--sp-4)}
.garage{list-style:none;margin:0 0 var(--sp-4);padding:0;display:grid;gap:var(--sp-2)}
.garage li{display:flex;gap:var(--sp-2);align-items:center;padding:var(--sp-4) var(--sp-5);background:var(--soft);border-radius:var(--r-xl)}
.garage li span{flex:1}.garage small{display:block;color:var(--text-2);font-size:var(--fs-xs)}
.garage li.cur{background:var(--band);color:var(--on-band)}.garage li.cur small{color:var(--on-band-2)}
.garage li.cur .btn-ghost{background:var(--band-2);color:var(--on-band)}

.ftr{background:var(--band);color:var(--on-band-2);font-size:var(--fs-sm);padding-block:var(--sp-7) var(--sp-5)}
.ftr-logo{font:700 1.75rem var(--font-head);color:var(--on-band);margin:0 0 var(--sp-6)}
.ftr-logo small{font:500 .75rem var(--font-body);color:var(--on-band-2);margin-left:6px}
.ftr-grid{display:grid;grid-template-columns:1fr 1fr 1fr 2fr;gap:var(--sp-5)}
.ftr h2{font:500 var(--fs-sm) var(--font-body);color:var(--on-band);margin-bottom:var(--sp-3)}
.ftr a{display:block;padding:4px 0}.ftr a:hover{color:var(--on-band);text-decoration:underline}
.ftr-tech{border-top:1px solid var(--band-2);padding-top:var(--sp-4);margin-top:var(--sp-6);font-size:var(--fs-xs)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--primary);color:var(--on-primary);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);font-size:var(--fs-sm);opacity:0;pointer-events:none;transition:.2s var(--ease-out);z-index:50;max-width:92vw;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:1100px){.hdr-nav{display:none}.grid{grid-template-columns:repeat(3,1fr)}.specs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){
  .hdr-in{flex-wrap:wrap;gap:var(--sp-2);padding-block:var(--sp-2)}.search{order:3;flex-basis:100%;max-width:none}
  .pill-btn{max-width:150px}
  .picks{grid-template-columns:1fr 1fr}.illos{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}.pd,.checkout{grid-template-columns:1fr}.carhead{grid-template-columns:1fr}.carhead-side{min-width:0}
  .ftr-grid{grid-template-columns:1fr 1fr}.summary{position:static}
}
@media (max-width:520px){.f-row{flex-wrap:wrap}.f-row .btn{width:100%}.seg button{padding:0 var(--sp-3)}.illos,.grid,.picks{grid-template-columns:1fr}.specs{grid-template-columns:repeat(2,1fr)}.f-grid{grid-template-columns:1fr}.lines li{grid-template-columns:1fr auto 36px}.l-ico{display:none}.l-price{grid-column:1}.finder{padding:var(--sp-4)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}