/* 차트 스타일 */
 #marketAnalysisComponent #charts-container {
     display: flex;
     flex-wrap: wrap;
     width: 100%;
 }
 /* 예: /css/marketAnalysisComponent.css 에 추가 */
.force-small-height {
  height: 400px !important;
  overflow: hidden;
}

#marketAnalysisComponent .bubble-chart-title {
     margin: 0 auto;       /* 좌우 자동 → 중앙 */
     text-align: center;   /* 가로 중앙 */
     font-size: 1.2rem;
     font-weight: bold;
     line-height: 1.4;
     display: flex;
     flex-direction: column; /* 줄바꿈 강제 */
     align-items: center;     /* 수평 중앙 */
     justify-content: center; /* 수직 중앙 (필요시) */
     margin-bottom: 10px
 }
 #marketAnalysisComponent .chart-container,
 #marketAnalysisComponent .chart-container4,
 #marketAnalysisComponent .chart-container5 {
     display: flex;
     width: 100%;
     box-sizing: border-box;
 }
 #marketAnalysisComponent .chart-container{
    height: 800px;
 }

 #marketAnalysisComponent .chart-container2 {
     display: flex;
     width: 100%;
     height: 300px;
     box-sizing: border-box;
 }

 #marketAnalysisComponent .chart-container3 {
     display: flex;
     flex-direction: column;
     margin-top: 3%;
     width: 100%;
     height: 800px;
     box-sizing: border-box;
 }
 #marketAnalysisComponent .chart-container4 {
    height: 400px;
    margin-top: 10%;
 }
  #marketAnalysisComponent .chart-container5{
    margin-top: 2%;
  }
 .canceled-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-top: 30px;
  max-height: 300px; /* 원하는 높이로 조절 가능 */
  overflow: auto;
  border: 1px solid #ccc;

}

.canceled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 0.95rem;
  background-color: #fff;
}

.canceled-table caption {
  text-align: left;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.canceled-table th,
.canceled-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
}

.canceled-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #444;
}

.canceled-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.canceled-table tbody tr:hover {
  background-color: #f0f8ff;
}
 /* 차트 영역 (왼쪽 50%) */
 #marketAnalysisComponent .bar-chart-container,
 #marketAnalysisComponent .pie-chart-container {
     flex: 0 0 50%;
     height: 100%;
     box-sizing: border-box;
     padding-top: 3%;
 }

 /* 테이블 영역 (오른쪽 50%) */
 #marketAnalysisComponent .monthlyCounts-table-container,
 #marketAnalysisComponent .byFloor-table-container,
 #marketAnalysisComponent .byArea-table-container,
 #marketAnalysisComponent .byGu-table-container,
 #marketAnalysisComponent .byDong-table-container,
 #marketAnalysisComponent .heatmap-stats-table {
     flex: 0 0 50%;
     height: 100%;
     box-sizing: border-box;
     overflow-y: auto;
     /* 테이블이 길어질 경우 내부 스크롤 */
     background: #ffffff;
     border-radius: 0.5rem;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
     overflow-x: auto;
 }
 #marketAnalysisComponent .byGu-table-container,
 #marketAnalysisComponent .byDong-table-container {
    height: 400px;
 }

 #marketAnalysisComponent .bubble-chart-container {
     width: 50%;
     height: 400px;
     /* 1) 테두리를 투명으로 설정 */
     border: 1px solid transparent;
     border-radius: 8px;
     box-sizing: border-box;

     /* 2) 파스텔 그라디언트를 테두리 이미지로 사용 */
     border-image: linear-gradient(120deg,
             #ffd1dc 0%,
             /* 연한 핑크 */
             #ffecd2 25%,
             /* 크림빛 오렌지 */
             #d4fc79 50%,
             /* 연두 */
             #96e6a1 75%,
             /* 민트 */
             #a1c4fd 100%
             /* 연한 블루 */
         ) 1;
 }

 #marketAnalysisComponent .line-chart-container {
     width: 100%;
     height: 600px;
     margin-bottom: 2rem;
 }


 #marketAnalysisComponent #exception-table {
     display: flex;
     flex-wrap: wrap;
 }

 #marketAnalysisComponent .duplicates-table-container,
 #marketAnalysisComponent .directdeals-table-container {
     flex: 0 0 50%;
     max-height: 400px;
     box-sizing: border-box;
     color: #fff;
     overflow-y: auto;
 }

 #marketAnalysisComponent #summary {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem 1.5rem;
     align-items: center;
     justify-content: space-between;
     background: #FFFFFF;
     /* pure white */
     border: 1px solid #E5E7EB;
     /* light gray border */
     border-radius: 1rem;
     padding: 1.25rem 2rem;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     /* softer shadow */
     font-family: 'Inter', 'Segoe UI', sans-serif;
     margin-bottom: 0.5rem;
 }

 #marketAnalysisComponent #summary p {
     margin: 0;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.95rem;
     color: #111827;
     /* deep neutral black */
     flex: 1 1 30%;
 }

 /* 아이콘 스타일 */
 #marketAnalysisComponent #summary #summaryPeriod::before {
     content: '🗓️';
 }

 #marketAnalysisComponent #summary #summaryApt::before {
     content: '🏢';
 }

 #marketAnalysisComponent #summary #totalTransactions::before {
     content: '📊';
 }

 /* 강조 스타일 */
 #marketAnalysisComponent #summary #totalTransactions {
     justify-content: flex-end;
     color: #2563EB;
     font-weight: 600;
     font-size: 1.05rem;
 }

#marketAnalysisComponent #filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: #FFFFFF;
  border-radius: 0.75rem;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 1rem;
}

#marketAnalysisComponent #filters .dateComponent {
  display: flex;
  gap: 0.75rem;
}

#marketAnalysisComponent #filters .dateComponent input[type="date"] {
  flex: 1;
  min-width: 0;
}

#marketAnalysisComponent #filters input[type="date"],
#marketAnalysisComponent #filters select,
#marketAnalysisComponent #filters button {
  width: 100%;
  height: 2.6rem;
  padding: 0 1rem;
  font-size: 0.95rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
  background-color: #F9FAFB;
  color: #111;
  white-space: nowrap;
}

#marketAnalysisComponent #filters button {
  background-color: white;
  font-weight: 600;
  cursor: pointer;
}





 /* #marketAnalysisComponent #filters button {
     padding: 0.7rem 1.2rem;
     background-color: #1E88E5;
     color: #ffffff;
     border: none;
     border-radius: 0.5rem;
     font-size: 0.96rem;
     font-weight: 600;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.1s ease;
 }

 #marketAnalysisComponent #filters button:hover {
     background-color: #1565C0;
     transform: translateY(-1px);
 }

 #marketAnalysisComponent #filters button:active {
     background-color: #0D47A1;
     transform: translateY(0);
 } */
  
 #marketAnalysisComponent #filters button {
     padding: 0.65rem 1.2rem;
     background-color: white;
     color: #111;
     border: 1px solid #ccc;
     border-radius: 0.5rem;
     font-size: 0.95rem;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     box-shadow: none;
 }

 #marketAnalysisComponent #filters button:hover {
     background-color: #111;
     color: white;
     border-color: #111;
 }

 #marketAnalysisComponent #filters button:active {
     background-color: #000;
     border-color: #000;
     color: white;
 }


 #marketAnalysisComponent table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.95rem;
 }

 #marketAnalysisComponent thead th {
    background: #6b7280; /* ✨ 중간톤 회색 */
     color: #fff;
     font-weight: 600;
     padding: 0.75rem;
     text-align: left;
 }

 #marketAnalysisComponent tbody tr:nth-child(odd) {
     background: #F0F7FF;
 }

 #marketAnalysisComponent tbody tr:hover {
     background: #D1E9FF;
 }

 #marketAnalysisComponent tbody td {
     padding: 0.75rem;
     border-bottom: 1px solid #E0E0E0;
     color: #374151;
 }

 #marketAnalysisComponent tbody tr:last-child td {
     border-bottom: none;
 }
 #marketAnalysisComponent #summary2 {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     background-color: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 0.75rem;
     padding: 1rem 1.5rem;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
     margin-bottom: 1.5rem;
     font-family: 'Pretendard', 'Segoe UI', sans-serif;
     color: #333;
 }

 #marketAnalysisComponent #summary2 p {
     margin: 0;
     display: flex;
     align-items: center;
     font-size: 0.95rem;
     font-weight: 500;
     color: #333;
 }

 #marketAnalysisComponent #summary2 #summaryTradeType::before {
     content: '📁';
     margin-right: 0.5rem;
     color: #999;
 }

 #marketAnalysisComponent #summary2 #summaryTradeDetail::before {
     content: '🔍';
     margin-right: 0.5rem;
     color: #999;
 }

 #marketAnalysisComponent #summary-group {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     margin-bottom: 0.5rem;
 }


 #marketAnalysisComponent .bubble-swiper {
     width: 100%;
     height: 400px;
 }

 #marketAnalysisComponent .bubble-slide {
     display: flex;
     flex-wrap: wrap;
     overflow-x: hidden;
 }

 .monthly-table-swiper {
     width: 100%;
     height: 300px;
     /* 또는 적당히: 80vh 등 */
     position: relative;
     overflow: hidden;
     /* ✅ 핵심: 부모가 넘치지 않도록 */
     margin-bottom: 2%;
 }

 .monthly-table-swiper .swiper-wrapper {
     display: flex;
 }

 .monthly-table-swiper .swiper-slide {
     width: 100%;
     height: 100%;
     overflow-y: auto;
     /* ✅ 각 월별 테이블은 세로 스크롤 가능해야 함 */
     padding: 20px;
     box-sizing: border-box;
 }

 .monthly-table-swiper table {
     width: 100%;
     border-collapse: collapse;
 }

 .monthly-table-swiper th,
 .monthly-table-swiper td {
     border: 1px solid #ddd;
     padding: 6px 10px;
     text-align: center;
 }

 .monthly-table-swiper caption {
     caption-side: top;
     margin-bottom: 8px;
     font-weight: bold;
     font-size: 20px;
 }

 /* ✅ Swiper wrapper 설정 */
 .line-chart-swiper {
     width: 100%;
     height: 460px;
     position: relative;
 }

 /* ✅ Swiper 슬라이드 - 하나에 하나의 차트 */
 .line-chart-swiper .swiper-slide {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 10px;
     box-sizing: border-box;
 }

 /* 반응형: 모바일에서 틈 좁힐 때 */
 @media (max-width: 480px) {
     #marketAnalysisComponent #filters {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 840px) {
     #marketAnalysisComponent #summary {
         flex-direction: column;
         text-align: left;
     }

     #marketAnalysisComponent #summary #totalTransactions {
         justify-content: flex-start;
         margin-top: 0.75rem;
     }

     #marketAnalysisComponent .chart-container,
     #marketAnalysisComponent .chart-container2 {
         flex-direction: column;
         width: 100%;
         /* height: 500px; */
         margin-top: 2%;
         margin-bottom: 2%;
     }
    #marketAnalysisComponent .chart-container4,
     #marketAnalysisComponent .chart-container5 {
         flex-direction: column;
         width: 100%;
         margin-top: 2%;
     }
     #marketAnalysisComponent #charts-container {
         display: flex;
         flex-direction: column;
     }

     #marketAnalysisComponent .bar-chart-container,
     #marketAnalysisComponent .pie-chart-container {
         width: 100%;
         padding-top: 0;
     }

     #marketAnalysisComponent .monthlyCounts-table-container,
     #marketAnalysisComponent .byFloor-table-container,
     #marketAnalysisComponent .byArea-table-container,
     #marketAnalysisComponent .byGu-table-container,
     #marketAnalysisComponent .byDong-table-container {
         width: 100%;
     }

     #marketAnalysisComponent #exception-table {
         flex-direction: column;
     }

     #marketAnalysisComponent .directdeals-table-container,
     #marketAnalysisComponent .duplicates-table-container {
         width: 100%;
     }

     #marketAnalysisComponent .bubble-chart-container {
         width: 100%;
     }

     #marketAnalysisComponent .bubble-slide {
         flex-wrap: nowrap;
         /* height: 800px; */
     }

 }