/* ==========================================================
   ワクチン接種カレンダー CSS（既存サイト組み込み対応版）
   ・全クラス名を "vax-cal-" で名前空間化し、既存サイトのCSSと
     衝突しないようにしています（.calendar 等の汎用名は使いません）
   ・box-sizing のリセットもページ全体(*)ではなく、
     このカレンダーの内部だけに限定しています
   ・色は :root 変数で一括管理
   ・全体の高さは「日付セルの正方形×週数」で自動的に決まる
     （5週の月と6週の月で高さが変わるのは仕様どおりです）
   ・文字サイズは cqw（コンテナ自身の幅基準）で指定しているため、
     ページ内にこのカレンダーを複数・異なる幅で並べても崩れません
   ========================================================== */

:root {
  /* ---- 配色（ここを変えるだけで全体の色を変更できます） ---- */
  --bg-color: #e6b3ff;              /* カレンダー全体の背景色 */
  --cell-bg: #ffffff;               /* 通常日の背景色 */
  --special-bg: #662d91;            /* 特別枠設定日の背景色／月見出し／凡例の色 */

  --weekday-text: #ffffff;          /* 月〜金 曜日見出しの文字色 */
  --saturday-accent: #009fe8;       /* 土曜日の文字色（見出し・日付） */
  --sunday-accent: #df0011;         /* 日曜日の文字色（見出し・日付） */
  --weekday-header-outline: #ffffff;/* 土日見出し文字の縁取り色 */

  --day-text: #595757;              /* 平日（月〜金）の日付文字色 */
  --special-day-text: #ffffff;      /* 特別枠セル内（平日）の文字色 */
  --special-saturday-text: #d4eef9; /* 特別枠セル内（土曜）の文字色 */
  --special-sunday-text: #ffd0d4;   /* 特別枠セル内（日曜）の文字色 */

  --grid-gap: 3px;                  /* セル間の隙間 */
  --side-padding: clamp(10px, 4%, 24px); /* 上下左右で共通の余白（均等にするため1つの変数に統一） */
}

/* 既存サイト側のCSS（例：div幅の固定、line-heightの上書きなど）を
   このカレンダーの内部だけ無効化し、ブラウザ標準の状態に戻してから
   再構築する。all:unsetではなくall:revertを使うことで、
   「サイト側の独自CSSだけを無効化し、ブラウザ既定のdiv/spanの
   挙動（displayなど）は保つ」という安全な戻し方にしている。 */
.vax-calendar,
.vax-calendar * {
  all: revert;
  box-sizing: border-box;
}

.vax-calendar {
  container-type: inline-size;      /* 以下の cqw をこの要素自身の幅基準にする */
  width: 600px;
  max-width: 100%;
  background: var(--bg-color);
  /* 注意：この要素自身の padding には cqw を使わないこと。
     「自分の幅を基準にするコンテナ」が「自分の余白（＝自分の幅に影響しうる値）」を
     cqwで決めようとすると自己参照になり、ブラウザによっては
     小さい暫定サイズのまま確定してしまう不具合が実際に発生した
     （中身だけ小さいまま・下に大きな余白ができる症状）。
     そのため --side-padding は cqw ではなく %（親要素の幅基準）にしている。
     子要素（ヘッダーや日付セルの文字サイズ等）でcqwを使うのは問題ない。 */
  padding: var(--side-padding);     /* 上下左右すべて同じ値＝均等な余白 */
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  display: block;
}

/* ---- ヘッダー：年月表示 + 凡例 ---- */
.vax-cal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 1.5cqw;
  margin-bottom: 2cqw;
}

.vax-cal-year {
  color: var(--special-bg);
  font-weight: 700;
  font-size: clamp(12px, 2.6cqw, 18px);
  margin-right: 0.4em;
}
.vax-cal-month {
  color: var(--special-bg);
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: baseline;
}
.vax-cal-month-num { font-size: clamp(28px, 8.5cqw, 52px); }
.vax-cal-month-label { font-size: clamp(14px, 3.2cqw, 20px); margin-left: 0.15em; }

.vax-cal-legend {
  display: flex;
  align-items: center;
  color: var(--special-bg);
  font-weight: 700;
  font-size: clamp(11px, 2.6cqw, 17px);
  white-space: nowrap;
}
.vax-cal-legend-box {
  width: 1.5em;
  height: 1.5em;
  background: var(--special-bg);
  margin-right: 0.35em;
  flex-shrink: 0;
}

/* ---- 曜日見出し行 ---- */
.vax-cal-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 1.5cqw;
}
.vax-cal-weekday {
  color: var(--weekday-text);
  font-weight: 700;
  font-size: clamp(14px, 3.6cqw, 24px);
}
.vax-cal-weekday.sat {
  color: var(--saturday-accent);
  -webkit-text-stroke: 3px var(--weekday-header-outline);
  paint-order: stroke fill;
}
.vax-cal-weekday.sun {
  color: var(--sunday-accent);
  -webkit-text-stroke: 3px var(--weekday-header-outline);
  paint-order: stroke fill;
}

/* ---- 日付グリッド ----
   行の高さは指定せず、各セルを aspect-ratio:1/1 の正方形にすることで
   「列幅（コンテナ幅÷7）＝行の高さ」を自動算出させる。
   これにより全体の高さ＝ヘッダー＋曜日行＋（正方形セル×週数）となり、
   5週の月・6週の月で自然に高さが変わる。 */
.vax-cal-days {
  display: grid;
  /* minmax(0, 1fr) が重要：初期値の 1fr は "minmax(auto, 1fr)" と同じ意味で、
     セル内の文字（特に data-notes の時間帯テキストのような改行禁止の文字列）
     が長いと、その列の最小幅が広がり、右側の列がはみ出す原因になる。
     0 を指定することで「中身より縮められない」制約を外し、
     常にコンテナ幅を7等分させる。 */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.vax-cal-day {
  aspect-ratio: 1 / 1;
  background: var(--cell-bg);
  color: var(--day-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  min-width: 0;   /* グリッドアイテムの自動最小幅を解除し、はみ出しを防ぐ */
  overflow: hidden; /* 万一、時間帯テキストがセル幅を超えても隣のセルに被らないようにする */
}
.vax-cal-day.empty { background: transparent; }

.vax-cal-day-num {
  font-weight: 700;
  font-size: clamp(16px, 4.6cqw, 30px);
}
.vax-cal-day-note {
  /* 日付の下に表示する時間帯の小さいテキスト。色は数字と連動（currentColor）。
     幅が狭い（スマホ等）ときに「19:00-20:00」のような文字列がセル幅を
     超える場合があるため、nowrapにはせず、必要なら2行に折り返す
     （overflow:hiddenと合わせて、見切れて読めなくなるのを防ぐ）。 */
  font-weight: 700;
  font-size: clamp(9px, 2.6cqw, 13px);
  line-height: 1.05;
  margin-top: 0.1em;
  color: currentColor;
  text-align: center;
}

.vax-cal-day.sat { color: var(--saturday-accent); }
.vax-cal-day.sun { color: var(--sunday-accent); }

.vax-cal-day.special {
  background: var(--special-bg);
  color: var(--special-day-text);
}
.vax-cal-day.special.sat { color: var(--special-saturday-text); }
.vax-cal-day.special.sun { color: var(--special-sunday-text); }