/* ===== modal-zones.html extras (zone grid + tract list) ===== */

.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 28px 0;
}
.zone-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 20px;
  text-align: center;
  transition: border-color 0.3s;
}
.zone-card:hover { border-color: rgba(236, 72, 153, 0.15); }
.zone-card .zone-icon { font-size: 24px; margin-bottom: 10px; }
.zone-card .zone-name {
  font: 600 14px/1.3 var(--font-d);
  color: #fff;
  margin-bottom: 6px;
}
.zone-card .zone-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.tract-list {
  margin: 28px 0;
  padding: 0;
  list-style: none;
  counter-reset: tract;
}
.tract-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 20px 24px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 60px;
  counter-increment: tract;
  font-size: 15px;
  color: var(--fg2);
  line-height: 1.7;
}
.tract-list li::before {
  content: "0" counter(tract);
  position: absolute;
  left: 24px;
  top: 22px;
  font: 700 13px/1 var(--font-m);
  color: var(--pink);
  letter-spacing: 0.04em;
}
.tract-list li strong { color: #fff; }

@media (max-width: 640px) {
  .zone-grid { grid-template-columns: 1fr 1fr; }
}