/* an_css_concat pct — 2026-10-23T08:05:24+09:00 — 원본: /css/inl/pc_tail.css */

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

/* ── inc/header.php (옛 655줄) ── */
	input:focus {
	  /*outline:0.5px solid red;*/
	  outline:none;
	}
	

/* ── inc/header.php (옛 662줄) ── */
/**********s:다크모드 css**********/
body.dark .bg .mode-text,
body.dark .bg .icon_text{
	color: #000;
	font-weight: 600;
	letter-spacing: -1px;
	margin-left: -2.2px;
}

/*main_left ul(main화면 실시간 핫클릭, 이번주 인기글)은 border-radius가 겹쳐서 제외*/
/*#main_right_login_box는 내부 섹션(로그인/배너/검색어) 간 간격이 보여야 하므로 제외*/
body.dark ul:not(.main_left ul):not(#main_right_login_box) {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border-secondary);
}

body.dark li div:not(.best_icon):not(.event_icon):not(.notice_icon),
body.dark li {
	background-color: var(--dark-bg-secondary);
	color: var(--dark-text-primary);
	border-color: var(--dark-border-secondary);
}

#community_main_ul_list li div{
	background-color: transparent !important;
}

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

/*checkbox,radio 등 label css*/
body.dark label{
	color: var(--dark-text-primary);
}

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

 
/*table css*/
body.dark table,
body.dark table th,
body.dark table tr,
body.dark table td div:not(.best_icon):not(.event_icon):not(.notice_icon),
body.dark table td,
body.dark table td a {
	color: var(--dark-text-primary);
	border-color: var(--dark-border-secondary);
}
body.dark table td a:hover { color: var(--color-hover); }   /* 2026-09-14 hover 통일: 위 규칙이 a:hover 보다 강해 다크 표 안 링크(푸터·마이커뮤니티 등)가 hover 반응이 없었다 */

/* dark모드 - li selected , li hover, a링크 전체 */
body.dark li.selected a,
body.dark li.selected a span{
	background-color: var(--dark-ranking-color) !important;
	color: var(--dark-text-primary) !important;
	border-color: var(--dark-border-secondary) !important;
}

/* dark모드 - li hover */
body.dark li:hover a,
body.dark li:hover a span {
	color: var(--color-hover); /* 2026-09-14 사이트 hover 통일: 다크도 hover = 노랑(--color-hover). 전엔 hover 때 기본 글자색을 강제해 LNB·메인 베스트가 hover 반응이 없었다 */
}
/**********e:다크모드 css**********/

/********** s:다크모드 css - search 검색 제목 타이틀 **********/
	body.dark #search_container_title {
		color: var(--dark-text-secondary);
		font-weight: 700;
	}

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


	body.dark .hover_list{
		background-color: var(--dark-bg-primary);
		font-weight: 700;
		color: var(--dark-text-primary);
	}

	
	
	
	/*라이트모드 list hover*/
	body .hover_list:hover tbody tr:hover td {
		background: var(--color-bg-lighter);
	}
	
	/*다크모드 list hover*/
	body.dark .hover_list:hover tbody tr:hover td {
		background-color: var(--dark-bg-hover, #333333);
	}
/********** e:다크모드 css - search 검색 제목 타이틀 **********/

/********** s:다크모드 css - lnb메뉴(커뮤니티/마이페이지 left메뉴) **********/	
	body.dark .mLnb li:not(.lnb_community_mBtn),
	body.dark .mLnb li:not(.lnb_community_mBtn) a,
	body.dark .lnb_area:not(.lnb_community_mBtn) {
		background-color: var(--dark-bg-secondary);
		border-color: var(--dark-border-secondary);
	}
/********** e:다크모드 css - lnb메뉴(커뮤니티/마이페이지 left메뉴) **********/

	/*등록 시 사진첨부/Youtube링크/외부컨텐츠 아이콘 색상*/
	body.dark .fa-image,
	body.dark .fa-youtube,
	body.dark .fa-sign-in-alt,
	body.dark .fa-face-grin{
		color: var(--color-brand, #D8432A);
	}
	

/* ── inc/gnb.php (옛 3줄) ── */
/********** 다크모드 css - gnb 메뉴색상 **********/

/* 다크 모드에서 링크의 배경색 설정 */
body.dark .gnb_menu ul a {
    background-color: var(--dark-gnb-bg) !important;
    position: relative;
}

/* 링크의 텍스트 색상을 하얀색으로 설정 */
body.dark .gnb_menu ul li a {
    color: #fff !important;   /* [2026-08-28 u3] 테라코타 띠 위 순백 */
}

/* 다크모드 gnb_menu ul 배경색 */
body.dark .gnb_menu ul {
    background-color: var(--dark-gnb-bg) !important;
}

/* 전체 네비게이션 배경색 설정 */
body.dark .gnb_wrapper,
body.dark #wrap .gnb_wrapper,
body.dark #header .gnb_wrapper,
body.dark html .gnb_wrapper {
    background: var(--dark-gnb-bg) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* 다크모드에서 pseudo-element 배경색 */
body.dark .gnb_wrapper::before,
body.dark #wrap .gnb_wrapper::before,
body.dark #header .gnb_wrapper::before,
body.dark html .gnb_wrapper::before {
    background: var(--dark-gnb-bg) !important;
}

/* 다크모드 로고 그림자 효과 */
body.dark .logo .logo_img {
    filter: drop-shadow(0 0 6px rgba(183, 122, 108, 0.40)) drop-shadow(0 0 10px rgba(191, 169, 125, 0.32));   /* [2026-09-12] 다크 로고 = GNB 띠와 같은 채도 34%(사장님 최종): Animal #B77A6C · nara #BFA97D(명도는 유지), 글로우 2겹도 같은 두 색(안쪽 Animal, 바깥 nara). 원본 md/backup/logo_260912/. 종전 주황 글로우·단일 nara 글로우·채도 50% 로고는 반려 */
}

/*gnb메뉴 hover/선택 색상*/
body.dark .gnb_menu li:hover,
body.dark .gnb_menu .selected,
body.dark .gnb_menu li:hover a,
body.dark .gnb_menu .selected a{
	background-color: var(--gnb-active-bg, #553129) !important;
}
/* [2026-09-12] 다크 현재 메뉴·hover = 라이트와 같은 문법(채움만 다르게, 흰 글자, 밑줄 없음 — 사장님 최종).
   값은 --gnb-active-bg(다크 #3A2019 = 띠 #553129 보다 어두운 같은 계열 — 라이트도 띠보다 진한 채움이라 같은 방향. 밝게(#6B3E33) 했을 땐 명도차 6%p 라 눌린 게 안 보여 반려). 한때 nara 글자+3px 밑줄(B+)이었으나 "누른 뒤에도 밑줄" 로 반려 */

/*글씨 그림자*/
body.dark .gnb_menu a {
	text-shadow: none !important;   /* [2026-08-28 u3] 검정 띠 시절 그림자 — 테라코타 띠에선 지저분 */
}

/*메뉴 그림자(border스타일)추가*/
body.dark .gnb_menu ul a {
    content: ''; /* 내용 없이 그림자만 추가 */
    top: 0; /* 상단 위치 */
    left: 0; /* 좌측 위치 */
    right: 0; /* 우측 위치 */
    bottom: 0; /* 하단 위치 */
    box-shadow: inset 2px 0 2px rgba(255, 255, 255, 0.1) !important; /* 내부 그림자 설정 */
}


/* 마지막 항목에 그림자 추가 */
body.dark .gnb_menu li:last-child a {
    position: relative;
    box-shadow: inset 2px 0 2px rgba(255, 255, 255, 0.1) !important; /* 오른쪽 그림자 */
}

body.dark .gnb_menu li:last-child a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: inset -2px 0 2px rgba(255, 255, 255, 0.1) !important; /* 왼쪽 그림자 */
}

/* ── inc/gnb.php (옛 101줄) ── */
/* box-sizing 통일: main.php는 * {border-box}, search는 content-box → GNB 전체 강제 통일 */
.logo_area,
.logo_area *,
.logo_area *::before,
.logo_area *::after,
.gnb_wrapper,
.gnb_wrapper *,
.gnb_wrapper *::before,
.gnb_wrapper *::after {
    box-sizing: border-box;
}

.gnb_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 9999;
    height: 45px;
    background: var(--color-brown) !important;
    background-image: none !important;
    position: relative;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}


/* GNB wrapper를 화면 전체 너비로 확장하는 pseudo-element */
.gnb_wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--color-brown) !important;
    z-index: -1;
    pointer-events: none;
}

/* GNB wrapper의 부모 요소에도 배경색 적용 보장 */
body .gnb_wrapper,
html .gnb_wrapper,
#wrap .gnb_wrapper,
#header .gnb_wrapper {
    background: var(--color-brown) !important;
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* 모든 부모 요소 내부의 GNB wrapper pseudo-element */
body .gnb_wrapper::before,
html .gnb_wrapper::before,
#wrap .gnb_wrapper::before,
#header .gnb_wrapper::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--color-brown) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

.gnb_menu {
    display: flex;
    align-items: center;
    height: 100%;
    width: var(--site-w,1330px); /* 사이트 폭 연동(본문과 정렬) */
    max-width: var(--site-w,1330px);
    margin: 0 auto; /* 좌우 auto 센터링 */
    overflow: hidden; /* 스크롤바 방지 */
}

.gnb_menu ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: var(--color-brown);
}

.gnb_menu li {
    white-space: nowrap; /* 텍스트 강제 줄바꿈 방지 */
    height: 45px;
    line-height: 45px;
    position: relative;
    flex-grow: 1; /* 각 li가 동일한 너비를 차지하도록 설정 */
    text-align: center; /* 텍스트 가운데 정렬 */
    box-shadow: inset 2px 0 2px rgba(0, 0, 0, 0.1); /* 내부 그림자 적용 */
    margin: 0; /* 간격 없애기 */
}

.gnb_menu li:first-child {
    box-shadow: inset 2px 0 2px rgba(0, 0, 0, 0.1); /* 첫 번째 항목 내부 그림자 */
}

.gnb_menu li:last-child {
    box-shadow: inset -2px 0 2px rgba(0, 0, 0, 0.1), inset 2px 0 2px rgba(0, 0, 0, 0.1); /* 마지막 항목 양쪽 내부 그림자 */
}

.gnb_menu li:hover,
.gnb_menu .selected {
    /* ★ GNB 는 브랜드 컬러 바(--gnb-bg) 자체라, 현재 위치는 '같은 색의 더 진한 톤'으로 표시한다.
       여기에 --ui-active(파랑)를 얹으면 컬러 면 위에 다른 컬러가 겹쳐 싸운다.
       사이트 전체 활성색과 다른 유일한 예외이며, 값은 --gnb-active-bg 로 관리한다. */
    background-color: var(--gnb-active-bg, #8c2323);
}

/* a 요소의 padding을 제거하여 간격 없애기 */
.gnb_menu a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    padding: 0 10px; /* 원래 padding은 남겨두어 텍스트가 잘리거나 겹치지 않게 */
    display: block; /* a 요소가 li 크기에 맞게 확장되도록 설정 */
	text-shadow:0 1px 0 black;
}

/* selected 상태에서도 a의 padding이 고정되어 있어서 간격이 변하지 않도록 */
.gnb_menu .selected a {
    padding: 0 10px; /* 선택된 항목에서 padding 고정 */
}

/* 로고 스타일 */
.logo_area > .logo {
	padding-top:3px;
	padding-bottom:1px;
    text-align: left; /* 로고 왼쪽 정렬 */
    min-width: 219px; /* 레이아웃 시프트 방지 */
    flex-shrink: 0;
}

/* ── inc/gnb.php (옛 252줄) ── */
/* GNB 윗줄(로고·검색) 밴드 — [2026-08-28 K2] 흰 헤더(바탕 회색과 분리). 같은 날 앞서 "위·아래 같은 웜"이었다가 K2 로 바뀜.
   흰 밴드였을 땐 GNB 위에 흰 종이 한 장 얹은 경계가 생기고 웜 바탕이 상대적으로 누렇게 보였다.
   풀블리드 밴드가 배경을 칠하고 .logo_area 는 기존 그대로 사이트 폭 센터링. 다크는 바탕과 동일 면 = 무변화 */
.logo_band {
    width: 100%;
    background: var(--light-bg-primary, #fff);   /* [2026-08-28 K2] 헤더 흰색 + 아래 1px 선 = 본문 회색과 분리(엠팍·쿠팡 공식). 사장님 K2 선택 */
    border-bottom: 1px solid var(--color-border-light, #E0E0E4);
    /* [2026-08-12] 인기 검색어 드롭다운(gnb_trend_keyword)이 GNB 바(z-index:9999) 아래로 깔리던 것 —
       밴드에 컨텍스트를 만들어 위로. nav 서브메뉴(아래쪽 전개)와는 영역이 안 겹쳐 무해 */
    position: relative;
    z-index: 10000;
}
html.dark .logo_band,
body.dark .logo_band {
    background: var(--dark-bg-page, #141414);
}

.logo_area {
    display: flex;
    width: var(--site-w,1330px); /* 사이트 폭 연동 */
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    overflow: visible; /* 툴팁이 보이도록 */
}


.logo img {
    height: 62px;
}

.gnb_button_area {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.right_top_gnb_btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #ddd;
    background-color: var(--color-bg-lighter);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.right_top_gnb_btn:hover {
    background-color: #e9e9e9;
    transform: scale(1.05);
}

.right_top_gnb_btn i {
    font-size: 15px;
    color: #555;
}
/* [2026-09-26] 「광고 안내」 알약(AD 칩) — 유틸 줄, 아이콘 묶음 바로 왼쪽 */
.an-adpill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;margin-right:10px;border:1.5px solid var(--color-brand,#D8432A);border-radius:100px;color:var(--tint-coral-fg,#B3331E);font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;align-self:center;transition:background .15s}
.an-adpill:hover{background:var(--tint-coral-bg,#FBE4DE);color:var(--tint-coral-fg,#B3331E)}
.an-adpill__chip{font-size:9.5px;font-weight:800;line-height:1;padding:3px 4px;border-radius:4px;background:var(--color-brand,#D8432A);color:#fff;letter-spacing:.04em}
body.dark .an-adpill{border-color:var(--dark-ui-action,#F2C25E);color:var(--dark-ui-action,#F2C25E)}
body.dark .an-adpill:hover{background:var(--dark-ui-action-soft-bg,#3B2A22);color:var(--dark-ui-action,#F2C25E)}
body.dark .an-adpill__chip{background:var(--dark-ui-action,#F2C25E);color:var(--dark-ui-action-text,#1B1310)}

/* 툴팁 스타일 */
.gnb_tooltip {
    position: relative;
}

.gnb_tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 999999;
    pointer-events: none;
}

.gnb_tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 999999;
    pointer-events: none;
}

.gnb_tooltip:hover::after,
.gnb_tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* 버튼 영역 - 툴팁이 보이도록 overflow visible */
.gnb_button_area {
    position: relative;
    z-index: 10001;
    overflow: visible;
}

/* 다크모드 버튼 스타일 */
body.dark .right_top_gnb_btn {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border-secondary);
}

body.dark .right_top_gnb_btn:hover {
    background-color: var(--dark-bg-hover);
}

body.dark .right_top_gnb_btn i {
    color: #eee;
}

/* 🔔 알림 벨 뱃지 */
.anNotiBtn { position: relative; overflow: visible; }
.anNotiBadge {
    position: absolute; top: -5px; right: -5px;
    min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
    background: var(--color-brown); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
    border-radius: 99px; border: 1.5px solid var(--color-bg-white, #fff);
}
body.dark .anNotiBadge { border-color: var(--dark-bg-secondary, #232323); }

/* 🔔 알림 드롭다운 패널 (네이버 알림센터식) */
.anNotiWrap { position: relative; display: inline-flex; }
.anNotiPanel { position: absolute; top: calc(100% + 12px); right: -6px; width: 380px; max-width: 92vw;
	background: var(--color-bg-white, #fff); border: 1px solid var(--color-border-light, #ececec);
	border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.16); z-index: 10050; overflow: hidden; }
.anNotiPanel[hidden] { display: none; }
.anNotiPanel::before { content: ''; position: absolute; top: -7px; right: 18px; width: 13px; height: 13px;
	background: var(--color-bg-white, #fff); border-left: 1px solid var(--color-border-light, #ececec);
	border-top: 1px solid var(--color-border-light, #ececec); transform: rotate(45deg); }
body.dark .anNotiPanel { background: var(--dark-bg-secondary, #1c1c1c); border-color: var(--dark-border-secondary, #333); }
body.dark .anNotiPanel::before { background: var(--dark-bg-secondary, #1c1c1c); border-color: var(--dark-border-secondary, #333); }
.anNotiPanel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-border-light, #f0f0f0); }
.anNotiPanel__head .ttl { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--color-text-primary); }
.anNotiPanel__head .all { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary, #888); text-decoration: none; }
.anNotiPanel__head .all:hover { color: var(--color-hover); }
body.dark .anNotiPanel__head { border-color: var(--dark-border-secondary, #2c2c2c); }
body.dark .anNotiPanel__head .ttl { color: var(--dark-text-primary, #ececec); }
.anNotiPanel__body { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.anNP__row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; text-decoration: none; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-light, #f4f4f4); }
.anNP__row:last-child { border-bottom: 0; }
.anNP__row:hover { background: var(--color-bg-lighter, #f8f8f8); }
body.dark .anNP__row { color: var(--dark-text-primary, #ececec); border-color: var(--dark-border-secondary, #2a2a2a); }
body.dark .anNP__row:hover { background: var(--dark-bg-hover, #262626); }
.anNP__ic { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 15px; }
.anNP__ic.cmt { background: #eaf3ff; color: #2f6fd0; }
.anNP__ic.reply { background: #eef7ee; color: #3a9d4a; }
.anNP__ic.exp { background: color-mix(in srgb, var(--state-warning,#CF8400) 12%, transparent); color: var(--state-warning, #CF8400); }   /* [2026-09-12] 만료 예정 = 경고 토큰(다크 앰버) */
.anNP__ic.expd { background: #f2f3f5; color: #7a8290; }
.anNP__ic.blind { background: var(--tint-coral-bg, #FBE4DE); color: var(--color-error, #B8362F); }
body.dark .anNP__ic.expd { background:var(--dark-bg-current, #2A2623); color:#a5a5a5; }
body.dark .anNP__ic.blind { background:#3a1f1e; color:#ff8a84; }
body.dark .anNP__ic.cmt { background:#1e2a3d; color:#7fb0ff; }
body.dark .anNP__ic.reply { background:#1e3320; color:#79d089; }
body.dark .anNP__ic.exp { background:#3a2416; color:var(--state-warning, #E3BC55); }
.anNP__bd { flex: 1; min-width: 0; }
.anNP__t1 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--color-text-primary); }
body.dark .anNP__t1 { color: var(--dark-text-primary, #ececec); }
.anNP__t1 b { color: var(--color-brown); }
.anNP__t2 { display: block; margin-top: 3px; font-size: 12px; color: var(--color-text-tertiary, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anNP__t2 .who { color: var(--color-text-secondary, #555); font-weight: 600; }
body.dark .anNP__t2 .who { color: var(--dark-text-secondary, #bbb); }
.anNP__meta { flex: 0 0 auto; align-self: flex-start; padding-top: 2px; }
.anNP__time { font-size: 11px; color: var(--color-text-light, #b0b0b0); white-space: nowrap; }
.anNP__go { font-size: 11.5px; font-weight: 800; padding: 6px 12px; border-radius: 99px; background: var(--ui-action, #D8432A); color: var(--ui-action-text, #fff); }   /* [2026-09-12] 하드코딩 주황 → 행동 토큰 */
.anNP__go.re { background: var(--color-brown); }
.anNP__go.blind { background: var(--color-error, #B8362F); }
.anNP__empty { padding: 48px 20px; text-align: center; color: var(--color-text-tertiary, #999); }
.anNP__empty i { font-size: 36px; color: var(--color-border-medium, #dcdcdc); display: block; margin-bottom: 12px; }
.anNP__empty p { font-size: 14px; }
.anNP__loading { padding: 40px; text-align: center; color: var(--color-text-tertiary, #999); font-size: 13px; }
@media (max-width: 480px) { .anNotiPanel { position: fixed; top: 58px; right: 8px; left: 8px; width: auto; max-width: none; } }

/* ── inc/gnb_search.php (옛 2줄) ── */
/* ===== 검색바 컨테이너 ===== */
/* box-sizing은 gnb.php에서 .logo_area * 로 통합 적용 */
.gnb-search-container {
    position: relative;
    /* [2026-08-12] 580→460 축소 + 옛 네이버식 실검(gnb_trend_keyword)이 오른쪽에 딱 붙는 배치.
       margin-left:auto 와 버튼그룹의 margin-left:auto 가 남는 공간을 양분해 [검색창+실검] 쌍이 중앙에 온다 */
    flex: 0 1 460px;
    max-width: 460px;
    margin-left: auto;
    margin-right: 12px;
    z-index: 10002;
}


/* ===== 메인 검색바 ===== [2026-08-12 유튜브식 + 애니멀나라 웜톤]
   유튜브 구조(1px 필 + 오른끝 돋보기 조각) 그대로, 색만 웜톤:
   테두리=연코랄 그레이, 조각=연코랄 면+코랄 돋보기, 필터=코랄. 분리선 없이 면으로만 구획.
   overflow:hidden 이라 오른끝 버튼 조각이 바 모서리를 그대로 따라간다 */
.gnb-search-bar {
    display: flex;
    align-items: center;
    background: #fff;
    /* [2026-08-13 시안 A] 라운드 20 캡슐 → 12(플로팅 모듈·실검 드롭다운과 정합) + 1.5px 중간 웜톤.
       🔴 진코랄(--ui-active) 상시 보더는 9차에 기각 — 상시는 중간 웜톤, 브랜드색은 포커스에만 */
    border-radius: 12px;
    box-shadow: none;
    padding: 0;
    height: 40px;
    border: 1.5px solid #D9A69E;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.gnb-search-bar:focus-within,
.gnb-search-bar.active {
    border-color: var(--ui-active, #D84841);
}


/* 검색 입력창 */
/* 🔴 셀렉터 2단(.gnb-search-bar .gnb-search-input) 필수 — custom_input.css 의 input[type="text"]
   전역 규칙(margin:4px 4px 6px 0·padding 14px 6px·배경·radius)이 특이성(0,1,1)으로
   클래스 하나(0,1,0)를 이긴다. 오른쪽 margin 4px 가 돋보기 조각과 틈을 만들던 원인 */
.gnb-search-bar .gnb-search-input {
    flex: 1;
    border: none;
    border-radius: 0;
    outline: none;
    margin: 0;
    padding: 0 16px;
    font-size: 15px;
    height: 100%;
    background: transparent;
    color: #333;
}

/* 🔴 common.css 전역 input:focus{border:1px solid 파랑} 차단 — 테두리는 바깥 .gnb-search-bar 가 전담 */
.gnb-search-bar .gnb-search-input:focus,
body.dark .gnb-search-bar .gnb-search-input:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.gnb-search-input::placeholder {
    color: #aaa;
}

/* 검색 버튼 */
.gnb-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;    /* 유튜브식 — 바 오른끝을 꽉 채우는 연코랄 조각(분리선 없이 입력창과 한 몸) */
    height: 100%;
    margin-right: 0;
    background: var(--ui-select-soft-bg, #FCF1F0);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s;
}

.gnb-search-submit:hover {
    background: var(--ui-active-hover-bg, #F7E3E1);
}

.gnb-search-submit i {
    color: var(--ui-active, #D84841);
    font-size: 15px;
}


/* ===== 다크모드 ===== */
body.dark .gnb-search-bar {
    background: var(--dark-bg-current, #2A2623);
    box-shadow: none;
    border-color: var(--dark-gnb-bg, #A54A36);   /* [2026-08-28] 다크 검색창 = GNB 띠와 같은 테라코타(노란 웜톤 → 통일) */   /* 웜톤 다크 — 2px 강화에 맞춰 어두운 밴드에서도 보이는 중간톤 */
}

body.dark .gnb-search-bar:focus-within,
body.dark .gnb-search-bar.active {
    border-color: var(--tint-coral-fg, #F08A6B);   /* 2026-08-28 A안: 다크 포커스 주황 → 코랄 */
}


body.dark .gnb-search-bar .gnb-search-input {
    color: #eee;
    background: transparent;
    margin: 0;
}

body.dark .gnb-search-input::placeholder {
    color: #777;
}

body.dark .gnb-search-submit {
    background: var(--dark-gnb-bg, #A54A36);   /* [2026-08-28] 검색 버튼 솔리드 테라코타(라이트와 같은 문법) */   /* 연노랑 면(다크) */
}

body.dark .gnb-search-submit:hover {
    background: var(--dark-gnb-active-bg, #7E3220);
}

body.dark .gnb-search-submit i {
    color: #fff;   /* [2026-08-28] 테라코타 버튼 위 흰 아이콘 */
}



/* ===== 반응형 ===== */
@media (max-width: 1200px) {
    .gnb-search-container {
        max-width: 450px;
        margin: 0 20px;
    }
}

@media (max-width: 900px) {
    .gnb-search-container {
        max-width: 380px;
        margin: 0 15px;
    }

}

@media (max-width: 640px) {
    .gnb-search-container {
        max-width: none;
        flex: 1;
        margin: 0 10px;
    }

    .gnb-search-bar {
        height: 42px;
    }

}

/* ===== 자동완성 드롭다운 ===== */
.gnb-autocomplete {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px;   /* 검색바(시안 A)와 라운드 정합 */
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 10004;
}

.gnb-autocomplete.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gnb-autocomplete-header {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--color-bg-light);
}

.gnb-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.gnb-autocomplete-item:hover,
.gnb-autocomplete-item.selected {
    background: #f8f9fa;
}

.gnb-ac-sub { margin-left:6px; font-size:12px; color:#9a9a9a; font-weight:400; }
/* [2026-09-13] 자동완성 스폰서 — 첫 줄 1개, 오른쪽 회색 「광고 ⓘ」(K3 문법), 아래 얇은 선 */
.gnb-autocomplete-item.is-sponsor { border-bottom:1px solid var(--color-bg-light, #F1EFEC); }
.gnb-autocomplete-item.is-sponsor .gnb-autocomplete-label { font-weight:600; }
.gnb-ac-ad { flex:none; display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:#8A8A90; white-space:nowrap; }
.gnb-ac-ad i { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:1.5px solid #B5B5BA; color:#8A8A90; font:800 9.5px/1 sans-serif; font-style:normal; }
body.dark .gnb-autocomplete-item.is-sponsor { border-bottom-color:#333; }
.gnb-ac-cnt { margin-left:6px; font-size:12px; color:#9a9a9a; font-weight:400; }
.gnb-ac-cnt::before { content:"("; } .gnb-ac-cnt::after { content:")"; }
body.dark .gnb-ac-sub, body.dark .gnb-ac-cnt { color:#8a8a8a; }
.gnb-autocomplete-item:last-child {
    border-radius: 0 0 12px 12px;
}

/* 자동완성 = 네이버식(2026-08-12 확정): 아이콘·부제 없이 검색어 텍스트만 —
   0.5초 안에 고르는 UI 라 유형별 컬러 아이콘(지역/역/키워드/복합)은 장식일 뿐 오히려 스캔을 늦춘다 */
.gnb-autocomplete-label {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gnb-autocomplete-label mark {
    background: var(--color-tertiary-soft-bg, #e9f4ee);
    color: #333;
    padding: 0 2px;
    border-radius: 2px;
}

.gnb-autocomplete-hint {
    padding: 12px 16px;
    font-size: 12px;
    color: #888;
    background: var(--color-bg-lighter);
    border-radius: 0 0 12px 12px;
    text-align: center;
}

.gnb-autocomplete-hint i {
    margin-right: 6px;
    color: var(--color-brand, #d84841);
}

/* ===== 최근 검색어 모드(입력 비었을 때) — 항목 X 삭제 + 하단 전체 삭제 ===== */
.gnb-ac-del {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #B6BDC5;
    font-size: 12px;
    cursor: pointer;
}
.gnb-ac-del:hover {
    color: var(--color-hover);
    background: var(--ui-select-soft-bg, #FCF1F0);
}
.gnb-autocomplete-foot {
    display: none;
    padding: 10px 16px;
    text-align: right;
    border-top: 1px solid var(--color-bg-light);
    border-radius: 0 0 12px 12px;
}
.gnb-autocomplete-foot button {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    color: #98A1AC;
    cursor: pointer;
}
.gnb-autocomplete-foot button:hover {
    color: var(--color-hover);
    text-decoration: underline;
}
.gnb-autocomplete.mode-recent .gnb-autocomplete-hint { display: none; }
.gnb-autocomplete.mode-recent .gnb-autocomplete-foot { display: block; }

/* 다크모드 자동완성 */
body.dark .gnb-autocomplete {
    background: var(--dark-bg-current, #2A2623);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

body.dark .gnb-autocomplete-header {
    color: #777;
    border-bottom-color: #333;
}

body.dark .gnb-autocomplete-item:hover,
body.dark .gnb-autocomplete-item.selected {
    background: #333;
}

body.dark .gnb-autocomplete-label {
    color: #ddd;
}

body.dark .gnb-ac-del {
    color: #666;
}
body.dark .gnb-ac-del:hover {
    color: #fff;   /* [2026-08-28] 테라코타 버튼 위 흰 아이콘 */
    background: #3a3a3a;
}
body.dark .gnb-autocomplete-foot {
    border-top-color: #333;
}
body.dark .gnb-autocomplete-foot button {
    color: #777;
}
body.dark .gnb-autocomplete-foot button:hover {
    color: #fff;   /* [2026-08-28] 테라코타 버튼 위 흰 아이콘 */
}

body.dark .gnb-autocomplete-hint {
    background: #222;
    color: #777;
}

/* ── inc/gnb_trend_keyword.php (옛 14줄) ── */
/* [검색창+실검] 쌍 중앙 배치의 반쪽 — 나머지 반쪽(margin-left:auto)은 gnb_search.php 컨테이너에 */
.logo_area .gnb_button_area { margin-left: auto; }

/* 🔴 폭 고정 — 키워드 길이에 따라 폭이 변하면 좌우 margin:auto 균형이 깨져 검색창이 흔들린다.
   넘치는 긴 키워드는 옛 네이버와 같은 말줄임(…) 처리(.gnb-trend-kw 의 ellipsis)
   🔴 display:none 금지 → visibility:hidden — 자리를 첫 페인트부터 예약해야
   AJAX 로드 후 검색창이 왼쪽으로 덜컹 밀리지 않는다(데이터 없으면 빈 자리 유지) */
.gnb-trend { position: relative; flex: none; width: 150px; align-self: center; margin-left: 12px; visibility: hidden; }
.gnb-trend-cur { display: block; height: 34px; width: 100%; overflow: hidden; text-decoration: none; cursor: pointer; }
.gnb-trend-cur:hover { text-decoration: none; }
.gnb-trend-row { display: flex; align-items: center; gap: 7px; height: 34px; white-space: nowrap; }
.gnb-trend-no { flex: none; font-weight: 800; font-style: italic; font-size: 13.5px; color: var(--ui-active, #C93934); }
.gnb-trend-kw { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; font-weight: 700; color: var(--color-text-primary, #232A32); }
.gnb-trend-cur:hover .gnb-trend-kw { color: var(--color-hover); }
.gnb-trend-chg { flex: none; font-size: 10px; font-weight: 800; }
.gnb-trend-chg.up, .gnb-trend-chg.isnew { color: var(--ui-active, #D84841); }
.gnb-trend-chg.down, .gnb-trend-chg.same { color: var(--color-text-quaternary, #98A1AC); }
/* 컨베이어 롤링 — 다음 줄을 스택 아래에 붙이고 전체를 -34px 밀어올린 뒤 첫 줄 제거.
   transition 은 .rolling 에만 — 클래스 제거 시 역슬라이드 없이 스냅 복귀한다 */
.gnb-trend-stack { display: block; will-change: transform; }
.gnb-trend-stack.rolling { transition: transform .38s ease; transform: translateY(-34px); }

/* hover 레이어 — 옛 네이버식 두 컬럼(1~5 / 6~10) */
.gnb-trend-drop { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 430px; background: var(--light-bg-primary, #fff); border: 1px solid var(--color-border, #ddd); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.13); padding: 15px 0 10px; z-index: 10005; }
/* 🔴 트리거~레이어 사이 10px 빈틈을 지나는 순간 :hover 가 풀려 닫히던 버그 — 투명 브리지로 hover 영역을 잇는다(시각 간격은 유지) */
.gnb-trend-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.gnb-trend:hover .gnb-trend-drop { display: block; }
.gnb-trend-hd { display: flex; align-items: baseline; padding: 0 18px 9px; font-size: 14px; font-weight: 800; color: var(--color-text-primary, #232A32); }
.gnb-trend-hd i { color: var(--ui-active, #D84841); margin-right: 6px; font-size: 13px; }
.gnb-trend-hd small { margin-left: auto; font-weight: 600; color: var(--color-text-quaternary, #98A1AC); font-size: 11.5px; }
.gnb-trend-cols { display: flex; }
.gnb-trend-cols ul { flex: 1; margin: 0; padding: 0; list-style: none; }
.gnb-trend-item { display: flex; gap: 8px; align-items: center; padding: 5px 18px; font-size: 13.5px; color: var(--color-text-secondary, #374151); text-decoration: none; }
.gnb-trend-item:hover { background: var(--ui-select-soft-bg, #FCF1F0); color: var(--color-hover); text-decoration: none; }
.gnb-trend-item b { flex: none; width: 17px; font-style: italic; font-size: 12px; font-weight: 800; color: var(--ui-active, #C93934); }
.gnb-trend-item.dim b { color: var(--color-text-quaternary, #98A1AC); }
.gnb-trend-item .chg { margin-left: auto; font-size: 9.5px; font-weight: 800; }
.gnb-trend-item .chg.up, .gnb-trend-item .chg.isnew { color: var(--ui-active, #D84841); }
.gnb-trend-item .chg.down, .gnb-trend-item .chg.same { color: var(--color-text-quaternary, #98A1AC); }
.gnb-trend-all { display: block; margin: 8px 18px 0; padding-top: 9px; border-top: 1px solid var(--color-border-light, #F1F3F5); font-size: 12px; color: var(--color-text-quaternary, #98A1AC) !important; text-decoration: none; text-align: right; }
.gnb-trend-all:hover { color: var(--color-hover) !important; text-decoration: none; }

body.dark .gnb-trend-kw { color: var(--dark-text-primary, #ECECEC); }
body.dark .gnb-trend-cur:hover .gnb-trend-kw { color: var(--color-hover); }
body.dark .gnb-trend-no { color: var(--dark-tab-hover-bg, #FF9F1C); }
body.dark .gnb-trend-chg.up, body.dark .gnb-trend-chg.isnew { color: var(--dark-tab-hover-bg, #FF9F1C); }
body.dark .gnb-trend-drop { background: var(--dark-bg-secondary, #232323); border-color: var(--dark-border-secondary, #4A4A4A); }
body.dark .gnb-trend-hd { color: var(--dark-text-primary, #ECECEC); }
body.dark .gnb-trend-hd i { color: var(--dark-tab-hover-bg, #FF9F1C); }
body.dark .gnb-trend-item { color: var(--dark-text-primary, #ECECEC); }
body.dark .gnb-trend-item:hover { background: var(--dark-bg-hover, #333); color: var(--color-hover); }
body.dark .gnb-trend-item b { color: var(--dark-tab-hover-bg, #FF9F1C); }
body.dark .gnb-trend-item .chg.up, body.dark .gnb-trend-item .chg.isnew { color: var(--dark-tab-hover-bg, #FF9F1C); }
body.dark .gnb-trend-all { border-top-color: var(--dark-border-secondary, #4A4A4A); }
@media (max-width: 1250px) { .gnb-trend { display: none !important; } } /* 좁은 창에선 검색창 우선 */

/* ── inc/font_picker_modal.php (옛 21줄) ── */
/* ── 글꼴 선택 모달 ── */
/* 딤 흐리게 — 뒤 화면(적용된 글꼴)이 보이도록 (전용 모달이라 --modal-dim 대신 옅게 고정) */
#fontPickerOverlay{position:fixed;inset:0;background:rgba(0,0,0,.28);
  z-index:100000;display:none;align-items:center;justify-content:center;overflow-y:auto;padding:16px 0;}
#fontPickerOverlay.open{display:flex;}
#fontPicker{position:relative;background:#fff;width:340px;max-width:92vw;border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden;
  animation:fpIn .16s ease-out;}
@keyframes fpIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
/* 상단 여백 바 — 여기에 X 닫기 (기본 항목 위, ruli.png식 여백) */
.fp_top{display:flex;justify-content:flex-end;align-items:center;padding:14px 14px 6px;}
.fp_close{cursor:pointer;font-size:24px;color:#aaa;line-height:1;background:none;border:0;padding:2px 6px;}
.fp_close:hover{color:#666;}
/* 한 화면에 다 보이도록 컴팩트하게(스크롤은 아주 작은 화면에서만 안전장치로) */
.fp_list{max-height:88vh;overflow-y:auto;padding:2px 16px 12px;}
.fp_item{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 4px;border-radius:7px;cursor:pointer;border-bottom:1px solid #f1f1f1;
  font-size:14px;line-height:1.3;color:#333;transition:background .12s;}
/* 맨 위 "기본" = 크게 (대형 커뮤니티식) */
.fp_item.fp_default{font-size:22px;font-weight:700;padding:2px 4px 9px;}
.fp_item:last-child{border-bottom:0;}
.fp_item:hover{background:#f6f7f9;}
.fp_item.active{background:var(--color-orange, #EE6A48);color:#fff;font-weight:700;}
.fp_item .fp_left{display:flex;align-items:center;gap:8px;min-width:0;}
.fp_item .fp_badge{font-size:11px;font-weight:700;color:#fff;background:var(--color-text-lighter, #9a9a9a);
  border-radius:10px;padding:1px 7px;flex:none;}
.fp_item.active .fp_badge{background:rgba(255,255,255,.35);}
.fp_item .fp_check{font-size:15px;opacity:0;flex:none;}
.fp_item.active .fp_check{opacity:1;}

/* 🔴 각 항목은 "자기 폰트"로 미리보기.
   전역 강제규칙(user_fonts.css의 !important)이 모달 항목까지 덮어써서 전부 선택폰트로
   보이는 걸 막는다. 라벨 텍스트는 항목(.fp_item)의 인라인 폰트를 그대로 상속하도록
   ID 특이성으로 되돌린다(체크 아이콘 .fp_check 는 건드리지 않음 = 아이콘 유지). */
#fontPickerOverlay .fp_left, #fontPickerOverlay .fp_left *{font-family:inherit !important;}

/* 다크모드 */
body.dark #fontPicker{background:var(--dark-bg-primary, #141414);}
body.dark .fp_head h3{color:#eee;}
body.dark .fp_item{color:#ddd;border-bottom-color:rgba(255,255,255,.08);}
body.dark .fp_item:hover{background:rgba(255,255,255,.06);}

/* ── inc/footer.php (옛 149줄) ── */
#footer_banner_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    position: relative;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    z-index: 9999;
    overflow-x: hidden;
    box-sizing: border-box !important;
    border-top: 0.8px solid #d2d2d2 !important;
    border-bottom: 0.8px solid #d2d2d2 !important;
    border-left: none !important;
    border-right: none !important;
}

/* footer_banner_wrapper를 화면 전체 너비로 확장하는 pseudo-element */
#footer_banner_wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

#footer_banner{
    margin: 0 !important;
    padding: 25px 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    position: relative;
    border: none !important;
    left: 0 !important;
    right: 0 !important;
}

/* footer_banner_wrapper의 부모 요소에도 적용 */
body #footer_banner_wrapper,
html #footer_banner_wrapper,
#wrap #footer_banner_wrapper {
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* 모든 부모 요소 내부의 footer_banner_wrapper pseudo-element */
body #footer_banner_wrapper::before,
html #footer_banner_wrapper::before,
#wrap #footer_banner_wrapper::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* 다크모드 */
body.dark #footer_banner_wrapper {
    border-top-color: var(--dark-border-secondary) !important;
    border-bottom-color: var(--dark-border-secondary) !important;
}

/* [2026-08-28] 배너 없음 → 띠 접기(윗 경계선 한 줄만 남김). 아래 규칙들이 전부 !important 라 여기도 !important */
#footer_banner_wrapper.fb-empty {
    border-bottom: none !important;
}
#footer_banner_wrapper.fb-empty #footer_banner {
    padding: 0 !important;
    min-height: 0 !important;
}

/*darkmode(다크모드)*/
body.dark .footer_banner_wrapper {
    border-color: var(--dark-border-secondary);
}

#footer{
	margin: 0 auto;
    /* --site-w 도입 때 누락된 1330 하드코딩. 관리자 사이트폭이 1330 미만이면 푸터만 본문보다 넓게
       튀어나와 ①본문과 좌우가 어긋나 보이고 ②#wrap 안에 푸터를 둔 페이지에서는 가로 스크롤까지 생겼다
       (그 가로 스크롤을 tab_right 가 '공간 없음'으로 읽어 랭킹을 접어버림). */
    width: var(--site-w, 1330px);
    max-width: 100%;
}

#mobile_switch_banner_wrapper {
    width: 100%;
    background-color: var(--color-bg-light);
    height: 100px;
}

.mobile_switch_banner {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    padding: 7px 0;
    width: var(--site-w, 1330px);   /* 위 #footer 와 같은 이유(1330 하드코딩 잔재) */
    max-width: 100%;
    background-color: var(--color-bg-light);
    text-align: center; /* 텍스트 정렬 */
}

/* ── inc/footer.php (옛 273줄) ── */
	/**********s:다크모드 css**********/
	body.dark address {
		color: var(--dark-text-secondary, #ADA59D);   /* 2026-09-11 #666 = 3.2:1 */
	}
	/**********e:다크모드 css**********/


	.content {
		font-size: 48px;
		font-weight: 700;
	}

	.content a {
		display: flex; /* 아이콘과 텍스트를 가로로 나란히 정렬하기 위해 */
		align-items: center; /* 세로 중앙 정렬 */
		text-decoration: none; /* 링크에 밑줄 제거 */
	}

	.content a b {
		margin-right: 10px; /* 아이콘과 텍스트 사이의 간격 조절 */
	}

	/* 아이콘에 대한 추가 스타일 */
	.fa-solid.fa-mobile-screen-button {
		font-size: 48px; /* 아이콘 크기 조절 */
	}
	

/* ── inc/footer.php (옛 302줄) ── */
		body .footer_border {
			border-bottom:0.8px solid #d2d2d2;
		}
		
		body.dark .footer_border {
			border-bottom:0.8px solid var(--dark-border-secondary);
		}
	

/* ── inc/footer.php (옛 322줄) ── */
		/*footer darkmode css*/
		body.dark #footer_info span,
		body.dark #footer_info cite{
			color: var(--dark-text-secondary);
		}
	

/* ── inc/footer.php (옛 373줄) ── */
							/* 2026-10-13 푸터 사업자 정보 시안 G-2 — 옛 사이트 푸터 톤(11.5px 연회색·굵기 없음·세로줄), 묶음만 줄로 구분. 대표·주소는 꼬리에 더 연하게 */
							#footer_info .an-biz-foot{ font-size:11.5px; line-height:1.8; color:#9a9a9a; font-style:normal; letter-spacing:-.01em; word-break:keep-all; font-variant-numeric:tabular-nums }
							#footer_info .an-biz-foot i{ font-style:normal; color:#c8c8c8; margin:0 6px }
							#footer_info .an-biz-foot a{ color:inherit; text-decoration:underline }
							#footer_info .an-biz-foot .dim{ color:#b4b4b4 } #footer_info .an-biz-foot .dim i{ color:#d4d4d4 }
							#footer_info .an-biz-foot .cp{ font-size:10px; color:#aaa; letter-spacing:.02em; margin-top:6px; font-family:Verdana,Arial,sans-serif }
							#footer_info + script + br{ display:none } #footer_info ~ .an-foot-disc{ display:block; font-size:11px; color:#a4a4a4; line-height:1.6; margin-top:10px }
							body.dark #footer_info .an-biz-foot{ color:var(--color-text-quaternary, #888) } body.dark #footer_info .an-biz-foot i{ color:#555 } body.dark #footer_info .an-biz-foot .dim{ color:#6e6e6e } body.dark #footer_info .an-biz-foot .dim i{ color:#4a4a4a } body.dark #footer_info .an-biz-foot .cp{ color:#777 } body.dark #footer_info ~ .an-foot-disc{ color:#8a8a8a }
							

/* ── inc/footer.php (옛 468줄) ── */
						/*textarea 클릭 시 테두리제거*/
						#siren_textarea:focus {
						  outline: none;
						}
					

/* ── inc/footer.php (옛 566줄) ── */
	#popup_wrap {width:560px; height:450px; background:#fff; border: solid 1px var(--color-text-tertiary); position:fixed; top:50%; left:50%; margin:-250px 0 0 -250px; z-index:9999; display:none;}
	#mask {width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.5) repeat; top:0; left:0; z-index:8888; display:none;}
	.popup-cont01 {width:478px; margin: 40px auto; text-align: center;}
	.popup-cont01 button { width: 100%; height: 36px; line-height: 36px; background: var(--color-brown); color: #ffffff; text-align: center; border: none; font-size: 16px;}
	

/* ── inc/footer.php (옛 624줄) ── */
	#popup_wrap1 {width:560px; height:450px; background:#fff; border: solid 1px var(--color-text-tertiary); position:fixed; top:50%; left:50%; margin:-250px 0 0 -250px; z-index:9999; display:none;}
	#mask1 {width:100%; height:100%; position:fixed; background:rgba(0,0,0,0.5) repeat; top:0; left:0; z-index:8888; display:none;}
	.popup-cont02 {width:478px; margin: 40px auto; text-align: center;}
	.popup-cont02 button { width: 100%; height: 36px; line-height: 36px; background: var(--color-brown); color: #ffffff; text-align: center; border: none; font-size: 16px;}

	/*select박스 클릭 시 outline제거*/
	select {
		outline:none;
	}
	

/* ── inc/footer.php (옛 679줄) ── */
	/* 남은 기간 배지 — 하루 이내면 주의색, 만료는 흐리게. 색은 전부 토큰 */
	.an-remain { display:inline-block; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap;
		background: var(--color-tertiary-soft-bg, #E9F4EE); color: var(--color-tertiary-soft-text, #1B5936); }
	.an-remain.is-soon { background: var(--state-ongoing-soft-bg, #fff4e5); color: var(--state-ongoing-soft-text, #AE5800); }
	.an-remain.is-over { background: transparent; color: var(--color-text-quaternary, #888); font-weight:500; }
	.an-remain.is-forever { background: var(--color-secondary-soft-bg, #EAF1FA); color: var(--color-secondary-soft-text, #1E4877); }
	.an-remain-none { color: var(--color-text-quaternary, #888); }