@charset "utf-8";
.info-content-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    height: auto;
}
.acWrap{clear:both;position:relative;margin-bottom:30px}
.acWrap ul{clear:both;width:100%;height:auto;}
.acWrap ul li{display:inline-block;width:18.8%; padding: 5px 0.5%}
.acWrap ul li a{display:block;padding:0 0 0 3%; width:97%;  background:url(/townE/resources/images/common/br_link.png) 100% 100% no-repeat;font-size:15px; letter-spacing: -0.5px; line-height:33px;font-weight:300;color:#121212; border: 1px solid #c4c6cc; border-radius: 4px}
.acWrap ul li a.open{background:url(/townE/resources/images/common/br_open.png) 100% 100% no-repeat;}
.acWrap ul li a:hover{background:url(/townE/resources/images/common/br_link.png) 100% 0 no-repeat; background-color: #f9a459; color: #fff; border-color: #b5c9f0}
.acWrap ul li a.open:hover{background:url(/townE/resources/images/common/br_open.png) 100% 0 no-repeat; background-color: #f9a459; color: #fff; border-color: #b5c9f0}
.acWrap p {font-size:14px; font-weight:300; color:#424242; text-indent:10px;}

.graphWrap{clear:both;position:relative;}
.graphWrap .bay1{display:inline-block;width:1400px;padding:0 20px 30px;}
.graphWrap .bay2{display:inline-block;width:680px;padding:0 20px 30px;}
.graphWrap .bay2 h3, .graphWrap .bay1 h3{clear:both;position:relative;height:60px;margin-bottom:20px;padding-left:40px;border-bottom:1px solid #cfcdcd;text-align:left;color:#272635;font-size:20px;font-weight:600;line-height:60px;background:url(/townE/resources/images/sub/basic/br_h.gif) 0 50% no-repeat;}
.graphWrap .bay2 h3 span, .graphWrap .bay1 h3 span{display:block;position:absolute;top:6px;right:10px;font-size:15px;font-weight:300;}
.graphWrap .bay2 .bay_cont, .graphWrap .bay1 .bay_cont{clear:both;position:relative;}

/* 통계차트 출처 */
p.chartSource{float:right; margin-top:-35px; padding-right:15px; font-size:14px; color:#000; font-weight:lighter;}
p.chartSourceCircle{float:right; margin-top:-50px; padding-right:15px; font-size:14px; color:#000; font-weight:lighter;}

/*상단 리스트*/
.db_tab_wrap{display:inline-block; position:relative; border:1px solid #dfdfdf; border-radius:3px; overflow:hidden; margin-bottom:30px;}
.db_tab_wrap a{display:block; float:left; text-align:center; width:170px; height:40px; line-height:40px; background-color:#f7f7f7; color:#666; font-size:16px; border-left:1px solid #dfdfdf;}
.db_tab_wrap a.on{background-color:#fff; color:#101010; font-weight:500;}
.db_tab_wrap a:first-child{border-left:0;}

/* 마을데이터 전용 스타일 */
.village-data-page {
    position: relative;
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.data-tab-wrapper {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border-light);
  background-color: #fff;
  width: 100%;
  overflow: hidden; /* 컨테이너 너비 제한을 위해 추가 */
}

/* 마을데이터 탭 커스텀 */
.village-data-tabs {
  display: flex;
  flex-wrap: wrap; 
  gap: 10px;
  justify-content: flex-start;
}


/* 그래프 영역 */
.graph-container {
  background-color: #fff;
  border-radius: 12px;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.graph-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.graph-icon-wrap {
  width: 44px;
  height: 44px;
  background-color: #f0f1ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.graph-icon {
  width: 24px;
  height: 24px;
}

.graph-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-black);
}

.graph-placeholder {
  flex: 1;
  background-color: #fcfcfc;
  border: 2px dashed #e5e5e5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 1.125rem;
  text-align: center;
  padding: 20px;
  overflow-x: auto; /* 가로 스크롤 허용 */
  -webkit-overflow-scrolling: touch;
}

/* 그래프 내부 실제 콘텐츠가 들어갈 때 최소 너비 확보용 */
.graph-placeholder > div,
.graph-placeholder > canvas,
.graph-placeholder > img {
  min-width: 600px; /* 모바일에서 스크롤이 발생하도록 최소 너비 설정 */
}

@media (max-width: 768px) {
  .village-data-page {
    gap: 15px;
  }

  .graph-container {
    min-height: 450px;
  }
  .graph-title {
    font-size: 1.125rem;
  }

}

@media (max-width: 480px) {
  .graph-icon-wrap {
    display: none;
  }
}