/* 予約カレンダー共通CSS - shop.cssを補完 */

/* パック色（番号順に循環） - 6色 */
.studio_reserve_time_table tbody td.is_pack_1,
.studio_all_reserve_time_table tbody td.is_pack_1 {
    background: #fff3e0;
}
.studio_reserve_time_table tbody td.is_pack_2,
.studio_all_reserve_time_table tbody td.is_pack_2 {
    background: #e3f2fd;
}
.studio_reserve_time_table tbody td.is_pack_3,
.studio_all_reserve_time_table tbody td.is_pack_3 {
    background: #e8f5e9;
}
.studio_reserve_time_table tbody td.is_pack_4,
.studio_all_reserve_time_table tbody td.is_pack_4 {
    background: #f3e5f5;
}
.studio_reserve_time_table tbody td.is_pack_5,
.studio_all_reserve_time_table tbody td.is_pack_5 {
    background: #fce4ec;
}
.studio_reserve_time_table tbody td.is_pack_6,
.studio_all_reserve_time_table tbody td.is_pack_6 {
    background: #fffde7;
}

/* 予約可能セル */
.studio_reserve_time_table tbody td.available,
.studio_all_reserve_time_table tbody td.available {
    cursor: pointer;
}
.studio_reserve_time_table tbody td.available:hover,
.studio_all_reserve_time_table tbody td.available:hover {
    background: #f0f0f0;
}
.studio_reserve_time_table tbody td.is_pack_1:hover { background: #ffe0b2; }
.studio_reserve_time_table tbody td.is_pack_2:hover { background: #bbdefb; }
.studio_reserve_time_table tbody td.is_pack_3:hover { background: #c8e6c9; }
.studio_reserve_time_table tbody td.is_pack_4:hover { background: #e1bee7; }
.studio_reserve_time_table tbody td.is_pack_5:hover { background: #f8bbd0; }
.studio_reserve_time_table tbody td.is_pack_6:hover { background: #fff9c4; }
.studio_all_reserve_time_table tbody td.is_pack_1:hover { background: #ffe0b2; }
.studio_all_reserve_time_table tbody td.is_pack_2:hover { background: #bbdefb; }
.studio_all_reserve_time_table tbody td.is_pack_3:hover { background: #c8e6c9; }
.studio_all_reserve_time_table tbody td.is_pack_4:hover { background: #e1bee7; }
.studio_all_reserve_time_table tbody td.is_pack_5:hover { background: #f8bbd0; }
.studio_all_reserve_time_table tbody td.is_pack_6:hover { background: #fff9c4; }

/* 予約不可（×）セル */
.studio_reserve_time_table tbody td.reserved,
.studio_all_reserve_time_table tbody td.reserved {
    color: #9d9d9d;
}

/* 枠なし（-）セル */
.studio_reserve_time_table tbody td.none,
.studio_all_reserve_time_table tbody td.none {
    color: #ccc;
    background: #f9f9f9;
}

/* ○表示 */
.studio_reserve_time_table tbody td .circle,
.studio_all_reserve_time_table tbody td .circle {
    color: #56badb;
    font-size: 1.6rem;
    font-weight: 700;
}

/* 料金表示 */
.studio_reserve_time_table tbody td .price,
.studio_all_reserve_time_table tbody td .price {
    font-size: 1.1rem;
    line-height: 1.3;
}
.studio_reserve_time_table tbody td .price small,
.studio_all_reserve_time_table tbody td .price small {
    font-size: 1.0rem;
    opacity: 0.85;
}

/* 凡例 */
.studio_reserve_legend {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 8px;
    font-size: 1.3rem;
}
.studio_reserve_legend_item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.studio_reserve_legend_color {
    width: 18px;
    height: 18px;
    border: 1px solid #999;
    display: inline-block;
}

/* 表示切替ボタン */
.studio_reserve_view_toggle {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-bottom: 10px;
}
.studio_reserve_view_toggle button {
    padding: 6px 16px;
    border: 1px solid #c2c2c2;
    background: #fff;
    cursor: pointer;
    font-size: 1.3rem;
    border-radius: 3px;
    font-weight: 700;
}
.studio_reserve_view_toggle button.active {
    background: #333;
    color: #fff;
    border-color: #333;
}
.studio_reserve_view_toggle button:hover:not(.active) {
    background: #f5f5f5;
}

/* 深夜帯（23:30〜06:00）レーン分離: 背景はセル本来の色を尊重する。
   通常枠=白 / パック=パック色。レーンは左の時刻ラベル(deep-night-label, オレンジ)で区別。
   ※ 以前は一律 #fff8e1 にしていたが、通常枠(23:30等)がパックに見えるため廃止。 */
.studio_reserve_time_table tr.deep-night-row td.reserved,
.studio_all_reserve_time_table tr.deep-night-row td.reserved {
    background: #ffebee;
}
.studio_reserve_time_table tr.deep-night-row td.none,
.studio_all_reserve_time_table tr.deep-night-row td.none {
    background: #f5f5f5;
}
/* 時間軸（左の時刻列）は深夜帯/パックでも通常の .time セルと同じ色にする（オレンジ強調を廃止）。
   背景・文字色は .time の指定（スクロール時 #fafafa 等）をそのまま継承させるため、上書きしない。 */
.dn-title { font-size: 11px; font-weight: 700; color: #3e3e3e; }
.dn-time { font-size: 10px; color: #888; line-height: 1.3; margin-top: 4px; }
.studio_reserve_time_table td.pack-merged,
.studio_all_reserve_time_table td.pack-merged { vertical-align: middle; }

/* Frozen pane — 時刻列固定 + 日付ヘッダー上固定 */
/* shop_detail / studio_detail のスクロールラッパー両方に適用 */
.studio_reserve_calendar_scroll,
.studio_reserve_time_table_scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 480px;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.studio_reserve_calendar_scroll .studio_reserve_time_table,
.studio_reserve_calendar_scroll .studio_all_reserve_time_table,
.studio_reserve_time_table_scroll .studio_reserve_time_table,
.studio_reserve_time_table_scroll .studio_all_reserve_time_table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.studio_reserve_calendar_scroll thead th,
.studio_reserve_time_table_scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f9f9f9;
}
.studio_reserve_calendar_scroll tbody td.time,
.studio_reserve_calendar_scroll tbody td.deep-night-label,
.studio_reserve_time_table_scroll tbody td.time,
.studio_reserve_time_table_scroll tbody td.deep-night-label {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fafafa;
}
.studio_reserve_calendar_scroll thead th:first-child,
.studio_reserve_time_table_scroll thead th:first-child {
    z-index: 4;
}