/* 시간 예약(담당자 시간 고르기) 손님 화면 /book/{slug} 자리 배치 — 색·유리·고르기 부품은 ds.css(손님 흐름 옷 .cust), 위 줄·한 줄 폭은 workspace.css .cust 칸
   가게 얼굴 머리 → 제목 → 시간대 한 줄 → 시술 목록 → 담당 칩 → 날짜 띠 → 시간 칸 → 연락처 → 아래 붙는 막대(요약 + 보내기). 시안 = cust-v4-gradient.html */
.beauty-wrap .field{display:grid;gap:8px;min-width:0}
.beauty-wrap .in{width:100%;min-width:0}
.beauty-wrap>h1{margin-top:26px}
.bk-face{margin-top:2px}
/* 시간대 = 옅은 한 줄(늘 보임) */
.bk-tz{display:flex;gap:6px;align-items:flex-start;margin:-14px 0 6px;font-size:13px;color:var(--muted);line-height:1.5}
.bk-tz .ic{width:15px;height:15px;margin-top:2px;color:var(--brand-text)}
.beauty-wrap>.linkbtn{padding-inline:0;font-size:13.5px}
.bk-form{display:grid;gap:26px;margin-top:22px}
.bk-blk{display:grid;gap:10px;min-width:0}
.bk-h{font-size:13.5px;font-weight:700;color:var(--muted);letter-spacing:.005em;margin:0 2px}
.bk-form .daystrip{margin:-2px -20px;padding:2px 20px 12px;scroll-padding:0 20px}
@media (max-width:374px){.bk-form .daystrip{margin:-2px -16px;padding:2px 16px 12px}}
.bk-form .daystrip button{min-width:62px;min-height:76px;border-radius:18px}
.bk-form .daystrip button:disabled{background:transparent;border-color:transparent;box-shadow:none}
.bk-form .slots{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
.bk-form .slots button{min-height:50px;border-radius:16px}
.bk-form .slots .empty,.bk-form .chips .hint{grid-column:1/-1;margin:0;padding:16px 12px;border:1px dashed var(--line-2);border-radius:var(--r);font-size:14px;color:var(--muted);text-align:center;background:color-mix(in srgb,var(--surface) 50%,transparent)}
.bk-fields{gap:18px;padding-top:4px}
/* 아래 붙는 막대: 내리다 끝에 닿으면 제자리, 그 전엔 화면 아래에 붙음(홈페이지 .pg-bar 와 같은 모양) */
.bk-bar{position:sticky;bottom:0;z-index:20;display:grid;gap:8px;margin:0 -20px;padding:22px 20px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,transparent,var(--bg) 30%)}
@media (max-width:374px){.bk-bar{margin:0 -16px;padding-inline:16px}}
@media (min-width:640px){.bk-bar{margin:0 -40px;padding-inline:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}}  /* 넓은 화면: 한 줄 밖은 번짐 바탕이라 흰 띠 양 끝을 흐리게 */
.bk-bar .beauty-summary{margin:0 4px;font-size:14.5px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.bk-bar .beauty-summary:empty,.bk-bar .ws-error:empty{display:none}
.bk-bar .btn{width:100%;min-height:56px;font-size:19px}
html:has(.bk-bar){scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
/* 보낸 뒤: 큰 표시 + 제목 + 기다림 안내 + 고른 것 요약 카드 + 내 예약 단추 */
.bk-done{display:grid;justify-items:center;gap:14px;margin-top:34px;text-align:center}
.bk-done h1{margin:22px 0 0;font-size:27px;font-weight:800;letter-spacing:-.04em}
.bk-pend{font-size:15.5px;font-weight:650;color:var(--st-pend);line-height:1.55;max-width:34ch}
.bk-sum{width:100%;margin:6px 0 0;padding:4px 16px;text-align:start;border-radius:20px}
.bk-sum div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;font-size:15px}
.bk-sum div+div{border-top:1px solid var(--line)}
.bk-sum dt{color:var(--muted)}
.bk-sum dd{margin:0;font-weight:700;text-align:end;overflow-wrap:anywhere}
.bk-keep{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:40ch}
.bk-done .btn{margin-top:4px}

/* 사장님 설정 화면(관리 — admin-set.js 직원 칸)이 같이 씀 */
.beauty-wrap .ws-error:empty{display:none}
.beauty-staff { display: grid; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line, #ddd); }
.beauty-staff-hours { display: grid; gap: 10px; }
.beauty-staff-day { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.beauty-staff-day .in { width: 160px; min-width: 160px; }
.beauty-staff-day > label { min-width: 80px; }
.beauty-staff-day .beauty-time-label { display: grid; gap: 4px; }
.beauty-staff-services { display: flex; flex-wrap: wrap; gap: 12px; }
.beauty-staff-services label { overflow-wrap: anywhere; }