/* grid_skin.css — 전역 Tabulator 스킨 정본(매물·고객·팝업 모든 그리드 공통 룩).
   로드: application·embed_modal 레이아웃 + Tabulator 있는 독립 팝업(register/consult) —
   properties_grid 보다 먼저. 매물 전용 그리드 규칙(#grid·dsv2-linked-grid·property-detail-expand)은
   properties_grid.css 잔류.

   ⚠️ 단일 소유(2026-07-29): 기본 스킨이 여기 + m3-components.css + tailwind/application.css
      3곳에 흩어져 승자가 로드 순서와 !important 로만 갈리던 것을 이 파일로 모았고(1차),
      이어서 파일 안에 세 번씩 재정의되던 같은 셀렉터를 **셀렉터당 규칙 1개**로 합쳤다(2차).
      그리드 룩을 바꾸려면 다른 파일 뒤지지 말고 여기서 그 셀렉터 하나만 고친다.
      (별개 관심사는 그대로 — 페이저=shared_pagination / 드롭다운·우클릭=shared_tabulator_popup /
       매물 #grid 스코프=properties_grid / 클릭 피드백=interaction_feedback.)

   ⚠️ 규칙의 순서는 계약이다. 여기엔 특이도가 같아 **순서로만 승부가 갈리는 짝**이 있다:
        .tabulator-row.tabulator-row-even (0,2,0) 과 .tabulator-row:hover (0,2,0)
        → hover 가 뒤에 있어야 마우스 올린 짝수행이 hover 색을 낸다.
      각 규칙은 병합 전 그 셀렉터가 **마지막으로 등장하던 자리**에 그대로 놓여 있다.
      규칙을 "보기 좋게" 재배열하지 말 것 — 배열이 곧 승자다.

   ⚠️ 선언 순서도 계약이다. 한 규칙 안에서 `font:` 숏핸드 뒤에 `font-size`/`font-weight` 가
      오는 곳이 있다(헤더 col·행). 순서를 뒤집으면 숏핸드가 롱핸드를 덮어쓴다.

   ⚠️ 남아 있는 `!important` 는 **선언 7개 · 규칙 5곳**이다. 전부 실측으로 필요성이 확인된 것이다.
      (세는 단위를 밝혀 둔다 — 종전 주석의 "8개"는 선언인지 규칙인지 불명확해 대조가 안 됐다.
       footer 규칙 하나가 선언 3개를 갖는다: background·border-top·color.)
      85개를 하나씩 빼보며 계산값을 대조해, 빼도 아무것도 안 변하는 것들을 지웠다(3·4차).
      2026-07-31 에 hover 선언 1개(셀렉터 3종)를 더 지웠다 — 아래 "지운 것" 참조.
      남은 5곳 — "정리" 삼아 지우지 말 것:
        .tabulator-footer (background·border-top·color)   라이브러리 .tabulator .tabulator-footer 가 더 깊다
        .tabulator-cell.tabulator-editing (outline)       빼면 #1e40af 2px solid → #0f1419 3px none
        .tabulator .tabulator-header .tabulator-col-content (padding)
        .tabulator .tabulator-col-title (text-overflow)
        .tabulator .tabulator-page.active (color)
      이 5개는 **특이도**로 막힌 자리다(라이브러리가 우리보다 깊은 셀렉터를 쓴다).
      더 줄이려면 !important 대신 **셀렉터 특이도를 올려야** 한다(별건).

      지운 것 — .tabulator .tabulator-row:hover 3종의 background 선언(아래 hover 블록):
        여기 적혀 있던 근거가 **사실이 아니었다**. 종전 문구:
          "properties_grid 의 `.dsv2-row-selected { background:#fff3bf !important }` 를 눌러
           선택행 hover 회색을 유지한다. 빼면 노란 선택색이 이긴다."
        두 가지가 틀렸다:
          ① 그 `!important` 는 **없다**. PR #71(2026-07-29, properties_grid !important 30→9)에서
             지워졌고 지금은 `background:#fff3bf;` 다(git log -S '#fff3bf !important' 로 확인).
          ② 있었더라도 이 규칙이 그걸 누를 수 없다. 이 3종은 `.tabulator-row`(행)에 칠하고
             선택행 규칙은 `.tabulator-row.dsv2-row-selected .tabulator-cell`(셀)에 칠한다 —
             **다른 요소**라 캐스케이드가 겨루지 않는다.
        그리고 라이브에서 직접 재 보니 **있으나 없으나 계산값이 같았다**(2026-07-31, dev):
          실마우스 hover 상태에서 CSSOM 으로 priority 만 떼고 getComputedStyle 대조.
          매물 그리드 짝수행·홀수행 × (hover만 / 선택+hover) 4조합, 상가2 우패널 홀수행 2조합
          → 6조합 전부 행 rgb(241,245,249) · 셀 동일. 차이 0.
          이유: 짝/홀 hover 변형(0,4,0)이 경쟁자(-even/-odd 0,3,0, 선택행 0,3,0)를 특이도로
          이미 이긴다. 렌더된 행 42/42 가 -even/-odd 를 가져 그 변형이 항상 적용된다.
        → 근거도 틀렸고 효과도 0이라 지웠다. 되살리려면 같은 방식으로 차이를 먼저 보일 것.

   ⚠️ 전제: **tabulator_simple(CDN) 이 grid_skin 보다 먼저 로드된다.**
      나머지를 걷어낼 수 있었던 근거가 이 순서다 — 동률이면 뒤에 오는 우리가 이긴다.
      application·embed_modal·register_window 세 문서 모두 이 순서다(2026-07-29 정정. 전엔
      register_window 만 반대였고, 그 문서 하나 때문에 !important 21개가 남아 있었다).
      → 새 문서에서 Tabulator 를 쓸 땐 **라이브러리 CSS 를 grid_skin 앞에** 둘 것.
         뒤에 두면 스킨이 통째로 라이브러리 기본 테마에 진다. */

/* 헤더 컬럼 타이틀(Tabulator 기본 마크업 전체 경로) — 대문자·자간 */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  color: #1e293b;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── 행: .tabulator 스코프 없는 기본형(0,1,0~0,2,0) ── */
.tabulator-row {
  border-bottom: 1px solid #f0f2f5;
  min-height: 38px;
}
.tabulator-row.tabulator-row-even {
  background: #ffffff;
}
.tabulator-row.tabulator-row-odd {
  background: #fafbfc;
}
/* ⚠️ even/odd 와 특이도 동률 — 반드시 뒤에 있어야 hover 가 이긴다. */
.tabulator-row:hover {
  background: #eef2ff;
  cursor: pointer;
}

.tabulator-cell {
  border-right: 1px solid #f0f2f5;
  color: #0f1419;
  padding: 8px 10px;
  font-weight: 500; /* 비볼드 기본 500 (c-price/c-unit 은 자체 600 유지) */
}
/* 컬럼별 텍스트 색 override — 위 기본 .tabulator-cell !important 보다 이겨야 하므로
   클래스 2개 조합(.tabulator-cell.text-gray-400)으로 specificity 를 올림(둘 다 !important
   면 specificity 가 타이브레이커). GridConfig column_overrides.cssClass 로 컬럼에 부여.
   dsv2-properties 접수일자(received_date) 연한 회색 처리에 최초 사용. */
.tabulator-cell.text-gray-400 {
  color: var(--db-color-text-muted);
}
.tabulator-footer {
  background: #f8f9fb !important;
  border-top: 1px solid #e5e8ed !important;
  color: #6b7a8d !important;
}

/* 편집중 셀은 파란 outline+border 로 이미 표시되므로 배경만 흰색으로.
   (짝이던 .cell-invalid/.cell-warning/.cell-focus 상태 규칙은 부착 코드가 없어 소각 — 2026-07-28) */
.tabulator .tabulator-cell.tabulator-editing {
  background: #ffffff;
}

/* 비고·메모 셀: 말줄임 금지, 전체 텍스트 표시 + 행 높이 자동 확장 */
.tabulator-cell[tabulator-field="REMARKS"],
.tabulator-cell[tabulator-field="MEMO"] {
  white-space: normal;
  word-break: break-word;
  line-height: 1.45;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* 편집 그리드 컨테이너 — 가로 스크롤 차단 (responsive hide 로 조절) */
.tabulator[data-grid-mode="fit"] .tabulator-tableholder {
  overflow-x: hidden;
}
/* responsive collapse(숨겨진 컬럼 보기) 버튼 스타일 */
.tabulator .tabulator-responsive-collapse-toggle {
  background: #eef2ff;
  color: #4f6ef7;
  border-radius: 6px;
  width: 20px;
  height: 20px;
}
.tabulator .tabulator-responsive-collapse {
  padding: 10px 14px;
  background: #f8f9fb;
  border-top: 1px dashed #d1d6de;
  font-size: 12px;
}

/* 가격 컬럼은 기본 폰트와 통일 (매매가만 튀는 현상 방지) */
.tabulator-cell[tabulator-field="price"] {
  font-family: inherit;
}

/* ── 선택 행 / 원우회 엑셀식 인라인 편집 ── */
.tabulator .tabulator-row.tabulator-selected {
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.tabulator-cell.tabulator-cell-editable:hover {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
  cursor: text;
}
.tabulator-cell.tabulator-editing {
  outline: 2px solid var(--md-sys-color-primary) !important;
  background: var(--md-sys-color-surface-container-lowest);
  padding: 0;
}
.tabulator-cell.tabulator-editing input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  font-size: 13px;
}
/* background 숏핸드(구 tailwind 블록) → background-color(구 m3 블록) 순서 유지:
   뒤의 background-color 가 색을 확정한다. */
.tabulator-row.tabulator-selected {
  background: rgba(79, 110, 247, 0.08);
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
}
.tabulator-row .tabulator-cell input[type="checkbox"] {
  accent-color: var(--md-sys-color-primary);
  width: 16px;
  height: 16px;
}
.tabulator .tabulator-cell {
  border-right: 1px solid var(--md-sys-color-outline-variant);
}

/* 로딩 오버레이 — Tabulator 5.6.1 은 .tabulator-alert / .tabulator-alert-msg 를 씀(.tabulator-loader 아님).
   기본 흰 박스 + 검정 4px 보더(.tabulator-alert-state-msg)를 제거하고 어두운 오버레이만 남긴다. */
.tabulator .tabulator-alert { background: rgba(15,23,42,0.32); align-items: center; justify-content: center; }
.tabulator .tabulator-alert .tabulator-alert-msg,
.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg,
.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error {
  padding: 0; margin: 0;
  border: 0 none; border-radius: 0;
  background: none; background-color: transparent; box-shadow: none;
  color: #fff; font-weight: 600;
}

/* ── 헤더 ── */
.tabulator .tabulator-header { background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
/* ⚠️ `font:` 숏핸드 → `font-size`/`font-weight` 롱핸드 순서 필수(뒤집으면 숏핸드가 덮는다). */
.tabulator .tabulator-header .tabulator-col {
  background: #f8f9fb;
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 12px;
  font-weight: 500;
  border-right: 1px solid #e2e8f0;
}
.tabulator .tabulator-header .tabulator-col-content { padding: 5px 6px !important; }
/* 빈 목록 placeholder("데이터 없음") — 기본 bold(700) → 500 */
.tabulator .tabulator-placeholder .tabulator-placeholder-contents { font-weight: 500; }

/* ── 행(.tabulator 스코프) ──
   min-height 36px — 실제 콘텐츠(폰트12px+padding4px*2 등) 높이가 36px 정도라 40px 으로 띄우면
   행이 셀 내용보다 커져 세로선(border-right)이 짧게 뜬 것처럼 끊겨 보임(DevTools 실측으로
   40→36 확인, height:100% 셀 스트레치 대신 min-height 자체를 실제 콘텐츠 높이에 맞춤).
   테두리 #f1f5f9(거의 안 보이는 연회색) → 진회색은 2026-07-23 요청.
   ⚠️ `font:` 숏핸드 → `font-size` 롱핸드 순서 필수. */
.tabulator .tabulator-row {
  height: auto;
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface);
  font-size: 13px;
  border-bottom: 1px solid #47556985;
  min-height: 36px;
}
/* ⚠️ -even/-odd(0,3,0)가 아래에 있어 순수 :hover(0,3,0)를 이긴다 —
   그래서 짝/홀 전용 hover 변형(0,4,0)을 함께 둔다. 셋을 쪼개지 말 것.
   그 (0,4,0) 변형이 이미 이기므로 !important 는 필요 없다(2026-07-31 라이브 실측으로 제거).
   렌더된 행 42/42 가 -even/-odd 클래스를 가지므로 (0,4,0) 변형이 **항상** 적용된다 —
   순수 :hover(0,3,0) 하나만으로는 부족했던 게 !important 가 붙어 있던 이유였다. */
.tabulator .tabulator-row:hover,
.tabulator .tabulator-row.tabulator-row-even:hover,
.tabulator .tabulator-row.tabulator-row-odd:hover { background: #f1f5f9; }
.tabulator .tabulator-col-title {
  font-weight: 700;
  font-size: 12px;
  color: #0f172a;
  text-overflow: clip !important;
}
.tabulator .tabulator-row .tabulator-cell {
  padding: 4px 6px;
  border-right: 1px solid #47556985;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: clip;
}
.tabulator .tabulator-row.tabulator-row-even { background: #fff; }
.tabulator .tabulator-row.tabulator-row-odd { background: #fafbfc; }
.tabulator .tabulator-footer { display: none; }

/* ── 루트 ──
   background #f1f5f9 = 좌우 여백색. 행은 각자 배경(#fff/#fafbfc)을 가지므로 데이터 영역은
   유지되고, 마지막 행 아래 빈 띠만 여백색으로 blend 된다.
   box-shadow 만 토큰 기반(구 m3 블록 유산) — 나머지는 !important 로 확정. */
.tabulator {
  border-radius: 12px;
  box-shadow: var(--md-sys-elevation-1);
  border: none;
  font-family: var(--db-font-sans);
  font-size: 12px;
  background: #f1f5f9;
}
/* 타뷸레이터 내부 스크롤 유지 + 스크롤바 시각 숨김 (세로·가로 모두). */
.tabulator .tabulator-tableholder {
  background: #f1f5f9;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabulator .tabulator-tableholder::-webkit-scrollbar { width: 0; height: 0; display: none; }

.tabulator .tabulator-page.active { background: var(--db-color-primary); color: #fff !important; }