@charset "utf-8";
/* =========================================================================
 * 커뮤니티 > 상담 & 예약 (www/community/booking.jsp 전용)
 * Figma node 421:5355 (파일 PZUlzhuoLIjExVH7kLCad6 · 고객공유, 1920w)
 * 로드 순서: main_hero.css → jdh_sub.css → 이 파일
 * 선택자는 모두 .booking 하위로 스코프 한정 → 다른 페이지 오염 없음
 *
 * ⚠ 폼 페이지다. 다른 페이지와 다르게 잡은 것:
 *   · 입력 요소 색/테두리는 Figma 지정값을 그대로 쓴다(#FBFAF7 / #DDD6C8 / radius 6~8px).
 *   · 선택형 버튼(시간·진료항목)은 .is-on 하나로 상태를 표시한다 — 색만으로 구분하지 않고
 *     테두리 두께까지 바꾼다(색각 이상 사용자 고려).
 *   · 입력 글자 16px 이상 — iOS 사파리는 16px 미만 input 에 포커스하면 화면을 확대한다.
 *
 * ⚠ a:link 특이도 함정 — basic.css 의 `a:link{color:inherit}` 가 (0,1,1) 이라
 *   클래스 하나짜리 링크 스타일을 이긴다. 링크 버튼은 반드시 .booking 으로 감쌀 것.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

.booking {
	--bk-green:      #3B5843;
	--bk-green-deep: #2C4632;
	--bk-gold:       #C2A878;
	--bk-gold-ink:   #A5854B;
	--bk-ink:        #1C1E1A;
	--bk-body:       #5B615A;
	--bk-line:       #DDD6C8;   /* Figma 지정 — 입력 테두리 */
	--bk-field:      #FBFAF7;   /* Figma 지정 — 입력 배경 */
	--bk-cream:      #FBF9F2;
	--bk-paper:      #FFFDF8;
	--bk-warn:       #B4443A;

	--bk-t-h1:   38px;   /* 커뮤니티 계열 공통 히어로 타이틀 크기(게시판 페이지와 동일) */
	--bk-t-h2:   30px;
	--bk-t-lead: 19px;
	--bk-t-body: 17px;

	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	color: var(--bk-ink);
	background: #fff;
	overflow-x: clip;
}
.booking .bk_inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; }

/* =========================================================================
 * 1. 히어로
 * ⚠ 커뮤니티 계열 공통 규격 — 공지사항·언론보도·시술후기(page_board.css .dctb_hero)와
 *   피부이야기(page_skinstory.css .sksy_hero)가 같은 값을 쓴다. 나란히 보게 되는 페이지들이라
 *   한 곳만 바꾸지 말 것(2026-08-03 사용자 지시로 이 페이지를 그 규격에 맞췄다).
 *     배경  : #3B5843 + 좌상단 화이트 광 + 하단으로 어두워지는 그라데이션
 *     eng   : Cormorant Garamond 700 / 17px / 4.6px / UPPER / #CDBF9C
 *     title : 38px / 700 / -0.4px / #fff
 *     desc  : 15.5px / 1.7 / rgba(233,240,232,.76)
 *   ※ Figma 원본은 사진 배경 + 40px 타이틀이었다. 사진(/img/community/booking/hero_bg.jpg)은
 *     남겨 두었으니 되돌릴 일이 생기면 이 블록만 교체하면 된다.
 * ========================================================================= */
.bk_hero {
	background: var(--bk-green);
	background-image:
		radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 58%),
		linear-gradient(180deg, rgba(10,16,12,.10) 0%, rgba(10,16,12,.28) 100%);
	padding: 62px 24px 66px;
	text-align: center;
}
.bk_hero__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 4.6px;
	text-transform: uppercase;
	color: #CDBF9C;
}
.bk_hero__title {
	margin: 14px 0 0;
	font-weight: 700;
	font-size: var(--bk-t-h1);
	line-height: 1.2;
	letter-spacing: -.4px;
	color: #fff;
}
.bk_hero__desc {
	margin: 14px auto 0;
	max-width: 560px;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(233,240,232,.76);
	word-break: keep-all;
}

/* =========================================================================
 * 2. 탭 — [상담예약][온라인문의]
 *    Figma: 크림 배경 알약 트랙 위에 흰 알약이 얹히는 형태(radius 12/8px)
 * ========================================================================= */
.bk_tabs {
	display: flex;
	gap: 6px;
	max-width: 520px;
	margin: -34px auto 0;       /* 히어로 아래로 살짝 겹쳐 올린다 */
	padding: 6px;
	position: relative;
	z-index: 5;
	background: #F1EEE6;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(28,30,26,.10);
}
.bk_tab {
	flex: 1 1 0;
	padding: 14px 20px;
	border: 0;
	border-radius: 8px;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -.3px;
	color: rgba(28,30,26,.52);
	transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.bk_tab.is-on {
	background: #fff;
	color: var(--bk-ink);
	box-shadow: 0 2px 8px rgba(28,30,26,.10);
}
.bk_tab:hover:not(.is-on) { color: var(--bk-ink); }

/* =========================================================================
 * 3. 폼 영역
 * ========================================================================= */
.bk_body { padding: 54px 0 96px; background: var(--bk-paper); }
.bk_panel[hidden] { display: none; }
.bk_panel.is-swap { animation: bkSwap .4s cubic-bezier(.22,.61,.36,1); }
@keyframes bkSwap {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.bk_card {
	padding: 46px 48px 44px;
	background: #fff;
	border: 1px solid #ECE7DD;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(28,30,26,.06);
}
.bk_card__eyebrow {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 4.5px;
	text-transform: uppercase;
	color: var(--bk-gold-ink);
}
.bk_card__title {
	margin: 12px 0 0;
	font-weight: 700;
	font-size: var(--bk-t-h2);
	line-height: 1.34;
	letter-spacing: -.8px;
	color: var(--bk-ink);
}
.bk_card__desc {
	margin: 10px 0 0;
	font-size: var(--bk-t-body);
	line-height: 1.7;
	color: rgba(28,30,26,.6);
	word-break: keep-all;
}

/* ── 필드 공통 ── */
.bk_field { margin: 34px 0 0; }
.bk_field__label {
	display: block;
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 13px;
	color: var(--bk-green);     /* Figma 지정 */
}
.bk_field__label em { font-style: normal; color: var(--bk-warn); }
.bk_row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bk_input {
	width: 100%;
	padding: 13px 16px;
	background: var(--bk-field);
	border: 1px solid var(--bk-line);
	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;            /* ⚠ 16px 미만이면 iOS 에서 포커스 시 화면이 확대된다 */
	color: var(--bk-ink);
	box-sizing: border-box;
	transition: border-color .2s ease, background .2s ease;
}
.bk_input::placeholder { color: #B3AFA4; }   /* Figma 지정 */
.bk_input:focus {
	outline: none;
	background: #fff;
	border-color: var(--bk-green);
}
textarea.bk_input { min-height: 150px; line-height: 1.7; resize: vertical; }

/* ── 날짜 + 시간을 한 줄에 ──
 * ⚠ 달력을 카드 전체 폭에 펼치면 7등분된 날짜 칸이 140px 정사각형이 되어 과하게 커진다.
 *   달력 폭을 고정하고 남는 자리에 시간 선택을 붙인다(2026-08-03 "캘린더가 너무 커" 반영). */
.bk_when {
	display: grid;
	grid-template-columns: 392px 1fr;
	gap: 0 32px;
	margin: 34px 0 0;
	align-items: start;
}
.bk_when .bk_field { margin: 0; }

/* ── 날짜 선택 (달력) ── */
.bk_cal {
	background: var(--bk-field);
	border: 1px solid var(--bk-line);
	border-radius: 8px;
	padding: 14px 16px 16px;
}
.bk_cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
}
.bk_cal__ym { font-weight: 700; font-size: 16px; color: var(--bk-ink); }
.bk_cal__nav {
	width: 32px;
	height: 32px;
	border: 1px solid var(--bk-line);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: var(--bk-body);
	transition: border-color .2s ease, color .2s ease;
}
.bk_cal__nav:hover { border-color: var(--bk-green); color: var(--bk-green); }
.bk_cal__nav[disabled] { opacity: .35; cursor: default; }
.bk_cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.bk_cal__dow {
	text-align: center;
	padding: 4px 0 6px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(28,30,26,.45);
}
.bk_cal__dow--sun { color: rgba(180,68,58,.7); }
/* ⚠ 높이는 고정값 — aspect-ratio 로 두면 컨테이너 폭에 따라 칸이 커진다(위 .bk_when 주석 참조) */
.bk_cal__day {
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 7px;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--bk-ink);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bk_cal__day:hover:not([disabled]) { background: rgba(59,88,67,.08); }
.bk_cal__day[disabled] { color: rgba(28,30,26,.22); cursor: default; }
.bk_cal__day--empty { border: 0; cursor: default; }
.bk_cal__day.is-on {
	background: var(--bk-green);
	border-color: var(--bk-green);
	color: #fff;
	font-weight: 700;
}

/* ── 선택형 버튼(시간 · 진료항목) ── */
.bk_chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bk_chip {
	padding: 11px 18px;
	background: var(--bk-field);
	border: 1px solid var(--bk-line);
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	color: var(--bk-body);      /* Figma 지정 */
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bk_chip:hover:not([disabled]) { border-color: var(--bk-green); color: var(--bk-green); }
/* ⚠ 선택 상태는 색 + 테두리 두께 두 가지로 표시한다(색만으로 구분하지 않는다) */
.bk_chip.is-on {
	background: var(--bk-green);
	border-color: var(--bk-green);
	border-width: 2px;
	padding: 10px 17px;         /* 테두리가 굵어진 만큼 보정 */
	color: #fff;
}
.bk_chip[disabled] { opacity: .4; cursor: default; }

/* ── 동의 체크 ── */
/* ⚠ 상단 여백은 .bk_agree 가 아니라 감싸는 .bk_agree__row 가 갖는다(2026-08-10).
 *   여기에 margin-top 을 두면 같은 행의 '[자세히]' 버튼만 위로 떠오르고,
 *   팝오버의 bottom 기준(행 높이)도 그 마진만큼 어긋난다 — 실제로 겪음. */
.bk_agree {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	user-select: none;
}
.bk_agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.bk_agree__box {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bk-line);
	border-radius: 5px;
	background: #fff;
	font-size: 13px;
	line-height: 1;
	color: transparent;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.bk_agree input:checked + .bk_agree__box {
	background: var(--bk-green);
	border-color: var(--bk-green);
	color: #fff;
}
.bk_agree input:focus-visible + .bk_agree__box { outline: 2px solid var(--bk-gold); outline-offset: 2px; }
.bk_agree__txt { font-size: 15px; color: rgba(28,30,26,.7); }
.bk_agree__txt a { color: var(--bk-green); text-decoration: underline; }

/* ── '[자세히]' — 개인정보처리방침(/member/policy) 새 탭 링크 ────────────────
 * ⚠ label **바깥**에 둔다 — 안에 넣으면 클릭할 때마다 동의 체크가 뒤집힌다.
 * 푸터 간편예약 바(css/footer.css 의 .jdh_footer__policy-btn)와 같은 UX 다 — 함께 볼 것.
 * (2026-08-10 팝오버 요약에서 방침 전문 페이지 이동으로 교체) */
.bk_agree__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 30px 0 0;   /* 예전 .bk_agree 의 상단 여백을 여기로 옮겼다 */
}
/* ⚠ 선택자는 a.클래스 로 쓴다 — basic.css 의 a:link/a:visited{color:inherit}(0,1,1)가
 *   클래스 단독(0,1,0)을 이겨 그린색이 무시된다 */
a.bk_policy__btn {
	flex: 0 0 auto;
	padding: 2px 0;
	font-size: 15px;
	color: var(--bk-green);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .2s;
}
a.bk_policy__btn:hover { color: var(--bk-gold-ink); }
.bk_agree__more {
	margin: 12px 0 0;
	padding: 14px 16px;
	background: var(--bk-cream);
	border-radius: 8px;
	font-size: 13.5px;
	line-height: 1.7;
	color: rgba(28,30,26,.58);
	word-break: keep-all;
}

/* ── 제출 ── */
.bk_submit {
	width: 100%;
	margin: 26px 0 0;
	padding: 18px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--bk-green);
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	transition: background .25s ease;
}
.bk_submit:hover { background: var(--bk-green-deep); }
.bk_note {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13.5px;
	color: rgba(28,30,26,.48);
	word-break: keep-all;
}

/* =========================================================================
 * 4. 공통 연락처
 * ========================================================================= */
.bk_contact { padding: 84px 0 88px; background: var(--bk-cream); border-top: 1px solid #EFEAE0; }
.bk_contact__head { text-align: center; margin: 0 0 34px; }
.bk_contact__label {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 4.5px;
	text-transform: uppercase;
	color: var(--bk-gold-ink);
}
.bk_contact__tel {
	display: inline-block;
	margin: 14px 0 0;
	font-weight: 700;
	font-size: 40px;
	letter-spacing: 1px;
	color: var(--bk-ink);
	text-decoration: none;
}
.bk_contact__hours { margin: 12px 0 0; font-size: 15px; color: rgba(28,30,26,.55); }
.bk_contact__links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
/* ⚠ .booking 으로 감쌀 것 — a:link{color:inherit} 특이도 때문(상단 주석) */
.booking .bk_link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-width: 230px;
	padding: 16px 26px;
	border-radius: 999px;
	border: 1px solid var(--bk-line);
	background: #fff;
	text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.booking .bk_link:hover { border-color: var(--bk-green); box-shadow: 0 10px 24px rgba(28,30,26,.08); }
.bk_link__ico {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 15px;
	background: rgba(59,88,67,.08);
	color: var(--bk-green);
}
.bk_link--naver .bk_link__ico { background: #03C75A; color: #fff; }
/* 외국어판은 국내 메신저 대신 그 나라 메신저를 쓴다 — 영문 WhatsApp · 일본어 LINE (2026-09-09) */
.bk_link--wa .bk_link__ico   { background: #25D366; color: #fff; }
.bk_link--line .bk_link__ico { background: #06C755; color: #fff; }
.bk_link--wechat .bk_link__ico { background: #07C160; color: #fff; }   /* 중국어판 위챗 QR 모달 (2026-09-14) */
.bk_link--wa .bk_link__ico svg,
.bk_link--line .bk_link__ico svg,
.bk_link--wechat .bk_link__ico svg { display: block; }
.bk_link__txt { display: block; }
.bk_link__txt b { display: block; font-size: 16px; font-weight: 700; color: var(--bk-ink); }
.bk_link__txt span { display: block; margin: 2px 0 0; font-size: 13.5px; color: rgba(28,30,26,.55); }

/* =========================================================================
 * 반응형
 * ========================================================================= */
@media all and (max-width: 1024px) {
	.booking { --bk-t-h1: 32px; --bk-t-h2: 26px; }
	.booking .bk_inner { padding: 0 28px; }
	.bk_hero { padding: 54px 24px 58px; }
	.bk_card { padding: 36px 32px 34px; }
	.bk_when { grid-template-columns: 344px 1fr; gap: 0 24px; }
	.bk_body { padding: 44px 0 76px; }
	.bk_contact { padding: 68px 0 72px; }
	.bk_contact__tel { font-size: 34px; }
}

@media all and (max-width: 768px) {
	/* 게시판 페이지(.dctb_hero) 768↓ 값과 동일하게 */
	.booking { --bk-t-h1: 27px; --bk-t-h2: 22px; --bk-t-body: 16px; }
	.booking .bk_inner { padding: 0 20px; }
	.bk_hero { padding: 46px 18px 50px; }
	.bk_hero__eyebrow { font-size: 15px; letter-spacing: 3.4px; }
	.bk_hero__desc { font-size: 14.5px; }
	.bk_hero__desc br { display: none; }
	.bk_tabs { max-width: none; margin-top: -28px; }
	.bk_tab { font-size: 15px; padding: 12px 14px; }
	.bk_card { padding: 28px 22px 26px; border-radius: 14px; }
	.bk_field { margin-top: 28px; }
	/* 이름·연락처를 한 줄에 두면 입력칸이 좁아 오타가 는다 → 세로로 */
	.bk_row { grid-template-columns: 1fr; gap: 20px; }
	/* 날짜·시간도 세로로 쌓는다. 달력은 폭을 풀되 최대치를 두어 칸이 커지지 않게 한다 */
	.bk_when { grid-template-columns: 1fr; gap: 28px 0; }
	.bk_cal { padding: 12px 12px 14px; max-width: 360px; }
	.bk_cal__grid { gap: 2px; }
	.bk_cal__day { height: 36px; font-size: 13.5px; border-radius: 6px; }
	.bk_chip { padding: 10px 14px; font-size: 13.5px; }
	.bk_chip.is-on { padding: 9px 13px; }
	.bk_contact__tel { font-size: 28px; }
	.booking .bk_link { min-width: 0; flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.bk_tab, .bk_chip, .bk_cal__day, .bk_input, .bk_submit { transition: none; }
	.bk_panel.is-swap { animation: none; }
}