/* ----------------------------------------------------
   1. 공통 및 타이틀 영역 
---------------------------------------------------- */
.all { 
    border: 1px solid #e0e0e0; 
}
.calsTitle {
    font-size: 42px; 
    font-weight: 700; 
    color: #111111;
    letter-spacing: -1px;
}

@media only screen and (max-width: 960px){
    .calsTitle { font-size: 30px; }
}

/* ----------------------------------------------------
   2. 테이블 레이아웃 초기화 
---------------------------------------------------- */
.tableOnly { 
    width: 100%; 
    border-collapse: collapse; 
    border: 0; 
    table-layout: fixed; /* 요일 영역 너비 강제 고정 */
}
.tableOnly td { 
    padding: 0; 
    transform: none; 
}

.cTable { 
    width: 100%; 
    border-collapse: collapse; 
    border-top: 2px solid #222; 
    table-layout: fixed; /* 날짜 영역 너비 강제 고정 */
}
.cTable th, 
.cTable td { border: 1px solid #e5e5e5; }
.cTable td table td { border: 0; }
.cTable td:before { display: none; }

/* ----------------------------------------------------
   3. 요일(Week) 헤더 바 (이미지 색상 매칭)
---------------------------------------------------- */
.week {
    background-color: #f8f9fa !important;
    font-size: 15px;
    font-weight: 600;
    width: 14.28%; /* 정확히 7등분 */
    height: 50px;
    text-align: center;
    vertical-align: middle; /* 세로 중앙 정렬 확실하게 추가 */
    border: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
    color: #444 !important;
}

/* 주말 텍스트 색상 포인트 */
.week:nth-child(1) { color: #e53e3e !important; }
.week:nth-child(7) { color: #3182ce !important; }

/* ----------------------------------------------------
   4. 날짜 숫자 스타일 (일반, 토, 일/공휴일, 이전/다음달)
---------------------------------------------------- */
.sholy, .ssat, .snum, .snum2 {
    display: inline-block;
    font-size: 16px;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 10px;
}

/* 휴일 (일요일 포함) */
.sholy, .sholy:link, .sholy:visited { color: #f47a1c; }
.sholy:hover, .sholy:active { color: #f47a1c; font-weight: 700; }

/* 토요일 */
.ssat, .ssat:link, .ssat:visited { color: #348ad4; }
.ssat:hover, .ssat:active { color: #348ad4; font-weight: 700; }

/* 평일 */
.snum, .snum:link, .snum:visited { color: #444444; }
.snum:hover, .snum:active { color: #111111; font-weight: 700; }

/* 이전/다음 달 날짜 */
.snum2, .snum2:link, .snum2:visited { color: #bbbbbb; }
.snum2:hover, .snum2:active { color: #888888; }

/* ----------------------------------------------------
   5. 스케줄(일정) 입력 박스
---------------------------------------------------- */
.scBox {
    word-break: break-all;
    line-height: 1.4;
    font-size: 14px;
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 4px; /* 살짝 둥근 모서리로 부드러운 느낌 부여 */
    color: #333;
    transition: all 0.2s ease;
}

.scBox:hover {
    border: 1px solid #002282; /* 사이트 메인 네이비 컬러로 포인트 */
    background: #f4f6fa;
    cursor: pointer;
}


/* ----------------------------------------------------
   달력 상단 네비게이션 버튼 (이전달, 다음달)
---------------------------------------------------- */
.cal-nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #e5e5e5;
    border-radius: 50%; /* 둥근 버튼 형태 */
    color: #666;
    background-color: #fff;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}

.cal-nav-btn:hover {
    background-color: #002282; /* 라이온스 네이비 컬러로 호버 포인트 */
    color: #fff;
    border-color: #002282;
}

.calsTitle {
    font-size: 36px;
    font-weight: 700;
    color: #111;
    letter-spacing: -1px;
}


/* 경조사 붉은 동그라미 '경' 배지 스타일 */
.badge-gyung {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #ff4d4d; /* 붉은색 배경 */
    color: #ffffff;            /* 흰색 글씨 */
    font-size: 11px;
    font-weight: bold;
    border-radius: 50%;        /* 동그라미 형태 */
    vertical-align: middle;
}

/* ----------------------------------------------------
   모바일 반응형 달력 최적화 스타일
---------------------------------------------------- */
@media only screen and (max-width: 960px) {
    /* 테이블 레이아웃 고정 */
    .tableOnly {
        table-layout: fixed;
    }
    
    .week {
        font-size: 12px !important;
        height: 35px !important;
    }

    .sholy, .ssat, .snum, .snum2 {
        font-size: 12px !important;
        padding: 2px 4px !important;
    }

    .cTable td {
        padding: 2px 1px !important;
        vertical-align: top !important;
    }

    /* 일정 박스: 배경 없이 자연스러운 줄바꿈 및 칸 오버플로우 방지 */
    .scBox {
        font-size: 10px !important;          /* 모바일에 맞는 아담한 폰트 크기 */
        padding: 1px 2px !important;
        margin-bottom: 3px;
        background: none !important;         /* 파란색 배경 제거 */
        color: #333 !important;              /* 글자색 본래 색상으로 */
        border: none !important;
        white-space: normal !important;      /* 강제 줄바꿈 허용 */
        word-break: break-all !important;    /* 긴 단어도 칸을 넘지 않고 줄바꿈 */
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;         /* 줄 간격 좁게 조정 */
    }
    
    /* 경조사 '경' 배지 스타일 */
    .badge-gyung {
        width: 13px !important;
        height: 13px !important;
        font-size: 8px !important;
        background-color: #ff4d4d !important;
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .calsTitle {
        font-size: 22px !important;
    }
}