/* 全体 */

.calendar-page{
max-width:1200px;
margin:auto;
padding:40px 20px;
}

/* タイトル */

.page-title{
text-align:center;
font-size:28px;
margin-bottom:20px;
}

/* カレンダー */

.calendar-header{
display:grid;
grid-template-columns:repeat(7,1fr);
text-align:center;
font-weight:bold;
margin-bottom:10px;
}

/* グリッド */

.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:8px;
}

/* セル */

.calendar-cell{
background:#fff;
border-radius:8px;
padding:8px;
min-height:120px;
cursor:pointer;
display:flex;
flex-direction:column;
transition:0.2s;
}

.calendar-cell:hover{
background:#f0f0ff;
}

/* 日付 */

.date-number{
font-size:14px;
margin-bottom:5px;
}

/* 今日 */

.today{
border:2px solid #6a5acd;
}

/* 他月 */

.other-month{
opacity:0.4;
}

/* イベント */

.events{
display:flex;
flex-direction:column;
gap:4px;
}

/* 時間 */

.time{
font-weight:bold;
margin-right:4px;
}

/* more */

.more{
font-size:12px;
color:#666;
}

/* 詳細 */

.calendar-detail{
margin-top:30px;
}

/* 配信なし */

.no-schedule{
text-align:center;
padding:30px;
background:#f0f0f5;
border-radius:10px;
color:#888;
}

/* モーダル全体 */

.modal{
position:fixed;
inset:0;
display:none;
z-index:1000;
opacity:0;
transition:0.3s;
}

/* 表示状態 */

.modal.active{
display:block;
opacity:1;
}

/* オーバーレイ（背景暗く） */

.modal-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.5);
}

/* コンテンツ */

.modal-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#fff;
border-radius:12px;
padding:30px;
width:90%;
max-width:1000px;
max-height:80%;
overflow-y:auto;
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

/* 閉じるボタン */

.modal-close{
position:absolute;
top:10px;
right:15px;
background:none;
border:none;
font-size:24px;
cursor:pointer;
}

/* スクロール防止 */

body.modal-open{
overflow:hidden;
}

/* カード */

.modal-schedule-list .schedule-card{
width: 90%;
background:#fff;
border-radius:14px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:0.3s;
display:flex;
flex-direction:column;
gap:10px;
margin: auto;
margin-bottom: 15px;
}

.modal-schedule-list .schedule-card:hover{
transform:translateY(-5px);
}

/* 上部 */

.modal-schedule-list .card-header{
display:flex;
align-items:center;
gap:10px;
}

/* アイコン */

.modal-schedule-list .talent-icon{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
border:2px solid #0066ff;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
}

/* 名前 */

.modal-schedule-list .schedule-card .talent-name{
margin-left: auto;
font-weight:bold;
font-size:28px;
}

/* サムネ */

.modal-schedule-list .thumbnail-wrapper{
width:85%;
aspect-ratio:16/9;
background:#000;
border-radius:10px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
margin: auto;
}

.modal-schedule-list .thumbnail{
width:100%;
height:100%;
object-fit:contain;
}

/* タイトル */

.modal-schedule-list .schedule-title{
font-size:15px;
font-weight:bold;
margin:5px 0;
}

/* 概要 */

.modal-schedule-list .schedule-description{
font-size:13px;
color:#666;
line-height:1.6;
}

.events{
display:flex;
flex-wrap:wrap;
gap:4px;
}

/* アイコン */
.event-icon{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
border:2px solid #0066ff;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
}