@charset "utf-8";
/* ==========================================================================
   고객센터(C/S Center) 공통 스타일 - 2026-07-25 업그레이드
   - 폰트 Pretendard 통일
   - 라인색 / 라운딩 / 음영을 CSS 변수 한 곳에서 관리
   - 쇼핑몰 메인컬러(cfgColor1/2)는 각 페이지에서 --cs-accent 로 주입
   적용 페이지 : /cscenter/default.asp, /cscenter/faq.asp (+ ajaxFaq.asp 출력)
   ========================================================================== */

:root{
	/* 메인컬러 (페이지에서 덮어씀) */
	--cs-accent:#ff0051;
	--cs-accent-2:#ff66b3;
	--cs-accent-ink:#fff;

	/* 라인색 - 전 페이지 통일 */
	--cs-line:#e6e8ec;
	--cs-line-strong:#d4d8df;

	/* 텍스트 */
	--cs-ink:#17191d;
	--cs-ink-sub:#5f6672;
	--cs-ink-mute:#9aa1ad;

	/* 배경 */
	--cs-surface:#fff;
	--cs-surface-alt:#f7f8fa;

	/* 라운딩 */
	--cs-radius-s:8px;
	--cs-radius:12px;
	--cs-radius-l:18px;

	/* 음영 */
	--cs-shadow:0 1px 2px rgba(20,24,33,.04), 0 6px 16px rgba(20,24,33,.05);
	--cs-shadow-hover:0 6px 14px rgba(20,24,33,.08), 0 14px 30px rgba(20,24,33,.09);
	--cs-shadow-btn:0 2px 4px rgba(20,24,33,.08);

	--cs-font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
	--cs-ease:.22s cubic-bezier(.2,.8,.3,1);
}

/* --------------------------------------------------------------- 공통 기반 */
.csWrap,
.csWrap input,
.csWrap button,
.csWrap select,
.csWrap textarea{
	font-family:var(--cs-font);
	letter-spacing:-.02em;
}
.csWrap{color:var(--cs-ink); -webkit-font-smoothing:antialiased;}
.csWrap *{box-sizing:border-box;}
.csWrap a{color:inherit; text-decoration:none;}
.csWrap .right_section{float:none; width:auto;}

/* 상단 안내(top.asp)는 히어로 영역으로 통합 - 원본 마크업은 숨김 */
.csWrap .top_info{display:none;}

/* ------------------------------------------------------------------ 버튼 */
.csBtn{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	height:44px; padding:0 20px;
	border:1px solid var(--cs-line-strong);
	border-radius:var(--cs-radius);
	background:var(--cs-surface);
	box-shadow:var(--cs-shadow-btn);
	color:var(--cs-ink);
	font-size:15px; font-weight:600; line-height:1;
	cursor:pointer;
	transition:transform var(--cs-ease), box-shadow var(--cs-ease), background-color var(--cs-ease), border-color var(--cs-ease), color var(--cs-ease);
}
.csBtn:hover{box-shadow:var(--cs-shadow-hover); transform:translateY(-1px);}
.csBtn:active{transform:translateY(0); box-shadow:var(--cs-shadow-btn);}
.csBtn:focus-visible{outline:2px solid var(--cs-accent); outline-offset:2px;}

/* 쇼핑몰 common.css 가 a 색상에 !important 를 거는 경우가 있어 동일 강도로 지정 */
.csBtn--primary,
a.csBtn--primary{
	border-color:transparent;
	background:var(--cs-accent) !important;
	color:var(--cs-accent-ink) !important;
	box-shadow:0 2px 6px rgba(20,24,33,.12);
}
.csBtn--primary:hover{filter:brightness(1.06); color:var(--cs-accent-ink) !important;}

.csBtn--ghost{background:var(--cs-surface-alt); border-color:var(--cs-line);}
.csBtn--sm{height:36px; padding:0 14px; font-size:13px; border-radius:var(--cs-radius-s);}

/* 기존 공통 버튼 클래스도 동일 톤으로 승격 */
.csWrap .btn_gray08,
.csWrap .btn_gray01,
.csWrap .btn_yellow01{
	display:inline-flex; align-items:center; justify-content:center;
	border-radius:var(--cs-radius-s);
	box-shadow:var(--cs-shadow-btn);
	transition:transform var(--cs-ease), box-shadow var(--cs-ease), filter var(--cs-ease);
}
.csWrap .btn_gray08:hover,
.csWrap .btn_gray01:hover,
.csWrap .btn_yellow01:hover{transform:translateY(-1px); box-shadow:var(--cs-shadow-hover);}

/* ------------------------------------------------------------------ 히어로 */
.csHero{
	position:relative; overflow:hidden;
	display:flex; align-items:center; gap:24px;
	margin:0 0 20px;
	padding:34px 36px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius-l);
	background:linear-gradient(180deg,#fff 0%,var(--cs-surface-alt) 100%);
	box-shadow:var(--cs-shadow);
}
.csHero__txt{flex:1 1 58%; min-width:0;}
.csHero__eyebrow{
	margin:0 0 10px; font-size:12px; font-weight:700; line-height:1;
	letter-spacing:.14em; color:var(--cs-accent);
}
.csHero__title{
	margin:0; font-size:30px; font-weight:700; line-height:1.35; color:var(--cs-ink);
}
.csHero__title strong{display:block; font-weight:800;}
.csHero__desc{margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--cs-ink-sub);}

.csHero__meta{
	display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
	margin:20px 0 0; padding:16px 20px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius);
	background:var(--cs-surface);
}
.csHero__tel{display:flex; align-items:baseline; gap:8px;}
.csHero__tel dt{font-size:13px; font-weight:600; color:var(--cs-ink-mute);}
.csHero__tel dd{margin:0; font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--cs-ink);}
.csHero__hours{margin:0; font-size:13px; line-height:1.7; color:var(--cs-ink-sub);}
.csHero__hours b{display:inline-block; min-width:52px; font-weight:600; color:var(--cs-ink-mute);}

.csHero__actions{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0;}

.csHero__img{flex:0 0 38%; max-width:38%; text-align:right;}
.csHero__img img{width:100%; height:auto; max-width:340px; vertical-align:middle;}

/* ------------------------------------------------------------- 카드 그리드 */
.csGrid{
	display:grid;
	grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
	gap:20px;
	margin:0 0 28px;
	align-items:stretch;
}
.csCard{
	display:flex; flex-direction:column;
	padding:24px 26px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius-l);
	background:var(--cs-surface);
	box-shadow:var(--cs-shadow);
}
.csCard__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px;}
.csCard__tit{margin:0; font-size:17px; font-weight:700; line-height:1.3; color:var(--cs-ink);}
.csCard__more{
	display:inline-flex; align-items:center; gap:4px;
	font-size:13px; font-weight:500; color:var(--cs-ink-mute);
	transition:color var(--cs-ease);
}
.csCard__more:hover{color:var(--cs-accent);}
.csCard__more::after{content:'›'; font-size:16px; line-height:1;}

/* ------------------------------------------------------ 주요서비스 바로가기 */
.csService__list{
	display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
	margin:0; padding:0; list-style:none;
}
.csService__list li{list-style:none;}
.csService__list a{
	display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px;
	height:100%; padding:16px 6px 14px;
	border:1px solid transparent;
	border-radius:var(--cs-radius);
	transition:background-color var(--cs-ease), border-color var(--cs-ease), transform var(--cs-ease), box-shadow var(--cs-ease);
}
.csService__list a:hover{
	border-color:var(--cs-line);
	background:var(--cs-surface-alt);
	box-shadow:var(--cs-shadow);
	transform:translateY(-2px);
}
.csService__ico{
	display:block; width:48px; height:48px;
	border-radius:50%;
	border:1px solid var(--cs-line);
	background-color:var(--cs-surface-alt);
	background-repeat:no-repeat; background-position:50% 50%; background-size:27px auto;
	transition:border-color var(--cs-ease), background-color var(--cs-ease);
}
.csService__list a:hover .csService__ico{border-color:var(--cs-accent); background-color:#fff;}
.csService__txt{
	display:block; font-size:12.5px; font-weight:500; line-height:1.4;
	text-align:center; color:var(--cs-ink-sub); word-break:keep-all;
}
.csService__list a:hover .csService__txt{color:var(--cs-ink);}

.ico_1{background-image:url(/images/subce_07.png);}
.ico_2{background-image:url(/images/subce_09.png);}
.ico_3{background-image:url(/images/subce_11.png);}
.ico_4{background-image:url(/images/subce_13.png);}
.ico_5{background-image:url(/images/subce_15.png);}
.ico_6{background-image:url(/images/subce_17.png);}

/* ---------------------------------------------------------------- 공지사항 */
.csNotice__list{margin:0; padding:0; list-style:none; flex:1 1 auto;}
.csNotice__list li{list-style:none; border-top:1px solid var(--cs-line);}
.csNotice__list li:first-child{border-top:0;}
.csNotice__list a{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:12px 4px;
	transition:color var(--cs-ease);
}
.csNotice__list a:hover .csNotice__subject{color:var(--cs-accent); text-decoration:underline; text-underline-offset:3px;}
.csNotice__subject{
	flex:1 1 auto; min-width:0;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	font-size:14px; color:var(--cs-ink-sub);
}
.csNotice__subject img{vertical-align:middle; margin-left:4px;}
.csNotice__date{flex:0 0 auto; font-size:12.5px; color:var(--cs-ink-mute);}

.csEmpty{
	display:flex; align-items:center; justify-content:center;
	flex:1 1 auto; min-height:120px; margin:0;
	border:1px dashed var(--cs-line-strong);
	border-radius:var(--cs-radius);
	background:var(--cs-surface-alt);
	color:var(--cs-ink-mute); font-size:14px; text-align:center;
}

/* ------------------------------------------------------------- FAQ 검색바 */
.csWrap .search_wrap{margin:0 0 18px;}
.csSearch__box{
	padding:26px 28px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius-l);
	background:var(--cs-surface-alt);
}
.csSearch__label{
	display:block; margin:0 0 12px;
	font-size:16px; font-weight:700; color:var(--cs-ink);
}
.csSearch__field{display:flex; gap:8px;}
.csWrap .csSearch__input{
	flex:1 1 auto; min-width:0; height:48px; padding:0 16px;
	border:1px solid var(--cs-line-strong);
	border-radius:var(--cs-radius);
	background:var(--cs-surface);
	font-size:15px; color:var(--cs-ink);
	transition:border-color var(--cs-ease), box-shadow var(--cs-ease);
}
.csWrap .csSearch__input::placeholder{color:var(--cs-ink-mute);}
.csWrap .csSearch__input:focus{
	outline:0;
	border-color:var(--cs-accent);
	box-shadow:0 0 0 3px rgba(0,0,0,.04);
}
.csSearch__field .csBtn{flex:0 0 auto; height:48px; padding:0 26px;}

/* ------------------------------------------------------------------ FAQ 탭 */
/* 쇼핑몰별 common.css 가 .tab01 에 !important 를 거는 경우가 있어 동일 강도로 지정 */
.csWrap .tab01{
	display:flex; flex-wrap:wrap; gap:8px;
	margin:0 0 6px; padding:0 0 18px;
	border:0 !important; border-bottom:1px solid var(--cs-line) !important;
	background:none !important;
}
.csWrap .tab01 a,
.csWrap .tab01 > a{
	display:inline-flex; align-items:center; justify-content:center;
	flex:0 0 auto;
	height:38px; padding:0 16px; margin:0;
	border:1px solid var(--cs-line) !important;
	border-radius:999px;
	background:var(--cs-surface) !important;
	box-shadow:none;
	font-size:14px !important; font-weight:500; line-height:1; color:var(--cs-ink-sub) !important;
	transition:background-color var(--cs-ease), border-color var(--cs-ease), color var(--cs-ease), box-shadow var(--cs-ease);
}
.csWrap .tab01 a:hover,
.csWrap .tab01 > a:hover{border-color:var(--cs-line-strong) !important; background:var(--cs-surface-alt) !important; color:var(--cs-ink) !important;}
.csWrap .tab01 a.on,
.csWrap .tab01 > a.on{
	border-color:transparent !important;
	background:var(--cs-accent) !important;
	color:var(--cs-accent-ink) !important;
	font-weight:600;
	box-shadow:var(--cs-shadow-btn);
}

/* ---------------------------------------------------------------- FAQ 목록 */
.csWrap .qna_list{margin:0; padding:0; list-style:none; border:0;}
.csWrap .qna_list > li{
	list-style:none; border:0; border-bottom:1px solid var(--cs-line);
	background:none;
}
.csWrap .qna_list > li .q{
	position:relative;
	display:flex; align-items:center; gap:12px;
	padding:20px 46px 20px 4px;
	border:0; background:none;
	font-size:15.5px; font-weight:500; line-height:1.5; color:var(--cs-ink);
	cursor:pointer;
	transition:color var(--cs-ease);
}
.csWrap .qna_list > li .q:hover{color:var(--cs-accent);}
.csWrap .qna_list > li .q .ico_q,
.csWrap .qna_list > li .a .ico_a{
	flex:0 0 auto;
	display:inline-flex; align-items:center; justify-content:center;
	position:static; top:auto; left:auto; float:none;
	width:28px; height:28px; margin:0;
	border-radius:50%;
	font-size:13px; font-weight:700; line-height:1;
	text-indent:0; background-image:none;
}
.csWrap .qna_list > li .q .ico_q{background:var(--cs-accent); color:var(--cs-accent-ink);}
.csWrap .qna_list > li .a .ico_a{background:var(--cs-surface-alt); border:1px solid var(--cs-line); color:var(--cs-ink-sub);}
.csWrap .qna_list > li .q em{display:none;}

/* 화살표 */
.csWrap .qna_list > li .q::after{
	content:''; position:absolute; right:12px; top:50%;
	width:9px; height:9px; margin-top:-6px;
	border-right:1.6px solid var(--cs-ink-mute);
	border-bottom:1.6px solid var(--cs-ink-mute);
	transform:rotate(45deg);
	transition:transform var(--cs-ease), border-color var(--cs-ease);
}
.csWrap .qna_list > li.on .q{color:var(--cs-accent); font-weight:600;}
.csWrap .qna_list > li.on .q::after{margin-top:-2px; transform:rotate(-135deg); border-color:var(--cs-accent);}

.csWrap .qna_list > li .a{
	gap:12px;
	padding:20px 24px 24px;
	margin:0 0 18px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius);
	background:var(--cs-surface-alt);
	font-size:14.5px; line-height:1.75; color:var(--cs-ink-sub);
	word-break:break-word;
}
.csWrap .qna_list > li .a .ico_a{float:left; margin:0 12px 8px 0;}
.csWrap .qna_list > li .a img{max-width:100%; height:auto;}
.csWrap .qna_list > li.noFAQ .q{cursor:default; justify-content:center; color:var(--cs-ink-mute);}
.csWrap .qna_list > li.noFAQ .q::after{display:none;}

/* 로딩 스켈레톤 */
.csSkeleton{padding:8px 0 40px;}
.csSkeleton span{
	display:block; height:62px; margin-bottom:8px;
	border-radius:var(--cs-radius);
	background:linear-gradient(90deg,#f2f4f7 25%,#e9ecf1 37%,#f2f4f7 63%);
	background-size:400% 100%;
	animation:csShimmer 1.2s ease-in-out infinite;
}
@keyframes csShimmer{0%{background-position:100% 50%;} 100%{background-position:0 50%;}}
@media (prefers-reduced-motion:reduce){
	.csSkeleton span{animation:none;}
	.csWrap *{transition-duration:.01ms !important;}
}

/* ------------------------------------------------------------------ 페이징 */
.csWrap .paging{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px;
	margin:30px 0 0 !important; padding:0 !important;
}
.csWrap .paging a{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:36px; height:36px; padding:0 8px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius-s);
	background:var(--cs-surface);
	font-size:14px; color:var(--cs-ink-sub);
	transition:border-color var(--cs-ease), background-color var(--cs-ease), color var(--cs-ease), box-shadow var(--cs-ease);
}
.csWrap .paging a:hover{border-color:var(--cs-line-strong); color:var(--cs-ink); box-shadow:var(--cs-shadow-btn);}
.csWrap .paging a.on{
	border-color:transparent; background:var(--cs-accent); color:var(--cs-accent-ink);
	font-weight:700; box-shadow:var(--cs-shadow-btn);
}
/* 페이지 바로가기 입력칸 : 기존 CSS 의 margin 때문에 한 줄에서 아래로 밀려 있었음 */
.csWrap .paging input.text{
	width:54px; height:36px; padding:0 8px;
	margin:0 0 0 12px !important;
	border:1px solid var(--cs-line-strong); border-radius:var(--cs-radius-s);
	background:var(--cs-surface);
	font-size:14px; line-height:34px; text-align:center; vertical-align:middle;
	box-sizing:border-box;
}
.csWrap .paging input.text:focus{outline:0; border-color:var(--cs-accent);}
.csWrap .paging .btn_yellow01{
	height:36px; padding:0 14px;
	margin:0 0 0 6px !important;
	border-radius:var(--cs-radius-s);
	font-size:13px; font-weight:600; line-height:36px;
	vertical-align:middle;
	cursor:pointer;
}

/* --------------------------------------------------- 콘텐츠 하단 여백 정리 */
.PageWrapSize{padding-bottom:0 !important;}
.sub_contents{margin-bottom:0 !important;}
.csWrap{margin-bottom:36px !important;}
.csWrap .right_section{min-height:0 !important;}
.csWrap .right_cont{padding-bottom:0 !important;}

/* ============================================================== 좌측 영역
   /_include/left.asp 마크업을 그대로 두고 고객센터 페이지에서만 리스타일
   (이 CSS 는 /cscenter/ 페이지에서만 로드되므로 다른 페이지엔 영향 없음)
   ========================================================================= */
/* 좌측 컬럼 상단을 콘텐츠 최상단(히어로)과 같은 선에 맞춤
   (기존 padding-top:30px 은 .tit 의 margin-top:-30px 을 상쇄하려던 것 — 둘 다 제거) */
.left_section{font-family:var(--cs-font); letter-spacing:-.02em; padding-top:0 !important;}

/* 타이틀 */
.left_section .tit{
	position:relative; overflow:hidden;
	display:flex; flex-direction:column-reverse; align-items:flex-start; gap:6px;
	margin:0 0 16px !important;
	padding:22px 20px 22px 22px !important;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius-l);
	background:var(--cs-surface) !important;
	box-shadow:var(--cs-shadow);
	text-align:left !important;
}
.left_section .tit::before{
	content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
	background:var(--cs-accent);
}
.left_section .tit .Cs{display:none;}
.left_section .tit h1,
.left_section .tit h2{
	margin:0 !important; padding:0 !important;
	font-size:20px !important; font-weight:800 !important; line-height:1.2 !important;
	color:var(--cs-ink) !important; text-align:left !important;
}
.left_section .tit span{
	display:block; margin:0 !important;
	font-size:11px !important; font-weight:700 !important; line-height:1 !important;
	letter-spacing:.14em; color:var(--cs-accent) !important; text-align:left !important;
}

/* 좌측 메뉴 */
.left_section .left_menu > ul:not(.lgt_menu_bn){margin:0 0 16px !important; padding:0 !important;}
.left_section .left_menu > ul:not(.lgt_menu_bn) > li{border:0 !important; background:none !important; list-style:none;}
.left_section .left_menu > ul:not(.lgt_menu_bn) > li > a{
	position:relative;
	display:flex !important; align-items:center;
	height:auto !important; min-height:0 !important;
	margin:0 0 6px; padding:13px 34px 13px 16px !important;
	border:1px solid var(--cs-line) !important;
	border-radius:var(--cs-radius) !important;
	background:var(--cs-surface) !important;
	font-size:14.5px !important; font-weight:600 !important; line-height:1.3 !important;
	color:var(--cs-ink-sub) !important; text-align:left !important;
	transition:border-color var(--cs-ease), background-color var(--cs-ease), color var(--cs-ease), box-shadow var(--cs-ease), transform var(--cs-ease);
}
.left_section .left_menu > ul:not(.lgt_menu_bn) > li > a::after{
	content:''; position:absolute; right:16px; top:50%;
	width:7px; height:7px; margin-top:-4px;
	border-right:1.6px solid var(--cs-ink-mute);
	border-top:1.6px solid var(--cs-ink-mute);
	transform:rotate(45deg);
	transition:border-color var(--cs-ease);
}
.left_section .left_menu > ul:not(.lgt_menu_bn) > li > a:hover{
	border-color:var(--cs-line-strong) !important;
	background:var(--cs-surface-alt) !important;
	color:var(--cs-ink) !important;
	box-shadow:var(--cs-shadow);
	transform:translateY(-1px);
}
.left_section .left_menu > ul:not(.lgt_menu_bn) > li > a.on{
	border-color:var(--cs-accent) !important;
	color:var(--cs-accent) !important;
	font-weight:700 !important;
	box-shadow:var(--cs-shadow);
}
.left_section .left_menu > ul:not(.lgt_menu_bn) > li > a.on::after{border-color:var(--cs-accent);}

/* 고객센터 안내 카드 (기존 검정 박스) */
.left_section .lgt_menu_bn{
	overflow:hidden;
	margin:0 !important; padding:0 !important;
	border:1px solid var(--cs-line) !important;
	border-radius:var(--cs-radius-l) !important;
	background:var(--cs-surface) !important;
	box-shadow:var(--cs-shadow);
	list-style:none;
}
.left_section .lgt_menu_bn li{border:0 !important; background:none !important; list-style:none; margin:0 !important;}
.left_section .lgt_menu_bn .time_info_li{
	display:flex; flex-direction:column; align-items:center;
	padding:22px 18px 20px !important;
	background:var(--cs-surface-alt) !important;
	color:var(--cs-ink) !important;
	text-align:center !important;
	border-bottom:1px solid var(--cs-line) !important;
}
.left_section .lgt_menu_bn h4{
	margin:0 0 12px !important; padding:0 !important;
	font-size:11.5px !important; font-weight:700 !important; line-height:1 !important;
	letter-spacing:.06em; color:var(--cs-ink-mute) !important; text-align:center !important;
}
.left_section .lgt_menu_bn .icon{
	order:-1; flex:0 0 auto; float:none !important;
	display:block; width:42px; height:42px; margin:0 auto 12px !important;
	border-radius:50%;
	background-color:var(--cs-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='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%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);
}
.left_section .lgt_menu_bn .icon img{display:none !important;}
.left_section .lgt_menu_bn strong{
	display:block; margin:0 0 10px !important;
	font-size:21px !important; font-weight:800 !important; line-height:1.15 !important;
	letter-spacing:-.03em; color:var(--cs-ink) !important;
}
.left_section .lgt_menu_bn .time_info_li > span:not(.icon){
	display:block; margin:0 !important;
	font-size:12px !important; font-weight:500 !important; line-height:1.65 !important;
	color:var(--cs-ink-sub) !important;
}
.left_section .lgt_menu_bn li:last-child a{
	display:flex !important; align-items:center; justify-content:center; gap:6px;
	height:52px !important; padding:0 14px !important;
	background:var(--cs-accent) !important;
	color:var(--cs-accent-ink) !important;
	font-size:14.5px !important; font-weight:700 !important; line-height:1 !important;
	text-align:center !important;
	transition:filter var(--cs-ease);
}
.left_section .lgt_menu_bn li:last-child a::after{
	content:''; width:7px; height:7px;
	border-right:1.8px solid currentColor; border-top:1.8px solid currentColor;
	transform:rotate(45deg) translateY(-1px);
}
.left_section .lgt_menu_bn li:last-child a:hover{filter:brightness(1.08);}

/* ------------------------------------------------------------------ 반응형 */
@media (max-width:1100px){
	.csGrid{grid-template-columns:minmax(0,1fr);}
	.csService__list{grid-template-columns:repeat(6,minmax(0,1fr));}
}
@media (max-width:860px){
	.csHero{flex-direction:column; align-items:flex-start; padding:28px 22px;}
	.csHero__img{display:none;}
	.csHero__title{font-size:24px;}
	.csService__list{grid-template-columns:repeat(3,minmax(0,1fr));}
	.csCard{padding:20px 18px;}
}
@media (max-width:560px){
	.csHero{padding:24px 18px; border-radius:var(--cs-radius);}
	.csHero__title{font-size:21px;}
	.csHero__meta{gap:8px 14px; padding:14px 16px;}
	.csHero__tel dd{font-size:20px;}
	.csHero__actions .csBtn{flex:1 1 auto;}
	.csSearch__box{padding:18px 16px; border-radius:var(--cs-radius);}
	.csSearch__field{flex-direction:column;}
	.csSearch__field .csBtn{width:100%;}
	.csService__list{grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px;}
	.csWrap .tab01{gap:6px; padding-bottom:14px;}
	.csWrap .tab01 a{height:34px; padding:0 13px; font-size:13px;}
	.csWrap .qna_list > li .q{padding:16px 34px 16px 2px; font-size:14.5px;}
	.csWrap .qna_list > li .a{padding:16px; font-size:14px;}
	.csCard{border-radius:var(--cs-radius);}
}

/* =========================================================================
   1:1 문의 등록 (/cscenter/consultReg.asp)          2026-07-25
   - 좌측메뉴/여백은 고객센터 메인과 동일한 규칙을 그대로 사용
   - 이 블록은 .csConsult 로 스코프해 다른 고객센터 화면에 영향 없음
   ========================================================================= */

/* ------------------------------------------------------------ 페이지 헤더 */
.csConsult .csPageHead{
	margin:0 0 20px;
	padding:26px 30px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius-l);
	background:linear-gradient(180deg,#fff 0%,var(--cs-surface-alt) 100%);
	box-shadow:var(--cs-shadow);
}
.csConsult .csPageHead__eyebrow{
	margin:0 0 8px; font-size:12px; font-weight:700; line-height:1;
	letter-spacing:.14em; color:var(--cs-accent);
}
.csConsult .csPageHead__title{
	margin:0; padding:0; font-size:26px; font-weight:800; line-height:1.3;
	letter-spacing:-.03em; color:var(--cs-ink);
}
.csConsult .csPageHead__desc{margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--cs-ink-sub);}

/* ----------------------------------------------------------------- 카드 */
.csConsult .csFormCard{
	margin:0 0 16px;
	padding:6px 30px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius-l);
	background:var(--cs-surface);
	box-shadow:var(--cs-shadow);
}

/* ------------------------------------------------------------------ 행 */
.csConsult .csFormRow{
	display:flex; align-items:flex-start; gap:20px;
	padding:20px 0;
	border-top:1px solid var(--cs-line);
}
.csConsult .csFormRow:first-child{border-top:0;}
.csConsult .csFormRow__label{
	flex:0 0 128px; max-width:128px;
	padding-top:14px;
	font-size:14.5px; font-weight:700; line-height:1.4; color:var(--cs-ink);
}
.csConsult .csFormRow__label label{cursor:pointer;}
.csConsult .req{margin-left:3px; font-style:normal; color:var(--cs-accent);}
.csConsult .csFormRow__field{
	flex:1 1 auto; min-width:0;
	display:flex; flex-direction:column; gap:10px;
}
.csConsult .csField{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.csConsult .csAt,
.csConsult .csDash{color:var(--cs-ink-mute); font-size:14px;}

/* -------------------------------------------------------------- 입력요소 */
.csConsult .csInput,
.csConsult .csTextarea{
	height:48px; padding:0 14px;
	border:1px solid var(--cs-line-strong);
	border-radius:var(--cs-radius-s);
	background:#fff;
	color:var(--cs-ink);
	font-size:15px; line-height:46px;
	box-sizing:border-box;
	transition:border-color var(--cs-ease), box-shadow var(--cs-ease);
}
.csConsult .csInput::placeholder,
.csConsult .csTextarea::placeholder{color:var(--cs-ink-mute); font-weight:400;}
.csConsult .csInput:focus,
.csConsult .csTextarea:focus{
	outline:0;
	border-color:var(--cs-accent);
	box-shadow:0 0 0 3px rgba(20,24,33,.08);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--cs-accent) 16%, transparent);
}
.csConsult .csInput--full{width:100%;}
.csConsult .csInput--email{width:150px;}
.csConsult .csInput--tel{width:110px; text-align:center;}
.csConsult .csTextarea{
	width:100%; height:190px; min-height:190px;
	padding:14px; line-height:1.65; resize:vertical;
}

/* 파일첨부 */
.csConsult .csFile{
	width:100%; max-width:420px;
	height:48px; padding:9px 12px;
	border:1px dashed var(--cs-line-strong);
	border-radius:var(--cs-radius-s);
	background:var(--cs-surface-alt);
	font-size:14px; color:var(--cs-ink-sub);
	box-sizing:border-box; cursor:pointer;
	transition:border-color var(--cs-ease), background-color var(--cs-ease);
}
.csConsult .csFile:hover{border-color:var(--cs-accent); background:#fff;}
.csConsult .csFile::file-selector-button{
	height:30px; margin-right:12px; padding:0 14px;
	border:1px solid var(--cs-line-strong); border-radius:999px;
	background:#fff; color:var(--cs-ink); font-size:13px; font-weight:600;
	font-family:inherit; cursor:pointer;
}
.csConsult .csHelp{margin:0; font-size:12.5px; line-height:1.6; color:var(--cs-ink-mute);}
.csConsult .csHelp--foot{margin:18px 2px 0; font-size:13px; color:var(--cs-ink-sub);}

/* --------------------------------------------------------- 커스텀 셀렉트 */
.csConsult .select_option.csSelect{
	position:relative;
	width:150px; height:48px;
	border:1px solid var(--cs-line-strong);
	border-radius:var(--cs-radius-s);
	background:#fff;
	transition:border-color var(--cs-ease), box-shadow var(--cs-ease);
}
.csConsult .select_option.csSelect--wide{width:100%; max-width:340px;}
.csConsult .select_option.csSelect--narrow{width:110px;}
.csConsult .select_option.csSelect:hover{border-color:var(--cs-line-strong);}
.csConsult .select_option.csSelect.focus{
	border-color:var(--cs-accent);
	box-shadow:0 0 0 3px rgba(20,24,33,.08);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--cs-accent) 16%, transparent);
}
.csConsult .select_option.csSelect .active_cont{
	height:46px; padding:0 38px 0 14px;
	background:#fff !important;
	border-radius:var(--cs-radius-s);
	font-size:15px; line-height:46px; color:var(--cs-ink);
	white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}
.csConsult .select_option.csSelect .csPlaceholder{color:var(--cs-ink-mute);}
/* 화살표 : active_cont 는 선택 시 통째로 교체되므로 바깥에 그린다 */
.csConsult .select_option.csSelect::after{
	content:''; position:absolute; right:16px; top:50%;
	width:8px; height:8px; margin-top:-6px;
	border-right:1.6px solid var(--cs-ink-mute);
	border-bottom:1.6px solid var(--cs-ink-mute);
	transform:rotate(45deg);
	pointer-events:none;
	transition:border-color var(--cs-ease), transform var(--cs-ease);
}
.csConsult .select_option.csSelect.focus::after{
	border-color:var(--cs-accent);
	transform:rotate(225deg); margin-top:-2px;
}
.csConsult .select_option.csSelect .option_list{
	top:52px; left:0; width:100%; margin:0;
	max-height:230px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius-s);
	background:#fff;
	box-shadow:var(--cs-shadow-hover);
	font-size:14.5px; line-height:1.4;
	overflow-y:auto;
	z-index:20;
}
.csConsult .select_option.csSelect .option_list li{
	padding:12px 14px; color:var(--cs-ink-sub);
	transition:background-color var(--cs-ease), color var(--cs-ease);
}
.csConsult .select_option.csSelect .option_list li:hover{background:var(--cs-surface-alt); color:var(--cs-ink);}

/* ------------------------------------------------------------ 예/아니오 */
.csConsult .csAsk{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;}
.csConsult .csAsk__txt{font-size:13.5px; color:var(--cs-ink-sub);}
.csConsult .csRadio{
	display:inline-flex; align-items:center;
	padding:3px; gap:2px;
	border:1px solid var(--cs-line); border-radius:999px;
	background:var(--cs-surface-alt);
}
.csConsult .csRadio input[type="radio"]{position:absolute; opacity:0; width:0; height:0;}
.csConsult .csRadio label{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:58px; height:32px; padding:0 14px;
	border-radius:999px;
	font-size:13.5px; font-weight:600; color:var(--cs-ink-sub);
	cursor:pointer;
	transition:background-color var(--cs-ease), color var(--cs-ease), box-shadow var(--cs-ease);
}
.csConsult .csRadio input[type="radio"]:checked + label{
	background:var(--cs-accent); color:var(--cs-accent-ink);
	box-shadow:0 2px 5px rgba(20,24,33,.14);
}
.csConsult .csRadio input[type="radio"]:focus-visible + label{outline:2px solid var(--cs-accent); outline-offset:2px;}

/* ---------------------------------------------------------- 개인정보 동의 */
.csConsult .csPrivacy{padding:26px 30px;}
.csConsult .csPrivacy__tit{
	margin:0 0 14px; padding:0;
	font-size:16px; font-weight:700; line-height:1.3; color:var(--cs-ink);
}
.csConsult .csPrivacy__box{
	height:190px; padding:18px 20px;
	border:1px solid var(--cs-line);
	border-radius:var(--cs-radius);
	background:var(--cs-surface-alt);
	font-size:13px; line-height:1.75; color:var(--cs-ink-sub);
	overflow-y:auto; overflow-x:hidden;
	overscroll-behavior:contain;
}
.csConsult .csPrivacy__box *{max-width:100%;}
.csConsult .csAgree{
	display:flex; align-items:center; justify-content:flex-end; gap:9px;
	margin:16px 0 0;
}
.csConsult .csCheck{
	width:20px; height:20px; margin:0;
	accent-color:var(--cs-accent);
	cursor:pointer; flex:0 0 auto;
}
.csConsult .csAgree label{font-size:14px; font-weight:600; color:var(--cs-ink); cursor:pointer;}

/* ------------------------------------------------------------------ 버튼 */
.csConsult .csBtn--lg{height:54px; min-width:152px; padding:0 30px; font-size:16px; font-weight:700; border-radius:var(--cs-radius);}
.csConsult .csFormActions{
	display:flex; justify-content:center; gap:10px;
	margin:26px 0 0; padding:0;
}

/* -------------------------------------------------- 버튼 아래 여백 제거 */
.csConsult .right_section{min-height:0 !important; overflow:visible;}
.csConsult.csWrap{margin-bottom:28px !important;}

/* ------------------------------------------------------------------ 반응형 */
@media (max-width:900px){
	.csConsult .csPageHead{padding:22px 20px;}
	.csConsult .csPageHead__title{font-size:22px;}
	.csConsult .csFormCard{padding:4px 18px;}
	.csConsult .csPrivacy{padding:20px 18px;}
	.csConsult .csFormRow{flex-direction:column; gap:8px; padding:16px 0;}
	.csConsult .csFormRow__label{flex:0 0 auto; max-width:none; padding-top:0;}
	.csConsult .select_option.csSelect--wide{max-width:none;}
	.csConsult .csInput--email{width:calc(50% - 22px); min-width:120px;}
	.csConsult .csFormActions{flex-direction:column;}
	.csConsult .csBtn--lg{width:100%;}
}

@media (prefers-reduced-motion:reduce){
	.csConsult .csInput,
	.csConsult .csTextarea,
	.csConsult .csRadio label,
	.csConsult .select_option.csSelect,
	.csConsult .select_option.csSelect::after{transition:none !important;}
}