@charset "utf-8";
/* ==========================================================================
   진료예약 (온라인예약) — 서브 페이지 톤에 맞춘 폼 스킨
   구성 : 히어로(/include/sub_visual.jsp) → 안내 → 01 진료과목 → 02 날짜·시간 → 03 예약자 정보 → 동의 → 신청

   - 색 · 라운드 토큰은 /css/sub_page.css 의 --s-* 를 그대로 쓴다 (값 직접 지정 금지)
   - 예약 모듈의 기존 클래스명(.new_login_wrapper · .login_form_box01 · .schedule_wrap …)은
     스크립트가 참조하므로 이름을 바꾸지 않고 스킨만 덮어쓴다.
   ========================================================================== */

/* 모듈 기본 레이아웃(회색 배경 · 큰 여백) 을 걷어낸다 */
#bfrm > .programCon,
#bfrm > .programCon_custom01 {
	min-height: auto;
	padding: 0;
	background: #fff;
}
#bfrm .new_login_wrapper.resv_form {
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 90px 0 110px;
	border: 0;
	background: none;
	box-shadow: none;
}

/* 폼 제목 (예약 수정 화면 등 제목이 있는 경우) — 2026-09-09
   ※ 신청 화면(write.jsp)은 01·02·03 단계 머리말을 쓰므로 이 제목이 없다. */
.resv_form > .login_tit01 {
	margin: 0 0 34px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--s-ink);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: var(--s-ink);
	text-align: left;
}

/* 예약 확인처럼 입력이 적은 화면 : 폼을 가운데 좁게 (confirm.jsp) */
#wrap .new_login_wrapper.resv_form.narrow {
	box-sizing: border-box;
	max-width: 560px;
	margin: 0 auto;
	padding: 90px 0 110px;
}
.resv_form.narrow .login_form_wrapper { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
.resv_form.narrow .login_tit_flex_box01 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--s-ink);
}
.resv_form.narrow .login_tit01 {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--s-ink);
}
.resv_form.narrow .nonMember_link01 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--s-gray);
	text-decoration: none;
}
.resv_form.narrow .nonMember_link01:hover { color: var(--s-brand); }
.resv_form.narrow .login_chk_btn_box01 { display: flex; justify-content: center; }
.resv_form.narrow .login_chk_btn_box01 .login_chk_btn01 { max-width: none; }
/* 비밀번호 보기 버튼 자리 */
.resv_form .login_input_form_box01.pw input { padding-right: 52px; }

/* ----- 상단 안내 박스 ----- */
.resv_form .resv_notice {
	margin-bottom: 56px;
	padding: 26px 30px;
	border-radius: var(--radius, 10px);
	background: var(--s-bg-soft);
}
.resv_form .resv_notice p {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: var(--s-gray);
	word-break: keep-all;
}
.resv_form .resv_notice p + p { margin-top: 8px; }
.resv_form .resv_notice strong { color: var(--s-ink); font-weight: 700; }

/* ----- 단계 머리말 (01 · 02 · 03) ----- */
.resv_form .resv_step {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--s-ink);
}
.resv_form .resv_step + .login_form_wrapper,
.resv_form .resv_step + .schedule_wrap { margin-top: 0; }
.resv_form .rs_num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--s-brand);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
}
.resv_form .rs_txt { min-width: 0; }
.resv_form .rs_tit {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.03em;
	color: var(--s-ink);
}
.resv_form .rs_desc {
	margin: 6px 0 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--s-gray);
	word-break: keep-all;
}

/* ----- 입력 영역 : 2열 그리드 ----- */
.resv_form .login_form_wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 30px;
	margin: 0 0 56px;
	padding: 0;
	border: 0;
	background: none;
}
/* 내용(에디터 · 여러 줄 입력) · 동의처럼 폭을 다 쓰는 항목 */
.resv_form .login_form_wrapper > .login_form_box01:has(textarea),
.resv_form .login_form_wrapper > .login_form_box01:has(.note-editor),
.resv_form .login_etc_wrapper { grid-column: 1 / -1; }

.resv_form .login_form_box01 {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.resv_form .login_label_tit01 {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--s-ink);
	text-align: left;
}
/* 필수 항목 표시 : 라벨 글자 뒤에 붙인다.
   ※ board.css 의 .login_label_tit01.key::after 는 position:absolute + left:0 · top:0 (라벨 왼쪽에 세우고
     .key 의 padding-left:10px 로 글자를 밀어내는 방식) 인데, 위 .resv_form .login_label_tit01 이 padding:0 으로
     그 여백을 없애 버려 별표가 글자 위에 겹쳐 보였다. → position 을 static 으로 되돌린다. (2026-09-07) */
.resv_form .login_label_tit01.key:after {
	content: '*';
	position: static;
	margin-left: 4px;
	color: var(--s-brand);
	font-weight: 700;
}

/* 입력 · 선택 상자 : 서브 페이지 카드와 같은 테두리 · 라운드 */
.resv_form input[type="text"],
.resv_form input[type="password"],
.resv_form input[type="tel"],
.resv_form input[type="email"],
.resv_form select,
.resv_form textarea {
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	padding: 0 18px;
	border: 1px solid var(--s-line);
	border-radius: var(--radius, 10px);
	background: #fff;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--s-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.resv_form textarea {
	height: auto;
	min-height: 140px;
	padding: 16px 18px;
	line-height: 1.7;
	resize: vertical;
}
.resv_form input::placeholder,
.resv_form textarea::placeholder { color: #9aa4ac; font-weight: 500; }
.resv_form input:focus,
.resv_form select:focus,
.resv_form textarea:focus {
	outline: 0;
	border-color: var(--s-brand);
	box-shadow: 0 0 0 3px rgba(74,126,214,.14);
}
.resv_form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	/* 화살표 : 이미지 없이 두 변으로 그린다 */
	background-image:
		linear-gradient(45deg, transparent 50%, #7b8792 50%),
		linear-gradient(135deg, #7b8792 50%, transparent 50%);
	background-position: calc(100% - 22px) 25px, calc(100% - 16px) 25px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.resv_form select:disabled { background-color: #f6f8f9; color: #9aa4ac; }

/* 연락처 · 휴대폰 : 3칸 한 줄 */
.resv_form .login_tel_flex_box01 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	gap: 8px;
}
.resv_form .login_tel_flex_box01 .login_input_form_box01 { width: 100%; }
.resv_form .login_form_flex_box01,
.resv_form .login_input_form_box01 { position: relative; width: 100%; }
/* board.css 의 .login_input_form_box01 은 그 자체가 입력칸 모양(55px · 회색 #f9f9f9 · 좌우 20px 여백)이다.
   이 페이지는 input 에 직접 테두리 · 배경을 주므로, 래퍼 장식을 그대로 두면
   회색 박스 안에 흰 입력칸이 또 들어가 "박스가 두 겹" 으로 보인다 → 껍데기만 남긴다. (2026-09-07) */
.resv_form .login_input_form_box01 {
	height: auto;
	padding: 0;
	background: none;
	border-radius: 0;
}
/* 자동완성 시 되살아나는 회색 배경(board.css 의 inset 그림자)도 흰색으로 맞춘다 */
.resv_form .login_input_form_box01 input:-webkit-autofill,
.resv_form .login_input_form_box01 input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
}

/* 초진 · 재진 라디오 */
.resv_form .radio_type01_wrapper { display: flex; flex-wrap: wrap; gap: 10px; }
.resv_form .radio_type01 {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 56px;
	padding: 0 24px;
	border: 1px solid var(--s-line);
	border-radius: var(--radius, 10px);
	background: #fff;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--s-ink);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.resv_form .radio_type01:hover { border-color: var(--s-btn-line); background: var(--s-brand-soft); }
.resv_form .radio_type01 input { width: 18px; height: 18px; margin: 0; accent-color: var(--s-brand); }
.resv_form .radio_type01:has(input:checked) {
	border-color: var(--s-brand);
	background: var(--s-brand-soft);
	color: var(--s-btn-fg);
	font-weight: 600;
}

/* 수신 동의 · 개인정보 동의 체크 */
.resv_form .id_save_box {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--s-gray);
	cursor: pointer;
}
.resv_form .id_save_box input { width: 18px; height: 18px; margin: 0; accent-color: var(--s-brand); }

/* ----- 개인정보 동의 ----- */
.resv_form .login_etc_wrapper {
	margin: 0 0 40px;
	padding: 0;
	border: 0;
	background: none;
}
/* board.css 의 .login_etc_box01 은 그 자체가 회색 박스(190px · #f9f9f9 · padding 20px 10px)다.
   이 페이지는 안쪽 .txt_box 에 테두리 · 배경을 주므로, 래퍼 장식을 두면 박스가 두 겹으로 보이고
   높이(190px < 200px)까지 어긋난다 → 껍데기만 남긴다. (2026-09-09) */
.resv_form .login_etc_box01 {
	height: auto;
	margin: 10px 0 0;
	padding: 0;
	background: none;
	border-radius: 0;
}
.resv_form .login_etc_box01 .txt_box {
	height: 200px;
	padding: 22px 24px;
	overflow-y: auto;
	border: 1px solid var(--s-line);
	border-radius: var(--radius, 10px);
	background: #fbfcfc;
	font-size: 15px;
	line-height: 1.75;
	letter-spacing: -0.02em;
	color: var(--s-gray);
}

/* ----- 신청 버튼 ----- */
/* 모듈 기본값이 display:flex 라 가운데 정렬을 명시한다 */
.resv_form .login_submit_btn_box01 {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}
.resv_form .login_chk_btn01 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	height: 68px;
	border: 0;
	border-radius: var(--radius, 10px);
	background: var(--s-brand);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;
	text-decoration: none;
	box-shadow: 0 12px 26px rgba(48,98,195,.22);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.resv_form .login_chk_btn01:hover {
	background: var(--s-brand-dark);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(48,98,195,.28);
}

/* ==========================================================================
   달력 · 시간 선택 (calendarList.jsp · timeList.jsp 가 그리는 영역)
   ========================================================================== */
.resv_form .schedule_wrap {
	margin: 0 0 56px;
	padding: 30px 32px 34px;
	border: 1px solid var(--s-line);
	border-radius: var(--radius-lg, 16px);
	background: #fff;
}
.resv_form .schedule_wrap .calender_wrap { width: 100%; }
.resv_form .schedule_wrap table { width: 100%; border-collapse: collapse; }
/* 달력 머리 : 년월 + 이전 · 다음 화살표가 한 줄(th 하나) 안에 들어 있다 */
.resv_form .calendar_top_table th {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding: 4px 0 22px;
	border: 0;
}
.resv_form .calendar_top_table .now {
	min-width: 190px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--s-ink);
	text-align: center;
}
.resv_form .calendar_top_table img {
	width: 38px;
	height: 38px;
	padding: 11px;
	border: 1px solid var(--s-line);
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.resv_form .calendar_top_table img:hover { border-color: var(--s-btn-line); background: var(--s-brand-soft); }
/* 날짜 칸 */
.resv_form .calendar_table th,
.resv_form .calendar_table td {
	padding: 10px 0;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--s-ink);
	text-align: center;
}
.resv_form .calendar_table thead th {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--s-line);
	font-weight: 600;
	color: var(--s-gray);
}
/* 선택 가능한 날짜 */
.resv_form .schedule_wrap .onBg { color: var(--s-brand); font-weight: 700; }

/* 오늘 : 테두리 원 (표시만 하고 선택 상태와 헷갈리지 않게) — 2026-09-09
   ※ 예전에는 오늘(.on) 과 선택(#r_click) 이 같은 톤이라 어느 날짜를 고른 건지 구분되지 않았다. */
.resv_form .schedule_wrap .schedule table.calendar_table tbody td.on > span {
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 34px;
	border: 1px solid var(--s-brand);
	border-radius: 50%;
	background: none;
	color: var(--s-brand);
	font-weight: 700;
}
/* 오늘 셀은 <span><p>09</p></span> 구조라 board.css 가 안쪽 p 에 연분홍 박스(50px · radius 10px)를 그린다.
   그대로 두면 테두리 원과 겹쳐 두 겹으로 보이므로 p 의 장식을 지우고 글자만 남긴다. */
.resv_form .schedule_wrap .schedule table.calendar_table tbody td.on > span > p {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
/* 선택한 날짜 : 브랜드색으로 채운 원 + 흰 글자 (가장 강한 상태) */
.resv_form .schedule_wrap .schedule table.calendar_table tbody td#r_click > span {
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	border: 1px solid var(--s-brand);
	border-radius: 50%;
	background: var(--s-brand);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(48,98,195,.28);
}
/* 시간 목록 : 알약 버튼 */
.resv_form .schedule_time { margin-top: 24px; }
.resv_form .schedule_time ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.resv_form .schedule_time li a,
.resv_form .schedule_time li label,
.resv_form .schedule_time li button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 10px;
	border: 1px solid var(--s-line);
	border-radius: var(--radius, 10px);
	background: #fff;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--s-ink);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.resv_form .schedule_time li a:hover,
.resv_form .schedule_time li label:hover { border-color: var(--s-btn-line); background: var(--s-brand-soft); }
.resv_form .schedule_time li.on a,
.resv_form .schedule_time li.active a,
.resv_form .schedule_time li a.on {
	border-color: var(--s-brand);
	background: var(--s-brand);
	color: #fff;
	font-weight: 700;
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media all and (max-width:1024px){
	#bfrm .new_login_wrapper.resv_form { max-width: none; padding: 60px 20px 80px; }
	.resv_form .rs_tit { font-size: 21px; }
	.resv_form .rs_desc { font-size: 16px; }
	.resv_form .resv_notice { margin-bottom: 44px; padding: 22px 24px; }
	.resv_form .resv_notice p { font-size: 17px; }
	.resv_form .schedule_wrap { padding: 24px 22px 28px; }
}

@media all and (max-width:768px){
	/* 좁은 화면 : 입력은 한 줄에 하나 */
	.resv_form .login_form_wrapper { grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; }
	#bfrm .new_login_wrapper.resv_form { padding: 46px 16px 60px; }
	.resv_form .resv_step { gap: 12px; margin-bottom: 20px; padding-bottom: 14px; }
	.resv_form .rs_num { width: 40px; height: 40px; font-size: 15px; }
	.resv_form .rs_tit { font-size: 19px; }
	.resv_form .rs_desc { font-size: 15px; margin-top: 4px; }
	.resv_form .resv_notice p { font-size: 16px; }
	.resv_form input[type="text"],
	.resv_form input[type="password"],
	.resv_form input[type="tel"],
	.resv_form input[type="email"],
	.resv_form select { height: 52px; font-size: 16px; }
	.resv_form select { background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; }
	.resv_form .radio_type01 { min-height: 52px; padding: 0 18px; font-size: 16px; }
	.resv_form .login_etc_box01 .txt_box { height: 170px; padding: 18px 18px; font-size: 14px; }
	.resv_form .login_chk_btn01 { max-width: none; height: 60px; font-size: 18px; }
	.resv_form .schedule_wrap { padding: 18px 14px 22px; }
	.resv_form .schedule_wrap th,
	.resv_form .schedule_wrap td { font-size: 15px; }
	.resv_form .schedule_time ul { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
	.resv_form .schedule_time li a,
	.resv_form .schedule_time li label { min-height: 46px; font-size: 15px; }
}