/* 여기바방 휴대폰 화면 (2026-11-15 사장님 "카카오톡처럼 보기 편하고 사용하기 쉽게 — 밖에서 손님 문의 오면 바로 방 찾아 보내거나 임대인에게 전화").
   mobile.js 가 좁은 화면의 회원 화면에 <html class="m-app"> 을 붙인다. 컴퓨터 화면에는 아래 'm-' 규칙이 하나도 적용되지 않는다. 맨 마지막에 불러온다. */

/* 컴퓨터에서는 숨김 */
.m-tabbar, .m-actbar, .m-only { display: none; }
.rc .acts:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 720px) {
  html.m-app { --head: 56px; --m-tab: calc(62px + env(safe-area-inset-bottom)); }
  html.m-app body { padding-bottom: var(--m-tab); }

  /* ── 위: 한 줄짜리 머리 (로고 + 알림). 메뉴는 아래 탭 막대로 */
  html.m-app header.top { position: sticky; top: 0; z-index: 50; height: 56px; min-height: 56px; padding: 0 14px; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; }
  html.m-app header.top nav { display: none !important; }
  html.m-app header.top .who { margin-left: auto; gap: 6px; }
  html.m-app header.top .who > :not(.yb3-bell) { display: none !important; }
  html.m-app header.top .logo { flex: none; max-height: 40px; overflow: hidden; display: flex; align-items: center; }
  html.m-app header.top .logo :is(img, svg) { max-height: 34px; width: auto; }
  html.m-app .yb3-bell { font-size: 14px; padding: 8px 12px; border: 1px solid var(--line, #ddd); border-radius: 999px; background: var(--card, #fff); }

  /* ── 아래: 카카오톡처럼 탭 막대 */
  html.m-app .m-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; height: var(--m-tab); padding-bottom: env(safe-area-inset-bottom);
    background: var(--card, #fff); border-top: 1px solid var(--line, #e3e1da); box-shadow: 0 -6px 20px rgba(17, 19, 24, .06); }
  html.m-app .m-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted, #8a8f98); text-decoration: none; font-size: 11.5px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
  html.m-app .m-tabbar a .ic { display: flex; }
  html.m-app .m-tabbar a.on { color: var(--ink, #111318); font-weight: 800; }
  html.m-app .m-tabbar a.on .ic svg { stroke-width: 2.6; }
  html.m-app .float-btns { display: none !important; }      /* 불편·제안·어두운 화면은 '더보기' 안으로 */
  html.m-app .selbar { bottom: calc(var(--m-tab) + 8px) !important; }
  html.m-app .yb3-page { padding-bottom: calc(var(--m-tab) + 16px); }

  /* ── 더보기 (아래에서 올라오는 창) */
  .m-sheet-wrap { position: fixed; inset: 0; z-index: 95; background: rgba(17, 19, 24, .38); display: flex; align-items: flex-end; animation: m-fade .15s ease-out; }
  .m-sheet { width: 100%; max-height: 86dvh; overflow: auto; background: var(--card, #fff); border-radius: 20px 20px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); animation: m-up .18s ease-out; }
  .m-sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line, #ddd); margin: 4px auto 10px; }
  .m-sheet-office { font-weight: 800; font-size: 15px; margin: 2px 2px 10px; }
  .m-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .m-sheet-grid a { display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid var(--line, #e3e1da); border-radius: 14px; color: var(--ink, #111318); text-decoration: none; background: var(--bg, #f6f5f1); }
  .m-sheet-grid a b { font-size: 15.5px; } .m-sheet-grid a small { font-size: 12px; color: var(--muted, #8a8f98); }
  .m-sheet-grid a.on { border-color: var(--ink, #111318); }
  .m-sheet-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
  .m-sheet-row .btn, .m-sheet-close { min-height: 46px; font-size: 14px; }
  .m-sheet-close { width: 100%; margin-top: 10px; }
  @keyframes m-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
  @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

  /* ── 공실 찾기: 검색칸이 맨 위에 붙어 있고, 결과가 바로 보이게 */
  html.m-app .room-workspace { padding-top: 0; }
  html.m-app .workspace-heading { display: block; padding: 0; margin: 0; }
  html.m-app .workspace-heading > div:first-child { display: none; }                 /* '공실 찾기 / 손님에게 맞는 방…' 제목 */
  html.m-app .room-search { position: sticky; top: 56px; z-index: 30; display: flex; gap: 8px; margin: 0 -12px; padding: 8px 12px; background: var(--bg, #f6f5f1); border-bottom: 1px solid var(--line, #e3e1da); }
  html.m-app .room-search .in { flex: 1; min-width: 0; height: 46px; font-size: 16px; }      /* 16px: 아이폰이 글자 넣을 때 화면을 확대하지 않게 */
  html.m-app .room-search .btn { height: 46px; min-width: 64px; font-size: 15px; }
  html.m-app .results-note { display: none; }
  html.m-app .filters { margin-top: 8px; }

  /* ── 공실 카드: 짧게 (한 화면에 3~4개), 큰 단추 (전화 · 손님에게 · 고르기) */
  html.m-app .rc { padding: 12px 14px !important; border-radius: 16px !important; }
  html.m-app .rc + .rc { margin-top: 8px !important; }
  html.m-app .rc .t { font-size: 15px; font-weight: 800; line-height: 1.35; }
  html.m-app .rc .p { margin: 4px 0 2px; display: flex; align-items: baseline; gap: 6px; }
  html.m-app .rc .p > :not(small) { font-size: 23px; font-weight: 900; letter-spacing: -.3px; }
  html.m-app .rc .m { font-size: 12.5px; color: var(--ink2, #555); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.m-app .rc .row .badge { font-size: 11.5px; }
  html.m-app .rc .rc-door { display: none !important; }                             /* 비번·메모 적기는 상세에서 */
  html.m-app .rc .rc-secret-line { display: block; margin-top: 4px; font-size: 12.5px; color: #b45309; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.m-app .rc .acts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; margin-top: 10px !important; }
  html.m-app .rc .acts .detail-btn { display: none !important; }                    /* 카드를 누르면 상세 */
  html.m-app .rc .acts .btn { min-height: 44px !important; font-size: 14.5px !important; font-weight: 800; border-radius: 12px; padding: 0 6px; }
  html.m-app .rc .acts > span:has(a.tel) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }  /* 번호가 나와 있으면 한 줄 전체 */
  html.m-app :is(.rc .acts, .m-actbar) a.tel { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 12px; background: var(--ink, #111318); color: #fff !important;
    font-size: 16px !important; font-weight: 800; letter-spacing: .2px; text-decoration: none !important; white-space: nowrap; }
  html.m-app :is(.rc .acts, .m-actbar) a.tel::before { content: "전화"; font-size: 12.5px; font-weight: 700; opacity: .75; }
  html.m-app :is(.rc .acts, .m-actbar) .send-btn { background: #fee500; border-color: #f0d800; color: #191600; }   /* 카카오 노랑 */

  /* ── 방 상세: 화면 전체 + 아래에 늘 붙은 단추 */
  html.m-app .detail, html.m-app .split > .detail, html.m-app .mapview .detail { position: fixed !important; inset: 0 !important; top: 0 !important; width: 100vw !important; max-width: none !important; max-height: none !important; height: 100dvh;
    z-index: 90 !important; border-radius: 0 !important; border: 0 !important; overflow-y: auto; animation: m-up .18s ease-out; }
  html.m-app .detail > header { position: sticky; top: 0; z-index: 3; background: var(--card, #fff); padding: 10px 14px; border-bottom: 1px solid var(--line, #e3e1da); }
  html.m-app .detail > header h2 { font-size: 17px; }
  html.m-app .detail > header .btn { min-height: 40px; font-size: 14px; }
  html.m-app .detail .dnav { display: none; }                                         /* '‹ 이전 · 다음 ›' 은 컴퓨터용 */
  html.m-app .detail section { padding-left: 14px; padding-right: 14px; }
  html.m-app .detail .offer .p { font-size: 24px; font-weight: 900; }
  html.m-app .m-actbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; position: sticky; bottom: 0; z-index: 3; margin-top: 12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--card, #fff); border-top: 1px solid var(--line, #e3e1da); box-shadow: 0 -6px 20px rgba(17, 19, 24, .08); }
  html.m-app .m-actbar .btn { min-height: 50px; font-size: 15px; font-weight: 800; border-radius: 14px; padding: 0 6px; }
  html.m-app .m-actbar > span:has(a.tel) { display: flex; flex-direction: column; gap: 4px; }
  html.m-app .m-actbar a.tel { min-height: 50px; font-size: 15px !important; }

  /* ── 손님 안내·고객에게 담기 창: 아래에서 올라오는 창처럼 넓게 */
  html.m-app .modal > div, html.m-app .modal .card { max-width: 100vw; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  html.m-app .detail, .m-sheet, .m-sheet-wrap { animation: none !important; }
}
html[data-mode="dark"].m-app .m-tabbar, html[data-mode="dark"] .m-sheet { background: var(--card); border-color: var(--line); }
html[data-mode="dark"].m-app :is(.rc .acts, .m-actbar) a.tel { background: #eef0f3; color: #111318 !important; }

/* 2차 다듬기: 조건 칸·개수 줄을 한 줄로, 카드 단추를 한 줄로 (전화번호 · 손님에게 · 고르기) */
@media (max-width: 720px) {
  html.m-app .filters .mobile-filter-toggle { min-height: 46px; padding: 10px 14px; }
  html.m-app .filters .filter-bottom { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 10px !important; scrollbar-width: none; }
  html.m-app .filters .filter-bottom::-webkit-scrollbar, html.m-app .bar::-webkit-scrollbar { display: none; }
  html.m-app .filters .filter-bottom .quick-filters { display: flex !important; flex-wrap: nowrap !important; gap: 6px; }
  html.m-app .filters .filter-bottom :is(.quick-filters > *, > .btn) { flex: none; white-space: nowrap; }
  html.m-app .bar { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 0 !important; scrollbar-width: none; }
  html.m-app .bar > * { flex: none; }
  html.m-app .bar > .grow { display: none; }
  html.m-app .bar .sel, html.m-app .bar .btn, html.m-app .bar .chip { min-height: 36px; font-size: 13px; }
  html.m-app .rc .acts { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, .85fr) !important; }
  html.m-app .rc .acts > span:has(a.tel) { grid-column: auto; }
  html.m-app .rc .acts > span:has(a.tel + a.tel) { grid-column: 1 / -1; }            /* 번호가 둘 이상이면 한 줄 전체 */
  html.m-app :is(.rc .acts, .m-actbar) a.tel { font-size: 15px !important; letter-spacing: 0; padding: 0 6px; }
  html.m-app :is(.rc .acts, .m-actbar) a.tel::before { content: "☎"; font-size: 14px; opacity: .85; }
}
@media (max-width: 720px) {
  html.m-app .m-actbar { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.25fr) minmax(0, .75fr); gap: 6px; }   /* 전화번호가 끝까지 보이게 */
  html.m-app .m-actbar a.tel { font-size: 14.5px !important; padding: 0 4px; }
  html.m-app .m-actbar a.tel::before { font-size: 12px; }
}
@media (max-width: 720px) {
  html.m-app :is(.rc .acts, .m-actbar) a.tel::before { content: none !important; display: none !important; }   /* 2026-11-15 사장님 "전화버튼 빼" — 번호 앞 ☎ 표시 뺌, 번호만 */
  html.m-app .modal { z-index: 100 !important; }   /* 상세(90) 위에 손님 안내·고객 담기 창이 뜨게 */
}