/* 손님 화면 공용 자리 배치(customer · manage · privacy) — 색·부품은 ds.css 토큰만. 화면 모양 = docs/UI-A.md 「손님 예약」「내 예약」
   가운데 한 줄(최대 560px) · 언어 단추 · 아래 작은 글 · 대화 카드(말풍선은 ds.css) · 알림 켜기 카드 */
.wrap{width:100%;max-width:560px;margin:0 auto;padding:0 20px}
@media (max-width:374px){.wrap{padding:0 16px}}

/* 지구 단추(ui.js langStart) — 누르면 아래서 언어 판. 글 = 지금 언어 이름(그 말로) */
.langbtn{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);max-width:12em;padding:0 14px 0 12px;border:0;border-radius:999px;background:var(--surface-2);color:var(--ink);font-size:14px;font-weight:650;line-height:1.2}
.langbtn .ic{width:18px;height:18px;flex:none}
.langbtn .ln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 언어 판: 찾기 칸(위에 붙음) · 추천 · 모든 언어. 한 줄 = 그 말 이름 + 지금 말로 쓴 이름 */
.langsheet{display:grid;gap:8px}
.langq{position:sticky;top:-2px;z-index:1;display:flex;align-items:center;gap:8px;padding:2px 0 8px;background:var(--surface)}
.langq .ic{position:absolute;inset-inline-start:14px;width:18px;height:18px;color:var(--muted);pointer-events:none}
.langq .in{padding-inline-start:42px}
.langsheet h3{margin:8px 4px 0}
.langlist{display:grid;gap:2px}
.langrow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 12px;border:0;border-radius:var(--r-s);background:none;color:var(--ink);text-align:start}
.langrow:hover{background:var(--surface-2)}
.langrow[aria-current]{background:var(--brand-soft)}
.langrow .lt{flex:1;min-width:0}
.langrow b{display:block;font-size:16px;font-weight:650}
.langrow small{display:block;font-size:13px;color:var(--muted)}
.langrow .ic{width:20px;height:20px;color:var(--brand-text);flex:none}
.langrow[hidden],.langlist[hidden],.langsheet h3[hidden]{display:none}
/* 「번역 중」 띠 — 처음 고른 언어의 사전이 아직 번역 중일 때 맨 위 한 줄(잠시 영어) */
.trband{margin:0;padding:8px 16px;background:var(--st-pend-bg);color:var(--st-pend);font-size:13px;font-weight:600;text-align:center;line-height:1.4}
.trband[hidden]{display:none}

/* 언어 단추(EN | 한국어) — 바탕 위 나눔 단추(줄서기 화면이 아직 씀) */
.lang{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2)}
.lang button{min-height:44px;min-width:48px;padding:0 12px;border:0;border-radius:999px;background:transparent;font-size:13px;font-weight:650;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* 맨 아래 작은 글 — 우리 이름은 여기만 */
.gfoot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;padding:20px 20px 28px;font-size:12px;color:var(--muted);text-align:center}
.gfoot a{color:inherit;display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.gfoot .sep{opacity:.6}
.gbiz{flex-basis:100%;margin:0 0 4px;line-height:1.7}
.gbiz span{display:inline-block}

/* 대화 카드(보낸 화면·내 예약): 말풍선 → 답 단추 → 「가게에 알렸어요」 → 설명 한 줄 */
.stcard{display:grid;gap:14px;padding:18px 16px}
.stcard .qnote{font-size:13px;color:var(--muted);margin:-6px 2px 0;line-height:1.45}
.stcard .told{margin:0;padding:10px 12px}
.stcard .err{margin:0}
.stcard .say{font-size:14px;line-height:1.55;color:var(--muted);padding-top:14px;border-top:1px solid var(--line);margin:0}

/* 알림 켜기 카드(notify.js) — .plain = 카드 없이 한 줄(켜짐·문자로 대신) */
.ncard{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.ncard.plain{background:none;border:0;padding:0 4px}
.ncard .nhead{display:flex;gap:12px;align-items:center}
.ncard .nic{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand-text);display:grid;place-items:center;flex:none}
.ncard .nic .ic{width:20px;height:20px}
.ncard .nhead b{display:block;font-size:15px;font-weight:700;line-height:1.35}
.ncard .nhead div>span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.ncard .non,.ncard .nline{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--muted);line-height:1.45}
.ncard .non{color:var(--st-seat);font-weight:650}
.ncard .non .linkbtn{margin-inline-start:auto;min-height:44px}
.ncard .non .ic,.ncard .nline .ic{width:18px;height:18px;flex:none}
.ncard .nsteps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ncard .nsteps li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.4}
.ncard .nnum{width:22px;height:22px;border-radius:50%;background:var(--surface-2);font-size:12px;font-weight:760;display:grid;place-items:center;flex:none}
.ncard .nsteps .ic{width:20px;height:20px;color:var(--brand-text);flex:none}
.ncard .nsmall{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.ncard .err{margin:0}
.ncard.compact{padding:10px 12px}
.ncard.compact .nhead b{font-size:14px;font-weight:650}
.ncard.compact .nhead .btn{margin-inline-start:auto;flex:none;min-height:40px}

/* 고른 예약 요약 한 줄(동그란 그림 + 굵은 줄 + 작은 줄) */
.sumline{display:flex;align-items:center;gap:12px;min-width:0}
.sumline .bub{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand-text);display:grid;place-items:center;flex:none}
.sumline .bub .ic{width:20px;height:20px}
.sumline>div{flex:1;min-width:0}
.sumline b{display:block;font-size:16px;font-weight:720;letter-spacing:-.01em}
.sumline span{display:block;font-size:14px;color:var(--muted);margin-top:1px}

/* 없는 주소·쉬는 홈페이지(views/notfound.html) — 가운데 그림 + 제목 + 한 줄 + 첫 화면 단추 */
.nf{min-height:calc(100dvh - 92px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-top:40px;padding-bottom:24px;text-align:center}
.nf-ic{width:64px;height:64px;border-radius:20px;background:var(--brand-soft);color:var(--brand-text);display:grid;place-items:center;margin-bottom:4px}
.nf-ic svg{width:28px;height:28px}
.nf h1{margin:0;font-size:22px;font-weight:760;letter-spacing:-.015em;line-height:1.35}
.nf p{margin:0 0 8px;max-width:30em;font-size:15px;color:var(--muted);line-height:1.6}
.nf:lang(ko) h1,.nf:lang(ko) p{word-break:keep-all}

.fine{font-size:13px;color:var(--muted);line-height:1.55}
/* 소식 받기(선택 · 처음 꺼짐, 2026-11-01) — 보내기 위 한 줄. 누르는 높이 44px */
.newsok{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;cursor:pointer}
.newsok input{flex:none;width:20px;height:20px;margin:0}
.newsoff{display:block;margin:14px auto 0;padding:12px 4px;background:none;border:0;font:inherit;font-size:13px;color:var(--muted);text-decoration:underline;cursor:pointer}
.newsoff-line{max-width:560px;margin:24px auto 0;padding:0 16px;text-align:center;font-size:14px;color:var(--muted)}
.newsoff-line span{display:block}
.newsoff-line .newsoff{margin-top:2px}
.fine a{color:inherit;font-weight:650;display:inline-block;padding:12px 2px;margin:-12px 0}  /* 글 줄은 그대로, 누르는 높이만 44px 가까이 */