/* =========================================================
 *  공용 모달 (Common Modal)  -  prefix: cmodal
 *  사용: PSModal.open() / PSModal.alert() / PSModal.confirm()
 *        또는 data-cmodal-open="#id" / data-cmodal-close
 * ========================================================= */

:root{
	--cmodal-accent: #7c3aed;
	--cmodal-accent-2: #a855f7;
	--cmodal-accent-deep: #6d28d9;
	--cmodal-indigo: #3a45c9;
	--cmodal-ink: #1e1b3a;
	--cmodal-ink-3: #5c6379;
	--cmodal-line: #ece9f5;
	--cmodal-radius: 18px;
}

/* 오버레이 */
.cmodal-overlay{
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(24, 20, 50, .42);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	transition: opacity .2s ease;
	-webkit-overflow-scrolling: touch;
}
.cmodal-overlay.is-open{ opacity: 1; }

/* 모달 박스 */
.cmodal{
	position: relative;
	width: 100%; max-width: 460px;
	max-height: calc(100vh - 40px);
	display: flex; flex-direction: column;
	background: #fff; border-radius: var(--cmodal-radius);
	box-shadow: 0 30px 70px -20px rgba(30, 20, 70, .55);
	font-family: var(--font-default, "Pretendard Variable", -apple-system, sans-serif);
	color: var(--cmodal-ink);
	transform: translateY(14px) scale(.98);
	opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
}
.cmodal-overlay.is-open .cmodal{ transform: translateY(0) scale(1); opacity: 1; }

/* 사이즈 */
.cmodal--sm{ max-width: 360px; }
.cmodal--lg{ max-width: 640px; }
.cmodal--xl{ max-width: 880px; }

/* 헤더 */
.cmodal-header{
	display: flex; align-items: center; gap: 12px;
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--cmodal-line);
}
.cmodal-title{
	flex: 1; margin: 0;
	font-size: 1.15rem; font-weight: 800; letter-spacing: -0.3px;
	color: #20232f;
}
.cmodal-close{
	flex-shrink: 0; width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 9px; background: transparent;
	color: #9aa0b5; font-size: 1.5rem; line-height: 1; cursor: pointer;
	transition: background .15s, color .15s;
}
.cmodal-close:hover{ background: #f3f1fb; color: var(--cmodal-accent); }

/* 본문 */
.cmodal-body{
	padding: 22px 24px;
	font-size: 0.97rem; line-height: 1.7; color: var(--cmodal-ink-3);
	overflow-y: auto;
}
.cmodal-body p{ margin: 0 0 10px; }
.cmodal-body p:last-child{ margin-bottom: 0; }
.cmodal-body b, .cmodal-body strong{ color: var(--cmodal-ink); font-weight: 700; }

/* 아이콘(알림/확인용) */
.cmodal-icon{
	width: 56px; height: 56px; margin: 4px auto 14px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
.cmodal-icon svg{ width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmodal-icon--info{ background: linear-gradient(150deg, #4f37b8, #6d28d9); }
.cmodal-icon--success{ background: linear-gradient(150deg, #16a34a, #22c55e); }
.cmodal-icon--warn{ background: linear-gradient(150deg, #d97706, #f59e0b); }
.cmodal-icon--error{ background: linear-gradient(150deg, #dc2626, #ef4444); }
.cmodal--centered .cmodal-body{ text-align: center; }
.cmodal--centered .cmodal-title{ text-align: left; }

/* 푸터 */
.cmodal-footer{
	display: flex; justify-content: flex-end; gap: 10px;
	padding: 16px 24px 22px;
}
.cmodal--centered .cmodal-footer{ justify-content: center; }

/* 버튼 */
.cmodal-btn{
	min-width: 92px; padding: 12px 22px;
	border: 0; border-radius: 10px;
	font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease, background .15s, color .15s;
}
.cmodal-btn:active{ transform: translateY(1px); }
.cmodal-btn--primary{
	background: linear-gradient(100deg, var(--cmodal-accent), var(--cmodal-accent-2)); color: #fff;
	box-shadow: 0 12px 24px -12px rgba(124,58,237,.6);
}
.cmodal-btn--primary:hover{ background: linear-gradient(100deg, var(--cmodal-accent-deep), #9333ea); }
.cmodal-btn--ghost{
	background: #fff; color: var(--cmodal-ink-3); border: 1.5px solid var(--cmodal-line);
}
.cmodal-btn--ghost:hover{ border-color: #cfd0ee; color: var(--cmodal-ink); }
.cmodal-btn--danger{ background: #ef4444; color: #fff; }
.cmodal-btn--danger:hover{ background: #dc2626; }

/* body 스크롤 락 */
body.cmodal-lock{ overflow: hidden; }

/* 반응형 */
@media (max-width: 520px){
	.cmodal-overlay{ padding: 14px; align-items: flex-end; }
	.cmodal{ max-width: 100%; }
	.cmodal-footer{ flex-direction: column-reverse; }
	.cmodal-btn{ width: 100%; }
}

/* 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce){
	.cmodal-overlay, .cmodal{ transition: none; }
}