/* /vehicles/vehiclesstyle.css (v3)
   - Featured: equal split for EV/CV
   - Detail: one shared detail page (detail.html?id=ale-26)
   - Season selector auto-populated from vehicles.json
*/

.vehicles-page{ padding:130px 0 90px; }
.vehicles-page .container{ max-width:1200px; margin:0 auto; padding:0 20px; }

.vehicles-hero{
  border:1px solid rgba(255,255,255,0.08);
  background: radial-gradient(1200px 420px at 20% 10%, rgba(240,165,0,0.10), transparent 60%),
              rgba(255,255,255,0.02);
  border-radius:24px;
  overflow:hidden;
  padding:28px 22px 22px;
}
.vehicles-hero .eyebrow{
  display:inline-flex; gap:10px; font-family:'Orbitron',sans-serif;
  letter-spacing:0.14em; font-size:.78rem; opacity:.9;
}
.vehicles-hero h1{ margin-top:10px; font-size:clamp(2.1rem,3.8vw,3.2rem); letter-spacing:-.02em; line-height:1.08; }
.vehicles-hero p{ margin-top:12px; opacity:.82; max-width:64ch; }

.hero-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.hero-actions a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px; border-radius:999px; text-decoration:none; color:#fff;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); font-weight:800;
}
.hero-actions a.primary{ border-color:rgba(240,165,0,0.35); background:rgba(240,165,0,0.10); }

.featured{ margin-top:22px; }
.featured-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.featured-head h2{
  font-size: 1.55rem;
  letter-spacing: -0.01em;
}
.featured-tools{
  display:flex;
  gap:10px;
  align-items:center;
}
.select-wrap{
  display:flex;
  gap:10px;
  align-items:center;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
  border-radius: 14px;
}
.select-wrap span{
  font-family:'Orbitron',sans-serif;
  letter-spacing:0.10em;
  font-size: 0.75rem;
  opacity: 0.82;
}
.select-wrap select{
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
  font-weight: 800;
}

.featured-grid{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.vehicle-card{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.02);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,0.35);
}
.vehicle-card__media{ height:340px; background:rgba(0,0,0,0.35); }
.vehicle-card__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.05); transform:scale(1.02); }
.vehicle-card__body{ padding:18px 18px 16px; }

.vehicle-chip{
  display:inline-flex; gap:10px; font-family:'Orbitron',sans-serif; letter-spacing:0.12em;
  font-size:.72rem; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.03); opacity:.92;
}
.vehicle-title{ margin-top:12px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.vehicle-title h3{ font-size:1.55rem; letter-spacing:-.01em; }
.vehicle-title span{ opacity:.75; font-weight:800; }
.vehicle-card__tagline{ margin-top:10px; opacity:.82; }

.vehicle-split{ margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.vehicle-stats,.vehicle-highlights{
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  border-radius:16px;
  padding:12px 12px 10px;
}
.vehicle-stats h4,.vehicle-highlights h4{
  font-family:'Orbitron',sans-serif; letter-spacing:0.12em; font-size:0.74rem; opacity:.8; margin-bottom:10px;
}
.vehicle-stats dl{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; margin:0; }
.vehicle-stats dt{ opacity:.68; font-size:.86rem; }
.vehicle-stats dd{ margin:0; text-align:right; font-weight:800; font-size:.86rem; opacity:.92; }
.vehicle-highlights ul{ margin:0; padding-left:18px; opacity:.9; }
.vehicle-highlights li{ margin:0 0 8px; }

.vehicle-cta{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}
.vehicle-cta a{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(240,165,0,0.35);
  background:rgba(240,165,0,0.10);
  color:#fff; font-weight:900;
}

/* Previous */
.previous{ margin-top:28px; border-top:1px solid rgba(255,255,255,0.08); padding-top:26px; }
.previous-head h2{ font-size:1.55rem; letter-spacing:-.01em; }
.previous-head p{ opacity:.78; max-width:60ch; }
.previous-tools{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.previous-tools select,.previous-tools input{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); color:#fff;
  border-radius:12px; padding:11px 12px; outline:none; min-width:180px;
}
.previous-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.prev-card{ border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.02); border-radius:18px; overflow:hidden; cursor:pointer; }
.prev-card__media{ height:170px; background:rgba(0,0,0,0.35); }
.prev-card__media img{ width:100%; height:100%; object-fit:cover; }
.prev-card__body{ padding:14px 14px 12px; }
.prev-card__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.prev-card__top h3{ font-size:1.12rem; letter-spacing:-.01em; }
.prev-card__top span{ font-family:'Orbitron',sans-serif; letter-spacing:0.12em; font-size:.72rem; opacity:.82; }
.prev-specs{ margin-top:10px; border-top:1px solid rgba(255,255,255,0.08); padding-top:10px; display:grid; gap:8px; opacity:.9; }
.prev-specs .row{ display:flex; justify-content:space-between; gap:12px; font-size:.9rem; }
.prev-specs .row b{ opacity:.7; font-weight:800; }

/* Modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,0.68); display:none; align-items:center; justify-content:center; padding:22px; z-index:10000; }
.modal.open{ display:flex; }
.modal__panel{ width:min(920px,100%); border-radius:22px; border:1px solid rgba(255,255,255,0.12); background:rgba(10,12,18,0.96); box-shadow:0 20px 60px rgba(0,0,0,0.55); overflow:hidden; }
.modal__head{ display:flex; justify-content:space-between; align-items:center; padding:14px 14px; border-bottom:1px solid rgba(255,255,255,0.10); }
.modal__close{ width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); color:#fff; cursor:pointer; font-size:1.2rem; line-height:1; }
.modal__body{ padding:14px 14px 16px; }
.spec-table{ width:100%; border-collapse:collapse; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,0.10); }
.spec-table th,.spec-table td{ padding:12px 12px; border-bottom:1px solid rgba(255,255,255,0.08); text-align:left; vertical-align:top; }
.spec-table th{ width:220px; opacity:.8; font-family:'Orbitron',sans-serif; letter-spacing:0.08em; font-size:.8rem; }
.spec-table td{ opacity:.92; }

@media (max-width:980px){
  .featured-grid{ grid-template-columns:1fr; }
  .vehicle-card__media{ height:300px; }
  .vehicle-split{ grid-template-columns:1fr; }
  .previous-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:600px){
  .vehicles-page{ padding-top:110px; }
  .vehicle-card__media{ height:260px; }
  .previous-grid{ grid-template-columns:1fr; }
}


/* ===== Fix select option visibility ===== */
.member-tools select option {
  background: #fff;   /* 드롭다운 배경 */
  color: #000;        /* 드롭다운 글자 */
}


/* ================= LANG TOGGLE ================= */
.lang-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.lang-toggle:hover{ opacity:1; transform: translateY(-1px); }
.lang-toggle:active{ transform: translateY(0px); opacity:.92; }