.cal-wrap { position:absolute; display:none; width:280px; padding:34px 12px 12px; background:#fff; border:1px solid var(--color-active); border-radius:8px; font-size:12px; line-height:16px; z-index:1000;}
.cal-wrap.in-page { position:relative; display:block; border:none; box-shadow:none; padding:0; z-index:inherit; }
.cal-wrap.on { display:block; }

.cal-wrap button { border:none; font-size:15px; line-height:18px; font-weight:500; }
.cal-wrap select { display:inline-block; min-width:0; margin:0 2px; padding:2px 3px 4px; font-size:17px; border:none; line-height:20px; color:#151515; font-weight:bold;
    -moz-appearance:none; -webkit-appearance:none; appearance:none; padding-right:20px; background:url(../images/ico_select.svg) no-repeat right center}
.cal-wrap select + select {margin-left:12px;}
.cal-wrap caption { height: 1px; overflow: hidden; line-height: 0; margin-top: -1px; color: transparent; }
.cal-wrap .cal-now-tx { display:inline-block; width:auto; margin:0 2px; font-size:16px; line-height:20px; color:#2C3038; font-weight:700; box-sizing:border-box; vertical-align:middle; }
.cal-wrap .cal-top:has(.month) .cal-now-tx.year::after { content:'-'; margin-left:4px; }
.cal-wrap .cal-top:has(.month) .btn_month-sel .cal-now-tx.year::after { display:none; }
.cal-wrap .cal-top:has(.month) > .cal-now-tx.year { margin-right:-10px; }
/* .cal-wrap .cal-now-tx.month::after { content:'월'; } */

.cal-wrap .cal-top { position:relative; display:flex; justify-content:center; align-items:center; gap:10px; width:100%; margin-bottom:10px; overflow:hidden; text-align:center; }
.cal-wrap .cal-top .sel-year { position:absolute; top:0; left:0; }
.cal-wrap .cal-top .cal-btn { position:relative; display:block; top:0; text-indent:-9999px; width:25px; height:25px; }
.cal-wrap .cal-top .cal-btn:after { content:''; position:absolute; width:6px; height:12px; top:6px; left:8px; background:url(../images/ico_arrow.svg) no-repeat center 50%; }
.cal-wrap .cal-top .cal-btn:disabled { cursor:default; }
.cal-wrap .cal-top .cal-btn:disabled:after { opacity:.5; }
.cal-wrap .cal-top .cal-btn.prev { left:0; }
.cal-wrap .cal-top .cal-btn.prev:after { transform:scaleX(-1); }
.cal-wrap .cal-top .cal-btn.next { right:0; }
.cal-wrap .cal-top .btn_month-sel { border-bottom:1px solid #222; font-weight:700;}

.cal-wrap table { border-collapse:collapse; }
.cal-wrap th { font-size:13px; line-height:16px; padding:5px 0 7px; background:#fff; color:#666; border:none; }
.cal-wrap .cal-title { padding:10px 0 10px; font-size:16px; line-height:25px; background:#fff; }
.cal-wrap td { position:relative; padding:0; border:none; }
.cal-wrap td button, .cal-wrap td > span { display:block; width:40px; height:40px; padding:10px 5px; border-radius:4px; text-align:center; box-sizing:border-box; border-radius:50%; color:inherit; }
.cal-wrap td button > span { display:inline-block; min-width:16px; }
.cal-wrap .cal-area button[disabled], .cal-wrap td > span { color:#e3e3e3; cursor:default;}
.cal-wrap button.today { padding:4px 0; border:1px solid var(--color-active); color:var(--color-active); background:#fff;}
.cal-wrap button.can { text-decoration:underline; }
.cal-wrap button.select-day { background:var(--color-active); color:#fff; }
.cal-wrap .btn-hover { background:var(--color-active); }
.cal-wrap.week tr th.week-num { font-size:12px; color:#fff; background:#999; border-right:1px solid #fff; border-bottom:1px solid #fff; }
.cal-wrap.week tr td.week-num { color:#fff; text-align:center; background:#999; }

.cal-wrap .cal-btns { display:flex; justify-content:flex-end; align-items:center; margin:5px 0 10px; text-align:right; clear:both;}
.cal-wrap .cal-btns .info-tx { font-size:12px; line-height:18px; color:#888; text-align:left; }
.cal-wrap .cal-btns button { display:inline-block; padding:5px 15px; border:1px solid #cecece; border-radius:4px; }
.cal-wrap .cal-btns button:disabled { opacity:.5; }

.cal-wrap thead tr th:first-child,
.cal-wrap tr td:first-child,
.cal-yoil li:first-child { color:#FF3B30; }
.cal-wrap thead tr th:last-child,
.cal-wrap tr td:last-child,
.cal-yoil li:last-child { color:#007AFF; }

/* 별도 요일표기 */
.cal-yoil { display:flex; justify-content:space-around; align-items:stretch; }
.cal-yoil li { padding:10px; font-size:14px; line-height:20px; font-weight:500; color:#666; }

/* 하단 시간선택 영역 */
.cal-time { display:flex; justify-content:space-between; align-items:center; margin:15px 0; gap:10px; }
.cal-time i { font-size:16px; line-height:20px; }
.cal-time select { flex:1; padding:5px 20px 5px 10px; border:1px solid #DCDDE4; background-position:right 10px top 50%; font-weight:normal; }

/* 월간달력용 */
.cal-wrap .cal-month-list { display:flex; width:calc(100% - 48px); gap:16px 2%; margin:16px 24px; flex-wrap:wrap; }
.cal-wrap .cal-month-list li { position:relative; width:32%; text-align:center; }
.cal-wrap .cal-month-list li > button { position:relative; display:inline-block; width:40px; height:40px; padding:0px; border-radius:50%; z-index:1; }
.cal-wrap .cal-month-list button.thisMonth { border:1px solid var(--color-active); color:var(--color-active); font-weight:bold; background:#fff; }
.cal-wrap .cal-month-list button.select-mon,
.cal-wrap .cal-month-list .start button,
.cal-wrap .cal-month-list .end button { background:var(--color-active); color:#fff; font-weight:bold; border-color:var(--color-active); }
.cal-wrap .cal-month-list li.in-range::before { content:''; position:absolute; width:100%; height:90%; top:5%; left:0; background:#ecf3fc; transition:background-color .2s ease-in-out; z-index:-1; }
.cal-wrap .cal-month-list li.start::before,
.cal-wrap .cal-month-list li.end::before { content:''; position:absolute; width:50% !important; height:90%; top:5%; background:#ecf3fc; transition:background-color .2s ease-in-out; }
.cal-wrap .cal-month-list li.start::before { left:50%; }
.cal-wrap .cal-month-list li.end::before { right:50%; }

.cal-wrap.range .cal-month-list { gap:16px 0; }

/* 기간달력용 */
.cal-wrap.range.dual { width:560px; overflow:hidden; }
.cal-wrap.range .cal-top { height:30px; }
.cal-wrap.dual .left, .cal-wrap.dual .cal-left { float:left; width:260px; margin-right:20px;}
.cal-wrap.dual .right, .cal-wrap.dual .cal-right { float:right; width:260px; }
.cal-wrap.range td.start button, .cal-wrap.range td.end button { padding:0; }
.cal-wrap td.start button, .cal-wrap td.end button { position:relative; padding:5px 5px; background:var(--color-active); color:#fff; border-radius:2em; z-index:1; }
.cal-wrap td.start::before, .cal-wrap td.end::before { content:''; position:absolute; width:50% !important; height:90%; top:5%; background:#ecf3fc; transition:background-color .2s ease-in-out; }
.cal-wrap td.in-range button { position:relative; z-index:1; }
.cal-wrap td.in-range::before { content:''; position:absolute; width:100%; height:90%; top:5%; left:0; background:#ecf3fc; transition:background-color .2s ease-in-out; }
.cal-wrap td.start.in-range::before { left:auto; right:0; }
.cal-wrap td.end::before { right:auto; left:0; }
.cal-wrap td.start.end::before { display:none; }

.cal-wrap.range.dual .cal-top .cal-btn { position:absolute; top:3px; }

/* 달력 외부 클릭 시 닫기용 bg */
.cal-bg { position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0); opacity:0; z-index:999; }

/* 오늘 / 닫기 버튼 */
.cal-wrap.range .cal-btns button.btn-cal-today { display:none; }
.cal-wrap.range .cal-btns { justify-content:flex-end; }
.cal-btns button.btn-cal-close { position:absolute; width:20px; height:20px; top:10px; right:10px; padding:4px; text-indent:-9999px; border:none; transition:.2s cubic-bezier(.36,.04,.19,.99);}
.btn-cal-close:hover { transform:rotate(90deg) }
.btn-cal-close:before, 
.btn-cal-close:after { content:''; position:absolute; display:block; width:16px; height:2px; top:50%; left:2px; background-color:#333;  }
.btn-cal-close:before { transform:rotate(45deg); }
.btn-cal-close:after { transform:rotate(-45deg); }

.cal-btns button.btn-cal-today { position:absolute; top:36px; right:20px; padding:4px 8px; font-size:12px; line-height:14px; color:#666; font-weight:600; background-color:#F0F5FD; border:none; border-radius:15px; }

.tit-wrap { padding:10px 5px; font-size:18px; line-height:24px; color:#093383; clear:both; }
.tx-yearMon { font-size:16px; line-height:20px; }

/* 영상탐색 */
.cal-wrap.in-page .cal-top { margin-bottom:10px; }
.cal-wrap.in-page button { padding:2px; margin:0 auto; font-size:14px; line-height:22px; }
.cal-wrap.in-page td > span { padding:2px; }

/* 스마트검색 - 내부 달력 */
.date-cal .smsh-cal + .smsh-cal { margin-top:30px; }
.date-cal .cal-year-mon { margin-bottom:10px; font-size:16px; line-height:38px; font-weight:700; text-align:center; color:#000;}
.date-cal th { padding:5px; font-size:13px; color:#666; font-weight:500; }
.date-cal thead tr th:first-child { color:#F84646; }
.date-cal thead tr th:last-child { color:var(--color-active) }
.date-cal td { position:relative; padding:2px; }
.date-cal td button { position:relative; display:inline-block; width:35px; height:40px; padding:2px; font-size:14px; line-height:18px; color:#222; font-weight:bold; overflow:visible; border-radius:25px; z-index:0; }
.date-cal td button:disabled { color:#999; font-weight:normal; }
.date-cal td.today button { border:1px solid var(--color-active) !important; }
.date-cal td.today::after { content:'오늘'; display:inline-block; position:absolute; bottom:-8px; left:0; right:0; margin:0; font-size:8px; line-height:10px; font-weight:bold; color:var(--color-active); text-decoration:none; }
.date-cal td.select button { background-color:var(--color-active); color:#fff; }
.date-cal td.in-range button,
.date-cal td.start button,
.date-cal td.end button { color:#fff; }
.date-cal td.start button,
.date-cal td.end button { background-color:var(--color-active); }
.date-cal td.start::before,
.date-cal td.end::before { content:''; position:absolute; width:100%; height:40px; left:0; top:2px; border-radius:20px; z-index:0; }
.date-cal td.in-range::before { content:''; position:absolute; width:100%; height:40px; left:0; top:2px; background-color:var(--color-active); z-index:0; }
.date-cal td.start.in-range::before { left:50%; width:50%; border-radius:0; }
.date-cal td.end.in-range::before { left:auto; right:50%;; width:50%; border-radius:0; }
.date-cal td.start.end::before { display:none; }