/* motortrendkorea.com — корейский автопортал. Палитра/типографика реконструированы по пину. */
:root{
  --ink:#0e1116; --panel:#161b22; --panel2:#1e252e;
  --acc:#e3352b; --acc-d:#b8231a; --amber:#f5a623;
  --bg:#f5f6f8; --card:#ffffff; --mut:#6b7280; --line:#e4e7ec;
  --txt:#1a1f26;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:Pretendard,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Nanum Gothic",sans-serif;
  font-size:16px; line-height:1.7; -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acc)}
h1,h2,h3,h4{margin:0 0 10px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.clear{clear:both}

/* ---------- шапка (4 ряда, как в пине) ---------- */
.top{background:var(--ink);color:#c8cfd8;font-size:13px}
.top .wrap{display:flex;justify-content:space-between;gap:12px;min-height:38px;align-items:center;flex-wrap:wrap}
.hed{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:5}
.hed .row{display:flex;align-items:center;gap:18px;padding:14px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center}
.logo img{height:44px;width:auto;display:block}
.nav{flex:1 1 auto}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.nav a{display:block;padding:9px 12px;font-weight:600;font-size:15px;border-radius:9px;color:var(--ink)}
.nav a:hover{background:#fbeceb;color:var(--acc-d)}
.btn{display:inline-block;background:var(--acc);color:#fff;font-weight:700;font-size:15px;
  padding:11px 20px;border-radius:10px;border:0;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{background:var(--acc-d);color:#fff}
.btn.sm{padding:8px 14px;font-size:14px}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- главная: секции-полосы ---------- */
.lhero{background:linear-gradient(135deg,#0e1116 0%,#1b2430 55%,#2b1a19 100%);color:#fff;overflow:hidden}
.lhero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding:52px 18px}
.lhero-tx h1{color:#fff;font-size:40px;margin:6px 0 14px}
.lhero-tx p{color:#c9d1da;font-size:17px;margin:0 0 20px;max-width:40em}
.lk{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--amber);text-transform:uppercase}
.lk,.lkick{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--amber)}
.lbtns{display:flex;gap:10px;flex-wrap:wrap}
.lhero-ph img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;display:block;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.lsec{padding:46px 0}
.lsec:nth-child(even){background:#fff}
.lhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-left:5px solid var(--acc);
  padding-left:14px;margin-bottom:6px}
.lhead h2{font-size:27px;margin:0}
.lall{font-size:14.5px;font-weight:700;color:var(--acc);white-space:nowrap}
.lsub{color:var(--mut);margin:0 0 20px;font-size:15.5px}
.lcards{display:grid;gap:22px}
.lcards.c3{grid-template-columns:repeat(3,1fr)}
.lcards.c2{grid-template-columns:repeat(2,1fr)}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.lcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(16,24,40,.12)}
.lph{display:block;aspect-ratio:3/2;background-size:cover;background-position:center;background-color:#e9ecf1}
.lbd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.ltag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;color:var(--acc-d);
  background:#fbeceb;border-radius:6px;padding:3px 9px}
.lbd h3{font-size:18.5px;margin:2px 0 0}
.lbd p{margin:0;color:var(--mut);font-size:14.5px}
.lmore{margin-top:auto;font-size:14px;font-weight:700;color:var(--acc)}

/* feature-полоса */
.lfeat{background:var(--panel);color:#e8edf3;padding:46px 0}
.lfeat.rev{background:var(--panel2)}
.lfeat-in{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.lfeat.rev .lfeat-ph{order:2}
.lfeat-ph img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;display:block}
.lfeat-tx h2{color:#fff;font-size:26px}
.lfeat-tx p{color:#c2ccd6;font-size:15.5px}

/* нумерованные плитки (steps) */
.lsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lsteps li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--acc);
  border-radius:12px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px}
.lsteps li b{font-size:19px;color:var(--ink)}
.lsteps li span{color:var(--mut);font-size:14.5px}
.lsteps-sec .btn{margin-top:8px}

/* FAQ (quotes) */
.lquotes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.lq{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.lq blockquote{margin:0 0 8px;font-weight:700;color:var(--ink);font-size:16.5px}
.lq figcaption{color:var(--mut);font-size:14.5px}

/* контакты */
.lcontact{background:#fff;padding:46px 0}
.lcontact-in h2{font-size:26px}
.lcontact-in p{color:#38414c}
.lcontact-in p b{color:var(--ink)}

/* ---------- листинги / статьи ---------- */
.main{padding:30px 0 40px}
.crum{font-size:13.5px;color:var(--mut);margin:0 0 10px}
.crum a{color:var(--mut)}
.leadb{font-size:17px;color:#3b4552}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:18px 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card .ph{aspect-ratio:3/2;background-size:cover;background-position:center;background-color:#e9ecf1}
.card .bd{padding:14px 16px 16px}
.card .tag{display:inline-block;font-size:12px;font-weight:700;color:var(--acc-d);background:#fbeceb;border-radius:6px;padding:3px 9px}
.card h3{font-size:17.5px;margin:8px 0 6px}
.card p{margin:0;color:var(--mut);font-size:14px}
.sec{font-size:22px;margin:26px 0 10px;border-left:5px solid var(--acc);padding-left:12px}
.sec a{font-size:14.5px;font-weight:700;color:var(--acc);margin-left:8px}
.news{border-bottom:1px solid var(--line);padding:10px 0}
.news h3{font-size:18px;margin:0 0 4px}
.news p{margin:0;color:var(--mut);font-size:14.5px}
.acov{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;display:block;margin:6px 0 20px}
.ameta{font-size:13.5px;color:var(--mut);margin:0 0 10px}
.prose{font-size:16.5px;line-height:1.85;color:#22282f}
.prose h2{font-size:23px;margin:30px 0 10px;padding-left:12px;border-left:5px solid var(--acc)}
.prose h3{font-size:18.5px;margin:22px 0 8px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:6px 0}
.prose strong{color:var(--ink)}
.prose figure{margin:18px 0}
.prose figure img{border-radius:12px;width:100%}
.article-table-wrap{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:12px;background:#fff}
.article-table{width:100%;border-collapse:collapse;font-size:15px}
.article-table th,.article-table td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.article-table thead th{background:var(--panel);color:#fff;font-weight:700}
.article-table tbody tr:nth-child(even){background:#fafbfc}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 18px}
.box h4{margin:0 0 10px;font-size:16px;color:var(--acc-d)}
.box a{display:block;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.main.single{max-width:1180px}
.rg{background:#fff8e8;border:1px solid #f2dfae;color:#6b5320;border-radius:10px;
  padding:12px 16px;font-size:14px;margin:22px 0}

/* ---------- футер (2 колонки, как в пине) ---------- */
footer{background:var(--ink);color:#aeb8c4;margin-top:36px;padding:34px 0 26px;font-size:14px}
footer a{color:#cfd8e2}
footer .frow{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px;align-items:start}
footer img{filter:none}

/* ---------- мобильная 390 ---------- */
@media(max-width:900px){
  .lhero-in{grid-template-columns:1fr;padding:34px 18px}
  .lhero-tx h1{font-size:29px}
  .lcards.c3,.lcards.c2,.cards,.lsteps,.lquotes,footer .frow{grid-template-columns:1fr}
  .lfeat-in{grid-template-columns:1fr}
  .lfeat.rev .lfeat-ph{order:0}
  .nav ul{justify-content:flex-start}
  .hed .row{gap:10px}
  .lsec{padding:32px 0}
  .wrap{padding:0 14px}
}
@media(max-width:430px){
  .logo img{height:36px}
  .lhero-tx h1{font-size:25px}
  .lhead h2{font-size:22px}
}