@charset "utf-8";

/* ============================================
   Free Board — Community Style
   ============================================ */

/* 디자인 토큰 브릿지 — 값의 SSOT 는 tokens.css(#nt_body 스코프). 여기서 하드코딩 금지.
   cf. totolist/view-detail.css 의 .vd-shell 패턴(표준 토큰 별칭 + 로컬 전용 값).
   스코프 주의: tokens.css 가 #nt_body 스코프라(전역 누수 방지), var() 를 참조하는
   이 별칭 블록도 반드시 같은 스코프여야 한다. :root 에 두면 별칭이 선언
   지점(:root)에서 치환돼 전부 무효가 된다. */
#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-notice-bg:       #faf9f6;  /* 공지 행 베이지 — 일반 행과 구별하는 유일한 신호 */
	--fb-notice-bg-hover: #f5f4ef;
	/* --fb-bg 삭제: 참조 0회 */
	/* --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(--r-10,10px) var(--r-10,10px);
	padding: 0;
	box-shadow: none;
}

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

/* ============================================
   1.5. Community Banner
   ============================================ */
/* 바깥 여백 margin: 0 0 16px — 위 여백은 테마 py-3/py-sm-4 위임 (DESIGN_SYSTEM §9.1).
   문구는 list.skin.php 상단 $_banner 가 소유한다 (마크업 하드코딩 금지).
   ⚠ 클래스명은 보드 공통 규약(.board-list-banner__*)이지만 값은 이 스킨 전용 —
      다른 보드와 자동 공유되지 않는다. */
.board-list-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 32px;
	background: linear-gradient(135deg, #3182f6 0%, #1b64da 60%, #0f4baf 100%);
	border-radius: var(--r-10,10px);
	overflow: hidden;
	min-height: 150px; /* 상단 배너 규정 — DESIGN_SYSTEM §9 */
	margin: 0 0 16px;
	border: none;
}
.board-list-banner__deco {
	position: absolute;
	border-radius: 50%;
	opacity: 0.1;
	background: #fff;
}
.board-list-banner__deco--1 {
	width: 180px;
	height: 180px;
	top: -60px;
	right: 60px;
}
.board-list-banner__deco--2 {
	width: 100px;
	height: 100px;
	bottom: -30px;
	right: -10px;
}
.board-list-banner__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.board-list-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 갈려 배너 높이가 달라짐 */
}
.board-list-banner__title {
	/* 제목 30px [2026-08-31] — 업체 3보드(toto·casino·etc)의 배경시안 배너와 같은 스케일.
	   clamp 인 이유: 창이 좁아질 때 글자만 남아 제목이 2줄로 감기면 150px 박스를 넘는다.
	   lh 1.3·자간 em 도 그 세트다 — 자간을 px 로 되돌리면 축소 시 글자가 뭉친다. */
	font-size: clamp(20px, 3.4vw, 30px);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1.3;
	color: #fff;
	margin: 0;
}
.board-list-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;
}
.board-list-banner__icon {
	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;
	color: #fff;
	font-size: 24px;
	backdrop-filter: blur(4px);
}
@media (max-width: 575px) {
	.board-list-banner { padding: 22px 20px; min-height: 85px; }
	.board-list-banner__title { font-size: clamp(14px, 4.6vw, 17px); letter-spacing: -.6px; line-height: 1.3; }
	.board-list-banner__icon { 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)를 따른다. */
.fb-search-box {
	/* 카드 상단 여백 — 닫힘 상태의 첫 요소(#bo_cate)와 같은 14px 로 맞춘다.
	   열고 닫을 때 상단 간격이 달라지지 않도록 두 값을 함께 본다(모바일은 아래 ≤575px 블록에서 0). */
	margin: 14px 0 0;
}

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

/* 좌측 검색필드 select — 토토 필드와 동일 톤 */
/* font-size 14px — 검색 입력창의 안내문(::placeholder)과 같은 값. 검색줄이 한 크기로 읽힌다.
   ⚠ 입력창의 16px 과 근거가 다르다 — 입력창은 타이핑을 받으므로 iOS 자동확대(포커스된 입력의
     글자가 16px 미만이면 페이지 확대)를 피해 16px 이 고정이다. 셀렉트는 타이핑을 받지 않고
     탭하면 네이티브 피커가 열려 확대 대상이 아니다(2026-08-17 실기기 확인).
     같은 판단의 정본 주석: theme/Nariya-A/skin/review/style.css 의 .rv-select.
   PC 는 이 규칙 뒤의 min-width+pointer 블록이 규격값(12.5px)으로 되돌린다. */
.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: 14px;
	color: var(--body);
	min-width: 96px;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

@media (min-width: 769px) and (pointer: fine) {
	.fb-search-select { font-size: 12.5px; }
}

.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: 16px;
	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 {
	font-size: 14px;
	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: 14px !important; /* 카드 상단 여백 — 토토 목록 .sbc-cl__panel 과 동일(2026-08-17) */
	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-6) !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;
}

/* ============================================
   4. Toolbar
   ============================================ */
.fb-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 20px 10px; /* 하단은 목록 헤더(.fb-list-head)가 10px 을 더 가지므로 bizevent 결과줄과 동일한 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; }
/* 게시글 수 — bizevent/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; /* 옵티컬 보정: 우측 컨트롤과 눈높이 맞춤 (bizevent 동일) */
}
.fb-total-count b { font-weight: 700; color: var(--ink); }
/* 다크모드는 별도 팔레트 토큰 도입 전까지 하드코딩 유지 (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 툴팁 + 아래 활성 표시로만 드러난다. */
/* 정렬 드롭다운 — 패널/항목/hover/선택상태는 전역 정본이 담당한다:
   theme/Nariya-A/css/custom-sidebar.css 「드롭다운 [정본]」 (DESIGN_SYSTEM.md §14).
   여기 다시 적으면 (0,1,0) 이라 전역 (0,2,0) 에 눌려 죽는다 — 화면별 값만 남긴다. */
.fb-sort-dropdown {
	min-width: 120px;
}

/* Icon Buttons — 상세 상단바 아이콘 버튼(.bo-v-actions > .btn, style.css:756)에서 파생.
   경계·표면·색 단계·hover 는 그대로 맞추되, 박스와 글리프는 툴바 한 줄 규격을 따른다
   (상세 상단바는 단독으로 서므로 박스 36px·글리프 16px 유지 — 의도된 차이다).
   --fb-hover-lift / --fb-bd-hover 는 style.css 의 #nt_body 블록에 있고 style.css 는 리스트에도
   로드되므로(list.skin.php:18) 여기서 참조 가능하다. */
.fb-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-6);
	border: 1px solid var(--line-2);
	background: var(--card);
	color: var(--sub);
	/* 글리프 14px — DESIGN_SYSTEM.md §2 는 "상단바 액션 아이콘 16px" 이지만 그건 박스 36px 기준이다.
	   목록 툴바는 박스가 34px 이라 16px 은 과했다. 글쓰기 글자(14px)와 같은 크기.
	   분류탭만 13px 로 한 단계 낮다 — 탭은 여러 개가 늘어서므로 톤을 낮춘 의도된 차이다.
	   상세 상단바(박스 36px)는 16px 유지. */
	font-size: 14px;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
	text-decoration: none;
	padding: 0;
}

/* :focus/:active — 코어 g5.css:19 crimson 잔흔 차단(위 .fb-write-btn 주석 참조). :hover 앞이라 강조색은 유지된다. */
.fb-icon-btn:focus,
.fb-icon-btn:active {
	color: var(--sub);
	text-decoration: none;
}

.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;
	background: var(--fb-primary);
	color: #fff;
	border: none;
	border-radius: var(--r-6);
	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;
}

/* nariya/css/g5.css:19 의 전역 `a:hover,a:focus,a:active{color:crimson}` 대응.
   :hover 만 덮으면 클릭 직후 포커스가 남아 있는 동안 글자에 크림슨이 비친다(빨간 잔흔).
   배경은 그대로 두고 글자색만 고정한다 — 포커스가 hover 배경까지 붙들면 그것대로 잔흔이 된다. */
.fb-write-btn:focus,
.fb-write-btn:active {
	color: #fff;
	text-decoration: none;
}

/* ============================================
   5. Notice 표시 (공지 행 배경은 11. .fb-row-notice)
   ============================================ */
/* 공지 핀 아이콘 — 커뮤니티·베팅지식은 번호 칸에 이 아이콘을 넣는다(2026-08-18, 구 「공지」 텍스트 배지 대체).
   글자 대신 아이콘이므로 마크업에 .sr-only 「공지」 를 함께 둔다 — 스크린리더·크롤러가 읽을 텍스트가 남아야 한다.
   크기는 같은 칸의 번호(14px)와 맞춘다. */
.fb-notice-pin {
	color: var(--fb-primary);
	font-size: 14px;
	line-height: 1;
}
/* 구 텍스트 배지 — 이벤트 보드(sbc_event)가 아직 쓴다. 이 파일은 3보드 공유이므로 지우지 말 것. */
.fb-notice-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--fb-text);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	border-radius: var(--r-6);
	letter-spacing: 0.2px;
}

/* ============================================
   6. Post List
   ============================================ */
.fb-post-list {
	margin: 0;
	padding: 0 20px;
}

/* ===== 전통 테이블형 리스트 (번호·제목·글쓴이·날짜·조회) ===== */
/* 좌우 0 — 좌측 시작선은 바깥 .fb-post-list 의 padding 이 단독으로 만든다(업체 3보드 정렬, 2026-08-17).
   업체보드는 `.sbc-cl__panel` 하나가 20px 을 갖고 카드는 안쪽에서 더 들이지 않는다.
   여기서 12px 을 더하면 같은 폭의 화면인데 글자만 12px 더 안쪽에서 시작한다. */
.fb-list-head {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--fb-line);
	border-bottom: 1px solid var(--fb-line);
	/* 행제목 14px 통일(2026-08-18) — 날짜·조회 칸이 자기 클래스에 갖는 font-size 와 같은 값이라
	   헤더 전용 크기 규칙이 필요 없다. 이 값을 바꾸면 그 두 칸만 자기 값에 남아 어긋나므로,
	   .fb-col-date/.fb-col-hit 과 항상 같이 움직여야 한다. */
	font-size: 14px; color: var(--body); font-weight: 600;
}
/* 헤더 라벨(행제목)·데이터 값 모두 전 컬럼 좌측 정렬 (2026-08-18 확정) — 중앙으로 되살리지 말 것.
   제목·글쓴이는 flex 컨테이너의 기본값 flex-start, 날짜·조회는 아래 .fb-col-date/.fb-col-hit 의
   text-align:left 가 헤더·데이터에 함께 걸린다. 그래서 헤더 전용 정렬 규칙은 하나도 필요 없다. */
.fb-row {
	display: flex; align-items: center; gap: 12px;
	/* 행 전체 클릭 오버레이(.fb-subject-link::after)의 기준 컨테이너 */
	position: relative;
	padding: 6px 0; border-bottom: 1px solid var(--fb-line); /* 좌우 0 — 위 .fb-list-head 주석 참조 */
	transition: background 0.15s;
}
/* 마지막 행도 아래 선을 갖는다 (2026-08-17) — 목록이 끝나는 지점을 긋는다.
   업체 3보드의 .sbc-cl__card:last-child { border-bottom } 과 같은 규약.
   구 `:last-child { border-bottom: none }` 은 목록 끝이 열려 보여 제거 — 되살리지 말 것.
   아래는 .fb-pagination(padding 20px)이라 카드 테두리와 겹치지 않는다. */
.fb-row:hover { background: var(--fb-hover-lift); }
.fb-row.fb-card-active { background: var(--brand-soft); }
/* 번호 칸 — PC 노출(2026-08-18 복원). 모바일은 카드형이라 아래 ≤575px 블록이 숨긴다.
   폭 56px = 조회 칸과 같은 값(둘 다 4자리까지 들어가는 숫자 칸이라 규격을 맞춘다).
   공지 행에는 번호 대신 핀 아이콘이 들어간다 — 칸을 비우면 그 행만 제목이 56px
   왼쪽으로 밀려 세로선이 깨지므로 스킨이 항상 이 칸을 출력한다. */
/* ⚠ 이 칸만 가운데 정렬이다(다른 칸은 전부 좌측). 이유: 56px 고정폭인데 라벨 「번호」·숫자를
   좌측에 붙이면 남는 여백이 오른쪽에 몰려, 공지 행의 핀 아이콘을 칸 중앙에 두었을 때
   라벨의 오른쪽 끝에 붙어 보였다(2026-08-18). 라벨·숫자·핀이 같은 축을 쓰도록 셋 다 가운데로 맞춘다.
   좌측으로 되돌릴 거면 아래 .fb-row-notice 규칙도 flex-start 로 같이 바꿔야 축이 유지된다. */
.fb-col-num     { flex: 0 0 56px; text-align: center; font-size: 14px; }
/* 공지 행은 숫자 대신 아이콘 하나가 들어가므로 flex 로 가로·세로 중앙에 놓는다(위 축과 동일). */
.fb-row-notice .fb-col-num { display: flex; align-items: center; justify-content: center; }
.fb-col-subject { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; }
/* 닉네임 값은 좌측 정렬(기본 flex-start) — 2026-08-18 확정. 중앙 정렬로 바꾸지 말 것:
   레벨 배지 + 닉 조합이라 중앙에 두면 행마다 배지 위치가 들쭉날쭉해진다.
   헤더 라벨 「글쓴이」도 같은 좌측 정렬이라 위 .fb-list-head 규칙에서 뺐다(세로선 일치). */
.fb-col-author  { flex: 0 0 150px; min-width: 0; display: flex; align-items: center; gap: 0; line-height: 1; }
/* 색은 .fb-row 스코프로 — 헤더 줄(.fb-list-head)도 같은 .fb-col-* 클래스를 쓰므로
   여기서 색을 주면 헤더 라벨만 데이터 톤으로 물들어 라벨 4개가 서로 어긋난다. */
.fb-col-date    { flex: 0 0 92px; text-align: left; font-size: 14px; white-space: nowrap; }
.fb-col-hit     { flex: 0 0 56px; text-align: left; font-size: 14px; }
/* 번호·날짜·조회는 보조정보 티어(--sub) — 상세 상단바·댓글 날짜와 같은 단계로 맞춘다.
   셋을 한 규칙에 묶어둔다: 같은 Oxanium 숫자라 톤이 갈리면 바로 눈에 띈다. */
.fb-row .fb-col-num,
.fb-row .fb-col-date,
.fb-row .fb-col-hit { color: var(--sub); }
/* 관리자 선택박스 칸 — 폭을 고정해야 헤더와 데이터 행의 세로선이 맞는다(2026-08-18).
   auto 로 두면 헤더의 빈 자리 span 은 0px, 데이터 행은 체크박스 폭이 되어 관리자에게만
   번호 이하 전 칸이 오른쪽으로 밀렸다. 값·구조는 muktui/list.css 의 검증된 규칙과 동일하게 맞춘다.
   짝이 되는 헤더 자리 span 은 list.skin.php 의 .fb-list-head 첫 줄 — 둘은 항상 같이 있어야 한다. */
.fb-col-chk     { flex: 0 0 24px; display: flex; align-items: center; justify-content: center; }
.fb-subject-link {
	flex: 0 1 auto; min-width: 0;
	color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 링크 상태 3종을 한 규칙으로 못박는다 — 행 전체가 링크(아래 stretched-link)라
   상태가 새면 행 어디에 올려도·누른 뒤에도 제목에 흔적이 남는다(2026-08-21).
   · 밑줄: 위 기본 규칙의 text-decoration:none 은 hover 에서 코어 부트스트랩4 reboot
     (nariya/app/bs4/css/bootstrap.min.css 의 a:hover{color:#0056b3;text-decoration:underline}, 특이도 0,1,1)
     에 진다. 세 상태 모두에서 다시 끈다.
   · 색 잔흔: 누른 뒤 남는 :focus/:active 를 평상시 색(--ink)으로 되돌린다.
     (전역 a:focus/:active 를 크림슨으로 칠하는 코어 g5.css:19 는 이 스킨을 관리자 등 다른 컨텍스트에서
      로드할 때 함께 오므로, 그 경우까지 여기서 막는다 — 코어는 손대지 않는다.) */
.fb-subject-link:hover,
.fb-subject-link:focus,
.fb-subject-link:active { color: var(--ink); text-decoration: none; }
/* 색 강조는 마우스가 있는 기기에서만 — 터치기기는 탭 후 :hover 가 고착해 그 색이 잔흔으로 남는다
   (업체 3보드가 ≤575px 에서 .sbc-cl__card:hover 를 무력화한 것과 같은 이유). */
@media (hover: hover) {
	.fb-subject-link:hover,
	/* 행 어디에 올려도 이동한다는 신호 — 제목 hover 색을 행 hover 에도 건다(배경 lift 와 한 쌍) */
	.fb-row:hover .fb-subject-link { color: var(--fb-primary); }
}
/* 행 전체 클릭 — 제목 링크에 행을 덮는 투명 오버레이를 씌운다(stretched-link).
   업체 3보드의 .sbc-cl__name a::after 와 같은 규약이라 마크업·JS 변경이 없고,
   스킨설정의 새 창 여부($target)·비밀글 링크도 기존 <a> 를 넓히는 방식이라 그대로 보존된다.
   기준 컨테이너는 위 .fb-row 의 position:relative — 제목이 overflow:hidden 이어도
   오버레이의 컨테이닝 블록이 상위 .fb-row 라 잘리지 않는다. */
.fb-subject-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
/* 오버레이 위로 올려 제 기능을 유지하는 요소 — 관리자 선택박스, 글쓴이 사이드뷰(<a class="sv_member">).
   글쓴이는 칸(.fb-col-author) 전체가 아니라 .sv_wrap 만 올린다: 닉네임 폭 밖의 빈 자리는 행 이동으로 남긴다. */
.fb-row .fb-col-chk,
.fb-row .fb-col-author .sv_wrap { position: relative; z-index: 2; }
/* z-index 를 받은 .sv_wrap 이 쌓임맥락이 되어 사이드뷰 팝업(코어 g5.css:164 z-index:1000)이 그 안에 갇힌다.
   팝업이 열린 행만 통째로 올려, 뒤 행의 닉네임이 팝업 위에 겹쳐 그려지는 것을 막는다. */
.fb-row:has(.sv_on) { z-index: 3; }
/* 제목 앞 상태 아이콘(NEW·HOT·비밀글·답글) 과 제목 사이 간격(2026-08-18).
   아이콘이 <a> 안에 있어 .fb-col-subject 의 gap 이 닿지 않고, 코어 nariya.css:240 이
   .na-icon{margin:0} 이라 글자에 딱 붙어 있었다. 코어 전역값은 그대로 두고 이 목록에서만 띄운다. */
.fb-subject-link .na-icon,
.fb-subject-link .na-hicon { margin-right: 5px; }
/* top: 제목 글리프에 맞추는 보정 (baseline 정렬 불가 — 제목이 overflow:hidden) */
.fb-cmt-cnt  { flex-shrink: 0; color: var(--fb-primary); font-weight: 700; font-size: 13px; line-height: 1; position: relative; top: 1px; }
.fb-img-icon { flex-shrink: 0; color: var(--muted-2); font-size: 0.9em; line-height: 1; position: relative; top: 1px; }
.fb-row-notice .fb-col-subject .fb-subject-link { font-weight: 600; }
/* 공지 행: 은은하게 구분되는 배경 (너무 튀지 않게) */
.fb-row-notice { background: var(--fb-notice-bg); }
.fb-row-notice:hover { background: var(--fb-notice-bg-hover); }
/* 글쓴이 칸 — 아바타 컴팩트 + 닉 말줄임. 14px / 500 / --body.
   색은 2026-08-18 --ink → --body 로 한 단계 내렸다(제목이 최강조, 글쓴이는 본문 톤).
   자유게시판 계열 3보드(free-community·betting-tips·muktui) 동일 값 — 한 곳만 바꾸지 말 것.
   (muktui/list.css 는 별도 파일이라 자동 동기화 안 됨 — 수동 반영 필수)
   토토 후기(.ts-review-author)는 --ink 유지 — 규격이 갈린 지점이니 같이 맞추지 말 것.
   weight 를 명시하는 이유: 코어 nariya/css/g5.css:163 의 .sv_wrap{font-weight:normal} 이
   그대로 먹어 지정하지 않으면 400 이 되고, 댓글·상세 닉네임(500)보다 얇아진다.
   색을 명시하는 이유: <a class="sv_member"> 는 부모 color 를 상속하지 않아,
   미지정 시 코어 nariya/css/g5.css:18 의 a{color:#000} 이 새어든다. */
.fb-col-author .sv_wrap { font-size: 14px; font-weight: 500; max-width: 100%; white-space: nowrap; display: flex; align-items: center; line-height: 1; }
.fb-col-author .sv_member { display: inline-flex; align-items: center; gap: 6px; line-height: 1; font-weight: 500; color: var(--body); }
/* 닉네임도 제목과 같은 처방 — 밑줄(부트스트랩 reboot)·누른 뒤 색 잔흔을 세 상태에서 끈다.
   사이드뷰를 여는 링크라 마우스 기기에서만 한 톤 진하게(--ink) 눌림을 알린다. */
.fb-col-author .sv_member:hover,
.fb-col-author .sv_member:focus,
.fb-col-author .sv_member:active { color: var(--body); text-decoration: none; }
@media (hover: hover) {
	.fb-col-author .sv_member:hover { color: var(--ink); }
}
.fb-col-author .lv-badge-wrap { width: 28px !important; flex-shrink: 0; }
/* 메타 그룹 (작성자·날짜·조회·추천) */
.fb-meta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.fb-col-hit .fb-meta-ic { display: none; } /* PC: 헤더로 구분되므로 아이콘 숨김 (.fa 특이도 상회) */
@media (max-width: 575px) {
	/* 카드형: 헤더 숨김, 번호 숨김 — 단 공지 행은 예외다. 「공지」 배지가 번호 칸에 들어 있어
	   통째로 숨기면 모바일에서 공지 표시가 사라진다(2026-08-18). 공지 행만 남기고,
	   폭 고정(56px)은 PC 세로선 맞추기용이라 모바일에선 내용폭으로 줄여 제목에 붙인다. */
	.fb-list-head { display: none; }
	.fb-row:not(.fb-row-notice) .fb-col-num { display: none; }
	.fb-row-notice .fb-col-num { flex: 0 0 auto; }
	/* 행을 2줄로 줄바꿈 */
	.fb-row { flex-wrap: wrap; gap: 4px 8px; align-items: center; }
	/* 1줄: 제목(+댓글수) */
	.fb-col-subject { flex: 1 1 auto; }
	/* 2줄: 닉네임 날짜 조회 추천 (메타 그룹을 통째로 다음 줄로) */
	.fb-meta {
		flex: 1 1 100%;
		justify-content: flex-start;
		gap: 12px;
		margin-top: 2px;
		font-size: 12px;
		color: var(--ink);
	}
	/* 배지+닉네임을 한 덩어리로 이동(칸 전체 transform) — 이 한 줄만 조절하면 둘이 같이 위/아래로 움직인다.
	   추가로 닉네임(.sv_wrap)은 배지 정렬용 line-height:1 때문에 배지보다 ~1.5px 낮게 앉으므로,
	   그 내부 오차만 한 번 보정해 배지와 기준선을 맞춘다(칸 이동과 별개, 항상 배지에 붙어 따라감). */
	.fb-meta .fb-col-author { flex: 0 1 auto; max-width: 45%; transform: translateY(-0.5px); }
	.fb-meta .fb-col-author .sv_wrap { transform: translateY(-1.5px); }
	/* 모바일만 닉네임을 한 단계 더 흐리게 — PC 는 --body 유지(2026-08-18).
	   모바일은 닉네임이 제목 아래 메타 줄로 내려가 날짜·조회와 한 줄을 이루므로,
	   그 줄 안에서 같은 보조정보 티어(--sub)로 읽히는 편이 제목과의 위계가 분명하다.
	   <a class="sv_member"> 는 부모 color 를 상속하지 않아 여기서도 직접 지정해야 한다. */
	.fb-meta .fb-col-author .sv_member { color: var(--sub); }
	/* 배지 내부 보정: 전역 -13%(lv-badge.css:132)는 배지가 아래로 치우쳐 → 모바일만 더 올림. 이 % 만 조절 */
	.fb-meta .fb-col-author .xp-icon img { transform: translateY(-20%) !important; }
	.fb-meta .fb-col-date,
	/* 닉네임 칸(-0.5px)보다 날짜·조회가 ~1px 낮게 앉아 메타 줄 기준선이 어긋난다 — 둘만 1px 올린다 */
	.fb-meta .fb-col-hit { flex: 0 0 auto; font-size: 13px; transform: translateY(-1px); }
	/* 좁은 화면: 조회·추천을 아이콘 형태로 */
	.fb-col-hit .fb-meta-ic { display: inline-block; margin-right: 3px; opacity: 0.75; }
}

/* ============================================
   7. Empty State
   ============================================ */
.fb-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--fb-muted);
}

.fb-empty .fa {
	font-size: 2rem;
	margin-bottom: 10px;
	display: block;
	opacity: 0.4;
}

.fb-empty p {
	font-size: 14px;
	margin: 0;
}

/* ============================================
   8. Pagination
   ============================================ */
.fb-pagination {
	padding: 20px; /* 페이징 상하 20px — 전 게시판 통일 */
}

/* 모바일 페이징 좌우 여백 0 — 버튼 9개(처음·이전·번호5·다음·마지막)를 한 줄에 담기 위한 폭 확보.
   래퍼가 좌우 20px 을 먹으면 가용 296px 뿐이라 한 줄에 필요한 315px 이 안 들어가 화살표가
   다음 줄로 접혔다(실측 2026-08-17, 360px). 출석체크(.at-pagination)·업체 3보드(.sbc-cl__paging)는
   원래 좌우 0 이라 같은 폭에서 한 줄로 나온다 — 그 조건에 맞추는 것이다.
   ⚠ 상하 여백은 건드리지 않는다(전 게시판 통일값, DESIGN_SYSTEM §9.2).
   ⚠ 버튼 크기로 폭을 벌지 말 것 — `13px / 7px 12px 5px` 은 전 화면 공유 규격이다.
   ⚠ 이 블록은 반드시 위 기본 선언 **뒤**에 있어야 한다 — 특이도가 같아 순서로 이긴다. */
@media (max-width: 575px) {
	.fb-pagination {
		padding-left: 0;
		padding-right: 0;
	}
}


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

.fb-pagination .page-item .page-link {
	border: 1px solid var(--fb-line);
	border-radius: var(--r-6);
	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) {

	/* 흰 면을 #nt_body 좌우 거터(12px) 밖으로 빼내 화면 끝까지 채운다(업체 3보드와 동일 처리).
	   같은 값을 padding 으로 되돌리므로 **안쪽 내용 위치는 전혀 변하지 않는다** —
	   그래서 아래 검색창·분류탭·툴바는 손대지 않아도 종전대로 화면 기준 14px 을 유지한다.
	   거터 값은 custom-sidebar.css 의 --page-gutter 소유. 여기에 숫자를 복사해 두지 말 것.
	   라운드는 0 — 화면 끝에 닿는 면에 둥근 모서리가 남으면 어색하다. */
	/* 흰 면은 래퍼가 아니라 「목록」이 갖는다 — 업체 3보드와 같은 구조(§9.2).
	   검색·분류탭·툴바·페이징은 면 밖(페이지 배경 위)으로 나온다.
	   ⚠ 구 「음수마진 + 같은 값 padding」 쌍은 흰 면을 화면 끝까지 넓히려던 장치였다.
	      면이 목록으로 옮겨갔으므로 함께 제거 — 목록의 full-bleed 는 아래 .fb-post-list 가 직접 한다. */
	#bo_list_wrap.fb-wrap {
		background: transparent;
	}

	/* ── 모바일 좌측 시작선 = 화면 기준 14px (업체 3보드와 동일) ──────────────
	   위 .fb-wrap 이 거터를 되돌려 주므로, 여기 값들은 그 안쪽 기준 2px 이고
	   화면 기준으로는 12 + 2 = 14px 이다.
	   ⚠ 검색·분류탭·툴바·목록이 반드시 같은 선이어야 한다 — 하나만 고치면 좌측이 계단이 된다. */
	#bo_list_wrap.fb-wrap #bo_search {
		padding: 0 2px;
	}

	/* 상단 0 — 검색창을 열어도 카드 위 여백이 네비바 16px 그대로여야 한다(닫힘 상태와 동일).
	   하단 12px — 아래 #bo_cate 의 상단 패딩이 0 이라, 이게 없으면 검색창과 분류탭이 붙는다.
	   .fb-search-box 는 collapse 안이라 닫힌 상태에선 두 값 모두 공간을 차지하지 않는다. */
	.fb-search-box {
		margin-top: 0;
		margin-bottom: 12px;
	}

	#bo_list_wrap.fb-wrap #bo_cate {
		/* 상단 0 — 토토 목록(.sbc-cl__panel ≤575px)과 동일. 카드 위 여백은 .na-top-sidemenu 의
		   margin-bottom 16px 단독이 된다. 구 12px 은 그 위에 더해져 28px 이 됐다(2026-08-17) */
		padding-top: 0 !important;
		padding-bottom: 2px !important;
		padding-left: 2px !important;
		padding-right: 2px !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-6) !important;
	}

	.fb-toolbar {
		padding: 14px 2px;
		flex-wrap: wrap;
		gap: 8px;
	}

	/* 좁은 화면에서도 분류탭과 컨트롤(정렬·검색·설정·글쓰기)을 한 줄에 유지한다(먹튀게시판과 동일).
	   우측 묶음은 내용물 폭만 차지(flex:0 0 auto)하고, 분류탭이 남는 폭에서 Sly 가로 스크롤.
	   flex:1 0 100% 로 두면 우측 묶음이 전체폭을 먹어 분류탭 아래로 줄바꿈됐었다. */
	.fb-toolbar-right {
		flex: 0 0 auto;
	}

	.fb-toolbar-right .fb-sort-group {
		margin-right: 0;
	}

	/* 목록도 래퍼 패딩 밖으로 한 번 더 빼낸다 — 행의 배경(공지 베이지·hover 틴트)과
	   구분선이 화면 끝까지 가야 한다. 인셋은 컨테이너가 아니라 아래 .fb-row 가 갖는다.
	   ⚠ 여기에 좌우 padding 을 주면 행 박스가 좁아져 배경이 글자에 딱 붙어 잘려 보인다. */
	/* 목록이 흰 면을 갖고 화면 좌우 끝까지 간다. 위 경계선은 여기서 긋는다 —
	   PC 는 .fb-list-head 가 그 역할이지만 모바일에선 숨겨져(위 display:none) 시작선이 사라진다.
	   (업체 3보드는 결과줄 .sbc-cl__meta 의 border-bottom 이 같은 역할을 한다)
	   아래 경계선은 .fb-row 의 border-bottom 이 마지막 행까지 그어 닫는다. */
	.fb-post-list {
		margin-left: calc(-1 * var(--page-gutter,12px));
		margin-right: calc(-1 * var(--page-gutter,12px));
		padding: 0;
		background: var(--fb-card);
		border-top: 1px solid var(--fb-line);
	}

	.fb-row {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* 예외 — sbc_event 카드 그리드(.sbe-grid)는 카드가 gap 으로 떨어져 각자 배경을 가지므로
	   full-bleed 대상이 아니다. 자체 좌우 패딩도 없어 컨테이너가 인셋을 유지해야 한다. */
	.fb-post-list.sbe-list {
		margin-left: 0;
		margin-right: 0;
		padding: 0 2px;
		background: transparent;
		border-top: 0;
	}

	/* 툴바 컨트롤 높이 통일 — 분류탭 a 가 34px → 32px 로 줄어드는 데 맞춰
	   정렬·설정·검색·글쓰기도 32px 로 내린다. (PC 는 셋 다 34px) */
	.fb-icon-btn {
		width: 32px;
		height: 32px;
		font-size: 13px; /* 글쓰기 글자(13px)와 동일 — PC 14px 의 모바일 대응. 분류탭은 12px */
	}

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

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

	/* sop select 를 없애기 전엔 select 2개가 첫 줄 / input 이 둘째 줄이라 wrap + margin-top 이 필요했다.
	   이제 sfl select 1개 + input 이라 한 줄에 들어간다 — .fb-search-row 의 gap:8px 이 간격을 준다. */
	.fb-search-select {
		flex: 0 0 auto;
		min-width: 0;
	}

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

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