@charset "utf-8";
/* 메인화면 다중 게시판 랜덤 갤러리 (Stage1) - copyright(c) WEBsiting.co.kr */

#mainGalleryBox { position: relative; }
/* [원복] "메인화면"/"선물포인트" 라벨 버튼 두 개를 나란히 두는 대신, 원래대로 톱니바퀴 아이콘
   버튼 하나로 되돌림 - 누르면 #mgAdminChoiceModal(아래 .mg_choice_* 참고)이 먼저 뜨고, 거기서
   "메인화면"/"선물포인트" 중 고르는 방식으로 바뀜 */
#mainGalleryBox .mg_admin_btn {
	position: absolute; top: 15px; right: 15px; z-index: 5;
	width: 32px; height: 32px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px;
	background: #999; color: #fff; border: none; border-radius: 50%; cursor: pointer;
}
#mainGalleryBox .mg_admin_btn:hover { background: #777; }

/* [버그 수정] 썸네일 박스를 감싸는 <i> 태그 자체에 위치 기준(position:relative)이 없어서, 그 안의
   절대위치(position:absolute) 요소들(게시판 이름 배지 .mg_board_tag, 유튜브 미리보기 .youtube_img
   등)이 <i>가 아니라 훨씬 위쪽의 다른 조상 요소를 기준으로 배치되어 왔음(색상 배경이 있는 .mg_ph_bg
   케이스는 자체적으로 position:relative가 있어서 문제 없었지만, 첨부 이미지가 있는 글/유튜브 링크만
   있는 글처럼 .mg_ph_bg가 아닌 순수 <i>에는 이게 빠져 있었음 - 특히 유튜브 썸네일은 배경 이미지를
   채울 크기 기준 자체가 없어서 사실상 화면에 전혀 안 보이는 상태였음). */
.galleryBoxLat ul li a > i { position: relative; overflow: hidden; }

/* 이미지 박스 상단 중앙에 작게 표시하는 게시판(메뉴) 이름 - 이미지 유무/종류와 관계없이 모든 박스에 공통 적용 */
.galleryBoxLat ul li a > i .mg_board_tag {
	position: absolute; left: 50%; top: 8px;
	transform: translateX(-50%);
	background: rgba(0,0,0,0.55); color: #fff;
	font-size: 11px; line-height: 1; padding: 4px 10px;
	border-radius: 20px; white-space: nowrap;
	max-width: 88%; overflow: hidden; text-overflow: ellipsis;
	z-index: 6;
	pointer-events: none;
}

/* [유튜브 썸네일] 첨부 이미지 없이 유튜브 링크만 있는 글의 미리보기 - PHP에서 만들어주는
   background-image 인라인 스타일 값은 항상 정상이었지만, 이 요소 자체를 <i> 영역에 꽉 채워
   보여주는 크기/위치 지정이 없어서(위 <i> 규칙 추가 전까지) 화면에 전혀 나타나지 않았음. */
.galleryBoxLat ul li a > i .youtube_img {
	position: absolute; left: 0; top: 0; right: 0; bottom: 0;
	background-repeat: no-repeat; background-size: cover; background-position: center center;
	transition: transform 0.25s ease;
	z-index: 0;
}
.galleryBoxLat ul li a:hover > i .youtube_img { transform: scale(1.06); }

/* [이미지 없는 글] 실제 <img>가 투명(transparent) 스페이서라 기존 hover opacity 효과가 보이지 않으므로,
   파스텔 배경 자체에 ::after 어두운 오버레이를 별도로 적용해 롤오버시 어두워지는 효과를 재현함 */
.galleryBoxLat ul li a > i.mg_ph_bg { position: relative; overflow: hidden; }
.galleryBoxLat ul li a > i.mg_ph_bg::after {
	content: '';
	position: absolute; left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0);
	transition: background-color 0.25s ease;
	pointer-events: none;
	z-index: 2;
}
.galleryBoxLat ul li a:hover > i.mg_ph_bg::after { background: rgba(0,0,0,0.5); }

/* [뉴스 항목] 실제 기사 사진을 배경색 스페이서 위에 꽉 채워 겹쳐 표시 (사진 로딩 실패시 사진만 사라지고
   배경색+제목+요약은 그대로 남도록 절대위치로 배치) */
.galleryBoxLat ul li a > i.mg_ph_bg .mg_news_photo {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* [이미지 없는 글] 배경 중앙의 반투명(50%) 동물 아이콘 - 박스 크기에 비례해 유동적으로 커짐 (기존 대비 4배 크기) */
.galleryBoxLat ul li a > i.mg_ph_bg .mg_ph_icon {
	position: absolute; left: 50%; top: 50%;
	width: 136%;
	transform: translate(-50%, -50%);
	opacity: 0.5;
	z-index: 1;
	pointer-events: none;
}
.galleryBoxLat ul li a > i.mg_ph_bg .mg_ph_icon::before { content: ''; display: block; padding-top: 100%; }
.galleryBoxLat ul li a > i.mg_ph_bg .mg_ph_icon svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* [이미지 없는 글] 제목 일부를 이미지 영역 중앙에 흰색으로 크게 표시 (아이콘보다 앞쪽에 위치) */
.galleryBoxLat ul li a > i.mg_ph_bg .mg_ph_title {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	position: absolute; left: 8%; right: 8%; top: 50%;
	transform: translateY(-50%);
	text-align: center; font-size: 20px; font-weight: bold; line-height: 1.35;
	word-break: break-word;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 0 8px rgba(0,0,0,0.35);
	z-index: 3;
}

/* [이미지 없는 글] 롤오버시 본문 요약이 아래에서 위로 올라오며 나타남 */
.galleryBoxLat ul li a > i.mg_ph_bg .mg_ph_summary {
	position: absolute; left: 0; right: 0; bottom: 0;
	max-height: 55%; overflow: hidden; box-sizing: border-box;
	background: rgba(0,0,0,0.62); color: #fff;
	font-size: 12px; line-height: 1.5; padding: 10px;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	z-index: 4;
}
.galleryBoxLat ul li a:hover > i.mg_ph_bg .mg_ph_summary { transform: translateY(0); }

/* 최근글 영역 상단 타이틀/설명 문구 글자 크기 (관리자 설정: 대/중/소) - 화면 크기에 따라 유동적으로 변하도록 clamp() 사용 */
.mg_title_sm { font-size: clamp(15px, 2.2vw, 18px); }
.mg_title_md { font-size: clamp(18px, 2.8vw, 24px); }
.mg_title_lg { font-size: clamp(22px, 3.6vw, 32px); }

/* 최근글 영역 상단 설명 문구 (타이틀 아래, 선택 입력) */
.galleryLatDesc { text-align: center; color: #777; line-height: 1.6; margin: -6px 0 10px; }
.mg_desc_sm { font-size: clamp(11px, 1.6vw, 13px); }
.mg_desc_md { font-size: clamp(12px, 1.8vw, 15px); }
.mg_desc_lg { font-size: clamp(14px, 2.2vw, 18px); }

/* 한 행에 보여줄 이미지 박스 개수 (관리자 설정, 화면 크기별 최소~최대 1~5개, CSS 변수로 전달됨).
   [수정] 예전엔 CSS 다단(column-count) 매스너리 레이아웃을 썼는데(썸네일 세로 길이가 제각각이던 시절
   빈틈을 없애려던 목적), 지금은 썸네일이 관리자 설정 비율(ratio_w/ratio_h)로 항상 고정 크기로
   나오기 때문에 매스너리의 장점은 거의 없어지고, 대신 "전체 개수가 열 개수의 배수가 아니면 맨 뒤
   1개 열이 통째로 짧아져 여러 줄에 걸쳐 비어 보이는" 단점만 남아 있었음(다단 레이아웃은 위→아래로
   먼저 채운 뒤 다음 열로 넘어가는 방식이라, 읽는 순서가 좌→우가 아니라 위→아래·열 우선이기 때문).
   그래서 일반적인 그리드(grid)로 바꿔서, 항목이 항상 좌→우, 위→아래 순서로 빈틈없이 채워지고
   (모자라는 자리는 맨 마지막 줄에서만 생김), 게시물 개수를 억지로 잘라낼 필요도 없어지도록 함 */
#mgList {
	display: grid;
	grid-template-columns: repeat(var(--mg-cols-desktop, 3), minmax(0, 1fr));
	gap: 0;
	background: #2b2b2b;
}
#mgList li {
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	min-width: 0; /* 그리드 아이템 기본값(auto)이 콘텐츠(이미지) 고유 너비만큼 최소폭을 요구해서, 셀보다
	                 이미지가 넓을 때 그리드가 트랙을 억지로 늘리며 레이아웃이 깨지는 것을 방지 */
	/* [진짜 원인 발견] index.php에서 다른 스킨용 CSS인 skin/latest/gallery_box/style.css(우선순위 1)도
	   같이 불러오는데, 그 파일 안에 ".galleryBoxLat ul li{width:33.33333%; float:left;}" 라는 규칙이
	   있음. #mainGalleryBox도 class="galleryBoxLat"라서 #mgList(그 안의 ul) > li도 이 규칙에 걸려
	   그리드 칸(1/N) 안에서 다시 33.33%로 줄어들고 float까지 걸려있었음 - 지금까지 <a>/<i>/<img> 안쪽만
	   고쳤지 <li> 자체 폭은 안 건드려서 안 먹혔던 것. 여기서 명시적으로 되돌림 */
	width: auto;
	float: none;
}
/* [중요] <a>/<i>는 원래 인라인 요소라 안의 <img>가 셀 너비를 꽉 채우지 못하고 원본 픽셀 크기 그대로
   나오면서(그 옆으로 배경색만 남는) 문제가 있었음 - 셀(li) 너비에 맞춰 사진이 꽉 차게 명시적으로 지정함 */
#mgList li a { display: block; width: 100%; }
#mgList li a > i { display: block; width: 100%; }
/* [버그 수정] .mg_news_photo(외부 뉴스 실제 사진)는 원래 이 <i> 박스를 position:absolute로 꽉 채우도록
   (width/height:100%, object-fit:cover) 별도로 스타일링돼 있었는데, 위 규칙이 ID 선택자라 특정도가 더
   높아서 그 height:100%를 height:auto로 덮어써버렸음(사진이 자기 원본 비율만큼만 나오고 나머지는
   배경색만 남는 문제) - 그래서 .mg_news_photo는 이 규칙에서 제외해 원래 절대위치 스타일이 그대로 살도록 함 */
#mgList li a > i > img:not(.mg_news_photo) { display: block; width: 100%; height: auto; }
/* font-size:0 리셋으로 인해 자체 font-size가 지정되지 않은 하단 롤오버 제목(<b>)이 보이지 않게 되는 것을 방지 */
#mgList li a > b { font-size: 13px; }
@media all and (max-width:1024px) {
	#mgList { grid-template-columns: repeat(var(--mg-cols-tablet, 2), minmax(0, 1fr)); }
}
@media all and (max-width:650px) {
	#mgList { grid-template-columns: repeat(var(--mg-cols-mobile, 1), minmax(0, 1fr)); }
}
@media all and (max-width:360px) {
	/* [요청] 화면 폭 360px 이하(소형 모바일 기기)에서만 관리자 설정(cols_min)과 무관하게 1열로 고정 */
	#mgList { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
	/* [요청] 같은 화면 폭에서 글자 크기를 조금 더 키움 - 1열이라 카드 자체가 넓어져 글자를
	   키워도 잘리거나 줄바꿈이 어색해지지 않음 */
	#mgList li a > b { font-size: 14.5px !important; }
}

/* 뉴스 썸네일(외부 서버) 로딩이 실패하거나 일정 시간 내 끝나지 않으면 기본 어두운 박스 + 제목으로 대체 */
.galleryBoxLat ul li a > i.mg_img_fail { background: #333; }
.galleryBoxLat ul li a.mg_img_fail_a > b { top: 50% !important; }

/* 뉴스 게시물 클릭시 뜨는 레이어 팝업 - 모바일에서는 전체화면, 웹(데스크탑) 화면에서는 가로폭 80%로 중앙 배치하고
   뒷 배경은 어둡게 처리 */
.mg_news_popup_overlay {
	position: fixed; left: 0; top: 0; width: 100%; height: 100%;
	background: rgba(0,0,0,0.85);
	z-index: 99999;
	align-items: center; justify-content: center;
	box-sizing: border-box;
}
.mg_news_popup_inner {
	display: flex; flex-direction: column; box-sizing: border-box;
	width: 100%; height: 100%; background: #fff;
}
.mg_news_popup_header { background: #fff; padding: 12px 15px; text-align: left; flex-shrink: 0; border-bottom: 1px solid #444; }
.mg_news_popup_header img { max-height: 30px; vertical-align: middle; }
.mg_news_popup_body { flex-grow: 1; background: #fff; position: relative; overflow: hidden; }
.mg_news_popup_body iframe { width: 100%; height: 100%; border: none; }
.mg_news_popup_footer { background: #222; padding: 12px 15px; text-align: right; flex-shrink: 0; border-top: 1px solid #444; }
.mg_news_popup_footer button {
	background: #e74c3c; color: #fff; border: none; padding: 10px 20px;
	font-size: 16px; font-weight: bold; border-radius: 5px; width: 100%; cursor: pointer;
}
@media all and (min-width:768px) {
	.mg_news_popup_inner {
		width: 80%; height: 85vh; max-width: 1400px;
		border-radius: 8px; overflow: hidden;
		box-shadow: 0 10px 40px rgba(0,0,0,0.6);
	}
}

.mg_loading { text-align: center; padding: 20px; color: #999; font-size: 13px; }

/* 관리자 팝업 */
.mg_modal_overlay {
	position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999;
	background: rgba(0,0,0,0.5);
	display: flex; align-items: center; justify-content: center;
}
.mg_modal_panel {
	position: relative; width: 92%; max-width: 860px; max-height: 88vh; overflow-y: auto;
	background: #f5f5f3; border-radius: 10px; padding: 30px; box-sizing: border-box;
}
.mg_modal_panel h3 { margin: 0 0 20px; font-size: 18px; }
.mg_modal_close {
	position: absolute; top: 15px; right: 15px; width: 30px; height: 30px;
	background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #999;
}

/* [신규] "메인화면 관리"/"선물포인트 이벤트 관리" 두 팝업을 하나로 합치면서 생긴 탭 바 - 왼쪽
   "메인화면", 오른쪽 "선물포인트" 버튼을 누르면 아래 내용(mg_tab_bar 바로 다음의 두 컨텐츠 영역
   중 하나)만 바뀌고 팝업 자체는 안 닫힘. 예전 선택 팝업(.mg_choice_*)과 바로가기 버튼
   (.mg_gift_event_link_btn)은 탭으로 대체되어 더 이상 쓰지 않음 */
.mg_tab_bar { display: flex; gap: 8px; margin: 28px 0 22px; }
.mg_tab_btn {
	flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
	padding: 12px; background: #e9e9e6; color: #666; border: none; border-radius: 8px;
	font-size: 14.5px; font-weight: bold; text-align: center; cursor: pointer;
}
.mg_tab_btn:hover { background: #ddd; }
.mg_tab_btn.mg_tab_active { background: #132b45; color: #fff; }
.mg_tab_btn.mg_tab_active:hover { background: #132b45; }

/* [연관 게시물] "태그관리" 탭의 토픽(태그) 목록 - 이름 입력칸 / 키워드 입력칸 / 저장·삭제 버튼을
   한 줄에 나란히 배치 */
.rp_topic_row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rp_topic_row .gea_text_input { width: auto; margin: 0; }
#rpNewTopicRow { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #ddd; }
.rp_topic_pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0; }
.rp_pager_info { font-size: 13px; color: #777; }

/* [연관 게시물] view.skin.php 안내 팝업 안의 코드 블록 */
.rp_code_block { background: #1e293b; color: #e2e8f0; padding: 12px 14px; border-radius: 8px; font-size: 12.5px; font-family: Consolas, Monaco, monospace; overflow-x: auto; white-space: pre-wrap; word-break: break-all; margin: 6px 0 14px; }

/* [포인트 기부] "기부" 탭의 기부 회원 목록 - 아이디/닉네임/포인트/환산금액/일시/환불버튼을 한 줄에 배치 */
.dn_log_row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font-size: 13px; border-bottom: 1px solid #e6e6e6; flex-wrap: wrap; }
.dn_log_row:last-child { border-bottom: none; }
.dn_log_row.dn_log_refunded { opacity: .55; }
.dn_log_id { width: 120px; flex-shrink: 0; font-weight: 700; color: #222; word-break: break-all; }
.dn_log_points { width: 90px; flex-shrink: 0; color: #132b45; font-weight: 700; }
.dn_log_krw { width: 100px; flex-shrink: 0; color: #666; }
.dn_log_date { width: 150px; flex-shrink: 0; color: #999; font-size: 12px; }
.dn_log_status { flex: 1; min-width: 90px; font-size: 12px; color: #c0392b; }
.dn_log_refund_btn { flex-shrink: 0; padding: 5px 10px; font-size: 12px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #c0392b; cursor: pointer; }
.dn_log_refund_btn:hover { background: #fdeceb; }
.dn_log_empty { padding: 20px; text-align: center; color: #999; font-size: 13px; }

/* [선물포인트 이벤트] 전용 팝업(#geAdminModal) 안의 컴포넌트 스타일. 위 main_gallery 관리 팝업의
   .mg_admin_group/.mg_group_title 등과는 별개로, 원래 전용 페이지였던 걸 팝업으로 옮기며 쓰던
   .gea_* 클래스를 그대로 재사용함(그래서 이름 접두어가 mg_가 아니라 gea_) */
.gea_group{ background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:22px 24px; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.gea_group_title{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:800; color:#222; margin:0 0 14px; }
.gea_group_num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#132b45; color:#fff; font-size:12px; font-weight:700; flex-shrink:0; }
.gea_desc{ font-size:13px; color:#888; line-height:1.6; margin:0 0 14px; }
.gea_hint_inline{ font-weight:400; color:#999; font-size:12px; }

.gea_field{ margin-bottom:16px; }
.gea_field:last-child{ margin-bottom:0; }
.gea_label{ display:block; font-size:13.5px; font-weight:700; color:#444; margin-bottom:6px; }
.gea_text_input, .gea_number_input, .gea_textarea{ box-sizing:border-box; padding:9px 12px; border:1px solid #ddd; border-radius:6px; font-size:14px; }
.gea_text_input{ width:100%; }
.gea_textarea{ width:100%; resize:vertical; font-family:inherit; }
.gea_radio_inline{ display:inline-flex; align-items:center; gap:6px; font-size:14px; cursor:pointer; margin-right:16px; }

.gea_tier_row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:14px; }
.gea_tier_row input[type="number"]{ width:90px; }
.gea_tier_row.gea_tier_last input.gea_tier_percent{ background:#f4f4f4; color:#666; cursor:not-allowed; }
.gea_percent_sum_row{ margin-top:10px; font-size:13px; color:#555; }
.gea_percent_sum_row span{ font-weight:800; }

.gea_icon_row{ display:flex; gap:20px; flex-wrap:wrap; }
.gea_icon_item{ text-align:center; }
.gea_icon_item p{ font-size:12.5px; font-weight:700; color:#555; margin:0 0 6px; }
.gea_icon_item img{ display:block; max-width:70px; margin:6px auto 0; border-radius:8px; border:1px solid #eee; }

.gea_budget_status{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.gea_stat_box{ flex:1; min-width:120px; background:#f7f8fa; border-radius:8px; padding:12px 14px; text-align:center; }
.gea_stat_box .n{ display:block; font-size:19px; font-weight:800; color:#132b45; }
.gea_stat_box .l{ display:block; font-size:12px; color:#888; margin-top:2px; }
.gea_status_pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.gea_status_on{ background:#e6f6ea; color:#2f9e44; }
.gea_status_off{ background:#fdeceb; color:#c0392b; }

.gea_btn{ padding:10px 22px; border-radius:7px; font-size:14px; font-weight:700; cursor:pointer; border:1px solid transparent; }
.gea_btn_primary{ background:#132b45; color:#fff; }
.gea_btn_primary:hover{ background:#0d1e30; }
.gea_btn_ghost{ background:#fff; color:#666; border-color:#ddd; }
.gea_btn_ghost:hover{ background:#f5f5f5; }
.gea_btn_danger_ghost{ background:#fff; color:#c0392b; border-color:#f0c3bd; }
.gea_btn_danger_ghost:hover{ background:#fdeceb; }
.gea_btn[disabled]{ opacity:.6; cursor:not-allowed; }

.gea_apply_row{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }
.gea_result_msg{ font-size:13px; margin-top:10px; padding:9px 12px; border-radius:6px; display:none; }
.gea_result_msg.gea_ok{ display:block; background:#e6f6ea; color:#2f9e44; }
.gea_result_msg.gea_err{ display:block; background:#fdeceb; color:#c0392b; }

.gea_super_badge{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:20px; background:#132b45; color:#fff; font-size:11px; font-weight:700; vertical-align:middle; }

.gea_lookup_panel{ margin-top:12px; padding:14px 16px; background:#f7f8fa; border:1px solid #e6e6e6; border-radius:8px; }
.gea_lookup_row{ display:flex; padding:4px 0; font-size:13.5px; }
.gea_lookup_k{ width:80px; flex-shrink:0; color:#888; }
.gea_lookup_v{ color:#222; font-weight:600; word-break:break-all; }
.gea_lookup_warn{ margin-bottom:10px; padding:8px 10px; border-radius:6px; background:#fdeceb; color:#c0392b; font-size:13px; font-weight:700; }

/* 관리자 팝업 - 화면 구성 순서(상단 타이틀 -> 최근글 -> 배너)와 동일하게 3개 그룹으로 묶어 시인성을 높임 */
.mg_admin_group {
	background: #fff; border: 1px solid #e2e2e0; border-radius: 10px;
	padding: 18px 20px 22px; margin-bottom: 18px;
}
.mg_group_title {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #333;
	font-size: 16px; font-weight: bold; color: #222;
}
.mg_group_num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%; background: #333; color: #fff;
	font-size: 12px; font-weight: bold; flex-shrink: 0;
}
.mg_admin_group .mg_modal_section { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid #eee; }
.mg_admin_group .mg_modal_section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.mg_modal_section { margin-bottom: 24px; }
.mg_modal_desc { font-size: 13px; color: #666; margin: 0 0 10px; }
.mg_board_list { max-height: 260px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; padding: 10px; }
.mg_board_row { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; font-size: 13px; }
.mg_board_row label { display: flex; align-items: center; gap: 6px; }
.mg_bo_table { color: #aaa; font-size: 11px; }
.mg_board_count { width: 55px; padding: 4px; text-align: center; border: 1px solid #ddd; border-radius: 4px; }
.mg_apply_btn {
	display: block; width: 100%; padding: 12px; font-size: 15px; font-weight: bold;
	background: #333; color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.mg_apply_btn:hover { background: #555; }

/* 히어로 슬라이드 / 배너 관리 폼 */
#mgHeroCount { margin-bottom: 12px; }
.mg_hero_slide, .mg_banner_item, .sb_banner_item {
	border: 1px solid #eee; border-radius: 6px; padding: 12px; margin-bottom: 10px;
}
.mg_hero_slide_title { font-size: 13px; font-weight: bold; margin: 0 0 8px; color: #333; }
.mg_radio_inline { display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; font-size: 13px; }
.mg_hint_inline { display: block; font-size: 12px; color: #999; margin: 2px 0 6px; }
.mg_hero_image_field, .mg_hero_youtube_field { margin: 8px 0; }
.mg_hero_youtube_url, .mg_hero_link, .mg_hero_title_text, .mg_hero_desc_text, .mg_banner_link, .sb_banner_link {
	width: 100%; box-sizing: border-box; padding: 6px 8px; margin-top: 6px;
	border: 1px solid #ddd; border-radius: 4px; font-size: 13px;
}
.mg_banner_link, .sb_banner_link { resize: vertical; }

/* [배너관리 탭] 메인화면/서브 페이지 10곳 중 하나를 골라 그 배너 설정만 아래에 보여주는 방식으로
   변경(이전엔 11개를 한 화면에 전부 나열해서 너무 길었음). 버튼 목록 + 선택된 페이지 패널 1개만 표시. */
.mg_banner_page_selector { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.mg_banner_page_btn { padding: 7px 14px; font-size: 12.5px; font-weight: bold; color: #555; background: #f5f5f5; border: 1px solid #e2e2e0; border-radius: 18px; cursor: pointer; }
.mg_banner_page_btn:hover { background: #ececec; }
.mg_banner_page_btn.mg_banner_page_active { background: #333; color: #fff; border-color: #333; }
.mg_banner_page_panel { padding-top: 2px; }
.sb_page_group_title { font-size: 14px; font-weight: bold; margin: 0 0 10px; color: #222; }
.sb_page_save_btn { width: auto; display: inline-block; padding: 8px 18px; font-size: 13px; margin-top: 8px; }
.sb_page_save_msg { display: inline-block; margin-left: 10px; font-size: 12.5px; vertical-align: middle; }

/* 히어로 타이틀/설명 텍스트 폰트 선택 - 드롭다운 옆에 선택한 폰트가 바로 반영되는 샘플 미리보기를 붙임 */
.mg_font_select_row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.mg_font_select_label { display: inline-block; font-size: 12px; color: #888; }
.mg_font_select_label select { display: block; margin-top: 4px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; min-width: 190px; }
.mg_font_preview {
	flex: 1; min-width: 140px; padding: 8px 12px;
	background: #f5f5f3; border: 1px solid #e2e2e0; border-radius: 6px;
	font-size: 17px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: font-family 0.1s;
}

/* 히어로 슬라이드 타이틀 앞 아이콘(파비콘) 선택 버튼 목록 */
.mg_hero_icon_field { margin: 10px 0; }
.mg_icon_field_label { display: block; font-size: 12px; color: #888; margin-bottom: 6px; }
.mg_icon_picker { display: flex; flex-wrap: wrap; gap: 6px; }
.mg_icon_choice {
	width: 36px; height: 36px; padding: 0;
	border: 1px solid #ddd; border-radius: 6px; background: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 15px; color: #555; cursor: pointer;
}
.mg_icon_choice:hover { border-color: #999; }
.mg_icon_choice.active { border-color: #333; background: #333; color: #fff; }
.mg_icon_choice .mg_icon_none { font-size: 11px; color: #aaa; }
.mg_icon_choice.active .mg_icon_none { color: #fff; }

/* 갤러리 진단정보 (관리자 전용) */
.mg_debug_panel { margin: 10px 0 20px; }
.mg_debug_toggle_btn {
	font-size: 12px; padding: 6px 12px; background: #eee; border: 1px solid #ddd;
	border-radius: 4px; cursor: pointer; color: #555;
}
.mg_debug_table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.mg_debug_table th, .mg_debug_table td { border: 1px solid #eee; padding: 6px 8px; text-align: left; }
.mg_debug_table th { background: #f7f7f7; }

/* 하단 커스텀 배너(소스코드 입력) - customBan 레이아웃과 동일하게 50%씩 배치 */
.customBan .customBanCustom { width: 50%; float: left; overflow: hidden; box-sizing: border-box; }

@media all and (max-width:800px) {
	.customBan .customBanCustom { width: 100%; }
}

/* [버그 수정] 하단 배너가 어둡게 보이는 문제 - css/default.css의 옛 기본테마 스타일
   (.customBan a{background:#222} + .customBan a img{opacity:0.5})은 원래 배너 이미지 위에
   흰 글씨 제목(.customBanTit)을 올리기 위해 이미지를 일부러 어둡게 반투명 처리해 두던 효과였음.
   지금 하단 배너(main_gallery_render_banner_item)는 제목 오버레이 없이 이미지를 그대로 보여주는
   용도라서, 이 옛 효과가 그대로 적용되면 이미지가 어두운 회색(#222) 배경 위에 절반만 보이는 것처럼
   나타남. 실제 배너에는 필요 없는 효과이므로 원래 밝기(opacity:1)로 되돌리고 어두운 배경을 제거함 */
/* [선물포인트 이벤트] 관리자 설정 4번째 섹션 - 포인트/확률 6줄, 아이콘 3개 업로드 카드 */
.ge_tier_row { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 13px; }
.ge_tier_row input[type="number"] { width: 70px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }
#gePercentSum { font-weight: bold; }
.ge_icon_row { display: flex; gap: 16px; flex-wrap: wrap; }
.ge_icon_item { text-align: center; }
.ge_icon_preview { border: 1px solid #eee; border-radius: 8px; background: #fafafa; padding: 4px; }
.ge_reset_btn {
	display: inline-block; margin-top: 14px; padding: 9px 18px; border: 1px solid #ddd; border-radius: 6px;
	background: #fff; color: #666; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.ge_reset_btn:hover { background: #f5f5f5; }

.customBan a img { opacity: 1 !important; filter: none !important; }
.customBan a:hover img { opacity: 1 !important; }
.customBan a { background: transparent !important; }

@media all and (max-width:650px) {
	#mainGalleryBox .mg_admin_btn { width: 28px; height: 28px; font-size: 13px; }
	.mg_modal_panel { padding: 20px; }
	.mg_admin_group { padding: 14px 14px 18px; }
	.mg_font_select_row { flex-direction: column; align-items: stretch; }
	.mg_font_select_label select { min-width: 0; width: 100%; }
}

/* 모바일 화면은 마우스 롤오버가 불가능하므로, 롤오버시에만 보이던 요소들을 항상 보이는 상태로 고정함 */
@media all and (max-width:650px) {
	/* 실제 이미지가 있는 글의 제목(하단에서 중앙으로 올라오는 <b>)을 항상 표시 */
	#mgList li a > b { top: 50% !important; }
	/* 이미지 없는 글 / 뉴스데이터 항목의 롤오버 요약(하단에서 위로 올라오는 부분)을 항상 표시 */
	#mgList li a > i.mg_ph_bg .mg_ph_summary { transform: translateY(0) !important; }
}