/* an_css_concat pc — 2026-10-23T09:11:27+09:00 — 원본: /css/inl/img_fallback.css, /css/inl/pc_head.css, /css/variables.css, /css/font.css, /css/user_fonts.css, /css/ui.css, /css/common.css, /css/layout.css, /css/search.css, /css/community.css, /css/comment.css, /css/admin_quick_suspend.css, /css/member.css, /css/animal.css, /css/mypage.css, /css/form-card.css, /css/register.css, /css/editor_collage_view.css, /css/etc.css, /css/search_list_row.css, /css/check_and_radio_custom.css, /css/custom_input.css, /css/ad_banner.css */

/* ── /css/inl/img_fallback.css ── */
/* inc/default_img_onerror.php 의 <style> — 헤더(PC·모바일)를 쓰는 화면은 묶음으로 싣는다(2026-10-23). 🔴 기본 그림 png 를 바꾸면 이 파일의 data: 그림도 다시 만들 것(그 파일 <style> 이 원본) */
/* 본문 깨진 이미지 대체 박스 (라이트/다크) — animal_detail.php 의 .noimg-ph 와 동일 계열 */
/* 2026-09-11 A안(사장님 시안 md/mockup/noimg_final_260911): 회색 상자 + 깨진 그림 아이콘 + 「이미지를 불러올 수 없습니다」.
   🔴 모양은 한 가지 — 아이콘 + 한 줄 글자만큼의 알약(사장님: 320×120 상자도 "길고 비율이 안 맞아 안 녹아든다" → 글 흐름에 붙는 알약). 본문·댓글·베스트 댓글·분양 상세·에디터 공통 */
.noimg-ph{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:auto;min-width:150px;max-width:100%;height:132px;padding:0 20px;margin:0;background:var(--color-bg-page,#F2F2F3);color:#8F8A85;font-size:12.5px;line-height:16px;white-space:nowrap;border-radius:8px;box-sizing:border-box;vertical-align:middle;}   /* 2026-09-11 사장님: 2줄(아이콘 가운데 위 + 글자), 조금 더 정사각(≈175×132) */
.noimg-ph::before{content:"";width:30px;height:30px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F8A85' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='16' cy='9' r='1.6'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E") center/contain no-repeat;}
body.dark .noimg-ph{background:#2B2724;color:#9A948E;box-shadow:inset 0 0 0 1px #3A3531;}   /* 2026-09-14 사장님 "다크에서 이미지 못 불러온 영역이 안 보인다": --dark-bg-secondary 가 본문 바탕(#211E1B)과 같아 사라짐 → 한 단계 밝은 바탕 + 안쪽 1px 선(크기 안 바뀜) */
.noimg-ph{cursor:default;-webkit-user-select:none;user-select:none;}
img[data-an-ph]:not(.an-img-ok){opacity:0;}
/* 2026-09-17 사장님 "첫 접속 시 가운데가 1초 깜빡": 목록·갤러리 썸네일이 img.animalnara.com 에 요청 → 403/404 → onerror 로 기본 그림으로 바뀌는 순간이 화면 전체에서 한꺼번에 보였다(첫 방문은 실패 기억이 없어 매번).
   → 썸네일 img 뒤에 기본 그림을 배경으로 미리 깔아 둔다: 로딩 중·실패 모두 같은 그림이라 바뀌는 게 안 보이고, 성공한 사진만 위에 얹힌다(.an-img-ok 가 배경 제거). */
img[onerror*='showDefaultImg']:not(.an-img-ok){background:url('data:image/png;base64,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') center/contain no-repeat;background-origin:content-box;background-clip:content-box;padding:6% 12%;box-sizing:border-box;color:transparent;}   /* padding 6%/12% = inc/header.php 기본 그림 규칙과 같은 크기 → 실패로 src 가 바뀌어도 그림 크기가 그대로(줄어드는 순간 없음) */
body.dark img[onerror*='showDefaultImg']:not(.an-img-ok){background-image:url('data:image/png;base64,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');}
/* 42px 짜리(오른쪽 「잃어버린 가족」 .anf-ph 등 100px 미만 칸)는 개만 큰 _sm 판을 배경으로 — 실패 뒤 .an-empty-sm 스왑과 같은 그림이라 바뀌는 게 안 보인다 */
.anf-ph img[onerror*='showDefaultImg']:not(.an-img-ok), .cmpop-thumb img[onerror*='showDefaultImg']:not(.an-img-ok){background-image:url('data:image/png;base64,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');padding:8%;}   /* .an-empty-sm 규칙(padding 8%)과 같은 크기 */
body.dark .anf-ph img[onerror*='showDefaultImg']:not(.an-img-ok), body.dark .cmpop-thumb img[onerror*='showDefaultImg']:not(.an-img-ok){background-image:url('data:image/png;base64,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');}   /* 2026-09-14 로드 판정 전 본문·댓글 사진은 투명 — 실패 시 브라우저 엑스박스가 먼저 그려지던 것 차단 */   /* 2026-09-14 사장님: 안내 글자 위에서 입력 커서(I) 대신 기본 화살표 */
/* 2026-09-11 크기를 모르는(width/height 없는) 본문·댓글 사진은 알약 높이(132px)만큼 먼저 자리를 잡는다 — 못 불러와 알약으로 바뀔 때 아래가 안 밀린다. 크기를 아는 사진은 img_dims 가 width/height 로 정확히 예약 */
.board_view_container img:not([width]):not(.profile_img), #comment_zone .comment_container img:not([width]), #comment_zone_best .comment_container img:not([width]){min-height:132px;}


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

/* ── inc/header.php (옛 174줄) ── */
	/* 레이아웃 시프트 방지: @import 체인보다 먼저 적용되어야 하는 critical CSS */
	*,*::before,*::after{box-sizing:border-box;}
	html{overflow-y:scroll;scroll-behavior:auto;}
	body{margin:0;padding:0;min-width:var(--site-w,1310px);}   /* 구 하드코딩 1336px → 사이트 폭 토큰 연동(2026-08-11). 🔴완전 제거 금지 — 없으면 좁은 창에서 풀블리드 바(GNB·로고 밴드)가 콘텐츠 폭보다 좁아져 우측이 잘린다(실측) */
	/* (2026-08-25) html.font-wait body{visibility:hidden} 삭제 — 글꼴 게이트 폐지, 위 인라인 스크립트 주석 참조 */
	::-webkit-scrollbar{width:10px;}
	::-webkit-scrollbar-thumb{background-color:#666;border-radius:4px;}
	

/* ── inc/header.php (옛 266줄) ── */
        /* 다크 모드 스타일(색상 깜빡임 이슈로 다크모드 색상 가장 상단에서 적용) */
        /* light모드 - 기본 body (먼저 선언)
           [2026-08-11] 플로팅 체계: body = 페이지 바탕 전용 토큰(bg_page, 쿨 그레이).
           흰 면(카드·모달 등)은 계속 --light-bg-primary — 두 토큰이 분리돼야 모듈이 떠 보인다.
           관리자: 사이트관리 → 색상 설정 → '페이지 바탕(플로팅)' */
		body {
			background: var(--light-bg-page, #F6F8FA) !important;
			color: var(--light-text-primary, #000);
		}

		/* dark모드 - 기본 body (html.dark, body.dark 둘 다 지원) — 다크는 그림자 대신 면 밝기로 띄우므로 바탕은 기존과 동일 출발 */
		html.dark body,
		body.dark {
			background: var(--dark-bg-page, #141414) !important;
			color: var(--dark-text-primary, #ECECEC);
		}

		/* 로고 이미지 - 라이트모드 기본 */
		.logo img {
			content: url('/img/logo/logo.png?v=261023');
		}

		/* 로고 이미지 - 다크모드 (html.dark 우선 적용) */
		html.dark .logo img,
		body.dark .logo img {
			content: url('/img/logo/logo_dark.png?v=261023');
		}

		/* 🔴 .gRight/.bg3 opacity:0 + fadeIn 폐지(2026-08-20, 사용자 확정) — '초기 깜빡임 방지' 명목이었지만
		   실제로는 빠른 로드에서 우측 랭킹(tab_right)·게시판 리스트가 opacity 0 으로 시작해 페이드로 '늦게
		   나타나는' 깜빡임 그 자체였다. 원래 막으려던 스타일 전 노출은 서버 렌더+인라인 CSS 로 이미 해소. */
		

/*
//empty image 시 height가 100%으로 안차서 주석처리
		body .empty_image,
		body .imagebox-wrap div {
			background-color: #fff;
		}

		body.dark .empty_image,
		body.dark .imagebox-wrap div {
			background-color: var(--dark-bg-primary, #141414);
		}
*/

		
		/* 부모 컨테이너 통일: empty_image(span, flex) 와 imagebox-rotate(div, block) 를 동일하게(block, 100%) →
		   flex-shrink 로 인한 img 크기 차이 제거 → 없음/못찾음 no_img 크기 완전 통일 */
		body .empty_image,
		body .imagebox-rotate:has(img[src*="loading_empty"]) {
			display: block !important;
			width: 100% !important;
			height: 100% !important;
			padding: 0 !important;
		}
		/* list empty 이미지 (이미지 없음 + 못찾음 둘 다 no_img). img 가 컨테이너를 채우고 object-position:center 로 이미지만 중앙 →
		   absolute/transform 안 써서 hover 시 부모 transform(translateY 등)과 무관하게 항상 중앙 고정. 다크/라이트 자동 */
		body .empty_image img,
		body .empty_image img:hover,
		body .imagebox-rotate img[src*="loading_empty"],
		body .imagebox-rotate img[src*="loading_empty"]:hover {
			content: url('data:image/png;base64,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');
			position: static !important;
			width: 100% !important;
			height: 100% !important;
			max-width: 100% !important;
			max-height: 100% !important;
			object-fit: contain !important;   /* 2026-08-26: 기본이미지 크기 통일 규칙과 맞춤(예전 cover) */
			object-position: center center !important;   /* 이미지를 요소 안 정중앙에 */
			padding: 6% 12% !important;   /* 2026-08-27: 통일 여백(% 는 부모 폭 기준) — 12px 20% 는 60% 크기라 '너무 작다' → 약 76% */
			box-sizing: border-box !important;
			margin: 0 !important;
			transform: none !important;                   /* hover 부모 transform 상속/충돌 차단 */
			transition: none !important;
			animation: none !important;
			display: block !important;
		}

		body.dark .empty_image img,
		body.dark .imagebox-rotate img[src*="loading_empty"] {
			content: url('data:image/png;base64,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');
		}

		/* ── thumb.php 가 내려준 '기본 이미지' 도 모드 전환 즉시 반영 (2026-07-31) ──
		   thumb.php:27 이 `$_COOKIE['mode']` 로 red/yellow 를 골라 **응답 본문에 구워서** 200 으로 준다.
		   그래서 ① onerror 가 안 뜨고(=showDefaultImg 미동작) ② src 는 thumb.php 라 위의
		   `[src*="loading_empty"]` 규칙에도 안 걸리고 ③ 토글해도 이미 받은 이미지라 재요청이 없어
		   **색이 그대로 남았다**(프로필 empty · 실시간 베스트 empty 가 다크에서 빨강).
		   → 아래 JS 가 그런 img 에 `.is-thumb-default` 를 달아두면, 이후 전환은 CSS 가 즉시 처리한다. */
		/* ═══ 기본이미지 크기 통일 (2026-08-26, 사장님 지적 결과.png) ═══════════════════════════════
		   같은 개그림이 **세 경로**로 들어온다: ①이미지 없음(.empty_image 의 <img src=default>) ②깨진 이미지를 onerror(showDefaultImg)가
		   src=default 로 교체 ③원본이 없어 thumb.php 가 개그림을 **200 으로** 내려준 것(src 는 thumb.php 그대로 → 위 JS 가 .is-thumb-default 태깅).
		   ①②는 src 기준 규칙에 걸려 작게(contain) 나오는데 ③은 걸리는 규칙이 없어 인라인 cover 로 **꽉 차게** 나왔다(커뮤니티 카드 셋 중 하나만 큼).
		   → 어느 경로든 한 규칙: 박스 안 contain + 여백(상하 12px·좌우 20%) 으로 통일. 컨테이너 크기(160px 카드·120px 리스트·프로필)와 무관하게 같은 비율. */
		img.is-thumb-default,
		img[src*="red_default_image"],
		img[src*="yellow_default_image"],
		.empty_image img {
			object-fit: contain !important;
			object-position: center center !important;
			padding: 6% 12% !important;   /* 2026-08-27 사장님 지적 "너무 작다": 12px 20% → 6% 12%(박스의 약 76%). 🔴 % 는 **부모 폭** 기준이라 img 가 부모보다 작게 놓인 곳(메인 .ans-defimg 등)은 img 를 100%+contain 으로 채워야 한다 */
			box-sizing: border-box !important;
			background: transparent !important;
		}
		/* 🔴 [2026-08-29] 첫 로드에선 스왑하지 않는다 — thumb.php 는 mode 쿠키로 이미 맞는 색(red/yellow)을 내려주므로
		   로드 직후 content:url() 로 같은 그림을 다시 씌우면 "최초 1회 깜빡"(상세 13162 대표사진)만 생겼다.
		   모드를 **토글한 뒤**(html.an-mode-toggled, inc/gnb.php)에만 색 스왑이 필요하다. */
		html.an-mode-toggled body:not(.dark) img.is-thumb-default {
			content: url('data:image/png;base64,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');
		}
		html.an-mode-toggled body.dark img.is-thumb-default {
			content: url('data:image/png;base64,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');
		}

		/* ── 기본 이미지가 src 에 '박혀 버린' 경우까지 전부 커버 (2026-07-31) ──
		   showDefaultImg()(onerror) 와 updateFallbackImages()(모드 토글) 가
		   `img.src = red/yellow` 로 **그 시점 모드를 src 에 구워** 넣는다.
		   한 번 src 가 red_default_image 로 바뀌면
		     · `.empty_image` 안이 아니고  · src 에 thumb.php 도 없어서
		   기존 스왑 규칙 어디에도 안 걸려 **영영 빨강으로 굳었다**(실측: content=normal).
		   → src 자체를 기준으로 스왑하면 어느 경로로 들어왔든 즉시 전환된다. */
		body.dark img[src*="red_default_image"],
		body.dark .flex-container img[src*="red_default_image"] {   /* .flex-container 는 search_list_row.css 에서 이관(2026-08-28, ?v= 연동) */
			content: url('data:image/png;base64,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') !important;
		}
		body:not(.dark) img[src*="yellow_default_image"] {
			content: url('data:image/png;base64,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');
		}
		
		
		/* 🔴 [2026-08-29] 기본이미지 자체를 CSS 에 심음(data URI) — 첫 방문엔 PNG 가 렌더 차단 CSS/JS 뒤로 밀려 첫 페인트 뒤에 도착해
		   "빈 칸 → 개그림" 이 최초 1회 보였다(사장님 지적). src 가 기본이미지인 모든 <img> 는 네트워크와 무관하게 첫 페인트에 그려진다.
		   아래 다크/태깅 스왑 규칙들도 같은 data URI 를 써서 재요청·재디코드 깜빡임이 없다. 생성 = include/asset_version.php an_default_img_data() */
		img[src*="red_default_image"] { content: url('data:image/png;base64,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'); }
		img[src*="yellow_default_image"] { content: url('data:image/png;base64,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'); }

		/* ═══ [2026-09-12 사장님 "메인 empty 너무 작다"] 작은 칸(100px 미만) 기본이미지 = 개만 크게 그린 _sm 판(글자 없음) ═══
		   200×150 원판은 개 55px + "empty" 글자라 62px(메인 동네 실종 카드 .ans-fcard .ph)·46px(최근 본 글 .anrv__th)·90px(상세 추천 .detreco-th)
		   칸에선 개가 15~25px 로 보였다. 인덱싱(2026-09-12 실측): 메인 62×62 ×10 · 상세 추천 90×80 ×3 · 최근 본 글 46×46 / 검색 카드 140+·메인 카드 223 은 원판 유지.
		   크기 아는 칸은 직접 지정 + 아래 JS 가 렌더 폭 100px 미만인 기본이미지에 .an-empty-sm 을 달아 모르는 칸도 커버. */
		img.an-empty-sm,
		.ans-fcard .ph img[src*="default_image"],
		.anrv__th img[src*="default_image"],
		.detreco-th img[src*="default_image"] {
			content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAAA7EAAAOxAGVKw4bAAARgklEQVR42u2df4xjV3XHP7Es1xpNnJFjptthup1OR9vJZLssYSGbJVmSsP1BuhCBC5EBBVkIIVT1D/6sqqpCCOUPVCFU8QdCyKAGLNq40EBISKHQgJbtJtks22GZDsMwDMtksCzXGRnXtawn/rjfy7tx/eN5dzP2zNwjPe2O/fyefb/3nPM95557Hnjx4sWLFy9evHjx4sWLFy9evHjx4sWLFy9evHjx4sWLFy9evHjx4sWLlxslN/khCKVULMSBOJAApnTEgZhzWhPY0dEA2tlcPvAAjz+4MWACSAEzwN3AnUAaSDqnrgPPA88Ba0AdaI0ryDd5UEkCGWAReCNwGjgmLa5YAIFAE2BSB8Ay8GX9uw6Us7l83QM8HuBOAnMC9o+Ak8Cs3q4JsB85ILelzb8DzAMLwLTe2wBWgB9Is69mc/mGB3g0wCYE1DHgBPAagTUvMC8Dz0orN+Vrm44Gp4HDwJI0/g5duiKT/V2BvA5Usrl80wO8++b4OJDVv3PyuzXgKeBJ4Blgs5dfLRULE9Le00BeYKc1CZaB7wnoi9Lmlgf4lQc4JW17M3BWphkx5BjwHeCT0r7yINLkTJj3Ag8Bb5BvbshnrwvoAnBlVCDfdEA0dxr4C4F7XKb2MWnvnID5e+BxaVx7iGvPCeS3A0eBvwXukdlPyjd/ErgEbO82247tc3CTCnkeBh4UGFeBzwFPSNsS8rXngWpUcAEE1jawKv9rr/dV4Ct6fQF4P/A2YEmxtgf4BpGpGeAUkHNI1DeAzwrUhI4NgTE08xVbXndi4tvke/9Zk2hL3+GtwL3AjDTfA3ydktHAflBadEWD/sVsLr8qYpQCqsB6NpevDaO9HbIF/FhEbUnjugz8k3zwhvz/ewRyYrdAju1T7Z0B3g18QD73UeAR4LFsLr+u014rX7wF/Od13rIsi1BWLD0j/7ute38MeFpM+++APwOmdwPk2D4DNibTfBq4SwN6CfiSTOiOc/qCAK4JnOuRtq59VWM6A2Tko9sy2U8CFzD57QcVh6df6TGJ7zPljcs03yVCVZUfvATUs7l8W1qTELNOCJhtJ5SaFEg9kxSKg1P6fFlhUV0AA7xK75PN5YNSsbAtcCeBI8qa/Uj3rXgNji4J4JDClaSI0+Md/jVGmE8ORKxqYrfzGvzTvUyoXpuVf79f90vqOj/XNVOyDi7btkz9aU2+2/RZb6KH/D1Jx//9RBrWbRLYxYRfCJQjwF/KVz8CfMgFyZG0yNLnFTs/rIlR14RCEyDTwbbb+k7/oe83oe/gAR5CWgKtLD/4RuD+UrHgsta4A3Dd8cuB/q7q+FUff/uSwCrr820dNZ0z2Tk5SsXClJj0B3XetnO+B3gIslMWK67KFL5TA5tyFvRTjv/dcZjwd5WkeByTZuyWXmyKNH1R2bCLmlRN3RNrou2kKhULNmR7i77LZczK05YnWcMlHdryp+eA38Us2t+tREQgJm2rNeLS2Jp8ZFWfW9V7a0BcxCvRwZaXpYE2C2bXgGs6x/r4pEA+LnBPEea9L1py5wEeXi44JvIB+UkUqmzLj8Y7NJhsLr/tMOqY/PKSGDfS0POYnHKlCwGrC2xL5DKaTDlNtDjw70ARs1rV8ABfmyY3S8XCM9KuZ5VoeJdM5/OYBf6U43N7ybwI1UlZgOdkVqs9zDe6Zwb4fWWt7sSsXq1pgj1Kn6VI74OjS1Nx6TkNaqDkwpuU5Ig7jLvbJAn0+U2Z3oQmS7kPuBAW6y0Srl5tAt/UUd7NFaV9vVzoJDXuVYowI+CnxLK/InP5dSd8skmLQPH02xUXzwKfkP/c1HXS8rlVJzx60rEOO7rXd5RNeyaby1d3O/Ozb0VZpLY0sSJWPSvwWtLoq8p0pQRkQ68FyogtOP78tQ5Z25F/3tHnA+AMYWXHlBMLb8q073pB3r4GuCN8snVVbbHqmgA/pf//TCHVPGH1ZCAArTY+ALxD12hp/L6ucxPy1w2x7CnHFbzk3N8DfIMlkPY+IWCTwAvype9TXPo2sdsNmdu0GHRMrPki8KKSFPMCe0Mgl6XZs47Zt2b6NQL+GWDrOpYjPcADzHRdZGtFoG1LK2c1BscE9BpmEcBl0VXgp4qPrW9ewRQO3IKpsJwToFeUKLmk667qfqu8fCXLA3yjwybCPLFLws45jHdJmv6CfOarBHBKvrQm093Qtc4rfLIA1/TaOWBHRXbro/7tB8UH95ItEaq2khn36/Vv6HivfPSSgJ1XmvEXYtzvkZ9NyCr8UECPzTaW2AEHeFFMedGJYR8APiyz/QkBOilNPadw5xbgrwX8hBRlTj49NU7jeiA1WPHxpEzsG5xxsMuNhzG1zisy1zaXnQDuE5jzHeOXUtx8XKSsdmABdhIQN4olR9rC6RSrTxNuNlvo0DgL/jGda2PolljyonxyZwYsQVjot3FgAe4omYlfpzkLnFAlys4Be9+7gT/H7E1K93Ffi475jury7gOeLhULm6MIi8ZBgydkAt/ngHw9CYxN4NMMWFtVEfySiNQHupjYG8VpTshUWwJ34ACOS2tOC+jkdVyrpazRP0awGosiUG9V/PtKEaEE8Hr57ZEDPCq2Z01rC5PCu9bDfn4QuBlp7j2aVHZhPhjwHcsiTE9jUpKXlbAIBgC8ABxWCe/B0GCnJqrtJAXWboCJ/ik9kviOvz+OWbqbE0A1sd54n+vuYMp2npcbaAG3y38vKg6O9VCaWR1pdqFqY6QAa5Bjzr1ssv+jPQYoIFwUiGQN+pCZuPz8h8SKV2TSFwcQPJva/HAHgfsXhVXvVxKkl4ZOYRb8F/Y9wPqxd/Rho52DvA2sZHP5yzdgYs3L757BVGOcA36p+LfXb9+RWf4bTGmOy86DUrFwQSZ/GlOp0U1sYuSIrMC+B/gUZrtGFLkigJY1iDOYhP/2kO0Q7E7+t8gkfw+zQSyto5f2bmoyXO1mRbQ7YhX4tsx1t8yV7SQwWyoWkqNs4xDbpUl0i3xWlCMtDUgp5DgrC5AeQnvjMo+vl+VYBr4vc2tLavqFXS9gtrr0IlNlwh4eQY/fnMI0bEnt5nbRUWhwA7PD4FzECbUmjTukZMQZ4Gt6PWod8aR85R36jd8SA16wg97juzR1j9UBHKApV7JMuKhPFy1OywrVIiZi9iTAZUyB+FNDMONpTB3VWf2/zXCbtE4qJDokYD9H2AbpUJ/Yewuzv6g6IPVpd1A8Kx8/0QPgjO63tp812BalZTTbXf9nd8dvEC6IpxXO3KfPxKPEuw6xSuqzR3TfkhMWTQxIrFQIdyn0FPlhq8XtPvHwJCNeXXrFb5zN5W0YM6tY9J2YlZqHlFVaAiayuXxTZCQl9mu7zcWc0GmQJAXsMf29CpzX/Sfle1MDAK5GmUyadFVNnmYfE50ZJcC7maqc1sAfc+67hSmRSTrkaAb4A8Kuc8OERSldf0Es+L8IqyomIgBckyWJ4i9tQV5Vv63b6lKKcJvMvk9VVpRouOgclwVy0yFHizLRdu9u1OoI28HudmnNFd2j6Uzm3xow2HXdM2qSxVZrtgcoUWxUTHo3Z5ZNTSY7BqhGuHaalPZOiKEmBHiSsBsdA5ILdyh8+QGw5mS57K78yT7X2FF4FFWD6wN8dhy4Vfeuj4JJ7ybA9gfGOgap7WhAUqxzQqa1KVNtdyJsDjDPs/LfF2Si6x2/NR7hNw9bTzXo/KTDJfavBkuT2hG+zxTh7vufSCNtBcb5Pq4mjdkymha52o5IljqzbrOlYiFKNUZCE2pyAHhxDgjJisoJbAK/iqkvrmggX1cqFh7tsbBg9xUdJlxhql6DSVwgXFKMMna3DoirRy7jWnQXYFoonBdZOo3JZ7+rVCw81sVHThD2nVzXsdORrAgihFv36l7BEBNykIYGjLCMdpyrKmMysf8mVmw7xa2VioX1jmzTBPBqadNyBzPHSars0H8DWPwawBgEbmVUBGu3w6SommuJ2M0yfZcwPTe2FOPaJmLTTmPPjI4EvTdot4H/izDQsSGPQb/nfxnhMx3iYwiw3f9j2x/YTdy/Tbi+a7/7cqlYqEhzpwTii0Cji6+2jD3Y5d+z2/cca4Dtao71p7PSRpuwSGMWIN6BSUl+C7PSNC82a7vWBWMyWYepTDkQAO9gaqDmMMt9J6XBZYU+H9ff9+t9u6Bv13jL8nlBj2vbVGS/bFs9YnhlCVaGcPuKKy3dr+o1+OUabHsvH8OsBy/rdds09KuYzV93inid0GDXdU65x7VtWrGfD76Aqeb4WcSxy2BaPCzw/4sIrPa2PMBOMqRULGxg0oxLhNWQbZEt26OqLE3eEsAnNZCNPhrT1Pv9WhetYloNXnLGJ+0kM2zyxO5TOozZvDbbZ0KN9PE64xgmbUuLpqTF7yZsO3gFaGZz+U1gs1QsfFMZri+Jcbf7aGiUMKmJaYxWhd90n52Rv09iihaqhK37U/RuzdBy3MLINHjsto8qnFjHtEL4tAbzYeBTmAdrzJaKhUm19HUfO2d9XtcHX4hVNxmuV8akrEgOU+b7cfn+VITPtvXd695Edx+cCqYOGUxvqzngrzCrTdZHzgCvU5i0HYG12gdLNui/qmSlphDNJkBOCOAKXToGdNFg27zFA9xFi5vKWD2lQboLs6nrjMOE7YK61eJgQELBkrWmmO8gC9Yk7G95s+5/O2YdOwrAO6MGeKx3+KuE56Ji3S+L5S5g8tInMKtM5SFizSbwP1GJj8qNrLY+K/97mGiNvF0N9iSr3yCLWdsQ6KR874pCJpsYiSINXcf6xdgQE8P2hu7Z/rAjRGoCL436IZV7qYVDTOZ4Viz7X0XEaoqJW8D3lZ+eVoxqu9zZIva6fHVkrdL1UtJcmzptRJgQ1T4xuQe4i9iaq5YSHmuEG8O+4AzsCUzl5oxeuwp8plQs2L7O1ajMVkz9uFzCmwlrtNMDtNgy+ooHeLjvOkFYdF5z9vw8JzDmRcLOEj4ToYlpb2Rb9Q8Tm9p2D38qgmXB/T1ZkvYAglUdB7O318SuznQClFJC4kEBu6Z4OoWpv56y7JywqUrQR3ttQ/A7CctwVzTRjshSDCJYNQ/wcMDWCQvYJ51nItgHbRzV8TXgI5hnFLYIH8JhzfiP6VMe62wcf5NM/ZoSLY9gUqWTwB8OIHO/5AC3cLimuFiM2e6SmCfccWirKm/RefahU40e2rUVIaMVd9j5FmZ7jWXe/cp0Akd76x7g6NISaLZl/m0OkbJ54bTDYAO678BvSbMGrfJY1h7oehXCZcEmpkVwL4ArjHBH4V4GuKwQKYlZZDgqcmVDGdtpvUFY6G5ruwJnd0G9h3lO6Npx52/rT+uaQAkn3Oqnwc1xILF7BuBsLt/SU1GekAYuYZ5UtuCELE1puH2yyqsF5LJAt8t/dnWo8/fPyyxnnOs1MBWeASYPPsXLn1PYS/NnMAsjI+20sxd7VV7Q4AWYxP9HRYA2MM9fyOj/Zwj3OP1QmncGU0RwVtfo/P1/otBoAfPgqy/o89vS5KOyDGUx6okeY3pKiZF7gH8oFQvPjaqNw14Mk2oy09+WZh4nfLqZfRbSHGZRYEZaeEWaexyT6pzpMblt45Y/1iSw5C6lyXRI939xQAiUFBG095va7Ue771kNzubyrVKxYPtr2d6TJ6W5KzKnSwI8I4K0LtBv1mU2+0wee80HZS1+hdmVaHfrr8g8Nx1eYJ/C0i1cutXx676lf0SQd9SFpypAHlLG6ZQz0HY34qVsLr+lh0P+N/03gv1cgByTOV8irNO2TH2N8KksdcwqU4XuRQBN3XNklZV7+rlJTt/no/Kb0x2nbAngKzKRSfq3Mbbs+5DMa2c3uyamHdNGNpevOS0jek0aW4DQHFXn2T3dEFxLiQ3HbCa7AFZzBrtJ/5JYtxJypwvTtpUmDef+gyo1GWVb4X3z5DOnZeLLALvWLSM9rsc49ID24sWLFy9evHjx4sWLFy9evHjx4sWLFy9evHjx4sWLFy9evHjx4sXL2MqvAWhaNGCJrHAUAAAAAElFTkSuQmCC') !important;
			object-fit: contain !important;
			object-position: center center !important;
			padding: 8% !important;
			box-sizing: border-box !important;
			background: transparent !important;
		}
		body.dark img.an-empty-sm,
		body.dark .ans-fcard .ph img[src*="default_image"],
		body.dark .anrv__th img[src*="default_image"],
		body.dark .detreco-th img[src*="default_image"] {
			content: url('data:image/png;base64,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') !important;
		}
		body .empty_text {
			color: #222;
		}

		body.dark .empty_text {
			color: var(--dark-text-secondary);
		}
		
		
		
		/*main페이지 등 li a hover 시 색상*/
		li a:hover div {
			color: var(--color-hover);
		}


	

/* ── inc/header.php #an-searchbox (옛 497줄) ── */
/* 2026-09-19 사장님 "검색창 스타일 search 랑 똑같이, class 로 묶자" — 검색 화면 옵션 패널의 검색창(display_mode_toggle_buttons.php .an-total-search)과 커뮤니티 목록 도구줄 검색(list_top_button_sort_and_viewmode.php .an-lsearch)이 이 한 벌을 쓴다. 높이·입력 폭만 --an-sb-h/--an-sb-w 로 자리에 맞춘다(검색 40px/126px · 커뮤니티 도구줄 34px/190px) */
.an-searchbox{display:inline-flex;align-items:center;flex:0 0 auto;height:var(--an-sb-h,40px);padding:0 8px 0 12px;background:var(--box,#fdfdfd);border:1px solid var(--color-border-medium,#C8C8CE);border-radius:9px;box-shadow:inset 0 0 .75px rgb(77,71,71);box-sizing:border-box;transition:border-color .15s}
.an-searchbox:focus-within{border-color:var(--color-brown,#E66B65)}
.an-searchbox .an-searchbox-input{width:var(--an-sb-w,126px);min-width:0;height:calc(var(--an-sb-h,40px) - 2px);border:0!important;background:transparent!important;outline:none!important;box-shadow:none!important;border-radius:0!important;font-size:14px;padding:0 2px;margin:0;color:var(--color-text-primary,#0f0f0f);font-family:inherit}
.an-searchbox .an-searchbox-input::placeholder{color:#aeb2ba}
.an-searchbox .an-searchbox-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:calc(var(--an-sb-h,40px) - 2px);padding:0;margin:0;cursor:pointer;background:transparent;border:0;box-shadow:none;color:var(--color-brown,#E66B65);font-size:17px;transition:color .15s,transform .1s}
.an-searchbox .an-searchbox-btn:hover{color:var(--ui-action-hover,#C33F39)}
.an-searchbox .an-searchbox-btn:active{transform:scale(.92)}
.an-searchbox .an-searchbox-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:100%;color:#aeb2ba;text-decoration:none;font-size:15px;line-height:1}
.an-searchbox .an-searchbox-x:hover{color:var(--color-text-primary,#0f0f0f)}
body.dark .an-searchbox{background:var(--dark-bg-button);border-color:var(--dark-border-secondary)}
body.dark .an-searchbox .an-searchbox-input{color:#eee}
body.dark .an-searchbox .an-searchbox-btn{color:var(--dark-text-emphasis,#F0A088)}

/* ── inc/header.php #an-ctl (옛 511줄) ── */
/* 2026-09-19 사장님 2안 "갤러리 순·버튼 스타일 search 랑 통일" — 검색 화면 보기 토글(#toggleModeBtn, view_toggle.php)·정렬 셀렉트와 같은 값(40px·라운드 9·테두리 --color-border-medium·bg --box·안쪽 그림자·활성 --ui-toolbar-select-bg/fg)을 커뮤니티 도구줄(정렬 4개·보기 4개·글쓰기)이 쓴다. 검색 쪽 CSS 는 그 파일에 그대로(값 동일) */
.an-ctl{display:inline-flex;align-items:center;height:40px;border:1px solid var(--color-border-medium,#C8C8CE);border-radius:9px;background:var(--box,#fdfdfd);box-shadow:inset 0 0 .75px rgb(77,71,71);overflow:hidden;box-sizing:border-box}
.an-ctl>*{display:inline-flex;align-items:center;justify-content:center;height:100%;border-right:1px solid var(--color-border-medium,#C8C8CE);background:transparent;color:var(--color-text-tertiary,#666);font-size:14px;font-weight:600;line-height:1;padding:0 16px;box-sizing:border-box;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.an-ctl>*:last-child{border-right:0}
.an-ctl>*:not(.active):hover{background:var(--color-bg-light,#f4f5f7);color:var(--color-text-primary,#222)}
.an-ctl>.active{background:var(--ui-toolbar-select-bg,#FBEBE9);color:var(--ui-toolbar-select-fg,#C63632);border-right-color:transparent}
.an-ctl--icons>*{width:35px;padding:0}
.an-ctl svg{display:block;width:18px;height:18px}
.an-ctl-write{display:inline-flex!important;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:9px;background:var(--ui-action,#D84841);color:#fff;font-size:14px;font-weight:700;line-height:1;text-decoration:none;box-sizing:border-box;white-space:nowrap}
.an-ctl-write:hover{background:var(--ui-action-hover,#C33F39);color:#fff}
.an-ctl-write svg{display:block;width:16px;height:16px}
body.dark .an-ctl{background:var(--dark-bg-button,#3A3A3A);border-color:var(--dark-border-secondary,#4A4A4A)}
body.dark .an-ctl>*{color:var(--dark-text-primary,#ECECEC);border-right-color:var(--dark-border-secondary,#4A4A4A)}
body.dark .an-ctl>*:not(.active):hover{background:var(--dark-bg-hover,#333)}
body.dark .an-ctl>.active{background:var(--dark-ui-toolbar-select-bg,#403418);color:var(--dark-ui-toolbar-select-fg,#F0C888)}
body.dark .an-ctl-write{background:var(--ui-action,#D84841)!important;color:var(--ui-action-text,#fff)!important}
/* 2026-09-19 사장님 "search 아이콘이 더 얇다, 클래스로 통일" — 검색 보기 토글(#toggleModeBtn, view_toggle.php)도 위 .an-ctl 값으로. 검색 파일의 #id 규칙(특이성 높음)을 이기려 !important */
.an-view-toggle.an-ctl{height:40px!important;gap:0!important;transform:none!important;border:1px solid var(--color-border-medium,#C8C8CE)!important;border-radius:9px!important;background:var(--box,#fdfdfd)!important;box-shadow:inset 0 0 .75px rgb(77,71,71)!important;overflow:hidden!important}
.an-view-toggle.an-ctl .icon{width:35px!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;border-right:1px solid var(--color-border-medium,#C8C8CE)!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;color:var(--color-text-tertiary,#666)!important;font-size:0!important;transition:background-color .15s,color .15s!important}
.an-view-toggle.an-ctl .icon:last-child{border-right:0!important}
.an-view-toggle.an-ctl .icon:not(.active):hover{background:var(--color-bg-light,#f4f5f7)!important;color:var(--color-text-primary,#222)!important}
.an-view-toggle.an-ctl .icon.active,.an-view-toggle.an-ctl .icon.active:hover{background:var(--ui-toolbar-select-bg,#FBEBE9)!important;color:var(--ui-toolbar-select-fg,#C63632)!important;border-right-color:transparent!important}
body.dark .an-view-toggle.an-ctl{background:var(--dark-bg-button,#3A3A3A)!important;border-color:var(--dark-border-secondary,#4A4A4A)!important}
body.dark .an-view-toggle.an-ctl .icon{color:var(--dark-text-primary,#ECECEC)!important;border-right-color:var(--dark-border-secondary,#4A4A4A)!important}
body.dark .an-view-toggle.an-ctl .icon:not(.active):hover{background:var(--dark-bg-hover,#333)!important}
body.dark .an-view-toggle.an-ctl .icon.active,body.dark .an-view-toggle.an-ctl .icon.active:hover{background:var(--dark-ui-toolbar-select-bg,#403418)!important;color:var(--dark-ui-toolbar-select-fg,#F0C888)!important}

/* ── inc/header.php #an-board-skin (옛 555줄) ── */
/* 2026-09-19 사장님 승인 — 흰 글자가 얹히는 채움 18곳 색 대비 보정(기준 4.5:1). 색조는 두고 밝기만 눌렀고, 골드만 배지 3종이 구분되도록 색상환을 벌렸다. 근거: 라이브 6색 x 라이트/다크 실측 */
html[data-skin="coral"]{--sk-head:#C2513B;--sk-head-t:#fff;--sk-pin:#FBEAE5;--sk-row:#F7DCD5;--sk-hov:#F2CCC2;--sk-line:#fff;--sk-pad:#EFCFC6;--sk-b1:#B3331E;--sk-b2:#D34129;--sk-b3:#BC572D;--sk-card:#F9E2DC;--sk-cardline:#EFCFC6;--sk-sh:rgba(150,52,32,.20)}
html.dark[data-skin="coral"]{--sk-head:#6B2C1E;--sk-head-t:#FCE3DA;--sk-pin:#33221D;--sk-row:#2C1F1B;--sk-hov:#3C2A24;--sk-line:#241A16;--sk-pad:#251B17;--sk-b1:#BF543B;--sk-b2:#A8442C;--sk-b3:#B0603A;--sk-card:#2C1F1B;--sk-cardline:#3C2A24;--sk-sh:rgba(8,3,2,.55)}
html[data-skin="olive"]{--sk-head:#5C7A33;--sk-head-t:#fff;--sk-pin:#EDF3E2;--sk-row:#E1EBD0;--sk-hov:#D4E1BE;--sk-line:#fff;--sk-pad:#D7E3C4;--sk-b1:#46601F;--sk-b2:#5C7A33;--sk-b3:#6B7B37;--sk-card:#E7F0DA;--sk-cardline:#D0DEBC;--sk-sh:rgba(64,86,30,.20)}
html.dark[data-skin="olive"]{--sk-head:#38491F;--sk-head-t:#DCE9C4;--sk-pin:#242B1C;--sk-row:#1F2619;--sk-hov:#2C3624;--sk-line:#191E14;--sk-pad:#1B2115;--sk-b1:#627D3E;--sk-b2:#57702F;--sk-b3:#6E7A41;--sk-card:#1F2619;--sk-cardline:#2C3624;--sk-sh:rgba(4,8,2,.55)}
html[data-skin="gold"]{--sk-head:#9F691B;--sk-head-t:#fff;--sk-pin:#FBF2DF;--sk-row:#F7E8CA;--sk-hov:#F1DDB4;--sk-line:#fff;--sk-pad:#EFDCBB;--sk-b1:#8A5A10;--sk-b2:#9F691B;--sk-b3:#7B6A33;--sk-card:#F9EDD5;--sk-cardline:#EDDCB8;--sk-sh:rgba(130,84,16,.22)}
html.dark[data-skin="gold"]{--sk-head:#6B4A12;--sk-head-t:#F6DDAD;--sk-pin:#332A16;--sk-row:#2B2413;--sk-hov:#3A301B;--sk-line:#221C0F;--sk-pad:#241E11;--sk-b1:#986D24;--sk-b2:#8A5A10;--sk-b3:#736439;--sk-card:#2B2413;--sk-cardline:#3A301B;--sk-sh:rgba(10,7,1,.55)}
html[data-skin="clay"]{--sk-head:#8A5038;--sk-head-t:#fff;--sk-pin:#F3E8E1;--sk-row:#EADCD2;--sk-hov:#DFCCBF;--sk-line:#fff;--sk-pad:#E1D0C5;--sk-b1:#6E3C28;--sk-b2:#8A5038;--sk-b3:#A3654B;--sk-card:#EFE2D9;--sk-cardline:#DECABD;--sk-sh:rgba(98,56,36,.20)}
html.dark[data-skin="clay"]{--sk-head:#553129;--sk-head-t:#EBD0C1;--sk-pin:#2E221E;--sk-row:#271D1A;--sk-hov:#362823;--sk-line:#1F1815;--sk-pad:#211917;--sk-b1:#96604A;--sk-b2:#7C4B37;--sk-b3:#9C6951;--sk-card:#271D1A;--sk-cardline:#362823;--sk-sh:rgba(8,4,2,.55)}
html[data-skin="plum"]{--sk-head:#8C3A66;--sk-head-t:#fff;--sk-pin:#F5E8EF;--sk-row:#EDDAE5;--sk-hov:#E3C9D8;--sk-line:#fff;--sk-pad:#E5CEDB;--sk-b1:#732C53;--sk-b2:#8C3A66;--sk-b3:#A45580;--sk-card:#F1E1EA;--sk-cardline:#E1C9D6;--sk-sh:rgba(105,42,76,.20)}
html.dark[data-skin="plum"]{--sk-head:#54233D;--sk-head-t:#EEC6DC;--sk-pin:#2E1F28;--sk-row:#271B22;--sk-hov:#35242E;--sk-line:#1F161B;--sk-pad:#21181D;--sk-b1:#9C4E78;--sk-b2:#823C62;--sk-b3:#A16181;--sk-card:#271B22;--sk-cardline:#35242E;--sk-sh:rgba(9,2,6,.55)}
html[data-skin="forest"]{--sk-head:#277A4C;--sk-head-t:#fff;--sk-pin:#E4F1EA;--sk-row:#D5E8DD;--sk-hov:#C3DCCE;--sk-line:#fff;--sk-pad:#C9DFD3;--sk-b1:#1C633C;--sk-b2:#277A4C;--sk-b3:#43815C;--sk-card:#DEEDE5;--sk-cardline:#C6DCD0;--sk-sh:rgba(26,88,56,.20)}
html.dark[data-skin="forest"]{--sk-head:#1C4A32;--sk-head-t:#B9E2C9;--sk-pin:#1C2921;--sk-row:#18231D;--sk-hov:#243128;--sk-line:#131C17;--sk-pad:#151F1A;--sk-b1:#388358;--sk-b2:#2C7149;--sk-b3:#4B8060;--sk-card:#18231D;--sk-cardline:#243128;--sk-sh:rgba(2,8,5,.55)}
/* ── 적용(스킨 켰을 때만) ── */
/* 2026-09-19 사장님 "대형 커뮤니티는 게시판만 넣는데?" — 컨테이너(#bbs_container) 전체 배경 색칠 폐지. 색은 표와 카드에만(도구줄·칩·검색창 흰 면이 색 위에 뜨던 것 해소) */
html[data-skin] #bbs_container table.list{background:var(--sk-row)!important}   /* 2026-09-19 사장님: 둥근 모서리 뺌 — 고정 행 표와 본문 표가 별개라 둘 다 둥글면 목록 중간에 턱이 생긴다 */
.an-ctl--skin{overflow:visible!important;z-index:40}
/* 🔴 overflow 를 열어 두면 묶음의 둥근 모서리가 자식 채움을 못 자른다(사장님 sample/이상.png: 켠 버튼 면이 모서리 밖으로 튀어나옴) → 자식이 직접 같은 모서리를 가진다(바깥 9 − 테두리 1 = 8) */
.an-ctl--skin>#anSkinBtn{border-radius:8px 0 0 8px}
.an-ctl--skin>#anSkinCaret{border-radius:0 8px 8px 0}   /* 🔴 ① .an-ctl 은 overflow:hidden — 메뉴가 잘려 클릭이 안 먹는다 ② 정수 픽셀 스냅 transform 이 쌓임 맥락을 만들어 메뉴 z-index 가 도구줄 안에 갇혔다(뒤 글자가 비침) → 도구줄 자체에 z-index */
.an-ctl>.an-skin-menu[hidden]{display:none!important}   /* 🔴🔴 아래 display:block!important 가 [hidden] 을 이겨서 메뉴가 **항상 열린 채로 보였다**(사장님 "절대 안 닫힘"의 진짜 원인). 닫힘 규칙을 먼저·명시적으로 */
.an-ctl>.an-skin-menu{display:block!important;height:auto!important;padding:7px!important;border-right:0!important;justify-content:flex-start!important;background:var(--color-bg-primary,#fff)!important}   /* 🔴 .an-ctl>*{background:transparent} 탓에 메뉴가 비쳤다 */
body.dark .an-ctl>.an-skin-menu{background:var(--dark-bg-secondary,#232323)!important}   /* 🔴 .an-ctl>* 규칙(inline-flex·height:100%·padding 0 16px)이 메뉴를 가로로 퍼뜨려 깨뜨린다 */
.an-ctl>.an-skin-menu>button{width:100%!important;height:auto!important;border-right:0!important;justify-content:flex-start!important;font-weight:400!important}
html[data-skin] #bbs_container table.list thead th,
html[data-skin] #bbs_container table.list tr:first-child th{background:var(--sk-head)!important;color:var(--sk-head-t)!important;border-color:var(--sk-head)!important}
html[data-skin] #bbs_container table.list tr.rs_var_area td{background:var(--sk-pin)!important;border-color:var(--sk-line)!important}
html[data-skin] #bbs_container table.list tr.hover_list td{background:var(--sk-row)!important;border-color:var(--sk-line)!important}
html[data-skin] #bbs_container table.list tr.rs_var_area:hover td,
html[data-skin] #bbs_container table.list tr.hover_list:hover td{background:var(--sk-hov)!important}
html[data-skin] #bbs_container .gallery_listbox,
html[data-skin] #bbs_container .an-t3c{background:var(--sk-card)!important;border-color:var(--sk-cardline)!important}
/* 2026-09-19 사장님 sample/인덱.png — 카드 hover 에 --sk-hov 를 통째로 깔면 사진 칸까지 어두운 덩어리로 보인다. 테두리와 아주 옅은 그림자로만 표시 */
html[data-skin] #bbs_container .gallery_listbox:hover,
html[data-skin] #bbs_container .an-t3c:hover{border-color:var(--sk-head)!important;box-shadow:0 1px 3px var(--sk-sh),0 4px 12px var(--sk-sh)!important}
/* 2026-09-19 사장님 sample/색상호버.png — 그림자가 6색 모두 같은 회색이라 색 테두리와 따로 놀았다. 스킨마다 제 색 그림자(--sk-sh). 다크는 --sk-head 가 카드 면과 가까워 테두리를 한 단계 밝은 --sk-b1 로 */
html.dark[data-skin] #bbs_container .gallery_listbox:hover,
html.dark[data-skin] #bbs_container .an-t3c:hover{border-color:var(--sk-b1)!important}
/* 2026-09-19 사장님 B안(시안 https://claude.ai/artifact/GgQc6SeCcx4fWxPhBp3EXK) — 왼쪽 커뮤니티 메뉴(.cm-lnb)도 같이. 오른쪽 띠(.gRight)는 제외: 실종 전단지 사진·빨간 순위 배지·광고가 들어가 색이 부딪친다 */
html[data-skin] .cm-lnb{background:var(--sk-card)!important;border-color:var(--sk-cardline)!important}
/* 2026-09-19 사장님 「lnb 입력·버튼·현재·hover 구분」 — 입력칸과 「최근 본 글」 버튼은 메뉴 면보다 **밝은 면**(다크는 더 어두운 면)으로 띄운다. color-mix 앞줄은 폴백 */
html[data-skin] .cm-lnb .cm-find input,html[data-skin] .cm-lnb .cm-recent-link{background:#fff!important;background:color-mix(in srgb,var(--sk-card) 28%,#fff)!important;border-color:var(--sk-cardline)!important}
html.dark[data-skin] .cm-lnb .cm-find input,html.dark[data-skin] .cm-lnb .cm-recent-link{background:#1b1b1b!important;background:color-mix(in srgb,var(--sk-card) 55%,#000)!important}
html[data-skin] .cm-lnb .cm-recent-link:hover{border-color:var(--sk-head)!important;color:var(--sk-head)!important}
html[data-skin] .cm-lnb .cm-find input:focus{border-color:var(--sk-head)!important;outline:none}
html[data-skin] .cm-lnb .cm-grp{border-color:var(--sk-cardline)!important}
/* 항목: 올린 줄은 옅은 면, 지금 게시판은 한 단계 진한 면 + 왼쪽 막대 + 굵게 */
/* 2026-09-19 사장님 「띠 말고 색으로 구분」 — hover 와 현재가 둘 다 옅은 면이라 안 보였다.
   올린 줄 = 옅은 면(임시) · 지금 게시판 = 표 머리와 같은 진한 채움 + 밝은 글자(고정). 두 단계가 확실히 갈린다 */
html[data-skin] .cm-lnb a:not(.sel):hover{background:var(--sk-hov)!important;border-radius:6px}
html[data-skin] .cm-lnb a.sel,html[data-skin] .cm-lnb a.sel:hover{background:var(--sk-head)!important;color:var(--sk-head-t)!important;font-weight:700;border-radius:6px}
/* 다크는 --sk-head 가 메뉴 면과 너무 가까워 안 보인다 → 배지 색(한 단계 밝은 채움) + 흰 글자 */
html.dark[data-skin] .cm-lnb a.sel,html.dark[data-skin] .cm-lnb a.sel:hover{background:var(--sk-b1)!important;color:#fff!important}
html[data-skin] #bbs_container .notice_icon{background:var(--sk-b1)!important;color:#fff!important;border-color:var(--sk-b1)!important}
html[data-skin] #bbs_container .best_icon{background:var(--sk-b2)!important;color:#fff!important;border-color:var(--sk-b2)!important}
html[data-skin] #bbs_container .event_icon{background:var(--sk-b3)!important;color:#fff!important;border-color:var(--sk-b3)!important}
/* 스킨 버튼 자체(도구줄) — 켜짐이면 고른 색을 띤다 */
html[data-skin] .an-ctl--skin>a.active{background:var(--sk-pin)!important;color:var(--sk-b1)!important}
html.dark[data-skin] .an-ctl--skin>a.active{background:var(--sk-hov)!important;color:var(--sk-head-t)!important}
.an-ctl--skin>#anSkinBtn{width:46px;padding:0!important;justify-content:center}   /* 2026-09-19 사장님 "스킨 아이콘 너비 확 줄이자" — 글자 빼고 색 점만(툴팁·aria 로 뜻 전달). 색 이름을 안 쓰므로 폭도 안 변한다 */
.an-ctl--skin>#anSkinCaret{width:28px!important}
.an-skin-dot{width:15px;height:15px;border-radius:4px;border:1px solid rgba(0,0,0,.18);background:transparent;display:inline-block;flex:0 0 auto}
body.dark .an-skin-dot{border-color:rgba(255,255,255,.28)}
.an-ctl--skin>#anSkinCaret{padding:0!important;font-size:11px!important}
.an-ctl--skin>#anSkinCaret.is-open{background:var(--color-bg-light,#f4f5f7)}
body.dark .an-ctl--skin>#anSkinCaret.is-open{background:var(--dark-bg-hover,#333)}
.an-skin-menu .an-skin-off{border-top:1px solid var(--color-border,#E2E2E6);margin-top:5px;padding-top:11px!important}
.an-skin-menu .an-skin-off .dot{background:transparent!important;border-style:dashed}   /* 끄기 = 빈 점 */
body.dark .an-skin-menu .an-skin-off{border-top-color:var(--dark-border-secondary,#4A4A4A)}
.an-skin-menu{position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:186px;background:var(--color-bg-primary,#fff);border:1px solid var(--color-border-medium,#C8C8CE);border-radius:9px;box-shadow:0 8px 24px rgba(20,10,5,.16);padding:6px}
.an-skin-menu[hidden]{display:none}
.an-skin-menu button{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;padding:9px 14px;border-radius:7px;font:14px/1.2 inherit;color:var(--color-text-primary,#222);cursor:pointer;text-align:left}   /* 2026-09-19 사장님 sample/호버1.png: 고른·올린 줄의 색 면이 점에 딱 붙어 보여 좌우 여백을 10→14, 점 간격 9→11 */
.an-skin-menu button:hover{background:var(--color-bg-light,#f4f5f7)}
.an-skin-menu button.on{background:var(--ui-toolbar-select-bg,#FBEBE9);color:var(--ui-toolbar-select-fg,#C63632);font-weight:700}
.an-skin-menu .dot{width:15px;height:15px;border-radius:5px;border:1px solid rgba(0,0,0,.14);flex:0 0 auto}
.an-skin-menu .def{margin-left:auto;font-size:11px;color:var(--color-text-light,#999);font-weight:400}
body.dark .an-skin-menu{background:var(--dark-bg-secondary,#232323);border-color:var(--dark-border-secondary,#4A4A4A)}
body.dark .an-skin-menu button{color:var(--dark-text-primary,#ECECEC)}
body.dark .an-skin-menu button:hover{background:var(--dark-bg-hover,#333)}
body.dark .an-skin-menu button.on{background:var(--dark-ui-toolbar-select-bg,#403418);color:var(--dark-ui-toolbar-select-fg,#F0C888)}

/* ── inc/header.php #an-late-img (옛 644줄) ── */
.flex-container img.an-late{opacity:0}.flex-container img.an-late.an-late-in{opacity:1;transition:opacity .3s ease}

/* ── inc/header.php #an-soft-refresh (옛 655줄) ── */
.sr-mod.sr-list.an-refreshing{opacity:.85;transition:opacity .15s ease;pointer-events:none}/* 2026-09-19 사장님 "아무 느낌 안 나네, 아주 살짝": 85% 로 살짝 + 최소 0.22초 유지(응답이 빨라도 눌린 느낌). 1안=.55, 3안=흐림 없음 */


/* ── /css/variables.css ── */
/**
 * CSS 변수 정의
 * 프로젝트 전반에서 사용되는 색상, 폰트, 간격 등을 중앙 관리
 */

:root {
  /* [2026-08-28 K2] 라이트 바탕은 웜 크림 → 중립 라이트 그레이(#F2F2F3, 엠팍·쿠팡·예스24 공식: 흰 헤더+회색 본문+흰 카드). 국내 56곳 실측에 웜 바탕 0곳 → 익숙함 우선(사장님 결정). 웜 정체성은 테라코타·배지·사진이 담당. 다크 무변화. */
  /* ═══ 🎨 B안(2026-08-28) 라이트 기본 토큰 — 다른 파일의 var(--light-x, 옛 폴백) 을 여기서 정의해 이긴다 ═══ */
  --light-bg-button-active:#D8432A; --light-point-blue:#D8432A; --light-icon-best:#3F5F8A; --light-lnb-link-active:#B3331E; --light-accent-price:#B3331E; --light-state-error-soft-text:#B3331E; --light-rank-number-text:#FFFFFF; --light-rank-number-bg:#D8432A; --light-text-emphasis:#D8432A;
  /* ===== 색상 (Colors) ===== */
  
  /* 기본 색상 — --color-brand-accent 의 별칭(하위호환) */
  --color-primary: var(--color-brand-accent);
  --color-primary-hover: var(--light-color-primary-hover, #B3331E);
  --color-primary-dark: var(--light-color-primary-dark, #B3331E);
  
  /* 텍스트 색상 */
  --color-text-primary: var(--light-color-text-primary, #0f0f0f);
  --color-text-emphasis: var(--light-text-emphasis, #D8432A);
  --lnb-link-active: var(--light-lnb-link-active, #B3331E);   /* [2026-09-12] LNB 현재 메뉴 글자 — 모드별 자동 */   /* [2026-09-12] 강조 "글자" 전용 — 면(--ui-action 등)은 테라코타 그대로, 다크에선 로고 nara 노랑 #F2C25E 로 바뀐다(사장님 확정). color: 에만 쓸 것 */
  --color-text-secondary: var(--light-color-text-secondary, #393939);
  --color-text-tertiary: var(--light-color-text-tertiary, #666);
  --color-text-quaternary: var(--light-color-text-quaternary, #888);
  --color-text-light: var(--light-color-text-light, #999);
  --color-text-lighter: var(--light-color-text-lighter, #9a9a9a);
  --color-text-black: var(--light-color-text-black, #000);
  
  /* 링크 색상 */
  --color-link-hover: var(--light-color-link-hover, #3F5F8A);   /* 링크 = 이동 → 2차색 */
  --color-hover: var(--color-brand, #D8432A);   /* 2026-09-14 사이트 전체 hover 색 = 브랜드(라이트 빨강). :hover 규칙은 이 토큰만 쓴다(링크 hover 파랑 폐지). 🔴 body.dark 블록에도 같은 이름으로 따로 정의 — 커스텀 속성은 정의한 곳에서 값이 굳는다 */
  
  /* 배경 색상 */
  /* 페이지 바탕(플로팅) — body 전용. 흰 모듈(--light-bg-primary)이 떠 보이는 쿨 그레이.
     소비는 inc/header.php body 규칙 하나 — 여기 등록은 css_variables.php 폴백 레지스트리용 (2026-08-11) */
  --color-bg-page: var(--light-bg-page, #F2F2F3);
  --color-bg-page-dark: var(--dark-bg-page, #141414);
  --color-bg-white: var(--light-color-bg-white, #fff);
  --color-bg-light: var(--light-color-bg-light, #EFEFF1);
  --color-bg-lighter: var(--light-color-bg-lighter, #F7F7F8);
  --color-bg-gray: var(--light-color-bg-gray, #e8e8e8);
  
  /* 테두리 색상 */
  --color-border: var(--light-color-border, #D8D8DC);
  --color-border-light: var(--light-color-border-light, #E0E0E4);
  --color-border-medium: var(--light-color-border-medium, #C8C8CE);
  --color-border-focus: var(--light-border-focus, #D8432A);
  
  /* 상태 색상 — 아래 '의미 색 토큰'의 별칭(하위호환). 값은 --state-* 에서 받는다 */
  --color-error: var(--state-error);
  --color-error-dark: var(--light-color-error-dark, #cc3a3a);
  --color-error-darker: var(--light-color-error-darker, #D44E49);
  --color-orange: var(--state-ongoing);      /* 레거시 별칭 — 진행중 색을 따라간다(관리 가능) */
  --color-orange-dark: var(--accent-money);  /* 레거시 별칭 — 금액 강조를 따라간다 */
  --color-orange-darker: var(--light-color-orange-darker, #C7423E);
  
  /* 다크모드 색상 */
  
  /* 특수 색상 — --color-brand 의 별칭(하위호환). 216파일이 참조 중이라 이름은 유지 */
  --color-brown: var(--color-brand);

  /* ═══════════════════════════════════════════════════════════════════
     ★ 상태 색상 역할 토큰 (B안: 행동=레드 / 선택·활성=블루)
     ───────────────────────────────────────────────────────────────────
     색은 화면 이름(register/search/community)이 아니라 '역할'로만 준다.
     새 UI를 만들 때는 반드시 아래 4개 중에서 고를 것. 새 hex 를 박지 말 것.

       --ui-action       누르면 실행되는 주요 버튼 (검색/등록/저장/결제)
       --ui-active       지금 보고 있는 위치 (GNB/LNB/탭/파일탭) — 페이지당 1곳
       --ui-select       사용자가 고른 항목 (체크/라디오/필터 pill/아이콘그룹) — 다중 가능
       --ui-current-page 목록의 현재 쪽 (페이지네이션 전용)

     soft 변형(-soft-bg/-soft-text)은 '연한 채움' — 파일탭 활성, 선택 칩처럼
     넓은 면적이거나 여러 개가 동시에 켜지는 자리에 쓴다.
     ═══════════════════════════════════════════════════════════════════ */
  --ui-action: var(--light-ui-action, #D8432A);
  --ui-action-hover: var(--light-ui-action-hover, #B3331E);
  --ui-action-text: var(--light-ui-action-text, #ffffff);
  /* 보조 버튼 — 같은 세트의 두 번째 버튼. 색을 바꾸지 않고 '연한 채움'으로 위계를 준다.
     🔴 색을 바꾸면 '다른 기능'으로 읽힌다(딥블루 채움으로 했다가 되돌린 자리). */
  --ui-action-soft-bg: var(--light-ui-action-soft-bg, #FFFFFF);
  --ui-action-soft-text: var(--light-ui-action-soft-text, #B3331E);
  --ui-action-soft-border: var(--light-ui-action-soft-border, #B3331E);
  /* 주황·금색 뱃지 위 글씨 — 주황을 어둡게 하면 갈색이 되므로 배경은 밝게 두고 글씨를 어둡게 */
  --tag-event-text: var(--light-tag-event-text, #2A2210);
  --rank-number-text: var(--light-rank-number-text, #2A1F0A);

  --ui-active: var(--light-ui-active, #D8432A);
  --ui-active-text: var(--light-ui-active-text, #ffffff);
  --ui-active-soft-bg: var(--light-ui-active-soft-bg, #ffffff);   /* 파일탭 활성면 — 아래 박스와 이어지게 흰색 */
  --ui-active-soft-text: var(--light-ui-active-soft-text, #B3331E);
  --ui-active-hover-bg: var(--light-ui-active-hover-bg, #FBE4DE);

  --ui-select: var(--light-ui-select, #D8432A);
  --ui-select-text: var(--light-ui-select-text, #ffffff);
  --ui-select-soft-bg: var(--light-ui-select-soft-bg, #FBE4DE);
  --ui-select-soft-text: var(--light-ui-select-soft-text, #B3331E);
  /* pill 테두리 — 배경/글씨가 주 신호이므로 테두리는 옅게(무거워 보이지 않게) */
  --ui-select-soft-border: var(--light-ui-select-soft-border, #D8432A);

  --ui-current-page: var(--light-ui-current-page, #D8432A);
  --ui-current-page-text: var(--light-ui-current-page-text, #1D0101);

  /* 보기모드 토글 = 필터 pill 과 같은 soft 규칙(연한 코랄 배경 + 코랄 테두리 + 코랄 아이콘).
     진한 채움을 쓰면 30px 짜리가 빨간 사각형으로 튄다. 배경은 pill 보다 아주 조금 진하게
     — 면적이 작아 '덩어리' 걱정이 없고, 그만큼 또렷해진다. */
  --ui-toolbar-select-bg: var(--light-ui-toolbar-select-bg, #FBE4DE);   /* 2026-08-28 A안: 검색 보기전환 활성 = 코랄 톤(--tint-coral) 과 동일값 */
  --ui-toolbar-select-fg: var(--light-ui-toolbar-select-fg, #B3331E);

  /* 파일탭 비활성 — 회색이 무거우면 탭 줄이 우중충해진다 */
  --ui-tab-inactive-bg: var(--light-ui-tab-inactive-bg, #F7F8FA);
  --ui-tab-inactive-text: var(--light-ui-tab-inactive-text, #6A727D);
  --ui-tab-inactive-border: var(--light-ui-tab-inactive-border, #E3E6EA);
  --ui-tab-inactive-hover-bg: var(--light-ui-tab-inactive-hover-bg, #EEF0F3);
  --ui-tab-inactive-hover-text: var(--light-ui-tab-inactive-hover-text, #4B5563);

  /* GNB 현재 메뉴 — 유일한 예외. 브랜드 컬러 바 위라 '같은 색의 더 진한 톤'을 쓴다
     (--ui-active 를 얹으면 컬러 면끼리 싸움). inc/gnb.php 참고 */
  --gnb-active-bg: var(--light-gnb-active-bg, #B3331E);

  /* ═══════════════════════════════════════════════════════════════════
     ★ 의미 색 토큰 — '뜻이 있는' 색은 전부 여기서 나온다 (관리자에서 편집 가능)
     ───────────────────────────────────────────────────────────────────
     위 역할 토큰(--ui-*)이 '조작 상태'라면, 아래는 '콘텐츠가 가진 뜻'이다.
     회색·흰색 같은 구조색은 --color-bg-* / --color-border-* 를 그대로 쓸 것.
     ⚠ 새 하드코딩 hex 금지. 필요한 뜻이 없으면 여기에 토큰을 추가한다.
     ═══════════════════════════════════════════════════════════════════ */
  /* ═══ 브랜드 3색 체계 ═══════════════════════════════════════════════
     1차 코랄   행동·선택·브랜드 — 누르는 것, 고른 것
     2차 딥블루 정보·안내·이동   — 읽는 것, 알려주는 것, 다른 곳으로 가는 것
     3차 그린   완료·성공·인증   — 끝난 것, 잘된 것, 믿을 수 있는 것
     색상환 간격 150°/143°/67° — 가장 가까운 쌍도 67° 라 확실히 갈린다.
     ⚠ 앰버는 3차로 부적합(코랄과 34°, 흰글씨 대비 2.55) → '강조·주의' 축으로만 남긴다.
     ═══════════════════════════════════════════════════════════════════ */
  --color-secondary: var(--light-color-secondary, #3F5F8A);
  --color-secondary-soft-bg: var(--light-color-secondary-soft-bg, #E8EEF6);
  --color-secondary-soft-text: var(--light-color-secondary-soft-text, #2F4A6E);
  --color-tertiary: var(--light-color-tertiary, #3F7D5C);
  --color-tertiary-soft-bg: var(--light-color-tertiary-soft-bg, #E6F0EA);
  --color-tertiary-soft-text: var(--light-color-tertiary-soft-text, #2F6A4C);

  /* 브랜드 3단 (1차 코랄의 명도 변형) */
  --color-brand: var(--light-color-brand, #D8432A);   /* 🎨 2026-08-28 B안(테라코타+세이지+슬레이트) — 사장님 확정, 장시간 편안함 우선 */              /* 메인 — GNB 바, 주요 브랜드 면 */
  --color-brand-sub: var(--light-color-brand-sub, var(--color-secondary));   /* 커뮤니티 = 2차색을 따라간다 */
  --color-brand-accent: var(--light-color-brand-accent, #D8432A);/* 강조 — 필수표시(*), 포커스, 강조 텍스트 */

  /* 상태 4 — 글/매물이 가진 상태 */
  --state-ongoing: var(--light-state-ongoing, #D8432A);          /* 분양중 · 실종중 (진행) — 2026-08-27 사장님 선택 ②: 흰 글씨에 맞춰 한 단계 진하게(전 #EE6A48) */
  --state-done: var(--light-state-done, var(--color-tertiary));   /* 완료 = 3차 그린을 따라간다 */
  --state-error: var(--light-state-error, #B8362F);              /* 오류 — ⚠ 브랜드와 4°라 아이콘·테두리 병기 필수 */
  --state-warning: var(--light-state-warning, #CF8400);          /* 경고 (진행중과 분리) */
  --state-info: var(--light-state-info, var(--color-secondary));  /* 안내 = 2차 딥블루를 따라간다 */
  /* 상태 soft — 목록 상태 뱃지(등록글관리 게재중/등록대기)처럼 연한 채움이 필요한 자리 */
  --state-done-soft-bg: var(--light-state-done-soft-bg, var(--color-tertiary-soft-bg));
  --state-done-soft-text: var(--light-state-done-soft-text, var(--color-tertiary-soft-text));
  --state-ongoing-soft-bg: var(--light-state-ongoing-soft-bg, #FBE4DE);
  --state-ongoing-soft-text: var(--light-state-ongoing-soft-text, #B3331E);
  --state-error-soft-bg: var(--light-state-error-soft-bg, #FBEDEC);      /* 오류 알럿 연한 배경 */
  --state-error-soft-text: var(--light-state-error-soft-text, #9C3830);  /* 그 위 글자 */

  /* 태그 4 — 목록 뱃지 */
  --tag-best-bg: var(--light-tag-best-bg, var(--color-secondary));   /* BEST = 2차색을 따라간다 */
  --tag-event-bg: var(--light-tag-event-bg, #D9A63A);
  --tag-notice-bg: var(--light-tag-notice-bg, #333333);
  --tag-new-bg: var(--light-new-icon-bg, #DD5848);

  /* 채움 위 글씨 — 채움색마다 대비 4.5 이상이 되는 짝. 관리자에서 편집 가능.
     🔴 '밝은 채움 + 어두운 잉크' 가 원칙이다(퀘이사존 a.question 방식).
        흰 글씨를 그대로 두면 분양중 2.99 · NEW 3.77 처럼 작은 글씨가 안 읽힌다. */
  --state-ongoing-text: var(--light-state-ongoing-text, #ffffff);                   /* 분양중·실종중 뱃지 글씨 — 2026-08-27 검정(#250602)→흰색(사장님: "주황에 검정 글씨 이상함") */
  --state-done-text: var(--light-state-done-text, #ffffff);                      /* 완료·게재중 뱃지 글씨 */
  --state-error-text: var(--light-state-error-text, #ffffff);                     /* 오류 뱃지 글씨 */
  --state-warning-text: var(--light-state-warning-text, #1D0D00);                   /* 경고 뱃지 글씨 */
  --state-info-text: var(--light-state-info-text, #ffffff);                      /* 안내 뱃지 글씨 */
  --tag-best-text: var(--light-tag-best-text, #ffffff);                        /* BEST 태그 글씨 */
  --tag-notice-text: var(--light-tag-notice-text, #ECECEC);                      /* 공지 태그 글씨 */
  --tag-new-text: var(--light-tag-new-text, #250604);                         /* NEW 아이콘 글씨 */
  /* ═══ 톤온톤(A안, 2026-08-28 사장님 확정) — 배지·정렬 탭·보기 전환·표 머리: 옅은 바탕 + 같은 계열 글씨. 사이트 전체 톤 통일의 기준 ═══ */
  --tint-coral-bg: var(--light-tint-coral-bg, #FBE4DE);   --tint-coral-fg: var(--light-tint-coral-fg, #B3331E);   /* 공지·베플·선택 탭 */
  --tint-blue-bg:  var(--light-tint-blue-bg, #E8EEF6);    --tint-blue-fg:  var(--light-tint-blue-fg, #3F5F8A);    /* BEST */
  --tint-amber-bg: var(--light-tint-amber-bg, #FBF1DC);   --tint-amber-fg: var(--light-tint-amber-fg, #8A6300);   /* 이벤트 */
  --tint-green-bg: var(--light-tint-green-bg, #E6F0EA);   --tint-green-fg: var(--light-tint-green-fg, #2F6A4C);   /* 완료·진행 */
  /* 게시판 목록 배지(2026-09-09 사장님 3안 "브랜드 틴트") — 파랑·올리브 계열 폐지, 로고 두 색(테라코타·앰버)+회색만. BEST=코랄 틴트(선택 탭과 동일), 이벤트=앰버 틴트 한 단계 진하게, 공지=회색 틴트 */
  --badge-best-bg:   var(--light-badge-best-bg, #FBE4DE);    --badge-best-fg:   var(--light-badge-best-fg, #B3331E);
  --badge-event-bg:  var(--light-badge-event-bg, #F9E6B4);   --badge-event-fg:  var(--light-badge-event-fg, #7A4E00);
  --badge-notice-bg: var(--light-badge-notice-bg, #ECECEF);  --badge-notice-fg: var(--light-badge-notice-fg, #444444);
  --table-head-bg: var(--light-table-head-bg, #F4F4F6);   --table-head-fg: var(--light-table-head-fg, #555555);   /* 표 머리(흰 글씨 #999 폐지) */
  --ctl-bg: var(--light-ctl-bg, #FFFFFF);  --ctl-border: var(--light-ctl-border, #E2E2E6);  --ctl-fg: var(--light-ctl-fg, #666666);   /* 네모 묶음 컨트롤(정렬 탭·보기 전환) */

  /* 강조 3 */
  /* ⚠ 순위 '번호 배경'은 --light-rank-number-bg 다. --light-ranking-color(#d74e4e)는
     랭킹 텍스트용 별개 키이므로 여기서 참조하면 안 된다(2026-07-29 오참조 수정) */
  --rank-color: var(--light-rank-number-bg, #FFFFFF);            /* 실시간 베스트 순위 번호 */
  --accent-price: var(--light-accent-price, #9C3830);            /* 리스트 가격 */
  --accent-money: var(--light-accent-money, #B85D00);            /* 결제 금액 강조 */

  /* UI 컴포넌트 색상 — 위 역할 토큰의 별칭(하위호환).
     기존 파일들이 --ui-checked-bg 등을 직접 참조하므로 남겨두되 값은 역할 토큰에서 받는다.
     ⚠ 관리자(button_color_settings.php)에서 --light-ui-checked-bg 를 저장하면 그 값이 우선한다.
        구값(#5B88D5 등)은 pro_inc/css_variables.php 의 $migrate_light 가 자동 교정한다. */
  --ui-checked-bg: var(--light-ui-checked-bg, var(--ui-select));
  --ui-checked-border: var(--light-ui-checked-border, var(--ui-select));
  --ui-search-btn-bg: var(--light-ui-search-btn-bg, var(--ui-action));
  --ui-search-btn-text: var(--light-ui-search-btn-text, #fff);
  --ui-icon-selected-bg: var(--light-ui-icon-selected-bg, var(--ui-select));
  --ui-tab-bg: var(--light-ui-tab-bg, #f0f0f0);
  --ui-tab-hover-bg: var(--light-ui-tab-hover-bg, #e4e4e4);

  /* 검색 옵션 영역 (라이트모드 기본) */
  --search-container-bg: var(--light-search-container-bg, #ffffff);
  --search-option-bg: var(--light-search-option-bg, #ffffff);
  --search-option-cell-bg: var(--light-search-option-cell-bg, #ffffff);
  --search-option-td-bg: var(--light-search-option-td-bg, #fafafa);
  --search-option-border: var(--light-search-option-border, #dadada);
  --search-input-bg: var(--light-search-input-bg, #ffffff);
  --search-input-border: var(--light-search-input-border, #cccccc);
  --search-input-text: var(--light-search-input-text, #333333);
  --search-icon-bg: var(--light-search-icon-bg, #fdfdfd);
  --search-icon-border: var(--light-search-icon-border, #cccccc);
  --search-icon-text: var(--light-search-icon-text, #333333);
  --search-icon-color: var(--light-search-icon-color, #333333);
  --search-reset-bg: var(--light-search-reset-bg, #f0f0f0);
  --search-toggle-hover-bg: var(--light-ui-tab-hover-bg, #e4e4e4);

  /* UI 컴포넌트 크기 */
  --ui-option-label-padding: 6px 12px;
  --ui-option-label-radius: 5px;
  --ui-option-label-fontsize: 13px;
  --ui-checkbox-size: 19px;
  --ui-radio-size: 16px;
  --ui-search-btn-width: 300px;
  --ui-search-btn-height: 46px;
  --ui-search-btn-fontsize: 15px;
  --ui-icon-group-width: 55px;
  --ui-icon-group-radius: 7px;
  --ui-icon-group-fontsize: 1.8em;
  
  /* ===== 폰트 (Typography) ===== */
  
  /* 폰트 패밀리 */
  --font-family-base: 'Noto Sans KR', sans-serif, Dotum, "돋움", Gulim, "굴림", Helvetica, Apple-Gothic;
  --font-family-nanum: 'Nanum Gothic', "나눔고딕", Dotum, "돋움", Gulim, "굴림", Helvetica, Apple-Gothic;
  --font-family-nanum-barun: 'Nanum Barun Gothic', "나눔바른고딕", Dotum, "돋움", Gulim, "굴림", Helvetica, Apple-Gothic;
  --font-family-dotum: 'dotum', Dotum, "돋움";
  
  /* 폰트 크기 */
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 15px;
  --font-size-2xl: 16px;
  --font-size-3xl: 20px;
  --font-size-4xl: 23px;
  --font-size-5xl: 24px;
  --font-size-6xl: 25px;
  --font-size-7xl: 32px;
  --font-size-8xl: 18px;
  
  /* 폰트 두께 */
  --font-weight-normal: normal;
  --font-weight-bold: bold;
  --font-weight-600: 600;
  --font-weight-700: 700;
  
  /* 줄 간격 */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  
  /* 자간 */
  --letter-spacing-tight: -1.0px;
  --letter-spacing-normal: 0;
  
  /* ===== 간격 (Spacing) ===== */
  
  /* 마진 */
  --spacing-xs: 2px;
  --spacing-sm: 5px;
  --spacing-md: 10px;
  --spacing-lg: 15px;
  --spacing-xl: 20px;
  --spacing-2xl: 25px;
  --spacing-3xl: 30px;
  --spacing-4xl: 35px;
  --spacing-5xl: 40px;
  --spacing-6xl: 50px;
  --spacing-7xl: 60px;
  --spacing-8xl: 70px;
  --spacing-9xl: 80px;
  --spacing-10xl: 100px;
  --spacing-11xl: 120px;
  --spacing-12xl: 135px;
  --spacing-13xl: 170px;
  --spacing-14xl: 180px;
  --spacing-15xl: 200px;
  
  /* 패딩 */
  --padding-xs: 4px;
  --padding-sm: 5px;
  --padding-md: 10px;
  --padding-lg: 15px;
  --padding-xl: 20px;
  --padding-2xl: 25px;
  --padding-3xl: 30px;
  --padding-4xl: 35px;
  --padding-5xl: 40px;
  --padding-6xl: 50px;
  --padding-7xl: 60px;
  --padding-8xl: 80px;
  --padding-9xl: 90px;
  --padding-10xl: 100px;
  --padding-11xl: 180px;
  
  /* ===== 테두리 (Borders) ===== */
  
  --border-width: 1px;
  --border-radius-sm: 2px;
  --border-radius-md: 5px;
  --border-radius-lg: 10px;
  
  /* ===== 그림자 (Shadows) ===== */
  
  --shadow-sm: 0 0 12px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);

  /* ===== 모달 오버레이(딤) — 사이트 전체 모달 배경 단일 관리 ===== */
  /* 모든 모달/팝업 오버레이는 background:var(--modal-dim) 사용. 값 변경은 여기 한 곳만 */
  /* 🔴 0.75 → 0.45 (2026-08-04, 사용자 지적 "모달창 띄워질 때 배경이 아예 불투명하다").
     0.75 는 흰 페이지 위에서 밝기 64/255 라 **뒤가 거의 안 보인다** — 사실상 불투명하게 읽힌다.
     0.45 면 143/255 로 뒤 화면이 또렷이 비치면서도 모달에 시선이 모인다.
     🔴 이 한 줄이 사이트 전체 모달 16곳에 걸린다. 값은 **여기서만** 바꿀 것. */
  --modal-dim: rgba(0, 0, 0, 0.45);

  /* ===== 기타 (Others) ===== */
  
  --transition-base: 0.2s ease;
  --transition-fast: 0.1s ease;
  --transition-slow: 0.3s ease;
  
  --z-index-dropdown: 100;
  --z-index-modal: 1000;
  --z-index-tooltip: 2000;
}

/* 다크모드 변수 — 전부 관리자(css_settings.php → css_variables.php)의 --dark-* 참조 */
html.dark,
body.dark {
  /* ═══ 🎨 B안(2026-08-28) 다크 기본 토큰 — 사이트 곳곳이 var(--dark-x, 폴백) 로 소비하는데 정의처가 없어 옛 폴백(무채 #232323·주황 #FF9F1C)이 살아 있었다.
     여기서 정의하면 모든 폴백을 이긴다. 웜 다크(테라코타 계열) — 관리자 css_settings.php 기본값과 동일 ═══ */
  --dark-bg-page:#151312; --dark-bg-primary:#151312; --dark-bg-secondary:#211E1B; --dark-bg-tertiary:#2A2623; --dark-bg-hover:#332E2A; --dark-bg-button:#2F2A26; --dark-bg-button-active:#F2C25E;
  --dark-text-primary:#E8E3DD; --dark-text-secondary:#ADA59D; --dark-text-tertiary:#8C857D; --dark-text-muted:#8C857D; --dark-text-hover:#F0EBE5; --dark-text-link-hover:#9BB6DA; --dark-text-link-visited:#B9AECF; --dark-text-emphasis:#F2C25E;
  --dark-border-primary:#3A3531; --dark-border-secondary:#48423D; --dark-border-input:#48423D; --dark-border-focus:#F2C25E;
  --dark-gnb-bg:#553129; --dark-gnb-active-bg:#3A2019; --dark-gnb-hover-bg:#3A2019; --dark-gnb-hover-underline:#F2C25E; /* [2026-09-12] 다크 GNB = 대형 커뮤니티식 "죽인 테라코타"(사장님 선택 B+): 라이트 띠 #D8432A(S69 L50)를 S34 L24 로 눌러 띠 형태만 남김. 골드 띠(#8A6318)는 "갈색 띠"로 읽혀 nara 노랑과 끊긴다고 반려. 현재 메뉴·hover 는 채움 대신 nara 글자+3px 밑줄(inc/gnb.php) — active-bg 는 띠와 같은 값 */ --dark-ranking-color:#F2C25E; --dark-rank-number-bg:#F2C25E; --dark-rank-number-text:#1B1310; --dark-tab-hover-bg:#F2C25E; --dark-tab-hover-text:#1B1310; --dark-icon-best:#7FA0CC; --dark-new-icon-bg:#F2C25E;
  --dark-ui-action:#F2C25E; --dark-ui-action-text:#1B1310; --dark-ui-active:#F2C25E; --dark-ui-active-text:#1B1310; --dark-ui-select:#F2C25E; --dark-ui-select-text:#1B1310; --dark-color-primary:#F2C25E; --dark-color-brown:#F2C25E; --dark-color-brand:#F2C25E;
  --dark-bg-current:#2A2623; --dark-border-light:#3A3531; --dark-ctl-bg:#2A2623; --dark-ctl-border:#3A3531; --dark-lnb-link-active:#F2C25E; --dark-search-container-bg:#1C1917; --dark-tag-best-bg:#7FA0CC; --dark-text-link:#9BB6DA; --dark-ui-action-soft-bg:#3B2A22; --dark-ui-active-soft-bg:#3B2A22; --dark-ui-search-btn-text:#1B1310;
  --dark-ui-tab-inactive-bg:#1E1B19; --dark-ui-tab-inactive-border:#33302C; --dark-ui-tab-inactive-text:#8C857D;
  /* [2026-09-12] 다크 "면"도 nara 노랑(사장님: GNB 만 빨간 면, 나머지 빨강은 싹 노랑). 잉크는 --dark-ui-action-text #1B1310 그대로(노랑 위 10:1). hover 는 한 단계 진한 노랑, primary-dark 는 라이트 로고 nara #D9A63A */
  --dark-color-brand-accent:#F2C25E; --dark-state-ongoing:#F2C25E; --dark-ui-current-page:#F2C25E; --dark-ui-action-soft-border:#F2C25E; --dark-ui-select-soft-border:#F2C25E; --dark-ui-action-hover:#E6B24A; --dark-color-primary-hover:#E6B24A; --dark-color-primary-dark:#D9A63A; --dark-color-primary-soft-text:#F2C25E;
  /* 텍스트 — 관리자 변수 매핑
     🔴 폴백 hex 를 반드시 붙일 것. `var(--dark-x)` 만 쓰면 그 키가 DB 에 저장돼 있지 않을 때
        변수가 미정의가 되고, 이를 참조한 선언이 통째로 무효화된다
        (color/border-color 는 currentColor 로 떨어져 흰색이 된다). 2026-07-30 */
  --color-text-primary: var(--dark-text-primary, #ECECEC);
  --color-text-emphasis: var(--dark-text-emphasis, #F2C25E);
  --lnb-link-active: var(--dark-lnb-link-active, #F2C25E);   /* [2026-09-12] 다크 강조 글자 = nara 노랑 */
  --color-text-secondary: var(--dark-text-secondary, #ACACAC);
  --color-text-tertiary: var(--dark-text-primary, #ECECEC);
  --color-text-quaternary: var(--dark-text-muted, #8C8C8C);
  --color-text-light: var(--dark-text-muted, #8C8C8C);
  --color-text-lighter: var(--dark-text-muted, #8C8C8C);
  --color-text-black: var(--dark-text-primary, #ECECEC);

  /* 링크 */
  --color-link-hover: var(--dark-color-link-hover, var(--dark-text-link-hover, #9BB6DA));
  --color-hover: var(--color-brand, #F2C25E);   /* 2026-09-14 다크 hover = 브랜드(노랑) */

  /* 배경 */
  --color-bg-white: var(--dark-bg-secondary, #232323);
  --color-bg-light: var(--dark-bg-secondary, #211E1B);
  --color-bg-lighter: var(--dark-bg-tertiary, #2A2623);
  --color-bg-gray: var(--dark-bg-hover, #333333);

  /* 테두리 */
  --color-border: var(--dark-border-primary, #3A3531);
  --color-border-light: var(--dark-border-primary, #3A3531);
  --color-border-medium: var(--dark-border-secondary, #48423D);
  --color-border-focus: var(--dark-border-focus, #F2C25E);

  /* ═══════════════════════════════════════════════════════════════════
     ★ 상태 색상 역할 토큰 — 다크모드 (라이트와 동일한 B안 구조)
     어두운 바탕에서 라이트 원색을 그대로 쓰면 탁해지므로 명도만 올린 대응색을 쓴다.
       레드  #D84841 → #EC8983 (코랄)
       블루  #D84841 → #EC8983
     ⚠ 이전 다크 테마는 활성/선택이 보라(#7B6ECF·#EC8983)와 주황(#ff9f1c)으로 흩어져 있었다. 지금은 코랄 단색으로
       섞여 있었다. 역할 구분이 안 보이므로 아래 토큰으로 통일한다.
     ═══════════════════════════════════════════════════════════════════ */
  --ui-action: var(--dark-ui-action, #F2C25E);
  --ui-action-hover: var(--dark-ui-action-hover, #E6B24A);
  --ui-action-text: var(--dark-ui-action-text, #1B1310);
  --ui-action-soft-bg: var(--dark-ui-action-soft-bg, #232323);
  --ui-action-soft-text: var(--dark-ui-action-soft-text, #F2C25E);
  --ui-action-soft-border: var(--dark-ui-action-soft-border, #F2C25E);
  --tag-event-text: var(--dark-tag-event-text, #2A2210);
  --rank-number-text: var(--dark-rank-number-text, #2A1F0A);

  /* 다크는 '밝은 채움 + 어두운 글씨'가 관행 — 흰 글씨를 얹으면 대비가 3:1대로 떨어진다 */
  --ui-active: var(--dark-ui-active, #F2C25E);
  --ui-active-text: var(--dark-ui-active-text, #1B1310);
  --ui-active-soft-bg: var(--dark-ui-active-soft-bg, #1A1A1A);    /* 다크 파일탭 활성면 = 검색 컨테이너 배경 */
  --ui-active-soft-text: var(--dark-ui-active-soft-text, #F2C25E);
  --ui-active-hover-bg: var(--dark-ui-active-hover-bg, #3B2A22);

  --ui-select: var(--dark-ui-select, #F2C25E);
  --ui-select-text: var(--dark-ui-select-text, #2A1F0A);
  --ui-select-soft-bg: var(--dark-ui-select-soft-bg, #3B2A22);
  --ui-select-soft-text: var(--dark-ui-select-soft-text, #F2C25E);
  --ui-select-soft-border: var(--dark-ui-select-soft-border, #F2C25E);

  --ui-current-page: var(--dark-ui-current-page, #F2C25E);
  --ui-current-page-text: var(--dark-ui-current-page-text, #1B1310);

  /* 보기모드 토글 — 다크도 같은 soft 규칙 */
  --ui-toolbar-select-bg: var(--dark-ui-toolbar-select-bg, #3B2A22);   /* 2026-08-28 A안 다크 짝(주황 → 코랄 톤) */
  --ui-toolbar-select-fg: var(--dark-ui-toolbar-select-fg, #F2C25E);

  /* 파일탭 비활성 — 다크 */
  --ui-tab-inactive-bg: var(--dark-ui-tab-inactive-bg, #202020);
  --ui-tab-inactive-text: var(--dark-ui-tab-inactive-text, #9A9A9A);
  --ui-tab-inactive-border: var(--dark-ui-tab-inactive-border, #2E2E2E);
  --ui-tab-inactive-hover-bg: var(--dark-ui-tab-inactive-hover-bg, #282828);
  --ui-tab-inactive-hover-text: var(--dark-ui-tab-inactive-hover-text, #C8C8C8);

  /* GNB 현재 메뉴 — 다크 GNB 배경(#1C1C1C)의 진한 톤 */
  --gnb-active-bg: var(--dark-gnb-active-bg, #3A2019);

  /* ═══════════════════════════════════════════════════════════════════
     ★ 의미 색 토큰 — 다크. 라이트와 같은 뜻, 어두운 바탕용 명도 대응값
     ═══════════════════════════════════════════════════════════════════ */
  /* ═══ 브랜드 3색 체계 — 다크 ═══ */
  --color-secondary: var(--dark-color-secondary, #7FA0CC);
  --color-secondary-soft-bg: var(--dark-color-secondary-soft-bg, #1F2C3F);
  --color-secondary-soft-text: var(--dark-color-secondary-soft-text, #9BB6DA);
  --color-tertiary: var(--dark-color-tertiary, #5FA37E);
  --color-tertiary-soft-bg: var(--dark-color-tertiary-soft-bg, #213328);
  --color-tertiary-soft-text: var(--dark-color-tertiary-soft-text, #8FC7A8);

  --color-brand: var(--dark-color-brand, #F2C25E);   /* 🎨 B안: 다크도 같은 테라코타(주황 폐지) */
  --color-brand-sub: var(--dark-color-brand-sub, var(--color-secondary));   /* 커뮤니티 = 2차색 */   /* 커뮤니티 → 2차색 */
  --color-brand-accent: var(--dark-color-brand-accent, #F2C25E);

  --state-ongoing: var(--dark-state-ongoing, #F2C25E);   /* 2026-08-27 사장님 선택 Ⓒ 깊은 벽돌색(전 #F8805C 는 다크에서 너무 밝음) */
  --state-done: var(--dark-state-done, var(--color-tertiary));
  --state-error: var(--dark-state-error, #E58A84);
  --state-warning: var(--dark-state-warning, #E3BC55);
  --state-info: var(--dark-state-info, var(--color-secondary));
  --state-done-soft-bg: var(--dark-state-done-soft-bg, var(--color-tertiary-soft-bg));
  --state-done-soft-text: var(--dark-state-done-soft-text, var(--color-tertiary-soft-text));
  --state-ongoing-soft-bg: var(--dark-state-ongoing-soft-bg, #3B2A22);
  --state-ongoing-soft-text: var(--dark-state-ongoing-soft-text, #F2C25E);
  --state-error-soft-bg: var(--dark-state-error-soft-bg, #2E1F1F);      /* 오류 알럿 연한 배경 */
  --state-error-soft-text: var(--dark-state-error-soft-text, #EDA3A3);  /* 그 위 글자 */

  --tag-best-bg: var(--dark-tag-best-bg, var(--color-secondary));   /* BEST = 2차색 (금색 폴백 잔재 제거) */
  --tag-event-bg: var(--dark-tag-event-bg, #E3BC55);
  --tag-notice-bg: var(--dark-tag-notice-bg, #3D3D3D);
  --tag-new-bg: var(--dark-new-icon-bg, #F2C25E);

  /* 채움 위 글씨 — 채움색마다 대비 4.5 이상이 되는 짝. 관리자에서 편집 가능.
     🔴 '밝은 채움 + 어두운 잉크' 가 원칙이다(퀘이사존 a.question 방식).
        흰 글씨를 그대로 두면 분양중 2.99 · NEW 3.77 처럼 작은 글씨가 안 읽힌다. */
  --state-ongoing-text: var(--dark-state-ongoing-text, #1B1310);                   /* 분양중·실종중 뱃지 글씨 — 2026-08-27 흰색 톤 */
  --state-done-text: var(--dark-state-done-text, #0E1F16);   /* 2026-09-11 초록 위 연한 글자 2.7:1 → 진한 글자 */                      /* 완료·게재중 뱃지 글씨 */
  --state-error-text: var(--dark-state-error-text, #1F0B0B);                     /* 오류 뱃지 글씨 */
  --state-warning-text: var(--dark-state-warning-text, #1C0E00);                   /* 경고 뱃지 글씨 */
  --state-info-text: var(--dark-state-info-text, #0C1219);   /* 2026-09-11 파랑 위 연한 글자 2.4:1 → 진한 글자 */                      /* 안내 뱃지 글씨 */
  --tag-best-text: var(--dark-tag-best-text, #0C1219);                        /* BEST 태그 글씨 */
  --tag-notice-text: var(--dark-tag-notice-text, #ECECEC);                      /* 공지 태그 글씨 */
  --tag-new-text: var(--dark-tag-new-text, #1C0E00);                         /* NEW 아이콘 글씨 */
  /* 톤온톤 다크 짝 — 반투명 톤(바탕에 녹아듦)·글씨 대비 유지 */
  --tint-coral-bg: var(--dark-tint-coral-bg, #3B2A22);   --tint-coral-fg: var(--dark-tint-coral-fg, #F2C25E);
  --tint-blue-bg:  var(--dark-tint-blue-bg, #1F2C3F);    --tint-blue-fg:  var(--dark-tint-blue-fg, #9BB6DA);
  --tint-amber-bg: var(--dark-tint-amber-bg, #3A3118);   --tint-amber-fg: var(--dark-tint-amber-fg, #E3BC55);
  --tint-green-bg: var(--dark-tint-green-bg, #213328);   --tint-green-fg: var(--dark-tint-green-fg, #8FC7A8);
  --badge-best-bg:   var(--dark-badge-best-bg, #3B2A22);    --badge-best-fg:   var(--dark-badge-best-fg, #F2C25E);   /* 목록 배지 다크 짝(2026-09-09) */
  --badge-event-bg:  var(--dark-badge-event-bg, #3A3118);   --badge-event-fg:  var(--dark-badge-event-fg, #E3BC55);
  --badge-notice-bg: var(--dark-badge-notice-bg, #2E2B29);  --badge-notice-fg: var(--dark-badge-notice-fg, #C8C2BB);
  --table-head-bg: var(--dark-table-head-bg, #2C2C2C);   --table-head-fg: var(--dark-table-head-fg, #BBBBBB);
  --ctl-bg: var(--dark-ctl-bg, #2A2A2A);  --ctl-border: var(--dark-ctl-border, #3A3A3A);  --ctl-fg: var(--dark-ctl-fg, #AAAAAA);

  --rank-color: var(--dark-rank-number-bg, #F2C25E);
  --accent-price: var(--dark-accent-price, #F2C25E);
  --accent-money: var(--dark-accent-money, #F2C25E);

  /* UI 컴포넌트 별칭 (하위호환) — 다크도 역할 토큰에서 받는다 */
  --ui-checked-bg: var(--dark-ui-checked-bg, var(--ui-select));
  --ui-checked-border: var(--dark-ui-checked-border, var(--ui-select));
  --ui-icon-selected-bg: var(--dark-ui-icon-selected-bg, var(--ui-select));
  --ui-search-btn-bg: var(--dark-ui-search-btn-bg, var(--ui-action));
  --ui-search-btn-text: var(--dark-ui-search-btn-text, #2A1F0A); /* 노랑 위 어두운 글씨(흰글씨 2.05 수리, 2026-08-16) */
  --ui-tab-bg: var(--dark-ui-tab-bg, #423B39);
  --ui-tab-hover-bg: var(--dark-ui-tab-hover-bg, #4A4240);

  /* 검색 옵션 영역
     🔴 폴백 hex 를 반드시 붙일 것 — 여기 18개가 폴백 없이 `var(--dark-x)` 만 쓰고 있어서,
        그 키가 DB 에 저장돼 있지 않으면 변수가 미정의가 되고 이를 참조한 선언이
        통째로 무효화됐다(border-color → currentColor → 흰 테두리). 2026-07-30 */
  --search-container-bg: var(--dark-search-container-bg, #1A1A1A);
  --search-option-bg: var(--dark-search-option-bg, #221E1D);
  --search-option-cell-bg: var(--dark-search-option-cell-bg, #2A2523);
  --search-option-td-bg: var(--dark-search-option-td-bg, #201C1B);
  --search-option-border: var(--dark-search-option-border, #3A3432);
  --search-input-bg: var(--dark-search-input-bg, #2E2E2E);
  --search-input-border: var(--dark-search-input-border, #3D3D3D);
  --search-input-text: var(--dark-search-input-text, #ECECEC);
  --search-icon-bg: var(--dark-search-icon-bg, #2E2E2E);
  --search-icon-border: var(--dark-search-icon-border, #3D3D3D);
  --search-icon-text: var(--dark-search-icon-text, #ECECEC);
  --search-icon-color: var(--dark-search-icon-color, #C0C0C0);
  --search-reset-bg: var(--dark-search-reset-bg, #2E2E2E);
  --search-toggle-hover-bg: var(--dark-search-toggle-hover-bg, #4A4240);

  /* 기본 색상 — 의미 색 토큰의 별칭(하위호환) */
  --color-primary: var(--color-brand-accent);
  --color-primary-hover: var(--dark-color-primary-hover, #E6B24A);
  --color-primary-dark: var(--dark-color-primary-dark, #D9A63A);

  /* 상태 색상 — 의미 색 토큰의 별칭(하위호환) */
  --color-error: var(--state-error);
  --color-error-dark: var(--dark-color-error-dark, #E08A8A);
  --color-error-darker: var(--dark-color-error-darker, #D07070);
  --color-orange: var(--state-ongoing);        /* 다크에서 흰색이던 오류 수정 */
  --color-orange-dark: var(--accent-money);
  --color-orange-darker: var(--dark-color-orange-darker, #E8900F);

  /* 특수 색상 — --color-brand 의 별칭 */
  --color-brown: var(--color-brand);

  /* 그림자 (다크모드 강화) */
  --shadow-sm: 0 0 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* 다크모드 전환 시 transition 비활성화 (깜빡임 제거) */
body.dark-transitioning,
body.dark-transitioning *,
body.dark-transitioning *::before,
body.dark-transitioning *::after {
  transition: none !important;
  animation: none !important;
}

/* ==AN-TOKENS-AUTO-START== */
/* 자동 생성 — md/tools/gen_color_tokens.php (2026-09-12, 토큰 268개). 손으로 고치지 말 것.
   폴백 없이 var(--dark-x) 만 쓴 참조가 항상 정의되도록 확정값을 :root 에 굳힌다.
   관리자 저장값(pro_inc/css_variables.php)은 이 뒤에 인라인으로 나와 이긴다. */
:root{--dark-accent-money:#F2C25E;--dark-accent-price:#F2C25E;--dark-badge-best-bg:#3B2A22;--dark-badge-best-fg:#F2C25E;--dark-badge-event-bg:#3A3118;--dark-badge-event-fg:#E3BC55;--dark-badge-notice-bg:#2E2B29;--dark-badge-notice-fg:#C8C2BB;--dark-bg-button:#2F2A26;--dark-bg-button-active:#F2C25E;--dark-bg-current:#2A2623;--dark-bg-hover:#332E2A;--dark-bg-input:#2E2E2E;--dark-bg-page:#151312;--dark-bg-primary:#151312;--dark-bg-secondary:#211E1B;--dark-bg-tertiary:#2A2623;--dark-border:#3A3531;--dark-border-focus:#F2C25E;--dark-border-input:#48423D;--dark-border-light:#3A3531;--dark-border-primary:#3A3531;--dark-border-secondary:#48423D;--dark-brand-red:#EC8983;--dark-color-brand:#F2C25E;--dark-color-brand-accent:#F2C25E;--dark-color-brown:#F2C25E;--dark-color-error-dark:#E08A8A;--dark-color-error-darker:#D07070;--dark-color-link-hover:#C3D0DE;--dark-color-orange-darker:#E8900F;--dark-color-primary:#F2C25E;--dark-color-primary-dark:#D9A63A;--dark-color-primary-hover:#E6B24A;--dark-color-primary-soft-bg:#3A2521;--dark-color-primary-soft-text:#F2C25E;--dark-color-secondary:#7FA0CC;--dark-color-secondary-soft-bg:#1F2C3F;--dark-color-secondary-soft-text:#9BB6DA;--dark-color-tertiary:#5FA37E;--dark-color-tertiary-soft-bg:#213328;--dark-color-tertiary-soft-text:#8FC7A8;--dark-ctl-bg:#2A2623;--dark-ctl-border:#3A3531;--dark-ctl-fg:#AAAAAA;--dark-gnb-active-bg:#3A2019;--dark-gnb-bg:#553129;--dark-gnb-hover-bg:#3A2019;--dark-gnb-hover-underline:#F2C25E;--dark-gnb-text:#ECECEC;--dark-gnb-underline:#252525;--dark-icon-best:#7FA0CC;--dark-lnb-link-active:#F2C25E;--dark-new-icon-bg:#F2C25E;--dark-rank-number-bg:#F2C25E;--dark-rank-number-text:#1B1310;--dark-ranking-color:#F2C25E;--dark-search-container-bg:#1C1917;--dark-search-icon-bg:#2E2E2E;--dark-search-icon-border:#3D3D3D;--dark-search-icon-color:#C0C0C0;--dark-search-icon-text:#ECECEC;--dark-search-input-bg:#2E2E2E;--dark-search-input-border:#3D3D3D;--dark-search-input-text:#ECECEC;--dark-search-option-bg:#221E1D;--dark-search-option-border:#3A3432;--dark-search-option-cell-bg:#2A2523;--dark-search-option-td-bg:#201C1B;--dark-search-reset-bg:#2E2E2E;--dark-search-toggle-hover-bg:#4A4240;--dark-state-done-text:#0E1F16;--dark-state-error:#E58A84;--dark-state-error-soft-bg:#2E1F1F;--dark-state-error-soft-text:#EDA3A3;--dark-state-error-text:#1F0B0B;--dark-state-info-text:#0C1219;--dark-state-ongoing:#F2C25E;--dark-state-ongoing-soft-bg:#3B2A22;--dark-state-ongoing-soft-text:#F2C25E;--dark-state-ongoing-text:#1B1310;--dark-state-warning:#E3BC55;--dark-state-warning-text:#1C0E00;--dark-tab-hover-bg:#F2C25E;--dark-tab-hover-text:#1B1310;--dark-table-head-bg:#2C2C2C;--dark-table-head-fg:#BBBBBB;--dark-tag-best-bg:#7FA0CC;--dark-tag-best-text:#0C1219;--dark-tag-event-bg:#E3BC55;--dark-tag-event-text:#2A2210;--dark-tag-new-text:#1C0E00;--dark-tag-notice-bg:#3D3D3D;--dark-tag-notice-text:#ECECEC;--dark-text-emphasis:#F2C25E;--dark-text-error:#EDA3A3;--dark-text-hover:#F0EBE5;--dark-text-link:#9BB6DA;--dark-text-link-hover:#9BB6DA;--dark-text-link-visited:#B9AECF;--dark-text-muted:#8C857D;--dark-text-primary:#E8E3DD;--dark-text-secondary:#ADA59D;--dark-text-tertiary:#8C857D;--dark-tint-amber-bg:#3A3118;--dark-tint-amber-fg:#E3BC55;--dark-tint-blue-bg:#1F2C3F;--dark-tint-blue-fg:#9BB6DA;--dark-tint-coral-bg:#3B2A22;--dark-tint-coral-fg:#F2C25E;--dark-tint-green-bg:#213328;--dark-tint-green-fg:#8FC7A8;--dark-ui-action:#F2C25E;--dark-ui-action-hover:#E6B24A;--dark-ui-action-soft-bg:#3B2A22;--dark-ui-action-soft-border:#F2C25E;--dark-ui-action-soft-text:#F2C25E;--dark-ui-action-text:#1B1310;--dark-ui-active:#F2C25E;--dark-ui-active-hover-bg:#3B2A22;--dark-ui-active-soft-bg:#3B2A22;--dark-ui-active-soft-text:#F2C25E;--dark-ui-active-text:#1B1310;--dark-ui-current-page:#F2C25E;--dark-ui-current-page-text:#1B1310;--dark-ui-search-btn-text:#1B1310;--dark-ui-select:#F2C25E;--dark-ui-select-soft-bg:#3B2A22;--dark-ui-select-soft-border:#F2C25E;--dark-ui-select-soft-text:#F2C25E;--dark-ui-select-text:#1B1310;--dark-ui-tab-bg:#423B39;--dark-ui-tab-hover-bg:#4A4240;--dark-ui-tab-inactive-bg:#1E1B19;--dark-ui-tab-inactive-border:#33302C;--dark-ui-tab-inactive-hover-bg:#282828;--dark-ui-tab-inactive-hover-text:#C8C8C8;--dark-ui-tab-inactive-text:#8C857D;--dark-ui-toolbar-select-bg:#3B2A22;--dark-ui-toolbar-select-fg:#F2C25E;--light-accent-money:#B85D00;--light-accent-price:#B3331E;--light-badge-best-bg:#FBE4DE;--light-badge-best-fg:#B3331E;--light-badge-event-bg:#F9E6B4;--light-badge-event-fg:#7A4E00;--light-badge-notice-bg:#ECECEF;--light-badge-notice-fg:#444444;--light-bg-button:#FFFFFF;--light-bg-button-active:#D8432A;--light-bg-current:#FFFAE6;--light-bg-page:#F2F2F3;--light-bg-primary:#FFF;--light-bg-secondary:#F9F9F8;--light-bg-tertiary:#F5F5F5;--light-border-focus:#D8432A;--light-border-primary:#EBEBEA;--light-border-secondary:#DDD;--light-brand-red:#BC5C53;--light-color-bg-gray:#E8E8E8;--light-color-bg-light:#EFEFF1;--light-color-bg-lighter:#F7F7F8;--light-color-bg-white:#FFF;--light-color-border:#D8D8DC;--light-color-border-light:#E0E0E4;--light-color-border-medium:#C8C8CE;--light-color-brand:#D8432A;--light-color-brand-accent:#D8432A;--light-color-error-dark:#CC3A3A;--light-color-error-darker:#D44E49;--light-color-link-hover:#3F5F8A;--light-color-orange-darker:#C7423E;--light-color-primary-dark:#B3331E;--light-color-primary-hover:#B3331E;--light-color-secondary:#3F5F8A;--light-color-secondary-soft-bg:#E8EEF6;--light-color-secondary-soft-text:#2F4A6E;--light-color-tertiary:#3F7D5C;--light-color-tertiary-soft-bg:#E6F0EA;--light-color-tertiary-soft-text:#2F6A4C;--light-color-text-black:#000;--light-color-text-light:#999;--light-color-text-lighter:#9A9A9A;--light-color-text-primary:#0F0F0F;--light-color-text-quaternary:#888;--light-color-text-secondary:#393939;--light-color-text-tertiary:#666;--light-ctl-bg:#FFFFFF;--light-ctl-border:#E2E2E6;--light-ctl-fg:#666666;--light-gnb-active-bg:#B3331E;--light-icon-best:#3F5F8A;--light-lnb-link-active:#B3331E;--light-new-icon-bg:#DD5848;--light-point-blue:#D8432A;--light-rank-number-bg:#D8432A;--light-rank-number-text:#FFFFFF;--light-search-container-bg:#FFFFFF;--light-search-icon-bg:#FDFDFD;--light-search-icon-border:#CCCCCC;--light-search-icon-color:#333333;--light-search-icon-text:#333333;--light-search-input-bg:#FFFFFF;--light-search-input-border:#CCCCCC;--light-search-input-text:#333333;--light-search-option-bg:#FFFFFF;--light-search-option-border:#DADADA;--light-search-option-cell-bg:#FFFFFF;--light-search-option-td-bg:#FAFAFA;--light-search-reset-bg:#F0F0F0;--light-state-done-text:#FFFFFF;--light-state-error:#B8362F;--light-state-error-soft-bg:#FBEDEC;--light-state-error-soft-text:#B3331E;--light-state-error-text:#FFFFFF;--light-state-info-text:#FFFFFF;--light-state-ongoing:#D8432A;--light-state-ongoing-soft-bg:#FBE4DE;--light-state-ongoing-soft-text:#B3331E;--light-state-ongoing-text:#FFFFFF;--light-state-warning:#CF8400;--light-state-warning-text:#1D0D00;--light-table-head-bg:#F4F4F6;--light-table-head-fg:#555555;--light-tag-best-text:#FFFFFF;--light-tag-event-bg:#D9A63A;--light-tag-event-text:#2A2210;--light-tag-new-text:#250604;--light-tag-notice-bg:#333333;--light-tag-notice-text:#ECECEC;--light-text-emphasis:#D8432A;--light-text-primary:#000;--light-tint-amber-bg:#FBF1DC;--light-tint-amber-fg:#8A6300;--light-tint-blue-bg:#E8EEF6;--light-tint-blue-fg:#3F5F8A;--light-tint-coral-bg:#FBE4DE;--light-tint-coral-fg:#B3331E;--light-tint-green-bg:#E6F0EA;--light-tint-green-fg:#2F6A4C;--light-ui-action:#D8432A;--light-ui-action-hover:#B3331E;--light-ui-action-soft-bg:#FFFFFF;--light-ui-action-soft-border:#B3331E;--light-ui-action-soft-text:#B3331E;--light-ui-action-text:#FFFFFF;--light-ui-active:#D8432A;--light-ui-active-hover-bg:#FBE4DE;--light-ui-active-soft-bg:#FFFFFF;--light-ui-active-soft-text:#B3331E;--light-ui-active-text:#FFFFFF;--light-ui-current-page:#D8432A;--light-ui-current-page-text:#1D0101;--light-ui-search-btn-text:#FFF;--light-ui-select:#D8432A;--light-ui-select-soft-bg:#FBE4DE;--light-ui-select-soft-border:#D8432A;--light-ui-select-soft-text:#B3331E;--light-ui-select-text:#FFFFFF;--light-ui-tab-bg:#F0F0F0;--light-ui-tab-hover-bg:#E4E4E4;--light-ui-tab-inactive-bg:#F7F8FA;--light-ui-tab-inactive-border:#E3E6EA;--light-ui-tab-inactive-hover-bg:#EEF0F3;--light-ui-tab-inactive-hover-text:#4B5563;--light-ui-tab-inactive-text:#6A727D;--light-ui-toolbar-select-bg:#FBE4DE;--light-ui-toolbar-select-fg:#B3331E;}
/* ==AN-TOKENS-AUTO-END== */


/* ── /css/font.css ── */
/*local은 사용자 글꼴을 먼저 가져오고, src는 local에 글꼴이 없을 경우 후순위*/
/*s:Noto Sans KR 경량화버젼*/
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 100; 
  font-display: optional; 
  src:local('Noto Sans Thin'),
      local('NotoSans-Thin'),
	    url(/fonts/NotoSansKR_WEB/NotoSansKR-Thin.woff2) format('woff2'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Thin.woff) format('woff'),
        url(/fonts/NotoSansKR_WEB/NotoSansKR-Thin.otf) format('opentype');
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 300; 
  font-display: optional; 
  src:local('Noto Sans Light'),
      local('NotoSans-Light'),
	  url(/fonts/NotoSansKR_WEB/NotoSansKR-Light.woff2) format('woff2')
	  url(/fonts/NotoSansKR_WEB/NotoSansKR-Light.woff) format('woff'),
	  url(/fonts/NotoSansKR_WEB/NotoSansKR-Light.otf) format('opentype');
	  
	  
}
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 350;
  font-display: optional;
  src:local('Noto Sans DemiLight'),
      local('NotoSans-DemiLight'),
	  url(/fonts/NotoSansKR_WEB/NotoSansKR-DemiLight.woff2) format('woff2'),
	  url(/fonts/NotoSansKR_WEB/NotoSansKR-DemiLight.woff) format('woff'), 
	  url(/fonts/NotoSansKR_WEB/NotoSansKR-DemiLight.otf) format('opentype');
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 400;
  font-display: optional; 
  src:  local('Noto Sans Regular'),
        local('NotoSans-Regular'),
		
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Regular.woff2) format('woff2'), 
        url(/fonts/NotoSansKR_WEB/NotoSansKR-Regular.woff) format('woff'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Regular.otf) format('opentype');
 } 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 500;
  font-display: optional; 
  src:local('Noto Sans Medium'),
      local('NotoSans-Medium'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Medium.woff2) format('woff2'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Medium.woff) format('woff'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Medium.otf) format('opentype');
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 700;
  font-display: optional; 
  src:  local('Noto Sans Bold'),
        local('NotoSans-Bold'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Bold.woff2) format('woff2'),
        url(/fonts/NotoSansKR_WEB/NotoSansKR-Bold.woff) format('woff'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Bold.otf) format('opentype');
} 
@font-face { 
  font-family: 'Noto Sans KR'; 
  font-style: normal; 
  font-weight: 900;
  font-display: optional; 
  src:local('Noto Sans Black'),
      local('NotoSans-Black'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Black.woff2) format('woff2'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Black.woff) format('woff'),
		url(/fonts/NotoSansKR_WEB/NotoSansKR-Black.otf) format('opentype');
}
/*e:Noto Sans KR 경량화버젼*/


/*local은 사용자 글꼴을 먼저 가져오고, src는 local에 글꼴이 없을 경우 후순위*/
/*s:Nanum Gothic(나눔고딕) 경량화버젼*/
/*e:Nanum Gothic(나눔고딕) 경량화버젼*/


/*local은 사용자 글꼴을 먼저 가져오고, src는 local에 글꼴이 없을 경우 후순위*/
/*s:Nanum Barun Gothic(나눔바른고딕) 경량화버젼*/
/*e:Nanum Barun Gothic(나눔바른고딕) 경량화버젼*/



/* ── /css/user_fonts.css ── */
/* ============================================================
 * user_fonts.css — 사용자 글꼴 선택기(A 글꼴)용 웹폰트 선언
 *
 * 여기 선언된 @font-face 는 "선택되기 전에는 다운로드되지 않는다".
 * (브라우저는 해당 font-family 를 실제로 쓰는 요소가 나타날 때만 fetch)
 * → 전역 폰트 var(--user-font) 를 바꾸는 순간에만 해당 폰트를 내려받음.
 *
 * 전부 웹서비스 임베딩이 허용된 무료 폰트만 사용:
 *   - Noto Sans KR / 나눔고딕 / 나눔바른고딕 / 나눔명조 : SIL Open Font License
 *   - 나눔스퀘어(NanumSquare) : 네이버 무료(웹폰트 배포 허용)
 *   - 마루부리(MaruBuri)      : 네이버 무료(웹폰트 배포 허용)
 *
 * ⚠️ 폰트 목록(이름/CSS값)은 inc/font_picker_modal.php 한 곳에서 관리.
 *   여기 @font-face 의 font-family 값과 반드시 일치시킬 것.
 *
 * font-display:optional — 폰트 내려받는 동안 기본 글꼴로 먼저 그림(빈 화면 방지).
 * 🔴 새로고침 때 "글씨체 바뀌는 장면(FOUT)" 은 여기서가 아니라 inc/header.php 의
 *   첫 페인트 게이트(html.font-wait: 선택 폰트 준비까지 본문 잠깐 숨김, 상한 0.5초)
 *   + 선택 폰트 preload(쿠키 user_font 기반)로 막는다 (2026-08-11).
 *   optional 로 바꾸는 안은 "첫 로드에 폰트가 아예 안 나옴" 문제로 기각됨.
 * ============================================================ */

/* ── 나눔고딕 (woff2) ───────────────────────────── */
@font-face{font-family:'Nanum Gothic';font-style:normal;font-weight:300;font-display:optional;
  src:local('NanumGothic Light'),
      url(/fonts/NanumGothic_WEB/NanumGothicLight.woff2) format('woff2'),
      url(/fonts/NanumGothic_WEB/NanumGothicLight.woff) format('woff');}
@font-face{font-family:'Nanum Gothic';font-style:normal;font-weight:400;font-display:optional;
  src:local('NanumGothic'),
      url(/fonts/NanumGothic_WEB/NanumGothic-Regular.woff2) format('woff2'),
      url(/fonts/NanumGothic_WEB/NanumGothic-Regular.woff) format('woff');}
@font-face{font-family:'Nanum Gothic';font-style:normal;font-weight:700;font-display:optional;
  src:local('NanumGothic Bold'),
      url(/fonts/NanumGothic_WEB/NanumGothicBold.woff2) format('woff2'),
      url(/fonts/NanumGothic_WEB/NanumGothicBold.woff) format('woff');}
@font-face{font-family:'Nanum Gothic';font-style:normal;font-weight:800;font-display:optional;
  src:local('NanumGothic ExtraBold'),
      url(/fonts/NanumGothic_WEB/NanumGothicExtraBold.woff2) format('woff2'),
      url(/fonts/NanumGothic_WEB/NanumGothicExtraBold.woff) format('woff');}

/* ── 나눔바른고딕 (woff2) ───────────────────────── */
@font-face{font-family:'Nanum Barun Gothic';font-style:normal;font-weight:300;font-display:optional;
  src:local('NanumBarunGothic Light'),
      url(/fonts/NanumBarunGothic_WEB/NanumBarunGothicLight.woff2) format('woff2'),
      url(/fonts/NanumBarunGothic_WEB/NanumBarunGothicLight.woff) format('woff');}
@font-face{font-family:'Nanum Barun Gothic';font-style:normal;font-weight:400;font-display:optional;
  src:local('NanumBarunGothic'),
      url(/fonts/NanumBarunGothic_WEB/NanumBarunGothic.woff2) format('woff2'),
      url(/fonts/NanumBarunGothic_WEB/NanumBarunGothic.woff) format('woff');}
@font-face{font-family:'Nanum Barun Gothic';font-style:normal;font-weight:700;font-display:optional;
  src:local('NanumBarunGothic Bold'),
      url(/fonts/NanumBarunGothic_WEB/NanumBarunGothicBold.woff2) format('woff2'),
      url(/fonts/NanumBarunGothic_WEB/NanumBarunGothicBold.woff) format('woff');}


/* ── 나눔명조 (otf) ────────────────────────────── */
@font-face{font-family:'Nanum Myeongjo';font-style:normal;font-weight:400;font-display:optional;
  src:local('NanumMyeongjo'),url(/fonts/Nanum_MYUNGJO/NanumMyeongjo.otf) format('opentype');}
@font-face{font-family:'Nanum Myeongjo';font-style:normal;font-weight:700;font-display:optional;
  src:local('NanumMyeongjo Bold'),url(/fonts/Nanum_MYUNGJO/NanumMyeongjoBold.otf) format('opentype');}
@font-face{font-family:'Nanum Myeongjo';font-style:normal;font-weight:800;font-display:optional;
  src:local('NanumMyeongjo ExtraBold'),url(/fonts/Nanum_MYUNGJO/NanumMyeongjoExtraBold.otf) format('opentype');}

/* ── 마루부리 (otf) ────────────────────────────── */
@font-face{font-family:'MaruBuri';font-style:normal;font-weight:200;font-display:optional;
  src:local('MaruBuri ExtraLight'),url(/fonts/MaruBuri/MaruBuri-ExtraLight.otf) format('opentype');}
@font-face{font-family:'MaruBuri';font-style:normal;font-weight:300;font-display:optional;
  src:local('MaruBuri Light'),url(/fonts/MaruBuri/MaruBuri-Light.otf) format('opentype');}
@font-face{font-family:'MaruBuri';font-style:normal;font-weight:400;font-display:optional;
  src:local('MaruBuri'),url(/fonts/MaruBuri/MaruBuri-Regular.otf) format('opentype');}
@font-face{font-family:'MaruBuri';font-style:normal;font-weight:600;font-display:optional;
  src:local('MaruBuri SemiBold'),url(/fonts/MaruBuri/MaruBuri-SemiBold.otf) format('opentype');}
@font-face{font-family:'MaruBuri';font-style:normal;font-weight:700;font-display:optional;
  src:local('MaruBuri Bold'),url(/fonts/MaruBuri/MaruBuri-Bold.otf) format('opentype');}

/* ── Pretendard (프리텐다드, woff2 한글 서브셋 — 가볍고 품질 우수) ──
   SIL Open Font License, 웹임베딩 허용. (삼죽가스에서 검증된 폰트) */
@font-face{font-family:'Pretendard';font-style:normal;font-weight:300;font-display:optional;
  src:local('Pretendard Light'),url(/fonts/Pretendard/subset/Pretendard-Light.woff2) format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:400;font-display:optional;
  src:local('Pretendard Regular'),url(/fonts/Pretendard/subset/Pretendard-Regular.woff2) format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:500;font-display:optional;
  src:local('Pretendard Medium'),url(/fonts/Pretendard/subset/Pretendard-Medium.woff2) format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:600;font-display:optional;
  src:local('Pretendard SemiBold'),url(/fonts/Pretendard/subset/Pretendard-SemiBold.woff2) format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:700;font-display:optional;
  src:local('Pretendard Bold'),url(/fonts/Pretendard/subset/Pretendard-Bold.woff2) format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:800;font-display:optional;
  src:local('Pretendard ExtraBold'),url(/fonts/Pretendard/subset/Pretendard-ExtraBold.woff2) format('woff2');}

/* ── 개성 폰트 (파일 업로드 시 자동 노출). woff2 우선, ttf 폴백 → 어떤 형식이든 동작 ── */

/* Gmarket Sans (지마켓) — /fonts/GmarketSans/GmarketSans{Light,Medium,Bold}.(otf|ttf|woff2) */
@font-face{font-family:'GmarketSans';font-weight:300;font-display:optional;
  src:local('GmarketSansLight'),url(/fonts/GmarketSans/GmarketSansLight.woff2) format('woff2'),url(/fonts/GmarketSans/GmarketSansLight.otf) format('opentype'),url(/fonts/GmarketSans/GmarketSansLight.ttf) format('truetype');}
@font-face{font-family:'GmarketSans';font-weight:400;font-display:optional;
  src:local('GmarketSansMedium'),url(/fonts/GmarketSans/GmarketSansMedium.woff2) format('woff2'),url(/fonts/GmarketSans/GmarketSansMedium.otf) format('opentype'),url(/fonts/GmarketSans/GmarketSansMedium.ttf) format('truetype');}
@font-face{font-family:'GmarketSans';font-weight:700;font-display:optional;
  src:local('GmarketSansBold'),url(/fonts/GmarketSans/GmarketSansBold.woff2) format('woff2'),url(/fonts/GmarketSans/GmarketSansBold.otf) format('opentype'),url(/fonts/GmarketSans/GmarketSansBold.ttf) format('truetype');}

/* 배민 도현체 (단일 굵기) — /fonts/BMDOHYEON/BMDOHYEON.(ttf|woff2) */
@font-face{font-family:'BMDOHYEON';font-weight:400;font-display:optional;
  src:local('BM DoHyeon'),local('BMDOHYEON'),url(/fonts/BMDOHYEON/BMDOHYEON.woff2) format('woff2'),url(/fonts/BMDOHYEON/BMDOHYEON.ttf) format('truetype');}
@font-face{font-family:'BMDOHYEON';font-weight:700;font-display:optional;
  src:local('BM DoHyeon'),local('BMDOHYEON'),url(/fonts/BMDOHYEON/BMDOHYEON.woff2) format('woff2'),url(/fonts/BMDOHYEON/BMDOHYEON.ttf) format('truetype');}

/* 빙그레체 — /fonts/Binggrae/Binggrae{,-Bold}.(ttf|woff2) */
@font-face{font-family:'Binggrae';font-weight:400;font-display:optional;
  src:local('Binggrae'),url(/fonts/Binggrae/Binggrae.woff2) format('woff2'),url(/fonts/Binggrae/Binggrae.ttf) format('truetype');}
@font-face{font-family:'Binggrae';font-weight:700;font-display:optional;
  src:local('Binggrae Bold'),url(/fonts/Binggrae/Binggrae-Bold.woff2) format('woff2'),url(/fonts/Binggrae/Binggrae-Bold.ttf) format('truetype');}

/* 도브마요 고딕 (통통 둥근 귀여움, 단일 굵기) — /fonts/Dovemayo/Dovemayo-Gothic.woff2 */
@font-face{font-family:'Dovemayo';font-weight:400;font-display:optional;
  src:local('Dovemayo Gothic'),url(/fonts/Dovemayo/Dovemayo-Gothic.woff2) format('woff2');}
@font-face{font-family:'Dovemayo';font-weight:700;font-display:optional;
  src:local('Dovemayo Gothic'),url(/fonts/Dovemayo/Dovemayo-Gothic.woff2) format('woff2');}

/* 나눔바른펜 (또렷한 펜 손글씨) — /fonts/NanumBarunpen/NanumBarunpen{,Bold}.woff2 */
@font-face{font-family:'NanumBarunpen';font-weight:400;font-display:optional;
  src:local('NanumBarunpen'),url(/fonts/NanumBarunpen/NanumBarunpen.woff2) format('woff2');}
@font-face{font-family:'NanumBarunpen';font-weight:700;font-display:optional;
  src:local('NanumBarunpen Bold'),url(/fonts/NanumBarunpen/NanumBarunpenBold.woff2) format('woff2');}

/* 서울한강체 — /fonts/SeoulHangang/SeoulHangang{M,B}.(ttf|woff2) */
@font-face{font-family:'SeoulHangang';font-weight:400;font-display:optional;
  src:local('SeoulHangang M'),url(/fonts/SeoulHangang/SeoulHangangM.woff2) format('woff2'),url(/fonts/SeoulHangang/SeoulHangangM.ttf) format('truetype');}
@font-face{font-family:'SeoulHangang';font-weight:700;font-display:optional;
  src:local('SeoulHangang B'),url(/fonts/SeoulHangang/SeoulHangangB.woff2) format('woff2'),url(/fonts/SeoulHangang/SeoulHangangB.ttf) format('truetype');}

/* 배민 주아체 (단일 굵기) — /fonts/BMJUA/BMJUA.(ttf|woff2) */
@font-face{font-family:'BMJUA';font-weight:400;font-display:optional;
  src:local('BM JUA'),url(/fonts/BMJUA/BMJUA.woff2) format('woff2'),url(/fonts/BMJUA/BMJUA.ttf) format('truetype');}
@font-face{font-family:'BMJUA';font-weight:700;font-display:optional;
  src:local('BM JUA'),url(/fonts/BMJUA/BMJUA.woff2) format('woff2'),url(/fonts/BMJUA/BMJUA.ttf) format('truetype');}

/* 빙그레 메로나체 — /fonts/BinggraeMelona/BinggraeMelona{,Bold}.(ttf|woff2) */
@font-face{font-family:'BinggraeMelona';font-weight:400;font-display:optional;
  src:local('Binggrae Melona'),url(/fonts/BinggraeMelona/BinggraeMelona.woff2) format('woff2'),url(/fonts/BinggraeMelona/BinggraeMelona.ttf) format('truetype');}
@font-face{font-family:'BinggraeMelona';font-weight:700;font-display:optional;
  src:local('Binggrae Melona Bold'),url(/fonts/BinggraeMelona/BinggraeMelonaBold.woff2) format('woff2'),url(/fonts/BinggraeMelona/BinggraeMelonaBold.ttf) format('truetype');}

/* 농심체 (단일 굵기) — /fonts/Nongshim/Nongshim.(ttf|woff2) */
@font-face{font-family:'Nongshim';font-weight:400;font-display:optional;
  src:local('Nongshim'),url(/fonts/Nongshim/Nongshim.woff2) format('woff2'),url(/fonts/Nongshim/Nongshim.ttf) format('truetype');}
@font-face{font-family:'Nongshim';font-weight:700;font-display:optional;
  src:local('Nongshim'),url(/fonts/Nongshim/Nongshim.woff2) format('woff2'),url(/fonts/Nongshim/Nongshim.ttf) format('truetype');}

/* 나눔스퀘어 네오 — 모던 기하학 고딕, 가독성 최상 */
@font-face{font-family:'NanumSquareNeo';font-weight:400;font-display:optional;
  src:local('NanumSquareNeo'),url(/fonts/NanumSquareNeo/NanumSquareNeo.woff2) format('woff2');}
@font-face{font-family:'NanumSquareNeo';font-weight:700;font-display:optional;
  src:local('NanumSquareNeo Bold'),url(/fonts/NanumSquareNeo/NanumSquareNeoB.woff2) format('woff2');}

/* 쿠키런 — /fonts/CookieRun/CookieRun{Regular,Bold}.(ttf|woff2) */
@font-face{font-family:'CookieRun';font-weight:400;font-display:optional;
  src:local('CookieRun Regular'),url(/fonts/CookieRun/CookieRunRegular.woff2) format('woff2'),url(/fonts/CookieRun/CookieRunRegular.ttf) format('truetype');}
@font-face{font-family:'CookieRun';font-weight:700;font-display:optional;
  src:local('CookieRun Bold'),url(/fonts/CookieRun/CookieRunBold.woff2) format('woff2'),url(/fonts/CookieRun/CookieRunBold.ttf) format('truetype');}



/* 리디바탕 (RIDIBatang) — 전자책 감성 명조, 긴 글 가독성 좋음 (단일 굵기) */
@font-face{font-family:'RIDIBatang';font-weight:400;font-display:optional;
  src:local('RIDIBatang'),url(/fonts/RIDIBatang/RIDIBatang.woff2) format('woff2');}
@font-face{font-family:'RIDIBatang';font-weight:700;font-display:optional;
  src:local('RIDIBatang'),url(/fonts/RIDIBatang/RIDIBatang.woff2) format('woff2');}

/* 폼요소 중 button 은 font-family 를 상속하지 않아 사용자 글꼴이 안 먹음 → 보정.
   (input/select/textarea 는 ui.css 기본 셀렉터에 포함돼 이미 적용됨) */
button{font-family:inherit;}

/* ============================================================
 * 🔴 사용자 글꼴 = 사이트 전체 강제 적용 (대형 커뮤니티식)
 *
 * - html 인라인에 --user-font 가 설정됐을 때만 활성.
 *   (사용자가 글꼴을 고르기 전에는 이 규칙이 꺼져 사이트 원래 모습 유지)
 * - !important 로 흩어진 font-family(예: 'dotum' 버튼, 클래스 규칙)까지 전부 덮음.
 * - 🔴 아이콘 폰트(FontAwesome: i / .fa / .fas / .fa-* 등)와 svg 는 반드시 제외.
 *   안 그러면 아이콘이 네모/글자로 깨짐.
 * - 이 파일은 새 파일이라 첫 배포 후엔 캐시버전 갱신해야 갱신분이 반영됨.
 * ============================================================ */
html[style*="--user-font"] body,
html[style*="--user-font"] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class*="fa-"]):not(.material-icons):not([class*="glyphicon"]):not(svg):not([style*="font-family"]):not([style*="font-family"] *):not(#flyerPopup):not(#flyerPopup *):not(.fid-flyerPopup):not(.fid-flyerPopup *):not(.fl-paper *){
  font-family: var(--user-font), sans-serif !important;   /* 2026-10-22 Noto 폴백 제거 — 선택 글꼴이 늦은 글자 몇 개 때문에 Noto 파일(굵기마다 160KB)을 통째로 받고 있었다 */
}
/* 🔴 전단지(#flyerPopup · 목록 판 .fid-flyerPopup · .fl-paper)는 제외 (2026-09-08 사장님 sample/줄바.png "특정 배율에서 번호 줄바뀜") —
 *  전단지는 인쇄물이라 **방문자의 사이트 글꼴**을 따라가면 안 된다. 이 규칙이 전단지 글자까지 덮어 방문자마다 글꼴이 달라졌고,
 *  등록자가 자기 글꼴(대개 Pretendard)로 폭 끝까지 맞춘 전화·주소가 다른 글꼴에선 줄바꿈됐다(로컬 Gulim 실측). 전단지 기본 글꼴은 엔진(engine.php)이 고정한다. */
/* 🔴 위 두 개의 :not([style*="font-family"]) 가 왜 필요한가 (2026-08-05)
 *  에디터에서 글꼴을 지정하면 본문에 <span style="font-family: X"> 로 저장된다.
 *  그런데 이 강제 규칙이 body 의 '모든' 요소를 !important 로 덮기 때문에
 *  작성자가 지정한 글꼴이 전부 무시되고 있었다(측정: computed 가 Pretendard 로 나옴).
 *  게다가 이 규칙은 "사용자가 글꼴을 고른 뒤에만" 켜지는 게 아니다 —
 *  inc/header.php 는 관리자 기본 글꼴이 'Noto Sans KR' 이 아니면 첫 방문자에게도
 *  --user-font 를 심는다. 현재 관리자 기본이 Pretendard 라 사실상 항상 켜져 있었다.
 *   · :not([style*="font-family"])    → 작성자가 지정한 요소 자체를 강제에서 제외
 *   · :not([style*="font-family"] *)  → 그 후손도 제외해서 지정 글꼴이 상속되게
 *  글꼴을 지정하지 않은 본문/UI 는 그대로 사용자 글꼴로 통일된다.
 *  ⚠ CSS 파일의 클래스 규칙(예: .foo{font-family:dotum})은 inline 이 아니므로
 *    여전히 덮인다 → 사이트 글꼴 통일 목적은 유지된다.
 *  ⚠ 컨테이너 이름(.board_view_container 등)으로 제외하지 않은 이유:
 *    새 본문 컨테이너가 생기면 또 깨진다. inline 지정 기준이 어디서나 통한다.
 */


/* ── /css/ui.css ── */
/* 2026-08-07 — 아래 어딘가의 background url() 중 '서버에 파일이 없는' 것을 none 으로 바꿨다.
   (선언째 지우면 같이 붙어 있던 padding/height 값까지 날아가 레이아웃이 바뀐다)
   지운 게 아니라 안 그리던 것을 명시했을 뿐이라 화면은 그대로고, 404 요청만 사라진다. */



/*스크롤 생길 시 밀리는 현상이 있어서 처음부터 스크롤 표시*/
html{
  overflow-y: scroll;
}


::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-thumb{
  background-color: var(--color-text-tertiary); /*#c1c1c1; 윈도우 스크롤바 색상*/
  border-radius: 4px;
}


/*text 드레그 시 select영역 색상*/
body ::selection{
	background: rgba(207, 58, 58, 0.3); /* 선택된 영역 배경을 D84841 색상으로 설정, 투명도 30% */
	color: inherit; /* 글자색은 원래 색상 유지 */
}

body.dark ::selection{
	background: rgba(226, 167, 51, 0.6); /* 선택된 영역 배경을 D84841 색상으로 설정, 투명도 30% */
	color: inherit; /* 글자색은 원래 색상 유지 */
}


/*font-family Noto Sans KR 버젼, line-height:160%에서 180%로 변경*/
body, h1, h2, h3, h4, h5, h6, div, p, blockquote, pre, address, ul, ol, li, dl, dt, dd, table, caption, th, td, form, fieldset, legend, hr, select, input, textarea{font-family:var(--user-font,'Pretendard'), sans-serif, Dotum,"돋움",Gulim,"굴림",Helvetica,Apple-Gothic;  -webkit-font-smoothing: antialiased;  -webkit-text-size-adjust:none !important; margin:0;padding:0;font-size:13px;color:var(--color-text-primary);line-height:180%;word-wrap:break-word;word-break:keep-all;}ul, ol{list-style:none;}


/*font-family 나눔고딕버젼*/


/*font-family 나눔고딕바른버젼*/


table{margin:0;padding:0;border-spacing:0;border:0;border-collapse:collapse;width:100%;}
*+html table{border-collapse:collapse;}
img, fieldset, abbr, acronym{border:0;}
address, caption, cite, code, dfn, em, var{font-style:normal;}
input, button, textarea{padding:0;color:#222;font-size:100%;}
table{border-collapse:collapse;border-spacing:0}
table, table th, table td{border:0;}
hr{display:none}
a{color:var(--color-text-primary);text-decoration:none;}
a:hover{color:var(--color-hover);text-decoration:none;}
a.selected{color:var(--color-link-hover);}
a:visited{color:var(--color-text-primary);}

/* 카테고리 링크 버튼 */

img{vertical-align:middle;}
/* body 배경 규칙 제거(2026-08-11) — inc/header.php 의 bg_page(!important) 토큰이 항상 이겨 죽은 규칙이었음(라이트·다크 짝 모두) */
select{font-size:13px;}
caption{display:none;}

/* ========== 전역 텍스트/폰트 CSS 변수 적용 ========== */
/* 제목 요소 */
h1, h2, h3, h4, h5, h6, .title, .tit, .ti, .ajax_main_list_title, .board_title{
    color: var(--color-text-primary, #212529);   /* 2026-09-11 다크 규칙이 없어 모바일 제목이 검정(1.1:1)이었다 — 토큰으로 */
    font-weight: 700;
}
/* 본문/일반 텍스트 */
body, p, span, div, td, th, li, .content, .txt, .desc{
    font-weight: 400;
}
/* 강조 텍스트 */
strong, b, em, .emphasis, .highlight, .important, .btn, .button{
    font-weight: 600;
}
/* 부가 정보 */
.sub, .info, .meta, .date, .time, .ajax_main_list_addr, .ajax_main_list_bz_nm{
    color: var(--color-secondary-soft-text, #1e4877);
}
/* 흐린 텍스트 */
.muted, .hint, .placeholder, .tit small, small{
    color: var(--color-text-quaternary, #888);
}
/* 링크 - 75-78번 라인에서 이미 정의됨 */
/* 다크모드 - 제목/부가정보 텍스트 색상 */
body.dark .ajax_main_list_title, body.dark .board_title{
    color: var(--dark-text-primary, #ECECEC);
}
body.dark .ajax_main_list_bz_nm, body.dark .ajax_main_list_addr{
    color: var(--dark-text-secondary, #ACACAC);
}
/* 강조/경고 */
.error, .danger, .warning{ color: var(--color-error); }
.accent, .brand{ color: var(--color-text-emphasis, #D8432A); }

/*마우스no_drag*/
.no_drag{-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;} 
#no_drag{-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;} 


.list_scrap{
    position: absolute;
    width: 140px;
    height: 20px;
    margin-top: -25px;
    margin-left: 9px;
    background: rgba(71, 85, 98, 0.9);
    color: white;
    opacity: 0.8;
    padding: 0.5px 0 2.5px 0;
    overflow: hidden;
    cursor: pointer;
    display: none;
}

/*툴팁 스타일*/
a.tip{position: relative;}
a.tip span{display:none;position:absolute;top:20px;left:-10px;text-align:center;width: 70px;padding: 2px;z-index: 100;background: #000;color: #fff;-moz-border-radius: 5px; /* 파폭 박스 둥근 정도 */-webkit-border-radius: 5px; /* 사파리 박스 둥근 정도 */}
a:hover.tip span{display: block;}

.hide{overflow:hidden;visibility:hidden;width:0;height:0;font-size:0;line-height:0;}
.gLeft{float:left;}

.ic, .ir{margin-right:5px;vertical-align:-2px;}

/*상단 gnb메뉴, community와 너비가 달라(커뮤니티 오른쪽 120x600배너때문) header <style>로 이동함*/
/* [정리 2026-08-14] 옛 하드코딩 폭(#wrap min-width:1355px 등) 제거 — 아래 #wrap 이 관리자 설정폭(--site-w)으로 대체함. */


#wrap{
    width: var(--site-w, 1330px) !important; /* 관리자 설정 폭(--site-w)으로 전 페이지 고정·중앙정렬. 기본 1330 */
    min-width: 0;
    margin: 0 auto;                          /* 넓은 화면에서 좌우 여백 */
    height: auto !important;
    overflow-x: visible; /* quick_menu가 wrap 밖으로 나가도 보이도록 */
}


/*아래 width와 min-width, max-width는 반응형 테스트 후 설정한 부분임(240422), 250224에 1200px로 수정함*/

.gnb{

    margin-left: auto;
    margin-right: auto;
    z-index: 9999;
    text-align: center;
}

.gnb ul{
    margin-left: auto; /* 가운데 정렬을 위한 자동 마진 설정 */
    margin-right: auto; /* 가운데 정렬을 위한 자동 마진 설정 */
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}

.gnb li{
    display: inline-block;
}

.gnb li a{
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #fdfdfd;
    letter-spacing: -0.45px;
}


.gnb li:not(:first-child):not(#gnb_login_button):not(#gnb_dark_mode_toggle) a{
    /* 첫 번째 자식을 제외하고, login-button 및 dark-mode-toggle 클래스를 가지지 않은 li의 자식 a 요소에 대한 스타일 */
	margin-left: 50.5px;
}

.gnb #gnb_login_button a, .gnb #gnb_dark_mode_toggle a{
    /* gnb_login_button 및 gnb_dark_mode_toggle 클래스의 자식 a 요소에 대한 스타일 */
	width: auto; /* 너비를 자동으로 설정하여 내용에 맞게 크기 조절되도록 함 */
    display: inline-block; /* 인라인 요소를 블록 요소로 변경하여 너비 설정이 적용되도록 함 */
    text-align: center; /* 내부 텍스트를 가운데 정렬 */
	outline: none; /* 클릭 시 포커스 표시 제거 */
    border: none; /* 클릭 시 테두리 제거 */
}


.gnb #gnb_login_button:hover a::after, .gnb #gnb_dark_mode_toggle:hover a::after{
    display: none; /*gnb 로그인버튼과 다크모드토글 밑줄 안나오게(임의로 밑줄 나오게 하는 스타일을 display:none함)*/
}


/********** s:메뉴 hover 및 선택 시 밑줄(underline) **********/
.gnb li a:hover, .gnb li.selected a, .gnb li .over a{
	text-decoration: none; /* 밑줄 제거 */
	color: #fdfdfd; /* 텍스트 색상 설정 */
}


/* 각 메뉴 항목에 밑줄 추가 */
.gnb li a{
	position: relative; /* 상대 위치 설정 */
}

.gnb li a::after{
	content: ""; /* 가상 요소 추가 */
	position: absolute; /* 절대 위치 설정 */
	bottom: 0; /* 하단에 위치 */
	left: 0; /* 왼쪽에 위치 */
	width: 100%; /* 전체 너비로 설정 */
	height: 1.75px; /* 밑줄 높이 설정 */
	background-color: transparent; /* 기본적으로 투명으로 설정 */
	/* transition: background-color 0.1s; */ /* 부드러운 효과를 위한 transition 추가 */
}


/* 마우스 호버 시 밑줄 색상 변경 */
.gnb li a:hover::after, .gnb li .over a::after{
	background-color: #fdfdfd;
}

/* 선택된 항목의 밑줄 색상 */
.gnb li.selected a::after{
	background-color: #fdfdfd; /* 클릭된 후에도 기본 색상으로 유지 */
}

/* 클릭 후 밑줄색상 (다크 모드) */
html.dark .gnb li a:hover::after, body.dark .gnb li a:hover::after{
	background-color: var(--dark-gnb-underline, #252525) !important;
}

/* 클릭 후 밑줄색상 (다크 모드에서 선택된 항목) */
html.dark .gnb li.selected a::after, html.dark .gnb li .over a::after, body.dark .gnb li.selected a::after, body.dark .gnb li .over a::after{
	/* 확정값도 흰색이라 겉보기는 그대로 — 토큰으로 바꿔 관리자 제어를 잇는다 */
	background-color: var(--dark-gnb-hover-underline, #fdfdfd) !important;
}

/* 다크모드 GNB 텍스트 색상 */
html.dark .gnb li a, body.dark .gnb li a{
	color: var(--dark-gnb-text, #ECECEC) !important;
}

html.dark .gnb li a:hover, html.dark .gnb li.selected a, html.dark .gnb li .over a, body.dark .gnb li a:hover, body.dark .gnb li.selected a, body.dark .gnb li .over a{
	color: #ffffff !important;
}


/********** e:메뉴 hover 및 선택 시 밑줄(underline) **********/


	


.footer{background:none !important;padding:0px !important;}


#body{position:relative;padding:30px 0 0;zoom:1;}
#body:after{display:block;clear:both;content:''}
#body .secondary{float:left;width:262px;}
#body .contents{float:right;margin-top:-4px;padding:0 0 50px;width:850px;}


.mTitle1{color:var(--color-brown); font-size:32px;font-weight:normal;margin:0 auto;}


/*ajax_main_list.php 마우스 hover 시 이미지 확대*/
.hover_img_wrap{
    overflow: hidden; /* 부모 영역을 넘지 않도록 설정 */
    position: relative;
    width: 100%;
}

.hover_img{
    overflow: hidden;
    position: relative; /* 부모 위치 설정 */
    width: 100%;
    margin: 0 auto; /* 가운데 정렬을 위해 추가 */
    
    /* 왼쪽, 오른쪽 상단에만 radius 적용 */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    /* 기본적으로 배경 이미지 크기 설정 */
    background-size: cover;
    background-position: center;
    transition: background-size .3s cubic-bezier(.165, .84, .44, 1);
}

/* 기본적으로 img에 대한 확대 효과 */
.hover_img img{
    -webkit-transition: -webkit-transform .2s cubic-bezier(.165, .84, .44, 1);
    transition: -webkit-transform .2s cubic-bezier(.165, .84, .44, 1);
    transition: transform .2s cubic-bezier(.165, .84, .44, 1);
    transition: transform .2s cubic-bezier(.165, .84, .44, 1), -webkit-transform .2s cubic-bezier(.165, .84, .44, 1);
    image-rendering: -webkit-optimize-contrast;
}


/* .imagebox-rotate에 대한 기본 설정 (배경 이미지 확대) */
.hover_img .imagebox-rotate{
    background-size: cover; /* 배경 이미지 크기를 부모 요소에 맞게 설정 */
    background-position: center;
    transition: transform .3s cubic-bezier(.165, .84, .44, 1); /* 배경 이미지 확대 애니메이션 */
    width: 100%;
    height: 100%;
}

/* .hover_img_wrap hover 시 이미지와 background-image 모두 확대(.bz_banner를 제외한 이미지에만 확대 효과 적용) */
.hover_img_wrap:hover .hover_img img:not(.bz_banner img), .hover_img_wrap:hover .hover_img .imagebox-rotate{
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transform: scale(1.1); /* 확대 시에도 부모 크기 유지 */
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/* (이전의 카드 이미지 회색 placeholder 제거 — 이미지 없는 카드까지 회색이 되는 문제로 롤백.
   실제 카드는 원래대로(회색 안 깔림), 빈 예약칸만 아래 .grid-skeleton-fill 로 회색 표시) */

/* ===== 결과가 페이지수(16)보다 적을 때 빈 칸으로 채워 그리드 높이 일정하게 (은은히) =====
   JS(fillGridToPageSize)가 실제 카드를 복제·비워 .grid-skeleton-fill 로 붙임 → 칸 너비 자동일치. */
.grid-skeleton-fill{
    background-color: #f2f4f7;
    border: 1px dashed var(--color-border, #ddd) !important;
    border-radius: 8px;
    box-sizing: border-box;
    pointer-events: none;
    opacity: .5;
}
body.dark .grid-skeleton-fill{
    background-color: var(--dark-bg-primary, #141414);
    border-color: var(--color-text-secondary, #393939) !important;
}
/* 박스형/갤러리형(다열 그리드)에서만 빈칸 표시, 그 외(리스트형 등)에선 숨김 */
.flex-container.grid-mode .grid-skeleton-fill, .flex-container.gallery-mode .grid-skeleton-fill{ display: flex !important; }
.flex-container:not(.grid-mode):not(.gallery-mode) .grid-skeleton-fill{ display: none !important; }


/*분양중/분양완료/찾습니다/찾았어요 아이콘 css*/
.adoption_N{background-color:var(--state-ongoing, #EE6A48);}
.adoption_Y{background-color:var(--state-done, #277A4C);}
.find_N{background-color:var(--state-ongoing, #EE6A48);}
.find_Y{background-color:var(--state-done, #277A4C);}


.mTab_main{ 
  width: 100%; 
}

.mTab_main ul:after{ 
  display: block; 
  clear: both; 
  content: ''; 
}
.mTab_main li{ 
  float: left; 
  /*
  width: calc(100% / 3);
  */
}
.mTab_main li a{
    display: block;
    color: #888;
    text-align: center;
    height: 35px;
    line-height: 35px;
}


.mTab_main li a:hover{
	text-decoration: none;
	color: #000;
}
.mTab_main li.selected a{
	color: #000;
}


/*mTab_main hover나 selected 시 버튼 아래 밑줄*/
.mTab_main .best_list_tab .main_best_box{
    position: relative;
	border-bottom: 1.5px solid #ccc;
}

.mTab_main .best_list_tab .main_best_box.selected, .mTab_main .best_list_tab .main_best_box:hover{
    border-bottom: 1.5px solid #333; /* 원하는 색상으로 변경 가능 */
}


/*.mTab4 다크모드(커뮤니티 메인 등록순/추천순/조회순/댓글순 탭 등)*/

.mTab7{width:var(--site-w,1330px);margin:0 auto;}
.mTab7 ul{zoom:1;margin-top:20px;}
.mTab7 ul:after{display:block;clear:both;content:''}
.mTab7 li{float:left;margin-top:3px;width:162.5px;}
.mTab7 li a{display:block;border-top:1px solid #dadada;border-right:1px solid #dadada;color:#444;font-size:16px;text-align:center;line-height:45px;height:45px;}
.mTab7 li a:hover{text-decoration:none;background-color:var(--color-brown);color:#fff}
.mTab7 li.selected a{background-color:var(--color-brown);color:#fff}

.mBox{
	border-bottom:0.1px solid #ddd;
	padding-top:10px;
	padding-left:18px;
	font-size:15px;
}
.mBoxBig{border-bottom:0.1px solid #ddd;padding:12px 8px;} /*회원가입 시 input입력 padding4.5px*/


/**********************플래티넘정보 / focus정보 / 많이본정보 (4줄 표시버젼)**********************/
.gMain2 .bg_platinum{
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 230px;
    zoom: 1;
}

.gMain2 .bg_platinum:after{
    display: block;
    clear: both;
    content: '';
    text-align: center;
}

/* 카드 그리드: float → grid 전환 — 카드 높이가 제각각이어도 줄이 밀리지 않음 */
.mList_platinum ul{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px 12px;
    padding: 8px 6px;
    margin: 0;
    list-style: none;
}

.mList_platinum li{
    position: relative;
    width: auto;
    margin: 0;
    box-sizing: border-box;
    background-color: #fff;
    border: none; /* 이중 테두리 방지: mList_platinum div의 border 사용 */
    border-radius: 10px;
    overflow: hidden; /* 내부 요소가 border-radius를 넘지 않도록 */
}
/* 다크모드 - 카드(li) 배경 + 테두리 + 그림자로 배경과 확실히 구분 */
body.dark .mList_platinum li{
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border-secondary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
/* 다크모드 - 섹션 컨테이너 border (인라인 스타일 덮어쓰기) */
body.dark .mList_platinum, body.dark .mList_platinum[style*="border"]{
    border-color: var(--dark-border-secondary) !important;
    border-left-color: var(--dark-border-secondary) !important;
    border-right-color: var(--dark-border-secondary) !important;
    border-bottom-color: var(--dark-border-secondary) !important;
    border-top-color: var(--dark-border-secondary) !important;
}

.mList_platinum li a:hover{
    text-decoration: none;
}

.mList_platinum li a:hover .hover{
    display: block;
}

/* 많이 본 리스트 - 이미지 부분 배경색 추가 (라이트모드) */
.mList_platinum li.hover_img_wrap .hover_img{
	background: #f6f6f6 !important;
}
/* 많이 본 리스트 - 제목 부분과 이미지 아래 부분 모두 배경색 추가 (라이트모드) */
.mList_platinum li table td, .mList_platinum li.hover_img_wrap table td, .mList_platinum table td{
	background: #f6f6f6 !important;
}
.mList_platinum table tr.ti td{
	box-sizing: border-box !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
	overflow: visible !important;
	max-width: 100% !important;
	display: block !important;
	width: 100% !important;
	min-height: 90px !important;
	background: #f6f6f6 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* 다크모드 - tr.ti td 배경색: 731-740번 라인에서 통합 정의됨 */
/* 테이블 하단 border-radius 추가 */
.mList_platinum table{
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
	overflow: hidden !important;
}
/* li 요소 좌우 border-radius 10px */
.mList_platinum li.hover_img_wrap{
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
	overflow: hidden !important;
}
/* 다크모드 - 이미지 부분 배경색 (no_img와 동일한 회색톤 var(--color-text-primary, #0f0f0f)) */
body.dark .mList_platinum li.hover_img_wrap .hover_img{
	background: var(--dark-bg-tertiary) !important;
}
/* 다크모드 - 제목 부분과 이미지 아래 부분 배경색 - 최대 우선순위 */
body.dark .mList_platinum li.hover_img_wrap table tr.ti td, body.dark .mList_platinum li table tr.ti td, body.dark .mList_platinum li.hover_img_wrap table td, body.dark .mList_platinum li table td, body.dark .mList_platinum table tr.ti td, body.dark .mList_platinum table td{
	background: var(--dark-bg-tertiary) !important;
	background-image: none !important;
}
body.dark .mList_platinum table tr.ti td{
	min-height: 90px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* 라이트모드 - 제목, 업체명, 주소 부분 배경색 적용 */
.mList_platinum table td .ajax_main_list_title, .mList_platinum table td .ajax_main_list_bz_nm, .mList_platinum table td .ajax_main_list_addr{
	background: #f6f6f6 !important;
}
/* 라이트모드 - 업체명과 주소 부분 전체 너비 채우기 */
.mList_platinum table tr.ti td .ajax_main_list_bz_nm, .mList_platinum table tr.ti td .ajax_main_list_addr{
	display: block !important;
	width: 100% !important;
	padding-left: 6px !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}
/* 라이트모드 - 주소 부분 하단 border-radius */
.mList_platinum table td .ajax_main_list_addr{
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}
/* 다크모드 - 제목, 업체명, 주소 부분 배경색 적용 (no_img와 동일한 회색톤) */
body.dark .mList_platinum table td .ajax_main_list_title, body.dark .mList_platinum table td .ajax_main_list_bz_nm, body.dark .mList_platinum table td .ajax_main_list_addr{
	background: var(--dark-bg-tertiary) !important;
}
/* 다크모드 - 업체명과 주소 부분 전체 너비 채우기 */
body.dark .mList_platinum table tr.ti td .ajax_main_list_bz_nm, body.dark .mList_platinum table tr.ti td .ajax_main_list_addr{
	display: block !important;
	width: 100% !important;
	padding-left: 6px !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}
/* 다크모드 - 주소 부분 하단 border-radius */
body.dark .mList_platinum table td .ajax_main_list_addr{
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}


/*마이페이지 수정/삭제/결제하기 버튼스타일*/
.myBtn1{
	display:inline-block;
	cursor:pointer; 
	font-size:14px; 
	width:88px; 
	height:30px; 
	line-height:30px; 
	text-align:center; 
	border:1px solid var(--color-border-medium, #CCC); 
	background-color:var(--color-border-medium, #CCC); 
	color:#fff;
}

.myBtn1_del{
	display:inline-block;
	cursor:pointer; 
	font-size:14px; 
	width:88px; 
	height:30px; 
	line-height:30px; 
	text-align:center; 
	border:1px solid #787878; 
	color:#787878;
	background-color:#ffffff; 
}

	
.myBtn2{width:86px; height:26px; text-align:center; border:1px solid #b4b4b4; background-color:#ffffff; color:var(--color-text-secondary); padding:4px 0 8px 0;margin-top:-1px;}


/*마이페이지 수정/삭제/결제하기 div버튼스타일*/


/*마이페이지 남은일자 옆 연장하기 span버튼스타일*/


.mBtn{width:90%;text-align:center;border:1px solid #ccc;padding:5px;}
.mBtn2{width:100%;text-align:center;border:1px solid #ccc;background-color:#d4d4d4;padding:4px 0 4px 0;}
 /*댓글 기본 글쓰기 등록버튼*/
.mBtn3{
    width: 100px; /* 너비 조절 */
    height: 82px; /* 높이 조절 */
    text-align: center;
    background-color: var(--color-primary-dark);
    color: #fff;
    line-height: 82px; /* 높이와 동일하게 설정 */
}

 /*(댓글에디터)댓글 기본 글쓰기 등록버튼*/
.mBtn3_2{width:90%;text-align:center;background-color:var(--color-primary-dark);color:#fff;padding:35px 0 35px 0;} /*업체페이지 한줄의견 등록버튼*/
.mBtn4{margin-left:-1px; width:100%;text-align:center;border:1px solid var(--color-brown);background-color:var(--color-brown);padding:4px 0 4px 0;color:#fff;margin-top:-1px;}


.mBtn5{width:120px;padding:6px 10px 6px 10px;background-color: var(--color-primary-dark, #c43a3e);color: #fff; text-align: center;border-radius: 3px;}
body.dark .mBtn5{
	background-color: var(--dark-ranking-color) !important;
	color: var(--dark-text-primary) !important;
}
.mBtn7{width:100%;text-align:center;border:1px solid #000;background-color:#000;padding:4px 0 4px 0;color:#fff;margin-top:-1px;}

.mIdx2{width:80px;padding:4px 10px 4px 10px;background-color: #404040;color: #fff;text-align: center;border-radius: 3px;}
.mIdx5{width:80px;padding:2px 10px 2px 10px;background-color: #fff;text-align:center;border: 1px solid #ccc;border-radius: 3px;}
.mBtn9 a{width:100%;color:#fff;background-color:#000;text-align:center;padding:6px 90px 6px 90px;}


/*list-bottom paging area 전체 부분 배경컬러*/
body.dark .pager_area{
	background: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important
}


/*paging area 하단 검색영역*/
body.dark .search_area{
	background: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important
}


/*paging area(리스트 아래 페이징 이동 영역)*/
/* 페이지네이션 이전/다음 버튼 */
.mPag a.mPag_arrow{
	border: 1px solid #d3d3d3 !important;
}
body.dark .mPag a.mPag_arrow{
	border-color: var(--dark-border-secondary) !important;
}

.mPag{line-height:normal; text-align:center; padding:18px 0;}

body.dark .mPag{
	background-color: var(--dark-bg-secondary) !important;
}


.mPag .bar, .mPag a, .mPag strong{display:inline-block; margin:1px 3px; color:#7D7D7D; font-weight:450; border:1px solid rgba(0, 0, 0, 0); font-size:18px;text-decoration:none;vertical-align:middle;text-align:center;min-width:28px;line-height:27px;height:28px;}
.mPag strong, .mPag .selected{background-color:#393939;border-color:#393939; color:#fff;}
.mPag .prev, .mPag .next{position:relative;display:inline-block;background:none 0 0 no-repeat;border:1px solid #d3d3d3;text-indent:-9999px;font-size:0;overflow:hidden;padding:0;margin:0;width:28px;height:28px;z-index:10;}
.mPag .prev{background-position:-28px 0;margin:0 12px 0 0;}
.mPag .next{background-position:-56px 0;margin:0 0 0 12px;}


/*mPag 페이지 하단 버튼css*/


#page_links.on{
	border:1px solid #d3d3d3;
	color:var(--state-ongoing, #ee6a48);
	background:#fdfdfd;
	font-weight:700;
}


#page_links:hover{
	border:1px solid #d3d3d3;
	color:var(--color-hover);
	background:#fdfdfd;
	font-weight:700;
}

#page_links.on:hover{
	color:var(--state-ongoing, #ee6a48);
	background:#fdfdfd;
}


/* page_links 다크모드(paging 넘버부분) */
body.dark #page_links.on{
	background: var(--color-text-tertiary, #666) !important;
	border-color: var(--color-text-quaternary, #888) !important;
	color: #fff !important;
	font-weight: 700;
}

body.dark #page_links.on:hover{
	background: var(--color-text-tertiary, #666) !important;
	border-color: var(--color-text-quaternary, #888) !important;
	color: #fff !important;
}

body.dark .mPag a{
	background-color: var(--dark-bg-tertiary) !important;
	border-color: var(--dark-border-secondary) !important;
	font-weight: 500 !important;
	color: var(--dark-text-secondary) !important;
}


/*다크모드에서 이전버튼,다음버튼 border none*/
body.dark #mPagPrevButton{
	border: none !important;
}


/*애니멀리더/스타 및 검색결과 리스트 페이징 버튼 부분 배경색*/
body.dark .paging_area{
	background-color: var(--dark-bg-tertiary) !important;
	border-color: var(--dark-border-secondary) !important;
}


/* body.dark .mPag a:hover — 제거됨 */


	


/*main.php 상단 배너&로그인창 너비*/


/*게시판 너비*/
.container_community .bg:after, .gMain2 .bg:after{display:block;clear:both;content:''}
.container_community h3, .gMain2 h3{color:#111;font-size:18px;line-height:130%;}
.container_community .gLeft, .gMain2 .gLeft, .container_community .gCenter, .gMain2 .gCenter{ /*하단 bottom_list 너비, 다른 것도 적용*/
	width:1060px; /*quick_menu -140px를 1200px에서 뺀 너비*/
	float:left;
}


/*게시판view css*/  /*ti:제목 , tit는 게시판이름(title상단)*/
.container_community .gCenter .tit, .gCenter .tit{font-size:17.5px; font-weight:500;}


/********** s:다크모드 커뮤니티 css **********/
/*ti:제목 , tit는 게시판이름(title상단)*/

	/*커뮤니티 view 시 게시판 너비 넓고 로그인 좁은버젼*/  /*bg : 타이틀부분, bg2:타이틀부분 밑 프로필/작성글보기 부분 + 본문*/
	/*board_view 시 게시판 상단 제목영역*/
	body .container_community .gCenter .bg, .gCenter .bg{
		background-color: #f2f2f2;
		border: 1px solid var(--color-border-light);
	}
	
	body.dark .container_community .gCenter .bg, .gCenter .bg{
		background-color: var(--dark-bg-tertiary);
		border: 1px solid var(--dark-border-secondary);
	}
	
	
	/*board_view 시 게시판 상단 제목color*/
	body .container_community .gCenter .ti, .gCenter .ti{
		color: #404040 !important;
		font-weight: 500;
	}
	
	body.dark .container_community .gCenter .ti, .gCenter .ti, body.dark .bg .count{
		color: var(--dark-text-primary) !important;
	}


	/*board_view 제목 위 카테고리 sub타이틀(board view 최상단 subtitle)*/
	body .container_community .gCenter .tit, .gCenter .tit{
		color: var(--color-link-hover) !important;
	}
	
	body.dark .container_community .gCenter .tit, .gCenter .tit{
		color: var(--dark-text-secondary) !important;
	}
	
	
	
	
	/*게시판 css*/
	/***기본모드(light)***/
	body .container_community .container_community .gCenter .tit, .gCenter .tit{
		color: var(--color-link-hover) !important;
	}

	/***다크모드(dark)***/
	body.dark .container_community .container_community .gCenter .tit, .gCenter .tit{
		color: var(--dark-text-secondary) !important;
	}
/* 2026-09-14 C1(사장님 선택, sample/색.png): 글 보기 맨 위 게시판 이름만 링크 파랑(#3F5F8A)이던 것 → 목록 화면 같은 이름과 똑같이 검정 700 / 다크 #E8E3DD.
   위 두 쌍 규칙은 쉼표로 .gCenter .tit 까지 묶여 있어 건드리면 다른 화면 .tit 도 바뀐다 → 글 보기(#bbs_container 바로 아래 span.tit)만 id 로 올려 덮는다(목록은 .bg3 안이라 해당 없음) */
:is(#bbs_container, .gCenter) .tit.an-bbs-name{ color: #DE8B77 !important; font-weight: 600 !important; }   /* 2026-09-14 사장님 "view 는 되는데 list 는 안 됨, 어차피 같아야 하니 class 통일": 글 보기·목록 상단·글쓰기 게시판 이름 = .an-bbs-name 한 클래스. :is() 가 id 특이도라 목록 PHP 인라인 <style>(.container_community .gCenter span.tit !important)·ui.css 옛 .tit 규칙을 모두 이긴다 */
body.dark :is(#bbs_container, .gCenter) .tit.an-bbs-name, html.dark :is(#bbs_container, .gCenter) .tit.an-bbs-name{ color: #D8B254 !important; }   /* 2026-09-14 B(사장님 선택): 옅은 코랄 #DE8B77 / 다크 사진 원 아이콘 노랑 #D8B254 */
/********** e:다크모드 커뮤니티 css **********/


/*커뮤니티 view 시 게시판 너비 넓고 로그인 좁은버젼*/  /*bg : 타이틀부분, bg2:타이틀부분 밑 프로필/작성글보기 부분 + 본문*/
.container_community .gCenter .bg, .gMain2 .gCenter .bg{width:969px; padding:14px 1px; margin-top:10px;}
.container_community .gCenter .bg2, .gMain2 .gCenter .bg2{padding:10px 15px;}
 /*게시판list*/
.container_community .gCenter .bg3, .gMain2 .gCenter .bg3{width:962px;}  /*게시판list*/


/*커뮤니티 view 내용 부분*/
.contents_body{
	border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
	padding:18px 15px;
}

body.dark .contents_body{
	border-color: var(--dark-border-secondary) !important;
}


body .container_community .gCenter .bg2, .gMain2 .gCenter .bg2{
	border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
	border-color: #ccc !important;
}


body.dark .container_community .gCenter .bg2, .gMain2 .gCenter .bg2{
	border-color: var(--dark-border-secondary) !important;
}


/*board_view 시 게시판 상단 제목*/
.container_community .gCenter .ti, .gMain2 .gCenter .ti{padding-left:10px; font-size:15px;}


/*다크모드 시 게시판 상단 제목부분*/
body.dark .bg div, body.dark .bg span{
	color: var(--dark-text-primary) !important;
}


/*다크모드 시 게시판 상단 글쓴이 정보 및 게시글작성일*/
body.dark .bg2 div, body.dark .bg2 span{
	color: var(--dark-text-primary) !important;
}

/*글쓴이 정보 왼쪽 유저 기본아이콘 배경*/
body.dark .bg2 .fa-solid{
	color: var(--dark-text-secondary) !important;
	background-color: var(--dark-bg-tertiary) !important;
	border-color: var(--dark-border-secondary) !important;
}


/*에디터 기본 글씨 색상*/
body.dark #contentsArea p{
	color: var(--dark-text-primary) !important;
}


/*검색버튼 css*/
.search_frm_button{
	border:0;
	cursor:pointer;
	background-color:#adadad;
	color:#fdfdfd;
	text-align:center;
	padding-right:4.6px;
	padding-bottom:1px;
	font-size:14px;
	font-weight:350;
	width:60px;
	height:35px;
	box-sizing: border-box;
}


/*community_main.php 최신글 리스트 & main.php 최신글, 핫클릭*/
.mList2{}
.mList2 .title{position:relative;float:left;width:68px;}
.mList2 li{
	padding:6px 12px;
	
	}
.mList2 li a{color:var(--color-text-secondary);font-size:14px;}
.mList2 li a:hover{color:var(--color-hover);}
/*최신글리스트 중 제목 밑 (간략)내용*/
.mList2 li .tit{
	color:#acacac;
	overflow: hidden;
	text-overflow: ellipsis;
	}


.mECenter1{
	width:336px; 
	float:right;
}

.hidden{display:none;}

.mCurriculum{position:relative;background-color:var(--color-primary-hover, #2b5f9e);padding:22px 30px 0;height:219px;}
.mCurriculum a{text-decoration:none;}
.mCurriculum h3{color:#fff;font-size:20px;margin:0 0 10px;}
.mCurriculum .tab{margin:0 0 10px;zoom:1;}
.mCurriculum .tab:after{display:block;clear:both;content:''}
.mCurriculum .tab a{display:inline-block;border-bottom:3px solid var(--color-primary-hover, #2b5f9e);color:#fff;font-size:16px;font-weight:600;margin-right:10px;letter-spacing:-1px;filter:alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;padding:0 0 5px;}
.mCurriculum .tab a.selected{border-bottom-color:#fff;filter:alpha(opacity=100);opacity:1;-moz-opacity:1;}
.mCurriculum .curriculumCont{color:#fff;font-weight:600;font-size:16px;line-height:120%;letter-spacing:-1px;}
.mCurriculum .curriculumCont .ts{color:#fff;font-size:14px;font-weight:normal;}
.mCurriculum .btn{position:absolute;bottom:25px;left:30px;display:block;border:1px solid #fff;font-size:15px;color:#fff;padding:0 18px;border-radius:24px;line-height:24px;height:24px;}


/*main.php 메인화면 너비*/
#container, .container{
    width: 100%;
    margin: 0 auto;
    position: relative;
    background: none;
}


#container_community, .container_community{
	width:var(--site-w,1330px); margin:0 auto;background:none;
}

.textOverflow{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bbshot_btn.selected{color:var(--color-brown);}

.mList .normal .ti{width:233px;}

#contentsArea *{line-height:1.8; font-size:15px; font-weight:350;} /*게시판 열람(board_view.php 시 기본 글씨크기*/
.media-container{max-width:900px;}
/* 유튜브 컨테이너는 span 이라 inline 이면 높이가 한 줄로 찌부러진다(인라인 style 없는 옛 글 보정) */
.media-container.youtube-embed{display:block;position:relative;overflow:hidden;box-sizing:border-box;}
#contentsArea img{max-width:900px;}
#find_contentsArea img{max-width:100%;}

.etc_list_2018{
	width:100%;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin-top:10px;
}

.etc_list_2018 td.alignL a{
	max-width: 280px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
}

.etc_list_2018 thead td{
	padding:10px;
	background:var(--color-bg-lighter);
	text-align:center;
}

.etc_list_2018 tbody tr{
	border-top:0.5px solid var(--color-border);
}

.etc_list_2018 tbody td{
	text-align:center;
}

.etc_list_2018 tbody td.alignL{
	text-align:left;
}

.etc_list_2018 td span.name{
	max-width: 100px;
	display: inline-block;
	color: #666;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	top: -1px;
	left: 2px;
	vertical-align: middle;
}

.etc_list_2018 td.alignL{
	padding:10px
}

.etc_list_2018 td.alignC{
	padding:10px;
	text-align:center;
}

/* ── 검색 리스트 하단 검색폼 (2026-07-17) ──
 * search/search_list_result/search_list_result.php — PC·모바일 공유 마크업.
 * 원래 input 에 인라인 style="width:170px;height:24px" 가 박혀 있었는데, 검색항목 <select> 를
 * 넣으면서 인라인을 걷어내고 여기로 옮겼다(모바일에서 인라인을 이기려면 !important 가 필요해서).
 * 모바일 쪽 크기는 mobile/m_css/m_ui.css 가 따로 잡는다(이 파일은 PC 만 로드).
 */
.search_area .srch_wrap{
	display:inline-flex;
	align-items:center;
	gap:4px;
}
.search_area .srch_wrap .search_by{ width:0; }
/* 위젯(40px)과 높이를 맞춘다 — 예전엔 input 이 24px 이라 나란히 두면 눈에 띄게 어긋났다 */
.search_area .srch_wrap .keyword{
	width:170px;
	height:34px;
	border:1px solid #ccc;
	border-radius:4px;
	padding:0 8px;
	box-sizing:border-box;
}
.search_area .srch_wrap .btn_search .mIdx5{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:34px;
	box-sizing:border-box;
}

.srch select, .srch input, .srch a.btn_search{
	float:left;
	margin-right:3px;
}

.srch a.btn_search{
	padding-top:3px;
}

.paginate a i.arrows{
	margin-top:6px;
}

.btn_both{
	padding:3px 0;
}


/*커뮤니티view 로그인창 너비 좁은버전, view 전체너비*/
  /*커뮤니티view 너비 넓은버전(이전글/다음글, 하단 목록/신고버튼)*/
.container_community .gCenter.bbs{width:972px;} /*이미지 너비 900px, 좌우 패딩 30px씩, border 좌우 1px씩, 총 982px*/


/*********게시판 리스트 및 커뮤니티 최소높이와 위치(margin-left), tab_right 총 높이는 tab_right_height_calc.js에서 동적으로 구함*********/
#bbs_container{
	min-height:1901px;
	margin-left:149px;
	position:relative;
	z-index:9999;
}


.paginate .on{
	color: var(--color-link-hover);
	font-weight: bold;
}

.footer{
	border-top:none;
}


.sign .tx{
	width: 478px;
}


.sign{clear: both;  border: 1px solid #ddd;  margin: 15px 0 -1px 0;  padding: 10px 15px 10px 10px; overflow: hidden;  zoom: 1; }
.sign .pf{float: left; margin: 0 15px 0 0;  width: 60px;  height: 60px;}
.sign .profile{float: left;  margin: 0 6px 5px 0; height: 60px;  width: 60px;}
.sign .profile img{border: 1px solid #ddd;  border-radius: 100px; height: 60px;  width: 60px;}
.sign .sign .name{position:relative; width: 18px;  height: 18px; vertical-align: middle;}
.sign .tx{float: left; width: 500px;  overflow: hidden;  line-height: 1.3;  font-size: 12px;  padding: 0 0 0 15px;  color: #999;}


.btn_scroll_top{
	position:sticky;
	top:0px;
	width:120px;
	min-width:120px;
	z-index: 999999;
}

/* JS 위치 계산 전까지 숨김 (새로고침 시 깜빡임 방지) */
#quick_menu_btn{
	opacity: 0;
	transition: opacity 0.15s ease;
}
#quick_menu_btn.qm-positioned{
	display: block !important;
	opacity: 1;
}


.btn_scroll_top dl{background:white;}
.btn_scroll_top dl{
	border:1px solid #d1d1d1;
	border-top:none;
	cursor:pointer;
	max-width:120px;
}


/* quick_menu (다크 모드) */
body.dark .btn_scroll_top dl{
	background-color: #2E2E2E !important;
	border-color: var(--search-option-border) !important;
}

body.dark .btn_scroll_top dl i, body.dark .btn_scroll_top dl span{
	color: #ddd !important;
}


.btn_scroll_top dd{
	text-align:center;
}


.btn_scroll_top img{border-width:0px;}


/*버튼 정렬 LAYOUT*/
.btn_cen{text-align:center}/*중앙 정렬 버튼*/
.btn_both{overflow:hidden;/*clear:both;*/width:100%;}/*양쪽 정렬 버튼*/
.btn_both .fl{float:left}
.btn_both .fr{float:right}


/* 텍스트 버튼-기본 */
.btn_pack_white{display:inline-block;overflow:visible;position:relative;margin:0;padding:0;border:0;background:none no-repeat;color:#484848;text-decoration:none !important;vertical-align:top;white-space:nowrap}

.upjong{dlisplay:blcok;width:100%}
.upjong li{float:left;width:25%}

.theSame td{border-top:1px solid red;border-bottom:1px solid red;}
.theSame *{color:var(--color-brand) !important;}   /* 2026-09-14 하단 목록 「현재글」 줄 = 링크 파랑 → 브랜드색(라이트 빨강·다크 노랑) */

/* 2026-07-17 제거: 어디선가 복붙된 데모 CSS(.links / .link-effect-9).
   위 .mPayt 오타로 470행이 통째로 죽어 있어서 여태 안 보였을 뿐이고,
   오타를 고치면 .links{padding:50px;background:#313131} 가 살아나
   모바일 로그인(m_member_login.php:125 <div class="links">)이 검은 박스가 된다.
   .link-effect-9 은 사용처 0곳. 원래 "이 구간 좀 이상한 것 같음" 주석이 붙어 있던 블록. */


/* for chrome */
/*@media screen and (-webkit-min-device-pixel-ratio:0){
	
}*/


/* for ie8 */
/*@media \0screen{

}*/


/*========================================
  다크모드 Border 및 배경 적용
========================================*/
body.dark #footer{
	border-top-color: var(--dark-border-secondary);
}

body.dark .mTab7 li a{
	border-color: var(--dark-border-secondary);
	color: var(--dark-text-primary);
}

/* mList1, mList2, mList3, mLink1 다크모드 링크 스타일 */
body.dark .mList1 li a, body.dark .mList2 li a{
	color: var(--dark-text-primary, #ECECEC);
}

body.dark .mList2 li a:hover{
	color: var(--color-hover);
}

body.dark .mBoxBig{
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .mBtn2{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
}

body.dark .mPag .next, body.dark .mPag .prev{
	border-color: var(--dark-border-secondary);
}

body.dark .sign{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-primary);
}

body.dark .sign .profile img{
	border-color: var(--dark-border-secondary);
}


/*========================================
  다크모드 누락 규칙 보완
========================================*/

/* mTab_main 베스트탭 하단 border */
body.dark .mTab_main .best_list_tab .main_best_box{
	border-bottom-color: var(--dark-border-secondary) !important;
}
body.dark .mTab_main .best_list_tab .main_best_box.selected, body.dark .mTab_main .best_list_tab .main_best_box:hover{
	border-bottom-color: var(--dark-text-primary, #ECECEC) !important;
}

/* mTab5_1 li 배경 */

/* mTab6 li a 기본/hover/selected */

/* mTab7 li a hover/selected */
body.dark .mTab7 li a:hover, body.dark .mTab7 li.selected a{
	background-color: var(--dark-tab-hover-bg, #FF9F1C) !important;
	color: var(--dark-tab-hover-text, #2A1F0A) !important;
}

/* mBox, mBoxBig border */
body.dark .mBox{
	border-bottom-color: var(--dark-border-secondary) !important;
}

/* mList_basic li, mList_focus li 배경 */

/* myBtn1_del 배경/border */
body.dark .myBtn1_del{
	background-color: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/* myBtn2, myBtn3 배경/border */
body.dark .myBtn2{
	background-color: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/* myBtn1_1 다크모드 */

/* myBtn1_2 배경 */

/* mBtn border */
body.dark .mBtn{
	border-color: var(--dark-border-secondary) !important;
}

/* mBtn10 a 배경/border */
body.dark .mBtn10 a{
	background-color: var(--dark-bg-button) !important;
	border-color: var(--dark-border-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/* mIdx5 배경/border */
body.dark .mIdx5{
	background-color: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/* #page_links.on, #page_links:hover 라이트 배경 → 다크 */
body.dark #page_links:hover{
	background: transparent !important;
	border-color: transparent !important;
	color: inherit !important;
}

/* etc_list_2018 테이블 border/배경 */
body.dark .etc_list_2018{
	border-color: var(--dark-border-secondary) !important;
}
body.dark .etc_list_2018 thead td{
	background-color: var(--dark-bg-secondary) !important;
	color: var(--dark-text-primary) !important;
}
body.dark .etc_list_2018 tbody tr{
	border-top-color: var(--dark-border-secondary) !important;
}
body.dark .etc_list_2018 tbody td{
	color: var(--dark-text-primary) !important;
}
body.dark .etc_list_2018 td span.name{
	color: var(--dark-text-secondary, #ACACAC) !important;
}

/* mLink1 border */

/* list_dsinfo button 배경 */
body.dark .list_dsinfo button{
	background-color: var(--dark-bg-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/* search_frm_button 다크모드 */
body.dark .search_frm_button{
	background-color: var(--search-input-bg) !important;
	color: var(--search-input-text) !important;
}

/* mBtn3, mBtn3_2 다크모드 */
body.dark .mBtn3{
	background-color: var(--color-primary-dark, #c43a3e) !important;
}

/* mBtn4 다크모드 */
body.dark .mBtn4{
	background-color: var(--color-primary-dark, #c43a3e) !important;
	border-color: var(--color-primary-dark, #c43a3e) !important;
}

/* mBtn9 a 다크모드 */
body.dark .mBtn9 a{
	background-color: #333 !important;
	color: var(--dark-text-primary) !important;
}

/* mTab_main li a 다크모드 */
body.dark .mTab_main li a{
	color: var(--dark-text-secondary, #ACACAC) !important;
}
body.dark .mTab_main li a:hover, body.dark .mTab_main li.selected a{
	color: var(--dark-text-primary) !important;
}

/* in_file 다크모드 */

/* mTab7 탭 */
body.dark .mTab7 li a{
	border-color: var(--dark-border-secondary);
	color: var(--dark-text-secondary);
}

/* mBox / mBoxBig 하단 border */
body.dark .mBox, body.dark .mBoxBig{
	border-bottom-color: var(--dark-border-secondary);
}

/* 플래티넘/포커스/많이본 리스트 아이템 배경 */
body.dark .mList_platinum li{
	background-color: var(--dark-bg-secondary);
}

/* myBtn 시리즈 */
body.dark .myBtn2{
	background-color: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/* page_links hover 다크모드 — 효과 제거 */
body.dark #page_links:hover{
	background-color: transparent !important;
	border-color: transparent !important;
	color: inherit !important;
}

/* 다크모드 페이징 hover — 제거됨 */

/* .on 현재 페이지 — hover 포함 고정 */
body.dark #page_links.on, body.dark #page_links.on:hover{
	background-color: var(--color-text-tertiary, #666) !important;
	border-color: var(--color-text-quaternary, #888) !important;
	color: #fff !important;
}

/* dsinfo 버튼 */
body.dark .list_dsinfo button{
	color: var(--dark-text-primary);
	background: var(--dark-bg-secondary);
}

/* ══ 2026-09-11 다크: 테라코타(#D46A50) 채움 버튼·배지의 글자는 진한 글자(--dark-ui-action-text #1B1310, 7:1). 흰 글자는 3.5:1 라 사장님 확정으로 전부 진하게.
   대상 = 다크 전수 검사(md/mockup/dark_audit_260911)에서 잡힌 것. 새 주황 버튼을 만들 땐 color:var(--ui-action-text) 를 쓰면 여기 안 넣어도 된다.
   `html body.dark` = layout.css/mypage.css/animal.css 의 `body.dark … !important` 보다 특이도 한 단계 위(같은 !important 끼리는 특이도 싸움). */
html body.dark .pdha-badge, html body.dark .pdha-acts .tel, html body.dark .pdha-acts .tel i, html body.dark .pdh-acts .tel, html body.dark .pdh-acts .tel i, html body.dark button.tel, html body.dark button.tel i, html body.dark .write_button, html body.dark .write_button span, html body.dark .write_button i, html body.dark .page_back, html body.dark .button_submit, html body.dark .an-free, html body.dark .pw-btn, html body.dark .pay-detail-badge, html body.dark .hover_img_wrap span[style*="background:var(--color-brand"], html body.dark [style*="background:var(--color-brand"], html body.dark [style*="background-color:var(--color-brand"], html body.dark .ageCheck_submit a, html body.dark .ageCheck_submit a span, html body.dark .ageCheck_submit a i, html body.dark #mffCta a, html body.dark #mffCta a span, html body.dark #mffCta a i, html body.dark #fpToStep2, html body.dark #fpToStep2 span, html body.dark .btn_login, html body.dark .signup-button, html body.dark .fl-mrow-st b, html body.dark .m-dbar__main, html body.dark .m-dbar__main i, html body.dark .mff-ttl i, html body.dark .mff-ah .n, html body.dark .an-empty__b, html body.dark .mBtn5, html body.dark .cm-sort li.selected a, html body.dark .animal_info_container .pdha-badge, html body.dark .animal_info_container .pdha-acts .tel, html body.dark .animal_info_container .pdha-acts .tel i, html body.dark .animal_info_container .pdh-acts .tel, html body.dark .animal_info_container .pdh-acts .tel i, html body.dark .animal_info_container .write_button, html body.dark .animal_info_container .write_button span, html body.dark .animal_info_container .write_button i, html body.dark .animal_info_container button.tel, html body.dark .animal_info_container button.tel i{ color: var(--dark-ui-action-text, #1B1310) !important; }

/* ══ 2026-09-11 다크: 에디터로 쓴 본문·댓글의 '검정 계열' 인라인 글자색(rgb(68,68,68) 등)은 다크 바탕에서 1~2:1 로 안 보인다(동물병원 소개글 실측) → 본문색으로. 유채색 지정은 그대로 둔다. */
body.dark .board_view_container [style*="color: rgb(0, 0, 0)"], body.dark .board_view_container [style*="color:rgb(0, 0, 0)"], body.dark .comment_textarea [style*="color: rgb(0, 0, 0)"], body.dark .comment_textarea [style*="color:rgb(0, 0, 0)"], body.dark #contentsArea [style*="color: rgb(0, 0, 0)"], body.dark #contentsArea [style*="color:rgb(0, 0, 0)"], body.dark .board_view_container [style*="color: rgb(17, 17, 17)"], body.dark .board_view_container [style*="color:rgb(17, 17, 17)"], body.dark .comment_textarea [style*="color: rgb(17, 17, 17)"], body.dark .comment_textarea [style*="color:rgb(17, 17, 17)"], body.dark #contentsArea [style*="color: rgb(17, 17, 17)"], body.dark #contentsArea [style*="color:rgb(17, 17, 17)"], body.dark .board_view_container [style*="color: rgb(34, 34, 34)"], body.dark .board_view_container [style*="color:rgb(34, 34, 34)"], body.dark .comment_textarea [style*="color: rgb(34, 34, 34)"], body.dark .comment_textarea [style*="color:rgb(34, 34, 34)"], body.dark #contentsArea [style*="color: rgb(34, 34, 34)"], body.dark #contentsArea [style*="color:rgb(34, 34, 34)"], body.dark .board_view_container [style*="color: rgb(51, 51, 51)"], body.dark .board_view_container [style*="color:rgb(51, 51, 51)"], body.dark .comment_textarea [style*="color: rgb(51, 51, 51)"], body.dark .comment_textarea [style*="color:rgb(51, 51, 51)"], body.dark #contentsArea [style*="color: rgb(51, 51, 51)"], body.dark #contentsArea [style*="color:rgb(51, 51, 51)"], body.dark .board_view_container [style*="color: rgb(68, 68, 68)"], body.dark .board_view_container [style*="color:rgb(68, 68, 68)"], body.dark .comment_textarea [style*="color: rgb(68, 68, 68)"], body.dark .comment_textarea [style*="color:rgb(68, 68, 68)"], body.dark #contentsArea [style*="color: rgb(68, 68, 68)"], body.dark #contentsArea [style*="color:rgb(68, 68, 68)"], body.dark .board_view_container [style*="color: rgb(85, 85, 85)"], body.dark .board_view_container [style*="color:rgb(85, 85, 85)"], body.dark .comment_textarea [style*="color: rgb(85, 85, 85)"], body.dark .comment_textarea [style*="color:rgb(85, 85, 85)"], body.dark #contentsArea [style*="color: rgb(85, 85, 85)"], body.dark #contentsArea [style*="color:rgb(85, 85, 85)"], body.dark .board_view_container [style*="color: #000"], body.dark .board_view_container [style*="color:#000"], body.dark .comment_textarea [style*="color: #000"], body.dark .comment_textarea [style*="color:#000"], body.dark #contentsArea [style*="color: #000"], body.dark #contentsArea [style*="color:#000"], body.dark .board_view_container [style*="color: #111"], body.dark .board_view_container [style*="color:#111"], body.dark .comment_textarea [style*="color: #111"], body.dark .comment_textarea [style*="color:#111"], body.dark #contentsArea [style*="color: #111"], body.dark #contentsArea [style*="color:#111"], body.dark .board_view_container [style*="color: #222"], body.dark .board_view_container [style*="color:#222"], body.dark .comment_textarea [style*="color: #222"], body.dark .comment_textarea [style*="color:#222"], body.dark #contentsArea [style*="color: #222"], body.dark #contentsArea [style*="color:#222"], body.dark .board_view_container [style*="color: #333"], body.dark .board_view_container [style*="color:#333"], body.dark .comment_textarea [style*="color: #333"], body.dark .comment_textarea [style*="color:#333"], body.dark #contentsArea [style*="color: #333"], body.dark #contentsArea [style*="color:#333"], body.dark .board_view_container [style*="color: #444"], body.dark .board_view_container [style*="color:#444"], body.dark .comment_textarea [style*="color: #444"], body.dark .comment_textarea [style*="color:#444"], body.dark #contentsArea [style*="color: #444"], body.dark #contentsArea [style*="color:#444"], body.dark .board_view_container [style*="color: #555"], body.dark .board_view_container [style*="color:#555"], body.dark .comment_textarea [style*="color: #555"], body.dark .comment_textarea [style*="color:#555"], body.dark #contentsArea [style*="color: #555"], body.dark #contentsArea [style*="color:#555"]{ color: var(--dark-text-primary, #E8E3DD) !important; }

/* 2026-09-11 상세·업체 페이지: css/animal.css 의 `body.dark .animal_info_container span:not(#flyerPopup *) … !important` 는 :not() 안 #id 탓에 특이도가 (1,x,x) 라 위 블록이 밀린다 → `:not(#_)` 로 같은 급을 만들어 이긴다 */
html body.dark .animal_info_container .pdha-badge:not(#_), html body.dark .animal_info_container .pdha-acts .tel:not(#_), html body.dark .animal_info_container .pdha-acts .tel i:not(#_), html body.dark .animal_info_container .pdh-acts .tel:not(#_), html body.dark .animal_info_container .pdh-acts .tel i:not(#_), html body.dark .animal_info_container button.tel:not(#_), html body.dark .animal_info_container button.tel i:not(#_), html body.dark .animal_info_container .write_button:not(#_), html body.dark .animal_info_container .write_button span:not(#_), html body.dark .animal_info_container .write_button i:not(#_), html body.dark #additional-content .write_button:not(#_), html body.dark #additional-content .write_button span:not(#_), html body.dark #additional-content .write_button i:not(#_){ color: var(--dark-ui-action-text, #1B1310) !important; }

/* 2026-09-11 다크: 에디터 형광펜(인라인 background:#F2FAFF 같은 밝은 배경) 위 글자는 위 규칙으로 밝아지면 안 보인다(동물병원 소개글 실측 1.2:1) → 배경이 있으면 진한 글자. 위 '검정 계열' 규칙보다 뒤에 두어 이긴다. */
body.dark .board_view_container span[style*="background"], body.dark .board_view_container font[style*="background"], body.dark .board_view_container p[style*="background"], body.dark .board_view_container b[style*="background"], body.dark .board_view_container strong[style*="background"], body.dark .board_view_container em[style*="background"], body.dark .board_view_container u[style*="background"], body.dark .comment_textarea span[style*="background"], body.dark .comment_textarea font[style*="background"], body.dark .comment_textarea p[style*="background"], body.dark .comment_textarea b[style*="background"], body.dark .comment_textarea strong[style*="background"], body.dark .comment_textarea em[style*="background"], body.dark .comment_textarea u[style*="background"], body.dark #contentsArea span[style*="background"], body.dark #contentsArea font[style*="background"], body.dark #contentsArea p[style*="background"], body.dark #contentsArea b[style*="background"], body.dark #contentsArea strong[style*="background"], body.dark #contentsArea em[style*="background"], body.dark #contentsArea u[style*="background"]{ color: #1B1310 !important; }

/* 2026-09-15 조회·추천·방문 수 한글 축약 공통 클래스 — PHP an_num() 이 <span class="an-num" title="원래 숫자">1.2만</span> 으로 감싼다. 크기·색은 자리 스타일을 따르고 여기서는 숫자 폭·줄바꿈만 */
.an-num{ font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-num{ color: inherit; }
body.dark .bg span.an-num, html.dark .bg span.an-num, body.dark span.an-num, html.dark span.an-num{ color: inherit !important; }


/* ── /css/common.css ── */
/* 2026-08-07 — 아래 어딘가의 background url() 중 '서버에 파일이 없는' 것을 none 으로 바꿨다.
   (선언째 지우면 같이 붙어 있던 padding/height 값까지 날아가 레이아웃이 바뀐다)
   지운 게 아니라 안 그리던 것을 명시했을 뿐이라 화면은 그대로고, 404 요청만 사라진다. */
/**
 * 공통 CSS 스타일
 */

/* CSS Document */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, big, cite, code, del, dfn, em, font, img, ins, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin: 0; padding: 0; border: none 0; }
html, body{margin:0; padding:0;}
caption{height:1px;font:0/0 x;overflow:hidden;opacity:0;filter:alpha(opacity=0);}
ul, li{ list-style: none; }
img, fieldset{ border: none; }


/* 입력 필드 스타일 */
input{
    border: 1px solid #ddd;
    cursor: auto;
    color: var(--color-text-primary);
    padding: 5px;
    vertical-align: middle;
}
input:focus{
    border: 1px solid var(--color-primary-hover);
    outline: none; /* 포커스 시 기본 테두리 제거 */
}


textarea{
    border: 1px solid #ddd;
    cursor: auto;
    color: var(--color-text-primary);
    background-color: #fff;
    padding: 0;
    vertical-align: middle;
    word-break: break-all;
}
select{
	border: 1px solid #ddd;
/*	font:12px normal dotum; */
	color: #393939;
	vertical-align: middle;
}


/* 다크모드 */
html.dark input, html.dark select, html.dark textarea, body.dark input, body.dark select, body.dark textarea{
	background-color: var(--dark-bg-primary) !important;
	color: #aaa !important;
    border-color: var(--dark-border-secondary) !important;
}


input[type=image]{margin:0;padding:0;vertical-align:middle;border:0;}
/* 읽기 전용/비활성화 스타일 */
input[readonly], input[readonly='readonly'], input:disabled, select[disabled], select[disabled='disabled'], textarea:disabled{
    background-color: var(--color-border-light) !important;
    color: #999 !important;
    cursor: not-allowed !important;
}
/* 날짜 datepicker(.input-date)는 readonly지만 '달력으로 선택하는' 활성 필드 → 위 회색화(비활성처럼 보임) 예외 */
input.input-date[readonly], input.input-date[readonly='readonly']{
    background-color: #fff !important;
    color: #333 !important;
    cursor: pointer !important;
}


 textarea{padding:0;text-indent:0;font-size:12px;line-height:18px;}
/* clearfix */
.clearfix:after{ content: "."; height: 0; font-size: 0; line-height: 0; clear: both; visibility: hidden; }

/* Hides from IE-mac \*/
*html .clearfix{ height: 1%; }
/* End hide from IE-mac */

caption{font-size:0;height:1px;line-height:0;overflow:hidden;opacity:0;filter:alpha(opacity=0);}
legend{font-size:0;height:1px;line-height:0;overflow:hidden;}
table{border-collapse:collapse;border-spacing:0px}

body{height:100%}
.selectbox{ position: relative; display: inline-block;  *display: inline;zoom: 1; height:38px; vertical-align:top; font-size:14px; font-weight:bold;}
.selectbox select{ z-index: 10; position: relative; border: none; background: none; outline: none; opacity: 0; line-height: 30px; height: 30px; padding:0 20px; -webkit-appearance: none; filter: alpha(opacity=0); }
/* 셀렉트박스 텍스트 */
.select-arrow{ background:none no-repeat 100% 50%; position: absolute; display: inline-block;  *display: inline;
zoom: 1; height: 100%; width: 20px; top: 0; right: 0; }
.text_left{text-align:left}
.text_right{text-align:right}
.fl{float:left}
.fr{float:right}
em{font-style:normal}
/* 폰트 크기 클래스 */

/* 텍스트 색상 클래스 */
a.text_deco{text-decoration:underline}
.relative{position:relative}
.absolute{position:absolute}


readonly="readonly"{background-color: rgb(228, 228, 228);}
.clear{clear:both}
.mt2{margin-top:2px !important;}
.mt3{margin-top:3px !important;}
.mt5{margin-top:5px !important;}
.mt7{margin-top:7px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt35{margin-top:35px !important;}
.mt70{margin-top:70px !important;}
.ml0{ margin-left:0 !important;}
.ml5{ margin-left:5px !important;}
.mr0{margin-right:0 !important;}
.mr5{margin-right:5px !important;}
.mr10{margin-right:10px !important;}
.mb10{margin-bottom:10px !important;}
.pt5{padding-top:5px}
.pt20{padding-top:20px}

/* 영어만 입력됨(ie용) */
.ime{ime-mode:disabled;}
.dot{width:4px; height:4px; border-radius:2px; background:var(--color-text-tertiary, #666); display:inline-block; margin:0 6px 3px -10px;}


/*버튼*/


/*삼각형*/

/*레벨 아이콘*/
.icon_level{width:18px;height:18px; }


/*업체페이지 / 커뮤니티(댓글포함) 이미지 확대 시*/

.media-container img{
	position:relative;
}


/*========================================
  다크모드 Border 및 배경 적용
========================================*/
html.dark input[type="text"], html.dark input[type="password"], html.dark input[type="email"], html.dark select, html.dark textarea, body.dark input[type="text"], body.dark input[type="password"], body.dark input[type="email"], body.dark select, body.dark textarea{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
}

body.dark .brc{
	border-bottom-color: var(--dark-border-secondary);
}

/* readonly/disabled 다크모드 */
html.dark input[readonly], html.dark input[readonly='readonly'], html.dark input:disabled, html.dark input[type="text"]:disabled, html.dark input[type="password"]:disabled, html.dark input[type="number"]:disabled, html.dark input[type="email"]:disabled, html.dark input[type="tel"]:disabled, html.dark select[disabled], html.dark select[disabled='disabled'], html.dark textarea:disabled, body.dark input[readonly], body.dark input[readonly='readonly'], body.dark input:disabled, body.dark input[type="text"]:disabled, body.dark input[type="password"]:disabled, body.dark input[type="number"]:disabled, body.dark input[type="email"]:disabled, body.dark input[type="tel"]:disabled, body.dark select[disabled], body.dark select[disabled='disabled'], body.dark textarea:disabled{
	background-color: var(--dark-bg-hover, #333333) !important;
	color: var(--color-text-quaternary, #888) !important;
	border-color: var(--color-text-tertiary, #666) !important;
	cursor: not-allowed !important;
}
/* 다크: 날짜 datepicker(.input-date)는 활성 필드 → 회색화 예외 */
html.dark input.input-date[readonly], html.dark input.input-date[readonly='readonly'], body.dark input.input-date[readonly], body.dark input.input-date[readonly='readonly']{
	background-color: var(--dark-bg-hover, #333333) !important;
	color: #e6e9ee !important;
	border-color: var(--color-text-secondary, #393939) !important;
	cursor: pointer !important;
}

/* zoom popup 다크모드 */

/* 유틸리티 텍스트 색상 클래스 다크모드 */

/* dot 배경 */
body.dark .dot{ background: var(--dark-text-secondary); }

/* 삼각형 다크모드 */


/* ── /css/layout.css ── */
/* 2026-08-07 — 아래 어딘가의 background url() 중 '서버에 파일이 없는' 것을 none 으로 바꿨다.
   (선언째 지우면 같이 붙어 있던 padding/height 값까지 날아가 레이아웃이 바뀐다)
   지운 게 아니라 안 그리던 것을 명시했을 뿐이라 화면은 그대로고, 404 요청만 사라진다. */
/*========================================
  CSS 변수는 pro_inc/css_variables.php에서 동적으로 출력됩니다.
  관리자 페이지에서 설정한 값이 적용됩니다.
========================================*/


/*라이트모드(lightmode) css*/
#body_css{
	/*background-color:#fdfeff;*/
}


/* main */
#title_1depth{background-color:#feffff; display:block;} /*커뮤니티 title_1depth 색상*/
h1{float:left;}
#search{width:345px;position:absolute;top:55px;left:279px;}
#search input{float:left;}
#search input.text{width:301px;height:34px;border:3px solid var(--ui-action, #D84841);border-right:none;}

#nav{width:1000px;height:50px;background:none no-repeat;clear:both;}
#nav li{width:200px;float:left;font-family:var(--user-font,'Pretendard');}
#container{width:var(--site-w,1330px);margin:0 auto;}
.container_community:after{content:""; clear:both; display:block}
/* [2026-08-11] body 가 페이지 바탕 토큰(bg_page, 쿨 그레이)으로 바뀌며 투명하던 커뮤니티
   컨테이너에 회색이 비치던 것 — 흰 모듈 면을 직접 칠한다(다크는 아래 body.dark 규칙이 --dark-bg-primary 로 유지) */
.container_community{margin-top:20px;background-color:var(--light-bg-primary,#fff);position:relative;}
.container_community .lnb_area{width:125px; float:left;}
.lnb li{border-bottom:1px solid #d7d7d7}
.lnb li a{display:inline-block; height:40px; line-height:40px; padding-left:15px; width:180px;  color:#2f2f2f; font-size:14px; font-family:Nanum Gothic,"나눔고딕";}
.lnb li a:hover{color:var(--color-hover);}
.lnb li a.on{color:var(--lnb-link-active, #9C3830); background:nonerepeat-y;}
/*로그인 너비 넓은버젼*/


/*로그인 너비 좁은버젼*/
.contents_area:after{content:""; clear:both; display:block}

.navi{height:54px; border-bottom:1px solid #d7d7d7; position:relative; margin-bottom:13px;}
.navi:after{content:""; clear:both; display:block}
.navi h3{padding-top:19px; color:#555; font-size:25px; font-family:var(--user-font,'Pretendard');}
.navi h3 span{padding-top:19px; color:var(--color-brand, #d84841); font-size:18px; font-family:var(--user-font,'Pretendard');}


.navi ul{position:absolute;top:26px;right:0;}
.navi li{float:left;}
.navi li:first-child{background-image:none; padding-left:0px;}
.navi li a{color:var(--color-text-light); font-size:11px;}
.navi li a:hover{color:var(--color-hover);}


.contents_banner{padding-top:30px;}
.contents_banner1{position:absolute; left:220px; bottom:40px;}


/*main_right css*/

section{
	display: none;
	max-height:282.5px;
	}


label:hover{
	cursor: pointer;
	}

/*input 클릭시, label 스타일*/


#tab1:checked ~ #content1{
	display: block;}

/*메인 right 로그인박스css*/
#main_right_login_box{
	/*
	border:1px solid #d4d4d4;
	*/
	border-radius:5px;
	}


/*메인right 로그인박스 하단 알람,애니멀소개인기글,공지/이벤트*/
#content1{background-color:#fff;}


/* 로그인 */
#login{float:left;height:0px;}
#login p{font-size:11px;color:#8C8C8C;margin:5px 0 0 16px;}
#login p a{color:#8C8C8C;}
#login p a:hover{color:var(--color-hover);}
#login .checkboxlogin{margin:10px 0 0  16px}
.logcheck{font-size:12px;color:#8C8C8C;}

/* 로그인후 */


.page_back{
	display:flex;
	justify-content: center; 
	align-items: center;
	width:100%;
	max-width:150px;
	height:50px;
	line-height:50px;
	text-align:center;
	color:var(--color-secondary, #2B5F9E); /* 구 블루 #5E7EC5 → 2차색 */
	background-color:#fff;
	font-size:15px;
	font-weight:300;
	border:1.5px solid #DCDCDC;
	margin:0 auto;
	cursor:pointer;
}


body.dark .page_back{
	background-color: var(--dark-ranking-color) !important;
	color: var(--dark-text-primary) !important;
	border-color: var(--dark-ranking-color) !important;
}


/*========================================
  다크모드 Border 및 배경 일괄 적용
========================================*/
/* LNB 사이드바 */
body.dark .lnb_setting li{
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .lnb li{
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .lnb li a{
	color: var(--dark-text-primary);
}

body.dark .lnb li a.on{
	color: var(--dark-lnb-link-active, #FF9F1C);
}

/* 네비게이션 */
body.dark .navi{
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .navi h3{
	color: var(--dark-text-primary);
}

body.dark .navi li a{
	color: var(--dark-text-secondary);
}

/* 컨테이너 */
body.dark .container_community{
	background-color: var(--dark-bg-primary);
}

/* gLeft 영역 */
body.dark .gLeft{
	border-color: var(--dark-border-secondary);
}

/* 일반 테두리 요소들 */
body.dark [style*="border"][style*="#d7d7d7"], body.dark [style*="border"][style*="var(--color-border)"], body.dark [style*="border"][style*="#ddd"]{
	border-color: var(--dark-border-secondary) !important;
}

/* 타이틀 1depth */
body.dark #title_1depth{
	background-color: var(--dark-bg-secondary) !important;
}

/* 네비게이션 서브메뉴 드롭다운 */


/* ── /css/search.css ── */
/* 2026-08-07 — 아래 어딘가의 background url() 중 '서버에 파일이 없는' 것을 none 으로 바꿨다.
   (선언째 지우면 같이 붙어 있던 padding/height 값까지 날아가 레이아웃이 바뀐다)
   지운 게 아니라 안 그리던 것을 명시했을 뿐이라 화면은 그대로고, 404 요청만 사라진다. */
/*검색css*/

/* 리스트형 전용 스타일 - 박스형과 갤러리형과 완전 분리 (body내 <style> 제거 → search.css로 이동) */
.flex-container.list-mode{min-height:120px;padding:8px 8px 0;margin:0;box-sizing:border-box;width:100% !important;max-width:100% !important;min-width:100% !important;overflow-x:hidden !important;overflow:hidden !important;}
.search_container .flex-container.list-mode{width:100% !important;max-width:100% !important;min-width:100% !important;overflow-x:hidden !important;overflow:hidden !important;padding:8px 8px 0 !important;margin:0 !important;}
.search_container .flex-container.list-mode > *{max-width:100% !important;box-sizing:border-box !important;}
.search_container .flex-container.list-mode .inner_listbox{max-width:100% !important;box-sizing:border-box !important;}
.search_container .flex-container.list-mode .inner_list{width:100% !important;flex:0 0 100% !important;max-width:100% !important;box-sizing:border-box !important;margin-left:0 !important;margin-right:0 !important;}
#toggleModeBtn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;}
#toggleModeBtn .icon{line-height:1;}
#toggleModeBtn *::selection{background:transparent;}
/* quick_menu를 포함한 부모 컨테이너 - flexbox로 콘텐츠/사이드바 분리 */
.search_wrapper{
	position: relative;
	max-width: var(--site-w,1330px) !important;
	width: var(--site-w,1330px) !important; /* GNB와 동일한 고정 너비 */
	margin: 0 auto !important; /* body 너비에 맞춰 센터링 — transform 방식은 body를 밀어내 GNB 1px 시프트 유발 */
	box-sizing: border-box;
	overflow-x: visible;
	display: flex !important;
	align-items: flex-start;
}

/* quick_menu: flexbox 레이아웃에서 오른쪽 사이드바 */
.search_wrapper > #quick_menu_btn{
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	order: 2 !important;
	flex: 0 0 120px !important;
	width: 120px !important;
	min-width: 120px !important;
	margin-left: 5px !important;
	margin-top: 10px !important;
	float: none !important;
	margin-right: 0 !important;
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	align-self: flex-start !important;
}

/* 배율이 커져도 125x125 배너가 항상 보이도록 */
#leftFixedBanner{
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.search_container:after{content:""; clear:both; display:block;}
.search_container{
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 80vh;
	order: 1 !important;
	box-sizing: border-box;
	margin-top:10px !important;
	border:1px solid #d4d4d4;
	border-radius:5px;
	/* [2026-08-11] body 가 페이지 바탕 토큰(bg_page, 쿨 그레이)으로 바뀌며 투명 컨테이너에
	   회색이 비치던 것 — 다크(body.dark 규칙)와 짝 맞춰 라이트도 컨테이너 면을 직접 칠한다.
	   활성 파일탭(--ui-active-soft-bg)·이음선(.tab-buttons::after)이 이 값과 이어진다 */
	background-color: var(--search-container-bg, #ffffff);
	overflow: visible;
	position: relative;
	contain: layout style;  /* 내부 레이아웃 변경이 외부에 영향 주지 않도록 격리 */
}

/* 콘텐츠 영역 — flexbox 레이아웃에서 자연스럽게 100% 차지 */
.search_container > form, .search_container > *:not(#quick_menu_btn){
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	margin-right: 0 !important;
	overflow-x: hidden;
}

/* 리스트 영역의 부모 컨테이너 */
.search_container .gCenter, .search_container .gCenter.bbs, .search_container > div[style*="position:relative"]{
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	margin-right: 0 !important;
	overflow-x: hidden !important;
	overflow: hidden !important;
}

/* 리스트형 전용 스타일 - 박스형과 갤러리형과 완전 분리 */
.search_container .flex-container.list-mode{
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box;
	overflow-x: hidden !important;
	overflow: hidden !important;
	padding-left: 8px !important;
	padding-right: 8px !important;
	padding-top: 8px !important;
	padding-bottom: 0 !important;
}

/* 리스트형 내부 아이템이 컨테이너를 넘어가지 않도록 */
.search_container .flex-container.list-mode > *{
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* 리스트형 1줄에서 inner_list 너비 조정 */
.search_container .flex-container.list-mode .inner_list{
	width: 100% !important;
	flex: 0 0 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 보기모드 전환(1줄↔2줄↔박스↔갤러리)은 즉시 바꾼다 — 카드에 걸린 transition:all 0.2s 가
   width/flex 를 애니메이션해서 전환이 '드드득' 끊긴다. 박스·갤러리처럼 스르륵 없이 바로 전환. (2026-07-18) */
.search_container .flex-container .inner_list, .search_container .flex-container .inner_listbox{
	transition: none !important;
}

/* 리스트형 inner_listbox가 flex-container를 넘어가지 않도록 */
.search_container .flex-container.list-mode .inner_listbox{
	max-width: 100% !important;
	box-sizing: border-box;
}

/* 리스트형 내부의 모든 리스트 관련 요소가 넘어가지 않도록 */
.search_container .flex-container.list-mode *{
	max-width: 100% !important;
	box-sizing: border-box;
}

/* 박스형 스타일은 list_title_info_boxStyle.php에서 관리 */
/* 갤러리형 스타일은 list_title_info_galleryStyle.php에서 관리 */

/* search_container overflow — 드롭다운 등이 보이도록 visible 유지 */
.search_container{
	overflow: visible;
}

/* search_option이 확실히 전체 너비를 차지하도록 */
.search_container .search_option{
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

@media (max-width: 1500px){
	.search_wrapper {
		max-width: var(--site-w,1330px) !important;
		width: var(--site-w,1330px) !important;
	}
}

@media (max-width: 1200px){
	.search_wrapper {
		max-width: var(--site-w,1330px) !important;
		width: var(--site-w,1330px) !important;
	}
}

/* 퀵메뉴 안의 배너가 항상 보이도록 - 배율이 매우 커져도 보이도록 강제 */
#quick_menu_btn #leftFixedBanner{
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	overflow: visible !important;
	width: 125px !important;
	height: 125px !important;
	min-width: 125px !important;
	min-height: 125px !important;
	max-width: 125px !important;
	max-height: 125px !important;
	flex-shrink: 0 !important;
}

/* 퀵메뉴 안의 배너 내부 요소도 보이도록 */
#quick_menu_btn #leftFixedBanner *, #quick_menu_btn #leftFixedBanner img, #quick_menu_btn #leftFixedBanner a{
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* 퀵메뉴 자체도 배너가 보이도록 */
#quick_menu_btn{
	overflow: visible !important;
	min-height: auto !important;
}

/* 모든 배율에서 배너가 보이도록 */
@media (max-width: 2000px){
	#quick_menu_btn #leftFixedBanner {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

/* search_list_left_bottom_banner.php의 CSS 스타일을 여기로 이동 */
/* darkmode(다크모드) */
body.dark #searchList_left_bannerContainer{
	/* 🔴 폴백 필수 — 토큰이 미정의면 border-color 선언이 무효가 되어
	   currentColor(밝은 글씨색)로 떨어져 '흰 테두리 빈 상자'가 된다(2026-07-30). */
	border-color: var(--dark-border-secondary, #4A4A4A) !important;
}

/* 모바일에서만 숨김 */
@media (max-width: 767px){
	#searchList_left_bannerContainer { display: none !important; }
}


#search_container_title{
	max-width: var(--site-w,1330px) !important; /* GNB와 동일한 고정 너비 (gnb_menu와 동일) */
	width: 100%;
	margin:0 auto;
	padding-top:25px; 
	padding-left:5px;
	font-size:2.35em;
	letter-spacing:-.015em;
	color:var(--color-text-secondary, #393939);
	font-weight:600;
	box-sizing: border-box;
}


.tab_large{width:var(--site-w,1330px);margin-top:20px; position:relative; border-top: 1px solid #e5e5e5;}


.result td{background:var(--color-bg-lighter);padding:15px 30px 15px 30px;}
.result td ul{overflow:hidden;}
.result td li.tit{font-weight:bold;}
.result td li.del{background:none no-repeat;}

.fs{font-size:25px;font-weight:bold;clear:both;padding-top:30px;}
.fs span{color:var(--color-text-secondary, #393939);}


/*darkmode 다크모드 적용*/
body.dark .search_container{
	border-color: var(--search-option-border) !important;
	background-color: var(--search-container-bg);
}

body.dark .search_option{
	border: 1px solid var(--search-option-border) !important;
	background-color: var(--search-option-bg) !important;
}

body.dark .search_option td{
	background-color: var(--search-option-cell-bg) !important;
	color: var(--dark-text-primary) !important;
}

body.dark .search_option td.search_option_cell{
	background-color: var(--search-option-cell-bg) !important;
}


/*search 시 빠른검색 아이콘*/
.search_toggle_icon{
	width:23px;
	height:23px;
	text-align:center;
	background-color:var(--state-warning, #cf8400);
	color:var(--color-text-secondary);
}

/*빠른검색 시 input 창(시/구/군, 지하철역명, ktx,srt역명, 공항명)*/
.search_engine{
	display:none; 
	margin-left:-14px; 
	padding-bottom:14px; 
	height:23px;
	line-height:23px;
}

.search_engine input{
	height:22px;
	vertical-align: top;
}


/***********다크모드***********/
/*search 시 빠른검색 아이콘*/
body.dark .search_toggle_icon{
	background-color: var(--dark-ranking-color) !important;
    color: var(--dark-text-primary) !important; /*다크모드 시 버튼 텍스트, 아이콘 기본 색*/
}

/*빠른검색 시 input 창(시/구/군, 지하철역명, ktx,srt역명, 공항명)*/
body.dark .search_area input[type=text]{
	border-color: var(--dark-border-secondary, #4A4A4A) !important;   /* 2026-08-28 A안: 다크 검색창 상시 주황 테두리 → 중립(포커스만 코랄) */
}
body.dark .search_area input[type=text]:focus{
	border-color: var(--tint-coral-fg, #F08A6B) !important;
}


/*검색 시 동물아이콘 css - adoption, individual, find, cafe, hongbo 공통 정사각형 UI*/
.search_option .icon_group{
    box-shadow: inset 0 0 0.75px rgb(77, 71, 71);
    background-color: #fdfdfd;
    width: 75px;
    height: 75px;
    margin-right: 10px;
    padding: 8px 4px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    border-radius: var(--ui-icon-group-radius, 7px);
    border: 1px solid var(--color-border-medium);
    text-align: center;
    white-space: nowrap;
    font-size: 12.5px;
}

.search_option .icon_group i{
    display: block;
	font-size: var(--ui-icon-group-fontsize, 1.8em);
	padding-bottom: 5px;
}

/* Tab 포커스 */
.search_option .icon_group:focus, .icon_group:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(216, 72, 65, 0.28);
	border-color: var(--color-border-focus, #D84841);
}

body .search_option .icon_group.selected{ /* 아이콘 클릭 시 — soft(연한 배경 + 컬러 테두리) */
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
	font-weight: 600;
}

body .search_option .icon_group.selected i{
	color: var(--ui-select-soft-text, #9C3830) !important;
}

body .search_option .icon_group.selected-dimmed, body .search_option div.icon_group.selected-dimmed{
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
	opacity: 0.75 !important;
}
body .search_option .icon_group.selected-dimmed i, body .search_option div.icon_group.selected-dimmed i{
	color: var(--ui-select-soft-text, #9C3830) !important;
}

/* 기존 호환성을 위한 스타일 (다른 페이지에서 사용 중일 수 있음) */
.icon_group{
    box-shadow: inset 0 0 0.75px rgb(77, 71, 71);
    background-color:#fdfdfd;
    width: 75px;
    height: 75px;
    margin-right:10px;
    padding: 8px 4px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    border-radius:7px;
    border:1px solid var(--color-border-medium);
    text-align: center;
    white-space: nowrap;
    font-size: 12.5px;
}

.icon_group i{
    display: block;
	font-size:1.8em;
	padding-bottom:5px;
}

body .icon_group.selected{ /* 아이콘 클릭 시 — soft */
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
	font-weight: 600;
}

body .icon_group.selected i{
	color: var(--ui-select-soft-text, #9C3830) !important;
}

body .icon_group.selected-dimmed, body div.icon_group.selected-dimmed{
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
	opacity: 0.75 !important;
}
body .icon_group.selected-dimmed i, body div.icon_group.selected-dimmed i{
	color: var(--ui-select-soft-text, #9C3830) !important;
}


/* icon_group 다크모드 (GNB 보라빛 톤, 관리자 연동) */
body.dark .search_option .icon_group{
	background-color: var(--search-icon-bg) !important;
	border-color: var(--search-icon-border) !important;
	color: var(--search-icon-text) !important;
	box-shadow: inset 0 0 0.75px rgba(100, 100, 130, 0.4) !important;
}

body.dark .search_option .icon_group i{
	color: var(--search-icon-color) !important;
}

body.dark .search_option .icon_group:not(.selected):hover{
	background-color: var(--search-toggle-hover-bg) !important;
	border-color: var(--search-input-border) !important;
}

body.dark .search_option .icon_group.selected{ /*아이콘 클릭 시 — soft*/
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
}

body.dark .search_option .icon_group.selected i{
	color: var(--ui-select-soft-text, #9C3830) !important;
}

/* 기존 호환성을 위한 다크모드 스타일 */
body.dark .icon_group{
	background-color: var(--search-icon-bg) !important;
	border-color: var(--search-icon-border) !important;
	color: var(--search-icon-text) !important;
	box-shadow: inset 0 0 0.75px rgba(100, 100, 130, 0.4) !important;
}

body.dark .icon_group i{
	color: var(--search-icon-color) !important;
}

body.dark .icon_group:not(.selected):hover{
	background-color: var(--search-toggle-hover-bg) !important;
}

body.dark .icon_group.selected{
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
}

body.dark .icon_group.selected i{
	color: var(--ui-select-soft-text, #9C3830) !important;
}

body.dark .search_option .icon_group.selected-dimmed, body.dark .icon_group.selected-dimmed{
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
	opacity: 0.75 !important;
}
body.dark .search_option .icon_group.selected-dimmed i, body.dark .icon_group.selected-dimmed i{
	color: var(--ui-select-soft-text, #9C3830) !important;
}


/*동물선택/성별/나이/업종 등 search option 검색 왼쪽 td(제목) css*/
.search_option_td{
	width:130px;
	text-align:center;
	border-bottom:0.7px solid #dadada;
	border-right:0.7px solid #dadada;
	background-color:var(--color-bg-lighter);
}

body.dark .search_option_td{
	background-color: var(--search-option-td-bg) !important;
	border-color: var(--search-option-border) !important;
	color: var(--dark-text-primary) !important;
}

/* 다크 모드 - 검색 영역 내 select, input 배경 통일 */
body.dark .search_option select, body.dark .search_option input[type="text"], body.dark .search_option input[type="number"]{
	background-color: var(--search-input-bg) !important;
	color: var(--search-input-text) !important;
	border-color: var(--search-input-border) !important;
}


/*border:1px solid #ccc; */

.search_option{
	overflow: hidden; /* border-radius가 제대로 적용되도록 */
	border-radius: 5px; /* 상위 컨테이너와 동일한 radius */
	width: 100% !important; /* 전체 너비 차지 */
	box-sizing: border-box; /* 패딩과 테두리 포함한 크기 계산 */
}

/* 셀렉트박스 드롭다운이 잘리지 않도록 z-index 조정 */
.search_option #select.cs-on-top, .search_option #select{
	position: relative;
	z-index: 10000 !important;
}
.search_option #select .menu_wrap{
	position: absolute !important;
	z-index: 10002 !important;
}

.search_option table{width:100% !important; max-width: 100% !important; min-width: 100% !important; border-collapse:collapse; border-left:none; border-right:none; table-layout: fixed !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; display: table !important;} /* 테이블 전체 너비 100%, 고정 레이아웃 */ /* 상세메뉴 접힘 상태 */ /* 상세메뉴 접힘 시 공간 제거 */

/* 상세메뉴 펼치기/접기 토글 버튼 */
.detail-toggle-btn{
	display: inline-block;
	width: 100%;
	max-width: 250px;
	padding: 6px 0;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	color: #fff;
	background: var(--color-brown);
	border: 1px solid var(--color-brown);
	border-radius: 0 0 5px 5px;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.search_option table colgroup col[width="145px;"]{width: 145px !important; min-width: 145px !important; max-width: 145px !important;} /* 첫 번째 컬럼 고정 너비 (HTML 속성 오버라이드) */
.search_option table colgroup col[width=""]{width: auto !important; min-width: 0 !important;} /* 두 번째 컬럼 빈 width 속성 오버라이드 */
.search_option table colgroup col:first-child{width: 145px !important; min-width: 145px !important; max-width: 145px !important;} /* 첫 번째 컬럼 고정 너비 */
.search_option table colgroup col:last-child{width: auto !important; min-width: 0 !important;} /* 마지막 컬럼이 나머지 공간 모두 차지 */
.search_option table td:first-child{width: 145px !important; max-width: 145px !important; min-width: 145px !important;} /* 첫 번째 td 고정 너비 */
.search_option table td:last-child{width: calc(100% - 145px) !important; min-width: 0 !important; padding-right: 0 !important; max-width: none !important; box-sizing: border-box !important;} /* 마지막 td가 나머지 공간 모두 차지 (명시적으로 계산), 오른쪽 패딩 제거 */

/* 테이블의 첫 번째 행 첫 번째 셀 - 왼쪽 위 모서리 */
.search_option table tr:first-child td:first-child, .search_option table tr:first-child th:first-child{
	border-top-left-radius: 5px;
}

/* 테이블의 첫 번째 행 마지막 셀 - 오른쪽 위 모서리 */
.search_option table tr:first-child td:last-child, .search_option table tr:first-child th:last-child{
	border-top-right-radius: 5px;
}

/* 테이블의 마지막 행 첫 번째 셀 - 왼쪽 아래 모서리 */
.search_option table tr:last-child td:first-child, .search_option table tr:last-child th:first-child{
	border-bottom-left-radius: 5px;
}

/* 테이블의 마지막 행 마지막 셀 - 오른쪽 아래 모서리 */
.search_option table tr:last-child td:last-child, .search_option table tr:last-child th:last-child{
	border-bottom-right-radius: 5px;
}
.search_option th{padding-left:30px; text-align:left; border-top:1px dotted #b5b5b5; height:39px}
.search_option tr:first-child th, .search_option tr:first-child td{border-top:0;}
.search_option td img{vertical-align:middle;}
.search_option td input[type=text]{height:20px;}


/*동, 지하철역, ktx,srt역, 공항 - 선택된 지역 area(체크박스 선택 시 하단 선택된 지역)*/
.select_area{
	padding:10px 0 10px 20px;
	
	min-height:60px;
	line-height:40px;
	position:relative; 
	box-sizing: border-box;
	background-color:var(--color-bg-lighter);
}

body.dark .select_area{
	background-color: var(--search-option-cell-bg) !important;
	border-color: var(--search-option-border) !important;
	color: var(--dark-text-primary) !important;
	font-weight: 500 !important;
}


/* 선택된 지역 / 선택된 역 / 선택된 공항 택스트(5개까지 선택 시 나타나는 li 옆 제목) */


.btn_del{background:none no-repeat; border:0; height:15px; width:15px; display:inline-block;}

.search_brand{background:none no-repeat; height:105px; margin-top:8px; padding:26px 0 0 210px; box-sizing: border-box}
.search_brand li{display:inline-block; width:80px; text-align:center; line-height:20px;margin-top: 10px;}
.search_car{background:none no-repeat; height:105px; margin-top:8px; padding:50px 0 0 210px; box-sizing: border-box}
.search_car li{display:inline-block; width:50px; text-align:center; line-height:20px;}


/*애니멀리더 background-color*/
body.dark .animal_leader_title{
	background-color: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/*애니멀리더/스타 더보기 버튼 다크모드*/
body.dark .more_list a{
	background-color: var(--dark-bg-button) !important;
	border-color: var(--dark-border-secondary) !important;
	font-weight: 500 !important;
	color: var(--dark-text-primary) !important;
}


/*검색 시 리스트 위 title td 부분 background-color*/
body.dark .list_td_title{
	background-color: var(--dark-bg-secondary) !important;
}


/*검색버튼/초기화버튼*/
.search_button{
	display:inline-block;
	height:46px;
	line-height:46px;
	cursor:pointer;
	text-align:center;
	border-radius:8px;
	white-space:nowrap;
	font-size:15px;
	vertical-align:middle;
	box-sizing:border-box;
}
.search_button{
	width: var(--ui-search-btn-width, 300px);
	border:none;
	background-color: var(--ui-search-btn-bg, var(--color-brown));
	color: var(--ui-search-btn-text, #fff);
	font-weight:600;
}

/*검색버튼/초기화버튼(다크모드 시)*/
body.dark .search_button{
	background-color: var(--ui-search-btn-bg) !important;
	border-color: var(--ui-search-btn-bg) !important;
	color: var(--ui-search-btn-text) !important;
}


/********** s:검색list 내 css **********/
#value{
  border: none;
  background: var(--state-warning, #cf8400);
  padding: 6px;
  font-size: 14.5px;
  width: 80%;
  border-radius: 6px;
  color: var(--color-text-secondary);
}
#value:focus{
  outline: none;
}


#gugunValue:focus{
  outline: none;
}

#dongValue:focus{
  outline: none;
}

#lineValue:focus{
  outline: none;
}

#stationValue:focus{
  outline: none;
}
/********** e:검색list 내 css **********/


.tab_orange{margin:15px 0 0 0;}
.pic{padding:2px 0 0 2px; text-align:center;width:300px;height:220px;}

/*차량별 검색*/
.reg_dep01{width:100%;border:1px solid #ccc;}
.import_car{width:998px;background-color:var(--color-bg-lighter);border:1px solid var(--color-border);margin-top:10px;}
.import_car tr td{padding:20px;}
.import_car tr.reg_selec_info li{float:left;margin-right:10px;}


/* 수입차 검색 검색*/
.abroad table{width:100%; border-collapse:collapse;font-size:13px; }

/*페이징*/
.pagination{white-space: nowrap; text-align: center; height: 26px; line-height:26px; max-width: 1000px; padding:30px 0;}
.pagination a{display:inline-block; height:26px; width:22px;  vertical-align:middle; text-align:center; text-decoration:none; font:12px/26px; font-weight:bold; color:#2f2f2f;}
.pagination a:hover{color:var(--color-hover);}
.pagination .on{color:var(--ui-current-page, #D84841); font-weight:bold}
.pagination .prev, .pagination .next{height:26px; width:22px; border:1px solid #cacaca;overflow:hidden;position:relative; font-size:0;}
.pagination .prev.end, .pagination .next.end{height:26px; width:22px; font-size:0;}
.pagination .prev{ background: none no-repeat center center; margin-right:12px;}
.pagination .prev.end{background: none no-repeat center center; margin-right:-5px; border-right:0;}
.pagination .next{background: none no-repeat center center; margin-left:12px;}
.pagination .next.end{background: none no-repeat center center; margin-left:-4px; border-left:0;}

/*뉴스*/

/* 갤러리형 스타일은 list_title_info_galleryStyle.php에서 관리 */


/*========================================
  다크모드 Border 및 배경 적용
========================================*/
body.dark .import_car{
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-border-secondary);
}

body.dark .pagination .prev, body.dark .pagination .next{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
}

body.dark .result td{
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
}

body.dark .search_option th{
	border-top-color: var(--search-option-border);
	color: var(--dark-text-primary);
}


/* 검색 옵션 테이블 셀 공통 스타일 (td 간격 통일) */
.search_option td.search_option_cell{
	padding: 10px 0 10px 15px !important;
	border-bottom: 0.7px solid #dadada !important;
}

body.dark .search_option td.search_option_cell{
	border-color: var(--search-option-border) !important;
}


/* ========================================
   검색 옵션 접기/펼치기 토글
======================================== */

/* 토글 바 */
.search_option_toggle_bar{
	display: flex !important;
	align-items: center !important;
	padding: 12px 20px !important;
	min-height: 48px !important;
	box-sizing: border-box !important;
	background: #f8f9fa !important;
	border: 1px solid #dadada !important;
	border-radius: 5px !important;
	cursor: pointer !important;
	user-select: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	overflow: visible !important;
}
.search_option_toggle_bar.stuck{
	position: fixed !important;
	top: 0 !important;
	z-index: 100 !important;
	border-bottom: 2px solid var(--color-primary) !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.13) !important;
	border-radius: 0 !important;
}
.search_option_toggle_bar:hover{
	background: #eef0f2 !important;
}
.search_option_toggle_bar .toggle_label{
	font-weight: 600 !important;
	color: var(--color-text-secondary, #393939) !important;
	margin-right: 12px !important;
	padding-right: 12px !important;
	border-right: 2px solid #dadada !important;
	white-space: nowrap !important;
	font-size: 14px !important;
	line-height: 28px !important;
	flex-shrink: 0 !important;
}
.search_option_toggle_bar .toggle_summary{
	flex: 1 !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 4px !important;
	align-items: center !important;
	padding-left: 4px !important;
	height: 28px !important;
	overflow: hidden !important;
}
/* 펼쳐진 상태에서는 줄바꿈 허용 */
.search_option_toggle_bar.expanded .toggle_summary{
	flex-wrap: wrap !important;
	height: auto !important;
	min-height: 28px !important;
	overflow: visible !important;
}

/* 개별 조건 칩 */
.toggle_chip{
	display: inline-flex !important;
	align-items: center !important;
	background: var(--color-primary) !important;
	border: 1.5px solid var(--color-primary) !important;
	border-radius: 20px !important;
	padding: 3px 10px !important;
	font-size: 13px !important;
	color: #fff !important;
	white-space: nowrap !important;
	line-height: 1.4 !important;
	max-width: 300px;
	cursor: pointer !important;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.toggle_chip:hover{
	background: var(--color-primary-dark, #c43a3e) !important;
	border-color: var(--color-primary-dark, #c43a3e) !important;
}
.toggle_chip:hover .toggle_chip_remove{
	color: #fff !important;
}
/* 새로 추가될 옵션 칩 (점선, 대기 상태) */
.toggle_chip_pending{
	background: rgba(211, 79, 83, 0.15) !important;
	color: var(--color-text-emphasis, #D8432A) !important;
	border: 1.5px dotted var(--color-primary) !important;
}
.toggle_chip_pending .toggle_chip_remove{
	color: rgba(211, 79, 83, 0.45) !important;
}
.toggle_chip_pending .toggle_chip_remove:hover{
	color: var(--color-hover) !important;
}

.toggle_chip_remove{
	margin-left: 6px !important;
	color: rgba(255,255,255,0.6) !important;
	cursor: pointer !important;
	font-size: 13px !important;
	transition: color 0.15s ease;
}
.toggle_chip_remove:hover{
	color: #fff !important;
}
.search_option_toggle_bar .toggle_arrow{
	font-size: 12px !important;
	color: #999 !important;
	margin-left: 12px !important;
	flex-shrink: 0 !important;
	line-height: 28px !important;
	transition: transform 0.3s ease;
}

/* 펼쳐진 상태일 때 토글 바 하단 둥근 모서리 제거 (높이/overflow는 상단에서 설정) */
.search_option_toggle_bar.expanded{
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.search_option_toggle_bar.expanded .toggle_arrow{
	transform: rotate(180deg);
}

/* 접힌 상태: 테이블 숨김 (display: none으로 display: table !important 오버라이드) */
.search_option.collapsed table{
	display: none !important;
}

/* 접힌 상태에서 search_option 자체의 여백/테두리 제거 */
.search_option.collapsed{
	border: none !important;
	margin-top: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* 토글 바가 있을 때 search_option 상단 둥근 모서리 + 상단 border 제거 (겹침 방지) */
.search_option.collapsible:not(.collapsed){
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: none !important;
}

/* 다크모드 토글 바 */
body.dark .search_option_toggle_bar{
	background: var(--search-option-bg) !important;
	border-color: var(--search-option-border) !important;
}
body.dark .search_option_toggle_bar:hover{
	background: var(--search-toggle-hover-bg) !important;
}
body.dark .search_option_toggle_bar .toggle_label{
	color: var(--dark-text-primary) !important;
	border-right-color: var(--search-option-border) !important;
}
body.dark .search_option_toggle_bar .toggle_summary{
	color: var(--dark-text-secondary) !important;
}
body.dark .toggle_chip{
	background: var(--dark-ranking-color) !important;
	border-color: var(--dark-ranking-color) !important;
	color: #fff !important;
}
body.dark .toggle_chip_pending{
	background: rgba(181, 100, 15, 0.2) !important;
	color: var(--dark-ranking-color) !important;
	border-color: var(--dark-ranking-color) !important;
}
body.dark .toggle_chip:hover{
	background: var(--dark-bg-button-active) !important;
	border-color: var(--dark-bg-button-active) !important;
}
body.dark .toggle_chip_remove{
	color: rgba(255,255,255,0.5) !important;
}
body.dark .toggle_chip_remove:hover, body.dark .toggle_chip:hover .toggle_chip_remove{
	color: #fff !important;
}
body.dark .toggle_chip_pending .toggle_chip_remove{
	color: rgba(181, 100, 15, 0.5) !important;
}
body.dark .toggle_chip_pending .toggle_chip_remove:hover{
	color: var(--dark-ranking-color) !important;
}
body.dark .search_option_toggle_bar .toggle_arrow{
	color: var(--dark-text-secondary) !important;
}
body.dark .search_option_toggle_bar.stuck{
	background: var(--search-container-bg) !important;
	border-bottom: 2px solid var(--dark-ranking-color) !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.5) !important;
}

/* 차량 검색 */
body.dark .reg_dep01{
	border-color: var(--dark-border-secondary);
}

/* 한줄수다 */
body.dark .one_list{
	background-color: var(--dark-bg-secondary);
}

/* 검색 결과 타이틀 */
body.dark #search_container_title{
	color: var(--dark-text-primary);
}

/* 수입차 검색 배경 */

/* 뉴스 보드 */

/* pagination 다크모드 */
body.dark .pagination a{
	color: var(--dark-text-primary);
}
body.dark .pagination .on{
	color: var(--ui-select-soft-text, #9C3830);
}




/* ── /css/community.css ── */
/* 2026-08-07 — 아래 어딘가의 background url() 중 '서버에 파일이 없는' 것을 none 으로 바꿨다.
   (선언째 지우면 같이 붙어 있던 padding/height 값까지 날아가 레이아웃이 바뀐다)
   지운 게 아니라 안 그리던 것을 명시했을 뿐이라 화면은 그대로고, 404 요청만 사라진다. */
/*url_load*/
.url_load a:link{
 color:#2f2f2f;
 font-weight:350;
}

/*방문했던 링크*/
.url_load a:visited{
	color:#2f2f2f;
	font-weight:350;
}
/* 2026-09-11 다크: 댓글 본문 링크가 #2f2f2f 고정이라 BEST 댓글 안 주소가 아예 안 보였다(1.0:1) */
body.dark .url_load a:link, body.dark .url_load a:visited{ color:var(--dark-text-link, #9BB6DA); }

body.dark .url_load a:visited{
	color: var(--dark-text-muted) !important;
}



.board_info{height:52px; line-height:22px;}
.board_info strong{color:#666;}

/*상단검색*/
.search_wrap:after{content:""; clear:both; display:block;}
.search_btn{float:left; border:1px solid #d7d7d7; }
.search_btn a{text-align:center; min-width:30px; padding:0 10px; background: none no-repeat left 5px; display:inline-block; color:#2f2f2f; height:23px; line-height:23px;}
.search_btn a:hover{color:var(--color-hover);}
.search_btn a:first-child{background-image:none;}
.search_btn a.active{background-color:var(--ui-active, #E66B65); background-image:none; color:var(--ui-active-text, #ffffff);}

.search_area select{color:var(--color-text-tertiary);}
.search_area input[type=text]{border:1px solid var(--color-border); padding:2px; height:18px; line-height:17px}
.search_area img{vertical-align:middle;}
.search_result li{background: none no-repeat left 4px;  display:inline-block; padding:0 5px; color:#888787;}
.search_result li:first-child{background-image:none;}
.search_result img{vertical-align:middle;}

/*상단정렬*/
.search_wrap:after{content:""; clear:both; display:block}
/* .search_btn a:first-child{background-image:none;}
.search_btn a.active{background-color:var(--ui-active, #E66B65); background-image:none; color:var(--ui-active-text, #fff);}
.search_area{float:right; text-align:right; padding-top:2px;}
.search_area select{color:var(--color-text-tertiary); padding:2px;}
.search_area input[type=text]{border:1px solid var(--color-border); padding:2px; height:18px; line-height:17px}
.search_area img{vertical-align:middle;}
.search_result li{background: none no-repeat left 4px;  display:inline-block; padding:0 5px; color:#888787;}
.search_result li:first-child{background-image:none;}
.search_result img{vertical-align:middle;}
.search_area1{position:absolute; top:-5px; right:0; text-align:right;}
 */
/*리스트*/
.list{border-bottom:0.5px solid var(--color-border); width:100%; border-collapse:collapse;font-size:13px;}
.list th{background-color:var(--color-text-light); color:#fff; border-bottom:1px solid #ddd; height:38px; font-weight:500;} /*리스트상단 번호/구분/제목 등 한줄 정보*/
.list td{border-top:0.5px solid var(--color-border);word-break: break-all; }
.list thead tr:first-child th:first-child{border-left:none;}
.list tbody td:first-child{border-left:none;}


/*============================================================
  다크모드(darkmode) 프리미엄 컬러셋
  - CSS 변수는 layout.css :root에 정의됨
  - 저가형 노트북에서도 시인성 확보
  - 장시간 이용 시 눈의 피로 최소화
============================================================*/

/*========================================
  게시판 상단 헤더 (번호/제목/작성자 th)
========================================*/
body.dark .list th{
	background-color: var(--dark-bg-secondary);
	color: #ffffff;
	letter-spacing: 0.3px;
	border-bottom: 1px solid var(--dark-border-secondary);
	font-weight: 500;
}

/*========================================
  상단 BEST/공지/이벤트 인기글 영역
  - Elevation 효과로 본문과 확실히 구분
========================================*/
/* 라이트모드 - 범용 변수 사용 */
.rs_var_area{
	background-color: var(--color-bg-light);
	border-left: 0.4px solid var(--color-border);
}

/* 다크모드 */
body.dark .rs_var_area{
	background-color: var(--dark-bg-tertiary);
	border-left: 0.4px solid var(--dark-border-primary);
}

body.dark .rs_var_area td{
	border-color: var(--dark-border-primary);
}

/* BEST/공지/이벤트 영역 등록일 색상 - 아래 리스트와 통일 */
body.dark .rs_var_area .list_date_td, body.dark .rs_var_area td:not(.title01):not(:has(a)){
	color: var(--dark-text-secondary);
}

/* BEST/공지/이벤트 영역 컬럼 너비 고정 - 제목 길어도 다른 컬럼 영향 방지 */
.rs_var_area td{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 제목 컬럼만 줄바꿈 허용하되 overflow 처리 */
.rs_var_area td:has(> a.title01){ /* 2026-09-14 N2: 구분 칸도 폐지 → 제목 칸은 "제목 링크를 품은 칸" */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 0;
	padding-right: 25px;
}

/* 제목 내 링크도 ellipsis 처리 */
.rs_var_area td:has(> a.title01) a.title01{ /* 2026-09-14 N2 */
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 20px;
}

/* BEST/공지/이벤트 영역 전체 테이블 스타일 */
body.dark .list:has(.rs_var_area){
	border: 1px solid var(--dark-border-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/*========================================
  게시판 본문 리스트 행 (hover_list)
  - 통일 배경 + 호버 효과
========================================*/
body.dark .hover_list{
	background-color: var(--dark-bg-secondary) !important;
	color: var(--dark-text-primary);
	transition: background-color 0.2s ease;
}

/* 검색 리스트 가격/라벨 (소형견, 중형견, 대형견 등) */
body.dark .hover_list td.c_price1_result, body.dark .hover_list td.c_price2_result, body.dark .hover_list td.c_price3_result{
	color: var(--dark-color-link-hover, #C3D0DE) !important;
}

/* 가격 영역 보더 */
body.dark .hover_list td{
	border-color: var(--dark-border-primary);
}

/* 마우스 오버 효과 */
body.dark .hover_list:hover{
	background-color: var(--dark-bg-hover);
}

/* 제목 글자색 - 장시간 독서에 편한 색상 */
body.dark .hover_list a.title01{
	color: var(--dark-text-primary);
}

/* 조회수, 날짜 등 부가 정보 */
body.dark .hover_list .num, body.dark .hover_list .category, body.dark .hover_list .name, body.dark .hover_list td[align="center"]{
	color: var(--dark-text-secondary);
}

/* 추천수 하이라이트 (0 이상일 때) */
body.dark .hover_list td[style*="color:var(--state-ongoing, #ee6a48)"], body.dark .rs_var_area td[style*="color:var(--state-ongoing, #ee6a48)"]{
	color: var(--dark-text-emphasis, #F0A088) !important;   /* 2026-09-11 BEST/공지 행(바탕 #2A2623) 위 D46A50 은 4.3:1 → 밝은 코랄 */
}

/*========================================
  방문한 링크 스타일 (다크모드)
========================================*/
body.dark .list a:visited.title01{
	color: var(--dark-text-muted);
}

/*========================================
  리스트 테두리 및 구분선 (다크모드)
========================================*/
body.dark .list{
	border-color: var(--dark-border-primary);
}

body.dark .list td{
	border-top-color: var(--dark-border-primary);
}

/* 리스트 하단 글쓰기 버튼 영역 — 리스트와 이어지는 배경 */
body.dark .bg3 > .text_right{
	background-color: var(--dark-bg-secondary);
	border-left: 1px solid var(--dark-border-primary);
	border-right: 1px solid var(--dark-border-primary);
	border-bottom: 1px solid var(--dark-border-primary);
	margin-top: 0;
}

/*게시판 갤러리형 리스트 배경색(gallery_list) */
body.dark .inner_listbox{
	background-color: var(--dark-bg-primary);
	border-color: var(--dark-border-input);
}


/*커뮤니티 board_list.php 리스트제목*/
.list tbody td a.title01{
	font-weight:400; 
	font-size:15px;
	text-align:left; 
	padding-top:10px;
	padding-bottom:10px;
	padding-left:12px;
	white-space:nowrap;
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	float:left;
	max-width:100%;
}

.list tbody td a.title01 span{color:var(--color-link-hover); font-size:13px;}


/*게시판 리스트 링크 css*/
.list a:link{text-decoration:none; color:#222;}
.list a:hover{text-decoration:none; color:var(--color-hover);}
.list a:visited{text-decoration:none; color:#9f9f9f;}
body.dark .list a:hover{color:var(--color-hover);}
body.dark .list a:visited{color:var(--dark-text-link-visited, #8C8C8C);}


body.dark .list a:link, body.dark .list a:link .count{
	text-decoration: none;
	color: var(--dark-text-primary);
}


/*thumbnail_list a링크 css*/



/*gallery_list a링크 css*/
body .inner_listbox a:visited{ 
    text-decoration: none;
    color: #9f9f9f !important;
}

body.dark .inner_listbox a:link, body.dark .inner_listbox a:link .count{
    text-decoration: none;
    color: var(--dark-text-primary) !important;
}

body.dark .inner_listbox a:visited, body.dark .inner_listbox a:visited .count{
    text-decoration: none;
    color: var(--dark-text-muted) !important;
}




/*visited 시 count색상도 visited상태로 변경*/
body .list a:visited .count, body .inner_listbox a:visited .count{ 
    color: #9f9f9f !important;
}









/*커뮤니티 리스트 hover 및 bottom_list 현재글(search_list hover시에도 적용)*/
.hover_list:hover{
	background: var(--color-bg-lighter);
}
/* body.dark .hover_list:hover는 상단 다크모드 섹션에서 처리 */









/*current view 시 글씨색상 및 배경*/
.current_view{
	background: var(--color-tertiary-soft-bg, #e9f4ee);
}

body.dark .current_view, body.dark .current_view a, body.dark .current_view td, body.dark .current_view .title01, body.dark .current_view a:visited .count, body.dark .current_view span:not(.imagebox-text span){
	color: var(--dark-text-primary) !important;
	background: var(--ui-select-soft-bg, #FCF1F0) !important;
	font-weight: 400 !important;
}


/*current view 시 글씨색상 및 배경(view_text3는 리스트에서 제목 밑 미리보기(preview와 thumbnail리스트 게시판)*/



/* board_view 다크모드 시 이전글/다음글*/
body.dark .btns_list, body.dark .btns_prevview, body.dark .btns_nextview, body.dark .btns_list i, body.dark .btns_prevview i, body.dark .btns_nextview i{
	color: var(--dark-text-primary) !important;
}
/* 2026-09-14 hover 통일: 위 !important 가 hover 까지 막아 다크 목록·이전글·다음글이 hover 반응이 없었다 */
body.dark .btns_list:hover, body.dark .btns_prevview:hover, body.dark .btns_nextview:hover, body.dark .btns_list:hover i, body.dark .btns_prevview:hover i, body.dark .btns_nextview:hover i{
	color: var(--color-hover) !important;
}
/* 이전글·다음글 안의 제목(span.title_prevview 등) 글자까지 — 링크에만 걸면 안쪽 글자는 다크 기본색이 남았다(재인덱싱 실측) */
body.dark .btns_list:hover *, body.dark .btns_prevview:hover *, body.dark .btns_nextview:hover *{
	color: var(--color-hover) !important;
}



/*커뮤니티 board_view 하단 추천/공유 버튼*/
div.countbox, div.sharebox{
	width:60px;
	height:60px;
	margin:auto;
	border:1px solid #d7d7d7;
}

div.sharebox{
	border-left:none;
}



body.dark div.countbox, body.dark div.sharebox{
	background-color: var(--dark-bg-button) !important;
	border-color: var(--dark-border-secondary) !important;
	color: var(--dark-text-primary) !important;
}



div.view_texta div.countbox:hover{cursor:pointer;}
div.view_texta div.countbox span.count{width:40px;text-align:center;float:right;margin-right:5px;color:var(--color-secondary, #2B5F9E);font-size:16px;margin-top:5px;}
div.countbox span.count{width:48px;text-align:center;float:right;margin-right:5px;color:var(--color-secondary, #2B5F9E);font-size:16px;margin-top:5px;}


/*dark 모드*/
body.dark div.countbox, body.dark div.sharebox, body.dark span.count, body.dark div.sharebox i{
	color:var(--dark-text-primary) !important
}

div.sharebox:hover{cursor:pointer;}
div.sharebox span.share_icon{width:50px;text-align:center;float:right;margin-right:5px;color:var(--color-primary-dark, #c43a3e);font-size:20px;margin-top:8px;}

/*sharebox style*/
#sharebox_content{
	width: 305px;
	height: 45px;
	padding: 12px;
	margin-top:-50px;
	margin-left: 390px;
	border: 1px solid #929292;
	text-align: center;
	background-color: #FDFDFD;
	position: absolute;
	z-index:6000;
}
#sharebox_content li{
	float: left;
	padding-right: 12px;
	margin-left: 18px;
}
#sharebox_content li a:hover{
	color:var(--color-hover);   /* 링크 = 2차색 */
}






/*커뮤니티 board_view 하단 버튼(목록/신고/재게시요청)*/
.btn_width70{
	font-size:13px;
	width:70px;
	height:28px;
	line-height:28px;
	text-align:center;
	font-weight:600;
	border:1px solid #333;
}

body .btn_width70{
	background-color: #F6F6F6 !important;
	border-color: var(--color-border) !important;
	color: #747474 !important;
}

body.dark .btn_width70{
	background-color: var(--dark-bg-button) !important;
	border-color: var(--dark-border-secondary) !important;
	color: var(--dark-text-primary) !important;
}





/*리스트 글 작성자*/
.list td span.name{font-weight:350; font-size:12.5px; max-width:150px;display:inline-block;color:#666; text-overflow: ellipsis;white-space: nowrap;overflow: hidden;position:relative;top:-1px;left:2px;vertical-align:middle;}





/* 커뮤니티메인 */
/*
.main_left{width:474.16px;float:left;}
.main_left ul{margin-top:10px;}
*/
.main_left li{padding-top:0px; overflow:hidden;}
.main_left li .first{margin-top:0;}

/*
.main_left li .view_img{width:142px;height:87px;border:1px solid var(--color-border);background:none no-repeat; float:left; margin-right:10px;} 
*/
/*
.main_left li .view_img2{width:142px;height:87px; border:1px solid var(--color-border); border-radius: 1%; background:none no-repeat; float:left; margin-right:10px;} 
*/

.main_left li .view_img2{
  width: 135px;
  height: 95px;
  float: left;
  position: relative;
  
  object-fit: cover;
  transform: none; /* 이미지 회전 방지 */
  background-size: cover; /* YouTube 썸네일에 사용 */
  background-position: center; /* YouTube 썸네일에 사용 */
}


.main_left li .view_img2 img{
  border: 1px solid var(--color-border);
  border-radius: 1%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative; /* 이미지에 대한 position을 재설정합니다. */
}

.main_left li .view_img2::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1%;
  z-index: -1; /* 이미지 뒤에 위치하도록 z-index를 설정합니다. */
  /*
  background: none no-repeat;
  */
}


/* .community_list td a.title01{max-width:300px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;}
.community_list td.title01 span.count{float:right;font-size:11px;} */



/*커뮤니티 베스트/이벤트/공지 아이콘*/
.best_icon{
	width: 45px;
	height: 20px;
	background-color: var(--light-icon-best, #2B5F9E);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	border-radius: 2px;
}
body.dark .best_icon{
	background-color: var(--dark-icon-best, #A2BAD7);
	color: #fff;
	font-weight: 600;
}

/* BEST 태그 */
.tag_best{
	background-color: var(--tag-best-bg, #4A6580);
	color: var(--tag-best-text, #ffffff);
	font-size: 11px;
	font-weight: 500;
	border-radius: 2px;
	padding: 2px 5px;
}
body.dark .tag_best{
	background-color: var(--dark-tag-best-bg, #A2BAD7);
	color: #fff;
	font-weight: 600;
}

.event_icon{
	width: 45px;
	height: 20px;
	background-color: var(--tag-event-bg, #e2a733);
	color: var(--tag-event-text, #2A2210);
	font-size: 11px;
	font-weight: 400;
	border-radius: 2px;
}
body.dark .event_icon{
	background-color: var(--dark-tag-event-bg, #EFC631);
	color: #fff;
	font-weight: 500;
}




/* 이벤트게시판 기간 앞 상태 기본 스타일 */
.event_gubun{
    font-size: 12px;
    color: #fff !important;
    border-width: 0px;
    padding: 2px 3px;
}

.event_period{
	color:#aaa;
	font-size:13px;
}

/* 진행일 때 */
.event_progress{
    background-color: var(--color-text-lighter, #9a9a9a);
    border-radius: 5px;
    padding: 2px 6px;
}
body.dark .event_progress{
    background-color: var(--color-text-tertiary, #666);
}

/* 종료일 때 */
.event_end{
    background-color: var(--color-primary, #D84841);
    border-radius: 5px;
    padding: 2px 6px;
}
body.dark .event_end{
    background-color: var(--color-text-tertiary, #666);
}







.notice_icon{
	width: 38px;
	background-color: var(--tag-notice-bg, #333333);
	color: #333;
	border: 1px solid var(--color-border-light);
	padding: 1px 5px;
	font-size: 11px;
	font-weight: 500;
	border-radius: 2px;
}
body.dark .notice_icon{
	background-color: var(--tag-notice-bg, #333333);
	color: var(--tag-notice-text, #ECECEC);
	border-color: var(--tag-notice-bg, #333333);
	font-weight: 600;
}



/*커뮤니티 리스트 글쓰기버튼css*/
.write_button{
	background-color: var(--ui-action, #D84841);   /* 🔴 글쓰기 = 주 행동. 파랑이었다 */
	color:#fdfdfd;
	text-align:center;
	font-size:15.5px;
	width:100px;
	height:33px;
	line-height:33px;
	box-sizing: border-box;
}
body.dark .write_button{
	background-color: var(--ui-action, #D84841) !important;
	color: var(--ui-action-text, #ffffff) !important;
}


/*작성자(글쓴이)css*/
.bbs_w_id{
	text-align:center;
	width:40px;
	height:16px;
	line-height:16px;
	margin-left:5px; 
	background-color: var(--ui-action, #D8432A);   /* [2026-09-12] 라이트 전용 토큰 → 모드별 토큰 */
	color:#fff;
	border-radius:2px; 
	font-size:11px;
}

body.dark .bbs_w_id{
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
}



/*커뮤니티 좌측상단 board(리스트) / gallery(갤러리) / thumbnail(썸네일) 변경버튼css*/
.listSelect_box{
    display: flex; /* Flexbox 사용 */
    justify-content: flex-end; /* 오른쪽 정렬 */
    gap: 8px; /* 요소 간 간격 */
}

.listSelect_group{
    display: flex;              /* Flexbox */
    align-items: center;        /* 세로 중앙 정렬 */
    justify-content: center;    /* 가로 중앙 정렬 */
    
    font-size:17px;
    color:var(--color-text-secondary);
    width:35px;
    height:34px;
    box-sizing: border-box;
    border:1px solid #ddd;
    margin-right:3%;
}


/********** s:다크모드 css - 게시판 상단 모드변경(listSelect_group) **********/
body.dark .listSelect_group{
    border-color: var(--dark-border-secondary) !important;
}

body.dark .listSelect_group.active{
    background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
    border-color: var(--ui-select-soft-border, #E66B65) !important;
}

body.dark .listSelect_group.active span{
	color: var(--ui-select-soft-text, #9C3830) !important;
}

body.dark .listSelect_group span{
	color: var(--dark-text-primary) !important;
}

body.dark .listSelect_group{
	background-color: var(--search-input-bg) !important;
	border-color: var(--search-input-border) !important;
}
/********** e:다크모드 css - 게시판 상단 모드변경(listSelect_group) **********/



/*커뮤니티 상단 최신순/조회순/추천순/댓글순 아이콘*/
.sort_icon_group{
	width: 60px;
	height: 33px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14.5px;
	cursor: pointer;
	border: 1px solid #ddd;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	background-color: #FFFFFF;
	font-family: inherit;
	line-height: inherit;
}

/* 라이트모드 - 비활성 버튼 글씨 */
.sort_icon_group:not(.active) span{
	color: var(--color-text-secondary);
}

/* 라이트모드 - 활성 버튼 (역할: 현재 위치) */
.sort_icon_group.active{
	background-color: var(--ui-active, #E66B65);
	border-color: var(--ui-active, #E66B65);
}

/* 라이트모드 - 활성 버튼 글씨 */
.sort_icon_group.active span{
	color: #FFFFFF;
}

/* button 타입일 때 기본 스타일 리셋 */
button.sort_icon_group{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
}

/*========================================
  다크모드 (darkmode)
========================================*/
html.dark .sort_icon_group, body.dark .sort_icon_group{
	background-color: var(--search-input-bg);
	border-color: var(--search-input-border);
}

/* 다크모드 - 비활성 버튼 글씨 */
html.dark .sort_icon_group:not(.active) span, body.dark .sort_icon_group:not(.active) span{
	color: var(--search-input-text);
}

/* 다크모드 - 활성 버튼 */
html.dark .sort_icon_group.active, body.dark .sort_icon_group.active{
	background-color: var(--ui-select-soft-bg, #FCF1F0);
	border-color: var(--ui-select-soft-border, #E66B65);
	font-weight: 500;
}

/* 다크모드 - 활성 버튼 글씨 */
html.dark .sort_icon_group.active span, body.dark .sort_icon_group.active span{
	color: #FFFFFF;
}

.gallery_img_icon{
	position: absolute; /* 절대 위치로 설정 */
	width: 35px; /* 아이콘의 너비 */
	height: 25px; /* 아이콘의 높이 */
	background-color:var(--color-primary-hover);
	display: flex; /* Flexbox를 사용하여 자식 요소의 위치를 조정 */
	align-items: center; /* 수직 중앙 정렬 */
	justify-content: center; /* 수평 중앙 정렬 */
	border-radius: 5%; /* 원형 아이콘을 만들기 위해 모서리를 둥글게 설정 */
	color: white; /* 글씨 색상 */
	font-size: 12px; /* 글씨 크기 */
	text-align: center; /* 글씨 중앙 정렬 */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 글씨에 그림자 추가 (선택 사항) */
}





.dat_write_etc{background:rgba(81,107,130,0.16);}/*background:#f3f3f3;padding:23px 0;*/
/*
.dat_write_etc textarea{width:540px; height:48px;}
*/
.dat_write_etc img{vertical-align:middle}
.dat_write_etc p{}
.dat_write_etc .txt_red{color:var(--color-error)}



/*페이징*/
/*
.pagination02{white-space:nowrap;text-align:center;height:26px;line-height:26px;max-width:1000px;padding:10px 0;}
.pagination02 a{display:inline-block;height:26px;width:22px;vertical-align:middle;text-align:center;text-decoration:none;font:12px/26px;font-weight:bold;color:#333;}
.pagination02 .on{color:var(--ui-current-page, #D84841); font-weight:bold;}
.pagination02 .first{width:7px;height:5px;background:none no-repeat;text-indent:100%;white-space:nowrap;overflow:hidden;}
.pagination02 .prev{width:7px;height:5px;background:none no-repeat;text-indent:100%;white-space:nowrap;overflow:hidden;margin-left:10px;}
.pagination02 .next{width:7px;height:5px;background:none no-repeat;text-indent:100%;white-space:nowrap;overflow:hidden;margin-left:10px;}
.pagination02 .end{width:7px;height:5px;background:none no-repeat;text-indent:100%;white-space:nowrap;overflow:hidden;margin-left:10px;}
*/
.pagination02{white-space: nowrap; text-align: center; border-left:none; border-right:none; padding:15px 0 25px 0; cursor: default; user-select: none;} /*pagination 위치 - 버튼 사이 공백에서 텍스트 커서 방지*/
/* 활성 페이지 포인터 커서 강제 적용 (부모 cursor: default 무시) */
.pagination02 a.on, .pagination02 a.on:hover, .pagination02 a.on *, .pagination02 a.on .current_page, .pagination02 a.on .current_page:hover{
	cursor: pointer !important; /* 활성 페이지는 포인터 커서 강제 적용 */
}
.pagination02 a{display:inline-block; padding:0 8px; height:22px; line-height:22px; border:1px solid color-mix(in srgb, var(--ui-action,#D8432A) 30%, transparent); background-color: transparent; color: #2f2f2f !important; border-radius: 3px; transition: all 0.2s; cursor: pointer; user-select: none;} /*pagination a링크 버튼 기본 css - 테두리 추가, 투명 배경, 진한 텍스트, 커서 포인터, 텍스트 선택 방지*/
.pagination02 a:hover{background-color: color-mix(in srgb, var(--ui-action,#D8432A) 10%, transparent); color: var(--color-hover) !important; border-color: color-mix(in srgb, var(--ui-action,#D8432A) 50%, transparent);} /*호버 시 연한 배경*/
/* 활성 페이지: a.on 클래스 사용 (comment_pager.php에서 class="on" 적용) */
.pagination02 a .current_page{background-color: transparent !important; padding:0 !important; height:auto !important; line-height:inherit !important; border:none !important; border-radius:0 !important; user-select: none;} /*작은 버튼 CSS 제거 - 배경/패딩/테두리 모두 제거, 텍스트 선택 방지*/
.pagination02 a.on, a.on.pagination02, .pagination02 a.on:hover, a.on.pagination02:hover{background-color: transparent !important; border-color: var(--ui-current-page, #D84841) !important; color: var(--ui-action-hover, #C33F39) !important; cursor: pointer !important; pointer-events: auto !important; user-select: none;} /*활성 페이지 a 태그 스타일 - 배경색 제거, 배경색을 폰트 색상으로, hover 시 포인터 커서 (JavaScript에서 클릭 방지)*/
.pagination02 a.on .current_page, a.on.pagination02 .current_page, .pagination02 a.on .current_page:hover{color: var(--ui-action-hover, #C33F39) !important; font-weight: 900; user-select: none; cursor: pointer !important; pointer-events: auto !important;} /*활성 페이지 내부 텍스트 - 배경색을 폰트 색상으로, 포인터 커서*/

/* 하단 pagination 스타일 (배경이 없는 곳에 은은한 배경과 테두리 추가) */
.paging_area .pagination02{
	background-color: rgba(245, 240, 238, 0.6) !important; /* 파스텔 톤 연한 배경 */
	padding: 15px 20px 25px 20px;
	border-top: 1px solid color-mix(in srgb, var(--ui-action,#D8432A) 20%, transparent) !important; /* 위쪽 얇은 테두리 */
	border-bottom: 1px solid color-mix(in srgb, var(--ui-action,#D8432A) 20%, transparent) !important; /* 아래쪽 얇은 테두리 */
	border-radius: 5px;
	margin: 10px 0;
	cursor: default !important; /* 버튼 사이 공백에서 텍스트 커서 방지 */
	user-select: none !important;
}

body.dark .paging_area .pagination02{
	background-color: rgba(60, 60, 65, 0.5) !important; /* dark 모드 연한 회색 배경 */
	border-top: 1px solid color-mix(in srgb, var(--ui-action,#D46A50) 30%, transparent) !important;
	border-bottom: 1px solid color-mix(in srgb, var(--ui-action,#D46A50) 30%, transparent) !important;
}

/* 하단 pagination 버튼 스타일 (투명 배경, 활성만 강조) */
.paging_area .pagination02 a{
	border: 1px solid color-mix(in srgb, var(--ui-action,#D8432A) 30%, transparent) !important; /* 테두리 추가 */
	background-color: transparent !important;
	color: #666 !important;
	cursor: pointer !important;
	user-select: none !important;
}

.paging_area .pagination02 a:hover{
	background-color: color-mix(in srgb, var(--ui-action,#D8432A) 10%, transparent) !important;
	color: var(--ui-action-hover, #C33F39) !important;
	border-color: color-mix(in srgb, var(--ui-action,#D8432A) 50%, transparent) !important;
}

.paging_area .pagination02 a{
	border: 1px solid color-mix(in srgb, var(--ui-action,#D8432A) 30%, transparent) !important;
}
.paging_area .pagination02 a:hover{
	border-color: color-mix(in srgb, var(--ui-action,#D8432A) 50%, transparent) !important;
}
.paging_area .pagination02 a.on, .paging_area .pagination02 a.on:hover, .paging_area .pagination02 a.on *, .paging_area .pagination02 a.on .current_page, .paging_area .pagination02 a.on .current_page:hover{
	background-color: transparent !important; /* 배경색 제거 */
	border-color: var(--ui-current-page, #D84841) !important;
	color: var(--ui-action-hover, #C33F39) !important; /* 배경색을 폰트 색상으로 */
	cursor: pointer !important; /* hover 시 포인터 커서 유지 (JavaScript에서 클릭 방지) */
	pointer-events: auto !important;
}
.paging_area .pagination02 a.on .current_page{
	border: none !important;
	font-weight: 900;
}

body.dark .paging_area .pagination02 a{
	border-color: color-mix(in srgb, var(--ui-action,#D46A50) 30%, transparent) !important;
}
body.dark .paging_area .pagination02 a:hover{
	border-color: color-mix(in srgb, var(--ui-action,#D46A50) 50%, transparent) !important;
}
body.dark .paging_area .pagination02 a.on, body.dark .paging_area .pagination02 a.on:hover, body.dark .paging_area .pagination02 a.on *, body.dark .paging_area .pagination02 a.on .current_page, body.dark .paging_area .pagination02 a.on .current_page:hover{
	background-color: transparent !important;
	border-color: var(--ui-checked-bg) !important;
	color: var(--ui-checked-bg) !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}

/* Dark 모드 pagination 텍스트 색상 */
body.dark .pagination02 a{
	color: var(--dark-text-primary) !important; /* dark 모드에서도 잘 보이도록 */
}

body.dark .pagination02 a:hover{
	color: var(--ui-checked-bg) !important;
	background-color: color-mix(in srgb, var(--ui-action,#E8635C) 15%, transparent) !important;
}

body.dark .pagination02 a.on, body.dark .pagination02 a.on:hover, body.dark .pagination02 a.on *, body.dark .pagination02 a.on .current_page, body.dark .pagination02 a.on .current_page:hover{
	background-color: transparent !important;
	border-color: var(--ui-checked-bg) !important;
	color: var(--ui-checked-bg) !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}

body.dark .pagination02 .nav_page{
	color: inherit !important; /* 부모 a 태그 색상 상속 */
}

body.dark .nav_render_button{
	color: var(--dark-text-primary) !important; /* dark 모드에서도 잘 보이도록 */
	background-color: transparent !important;
	border: none !important;
}

body.dark .nav_render_button:hover{
	color: var(--ui-checked-bg) !important;
	background-color: color-mix(in srgb, var(--ui-action,#E8635C) 15%, transparent) !important;
}

/* 상단 pagination 강제 색상 적용 */
body.dark #comment_pagination_top a{
	color: var(--dark-text-primary) !important;
}

body.dark #comment_pagination_top .nav_render_button{
	color: var(--dark-text-primary) !important;
}

body.dark #comment_pagination_top .nav_page{
	color: var(--dark-text-primary) !important;
}

body.dark #comment_pagination_top a.on, body.dark #comment_pagination_top a.on:hover, body.dark #comment_pagination_top a.on *, body.dark #comment_pagination_top a.on .current_page, body.dark #comment_pagination_top a.on .current_page:hover{
	background-color: transparent !important;
	border-color: var(--ui-checked-bg) !important;
	color: var(--ui-checked-bg) !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}

.paging_area .pagination02 .nav_page{
	color: inherit !important; /* 부모 a 태그 색상 상속 */
	background-color: transparent !important;
	user-select: none !important; /* 텍스트 선택 방지 */
}

body.dark .paging_area .pagination02 .nav_page{
	color: #ccc !important;
}

.paging_area .pagination02 .nav_page:hover{
	color: var(--ui-action-hover, #C33F39) !important;
	background-color: color-mix(in srgb, var(--ui-action,#D8432A) 10%, transparent) !important;
}

body.dark .paging_area .pagination02 .nav_page:hover{
	color: var(--ui-checked-bg) !important;
	background-color: color-mix(in srgb, var(--ui-action,#E8635C) 15%, transparent) !important;
}

.paging_area .nav_render_button{
	color: inherit !important; /* 부모 a 태그 색상 상속 */
	background-color: transparent !important;
	border: none !important;
	user-select: none !important; /* 텍스트 선택 방지 */
	cursor: inherit !important;
}

body.dark .paging_area .nav_render_button{
	color: #ccc !important;
}

.paging_area .nav_render_button:hover{
	background-color: transparent !important; /* 부모 a 태그 hover 스타일 사용 */
	color: inherit !important;
}

body.dark .paging_area .nav_render_button:hover{
	background-color: color-mix(in srgb, var(--ui-action,#E8635C) 15%, transparent) !important;
	color: var(--ui-checked-bg) !important;
}


.nav_render_button{height:auto; line-height:inherit; font-weight:500; color:inherit !important; background-color: transparent !important; border:none !important; border-radius:0 !important; padding:0 !important; transition: all 0.2s; user-select: none; cursor: inherit;}/*이전페이지,다음페이지,처음,끝 버튼 css - 부모 a 태그 스타일 상속, 텍스트 선택 방지*/
/* .current_page와 .nav_page는 이제 a 태그 스타일을 따름 - 별도 스타일 제거 */
.pagination02 .nav_page{font-weight:700; color:inherit !important; background-color: transparent !important; padding:0 !important; height:auto !important; line-height:inherit !important; border:none !important; user-select: none;} /*페이지 숫자css - 부모 a 태그 스타일 상속, 텍스트 선택 방지*/

/*
.pagination02 .first{background:none no-repeat;text-indent:100%;white-space:nowrap;overflow:hidden; margin:20px -5px 0 -5px;}
.pagination02 .prev{background:none no-repeat;text-indent:100%;white-space:nowrap;overflow:hidden;   margin:20px -5px 0 8px;}
.pagination02 .next{background:none no-repeat;text-indent:100%;white-space:nowrap;overflow:hidden;   margin:20px 0 0 8px;}
.pagination02 .end{background:none no-repeat;text-indent:100%;white-space:nowrap;overflow:hidden;   margin:20px 0 0 -5px;}
*/







/* 한줄수다 */
/*.one_list_01 .sub_reply_02_official td .reply_txta span{position:absolute;right:130px;top:68px;color:#8c8c8c;font-size:11px;}*/


.num{font-size:12.5px; color:#505050; font-weight:350; }
body.dark .num{ color: var(--dark-text-primary); }

.sign{clear: both;  border: 1px solid #ddd;  margin: 15px 0 -1px 0;  padding: 10px 15px 10px 10px; overflow: hidden;  zoom: 1; }
.sign .pf{float: left; margin: 0 15px 0 0;  width: 60px;  height: 60px;}
.sign .profile{float: left;  margin: 0 6px 5px 0; height: 60px;  width: 60px;}
.sign .profile img{border: 1px solid #ddd;  border-radius: 100px; height: 60px;  width: 60px;}
.sign .sign .name{position:relative; width: 18px;  height: 18px; vertical-align: middle;}

.sign .tx{float: left; width: 500px;  overflow: hidden;  line-height: 1.3;  font-size: 12px;  padding: 0 0 0 15px;  color: #999;}
/*
.sign .tx {float: left; width: 500px;  overflow: auto;  line-height: 1.3;  height:5.2em; font-size: 12px;  padding: 0 0 0 15px;  color: #999;}
*/

.popup_menu_area{position: absolute;  margin: 2px 0;  padding: 10px;  border: 1px solid #ddd; background:#fff; border-radius: 3px;  font-size: 12px;}
.popup_menu_area li{padding-bottom:5px; }
.popup_menu_area li:last-child{padding-bottom:0;}



/* .main_box01 .popup_menu_area{right:0;} */

/* 신고하기팝업 */

/* .mycommunity_box01 th{height:40px;border-bottom:1px solid var(--color-border);text-align:center;background-color:var(--color-bg-lighter);}
.mycommunity_box01 td{height:40px;border-bottom:1px solid var(--color-border);text-align:center;}
.mycommunity_box01 td span.oname{font-size:11px;color:#999;}
.mycommunity_box01 td.remain_date{font-weight:bold;color:var(--color-brown);} /* register .paymentlist 와 동일 규칙 */
.mycommunity_box01 td span.amount{font-size:14px;font-weight:bold;color:var(--accent-money, #B85D00);} */


/*========================================
  페이저/검색 영역 (pager_area, search_area)
========================================*/
.pager_area{
	margin-top: 10px;
	background-color: var(--color-bg-lighter);
	text-align: center;
}

.search_area{
	padding: 10px 0;
	background-color: #f9f9f8;
	border-top: 1px solid #ebebea;
}

body.dark .pager_area{
	background-color: var(--dark-bg-primary);
}

body.dark .search_area{
	background-color: var(--dark-bg-primary);
	border-top-color: var(--dark-border-secondary);
}

body.dark .search_area select, body.dark .search_area input[type="text"]{
	background-color: var(--dark-bg-secondary);
	border: 1px solid var(--dark-border-input);
	color: var(--dark-text-primary);
}

/* 포커스 시 브랜드 오렌지 테두리 */
body.dark .search_area select:focus, body.dark .search_area input[type="text"]:focus{
	border-color: var(--dark-border-focus);
	outline: none;
}

body.dark .search_area button, body.dark .search_area .btn{
	background-color: var(--dark-bg-secondary);
	border: 1px solid var(--dark-border-input);
	color: var(--dark-text-primary);
}

body.dark .search_area button:hover, body.dark .search_area .btn:hover{
	border-color: var(--dark-border-focus);
}


/*========================================
  추천/비추천 버튼 (recommend_btn)
========================================*/
/* 2026-09-11 시안 확정(md/mockup/vote_dark_260911): 안 누름 = 추천 테라코타 아이콘·비추천 회색 아이콘·은은한 테두리,
   누름(.is-on, board_recomm.js) = 원 전체 채움 + 흰 아이콘 + 바깥 연한 링. 다크는 토큰(--color-brand=D46A50)이 알아서. 인라인 색 금지. */
.recommend_btn{
	background-color: var(--color-bg-lighter);   /* 다크는 아래 --dark-bg-secondary (안 누른 추천 아이콘 D46A50 이 #2A2623 위에선 4.3:1) */
	border: 1px solid var(--color-border-medium, #C8C8CE);
	cursor: pointer;
	transition: background-color .15s, border-color .15s, box-shadow .15s;
}
body.dark .recommend_btn{ background-color: var(--dark-bg-secondary, #211E1B); }
.post_recomm_btn i{ color: var(--color-brand); }
.post_anti_btn i{ color: var(--color-text-tertiary, #666); }
.post_recomm_btn:hover{ border-color: var(--color-brand); }
.post_anti_btn:hover{ border-color: var(--color-text-tertiary, #666); }
.recommend_btn.is-on{ border-color: transparent; }
.post_recomm_btn.is-on{ background-color: var(--color-brand); box-shadow: 0 0 0 5px var(--tint-coral-bg); }
.post_recomm_btn.is-on i{ color: #fff; }
.post_anti_btn.is-on{ background-color: #5B6470; box-shadow: 0 0 0 5px rgba(91, 100, 112, .18); }
.post_anti_btn.is-on i{ color: #fff; }
body.dark .post_anti_btn.is-on{ background-color: #727A87; box-shadow: 0 0 0 5px rgba(114, 122, 135, .25); }
.post_recomm_up_count{ color: var(--color-brand); font-weight: 700; }
.post_recomm_down_count{ color: var(--color-text-tertiary, #666); font-weight: 600; }


/*========================================
  URL 링크 영역 (url_link)
========================================*/
.url_link{
	border: 1px solid var(--color-border-light);
	padding: 10px 13px;
}

body.dark .url_link{
	background-color: var(--dark-bg-hover);
	border-color: var(--dark-border-secondary);
	color: var(--dark-text-primary);
}

body.dark .url_link a{
	color: var(--dark-text-link) !important;
}


/*========================================
  테이블 헤더 (board_write thead)
========================================*/
.board_write_thead{
	background-color: var(--color-bg-light);
}

body.dark .board_write_thead{
	background-color: var(--dark-bg-secondary);
}

body.dark .board_write_thead th, body.dark .board_write_thead td{
	color: var(--dark-text-primary);
	border-color: var(--dark-border-secondary);
}


/*========================================
  공지글 체크박스 (board_write)
========================================*/
.stick-row th, .stick-row td{
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}


/*========================================
  프로필 이미지/아이콘 영역
========================================*/
.profile_img{
	border: 0.5px solid #EAEAEA;
	background-color: #ddd;
}
body.dark .profile_img{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
}

.fa-user-large{
	border: 0.5px solid #EAEAEA;
	color: #ddd;
	background-color: var(--color-bg-lighter);
}
body.dark .fa-user-large{
	color: var(--dark-text-muted);
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-border-secondary);
}


/*========================================
  댓글 작성 버튼
========================================*/
body.dark .btn_write1{
	background-color: var(--color-primary-dark, #c43a3e);
}


/*========================================
  베플 배지
========================================*/
.best_reply{
	/* [2026-08-12] 파랑(--color-link-hover) → 주계열 코랄. 다크는 아래 --dark-icon-best(BEST 배지와 짝) 그대로 */
	background-color: var(--ui-active, #D84841);
	border: 1px solid var(--ui-active, #D84841);
	color: #f2f2f2;
}

body.dark .best_reply{
	background-color: var(--dark-icon-best);
	border-color: var(--dark-icon-best);
	color: #fff;
}


/*========================================
  팝업 메뉴 영역
========================================*/
body.dark .popup_menu_area{
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-border-secondary);
	color: var(--dark-text-primary);
}

body.dark .popup_menu_area li a{
	color: var(--dark-text-primary);
}


/*========================================
  댓글 영역 (comment)
========================================*/
.button_grid{
	background-color: #fff;
}
body.dark .button_grid{
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-border-secondary);
}

.date_grid{
	background-color: #fff;
}
body.dark .date_grid{
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-border-secondary);
}


/*========================================
  프로필 아이콘 플레이스홀더 (board_view)
========================================*/


/*========================================
  리스트 등록일 td (list_date_td)
========================================*/
.list_date_td{
	color: var(--color-text-secondary);
	border-right: 0.4px solid var(--color-border);
}

body.dark .list_date_td{
	color: var(--dark-text-primary);
	border-right-color: var(--dark-border-secondary);
}


/*========================================
  리스트 조회수 td (list_view_td)
========================================*/
.list_view_td{
	color: var(--color-text-secondary);
}

body.dark .list_view_td{
	color: var(--dark-text-primary);
}


/*========================================
  리스트 카테고리 (category)
========================================*/
.category{
	color: #505050;
}

body.dark .category{
	color: var(--dark-text-primary);
}


/*========================================
  리스트 작성자 (list_writer)
========================================*/
.list_writer{
	color: #505050;
}

body.dark .list_writer{
	color: var(--dark-text-primary);
}


/*========================================
  다크모드 입력 요소 공통 스타일
========================================*/
body.dark input[type="text"], body.dark input[type="password"], body.dark input[type="email"], body.dark textarea, body.dark select{
	background-color: var(--dark-bg-secondary);
	border: 1px solid var(--dark-border-input);
	color: var(--dark-text-primary);
}

body.dark input[type="text"]:focus, body.dark input[type="password"]:focus, body.dark input[type="email"]:focus, body.dark textarea:focus, body.dark select:focus{
	border-color: var(--dark-border-focus);
	outline: none;
	box-shadow: 0 0 0 2px rgba(255, 159, 28, 0.2);
}


/*========================================
  다크모드 Border 일괄 적용
========================================*/
/* 검색 영역 */
body.dark .search_btn{
	border-color: var(--dark-border-secondary);
}

/* 이미지/썸네일 테두리 */
body.dark .main_left li .view_img, body.dark .main_left li .view_img2, body.dark .main_left li .view_img2 img{
	border-color: var(--dark-border-secondary);
}

/* 추천/공유 박스 */
body.dark div.countbox, body.dark div.sharebox{
	border-color: var(--dark-border-secondary);
}

/* 뉴스 테이블 */

/* 공지 아이콘 - 653번 라인에서 정의됨 */

/* 리스트 선택 그룹 */
body.dark .listSelect_group{
	border-color: var(--dark-border-secondary);
}

/* 서명 영역 */
body.dark .sign{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
}

body.dark .sign .profile img{
	border-color: var(--dark-border-secondary);
}

body.dark .sign .tx{
	color: var(--dark-text-secondary);
}

/* sharebox 컨텐츠 */
body.dark #sharebox_content{
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-border-secondary);
}

/* 한줄수다 */
body.dark .one_list_01{
	background-color: var(--dark-bg-secondary);
}

/* 검색 영역 input */
body.dark .search_area input[type=text]{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
}

/* 글쓴이 이름 색상 */
body.dark .list td span.name{
	color: var(--dark-text-secondary);
}

/* hover_list 라이트모드 배경 */
body.dark .hover_list:hover{
	background-color: var(--dark-bg-hover) !important;
}

/* 검색 버튼 active */
body.dark .search_btn a.active{
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 게시판 목록 톤온톤 A안 (2026-08-28, 사장님 확정 — 시안 f8a1ccbd) — 이 블록이 위의 배지/정렬/보기전환/글쓰기/표머리 규칙을 덮는다.
 * 원칙: 옅은 바탕(--tint-*-bg) + 같은 계열 글씨(--tint-*-fg). 정렬 탭·보기 전환은 "한 덩어리 네모 묶음"(댓글 토글 묶음과 동일 문법).
 * 토큰은 css/variables.css(라이트/다크 짝). 🔴 사이트 전체 톤 통일의 기준 블록 — 다른 화면도 이 토큰을 쓴다.
 * ═══════════════════════════════════════════════════════════════════════════ */
/* 배지 */
.best_icon, .event_icon, .notice_icon, .tag_best, .best_reply{
	display:inline-block !important; box-sizing:border-box; height:20px !important; line-height:20px !important; padding:0 8px !important;
	border-radius:4px !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.02em; text-align:center; border:0 !important; width:auto !important; min-width:36px;
}
/* 2026-09-09 사장님 3안 "브랜드 틴트": 파랑·올리브 → 배지 전용 토큰(--badge-*, variables.css). BEST=코랄 · 이벤트=앰버 진하게 · 공지=회색 */
.notice_icon, body.dark .notice_icon{ background-color:var(--badge-notice-bg,#ECECEF) !important; color:var(--badge-notice-fg,#444) !important; }
.best_icon, .tag_best, body.dark .best_icon, body.dark .tag_best{ background-color:var(--badge-best-bg,#FBE4DE) !important; color:var(--badge-best-fg,#B3331E) !important; }
.event_icon, body.dark .event_icon{ background-color:var(--badge-event-bg,#F9E6B4) !important; color:var(--badge-event-fg,#7A4E00) !important; }
.best_reply, body.dark .best_reply{ background-color:var(--tint-coral-bg,#FFF1EC) !important; color:var(--tint-coral-fg,#C9472C) !important; height:18px !important; line-height:18px !important; font-size:10px !important; min-width:0; }
/* 정렬 탭 — 한 덩어리 묶음 */
.left_buttons{ gap:0 !important; border:1px solid var(--ctl-border,#E2E2E6); border-radius:6px; overflow:hidden; background:var(--ctl-bg,#fff); }
.left_buttons > a{ display:block; }
.sort_icon_group, body.dark .sort_icon_group{
	width:auto !important; min-width:60px; height:32px !important; padding:0 12px !important; border:0 !important; border-left:1px solid var(--ctl-border,#E2E2E6) !important;
	background-color:transparent !important; font-size:13px !important;
}
.left_buttons > a:first-child .sort_icon_group{ border-left:0 !important; }
.sort_icon_group span, .sort_icon_group:not(.active) span, body.dark .sort_icon_group:not(.active) span{ color:var(--ctl-fg,#666) !important; font-weight:400; }
.sort_icon_group.active, body.dark .sort_icon_group.active{ background-color:var(--tint-coral-bg,#FFF1EC) !important; }
.sort_icon_group.active span, body.dark .sort_icon_group.active span{ color:var(--tint-coral-fg,#C9472C) !important; font-weight:700 !important; }
.sort_icon_group:not(.active):hover{ background-color:var(--color-bg-lighter,#f7f7f9) !important; }
/* 보기 전환(갤러리/썸네일/프리뷰/리스트) — 같은 묶음 문법 */
.listSelect_box{ gap:0 !important; border:1px solid var(--ctl-border,#E2E2E6); border-radius:6px; overflow:hidden; background:var(--ctl-bg,#fff); align-items:center; }
.listSelect_box > a{ display:block; }
.listSelect_group, body.dark .listSelect_group{
	width:38px !important; height:32px !important; margin:0 !important; border:0 !important; border-left:1px solid var(--ctl-border,#E2E2E6) !important;
	background-color:transparent !important; font-size:15px !important;
}
.listSelect_box > a:first-child .listSelect_group{ border-left:0 !important; }
.listSelect_group span, body.dark .listSelect_group span{ color:var(--ctl-fg,#666) !important; }
.listSelect_group.active, body.dark .listSelect_group.active{ background-color:var(--tint-coral-bg,#FFF1EC) !important; }
.listSelect_group.active span, body.dark .listSelect_group.active span{ color:var(--tint-coral-fg,#C9472C) !important; }
.listSelect_group:not(.active):hover{ background-color:var(--color-bg-lighter,#f7f7f9) !important; }
/* 글쓰기 — 주 행동만 채움(코랄) */
.write_button, body.dark .write_button{
	display:inline-flex !important; align-items:center; justify-content:center; gap:6px; width:auto !important; height:32px !important; line-height:32px !important; padding:0 14px !important;
	border-radius:6px !important; font-size:13.5px !important; font-weight:700; background-color:var(--state-ongoing,#E4593A) !important; color:var(--state-ongoing-text,#fff) !important;
}
.write_button > span{ border-right:0 !important; padding-right:0 !important; }
/* 표 머리 */
.list th, body.dark .list th{ background-color:var(--table-head-bg,#F4F4F6) !important; color:var(--table-head-fg,#555) !important; font-weight:500; font-size:12.5px; height:34px; border-bottom:1px solid var(--color-border-light,#e6e6e6); }
body.dark .list th{ border-bottom-color:var(--dark-border-secondary,#3a3a3a); }

/* ═══ 톤온톤 A안 2단계 — 커뮤니티 상세·댓글·페이지번호·LNB (2026-08-28) ═══ */
/* 작성자 배지(댓글) — 솔리드 코랄 → 코랄 톤 */
.bbs_w_id, body.dark .bbs_w_id{ background-color:var(--tint-coral-bg,#FFF1EC) !important; color:var(--tint-coral-fg,#C9472C) !important; border-radius:4px !important; font-weight:700; width:auto !important; min-width:40px; padding:0 6px; box-sizing:border-box; }
/* 베스트 댓글 BEST 알약 — 솔리드 코랄/다크 주황 → 파랑 톤(목록 BEST 와 동일) */
.best_btn, body.dark .best_btn{ background-color:var(--badge-best-bg,#FBE4DE) !important; color:var(--badge-best-fg,#B3331E) !important; border-radius:4px !important; font-weight:700 !important; height:18px !important; line-height:18px !important; }
/* (댓글 상단 토글 묶음 덮개 5줄은 2026-10-09 E안으로 css/comment.css 「① 머리줄」에 합침) */
/* 댓글 입력 상자 바깥 바탕 — 2026-10-09 E안: 회색 바탕 폐지(상자 하나만) */
.dat_write, body.dark .dat_write{ background:none !important; border-radius:0; }
/* 페이지번호 — 활성 = 코랄 톤 채움(테두리만 있던 것), 나머지 = 컨트롤 토큰 */
.pagination02 a, body.dark .pagination02 a{ border-color:var(--ctl-border,#E2E2E6) !important; color:var(--ctl-fg,#666) !important; border-radius:4px !important; background-color:var(--ctl-bg,#fff) !important; }
.pagination02 a:hover{ background-color:var(--color-bg-lighter,#f7f7f9) !important; }
.pagination02 a.on, .pagination02 a.on:hover, body.dark .pagination02 a.on{ background-color:var(--tint-coral-bg,#FFF1EC) !important; border-color:var(--tint-coral-bg,#FFF1EC) !important; }
.pagination02 a.on .current_page, .pagination02 a.on .current_page:hover, body.dark .pagination02 a.on .current_page{ color:var(--tint-coral-fg,#C9472C) !important; font-weight:700 !important; }
/* LNB 현재 게시판 — 다크 주황 → 코랄 톤(라이트와 같은 문법) */
.cm-lnb li a.sel, body.dark .cm-lnb li a.sel{ background:var(--tint-coral-bg,#FFF1EC) !important; color:var(--tint-coral-fg,#C9472C) !important; }

/* 페이지번호 — ID/상위 특이성 규칙(#comment_pagination_top, .paging_area, ui_components .pagination02 .on, #page_links.on)까지 덮는다 (2026-08-28) */
html #comment_pagination_top a, html .paging_area .pagination02 a, html .pagination02 a, html .mPag a, html #page_links, html body.dark #comment_pagination_top a, html body.dark .paging_area .pagination02 a, html body.dark .pagination02 a, html body.dark .mPag a{ background-color:var(--ctl-bg,#fff) !important; border:1px solid var(--ctl-border,#E2E2E6) !important; color:var(--ctl-fg,#666) !important; border-radius:4px !important; }
html #comment_pagination_top a:hover, html .paging_area .pagination02 a:hover, html .pagination02 a:hover, html .mPag a:hover{ background-color:var(--color-bg-lighter,#f7f7f9) !important; }
html #comment_pagination_top a.on, html #comment_pagination_top a.on:hover, html .paging_area .pagination02 a.on, html .paging_area .pagination02 a.on:hover, html .pagination02 a.on, html .pagination02 .on, html .mPag a.on, html .mPag #page_links.on, html #page_links.on, html body.dark #comment_pagination_top a.on, html body.dark .paging_area .pagination02 a.on, html body.dark .pagination02 a.on, html body.dark .mPag a.on, html body.dark #page_links.on{ background-color:var(--tint-coral-bg,#FFF1EC) !important; border-color:var(--tint-coral-bg,#FFF1EC) !important; color:var(--tint-coral-fg,#C9472C) !important; font-weight:700 !important; }
html #comment_pagination_top a.on *, html .paging_area .pagination02 a.on *, html .pagination02 a.on *, html .mPag a.on *, html body.dark .pagination02 a.on *, html body.dark #comment_pagination_top a.on *{ color:var(--tint-coral-fg,#C9472C) !important; }
html .paging_area .pagination02, html #comment_pagination_top .pagination02, html body.dark .paging_area .pagination02{ background:transparent !important; border-color:var(--color-border-light,#e6e6e6) !important; }   /* 페이지번호 컨테이너 띠(연코랄 배경+코랄 테두리) 제거 — 숫자만 코랄 톤 (2026-08-28) */
/* [2026-09-09] 글쓰기 링크가 .listSelect_box 밖 .right_buttons 직계로 나옴 — a 의 inline 기준선 틈 제거 */
.right_buttons > .write_link{ display:block; flex:0 0 auto; }

/* 2026-09-11 다크: ui.css `body.dark .bg span{color:!important}` 가 첫 글자 아바타 글자색까지 흰색으로 덮어 베이지 상자만 남던 것 — 인라인 --av-fg 로 회원 색 복구 */
body.dark .profile_img.an-avph{ color: var(--av-fg) !important; }

/* 2026-09-11 사진 있는 회원 = 로딩 중 회색 원(B), 없는 회원 = 첫 글자(A). img 는 alt 비움 → 주소 붙기 전·로딩 중 깨진 아이콘 0. 로드되면 클래스 제거 */
.an-avsk{ background:linear-gradient(90deg,#E8E6E1 25%,#F3F1EC 50%,#E8E6E1 75%) !important; background-size:200% 100% !important; animation:an-avsk-p 1.2s linear infinite; border-color:transparent !important; }
@keyframes an-avsk-p{ from { background-position:200% 0; } to { background-position:-200% 0; } }
body.dark .an-avsk{ background:linear-gradient(90deg,#2E2E33 25%,#3A3A40 50%,#2E2E33 75%) !important; background-size:200% 100% !important; }
@media (prefers-reduced-motion:reduce){ .an-avsk { animation:none; } }

/* ==================== 글 아래 「○○ 님의」 다른 글 상자 (community/_author_box.php, 2026-09-13 사장님 클리앙식 → 1차 B → 2차 V1 클리앙 짜임) ====================
   12px 라운드 패널. 머리줄 = 「○○ 님의」 | 밑줄 탭 [게시글 N][댓글 N](숫자는 작은 알약) | 오른쪽 「더보기 →」 — 머리줄이 위 테두리와 한 줄(클리앙). 줄 = 추천 수 칸(클리앙 공감 칸, 따봉 아이콘+수, 0 흐림·≥1 진행색) · 게시판 라벨(무채색) · 제목 + 댓글 수 「(N)」(목록 문법, 제목 바로 옆) · 날짜(오른쪽 끝). 지금 글은 회색, 블라인드·관리자 삭제 글은 「!」(.an-stmark, ui_components.css) + 안내문. 750px 미만 = 모바일 셸(3줄, 작은 글자) */
.an-author-box{ margin:22px 0 6px; border:1px solid var(--ui-tab-inactive-border,#E3E6EA); border-radius:12px; background:var(--color-bg-white,#fff); padding:0 18px 8px; box-sizing:border-box; }
.an-author-box .ab-hd{ display:flex; align-items:stretch; height:48px; gap:18px; margin:0; border-bottom:1px solid var(--ui-tab-inactive-border,#E6E8EB); }
.an-author-box .ab-who{ display:flex; align-items:center; gap:8px; padding-right:18px; border-right:1px solid var(--ui-tab-inactive-border,#E6E8EB); cursor:pointer; }
.an-author-box .ab-who:hover .ab-nm{ color:var(--color-hover); }
.an-author-box .ab-avw{ display:flex; width:24px; height:24px; border-radius:28%; overflow:hidden; flex:none; }
.an-author-box .ab-avw > *{ width:24px !important; height:24px !important; border-radius:28% !important; display:flex; align-items:center; justify-content:center; font-size:12px !important; line-height:24px; object-fit:cover; }
.an-author-box .ab-nm{ display:flex; align-items:center; font-size:15px; font-weight:700; color:var(--color-text-primary,#1F1A17); white-space:nowrap; }
.an-author-box .ab-tabs{ display:flex; gap:22px; }
.an-author-box .ab-tabs button{ display:flex; align-items:center; gap:5px; padding:0; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; font-family:inherit; font-size:15px; font-weight:500; line-height:1; color:var(--ui-tab-inactive-text,#6A727D); cursor:pointer; }
.an-author-box .ab-tabs button b{ font-size:12px; font-weight:600; line-height:1.4; color:var(--color-text-tertiary,#8A837D); background:var(--color-bg-tertiary,#F1F2F4); padding:1px 6px; border-radius:999px; }
.an-author-box .ab-tabs button.on{ color:var(--ui-active-soft-text,#C93934); font-weight:700; border-bottom-color:var(--ui-active-soft-text,#C93934); }
.an-author-box .ab-tabs button.on b{ background:var(--brand-tint-bg,#FBEAE3); color:var(--ui-active-soft-text,#C93934); }
.an-author-box .ab-tabs button[disabled]{ opacity:.45; cursor:default; }
.an-author-box .ab-best{ flex:none; font-size:10px; font-weight:800; letter-spacing:.02em; line-height:1.3; color:var(--color-primary-dark,#B3331E); background:var(--brand-tint-bg,#FBEAE3); padding:2px 6px; border-radius:4px; }   /* 베스트 글 배지(게시판 목록 BEST 와 같은 틴트) */
.an-author-box .ab-more{ margin-left:auto; display:flex; align-items:center; font-size:12.5px; color:var(--ui-tab-inactive-text,#6A727D); text-decoration:none; white-space:nowrap; }
.an-author-box .ab-more:hover{ color:var(--color-hover); }
.an-author-box .ab-more-t{ margin-right:3px; }
.an-author-box .ab-ls{ list-style:none; margin:0; padding:4px 0 0; }
.an-author-box .ab-ls li{ display:flex; align-items:center; gap:8px; height:38px; font-size:14px; margin:0 -18px; padding:0 18px; border-radius:6px; transition:background-color .12s; }
.an-author-box .ab-ls li:hover{ background:var(--color-bg-lighter,#F7F4F0); }   /* 2026-09-13 사장님: hover 시 그 줄 살짝(클리앙식) */
.an-author-box .ab-rc{ flex:none; min-width:24px; height:20px; line-height:20px; padding:0 4px; box-sizing:border-box; text-align:center; font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; border-radius:4px; background:var(--color-bg-tertiary,#F1F2F4); color:var(--color-text-quaternary,#B8B3AE); }
.an-author-box .ab-rc.has{ background:var(--state-ongoing-soft-bg,#FBE4DE); color:var(--state-ongoing,#D8432A); }
.an-author-box .ab-rc i{ font-size:10px; margin-right:3px; }
.an-author-box .an-stmark{ flex:none; min-width:24px; }
.an-author-box .ab-bc{ flex:none; font-size:11.5px; font-weight:500; color:var(--ui-tab-inactive-text,#6A727D); background:var(--color-bg-tertiary,#F1F2F4); padding:2px 7px; border-radius:3px; white-space:nowrap; }
.an-author-box .ab-t{ flex:0 1 auto; min-width:0; display:inline-flex; align-items:center; gap:8px; color:var(--color-text-primary,#1F1A17); text-decoration:none; }
.an-author-box .ab-tt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-author-box .ab-t.ab-cm{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-author-box .ab-ls li:has(a.ab-t){ cursor:pointer; }
.an-author-box a.ab-t:hover{ color:var(--color-hover); }
/* 들어갔던 글은 회색(클리앙식, 사장님 2026-09-13) — :visited 는 색만 바꿀 수 있고 var() 가 안 먹는 브라우저가 있어 hex 직접, 다크는 body.dark 로 따로 */
.an-author-box a.ab-t:visited{ color:#9A9A9A; }
.an-author-box li.is-cur .ab-t, .an-author-box li.is-cur .ab-t em{ color:var(--color-text-quaternary,#9A9A9A); font-style:normal; }
.an-author-box li.is-cur .ab-bc{ opacity:.6; }
.an-author-box .ab-cc{ flex:none; color:var(--state-ongoing,#D8432A); font-size:11px; font-weight:900; }
.an-author-box a.ab-t:hover .ab-tt{ text-decoration:underline; }
.an-author-box li.is-bl .ab-t{ color:var(--color-text-tertiary,#8A837D); }
.an-author-box li.is-bl .ab-bc{ opacity:.6; }
.an-author-box .ab-cm{ flex:1; color:var(--color-text-secondary,#5E554F); font-size:13px; }
.an-author-box a.ab-t.ab-cm{ color:var(--color-text-primary,#1F1A17); }
.an-author-box .ab-cm b{ color:inherit; font-weight:500; margin-right:6px; }
.an-author-box .ab-cm .ab-ct{ opacity:.72; }   /* 원글 제목은 같은 색을 흐리게(visited 회색도 그대로 따라감) */
.an-author-box .ab-d{ flex:none; margin-left:auto; color:var(--color-text-tertiary,#8A837D); font-size:12.5px; width:42px; text-align:right; }
@media (max-width:767px){ .an-author-box{ padding:0 12px 6px; border-radius:10px; } .an-author-box .ab-hd{ height:44px; gap:8px; } .an-author-box .ab-who{ padding-right:8px; gap:5px; } .an-author-box .ab-tabs{ gap:12px; } .an-author-box .ab-more-t{ display:none; } .an-author-box .ab-more{ font-size:15px; padding-left:2px; } .an-author-box .ab-tabs button{ font-size:13.5px; gap:4px; } .an-author-box .ab-tabs button b{ font-size:11px; padding:1px 5px; } .an-author-box .ab-tabs{ gap:10px; } .an-author-box .ab-nm{ font-size:13.5px; } .an-author-box .ab-tabs button{ font-size:14px; } .an-author-box .ab-ls li{ height:38px; font-size:13.5px; gap:6px; margin:0 -12px; padding:0 12px; } .an-author-box .ab-bc{ font-size:11px; padding:2px 6px; } .an-author-box .ab-rc{ min-width:22px; font-size:11px; } .an-author-box .ab-d{ width:40px; } }
body.dark .an-author-box{ background:var(--dark-bg-secondary,#232323); border-color:var(--dark-border-primary,#3D3D3D); }
body.dark .an-author-box .ab-hd, body.dark .an-author-box .ab-who{ border-color:var(--dark-border-primary,#3D3D3D); }
body.dark .an-author-box .ab-nm, body.dark .an-author-box .ab-t, body.dark .an-author-box a.ab-t.ab-cm{ color:var(--dark-text-primary,#EFE8E1); }
body.dark .an-author-box a.ab-t:visited{ color:#8A817B; }
body.dark .an-author-box .ab-tabs button{ color:var(--dark-text-secondary,#B4A99F); }
body.dark .an-author-box .ab-rc{ background:var(--dark-bg-tertiary,#2C2C2C); color:#6E6862; }
body.dark .an-author-box .ab-rc.has{ background:#3A2A1A; color:var(--color-text-emphasis,#F2C25E); }
body.dark .an-author-box li.is-bl .ab-t{ color:#8A817B; }
body.dark .an-author-box .ab-tabs button b, body.dark .an-author-box .ab-bc{ background:var(--dark-bg-tertiary,#2C2C2C); color:var(--dark-text-secondary,#B4A99F); }
body.dark .an-author-box .ab-tabs button.on{ color:var(--color-text-emphasis,#F2C25E); border-bottom-color:var(--color-text-emphasis,#F2C25E); }
body.dark .an-author-box .ab-tabs button.on b{ background:#3A2A1A; color:var(--color-text-emphasis,#F2C25E); }
body.dark .an-author-box .ab-best{ background:#3A2A1A; color:var(--color-text-emphasis,#F2C25E); }
body.dark .an-author-box .ab-cc, body.dark .an-author-box a.ab-t:hover, body.dark .an-author-box .ab-more:hover{ color:var(--color-text-emphasis,#F2C25E); }
body.dark .an-author-box li.is-cur .ab-t, body.dark .an-author-box li.is-cur .ab-t em{ color:#8A817B; }
body.dark .an-author-box .ab-ls li:hover{ background:var(--dark-bg-tertiary,#2C2C2C); }

/* ═══ 2026-09-14 목록 「숨」 — 사장님 "V2 + W2 로, 숨을 좀 주자" (Z0 뒤 다듬기)
   강조 정리: 색 붙는 숫자는 댓글 수·추천 둘만(조회 회색은 PHP), 오늘 시각만 진하게
   밀도: 행 46 → 36px, 제목 13.5px, 구분 12px 굵게, 댓글 수 12px 굵게(괄호 제거는 PHP)
   여백: 제목 칸 8/14px, 글쓴이 칸 오른쪽 16px(조회와 붙어 있던 것), 숫자 칸 좌우 6px, 등록일 뒤 세로선 삭제
   선: 표 좌우 테두리 삭제, 행 선·BEST 음영 55% 로 옅게
   🔴 #bbs_container 안 .list 만(mypage_log 의 .list 는 무관). 모바일에도 이 파일이 실리므로 min-width:700px 로 PC 한정 ═══ */
/* N2 공통(모바일 포함): 감싼 제목 글자는 링크 색·크기를 그대로 — .list tbody td a.title01 span{color:link-hover} 에 안 걸리게 */
.list tbody td a.title01 .an-ttl{ color:inherit !important; font-size:inherit !important; }
@media (min-width:641px){ /* 🔴 PC 만 — 모바일 셸(≤640)에도 이 파일이 실려 행 카드가 깨진다 */
#bbs_container .list tbody td{ line-height:36px !important; height:auto; }
#bbs_container .list tbody td a.title01{ font-size:13.5px; line-height:36px; padding:0 !important; margin:0 !important;
  /* 2026-09-14 N2(사장님 "구분 열 빼고 말머리를 제목 앞으로"): PHP 순서는 그대로(아이콘·제목·[말머리]·댓글 수), 표시 순서만 flex order 로
     [배지][말머리] 제목 댓글수 아이콘 — 말줄임은 .an-ttl 에 */
  display:flex !important; float:none !important; align-items:center; gap:5px; min-width:0; }
#bbs_container .list tbody td a.title01 .an-ttl{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit !important; font-size:inherit !important; order:0; }
/* ── 2026-09-14 P3(사장님 "dc처럼 사진 아이콘 앞으로, 아이콘 자체가 동그란 것"): 제목 앞 16px 자리를 모든 줄에 고정,
   사진·동영상 글만 브랜드색으로 꽉 찬 원 + 흰 그림(다크: nara 노랑 원 + 어두운 그림 — 밝은 채움엔 어두운 잉크). 글만 있는 글은 빈자리라 제목 시작선이 같다.
   PHP 는 그대로: span.no_drag(아이콘 자리) 를 order 로 맨 앞에. far fa-image 는 굵기 900 으로 꽉 찬 그림이 된다(regular·solid 같은 글꼴 계열) ── */
#bbs_container .list tbody td a.title01 > span.no_drag{ order:-3; min-width:16px; height:16px; margin:0 1px 0 0; display:inline-flex; align-items:center; float:none; flex:0 0 auto; }
#bbs_container .list tbody td a.title01 > span.no_drag:has(.event_period){ height:auto; }   /* 미리보기 핫딜: 진행중/종료 표시가 같은 칸에 있음 */
/* 2026-09-14 2차(sample/이런.png, 사장님 "원 안에 네모 그림이 아니라 이런 식으로. 유튜브도, 없는 건 … 말풍선"):
   사진 = 꽉 찬 원 + 흰 산 모양(네모 틀 없음, fa-mountain) · 유튜브 = 꽉 찬 원 + 흰 재생 삼각형(fa-play) · 사진·영상 없는 글 = 회색 … 말풍선(fa-comment-dots)
   PHP 의 <i class="far fa-image"> / <i class="fab fa-youtube"> 는 그대로 두고 Font Awesome 6 의 --fa 변수로 글리프만 바꾼다(로컬 FA 6.7.2) */
/* 2026-09-14 3차(사장님 "사진첨부·유튜브 동그라미 제대로, font awesome 에 없으면 그려서라도"): 사진·유튜브 원은 직접 그린 16×16 SVG 를 mask 로 쓴다.
   원 = --color-brand 로 칠함, 그림 = 뚫림(evenodd) → 바탕이 비친다: 라이트는 흰 그림, 다크는 노란 원 안 어두운 그림, hover 틴트·BEST 음영도 자연히 비침.
   사진 = 해 하나 + 봉우리 둘 산 · 유튜브 = 가운데 재생 삼각형. <i> 의 FA 글자는 숨긴다(PHP 무변경) */
#bbs_container .list tbody td a.title01 > span.no_drag i{ width:16px; height:16px; display:inline-block !important; padding:0 !important; font-size:0 !important; line-height:0 !important; color:transparent !important;
  background-color:#C4735E; -webkit-mask:var(--an-ico) center / 16px 16px no-repeat; mask:var(--an-ico) center / 16px 16px no-repeat; }   /* 2026-09-14 사장님 2번에서 두 번 「살짝 진하게」: #DD9A85 → #D9927D → #D68C77 → V4 #C4735E(읽은 글이 회색일 때 연분홍만 떠 보이던 몽환 톤 제거) */
body.dark #bbs_container .list tbody td a.title01 > span.no_drag i{ background-color:#D8B254; }   /* 다크도 같은 비율 #C9A553 → #D2AD54 → #D8B254(그림은 바탕이 비쳐 어둡게) */
#bbs_container .list tbody td a.title01 > span.no_drag i::before{ content:none !important; }
#bbs_container .list tbody td a.title01 > span.no_drag i.fa-image{ --an-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM5.2 4.3a1.45 1.45 0 1 0 0 2.9a1.45 1.45 0 1 0 0-2.9ZM2.7 11.9H13.3L10.2 7.3L8.3 10L6.3 7.9Z'/%3E%3C/svg%3E"); }   /* 사진: 해 + 두 봉우리 산 */
#bbs_container .list tbody td a.title01 > span.no_drag i.fa-youtube{ --an-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM6.2 4.6V11.4L11.8 8Z'/%3E%3C/svg%3E"); }   /* 유튜브: 재생 삼각형(무게중심 8.07) */
#bbs_container .list tbody td a.title01 > span.no_drag i ~ i{ display:none !important; }   /* 사진+유튜브 둘 다면 원 하나만 */
#bbs_container .list tbody td a.title01 > span.no_drag:not(:has(i))::before,
#bbs_container .list tbody td a.title01:not(:has(> span.no_drag))::before{ content:"\f4ad"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:14.5px; line-height:16px; color:#C6C6CC; }   /* 사진·영상 없는 글 … 말풍선 */
#bbs_container .list tbody td a.title01:not(:has(> span.no_drag))::before{ order:-3; flex:0 0 17px; }   /* 아이콘 칸이 없는 링크(상단 표 이벤트 줄) — 같은 자리 */
body.dark #bbs_container .list tbody td a.title01 > span.no_drag:not(:has(i))::before,
body.dark #bbs_container .list tbody td a.title01:not(:has(> span.no_drag))::before{ color:#6A635C; }
/* ── 2026-09-14 H2 hover: 줄 전체 옅은 브랜드 틴트(라이트 빨강 5% · 다크 nara 노랑 8%) + 제목 브랜드색. 색은 --color-brand 하나라 모드에 따라 자동.
   바탕색은 hover 전과 같게 두고(라이트 흰 바탕 · 다크 #211E1B) 틴트만 background-image 로 겹친다 → BEST 줄 음영 위에도 같은 방식 ── */
body:not(.dark) #bbs_container .list tbody tr.hover_list:hover{ background-color:transparent !important; }
body.dark #bbs_container .list tbody tr.hover_list:hover{ background-color:var(--dark-bg-secondary, #211E1B) !important; }
#bbs_container .list tbody tr:hover > td{ background-image:linear-gradient(color-mix(in srgb, var(--color-brand, #D8432A) 5%, transparent), color-mix(in srgb, var(--color-brand, #D8432A) 5%, transparent)); }
body.dark #bbs_container .list tbody tr:hover > td{ background-image:linear-gradient(color-mix(in srgb, var(--color-brand, #F2C25E) 8%, transparent), color-mix(in srgb, var(--color-brand, #F2C25E) 8%, transparent)); }
#bbs_container .list tbody tr:hover a.title01, #bbs_container .list tbody tr:hover a.title01:visited{ color:var(--color-hover) !important; }
body:has(.anpc) #bbs_container .list tbody tr:hover > td{ background-image:none !important; }   /* 2026-09-14 사장님 "눌렀을 때 배경에 색이 왜 있냐": 프로필 카드가 열려 있는 동안엔 누른 줄에 마우스가 남아 있어도 줄 틴트를 끈다 */
#bbs_container .list tbody td a.title01 span[style*="12.6px"]{ order:-1; margin:0 !important; color:var(--color-text-secondary, #777) !important; }   /* 말머리 [질문] 을 제목 앞으로 */
#bbs_container .list tbody td a.title01 span.count{ order:2; }   /* 배지에도 no_drag 가 있어 아이콘(order:3) 규칙보다 뒤에·세게 */
#bbs_container .list tbody td a.title01 .event_period{ order:1; }
#bbs_container .list tbody td span.category{ font-size:12px !important; font-weight:500 !important; color:#C4735E !important; }   /* 2026-09-14 K1 → 사장님 "#666 은 너무 검정이라 구분이 안 된다, 사진 아이콘과 같은 색으로 앞에 한 덩어리로 묻어가게" = 아이콘(#D68C77 / 다크 #D8B254)과 같은 색 */
body.dark #bbs_container .list tbody td span.category{ color:#D8B254 !important; }
#bbs_container .list tbody td:first-child:has(> span.category){ text-align:center; padding-left:0 !important; padding-right:0 !important; }   /* 2026-09-14 사장님 "구분 칸 BEST·이벤트와 같은 가운데" = 일반 줄 첫 칸에만 있던 왼쪽 여백 12px 제거(말머리가 6px 오른쪽에 있었음) */
#bbs_container .list tbody td:first-child:has(> .an-cat-def){ text-align:center; padding-left:0 !important; padding-right:0 !important; }
#bbs_container .list tbody td .an-cat-def{ font-size:12px; font-weight:400; color:#C9C3BF; }   /* 2026-09-14 B: 말머리 없는 글 = 회색 일반(색 말머리보다 한 단계 뒤로) */
body.dark #bbs_container .list tbody td .an-cat-def{ color:#5E5852; }
#bbs_container .list tbody td a.title01 span[style*="12.6px"]{ font-size:12px !important; }   /* 제목 옆 [카테고리] */
#bbs_container .list tbody td a.title01 span.count{ font-size:12px !important; font-weight:800 !important; padding-left:5px !important; }
#bbs_container .list tbody tr > td:has(> a.title01 > .an-ttl){ padding:0 14px 0 12px; }   /* 제목 칸(N2: 구분 칸 폐지 → 열 번호 대신 :has) */
#bbs_container .list tbody tr > td:has(> span.name){ padding-right:16px; }
#bbs_container .list tbody tr > td:nth-last-child(-n+3){ padding:0 6px; }   /* 조회·등록일·추천 */
#bbs_container .list tbody td span.name{ max-width:124px; top:0; }   /* 2026-09-14: 닉 10자(12px)까지 보이게, 칸 140 - 오른쪽 16 */
#bbs_container .list .list_date_td{ border-right:0 !important; }
#bbs_container .list th{ padding:0 6px; }
#bbs_container .list td .an-today{ color:var(--color-text-primary, #333); font-weight:600; }
body.dark #bbs_container .list td .an-today{ color:var(--dark-text-primary, #E6E1DA); }
#bbs_container table.list{ border-left:0 !important; border-right:0 !important; }
#bbs_container .list td{ border-top-color:#eee !important; }   /* 2026-09-14 G8(펨코 뼈대, 사장님 선택): 줄 선 중립 #eee — 대형 커뮤니티 7곳 실측 모두 중립 회색(R5 따뜻한 회색은 "아련·흐림"으로 반려) */
body.dark #bbs_container .list td{ border-top-color:#333 !important; }
#bbs_container .rs_var_area td{ background-color:#F6F6F6; }   /* G8: BEST·공지·이벤트 줄 = 펨코 공지 줄 #F6F6F6 + 굵은 제목(hover 틴트는 background-image 라 위에 겹침) */
#bbs_container .list tbody tr.rs_var_area > td a.title01 .an-ttl{ font-weight:700; }
body.dark #bbs_container .rs_var_area td{ background-color:#2A2A2A; }
/* ── 2026-09-14 T3 글꼴(사장님 선택, 클리앙·뽐뿌 실측 기준): 제목 14 · 글쓴이 12/500 · 숫자 11.5 회색 · 추천 12.5 색 굵게 · 머리글 12 보통
   + 9곳 공통: 메타 굵기 350 → 400(우리만 얇았음). 열 번호 대신 :nth-last-child(-n+3) = 추천·조회·등록일 ── */
#bbs_container .list tbody td span.name, #bbs_container .list tbody td span.name a, #bbs_container .list tbody td .list_writer{ font-weight:400 !important; font-size:12.5px !important; color:#333 !important; }   /* G8 크기 12.5px + V4 색 #333(제목이 읽은 글 회색이 돼도 줄마다 진한 글자가 남게) */
#bbs_container .list tbody td a.title01{ font-size:14px; }
#bbs_container .list tbody td:nth-last-child(-n+3), #bbs_container .list tbody td:nth-last-child(-n+3) *{ font-size:12.5px !important; color:#555 !important; font-weight:400 !important; }
#bbs_container .list tbody td:nth-last-child(3), #bbs_container .list tbody td:nth-last-child(3) *{ font-size:12.5px !important; color:var(--state-ongoing, #ee6a48) !important; font-weight:700 !important; }
#bbs_container .list tbody td a.title01 span.count{ font-size:12.5px !important; color:var(--color-brand, #D8432A) !important; font-weight:700 !important; }   /* G8: 댓글 수 빨강 굵게(더쿠·인벤) */
body.dark #bbs_container .list tbody td a.title01 span.count{ color:#F2C25E !important; }
#bbs_container .list tbody td span.category{ font-size:12px !important; }
#bbs_container .list th{ font-size:12px !important; font-weight:400 !important; }
#bbs_container .list th{ background-color:transparent !important; color:#555 !important; font-size:13px !important; font-weight:700 !important; border-top:1px solid #ccc !important; border-bottom:1px solid #bbb !important; }   /* G8: 머리글 = 펨코 실측(바탕 없음 · 위 #ccc 아래 #bbb · 13/700 #555) */
body.dark #bbs_container .list th{ background-color:transparent !important; color:#bbb !important; border-top-color:#555 !important; border-bottom-color:#666 !important; }
#bbs_container .list td .an-today{ color:var(--color-text-primary, #333) !important; font-weight:600 !important; }   /* 오늘 시각은 예외로 진하게 */
body.dark #bbs_container .list tbody td span.name, body.dark #bbs_container .list tbody td span.name a, body.dark #bbs_container .list tbody td .list_writer{ color:#DDD !important; }
body.dark #bbs_container .list tbody td:nth-last-child(-n+2), body.dark #bbs_container .list tbody td:nth-last-child(-n+2) *{ color:#aaa !important; }
body.dark #bbs_container .list td .an-today{ color:#E6E1DA !important; }

}

/* ── 2026-09-14 V4(사장님 선택): 읽은 글 구분 — PC·모바일 공통이라 @media 밖 ──
   읽은 글 제목 = 한 단계 진한 회색(흰 바탕 명암비 2.65 → 4.54, 안 읽은 글 15.9 와 3배 이상 차이). 대형 커뮤니티 13곳 실측 기준(대형 커뮤니티 #777·인벤 #8B8B8B 쪽).
   🔴 모바일 라이트는 m_list_to_row.css 117행(링크 color:inherit)이 .list a:visited 를 덮어 구분이 아예 없었고, 모바일 다크는 연보라 #B9AECF 였다 → #bbs_container 로 특이도를 올려 PC 와 한 규칙으로 통일.
   🔴 :visited 는 브라우저 보안상 색만 바꿀 수 있다(굵기·크기 불가). 라이트 hover(브랜드색) 규칙은 특이도가 더 높아 그대로 이기고, 다크는 아래 hover 규칙을 따로 둔다. */
#bbs_container .list tbody td a.title01:visited{ color:#858585 !important; }   /* 2026-09-14 T1(사장님 "살짝 톤다운"): #767676(4.54) → #858585(3.7) */
body.dark #bbs_container .list tbody td a.title01:visited, html.dark #bbs_container .list tbody td a.title01:visited{ color:#7A7A7A !important; }
body.dark #bbs_container .list tbody tr:hover td a.title01:visited, html.dark #bbs_container .list tbody tr:hover td a.title01:visited{ color:var(--color-hover) !important; }
/* V4: 글쓴이 진하게(모바일도 같은 색) — 제목이 회색이 돼도 줄마다 진한 글자가 하나 남아 목록이 흐려 보이지 않게(대형 커뮤니티) */
#bbs_container .list tbody td span.name, #bbs_container .list tbody td span.name a, #bbs_container .list tbody td .list_writer{ color:#333 !important; }
body.dark #bbs_container .list tbody td span.name, body.dark #bbs_container .list tbody td span.name a, body.dark #bbs_container .list tbody td .list_writer, html.dark #bbs_container .list tbody td span.name, html.dark #bbs_container .list tbody td span.name a, html.dark #bbs_container .list tbody td .list_writer{ color:#DDD !important; }
/* ── 2026-09-14 S2(사장님 선택, 대형 커뮤니티식): 읽은 글은 「이 글」에 속한 것 = 제목 + 댓글 수 + 사진 원 아이콘까지 한 톤 뒤로.
   말머리·글쓴이·추천·조회·날짜(줄 틀)는 그대로 진하게 둔다 — 줄 전체 회색은 거의 다 읽은 화면이 다시 흐려져 반려(S3), 제목만 회색(S1)은 빨간 댓글 수·사진 원만 떠 보였다.
   🔴 :visited 는 링크와 그 안만 칠할 수 있어 링크 밖 칸은 원래 불가. 모바일은 기존 .list a:visited .count(#9F9F9F)를 이 규칙이 덮어 PC 와 같아진다. */
#bbs_container .list tbody td a.title01:visited span.count{ color:#858585 !important; }
body.dark #bbs_container .list tbody td a.title01:visited span.count, html.dark #bbs_container .list tbody td a.title01:visited span.count{ color:#7A7A7A !important; }
@media (min-width:641px){ /* 사진 원은 PC 만(모바일은 원래 회색 글꼴 아이콘이라 바탕을 칠하면 네모 덩어리가 된다) */
#bbs_container .list tbody td a.title01:visited > span.no_drag i{ background-color:#BDBDBD !important; }
body.dark #bbs_container .list tbody td a.title01:visited > span.no_drag i{ background-color:#5C5C5C !important; }
}

/* 2026-09-15 사장님 "미리보기형·썸네일형은 그림 자체가 있으니 말풍선·사진 동그라미·유튜브 아이콘 없애줘":
   260916 사장님 "숨기는 것보다 아예 없애자" → 아이콘은 PHP 에서 삭제(썸네일·미리보기 본문 표, 공용 상단 표는 $an_list_no_title_icon 플래그 — 미리보기·썸네일·갤러리). 말풍선은 CSS 가 그리는 것이라 .an-no-ico 표에서만 끈다(아래). 260915 2차 사장님 "preview·thumbnail 에 다시 말풍선·아이콘" → 같은 페이지 위 BEST·공지 표도 포함. 목록형은 그대로.
   미리보기 핫딜은 같은 칸에 진행중/종료가 있어 그 칸은 남기고 아이콘만 숨김 */
#bbs_container .list.an-no-ico tbody td a.title01 > span.no_drag:not(.an-badge-in):not(:has(.event_period)){ display:none !important; }
#bbs_container .list.an-no-ico tbody td a.title01 > span.no_drag::before, #bbs_container .list.an-no-ico tbody td a.title01::before{ content:none !important; display:none !important; }

/* 2026-09-15 B(사장님 "미리보기형·썸네일형은 글쓴이와 추천 사이 숨이 너무 넓다"): 글쓴이 칸 140 → 108px, 오른쪽 여백 16 → 4px, 닉 9자까지(10자는 말줄임).
   아래 사진 표는 PHP colgroup 을 108 로, 같은 페이지 위 BEST·공지 표(공용 include, 목록형과 같이 씀)는 여기서 폭만 맞춘다. 목록형은 그대로 */
@media (min-width:641px){
  #bbs_container:has(table.an-list-media) table.list:not(.an-list-media) > colgroup > col:nth-child(3){ width:108px; }
  #bbs_container:has(table.an-list-media) table.list tbody tr > td:has(> span.name){ padding-right:4px; }
  #bbs_container:has(table.an-list-media) table.list tbody td span.name{ max-width:102px; }
}

/* ── 2026-09-16 썸네일형 T3(사장님 선택): PC 는 한 줄에 카드 2개(정사각 사진 + 제목 두 줄 + 본문 두 줄 + 정보 줄).
   모바일은 같은 파일이 표를 그대로 쓰므로 이 블록은 PC 마크업(.an-t3-grid)에만 걸린다. 색·크기는 목록(R5·T3 글꼴) 규칙과 같은 값 ── */
.an-t3-grid{ display:grid; grid-template-columns:1fr 1fr;
  border-top:0.4px solid var(--color-border); border-left:0.4px solid var(--color-border); border-right:0.4px solid var(--color-border); }
.an-t3-empty{ grid-column:1 / -1; padding:19px 0; text-align:center; border-bottom:0.4px solid var(--color-border); }
.an-t3c{ display:flex; gap:14px; padding:12px; min-width:0; border-bottom:0.4px solid var(--color-border); }
.an-t3c:nth-child(odd){ border-right:0.4px solid var(--color-border); }
/* hover = 목록과 같은 옅은 브랜드 틴트(H2) */
.an-t3c:hover{ background-image:linear-gradient(color-mix(in srgb, var(--color-brand, #D8432A) 5%, transparent), color-mix(in srgb, var(--color-brand, #D8432A) 5%, transparent)); }
body.dark .an-t3c:hover{ background-image:linear-gradient(color-mix(in srgb, var(--color-brand, #F2C25E) 8%, transparent), color-mix(in srgb, var(--color-brand, #F2C25E) 8%, transparent)); }

.an-t3c-ph{ position:relative; flex:0 0 150px; width:150px; height:94px; display:flex; align-items:center; justify-content:center;   /* 2026-09-16 R2(사장님 선택, 대형 커뮤니티식): 정사각 132 → 가로 150×94(가로 사진이 안 잘림). 또 사진 없는 글 자리표시(4:3 그림)가 칸 위쪽에 붙던 것 → 세로 가운데 */ overflow:hidden; border:0.5px solid var(--color-border); background:var(--color-bg-light, #FAFAFA); }
#bbs_container .an-t3c .an-t3c-ph img{ width:100%; height:100%; object-fit:cover; display:block; }   /* 2026-09-16 🔴 인라인 시트의 .container_community .gCenter img{height:auto} 가 .an-t3c-ph img 보다 세서 사진 높이가 auto 로 튀었다 → 선택자를 더 세게(기본이미지는 전역 규칙이 contain!important 라 칸 안에서 가운데 letterbox) */
.an-t3c-badge{ position:absolute; top:6px; left:6px; width:28px; height:18px; font-size:10.5px; }

.an-t3c-b{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:5px; }
.an-t3c-t{ display:block; font-size:14.5px; line-height:1.45; font-weight:400; color:var(--color-text-primary, #333);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.an-t3c-t:visited{ color:#9F9F9F; }
.an-t3c-t:hover, .an-t3c-t:hover:visited, .an-t3c:has(.an-t3c-ph:hover) .an-t3c-t, .an-t3c:has(.an-t3c-ph:hover) .an-t3c-t:visited{ color:var(--color-hover) !important; }   /* 2026-09-16 사장님: 카드 아무 데나 hover 가 아니라 제목·사진 hover 때만 제목 색(둘 다 글로 가는 링크) */
body.dark .an-t3c-t{ color:var(--dark-text-primary, #DDD); }
body.dark .an-t3c-t:visited{ color:#8C857D; }
.an-t3c-cat{ font-size:12px; font-weight:500; color:#C4735E; margin-right:2px; }   /* 목록 말머리와 같은 색 · 2026-09-16 사장님 "말머리와 제목 간격이 넓다": 3→2px + PHP 에서 두 span 사이 줄바꿈(공백 한 칸) 제거 */
body.dark .an-t3c-cat{ color:#D8B254; }
.an-t3c-warn{ margin-right:5px; color:var(--color-link-hover); }
.an-t3c .count{ margin-left:5px; color:var(--state-ongoing, #ee6a48); font-size:12px; font-weight:800; }
.an-t3c-x{ margin:0; font-size:12.5px; line-height:1.5; color:#9C948C;   /* 2026-09-16 사장님 1차 "제목과 같은 색" → #857B73, 2차 "더 흐리게, 제목과 위계가 없다" → #9C948C(정보 줄보다 한 단계 연하게) — var(--color-text-secondary) 는 라이트에서 #393939(거의 검정)라 정보 줄과 같은 회색으로 */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* R2: 본문 발췌는 한 줄 */
.an-t3c-m{ margin-top:auto; display:flex; flex-wrap:nowrap; align-items:center; gap:6px; font-size:12px; color:#857B73; font-variant-numeric:tabular-nums; min-width:0; overflow:hidden; }
.an-t3c-m > span, .an-t3c-m > i{ flex:none; white-space:nowrap; }   /* 2026-09-16 사장님 썸네일1.png: 「조회 / 1,340」「추천 / 1」이 두 줄로 꺾이던 것 — 칸이 모자라면 숫자 칸이 아니라 닉네임이 줄어든다 */
.an-t3c-m > .name{ flex:0 1 auto; min-width:3em; }
body.dark .an-t3c-m{ color:#A0968D; }
body.dark .an-t3c-x{ color:#8E867E; }   /* 다크도 정보 줄(#A0968D)보다 한 단계 흐리게 */
.an-t3c-m i{ font-style:normal; opacity:.6; }
.an-t3c-m .name{ max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#5A524C; font-size:12px; }
body.dark .an-t3c-m .name{ color:#C4BBB2; }
.an-t3c-m .name a{ color:inherit; }

/* 카드 페이지의 위 BEST·공지 표도 글쓴이 칸 108(미리보기·썸네일과 같은 폭, 2026-09-15 B) */
#bbs_container:has(.an-t3-grid) table.list > colgroup > col:nth-child(3){ width:108px; }
#bbs_container:has(.an-t3-grid) table.list tbody tr > td:has(> span.name){ padding-right:4px; }
#bbs_container:has(.an-t3-grid) table.list tbody td span.name{ max-width:102px; }

/* ── 2026-09-16 게시판 개편: 왼쪽 메뉴 행 압축 (사장님 "대형 커뮤니티는 그냥 다 펼쳐있는데?") ──
   묶음 9 · 게시판 35 를 접지 않고 전부 펼치려면 행을 줄여야 한다. 대형 커뮤니티 실측(135px 폭·13px 글씨·42개 펼침)과 같은 방식.
   압축 전 1,423px → 후 약 960px(찾기·최근 방문 포함 시 약 1,090px — 개편 전 1,120px 보다 짧다) (개편 전 33개 메뉴가 1,120px 이었으므로 그보다 짧다).
   🔴 모바일은 m_list_to_row.css 가 따로 그리므로 PC 폭에서만 적용 */
@media (min-width:641px){
  .cm-lnb li a{ font-size:12.5px !important; line-height:24px !important; padding-top:1px !important; padding-bottom:1px !important; }   /* 2026-09-17 V1(사장님 "다닥다닥"): 행 20→24 · 2026-09-24 사장님 "너무 붙었다": 24→26 */
  .cm-lnb li{ margin:0 !important; }
  .cm-lnb ul{ margin:0 0 6px !important; padding:0 !important; }   /* 묶음 사이 3→6 */
  .cm-lnb .cm-grp{ font-size:12px !important; padding-top:8px !important; padding-bottom:4px !important; margin-top:2px !important; }   /* 묶음 머리 위 3→8·아래 2→4 */
}

/* ── 2026-09-16 게시판 개편: 왼쪽 메뉴 「게시판 찾기」 + ★최근 방문 ──────────────
   게시판 35개를 접지 않고 전부 펼치는 대신, 맨 위에 거르는 칸과 자주 가는 곳을 둔다
   (대형 커뮤니티가 모두 쓰는 방식). PC 폭에서만 — 모바일은 드로어가 따로 그린다 */
@media (min-width:641px){
  .cm-lnb .cm-find{ position:relative; margin:0 8px 6px; }
  .cm-lnb .cm-find-in{ width:100%; height:28px; padding:0 9px; border:1px solid var(--color-border, #E2DDD6); border-radius:5px;
    background:var(--color-bg-page, #fff); color:var(--color-text-primary, #333); font-size:12px; line-height:26px; box-sizing:border-box; }
  .cm-lnb .cm-find-in::placeholder{ color:var(--color-text-quaternary, #AAB1B9); }
  .cm-lnb .cm-find-in:focus{ outline:none; border-color:var(--color-brand, #D8432A); }
  .cm-lnb .cm-find-none{ display:block; padding:6px 6px 2px; font-size:11.5px; color:var(--color-text-quaternary, #AAB1B9); }
  .cm-lnb .cm-find-none[hidden]{ display:none !important; }   /* 🔴 [hidden] 이 display:block 에 덮이던 것 */


  /* 거르는 중에는 묶음 머리를 숨기고, 걸린 게시판만 남긴다 */
  .cm-lnb.is-finding .cm-grp{ display:none; }
  .cm-lnb.is-finding li.cm-hide{ display:none; }
  .cm-lnb.is-finding ul{ margin:0 !important; }
  .cm-lnb.is-finding ul.closed{ display:block; }   /* 접힌 묶음 안도 찾아준다 */
}
@media (max-width:640px){
  .cm-lnb .cm-find{ display:none; }
}

/* ── 2026-09-16 게시판 개편: 말머리 칩 (community/list_top_button_sort_and_viewmode.php 끝) ──
   옛 「카테고리 선택 ▾」 드롭다운은 칩이 있을 때 숨긴다. 색은 목록 말머리와 같은 계열(#C4735E / 다크 #D8B254) */
.an-catchips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0 2px; }   /* 2026-09-17 O1: 띠 바로 아래(정렬 줄 위) */
.an-catchip{ display:inline-block; padding:3px 11px; border:1px solid var(--color-border, #E2DDD6); border-radius:999px;
  font-size:12.5px; line-height:1.5; color:var(--color-text-secondary, #4B5563); background:var(--color-bg-page, #fff); white-space:nowrap; }
.an-catchip:hover{ text-decoration:none; color:var(--color-hover); border-color:var(--color-hover); }
.an-catchip.on{ background:#C4735E; border-color:#C4735E; color:#fff; font-weight:700; }
body.dark .an-catchip{ background:var(--color-bg-light,#211E1B); color:var(--dark-text-primary,#D9D9D9); border-color:var(--dark-border-secondary,#3A3531); }   /* 2026-09-17 사장님 "다크에서 말머리 글씨 안 보임": --color-bg-page 는 다크 값이 없어 밝은 면 + 연한 글자였다 */
body.dark .an-catchip.on{ background:#D8B254; border-color:#D8B254; color:var(--dark-bg-page, #1B1816); }
@media (max-width:640px){
  .an-catchips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px -12px 8px; padding:0 12px 4px; scrollbar-width:none; }
  .an-catchips::-webkit-scrollbar{ display:none; }
  .an-catchip{ font-size:13px; padding:5px 13px; flex:none; }
}

/* 2026-09-16 사장님: 썸네일·미리보기의 「조회」「추천」 글자 대신 FA 아이콘(눈·따봉) */
.an-mi{ font-size:11px; margin-right:3px; opacity:.75; vertical-align:0; }
.an-list-media td .an-mi{ font-size:11.5px; margin-right:4px; }
.an-list-media td:has(> .an-mi){ white-space:nowrap; }

/* 2026-09-16 사장님 확정: 미리보기형(PC) A 두 줄 행 — 제목 한 줄 / 글쓴이 | 👍 추천 | 👁 조회 | 날짜 한 줄 (대형 커뮤니티 문법)
   preview_list.php 가 PC 에서만 table.an-pv2 를 붙인다(모바일은 m_community_v3.css 가 자기 행을 만든다).
   행 높이는 옛 표와 같은 78px, 추천 0 은 칸 자체가 사라지고, 사진은 90×60 둥근 칸(사진 없는 글도 같은 칸).
   🔴 표 → flex 행: 안쪽 인라인 line-height:37px 를 이기려면 `td *` 까지 !important 로 내려야 한다. 빈 결과 행(colspan)은 .hover_list 가 아니라 제외. */
table.an-pv2, table.an-pv2 > tbody{ display:block; width:100%; }
table.an-pv2 > colgroup, table.an-pv2 > caption{ display:none; }
table.an-pv2 > tbody > tr.hover_list{ display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; position:relative; padding:9px 14px 9px 118px; min-height:78px; box-sizing:border-box; border-bottom:0.4px solid var(--color-border); }
table.an-pv2 > tbody > tr.hover_list::before{ content:''; display:block; flex-basis:100%; height:0; order:3; }
table.an-pv2 > tbody > tr.hover_list > td{ display:inline-flex; align-items:center; padding:0 !important; border:0 !important; height:auto !important; line-height:1.45 !important; font-size:12.5px; color:var(--color-text-tertiary); white-space:nowrap; }
table.an-pv2 > tbody > tr.hover_list > td *{ line-height:1.45 !important; height:auto !important; }
table.an-pv2 > tbody > tr.hover_list > td:empty{ display:none; }
/* 사진 칸: 왼쪽 세로 가운데 고정, 90×60, GIF·유튜브 배지는 사진 안 */
table.an-pv2 > tbody > tr.hover_list > td:first-child{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:90px; height:60px !important; display:block; }
table.an-pv2 > tbody > tr.hover_list > td:first-child > a{ display:block; position:relative; width:90px; height:60px !important; }
table.an-pv2 > tbody > tr.hover_list > td:first-child img, table.an-pv2 > tbody > tr.hover_list > td:first-child .empty_image{ display:block; width:90px !important; max-width:none !important; height:60px !important; border:1px solid var(--color-border-light) !important; border-radius:6px; object-fit:cover; box-sizing:border-box; }
table.an-pv2 > tbody > tr.hover_list > td:first-child .empty_image img{ border:0 !important; border-radius:5px; }
table.an-pv2 > tbody > tr.hover_list > td:first-child .gallery_img_icon{ z-index:2; }
/* 제목 줄 */
table.an-pv2 > tbody > tr.hover_list > td:nth-child(2){ order:2; flex:1 1 60%; min-width:0; display:block; white-space:normal; font-size:15px; margin-bottom:3px; }
table.an-pv2 > tbody > tr.hover_list > td:nth-child(2) a.title01{ display:block !important; float:none !important; max-width:none !important; white-space:normal !important; overflow:hidden; text-overflow:ellipsis; }
/* 메타 줄: 글쓴이 | 추천 | 조회 | 날짜 */
table.an-pv2 > tbody > tr.hover_list > td:nth-child(3){ order:4; color:var(--color-text-secondary); }
table.an-pv2 > tbody > tr.hover_list > td:nth-child(3) .name, table.an-pv2 > tbody > tr.hover_list > td:nth-child(3) .name a, table.an-pv2 > tbody > tr.hover_list > td:nth-child(3) .name span{ font-size:12.5px !important; font-weight:500 !important; }
table.an-pv2 > tbody > tr.hover_list > td:nth-last-child(3){ order:5; }
table.an-pv2 > tbody > tr.hover_list > td:nth-last-child(2){ order:6; }
table.an-pv2 > tbody > tr.hover_list > td:nth-last-child(1){ order:7; color:var(--color-text-quaternary); }
table.an-pv2 > tbody > tr.hover_list > td:nth-last-child(-n+3):not(:empty)::before{ content:''; width:1px; height:10px !important; background:var(--color-border); margin-right:8px; }
table.an-pv2 td .an-mi{ opacity:.6; }
table.an-pv2 > tbody > tr.hover_list > td:nth-last-child(3) .an-mi{ opacity:1; }

/* 2026-09-17 사장님 확정 L3: 썸네일 카드 정보 줄 오른쪽 끝 추천(따봉+수, 0 이면 PHP 가 안 냄) — 미리보기 두 줄 행과 같은 자리 */
.an-t3c-m .an-t3c-like{ margin-left:auto; padding-left:8px; flex:none; font-size:12px; font-weight:700; color:var(--state-ongoing, #ee6a48); white-space:nowrap; }
.an-t3c-m .an-t3c-like i{ font-size:.9em; margin-right:3px; }

/* ==================== 최근 방문 페이지 (community/recent.php · 모바일 m_recent.php, 2026-09-17 사장님 확정 V1) ====================
   머리(제목·설명·기록 지우기) / ① 게시판 칩 줄(★ 이름 · 새 글 +N · 마지막 방문) / ② 본 글 표(목록형 문법: 게시판 · 제목+댓글 · 글쓴이 · 조회 · 본 때).
   회원은 board_view_log(DB), 비회원은 localStorage. 모바일은 아래 @media 에서 표 → 두 줄 행. */
.an-rc .bg3{ padding:0 !important; }
.an-rc-head{ display:flex; align-items:flex-end; justify-content:space-between; padding:0 6px 12px;   /* 2026-09-17 사장님: 위 빈칸 — 목록의 띠와 같은 높이(14px)에서 시작 */ border-bottom:2px solid var(--color-text-primary,#222); }
.an-rc-head h2{ margin:0; font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--color-text-primary,#222); }
.an-rc-head p{ margin:3px 0 0; font-size:12.5px; color:var(--color-text-tertiary,#666); }
.an-rc-clearf{ margin:0; }
.an-rc-clear{ height:30px; padding:0 12px; border:1px solid var(--color-border,#D8D8DC); border-radius:6px; background:var(--color-bg-white,#fff); color:var(--color-text-tertiary,#666); font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.an-rc-clear:hover{ border-color:var(--color-brand,#D8432A); color:var(--color-brand,#D8432A); }
.an-rc-clear i{ margin-right:4px; }
.an-rc-sec{ padding:0 0 6px; }
.an-rc-sec h3{ margin:18px 6px 8px; font-size:14px; font-weight:700; color:var(--color-text-primary,#222); }
.an-rc-sec h3 span{ margin-left:4px; font-size:12px; font-weight:600; color:var(--color-brand,#D8432A); }
.an-rc-empty{ margin:0; padding:26px 6px; font-size:13.5px; color:var(--color-text-quaternary,#8a8a8a); text-align:center; }
.an-rc-strip{ display:flex; align-items:center; gap:8px; padding:0 6px; }
.an-rc-blist{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:nowrap; gap:8px; margin:0; padding:0; list-style:none; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); cursor:grab; user-select:none; }
.an-rc-blist::-webkit-scrollbar{ display:none; }
.an-rc-blist li{ flex:none; }
.an-rc-strip.is-open .an-rc-blist{ flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none; cursor:default; }
.an-rc-strip .an-rs-tg{ align-self:flex-start; margin-top:5px; }
.an-rc-strip.is-open .an-rs-tg i{ transform:rotate(180deg); }
.an-rc-blist li a{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px 0 10px; border:1px solid var(--color-border,#D8D8DC); border-radius:10px; background:var(--color-bg-white,#fff); color:var(--color-text-primary,#222); font-size:13.5px; text-decoration:none; }
.an-rc-blist li a:hover{ border-color:var(--color-brand,#D8432A); color:var(--color-brand,#D8432A); text-decoration:none; }
.an-rc-blist li a i{ font-size:11px; color:var(--color-brand,#D8432A); }
.an-rc-blist li a b{ font-weight:600; }
.an-rc-new{ font-style:normal; font-size:11.5px; font-weight:700; color:var(--color-brand,#D8432A); }
.an-rc-blist .an-rc-ago{ font-size:11.5px; color:var(--color-text-quaternary,#8a8a8a); padding-left:6px; border-left:1px solid var(--color-border-light,#e6e6ea); margin-left:2px; }
.an-rc-bc{ display:inline-block; max-width:100%; font-size:12px; font-weight:600; color:#C4735E !important; text-decoration:none; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
body.dark .an-rc-bc{ color:#D8B254 !important; }
/* 모바일(m_recent.php): 칩 줄은 가로 스크롤, 표는 두 줄 행 = [게시판] 제목 N / 글쓴이 · 조회 · 본 때 */
@media (max-width:640px){
  .an-rc-head{ padding:12px 16px 10px; border-bottom-width:1px; }
  .an-rc-head h2{ font-size:18px; }
  .an-rc-sec h3{ margin:14px 16px 8px; }
  .an-rc-empty{ padding:22px 16px; }
  .an-rc-strip{ padding:0 16px 4px; }
  .an-rc-blist{ -webkit-overflow-scrolling:touch; mask-image:none; -webkit-mask-image:none; }   /* 두 줄: [게시판] 제목 / 글쓴이 · 조회 · 본 때 */   /* 모바일 셸이 링크에 주는 44px 터치 높이 해제(두 줄 행) */
}

/* ==================== 「최근」 띠 (include/_board_recent_strip.php, 2026-09-17 사장님 확정: 즐겨찾기 없이 최근 하나·자리 하나) ====================
   목록 4종·베스트·글보기 제목 위 한 줄. 알약 칩(말머리 칩 문법) · 지금 게시판 빨강 · ✕ hover · 넘치면 오른쪽 흐림 + 드래그 · 「전체 ›」 */
.an-rs{ display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:0 0 9px; border-bottom:1px solid var(--color-border-light,#e6e6ea); }
.an-rs[hidden]{ display:none !important; }
.an-rs-cur{ flex:none; font-size:17px; font-weight:800; line-height:28px; color:#DE8B77;   /* 게시판 이름 = 옅은 코랄(2026-09-14 사장님 B안, .an-bbs-name 과 같은 색) — 검정보다 낫다고 판단(09-17) */ text-decoration:none; padding-right:12px; border-right:1px solid var(--color-border,#D8D8DC); letter-spacing:-.01em; }   /* 지금 게시판 = 제목 글자 (T2, 2026-09-17) */
.an-rs-cur:hover{ color:var(--color-brand,#D8432A); text-decoration:none; }
.an-rs.no-chips .an-rs-cur{ border-right:0; padding-right:0; }   /* 최근 칩이 없으면(첫 방문) 세로선 없이 제목만 */
body.dark .an-rs-cur{ color:#D8B254; }   /* 다크 = nara 노랑(같은 규칙) */
.an-rs-lb{ flex:none; font-size:11.5px; font-weight:600; color:var(--color-text-quaternary,#8a8a8a); line-height:26px; }   /* [2026-09-21] margin-left:2px 제거 — 띠 왼쪽이 18px 라 다른 줄(16)과 안 맞았다 */   /* 세로선 뒤 작은 회색 「최근」 (U1) */
.an-rs-lb[hidden]{ display:none !important; }   /* 칩 높이와 같은 줄 높이 — 펼쳤을 때(flex-start) 글자가 내려앉지 않게 */
.an-rs-track{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); cursor:grab; user-select:none; }
.an-rs-track::-webkit-scrollbar{ display:none; }
.an-rs-track:active{ cursor:grabbing; }
.an-rs-chip{ position:relative; flex:none; display:inline-flex; align-items:center; box-sizing:border-box; height:26px;   /* 🔴 box-sizing 명시 — 모바일 셸은 content-box 라 칩만 32px 로 커져 펼칠 때 「최근」·▼ 가 1px 튀었다(09-17) */ padding:0 17px 0 10px;   /* 오른쪽 7px 더 = ✕ 자리 미리 확보(hover 때 폭이 안 변해 덜컹 0, 2026-09-17) */ border:1px solid var(--color-border,#D8D8DC); border-radius:999px; background:var(--color-bg-white,#fff); color:var(--color-text-primary,#222); font-size:12.5px; text-decoration:none; white-space:nowrap; }
.an-rs-chip:hover{ border-color:var(--color-brand,#D8432A); color:var(--color-brand,#D8432A); text-decoration:none; }
.an-rs-chip .x{ position:absolute; right:5px; top:50%; transform:translateY(-50%); font-weight:400; font-size:10px; line-height:1; color:var(--color-text-light,#b5b5b5); }   /* 2026-09-17 사장님 "hover 때만 나오고 평소 빈칸은 별로" → 늘 보이게(연회색), 칩 hover·✕ hover 는 진하게 */
.an-rs-chip:hover .x{ color:var(--color-text-quaternary,#8a8a8a); }
.an-rs-chip .x:hover{ color:var(--color-brand,#D8432A); }
body.dark .an-rs-chip .x{ color:var(--dark-text-tertiary,#7A736A); }
body.dark .an-rs-chip:hover .x{ color:var(--dark-text-secondary,#C9C2B8); }
.an-rs-tg{ flex:none; box-sizing:border-box; width:26px; height:26px; border:1px solid var(--color-border,#D8D8DC); border-radius:999px; background:var(--color-bg-white,#fff); color:var(--color-text-tertiary,#666); font-size:11px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.an-rs-tg:hover{ border-color:var(--color-brand,#D8432A); color:var(--color-brand,#D8432A); }
.an-rs-tg[hidden]{ display:none !important; }
.an-rs-all{ line-height:26px; }   /* 칩과 같은 줄 높이 — 펼침 전후 글자 위치 동일 */
.an-rs.is-open{ align-items:flex-start; }   /* 🔴 펼친 첫 줄은 닫힘과 같은 기하(제목 28px 줄, 칩·▼·「최근」은 1px 내려앉아 가운데) — 전엔 제목 line-height 28→26 + flex-start 로 전체가 1~2px 덜컹였다(2026-09-17 사장님 지적) */
.an-rs.is-open .an-rs-lb, .an-rs.is-open .an-rs-track, .an-rs.is-open .an-rs-tg, .an-rs.is-open .an-rs-all{ margin-top:1px; }
.an-rs.is-open .an-rs-track{ flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none; row-gap:6px; cursor:default; }
.an-rs.is-open .an-rs-tg i{ transform:rotate(180deg); }
.an-rs-all{ flex:none; font-size:12.5px; font-weight:600; color:var(--color-text-tertiary,#666); text-decoration:none; }
.an-rs-all:hover{ color:var(--color-brand,#D8432A); text-decoration:none; }
@media (max-width:640px){
  .an-rs{ margin:0; padding:9px 16px; gap:8px; border-bottom:6px solid var(--color-bg-page,#F2F2F3); }
  .an-rs-cur{ display:none; }   /* 모바일은 「곤충·절지 ▾」 머리가 따로 있다 */
  .an-rs-track{ mask-image:none; -webkit-mask-image:none; }
  .an-rs-chip{ height:30px; font-size:13px; }
  .an-rs-chip{ padding:0 12px; }   /* ✕ 자리 불필요 → 좌우 대칭 */
  .an-rs-chip .x{ display:none !important; }   /* 터치엔 hover 가 없다 — 빼기는 전체 페이지에서 */
  .an-rs-tg{ width:30px; height:30px; }
  .an-rs-lb, .an-rs-all{ line-height:30px; }   /* 모바일 줄 높이 = 칩 30px 에 맞춤(펼침 전후 동일) */
  .an-rs.is-open .an-rs-lb, .an-rs.is-open .an-rs-track, .an-rs.is-open .an-rs-tg, .an-rs.is-open .an-rs-all{ margin-top:0; }   /* 제목이 없어 첫 줄 = 칩 높이 그대로 */
}

/* 2026-09-17 왼쪽 메뉴 찾기 칸 아래 「최근 본 글 ›」 — 최근 방문 페이지(community/recent.php) 입구 (사장님 "lnb 에서 최근본글 메뉴 없어졌냐") */
.cm-lnb .cm-recent-link{ display:flex; align-items:center; gap:6px; margin:0 8px 6px; padding:6px 8px; border:1px solid var(--color-border-light,#e6e6ea); border-radius:7px; font-size:12.5px; font-weight:600; color:var(--color-text-secondary,#393939); text-decoration:none; }
.cm-lnb .cm-recent-link .cm-arr-go{ margin-left:auto; font-size:13px; color:var(--color-text-quaternary,#8a8a8a); }
.cm-lnb .cm-recent-link:hover{ border-color:var(--color-brand,#D8432A); color:var(--color-brand,#D8432A); text-decoration:none; }
.cm-lnb .cm-recent-link.sel{ background:var(--tint-coral-bg,#FFF1EC); border-color:transparent; color:var(--tint-coral-fg,#C9472C); }
.cm-lnb.is-finding .cm-recent-link{ display:none; }
@media (max-width:640px){ .cm-lnb .cm-recent-link{ display:none; } }

/* [2026-09-21] 게시판 상단 메뉴 — 아이콘·글 수는 «모바일 드로어»(세로 리스트)만 쓴다.
   PC 가로 메뉴는 지금 모양 그대로 둔다(inc/top_menu_community.php 가 마크업만 같이 내보낸다).
   🔴 이 파일은 모바일 셸도 함께 읽는다 → 반드시 PC 폭에서만 숨긴다.
      (드로어 규칙은 mobile/m_css/m_pc_shell_fix.css 의 @media (max-width:640px) 안) */
@media (min-width:641px){
  .top_menu_area .top_menu_links li a .tm-ico,
  .top_menu_area .top_menu_links li a .tm-cnt{ display:none; }
}


/* ── /css/comment.css ── */
/*댓글(comment)관련 css*/

/* ── 2026-09-10 스레드 줄(유튜브식) ──
   답글 회색 상자 폐지. 원댓글 프로필 아래에서 줄이 내려가 각 답글 프로필로 곡선으로 붙고,
   3단(@닉네임)은 답글 프로필에서 한 번 더 갈라진다. 줄 조각(span.thr)은 community/comment_list.php 가 행마다 출력.
   좌표(PC): 원댓글 프로필 40px → 축 x=29 · 답글 프로필 30px(들여쓰기 52) → 축 x=66 · 3단 들여쓰기 89 */
:root{ --thr-line:#ADADB4; --thr-hot:var(--color-brand, #D8432A); }
body.dark{ --thr-line:#66666E; }

/*1depth 스타일*/
.td_no_depth{
	position:relative;
	padding:10px 12px 0 10px;   /* A 컴팩트(2026-09-10): 위 10·아래 0 */
	display: flex;
}

/*2depth, 3depth 스타일 — 상자 없음, 들여쓰기만 */
.td_yes_depth{
	position:relative;
	display: flex;
	width:100%;
	box-sizing:border-box;
	margin-left:0;
	padding:6px 12px 0 52px;
	background:none;
}
.td_yes_depth.thr-d3{ padding-left:89px; }


/* ═══ 2026-10-09 E안(사장님 확정, md/mockup/cmt_write_v3_261009.html) — 댓글 머리줄·작성 칸·첨부 기준·이전글 다음글 ═══
   ① 머리줄: 배경 띠 폐지 → 「댓글 N」 17px + 밑선 1px. 토글 = 테두리 없는 글자 버튼, 켜짐 = 코랄 틴트, 꺼짐 = 연회색 글자. 정렬 = 「등록순 ▾」 글자.
   ② 작성 칸: 두 겹 상자 → 1px 상자 하나(.cmt-w). 입력칸 테두리·크기조절 손잡이 없음, 포커스되면 상자 테두리가 진해진다.
      도구 줄(.cmt-w__foot) = 연회색 바닥에 [이모티콘][사진][? 첨부 기준] …… [0 / 2000][등록 38px]. 글자 수·등록은 처음부터 같은 자리.
   ③ 「이미지 첨부 기준」 별도 줄 삭제 → 도구 줄 글자 버튼(.cmt-w__guide) + 검정 말풍선(.cmt-tip). JS 는 .ballon / .dep1_ballon_{idx} 를 toggle.
   ④ 이전글·다음글: 44px 두 줄, 선으로만. 「I」 구분자 폐지.
   종전 머리줄 CSS 는 board_view.php 인라인 330줄 + community.css 덮개 5줄 → 여기로 합침. 모바일(m-app)은 mobile/m_css/m_comment.css 에 같은 문법(치수만 작게),
   머리줄·이전글은 m_community_v3.css / m_board_view_v4.css 가 !important 로 덮으므로 PC 전용 치수는 body:not(.m-app) 로 가둔다. */

/* ① 머리줄 */
.comments_status_bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; min-height:0; padding:4px 0 12px; background:none !important; border:0 !important; border-bottom:1px solid var(--color-border, #D2CFCA) !important; position:relative; }
body.dark .comments_status_bar{ border-bottom-color:var(--dark-border-secondary, #3a3a3a) !important; }
.cmt-head__ttl{ display:flex; align-items:center; gap:6px; font-size:17px; font-weight:700; color:var(--color-text-primary, #222); cursor:pointer; user-select:none; line-height:1.3; }
.cmt-head__ttl .commment_count_total{ color:var(--color-brand, #D8432A); font-weight:700; }
.cmt-head__ttl #comment_arrow_icon{ font-size:10px; color:var(--color-text-lighter, #9a9a9a) !important; margin-left:2px; }
.cmt-head__ctl{ display:flex; align-items:center; gap:2px; }
.comments_status_bar .best-toggle-btn{ height:30px; padding:0 10px; margin:0; border:0; border-radius:6px; background:none; color:var(--color-text-lighter, #9a9a9a); font-size:13px; font-weight:500; font-family:inherit; line-height:1; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; cursor:pointer; transition:background .15s, color .15s; }
.comments_status_bar .best-toggle-btn i{ font-size:14px; }
.comments_status_bar .best-toggle-btn:hover{ background:var(--color-bg-lighter, #F7F7F8); color:var(--color-text-secondary, #555); }
.comments_status_bar .best-toggle-btn:not(.off):not(#btn_list_vh){ color:var(--tint-coral-fg, #B3331E); background:var(--tint-coral-bg, #FBE4DE); font-weight:600; }
.comments_status_bar .cmt-sr{ display:none !important; }   /* ON/OFF 글자 — 모바일 JS(is-on 판정)용으로 DOM 엔 남긴다 */
body:not(.m-app) #btn_list_vh{ display:none; }   /* PC: 「댓글」(입력칸으로 이동) 버튼은 E안에 없다 — 모바일 칩 줄엔 그대로 */
/* 정렬 「등록순 ▾」 — 자리표시 라벨(.cmt-order-ph)과 커스텀 셀렉트(#select)를 같은 모양으로. 전역 40px 알약 스킨(inc/header.php)을 !important 로 덮는다 */
.cmt-order-slot{ display:inline-grid; grid-template-columns:auto; align-items:start; justify-items:start; vertical-align:top; height:30px; }
.cmt-order-slot > *{ grid-area:1 / 1; }
.cmt-order-slot > #select ~ .cmt-order-ph{ display:none !important; }
body:not(.m-app) .comments_status_bar .cmt-order-slot{ margin-left:8px; padding-left:8px; border-left:1px solid var(--color-border, #D2CFCA); }
body.dark:not(.m-app) .comments_status_bar .cmt-order-slot{ border-left-color:var(--dark-border-secondary, #3a3a3a); }
.cmt-order-ph, #commentOrderSelect + #select > li span.select-label{ position:relative; display:inline-block; box-sizing:border-box; height:30px !important; line-height:30px !important; min-width:0 !important; padding:0 22px 0 8px !important; font-size:13px !important; font-weight:500 !important; white-space:nowrap; border:0 !important; border-radius:6px !important; background:none !important; color:var(--color-text-primary, #222) !important; box-shadow:none !important; vertical-align:top !important; cursor:pointer; }
#commentOrderSelect + #select{ margin:0 !important; }
#commentOrderSelect + #select > li{ margin:0 !important; }
.cmt-order-ph:after, #commentOrderSelect + #select > li span.select-label:after{ content:""; position:absolute; right:8px; top:50%; transform:translateY(-50%) !important; width:0; height:0; border-left:4px solid transparent !important; border-right:4px solid transparent !important; border-top:5px solid var(--color-text-lighter, #9a9a9a) !important; }
#commentOrderSelect + #select > li:hover span.select-label{ background:var(--color-bg-lighter, #F7F7F8) !important; }
#commentOrderSelect + #select > li ul.select-menu{ font-size:13px; }
body.dark .cmt-order-ph, body.dark #commentOrderSelect + #select > li span.select-label{ color:var(--dark-text-primary, #ececec) !important; }

/* ② 작성 칸 */
.dat_write > table{ width:100%; border-collapse:collapse; }
.dat_write td{ padding:0 !important; border:0 !important; background:none !important; }
.comment_list_write_area{ position:relative; margin:0; padding:0; border:1px solid var(--color-border, #D2CFCA); border-radius:10px; background:var(--color-bg-white, #fff); transition:border-color .15s; }
.comment_list_write_area:focus-within{ border-color:var(--color-text-primary, #222); }
body.dark .comment_list_write_area{ background-color:var(--dark-bg-secondary, #232323) !important; border-color:var(--dark-border-secondary, #484848) !important; }
body.dark .comment_list_write_area:focus-within{ border-color:var(--dark-text-primary, #ececec) !important; }
.cmt-w__top{ display:flex; align-items:center; gap:10px; padding:14px 16px 0; font-size:14px; font-weight:600; color:var(--color-text-primary, #222); }
.cmt-w__top .profile_img, .cmt-w__top .an-av{ flex:none; }
.cmt-w__body{ position:relative; padding:10px 16px 12px; }
.cmt-w__body .img_preview_area, .cmt-w__body [class^="img_preview_area_"]{ margin-top:8px; }
.cmt-w__foot{ position:relative; display:flex; align-items:center; gap:2px; padding:10px 10px 10px 12px; border-top:1px solid var(--color-border-light, #E0E0E4); background:var(--color-bg-lighter, #F7F7F8); border-radius:0 0 9px 9px; }
body.dark .cmt-w__foot{ border-top-color:var(--dark-border-secondary, #3a3a3a); background:var(--dark-bg-tertiary, #2a2a2a); }
.cmt-w__tool{ height:38px; padding:0 13px 0 11px; border-radius:8px; border:1px solid var(--color-border, #D2CFCA); background:var(--color-bg-white, #fff); color:var(--color-text-primary, #222); font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; -webkit-user-drag:none; white-space:nowrap; transition:border-color .15s; }
.cmt-w__tool + .cmt-w__tool{ margin-left:6px; }
.cmt-w__tool i{ font-size:19px; color:var(--color-text-secondary, #666); }
.cmt-w__tool:hover{ border-color:var(--color-text-secondary, #666); }
body.dark .cmt-w__tool{ background:var(--dark-bg-secondary, #232323); border-color:var(--dark-border-secondary, #484848); color:var(--dark-text-primary, #ececec); }
body.dark .cmt-w__tool i{ color:var(--dark-text-secondary, #b0b0b0); }
.cmt-w__gw{ position:relative; display:inline-flex; align-items:center; }
.cmt-w__guide{ height:30px; padding:0 9px; margin-left:8px; border-radius:6px; display:inline-flex; align-items:center; gap:5px; color:var(--color-text-lighter, #9a9a9a) !important; font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; user-select:none; text-decoration:none !important; transition:background .15s, color .15s; }
.cmt-w__guide:hover{ color:var(--color-text-secondary, #666) !important; }
.cmt-w__q{ width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor; font-size:10.5px; font-weight:700; line-height:1; display:inline-flex; align-items:center; justify-content:center; font-style:normal; }
.cmt-w__guide.is-open{ color:var(--tint-coral-fg, #B3331E) !important; background:var(--tint-coral-bg, #FBE4DE); }
.cmt-tip{ position:absolute; left:8px; top:calc(100% + 10px); z-index:9999; padding:8px 12px; border-radius:6px; background:var(--color-text-primary, #222); color:var(--color-bg-white, #fff); font-size:12px; line-height:1.5; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.18); }
.cmt-tip:before{ content:''; position:absolute; top:-5px; left:22px; width:10px; height:10px; background:inherit; transform:rotate(45deg); }
body.dark .cmt-tip{ background:var(--dark-text-primary, #ececec); color:var(--dark-bg-primary, #1e1e1e); }
.cmt-w__cnt{ margin-left:auto; margin-right:10px; color:var(--color-text-lighter, #9a9a9a); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
a.btn_write1.cmt-w__go, .cmt-w__go{ flex:none; height:38px; padding:0 22px; border-radius:7px; background-color:var(--color-brand, #D8432A) !important; color:#fff !important; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; letter-spacing:.3px; text-decoration:none !important; cursor:pointer; border:0; transition:filter .15s; }
.cmt-w__go:hover{ filter:brightness(.92); }
body.dark a.btn_write1.cmt-w__go{ color:#1e1e1e !important; }   /* 다크 주색은 노랑(#F2C25E) → 글자 어둡게 */
/* 로그인 전 */
.cmt-login-cell{ padding:0 !important; border:0 !important; }
.cmt_login_link{ display:flex; align-items:center; justify-content:center; gap:6px; height:52px; border:1px dashed var(--color-border, #D2CFCA); border-radius:10px; background:var(--color-bg-lighter, #F7F7F8); font-size:14px; font-weight:500; color:var(--color-text-secondary, #555) !important; text-decoration:none !important; }
.cmt_login_link:hover{ border-color:var(--color-text-secondary, #666); }
body.dark .cmt_login_link{ background:var(--dark-bg-tertiary, #2a2a2a); border-color:var(--dark-border-secondary, #484848); color:var(--dark-text-secondary, #b0b0b0) !important; }
/* 답글 칸(.cmt-w--reply) — 같은 문법, 한 치수 작게 */
.cmt-w--reply .cmt-w__top{ padding:12px 14px 0; font-size:13.5px; }
.cmt-w--reply .cmt-w__body{ padding:8px 14px 10px; }
.cmt-w--reply textarea.comment_textarea_style{ height:64px; min-height:64px; }
.cmt-w--reply .cmt-w__foot{ padding:8px 8px 8px 10px; }
.cmt-w--reply .cmt-w__tool{ height:34px; font-size:13.5px; }
.cmt-w--reply .cmt-w__tool i{ font-size:17px; }
.cmt-w--reply .cmt-w__go{ height:34px; padding:0 18px; font-size:13.5px; }

/* ④ 이전글·다음글 (PC — 모바일은 m_community_v3.css / m_board_view_v4.js 의 .bv-navrow) */
body:not(.m-app) #bbs_container > p:has(> .btns_prevview), body:not(.m-app) #bbs_container > p:has(> .btns_nextview){ margin:0; padding:0; }
body:not(.m-app) #bbs_container > p:has(> .btns_prevview){ margin-top:30px; border-top:1px solid var(--color-border, #D2CFCA); }
body:not(.m-app) #bbs_container > p > .btns_prevview, body:not(.m-app) #bbs_container > p > .btns_nextview{ display:flex; align-items:center; gap:10px; height:44px; min-width:0; font-size:14px; color:var(--color-text-primary, #222); text-decoration:none; border-bottom:1px solid var(--color-border-light, #E0E0E4); }
body:not(.m-app) #bbs_container > p > .btns_prevview .fa, body:not(.m-app) #bbs_container > p > .btns_nextview .fa{ flex:none; width:16px; text-align:center; font-size:13px; color:var(--color-text-lighter, #9a9a9a); }
body:not(.m-app) #bbs_container > p > .btns_prevview > span:first-of-type, body:not(.m-app) #bbs_container > p > .btns_nextview > span:first-of-type{ flex:none; width:48px; font-size:13px; color:var(--color-text-secondary, #666); }
body:not(.m-app) #bbs_container > p .title_prevview, body:not(.m-app) #bbs_container > p .title_nextview{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body:not(.m-app) #bbs_container > p > .btns_prevview:hover .title_prevview, body:not(.m-app) #bbs_container > p > .btns_nextview:hover .title_nextview{ color:var(--color-brand, #D8432A); }
body:not(.m-app) #bbs_container > p > .is-off .title_prevview, body:not(.m-app) #bbs_container > p > .is-off .title_nextview{ color:var(--color-text-lighter, #9a9a9a); }
body.dark:not(.m-app) #bbs_container > p:has(> .btns_prevview){ border-top-color:var(--dark-border-secondary, #3a3a3a); }
body.dark:not(.m-app) #bbs_container > p > .btns_prevview, body.dark:not(.m-app) #bbs_container > p > .btns_nextview{ border-bottom-color:var(--dark-border-primary, #333); color:var(--dark-text-primary, #ececec); }


/*이미지첨부 버튼css*/
.comment_imgBtn{
float:left;
position:relative;
width:100px; 
height:81px;
max-height:81px;  
text-align:center; 
border:solid 0.5px #c2c2c2;
background-color:#fff;
cursor:pointer;
z-index:9000;
}


/*추천/비추천 버튼 css*/
.thumb_up_icon, .thumb_down_icon{
    display: flex; /* display:inline-block에서 flex로 변경 */
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;   /* 2026-09-10 A 컴팩트: 38→28 */
    line-height: 28px;
    font-size: 16px;
    color: var(--color-text-tertiary, #666);
}
.thumb_up_icon i, .thumb_down_icon i{ color: inherit; }

/* 2026-09-11 시안 확정(md/mockup/vote_dark_260911): 숫자 = 추천 굵은 테라코타·비추천 굵은 본문색(다크 토큰 자동),
   내가 누른 쪽(a.is-on, comment_list_common_function.php cmtRecommRender) = 연한 알약 + 채운 아이콘. BEST·일반 동일. 종전 #4C4C4C 고정색은 다크에서 안 보였다. */
.recommand_area a.recommend-btn, .recommand_area a.anti-btn{ border-radius: 14px; padding-right: 4px; transition: background-color .15s; }
.recomm_up_color{ color: var(--color-brand); font-weight: 700; }
.recomm_down_color{ color: var(--color-text-secondary, #393939); font-weight: 700; }
.recommand_area a:not(.is-on):hover{ background-color: var(--color-bg-gray, #E8E8E8); }
.recommand_area a.recommend-btn.is-on{ background-color: var(--tint-coral-bg); }
.recommand_area a.recommend-btn.is-on .thumb_up_icon, .recommand_area a.recommend-btn.is-on .recomm_up_color{ color: var(--tint-coral-fg); }
.recommand_area a.anti-btn.is-on{ background-color: var(--color-bg-gray, #E8E8E8); }
.recommand_area a.anti-btn.is-on .thumb_down_icon, .recommand_area a.anti-btn.is-on .recomm_down_color{ color: var(--color-text-primary); }


/*답글,댓글로 이동 css*/
.reply_btn{
	display:inline-block;
	text-align:center;
	margin-left:2px;
	padding:0 10px;   /* 2026-09-10 A 컴팩트: 38px 줄 → 28px */
	height:28px;
	line-height:28px;
    font-size:13px;
    color: var(--color-text-primary);
}

.reply_btn:hover{
	background-color: #e5e5e5;
    border-radius: 16px; /* hover 시 변경할 border-radius 값 */
}


/*답글 (2depth,3depth)더보기 버튼 css*/
.reply_more{
	display:inline-block;
	text-align:center;
	margin-left:-5px;
	padding:0 6px;
	height:38px;
	line-height:38px;
    font-size:14px;
    color: var(--color-text-primary);
}

.reply_more:hover{
	background-color: var(--color-secondary-soft-bg, #eaf1fa);
    border-radius: 15px; /* hover 시 변경할 border-radius 값 */
}


/* reply_dep01 td */
.reply_dep01 td{
	border-bottom: 0.03em dotted #c2c2c2;
}


.comment_border{
	/* 2026-10-17 사장님 「옆에 의미 없는 border」: 좌우선 제거(행마다 끊겨 잘린 선처럼 보였다). 아래 구분선(td.thr-d1 border-top)과 표 아래선은 그대로 */
	border-left:0;
	border-right:0;
}

body.dark .comment_border{
	border-color:var(--dark-border-secondary) !important;
}
/* 2026-10-09 사장님 「댓글라인.png 맨 아래 border 없다」: tr 에 좌우선만 있어 마지막 댓글 아래가 열려 있었다 → 표 자체에 아래선(댓글 0건의 빈 tr 땐 생략) */
#comment_zone > table.comment:has(tr.comment_border > td:not(:empty)), #comment_zone_best > table.comment:has(tr.comment_border > td:not(:empty)){ border-bottom:1px solid #c2c2c2; }
body.dark #comment_zone > table.comment, body.dark #comment_zone_best > table.comment{ border-bottom-color:var(--dark-border-secondary) !important; }


/*커뮤니티 댓글 css*/
td.textview{vertical-align:top;}
td.textview p{text-align:left;}
.btn_list{float:right;}
.comment{clear:both;} /*comment영역(댓글 상단 새로고침 부분)*/
.comment th{height:40px;border-top:2px solid #d7d7d7;background:var(--color-bg-lighter);border-bottom:1px solid #d7d7d7;}
.comment{clear:both;}
 /*댓글 간 border*/
.comment th p{text-align:left;margin-left:20px;font-size:13px; }
.comment th p span{color:var(--color-brown, #E66B65);}

/*댓글간격*/

.comment dt span.writer{font-size:12px;font-weight:bold;color:#333;} /*댓글작성자*/
.comment dt span.icon_level{float:left;}
.comment dt .time{color:#999;}
.comment dt .btn_area{float:right;}
.confirm{font-size:13px;color:var(--color-error);font-weight:bold;}

/*대댓글*/
.reply_dep01{width:100%;}
.reply_dep01 dt span.writer{font-size:12px;font-weight:bold;color:#333;margin-left:2px;} /*댓글작성자*/
.reply_dep01 dt span.icon_level{}


/* reply_dep01 마지막 td */


.comment dt .time{
	margin-left:12px;
	font-size:12px;
}

.comment dt .btn_area{
	float:none;
	margin-left:12px;
	/*font-family:dotum;*/
	font-family:var(--user-font,'Pretendard');
  letter-spacing:-1px;
}

.comment dt .btn_area a{
	font-size:11px;
	color:#4d4d4d;
	margin-right:5px;
}

.comment dt .recommand_area{
	/*float:right;*/
}

.comment dt .recommand_area a{
	font-size:12px;
	margin-left:5px;
}


body .comment_area tr td{
	background-color: #f2f2f2;
	color: #000 !important;
	border-color: #eee !important;
}

body.dark .comment_area tr td{
	background-color: #141414;
	color: var(--dark-text-primary) !important;
	border-color: var(--dark-border-secondary) !important;
}


/*댓글 내 답글버튼*/
body.dark .reply_btn{
	color: var(--ui-checked-bg) !important;
	font-weight: 500 !important;
}

/*댓글 내 기본프로필 아이콘*/
body.dark .fa-user-large{
	background-color: var(--dark-bg-button) !important;
	color: #bbb !important;
	border-color: #3b3b3b !important;
}


/* 2026-09-11 삭제: body.dark .fa-thumbs-up{color:흰색 !important} — 게시글 큰 추천 아이콘까지 흰색으로 만들어 두 원이 같은 흰 링으로 보였다(시안 md/mockup/vote_dark_260911) */


/* 댓글창 윗부분(댓글갯수/새로고침) */
body.dark #btn_area td, body.dark #btn_area td div{
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary) !important;
	border: 0px !important;
}


body.dark .comment_textarea{ /*comment 글씨 색상*/
	color: var(--dark-text-primary) !important
}

body.dark .comment_tbl tr td{
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary) !important
}


/*s:추천/비추천/날짜/삭제/신고버튼 css*/
/*추천/비추천버튼*/
.recommand_button{
	padding-right:8px;
	width: 104px;
	margin: 0 auto;
	margin-right:0px;
}
	
.button_grid{
    width: 52px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bbb;
    background-color: #fff;
    position: relative;
    z-index: 180;
    text-align: center;
    flex-direction: row; /* 기본 가로 배치 */
    flex-wrap: wrap; /* 요소가 넘칠 경우 줄바꿈 허용 */
}

.button_grid i{
	font-size:14.5px;
    margin-right: 4.5px; /* 아이콘과 텍스트 사이의 간격 설정 */
}

.button_grid span{
    white-space: nowrap; /* 기본적으로 텍스트가 한 줄로 유지되도록 설정 */
    overflow-wrap: break-word; /* 텍스트가 넘칠 경우 줄바꿈 허용 */
    word-break: break-all; /* 단어가 길 경우 줄바꿈되도록 설정 */
    display: inline-block; /* 인라인 블록으로 설정하여 아이콘과 나란히 배치 */
}


/* 추천/비추천버튼 darkmode(report_box는 신고버튼) */
body.dark .button_grid{
	background-color: var(--dark-bg-button) !important;
	border-color: var(--dark-border-secondary) !important
}

body.dark .time_str{
	color: var(--dark-text-primary) !important
}

 


body.dark .button_grid .fa-thumbs-up, body.dark .button_grid .recomm_up_color{
	/*
	color: var(--color-brand, #d84841) !important;
	*/
	color: var(--dark-text-primary) !important;
}

body.dark .button_grid .fa-thumbs-down, body.dark .button_grid .recomm_down_color{
	color: var(--dark-text-primary) !important;
}


/*날짜/삭제/신고버튼*/
.date_area{
	width:95px;
	max-width:95px;
}
	
.date_grid{
	height:15px;
	text-align:right;
	float: left; /*가로 정렬을 하기위한 float*/
}
/*e:추천/비추천/날짜/삭제/신고버튼 css*/


/*드레그방지*/
.date{-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
.reply_text{-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}

/*이미지첨부버튼*/
.img_attach_btn{
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	width:85px; 
	height:80px;
	max-height:80px;
	text-align:center; 
	border:solid 1px #c2c2c2; 
	background-color:#fff; 
	cursor: pointer;
	z-index: 9000;
	
	-ms-user-select: none;
	-moz-user-select: -moz-none; 
	-webkit-user-select: none; 
	-khtml-user-select: none; 
	user-select:none;
}

/*등록버튼*/
.comment_enroll_btn{
	display: block;

	border:solid 0.5px var(--color-primary-dark); 
	background-color: var(--color-primary-dark);
	text-align:center;
	width:85px; 
	height:80px;
	max-height:80px;
	line-height:80px;
	position:relative;
	z-index:9999;

	-ms-user-select: none;
	-moz-user-select: -moz-none; 
	-webkit-user-select: none; 
	-khtml-user-select: none; 
	user-select:none;
}


/* 2026-10-09 E안: 입력칸은 테두리·손잡이 없이 상자 안에 녹아든다(포커스 표시는 상자 .comment_list_write_area:focus-within) */
textarea.comment_textarea_style{ display:block; width:100% !important; box-sizing:border-box; height:80px; min-height:80px; padding:0; margin:0; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent; resize:none; font-size:15px; line-height:1.55; color:var(--color-text-primary, #222); font-family:inherit; }
textarea.comment_textarea_style::placeholder{ color:var(--color-text-lighter, #9a9a9a); }
textarea.comment_textarea_style:focus{ border:0 !important; outline:0 !important; }


.writer a:link{
 color:#2f2f2f;
}
.writer a:hover{
 color:var(--color-hover);
}


/*comment.php영역(view 시) 댓글창 관련css*/
.dat_write{background:rgba(81,107,130,0.16);} /*댓글 입력하는 부분*/
.dat_write textarea{width: calc(100% - 3px); height:62px;} /*width는 클릭 시 border 1.5px양쪽 3px 빼줌*/
.dat_write img{vertical-align:middle;}
.dat_write p{}
.txt_red{color:var(--color-error)}
.level{text-align:center; display:inline-block; height:18px; font-size:11px; line-height:20px; width:18px;font-weight:600; margin-right:5px;}
.shapesL{position:absolute;top:20px;left:5px;color:black !important;}
.deleted_cmmt{padding:15.5px 0 18.5px 72px !important;}

.pagination02 .on{
	color: var(--ui-current-page, #D84841);
	font-weight: bold;
}


/*========================================
  다크모드 Border 및 배경 적용
========================================*/
body.dark .comment th{
	border-top-color: var(--dark-border-secondary);
	border-bottom-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
}

body.dark .comment dt span.writer{
	color: var(--dark-text-primary);
}

body.dark .writer a:link{
	color: var(--dark-text-primary, #ECECEC);
}
body.dark .writer a:hover{
	color: var(--color-hover);
}

body.dark .comment dt .time{
	color: var(--dark-text-secondary);
}

body.dark .reply_more:hover{ background-color: var(--dark-bg-hover) !important; }
body.dark .reply_btn:hover{ background-color: var(--dark-bg-hover) !important; }

/* 이미지첨부 버튼 */
body.dark .comment_imgBtn{
	background-color: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important;
}

/* 이미지첨부버튼 */
body.dark .img_attach_btn{
	background-color: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important;
}

/* (댓글 입력 영역 다크 테두리는 2026-10-09 E안 블록으로 합침) */

/* reply_dep01 td border */
body.dark .reply_dep01 td{
	border-bottom-color: var(--dark-border-secondary) !important;
}

/* 마이페이지 댓글 작성 영역 */

/* 답글 버튼 색상 */
body.dark .reply_btn{
	color: var(--dark-text-primary) !important;
}

/* 답글 더보기 버튼 색상 */
body.dark .reply_more{
	color: var(--dark-text-primary) !important;
}

/* 댓글 btn_area 링크 색상 */
body.dark .comment dt .btn_area a{
	color: var(--dark-text-secondary) !important;
}

/* ── 스레드 줄 조각 (2026-09-10) ── 두께 1px 통일(1.25 도 두껍다 하심) — 세로선도 SVG mask(3px 상자 가운데 stroke 1.25, 배경 상자는 배율 175% 에서 1·2 device px 로 제각각 스냅돼 대댓글 축만 굵어 보였다, 사장님 dep.png)·곡선 stroke 1.25(픽셀 중심 0.5). 색은 background=--thr-line
   s=프로필 아래 시작선(자식이 있을 때·답글 칸 열 때만) · c=이 행으로 들어오는 곡선 · v=지나가는 세로선 · 1=원댓글 축 · 2=답글 축
   B안: 답글 위에 마우스 → 묶음(tr.thr-hot) 줄이 주색 · 1단 줄 클릭 → 묶음 접기(comment.js) */
.thr{ position:absolute; pointer-events:none; box-sizing:border-box; }   /* 🔴 transition 금지 — 강조가 바뀔 때 묶음 전 조각이 프레임마다 다시 칠해져 스크롤 깜빡임(2026-09-10 실측) */
.thr-s1{ left:29px; top:54px; bottom:0; width:3px; margin-left:-1px; background:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23ADADB4' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; display:none; }
body.dark .thr-s1{ background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%2366666E' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E"); }
.thr-v1{ left:29px; top:0; bottom:0; width:3px; margin-left:-1px; background:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23ADADB4' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
body.dark .thr-v1{ background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%2366666E' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E"); }
.thr-c1{ left:29px; top:0; width:23px; height:21px; border:0; background:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'21' viewBox%3D'0 0 23 21'%3E%3Cpath d%3D'M0.5 0 V4.50 A16 16 0 0 0 16.50 20.50 H23' fill%3D'none' stroke%3D'%23ADADB4' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
body.dark .thr-c1{ background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'21' viewBox%3D'0 0 23 21'%3E%3Cpath d%3D'M0.5 0 V4.50 A16 16 0 0 0 16.50 20.50 H23' fill%3D'none' stroke%3D'%2366666E' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E"); }
.thr-s2{ left:66px; top:40px; bottom:0; width:3px; margin-left:-1px; background:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23ADADB4' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; display:none; }
body.dark .thr-s2{ background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%2366666E' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E"); }
.thr-v2{ left:66px; top:0; bottom:0; width:3px; margin-left:-1px; background:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23ADADB4' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
body.dark .thr-v2{ background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%2366666E' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E"); }
.thr-c2{ left:66px; top:0; width:23px; height:21px; border:0; background:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'21' viewBox%3D'0 0 23 21'%3E%3Cpath d%3D'M0.5 0 V4.50 A16 16 0 0 0 16.50 20.50 H23' fill%3D'none' stroke%3D'%23ADADB4' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
body.dark .thr-c2{ background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'21' viewBox%3D'0 0 23 21'%3E%3Cpath d%3D'M0.5 0 V4.50 A16 16 0 0 0 16.50 20.50 H23' fill%3D'none' stroke%3D'%2366666E' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E"); }
.thr-has > .thr-s1, .thr-open > .thr-s1, .thr-has > .thr-s2, .thr-open > .thr-s2{ display:block; }
.thr-folded > .thr-s1{ display:none; }   /* 묶음 접힘 — 시작선도 감춤 */
/* 1단 줄 = 접기 손잡이 (2px 이지만 좌우 7px 까지 잡힘) */
.thr-s1, .thr-v1{ pointer-events:auto; cursor:pointer; }
.thr-s1::after, .thr-v1::after{ content:''; position:absolute; left:-7px; right:-7px; top:0; bottom:0; }
/* 묶음 강조 */
/* 2026-09-10 평소 줄 = 색 박힌 SVG 배경(마스크 0 = 스크롤 래스터 가벼움). hover 순간만 마스크+주색(--thr-hot 변수 단일 소스) */
tr.thr-hot .thr-s1{ background:var(--thr-hot); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
tr.thr-hot .thr-v1{ background:var(--thr-hot); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
tr.thr-hot .thr-c1{ background:var(--thr-hot); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'21' viewBox%3D'0 0 23 21'%3E%3Cpath d%3D'M0.5 0 V4.50 A16 16 0 0 0 16.50 20.50 H23' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'21' viewBox%3D'0 0 23 21'%3E%3Cpath d%3D'M0.5 0 V4.50 A16 16 0 0 0 16.50 20.50 H23' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
tr.thr-hot .thr-s2{ background:var(--thr-hot); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
tr.thr-hot .thr-v2{ background:var(--thr-hot); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'3' height%3D'4' viewBox%3D'0 0 3 4' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M1.5 0 V4' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
tr.thr-hot .thr-c2{ background:var(--thr-hot); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'21' viewBox%3D'0 0 23 21'%3E%3Cpath d%3D'M0.5 0 V4.50 A16 16 0 0 0 16.50 20.50 H23' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'21' viewBox%3D'0 0 23 21'%3E%3Cpath d%3D'M0.5 0 V4.50 A16 16 0 0 0 16.50 20.50 H23' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
tr.thr-hot .thr-cf1{ background:var(--thr-hot); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'34' viewBox%3D'0 0 23 34'%3E%3Cpath d%3D'M0.5 0 V17.50 A16 16 0 0 0 16.50 33.50 H23' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'34' viewBox%3D'0 0 23 34'%3E%3Cpath d%3D'M0.5 0 V17.50 A16 16 0 0 0 16.50 33.50 H23' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
tr.thr-hot .thr-cf2{ background:var(--thr-hot); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'34' viewBox%3D'0 0 23 34'%3E%3Cpath d%3D'M0.5 0 V17.50 A16 16 0 0 0 16.50 33.50 H23' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'34' viewBox%3D'0 0 23 34'%3E%3Cpath d%3D'M0.5 0 V17.50 A16 16 0 0 0 16.50 33.50 H23' fill%3D'none' stroke%3D'%23000' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }

/* 답글 입력칸을 줄에 매달기 — 원댓글의 답글 칸 = 2단 자리(thr-f1), 답글의 답글 칸 = 3단 자리(thr-f2) */
.reply_frm{ position:relative; }
.thr-cf1{ left:29px; top:0; width:23px; height:34px; border:0; background:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'34' viewBox%3D'0 0 23 34'%3E%3Cpath d%3D'M0.5 0 V17.50 A16 16 0 0 0 16.50 33.50 H23' fill%3D'none' stroke%3D'%23ADADB4' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
body.dark .thr-cf1{ background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'34' viewBox%3D'0 0 23 34'%3E%3Cpath d%3D'M0.5 0 V17.50 A16 16 0 0 0 16.50 33.50 H23' fill%3D'none' stroke%3D'%2366666E' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E"); }
.thr-cf2{ left:66px; top:0; width:23px; height:34px; border:0; background:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'34' viewBox%3D'0 0 23 34'%3E%3Cpath d%3D'M0.5 0 V17.50 A16 16 0 0 0 16.50 33.50 H23' fill%3D'none' stroke%3D'%23ADADB4' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E") no-repeat 0 0 / 100% 100%; }
body.dark .thr-cf2{ background-image:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'23' height%3D'34' viewBox%3D'0 0 23 34'%3E%3Cpath d%3D'M0.5 0 V17.50 A16 16 0 0 0 16.50 33.50 H23' fill%3D'none' stroke%3D'%2366666E' stroke-width%3D'1' stroke-linecap%3D'butt'%2F%3E%3C%2Fsvg%3E"); }
.reply_frm .dat_write_etc.thr-f1{ margin-left:52px; width:calc(100% - 52px - 12px) !important; }
.reply_frm .dat_write_etc.thr-f2{ margin-left:89px; width:calc(100% - 89px - 12px) !important; }
.reply_frm .comment_list_write_area{ margin:8px 0 12px 0; padding:0; border-radius:10px; }   /* 2026-10-09 E안: 「이미지 첨부 기준」 줄이 도구 줄로 들어가 아래 30px 자리 불필요 */

/* 「답글 N개」 토글 — 주색 틴트 알약 */
#comment_zone .reply_more{ display:inline-flex; align-items:center; gap:4px; margin:0 0 8px -6px; padding:0 10px 0 8px; height:24px; line-height:24px; border-radius:12px; font-size:12.5px !important; font-weight:600; color:var(--color-brand, #D8432A) !important; background:color-mix(in srgb, var(--ui-action,#D8432A) 9%, transparent); }
#comment_zone .reply_more i{ width:auto !important; height:auto !important; margin-right:0 !important; font-size:11px; }
#comment_zone .reply_more:hover{ background:color-mix(in srgb, var(--ui-action,#D8432A) 16%, transparent) !important; border-radius:14px; }
body.dark #comment_zone .reply_more{ color:var(--tint-coral-fg, #F0A088) !important; background:var(--tint-coral-bg, #3B2A22); }   /* 2026-09-11 3.4:1 → 6:1 (사장님 "답글 145개 안 보임") */

/* 답글 입력칸 바탕·바깥 여백 제거 — community.css 의 .dat_write_etc 회색 바탕이 줄 옆에 띠로 보이고, 모바일 margin 20px 이 시작선과 곡선 사이를 벌렸다 (2026-09-10) */
.reply_frm .dat_write_etc, .reply_frm .dat_write_etc td{ background:none; }
.reply_frm .dat_write_etc{ margin-top:0; margin-bottom:0; }

/* 답글 칸 = 줄 옆 남은 폭 전부. 종전엔 상자 830 고정 + textarea 830 인라인이라 textarea 가 상자 밖으로 15px 삐져나왔다 (2026-09-10) */
.reply_frm .comment_list_write_area{ max-width:none !important; }
.reply_frm textarea.comment_textarea_style{ width:100% !important; box-sizing:border-box; }

/* (2026-09-10 의 이름 없는 flex div 보정은 2026-10-09 E안 마크업(.cmt-w__body)으로 불필요해져 삭제) */

/* A 컴팩트(2026-09-10, 사장님 확정): 원댓글 묶음 사이 hairline — 회색 상자를 없앤 뒤 묶음 경계가 흐려진 것을 보완 */
#comment_zone tr.comment_border:not(:first-child) td.thr-d1{ border-top:1px solid var(--color-border-light, #E6E6EA); }
body.dark #comment_zone tr.comment_border:not(:first-child) td.thr-d1{ border-top-color:var(--dark-border-secondary, #3a3a3a); }

/* 댓글 첨부 사진이 죽어 기본이미지(개그림)로 바뀐 경우 — 본문 폭만큼 커지지 않게 목록 썸네일 크기로 (2026-09-10) */
#comment_zone .comment_container img[src*="default_image"], #comment_zone_best .comment_container img[src*="default_image"]{ width:160px !important; height:120px !important; padding:10px 24px !important; background:var(--color-bg-page, #F2F2F3) !important; border-radius:6px; }
body.dark #comment_zone .comment_container img[src*="default_image"], body.dark #comment_zone_best .comment_container img[src*="default_image"]{ background:var(--dark-bg-secondary, #232323) !important; }

/* 2026-09-10 한 페이지 이어붙이기 — 바닥의 「더 불러오는 중」 행(자동, 실패 시 눌러서 재시도) */
.cmt-more-box{ display:flex; align-items:center; justify-content:center; gap:10px; margin:10px 12px 12px 10px; padding:11px 12px; border:1px solid var(--color-border-light, #E0E0E4); border-radius:8px; font-size:13.5px; color:var(--color-text-secondary, #555); background:var(--color-bg-white, #fff); cursor:pointer; }
.cmt-more-box b{ color:var(--color-brand, #D8432A); font-weight:700; }
.cmt-more-box:hover{ background:var(--color-bg-page, #F2F2F3); }
body.dark .cmt-more-box{ background:var(--dark-bg-secondary, #232323); border-color:var(--dark-border-secondary, #3a3a3a); color:var(--dark-text-secondary, #bbb); }
.cmt-more-box .dot-loader{ padding:0; }
.cmt-more-dots[hidden]{ display:none !important; }   /* dot-loader 의 display 가 hidden 을 이김 */

/* ── 2026-09-10 클리앙 요소(사장님 B안): 공감 하트 배지 ──
   2026-10-17 사장님 「왜 어떤 건 노란색이냐, 색 걷어내고 글쓴이는 다른 식으로」 → 크림 배경·왼쪽 막대 폐지. D안(칩+프로필 링) 잠깐 뒤 「프로필 빨간 border 빼고」 → I안 확정:
   글쓴이 이름 자체가 주색 알약(.cmt-opname = 닉 span)이고 바로 뒤 「작성자」(.bbs_w_id)가 같은 알약의 오른쪽 조각으로 붙는다 */
#comment_zone .cmt-opname, #comment_zone_best .cmt-opname{ display:inline-flex !important; align-items:center; height:22px; padding:0 3px 0 8px; margin:0; border-radius:5px 0 0 5px; background:var(--color-brand, #D8432A); color:#fff !important; font-size:12.5px !important; font-weight:700 !important; letter-spacing:.2px !important; line-height:1; }
#comment_zone .cmt-opname a, #comment_zone_best .cmt-opname a{ color:#fff !important; text-decoration:none !important; }
#comment_zone .cmt-opname + .bbs_w_id, #comment_zone_best .cmt-opname + .bbs_w_id{ display:inline-flex !important; align-items:center; height:22px; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 8px 0 4px !important; border-radius:0 5px 5px 0 !important; background:var(--color-brand, #D8432A) !important; color:rgba(255,255,255,.88) !important; font-size:11px !important; font-weight:600 !important; line-height:1 !important; letter-spacing:0; }
body.dark #comment_zone .cmt-opname, body.dark #comment_zone_best .cmt-opname, body.dark #comment_zone .cmt-opname + .bbs_w_id, body.dark #comment_zone_best .cmt-opname + .bbs_w_id{ background:var(--color-brand, #D8432A) !important; }
.cl-heart-wrap{ margin:2px 0 3px; line-height:1; }
.cl-heart{ display:inline-flex; align-items:center; gap:3px; height:18px; padding:0 7px; border-radius:9px; background:#E8503A; color:#fff; font-size:11px; font-weight:700; }
.cl-heart i{ font-size:10px; }
.cl-heart[data-n="0"]{ display:none; }
body.dark .cl-heart{ background:var(--tint-coral-bg, #3B2A22); color:var(--tint-coral-fg, #F0A088); }   /* 2026-09-11 다크 = 코랄 틴트 알약(BEST·작성자 배지와 같은 문법). 원색 빨강 채움은 다크에서 튐 */
/* 2026-09-11 @닉네임(comment_list.php .parent-nick) — 인라인 #5E7EC5 고정이라 다크에서 3.8:1 이던 것 */
.parent-nick{ color:var(--color-secondary, #3F5F8A); }
body.dark .parent-nick{ color:var(--tint-blue-fg, #9BB6DA); }
#comment_zone .thumb_up_count{ display:none; }   /* 숫자는 하트 배지로 */


/* ═══ 2026-09-11 댓글 프로필 카드(유튜브식, C 배치 + ⋮ 신고·차단) + 회원 차단 접힘 — comment.js §12 ═══ */
#comment_zone .cmt-pf .profile_img, #comment_zone_best .cmt-pf .profile_img{ cursor:pointer; }
#comment_zone .cmt-pf .profile_img:hover, #comment_zone_best .cmt-pf .profile_img:hover, .anpc-src.profile_img, img.anpc-src{ box-shadow:0 0 0 3px color-mix(in srgb, var(--ui-action,#D8432A) 22%, transparent); }
.anpc{ position:absolute; z-index:10001; width:360px; box-sizing:border-box; background:var(--color-bg-white,#fff); color:var(--color-text-primary,#222); border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); overflow:hidden; text-align:left; font-size:13px; line-height:1.45; letter-spacing:-0.01em; }
.anpc.anpc-loading{ min-height:120px; display:flex; align-items:center; justify-content:center; }
.anpc-err{ padding:24px 18px; color:var(--color-text-secondary,#666); text-align:center; }
.anpc-head{ position:relative; display:flex; align-items:flex-start; gap:14px; padding:18px 18px 0; }
.anpc-avwrap{ flex:none; width:64px; height:64px; }
.anpc .anpc-av{ width:64px !important; height:64px !important; font-size:29px !important; border-radius:18px !important; object-fit:cover; padding:0 !important; border:1px solid #EAEAEA !important; }
.anpc .anpc-av.an-avph{ border-radius:18px !important; border:0 !important; }
.anpc-info{ flex:1; min-width:0; }
.anpc-nick{ font-size:17px; font-weight:700; line-height:1.25; display:flex; align-items:center; gap:6px; flex-wrap:wrap; word-break:break-all; }
.anpc-nick .grade-badge{ margin:0 !important; }
.anpc-sub{ margin-top:5px; font-size:12.5px; color:var(--color-text-secondary,#666); line-height:1.5; }
.anpc-blk{ font-style:normal; font-size:11px; font-weight:700; color:var(--color-brand,#D8432A); background:color-mix(in srgb, var(--ui-action,#D8432A) 10%, transparent); padding:1px 6px; border-radius:8px; margin-left:4px; }
.anpc-x, .anpc-more{ flex:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#777; cursor:pointer; margin-top:-6px; }
.anpc-more{ margin-left:auto; }
.anpc-more + .anpc-x{ margin-left:0; margin-right:-6px; }
.anpc-x:only-of-type{ margin-left:auto; margin-right:-6px; }
.anpc-x:hover, .anpc-more:hover{ background:#F0F0F2; }
.anpc-menu{ position:absolute; right:14px; top:44px; z-index:2; min-width:150px; padding:6px 0; background:var(--color-bg-white,#fff); border:1px solid var(--color-border-light,#e3e3e3); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.anpc-menu a{ display:flex; align-items:center; gap:9px; padding:8px 14px; font-size:13px; color:var(--color-text-primary,#222); text-decoration:none; white-space:nowrap; }
.anpc-menu a:hover{ background:var(--color-bg-lighter,#f5f5f7); }
.anpc-menu a i{ width:14px; text-align:center; color:var(--color-brand,#D8432A); }
.anpc-stats{ display:flex; margin:14px 18px 0; border:1px solid #ECECEF; border-radius:10px; overflow:hidden; }
.anpc-stats > *{ flex:1; text-align:center; padding:10px 0 9px; border-left:1px solid #ECECEF; text-decoration:none; color:inherit; }
.anpc-stats > *:first-child{ border-left:0; }
.anpc-stats a:hover{ background:#FAFAFB; }
.anpc-stats b{ display:block; font-size:16px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.anpc-stats span{ font-size:11.5px; color:#8a8a8a; }
.anpc-btns{ display:flex; gap:8px; padding:14px 18px 16px; }
.anpc-btn{ flex:1; height:38px; border-radius:19px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:13.5px; font-weight:700; cursor:pointer; text-decoration:none !important; }
.anpc-btn.pri{ background:var(--color-brand,#D8432A); color:#fff !important; }
.anpc-btn.pri:hover{ background:var(--color-primary-dark,#B3331E); }
.anpc-btn.sec{ background:#F1F1F3; color:var(--color-text-primary,#222) !important; }
.anpc-btn.sec:hover{ background:#E8E8EB; }
.anpc-sec{ border-top:1px solid #ECECEF; padding:14px 18px 6px; }
.anpc-sec h4{ margin:0 0 6px; font-size:14px; font-weight:700; color:var(--color-text-primary,#222); }
.anpc-rc{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid #F3F3F5; cursor:pointer; text-decoration:none !important; color:inherit !important; }
.anpc-rc:first-of-type{ border-top:0; }
.anpc-rc .t{ flex:1; min-width:0; }
.anpc-rc .bt{ font-size:12px; color:#8a8a8a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.anpc-rc .bt b{ color:var(--color-text-primary,#222); font-weight:600; }
.anpc-rc .ct{ font-size:13px; line-height:1.4; margin-top:2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all; }
.anpc-rc i{ color:#999; font-size:12px; flex:none; }
/* 모바일 = 아래 시트 (🔴 body 스크롤 잠금 없음) */
.anpc-dim{ position:fixed; inset:0; z-index:10000; background:transparent; }   /* 2026-09-14 사장님 "프로필 바깥 회색이 먼저 깔리고 2초 뒤 카드가 나온다 → 흰색이나 투명": 반투명 검정 45% → 투명(바깥 눌러 닫기 역할만 남김, 카드는 자기 그림자로 떠 보임) */
.anpc.sheet{ position:fixed; left:0; right:0; bottom:0; width:auto; max-height:72vh; display:flex; flex-direction:column; border-radius:18px 18px 0 0; box-shadow:0 -6px 30px rgba(0,0,0,.25); padding-bottom:env(safe-area-inset-bottom,0); }
.anpc.sheet .anpc-grab{ width:38px; height:4px; border-radius:2px; background:#D5D5DA; margin:10px auto 0; flex:none; }
.anpc.sheet .anpc-head{ padding-top:12px; }
.anpc.sheet .anpc-head, .anpc.sheet .anpc-stats, .anpc.sheet .anpc-btns{ flex:none; }
.anpc.sheet .anpc-sec{ flex:1; min-height:0; overflow-y:auto; padding-bottom:18px; }
.anpc.sheet.nosec .anpc-btns{ padding-bottom:26px; }
.anpc.sheet.anpc-loading{ min-height:160px; }
/* 차단한 회원의 댓글 = 띠로 접기(행·답글 줄은 남긴다) */
.cmt-blk-bar{ display:flex; align-items:center; gap:8px; min-height:40px; padding:0 4px; font-size:13px; color:var(--color-text-secondary,#777); }
.cmt-blk-bar i{ color:#AAA; font-size:13px; }
.cmt-blk-bar .cmt-blk-show{ margin-left:2px; height:24px; padding:0 10px; border:1px solid var(--color-border,#ddd); border-radius:12px; background:var(--color-bg-white,#fff); color:var(--color-text-secondary,#666); font-size:12px; cursor:pointer; font-family:inherit; }
.cmt-blk-bar .cmt-blk-show:hover{ background:var(--color-bg-lighter,#f5f5f7); }
.cmt-blocked:not(.cmt-blk-open) > .cmt-row-body, .cmt-blocked:not(.cmt-blk-open) > div[style*="position: absolute"], .cmt-blocked:not(.cmt-blk-open) > dd.cmt-reply-slot{ display:none !important; }
.cmt-blocked.cmt-blk-open > .cmt-blk-bar{ display:none; }
.cmt-blocked.cmt-blk-open > .cmt-row-body{ opacity:.75; }
body.dark .anpc{ box-shadow:0 8px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); }
body.dark .anpc-x:hover, body.dark .anpc-more:hover{ background:#333; }
body.dark .anpc-stats, body.dark .anpc-stats > *{ border-color:#333; }
body.dark .anpc-stats a:hover{ background:#2A2A2E; }
body.dark .anpc-btn.sec{ background:#2E2E33; }
body.dark .anpc-btn.sec:hover{ background:#3A3A40; }
body.dark .anpc-btn.pri, html.dark .anpc-btn.pri, body.dark .anpc-btn.pri:hover, html.dark .anpc-btn.pri:hover{ color:#2A211C !important; }   /* 2026-09-14 사장님 "다크에서 마이커뮤니티 보기 글씨가 흰색이라 안 보임": 다크 브랜드 = 노랑 #F2C25E 바탕 → 진한 글자(카드 안 노란 배지와 같은 #2A211C) */
body.dark .anpc-sec{ border-color:#333; }
body.dark .anpc-rc{ border-color:#2C2C30; }
body.dark .anpc-menu{ border-color:#3a3a3a; }

/* ═══ 2026-09-11 댓글 더 보기 B안 — 자동 상한 뒤 알약 버튼 + 읽은 비율 + 전부 펼치기 ═══ */
.cmt-more-manual{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0 6px; }
.cmt-more-manual[hidden], .cmt-more-box[hidden]{ display:none !important; }   /* 🔴 .cmt-more-box 의 display:flex 가 hidden 을 이긴다 */
.cmt-more-pill{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 22px; border-radius:21px; background:var(--color-bg-white,#fff); border:1.5px solid var(--color-brand,#D8432A); color:var(--color-brand,#D8432A); font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; box-shadow:0 2px 6px color-mix(in srgb, var(--ui-action,#D8432A) 12%, transparent); }
.cmt-more-pill:hover{ background:color-mix(in srgb, var(--ui-action,#D8432A) 6%, transparent); }
.cmt-more-pill i{ font-size:12px; }
.cmt-more-prog{ width:220px; max-width:60%; height:4px; border-radius:2px; background:var(--color-border-light,#ECECEF); overflow:hidden; }
.cmt-more-prog i{ display:block; height:100%; width:0; background:var(--color-brand,#D8432A); transition:width .3s; }
.cmt-more-sub{ font-size:12px; color:var(--color-text-quaternary,#8a8a8a); display:flex; gap:10px; align-items:center; font-variant-numeric:tabular-nums; }
.cmt-more-sub a{ color:var(--color-text-secondary,#555); text-decoration:underline; cursor:pointer; }
body.dark .cmt-more-pill{ background:var(--dark-bg-secondary,#232323); }
body.dark .cmt-more-prog{ background:#3a3a3a; }

/* ═══ 2026-09-11 내 아바타 편집(C안) — comment.js §13 anAvatarPanel, 프로필 카드·마이페이지 공용 ═══ */
.anpc-blk.anpc-me{ background:#EEF3FF; color:#3F6FD1; }
.ape{ border-top:1px solid #ECECEF; padding:14px 18px 16px; font-size:13px; }
.ape h4{ margin:0 0 10px; font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--color-text-primary,#222); }
.ape h4 small{ font-weight:500; color:#8a8a8a; font-size:12px; }
.ape-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:6px 0 4px; }
.ape-grid i{ aspect-ratio:1; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; cursor:pointer; font-style:normal; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.ape-grid i.on{ box-shadow:0 0 0 2px var(--color-bg-white,#fff), 0 0 0 4px var(--color-brand,#D8432A); }
.ape-custom{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12.5px; color:#666; flex-wrap:wrap; }
.ape-custom input[type=color]{ width:30px; height:26px; border:1px solid var(--color-border,#DDD); border-radius:7px; padding:1px; background:none; cursor:pointer; }
.ape-warn{ color:var(--color-brand,#D8432A); font-weight:700; }
.ape-btns{ display:flex; gap:8px; margin-top:12px; }
.ape-btns button{ flex:1; height:36px; border-radius:18px; border:0; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; }
.ape-save{ background:var(--color-brand,#D8432A); color:#fff; }
.ape-reset{ background:#F1F1F3; color:#333; }
.mp-avatar-wrap .ape{ border-top:0; padding:0; max-width:420px; }
.mp-avatar-wrap .ape h4{ display:none; }   /* 마이페이지는 바깥 라벨이 있으니 패널 제목 숨김 */
.anpc.sheet.has-edit{ overflow-y:auto; }   /* 편집 칸이 열리면 시트 전체 스크롤(패널이 잘리지 않게) */
.anpc.sheet.has-edit .anpc-sec{ flex:none; overflow:visible; }
body.dark .ape{ border-color:#333; }
body.dark .ape-reset{ background:#2E2E33; color:#E5E5E5; }
body.dark .anpc-blk.anpc-me{ background:#22304A; color:#9DB6FF; }

/* 2026-09-11 B안: 편집 중 머리 아바타 = 미리보기 + 카메라 배지(사진 바꾸기) */
.anpc-avwrap{ position:relative; }
.anpc-avwrap:has(.anpc-cam){ cursor:pointer; }
.anpc-cam{ position:absolute; right:-4px; bottom:-4px; width:26px; height:26px; border-radius:50%; background:var(--color-bg-white,#fff); border:1px solid var(--color-border,#DDD); display:flex; align-items:center; justify-content:center; font-size:12px; color:#444; box-shadow:0 1px 4px rgba(0,0,0,.15); cursor:pointer; }
.ape-hint{ font-size:12px; color:#8a8a8a; margin:-4px 0 8px; line-height:1.5; }
body.dark .anpc-cam{ background:#2E2E33; border-color:#444; color:#DDD; }

/* 2026-09-11 편집 칸 「사진 / 첫 글자」 전환 칩(사진이 있을 때만) */
.ape-mode{ display:flex; gap:6px; margin:0 0 10px; }
.ape-mode span{ height:28px; padding:0 12px; border-radius:14px; border:1px solid var(--color-border,#DDD); display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--color-text-secondary,#555); cursor:pointer; background:var(--color-bg-white,#fff); }
.ape-mode span.on{ background:#222; color:#fff; border-color:#222; }
body.dark .ape-mode span.on{ background:#EDEDED; color:#111; border-color:#EDEDED; }

/* 2026-09-11 A안: 사진 고른 직후 머리 아래 띠(취소·적용) + 미리보기 테두리 */
.anpc-av-prev{ outline:2px solid var(--color-brand,#D8432A); outline-offset:2px; }
.anpc-apply{ display:flex; align-items:center; gap:10px; margin:10px 18px 0; padding:10px 12px; border-radius:10px; background:#FFF6F4; border:1px solid #F5D3CB; font-size:13px; }
.anpc-apply .t{ flex:1; color:var(--color-text-secondary,#5C554F); line-height:1.4; }
.anpc-apply .t b{ color:var(--color-text-primary,#222); }
.anpc-apply button{ height:32px; padding:0 14px; border-radius:16px; border:0; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; flex:none; }
.anpc-apply .ok{ background:var(--color-brand,#D8432A); color:#fff; }
.anpc-apply .ok:disabled{ opacity:.6; cursor:default; }
.anpc-apply .no{ background:var(--color-bg-white,#fff); color:#555; border:1px solid var(--color-border,#DDD); }
.anpc.sheet .anpc-apply{ flex:none; }
body.dark .anpc-apply{ background:#3A2521; border-color:#5A3A33; }
body.dark .anpc-apply .no{ background:#2E2E33; color:#E5E5E5; border-color:#444; }

/* 2026-09-11 사진 있는 회원 = 로딩 중 회색 원(B), 없는 회원 = 첫 글자(A). img 는 alt 비움 → 주소 붙기 전·로딩 중 깨진 아이콘 0. 로드되면 클래스 제거 */
.an-avsk{ background:linear-gradient(90deg,#E8E6E1 25%,#F3F1EC 50%,#E8E6E1 75%) !important; background-size:200% 100% !important; animation:an-avsk-p 1.2s linear infinite; border-color:transparent !important; }
@keyframes an-avsk-p{ from { background-position:200% 0; } to { background-position:-200% 0; } }
body.dark .an-avsk{ background:linear-gradient(90deg,#2E2E33 25%,#3A3A40 50%,#2E2E33 75%) !important; background-size:200% 100% !important; }
@media (prefers-reduced-motion:reduce){ .an-avsk { animation:none; } }

/* 2026-09-11 댓글 이미지·유튜브 토글: 코랄 틴트 바탕 위 아이콘은 밝은 코랄로(3.9:1 → 6:1) */
body.dark .best-toggle-btn .fa-image, body.dark .best-toggle-btn .fa-youtube{ color: var(--tint-coral-fg, #F0A088) !important; }

/* 2026-09-11 댓글 ⋮ 아이콘(글쓴이 행 #2A2620·BEST #332E2A 위 8C857D = 3.7~4.1:1) · 추천수 D46A50 은 BEST 행 위 3.8:1 → 밝은 값 */
body.dark .cmt-more-btn i{ color: var(--dark-text-secondary, #ADA59D); }
body.dark .recomm_up_color{ color: var(--dark-text-emphasis, #F0A088); }

/* ==================== 통합 프로필 카드 V1 (2026-09-13 사장님 "상단 IP 카드와 하단 프로필 통합"): 운영자에게만 IP 줄 + 운영자 도구 띠 ==================== */
.anpc-ip{ margin-top:3px; font-size:12px; color:var(--color-text-tertiary,#8A837D); }
.anpc-ip i{ font-size:10px; margin-right:4px; }
.anpc-admin{ display:flex; align-items:center; gap:8px; margin:0 18px 14px; padding:10px 12px; border:1px dashed var(--tint-coral-border,#F1CFC5); border-radius:10px; background:var(--tint-coral-bg-soft,#FFF7F5); }
.anpc.sheet .anpc-admin{ margin:0 16px 14px; }
.anpc-admin-l{ display:flex; align-items:center; gap:5px; margin-right:auto; font-size:12px; font-weight:700; color:var(--tint-coral-fg,#B3331E); }
.anpc-admin .anpc-ab{ display:inline-flex !important; align-items:center; justify-content:center; height:30px; margin:0 !important; padding:0 12px !important; border-radius:15px; border:1px solid var(--tint-coral-border,#F1CFC5); background:var(--color-bg-white,#fff); color:var(--tint-coral-fg,#B3331E); font-size:12.5px !important; font-weight:700 !important; line-height:1 !important; font-family:inherit; cursor:pointer; box-shadow:none; }
.anpc-admin .anpc-ab-sus{ background:var(--color-primary-dark,#B3331E); color:#fff; border-color:var(--color-primary-dark,#B3331E); }
.anpc-admin .anpc-ab.is-on{ background:var(--tint-coral-bg,#FBE4DE); }
body.dark .anpc-admin{ background:#2A211C; border-color:#5A3E33; }
body.dark .anpc-admin-l{ color:var(--tint-coral-fg,#F0A088); }
body.dark .anpc-admin .anpc-ab{ background:var(--dark-bg-secondary,#232323); color:var(--tint-coral-fg,#F0A088); border-color:#5A3E33; }
body.dark .anpc-admin .anpc-ab-sus{ background:#8E2A1F; color:#fff; border-color:#8E2A1F; }
/* 2026-09-14 M3: 운영자가 자기 카드를 볼 때 = 이름 옆 운영자 배지 + 「관리 바로가기」 띠(신고 처리 N · 제재 회원 · 관리자 페이지) */
.anpc-opbadge{ display:inline-flex; align-items:center; gap:3px; margin-left:6px; padding:1px 7px; border-radius:9px; font-size:11px; font-weight:700; line-height:16px; vertical-align:1px; font-style:normal; white-space:nowrap; background:var(--tint-coral-bg,#FBE4DE); color:var(--tint-coral-fg,#B3331E); }
.anpc-opbadge i{ font-size:10px; }
.anpc-admin.anpc-admin-me{ flex-wrap:wrap; row-gap:8px; }
.anpc-admin.anpc-admin-me .anpc-admin-l{ flex:1 0 100%; }
.anpc-admin .anpc-ml{ gap:4px; padding:0 11px !important; font-weight:600 !important; text-decoration:none !important; color:var(--tint-coral-fg,#B3331E) !important; }
.anpc-admin .anpc-ml:hover{ background:var(--tint-coral-bg,#FBE4DE); }
.anpc-admin .anpc-ml i{ font-size:11.5px; }
.anpc-admin .anpc-ml b{ display:inline-block; min-width:16px; padding:0 5px; border-radius:8px; background:var(--color-brand,#D8432A); color:#fff; font-size:10.5px; font-weight:700; line-height:16px; text-align:center; }
body.dark .anpc-opbadge{ background:#3B2A22; color:#F2C25E; }
body.dark .anpc-admin .anpc-ml{ color:#F0A088 !important; }
body.dark .anpc-admin .anpc-ml:hover{ background:#33241E; }
body.dark .anpc-admin .anpc-ml b{ background:#F2C25E; color:#2A211C; }
body.dark .anpc-ip{ color:#8A817B; }

/* 2026-10-22 사장님 시간간격.png 「너무 붙음」 — 이름 알약(·작성자 조각) 뒤 시간 간격 5 → 10px. 인라인 margin-left:5px 를 덮는다 */
#comment_zone .time_str, #comment_zone_best .time_str{ margin-left: 10px !important; }


/* ── /css/admin_quick_suspend.css ── */
/* 게시글·댓글 옆 '제재' 버튼 + 제재 창 (2026-08-06)
   운영자에게만 보인다(서버가 렌더 단계에서 감춘다). 색은 전부 토큰. */

.an-suspend-btn {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 9px; margin-left: 6px;
	border: 1px solid var(--state-error-soft-text, #9C3830); border-radius: 5px;
	background: var(--state-error-soft-bg, #FBEDEC);
	color: var(--state-error-soft-text, #9C3830);
	font-size: 11.5px; font-weight: 700; line-height: 1.6; cursor: pointer; vertical-align: middle;
}
.an-suspend-btn:hover { background: var(--state-error-soft-text, #9C3830); color: #fff; }

.anqs-wrap { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.anqs-wrap[hidden] { display: none; }
.anqs-dim { position: absolute; inset: 0; background: var(--modal-dim, rgba(0,0,0,.5)); }
.anqs-box {
	position: relative; width: 100%; max-width: 420px; max-height: 88vh; overflow: auto;
	background: var(--color-bg-white, #fff); color: var(--color-text-primary, #222);
	border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.anqs-head {
	position: relative; padding: 16px 18px; border-bottom: 1px solid var(--color-border, #ddd);
	font-size: 15.5px; font-weight: 700;
}
.anqs-x { position: absolute; top: 12px; right: 14px; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--color-text-quaternary, #888); }
.anqs-body { padding: 16px 18px; }
.anqs-target { margin-bottom: 12px; padding: 9px 12px; border-radius: 8px; background: var(--color-bg-lighter, #f7f7f7); font-size: 13px; font-weight: 600; }
.anqs-label { margin: 13px 0 6px; font-size: 12px; font-weight: 700; color: var(--color-text-tertiary, #666); }
.anqs-label:first-of-type { margin-top: 0; }
.anqs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.anqs-chip {
	padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
	border: 1px solid var(--color-border, #ddd); background: var(--color-bg-white, #fff); color: var(--color-text-primary, #222);
}
.anqs-chip:hover { border-color: var(--color-brand, #D84841); }
.anqs-chip.on { background: var(--ui-action, #D84841); border-color: var(--ui-action, #D84841); color: var(--ui-action-text, #fff); }
.anqs-types { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.anqs-types label { cursor: pointer; }
.anqs-reason, .anqs-custom {
	width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; box-sizing: border-box;
	border: 1px solid var(--color-border, #ddd); background: var(--color-bg-white, #fff); color: var(--color-text-primary, #222);
}
.anqs-custom { margin-top: 7px; resize: vertical; }
.anqs-msg { margin-top: 10px; font-size: 12.5px; color: var(--state-error-soft-text, #9C3830); }
.anqs-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--color-border, #ddd); }
.anqs-foot button { padding: 9px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.anqs-cancel { background: var(--color-bg-lighter, #f7f7f7); border-color: var(--color-border, #ddd); color: var(--color-text-secondary, #666); }
.anqs-ok { background: var(--ui-action, #D84841); color: var(--ui-action-text, #fff); }
.anqs-ok:disabled { opacity: .6; cursor: default; }

body.dark .anqs-box { background: var(--dark-bg-secondary, #232323); color: var(--dark-text-primary, #ECECEC); }
body.dark .anqs-head, body.dark .anqs-foot { border-color: var(--dark-border-secondary, #4A4A4A); }
body.dark .anqs-target { background: var(--dark-bg-tertiary, #2A2A2A); }
body.dark .anqs-chip, body.dark .anqs-reason, body.dark .anqs-custom {
	background: var(--dark-bg-tertiary, #2A2A2A); border-color: var(--dark-border-secondary, #4A4A4A); color: var(--dark-text-primary, #ECECEC);
}
body.dark .anqs-cancel { background: var(--dark-bg-tertiary, #2A2A2A); border-color: var(--dark-border-secondary, #4A4A4A); color: var(--dark-text-secondary, #ACACAC); }

.anqs-types input[type="checkbox"] {
	position: static; width: 14px; height: 14px;
	margin: 0 5px 0 0; padding: 0;
	overflow: visible; clip: auto; clip-path: none;
	vertical-align: middle; accent-color: var(--ui-action, #D84841);
}
.anqs-types label { display: inline-flex; align-items: center; }

/* select 는 마크업에 `data-no-cs` 를 달아 전역 커스텀셀렉트 숨김 규칙에서 빠져나온다
   (js/admin_quick_suspend.js 참조). 여기서는 모양만 잡아 준다. */
.anqs-box select.anqs-reason {
	appearance: auto; -webkit-appearance: menulist;
	opacity: 1; pointer-events: auto;
	height: auto; min-height: 36px; line-height: 1.4;
	border: 1px solid var(--color-border, #ddd) !important;
	background: var(--color-bg-white, #fff) !important;
	color: var(--color-text-primary, #222) !important;
}
body.dark .anqs-box select.anqs-reason {
	border-color: var(--dark-border-secondary, #4A4A4A) !important;
	background: var(--dark-bg-tertiary, #2A2A2A) !important;
	color: var(--dark-text-primary, #ECECEC) !important;
}

/* 글 블라인드 버튼 (2026-08-06) — 제재 버튼과 짝. 켜짐(해제용)은 색을 뒤집어 상태가 보이게 */
.an-blind-btn {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 9px; margin-left: 6px;
	border: 1px solid var(--color-text-tertiary, #666); border-radius: 5px;
	background: transparent; color: var(--color-text-secondary, #666);
	font-size: 11.5px; font-weight: 700; line-height: 1.6; cursor: pointer; vertical-align: middle;
}
.an-blind-btn:hover { background: var(--color-text-tertiary, #666); color: #fff; }
.an-blind-btn.is-on {
	border-color: var(--state-error-soft-text, #9C3830);
	background: var(--state-error-soft-text, #9C3830); color: #fff;
}
.an-blind-btn.is-on:hover { opacity: .85; }
.an-blind-btn:disabled { opacity: .55; cursor: default; }


/* ── /css/member.css ── */
/* 2026-08-07 — 아래 어딘가의 background url() 중 '서버에 파일이 없는' 것을 none 으로 바꿨다.
   (선언째 지우면 같이 붙어 있던 padding/height 값까지 날아가 레이아웃이 바뀐다)
   지운 게 아니라 안 그리던 것을 명시했을 뿐이라 화면은 그대로고, 404 요청만 사라진다. */
/* 약관 */
.mem_area{width:100%;}
.mem_title{color:var(--color-link-hover);font-size:17px;}
.mem_title span{color:#939393; font-size:13px;}
.agree{border: var(--color-border-light) 1px solid; padding: 10px; font-size: 11px; overflow: auto; width: 742px; color: #363636777;  height:87px; background:#fff;}
.btn_area_center{text-align:center; margin-top:30px;}
/* 등록 */
.register th{text-align:left;position:relative; padding:20px 0 20px 10px;}
.register td{padding:10px 0px;}
.register td select{padding:4.6px}
.register td textarea{padding:4px; width:95%; border:1px solid #aeaeb0; height:100px}
.register img{vertical-align:middle}
.star{position:absolute; top:16px; left:10px; color:var(--color-error);}
/* 완료 */
.finish{margin-top:10px; position:relative; background:none no-repeat; width:786px; height:462px; text-align:center; font-weight:bold}

/* 탭 */
.orange_tab_mem a{text-align:center; min-width:130px; background:#c8c8c8; display:inline-block; color:#fff; height:40px; line-height:40px;}
.orange_tab_mem a:hover{background:var(--ui-active, #E66B65);  color:var(--ui-active-text, #ffffff);}
.orange_tab_mem a.on{background:var(--ui-active, #E66B65);  color:var(--ui-active-text, #ffffff);}

.idpw{border-bottom:1px solid #eee; width:100%; border-collapse:collapse;font-size:13px;}
.idpw th{background:var(--color-bg-light);border-top:1px solid #eee; border-left:1px solid #eee; height:38px; font-size:15px;}
.idpw td{border-top:1px solid var(--color-border-light); text-align: center; height:38px; border-left:1px solid #eee;}
.idpw td li{height:38px; }
.idpw td li label{display:inline-block; width:80px; font-weight:bold; }
.idpw td li label.title{
	display:inline-block; width:80px;
	font-size:13px; font-weight:bold; line-height:normal;
	padding:0; letter-spacing:normal;
}
.idpw td li input[type=text]{border:1px solid #eee; padding:2px; height:18px; line-height:17px}
/* 🔴🔴 이메일/휴대폰 선택 라디오가 '보이지도 눌리지도' 않던 것 수리 (2026-08-06) —
   원인은 css/check_and_radio_custom.css 의 전역 `input[type=checkbox], input[type=radio]{position:absolute;
   width:1px;height:1px;clip:rect(0,0,0,0)}`. 커스텀 라벨을 씌운 곳(등록폼 칩·검색 옵션)을 위한 숨김인데
   셀렉터가 전역이라, 커스텀 라벨이 없는 이 폼의 라디오까지 1x1 로 찌그러뜨렸다.
   → 실측 결과 rect 가 [1,1] 이고 클릭이 <td> 로 가로채여, 휴대폰으로 찾기를 아예 쓸 수 없었다.
   전역 규칙을 좁히면 사이트 전반(등록폼 10개·검색)에 파장이 커서 이 표 안에서만 되돌린다. */
.idpw input[type="radio"]{
	position:static; width:13px; height:13px;
	margin:0 4px 0 0; padding:0;
	overflow:visible; clip:auto; clip-path:none;
	vertical-align:middle;
}
/* ── 아이디/비밀번호 찾기 제출 버튼 (2026-08-06 수리) ──
   전에는 <input type="image" src="../../img/main/submit_check.gif"> 였는데
   ① 경로가 웹루트 밖(../../)이고 ② 그 파일 자체가 없어서 find_id·find_pw 8곳 전부
   '깨진 이미지'(검은 대체박스)로 떴다. → 실제 <button> 으로 바꾸고 색은 CTA 토큰으로.
   float:right + margin-right:30px 도 제거 — 버튼 줄(.find_submit)이 가운데 정렬을 맡는다. */
.idpw td li .find_btn{
	display:inline-block; float:none; margin:0;
	min-width:70px; height:26px; padding:0 14px;
	border:none; border-radius:5px;
	background-color: var(--ui-action, #D84841);
	color: var(--ui-action-text, #ffffff);
	font-size:13px; font-weight:600; line-height:26px;
	text-align:center; cursor:pointer;
}
.idpw td li .find_btn:hover{ background-color: var(--ui-action-hover, #C33F39); }
/* 버튼 줄 — 옛 인라인 margin-top:-40px(버튼을 윗줄로 끌어올리려던 것)이 바로 위 '아이디' 줄을
   덮어 글자가 잘려 보였다. 음수 마진을 걷고 li 고정높이(38px)도 여기선 풀어 준다. */
.idpw td li.find_submit{ height:auto; padding:4px 0 8px; text-align:center; }
.idpw tr:first-child th:first-child{border-left:none;}
.idpw tbody td:first-child{border-left:none;}
.idpw select{padding:2px;}
.idpw td.fd{text-align:left; padding:10px 0 0 15px;}


/* 아이디찾기결과 */
.contents .result{width:100%;height:140px;border-top:2px solid var(--color-brown);border-bottom:1px solid #ddd;background-color:var(--color-bg-lighter);}
.contents p.result_title{font-size:18px;color:#555;font-weight:bold;font-family:var(--user-font,'Pretendard');margin-bottom:10px;}
.contents .result p{font-size:15px;color:#666;text-align:center;margin-top:41px;}
.contents .result p font{font-size:20px;color:#000;font-weight:bold;}
.contents .result_btn{height:auto;text-align:center;margin-top:20px;padding-bottom:20px;}
/* 아이디 찾기 결과 화면 버튼 (2026-08-06) — 옛 <img src="../img/member/btn_login2.gif|btn_findpw.gif"> 는
   그 파일이 라이브에도 없어 '깨진 이미지'로 떴다. 텍스트 버튼으로 대체하고 색은 토큰으로. */
.contents .result_btn .result_btn_link{
	display:inline-block; min-width:120px; height:38px; line-height:38px;
	margin:0 5px; padding:0 20px; border:1px solid transparent; border-radius:6px;
	font-size:14px; font-weight:600; text-align:center; box-sizing:border-box;
	background-color: var(--ui-action, #D84841);
	color: var(--ui-action-text, #ffffff);
}
.contents .result_btn .result_btn_link:hover{ background-color: var(--ui-action-hover, #C33F39); text-decoration:none; }
/* 보조(비밀번호 찾기) = 테두리형 */
.contents .result_btn .result_btn_link.sub{
	background-color: transparent;
	color: var(--color-text-secondary, #666);
	border-color: var(--color-border-medium, #ccc);
}
.contents .result_btn .result_btn_link.sub:hover{
	background-color: var(--color-bg-lighter, #f7f7f7);
	color: var(--color-text-primary, #333);
}


/*************** s:main_right wide & lnb_menu 로그인버튼 ***************/
.login-button-container{
    position: relative;
	margin:0 auto;
    background-color: #f6f6f6; /* 원래 배경 */
    border-radius: 5px 5px 0 0;
}

body.dark .login-button-container{
    background-color: var(--dark-bg-secondary) !important; /* 검정톤 배경 */
}

.login-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transition: background 0.3s ease; /* hover 효과를 위한 전환 추가 */
}


/*main_right wide 로그인버튼 dark모드 css*/
body .login-overlay{
	background: linear-gradient(to top, rgba(227, 227, 227, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%); /* 원래 밝은 회색/흰색 그라데이션 */
}

body.dark .login-overlay{
	background: linear-gradient(to top, rgba(255, 248, 234, 0.8) 0%, rgba(255, 248, 234, 0.9) 100%) !important; /* 노란톤 var(--color-tertiary-soft-bg, #e9f4ee) (다크모드만) */
}

body.dark .hover_area a p{
	font-weight: 600 !important;
}


/* main_right wide 로그인버튼 text */
body .login_overlay_text{
	color: var(--color-text-secondary) !important;
}
body.dark .login_overlay_text{
	color: var(--color-text-secondary) !important; /* 원래 스타일 유지 */
}


/*main_right wide 로그인버튼 hover 상태 그라데이션 설정 */
.hover_area:hover .login-overlay{
	background: linear-gradient(to top, rgba(217, 217, 217, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%); /* 원래 hover */
}
body.dark .hover_area:hover .login-overlay{
	background: linear-gradient(to top, rgba(255, 245, 220, 0.8) 0%, rgba(255, 248, 234, 0.9) 100%) !important; /* 노란톤 hover (다크모드만) */
}
/*************** e:main_right wide & lnb_menu 로그인버튼 ***************/


/*========================================
  다크모드 Border 및 배경 적용
========================================*/
body.dark .register{
	border-top-color: var(--dark-border-secondary);
}

body.dark .register th, body.dark .register td{
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .idpw{
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .idpw th{
	background-color: var(--dark-bg-secondary);
	border-top-color: var(--dark-border-secondary);
	border-left-color: var(--dark-border-secondary);
}

body.dark .idpw td{
	border-top-color: var(--dark-border-secondary);
	border-left-color: var(--dark-border-secondary);
}

body.dark .idpw td li input[type=text]{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
}

body.dark .contents .result{
	border-bottom-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
}

body.dark .contents .result p{
	color: var(--dark-text-primary);
}

/* ═══ 톤온톤 A안 4단계 — 마이페이지/회원 탭(.orange_tab_mem·.orange_tab) (2026-08-28): 회색 채움+코랄 채움 → 네모 묶음(컨트롤 토큰), 활성 = 코랄 톤 ═══ */
html .orange_tab_mem, html .orange_tab, html body.dark .orange_tab_mem, html body.dark .orange_tab{ border-bottom:1px solid var(--ctl-border,#E2E2E6) !important; }
html .orange_tab_mem a, html .orange_tab a, html body.dark .orange_tab_mem a, html body.dark .orange_tab a{ background:var(--ctl-bg,#fff) !important; color:var(--ctl-fg,#666) !important; border:1px solid var(--ctl-border,#E2E2E6) !important; border-bottom:0 !important; border-radius:6px 6px 0 0; box-sizing:border-box; font-weight:500; }
html .orange_tab_mem a:hover, html .orange_tab a:hover{ background:var(--color-bg-lighter,#f7f7f9) !important; color:var(--color-text-primary,#222) !important; }
html .orange_tab_mem a.on, html .orange_tab a.on, html .orange_tab_mem a.on:hover, html .orange_tab a.on:hover, html body.dark .orange_tab_mem a.on, html body.dark .orange_tab a.on{ background:var(--tint-coral-bg,#FFF1EC) !important; color:var(--tint-coral-fg,#C9472C) !important; font-weight:700 !important; border-color:var(--tint-coral-bg,#FFF1EC) !important; }


/* ── /css/animal.css ── */
/* 2026-08-07 — 아래 어딘가의 background url() 중 '서버에 파일이 없는' 것을 none 으로 바꿨다.
   (선언째 지우면 같이 붙어 있던 padding/height 값까지 날아가 레이아웃이 바뀐다)
   지운 게 아니라 안 그리던 것을 명시했을 뿐이라 화면은 그대로고, 404 요청만 사라진다. */
.animal_title{color:var(--color-text-secondary, #393939); font-size:24px; font-weight:550; padding-top:12px; clear:both;}


/*animal_detail.php 상단 url복사/인쇄하기/sns버튼 area*/
.top_btn_area{border-bottom:1px solid var(--color-brown); height:32px; text-align:right;}


body.dark .top_btn_area{
	border-color: var(--dark-ranking-color) !important;
}


.animal_tab{border-bottom:2px solid var(--color-brown);}
.animal_tab li{display:flex;}
.animal_tab a{
	text-align:center;
	flex:1; min-width:0;                 /* 탭 개수 무관 균등분할 — 3탭/4탭(분양 리스트 추가 시) 자동 대응. 기존 calc(/3) 고정은 4탭에서 넘쳐 잘림 */
	background:#d7d7d7;
	display:block;
	color:#fff;
	height:40px;
	line-height:40px;
	font-size:16px;
	}
	
/* 탭 활성/호버 — 역할: 현재 위치(--ui-active) */
.animal_tab a:hover, .animal_tab a.on{
	background:var(--ui-active, #E66B65);
	color:var(--ui-active-text, #ffffff);
}


body.dark .animal_tab{
	border-color: var(--dark-ranking-color) !important;
}

body.dark .animal_tab a{
	background-color: var(--dark-border-secondary) !important;
	color: #ccc !important;
}


body.dark .animal_tab a:hover, body.dark .animal_tab a.on{
	background-color: var(--ui-active, #E66B65) !important;
	color: var(--ui-active-text, #ffffff) !important;
}


/*분양중 / 찾습니다 아이콘*/
.status_icon_n{
	 display:inline-block; 
	 text-align:center; 
	 width:60px; 
	 height:22px; 
	 line-height:22px;
	 font-size:13px;   /* 2026-08-29 B안: 흰 글씨 on 주색 대비 4.42:1 → 12px/500 은 작은 글씨 기준 미달, 13px/700 으로 */
	 font-weight:700;
	 color:var(--state-ongoing-text, #ffffff);   /* 2026-08-27 폴백도 흰색으로(토큰과 일치) */
	 background-color:var(--state-ongoing, #EE6A48);
	 border-radius:30px;
}


/*분양완료 / 찾았어요 아이콘*/
.status_icon_y{
	 display:inline-block; 
	 text-align:center; 
	 width:60px; 
	 height:22px; 
	 line-height:22px; 
	 font-size:12px;
	 font-weight:500; 
	 color:var(--state-done-text, #ffffff); 
	 background-color:var(--state-done, #277A4C);
	 border-radius:30px;
}


/**********s:animal_detail 업체페이지 css**********/
/*업체페이지 title*/
.animal_detail_title{
	padding-bottom:5px;
	font-size:2.5em;
	font-weight:700;
	color:#505050;
}

body.dark .animal_detail_title{
	color: #ddd !important;
}


/*업체페이지 주소,업체명 등 정보*/
.animal_info_container{
	width:var(--site-w,1330px);
	margin:0 auto;
	border:1px solid var(--color-border);
	border-radius:5px;
}
/* [2026-08-29 사장님 "왼쪽 시작 부분이 아직 두껍다"] 찾아가는 길·사업자회원 정보·분양 리스트(map/bz_info/listings.php)는
   .animal_info_container 가 곧 .search_wrapper(퀵메뉴까지 품는 1310 폭)라 **바깥 테두리(왼쪽 145px)** 와 안쪽 #info_container.search_container
   테두리(146px)가 왼쪽에서 2줄로 겹치고, 오른쪽 바깥선은 퀵메뉴 뒤로 숨어 안 보였다. 상세정보(animal_detail.php)는 반대로
   .search_container.detail-body 가 border:none 이고 안쪽 .animal_info_container 만 1px 라 한 줄. → 세 화면을 상세와 같은 모양으로:
   래퍼 역할일 땐 바깥선 제거, 안쪽 상자가 1px + radius 5. */
.animal_info_container.search_wrapper{ border:0 !important; border-radius:0 !important; }
.animal_info_container.search_wrapper > #info_container.search_container{ border:1px solid var(--color-border,#D8D8DC) !important; border-radius:5px !important; }
body.dark .animal_info_container.search_wrapper > #info_container.search_container{ border-color:var(--dark-border-secondary,#48423D) !important; }


body.dark .animal_info_container{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
}

/* [2026-09-06] 실종 상세 히어로가 전단지(#flyerPopup)를 상자 안에 인라인으로 두므로, 종이 위 글자(td·span·a·i)는 이 다크 강제에서 제외 — 전단지는 인쇄물이라 테마와 무관하게 자기 색 */
body.dark .animal_info_container td:not(#flyerPopup *), body.dark .animal_info_container span:not(#flyerPopup *), body.dark .animal_info_container a:not(#flyerPopup *), body.dark .animal_info_container i:not(#flyerPopup *){
	color: var(--dark-text-primary) !important;
}


.animal_info_container:after{
	content:"";
	clear:both;
	display:block;
}


/*.animal_detail_content는 상세정보 중 내용*/
body.dark .animal_detail_content p, body.dark .animal_detail_content span{
	background-color: transparent !important;
	color: #ddd !important;
}


/*업체페이지 상세정보*/
.info_container{
	width:var(--site-w,1330px); max-width:100%;
	margin:auto;
	position:relative;
	background:none;
}


/**********e:animal_detail 업체페이지 css**********/


/*업체 board사용시*/
.animal_tab2{padding-top:30px; border-bottom:2px solid var(--color-brown);margin-bottom:15px; min-width:100%;}
.map_info{padding-bottom:20px; border-top:1px solid #d7d7d7;}
.map_info dt{padding:15px 0 0 20px; height:35px; font-weight:600; font-size:16px;}
.map_info dd{padding-left:20px; height:42px; border-bottom:1px dotted #666;}


/*�׸��˻�*/

/*�˻�����Ʈ*/
.search_list{border-top:2px solid var(--color-brown); border-bottom:1px solid var(--color-border); width:100%; border-collapse:collapse;font-family:var(--user-font,'Pretendard');}
.search_list thead th{background:var(--color-bg-light);border-top:0px solid var(--color-border); height:23px; font-size:12px; }
.search_list th{background:var(--color-bg-light); height:23px; font-size:12px; }

.search_list td{border-top:1px solid var(--color-border-light); text-align: center; }
.search_list tr:first-child th:first-child{border-left:none;}
.search_list td:first-child{border-left:none;}
.btn_dark_gray{display:inline-block; min-width:60px; height:20px; line-height:20px;  background: none no-repeat;text-align:center; color:#fff;}


/*옵션아이콘 다크모드*/
body.dark .btn_dark_search{
	background-color: var(--search-input-bg) !important;
	color: var(--search-input-text) !important;
}

body.dark .map_info{
	border-top-color: var(--dark-border-secondary);
}

/* 검색 리스트 다크모드 */
body.dark .search_list{
	background-color: var(--dark-bg-secondary);
	border-bottom-color: var(--dark-border-secondary);
	color: var(--dark-text-primary);
}
body.dark .search_list thead th, body.dark .search_list th{
	background-color: var(--dark-bg-tertiary);
	color: var(--dark-text-secondary);
}
body.dark .search_list td{
	border-top-color: var(--dark-border-primary);
	color: var(--dark-text-primary);
}
body.dark .search_list td.c_price1_result, body.dark .search_list td.c_price2_result, body.dark .search_list td.c_price3_result{
	color: var(--dark-color-link-hover, #C3D0DE) !important;
}

/* ═══ 톤온톤 A안 4단계 — 상세/마이페이지 탭(.animal_tab 계열) (2026-08-28): 회색 채움+코랄 채움 탭 → 네모 묶음(컨트롤 토큰), 활성 = 코랄 톤 ═══ */
.animal_tab, body.dark .animal_tab{ border-bottom:1px solid var(--ctl-border,#E2E2E6) !important; }
.animal_tab a, body.dark .animal_tab a{ background:var(--ctl-bg,#fff) !important; color:var(--ctl-fg,#666) !important; border:1px solid var(--ctl-border,#E2E2E6) !important; border-bottom:0 !important; border-radius:6px 6px 0 0; box-sizing:border-box; font-weight:500; }
/* [2026-08-29 사장님] 상세 페이지 탭(.animal_tab, #animal_tab: 상세정보/찾아가는 길/사업자회원 정보)은 모서리 둥글림 없이 — 위 공용 규칙(6px 6px 0 0)에서 이 탭만 제외 */
.animal_tab a, body.dark .animal_tab a{ border-radius:0 !important; }
/* [2026-08-29 사장님] 탭끼리 테두리 겹침(1px+1px=2px 굵은 선) 제거 — 뒤 탭을 1px 당겨 경계선을 하나로.
   활성 탭은 좌우 테두리를 공용 경계색으로 두어(윗선만 코랄 틴트) 어느 자리든 양옆 구분선이 1px 회색으로 같게 보인다. */
.animal_tab a + a{ margin-left:-1px; }
/* [2026-08-29 사장님] 맨 처음 탭의 왼쪽·맨 끝 탭의 오른쪽 세로선은 없앰 — 바깥 상자 테두리가 이미 있어 겹쳐 2px 로 보였다 */
.animal_tab a:first-child, body.dark .animal_tab a:first-child{ border-left:0 !important; }
.animal_tab a:last-child, body.dark .animal_tab a:last-child{  border-right:0 !important; }
.animal_tab a:hover, body.dark .animal_tab a:hover{ background:var(--color-bg-lighter,#f7f7f9) !important; color:var(--color-hover) !important; }
.animal_tab a.on, body.dark .animal_tab a.on, .animal_tab a.on:hover{ background:var(--tint-coral-bg,#FFF1EC) !important; color:var(--tint-coral-fg,#C9472C) !important; font-weight:700 !important; border-color:var(--tint-coral-bg,#FFF1EC) !important; }
/* [2026-08-29] 상세 탭(.animal_tab)만: 활성 탭 좌우 경계선은 공용 경계색 유지(윗선만 틴트) — 위 겹침 제거(margin-left:-1px)와 짝. 🔴 이 줄은 바로 위 .on 규칙 뒤에 있어야 이긴다(같은 특이성+!important → 나중 것) */
.animal_tab a.on, body.dark .animal_tab a.on, .animal_tab a.on:hover{ border-left-color:var(--ctl-border,#E2E2E6) !important; border-right-color:var(--ctl-border,#E2E2E6) !important; }
/* [2026-08-29 사장님 "맨 처음·맨 끝 줄은 아예 없애라 — 기존 테두리가 이미 있다"] 상세 탭 블록의 **윗선·밑선** 제거:
   위는 정보표 밑선(#EAEAEA), 아래는 본문 상자 윗선(#DDDDDD)이 이미 있어 탭 자체 선(--ctl-border)과 2px 로 겹쳐 보였다(sample/아직.png 픽셀 판독).
   🔴 위 공용 규칙이 !important 라 여기도 !important, 그리고 그 규칙들보다 뒤에 있어야 한다. */
/* [2026-08-29 사장님 "탭 위아래 border 가 없다"] 탭 컨테이너가 위·아래 1px 을 그린다. 위선은 정보표 밑선(#EAEAEA)과
   **같은 픽셀에 겹치도록** margin-top:-1px — 그래서 2줄이 아니라 1줄. 아래선은 상세 요약 카드·지도·사업자정보의 윗선 역할
   (그 요소들은 자체 윗선이 없음). 탭 a 의 윗선은 컨테이너가 대신하므로 계속 0. */
.animal_tab, body.dark .animal_tab{ border-top:1px solid var(--ctl-border,#E2E2E6) !important; border-bottom:1px solid var(--ctl-border,#E2E2E6) !important; margin-top:-1px; position:relative; z-index:1; }
.animal_tab a, body.dark .animal_tab a, .animal_tab a.on, body.dark .animal_tab a.on{ border-top:0 !important; }

/* ═══ [2026-08-30 사장님 C안 「카드 탭」 — 시안 md/mockup/tab_260830/index.html] 상세 탭(#animal_tab) 이 정보표·아래 표와 한 덩어리로 붙어
   "표의 한 줄"처럼 읽힘(sample/햇.png). 수리: ① 정보표를 밑선으로 닫고 ② 탭은 정보표에 붙임(14px 여백은 사장님 반려 → -1px 겹침) ③ 탭 바 = 표 머리 톤(연회색) 바탕,
   ④ 활성 탭 = 컨테이너 바탕(흰/다크 secondary) + 코랄 3px 윗선 + 밑선 끊어 아래 내용판과 한 몸(브라우저 탭 문법).
   각진 모서리·3등분·탭 사이 1px 은 8/29 확정대로 유지. 🔴 위 규칙들이 !important 라 여기도 !important, 이 블록은 그 뒤에 있어야 이긴다.
   🔴 8/29 의 "탭 위선을 정보표 밑선과 같은 픽셀에 겹침(margin-top:-1px)" 은 이 안으로 폐기(여백으로 분리). 🔴 cache_version. */
.detail_info_table_wrap > table:first-of-type{ border-bottom:1px solid var(--ctl-border,#E2E2E6); }
.animal_tab, body.dark .animal_tab{ margin-top:-1px !important;   /* [2026-08-30 사장님 엉뚱.png] 정보표(가격 행)와 탭 사이 14px 여백 제거 — 탭 윗선을 정보표 밑선과 같은 픽셀에 겹쳐 1줄(8/29 방식 복귀) */ background:var(--color-bg-white,#fff); }   /* [2026-09-03 사장님 C안=네이버 플레이스 탭 문법, 시안 md/mockup/detail_tabs_260903] 회색 띠 폐지 → 흰 바탕, 활성은 빨간 밑줄 3px. (A안 한 단계 진한 회색은 "버튼으로 안 읽힘"으로 교체) */
body.dark .animal_tab{ background:var(--dark-bg-secondary,#211E1B); }   /* C안: 다크도 내용판과 같은 면 */
.animal_tab a, body.dark .animal_tab a{ background:transparent !important; border:0 !important; border-right:0 !important; height:46px; line-height:46px; margin:0 !important; position:relative; color:var(--ctl-fg,#777) !important; }   /* C안: 칸 세로선 없음, 비활성 글자 --ctl-fg */
.animal_tab a:last-child, body.dark .animal_tab a:last-child{ border-right:0 !important; }
.animal_tab a:hover, body.dark .animal_tab a:hover{ background:transparent !important; color:var(--color-hover) !important; }   /* C안: hover 는 글자만 진하게 */   /* 2026-09-14 hover 통일: 탭 hover 글자 = 공통 hover 색(검정 → 라이트 빨강·다크 노랑) */
.animal_tab a.on, body.dark .animal_tab a.on, .animal_tab a.on:hover, body.dark .animal_tab a.on:hover{ background:var(--color-bg-white,#fff) !important; color:var(--tint-coral-fg,#B3331E) !important; font-weight:700 !important; box-shadow:inset 0 -3px 0 var(--state-ongoing,#D8432A); }   /* C안: 윗선 → 밑줄 */
body.dark .animal_tab a.on, body.dark .animal_tab a.on:hover{ background:var(--dark-bg-secondary,#211E1B) !important; }
.animal_tab a.on::after{ display:none; content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--color-bg-white,#fff); }   /* 활성 탭 밑선 끊기 → 아래 내용판과 연결 */
body.dark .animal_tab a.on::after{ background:var(--dark-bg-secondary,#211E1B); }

/* ---------- 상세 정보표 업종별 행 (animal/_detail_biz_rows.php, 2026-08-29) ----------
   요약 카드 폐지 → 특징 칩(.feat-tag)·요금 3상자(.li-info .li-grid .li-cell) 를 표 셀 안에.
   🔴 색·굵기·틴트는 search_list_row.css 의 .li-cell 규칙(리스트 카드)을 그대로 쓴다 — 사장님 sample/리스트.png "리스트 톤과 통일".
   여기선 표 안 배치만: 리스트행(.hover_img_wrap …)과 같은 inline-flex·min-width 104·padding 8/14 */
.detail_info_table_wrap .li-info.dib-info{ padding:0; margin:0; }
.detail_info_table_wrap .dib-tags{ margin:0; }
.detail_info_table_wrap .li-info.dib-info .li-grid{ display:inline-flex; width:auto; max-width:100%; gap:6px; margin:0; vertical-align:middle; }
/* [사장님 2026-08-29 "요금 행이 넓다"] 표 안에서는 세로 2줄 상자(행 97px=다른 행의 2배) 대신 **가로 한 줄 상자**「소형견 25,000원~」— 행 높이가 다른 행(48)과 맞는다. 색·틴트는 리스트 규칙 그대로 */
.detail_info_table_wrap .li-info.dib-info .li-cell{ flex:0 0 auto; min-width:0; flex-direction:row; gap:6px; padding:4px 12px; }
.detail_info_table_wrap .li-info.dib-info .li-lbl{ font-size:13.5px; }

/* (상세 정보표 오른쪽 사진 슬라이드 .pcs-* 는 animal/inc_animal_info.php 안 인라인 <style> — 조각 전용이라 번들 캐시(cache_version)와 무관하게 즉시 적용, 2026-08-30) */

/* [2026-08-30 사장님] 현재 탭은 눌리지 않게(상세정보에서 상세정보 클릭 = 무의미한 새로고침) — 마크업의 onclick 차단과 짝 */
.animal_tab a.on, body.dark .animal_tab a.on, .animal_tab a.on:hover{ pointer-events:none; cursor:default; }

/* [2026-08-31 PA] 본문 머리 제목(.m-adt-title) — PC 업체 계열에서도 사용(모바일 정의는 m_animal.css) */
.m-adt-title{ padding:18px 18px 0; }
.m-adt-title h2{ margin:0; font-size:19px; font-weight:700; color:var(--color-text-primary,#111); letter-spacing:-.01em; line-height:1.35; }
.m-adt-title .meta{ font-size:12.5px; color:var(--color-text-lighter,#9a9a9a); margin-top:5px; }
body.dark .m-adt-title h2{ color:var(--dark-text-primary,#E8E3DD); }

/* [2026-08-31 사장님 스크롤.png — 상세 상단 세로 스크롤바 제거]
   search.css 의 `.search_container > *:not(#quick_menu_btn){overflow-x:hidden}` (:not(#id) 라 ID급 특이도) 이
   상세 상단 래퍼(.detail_info_table_wrap)에 걸리면 세로 overflow 가 auto 로 계산되어(스펙: visible+hidden→auto),
   브라우저 줌·서브픽셀 오차로 1px 만 넘쳐도 히어로 옆에 세로 스크롤바가 떴다(상세정보·분양 리스트·찾아가는 길 전 탭 공통).
   → 상세 상단 래퍼만 visible 로 원복. 🔴 !important 필수(:not(#) 특이도 대응) */
.search_container > .detail_info_table_wrap, .detail_info_table_wrap{ overflow: visible !important; }


/* ── /css/mypage.css ── */
/* 2026-08-07 — 아래 어딘가의 background url() 중 '서버에 파일이 없는' 것을 none 으로 바꿨다.
   (선언째 지우면 같이 붙어 있던 padding/height 값까지 날아가 레이아웃이 바뀐다)
   지운 게 아니라 안 그리던 것을 명시했을 뿐이라 화면은 그대로고, 404 요청만 사라진다. */
.my_sub_title{color:var(--color-link-hover); font-size:19px; font-weight:500;}
.my_top_btn{position:absolute; top:-15px;right:0px;}
.my_top_btn_area > div{position:absolute; top:0; right:5px;}
.my_top_btn_area > div img{vertical-align:middle}
.my_top_btn_area > div span{color:var(--color-error)}
.btn_del{background:none no-repeat; border:0; height:13px; width:13px; display:inline-block;}   /* 자홍 100% → 브랜드 강조 */

.apply{width:118px;margin:auto;display:block;}/*font-weight:600*/
.option03 tr:first-child th:first-child{border-left:none;}

.btn_area{text-align:center;/* margin-top:30px; */}

.option05{width:100%;border-top:1px solid var(--color-brown);}
.option05 th{height:40px;border-bottom:1px solid #eee;text-align:left;}
.option05 td{border-bottom:1px solid #eee;padding:5px 0 2.5px 0;}
.option05 td.name span{font-size:11px;color:#999;}

h4.point span{font-size:11px;color:#363636;}
.option05 td.saving{}
.option05 td.saving span{}
.btn_main{text-align:center;margin-top:30px;}


/* ==================== 마이커뮤니티 프로필 박스 ==================== */
.mycommunity_box01{
	display: flex;
	align-items: flex-start;
	gap: 30px;
	border: 1px solid var(--color-border);
	border-top: 2px solid var(--color-brown);
	border-radius: 0 0 8px 8px;
	padding: 25px;
	margin-top: 15px;
	background: #fff;
}

/* 프로필 이미지 래퍼 */
.mycommunity_box01 .member_img_wrap{
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mycommunity_box01 .member_img{
	width: 150px;
	height: 150px;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mycommunity_box01 .member_img.has_img{
	background: #f5f5f5;
}

.mycommunity_box01 .member_img.no_img{
	flex-direction: column;
	background: var(--color-bg-light);
	border: 2px dashed #ccc;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
}

.mycommunity_box01 .member_img.no_img:hover{
	background: var(--color-border-light);
	border-color: #999;
}

.mycommunity_box01 .member_img.no_img i{
	font-size: 2.5em;
	color: #999;
	transition: color 0.2s ease;
}

.mycommunity_box01 .member_img.no_img:hover i{
	color: #666;
}

.mycommunity_box01 .member_img.no_img .profile_guide{
	margin-top: 10px;
	font-size: 12px;
	color: #888;
}

.mycommunity_box01 .member_img.no_img:hover .profile_guide{
	color: #666;
}

/* 타인이 볼 때 (링크 없음) - 기존 박스 유지, 아이콘 배경만 투명 */
.mycommunity_box01 .member_img.no_img.no_link{
	border: none;
	cursor: default;
}

.mycommunity_box01 .member_img.no_img.no_link:hover{
	background: var(--color-bg-light);
	border: none;
}

.mycommunity_box01 .member_img.no_img.no_link i{
	font-size: 5em;
	color: #ccc;
	background: transparent;
	-webkit-background-clip: unset;
	-webkit-text-fill-color: unset;
}

.mycommunity_box01 .member_img.no_img.no_link:hover i{
	color: #ccc;
}

.mycommunity_box01 .member_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.member_info{
	flex: 1;
	min-width: 0;
}

.member_info table{
	width: 100%;
	border-collapse: collapse;
}

.member_info table td{
	padding: 8px 10px;
	font-size: 14px;
	color: #555;
	vertical-align: middle;
}

.member_info table td:first-child{
	width: 90px;
	color: var(--color-link-hover);
	font-weight: 500;
}

.my_sub_title{
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 5px;
}

/* 프로필 정보 테이블 라벨 */
.member_info .info_label{
	color: var(--color-link-hover);
	font-weight: 500;
}

.member_info .info_label i{
	margin-right: 3px;
}

/* 정보수정 버튼 */
.member_info .btn_edit{
	display: inline-block;
	margin-left: 8px;
	padding: 3px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 12px;
	color: #666;
	background: var(--color-bg-lighter);
	transition: all 0.2s ease;
}

.member_info .btn_edit:hover{
	background: #eee;
	border-color: #999;
	color: #333;
}

.member_info .btn_edit i{
	margin-right: 3px;
}

/* 구분자 */
.member_info .divider{
	color: #ddd;
	margin: 0 5px;
}

/* 소개글 영역 */

/* 마이커뮤니티 탭 */
.orange_tab a{text-align:center; min-width:189.6px; background:#c8c8c8; display:inline-block; color:#fff; height:40px; line-height:40px; font-size:15px;}
.orange_tab a:hover{background:var(--ui-active, #E66B65);  color:var(--ui-active-text, #ffffff);}
.orange_tab a.on{background:var(--ui-active, #E66B65);  color:var(--ui-active-text, #ffffff);}


/*마이페이지 업체관리 탭(업체)*/


/* 마이커뮤니티 리스트 */
.mem_list{border-top:2px solid var(--color-brown); border-bottom:1px solid #eee;border-collapse:collapse;font-size:13px;}
.mem_list th{background:var(--color-bg-light);border-top:1px solid #eee; height:38px;}
.mem_list td{border-top:1px solid var(--color-border-light); text-align:center; height:38px;}
.mem_list td.title{text-align:left;padding-left:20px;}
.mem_list td.title a{font-weight:400; color:#2f2f2f;}
.mem_list td.title a:hover{color:var(--color-hover);}
.mem_list td a span.count{font-size:11px;color:var(--color-brown);margin-left:3px;}
.mem_list td span.name{position:relative;top:-4px;left:2px;}
.search_wrap{position:relative;}

/* 마이커뮤니티 뷰 */
.community_view{width:100%;padding-top:35px;}
.community_view th{height:40px;background:var(--color-bg-lighter);border-top:2px solid var(--color-brown);border-bottom:1px solid #eee;text-align:left;padding-left:10px;}
.community_view th p{border-right:1px solid #eee;}
.community_view td{height:35px;border-bottom:1px solid #eee;text-align:left;}
.community_view td img.icon_level{margin-left:10px;vertical-align:middle;}
.community_view td span.name{}

.community_view th.alignL{text-align:left;}
.community_view td span.count{color:var(--color-brown);font-weight:600;}
.community_view td.alignL a.answer{margin-left:10px;}
.community_view td.alignL span.level{margin-left:10px;} 
.community_view tr.top td p{border-right:1px solid #eee;text-align:left;padding-left:10px;}
.community_view th.bgth p{font-weight:normal;text-align:left;border-right:none;}

/*비밀번호 찾기 팝업*/
.pop_wrap{width:450px;}
.pop_wrap .title{width:450px;height:45px;background-color:var(--color-brown);}
.pop_wrap .title p{font-size:16px;color:#fff;font-weight:600;margin-left:20px;padding-top:13px;}
.pop_wrap .pop_con{position:relative;}
.pop_wrap .pop_con ul{width:356px;margin:auto;margin-top:50px;}
.pop_wrap .pop_con li input.input_txt{width:356px;height:45px;margin:auto;}
.pop_wrap .pop_con p{color:var(--color-brown);position:absolute;top:-32px;left:46px;}
.pop_wrap .pop_con li.now{margin-bottom:10px;}
.pop_wrap .pop_con li.new input{border-bottom:none;}
.pop_wrap .pop_con .btn{width:356px;margin:auto;margin-top:20px;}
.pop_wrap .pop_con .btn a{display:block;}
.pop_wrap select{width:358px;height:30px;}
.pop_wrap textarea{width:336px;height:91px;padding:10px;}


/*글쓰기 시 제출(등록,취소)버튼*/
.button_submit{
	display:inline-block;
	width: 160px;
	height:50px;
	line-height:50px;
	text-align:center;
	color:var(--ui-action-text, #ffffff);
	background-color:var(--ui-action, #D84841);
	font-weight:500;
	font-size:1.6em; 
	border:1.2px solid #DCDCDC;
}
.button_cancel{
	display:inline-block;
	width: 160px;
	height:50px;
	line-height:50px;
	text-align:center;
	color:var(--color-secondary, #2B5F9E); /* 구 블루 #5E7EC5 → 2차색 */
	background-color:#fff;
	font-weight:500; 
	font-size:1.6em; 
	border:1.2px solid #DCDCDC; 
}

/*다크모드 - 글쓰기 시 제출(등록,취소)버튼*/
body.dark .button_submit{
	background-color: var(--dark-ranking-color) !important;
	color: #eee !important;
	border-color: #666 !important;
}
body.dark .button_cancel{
	background-color: var(--dark-border-secondary) !important;
	border-color: #666 !important;
}
body.dark .button_cancel span{
	color: #eee !important;
}


/*========================================
  다크모드 Border 및 배경 적용
========================================*/

body.dark .option05 th, body.dark .option05 td{
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .mycommunity_box01{
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-primary);
}

body.dark .mycommunity_box01 .member_img.has_img{
	background-color: var(--dark-bg-secondary);
}

body.dark .mycommunity_box01 .member_img.no_img{
	background-color: var(--dark-bg-secondary);
	border-color: #555;
}

body.dark .mycommunity_box01 .member_img.no_img:hover{
	background-color: var(--dark-bg-tertiary, #2A2A2A);
	border-color: #777;
}

body.dark .mycommunity_box01 .member_img.no_img i{
	color: #666;
}

body.dark .mycommunity_box01 .member_img.no_img:hover i{
	color: #999;
}

body.dark .mycommunity_box01 .member_img.no_img .profile_guide{
	color: #666;
}

body.dark .mycommunity_box01 .member_img.no_img:hover .profile_guide{
	color: #888;
}

/* 다크모드 - 타인이 볼 때 - 기존 박스 유지, 아이콘 배경만 투명 */
body.dark .mycommunity_box01 .member_img.no_img.no_link{
	border: none;
}

body.dark .mycommunity_box01 .member_img.no_img.no_link:hover{
	border: none;
}

body.dark .mycommunity_box01 .member_img.no_img.no_link i{
	color: #666;
	background: transparent;
	-webkit-background-clip: unset;
	-webkit-text-fill-color: unset;
}

body.dark .mycommunity_box01 .member_img.no_img.no_link:hover i{
	color: #666;
}

body.dark .member_info table td{
	color: var(--dark-text-secondary, #ACACAC);
}

body.dark .member_info table td:first-child{
	color: var(--color-text-lighter, #9a9a9a);
}

body.dark .my_sub_title{
	color: var(--dark-text-primary, #ECECEC);
}

body.dark .member_info .info_label{
	color: var(--color-text-lighter, #9a9a9a);
}

body.dark .member_info .btn_edit{
	background: var(--dark-bg-secondary);
	border-color: var(--dark-border-secondary);
	color: var(--dark-text-secondary);
}

body.dark .member_info .btn_edit:hover{
	background: var(--dark-bg-tertiary, #2A2A2A);
	color: var(--dark-text-primary);
}

body.dark .member_info .divider{
	color: #9A938B;   /* 2026-09-11 구분선이 바탕과 1.9:1 로 안 보이던 것 */
}

body.dark .mem_list{
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .mem_list th{
	background-color: var(--dark-bg-secondary);
	border-top-color: var(--dark-border-secondary);
}

body.dark .mem_list td.title a{
	color: var(--dark-text-primary, #ECECEC);
}

body.dark .mem_list td.title a:hover{
	color: var(--color-hover);
}

body.dark .community_view th{
	background-color: var(--dark-bg-secondary);
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .community_view th p, body.dark .community_view tr.top td p{
	border-right-color: var(--dark-border-secondary);
}

body.dark .community_view td{
	border-bottom-color: var(--dark-border-secondary);
}

/* 내가 쓴 댓글 리스트 스타일 */
.myreply_list{
	border-top: 1px solid #d7d7d7;
}

.myreply_empty{
	padding: 30px;
	text-align: center;
	color: #888;
}

a.myreply_item{
	display: block;
	padding: 15px 15px;
	border-bottom: 1px solid #d7d7d7;
	background-color: #fff;
	text-decoration: none;
	cursor: pointer;
	font-weight: 400;
	color: inherit;
}

a.myreply_item:hover{
	background-color: var(--color-bg-lighter);
}

div.myreply_item.deleted{
	display: block;
	padding: 15px 15px;
	border-bottom: 1px solid #d7d7d7;
	background-color: var(--color-bg-lighter);
	cursor: default;
}

div.myreply_item.deleted .myreply_content, div.myreply_item.deleted .myreply_date, div.myreply_item.deleted .myreply_title{
	color: #999;
	font-weight: 400;
}

.myreply_content{
	font-size: 14px;
	color: var(--myreply-content-color, #333);
	line-height: 1.5;
	word-break: break-word;
}

.myreply_date{
	font-size: 12px;
	color: var(--myreply-date-color, #888);
	margin-top: 2px;
}

.myreply_title{
	margin-top: 6px;
	font-size: 13px;
	color: var(--myreply-title-color, #878787);
}

a.myreply_item:hover .myreply_content{
	color: var(--myreply-content-hover, var(--color-hover));   /* 2026-10-22 닫는 괄호 누락 수리 — 이 줄부터 파일 끝까지 규칙이 통째로 무시되고 있었다 */
}

a.myreply_item:hover .myreply_date{
	color: var(--myreply-date-hover, var(--color-hover));
}

a.myreply_item:hover .myreply_title{
	color: var(--myreply-title-hover, var(--color-hover));
}

.myreply_title .count{
	color: var(--color-link-hover);
	font-weight: 500;
}

/* 다크모드 - 내가 쓴 댓글 리스트 */
body.dark .myreply_list{
	border-top-color: var(--dark-border-secondary);
}

body.dark a.myreply_item{
	border-bottom-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary, #232323);
}

body.dark a.myreply_item:hover{
	background-color: var(--dark-bg-tertiary, #2A2A2A);
}

body.dark div.myreply_item.deleted{
	border-bottom-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-tertiary, #2A2A2A);
}

body.dark div.myreply_item.deleted .myreply_content, body.dark div.myreply_item.deleted .myreply_date, body.dark div.myreply_item.deleted .myreply_title{
	color: #666;
	font-weight: 400;
}

body.dark .myreply_content{
	--myreply-content-color: var(--dark-text-primary, #ECECEC);
	--myreply-content-hover: var(--color-border-medium, #CCC);
}

body.dark .myreply_date{
	--myreply-date-color: var(--dark-text-secondary, #ACACAC);
	--myreply-date-hover: var(--color-border-medium, #CCC);
}

body.dark .myreply_title{
	--myreply-title-color: var(--dark-text-secondary, #ACACAC);
	--myreply-title-hover: var(--color-border-medium, #CCC);
}

body.dark .myreply_title .count{
	color: var(--color-text-lighter, #9a9a9a);
}

/* selec_brand 배경 */

/* 게시 버튼 */
body.dark .btn_publish{
	background-color: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/* mem_list td border */
body.dark .mem_list td{
	border-top-color: var(--dark-border-secondary) !important;
}

/* option03 border */
body.dark .option03{
	border-top-color: var(--dark-border-secondary);
	border-bottom-color: var(--dark-border-secondary);
}

/* option05/06 border */
body.dark .option05 th, body.dark .option05 td{
	border-bottom-color: var(--dark-border-secondary);
}

/* line_right border */

/* final_info text border */

/* ==================== 마이커뮤니티 문법 통일 (2026-09-13 사장님 "radius 주고 애니멀나라 문법에 맞게") ====================
   검색 페이지(파일탭 .tab-toggle + 12px 라운드 패널 .sr-mod, 연회색 바탕)와 같은 문법. 대상 = mycommunity_{main,myreply,has_reply,best}_list + member_block_list
   (공용 머리 mypage/_mycommunity_head.php + 각 페이지의 <div class="an-mc-panel">). 🔴 범위를 .an-mc-panel 이 있는 페이지로 한정 — 다른 마이페이지 화면(.orange_tab_mem 을 쓰는 업체관리 등)은 그대로.
   시안 md/mockup/find5_260913/mc_grammar.html */
body:has(#wrap .an-mc-panel){ background:var(--color-bg-lighter,#F5F5F7); }
body.dark:has(#wrap .an-mc-panel){ background:var(--dark-bg-primary,#1A1816); }
#wrap .container_community:has(.an-mc-panel){ background:transparent !important; }
#wrap .container_community:has(.an-mc-panel) .contents_area .contents{ padding-top:0; }
/* 제목: 붉은 밑줄 없이 작은 머리글 */
#wrap .container_community:has(.an-mc-panel) .my_sub_title{ display:block; font-size:17px; font-weight:700; color:var(--color-text-primary,#1F1A17); margin:20px 0 10px; padding:0; border:0; }
#wrap .container_community:has(.an-mc-panel) .my_sub_title::after, #wrap .container_community:has(.an-mc-panel) .my_sub_title::before{ display:none; }
/* 프로필 상자: 12px 라운드 카드(검색 패널과 같은 테두리 토큰), 갈색 윗줄 제거 */
#wrap .container_community:has(.an-mc-panel) .mycommunity_box01{ border:1px solid var(--ui-tab-inactive-border,#E3E6EA) !important; border-radius:12px !important; padding:22px 26px; margin-top:0; background:var(--color-bg-white,#fff); gap:26px; }
#wrap .container_community:has(.an-mc-panel) .mycommunity_box01 .member_img{ border-radius:10px; }
#wrap .container_community:has(.an-mc-panel) .mycommunity_box01 table td{ padding:5px 8px; font-size:13.5px; }
#wrap .container_community:has(.an-mc-panel) .mycommunity_box01 .info_label{ color:var(--color-text-secondary,#5E554F); font-weight:500; white-space:nowrap; }
#wrap .container_community:has(.an-mc-panel) .mycommunity_box01 .info_label i{ display:none; }
/* 탭: 검색 페이지 파일탭(.tab-toggle) 문법 — 위 11px 라운드, 선택 = 관리자 연한 활성색·빨간 글자, 아래 패널과 이어짐 */
#wrap .container_community:has(.an-mc-panel) .orange_tab_mem{ display:inline-flex; gap:5px; align-items:flex-end; margin:22px 0 0 !important; position:relative; z-index:2; }
#wrap .container_community:has(.an-mc-panel) .orange_tab_mem a{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:132px; height:46px; line-height:1; padding:0 26px; font-size:15px; font-weight:600; color:var(--ui-tab-inactive-text,#6A727D); background:var(--ui-tab-inactive-bg,#F7F8FA); border:1px solid var(--ui-tab-inactive-border,#E3E6EA); border-bottom:0; border-radius:11px 11px 0 0; margin-bottom:-1px; text-decoration:none; transition:background-color .15s,color .15s; }
#wrap .container_community:has(.an-mc-panel) .orange_tab_mem a:hover{ background:var(--ui-tab-inactive-hover-bg,#EEF0F3); color:var(--ui-tab-inactive-hover-text,#4B5563); }
#wrap .container_community:has(.an-mc-panel) .orange_tab_mem a.on{ background:var(--ui-active-soft-bg,#fff); color:var(--ui-active-soft-text,#C93934); font-weight:700; border-bottom:1px solid var(--ui-active-soft-bg,#fff); }
#wrap .container_community:has(.an-mc-panel) .orange_tab_mem a i{ font-size:13px; }
/* 탭 아래 패널: 왼쪽 위만 각지게(탭이 붙는 자리), 나머지 12px */
#wrap .an-mc-panel{ border:1px solid var(--ui-tab-inactive-border,#E3E6EA); border-radius:0 12px 12px 12px; background:var(--color-bg-white,#fff); padding:14px 20px 22px; position:relative; z-index:1; }
#wrap .an-mc-panel form[name="frm_order"]{ margin:0 0 12px !important; display:flex; justify-content:flex-end; }
#wrap .an-mc-panel .search_area{ float:none; padding:0; }
/* 표: 갈색 윗선 대신 머리 회색 띠 + 둥근 모서리, 줄 44px, hover 연회색 */
#wrap .an-mc-panel .mem_list{ width:100%; border-top:0 !important; border-bottom:1px solid var(--color-border-light,#EEE); font-size:13.5px; border-radius:10px; overflow:hidden; }
#wrap .an-mc-panel .mem_list th{ height:42px; background:var(--color-bg-light,#F7F8FA); border-top:0; color:var(--color-text-secondary,#5E554F); font-weight:600; font-size:13px; }
#wrap .an-mc-panel .mem_list th:first-child{ border-top-left-radius:10px; } #wrap .an-mc-panel .mem_list th:last-child{ border-top-right-radius:10px; }
#wrap .an-mc-panel .mem_list td{ height:44px; border-top:1px solid var(--color-border-light,#EEE); }
#wrap .an-mc-panel .mem_list tbody tr:hover td{ background:color-mix(in srgb, var(--color-bg-light,#F7F8FA) 60%, transparent); }
#wrap .an-mc-panel .mem_list td.title{ padding-left:14px; }
#wrap .an-mc-panel .mem_list td.title a{ color:var(--color-text-primary,#1F1A17); font-size:14px; }
#wrap .an-mc-panel .mem_list td.title a:hover{ color:var(--color-hover); }
/* 삭제 버튼 = 사이트 보조 버튼 문법 */
#wrap .an-mc-panel .txt_btn{ display:inline-flex; align-items:center; height:32px; padding:0 14px; border:1px solid var(--color-border,#D8D8DC); border-radius:8px; background:var(--color-bg-white,#fff); color:var(--color-text-primary,#1F1A17); font-size:13px; font-weight:600; }
#wrap .an-mc-panel .txt_btn:hover{ background:var(--color-bg-light,#F7F8FA); }
/* 페이징·검색 폼 */
#wrap .an-mc-panel .paging, #wrap .an-mc-panel .pagination{ margin-top:14px; }
#wrap .an-mc-panel form[name="frm_search"] > div{ padding-bottom:4px !important; }
#wrap .an-mc-panel form[name="frm_search"] input.text{ height:36px; border:1px solid var(--color-border,#D8D8DC); border-radius:8px; padding:0 10px !important; }
#wrap .an-mc-panel form[name="frm_search"] .search_frm_button{ height:36px; border-radius:8px; }
/* 차단한 회원 패널 안 목록 */
#wrap .an-mc-panel .mbk-wrap{ padding:4px 0 8px; }
#wrap .an-mc-panel .mbk-list li{ padding:12px 8px; }
#wrap .an-mc-panel .mbk-head{ margin-top:4px; }
#wrap .an-mc-panel .mbk-head .cnt b{ color:var(--color-link-hover,#C93934); }
/* 하단 배너와 간격 */
#wrap .an-mc-panel + *{ margin-top:22px; }
/* 다크 — 검색 페이지 다크 토큰과 동일 */
body.dark #wrap .container_community:has(.an-mc-panel) .mycommunity_box01, body.dark #wrap .an-mc-panel{ background:var(--dark-bg-secondary,#232323); border-color:var(--dark-border-primary,#3D3D3D); }
body.dark #wrap .container_community:has(.an-mc-panel) .orange_tab_mem a{ background:var(--ui-tab-bg,#423B39); border-color:var(--search-option-border,#3A3432); color:var(--search-input-text,#ECECEC); }
body.dark #wrap .container_community:has(.an-mc-panel) .orange_tab_mem a.on{ background:var(--dark-bg-secondary,#232323); border-bottom-color:var(--dark-bg-secondary,#232323); color:var(--color-text-emphasis,#F2C25E); }
body.dark #wrap .an-mc-panel .mem_list th{ background:var(--dark-bg-tertiary,#2C2C2C); color:var(--dark-text-secondary,#ADA59D); }
body.dark #wrap .an-mc-panel .mem_list td{ border-top-color:var(--dark-border-primary,#3D3D3D); }
body.dark #wrap .container_community:has(.an-mc-panel) .my_sub_title{ color:var(--dark-text-primary,#EFE8E1); }

/* ==================== 마이커뮤니티 블라인드·관리자 삭제 행 (include/post_state.php, 2026-09-13) ==================== */
.an-mc-panel .title01.an-st-title{ cursor:default; }
.myreply_content.is-st{ color:var(--color-text-tertiary,#8A837D); }
.myreply_content.is-st .an-stmark{ margin-right:2px; }
body.dark .myreply_content.is-st{ color:#8A817B; }


/* ── /css/form-card.css ── */
/* ══════════════════════════════════════
   공통 폼 카드 스타일
   manage_company_info.php + register 공유
   ══════════════════════════════════════ */

/* ── 카드 ── */
.form-card {
	background: #F9F8F7; border: 1px solid #eeede9;
	border-radius: 12px; padding: 20px 24px; box-shadow: none;
	margin-bottom: 16px;
}

/* ── 섹션 제목 ── */
.form-card .card-section-title {
	font-size: 16px; font-weight: 800; color: #2b2f36;   /* 시안5: 악센트 없이 크고 진하게(또렷) */
	letter-spacing: -0.01em;
	padding: 0 0 12px; margin: 0;
	border-bottom: none;
	background: transparent;
}

/* ── 행 (div 레이아웃 - manage_company_info.php) ── */
.form-card .form-row {
	display: flex; align-items: flex-start;
	padding: 10px 0; border-bottom: 1px solid #f5f5f5;
}
.form-card .form-row:last-child { border-bottom: none; }

/* ── 라벨 ── */
.form-card .form-label {
	flex: 0 0 110px; font-size: 13px; font-weight: 600;
	color: #555; padding-top: 7px; line-height: 1.5;
}
.form-card .form-label .req { color: var(--color-text-emphasis, #D8432A); margin-right: 3px; font-size: 12px; }
.form-card .form-label .hint { display: block; font-size: 11px; font-weight: 400; color: var(--color-tertiary, #277A4C); margin-top: 2px; }

/* ── 입력 영역 ── */
.form-card .form-control { flex: 1; min-width: 0; }

/* ── 공통 input/select ── */
.form-card .form-control input[type="text"],
.form-card .form-control input[type="email"],
.form-card .form-control select,
.form-card input[type="text"],
.form-card select {
	width: 100%; box-sizing: border-box;
	border: 1px solid #d5d5d5; border-radius: 8px;
	padding: 8px 12px; font-size: 13px; outline: none;
	transition: border-color 0.2s; font-family: inherit;
}
.form-card .form-control input[type="text"]:focus,
.form-card .form-control input[type="email"]:focus,
.form-card .form-control select:focus,
.form-card input[type="text"]:focus,
.form-card select:focus {
	border-color: var(--color-brand-accent, #d34f53);
	box-shadow: 0 0 0 3px rgba(211,79,83,0.08);
}
.form-card .form-control input[readonly],
.form-card input[readonly] {
	background: #f8f8f8; color: #999; cursor: not-allowed;
}
.form-card .form-control label { font-size: 12px; color: #666; margin-left: 4px; cursor: pointer; }
.form-card .checkbox_style { display: inline-flex; align-items: center; margin-left: 0; }


/* ══════════════════════════════════════
   ragistration 테이블
   ══════════════════════════════════════ */

/* JS 분리 전 숨김 → 변환 후 표시 (덜컹거림 방지) */
.ragistration:not(.in-card) {
	visibility: hidden;
}

/* 단독 테이블 (JS 미적용 fallback) */
.ragistration {
	width: 100%;
	background: #F9F8F7;
	border: 1px solid #eeede9;
	border-radius: 12px;
	border-collapse: collapse;
	padding: 0;
	margin-bottom: 16px;
	overflow: hidden;
}

/* form-card 안의 테이블: 카드가 감싸므로 전부 제거, 카드 패딩에 맡김 */
.form-card .ragistration,
.ragistration.in-card {
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 0;
	width: 100%;
	overflow: visible;
	table-layout: fixed !important;
}

/* th: 고정 110px, td: 나머지 전부 */
.form-card .ragistration th,
.ragistration.in-card th,
.ragistration tr.checkbox_style > th {
	border-bottom: 1px solid #f0efeb;
	text-align: left;
	padding: 10px 12px 10px 0 !important;
	font-size: 13px !important; font-weight: 600 !important;
	color: #555 !important;
	vertical-align: middle !important;
	width: 110px !important;
	position: static !important;
	line-height: 1.5 !important;
}
.form-card .ragistration td,
.ragistration.in-card td,
.ragistration tr.checkbox_style > td {
	border-bottom: 1px solid #f0efeb;
	padding: 10px 0 10px 0 !important;
	vertical-align: middle;
	font-size: 13px;
	white-space: normal;
	word-break: break-word;
}
.form-card .ragistration tr:last-child th,
.form-card .ragistration tr:last-child td,
.ragistration.in-card tr:last-child th,
.ragistration.in-card tr:last-child td {
	border-bottom: none;
}

/* 🔴 행 구분선을 셀(td/th)이 아니라 행(tr)에 → colspan 일부만 제거돼 행별 셀 개수가
   달라도(첫행 colspan유지=여러칸/성별·희망행=2칸) 선이 오른쪽 끝까지 항상 꽉 채워짐. (border.png 수정) */
.form-card .ragistration th, .ragistration.in-card th,
.form-card .ragistration td, .ragistration.in-card td { border-bottom: none !important; }
.form-card .ragistration tr, .ragistration.in-card tr { border-bottom: 1px solid #f0efeb; }
.form-card .ragistration tr:last-child, .ragistration.in-card tr:last-child { border-bottom: none; }
body.dark .form-card .ragistration tr, body.dark .ragistration.in-card tr { border-bottom-color: var(--dark-border-secondary, #4A4A4A); }

/* checkbox_style 행: th/td 모두 동일 패딩 */
tr:has(> td.checkbox_style) > th,
tr:has(> td.checkbox_style) > td {
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}
/* in-card 내 checkbox_style td 명시적 패딩 (has 미지원 브라우저 대응) */
.ragistration.in-card td.checkbox_style,
.form-card .ragistration td.checkbox_style {
	padding: 14px 0 !important;
}
.ragistration td.checkbox_style > label:not([for]) {
	padding-left: 0 !important;
	margin-right: 12px;
}

/* 에디터(상세설명) td — 패딩 제거 */
.form-card .ragistration td.textview,
.ragistration.in-card td.textview {
	padding: 0 !important;
}
/* 에디터(상세설명) 배경 — 라이트/다크 자동 전환 */
.form-card .textview,
.ragistration .textview {
	background: var(--color-bg-white) !important;
	border-radius: 8px;
	padding: 0 !important;
}
/* 에디터 iframe 아래 여백 제거 (inline→block 전환) */
.textview iframe,
.ragistration .textview iframe {
	display: block;
	margin: 0;
	padding: 0;
}

/* 단독 ragistration (카드 밖) th/td는 자체 패딩 */
.ragistration:not(.in-card) th {
	border-bottom: 1px solid #f0efeb;
	text-align: left;
	padding: 10px 24px;
	font-size: 13px; font-weight: 600;
	color: #555;
	vertical-align: middle;
	width: 110px;
}
.ragistration:not(.in-card) td {
	border-bottom: 1px solid #f0efeb;
	padding: 10px 24px;
	vertical-align: middle;
	font-size: 13px;
}
.ragistration:not(.in-card) tr:last-child th,
.ragistration:not(.in-card) tr:last-child td { border-bottom: none; }

.ragistration td span.fb { font-weight: 600; margin-left: 10px; }
.ragistration td label.ml { margin-left: 10px; }

/* ragistration input 통일 */
.ragistration input[type="text"],
.ragistration select {
	border: 1px solid #d5d5d5; border-radius: 8px;
	padding: 8px 12px; font-size: 13px; outline: none;
	transition: border-color 0.2s; font-family: inherit;
	box-sizing: border-box;
}
.ragistration input[type="text"]:focus,
.ragistration select:focus {
	border-color: var(--color-brand-accent, #d34f53);
	box-shadow: 0 0 0 3px rgba(211,79,83,0.08);
}
.ragistration input[readonly] {
	background: #f8f8f8; color: #999; cursor: not-allowed;
}

/* section-title-row (JS 분리 전 fallback) */
.ragistration .section-title-row td {
	background: transparent; border: none;
	padding: 20px 24px 8px;
}


/* ══════════════════════════════════════
   다크모드
   ══════════════════════════════════════ */
body.dark .form-card,
body.dark .ragistration {
	background: var(--dark-bg-secondary, #232323);
	border-color: var(--dark-border-secondary, #4A4A4A);
}
body.dark .form-card .ragistration,
body.dark .ragistration.in-card {
	background: transparent;
	border: none;
}
body.dark .form-card .card-section-title {
	color: var(--dark-text-primary, #ECECEC);
}
body.dark .form-card .form-row { border-bottom-color: var(--dark-border-secondary, #4A4A4A); }
body.dark .form-card .form-label { color: var(--dark-text-secondary); }

html.dark .form-card .form-control input[type="text"],
html.dark .form-card .form-control input[type="email"],
html.dark .form-card .form-control select,
html.dark .form-card input[type="text"],
html.dark .form-card select,
html.dark .ragistration input[type="text"],
html.dark .ragistration select,
body.dark .form-card .form-control input[type="text"],
body.dark .form-card .form-control input[type="email"],
body.dark .form-card .form-control select,
body.dark .form-card input[type="text"],
body.dark .form-card select,
body.dark .ragistration input[type="text"],
body.dark .ragistration select {
	background: var(--dark-bg-tertiary); border-color: var(--dark-border-secondary); color: var(--dark-text-primary);
}
html.dark .form-card .form-control input[readonly],
html.dark .form-card input[readonly],
html.dark .ragistration input[readonly],
body.dark .form-card .form-control input[readonly],
body.dark .form-card input[readonly],
body.dark .ragistration input[readonly] {
	background: var(--dark-bg-primary); color: var(--dark-text-tertiary);
}

/* ragistration th — search_option th와 동일 */
body.dark .ragistration th {
	background-color: var(--dark-bg-secondary, #232323) !important;
	color: var(--dark-text-primary) !important;
	border-bottom-color: var(--dark-border-secondary) !important;
}
/* ragistration td — search_option td와 동일 */
body.dark .ragistration td {
	background-color: var(--dark-bg-secondary, #232323) !important;
	color: var(--dark-text-primary) !important;
	border-bottom-color: var(--dark-border-secondary) !important;
}
/* in-card 안은 카드가 배경 처리 → 셀 배경 투명 */
body.dark .form-card .ragistration th,
body.dark .form-card .ragistration td,
body.dark .ragistration.in-card th,
body.dark .ragistration.in-card td {
	background-color: transparent !important;
}
/* td 안 텍스트, label, span, a */
body.dark .ragistration td label,
body.dark .ragistration td span,
body.dark .ragistration td a {
	color: var(--dark-text-primary);
}
/* textarea */
body.dark .ragistration textarea {
	background: var(--dark-bg-tertiary); border-color: var(--dark-border-secondary); color: var(--dark-text-primary);
}
/* disabled input */
html.dark .ragistration input:disabled,
body.dark .ragistration input:disabled {
	background: var(--dark-bg-hover, #333333) !important; color: var(--color-text-quaternary, #888) !important;
	border-color: var(--color-text-tertiary, #666) !important;
}
/* 주소검색 버튼 */
body.dark #addr_btn {
	background-color: var(--color-brown, #E66B65);
}
/* section-title fallback */
body.dark .ragistration .section-title-row td {
	background: transparent !important;
}
body.dark .ragistration .section-title-label {
	color: var(--dark-text-tertiary, #8C8C8C);
}


/* ── /css/register.css ── */
/*동물, 업체 등록 시 상단 버튼(등록대기 리스트, 게재중인 리스트 버튼)*/

/* ragistration / form-card 스타일은 css/form-card.css로 이동 */

/*등록 시 주소검색 버튼*/
#addr_btn{
	display:inline-block;
	margin-top:1px;
	padding:5px 10px;
	font-size:13px;
	text-align:center;
	background-color:var(--color-brown);
	color:#fdfdfd;
	border-radius: 6px;
}


/* 결제관리 */

/* ══════════════════════════════════════
   등록글관리 상태 필터(전체/등록대기/등록완료)
   - 각 *_list.php 인라인 .status-tab 은 비활성 배경이 회색이라
     lnb_mypage_biz 회색 컨테이너 위에서 묻혀 안 보였음(btn9.png).
   - #wrap 특이성으로 인라인을 이겨 전 카테고리(10개) 한 번에 교정.
     비활성=흰 칩(또렷) / 활성=브랜드색. 다크는 카드톤 칩.
   ══════════════════════════════════════ */
#wrap .status-filter-tabs{ gap: 8px; margin: 2px 0; }
/* 필터 줄 위아래 여백을 균형있게(인라인 padding:10px 0 → 조금 위로 붙이고 아래 분리) */
#wrap .contents_area > div:has(> .status-filter-tabs){
	padding: 4px 0 16px !important;
	margin-top: 2px;
}
#wrap .status-tab{
	height: 36px; padding: 0 18px;
	background: #fff;                                         /* 회색 박스 위 → 흰 칩으로 또렷 */
	border: 1px solid var(--color-border-medium, #ccc);
	color: var(--color-text-tertiary, #666); font-weight: 600;
	box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#wrap .status-tab em{ color: var(--color-text-quaternary, #888); font-weight: 700; opacity: 1; }
#wrap .status-tab:not(.active):hover{ background: #f5f7fa; border-color: #c4c8d0; filter: none; }
#wrap .status-tab.active{
	background: var(--ui-active, #E66B65);
	border-color: var(--ui-active, #E66B65);
	color: var(--ui-active-text, #ffffff);
	box-shadow: 0 2px 6px rgba(216, 72, 65,.28);
}
#wrap .status-tab.active em{ color: #fff; opacity: .95; }
/* 다크: 어두운 박스 위 → 카드톤 칩 + 활성 보라(세그먼트와 통일) */
body.dark #wrap .status-tab{
	background: var(--dark-bg-secondary, #232323);
	border-color: var(--dark-border-secondary, #4A4A4A);
	color: var(--dark-text-primary, #ECECEC);
	box-shadow: none;
}
body.dark #wrap .status-tab em{ color: var(--dark-text-secondary, #ACACAC); }
body.dark #wrap .status-tab:not(.active):hover{ background: var(--dark-bg-hover, #333333); border-color: var(--color-text-tertiary, #666); }
body.dark #wrap .status-tab.active{ background: var(--ui-active, #E66B65); border-color: var(--ui-active, #E66B65); color: var(--ui-active-text, #ffffff); box-shadow: none; }
body.dark #wrap .status-tab.active em{ color: inherit; opacity: 1; }   /* 2026-09-27 노란 바탕 흰 숫자(1.7:1) → 칩 글자색 그대로 */

/* [2026-08-14] 끌어올리기(구 '점프') 보유 안내 줄 — 등록글관리 툴바 상단.
   soft 토큰(--ui-select-soft-*)은 다크에서 노랑연함으로 자동 적응(variables.css:387). */
#wrap .reg-bump-strip{
	display: flex; align-items: center; gap: 9px;
	margin: 0 0 10px; padding: 11px 15px;
	background: var(--ui-select-soft-bg, #FCF1F0);
	border: 1px solid var(--ui-select-soft-border, #E66B65);
	border-radius: 12px;
	color: var(--ui-select-soft-text, #9C3830);
	font-size: 13.5px; line-height: 1.4;
}
#wrap .reg-bump-strip .rbs-ic{ font-size: 17px; }
/* 모바일 전용 카테고리 셀렉트 (툴바) */
#wrap .reg-mcat-wrap{ margin: 0 0 8px; }
#wrap .reg-mcat-select{
	appearance: none; -webkit-appearance: none;
	width: 100%; height: 44px; padding: 0 40px 0 14px;
	background: var(--color-bg-white, #fff);
	border: 1px solid var(--color-border, #ddd);
	border-radius: 11px;
	font-size: 15px; font-weight: 700; color: var(--color-text-primary, #222);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20stroke='%23888'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
body.dark #wrap .reg-mcat-select{
	background-color: var(--dark-bg-secondary, #232323);
	border-color: var(--dark-border-secondary, #4A4A4A);
	color: var(--dark-text-primary, #ECECEC);
}
#wrap .reg-bump-strip b{ color: var(--color-brand, #D84841); font-weight: 800; }
#wrap .reg-bump-strip em{ font-style: normal; color: var(--color-text-secondary, #666); }
@media (max-width: 640px){
	#wrap .reg-bump-strip { font-size: 12.5px; padding: 10px 13px; }
	#wrap .reg-bump-strip em { display: none; } /* 모바일은 '보유 N회'만 남김 */
}

/* 필터줄 우측 보기컨트롤(정렬+뷰토글) — display_mode_toggle_buttons.php 는 검색페이지용이라
   .view_mode_bar 에 점선보더·여분패딩·flex-end 가 인라인으로 박혀 있어 그대로 두면 필터줄에서 어수선.
   여기(등록글관리 리스트)선 그 '검색페이지용 장식'만 제거해 한 줄 툴바로 깔끔히. */
#wrap .list-view-controls{ display: flex; align-items: center; }
/* [2026-08-14] 등록글관리 뷰 토글 = 리스트/박스 2개만 (2줄·갤러리 아이콘 숨김) */
#wrap .list-view-controls .listMode2ColIcon, #wrap .list-view-controls .galleryModeIcon{ display: none !important; }
/* [2026-09-09 사장님 확정] 등록글관리 = PC 박스형 고정 — 보기 토글 전체 숨김(모드 판정도 include/display_mode_resolve.php 가 grid 만 허용) */
#wrap .list-view-controls .an-view-toggle, #wrap .list-view-controls #toggleModeBtn{ display: none !important; }
#wrap .list-view-controls .view_mode_bar{
	border-bottom: 0 !important;   /* 점선보더 제거 */
	padding: 0 !important;         /* 여분 패딩 제거 */
	gap: 8px !important;
}
/* ★ 뷰토글 4개 = 하나의 세그먼트(연결형)로 병합 — 검색페이지 .stab__btns.has-sortbar 룩 복제.
   흩어진 박스 4개 → 1묶음(바깥 테두리·radius·음영은 컨테이너, 각 아이콘은 사이 구분선만). */
#wrap .list-view-controls #toggleModeBtn{
	gap: 0 !important;
	border: 1px solid var(--color-border-medium, #ccc); border-radius: 9px; overflow: hidden;
	box-shadow: inset 0 0 0.75px rgb(77,71,71);
}
#wrap .list-view-controls #toggleModeBtn .icon{
	border: 0 !important; border-right: 1px solid var(--color-border-medium, #ccc) !important;
	border-radius: 0 !important; box-shadow: none !important;
}
#wrap .list-view-controls #toggleModeBtn .icon:last-child{ border-right: 0 !important; }
#wrap .list-view-controls #toggleModeBtn .icon.active{ border-right-color: transparent !important; }
body.dark #wrap .list-view-controls #toggleModeBtn{ border-color: var(--dark-border-secondary, #4A4A4A); }
body.dark #wrap .list-view-controls #toggleModeBtn .icon{ border-right-color: var(--dark-border-secondary, #4A4A4A) !important; }

/* 툴바 우측 = [내 글 검색][정렬][뷰세그먼트] 한 줄, 간격 통일 */
#wrap .list-view-controls{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 내 등록글 검색 = 검색페이지 박스형(흰박스+내부 셀렉트/입력/돋보기) */
#wrap .list-mysearch{
	display: inline-flex; align-items: center; height: 40px;
	padding: 0 6px 0 8px; background: var(--box, #fdfdfd);
	border: 1px solid var(--color-border-medium, #ccc); border-radius: 9px;
	box-shadow: inset 0 0 0.75px rgb(77,71,71); transition: border-color .15s;
}
#wrap .list-mysearch:focus-within{ border-color: var(--color-border-focus, #D84841); }
#wrap .list-mysearch .lms-input{
	width: 150px; min-width: 0; height: 36px; border: 0 !important; background: transparent !important; outline: none !important;
	box-shadow: none !important; border-radius: 0 !important; font-size: 13px; padding: 0 6px; margin: 0; color: var(--color-text-primary, #0f0f0f);
}
#wrap .list-mysearch .lms-input::placeholder{ color: #aeb2ba; }
#wrap .list-mysearch .lms-btn{
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 36px; padding: 0; margin: 0; cursor: pointer;
	background: transparent; border: 0; box-shadow: none; color: var(--color-brown, #E66B65);
	font-size: 15px; transition: transform .1s;
}
#wrap .list-mysearch .lms-btn:active{ transform: scale(.92); }
body.dark #wrap .list-mysearch{ background: var(--dark-bg-button, #333333); border-color: var(--dark-border-secondary, #4A4A4A); }
body.dark #wrap .list-mysearch .lms-input{ color: var(--dark-text-primary, #ECECEC); }

/* 정렬(최신순) custom_select 위젯 = 검색페이지처럼 흰 박스로. register에선 플러그인 기본(분홍)이
   보여서(흰색 override 미적용) 더 강한 특이성으로 강제 흰색 통일. */
#wrap .list-view-controls .select-label, #wrap .list-view-controls #select .select-label, #wrap .list-view-controls #select > li > .select-label{
	background: #fdfdfd !important;
	color: var(--color-text-secondary, #393939) !important;
	border: 1px solid var(--color-border-medium, #ccc) !important;
	border-radius: 9px !important;
	box-shadow: inset 0 0 0.75px rgb(77,71,71) !important;
	font-weight: 600 !important;
}
body.dark #wrap .list-view-controls .select-label, body.dark #wrap .list-view-controls #select .select-label, body.dark #wrap .list-view-controls #select > li > .select-label{
	background: var(--dark-bg-button, #333333) !important;
	color: var(--dark-text-primary, #ECECEC) !important;
	border-color: var(--dark-border-secondary, #4A4A4A) !important;
}

/* ══════════════════════════════════════
   등록글관리 리스트 = 등록하기 폼처럼 "회색 큰 틀 + 흰 섬"
   - .contents 의 탁한 #f5f5f5(회색 틀에 겹쳐 muddy) 제거 → 카드가 흰 섬으로 뜸
   - 옛 진한 구분선(var(--color-border-medium, #CCC)) 제거, 하단 검색폼(#f9f9f8)은 흰 섬 카드로 정리
   - adoption/find/individual 리스트에 적용(공유 카드 렌더러는 불침범, 컨테이너만)
   ══════════════════════════════════════ */
/* :has(.list-toolbar-row) = 신형 툴바가 있는 3개(adoption/find/individual)에만 정밀 적용
   (나머지 7개 구형 테이블 리스트는 불침범) */
#wrap .contents_area:has(.list-toolbar-row) .contents{ background: transparent !important; padding: 0 !important; }
/* 옛 dark(var(--color-border-medium, #CCC)) 구분선 = 섬 사이 뜬 선 → 숨김 */
#wrap .contents_area:has(.list-toolbar-row) .contents > div[style*="495164"]{ display: none !important; }
/* 선택삭제(체크박스 일괄삭제) 바 숨김 — 행별 ⋮ 메뉴 삭제로 대체됨(체크박스 제거) */
#wrap .contents_area:has(.list-toolbar-row) .my_top_btn_area{ display: none !important; }
/* 하단 검색폼 = 흰 섬 카드 */
#wrap .contents_area:has(.list-toolbar-row) .contents > div[style*="f9f9f8"]{
	background: #fff !important; border: 1px solid var(--color-border-medium, #ccc) !important;
	border-top: 1px solid var(--color-border-medium, #ccc) !important;
	border-radius: 12px; box-shadow: 0 1px 3px rgba(30,40,60,.05);
	padding: 20px 16px !important; margin-top: 8px;
}
body.dark #wrap .contents_area:has(.list-toolbar-row) .contents > div[style*="f9f9f8"]{
	background: var(--dark-bg-secondary, #232323) !important; border-color: var(--dark-border-secondary, #4A4A4A) !important;
}

/* ── /css/editor_collage_view.css ── */
/* ============================================================
 * editor_collage_view.css — 글 본문(board_view 등) 콜라주/슬라이드 렌더링 (2026-07-15)
 *
 * 배경: 콜라주(.an-collage)/슬라이드(.an-slide) 마크업과 인라인 --ar 은 DB 에 온전히 저장되지만,
 *   레이아웃 CSS(editor/css/attach_layout.css)는 "에디터"에서만 로드돼 글 상세보기에선
 *   그냥 세로로 쌓여 보였다. → attach_layout.css 의 "레이아웃 규칙"만 추출 + 편집기 UI 숨김.
 *   css_bundle.php / m_css_bundle.php 에 등록되어 사이트 전역(본문 표시 페이지) 로드.
 *
 * ⚠ attach_layout.css 의 프리셋 규칙을 수정하면 이 파일도 같이 맞춰야 함(뷰-에디터 일치).
 * ============================================================ */

/* ── 공통 컨테이너 (기본 2열 grid, preset0 은 아래에서 flex 로 오버라이드) ── */
.an-collage{
	display:grid;
	gap:4px;
	grid-template-columns:repeat(2,1fr);
	grid-auto-rows:1fr;
	margin:8px 0;
	position:relative;
}
.an-collage > .resize-media-box{
	margin:0; padding:0;
	position:relative;
	overflow:hidden;
	box-sizing:border-box;
	min-width:0;
}
.an-collage > .resize-media-box .media-container{
	width:100%; height:100%;
	position:relative;
	overflow:hidden;
	display:block;
}
.an-collage > .resize-media-box img,
.an-collage > .resize-media-box .preview-img{
	width:100%; height:100%;
	object-fit:cover;
	display:block;
	margin:0;
}
.an-collage[data-count="3"] > .resize-media-box:nth-child(1),
.an-collage[data-count="5"] > .resize-media-box:nth-child(1),
.an-collage[data-count="7"] > .resize-media-box:nth-child(1),
.an-collage[data-count="9"] > .resize-media-box:nth-child(1),
.an-collage[data-count="11"] > .resize-media-box:nth-child(1){ grid-column:1 / -1; }
.an-collage[data-count="10"],.an-collage[data-count="12"],.an-collage[data-count="13"],
.an-collage[data-count="14"],.an-collage[data-count="15"],.an-collage[data-count="16"],
.an-collage[data-count="17"],.an-collage[data-count="18"],.an-collage[data-count="19"],
.an-collage[data-count="20"]{ grid-template-columns:repeat(3,1fr); }

/* ── Preset 0 (기본) = Justified flex (줄 높이통일·폭 비율·an-row-break 고정 줄) ── */
.an-collage:not([data-preset]),
.an-collage[data-preset="0"]{
	display:flex;
	flex-wrap:wrap;
	grid-template-columns:none;
	grid-auto-rows:auto;
	align-items:flex-start;
}
.an-collage:not([data-preset]) > .resize-media-box,
.an-collage[data-preset="0"] > .resize-media-box{
	flex:var(--ar, 1.4) 1 0;
	aspect-ratio:auto;
	height:auto;
	min-width:0;
	grid-column:auto;
}
.an-collage:not([data-preset]) > .resize-media-box .media-container,
.an-collage[data-preset="0"] > .resize-media-box .media-container{ height:auto; }
.an-collage .an-row-break{
	flex-basis:100%; width:100%; height:0;
	margin:0; padding:0; border:0; overflow:hidden;
}

/* ── Preset 1 — 첫 사진 크게(좌) ── */
.an-collage[data-preset="1"]{ grid-template-columns:2fr 1fr; }
.an-collage[data-preset="1"] > .resize-media-box{ grid-column:auto; }
.an-collage[data-preset="1"] > .resize-media-box:nth-child(1){ grid-row:1 / -1; grid-column:1; }
/* ── Preset 2 — 3열 균등 ── */
.an-collage[data-preset="2"]{ grid-template-columns:repeat(3,1fr); }
.an-collage[data-preset="2"] > .resize-media-box{ grid-column:auto; }
.an-collage[data-preset="2"][data-count="4"] > .resize-media-box:nth-child(4),
.an-collage[data-preset="2"][data-count="7"] > .resize-media-box:nth-child(7),
.an-collage[data-preset="2"][data-count="10"] > .resize-media-box:nth-child(10){ grid-column:1 / -1; }
/* ── Preset 3 — 첫 사진 크게(우) ── */
.an-collage[data-preset="3"]{ grid-template-columns:1fr 2fr; }
.an-collage[data-preset="3"] > .resize-media-box{ grid-column:auto; }
.an-collage[data-preset="3"] > .resize-media-box:nth-child(1){ grid-row:1 / -1; grid-column:2; }
/* preset1/3 첫사진 세로 span (implicit grid 보정) */
.an-collage[data-preset="1"][data-count="3"] > .resize-media-box:nth-child(1),
.an-collage[data-preset="3"][data-count="3"] > .resize-media-box:nth-child(1){ grid-row:1 / span 2; }
.an-collage[data-preset="1"][data-count="4"] > .resize-media-box:nth-child(1),
.an-collage[data-preset="3"][data-count="4"] > .resize-media-box:nth-child(1){ grid-row:1 / span 3; }
.an-collage[data-preset="1"][data-count="5"] > .resize-media-box:nth-child(1),
.an-collage[data-preset="3"][data-count="5"] > .resize-media-box:nth-child(1){ grid-row:1 / span 4; }
.an-collage[data-preset="1"][data-count="6"] > .resize-media-box:nth-child(1),
.an-collage[data-preset="3"][data-count="6"] > .resize-media-box:nth-child(1){ grid-row:1 / span 5; }
.an-collage[data-preset="1"][data-count="7"] > .resize-media-box:nth-child(1),
.an-collage[data-preset="3"][data-count="7"] > .resize-media-box:nth-child(1){ grid-row:1 / span 6; }
.an-collage[data-preset="1"][data-count="8"] > .resize-media-box:nth-child(1),
.an-collage[data-preset="3"][data-count="8"] > .resize-media-box:nth-child(1){ grid-row:1 / span 7; }
.an-collage[data-preset="1"][data-count="9"] > .resize-media-box:nth-child(1),
.an-collage[data-preset="3"][data-count="9"] > .resize-media-box:nth-child(1){ grid-row:1 / span 8; }
.an-collage[data-preset="1"][data-count="10"] > .resize-media-box:nth-child(1),
.an-collage[data-preset="3"][data-count="10"] > .resize-media-box:nth-child(1){ grid-row:1 / span 9; }
/* ── Preset 4 — 1열 세로 ── */
.an-collage[data-preset="4"]{ grid-template-columns:1fr; grid-auto-rows:auto; }
.an-collage[data-preset="4"] > .resize-media-box{ grid-column:auto; aspect-ratio:auto; height:auto; align-self:start; }
/* ── Preset 5 — 4열 타일 ── */
.an-collage[data-preset="5"]{ grid-template-columns:repeat(4,1fr); }
.an-collage[data-preset="5"] > .resize-media-box{ grid-column:auto; }

/* ── 슬라이드 ── */
.an-slide{ position:relative; margin:8px 0; overflow:hidden; border-radius:2px; }
.an-slide__track{
	display:flex; gap:0;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;
}
.an-slide__track > .resize-media-box{
	flex:0 0 100%;
	scroll-snap-align:start;
	margin:0; padding:0;
	position:relative;
}
.an-slide__track > .resize-media-box .media-container{ width:100%; height:auto; }
.an-slide__track > .resize-media-box img,
.an-slide__track > .resize-media-box .preview-img{
	width:100%; height:auto; display:block; margin:0;
}
.an-slide__track::-webkit-scrollbar{ display:none; }

/* ── 편집기 전용 UI 숨김 (본문 표시에선 안 보이게) ──
   button_group 툴바 / 대표 버튼·배지 / 그룹 툴바 / 박스 삭제 / 리사이즈 핸들. 단일이미지도 포함.
   ⚠ 이 요소들은 저장 시 인라인 style="display:flex !important" 까지 박혀 있어 외부 CSS 의
      display:none!important 로는 못 이긴다(인라인 important 우선). → 인라인에 없는 visibility/opacity 로 숨김.
      (이래야 PC/모바일 본문 어디서든 JS 없이 CSS 만으로 확실히 숨겨짐 — default_img_onerror 의 JS strip 미포함 페이지도 커버) */
.an-collage .button_group,
.an-slide .button_group,
.media-container .button_group,
.an-collage .representative_btn,
.an-slide .representative_btn,
.media-container .representative_btn,
.an-rep-badge,
.an-group-toolbar,
.an-box-delete,
.resize-handle,
.media-container .resize-handle{
	display:none !important;          /* 인라인 display 없는 요소는 완전 제거 */
	visibility:hidden !important;     /* 인라인 display:flex!important 요소는 이걸로 숨김 */
	opacity:0 !important;
	pointer-events:none !important;
}


/* ── /css/etc.css ── */
/*공지사항_리스트*/
.etc_list{width:100%;padding-top:35px;}
.etc_list th{height:40px;background:var(--color-bg-lighter);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.etc_list th p{border-right:1px solid var(--color-border);}
.etc_list td{height:35px;border-bottom:1px solid var(--color-border);}
.etc_list td span.name{max-width:150px;display:inline-block;color:#666;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;position:relative;}
.etc_list td span.name > img{vertical-align:middle;}
.etc_list td span.name > a{vertical-align:middle;}
.etc_list td.alignL{text-align:left;}
.etc_list td.alignL p{margin-left:10px;}
.etc_list td span.count{margin-left:3px;color:var(--color-brown, #E66B65);font-size:11px;float:right;}


/*검색*/
.searchfor{width:530px;margin:0 auto;}
.searchfor select{height:26.98px;border:1px solid var(--color-border);}
.searchfor input.text{height:25px;border:1px solid var(--color-border);width:170px;}

/*공지사항_뷰*/
.etc_list td.bgth{height:40px;border-top:1px solid var(--color-border);}
.etc_list td.bgth p{text-align:left;margin-left:10px;}


/*1:1문의*/
.etc_list td.alignL a{max-width:475px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;}
.etc_list td.alignL a.answer{margin-left:10px;}
.etc_list td.alignL span.level{margin-left:10px;} 
.etc_list td img.icon_level{}
.etc_write{width:100%;padding-top:35px;}
.etc_write th{height:40px;border-bottom:1px solid var(--color-border);text-align:left;padding-left:10px;}
.etc_write td{border-bottom:1px solid var(--color-border);}
.etc_write td span.name{position:relative;top:0;left:2px; vertical-align:middle}
.etc_write input{height:20px;}
.etc_write input.subject{width:98%;}
.etc_write td textarea{width:100%;height:100%;}
.etc_write li{float:left;margin-left:5px;}
.etc_write li input{height:20px;margin-top:2px;}
.etc_write td.category select{width:180px;height:22px;}


/* 1:1비밀번호입력 */
.query_pwbox{width:370px;border:1px solid var(--color-border);margin:auto;margin-top:100px;}
.query_pwbox div.title{height:40px;background-color:var(--color-bg-lighter);}
.query_pwbox div.title p{font-family:nanum;font-size:15px;font-weight:bold;color:#333;text-align:center;padding-top:9px;}
.query_pwbox div.pwa{width:368px;padding:30px 0 30px 0;}
.query_pwbox div.pwa p{width:215px;margin:auto;overflow:hidden;}
.query_pwbox div.pwa p input{width:150px;height:23px;float:left;}
.query_pwbox div.pwa p img{float:left;margin-left:5px;}


/* 추가 */


/*========================================
  다크모드 Border 및 배경 적용
========================================*/
body.dark .etc_list th {
	background-color: var(--dark-bg-secondary);
	border-top-color: var(--dark-border-secondary);
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .etc_list th p {
	border-right-color: var(--dark-border-secondary);
}

body.dark .etc_list td {
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .etc_list td.bgth {
	border-top-color: var(--dark-border-secondary);
}

body.dark .searchfor select,
body.dark .searchfor input.text {
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
}

body.dark .etc_write th,
body.dark .etc_write td {
	border-bottom-color: var(--dark-border-secondary);
}

body.dark .query_pwbox {
	border-color: var(--dark-border-secondary);
	background-color: var(--dark-bg-primary);
}

body.dark .query_pwbox div.title {
	background-color: var(--dark-bg-secondary);
}

body.dark .query_pwbox div.title p {
	color: var(--dark-text-primary);
}


/* ══════════════════════════════════════════════════════════════════════
   기타(고객센터) 페이지 버튼·아이콘 — 2026-08-06
   전에는 <img src="../img/etc/btn_*.gif|png"> 였는데 img/etc/ 폴더 자체가 없어
   (라이브에서도 없는 파일은 503) 목록·수정·삭제·답변·제출 버튼이 전부 '깨진 이미지'로 떴다.
   → 텍스트 버튼 + Font Awesome 아이콘으로 교체. 색은 전부 토큰.
   ══════════════════════════════════════════════════════════════════════ */
.etc_btn{
	display:inline-block; min-width:86px; height:34px; line-height:32px;
	margin:0 3px; padding:0 16px;
	border:1px solid transparent; border-radius:6px;
	font-size:13px; font-weight:600; text-align:center; box-sizing:border-box;
	background-color: var(--ui-action, #D84841);
	color: var(--ui-action-text, #ffffff);
	cursor:pointer; vertical-align:middle;
}
.etc_btn:hover{ background-color: var(--ui-action-hover, #C33F39); color: var(--ui-action-text, #ffffff); text-decoration:none; }
.etc_btn i{ margin-right:5px; font-size:12px; }

/* 보조 버튼(목록/취소/수정 등) = 테두리형 */
.etc_btn.sub{
	background-color: var(--color-bg-white, #fff);
	color: var(--color-text-secondary, #666);
	border-color: var(--color-border-medium, #ccc);
}
.etc_btn.sub:hover{
	background-color: var(--color-bg-lighter, #f7f7f7);
	color: var(--color-text-primary, #333);
}
body.dark .etc_btn.sub{
	background-color: var(--dark-bg-secondary, #232323);
	color: var(--dark-text-secondary, #ACACAC);
	border-color: var(--dark-border-secondary, #4A4A4A);
}
body.dark .etc_btn.sub:hover{
	background-color: var(--dark-bg-hover, #333333);
	color: var(--dark-text-primary, #ECECEC);
}

/* 목록 안 표시 아이콘(사진 있음 / 비밀글) — 옛 icon_gallery.gif, icon_lock.png 대체 */
.etc_ico{ font-size:12px; color: var(--color-text-quaternary, #888); vertical-align:middle; }
.etc_ico.lock{ color: var(--color-text-tertiary, #666); }
body.dark .etc_ico{ color: var(--color-text-light, #999); }

/* 답글 들여쓰기 표시 — 옛 L.gif(ㄴ자 이미지) 대체 */
.etc_reply_arrow{ font-size:11px; color: var(--color-text-quaternary, #888); margin:0 4px 0 2px; vertical-align:middle; }
/* 1:1문의 목록 답변 상태 배지 (2026-09-11) — 대기=회색, 완료=브랜드 틴트 */
.etc_ans_badge{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:600; line-height:18px; vertical-align:middle; background:var(--table-head-bg, #F4F4F6); color:var(--color-text-tertiary, #666); }
.etc_ans_badge.is-done{ background:var(--tint-coral-bg, #FFF1EC); color:var(--tint-coral-fg, #C9472C); }
body.dark .etc_ans_badge{ background:var(--dark-bg-tertiary, #2A2623); color:var(--dark-text-secondary, #bbb); }
body.dark .etc_ans_badge.is-done{ background:rgba(233,97,74,.18); color:var(--color-brand, #E9614A); }

/* 보안문자 새로고침 — 옛 btn_again.gif 대체(작은 아이콘 버튼) */
.etc_captcha_reload{
	display:inline-block; width:30px; min-width:30px; height:27px; line-height:25px; padding:0;
	border:1px solid var(--color-border-medium, #ccc); border-radius:5px;
	background-color: var(--color-bg-lighter, #f7f7f7);
	color: var(--color-text-secondary, #666);
	text-align:center; vertical-align:middle;
}
.etc_captcha_reload:hover{ background-color: var(--color-bg-gray, #e8e8e8); color: var(--color-text-primary, #333); text-decoration:none; }
.etc_captcha_reload i{ margin:0; font-size:12px; }
body.dark .etc_captcha_reload{
	background-color: var(--dark-bg-secondary, #232323);
	border-color: var(--dark-border-secondary, #4A4A4A);
	color: var(--dark-text-secondary, #ACACAC);
}

/* 공지 배지 — 옛 img/community/btn_noti.png 대체(2026-08-06) */
.etc_notice_badge{
	display:inline-block; min-width:38px; padding:2px 8px;
	border-radius:4px; font-size:12px; font-weight:700; line-height:18px;
	background-color: var(--ui-select-soft-bg, #FCF1F0);
	color: var(--ui-select-soft-text, #9C3830);
}

/* 회사소개 — 본문이 이미지 한 장(img/etc/company.jpg)이었는데 그 파일이 없어 페이지가 통째로 비어 있었다.
   텍스트 페이지로 재작성하며 쓰는 스타일(2026-08-06). */
.company_intro{ padding:10px 0 40px; line-height:1.7; }
.company_intro .ci_lead{
	margin:10px 0 28px; padding:22px 24px;
	border:1px solid var(--color-border, #ddd); border-radius:8px;
	background-color: var(--color-bg-lighter, #f7f7f7);
	font-size:16px; color: var(--color-text-primary, #333);
}
.company_intro .ci_lead strong{ color: var(--color-brand, #D84841); }
body.dark .company_intro .ci_lead strong{ color: var(--dark-text-emphasis, #F0A088); }   /* 2026-09-11 #2A2623 바탕 위 4.3:1 */
.company_intro h4{
	margin:26px 0 10px; padding-left:11px;
	border-left:3px solid var(--color-brand, #D84841);
	font-size:16px; font-weight:700; color: var(--color-text-primary, #333);
}
.company_intro p{ margin:0 0 10px; color: var(--color-text-secondary, #666); font-size:14px; }
.company_intro ul{ margin:0 0 10px; padding-left:2px; list-style:none; }
.company_intro ul li{ position:relative; padding:3px 0 3px 14px; color: var(--color-text-secondary, #666); font-size:14px; }
.company_intro ul li:before{ content:"·"; position:absolute; left:3px; color: var(--color-brand, #D84841); font-weight:700; }
.company_intro table.ci_info{ width:100%; margin-top:6px; border-top:2px solid var(--color-text-primary, #333); border-collapse:collapse; font-size:14px; }
.company_intro table.ci_info th,
.company_intro table.ci_info td{ padding:11px 14px; border-bottom:1px solid var(--color-border, #ddd); text-align:left; }
.company_intro table.ci_info th{ width:170px; background-color: var(--color-bg-lighter, #f7f7f7); font-weight:600; color: var(--color-text-primary, #333); }
.company_intro table.ci_info td{ color: var(--color-text-secondary, #666); }
body.dark .company_intro .ci_lead{ background-color: var(--dark-bg-tertiary, #2A2A2A); border-color: var(--dark-border-secondary, #4A4A4A); }
body.dark .company_intro table.ci_info{ border-top-color: var(--dark-text-secondary, #ACACAC); }
body.dark .company_intro table.ci_info th{ background-color: var(--dark-bg-tertiary, #2A2A2A); }
body.dark .company_intro table.ci_info th,
body.dark .company_intro table.ci_info td{ border-bottom-color: var(--dark-border-secondary, #4A4A4A); }


/* ── /css/search_list_row.css ── */
	/* ajax_main_list에서 글씨 길어지면 칸 넘어가는 오류 수정하는 스타일 적용, list_container_Style로 묶어줌 */
	.list_container_Style{
        white-space: normal;
        word-break: break-all;
        line-height: 1.3;
        letter-spacing: -0.5px;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--color-text-secondary);
    }
    
    /* 로딩 스켈레톤(.is-loading) 중에는 school 박스/태그의 배경·테두리를 숨겨
       shimmer 위로 박스가 미리 비치지 않도록 함 (글자는 ui.js에서 이미 투명 처리) */
    .is-loading .li-grid, .is-loading .li-cell, .is-loading .li-cell.is-unavail, .is-loading .li-tag, .is-loading-self .li-grid, .is-loading-self .li-cell, .is-loading-self .li-cell.is-unavail, .is-loading-self .li-tag{
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    /* ===== 애견유치원(school) 리스트형: sample/grid1.jpg 스타일 ===== */
    .li-info .li-tagrow{
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 2px 0 10px;
    }
    .li-info .li-tag{
        display: inline-flex;
        align-items: center;
        height: 25px;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 550;
        line-height: 1;
        color: #555555;
        background: #eceef1;
        border: 0;
        border-radius: 14px;
        letter-spacing: -0.3px;
        white-space: nowrap;
    }
    body.dark .li-info .li-tag{
        color: var(--dark-text-primary, #ECECEC);
        background: var(--dark-bg-tertiary, #2A2A2A);
        border-color: var(--dark-border-primary, #3D3D3D);
    }
    /* 진료대상 분류 태그 — 차분한 블루 */
    .li-info .li-tag.is-subject{
        color: var(--color-primary-hover, #2b5f9e);
        background: var(--color-secondary-soft-bg, #eaf1fa);
        font-weight: 600;
    }
    body.dark .li-info .li-tag.is-subject{
        color: var(--color-secondary, #A2BAD7); /* 구 블루 #5E7EC5 → 다크 2차색 */
        background: rgba(74,128,200,0.20);
    }
    /* 예방접종/검진 태그 — 차분한 틸(그린) */
    .li-info .li-tag.is-vaccine{
        color: var(--color-tertiary, #277a4c);
        background: var(--color-tertiary-soft-bg, #e9f4ee);
        font-weight: 600;
    }
    body.dark .li-info .li-tag.is-vaccine{
        color: var(--color-text-lighter, #9a9a9a);
        background: rgba(31,138,112,0.20);
    }

    /* 분류 그룹: 라벨 + 태그묶음을 그룹별 줄로 분리 */
    .li-info .li-taggroup{
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        margin: 4px 0;
    }
    .li-info .li-taggroup .li-glabel{
        flex: 0 0 auto;
        min-width: 66px;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-text-lighter, #9a9a9a);               /* 옆 대상 칩과 어우러지되 더 연한 파랑톤으로 은은하게 녹아들게 */
        line-height: 25px;
        letter-spacing: -0.3px;
        white-space: nowrap;
    }
    .li-info .li-taggroup .li-gtags{
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        flex: 1 1 0;
        min-width: 0;
    }
    body.dark .li-info .li-taggroup .li-glabel{
        color: var(--color-text-lighter, #9a9a9a);               /* 다크: 대상 칩(var(--color-border-medium, #CCC))과 어우러지는 밝은 파랑톤 */
    }

    /* vet 반응형: 기본(카드/2줄)=compact, list 1줄=grouped */
    .li-info .vet-grouped{ display: none; }
    .li-info .vet-compact{ display: block; }
    .flex-container.list-mode .li-info .vet-grouped{ display: block; }
    .flex-container.list-mode .li-info .vet-compact{ display: none; }

    /* 리드 캡슐 + 요약 텍스트 라인 (vet 등): 라벨 + 가운뎃점 요약, 한 줄 …처리 */


    /* 검색리스트/카드 공통 옵션 태그(btn_dark_search)도 school 태그와 동일 pill로 통일.
       hover_img_wrap 하위로 스코프 → 상세페이지 등 다른 btn_dark_search 사용처는 영향 없음 */
    .hover_img_wrap .btn_dark_search{
        display: inline-flex;
        align-items: center;
        height: 25px;
        min-width: 0;
        max-width: none;
        margin: 0 5px 5px 0;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 550;
        line-height: 1;
        color: #555555;
        background: #eceef1;
        border: 0;
        border-radius: 14px;
        letter-spacing: -0.3px;
        white-space: nowrap;
        overflow: visible;
    }
    /* 기본(박스형/그리드 등): 전체폭 % 3등분 */
    .li-info .li-grid{
        display: flex;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }
    .li-info .li-cell{
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 6px;
        border: 1px solid var(--color-border-light, #e4e4e4);
        background: var(--color-bg-lighter, #f7f7f7);
        border-radius: 6px;
        box-sizing: border-box;
        text-align: center;
    }
    /* 박스형 카드: 제목이 좌상단에 붙지 않도록 여백 */
    .mypage_searchList_boxStyle .title{
        display: block;
        padding: 7px 10px 3px 10px !important;
        box-sizing: border-box;
    }

    /* 박스형(grid-mode) 카드만: 제목을 글자 수가 아니라 카드 폭 기준 "2줄"까지만 표시하고 넘치면 ... 처리
       (리스트형 list-mode은 같은 클래스를 공유하므로 grid-mode로 한정) */
    .flex-container.grid-mode .mypage_searchList_boxStyle .title .mypage_searchName{
        /* ★ danawa.png 식: 제목 얇게(400) + 20px. 2줄까지 표시하고 넘치면 … 없이 그냥 잘림.
           (-webkit-line-clamp 는 …를 강제로 붙여서 제거. display:block + max-height(2줄) + overflow:hidden 로 대체.)
           min-height 고정 없음 → 짧은 제목은 짧게(여백 없이). */
        display: block !important;
        overflow: hidden;
        word-break: break-all;
        font-weight: 400 !important;
        font-size: var(--an-grid-title, 17px) !important; /* 2026-09-12 열 수별 변수(4=20·5=17·6=15) */
        line-height: 1.38;
        max-height: 2.76em;   /* line-height(1.38) × 2줄 = 딱 2줄까지, 3줄째는 잘림(… 없음) */
        white-space: normal;
    }
    /* ★ 제목이 자식 .sn-1col/.sn-2col 로 감싸진 렌더러(리스트형 흔적)에선 그 자식에 font-weight:600 !important 가
       직접 걸려 부모(mypage_searchName) 규칙을 이긴다 → 자식까지 명시적으로 얇게+15.5 로 덮어써 굵게 안 나오게. */
    .flex-container.grid-mode .mypage_searchList_boxStyle .title .mypage_searchName .sn-1col, .flex-container.grid-mode .mypage_searchList_boxStyle .title .mypage_searchName .sn-2col{
        font-weight: 400 !important;
        font-size: var(--an-grid-title, 17px) !important; /* 2026-09-12 열 수별 변수(4=20·5=17·6=15) */
    }

    /* ★ list-mode-2col(2단) 제목도 grid 처럼 danawa식 얇게(400)+20px.
       ⚠ 2단은 box(.mypage_searchList_boxStyle)가 아니라 .inner_list 리스트렌더러
          (list_title_info_listStyle)로 그려짐 → 제목 span 인라인이 style="font-weight:600" 이라
          여기서 !important 로 눌러 grid(검색결과)와 통일. (search·register 공통 리스트, 구조는 730/732행과 동일) */
    .flex-container.list-mode-2col .hover_img_wrap .padding_responsive .mypage_searchName, .flex-container.list-mode-2col .hover_img_wrap .padding_responsive .mypage_searchName .sn-1col, .flex-container.list-mode-2col .hover_img_wrap .padding_responsive .mypage_searchName .sn-2col, .flex-container.list-mode .hover_img_wrap .padding_responsive .mypage_searchName, .flex-container.list-mode .hover_img_wrap .padding_responsive .mypage_searchName .sn-1col, .flex-container.list-mode .hover_img_wrap .padding_responsive .mypage_searchName .sn-2col{
        font-weight: 400 !important;
        font-size: 20px !important;
    }

    /* 박스형 카드: 분류(종류)/옵션 영역이 제목과 동일하게 좌우 여백 확보 (인라인 padding-left:0 덮어쓰기) */
    .mypage_searchList_boxStyle .list_container_Style{
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box;
    }

    /* 박스형 카드: 양쪽에 붙지 않도록 좌우/하단 여백 확보 */
    .mypage_searchList_boxStyle .li-info{
        padding: 2px 10px 6px !important;
        box-sizing: border-box;
    }
    .mypage_searchList_boxStyle .li-info .li-grid{
        gap: 6px;
    }

    /* ★ 옵션 태그 없으면 접힘(빈 여백 제거, feat-tags.png 대응). 예전엔 가격 라인 맞추려 min-height 예약했으나,
       지금은 space-between 으로 태그+가격+주소가 하단 세트로 바닥 정렬돼 예약 불필요 → 빈 태그는 그냥 숨김. */
    .feat-tags:empty{ display: none !important; }

    /* ★★ 다나와식 하단 세트 정렬 (danawa.png) — 같은 줄 카드는 높이 통일(stretch), 카드 내부는 space-between 으로
       '이미지+제목=위 / 태그+가격+주소=아래' 로 나눈다. 콘텐츠가 적은 카드(8번 아지다펫 등)는 여백이 '제목과 가격 사이'로
       가고 가격·주소는 통째로 카드 바닥에 정렬 → 같은 줄에서 가격 라인·주소 라인이 다 일치.
       (카드=flex column-reverse, 자식 2개: div[태그+가격+주소](DOM첫=시각아래) / span[이미지+제목](시각위).
        space-between → div 는 아래 끝, span 은 위 끝, 남는 여백은 그 사이.) */
    .flex-container.grid-mode{ align-items: stretch !important; }
    /* 카드 내부 space-between: 이미지+제목=위 / 태그+가격+주소=아래(통째 하단 세트).
       → 같은 줄에 2줄 제목 카드가 있으면, 짧은 제목 카드는 여백이 '제목과 태그 사이'로 가고
         태그·가격·주소가 통째로 아래로 붙어 그 줄 전체에서 옵션·가격·주소 라인이 다 일렬(가로 스캔 쉬움).
       (제목 밑 여백 걱정 없음 — .title min-height:3.5em 근본 제거했으므로, 여백은 '그 줄에 2줄 제목이 있을 때'만 생김) */
    .flex-container.grid-mode .mypage_searchList_boxStyle{ justify-content: space-between; }

    /* ★ 박스형 하단 상호|주소는 항상 1줄(넘치면 …) — 길어질 때 2줄로 밀려 카드 높이가 들쭉날쭉하던 것 방지 */
    .flex-container.grid-mode .mypage_searchList_boxStyle .biz_addr_line{
        flex-wrap: nowrap !important; overflow: hidden;
    }
    .flex-container.grid-mode .mypage_searchList_boxStyle .biz_addr_line .biz-name{ flex: 0 0 auto; }
    .flex-container.grid-mode .mypage_searchList_boxStyle .biz_addr_line .biz-addr{
        flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* 리스트형 1줄에서만: 콤팩트(전체폭으로 늘리지 않음). 너무 좁지 않게 */
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive .li-info .li-grid{
        display: inline-flex;
        width: auto;
        max-width: 100%;
        gap: 7px;
    }
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive .li-info .li-cell{
        flex: 0 0 auto;
        min-width: 104px;
        padding: 8px 14px;
    }

    /* 리스트형 2줄(list-mode-2col): 콤팩트 해제, 전체폭 % 3등분 */
    .flex-container.list-mode-2col .hover_img_wrap > div[style*="display:flex"] .padding_responsive .li-info .li-grid{
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }
    .flex-container.list-mode-2col .hover_img_wrap > div[style*="display:flex"] .padding_responsive .li-info .li-cell{
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 6px;
    }
    .li-info .li-cell .li-lbl{
        font-size: 14.5px;
        font-weight: 700;
        color: var(--color-text-primary, #0f0f0f);
        white-space: nowrap;
    }
    /* 실제 가격: 굵게 + 블루 강조 (불가=빨강처럼 색으로 강조). nowrap+타이트 자간 → '30,000원~' 항상 한 줄 */
    .li-info .li-cell .li-val{
        font-size: 13.5px;
        font-weight: 700;
        color: var(--accent-price, #9C3830);   /* 관리자 '가격 강조' 항목과 연결 */
        white-space: nowrap;
        letter-spacing: -0.03em;
    }
    /* 상담: 차분한 밝은 회색 박스 + 진한 블랙 굵은 글씨 (가격/불가와 동일 무게감) */
    .li-info .li-cell.is-consult{
        background: #ffffff;
        border-color: var(--color-text-lighter, #9a9a9a);
    }
    .li-info .li-cell.is-consult .li-lbl, .li-info .li-cell.is-consult .li-val.is-consult{
        color: var(--color-text-secondary, #393939);
        font-weight: 700;
    }
    body.dark .li-info .li-cell.is-consult{
        background: transparent;
        border-color: var(--color-text-lighter, #9a9a9a);
    }
    body.dark .li-info .li-cell.is-consult .li-lbl, body.dark .li-info .li-cell.is-consult .li-val.is-consult{
        color: var(--dark-text-primary, #ECECEC);
    }
    body.dark .li-info .li-cell .li-val{
        color: var(--accent-price, #9C3830);
    }
    body.dark .li-info .li-cell .li-val.is-consult{
        color: var(--dark-text-secondary, #ACACAC);
    }
    /* 가격 있는 칸: 연하늘 틴트 + 파란 테두리 */
    .li-info .li-cell.is-price{
        background: var(--color-secondary-soft-bg, #eaf1fa);
        border-color: var(--color-border, #DDD);
    }
    body.dark .li-info .li-cell.is-price{
        background: rgba(216, 72, 65,0.16);
        border-color: rgba(216, 72, 65,0.45);
    }
    /* 불가: 눈이 편안한 연분홍 틴트 + 톤다운 레드 글씨 */
    .li-info .li-cell.is-unavail{
        background: #FEF2F2;
        border-color: var(--color-border, #DDD);
    }
    .li-info .li-cell.is-unavail .li-lbl, .li-info .li-cell.is-unavail .li-val{
        color: var(--color-primary-dark, #c43a3e);
    }
    body.dark .li-info .li-cell.is-unavail{
        background: rgba(163,58,58,0.15);
        border-color: rgba(163,58,58,0.35);
    }
    body.dark .li-info .li-cell.is-unavail .li-lbl, body.dark .li-info .li-cell.is-unavail .li-val{
        color: var(--dark-text-emphasis, #F0A088);   /* 2026-09-11 붉은 틴트 위 회색 3.8:1 → 밝은 코랄 */
    }
    body.dark .li-info .li-tag{
        color: var(--dark-text-secondary, #ACACAC);
        background: var(--dark-bg-tertiary, #2A2A2A);
    }
    body.dark .li-info .li-cell .li-lbl{
        color: var(--dark-text-primary, #ECECEC);
    }
    body.dark .li-info .li-cell.is-unavail{
        background: rgba(216,72,65,0.18);
    }
    /* 하단 상호명 | 주소 한 줄 (sample/grid1.jpg) */
    .biz_addr_line{
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 7px;
        line-height: 1.5;
    }
    .biz_addr_line .biz-name{
        font-weight: 550;
        font-size: 14px;
        color: #616161;
        white-space: nowrap;
    }
    .biz_addr_line .biz-sep{
        color: #d2d2d2;
        font-weight: 400;
        font-size: 10px;
        margin: 0 3px;
        transform: scaleY(1.1);
        display: inline-block;
        align-self: center;
    }
    .biz_addr_line .biz-addr{
        font-size: 14px;
        color: var(--color-text-secondary, #393939);
        word-break: keep-all;
    }
    body.dark .biz_addr_line .biz-name{
        color: var(--dark-text-primary, #ECECEC) !important;
    }
    body.dark .biz_addr_line .biz-addr{
        color: var(--dark-text-secondary, #ACACAC) !important;
    }
    /* ===== //school ===== */

    /* 리스트형에서만 list_container_Style을 block으로 변경 */
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive .list_container_Style{
        display: block !important;
        -webkit-box-orient: initial !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
	

    .title{
        white-space: normal;
        word-break: break-all;
        line-height: 1.3;
        letter-spacing: -0.5px;
        text-align: left !important;
        display: block;
        padding: 5px 0;
		padding-left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        height: auto;
        /* min-height:3.5em 제거 — 제목이 짧으면 영역도 짧게(제목↔태그 여백의 근본원인이었음).
           제목 줄수 제한은 .mypage_searchName 의 line-clamp 이 담당. 리스트형에서 높이 확보가 필요하면 아래 전용 규칙에서. */
        max-height: none;
        font-size: 19px;
        color: var(--color-text-secondary);
        font-weight: 500;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* 리스트형에서 제목이 오른쪽으로 가지 않도록 추가 스타일 */
    .padding_responsive .title{
        display: block !important;
        text-align: left !important;
        width: 100% !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        -webkit-box-orient: horizontal !important;
        flex-direction: row !important;
        margin: 0 !important;
        padding: 5px 0 !important;
        padding-left: 0 !important;
    }
    
    .padding_responsive .title .mypage_searchName{
        display: block !important;
        text-align: left !important;
        width: 100% !important;
        float: none !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* flex 컨테이너 내에서 제목이 왼쪽 정렬되도록 */
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive{
        text-align: left !important;
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive .title{
        text-align: left !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        direction: ltr !important;
        box-sizing: border-box !important;
    }
    
    /* 분양 리스트형에서 제목이 세로로 회전되지 않도록 강제 */
    .hover_img_wrap .padding_responsive .title, .hover_img_wrap .padding_responsive .title *, .hover_img_wrap .padding_responsive .mypage_searchName, .hover_img_wrap .padding_responsive .mypage_searchName *{
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        direction: ltr !important;
        unicode-bidi: normal !important;
        display: block !important;
        text-align: left !important;
        width: 100% !important;
        float: none !important;
        position: static !important;
    }
    
    /* 리스트형에서 제목 컨테이너 강제 수정 */
    .hover_img_wrap > div[style*="display:flex"]{
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive{
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-top: 4px !important;
    }
    
    /* 분양 리스트형 제목 간격을 동물병원과 동일하게 */
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive .title{
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }
    
    /* adoption/individual 리스트형에서 제목과 정보 사이 간격을 vet와 동일하게 */
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive .list_container_Style{
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }
    
    /* individual의 list_container_Style이 제목 바로 아래 오도록 - 더 구체적인 선택자 */
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive > .list_container_Style, .hover_img_wrap > div[style*="display:flex"] .padding_responsive .title + .list_container_Style, .hover_img_wrap > div[style*="display:flex"] .padding_responsive .title ~ .list_container_Style{
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* individual 리스트형에서 제목과 정보 사이 간격 추가 */
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive .title{
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
    }
    
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive .list_container_Style[style*="padding-top:8px"]{
        margin-top: 0 !important;
        display: block !important;
    }
    
    /* individual 리스트형에서 모든 내용이 표시되도록 */
    .hover_img_wrap > div[style*="display:flex"] .padding_responsive .list_container_Style{
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

	/* 리스트 컨테이너 - 반응형 레이아웃 */
	.mypage_list_container{
		display: flex;
		flex-wrap: wrap;
		gap: 0;
		width: 100%;
	}

	/* 플랫형 카드 스타일 - 공용 */
	.mypage_list_searchList{
		display: block;
		background: #fff;
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		margin-bottom: 0;
		transition: all 0.3s ease;
		overflow: hidden;
		width: 100%;
		box-sizing: border-box;
	}

	/* 리스트형 1줄 모드: 항상 100% */
	.mypage_list_container.list-mode .mypage_list_searchList{
		width: 100%;
		flex: 0 0 100%;
		box-sizing: border-box;
	}

	/* 리스트형 1줄 모드에서 hover-info가 깨지지 않도록 */
	.mypage_list_container.list-mode .mypage_list_searchList .hover-info{
		width: 100%;
		box-sizing: border-box;
	}

	/* 리스트형 2줄 모드: 항상 50% */
	.mypage_list_container.list-mode-2col .mypage_list_searchList{
		width: calc(50% - 0px);
		flex: 0 0 calc(50% - 0px);
		box-sizing: border-box;
	}
	
	.mypage_list_container.list-mode-2col .mypage_list_searchList:nth-child(odd){
		border-right: 0.5px solid #eee;
	}
	
	.mypage_list_container.list-mode-2col .mypage_list_searchList:nth-child(even){
		border-left: 0.5px solid #eee;
	}

	/* 리스트형 2줄 모드에서 hover-info가 깨지지 않도록 */
	.mypage_list_container.list-mode-2col .mypage_list_searchList .hover-info{
		width: 100%;
		box-sizing: border-box;
	}

	.mypage_list_searchList:hover{
		background-color: var(--color-bg-lighter) !important;
	}

	/* search list에서 hover 시 사업자명과 주소 표시 */
	.mypage_list_searchList .hover-info{
		display: none;
		padding: 8px 10px;
		background-color: var(--color-bg-lighter);
		border-top: 1px solid #eee;
		font-size: 12px;
		color: #666;
		line-height: 1.5;
	}

	.mypage_list_searchList:hover .hover-info{
		display: block;
	}

	.hover-info .business-name{
		font-weight: 500;
		color: #333;
		margin-bottom: 3px;
	}

	.hover-info .address{
		color: #666;
	}

	.mypage_list_searchList .hover_list{
		width: 100%;
		table-layout: fixed;
		border-spacing: 0;
		border-collapse: collapse;
	}

	/* adoption_wait.php의 list 모드용 반응형 (inner_list.mypage_searchList_listStyle) */
	.flex-container{
		display: flex;
		flex-wrap: wrap;
		gap: 0;
		width: 100%;
	}

	.inner_list.mypage_searchList_listStyle{
		width: 100%;
		box-sizing: border-box;
		cursor: pointer;
		position: relative;
		/* hover(그림자/배경)만 부드럽게. 'all' 이면 1줄↔2줄 전환 때 폭(100%↔50%)까지 애니메이트돼
		   카드가 '스르륵' 늘었다 줄었다 함 → 폭/레이아웃은 즉시 전환되게 hover 속성만 transition. */
		transition: box-shadow 0.2s ease, background-color 0.2s ease;
	}
	/* 행 전체 어디에 올려도 손가락 커서 */
	.inner_list.mypage_searchList_listStyle, .inner_list.mypage_searchList_listStyle *{
		cursor: pointer;
	}
	/* 행 전체 hover: 위로 들림 없이 그림자(+다크는 배경 밝기). 리스트·박스·갤러리 모드 전부 커버 */
	.flex-container .inner_list:hover, .flex-container .inner_listbox:hover{
		box-shadow: 0 6px 20px rgba(20, 30, 50, 0.14) !important;
		transform: none !important;   /* 위로 들림 없음(옛 translateY 잔재 방지) */
		z-index: 1;
	}
	body.dark .flex-container .inner_list:hover, body.dark .flex-container .inner_listbox:hover{
		background-color: var(--dark-bg-hover, #333333) !important;   /* 다크 hover = 배경 살짝 밝게 */
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
	}
	/* 시안D: hover 시 글 제목 브랜드색 강조 (라이트만 — 다크는 배경 밝기만) */
	.mypage_searchName{ transition: color .18s ease; }
	body:not(.dark) .flex-container .inner_list:hover .mypage_searchName, body:not(.dark) .flex-container .inner_listbox:hover .mypage_searchName{ color: var(--color-hover) !important; }

	/* search_list 내 이미지 hover 확대(scale) 비활성화 — ui.css의 .hover_img_wrap:hover scale(1.1) 무효화 */
	.hover_img_wrap:hover .hover_img img, .hover_img_wrap:hover .hover_img .imagebox-rotate{
		-webkit-transform: none !important;
		-ms-transform: none !important;
		transform: none !important;
	}

	/* 제목 글자수 모드별: 기본/1줄=40자, 2줄=20자 (서버에서 둘 다 출력 후 CSS 토글 → 클라이언트 토글에도 정확) */
	/* 보이는 쪽은 기존 제목과 동일하게(block/굵게), .mypage_searchName * !important 를 이기도록 specificity 확보 */
	.hover_img_wrap .padding_responsive .mypage_searchName .sn-1col, .hover_img_wrap .padding_responsive .mypage_searchName .sn-2col{
		display: block !important;
		width: 100% !important;
		font-weight: 600 !important;
		font: inherit;
		color: inherit;
	}
	.hover_img_wrap .padding_responsive .mypage_searchName .sn-2col{ display: none !important; }
	.flex-container.list-mode-2col .hover_img_wrap .padding_responsive .mypage_searchName .sn-1col{ display: none !important; }
	/* 리스트형2줄: 박스형과 동일하게 글자 수가 아니라 카드 폭 기준 "2줄"까지만 표시하고 넘치면 ... */
	.flex-container.list-mode-2col .hover_img_wrap .padding_responsive .mypage_searchName .sn-2col{
		display: -webkit-box !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
		text-overflow: ellipsis;
		word-break: break-all !important;
		white-space: normal !important;
		line-height: 1.3 !important;    /* 1줄(sn-1col)과 동일 line-height → oval 등 아래 정보 위치 1줄/2줄 일치 */
		max-height: 2.6em !important;   /* 2줄(1.3×2) 딱 */
		/* margin-bottom 제거: 2줄 제목만 아래를 밀어 1줄과 정보 위치가 달라지던 문제(oval.png) 해결.
		   정상 flow라 마진 없어도 정보는 항상 제목 아래 — 겹침 없음. */
	}
	/* 그 외 컨텍스트(bottom_add_list 등) 기본 1줄(40자) */
	.mypage_searchName .sn-2col{ display: none; }
	.mypage_searchName .sn-1col{ display: inline; font-weight: 600; }

	/* 모바일/터치 기기: hover 효과 전부 제거(탭 후 들러붙음 방지) */
	@media (hover: none), (max-width: 767px){
		.inner_list.mypage_searchList_listStyle:hover {
			transform: none !important;
			box-shadow: none !important;
			z-index: auto !important;
		}
		.hover_img_wrap:hover .hover_img img,
		.hover_img_wrap:hover .hover_img .imagebox-rotate {
			-webkit-transform: none !important;
			-ms-transform: none !important;
			transform: none !important;
		}
	}

	/* 리스트형 1줄 모드: 항상 100% */
	.flex-container.list-mode .inner_list.mypage_searchList_listStyle{
		width: 100%;
		flex: 0 0 100%;
	}

	/* 리스트형 2줄 모드: 항상 50% */
	.flex-container.list-mode-2col .inner_list.mypage_searchList_listStyle{
		width: calc(50% - 0px);
		flex: 0 0 calc(50% - 0px);
		box-sizing: border-box;
	}

	/* 리스트형 1줄 모드에서도 깨지지 않도록 */
	.flex-container.list-mode .inner_list.mypage_searchList_listStyle{
		width: 100%;
		flex: 0 0 100%;
		box-sizing: border-box;
	}

	/* search_list_result_toggle.php에서 사용될 때 td 요소를 div처럼 작동하도록
	   🔴 2026-09-28 사장님 «리스트형·리스트형 2줄 전단지가 가운데 정렬로 쌓인다» — 행 안 전단지(.fl-paper) 표 칸까지 block·폭 100%·여백 0 이 되던 것. 전단지 안 칸은 제외(실제 전단지와 같게) */
	.inner_list.mypage_searchList_listStyle td:not(.fl-paper td){
		display: block;
		border: none !important;
		padding: 0 !important;
		width: 100% !important;
	}

	.inner_list.mypage_searchList_listStyle .checkbox_style{
		display: none !important;
	}

	/* search_list_result_toggle.php에서 사용될 때 이미지 td 강제 숨김 */
	/* list_title_info_listStyle.php 내부의 td만 숨김 (list_image_info_listStyle.php의 이미지는 제외) */
	.inner_list.mypage_searchList_listStyle > td[style*="text-align:center"], .inner_list.mypage_searchList_listStyle > td[style*="width:132px"], .inner_list.mypage_searchList_listStyle > td[style*="border-left:0.3px"], .inner_list.mypage_searchList_listStyle > td[style*="vertical-align:top"]{
		display: none !important;
	}

	/* list_title_info_listStyle.php 내부의 이미지 링크만 숨김 (list_image_info_listStyle.php의 .imagebox-wrap 내부 이미지는 제외) */
	.inner_list.mypage_searchList_listStyle > td .hover_img{
		display: none !important;
	}

	/* list_image_info_listStyle.php의 이미지는 표시되도록 보장 */
	.inner_list.mypage_searchList_listStyle .imagebox-wrap, .inner_list.mypage_searchList_listStyle .hover_img_wrap .imagebox-wrap, .inner_list.mypage_searchList_listStyle .imagebox-wrap .hover_img, .inner_list.mypage_searchList_listStyle .imagebox-wrap .imagebox-rotate, .inner_list.mypage_searchList_listStyle .hover_img_wrap .imagebox-wrap .hover_img, .inner_list.mypage_searchList_listStyle .hover_img_wrap .imagebox-wrap .imagebox-rotate{
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* list_image_info_listStyle.php의 이미지 컨테이너 div도 표시 */
	.inner_list.mypage_searchList_listStyle > div[style*="max-width:100%"]{
		display: block !important;
		visibility: visible !important;
	}

	/* 다크모드 스타일 */
	body.dark .title{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .title .mypage_searchName{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .mypage_list_searchList{
		background-color: var(--dark-bg-secondary, #232323) !important;
		border-color: var(--dark-border-primary, #3D3D3D) !important;
	}
	body.dark .mypage_list_searchList:hover{
		background-color: var(--dark-bg-hover, #333333) !important;
	}
	body.dark .mypage_list_searchList a:link, body.dark .mypage_list_searchList a:visited{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .mypage_list_searchList a:hover{
		color: var(--color-hover) !important;
	}
	body.dark .mypage_list_searchList .hover-info{
		background-color: var(--dark-bg-tertiary, #2A2A2A) !important;
		border-top-color: var(--dark-border-primary, #3D3D3D) !important;
		color: var(--dark-text-secondary, #ACACAC) !important;
	}
	body.dark .hover-info .business-name{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .hover-info .address{
		color: var(--dark-text-secondary, #ACACAC) !important;
	}
	body.dark .mypage_list_container{
		background-color: var(--dark-bg-primary, #141414) !important;
	}
	body.dark .list_container_Style{
		color: var(--dark-text-secondary, #ACACAC) !important;
	}
	body.dark .inner_list.mypage_searchList_listStyle{
		background-color: var(--dark-bg-secondary, #232323) !important;
		border-color: var(--dark-border-primary, #3D3D3D) !important;
	}
	body.dark .inner_list.mypage_searchList_listStyle:hover{
		background-color: var(--dark-bg-hover, #333333) !important;   /* 다크 hover = 배경 살짝 밝게(시안B). search·register 공통 */
	}
	body.dark .checkbox_style{
		border-color: var(--dark-border-primary, #3D3D3D) !important;
	}
	body.dark td[style*="border-left:0.3px solid var(--color-border-light)"]{
		border-color: var(--dark-border-primary, #3D3D3D) !important;
	}

	/* 🔴 모바일 리스트 제목 = 당근(mobile1/2) 스타일로 크고 굵게·진하게. 짧은 제목도 3.5em 확보하던
	   min-height 여백을 없애 심플하게 붙인다. PC(@media 밖)는 기존 17.5px 유지. */
	@media (max-width:640px){
		.hover_img_wrap .padding_responsive .title{
			min-height:auto !important; margin-bottom:6px !important;
		}
		.hover_img_wrap .padding_responsive .title .mypage_searchName,
		.hover_img_wrap .padding_responsive .mypage_searchName .sn-1col,
		.hover_img_wrap .padding_responsive .mypage_searchName .sn-2col{
			font-size:21px !important; font-weight:700 !important;
			line-height:1.32 !important; color:#131313 !important;
		}
		/* 제목이 길어도 2줄까지만 표시하고 …처리 → 항목 높이 균일(사용자 자유 제목 안전하게 받아냄) */
		.hover_img_wrap .padding_responsive .mypage_searchName .sn-1col{
			display:-webkit-box !important; -webkit-line-clamp:2 !important;
			-webkit-box-orient:vertical !important; overflow:hidden !important;
			white-space:normal !important; word-break:break-all !important;
		}
		body.dark .hover_img_wrap .padding_responsive .mypage_searchName .sn-1col,
		body.dark .hover_img_wrap .padding_responsive .mypage_searchName .sn-2col{
			color:var(--dark-text-primary, #ECECEC) !important;
		}
	}
/* ===== list_image_info_listStyle.php 에서 이관 (행 반복 <style> → head, FOUC 방지) ===== */
	/* ajax_main_list에서 글씨 길어지면 칸 넘어가는 오류 수정하는 스타일 적용, list_container_Style로 묶어줌 */
	.list_container_Style{
		white-space: normal;
		word-break: break-all;
		line-height: 1.3;
		letter-spacing: -0.5px;
		text-align: left;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		color: var(--color-text-secondary);
	}

	.flex-container:not(.gallery-mode){
		background-color: #F5F5F5;
		padding-left: 8px;
		padding-right: 8px;
		padding-top: 8px;
		padding-bottom: 0;
		box-sizing: border-box;
	}
	
	/* 갤러리형은 별도로 처리 - 중복 제거, 마지막에 통합 스타일로 처리 */

	/* 리스트 스타일 */
	.inner_list{
		background-color:#fff;
		box-sizing: border-box;
		text-align: center;
		padding: 7px 8px 10px 8px;
		margin: 2px 0;
		position: relative;
		flex: 0 0 calc(100%); /* 한 줄에 1개씩 */
		width: 100%;
		border: 1px solid var(--color-border);
		border-radius:8px;
	}
	
	/* search_container 내부 리스트형 1줄에서 inner_list 너비 조정 - 박스형/리스트형 2줄과 동일한 여백 구조 */
	.search_container .flex-container.list-mode .inner_list{
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.inner_list a:link{ text-decoration:none; color:#2f2f2f; }
	.inner_list a:visited{ text-decoration:none; color:#9f9f9f; }
	.inner_list a:hover{ color:var(--color-hover); }

	/* === 리스트형 썸네일 크게 보이기 (핵심) === */
	/* 이미지 박스는 flex 자식으로 줄어들지 않게, 고정폭/비율 유지 */
	/* 리스트형 이미지: 유동폭 + 위쪽만 border-radius */
	.inner_list .imagebox-wrap{
	  position: relative;
	  overflow: hidden;
	  /* 🔴 이미지 컨테이너를 이미지 영역(li-imgcol 정사각)에 꽉 채운다.
	     고정 220×150 이면 정사각 영역과 안 맞아 이미지가 작게 위로 떠 아래가 빈다(당근식 정사각 썸네일 위해 100%). */
	  width: 100% !important;
	  height: 100% !important;
	  border-radius: 10px;
	  display: block !important;
	}

	.inner_list .imagebox-wrap .hover_img{
	  display: block !important;
	  width: 100% !important;
	  height: 100% !important;
	}

	.inner_list .imagebox-rotate{
	  width: 100% !important;
	  height: 100% !important;
	  background-size: cover !important;
	  background-position: center !important;
	  display: block !important;
	  /* ↓ 자식에도 확실히 적용(기존 inherit, % 값 무력화) */
	  border-radius: 0 !important;
	  border-top-left-radius: 8px !important;
	  border-top-right-radius: 8px !important;
	}

	/* 상태 바는 둥글지 않게(이미지 하단 바가 라운드 먹지 않게) */
	.inner_list .status_bar{
	  border-radius: 0 !important;
	}
	/* 리스트형(1·2단)에선 이미지 위 배지(진료대상/상태)를 숨긴다 — 오른쪽 정보 영역과 중복.
	   정사각 이미지로 바뀌며 노출됐고, 박스/갤러리는 이미지 위 배지가 유일한 정보 위치라 유지. (2026-07-18) */
	.inner_list .status_bar{
	  display: none !important;
	}
	
	/* individual/adoption 리스트형에서 빈 status_bar 숨기기 */
	.hover_img_wrap .status_bar:empty, .hover_img_wrap .status_bar:not(:has(*)){
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	

	/* 모바일도 이미지 영역(li-imgcol)을 그대로 100% 채움 (위 규칙 상속) */
	@media (max-width:767px){
		.inner_list .imagebox-wrap{
			width: 100% !important;
			height: 100% !important;
		}
	}
	
	/* 갤러리형 스타일은 list_title_info_galleryStyle.php에서 관리 */

	/* 다크모드 스타일 */
	body.dark .flex-container:not(.gallery-mode){
		background-color: var(--dark-bg-primary, #141414) !important;
	}
	body.dark .inner_list{
		background-color: var(--dark-bg-secondary, #232323) !important;
		border-color: var(--dark-border-primary, #3D3D3D) !important;
	}
	body.dark .inner_list:hover{
		background-color: var(--dark-bg-hover, #333333) !important;   /* 다크 리스트 hover 배경 통일(var(--color-text-secondary, #393939)) */
	}
	body.dark .inner_list a:link{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .inner_list a:visited{
		color: var(--dark-text-link-visited, #8C8C8C) !important;
	}
	body.dark .inner_list a:hover{
		color: var(--color-hover) !important;
	}
	body.dark .inner_list .imagebox_time_listStyle{
		color: #fff !important;   /* 다크도 흰 글씨 + 부드러운 halo (그라데이션/외곽선 통일) */
		text-shadow: 0 0 3px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.7) !important;
	}
	/* ★ 루리식 날짜: 흰 글씨 + 부드러운 어두운 halo(외곽선) — 이미지(사진) 위에서도 읽히고 깔끔.
	   각진 4방향 solid(지저분) 대신 blur halo 로 부드럽게. 배경 바 없음. 라이트/다크 공통 */
	.imagebox_time_listStyle{
		position:absolute !important; top:6px !important; left:8px !important; right:auto !important;
		padding:0 !important;
		font-size:11px !important; font-weight:600 !important; text-align:left !important;
		color:#fff !important;
		text-shadow:0 0 3px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.7) !important;
		background:none !important;
		z-index:3 !important; pointer-events:none;
	}
/* ===== list_title_info_boxStyle.php 에서 이관 (행마다 반복 <style> → head) ===== */
	/*ajax_main_list에서 글씨 길어지면 칸 넘어가는 오류 수정하는 스타일 적용*/
	.list_container_Style{
        white-space: normal;
        word-break: break-all;
        line-height: 1.3;
        letter-spacing: -0.5px;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--color-text-secondary);
    }
	
	
    /* 박스형/리스트형 전용 스타일 - 갤러리형과 완전 분리 */
    .flex-container.grid-mode, .flex-container.list-mode{
        display: flex;
		/*
        justify-content: space-between;
		*/
        flex-wrap: wrap;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 8px;
        padding-bottom: 0;
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 0;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		box-sizing: border-box;
		overflow-x: hidden !important;
		background-color: #F5F5F5;
    }
	
	/* search_container 내부의 flex-container는 부모의 100%를 차지하되 넘어가지 않도록 */
	.search_container .flex-container.grid-mode, .search_container .flex-container.list-mode{
		width: 100% !important;
		max-width: 100% !important;
		min-width: 100% !important;
		overflow-x: hidden !important;
		overflow: hidden !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
		padding-top: 8px !important;
		padding-bottom: 0 !important;
	}
	
	/* search_container 내부의 flex-container 아이템이 잘리지 않도록 - 박스형/리스트형 2줄과 동일하게 (갤러리형 제외) */
	.search_container .flex-container.grid-mode > *, .search_container .flex-container.list-mode > *{
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	
	/* 리스트형 1줄에서 inner_list 너비 조정 - 박스형/리스트형 2줄과 동일한 여백 구조 */
	.search_container .flex-container.list-mode .inner_list{
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	.search_container .flex-container.grid-mode .inner_listbox, .search_container .flex-container.list-mode .inner_listbox{
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	


    /* 박스형/리스트형 전용 inner_listbox - 갤러리형과 완전 분리 */
    .flex-container.grid-mode .inner_listbox, .flex-container.list-mode .inner_listbox{
		background-color:#fff;
        box-sizing: border-box;
        text-align: center;
        padding-bottom: 6px;
        /* align-self 는 아래에서 모드별로: grid=stretch(같은 줄 높이 통일) / list=flex-start(기존) */
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        margin-left: 5px !important;
        margin-right: 0 !important;
        position: relative;
        flex: 0 0 calc((100% - 5px) / 2); /* 한 줄에 2개씩 나오도록 수정 */
        width: calc((100% - 5px) / 2);
        border: 1px solid var(--color-border);
        border-radius: 8px;
    }
    /* ★ align-self 모드별 분리 — grid(박스)형은 stretch 로 같은 줄 카드 높이 통일
       → 그 줄에 2줄 제목이 있으면 나머지 카드도 그 높이에 맞춰지고, 태그·가격·주소 라인이 일치.
       리스트형(list-mode)은 세로 배치라 기존 flex-start 유지(빈 하단 여백 방지). */
    .flex-container.grid-mode .inner_listbox{ align-self: stretch; }
    .flex-container.list-mode .inner_listbox{ align-self: flex-start; }
	
	/* 박스형/리스트형 첫 번째 아이템 - 왼쪽 패딩 침범 방지 */
	.flex-container.grid-mode .inner_listbox:nth-child(2n+1), .flex-container.list-mode .inner_listbox:nth-child(2n+1){
		margin-left: 0 !important;
	}
	
	/* 박스형/리스트형 각 행의 마지막 아이템 (2n) - 오른쪽 패딩 침범 방지 */
	.flex-container.grid-mode .inner_listbox:nth-child(2n), .flex-container.list-mode .inner_listbox:nth-child(2n){
		margin-right: 0 !important;
	}

	
    /* 박스형/리스트형 전용 링크 스타일 - 갤러리형과 완전 분리 */
    .flex-container.grid-mode .inner_listbox a:link, .flex-container.list-mode .inner_listbox a:link{
        text-decoration: none;
        color: #2f2f2f;
    }

    .flex-container.grid-mode .inner_listbox a:visited, .flex-container.list-mode .inner_listbox a:visited{
        text-decoration: none;
        color: #9f9f9f;
    }

    .flex-container.grid-mode .inner_listbox a:hover, .flex-container.list-mode .inner_listbox a:hover{
        color: var(--color-hover);
    }
  

    /* ★ 루리식 날짜: 흰 글씨 + 부드러운 어두운 halo(외곽선). 배경 바 없음. 라이트/다크 공통 */
    .imagebox_time_boxStyle{
        position:absolute !important; top:6px !important; left:8px !important; right:auto !important;
        padding:0 !important;
        font-size:11px !important; font-weight:600 !important; text-align:left !important;
        color:#fff !important;
        text-shadow:0 0 3px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.7) !important;
        background:none !important;
        z-index:3 !important; pointer-events:none;
    }

	/* hover overlay (wait.php와 post.php에서만 표시) - 박스형/리스트형 전용 */
	.flex-container.grid-mode .inner_listbox .imagebox-wrap, .flex-container.list-mode .inner_listbox .imagebox-wrap{
		position: relative;
		overflow: hidden;
	}

	.flex-container.grid-mode .inner_listbox .hover-overlay, .flex-container.list-mode .inner_listbox .hover-overlay{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 10px;
		z-index: 20;
		pointer-events: auto;
	}

	.flex-container.grid-mode .inner_listbox:hover .hover-overlay, .flex-container.grid-mode .inner_listbox .imagebox-wrap:hover .hover-overlay, .flex-container.list-mode .inner_listbox:hover .hover-overlay, .flex-container.list-mode .inner_listbox .imagebox-wrap:hover .hover-overlay{
		display: flex;
	}

	/* 박스형/리스트형 전용 hover 버튼 스타일 */
	.flex-container.grid-mode .hover-overlay .hover-btn, .flex-container.list-mode .hover-overlay .hover-btn{
		padding: 8px 16px;
		background-color: var(--color-secondary, #2B5F9E); /* 구 블루 #3978B5 → 2차색(이동) */
		color: #fff;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		text-decoration: none;
		display: inline-block;
		white-space: nowrap;
	}

	.flex-container.grid-mode .hover-overlay .hover-btn:hover, .flex-container.list-mode .hover-overlay .hover-btn:hover{
		background-color: var(--color-primary-hover, #2b5f9e);
	}

	.flex-container.grid-mode .hover-overlay .hover-btn-secondary, .flex-container.list-mode .hover-overlay .hover-btn-secondary{
		background-color: var(--color-text-tertiary, #666);
	}

	.flex-container.grid-mode .hover-overlay .hover-btn-secondary:hover, .flex-container.list-mode .hover-overlay .hover-btn-secondary:hover{
		background-color: var(--color-text-tertiary, #666);
	}

	.flex-container.grid-mode .hover-overlay .hover-btn-danger, .flex-container.list-mode .hover-overlay .hover-btn-danger{
		background-color: var(--color-error);
	}

	.flex-container.grid-mode .hover-overlay .hover-btn-danger:hover, .flex-container.list-mode .hover-overlay .hover-btn-danger:hover{
		background-color: var(--color-primary-dark, #c43a3e);
	}

	/* 박스형 모드에서 gallery-hover-info 숨김 */
	.flex-container.grid-mode .inner_listbox .gallery-hover-info, .flex-container.list-mode .inner_listbox .gallery-hover-info{
		display: none !important;
	}

	/* ===== 박스형(grid-mode) 전용: gap 기반 균등 간격 ===== */
	/* 컨테이너에 gap 적용 - nth-child 마진 충돌 완전 제거 */
	.flex-container.grid-mode{
		column-gap: 5px !important;
		row-gap: 14px !important;
	}

	/* 박스형 아이템: 한 줄 개수 = 관리자 표시 설정 「박스형 한 줄 개수」(4·5·6) → inc/header.php 가 body.an-grid-cols-N 으로 내려줌.
	   [2026-09-12 사장님 결정] 4개(카드 285·사진 170·제목 20) → 6개 시험 → **5개 확정**(카드 227·사진 227×135·제목 17·상호/주소 두 줄, "5개가 한계").
	   6개는 칩 최대치 시뮬레이션에서 가격 칸 넘침·제목 15 로 반려(티어는 남겨 관리자에서 고를 수 있음).
	   목록 폭 1153 기준 시안 md/mockup/grid_cols_260912. 열 수별 수치는 아래 body.an-grid-cols-* 변수 한 곳에서.
	   🔴 페이지당 개수(grid-mode)는 열 수의 배수(5개=10·15·20)로 — 아니면 마지막 줄이 빈다. */
	body{ --an-grid-cols:5; --an-grid-img:135px; --an-grid-title:17px; --an-grid-primary:12.5px; --an-grid-biz:13px; --an-grid-pad-x:8px; }   /* 기본 = 5개(2026-09-12 사장님 "5개가 한계") */
	body.an-grid-cols-4{ --an-grid-cols:4; --an-grid-img:170px; --an-grid-title:20px; --an-grid-primary:13.5px; --an-grid-biz:14px; --an-grid-pad-x:10px; }
	body.an-grid-cols-6{ --an-grid-cols:6; --an-grid-img:135px; --an-grid-title:15px; --an-grid-primary:12px; --an-grid-biz:12px; --an-grid-pad-x:7px; }
	.flex-container.grid-mode .inner_listbox, .flex-container.grid-mode .inner_listbox:nth-child(n){
		width: calc((100% - (var(--an-grid-cols) - 1) * 5px) / var(--an-grid-cols)) !important;
		flex: 0 0 calc((100% - (var(--an-grid-cols) - 1) * 5px) / var(--an-grid-cols)) !important;
		margin: 0 !important;
	}

	/* 750px 미만에서는 한 줄에 2개 아이템 표시 */
	@media (max-width: 767px){
		.flex-container.grid-mode {
			column-gap: 5px !important;
			row-gap: 16px !important;
		}
		.flex-container.grid-mode .inner_listbox,
		.flex-container.grid-mode .inner_listbox:nth-child(n) {
			width: calc((100% - 5px) / 2) !important;
			flex: 0 0 calc((100% - 5px) / 2) !important;
			margin: 0 !important;
		}
	}

	
		
	
	
	/* 마지막 행의 빈 칸을 채우기 위한 스타일(예를들어 마지막페이지에 4개 띄워주는데 3개일 시 1개는 빈칸으로 나오게 반응형 대응) */
	.flex-container:after{
		content: "";
		flex-grow: 1;
	}

	/* 다크모드 스타일 */
	body.dark .flex-container.grid-mode, body.dark .flex-container.list-mode{
		background-color: var(--dark-bg-primary, #141414) !important;
	}
	body.dark .flex-container.grid-mode .inner_listbox, body.dark .flex-container.list-mode .inner_listbox{
		background-color: var(--dark-bg-secondary, #232323) !important;
		border-color: var(--dark-border-primary, #3D3D3D) !important;
	}
	body.dark .flex-container.grid-mode .inner_listbox:hover, body.dark .flex-container.gallery-mode .inner_listbox:hover, body.dark .flex-container.list-mode .inner_listbox:hover, body.dark .flex-container.list-mode-2col .inner_listbox:hover{
		background-color: var(--dark-bg-hover, #333333) !important;   /* 다크 박스 hover = 배경 밝게(리스트와 통일) */
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
	}
	body.dark .flex-container.grid-mode .inner_listbox a:link, body.dark .flex-container.list-mode .inner_listbox a:link{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .flex-container.grid-mode .inner_listbox a:visited, body.dark .flex-container.list-mode .inner_listbox a:visited{
		color: var(--dark-text-link-visited, #8C8C8C) !important;
	}
	body.dark .flex-container.grid-mode .inner_listbox a:hover, body.dark .flex-container.list-mode .inner_listbox a:hover{
		color: var(--color-hover) !important;
	}
	body.dark .flex-container.grid-mode .inner_listbox .imagebox_time_boxStyle, body.dark .flex-container.list-mode .inner_listbox .imagebox_time_boxStyle, body.dark .flex-container.list-mode-2col .inner_listbox .imagebox_time_boxStyle, body.dark .flex-container.gallery-mode .inner_listbox .imagebox_time_boxStyle{
		color: #fff !important;   /* 다크도 흰 글씨 + 부드러운 halo */
		text-shadow: 0 0 3px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.7) !important;
	}
	body.dark .flex-container.grid-mode .inner_listbox .title, body.dark .flex-container.list-mode .inner_listbox .title{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
	body.dark .flex-container.grid-mode .inner_listbox .mypage_searchName, body.dark .flex-container.list-mode .inner_listbox .mypage_searchName{
		color: var(--dark-text-primary, #ECECEC) !important;
	}
/* ===== list_title_info_galleryStyle.php 에서 이관 (행마다 반복 <style> → head) ===== */
/* ============================================
 * 갤러리형 전용 스타일 - 완전히 새로 작성
 * 리스트형/박스형과 동일한 외부 여백: 상 8px, 좌 8px, 우 8px, 하 0
 * ============================================ */

/* 1. 갤러리형 = 인스타식 grid. PC 는 Ctrl+줌(뷰포트 폭) 따라 2/4/8 — 원래 잘 되던 1900/2100 브레이크 복원.
   ⚠️ 모바일(작은 화면)은 이 큰 브레이크가 안 맞아 mobile/m_css/m_css_bundle.php 가 작은 브레이크(2/4/8)로 override. */
.flex-container.gallery-mode, .search_container .flex-container.gallery-mode, div.flex-container.gallery-mode, div.search_container .flex-container.gallery-mode{
	display: grid !important;
	grid-template-columns: repeat(var(--an-gal-cols, 5), 1fr) !important;   /* 열 수 = 관리자 표시 설정 「갤러리 열 수」(body.an-gal-cols-N, 기본 5). 2026-09-12 이전엔 뷰포트 ≥1600 8열 / 그 아래 4열이라 같은 개수가 모니터마다 딴 길이였음 */
	gap: 2px !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
	background-color: #F5F5F5 !important;
}
/* 갤러리 열 수 티어 — 목록 폭 1153 기준 정사각 한 변: 4열 287 · 5열 229 · 8열 142 · 10열 114. 뷰포트 분기 없음(컨테이너 폭이 고정이라 의미 없었음).
   🔴 페이지당 개수(공통 page-size)는 열 수의 배수로 — 기본 20 = 5열 4줄. */
body{ --an-gal-cols:5; }
body.an-gal-cols-4{ --an-gal-cols:4; }
body.an-gal-cols-8{ --an-gal-cols:8; }
body.an-gal-cols-10{ --an-gal-cols:10; }
/* 옛 8열 전제 nth-child(n+9) 규칙(둘째 줄부터 윗선 제거·-1px 겹침)은 gap 레이아웃에서 무의미 + 열 수가 바뀌면 틀림 → 중화 */
.flex-container.gallery-mode .inner_listbox:nth-child(n+9){ margin-top:0 !important; border-top:1px solid var(--color-border) !important; }
/* PC 는 2열 없음 — 4열이 최소(2열은 카드가 너무 커서 제외). 모바일 폰(2열)은 m_css_bundle 이 override. */

/* 2. 갤러리형 아이템 기본 스타일 - 한 줄에 6개 (인라인 스타일 완전 덮어쓰기) */
.flex-container.gallery-mode .inner_listbox, .search_container .flex-container.gallery-mode .inner_listbox, div.flex-container.gallery-mode .inner_listbox, div.search_container .flex-container.gallery-mode .inner_listbox{
	/* grid 셀이 폭 결정 → width 고정 제거. aspect-ratio 1로 정사각(인스타식). */
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	aspect-ratio: 1 / 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 4px !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	background-color: #fff !important;
	position: relative;
}

/* 7. 갤러리형 첫 번째 행 아이템 */
.flex-container.gallery-mode .inner_listbox:nth-child(-n+8){
	margin-top: 0 !important;
}

/* 8. 갤러리형 두 번째 행 이후 아이템 */
.flex-container.gallery-mode .inner_listbox:nth-child(n+9){
	margin-top: -1px !important;
	border-top: none !important;
}

/* 9. 갤러리형 마지막 행 아이템 */
.flex-container.gallery-mode .inner_listbox:nth-last-child(-n+8){
	margin-bottom: 0 !important;
}

/* 10. 갤러리형 border-radius 적용 */
.flex-container.gallery-mode .inner_listbox:first-child{
	border-top-left-radius: 4px !important;
	border-bottom-left-radius: 4px !important;
}

.flex-container.gallery-mode .inner_listbox:nth-child(8n){
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

.flex-container.gallery-mode .inner_listbox:nth-child(-n+8){
	border-top-left-radius: 4px !important;
	border-top-right-radius: 4px !important;
}

.flex-container.gallery-mode .inner_listbox:nth-last-child(-n+8){
	border-bottom-left-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

/* 11. 갤러리형 모드: 이미지만 표시 */
.flex-container.gallery-mode .inner_listbox{
	padding-bottom: 0 !important;
	height: auto;
	overflow: hidden;
	position: relative;
}

/* ★ 이미지를 카드에 absolute 로 가둠 → 콘텐츠(이미지)가 카드 높이를 밀어내지 못해 aspect-ratio:1(정사각) 유지.
   (기존엔 height:auto + 이미지 static 이라 이미지 원본비율로 카드가 가로직사각이 됐음 = bad.png 원인) */
.flex-container.gallery-mode .inner_listbox .card-content-wrapper, .flex-container.gallery-mode .inner_listbox .imagebox-wrap{
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
}
.flex-container.gallery-mode .inner_listbox .hover_img, .flex-container.gallery-mode .inner_listbox .imagebox-rotate{
	width: 100% !important;
	height: 100% !important;
	display: block;
	background-size: cover;
	background-position: center;
}
.flex-container.gallery-mode .inner_listbox img, .flex-container.gallery-mode .inner_listbox .empty_image{
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* 12. 갤러리형 모드에서 이미지 외 모든 정보 숨김 */
.flex-container.gallery-mode .inner_listbox .card-content-wrapper > .status-bar, .flex-container.gallery-mode .inner_listbox .card-content-wrapper > div:not(.imagebox-wrap):not(.gallery-hover-info){
	display: none !important;
}

.flex-container.gallery-mode .inner_listbox > div:not(.card-content-wrapper):not(.gallery-hover-info), .flex-container.gallery-mode .inner_listbox .no_drag, .flex-container.gallery-mode .inner_listbox .title, .flex-container.gallery-mode .inner_listbox > div[style*="position: relative"]:not(.imagebox-wrap):not(.gallery-hover-info):not(.card-content-wrapper){
	display: none !important;
}

/* 13. 갤러리형: 이미지가 카드 정사각을 꽉 채움 — absolute+inset:0, 200px 고정 제거(box.png 여백 원인) */
.flex-container.gallery-mode .inner_listbox .card-content-wrapper{
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	overflow: hidden;
}

.flex-container.gallery-mode .inner_listbox .card-content-wrapper > .imagebox-wrap{
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	overflow: hidden;
	border-radius: 4px;
}

/* 14. 갤러리형 모드 hover 시 정보 표시 */
/* [2026-09-12 사장님 V4] 갤러리형 hover = 전체 검은 오버레이(75%) → 아래에서 올라오는 어두운 캡션, 왼쪽 정렬.
   위 절반은 사진이 남고 아래에 제목(2줄)·특징 칩(최대 3, search_list_toggle_js.php 가 카드의 .feat-tags 에서 복제)·상호·지역·과목.
   hover 전엔 사진만(모바일은 hover 없음 — 사장님 선택). 시안 md/mockup/grid_cols_260912/gallery_caption.html V4.
   🔴 글자색은 사이트 규칙이 어둡게 덮으므로 !important 로 흰색 고정(안 하면 어두운 캡션에 글자가 사라짐). */
.flex-container.gallery-mode .inner_listbox .gallery-hover-info{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	background-color: rgba(20, 14, 12, 0.86);
	display: none !important;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 12px 11px 11px;
	box-sizing: border-box;
	z-index: 15;
	color: #fff !important;
	text-align: left;
	overflow: hidden;
	pointer-events: none;
}

.flex-container.gallery-mode .inner_listbox:hover .gallery-hover-info, .flex-container.gallery-mode .inner_listbox .card-content-wrapper:hover .gallery-hover-info, .flex-container.gallery-mode .inner_listbox .imagebox-wrap:hover .gallery-hover-info{
	display: flex !important;
}

/* 15. 갤러리형: 이미지가 카드 정사각 꽉 채움 (200px 고정 → 100%, box.png 여백 원인 제거) */
.flex-container.gallery-mode .inner_listbox .imagebox-wrap .hover_img, .flex-container.gallery-mode .inner_listbox .imagebox-wrap .imagebox-rotate{
	height: 100% !important;
	min-height: 0 !important;
	border-radius: 4px !important;
	overflow: hidden;
}

#wrap .gallery-hover-info .gallery-title{
	font-size: 13.5px;
	font-weight: 700;
	margin: 0 0 7px;
	text-align: left;
	color: #fff !important;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
#wrap .gallery-hover-info .gh-chips{ display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 7px; }
#wrap .gallery-hover-info .gh-chips span{ font-size: 10px; font-weight: 700; line-height: 1.2; padding: 2px 5px; border-radius: 3px; background: rgba(255,255,255,.22); color: #fff !important; }
#wrap .gallery-hover-info .gh-chips span.em{ background: var(--color-brand, #D8432A); }
#wrap .gallery-hover-info .gallery-details{
	font-size: 12px;
	color: rgba(255,255,255,.85) !important;
	text-align: left;
	line-height: 1.5;
	margin: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#wrap .gallery-hover-info .gallery-details:nth-of-type(1){ font-weight: 700; color: #fff !important; }   /* 상호 */
#wrap .gallery-hover-info .gh-course{ font-size: 11px; color: rgba(255,255,255,.8) !important; margin-top: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 16. 모바일 반응형: 750px 미만에서는 한 줄에 2개 아이템 표시 */
@media (max-width: 767px){
	.flex-container.gallery-mode {
		padding-top: 8px !important;
		padding-right: 8px !important;
		padding-bottom: 0 !important;
		padding-left: 8px !important;
	}
	
	.flex-container.gallery-mode .inner_listbox {
		width: calc(100% / 2) !important;
		flex: 0 0 calc(100% / 2) !important;
		max-width: calc(100% / 2) !important;
		margin: 0 !important;
	}
	
	/* 모바일 첫 번째 아이템 - 왼쪽 패딩 침범 방지 */
	.flex-container.gallery-mode .inner_listbox:first-child,
	.flex-container.gallery-mode .inner_listbox:nth-child(odd) {
		margin-left: 0 !important;
	}
	
	/* 모바일 각 행의 마지막 아이템 (짝수) - 오른쪽 패딩 침범 방지 */
	.flex-container.gallery-mode .inner_listbox:nth-child(even) {
		margin-right: 0 !important;
	}
	
	/* 모바일 전체 마지막 아이템 - 오른쪽 패딩 침범 방지 */
	.flex-container.gallery-mode .inner_listbox:last-child {
		margin-right: 0 !important;
	}
	
	.flex-container.gallery-mode .inner_listbox:nth-child(-n+2) {
		margin-top: 0 !important;
		border-top-left-radius: 4px !important;
		border-top-right-radius: 4px !important;
	}
	
	.flex-container.gallery-mode .inner_listbox:nth-child(n+3) {
		margin-top: -1px !important;
		border-top: none !important;
	}
	
	.flex-container.gallery-mode .inner_listbox:nth-last-child(-n+2) {
		margin-bottom: 0 !important;
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}
	
	.flex-container.gallery-mode .inner_listbox:nth-child(odd) {
		border-top-left-radius: 4px !important;
		border-bottom-left-radius: 4px !important;
	}
	
	.flex-container.gallery-mode .inner_listbox:nth-child(even) {
		border-top-right-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}
}

/* 다크모드 스타일 */
body.dark .flex-container.gallery-mode{
	background-color: var(--dark-bg-primary, #141414) !important;
}
body.dark .flex-container.gallery-mode .inner_listbox{
	background-color: var(--dark-bg-secondary, #232323) !important;
	border-color: var(--dark-border-primary, #3D3D3D) !important;
}
body.dark .flex-container.gallery-mode .inner_listbox:hover{
	background-color: var(--dark-bg-hover, #333333) !important;   /* 갤러리 박스 hover 배경 통일(var(--color-text-secondary, #393939)) */
}
body.dark .flex-container.gallery-mode .inner_listbox a:link{
	color: var(--dark-text-primary, #ECECEC) !important;
}
body.dark .flex-container.gallery-mode .inner_listbox a:visited{
	color: var(--dark-text-link-visited, #8C8C8C) !important;
}
body.dark .flex-container.gallery-mode .inner_listbox a:hover{
	color: var(--color-hover) !important;
}
body.dark .flex-container.gallery-mode .inner_listbox .gallery-hover-info{
	color: var(--dark-text-secondary, #ACACAC) !important;
}
body.dark .flex-container.gallery-mode .inner_listbox .title{
	color: var(--dark-text-primary, #ECECEC) !important;
}
body.dark .flex-container.gallery-mode .inner_listbox .mypage_searchName{
	color: var(--dark-text-primary, #ECECEC) !important;
}
/* ===== search_list_result_toggle.php 에서 이관 (아이템마다 반복 <style> → head) ===== */
/* register 액션 버튼 */
.reg-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-sizing: border-box;
    line-height: 1;
}
.reg-btn-primary{
    background-color: var(--ui-action, #D84841);
    color: #fff !important;
    border: none;
}
.reg-arrow{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-left: 5px;
}
a.reg-btn:hover, a.reg-btn:visited, a.reg-btn:active, a.reg-btn:focus{
    text-decoration: none !important;
}
a.reg-btn-primary, a.reg-btn-primary:hover, a.reg-btn-primary:visited, a.reg-btn-primary:active{
    background-color: var(--ui-action, #D84841) !important;
    color: #fff !important;
}
.reg-btn-secondary{
    background-color: #fff;
    color: #555 !important;
    border: 1px solid #ccc;
}
a.reg-btn-secondary, a.reg-btn-secondary:hover, a.reg-btn-secondary:visited, a.reg-btn-secondary:active{
    background-color: #fff !important;
    border-color: #ccc !important;
    color: #555 !important;
}
/* [2026-08-13] 삭제 버튼 — 우상단 X 폐지 후 하단 액션바(내용수정 옆)로 이동.
   아웃라인 위험색(중립보다 눈에 띄되 결제 primary 와는 구분). hover 시 채움. */
.reg-btn-danger{
    background-color: #fff;
    color: var(--ui-action, #d84841) !important;
    border: 1px solid color-mix(in srgb, var(--ui-action, #d84841) 45%, #fff);
}
a.reg-btn-danger, a.reg-btn-danger:visited, a.reg-btn-danger:active{
    background-color: #fff !important;
    color: var(--ui-action, #d84841) !important;
    border-color: color-mix(in srgb, var(--ui-action, #d84841) 45%, #fff) !important;
}
a.reg-btn-danger:hover, a.reg-btn-danger:focus{
    background-color: var(--ui-action, #d84841) !important;
    color: #fff !important;
    border-color: var(--ui-action, #d84841) !important;
}
body.dark .reg-btn-danger{
    background-color: var(--dark-bg-secondary, #232323);
    color: var(--ui-select, #e66b65) !important;
    border-color: color-mix(in srgb, var(--ui-select, #e66b65) 50%, var(--dark-bg-secondary, #232323));
}
body.dark a.reg-btn-danger:hover{
    background-color: var(--ui-select, #e66b65) !important;
    color: #1a1a1a !important;
    border-color: var(--ui-select, #e66b65) !important;
}
/* [2026-09-02] 게재중 글 재결제 진입 버튼(끌어올리기·리더 광고) — 주색 아웃라인, hover 채움.
   danger 와 골격은 같지만 의미(광고 유도)가 달라 별도 클래스. 등록하기(primary)와 급 구분. */
.reg-btn-promote{
    background-color: #fff;
    color: var(--ui-action, #d84841) !important;
    border: 1px solid color-mix(in srgb, var(--ui-action, #d84841) 45%, #fff);
    font-weight: 600;
}
a.reg-btn-promote, a.reg-btn-promote:visited, a.reg-btn-promote:active{
    background-color: #fff !important;
    color: var(--ui-action, #d84841) !important;
    border-color: color-mix(in srgb, var(--ui-action, #d84841) 45%, #fff) !important;
}
a.reg-btn-promote:hover, a.reg-btn-promote:focus{
    background-color: var(--ui-action, #d84841) !important;
    color: #fff !important;
    border-color: var(--ui-action, #d84841) !important;
}
body.dark .reg-btn-promote{
    background-color: var(--dark-bg-secondary, #232323);
    color: var(--ui-select, #e66b65) !important;
    border-color: color-mix(in srgb, var(--ui-select, #e66b65) 50%, var(--dark-bg-secondary, #232323));
}
body.dark a.reg-btn-promote:hover{
    background-color: var(--ui-select, #e66b65) !important;
    color: #1a1a1a !important;
    border-color: var(--ui-select, #e66b65) !important;
}
/* [2026-09-02 ①안] 등록글관리 액션 전용 줄 — 왼쪽 관리(상태·수정·삭제) ↔ 오른쪽 광고하기/광고중 좌우 분리.
   리스트형은 주소줄 아래 새 줄, 박스형은 기존 하단 줄 재사용(가운데 정렬 폐지). */
.register-action-line{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border, #e4e4e4);
}
.register-action-line .register-action-spacer{ flex: 1; }
/* [2026-09-09 사장님 간격.png] 박스형 등록글관리 카드 하단 두 가지 수리
   ① 상호·주소 칸: 점선 아래 9px / 아래 5px+액션 줄 margin 8px = 13px 로 비대칭 → 글이 위로 치우쳐 보임. 위아래 8px 씩으로.
   ② 액션 줄: 상태 드롭다운·수정·끌올·광고하기 4개(≈350px)가 카드 안폭(≈296px)을 넘어 광고하기가 잘림 → 줄바꿈 허용,
      광고하기는 margin-left:auto 라 같은 줄이든 둘째 줄이든 항상 오른쪽 끝. */
#wrap .inner_listbox .li-foot.has-action{ padding-top: 8px !important; padding-bottom: 8px !important; }
/* [2026-09-09 1안 확정 "아이콘 바"] 박스형 액션 줄 = 모바일 등록글관리(_m_manage_list_view.php .mrm-acts)와 같은 아이콘+글자 칸 바.
   마크업은 그대로(상태 드롭다운·수정·전단지·끌올·광고하기·등록하기) — CSS 만으로 칸으로 세운다.
   칸 = 균등 폭·52px, 아이콘 16px 위 + 글자 11.5px 아래. 상태 칸 = 색 점 + "분양중 ▾"(초록 바탕) / "분양완료 ▾"(회색 바탕), 누르면 종전 메뉴.
   끌올 칩(충전/N회)·광고중 만료일은 숨김(상단 보유 줄·title 로). 🔴 overflow:hidden 금지 — 상태 메뉴(absolute)가 잘린다 → 모서리는 첫/끝 칸 radius 로.
   시안 md/mockup/action_row_260909/redesign.html (스위치·세그먼트·한 줄 압축은 전부 반려). */
#wrap .inner_listbox .register-action-line{ margin: 0 6px 6px; padding: 0 !important; gap: 0; flex-wrap: nowrap; align-items: stretch; overflow: visible;
    border: 1px solid var(--color-border, #ddd); border-radius: 10px; background: var(--color-bg-white, #fff); }
#wrap .inner_listbox .register-action-line .register-action-spacer, #wrap .inner_listbox .register-action-line .reg-jump-cnt, #wrap .inner_listbox .register-action-line .adon-until, #wrap .inner_listbox .register-action-line .reg-arrow, #wrap .inner_listbox .register-action-line .st-caret{ display: none !important; }
#wrap .inner_listbox .register-action-line > .reg-btn, #wrap .inner_listbox .register-action-line > .an-status-dd, #wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn{
    flex: 1 1 0; min-width: 0; height: 52px; margin: 0 !important; padding: 0 2px !important; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 11.5px; font-weight: 700; line-height: 1.1; white-space: nowrap; color: var(--color-text-secondary, #555) !important; text-decoration: none !important; }
#wrap .inner_listbox .register-action-line > .reg-btn, #wrap .inner_listbox .register-action-line > .an-status-dd{ border-right: 1px solid var(--color-border, #ddd) !important; }
#wrap .inner_listbox .register-action-line > :last-child{ border-right: 0 !important; }
#wrap .inner_listbox .register-action-line > :first-child, #wrap .inner_listbox .register-action-line > :first-child > .an-status-dd-btn{ border-radius: 9px 0 0 9px !important; }
#wrap .inner_listbox .register-action-line > :last-child, #wrap .inner_listbox .register-action-line > :last-child > .an-status-dd-btn{ border-radius: 0 9px 9px 0 !important; }
#wrap .inner_listbox .register-action-line > .an-status-dd{ padding: 0 !important; position: relative; }
#wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn{ width: 100%; height: 100%; }
#wrap .inner_listbox .register-action-line > .reg-btn:hover, #wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn:hover{ background: var(--color-bg-gray, #F3F3F5) !important; }
/* 아이콘(Font Awesome 6 Free) — 칸 위쪽 */
#wrap .inner_listbox .register-action-line > .reg-btn::before{ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; line-height: 1; height: 16px; }
#wrap .inner_listbox .register-action-line > .reg-btn-secondary::before{ content: '\f303'; }          /* pen 수정 */
#wrap .inner_listbox .register-action-line > .reg-btn-flyer::before{ content: '\f02f'; }              /* print 전단지 */
#wrap .inner_listbox .register-action-line > .reg-btn-primary::before{ content: '\f055'; }            /* circle-plus 등록하기 */
#wrap .inner_listbox .register-action-line > .reg-btn-primary{ color: var(--color-text-emphasis, #D8432A) !important; background: color-mix(in srgb, var(--color-primary, #D8432A) 9%, #fff) !important; flex: 1.6 1 0; }
#wrap .inner_listbox .register-action-line > .reg-btn-jump::before{ display: none; }
#wrap .inner_listbox .register-action-line > .reg-btn-jump > i{ font-size: 16px; line-height: 1; height: 16px; }
#wrap .inner_listbox .register-action-line > .reg-btn-jump{ color: #2C6BAE !important; }
#wrap .inner_listbox .register-action-line > .reg-btn-jump.jump-cool{ color: var(--color-text-light, #999) !important; }
#wrap .inner_listbox .register-action-line > .reg-btn-promote::before, #wrap .inner_listbox .register-action-line > .reg-btn-adon::before{ content: '\f08d'; }               /* 2026-09-27 thumbtack 상단 고정(확성기는 공지·업체홍보와 겹쳐 교체, 사장님) · 광고하기·광고중 */
#wrap .inner_listbox .register-action-line > .reg-btn-promote, #wrap .inner_listbox .register-action-line > .reg-btn-adon{ color: var(--color-text-emphasis, #D8432A) !important; }
/* 상태 칸: 점(위) + 글자 + ▾ */
#wrap .inner_listbox .register-action-line .an-status-dd-btn .st-dot{ width: 9px; height: 9px; margin: 3px 0 4px; }
#wrap .inner_listbox .register-action-line .an-status-dd-btn .st-txt::after{ content: ' \25BE'; font-size: 9px; }
#wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn.st-ing{ color: var(--color-tertiary, #3F7D5C) !important; background: color-mix(in srgb, var(--color-tertiary, #3F7D5C) 9%, #fff) !important; }
#wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn.st-end{ color: var(--color-text-secondary, #6B6B6F) !important; background: var(--color-bg-gray, #F3F3F5) !important; }
#wrap .inner_listbox .register-action-line .an-status-menu{ left: 0; right: auto; min-width: 140px; }
body.dark #wrap .inner_listbox .register-action-line{ border-color: var(--dark-border-secondary, #4A4A4A); background: var(--dark-bg-secondary, #232323); }
body.dark #wrap .inner_listbox .register-action-line > .reg-btn, body.dark #wrap .inner_listbox .register-action-line > .an-status-dd{ border-right-color: var(--dark-border-secondary, #4A4A4A) !important; }
body.dark #wrap .inner_listbox .register-action-line > .reg-btn, body.dark #wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn{ color: var(--dark-text-secondary, #ACACAC) !important; }
body.dark #wrap .inner_listbox .register-action-line > .reg-btn:hover, body.dark #wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn:hover{ background: var(--dark-bg-hover, #333) !important; }
body.dark #wrap .inner_listbox .register-action-line > .reg-btn-primary{ background: color-mix(in srgb, var(--color-primary, #E45B42) 18%, #232323) !important; }
body.dark #wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn.st-ing{ background: color-mix(in srgb, var(--color-tertiary, #5FA37E) 18%, #232323) !important; }
body.dark #wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn.st-end{ background: var(--dark-bg-hover, #333) !important; }
/* [2026-09-09 D1 확정] 등록글관리 분양완료 = 카드 바탕 연회색 + 테두리 회색 + 제목 회색, 사진 원본 그대로(아이콘 바는 흰 바탕 유지).
   종전(2026-09-02) 상단 "분양완료 된 글입니다" 띠는 폐지 — 아이콘 바 상태 칸(● 분양완료 ▾)과 중복이라 "헷갈린다"(사장님). 마크업 없음, .an-done-card 클래스만(렌더러·anStatusApply 가 토글).
   시안 md/mockup/action_row_260909/done_bg.html — 🛑 반려: 사진 하단 다크 띠(B)·전부 상단 띠(C)·흐림(D2)·사선(D3). 리스트형(.inner_list) 도 같은 바탕. */
#wrap .an-done-card .an-done-band{ display: none !important; }   /* 옛 마크업이 남아 있어도 안 보이게 */
#wrap .inner_listbox.an-done-card, #wrap .inner_list.an-done-card{ background: #F1F1F4 !important; border-color: #D9D9DE !important; }
#wrap .an-done-card .mypage_searchName, #wrap .an-done-card .title{ color: var(--color-text-secondary, #777); }
#wrap .inner_listbox.an-done-card .li-foot{ border-top-color: #CFCFD5 !important; }
#wrap .inner_listbox.an-done-card .register-action-line{ background: var(--color-bg-white, #fff) !important; border-color: #D9D9DE !important; }
body.dark #wrap .inner_listbox.an-done-card, body.dark #wrap .inner_list.an-done-card{ background: #1E1E1E !important; border-color: #3A3A3A !important; }
body.dark #wrap .inner_listbox.an-done-card .register-action-line{ background: var(--dark-bg-secondary, #232323) !important; border-color: #3A3A3A !important; }

/* [2026-09-02 C안] 상태 드롭다운 "● 분양중 ▾" (번개장터·중고나라식) — 현재 상태가 항상 보이고,
   펼치면 갈 수 있는 상태가 다 보인다. 마크업·JS = register/register_inc/_status_toggle.php.
   메뉴의 현재 상태 표시(✓·굵기·점 색)는 [data-cur] 로 CSS 가 그린다 — JS 는 data-cur 만 바꾼다. */
.an-status-dd{ position: relative; display: inline-flex; }
.an-status-dd-btn{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-border-medium, #ccc);
    border-radius: 16px;
    background: var(--color-bg-white, #fff);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.an-status-dd .st-dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; }
a.an-status-dd-btn.st-ing, a.an-status-dd-btn.st-ing:visited{ color: var(--color-tertiary, #277a4c) !important; }
.an-status-dd-btn.st-ing .st-dot{ background: var(--color-tertiary, #277a4c); }
a.an-status-dd-btn.st-end, a.an-status-dd-btn.st-end:visited{ color: var(--color-text-secondary, #777) !important; }
.an-status-dd-btn.st-end .st-dot{ background: var(--color-border-medium, #ccc); }
.an-status-dd .st-caret{
    width: 6px; height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    opacity: .7;
}
/* 🔴 메뉴가 열린 카드를 이웃 카드 위로 (sample/호버시.png 사고, 2026-09-02)
   — 카드 hover 가 z-index:1 스태킹 컨텍스트를 만들어 메뉴(z:30)가 그 안에 갇히고,
     이웃 카드의 날짜·조회수(.imagebox_time_boxStyle, z:3)가 루트 레벨에서 더 높아 메뉴를 뚫었다.
     카드 자체를 40 으로 올려 해결(:has 는 이 코드베이스 기존 사용 패턴). */
#wrap .flex-container .inner_list:has(.an-status-menu:not([hidden])), #wrap .flex-container .inner_listbox:has(.an-status-menu:not([hidden])){ position: relative; z-index: 40 !important; }
/* 🔴 클리핑 해제(메뉴 열림 동안만) — 박스 카드는 .hover_img_wrap{overflow:hidden}(ui.css, 이미지 확대 클립),
   컨테이너는 .flex-container.list-mode{overflow:hidden!important}(search.css) 가 메뉴를 통째로 잘랐다 */
#wrap .flex-container .inner_list:has(.an-status-menu:not([hidden])), #wrap .flex-container .inner_listbox:has(.an-status-menu:not([hidden])), #wrap .flex-container:has(.an-status-menu:not([hidden])){ overflow: visible !important; }
.an-status-menu{
    position: absolute;
    top: 36px; left: 0;
    min-width: 140px;
    background: var(--color-bg-white, #fff);
    border: 1px solid var(--color-border, #e4e4e4);
    border-radius: 11px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    padding: 5px;
    z-index: 30;
}
a.an-status-item, a.an-status-item:visited{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text-secondary, #777) !important;
    text-decoration: none;
    white-space: nowrap;
}
a.an-status-item:hover{ background: var(--color-bg-light, #f5f5f5); }
.an-status-item .st-dot{ background: var(--color-border-medium, #ccc); }
.an-status-item .st-chk{ margin-left: auto; padding-left: 12px; font-size: 12px; visibility: hidden; }
/* 현재 상태 항목: 굵게 + ✓ (진행중=초록 / 완료=진한 회색) */
.an-status-dd[data-cur="N"] a.an-status-item[data-to="N"]{ font-weight: 800; color: var(--color-tertiary, #277a4c) !important; }
.an-status-dd[data-cur="N"] .an-status-item[data-to="N"] .st-dot{ background: var(--color-tertiary, #277a4c); }
.an-status-dd[data-cur="Y"] a.an-status-item[data-to="Y"]{ font-weight: 800; color: var(--color-text-primary, #333) !important; }
.an-status-dd[data-cur="N"] .an-status-item[data-to="N"] .st-chk, .an-status-dd[data-cur="Y"] .an-status-item[data-to="Y"] .st-chk{ visibility: visible; }
/* 다크 */
body.dark .an-status-dd-btn{ background: var(--dark-bg-secondary, #232323); border-color: var(--dark-border-secondary, #4A4A4A); }
body.dark a.an-status-dd-btn.st-end, body.dark a.an-status-dd-btn.st-end:visited{ color: var(--dark-text-secondary, #ACACAC) !important; }
body.dark .an-status-dd-btn.st-end .st-dot{ background: var(--dark-border-secondary, #4A4A4A); }
body.dark .an-status-menu{ background: var(--dark-bg-secondary, #232323); border-color: var(--dark-border-secondary, #4A4A4A); box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
body.dark a.an-status-item, body.dark a.an-status-item:visited{ color: var(--dark-text-secondary, #ACACAC) !important; }
body.dark a.an-status-item:hover{ background: var(--dark-bg-hover, #333); }
body.dark .an-status-item .st-dot{ background: var(--dark-border-secondary, #4A4A4A); }
body.dark .an-status-dd[data-cur="Y"] a.an-status-item[data-to="Y"]{ color: var(--dark-text-primary, #ECECEC) !important; }
/* [2026-09-02] 끌어올리기 버튼(목록 직사용, 번개장터 UP 문법) — 계정 소모품이라 광고(주색)와 다른 파랑 계열 */
.reg-btn-jump{
    background-color: var(--color-bg-white, #fff);
    color: #2C6BAE !important;
    border: 1px solid color-mix(in srgb, #2C6BAE 40%, #fff);
    font-weight: 600;
    gap: 6px;
}
.reg-btn-jump i{ font-size: 11px; }
.reg-btn-jump .reg-jump-cnt{ font-size: 11px; font-weight: 800; background: color-mix(in srgb, #2C6BAE 10%, #fff); border-radius: 9px; padding: 1px 7px; }
a.reg-btn-jump:hover{ border-color: #2C6BAE !important; }
.reg-btn-jump.jump-zero{ color: var(--color-text-light, #999) !important; border-color: var(--color-border-medium, #ccc); }
.reg-btn-jump.jump-zero .reg-jump-cnt{ background: var(--color-bg-gray, #F1F1F2); color: var(--color-text-secondary, #777); }
body.dark .reg-btn-jump{ background-color: var(--dark-bg-secondary, #232323); color: #7BA7D9 !important; border-color: color-mix(in srgb, #7BA7D9 45%, var(--dark-bg-secondary, #232323)); }
body.dark .reg-btn-jump .reg-jump-cnt{ background: color-mix(in srgb, #7BA7D9 16%, var(--dark-bg-secondary, #232323)); }
body.dark .reg-btn-jump.jump-zero{ color: var(--dark-text-secondary, #ACACAC) !important; border-color: var(--dark-border-secondary, #4A4A4A); }
body.dark .reg-btn-jump.jump-zero .reg-jump-cnt{ background: var(--dark-bg-hover, #333); color: var(--dark-text-secondary, #ACACAC); }
/* 광고중 상태(리더 등 유료 이펙트 적용 중) — 틴트 배경, 클릭하면 동일하게 결제페이지(연장·추가) */
.reg-btn-adon{
    background-color: color-mix(in srgb, var(--ui-action, #d84841) 9%, #fff);
    color: var(--ui-action, #d84841) !important;
    border: 1px solid color-mix(in srgb, var(--ui-action, #d84841) 28%, #fff);
    font-weight: 600;
}
a.reg-btn-adon, a.reg-btn-adon:visited, a.reg-btn-adon:active{
    background-color: color-mix(in srgb, var(--ui-action, #d84841) 9%, #fff) !important;
    color: var(--ui-action, #d84841) !important;
}
a.reg-btn-adon:hover{ border-color: var(--ui-action, #d84841) !important; }
body.dark .reg-btn-adon, body.dark a.reg-btn-adon, body.dark a.reg-btn-adon:visited{
    background-color: color-mix(in srgb, var(--ui-select, #e66b65) 16%, var(--dark-bg-secondary, #232323)) !important;
    color: var(--ui-select, #e66b65) !important;
    border-color: color-mix(in srgb, var(--ui-select, #e66b65) 40%, var(--dark-bg-secondary, #232323)) !important;
}
/* 다크모드 */
body.dark .reg-btn-primary{
    background-color: var(--ui-select, #e66b65);
}
body.dark .reg-btn-primary:hover{
    background-color: var(--ui-select, #e66b65);
}
body.dark .reg-btn-secondary{
    background-color: var(--dark-bg-secondary, #232323);
    color: var(--dark-text-primary, #ECECEC);
    border-color: var(--dark-border-secondary, #4A4A4A);
}
body.dark .reg-btn-secondary:hover{
    background-color: var(--dark-bg-secondary, #232323);
}

/* 카드 기본 배경 흰색 — 박스형 카드(inner_listbox)는 모드 클래스(grid/list-mode)가 있을 때만
   흰색이라, 모드 미적용/예외 상황에서 부모 .flex-container 의 #F5F5F5 회색이 카드 콘텐츠
   (주소 biz_addr_line·list_container_Style·제목 등)에 비치는 '배경 침범'이 생김 → 갤러리형
   제외하고 카드 배경을 항상 카드색으로 고정. (search·_list 공유 렌더라 양쪽 동시 해결) */
.flex-container:not(.gallery-mode) .inner_listbox, .flex-container:not(.gallery-mode) .inner_list{ background-color:#fff !important; }
body.dark .flex-container:not(.gallery-mode) .inner_listbox, body.dark .flex-container:not(.gallery-mode) .inner_list{ background-color: var(--dark-bg-secondary, #232323) !important; }

/* 갤러리형에서 register 버튼 숨김 */
.gallery-mode .register-action-bar{ display: none !important; }

.padding_responsive{
    padding-left: 0;
    min-width: 0;
    flex: 1 1 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px){
    .padding_responsive {
        padding-left: 0;
    }
}

/* 모든 리스트 타입에서 이미지와 텍스트 사이 간격 통일 */
.hover_img_wrap > div[style*="display:flex"]{
    gap: 15px !important;
}

@media (max-width: 767px){
    .hover_img_wrap > div[style*="display:flex"] {
        gap: 10px !important;
    }
}

/* ===== 모바일(≤600px) 가격셀 잘림 방지 (2026-07-19) =====
   미용/호텔/유치원/숙소의 소·중·대형견 가격셀 3개가 리스트형에서 이미지 옆 좁은 폭에
   고정폭(104px)으로 들어가 오른쪽이 잘렸다 → 균등분할(flex 1/3)+폰트 축소로 3개 다 보이게. */
@media (max-width:640px){
	.hover_img_wrap > div[style*="display:flex"] .padding_responsive .li-info .li-grid{
		display:flex !important; width:100% !important; gap:5px !important;
	}
	.hover_img_wrap > div[style*="display:flex"] .padding_responsive .li-info .li-cell{
		flex:1 1 0 !important; min-width:0 !important; padding:7px 3px !important;
	}
	.li-info .li-cell .li-lbl{ font-size:12px !important; }
	.li-info .li-cell .li-val{ font-size:11.5px !important; white-space:nowrap; }
	/* 이미지를 168→138 로 살짝 줄여 가격셀 3개가 옆에 여유있게 들어가게(당근 비율 유지) */
	.hover_img_wrap .li-imgcol{ flex:0 0 138px !important; width:138px !important; height:138px !important; }
}

/* ===== vet 시안 B (2026-07-20) — 옵션 특징 태그 + 과목(진하게) + 대상(연회색) =====
   대상은 중복 많아 맨 아래 조용히. 급할 때 찾는 옵션(24시·응급실=빨강)·변별되는 과목을 앞세운다. */
.li-info.vet-info{ margin-top:5px; }
/* 옵션 태그: 24시·응급실·야간진료 = 빨강(hot), 나머지 = 주황 테두리.
   태그 박스 왼쪽선은 margin/padding 없이 정보영역 왼쪽(=제목·과목 출발선)에 그대로 정렬된다. */
/* [범용 특징 태그] feat-tag — 리스트에서 '특징/옵션'을 태그로 보여줄 때 어느 카테고리서든 재사용.
   (병원=24시·응급실 / 미용=주차·픽업 / 호텔=수영장 등). 강조는 feat-tag--em(빨강).
   ⚠ 클래스명에 'hot' 쓰지 말 것 — ui_components.css 전역 span.hot(HOT아이콘)과 충돌(margin·배경 오염). */
/* 태그 박스 왼쪽선을 정보영역 왼쪽(=제목·과목 출발선)에 그대로 정렬. 태그는 박스라 글자가
   안쪽 padding만큼 들어가는 게 정상(모든 버튼 UI 공통) — 억지로 당기면 박스가 튀어나와 되레 붙어 보임. */
.feat-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:7px; }
/* 업종(주정보)을 위로 올린 카페/홍보: 옵션 태그가 그 아래 보조로 오므로 위 여백만 주고 아래는 뗀다. */
.feat-tags.feat-tags--sub{ margin-top:7px; margin-bottom:0; }
.feat-tag{
	display:inline-flex; align-items:center; height:21px; padding:0 8px; border-radius:5px;
	font-size:11.5px; font-weight:600; letter-spacing:-0.3px; white-space:nowrap;
	/* 일반 옵션 = '부가 정보'라 최대한 물러남: 아주 연한 회색 + 테두리 없이 플랫. 긴급(em)만 튀게. */
	background:#f2f3f5; border:0; color:var(--color-text-quaternary, #888);
}
.feat-tag.feat-tag--em{ color:var(--tint-coral-fg, #C9472C); background:var(--tint-coral-bg, #FFF1EC);   /* 2026-08-28 A안: 솔리드 코랄 → 코랄 톤 */ font-weight:700; }  /* 긴급(24시·응급실)만 브랜드 강조 */
body.dark .feat-tag{ background:var(--dark-bg-hover, #333333); color:var(--dark-text-secondary, #ADA59D); }   /* 2026-09-11 3.7:1 → 6:1 */
body.dark .feat-tag.feat-tag--em{ color:var(--tint-coral-fg, #F08A6B); background:var(--tint-coral-bg, #3A2620); }
/* ===== [범용 리스트 정보 위계] 전 카테고리 공용 =====
   제목(19~21/800/검정) = 최상. 그 아래:
   .li-primary   = 주 정보(과목·가격설명·품종 등). '굵기를 빼서'(regular) 제목과 위계를 만든다. 진회색.
   .li-secondary = 보조 정보(대상·지역·나이 등). 더 작고 연하게. 한 칸 띄워 그룹 분리.
   특징/옵션은 .feat-tags(위) 태그로. vet-course/vet-subj 는 하위호환 별칭. */
.li-info .li-primary, .vet-info .vet-course{
	font-size:13.5px; font-weight:400; color:var(--color-text-secondary, #393939); line-height:1.5; letter-spacing:-0.2px; word-break:break-all;
	display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.li-info .li-secondary, .vet-info .vet-subj{
	font-size:11.5px; font-weight:400; color:var(--color-text-lighter, #9a9a9a); margin-top:5px; letter-spacing:-0.2px;
	display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
/* [2026-08-13 C안] 진료대상(vet-subj)은 리스트형 전용 — 박스형(grid-mode)은 사진 아래 상태 띠가
   같은 정보("강아지 / 고양이진료")를 보여주므로 여기서 숨긴다. 리스트형에서 status_bar 를 숨기는
   위쪽 규칙(.inner_list .status_bar)과 짝 — 모드마다 진료대상은 한 곳에만 나온다 */
.flex-container.grid-mode .vet-info .vet-subj{ display:none !important; }

/* [2026-08-13 분양 완료 표시 2안] 분양(A/I)은 분양중=무표시(띠·배지 없음 — 목록 대부분이라 노이즈), 완료만 표시.
   마크업 = list_title_info_boxStyle·list_image_info_listStyle 의 .imagebox-wrap.an-soldout + .an-soldout-chip.
   실종(F)은 컬러 상태 띠 유지 — 진행 여부가 핵심 정보라 분양과 논리가 다름.
   [2026-09-04 사장님 "분양완료가 너무 가린다" → 시안 2안 확정(md/mockup/soldout_260904, 아티팩트 ba1aafbe)]
   종전 = 사진 무채색(.85)+흰 막 50% + 우상단 칩 → 사진이 안 보이고 리스트형 130px 썸네일은 칩이 1/3 을 가렸다.
   지금 = **사진 원본 그대로** + 사진 **하단 한 줄(약 24px) 반투명 다크 띠** 「분양완료」. 얼굴이 있는 위쪽은 안 가리고 등록일(좌상단)과도 안 겹친다.
   🛑 반려 이력: 무채색+막(이번), 중앙 스탬프(8/13), 좌상단 칩(등록일과 겹침). 재제안 금지 */
.imagebox-wrap.an-soldout{ position:relative; }
.an-soldout .hover_img{ position:relative; display:block; }
.an-soldout-chip{ position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:center; font-size:12px; font-weight:800; line-height:1; letter-spacing:.02em; padding:6px 0; background:rgba(35,42,50,.74); color:#fff; pointer-events:none; }
body.dark .an-soldout-chip{ background:rgba(0,0,0,.72); color:#DDD; }
/* (2026-09-02 C안 등록글관리 X 와의 우상단 겹침 회피 규칙은 띠가 전폭 하단으로 가면서 불필요 → 제거) */
body.dark .li-info .li-primary, body.dark .vet-info .vet-course{ color:#ECECEC; }
body.dark .li-info .li-secondary, body.dark .vet-info .vet-subj{ color:var(--color-text-quaternary, #888); }
/* [범용] 단일 가격 강조(분양가 등): 라벨 회색 + 금액 빨강 굵게 / '상담'은 회색. (미용·호텔은 가격셀 3칸 별도) */
.li-info .li-price{ font-size:13px; color:var(--color-text-quaternary, #888); margin-bottom:4px; letter-spacing:-0.2px; }
.li-info .li-price b{ color:var(--color-brand, #d84841); font-weight:800; font-size:15px; letter-spacing:-0.3px; }
.li-info .li-price .cs{ color:var(--color-text-tertiary, #666); font-weight:600; }
body.dark .li-info .li-price{ color:var(--color-text-light, #999); }
body.dark .li-info .li-price b{ color:var(--color-text-emphasis, #D8432A); }
body.dark .li-info .li-price .cs{ color:var(--color-text-lighter, #9a9a9a); }

/* ===== 가격셀 카테고리(미용/호텔/유치원/숙소): 가격표를 이미지 아랫단에 붙임 (2026-07-20) =====
   옵션(태그)이 없어 정보가 짧아도, 정보영역을 이미지 높이로 stretch 하고 가격표(.li-grid)를
   margin-top:auto 로 하단 고정 → 위(태그있음)·아래(태그없음) 모두 가격표가 이미지 아랫단에 정렬. */
/* .pr--priced = 가격셀 카테고리(B/H/S/P) 정보영역. :has 대신 서버가 클래스 부여(구형 브라우저 호환).
   정보영역을 이미지 높이로 stretch, li-info 를 제목 아래 '남은 공간'(flex:1) 으로 채우고,
   가격표(.li-grid)를 margin-top:auto 로 그 안 하단에 붙인다. */
/* 정보영역(이미 flex column)을 이미지 높이로 stretch + space-between → 제목은 위, 가격표(li-info)는 하단. */
.hover_img_wrap > div[style*="display:flex"] .pr--priced{ align-self:stretch !important; justify-content:space-between !important; }

/* ═══════════════════════════════════════════════════════════════
 * ★ PC 박스형(grid/gallery) 기본이미지(없음/못찾음) — 2/3 크기 contain + 완전중앙 (pc_size.png).
 *   기존 cover 로 꽉차고 위로 넘쳐 '분양완료' 배지와 겹치던 문제 수정.
 *   부모 클래스 무관하게 기본이미지 src(loading_empty/default_image)로 잡고, 부모(:has)를 정사각+relative 로,
 *   img 를 absolute inset:0 + object-fit:contain 으로 상하좌우 완전 중앙. (실제 썸네일 cover 는 안 건드림)
 * ═══════════════════════════════════════════════════════════════ */
.flex-container.grid-mode .inner_listbox .empty_image, .flex-container.gallery-mode .inner_listbox .empty_image, .flex-container.grid-mode .inner_listbox *:has(> img[src*="loading_empty"]), .flex-container.gallery-mode .inner_listbox *:has(> img[src*="loading_empty"]), .flex-container.grid-mode .inner_listbox *:has(> img[src*="default_image"]), .flex-container.gallery-mode .inner_listbox *:has(> img[src*="default_image"]){
	position:relative !important;
	overflow:hidden !important;
	/* 배경 없음 = 카드 흰색 그대로(회색 배경 깜빡임 제거). height 는 인라인 165px(사진있음과 동일) 사용 — aspect-ratio/height 강제 금지. */
}
.flex-container.grid-mode .inner_listbox .empty_image img, .flex-container.gallery-mode .inner_listbox .empty_image img, .flex-container.grid-mode .inner_listbox img[src*="loading_empty"], .flex-container.gallery-mode .inner_listbox img[src*="loading_empty"], .flex-container.grid-mode .inner_listbox img[src*="default_image"], .flex-container.gallery-mode .inner_listbox img[src*="default_image"]{
	position:absolute !important; inset:0 !important;
	width:100% !important; height:100% !important;
	max-width:none !important; max-height:none !important;
	object-fit:contain !important; object-position:center center !important;
	padding:6% 12% !important;             /* 2026-08-27: 12px 20%(60%) → 6% 12%(약 76%) — inc/header.php 전역 통일 규칙과 동일 */
	box-sizing:border-box !important;
	margin:0 !important; transform:none !important; min-height:0 !important;
}

/* ============================================================
 * 검색 상단 파일탭 + 제목 (구 search_container_title.php 의 body <style>)
 * ★ body 인라인 <style>은 늦게 파싱돼 제목이 '작다가 커지는' FOUC 발생 →
 *   head 동기 로드되는 이 파일로 이관(단일 소스). 수정은 여기 한 곳만.
 * ============================================================ */

/* 기본 스타일 */
.tab-container{
	position: relative;
	max-width: var(--site-w,1330px);
	width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
}

.tab-buttons{
    display: inline-flex;
    gap: 5px;
    flex-wrap: nowrap;
    align-items: flex-end;
    vertical-align: bottom;
    position: relative;
    z-index: 2;
}

/* 활성 탭과 아래 콘텐츠 박스를 잇는 '이음선'.
   🔴 컨테이너 배경과 '같은 값' 이어야 파일탭이 박스와 이어져 보인다.
      전에는 #fff 하드코딩이라 다크에서 흰 선이 그대로 남았다(2026-07-30). */
.tab-buttons::after{
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--search-container-bg, #ffffff);
    z-index: 1;
}

/* 비활성 탭 — 회색이 무거우면 탭 줄 전체가 우중충해진다.
   구 값(bg #f0f2f5 / 글씨 var(--color-text-quaternary, #888))은 글씨 대비가 2.83 밖에 안 돼 흐릿했다. */
.tab-toggle{
    font-size: 16px;
    font-weight: 600;
    background-color: var(--ui-tab-inactive-bg, #F7F8FA);
    color: var(--ui-tab-inactive-text, #6A727D);   /* 대비 4.58 — 또렷하되 앞으로 나서지 않음 */
    min-width: 138px;
    height: 48px;
    line-height: 46px;
    padding: 0 30px;
    cursor: pointer;
    border: 1px solid var(--ui-tab-inactive-border, #E3E6EA);
    border-bottom: none;
    border-radius: 11px 11px 0 0;
    margin-bottom: -1px;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: background-color .15s, color .15s;
}

/* hover 는 '아직 안 고른 탭'에만. :not(.selected) 가 없으면 선택된 흰 탭까지
   연한 코랄로 덮여서 색이 빠진 것처럼 보인다(실제 버그였음). */
.tab-toggle:not(.selected):hover{
    background-color: var(--ui-tab-inactive-hover-bg, #EEF0F3);
    color: var(--ui-tab-inactive-hover-text, #4B5563);
}

/* ★ 활성 파일탭 — 아래 콘텐츠 박스와 이어져야 해서 기본값은 흰색.
   관리자 '연한 활성 배경'에서 톤을 줄 수 있다. */
.tab-toggle.selected{
    background-color: var(--ui-active-soft-bg, #FFFFFF);
    color: var(--ui-active-soft-text, #C93934);
    font-weight: 700;
}

.tab-toggle.selected a{ color: var(--ui-active-soft-text, #C93934); font-weight: 700; }
.tab-toggle a{ color: inherit; }

/* [2026-09-03] <p id=search_container_title>(큰 제목 텍스트) 폐지 → GNB 아래 24px 는 파일탭 컨테이너가 직접 가짐(종전 p 의 padding-top 과 동일) */
#wrap > .tab-container{ padding-top: 20px; line-height: normal; font-size: 16px; }   /* 20px = 커뮤니티 메인(GNB→첫 상자 20px)과 동일(사장님 2026-09-03) */

/* 탭 경계선과 아래 검색영역 박스를 맞붙임. #wrap 접두사로 search.css(async) 이김 */
#wrap .search_wrapper{ margin-top: 0 !important; padding-top: 0 !important; }
#wrap .search_wrapper > .search_container, #wrap .search_container{
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
}
/* [2026-08-28] 탭(지역별·역세권) 바로 아래 첫 패널(.sr-mod.sr-opt)의 왼쪽 위 모서리 — 12px 라운드라 선택 탭과 패널 사이에
   삼각 틈이 보였다(sample/radi.png). 탭이 항상 왼쪽 위에 붙으므로 그 모서리만 각지게. 오른쪽 위·아래는 그대로 */
#wrap .search_container > .sr-mod.sr-opt, #wrap .search_container > .sr-opt{ border-top-left-radius: 0 !important; }
/* [2026-08-28] 다크에서 패널 안쪽 .search_option 에 배경·1px 테두리·5px 라운드가 따로 붙어 틀이 이중(sample/보더.png).
   라이트처럼 안쪽은 투명 — 바깥 .sr-opt 패널 하나가 유일한 틀. 안쪽 여백은 바깥 패널 padding 이 이미 담당 */
body.dark #wrap .sr-opt .search_option, html.dark #wrap .sr-opt .search_option{ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* [2026-08-28] 탭(1px 테두리)과 패널이 한 몸이 되게(sample/bor.png): 패널에 탭과 같은 1px 테두리, 선택 탭은 패널 윗선을 1px 덮어 이어짐.
   다크는 선택 탭 배경도 패널 배경(#211E1B)과 같게 — 전엔 더 어두운 컨테이너색이라 탭과 패널이 따로 놀았다 */
#wrap .search_container > .sr-opt{ border: 1px solid var(--ui-tab-inactive-border, #E3E6EA) !important; }
body.dark #wrap .search_container > .sr-opt, html.dark #wrap .search_container > .sr-opt{ border-color: var(--search-option-border, #3A3432) !important; }
#wrap .tab-toggle.selected{ position: relative; z-index: 2; margin-bottom: -1px; border-bottom: 1px solid var(--ui-active-soft-bg, #FFFFFF) !important; }
body.dark #wrap .tab-toggle.selected, html.dark #wrap .tab-toggle.selected{ background-color: var(--color-bg-light, #211E1B) !important; border-bottom-color: var(--color-bg-light, #211E1B) !important; }

body.dark .tab-toggle{
    background-color: var(--ui-tab-bg, #423B39);
    border-color: var(--search-option-border, #3A3432);
    color: var(--search-input-text, #ECECEC);
}
body.dark .tab-toggle a{ color: var(--search-input-text, #ECECEC); }
/* 다크도 선택된 탭은 hover 무효 */
body.dark .tab-toggle:not(.selected):hover{ background-color: var(--ui-tab-hover-bg, #4A4240); }
body.dark .tab-toggle.selected{
    background-color: var(--search-container-bg, #1A1A1A) !important;
    border-color: var(--search-option-border, #3A3432) !important;
}
/* 다크 활성 탭 글씨는 주 계열 = 노랑. 코랄은 다크에 쓰지 않는다. */
body.dark .tab-toggle.selected a{ color: var(--ui-active-soft-text, #FF9F1C) !important; }
/* 이음선은 .tab-buttons::after 하나뿐이고 --search-container-bg 로 두 모드를 덮는다.
   전에 여기 있던 `.tab-toggle.selected::after` 와 `.tab-buttons{border-bottom-color}` 두 줄은
   존재하지 않는 대상을 겨냥한 죽은 규칙이라 흰 선을 못 잡았다 → 제거(2026-07-30). */

.tab-toggle a{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

/* 플로팅 버튼 그룹 — 위치는 sticky_sidebar.js가 전담 */
.floating-btn-group{
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10001;
    flex-direction: column;
    gap: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.floating-btn-group a{
    display: flex;
    width: 120px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
}
.floating-register-btn{ color: #fff !important; }
/* 🔴 같은 pill 그룹 안에서 등록(코랄)과 관리(파랑)가 부딪혔다 — 한 계열로 묶는다.
      '관리'는 의미상 2차(이동·조회)지만, 같은 버튼 그룹 안에서는 그룹 통일이 우선이다. */
.floating-manage-btn{ color: var(--ui-action-soft-text, #C93934) !important; }
.floating-btn-group a i{
    display: inline-block;
    width: 1em;
    text-align: center;
}
.floating-register-btn{ background-color: var(--ui-action, #D84841); }   /* 등록하러 가기 = 행동 */
/* 보조 = 테두리형. 🔴 회색 채움(#E8E8E8)은 흰 배경 대비 1.23 으로 안 보인다는 지적을 받았다.
   위계는 색의 세기가 아니라 '채움 vs 선' 으로 가른다 — 같은 액센트를 선과 글씨에만 쓴다.
   ⚠ 단 여기는 본문 위에 떠 있는 pill 이라 배경을 transparent 로 두면 글이 비쳐 읽히지 않는다.
      → 면은 카드색으로 불투명하게 두고, 윤곽선으로 테두리형을 만든다. */
.floating-manage-btn{
    background-color: var(--ui-action-soft-bg, #FFFFFF);
    color: var(--ui-action-soft-text, #C93934) !important;
    border-top: 1.5px solid var(--ui-action-soft-border, #C93934);
    box-shadow: inset 0 0 0 1.5px var(--ui-action-soft-border, #C93934);
}
.floating-btn-group a:only-child{ border-radius: 22px; }
.floating-btn-group a:first-child:not(:only-child){ border-radius: 22px 22px 0 0; }
.floating-btn-group a:last-child:not(:only-child){ border-radius: 0 0 22px 22px; }
body.dark .floating-register-btn{ background-color: var(--state-ongoing, #A9452E); color: var(--state-ongoing-text, #F2F2F2) !important;   /* 2026-08-28 A안: 다크 주황 → 코랄(주 행동) */ }
body.dark .floating-manage-btn{
    background-color: var(--dark-ui-action-soft-bg, #232323) !important;
    color: var(--dark-ui-action-soft-text, #FF9F1C) !important;
    border-top-color: var(--dark-ui-action-soft-border, #FF9F1C);
    box-shadow: inset 0 0 0 1.5px var(--dark-ui-action-soft-border, #FF9F1C);
}

/* breadcrumb(경로). <p id=search_container_title>가 블록자식에 조기종료 → .tab-container 기준 */

/* [2026-09-03] h2.search-title 폐지 — 규칙 제거 */

/* A안: 파일탭 라벨 앞 아이콘. a는 padding까지 덮게 absolute inset:0 */
.tab-toggle a{
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    letter-spacing: .02em;
}
.tab-toggle .tab-ico{ display: inline-flex; flex: 0 0 auto; }
.tab-toggle .tab-ico svg{ width: 18px; height: 18px; display: block; }
.tab-toggle .tab-ico-metro svg{ width: 21px; height: 21px; }

/* ══════════════════════════════════════════════════════════════
   ★ 최종 hover 통일 — 전 뷰모드(리스트/2단/그리드/갤러리) · register/search 공통
   범인: 위쪽 카드 "기본 배경" 규칙
     body.dark .flex-container:not(.gallery-mode) .inner_list { background:#232323!important }
   이 리스트 카드(.inner_list) 기본배경이 hover 규칙과 특이성이 같고(0,0,4,1) 파일에서 더 뒤라
   소스순서로 이겨서 → 리스트/2단은 hover 배경이 안 바뀌고 그리드(.inner_listbox)만 바뀜.
   해결: 이 블록을 파일 "맨 끝"에 두어 동일 특이성이면 순서로 이기게 하고,
   .inner_list 는 특이성도 +1 확보. (그리드/갤러리 .inner_listbox 는 이미 동작 → 값만 동일하게 유지)
   ══════════════════════════════════════════════════════════════ */
/* 라이트: 그림자 + 제목 브랜드레드 (배경 변화 없음) */
body:not(.dark) .flex-container .inner_list:hover, body:not(.dark) .flex-container .inner_listbox:hover{
	box-shadow: 0 6px 20px rgba(20,30,50,.14) !important;
	transform: none !important;
}
body:not(.dark) .flex-container .inner_list:hover .mypage_searchName, body:not(.dark) .flex-container .inner_listbox:hover .mypage_searchName{ color: var(--color-hover) !important; }
/* 다크: 배경 살짝 밝게(var(--color-text-secondary, #393939)) + 그림자 — 리스트/2단/그리드/갤러리 전부 동일 */
body.dark .flex-container:not(.gallery-mode) .inner_list:hover, body.dark .flex-container .inner_list:hover, body.dark .flex-container .inner_listbox:hover, body.dark .flex-container.gallery-mode .inner_listbox:hover{
	background-color: var(--dark-bg-hover, #333333) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
	transform: none !important;
}

/* ══════════════════════════════════════════════════════════════
   ★★ 리스트 제목 굵기/크기 = 전 모드·전 렌더러·register/search 완전 통일 (한 곳 관리)
   그동안 grid→2단→1단 모드별로 쪼개 관리하다 매번 한 모드씩 누락돼 "register만 두껍다"가
   반복됐음. 여기서 모드 구분 없이 리스트 제목 전부를 얇게(400)+20px 로 한 번에 못박음.
   - .hover_img_wrap 경로 = 리스트형(1단/2단) 제목(.sn-1col/.sn-2col)
   - .mypage_searchList_boxStyle 경로 = 박스/그리드형 제목
   - #wrap 로 특이성(0,1,5,0) 확보 → 인라인 font-weight:600 및 726행(0,0,4,0) 등 전부 이김
   ══════════════════════════════════════════════════════════════ */
#wrap .flex-container .hover_img_wrap .padding_responsive .mypage_searchName, #wrap .flex-container .hover_img_wrap .padding_responsive .mypage_searchName .sn-1col, #wrap .flex-container .hover_img_wrap .padding_responsive .mypage_searchName .sn-2col, #wrap .flex-container .mypage_searchList_boxStyle .title .mypage_searchName, #wrap .flex-container .mypage_searchList_boxStyle .title .mypage_searchName .sn-1col, #wrap .flex-container .mypage_searchList_boxStyle .title .mypage_searchName .sn-2col{
	font-weight: 400 !important;
	font-size: 20px !important;
}
/* [2026-09-12] 박스형(grid-mode) 제목 = 열 수별 변수(4개 20 · 5개 17 · 6개 15). 위 통일 규칙보다 뒤 + .grid-mode 로 특이성 한 단계 높아 이김.
   리스트형(1단/2단) 20px 은 그대로. 206~227행도 같은 변수지만 이 통일 규칙에 눌려 있었음(여기가 실효 규칙). */
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .title .mypage_searchName, #wrap .flex-container.grid-mode .mypage_searchList_boxStyle .title .mypage_searchName .sn-1col, #wrap .flex-container.grid-mode .mypage_searchList_boxStyle .title .mypage_searchName .sn-2col{
	font-size: var(--an-grid-title, 17px) !important;
}
/* 모바일(≤600px)에서만 당근식 크게(21/700) — 위 통일 규칙보다 뒤라 모바일만 예외로 이김 */
@media (max-width:640px){
	#wrap .flex-container .hover_img_wrap .padding_responsive .mypage_searchName,
	#wrap .flex-container .hover_img_wrap .padding_responsive .mypage_searchName .sn-1col,
	#wrap .flex-container .hover_img_wrap .padding_responsive .mypage_searchName .sn-2col {
		font-size: 21px !important; font-weight: 700 !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   ★ register ⋮(더보기) 버튼과 2줄 제목 겹침 방지 — CSS 한 곳에서 관리.
   register/search는 같은 렌더러이고, 차이는 register에만 있는 ⋮ 버튼(.an-row-menu-btn, 우상단 absolute)뿐.
   그 카드(=⋮ 있는 카드)에만 :has() 로 내용 우측 여백을 줘서 제목이 ⋮ 전에 줄바꿈되게 함.
   :has() 로 자동 게이트 → search(⋮ 없음)엔 영향 없음. CSS만 올리면 반영됨.
   ══════════════════════════════════════════════════════════════ */
#wrap .inner_list:has(.an-row-menu-btn) .padding_responsive{ padding-right:42px !important; }
#wrap .inner_listbox:has(.an-row-menu-btn) .mypage_searchList_boxStyle .title{ padding-right:38px !important; }

/* ══════════════════════════════════════════════════════════════
   ★ 등록대기 카드(.reg-pending-dim) 이중 테두리 제거 — CSS 한 곳 관리.
   원인: reg-pending-dim 의 inset 0 0 0 1.5px 윤곽선이 카드 1px 테두리와 겹쳐
   ~2.5px 이중/두꺼운 테두리로 보였음(register 전용, search엔 없어 깔끔했음).
   → 윤곽선만 제거해 search처럼 단일 1px 테두리로. pending 구분은 사진 흑백+흐린 제목으로 유지.
   reg-pending-dim 은 register(8개 카테고리)에만 붙는 클래스라 search 영향 없음.
   ══════════════════════════════════════════════════════════════ */
#wrap .reg-pending-dim:not(:hover){ box-shadow:none !important; }
/* ★ [2026-09-09 B-접힘·사장님 확정] 결제대기 = 카드 띠·사선·점선 폐지 → 상자 하나(.an-pend-group)로 묶고 머리 한 줄.
   (종전 2026-08-23 띠+사선+점선은 "게재중과 구분이 약하다·문구가 카드마다 반복" 으로 교체. 시안 md/mockup/pending_group_260909)
   - 색은 앰버 한 가지(--pend-*), 빨강은 '등록하기' 버튼만. 사진 흑백·제목 흐림도 폐지(결제만 남은 글이지 죽은 글이 아님).
   - 마크업: 열기·「게재중 N건」= search_list_result_toggle.php, 닫기 = register_inc/_pending_fold_close.php, 조회 = _pending_fold_query.php
   - 전체 탭(.an-pend-folded) = 결제대기 최신 4장만 + 「나머지 N건 보기」→ 등록대기 탭. 리스트형(1줄)은 4번째(.an-pend-r4)를 숨겨 3줄.
   - 박스형 = flex wrap 4열 그대로(자손 선택자라 상자 안에서도 폭 규칙 적용), 갤러리형 = 부모 grid 열을 inherit, 리스트형 2줄 = 50% 규칙 그대로. */
#wrap .reg-pending-dim{ --pend-ground:#FFF3DB; --pend-line:#F3C875; --pend-card-line:#EFC379; --pend-ink:#2F1E00; --pend-text:#5A3D00; --pend-amber:#F7A81B; --pend-amber-hover:#EC9A0C; }
#wrap .an-pend-group{ --pend-ground:#FFF3DB; --pend-line:#F3C875; --pend-card-line:#EFC379; --pend-ink:#2F1E00; --pend-text:#5A3D00; --pend-amber:#F7A81B; --pend-amber-hover:#EC9A0C;
  width:100%; box-sizing:border-box; display:flex; flex-wrap:wrap; column-gap:5px; row-gap:16px; padding:12px 12px 14px; margin:0 0 4px; background:var(--pend-ground); border:1px solid var(--pend-line); border-radius:8px; }
#wrap .an-pend-group .reg-pending-dim{ border:1px solid var(--pend-card-line) !important; background:var(--color-bg-white, #fff) !important; }
#wrap .an-pend-head{ width:100%; display:flex; align-items:center; gap:12px; padding:0 2px 2px; font-size:13.5px; line-height:1.4; color:var(--pend-text); }
#wrap .an-pend-head b{ display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:800; color:var(--pend-ink); white-space:nowrap; }
#wrap .an-pend-head b::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--pend-amber); box-shadow:0 0 0 3px rgba(247,168,27,.28); }
#wrap .an-pend-head b em{ font-style:normal; color:var(--color-text-emphasis, #D8432A); }
#wrap .an-pend-head > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#wrap .an-pend-head span strong{ font-weight:800; color:var(--pend-ink); }
#wrap .an-pend-more{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 12px 0 16px; border-radius:18px; background:#C0392B; color:#fff !important; font-weight:800; font-size:13.5px; text-decoration:none !important; box-shadow:0 2px 6px rgba(216,67,42,.28); }   /* 2026-09-27 사장님 «노란 바탕에 검정 글씨 잘 안 보임» → 사이트 빨강 바탕·흰 글씨(대비 4.6:1), 조금 크게 */
#wrap .an-pend-more em{ font-style:normal; font-size:14.5px; }
#wrap .an-pend-more i{ font-style:normal; font-size:16px; line-height:1; margin-top:-2px; }
#wrap .an-pend-more:hover{ background:#A12E22; }
#wrap .an-live-head{ width:100%; display:flex; align-items:center; gap:8px; margin:8px 0 -6px; padding:0 2px; font-size:13px; font-weight:700; color:var(--color-text-secondary, #6B6B6B); }
#wrap .an-live-head::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--color-tertiary, #3F7D5C); }  /* 상태 드롭다운 「분양중」 점과 같은 그린 */
#wrap .an-live-head em{ font-style:normal; }
/* [2026-09-09] 제목 앞 외부 콘텐츠 아이콘(include/embed_icons.php) — 유튜브 = 브랜드 빨강, 카카오TV = 노란 TV 배지. 제목과 같은 줄, 말줄임에 안 잘림 */
.an-embed-ico{ display:inline-flex; align-items:center; gap:4px; margin-right:5px; vertical-align:middle; position:relative; top:-1px; line-height:1; }   /* 글자 세로 중심에 맞춤(실측: -1px 때 2.5px 아래) */
/* [2026-09-09 사장님] 카드 우상단 X 삭제 — 사진·색 배경 위에서 안 보이던 것 → 흰 원 + 그림자 위에 검은 X (hover 오버레이의 color:#fff 규칙보다 우선) */
#wrap .an-row-menu-abs .an-row-menu-btn{ width:28px; height:28px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.94) !important; color:#333 !important; box-shadow:0 1px 4px rgba(0,0,0,.28); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; cursor:pointer; }
#wrap .an-row-menu-abs .an-row-menu-btn:hover{ background:#fff !important; color:#000 !important; box-shadow:0 2px 6px rgba(0,0,0,.35); }
#wrap .inner_listbox:hover .an-row-menu-abs .an-row-menu-btn, #wrap .inner_list:hover .an-row-menu-abs .an-row-menu-btn{ color:#333 !important; }
/* 다크도 밝은 원 + 검은 X — 검은 원은 어두운 사진 위에서 안 보이고 hover 땐 더 검게 됐다(사장님 지적) */
body.dark #wrap .an-row-menu-abs .an-row-menu-btn{ background:rgba(236,236,236,.92) !important; color:#222 !important; box-shadow:0 1px 4px rgba(0,0,0,.5); }
body.dark #wrap .an-row-menu-abs .an-row-menu-btn:hover{ background:#fff !important; color:#000 !important; }
.an-embed-ico .yt{ font-size:15px; color:#FF0033; }
.an-embed-ico .ktv{ display:inline-block; height:14px; padding:0 4px; border-radius:3px; background:#FEE500; color:#191919; font:800 9px/14px "Pretendard","Noto Sans KR",sans-serif; letter-spacing:.02em; font-style:normal; }
body.dark .an-embed-ico .yt{ color:#FF4D6A; }
/* [2026-09-09 E2 확정] 게재중 머리 줄 칩 「전체 · 분양중 · 분양완료」(?st=) — 분양·실종만. 상단 탭(결제 축)과 섞이지 않게 작은 알약 */
#wrap .an-sub-chips{ display:inline-flex; gap:6px; margin-left:8px; flex-wrap:wrap; }
#wrap .an-sub-chips a{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 11px; border-radius:13px; border:1px solid var(--color-border, #ddd); background:var(--color-bg-white, #fff); font-size:12px; font-weight:600; color:var(--color-text-secondary, #666) !important; text-decoration:none !important; }
#wrap .an-sub-chips a:hover{ background:var(--color-bg-gray, #F3F3F5); }
#wrap .an-sub-chips a.on{ background:#333; border-color:#333; color:#fff !important; }
#wrap .an-sub-chips i{ width:7px; height:7px; border-radius:50%; }
#wrap .an-sub-chips i.ing{ background:var(--color-tertiary, #3F7D5C); }
#wrap .an-sub-chips i.end{ background:#B5B5BA; }
body.dark #wrap .an-sub-chips a{ background:var(--dark-bg-secondary, #232323); border-color:var(--dark-border-secondary, #4A4A4A); color:var(--dark-text-secondary, #ACACAC) !important; }
body.dark #wrap .an-sub-chips a.on{ background:#E6E6E6; border-color:#E6E6E6; color:#111 !important; }
/* 갤러리형: 부모가 grid 라 상자가 전 열을 차지하고 안쪽도 같은 열로 */
#wrap .flex-container.gallery-mode .an-pend-group{ grid-column:1 / -1; display:grid; grid-template-columns:inherit; gap:2px; row-gap:8px; }
#wrap .flex-container.gallery-mode .an-pend-head, #wrap .flex-container.gallery-mode .an-live-head{ grid-column:1 / -1; }
#wrap .flex-container.gallery-mode .an-live-head{ margin:6px 0 0; }
/* 전체 탭 접힘: 리스트형(1줄)은 3줄만 — 4번째 행의 두 쌍(박스·리스트) 중 리스트 쪽을 숨김(인라인 display 보다 !important 가 이김) */
/* (리스트형 4번째 숨김 규칙은 2026-09-09 등록글관리 박스형 고정으로 제거) */
#wrap .reg-pending-dim .reg-pending-band{ display:none; }  /* 옛 띠 마크업이 남아 있어도 안 보이게(렌더러는 상자 안에선 안 찍음) */
body.dark #wrap .an-pend-group, body.dark #wrap .reg-pending-dim{ --pend-ground:#2e2817; --pend-line:#4d4224; --pend-card-line:#4d4224; --pend-ink:#F1DDA6; --pend-text:#D9B75A; }
body.dark #wrap .an-pend-group .reg-pending-dim{ background:var(--dark-bg-secondary, #232323) !important; }
body.dark #wrap .an-pend-more{ color:#FFD37A !important; background:#4A3810; border:1px solid #8A6A1E; box-shadow:none; } body.dark #wrap .an-pend-more:hover{ background:#5C4614; color:#FFE19E !important; }   /* 2026-09-27 다크 전용 — 꽉 찬 빨강이 너무 튐(사장님) → 결제대기 상자 호박색 톤 면 + 밝은 글씨(대비 9:1) */
/* [2026-09-27] 다크 모드 등록글관리 버튼 가독성(사장님 등록분양.png) — 흐린 회색 글씨·어두운 바탕 대신 대비 4.5:1 이상 */
body.dark #wrap .inner_listbox .register-action-line > .reg-btn, body.dark #wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn{ color:#ECE6DF !important; }
body.dark #wrap .inner_listbox .register-action-line > .reg-btn-primary{ background:#4A3810 !important; color:#FFD37A !important; }   /* 다크 전용 — 「나머지」 버튼과 같은 호박색 톤(사장님 «노란색 = 누르라는 신호로 통일»), 대비 9:1 */
body.dark #wrap .inner_listbox .register-action-line > .reg-btn-primary:hover{ background:#5C4614 !important; color:#FFE19E !important; }
body.dark #wrap .inner_listbox .register-action-line > .reg-btn-primary::before{ color:#FFC247 !important; }
body.dark #wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn.st-ing{ color:#8BE0AE !important; background:color-mix(in srgb, #3F9D68 26%, #232323) !important; }
body.dark #wrap .inner_listbox .register-action-line > .an-status-dd > .an-status-dd-btn.st-end{ color:#D4D4D8 !important; }
/* ★ hover 시엔 이 box-shadow:none 을 걷어 hover 드롭섀도우(아래 hover 모듈)가 살아나게.
   (기존 box-shadow:none 이 hover 그림자까지 덮어 register 카드에서 hover 그림자가 안 뜨던 문제) */

/* ══════════════════════════════════════════════════════════════
   ★ 박스형(grid) 대표이미지 = 고정 높이 썸네일(cover)로 통일.
   원인: 이미지 담은 flex 자식이 flex-shrink:1 이라 콘텐츠 적은 카드(register 등록대기 등)에서
   카드 높이에 눌려 61px 로 납작→overflow:hidden 에 잘려 "이미지 안나옴"으로 보였음.
   → 이미지 영역에 고정 높이 부여 → 카드가 그만큼 커지고(align-self:stretch 로 한 줄 균일),
   이미지는 object-fit:cover 로 꽉 참. (라이브 search 박스형 실사진 썸네일과 동일한 룩, search·register 공통) */
.flex-container.grid-mode .inner_listbox > span{ flex-shrink:0 !important; }
.flex-container.grid-mode .inner_listbox .imagebox-wrap{
	flex:0 0 auto !important;
	width:100% !important;
	height:var(--an-grid-img, 135px) !important;   /* 2026-09-12 열 수별 변수(4=170·5/6=135) */
	min-height:var(--an-grid-img, 135px) !important;
	overflow:hidden !important;
}
.flex-container.grid-mode .inner_listbox .imagebox-wrap .imagebox-rotate, .flex-container.grid-mode .inner_listbox .imagebox-wrap .hover_img, .flex-container.grid-mode .inner_listbox .imagebox-wrap img{
	width:100% !important;
	height:100% !important;
	object-fit:cover !important;
}

/* ══════════════════════════════════════════════════════════════
   ★ 기본이미지(대표이미지 없음/404) 색 = 테마에 맞춰 통일 (register·search 공통, CSS 한 곳).
   empty(이미지없음)는 .empty_image 로 이미 테마대응(라이트 빨강/다크 노랑)인데,
   404 실패 폴백(onerror)·search sweep 은 src 를 red_default_image 로 "하드코딩" →
   다크모드에서도 빨강으로 남아 노랑(empty)과 섞였음(빨강16/노랑4).
   → 다크모드에선 red_default_image 를 표시단에서 노랑으로 스왑해 전부 통일. (라이트는 둘 다 빨강이라 이미 일관) */
/* [2026-08-28] 이 규칙은 inc/header.php 로 이관 — 순수 CSS 파일에선 ?v=cache_version 을 못 붙여 PNG 교체 시 CDN 이 옛 그림을 내줬다. */

/* ══════════════════════════════════════════════════════════════
   ★ 박스형(grid)·갤러리 날짜: ① 좌상단으로(우상단 ⋮ 와 겹침 방지)
   ② 뿌연 외곽선(흰글씨+연회색 4방향 stroke → 흰 이미지 위에서 속 빈 글자) 제거하고
      어두운 반투명 pill + 흰 솔리드 글씨로 → 흰이미지/실사진/다크 어디서든 또렷.
   grid·gallery 둘 다 .inner_listbox. body.dark 색 override(1352행)보다 특이성 높게 #wrap 사용. ═══════════ */
/* grid/gallery 날짜도 동일: 흰 글씨 + 부드러운 어두운 halo. 높은 특이성이라 base 확실히 강제 */
#wrap .flex-container.grid-mode .inner_listbox .imagebox_time_boxStyle, #wrap .flex-container.gallery-mode .inner_listbox .imagebox_time_boxStyle{
	top:6px !important; left:8px !important; right:auto !important;
	padding:0 !important; text-align:left !important;
	color:#fff !important;
	text-shadow:0 0 3px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.7) !important;
	background:none !important;
	z-index:3 !important;
}

/* 날짜(등록일) 색·외곽선 = 기본 클래스(.imagebox_time_listStyle / .imagebox_time_boxStyle)와
   다크 override(body.dark ...) 자체에 정의됨 → 클래스가 곧 모듈. 여기 별도 #wrap 블록 불필요(제거).
   라이트=짙은 회색#333+흰halo / 다크=var(--color-border, #DDD)+어두운halo. 위치는 각 모드 규칙에서. */

/* ═══════════ 대표이미지 자리 = 기본이미지 선(先)표시 (2026-08-20, 사용자 확정) ═══════════
   종전: 이미지 로드까지 회색 shimmer(js/ui.js 자동 적용, 폐지됨) → 죽은 url(/css/라이브 S3 이관 누락 등)은
   onerror 404 응답까지 ~1초 회색 번쩍 → 기본이미지 교체 = "1초 깜빡임".
   지금: 컨테이너 배경에 기본이미지를 처음부터 깐다 — 로드 성공 시 <img>(object-fit:cover 100%)가
   배경을 덮고, 실패/없음 시 배경이 그대로 보임 → 교체 장면 자체가 없다. 파일 2.2KB(리스트 페이지에서 preload).
   다크는 노랑 기본이미지(색 불가침 규칙: 코랄=라이트/노랑=다크). */
/* 🔴 2026-08-26 (사장님 지시 "default_image 가 1초 보였다가 사진이 뜬다 — 바로 사진이 뜨게")
   사진이 있는 카드에서 로드 완료 전까지 기본이미지(개그림)가 먼저 보이던 것은 위 2026-08-20 규칙 때문이었다.
   → 로딩 중엔 **중립 바탕만**(카드 배경과 같은 톤, 아무 그림 없음). 사진은 빈 면 위로 바로 그려진다.
     기본이미지는 실패(onerror)·없음(.empty_image)·실패기억(default_img_onerror.php) 때만 <img> 로 들어온다.
   같이 한 것: 첫 화면 카드는 loading=eager+fetchpriority=high(inc/site_resources.php an_thumb_img),
   CDN(img.animalnara.com) preconnect(inc/header.php·m_header.php) — 사진 자체가 더 빨리 온다. */
.imagebox-rotate{
	background-image:none;
	background-color:var(--color-bg-lighter, #f7f7f7);
}
body.dark .imagebox-rotate{
	background-color:var(--dark-bg-tertiary, #2A2A2A);
}
/* 이미지 없음 칸은 <img src=기본이미지> 가 바로 들어오므로 배경 불필요 */
.empty_image{ background-image:none; }
/* 🔴 img 자체가 기본이미지가 된 뒤(없음 .empty_image / 404 onerror / thumb 기본)엔 배경을 걷어낸다 (2026-08-20).
   기본이미지 PNG 는 투명 영역이 있고, 박스형(grid/gallery)은 img 가 contain+padding 이라
   "배경 기본이미지 + img 기본이미지" 가 2겹으로 겹쳐 보였다(모바일 m_individual_area 등). */
/* [2026-09-02] background-color 도 함께 걷는다(통일, 사장님 지시 "어떤 건 회색이고 어떤 건 없다") —
   위 로딩 중립 바탕(#f7f7f7/다크 #2A2A2A)이 onerror·thumb 기본 폴백 뒤에도 남아,
   같은 기본이미지가 경로에 따라 회색 바탕/카드색 바탕으로 갈라져 보였다. 기본이미지 = 항상 카드색 바탕.
   (로딩 중 회색 바탕은 실제 사진 카드에만 그대로 유지) */
.empty_image, .imagebox-rotate:has(> img[src*="default_image"]), .imagebox-rotate:has(> img[src*="loading_empty"]), .imagebox-rotate:has(> img.is-thumb-default){
	background-image:none !important;
	background-color:transparent !important;
}


/* ══════════════════════════════════════════════════════════════
   ★ [2026-09-12] 박스형 열 수별 여백·글자(grid-mode 한정, list-mode 는 그대로). 수치는 1290행대 body.an-grid-cols-* 변수.
   열 수·사진 높이·제목 크기는 위쪽 원 규칙에서 같은 변수를 읽음. 시안 md/mockup/grid_cols_260912.
   상호/주소는 열 수 무관 두 줄(상호 / 주소) — 5개씩에서도 한 줄이면 주소가 …로 잘려 사장님 "2줄로 가야" (2026-09-12). */
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .title{ padding:5px var(--an-grid-pad-x, 7px) 2px !important; }
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .li-info{ padding:2px var(--an-grid-pad-x, 7px) 3px !important; }
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .li-info .li-primary{ font-size:var(--an-grid-primary, 12px); }
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .li-foot{ padding:6px 4px 3px !important; }
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .biz_addr_line{ flex-wrap:wrap !important; gap:1px 0 !important; }
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .biz_addr_line .biz-sep{ display:none !important; }
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .biz_addr_line .biz-name{ flex:0 0 100% !important; font-size:var(--an-grid-biz, 12px); }
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .biz_addr_line .biz-addr{ flex:0 0 100% !important; font-size:var(--an-grid-biz, 12px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ★ 박스형 칩 = 한 단계 작게 + 최대 2줄 (2026-09-12 사장님 "칩 크기를 잘 보이는데 약간 더 줄여서 최대 2줄까지로, 박스형에서는").
   리스트형 칩(21px·11.5px·gap 5)은 그대로. 5개 카드(내용 폭 211px)에 4자 칩 4개가 한 줄에 들어가도록 19px·10.5px·padding 5·gap 3.
   3줄째는 max-height(2줄) + overflow:hidden 으로 잘라 카드 높이를 고정 — 옵션 8개 전부 켠 병원도 2줄. */
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .feat-tags{ gap:3px 3px; margin-bottom:6px; max-height:calc(19px * 2 + 3px); overflow:hidden; align-content:flex-start; }
#wrap .flex-container.grid-mode .mypage_searchList_boxStyle .feat-tag{ height:19px; padding:0 5px; border-radius:4px; font-size:10.5px; letter-spacing:-0.4px; }

/* 6개 티어 보정(2026-09-12 칩 최대치 시뮬레이션): 호텔·미용·유치원 가격 3칸 "30,000원~" 이 188px 카드에서 넘쳤음
   → 칸 간격 6→3, 칸 안쪽 여백 축소, 값 글자 11.5→10.5(+자간 -0.4), 라벨 12→11.5. 4·5개 티어는 그대로(5개=딱 맞음). */
body.an-grid-cols-6 .flex-container.grid-mode .mypage_searchList_boxStyle .li-info .li-grid{ gap:3px !important; }
body.an-grid-cols-6 .flex-container.grid-mode .mypage_searchList_boxStyle .li-info .li-cell{ padding:6px 1px !important; min-width:0; }
body.an-grid-cols-6 .flex-container.grid-mode .mypage_searchList_boxStyle .li-info .li-cell .li-val{ font-size:10.5px !important; letter-spacing:-0.4px; }
body.an-grid-cols-6 .flex-container.grid-mode .mypage_searchList_boxStyle .li-info .li-cell .li-lbl{ font-size:11.5px !important; }


/* ══════════════════════════════════════════════════════════════
   ★ [2026-09-12 사장님 확정 K3] 애니멀리더 = 파워링크처럼 녹아들기. 광고 카드도 일반 카드와 같은 모양(색 판·명찰·반전·테두리 없음).
   표시는 카드 날짜 자리의 작은 회색 태그 「광고 · 애니멀리더 ⓘ」 하나(animal_list_info/_animal_leader_head.php) — 5곳이 안 차면
   같은 줄의 일반 글까지 리더처럼 보이므로 광고 카드 "안"에만. 줄 위 제목 없음. ⓘ hover/탭 → 흰 말풍선 360px(카드 밖으로).
   🔴 법규: 「광고」 카드마다 상시 노출(심사지침 — 쉽게 인식·근접·더보기 뒤 금지) · 말풍선 = 비용 낸 자·노출 이유·순서(EU DSA 26조 취지).
   🛑 반려 이력: 빈 칸 카드·줄 밴드·색 영역·명찰+반전 카드·큰 제목(주세요식) — 재제안 금지. */
#wrap .flex-container .inner_listbox.an-ad-card, #wrap .flex-container .inner_list.an-ad-card{ outline:0 !important; }
#wrap .flex-container .an-ad-card .imagebox_time_boxStyle{ display:none !important; }   /* 날짜 자리를 태그가 씀 */
/* 말풍선이 카드 밖으로 나오게 — 광고 카드만 overflow 해제(카드·사진칸 둘 다 hidden !important 라 #wrap 급으로). 사진은 .imagebox-rotate 가 대신 자름 */
#wrap .flex-container .inner_listbox.an-ad-card, #wrap .flex-container .inner_listbox.an-ad-card .imagebox-wrap, #wrap .flex-container .inner_list.an-ad-card .li-imgcol, #wrap .flex-container .inner_list.an-ad-card .imagebox-wrap{ overflow:visible !important; }
#wrap .flex-container .inner_listbox.an-ad-card .imagebox-rotate{ border-radius:8px 8px 0 0; overflow:hidden; }
#wrap .flex-container .inner_list.an-ad-card .li-imgcol img, #wrap .flex-container .inner_list.an-ad-card .li-imgcol .imagebox-rotate{ border-radius:10px; overflow:hidden; }
#wrap .flex-container .an-ad-card:has(.an-lead-tag.is-open), #wrap .flex-container .an-ad-card:has(.an-lead-tag.is-hover){ z-index:60 !important; position:relative; }
/* 태그 */
.an-lead-tag{ position:absolute; left:8px; top:6px; z-index:5; display:inline-flex; align-items:center; gap:4px; height:18px; padding:0 5px 0 6px;
	font-size:10.5px; font-weight:600; letter-spacing:.02em; line-height:1; color:#6E6E6E; background:rgba(255,255,255,.94); border:1px solid #DADADA; border-radius:3px; white-space:nowrap; }
.an-lead-ad{ display:inline-flex; align-items:center; justify-content:center; margin:0; padding:0; width:12px; height:12px; border-radius:50%; border:1px solid #9A9A9A;
	background:transparent; color:#9A9A9A; cursor:help; line-height:1; }
.an-lead-ad i{ font-style:normal; font-size:8.5px; font-weight:800; line-height:1; font-family:Georgia, serif; }
.an-lead-ad:hover, .an-lead-ad:focus-visible{ border-color:#555; color:#555; outline:0; }
.an-lead-tip{ display:none; position:absolute; left:0; top:24px; width:360px; max-width:calc(100vw - 24px); z-index:70; background:#fff; color:#333; border:1px solid #D5D5D5;
	font-size:12.5px; line-height:1.6; font-weight:400; letter-spacing:0; white-space:normal; text-align:left; padding:10px 13px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.12); cursor:default; word-break:keep-all; }
.an-lead-tip b{ color:#333; font-weight:700; }
.an-lead-tip::before{ content:''; position:absolute; left:14px; top:-6px; border:6px solid transparent; border-top:0; border-bottom-color:#D5D5D5; }
.an-lead-tag.is-flip .an-lead-tip{ left:auto; right:0; }
.an-lead-tag.is-flip .an-lead-tip::before{ left:auto; right:14px; }
.an-lead-tag.is-hover .an-lead-tip, .an-lead-tag.is-open .an-lead-tip, .an-lead-tag:focus-within .an-lead-tip{ display:block; }
/* 리스트형·모바일: 조상에 max-width:100% 류가 있어 말풍선이 태그 폭(≈100px)으로 줄어들던 것 → 폭 강제. 뷰포트보다 넓어지지 않게 min() */
#wrap .flex-container .an-lead-tip{ width:min(360px, calc(100vw - 24px)) !important; max-width:none !important; min-width:0 !important; box-sizing:border-box; }
/* 리스트형 사진칸(140px): 태그 그대로, 말풍선은 행 안쫏으로 */
.inner_list .an-lead-tag.is-flip .an-lead-tip{ left:0; right:auto; }
/* 다크 */
body.dark .an-lead-tag{ color:#B5ABA2; background:rgba(37,33,32,.94); border-color:#4A433F; }
body.dark .an-lead-ad{ border-color:#8A817B; color:#8A817B; }
body.dark .an-lead-tip{ background:#252120; color:#F2ECE6; border-color:#4A433F; box-shadow:0 6px 18px rgba(0,0,0,.5); }
body.dark .an-lead-tip b{ color:#F2ECE6; }
body.dark .an-lead-tip::before{ border-bottom-color:#4A433F; }
/* [2026-09-12 사장님 A안] 모바일은 hover 없음 → ⓘ 탭으로 같은 말풍선. ⓘ 가 12px 라 손가락엔 작아 터치 영역만 30px 로(보이는 크기 그대로, 투명 여백).
   바깥 탭 닫기는 search_list_result/search_list_toggle_js.php 의 스크립트가 처리. */
.an-lead-ad{ position:relative; }
@media (max-width: 767px), (pointer: coarse){
	.an-lead-ad::before{ content:''; position:absolute; left:-9px; top:-9px; right:-9px; bottom:-9px; }
}


/* ═══ [2026-09-13] 「영업 중」 칩(목록 카드 칩 맨 앞, include/business_hours.php an_bh_chip_html) + 「지금 영업 중만」 토글(정렬바 왼쪽) ═══
   초록 = 영업 중 · 호박 = 곧 마감/휴게 · 회색 = 오픈 전/종료/휴무. 사이트 무광 반려 → 채도 있는 초록·호박, 다크는 어두운 면 위 밝은 글자 */
.feat-tag.feat-tag--open{background:#E8F3E9 !important;color:#2E7D32 !important;border-color:#CFE5D2 !important;font-weight:700}
.feat-tag.feat-tag--open::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#2E7D32;margin-right:4px;vertical-align:1px}
.feat-tag.feat-tag--soon{background:#FBF0E6 !important;color:#B8720C !important;border-color:#F0DCC6 !important;font-weight:700}
.feat-tag.feat-tag--off{background:#F1EFEC !important;color:#8A8A90 !important;border-color:#E6E2DD !important}
body.dark .feat-tag.feat-tag--open{background:#243126 !important;color:#8BC48B !important;border-color:#2F4A33 !important}
body.dark .feat-tag.feat-tag--open::before{background:#8BC48B}
body.dark .feat-tag.feat-tag--soon{background:#3A2F1F !important;color:#E0B15E !important;border-color:#4A3D28 !important}
body.dark .feat-tag.feat-tag--off{background:#312C28 !important;color:#9A928A !important;border-color:#48423D !important}
/* [2026-09-20] .an-open-now(「지금 영업 중」 토글) 폐지 — 사장님 "아예 제거". 라이브 영업시간 입력률 4.7%, 실제 업주 입력 0곳 */


/* ── /css/check_and_radio_custom.css ── */
/* 기본 라디오 버튼 레이블 스타일 */

.search_option_label{
	padding: var(--ui-option-label-padding, 6px 12px);
	background-color: var(--search-input-bg);
	color: var(--search-input-text);
	border: 1px solid var(--search-input-border);
	border-radius: var(--ui-option-label-radius, 5px);
	margin: 4px 4px 6px 0;
	display: inline-block;
	cursor: pointer;
	user-select: none;
	font-size: var(--ui-option-label-fontsize, 13px);
	transition: background .15s, border-color .15s, color .15s;
}

/* 검색옵션 checkbox/radio 체크 시 — soft 방식(연한 배경 + 컬러 테두리 + 컬러 글씨).
   ★ 진한 채움은 여러 개 고를수록 색 덩어리가 커져 CTA보다 튄다. 다나와/알바천국 방식으로 통일. */
input[type="checkbox"]:checked + .search_option_label, input[type="radio"]:checked + .search_option_label{
	background-color: var(--ui-select-soft-bg, #FCF1F0);
	color: var(--ui-select-soft-text, #9C3830);
	border-color: var(--ui-select-soft-border, #E66B65);
	font-weight: 600;
}

/* Tab 포커스 시 label 하이라이트 (search_option_label만) */
input[type="checkbox"]:focus + .search_option_label, input[type="radio"]:focus + .search_option_label{
	box-shadow: 0 0 0 3px rgba(216, 72, 65, 0.28);
	border-color: var(--color-border-focus, #D84841);
}
/* checkbox_style / radio_style 안에서는 테두리 제거 */
.checkbox_style input[type="checkbox"]:focus + label, .radio_style input[type="radio"]:focus + label{
	box-shadow: none !important;
	border-color: transparent !important;
}

/*체크박스, 라디오 숨김 (clip 방식 — label for 연결 안정성 보장)*/
input[type="checkbox"], input[type="radio"]{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/*네모형태(div형태) 체크박스 스타일, 성별 등 기타 체크박스(c_ExOp2)*/
/*radio에도 체크박스타입처럼(c_ExOp2) 네모박스 적용 시 radio버튼 숨기기(class에다가 hidden_radio 부여해주면됨(아래참조)*/
 /* 라디오 버튼 숨김 */
 
.radio_custom_style label{
    display: inline-block; /* 레이블을 인라인 블록으로 설정 */
    margin-right: 2.5px; /* 오른쪽 여백 */
    cursor: pointer; /* 마우스 커서를 포인터로 변경 */
}


/* 비활성화된 라디오 버튼의 배경색과 텍스트 색상 설정 */
input[type="radio"]:disabled + label{
	background-color: var(--color-bg-light); /* 비활성화된 버튼의 배경색 */
	color: #ccc; /* 비활성화된 버튼의 텍스트 색상 */
}

/* radio_custom_style — soft 방식 */
.radio_custom_style input[type="radio"]:checked + label{
	background-color: var(--ui-select-soft-bg, #FCF1F0);
	color: var(--ui-select-soft-text, #9C3830);
	border-color: var(--ui-select-soft-border, #E66B65);
	font-weight: 600;
}


/* 공통 라디오 버튼 스타일 */
.radio_style{
  position: relative;
  line-height: 18px; /* 라디오 버튼의 높이에 맞춰 조정 */
}

.radio_style input[type="radio"]{
  /* 실제 라디오 버튼 숨기기 (clip 방식 — Tab 포커스 유지) */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.radio_style input[type="radio"] + label{
  display: inline-flex;
  align-items: center; /* 수직 가운데 정렬 */
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 22px; /* 레이블 왼쪽 여백 조정 (동그라미 크기 + 여백) */
  margin-right: 15px; /* 라디오버튼 간 간격 */
  line-height: 18px; /* 라디오 버튼의 높이와 일치 */
}

.radio_style input[type="radio"] + label:before{
  content: '';
  display: inline-block;
  width: var(--ui-radio-size, 16px); /* 라디오 버튼의 너비 */
  height: var(--ui-radio-size, 16px); /* 라디오 버튼의 높이 */
  background: var(--color-bg-lighter);
  border: 2px solid #cacece;
  border-radius: 50%; /* 동그란 모양 */
  box-sizing: border-box;
  vertical-align: middle;
  position: absolute; /* 절대 위치 */
  left: 0; /* 레이블 시작점에 위치 */
  top: 50%;
  transform: translateY(-50%); /* 정확한 수직 중앙 정렬 */
}

.radio_style input[type="radio"]:checked + label:before{
  background: var(--ui-select, #E66B65);
  border-color: var(--ui-select, #E66B65);
}

.radio_style input[type="radio"]:checked + label:after{
  content: '●';
  font-size: 8px;
  position: absolute;
  left: 0;
  width: var(--ui-radio-size, 16px);
  height: var(--ui-radio-size, 16px);
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ui-select-text, #ffffff);
  line-height: var(--ui-radio-size, 16px);
}

/* 다크 모드 - 체크된 라디오 버튼 */
body.dark .radio_style input[type="radio"]:checked + label:after{
  color: var(--ui-select-text, #ffffff) !important;
}

/* 다크 모드 - 라디오 버튼 pseudo-element */
html.dark .radio_style input[type="radio"] + label:before, body.dark .radio_style input[type="radio"] + label:before{ background: var(--search-input-bg); border-color: var(--search-input-border); }
html.dark input[type="radio"]:disabled + label, body.dark input[type="radio"]:disabled + label{ background-color: var(--dark-bg-primary); color: var(--dark-text-muted); }


/* 체크박스 스타일 */
/* 비활성화된 라디오 버튼의 배경색과 텍스트 색상 설정 */
input[type="checkbox"]:disabled + label{
	background-color: var(--color-bg-light); /* 비활성화된 버튼의 배경색 */
	color: #ccc; /* 비활성화된 버튼의 텍스트 색상 */
}


/* 체크박스 스타일 */
.checkbox_style{
  position: relative;
  line-height: 18px; /* 체크박스의 높이에 맞춰 조정 */
}

.checkbox_style label{
    display: inline-block; /* 레이블을 인라인 블록으로 설정 */
    margin-right: 2.5px; /* 오른쪽 여백 */
    cursor: pointer; /* 마우스 커서를 포인터로 변경 */
}


.checkbox_style input[type="checkbox"]{
  /* 실제 체크박스 숨기기 (clip 방식 — Tab 포커스 유지) */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.checkbox_style input[type="checkbox"] + label{
  display: inline-flex;
  align-items: center; /* 수직 가운데 정렬 */
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 24px; /* 체크박스 너비(19px) + 여백(5px) */
  margin-right: 15px; /* 체크박스 간 간격 */
  line-height: 18px; /* 체크박스의 높이와 일치 */
}

.checkbox_style input[type="checkbox"] + label:before{
  content: '';
  display: inline-block;
  width: var(--ui-checkbox-size, 19px); /* 체크박스의 너비 */
  height: var(--ui-checkbox-size, 19px); /* 체크박스의 높이 */
  background: var(--color-bg-lighter);
  border: 2px solid #cacece;
  border-radius: 3px; /* 체크박스는 네모 모양 */
  box-sizing: border-box;
  vertical-align: middle;
  position: absolute; /* 절대 위치 */
  left: 0; /* 레이블 시작점에 위치 */
  top: 50%;
  transform: translateY(-50%); /* 정확한 수직 중앙 정렬 */
}

/* 체크박스 네모 = 작은 컨트롤 → 진한 채움 + 흰 체크 (KRDS 방식) */
.checkbox_style input[type="checkbox"]:checked + label:before{
  background: var(--ui-select, #E66B65);
  border-color: var(--ui-select, #E66B65);
}


/* 특정 name 속성을 가진 체크박스는 더 구체적인 스타일이 우선 적용되도록 (등록폼 제외) */
input[name="c_etcOp2_all[]"]:checked + label, input[name="c_etcOp2[]"]:checked + label{
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
	font-weight: 600;
}
/* 등록폼 내에서는 체크 시 배경색 제거 */
.ragistration input[name="c_etcOp2[]"]:checked + label, .ragistration input[name="c_etcOp2_all[]"]:checked + label, .form-card input[name="c_etcOp2[]"]:checked + label, .form-card input[name="c_etcOp2_all[]"]:checked + label{
	background-color: transparent !important;
	color: inherit !important;
	border-color: transparent !important;
}

/* radio_style 내 c_etcOp2 라디오버튼은 배경색 투명 (커스텀 동그라미 사용) */
.radio_style input[name="c_etcOp2[]"]:checked + label{
	background-color: transparent !important;
	color: inherit !important;
	border-color: transparent !important;
}

/* 다크 모드 - c_etcOp2 라벨 미체크 상태 */
body.dark input[name="c_etcOp2_all[]"] + label, body.dark input[name="c_etcOp2[]"] + label{
	background-color: var(--search-input-bg) !important;
	color: var(--search-input-text) !important;
	border-color: var(--search-input-border) !important;
}
body.dark input[name="c_etcOp2_all[]"] + label:hover, body.dark input[name="c_etcOp2[]"] + label:hover{
	background-color: var(--search-toggle-hover-bg) !important;
}

body.dark input[name="c_etcOp2_all[]"]:checked + label, body.dark input[name="c_etcOp2[]"]:checked + label{
	background-color: var(--ui-select-soft-bg, #FCF1F0) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
}

body.dark .radio_style input[name="c_etcOp2[]"]:checked + label{
	background-color: transparent !important;
	color: inherit !important;
	border-color: transparent !important;
}


/* 체크 표시 유니코드 */
.checkbox_style input[type="checkbox"]:checked + label:after{
  content: '✔';
  font-size: 14px;
  position: absolute;
  left: 0;
  width: var(--ui-checkbox-size, 19px);
  height: var(--ui-checkbox-size, 19px);
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ui-select-text, #ffffff);
  line-height: var(--ui-checkbox-size, 19px);
}

/* 비활성화 상태 */
.checkbox_style input[type="checkbox"]:disabled + label{
  background-color: var(--color-bg-light); /* 비활성화된 버튼의 배경색 */
  color: #ccc; /* 비활성화된 버튼의 텍스트 색상 */
  cursor: not-allowed; /* 비활성화 상태의 커서 */
}

.checkbox_style input[type="checkbox"]:disabled + label:before{
  background: var(--color-border-light); /* 비활성화된 체크박스 배경색 */
  border-color: #cacece;
}

/* 다크 모드 - 체크박스 pseudo-element */
body.dark .checkbox_style input[type="checkbox"] + label:before{ background: var(--search-input-bg); border-color: var(--search-input-border); }

/* 다크 모드 - 체크된 체크박스 */
body.dark .checkbox_style input[type="checkbox"]:checked + label:after{
  color: var(--ui-select-text, #ffffff) !important;
}

html.dark .checkbox_style input[type="checkbox"]:checked + label:before, body.dark .checkbox_style input[type="checkbox"]:checked + label:before{
  background-color: var(--ui-select, #E66B65) !important;
  border-color: var(--ui-select, #E66B65) !important;
}

/* 다크 모드 - 비활성화된 체크박스 */
html.dark .checkbox_style input[type="checkbox"]:disabled + label:before, body.dark .checkbox_style input[type="checkbox"]:disabled + label:before{
  background-color: #444 !important;
  border-color: #666 !important;
}


/*체크박스 css(상담버튼 혹은 비활성화 상태)*/
.checkbox_grayStyle{position: relative;}

/* ── 등록폼 옵션 = 칩(pill) 토글 ──
   체크박스 input(position:absolute) 은 숨긴 채, label 을 알약 버튼으로.
   선택 시 브랜드색으로 채움. 라벨 전체가 터치 영역 → 모바일에서도 누르기 쉬움.
   _select_area 패턴을 쓰는 모든 등록폼(PC·모바일) 공통. 약관동의 등 일반 체크박스는 미적용. */
.checkbox_style div[id$="_select_area"]{
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	width: auto !important;
	max-width: 100%;
	align-items: center;
}
.checkbox_style div[id$="_select_area"] label{
	margin: 0 !important;
	padding: 9px 16px !important;
	border: 1.5px solid var(--color-border, #ddd);
	border-radius: 20px;
	background: #fff;
	color: var(--color-text-secondary, #393939);
	font-size: 14px;
	line-height: 1.2 !important;
	cursor: pointer;
	transition: all .15s;
	-webkit-user-select: none; user-select: none;
}
/* 칩이라 체크박스 박스/체크표시 숨김 */
.checkbox_style div[id$="_select_area"] label:before, .checkbox_style div[id$="_select_area"] label:after{ display: none !important; content: none !important; }
.checkbox_style div[id$="_select_area"] label span{ margin: 0 !important; }
.checkbox_style div[id$="_select_area"] label:hover{ border-color: var(--ui-select-soft-border, #E66B65); color: var(--color-hover); }
/* 선택됨 → 브랜드색 채움 */
.checkbox_style div[id$="_select_area"] input:checked + label{
	background: var(--ui-select-soft-bg, #FCF1F0) !important;
	border-color: var(--ui-select-soft-border, #E66B65) !important;
	color: var(--ui-select-soft-text, #9C3830) !important;
	font-weight: 600;
}
.checkbox_style div[id$="_select_area"] input:checked + label span{ color: var(--ui-select-soft-text, #9C3830) !important; }
.checkbox_style div[id$="_select_area"] input:focus-visible + label{ box-shadow: 0 0 0 3px rgba(216, 72, 65,.24); }
/* 다크모드 */
body.dark .checkbox_style div[id$="_select_area"] label{ background: var(--dark-bg-tertiary, #2A2A2A); border-color: var(--dark-border-secondary, #4A4A4A); color: var(--dark-text-secondary, #ACACAC); }
body.dark .checkbox_style div[id$="_select_area"] input:checked + label{ background: var(--ui-select-soft-bg, #FCF1F0) !important; border-color: var(--ui-select-soft-border, #E66B65) !important; color: var(--ui-select-soft-text, #9C3830) !important; }

/* ── 가격칸 '상담' 체크박스 간격 타이트 (beauty/hotel/school 공통) ──
   c_consult_price* / c_consult_priceM* — 박스를 왼쪽 끝으로, 텍스트를 박스에 붙이고 뒤 여백 제거 */
.checkbox_style input[type="checkbox"][id*="consult_price"] + label{ margin: 0 2px 0 0 !important; padding-left: 21px !important; }
.checkbox_style input[type="checkbox"][id*="consult_price"] + label:before{ left: 0 !important; }
.checkbox_style input[type="checkbox"][id*="consult_price"] + label span{ margin-left: 0 !important; }

/* ── /css/custom_input.css ── */
/*========================================
  커스텀 텍스트 입력 (Custom Text Input)
  ----------------------------------------
  PC/모바일 공용 — check_and_radio_custom.css와 동일 변수 시스템

  .search_option_label 과 같은 변수 사용:
  - 기본: --search-input-bg / --search-input-border / --search-input-text
  - 포커스: --ui-checked-bg / --ui-checked-border
  - 라벨:  --ui-option-label-radius / --ui-option-label-fontsize

  사용법:
  - 전역: 모든 input에 자동 적용 (인라인 style보다 낮은 우선순위)
  - 강화: class="custom_input" 추가 시 인라인 style 오버라이드
  - 사이즈: .input_sm / .input_lg
  - 너비: .input_auto / .input_half / .input_fixed_sm / _md / _lg
  - 그룹: <div class="input_group"> 라벨+인풋 가로 배치
========================================*/


/* ========== 1. 전역 기본 스타일 ========== */
/* 낮은 우선순위 — 인라인 style 보존 */

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea {
	font-family: inherit;
	font-size: var(--ui-option-label-fontsize, 13px);
	color: var(--search-input-text);
	background-color: var(--search-input-bg);
	border: 1px solid var(--search-input-border);
	border-radius: var(--ui-option-label-radius, 5px);
	padding: 14px 6px;
	margin: 4px 4px 6px 0;
	box-sizing: border-box;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
	outline: none;
}

/* 포커스 — 체크된 체크박스와 같은 색상 */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
	border-color: var(--ui-checked-border, var(--ui-checked-bg, #E66B65));
	box-shadow: 0 0 0 3px rgba(216, 72, 65, 0.2);
}

/* 플레이스홀더 */
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
	color: var(--search-input-border);
	opacity: 1;
}

/* 비활성 */
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
textarea:disabled {
	background-color: var(--search-option-td-bg, #fafafa);
	color: var(--search-input-border);
	cursor: not-allowed;
	opacity: 0.7;
}

/* 읽기전용 */
input[type="text"]:read-only,
input[type="password"]:read-only,
input[type="number"]:read-only,
textarea:read-only {
	background-color: var(--search-option-td-bg, #fafafa);
	cursor: default;
}


/* ========== 2. .custom_input 클래스 (인라인 스타일 오버라이드) ========== */

.custom_input {
	width: 100% !important;
	height: auto !important;
	background-color: var(--search-input-bg) !important;
	border: 1px solid var(--search-input-border) !important;
	border-radius: var(--ui-option-label-radius, 5px) !important;
	padding: 10px 12px !important;
	font-size: var(--ui-option-label-fontsize, 13px) !important;
	color: var(--search-input-text) !important;
	box-sizing: border-box;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
	outline: none;
}

.custom_input:focus {
	border-color: var(--ui-checked-border, var(--ui-checked-bg, #E66B65)) !important;
	box-shadow: 0 0 0 3px rgba(216, 72, 65, 0.2) !important;
}

.custom_input::placeholder {
	color: var(--search-input-border) !important;
	opacity: 1;
}

.custom_input:disabled {
	background-color: var(--search-option-td-bg, #fafafa) !important;
	color: var(--search-input-border) !important;
	cursor: not-allowed;
	opacity: 0.7;
}


/* ========== 3. 사이즈 변형 ========== */



/* ========== 6. textarea ========== */

textarea.custom_input {
	min-height: 80px;
	resize: vertical;
}


/* ── /css/ad_banner.css ── */
/* 배너 광고 자리 공용 (2026-09-18) — include/ad_banner.php · js/ad_rotate.js
   컨트롤: a 하단 바(참고 sample/광고하단.png) · e 오른쪽 작게 · m 모바일 바(업체명 + 1/N) · n 없음. 다크 폴백 포함. */
.an-ad{position:relative;box-sizing:border-box;margin:0 auto;font-family:inherit}
.an-ad__frame{position:relative;width:100%;overflow:hidden;border-radius:6px 6px 0 0;background:var(--color-bg-white,#fff)}
.an-ad--n .an-ad__frame,.an-ad--adsense{border-radius:6px}
.an-ad__link{display:block;line-height:0}
.an-ad__img{display:block;width:100%;height:auto}
.an-ad__ctl{display:flex;align-items:center;gap:6px;padding:6px 6px;border:1px solid var(--ctl-border,#E2E2E6);border-top:0;border-radius:0 0 6px 6px;background:var(--color-bg-white,#fff);font-size:13px;font-weight:700;color:var(--tint-coral-fg,#B3331E);line-height:1}
body.dark .an-ad__ctl{background:var(--dark-bg-secondary,#232323);border-color:var(--dark-border,#3a3a3a);color:var(--color-text-emphasis,#F2C25E)}
.an-ad__who{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-ad__cnt{font-style:normal;font-weight:500;font-size:11px;color:var(--color-text-tertiary,#8A837D);white-space:nowrap}
.an-ad__btn{flex:none;width:30px;height:30px;padding:0;border:1px solid var(--ctl-border,#CFC7BE);border-radius:7px;background:var(--color-bg-white,#fff);color:var(--color-text-primary,#1F1B1A);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
body.dark .an-ad__btn{background:var(--dark-bg-secondary,#232323);border-color:var(--dark-border,#4a4a4a);color:var(--color-text-primary,#eee)}
.an-ad__btn:hover{border-color:var(--color-brand,#D8432A);color:var(--color-brand,#D8432A)}
.an-ad__btn:focus-visible{outline:2px solid var(--color-brand,#D8432A);outline-offset:2px}
.an-ad__btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* E: 오른쪽 작게 */
.an-ad__ctl--e{justify-content:flex-end;padding:5px 8px}
.an-ad__ctl--e .an-ad__who{flex:none;font-size:12.5px;margin-right:4px;max-width:60%}
.an-ad__ctl--e .an-ad__btn{width:26px;height:26px}
/* 좁은 자리(120·125·150·200px) — 화살표 작게 */
.an-ad-pc_quick_top .an-ad__btn,.an-ad-pc_comm_rail .an-ad__btn,.an-ad-pc_comm_corner .an-ad__btn,.an-ad-pc_login .an-ad__btn{width:22px;height:22px;border-radius:5px}
.an-ad-pc_quick_top .an-ad__ctl,.an-ad-pc_comm_rail .an-ad__ctl,.an-ad-pc_comm_corner .an-ad__ctl,.an-ad-pc_login .an-ad__ctl{font-size:11.5px;padding:4px 4px;gap:3px}
/* 관리자 미리보기(?an_adhl=1) */
.an-ad--hl{outline:3px dashed #E9B94A;outline-offset:2px}
.an-ad__hl{position:absolute;left:0;top:-22px;z-index:6;background:#F2C25E;color:#3A2019;font-size:11.5px;font-weight:900;padding:2px 8px;border-radius:5px;white-space:nowrap;line-height:1.4}
.an-ad--empty{display:flex;align-items:center;justify-content:center;border:2px dashed #E9B94A;border-radius:8px;background:rgba(242,194,94,.12)}
.an-ad__emptytxt{font-size:12.5px;font-weight:700;color:#7A5200}
/* ── [2026-09-24] 「이 자리에 광고하기」(업체회원·관리자만) · 광고 1개 얇은 바 · 0구좌 모집 줄 ── */
.an-ad__frame--solo{border-radius:6px}
.an-ad__adv{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--color-text-tertiary,#8A837D);text-decoration:none;white-space:nowrap;line-height:1}
.an-ad__adv:hover{color:var(--color-brand,#D8432A)}
.an-ad__chip{font-size:10px;font-weight:900;padding:2px 4px;border:1px solid var(--ctl-border,#CFC7BE);border-radius:3px;letter-spacing:.04em;line-height:1}
.an-ad__adv:hover .an-ad__chip{border-color:var(--color-brand,#D8432A)}
.an-ad__ctl--e .an-ad__adv{margin-right:auto}
.an-ad__ctl--hasline{border-radius:0}
.an-ad__advline{display:flex;align-items:center;justify-content:center;height:22px;border:1px solid var(--ctl-border,#E2E2E6);border-top:0;border-radius:0 0 6px 6px;background:var(--color-bg-secondary,#FAF8F6);font-size:11px;font-weight:700;color:var(--color-text-tertiary,#8A837D);text-decoration:none;line-height:1}
.an-ad__advline:hover{color:var(--color-brand,#D8432A)}
.an-ad__thin{display:flex;align-items:center;gap:8px;padding:0 10px;height:30px;border:1px solid var(--ctl-border,#E2E2E6);border-top:0;border-radius:0 0 6px 6px;background:var(--color-bg-white,#fff);font-size:12.5px;font-weight:700;color:var(--tint-coral-fg,#B3331E);line-height:1}
.an-ad__thin .an-ad__who{flex:1;text-align:left}
.an-ad__thin .an-ad__adv{margin-left:auto}
.an-ad__thin--n{height:24px;padding:0 6px;font-size:11.5px;border-radius:0}
.an-ad__thin--n .an-ad__who{text-align:center}
.an-ad__thin--m{height:40px;border-radius:0 0 10px 10px;font-size:14px}
.an-ad--recruit{margin:0 auto}
.an-ad__recruit{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border:1px solid var(--ctl-border,#E2E2E6);border-radius:6px;background:var(--color-bg-secondary,#FAF8F6);font-size:12.5px;font-weight:700;color:var(--color-text-secondary,#6F6862);text-decoration:none;white-space:nowrap;line-height:1}
.an-ad__recruit b{color:var(--tint-coral-fg,#B3331E)}
.an-ad__recruit i{font-style:normal;color:var(--color-text-tertiary,#8A837D)}
.an-ad__recruit:hover{border-color:var(--color-brand,#D8432A)}
.an-ad-pc_comm_rail .an-ad__recruit,.an-ad-pc_quick_top .an-ad__recruit,.an-ad-pc_quick_bottom .an-ad__recruit,.an-ad-pc_login .an-ad__recruit{flex-direction:column;gap:2px;height:44px;font-size:11.5px;white-space:normal;text-align:center}
/* 모바일 M 바 안 칩(누르는 칸 40px) */
.an-ad--m .an-ad__adv{height:40px;padding:0 10px;border:1px solid var(--ctl-border,#CFC7BE);border-radius:10px;font-size:13px;color:var(--tint-coral-fg,#B3331E)}
.an-ad--m .an-ad__adv .an-ad__chip{border-color:var(--color-brand,#D8432A);color:var(--color-brand,#D8432A)}
.an-ad--m .an-ad__recruit{height:44px;border-radius:10px;font-size:14px}
#right_mainSub_banner_container .an-ad__recruit,#right_mainSub_banner_container .an-ad__advline,#right_mainSub_banner_container .an-ad__thin{display:flex;line-height:1}#right_mainSub_banner_container .an-ad__adv{display:inline-flex;line-height:1}#right_mainSub_banner_container .an-ad__recruit{border-radius:12px} /* 2026-09-26 통(pk-box, radius 12·overflow hidden)이 6px 상자의 좌우 테두리·모서리를 잘라 hover 때 위아래 선만 보이던 것(호버시라인.png) */ /* 2026-09-26 첫 화면 오른쪽 옛 배너 통 규칙(main_right.php `#right_mainSub_banner_container a{display:inline-block;line-height:0}`)이 글자 줄을 덮어 글씨가 상자 위로 튀던 것(구독칸.png) */
.an-ad__recruit--sq{flex-direction:column;gap:4px;white-space:normal;text-align:center;font-size:12px;line-height:1.35;padding:8px;box-sizing:border-box;border-radius:10px}.an-ad__recruit--sq i{display:none} /* 2026-09-26 고정 칸(S) 빈 자리 = 자리 크기 상자 */
body.dark .an-ad__advline,body.dark .an-ad__thin,body.dark .an-ad__recruit{background:var(--dark-bg-secondary,#232323);border-color:var(--dark-border,#3a3a3a)}
body.dark .an-ad__adv,body.dark .an-ad__advline,body.dark .an-ad__recruit{color:var(--color-text-secondary,#C9C1BB)}
body.dark .an-ad__thin{color:var(--color-text-emphasis,#F2C25E)}
body.dark .an-ad__recruit b{color:var(--color-text-emphasis,#F2C25E)}
.an-ad--m .an-ad__btn{width:40px;height:40px;border-radius:10px}
.an-ad--m .an-ad__ctl{padding:8px;gap:8px;font-size:14px;border-radius:0 0 10px 10px}
.an-ad--m .an-ad__frame{border-radius:10px 10px 0 0}
.an-ad--m .an-ad__frame--solo{border-radius:10px}
/* [2026-09-25] 구매 화면 「실제 화면 보기」 → ?an_adhl=<slot> 로 온 «그 자리 하나» 강조(누구에게나) */
.an-ad--hl-me{outline:3px solid #E9B94A;outline-offset:3px;border-radius:6px;animation:anAdHlPulse 1.1s ease-in-out 5}
.an-ad--hl-me.an-ad--empty{outline-style:solid}
.an-ad__hl--me{background:var(--color-brand,#D8432A);color:#fff;font-size:12.5px;padding:3px 10px;top:-26px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
@keyframes anAdHlPulse{0%,100%{box-shadow:0 0 0 0 rgba(233,185,74,0)}50%{box-shadow:0 0 0 14px rgba(233,185,74,.38)}}
@media (prefers-reduced-motion:reduce){.an-ad--hl-me{animation:none}}
.an-ad--empty .an-ad__emptytxt{text-align:center;padding:0 10px;line-height:1.5}
/* ── [2026-09-25] 고정 칸 S(글보기 프로필 옆·목록 작은 박스·기둥·커뮤니티 맨 위 띠) — 바 없음, 「AD」 표식만 ── */
.an-ad--s .an-ad__frame{border-radius:10px}
.an-ad__dots{position:absolute;left:0;right:0;bottom:5px;display:flex;justify-content:center;gap:4px;pointer-events:none;z-index:2}.an-ad__dots i{display:block;width:5px;height:5px;border-radius:3px;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.5);transition:width .2s,background .2s}.an-ad__dots i.on{width:12px;background:#fff} /* 2026-09-26 고정 칸(S) 회전 점 */
.an-ad__adchip{position:absolute;left:6px;top:6px;z-index:2;font-size:9.5px;font-weight:900;letter-spacing:.06em;line-height:1;padding:3px 5px;border-radius:4px;background:rgba(31,27,26,.72);color:#fff;pointer-events:none}
.an-mvside .an-ad{width:125px !important}
.an-mvside .an-ad__frame{border:1px solid var(--ctl-border,#E4DFD6);box-shadow:0 1px 3px rgba(0,0,0,.06)}
body.dark .an-mvside .an-ad__frame{border-color:var(--dark-border,#3a3a3a)}
/* 모바일 커뮤니티 맨 위 띠 — 폭을 꽉 채움(그림 320×100 → 화면 폭, 비율 유지), 여백 없음 */
.m-adslot--commtop{margin:0;padding:0}
.m-adslot--commtop .an-ad{width:100% !important;max-width:none !important;margin:0}
.m-adslot--commtop .an-ad__frame{border-radius:0}
.m-adslot--commtop .an-ad__img{width:100%;height:auto}
.m-adslot--commtop .an-ad--recruit{width:100% !important}
/* ── [2026-10-06] 움직이는 배너(영상) — include/ad_banner.php an_ad_media_html · js/ad_rotate.js bindVideo. 소리 버튼(좌상)·광고주명(좌하)·남은 시간(우하)·진행 막대(맨 아래) ── */
.an-ad__video{display:block;width:100%;height:auto;background:#000;object-fit:cover}
.an-ad__vctl{display:contents}
.an-ad__snd{position:absolute;left:6px;top:6px;z-index:4;width:26px;height:26px;padding:0;border:0;border-radius:6px;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.an-ad__snd:hover{background:rgba(0,0,0,.65)}.an-ad__snd:focus-visible{outline:2px solid #fff;outline-offset:1px}
.an-ad__snd svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.an-ad__snd .w{display:none}.an-ad__snd.on{background:var(--color-brand,#D8432A)}.an-ad__snd.on .x{display:none}.an-ad__snd.on .w{display:block}
.an-ad__vwho{position:absolute;left:8px;bottom:8px;z-index:3;font-style:normal;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.an-ad__vtime{position:absolute;right:8px;bottom:8px;z-index:3;font-style:normal;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);font-variant-numeric:tabular-nums;pointer-events:none;line-height:1.2}
.an-ad__vbar{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:rgba(255,255,255,.25);pointer-events:none}
.an-ad__vbar b{display:block;height:100%;width:0;background:var(--color-brand,#D8432A)}
/* 작은 칸(≤150px)·낮은 띠(높이 ≤100px) — 버튼 작게, 광고주명 작게 */
.an-ad-pc_quick_top .an-ad__snd,.an-ad-pc_comm_rail .an-ad__snd,.an-ad-pc_view_side .an-ad__snd,.an-ad-pc_quick_bottom .an-ad__snd,.an-ad-m_view_side .an-ad__snd,.an-ad-m_list_box .an-ad__snd,.an-ad-m_home_top .an-ad__snd,.an-ad-m_view .an-ad__snd,.an-ad-m_detail .an-ad__snd,.an-ad-m_comm_top .an-ad__snd,.an-ad-m_footer .an-ad__snd,.an-ad--strip .an-ad__snd{width:22px;height:22px;border-radius:5px}
.an-ad-m_home_top .an-ad__vwho,.an-ad-m_view .an-ad__vwho,.an-ad-m_detail .an-ad__vwho,.an-ad-m_comm_top .an-ad__vwho,.an-ad-m_footer .an-ad__vwho,.an-ad-pc_view_bottom .an-ad__vwho{font-size:11px;bottom:7px}
/* 고정 칸(S): AD 표식이 좌상에 있어 소리 버튼은 우상으로, 점은 막대 위로 */
.an-ad--s .an-ad__snd{left:auto;right:6px}
.an-ad__frame--v .an-ad__dots{bottom:8px}
/* 맨 위 띠: 「광고」 표식·닫기 버튼과 안 겹치게 — 소리 버튼은 표식 오른쪽 */
.an-ad--strip .an-ad__snd{left:46px;top:50%;transform:translateY(-50%)}.an-ad--strip .an-ad__vwho,.an-ad--strip .an-ad__vtime{display:none}
@media (prefers-reduced-motion:reduce){.an-ad__vbar{display:none}}