@charset "utf-8";

/* ============================================
   bizevent — 목록 골격 (free-community 골격 계승)
   카드(.be-*) 본체는 style.css, 여기는 fb-* 골격만.
   ============================================ */

/* 디자인 토큰 브릿지 — 값의 SSOT 는 tokens.css(:root). 여기서 하드코딩 금지.
   cf. free-community/list.css 동일 패턴(표준 토큰 별칭 + 로컬 전용 값). */
:root {
	/* 표준 토큰 별칭 */
	--fb-card:          var(--card);
	--fb-text:          var(--ink);
	--fb-text-sec:      var(--body);
	--fb-muted:         var(--muted);
	--fb-line:          var(--line);
	--fb-primary:       var(--brand);
	--fb-primary-hover: var(--brand-hover);
	--fb-primary-light: var(--brand-soft);
	--fb-radius:        var(--r-16);
	--fb-radius-sm:     var(--r-10);
	/* 로컬 전용 — 표준에 대응물 없음 */
	--fb-hover:         #f2f4f6;  /* 칩·뱃지 채움 (--fb-hover-lift 와 다른 값) */
	/* --fb-hover-lift / --fb-bd-hover 는 style.css 에 정의 — style.css 는 목록·상세·쓰기 전부에서
	   로드되지만 list.css 는 목록에서만 로드되므로, 양쪽이 쓰는 토큰은 style.css 가 정의처. */
}

/* 상단 서브메뉴(.na-top-sidemenu): 나리야 네이티브 위젯 + 공통 레이어(theme/Nariya-A/css/custom-main.css)의 flat 탭 디자인 사용. 보드별 덮어쓰기 제거(나리야 공통기능과 충돌 방지). */

/* ============================================
   1. Wrapper — 통합 카드 하단
   ============================================ */
#bo_list_wrap.fb-wrap {
	background: var(--fb-card);
	border: none;
	border-radius: 0 0 var(--fb-radius) var(--fb-radius);
	padding: 0;
	box-shadow: none;
}

/* PC: 상단 서브메뉴 네비가 숨겨지므로 리스트 컨테이너에 외곽 구분선(테두리) 추가 */
@media (min-width: 769px) {
	#bo_list_wrap.fb-wrap {
		border: 1px solid var(--fb-line);
		border-radius: var(--fb-radius);
		overflow: hidden;
	}
}

/* ============================================
   2. Search Box
   ============================================ */
#bo_list_wrap.fb-wrap #bo_search {
	padding: 0 20px;
}

/* 검색창 — 토토(sbc-cl__search) 필드 룩 통일: 회색 채움 + 투명 테두리(포커스 시 브랜드 틴트)
   + 우측 겹침 돋보기. 색은 보드 브랜드(--brand/--field-focus-ring)를 따른다.
   (free-community 와 동일 — 단 bizevent 는 검색필드 고정이라 .fb-search-select 없음) */
.fb-search-box {
	margin: 12px 0 0;
}

.fb-search-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* input 래퍼 — 겹침 돋보기용 relative 컨테이너 */
.fb-search-input-group {
	position: relative;
	flex: 1;
	min-width: 0;
}

/* 텍스트 input — 회색 채움 + 투명 테두리, 포커스/입력 시 브랜드 틴트 */
.fb-search-input {
	width: 100%;
	height: 38px;
	line-height: 38px;
	background: var(--field-bg);
	border: 1px solid transparent;
	border-radius: var(--r-6);
	padding: 0 40px 0 16px;
	font-size: 12.5px;
	color: var(--body);
	outline: none;
	transition: border-color 0.2s ease;
}

.fb-search-input:focus,
.fb-search-input:not(:placeholder-shown) {
	border-color: var(--field-focus-ring);
}

.fb-search-input::placeholder {
	color: var(--muted);
	font-weight: 400;
}

/* 제출 버튼 → input 우측 안쪽 겹침 아이콘. 평소 회색 → 포커스/입력/hover 시 브랜드 */
.fb-search-submit {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	background: none;
	border: 0;
	padding: 0;
	color: var(--muted);
	line-height: 0;
	cursor: pointer;
	transition: color 0.15s;
}

.fb-search-submit:hover,
.fb-search-input:focus ~ .fb-search-submit,
.fb-search-input:not(:placeholder-shown) ~ .fb-search-submit {
	color: var(--brand);
}

/* ============================================
   3. Category Chips (premium)
   ============================================ */

/* nav 컨테이너 리셋 */
#bo_list_wrap.fb-wrap #bo_cate {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-top: 16px !important;
	padding-bottom: 4px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	border: none !important;
	background: transparent !important;
	overflow: visible !important;
}

/* nariya sly-tab 기본 보더 전부 제거 */
#bo_list_wrap.fb-wrap #bo_cate.sly-tab {
	border: none !important;
}

#bo_list_wrap.fb-wrap #bo_cate .d-flex {
	border: none !important;
	border-left: none !important;
}

#bo_list_wrap.fb-wrap #bo_cate hr {
	display: none !important;
}

/* Bootstrap 패딩 래퍼 리셋 */
#bo_list_wrap.fb-wrap #bo_cate .px-3,
#bo_list_wrap.fb-wrap #bo_cate .px-sm-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Sly UL → 한 줄 flex */
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
	align-items: center !important;
	border: none !important;
	border-left: none !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
	/* 항상 "현재" 자연폭 — 넘칠 때만 넘치게.
	   나리야 na_sly_size()(nariya/js/nariya.js:390)가 로드 시점 폭을 min-width:<px> 로 인라인 고정하는데,
	   이 값은 갱신되지 않는다. 그래서 폰트가 바뀌면(미디어쿼리 13→12px, 웹폰트 지연 로드) ul 이 실제
	   내용보다 넓게 박제돼 "넘치지도 않았는데 좌우 화살표가 뜨는" 원인이 된다.
	   스타일시트의 !important 는 인라인 스타일을 이기므로 여기서 무력화한다. */
	min-width: max-content !important;
}

/* LI 리셋 */
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li {
	list-style: none !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	border: none !important;
}

/* ── Chip 공통 규격 ──
   nariya border + Bootstrap py-2/px-3 완전 오버라이드 */
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li > a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 34px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	margin: 0 !important;
	border: none !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: none !important;
	border-radius: var(--r-8) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 34px !important;
	letter-spacing: -0.01em !important;
	color: var(--fb-text-sec) !important;
	background: var(--fb-hover) !important;
	text-decoration: none !important;
	text-align: center !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* Hover */
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li > a:hover {
	background: var(--fb-line) !important;
	color: var(--fb-text) !important;
	text-decoration: none !important;
}

/* Active chip */
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.active > a {
	background: var(--fb-text) !important;
	color: #fff !important;
	font-weight: 600 !important;
	box-shadow: 0 1px 3px rgba(25, 31, 40, 0.18) !important;
}

/* Sly prev/next 버튼 — 기본 숨김, overflow 시 표시 */
#bo_list_wrap.fb-wrap #bo_cate .sly-btn {
	display: none !important;
}
#bo_list_wrap.fb-wrap #bo_cate.sly-overflow .sly-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 34px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: var(--r-8) !important;
	background: transparent !important;
	color: var(--fb-muted) !important;
	font-size: 15px !important;
	cursor: pointer !important;
}
#bo_list_wrap.fb-wrap #bo_cate.sly-overflow .sly-btn:hover {
	background: var(--fb-hover) !important;
	color: var(--fb-text-sec) !important;
}

/* ============================================
   4. Toolbar
   ============================================ */
.fb-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 20px 10px; /* 카드와의 간격은 툴바 하단 패딩 단독 담당 (전체 N개 카운트 아래 10px) */
}

.fb-toolbar-left,
.fb-toolbar-right {
	display: flex;
	align-items: center;
	gap: 6px;
}
/* 분류탭이 들어가는 좌측: 남는 폭을 차지하고 넘치면 Sly 스크롤 */
.fb-toolbar-left { flex: 1 1 auto; min-width: 0; }
.fb-toolbar-right { flex: 0 0 auto; }
/* 총 게시글 수 — totolist 결과줄 카운트(.sbc-cl__count)와 동일 룩 */
.fb-total-count {
	white-space: nowrap;
	font-size: 16px;
	font-weight: 600;
	color: var(--sub);
	font-family: var(--font-num);
	position: relative; top: 6px; /* 옵티컬 보정: 우측 컨트롤과 눈높이 맞춤 — totolist(2px)보다 4px 더 내림 */
}
.fb-total-count b { font-weight: 700; color: var(--ink); }
/* 관리자 전용 "/ 전체 N개" — totolist .sbc-cl__count-sub 동일 룩 (보조 정보라 작고 연하게) */
.fb-total-count .fb-total-sub { font-size: 13px; font-weight: 500; color: var(--muted-2); }
html.dark-mode .fb-total-count .fb-total-sub { color: #9ca3af; }
/* 다크모드는 별도 팔레트 토큰 도입 전까지 하드코딩 유지 (DESIGN_SYSTEM.md §1 다크모드 현황) */
html.dark-mode .fb-total-count { color: #94A3B8; }
html.dark-mode .fb-total-count b { color: #E2E8F0; }
/* 툴바에 통합된 분류탭(#bo_cate) 여백 제거 → 한 줄 정렬 */
#bo_list_wrap.fb-wrap .fb-toolbar #bo_cate {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

/* Sort Button — 설정·검색과 나란히 서므로 .fb-icon-btn 규격을 그대로 쓴다(아래 정의).
   여기선 활성 항목 표시만 추가. 현재 정렬은 라벨이 없어 title 툴팁 + 아래 활성 표시로만 드러난다. */
.fb-sort-dropdown {
	border: 1px solid var(--fb-line);
	border-radius: var(--fb-radius-sm);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	padding: 4px 0;
	min-width: 120px;
}

a.fb-sort-item {
	display: block;
	padding: 8px 16px;
	font-size: 13px;
	color: var(--fb-text-sec);
	text-decoration: none;
	transition: background 0.1s;
}

a.fb-sort-item:hover {
	background: var(--fb-primary-light);
	color: var(--fb-primary);
	text-decoration: none;
}

/* 현재 적용된 정렬 — 아이콘 버튼엔 라벨이 없으므로 여기서 상태를 드러낸다.
   체크 표시는 padding 안쪽에 절대배치 → 항목 텍스트 위치가 활성/비활성 간에 흔들리지 않는다. */
a.fb-sort-item-active {
	position: relative;
	color: var(--brand);
	font-weight: 700;
}
a.fb-sort-item-active::after {
	content: "\f00c"; /* fa-check (FontAwesome 4) */
	font-family: FontAwesome;
	position: absolute;
	right: 10px;
	font-size: 10px;
	font-weight: 400;
}
a.fb-sort-item-active { padding-right: 28px; }

/* Icon Buttons — free-community/list.css 현행 규격과 자구 일치.
   --fb-hover-lift / --fb-bd-hover 는 style.css:root 에 있고 style.css 는 리스트에도
   로드되므로(list.skin.php) 여기서 참조 가능하다. */
.fb-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-8);
	border: 1px solid var(--line-2);
	background: var(--card);
	color: var(--sub);
	font-size: 14px;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
	text-decoration: none;
	padding: 0;
}

.fb-icon-btn:hover {
	border-color: var(--fb-bd-hover);
	background: var(--fb-hover-lift);
	color: var(--brand);
	text-decoration: none;
}

/* Admin Dropdown */
.fb-admin-dropdown {
	border: 1px solid var(--fb-line);
	border-radius: var(--fb-radius-sm);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	padding: 4px 0;
	min-width: 140px;
}

.fb-admin-dropdown .dropdown-item {
	font-size: 13px;
	padding: 8px 16px;
	color: var(--fb-text-sec);
}

.fb-admin-dropdown .dropdown-item:hover {
	background: var(--fb-primary-light);
	color: var(--fb-primary);
}

/* Write Button — 높이는 툴바 한 줄 규격 34px(분류탭·아이콘 버튼과 동일) */
.fb-write-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: var(--fb-primary);
	color: #fff;
	border: none;
	border-radius: var(--r-8);
	height: 34px;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
	text-decoration: none;
	white-space: nowrap;
}

.fb-write-btn:hover {
	background: var(--fb-primary-hover);
	color: #fff;
	text-decoration: none;
}

/* ============================================
   8. Pagination
   ============================================ */
.fb-pagination {
	padding: 16px 20px 20px;
}

.fb-pagination .pagination {
	gap: 4px;
}

.fb-pagination .page-item .page-link {
	border: 1px solid var(--fb-line);
	border-radius: var(--r-8);
	color: var(--fb-text-sec);
	font-size: 13px;
	padding: 7px 12px 5px; /* 상하 비대칭은 의도 — Oxanium 글리프 보정 */
	transition: all 0.15s;
	background: var(--fb-card);
}

.fb-pagination .page-item .page-link:hover {
	background: var(--fb-primary-light);
	border-color: var(--fb-primary);
	color: var(--fb-primary);
}

.fb-pagination .page-item .page-link:focus { box-shadow: none; } /* BS4 기본 .2rem 포커스 링 — 클릭 순간 띠 잔상 제거 */
.fb-pagination .page-item .page-link:focus-visible { box-shadow: 0 0 0 2px var(--fb-primary-light); } /* 키보드 포커스만 유지 */

.fb-pagination .page-item.active .page-link {
	background: var(--fb-primary);
	border-color: var(--fb-primary);
	color: #fff;
}

/* ============================================
   10. Override defaults within scope
   ============================================ */
#bo_list_wrap.fb-wrap #fboardlist {
	padding-bottom: 0;
}

/* ============================================
   11. Responsive
   ============================================ */
@media (max-width: 575px) {

	#bo_list_wrap.fb-wrap {
		border-radius: 0 0 var(--fb-radius-sm) var(--fb-radius-sm);
	}

	#bo_list_wrap.fb-wrap #bo_search {
		padding: 0 14px;
	}

	#bo_list_wrap.fb-wrap #bo_cate {
		padding-top: 12px !important;
		padding-bottom: 2px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul {
		gap: 6px !important;
	}

	#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li > a {
		height: 32px !important;
		line-height: 32px !important;
		padding-left: 13px !important;
		padding-right: 13px !important;
		font-size: 12px !important;
		border-radius: var(--r-8) !important;
	}

	.fb-toolbar {
		padding: 14px 14px 10px; /* 모바일 — 하단은 PC 와 동일 10px */
		flex-wrap: wrap;
		gap: 8px;
	}

	/* 툴바 컨트롤 높이 통일 — 분류탭 a 가 34px → 32px 로 줄어드는 데 맞춰
	   아이콘 버튼·글쓰기도 32px 로 내린다. (PC 는 34px) */
	.fb-icon-btn {
		width: 32px;
		height: 32px;
		font-size: 13px;
	}

	.fb-write-btn {
		height: 32px;
		padding: 0 12px;
		font-size: 12px;
	}

	.fb-search-box {
		padding: 0;
	}

	.fb-pagination {
		padding: 14px 14px 16px;
	}
}

/* ============================================
   12. 숫자류 폰트 (Oxanium) — 한글(상대시간 등)은 Paperozi 폴백
   ============================================ */
.fb-pagination .page-item .page-link {
	font-family: 'Oxanium', 'Paperozi', sans-serif;
}

/* ============================================
   13. 다크모드 — 목록 골격(fb-*)
   zinc 팔레트 리터럴 (style.css .bev-shell 다크와 동일 계열:
   #1e1f23 / #2c2d32 / #26272b / #f3f4f6 / #d1d5db / #9ca3af / #60a5fa)
   별도 팔레트 토큰 도입 전까지 하드코딩 유지 (DESIGN_SYSTEM.md §1 다크모드 현황).
   .fb-total-count 다크는 4. Toolbar 에 있음 (totolist 결과줄 카운트와 동일 룩).
   ============================================ */
html.dark-mode #bo_list_wrap.fb-wrap { background: #1e1f23; border-color: #2c2d32; }

/* 검색 — 박스형 → 플레인(free-community)으로 바뀌어 input 필드에만 다크를 건다 */
html.dark-mode .fb-search-input { background: #26272b; border-color: transparent; color: #f3f4f6; }
html.dark-mode .fb-search-input:focus,
html.dark-mode .fb-search-input:not(:placeholder-shown) { border-color: var(--field-focus-ring); }
html.dark-mode .fb-search-input::placeholder { color: #9ca3af; }

/* 분류 칩 — 라이트 규칙이 !important 라 다크도 !important 필요 */
html.dark-mode #bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li > a {
	background: #26272b !important;
	color: #d1d5db !important;
}
html.dark-mode #bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li > a:hover {
	background: #2c2d32 !important;
	color: #f3f4f6 !important;
}
html.dark-mode #bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.active > a {
	background: #f3f4f6 !important;
	color: #1e1f23 !important;
}

/* 툴바 컨트롤 */
html.dark-mode .fb-icon-btn { background: #1e1f23; border-color: #2c2d32; color: #9ca3af; }
html.dark-mode .fb-icon-btn:hover { background: #26272b; border-color: #3f4046; color: #60a5fa; }
html.dark-mode .fb-sort-dropdown,
html.dark-mode .fb-admin-dropdown { background: #26272b; border-color: #2c2d32; }
html.dark-mode a.fb-sort-item,
html.dark-mode .fb-admin-dropdown .dropdown-item { color: #d1d5db; }
html.dark-mode a.fb-sort-item:hover,
html.dark-mode .fb-admin-dropdown .dropdown-item:hover { background: #1e1f23; color: #60a5fa; }
html.dark-mode a.fb-sort-item-active { color: #60a5fa; }
html.dark-mode .fb-sort-dropdown .dropdown-divider { border-color: #2c2d32; }

/* 페이지네이션 — 스킨 CSS 가 테마 다크 규칙을 이겨버리므로 스킨에서 필수 */
html.dark-mode .fb-pagination .page-item .page-link { background: #1e1f23; border-color: #2c2d32; color: #d1d5db; }
html.dark-mode .fb-pagination .page-item .page-link:hover { background: #26272b; border-color: #60a5fa; color: #60a5fa; }
html.dark-mode .fb-pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }