.wx-card{
  width: var(--wx-w, 270px);
  border-radius:12px;
  overflow:hidden;
  box-shadow:none;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  color:#fff;
  background:linear-gradient(#2d9cff,#1b6fd6);
  margin: 0 auto;
}

@media (max-width: 600px){
  .wx-card{
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
}

.wx-head{
  display:flex;
  justify-content:space-between;
  padding:10px 12px;
  background:linear-gradient(#6cc0ff,#2d86ff);
}

.wx-city{font-weight:700;font-size:14px}
.wx-date{font-size:11px;margin-top:2px}

.wx-temp{font-size:32px;font-weight:800;line-height:1}
.wx-deg{font-size:14px;vertical-align:top}
.wx-range{font-size:11px;margin-top:4px}

.wx-hi{color:#ffe07a;font-weight:700}
.wx-lo{color:#cde7ff;font-weight:700}

.wx-list{
  background:rgba(255,255,255,.14);
  padding:4px 8px 6px;
}

.wx-row{
  display:grid;
  grid-template-columns:52px 22px 1fr;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.2);
  font-size:12px;
}
.wx-row:last-child{border:none}

.wx-day{font-weight:700}
.wx-ico{text-align:center}

.wx-info{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.wx-desc{font-size:11px;opacity:.9}
.wx-mm{font-variant-numeric:tabular-nums}

.wx-extra{
  font-size:10px;
  opacity:.9;
  margin-top:1px;
}