/* an_css_concat pcpg — 2026-10-23T08:51:07+09:00 — 원본: /css/inl/comm_pc.css, /css/inl/board_view.css */

/* ── /css/inl/comm_pc.css ── */
/* 페이지 안 <style> 조각을 옮겨 모은 파일 — PC 커뮤니티 화면(include/inl_page_css.php). 순서 = 화면에 나오던 순서 (2026-10-23) */
/* ── inc/lnb_community.php (옛 87줄) ── */
/* ── 커뮤니티 좌측 LNB (플로팅 모듈 — 흰 면+라운드+그림자, 다크는 면 밝기) ── */
.cm-mod { background: var(--light-bg-primary, #fff); border-radius: 12px; box-shadow: 0 1px 3px rgba(20,10,5,.08), 0 4px 14px rgba(20,10,5,.06); box-sizing: border-box; }
body.dark .cm-mod { background: var(--dark-bg-secondary, #232323); box-shadow: none; }

/* ── LNB 를 쓰는 화면 공통(.cm-float) : 컨테이너 투명 + 본문 = 라운드 흰 모듈 ──
   컨테이너 흰 면(css/layout.css)을 화면 단위로 되돌려 페이지 바탕(쿨 그레이)이 모듈 사이로 비치게.
   display:flex 는 tab_right.php(하단) 파싱 전 첫 페인트에서 LNB 가 위로 쌓이는 FOUC 방지용 선적용 */
.container_community.cm-float { background: transparent; display: flex; position: relative; min-height: 100%; }
body.dark .container_community.cm-float { background: transparent; }
.container_community.cm-float #bbs_container.gCenter,
.container_community.cm-float .gCenter.bbs {
	background: var(--light-bg-primary, #fff);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(20,10,5,.08), 0 4px 14px rgba(20,10,5,.06);
	padding: 14px 16px;
	box-sizing: border-box;
}
body.dark .container_community.cm-float #bbs_container.gCenter,
body.dark .container_community.cm-float .gCenter.bbs {
	background: var(--dark-bg-secondary, #232323);
	box-shadow: none;
}
/* tab_right(.gRight)는 옛 목록 기준 margin-top:33px + 우측 경계선 — LNB 화면에선 모듈 윗선을 LNB·본문과 맞춘다.
   id 포함 선택자라 tab_right(하단 파싱) 규칙보다 특이성으로 이긴다 */
.container_community.cm-float #gRight { margin-top: 0; border-right: none; }

/* align-self:stretch — LNB 모듈 아래끝을 컨테이너(가장 긴 컬럼, 보통 본문)와 맞춘다.
   메뉴가 본문보다 길면 원래 높이 그대로(2026-08-12, "write 에서 아랫단 어긋남" 지적) */
.cm-lnb { flex: 0 0 190px; margin-right: 14px; align-self: stretch; padding: 10px 0; }
/* 글쓰기 버튼 폐지(2026-08-12) — 각 목록 화면의 글쓰기 버튼과 중복 + GNB 붉은 요소와 위계 겹침 */
.cm-lnb .cm-grp:first-child { border-top: none; margin-top: 0; }   /* 버튼 없어지며 첫 그룹 위 구분선 제거 */
/* ── 네이버 카페 트리(5차 D안) ── 굵은 그룹 헤더(접기 ▼) + 말머리(-) 촘촘 트리 + 새 글 도트 */
.cm-lnb .cm-grp { display: flex; align-items: center; padding: 8px 14px 4px; font-size: 13px; font-weight: 800; color: var(--color-text-primary, #333); border-top: 1px solid var(--color-border-light, #F1F3F5); margin-top: 4px; cursor: pointer; user-select: none; }
.cm-lnb .cm-grp:first-of-type { border-top: none; margin-top: 0; }
.cm-lnb .cm-grp .cm-arr { margin-left: auto; font-size: 9px; color: var(--color-text-quaternary, #AAB1B9); transition: transform .15s; }
.cm-lnb .cm-grp.closed .cm-arr { transform: rotate(-90deg); }
.cm-lnb ul { margin: 0 0 3px; padding: 0; list-style: none; }
.cm-lnb ul.closed { display: none; }
/* 말머리 없음(8차→9차, 2026-08-12 확정) — '-' 트리(카페 관례)도 유형 아이콘(네이버 카페식)도
   "카페 느낌"이라 폐지. 대형 커뮤니티(대형 커뮤니티 계열) 문법 = 맨 텍스트 + 들여쓰기만 */
.cm-lnb li a { display: flex; align-items: center; gap: 5px; padding: 3.5px 14px 3.5px 21px; font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary, #4B5563); }
/* hover 밑줄은 이름 텍스트(.cm-txt)에만 — 앵커에 걸면 새 글 도트까지 밑줄이 번진다 */
.cm-lnb li a:hover { text-decoration: none; color: var(--color-hover); }
.cm-lnb li a:hover .cm-txt { text-decoration: underline; }
/* 선택(현재 게시판) = 소프트 코랄 면+딥 코랄 글씨 라운드 칩(2026-08-12 7차 농도 시안 B안 확정).
   진코랄 채움+흰 글씨는 GNB 붉은 바와 위계가 뭉개져 기각 — 면은 hover 계열(#F7E3E1)까지만 */
.cm-lnb li a.sel { background: var(--ui-active-hover-bg, #F7E3E1); color: var(--tint-coral-fg, #B02E29); font-weight: 700; border-radius: 7px; margin: 0 6px; padding-left: 15px; }
.cm-lnb li a.sel:hover { color: var(--color-hover); text-decoration: none; }
.cm-lnb li a.sel:hover .cm-txt { text-decoration: none; }
/* 새 글 도트 — 마크업의 'N' 텍스트는 font-size:0 으로 숨기고 도트만 렌더(강사모 문법) */
.cm-lnb li .cm-new { flex: none; width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--ui-active, #D84841); margin-left: 5px; font-size: 0; overflow: hidden; }
body.dark .cm-lnb .cm-grp { color: var(--dark-text-primary, #ECECEC); border-top-color: var(--dark-border-secondary, #3A3A3A); }
body.dark .cm-lnb li a { color: var(--dark-text-primary, #D9D9D9); }
body.dark .cm-lnb li a:hover { color: var(--color-hover); }
/* 다크 = 한 단계 진한 연노랑 면+밝은 노랑 글씨(라이트 B안의 다크 짝) */
body.dark .cm-lnb li a.sel { background: #4A3C1C; color: #FFAD3D; }
body.dark .cm-lnb li a.sel:hover { color: var(--color-hover); }
body.dark .cm-lnb li .cm-new { background: var(--dark-tab-hover-bg, #FF9F1C); }


/* ── community/tab_right.php (옛 4줄) ── */
/* ── [2026-08-11] 커뮤니티 우측 랭킹 = 플로팅 모듈 (페이지 바탕이 쿨 그레이로 바뀌며 투명 배경 보정)
   면 = --light-bg-primary(흰 모듈) · 다크는 그림자 대신 바탕(primary #141414)보다 밝은 면(secondary)으로 띄움 */
.gRight{background:var(--light-bg-primary,#fff);border-radius:12px;box-shadow:0 1px 3px rgba(20,10,5,.08),0 4px 14px rgba(20,10,5,.06);padding:6px 8px;box-sizing:border-box;overflow:hidden;}
/* 🔴 order:2 (2026-08-20) — tab_right 는 이제 각 페이지에서 컨테이너 '첫머리'에 include 된다(우측 영역이
   중앙 콘텐츠의 서버 생성(쿼리)·전송을 기다리느라 ~1초 늦게 나타나던 것 수리 — 사용자 실증상).
   DOM 은 앞이지만 flex order 로 시각 배치는 종전과 동일하게 맨 오른쪽. 컨테이너(.container_community.cm-float)
   직속 형제(LNB·중앙)는 기본 order 0. 옛 "fouc 로 하단 이동" 주석의 원인(배너 JS 삽입·스타일 지연)은
   서버 렌더 전환으로 해소돼 앞배치가 다시 안전하다. */
#gRight{order:2;}

/**********s:다크모드 css**********/
html.dark .gRight,
body.dark .gRight {
	background: var(--dark-bg-secondary, #232323);
	color: var(--dark-text-secondary);
	border-color: var(--dark-border-secondary);
	box-shadow: none;
}

html.dark .textOverflow,
body.dark .textOverflow{
	color: var(--dark-text-primary);
}

/* [2026-08-12] 선택 탭 = 파랑(--color-link-hover, 전역 링크색)이던 것 → 주계열로.
   라이트 = 코랄(--ui-active) · 다크 = 노랑(--dark-tab-hover-bg) — LNB·정렬칩 활성색과 통일 */
body #btnbbs1_to_btnbbs2 a.selected,
body #btnbbs3_to_btnbbs5 a.selected{
    color: var(--ui-active, #C93934) !important;
}

body #btnbbs1_to_btnbbs2 a.selected span,
body #btnbbs3_to_btnbbs5 a.selected span {
    color: var(--ui-active, #C93934);
}

/* 🔴 #gRight 포함 = 특이성 확보 — 아래쪽 `html.dark #gRight a … !important`(전체 링크 다크색)와
   동률이라 순서로 밀리던 것. id 2개로 확실히 이긴다 */
html.dark #gRight #btnbbs1_to_btnbbs2 a.selected,
html.dark #gRight #btnbbs3_to_btnbbs5 a.selected,
body.dark #gRight #btnbbs1_to_btnbbs2 a.selected,
body.dark #gRight #btnbbs3_to_btnbbs5 a.selected{
    color: var(--dark-tab-hover-bg, #FF9F1C) !important;
}

html.dark #gRight #btnbbs1_to_btnbbs2 a.selected span,
html.dark #gRight #btnbbs3_to_btnbbs5 a.selected span,
body.dark #gRight #btnbbs1_to_btnbbs2 a.selected span,
body.dark #gRight #btnbbs3_to_btnbbs5 a.selected span {
    color: var(--dark-tab-hover-bg, #FF9F1C) !important;
}

/*실시간 핫댓글(베플) css*/
html.dark .best_reply,
body.dark .best_reply {
    background: var(--dark-ranking-color) !important;
	color: var(--dark-text-primary) !important;
	font-weight: 500 !important;
}

/* hover 상태일 때 밑줄 추가 */
html.dark .bbs-title:hover,
body.dark .bbs-title:hover {
	text-decoration: underline;
}

/* Rank 버튼 1, 2, 3번 CSS 스타일 */
html.dark .bbs-rankCnt.special,
body.dark .bbs-rankCnt.special {
	background-color: var(--dark-ranking-color);
	color:var(--dark-bg-primary) !important;
	font-weight: 700 !important;
}

/* Rank 버튼 4부터 10까지 CSS 스타일 */
html.dark .bbs-rankCnt:not(.special),
body.dark .bbs-rankCnt:not(.special) {
	background-color: var(--dark-bg-button);
	color:var(--dark-text-primary) !important;
	border-color: var(--dark-border-secondary);
}
/**********e:다크모드 css**********/

/* ── community/tab_right.php (옛 89줄) ── */
/* Rank 버튼 공통 CSS 스타일(실시간 1위부터 10위 버튼 스타일) */
.bbs-rankCnt {
	/* 이 부분은 여전히 이전 스타일을 유지합니다. */
	width: 14.5px;
	height: 14.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	
	/*border-radius: 50%;*/
	
	margin:0 5px 0 6px;
}

/* Rank 버튼 1, 2, 3번 CSS 스타일 */
.bbs-rankCnt.special {
	font-weight: 500;
	color: #fdfdfd;
	background-color: var(--ui-active, #D84841);   /* [2026-08-12] 파랑(2차색) → 주계열 코랄. 다크는 기존 --dark-ranking-color(노랑) 그대로 */
}

/* Rank 버튼 4부터 10까지 CSS 스타일 */
.bbs-rankCnt:not(.special) {
	font-weight: 500;
	color: var(--color-text-secondary);
	border: 0.5px solid var(--color-text-light);
	background-color: #fdfdfd;
}

/* 랭킹 옆 제목 CSS */
.bbs-title {
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 20px);
	display: flex;
	align-items: center;
}

/* gRight 영역 내 모든 링크 */
#gRight a,
#gRight a:link,
#gRight a:visited {
	color: #2f2f2f !important;
}

/* gRight 영역 내 링크 hover */
#gRight a:hover {
	color: var(--color-hover) !important;
}

/* 다크모드 - gRight 영역 내 링크 */
html.dark #gRight a,
html.dark #gRight a:link,
html.dark #gRight a:visited,
body.dark #gRight a,
body.dark #gRight a:link,
body.dark #gRight a:visited {
	color: var(--dark-text-primary, #ECECEC) !important;
}

/* 다크모드 - gRight 영역 내 링크 hover */
html.dark #gRight a:hover,
body.dark #gRight a:hover {
	color: var(--color-hover) !important;
}

/* ── community/tab_right.php (옛 164줄) ── */
    body, html {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /* 3단 레이아웃(랭킹 포함 커뮤니티 페이지 공통). board_view 는 상단 early 스타일로 미리 확정(덜컹 방지),
       여기(하단)의 규칙은 list/write 등 나머지 랭킹 페이지용.
       🔴 flex-grow(flex:1)는 쓰지 않는다 — gRight 가 DOM 하단이라, grow 를 주면 gRight 파싱 전 본문이 꽉 찼다가
          줄어드는 '넓었다가 줄어듦' 플리커가 생긴다. 본문은 자기 폭(flex-basis)만 쓰고 필요 시 shrink 만. */
    .container_community {
        min-height: 100%;
        display: flex;
        position: relative;
        max-width: 100%;
    }
    .container_community .gCenter {
        min-width: 0;
    }

    .gRight {
		/*
        background-color: var(--color-bg-lighter);
		border-left:0.5px solid var(--color-border-light);
		*/
        border-right:1px solid var(--color-border-light);
        margin-top:33px;
        /* [2026-08-12] 200→216 — 배너 200×200 이 패딩(8×2) 안에서 원본 표시되도록 확장.
           [2026-09-15] 상단 배너 200×200 한 장(하단 배너 폐기, 사장님 「광고 판매 우선」) — 폭은 216 그대로(한때 250×250 로 266 이었다가 200 확정으로 되돌림).
           본문 폭 계산식(top_menu_community·board_view 의 224 = 216+margin 8)과 짝 — 바꾸면 같이 바꿀 것 */
        width: 216px;
        min-width: 216px;
        position: relative;
        /* z-index: 7000; */
        overflow-y: visible;
        margin-left: auto;   /* 🔴 [2026-09-03] 8px → auto. tab_right 는 DOM 첫머리라 라이브(본문 생성 ~1초)에선 본문 도착 전 flex 에 혼자 놓여 "왼쪽에 떴다가 오른쪽으로 이동"했다(사장님). auto 면 형제가 없어도 오른쪽 끝. 종전 8px 간격은 각 화면 본문의 margin-right 가 맡는다(community_main 14·board_view/top_menu 8) */
        flex-shrink: 0;
    }

/* ── community/tab_right.php (옛 206줄) ── */
.container_community .gCenter .ti3,
.gMain2 .gCenter .ti3 {
    color: #707070;
    float: right;
}

.container_community .gCenter .bg2,
.gMain2 .gCenter .bg2 {
    border-left: 1px solid var(--color-border-light);
    border-right: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

/* ── community/tab_right.php (옛 226줄) ── */
/* 접힘: 사이드바를 흐름에서 제거 → 본문(gCenter)이 남는 폭을 차지해 넓어짐 */
.gRight.rank-collapsed { display: none !important; }

/* 접힘 시 다시 여는 핸들(‹ 베스트) — '본문 옆'(오른쪽 가장자리)에 붙되, position:sticky 라 세로 스크롤을 따라온다.
   z-index 10000 = 본문(#bbs_container z-index:9999) 위 → 펼침 상태의 접기(→) 버튼도 클릭된다.
   접힘 시 본문 오른쪽에 버튼 자리(34px)를 비워둠(겹침 방지). */
#rankReopenHandle {
    display: none;
    position: sticky;
    top: 120px;                /* 세로 스크롤 시 뷰포트 120px 지점에 붙어 따라옴(툴바 아래) */
    align-self: flex-start;    /* flex 세로 stretch 방지 */
    flex: 0 0 auto;
    z-index: 10000;            /* 본문보다 위 → 클릭 가능 */
    margin-top: 110px;         /* 상단 컨트롤(목록/이전글/다음글, 정렬/글쓰기)을 피해 그 아래에 위치 */
    width: 30px; padding: 16px 0;
    background: var(--ui-action, #D84841); color: #fff;   /* [2026-08-12] 파랑(2차색) → 주계열 코랄 */
    border: none; border-radius: 9px 0 0 9px;
    cursor: pointer; box-shadow: -2px 2px 10px rgba(0,0,0,0.2);
    font-size: 12.5px; font-weight: 600;
    writing-mode: vertical-rl; letter-spacing: 2px; line-height: 1;
    align-items: center; justify-content: center; gap: 7px;
}
#rankReopenHandle.show { display: flex; }
#rankReopenHandle i { font-size: 14px; }
body.dark #rankReopenHandle { background: var(--dark-tab-hover-bg, #FF9F1C); color: var(--dark-bg-primary, #141414); }   /* [2026-08-12] 다크 = 노랑 면 + 어두운 글자(대비) */
/* 펼침(임시): 랭킹이 다시 보이므로 핸들은 랭킹 왼쪽 경계에 절대배치(JS 가 right 지정), 그래도 클릭되게 z-index 유지 */
.container_community.rank-open #rankReopenHandle { position: absolute; top: 120px; align-self: auto; }

/* 접기는 오른쪽 세로중앙 토글 핸들이 담당 → 사이드바 내부 닫기버튼은 미사용(숨김) */
#rankCloseBtn { display: none !important; }

/* ── community/tab_right.php (옛 388줄) ── */
    #gRight .rk3-head{ display:flex; align-items:center; justify-content:space-between; gap:4px; padding:0 2px; }
    #gRight .rk3-tabs{ display:flex; align-items:center; white-space:nowrap; }
    #gRight .rk3-tabs a{ font-size:13px; }
    #gRight .rk3-tabs .sep{ font-style:normal; margin:0 6px; color:#ccc; font-size:11px; }
    #gRight .rk3-dd{ position:relative; flex:none; }
    #gRight .rk3-ddb{ display:inline-flex; align-items:center; gap:3px; height:21px; margin:0; padding:0 6px 0 8px; border:1px solid #DDD; border-radius:11px; background:transparent; font-family:inherit; font-size:11.5px; font-weight:600; line-height:1; color:#555; cursor:pointer; white-space:nowrap; }
    #gRight .rk3-ddb:hover, #gRight .rk3-ddb[aria-expanded="true"]{ border-color:var(--color-hover); color:var(--color-hover); }
    #gRight .rk3-ddb i{ font-size:9px; color:#999; transition:transform .15s; }
    #gRight .rk3-ddb[aria-expanded="true"] i{ transform:rotate(180deg); color:var(--color-hover); }
    #gRight .rk3-ddb:focus-visible{ outline:2px solid var(--color-hover); outline-offset:1px; }
    #gRight .rk3-ddm{ position:absolute; right:0; top:25px; z-index:20; display:flex; flex-direction:column; min-width:104px; padding:4px 0; background:#fff; border:1px solid #E3E3E3; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.12); text-align:left; }
    #gRight .rk3-ddm[hidden]{ display:none; }
    #gRight .rk3-dd .rk3-ddm a{ display:flex; align-items:baseline; font-size:12px; line-height:1.4; padding:5px 12px; color:#444 !important; text-decoration:none; white-space:nowrap; }
    #gRight .rk3-dd .rk3-ddm a:hover, #gRight .rk3-dd .rk3-ddm a:focus-visible{ background:#F6F3F1; color:var(--color-hover) !important; outline:0; }
    #gRight .rk3-dd .rk3-ddm a.on{ color:#B3331E !important; font-weight:700; background:#FDF1EE; }
    #gRight .rk3-ddm a small{ margin-left:6px; font-size:10.5px; font-weight:400; color:#999; }
    #gRight .rk3-ddm a.on small{ color:#C9796A; }
    #gRight .rk3 .bbs-title{ flex:1; min-width:0; max-width:none; }
    #gRight .rk3 .bbs-title a{ display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    #gRight .rk3 table{ table-layout:fixed; width:100%; }   /* 긴 제목(nowrap)이 표를 넓혀 숫자가 오른쪽 칸 밖으로 잘리던 것 → 표 폭 고정 */
    #gRight .rk3-n{ flex:none; margin-left:auto; padding-left:6px; font-size:11px; color:#999; font-variant-numeric:tabular-nums; white-space:nowrap; }
    #gRight .rk3-n i{ font-size:9.5px; margin-right:3px; }
    #gRight .rk3-empty{ padding:14px 0; text-align:center; font-size:12px; color:#999; }
    /* [2026-09-15] 화면 높이가 낮으면(노트북·Windows 배율 125% 등) 실종 상자만 한 줄(2칸)로 — 베스트는 늘 10줄(사장님 1안: 커뮤니티 칸의 중심은 베스트).
       오른쪽 칸 전체 약 820px(배너 200 + 베스트 10 + 실종 4칸) + sticky 위 33px → 855px 미만이면 실종 2칸(칸 약 720px).
       🔴 배너가 실제로 있을 때만(.has-trb, 2026-09-15 사장님 「광고 없어 자리 충분한데 2칸」) — 배너 없으면 칸 약 600px 라 643px 미만일 때만 2칸.
       안쪽 높이 약 750px 미만이면 실종 칸 아래가 조금 잘릴 수 있음(감수). 종전 「베스트 7/5줄」 규칙은 배율 125% 1080p 에서도 걸려 폐기 */
    @media (max-height: 854px){ #hotAndweeky_container.has-trb #anFindBox .anf-grid > a:nth-child(n+3){ display:none; } }
    @media (max-height: 642px){ #gRight #anFindBox .anf-grid > a:nth-child(n+3){ display:none; } }
    html.dark #gRight .rk3-tabs .sep, body.dark #gRight .rk3-tabs .sep{ color:#4A443F; }
    html.dark #gRight .rk3-ddb, body.dark #gRight .rk3-ddb{ border-color:#4A443F; color:#D6CFC8; }
    html.dark #gRight .rk3-ddb:hover, body.dark #gRight .rk3-ddb:hover,
    html.dark #gRight .rk3-ddb[aria-expanded="true"], body.dark #gRight .rk3-ddb[aria-expanded="true"]{ border-color:var(--color-hover); color:var(--color-hover); }
    html.dark #gRight .rk3-ddm, body.dark #gRight .rk3-ddm{ background:#2A2623; border-color:#3E3834; box-shadow:0 6px 18px rgba(0,0,0,.4); }
    html.dark #gRight .rk3-dd .rk3-ddm a, body.dark #gRight .rk3-dd .rk3-ddm a{ color:#D6CFC8 !important; }
    html.dark #gRight .rk3-dd .rk3-ddm a:hover, body.dark #gRight .rk3-dd .rk3-ddm a:hover{ background:#332E2A; color:var(--color-hover) !important; }
    html.dark #gRight .rk3-dd .rk3-ddm a.on, body.dark #gRight .rk3-dd .rk3-ddm a.on{ color:#F2C25E !important; background:#3B2A22; }
    html.dark #gRight .rk3-ddm a small, body.dark #gRight .rk3-ddm a small{ color:#8F8780; }
    html.dark #gRight .rk3-ddm a.on small, body.dark #gRight .rk3-ddm a.on small{ color:#C9A55A; }
    html.dark #gRight .rk3-n, body.dark #gRight .rk3-n,
    html.dark #gRight .rk3-empty, body.dark #gRight .rk3-empty{ color:#8F8780; }
    

/* ── community/_tab_right_find.php (옛 86줄) ── */
/* ── 잃어버린 가족을 찾습니다 (2026-09-15 과자 뒷면식 2×2 세로 칸 작게 — 오른쪽 칸 전체를 한 화면에, 칸 폭 200) ── */
#gRight .anf{ margin:0 0 12px; font-size:13px; }
#gRight .anf a{ text-decoration:none; }
#gRight .anf-box{ border:1px solid #E6D3C8; background:#FFFBF7; border-radius:3px; padding:7px 8px 8px; }
#gRight .anf-hd{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#8A5B4B; letter-spacing:.02em; white-space:nowrap; }
#gRight .anf-hd::before, #gRight .anf-hd::after{ content:''; flex:1; height:1px; background:#E6D3C8; }
#gRight .anf-hd a.anf-hd-link{ color:inherit !important; }   /* 제목 = 목록 링크(새 창) — 글자색은 제목 잉크 그대로, #gRight a 전역 색을 이김 */
#gRight .anf-hd a.anf-hd-link:hover{ color:var(--color-hover) !important; }
html.dark #gRight .anf-hd a.anf-hd-link, body.dark #gRight .anf-hd a.anf-hd-link{ color:inherit !important; }
html.dark #gRight .anf-hd a.anf-hd-link:hover, body.dark #gRight .anf-hd a.anf-hd-link:hover{ color:var(--color-hover) !important; }
#gRight .anf-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 6px; padding-top:7px; }
#gRight a.anf-tile{ display:flex; flex-direction:column; min-width:0; }
#gRight .anf-ph{ position:relative; display:block; width:100%; height:58px; border:1px solid #E8D9D1; background:#fff; box-sizing:border-box; overflow:hidden; }
#gRight .anf-ph img{ position:absolute; inset:2px; width:calc(100% - 4px); height:calc(100% - 4px); display:block; object-fit:cover; }
#gRight .anf-ph img.anf-def{ object-fit:contain; }
#gRight .anf-tx{ min-width:0; display:flex; flex-direction:column; align-items:center; margin-top:3px; }
#gRight .anf-nm{ max-width:100%; font-size:12px; font-weight:800; line-height:1.35; color:#5A3C31; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#gRight .anf-in{ max-width:100%; font-size:10px; line-height:1.4; color:#8C7064; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#gRight a.anf-tile:hover .anf-ph{ border-color:var(--color-hover); }
#gRight a.anf-tile:hover .anf-nm{ color:var(--color-hover); }
#gRight a.anf-tile.anf-add{ justify-content:center; align-items:center; height:58px; border:1px dashed #E6D3C8; }
#gRight a.anf-tile.anf-add.wide{ grid-column:1 / -1; }
#gRight .anf-addt{ font-size:11.5px; font-weight:700; color:#5A3C31; }
#gRight .anf-addt i{ font-size:10px; margin-right:4px; color:#B08A7A; }
#gRight a.anf-tile.anf-add:hover .anf-addt{ color:var(--color-hover); }
#gRight .anf-ft{ display:flex; justify-content:space-between; gap:6px; margin-top:4px; padding:6px 2px 0; font-size:12px; white-space:nowrap; }
#gRight .anf-ft a{ color:#888 !important; }
#gRight .anf-ft a.pri{ color:#8A5B4B !important; font-weight:700; }
#gRight .anf-ft a:hover{ color:var(--color-hover) !important; }
html.dark #gRight .anf-box, body.dark #gRight .anf-box{ background:#2A2522; border-color:#4A3F39; }
html.dark #gRight .anf-hd, body.dark #gRight .anf-hd{ color:#D6B8A6; }
html.dark #gRight .anf-hd::before, body.dark #gRight .anf-hd::before,
html.dark #gRight .anf-hd::after, body.dark #gRight .anf-hd::after{ background:#4A3F39; }
html.dark #gRight .anf-ph, body.dark #gRight .anf-ph{ background:#332C28; border-color:#4A3F39; }
html.dark #gRight .anf-nm, body.dark #gRight .anf-nm,
html.dark #gRight .anf-addt, body.dark #gRight .anf-addt{ color:#EADCD2; }
html.dark #gRight .anf-in, body.dark #gRight .anf-in,
html.dark #gRight .anf-addt i, body.dark #gRight .anf-addt i{ color:#A8958A; }
html.dark #gRight a.anf-tile:hover .anf-nm, body.dark #gRight a.anf-tile:hover .anf-nm,
html.dark #gRight a.anf-tile.anf-add:hover .anf-addt, body.dark #gRight a.anf-tile.anf-add:hover .anf-addt{ color:var(--color-hover); }
html.dark #gRight a.anf-tile.anf-add, body.dark #gRight a.anf-tile.anf-add{ border-color:#4A3F39; }
html.dark #gRight .anf-ft a, body.dark #gRight .anf-ft a{ color:#A39B93 !important; }
html.dark #gRight .anf-ft a.pri, body.dark #gRight .anf-ft a.pri{ color:#D6B8A6 !important; }
html.dark #gRight .anf-ft a:hover, body.dark #gRight .anf-ft a:hover{ color:var(--color-hover) !important; }


/* ── /css/inl/board_view.css ── */
/* 페이지 안 <style> 조각을 옮겨 모은 파일 — 순서 = 원래 페이지 안 순서. 묶음(css_concat)으로 실림 (2026-10-23) */

/* ── community/board_view.php (옛 146줄) ── */
        /* targetComment가 있을 때 스크롤 부드러움 제거 (즉시 이동) */
        html {
            scroll-behavior: auto !important;
        }
        html.cmt-landing { opacity: 0 !important; transition: none !important; }   /* 2026-08-28 댓글 랜딩 중 가림 */
    

/* ── community/board_view.php (옛 172줄) ── */
/* board_view.php에서 처음 접속 시  iframe 내부 오버레이 강제 숨김(내부 오버레이 열고 submit 시에도 처음에 안보이게) */
#mosaic-overlay,
#rotate-overlay {
    display: none !important;
    position: static !important;
}

/* ── community/board_view.php (옛 339줄) ── */
			/* 🔴 ui.css `.container_community .gCenter .bg{padding:14px 1px}` 가 이기므로 특이성 맞춰 !important (사장님 "왼쪽에 붙는다" 2026-09-04) */
			.container_community .gCenter .bg.bv-head{padding:14px 16px 12px !important;position:relative}
			.container_community .gCenter .bg.bv-head .ti{padding-left:0}
			/* 2026-09-17 V1: 「목록 · ‹ 이전글 · 다음글 ›」 = 제목 줄 오른쪽 위(시안 SqBgxcWTYM1JCV9ZaTbjxj). 띠 = 게시판 이동, 제목 상자 = 이 글 이동으로 층을 나눈다. 없는 쪽은 .is-off(board_list_config·best_config 의 JS 가 붙임) */
			.bv-navtop{position:absolute;top:15px;right:16px;display:flex;align-items:center;font-size:13px;line-height:22px;white-space:nowrap}
			.bv-navtop a{color:var(--color-text-tertiary,#666);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
			.bv-navtop a:hover{color:var(--color-brand,#D8432A);text-decoration:none}
			.bv-navtop a.is-off, .bv-navtop a.is-off:hover{color:var(--color-text-light,#b5b5b5);cursor:default}
			.bv-navtop .sp{padding:0 7px;color:var(--color-border,#ddd)}
			.bv-navtop i{font-size:12px}
			/* [2026-09-25] 프로필 옆 125×125 광고(pc_view_side)가 있으면 머리 블록을 «왼쪽 열 = 제목+프로필, 오른쪽 열 = 광고» 2열로 — 제목·프로필 줄은 그대로 위에 붙고 광고만 오른쪽 */
			.container_community .gCenter .bg.bv-head:has(.an-mvside){display:grid;grid-template-columns:minmax(0,1fr) 125px;column-gap:16px;align-items:start}
			.container_community .gCenter .bg.bv-head:has(.an-mvside) > *:not(.an-mvside){grid-column:1;min-width:0}
			.container_community .gCenter .bg.bv-head:has(.an-mvside) .bv-navtop{right:157px}
			.container_community .gCenter .bg.bv-head .an-mvside{grid-column:2;grid-row:1 / span 20;align-self:start;width:125px}
			.container_community .gCenter .bg.bv-head.has-nav .ti{display:inline-block;max-width:calc(100% - 230px);vertical-align:top}   /* 긴 제목은 링크 셋 자리(약 210px)를 비우고 접힘 */
			body.dark .bv-navtop a{color:var(--dark-text-secondary,#C9C2B8)}
			body.dark .bv-navtop a:hover{color:var(--color-text-emphasis,#F2C25E)}
			body.dark .bv-navtop a.is-off, body.dark .bv-navtop a.is-off:hover{color:var(--dark-text-tertiary,#7A736A)}
			body.dark .bv-navtop .sp{color:var(--dark-border-secondary,#4A4540)}   /* 2026-09-09 제목 왼쪽이 아바타보다 10px 들어가 있던 것(ui.css 공용 .gCenter .ti{padding-left:10px}) — 머리 안에서만 0 */
			.bv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:10px;font-size:13px;font-weight:400;color:var(--color-text-quaternary);font-variant-numeric:tabular-nums}
			.bv-meta .bv-who{display:inline-flex;align-items:center;cursor:pointer;padding:2px 4px 2px 0;margin:-2px 0}
			.bv-meta .bv-av{width:40px;height:40px;border-radius:28%;border:1px solid var(--color-border-light,#e5e5e5);overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--color-bg-white,#fff);margin-right:0;flex:none}
			.bv-meta .bv-who .grade-badge{margin-left:6px}
			.bv-meta .bv-who .bv-nick{padding-left:6px}   /* 아바타~닉 6px, 틈은 안쪽 여백이라 hover·클릭 영역 */
			.bv-meta .bv-who .grade-badge + .bv-nick{padding-left:0}
			.bv-meta .bv-nick-t{border-bottom:1px dotted #b8bec6}   /* 밑줄은 글자에만 */
			.bv-meta .bv-who:hover .bv-nick{color:var(--color-hover)}
			.bv-meta .bv-who:hover .bv-nick-t{border-bottom-color:currentColor}
			body.dark .bv-meta .bv-nick-t, body.dark .bv-meta .bv-who:hover .bv-nick-t, html.dark .bv-meta .bv-nick-t, html.dark .bv-meta .bv-who:hover .bv-nick-t{border-bottom-color:transparent}   /* 2026-09-14 사장님 "다크에서 프로필 밑줄 보인다, 안 보이게": 점선 #b8bec6 이 어두운 바탕에서 밝게 튐 → 다크는 hover 포함 투명(두께는 남겨 글자 위치 그대로) */
			.bv-meta .bv-av img{width:100%;height:100%;object-fit:cover;display:block}
			.bv-meta .bv-av.is-def{background:transparent;border-color:transparent}
			.bv-av .an-avph{width:100% !important;height:100% !important;border-radius:28% !important}   /* 2026-09-11 첫 글자 아바타(원형 틀에 맞춤) */
			.bv-meta .bv-av.is-def i{font-size:19px;color:var(--tint-coral-fg,#B3331E);line-height:1;margin-top:5px}   /* 사진 없음 = 사람 아이콘(개그림 PNG 는 여백이 커서 40px 원에선 안 보임, 2026-09-04) */
			.bv-meta .bv-nick{font-size:14px;font-weight:500;color:var(--color-text-secondary,#404040);border:0;cursor:pointer;background:none;padding:0;font-family:inherit}
			.bv-meta .sepv{padding:0 5px;color:#ddd;font-weight:500}
			body.dark .bv-meta .sepv{color:#9A938B}   /* 2026-09-11 다크 구분선(#ddd 그대로면 1.4:1 대신 흰색으로 튐) */
			.bv-meta b{font-weight:500;color:var(--color-text-secondary,#404040)}
			.bv-meta .up{color:var(--color-text-emphasis,#D8432A);font-weight:600}   /* [2026-09-12] 추천수는 오류색이 아니라 강조 글자 */
			.bv-meta .bv-share-row{margin-left:auto;display:flex;align-items:center;gap:0;font-size:12.5px;white-space:nowrap}
			body.dark .bv-meta .up{color:var(--tint-coral-fg,#F0A088) !important}
			body.dark .bv-meta .bv-av{border-color:var(--dark-border-secondary)}
			body.dark .bv-meta .bv-av.is-def{background:var(--tint-coral-bg,#3B2A22);border-color:#5A3E33}
			/* 프로필 카드(.bv-pop)는 2026-09-13 댓글 프로필 카드(comment.js §12)와 통합돼 삭제 */
			

/* ── community/board_view.php (옛 818줄) ── */
			.list_bottom_container {
				display: flex;
				justify-content: space-between; /* 양 끝으로 정렬 */
				align-items: center; /* 세로 중앙 정렬 */
				flex-wrap: wrap; /* 필요한 경우 줄 바꿈 */
				padding:8px 0;
			}

			.social-share-container,
			.actions-container {
				display: flex;
				align-items: center;
			}

			.social-share {
				display: flex;
				list-style: none; /* 기본 리스트 스타일 제거 */
				padding: 0; /* 기본 패딩 제거 */
				margin: 0; /* 기본 마진 제거 */
				
				align-items: center;
				justify-content: center;
			}

			.social-share li {
				text-align: center; /* 아이콘과 텍스트를 가운데 정렬 */
			}

			.social-share img {
				display: block; /* 이미지를 블록으로 설정 */
				margin: 0 auto; /* 이미지의 가운데 정렬 */
				width:18px;
				height:18px;
			}

			.social-share a {
				text-decoration: none; /* 링크의 기본 밑줄 제거 */
			}

			.actions-container {
				display: flex;
			}

			.btn_width70 {
				display: inline-block;
				vertical-align: top;
				margin-left: 10px; /* 버튼 간의 간격 조정 */
			}
			
			.social_area_bar {				
				color:#ccc;
				margin:0 9px;
				line-height:8px;
			}
			

/* ── community/board_view.php (옛 1016줄) ── */
/* 댓글 머리줄 모양(.comments_status_bar·.best-toggle-btn·정렬 셀렉트 스킨)은 2026-10-09 E안으로 css/comment.css 「① 머리줄」 절에 모았다 — 종전 이 자리의 인라인 330줄 삭제.
   아래 4줄만 남긴다: 페인트 전에 필요한 구조 규칙(정렬 자리표시 덜컹 방지 2026-09-11)이고, 모바일은 comment.css 를 안 읽어(m_comment.css 번들) 여기 있어야 양쪽 다 맞는다. */
.cmt-order-slot{display:inline-grid;grid-template-columns:auto;align-items:start;justify-items:start;vertical-align:top;}
.cmt-order-slot > *{grid-area:1 / 1;}
.cmt-order-slot > #select ~ .cmt-order-ph{display:none !important;}
.comments_status_bar .cmt-sr{display:none !important;}   /* ON/OFF 글자 — 모바일 JS(is-on 판정)용으로 DOM 엔 남긴다 */
/* ═══ 새 댓글 확인 = 댓글 표 꼬리 띠, 띠 전체가 버튼 — 2026-10-09 H안(사장님 확정, md/mockup/cmt_newbar_v4_261009.html): 표 바로 아래 연회색 46px 띠 가운데 「⟳ 새 댓글 확인」 글 하나(「댓글 N개 · 방금 확인함」 폐지). 누르면 「불러오는 중…」(아이콘 회전), 감지되면 띠 전체 주색 + 「N 새 댓글 N개 보기 ∨」.
   표의 아래선(css/comment.css table border-bottom #c2c2c2) 위에 margin-top:-1px 로 겹쳐 띠의 옅은 윗선이 보이게. 글자는 comment_newcheck.js 가 .cmt-newbar__cnt/__txt 에 쓴다(이름 유지) ═══ */
.cmt-newbar{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin:-1px 0 14px;padding:0 16px;border:1px solid #c2c2c2;border-top-color:var(--color-border-light,#E0E0E4);background:var(--color-bg-lighter,#F7F7F8);color:var(--color-text-primary,#222);font-size:14px;font-weight:600;cursor:pointer;user-select:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;}
@media (hover:hover){.cmt-newbar:hover{background:var(--color-border-light,#EEEEF0);}}   /* 모바일 탭 뒤 hover 색이 남지 않게 */
.cmt-newbar:focus-visible{outline:2px solid var(--state-ongoing,#E4593A);outline-offset:-2px;}
.cmt-newbar__ico{font-size:15px;color:var(--color-text-secondary,#666);}
.cmt-newbar.is-loading .cmt-newbar__ico{animation:cmtSpin 1s linear infinite;}
@keyframes cmtSpin{to{transform:rotate(360deg);}}
.cmt-newbar__cnt{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#fff;color:var(--color-brand,#D8432A);font-size:12.5px;font-weight:700;align-items:center;justify-content:center;}
.cmt-newbar__arr{display:none;font-size:11px;}
/* 2026-10-09 K안(사장님 확정, md/mockup/cmt_newbar_v5_261009.html): 눌렀는데 새 댓글이 없으면 토스트 대신 띠 글만 「✓ 새 댓글이 없습니다」(회색) 2초 → 복귀. 불러오기 실패도 같은 자리 */
.cmt-newbar__ok{display:none;font-size:14px;color:var(--color-text-secondary,#666);}
.cmt-newbar.is-flash{color:var(--color-text-secondary,#666);}
.cmt-newbar.is-flash .cmt-newbar__ico{display:none;}
.cmt-newbar.is-flash .cmt-newbar__ok{display:inline-block;}
body.dark .cmt-newbar.is-flash{color:var(--dark-text-secondary,#b0b0b0);}
body.dark .cmt-newbar__ok{color:var(--dark-text-secondary,#b0b0b0);}
.cmt-newbar.is-hot{background:var(--color-brand,#D8432A);border-color:var(--color-brand,#D8432A);color:#fff;font-weight:700;}
.cmt-newbar.is-hot:hover{filter:brightness(.92);}
.cmt-newbar.is-hot .cmt-newbar__cnt{display:inline-flex;}
.cmt-newbar.is-hot .cmt-newbar__ico{display:none;}
.cmt-newbar.is-hot .cmt-newbar__arr{display:inline-block;}   /* 🔴 ::after content:'f078' 로 넣었다가 패치 스크립트의 PHP 더블쿼트가 f 를 폼피드로 바꿔 이 아래 CSS 가 통째로 죽었다(incident_php_escape_formfeed_css 재발) → 아이콘 요소로 */
.cmt-newbar.is-hot.is-loading .cmt-newbar__ico{display:inline-block;color:#fff;}
.cmt-newbar.is-hot.is-loading .cmt-newbar__arr, .cmt-newbar.is-hot.is-loading .cmt-newbar__cnt{display:none;}
body.dark .cmt-newbar{background:var(--dark-bg-tertiary,#2a2a2a);border-color:var(--dark-border-secondary,#3a3a3a);color:var(--dark-text-primary,#ececec);}
@media (hover:hover){body.dark .cmt-newbar:hover{background:var(--dark-bg-hover,#333);}}
body.dark .cmt-newbar__ico{color:var(--dark-text-secondary,#b0b0b0);}
body.dark .cmt-newbar.is-hot{background:var(--color-brand,#F2C25E);border-color:var(--color-brand,#F2C25E);color:#1e1e1e;}
body.dark .cmt-newbar.is-hot.is-loading .cmt-newbar__ico{color:#1e1e1e;}
body.dark .cmt-newbar__cnt{background:#1e1e1e;color:var(--color-brand,#F2C25E);}
/* 새로 불러온 댓글 줄: 코랄 띠 + NEW */
#comment_zone tr.cmt-new > td{background:#fff7f4 !important;box-shadow:inset 3px 0 0 var(--state-ongoing,#E4593A);}
body.dark #comment_zone tr.cmt-new > td{background:#2a221f !important;box-shadow:inset 3px 0 0 var(--state-ongoing,#A9452E);}
#comment_zone tr.cmt-new a[onclick*="popup_nick_menu"]::after{content:'NEW';display:inline-block;margin-left:6px;padding:1px 5px;border-radius:3px;background:var(--state-ongoing,#D8432A);color:var(--state-ongoing-text,#fff);font-size:11px;font-weight:700;vertical-align:1px;}
/* 댓글 ⋮ 더보기 버튼의 배치 기준 = 댓글 칸 (2026-08-27) — PC 에선 td 가 static 이라 absolute 버튼이 페이지 컬럼(.gCenter) 기준으로 잡혀 칸 밖으로 7~14px 넘쳤다(모바일은 이미 relative). hover 원이 칸 안에 들어오게 */
#comment_zone td.td_no_depth, #comment_zone td.td_yes_depth, #comment_zone_best td.td_no_depth, #comment_zone_best td.td_yes_depth{position:relative;}
/* ═══ 댓글 ⋮ 드롭다운 메뉴 (2026-08-27 사장님 "눌렀을 때 css 제대로 안 돼 있다") — 80px 상자에 글자가 접히던 것 → 항목형 메뉴. 목록 파일의 인라인 .toggle-content 를 덮는다(특이성+!important) ═══ */
#comment_zone .toggle-content, #comment_zone_best .toggle-content{width:auto !important;min-width:156px;padding:6px 0 !important;border-radius:8px !important;border:1px solid var(--color-border-light,#e3e3e3) !important;background:var(--color-bg-white,#fff) !important;box-shadow:0 6px 18px rgba(0,0,0,.12) !important;top:calc(100% + 4px) !important;right:0 !important;}
#comment_zone .toggle-content > a, #comment_zone .toggle-content > button, #comment_zone_best .toggle-content > a, #comment_zone_best .toggle-content > button{display:flex !important;align-items:center;gap:9px;width:100%;box-sizing:border-box;margin:0 !important;padding:8px 14px !important;font-size:13px !important;line-height:1.3;font-weight:500;color:var(--color-text-primary,#222) !important;background:none !important;border:0 !important;border-radius:0 !important;text-align:left;white-space:nowrap;cursor:pointer;font-family:inherit;text-decoration:none !important;}
#comment_zone .toggle-content > a:hover, #comment_zone .toggle-content > button:hover, #comment_zone_best .toggle-content > a:hover, #comment_zone_best .toggle-content > button:hover{background:var(--color-bg-lighter,#f5f5f7) !important;}
#comment_zone .toggle-content i, #comment_zone_best .toggle-content i{width:14px;text-align:center;font-size:13px;margin:0 !important;flex:none;}
#comment_zone .toggle-content > br, #comment_zone .toggle-content > a[id^="comment_link_copy_"], #comment_zone_best .toggle-content > br, #comment_zone_best .toggle-content > a[id^="comment_link_copy_"]{display:none !important;}   /* 줄바꿈 태그·복사용 숨은 링크 */
body.dark #comment_zone .toggle-content, body.dark #comment_zone_best .toggle-content{background:var(--dark-bg-secondary,#232323) !important;border-color:var(--dark-border-secondary,#3a3a3a) !important;box-shadow:0 6px 18px rgba(0,0,0,.5) !important;}
body.dark #comment_zone .toggle-content > a, body.dark #comment_zone .toggle-content > button, body.dark #comment_zone_best .toggle-content > a, body.dark #comment_zone_best .toggle-content > button{color:var(--dark-text-primary,#ececec) !important;}
body.dark #comment_zone .toggle-content > a:hover, body.dark #comment_zone .toggle-content > button:hover, body.dark #comment_zone_best .toggle-content > a:hover, body.dark #comment_zone_best .toggle-content > button:hover{background:var(--dark-bg-hover,#333) !important;}

/* 모바일 댓글 FAB 개수 점 */
.cmt-fab-dot{position:absolute;top:-6px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#222;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
body.dark .cmt-fab-dot{border-color:var(--dark-bg-primary,#1e1e1e);}

#comment_pagination_top { display:none !important; }   /* 2026-09-10 페이지 번호 폐지(한 페이지 이어붙이기) */
#comment_pagination_top {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10; /* BEST 토글 버튼 위에 표시 */
	pointer-events: auto; /* 클릭 이벤트 활성화 */
	cursor: default; /* 버튼 사이 공백에서 텍스트 커서 방지 */
	user-select: none; /* 텍스트 선택 방지 */
}

#comment_pagination_top a {
	pointer-events: auto; /* 링크 클릭 활성화 */
	position: relative;
	z-index: 11; /* 다른 요소 위에 표시 */
	color: #333 !important; /* 진한 텍스트 색상 강제 적용 */
	border: 1px solid color-mix(in srgb, var(--ui-action,#D8432A) 30%, transparent) !important; /* 테두리 추가 */
	cursor: pointer !important; /* 포인터 커서 */
	user-select: none !important; /* 텍스트 선택 방지 */
}

#comment_pagination_top a:hover {
	border-color: color-mix(in srgb, var(--ui-action,#D8432A) 50%, transparent) !important;
}

#comment_pagination_top a.on,
#comment_pagination_top a.on:hover,
#comment_pagination_top a.on *,
#comment_pagination_top a.on .current_page,
#comment_pagination_top a.on .current_page:hover {
	background-color: transparent !important; /* 배경색 제거 */
	/* 🔴 현재 쪽은 본문 페이지네이션과 같은 토큰이어야 한다 (여기만 파랑이었다) */
	border-color: var(--ui-current-page, #D84841) !important;
	color: var(--ui-current-page, #D84841) !important;
	cursor: pointer !important; /* hover 시 포인터 커서 유지 (JavaScript에서 클릭 방지) */
	pointer-events: auto !important;
}

#comment_pagination_top a.on .current_page {
	background-color: transparent !important;
	color: var(--ui-current-page, #D84841) !important;
	user-select: none !important; /* 텍스트 선택 방지 */
}

#comment_pagination_top .nav_render_button {
	color: inherit !important; /* 부모 a 태그 색상 상속 */
	background-color: transparent !important;
	border: none !important;
}

#comment_pagination_top .nav_page {
	color: inherit !important; /* 부모 a 태그 색상 상속 */
	background-color: transparent !important;
}


/* 우측 정렬을 위한 컨테이너 */
.right-align-container {
	display: flex;
	align-items: center;
	gap: 5px; /* select와 refresh 버튼 간격 */
}