.page { padding: 26px 0 56px; }

.articleTop { margin: 10px 0 14px; }
.backLink { display: inline-block; opacity: .8; }
.backLink:hover { color: var(--blue); opacity: 1; }

.articleHero{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 14px;
  overflow: hidden;
}

.heroMedia{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.04);
  min-height: 240px;
}

.heroMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.heroBody { padding: 2px; }

.heroMeta{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

.heroTag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: var(--blue);
  font-weight: 800;
  font-size: 13px;
}

.heroDate{
  font-size: 13px;
  color: #94a3b8;
  font-weight: 700;
}

.heroTitle{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.heroSub{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  max-width: 740px;
}

.heroActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.articleGrid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.articleBodyCard{ padding: 18px; }

.articleBodyCard h2{
  margin: 16px 0 10px;
  font-size: 18px;
  font-weight: 900;
}

.articleBodyCard p{
  margin: 0 0 10px;
  color: #334155;
  line-height: 1.6;
}

.articleBodyCard ul{
  margin: 0 0 12px 18px;
  color: #334155;
  line-height: 1.6;
}

.kpi{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 10px;
}

.kpiCard{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  padding: 12px;
}

.kpiTop{ color:#64748b; font-size: 12px; font-weight: 800; }
.kpiVal{ font-size: 18px; font-weight: 900; margin-top: 2px; }
.kpiSub{ color:#94a3b8; font-size: 12px; margin-top: 2px; font-weight: 700; }

.sideCol{ display:flex; flex-direction:column; gap: 16px; }

.sideCard{ padding: 16px; }

.sideCard.soft{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.06);
}

.sideTitle{ font-size: 16px; font-weight: 900; margin-bottom: 10px; }

.sideList{ display:flex; flex-direction:column; gap: 8px; }

.quickItem{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.90);
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.quickDot{
  width: 10px; height: 10px;
  border-radius: 4px;
  background: rgba(251,191,36,.55);
  margin-top: 4px;
}

.quickTxt{ font-size: 13px; color:#334155; font-weight: 700; }

.sideNote{ margin: 0 0 10px; color:#64748b; font-size: 13px; line-height: 1.5; }
.sideBtn{ width: 100%; justify-content:center; }

@media (max-width: 980px){
  .articleHero{ grid-template-columns: 1fr; }
  .articleGrid{ grid-template-columns: 1fr; }
  .heroTitle{ font-size: 30px; }
  .kpi{ grid-template-columns: 1fr; }
}