:root {
    --sunday-color: #ff5f5f;
    --saturday-color: #5fafff;
    --calendar-bg: var(--card-bg);
    --calendar-border: var(--border);
}

/* 1. 레이아웃 및 헤더 */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 5px;
}

.calendar-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--accent-bright);
    font-weight: 700;
    text-shadow: 0 0 10px var(--accent-glow);
}

.month-selector {
    background-color: var(--bg-color) !important;
    border: 1px solid var(--accent) !important;
    color: var(--text-main) !important;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* 2. 그리드 레이아웃 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--border);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* 3. 셀 스타일 (색상 고정) */
.calendar-grid > div {
    background-color: #0a0e14 !important;
    padding: 12px 6px;
    min-height: 120px;
    box-sizing: border-box;
    transition: background 0.2s;

    /* [추가] 내용물이 길어도 칸이 늘어나지 않게 고정 */
    min-width: 0; 
    overflow: hidden;
}

/* 요일 라벨 (일~토) 수정 */
.day-label {
    height: 32px !important;    /* 45px -> 32px로 축소 */
    min-height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;           /* 약간 더 가볍게 */
    font-size: 0.75rem;         /* 0.85rem -> 0.75rem로 글자 축소 */
    background-color: #080d15 !important; /* 배경을 아주 살짝 더 어둡게 해서 구분감 */
    color: var(--text-sub);
    border-bottom: 1px solid var(--accent); /* 하단에 미세한 구분선 추가 */
}

.day-label:nth-child(1) { color: var(--sunday-color); }
.day-label:nth-child(7) { color: var(--saturday-color); }

/* 4. 날짜 및 이벤트 표시 */
.date-header { display: flex; justify-content: flex-start; margin-bottom: 4px; }
.date-num { font-size: 0.9rem; font-weight: 500; color: var(--text-main); }
.date-divider { width: 100%; height: 1px; background: linear-gradient(to right, var(--accent), transparent); margin: 5px 0 12px 0; }

.event-item { margin-bottom: 12px; padding: 2px 0; }
.event-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.event-time { font-size: 0.7rem; color: var(--accent-bright); font-weight: 700; }

.type-badge { padding: 1px 5px; border-radius: 3px; font-size: 0.65rem; font-weight: 700; color: #ffffff !important; }
.type-방송 { background-color: #3b3dbf; }
.type-합방 { background-color: #1e854a; }
.type-휴방 { background-color: #c0392b; }
.type-기타 { background-color: #4a5568; }
.type-결과발표 { background-color: #f295f5; }
.type-공방참여 { background-color: #e67e22; }
.type-드롭스 { background-color: #5c5c5c; }
.type-달성 { background-color: #b3b000; }
.type-대회 { background-color: #b3b000; }
/* --- 모바일용 글자색 정의 (기존 뱃지 색상을 그대로 활용) --- */
.color-방송 { color: #3b3dbf; }
.color-합방 { color: #1e854a; }
.color-휴방 { color: #c0392b; }
.color-기타 { color: #4a5568; }
.color-결과발표 { color: #f295f5; }
.color-공방참여 { color: #e67e22; }
.color-드롭스 { color: #5c5c5c; }
.color-달성 { color: #b3b000; }
.color-대회 { color: #b3b000; }


.tag-container {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    
    /* [핵심] 태그들이 좁은 공간에서 한 줄로 유지되게 함 */
    flex-wrap: nowrap; 
    width: 100%;       /* 부모 칸 너비 상속 */
    overflow: hidden;  /* 혹시라도 넘치면 숨김 */
}
.hash-tag {
    background-color: rgba(0, 51, 102, 0.3);
    color: var(--accent-bright);
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--accent);
    
    /* --- [핵심] 태그 글자가 칸보다 길면 '...' 처리 --- */
    display: inline-block; /* 텍스트 개념 부여 */
    max-width: 70px;      /* 태그 하나의 최대 너비를 적절히 제한 */
    white-space: nowrap;  /* 줄바꿈 방지 */
    overflow: hidden;     /* 넘치는 부분 숨김 */
    text-overflow: ellipsis; /* ... 표시 */
    
    flex-shrink: 1;       /* 공간 부족 시 태그 크기를 줄임 (핵심) */
}
/* '+2' 더보기 뱃지는 줄어들지 않게 설정 */
.tag-more-box {
    background-color: var(--accent);
    color: #fff;
    border-color: var(--accent-bright);
    
    flex-shrink: 0;       /* 어떤 상황에서도 크기가 고정됨 (핵심) */
    max-width: none;      /* 너비 제한 해제 */
}

/* 5. 상태 및 모달 */
.today { background-color: rgba(51, 133, 255, 0.05) !important; position: relative; }
.today::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--accent-bright); box-shadow: 0 0 10px var(--accent-bright); }
.today .date-num { color: var(--accent-bright); font-weight: 700; }

.other-month { background-color: #05070a !important; opacity: 1 !important; }
.clickable { cursor: pointer; transition: transform 0.1s; }
.clickable:hover { transform: translateY(-2px); }

/* 모달 및 버튼 */
.replay-btn {
    display: flex !important; width: 100% !important; height: 48px;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent) 0%, #051a30 100%) !important;
    border: 1px solid var(--accent-bright) !important;
    border-radius: 8px !important; color: var(--text-main) !important;
    font-weight: 700 !important; cursor: pointer;
}
.replay-btn:hover { background: var(--accent-bright) !important; transform: translateY(-2px); }

/* 모달창 오버레이 (이 코드가 없어서 계속 떠 있는 것입니다) */
.modal-overlay {
    display: none; /* 기본값: 안 보이게 설정 */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* 모달 박스 내용 스타일 */
.modal-content {
    position: relative; /* 이 부분이 있어야 닫기 버튼이 박스 안에서 움직입니다 */
    width: 90%;
    max-width: 450px;
    background: #0d1117;
    padding: 24px; /* 여백을 조금 더 줌 */
    border: 1px solid var(--accent);
    border-radius: 12px;
    animation: fadeIn 0.3s ease;
}
/* 다시보기 버튼 컨테이너 */
#modal-replay-container {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

/* 다시보기 버튼 */
.replay-btn {
    display: inline-flex !important; /* 꽉 차게 늘어나는 것 방지 */
    min-width: 200px;                /* 최소 너비 설정 */
    padding: 12px 24px !important;    /* 위아래 12px, 양옆 24px로 여유롭게 */
    background: linear-gradient(135deg, var(--accent) 0%, #051a30 100%) !important;
    border: 1px solid var(--accent-bright) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 글자 간격 */
}

.replay-btn:hover {
    background: var(--accent-bright) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 15px var(--accent-glow);
}
/* 2. 닫기 버튼 (우측 상단 고정) */
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-sub);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: color 0.2s;
}
/* 3. 마우스 올렸을 때 효과 */
.modal-close-btn:hover {
    color: #ffffff; /* 마우스 올리면 밝게 */
}
/* 이벤트 제목 요약 스타일 (PC/모바일 공통) */
.event-title-summary {
    font-size: 0.65rem;
    color: var(--text-main);
    margin-top: 2px;
    font-weight: 500;
    
    /* [수정 및 확인] */
    display: block;          /* 너비 개념을 가지게 함 */
    width: 100%;             /* 부모 칸 너비에 맞춤 */
    white-space: nowrap;     /* 줄바꿈 금지 */
    overflow: hidden;        /* 넘치는 부분 숨김 */
    text-overflow: ellipsis; /* ... 표시 */
}
/* 기본적으로 PC 레이아웃은 보여주고, 모바일 전용 요소는 숨깁니다. */
.pc-only {
    display: flex !important;
}

.mobile-only {
    display: none !important;
}
/* --- 2. 모바일 환경 설정 (900px 이하) --- */
@media (max-width: 900px) {
    /* PC용 레이아웃과 기존 메타 정보, 뱃지 등을 모두 숨깁니다. */
    .pc-only, 
    .event-meta, 
    .tag-container, 
    .type-badge {
        display: none !important;
    }

    /* 숨겨져 있던 모바일 전용 요소를 보여줍니다. */
    .mobile-only,
    .mobile-summary {
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        margin-top: 4px;
    }
 /* 1. 달력 전체 컨테이너 너비 고정 및 패딩 제거 */
    .calendar-grid {
        width: 100% !important;
        grid-template-columns: repeat(7, 1fr); /* 7칸 유지 */
        gap: 1px; /* 간격을 최소화 */
    }

    /* 2. 셀 안의 여백을 더 줄여서 공간 확보 */
    .calendar-grid > div {
        min-height: 75px !important; /* 높이를 살짝 더 줄임 */
        padding: 4px 2px !important; /* 좌우 패딩을 2px로 최소화 */
        overflow: hidden; /* 넘치는 글자 숨김 */
    }

    /* 3. 요일 라벨(일~토) 글자 크기 축소 */
    .day-label {
        font-size: 0.6rem !important;
        height: 25px !important;
    }

    /* 4. 날짜 숫자 크기 축소 */
    .date-num {
        font-size: 0.7rem !important;
    }
   /* 5. 시간 및 타입 글자가 깨지지 않게 처리 */
    .mobile-time, 
    .mobile-type, 
    .mobile-type-text {
        font-size: 0.55rem !important; /* 글씨를 더 작게 */
        letter-spacing: -0.5px; /* 자간을 줄여서 한 줄에 나오게 함 */
        white-space: nowrap; /* 줄바꿈 방지 */
        text-overflow: ellipsis; /* 너무 길면 ... 처리 */
        overflow: hidden;
    }
    /* 6. 구분선 두께 조절 */
    .date-divider {
        margin: 2px 0 3px 0 !important;
    }
    .event-title-summary {
        font-size: 0.55rem;
        text-align: center;
        width: 100%;
    }
   
}