/* 混雑メーター — おぎくぼ小児科 HP の配色・角丸・見出しに合わせる（2026-10-20）
   HP: 白地 / 文字 #333 / リンク青 #1176d4 / ボタン #ffb094 / クリーム #fff8eb / 角丸 4px / Noto Sans JP 700 の見出し
   マスコットの黄・緑・水色をゲージの色に使う。 */
:root {
  --bg: #ffffff;
  --cream: #fff8eb;
  --gray: #f7f7f7;
  --ink: #333333;
  --ink-2: #666666;
  --line: #e9e4d8;
  --blue: #1176d4;
  --navy: #04384c;
  --salmon: #ffb094;
  --yellow: #f6d55c;
  --green: #b9d87a;
  --teal: #9fd7d0;
  --red: #e2563b;
  --red-bg: #fdeae5;
  --radius: 4px;
  --space: clamp(14px, 3.5vw, 22px);
  --dur: 600ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color: var(--ink); font-size: 14px; line-height: 1.7; font-feature-settings: "palt";
}
.meter { max-width: 420px; margin: 0 auto; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* 見出し: HP のセクション見出しと同じ 700・#333・字間 0.2px */
.meter__head { padding: 14px var(--space) 10px; background: var(--cream); }
.meter__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .2px; line-height: 1.4; }
.meter__title small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.meter__date { margin: 2px 0 0; font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meter__kind { padding: 0 8px; border-radius: 30px; background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.meter__updated { margin-left: auto; }

.now { padding: 14px var(--space) var(--space); }
.now__status { margin: 0 0 10px; font-size: 22px; font-weight: 700; letter-spacing: .02em; }
[data-level="very_busy"] .now__status { color: var(--red); }

/* 1 本ゲージ: 左が空いている、右が混んでいる。6 等分で右端 1/6 は赤ゾーン。「今日」のラベルはバーの上、端の文字はバーの直下 */
.gauge { position: relative; padding: 26px 0 0; }
.gauge__bar {
  position: relative; height: 18px; border-radius: 30px; overflow: hidden;
  background: linear-gradient(90deg, var(--teal) 0%, var(--green) 30%, var(--yellow) 58%, var(--salmon) 83%);
}
.gauge__danger {
  position: absolute; top: 0; bottom: 0; right: 0; width: 16.7%;
  background: var(--red);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 5px, transparent 5px 10px);
}
.gauge__marker { position: absolute; top: 0; left: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; transition: left var(--dur) var(--ease); pointer-events: none; }
.gauge__marker b { order: 0; font-size: 10px; font-weight: 700; color: #fff; background: var(--navy); padding: 0 6px; border-radius: 30px; line-height: 1.6; margin-bottom: 3px; }
.gauge__marker i { order: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.gauge__labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--ink-2); line-height: 1.5; }
.gauge__labels-danger { color: var(--red); font-weight: 700; }
[data-level="loading"] .gauge__marker, [data-level="none"] .gauge__marker { opacity: 0; }

.now__alert { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--radius); background: var(--red-bg); color: var(--red); font-weight: 700; font-size: 13px; border-left: 4px solid var(--red); }
.now__alert[hidden] { display: none; }
.wait__row[data-walkin="closed"] { background: var(--red-bg); }
.wait__row[data-walkin="open"] { background: #eef7ee; }
.wait__row[data-walkin="open"] .wait__state { color: #2a7a48; }
.wait__walkin-note { grid-column: 1 / -1; font-size: 11px; line-height: 1.5; color: var(--ink-2); margin-top: 2px; }
.wait__walkin-note[hidden] { display: none; }
.wait__row[data-walkin="closed"] dd { color: var(--red); font-size: 16px; white-space: normal; }
.wait__since { color: var(--ink-2); font-size: 11px; white-space: nowrap; }

/* 待ち時間 */
.wait { margin: 12px 0 0; display: grid; gap: 6px; }
.wait__row { display: grid; grid-template-columns: 6.5em 1fr auto; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--gray); border-radius: var(--radius); }
.wait__row dt { margin: 0; font-size: 12px; color: var(--ink-2); font-weight: 700; }
.wait__row dd { margin: 0; font-size: clamp(16px, 4.6vw, 20px); font-weight: 700; color: var(--ink); white-space: nowrap; }
[data-level="very_busy"] .wait__row:last-child dd { color: var(--red); }
.wait__note { margin: 6px 2px 0; font-size: 11px; color: var(--ink-2); }
.now__note { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }

.sec-heading { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .2px; padding-left: 10px; border-left: 4px solid var(--salmon); line-height: 1.4; }
/* 待ち時間を減らすための案内（例年・1 週間の欄の代わり。院長指示 2026-10-20） */
.tips { padding: 12px var(--space) 16px; border-top: 1px solid var(--line); }
.tips__list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tips__list li { position: relative; padding: 8px 12px 8px 30px; background: var(--gray); border-radius: var(--radius); font-size: 14px; font-weight: 700; line-height: 1.4; }
.tips__list li::before { content: '✓'; position: absolute; left: 11px; top: 8px; color: var(--salmon); font-weight: 700; }
.tips__list li small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.tips__item--btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tips__btn { flex: none; padding: 7px 14px; border-radius: var(--radius); background: var(--salmon); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, transform .15s; }
.tips__btn:hover { background: #ff9a78; }
.tips__btn:active { transform: translateY(1px); }
.tips__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }