/*========================================
  UI 컴포넌트 스타일 - CSS 변수 활용
  7가지 핵심 요소 스타일링

  이 파일은 관리자 페이지에서 설정한 CSS 변수를 활용하여
  라이트/다크 모드에 자동으로 대응합니다.
========================================*/


/*========================================
  1. 페이지네이션 (Pagination)
  ----------------------------------------
  적용 위치: 게시판 목록 하단 페이지 번호

  변수 설명:
  --pagination-active-bg      : 현재 페이지 번호의 배경색 (기본: 오렌지 #ff9f1c)
  --pagination-active-text    : 현재 페이지 번호의 글자색 (기본: 흰색 #ffffff)
  --pagination-inactive-border: 비활성 페이지 번호의 테두리 (기본: 회색 #dee2e6)
  --pagination-hover-bg       : 마우스 호버 시 배경색 (기본: 연회색 #f8f9fa)
========================================*/
.pagination a,
.pagination02 a,
.mPag a {
	border: 1px solid var(--pagination-inactive-border);
	background-color: var(--bg-primary);
	color: var(--text-primary);
	transition: all 0.2s ease;
}

.pagination a:hover,
.pagination02 a:hover,
.mPag a:hover {
	background-color: var(--pagination-hover-bg);
	border-color: var(--brand-orange);
}

.pagination .on,
.pagination02 .on,
.mPag .selected,
.mPag strong {
	background-color: var(--pagination-active-bg) !important;
	color: var(--pagination-active-text) !important;
	border-color: var(--pagination-active-bg) !important;
	font-weight: bold;
}

.pagination .prev,
.pagination .next,
.mPag .prev,
.mPag .next {
	border-color: var(--pagination-inactive-border);
	background-color: var(--bg-secondary);
}

.pagination .prev:hover,
.pagination .next:hover,
.mPag .prev:hover,
.mPag .next:hover {
	background-color: var(--pagination-hover-bg);
	border-color: var(--brand-orange);
}


/*========================================
  2. 커스텀 셀렉트박스 (Custom Selectbox)
  ----------------------------------------
  적용 위치: js/custom_selectbox 사용 드롭다운

  변수 설명:
  --select-list-bg  : 드롭다운 리스트 배경색 (라이트: 흰색, 다크: 어두운 회색)
  --select-hover-bg : 옵션 호버 시 배경색 (라이트: 연회색, 다크: 진회색)
========================================*/
.customSelect,
.select_custom {
	background-color: var(--bg-input);
	border-color: var(--border-input);
	color: var(--text-primary);
}

.customSelect .customSelectInner,
.select_custom_inner {
	background-color: var(--select-list-bg);
	border-color: var(--border-secondary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.customSelect ul,
.select_custom ul,
.custom_select_list {
	background-color: var(--select-list-bg);
}

.customSelect ul li,
.select_custom ul li,
.custom_select_list li {
	color: var(--text-primary);
	transition: background-color 0.15s ease;
}

.customSelect ul li:hover,
.select_custom ul li:hover,
.custom_select_list li:hover {
	background-color: var(--select-hover-bg) !important;
	color: var(--text-primary);
}

.customSelect ul li.selected,
.select_custom ul li.selected,
.custom_select_list li.selected {
	background-color: var(--bg-button-active);
	color: var(--pagination-active-text);
}


/*========================================
  3. 리스트 디테일 (List Detail)
  ----------------------------------------
  적용 위치: 게시판 목록의 제목 옆 댓글 수, 'N' 아이콘

  변수 설명:
  --point-blue     : 댓글 수 표시 색상 (파란색 계열)
  --new-icon-bg    : 'N' 신규 게시물 아이콘 배경색 (빨간색)
  --new-icon-text  : 'N' 아이콘 글자색 (흰색)
========================================*/
/* 댓글 수 */
.comment_count,
.reply_count,
span.count,
a span.count,
.list_comment_count {
	color: var(--point-blue) !important;
	font-weight: 600;
}

/* 제목 옆 [숫자] 형태의 댓글 수 */
.community_list td a span.count,
.mem_list td a span.count,
.etc_list td span.count {
	color: var(--point-blue) !important;
	font-size: 11px;
	margin-left: 3px;
}

/* 신규 게시물 'N' 아이콘 */
.new_icon,
.icon_new,
.new,
span.new {
	display: inline-block;
	background-color: var(--new-icon-bg) !important;
	color: var(--new-icon-text) !important;
	font-size: 9px;
	font-weight: bold;
	padding: 1px 4px;
	border-radius: 2px;
	margin-left: 4px;
	vertical-align: middle;
	line-height: 1.2;
}

/* 'HOT' 아이콘 */
.hot_icon,
.icon_hot,
span.hot {
	display: inline-block;
	background-color: var(--brand-red) !important;
	color: #ffffff !important;
	font-size: 9px;
	font-weight: bold;
	padding: 1px 4px;
	border-radius: 2px;
	margin-left: 4px;
	vertical-align: middle;
}


/*========================================
  4. 검색창 (Search Input)
  ----------------------------------------
  적용 위치: 게시판 검색창, 헤더 검색창

  변수 설명:
  --placeholder-color    : 힌트 텍스트(placeholder) 색상
  --search-focus-border  : 검색창 포커스 시 테두리 색상 (오렌지)
========================================*/
/* 검색 입력창 기본 스타일 */
.search_input,
.searchfor input.text,
input.search_text,
input[type="search"],
.header_search input {
	background-color: var(--bg-input);
	border: 1px solid var(--border-input);
	color: var(--text-primary);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 플레이스홀더 색상 */
.search_input::placeholder,
.searchfor input.text::placeholder,
input.search_text::placeholder,
input[type="search"]::placeholder,
.header_search input::placeholder {
	color: var(--placeholder-color);
	opacity: 1;
}

/* Webkit 브라우저 (Chrome, Safari, Edge) */
input::-webkit-input-placeholder {
	color: var(--placeholder-color);
}

/* Firefox */
input::-moz-placeholder {
	color: var(--placeholder-color);
	opacity: 1;
}

/* IE 10+ */
input:-ms-input-placeholder {
	color: var(--placeholder-color);
}

/* 포커스 시 테두리 오렌지색 */
.search_input:focus,
.searchfor input.text:focus,
input.search_text:focus,
input[type="search"]:focus,
.header_search input:focus {
	border-color: var(--search-focus-border) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.2);
}

/* 검색 버튼 */
.search_btn,
.btn_search,
.search_button {
	background-color: var(--bg-button-active);
	color: #ffffff;
	border: none;
	transition: background-color 0.2s ease;
}

.search_btn:hover,
.btn_search:hover,
.search_button:hover {
	background-color: var(--brand-orange);
}


/*========================================
  5. 우측 위젯 및 FAB (Widget & FAB)
  ----------------------------------------
  적용 위치: 우측 사이드바 실시간 베스트, 하단 플로팅 글쓰기 버튼

  변수 설명:
  --rank-number-bg   : 실시간 베스트 순위 숫자 배경색 (오렌지)
  --fab-write-bg     : 플로팅 글쓰기 버튼 배경색 (빨간색)
  --fab-write-hover  : 플로팅 버튼 호버 시 배경색
========================================*/
/* 실시간 베스트 순위 숫자 */
.rank_number,
.best_rank,
.ranking_num,
.realtime_best .num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background-color: var(--rank-number-bg);
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
	border-radius: 3px;
	margin-right: 8px;
}

/* 순위 1, 2, 3위 강조 */
.rank_number.top3,
.best_rank.top3,
.ranking_num:nth-child(-n+3) {
	background-color: var(--brand-red);
}

/* 플로팅 글쓰기 버튼 (FAB) */
.fab_write,
.floating_write_btn,
.btn_write_floating {
	position: fixed;
	bottom: 80px;
	right: 20px;
	width: 56px;
	height: 56px;
	background-color: var(--fab-write-bg);
	color: #ffffff;
	border: none;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	transition: all 0.2s ease;
	z-index: 9999;
}

.fab_write:hover,
.floating_write_btn:hover,
.btn_write_floating:hover {
	background-color: var(--fab-write-hover);
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* 위젯 박스 */
.widget_box,
.side_widget {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-secondary);
	border-radius: 8px;
}

.widget_box .widget_title,
.side_widget .widget_title {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	padding: 12px 15px;
	font-weight: 600;
	border-bottom: 1px solid var(--border-secondary);
}


/*========================================
  6. 게시판 상단 탭 (Board Tabs)
  ----------------------------------------
  적용 위치: 게시판 목록 상단 '최신순/조회순/추천순/댓글순' 버튼

  변수 설명:
  --tab-inactive-bg   : 비활성 탭 배경색 (회색)
  --tab-inactive-text : 비활성 탭 글자색
  --tab-active-bg     : 활성 탭 배경색 (오렌지)
  --tab-active-text   : 활성 탭 글자색 (흰색)
========================================*/
/* 정렬 탭 그룹 */
.sort_tabs,
.order_tabs,
.list_sort_area {
	display: flex;
	gap: 4px;
	margin-bottom: 10px;
}

/* 정렬 탭 버튼 - 비활성 상태 */
.sort_tab,
.order_tab,
.sort_btn {
	display: inline-block;
	padding: 6px 12px;
	background-color: var(--tab-inactive-bg);
	color: var(--tab-inactive-text);
	border: 1px solid var(--border-secondary);
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sort_tab:hover,
.order_tab:hover,
.sort_btn:hover {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}

/* 정렬 탭 버튼 - 활성 상태 */
.sort_tab.active,
.sort_tab.on,
.order_tab.active,
.order_tab.on,
.sort_btn.active,
.sort_btn.on {
	background-color: var(--tab-active-bg) !important;
	color: var(--tab-active-text) !important;
	border-color: var(--tab-active-bg) !important;
	font-weight: 600;
}

/* 우측 사이드바 탭 (실시간/이번주 베스트) - 텍스트 스타일 유지 */
#btnbbs1_to_btnbbs2 .bbshot_btns,
#btnbbs3_to_btnbbs5 .bbshot_btns_2 {
	display: inline;
	padding: 0;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0;
	font-size: inherit;
}

#btnbbs1_to_btnbbs2 .bbshot_btns:hover,
#btnbbs3_to_btnbbs5 .bbshot_btns_2:hover {
	background-color: transparent !important;
}

#btnbbs1_to_btnbbs2 .bbshot_btns.selected,
#btnbbs3_to_btnbbs5 .bbshot_btns_2.selected {
	background-color: transparent !important;
	border: none !important;
}

/* 정렬 탭 (.sort_icon_group) - community.css에서 정의됨 */


/*========================================
  7. 사이드바 (Sidebar)
  ----------------------------------------
  적용 위치: 좌측 메뉴 사이드바

  변수 설명:
  --sidebar-active-bg   : 현재 선택된 메뉴 배경색 (오렌지)
  --sidebar-active-text : 현재 선택된 메뉴 글자색 (흰색 or 어두운색)
========================================*/
/* 사이드바 메뉴 아이템 */
/* .mLnb 스타일은 lnb_list.php에서 정의됨 */
.lnb li a,
.sidebar_menu a {
	display: block;
	padding: 12px 15px;
	color: var(--text-primary);
	border-bottom: 1px solid var(--border-secondary);
	transition: all 0.2s ease;
}

.lnb li a:hover,
.sidebar_menu a:hover {
	background-color: var(--bg-hover);
	color: var(--text-link);
}

/* 현재 선택된 메뉴 - .mLnb는 lnb_list.php에서 정의 */
.lnb li a.on,
.lnb li a.active,
.lnb li.selected a,
.sidebar_menu a.on,
.sidebar_menu a.active {
	background-color: var(--sidebar-active-bg) !important;
	color: var(--sidebar-active-text) !important;
	font-weight: 600;
	border-left: 3px solid var(--brand-orange);
}

/* 서브메뉴 */
.lnb li ul a,
.sidebar_submenu a {
	padding-left: 30px;
	font-size: 13px;
	background-color: var(--bg-tertiary);
}

.lnb li ul a:hover,
.sidebar_submenu a:hover {
	background-color: var(--bg-hover);
}

.lnb li ul a.on,
.lnb li ul a.active,
.sidebar_submenu a.on {
	background-color: var(--sidebar-active-bg) !important;
	color: var(--sidebar-active-text) !important;
}