@charset "utf-8";

/* 초기화 및 기본 스타일 */
#board_list_container, #bo_w { font-family: 'Malgun Gothic', 'Dotum', sans-serif; }
a { text-decoration: none; color: #333; }
.frm_input { border: 1px solid #ccc; padding: 8px; border-radius: 3px; height: 38px; box-sizing: border-box; }

/* 리스트 페이지 - 상단 검색 */
#my_store_search { padding: 20px; border: 1px solid #e0e0e0; margin-bottom: 20px; text-align: center; }
#my_store_search select { width: 150px; height: 38px; border: 1px solid #ccc; padding: 0 5px; }
#my_store_search #stx { width: 300px; margin-left: 5px; }


/* 리스트 페이지 - 목록 */
#board_list_container {
    max-width: 1100px; /* 원하는 최대 가로 폭으로 설정하세요. (예: 1000px, 800px 등) */
    margin: 0 auto;   /* 컨테이너를 가운데 정렬합니다. */
    padding: 20px 0;  /* 상하 패딩을 추가하여 내용이 너무 가장자리에 붙지 않도록 합니다. */
}

.board_list .empty_list { padding: 50px 0; text-align: center; color: #888; border-bottom: 1px solid #e0e0e0;}
.bo_list_item { border-bottom: 1px solid #e0e0e0; }
.bo_list_item.active { border-bottom: 1px solid #7b7b7b; } /* 활성화된 아이템 */
.list_title_wrap { display: flex; align-items: center; padding: 20px 15px; cursor: pointer; }


/* --- */
/* 기본 스타일: 이 값은 모바일(768px 이하) 화면에서 적용됩니다. */
.list_title_wrap .store_name {
    font-weight: bold;
    color: #333;
    width: 160px; /* **여기에 모바일에서 원하는 지점명 가로 폭을 직접 입력하세요.** */
    min-width: 160px; /* (선택 사항) 모바일에서 최소 너비 설정 */
}

/* PC 화면 (769px 이상)에서만 적용될 스타일 */
@media (min-width: 769px) {
    .list_title_wrap .store_name {
        width: 250px; /* **여기에 PC에서 원하는 지점명 가로 폭을 직접 입력하세요.** */
        min-width: 180px; /* (선택 사항) PC에서 최소 너비 설정 */
    }
}



.list_title_wrap .store_address { color: #555; flex-grow: 1; }
.bo_list_item.active .list_title_wrap .store_name { color: #000000; } /* 아코디언펼쳤을때 제목(지점명) 색상 */
.list_title_wrap .arrow { width: 20px; height: auto; }

/* 리스트 페이지 - 펼쳐진 내용 */
.list_content_wrap { background-color: #f9f9f9; padding: 10px; }
.list_content_wrap .inner { display: flex; }
.list_content_wrap .store_image { width: 300px; margin-right: 30px; }
.list_content_wrap .store_image img { width: 100%; height: auto; border-radius: 5px; }
.list_content_wrap .store_details { flex-grow: 1; }
.store_details .detail_info { margin-bottom: 10px; font-size: 1.0em; }
.store_details .detail_info span { display: inline-block; width: 80px; color: #888; }
.store_options { display: flex; margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
.store_options .option_item { text-align: center; margin-right: 25px; }
.store_options .option_item img { width: 50px; height: 50px; }
.store_options .option_item span { display: block; margin-top: 5px; color: #666;font-size: 0.8rem; }

/* 글쓰기 페이지 */
#bo_w { width: 100%; max-width: 900px; margin: 0 auto; }
.bo_w_form { border-top: 2px solid #333; }
.bo_w_row { display: flex; padding: 10px 0; border-bottom: 1px solid #f0f0f0; align-items: center; }
.bo_w_row .bo_w_hd { width: 120px; font-weight: bold; padding-left: 10px; }
.bo_w_row .bo_w_cnt { flex-grow: 1; }
.bo_w_cnt .flex_wrap { display: flex; align-items: center; }
.bo_w_cnt .frm_input { width: 100%; }
.bo_w_cnt select { height: 38px; border: 1px solid #ccc; padding: 0 5px; }
#facility_checkboxes label { display: inline-block; margin-right: 20px; cursor: pointer; }
#facility_checkboxes input { margin-right: 5px; }

/* 글쓰기 페이지 - 3열 입력칸 */
.multi_input_row { flex-wrap: wrap; }
.multi_input_row .input_item { flex: 1; min-width: 250px; padding: 0 10px; }
.multi_input_row .input_item:first-child { padding-left: 0; }
.multi_input_row .input_item:last-child { padding-right: 0; }
.multi_input_row .input_item label { display: block; margin-bottom: 5px; }
.required_label:after { content:" *"; color: #f00; }

/* 버튼 */
.btn_confirm { text-align: center; margin-top: 30px; }
.btn_confirm .btn { display: inline-block; padding: 10px 25px; font-size: 1em; border-radius: 4px; text-decoration: none; border: 1px solid transparent; }
.btn_confirm .btn_cancel { background-color: #fff; border-color: #ccc; color: #333; }
.btn_confirm .btn_submit { background-color: #337ab7; color: #fff; font-weight: bold; }
.bo_fx { margin-top: 20px; text-align: right; }
.btn_bo_user li { display:inline-block; margin-left: 5px; }


/* 이 부분을 수정합니다. (기존 .btn_bo_user .btn 블록 대신 이 코드를 사용) */
/* btn_bo_user .btn_b02에 직접 스타일 적용 및 Flexbox로 중앙 정렬 */
.btn_bo_user .btn_b02 {
    background: #333;
    color: #fff;
    padding: 0 15px; /* 상하 패딩을 0으로 설정하고 height와 line-height로 높이 제어 */
    border-radius: 4px;

    /* Flexbox를 사용하여 텍스트를 수직 중앙 정렬 */
    display: flex; /* Flexbox 컨테이너로 설정 */
    align-items: center; /* 자식 요소(텍스트)를 수직 중앙 정렬 */
    justify-content: center; /* 자식 요소(텍스트)를 수평 중앙 정렬 */

    height: 34px; /* 버튼의 원하는 최종 높이. 필요에 따라 조절하세요. */
    /* line-height는 display:flex 일 때 직접적인 텍스트 수직 정렬에 덜 중요해지므로 제거하거나 auto로 둡니다. */
    /* line-height: 34px; <- 이 줄은 이제 필요 없습니다. */

    font-size: 1em; /* 폰트 크기 유지 */
    text-decoration: none; /* 밑줄 제거 */
    cursor: pointer; /* 마우스 커서 변경 */
    box-sizing: border-box; /* 패딩과 테두리를 높이 계산에 포함 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* btn_b01은 기존 스타일 유지 */
.btn_bo_user .btn_b01 {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 8px 15px; /* btn_b01은 현재 스타일 유지 */
    border-radius: 4px;
    display: inline-block; /* 추가: line-height가 잘 적용되도록 inline-block 설정 */
    vertical-align: middle; /* 추가: 수직 정렬 보정 */
    text-align: center; /* 추가: 수평 중앙 정렬 */
    box-sizing: border-box; /* 추가: 패딩과 테두리를 포함한 박스 모델 계산 */
    height: 34px; /* 높이 통일 */
    line-height: 34px; /* 높이 통일 */
}






/* 1. 아코디언 펼쳐지기 전 지점명 글자색 변경 */
.list_title_wrap .store_name {
    color: #000000; /* 주황색 */
 font-weight: bold;	
}

/* 2. "영업시간", "전화번호" 라벨 텍스트 주황색 및 굵게 변경 */
.list_content_wrap .store_details .detail_info > span {
    color: #000000; /* 주황색 */
    font-weight: bold;
}



/* --- 게시판 검색창 디자인 (수정) --- */

/* 검색창 전체를 감싸는 컨테이너 스타일 */
#my_store_search {
    display: flex;
    align-items: center;
    /* [수정] 중앙 정렬을 위해 margin 속성 변경 */
    max-width: 480px;         /* 검색창의 최대 가로 폭 (이 값은 그대로 유지하거나 원하시는 값으로 조절) */
    margin: 0 auto 20px auto; /* 상:0, 좌우:auto (중앙정렬), 하:20px */
    
    border: none;             /* 외부 테두리가 있다면 명시적으로 제거 */
    padding: 0;               /* 외부 패딩이 있다면 명시적으로 제거 */
    max-width: 480px;         /* 검색창 전체의 최대 가로 폭 (이 값을 조절하여 더 좁히거나 넓힐 수 있습니다) */
    /* 만약 검색창을 페이지 중앙에 정렬하고 싶다면 아래 주석을 해제하세요. */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* 검색창 내부 form 태그 설정 */
#my_store_search form {
    display: flex;
    width: 100%; /* 부모(#my_store_search)의 max-width에 맞춰짐 */
    align-items: center;
}

/* '시/도' 분류 선택(select) 스타일 */
#my_store_search #sca_search {
    width: 100px; /* <-- 이 줄을 추가 (원하는 크기로 조절) */
    border: 1px solid #7b7b7b;
    background: #fff;
    padding: 0 10px;        /* 상하 패딩은 height와 line-height로 조절 */
    font-size: 0.95em;
    border-radius: 5px;
    margin-right: 5px;
    height: 38px;
    line-height: 36px;      /* 내부 텍스트 세로 중앙 정렬 (border 고려) */
    /* select는 flex-grow를 주지 않아 내용에 따라 크기 조절 */
}

/* 검색어 입력(input) 스타일 */
#my_store_search #stx_search {
    border: 1px solid #7b7b7b;
    background: #fff;
    padding: 0 10px;       /* 상하 패딩은 height와 line-height로 조절 */
    font-size: 0.95em;
    border-radius: 5px;
    flex: 1;                 /* 남는 공간을 모두 차지하도록 설정 */
    height: 38px;
    line-height: 38px;       /* 내부 텍스트 세로 중앙 정렬 */
    min-width: 80px;         /* 최소 너비를 줄여서 더 좁아질 수 있게 함 */
}

/* select, input 창에 포커스가 갈 때 생기는 외곽선 제거 */
#my_store_search #sca_search:focus,
#my_store_search #stx_search:focus {
    outline: none;
    border-color: #000000; /* 포커스 시 테두리 색 살짝 진하게 */
}

/* --- 게시판 검색 버튼 (아이콘 없음 / 텍스트 중앙 정렬) --- */

/* --- 게시판 검색 버튼 (아이콘 없음 / 텍스트 중앙 정렬) --- */

/* 1. 버튼 컨테이너 (Flex 강제 적용) */
#my_store_search form .my_custom_search_btn {
	display: flex !important;
	align-items: center !important; 
	justify-content: center !important;
	box-sizing: border-box !important; 
	height: 38px;
	padding: 0 22px; 
	margin-left: 5px;
	border: none;
	background-color: #4e4e4e;
	color: #fff;
	border-radius: 5px;
	font-size: 0.95em;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s;
	white-space: nowrap;
	line-height: 1 !important; 
}

/* 2. 텍스트(span)만 제어 */
#my_store_search form .my_custom_search_btn span {
	display: inline-block !important;
	line-height: 1 !important;
	vertical-align: middle !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1em !important;
}

/* 3. 호버 효과 */
#my_store_search form .my_custom_search_btn:hover {
	background-color: #e60000;
}






/* style.css 파일에 이 부분을 추가하거나 기존 부분을 수정하세요 */

/* --- 모바일 화면 아코디언 내부 스타일 수정 --- */

@media (max-width: 768px) { /* 화면 너비가 768px 이하일 때 적용 (일반적인 모바일 기준) */

    /* 아코디언 내용(.inner)의 자식 요소들이 세로로 쌓이도록 레이아웃 변경 */
    .list_content_wrap .inner {
        flex-direction: column; /* 추가: Flexbox 아이템들을 수직으로 정렬 */
        align-items: center;    /* 추가: 아이템들을 가로축(이 경우 수평) 가운데로 정렬 */
    }

    .list_content_wrap .inner .store_image,
    .list_content_wrap .inner .store_details {
        width: 100%;       /* 각 요소의 너비를 100%로 설정하여 가로 전체 차지 */
        /* float: none;         // float 속성이 사용되었다면 해제 - 현재 Flexbox 사용으로 필요 없음 */
        margin-left: 0;    /* 혹시 모를 좌우 마진 초기화 */
        margin-right: 0;
        padding-left: 5px;  /* 화면 가장자리에 약간의 여백 (선택 사항) */
        padding-right: 5px; /* 화면 가장자리에 약간의 여백 (선택 사항) */
        box-sizing: border-box; /* 패딩과 테두리를 너비 계산에 포함 */
    }

    /* 모바일에서 스토어 이미지 크기 및 간격 조정 */
    .list_content_wrap .inner .store_image {
        margin-bottom: 15px; /* 이미지와 아래 상세정보 사이의 간격 */
    }

    .list_content_wrap .inner .store_image img {
        width: 100%;       /* 이미지가 부모 요소(.store_image) 너비에 꽉 차도록 설정 */
        height: auto;      /* 이미지의 가로세로 비율 유지 */
        display: block;    /* 이미지 하단에 생길 수 있는 불필요한 여백 제거 */
    }

    /* 모바일에서 스토어 상세 정보 영역 텍스트 정렬 (선택 사항) */
    .list_content_wrap .inner .store_details {
        text-align: left; /* 내용을 왼쪽으로 정렬 (기본값) */
        /* 추가: 이미지와 상세 정보 사이의 간격 */
        margin-top: 15px; /* 이미지 아래로 떨어뜨리는 간격 */
    }
    
    /* 상세정보 각 항목("영업시간", "전화번호")이 한 줄씩 차지하도록 */
    .list_content_wrap .inner .store_details .detail_info {
        display: block; /* 블록 요소로 만들어 한 줄 전체를 차지 */
        margin-bottom: 8px; /* 각 정보 항목 사이의 간격 */
    }
    
    /* 편의시설 아이콘 영역 정렬 */
    .list_content_wrap .inner .store_details .store_options {
        display: flex;     /* 아이콘들을 가로로 배열 */
        flex-wrap: wrap;   /* 공간이 부족하면 다음 줄로 자동 넘김 */
        gap: 1px;         /* 아이콘들 사이의 간격 */
        margin-top: 10px;  /* 위쪽 요소(전화번호 등)와의 간격 */
        justify-content: center; /* 추가: 아이콘들을 중앙 정렬 */
    }

    /* (선택 사항) 관리자 버튼도 화면 너비에 맞게 조정 */
    .list_content_wrap .inner .store_details .admin_buttons {
        text-align: center; /* 버튼들을 가운데 정렬 */
        margin-top: 15px;
    }
    .list_content_wrap .inner .store_details .admin_buttons a,
    .list_content_wrap .inner .store_details .admin_buttons button {
        margin-left: 5px;
        margin-right: 5px;
    }
	
	
	/* --- 모바일 검색창 가로 폭 수정 --- */
#my_store_search {
    max-width: 80%; /* 최대 폭을 480px 고정값 대신 90%로 변경 */
}
/* --- 모바일 게시글 목록 가로 폭 수정 --- */
#board_list_container {
    width: 92%; /* 가로 폭을 90%로 설정 */
}
	
	
	
	/* --- 모바일 아코디언 내부 아이콘 크기 수정 --- */
.store_options .option_item img {
    width: 40px;  /* 50px에서 40px로 줄임 (원하는 크기로 조절) */
    height: 40px; /* 50px에서 40px로 줄임 (원하는 크기로 조절) */
}

/* --- 모바일 아코디언 내부 아이콘 폰트 크기 수정 --- */
    .store_options .option_item span {
        font-size: 0.7rem; /* (원하는 크기로 조절) */
        margin-top: 3px; 
    }
	
}



/* 버튼 짤림 방지 및 오른쪽 정렬 확보 */
.admin_buttons {
    /* 1. 버튼들이 한 줄에서 짤리지 않도록 강제 설정 (가장 중요) */
    white-space: nowrap; 

    /* 2. 오른쪽 패딩(20px) 영역을 침범하여 공간 확보 (짤림 방지) */
    /* 부모 요소의 오른쪽 패딩 20px 중 15px 만큼 공간을 확장합니다. */
    margin-right: 115px !important; 
    
    /* 3. 혹시 모를 왼쪽 마진도 초기화 */
    margin-left: 0 !important; 
    
    /* 4. 내부 버튼들이 줄어드는 것 방지 */
    min-width: 0;
}