/* an_css_concat pcm — 2026-10-25T21:19:39+09:00 — 원본: /css/inl/pc_main.css */

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

/* ── main/main.php (옛 370줄) ── */
		*,
		*:before,
		*:after { box-sizing: border-box; }
		html { overflow-y: scroll; }
		body { margin: 0; }
		/* 본문은 남는 폭을 유연하게 차지(flex) + min-width:0 로 좁아지면 그리드가 줄어듦.
		   예전엔 calc(폭-360) 고정 + flex-shrink:0 이라, 뷰포트가 사이트폭보다 좁으면
		   본문이 안 줄고 사이드바가 화면 밖으로 밀리거나 겹쳐 보였다. (그리드는 minmax(0,1fr)이라 자동 축소) */
		/* [2026-08-10] 본문 = 배너 원본(980) 기준 고정, 사이드바 = 남는 너비 (사용자 확정) */
		#content { flex: 0 1 980px; width: 980px; max-width: 980px; min-width: 0; display: flex; flex-direction: column; }
		/* 사이드바 = 300 고정, margin-left:auto 로 우측 밀착 → 본문(980)과 사이 여백 자동 확보(사이트 폭 1310 에서 30px) */
		#sidebar { margin-left: auto; flex: 0 0 300px; width: 300px; min-width: 0; position: relative; margin-top: 20px; order: 2; } /* 🔴 order:2 (2026-08-20) — #sidebar 마크업을 #content 보다 '앞'에 출력(아래 body 참조: 중앙 섹션 스택의 쿼리·전송을 기다리며 우측만 ~1초 늦게 뜨던 것 수리). 시각 배치는 이 order 가 종전처럼 맨 오른쪽 유지 */
		/* 사이드바 내부 고정폭(336 시절) 요소들을 유동으로 — 남는 너비에 맞춰 신축 */
		#sidebar .mECenter1 { width: 100% !important; }
		#sidebar .mECenter1 table { width: 100% !important; }
		#sidebar .sidebar__inner { display: flow-root; /* float 자식 포함 → 높이 확보. 🔴sticky JS 가 상태 전환마다 flow-root 로 리셋하므로 여기서 flex 를 걸면 안 된다 */ }

		/* ── 우측 사이드바 접기/펼치기 (좁은 폭 전용, 커뮤니티 랭킹과 동일 UX) ──
		   좁으면 자동으로 접혀 본문이 그 폭만큼 넓어지고 ‹ 핸들만 남는다. ‹ 를 누르면 원래
		   사이드바가 '전체 높이 그대로' 복원되고(본문이 자리 양보 → 겹치지 않음) › 로 다시 접는다.
		   넓은 폭에서는 기능 비활성 — 항상 인라인. 선택은 localStorage 저장. */
		#sidebar.rank-collapsed { display: none !important; }
		#mainSideReopenHandle {
			display: none; position: fixed; top: 50%; transform: translateY(-50%);
			right: 0;
			z-index: 9490; width: 30px; padding: 16px 0;
			background: var(--color-brown, #E66B65); color: #fff;
			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;
		}
		#mainSideReopenHandle.show { display: flex; }
		#mainSideReopenHandle i { font-size: 14px; }
		body.dark #mainSideReopenHandle { background: var(--ui-action, #FF9F1C); color: var(--ui-action-text, #2A1F0A); } /* 구 참조는 다크에서 노랑으로 풀리는데 글씨가 흰색(1.72)이었다 — 액션 짝 토큰으로(2026-08-16) */
		/* 접기는 오른쪽 세로중앙 토글 핸들이 담당 → 사이드바 내부 닫기버튼은 미사용(숨김) */
		#mainSideCloseBtn { display: none !important; }
		footer { clear: both; box-sizing: border-box; margin-top: 20px; }
		footer p { margin: 0; }
		.clearfix:after { display: block; content: ""; clear: both; }
		.mList2 a:hover { text-decoration: none; color: var(--color-hover); }
		body.dark .mList2 a:hover { color: var(--color-hover); }
		.no-js, #today_ul_list, #week_ul_list{display: none}

		/* layout lock overrides */
		/* 배너 = 원본 규격 980×120 기준 — 폭 980 상한 + 비율 고정(크롭 없음).
		   콘텐츠 폭이 980 미만이면(사이트 폭 1280 → 본문 ~920) 비율 그대로 축소된다. */
		.mainPage_banner_wrap{
			width:100% !important;
			max-width:980px !important;
			height:auto !important;
			aspect-ratio:980/120;
			max-height:120px !important;
			box-sizing:border-box !important;
			margin:0 auto 10px !important;
			padding:0 !important;
			overflow:hidden !important;
			display:block !important;
			background:var(--color-bg-lighter) !important;
			/* 섹션 카드 틀과 완전 동일한 테두리 문법(1px·라운드 10) — 배너만 이중 테두리로 두꺼워 보이던 것 통일 */
			border:1px solid var(--color-border-light,#e5e5e5) !important;
			border-radius:10px !important;
		}
		/* 다크모드 지원 */
		body.dark .mainPage_banner_wrap{
			background:var(--dark-bg-tertiary) !important;
			border-color:var(--dark-border-secondary) !important;
			box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
		}
		/* 🔴 강제 크기 규칙은 자체 배너 전용 — 외부 광고 표시 중(is-adslot)에는 매칭 자체를 막는다.
		   (!important 로 덮어쓰는 방식은 광고 코드의 인라인 크기까지 죽여 광고 변형 = 정책 위반이 된다) */
		.mainPage_banner_wrap:not(.is-adslot) > *{width:100% !important;height:100% !important;display:block !important;margin:0 !important;border:0 !important;}
		.mainPage_banner_wrap:not(.is-adslot) img,
		.mainPage_banner_wrap:not(.is-adslot) picture,
		.mainPage_banner_wrap:not(.is-adslot) a,
		.mainPage_banner_wrap:not(.is-adslot) div{width:100% !important;height:100% !important;display:block !important;}
		.mainPage_banner_wrap:not(.is-adslot) img{object-fit:cover !important;}
		.mainPage_banner_wrap:not(.is-adslot) iframe{width:100% !important;height:100% !important;border:0 !important;}
		/* 외부 광고 표시 중엔 틀의 크기 제한만 해제(내용물은 광고 코드가 정한 크기 그대로) */
		.mainPage_banner_wrap.is-adslot{height:auto !important;max-height:none !important;aspect-ratio:auto !important;overflow:visible !important;border:0 !important;background:transparent !important;}
		.mainPage_banner_wrap.is-adslot #main_banner_wrap{width:100% !important;}
		/* 2026-09-24 사장님 "아무것도 없는데 광고 칸 있음" — 판매 0·애드센스 없음이면 mainPage_banner.php 가 is-collapsed 를 붙이는데 접는 규칙이 없어 빈 틀 980×120 이 남았다 */
		.mainPage_banner_wrap.is-collapsed{display:none !important;}

		.bg_platinum_select_area{
			height:54px !important;
			box-sizing:border-box !important;
			padding:9px 6px !important;
			display:flex !important;
			align-items:center !important;
			gap:8px !important;
			background:var(--color-bg-lighter) !important;
			border:1px solid #eaeaea !important;
			border-bottom:none !important;
			border-radius:5px 5px 0 0 !important;
		}
		/* 다크모드 지원 */
		body.dark .bg_platinum_select_area{
			background:var(--dark-bg-tertiary) !important;
			border-color:var(--dark-border-secondary) !important;
		}
		#sidoTabSelect{ width:120px !important; }
		#gugunSelect{ width:150px !important; }
		#cCodeTabSelect{ width:200px !important; }

		.main_content_wrap{
			flex:1 !important;
			display:flex !important;
			flex-direction:column !important;
			box-sizing:border-box !important;
			background:#fff !important;
			border:1px solid #eee !important;
			border-radius:0 0 5px 5px !important;
			overflow:hidden !important;
		}
		/* 다크모드 지원 */
		body.dark .main_content_wrap{
			background:var(--dark-bg-secondary) !important;
			border:1px solid var(--dark-border-secondary) !important;
			box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
		}
		.main_basicAnimal_list{
			display:block !important;
			flex:1 !important;
			box-sizing:border-box !important;
			padding:8px !important;
			overflow:hidden !important;
		}
		/* 로딩중 텍스트 주석처리 (거슬림 방지)
		.main_basicAnimal_list:empty::before{
			content:"로딩중..." !important;
			display:flex !important;
			align-items:center !important;
			justify-content:center !important;
			height:100% !important;
			color:#888 !important;
			font-size:14px !important;
		}
		*/
	

/* ── main/main.php (옛 523줄) ── */
					.title{white-space:normal;word-wrap:break-word;line-height:1.25;text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;width:98%;font-size:12px;margin-top:7px;padding-bottom:30px;overflow:hidden;text-overflow:ellipsis;height:1.4em;max-height:13.5px;}
					.inner_listbox{width:49.5%;margin:0 auto;box-sizing:border-box;text-align:center;padding-bottom:2.3%;}
					.inner_listbox2{padding-left:5.2px;width:33.2%;margin:0 auto;box-sizing:border-box;text-align:center;padding-bottom:2.3%;}
					.inner_listbox:nth-child(n-1){padding-left:6px;}
					.imagebox-wrap{width:100%;margin:0px auto;}
					.imagebox-wrap img{width:100%;vertical-align:center;}
				

/* ── main/main_right.php (옛 8줄) ── */
	/* ── [2026-08-11] 사이드 박스 = 본문 섹션과 같은 플로팅 모듈 (흰 면 + 라운드 + 그림자)
	   페이지 바탕이 쿨 그레이(--light-bg-page)로 바뀌면서 투명 배경이 그대로 비치던 것 보정.
	   면 색 = --light-bg-primary(흰 모듈 면) — 바탕 토큰과 분리돼야 떠 보인다. 다크는 그림자 대신 면 밝기 */
	#main_right_login_box{display:block;margin:0;padding:0;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);overflow:hidden;}
	body.dark #main_right_login_box{background:var(--dark-bg-secondary,#232323);box-shadow:none;}
	/* 모듈이 겉면을 담당하므로 안쪽 상자들의 바깥 테두리·라운드는 제거(이중 테두리 방지) */
	#main_right_login_box > form > table{border:none !important;border-radius:0 !important;width:100% !important;}
	#main_right_login_box .login-after-area{border:none !important;border-radius:0 !important;}
	/* 안쪽 회색 띠 제거 — 로그인 영역(#f6f6f6)·베스트 목록(#f2f6fc)이 자기 배경을 갖고 있어 흰 모듈 안에서 회색으로 남던 것.
	   인라인 style 이라 !important 필수. 다크는 기존 body.dark 규칙(특이성 높음)이 그대로 이김 */
	#main_right_login_box .login-after-area{background:transparent !important;}
	#main_right_login_box .mList2 .best_list,
	#main_right_login_box .main_left.best_list{background:var(--light-bg-primary,#fff) !important;}
	#main_right_login_box .best_list_tab li{background:var(--light-bg-primary,#fff) !important;}   /* 탭 줄도 흰 면 — 선택은 굵기·밑줄로 구분 */
	/* 🔴 2026-08-27 다크 짝(ID 특이성) — 위 두 줄이 ID 로 라이트 흰색을 강제해 아래 `body.dark .mList2 .best_list{--dark-bg-tertiary}`(클래스만) 가 져서 **다크에서 목록 본문이 흰색**, 그 위에 #ECECEC 글씨 = 2~5위가 안 보였다(3배 캡처로 확인). 1위 .item-container 만 어두워 검은 카드처럼 떠 있던 것도 같은 원인 → 투명 */
	body.dark #main_right_login_box .mList2 .best_list,
	body.dark #main_right_login_box .main_left.best_list{background:var(--dark-bg-secondary,#232323) !important;}
	body.dark #main_right_login_box .mList2 .best_list>ul li:first-child .item-container,
	body.dark #main_right_login_box .mList2 .best_list>ul li:first-child .text-container{background:transparent !important;}
	body.dark #main_right_login_box .best_list_tab li{background:var(--dark-bg-secondary,#232323) !important;}   /* 라이트 토큰 강제의 다크 짝 — 흰 면에 밝은 글씨(1.2) 수리(2026-08-16) */
	/* 2026-08-27 다크 선택 탭이 주황(#FF9F1C)으로 칠해지던 것 — inc/header.php 의 전역 `body.dark li.selected a{background:--dark-ranking-color}` 가 이 모듈 탭까지 칠함(픽셀 실측). 이 모듈은 흰/어두운 면 + 코랄 밑줄로 통일 */
	body.dark .mTab_main .best_list_tab li.selected a, body.dark .mTab_main .best_list_tab li.selected a span,
	body.dark .mTab_main .best_list_tab li:hover a, body.dark .mTab_main .best_list_tab li:hover a span{background-color:transparent !important; color:var(--dark-text-primary,#ECECEC) !important;}
	.mTab_main .best_list_tab li.selected{border-bottom:2px solid var(--state-ongoing,#E4593A) !important;}   /* 선택 탭 = 굵기 + 코랄 밑줄(라이트·다크 공통, 시안 A) */
	body.dark .mTab_main .best_list_tab li.main_best_box.selected{border-bottom-color:var(--state-ongoing,#A9452E) !important;}   /* ui.css 다크 규칙(.main_best_box.selected 흰 밑줄, 특이성 높음) 위에서 코랄 유지 */
	.mECenter1 .pk-box{border:none;border-radius:12px;box-shadow:0 1px 3px rgba(20,10,5,.08),0 4px 14px rgba(20,10,5,.06);background:var(--light-bg-primary,#fff);}
	body.dark .mECenter1 .pk-box{background:var(--dark-bg-secondary,#232323);box-shadow:none;}

	/* 다크모드 버튼 배경 */
	body.dark .main_right_tdBtn dl{
		background-color: var(--dark-bg-button, #333333);
		color: var(--dark-text-primary, #ECECEC);
		border-color: var(--dark-border-secondary);
	}
	/* ───────── 우측 탭/리스트 레이아웃 고정 ───────── */
	.mECenter1{width:100% !important;}   /* [2026-08-10] 사이드바 유동화 — 고정 336 폐지 */
	.mTab_main{width:100% !important; box-sizing:border-box;}
	.mTab_main .best_list_tab{display:flex; margin:0; padding:0;}
	.mTab_main .best_list_tab li{list-style:none; flex:1 0 auto; height:36px; line-height:36px; text-align:center; border-bottom:1px solid #e5e5e5;}

	.mList2{width:100% !important; box-sizing:border-box;}
	/* 고정 영역(탭 본문) - 내부 스크롤 */
	.mList2 .best_list{
		padding:8px 0 !important;
		background:var(--light-bg-primary,#fff);   /* [2026-08-11] #f2f6fc → 흰 모듈 면 */
		border-radius:0 0 5px 5px;
		overflow:hidden !important;
	}
	.main_left.best_list{
		overflow:hidden !important;
	}
	/* 다크모드 지원 */
	body.dark .mList2 .best_list,
	body.dark .main_left.best_list{
		background:var(--dark-bg-tertiary) !important;
	}
	/* 각 탭의 UL */
	.mList2 .best_list>ul{
		display:none; padding:0 14px;   /* 2026-08-27 A안: 좌우 여백 10→14 */
		overflow:hidden !important;
		-webkit-overflow-scrolling:touch;
	}
	.main_left.best_list>ul{
		overflow:hidden !important;
	}
	.mList2 .best_list>ul li{list-style:none; margin:0; padding:0; border:0;}   /* 2026-08-27 A안: 줄 간격은 아래 높이 규칙으로 */

	/* 첫 항목(썸네일 카드) 고정 크기 */
	.mList2 .best_list>ul li:first-child .item-container{min-height:90px; gap:10px;}
	.mList2 .best_list>ul li:first-child .media-container{flex:0 0 120px; width:120px !important; height:90px !important; border-radius:2px; overflow:hidden;}
	.mList2 .best_list>ul li:first-child .media-container > img:not(.is-thumb-default):not([src*="default_image"]){width:120px !important; height:90px !important; object-fit:cover !important; border:0;}   /* 2026-08-27: 실제 사진만 cover — 기본이미지 3경로(이미지없음 .empty_image / thumb.php 폴백 .is-thumb-default / 실패 onerror src=default)는 전부 header.php 전역 규칙(contain+여백) → 두 탭 개그림 크기 동일(사장님 지적 "왜 크기가 다르냐") */
	.mList2 .best_list>ul li:first-child .text-container{min-height:90px;}
	/* 2026-08-27 로그인창 프로필 아바타(56px 원)의 기본이미지 — header.php 전역 규칙(contain+여백 6%/12%)은 작은 원에선 개가 23px 로 보인다.
	   기본이미지 PNG(130×99)는 가운데 64×72 만 그림이고 좌우가 투명 여백 → 정사각 원에선 cover 로 투명 여백만 잘라내고 여백 0 → 개 약 34×38px */
	img.an-pf-avatar[src*="default_image"], img.an-pf-avatar.is-thumb-default{object-fit:cover !important; padding:0 !important;}

	/* 다음 항목들 한 줄 높이 고정 */
	/* ═══ 2026-08-27 A안(정돈형, 사장님 "글씨 붙어 나옴") — 2~5위 줄: a 가 inline 이라 줄 폭을 안 채워 space-between 이 죽고 게시판명이 댓글수 뒤에 붙던 것.
	   a 를 flex 100% 로, 제목 한 줄 말줄임 + 코랄 댓글수, 게시판명은 오른쪽 끝. 줄 34px·가는 구분선. */
	.mList2 .best_list>ul li:not(:first-child){height:34px; display:flex; align-items:center; border-bottom:1px solid var(--color-border-light,#f1f1f1);}
	.mList2 .best_list>ul li:last-child{border-bottom:0;}
	body.dark .mList2 .best_list>ul li:not(:first-child){border-bottom-color:var(--dark-border-secondary,#353535);}
	.mList2 .best_list>ul li:not(:first-child)>a{display:flex !important; align-items:center; width:100%; min-width:0;}
	.mList2 .best_list>ul li .br-row{display:flex; align-items:center; gap:8px; width:100%; min-width:0;}
	.mList2 .best_list>ul li .br-title{display:flex; align-items:baseline; gap:5px; min-width:0; overflow:hidden;}
	.mList2 .best_list>ul li .br-title>span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; letter-spacing:-0.25px; font-size:13px;}
	.mList2 .best_list>ul li span.count{flex:none; display:inline-flex; align-items:center; gap:3px; color:var(--color-text-lighter,#9a9a9a) !important; font-weight:400 !important; font-size:11.5px; font-variant-numeric:tabular-nums;}   /* 뽐뿌 농도: 중간 회색·보통 굵기(300+투명도는 너무 흐려서 되돌림) */   /* 2026-08-27 뽐뿌식(sample/ppom.png): 회색 말풍선+숫자 → 사장님 "더 얇게·흐리게 녹아들게": 굵기 300·연회색·11px */
	.mList2 .best_list>ul li span.count i{font-size:10.5px; color:inherit;}
	.mList2 .best_list>ul li span.tit{flex:none; margin-left:auto; color:var(--color-text-lighter,#9a9a9a) !important; font-weight:400 !important; font-size:11.5px; letter-spacing:-0.3px;}   /* 2026-08-27 뽐뿌처럼 게시판명도 얇고 연하게 — 댓글수와 같은 회색·보통 굵기 */
	body.dark .mList2 .best_list>ul li span.count{color:var(--dark-text-muted,#8C8C8C) !important;}   /* 다크 짝 — 어두운 면에 녹아드는 중간 회색(아래 li span 전역 흰색 !important 보다 특이성 높음) */
	body.dark .mList2 .best_list>ul li span.count i{color:inherit !important;}
	body.dark .mList2 .best_list>ul li span.tit{color:var(--dark-text-muted,#8C8C8C) !important;}   /* 다크 짝 — 댓글수와 동일 */
	/* 1위(썸네일 항목) — 종전 루프 안 인라인 <style>(a 안에 렌더되던 것) 을 여기로 이관 */
	.mList2 .best_list>ul li:first-child .media-container{border-radius:6px;}
	.mList2 .best_list>ul li:first-child .media-container img{width:120px !important; height:90px !important; border:none !important;}
	.mList2 .best_list>ul li:first-child .text-container{display:flex; flex-direction:column; min-height:90px; min-width:0; gap:6px; box-sizing:border-box;}
	.mList2 .best_list>ul li:first-child .main_right_best_title{font-weight:700; letter-spacing:-0.25px; font-size:14px; line-height:1.45; word-break:break-all; overflow-wrap:break-word; color:#101010; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
	.mList2 .best_list>ul li:first-child .board-name{color:var(--color-text-lighter,#9a9a9a); font-weight:400; font-size:11.5px; margin-top:auto; display:flex; align-items:baseline; gap:6px;}   /* 1위 게시판명도 같은 회색 */
	.mList2 .best_list>ul li:first-child .main_right_border{border-bottom:1px solid var(--color-border-light,#eee); padding-top:10px; clear:both; margin-bottom:2px;}
	body.dark .mList2 .best_list>ul li:first-child .main_right_border{border-bottom:1px solid var(--dark-border-secondary,#353535);}
	body.dark .mList2 .best_list>ul li:first-child .main_right_best_title{color:var(--dark-text-primary, #ECECEC);}
	/* 2026-09-14 사이트 hover 통일: 메인 베스트 제목도 hover = 라이트 빨강 · 다크 노랑(--color-hover). 첫 줄 전용 #101010 규칙·다크 li span !important 보다 특이도를 높여 이긴다(게시판 이름·댓글 수는 그대로) */
	.mList2 .best_list>ul li a:hover .main_right_best_title, .mList2 .best_list>ul li a:hover .main_right_best_title span, .mList2 .best_list>ul li a:hover .br-title, .mList2 .best_list>ul li a:hover .br-title span{color:var(--color-hover) !important;}   /* 둘째 줄부터는 .br-row > .br-title > span 구조(재인덱싱 실측) */
	body.dark .mList2 .best_list>ul li:first-child .board-name{color:var(--dark-text-muted, #8C8C8C) !important;}

	/* 다크모드 */
	body.dark .mList2 .best_list{background:var(--dark-bg-tertiary) !important;}
	body.dark .mTab_main .best_list_tab li{border-bottom-color:var(--dark-border-secondary);}
	
	/* main_right 내부 li 배경색 통일 (다른 영역과 동일하게) */
	body.dark .mList2 .best_list>ul li,
	body.dark .mList2 .best_list ul li,
	body.dark .main_left.best_list ul li,
	body.dark .main_left.best_list>ul li{
		background: transparent !important;
	}
	/* li 내부 모든 요소도 배경색 제거 */
	body.dark .mList2 .best_list>ul li *,
	body.dark .mList2 .best_list ul li *{
		background-color: transparent !important;
	}
	
	/* 베스트 탭 다크모드 (인라인 스타일 덮어쓰기) */
	body.dark .best_list_tab li[style*="background-color"]{
		background-color: var(--dark-bg-tertiary) !important;
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .best_list_tab li.selected[style*="background-color"]{
		background-color: var(--dark-ranking-color, #FF9F1C) !important;
		color: var(--dark-rank-number-text, #2A1F0A) !important; /* 노랑 위 흰 글씨 2.05 → 어두운 잉크(2026-08-16) */
	}
	body.dark .best_list_tab li a,
	body.dark .best_list_tab li span{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .best_list_tab li.selected[style*="background-color"] a,
	body.dark .best_list_tab li.selected[style*="background-color"] span{
		color: var(--dark-rank-number-text, #2A1F0A) !important; /* 노랑 선택탭 위 짝 글씨 — 배경 안 칠해진 선택탭은 위 밝은 글씨 유지 */
	}
	
	/* 첫 번째 콘텐츠 항목(썸네일 포함) 다크모드 */
	body.dark .mList2 .best_list>ul li:first-child .item-container{
		background-color: var(--dark-bg-tertiary) !important;
	}
	body.dark .mList2 .best_list>ul li:first-child .text-container{
		background-color: var(--dark-bg-tertiary) !important;
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .mList2 .best_list>ul li:first-child a{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	
	/* best_ul_list 링크 스타일 - 라이트모드 */
	#best_ul_list a,
	.best_list ul a {
		color: #2f2f2f !important;
	}
	#best_ul_list a:hover,
	.best_list ul a:hover {
		color: var(--color-hover) !important;
	}

	/* 모든 리스트 항목 텍스트 다크모드 */
	body.dark .mList2 .best_list>ul li{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .mList2 .best_list>ul li a,
	body.dark #best_ul_list a,
	body.dark .best_list ul a {
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .mList2 .best_list>ul li a:hover,
	body.dark #best_ul_list a:hover,
	body.dark .best_list ul a:hover {
		color: var(--color-hover) !important;
	}
	body.dark .mList2 .best_list>ul li span{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .mList2 .best_list .main_right_best_title{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .mList2 .best_list .board-name{
		color: var(--dark-text-secondary, #ACACAC) !important;
	}
	
	/* 로그인 아래 td 라이트모드 (회원가입/아이디찾기/비밀번호찾기 영역) - inc/login.php와 동일하게 */
	.login-links-td,
	table td.login-links-td,
	table td[style*="padding:2.5px"],
	table td[style*="padding:2.5px 0"],
	table td[style*="padding:2.5px 0 6px"],
	.login-button-container + tr td,
	table tr:nth-child(2) td,
	table:first-of-type tr:nth-child(2) td,
	.login-links-row,
	table tr.login-links-row,
	table tr.login-links-row td,
	table tr[style*="background-color:#f6f6f6"],
	table tr[style*="background-color:#f6f6f6"] td{
		background: var(--light-bg-primary, #fff) !important;   /* [2026-08-11] 모듈 안 회색 띠 제거 — 흰 면 통일(구 #f6f6f6) */
	}

	/* 로그인 아래 td 다크모드 (회원가입/아이디찾기/비밀번호찾기 영역) - inc/login.php와 동일하게 */
	body.dark .login-links-td,
	body.dark table td.login-links-td,
	body.dark table td[style*="padding:2.5px"],
	body.dark table td[style*="padding:2.5px 0"],
	body.dark table td[style*="padding:2.5px 0 6px"],
	body.dark .login-button-container + tr td,
	body.dark table tr:nth-child(2) td,
	body.dark table:first-of-type tr:nth-child(2) td,
	body.dark .login-links-row,
	body.dark table tr.login-links-row,
	body.dark table tr.login-links-row td,
	body.dark table tr[style*="background-color:#f6f6f6"],
	body.dark table tr[style*="background-color:#f6f6f6"] td{
		background: var(--dark-bg-tertiary) !important;
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .login-links-td a,
	body.dark table td.login-links-td a,
	body.dark table td[style*="padding:2.5px"] a,
	body.dark table td[style*="padding:2.5px 0"] a,
	body.dark table td[style*="padding:2.5px 0 6px"] a,
	body.dark .login-button-container + tr td a,
	body.dark table tr:nth-child(2) td a,
	body.dark table:first-of-type tr:nth-child(2) td a,
	body.dark .login-links-row a,
	body.dark .login-links-row span:not([style*="color:#b3b3b3"]),
	body.dark table tr.login-links-row td a,
	body.dark table tr.login-links-row td span:not([style*="color:#b3b3b3"]),
	body.dark table tr[style*="background-color:#f6f6f6"] td a,
	body.dark table tr[style*="background-color:#f6f6f6"] td span:not([style*="color:#b3b3b3"]){
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark table tr[style*="background-color:#f6f6f6"] td div[style*="width:85%"] a{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	
	/* 로그인 버튼이 있는 td 배경 라이트모드 (회색톤) - inc/login.php와 동일하게 */
	table td.login-button-container{
		background: #f6f6f6 !important;
	}

	/* 로그인 버튼이 있는 td 배경 다크모드 (검정톤) - inc/login.php와 동일하게 */
	body.dark table td.login-button-container{
		background: var(--dark-bg-tertiary) !important;
	}

	/* ───────── CLS 방지: 높이 예약 ───────── */
	/* 실시간/오늘의 베스트 컨테이너 */
	.main_left.best_list{
		min-height:252px;
	}
	/* 서브 배너 자리 확보 (JS 주입 CSS 전) — [2026-08-11] 플로팅 모듈 문법으로 통일(모듈 사이 간격=바탕 투명) */
	#right_mainSub_banner_container{
		margin-top:15px;
		width:100%;
		min-width:0;
		height:280px;
		box-sizing:border-box;
		border:none;
		overflow:hidden;
		border-radius:12px;
		box-shadow:0 1px 3px rgba(20,10,5,.08),0 4px 14px rgba(20,10,5,.06);
		text-align:center;
		background-color:var(--light-bg-primary,#fff);
		display:flex;
		align-items:center;
		justify-content:center;
	}
	body.dark #right_mainSub_banner_container{
		background-color:var(--dark-bg-secondary,#232323);
		box-shadow:none;
	}
	#right_mainSub_banner_container a{display:inline-block;line-height:0;}
	#right_mainSub_banner_container img{display:inline-block;width:auto;height:auto;max-width:100%;max-height:280px;margin:0;border-radius:5px;}
	/* 인기 검색어 리스트 자리 확보 */
	.pk-body{
		min-height:230px;
		box-sizing:border-box;
	}

	/* 다크모드 border 대응 - 로그인 박스 테이블 및 실시간베스트 테이블 */
	body.dark .mECenter1 > form > table,
	body.dark .mECenter1 > table,
	body.dark #main_right_login_box table,
	body.dark table[style*="border:0.1px solid #d4d4d4"],
	body.dark table[style*="border: 0.1px solid #d4d4d4"]{
		border-color: var(--dark-border-secondary) !important;
		box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
	}
	body.dark .login-button-container[style*="border-bottom"]{
		border-bottom-color: var(--dark-border-secondary) !important;
	}
	body.dark .login-button a[style*="border"],
	body.dark .login-button[style*="border"]{
		border-color: var(--dark-border-secondary) !important;
	}
	/* 2026-09-19 사장님 "다크에서 로그인 버튼이 너무 흐림" — css/member.css 의 베이지 오버레이(라이트용 그라데이션을 다크에 그대로) 대신
	   사이트 다크 버튼 면(--dark-bg-button) + 「로그인」 글자는 nara 노랑 강조. 로고는 다크 로고(글로우) 그대로 */
	/* 2026-09-19 사장님 선택 1안 「노랑 면 + 잉크 로고」: 다크 주 버튼 문법(nara 노랑 면 + 진한 잉크). 로고는 라이트 원본을 잉크색 실루엣으로(filter) */
	body.dark .hover_area .login-overlay{ background: var(--dark-color-primary, #F2C25E) !important; }
	body.dark .hover_area:hover .login-overlay{ background: var(--dark-color-primary-hover, #E6B24A) !important; }
	body.dark .hover_area .login_overlay_text{ color: var(--dark-rank-number-text, #1B1310) !important; font-weight: 800 !important; }
	html.dark .hover_area .logo img, body.dark .hover_area .logo img{ content: url('/img/logo/logo.png?v=261023'); filter: brightness(0) invert(6%) sepia(20%) saturate(800%) hue-rotate(340deg); }
	body.dark .login-button[style*="border"]{ border-color: var(--dark-color-primary, #F2C25E) !important; }
	body.dark .login-button[style*="border"]{ border-color: var(--dark-border-secondary, #48423D) !important; }
	body.dark table td.login-button-container[style*="border-bottom"]{ border-bottom: 0 !important; }   /* 회원가입 줄이 빠지면 버튼 칸이 마지막 — 밑선 없이 베스트 탭으로 */

/* ── main/main_right.php (옛 671줄) ── */
.best_list ul{display:none;} .best_list ul.best_list_1day{display:block;}

/* ── main/main_right.php (옛 787줄) ── */
			/* ── 인기 검색어 컨테이너 ── */
			.pk-box{border:0.1px solid #d4d4d4;border-radius:5px;width:100%;box-sizing:border-box;margin-top:15px;overflow:hidden;}
			.pk-hd{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--light-bg-primary,#fff);border-bottom:1px solid #e5e5e5;}   /* [2026-08-11] 모듈 안 회색 띠 제거 — 흰 면 + 구분선만 */
			.pk-hd-left{font-weight:600;font-size:13.5px;color:#101010;}
			.pk-hd-left i{color:var(--color-brand, #d84841);margin-right:5px;}
			.pk-hd-right{display:flex;align-items:center;gap:8px;}
			.pk-hd-right .pk-time{font-size:11px;color:#999;}
			.pk-hd-right .pk-more{font-size:11px;color:#666;text-decoration:none;}
			.pk-hd-right .pk-more:hover{color:var(--color-hover);}
			.pk-body{padding:4px 0;background:var(--light-bg-primary,#fff);min-height:230px;box-sizing:border-box;}   /* [2026-08-11] #f2f6fc 회색 띠 → 흰 면 */
			/* ── 2열 레이아웃 ── */
			.pk-cols{display:flex;padding:0 8px;gap:4px;list-style:none;margin:0;}
			.pk-col{flex:1;min-width:0;}
			/* ── 개별 항목 ── */
			.pk-item{display:flex;align-items:center;gap:5px;padding:4px 4px;text-decoration:none;border-radius:4px;transition:background .15s;}
			.pk-item:hover{background:rgba(0,0,0,.04);text-decoration:none;}
			.pk-rank{flex:0 0 18px;text-align:center;font-weight:700;font-size:13px;color:#999;}
			.pk-rank.top3{color:var(--color-brand, #d84841);}
			.pk-kw{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2f2f2f;}
			.pk-item:hover .pk-kw{color:var(--color-hover);}
			/* ── 변동 표시 ── */
			.pk-chg{flex:0 0 30px;text-align:right;font-size:10px;font-weight:600;line-height:1;}
			.pk-chg.up{color:var(--color-brand, #d84841);}
			.pk-chg.down{color:var(--color-primary-hover, #2b5f9e);}
			.pk-chg.same{color:#999;font-size:15px;font-weight:800;}
			.pk-chg.isnew{color:var(--color-brand, #d84841);font-size:10px;font-weight:700;background:none;border:none;padding:0;border-radius:0;}
			/* ── 다크모드 ── */
			body.dark .pk-box{border-color:var(--dark-border-secondary);box-shadow:0 2px 8px rgba(0,0,0,0.3);}
			body.dark .pk-hd{background:var(--dark-bg-tertiary);border-color:var(--dark-border-secondary);}
			body.dark .pk-hd-left{color:var(--dark-text-primary, #ECECEC);}
			body.dark .pk-hd-right .pk-time{color:var(--dark-text-muted, #8C8C8C);}
			body.dark .pk-hd-right .pk-more{color:var(--dark-text-secondary, #ACACAC);}
			body.dark .pk-hd-right .pk-more:hover{color:var(--color-hover);}
			body.dark .pk-body{background:var(--dark-bg-tertiary);}
			body.dark .pk-kw{color:var(--dark-text-primary, #ECECEC);}
			body.dark .pk-item:hover .pk-kw{color:var(--color-hover);}
			body.dark .pk-item:hover{background:rgba(255,255,255,.05);}
			body.dark .pk-rank{color:var(--dark-text-muted, #8C8C8C);}
			body.dark .pk-rank.top3{color:var(--dark-ranking-color, #FF9F1C);}
			body.dark .pk-chg.same{color:var(--dark-text-muted, #8C8C8C);}
		

/* ── main/inc_main_sections.php (옛 265줄) ── */
/* ── 메인 섹션 스택 (라이트 기본 + 다크 폴백 짝) ── */
.ans-wrap{margin-top:12px;}
/* 배너 슬롯이 접힌 날(등록 배너·광고 0) = 본문 첫 요소가 전단지 → 위 여백 제거해 사이드바와 윗단 일치 */
.mainPage_banner_wrap.is-collapsed ~ .ans-wrap{margin-top:0;}

/* 동네 실종 전단지 */
.ans-sos{background:#fff3f2;border:1.5px solid #f0c3be;border-radius:13px;padding:10px 14px 12px;margin-bottom:14px;overflow:hidden;}
.ans-sos[hidden]{display:none !important;}   /* 🔴 hidden 가드 짝 */
.ans-sos .fh{display:flex;align-items:baseline;gap:9px;margin-bottom:9px;}
.ans-sos .fh b{font-size:13.5px;font-weight:900;color:var(--color-brown,#D84841);}
.ans-sos .fh small{font-size:11px;color:var(--color-text-emphasis,#D8432A);opacity:.8;font-weight:700;}   /* [2026-09-12] 하드코딩 #c98a84 → 강조 글자 토큰(다크 nara 노랑) */
.ans-sos .fh .fh-t{text-decoration:none;}   /* 제목 = 전체보기 링크 (전체보기 버튼 제거, 2026-08-11) */
/* '전단지 무료' 배지 (2026-09-05 시안 ②) — 제목 옆, 주색 바탕·흰 글씨. 누르면 실종 등록(전단지 모드)으로 */
.ans-sos .fh .an-free{flex:none;align-self:center;display:inline-block;padding:2px 7px;border-radius:4px;background:var(--color-brown,#D84841);color:#fff;font-size:11px;font-weight:800;line-height:1.35;text-decoration:none;white-space:nowrap;letter-spacing:-.01em;}
.ans-sos .fh .an-free:hover{filter:brightness(1.08);}
/* 4열(2026-08-11 "2개씩은 공간이 비어서" — 1페이지 = 4장). 자투리 페이지도 칸 폭 유지(빈 칸 허용) */
.ans-sos .fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
/* 전단지 가로 페이징 (2장 = 1페이지) */
.ans-sosvp .ans-clip{border-radius:11px;}
.ans-sosvp .ans-track{gap:10px;}
.ans-sosvp .ans-nav{width:32px;height:32px;font-size:16px;}
.ans-sosvp .ans-nav--next{right:-14px;}
.ans-sosvp .ans-nav--prev{left:-14px;}
.ans-fcard{display:flex;gap:11px;align-items:center;background:var(--color-bg-white,#fff);border:1px solid #f4dbd7;border-radius:11px;padding:9px 12px;text-decoration:none;color:inherit;min-width:0;}
.ans-fcard .ph{width:62px;height:62px;border-radius:9px;flex:none;background-size:cover;background-position:center;background-color:var(--color-bg-light,#eee);display:flex;align-items:center;justify-content:center;font-size:24px;}
body.dark .ans-fcard .ph{background-color:var(--dark-bg-tertiary,#2a2a2a);}
.ans-fcard .bd2{min-width:0;flex:1;}
.ans-fcard .l1{display:flex;align-items:baseline;gap:6px;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;color:var(--color-text-primary,#222);}
.ans-fcard .l1 small{font-size:10.5px;color:#9a8a87;font-weight:400;flex:none;}
.ans-fcard .l1 .t{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}   /* 2026-10-25 메인실종글씨.png — 글자가 flex 상자에 바로 있으면 «…» 가 안 붙고 반쯤 잘린다 → 제목만 칸으로 감싸 말줄임 */
.ans-fcard .l2{margin-top:2px;font-size:11.5px;color:#4a3f3d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.ans-fcard .l2 i{font-style:normal;color:var(--color-brown,#D84841);font-weight:700;}
.ans-fcard .l3{margin-top:2px;font-size:11px;color:#8a7a77;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.ans-fcard .go{flex:none;font-size:16px;font-weight:800;color:var(--color-text-emphasis,#D8432A);opacity:.7;}   /* [2026-09-12] 하드코딩 #d8a49e → 토큰 */
body.dark .ans-sos{background:var(--dark-bg-tertiary,#2a2a2a);border-color:var(--dark-border-secondary,#3a3a3a);}
body.dark .ans-fcard{background:var(--dark-bg-secondary,#1e1e1e);border-color:var(--dark-border-secondary,#3a3a3a);}
body.dark .ans-fcard .l1{color:var(--dark-text-primary,#eee);}
body.dark .ans-fcard .l2{color:var(--dark-text-secondary,#bbb);}

/* ── 섹션 = 2단(한 줄에 2개) × 타임포럼 묶음(폴더 탭 + 진한 상단 라인 + 박스) — 확정(B안) ──
   행 간격은 탭 높이(31px)만큼 여유. 하단 = 박스 끝이라 sticky 정렬에도 부합 */
/* 모듈식(시안 main-module.html C안 확정 2026-08-11): 페이지 바탕(쿨 그레이)은 전역 담당으로 승격
   — inc/header.php body = var(--light-bg-page,#F6F8FA) · 관리자 '페이지 바탕(플로팅)' 토큰 (2026-08-11) */
#ansStack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px 24px;align-items:start;margin-top:52px;}
.ans-sec{position:relative;padding:0;border:none;min-width:0;}
/* 폴더 탭 라벨 (time.png 문법) */
/* 폴더 탭 — 박스와 한 면으로 이어짐: 3px 내려 코랄 라인 위에 겹침(탭 아래 구간은 라인이 끊긴 것처럼 보임) */
.ans-tab{position:absolute;bottom:100%;left:0;background:var(--color-bg-white,#fff);border:none;box-shadow:0 -2px 6px rgba(20,10,5,.06);padding:6px 20px 10px;font-size:13.5px;font-weight:700;line-height:1.35;color:var(--color-text-primary,#444);border-radius:8px 8px 0 0;z-index:2;white-space:nowrap;text-decoration:none;transform:translateY(3px);}
.ans-tab:hover{color:var(--color-hover);}
/* 실종 탭 빨강·🚨 제거(2026-08-11 사용자) — 다른 탭과 동일한 기본 글자색 */
body.dark .ans-tab{background:var(--dark-bg-secondary,#1e1e1e);box-shadow:none;color:var(--dark-text-primary,#eee);}

/* 가로 페이징 뷰포트 (유튜브식) — 4장 = 1페이지, ‹ › 로 넘김.
   클리핑은 안쪽 .ans-clip 이 담당 — 화살표는 유튜브처럼 가장자리에 반쯤 걸침 */
.ans-gridvp{position:relative;}
.ans-clip{overflow:hidden;border-radius:12px;}
/* 섹션 박스 = 흰 모듈(라운드+그림자, 안쪽 여백 12) + 상단 3px 코랄 톤다운 챙.
   탭이 붙는 왼쪽 위 모서리만 각지게(폴더 몸통) — 라운드 곡선의 빈 틈 제거.
   색은 주계열 토큰의 파생(color-mix 미지원 브라우저는 라인 없이 자연 강등). 🔴다크는 코랄 금지 → 노랑 계열 톤다운 */
#ansStack .ans-clip{border:none;border-radius:0 12px 12px 12px;background:var(--color-bg-white,#fff);box-shadow:0 1px 3px rgba(20,10,5,.08),0 4px 14px rgba(20,10,5,.06);border-top:3px solid color-mix(in srgb, var(--state-ongoing,#EE6A48) 62%, #fff);}
/* 🔴안쪽 여백은 클리퍼가 아니라 페이지에 — overflow:hidden 은 패딩 영역까지 보여줘서,
   클리퍼에 padding 을 주면 오른쪽 12px 틈으로 다음 페이지 카드가 새어 보인다 */
#ansStack .ans-page{padding:12px;}
body.dark #ansStack .ans-clip{background:var(--dark-bg-secondary,#1e1e1e);box-shadow:none;border-top-color:color-mix(in srgb, var(--dark-ranking-color,#FF9F1C) 55%, var(--dark-bg-secondary,#1e1e1e));}
.ans-track{display:flex;gap:2px;transition:transform .35s ease;}
.ans-page{flex:0 0 100%;min-width:100%;}
.ans-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.97);border:1px solid var(--color-border-light,#eee);box-shadow:0 2px 10px rgba(0,0,0,.22);font-size:20px;font-weight:700;color:#333;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;}
.ans-nav--next{right:-20px;}
.ans-nav--prev{left:-20px;}
/* 2단 섹션 화살표 — 사이 간격(24px)에 10px 씩만 걸침: 이웃 섹션 ‹ › 끼리 4px 여유(겹침 방지) */
#ansStack .ans-nav{width:28px;height:28px;font-size:15px;}
#ansStack .ans-nav--next{right:-10px;}
#ansStack .ans-nav--prev{left:-10px;}
.ans-nav:hover{background:#fff;}
/* 유튜브식 호버 노출 — 평소엔 숨기고 해당 섹션(전단지 포함)에 마우스 올렸을 때만. 키보드 탐색은 focus 로 */
.ans-nav{opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;}
.ans-gridvp:hover .ans-nav,.ans-gridvp:focus-within .ans-nav,.ans-nav:focus-visible{opacity:1;visibility:visible;}
.ans-nav[hidden]{display:none !important;}   /* 🔴 hidden 가드 짝 */
body.dark .ans-nav{background:rgba(40,40,40,.92);color:var(--dark-text-primary,#eee);}

/* 모듈 안 2×2 카드 — 8px 간격 + 라운드 (담긴 느낌, 시안 C안. 보배식 1px 밀착선은 폐기) */
.ans-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;;align-content:start;}   /* 2026-09-11 마지막 장이 2장뿐이면 행이 페이지 높이(433)까지 늘어나 카드가 409px 로 찢어졌다(사장님 실종찾기이상.png) → 행은 내용 높이만 */
/* 🔴로딩 중 회색 플레이스홀더 제거(2026-08-11 지적 "통째로 1초 회색") — 카드·사진칸 배경 없음:
   사진 뜨기 전엔 흰 모듈 면 그대로(캡션 텍스트만), 사진 없는 카드는 --noimg 가 자기 배경을 가짐 */
.ans-card{position:relative;text-decoration:none;color:inherit;display:block;min-width:0;background:transparent;border:none;border-radius:9px;overflow:hidden;box-sizing:border-box;}
.ans-im{display:block;aspect-ratio:1/0.9;background-size:cover;background-position:center;transition:opacity .2s ease;}   /* 2×2 비율 — 카드 폭 238은 기존과 동일. transition = 사진 승격 페이드인 */
.ans-im[data-logo]{display:flex;align-items:center;justify-content:center;background:var(--color-bg-light,#f4f5f7);padding-bottom:56px;box-sizing:border-box;}   /* 캡션 높이만큼 위로 — 흰 모듈 면에 묻히지 않게 옅은 회색 */
.ans-im[data-logo] i{font-style:normal;font-size:42px;}
.ans-defimg{width:100%;height:100%;object-fit:contain;opacity:1;/* [2026-08-28] 자리표시 그림을 중립 회색 PNG 로 바꾸며 투명 처리 제거 — 40% 투명 주색 그림이 화면을 뿌옇게 만들던 원인 */transition:opacity .2s;}   /* 2026-08-27: 56%/120px 였더니 전역 여백(부모 폭 % 기준)에 먹혀 31px 로 보임 → 박스를 채우고 contain(여백은 header.php 전역 규칙 6%/12%) */
/* 🔴 프로브 대기(--pend) 중엔 기본이미지(개 그림) 숨김(2026-08-20 사용자 확정) — 종전엔 사진 카드도
   일단 개그림으로 떴다가 프로브 성공 후 사진으로 '변신'했다(성공 URL 기억은 localStorage 라 캐시 삭제
   시 매번 재발 = "어떤 카드는 깜빡"의 정체). 이제 성공=빈 면→사진 페이드 / 실패=빈 면→개그림 등장
   (pend 해제 시 opacity 복귀) — 어느 쪽도 '그림이 다른 그림으로 바뀌는' 장면이 없다. noimg 카드는
   pend 가 없어 종전대로 즉시 개그림(변화 0). */
.ans-card--pend .ans-defimg{opacity:0;}
/* 2026-09-19 사진 카드 = 파싱 즉시 사진(.ans-photo, 개 자리표시 위에 absolute). 늦게 오면 .is-late 로 0.3초 페이드, 캐시면 즉시 */
.ans-im--pre{position:relative;background:var(--color-bg-light,#f4f5f7);}
body.dark .ans-im--pre{background:var(--dark-bg-secondary,#1e1e1e);}
.ans-im--pre .ans-defimg{position:absolute;inset:0;width:100%;height:100%;padding:6% 12% 56px;box-sizing:border-box;object-fit:contain;}   /* 아래 56px = 캡션 띠 자리(기본이미지 카드와 같은 위치) → 실패로 사진이 걷혀도 개 그림이 안 움직인다 */
.ans-im--pre .ans-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;}
.ans-im--pre .ans-photo.is-on{opacity:1;}
.ans-im--pre .ans-photo.is-late{transition:opacity .3s ease;}
/* [2026-09-12] 캡션 띠 통일(사장님 확정 ④): 사진 없는 카드·프로브 대기(--pend) 카드도 사진 카드와 같은
   어두운 캡션 띠(.ans-bd 기본)+흰 제목. 종전엔 민무늬(검정 제목+파랑 상호) vs 사진(흰 제목+노랑 상호)이라
   "상호 색이 뭘 뜻하냐" 혼선. 이제 모든 카드 캡션이 한 모습 — 프로브 성공 시 캡션 변화 0(사진만 페이드인). */
.ans-card--noimg{background:var(--color-bg-light,#f4f5f7);}   /* 흰 모듈 면 위에서 카드 윤곽이 보이게 */
body.dark .ans-card--noimg{background:var(--dark-bg-secondary,#1e1e1e);}
body.dark .ans-im[data-logo]{background:var(--dark-bg-secondary,#1e1e1e);}
.ans-bd{position:absolute;left:0;right:0;bottom:0;padding:30px 11px 9px;background:linear-gradient(180deg,transparent,rgba(18,11,8,.66) 45%,rgba(18,11,8,.86));}
.ans-t{display:block;font-size:12.5px;font-weight:700;line-height:1.45;max-height:2.9em;overflow:hidden;word-break:break-all;color:#fff;}
.ans-pf{display:inline-block;background:var(--state-info,#2B5F9E);color:var(--state-info-text,#fff);font-size:9px;font-weight:700;border-radius:4px;padding:1px 6px;margin-right:4px;position:relative;top:-1px;} /* 미정의 --color-blue 폴백 하드코딩 → 2차(정보) 짝 토큰 */
/* 상태 뱃지 = 기존 리스트(.adoption_N/.find_N — ui.css) 문법 계승: 코랄 알약 46×18·흰 글씨, 완료=초록 */
.ans-st{display:inline-block;min-width:46px;text-align:center;height:20px;line-height:20px;padding:0 9px;box-sizing:border-box;color:#fff;font-size:13px;font-weight:700;border-radius:30px;margin-right:4px;position:relative;top:-1px;background:var(--state-ongoing,#D8432A);} /* 2026-08-29 B안: 흰 글씨 on 주색 대비 4.42:1 이라 11px 은 작은 글씨 기준 미달 → 13px/700 (큰 글씨 기준 통과). 색은 그대로 */ /* 2026-08-27 사장님 선택: 흰 글씨(굵기 600)+라이트 #E4593A·다크 #A9452E — 토큰은 css/variables.css (8/16 의 검정 글씨 대비 규칙은 사장님이 뒤집음) */
.ans-st--done{background:var(--state-done,#277A4C);color:#fff;}
.ans-st--sos{background:var(--state-ongoing,#E4593A);}
.ans-st--ok{background:var(--state-done,#277A4C);color:#fff;}   /* [2026-09-12] 메인 카드 상태 배지 글씨 = 라이트 흰색(테라코타 채움). 다크는 채움이 nara 노랑이라 흰 글씨 1.6:1 → 잉크 토큰 */
body.dark .ans-st{color:var(--state-ongoing-text,#1B1310);}
body.dark .ans-st--done,body.dark .ans-st--ok{color:var(--state-done-text,#0E1F16);}
.ans-bz{font-size:10.5px;font-weight:700;color:var(--color-text-emphasis, #D8432A);}   /* [2026-09-12] 상호 = 강조 글자 토큰(라이트 빨강 / 다크 nara 노랑). 사장님 최종 */
body.dark .ans-bz{color:var(--dark-text-emphasis,#F2C25E);}   /* [2026-09-12] 다크 = nara 노랑(사이트 전체 다크 강조 글자 규칙) */
.ans-meta{display:block;margin-top:3px;font-size:10.5px;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.dark .ans-card{background:transparent;}   /* 로딩 중 회색 블록 제거 — 라이트와 동일 원칙(2026-08-11) */
body.dark .ans-im[data-logo]{background:var(--dark-bg-tertiary,#2a2a2a);}

/* ── 1×4 썸네일 리스트 모드 (#ansStack.ans--list) — 탭·박스·페이징·마크업 동일, 카드만 행으로.
   오버레이(흰 글씨+그라데이션)를 정적 배치·어두운 글씨로 뒤집는다. id 셀렉터라 위 타일 규칙을 전부 이김 */
#ansStack.ans--list .ans-grid{grid-template-columns:minmax(0,1fr);}
#ansStack.ans--list .ans-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:13px;align-items:center;padding:10px 14px;background:var(--color-bg-white,#fff);border-right:none;border-bottom:1px solid var(--color-border-light,#f0f0f0);}
#ansStack.ans--list .ans-grid .ans-card:last-child{border-bottom:none;}
#ansStack.ans--list .ans-im{aspect-ratio:4/3;border-radius:6px;}
#ansStack.ans--list .ans-im[data-logo]{padding-bottom:0;background:var(--color-bg-light,#f4f4f4);}   /* 사진 자리 표시 — 흰 바탕에 묻히지 않게 */
body.dark #ansStack.ans--list .ans-im[data-logo]{background:var(--dark-bg-tertiary,#2a2a2a);}
#ansStack.ans--list .ans-bd{position:static;background:none;padding:0;min-width:0;}
#ansStack.ans--list .ans-t{color:var(--color-text-primary,#222);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:none;}
#ansStack.ans--list .ans-meta{color:var(--color-text-tertiary,#8a8a8a);font-size:11.5px;margin-top:6px;}
#ansStack.ans--list .ans-bz{color:var(--color-text-emphasis, #D8432A);}
body.dark #ansStack.ans--list .ans-bz{color:var(--dark-text-emphasis,#F2C25E);}
#ansStack.ans--list .ans-card--reg::after{inset:5px;}
#ansStack.ans--list .ans-card--reg .ans-im[data-logo] i.ans-regplus{font-size:30px;}
#ansStack.ans--list .ans-card--reg .ans-t{color:#6a5a56;}
body.dark #ansStack.ans--list .ans-card{background:var(--dark-bg-secondary,#1e1e1e);border-bottom-color:var(--dark-border-secondary,#333);}
body.dark #ansStack.ans--list .ans-t{color:var(--dark-text-primary,#ddd);}
body.dark #ansStack.ans--list .ans-meta{color:var(--dark-text-secondary,#999);}

/* 등록 유도 카드 (글 4건 미만 마감) */
.ans-card--reg{background:#fffbfa;}
.ans-card--reg::after{content:'';position:absolute;inset:7px;border:1.5px dashed #e0c9c6;border-radius:9px;pointer-events:none;}
.ans-card--reg .ans-im[data-logo]{background:#fffbfa;}
.ans-card--reg .ans-im[data-logo] i.ans-regplus{font-size:54px;color:#dcc9c5;opacity:1;}   /* 이모지 대신 심플한 ＋ (크게) */
body.dark .ans-card--reg .ans-im[data-logo] i.ans-regplus{color:var(--dark-text-secondary,#ADA59D);}
body.dark .ans-fcard .l3{color:var(--dark-text-secondary,#ADA59D);}
body.dark .ans-sos .fh b{color:var(--dark-text-emphasis,#F0A088);}
body.dark .ans-card--reg .ans-meta{color:var(--dark-text-emphasis,#F0A088);}   /* 2026-09-11 #2A2623 위 D46A50 4.3:1 */
.ans-card--reg .ans-bd{background:none;}
.ans-card--reg .ans-t{color:#6a5a56;}
.ans-card--reg .ans-meta{color:var(--color-brown,#D84841);font-weight:700;}
body.dark .ans-card--reg{background:var(--dark-bg-tertiary,#2a2a2a);}
body.dark .ans-card--reg .ans-t{color:var(--dark-text-secondary,#bbb);}
/* 빈 반쪽 채움(시안 E안 확정) — 마지막 등록 유도 카드가 왼쪽 칸(홀수 위치)이면 가로 배너형으로 늘림 */
.ans-grid .ans-card--reg:nth-child(odd):last-child{grid-column:1/-1;}
.ans-grid .ans-card--reg:nth-child(odd):last-child .ans-im{aspect-ratio:auto;height:96px;padding-bottom:0;}
.ans-grid .ans-card--reg:nth-child(odd):last-child .ans-im i.ans-regplus{font-size:38px;}
.ans-grid .ans-card--reg:nth-child(odd):last-child .ans-bd{position:static;padding:0 0 12px;text-align:center;background:none;}