/* 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; }

/* ── 도움말 버튼 (shared/_hdr) ─────────────────────────────────────────────
   2026-08-07 우하단 FAB 로 시작 → 2026-09-10 AI 채팅 FAB 와 자리가 겹쳐 숨김 →
   2026-09-30 헤더 안(계정 메뉴 왼쪽)의 작은 알약 버튼으로 옮겨 다시 노출.
   클래스 이름(.ds-help-fab)은 view_style_canon 소유 등록·미배정 정리 모달(--in-panel)
   호환 때문에 그대로 둔다 — 이제 fixed FAB 가 아니다. */
.ds-help-fab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px 0 9px;
  margin-right: 4px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--db-color-primary);
  font-family: var(--db-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ds-help-fab:hover {
  background: var(--db-color-primary);
  border-color: var(--db-color-primary);
  color: #fff;
}
.ds-help-fab:active {
  background: var(--db-color-primary-pressed);
  border-color: var(--db-color-primary-pressed);
  color: #fff;
}
.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; }
}

@media print {
  .ds-help-fab { display: none; }
}

/* ── 도움말 FAB — 모달 카드 안 변형 (2026-08-10) ───────────────────────────
   미배정 정리 모달 카드 우하단에 같은 알약 버튼을 띄운다(2026-09-30 다시 노출). */
.ds-help-fab--in-panel {
  position: absolute;
  right: 16px;
  bottom: 16px;
}