/* 기업 마이페이지 전용 판.
 *
 * **`app.css` 에 안 넣는다** — 이 저장소는 세션이 여럿 붙어 같은 `app.css` 를 동시에
 * 고치고, 실제로 한 시간 안에 규칙이 두 번 되감긴 적이 있다(`my.css` 가 같은 이유로 산다).
 *
 * 색 토큰은 `app.css` 것을 그대로 쓴다(--bg·--card·--ink·--y·--biz…).
 * 여기서 색값을 다시 적으면 어두운 판으로 바뀌는 날 이 화면만 옛 색으로 남는다.
 *
 * 넓이 규칙은 하나다 — **좁으면 한 줄로 쌓이고 900px 부터 두 기둥**(`my.css` 와 같다).
 */

body.bizpg {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.6 Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  /* 폰을 가로로 돌렸을 때 브라우저가 글씨를 제멋대로 키우는 것을 막는다.
     두 줄을 다 적는다 — 사파리는 아직 접두어 붙은 이름만 안다. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── 머리 ── */

.bizhead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.bizhead .bback {
  display: grid;
  place-items: center;
  /* 44px — 폰에서 손가락으로 겨눌 수 있는 가장 작은 자리다. */
  width: 40px; height: 40px;
  margin-left: -8px;
  border-radius: 12px;
  color: var(--ink);
}
.bizhead .bback svg { width: 22px; height: 22px; }
/* ⚠ **이 화면의 이름은 `b` 로 시작한다.** 이 판은 `app.css` 위에 얹히는데, 거기에는
   조상 조건 없이 서는 규칙이 여덟 있다 — `.row`·`.cond`·`.kv`·`.warn`·`.danger`·
   `.vrow`·`.cav`·`.back`. 그중 하나라도 같은 이름을 쓰면 **내가 안 적은 성질까지
   딸려 온다.** 실제로 `.vrow` 가 `display:flex` 를 물고 와 홍보영상 칸을 뭉갰고,
   `.me`(지도의 「내 위치」 핀)가 채팅 말풍선을 19px 세로 막대로 만들었다.
   둘 다 **오류가 한 줄도 안 나서** 화면을 봐야만 보였다.
   `.cond`·`.kv`·`.warn`·`.danger` 넷은 **일부러 물려받는다** — 같은 뜻의 부품이고,
   이 판이 뒤에 실려서 내가 적은 값이 이긴다. 새 이름을 지을 때는
   `node _tools/css-name-clash.mjs` 로 먼저 확인한다. */
.bizhead h1 { flex: 1; margin: 0; font-size: 17px; letter-spacing: -0.6px; }
.bizhead h1 span { color: var(--sub); font-weight: 600; }
.bizhead .no { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }

.bizbody { padding: 14px; max-width: 1120px; margin: 0 auto; }
.bizloading { color: var(--sub); text-align: center; padding: 40px 0; }

/* ── 탭 ── */

.btabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 10px;
  /* 폰에서 여섯 칸이 한 화면에 안 들어간다. 가로로 굴리되 **끝이 잘려 보이게** 둔다 —
     딱 맞게 줄이면 더 있다는 것을 아무도 모른다. */
}
.btabs::-webkit-scrollbar { display: none; }
.btabs button {
  position: relative;
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--sub);
  font: 700 13.5px/1 Pretendard, sans-serif;
  letter-spacing: -0.3px;
  cursor: pointer;
}
.btabs button[aria-selected="true"] {
  background: var(--night);
  border-color: var(--night);
  color: #fff;
}
.btabs .dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: 2px;
}
.btabs .badge {
  display: inline-block;
  min-width: 17px;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: 800 10.5px/1.5 Pretendard, sans-serif;
  font-style: normal;
  vertical-align: 1px;
}

/* ── 판 ── */

.bpanes { display: grid; gap: 14px; }
@media (min-width: 900px) {
  /* 카드가 여러 장인 탭은 두 기둥으로 눕는다. 지도·캐릭터·채팅처럼 넓이가
     필요한 카드는 `full` 로 한 줄을 다 쓴다. */
  .bpanes { grid-template-columns: 1fr 1fr; align-items: start; }
  .bpanes > .bstat, .bpanes > .bchat, .bpanes > .bgate { grid-column: 1 / -1; }
}

.bcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.bcard h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.6px; }
.bcard h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  letter-spacing: -0.4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.bcard h3 .cnt { font-size: 12px; color: var(--sub); font-weight: 600; }
.bcard h3 .need {
  font: 700 11px/1.6 Pretendard, sans-serif;
  font-style: normal;
  color: var(--danger-ink);
  background: var(--danger-bg);
  border-radius: 5px;
  padding: 1px 6px;
}
.bcard .lead { margin: 0 0 12px; color: var(--night-sub); font-size: 13px; line-height: 1.7; }
.bcard .lead b { color: var(--ink); }
.cond { font-size: 12px; color: var(--sub); line-height: 1.65; margin: 6px 0 0; }
.cond b { color: var(--night-body); }
.err { margin: 8px 0 0; font-size: 12.5px; color: var(--danger-ink); line-height: 1.6; }
.err:empty { display: none; }

.kv {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.kv:last-of-type { border-bottom: 0; }
.kv span { color: var(--sub); }

.warn {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--warn-line);
  border-radius: 12px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 12.5px;
  line-height: 1.7;
}
.warn b { display: block; margin-bottom: 3px; font-size: 13px; }
.warn p { margin: 0; }
.warn.danger {
  border-color: var(--danger-line);
  background: var(--danger-bg);
  color: var(--danger-sub);
}

/* ── 입력칸 ── */

.bfld { display: block; margin-top: 12px; }
.bfld > span {
  display: block; margin-bottom: 5px;
  font-size: 12px; color: var(--sub);
}
.bfld > span i {
  font-style: normal; font-size: 10.5px; font-weight: 800;
  color: var(--danger-ink); margin-left: 4px;
}
.bfld > span i.opt { color: var(--sub); font-weight: 600; }
.bfld input, .bfld select, .bfld textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--soft);
  color: var(--ink);
  /* **16px 이어야 한다** — 그보다 작으면 iOS 사파리가 칸을 누를 때 화면을 확대한다.
     확대된 뒤에는 손으로 되돌리기 전까지 페이지 전체가 커진 채로 남는다. */
  font: 400 16px/1.5 Pretendard, sans-serif;
}
.bfld textarea { resize: vertical; min-height: 92px; }
.bfld input:focus, .bfld select:focus, .bfld textarea:focus {
  outline: none; border-color: var(--y); background: var(--card);
}
.brow { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.brow > .bfld { flex: 1 1 130px; margin-top: 12px; }

.bcheckbox {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 12px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 11px;
  font-size: 13px; line-height: 1.6; cursor: pointer;
}
.bcheckbox input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--y); margin: 0; }
.bcheckbox.big { background: var(--soft); }

.bagree { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.bagree .agr {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; font-size: 13px; line-height: 1.6; cursor: pointer;
}
.bagree .agr input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--y); margin: 0; }
.bagree .agr a { color: var(--sub); text-decoration: underline; }

/* ── 단추 ── */

.bbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  margin-top: 12px;
  /* 44px — 손가락 자리. */
  min-height: 46px;
  padding: 0 16px;
  border: 0; border-radius: 13px;
  background: var(--y); color: #1a1500;
  font: 800 14.5px/1 Pretendard, sans-serif;
  letter-spacing: -0.3px;
  cursor: pointer;
}
.bbtn.ghost {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line);
}
.bbtn.danger { background: var(--danger-ink); color: #fff; }
.bbtn:disabled { opacity: 0.45; cursor: default; }
.bbtn.done { background: var(--green); color: #fff; }
.bbtn.bad { background: var(--danger-ink); color: #fff; }
.bbtn.file { cursor: pointer; }
.brow > .bbtn { flex: 1 1 140px; width: auto; }

/* ── 로그인·가입 ── */

.bgate { max-width: 520px; margin: 0 auto; }
.bgate .gsec { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.bgate .gbox { display: flex; justify-content: center; min-height: 44px; }
.bsteps {
  margin-top: 18px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--soft);
}
.bsteps b { font-size: 13px; }
.bsteps ol { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.9; color: var(--night-body); }
.bcode { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.bcode summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--biz); }
.bfoot { text-align: center; margin-top: 18px; }
.bfoot a { color: var(--biz); font-weight: 700; }

/* ── 한눈에 ── */

.bstat {
  border-radius: 16px; padding: 16px;
  border: 1px solid var(--line); background: var(--card);
}
.bstat b { display: block; font-size: 16px; letter-spacing: -0.4px; margin-bottom: 5px; }
.bstat p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--night-sub); }
.bstat ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.9; }
.bstat .bbtn { width: auto; padding: 0 18px; }
.bstat.ok { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.07); }
.bstat.ok b { color: #15803d; }
.bstat.wait { border-color: var(--warn-line); background: var(--warn-bg); }
.bstat.wait b { color: var(--warn-ink); }
.bstat.wait p, .bstat.wait ul { color: var(--warn-ink); }
.bstat.todo { border-color: var(--panel-keyline); background: var(--panel-keysoft); }
.bstat.bad { border-color: var(--danger-line); background: var(--danger-bg); }
.bstat.bad b { color: var(--danger-ink); }

.bcheck { margin: 0; padding: 0; list-style: none; }
.bcheck li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--sub);
}
.bcheck li:last-child { border-bottom: 0; }
.bcheck li i {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line);
}
.bcheck li.on { color: var(--ink); }
.bcheck li.on i { border-color: var(--green); background: var(--green); }
/* 체크 표시를 **테두리 두 변으로 그린다.** 그림 파일이면 배포에서 빠질 수 있고
   (그러면 「됐다」와 「안 됐다」가 눈으로 안 갈린다), 글자(✓)면 기기마다 모양과
   높이가 달라 동그라미 안에서 삐뚤어진다. */
.bcheck li.on i::after {
  content: '';
  width: 4.5px; height: 8px;
  margin-top: -2px;
  border: 2px solid #fff;
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}

.bmapping .row {
  display: flex; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.6;
}
.bmapping .row:last-child { border-bottom: 0; }
.bmapping .row b { flex: 0 0 68px; color: var(--ink); }
.bmapping .row span { color: var(--sub); }

.bempty {
  padding: 26px 16px; text-align: center;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--soft);
}
.bempty b { display: block; font-size: 14px; margin-bottom: 4px; }
.bempty p { margin: 0; font-size: 12.5px; color: var(--sub); line-height: 1.7; }

/* ── 지도 ── */

.bmapbox { position: relative; margin-top: 4px; }
.bmap {
  width: 100%; height: 300px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--soft);
}
.bmapfail {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 6px;
  padding: 20px; text-align: center;
  border-radius: 12px; background: var(--soft);
  font-size: 13px; color: var(--danger-ink); line-height: 1.7;
}
/* `display:grid` 가 브라우저 기본 `[hidden]{display:none}` 을 **이긴다.**
   숨긴 줄 알았던 판이 지도를 통째로 덮고 클릭을 먹는다(`.mapfail` 이 겪은 것과 같다). */
.bmapfail[hidden] { display: none; }
.bcoord {
  flex: 1 1 160px;
  font: 600 12.5px/1 Pretendard, sans-serif;
  color: var(--sub);
  font-variant-numeric: tabular-nums;
  padding: 14px 0;
}

/* 지도 한가운데 붙박이 캐릭터 (2026-09-10 지시: 「캐릭터는 한가운데 있고 지도를 옮겨」).
   **손가락을 안 받는다** — 받으면 지도를 끌려던 손이 그림에 막혀 판이 안 움직인다.
   그림의 **밑변이 가운데 점에 닿는다**: 지도에 서는 캐릭터도 발이 좌표에 닿기 때문에,
   여기서 가운데에 그림을 «걸쳐» 두면 사장님이 맞춘 자리와 회원이 보는 자리가 어긋난다. */
.bmapaim {
  position: absolute; left: 50%; top: 50%;
  pointer-events: none;
  z-index: 2;
}
.bmapaim-f {
  position: absolute; left: 0; bottom: 0;
  transform: translateX(-50%);
  width: 62px; height: 84px;
  display: grid; place-items: center;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.bmapaim-f img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bmapaim-f span {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px dashed var(--y); border-radius: 50%;
  background: var(--panel-keysoft);
  font: 800 18px/1 Pretendard, sans-serif; color: var(--point);
}
/* 발이 닿는 그 점. 그림만 있으면 «어디가 자리인지»를 눈이 못 집는다. */
.bmapaim-dot {
  position: absolute; left: 0; top: 0;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border: 2px solid #1a1500; border-radius: 50%;
  background: var(--y);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
}

/* ── 캐릭터 고르기 ── */

/* 갈래 둘(24K 명단에서 고르기 · 직접 올리기). 알약 둘을 한 판에 넣어 **하나만 켜진
   것이 눈에 보이게** 한다 — 이 화면의 규칙이 「한 자리에 하나만 선다」이기 때문이다. */
.bseg {
  display: flex; gap: 4px;
  margin-top: 10px; padding: 4px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--soft);
}
.bseg-b {
  flex: 1 1 0; min-height: 44px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--sub);
  font: 700 13px/1.4 Pretendard, sans-serif;
  cursor: pointer;
}
.bseg-b.on { background: var(--y); color: #1a1500; }
.bcpane { margin-top: 10px; }
.bcpane[hidden] { display: none; }
/* 캐릭터는 한 장뿐이라 배너처럼 격자로 늘어놓지 않는다 — 한 장이 크게 선다. */
.bshots[data-shots="face"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bshots[data-shots="face"] .shot { aspect-ratio: 3 / 4; }
.bshots[data-shots="face"] .shot img { object-fit: contain; background: var(--soft); }
.bshots[data-shots="face"] .add { aspect-ratio: 3 / 4; }

.bchars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  /* 133장을 다 펼치면 화면이 통째로 캐릭터가 된다. 상자를 잡고 그 안에서 굴린다. */
  max-height: 330px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.bchars .ch {
  /* `<button>` 의 **기본 padding 을 지운다** — 안 지우면 그림이 네모를 못 채운다
     (`object-fit:cover` 로는 안 잡힌다. 실제로 겪은 함정이다). */
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--card);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
}
.bchars .ch img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bchars .ch.on { border-color: var(--y); background: var(--panel-keysoft); }

/* ── 사진 묶음 ── */

.bshots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.bshots .shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: var(--soft);
}
/* 배너는 **잘라서** 보여 준다 — 회원 카드도 가로 액자에 잘라 싣기 때문에,
   여기서 통째로 보여 주면 「내가 본 것」과 「회원이 보는 것」이 달라진다. */
.bshots .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 가격표·테이블맵은 **통째로** 보여 준다. 세로로 긴 표를 4:3 으로 자르면 가운데
   빈 줄만 남아 「안 올라갔다」로 읽힌다(실제로 흰 네모로 보였다). 회원 화면에서도
   이 둘은 액자 안에서 통째로 서고 탭하면 크게 열린다 — 자르는 자리가 아니다. */
.bshots[data-shots="price"] .shot img,
.bshots[data-shots="tablemap"] .shot img { object-fit: contain; background: #14141a; }
.bshots .shot.first { border-color: var(--y); border-width: 2px; }
.bshots .shot figcaption {
  position: absolute; left: 6px; top: 6px;
  padding: 2px 7px; border-radius: 6px;
  background: var(--y); color: #1a1500;
  font: 800 10.5px/1.6 Pretendard, sans-serif;
}
.bshots .shot .ops { position: absolute; right: 5px; top: 5px; display: flex; gap: 4px; }
.bshots .shot .ops button {
  width: 26px; height: 26px;
  border: 0; border-radius: 8px;
  background: rgba(14, 14, 17, 0.66); color: #fff;
  font: 700 13px/1 Pretendard, sans-serif;
  cursor: pointer;
}
.bshots .shot .sz {
  position: absolute; right: 5px; bottom: 5px;
  padding: 1px 6px; border-radius: 6px;
  background: rgba(14, 14, 17, 0.6); color: #fff;
  font: 600 10px/1.6 Pretendard, sans-serif;
}
.bshots .add {
  display: grid; place-items: center;
  border: 1px dashed var(--line); background: var(--soft);
  color: var(--sub); font-size: 12px; text-align: center; line-height: 1.7;
  cursor: pointer;
}
.bshots .add:hover { border-color: var(--y); color: var(--point); }

/* ── 홍보영상 ── */

.bvids { display: grid; gap: 10px; }
.bvrow { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.bvrow .bfld input { background: var(--card); }
.vdel {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); color: var(--sub);
  font: 700 15px/1 Pretendard, sans-serif; cursor: pointer;
}

/* ── 서류 ── */

.bdoc { padding: 13px 0; border-top: 1px solid var(--line); }
.bdoc:first-of-type { border-top: 0; padding-top: 4px; }
.bdoc .dh { display: flex; align-items: center; gap: 8px; }
.bdoc .dh b { font-size: 14px; }
.bdoc .tag {
  padding: 2px 8px; border-radius: 999px;
  font: 800 11px/1.7 Pretendard, sans-serif;
  background: var(--chip-bg); color: var(--chip-ink);
}
.bdoc .tag.ok { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.bdoc .tag.wait { background: var(--warn-bg); color: var(--warn-ink); }
.bdoc .tag.bad { background: var(--danger-bg); color: var(--danger-ink); }

/* ── 채팅 ── */

.crooms { margin: 0; padding: 0; list-style: none; }
.crooms li { border-bottom: 1px solid var(--line); }
.crooms li:last-child { border-bottom: 0; }
.crooms button {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 2px; border: 0; background: none; text-align: left; cursor: pointer;
}
.crooms .bcav {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--night); color: var(--y);
  font: 800 16px/1 Pretendard, sans-serif;
}
.crooms .cmid { flex: 1; min-width: 0; }
.crooms .cmid b { display: block; font-size: 14px; letter-spacing: -0.3px; }
.crooms .cmid span {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: var(--sub);
  /* 한 줄로 자른다 — 두 줄이 되면 목록에서 방 수가 확 줄어 보인다. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crooms .cend { flex: 0 0 auto; text-align: right; }
.crooms .cend i { display: block; font-style: normal; font-size: 11px; color: var(--sub); }
.crooms .cend em {
  display: inline-block; margin-top: 4px; min-width: 18px; padding: 1px 6px;
  border-radius: 999px; background: var(--red); color: #fff;
  font: 800 10.5px/1.6 Pretendard, sans-serif; font-style: normal;
}

.bchat .chead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bchat .chead button {
  width: 36px; height: 36px; margin-left: -6px;
  border: 0; border-radius: 11px; background: none;
  color: var(--ink); font: 700 20px/1 Pretendard, sans-serif; cursor: pointer;
}
.bchat .chead b { font-size: 15.5px; letter-spacing: -0.4px; }
.bchat .chead .cond { margin: 0; }
.clog {
  height: 46vh; min-height: 280px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--line); border-radius: 12px;
  /* 카톡과 같은 하늘빛 방(`chat.js` 가 쓰는 값과 같다) — 회원 화면과 매장 화면이
     같은 모양이어야 두 사람이 같은 대화를 보고 있다고 느낀다. */
  background: #b2c7da;
  display: flex; flex-direction: column; gap: 8px;
}
.cmsg { max-width: 78%; align-self: flex-start; }
.cmsg p {
  margin: 0; padding: 9px 12px;
  border-radius: 4px 14px 14px 14px;
  background: #fff; color: #111214;
  font-size: 14px; line-height: 1.6;
  word-break: break-word;
}
.cmsg i { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: #4a5a68; }
/* ⚠ 「내 말」에 `.me` 를 안 쓴다 — 이 화면도 `app.css` 를 싣는데, 거기서 `.me` 는
   지도의 **「내 위치」 핀**이라 말풍선이 19px 짜리 세로 막대가 된다.
   오류는 한 줄도 안 나고 화면을 봐야만 보인다(회원 쪽에서 실제로 그렇게 났다). */
.cmsg.mine { align-self: flex-end; }
.cmsg.mine p { border-radius: 14px 4px 14px 14px; background: #fee500; }
.cmsg.mine i { text-align: right; }
.cmsg.blocked {
  align-self: center; max-width: 92%;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(194, 38, 42, 0.92); color: #fff; text-align: center;
}
.cmsg.blocked b { display: block; font-size: 12.5px; }
.cmsg.blocked span { font-size: 11.5px; opacity: 0.92; line-height: 1.6; }

.cbar { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.cbar textarea {
  flex: 1; box-sizing: border-box;
  padding: 12px; max-height: 120px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--soft); color: var(--ink);
  /* 16px — 위 입력칸과 같은 이유(iOS 확대). */
  font: 400 16px/1.5 Pretendard, sans-serif;
  resize: none;
}
.cbar .bbtn { width: auto; margin: 0; flex: 0 0 auto; padding: 0 18px; }
.crule { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }

/* ══════════════════════════════════════════════════════════════════
   매장 카드 — **회원이 보는 그 화면 위에서 고친다** (2026-09-08 지시)
   ══════════════════════════════════════════════════════════════════
   카드 안쪽(사진·탭·판)의 생김새는 **`app.css` 가 그대로 맡는다** — 회원 화면이
   쓰는 그 규칙이다. 여기서 다시 칠하면 두 화면이 갈리고, 그러면 사장님이 보는
   것이 거짓말이 된다. 이 절이 더하는 것은 **카드를 감싸는 틀**과 **「수정」 줄**뿐이다. */

.bzc-wrap { padding: 14px; }
.bzc-live {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--warn-bg);
  color: var(--warn-ink);
  font-size: 12.5px;
  line-height: 1.6;
}
.bzc-live.on { background: rgba(34, 197, 94, 0.1); color: #15803d; }
/* 정지된 계정. 「한눈에」를 걷으면서 그 판이 하던 말이 이 줄로 왔다(2026-09-08) —
   가장 나쁜 소식이라 노랑(주의)이 아니라 빨강으로 선다. */
.bzc-live.bad { background: rgba(226, 55, 68, 0.1); color: #b91c1c; }
.bzc-live a { color: inherit; font-weight: 700; }
.bzc-live b { font-weight: 700; }

/* 카드 — 회원 화면에서 이 자리는 지도 위에 뜬 판이다. 여기서는 종이 한 장으로 눕힌다. */
.bzc-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
}
.bzc-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.bzc-head b { font-size: 17px; letter-spacing: -0.5px; }
.bzc-head span {
  margin-left: auto;
  font-size: 11px; color: var(--sub);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.bzc-body { padding: 12px; }

/* 지도 위 캐릭터 한 장. **배너 액자 위에 선다**(2026-09-08 지시) — 회원이 우리 매장을
   만나는 순서가 그렇다. 액자 꼴을 배너와 **일부러 다르게** 잡는다(가로 액자가 아니라
   세로로 선 사람 하나) — 같은 꼴이면 사장님이 이것을 배너 첫 장으로 읽는다. */
.bzc-char {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}
.bzc-charfr {
  flex: 0 0 auto;
  width: 66px; aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* `contain` 이다 — 캐릭터는 잘라낸 그림이라 `cover` 로 채우면 발끝이 잘린다. */
.bzc-charfr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bzc-char.none .bzc-charfr { border-style: dashed; background: transparent; }
.bzc-char.none .bzc-charfr span { font: 800 20px/1 Pretendard, sans-serif; color: var(--sub); }
.bzc-chartx { min-width: 0; }
/* ⚠ **바로 밑의 `b` 만** 잡는다(`>`). 자손까지 잡으면 문단 안에서 한 낱말을 굵게 쓴
   것이 `display:block` 을 물고 와 **그 낱말만 혼자 줄을 차지한다** — 오류는 안 나고
   글만 이상해진다. 실제로 「지도」 한 낱말이 그렇게 세 줄로 갈라졌다. */
.bzc-chartx > b { display: block; font-size: 13.5px; }
.bzc-chartx p { margin: 3px 0 0; font-size: 12px; line-height: 1.55; color: var(--sub); }
/* 문단 안의 강조는 **더 진해야** 한다. `--night-body` 는 어두운 판의 글자색이라
   이 흰 카드 위에서는 오히려 옅어 보인다 — 강조가 아니라 흐려짐으로 읽힌다. */
.bzc-chartx p b { color: var(--ink); }

/* 「24K에 맡기기」 줄. `.bbtn` 은 폭을 다 먹는 단추라 그대로 두면 옆 글이 눌린다. */
.bzc-charnone { align-items: center; margin-top: 10px; }
.bzc-charnone .bbtn { width: auto; margin-top: 0; min-height: 40px; font-size: 13px; }
.bzc-charnone .cond { margin: 0; }

/* 배너를 안 올렸을 때. **예시 사진을 세우지 않는다** — 세우면 사장님이 그것을
   자기 사진으로 안다(회원 카드는 예시를 세우지만 여기는 「내가 올린 것」을 보는 자리다). */
.bzc-nophoto {
  display: grid; place-content: center; gap: 4px;
  border-radius: 14px;
  background: var(--soft);
  border: 1px dashed var(--line);
  text-align: center;
}
.bzc-nophoto b { font-size: 14px; }
.bzc-nophoto span { font-size: 12px; color: var(--sub); }

/* 「수정」 한 줄. **고치는 칸 바로 밑에 붙는다** — 어느 칸을 고치는지 손이 헷갈릴
   자리가 없어야 한다. 카드 밖에 단추를 모아 두면 그 관계가 끊긴다. */
.bzc-edit {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 4px;
  padding: 9px 11px;
  border: 1px dashed var(--panel-keyline);
  border-radius: 11px;
  background: var(--panel-keysoft);
}
.bzc-edit[hidden] { display: none; }
.bzc-edit span { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.bzc-edit span b { display: block; color: var(--ink); font-size: 13px; }
.bzc-edit span i { font-style: normal; color: var(--sub); }
.bzc-edit .bzc-go {
  flex: 0 0 auto;
  /* 44px — 폰에서 손가락으로 겨눌 수 있는 가장 작은 자리. */
  min-height: 40px; padding: 0 16px;
  border: 0; border-radius: 10px;
  background: var(--night); color: #fff;
  font: 800 13px/1 Pretendard, sans-serif; cursor: pointer;
}
.bzc-edit.open .bzc-go { background: var(--sub); }

/* 펴진 편집 상자. */
.bzc-form {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.bzc-formhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bzc-formhead b { font-size: 14.5px; letter-spacing: -0.4px; }
.bzc-x {
  margin-left: auto;
  width: 32px; height: 32px;
  border: 0; border-radius: 10px;
  background: var(--chip-bg); color: var(--chip-ink);
  font: 700 13px/1 Pretendard, sans-serif; cursor: pointer;
}
.bzc-form .bfld input, .bzc-form .bfld select, .bzc-form .bfld textarea { background: var(--card); }
.bzc-form .brow > .bbtn { flex: 1 1 120px; }

/* ── 그 자리에서 바로 고치기 (2026-09-10 지시) ──────────────────────
 *
 * 「수정 버튼 클릭하면 글이 써져있는 창이 수정 될 수 있게 … 한두 자만 고칠 때도 쉽게」.
 *
 * 상자를 따로 펴지 않고 **그 칸 안**에 칸 하나만 세운다. 그래서 판이 하는 일은 둘뿐이다 —
 * 상자 티(테두리·바탕·여백)를 걷고, 고치는 동안 그 칸에 «보이던 글»을 감춘다. */
.bzc-inline {
  margin: 6px 0 2px;
  padding: 0;
  border: 0;
  background: none;
}
/* 머리글이 바로 위에 있다 — 칸 이름을 또 적으면 같은 말이 두 줄로 선다. */
.bzc-inline .bfld { margin-top: 0; }
.bzc-inline .bfld > span { display: none; }
.bzc-inline .bfld input, .bzc-inline .bfld textarea {
  background: var(--card);
  /* 고치는 중인 칸이라는 것이 한눈에 보여야 한다 — 카드 안이라 테두리만으로는 묻힌다. */
  border-color: var(--y);
}
.bzc-inline .bfld textarea { min-height: 84px; }
.bzc-inline .cond { margin: 6px 0 0; }
/* 저장·취소는 **글 바로 밑에 작게**. `.bbtn` 은 폭을 다 먹는 단추라 그대로 두면
   한두 자 고치는 자리에 큰 단추 두 장이 선다. */
.bzc-inline .bzc-ilrow { gap: 8px; margin-top: 8px; }
/* ⚠ 이름 셋을 다 적는다 — 위에 `.bzc-form .brow > .bbtn { flex: 1 1 120px }` 가 있어서
   `.bzc-ilrow > .bbtn` 만으로는 **무게에서 진다**(상자와 이 칸이 같은 `.bzc-form` 이다).
   지면 단추 둘이 다시 폭을 반씩 나눠 먹어 큰 단추 두 장이 선다. */
.bzc-inline .bzc-ilrow > .bbtn {
  flex: 0 0 auto; width: auto;
  min-height: 38px; margin-top: 0;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13px;
}

/* 고치는 동안 그 칸의 «보이던 글»은 감춘다 — 같은 값이 위아래로 둘 서면 어느 쪽을
   고치는 것인지 손이 헷갈린다. **머리글과 「수정」과 고치는 칸만** 남긴다.
   ⚠ `.bzc-vi` 를 앞에 세운다 — `markSections` 가 표를 붙인 칸만 집기 위해서다
   (`app.css` 의 `.vi` 는 조상 조건 없이 서 있다). */
.bzc-vi.bzc-editing > *:not(h4):not(.bzc-vi-go):not(.bzc-inline) { display: none; }

/* 편집 상자 안의 작은 묶음(지도 자리·캐릭터). */
.bzc-sub { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bzc-sub > b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.bzc-sub > b .need {
  font: 700 11px/1.6 Pretendard, sans-serif; font-style: normal;
  color: var(--danger-ink); background: var(--danger-bg);
  border-radius: 5px; padding: 1px 6px; margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   고객 채팅 — **회원 화면과 같은 꼴** (2026-09-08 지시)
   ══════════════════════════════════════════════════════════════════
   목록 한 줄(`.chl`)·얼굴(`.cav`)·거르개 알약(`.kkchips`)·빈 목록(`.kkempty`)은
   **`app.css` 것을 그대로 쓴다** — 회원이 보는 그 채팅과 같은 옷이다.
   여기서 더하는 것은 매장 쪽에만 있는 자리(머리·방 머리·매장에는 사진이 없는 얼굴)뿐이다. */

.bzchat { padding: 14px; }
.bzchat-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bzchat-hd h3 { margin: 0; font-size: 22px; letter-spacing: -0.8px; }
.bzchat-n {
  min-width: 20px; padding: 2px 7px;
  border-radius: 999px; background: var(--red); color: #fff;
  font: 800 11.5px/1.6 Pretendard, sans-serif;
}
.bzfind { margin-bottom: 10px; }
.bzfind input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--soft); color: var(--ink);
  /* 16px — 그보다 작으면 iOS 사파리가 칸을 누를 때 화면을 확대한다. */
  font: 400 16px/1.4 Pretendard, sans-serif;
}
.bzfind input:focus { outline: none; border-color: var(--y); background: var(--card); }

/* 매장에는 **회원 사진이 안 온다**(가입 동의문의 약속) — 이름 첫 글자로 세운다.
   상자는 `.cav` 것을 그대로 물려받으므로 크기·모서리가 회원 화면과 같다. */
.bzchat .bzcav, .bzroom-hd .bzcav {
  /* 크기는 **회원 채팅과 같은 48px** 이다. `app.css` 의 `.cav` 는 상자만 잡고
     크기를 안 준다 — 회원 화면은 그것을 인라인 style 로 준다(`chat.js` 의 avatar).
     여기서는 판에 적는다: 인라인으로 주면 이 값이 글 속에 흩어져 한 곳에서 못 고친다.
     안 주면 글자 크기만 한 **16px 짜리 점**이 된다(실제로 그렇게 떴다). */
  width: 48px; height: 48px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: var(--night); color: var(--y);
  font: 800 17px/1 Pretendard, sans-serif;
}
.bzroom-hd .bzcav { width: 40px; height: 40px; border-radius: 15px; font-size: 15px; }

.bzroom-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bzroom-hd button {
  width: 34px; height: 34px; margin-left: -6px;
  border: 0; border-radius: 11px; background: none;
  color: var(--ink); font: 700 20px/1 Pretendard, sans-serif; cursor: pointer;
}
.bzroom-hd .who { min-width: 0; }
.bzroom-hd .who b { display: block; font-size: 15.5px; letter-spacing: -0.4px; }
.bzroom-hd .who i { font-style: normal; font-size: 12px; color: var(--sub); }
.bzlog-empty { margin: auto; text-align: center; color: #33404b; line-height: 1.8; }

/* ── 조회수 탭 ────────────────────────────────────────────────────
 *
 * 2026-09-08 지시로 「서류·계정」 오른쪽에 붙었다. 그리는 것은 회원이 카드 머리에서
 * 여는 그 창과 **같은 글**(`venue-stats.js` 의 `statsHTML`)이라, 여기서 `.vst-*` 를
 * 다시 칠하지 않는다 — 칠하면 두 화면이 갈리고, 그때 사장님이 보는 수와 회원이
 * 보는 수가 다르게 **생겼다는 이유만으로** 다른 값처럼 읽힌다.
 *
 * 이 절이 하는 일은 **창(`.vstat .sheet`)이 주던 여백을 대신 주는 것**뿐이다.
 * 그 판때기는 여기 없다(탭 안에 그냥 펴 놓았다). */
.bzviews .vst-head { padding-right: 0; }
.bzviews .vst-in { margin-top: 4px; }
/* PC 에서 **한 줄을 다 쓴다.** 두 기둥 중 하나에 넣으면 서른 칸짜리 막대가 반쪽
   폭에 들어가 이름표가 서로 붙는다(`thinLabels` 가 솎아 내긴 하지만, 그때는
   날짜가 사흘에 하나씩만 남아 그래프를 못 읽는다). */
@media (min-width: 900px) { .bpanes > .bzviews { grid-column: 1 / -1; } }

/* ── 카드 «칸마다»의 「수정」 (2026-09-08 지시) ──────────────────────
 *
 * 「각 글마다 수정 버튼이 있어서 내가 쓴 글을 수정할 수 있어야 한다」.
 * 전에는 「매장정보」 밑에 단추가 하나였다 — 영업시간 한 줄을 고치려고 열한 칸짜리
 * 폼을 열어야 했다.
 *
 * 칸(`.vi`)의 **오른쪽 위**에 띄운다. 글 흐름 안에 넣으면 머리글과 값 사이에 줄이
 * 하나 끼어 카드가 회원 화면과 달라 보인다 — 이 화면의 값은 「회원에게 이렇게 보인다」다.
 * 그래서 칸을 `position: relative` 로 세우고 단추만 얹는다.
 *
 * ⚠ **`.vi` 를 직접 집지 않는다.** 그 이름은 `app.css` 가 조상 조건 없이 들고 있어서,
 * 여기서 집으면 회원 화면의 칸까지 딸려 온다(`css-name-clash` 가 잡는 그것이다).
 * 대신 `markSections()` 가 자기가 맡은 칸에만 `.bzc-vi` 표를 붙이고, 판은 그 표만 집는다. */
.bzc-vi { position: relative; }
.bzc-vi > h4 { padding-right: 62px; }
.bzc-vi-go {
  position: absolute;
  top: 8px; right: 0;
  /* 손가락 자리를 벌리되 글자 상자는 작게 — 위아래 여백으로 누를 자리를 넓힌다. */
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 700 11.5px/1 Pretendard, sans-serif;
  letter-spacing: -0.2px;
  cursor: pointer;
}
.bzc-vi-go:hover { border-color: var(--y); color: var(--point); }
/* 눌린 「수정」. ⚠ **`--night` 를 쓰면 안 된다** — 이 단추가 서는 판(`.vinfo`)은
   2026-09-07 에 흰 판으로 돌면서 그 안에서 `--night` 을 `#fff` 로 **다시 정의한다.**
   그래서 「흰 바탕에 흰 글씨」가 되어 눌린 단추가 통째로 사라져 있었다(오류 0줄 ·
   `app.css` 의 그 묶음 주석이 경고하는 바로 그 함정이다).
   판이 검든 희든 같은 값인 `--ink`·`--card` 로 적는다. */
.bzc-vi.open > .bzc-vi-go { background: var(--ink); border-color: var(--ink); color: var(--card); }

/* 「이용 시 주의사항」 — **24K 규칙이라 매장이 못 고친다.** 단추 없이 비워 두면
   「왜 여기만 없나」가 되므로 그 자리에 이유를 적는다. */
.bzc-vi-no {
  position: absolute;
  top: 10px; right: 0;
  font-size: 10.5px;
  color: var(--sub);
}
.bzc-vi[data-vi="rules"] > h4 { padding-right: 116px; }

/* 회원 카드에는 **아직 안 서는 칸**(사진을 안 올렸거나 리워드를 안 열었을 때).
   포털만 세운다 — 안 세우면 처음 온 사장님은 올릴 문을 못 찾는다.
   점선으로 「아직 비어 있다」를 말한다. */
.bzc-slot { border-bottom-style: dashed !important; }
.bzc-slot-none { opacity: 0.85; }

/* 칸 밑에 펴지는 편집 상자. 흰 판(`.vinfo`) **안**이라 판과 갈려 보여야 한다. */
.bzc-vi + .bzc-form {
  margin: 10px 0 4px;
  border: 1px solid var(--line);
  background: var(--bg);
}

/* 카드 밑 안내 한 줄 — 「수정」이 어디에 붙어 있는지 알려 준다. */
.bzc-hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--sub);
  text-align: center;
}
.bzc-hint b { color: var(--ink); }