/* 사장님 쪽 공용 모양(ownerkit.js · picker.js) — 요청 큰 요약 · 요청 칩 · 메모 · 자리 막대 · 확정/다른 시간/어려워요 · 시간 고르기 · 끝 화면.
   사장님 링크(owner.html)와 관리 화면(admin.html)이 같이 씀. 색은 ds.css 토큰만 */

/* 큰 요약: 날짜 → 시간·인원 크게 → 이름 */
.sum{display:grid;gap:2px;min-width:0}
.sum-day{font-size:15px;font-weight:650;color:var(--muted)}
.sum-when{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.sum-when strong{font-size:32px;font-weight:800;letter-spacing:-.035em;line-height:1.12}
.sum-party{padding-inline-start:14px;border-inline-start:2px solid var(--line-2)}
.sum-who{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:18px;margin-top:2px;min-width:0}
.sum-who b{font-weight:720;overflow-wrap:anywhere}

/* 요청 칩 줄 · 메모(번역 위, 원문 작게 아래) */
.tags{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.memo{display:grid;gap:4px;background:var(--surface-2);border-radius:var(--r-s);padding:10px 12px;min-width:0}
.memo-t{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.orig{font-size:13px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.orig b{font-size:12px;font-weight:700;color:var(--faint);margin-inline-end:2px}
/* 위험한 말(알레르기·약 …)이 있는 메모: ⚠ 한 줄 → 손님 원문을 먼저 크게 → 자동 번역은 아래 작게 */
.memo.risk{background:var(--st-bad-bg);box-shadow:inset 3px 0 0 var(--st-bad)}
[dir=rtl] .memo.risk{box-shadow:inset -3px 0 0 var(--st-bad)}
.memo-risk{font-size:14px;font-weight:740;color:var(--st-bad);line-height:1.45}
.memo-src b{font-size:12px;font-weight:700;color:var(--muted);margin-inline-end:2px}
/* 직원 메모(카운터에서 적은 것 — 손님 글과 따로) */
.memo-staff{font-size:14px;line-height:1.45;overflow-wrap:anywhere;padding-top:6px;border-top:1px dashed var(--line-2)}
.memo-staff:first-child{padding-top:0;border-top:0}
.memo-staff b{font-size:12px;font-weight:700;color:var(--muted);margin-inline-end:2px}

/* 「화면 말을 번역하는 중」 띠(ownlang.js — 자동 번역 언어를 처음 열 때) */
.tr-band{margin:0;padding:8px 16px;background:var(--st-pend-bg);color:var(--st-pend);font-size:13px;font-weight:650;text-align:center}

/* 나머지 칸(전화·업종 줄) */
.facts{display:grid;grid-template-columns:minmax(56px,auto) minmax(0,1fr);gap:10px 12px;margin:0;font-size:15px;align-items:baseline}
.facts dt{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.facts dd{margin:0;min-width:0}
.facts dd .memo{margin-top:-2px}
.btn.tel{font-variant-numeric:tabular-nums}

/* 자리 막대: 「그 시간 자리 23/40명 → 받으면 29명」 */
.cmeter{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.cmeter b{color:var(--ink);font-weight:740}
.cm-bar{display:flex;height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.cm-now{display:block;height:100%;background:var(--act)}
.cm-add{display:block;height:100%;background:var(--focus)}
.cmeter.over .cm-add{background:var(--st-bad)}
.cm-over{color:var(--st-bad);font-weight:700}

/* 확정 · 다른 시간 · 어려워요 — 확정이 가장 크게, 나머지는 아래 한 줄 */
.dec{display:grid;gap:8px}
.dec-main{display:grid;gap:6px}
.dec-line{font-size:17px;font-weight:720;letter-spacing:-.01em;overflow-wrap:anywhere}
.dec-alt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dec-alt .btn{padding:0 10px}
.dec-panel{display:grid;gap:12px;padding-top:4px}
.dec-h{font-size:18px}
.dec-h:focus{outline:none}
/* 사장님 링크 한 장: 확정 막대가 화면 아래에 붙어 있다가 끝에 오면 제자리 */
.dec-page .dec-main{position:sticky;bottom:0;z-index:5;margin:0 -16px;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);box-shadow:var(--shadow-up);border-top:1px solid var(--line)}
.dec-page .dec-alt{margin-top:4px}

/* 시간 고르기 */
.picker{display:grid;gap:8px;min-width:0}
.picker .label{margin-top:4px}
.picker .daystrip button small:last-child{font-size:10px}
.picker .slots{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.picker .slots button{padding:0 6px;white-space:nowrap}
/* 띠 밖 날짜(O6) — 한 줄: 「다른 날짜」 + 날짜 칸 */
.pk-other{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.pk-other .in{flex:1;min-width:0;max-width:220px}
.pk-empty{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:10px 2px;color:var(--muted);font-size:14px}

/* 끝 화면 */
.done-view{display:grid;justify-items:center;gap:10px;text-align:center;padding:20px 8px}
.done-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--st-seat-bg);color:var(--st-seat)}
.done-ic .ic{width:30px;height:30px}
.done-ic.grey{background:var(--st-dim-bg);color:var(--st-dim)}
.done-view h2{font-size:22px}
.done-view h2:focus{outline:none}
.done-view p{color:var(--muted);max-width:36ch}
.done-view .btn{margin-top:6px}