/* 디자인 바탕(2026-10-15 방향 A 「따뜻한 동네 식당」) — 색·글자·간격·부품을 여기 한 곳에서. 화면별 파일은 자리 배치만.
   가게 색: <html data-brand="green|teal|navy|plum|red|terracotta|amber|charcoal"> 또는 새 색 조합 <html data-palette="lilac|mint|peach">(아래) — 손님 화면만 씀. 관리 화면의 누르는 단추는 --act(사장님 화면 = 아래 :root.own 라일락, 그 밖 = 짙은 초록).
   상태색은 가게 색과 따로 고정(코덱스 비평 2026-10-15): 답 기다림=호박 · 확정=파랑 · 부름=보라 · 앉음=초록 · 취소·안 옴=빨강. 색만으로 말하지 않고 늘 글자를 같이. */
:root{
  --bg:#FAF7F1; --surface:#FFFFFF; --surface-2:#F3EFE7; --ink:#202824; --muted:#59645E; --faint:#8B948F; --line:#E4DED3; --line-2:#D8DED8;
  --act:#1E5A4C; --act-ink:#FFFFFF; --act-soft:#E4EFEA; --act-press:#164639;
  --brand:#1E5A4C; --brand-ink:#FFFFFF;
  --st-pend:#805100; --st-pend-bg:#FFF1D6; --st-ok:#24568A; --st-ok-bg:#EAF2FA; --st-call:#7042A0; --st-call-bg:#F3EBFA;
  --st-seat:#176047; --st-seat-bg:#E5F3EB; --st-bad:#A52A24; --st-bad-bg:#FCECEA; --st-dim:#59645E; --st-dim-bg:#EFECE6;
  --focus:#C9821F; --scrim:rgba(20,24,22,.45); --shadow:0 1px 2px rgba(32,40,36,.06),0 8px 24px rgba(32,40,36,.08); --shadow-up:0 -8px 24px rgba(32,40,36,.10);
  --font:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",system-ui,sans-serif;
  --r-s:10px; --r:14px; --r-l:20px; --tap:48px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141816; --surface:#1C211F; --surface-2:#232926; --ink:#ECEFEA; --muted:#A8B0AB; --faint:#7D8681; --line:#2F3632; --line-2:#3A423D;
  --act:#3E9C82; --act-ink:#08140F; --act-soft:#1D332B; --act-press:#4FB194;
  --st-pend:#F2C26B; --st-pend-bg:#3A2C10; --st-ok:#8DB8EA; --st-ok-bg:#16263A; --st-call:#C9A6F0; --st-call-bg:#2C1F3D;
  --st-seat:#7FD1A8; --st-seat-bg:#16301F; --st-bad:#F19A92; --st-bad-bg:#3A1A18; --st-dim:#A8B0AB; --st-dim-bg:#262C29;
  --focus:#F2B544; --scrim:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); --shadow-up:0 -8px 24px rgba(0,0,0,.4);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141816; --surface:#1C211F; --surface-2:#232926; --ink:#ECEFEA; --muted:#A8B0AB; --faint:#7D8681; --line:#2F3632; --line-2:#3A423D;
  --act:#3E9C82; --act-ink:#08140F; --act-soft:#1D332B; --act-press:#4FB194;
  --st-pend:#F2C26B; --st-pend-bg:#3A2C10; --st-ok:#8DB8EA; --st-ok-bg:#16263A; --st-call:#C9A6F0; --st-call-bg:#2C1F3D;
  --st-seat:#7FD1A8; --st-seat-bg:#16301F; --st-bad:#F19A92; --st-bad-bg:#3A1A18; --st-dim:#A8B0AB; --st-dim-bg:#262C29;
  --focus:#F2B544; --scrim:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); --shadow-up:0 -8px 24px rgba(0,0,0,.4);
  color-scheme:dark}
/* 밝게 고정한 화면(모든 화면 <html data-theme="light"> — 마스터 10-25): 브라우저가 억지로 어둡게 칠하지 말라는 표시 */
:root[data-theme="light"]{color-scheme:only light}
/* 사장님 화면(관리 · 사장님 확인 링크 · 가입 · 시작 · 견적 작업 — <html class="own">) = 헬로버 첫 화면과 같은 차분한 보라 한 색(2026-11-06 마스터 「카드가 예전 디자인」 → 「추천대로 진행」).
   옛 짙은 초록·베이지를 걷음: 바탕 옅은 한 색 · 흰 상자 + 가는 선 · 누르는 곳·고른 것만 라일락 #5B5BD6(첫 화면 --g1). 상태색은 그대로(글자 함께) */
:root.own{--bg:#FAFAF8;--surface-2:#F6F5FA;--ink:#1F2130;--muted:#5F6272;--faint:#8E90A0;--line:#E6E4EE;--line-2:#DAD8E4;
  --act:#5B5BD6;--act-ink:#FFFFFF;--act-soft:#F1ECFF;--act-press:#4A4AC0}

/* 가게 색 8개(손님 화면). 노랑만 글자가 짙은 색 */
[data-brand="green"]{--brand:#1E5A4C;--brand-ink:#FFFFFF}
[data-brand="teal"]{--brand:#0F6670;--brand-ink:#FFFFFF}
[data-brand="navy"]{--brand:#23407A;--brand-ink:#FFFFFF}
[data-brand="plum"]{--brand:#6B3A6E;--brand-ink:#FFFFFF}
[data-brand="red"]{--brand:#B23A2A;--brand-ink:#FFFFFF}
[data-brand="terracotta"]{--brand:#A8502E;--brand-ink:#FFFFFF}
[data-brand="amber"]{--brand:#E2A532;--brand-ink:#202824}
[data-brand="charcoal"]{--brand:#2E3431;--brand-ink:#FFFFFF}
:root{--brand-soft:color-mix(in srgb,var(--brand) 12%,var(--surface));--brand-text:color-mix(in srgb,var(--brand) 82%,var(--ink))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--brand-text:color-mix(in srgb,var(--brand) 55%,#FFFFFF)}}
:root[data-theme="dark"]{--brand-text:color-mix(in srgb,var(--brand) 55%,#FFFFFF)}
/* 노랑은 밝은 바탕 글자로 흐림(대비 2.9) → 먹색을 더 섞어 갈색 글자(대비 약 6). 어두운 화면 규칙이 더 세서 그쪽은 그대로 */
[data-brand="amber"]{--brand-text:color-mix(in srgb,var(--brand) 45%,var(--ink))}
/* 옛 노랑 가게: 그라데이션 글자(.gtext · 줄서기 큰 숫자)는 흰 바탕에서 흐림(대비 약 2.2) → 위 갈색 글자색 하나로(2026-10-23) */
[data-brand="amber"] :is(.gtext,.wl-wait-n b,.wl-pos b){background:none!important;-webkit-text-fill-color:currentColor;color:var(--brand-text)}

/* 은은한 그라데이션 색 조합(2026-10-22 docs/DESIGN.md 「색 쓰는 법」): <html data-palette="lilac|mint|peach">. 옛 data-brand 8색 대신 붙는다(고르는 곳 한 곳 = ui.js brandOn · util.php brand_attr).
   g1→g2 = 누르는 곳 그라데이션(헬로버 자기 화면 — 첫 화면·설정 방법·꾸미기 도구) · s1·s2 = 옅은 칠 · p-sub·p-line = 계열 기운 보조 글자·테두리.
   손님 흐름·가게 홈페이지는 아래 「한 색」 규칙으로 g2 = g1(2026-11-05 정돈 — 번짐·유리·두 색 단추 걷음).
   흰 글자 대비(큰 굵은 글씨 기준 3 이상): 라일락 5.3·4.4 · 민트 4.2·4.0 · 피치 4.1·4.2. 옛 부품(.btn.brand·고른 칸)은 --brand = g1 로 그대로 돈다 */
[data-palette="lilac"]{--brand:#5B5BD6;--brand-ink:#FFFFFF;--g1:#5B5BD6;--g2:#A855C8;--s1:#F1ECFF;--s2:#FCEAF4;
  --p-sub:#5E5873;--p-line:rgba(91,91,214,.12)}
[data-palette="mint"]{--brand:#0E8A8A;--brand-ink:#FFFFFF;--g1:#0E8A8A;--g2:#3B82C4;--s1:#E5F7F1;--s2:#EAF1FF;
  --p-sub:#4F6366;--p-line:rgba(14,138,138,.13)}
[data-palette="peach"]{--brand:#D9487A;--brand-ink:#FFFFFF;--g1:#D9487A;--g2:#8B5CF6;--s1:#FFEFEA;--s2:#F3ECFF;
  --p-sub:#6A5560;--p-line:rgba(217,72,122,.12)}
/* 옛 8색 가게가 같은 부품을 쓸 때 = 가게 색 하나(글자색은 그 색의 글자색), 옅은 칠은 그 색의 맑은 파스텔(ma) */
[data-brand]{--g1:var(--brand);--g2:color-mix(in srgb,var(--brand) 78%,#FFFFFF);--g-ink:var(--brand-ink);
  --s1:color-mix(in srgb,var(--ma) 45%,#FFFFFF);--s2:color-mix(in srgb,var(--mb) 45%,#FFFFFF);
  --p-sub:color-mix(in srgb,var(--brand) 22%,#59645E);--p-line:color-mix(in srgb,var(--brand) 14%,transparent)}
/* 옛 8색의 맑은 파스텔 두 색(ma = 그 색 · mb = 이웃 색, s1·s2 재료) — 가게 색을 흰색에 섞기만 하면 회색빛이 돌아 손으로 고름(2026-10-23) */
[data-brand="green"]{--ma:#CDEFE2;--mb:#DCE8FF}
[data-brand="teal"]{--ma:#C8EDF0;--mb:#D9E3FF}
[data-brand="navy"]{--ma:#D5E1FF;--mb:#E6DCFF}
[data-brand="plum"]{--ma:#EED5F2;--mb:#FFD9E6}
[data-brand="red"]{--ma:#FFD8CF;--mb:#FFE5CB}
[data-brand="terracotta"]{--ma:#FFDBC8;--mb:#FFE8CE}
[data-brand="amber"]{--ma:#FFE6B3;--mb:#FFDACB}
[data-brand="charcoal"]{--ma:#DFE4EA;--mb:#E6E1F0}
/* 한 색(2026-11-05 마스터 「2로 하고 홈페이지도 같이」, 결정 2026-11-05-hellobour-guest-calm): 손님 흐름(.cust)·가게 홈페이지(body.pg)는 바탕 = 옅은 한 색, 누르는 곳·고른 칸·옅은 칠 = 가게 색 한 가지.
   html 의 [data-palette]·[data-brand] 값을 body 에서 덮음 · :where 라 홈페이지 틀(tpl.css body.pg — 자기 두 색)이 다시 덮음. 표지 사진이 없으면 가게 색의 옅은 한 색 */
/* overflow-anchor:none = 브라우저가 위 내용 높이가 바뀔 때 스크롤을 저절로 옮기지 않음. 지운 번짐 칸(.mesh, 페이지 전체 크기 절대 위치)이 그동안 기준점이 되어 이 보정을 막아 왔음 — 번역 뒤 다시 읽을 때 읽던 위치(page.js) 그대로 */
:where(.cust body,body.pg){overflow-anchor:none;--bg:#FAFAF8;--g2:var(--g1);--gs2:var(--gs1);--s2:var(--s1);--p-cover:color-mix(in srgb,var(--g1) 14%,#FFFFFF)}

/* ── 바탕 ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45;font-weight:450;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.02em;text-wrap:balance;font-weight:720}
p{margin:0}
a{color:var(--brand-text);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* ── 오른쪽→왼쪽 언어(<html dir="rtl">, i18n.js 가 붙임) ── 자리는 시작/끝 지정이라 저절로 뒤집힘. 여기는 그 밖 것만
   아랍 글자는 이어 쓰는 글자라 자간 0 · 전화·번호 칸은 왼→오 고정 · 날짜·시각 글은 그 글의 방향 · 앞뒤를 가리키는 화살표는 거울로 */
[dir=rtl] *{letter-spacing:0!important}
[dir=rtl] .num,[dir=rtl] .tm{unicode-bidi:plaintext}
/* 글 한 덩이의 방향은 그 글의 첫 글자로(영어로 채운 번역 중 화면 · 영어로 두는 취소 단추 · 손님이 쓴 메모가 문장부호까지 바르게) */
[dir=rtl] :is(p,li,dd,dt,h1,h2,h3,label,small,.bb p,.note>span,.reqline>span,.btn,.quick button){unicode-bidi:plaintext}
[dir=rtl] a[href^="tel:"]:not(.btn),[dir=rtl] input[type=tel],[dir=rtl] .ltr{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .ic.flip{transform:scaleX(-1)}
[data-fb]{text-align:start}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num,time{font-variant-numeric:tabular-nums}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;stroke-width:2}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 글자 단계 28 · 24 · 20 · 18 · 16 · 14 · 12 */
.t-xl{font-size:28px;font-weight:780;letter-spacing:-.03em;line-height:1.15}
.t-l{font-size:24px;font-weight:740;letter-spacing:-.025em;line-height:1.2}
.t-m{font-size:20px;font-weight:720;letter-spacing:-.02em}
.t-s{font-size:18px;font-weight:700;letter-spacing:-.015em}
.t-b{font-size:16px}
.t-sm{font-size:14px}
.t-xs{font-size:12px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.strong{font-weight:700}
.label{font-size:13px;font-weight:650;color:var(--muted);letter-spacing:.01em}

/* ── 단추 ──  기본=관리 짙은 초록, .brand=가게 색(손님 화면), .line=테두리, .ghost=글자만, .danger=빨강 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border-radius:var(--r-s);border:1px solid transparent;
  background:var(--act);color:var(--act-ink);font-size:16px;font-weight:700;text-decoration:none;text-align:center;transition:background .15s,transform .05s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--act-press)}
.btn.main{background:var(--act);color:var(--act-ink)}
.btn.brand{background:var(--brand);color:var(--brand-ink)}
.btn.brand:hover{background:color-mix(in srgb,var(--brand) 88%,#000)}
/* .grad = 색 조합 그라데이션 알약(손님 화면의 주된 단추 하나) */
.btn.grad{border:0;border-radius:999px;color:var(--g-ink,#FFFFFF);background:linear-gradient(110deg,var(--g1,var(--brand)),var(--g2,var(--brand)))}
.btn.grad:hover{background:linear-gradient(110deg,var(--g1,var(--brand)),var(--g2,var(--brand)));filter:brightness(1.06)}
.btn.line{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn.line:hover{background:var(--surface-2)}
.btn.soft{background:var(--act-soft);color:var(--act)}
.btn.soft:hover{background:color-mix(in srgb,var(--act-soft) 80%,var(--act))}
.btn.ghost{background:transparent;color:var(--ink);border-color:transparent;padding:0 10px}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:var(--surface);color:var(--st-bad);border-color:color-mix(in srgb,var(--st-bad) 35%,var(--line))}
.btn.danger.fill{background:var(--st-bad);color:#fff;border-color:var(--st-bad)}
/* 구글 로그인 단추 = 구글 안내 모양(흰 바탕·회색 테·네 색 G) */
.btn.google{background:#fff;color:#1f1f1f;border-color:#747775}
.btn.google:hover{background:#f2f2f2}
.btn .g-logo{width:20px;height:20px;flex:none}
/* 네이버 로그인 단추 = 네이버 녹색 바탕·흰 글씨·흰 N */
.btn.naver{background:#03C75A;color:#fff;border-color:#03C75A}
.btn.naver:hover{background:#02B350;border-color:#02B350}
.btn .n-logo{width:16px;height:16px;flex:none}
.btn.small{min-height:40px;padding:0 14px;font-size:14px}
.btn.big{min-height:56px;font-size:17px;border-radius:var(--r);padding:0 22px}
.btn.block{display:flex;width:100%}
.btn.icon{padding:0;width:var(--tap);min-width:var(--tap)}
.btn.icon.small{width:40px;min-width:40px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn .ic{width:20px;height:20px}
.linkbtn{background:none;border:0;padding:8px 4px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:40px}

/* ── 입력 ── */
.field{display:grid;gap:6px}
.field>label,.field .lbl{font-size:14px;font-weight:650;color:var(--ink)}
.opt-mark{font-weight:500;color:var(--faint);font-size:13px}
.in{width:100%;min-height:var(--tap);padding:11px 14px;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:16px;transition:border-color .15s,box-shadow .15s}
.in::placeholder{color:var(--faint)}
.in:focus{outline:none;border-color:var(--act);box-shadow:0 0 0 3px color-mix(in srgb,var(--act) 22%,transparent)}
:is([data-brand],[data-palette]) .in:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.in[aria-invalid="true"]{border-color:var(--st-bad)}
textarea.in{min-height:96px;resize:vertical;line-height:1.45}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:36px}
[dir=rtl] select.in{background-position:15px 50%,20px 50%}  /* 끝 쪽(왼쪽)에 같은 「v」: 두 조각 순서는 그대로, 가장자리에서 15–25px */
.hint{font-size:13px;color:var(--muted);line-height:1.45}
.err{font-size:14px;color:var(--st-bad);font-weight:600;display:flex;gap:6px;align-items:flex-start}
.hp{position:absolute;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none}

/* ── 고르기: 칩 · 나눔 단추 · 인원 ± ── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--act-soft);border-color:var(--act);color:var(--act)}
:is([data-brand],[data-palette]) .chip[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-text)}
.seg{display:flex;background:var(--surface-2);border-radius:var(--r-s);padding:3px;gap:3px}
.seg button{flex:1;min-height:40px;border:0;border-radius:8px;background:transparent;font-size:14px;font-weight:650;color:var(--muted);padding:0 10px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 8px 8px 16px}
.stepper .ctl{display:flex;align-items:center;gap:4px}
.stepper button{width:44px;height:44px;border-radius:12px;border:0;background:var(--act-soft);color:var(--act);display:grid;place-items:center}
:is([data-brand],[data-palette]) .stepper button{background:var(--brand-soft);color:var(--brand-text)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper output,.stepper .val{min-width:44px;text-align:center;font-size:20px;font-weight:740;font-variant-numeric:tabular-nums}

/* 날짜 띠 · 시간 칩 (손님·관리 공용) */
.daystrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px;margin:-2px;scroll-snap-type:x proximity}
.daystrip::-webkit-scrollbar{display:none}
.daystrip button{flex:none;min-width:60px;min-height:72px;padding:8px 6px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);display:grid;justify-items:center;gap:0;scroll-snap-align:start;font-variant-numeric:tabular-nums}
.daystrip small{font-size:11px;font-weight:650;color:var(--muted)}
.daystrip strong{font-size:20px;font-weight:740;letter-spacing:-.02em;line-height:1.3}
.daystrip button[aria-pressed="true"]{background:var(--act);border-color:var(--act);color:var(--act-ink)}
:is([data-brand],[data-palette]) .daystrip button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.daystrip button[aria-pressed="true"] small{color:inherit;opacity:.82}
.daystrip button:disabled{opacity:.42;cursor:not-allowed}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.slots button{position:relative;min-height:46px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--surface);font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.slots button[aria-pressed="true"]{background:var(--act);border-color:var(--act);color:var(--act-ink)}
:is([data-brand],[data-palette]) .slots button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.slots button:disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.slots .few{display:block;font-size:12px;font-weight:650;color:var(--st-pend);font-style:normal;line-height:1.2;margin-top:2px}

/* ── 상태 표 ── 늘 글자와 함께 */
.st{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;border-radius:999px;padding:3px 10px;line-height:1.3}
.st .ic{width:15px;height:15px}
.st.pend{background:var(--st-pend-bg);color:var(--st-pend)}
.st.ok{background:var(--st-ok-bg);color:var(--st-ok)}
.st.call{background:var(--st-call-bg);color:var(--st-call)}
.st.seat{background:var(--st-seat-bg);color:var(--st-seat)}
.st.bad{background:var(--st-bad-bg);color:var(--st-bad)}
.st.dim{background:var(--st-dim-bg);color:var(--st-dim)}
/* 요청 칩(생일·아기 의자 …) — 상태와 헷갈리지 않게 네모·테두리 */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:650;border-radius:6px;padding:2px 7px;border:1px solid var(--line-2);color:var(--muted);background:var(--surface);white-space:nowrap}
.tag .ic{width:13px;height:13px}

/* ── 안내 상자 ── */
.note{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);background:var(--surface-2);border-radius:var(--r);padding:12px 14px;line-height:1.5}
.note .ic{color:var(--muted);margin-top:2px}
.note.warn{background:var(--st-pend-bg);color:var(--st-pend)}
.note.warn .ic{color:var(--st-pend)}
.note.bad{background:var(--st-bad-bg);color:var(--st-bad)}
.note.bad .ic{color:var(--st-bad)}
.note.ok{background:var(--st-seat-bg);color:var(--st-seat)}
.note.ok .ic{color:var(--st-seat)}

/* ── 카드(고른 손님·답할 요청에만) · 줄 목록(나머지 전부) ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card.raised{border-color:transparent;box-shadow:var(--shadow)}
.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.rowi{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;min-height:62px;padding:10px 14px;width:100%;text-align:start;background:none;border:0;color:inherit}
.rows>.rowi+.rowi,.rows>*+.rowi{border-top:1px solid var(--line)}
button.rowi:hover{background:var(--surface-2)}
.rowi[aria-current="true"],.rowi[aria-selected="true"]{background:var(--act-soft)}
.rowi .when{font-size:16px;font-weight:740;font-variant-numeric:tabular-nums;min-width:48px}
.rowi .who{min-width:0}
.rowi .who b{display:block;font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowi .who span{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);margin-top:2px}
.empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:15px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 8px}
.sec-h h2,.sec-h h3{font-size:18px}
.sec-h span{font-size:13px;color:var(--muted)}

/* ── 아래에서 올라오는 판(휴대폰) / 가운데 창(넓은 화면) ──  <div class="sheet" role="dialog" aria-modal="true"> */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:55;animation:fadein .15s ease-out}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:56;max-height:min(92dvh,760px);overflow:auto;background:var(--surface);border-radius:var(--r-l) var(--r-l) 0 0;box-shadow:var(--shadow-up);
  padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px));animation:sheetup .22s cubic-bezier(.2,.8,.2,1)}
.sheet::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:4px auto 12px}
.sheet-h{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.sheet-h h2{font-size:20px;flex:1}
@media (min-width:720px){.sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(560px,calc(100vw - 48px));transform:translate(-50%,-50%);border-radius:var(--r-l);padding:20px 24px 24px;animation:popin .18s ease-out}.sheet::before{display:none}}
@keyframes fadein{from{opacity:0}}
@keyframes sheetup{from{transform:translateY(24px);opacity:.6}}
@keyframes popin{from{opacity:0;transform:translate(-50%,-48%)}}
/* 상태 팝업(UI.statusPop) — 판 위에 큰 상태 그림 칸(상태색) · 제목 28 · 시각 30 · 큰 단추. 색만으로 말하지 않고 늘 제목 글자와 같이 */
.sheet.pop .sheet-h{display:grid;grid-template-columns:1fr auto;align-items:start;gap:14px 8px;margin-bottom:8px}
.sheet.pop .sheet-h h2{grid-column:1/-1;grid-row:2;font-size:28px;font-weight:780;letter-spacing:-.03em;line-height:1.18}
.sheet.pop .sheet-h h2:focus{outline:none}
.pop-tile{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--st-dim-bg);color:var(--st-dim)}
.pop-tile .ic{width:34px;height:34px;stroke-width:2.2}
.pop.ok .pop-tile{background:var(--st-ok-bg);color:var(--st-ok)}
.pop.pend .pop-tile{background:var(--st-pend-bg);color:var(--st-pend)}
.pop.call .pop-tile{background:var(--st-call-bg);color:var(--st-call)}
.pop.seat .pop-tile{background:var(--st-seat-bg);color:var(--st-seat)}
.pop.bad .pop-tile{background:var(--st-bad-bg);color:var(--st-bad)}
.pop-b{display:grid;gap:6px}
.pop-when{font-size:30px;font-weight:780;letter-spacing:-.03em;line-height:1.2;font-variant-numeric:tabular-nums}
.pop.ok .pop-when{color:var(--st-ok)}
.pop-was{font-size:16px;color:var(--muted)}
.pop-was s{text-decoration-thickness:1.5px}
.pop-line{font-size:16px;line-height:1.45;color:var(--muted)}
.pop-b .err{margin-top:6px}
.pop-acts{display:grid;gap:10px;margin-top:18px}
.pop-acts .btn{white-space:normal;line-height:1.25}
.pop-acts .pop-cal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pop-acts .pop-cal .btn{min-height:56px;padding:8px 12px;font-size:16px}
/* 고르는 큰 단추 묶음(「+ 손님 추가」의 세 갈래 등) */
.choices{display:grid;gap:10px}
.choice{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;min-height:68px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface);text-align:start}
.choice:hover{background:var(--surface-2)}
.choice>.ic,.choice .bubble{width:44px;height:44px;border-radius:12px;background:var(--act-soft);color:var(--act);display:grid;place-items:center}
.choice b{display:block;font-size:16px}
.choice span{font-size:13px;color:var(--muted)}

/* ── 알림 띠(되돌리기 포함) ── */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);
  background:#202824;color:#F4F1EA;border-radius:12px;padding:10px 10px 10px 16px;font-size:15px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:popup .2s ease-out}
.toast button{background:none;border:0;color:#9FE0C6;font-weight:760;min-height:36px;padding:0 10px;border-radius:8px}
.toast button:hover{background:rgba(255,255,255,.08)}
@keyframes popup{from{opacity:0;transform:translate(-50%,8px)}}
/* 견본 가게 띠(2026-10-24 shops.demo — 손님 화면 맨 위 한 줄, ui.js UI.demoBand). 홈페이지는 같은 모양 .pg-pvmark(page.css) */
.demoband{position:sticky;top:0;z-index:30;margin:0;padding:7px 12px;font-size:12.5px;font-weight:600;line-height:1.35;text-align:center;color:var(--g-ink,#FFFFFF);background:linear-gradient(110deg,var(--g1,var(--brand)),var(--g2,var(--brand)))}
/* 견본 가게에서 보내기를 눌렀을 때(ui.js UI.demoSent) = 오류 아닌 차분한 안내(옅은 그라데이션 칠, 손님 화면 안내 .ws-note 와 같은 결) + 헬로버 첫 화면 단추 */
.demosent{margin:12px 0 0;padding:12px 14px;border-radius:var(--r);background:linear-gradient(120deg,var(--s1,var(--surface-2)),var(--s2,var(--surface-2)));color:var(--ink);font-size:14.5px;line-height:1.6;text-align:start}
.demosent p{margin:0 0 10px}

/* ── 사장님 화면 틀: 휴대폰 아래 탭 · 태블릿 왼쪽 막대 ── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
.tabbar button,.tabbar a{position:relative;display:grid;justify-items:center;gap:2px;min-height:52px;padding-top:4px;border:0;background:none;color:var(--muted);font-size:11px;font-weight:700;text-decoration:none;border-radius:10px}
.tabbar .ic{width:24px;height:24px}
.tabbar span:not(.badge){margin-inline:-5px;text-align:center;line-height:1.15;word-break:keep-all;overflow-wrap:anywhere}  /* 긴 이름(「내 홈페이지」)은 낱말 단위로 두 줄 */
.tabbar [aria-current="page"],.tabbar [aria-selected="true"]{color:var(--act)}
.badge{position:absolute;top:2px;inset-inline-start:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--st-bad);color:#fff;font-size:11px;font-weight:760;display:grid;place-items:center;line-height:1}
.rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0;background:var(--surface);border-inline-end:1px solid var(--line)}
.rail button,.rail a{position:relative;width:64px;min-height:60px;border-radius:14px;display:grid;justify-items:center;align-content:center;gap:3px;border:0;background:none;color:var(--muted);font-size:11px;font-weight:700;text-decoration:none}
.rail .ic{width:24px;height:24px}
.rail [aria-current="page"],.rail [aria-selected="true"]{background:var(--act-soft);color:var(--act)}
.logo-mark{width:44px;height:44px;border-radius:12px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:-.03em;overflow:hidden;flex:none}
.logo-mark img{width:100%;height:100%;object-fit:cover}

/* 살아 있음 점(줄서기·카운터 연결) */
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--st-seat)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent)}
.live.off{color:var(--st-bad)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{padding:40px 16px;text-align:center;color:var(--muted);display:flex;gap:10px;justify-content:center;align-items:center}

/* ── 말풍선 대화(손님 예약·줄서기·카운터 공용) ──
   <div class="thread">
     <div class="bubble shop"><span class="logo-mark av">..</span><div class="bb"><span class="st ok">Confirmed</span><p>글</p><span class="tm">7:02 pm</span></div></div>
     <div class="bubble me"><div class="bb"><p>글</p><span class="tm">7:05 pm</span></div></div>
     <div class="bubble sys"><p>글</p><span class="tm">..</span></div>
     <div class="bubble sys wait"><p><span class="st pend">기다림</span><span>답 기한</span></p></div>
   </div>
   오래된 말은 맨 위 <button class="thread-more"> 뒤로 접힘(thread.js keep 옵션).
   카운터 쪽에서 볼 때 = .thread.staff(손님 왼쪽·가게 오른쪽, 로고 없음 — thread.js staff 옵션이 붙임).
   새로 붙은 말 = .bubble.new(살짝 올라옴 — 움직임 줄이기 설정이면 바탕 규칙이 끔). 상태색은 말풍선 안 작은 .st 꼬리표로만.
   관리 화면에 같은 이름의 아이콘 상자(admin.css .bubble)가 있어 늘 .thread 안에서만 꾸미고 크기·배치를 되돌림 */
.thread{display:flex;flex-direction:column;gap:10px}
.thread .bubble{display:flex;align-items:flex-end;gap:8px;width:auto;height:auto;place-items:normal;flex:none;background:none;border-radius:0;color:var(--ink);max-width:100%}
.thread .bubble .av{width:28px;height:28px;border-radius:50%;font-size:11px;margin-bottom:2px}
.thread .bubble .bb{max-width:min(82%,400px);padding:10px 13px;border-radius:18px;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.thread .bubble .bb p{margin:0}
.thread .bubble .bb .st{margin:0 0 5px}
.thread .bubble .bb small{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.thread .bubble .tm{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.thread .bubble.shop .bb{background:var(--surface-2);border-end-start-radius:6px}
.thread .bubble.me{justify-content:flex-end}
.thread .bubble.me .bb{background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);border-end-end-radius:6px}
.thread .bubble.me .tm{text-align:end}
.thread .bubble.sys{display:block;text-align:center;font-size:13px;color:var(--muted);padding:2px 12px}
.thread .bubble.sys p{margin:0;display:inline}
.thread .bubble.sys .tm{display:inline-block;margin-inline-start:6px;white-space:nowrap}
.thread .bubble.new{animation:bubin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes bubin{from{opacity:0;transform:translateY(10px)}}
.thread .bubble[hidden]{display:none}
/* 답 기다리는 중 = 가운데 안내 줄(꼬리표 + 답 기한) */
.thread .bubble.sys.wait{padding:4px 0}
.thread .bubble.sys.wait p{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;font-size:16px;font-weight:600}
/* 「이전 기록 보기」 */
.thread .thread-more{align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--muted);font-size:14px;font-weight:650}
.thread .thread-more .ic{width:16px;height:16px}
.thread .thread-more:hover{background:var(--surface-2)}

/* 답 단추: 두 칸씩 줄(48px 이상, 좁은 화면에서도 잘리지 않게 글이 줄바꿈). 홀수면 마지막 하나는 한 줄 다. .bad = 취소처럼 빨강 */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:var(--tap);padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:15px;font-weight:650;line-height:1.25;text-align:center}
.quick button:last-child:nth-child(odd){grid-column:1/-1}
.quick button .ic{width:18px;height:18px}
.quick button:hover{background:var(--surface-2)}
:is([data-brand],[data-palette]) .quick button{border-color:color-mix(in srgb,var(--brand) 35%,var(--line-2));color:var(--brand-text)}
:is([data-brand],[data-palette]) .quick button:hover{background:var(--brand-soft)}
.quick button.bad,:is([data-brand],[data-palette]) .quick button.bad{border-color:color-mix(in srgb,var(--st-bad) 35%,var(--line));color:var(--st-bad)}
.quick button:disabled{opacity:.55}

/* ── 손님 화면 부품 ── .glass = 흰 카드 + 가는 선(2026-11-05 정돈: 반투명 유리·흐림·그림자·바탕 번짐·입자 걷음 — 이름은 그대로 둬 쓰는 곳 HTML 안 바뀜) · .gtext = 색 글자 */
.glass{background:var(--surface,#FFFFFF);border:1px solid var(--pl,var(--line))}
.gtext{background:linear-gradient(120deg,var(--g1,var(--brand)),var(--g2,var(--brand)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 손님 흐름 옷(2026-10-23 계획 5 → 2026-11-05 정돈 — 예약·시간 예약·견적·줄서기·내 예약이 홈페이지와 같은 모양) ── <html class="cust"> + 위 색 조합 토큰
   바탕 = 옅은 한 색(--bg) · 카드 = 흰 바탕 + 가는 선(그림자 없음) · 주된 단추 = 가게 색 알약 · 고른 칸(날짜·시간 = 가게 색 칠 · 칩·목록 = 옅은 칠 + 가게 색 테두리)
   보조 글자·테두리 = 그 조합 기운(--p-sub·--p-line). 상태색(.st·.note.warn·.reqline·불림 화면)은 그대로 — 색만으로 말하지 않음. 손님 화면은 늘 밝게(data-theme="light") */
.cust{--gs1:color-mix(in srgb,var(--g1,var(--brand)) 85%,#000000);--gs2:color-mix(in srgb,var(--g2,var(--brand)) 85%,#000000);--muted:var(--p-sub,#59645E);--line:var(--p-line,#E4DED3);--line-2:color-mix(in srgb,var(--g1,var(--brand)) 16%,#D5D8E0);
  --surface-2:color-mix(in srgb,var(--s1,#F3EFE7) 75%,#FFFFFF);--brand-soft:var(--s1,color-mix(in srgb,var(--brand) 12%,#FFFFFF));--r-s:14px;--r:18px;--r-l:24px}
.cust body{position:relative;min-height:100vh;min-height:100dvh;overflow-x:clip;background:var(--bg);letter-spacing:-.02em}
.cust :lang(ko){word-break:keep-all}
/* 카드 = 흰 바탕 + 가는 선 */
.cust :is(.card,.ncard:not(.plain)){background:var(--surface);border:1px solid var(--line);box-shadow:none}
.cust .note:not(.warn):not(.bad):not(.ok){background:linear-gradient(120deg,var(--s1,var(--surface-2)),var(--s2,var(--surface-2)));color:var(--ink)}
.cust .note:not(.warn):not(.bad):not(.ok) .ic{color:var(--brand-text)}
/* 단추: 꾸밈 없는 .btn · .brand = 가게 색 알약(화면의 주된 단추 하나) · .line = 흰 알약 */
.cust .btn{border-radius:999px}
.cust .btn:not(.line):not(.ghost):not(.danger):not(.soft):not(.google):not(.naver),.cust .btn:not(.line):not(.ghost):not(.danger):not(.soft):not(.google):not(.naver):hover{border:0;color:var(--g-ink,#FFFFFF);background:linear-gradient(110deg,var(--g1,var(--brand)),var(--g2,var(--brand)))}
.cust .btn:not(.line):not(.ghost):not(.danger):not(.soft):not(.google):not(.naver):hover{filter:brightness(1.06)}
/* 읽힘(코덱스 2026-10-23): 흰 글자가 큰 굵은 글씨(18.66px↑)가 아니면 색을 15% 진하게(--gs1·--gs2, 대비 4.5↑) · 큰 단추는 글자를 19px 로 */
.cust .btn:not(.big):not(.line):not(.ghost):not(.danger):not(.soft):not(.google):not(.naver),.cust .btn:not(.big):not(.line):not(.ghost):not(.danger):not(.soft):not(.google):not(.naver):hover{background:linear-gradient(110deg,var(--gs1),var(--gs2))}
.cust .btn.big{font-size:19px}
/* 아직 못 누르는 주된 단추 = 옅은 가게 색(반투명 아님 — 아래 붙는 막대에서 뒤 글자가 비치지 않게) */
.cust .btn.btn:not(.line):not(.ghost):not(.danger):not(.soft):not(.google):not(.naver)[disabled]{opacity:1;filter:none;box-shadow:none;background:linear-gradient(110deg,color-mix(in srgb,var(--g1,var(--brand)) 42%,#FFFFFF),color-mix(in srgb,var(--g2,var(--brand)) 42%,#FFFFFF))}
.cust .btn.line{background:color-mix(in srgb,var(--surface) 78%,transparent);border-color:var(--line-2);color:var(--ink)}
.cust .btn.line:hover{background:var(--surface)}
.cust .btn[disabled],.cust .btn[aria-disabled="true"]{opacity:.45;filter:saturate(.6)}
/* 입력 */
.cust .in{background-color:var(--surface);border-color:var(--line-2)}
.cust .in:focus{border-color:var(--g1,var(--brand));box-shadow:0 0 0 3px color-mix(in srgb,var(--g1,var(--brand)) 20%,transparent)}
.cust .in[aria-invalid="true"]{border-color:var(--st-bad)}
.cust input[type=checkbox]{accent-color:var(--g1,var(--brand))}
/* 고르기: 날짜·시간 = 가게 색 칠 · 칩·목록 = 옅은 칠 + 가게 색 테두리 */
.cust :is(.daystrip,.slots) button{background:var(--surface);border-color:var(--line)}
.cust :is(.daystrip,.slots) button[aria-pressed="true"]{border-color:transparent;color:var(--g-ink,#FFFFFF);font-weight:800;background:linear-gradient(150deg,var(--gs1),var(--gs2))}
/* 색만으로 말하지 않음: 고른 날짜·시간 = 귀퉁이 체크 · 고른 칩 = 앞에 체크(이미 체크 그림이 있는 칩은 그대로) */
.cust .daystrip button{position:relative}
.cust :is(.daystrip,.slots) button[aria-pressed="true"]::after{content:"";position:absolute;top:7px;inset-inline-end:8px;width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cust .chip{min-height:48px}
.cust .chip[aria-pressed="true"]{font-weight:750}
.cust .chip[aria-pressed="true"]:not(:has(.on))::before{content:"";flex:none;width:5px;height:10px;margin:-3px 3px 0 1px;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cust .daystrip button[aria-pressed="true"] small{color:inherit;opacity:.88}
.cust .slots button:disabled{background:transparent;box-shadow:none}
.cust .chip{background:var(--surface);border-color:var(--line-2)}
.cust .chip[aria-pressed="true"],.cust .pick[aria-pressed="true"]{border-color:transparent;color:var(--ink);
  background:linear-gradient(120deg,var(--s1,var(--brand-soft)),var(--s2,var(--brand-soft))) padding-box,linear-gradient(120deg,var(--g1,var(--brand)),var(--g2,var(--brand))) border-box}
.cust .seg{background:color-mix(in srgb,var(--s1,var(--surface-2)) 80%,var(--surface))}
.cust .seg button[aria-pressed="true"]{color:var(--brand-text);box-shadow:0 0 0 1px var(--line)}
.cust .stepper{background:var(--surface);border-color:var(--line);box-shadow:none}
.cust .stepper button{background:linear-gradient(135deg,var(--s1,var(--brand-soft)),var(--s2,var(--brand-soft)))}
/* 고르는 줄 목록(서비스·시술): <div class="picks"><button class="pick" aria-pressed><span class="rd"></span><span class="nm">이름<small>60분</small></span><em>$45</em></button> */
.picks{display:grid;gap:10px}
.pick{display:flex;align-items:center;gap:13px;width:100%;min-height:60px;padding:12px 16px;border-radius:20px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-align:start}
.pick .nm{flex:1;min-width:0;font-size:16.5px;font-weight:700;overflow-wrap:anywhere}
.pick .nm small{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:2px}
.pick em{flex:none;max-width:40%;font-style:normal;font-size:15px;font-weight:700;text-align:end;overflow-wrap:anywhere}
.pick .rd{position:relative;flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface)}
.pick[aria-pressed="true"] .rd{border:0;background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--brand)))}
.pick[aria-pressed="true"] .rd::after{content:"";position:absolute;inset-inline-start:8.5px;top:5px;width:6px;height:11px;border:solid var(--g-ink,#FFFFFF);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.pick[aria-pressed="false"]:hover{border-color:var(--line-2)}
/* 가게 얼굴 머리(시간 예약·견적·예약·줄서기): 표지(사진 없으면 가게 색의 옅은 한 색) + 걸쳐 앉은 로고 + 이름 + 한 줄 소개 */
.face-cv{position:relative;height:136px;border-radius:28px;background:var(--p-cover,var(--brand-soft));overflow:hidden}
.face-cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face-av{position:relative;z-index:1;display:block;width:fit-content;margin-top:-38px;margin-inline:16px 0}
.face-av .logo-mark{width:76px;height:76px;border-radius:24px;font-size:26px;border:3px solid #FFFFFF;box-shadow:0 0 0 1px var(--line)}
.face-nm{margin-top:12px;font-size:27px;font-weight:800;letter-spacing:-.045em;line-height:1.2;overflow-wrap:anywhere}
.face-bl{margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.55;overflow-wrap:anywhere}
.cust .logo-mark:not(:has(img)){background:linear-gradient(135deg,var(--s1,#FFFFFF),var(--s2,#FFFFFF));color:var(--brand-text);box-shadow:inset 0 0 0 1px var(--line)}
.cust .face-av .logo-mark:not(:has(img)){background:var(--surface)}
.cust .langbtn{background:var(--surface);border:1px solid var(--line);box-shadow:none;color:var(--ink)}
/* 보낸 뒤 「보냈어요」 표시: 큰 가게 색 동그라미 + 흰 체크(뜻은 옆 제목·「아직 확정 아님」 글자가 말함) */
.donemark{position:relative;display:block;flex:none;width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--brand)))}
.donemark::after{content:"";position:absolute;left:33px;top:19px;width:19px;height:36px;border:solid var(--g-ink,#FFFFFF);border-width:0 6px 6px 0;border-radius:2px;transform:rotate(45deg)}
/* 새 요청·견적·헬로버 답 알림 띠(admin-alert.js 공용 조각 — 관리 화면·견적/지원 화면). 관리 화면 왼쪽 막대 자리 = admin.css */
.nr-pop{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));inset-inline:10px;z-index:58;display:flex;align-items:center;gap:12px;max-width:600px;margin-inline:auto;
  padding-block:10px;padding-inline:14px 8px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-inline-start:6px solid var(--st-pend);border-radius:var(--r);
  box-shadow:var(--shadow),0 12px 32px rgba(0,0,0,.16);animation:nrdown .28s cubic-bezier(.2,.8,.2,1)}
.nr-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--st-pend-bg);color:var(--st-pend)}
.nr-ic .ic{width:24px;height:24px}
.nr-t{flex:1;display:grid;gap:2px;min-width:0;margin:0}
.nr-t b{font-size:15px;font-weight:760;color:var(--st-pend)}
.nr-t span{font-size:19px;font-weight:780;letter-spacing:-.015em;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.nr-go{flex:none;padding:0 20px}
.nr-x{flex:none}
/* 휴대폰: 글 줄을 넓게 — 「보기」는 아래 한 줄 가득 */
@media (max-width:599px){.nr-pop{flex-wrap:wrap;gap:8px 10px;padding-block:10px 12px}.nr-x{order:3}.nr-go{order:4;flex:1 0 100%}}
@keyframes nrdown{from{transform:translateY(calc(-100% - 20px));opacity:.4}}

/* 이 기기에서 보낸 요청(ui.js sentKeep, 점검 C1) — 손님 예약 화면 맨 위 한 줄, 누르면 내 예약 */
.sentline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding:12px 14px;border-radius:var(--r-s);background:var(--st-ok-bg);color:var(--ink);font-size:14px;font-weight:650;text-decoration:none}
.sentline b{color:var(--st-ok);white-space:nowrap}
.sentline b::after{content:" ›"}

/* 예상 가격대(2026-10-30) — 손님 견적 칸 · 견적 진행 화면 · 사장님 견적 상세가 같은 모양 */
.est-box{margin-top:10px;padding:12px 14px;border-radius:var(--r-s,12px);background:var(--surface-2);border-inline-start:3px solid var(--brand)}
.est-box .hint{margin-top:6px}
.est-range{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:14px;font-weight:600;color:var(--muted)}
.est-range b{font-size:20px;font-weight:780;letter-spacing:-.02em;color:var(--ink)}
.est-tax{font-size:13px;font-weight:600}