/* ==========================================
   MYスケジュール（ショートコード [hoseifes_schedule]）
   タイムテーブルと同じポップなデザイン：黒い枠・ずらした色の影・丸ゴシック

   ※ ほかのCSSに同じ名前があっても崩れないように、すべて #fes-myschedule の中だけに効くように書く
   ※ 行の高さ・見出しの高さ・時間の列の幅はスクリプト側（SIZE_PC / SIZE_SP）とセット。数字は変えない
   ========================================== */

#fes-myschedule {
    --ms-ink: #1a1a1a;
    --ms-paper: #fffdfb;
    --ms-pink: #ff2d95;
    --ms-pink-soft: #ff8fd4;
    --ms-cyan: #00c2ff;
    --ms-cyan-soft: #7fe8ff;
    --ms-yellow: #ffd400;
    --ms-yellow-soft: #fff44f;
    --ms-green-soft: #b9f6a8;
    --ms-font: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;

    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: none;
    font-family: var(--ms-font);
    color: var(--ms-ink);
}
#fes-myschedule button {
    font-family: var(--ms-font);
}

#fes-myschedule .my-schedule-title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--ms-ink);
}
#fes-myschedule .my-schedule-title:empty {
    display: none;
}

/* 説明（ステージ＝日時固定／教室・屋台＝ドラッグで移動） */
#fes-myschedule .my-schedule-note {
    margin: 0 0 10px !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.9;
    color: #4a4a4a;
}
#fes-myschedule .my-legend {
    display: inline-block;
    margin-right: 4px;
    padding: 0 8px;
    border: 1.5px solid var(--ms-ink);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.6;
    color: var(--ms-ink);
    vertical-align: 1px;
}
#fes-myschedule .my-legend-stage { background: var(--ms-pink-soft); }
#fes-myschedule .my-legend-club { background: var(--ms-yellow-soft); border-style: dashed; }
#fes-myschedule .my-legend-sep { display: inline-block; width: 10px; }

/* 配置をリセット */
#fes-myschedule .my-schedule-actions {
    margin-bottom: 12px;
}
#fes-myschedule .my-btn-small {
    padding: 4px 14px;
    background: #fff !important;
    border: 2px solid var(--ms-ink) !important;
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--ms-ink);
    color: var(--ms-ink) !important;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#fes-myschedule .my-btn-small:hover {
    background: var(--ms-yellow-soft) !important;
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--ms-ink);
}

/* ---- 表の外枠 ---- */
#fes-myschedule .my-schedule-scroll-area {
    position: relative;
    overflow: auto;
    overscroll-behavior: none;   /* 端まで引っぱってもバウンドせず、見出しが動かない */
    max-height: 75vh;
    margin-right: 4px;           /* 影が切れないように */
    background: var(--ms-paper) !important;
    border: 2px solid var(--ms-ink) !important;
    border-radius: 16px 6px 16px 6px;
    box-shadow: 4px 4px 0 var(--ms-pink) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#fes-myschedule .my-schedule-grid {
    position: relative;
    display: grid;
    grid-template-columns: 70px repeat(4, minmax(200px, 1fr));
    grid-template-rows: 48px repeat(51, 22px);
    min-width: 870px;
}

/* ---- 見出し（時間・日付）---- */
#fes-myschedule .my-time-col-header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 20;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-ink) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    border: 0 !important;
    border-bottom: 2px solid var(--ms-ink) !important;
    box-shadow: none !important;
}
#fes-myschedule .my-day-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-pink-soft) !important;
    color: var(--ms-ink) !important;
    font-size: 13px;
    font-weight: 800;
    text-shadow: none;
    border: 0 !important;
    border-bottom: 2px solid var(--ms-ink) !important;
    border-left: 1.5px solid var(--ms-ink) !important;
    box-shadow: none !important;
}
/* 日付ごとに色を変える（1日目 ピンク／2日目 水色／3日目 黄色／4日目 黄緑） */
#fes-myschedule .my-day-header:nth-child(3) { background: var(--ms-cyan-soft) !important; }
#fes-myschedule .my-day-header:nth-child(4) { background: var(--ms-yellow-soft) !important; }
#fes-myschedule .my-day-header:nth-child(5) { background: var(--ms-green-soft) !important; }

/* ---- 時間の列 ---- */
#fes-myschedule .my-time-label {
    position: sticky;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-paper) !important;   /* 透けないようにして、固定されて見えるようにする */
    color: #555 !important;
    font-size: 11px;
    font-weight: 700;
    border: 0 !important;
    border-right: 2px solid var(--ms-ink) !important;
}

/* ---- 日付ごとの列（カードはこの中に絶対配置）。30分ごとに薄い横線 ---- */
#fes-myschedule .my-day-col {
    position: relative;
    border-left: 1.5px solid rgba(26, 26, 26, 0.18);
    background-image: linear-gradient(to bottom, transparent 65px, rgba(26, 26, 26, 0.08) 65px) !important;
    background-size: 100% 66px !important;
}

/* ---- 予定カード共通 ---- */
#fes-myschedule .my-act-card {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding: 4px 6px;
    background: #fff !important;
    border: 2px solid var(--ms-ink) !important;
    border-radius: 10px 4px 10px 4px !important;
    box-shadow: 2px 2px 0 var(--ms-pink) !important;
    font-size: 11px;
    overflow-wrap: anywhere;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
#fes-myschedule .my-act-card::before,
#fes-myschedule .my-act-card::after {
    content: none !important;
    display: none !important;
}

/* 固定カード（ステージ企画） */
#fes-myschedule .my-act-card.fixed-act {
    background: #fff !important;
}

/* 移動できるカード（教室・屋台企画）：点線の枠・黄色の影 */
#fes-myschedule .my-act-card.draggable-act {
    cursor: grab;
    background: #fffde6 !important;
    border-style: dashed !important;
    box-shadow: 2px 2px 0 var(--ms-yellow) !important;
}
#fes-myschedule .my-act-card.is-dragging {
    z-index: 8;
    cursor: grabbing;
    opacity: 0.92;
    box-shadow: 5px 5px 0 var(--ms-ink) !important;
}
#fes-myschedule .drag-handle {
    margin: -4px 0 -4px -6px;
    padding: 4px 6px;
    color: var(--ms-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: grab;
    touch-action: none; /* スマホでこの部分だけはスクロールせずドラッグできる */
}
#fes-myschedule .drop-preview {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 7;
    box-sizing: border-box;
    padding: 2px 6px;
    background: rgba(255, 45, 149, 0.1);
    border: 2px dashed var(--ms-pink);
    border-radius: 10px 4px 10px 4px;
    color: var(--ms-pink);
    font-size: 10px;
    font-weight: 800;
    pointer-events: none;
}

/* ステージ名・「自由移動可」のチップ */
#fes-myschedule .draggable-badge,
#fes-myschedule .stage-badge {
    display: inline-block;
    max-width: fit-content;
    margin-top: 2px;
    padding: 0 6px;
    border: 1.5px solid var(--ms-ink);
    border-radius: 999px;
    background: var(--ms-yellow-soft);
    color: var(--ms-ink);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.5;
}
#fes-myschedule .stage-badge {
    background: var(--ms-cyan-soft);
}

#fes-myschedule .my-act-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
}
#fes-myschedule .my-act-left {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
#fes-myschedule .my-act-time {
    color: var(--ms-pink) !important;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#fes-myschedule .my-act-title {
    margin-top: 3px;
    color: var(--ms-ink) !important;
    font-weight: 800;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* × ボタン */
#fes-myschedule .btn-remove-my-act {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: #fff !important;
    border: 1.5px solid var(--ms-ink) !important;
    border-radius: 50%;
    color: var(--ms-ink) !important;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
#fes-myschedule .btn-remove-my-act:hover {
    background: var(--ms-pink) !important;
    border-color: var(--ms-pink) !important;
    color: #fff !important;
}

/* まだ何も入っていないとき */
#fes-myschedule .my-empty-view {
    padding: 50px 20px;
    background: var(--ms-paper);
    border: 2px dashed var(--ms-ink);
    border-radius: 16px 6px 16px 6px;
    color: #4a4a4a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    white-space: pre-line;
}

/* ---- 天気モード（通常 / 雨天時）---- */
#fes-myschedule .my-weather-bar {
    margin-bottom: 10px;
}
#fes-myschedule .my-weather-bar .fes-weather {
    justify-content: flex-start;
    margin-bottom: 0;
}
/* 雨天時モードのときは、ピンクのところを水色にする */
#fes-myschedule.is-rain .my-schedule-scroll-area {
    box-shadow: 4px 4px 0 var(--ms-cyan) !important;
}
#fes-myschedule.is-rain .my-act-card.fixed-act {
    box-shadow: 2px 2px 0 var(--ms-cyan) !important;
}
#fes-myschedule.is-rain .my-act-time {
    color: #0088bb !important;
}

/* ==========================================
   スマホ用（画面幅600px以下）：全体を小さく表示
   ※ 行の高さ・見出しの高さはスクリプト側（SIZE_SP）とセットです
   ========================================== */
@media (max-width: 600px) {
    #fes-myschedule .my-schedule-title { font-size: 15px; margin-bottom: 6px; }
    #fes-myschedule .my-schedule-note { font-size: 11px; margin-bottom: 8px !important; }
    #fes-myschedule .my-weather-bar { margin-bottom: 8px; }
    #fes-myschedule .my-schedule-actions { margin-bottom: 8px; }
    #fes-myschedule .my-btn-small { font-size: 11px; padding: 3px 10px; }

    /* 表だけを画面の左右いっぱいまで広げる */
    #fes-myschedule .my-schedule-scroll-area {
        width: calc(100vw - 12px);
        margin-left: calc(50% - 50vw + 4px);
        margin-right: 0;
        border-radius: 10px 4px 10px 4px;
        box-shadow: 3px 3px 0 var(--ms-pink) !important;
        max-height: 70vh;
    }
    #fes-myschedule.is-rain .my-schedule-scroll-area {
        box-shadow: 3px 3px 0 var(--ms-cyan) !important;
    }
    #fes-myschedule .my-schedule-grid {
        grid-template-columns: 42px repeat(4, minmax(112px, 1fr));
        min-width: 490px;
    }
    #fes-myschedule .my-day-header { font-size: 10px; border-left-width: 1px !important; }
    #fes-myschedule .my-time-col-header { font-size: 10px; }
    #fes-myschedule .my-time-label { font-size: 9px; border-right-width: 1.5px !important; }

    /* 30分ごとの区切り線（16px × 3行 = 48px） */
    #fes-myschedule .my-day-col {
        background-image: linear-gradient(to bottom, transparent 47px, rgba(26, 26, 26, 0.08) 47px) !important;
        background-size: 100% 48px !important;
    }

    #fes-myschedule .my-act-card {
        padding: 2px 4px;
        border-width: 1.5px !important;
        border-radius: 7px 3px 7px 3px !important;
        box-shadow: 1.5px 1.5px 0 var(--ms-pink) !important;
        font-size: 10px;
    }
    #fes-myschedule .my-act-card.draggable-act {
        box-shadow: 1.5px 1.5px 0 var(--ms-yellow) !important;
    }
    #fes-myschedule.is-rain .my-act-card.fixed-act {
        box-shadow: 1.5px 1.5px 0 var(--ms-cyan) !important;
    }
    #fes-myschedule .my-act-header { gap: 2px; }
    #fes-myschedule .my-act-left { gap: 2px; }
    #fes-myschedule .my-act-time { font-size: 8px; }
    #fes-myschedule .my-act-title {
        margin-top: 1px;
        font-size: 10px;
        line-height: 1.15;
        -webkit-line-clamp: 2;
    }
    #fes-myschedule .stage-badge {
        display: block;
        max-width: 100%;
        margin-top: 1px;
        padding: 0 4px;
        border-width: 1px;
        font-size: 7px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #fes-myschedule .draggable-badge { display: none; } /* 点線の枠で移動できることが分かるので省略 */
    #fes-myschedule .btn-remove-my-act { width: 15px; height: 15px; font-size: 8px; border-width: 1px !important; }
    #fes-myschedule .drag-handle {
        margin: -4px 0 -4px -4px;
        padding: 4px 5px;
        font-size: 13px;
    }
    #fes-myschedule .drop-preview { font-size: 9px; border-radius: 7px 3px 7px 3px; padding: 1px 4px; }
    #fes-myschedule .my-empty-view { padding: 36px 16px; font-size: 13px; }
}