/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Number input 스피너(화살표) 전역 제거 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Global Scrollbar (Light Mode) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f9fafb;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Dark Mode Scrollbar — 다크 모드 페이지에서 body에 .dark-scrollbar 클래스 추가 */
.dark-scrollbar ::-webkit-scrollbar,
.dark-scrollbar::-webkit-scrollbar { width: 10px; height: 10px; }
.dark-scrollbar ::-webkit-scrollbar-track,
.dark-scrollbar::-webkit-scrollbar-track { background: #1e293b; }
.dark-scrollbar ::-webkit-scrollbar-thumb,
.dark-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 5px; border: 2px solid #1e293b; }
.dark-scrollbar ::-webkit-scrollbar-thumb:hover,
.dark-scrollbar::-webkit-scrollbar-thumb:hover { background: #64748b; }


/* Dark theme: 모든 입력 필드 텍스트 색상 강제
   모바일 브라우저에서 input 텍스트가 검정으로 표시되는 문제 해결
   원인: -webkit-text-fill-color가 브라우저 기본값(검정)일 때 Tailwind의 color: white를 덮어씀
   해결: -webkit-text-fill-color를 currentColor로 설정하여 color 속성을 따르게 함 */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
textarea,
select {
  -webkit-text-fill-color: currentColor;
}

/* Dark theme autofill override
   Chrome/Safari: :-webkit-autofill 선택 시 흰 배경을 강제 적용함.
   box-shadow inset 트릭으로 배경을 덮어 다크 테마를 유지함.
   다크 테마(slate 계열 body) 컨텍스트에만 적용 — 라이트 레이아웃은 기본 흰색 유지. */
body[class*="bg-slate-"] input:-webkit-autofill,
body[class*="bg-slate-"] input:-webkit-autofill:hover,
body[class*="bg-slate-"] input:-webkit-autofill:focus,
body[class*="bg-slate-"] input:-webkit-autofill:active,
body[class*="bg-slate-"] textarea:-webkit-autofill,
body[class*="bg-slate-"] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #334155 inset !important; /* slate-700 */
  -webkit-text-fill-color: #ffffff !important;                /* white */
  caret-color: #ffffff;
  transition: background-color 0s 9999s; /* 배경 전환 지연으로 깜빡임 방지 */
}
body[class*="bg-slate-"] input:autofill,
body[class*="bg-slate-"] textarea:autofill,
body[class*="bg-slate-"] select:autofill {
  background-color: #334155 !important; /* slate-700 - Firefox */
  color: #ffffff !important;
}

/* 라이트 테마(popup_form, user/my 등) 자동완성: 흰 배경 + 검정 글자 강제 */
body.bg-gray-50 input:-webkit-autofill,
body.bg-gray-50 input:-webkit-autofill:hover,
body.bg-gray-50 input:-webkit-autofill:focus,
body.bg-gray-50 input:-webkit-autofill:active,
body.bg-gray-50 textarea:-webkit-autofill,
body.bg-gray-50 select:-webkit-autofill,
body.bg-white input:-webkit-autofill,
body.bg-white input:-webkit-autofill:hover,
body.bg-white input:-webkit-autofill:focus,
body.bg-white input:-webkit-autofill:active,
body.bg-white textarea:-webkit-autofill,
body.bg-white select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important; /* gray-900 */
  caret-color: #111827;
  transition: background-color 0s 9999s;
}
body.bg-gray-50 input:autofill,
body.bg-gray-50 textarea:autofill,
body.bg-gray-50 select:autofill,
body.bg-white input:autofill,
body.bg-white textarea:autofill,
body.bg-white select:autofill {
  background-color: #ffffff !important;
  color: #111827 !important;
}

/* 스크롤바 완전 숨김 (가로 스크롤 영역용) */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom Scrollbar (공통 기본: 모바일 숨김, 데스크톱 6px, 화살표 제거)
   ⚠ body.dark-scrollbar 의 descendant 룰 (`.dark-scrollbar ::-webkit-scrollbar`) 과
   specificity 가 동일해 캐스케이드 순서에 의존했으나, 라이트 모달이 다크 페이지에 떠있는
   케이스에서 가끔 덮어쓰기 실패. 모든 셀렉터에 body 를 prefix 해 specificity 를 한 단계
   올림 → .dark-scrollbar 컨텍스트에서도 확실히 우선 적용. */
body .custom-scrollbar::-webkit-scrollbar,
body .custom-scrollbar-light::-webkit-scrollbar {
  width: 0px;   /* 모바일: 숨김 */
  height: 0px;
}
@media (min-width: 768px) {
  body .custom-scrollbar::-webkit-scrollbar,
  body .custom-scrollbar-light::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}
body .custom-scrollbar::-webkit-scrollbar-button,
body .custom-scrollbar-light::-webkit-scrollbar-button {
  display: none;
}

/* 다크 스크롤바 (사용자관리 등 다크 배경) */
body .custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
body .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #475569; /* slate-600 */
  border-radius: 3px;
  border: none;
}
body .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* slate-500 */
}

/* 라이트 스크롤바 (일반 서비스 등 라이트 배경) */
body .custom-scrollbar-light::-webkit-scrollbar-track {
  background: transparent;
}
body .custom-scrollbar-light::-webkit-scrollbar-thumb {
  background: #d1d5db; /* gray-300 */
  border-radius: 3px;
  border: none;
}
body .custom-scrollbar-light::-webkit-scrollbar-thumb:hover {
  background: #9ca3af; /* gray-400 */
}

/* 네이티브 셀렉터 스타일 (호실 목록 등 대량 반복 영역용) */
.native-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px;
}

/* 모바일 달력: 셀 배지를 도트로 축소 (JS에서 업데이트된 배지도 도트로 표시) */
.mobile-calendar-grid [id^="cell-badges-"] > div:not([data-todo-badge]) {
  width: 6px !important;
  height: 6px !important;
  min-width: 0;
  padding: 0 !important;
  border-radius: 9999px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.mobile-calendar-grid [id^="cell-badges-"] > div:not([data-todo-badge]) * {
  display: none;
}

/* Property Item: 호버 / 선택 상태 */
[data-property-item] {
  transition: background-color 150ms ease, border-left-color 150ms ease;
  border-left: 3px solid transparent;
}

[data-property-item]:hover {
  background-color: rgb(30 41 59 / 0.6); /* slate-800/60 */
}

[data-property-item].property-selected {
  background-color: rgb(30 41 59 / 0.8); /* slate-800/80 */
  border-left-color: #22c55e; /* green-500 */
}

[data-property-item].property-selected:hover {
  background-color: rgb(30 41 59 / 0.9);
}

[data-property-item].property-selected [data-property-trigger] {
  background-color: rgb(51 65 85 / 0.5); /* slate-700/50 — 헤더 강조 */
}

/* Building/Land Item: 호버 / 선택 상태 */
[data-building-item] {
  transition: background-color 150ms ease, border-left-color 150ms ease;
  border-left: 3px solid transparent;
}

[data-building-item] [data-building-trigger] {
  transition: background-color 150ms ease;
}

[data-building-item] [data-building-trigger]:hover {
  background-color: rgb(30 41 59 / 0.6); /* slate-800/60 */
}

[data-submission-item].submission-selected {
  background-color: rgb(30 41 59 / 0.8);
  border-left-color: #3b82f6; /* blue-500 */
}

[data-submission-item].submission-selected [data-submission-trigger] {
  background-color: rgb(51 65 85 / 0.5);
}

[data-submission-item].submission-selected [data-submission-trigger]:hover {
  background-color: rgb(51 65 85 / 0.65);
}

[data-search-item].search-selected {
  background-color: rgb(30 41 59 / 0.8);
  border-left-color: #10b981; /* emerald-500 */
}

[data-search-item].search-selected [data-search-trigger] {
  background-color: rgb(51 65 85 / 0.5);
}

[data-search-item].search-selected [data-search-trigger]:hover {
  background-color: rgb(51 65 85 / 0.65);
}

[data-building-item].building-selected {
  background-color: rgb(30 41 59 / 0.8);
  border-left-color: #3b82f6; /* blue-500 */
}

[data-building-item].building-selected [data-building-trigger] {
  background-color: rgb(51 65 85 / 0.5); /* slate-700/50 — 헤더 강조 */
}

[data-building-item].building-selected [data-building-trigger]:hover {
  background-color: rgb(51 65 85 / 0.65);
}

/* 구해요 관리 아코디언 - 열린 상태 좌측 액센트 바 */
.search-card-open {
  border-left: 3px solid #3b82f6 !important; /* blue-500 */
}

/* 임대관리 아코디언 - 열린 상태 좌측 액센트 바 (구해요와 동일 스타일) */
.rental-accordion-open {
  border-left: 3px solid #3b82f6 !important; /* blue-500 */
}

/* 임대관리 납부 일정 달력 — 선택된 날짜 셀 (미묘한 하이라이트) */
[data-user--rental-management--schedule--calendar-target="cell"].is-selected {
  background-color: #eff6ff; /* blue-50 약간 진하게 */
  box-shadow: inset 2px 0 0 0 #60a5fa; /* 좌측 2px blue-400 accent */
}

/* Custom Cluster Marker */
.custom-cluster-marker:hover {
  transform: scale(1.1) !important;
  background: rgb(37, 99, 235) !important; /* blue-600 */
}

/* Mobile Header Hide/Show Animation */
.mobile-header {
  transition: transform 300ms ease-in-out;
}

.mobile-header.header-hidden-up {
  transform: translateY(-100%) !important;
}

/* Gradient Spinner (Loading Animation) */
.gradient-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, #60a5fa 70%, transparent 100%);
  animation: gradient-spin 0.8s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

@keyframes gradient-spin {
  to { transform: rotate(360deg); }
}

/* Turbo Drive 페이지 이동 시 상단 로딩 바 */
html[aria-busy="true"]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0076ff;
  z-index: 2147483647;
  animation: main-content-loading 1.2s ease-in-out infinite;
}

@keyframes main-content-loading {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Turbo Frame 로딩 오버레이 — #main_content(페이지 전체 영역)는 제외 */
turbo-frame[aria-busy="true"]:not(#main_content) {
  display: block;
  position: relative;
  min-height: 100px;
  pointer-events: none;
}

turbo-frame[aria-busy="true"]:not(#main_content) > * {
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

/* 건축물대장 검색: 로딩 중 기존 내용 완전히 숨김 */
turbo-frame#br-search-results[aria-busy="true"] > * {
  opacity: 0;
  visibility: hidden;
}

/* 건축물대장 상세: 로딩 중 기존 내용 완전히 숨김 */
turbo-frame#br-detail-content[aria-busy="true"] > * {
  opacity: 0;
  visibility: hidden;
}

/* 토지정보 상세: 로딩 중 기존 내용 완전히 숨김 */
turbo-frame#land-detail-content[aria-busy="true"] > * {
  opacity: 0;
  visibility: hidden;
}

/* 공시지가 상세: 로딩 중 기존 내용 완전히 숨김 */
turbo-frame#op-detail-content[aria-busy="true"] > * {
  opacity: 0;
  visibility: hidden;
}

/* 실거래가 탭 lazy-load: HTML 내부 스피너와 CSS ::after 스피너 중복 방지 */
turbo-frame#public-records-real-estate-deals[aria-busy="true"] > * {
  opacity: 0;
  visibility: hidden;
}

/* 레지스트리 패널 외부 프레임: 로딩 중 기존 내용 완전히 숨김
   외부 프레임 CSS 스피너 + 새 콘텐츠 HTML 스피너 동시 표시 방지 */
turbo-frame#left-registry-frame[aria-busy="true"] > *,
turbo-frame#right-registry-frame[aria-busy="true"] > * {
  opacity: 0;
  visibility: hidden;
}

/* 매물관리 결과 프레임: 탭 전환 시 자체 스켈레톤 표시 — CSS 스피너/opacity 중복 방지 */
turbo-frame#properties_results[aria-busy="true"] > * {
  opacity: 1;
}
turbo-frame#properties_results[aria-busy="true"]::after {
  display: none;
}

turbo-frame[aria-busy="true"]:not(#main_content)::after {
  content: "";
  position: absolute;
  top: 120px;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, #60a5fa 70%, transparent 100%);
  animation: gradient-spin 0.8s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  z-index: 10;
}

/* 자식 패널 컨텍스트에서 숨길 요소 */
[data-child-panel] [data-hide-in-child-panel] {
  display: none !important;
}

/* 마크다운 렌더링 스타일 (다크 테마) */
.prose-dark h1 { font-size: 1.25rem; font-weight: 700; color: #f1f5f9; margin: 1.25rem 0 0.5rem; }
.prose-dark h2 { font-size: 1.1rem; font-weight: 600; color: #f1f5f9; margin: 1rem 0 0.5rem; }
.prose-dark h3 { font-size: 0.95rem; font-weight: 600; color: #e2e8f0; margin: 0.75rem 0 0.375rem; }
.prose-dark p { margin: 0.125rem 0; }
.prose-dark ul, .prose-dark ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.prose-dark ul { list-style-type: disc; }
.prose-dark ol { list-style-type: decimal; }
.prose-dark li { margin: 0.25rem 0; }
.prose-dark strong { font-weight: 600; color: #f1f5f9; }
.prose-dark em { font-style: italic; }
.prose-dark del { text-decoration: line-through; color: #64748b; }
.prose-dark code { font-size: 0.85em; padding: 0.15rem 0.4rem; background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(71, 85, 105, 0.4); border-radius: 0.25rem; color: #93c5fd; font-family: ui-monospace, monospace; }
.prose-dark pre { margin: 0.75rem 0; padding: 0.75rem 1rem; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(51, 65, 85, 0.5); border-radius: 0.5rem; overflow-x: auto; }
.prose-dark pre code { padding: 0; background: none; border: none; color: #cbd5e1; font-size: 0.8rem; }
.prose-dark a { color: #60a5fa; text-decoration: underline; text-underline-offset: 2px; }
.prose-dark a:hover { color: #93bbfd; }
.prose-dark blockquote { margin: 0.75rem 0; padding: 0.5rem 1rem; border-left: 3px solid rgba(59, 130, 246, 0.4); background: rgba(30, 41, 59, 0.4); border-radius: 0 0.25rem 0.25rem 0; }
.prose-dark table { width: 100%; margin: 0.75rem 0; border-collapse: collapse; }
.prose-dark th, .prose-dark td { padding: 0.375rem 0.75rem; border: 1px solid rgba(51, 65, 85, 0.5); text-align: left; }
.prose-dark th { background: rgba(30, 41, 59, 0.6); font-weight: 600; color: #e2e8f0; }
.prose-dark hr { margin: 1rem 0; border: none; border-top: 1px solid rgba(51, 65, 85, 0.5); }

/* ===== 지도 리스트 카드 공통 스타일 (구해요/실거래가/매물장) ===== */
.map-list-card {
  position: relative;
  background-color: white;
  border-radius: 0.75rem;        /* rounded-xl */
  border: 1px solid #f3f4f6;     /* border-gray-100 */
  padding: 0.75rem;              /* p-3 */
  cursor: pointer;
  transition: all 200ms ease;
}
.map-list-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.map-list-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); /* shadow-md */
}
.map-list-card .card-indicator {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: #3b82f6;     /* bg-blue-500 */
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 0 0 0.75rem 0.75rem;
  transition: transform 200ms ease;
}
.map-list-card:hover .card-indicator,
.map-list-card.active .card-indicator {
  transform: scaleX(1);
}

/* ── Tiptap WYSIWYG 에디터 (다크모드 어드민) ── */
.prose-editor {
  word-break: keep-all;
}
.prose-editor:focus {
  outline: none;
}
.prose-editor p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #64748b;
  pointer-events: none;
  height: 0;
}
.prose-editor h1 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.prose-editor h2 { font-size: 1.25rem; font-weight: 700; margin: 1.25rem 0 0.5rem; }
.prose-editor h3 { font-size: 1.1rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.prose-editor p { margin-bottom: 0.75rem; }
.prose-editor ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.prose-editor ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 0.75rem; }
.prose-editor li { margin-bottom: 0.25rem; }
.prose-editor blockquote {
  border-left: 4px solid #3b82f6;
  padding-left: 1rem;
  font-style: italic;
  color: #94a3b8;
  margin-bottom: 0.75rem;
}
.prose-editor pre {
  background: #1e293b;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  overflow-x: auto;
  font-size: 0.875rem;
}
.prose-editor code {
  background: #1e293b;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: #93c5fd;
}
.prose-editor pre code { background: none; padding: 0; }
.prose-editor a { color: #60a5fa; text-decoration: underline; }
.prose-editor a:hover { color: #93c5fd; }
.prose-editor hr { border-color: #334155; margin: 1.5rem 0; }
.prose-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
}
.prose-editor strong { font-weight: 600; }
.prose-editor div[data-youtube-video] {
  margin: 1rem 0;
}
.prose-editor div[data-youtube-video] iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 0.5rem;
}

/*
 * 실거래가 탭 다크 스코프
 *
 * 공부열람(토지/건물/공시가격) 패널에서 light=false로 임베드될 때
 * real_estate_deals/panels/detail/content 파셜의 라이트 전용 회색 클래스를
 * 슬레이트 계열로 덮어쓰기 위한 CSS 스코프. 스탠드얼론 실거래가 페이지는
 * 래퍼 없이 그대로 렌더되므로 영향 없음.
 */
.red-dark-scope { color: rgb(226 232 240); }
.red-dark-scope .text-gray-900 { color: rgb(255 255 255); }
.red-dark-scope .text-gray-800 { color: rgb(226 232 240); }
.red-dark-scope .text-gray-700 { color: rgb(203 213 225); }
.red-dark-scope .text-gray-600 { color: rgb(148 163 184); }
.red-dark-scope .text-gray-500 { color: rgb(148 163 184); }
.red-dark-scope .text-gray-400 { color: rgb(100 116 139); }
.red-dark-scope .text-gray-300 { color: rgb(71 85 105); }
.red-dark-scope .bg-white { background-color: rgb(30 41 59); }
.red-dark-scope .bg-gray-100 { background-color: rgb(51 65 85 / 0.5); }
.red-dark-scope .bg-gray-50 { background-color: rgb(51 65 85 / 0.3); }
.red-dark-scope .border-gray-100 { border-color: rgb(51 65 85 / 0.3); }
.red-dark-scope .border-gray-200 { border-color: rgb(51 65 85 / 0.5); }
.red-dark-scope .border-gray-300 { border-color: rgb(51 65 85); }
.red-dark-scope .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(51 65 85 / 0.3); }
.red-dark-scope .hover\:bg-gray-50:hover { background-color: rgb(51 65 85 / 0.3); }
.red-dark-scope .hover\:bg-gray-100:hover { background-color: rgb(51 65 85 / 0.5); }
.red-dark-scope .bg-blue-50 { background-color: rgb(59 130 246 / 0.12); }
.red-dark-scope .text-blue-600 { color: rgb(96 165 250); }
.red-dark-scope .text-blue-500 { color: rgb(96 165 250); }
.red-dark-scope .ring-blue-200 { --tw-ring-color: rgb(59 130 246 / 0.35); }
.red-dark-scope .ring-emerald-200 { --tw-ring-color: rgb(16 185 129 / 0.35); }
.red-dark-scope .ring-gray-200 { --tw-ring-color: rgb(71 85 105 / 0.5); }
.red-dark-scope .hover\:bg-blue-50:hover { background-color: rgb(59 130 246 / 0.18); }
.red-dark-scope .hover\:bg-blue-100:hover { background-color: rgb(59 130 246 / 0.24); }
.red-dark-scope .hover\:text-blue-500:hover { color: rgb(147 197 253); }
.red-dark-scope .hover\:text-blue-600:hover { color: rgb(147 197 253); }
.red-dark-scope .border-blue-500 { border-color: rgb(96 165 250); }
.red-dark-scope .bg-emerald-50 { background-color: rgb(16 185 129 / 0.15); }
.red-dark-scope .text-emerald-500 { color: rgb(52 211 153); }
.red-dark-scope .text-emerald-600 { color: rgb(52 211 153); }
.red-dark-scope .border-emerald-200 { border-color: rgb(16 185 129 / 0.3); }
.red-dark-scope .hover\:bg-emerald-100:hover { background-color: rgb(16 185 129 / 0.25); }
.red-dark-scope .text-red-500 { color: rgb(248 113 113); }
.red-dark-scope .text-red-400 { color: rgb(248 113 113); }
.red-dark-scope input[type="text"],
.red-dark-scope input[type="number"] {
  background-color: rgb(51 65 85);
  color: rgb(226 232 240);
  border-color: rgb(71 85 105);
}
.red-dark-scope input[type="text"]::placeholder,
.red-dark-scope input[type="number"]::placeholder { color: rgb(100 116 139); }

/* 커스텀 셀렉트 키보드 네비게이션 포커스 — 라이트/다크 모두에서 자연스러운 반투명 블루 틴트 */
.cs-keyboard-focused {
  background-color: rgba(59, 130, 246, 0.15);
}

/* 사이드바 가시성 — body 클래스로 제어 (data-turbo-permanent 사이드바 보존 호환) */
body.hide-sidebar #user-sidebar,
body.mobile-page #user-sidebar { display: none !important; }

/* ─── 매물관리 — input grid ───────────────────────────────────────────────
   각 셀 = <input>. 한글 IME native 작동, sticky header + 행번호 컬럼 + 격자 시각. */

.ledger-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  table-layout: fixed;
  width: max-content;
  background: white;
}

/* 헤더 — sticky, 라이트 톤 */
.ledger-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;          /* slate-50 — 라이트 */
  color: #475569;                /* slate-600 */
  font-weight: 600;
  font-size: 12px;
  padding: 6px 8px;
  border-right: 1px solid #e2e8f0;  /* slate-200 */
  border-bottom: 1px solid #cbd5e1; /* slate-300 */
  text-align: center;
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;       /* width = 총 시각 너비 (padding/border 포함) */
  overflow: visible;            /* 커스텀 툴팁(.th-tooltip)이 헤더 밖으로 나오게 */
}

/* 헤더 커스텀 툴팁 — native title 대체. 어두운 배경 + 위쪽 작은 화살표.
   500ms hover 후 등장 (intent 기반), 즉시 사라짐. pointer-events: none 으로 hover 방해 X. */
.ledger-grid thead th .th-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 4px;
  background: #0f172a;          /* slate-900 — 짙은 다크 */
  color: #f1f5f9;                /* slate-100 */
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  width: 280px;
  white-space: normal;
  text-align: left;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease 0.5s, visibility 0s linear 0.5s;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
  pointer-events: none;
}
.ledger-grid thead th .th-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 14px;
  border: 6px solid transparent;
  border-bottom-color: #0f172a;
}
.ledger-grid thead th:hover .th-tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.5s, 0s;
}
/* 드래그/리사이즈/필터 드롭다운 활성 중엔 툴팁 숨김 — 방해 방지 */
.ledger-grid thead th:hover .th-resize-handle:hover ~ .th-tooltip,
.ledger-grid thead th.filtered:hover .th-tooltip {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s;
}
.ledger-grid tbody td {
  box-sizing: border-box;
}
/* 컬럼 너비 드래그 핸들 — 경계에 정확한 hit zone + hover 시 진한 한 줄 indicator.
   sensitivity 와 정확성 균형. 더블라인은 호환성 이슈로 단념, 단일 진한 선이 가장 명확. */
.ledger-grid thead th .th-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}
.ledger-grid thead th .th-resize-handle::after {
  content: "";
  display: block;
  position: absolute;
  top: 15%;
  left: 2px;            /* 핸들 가운데 */
  width: 2px;
  height: 70%;
  background: #1e3a8a;  /* blue-900 — 진한 파랑 (정확 위치 명시) */
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.1s ease-out;
  pointer-events: none;
}
.ledger-grid thead th .th-resize-handle:hover::after {
  opacity: 1;
}
/* 컬럼 너비 드래그 가이드 — 드래그 중에만 노출. transform 으로만 이동 (GPU 합성). */
.ledger-col-resize-guide {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background: #3b82f6;          /* blue-500 */
  pointer-events: none;
  z-index: 9999;
  will-change: transform;       /* compositor 힌트 */
}
.ledger-grid thead th .th-sort {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  color: #3b82f6;                /* blue-500 */
}
.ledger-grid thead th.sorted {
  background: #eff6ff !important;  /* blue-50 — 정렬 중 시각 */
  color: #1d4ed8;                  /* blue-700 */
}
.ledger-grid thead th.filtered {
  background: #fef3c7 !important;  /* amber-100 — 필터 적용 시각 */
  color: #92400e;                  /* amber-800 */
}
/* 헤더 필터 아이콘 — 우측 작은 버튼 */
.ledger-grid thead th .th-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 0;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: #94a3b8;                /* slate-400 */
  cursor: pointer;
  border-radius: 3px;
  vertical-align: middle;
}
.ledger-grid thead th .th-filter-btn:hover {
  background: #e2e8f0;          /* slate-200 */
  color: #475569;                /* slate-600 */
}
.ledger-grid thead th.sorted .th-filter-btn,
.ledger-grid thead th.filtered .th-filter-btn {
  color: #1d4ed8;
}

/* 필터/정렬 드롭다운 — body 직속 portal (테이블 overflow 회피) */
.ledger-filter-dropdown {
  position: fixed;
  z-index: 1000;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  min-width: 240px;
  font-size: 12px;
}
.ledger-filter-dropdown .lf-section {
  padding: 6px 10px;
}
.ledger-filter-dropdown .lf-sort {
  display: flex;
  gap: 4px;
}
.ledger-filter-dropdown .lf-divider {
  border-top: 1px solid #e2e8f0;
}
.ledger-filter-dropdown .lf-btn {
  flex: 1;
  padding: 4px 8px;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  font-size: 11px;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
}
.ledger-filter-dropdown .lf-btn:hover {
  background: #f1f5f9;
}
.ledger-filter-dropdown .lf-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}
.ledger-filter-dropdown .lf-btn.primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}
.ledger-filter-dropdown .lf-btn.primary:hover {
  background: #2563eb;
}
.ledger-filter-dropdown .lf-search {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  font-size: 11px;
  outline: none;
}
.ledger-filter-dropdown .lf-search:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}
.ledger-filter-dropdown .lf-actions {
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
}
.ledger-filter-dropdown .lf-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 11px;
  color: #334155;
}
.ledger-filter-dropdown .lf-row:hover {
  background: #f1f5f9;
}
.ledger-filter-dropdown .lf-row input[type=checkbox] {
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
}
.ledger-filter-dropdown .lf-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-color: #cbd5e1 #f8fafc;     /* Firefox 라이트 톤 */
}
.ledger-filter-dropdown .lf-list::-webkit-scrollbar {
  width: 8px;
}
.ledger-filter-dropdown .lf-list::-webkit-scrollbar-track {
  background: #f8fafc;                   /* slate-50 */
}
.ledger-filter-dropdown .lf-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;                   /* slate-300 */
  border-radius: 4px;
}
.ledger-filter-dropdown .lf-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;                   /* slate-400 */
}
.ledger-filter-dropdown .lf-buttons {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.ledger-grid thead .row-num-header {
  position: sticky;
  left: 0;
  z-index: 3;                   /* row 번호 + thead 교차 코너 */
  width: 40px;
  min-width: 40px;
  background: #f1f5f9;          /* slate-100 — 코너만 살짝 진하게 */
  cursor: pointer;              /* 클릭 가능 — 모든 컬럼 선택 */
  user-select: none;
  position: sticky;             /* sticky 유지 — ::after 의 absolute 기준점 */
}
/* Excel 스타일 코너 트라이앵글 — 우하단 ◢ (선택 가능 표시, 항상 보임) */
.ledger-grid thead .row-num-header::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #94a3b8;   /* slate-400 — 기본 회색 */
  transition: border-right-color 0.12s;
}
.ledger-grid thead .row-num-header:hover {
  background: #e2e8f0;          /* slate-200 */
}
.ledger-grid thead .row-num-header:hover::after {
  border-right-color: #475569;  /* slate-600 — hover 진하게 */
}
.ledger-grid thead .row-num-header.col-all-selected {
  background: #2563eb;          /* blue-600 — Excel 선택 톤 (진한 파랑) */
}
.ledger-grid thead .row-num-header.col-all-selected::after {
  border-right-color: #ffffff;  /* 선택 시 흰색 트라이앵글 */
}
.ledger-grid thead th.col-selected {
  background: #bfdbfe !important;   /* blue-200 — 선택된 컬럼 헤더 (Excel 톤) */
  color: #1e3a8a;                    /* blue-900 */
}

/* 행번호 셀 — sticky 좌측, 클릭으로 행 선택 가능 */
.ledger-grid tbody .row-num {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 40px;
  min-width: 40px;
  background: #f8fafc;          /* slate-50 */
  color: #94a3b8;                /* slate-400 */
  text-align: center;
  font-size: 11px;
  border-right: 1px solid #cbd5e1;
  border-bottom: 1px solid #e2e8f0;
  user-select: none;
  cursor: pointer;
}
.ledger-grid tbody .row-num:hover {
  background: #e2e8f0;          /* slate-200 */
}
/* 선택된 행 — 모두 blue 톤으로 통일. !important 로 status(실패/임시/중복) 색을 덮음
   (Excel 패턴 — 선택 시각이 항상 우선). */
.ledger-grid tbody tr.row-selected .row-num {
  background: #3b82f6 !important;  /* blue-500 */
  color: white !important;
  font-weight: 600;
}
.ledger-grid tbody tr.row-selected td:not(.row-num) {
  background: #dbeafe !important;  /* blue-100 — status 색 덮을 만큼 살짝 진하게 */
}
.ledger-grid tbody tr.row-selected td textarea:read-only {
  background: transparent !important;
}

/* 데이터 셀 td — textarea 컨테이너. 기본 높이 44px (2줄), 짧은 텍스트는 상하 가운데 정렬.
   textarea 는 단일 라인 28px → td 의 vertical-align middle 이 textarea 를 td 안 중앙에 배치 → 텍스트 가운데 보임.
   wrap 시 textarea 가 td 보다 커지면 td 도 같이 성장. */
.ledger-grid tbody td {
  padding: 0;
  height: 44px;                  /* 행 기본 높이 — 1줄 텍스트도 시각적 여유 + 가운데 정렬 작동 */
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  background: white;
  vertical-align: middle;         /* 상하 가운데 — textarea 가 td 보다 작을 때 중앙 */
}

/* 가상 스크롤이 이미 화면 밖 행을 unmount 시키므로 content-visibility 불필요.
   wrap 시 가변 행 높이 — 셀 내용에 따라 자동 신장. */

/* 셀 textarea — 자동 줄바꿈 (white-space: pre-wrap). 한글 IME native + 좁은 컬럼 시 wrap.
   단일 라인 = 28px. td 가 height 44px 강제 → vertical-align middle 이 textarea 를 td 가운데 배치. */
.ledger-grid tbody td textarea {
  width: 100%;
  min-height: 28px;
  border: none;
  outline: none;
  padding: 4px 6px;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: #1e293b;                /* slate-800 */
  box-sizing: border-box;
  caret-color: transparent;      /* 기본 = 클릭만 한 상태 = caret 숨김 (Excel 느낌) */
  resize: none;                   /* 사용자 수동 리사이즈 핸들 제거 */
  overflow: hidden;               /* 스크롤바 숨김 — height 자동 조정 가정 */
  white-space: pre-wrap;          /* 자동 줄바꿈 + 사용자 \n 보존 (Alt+Enter 줄바꿈 표시) */
  word-wrap: break-word;
  line-height: 1.4;
  vertical-align: top;
  display: block;
}
/* 클릭만 한 상태 — selection 시각도 숨김 (Excel 셀 선택 = 텍스트 selection 표시 없음).
   selection 상태는 유지 (타이핑 시 자동 교체 동작). 더블클릭/타이핑 시 .editing 으로 보임. */
.ledger-grid tbody td textarea:not(.editing)::selection {
  background: transparent;
  color: inherit;
}
/* 편집 모드 — 타이핑 시작 또는 더블클릭 시 caret + selection 보임 */
.ledger-grid tbody td textarea.editing {
  caret-color: auto;
}
/* readonly textarea — 색은 td 가 담당, textarea 는 글자색만 + transparent */
.ledger-grid tbody td textarea:read-only {
  background: transparent;
  color: #64748b;                /* slate-500 */
  cursor: default;
}
/* readonly 컬럼 — td 레벨에서 회색 톤 (textarea 가 작을 때도 td 전체 색 유지) */
.ledger-grid tbody td:has(textarea:read-only) {
  background: #f8fafc;
}
/* 활성 cell — 파란 outline + 연파랑 배경. textarea 가 작아도 td 전체 (44px) 둘러쌈. */
.ledger-grid tbody td textarea:focus {
  outline: none;                  /* outline 은 td 레벨로 */
  background: transparent;
}
.ledger-grid tbody td:has(textarea:focus) {
  outline: 2px solid #3b82f6;    /* blue-500 — td 전체 둘러쌈 */
  outline-offset: -2px;
  background: #eff6ff;           /* blue-50 */
}

/* 행 hover + focused row — 둘 다 연파랑 톤 (포커스와 일관) */
.ledger-grid tbody tr:hover td:not(.row-num),
.ledger-grid tbody tr:has(textarea:focus) td:not(.row-num) {
  background: #eff6ff;        /* blue-50 — focused input 과 동일 */
}
.ledger-grid tbody tr:hover .row-num,
.ledger-grid tbody tr:has(textarea:focus) .row-num {
  background: #dbeafe;        /* blue-100 — 행번호는 살짝 진하게 */
}
/* readonly input (상태/등록일/수정일/확인일) — hover/focus 시 자체 배경 제거해서 td 의 파랑이 보이게 */
.ledger-grid tbody tr:hover td textarea:read-only,
.ledger-grid tbody tr:has(textarea:focus) td textarea:read-only {
  background: transparent;
}

/* dirty 행 — 변경됨 (저장 대기). 연한 amber 배경 + 행번호 amber 톤. */
.ledger-grid tbody tr.row-dirty td:not(.row-num) {
  background: #fef9c3;        /* yellow-100 */
}
.ledger-grid tbody tr.row-dirty .row-num {
  background: #fde68a;        /* amber-200 */
  color: #78350f;             /* amber-900 */
  font-weight: 600;
}
.ledger-grid tbody tr.row-dirty:hover td:not(.row-num) {
  background: #fef3c7;        /* amber-100 살짝 진하게 */
}
/* dirty 행의 readonly input — 자체 배경 제거해서 td 의 amber 가 보이도록 */
.ledger-grid tbody tr.row-dirty td textarea:read-only {
  background: transparent;
}

/* 상태별 행 배경 — 정상은 기본, 임시/실패/중복 각각 시각 구분.
   dirty (사용자 편집 중) 가 우선순위 높음 — dirty 시 amber 가 덮음. */
.ledger-grid tbody tr.row-status-temp td:not(.row-num) {
  background: #f1f5f9;          /* slate-100 — 미묘한 회색 톤 */
}
.ledger-grid tbody tr.row-status-temp .row-num {
  background: #e2e8f0;
  color: #64748b;
}
.ledger-grid tbody tr.row-status-failed td:not(.row-num) {
  background: #fee2e2;          /* red-100 — 사용자 주의 */
}
.ledger-grid tbody tr.row-status-failed .row-num {
  background: #fecaca;          /* red-200 */
  color: #b91c1c;                /* red-700 */
  font-weight: 600;
}
.ledger-grid tbody tr.row-status-duplicate td:not(.row-num) {
  background: #fef3c7;          /* amber-100 */
}
.ledger-grid tbody tr.row-status-duplicate .row-num {
  background: #fde68a;
  color: #92400e;
}
/* 상태별 행의 readonly input — 자체 배경 투명화로 td bg 보이게 */
.ledger-grid tbody tr.row-status-temp td textarea:read-only,
.ledger-grid tbody tr.row-status-failed td textarea:read-only,
.ledger-grid tbody tr.row-status-duplicate td textarea:read-only {
  background: transparent;
}

/* soft-delete 마킹 — 줄긋기 + 흐림. 변경사항 저장 시 실제 삭제 commit. */
.ledger-grid tbody tr.row-pending-delete td textarea,
.ledger-grid tbody tr.row-pending-delete td:not(.row-num) {
  text-decoration: line-through;
  color: #94a3b8 !important;          /* slate-400 */
}
.ledger-grid tbody tr.row-pending-delete td:not(.row-num) {
  background: #f8fafc !important;     /* slate-50 — 흐림 */
}
.ledger-grid tbody tr.row-pending-delete .row-num {
  background: #e2e8f0;
  color: #94a3b8;
  text-decoration: line-through;
}
/* 상태 텍스트 색 — paintStatusCell 대신 CSS 로 직접 (input 의 색) */
.ledger-grid tbody tr.row-status-temp td:nth-child(2) input { color: #64748b; }       /* 임시 = 회색 */
.ledger-grid tbody tr.row-status-failed td:nth-child(2) input { color: #dc2626; font-weight: 600; }  /* 실패 = 빨강 */
.ledger-grid tbody tr.row-status-duplicate td:nth-child(2) input { color: #b45309; font-weight: 600; }  /* 중복 = amber-700 */

/* 건물구분 "미지정" — BR 매칭 안 된 셀 (창고/공터 등). 가운데 정렬 + 회색 톤 (placeholder 느낌) */
.ledger-grid tbody td.cell-unspecified {
  background: #f1f5f9;             /* slate-100 — 다른 배경 */
}
.ledger-grid tbody td.cell-unspecified textarea {
  text-align: center;
  color: #94a3b8;                  /* slate-400 — 흐릿한 회색 */
  font-style: italic;
}

/* 저장 버튼 — 활성/비활성 시각 명확히. 둘 다 항상 노출, 가능 여부에 따라 disabled 토글. */
.ledger-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
  color: white;
}
.ledger-save-btn-quick { background: #3b82f6; }       /* blue-500 */
.ledger-save-btn-quick:hover:not(:disabled) { background: #2563eb; }
.ledger-save-btn-full  { background: #059669; }        /* emerald-600 */
.ledger-save-btn-full:hover:not(:disabled)  { background: #047857; }

.ledger-save-btn:disabled {
  background: #e2e8f0 !important;       /* slate-200 */
  color: #94a3b8 !important;             /* slate-400 */
  cursor: not-allowed;
}

/* 그리드 컨테이너 — 빈 상태 placeholder 의 absolute 기준점 */
[data-user--real-estate-agent--property-management--ledger-grid-target="container"] {
  position: relative;
}

/* 빈 상태 안내 — 그리드 비어있을 때 중앙 오버레이. 첫 입력/paste/로드 시 자동 사라짐. */
.ledger-empty-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  z-index: 5;
}
.ledger-empty-card {
  background: rgba(255,255,255,0.95);
  border: 1px dashed #cbd5e1;     /* slate-300 */
  border-radius: 8px;
  padding: 24px 32px;
  color: #64748b;                  /* slate-500 */
}
.ledger-empty-card svg {
  color: #94a3b8;                  /* slate-400 */
  margin-bottom: 8px;
}
.ledger-empty-card .title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;                  /* slate-600 */
  margin: 0;
}
.ledger-empty-card .hint {
  font-size: 11px;
  color: #94a3b8;                  /* slate-400 */
  margin: 6px 0 0;
}

/* 행 추가 바 — 시트 하단 (Google Sheets 패턴). 스크롤 끝까지 가면 보임.
   좌측 padding 으로 행번호 컬럼 너비(40px) 만큼 띄어 데이터 영역과 정렬. */
.ledger-add-rows-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 52px;   /* 40px (row-num) + 12px 내부 padding */
  background: #f8fafc;          /* slate-50 */
  border-top: 1px solid #e2e8f0;
  font-size: 11px;
  color: #64748b;                /* slate-500 */
  width: max-content;
  min-width: 100%;
}
.ledger-add-rows-input {
  width: 56px;
  height: 22px;
  padding: 2px 6px;
  border: 1px solid #cbd5e1;     /* slate-300 */
  border-radius: 3px;
  font-size: 11px;
  color: #334155;                /* slate-700 */
  background: white;
  outline: none;
}
.ledger-add-rows-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}
.ledger-add-rows-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  height: 22px;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  font-size: 11px;
  color: #475569;                /* slate-600 */
  cursor: pointer;
}
.ledger-add-rows-btn:hover {
  background: #f1f5f9;
}

/* 저장 결과 모달 — 결과 카드 색상 (Tailwind 동적 클래스 purge 회피) */
.ledger-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 13px;
}
.ledger-result-row .label { font-weight: 500; }
.ledger-result-row .count { font-size: 14px; font-weight: 700; }
.ledger-result-row.success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.ledger-result-row.update  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ledger-result-row.delete  { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.ledger-result-row.warn    { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.ledger-result-row.error   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* 우클릭 컨텍스트 메뉴 — 단순한 카드 */
.ledger-grid-menu {
  position: fixed;
  background: white;
  border: 1px solid #cbd5e1;            /* slate-300 */
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 140px;
  padding: 4px 0;
  z-index: 1000;
  font-size: 13px;
}
.ledger-grid-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  text-align: left;
  color: #334155;                        /* slate-700 */
  cursor: pointer;
  font-size: 13px;
}
.ledger-grid-menu-item:hover {
  background: #f1f5f9;                   /* slate-100 */
}
.ledger-grid-menu-item:hover svg { color: #dc2626; }   /* red-600 — 삭제 의도 강조 */

/* 그리드 스크롤바 — 라이트 톤 (다크 layout 기본값 덮음).
   컨테이너 = data-controller="...ledger-grid" 의 직속 자식 (overflow-auto). */
[data-controller~="user--real-estate-agent--property-management--ledger-grid"]
  [data-user--real-estate-agent--property-management--ledger-grid-target="container"] {
  scrollbar-color: #cbd5e1 #f1f5f9;       /* Firefox */
}
[data-controller~="user--real-estate-agent--property-management--ledger-grid"]
  [data-user--real-estate-agent--property-management--ledger-grid-target="container"]::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
[data-controller~="user--real-estate-agent--property-management--ledger-grid"]
  [data-user--real-estate-agent--property-management--ledger-grid-target="container"]::-webkit-scrollbar-track {
  background: #f1f5f9;                    /* slate-100 */
}
[data-controller~="user--real-estate-agent--property-management--ledger-grid"]
  [data-user--real-estate-agent--property-management--ledger-grid-target="container"]::-webkit-scrollbar-thumb {
  background: #cbd5e1;                    /* slate-300 */
  border-radius: 6px;
  border: 2px solid #f1f5f9;              /* track 와 약간의 padding */
}
[data-controller~="user--real-estate-agent--property-management--ledger-grid"]
  [data-user--real-estate-agent--property-management--ledger-grid-target="container"]::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;                    /* slate-400 */
}