/* 이펙터 · 2026-10 제작 · 진료예약·상담 신청 스타일 */

[data-cs-step][hidden], [data-cs-member][hidden], [data-cs-guest][hidden] { display: none; }
.mb-title:focus { outline: 0; }

.cs-policy { max-height: 18rem; white-space: normal; line-height: 1.5; }
.cs-policy p { margin: 0 0 .5rem; }
@media (min-width: 768px) { .cs-policy { max-height: 22rem; } }
.mb-terms:has(.cs-policy) { padding: 1rem; }
@media (min-width: 768px) { .mb-terms:has(.cs-policy) { padding: 1.5rem 2rem; } }
.cs-agree { display: flex; margin-top: 1.5rem; }
@media (min-width: 768px) { .cs-agree { justify-content: center; } }
.cs-agree .mb-chk-t { color: var(--ss-ink); font-weight: 500; }

.cs-opt-t { font-weight: 400; color: var(--mb-ph); }

.cs-email { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cs-email > .mb-input { flex: 1 1 0; min-width: 0; }
.cs-email-at { flex: none; font-size: 1rem; font-weight: 500; color: var(--ss-ink); }
.cs-email .cs-select { flex: 1 1 100%; }
@media (min-width: 576px) { .cs-email .cs-select { flex: 0 0 8.5rem; } }
.cs-select { position: relative; display: block; }
.cs-select .mb-input { padding-right: 2rem; cursor: pointer; text-overflow: ellipsis; }
.cs-select::after { content: ""; position: absolute; top: 50%; right: .875rem; width: .75rem; height: .5rem; margin-top: -.25rem; pointer-events: none; background: var(--ss-ink); -webkit-mask: url(../../../icons/ico-chevron-down.svg) center / contain no-repeat; mask: url(../../../icons/ico-chevron-down.svg) center / contain no-repeat; }

.cs-textarea { height: auto; min-height: 10rem; padding-block: .75rem; resize: vertical; }
.cs-date, .cs-time { min-width: 0; }
.cs-ro { background: var(--mb-box); color: var(--ss-ink); cursor: default; }
.cs-ro:hover { border-color: var(--mb-line); }


#csFormMsg { margin-top: 1.5rem; }
#csFormMsg + .mb-submit { margin-top: 1rem; }

.cs-opts { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cs-opt { display: flex; width: 100%; padding: .75rem var(--mb-px); border: 1px solid var(--mb-line); border-radius: var(--mb-r); transition: border-color .15s; }
.cs-opt:hover { border-color: var(--mb-line-2); }
.cs-opt:has(input:checked) { border-color: var(--ss-ink); }
.cs-opt-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cs-opt-price { flex: none; font-weight: 700; color: var(--ss-ink); }
.cs-consent { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cs-consent .mb-chk { color: var(--ss-ink); font-weight: 500; }
.cs-consent-link { flex: none; font-size: .875rem; line-height: 1.5; color: var(--mb-ph); text-decoration: underline; }
.cs-consent-link:hover { color: var(--ss-ink); }
.mb-box[data-cs-summary] { flex-direction: column; line-height: 1.75; }