@charset "utf-8";

/* =============================================================
   관리자 화면 반응형 보정
   2026-08-11 (공통작업 C3)

   정정(20260812)
     처음에는 manage/template/css/content.css 가 로드되지 않는다고 봤으나
     사실은 headHtml.jsp -> manage/template/templateHtml.jsp 를 통해
     이 파일보다 뒤에 로드된다. table_scroll1400 / search_wrap 정의도
     거기에 이미 있다. 따라서 아래 1·2번의 동일 선택자 규칙은
     같은 특정도라면 content.css 쪽이 이긴다(뒤에 로드되므로).

   그래서 이 파일이 실제로 담당하는 것은
     - content.css 에 없는 구간의 보완 (768px / 480px 세분화, 터치 스크롤)
     - 이번에 새로 만든 화면 전용 스타일 (통계 카드, SNS 설정, 봉사팀 회원관리)
     - 필터 줄 간격 등 기존 규칙을 의도적으로 덮어쓰는 경우(특정도를 높여 선언)
   ============================================================= */


/* -------------------------------------------------------------
   1. 넓은 표의 가로 스크롤
      (원래 template/css/content.css 에 있던 규칙을 실제 로드되는 곳으로 옮김)
   ------------------------------------------------------------- */
@media all and (max-width:1400px){
	.table_wrap.table_scroll1400{width:100% !important; overflow-x:auto; -webkit-overflow-scrolling:touch;}
	.table_wrap.table_scroll1400 > table{width:1400px !important;}
	.table_wrap.table_scroll1400 > table tr td{word-break:break-all;}
}

@media all and (max-width:1200px){
	.table_wrap.table_scroll1200{width:100% !important; overflow-x:auto; -webkit-overflow-scrolling:touch;}
	.table_wrap.table_scroll1200 > table{width:1200px !important;}
	.table_wrap.table_scroll1200 > table tr td{word-break:break-all;}
}

/* 스크롤 클래스가 없는 표도 화면을 밀어내지 않도록 안전장치 */
@media all and (max-width:1024px){
	#bbs .table_wrap{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}


/* -------------------------------------------------------------
   2. 검색 필터 영역

   .search_wrap 은 관리자 화면 20여 곳이 함께 쓰는 클래스인데
   어느 CSS 에도 정의가 없어 좁은 화면에서 한 줄로 흘러 넘친다.

   다만 데스크톱 레이아웃까지 바꾸면 확인하지 않은 화면에서
   회귀가 생길 수 있으므로, 이미 깨져 있는 좁은 화면(1024px 이하)에만
   적용한다. 데스크톱 표시는 지금과 완전히 동일하다.
   ------------------------------------------------------------- */
@media all and (max-width:1024px){
	.search_wrap{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		gap:6px;
	}
	.search_wrap .form-control{max-width:100%;}
}

@media all and (max-width:768px){
	.search_wrap{gap:5px; justify-content:flex-start;}
	.search_wrap .form-control,
	.search_wrap select,
	.search_wrap input[type=text]{
		flex:1 1 46%;
		width:auto !important;
		min-width:0;			/* flex 아이템이 내용 때문에 넘치지 않도록 */
		height:38px;
		font-size:14px;
	}
	.search_wrap .btns,
	.search_wrap .btn{
		flex:1 1 46%;
		text-align:center;
		height:38px;
		line-height:36px;
		font-size:14px;
		box-sizing:border-box;
	}
}

@media all and (max-width:480px){
	.search_wrap .form-control,
	.search_wrap select,
	.search_wrap input[type=text],
	.search_wrap .btns,
	.search_wrap .btn{flex:1 1 100%;}
}


/* -------------------------------------------------------------
   3. 통계 요약 카드 (견적 No.8)
   ------------------------------------------------------------- */
.stat_card_wrap{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px;}
.stat_card{
	flex:1 1 180px; min-width:150px; padding:18px;
	background:#f7f9fc; border:1px solid #e3e8ef; border-radius:6px;
	box-sizing:border-box;
}
.stat_card .label{font-size:13px; color:#7a8699; margin-bottom:6px;}
.stat_card .value{font-size:26px; font-weight:bold; color:#2c3e50;}
.stat_card .unit {font-size:14px; font-weight:normal; color:#7a8699; margin-left:2px;}

@media all and (max-width:768px){
	.stat_card{flex:1 1 calc(50% - 6px); padding:14px;}
	.stat_card .value{font-size:21px;}
}

@media all and (max-width:400px){
	.stat_card{flex:1 1 100%;}
}


/* -------------------------------------------------------------
   4. 통계 탭 / 안내 문구
   ------------------------------------------------------------- */
.stat_tab{margin-bottom:15px;}
.stat_tab a{
	display:inline-block; padding:8px 18px; border:1px solid #ccc;
	border-radius:4px; margin:0 4px 4px 0; color:#555;
}
.stat_tab a.on{background:#3c8dbc; border-color:#3c8dbc; color:#fff; font-weight:bold;}

.stat_basis{margin:10px 0 20px; padding:10px 12px; background:#fffbe6; border:1px solid #ffe58f; color:#7a6320; line-height:1.6;}

@media all and (max-width:768px){
	.stat_tab a{padding:8px 12px; font-size:13px;}
	.stat_basis{font-size:13px;}
}


/* -------------------------------------------------------------
   5. 목록 처리 버튼 / 안내
      좁은 화면에서 버튼이 겹치지 않도록 한다.
   ------------------------------------------------------------- */
@media all and (max-width:768px){
	.btn_wrap{display:flex; flex-wrap:wrap; gap:6px;}
	.btn_wrap .btn{flex:1 1 auto; text-align:center;}

	/* 목록 행 안의 처리 버튼들 */
	#bbs .table_wrap > table td .btn-xs{display:inline-block; margin:2px 1px;}
}


/* -------------------------------------------------------------
   6. 소셜로그인 설정 화면 (견적 No.11)
      앱 키·Redirect URI 는 길어서 넓은 입력창이 필요하다.
   ------------------------------------------------------------- */
.sns_cfg_input{width:60%; max-width:100%;}

@media all and (max-width:1024px){
	.sns_cfg_input{width:100%;}
	/* 라벨 열이 좁은 화면에서 값 영역을 누른다.
	   20260812 정정 - 선택자에 테이블 클래스가 없어 th 를 tbody 에 두는 모든
	   관리자 상세/수정 화면(member/edit.jsp, siteConfig 전 패널 등)의 라벨 폭을
	   강제하고 각 화면의 colgroup 을 무력화하고 있었다. 해당 표로만 한정한다. */
	#bbs .table_wrap > table.sns_cfg_table > tbody > tr > th{width:120px; word-break:keep-all;}
}

@media all and (max-width:640px){
	/* 라벨/값을 세로로 쌓는다 */
	#bbs .table_wrap > table.sns_cfg_table,
	#bbs .table_wrap > table.sns_cfg_table > tbody,
	#bbs .table_wrap > table.sns_cfg_table > tbody > tr,
	#bbs .table_wrap > table.sns_cfg_table > tbody > tr > th,
	#bbs .table_wrap > table.sns_cfg_table > tbody > tr > td{display:block; width:100% !important;}
	#bbs .table_wrap > table.sns_cfg_table > tbody > tr > th{text-align:left; padding:10px 8px 4px;}
}


/* -------------------------------------------------------------
   7. 봉사팀 회원관리 - 회원 추가 영역 (견적 No.3)
   ------------------------------------------------------------- */
.grpmem_add{margin-bottom:20px; padding:12px; background:#f7f7f7;}

@media all and (max-width:768px){
	.grpmem_add{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
	.grpmem_add > strong{flex:1 1 100%;}
	.grpmem_add .form-control,
	.grpmem_add input[type=text]{flex:1 1 46%; width:auto !important; min-width:0;}
	.grpmem_add .btn{flex:1 1 100%; text-align:center;}
	.grpmem_add .table_wrap{flex:1 1 100%;}
}

/* 봉사팀 회원관리 - 팀 탈퇴 정보 (20260811) */
.grpmem_outinfo{display:inline-block; margin-top:3px; font-size:12px; color:#7a8699; line-height:1.5;}


/* -------------------------------------------------------------
   8. 검색 필터 세로 간격 (20260812)

   관리자 목록 화면들은 필터를
     .form-wrap > .form-horizontal > .row  +  <div class="light-grey-hr">
   구조로 쓴다. 구분선(.light-grey-hr, margin:10px)은 content.css 에 정의돼
   있으므로 마크업에서 줄을 나누고 구분선을 넣기만 하면 된다.
   여기서는 구분선이 없는 경우와, content.css 에 대응이 없는
   중간 폭(991px 이하)에서의 세로 간격만 보완한다.
   ------------------------------------------------------------- */
/* 구분선 없이 .row 가 연달아 오는 화면도 붙지 않게 한다 */
.form-wrap .form-horizontal .row + .row{margin-top:12px;}

/* 한 줄 안에서 컬럼이 접힐 때(중간 폭)도 세로 간격을 준다 */
@media all and (max-width:991px){
	.form-wrap .form-horizontal .row > [class*="col-md-"]{margin-bottom:10px;}
	.form-wrap .form-horizontal .row > [class*="col-md-"]:last-child{margin-bottom:0;}
}

/* 9. 공용 모달 스타일은 /css/vzmodal.css 로 옮겼다 (프론트와 공용). */


/* -------------------------------------------------------------
   10. 목록 안의 처리 버튼 (20260812)

   .btns 는 padding:6px 20px / font-size:14px 라 폼 하단의 큰 버튼용이다.
   목록 셀 안에서 2~3개가 나란히 놓이면 열이 과하게 넓어지므로
   목록 전용 소형 버튼을 둔다. 좁은 열에서는 두 줄로 접힌다.
   ------------------------------------------------------------- */
.btns.btns_grid{
	padding:3px 8px;
	margin:1px;
	font-size:12px;
	line-height:18px;
	white-space:nowrap;
}

/* 승인상태 칸 - 반려 사유가 길어도 열을 밀어내지 않게 */
.appr_memo{
	display:inline-block;
	margin-top:2px;
	font-size:12px; color:#888; line-height:1.4;
	word-break:break-all;
}
.appr_block{font-size:12px; color:#d32b2b;}