/* UsedCar2 unified visual system. Loaded after style.css. */
:root{
  --ui-bg:#f4f6f8;
  --ui-surface:#fff;
  --ui-surface-soft:#edf3f2;
  --ui-ink:#14212b;
  --ui-text:#42515b;
  --ui-muted:#71808a;
  --ui-line:#dbe2e6;
  --ui-line-strong:#c3ced4;
  --ui-teal:#176f68;
  --ui-teal-dark:#10564f;
  --ui-blue:#245b88;
  --ui-coral:#c2614d;
  --ui-radius:8px;
  --ui-shadow:0 12px 28px rgba(20,33,43,.08);
  --ui-shadow-sm:0 2px 8px rgba(20,33,43,.05);
}

html,body{background:var(--ui-bg);color:var(--ui-ink)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;font-size:16px;line-height:1.7;letter-spacing:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
a{transition:color .16s,background-color .16s,border-color .16s,box-shadow .16s,transform .16s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(36,91,136,.28);outline-offset:3px}
.container{width:min(100% - 44px,1200px);margin-inline:auto}
.section,.section.white{padding:68px 0;background:transparent;border:0}
.section-head{align-items:end;margin-bottom:26px}
.section-head h1,.section-head h2,.home .section-head h2{margin:0;color:var(--ui-ink);font-size:clamp(22px,2.5vw,29px);line-height:1.22;letter-spacing:0}
.section-head p{margin-top:8px;color:var(--ui-muted);font-size:15px;line-height:1.65}
.grid{gap:18px}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--ui-line);box-shadow:0 5px 16px rgba(20,33,43,.045);backdrop-filter:blur(14px)}
.header-inner{min-height:70px;gap:24px}
.logo{gap:11px;color:var(--ui-ink)}
.logo-mark{width:42px;height:42px;padding:0;box-sizing:border-box;border:0;border-radius:12px;background:#3f8179;color:#3f8179;box-shadow:none}
.logo-mark svg{display:block;width:100%;height:100%}
.nav{gap:2px;font-size:14px}
.nav a{padding:9px 11px;border-radius:6px;color:var(--ui-text);font-weight:750}
.nav a::after{display:none!important}
.nav a:hover,.nav a.current{background:#e9f2f1;color:var(--ui-teal)}
.nav .cta,.nav .cta.current{background:var(--ui-teal);color:#fff}
.nav .cta:hover{background:var(--ui-teal-dark);color:#fff}
.nav-toggle{border:1px solid var(--ui-line);border-radius:6px;background:#fff;color:var(--ui-ink)}

/* Shared surfaces */
.card,.article,.sidebox,.table-wrap,.faq details,.result-box,.notice,.content-card,.article-card,.tool-card,.filter-panel,.detail-card{border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;background:var(--ui-surface);box-shadow:var(--ui-shadow-sm)}
.card:hover,.tool-card:hover{transform:translateY(-2px);border-color:#aac5c1!important;box-shadow:var(--ui-shadow)}
.btn,.button,.quick-search button{border-radius:6px;background:var(--ui-teal);color:#fff}
.btn:hover,.button:hover,.quick-search button:hover{background:var(--ui-teal-dark)}
.badge{border-radius:5px;background:#e6f2ef;color:var(--ui-teal);font-weight:800}
.more,.resource-title>a{color:var(--ui-teal);font-weight:800}
.more::after{display:none}
.article{padding:34px}
.article h1{color:var(--ui-ink);font-size:clamp(26px,2.8vw,34px);line-height:1.24;letter-spacing:0}
.article h2{padding-left:12px;border-left:3px solid var(--ui-coral);color:var(--ui-ink);letter-spacing:0}
.article p,.article li{color:var(--ui-text);line-height:1.82}
.sidebox{padding:20px}
.sidebox a{border-radius:6px}
.table-wrap{overflow:auto}
table{background:#fff}
th{background:#eef3f4;color:var(--ui-text);font-weight:800}
th,td{padding:13px 15px;border-bottom:1px solid #e7edef}
tbody tr:hover td{background:#f7faf9}
.filterbar a,.filterbar button{border-radius:6px;background:#fff}
.filterbar .active{background:var(--ui-teal);border-color:var(--ui-teal);color:#fff}

/* Home */
.home .hero{min-height:520px;padding:76px 0 64px;background-image:linear-gradient(90deg,rgba(10,23,31,.94),rgba(10,23,31,.72) 48%,rgba(10,23,31,.28)),url("hero-showroom.webp");background-size:cover;background-position:center}
.home .hero::before{display:none}
.home .hero-grid{grid-template-columns:minmax(0,800px);gap:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:#b7e2d9;font-size:12px;font-weight:900}
.eyebrow span,.eyebrow::before{width:27px;height:1px;background:#69b8a9}
.home .hero h1{max-width:780px;margin:17px 0 15px;color:#fff;font-size:clamp(32px,4.2vw,50px);line-height:1.12;letter-spacing:0}
.home .hero h1 em{font-style:normal;color:#b5d8ee}
.home .hero p{max-width:700px;color:#d8e1e4;font-size:17px;line-height:1.78}
.home .quick-search{max-width:700px;margin-top:25px;padding:6px;border-radius:7px;background:#fff;box-shadow:0 16px 36px rgba(0,0,0,.22)}
.home .quick-search input{height:54px;border:0;border-radius:5px;font-size:16px}
.home .quick-search button{min-height:54px;padding:0 24px;border:0;border-radius:5px}
.home .quick-pills{gap:9px;margin-top:15px}
.home .quick-pills a{padding:8px 13px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.09);color:#eff8f6}
.home .vehicle-section,.home .home-resources{padding:62px 0}
.home .vehicle-section .car-card{display:block;overflow:hidden;padding:0;background:#fff}
.home .vehicle-section .car-media{position:relative!important;inset:auto!important;z-index:auto!important;width:100%;height:auto!important;aspect-ratio:16/10;flex:none;border:0;background:#e5ecef;overflow:hidden}
.home .vehicle-section .car-photo{display:block;width:100%;height:100%;object-fit:cover;transition:transform .22s}
.home .vehicle-section .car-body{display:block!important;min-height:0!important;height:auto!important;padding:18px!important;background:#fff;color:var(--ui-ink)}
.home .vehicle-section .car-body h3{margin:10px 0 5px;color:var(--ui-ink);font-size:18px;line-height:1.35;letter-spacing:0;text-shadow:none}
.home .vehicle-section .meta{color:var(--ui-muted)}
.home .vehicle-section .price-row{margin-top:15px;border-top:1px solid #edf1f2;color:var(--ui-muted)}
.home .vehicle-section .price{color:var(--ui-ink);font-size:18px}
.home .vehicle-section .car-card:hover .car-photo{transform:scale(1.025)}
.home-tools-section{padding:62px 0;background:#edf3f2}
.home-tools-section .tool-card{display:flex;min-height:150px;flex-direction:column;justify-content:space-between;padding:22px;background:#fff}
.home-tools-section .tool-card::before{display:none}
.home-tools-section .tool-card strong{color:var(--ui-ink);font-size:18px}
.home-tools-section .tool-card span{margin-top:8px;color:var(--ui-muted);font-size:14px;line-height:1.6}
.home-tools-section .tool-card b{align-self:flex-end;color:var(--ui-teal);font-size:18px;font-weight:500}
.home .resource-columns{gap:20px}
.home .resource-columns section{padding:24px;background:#fff;border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow-sm)}
.home .clean-list>a{min-height:88px;padding:18px 0;border-bottom:1px solid #edf1f2}
.home .clean-list>a:last-child{border-bottom:0}
.home .clean-list>a>span{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:5px;background:#e6f2ef;color:var(--ui-teal);font-size:11px}
.home .clean-list h3{color:var(--ui-ink);font-size:16px;letter-spacing:0}
.home .clean-list p{color:var(--ui-muted);line-height:1.62;white-space:normal;overflow:visible;text-overflow:clip}
.home .clean-list b{color:#9aa5aa}
.resource-title h2{font-size:24px!important;line-height:1.3;letter-spacing:0}
.home .home-disclaimer{padding:8px 0 30px;background:transparent;color:#c6d0d9}
.home .home-disclaimer .container{padding:18px 22px;border-radius:var(--ui-radius);background:#172632}

/* Guide archive */
.guide-index{padding:58px 0 76px;background:var(--ui-bg)}
.guide-index-hero{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}
.guide-index-hero>div{max-width:760px}
.guide-kicker{display:block;margin-bottom:10px;color:var(--ui-teal);font-size:12px;font-weight:900}
.guide-index-hero h1{margin:0;color:var(--ui-ink);font-size:34px;line-height:1.18;letter-spacing:0}
.guide-index-hero p{max-width:720px;margin-top:12px;color:var(--ui-muted);font-size:16px;line-height:1.72}
.guide-stats{display:flex;gap:24px;min-width:220px;padding-left:22px;border-left:2px solid #b9d4cf}
.guide-stats div{display:grid;gap:2px}
.guide-stats strong{color:var(--ui-ink);font-size:23px;line-height:1.2}
.guide-stats span{color:var(--ui-muted);font-size:12px}
.guide-feature{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:28px;align-items:end;min-height:0!important;height:auto!important;margin-bottom:44px;padding:32px;border:1px solid var(--ui-line);border-left:4px solid var(--ui-teal);border-radius:var(--ui-radius);background:#fff;box-shadow:var(--ui-shadow-sm)}
.guide-feature-copy>span,.guide-section-head>span{display:block;margin-bottom:14px;color:var(--ui-teal);font-size:12px;font-weight:900}
.guide-feature h2{margin:0;color:var(--ui-ink);font-size:23px;line-height:1.34;letter-spacing:0}
.guide-feature p{max-width:800px;margin-top:10px;color:var(--ui-muted);font-size:14px;line-height:1.72}
.guide-feature>strong{display:flex;min-height:52px;align-items:center;justify-content:center;border-radius:6px;background:var(--ui-teal);color:#fff;font-size:14px}
.guide-section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid var(--ui-line-strong)}
.guide-section-head>span{margin:0;color:var(--ui-ink);font-size:24px;line-height:1.2}
.guide-section-head p{margin:0;color:var(--ui-muted);font-size:13px}
.guide-index-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.guide-index-list>a{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;gap:14px;align-items:start;min-height:120px;padding:20px 0;border-bottom:1px solid var(--ui-line)}
.guide-index-list>a:hover{background:#edf5f3}
.guide-index-number{display:flex;width:30px;height:30px;align-items:center;justify-content:center;border:1px solid #b9d8d2;border-radius:50%;background:#f4faf8;color:var(--ui-teal);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:11px;font-variant-numeric:tabular-nums;font-weight:800;line-height:1}
.guide-index-list h3{margin:0 0 6px;color:var(--ui-ink);font-size:17px;line-height:1.4}
.guide-index-list p{color:var(--ui-muted);font-size:13px;line-height:1.62}
.guide-index-list b{color:var(--ui-teal);font-size:18px;font-weight:500}

/* Shared archives and tools */
.car-archive-section,.tool-page,.topic-page{padding-top:58px}
.archive-filters,.filterbar{border-radius:var(--ui-radius);background:#fff;border:1px solid var(--ui-line);box-shadow:var(--ui-shadow-sm)}
.archive-filters{padding:18px}
.archive-filter-main,.filter-advanced-fields{gap:10px}
.archive-filters select,.archive-filters input{min-height:42px;border:1px solid var(--ui-line-strong);border-radius:6px;background:#fff;color:var(--ui-ink)}
.archive-filters .btn{min-height:42px}
.tool-page .content-wrap,.topic-page .container{align-items:start}
.tool-page .article,.topic-intro,.topic-check{border-top:3px solid var(--ui-teal)}
.result-box{background:#edf5f3}
.calculator-card,.calculator-note,.checklist-progress,.checklist-groups section,.compare-picker,.compare-output{border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:#fff;box-shadow:var(--ui-shadow-sm)}
.calculator-card{padding:24px;gap:20px}
.calculator-intro{padding-bottom:16px;border-bottom:1px solid var(--ui-line)}
.calculator-intro>span,.section-kicker{color:var(--ui-teal);font-size:12px;font-weight:900}
.calculator-intro h2{margin-top:7px;color:var(--ui-ink);font-size:20px;line-height:1.35}
.calculator-intro p{margin-top:6px;color:var(--ui-muted);font-size:14px;line-height:1.6}
.calculator-card label,.valuation-form label{color:var(--ui-text);font-size:13px;font-weight:800}
.calculator-card input,.calculator-card select,.valuation-form input,.valuation-form select,.compare-picker select{min-height:42px;border:1px solid var(--ui-line-strong);border-radius:6px;background:#fff;color:var(--ui-ink)}
.calculator-action{margin-top:auto}
.calculator-note{padding:22px 24px;color:var(--ui-text)}
.calculator-note h2{color:var(--ui-ink);font-size:18px}
.checklist-progress{border-left:3px solid var(--ui-teal)}
.checklist-groups section h2{color:var(--ui-ink);font-size:19px}
.check-item{border-bottom:1px solid #edf1f2;color:var(--ui-text)}
.compare-picker{padding:18px;gap:12px}
.compare-picker select{width:100%;padding:0 12px}
.compare-output:empty{display:none}
.site-footer{background:#172632;color:#b9c7ce;border:0}
.site-footer strong{color:#fff}
.site-footer a{color:#dbe5e8}
.site-footer a:hover{color:#fff}

@media(max-width:980px){
  .container{width:min(100% - 34px,1200px)}
  .header-inner{min-height:66px}
  .nav{top:66px;border-bottom:1px solid var(--ui-line);box-shadow:0 14px 30px rgba(20,33,43,.1)}
  .nav a{width:100%}
  .section,.home .vehicle-section,.home .home-resources,.home-tools-section,.guide-index,.car-archive-section,.tool-page,.topic-page{padding:50px 0}
  .home .hero{padding:58px 0 48px}
  .grid-4,.grid-3,.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .guide-index-hero{display:block}
  .guide-stats{margin-top:22px;width:max-content}
  .guide-feature{grid-template-columns:1fr}
  .guide-feature>strong{max-width:180px}
}
@media(max-width:640px){
  .container{width:min(100% - 28px,1200px)}
  .home .hero h1{font-size:30px}
  .home .hero p{font-size:15px}
  .home .quick-search{display:grid;grid-template-columns:1fr}
  .home .quick-search input,.home .quick-search button{width:100%}
  .grid-4,.grid-3,.grid-2,.guide-index-list{grid-template-columns:1fr!important}
  .home .section-head{display:block}
  .home .section-head .more{display:inline-block;margin-top:10px}
  .article{padding:24px}
  .guide-index{padding:36px 0 54px}
  .guide-index-hero h1{font-size:28px}
  .guide-index-hero p{font-size:15px}
  .guide-stats{gap:18px;padding-left:16px}
  .guide-feature{padding:22px}
  .guide-feature h2{font-size:21px}
  .guide-section-head{display:block}
  .guide-section-head p{margin-top:6px}
  .guide-index-list>a{min-height:0;padding:18px 0}
  .guide-index-list h3{font-size:16px}
}
