@charset "utf-8";
/* ==========================================================================
   PLAYWEBON BOARD - FAQ (자주하는 질문) SKIN
   공통 구조 + 디자인 10종 (.faq_s1 ~ .faq_s10)
   ========================================================================== */

/* ---------- 공통 베이스 ---------- */
.faq_list {
	--pt: #e2692f;
	--sb: #1d6ba4;
	--pt-soft: color-mix(in srgb, var(--pt) 9%, transparent);
	--sb-soft: color-mix(in srgb, var(--sb) 10%, transparent);
	--txt: #1a1c20;
	--sub: #7b818c;
	--line: #e5e7ec;
	--bg-a: #f7f8fa;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	font-family: 'Pretendard Variable', sans-serif;
	letter-spacing: -.03em;
	color: var(--txt);
}
.faq_list * { box-sizing: border-box; }

.faq_item { position: relative; }
.faq_head { position: relative; }

/* 관리자 전용 수정 버튼 */
.faq_edit {
	position: absolute;
	right: 12px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--sub);
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	transition: all .22s ease;
}
.faq_edit:hover {
	border-color: var(--pt);
	background: var(--pt);
	color: #fff;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--pt) 28%, transparent);
}
.faq_list.faq_admin .faq_q { padding-right: 60px; }
.faq_empty { color: var(--sub); }
.faq_edit i { font-size: 15px; line-height: 1; }
.faq_cont .xe_content { font-size: inherit; line-height: inherit; color: inherit; }
.faq_cont .xe_content > *:first-child { margin-top: 0; }
.faq_cont .xe_content > *:last-child { margin-bottom: 0; }

.faq_q {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 22px 4px;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: inherit;
	transition: all .28s ease;
	-webkit-appearance: none;
	appearance: none;
}
.faq_q:focus-visible { outline: 2px solid var(--pt); outline-offset: -2px; }

.faq_mark {
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 800;
	color: var(--pt);
	line-height: 1;
}
.faq_cate {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--sb);
	line-height: 1;
	padding: 6px 10px;
	border-radius: 99px;
	background: var(--sb-soft);
	white-space: nowrap;
}
.faq_tit {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	word-break: keep-all;
}
.faq_meta {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--sub);
	white-space: nowrap;
}
.faq_ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 20px;
	color: var(--sub);
	transition: transform .3s ease, color .3s ease, background .3s ease;
}
.faq_item.on .faq_ico { color: var(--pt); transform: rotate(180deg); }
.faq_ico.plus { font-size: 18px; }
.faq_item.on .faq_ico.plus { transform: rotate(135deg); }

.faq_a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
}
.faq_a_in {
	display: flex;
	gap: 12px;
	padding: 22px 4px 26px;
	border-top: 1px dashed var(--line);
}
.faq_amark {
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 800;
	color: var(--sub);
	line-height: 1.6;
}
.faq_cont {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: #4a4f58;
	word-break: break-word;
}
.faq_cont img { max-width: 100%; height: auto; }
.faq_cont p { margin: 0 0 10px; }
.faq_cont p:last-child { margin-bottom: 0; }

.faq_files { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.faq_files a {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0 10px 6px 0; font-size: 14px; color: var(--sub);
}
.faq_files a:hover { color: var(--pt); }

.faq_none {
	padding: 70px 0;
	text-align: center;
	font-size: 16px;
	color: var(--sub);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.faq_secret { margin-left: 6px; font-size: 15px; color: var(--sub); }
.faq_new {
	display: inline-block; margin-left: 6px; padding: 2px 6px;
	font-size: 11px; font-weight: 700; line-height: 1.4;
	color: #fff; background: #ff5a5a; border-radius: 4px; vertical-align: 2px;
}
.faq_notice {
	display: inline-block; margin-right: 6px; padding: 3px 8px;
	font-size: 12px; font-weight: 700; line-height: 1.3;
	color: #fff; background: var(--txt); border-radius: 4px;
}

/* ==========================================================================
   STYLE 1 · 미니멀 라인 (Minimal Line)
   ========================================================================== */
.faq_s1 { border-top: 2px solid var(--txt); }
.faq_s1 .faq_item { border-bottom: 1px solid var(--line); }
.faq_s1 .faq_q { padding: 26px 8px; }
.faq_s1 .faq_q:hover .faq_tit { color: var(--pt); }
.faq_s1 .faq_item.on .faq_tit { color: var(--pt); font-weight: 700; }
.faq_s1 .faq_a_in { padding: 0 8px 30px; border-top: 0; }
.faq_s1 .faq_mark, .faq_s1 .faq_amark { width: 18px; }

/* ==========================================================================
   STYLE 2 · Q&A 뱃지 (Badge)
   ========================================================================== */
.faq_s2 { border-top: 2px solid var(--txt); }
.faq_s2 .faq_item { border-bottom: 1px solid var(--line); }
.faq_s2 .faq_q { padding: 20px 16px; gap: 14px; }
.faq_s2 .faq_mark, .faq_s2 .faq_amark {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	font-size: 15px; font-weight: 800; color: #fff; background: var(--pt);
}
.faq_s2 .faq_amark { background: var(--sb); }
.faq_s2 .faq_cate { min-width: 62px; text-align: center; }
.faq_s2 .faq_q:hover { background: var(--pt-soft); }
.faq_s2 .faq_q:hover .faq_tit { color: var(--pt); }
.faq_s2 .faq_item.on .faq_q { background: var(--pt-soft); }
.faq_s2 .faq_item.on .faq_tit { color: var(--pt); font-weight: 700; }
.faq_s2 .faq_a_in { padding: 22px 16px 26px; background: var(--bg-a); border-top: 0; }
.faq_s2 .faq_amark { align-self: flex-start; }

/* ==========================================================================
   STYLE 3 · 카드 그림자 (Soft Card)
   ========================================================================== */
.faq_s3 { display: flex; flex-direction: column; gap: 12px; }
.faq_s3 .faq_item {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.faq_s3 .faq_item:hover { box-shadow: 0 8px 24px rgba(20, 24, 40, .07); }
.faq_s3 .faq_item.on {
	border-color: var(--pt);
	box-shadow: 0 12px 32px rgba(20, 24, 40, .1);
	transform: translateY(-2px);
}
.faq_s3 .faq_q { padding: 24px 26px; }
.faq_s3 .faq_a_in { padding: 4px 26px 28px; border-top: 0; }
.faq_s3 .faq_ico {
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--bg-a);
}
.faq_s3 .faq_item.on .faq_ico { background: var(--pt); color: #fff; }

/* ==========================================================================
   STYLE 4 · 넘버링 (Big Number)
   ========================================================================== */
.faq_s4 { border-top: 1px solid var(--line); }
.faq_s4 .faq_item { border-bottom: 1px solid var(--line); }
.faq_s4 .faq_q { padding: 28px 10px; gap: 20px; }
.faq_s4 .faq_mark {
	width: 46px;
	font-size: 26px;
	font-weight: 800;
	color: var(--line);
	font-family: 'Pretendard Variable', sans-serif;
	transition: color .3s ease;
}
.faq_s4 .faq_item.on .faq_mark, .faq_s4 .faq_q:hover .faq_mark { color: var(--pt); }
.faq_s4 .faq_tit { font-size: 18px; }
.faq_s4 .faq_amark { display: none; }
.faq_s4 .faq_a_in { padding: 0 10px 32px 76px; border-top: 0; }

/* ==========================================================================
   STYLE 5 · 좌측 컬러바 (Left Accent Bar)
   ========================================================================== */
.faq_s5 { display: flex; flex-direction: column; gap: 10px; }
.faq_s5 .faq_item {
	position: relative;
	background: var(--bg-a);
	border-radius: 0 10px 10px 0;
	overflow: hidden;
	transition: background .3s ease;
}
.faq_s5 .faq_item::before {
	content: '';
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 4px; background: #d8dbe2;
	transition: background .3s ease, width .3s ease;
}
.faq_s5 .faq_item.on { background: #fff; box-shadow: 0 6px 20px rgba(20, 24, 40, .07); }
.faq_s5 .faq_item.on::before { background: var(--pt); width: 6px; }
.faq_s5 .faq_q { padding: 22px 24px 22px 28px; }
.faq_s5 .faq_item.on .faq_tit { color: var(--pt); }
.faq_s5 .faq_a_in { padding: 2px 24px 26px 28px; border-top: 0; }

/* ==========================================================================
   STYLE 6 · 필 토글 (Pill)
   ========================================================================== */
.faq_s6 { display: flex; flex-direction: column; gap: 14px; }
.faq_s6 .faq_q {
	padding: 20px 26px;
	border: 1px solid var(--line);
	border-radius: 99px;
	background: #fff;
	transition: all .3s ease;
}
.faq_s6 .faq_q:hover { border-color: var(--pt); }
.faq_s6 .faq_item.on .faq_q {
	background: var(--pt);
	border-color: var(--pt);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--pt) 30%, transparent);
}
.faq_s6 .faq_item.on .faq_tit,
.faq_s6 .faq_item.on .faq_mark,
.faq_s6 .faq_item.on .faq_ico { color: #fff; }
.faq_s6 .faq_item.on .faq_cate { background: rgba(255, 255, 255, .22); color: #fff; }
.faq_s6 .faq_item.on .faq_meta { color: rgba(255, 255, 255, .78); }
.faq_s6 .faq_a_in { padding: 20px 30px 6px; border-top: 0; }

/* ==========================================================================
   STYLE 7 · 다크 (Dark Neon)
   ========================================================================== */
.faq_s7 {
	--txt: #f2f4f8;
	--sub: #8d95a6;
	--line: #2a2f3c;
	background: #14171f;
	border-radius: 16px;
	padding: 12px 22px;
}
.faq_s7 .faq_item { border-bottom: 1px solid var(--line); }
.faq_s7 .faq_item:last-child { border-bottom: 0; }
.faq_s7 .faq_q { padding: 24px 4px; }
.faq_s7 .faq_tit { color: var(--txt); }
.faq_s7 .faq_q:hover .faq_tit { color: var(--pt); }
.faq_s7 .faq_cont { color: #b7becd; }
.faq_s7 .faq_a_in { padding: 0 4px 28px; border-top: 0; }
.faq_s7 .faq_ico {
	width: 30px; height: 30px; border-radius: 8px; background: #1e2330;
}
.faq_s7 .faq_item.on .faq_ico { background: var(--pt); color: #fff; }
.faq_s7 .faq_none { color: var(--sub); border-color: var(--line); }

/* ==========================================================================
   STYLE 8 · 테이블 라인 (Classic Table)
   ========================================================================== */
.faq_s8 { border-top: 2px solid var(--txt); border-bottom: 2px solid var(--txt); }
.faq_s8 .faq_item { border-bottom: 1px solid var(--line); }
.faq_s8 .faq_item:last-child { border-bottom: 0; }
.faq_s8 .faq_q { padding: 20px 16px; gap: 16px; }
.faq_s8 .faq_mark {
	width: 60px; text-align: center;
	font-size: 14px; font-weight: 700; color: var(--sub);
}
.faq_s8 .faq_item.on .faq_mark { color: var(--pt); }
.faq_s8 .faq_tit { font-size: 16px; font-weight: 500; }
.faq_s8 .faq_item.on .faq_tit { font-weight: 700; }
.faq_s8 .faq_q:hover { background: var(--bg-a); }
.faq_s8 .faq_a_in { padding: 22px 16px 24px 92px; background: var(--bg-a); border-top: 1px solid var(--line); }
.faq_s8 .faq_amark { display: none; }

/* ==========================================================================
   STYLE 9 · 화살표 슬라이드 (Arrow Slide)
   ========================================================================== */
.faq_s9 { border-top: 1px solid var(--line); }
.faq_s9 .faq_item { border-bottom: 1px solid var(--line); overflow: hidden; }
.faq_s9 .faq_q { padding: 26px 10px; transition: padding .3s ease, background .3s ease; }
.faq_s9 .faq_q:hover { padding-left: 24px; background: linear-gradient(90deg, var(--pt-soft), transparent); }
.faq_s9 .faq_item.on .faq_q { padding-left: 24px; }
.faq_s9 .faq_mark { display: none; }
.faq_s9 .faq_tit { font-size: 18px; }
.faq_s9 .faq_ico { font-size: 22px; }
.faq_s9 .faq_item.on .faq_ico { transform: rotate(90deg); color: var(--pt); }
.faq_s9 .faq_amark { display: none; }
.faq_s9 .faq_a_in { padding: 0 10px 30px 24px; border-top: 0; }
.faq_s9 .faq_cont { padding-left: 16px; border-left: 3px solid var(--pt); }

/* ==========================================================================
   STYLE 10 · 2단 그리드 (Two Column Grid)
   ========================================================================== */
.faq_s10 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.faq_s10 .faq_item {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.faq_s10 .faq_item.on { border-color: var(--pt); box-shadow: 0 10px 26px rgba(20, 24, 40, .08); }
.faq_s10 .faq_q { padding: 22px 22px; align-items: flex-start; }
.faq_s10 .faq_tit { font-size: 16px; }
.faq_s10 .faq_mark {
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 8px;
	font-size: 14px; color: #fff; background: var(--pt);
}
.faq_s10 .faq_amark, .faq_s10 .faq_meta { display: none; }
.faq_s10 .faq_a_in { padding: 0 22px 24px; border-top: 0; }
.faq_s10 .faq_cont { padding-top: 16px; border-top: 1px dashed var(--line); font-size: 15px; }

/* ---------- 모바일 ---------- */
@media (max-width: 768px) {
	.faq_list { margin-bottom: 20px; }
	.faq_q { gap: 10px; padding: 18px 4px; }
	.faq_tit { font-size: 15.5px; }
	.faq_cont { font-size: 14.5px; line-height: 1.7; }
	.faq_meta { display: none; }
	.faq_cate { font-size: 12px; padding: 5px 8px; }

	.faq_s1 .faq_q { padding: 20px 2px; }
	.faq_s1 .faq_a_in { padding: 0 2px 24px; }
	/* --- STYLE 2 모바일 최적화: 1행 [Q · 분류 · 토글] / 2행 [제목] --- */
	.faq_s2 .faq_q {
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		padding: 15px 12px 16px;
	}
	.faq_s2 .faq_mark, .faq_s2 .faq_amark {
		width: 26px; height: 26px; font-size: 12px;
	}
	.faq_s2 .faq_mark { order: 1; }
	.faq_s2 .faq_cate { order: 2; min-width: 0; font-size: 11.5px; padding: 4px 9px; }
	.faq_s2 .faq_ico { order: 3; margin-left: auto; width: 22px; height: 22px; font-size: 18px; }
	.faq_s2 .faq_tit {
		order: 4;
		flex: 0 0 100%;
		width: 100%;
		margin-top: 2px;
		font-size: 15px;
		line-height: 1.5;
		font-weight: 600;
	}
	.faq_s2 .faq_a_in { gap: 10px; padding: 16px 12px 20px; }
	.faq_s2 .faq_amark { align-self: flex-start; margin-top: 1px; }
	.faq_s2 .faq_cont { font-size: 14.5px; line-height: 1.72; }
	.faq_s2 .faq_notice { padding: 2px 6px; font-size: 11px; }
	.faq_s3 .faq_q { padding: 20px 18px; }
	.faq_s3 .faq_a_in { padding: 2px 18px 22px; }
	.faq_s4 .faq_q { padding: 20px 4px; gap: 12px; }
	.faq_s4 .faq_mark { width: 32px; font-size: 20px; }
	.faq_s4 .faq_a_in { padding: 0 4px 24px 48px; }
	.faq_s5 .faq_q { padding: 18px 16px 18px 22px; }
	.faq_s5 .faq_a_in { padding: 2px 16px 22px 22px; }
	.faq_s6 .faq_q { padding: 16px 20px; border-radius: 24px; }
	.faq_s6 .faq_a_in { padding: 16px 20px 4px; }
	.faq_s7 { padding: 6px 16px; }
	.faq_s7 .faq_q { padding: 20px 2px; }
	.faq_s7 .faq_a_in { padding: 0 2px 24px; }
	.faq_s8 .faq_q { padding: 16px 8px; gap: 10px; }
	.faq_s8 .faq_mark { width: 34px; font-size: 13px; }
	.faq_s8 .faq_a_in { padding: 18px 8px 20px 52px; }
	.faq_s9 .faq_q { padding: 20px 4px; }
	.faq_s9 .faq_q:hover, .faq_s9 .faq_item.on .faq_q { padding-left: 14px; }
	.faq_s9 .faq_tit { font-size: 16px; }
	.faq_s9 .faq_a_in { padding: 0 4px 24px 14px; }
	.faq_s10 { grid-template-columns: 1fr; gap: 12px; }
	.faq_s10 .faq_q { padding: 18px 18px; }
	.faq_s10 .faq_a_in { padding: 0 18px 20px; }
}

/* ---------- 수정 버튼 스타일별 보정 ---------- */
.faq_s6 .faq_edit { right: 16px; border-radius: 99px; }
.faq_s7 .faq_edit { background: #1e2330; border-color: #2a2f3c; }
.faq_s7 .faq_edit:hover { background: var(--pt); border-color: var(--pt); }
.faq_s10 .faq_edit { top: 16px; bottom: auto; margin: 0; width: 30px; height: 30px; font-size: 15px; }
.faq_s10.faq_admin .faq_q { padding-right: 56px; }

@media (max-width: 768px) {
	.faq_edit { right: 8px; width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
	.faq_list.faq_admin .faq_q { padding-right: 48px; }
	.faq_s2 .faq_edit { top: 11px; bottom: auto; margin: 0; }
	.faq_s2.faq_admin .faq_ico { margin-right: 2px; }
	.faq_s10 .faq_edit { top: 12px; }
}

/* ---------- 반응형 보정 : 1440 / 1280 / 1024 / 960 / 폴더블 / 360 / 320 ---------- */
@media (max-width: 1440px) {
	.faq_tit { font-size: 17px; }
	.faq_cont { font-size: 15.5px; }
}
@media (max-width: 1280px) {
	.faq_q { padding: 20px 18px; }
	.faq_tit { font-size: 16.5px; }
	.faq_cont { font-size: 15px; }
}
@media (max-width: 1024px) {
	.faq_tit { font-size: 16px; }
	.faq_cate { font-size: 12.5px; }
	.faq_s10 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
	.faq_q { gap: 12px; }
	.faq_meta { display: none; }
}
@media (min-width: 769px) and (max-width: 884px) {
	.faq_s10 { grid-template-columns: 1fr; }
	.faq_q { padding: 18px 14px; }
}
@media (max-width: 360px) {
	.faq_q { gap: 8px; padding: 16px 2px; }
	.faq_tit { font-size: 14.5px; }
	.faq_cont { font-size: 14px; }
	.faq_cate { font-size: 11px; padding: 4px 7px; }
	.faq_s2 .faq_q { padding: 13px 10px 14px; }
	.faq_s2 .faq_mark, .faq_s2 .faq_amark { width: 24px; height: 24px; font-size: 11px; }
	.faq_s2 .faq_tit { font-size: 14px; }
	.faq_s3 .faq_q { padding: 18px 14px; }
	.faq_s3 .faq_a_in { padding: 2px 14px 20px; }
	.faq_s6 .faq_q { padding: 14px 16px; }
	.faq_s10 .faq_q { padding: 16px 14px; }
	.faq_s10 .faq_a_in { padding: 0 14px 18px; }
}
@media (max-width: 320px) {
	.faq_q { gap: 6px; padding: 14px 2px; }
	.faq_tit { font-size: 13.5px; line-height: 1.5; }
	.faq_cont { font-size: 13.5px; line-height: 1.7; }
	.faq_cate { font-size: 10.5px; padding: 3px 6px; }
	.faq_s2 .faq_q { padding: 12px 8px 13px; }
	.faq_s2 .faq_tit { font-size: 13.5px; }
	.faq_s2 .faq_a_in { padding: 14px 8px 18px; }
	.faq_s4 .faq_mark { width: 26px; font-size: 17px; }
	.faq_s4 .faq_a_in { padding: 0 4px 20px 34px; }
	.faq_s8 .faq_mark { width: 30px; font-size: 12px; }
	.faq_s8 .faq_a_in { padding: 16px 6px 18px 42px; }
	.faq_edit { right: 6px; width: 27px; height: 27px; font-size: 14px; }
	.faq_list.faq_admin .faq_q { padding-right: 40px; }
}