:root{
  /* ✅ 글자 크기 (반응형) */
  --wx-fs-sm: clamp(13px, 0.75vw, 15px);
  --wx-fs-md: clamp(14px, 0.9vw, 16px);
  --wx-fs-lg: clamp(15px, 1.05vw, 16px);

  /* 아이콘 / 텍스트 열 폭 */
  --wx-icon-w: 29px;   /* +2 */
  --wx-icon-h: 23px;   /* 비율 유지 */
  --wx-col-icon: 36px; /* 아이콘보다 항상 넉넉하게 */

  --wx-col-day:  clamp(60px, 4vw, 72px);
  --wx-col-temp: clamp(52px, 3.6vw, 64px);

  /* 열 사이 간격 */
  /* --wx-gap: clamp(8px, 1.2vw, 14px); */
  --wx-gap: clamp(5px, 0.8vw, 5px);

  --wx-gap-ico-day: 3px;   /* 아이콘 ↔ 오늘 */
  --wx-gap-day-min: 4px;   /* 오늘 ↔ 최저 */
  --wx-gap-min-max: 5px;   /* 최저 ↔ 최고 */
}
/* =========================
   WEATHER PANEL
   ========================= */
.weather-panel{
  position:absolute;
  left: 3.5vw;
  top:  23vh;
  width: 20vw;        /* 화면 너비에 비례 */
  
  z-index:20;
  font-family:"Noto Sans KR",sans-serif;
}


/* 카드: 블러 없음 + 흰색 + 강한 투명 */
.weather-card{
  background:rgba(255,255,255,0.9);
  border-radius:18px;
  padding: 18px 20px 18px 25px; /* 좌우 동일 – 유지 */
  box-sizing:border-box;
}

/* -------------------------
   헤더
   ------------------------- */
/* 최저 최고라인과 오늘 라인 간격 */
.weather-head{
  margin-bottom:7px;
}

.weather-date{
  display:flex;
  align-items:center;
  margin-bottom:1px;
}

#weather-mmdd{
  font-size: var(--wx-fs-sm);
  font-weight:700;
  letter-spacing:-0.015em;
  color:#5A5A5A;
}

#weather-dow{
  margin-left:6px;
  font-size: var(--wx-fs-sm);
  font-weight:700;
  letter-spacing:-0.015em;
  color:#B3490F;
}

/* ✅ 헤더의 최저/최고도 4칸 그리드에 맞춰 정렬 */
.weather-line,
.weather-cols{
  display: grid;
  grid-template-columns:
    var(--wx-col-icon)
    var(--wx-gap-ico-day)
    var(--wx-col-day)
    var(--wx-gap-day-min)
    var(--wx-col-temp)
    var(--wx-gap-min-max)
    var(--wx-col-temp);

  align-items: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}


/* 최저/최고는 3,4열에 위치 */
.weather-cols .col{
  font-size: var(--wx-fs-sm);
  font-weight:700;
  letter-spacing:-0.015em;
  color:#5A5A5A;
  text-align:center;
  white-space: nowrap;   /* '최고' 줄바꿈 방지 */
}
.weather-cols .col:nth-child(1){ grid-column: 5; } /* 최저 → temp1 */
.weather-cols .col:nth-child(2){ grid-column: 7; } /* 최고 → temp2 */

/* -------------------------
   오늘/내일 라인 (핵심)
   ------------------------- */
/* .weather-line{
  display:grid;
  grid-template-columns:
    var(--wx-col-icon)
    var(--wx-col-day)
    var(--wx-col-temp)
    var(--wx-col-temp);

  column-gap: var(--wx-gap);
  align-items:center;

  width:fit-content;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
} */

/* 오늘 ↔ 내일 사이만 간격 */
.weather-line + .weather-line{
  margin-top:16px;
}

.weather-line:last-of-type{
  margin-bottom: 5px;
}

/* 아이콘(1열) */
.wx-ico{
  grid-column: 1;
  width: var(--wx-icon-w);
  height: var(--wx-icon-h);
  object-fit: contain;     /* img일 때 안전 */
  justify-self: center;
  display: block;
}

/* 오늘/내일(2열) */
.weather-line .day{
  grid-column: 3;
  font-size: var(--wx-fs-lg);
  font-weight:700;
  letter-spacing:-0.015em;
  color:#5A5A5A;
  text-align:center;
  white-space: nowrap;
}

/* 최저(3열) */
.weather-line .tmin{
  grid-column: 5;
  font-size: var(--wx-fs-md);
  font-weight:500;
  letter-spacing:-0.015em;
  color:#008CC9;
  text-align:center;
  white-space: nowrap;
}

/* 최고(4열) */
.weather-line .tmax{
  grid-column: 7;
  font-size: var(--wx-fs-md);
  font-weight:500;
  letter-spacing:-0.015em;
  color:#B3490F;
  text-align:center;
  white-space: nowrap;
}

.weather-line .tmin,
.weather-line .tmax{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-variant-numeric: tabular-nums; /* 숫자 렌더링 안정 */
}

.tmin::after,
.tmax::after{
  content: "℃";              /* ← 핵심 */
  color: #5A5A5A;
  font-weight: 400;
  position: relative;
}

/* =========================================
   SUPPLY BOX (BOTTOM) - (원하면 유지)
   ========================================= */
.supply-box {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 18px 22px 16px 22px;
  box-sizing: border-box;
}

.supply-title {
  font-size: var(--wx-fs-lg);
  font-weight:700;
  letter-spacing:-0.015em;
  color:#5A5A5A;
  white-space: nowrap;

  margin-bottom: 12px; /* ← 여기서 간격 조절 */
}

/* .supply-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  padding-left: 10px;
} */

.supply-row {
  display: grid;
  grid-template-columns: auto 72px;
  align-items: center;
  padding: 7px 0;
  padding-left: 10px;
  padding-right: 10px;
}


.supply-row .label {
  font-size: var(--wx-fs-sm);
  font-weight:700;
  letter-spacing:-0.015em;
  color:#5A5A5A;
  white-space: nowrap;   /* '최고' 줄바꿈 방지 */
}

.supply-row .value {
  width: 72px;          /* ← 핵심 */
  font-size: var(--wx-fs-sm);
  letter-spacing: -0.015em;
  color: #5A5A5A;
  text-align: right;
}