/* properties_grid.css — 매물(dsv2-properties) 화면 전용 잔류 스타일.
   정본 분리(2026-07-28, 센서스 ② 후속): --db-* 토큰→db_tokens / 공용 db-* 컴포넌트→db_components /
   앱 크롬·ERP 페이지셸→app_chrome / 고객 화면 조각→clients_detail / 전역 Tabulator 스킨→grid_skin.
   위 정본 파일들은 로드 순서상 항상 이 파일보다 먼저 온다.

   ⚠️ !important 30 → 9 (2026-07-29). 21개를 하나씩 빼보며 세 로드 구성(앱 / register_window /
      consult_window)에서 계산값을 대조해, 빼도 아무것도 안 변하는 것만 지웠다.
      걷어낼 수 있었던 근거: 이 파일이 grid_skin 보다 **뒤에 로드**되고, grid_skin 의 경쟁 선언들이
      normal 로 내려갔기 때문(grid_skin PR #69). 즉 **로드 순서가 이 파일의 승리 근거**다 —
      layouts/application·embed_modal·register_window·consult_window 넷 다 grid_skin → properties_grid
      순서이고, 이걸 뒤집으면 이 파일 규칙들이 통째로 안 먹는다.

   ⚠️ 남은 9개는 전부 `::-webkit-scrollbar*` 의사요소에 붙어 있다 — **계산값으로 검증이 불가능해
      손대지 않았다**(추측으로 지울 자리가 아니다). 이 스크롤바 동작은 2026-07-21~22 사이 3차에
      걸친 시행착오가 있었고(아래 우패널 주석 참조), scrollbar-width 가 auto 일 때만
      ::-webkit-scrollbar 커스터마이징이 반영된다는 실측이 그 결론이다. */

/* Tabulator list 드롭다운 + 우클릭 메뉴 CSS는 공용 컴포넌트로 분리 →
   app/assets/stylesheets/shared_tabulator_popup.css (정본 1곳). 여기엔 두지 않는다. */

/* 메모·비고·특이사항(c-note-cell) 편집 시 브라우저 기본 파란 아웃라인 제거 */
.c-note-cell textarea,
.c-note-cell input,
.c-note-cell textarea:focus,
.c-note-cell input:focus {
  outline: none;
  box-shadow: none;
}

/* 공용 체크박스는 shared_checkbox.css(.db-checkbox = label+SVG 토글, shared/_db_checkbox) 로 이관. 기존 native accent 방식(미사용)은 삭제. */

.ds-loader { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* 매물등록 모달 로딩 — 공용 ds-spinner 재사용. 밝은 배경이라 흰 바 대신 slate + 상하 여백 */
.register-loading { padding: 48px 0; }
.register-loading .ds-spinner i { background: #94a3b8; }
.register-loading .ds-loading-text { font-size: 12px; color: #94a3b8; }
.ds-spinner { position: relative; width: 60px; height: 60px; animation: ds-spin 1s steps(12, end) infinite; }
.ds-spinner i { position: absolute; top: 4px; left: calc(50% - 2px); width: 4px; height: 13px; border-radius: 4px; background: #fff; transform-origin: 2px 26px; }
.ds-spinner i:nth-child(1)  { transform: rotate(0deg);   opacity: 1;   }
.ds-spinner i:nth-child(2)  { transform: rotate(30deg);  opacity: .92; }
.ds-spinner i:nth-child(3)  { transform: rotate(60deg);  opacity: .84; }
.ds-spinner i:nth-child(4)  { transform: rotate(90deg);  opacity: .75; }
.ds-spinner i:nth-child(5)  { transform: rotate(120deg); opacity: .66; }
.ds-spinner i:nth-child(6)  { transform: rotate(150deg); opacity: .57; }
.ds-spinner i:nth-child(7)  { transform: rotate(180deg); opacity: .48; }
.ds-spinner i:nth-child(8)  { transform: rotate(210deg); opacity: .40; }
.ds-spinner i:nth-child(9)  { transform: rotate(240deg); opacity: .33; }
.ds-spinner i:nth-child(10) { transform: rotate(270deg); opacity: .27; }
.ds-spinner i:nth-child(11) { transform: rotate(300deg); opacity: .21; }
.ds-spinner i:nth-child(12) { transform: rotate(330deg); opacity: .15; }
.ds-loading-text { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 1px; font-family: "Wanted Sans Variable", "Wanted Sans", sans-serif; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

#grid {
  flex: 1;
  min-height: 0;
  height: 100%;
  border: 1px solid #e2e8f0; /* 데이터 그리드 영역 정의 (카드 패딩 안의 패널) */
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
}

/* 연결매물(자식) 그리드는 좁은 폼 폭에 12컬럼이 들어가 항상 가로로 넘친다 — grid_skin.css 의
   전역 스크롤바 숨김을 이 그리드에서만 되돌려 가로 스크롤바를 보이게 한다(세로는 전역 그대로 숨김 유지).
   register_window.html.erb/new.html.erb/edit.html.erb 3곳 공유(dsv2_property_children_controller.js
   connect()가 gridTarget에 이 클래스를 부여, 2026-07-16 양희 요청). */
.dsv2-linked-grid .tabulator-tableholder {
  scrollbar-width: thin;
}
.dsv2-linked-grid .tabulator-tableholder::-webkit-scrollbar:horizontal {
  height: 8px !important;
  display: block !important;
}
.dsv2-linked-grid .tabulator-tableholder::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}
.dsv2-linked-grid .tabulator-tableholder::-webkit-scrollbar-track {
  background: transparent !important;
}

/* 6: 편집 중 input 을 엑셀처럼 넓게 — 좁은 컬럼도 값 전체가 보이도록.
   좁은 셀에선 input 이 셀 밖으로 넘쳐 인접 셀 위에 표시(overflow:visible + z-index),
   넘친 부분이 인접 셀을 가리도록 불투명 흰 배경. 넓은 셀(≥240px)은 그대로 100%. */
#grid .tabulator-cell.tabulator-editing {
  overflow: visible;
  z-index: 60;
}
#grid .tabulator-cell.tabulator-editing input {
  /* 폭은 JS(cellEditing)가 값 길이에 맞춰 인라인 설정(content-fit). 여기선 배경만 불투명(넘친 부분이 인접 셀 가리게). */
  box-sizing: border-box;
  background: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   아래는 dsv2_properties/index.html.erb 의 인라인 <style> 122줄에서 회수(2026-07-29).
   뷰에 CSS 정의가 살면 정본 밖 스타일이라 추적·재사용이 안 되고, 같은 규칙이 화면마다
   갈라진다. 규칙 내용은 원본 그대로 — 이동만.
   ⚠️ 스코프 유지 필수: data-*-target 속성 스코프가 grid_skin.css 전역 규칙과의
      specificity 싸움에서 이기는 근거다(원문 주석 참조). 스코프를 줄이면 안 먹는다.
      2026-07-29 !important 를 걷어낸 뒤로는 **이 스코프가 유일한 승리 근거**다 — 더 중요해졌다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 페이지 배경(카드 뒤 영역)만 #e9edf2 — 이 화면 전용. 카드(.bg-surface)는 그대로.
   패딩은 override 하지 않는다 — 레이아웃 공통 main.p-4(16px)를 그대로 따른다(세 화면 여백 통일, 2026-07-24).
   ⚠️ 뷰 <style> 에 있을 땐 그 문서에만 적용돼 자동 스코프였다. 정본 시트는 전 페이지 로드라
      .screen-dsv2-properties(layouts/application 의 body 훅)로 명시 스코프해야 다른 화면에 안 샌다. */
.screen-dsv2-properties main { background: #e9edf2; }
/* 상가2 진입 중엔 <main> 자체 세로 스크롤을 끈다(좌/우패널이 각자 세로 스크롤을 가지고 있어
   페이지 레벨 세로 스크롤까지 겹치면 이중 스크롤바로 보이던 문제, 2026-07-21). 가로는 반드시
   유지(우패널 컬럼이 많아 가로 스크롤이 필요) — overflow-x는 명시로 auto 고정.
   토글은 dsv2_properties_grid_controller.js#_toggleGroupedView. */
main.dsv2-sanga2-no-vscroll { overflow-y: hidden; overflow-x: auto; }
/* 글자 안티앨리어싱(요청) — ⚠️ macOS(WebKit) 전용, Windows 크롬에선 무효(no-op). */
.screen-dsv2-properties { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* 유형 탭 = 공용 필터탭 shared/_filter_tabs(.db-tabs/.db-tab/.tab--on, shared_filter_tabs.css)로 이관. */
/* 검색(Ctrl+K) 회상 점프 — 선택된 매물 행 색상 강조(다음 점프/클릭 전까지 유지).
   ⚠️ 파일명은 properties_grid 지만 이 규칙은 **Tabulator 선택행 공용**이다(레이아웃에서 전역 로드).
      세 번째 소비자로 문서관리(tabulator-grid)가 붙었다 — 갤러리를 닫으면 마지막으로 보던
      파일 행을 이 강조로 표시한다(2026-08-04). 색을 그쪽에 새로 쓰면 같은 의미의 강조가
      두 벌이 되고 한쪽만 조정되며 톤이 갈린다 — 값은 여기 두 줄이 정본이다. */
[data-dsv2-properties-grid-target="table"] .tabulator-row.dsv2-row-selected,
[data-dsv2-properties-grid-target="table"] .tabulator-row.dsv2-row-selected .tabulator-cell,
[data-dsv2-sanga-grouped-target="leftTable"] .tabulator-row.dsv2-row-selected,
[data-dsv2-sanga-grouped-target="leftTable"] .tabulator-row.dsv2-row-selected .tabulator-cell,
[data-tabulator-grid-target="grid"] .tabulator-row.dsv2-row-selected,
[data-tabulator-grid-target="grid"] .tabulator-row.dsv2-row-selected .tabulator-cell { background:#fff3bf; }
[data-dsv2-properties-grid-target="table"] .tabulator-row.dsv2-row-selected,
[data-dsv2-sanga-grouped-target="leftTable"] .tabulator-row.dsv2-row-selected,
[data-tabulator-grid-target="grid"] .tabulator-row.dsv2-row-selected { box-shadow: inset 3px 0 0 #f59f00; }
/* 셀 텍스트 세로 중앙정렬 — grid_skin.css(전역) .tabulator-row .tabulator-cell 가
   line-height:1.3(≈15.6px, font-size 12px 기준)을 거는데, dsv2 실제 셀 높이(~36px,
   패딩 4px씩 제외 컨텐츠박스 ~28px)보다 훨씬 작아 텍스트가 위쪽에 붙고 아래에 여백만
   남는 문제(2026-07-14). line-height 를 컨텐츠박스 높이만큼 키워 단일행 텍스트를 세로
   중앙에 오게 함(실측: gapAbove≈gapBelow, 오차 0.3px 이내).
   ⚠️ 이기는 근거(2026-07-29 갱신): 예전엔 양쪽 다 !important 라 스코프로 갈렸지만, 지금은
      grid_skin 쪽이 normal 이고 이 파일이 **뒤에 로드**돼 순서로 이긴다. 그래도 data-*-target
      스코프는 그대로 둔다 — grid_skin 이 다시 !important 를 달면 스코프가 유일한 방어선이다.
      이 규칙을 지우면 line-height 가 15.6px 로 떨어진다(실측 확인). */
[data-dsv2-properties-grid-target="table"] .tabulator-row .tabulator-cell,
[data-dsv2-sanga-grouped-target="leftTable"] .tabulator-row .tabulator-cell,
[data-dsv2-sanga-grouped-target="rightTable"] .tabulator-row .tabulator-cell { line-height: 28px; }
/* 셀 편집 시 textarea(비고/특이사항) 세로 확장용 — 컨트롤러 _setupCellWiden와 짝.
   overflow:visible+z-index는 세로 확장분이 아래 행 위로 겹쳐 보이는 데만 필요(가로 확장은 없앰 —
   옆 컬럼 침범 버그라 제거, 2026-07-14). input, textarea 둘 다 대상 — textarea만 빠지면 스타일이
   안 먹어 브라우저 기본 포커스 outline이 셀 자체의 파란 outline과 따로 겹쳐 "이중 테두리"로 보임.
   padding:0 — 기본 .tabulator-cell 패딩(4px 6px, grid_skin.css)이 편집 중에도 안 지워져
   input 자체 패딩(4px, JS 인라인)과 이중으로 겹쳐 input이 셀 경계보다 사방 ~5~7px 안쪽에 떠서
   "셀 경계와 안 맞고 붕 뜬다" 버그(2026-07-14 재신고, 전 컬럼 공통). 편집 중엔 셀 패딩 0으로 비워
   input의 바깥 경계 = 셀 경계로 정확히 일치시킴(실측: diff 0,0,0,0). */
[data-dsv2-properties-grid-target="table"] .tabulator-cell.tabulator-editing,
[data-dsv2-sanga-grouped-target="leftTable"] .tabulator-cell.tabulator-editing,
[data-dsv2-sanga-grouped-target="rightTable"] .tabulator-cell.tabulator-editing {
  overflow: visible; z-index: 60; padding: 0;
}
/* 좌패널(320px 고정폭) 주소 넓히기 escape — 조상(.tabulator 루트/.tabulator-tableholder)의
   overflow를 풀어보는 시도는 가상스크롤 밖 다른 행들까지 통째로 드러나는 부작용이 있어(2026-07-21
   "input만 덮으면 되는데 다 나온다" 신고) 폐기. 대신 편집 중인 input+검색버튼 DOM 자체를
   document.body 밑 position:fixed 오버레이로 옮기는 방식(dsv2_sanga_grouped_controller.js
   #_portalizeAddressCell)으로 교체 — 조상 overflow/z-index는 전혀 안 건드리므로 이 스타일은
   불필요해져 제거. 오버레이 자체의 룩(그림자 등)은 JS 인라인 style로 직접 지정. */
[data-dsv2-properties-grid-target="table"] .tabulator-cell.tabulator-editing input,
[data-dsv2-properties-grid-target="table"] .tabulator-cell.tabulator-editing textarea,
[data-dsv2-sanga-grouped-target="leftTable"] .tabulator-cell.tabulator-editing input,
[data-dsv2-sanga-grouped-target="leftTable"] .tabulator-cell.tabulator-editing textarea,
[data-dsv2-sanga-grouped-target="rightTable"] .tabulator-cell.tabulator-editing input,
[data-dsv2-sanga-grouped-target="rightTable"] .tabulator-cell.tabulator-editing textarea {
  box-sizing: border-box; background: #fff; border: none; outline: none; resize: none;
}
/* 주소 검색 에디터(daum) — 검색버튼(공용 .db-action-btn 32px)이 dsv2 행높이(36px)에 안 맞아 셀 위로
   3px 삐지고 top-앵커되던 것 교정: wrap을 셀 높이 채워 input·버튼 세로중앙 + 버튼 컴팩트(22px).
   address 편집셀만 스코프(다른 컬럼 에디터 영향 0). 실측: 세로중앙 오프셋 0, 위아래 여백 대칭.
   우패널(rightTable)도 스코프 — "미배정 상가" 선택 시 주소 컬럼이 같은 daum 에디터로 편집 가능. */
[data-dsv2-properties-grid-target="table"] .tabulator-cell.tabulator-editing[tabulator-field="address"] > div,
[data-dsv2-sanga-grouped-target="leftTable"] .tabulator-cell.tabulator-editing[tabulator-field="address"] > div,
[data-dsv2-sanga-grouped-target="rightTable"] .tabulator-cell.tabulator-editing[tabulator-field="address"] > div {
  height: 100%; display: flex; align-items: center;
}
[data-dsv2-properties-grid-target="table"] .tabulator-cell.tabulator-editing[tabulator-field="address"] .db-action-btn,
[data-dsv2-sanga-grouped-target="leftTable"] .tabulator-cell.tabulator-editing[tabulator-field="address"] .db-action-btn,
[data-dsv2-sanga-grouped-target="rightTable"] .tabulator-cell.tabulator-editing[tabulator-field="address"] .db-action-btn {
  height: 22px;
}
/* 의뢰자(client) 셀 클릭 → 상담기록 팝업(컨트롤러 cellClick). 버튼이 아닌 일반 셀이라
   클릭 가능함을 커서로만 알림(문구·아이콘 추가 없음 — 최소 변경). 상가2 우패널(자식 호실)도
   동일 컬럼·동일 팝업(dsv2_sanga_grouped_controller#_buildRightColumns) — 정본 재사용. */
[data-dsv2-properties-grid-target="table"] .dsv2-client-clickable,
[data-dsv2-sanga-grouped-target="rightTable"] .dsv2-client-clickable { cursor: pointer; }
/* 상담기록 셀 버튼 — 셀렉트 아닌 일반 버튼(팝업 오픈 단일 액션). 회색 배경·하늘색 텍스트·보더 없음·중앙정렬·28px.
   ⚠️ 클래스명을 Rails 헬퍼/컨트롤러가 뱉는다 — 마크업 생성처와 스타일 정본이 떨어져 있으니 같이 옮길 것. */
.dsv2-cell-btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:28px; padding:0 14px;
  border:0; border-radius:6px;
  /* 닫기 버튼(.db-btn-secondary)과 동일 토큰 — 회색 배경 + 진한 회색 텍스트 */
  background:var(--db-color-fill-light); color:var(--db-color-text-sub);
  font-size:12px; font-weight:500; text-decoration:none; cursor:pointer;
  transition:background .15s ease;
}
.dsv2-cell-btn:hover { background:var(--db-color-fill-medium); }
/* 상가2 우패널 — 가로 스크롤바만 노출, 세로는 완전 숨김(둘 다 스크롤 기능 자체는 유지).
   ⚠️ 근인(2026-07-21 3차 → 2026-07-22 재수정, 두 번째 시행착오):
   1차 수정(2026-07-21, 3차 시도)이 scrollbar-width:thin을 걸어 가로바를 살리려 했는데,
   Chrome(121+) 표준 scrollbar-width는 축 구분 없이 세로·가로 전체에 적용되고
   ::-webkit-scrollbar 커스터마이징을 완전히 무효화한다(스펙상 scrollbar-width가 auto가
   아니면 우선) — thin이 세로바까지 되살렸는데 vertical{width:0} 규칙은 발동한 적이 없었음.
   2차 수정(2026-07-22, 첫 재수정)은 scrollbar-width:none으로 바꿔 세로는 확실히 숨겼지만,
   none도 auto가 아니므로 ::-webkit-scrollbar 커스터마이징을 그대로 무효화해 가로바까지
   통째로 사라짐 — "가로는 살리라고 했잖아" 재신고(2026-07-22).
   3차(현재): scrollbar-width는 auto로 둔다(스펙상 auto일 때만 ::-webkit-scrollbar가
   실제로 반영됨 — 실측: DOM CSSOM에서 auto로 세팅한 규칙만 webkit 커스터마이징과 공존,
   none/thin 둘 다 무효화 확인) — 그 위에 ::-webkit-scrollbar:vertical만 width:0+display:none
   으로 숨기고 :horizontal은 12px 두께로 스타일링해 노출. 좌패널(매물명/주소 2컬럼, 가로
   스크롤 불필요)은 전역 규칙(scrollbar-width:none, grid_skin.css)을 그대로 둬서
   안 건드림 — 우패널만 스코프. */
[data-dsv2-sanga-grouped-target="rightTable"].tabulator .tabulator-tableholder {
  scrollbar-width: auto;
}
[data-dsv2-sanga-grouped-target="rightTable"].tabulator .tabulator-tableholder::-webkit-scrollbar:vertical {
  width: 0 !important;
  display: none !important;
}
[data-dsv2-sanga-grouped-target="rightTable"].tabulator .tabulator-tableholder::-webkit-scrollbar:horizontal {
  height: 12px !important;
  display: block !important;
}
[data-dsv2-sanga-grouped-target="rightTable"].tabulator .tabulator-tableholder::-webkit-scrollbar-track {
  background: rgba(0,0,0,.05);
}
[data-dsv2-sanga-grouped-target="rightTable"].tabulator .tabulator-tableholder::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.32);
  border-radius: 6px;
}
[data-dsv2-sanga-grouped-target="rightTable"].tabulator .tabulator-tableholder::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.48);
}


/* 상가 일괄등록 모달 — 호실 접미사 셀렉(2026-07-31 뷰 인라인에서 회수).
   Tailwind `w-[76px]` 로는 못 덮는다: `.db-input`(db_components.css:78)이 `width:100%` 를 주는
   **unlayered** 규칙이라 Cascade Layers 상 layered 유틸을 항상 이긴다. 이 시트는 레이아웃에서
   db_components 뒤(head 55행)라 같은 특이도에서 순서로 이긴다. */
.sanga-unit-suffix { width: 76px; }