/* ============================================================
   JShoe 고객센터 CSS — ABC Mart 참조 완전 재현
   ============================================================ */

/* ── box-sizing 리셋 ── */
.jcs-layout *, .jcs-layout *::before, .jcs-layout *::after,
.jcs-faq-wrap *, .jcs-faq-wrap *::before, .jcs-faq-wrap *::after {
	box-sizing: border-box;
}

/* ── 테마 button 기본 스타일 차단 ── */
.jcs-layout button {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
}

/* ── screen-reader-only ── */
.jcs-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   1. 페이지 외부 래퍼
   ============================================================ */

.jcs-page-outer {
	background: #f5f5f5;
	padding: 30px 0 70px;
}

/* ============================================================
   2. 두 컬럼 레이아웃
   ============================================================ */

.jcs-layout {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ============================================================
   3. 사이드바
   ============================================================ */

.jcs-sidebar {
	width: 202px;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid #ddd;
	position: sticky;
	top: 100px;
	font-size: 13px;
}

/* 헤더 */
.jcs-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #ddd;
}

.jcs-sidebar-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #111 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	line-height: 1.2;
}

/* 모바일 토글 버튼: 데스크탑에서 숨김 */
.jcs-sidebar-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #888;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

/* 내비게이션 */
.jcs-sidebar-nav {
	padding: 0;
}
.jcs-sidebar-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jcs-sidebar-nav ul li {
	margin: 0;
	padding: 0;
}
.jcs-sidebar-nav ul li a {
	display: block;
	padding: 13px 16px;
	font-size: 13px;
	font-weight: 400;
	color: #333;
	text-decoration: none;
	line-height: 1.4;
	transition: color 0.12s;
}
.jcs-sidebar-nav ul li a:hover {
	color: #e2001a;
	text-decoration: none;
}

/* 활성 메뉴: 빨간색 + 밑줄 */
.jcs-sidebar-nav ul li.current-menu-item > a,
.jcs-sidebar-nav ul li.current_page_item > a,
.jcs-sidebar-nav ul li.current-page-ancestor > a {
	color: #e2001a;
	font-weight: 700;
	text-decoration: underline;
}

/* CS 연락처 */
.jcs-sidebar-info {
	border-top: 1px solid #ddd;
	padding: 14px 16px 18px;
}
.jcs-sidebar-cs-label {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 8px;
	color: #999;
	line-height: 1;
}
.jcs-sidebar-cs-label span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.jcs-sidebar-phone {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: #111;
	text-decoration: none;
	letter-spacing: -0.02em;
	margin-bottom: 5px;
}
.jcs-sidebar-phone:hover { color: #e2001a; }

.jcs-sidebar-hours {
	margin-bottom: 12px;
}
.jcs-sidebar-hours table {
	border: none;
	border-collapse: collapse;
}
.jcs-sidebar-hours td {
	border: none;
	padding: 0;
	font-size: 11px;
	color: #888;
	line-height: 1.9;
	vertical-align: top;
}
.jcs-hours-day { padding-right: 5px; white-space: nowrap; }
.jcs-hours-note { color: #aaa; font-size: 10.5px; }

.jcs-sidebar-chat-btn {
	display: inline-block;
	padding: 5px 10px;
	font-size: 12px;
	color: #444;
	text-decoration: none;
	border: 1px solid #bbb;
	background: #fff;
	white-space: nowrap;
	transition: border-color 0.15s, color 0.15s;
}
.jcs-sidebar-chat-btn:hover {
	border-color: #888;
	color: #111;
	text-decoration: none;
}

/* ============================================================
   4. 메인 콘텐츠 영역
   ============================================================ */

.jcs-content {
	flex: 1;
	min-width: 0;
	background: #fff;
	border: 1px solid #ddd;
	padding: 24px 28px 52px;
}

.jcs-page-title {
	font-size: 20px;
	font-weight: 700;
	color: #111;
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid #333;
	line-height: 1.2;
}

/* ============================================================
   5. FAQ 검색바
   ============================================================ */

.jcs-faq-search-wrap { margin-bottom: 20px; }

.jcs-faq-search {
	display: flex;
	align-items: stretch;
	border: 1px solid #ccc;
	height: 44px;
	width: 100%;
}
.jcs-search-label-vis {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	background: #f2f2f2;
	border-right: 1px solid #ccc;
	white-space: nowrap;
	flex-shrink: 0;
}
.jcs-search-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	padding: 0 14px;
	font-size: 13px;
	color: #111;
	background: #fff;
	font-family: inherit;
	box-shadow: none;
	border-radius: 0;
	height: 100%;
	-webkit-appearance: none;
}
.jcs-search-input::placeholder { color: #bbb; }

.jcs-search-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	height: 100%;
	background: #111;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	box-shadow: none;
	transition: background 0.15s;
}
.jcs-search-btn:hover { background: #333; }

/* ============================================================
   6. 분류 탭
   ============================================================ */

.jcs-faq-tabs {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	margin-bottom: 0;
}
.jcs-tab {
	flex: 1 1 auto;
	min-width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 42px;
	padding: 0 8px;
	font-size: 13px;
	font-weight: 400;
	font-family: inherit;
	color: #555;
	background: #f7f7f7;
	border: none;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	user-select: none;
	position: relative;
	transition: background 0.1s, color 0.1s;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}
.jcs-tab:hover { background: #efefef; color: #111; }
.jcs-tab.active {
	background: #fff;
	color: #111;
	font-weight: 700;
	border-bottom-color: #fff;
	z-index: 1;
}
.jcs-tab.active::before {
	content: '';
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 2px;
	background: #e2001a;
}
.jcs-tab-count { font-size: 11px; color: #bbb; font-weight: 400; }
.jcs-tab.active .jcs-tab-count { color: #999; }

/* ============================================================
   7. FAQ 목록
   ============================================================ */

.jcs-faq-list {
	border-top: 1px solid #ccc;
}
.jcs-faq-item {
	border-bottom: 1px solid #e8e8e8;
}

/* 질문 버튼 */
.jcs-faq-question {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px 4px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	border-radius: 0;
	transition: background 0.1s;
}
.jcs-faq-question:hover,
.jcs-faq-item.is-open > .jcs-faq-question {
	background: #fafafa;
}

/* Q 라벨 */
.jcs-q-label {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: #333;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	flex-shrink: 0;
}

/* 질문 텍스트 */
.jcs-q-text {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
	color: #222;
	line-height: 1.5;
}

/* Best 배지 */
.jcs-best-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 2px 6px;
	background: #e2001a;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	border-radius: 2px;
}

/* 토글 아이콘 */
.jcs-toggle-icon {
	flex-shrink: 0;
	margin-left: auto;
	padding-left: 10px;
	color: #aaa;
	display: flex;
	align-items: center;
}
.jcs-faq-question:hover .jcs-toggle-icon,
.jcs-faq-item.is-open .jcs-toggle-icon { color: #555; }
.jcs-icon-minus { display: none; }
.jcs-faq-item.is-open .jcs-icon-plus  { display: none; }
.jcs-faq-item.is-open .jcs-icon-minus { display: block; }

/* 답변 */
.jcs-faq-answer { display: none; }  /* jQuery slideDown 제어 */

.jcs-faq-answer-inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 4px 24px;
	background: #fafafa;
	border-top: 1px solid #eee;
}
.jcs-a-label {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: #e2001a;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	flex-shrink: 0;
	margin-top: 1px;
}
.jcs-a-content {
	flex: 1;
	font-size: 13.5px;
	color: #444;
	line-height: 1.9;
}
.jcs-a-content p              { margin: 0 0 10px; }
.jcs-a-content p:last-child   { margin-bottom: 0; }
.jcs-a-content ul, .jcs-a-content ol { padding-left: 22px; margin: 0 0 10px; }
.jcs-a-content li             { margin-bottom: 4px; }
.jcs-a-content strong, .jcs-a-content b { color: #222; }
.jcs-a-content img            { max-width: 100%; height: auto; margin: 8px 0; display: block; }
.jcs-a-content a              { color: #0066cc; text-decoration: underline; }
.jcs-a-content a:hover        { color: #004499; }
.jcs-a-content blockquote     { border-left: 3px solid #e2001a; margin: 8px 0; padding: 6px 14px; color: #666; background: #fff9f9; }
.jcs-a-content table          { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.jcs-a-content table th, .jcs-a-content table td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
.jcs-a-content table th       { background: #f5f5f5; font-weight: 600; }

/* 빈/결과없음 */
.jcs-faq-empty, .jcs-faq-no-results {
	text-align: center;
	padding: 50px 20px;
	color: #bbb;
	font-size: 14px;
}
.jcs-faq-no-results { display: none; }

/* ============================================================
   8. 반응형
   ============================================================ */

@media (max-width: 959px) {
	.jcs-page-outer { padding: 0 0 50px; }
	.jcs-layout { flex-direction: column; gap: 0; padding: 0; }

	.jcs-sidebar {
		width: 100%;
		position: static;
		border-left: none;
		border-right: none;
		border-top: none;
	}
	.jcs-sidebar-header { cursor: pointer; }
	.jcs-sidebar-toggle { display: flex; }
	.jcs-sidebar-nav    { display: none; }
	.jcs-sidebar-info   { display: none; }
	.jcs-sidebar.is-open .jcs-sidebar-nav  { display: block; }
	.jcs-sidebar.is-open .jcs-sidebar-info { display: block; }

	.jcs-content {
		border: none;
		border-top: 3px solid #eee;
		padding: 22px 16px 40px;
	}
}

@media (max-width: 639px) {
	.jcs-content { padding: 18px 12px 36px; }

	.jcs-faq-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.jcs-faq-tabs::-webkit-scrollbar { display: none; }
	.jcs-tab { flex: 0 0 auto; min-width: 70px; height: 38px; font-size: 12px; }

	.jcs-faq-question { gap: 10px; padding: 14px 4px; }
	.jcs-q-text { font-size: 13px; }
	.jcs-faq-answer-inner { gap: 10px; padding: 12px 4px 18px; }
	.jcs-a-content { font-size: 13px; }
}