/* ============================================================================
   Booking — 단순 1페이지 신청 폼
   cream + slate-blue + terracotta · 명조 + SUIT · Refined Editorial
   ========================================================================== */

/* ── 페이지 래퍼 ──────────────────────────────────────────────────────────── */
.sf-bk {
	background: var(--sf-bg);
	padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 128px);
}
.sf-bk__inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 var(--sf-gutter);
}

/* ── 폼 레이아웃 ──────────────────────────────────────────────────────────── */
.sf-bk__form {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 4vw, 48px);
}

/* ── 섹션(fieldset) ───────────────────────────────────────────────────────── */
.sf-bk__section {
	margin: 0;
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	background: var(--sf-paper);
	box-shadow: var(--sf-shadow-1);
}

.sf-bk__legend {
	padding: 0 8px;
	font-family: var(--sf-display);
	font-size: clamp(1.05rem, 1.5vw + 0.3rem, 1.25rem);
	letter-spacing: -0.03em;
	line-height: 1.3;
	color: var(--sf-ink);
	word-break: keep-all;
}
.sf-bk__legend em {
	font-style: normal;
	font-family: var(--sf-sans);
	font-size: 13px;
	letter-spacing: 0;
	color: var(--sf-muted);
	font-weight: 400;
	margin-left: 6px;
}

.sf-bk__req {
	color: var(--sf-accent);
	margin-left: 2px;
}

/* ── 기본 정보 그리드 ─────────────────────────────────────────────────────── */
.sf-bk__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.sf-bk__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* [hidden] 기본 규칙보다 .sf-bk__field의 display가 우선하므로 명시적으로 숨김
   (conditional-fields.js의 조건부 필드 전환에서 필요) */
.sf-bk__field[hidden] { display: none; }
.sf-bk__field--full { grid-column: 1 / -1; }

.sf-bk__label {
	font-family: var(--sf-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--sf-ink-soft);
}
.sf-bk__label em {
	font-style: normal;
	color: var(--sf-muted);
	font-weight: 400;
	margin-left: 4px;
}

.sf-bk__field input,
.sf-bk__field select,
.sf-bk__field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-sm);
	font-family: var(--sf-sans);
	font-size: 14.5px;
	background: var(--sf-paper);
	color: var(--sf-ink);
	transition: border-color var(--sf-fast) var(--sf-ease),
	            box-shadow var(--sf-fast) var(--sf-ease);
	box-sizing: border-box;
}
.sf-bk__field input:focus,
.sf-bk__field select:focus,
.sf-bk__field textarea:focus {
	outline: 0;
	border-color: var(--sf-primary);
	box-shadow: 0 0 0 3px rgba(44, 74, 94, 0.13);
}
.sf-bk__field textarea { resize: vertical; }

/* ── 라디오 카드 그룹 ─────────────────────────────────────────────────────── */
.sf-bk__radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}
.sf-bk__radio-card {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.sf-bk__radio-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.sf-bk__radio-label {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--sf-line);
	border-radius: 999px;
	background: var(--sf-bg);
	font-family: var(--sf-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--sf-ink-soft);
	letter-spacing: -0.005em;
	word-break: keep-all;
	transition: background var(--sf-fast) var(--sf-ease),
	            border-color var(--sf-fast) var(--sf-ease),
	            color var(--sf-fast) var(--sf-ease),
	            box-shadow var(--sf-fast) var(--sf-ease);
}
.sf-bk__radio-card:hover .sf-bk__radio-label {
	border-color: var(--sf-primary);
	color: var(--sf-primary);
}
.sf-bk__radio-card input[type="radio"]:checked + .sf-bk__radio-label {
	background: var(--sf-primary);
	border-color: var(--sf-primary);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(44, 74, 94, 0.22);
}
.sf-bk__radio-card input[type="radio"]:focus-visible + .sf-bk__radio-label {
	outline: 0;
	box-shadow: 0 0 0 3px var(--sf-bg), 0 0 0 6px var(--sf-accent);
}

/* ── 체크박스 카드 그룹 ───────────────────────────────────────────────────── */
.sf-bk__check-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.sf-bk__check-card {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.sf-bk__check-card input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.sf-bk__check-label {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--sf-line);
	border-radius: 999px;
	background: var(--sf-bg);
	font-family: var(--sf-sans);
	font-size: 13.5px;
	font-weight: 400;
	color: var(--sf-ink-soft);
	letter-spacing: -0.005em;
	word-break: keep-all;
	transition: background var(--sf-fast) var(--sf-ease),
	            border-color var(--sf-fast) var(--sf-ease),
	            color var(--sf-fast) var(--sf-ease),
	            box-shadow var(--sf-fast) var(--sf-ease);
}
.sf-bk__check-card:hover .sf-bk__check-label {
	border-color: var(--sf-accent);
	color: var(--sf-accent);
}
.sf-bk__check-card input[type="checkbox"]:checked + .sf-bk__check-label {
	background: var(--sf-accent-soft);
	border-color: var(--sf-accent);
	color: var(--sf-accent);
	font-weight: 700;
}
.sf-bk__check-card input[type="checkbox"]:focus-visible + .sf-bk__check-label {
	outline: 0;
	box-shadow: 0 0 0 3px var(--sf-bg), 0 0 0 6px var(--sf-accent);
}

/* ── 제출 영역 ────────────────────────────────────────────────────────────── */
.sf-bk__submit-area {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.sf-bk__status {
	margin: 0;
	font-family: var(--sf-sans);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sf-primary);
	min-height: 1em;
	text-align: right;
	word-break: keep-all;
}
.sf-bk__status.is-error { color: #c0392b; }

.sf-bk__submit-btn {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border: 1px solid var(--sf-primary);
	border-radius: 999px;
	background: var(--sf-primary);
	color: #fff;
	font-family: var(--sf-sans);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	box-shadow: 0 8px 22px rgba(44, 74, 94, 0.22);
	transition: background var(--sf-fast) var(--sf-ease),
	            border-color var(--sf-fast) var(--sf-ease),
	            transform var(--sf-fast) var(--sf-ease),
	            box-shadow var(--sf-fast) var(--sf-ease);
}
.sf-bk__submit-btn:hover {
	background: var(--sf-primary-dark);
	border-color: var(--sf-primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(22, 41, 58, 0.3);
}
.sf-bk__submit-btn:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--sf-bg), 0 0 0 6px var(--sf-accent);
}
.sf-bk__submit-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
}

/* ── 성공 화면 ────────────────────────────────────────────────────────────── */
.sf-bk__success {
	text-align: center;
	padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px);
	background: var(--sf-paper);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-lg);
	box-shadow: var(--sf-shadow-2);
}
.sf-bk__success[hidden] { display: none; }

.sf-bk__success-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 22px;
	color: var(--sf-accent);
}
.sf-bk__success-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sf-bk__success-eyebrow {
	margin: 0 0 10px;
	font-family: var(--sf-sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--sf-accent);
	font-weight: 700;
}
.sf-bk__success-title {
	margin: 0 0 16px;
	font-family: var(--sf-display);
	font-size: clamp(1.5rem, 2.4vw + 0.4rem, 2rem);
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--sf-ink);
	word-break: keep-all;
}
.sf-bk__success-sub {
	margin: 0 auto 28px;
	max-width: 380px;
	font-family: var(--sf-sans);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--sf-ink-soft);
	word-break: keep-all;
}

/* 접수 번호 영수증 카드 */
.sf-bk__receipt {
	display: inline-block;
	text-align: left;
	margin: 0;
	padding: 16px 28px;
	background: var(--sf-bg);
	border: 1px dashed var(--sf-line);
	border-radius: var(--sf-radius);
}
.sf-bk__receipt > div {
	display: flex;
	align-items: baseline;
	gap: 18px;
}
.sf-bk__receipt dt {
	margin: 0;
	font-family: var(--sf-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sf-muted);
	font-weight: 700;
	white-space: nowrap;
}
.sf-bk__receipt dd {
	margin: 0;
	font-family: var(--sf-display);
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--sf-accent);
	font-feature-settings: "tnum" 1;
}

/* ── 반응형 (≤720px) ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
	.sf-bk__grid { grid-template-columns: 1fr; }
	.sf-bk__field--full { grid-column: auto; }
	.sf-bk__submit-area { align-items: stretch; }
	.sf-bk__submit-btn { justify-content: center; }
	.sf-bk__status { text-align: center; }
}

/* ── 접근성: 움직임 감소 ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.sf-bk__radio-label,
	.sf-bk__check-label,
	.sf-bk__submit-btn { transition: none; }
}