/*
 * 北海道地図＋地点別気温コンポーネント
 * design.md のカラーパレット準拠（moss / clay。青系は使用しない）
 */

.hcm-temp-map {
  --hcm-moss: #2b4a2f;
  --hcm-moss-dark: #1e3522;
  --hcm-clay: #b06a3b;
  --hcm-paper: #f7f6f2;
  --hcm-ink: #1f2419;
  --hcm-line: #d9d6cd;

  margin: 1.5em 0;
  border: 1px solid var(--hcm-line);
  border-radius: 8px;
  background: var(--hcm-paper);
  color: var(--hcm-ink);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
}

.hcm-temp-map__canvas {
  width: 100%;
  height: 420px;
  background: #eceae3; /* タイル読み込み前のプレースホルダ */
}

@media (max-width: 640px) {
  .hcm-temp-map__canvas {
    height: 320px;
  }
}

.hcm-temp-map__source {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--hcm-ink);
  background: var(--hcm-paper);
  border-top: 1px solid var(--hcm-line);
  text-align: right;
}

.hcm-temp-map__source a {
  color: var(--hcm-moss);
  text-decoration: underline;
}

/* Leaflet ポップアップ内の気温表示 */
.hcm-temp-popup {
  min-width: 180px;
  font-size: 13px;
  color: var(--hcm-ink);
}

.hcm-temp-popup__title {
  font-weight: 700;
  color: var(--hcm-moss-dark);
  margin: 0 0 4px;
  font-size: 14px;
}

.hcm-temp-popup__current {
  display: inline-block;
  margin: 2px 0 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hcm-moss);
  color: #fff;
  font-weight: 700;
}

.hcm-temp-popup__station-note {
  display: inline-block;
  font-size: 11px;
  color: #5a5648;
}

.hcm-temp-popup__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  border-top: 1px dashed var(--hcm-line);
}

.hcm-temp-popup__row:first-of-type {
  border-top: none;
}

.hcm-temp-popup__row .hi {
  color: var(--hcm-clay);
  font-weight: 700;
}

.hcm-temp-popup__row .lo {
  color: var(--hcm-moss);
  font-weight: 700;
}

.hcm-temp-popup__normal {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--hcm-line);
  font-size: 12px;
  color: #5a5648;
}

.hcm-temp-popup__fallback {
  margin-top: 6px;
  font-size: 12px;
  color: #7a4a2a;
}

.hcm-temp-popup__fallback a {
  color: var(--hcm-clay);
  font-weight: 700;
}

.hcm-temp-popup__loading {
  color: #7a7666;
  font-size: 12px;
}

/* Leaflet 既定のリンク色（青）を上書きし、青CTA全廃ルールに合わせる */
.hcm-temp-map .leaflet-popup-content a,
.hcm-temp-map .leaflet-control a {
  color: var(--hcm-moss);
}