/*
 * 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, 화살표 제거) */
.custom-scrollbar::-webkit-scrollbar,
.custom-scrollbar-light::-webkit-scrollbar {
  width: 0px;   /* 모바일: 숨김 */
  height: 0px;
}
@media (min-width: 768px) {
  .custom-scrollbar::-webkit-scrollbar,
  .custom-scrollbar-light::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}
.custom-scrollbar::-webkit-scrollbar-button,
.custom-scrollbar-light::-webkit-scrollbar-button {
  display: none;
}

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

/* 라이트 스크롤바 (일반 서비스 등 라이트 배경) */
.custom-scrollbar-light::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar-light::-webkit-scrollbar-thumb {
  background: #d1d5db; /* gray-300 */
  border-radius: 3px;
}
.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 */
}

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

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

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