@charset "utf-8";
/* =============================================================================
   [2026-09-09] 메인 퀵 캘린더 추가분 (quick_new.php 전용)
   - 기존 패널 스타일(main.css 의 .quick_wrap ...)은 그대로 두고 여기에 얹기만 한다.
   - main.css 를 건드리지 않으므로 라이브 main.css 와 충돌하지 않는다.
   ============================================================================= */

/* ------------------------------------------------------------ 패널 높이 상한 */
/* [2026-09-09] 컨트롤이 늘면서 패널이 화면보다 길어져 위아래가 잘렸다.
   con_box 는 원래 overflow-y:auto 이므로 높이만 묶어주면 안쪽에서 스크롤된다.
   main.css 와 같은 선택자라 이 파일이 나중에 로드되면서 덮어쓴다. */
#mVisual .quick_wrap .quick .con_box{max-height: calc(100vh - 40px);}

/* -------------------------- 상단 컨트롤 : 년/월 선택 + 오늘 + 달력형/목록형 */
/* 서브 창업캘린더(#Calendar-New .cal-top-box)와 같은 구성을 패널 폭(약 490px)에 맞춰 줄인 것 */
.quick_wrap .qcal_top{
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #eceef3;
}
.quick_wrap .qcal_sel{display: flex; align-items: center; gap: 5px;}
/* 서브 창업캘린더 바로가기 */
.quick_wrap .qcal_sel .qcal_gosub{
	display: inline-flex; align-items: center; gap: 5px;
	height: 36px; padding: 0 16px; border: 1px solid #e1e1e1; border-radius: 100px; background: #fff;
	font-weight: 600; font-size: 14px; color: #222; white-space: nowrap; transition: all .2s ease;
}
.quick_wrap .qcal_sel .qcal_gosub i{font-size: 15px; line-height: 1; color: #2b65fe; transition: color .2s ease;}
.quick_wrap .qcal_sel .qcal_gosub:hover{border-color: #2b65fe; background: #2b65fe; color: #fff;}
.quick_wrap .qcal_sel .qcal_gosub:hover i{color: #fff;}

.quick_wrap .qcal_view{display: flex; gap: 3px; padding: 3px; border: 1px solid #e1e1e1; border-radius: 100px;}
.quick_wrap .qcal_view button{
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
	background: none; cursor: pointer; transition: background-color .2s ease;
}
.quick_wrap .qcal_view button img{
	width: 18px; opacity: .35;
	-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);
	transition: all .2s ease;
}
.quick_wrap .qcal_view button span{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);}
.quick_wrap .qcal_view button:hover img{opacity: .7;}
.quick_wrap .qcal_view li.is_on button{background: #2b65fe;}
.quick_wrap .qcal_view li.is_on button img{filter: none; -webkit-filter: none; opacity: 1;}

/* 보기 전환 : 달력형이면 격자+선택날짜 목록, 목록형이면 그 달 전체 목록 */
.quick_wrap .sch_list .qcal_list_view{display: none;}
.quick_wrap .sch_list.view_list .sch_top .table_wr,
.quick_wrap .sch_list.view_list .sch_bot{display: none;}
.quick_wrap .sch_list.view_list .qcal_list_view{display: block;}

/* --------------------------------------------------------- 목록형 본문 */
.quick_wrap .qcal_list_view .tit_wr{padding: 4px 5px 12px;}
.quick_wrap .qcal_list_view .tit_wr h4{font-weight: 400; font-size: 20px; color: #333;}
.quick_wrap .qcal_list_view .tit_wr h4 b{font-weight: 700;}
.quick_wrap .qcal_list_view .tit_wr h4 em{
	margin-left: 6px; font-style: normal; font-weight: 600; font-size: 14px; color: #2b65fe;
}
.quick_wrap .qcal_list_view > ul{max-height: 430px; overflow-y: auto;}
.quick_wrap .qcal_list_view > ul > li + li{margin-top: 8px;}
.quick_wrap .qcal_list_view > ul > li > a{
	display: block; padding: 13px 15px; border-radius: 14px;
	transition: filter .2s ease;
}
.quick_wrap .qcal_list_view > ul > li > a:hover{filter: brightness(.96);}
.quick_wrap .qcal_list_view > ul > li > a .d{
	display: block; margin-bottom: 4px; font-weight: 500; font-size: 13px; color: inherit; opacity: .7;
}
.quick_wrap .qcal_list_view > ul > li > a h5{
	font-weight: 600; font-size: 15px; line-height: 1.4; color: inherit; word-break: keep-all;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.quick_wrap .qcal_list_view > ul > li > a h5 img.apply_ico{
	width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px;
}
.quick_wrap .qcal_list_view > ul > li.no_data p{
	padding: 40px 15px; border-radius: 14px; background: #f7f8fb;
	font-weight: 500; font-size: 14px; color: #999; text-align: center;
}

/* ------------------------------------------------ 날짜 칸의 일정 개수 배지 */
.quick_wrap .sch_top .table_wr table td .day_more{
	display: inline-block; min-width: 26px; margin: 4px auto 0; padding: 2px 6px;
	border: 0; border-radius: 20px; background: #eaf0ff;
	font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1.5; letter-spacing: -0.2px;
	color: #2b65fe; cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.quick_wrap .sch_top .table_wr table td .day_more:hover,
.quick_wrap .sch_top .table_wr table td .day_more.is_open{background: #2b65fe; color: #fff;}
/* 오늘 칸은 날짜 숫자에만 파란 원이 붙으므로, 배지는 다른 날과 같은 모양을 유지한다
   (흰 배지로 두면 흰 배경에 묻혀 알약 모양이 사라진다) */
/* 배지가 들어가면서 칸이 넓어지지 않도록 좌우 여백을 줄인다 */
.quick_wrap .sch_top .table_wr table td{padding: 10px 8px;}

/* ------------------------- 스크롤 유도 아이콘 (제목 앞 마우스 모양 + 파란 점) */
/* 스크롤할 내용이 있을 때만 보인다 (has_scroll 은 JS 가 붙인다) */
.quick_wrap .sch_bot .tit_wr{justify-content: flex-start; gap: 9px;}
.quick_wrap .sch_bot .tit_wr .scroll_ico{display: none;}
.quick_wrap .sch_bot .tit_wr.has_scroll .scroll_ico{
	display: block; position: relative; flex: 0 0 auto;
	width: 14px; height: 22px; border: 1.5px solid #374359; border-radius: 8px;
}
.quick_wrap .sch_bot .tit_wr .scroll_ico i{
	position: absolute; top: 4px; left: 50%; width: 2.5px; height: 5px; margin-left: -1.25px;
	border-radius: 2px; background: #2b65fe;
	animation: qcalScrollDot 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes qcalScrollDot{
	0%   {transform: translateY(0);   opacity: 0;}
	15%  {opacity: 1;}
	75%  {opacity: 1;}
	100% {transform: translateY(7px); opacity: 0;}
}
/* 애니메이션을 원치 않는 사용자 설정 존중 */
@media (prefers-reduced-motion: reduce){
	.quick_wrap .sch_bot .tit_wr .scroll_ico i{animation: none; opacity: .9;}
}

/* ------------------------------------------- 하단 : 선택한 날짜의 일정 목록 */
/* 파란 분류 배지(span.type)를 없애고, 서브 창업캘린더에서 지정한 배경색/글자색을
   카드에 그대로 입힌다. 색은 인라인 style 로 들어오므로 여기서는 자리만 정리한다. */
.quick_wrap .sch_bot .slide_wr ul li a .txt_box{width: 100%; padding: 0 34px 0 0;}
.quick_wrap .sch_bot .slide_wr ul li a .txt_box h5{color: inherit;}
/* 프로그램 신청(sub4_2) 표시 아이콘 — 서브 창업캘린더와 같은 크기 */
.quick_wrap .sch_bot .slide_wr ul li a .txt_box h5 img.apply_ico{
	width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px;
}
.quick_wrap .sch_bot .slide_wr ul li a .txt_box p{color: inherit; opacity: .7;}
.quick_wrap .sch_bot .slide_wr ul li a{height: auto; border-radius: 10px; transition: filter .2s ease;}
.quick_wrap .sch_bot .slide_wr ul li a:hover{filter: brightness(.96);}
/* 더보기(⋯) 표시 : 이미지 대신 currentColor 로 찍어야 어두운 카드에서도 보인다 */
.quick_wrap .sch_bot .slide_wr ul li a::after{
	content: ''; position: absolute; top: 22px; right: 21px;
	width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45;
	box-shadow: 6px 0 0 currentColor, 12px 0 0 currentColor;
}
.quick_wrap .sch_bot .slide_wr ul li a:hover::after{opacity: .8;}
.quick_wrap .sch_bot .slide_wr ul li.no_data a::after{content: none;}
/* [2026-09-09] 패널이 화면 위아래로 잘리지 않도록 목록은 항상 2건까지만 보이게 고정한다.
   카드 높이를 auto 로 바꾸면서 87px 가 되었으므로 87 + 여백 10 + 87 = 184px.
   (카드가 더 커지면 세 번째가 살짝 걸치므로 이 값도 같이 맞춰줄 것) */
.quick_wrap .sch_bot .slide_wr{height: 184px; min-height: 184px; max-height: 184px; overflow-y: auto;}
/* 일정이 없는 날 */
.quick_wrap .sch_bot .slide_wr ul li.no_data{margin-bottom: 0;}
.quick_wrap .sch_bot .slide_wr ul li.no_data p{
	padding: 34px 15px; border-radius: 20px; background: #f7f8fb;
	font-weight: 500; font-size: 14px; color: #999; text-align: center;
}

/* --------------------------------------------------------------- 상세 팝업 */
/* .quick_wrap 이 z-index 1001 이라 그보다 위로 띄운다 */
#quickCalPop .popitem{
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,.6); visibility: hidden; opacity: 0; z-index: 2000; transition: opacity .25s ease;
}
#quickCalPop .popitem.active{visibility: visible; opacity: 1;}
#quickCalPop .popitem > .conbox{
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 1000px; max-width: 92%; max-height: 84vh; overflow-y: auto;
	padding: 60px 40px; background: #fff; border-radius: 10px;
}
#quickCalPop .popitem > .conbox .popimg{position: relative; width: 100%; max-width: 300px; display: inline-block; float: left;}
#quickCalPop .popitem > .conbox .popimg img{width: 100%;}
#quickCalPop .popitem > .conbox .poptxt{width: calc(100% - 300px); padding: 10px 0 0 40px; float: right;}
#quickCalPop .popitem > .conbox .poptxt h2{margin-bottom: 20px; font-size: 26px; font-weight: 700; color: #222; letter-spacing: -0.5px;}
#quickCalPop .popitem > .conbox .poptxt .s_box_wr{padding: 20px 25px; background: #f8f8fa; border-radius: 20px;}
#quickCalPop .popitem > .conbox .poptxt .s_box{overflow: hidden; margin-bottom: 15px; font-size: 16px; letter-spacing: -0.5px;}
#quickCalPop .popitem > .conbox .poptxt .s_box:last-child{margin-bottom: 0;}
#quickCalPop .popitem > .conbox .poptxt .s_box i{float: left; color: #1861fb; margin-right: 5px;}
#quickCalPop .popitem > .conbox .poptxt .s_box h3{margin-bottom: 5px; font-weight: 600; color: #222;}
#quickCalPop .popitem > .conbox .poptxt .s_box p{font-weight: 500; line-height: 24px; color: #666;}
#quickCalPop .popitem > .conbox .poptxt .s_file a{display: flex; align-items: center; gap: 15px; padding: 10px 15px; border-radius: 10px; border: 1px solid rgba(43,101,254,.3); background: #fff; transition: all .4s ease;}
#quickCalPop .popitem > .conbox .poptxt .s_file a span.down_btn{display: block; width: 30px; height: 30px; background: #f5f5f5; border-radius: 50%; text-align: center; line-height: 30px; transition: all .4s ease;}
#quickCalPop .popitem > .conbox .poptxt .s_file a span.down_btn i{float: none; display: inline-block; margin-right: 0;}
#quickCalPop .popitem > .conbox .poptxt .s_file a strong,
#quickCalPop .popitem > .conbox .poptxt .s_file a p{width: calc(100% - 30px); font-weight: 500; font-size: 14px; color: #444; line-height: 1.3;}
#quickCalPop .popitem > .conbox .poptxt .s_file a:hover{border-color: #2b65fe;}
#quickCalPop .popitem > .conbox .poptxt .s_file a:hover span.down_btn{background: #2b65fe;}
#quickCalPop .popitem > .conbox .poptxt .s_file a:hover span.down_btn i{color: #fff;}
#quickCalPop .popitem .poptxt a.co_close{
	display: inline-block; position: absolute; top: 5px; right: 5px; width: 50px; height: 50px;
	font-size: 28px; color: #0f1b20; line-height: 50px; text-align: center; border: none; opacity: .4; transition: all .4s ease;
}
#quickCalPop .popitem .poptxt a.co_close span{position: absolute; font-size: 0; line-height: 0;}
#quickCalPop .popitem .poptxt a.co_close:hover{opacity: 1;}
#quickCalPop .popitem .detailTitle_wr{position: relative;}
#quickCalPop .popitem .detailTitle_wr .detailTitle{font-size: 17px;}
#quickCalPop .popitem .detailTitle_wr .v_more_btn{position: absolute; top: 5px; right: 10px; border-radius: 0; background: none; border: 0; font-weight: 500; font-size: 14px; color: #2b65fe; cursor: pointer;}
#quickCalPop .popitem .detailContent{height: auto; padding: 10px 20px; font-family: 'Pretendard','Noto Sans KR',sans-serif; font-size: 16px; background: #f4f4f4;}
#quickCalPop .popitem#popitem_a > .conbox .poptxt{width: 100%; padding: 10px 0 0 0;}
body.qcal_pop_open{overflow: hidden;}

/* =============================================================== 반응형 */
@media (max-width: 1200px){
	#quickCalPop .popitem > .conbox{width: 80%; padding: 45px 40px;}
	#quickCalPop .popitem > .conbox .popimg{max-width: 240px;}
	#quickCalPop .popitem > .conbox .poptxt{width: calc(100% - 240px); margin-bottom: 15px; padding: 0 0 0 30px;}
	#quickCalPop .popitem > .conbox .poptxt h2{font-size: 24px;}
	#quickCalPop .popitem .poptxt a.co_close{font-size: 24px;}
}

@media (max-width: 1000px){
	#quickCalPop .popitem > .conbox{top: 50px; transform: translate(-50%, 0);}
	#quickCalPop .popitem > .conbox .poptxt{width: 100%; padding: 0;}
	#quickCalPop .popitem > .conbox .poptxt h2{font-size: 22px;}
	#quickCalPop .popitem > .conbox .popimg{float: none; display: block; max-width: 220px; margin: 0 auto 20px;}
}

@media (max-width: 767px){
	.quick_wrap .sch_top .table_wr table td{padding: 8px 4px;}
	.quick_wrap .sch_top .table_wr table td .day_more{min-width: 22px; padding: 1px 5px; font-size: 11px;}
	.quick_wrap .sch_bot .slide_wr ul li a .txt_box{padding: 0 30px 0 0;}
	.quick_wrap .qcal_top{gap: 6px; margin-bottom: 10px; padding-bottom: 10px;}
	.quick_wrap .qcal_sel .qcal_gosub{height: 32px; padding: 0 13px; font-size: 13px;}
	.quick_wrap .qcal_view button{width: 30px; height: 30px;}
	.quick_wrap .qcal_view button img{width: 16px;}
	.quick_wrap .qcal_list_view .tit_wr h4{font-size: 17px;}
	.quick_wrap .qcal_list_view > ul{max-height: 340px;}
}

@media (max-width: 480px){
	#quickCalPop .popitem > .conbox{width: 90%; padding: 45px 20px;}
	#quickCalPop .popitem > .conbox .popimg{max-width: 180px;}
	#quickCalPop .popitem > .conbox .poptxt h2{font-size: 18px;}
	#quickCalPop .popitem > .conbox .poptxt .s_box_wr{padding: 20px; border-radius: 12px;}
	#quickCalPop .popitem > .conbox .poptxt .s_box h3,
	#quickCalPop .popitem > .conbox .poptxt .s_box p{font-size: 15px;}
}

/* [2026-09-29] 일정이 있는 날짜 칸은 숫자를 눌러도 그날 일정이 뜬다 */
.quick_wrap .sch_top .table_wr table td.has_sch{cursor: pointer;}
.quick_wrap .sch_top .table_wr table td.has_sch:hover .day_more{background: #2b65fe; color: #fff;}