@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap");
:root {
  --blue: #3158ef;
  --ink: #172338;
  --muted: #748092;
  --line: #e6eaf0;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; font-family: "Noto Sans KR", sans-serif; color: var(--ink); background: #fff }
button, input, select { font: inherit }
button, a { cursor: pointer }
a { color: inherit; text-decoration: none }
button { border: 0 }
header { height: 92px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 45px; max-width: 1240px; margin: auto; padding: 0 24px }
.logo { font-size: 31px; font-weight: 900; letter-spacing: -2px; color: var(--blue) }
.logo small { font-size: 11px; letter-spacing: 2px; display: block; margin-top: -8px }
.nav { display: flex; gap: 30px; font-size: 14px; font-weight: 700; margin-left: auto }
.btn { border-radius: 10px; background: var(--blue); color: white; padding: 15px 23px; font-weight: 700; display: inline-block }
.outline { background: white; color: var(--ink); border: 1px solid var(--line) }
.wrap { max-width: 1192px; margin: auto; padding: 0 24px }
.hero { margin: 28px auto 0; position: relative; border-radius: 26px; overflow: hidden; min-height: 460px; background: #eaf0f8 }
.hero img { position: absolute; width: 64%; height: 100%; right: 0; object-fit: cover }
.hero:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #eaf0f8 31%, #eaf0f8e8 42%, transparent 70%) }
.hero-copy { position: relative; z-index: 1; padding: 62px 48px }
.eyebrow { font-size: 12px; letter-spacing: 2px; font-weight: 800; color: var(--blue) }
h1 { font-size: 47px; line-height: 1.35; letter-spacing: -2.5px; margin: 18px 0 }
p { color: var(--muted); line-height: 1.8 }
.hero p { margin: 0 0 28px }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); padding: 25px 0; border-bottom: 1px solid var(--line) }
.quick a { padding: 14px 22px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 14px }
.quick a:last-child { border: 0 }
.icon { background: #eef2ff; color: var(--blue); width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 23px }
.quick strong { font-size: 16px }
.quick small { display: block; color: var(--muted); font-size: 11px; margin-top: 5px }
section { padding: 64px 0 0 }
.heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px }
h2 { font-size: 29px; letter-spacing: -1.2px; margin: 8px 0 }
.heading p { margin: 4px 0; font-size: 14px }
.search { display: flex; border: 1px solid var(--line); border-radius: 12px; padding: 4px; max-width: 390px; margin-bottom: 24px }
.search input { border: 0; outline: 0; padding: 10px; width: 100%; min-width: 0 }
.search button { border-radius: 8px; background: var(--ink); color: white; width: 55px }
.tabs, .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px }
.tabs button { padding: 12px 22px; border-radius: 10px; background: #f3f5f8; color: #667084; font-weight: 700 }
.tabs button.active { background: var(--ink); color: white }
.chips button { background: white; border: 1px solid var(--line); border-radius: 30px; padding: 8px 18px; font-size: 13px }
.chips button.active { background: #edf1ff; border-color: var(--blue); color: var(--blue) }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: 0.2s; background: white }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px #182c4c10 }
.photo { height: 160px; position: relative; background: #f3f5f7 }
.photo img { width: 100%; height: 100%; object-fit: cover }
.tag { position: absolute; left: 12px; top: 12px; background: white; padding: 5px 9px; border-radius: 6px; font-size: 10px; font-weight: 700 }
.info { padding: 20px }
.brand { font-size: 11px; color: var(--muted) }
h3 { font-size: 19px; margin: 4px 0 14px }
.price { font-size: 20px; font-weight: 800; color: var(--blue) }
.price small { font-size: 11px; font-weight: 500; color: var(--muted) }
.condition { font-size: 11px; color: var(--muted); margin: 8px 0 18px }
.card button { width: 100%; padding: 11px; border-radius: 8px; background: #eef2ff; color: var(--blue); font-size: 13px; font-weight: 700 }
.notice { font-size: 11px; color: var(--muted); margin-top: 16px }
.banner { margin-top: 65px; background: #172744; color: white; border-radius: 20px; display: flex; justify-content: space-between; align-items: center; padding: 32px 38px }
.banner h2 { font-size: 26px }
.banner p { color: #b7c5da; font-size: 13px; margin: 8px 0 }
.guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.step { background: #f6f8fb; padding: 28px; border-radius: 14px }
.step b { color: var(--blue); font-size: 12px }
.step p { font-size: 13px }
.faq { border-bottom: 1px solid var(--line); padding: 19px 0; font-size: 14px }
.faq summary { cursor: pointer; font-weight: 700 }
.faq p { font-size: 13px }
.consult { margin: 64px 0; background: #f0f4ff; border-radius: 22px; padding: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px }
.consult h2 { font-size: 32px }
.consult p { font-size: 13px }
form { display: grid; gap: 12px }
input, select { padding: 14px; border: 1px solid #dce2ed; border-radius: 9px; background: white; width: 100% }
.tel_wrap { display: flex; align-items: center; gap: 8px; }
label { font-size: 12px; color: #647088 }
label input { width: auto }
footer { background: #f6f7f9; padding: 35px 0 100px; font-size: 11px; color: var(--muted) }
footer .logo { font-size: 25px }
footer p { max-width: 850px }
.mobilebar { display: none }
dialog { border: 0; border-radius: 20px; width: min(480px, 92vw); padding: 30px; box-shadow: 0 30px 100px #0003 }
dialog::backdrop { background: #101c3280 }
.close { float: right; background: #f1f3f7; border-radius: 50%; width: 32px; height: 32px }
.empty { padding: 50px; text-align: center; grid-column: 1/-1; color: var(--muted) }
@media (max-width: 800px) {
  header { height: 75px; gap: 10px }
  .nav { gap: 16px; font-size: 12px }
  header>.btn { display: none }
  .logo { font-size: 27px }
  .wrap { padding: 0 18px }
  .hero { margin-top: 16px; min-height: 520px }
  .hero img { width: 100%; height: 58%; top: 42% }
  .hero:after { background: linear-gradient(#eaf0f8 40%, transparent 85%) }
  .hero-copy { padding: 30px 25px }
  h1 { font-size: 34px }
  .hero p { font-size: 13px; margin-bottom: 18px }
  .quick { grid-template-columns: 1fr 1fr; padding: 15px 0 }
  .quick a { padding: 12px 5px; border: 0 }
  .quick strong { font-size: 14px }
  .quick small { font-size: 10px }
  .icon { width: 37px; height: 37px }
  section { padding-top: 42px }
  h2 { font-size: 24px }
  .heading p { font-size: 12px }
  .heading>a { font-size: 12px }
  .grid { grid-template-columns: 1fr 1fr; gap: 10px }
  .photo { height: 125px }
  .info { padding: 14px }
  .price { font-size: 17px }
  h3 { font-size: 17px }
  .tabs button { padding: 10px 14px; font-size: 12px }
  .chips button { padding: 7px 12px; font-size: 11px }
  .banner { padding: 25px; display: block; margin-top: 40px }
  .banner .btn { margin-top: 15px }
  .guide { grid-template-columns: 1fr; gap: 10px }
  .step { padding: 22px }
  .step h3 { margin: 10px 0 }
  .consult { grid-template-columns: 1fr; padding: 25px; gap: 15px }
  .mobilebar { display: grid; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 18px; background: #fffffff2; border-top: 1px solid var(--line); z-index: 5 }
  .mobilebar .btn { width: 100%; text-align: center; padding: 13px }
  .nav a:last-child { display: none }
}
.photo { background: linear-gradient(140deg, #f7f9fc, #eef2f7); display: flex; align-items: center; justify-content: center }
.photo img { object-fit: contain; padding: 20px 10px }
.image-fallback { color: var(--muted); font-size: 15px; text-align: center }
.image-fallback small { font-size: 11px }
.card .model-link { background: none; color: var(--ink); text-align: left; padding: 0; width: auto; font-size: 19px; font-weight: 800 }
.results-line { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; color: var(--muted); font-size: 12px }
.results-line select { width: 140px; padding: 9px }
.detailphoto { width: 100%; height: 220px; object-fit: contain; background: #f5f7fb; border-radius: 12px }
.detailprice { display: flex; flex-direction: column; gap: 5px }
.detailprice small { color: var(--muted); font-size: 12px }
.detailprice strong { color: var(--blue); font-size: 30px }
.specs { margin: 20px 0 }
.specs div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 11px 0; font-size: 13px }
.specs dt { color: var(--muted) }
.specs dd { margin: 0; font-weight: 700 }
dialog { max-height: 90vh; overflow: auto }
.card .condition { min-height: 18px }
@media (max-width: 800px) {
  .card .model-link { font-size: 16px }
  .photo img { padding: 22px 4px }
  .brand { display: block; min-height: 33px }
  .detailphoto { height: 170px }
}
.review-state { border: 1px solid var(--line); border-radius: 30px; padding: 8px 16px; font-size: 12px; color: var(--muted) }
.review-empty { display: grid; grid-template-columns: 1fr 1.2fr; background: #f6f8fb; border-radius: 20px; overflow: hidden; min-height: 290px }
.review-art { position: relative; background: #e9efff; padding: 32px 40px; color: var(--blue); display: flex; flex-direction: column; justify-content: center }
.review-quote { position: absolute; right: 25px; top: -20px; font-family: Georgia, serif; font-size: 200px; opacity: 0.1 }
.review-word { font-size: 40px; line-height: 1.1; letter-spacing: -1px; font-weight: 900; z-index: 1 }
.review-mark { font-size: 10px; letter-spacing: 2px; margin-top: 24px }
.review-message { padding: 42px }
.review-message h3 { font-size: 25px; line-height: 1.5; margin: 12px 0 }
.review-message p { font-size: 13px }
.pending-badge { font-size: 11px; background: white; border: 1px solid var(--line); border-radius: 20px; padding: 7px 13px; display: inline-block; color: var(--muted) }
.finance-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px }
.finance-item { border: 1px solid var(--line); border-radius: 12px; min-height: 98px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: white }
.finance-mark { font-size: 18px; letter-spacing: -0.8px; font-weight: 900 }
.finance-item strong { font-size: 12px; color: #566174 }
@media (max-width: 800px) {
  .review-empty { grid-template-columns: 1fr }
  .review-art { min-height: 190px; padding: 28px }
  .review-word { font-size: 36px }
  .review-message { padding: 26px }
  .review-message h3 { font-size: 23px }
  .finance-grid { grid-template-columns: repeat(2, 1fr); gap: 9px }
  .finance-item { min-height: 85px }
  .finance-mark { font-size: 17px }
  .review-state { display: none }
}
.hero img.hero-slide { opacity: 0; transition: opacity 0.65s ease; pointer-events: none }
.hero img.hero-slide.current { opacity: 1 }
.hero-controls { position: absolute; bottom: 24px; left: 48px; z-index: 2; display: flex; align-items: center; gap: 10px }
.slide-arrow, .slide-pause { width: 32px; height: 32px; border-radius: 50%; background: #ffffffd9; color: var(--ink); border: 1px solid #d8dfec }
.slide-dots { display: flex; align-items: center; gap: 7px; padding: 0 5px }
.slide-dot { padding: 0; min-width: 12px; width: 12px; height: 12px; border-radius: 12px; background: #a8b5cd; transition: 0.2s }
.slide-dot.active { background: var(--blue); width: 26px }
.slide-count { font-size: 11px; margin-left: 5px; color: #52617b; font-weight: 700 }
.hero button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px }
@media (max-width: 800px) {
  .hero-controls { left: 25px; bottom: 18px; background: #ffffffe6; padding: 7px 10px; border-radius: 30px }
  .hero-copy { padding-bottom: 80px }
}
@media (prefers-reduced-motion: reduce) {
  .hero img.hero-slide { transition: none }
}
/* Separate text and slideshow panels. */
.hero { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 20px; min-height: 440px; background: transparent; border-radius: 0; overflow: visible }
.hero:after { display: none }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #eaf0f8; border: 1px solid #e1e8f4; border-radius: 24px; padding: 42px 34px; min-width: 0 }
.hero h1 { font-size: 40px; letter-spacing: -2px }
.hero-media { position: relative; min-height: 440px; border-radius: 24px; overflow: hidden; background: #dce4ee }
.hero .hero-media img.hero-slide { inset: 0; width: 100%; height: 100%; object-fit: cover }
.hero-controls { left: 20px; right: auto; bottom: 20px; background: #fffffff0; border-radius: 30px; padding: 7px 10px; gap: 8px; box-shadow: 0 3px 18px #17233812 }
.hero .hero-copy .btn { margin-top: 0 }
@media (max-width: 1000px) and (min-width: 801px) {
  .hero h1 { font-size: 33px }
  .hero-copy { padding: 30px 25px }
}
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 14px; min-height: 0 }
  .hero-copy { padding: 30px 25px; border-radius: 20px }
  .hero h1 { font-size: 34px; margin: 15px 0 }
  .hero-media { min-height: 0; aspect-ratio: 16/10; border-radius: 20px }
  .hero .hero-media img.hero-slide { top: 0; height: 100%; width: 100% }
  .hero-controls { left: 14px; bottom: 14px; padding: 5px 8px; gap: 6px }
  .hero .slide-arrow, .hero .slide-pause { width: 29px; height: 29px }
}
/* Main copy : photograph = 1 : 2, with separate left contact banner. */
@media (min-width: 801px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) }
  .hero-copy { padding: 34px 25px }
  .hero h1 { font-size: 32px; line-height: 1.42; letter-spacing: -1.6px }
  .hero-copy .eyebrow { font-size: 10px; letter-spacing: 1.2px }
  .hero-copy p { font-size: 13px }
  .hero-copy .btn { padding: 14px 17px; font-size: 14px }
}
.left-banner { position: fixed; top: 145px; right: calc(50% + 618px); width: 132px; z-index: 4 }
.side-promo { display: flex; flex-direction: column; align-items: flex-start; padding: 19px 15px; background: var(--blue); color: white; border-radius: 16px; box-shadow: 0 10px 28px #3158ef20 }
.side-brand { font-size: 11px; letter-spacing: 1.5px; font-weight: 800 }
.side-symbol { display: grid; place-items: center; background: #ffffff20; border: 1px solid #ffffff35; border-radius: 50%; width: 42px; height: 42px; font-size: 24px; margin: 22px 0 14px }
.side-promo strong { font-size: 20px; line-height: 1.5; letter-spacing: -0.8px }
.side-caption { font-size: 9px; color: #d9e2ff; margin: 13px 0 18px }
.side-action { font-size: 10px; font-weight: 700; border-top: 1px solid #ffffff40; padding-top: 13px; width: 100% }
.side-phone { display: block; padding: 16px 12px; text-align: center; background: white; border: 1px solid var(--line); border-radius: 14px; margin-top: 10px; box-shadow: 0 5px 20px #17233808 }
.side-phone span { font-size: 11px; color: var(--muted); display: block; margin-bottom: 7px }
.side-phone strong { font-size: 25.5px; line-height: 1.5; color: var(--ink) }
@media (max-width: 1500px) {
  .left-banner { display: none }
}
@media (prefers-reduced-motion: no-preference) {
  .side-promo { transition: transform 0.2s }
  .side-promo:hover { transform: translateY(-3px) }
}
/* Reference filter layout: underline tabs and pale red selected budget. */
#cars .heading { margin-bottom: 22px }
#cars .heading h2 { font-size: 29px; font-weight: 800; letter-spacing: -1.2px }
#cars .heading p { color: #49657d }
#categories { display: flex; gap: 20px; border-bottom: 1px solid #e3e7ed; margin: 0 0 12px; padding: 0; flex-wrap: nowrap; overflow-x: auto }
#categories button { position: relative; flex: 0 0 auto; border-radius: 0; background: transparent; color: #73808c; padding: 13px 16px 17px; font-size: 15px; font-weight: 600; white-space: nowrap }
#categories button.active { color: #3158ef; background: transparent }
#categories button.active:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #3158ef }
#budgets { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 22px; overflow-x: auto; padding-bottom: 3px }
#budgets[hidden] { display: none }
#budgets button { flex: 0 0 auto; background: #f2f4f6; border: 0; border-radius: 10px; color: #526477; padding: 13px 20px; font-size: 13px; white-space: nowrap }
#budgets button.active { color: #3158ef; background: #edf1ff; font-weight: 700 }
#categories button:focus-visible, #budgets button:focus-visible { outline: 2px solid #3158ef; outline-offset: -3px }
#cars .search { margin: 0 0 14px; max-width: 390px }
#cars .results-line { margin: 12px 0 20px }
@media (max-width: 800px) {
  #cars .heading h2 { font-size: 25px }
  #categories { gap: 5px }
  #categories button { padding: 13px 14px 16px; font-size: 14px }
  #budgets button { padding: 12px 17px; font-size: 12px }
}
@media (min-width: 801px) {
  #categories { gap: 14px }
  #categories button { padding-left: 18px; padding-right: 18px }
}
#no-deposit, #imported { margin-top: 42px; padding-top: 38px; border-top: 1px solid var(--line) }
#no-deposit .heading h2, #imported .heading h2 { font-size: 27px }
#no-deposit .heading p, #imported .heading p { font-size: 13px }
@media (max-width: 800px) {
  #no-deposit, #imported { margin-top: 30px; padding-top: 28px }
  #no-deposit .heading h2, #imported .heading h2 { font-size: 24px }
}
/* Consistent vehicle cards across all three collections. */
.card { display: flex; flex-direction: column; border-radius: 12px }
.card-heading { padding: 18px 17px 10px }
.card-heading h3 { margin: 0 0 9px; line-height: 1.4 }
.card .card-heading .model-link { font-size: 16px; line-height: 1.4 }
.card .price { color: #3158ef; font-size: 24px; white-space: nowrap; letter-spacing: -0.8px }
.card .price small { font-size: 10px; letter-spacing: 0 }
.price-unit { font-size: 15px }
.card .condition { margin: 6px 0 0; font-size: 11px; min-height: 0 }
.card .photo { height: 155px; border-radius: 0; background: #f5f6f8 }
.card .photo img { padding: 24px 8px 8px }
.card .tag { font-size: 9px; top: 8px; left: 10px; padding: 4px 7px }
.card .info { padding: 12px 15px 16px; display: flex; flex: 1; flex-direction: column }
.card-spec { font-size: 10px; color: #7d8794; line-height: 1.6; margin: 0 0 12px; min-height: 32px }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto }
.card .card-actions button { padding: 11px 4px; border-radius: 6px; font-size: 12px; font-weight: 700 }
.card .card-actions .card-estimate { background: white; border: 1px solid #dce2eb; color: #586b80 }
.card .card-actions .card-consult { background: #3158ef; color: white }
.card button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px }
@media (max-width: 800px) {
  .card-heading { padding: 14px 11px 9px }
  .card .card-heading .model-link { font-size: 14px }
  .card .price { font-size: 19px }
  .price-unit { font-size: 12px }
  .card .price small { font-size: 9px }
  .card .photo { height: 125px }
  .card .info { padding: 11px }
  .card-actions { gap: 5px }
  .card .card-actions button { font-size: 11px; padding: 10px 3px }
  .card-spec { min-height: 32px; font-size: 9px }
}
.finance-marquee { overflow: hidden; display: grid; gap: 14px; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent) }
.finance-lane { overflow: hidden; padding: 2px 0 }
.finance-track { display: flex; width: max-content; animation: finance-flow 34s linear infinite; will-change: transform }
.finance-track.reverse { animation-direction: reverse; animation-duration: 38s }
.finance-group { display: flex; flex-shrink: 0; gap: 14px; padding-right: 14px }
.finance-item { flex: 0 0 184px; width: 184px; min-height: 104px; background: white; border-color: #e5eaf1; border-radius: 14px }
.finance-mark { font-size: 21px }
.finance-item strong { font-size: 13px }
.finance-controls { display: flex; justify-content: flex-end; margin-top: 14px }
.finance-controls button { border: 1px solid var(--line); border-radius: 20px; padding: 8px 13px; background: white; color: var(--muted); font-size: 11px }
.finance-marquee:hover .finance-track, .finance-marquee.paused .finance-track { animation-play-state: paused }
@keyframes finance-flow {
  from { transform: translateX(0) }
  to { transform: translateX(-50%) }
}
@media (max-width: 800px) {
  .finance-marquee { gap: 10px }
  .finance-group { gap: 10px; padding-right: 10px }
  .finance-item { width: 145px; flex-basis: 145px; min-height: 88px }
  .finance-mark { font-size: 18px }
  .finance-item strong { font-size: 11px }
}
@media (prefers-reduced-motion: reduce) {
  .finance-track, .finance-track.reverse { animation: none; transform: none }
  .finance-lane { overflow-x: auto }
  .finance-group[aria-hidden="true"] { display: none }
  .finance-marquee { mask-image: none }
  .finance-controls { display: none }
}
.side-promo.subscriber-promo { padding: 18px 12px 12px; background: linear-gradient(155deg, #2348d8, #12349e); align-items: center; text-align: center; overflow: hidden; border-radius: 16px }
.subscriber-promo .side-brand { font-size: 11px; letter-spacing: 1.8px; color: white }
.subscriber-label { font-size: 9px; border: 1px solid #c4d1ff80; background: #ffffff15; color: #e2e9ff; border-radius: 20px; padding: 4px 9px; margin: 13px 0 10px; font-weight: 700 }
.subscriber-promo>strong { font-size: 19px; line-height: 1.5; letter-spacing: -0.7px; color: white }
.subscriber-promo>strong em { font-style: normal; color: #ffe36a; font-size: 33px; line-height: 1.35; display: inline-block; margin-top: 2px }
.subscriber-photo { width: calc(100% + 24px); height: 145px; position: relative; margin: 12px -12px 0; overflow: hidden; background: #e3e9f2 }
.subscriber-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block }
.subscriber-photo>span { position: absolute; bottom: 5px; right: 6px; font-size: 8px; color: white; text-shadow: 0 1px 3px #000 }
.subscriber-promo .side-caption { font-size: 9px; line-height: 1.8; margin: 12px 0; color: #e1e8ff; letter-spacing: -0.3px }
.subscriber-promo .side-action { border: 0; background: #ffe36a; color: #17368e; border-radius: 7px; padding: 10px 3px; font-size: 11px; font-weight: 800 }
.subscriber-promo:hover .side-action { background: #ffed9a }
.site-header { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 390px) minmax(240px, 1fr); gap: 24px; align-items: center; height: 88px; max-width: 1240px; margin: auto; padding: 0 24px; border-bottom: 1px solid var(--line) }
.header-brand { display: flex; align-items: center; gap: 18px; min-width: 0 }
.header-brand .logo { flex-shrink: 0 }
.header-description { border-left: 1px solid var(--line); padding-left: 17px; font-size: 11px; color: var(--muted); white-space: nowrap }
.header-search { display: flex; align-items: center; gap: 0; border: 1px solid #3158ef; border-radius: 12px; padding: 0 10px 0 15px; height: 45px; background: white; box-shadow: 0 0 0 4px #3158ef07 }
.header-search input { border: 0; background: none; padding: 0; outline: none; border-radius: 0; min-width: 0; height: 100%; font-size: 12px }
.header-search button { background: none; padding: 7px; color: #58677d; display: grid; place-items: center; flex-shrink: 0 }
.header-contact { display: flex; justify-content: flex-end; align-items: center; gap: 18px; white-space: nowrap }
.header-phone { font-size: 19.5px; font-weight: 700; color: #5e6a7d }
.header-phone span { font-size: 27px; font-weight: 400; margin-right: 3px }
.header-consult { background: #3158ef; color: white; font-size: 12px; font-weight: 800; padding: 12px 17px; border-radius: 9px }
.subscriber-photo { height: 150px }
.subscriber-photo img { object-position: center 30% }
@media (max-width: 1050px) and (min-width: 801px) {
  .site-header { grid-template-columns: 1fr 1.2fr 1fr; gap: 16px }
  .header-description { display: none }
  .header-contact { gap: 10px }
  .header-phone { font-size: 16.5px }
  .header-consult { padding: 11px 12px }
}
@media (max-width: 800px) {
  .site-header { height: auto; min-height: 120px; grid-template-columns: 1fr 1fr; gap: 14px; padding: 15px 18px }
  .header-brand { gap: 10px }
  .header-description { display: none }
  .header-contact { gap: 10px }
  .header-phone { font-size: 16.5px }
  .header-phone span { display: none }
  .header-consult { padding: 10px 12px; font-size: 11px }
  .header-search { grid-column: 1/-1; grid-row: 2; height: 42px; width: 100% }
  .header-brand .logo { font-size: 27px }
  .hero { margin-top: 16px }
}
.hero h1 { color: #3158ef }
.hero-copy p { color: #172338 }
.hero .hero-media { aspect-ratio: 1681/936; min-height: 0 }
.hero .hero-media img.hero-slide { object-fit: contain; background: #edf1ff }
@media (min-width: 801px) {
  .hero { align-items: stretch }
  .hero-media { height: auto }
}
.dd-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.dd-review { border: 1px solid #e6eaf0; border-radius: 16px; overflow: hidden; background: #fff; transition: transform 0.2s, box-shadow 0.2s }
.dd-review:hover { transform: translateY(-4px); box-shadow: 0 12px 30px #17233812 }
.dd-review-photo { position: relative; aspect-ratio: 4/3; background: #edf1f6; overflow: hidden }
.dd-review-photo img { width: 100%; height: 100%; object-fit: cover }
.dd-review-photo>span { position: absolute; top: 12px; left: 12px; background: #fffe; padding: 5px 9px; border-radius: 5px; font-size: 11px }
.dd-review-body { padding: 20px }
.dd-review-body>small { color: #667084; font-size: 12px }
.dd-review-body h3 { font-size: 18px; line-height: 1.5; margin: 8px 0 }
.dd-review-body p { font-size: 13px; margin: 0 0 20px; line-height: 1.7 }
.dd-review-meta { display: flex; justify-content: space-between; border-top: 1px solid #edf0f4; padding-top: 14px; font-size: 12px }
.dd-review-meta>span:last-child { font-weight: 800; color: #3158ef }
.dd-review-meta small { font-weight: 400; color: #748092 }
@media (max-width: 800px) {
  .dd-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
  .dd-review-body { padding: 14px }
}
@media (max-width: 480px) {
  .dd-review-grid { grid-template-columns: 1fr }
  .dd-review-photo { aspect-ratio: 4/3 }
  #reviews .heading { align-items: center }
  #review-more { padding: 10px; font-size: 12px }
}
#reviews { background: #f6fbfe; padding: 55px 28px; margin-top: 60px; border-radius: 20px }
.delivery-heading { text-align: center; margin-bottom: 44px }
.delivery-heading>span { font-size: 14px; font-weight: 800; color: #171717 }
.delivery-heading b { color: #1479a6 }
.delivery-heading h2 { font-size: 28px; margin: 12px 0 }
.delivery-heading p { font-size: 13px; color: #888 }
.delivery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px }
.delivery-card { background: white; border: 1px solid #d9d9d9; border-radius: 0 0 15px 15px; overflow: hidden }
.delivery-card>img { display: block; width: 100%; aspect-ratio: 328/293; object-fit: cover }
.delivery-card>p { margin: 0; padding: 16px 15px; min-height: 82px; color: #333; font-size: 12px; line-height: 1.8 }
.delivery-meta { padding: 18px 15px; border-top: 1px solid #ddd; display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 11px; color: #171717 }
.delivery-meta strong span { color: #ccc; margin: 0 5px }
.delivery-rating { white-space: nowrap }
.delivery-rating b { color: #f6cd2b; margin-right: 4px; letter-spacing: -1px }
@media (max-width: 800px) {
  #reviews { padding: 32px 14px }
  .delivery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
  .delivery-meta { flex-wrap: wrap; padding: 12px }
  .delivery-card>p { min-height: 105px; padding: 12px }
}
@media (max-width: 460px) {
  .delivery-grid { grid-template-columns: 1fr }
  .delivery-card>p { min-height: 0 }
}
.header-brand .logo { display: flex; align-items: center; line-height: 1; letter-spacing: normal }
.supplied-header-logo { display: block; width: 205px; height: auto; max-height: 66px; object-fit: contain }
.header-brand .header-description { display: none }
.subscriber-promo .side-brand { display: block; background: #fff; border-radius: 8px; padding: 9px; width: 100%; margin-bottom: 10px }
.supplied-side-logo { display: block; width: 100%; height: auto }
@media (max-width: 600px) {
  .supplied-header-logo { width: 145px; max-height: 52px }
}
.hero-media { position: relative }
.hero .hero-brand-symbol { position: absolute; left: 5%; top: 7%; width: 8%; height: auto; object-fit: contain; z-index: 2; pointer-events: none }
footer.dd-footer { background: #20252e; color: #e3e9f2; border-radius: 34px 34px 0 0; padding: 48px 0 24px; margin-top: 64px; font-size: 12px; text-align: left }
.dd-footer .wrap { max-width: 1240px }
.dd-footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid #ffffff20 }
.dd-footer-brand img { display: block; width: 156px; height: auto; background: white; padding: 10px; border-radius: 10px }
.dd-footer p { color: #cbd5e1; font-size: 12px; line-height: 1.9; margin: 18px 0 0 }
.dd-footer-brand p { font-size: 14px; font-weight: 600 }
.dd-footer-policies, .dd-footer-contact { border-left: 1px solid #ffffff26; padding-left: 32px }
.dd-footer-policies details { margin: 5px 0 17px }
.dd-footer-policies summary { cursor: pointer; list-style: none; font-weight: 600 }
.dd-footer-policies details p { margin: 8px 0; max-width: 290px }
.dd-footer-policies>span { color: #9aa8ba; font-size: 11px }
.dd-footer-contact>strong { display: block; margin: 4px 0 17px; font-size: 14px }
.dd-footer-tel { display: flex; align-items: center; gap: 12px; font-size: 27px; font-weight: 800; white-space: nowrap }
.dd-footer-tel span { display: grid; place-items: center; border-radius: 50%; width: 36px; height: 36px; background: #3158ef25; color: #83a4ff; font-size: 22px }
.dd-footer-contact p { margin-top: 13px }
.dd-footer-bottom { padding-top: 22px }
.dd-footer-bottom p { margin: 0 0 7px }
.dd-footer-bottom p span { display: inline-block; margin-left: 20px }
.dd-footer-last { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 22px }
.dd-footer-last small { font-size: 10px }
.dd-back-top { border: 1px solid #ffffff35; padding: 11px 16px; border-radius: 12px; white-space: nowrap }
@media (max-width: 800px) {
  .dd-footer-top { grid-template-columns: 1fr; gap: 26px }
  .dd-footer-policies, .dd-footer-contact { border-left: 0; padding-left: 0; border-top: 1px solid #ffffff20; padding-top: 24px }
  .dd-footer-bottom p span { margin-left: 0; margin-right: 16px }
  .dd-footer-tel { font-size: 25px }
  .dd-footer-last { align-items: flex-end }
  footer.dd-footer { padding-top: 32px; border-radius: 24px 24px 0 0 }
}
footer.dd-footer { background: #fff; color: #172338; border-top: 1px solid #e6eaf0; border-radius: 0 }
.dd-footer p { color: #657286 }
.dd-footer-top { border-bottom-color: #e6eaf0 }
.dd-footer-policies, .dd-footer-contact { border-left-color: #e6eaf0 }
.dd-footer-policies>span { color: #8793a4 }
.dd-footer-brand img { padding: 0; background: transparent; border-radius: 0 }
.dd-footer-tel { color: #3158ef }
.dd-footer-tel span { background: #eef2ff; color: #3158ef }
.dd-back-top { border-color: #dce3ed; background: #fff; color: #45536a }
@media (max-width: 800px) {
  .dd-footer-policies, .dd-footer-contact { border-top-color: #e6eaf0 }
}
.left-banner { top: 120px }
.side-promo.subscriber-promo { background: radial-gradient(circle at 100% 0, #4877ff 0, transparent 45%), linear-gradient(165deg, #2455ec, #173ab0); border: 1px solid #3158ef; box-shadow: 0 10px 26px #2349c72b }
.subscriber-promo .side-brand { padding: 7px; margin-bottom: 4px }
.subscriber-label { margin: 10px 0 8px; font-size: 10px }
.subscriber-promo .side-caption { font-size: 12px; font-weight: 600; line-height: 1.7; letter-spacing: -0.4px; color: #fff; margin: 14px 0; text-wrap: pretty }
.subscriber-promo .side-action { font-size: 12px; padding: 12px 3px; border-radius: 8px; box-shadow: 0 3px 9px #10256e30 }
.side-phone { position: relative; background: radial-gradient(circle at 100% 0, #5489ff 0, transparent 65%), linear-gradient(150deg, #3158ef, #173aa9); border: 1px solid #3158ef; padding: 16px 8px 18px; box-shadow: 0 8px 22px #3158ef30 }
.side-phone span { font-size: 12px; font-weight: 700; color: #e8efff; margin-bottom: 10px; letter-spacing: -0.4px }
.side-phone strong { display: block; color: #fff; font-size: 28px; line-height: 1.3; letter-spacing: 0.5px; font-weight: 800; font-variant-numeric: tabular-nums }
.kakao-floating { position: fixed; right: 28px; bottom: 28px; z-index: 40; display: flex; align-items: center; gap: 9px; padding: 15px 20px; border-radius: 50px; background: #fee500; color: #191919; font-size: 15px; font-weight: 800; box-shadow: 0 5px 22px #3c1e1e26; border: 1px solid #e7cf00; transition: transform 0.2s, box-shadow 0.2s }
.kakao-floating:hover { transform: translateY(-3px); box-shadow: 0 8px 26px #3c1e1e35 }
.kakao-floating:focus-visible { outline: 3px solid #3158ef; outline-offset: 4px }
.kakao-floating svg { width: 27px; height: 27px; flex-shrink: 0 }
#kakao-contact h2 { font-size: 24px }
#kakao-contact p { font-size: 15px; color: #526174 }
#kakao-contact .btn { width: 100%; text-align: center }
@media (max-width: 800px) {
  .kakao-floating { right: 16px; bottom: 88px; padding: 13px 16px; font-size: 14px; gap: 7px }
  .kakao-floating svg { width: 25px; height: 25px }
}
@media (prefers-reduced-motion: reduce) {
  .kakao-floating { transition: none }
}
.proposal-note { padding: 9px 16px; background: #eef2ff; color: #3158ef; text-align: center; font-size: 11px; font-weight: 700 }
.preview-brands { display: flex; gap: 8px; overflow: auto; padding: 4px 0 14px }
.preview-brands button { background: #fff; border: 1px solid #dce3ee; border-radius: 10px; padding: 10px 16px; font-size: 13px; white-space: nowrap }
.preview-brands button.active { background: #3158ef; color: #fff }
.preview-types { display: flex; gap: 18px; margin: 12px 0 10px; font-size: 14px; font-weight: 700 }
.preview-types span:first-child { color: #3158ef }
@media (max-width: 800px) {
  body { padding-bottom: 100px }
  .site-header { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 18px; gap: 12px; height: auto }
  .supplied-header-logo { width: 136px; max-height: 46px }
  .header-phone { display: none }
  .header-contact { gap: 0 }
  .header-consult { font-size: 13px; padding: 12px 15px; border-radius: 10px }
  .header-search { height: 42px; grid-row: 2; box-shadow: none; border-color: #dbe3f0 }
  .header-search input { font-size: 13px }
  .hero { gap: 14px; margin-top: 18px }
  .hero-copy { background: linear-gradient(135deg, #f4f7ff, #edf3ff); border: 0; padding: 24px 22px; border-radius: 20px }
  .hero-copy .eyebrow { font-size: 10px; letter-spacing: 1.2px }
  .hero h1 { font-size: 28px; line-height: 1.4; letter-spacing: -1.4px; margin: 10px 0 }
  .hero-copy p { font-size: 13px; line-height: 1.7; margin: 0 0 18px }
  .hero-copy .btn { font-size: 14px; padding: 13px 19px; width: 100%; text-align: center }
  .hero-media { border-radius: 18px }
  .hero-controls { left: 10px; bottom: 10px; gap: 4px; padding: 4px 6px }
  .hero .slide-arrow, .hero .slide-pause { width: 25px; height: 25px }
  .slide-dot { width: 8px; min-width: 8px; height: 8px }
  .slide-dot.active { width: 18px }
  .slide-count { font-size: 10px }
  .quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 18px 0 }
  .quick a { flex-direction: column; gap: 8px; padding: 0; text-align: center }
  .quick strong { font-size: 12px }
  .quick small { display: none }
  .quick .icon { width: 42px; height: 42px; border-radius: 14px; font-size: 22px }
  .heading p { line-height: 1.6 }
  #cars { padding-top: 28px }
  #cars .heading h2 { font-size: 24px }
  #cars .heading { margin-bottom: 12px }
  .heading>a { white-space: nowrap; font-size: 12px }
  .kakao-floating { right: 16px; bottom: calc(90px + env(safe-area-inset-bottom)); width: 52px; height: 52px; padding: 13px; border-radius: 50%; box-shadow: 0 4px 15px #3c1e1e24 }
  .kakao-floating span { display: none }
  .kakao-floating svg { width: 26px; height: 26px }
  .mobilebar { gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px #17233808; background: #fff }
  .mobilebar .btn { font-size: 15px; padding: 14px 8px }
}
.preview-types button { background: transparent; color: #667084; padding: 8px 0; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 700 }
.preview-types button.active { color: #3158ef; border-color: #3158ef }
.preview-brands button:focus-visible, .preview-types button:focus-visible { outline: 2px solid #3158ef; outline-offset: 2px }