/* ─────────────────────────────────────
   timetable.css – 共通スタイル
   ───────────────────────────────────── */
/* ── Play Floor テーマ変数 ── */
:root {
  --color-bg:           #f2f7fd;
  --color-surface:      #ffffff;
  --color-surface-alt:  #ffffff;
  --color-border:       #dce8f5;
  --color-border-hour:  #b8d0e8;
  --color-time-bg:      #e8f0fa;
  --color-time-text:    #4a6a8a;
  --color-header-bg:    #c6ddf5;
  --color-day-bg:       #c6ddf5;
  --color-day-weekend:  #c6ddf5;
  --color-day-text:     #4a6a8a;
  --color-sub-pf:       #5D7B0D;
  --color-sub-lr:       #5AA5A8;
  --color-closed-bg:    #dedede;
  --color-text-muted:   #2e5280;

  /* レッスン色 */
  --e1-bg:     #d7fbe8;
  --e1-border: #5af0a7;
  --e1-text:   #106a4f;
  --e2-bg:     #b8f5e6;
  --e2-border: #3ad8ab;
  --e2-text:   #0e5845;
  --e3-bg:     #d4edf0;
  --e3-border: #4a96bf;
  --e3-text:   #0a3840;

  --p1-bg:     #c4ffdf;
  --p1-border: #7af4b1;
  --p1-text:   #1a7a4c;
  --p2-bg:     #ccffc0;
  --p2-border: #8cf57a;
  --p2-text:   #107a37;

  --slot-height:    12px;
  --time-col-width: 52px;
  --day-col-width:  110px;
}


/* ── レイアウト ── */
.timetable__wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  margin: 0 auto 30px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

.timetable__body {
  display: grid;
  gap: 1px;                      /* border方式のためgapは0 */
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
}

/* ── ヘッダ ── */
.cell-title {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  padding: 0 14px;
}

.cell-title span {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-day-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cell-day {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.cell-time-corner {
  grid-column: 1;
  grid-row: 2 / 4;
}

.cell-sub {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── 時間ラベル（sticky） ── */
.time-label {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3px 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  position: sticky;
  left: 0;
  z-index: 2;
  border-top: 1px solid;      /* 色はテーマ変数で上書き */
  border-right: 1px solid;
}

/* ── 背景グリッドセル ── */
.slot-bg {
  z-index: 0;
  border-top: 1px solid;      /* 時間区切り横線 */
  border-right: 1px solid;    /* 列区切り縦線 */
}


/* ── レッスンブロック ── */
.lesson {
  border-radius: 6px;
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  z-index: 1;
  border-left: 3px solid transparent;
  /* 同一gridセルにslot-bgと重なるためmarginで微調整 */
  margin: 1px 2px 1px 0;
}

.lesson-name {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-weight: 600;
}

.lesson-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-day-text);
}

.lesson-cap {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-day-text);
}

/* ── レジェンド ── */
.timetable__legend {
  margin: 16px 0 30px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border-left: 3px solid transparent;
}

/* ── スクロールヒント ── */
.scroll-hint {
  font-size: 12px;
  text-align: right;
  margin: 60px 0 12px;
  color: var(--color-day-text);
}

.wrapper { /*max-width: 900px;*/ margin: 0 auto; }

  /* ── グリッド色設定 ── */
  .cell-title      { background: var(--color-header-bg); }
  .cell-time-corner{ background: var(--color-header-bg); }
  .cell-day        { background: var(--color-day-bg); color: var(--color-day-text); }
  .cell-day.weekend{ background: var(--color-day-weekend); }
  .cell-sub.pf     { background: var(--color-sub-pf); }
  .cell-sub.lr     { background: var(--color-sub-lr); }

  .time-label {
    background: var(--color-time-bg);
    color: var(--color-time-text);
    border-color: var(--color-border-hour);
  }

  .slot-bg {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
  .slot-bg.alt    { background: var(--color-surface-alt); }
  .slot-bg.closed { background: var(--color-closed-bg); }

  /* ── レッスン色 ── */
  .lesson.e1 { background: var(--e1-bg); border-left-color: var(--e1-border); }
  .lesson.e1 .lesson-name { color: var(--e1-text); }
  .lesson.e2 { background: var(--e2-bg); border-left-color: var(--e2-border); }
  .lesson.e2 .lesson-name { color: var(--e2-text); }
  .lesson.e3 { background: var(--e3-bg); border-left-color: var(--e3-border); }
  .lesson.e3 .lesson-name { color: var(--e3-text); }

  /* ── レッスン色 ── */
  .lesson.p1 { background: var(--p1-bg); border-left-color: var(--p1-border); }
  .lesson.p1 .lesson-name { color: var(--p1-text); }
  .lesson.p2 { background: var(--p2-bg); border-left-color: var(--p2-border); }
  .lesson.p2 .lesson-name { color: var(--p2-text); }

  /* ── レジェンド ── */
  .legend { /*max-width: 900px;*/ margin: 16px auto 0; }
  .legend-item { color: var(--color-text-muted); }
  .legend-swatch.p1 { background: var(--p1-bg); border-left-color: var(--p1-border); }
  .legend-swatch.p2 { background: var(--p2-bg); border-left-color: var(--p2-border); }
  .legend-swatch.e1 { background: var(--e1-bg); border-left-color: var(--e1-border); }
  .legend-swatch.e2 { background: var(--e2-bg); border-left-color: var(--e2-border); }
  .legend-swatch.e3 { background: var(--e3-bg); border-left-color: var(--e3-border); }
  .legend-swatch.closed { background: var(--color-closed-bg); border: 1px solid var(--color-border); }