/* =========================================================
   学園祭スケジュール：見た目とレイアウト（純CSS）
   - 1時間ピッチ(--hour)と上下インセット(--insetY)を全要素で共有
   - ラベル/線/イベントの縦基準を完全一致
   - 団体色は CSS 変数(--ev-bg/--ev-bd/--ev-fg)を JS で上書き
   ======================================================= */

:root{
  --bd:#dfe7f3;                 /* 枠線 */
  --ink:#0f2248;                /* 文字色 */
  --bg:#ffffff;                 /* カード背景 */
  --shadow:0 8px 24px rgba(6,20,59,.08);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:#f6f8fc;
  color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* ========== 外枠カード ========== */
.schedule-vgrid{
  max-width:760px;              /* 横幅やや細め */
  margin:20px auto;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow);
  font-size:.94rem;
}
.daytitle{
  margin:0 0 8px;
  font-size:.98rem;
  font-weight:800;
  color:#0d2b66;
}

/* ========== 1日ボード（10:00→17:00想定。別時間帯でもOK） ========== */
.dayboard{
  /* ▼ 時刻レンジ（分）。未指定なら JS がイベント群から自動設定 */
  --day-start:600;
  --day-end:1020;
  --len: calc(var(--day-end) - var(--day-start));

  /* ▼ 縦スケール（1時間あたりの高さ） */
  --hour:150px;                 /* 大きくすると縦が広くなる */
  --hours:7;                    /* JS が自動上書きすることもある */
  --insetY:12px;                /* 上下インセット（線/ラベル/イベント共通基準） */

  /* ▼ レイアウト寸法 */
  --ruler:86px;                 /* 左の時刻列の幅 */
  --pad:18px;                   /* 右キャンバスの左右余白 */

  /* ▼ イベント横幅（キャンバス幅に対する倍率） */
  --ev-scale:.86;               /* 要望どおり細め。さらに細くなら .80 等 */

  position:relative;
  display:grid;
  grid-template-columns:var(--ruler) 1fr;
  gap:10px;
  padding:10px;
  border:1px solid var(--bd);
  border-radius:12px;
  background:#fbfdff;

  /* 高さ = 時間ぶん + 上下インセット → 17:00で切れない */
  min-height: calc(var(--hour) * var(--hours) + 2 * var(--insetY));
}

/* ========== 左の時間目盛（.tick は JS が生成） ========== */
.timeruler{ position:relative; user-select:none; }
.timeruler .tick{
  position:absolute;
  left:0; right:0;
  transform:translateY(-50%);  /* 線の中心に文字を合わせる */
  text-align:right;
  padding-right:6px;
  font-weight:800;
  color:#123066;
  font-variant-numeric:tabular-nums;
  font-size:.94rem;
  pointer-events:none;
}

/* ========== 背景グリッド（右キャンバス：1時間ピッチ） ========== */
.gridlines{
  position:absolute;
  inset: var(--insetY) 10px var(--insetY) 10px;          /* 上下は --insetY に統一 */
  left: calc(var(--ruler) + 10px);                       /* 目盛幅＋隙間 */
  background:
    repeating-linear-gradient(
      to bottom,
      #e8eef8 0 1px,
      transparent 1px var(--hour)
    );
  border-left:1px solid #e2e8f4;                         /* 左端の縦ライン */
  border-radius:10px;
  pointer-events:none;
}

/* ========== イベント（色は CSS 変数で JS から上書き） ========== */
.ev{
  position:absolute;

  /* top/height は JS が px で直接セット（線と完全同期） */

  left: calc(var(--ruler) + var(--pad));
  width: calc((100% - var(--ruler) - 2*var(--pad)) * var(--ev-scale));

  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:8px 12px; line-height:1.25; font-weight:800;
  border-radius:12px;
  border:1px solid var(--ev-bd, #dfe7f3);
  background: var(--ev-bg, #f4f7ff);
  color:      var(--ev-fg, #0f2248);
  box-shadow:0 4px 14px rgba(12,28,75,.08);
  overflow:hidden;
}

/* ========== スマホ最適化 ========== */
@media (max-width:720px){
  .schedule-vgrid{ max-width:100%; padding:10px; font-size:.92rem; }
  .dayboard{
    --ruler:68px; --pad:12px; --hour:140px; --ev-scale:.90;
  }
  .timeruler .tick{ font-size:.92rem; padding-right:4px; }
  .ev{ font-size:.92rem; }
}