/* 여기바방 새 디자인 (2026-11-13 사장님 "디자인부터 새로 — 조금 고급지고 편리하게, 지금은 숫자가 너무 안 보여").
   html[data-theme="pro"] 일 때만 적용 (index.html · ops.html). app.css · member.css · stage3.css · babbang.css 위에 덮는다.
   · 숫자: 연한 회색·금색 글씨를 없애고 진한 글씨 + 굵게 + 고정폭 숫자. 금색은 줄·점 같은 장식에만 쓴다.
   · 편리: PC 에서는 왼쪽에 조건 칸이 늘 붙어 있고(스크롤해도), 결과 머리줄도 위에 붙는다. 방 상세는 오른쪽에서 밀려 나와 표를 가리지 않는다.
   · 바꾸기 전 파일: 바바방_쇼츠\backups\여기바방_새디자인전_20261113_1458 */
html[data-theme="pro"] {
  --ink: #111318; --ink2: #2e333b; --mute: #5d636c; --faint: #8a9099; --line: #e3e3df; --line2: #eeeeeb; --bg: #f4f4f2; --card: #fff; --soft: #f1f1ee;
  --gold: #a8844c; --gold-soft: #f6f0e5; --pin: #a8844c; --pin-ink: #fff; --pin-soft: #f6f0e5; --blue: #1f4fa3;
  --ok: #1e6b47; --ok-soft: #e5f2eb; --warn: #8a5410; --warn-soft: #f7ecd9; --bad: #a92e25; --bad-soft: #f9e6e3; --gray-soft: #efefec;
  --r: 14px; --head: 64px;
  --f-d: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --y-grad: #111318; --k-grad: #111318; --w-grad: #fff;
  --depth: 0 1px 2px rgba(17, 19, 24, .05), 0 4px 16px rgba(17, 19, 24, .05);
  --depth-up: 0 2px 6px rgba(17, 19, 24, .07), 0 18px 44px rgba(17, 19, 24, .13);
  background: var(--bg);
}
html[data-theme="pro"] body { background: var(--bg); font-size: 15.5px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
html[data-theme="pro"] ::selection { background: #e8dcc6; }
html[data-theme="pro"] :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
html[data-theme="pro"] h1, html[data-theme="pro"] h2, html[data-theme="pro"] h3 { font-family: var(--f-d); }

/* ── 버튼 · 입력 · 표시 */
html[data-theme="pro"] .btn { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 14.5px; box-shadow: 0 1px 2px rgba(17, 19, 24, .05); }
html[data-theme="pro"] .btn:hover { transform: none; background: #fafaf8; border-color: #cfcfca; box-shadow: 0 2px 8px rgba(17, 19, 24, .08); }
html[data-theme="pro"] :is(.btn.pri, .btn.dark) { background: var(--ink); border-color: var(--ink); color: #fff; }
html[data-theme="pro"] :is(.btn.pri, .btn.dark):hover { background: #2a2e36; }
html[data-theme="pro"] .btn.sm { min-height: 34px; font-size: 13.5px; padding: 0 12px; }
html[data-theme="pro"] .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink2); }
html[data-theme="pro"] :is(.in, .sel, textarea.in) { border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
html[data-theme="pro"] :is(.in, .sel):focus { outline: 2px solid var(--ink); outline-offset: 0; }
html[data-theme="pro"] .in::placeholder, html[data-theme="pro"] .num::placeholder { color: var(--faint); }
html[data-theme="pro"] input[type="checkbox"] { accent-color: var(--ink); }
html[data-theme="pro"] .hint, html[data-theme="pro"] .muted { color: var(--mute); }
html[data-theme="pro"] .badge { height: 24px; padding: 0 8px; border-radius: 6px; background: var(--gray-soft); color: var(--ink2); font-size: 12.5px; font-weight: 700; }
html[data-theme="pro"] .badge.pin { background: var(--ink); color: #fff; }
html[data-theme="pro"] .badge.ok { background: var(--ok-soft); color: var(--ok); }
html[data-theme="pro"] .badge.warn { background: var(--warn-soft); color: var(--warn); }
html[data-theme="pro"] .badge.bad { background: var(--bad-soft); color: var(--bad); }
html[data-theme="pro"] .toast { border-radius: 12px; background: var(--ink); color: #fff; }
html[data-theme="pro"] :is(.card, .plan, .yb3-sec, .yb3-list, .filters, .tablewrap, .detail, .tile) { border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--depth); }
html[data-theme="pro"] .card h2, html[data-theme="pro"] .modal h2 { font-weight: 800; letter-spacing: -.02em; }
html[data-theme="pro"] .modal > div { background: #fff; border-radius: 16px; }
html[data-theme="pro"] .tabs button { border-radius: 8px; background: transparent; border: 1px solid transparent; box-shadow: none; color: var(--mute); }
html[data-theme="pro"] .tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
html[data-theme="pro"] table.plain th { background: #fafaf8; color: var(--mute); font-weight: 700; }

/* ── 머리말 */
html[data-theme="pro"] .top { background: rgba(255, 255, 255, .95); border-bottom: 1px solid var(--line); box-shadow: none; }
html[data-theme="pro"] .logo { font-family: var(--f-d); font-weight: 800; font-size: 22px; letter-spacing: -.04em; color: var(--ink); padding-top: 0; }
html[data-theme="pro"] .logo i { width: 20px; height: 20px; margin-top: 0; box-shadow: inset 0 0 0 6px var(--gold), inset 0 0 0 10px var(--ink); filter: none; }
html[data-theme="pro"] .top nav { background: transparent; box-shadow: none; padding: 0; gap: 2px; }
html[data-theme="pro"] .top nav a { position: relative; border-radius: 8px; padding: 9px 14px; font-size: 15px; font-weight: 600; color: var(--mute); }
html[data-theme="pro"] .top nav a:hover { background: var(--soft); color: var(--ink); }
html[data-theme="pro"] .top nav a.on { background: transparent; color: var(--ink); font-weight: 800; }
html[data-theme="pro"] .top nav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
html[data-theme="pro"] .office-name { color: var(--ink); font-weight: 700; }
html[data-theme="pro"] .avatar { background: var(--ink); color: #fff; }
html[data-theme="pro"] .yb3-bell { border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700; }

/* ── 공실 찾기: 머리 */
html[data-theme="pro"] .workspace-heading h1 { font-weight: 800; font-size: 26px; letter-spacing: -.035em; }
html[data-theme="pro"] .workspace-heading p { color: var(--mute); font-size: 14.5px; margin-top: 4px; }
html[data-theme="pro"] .room-search .in { height: 48px; border-radius: 12px; border-color: var(--line); box-shadow: var(--depth); font-size: 15.5px; }
html[data-theme="pro"] .room-search .btn { height: 48px; border-radius: 12px; padding: 0 22px; font-size: 15.5px; }

/* ── 조건: 칩과 숫자. 숫자는 진한 글씨 + 작은 바탕으로 또렷하게 */
html[data-theme="pro"] .chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink2); font-size: 14.5px; font-weight: 600; box-shadow: none; }
html[data-theme="pro"] .chip:hover { border-color: #c7c7c1; background: #fafaf8; }
html[data-theme="pro"] .chip small { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #ecebe6; color: var(--ink); font-size: 12.5px; font-weight: 800; line-height: 1.5; text-align: center; }
html[data-theme="pro"] .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
html[data-theme="pro"] .chip.on small { background: rgba(255, 255, 255, .2); color: #fff; }
html[data-theme="pro"] .chip.area.part { background: #fff; border: 1.5px solid var(--ink); color: var(--ink); }
html[data-theme="pro"] .chip.area.part small { background: var(--ink); color: #fff; }
html[data-theme="pro"] .chip.map-pick { background: #fff; color: var(--ink); border: 1px dashed #9a9a94; font-weight: 700; }
html[data-theme="pro"] .chip.map-pick.on { background: var(--ink); color: #fff; border-style: solid; }
html[data-theme="pro"] .filter-row > b { color: var(--ink2); font-weight: 800; font-size: 13.5px; }
html[data-theme="pro"] .area-dongs { background: #fafaf8; border: 1px solid var(--line2); border-radius: 12px; padding: 10px; }
html[data-theme="pro"] .area-name { font-family: var(--f-d); color: var(--ink); font-weight: 800; font-size: 13.5px; }
html[data-theme="pro"] .area-dongs .chip { min-height: 32px; font-size: 13.5px; }
html[data-theme="pro"] .filters .sel { min-height: 38px; border-radius: 9px; font-size: 14px; font-weight: 700; background-color: #fff; }
html[data-theme="pro"] .money-field { font-size: 14px; font-weight: 700; color: var(--ink2); }
html[data-theme="pro"] .money-field .num { height: 40px; border-radius: 9px; border-color: var(--line); background: #fff; font-size: 16px; font-weight: 800; color: var(--ink); }
html[data-theme="pro"] .money-field .hint { color: var(--mute); font-size: 13px; }
html[data-theme="pro"] .money-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
html[data-theme="pro"] .money-presets .chip { min-height: 30px; padding: 0 9px; font-size: 13px; font-weight: 700; }
/* 금액 최소 ~ 최대 (2026-11-14 사장님 "최소 금액도 있어야 해"): 이름 | 최소 | ~ | 최대 | 만원 */
html[data-theme="pro"] .money-field.range { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 6px; margin: 0; }
html[data-theme="pro"] .money-field.range .num { width: 100%; min-width: 0; }
html[data-theme="pro"] .money-field.range .num::placeholder { font-size: 13.5px; font-weight: 600; }
html[data-theme="pro"] .filter-bottom { background: #fafaf8; border-top: 1px solid var(--line2); }
html[data-theme="pro"] .quick-filters .chip { border-radius: 999px; min-height: 32px; font-size: 13.5px; }
html[data-theme="pro"] .quick-filters .chip::before { background: #b7b7b0; }
html[data-theme="pro"] .quick-filters .chip.on::before { background: #fff; }

/* 종류: 숫자가 크게 보이는 작은 칸 네 개 */
html[data-theme="pro"] .kind-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; }
html[data-theme="pro"] .kind-tabs .chip { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 58px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--mute); font-size: 13px; font-weight: 700; box-shadow: none; text-align: left; }
html[data-theme="pro"] .kind-tabs .chip small { margin: 0; padding: 0; background: none; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
html[data-theme="pro"] .kind-tabs .chip.on { background: var(--ink); border-color: var(--ink); color: rgba(255, 255, 255, .78); }
html[data-theme="pro"] .kind-tabs .chip.on small { color: #fff; background: none; }

/* 알아들은 조건 줄 */
html[data-theme="pro"] .ask-line { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 12px; box-shadow: var(--depth); }
html[data-theme="pro"] .ask-k { font-family: var(--f-d); color: var(--ink); font-weight: 800; }
html[data-theme="pro"] .ask-chip { border-radius: 7px; background: var(--ink); color: #fff; font-weight: 700; }

/* ── 결과 */
html[data-theme="pro"] .bar .count { font-family: var(--f-d); font-size: 20px; font-weight: 700; color: var(--ink2); }
html[data-theme="pro"] .bar .count strong { font-size: 24px; font-weight: 800; color: var(--ink); }
html[data-theme="pro"] .bar .sel { border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 700; }
html[data-theme="pro"] .seg { border-radius: 11px; border: 1px solid var(--line); background: var(--soft); padding: 3px; }
html[data-theme="pro"] .seg button { border-radius: 8px; color: var(--mute); font-weight: 700; }
html[data-theme="pro"] .seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17, 19, 24, .14); }
html[data-theme="pro"] .results-note { color: var(--mute); }
html[data-theme="pro"] table.rooms { font-size: 14.5px; }
html[data-theme="pro"] table.rooms th { background: #fafaf8; color: var(--mute); font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line); }
html[data-theme="pro"] table.rooms td { border-bottom-color: var(--line2); color: var(--ink2); }
html[data-theme="pro"] table.rooms tbody tr:nth-child(even) { background: #fff; }
html[data-theme="pro"] table.rooms tbody tr:hover { background: #f8f8f6; }
html[data-theme="pro"] table.rooms tbody tr.cur { background: var(--gold-soft); box-shadow: inset 3px 0 var(--ink); }
html[data-theme="pro"] .room-title { font-size: 15.5px; font-weight: 800; color: var(--ink); }
html[data-theme="pro"] .room-sub { font-size: 13px; color: var(--mute); }
html[data-theme="pro"] .structure-tag { font-size: 14.5px; font-weight: 800; color: var(--ink); }
html[data-theme="pro"] table.rooms td.price { font-family: var(--f-d); font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
html[data-theme="pro"] table.rooms td.opts { color: var(--ink2); font-size: 13.5px; }
html[data-theme="pro"] table.rooms .sel { border-radius: 9px; background: #fff; border-color: var(--line); color: var(--ink2); font-weight: 600; }
html[data-theme="pro"] table.rooms .btn.sm { color: var(--ink); }
html[data-theme="pro"] .star { color: #c9c9c3; } html[data-theme="pro"] .star.on { color: var(--gold); }
html[data-theme="pro"] .tel { color: var(--ink); }
html[data-theme="pro"] .bld:hover { background: #f8f8f6; }
html[data-theme="pro"] .bld .n { background: var(--ink); color: #fff; border-radius: 10px; }
html[data-theme="pro"] .empty b { font-family: var(--f-d); }
html[data-theme="pro"] .selbar { border-radius: 14px; background: var(--ink); border: 1px solid #2a2e36; }
html[data-theme="pro"] .selbar > b { color: #fff; }
html[data-theme="pro"] .selbar .btn { border-radius: 9px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
html[data-theme="pro"] .selbar .btn.pri { background: #fff; border-color: #fff; color: var(--ink); }

/* ── 방 상세 · 카드 */
html[data-theme="pro"] .detail header { background: #fff; border-bottom: 1px solid var(--line); }
html[data-theme="pro"] .detail header h2 { font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
html[data-theme="pro"] .detail header .muted { color: var(--ink2); }
html[data-theme="pro"] .detail section h3 { color: var(--mute); font-weight: 800; font-size: 13px; }
html[data-theme="pro"] .offer { border-radius: 12px; border: 1px solid var(--line); background: #fff; }
html[data-theme="pro"] .offer .p { font-family: var(--f-d); font-weight: 800; font-size: 26px; color: var(--ink); letter-spacing: -.02em; }
html[data-theme="pro"] .offer .row > b { color: var(--ink); }
html[data-theme="pro"] .photos img { border-radius: 10px; }
html[data-theme="pro"] :is(.rc, .maplist .rc) { border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--depth); }
html[data-theme="pro"] :is(.rc, .maplist .rc) .p { font-family: var(--f-d); font-weight: 800; color: var(--ink); }
html[data-theme="pro"] .maplist .rc:hover { transform: none; border-color: #c7c7c1; }
html[data-theme="pro"] .maplist .rc.cur { outline: 2px solid var(--ink); }
html[data-theme="pro"] .maplist-head { background: var(--bg); }
html[data-theme="pro"] .ybmap { border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--depth); }

/* 지도 표시: 흰 동네 칸 · 검정 묶음 · 고른 건물은 검정 */
html[data-theme="pro"] .mk-dong { flex-direction: row; gap: 7px; padding: 7px 12px; border: 1px solid rgba(17, 19, 24, .1); border-radius: 10px; background: #fff; color: var(--ink); font: 700 13.5px var(--f-d); box-shadow: 0 4px 14px rgba(17, 19, 24, .18); }
html[data-theme="pro"] .mk-dong span { color: var(--ink); font-size: 13.5px; font-weight: 800; background: #ecebe6; border-radius: 999px; padding: 0 7px; }
html[data-theme="pro"] .mk-c { border-radius: 8px; background: var(--ink); padding: 4px 9px; font-weight: 800; }
html[data-theme="pro"] .mk-c span { color: #d6d6d0; }
html[data-theme="pro"] .mk-b { border: 1px solid rgba(17, 19, 24, .25); border-radius: 8px; padding: 3px 8px; font-weight: 800; }
html[data-theme="pro"] .mk-b span { color: var(--ink2); }
html[data-theme="pro"] .mk-b:hover { background: var(--gold-soft); }
html[data-theme="pro"] .mk-b.on { background: var(--gold); border-color: var(--gold); color: #fff; } html[data-theme="pro"] .mk-b.on span { color: #fff; }

/* ── PC 배치: 왼쪽 조건 칸(붙어 있음) + 오른쪽 결과, 상세는 오른쪽에서 밀려 나옴 */
@media (min-width: 900px) {
  html[data-theme="pro"] .top { height: var(--head); padding: 0 28px; gap: 28px; }
  html[data-theme="pro"] .room-workspace { max-width: 1920px; padding: 20px 28px 0; display: grid; grid-template-columns: 318px minmax(0, 1fr); grid-template-areas: "head head" "side main"; column-gap: 22px; align-items: start; }
  html[data-theme="pro"] .workspace-heading { grid-area: head; margin-bottom: 16px; }
  html[data-theme="pro"] .room-search { width: 560px; max-width: 52vw; }
  html[data-theme="pro"] .room-workspace > .filters { grid-area: side; position: sticky; top: calc(var(--head) + 14px); max-height: calc(100vh - var(--head) - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  html[data-theme="pro"] #main { grid-area: main; min-width: 0; }
  html[data-theme="pro"] .filter-top { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 12px 14px 14px; }
  html[data-theme="pro"] .reset-filters { align-self: flex-end; min-height: 28px; padding: 0 6px; font-size: 13px; }
  html[data-theme="pro"] .filter-row { display: block; padding: 14px; border-top: 1px solid var(--line2); }
  html[data-theme="pro"] .filter-top + .filter-row { padding-top: 14px; border-top: 0; }
  html[data-theme="pro"] .filter-row > b { display: block; padding: 0; margin-bottom: 9px; }
  html[data-theme="pro"] .filter-row > b:empty { display: none; }
  html[data-theme="pro"] .filter-row.area-sub { padding-top: 0; border-top: 0; }
  html[data-theme="pro"] .filter-controls { gap: 6px; }
  html[data-theme="pro"] .filter-basics { display: block; }
  html[data-theme="pro"] .filter-basics .filter-row:last-child .filter-controls { flex-direction: column; align-items: stretch; gap: 12px; }
  html[data-theme="pro"] .money-field { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 0; }
  html[data-theme="pro"] .money-field .num { width: 100%; }
  html[data-theme="pro"] .filter-bottom { display: block; margin-top: 0; padding: 14px; }
  html[data-theme="pro"] .quick-filters { margin-bottom: 10px; }
  html[data-theme="pro"] .filter-bottom > .btn { width: 100%; justify-content: center; border: 1px solid var(--line); background: #fff; }
  html[data-theme="pro"] #extra-filters .filter-row .sel { width: 100%; }
  html[data-theme="pro"] .bar { position: sticky; top: var(--head); z-index: 20; margin: 0 -2px; padding: 12px 2px 12px; background: var(--bg); }
  html[data-theme="pro"] .split, html[data-theme="pro"] .split.open { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html[data-theme="pro"] .split > .detail { position: fixed; top: var(--head); right: 0; bottom: 0; width: min(480px, 100vw); max-height: none; z-index: 70; border-radius: 16px 0 0 0; border: 1px solid var(--line); border-right: 0; box-shadow: -24px 0 60px rgba(17, 19, 24, .16); overflow-y: auto; animation: yb-slide .2s ease-out; }
  html[data-theme="pro"] .mapview { grid-template-columns: minmax(0, 1fr) 400px; }
  html[data-theme="pro"] .mapcol { top: calc(var(--head) + 66px); }
  html[data-theme="pro"] .ybmap { height: calc(100vh - var(--head) - 84px); }
  html[data-theme="pro"] .maplist, html[data-theme="pro"] .mapview .detail { max-height: calc(100vh - var(--head) - 84px); }
  html[data-theme="pro"] .mapview .detail { position: sticky; top: calc(var(--head) + 66px); }
}
@keyframes yb-slide { from { transform: translateX(28px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { html[data-theme="pro"] .split > .detail { animation: none; } }
@media (max-width: 899px) {
  html[data-theme="pro"] { --head: 112px; }
  html[data-theme="pro"] .kind-tabs { grid-template-columns: 1fr 1fr; width: 100%; padding: 10px 0; }
  html[data-theme="pro"] .money-presets { width: 100%; }
  html[data-theme="pro"] .top nav { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  html[data-theme="pro"] .top nav a { flex: none; padding: 9px 11px; font-size: 14.5px; }
  html[data-theme="pro"] .filter-top { flex-wrap: wrap; } html[data-theme="pro"] .filter-top .kind-tabs { flex: 1 1 100%; }
}

/* ── 들어오기 전 화면 */
html[data-theme="pro"] .auth { background: var(--bg); }
html[data-theme="pro"] .auth .side { background: radial-gradient(ellipse 80% 60% at 100% 100%, rgba(168, 132, 76, .2), transparent 60%), linear-gradient(160deg, #1d2027, #111318); color: #fff; }
html[data-theme="pro"] .auth .side .logo { color: #fff; }
html[data-theme="pro"] .auth .side .logo i { box-shadow: inset 0 0 0 6px var(--gold), inset 0 0 0 10px #fff; }
html[data-theme="pro"] .auth .side h1 { color: #fff; font-weight: 800; letter-spacing: -.04em; }
html[data-theme="pro"] .auth-subtitle { color: #e2d3b6; font-weight: 600; }
html[data-theme="pro"] .auth .side ul { color: #dcdee2; font-weight: 500; }
html[data-theme="pro"] .auth .side li::before { background: var(--gold); }
html[data-theme="pro"] .auth .side > p { color: #9a9ea6 !important; }
html[data-theme="pro"] .auth-title { font-weight: 800; letter-spacing: -.035em; }
html[data-theme="pro"] .auth form > .btn.pri { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 12px; }

/* ── 고객 · 알림 · 운영자 */
html[data-theme="pro"] .yb3-page { background: var(--bg); }
html[data-theme="pro"] .yb3-item:hover { background: #f8f8f6; } html[data-theme="pro"] .yb3-item.on { background: var(--gold-soft); box-shadow: inset 3px 0 var(--ink); }
html[data-theme="pro"] .yb3-room { border-radius: 12px; border-color: var(--line); background: #fff; }
html[data-theme="pro"] .yb3-room .p { font-family: var(--f-d); font-weight: 800; }
html[data-theme="pro"] .ops aside { background: #111318; }
html[data-theme="pro"] .ops aside a { border-radius: 9px; color: #c4c7cd; }
html[data-theme="pro"] .ops aside a.on { background: #23262e; color: #fff; box-shadow: inset 3px 0 var(--gold); }
html[data-theme="pro"] .ops aside a b, html[data-theme="pro"] .ops aside a.on b { background: #fff; color: var(--ink); }
html[data-theme="pro"] .tile .n { font-family: var(--f-d); font-weight: 800; color: var(--ink); }
html[data-theme="pro"] .tile.hot { background: var(--ink); color: #fff; border-color: var(--ink); } html[data-theme="pro"] .tile.hot .n { color: #fff; }

/* 거리뷰 (방 상세 맨 위) */
html[data-theme="pro"] .detail section.rv-sec, .detail section.rv-sec { padding: 12px 16px 14px; }
.rv { position: relative; height: 260px; border-radius: 12px; overflow: hidden; background: #e9e9e6; }
.rv-msg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 16px; color: var(--mute); font-size: 14px; text-align: center; }
.rv-acts { display: flex; gap: 6px; margin-top: 8px; }
@media (max-width: 899px) { .rv { height: 220px; } }
.rv-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rv-top .seg button { padding: 6px 12px; font-size: 13.5px; }
.rv.mm { height: 280px; }
/* 검색 로봇·느린 화면용 첫 소개 글 (yb/seo.py intro, 앱이 뜨면 바뀐다) */
.seo-intro { max-width: 760px; margin: 48px auto; padding: 0 20px; color: var(--ink2); font-size: 15px; line-height: 1.75; }
.seo-intro h1 { margin: 0 0 12px; color: var(--ink); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.seo-intro h2 { margin: 22px 0 6px; color: var(--ink); font-size: 18px; font-weight: 800; }
.seo-intro ul { margin: 0; padding-left: 20px; } .seo-intro .seo-loading { margin-top: 20px; color: var(--mute); }
/* 지도에 못 찍는 방 안내 (2026-11-14 '동 없음') — .mapcol 은 sticky(=위치 기준이 됨)라 안내를 그 위에 겹쳐 띄운다 */
.map-nogeo.full { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(236, 234, 229, .72); border-radius: 16px; }
.map-nogeo-card { max-width: 380px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--depth-up); text-align: center; }
.map-nogeo-card b { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 800; color: var(--ink); }
.map-nogeo-card p { margin: 0 0 12px; color: var(--ink2); font-size: 14px; line-height: 1.6; }
.map-nogeo.bar-note { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #e9c98a; border-radius: 12px; background: #fff8e8; color: #6b4f1d; font-size: 13.5px; font-weight: 700; box-shadow: var(--depth); }
.map-nogeo.bar-note span { flex: 1; }
.nogeo-link { padding: 0; border: 0; background: none; color: #8a5410; font: 700 13px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html[data-mode="dark"] .map-nogeo.full { background: rgba(17, 19, 24, .6); }
html[data-mode="dark"] .map-nogeo-card { background: var(--card); }
html[data-mode="dark"] .map-nogeo.bar-note { background: #2b2516; border-color: #5a4a26; color: #f3d9a4; }
/* 거리뷰 크게 (2026-11-14 사장님 "건물명 누르면 나오는 거리뷰가 너무 작아"): PC 에서 오른쪽 상세 칸을 넓히고 거리뷰·지도를 화면 높이의 절반쯤으로 */
@media (min-width: 900px) {
  html[data-theme="pro"] .split > .detail { width: min(700px, 52vw); }
  html[data-theme="pro"] .split > .detail .rv, html[data-theme="pro"] .split > .detail .rv.mm { height: clamp(360px, 54vh, 600px); }
}
.mk-me { padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); position: relative; }
.mk-me::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.dnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line2, #eee); background: #fafaf8; }
.dnav .btn[disabled] { opacity: .4; cursor: default; }
.sb { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.sb-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid var(--line, #e3e3df); border-radius: 10px; background: #fff; color: var(--ink2); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.sb-row:hover { border-color: #c7c7c1; background: #fafaf8; }
.sb-row.on { border-color: var(--ink); box-shadow: inset 3px 0 var(--ink); cursor: default; }
.sb-row b { min-width: 52px; color: var(--ink); font-weight: 800; }
.sb-row .p { color: var(--ink); font-weight: 800; font-size: 15px; white-space: nowrap; }
.sb-row .grow { flex: 1; }
.addr-link { display: block; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.addr-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.room-title:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 지역 줄 머리: '지역' + 눈에 띄는 [지도로 보기] */
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.row-head > b { font-size: 13.5px; font-weight: 800; color: var(--ink2); }
.map-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font: inherit; font-size: 14.5px; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 12px rgba(17, 19, 24, .24); transition: background .12s, transform .12s; }
.map-btn:hover { background: #2a2e36; transform: translateY(-1px); }
.map-btn .ic { display: inline-flex; color: #e3cfa6; }
.map-btn.on { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.map-btn.on .ic { color: var(--ink); }
@media (max-width: 899px) { .filter-row.area-row { display: block; } .map-btn { height: 40px; } }

/* 지역: 시·군 → 생활권 → 동네 */
.city-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.city-tabs .city { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink2); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.city-tabs .city:hover { border-color: #c7c7c1; }
.city-tabs .city small { padding: 1px 7px; border-radius: 999px; background: #ecebe6; color: var(--ink); font-size: 12.5px; font-weight: 800; }
.city-tabs .city.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.city-tabs .city.on small { background: rgba(255, 255, 255, .2); color: #fff; }
.area-list { display: flex; flex-direction: column; gap: 8px; }
.area-block { padding: 8px; border: 1px solid var(--line2); border-radius: 12px; background: #fafaf8; }
.area-block.on { border-color: #cfcfca; background: #fff; }
.area-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 2px 2px 8px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.area-head .nm { color: var(--ink); font-size: 14.5px; font-weight: 800; }
.area-head small { padding: 1px 7px; border-radius: 999px; background: #ecebe6; color: var(--ink); font-size: 12.5px; font-weight: 800; }
.area-head .all-tag { margin-left: auto; padding: 2px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink2); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.area-head:hover .all-tag { border-color: var(--ink); }
.area-head.part .all-tag { border-color: var(--ink); color: var(--ink); }
.area-head.all .all-tag { border-color: var(--ink); background: var(--ink); color: #fff; }
/* 생활권 접기 (2026-11-14): 왼쪽 ▾ 로 동네 칩을 접는다. 접으면 머리줄만, 일부 고른 동네는 이름으로 */
.area-top { display: flex; align-items: center; gap: 6px; }
.area-top .area-head { flex: 1; min-width: 0; }
.area-fold { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -6px 0 0; padding: 0; border: 1px solid #cfcdc6; border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 1px 2px rgba(17, 19, 24, .08); }
.area-fold:hover, .area-fold:focus-visible { border-color: var(--ink); background: var(--ink); color: #fff; outline: none; }
.area-fold .ic { display: grid; place-items: center; line-height: 0; }
.area-fold .chev { display: block; transition: transform 140ms ease; }
.area-block.shut .area-fold .chev { transform: rotate(-90deg); }
.area-block.shut .dong-chips { display: none; }
.area-block.shut .area-head { padding-bottom: 2px; }
.area-block.shut .area-fold { margin-top: 0; }
.area-picked { padding: 0 4px 6px 34px; color: var(--ink); font-size: 12.5px; font-weight: 800; }
.area-block.shut .area-picked { padding-bottom: 2px; }
.area-block:not(.shut) .area-picked { display: none; }  /* 펴져 있으면 칩에서 보이니 이름 줄은 숨긴다 */
.area-fold-all { display: flex; justify-content: flex-end; margin: 6px 2px 2px; }
.area-fold-all .linkish { padding: 0; border: 0; background: none; color: var(--ink2); font: 700 12.5px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html[data-mode="dark"] .area-fold { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] .area-fold:hover { background: #eef0f3; color: #111318; }
@media (prefers-reduced-motion: reduce) { .area-fold .chev { transition: none; } }
.dong-chips { display: flex; flex-wrap: wrap; gap: 5px; }
html[data-theme="pro"] .dong-chips .chip { min-height: 32px; padding: 0 10px; font-size: 13.5px; }

/* 지도 건물 표시: 흰 지도 위에서도 잘 보이게 진한 핀 (2026-11-13 "다 확대했을 때 흰색이라 보기 힘들다") */
html[data-theme="pro"] .mk-b { position: relative; gap: 5px; padding: 4px 9px; border: 2px solid #fff; border-radius: 9px; background: var(--ink); color: #fff; font: 800 14px var(--f-d); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
html[data-theme="pro"] .mk-b span { color: #e4e2da; font: 700 12px var(--f-d); }
html[data-theme="pro"] .mk-b::before { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .2)); }
html[data-theme="pro"] .mk-b:hover { background: #2c313a; transform: scale(1.06); z-index: 20; }
html[data-theme="pro"] .mk-b:hover::before { border-top-color: #2c313a; }
html[data-theme="pro"] .mk-b.on { background: #8a6a35; }
html[data-theme="pro"] .mk-b.on::before { border-top-color: #8a6a35; }
html[data-theme="pro"] .mk-b.on span { color: #fff; }
html[data-theme="pro"] .mk-c { border: 2px solid #fff; border-radius: 999px; padding: 5px 11px; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); font-size: 14px; }

/* ── 첫 화면 (홈): 왼쪽 지도·현황, 오른쪽 로그인/내 정보 (2026-11-13) */
.land-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.land-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 28px; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line); }
.land-tag { color: var(--mute); font-size: 14px; font-weight: 600; }
.land { width: 100%; max-width: 1640px; margin: 0 auto; padding: 22px 28px 34px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.land-head { display: flex; align-items: flex-end; gap: 30px; margin-bottom: 12px; }
.land-k { color: var(--mute); font-size: 13.5px; font-weight: 700; }
.land-big { color: var(--ink2); font-size: 16px; font-weight: 700; }
.land-big b { margin-right: 3px; color: var(--ink); font-size: 36px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.land-stat.new .land-big b { color: #b42318; }
.land-stat.gone .land-big b { color: #1d4ed8; }  /* 빠진 공실 = 파란 마이너스 (들어온 공실 빨강과 짝) */
.land-stat.gone { cursor: help; }
/* 오늘 늘고 빠진 곳 상세보기 (작은 단추 + 떠 있는 칸) */
.land-chg-wrap { position: relative; align-self: flex-end; margin-bottom: 9px; margin-left: -14px; }
.land-chg-btn { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink2); font: 700 12.5px var(--font); cursor: pointer; }
.land-chg-btn::after { content: " ▾"; font-size: 10px; color: var(--mute); }
.land-chg-btn[aria-expanded="true"], .land-chg-btn:hover { border-color: var(--ink); color: var(--ink); }
.land-chg { position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; width: 340px; max-height: min(60vh, 460px); overflow: auto; padding: 12px 14px; border: 1px solid #cfccc3; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(17, 19, 24, .18); }
.land-chg[hidden] { display: none; }
.chg-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 14px; }
.chg-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 2px 0 8px; } .chg-tabs button { padding: 5px 8px; font-size: 13px; }
.chg-x { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--mute); cursor: pointer; padding: 0 2px; }
.chg-row { padding: 8px 0; border-top: 1px solid var(--line); }
.chg-a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.chg-n { display: inline-flex; gap: 8px; font-weight: 800; font-variant-numeric: tabular-nums; }
.chg-new { color: #b42318; font-weight: 800; } .chg-gone { color: #1d4ed8; font-weight: 800; }
.chg-d { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; color: var(--ink2); font-size: 12.5px; }
.chg-d .chg-new, .chg-d .chg-gone { font-weight: 700; }
.chg-empty { margin: 8px 0; color: var(--ink2); font-size: 13.5px; }
.chg-foot { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--mute); font-size: 12px; line-height: 1.5; }
html[data-mode="dark"] :is(.land-chg-btn, .land-chg) { background: var(--card); border-color: var(--line); color: var(--ink2); }
html[data-mode="dark"] .chg-new { color: #ff8a7a; } html[data-mode="dark"] .chg-gone { color: #7aa7ff; }
@media (max-width: 899px) { .land-chg-wrap { margin-left: 0; } .land-chg { width: min(340px, calc(100vw - 32px)); } }
.land-upd { margin-left: auto; padding-bottom: 6px; }
.land-mapwrap { position: relative; }
.land-map { height: min(66vh, 640px); min-height: 420px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #eceae5; box-shadow: var(--depth); }
.land-hint { position: absolute; left: 14px; top: 14px; z-index: 5; padding: 8px 12px; border-radius: 10px; background: rgba(17, 19, 24, .9); color: #fff; font-size: 13.5px; font-weight: 700; pointer-events: none; }
.land-sub { margin: 20px 0 10px; font-size: 17px; font-weight: 800; }
.land-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.land-city { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--depth); }
.land-city-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.land-city-h b { color: var(--ink); font-size: 17px; font-weight: 800; }
.land-city-h span { color: var(--ink2); font-weight: 800; }
.land-city-h .new { color: #b42318; font-size: 13px; }
.land-area-list { display: flex; flex-wrap: wrap; gap: 6px; }
.land-area { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.land-area b { color: var(--ink); font-weight: 800; }
.land-area small { color: #b42318; font-size: 12px; font-weight: 800; }
.land-area:hover { border-color: var(--ink); }
.land-right { position: sticky; top: 86px; }
.land-right-in { display: flex; flex-direction: column; gap: 12px; }
.land-card { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--depth-up); }
.land-card h2 { margin: 0 0 14px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.land-card .tabs { margin-bottom: 14px; }
.land-info { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: 14px; color: var(--ink2); }
.land-info > b { display: block; margin: 0 0 6px; color: var(--ink); font-size: 14.5px; font-weight: 800; }
.land-info > b + * { margin-bottom: 12px; }
.land-info ul { margin: 0; padding-left: 18px; line-height: 1.75; }
.land-plans .row { gap: 6px; padding: 4px 0; } .land-plans b { color: var(--ink); }
.land-me { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.land-me .avatar { width: 42px; height: 42px; font-size: 17px; }
.land-me b { color: var(--ink); font-size: 17px; font-weight: 800; }
.land-ent { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: var(--soft, #f1f1ee); color: var(--ink2); font-size: 14px; font-weight: 600; }
.land-ent b { color: var(--ink); font-weight: 800; }
.land-search { display: flex; gap: 6px; margin-bottom: 12px; }
.land-search .in { flex: 1; min-width: 0; height: 44px; }
.land-search .btn { height: 44px; }
.land-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.land-quick .btn { justify-content: center; }
/* 홈 지도: 지역명 아래에 한 개의 부드러운 아우라. 실제 범위를 뜻하는 경계선은 없다. */
.mk-area-aura-anchor { position: relative; width: 0; height: 0; pointer-events: none; }
.mk-area-aura { position: absolute; left: 0; top: 0; width: 96px; height: 96px; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.8); background: radial-gradient(circle, rgba(218, 192, 126, .52) 0, rgba(225, 200, 142, .4) 28%, rgba(234, 214, 169, .24) 49%, rgba(242, 226, 192, .08) 65%, transparent 74%); transition: opacity 180ms ease, transform 240ms ease; }
.mk-area-aura.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mk-area { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 11px; border: 1px solid rgba(255, 255, 255, .95); border-radius: 10px; background: #20252c; color: #fff; font: 700 14px var(--f-d); white-space: nowrap; box-shadow: 0 1px 4px rgba(17, 19, 24, .18); cursor: pointer; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.mk-area span { min-width: 28px; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.mk-area small { color: #ffb4ab; font-size: 12px; font-weight: 800; }
html[data-theme="pro"] :is(.land-map, .ybmap) .mk-area:is(:hover, :focus-visible, :active) { background: #ead9af; color: #24271f; border-color: #c3a76a; transform: none; box-shadow: 0 1px 4px rgba(17, 19, 24, .18); }
html[data-theme="pro"] :is(.land-map, .ybmap) .mk-area:is(:hover, :focus-visible, :active) span { background: rgba(23, 26, 23, .1); color: #171a17; }
html[data-theme="pro"] :is(.land-map, .ybmap) .mk-area:is(:hover, :focus-visible, :active) small { color: #9b281a; }
.mk-area:focus-visible { outline: 2px solid #171a17; outline-offset: 2px; }
@media (hover: none) { .mk-area { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .mk-area, .mk-area-aura { transition: none; } }
/* 보조원 아이디 고르기 · 다른 기기 로그인 안내 (2026-11-14) — 숫자 크게, 한 번에 누르기 */
.seat-pick { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: var(--gold-soft, #f6f0e5); }
.seat-pick > b { font-size: 16px; color: var(--ink); }
.seat-step { display: inline-flex; align-items: center; gap: 8px; }
.seat-step .btn { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 22px; font-weight: 800; line-height: 1; }
.seat-step .btn[disabled] { opacity: .35; cursor: default; }
.seat-n { min-width: 56px; text-align: center; font-size: 22px; font-weight: 800; color: var(--ink); }
.seat-warn { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft, #f7ecd9); color: var(--warn, #8a5410); font-size: 14px; font-weight: 700; }
.seat-warn a { color: inherit; text-decoration: underline; }
.land-seat { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--gold-soft, #f6f0e5); }
.land-seat b { color: var(--ink); font-size: 15px; font-weight: 800; } .land-seat span { color: var(--ink2); font-size: 12.5px; font-weight: 600; }
.lc-kicked { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft, #f7ecd9); color: var(--warn, #8a5410); font-size: 14px; font-weight: 700; line-height: 1.5; }
html[data-mode="dark"] :is(.seat-pick, .land-seat) { background: var(--soft); }
@media (max-width: 899px) {
  .land-top { padding: 0 14px; } .land-tag { display: none; }
  .land { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .land-right { position: static; order: -1; }
  .land-head { flex-wrap: wrap; gap: 14px 24px; } .land-big b { font-size: 30px; } .land-upd { margin-left: 0; width: 100%; }
  .land-map { height: 52vh; min-height: 300px; }
  .land-areas { grid-template-columns: 1fr; }
}

/* 홈을 PC 한 화면에 (2026-11-13 "아래 잘리는 부분까지 모두 들어오게") */
@media (min-width: 900px) {
  .land { height: calc(100vh - 64px); grid-template-rows: minmax(0, 1fr); padding-top: 16px; padding-bottom: 16px; }
  .land-left { display: flex; flex-direction: column; min-height: 0; }
  .land-head { flex: none; margin-bottom: 10px; }
  .land-big b { font-size: 32px; }
  .land-mapwrap { flex: 1; min-height: 0; }
  .land-map { height: 100%; min-height: 0; }
  .land-right { position: static; height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; }
  .land-right > * { flex: none; }
  .land-card { padding: 18px 20px; }
  .land-areas-box { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .land-areas-box .land-sub { margin: 0 0 10px; font-size: 15px; }
  .land-areas-box .land-areas { grid-template-columns: 1fr; gap: 10px; }
  .land-areas-box .land-city { padding: 0; border: 0; box-shadow: none; }
  .land-areas-box .land-city + .land-city { padding-top: 10px; border-top: 1px solid var(--line2); }
  .land-areas-box .land-city-h { margin-bottom: 7px; }
  .land-areas-box .land-city-h b { font-size: 15.5px; }
  .land-areas-box .land-area { height: 32px; padding: 0 9px; font-size: 13.5px; }
}
@media (max-width: 899px) { .land-areas-box .land-sub { margin-top: 4px; } }

/* 첫 화면 오른쪽: 로그인 · 가입 3단계 · 비교표 · 이용권 · 시연 신청 (영업용) */
.lc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.lc-head h2 { margin: 0 !important; }
.lc-tag { padding: 2px 8px; border-radius: 6px; background: var(--soft, #f1f1ee); color: var(--ink2); font-size: 12.5px; font-weight: 700; }
.lc-back { color: var(--ink2); font-size: 14px; font-weight: 700; text-decoration: none; }
.login-opts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 12px; font-size: 13.5px; color: var(--ink2); }
.login-opts label { gap: 6px; font-weight: 600; cursor: pointer; }
.login-opts a { color: var(--mute); font-weight: 600; text-decoration: none; }
.login-opts a:hover { color: var(--ink); text-decoration: underline; }
.lc-join { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line2, #eee); }
.lc-join .btn { justify-content: center; font-weight: 800; border: 1.5px solid var(--ink); }
.lc-staff { align-self: center; color: var(--mute); font-size: 13px; font-weight: 600; }
.land-pitch { padding: 18px 20px; border-radius: 16px; background: linear-gradient(160deg, #1f232b, #111318); color: #fff; }
.lp-k { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.lp-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
.lp-nums > div { padding: 9px 8px; border-radius: 10px; background: rgba(255, 255, 255, .08); text-align: center; }
.lp-nums b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.lp-nums span { color: #c9ccd2; font-size: 12.5px; font-weight: 600; }
.lp-steps { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: s; }
.lp-steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; counter-increment: s; }
.lp-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d9c29a; color: #111318; font-size: 12.5px; font-weight: 800; }
.lp-steps span { margin-left: auto; color: #c9ccd2; font-size: 13px; }
.lp-trial { margin-bottom: 10px; padding: 7px 10px; border-radius: 9px; background: rgba(217, 194, 154, .18); color: #ecdcbc; font-size: 13.5px; font-weight: 800; text-align: center; }
.land-pitch .lp-trial { width: 100%; min-height: 44px; border: 1px solid #ae956b; cursor: pointer; }
.land-pitch .lp-trial:hover { background: rgba(217, 194, 154, .30); }
.land-pitch .lp-trial:focus-visible { outline: 2px solid #ecdcbc; outline-offset: 3px; }
.lp-cta { width: 100%; justify-content: center; border: 0; background: #fff; color: #111318; font-weight: 800; }
.lp-cta:hover { background: #f1efe9; }
.land-cmp table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 13px; }
.land-cmp th, .land-cmp td { padding: 7px 6px; border-bottom: 1px solid var(--line2, #eee); text-align: left; vertical-align: top; line-height: 1.45; white-space: pre-line; }
.land-cmp thead th { color: var(--mute); font-size: 12px; font-weight: 700; }
.land-cmp tbody th { width: 62px; color: var(--ink); font-weight: 800; }
.land-cmp td { color: var(--mute); }
.land-cmp .us { color: var(--ink); font-weight: 700; background: #f8f6f1; }
.land-cmp thead .us { color: var(--ink); font-weight: 800; }
.cmp-more b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13.5px; }
.land-bank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 8px 0 4px; padding: 9px 11px; border-radius: 10px; background: var(--soft, #f1f1ee); }
.land-bank b { color: var(--ink); }
.lp-call { margin: 6px 0 0; font-weight: 700; } .lp-call a { color: var(--ink); }
.land-inq { display: flex; flex-direction: column; gap: 8px; }
.land-inq > b { margin-bottom: 0 !important; }
.land-inq > .hint { margin: -4px 0 2px; }
.land-inq .in, .land-inq .sel { min-height: 42px; font-size: 14.5px; }
.land-inq label.row { gap: 6px; align-items: flex-start; font-size: 13px; }
/* 머리말 큰 단추 '방문 시연 신청' → 같은 양식이 창으로 뜬다 (2026-11-14 사장님 "사무소 가입 옆에 큼직하게") */
html[data-theme="pro"] .land-top .btn.demo-cta { min-height: 46px; padding: 0 22px; gap: 10px; border: 1.5px solid #ae956b; border-radius: 12px; background: linear-gradient(160deg, #2a2f39, #111318); color: #f5e8ca; font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; box-shadow: 0 3px 12px rgba(17, 19, 24, .22); }
html[data-theme="pro"] .land-top .btn.demo-cta:hover { background: linear-gradient(160deg, #363c48, #1b1e25); }
.land-top .demo-cta::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e6cc92; box-shadow: 0 0 0 4px rgba(230, 204, 146, .24); }
html[data-theme="pro"][data-mode="dark"] .land-top .btn.demo-cta { background: #e6cc92; border-color: #e6cc92; color: #111318; }
html[data-theme="pro"][data-mode="dark"] .land-top .demo-cta::before { background: #111318; box-shadow: 0 0 0 4px rgba(17, 19, 24, .16); }
@media (max-width: 600px) {
  .land-top { gap: 8px; }
  html[data-theme="pro"] .land-top .btn.demo-cta { min-height: 40px; padding: 0 13px; font-size: 15px; }
  .land-top .demo-cta .dc-long, .land-top .demo-cta::before, .land-top a.btn.ghost { display: none; }  /* 좁은 화면: '시연 신청'만, 문의 전화는 아래 이용권 칸에 있음 */
}
.modal.demo-modal > div { max-width: 440px; }
body:has(> .modal.demo-modal) .float-btns { z-index: 70; }  /* 좁은 화면에서 떠 있는 단추가 창의 '닫기'를 가리지 않게 (창 z-index 는 그대로 — 약관 창이 그 위에 떠야 함) */
.demo-form h2 { margin: 0 !important; }
.demo-form > .hint { margin: 0 0 6px; font-size: 14.5px; }
.demo-form .in, .demo-form .sel { min-height: 48px; font-size: 16px; }
.demo-form label.row { font-size: 14px; }
.demo-form .btn.pri { min-height: 52px; font-size: 16.5px; }
@media (min-width: 900px) { .land { align-items: stretch; } .land-left { height: 100%; } }
.land-top .logo, .top .logo { text-decoration: none; cursor: pointer; } .land-top .logo:hover, .top .logo:hover { opacity: .8; }

/* 머리말 단추: 모바일 미리보기 · 다크 모드 */
.mode-btns { display: inline-flex; gap: 6px; }
.mode-btn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.mode-btn:hover { border-color: #c7c7c1; color: var(--ink); }
.mode-btn .ic { display: inline-flex; }
.yb-phone-wrap { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(17, 19, 24, .55); }
.yb-phone { display: flex; flex-direction: column; width: 414px; height: min(880px, 94vh); padding: 10px; border-radius: 34px; background: #111318; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.yb-phone-bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; color: #fff; }
.yb-phone-bar .hint { color: #a3a7b0; }
.yb-phone-bar .btn { background: #23262e; border-color: #343842; color: #fff; }
.yb-phone iframe { flex: 1; width: 390px; margin: 0 auto; border: 0; border-radius: 24px; background: #fff; }
@media (max-width: 899px) { .mode-mobile { display: none !important; } .mode-btn span { display: none; } .mode-btn { width: 34px; justify-content: center; padding: 0; } }
.land-plans .row { display: grid; grid-template-columns: 1fr auto 92px; align-items: baseline; } .land-plans .pm { text-align: right; }

/* 마스터 계정 표시 */
.master-tag { color: var(--ink); font-weight: 800; }
.land-ent.master { background: linear-gradient(160deg, #1f232b, #111318); color: #e6e2d8; }
.land-ent.master b { color: #e3cfa6; }
.land-ops { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; height: auto; min-height: 50px; margin-top: 6px; padding: 7px 12px; border: 1.5px solid var(--ink) !important; font-weight: 800; }
.land-ops small { color: var(--mute); font-size: 12px; font-weight: 600; }
.badge.master-badge { background: var(--ink); color: #e3cfa6; text-decoration: none; }
html[data-mode="dark"] .land-ent.master { background: #23272f; }
html[data-mode="dark"] .badge.master-badge { background: #eef0f3; color: #8a6a35; }

/* 아이디·비밀번호 찾기 창 */
.modal .rec { min-width: min(520px, 86vw); }
.rec .tabs { margin: 4px 0 14px; }
.rec-form label.f { margin-bottom: 10px; }
.rec-out { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--soft, #f1f1ee); }
.rec-out:empty { display: none; }
.rec-out ul { margin: 6px 0; padding-left: 18px; }
.rec-id { font-size: 16px; letter-spacing: .04em; }
.rec-foot { margin-top: 14px; line-height: 1.6; }
.land-nudge { display: block; margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--warn-soft, #f7ecd9); color: var(--warn, #8a5410); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.land-nudge:hover { text-decoration: underline; }

/* ── 메모장 · 동선 짜기 (2026-11-13) */
.route-page { max-width: 1760px; }
.route-head h1 { margin-bottom: 4px; }
.route-grid { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.route-side { display: flex; flex-direction: column; gap: 12px; }
.route-side .card { padding: 16px 18px; }
.route-side h2 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.rt-base-now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: var(--soft, #f1f1ee); }
.rt-pin { padding: 2px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.rt-find { gap: 6px; margin-bottom: 8px; } .rt-find .in { flex: 1; min-width: 0; height: 42px; }
.route-base .row { gap: 6px; flex-wrap: wrap; }
.btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rt-places { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.rt-place { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.rt-place:hover { border-color: var(--ink); }
.route-stops .row { gap: 8px; align-items: center; margin-bottom: 8px; } .route-stops h2 { margin: 0; }
.rt-sum { margin-bottom: 8px; padding: 9px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; }
.rt-sum b { font-size: 16px; }
.rt-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.rt-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; }
.rt-item:hover { border-color: #c7c7c1; } .rt-item.on { border-color: var(--ink); box-shadow: inset 3px 0 #c9a463; }
.rt-no { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }
.rt-no.dot { width: 10px; height: 10px; margin-top: 6px; background: #9a9a94; }
/* 순번 바꾸기 (2026-11-14): 번호 동그라미가 고르는 칸, 줄은 끌어서 옮긴다 */
select.rt-no-sel { -webkit-appearance: none; appearance: none; padding: 0; border: 0; text-align: center; text-align-last: center; font-family: inherit; line-height: 26px; cursor: pointer;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(17, 19, 24, .18); }
select.rt-no-sel:hover, select.rt-no-sel:focus-visible { background: #c9a463; color: #111318; outline: none; }
select.rt-no-sel option { background: #fff; color: #111318; }
.rt-item[draggable="true"] { cursor: grab; } .rt-item.dragging { opacity: .45; cursor: grabbing; }
.rt-item.drop-before { box-shadow: 0 -3px 0 #c9a463; } .rt-item.drop-after { box-shadow: 0 3px 0 #c9a463; }
.rt-order-hint { margin: 2px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--mute); }
.rt-order-hint.manual { color: #8a5410; } .rt-order-hint.manual b { color: #8a5410; }
.rt-from { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--gold-soft, #f6f0e5); color: #6b4f1d; font-size: 13px; font-weight: 800; vertical-align: 2px; }
.rt-need-base { color: #8a5410 !important; font-weight: 700; }
/* 내비 연결 (2026-11-14): 집마다 [내비] · 전체 동선 내비 · 앱 고르는 창 */
.rt-navi { padding: 3px 10px; border: 1px solid #1f4fa3; border-radius: 999px; background: #fff; color: #1f4fa3; font: 800 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.rt-navi:hover { background: #1f4fa3; color: #fff; }
.rt-back .rt-navi { margin-left: 8px; } .rt-back .rt-leg-m + .rt-navi { margin-left: 8px; } .rt-back > .rt-navi:only-of-type { margin-left: auto; }
.rt-step-text .rt-navi { margin-left: 4px; }
.rt-navi-all { display: block; margin-top: 8px; padding: 6px 12px; border: 0; border-radius: 8px; background: #c9a463; color: #111318; font: 800 13.5px var(--font); cursor: pointer; }
.rt-navi-all:hover { background: #e0c48a; }
.modal.navi-modal > div { max-width: 420px; }
.navi-modal h2 { margin: 0; font-size: 18px; }
.navi-dest { margin: 6px 0 12px; font-size: 14.5px; color: var(--ink2); } .navi-dest b { color: var(--ink); }
.navi-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 8px; }
.navi-app { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font: inherit; }
.navi-app b { font-size: 15.5px; font-weight: 800; color: var(--ink); } .navi-app small { font-size: 12px; color: var(--mute); font-weight: 700; }
.navi-app.n-kakao { border-color: #f0d800; background: #fffbe0; } .navi-app.n-naver { border-color: #03c75a; background: #effbf4; } .navi-app.n-tmap { border-color: #3d6cff; background: #eef2ff; }
.navi-app:hover { box-shadow: 0 2px 8px rgba(17, 19, 24, .14); }
.navi-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.navi-qr:empty { display: none; }
.navi-qr-img { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; min-height: 220px; display: grid; place-items: center; }
.navi-qr .hint { margin: 0; text-align: center; } .navi-qr .hint.warn { color: #8a5410; font-weight: 700; }
.navi-web { margin-top: 10px; }
html[data-mode="dark"] :is(.rt-navi, .navi-app) { background: var(--card); } html[data-mode="dark"] .navi-qr-img { background: #fff; }
.rt-room { position: relative; display: flex; flex-direction: column; padding-right: 22px; } .rt-room + .rt-room { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line2); }
.rt-room b { color: var(--ink); font-size: 14.5px; } .rt-room .hint { font-size: 12.5px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }  /* 화면에는 안 보이고 검색 로봇·화면 읽기 프로그램만 읽는 글 */
.rt-room .rt-secret { margin-top: 3px; font-size: 12.5px; color: var(--ink2, #555); line-height: 1.45; word-break: break-all; }  /* 우리 사무소 비번·메모 (동선 글·카톡에도 들어감) */
.rt-room .rt-secret b { font-size: 12.5px; color: #b45309; font-weight: 800; }
.rt-x { position: absolute; right: 0; top: 0; border: 0; background: none; color: var(--mute); font-size: 14px; cursor: pointer; }
.rt-item > .rt-x { position: static; margin-left: auto; }
.rt-x:hover { color: var(--bad, #a92e25); }
.rt-leg { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.rt-leg a, .rt-back a, .rt-step-text a { color: var(--blue, #1f4fa3); font-weight: 700; }
.rt-back { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 10px; border-radius: 11px; background: var(--soft, #f1f1ee); font-weight: 700; }
.rt-back a { margin-left: auto; }
.rt-unknown { margin-top: 8px; }
.route-memo { width: 100%; min-height: 180px; font-size: 13.5px; line-height: 1.7; font-family: inherit; }
.route-map { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 8px; }
.route-map-box { height: calc(100vh - 150px); min-height: 480px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #eceae5; box-shadow: var(--depth); }
.rt-steps { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--depth); font-size: 14px; }
.rt-step-text { min-width: 0; }
.rt-stop { display: flex; align-items: center; gap: 3px; min-width: 30px; height: 30px; padding: 0 9px; border: 2px solid #fff; border-radius: 999px; background: #111318; color: #fff; font: 800 14px var(--f-d); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); cursor: pointer; justify-content: center; }
.rt-stop small { color: #d6d2c6; font-size: 11px; }
.rt-stop.on { background: #8a6a35; transform: scale(1.12); }
.rt-base-mk { position: relative; padding: 6px 10px; border-radius: 9px; background: #8a6a35; color: #fff; font-size: 12.5px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.rt-base-mk::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: #8a6a35; border-bottom: 0; }
.rt-dot { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #111318; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.selbar .route-go { background: #fff; color: #111318; border-color: #fff; font-weight: 800; }
html[data-mode="dark"] :is(.rt-item, .rt-place, .rt-steps) { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] :is(.rt-base-now, .rt-back) { background: var(--soft); }
html[data-mode="dark"] :is(.rt-sum, .rt-pin, .rt-no:not(.dot)) { background: #eef0f3; color: #111318; }
@media (max-width: 899px) { .route-grid { grid-template-columns: 1fr; } .route-map { position: static; order: -1; } .route-map-box { height: 50vh; min-height: 300px; } .rt-list { max-height: none; } }
/* 동선 총 거리·이동 시간 (2026-11-13 사장님 "총 몇 키로, 이동시간 얼마나") — 숫자는 크고 진하게 */
.rt-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 6px; }
.rt-total-k { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.rt-total .hint { color: #d9d6cc; font-size: 12.5px; }
.rt-leg-m { color: var(--ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.rt-back .rt-leg-m { margin-left: auto; } .rt-back .rt-leg-m + a { margin-left: 8px; }
html[data-mode="dark"] .rt-total-k { color: #111318; } html[data-mode="dark"] .rt-total .hint { color: #4d535c; }
.rt-arrow { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: #111318; color: #fff; font-size: 12px; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.3); pointer-events: none; } .rt-arrow.on { background: #8a6a35; } .rt-sum-note { margin-top: 4px; color: #e3cfa6; font-size: 12.5px; }

/* ── 커뮤니티 (2026-11-13) */
.comm-page { max-width: 1500px; }
.comm-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.comm-head h1 { margin-bottom: 4px; }
.comm-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.comm-search { display: flex; gap: 6px; margin-left: auto; } .comm-search .in { width: 240px; height: 38px; }
.comm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 16px; align-items: start; }
.comm-list { padding: 4px 0 !important; }
.comm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line2); background: none; color: var(--ink2); font: inherit; text-align: left; cursor: pointer; }
.comm-row:last-child { border-bottom: 0; } .comm-row:hover { background: #fafaf8; } .comm-row.on { background: var(--gold-soft, #f6f0e5); box-shadow: inset 3px 0 var(--ink); }
.comm-row b { display: block; color: var(--ink); font-size: 15px; font-weight: 800; }
.comm-cat { flex: none; display: inline-block; padding: 3px 8px; border-radius: 7px; font-size: 12px; font-weight: 800; white-space: nowrap; background: #ecebe6; color: #2e333b; }
.comm-cat.c-caution { background: #fde8e4; color: #a92e25; } .comm-cat.c-fee { background: #e7f1ec; color: #1e6b47; } .comm-cat.c-coop { background: #e6edf9; color: #1f4fa3; }
/* 시청 점검 (2026-11-14): 분류 이름표 + 하루 안에 올라온 소식을 알리는 띠 */
.comm-cat.c-inspect { background: #111318; color: #fff; }
.comm-alarm { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; width: 100%; margin-bottom: 12px; padding: 12px 16px; border: 0; border-radius: 12px; background: #a92e25; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.comm-alarm b { font-size: 17px; font-weight: 800; } .comm-alarm span { font-size: 14px; font-weight: 600; opacity: .92; }
.comm-alarm:hover { background: #8f2219; }
.comm-cnt { flex: none; color: var(--ink); font-size: 12.5px; font-weight: 800; }
.comm-side { position: sticky; top: 80px; }
.comm-side .card { padding: 18px 20px; }
.comm-post h2 { margin: 10px 0 4px; font-size: 20px; font-weight: 800; }
.comm-body { margin: 14px 0; color: var(--ink); font-size: 15px; line-height: 1.75; white-space: pre-wrap; }
.comm-acts { justify-content: flex-end; margin-bottom: 8px; }
.comm-post h3 { margin: 6px 0 8px; font-size: 14px; font-weight: 800; color: var(--mute); }
.comm-comments { display: flex; flex-direction: column; gap: 8px; max-height: 38vh; overflow-y: auto; margin-bottom: 10px; }
.comm-c { padding: 9px 11px; border-radius: 10px; background: var(--soft, #f1f1ee); font-size: 14px; }
.comm-c .row { gap: 6px; margin-bottom: 2px; } .comm-cbody { white-space: pre-wrap; color: var(--ink); }
.comm-cform textarea { width: 100%; margin-bottom: 6px; }
.comm-rules ul { margin: 0; padding-left: 18px; line-height: 1.7; font-size: 14px; color: var(--ink2); }
.comm-rules.mini { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft, #f7ecd9); }
.comm-rules.mini b { color: var(--warn, #8a5410); } .comm-rules.mini ul { font-size: 13px; }
.comm-write label.f { margin-bottom: 10px; } .comm-write textarea { width: 100%; }
.comm-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px 11px; border-radius: 10px; background: var(--soft, #f1f1ee); font-size: 14px; }
.talk-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.talk-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.talk-row:hover { border-color: var(--ink); } .talk-row small { color: var(--mute); }
html[data-mode="dark"] :is(.comm-row:hover, .comm-c, .comm-place) { background: var(--soft); }
html[data-mode="dark"] .comm-row.on { background: #2a2418; }
html[data-mode="dark"] .talk-row { border-color: var(--line); color: var(--ink); }
@media (max-width: 899px) { .comm-grid { grid-template-columns: 1fr; } .comm-side { position: static; order: -1; } .comm-search { margin-left: 0; width: 100%; } .comm-search .in { flex: 1; width: auto; } }

/* 모바일 · 다크 단추: 오른쪽 아래에 떠 있게 */
.float-btns { position: fixed; right: 18px; bottom: 18px; z-index: 85; display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 26px rgba(17, 19, 24, .18); }
.float-btns .mode-btn { height: 36px; border-color: transparent; background: transparent; }
.float-btns .mode-btn:hover { background: var(--soft, #f1f1ee); border-color: transparent; }
html[data-mode="dark"] .float-btns { background: rgba(23, 26, 32, .94); border-color: var(--line); }
html[data-mode="dark"] .float-btns .mode-btn { background: transparent; color: var(--ink); }
@media (max-width: 899px) { .float-btns { right: 12px; bottom: 84px; } }
@media print { .float-btns { display: none; } }

/* 고객 만남 · 예약 */
.ev-sec h2 { display: flex; align-items: center; gap: 6px; }
.ev-form { padding: 12px; border: 1px solid var(--line2, #eee); border-radius: 12px; background: #fafaf8; margin-bottom: 12px; }
.ev-mode { display: flex; gap: 6px; margin-bottom: 10px; }
.ev-mode label { position: relative; cursor: pointer; }
.ev-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ev-mode span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink2); font-size: 14px; font-weight: 700; }
.ev-mode input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.ev-mode input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ev-fields { display: grid; grid-template-columns: 120px 150px 120px minmax(0, 1fr) auto; gap: 6px; }
.ev-fields .in, .ev-fields .sel { min-height: 40px; }
.ev-list { margin-top: 8px; }
.ev-h { margin: 6px 0; color: var(--mute); font-size: 13px; font-weight: 800; }
.ev-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.ev-row + .ev-row { margin-top: 6px; }
.ev-row b { color: var(--ink); font-size: 14.5px; }
.ev-dd { flex: none; min-width: 58px; padding: 4px 8px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 800; text-align: center; }
.ev-row.done .ev-dd { background: #ecebe6; color: var(--ink2); }
.ev-row.canceled { opacity: .55; } .ev-row.canceled .ev-dd { background: #ecebe6; color: var(--mute); }
.ev-row.over { border-color: #e7b9a0; background: #fff8f3; } .ev-row.over .ev-dd { background: #a92e25; }
.ev-next { display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.ev-next.today { background: #a92e25; }
.ev-last { display: block; margin-top: 3px; color: var(--mute); font-size: 12px; }
.home-ev { display: flex; flex-direction: column; gap: 6px; }
.home-ev a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 13.5px; text-decoration: none; }
.home-ev a:hover { border-color: var(--ink); }
.home-ev .ev-dd { min-width: 46px; font-size: 12px; }
html[data-mode="dark"] :is(.ev-form) { background: #14171c; border-color: var(--line); }
html[data-mode="dark"] :is(.ev-row, .ev-mode span, .home-ev a) { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] .ev-mode input:checked + span, html[data-mode="dark"] .ev-dd, html[data-mode="dark"] .ev-next { background: #eef0f3; color: #111318; }
html[data-mode="dark"] .ev-row.over { background: #2d1a18; }
@media (max-width: 899px) { .ev-fields { grid-template-columns: 1fr 1fr; } .ev-fields .ev-note { grid-column: 1 / -1; } .ev-fields .btn { grid-column: 1 / -1; } }

/* ── 오프닝과 같은 샴페인 크림 바탕. 카드·입력칸은 밝게 구분하고 글씨 대비는 유지한다. */
html[data-theme="pro"] {
  --bg: #f3ead6; --line: #ddcfb4; --line2: #eee4d2; --soft: #f6efdf; --gray-soft: #f0e7d5;
  --mute: #4d535c; --faint: #737982;
  --depth: 0 1px 2px rgba(17, 19, 24, .08), 0 6px 22px rgba(17, 19, 24, .09);
  --depth-up: 0 2px 6px rgba(17, 19, 24, .1), 0 18px 44px rgba(17, 19, 24, .17);
}
html[data-theme="pro"] body, html[data-theme="pro"] .land-page { background: var(--bg); }
html[data-theme="pro"]:not([data-mode="dark"]) body,
html[data-theme="pro"]:not([data-mode="dark"]) .land-page { background: radial-gradient(ellipse at 50% 20%, #faf6ec 0, #f3ead6 70%, #ede0c5 100%); }
html[data-theme="pro"] .top, html[data-theme="pro"] .land-top { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 6px rgba(17, 19, 24, .06); }
html[data-theme="pro"]:not([data-mode="dark"]) :is(.top, .land-top) { background: #fffdf8; }
html[data-theme="pro"] :is(.card, .plan, .yb3-sec, .yb3-list, .filters, .tablewrap, .detail, .tile, .land-card, .land-info, .land-areas-box, .comm-list, .rt-steps, .maplist .rc, .rc) { border-color: var(--line); box-shadow: var(--depth); }
html[data-theme="pro"] :is(.land-map, .ybmap, .route-map-box) { border: 1px solid #cfccc3; box-shadow: var(--depth-up); }
html[data-theme="pro"] .bar, html[data-theme="pro"] .maplist-head { background: var(--bg); }
html[data-theme="pro"] :is(table.rooms th, table.plain th, .filter-bottom, .area-block, .ev-form) { background: #f3f2ee; }
html[data-theme="pro"] table.rooms tbody tr:hover { background: #f4f2ec; }
html[data-theme="pro"] .chip, html[data-theme="pro"] .city-tabs .city, html[data-theme="pro"] .land-area { border-color: #cfccc3; }
html[data-theme="pro"] .chip small, html[data-theme="pro"] .city-tabs .city small, html[data-theme="pro"] .area-head small { background: #e6e4dd; }
html[data-theme="pro"] :is(.land-sub, .route-side h2, .comm-side h2) { color: var(--ink); }
html[data-theme="pro"] .land-k { color: #3b4048; }
html[data-theme="pro"] .float-btns { border-color: #cfccc3; }

/* 홈 오른쪽 칸 안쪽 스크롤 없애기 (2026-11-13 "옆으로 내리는 거 없애자"): 오른쪽은 길이대로 펼치고, 왼쪽 지도는 화면에 붙어 따라온다 */
@media (min-width: 900px) {
  .land { height: auto; min-height: calc(100vh - 64px); align-items: start; }
  .land-left { position: sticky; top: 80px; height: calc(100vh - 96px); }
  .land-right { height: auto; max-height: none; overflow: visible; }
}

/* ── 가입 화면 왼쪽: 왜 여기바방인가요? (한 줄씩 올라오는 효과) */
.land-alt { display: block !important; }
.why { position: relative; min-height: 100%; padding: 34px 38px 38px; border-radius: 20px; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse 70% 55% at 100% 0, rgba(201, 164, 99, .28), transparent 60%), radial-gradient(ellipse 60% 50% at 0 100%, rgba(80, 110, 180, .22), transparent 60%), linear-gradient(160deg, #1d2129, #0f1115); box-shadow: 0 24px 60px rgba(17, 19, 24, .3); }
.why > *, .why-row, .why-chip { opacity: 0; animation: yb-rise .6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s); }
@keyframes yb-rise { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
.why-k { display: inline-block; color: #e3cfa6; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.why-head h2 { margin: 8px 0 22px; font-size: clamp(30px, 3.2vw, 46px); font-weight: 900; letter-spacing: -.045em; line-height: 1.15; }
.why-head em { font-style: normal; background: linear-gradient(90deg, #f3e2bd, #c9a463); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-cols, .why-row { display: grid; grid-template-columns: 130px minmax(0, .9fr) 34px minmax(0, 1.5fr); align-items: center; gap: 10px; }
.why-cols { padding: 0 18px 8px; color: #9aa0aa; font-size: 13px; font-weight: 800; }
.why-cols .us { color: #e3cfa6; }
.why-rows { display: flex; flex-direction: column; gap: 10px; }
.why-row { position: relative; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.why-row::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(227, 207, 166, .16) 50%, transparent 70%); transform: translateX(-100%); animation: yb-sweep 1.1s ease-out forwards; animation-delay: calc(var(--d, 0s) + .35s); pointer-events: none; }
@keyframes yb-sweep { to { transform: translateX(100%); } }
.why-label { color: #fff; font-size: 16px; font-weight: 800; }
.why-old { color: #8c929c; font-size: 15px; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
.why-arrow { color: #c9a463; font-size: 20px; font-weight: 800; text-align: center; animation: yb-nudge 1.6s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + .6s); }
@keyframes yb-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.why-new strong { display: block; color: #fff; font-size: clamp(17px, 1.5vw, 21px); font-weight: 900; letter-spacing: -.02em; }
.why-new small { color: #c9ccd2; font-size: 13.5px; }
.why-more { margin-top: 24px; }
.why-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.why-chip { padding: 12px 14px; border-radius: 12px; background: rgba(227, 207, 166, .1); border: 1px solid rgba(227, 207, 166, .22); }
.why-chip b { display: block; color: #f3e2bd; font-size: 15px; font-weight: 800; }
.why-chip span { color: #c9ccd2; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .why > *, .why-row, .why-chip { opacity: 1; animation: none; } .why-row::after, .why-arrow { animation: none; } }
@media (min-width: 900px) { .land-left.land-alt { height: auto; min-height: calc(100vh - 96px); } }
@media (max-width: 899px) { .why { padding: 22px 16px; } .why-cols { display: none; } .why-row { grid-template-columns: 1fr; gap: 4px; } .why-arrow { display: none; } .land-left.land-alt { order: 2; } }
@media (min-width: 900px) { .land-left.land-alt { position: static; } }

/* 이 창 안에서 크게 보는 지도 ↔ 거리뷰 */
.mm-wrap { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 20px; background: rgba(17, 19, 24, .55); animation: yb-fade .15s ease-out; }
@keyframes yb-fade { from { opacity: 0; } }
/* .mm-dlg: 예전 이름 .mm 이 방 상세의 작은 지도(.rv.mm)와 겹쳐 작은 지도가 1100px 로 늘어나 건물이 화면 밖으로 나갔음 (2026-11-13 고침) */
.mm-dlg { display: flex; flex-direction: column; width: min(1100px, 96vw); height: min(720px, 88vh); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.mm-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.mm-bar b { color: var(--ink); font-size: 16px; font-weight: 800; }
.mm-bar .seg button { padding: 6px 14px; }
.mm-box { flex: 1; min-height: 0; background: #eceae5; }
.bld-acts { gap: 6px; }
html[data-mode="dark"] .mm-dlg { background: var(--card); }
html[data-mode="dark"] .mm-bar { border-color: var(--line); }

/* 실시간 표시 (첫 화면 숫자 옆) */
.land-live { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; margin-bottom: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: var(--depth); font-size: 13.5px; color: var(--ink2); }
.land-live b { color: #b42318; font-weight: 900; letter-spacing: .02em; }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #e5332a; }
.live-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: rgba(229, 51, 42, .35); animation: yb-ping 1.6s ease-out infinite; }
@keyframes yb-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.land-live.stale .live-dot { background: #d79b1f; } .land-live.stale .live-dot::after { background: rgba(215, 155, 31, .35); } .land-live.stale b { color: #8a5a14; }
.land-big b.flash { animation: yb-flash 1.2s ease-out; }
@keyframes yb-flash { 0% { color: #c9a463; text-shadow: 0 0 18px rgba(201, 164, 99, .6); } 100% { text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after, .land-big b.flash { animation: none; } }
html[data-mode="dark"] .land-live { background: var(--card); border-color: var(--line); color: var(--ink2); }
html[data-mode="dark"] .land-live b { color: #ff8a7a; }
@media (max-width: 899px) { .land-live { margin-left: 0; } }

/* 목록 '비밀번호' 칸 (우리 사무소만 보는 출입 비밀번호 메모, 적으면 저절로 저장) */
.door-td { width: 1%; }
.door-in { width: 104px; min-height: 32px; padding: 4px 9px; border: 1.5px solid #d6d2c6; border-radius: 8px; background: #fffdf7; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; transition: border-color .2s, box-shadow .2s; }
.door-in::placeholder { color: #a9a49a; font-weight: 500; }
.door-in:focus { outline: none; border-color: #c9a463; box-shadow: 0 0 0 3px rgba(201, 164, 99, .22); background: #fff; }
.door-in.ok { border-color: #2f9e6a; box-shadow: 0 0 0 3px rgba(47, 158, 106, .18); }
.door-in.wide { flex: 1; width: auto; min-width: 0; }
.rc-door { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rc-door > span { color: var(--mute); font-size: 13px; font-weight: 700; white-space: nowrap; }
/* 쪽 번호 (더 보기 대신) */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 18px 0 8px; }
.pager button { min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer; }
.pager button:hover:not(:disabled):not(.on) { border-color: var(--ink); }
.pager button.on { background: var(--ink); border-color: var(--ink); color: #fff; cursor: default; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager .pg-step { font-weight: 700; }
.pager .gap { padding: 0 2px; color: var(--mute); font-weight: 800; }
.pager .pg-info { margin-left: 10px; color: var(--mute); font-size: 13.5px; font-weight: 600; }
.pager .pg-now { min-width: 70px; text-align: center; color: var(--ink); font-weight: 800; }
.pager.compact { padding: 8px 0 14px; }
@media (max-width: 899px) { .pager .pg-info { width: 100%; margin: 4px 0 0; text-align: center; } }
html[data-mode="dark"] .pager button { background: var(--card); color: var(--ink); }
html[data-mode="dark"] .pager button.on { background: var(--ink); color: var(--bg, #111); }
.kakao-btn { background: #fee500; border-color: #f0d800; color: #191919; font-weight: 800; }
.kakao-btn:hover { background: #f5dc00; }
.memo-cell { display: flex; align-items: center; gap: 6px; }
.memo-in { width: 160px; font-weight: 500; letter-spacing: 0; }
.memo-in.wide { width: auto; }
.reg-td .reg { margin-bottom: 4px; }
.reg b { color: var(--ink); font-size: 13.5px; font-weight: 800; white-space: nowrap; }
/* 목록 한 줄 얇게 (2026-11-14 사장님 "이 한 칸이 너무 두꺼워"): 두 줄이던 주소·구조·등록 칸을 한 줄로 펴고 위아래 여백을 줄였다 → 한 화면에 방이 더 많이 보인다.
   자리가 좁으면 주소만 아랫줄로 내려간다 (글이 잘리지는 않는다). */
html[data-theme="pro"] table.rooms td { height: 44px; padding-top: 5px; padding-bottom: 5px; }
/* 세로 정렬 (2026-11-14 사장님 "세로 정렬되게끔"): 건물 · 호실 · 주소가 각각 칸. 건물명이 길면 … 으로 줄이고 (마우스를 올리면 전체), 줄은 늘 한 줄 */
html[data-theme="pro"] table.rooms td.bld-td { max-width: 190px; white-space: nowrap; }
html[data-theme="pro"] table.rooms td.bld-td .room-title { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="pro"] table.rooms td.unit-td { white-space: nowrap; }
html[data-theme="pro"] table.rooms td.unit-td b { color: var(--ink); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
html[data-theme="pro"] table.rooms td.unit-td .badge.new-listing { margin-left: 6px; }
html[data-theme="pro"] table.rooms td.addr { white-space: nowrap; }
html[data-theme="pro"] table.rooms td.addr .addr-link { display: inline; margin: 0; white-space: nowrap; }
/* 보증금은 오른쪽, 월세는 왼쪽에 붙여 '/' 가 위아래로 한 줄에 선다 — 한 칸 안의 같은 폭 격자(.pr)로 */
html[data-theme="pro"] table.rooms td.price { white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-theme="pro"] table.rooms td.price .pr { display: inline-grid; grid-template-columns: 5.2ch auto 3ch auto; align-items: baseline; }
html[data-theme="pro"] table.rooms td.price .pr-d { text-align: right; } html[data-theme="pro"] table.rooms td.price .pr-m { text-align: left; }
html[data-theme="pro"] table.rooms td.price .pr-n { margin-left: 4px; font-family: var(--font); font-size: 12px; }
html[data-theme="pro"] table.rooms td.price .pr-ask { display: block; text-align: center; }
html[data-theme="pro"] table.rooms td.price .slash { margin: 0 5px; color: var(--mute); font-weight: 600; }
html[data-theme="pro"] table.rooms th.price-th { text-align: center; }
/* 옵션이 길어도 한 줄 (넘치면 … , 마우스를 올리면 전체) → 줄 높이가 늘 같다 */
html[data-theme="pro"] table.rooms td.opts .opts-line { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="pro"] table.rooms .reg-td { white-space: nowrap; }
html[data-theme="pro"] table.rooms .reg-td .reg { display: inline-block; margin: 0 6px 0 0; }
html[data-theme="pro"] table.rooms td.opts { line-height: 1.35; }
html[data-theme="pro"] table.rooms :is(.sel, .btn.sm) { min-height: 32px; }
/* 가로 스크롤 없음 (2026-11-14 사장님 "이거 무조건 없어야 해"): 표는 늘 칸 폭에 꼭 맞는다 (table-layout fixed + 칸 폭 고정).
   건물·주소·옵션은 남는 폭을 나눠 쓰고, 넘치면 … (마우스를 올리면 전체). 폭이 모자라면 덜 중요한 칸부터 숨긴다 (방 상세에는 다 있다) */
@media (min-width: 900px) {
  html[data-theme="pro"] .tablewrap { container-type: inline-size; container-name: rooms; overflow-x: hidden; }
  html[data-theme="pro"] table.rooms { table-layout: fixed; width: 100%; min-width: 0; }
  html[data-theme="pro"] table.rooms :is(th, td) { padding-left: 7px; padding-right: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-theme="pro"] table.rooms .c-chk { width: 38px; padding-left: 12px; padding-right: 2px; }
  html[data-theme="pro"] table.rooms .c-star { width: 34px; padding-left: 2px; padding-right: 2px; }
  html[data-theme="pro"] table.rooms .c-unit { width: 104px; }
  html[data-theme="pro"] table.rooms .c-struct { width: 54px; }
  html[data-theme="pro"] table.rooms .c-price { width: 138px; }
  html[data-theme="pro"] table.rooms .c-co { width: 72px; }
  html[data-theme="pro"] table.rooms .c-door { width: 92px; }
  html[data-theme="pro"] table.rooms .c-reg { width: 96px; }
  html[data-theme="pro"] table.rooms .c-photo { width: 56px; }
  html[data-theme="pro"] table.rooms .c-status { width: 108px; }
  html[data-theme="pro"] table.rooms .c-contact { width: 124px; }
  html[data-theme="pro"] table.rooms .c-memo { width: 150px; }
  html[data-theme="pro"] table.rooms td.c-bld, html[data-theme="pro"] table.rooms td.c-addr { max-width: none; }
  html[data-theme="pro"] table.rooms td.c-addr .addr-link { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  html[data-theme="pro"] table.rooms td.c-opts .opts-line { max-width: 100%; }
  html[data-theme="pro"] table.rooms td.c-door .door-in { width: 100%; min-width: 0; }
  html[data-theme="pro"] table.rooms td.c-status .sel { width: 100%; min-width: 0; padding-left: 6px; padding-right: 4px; }
  html[data-theme="pro"] table.rooms td.c-memo .memo-cell { min-width: 0; } html[data-theme="pro"] table.rooms td.c-memo .memo-in { width: auto; flex: 1; min-width: 0; }
  html[data-theme="pro"] table.rooms td.c-memo .btn.sm { flex: none; padding: 0 8px; }
  html[data-theme="pro"] table.rooms td.c-contact a.tel { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  html[data-theme="pro"] table.rooms td.c-reg .reg { margin-right: 4px; }
  @container rooms (max-width: 1420px) { html[data-theme="pro"] table.rooms :is(.c-photo, .c-opts) { display: none; } }
  @container rooms (max-width: 1240px) { html[data-theme="pro"] table.rooms .c-co { display: none; } }
  @container rooms (max-width: 1140px) { html[data-theme="pro"] table.rooms .c-reg { display: none; } }
  @container rooms (max-width: 960px) { html[data-theme="pro"] table.rooms .c-door { display: none; } }
  @container rooms (max-width: 900px) { html[data-theme="pro"] table.rooms .c-memo { width: 112px; } html[data-theme="pro"] table.rooms .c-contact { width: 116px; } html[data-theme="pro"] table.rooms .c-status { width: 96px; } }
  @container rooms (max-width: 800px) { html[data-theme="pro"] table.rooms .c-memo { display: none; } }
  @container rooms (max-width: 700px) { html[data-theme="pro"] table.rooms .c-status { display: none; } }
  @container rooms (max-width: 600px) { html[data-theme="pro"] table.rooms .c-struct { display: none; } html[data-theme="pro"] table.rooms .c-unit { width: 92px; } }
}
html[data-mode="dark"] .door-in { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-mode="dark"] .door-in:focus { background: var(--card); }

/* 휴대폰에서 고른 방 막대 (2026-11-15 직원 시범 사용 준비): 좁은 화면에서 '1개 고름'이 세로로 꺾이고 단추가 잘리던 것 → 위에 글, 아래 단추들을 줄바꿈 */
@media (max-width: 720px) {
  html .selbar { left: 8px !important; right: 8px !important; transform: none !important; width: auto !important; max-width: none !important; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 16px; }
  html .selbar > b { flex: 0 0 100%; text-align: center; white-space: nowrap; margin: 0; font-size: 13px; }
  html .selbar .btn { flex: 1 1 auto; min-height: 36px; font-size: 13px; padding: 0 10px; white-space: nowrap; }
}
@media (max-width: 720px) {
  body:has(.selbar) .float-btns { bottom: 146px !important; }  /* 고른 방 막대가 뜨면 불편·제안 단추를 그 위로 */
}
body:has(.modal) .float-btns { display: none !important; }  /* 창(모달)이 열리면 불편·제안 단추가 창의 단추를 가리지 않게 (2026-11-15) */

/* 연락처 끝자리까지 보이게 (2026-11-15 사장님 "전화번호 끝까지 보이게 해줘"): 010-0000-0000 이 '…'로 잘리던 칸을 넓히고 말줄임을 뺀다 */
html[data-theme="pro"] table.rooms .c-contact { width: 156px; }
html[data-theme="pro"] table.rooms td.c-contact { text-overflow: clip; }
html[data-theme="pro"] table.rooms td.c-contact a.tel { max-width: none; overflow: visible; text-overflow: clip; letter-spacing: -0.2px; white-space: nowrap; }
@container rooms (max-width: 900px) { html[data-theme="pro"] table.rooms .c-contact { width: 150px; } }

/* 첫 화면 이용권: 보조원 1명 값을 기간마다 (2026-11-15) */
.land-seat .seat-rows { display: grid; gap: 2px; margin: 5px 0 3px; }
.land-seat .seat-rows .row { display: grid; grid-template-columns: 1fr auto 80px; align-items: baseline; gap: 6px; padding: 1px 0; }
.land-seat .seat-rows span { color: var(--ink2); font-size: 14px; font-weight: 600; }
.land-seat .seat-rows b { font-size: 14.5px; }
.land-seat .seat-rows .pm { text-align: right; font-size: 13px; font-weight: 500; }

/* 고객 화면 [동선 짜기]: 검은 단추들 사이에서 눈에 띄게 금색·크게 (2026-11-15). 지도 동선 강조색(#c9a463)과 같은 색 */
html[data-theme="pro"] .btn.yb3-route-cta { min-height: 44px; padding: 0 18px 0 14px; gap: 7px; border: 1px solid #a8823f; border-radius: 12px; background: linear-gradient(180deg, #e6c98f, #c9a463); color: #111318; font-size: 16px; font-weight: 800; box-shadow: 0 3px 10px rgba(169, 130, 63, .40); }
html[data-theme="pro"] .btn.yb3-route-cta:hover { background: linear-gradient(180deg, #eed6a6, #d3b073); border-color: #96733a; box-shadow: 0 4px 14px rgba(169, 130, 63, .50); }
html[data-theme="pro"] .btn.yb3-route-cta::before { content: ""; width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='2.5'/%3E%3Cpath d='M8.5 19H17a3.5 3.5 0 0 0 0-7H7a3.5 3.5 0 0 1 0-7h8.5'/%3E%3Ccircle cx='18' cy='5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 720px) { html[data-theme="pro"] .btn.yb3-route-cta { min-height: 42px; font-size: 15px; } }

/* [동선 최적화] 마우스 올리면 글라스 효과: 반투명 금색 + 흐림 + 위쪽 빛 테두리 + 빛 한 줄이 지나감 (2026-11-15) */
html[data-theme="pro"] .btn.yb3-route-cta { position: relative; overflow: hidden; isolation: isolate; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease; }
html[data-theme="pro"] .btn.yb3-route-cta::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: -60%; width: 42%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0)); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
html[data-theme="pro"] .btn.yb3-route-cta:hover, html[data-theme="pro"] .btn.yb3-route-cta:focus-visible {
  background: linear-gradient(180deg, rgba(246, 226, 184, .80), rgba(210, 174, 110, .70));
  -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%);
  border-color: rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 6px rgba(150, 115, 58, .25), 0 0 0 3px rgba(201, 164, 99, .22), 0 10px 24px rgba(169, 130, 63, .45);
  transform: translateY(-1px); }
html[data-theme="pro"] .btn.yb3-route-cta:hover::after, html[data-theme="pro"] .btn.yb3-route-cta:focus-visible::after { animation: yb-glass-sweep .85s ease-out forwards; }
html[data-theme="pro"] .btn.yb3-route-cta:active { transform: translateY(0); }
@keyframes yb-glass-sweep { 0% { left: -60%; opacity: 0; } 25% { opacity: 1; } 100% { left: 125%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html[data-theme="pro"] .btn.yb3-route-cta:hover::after { animation: none; } html[data-theme="pro"] .btn.yb3-route-cta:hover { transform: none; } }

/* [전체 동선 내비로]도 같은 글라스 효과 (2026-11-15 사장님 "이것도 글라스 효과줘") */
.rt-navi-all { position: relative; overflow: hidden; isolation: isolate; border: 1px solid #a8823f; background: linear-gradient(180deg, #e6c98f, #c9a463); box-shadow: 0 2px 8px rgba(169, 130, 63, .35); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease; }
.rt-navi-all::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: -60%; width: 42%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0)); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.rt-navi-all:hover, .rt-navi-all:focus-visible {
  background: linear-gradient(180deg, rgba(246, 226, 184, .80), rgba(210, 174, 110, .70));
  -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%);
  border-color: rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 6px rgba(150, 115, 58, .25), 0 0 0 3px rgba(201, 164, 99, .22), 0 8px 20px rgba(169, 130, 63, .45);
  transform: translateY(-1px); }
.rt-navi-all:hover::after, .rt-navi-all:focus-visible::after { animation: yb-glass-sweep .85s ease-out forwards; }
.rt-navi-all:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .rt-navi-all:hover::after { animation: none; } .rt-navi-all:hover { transform: none; } }

/* 고객 화면 담은 방: 출입 비밀번호·메모 칸 — 공실 찾기와 같은 우리 사무소 기록 (2026-11-15) */
.yb3-room .yb3-mine { grid-column: 2 / 4; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 8px; margin-top: 6px; padding: 7px 9px; border-radius: 10px; background: var(--gold-soft, #f6f0e5); }
.yb3-mine label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.yb3-mine label > span { flex: none; color: var(--ink); font-size: 13px; font-weight: 800; }
.yb3-mine .in { flex: 1; width: 100%; min-width: 0; min-height: 34px; padding: 5px 9px; background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; }
.yb3-mine textarea.in, .gd-row .gd-memo textarea { resize: vertical; line-height: 1.45; field-sizing: content; max-height: 140px; }
html[data-mode="dark"] .yb3-room .yb3-mine { background: var(--soft); } html[data-mode="dark"] .yb3-mine .in { background: var(--card); }
@media (max-width: 899px) { .yb3-room .yb3-mine { grid-column: 1 / 3; grid-template-columns: 1fr; } }
.gd-row .gd-memo { grid-column: 2 / -1; }
.gd-memo-opt { display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.gd-memo-opt input { width: 17px; height: 17px; margin: 0; }

/* 총 거리 칸 아래 글씨: 어두운 칸 위에 회색(--mute)이 덮여 안 보이던 것 (2026-11-15 사장님 "아래 글씨 잘 안보여") */
html[data-theme="pro"] .gd-total:not(.wait) .hint, html[data-theme="pro"] .rt-total .hint { color: #eeede8 !important; font-size: 14px; font-weight: 600; }
html[data-theme="pro"][data-mode="dark"] .gd-total:not(.wait) .hint, html[data-theme="pro"][data-mode="dark"] .rt-total .hint { color: #2e333b !important; }

/* 좋은 점·아쉬운 점·상태 줄을 빼고 [빼기]를 비번·메모 줄 끝으로 (2026-11-15 사장님 "이거는 필요없을듯") */
.yb3-room .yb3-mine { grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; }
.yb3-mine .yb3-del { min-height: 34px; padding: 0 12px; background: #fff; }
.yb3-room .yb3-mine.only-del { display: flex; justify-content: flex-end; padding: 0; background: none; }
@media (max-width: 899px) {
  .yb3-room .yb3-mine { grid-template-columns: minmax(0, 1fr) auto; }
  .yb3-room .yb3-mine .yb3-mine-memo { grid-column: 1 / -1; order: 2; }
}

/* [복사]·[카톡] 색으로 강조 (2026-11-15 사장님 "이것도 조금 다른색으로 강조되게"). .kakao-btn 노랑이 pro 테마의 흰 단추 규칙에 덮여 흰색으로 보이던 것도 바로잡음 */
html[data-theme="pro"] .btn.kakao-btn { background: #fee500; border-color: #e6cf00; color: #191919; font-weight: 800; }
html[data-theme="pro"] .btn.kakao-btn:hover { background: #f5dc00; border-color: #d9c300; }
html[data-theme="pro"] .btn.copy-btn { background: #eaf1ff; border-color: #8fb0f5; color: #1f4fbf; font-weight: 800; }
html[data-theme="pro"] .btn.copy-btn:hover { background: #dbe7ff; border-color: #6d97ef; }
html[data-theme="pro"][data-mode="dark"] .btn.copy-btn { background: #1d2a44; border-color: #3d5a94; color: #b9cdfa; }

/* 머리말 소개 문구 (2026-11-15 사장님 "고급스럽게 후킹" → "중개사에게만 열리는 구미·칠곡 공실"): 로고 옆 얇은 금색 세로선 + 작은 금색 MEMBERS ONLY */
html[data-theme="pro"] .land-tag { display: inline-flex; align-items: center; gap: 10px; margin-left: 4px; padding-left: 16px; border-left: 1px solid #c9b07f; color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
html[data-theme="pro"] .land-tag .lt-k { color: #a8844c; font-size: 10.5px; font-weight: 800; letter-spacing: .22em; }
html[data-theme="pro"][data-mode="dark"] .land-tag { border-left-color: #6b5a3a; }
html[data-theme="pro"][data-mode="dark"] .land-tag .lt-k { color: #e6cc92; }
@media (max-width: 1199px) { html[data-theme="pro"] .land-tag .lt-k { display: none; } }
@media (max-width: 899px) { html[data-theme="pro"] .land-tag { display: none; } }