@charset "utf-8";
/* ===== 메인 달력 컨테이너 ===== */
.modern-calendar {max-width:298px; width:100%; background-color:#FFF; position:absolute; top:100%; left:0; z-index:1; display:none;}
.modern-calendar.visible {display:block;}

/* ===== 달력 헤더 (네비게이션, 타이틀) ===== */
.calendar-header {display:flex; justify-content:space-between; align-items:center; padding:20px 25px;}
.nav-btn {cursor:pointer; width:24px; height:24px; display:flex; align-items:center; justify-content:center; transition:all 0.2s; background:url(/images/common/btn_nav_arr01.svg) no-repeat 0 0; background-size:contain;}
.nav-btn:hover {background-color:#F4F4F4; color:#000;}
.nav-btn.prev-btn {}
.nav-btn.next-btn {transform:rotate(180deg);}
.header-title {display:flex; gap:8px; align-items:center; font-weight:500; font-size:16px; color:#000;}
.year-btn,
.month-btn {background:none; border:none; font-size:18px; font-weight:500; cursor:pointer; padding:5px 8px; transition:background-color 0.2s; color:#000; border-radius:5px;}
.year-btn:hover,
.month-btn:hover {background-color:#000; color:#fff;}

/* ===== 달력 콘텐츠 영역 ===== */
.calendar-content {padding:0 20px 20px;}

/* ===== 요일 표시 헤더 ===== */
.weekdays {display:grid; grid-template-columns:repeat(7, 1fr);}
.weekday {text-align:center; font-size:16px; color:#8f9191; font-weight:500; padding:8px 0; height:16px; display:flex; align-items:center; justify-content:center;}
.weekday:first-child {color:#000;} /* 일요일 강조 */

/* ===== 날짜 그리드 ===== */
.days-grid {display:grid; grid-template-columns:repeat(7, 1fr);}

/* ===== 날짜 셀 기본 스타일 ===== */
.day-cell {height:36px; margin:2px 0; display:flex; align-items:center; justify-content:center; font-size:16px; color:#000; font-weight:500; cursor:pointer; transition:all 0.2s; user-select:none; position:relative;}
.day-cell:hover:not(.other-month) {background-color:#000; color:#fff; border-radius:5px;}
.day-cell.other-month {color:#ccc; cursor:default;} /* 이전/다음 월 날짜 */
.day-cell.today {color:#DA291C;} /* 오늘 날짜 */
.day-cell.holiday {color:#ff0000;} /* 공휴일 */
.day-cell.disabled {color:#ccc; cursor:default; background-color:#f9f9f9;} /* 비활성화된 날짜 */
.day-cell.disabled:hover {background-color:#f9f9f9; color:#ccc;}

/* ===== 날짜 선택 상태 ===== */
.day-cell.selected {background-color:#000; color:#FFF; border-radius:5px;} /* 단일 선택 */
.day-cell.first-click {background-color:#000; color:#fff;} /* 범위 선택 시작 */

/* ===== 범위 선택 스타일 ===== */
.day-cell.range-start,
.day-cell.range-end {background-color:#000; color:#FFF;} /* 범위 시작/끝 */
.day-cell.range-middle {background-color:#000; color:#fff;} /* 범위 중간 */

.day-cell.range-start,
.day-cell.first-click,
.day-cell.temp-range-start {border-radius:5px 0 0 5px !important;}
.day-cell.range-end,
.day-cell.temp-range-end {border-radius:0 5px 5px 0 !important;}


/* ===== 임시 범위 프리뷰 (호버 시) ===== */
.day-cell.temp-range-start,
.day-cell.temp-range-end {background-color:#000; color:#fff;} /* 임시 범위 시작/끝 */
.day-cell.temp-range-middle {background-color:#000; color:#fff;} /* 임시 범위 중간 */
/* ===== 월/년도 선택 그리드 ===== */
.month-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:10px 0;}
.year-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:10px 0;}
.month-item,
.year-item {padding:10px; text-align:center; cursor:pointer; transition:background-color 0.2s; font-size:18px; color:#000; border-radius:5px;}
.month-item:hover,
.year-item:hover {background-color:#F4F4F4;}
.month-item.current,
.year-item.current {background-color:#000; color:#FFF;} /* 현재 선택된 월/년도 */

/* ===== 달력 푸터 (버튼 영역) ===== */
.calendar-footer {padding:12px 20px;  display:flex; gap:8px;}
.search-btn {flex:1; background-color:#C8C8C8; color:#FFF; border:none; padding:10px 16px; font-size:16px; font-weight:500; cursor:pointer; transition:background-color 0.2s;} /* 검색/확인 버튼 */
.search-btn.active {background-color:#000;}
.search-btn.active:hover {background-color:#DA291C;}
.reset-btn {width:46px; height:46px; border:1px solid #C8C8C8; background:#fff url(/images/common/ico_reset01.svg) no-repeat 50% 50%; background-size:24px 24px;color:transparent; font-size:5px; text-indent:-999em; overflow:hidden;} /* 초기화 버튼 */
.reset-btn:hover {background-color:#F4F4F4; border-color:#000;}

/* ===== 뷰 상태 관리 (날짜/월/년도 뷰) ===== */
.date-view,
.month-view,
.year-view {display:none;} /* 기본 숨김 */
.date-view.active,
.month-view.active,
.year-view.active {display:block;} /* 활성 뷰 표시 */

/* ===== 달력 래퍼 위치 설정 ===== */
.calendar_wrap {position:absolute; top:100%; left:0; z-index:1000; width:100%;}

@media (max-width:1024px) {
    /* 모바일 터치 캘린더 스타일 */
    .modern-calendar {-webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation;}
    .modern-calendar .day-cell {touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer;}
    .modern-calendar .nav-btn,
    .modern-calendar .month-item,
    .modern-calendar .year-item {touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
    /* 터치 드래그 상태 */
    .modern-calendar .day-cell.dragging {background-color:#000;}

    .modern-calendar {max-width:100%;}

}
/* 모바일에서 호버 및 액티브 효과 제어 */
@media (pointer:coarse) {
    /* 선택되지 않은 셀의 호버 효과 */
    .modern-calendar .day-cell:not(.selected):not(.first-click):not(.range-start):not(.range-middle):not(.range-end):hover {
        background-color:transparent;
    }

    /* 모든 셀의 액티브(탭) 효과 */
    .modern-calendar .day-cell:active {
        background-color:rgba(0, 0, 0, 0.1);
    }

    /* 선택된 셀의 액티브(탭) 효과는 선택 색상 유지 */
    .modern-calendar .day-cell.selected:active,
    .modern-calendar .day-cell.first-click:active,
    .modern-calendar .day-cell.range-start:active,
    .modern-calendar .day-cell.range-middle:active,
    .modern-calendar .day-cell.range-end:active {
        background-color:#000;
    }
}