/* Known Issues（車）：修車廠的工單。柏油黑、警示黃、粗的窄體字。黃色只當底色，不當文字。 */
:root{
  --paper:#eeeeea;--paper-hi:#fff;--ink:#15171a;--ink-2:#30343a;--sub:#646a72;
  --line:rgba(21,23,26,.16);--hair:rgba(21,23,26,.09);
  --zhu:#d32a1a;--zhu-lite:#ffc400;--gold:#8a6a00;--cream:#f4f4f1;--ok:#1f7a3d;
  --haz:#ffc400;
}
body{font-family:Barlow,system-ui,sans-serif;font-size:17px;line-height:1.6;background:var(--paper);background-image:none;color:var(--ink)}
h1,h2,h3,.brand,.btn{font-family:"Barlow Condensed",Barlow,system-ui,sans-serif}
a{color:var(--ink);text-decoration-color:var(--zhu);text-decoration-thickness:2px}
.wrap{max-width:900px}

/* 站頭：整條柏油黑，下緣一條黃黑斜紋 */
.sitebar{background:var(--ink);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);padding:14px 0;margin-bottom:0;position:relative}
#head{position:relative;margin-bottom:30px}
#head::after{content:"";display:block;height:8px;margin:0 calc(50% - 50vw);background:repeating-linear-gradient(-45deg,var(--haz) 0 14px,var(--ink) 14px 28px)}
.brand{color:#fff;font-size:24px;letter-spacing:.04em;font-weight:800}
.brand b{color:var(--haz);font-weight:800;margin-left:5px}
.sitenav a{color:#b9bdc4;font:600 16px "Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.sitenav a:hover,.sitenav a.on{color:var(--haz)}

h1{font-size:clamp(34px,6vw,52px);line-height:1;font-weight:800;text-transform:uppercase;letter-spacing:.005em;margin:0 0 10px}
.sub{font-size:18px;color:var(--ink-2);max-width:60ch;margin:0 0 6px}
h2{font-size:28px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:40px 0 8px}
h2 .n{color:var(--zhu)}

/* 表單：工單格子 */
.card{background:#fff;border-radius:4px;box-shadow:none;border:2px solid var(--ink);padding:18px 20px}
.form label{font:600 13px "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.form input,.form select,input,select{background:#fff;border:2px solid var(--ink);border-radius:3px;font-family:Barlow,sans-serif;font-weight:500}
.form input:focus,.form select:focus,input:focus,select:focus{outline:3px solid var(--haz);outline-offset:0;border-color:var(--ink);box-shadow:none}
.btn{background:var(--haz);color:var(--ink);border:2px solid var(--ink);border-radius:3px;font-size:19px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 22px}
.btn:hover{background:var(--ink);color:var(--haz)}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.eg{font-family:Barlow,sans-serif;font-size:14px}
.eg button{color:var(--ink);font-weight:600;text-decoration-color:var(--haz);text-decoration-thickness:3px}

/* 答案：黑底黃字的告示牌 */
.answer{background:var(--ink);color:#e8e9ea;border-radius:4px;box-shadow:none;border-left:10px solid var(--haz);padding:22px 26px 24px}
.answer .q{color:var(--haz);font:600 15px "Barlow Condensed",sans-serif;letter-spacing:.14em}
.answer .a{font-family:"Barlow Condensed",sans-serif;color:#fff;font-size:clamp(40px,7vw,64px);text-transform:uppercase;line-height:.98}
.answer .a b{color:var(--haz)}
.answer .why{color:#c3c7cc;font-size:16px}
.answer .why a{color:var(--haz)}
.answer.soft{background:#fff;color:var(--ink);border:2px solid var(--ink);border-left:10px solid var(--ok)}
.answer.soft .q{color:var(--sub);text-transform:uppercase;letter-spacing:.14em}
.answer.soft .a,.answer.soft .a b{color:var(--ink)}
.answer.soft .why a{color:var(--ink)}
.warn{background:#fff;border:2px solid var(--zhu);border-left:10px solid var(--zhu);border-radius:4px}
.good{background:#fff;border:2px solid var(--ok);border-left:10px solid var(--ok);border-radius:4px}
.items li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:3px}
.items li h3{font-size:21px;text-transform:uppercase;letter-spacing:.02em}
.items li .meta,.note,.sans{font-family:Barlow,sans-serif}
.tag{border-radius:2px;font-family:"Barlow Condensed",sans-serif;letter-spacing:.06em}
.tag.hot{background:var(--zhu);color:#fff}
.bars .b,.bars .b i{border-radius:0}
.bars .b i{background:var(--ink)}
.sitefoot{font-family:Barlow,sans-serif}

/* ── 首頁 ── */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero .in,.band .in{max-width:1040px;margin:0 auto;padding:0 20px}
.hero .sitebar{box-shadow:none;clip-path:none}
.hero #head{margin:0}
.hero #head::after{display:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:end;padding:34px 0 52px}
.hero h1{color:#fff;font-size:clamp(46px,8.4vw,104px);line-height:.88;margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--ink);background:var(--haz);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero p.lede{font-size:19px;color:#c3c7cc;max-width:44ch;margin:0}
.ticket{background:#fff;color:var(--ink);border-radius:4px;padding:20px 22px 22px;position:relative;box-shadow:10px 10px 0 var(--haz)}
.ticket h2{margin:0 0 12px;font-size:22px;letter-spacing:.08em;display:flex;justify-content:space-between;align-items:baseline}
.ticket h2 span{font:500 13px Barlow,sans-serif;color:var(--sub);letter-spacing:0;text-transform:none}
.ticket .form{margin:0}
.ticket .form label{flex:1 1 120px}
.ticket .btn{width:100%;margin-top:4px}
.or{display:flex;align-items:center;gap:12px;font:600 13px "Barlow Condensed",sans-serif;letter-spacing:.14em;color:var(--sub);margin:16px 0 12px}
.or::before,.or::after{content:"";flex:1;height:2px;background:var(--hair)}
.plate{display:flex;gap:8px}
.plate input{flex:1;min-width:0;font:600 19px ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:10px 8px}
.plate input::placeholder{letter-spacing:.04em;font-weight:400;font-size:15px}
.plate .btn{width:auto;margin:0;background:var(--ink);color:#fff}
.plate .btn:hover{background:var(--haz);color:var(--ink)}
#err{font:500 14px Barlow,sans-serif;color:var(--zhu);margin:10px 0 0;min-height:1.2em}
.stripe{height:14px;background:repeating-linear-gradient(-45deg,var(--haz) 0 22px,var(--ink) 22px 44px)}
.band{padding:54px 0}
.band.alt{background:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.band h2{margin:0 0 6px;font-size:36px}
.band .k{font-size:17px;color:var(--ink-2);max-width:62ch;margin:0 0 26px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink);background:#fff}
.three>div{padding:22px 22px 24px;border-right:2px solid var(--ink)}
.three>div:last-child{border-right:0}
.three .no{font:800 15px "Barlow Condensed",sans-serif;letter-spacing:.14em;color:var(--sub)}
.three h3{font-size:27px;text-transform:uppercase;margin:4px 0 8px;line-height:1.05}
.three p{margin:0;font-size:16px;color:var(--ink-2)}
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.models a{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:3px;padding:12px 14px;text-decoration:none;font:700 20px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.models a::after{content:"→";font-family:Barlow,sans-serif;font-weight:500}
.models a:hover{background:var(--haz)}
.home .sitefoot{max-width:1040px;margin:0 auto;padding:26px 20px 60px;border-top:0}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:28px;padding:22px 0 40px}.three{grid-template-columns:1fr}.three>div{border-right:0;border-bottom:2px solid var(--ink)}.three>div:last-child{border-bottom:0}.ticket{box-shadow:6px 6px 0 var(--haz)}}

/* ── 合併報告、逐年比較 ── */
.picker{margin:18px 0 8px}
.dz{background:#fff;border:2px solid var(--ink);border-radius:4px;padding:18px 20px 20px;margin:26px 0}
.dz-n{border-radius:3px;background:var(--haz);color:var(--ink);font:800 17px "Barlow Condensed",sans-serif;width:32px;height:32px}
.dz h2{font-size:26px}
.dz-t p,.dz-open{font-family:Barlow,sans-serif}
.yrs{width:100%;border-collapse:collapse;background:#fff;border:2px solid var(--ink);font-family:Barlow,sans-serif}
.yrs th{font:600 13px "Barlow Condensed",sans-serif;letter-spacing:.1em;background:var(--ink);color:#fff;padding:10px 12px;text-align:left}
.yrs td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-size:16px}
.yrs td.y{font:700 22px "Barlow Condensed",sans-serif;width:4.2em}
.yrs td.num{font-variant-numeric:tabular-nums;font-weight:600;width:4.5em;text-align:right}
.yrs .barcell{width:38%}
.yrs .bar2{height:14px;background:var(--hair)}
.yrs .bar2 i{display:block;height:100%;background:var(--ink)}
.yrs .bar2.r i{background:var(--zhu)}
.yrs a{font-weight:600;white-space:nowrap}
.yrs tr.pending td{color:var(--sub)}
@media(max-width:600px){.yrs .barcell{display:none}.yrs td,.yrs th{padding:8px}}
h1,h2,h3{color:var(--ink)}
.hero h1{color:#fff}
@media(max-width:820px){.models{grid-template-columns:1fr 1fr}.models a{font-size:17px;padding:10px 12px}}

/* 車型靜態頁 */
.page-model .yr{margin-top:44px;scroll-margin-top:16px}
.page-model .yr h2{border-bottom:3px solid var(--ink);padding-bottom:6px;margin-bottom:10px}
.page-model .yline{font-size:18px;margin:0 0 6px}
.page-model .parts{color:var(--ink-2);margin:0 0 14px}
.page-model .more{margin:12px 0 0;font-weight:600}
.page-model .yrs td.y a{color:inherit}
.page-models h2{margin:34px 0 12px}
.page-models h2 a{color:inherit;text-decoration:none;border-bottom:3px solid var(--haz)}
.allmodels{margin:16px 0 0;font-weight:600}
.kicker{font:600 15px "Barlow Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--sub);margin:0 0 4px}