@charset "utf-8";

/* ============================
    1. 전체 레이아웃
    ============================ */
.server-cal-wrap {
    display: flex;
    width: 100%;
    gap: 5px;
    overflow-x: auto;
    background: #fff;
    padding: 10px 5px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.cal-col {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cal-header {
    text-align: center;
    background: #f2f2f2;
    padding: 6px 0;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin-bottom: 3px;
}

.cal-date {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

/* ============================
    2. 서버 카드 공통
    ============================ */
.server-card {
    display: block;
    padding: 6px;
    border-radius: 4px;
    font-size: 12px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
    text-decoration: none !important;
    border: 1px solid transparent;
    margin-bottom: 3px;
}
.server-card:hover { transform: translateY(-2px); }

.sc-title {
    display: block;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-desc {
    display: block;
    font-size: 11px;
    opacity: 0.9;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-badge {
    display: inline-block;
    font-weight: bold;
    font-size: 11px;
    margin-right: 3px;
}

/* ============================
    3. 일반 타입 스타일
    ============================ */
.server-card.type-new {
    background: #74dff1;
    color: #000;
    border: 1px solid #66cc99;
}
.server-card.type-new .sc-badge { color: #d00; }
.server-card.type-new .sc-title { color: #000; }

.server-card.type-old {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #000;
}
.server-card.type-old .sc-badge { color: #0af; }
.server-card.type-old .sc-title { color: #fff; }


/* ============================
    4. [공지] 황금 + 민트 믹스 (수정됨)
    ============================ */

/* 기존 황금/오렌지 사이에 민트색(#52FDB1) 구간을 추가했습니다.
    민트 구간에서도 색이 죽지 않게 명암을 주어 반짝이게 했습니다.
*/
@keyframes gold-mint-mix {
    0%   { background-color: #F8E606; border-color: #F8E606; } /* 밝은 노랑 */
    12%  { background-color: #D8970A; border-color: #D8970A; } /* 진한 골드 */
    25%  { background-color: #E05E03; border-color: #E05E03; } /* 붉은 오렌지 */
    
    /* ▼▼▼ 민트색 구간 시작 ▼▼▼ */
    37%  { background-color: #52FDB1; border-color: #52FDB1; } /* 밝은 민트 */
    50%  { background-color: #20C985; border-color: #20C985; } /* 진한 민트 (반짝임 효과용) */
    62%  { background-color: #52FDB1; border-color: #52FDB1; } /* 밝은 민트 */
    /* ▲▲▲ 민트색 구간 끝 ▲▲▲ */

    75%  { background-color: #E05E03; border-color: #E05E03; } /* 붉은 오렌지 */
    87%  { background-color: #F3D406; border-color: #F3D406; } /* 썬플라워 골드 */
    100% { background-color: #F8E606; border-color: #F8E606; } /* 복귀 */
}

/* ▼ type-old-notice에 반짝이 효과 및 기본 스타일 적용 (⭐️구) */
div.server-cal-wrap a.server-card.type-notice,
div.server-cal-wrap a.server-card.type-old-notice { /* type-old-notice 추가하여 효과 공유 */
    /* 색상이 더 다양해졌으므로 속도를 3.0s로 살짝 늦춰서 
        민트색이 눈에 잘 들어오게 조절했습니다. (원하면 숫자 변경 가능) */
    animation: gold-mint-mix 4.0s linear infinite !important;
    
    background: #F8E606;
    border: none;
    z-index: 10;
}
/* ▲ type-old-notice에 반짝이 효과 및 기본 스타일 적용 (⭐️구) */

/* 배경이 쨍하므로 글자색은 검정 고정 */
div.server-cal-wrap a.server-card.type-notice *,
div.server-cal-wrap a.server-card.type-old-notice * { /* type-old-notice 추가하여 효과 공유 */
    color: #000000 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

div.server-cal-wrap a.server-card.type-notice .sc-badge {
    color: #d50000 !important; /* ⭐️신 뱃지 색상 (빨간색) */
}

/* ============================
    5. [공지] ⭐️구 파란색 스타일 (추가됨)
    ============================ */

/* ⭐️구 (type-old-notice)의 뱃지 텍스트만 파란색으로 변경 */
div.server-cal-wrap a.server-card.type-old-notice .sc-badge {
    color: #007bff !important; /* 파란색으로 지정 */
}
/* ============================
    6. 모바일 반응형 설정 (강화)
    ============================ */

@media (max-width: 767px) {
    
    /* ▼▼▼ 이미지 너비 제한 (배너 넘침 방지) ▼▼▼ */
    img {
        max-width: 100% !important; 
        height: auto !important; 
    }
    
    /* 줄 바꿈 허용 (텍스트가 잘리지 않게 함) */
    .server-card .sc-title, 
    .server-card .sc-desc {
        white-space: normal !important; 
        overflow: visible !important; 
        text-overflow: clip !important; 
    }
    
    /* 캘린더 전체 랩퍼의 패딩 유지 */
    .server-cal-wrap {
        padding: 10px 5px;
        width: 100%;
        max-width: none;
    }

    /* 캘린더 각 열(날짜)의 최소 너비 설정 */
    .cal-col {
        min-width: 90px !important;     /* [수정됨] 글자가 깨지지 않도록 90px로 재설정 */
        gap: 5px !important;            /* [세로 압축 1] 카드 사이 간격 5px로 줄임 */
    }
    
    /* 카드 자체 내부 여백 조정 */
    .server-card {
        padding: 5px !important;        /* [세로 압축 2] 카드 내부 패딩을 5px로 줄여 세로 길이 압축 */
    }

    /* 날짜 헤더 크기 유지 */
    .cal-date {
        font-size: 14px !important;
    }

    /* 서버 카드 제목 및 설명 스타일 조정 (압축) */
    .server-card .sc-title {
        font-size: 15px !important; 
        margin-bottom: 1px !important;  /* [세로 압축 3] 제목 아래 마진 최소화 */
        line-height: 1.1;               /* [세로 압축 4] 제목 줄 간격을 좁혀서 압축 */
    }
    
    .server-card .sc-desc {
        font-size: 12px !important;
        line-height: 1.1;               /* [세로 압축 4] 설명 줄 간격을 좁혀서 압축 */
        opacity: 0.95 !important;
    }
    
    /* 뱃지 (신⭐️, 구⭐️) 텍스트 크기 유지 */
    .server-card .sc-badge {
        font-size: 13px !important; 
        margin-right: 3px; 
    }
}
/* ============================
    7. 인덱스 배너 간격 조정 (추가됨)
    ============================ */

/* 배너 이미지 아래에 5px의 작은 간격을 추가합니다. */
.main-banner-img {
    margin-bottom: 2px; /* 필요에 따라 3px, 5px, 7px 등으로 조정해 보세요. */
    display: block; /* margin-bottom이 확실히 적용되도록 display: block을 추가 (선택 사항) */
}