/* 생년월일 달력 (2026-08-19)
   원데이클래스·원장님 상담의 1단계에서 쓰는 jQuery UI datepicker 새 단장.

   달력은 body 끝에 #ui-datepicker-div 로 붙어서 우리 컨테이너 밖에 놓인다.
   그래서 선택자로 범위를 좁힐 수 없다. 대신 이 파일을 두 페이지에서만 불러
   다른 화면(관리자·쇼핑몰)의 달력은 건드리지 않는다.

   구글 CDN 의 기본 테마(jquery-ui.css)를 덮어써야 해서 선택자를 길게 잡았다. */

#ui-datepicker-div.ui-datepicker{
	width:300px; padding:0; border:none; border-radius:12px; background:#fff;
	box-shadow:0 12px 34px rgba(16,28,56,0.18); overflow:hidden;
	font:14px 'Manrope','Pretendard Variable','Pretendard','Noto Sans KR',sans-serif;
	z-index:1200 !important;
}

/* ── 머리말 ── */
#ui-datepicker-div .ui-datepicker-header{
	position:relative; background:#203864; border:none; border-radius:0;
	padding:14px 12px; margin:0; color:#fff;
}
#ui-datepicker-div .ui-datepicker-title{ margin:0 34px; display:flex; gap:8px;
	justify-content:center; }
#ui-datepicker-div .ui-datepicker-title select{
	height:34px; padding:0 8px; width:auto; min-width:84px; cursor:pointer;
	background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.35);
	border-radius:6px; font-size:14px; font-weight:700;
}
/* 펼쳤을 때 항목은 브라우저가 그린다. 흰 바탕에 흰 글씨가 되지 않게 되돌린다. */
#ui-datepicker-div .ui-datepicker-title select option{ color:#203864; background:#fff; }

/* 앞뒤 달 — 기본 테마는 스프라이트 이미지를 쓴다. 지우고 화살표를 직접 그린다. */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{
	top:50%; transform:translateY(-50%); width:32px; height:32px; margin:0;
	border:none; background:rgba(255,255,255,0.12); border-radius:6px; cursor:pointer;
	transition:background-color .15s;
}
#ui-datepicker-div .ui-datepicker-prev{ left:12px; }
#ui-datepicker-div .ui-datepicker-next{ right:12px; }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover{ background:rgba(255,255,255,0.28); }
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span{
	background-image:none !important; text-indent:0; overflow:visible;
	position:absolute; left:50%; top:50%; width:9px; height:9px; margin:0;
	border-left:2px solid #fff; border-bottom:2px solid #fff;
	/* 이 칸 안에는 '이전달' · '다음달' 이라는 글자가 들어 있다.
	   화살표를 테두리로 그리면서 text-indent 를 0 으로 되돌리는 바람에
	   그 글자가 기울어진 채로 같이 보였다. 글자만 지우고 테두리는 남긴다.
	   읽어 주는 기능은 a 태그의 title 이 대신한다. */
	font-size:0; line-height:0; color:transparent;
}
#ui-datepicker-div .ui-datepicker-prev span{ transform:translate(-30%,-50%) rotate(45deg); }
#ui-datepicker-div .ui-datepicker-next span{ transform:translate(-70%,-50%) rotate(-135deg); }

/* ── 날짜 ── */
#ui-datepicker-div .ui-datepicker-calendar{ margin:10px 12px 14px; border-collapse:separate;
	border-spacing:2px; }
#ui-datepicker-div .ui-datepicker-calendar th{ padding:8px 0; font-size:12px; font-weight:700;
	color:#8b93a1; border:none; }
/* 일요일·토요일. 요일 글자는 th 안의 span 에 들어가므로 함께 지정한다. */
#ui-datepicker-div .ui-datepicker-calendar th:first-child,
#ui-datepicker-div .ui-datepicker-calendar th:first-child span{ color:#c0392b; }
#ui-datepicker-div .ui-datepicker-calendar th:last-child,
#ui-datepicker-div .ui-datepicker-calendar th:last-child span{ color:#1a56b8; }
#ui-datepicker-div .ui-datepicker-calendar td{ padding:0; border:none; }
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span{
	display:flex; align-items:center; justify-content:center; height:36px; padding:0;
	border:none; background:transparent; border-radius:8px; font-size:14px;
	font-weight:600; color:#333; text-align:center; transition:background-color .12s, color .12s;
}
#ui-datepicker-div .ui-datepicker-calendar td a:hover{ background:#eef2f7; color:#203864; }
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end:first-child a{ color:#c0392b; }
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end:last-child a{ color:#1a56b8; }
/* 오늘 */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a{
	background:#f4f6f9; color:#203864; box-shadow:inset 0 0 0 1px #c9d0da; }
/* 고른 날 */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a,
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active{
	background:#203864 !important; color:#fff !important; }
/* 고를 수 없는 날 */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span{
	color:#ccd2db; background:transparent; }

@media all and (max-width:400px) {
	#ui-datepicker-div.ui-datepicker{ width:280px; }
	#ui-datepicker-div .ui-datepicker-calendar td a,
	#ui-datepicker-div .ui-datepicker-calendar td span{ height:33px; font-size:13px; }
}