/* an_css_concat pcpg — 2026-10-23T08:51:06+09:00 — 원본: /css/inl/comm_pc.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; }