/* 손님 화면 공통 창: 방문 예약(visit_booking.js) · 내 매물함(visitor_tools.js) · 상담 챗봇(chatbot.js)
 * 각 스크립트가 넣는 스타일보다 앞서도록 선택자 앞에 body 를 붙였다. 기능은 그대로, 모양만 새 디자인에 맞춘다.
 * 첫 화면·목록·상세(rb.css)와 지도(rb_map.css) 모두 이 파일을 같이 불러온다. */
body {
  --w-ink: #14202B; --w-ink2: #3D4A55; --w-muted: #5B6670; --w-line: #D9DDDA; --w-bg: #F4F5F3;
  --w-accent: #1F4D46; --w-accent-deep: #163A35; --w-wash: #E8EEEB; --w-r: 3px;
}

/* ---------------------------------------------------------------- 떠 있는 버튼 */
body .bk-fabs { right: 20px; bottom: 20px; gap: 8px; }
body .bk-fab { height: 44px; padding: 0 16px; border-radius: var(--w-r); border: 1px solid var(--w-ink); box-shadow: none; font-size: 14px; font-weight: 600; transform: none; }
body .bk-fab.book { background: #fff; color: var(--w-ink); }
body .bk-fab.book:hover { background: var(--w-ink); color: #fff; }
body .bk-fab.kakao { border-color: #FEE500; }
body #vt-fab { border-radius: var(--w-r); box-shadow: none; background: var(--w-ink); font-weight: 600; font-size: 14px; padding: 11px 16px; }
body #vt-fab i { color: #fff; opacity: .8; }
@media (max-width: 760px) {
  /* 휴대폰: 글자 없는 작은 네모 버튼으로 줄여 목록을 덜 가린다 */
  body .bk-fabs { right: 12px; bottom: 76px; gap: 6px; }
  body .bk-fab { width: 44px; height: 44px; padding: 0; border-radius: var(--w-r); font-size: 16px; justify-content: center; }
  body .bk-fab span { display: none; }
}

/* 하트(관심 매물): 빨강·그림자 대신 차분하게, 담았을 때만 색 */
body [data-vt-fav].vt-heart { color: var(--w-ink); box-shadow: none; }
body [data-vt-fav].vt-heart.vt-on { color: #9A3B1E; }

/* ---------------------------------------------------------------- 방문 예약 창 */
body .bk-back { background: rgb(20 32 43 / .55); }
body .bk-box { border-radius: var(--w-r); box-shadow: none; color: var(--w-ink); width: min(540px, 100%); }
body .bk-head { padding: 24px 28px 16px; border-bottom: 1px solid var(--w-ink); }
body .bk-head h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
body .bk-head h3 i, body .bk-head > i { display: none; }
body .bk-head .x { font-size: 24px; color: var(--w-ink); width: 40px; height: 40px; margin-right: -10px; }
body .bk-body { padding: 8px 28px 28px; }
body .bk-lbl { font-size: .875rem; font-weight: 700; color: var(--w-ink); margin: 20px 0 8px; }
body .bk-item { background: none; border: 0; border-left: 2px solid var(--w-accent); border-radius: 0; color: var(--w-ink2); padding: 2px 0 2px 12px; margin: 16px 0 0; font-size: .875rem; }
body .bk-item i { display: none; }
body .bk-days { gap: 6px; }
body .bk-days button, body .bk-times button { border-color: var(--w-line); border-radius: var(--w-r); font-size: .875rem; font-weight: 500; color: var(--w-ink2); font-variant-numeric: tabular-nums; }
body .bk-days button { padding: 10px 14px; }
body .bk-times { gap: 6px; }
body .bk-times button { padding: 10px 0; }
body .bk-days button:hover, body .bk-times button:hover:not(:disabled) { border-color: var(--w-ink); color: var(--w-ink); }
body .bk-days button.on, body .bk-times button.on { background: var(--w-ink); border-color: var(--w-ink); color: #fff; font-weight: 700; }
body .bk-times button:disabled { background: var(--w-bg); color: #A9B4BC; border-color: var(--w-bg); }
body .bk-in { height: 48px; border-color: var(--w-line); border-radius: var(--w-r); color: var(--w-ink); font-size: 1rem; }
body .bk-in:focus { outline: 0; border-color: var(--w-accent); box-shadow: 0 0 0 1px var(--w-accent); }
body .bk-notice { color: var(--w-muted); font-size: .8125rem; }
body .bk-notice i { display: none; }
body .bk-notice a, body .bk-body label a { color: var(--w-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
body .bk-submit { height: 52px; margin-top: 16px; border-radius: var(--w-r); background: var(--w-accent); font-size: 1rem; font-weight: 700; }
body .bk-submit:hover:not(:disabled) { background: var(--w-accent-deep); }
body .bk-done i { font-size: 32px; color: var(--w-accent); }
body .bk-done h4 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
@media (max-width: 520px) {
  body .bk-back { padding: 0; align-items: flex-end; }
  body .bk-box { width: 100%; max-height: 94vh; border-radius: 0; }
  body .bk-head { padding: 20px 20px 14px; }
  body .bk-body { padding: 4px 20px 24px; }
}

/* ---------------------------------------------------------------- 내 매물함 */
body .vt-back { background: rgb(20 32 43 / .45); }
body .vt-panel { box-shadow: none; border-right: 1px solid var(--w-line); color: var(--w-ink); width: min(520px, 100vw); }
body .vt-ph { padding: 20px 24px 14px; border-bottom: 0; }
body .vt-ph b { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
body .vt-ph b i { display: none; }
body .vt-x { background: none; border-radius: var(--w-r); width: 40px; height: 40px; color: var(--w-ink); }
body .vt-x:hover { background: var(--w-bg); }
body .vt-tabs { gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--w-line); }
body .vt-tabs button { padding: 10px 0; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: .9375rem; font-weight: 500; color: var(--w-muted); background: none; white-space: nowrap; }
body .vt-tabs button.on { background: none; color: var(--w-ink); font-weight: 700; border-bottom-color: var(--w-ink); }
body .vt-body { padding: 8px 24px 24px; }
body .vt-row { grid-template-columns: 96px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--w-line); }
body .vt-row img { width: 96px; height: 72px; border-radius: var(--w-r); }
body .vt-row .t { font-size: .9375rem; font-weight: 600; }
body .vt-row .s { color: var(--w-muted); font-size: .8125rem; }
body .vt-row .p { color: var(--w-ink); font-size: .9375rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
body .vt-ra button { border-color: var(--w-line); border-radius: var(--w-r); font-size: .8125rem; color: var(--w-ink2); padding: 6px 10px; }
body .vt-ra button:hover { border-color: var(--w-ink); color: var(--w-ink); }
body .vt-ra button.vt-on { background: var(--w-wash); border-color: var(--w-accent); color: var(--w-accent); font-weight: 600; }
body .vt-empty { padding: 56px 0; text-align: left; color: var(--w-ink2); }
body .vt-cmp { border-top: 1px solid var(--w-ink); font-variant-numeric: tabular-nums; }
body .vt-cmp th, body .vt-cmp td { border: 0; border-bottom: 1px solid var(--w-line); padding: 9px 6px; }
body .vt-cmp th { background: none; font-weight: 400; color: var(--w-muted); text-align: left; }
body .vt-cmp td img { border-radius: 2px; }
body .vt-cmp td.best { background: var(--w-wash); color: var(--w-accent); font-weight: 700; }
body .vt-note { color: var(--w-muted); }
body .vt-btn { border-radius: var(--w-r); background: var(--w-accent); font-weight: 700; padding: 12px 16px; }
body .vt-calc label { font-size: .8125rem; font-weight: 600; color: var(--w-ink2); margin-top: 12px; }
body .vt-calc input[type=text], body .vt-calc select { border-color: var(--w-line); border-radius: var(--w-r); min-height: 44px; }
body .vt-out { border: 0; border-top: 1px solid var(--w-ink); border-radius: 0; }
body .vt-out div { padding: 11px 0; border-bottom: 1px solid var(--w-line); font-variant-numeric: tabular-nums; }
body .vt-out div.hi { background: var(--w-wash); color: var(--w-accent); font-weight: 800; padding-inline: 12px; margin-inline: -12px; }
body .vt-toast { border-radius: var(--w-r); box-shadow: none; background: var(--w-ink); }

/* ---------------------------------------------------------------- 상담 챗봇(관리자가 켰을 때만 나온다) */
.chat-fab { position: fixed; right: 20px; bottom: 128px; z-index: 9000; width: 44px; height: 44px; border-radius: 3px; border: 1px solid #14202B; background: #14202B; color: #fff; font-size: 16px; cursor: pointer; }
.chat-panel { position: fixed; right: 20px; bottom: 180px; z-index: 9001; width: min(380px, calc(100vw - 32px)); height: min(540px, calc(100vh - 220px)); background: #fff; color: #14202B; border: 1px solid #14202B; border-radius: 3px; display: none; flex-direction: column; overflow: hidden; font-family: inherit; }
.chat-panel.on { display: flex; }
.chat-head { padding: 16px 18px; font-weight: 800; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #D9DDDA; }
.chat-head i { display: none; }
.chat-head button { background: none; border: 0; color: #14202B; font-size: 22px; line-height: 1; cursor: pointer; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; background: #F4F5F3; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 86%; padding: 10px 14px; border-radius: 3px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.chat-msg.bot { background: #fff; align-self: flex-start; border: 1px solid #D9DDDA; }
.chat-msg.me { background: #1F4D46; color: #fff; align-self: flex-end; }
.chat-note { font-size: 12px; color: #5B6670; padding: 8px 16px; background: #fff; border-top: 1px solid #D9DDDA; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; background: #fff; }
.chat-form input { flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid #D9DDDA; border-radius: 3px; font-size: 16px; }
.chat-form button { border: 0; background: #1F4D46; color: #fff; border-radius: 3px; padding: 0 16px; font-weight: 700; cursor: pointer; }
@media (max-width: 760px) {
  .chat-fab { right: 12px; bottom: 176px; }
  .chat-panel { right: 8px; left: 8px; width: auto; bottom: 228px; height: min(60vh, 520px); }
}

/* 주변 상권: 큰 분류는 숫자표, 세부 업종은 두 줄로 나란히 놓은 가는 막대 */
body .mk .mk-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0 20px; margin: 4px 0 8px !important; }
body .mk .mk-chips span { display: block; background: none !important; border-radius: 0 !important; padding: 10px 0 !important; border-top: 1px solid var(--w-line); font-size: .8125rem !important; color: var(--w-muted) !important; }
body .mk .mk-chips span b { display: block; margin-top: 2px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--w-ink); font-variant-numeric: tabular-nums; }
body .mk .mk-bars { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px !important; margin-top: 12px; }
body .mk .mk-bar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "t c" "b b"; gap: 6px 12px !important; padding: 11px 0; border-top: 1px solid var(--w-line); }
body .mk .mk-bar .t { grid-area: t; color: var(--w-ink) !important; font-size: .875rem !important; }
body .mk .mk-bar .c { grid-area: c; color: var(--w-ink) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
body .mk .mk-bar .b { grid-area: b; height: 3px !important; border-radius: 0 !important; background: #E7EAE7 !important; }
body .mk .mk-src { color: var(--w-muted) !important; }
@media (max-width: 720px) { body .mk .mk-bars { grid-template-columns: 1fr; } }

/* 2026-11-11: 좁은 PC 화면에서 방문 예약 버튼이 매물 카드를 가리지 않도록 글자 없이 아이콘만 */
@media (min-width: 761px) and (max-width: 1360px) {
  body .bk-fab { width: 44px; padding: 0; justify-content: center; }
  body .bk-fab span { display: none; }
}