/* 그래프 "짚어 읽기" 공용 스타일 (env-chart-scrub.js 의 짝).
   원래는 environment.css 안에 있었으나, 단지 상세(apt-detail.css)에서도 쓰게 되면서 떼어냈다.
   environment.css 를 통째로 불러오면 ai-prompt-*, month-*, active, r, show 14개 클래스가
   apt-detail.css 와 겹쳐 "페이지마다 다르게 보이는" 사고가 난다(CLAUDE.md 구현원칙 11).
   클래스 이름은 .env-* 를 그대로 뒀다 - 쓰는 쪽 HTML 을 건드리지 않기 위해서다.

   쓰는 곳: region/weather.jte, region/air.jte, apt/pyeongChart.jte */

/* 그래프를 짚어 끌 때 세로 스크롤이 갇히지 않게 한다. Chart.js 가 캔버스의 포인터 이벤트를 쥐고 있어
   이걸 두지 않으면 모바일에서 그래프 위에 손가락이 닿는 순간 페이지가 안 움직인다.
   max-width 는 캔버스가 부모보다 넓어지는 것을 막는 마지막 방어선이다. */
.env-chart-wrap canvas,
.pyeong-canvas-wrap canvas { touch-action: pan-y; max-width: 100%; }

/* ── 그래프 읽기줄 (그래프 제목 아래 · 그래프 위) ──
   그래프를 짚으면 그 지점 값이 여기 쓰인다. 떠다니는 툴팁이 아니라 자리가 고정된 한 줄이다
   (인구 페이지 42개월 추이 그래프와 같은 방식).
   겉모습은 같은 페이지의 서사(.env-narrative)·표 요약(.env-table-summary)과 맞춘다 — 셋 다
   "문장으로 알려주는 블록" 이라 한 페이지에서 다르게 보이면 사용자가 다른 것으로 읽는다.
   🔴 짚는 중 표시(.on)를 배경색으로 하지 말 것 — 파란 배경은 표의 "이번 달 행" 강조가 이미 쓰고 있다.
      테두리만 진해지게 둔다. */
/* word-break: keep-all - 두 줄로 넘어가더라도 어절 중간에서 끊기지 않게 한다.
   없으면 "(표본 / 적음)" 처럼 낱말이 갈라진다(실측). 모바일 표 규칙과 같은 처리(구현원칙 10). */
.env-readout { margin: 0 0 12px; padding: 9px 13px; background: var(--surface);
               border: 1px solid var(--border); border-left: 4px solid var(--primary);
               border-radius: 8px; font-size: 14px; line-height: 1.6; color: var(--text-muted);
               word-break: keep-all; font-variant-numeric: tabular-nums; }
.env-readout.on { border-color: var(--primary-light); border-left-color: var(--primary); color: var(--text-main); }
.env-readout b { color: var(--text-main); font-weight: 700; }
/* 🔴 색은 *이름표*(평균·최고·최저 같은 라벨)에만 넣고, 숫자는 검정(--text-main) 그대로 둔다.
   숫자를 물들이면 값이 읽기 어려워지고, 색이 "이 값은 어떻다"는 판정처럼 보인다. 이름표에만 색이
   있으면 그래프의 어느 선인지 짚어주는 역할만 한다(실측 지적으로 값->이름표로 옮김).
   🔴 여기 색은 좋다/나쁘다가 아니라 계열 구분이다(제약7 허용 범위: 카테고리 구분색·물리량색).
   🔴 그래프 선 색은 weather.jte / air.jte 의 Chart 설정에 있다 — 한쪽만 바꾸면 짝이 깨진다.
      글자는 선보다 대비가 필요해 같은 계열의 한 톤 진한 값을 쓴다(선 #ef4444 -> 글자 #dc2626 등). */
.env-readout .k { font-weight: 700; }
.env-readout .k.v-temp-avg { color: #0284c7; }   /* 평균기온 — 선과 같은 파랑 */
.env-readout .k.v-temp-max { color: #dc2626; }   /* 평균 최고 — 선 #ef4444 */
.env-readout .k.v-temp-min { color: #4f46e5; }   /* 평균 최저 — 선 #6366f1 */
.env-readout .k.v-pm10     { color: #0284c7; }   /* 미세먼지(PM10) — 막대·선과 같은 파랑 */
.env-readout .k.v-pm25-m   { color: #15803d; }   /* 월별 초미세먼지 — 막대 #16a34a */
.env-readout .k.v-pm25-d   { color: #ea580c; }   /* 일별 초미세먼지 — 선 #f97316 */
.env-readout .d { color: var(--primary); font-weight: 700; margin-right: 4px; }

/* 범례를 눌러 계열을 감출 수 있다는 안내. 범례는 캔버스 안에 그려져 글을 끼울 수 없어 그래프 아래 한 줄로 둔다.
   보조 문구라 13px 하한을 지킨다(제약7). 강수량 차트는 범례가 없으니 이 줄도 없다. */
.env-chart-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 600px) {
    /* 읽기줄이 두 줄로 넘어가 "최저 / 24.0도" 처럼 값 중간에서 끊겼다(실측 지적).
       13px 하한(제약7)까지만 줄이고 자간을 살짝 좁혀 한 줄에 들어가게 한다. 컬럼을 지우거나
       값을 감추는 방식은 쓰지 않는다. */
    .env-readout { font-size: 13px; letter-spacing: -0.2px; padding: 8px 11px; }
}
/* 🔴 단지 읽기줄에 두 줄 높이를 미리 잡아 두는 규칙(min-height)은 두지 않는다.
   짚을 때 그래프가 밀리는 것을 막으려고 넣었더니, 대부분의 달은 한 줄이라 빈 줄만 남아 더 흉했다
   (실측 지적). 폭 조건을 걸어 좁혀 봐도 문구를 고칠 때마다 경계를 다시 재야 해서 관리가 안 됐다.
   지금은 표본 부족 안내를 <br> 로 아예 둘째 줄에 내리므로(detail.jte 읽기줄 format), 그 달만
   두 줄이 되고 나머지는 한 줄이다. 밀림 21px 은 받아들인다 - 빈 줄이 늘 보이는 것보다 낫다. */