/* app_chrome.css — 앱 크롬 정본: 전역 헤더(.hdr)·로고·네비(shared/_hdr) + ERP 페이지 셸.
   2026-07-28 properties_grid.css 2차 분리(센서스 ② 후속) — 규칙 내용 원본 그대로.
   사용처 실측: .hdr .logo .sep .nav-links .nav-link .spacer = shared/_hdr + layouts/application,
   .properties-page(--erp) = dsv2_properties/index + dsv2_clients/index (교차 사용 셸).
   ※ .prop-shell/.hdr--filters/.view-toggle(-btn) 은 마크업 부착 0(v1 미이식분)이라 소각 —
     _hdr 주석의 '이식 시 되살린다' 대상은 v1 원본에서 다시 가져온다.
   application 레이아웃에서 properties_grid 보다 먼저 로드된다. */

.properties-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.properties-page--erp {
  color: #1e293b;
  font-family: var(--db-font-sans);
  margin: 0 !important;
  gap: 12px; /* 필터바와 그리드 사이 간격 */
  top: 0;
}

.hdr {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  margin: 0 !important;
  padding: 0 24px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@font-face {
  font-family: "Hakgyoansim Dunggeunmiso";
  src: url("/assets/HakgyoansimDunggeunmiso-R-9c519b65.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Hakgyoansim Dunggeunmiso";
  src: url("/assets/HakgyoansimDunggeunmiso-B-5265a793.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
.logo { font-family: "Hakgyoansim Dunggeunmiso", "Wanted Sans Variable", "Wanted Sans", sans-serif; font-weight: 800; font-size: 16px; color: var(--db-color-primary); letter-spacing: -.3px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.logo:hover { color: var(--db-color-primary-hover); }
.sep { width: 1px; height: 18px; background: #e2e8f0; margin: 0 2px; }
.nav-links { display: flex; gap: 2px; }
/* 모바일 드래그 홀드(200ms)와 iOS 길게누름 링크 미리보기("새창")가 충돌 — 콜아웃/선택 차단.
   안드로이드 컨텍스트메뉴는 menu_order_controller가 터치 중에만 preventDefault.
   ⚠️ -webkit-user-drag: none 금지 — SortableJS 데스크톱 드래그가 네이티브 HTML5 DnD라
   드래그 시작 자체가 죽는다(2026-07-13 실측: 그 속성 하나로 메뉴 드래그 전면 먹통). */
.nav-links .nav-link { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.nav-link { font-size: 12px; font-weight: 500; color: #64748b; padding: 5px 10px; border-radius: 5px; cursor: default; white-space: nowrap; background: none; border: none; font-family: inherit; }
.nav-link:hover { background: #f1f5f9; color: #1e293b; }
.nav-link.active { background: var(--db-color-primary); color: #fff; font-weight: 600; }

.spacer { flex: 1; }


/* 헤더 회수분 (2026-08-05) — shared/_hdr 인라인 style 2건.
   `.nav-link` 정의가 이 파일(:58)에 있어 변형도 여기 둔다 — 정의를 두 시트로 가르지 않는다. */
.nav-link--disabled { color: #94a3b8; cursor: not-allowed; }

/* ── 도움말 FAB (shared/_hdr, 2026-08-07) ─────────────────────────────────
   원래는 헤더 우측 20px 아이콘이었다. "너무 작아서 안 보인다"(써니, /clients2·/dsv2-properties)
   → 헤더에서 떼어 **우하단 고정 스티커**로 띄운다. 아이콘만 두면 같은 신고가 반복되므로
   라벨("도움말")까지 넣어 글자로도 읽히게 한다(알약형).

   z-index 40 은 **shared/_modal 래퍼(`fixed inset-0 z-50`)보다 낮게** 잡은 값이다 — 모달이 열리면
   오버레이 뒤로 가려진다(다른 모달과 동일한 기본 동작). 미배정 정리 모달은 자기 카드 안에 같은
   모양의 도움말 버튼을 따로 두므로(`.ds-help-fab--in-panel` 참조) 이 전역 FAB가 가려져도
   화면 전용 도움말이 사라지지 않는다.
   그리드 편집 중 셀(properties_grid.css `.tabulator-editing` z-60)보다도 낮다 — 우하단 셀을
   편집하면 input 이 FAB 위로 온다. 편집이 우선이라 의도한 순서다.
   여백 30/25px 은 써니 지정(2026-08-10). 모서리에 바짝 붙어 잘려 보이던 걸 한 뼘 띄운 자리다.
   매물 그리드는 우·하 여백이 각각 32px(main p-4 16 + 카드 p-4 16)이라, 이 FAB(87×40)는
   마지막 행 오른쪽 끝(자료·매물장 열)을 **가로 85px × 세로 33px** 덮는다(라이브 실측 2026-08-10,
   16/16 이던 초기값의 71×24 에서 커진 값) — FAB 의 정상 동작이고 가려진 행은 한 칸 스크롤하면
   나온다. 고객관리(/clients2)는 그 자리가 비어 있어 겹침 0. */
.ds-help-fab {
  position: fixed;
  right: 30px;
  bottom: calc(25px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  background: var(--db-color-primary);
  color: #fff;
  font-family: var(--db-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 4px 14px rgb(15 23 42 / 28%);
  transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ds-help-fab:hover {
  background: var(--db-color-primary-hover);
  box-shadow: 0 6px 18px rgb(15 23 42 / 34%);
  transform: translateY(-1px);
}
.ds-help-fab:active {
  background: var(--db-color-primary-pressed);
  box-shadow: 0 3px 10px rgb(15 23 42 / 30%);
  transform: translateY(0);
}
.ds-help-fab:focus-visible { outline: 2px solid var(--db-color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ds-help-fab { transition: none; }
  .ds-help-fab:hover, .ds-help-fab:active { transform: none; }
}

/* 인쇄물에 떠 있는 파란 알약이 찍히지 않게. 매물 전단지·양식은 별도 레이아웃이지만,
   일반 화면을 Ctrl+P 하는 경로가 남아 있다. */
@media print {
  .ds-help-fab { display: none; }
}

/* ── 도움말 FAB — 모달 카드 안 변형 (2026-08-10) ───────────────────────────
   미배정 정리처럼 전역 우하단 자리 대신 **자기 모달 카드 안**에 도움말을 두고 싶은 경우 전용.
   `.ds-help-fab`(색·모양·아이콘 전부)를 그대로 재사용하고 위치만 바꾼다 — position:fixed
   (뷰포트 기준) 대신 absolute(가장 가까운 position:relative 조상 = 모달 카드 자신)로 두면
   모달이 열고 닫힐 때 같이 움직이고, 카드 밖 뷰포트로 튀어나가지 않는다.
   같은 특이도(단일 클래스)라 이 규칙이 위 `.ds-help-fab`보다 **소스 순서상 나중**이라 이긴다
   (!important 불필요) — 순서를 바꾸면 깨진다.
   사용법: 앵커에 `class="ds-help-fab ds-help-fab--in-panel"`, 그 앵커의 가장 가까운
   position:relative 조상이 원하는 기준 박스(보통 모달 본문 래퍼)가 되게 감싼다. */
.ds-help-fab--in-panel {
  position: absolute;
  right: 16px;
  bottom: 16px;
}