@charset "utf-8";
/* ==========================================================================
   PLAYWEBON BOARD - 확인/안내 화면 (.pwc)
   삭제 확인 · 비밀번호 입력 · 안내 메시지 공통 / 디자인 10종
   ========================================================================== */

.pwc {
	--pc: #e2692f;
	--dg: #e0342c;
	--pc-soft: color-mix(in srgb, var(--pc) 11%, transparent);
	--dg-soft: color-mix(in srgb, var(--dg) 10%, transparent);
	--txt: #14171c;
	--body: #4a505a;
	--sub: #7c838f;
	--line: #e3e6eb;
	--line-form: #cfd4dd;
	--bg-a: #f5f6f9;
	--radius: 16px;
	position: relative;
	margin: 40px 0 60px;
	font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
	letter-spacing: -.03em;
	color: var(--txt);
}
.pwc * { box-sizing: border-box; }

.pwc .pwc_box {
	max-width: 560px;
	margin: 0 auto;
	padding: 38px 34px 30px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	text-align: center;
}

/* 아이콘 */
.pwc .pwc_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--pc-soft);
	color: var(--pc);
}
.pwc .pwc_icon svg { width: 27px; height: 27px; display: block; }
.pwc.is_danger .pwc_icon { background: var(--dg-soft); color: var(--dg); }

/* 문구 */
.pwc .pwc_title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--txt);
	word-break: keep-all;
}
.pwc .pwc_desc {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sub);
	word-break: keep-all;
}

/* 원문 미리보기 */
.pwc .pwc_quote {
	margin: 22px 0 0;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--bg-a);
	text-align: left;
}
.pwc .pwc_qname {
	display: block;
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--txt);
}
.pwc .pwc_qtext {
	font-size: 14px;
	line-height: 1.6;
	color: var(--body);
	word-break: break-word;
	max-height: 132px;
	overflow: hidden;
}
.pwc .pwc_qtext img { max-width: 100%; height: auto; }

/* 입력 */
.pwc .pwc_field { margin: 22px 0 0; }
.pwc .pwc_field input[type="password"],
.pwc .pwc_field input[type="text"] {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--line-form);
	border-radius: 11px;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	color: var(--txt);
	outline: 0;
	text-align: center;
}
.pwc .pwc_field input:focus { border-color: var(--pc); }

/* 옵션 */
.pwc .pwc_opt {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--sub);
}
.pwc .pwc_opt label { display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; }
.pwc .pwc_opt input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--dg); }

/* 버튼 */
.pwc .pwc_btns {
	display: flex;
	gap: 9px;
	margin: 26px 0 0;
}
.pwc .pwc_btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 50px;
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: 11px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: all .2s ease;
}
.pwc .pwc_btn.ghost {
	border-color: var(--line-form);
	background: #fff;
	color: var(--sub);
}
.pwc .pwc_btn.ghost:hover { border-color: var(--txt); color: var(--txt); }
.pwc .pwc_btn.primary { background: var(--pc); color: #fff; }
.pwc .pwc_btn.primary:hover { filter: brightness(1.07); box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 32%, transparent); }
.pwc .pwc_btn.danger { background: var(--dg); color: #fff; }
.pwc .pwc_btn.danger:hover { filter: brightness(1.07); box-shadow: 0 6px 16px color-mix(in srgb, var(--dg) 32%, transparent); }


/* ==========================================================================
   01. 센터 카드 (기본)
   ========================================================================== */
.pwc_s1 .pwc_box { box-shadow: 0 4px 22px rgba(20,24,32,.06); }


/* ==========================================================================
   02. 상단 컬러바
   ========================================================================== */
.pwc_s2 .pwc_box {
	padding-top: 34px;
	border: 0;
	border-top: 5px solid var(--pc);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: 0 4px 22px rgba(20,24,32,.07);
}
.pwc_s2.is_danger .pwc_box { border-top-color: var(--dg); }
.pwc_s2 .pwc_icon { width: 52px; height: 52px; border-radius: 14px; }


/* ==========================================================================
   03. 미니멀 라인
   ========================================================================== */
.pwc_s3 .pwc_box {
	padding: 30px 0;
	border: 0;
	border-top: 2px solid var(--txt);
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
}
.pwc_s3 .pwc_icon { display: none; }
.pwc_s3 .pwc_title { font-size: 19px; }
.pwc_s3 .pwc_quote { background: transparent; border-left: 3px solid var(--line); border-radius: 0; padding: 4px 0 4px 16px; }
.pwc_s3 .pwc_btns { justify-content: center; }
.pwc_s3 .pwc_btn { flex: 0 0 auto; min-width: 132px; }


/* ==========================================================================
   04. 딤 시트 (모달 느낌)
   ========================================================================== */
.pwc_s4 {
	padding: 50px 20px;
	border-radius: 20px;
	background: linear-gradient(180deg, #eceff4, #e2e6ed);
}
.pwc_s4 .pwc_box {
	border: 0;
	border-radius: 20px;
	box-shadow: 0 18px 46px rgba(20,24,32,.14);
}


/* ==========================================================================
   05. 대형 아이콘
   ========================================================================== */
.pwc_s5 .pwc_box { padding-top: 44px; border: 0; box-shadow: 0 4px 22px rgba(20,24,32,.06); }
.pwc_s5 .pwc_icon {
	width: 88px;
	height: 88px;
	margin-bottom: 22px;
	background: var(--pc);
	color: #fff;
	box-shadow: 0 10px 26px color-mix(in srgb, var(--pc) 30%, transparent);
}
.pwc_s5.is_danger .pwc_icon { background: var(--dg); color: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--dg) 30%, transparent); }
.pwc_s5 .pwc_icon svg { width: 40px; height: 40px; }
.pwc_s5 .pwc_title { font-size: 22px; }


/* ==========================================================================
   06. 다크 카드
   ========================================================================== */
.pwc_s6 {
	--txt: #f0f3f8;
	--body: #c6ccd8;
	--sub: #99a1af;
	--line: #2b3141;
	--line-form: #39415a;
	--bg-a: #222836;
}
.pwc.pwc_s6 .pwc_box { background: #171b26; border-color: #2b3141; }
.pwc.pwc_s6 .pwc_field input { background: #10141d; border-color: #39415a; color: #f0f3f8; }
.pwc.pwc_s6 .pwc_field input::placeholder { color: #6b7488; }
.pwc.pwc_s6 .pwc_btn.ghost { background: transparent; border-color: #39415a; color: #99a1af; }
.pwc.pwc_s6 .pwc_btn.ghost:hover { border-color: #f0f3f8; color: #f0f3f8; }


/* ==========================================================================
   07. 가로형 (좌측 아이콘)
   ========================================================================== */
.pwc_s7 .pwc_box {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 0 20px;
	max-width: 640px;
	padding: 28px 30px;
	text-align: left;
}
.pwc_s7 .pwc_icon { grid-column: 1; grid-row: 1 / span 5; margin: 4px 0 0; }
.pwc_s7 .pwc_title,
.pwc_s7 .pwc_desc,
.pwc_s7 .pwc_quote,
.pwc_s7 .pwc_field,
.pwc_s7 .pwc_opt,
.pwc_s7 .pwc_btns { grid-column: 2; }
.pwc_s7 .pwc_title { font-size: 18.5px; }
.pwc_s7 .pwc_opt { justify-content: flex-start; }
.pwc_s7 .pwc_btns { justify-content: flex-end; margin-top: 20px; }
.pwc_s7 .pwc_btn { flex: 0 0 auto; min-width: 118px; height: 46px; }


/* ==========================================================================
   08. 스퀘어 아웃라인
   ========================================================================== */
.pwc_s8 .pwc_box {
	border: 2px solid var(--txt);
	border-radius: 0;
}
.pwc_s8 .pwc_icon { border-radius: 0; }
.pwc_s8 .pwc_quote { border-radius: 0; }
.pwc_s8 .pwc_field input { border-radius: 0; }
.pwc_s8 .pwc_btn { border-radius: 0; }
.pwc_s8 .pwc_btn.ghost { border-color: var(--txt); color: var(--txt); }


/* ==========================================================================
   09. 좌측 스트라이프
   ========================================================================== */
.pwc_s9 .pwc_box {
	border: 1px solid var(--line);
	border-left: 6px solid var(--pc);
	border-radius: 0 var(--radius) var(--radius) 0;
	box-shadow: 0 3px 16px rgba(20,24,32,.05);
}
.pwc_s9.is_danger .pwc_box { border-left-color: var(--dg); }
.pwc_s9 .pwc_icon { width: 50px; height: 50px; border-radius: 13px; }
.pwc_s9 .pwc_icon svg { width: 23px; height: 23px; }


/* ==========================================================================
   10. 컴팩트 바
   ========================================================================== */
.pwc_s10 { margin: 26px 0 40px; }
.pwc_s10 .pwc_box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	max-width: 860px;
	padding: 18px 22px;
	border-radius: 12px;
	background: var(--bg-a);
	border-color: transparent;
	text-align: left;
}
.pwc_s10 .pwc_icon { width: 40px; height: 40px; margin: 0; flex: 0 0 40px; background: #fff; }
.pwc_s10 .pwc_icon svg { width: 19px; height: 19px; }
.pwc_s10 .pwc_title { flex: 1 1 200px; margin: 0; font-size: 16px; }
.pwc_s10 .pwc_desc { flex: 1 1 100%; margin: 0; order: 5; }
.pwc_s10 .pwc_quote { flex: 1 1 100%; order: 6; margin: 0; background: #fff; }
.pwc_s10 .pwc_field { flex: 1 1 220px; margin: 0; }
.pwc_s10 .pwc_field input { height: 44px; }
.pwc_s10 .pwc_opt { flex: 0 0 auto; margin: 0; }
.pwc_s10 .pwc_btns { flex: 0 0 auto; margin: 0; }
.pwc_s10 .pwc_btn { flex: 0 0 auto; min-width: 96px; height: 44px; font-size: 14.5px; }


/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 768px) {
	.pwc { margin: 26px 0 40px; }
	.pwc .pwc_box { padding: 28px 20px 24px; border-radius: 14px; }
	.pwc .pwc_icon { width: 52px; height: 52px; margin-bottom: 15px; }
	.pwc .pwc_icon svg { width: 24px; height: 24px; }
	.pwc .pwc_title { font-size: 17.5px; }
	.pwc .pwc_desc { font-size: 14px; }
	.pwc .pwc_btns { flex-direction: column-reverse; gap: 8px; margin-top: 22px; }
	.pwc .pwc_btn { width: 100%; height: 50px; }

	.pwc_s4 { padding: 26px 12px; }
	.pwc_s5 .pwc_icon { width: 72px; height: 72px; }
	.pwc_s5 .pwc_icon svg { width: 32px; height: 32px; }
	.pwc_s5 .pwc_title { font-size: 19px; }
	.pwc_s7 .pwc_box { display: block; padding: 26px 20px; }
	.pwc_s7 .pwc_icon { margin: 0 0 14px; }
	.pwc_s7 .pwc_btn { width: 100%; }
	.pwc_s10 .pwc_box { display: block; }
	.pwc_s10 .pwc_icon { margin: 0 0 12px; }
	.pwc_s10 .pwc_title { margin: 0 0 6px; }
	.pwc_s10 .pwc_field,
	.pwc_s10 .pwc_opt { margin-top: 14px; }
	.pwc_s10 .pwc_btns { margin-top: 16px; }
}