@charset "utf-8";
/*슬라이드 사용 안하는 경우*/
.photo-flex{display:flex; gap:10px}
.photo-flex li{flex:1; }
.photo-flex li img{width:100%; max-width:100%}

.img-title{padding:10px 0;text-align:center;font-size:15px;background:#f3f3f3;width:100%;border:1px solid #ddd;border-top:0px;overflow:hidden}

.district_selector .rows{display: flex; flex-wrap: wrap;}

/* 지역 선택 컨테이너 */
.district_selector {
	background: #f8fbff;
	padding: 40px 20px;
	border-radius: var(--round20);
	border: 1px solid #e1e9f3;
	font-family: var(--font-family), sans-serif;
}

/* 구별 버튼 스타일 */
.dist_btn {
	display: block;
	background: #fff;
	border: 1px solid #dee2e6;
	padding: 12px 10px;
	text-align: center;
	border-radius: var(--round10);
	font-size: 0.95rem;
	font-weight: 600;
	color: #444;
	transition: all 0.3s ease;
	/*margin-bottom: 15px;*/
	box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.dist_btn:hover {
	background: var(--main-point);
	color: #fff;
	border-color: var(--main-point);
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(2, 117, 187, 0.2);
}

/* 현재 선택된 구 강조 (PHP 변수와 연동 가능) */
.dist_btn.active {
	background: var(--main-point);
	color: #fff;
	border-color: var(--main-point);
}

/* 초성별 구분 라벨 */
.dist_group_label {
	font-size: 2rem;
	color: var(--main-point);
	font-weight: 800;
	margin-bottom: 10px;
	display: block;
	padding-left: 5px;
}


.dist-list-area {display:flex; gap:10px; flex-wrap: wrap;}
.dist-list-area .dist_btn{width:47%}


/*Responsive 370, 480, 768, 834, 1024, 1440*/
@media all and (max-width:480px){
	.dist-list-area {display:flex; gap:10px}
}