@charset "utf-8";
/* =========================================================
   湯温の温度計
   サーバー出力：
     <div class="hot-spring-temperature hot-spring-temperature--hot">
       <span class="hot-spring-temperature__value">42.0℃</span>
     </div>
   ガラス管・液面・目盛り・球のマークアップと --temp は
   js/thermometer.js が組み立てる（サーバー側で出力できれば JS 不要）。
   ========================================================= */
.hot-spring-temperature {
  --min: 30;                    /* 目盛りの下限（液面計算用） */
  --max: 45;                    /* 目盛りの上限（液面計算用） */
  --temp: 38;

  --liquid: #f6c445;            /* 38℃以下：黄色 */
  --glass:  #e3e7ee;            /* ガラス（枠） */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* 38℃超（サーバーが --hot を付与）：赤 */
.hot-spring-temperature--hot { --liquid: #e94b34 }

/* ---- 温度計の絵（ガラス管＋球） ---- */
.thermometer__figure {
  position: relative;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.thermometer__tube {
  position: relative;
  width: 20px;
  height: 92px;
  border: 3px solid var(--glass);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 2;
}
/* 液体（下から液面まで満たす） */
.thermometer__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(0%, calc((var(--temp) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);
  background: var(--liquid);
  transition: height .5s ease, background-color .3s ease;
  animation: thermo-rise 1.4s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes thermo-rise { from { height: 0 } }
@media (prefers-reduced-motion: reduce) {
  .thermometer__fill { animation: none }
}
/* 球（リザーバー：常に液色で満たす） */
.thermometer__bulb {
  position: relative;
  width: 34px;
  height: 34px;
  margin-top: -8px;
  border: 3px solid var(--glass);
  border-radius: 50%;
  background: var(--liquid);
  box-sizing: border-box;
  z-index: 1;
  transition: background-color .3s ease;
}
/* 管と球のつなぎ目（首）を液色で塗ってシームを消す */
.thermometer__tube::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -3px;
  transform: translateX(-50%);
  width: 9px; height: 11px;
  background: var(--liquid);
  z-index: 3;
}
/* 目盛り */
.thermometer__scale {
  position: absolute;
  top: 8px; bottom: 8px; right: 3px;
  width: 7px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.thermometer__scale span {
  display: block;
  height: 2px;
  width: 5px;
  background: rgba(0,0,0,.18);
  align-self: flex-end;
  border-radius: 2px;
}
.thermometer__scale span:nth-child(odd) { width: 3px }

/* ---- 温度の数値 ---- */
.hot-spring-temperature__value {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  letter-spacing: -.03em;
  line-height: 1;
}
.hot-spring-temperature__value small {
  font-size: .62em;
  font-weight: 700;
  margin-left: 1px;
}

/* =========================================================
   カード内のレイアウト
   グラフと温度計を横並び、施設名とお知らせは全幅
   （ラッパを足さずに済むよう grid で配置）
   ========================================================= */
.facility {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  column-gap: 4%;
}
.facility > .facility-en,
.facility > .facility-name,
.facility > .mark-info-wrap,
.facility > .temporary-closure-notice {
  grid-column: 1 / -1;
}
.facility > .chart {
  grid-column: 1;
  min-width: 0;
  /* stretch のままだと温度計側の高さまで .chart が伸び、
     top:50% で置いている％がグラフの中心より下にずれる */
  align-self: start;
}
.facility > .chart canvas { max-width: 100% }
.facility > .hot-spring-temperature {
  grid-column: 2;
  align-self: center;
  margin-top: 22px;
}
/* 休湯中のカードは湯温を出さない（サーバーが出力していても隠す） */
.facility.closing { grid-template-columns: 1fr }
.facility.closing .hot-spring-temperature { display: none }

@media screen and (max-width: 959px) {
  .thermometer__figure { width: 40px }
  .thermometer__tube { width: 18px; height: 78px }
  .thermometer__bulb { width: 30px; height: 30px }
  .hot-spring-temperature__value { font-size: 1.4rem }
  .facility { column-gap: 3% }
}
/* ％の数字
   ・body の letter-spacing:1px が効いて広いので詰める
   ・サイズはドーナツの直径（＝.chart の幅）に追従させる
     → コンテナクエリ単位 cqw。1cqw = .chart の幅の1% */
.chart { container-type: inline-size }
/* ドーナツの内側（穴）は直径の約50%。はみ出さないよう .count ごと
   コンテナ幅に追従させ、「%」も同じ基準（em）で位置を決める。 */
.chart .count { font-size: clamp(16px, 24cqw, 41px) }
.chart em {
  font-size: 1em;
  letter-spacing: -.03em;
  transform: translateX(-.14em);   /* 「%」と重ならないよう数字を少し左へ */
}
.chart .caption {
  font-size: .34em;
  right: -.72em;
  bottom: .1em;
}

/* SPは％の数字を画面幅追従で小さめに（style.css は 40px 固定） */
@media screen and (max-width: 600px) {
  .chart .count { font-size: clamp(20px, 6.2vw, 30px) }
}
@media screen and (max-width: 640px) {
  .thermometer__figure { width: 34px }
  .thermometer__tube { width: 16px; height: 66px }
  .thermometer__bulb { width: 26px; height: 26px }
  .hot-spring-temperature__value { font-size: 1.2rem }
  .facility { column-gap: 6px }
}

/* =========================================================
   「入浴 :N」バッジ — チャート右上に重ねる
   canvas 内の凡例は js/chart-badge.js で停止している
   ========================================================= */
.chart { position: relative }
.chart-badge {
  position: absolute;
  top: 4px;
  right: -6px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(0,0,0,.8);
  color: #fff;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
.chart-badge__swatch {
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  box-sizing: border-box;
}
@media screen and (max-width: 640px) {
  .chart-badge { font-size: 12px; padding: 4px 9px; right: -4px }
}