@charset "utf-8";

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

/* 디자인 토큰 브릿지 — 값의 SSOT 는 tokens.css(#nt_body 스코프). 여기서 하드코딩 금지.
   cf. free-community/list.css 동일 패턴(표준 토큰 별칭 + 로컬 전용 값).
   스코프 주의: tokens.css 와 같은 #nt_body 스코프 필수 — :root 에 두면
   var() 별칭이 선언 지점에서 치환돼 전부 무효가 된다(전역 누수 방지 정책). */
#nt_body {
	/* 표준 토큰 별칭 */
	--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;
	}
}

/* ============================================
   1.5. Community Banner — event/list.css 1.5 미러 (수정 시 양쪽 동기화)
   다크모드: 그라디언트+흰 글자라 모드 무관 — 13. 다크모드 블록에 배너 규칙 없음(event 동일).
   ============================================ */
/* 바깥 여백은 DESIGN_SYSTEM §9.1 규정(margin: 0 0 16px) — 위 여백은 테마 py-3/py-sm-4 위임 */
.fb-banner {
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	margin-top: 0;
	margin-bottom: 16px;
}
.fb-banner-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 32px;
	/* 의도된 다색 그라디언트 — §7.4 예외(fc 동일 자구), 토큰화하지 않는다 */
	background: linear-gradient(135deg, #3182f6 0%, #1b64da 60%, #0f4baf 100%);
	border-radius: var(--fb-radius);
	overflow: hidden;
	min-height: 135px; /* 상단 배너 규정 — DESIGN_SYSTEM §9 */
}
.fb-banner-deco {
	position: absolute;
	border-radius: 50%;
	opacity: 0.1;
	background: #fff;
}
.fb-banner-deco--1 {
	width: 180px;
	height: 180px;
	top: -60px;
	right: 60px;
}
.fb-banner-deco--2 {
	width: 100px;
	height: 100px;
	bottom: -30px;
	right: -10px;
}
.fb-banner-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fb-banner-badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 3px 10px;
	background: rgba(255,255,255,0.2);
	border-radius: var(--r-pill);
	font-size: 10.5px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1.5px;
	backdrop-filter: blur(4px);
	line-height: 1.5; /* 상속 차단 — 페이지 문맥따라 1.5/1.6 갈려 배너 높이가 달라짐 */
}
.fb-banner-title {
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	margin: 0;
	letter-spacing: -0.5px;
	line-height: 1.35;
}
.fb-banner-desc {
	font-size: 12.5px;
	font-weight: 400;
	color: rgba(255,255,255,0.75);
	margin: 0;
	letter-spacing: -0.2px;
	line-height: 1.5;
}
.fb-banner-icon-area {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-width: 52px;
	background: rgba(255,255,255,0.15);
	border-radius: 14px; /* 기하학적 반경(52px 박스 전용) — 토큰화하지 않는다(§4), fc 동일 */
	color: #fff;
	font-size: 24px;
	backdrop-filter: blur(4px);
}
/* 배너 모바일 — event 1.5 와 동일하게 배너 블록에 인라인 유지(575px 브레이크포인트는 11. Responsive 와 동일) */
@media (max-width: 575px) {
	.fb-banner-inner { padding: 22px 20px; min-height: 85px; }
	.fb-banner-title { font-size: 15px; }
	.fb-banner-icon-area { width: 44px; height: 44px; min-width: 44px; font-size: 20px; }
}

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

/* 검색창 — 토토(sbc-cl__search) 필드 룩 통일: 회색 채움 + 투명 테두리(포커스 시 브랜드 틴트)
   + 우측 겹침 돋보기. 색은 보드 브랜드(--brand/--field-focus-ring)를 따른다.
   (free-community 와 동일 구조 — select 는 코어 sfl 이 아니라 자체 bq 파라미터를 쓴다) */
.fb-search-box {
	margin: 20px 0 0; /* 카드 상단 여백 표준 20px — 검색창 열림 시에도 동일 (§9.2) */
}

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

/* 좌측 검색필드 select — 토토 필드와 동일 톤 */
.fb-search-select {
	appearance: none;
	-webkit-appearance: none;
	height: 38px;
	background: var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%238A9099'/%3E%3C/svg%3E") no-repeat right 10px center;
	border: 1px solid transparent;
	border-radius: var(--r-6);
	padding: 0 28px 0 14px;
	font-size: 12.5px;
	color: var(--body);
	min-width: 96px;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.fb-search-select:focus {
	outline: none;
	border-color: var(--field-focus-ring);
}

/* 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;
}

/* ── 돌발 탭 — 흰 배경 + 레드 아웃라인 칩 ──
   분류(sca)가 아닌 상태필터(bf=flash)임을 시각적으로 구분 (사용자 지정 스타일).
   색은 기존 --be-red/--be-red-soft 재사용, --be-red-bright 정의처는 style.css #nt_body 토큰 블록.
   ※ '인기' 뱃지와 레드 계열 공유(사용자 명시 지정) / 목록 카드 돌발 뱃지(.be-badge-flash)는 앰버 유지.
   공통 칩 규칙과 특이도 동률이라 반드시 이 위치(공통 규칙 뒤) 유지 —
   공통 규칙의 border:none(longhand 포함)도 소스 순서로 이긴다 */
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash > a {
	background: #fff !important;
	border: 1px solid var(--be-red) !important;
	color: var(--be-red) !important;
}
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash > a:hover {
	background: var(--be-red-soft) !important;
}
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash.active > a {
	background: var(--be-red) !important;
	border-color: var(--be-red) !important;
	color: #fff !important;
	font-weight: 600 !important;
	box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25) !important;
}
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash > a .fa-bolt {
	margin-right: 4px;
}
#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash.active > a .fa-bolt {
	color: var(--be-red-bright); /* 레드 솔리드 배경 — 밝은 레드로 반전 */
}
/* 비활성 상태의 볼트만 은은한 펄스 (active 시 정적) — 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: no-preference) {
	#bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash:not(.active) > a .fa-bolt {
		animation: be-bolt-pulse 2.4s ease-in-out infinite;
	}
}
@keyframes be-bolt-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

/* 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; }
/* 분류탭이 위 줄을 단독 사용할 때(분류 사용 보드) 카운트 줄의 상단 여백 축소 —
   탭 base 규칙(§3)의 하단 4px + 6px = 10px 간격. 분류 미사용이면 기존 20px 유지 */
#bo_list_wrap.fb-wrap #bo_cate + .fb-toolbar { padding-top: 6px; }

/* 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 의 #nt_body 블록에 있고 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;
}

/* 보관함 필터 버튼 — totolist(.sbc-cl__bm-btn) 미러, 툴바 한 줄 규격 34px */
.fb-bm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 10px;
	border-radius: var(--r-8);
	border: 1px solid var(--line-2);
	background: var(--card);
	color: var(--sub);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
	text-decoration: none;
}
.fb-bm-btn:hover { border-color: var(--fb-bd-hover); background: var(--fb-hover-lift); color: var(--brand); text-decoration: none; }
.fb-bm-btn.is-on { border-color: var(--brand); color: var(--brand); }
.fb-bm-ico { flex-shrink: 0; color: var(--brand); } /* 아이콘 = 항상 브랜드컬러 (totolist 관례 — hover 색 오염 방지) */

/* 분류안내 버튼 — 분류탭(#bo_cate) 줄 우측 끝 고정, 보관함(.fb-bm-btn)과 동일 알약 규격. #vdim-becat 모달 트리거 */
.fb-guide-slot { flex-shrink: 0; align-self: center; }
.fb-guide-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 34px;
	padding: 0 10px;
	margin-left: 8px;
	border-radius: var(--r-8);
	border: 1px solid var(--line-2);
	background: var(--card);
	color: var(--sub);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.fb-guide-btn:hover { border-color: var(--fb-bd-hover); background: var(--fb-hover-lift); color: var(--brand); }
.fb-guide-btn svg { flex-shrink: 0; color: var(--brand); } /* 아이콘 = 항상 브랜드컬러 (보관함과 동일 관례) */
html.dark-mode .fb-guide-btn { background: #1e1f23; border-color: #2c2d32; color: #9ca3af; }
html.dark-mode .fb-guide-btn:hover { background: #26272b; border-color: #3f4046; color: #60a5fa; }
html.dark-mode .fb-guide-btn svg { color: #60a5fa; }

/* 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;
	background: var(--fb-primary);
	color: #fff;
	border: none;
	border-radius: var(--r-8);
	height: 34px;
	padding: 0 16px;
	font-size: 14px;
	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: 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-bm-btn {
		height: 32px;
		padding: 0 9px;
		font-size: 12px;
	}

	/* 분류안내 — 모바일은 아이콘만 (totolist .sbc-cl__guide-label 숨김 관례) */
	.fb-guide-btn {
		height: 32px;
		width: 32px;
		padding: 0;
		margin-left: 6px;
	}
	.fb-guide-txt { display: none; }

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

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

	/* select 1개 + input 이라 한 줄에 들어간다 — .fb-search-row 의 gap:8px 이 간격을 준다 (free-community 동일) */
	.fb-search-select {
		flex: 0 0 auto;
		min-width: 0;
	}

	/* 페이징 모바일 축소 오버라이드 제거 — 전 게시판 20px 통일 (2026-07-22) */
}

/* ============================================
   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;
}
/* 돌발 탭 — 다크: 투명 배경 + 밝은 레드(#F87171) 아웃라인 (다크 블록 하드코딩 관례).
   라이트의 흰 배경은 다크에서 이질적이라 배경만 투명으로 두고 테두리·텍스트로 구분.
   active 는 밝은 레드 솔리드 + 잉크 텍스트
   (일반 탭의 다크 active = 밝은 배경 + 어두운 글자 반전 관례와 평행 구조) */
html.dark-mode #bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash > a {
	background: transparent !important;
	border-color: #F87171 !important;
	color: #F87171 !important;
}
html.dark-mode #bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash > a:hover {
	background: rgba(248, 113, 113, 0.12) !important;
}
html.dark-mode #bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash.active > a {
	background: #F87171 !important;
	border-color: #F87171 !important;
	color: #1e1f23 !important;
}
html.dark-mode #bo_list_wrap.fb-wrap #bo_cate #bo_cate_ul > li.be-tab-flash.active > a .fa-bolt {
	color: var(--be-red); /* 밝은 레드 배경 — 진한 레드로 반전 */
}

/* 툴바 컨트롤 */
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-bm-btn { background: #1e1f23; border-color: #2c2d32; color: #9ca3af; }
html.dark-mode .fb-bm-btn:hover { background: #26272b; border-color: #3f4046; color: #60a5fa; }
html.dark-mode .fb-bm-btn.is-on { border-color: #60a5fa; color: #60a5fa; }
html.dark-mode .fb-bm-ico { 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; }

/* 보관함 빈 상태 — 토토 .sbc-cl__scrap-empty 와 같은 규격(아이콘 56px·타이포·색).
   5개 보드(토토/카지노/기타/업체이벤트/재능마켓) 공통 문구·크기·색상. */
.be-scrap-empty { text-align:center; padding:80px 20px; }
.be-scrap-empty-icon { line-height:1; margin-bottom:18px; color:var(--line-strong); } /* 은은한 회색 — 문구가 주인공 */
.be-scrap-empty-title { font-size:1.05rem; font-weight:600; color:var(--ink); margin:0 0 8px 0; }
.be-scrap-empty-desc { font-size:14px; font-weight:500; color:var(--muted-2); margin:0; }
.be-scrap-empty-desc svg { margin:0 2px; } /* 색 지정 없음 — 설명 글자색(currentColor) 상속 */
html.dark-mode .be-scrap-empty-title { color:#e5e7eb; }
html.dark-mode .be-scrap-empty-desc { color:#64748B; }