@charset "utf-8";
/* ==========================================================================
   게시판 · 고객센터 좌측메뉴(LNB) 공용 스킨   /css/board_left_v2.css
   2026-07-26  /_include/left_cscenter.asp 에서 로드 (전 분양몰 무조건 링크)

   · 이 좌측메뉴 HTML 은 관리자 디자인관리(T_MAIN, area=A2)에 등록된 내용이라
     소스 파일이 아니라 DB 에 있다. 그래서 마크업은 건드리지 않고 CSS 로만 재구성한다.
   · 그 HTML 안에 인라인 <style> 이 같이 들어오므로, 이 파일은
     ① makeLeftMenu 출력 "뒤"에서 로드되고 ② .cslnb_v2 스코프로 특이도를 올려
     인라인 스타일을 확실히 덮는다.
   · 디자인 언어는 마이페이지 좌측메뉴(/css/my_left_v2.css)와 동일하게 맞춘다.
     (라운드 카드 + 좌측 액센트 바 + 아이콘 배지 + 카드형 메뉴 + hover 리프트)
   · 메인컬러는 몰별 --sitecolor1 을 승계하므로 몰마다 자기 색이 적용된다.
   · A2 메뉴 HTML 은 몰마다 다를 수 있으므로, 없는 요소에 대한 규칙은 그냥 무시되도록
     선택자를 요소 단위로 좁게 쓰고 레이아웃을 강제하지 않는다.
   ========================================================================== */

.cslnb_v2{
	--cl-accent:      var(--rr-primary, var(--sitecolor1, #2E2E2E));
	--cl-accent-soft: var(--rr-primary-soft, var(--sitecolor3, #F4F5F7));

	--cl-ink:         var(--rr-ink, #17191D);
	--cl-ink-sub:     var(--rr-ink-2, #5F6672);
	--cl-ink-mute:    var(--rr-ink-3, #9AA1AD);

	--cl-line:        var(--rr-line, #E6E8EC);
	--cl-line-strong: var(--rr-line-strong, #D4D8DF);
	--cl-surface:     #fff;
	--cl-surface-alt: var(--rr-bg-soft, #F7F8FA);

	--cl-radius:      12px;
	--cl-radius-l:    18px;
	--cl-radius-s:    8px;

	--cl-shadow:      0 1px 2px rgba(20,24,33,.04), 0 6px 16px rgba(20,24,33,.05);
	--cl-shadow-hover:0 6px 14px rgba(20,24,33,.08), 0 14px 30px rgba(20,24,33,.09);
	--cl-ease:        .22s cubic-bezier(.2,.8,.3,1);

	/* ★ 폴백에 로컬 'Pretendard' 를 남기지 말 것 — base.css 가 로컬 웨이트를 @font-face 로
	      선언해 두어서, 그 이름이 실제로 쓰이면 웨이트당 870KB 대를 통째로 받는다. */
	font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
	             'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	letter-spacing: -.02em;
}
/* 관리자 인라인 스타일의 font-size:9pt / 깨진 font-family 해제 */
.cslnb_v2 .lmenu,
.cslnb_v2 .lmenu *{
	font-family: inherit !important;
}
.cslnb_v2 .lmenu{
	font-size: 15px !important;
	text-align: left !important;
	display: block !important;
	background: none !important;
	border: 0 !important;
}
.cslnb_v2 a{ text-decoration: none; }
.cslnb_v2 .left_section{
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ── 1. 타이틀 카드 ───────────────────────────────────────────────────── */
.cslnb_v2 .left_section > .tit{
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0 0 14px !important;
	padding: 20px 16px 20px 20px !important;
	border: 1px solid var(--cl-line) !important;
	border-radius: var(--cl-radius-l);
	background: var(--cl-surface) !important;
	box-shadow: var(--cl-shadow);
	text-align: left !important;
	height: auto !important;
	line-height: normal !important;
}
.cslnb_v2 .left_section > .tit::before{
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--cl-accent);
}
/* 헤드셋 아이콘 배지 (마이페이지의 회원 아이콘과 같은 자리) */
.cslnb_v2 .left_section > .tit::after{
	content: '';
	order: -1;
	width: 40px; height: 40px;
	margin: 0 0 8px;
	border-radius: 50%;
	background-color: var(--cl-accent);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 20px auto;
	box-shadow: 0 2px 6px rgba(20,24,33,.12);
	flex: 0 0 auto;
}
.cslnb_v2 .left_section > .tit h1,
.cslnb_v2 .left_section > .tit .title{
	margin: 0 !important;
	padding: 0 !important;
	font-size: 21px !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	letter-spacing: -.03em !important;
	color: var(--cl-ink) !important;
	background: none !important;
}
.cslnb_v2 .left_section > .tit span,
.cslnb_v2 .left_section > .tit .subTitle{
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .14em !important;
	color: var(--cl-accent) !important;
}

/* ── 2. 메뉴 목록 : 항목 하나 = 카드 하나 ─────────────────────────────── */
.cslnb_v2 .left_menu{
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
}
.cslnb_v2 .left_menu > ul{
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	list-style: none !important;
}
.cslnb_v2 .left_menu > ul:not(.lgt_menu_bn) > li{
	margin: 0 0 8px !important;
	padding: 0 !important;
	border: 1px solid var(--cl-line) !important;
	border-radius: var(--cl-radius) !important;
	background: var(--cl-surface) !important;
	box-shadow: var(--cl-shadow);
	overflow: hidden;
	list-style: none !important;
	transition: border-color var(--cl-ease), box-shadow var(--cl-ease), transform var(--cl-ease);
}
.cslnb_v2 .left_menu > ul:not(.lgt_menu_bn) > li:hover{
	border-color: var(--cl-line-strong) !important;
	box-shadow: var(--cl-shadow-hover);
	transform: translateY(-1px);
}
.cslnb_v2 .left_menu > ul:not(.lgt_menu_bn) > li > a{
	position: relative;
	display: flex !important;
	align-items: center;
	padding: 13px 30px 13px 15px !important;
	margin: 0 !important;
	border: 0 !important;
	background: var(--cl-surface) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--cl-ink) !important;
	text-align: left !important;
	transition: background-color var(--cl-ease), color var(--cl-ease);
}
.cslnb_v2 .left_menu > ul:not(.lgt_menu_bn) > li > a::after{
	content: '';
	position: absolute;
	right: 14px; top: 50%;
	width: 6px; height: 6px;
	margin-top: -4px;
	border-right: 1.6px solid var(--cl-ink-mute);
	border-top: 1.6px solid var(--cl-ink-mute);
	transform: rotate(45deg);
	transition: border-color var(--cl-ease);
}
.cslnb_v2 .left_menu > ul:not(.lgt_menu_bn) > li > a:hover{
	background: var(--cl-surface-alt) !important;
}
/* 현재 보고 있는 메뉴 : 원본은 color:red 만 줬다 */
.cslnb_v2 .left_menu > ul:not(.lgt_menu_bn) > li:has(> a.on){
	border-color: var(--cl-accent) !important;
}
.cslnb_v2 .left_menu > ul:not(.lgt_menu_bn) > li > a.on{
	background: var(--cl-accent) !important;
	color: #fff !important;
	font-weight: 800 !important;
}
.cslnb_v2 .left_menu > ul:not(.lgt_menu_bn) > li > a.on::after{
	border-color: rgba(255,255,255,.9);
}

/* ── 3. 고객센터 안내 배너 카드 ──────────────────────────────────────── */
.cslnb_v2 .lgt_menu_bn{
	margin: 16px 0 0 !important;
	padding: 0 !important;
	border: 1px solid var(--cl-line) !important;
	border-radius: var(--cl-radius-l) !important;
	background: var(--cl-surface) !important;
	box-shadow: var(--cl-shadow);
	overflow: hidden;
	list-style: none !important;
}
.cslnb_v2 .lgt_menu_bn > li{
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	list-style: none !important;
	text-align: left !important;
}
.cslnb_v2 .lgt_menu_bn > li.time_info_li{
	position: relative;
	padding: 18px 18px 16px !important;
	background: var(--cl-accent-soft) !important;
	color: var(--cl-ink-sub) !important;
}
.cslnb_v2 .lgt_menu_bn > li.time_info_li h4{
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .1em !important;
	color: var(--cl-accent) !important;
	background: none !important;
	text-decoration: none !important;
}
/* 원본 전화 아이콘 이미지는 숨기고 번호 앞 여백만 확보 */
.cslnb_v2 .lgt_menu_bn > li.time_info_li .icon{ display: none !important; }
.cslnb_v2 .lgt_menu_bn > li.time_info_li strong{
	display: block;
	margin: 0 0 8px !important;
	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	letter-spacing: -.02em !important;
	font-variant-numeric: tabular-nums;
	color: var(--cl-ink) !important;
}
.cslnb_v2 .lgt_menu_bn > li.time_info_li span{
	display: block;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: var(--cl-ink-sub) !important;
}
/* 1:1문의하기 버튼 */
.cslnb_v2 .lgt_menu_bn > li:not(.time_info_li){
	padding: 12px !important;
	border-top: 1px solid var(--cl-line) !important;
	background: var(--cl-surface) !important;
}
.cslnb_v2 .lgt_menu_bn > li:not(.time_info_li) a{
	display: block !important;
	padding: 12px 14px !important;
	border: 0 !important;
	border-radius: var(--cl-radius-s) !important;
	background: var(--cl-accent) !important;
	box-shadow: 0 2px 6px rgba(20,24,33,.14);
	color: #fff !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	transition: transform var(--cl-ease), box-shadow var(--cl-ease), filter var(--cl-ease);
}
.cslnb_v2 .lgt_menu_bn > li:not(.time_info_li) a:hover{
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(20,24,33,.18);
	filter: brightness(1.06);
}
.cslnb_v2 .lgt_menu_bn > li:not(.time_info_li) a:active{
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(20,24,33,.16);
}

/* ── 4. 좌측 배너 영역 여백 ──────────────────────────────────────────── */
.cslnb_v2 + div{ margin-top: 14px !important; }

/* ── 5. 좁은 화면 ────────────────────────────────────────────────────── */
@media (max-width: 1024px){
	.cslnb_v2 .left_section > .tit{ padding: 16px 14px 16px 18px !important; }
	.cslnb_v2 .left_section > .tit h1,
	.cslnb_v2 .left_section > .tit .title{ font-size: 19px !important; }
	.cslnb_v2 .lgt_menu_bn > li.time_info_li{ padding: 16px 14px 14px !important; }
	.cslnb_v2 .lgt_menu_bn > li.time_info_li strong{ font-size: 20px !important; }
}
@media (prefers-reduced-motion: reduce){
	.cslnb_v2 .left_menu > ul > li,
	.cslnb_v2 .left_menu > ul > li > a,
	.cslnb_v2 .lgt_menu_bn > li:not(.time_info_li) a{ transition: none !important; transform: none !important; }
}