/* ==============================================================================
   タイムテーブル共通スタイル定義 (DRY徹底用)
   ============================================================================== */

.schedule-row { display: flex; align-items: center; padding: 8px; border-radius: 4px; font-size: 0.9rem; margin-bottom: 4px; }
.schedule-row.type-live { background: var(--sched-live-bg); }
.schedule-row.type-benefit { background: var(--sched-benefit-bg); }
.schedule-info { flex: 1; }
.schedule-type-badge { font-size: 0.8rem; font-weight: bold; padding: 2px 6px; border-radius: 4px; margin-right: 6px; background: rgba(0,0,0,0.1); }

/* リストビュー共有スタイル */
.perf-card { background: var(--card-bg); border-radius: 8px; padding: 15px; margin-bottom: 10px; border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 8px; }
.perf-name { font-size: 1.1rem; font-weight: bold; margin-bottom: 5px; border-bottom: 2px solid var(--border-color); padding-bottom: 4px; display: flex; justify-content: space-between; align-items: center;}
.perf-badges { display: flex; gap: 6px; font-size: 0.75rem; font-weight: normal; color: var(--text-color); flex-wrap: wrap; }
.badge { padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--header-bg); }
.hidden { display: none !important; }

/* タイムラインUI */
.tl-wrapper { flex: 1; width: 100%; overflow: auto; border: 1px solid var(--border-color); background: var(--card-bg); border-radius: 8px; position: relative; }

.tl-header-row { position: sticky; top: 0; background: var(--header-bg); z-index: 20; display: flex; min-width: max-content; border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.tl-corner { position: sticky; left: 0; width: 50px; min-width: 50px; background: var(--header-bg); z-index: 25; border-right: 1px solid var(--border-color); }

.tl-stage-th { text-align: center; padding: 12px 4px; font-weight: bold; font-size: 0.85rem; border-right: 1px solid var(--border-color); box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.tl-body { display: flex; position: relative; min-width: max-content; }
.tl-time-col { position: sticky; left: 0; width: 50px; min-width: 50px; background: var(--header-bg); z-index: 15; border-right: 1px solid var(--border-color); box-shadow: 2px 0 4px rgba(0,0,0,0.05); }

.tl-grid { position: relative; flex: 1; }

.tl-block { position: absolute; box-sizing: border-box; padding: 4px; font-size: 0.8rem; border-radius: 4px; border: 1px solid; cursor: pointer; transition: opacity 0.1s; overflow: hidden; }
.tl-block:active { opacity: 0.6; }
.tl-block.type-live { background: var(--tl-live-bg); border-color: var(--tl-live-border); }
.tl-block.type-benefit { background: var(--tl-benefit-bg); border-color: var(--tl-benefit-border); }