/* ══════════════════════════════════════════════
   고객센터 — 공지사항 / FAQ / 1:1 문의
   색상·버튼은 common.css 토큰을 그대로 쓴다.
   ══════════════════════════════════════════════ */

.sp-wrap { max-width: 880px; margin: 0 auto; padding: 64px 20px 100px }

.sp-head { text-align: center; margin-bottom: 32px }
.sp-title { font-size: 34px; font-weight: 900; color: var(--text); margin: 14px 0 0; letter-spacing: -.5px }

/* pricing.css 와 같은 모양이지만 그 파일은 여기서 안 불러온다. */
.eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 700; color: var(--red);
	background: var(--red-light); border: 1px solid var(--red-border);
	padding: 5px 12px; border-radius: 100px
}

/* ── 탭 ── */
.sp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-md); margin-bottom: 8px }
.sp-tab {
	padding: 13px 20px; margin-bottom: -1px; border-bottom: 2px solid transparent;
	font-size: 14px; font-weight: 600; color: var(--text-5); text-decoration: none
}
	.sp-tab:hover { color: var(--text-3) }
	.sp-tab.on { border-bottom-color: var(--red); color: var(--red) }

/* ── 공통 ── */
.sp-empty {
	padding: 70px 20px; text-align: center; color: var(--text-5);
	font-size: 14px; line-height: 1.7
}
.sp-msg {
	margin: 4px 0 14px; padding: 11px 15px; border-radius: 9px;
	background: var(--red-light); color: var(--red); font-size: 13px; font-weight: 500
}
.sp-tag {
	display: inline-block; margin-right: 7px; padding: 2px 8px; border-radius: 5px;
	background: var(--red-light); color: var(--red);
	font-size: 11px; font-weight: 700; font-style: normal; vertical-align: 1px
}
	.sp-tag.co { background: var(--surface-4); color: var(--text-4) }

/* ── 목록 (공지) ── */
.sp-list { list-style: none; margin: 0; padding: 0 }
	.sp-list li { border-bottom: 1px solid var(--border) }
	.sp-list a {
		display: flex; align-items: center; gap: 16px; padding: 18px 6px;
		text-decoration: none; color: inherit
	}
		.sp-list a:hover .sp-li-t { color: var(--red) }
.sp-li-t { flex: 1; font-size: 15px; font-weight: 500; color: var(--text-2); line-height: 1.5 }
.sp-li-d { flex: 0 0 auto; font-size: 12px; color: var(--text-6) }

/* ── 상세 (공지) ── */
.sp-view { padding: 8px 0 }
.sp-view-t { font-size: 22px; font-weight: 800; color: var(--text); margin: 20px 0 8px; line-height: 1.45 }
.sp-view-m { font-size: 12px; color: var(--text-6); padding-bottom: 20px; border-bottom: 1px solid var(--border-md) }
.sp-view-b { padding: 26px 2px; font-size: 15px; line-height: 1.85; color: var(--text-3) }
.sp-view-f { padding-top: 20px; border-top: 1px solid var(--border); text-align: center }

/* ── FAQ 아코디언 ── */
.sp-faq { padding: 8px 0 }
.sp-faq-i { border-bottom: 1px solid var(--border) }
.sp-faq-q {
	display: block; width: 100%; padding: 20px 40px 20px 6px; position: relative;
	border: 0; background: none; text-align: left; cursor: pointer;
	font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-2); line-height: 1.5
}
	.sp-faq-q::after {
		content: ''; position: absolute; right: 12px; top: 26px;
		width: 8px; height: 8px; border-right: 2px solid var(--text-6); border-bottom: 2px solid var(--text-6);
		transform: rotate(45deg); transition: transform .2s
	}
	.sp-faq-i.on .sp-faq-q { color: var(--red) }
	.sp-faq-i.on .sp-faq-q::after { transform: rotate(-135deg); border-color: var(--red) }
.sp-faq-a { display: none; padding: 4px 6px 24px; font-size: 14px; line-height: 1.85; color: var(--text-4) }
	.sp-faq-i.on .sp-faq-a { display: block }

/* ── 1:1 문의 작성 ── */
.sp-form {
	margin-top: 28px; padding: 28px; border: 1px solid var(--border-md);
	border-radius: 14px; background: var(--surface)
}
.sp-form-t { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 18px }
.sp-f { margin-bottom: 16px }
.sp-fl { display: block; font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 7px }
.sp-in, .sp-sel {
	width: 100%; padding: 11px 13px; border: 1px solid var(--border-md); border-radius: 9px;
	background: var(--surface-2); color: var(--text-2);
	font-family: inherit; font-size: 14px; box-sizing: border-box
}
	.sp-in:focus, .sp-sel:focus { outline: none; border-color: var(--red); background: var(--surface) }
.sp-ta { resize: vertical; line-height: 1.7; min-height: 150px }

/* ── 1:1 문의 목록 ── */
.sp-qna { border-top: 1px solid var(--border-md) }
.sp-qna-i { border-bottom: 1px solid var(--border) }
.sp-qna-h {
	display: flex; align-items: center; gap: 14px; padding: 17px 6px;
	text-decoration: none; color: inherit
}
	.sp-qna-h:hover .sp-qna-t { color: var(--red) }
.sp-qna-t { flex: 1; font-size: 15px; font-weight: 500; color: var(--text-2); line-height: 1.5 }
.sp-qna-s { flex: 0 0 auto }
.sp-qna-d { flex: 0 0 auto; font-size: 12px; color: var(--text-6) }
.sp-st {
	flex: 0 0 auto; padding: 3px 9px; border-radius: 5px; background: var(--surface-4);
	color: var(--text-5); font-size: 11px; font-weight: 700; font-style: normal
}
	.sp-st.done { background: var(--green-light); color: var(--green) }
.sp-qna-b {
	padding: 4px 6px 20px; font-size: 14px; line-height: 1.85; color: var(--text-4)
}
.sp-qna-ans {
	margin: 0 6px 20px; padding: 18px 20px; border-radius: 11px;
	background: var(--red-light); border: 1px solid var(--red-border);
	font-size: 14px; line-height: 1.85; color: var(--text-3)
}
.sp-qna-ans-h { font-size: 12px; font-weight: 700; color: var(--red); margin-bottom: 8px }
.sp-qna-wait { margin: 0 6px 20px; font-size: 13px; color: var(--text-6) }

/* ── 페이저 ── */
.sp-pager { display: flex; justify-content: center; gap: 5px; margin-top: 32px }
.sp-pg {
	min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-md); border-radius: 8px; background: var(--surface);
	color: var(--text-4); font-size: 13px; font-weight: 600; text-decoration: none
}
	.sp-pg:hover:not(.on) { background: var(--surface-3) }
	.sp-pg.on { background: var(--red); border-color: var(--red); color: #fff }

@media (max-width: 700px) {
	.sp-wrap { padding: 40px 16px 70px }
	.sp-title { font-size: 26px }
	.sp-tabs { overflow-x: auto }
	.sp-tab { padding: 12px 14px; white-space: nowrap }
	.sp-form { padding: 20px 16px }
	.sp-list a, .sp-qna-h { flex-wrap: wrap; gap: 8px }
	.sp-li-t, .sp-qna-t { flex: 1 0 100% }
}