/* ════════════════════════════════════════════════════════════════
 * 인지활동 선택 페이지 (cognitive-activity/)
 * 난이도별(상/중/하) 미니게임 카드 그리드
 * ──────────────────────────────────────────────────────────────── */

:root {
	/* 난이도 색상 */
	--ca-hard-start: #ef4444;
	--ca-hard-end:   #dc2626;
	--ca-hard-soft:  #fef2f2;
	--ca-hard-ink:   #b91c1c;

	--ca-med-start:  #f97316;
	--ca-med-end:    #ea580c;
	--ca-med-soft:   #fff7ed;
	--ca-med-ink:    #c2410c;

	--ca-easy-start: #22c55e;
	--ca-easy-end:   #16a34a;
	--ca-easy-soft:  #f0fdf4;
	--ca-easy-ink:   #15803d;

	/* 카테고리 색상 (인지 영역별) */
	--ca-cat-orient:   #3b82f6;  /* 지남력 - 파랑 */
	--ca-cat-memory:   #8b5cf6;  /* 기억력 - 보라 */
	--ca-cat-attn:     #f59e0b;  /* 주의력 - 앰버 */
	--ca-cat-visuo:    #14b8a6;  /* 시공간기능 - 틸 */
	--ca-cat-exec:     #ec4899;  /* 집행기능 - 핑크 */
	--ca-cat-lang:     #10b981;  /* 언어기능 - 에메랄드 */
}

/* ═══════ 레이아웃 (풀 와이드) ═══════ */
.ca-wrap {
	width: 100%;
	padding: 32px 28px 80px;
	box-sizing: border-box;
}
.ca-wrap *,
.ca-wrap *::before,
.ca-wrap *::after { box-sizing: border-box; }

/* ═══════ 탭 네비게이션 ═══════ */
/* ─── 상단 탭 (accounting/ 의 fac-subtab 디자인 차용) ─── */
.ca-tabs {
	display: inline-flex;
	gap: 4px;
	margin-bottom: 20px;
	padding: 6px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 1px 4px -2px rgba(15, 23, 42, 0.06);
}
.ca-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	background: transparent;
	border: none;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.ca-tab:hover {
	background: #f1f5f9;
	color: #334155;
}
.ca-tab.is-active {
	background: #eef2ff;
	color: #4338ca;
}
.ca-tab.is-active i { color: #6366f1; opacity: 1; }
.ca-tab i { font-size: 12px; opacity: 0.7; }

.ca-header--compact { align-items: flex-start; padding-bottom: 20px; }
.ca-header--compact .ca-title { font-size: 24px; }

/* ═══════ 페이지 헤더 ═══════ */
.ca-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 8px 4px 24px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e5e7eb;
}
.ca-title {
	font-size: 28px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
	letter-spacing: -0.4px;
}
.ca-title i { color: #6366f1; margin-right: 6px; }
.ca-subtitle {
	font-size: 14px;
	color: #64748b;
	margin: 0;
	line-height: 1.5;
}
.ca-stats {
	display: flex;
	gap: 20px;
	flex-shrink: 0;
}
.ca-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 64px;
}
.ca-stat__num {
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1;
}
.ca-stat__num--ready { color: #16a34a; }
.ca-stat__lbl {
	font-size: 11px;
	color: #94a3b8;
	font-weight: 600;
	margin-top: 4px;
	letter-spacing: 0.3px;
}

/* ═══════ 게임 메인 컨텐츠 + 난이도 서브탭 ═══════ */
.ca-game-main {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	box-shadow: 0 2px 12px -4px rgba(15,23,42,0.08);
	overflow: hidden;
}
.ca-dlevel-tabs {
	display: flex;
	gap: 0;
	background: #f8fafc;
	border-bottom: 1px solid #e5e7eb;
	padding: 12px 20px 0;
}
.ca-dlevel-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px 13px;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #64748b;
	transition: color .15s, border-color .15s;
	white-space: nowrap;
	margin-bottom: -1px;
}
.ca-dlevel-tab:hover { color: #334155; }
.ca-dlevel-tab.is-active { color: #1e293b; }
.ca-dlevel-tab[data-level="easy"].is-active   { border-bottom-color: var(--ca-easy-end); }
.ca-dlevel-tab[data-level="medium"].is-active { border-bottom-color: var(--ca-med-end); }
.ca-dlevel-tab[data-level="hard"].is-active   { border-bottom-color: var(--ca-hard-end); }
.ca-dlevel-tab__label { font-size: 13px; }
.ca-dlevel-tab__count {
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	background: #f1f5f9;
	border-radius: 10px;
	padding: 2px 7px;
}
.ca-dlevel-tab.is-active .ca-dlevel-tab__count {
	background: #e2e8f0;
	color: #475569;
}
.ca-dlevel-pane {
	display: none;
	padding: 20px 24px 32px;
}
.ca-dlevel-pane.is-active { display: block; }
.ca-dlevel-pane__desc {
	font-size: 13px;
	color: #64748b;
	margin: 0 0 18px;
}

/* ═══════ 섹션 ═══════ */
.ca-section { margin-top: 36px; }
.ca-section__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	padding: 12px 0;
}
.ca-section__title {
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 2px;
}
.ca-section__desc {
	font-size: 13px;
	color: #64748b;
	margin: 0;
}
.ca-section__count {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: #94a3b8;
	background: #f1f5f9;
	padding: 6px 12px;
	border-radius: 20px;
}

/* ═══════ 난이도 뱃지 ═══════ */
.ca-level-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 12px;
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.2px;
	box-shadow: 0 4px 10px -3px rgba(0,0,0,0.15);
}
.ca-level-badge--sm {
	min-width: 28px;
	height: 24px;
	padding: 0 8px;
	font-size: 12px;
	border-radius: 6px;
	box-shadow: none;
}
.ca-level-badge--hard   { background: linear-gradient(135deg, var(--ca-hard-start), var(--ca-hard-end)); }
.ca-level-badge--medium { background: linear-gradient(135deg, var(--ca-med-start), var(--ca-med-end)); }
.ca-level-badge--easy   { background: linear-gradient(135deg, var(--ca-easy-start), var(--ca-easy-end)); }

/* ═══════ 카드 그리드 ═══════ */
.ca-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

/* ═══════ 카드 ═══════ */
.ca-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: transform .18s, box-shadow .18s, border-color .18s;
	position: relative;
}
.ca-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -10px rgba(15,23,42,0.18);
	border-color: #cbd5e1;
}
.ca-card.is-pending { cursor: not-allowed; }
.ca-card.is-pending:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -10px rgba(15,23,42,0.12);
}

/* 카드 상단 일러스트 영역 */
.ca-card__illust {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.ca-card__illust--hard {
	background:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5), transparent 50%),
		linear-gradient(135deg, #fecaca, #fca5a5);
}
.ca-card__illust--medium {
	background:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5), transparent 50%),
		linear-gradient(135deg, #fed7aa, #fdba74);
}
.ca-card__illust--easy {
	background:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5), transparent 50%),
		linear-gradient(135deg, #bbf7d0, #86efac);
}

.ca-card__icon {
	font-size: 52px;
	color: #fff;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.12));
	transition: transform .3s cubic-bezier(.22,.8,.3,1);
}
.ca-card:hover:not(.is-pending) .ca-card__icon {
	transform: scale(1.1) rotate(-4deg);
}

/* 준비중 뱃지 (일러스트 영역 우상단) */
.ca-card__pending-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(15, 23, 42, 0.72);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	letter-spacing: 0.3px;
}

/* 카드 하단 본문 */
.ca-card__body {
	padding: 14px 16px 18px;
}
.ca-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.ca-card__cat {
	font-size: 11.5px;
	font-weight: 700;
	color: #475569;
	background: #f1f5f9;
	padding: 3px 10px;
	border-radius: 999px;
	letter-spacing: -0.2px;
}

/* 카테고리별 컬러 */
.ca-card__cat.ca-card__cat--지남력   { background: #dbeafe; color: var(--ca-cat-orient); }
.ca-card__cat.ca-card__cat--기억력   { background: #ede9fe; color: var(--ca-cat-memory); }
.ca-card__cat.ca-card__cat--주의력   { background: #fef3c7; color: #b45309; }
.ca-card__cat.ca-card__cat--시공간기능 { background: #ccfbf1; color: #0f766e; }
.ca-card__cat.ca-card__cat--집행기능 { background: #fce7f3; color: #be185d; }
.ca-card__cat.ca-card__cat--언어기능 { background: #d1fae5; color: #047857; }

.ca-card__title {
	font-size: 15.5px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
	letter-spacing: -0.3px;
	line-height: 1.35;
}

/* 준비중 상태 — 전체 디밍 */
.ca-card.is-pending .ca-card__illust { opacity: 0.7; filter: grayscale(0.25); }
.ca-card.is-pending .ca-card__title { color: #475569; }

/* ═══════ 토스트 ═══════ */
.ca-toast {
	position: fixed;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%) translateY(20px);
	background: #0f172a;
	color: #fff;
	padding: 12px 20px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 12px 32px -8px rgba(0,0,0,0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
	z-index: 9999;
	max-width: 80vw;
}
.ca-toast.is-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ═══════ 반응형 ═══════ */
@media (max-width: 768px) {
	.ca-wrap { padding: 20px 16px 60px; }
	.ca-header { flex-direction: column; align-items: flex-start; gap: 14px; }
	.ca-title { font-size: 22px; }
	.ca-subtitle { font-size: 13px; }
	.ca-stats { width: 100%; justify-content: flex-start; }
	.ca-section__head { flex-wrap: wrap; }
	.ca-section__count { margin-left: 0; }
	.ca-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
	.ca-card__icon { font-size: 40px; }
	.ca-card__body { padding: 12px 12px 14px; }
	.ca-card__title { font-size: 14px; }

	/* 탭 — 3개를 한 줄에 (글자 줄바꿈 없이) */
	.ca-tabs { display: flex; width: 100%; gap: 3px; padding: 4px; }
	.ca-tab {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		gap: 5px;
		padding: 9px 4px;
		font-size: 12px;
		white-space: nowrap;
	}
	.ca-tab i { font-size: 11px; }
	/* 학습지 출력 설명 문구 숨김 */
	.ca-ws-head__desc { display: none; }
	.ca-ws-head { margin-bottom: 12px; }
}

/* ═══════ 인지활동 계획 탭 레이아웃 (독립 스크롤) ═══════ */
.ca-plan-layout {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 24px;
	align-items: start;  /* 좌측이 우측 높이에 맞춰 늘어나지 않도록 */
}
.ca-plan-side {
	position: sticky;           /* 좌측 패널을 뷰포트에 고정 */
	top: 16px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 20px 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: calc(100vh - 32px);  /* 뷰포트 높이 이상으로 커지지 않음 */
	min-height: 0;
}
.ca-plan-side__monthnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid #f1f5f9;
}
.ca-plan-side__month {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
}
.ca-plan-side__title {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
}
.ca-plan-side__filter {
	display: flex;
	gap: 16px;
	font-size: 12.5px;
	color: #64748b;
}
.ca-plan-side__filter label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.ca-plan-side__search {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) auto;
	gap: 6px;
}
.ca-plan-side__search .ca-input { min-width: 0; }
.ca-input {
	padding: 8px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
	color: #0f172a;
	outline: none;
}
.ca-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.ca-iconbtn {
	width: 32px; height: 32px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	color: #475569;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s, border-color .15s;
}
.ca-iconbtn:hover { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
.ca-plan-side__list {
	flex: 1 1 auto;
	min-height: 0;               /* flex 자식이 overflow 하기 위한 필수값 */
	border-top: 1px solid #f1f5f9;
	padding-top: 8px;
	overflow-y: auto;
}
.ca-plan-side__empty {
	height: 100%;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #94a3b8;
}
.ca-plan-side__empty i { font-size: 36px; }
.ca-plan-side__empty p { margin: 0; font-size: 13px; }

/* 상단 필터 라인 */
.ca-plan-side__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ca-plan-side__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 20px;
	padding: 0 7px;
	background: #e0e7ff;
	color: #4338ca;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	margin-left: 4px;
}
.ca-btn-search {
	padding: 8px 10px;
	background: #334155;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
	white-space: nowrap;
}
.ca-btn-search:hover { background: #1e293b; }

/* 수급자 테이블 */
.ca-rtbl {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.ca-rtbl thead th {
	position: sticky;
	top: 0;
	background: #fff;
	padding: 8px 6px;
	font-size: 11.5px;
	font-weight: 700;
	color: #475569;
	text-align: left;
	border-bottom: 1px solid #e5e7eb;
	letter-spacing: -0.2px;
}
.ca-rtbl tbody td {
	padding: 10px 6px;
	border-bottom: 1px solid #f1f5f9;
	color: #0f172a;
}
.ca-rtbl__row {
	cursor: pointer;
	transition: background .12s;
}
.ca-rtbl__row:hover { background: #f8fafc; }
.ca-rtbl__row.is-selected { background: #eef2ff; }
.ca-rtbl__row.is-selected td { color: #4338ca; }
.ca-rtbl__row.is-g5 { background: #fef2f2; }
.ca-rtbl__row.is-g5:hover { background: #fee2e2; }
.ca-rtbl__row.is-g5.is-selected { background: #fecaca; }

.ca-rtbl__status {
	display: inline-block;
	padding: 2px 8px;
	background: #dbeafe;
	color: #1e40af;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
}
.ca-rtbl__status--hospital     { background: #fed7aa; color: #c2410c; }
.ca-rtbl__status--hold         { background: #e9d5ff; color: #7e22ce; }
.ca-rtbl__status--out_of_grade { background: #fecaca; color: #b91c1c; }
.ca-rtbl__status--deceased,
.ca-rtbl__status--terminated,
.ca-rtbl__status--other_org    { background: #e2e8f0; color: #475569; }

.ca-rtbl__name  { font-weight: 600; }
.ca-rtbl__birth { color: #64748b; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ca-rtbl__grade { color: #334155; font-weight: 700; text-align: center; width: 36px; }
.ca-rtbl__row.is-g5 .ca-rtbl__grade { color: #dc2626; }
.ca-rtbl__plan { width: 40px; text-align: center; }
.ca-rtbl__dot {
	display: inline-block;
	width: 10px; height: 10px;
	background: #ef4444;
	border-radius: 50%;
}

/* 우측 패널 — 수급자 선택 시 표시 */
.ca-plan-main__loaded {
	width: 100%;
	padding: 32px;
	align-self: flex-start;
}
.ca-plan-main__head h2 {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
}
.ca-plan-main__head h2 small {
	font-size: 12px;
	font-weight: 500;
	color: #94a3b8;
	margin-left: 6px;
}
.ca-plan-main__head p {
	font-size: 13px;
	color: #64748b;
	margin: 0 0 24px;
}
.ca-plan-main__body {
	border: 2px dashed #cbd5e1;
	border-radius: 12px;
	padding: 60px 20px;
	text-align: center;
	color: #64748b;
}
.ca-plan-main__body i { font-size: 40px; color: #cbd5e1; margin-bottom: 14px; }
.ca-plan-main__body p { margin: 0; font-size: 13.5px; }

/* ═══════ 인지활동 계획 — 우측 폼 ═══════ */
.ca-pf { display: flex; flex-direction: column; gap: 16px; }
.ca-pf-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 20px 22px;
}
.ca-pf-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.ca-pf-card__title {
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
}
.ca-pf-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ── ① 기본정보 ── */
.ca-pf-basic__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 12px;
}
.ca-pf-basic__title {
	font-size: 14px;
	font-weight: 700;
	color: #475569;
	margin: 0;
}

/* 저장 인디케이터 */
.ca-pf-saveind {
	font-size: 12px;
	font-weight: 600;
	color: #94a3b8;
	transition: color .2s, opacity .2s;
	min-height: 1em;
}
.ca-pf-saveind.is-saving { color: #f59e0b; }
.ca-pf-saveind.is-saved  { color: #10b981; }
.ca-pf-saveind.is-error  { color: #ef4444; }
.ca-pf-basic__pills {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 10px 14px;
}
.ca-pf-pill {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
}
.ca-pf-pill__sep { color: #cbd5e1; }
.ca-pf-pill__icon {
	margin-left: auto;
	width: 34px; height: 34px;
	border: none;
	background: #3b82f6;
	color: #fff;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}
.ca-pf-pill__icon:hover { background: #2563eb; }

/* ── ② 인지평가 / 학습횟수 ── */
.ca-pf-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #f1f5f9;
}
.ca-pf-row:last-child { border-bottom: none; padding-bottom: 0; }
.ca-pf-row--split { gap: 40px; }
.ca-pf-row--center { justify-content: center; padding-top: 18px; }
.ca-pf-label {
	min-width: 110px;
	font-size: 13.5px;
	font-weight: 700;
	color: #334155;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ca-pf-label i.fa-info-circle { color: #94a3b8; font-size: 13px; }
.ca-pf-field {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ca-pf-selects {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	flex: 1;
}
.ca-pf-select-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 4px 4px 4px 12px;
}
.ca-pf-select-wrap__label {
	font-size: 13px;
	color: #475569;
	font-weight: 600;
	white-space: nowrap;
}
.ca-pf-select {
	flex: 1;
	border: none;
	background: transparent;
	padding: 6px 8px;
	font-size: 13px;
	color: #0f172a;
	font-weight: 600;
	cursor: pointer;
	outline: none;
}

.ca-pf-radios {
	display: flex;
	align-items: center;
	gap: 16px;
}
.ca-pf-radios label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: #334155;
	cursor: pointer;
}
.ca-pf-radios input { accent-color: #4f46e5; }
.ca-pf-checkbox { margin-left: 8px; color: #64748b; font-size: 13px; }

/* 버튼 */
.ca-pf-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 8px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.ca-pf-btn:active { transform: translateY(1px); }
.ca-pf-btn--ghost   { background: #fff; color: #475569; border-color: #e2e8f0; }
.ca-pf-btn--ghost:hover { background: #f1f5f9; border-color: #cbd5e1; color: #0f172a; }
.ca-pf-btn--primary { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.ca-pf-btn--primary:hover { background: #e0e7ff; }
.ca-pf-btn--mint    { background: #10b981; color: #fff; border-color: #10b981; }
.ca-pf-btn--mint:hover { background: #059669; }

.ca-pf-generate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 32px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: #1e293b;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 4px 14px -4px rgba(15,23,42,0.4);
	transition: background .15s, transform .15s;
}
.ca-pf-generate:hover { background: #0f172a; transform: translateY(-1px); }

/* ── ③ 월간 계획표 ── */
.ca-pfcal {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
	table-layout: fixed;
}
.ca-pfcal th,
.ca-pfcal td {
	border: 1px solid #eef2f6;
	padding: 6px 6px;
	vertical-align: top;
	text-align: left;
}
.ca-pfcal__rowlabel {
	width: 80px;
	background: #f1f5f9;
	font-size: 11.5px;
	font-weight: 700;
	color: #475569;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	padding: 4px 6px;
	letter-spacing: -0.2px;
}
.ca-pfcal__dowhead {
	background: #f8fafc;
	font-weight: 700;
	color: #334155;
	text-align: center;
	padding: 8px 6px !important;
	font-size: 12.5px;
}
.ca-pfcal__dowhead label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.ca-pfcal__sun { color: #ef4444 !important; }
.ca-pfcal__sat { color: #2563eb !important; }

.ca-pfcal__head-row td { background: #fafbff; }
.ca-pfcal__day { text-align: center; vertical-align: middle; }
.ca-pfcal__day.is-out { background: #fafafa; }
.ca-pfcal__daylabel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #0f172a;
	cursor: pointer;
}
.ca-pfcal__daylabel input { accent-color: #4f46e5; width: 14px; height: 14px; }
.ca-pfcal__daynum { font-variant-numeric: tabular-nums; }
.ca-pfcal__daynum--out { color: #cbd5e1; }

.ca-pfcal__slot {
	min-height: 36px;
	height: 38px;
	background: #fff;
	cursor: pointer;
	transition: background .12s, box-shadow .12s;
	padding: 3px 5px !important;
}
.ca-pfcal__slot:hover:not(.is-out) {
	background: #f1f5f9;
	box-shadow: inset 0 0 0 2px #c7d2fe;
}
.ca-pfcal__slot.is-out { cursor: default; background: #fafafa; }
.ca-pfcal__slot.is-filled { background: #fff; }

/* 실행 상태: cleared(성공) / failed(실패) */
.ca-pfcal__slot.is-cleared {
	background: linear-gradient(90deg, #dcfce7 0%, #f0fdf4 100%);
	box-shadow: inset 3px 0 0 #16a34a;
}
.ca-pfcal__slot.is-cleared:hover:not(.is-out) {
	background: linear-gradient(90deg, #bbf7d0 0%, #dcfce7 100%);
	box-shadow: inset 3px 0 0 #16a34a, inset 0 0 0 2px #86efac;
}
.ca-pfcal__slot.is-failed {
	background: linear-gradient(90deg, #fee2e2 0%, #fef2f2 100%);
	box-shadow: inset 3px 0 0 #dc2626;
}
.ca-pfcal__slot.is-failed:hover:not(.is-out) {
	background: linear-gradient(90deg, #fecaca 0%, #fee2e2 100%);
	box-shadow: inset 3px 0 0 #dc2626, inset 0 0 0 2px #fca5a5;
}

/* 슬롯 내부 아이템 */
.ca-pfcal__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
	white-space: nowrap;
	max-width: 100%;
}
.ca-pfcal__item-lvl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px; height: 18px;
	border-radius: 4px;
	font-size: 10.5px;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
}
.ca-pfcal__item--easy   .ca-pfcal__item-lvl { background: #22c55e; }
.ca-pfcal__item--medium .ca-pfcal__item-lvl { background: #f97316; }
.ca-pfcal__item--hard   .ca-pfcal__item-lvl { background: #ef4444; }
.ca-pfcal__item-title {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ═══════ 슬롯 액션 팝오버 ═══════ */
.ca-pf-pop {
	position: absolute;
	z-index: 9997;
	display: inline-flex;
	gap: 4px;
	padding: 6px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 10px 28px -6px rgba(15,23,42,0.22);
	animation: caPfPopIn .12s ease-out;
}
.ca-pf-pop[hidden] { display: none !important; }
@keyframes caPfPopIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ca-pf-pop__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 700;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: #334155;
	cursor: pointer;
	white-space: nowrap;
	transition: background .1s, color .1s;
}
.ca-pf-pop__btn:hover { background: #f1f5f9; color: #0f172a; }
.ca-pf-pop__btn--play { background: #eef2ff; color: #4338ca; }
.ca-pf-pop__btn--play:hover { background: #e0e7ff; color: #312e81; }
.ca-pf-pop__btn--del  { color: #dc2626; }
.ca-pf-pop__btn--del:hover { background: #fee2e2; color: #991b1b; }

/* ═══════ 슬롯 편집 모달 ═══════ */
.ca-pf-modal {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.ca-pf-modal[hidden] { display: none !important; }
.ca-pf-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	backdrop-filter: blur(2px);
}
.ca-pf-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: 14px;
	width: 100%;
	max-width: 460px;
	box-shadow: 0 20px 60px -10px rgba(0,0,0,0.35);
	overflow: hidden;
	animation: caPfModalIn .2s ease-out;
}
@keyframes caPfModalIn {
	from { opacity: 0; transform: translateY(-8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.ca-pf-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #f1f5f9;
}
.ca-pf-modal__head h3 {
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
}
.ca-pf-modal__close {
	width: 30px; height: 30px;
	border: none;
	background: transparent;
	color: #94a3b8;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	transition: background .15s, color .15s;
}
.ca-pf-modal__close:hover { background: #f1f5f9; color: #0f172a; }
.ca-pf-modal__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ca-pf-mrow {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ca-pf-mlabel {
	font-size: 12.5px;
	font-weight: 700;
	color: #475569;
}
.ca-pf-mradios {
	display: flex;
	gap: 14px;
}
.ca-pf-mradios label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	color: #334155;
	cursor: pointer;
}
.ca-pf-mradios input { accent-color: #4f46e5; }
.ca-pf-modal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-top: 1px solid #f1f5f9;
	background: #f8fafc;
}
.ca-pf-modal__foot-right {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

/* 월간 계획표 반응형 (좁은 화면) */
@media (max-width: 1100px) {
	.ca-pfcal { font-size: 11.5px; }
	.ca-pfcal__rowlabel { width: 64px; font-size: 11px; padding: 4px 4px; }
}

.ca-plan-main {
	background: transparent;
	border: none;
	border-radius: 0;
	display: block;
	overflow: visible;
	min-width: 0;                /* grid 아이템이 내용에 따라 과팽창 방지 */
}
.ca-plan-main__empty {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	min-height: 560px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px;
	text-align: center;
	color: #64748b;
}
.ca-plan-main__empty i { font-size: 48px; color: #cbd5e1; margin-bottom: 16px; }
.ca-plan-main__empty h3 { font-size: 18px; color: #0f172a; margin: 0 0 8px; font-weight: 700; }
.ca-plan-main__empty p { margin: 0; font-size: 14px; }

/* ═══════ 학습지 출력 탭 빈 상태 ═══════ */
.ca-ws-empty {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 80px 40px;
	text-align: center;
}
.ca-ws-empty__icon {
	width: 96px; height: 96px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 42px;
	color: #4338ca;
}
.ca-ws-empty__title {
	font-size: 22px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 12px;
	letter-spacing: -0.3px;
}
.ca-ws-empty__desc {
	font-size: 14px;
	color: #64748b;
	margin: 0 0 28px;
	line-height: 1.7;
}
.ca-ws-empty__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	background: #4f46e5;
	color: #fff;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background .15s, transform .15s;
}
.ca-ws-empty__cta:hover { background: #4338ca; transform: translateY(-1px); }

/* ═══════ 학습지 탭 — 카탈로그 카드 그리드 ═══════ */
.ca-ws-head { margin-bottom: 18px; }
.ca-ws-head__title {
	margin: 0 0 6px 0;
	font-size: 18px; font-weight: 700;
	color: var(--ca-text);
}
.ca-ws-head__title i { color: var(--ca-violet, #6366f1); margin-right: 6px; }
.ca-ws-head__desc {
	margin: 0;
	font-size: 13.5px;
	color: var(--ca-text-soft, #6b7280);
	line-height: 1.55;
}

.ca-ws-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.ca-ws-card {
	position: relative;
	display: flex; flex-direction: column;
	padding: 18px 18px 16px;
	background: var(--ca-bg-elevated, #fff);
	border: 1px solid var(--ca-border, #e1e4e8);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ca-ws-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0,0,0,0.08);
	border-color: var(--ca-violet, #6366f1);
}
.ca-ws-card__icon {
	width: 48px; height: 48px;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px;
	margin-bottom: 10px;
	background: rgba(99,102,241,0.10);
	color: #6366f1;
}
.ca-ws-card__cat {
	display: inline-block;
	font-size: 11.5px; font-weight: 700;
	color: #6366f1;
	letter-spacing: .3px;
	margin-bottom: 4px;
}
.ca-ws-card__title {
	font-size: 16px; font-weight: 700;
	color: var(--ca-text, #1f1f1f);
	margin-bottom: 6px;
	line-height: 1.35;
}
.ca-ws-card__desc {
	font-size: 12.5px;
	color: var(--ca-text-soft, #6b7280);
	line-height: 1.5;
	margin-bottom: 14px;
	flex: 1;
}
.ca-ws-card__cta {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 600;
	color: #6366f1;
}
.ca-ws-card__cta i { font-size: 11px; }

/* 카테고리 톤 */
.ca-ws-card--orientation .ca-ws-card__icon { background: rgba(59,130,246,0.10);  color: #3b82f6; }
.ca-ws-card--orientation .ca-ws-card__cat,
.ca-ws-card--orientation .ca-ws-card__cta { color: #3b82f6; }
.ca-ws-card--orientation:hover { border-color: #3b82f6; }

.ca-ws-card--attention .ca-ws-card__icon { background: rgba(245,158,11,0.10);  color: #f59e0b; }
.ca-ws-card--attention .ca-ws-card__cat,
.ca-ws-card--attention .ca-ws-card__cta { color: #f59e0b; }
.ca-ws-card--attention:hover { border-color: #f59e0b; }

.ca-ws-card--visuo .ca-ws-card__icon { background: rgba(16,185,129,0.10);  color: #10b981; }
.ca-ws-card--visuo .ca-ws-card__cat,
.ca-ws-card--visuo .ca-ws-card__cta { color: #10b981; }
.ca-ws-card--visuo:hover { border-color: #10b981; }

.ca-ws-card--executive .ca-ws-card__icon { background: rgba(139,92,246,0.10);  color: #8b5cf6; }
.ca-ws-card--executive .ca-ws-card__cat,
.ca-ws-card--executive .ca-ws-card__cta { color: #8b5cf6; }
.ca-ws-card--executive:hover { border-color: #8b5cf6; }

.ca-ws-card--memory .ca-ws-card__icon { background: rgba(236,72,153,0.10);  color: #ec4899; }
.ca-ws-card--memory .ca-ws-card__cat,
.ca-ws-card--memory .ca-ws-card__cta { color: #ec4899; }
.ca-ws-card--memory:hover { border-color: #ec4899; }

.ca-ws-card--language .ca-ws-card__icon { background: rgba(14,165,233,0.10);  color: #0ea5e9; }
.ca-ws-card--language .ca-ws-card__cat,
.ca-ws-card--language .ca-ws-card__cta { color: #0ea5e9; }
.ca-ws-card--language:hover { border-color: #0ea5e9; }

.ca-ws-card--coloring .ca-ws-card__icon { background: rgba(244,114,182,0.10);  color: #f472b6; }
.ca-ws-card--coloring .ca-ws-card__cat,
.ca-ws-card--coloring .ca-ws-card__cta { color: #f472b6; }
.ca-ws-card--coloring:hover { border-color: #f472b6; }

.ca-ws-card--dancheong .ca-ws-card__icon { background: rgba(217,119,6,0.10);  color: #d97706; }
.ca-ws-card--dancheong .ca-ws-card__cat,
.ca-ws-card--dancheong .ca-ws-card__cta { color: #d97706; }
.ca-ws-card--dancheong:hover { border-color: #d97706; }

.ca-ws-card--mosaic .ca-ws-card__icon { background: rgba(6,182,212,0.10);  color: #06b6d4; }
.ca-ws-card--mosaic .ca-ws-card__cat,
.ca-ws-card--mosaic .ca-ws-card__cta { color: #06b6d4; }
.ca-ws-card--mosaic:hover { border-color: #06b6d4; }

.ca-ws-card--paisley .ca-ws-card__icon { background: rgba(167,139,250,0.10);  color: #a78bfa; }
.ca-ws-card--paisley .ca-ws-card__cat,
.ca-ws-card--paisley .ca-ws-card__cta { color: #a78bfa; }
.ca-ws-card--paisley:hover { border-color: #a78bfa; }

.ca-ws-card--tracing .ca-ws-card__icon { background: rgba(251,146,60,0.10);  color: #fb923c; }
.ca-ws-card--tracing .ca-ws-card__cat,
.ca-ws-card--tracing .ca-ws-card__cta { color: #fb923c; }
.ca-ws-card--tracing:hover { border-color: #fb923c; }

.ca-ws-card--animals .ca-ws-card__icon { background: rgba(132,204,22,0.10);  color: #84cc16; }
.ca-ws-card--animals .ca-ws-card__cat,
.ca-ws-card--animals .ca-ws-card__cta { color: #84cc16; }
.ca-ws-card--animals:hover { border-color: #84cc16; }

/* ─── 추가 학습지 색상 토큰 (7종) ─── */
.ca-ws-card--clock .ca-ws-card__icon { background: rgba(239,68,68,0.10);    color: #ef4444; }
.ca-ws-card--clock .ca-ws-card__cat,
.ca-ws-card--clock .ca-ws-card__cta { color: #ef4444; }
.ca-ws-card--clock:hover { border-color: #ef4444; }

.ca-ws-card--proverbs .ca-ws-card__icon { background: rgba(79,70,229,0.10); color: #4f46e5; }
.ca-ws-card--proverbs .ca-ws-card__cat,
.ca-ws-card--proverbs .ca-ws-card__cta { color: #4f46e5; }
.ca-ws-card--proverbs:hover { border-color: #4f46e5; }

.ca-ws-card--reminiscence .ca-ws-card__icon { background: rgba(244,63,94,0.10); color: #f43f5e; }
.ca-ws-card--reminiscence .ca-ws-card__cat,
.ca-ws-card--reminiscence .ca-ws-card__cta { color: #f43f5e; }
.ca-ws-card--reminiscence:hover { border-color: #f43f5e; }

.ca-ws-card--maze .ca-ws-card__icon { background: rgba(20,184,166,0.10);   color: #14b8a6; }
.ca-ws-card--maze .ca-ws-card__cat,
.ca-ws-card--maze .ca-ws-card__cta { color: #14b8a6; }
.ca-ws-card--maze:hover { border-color: #14b8a6; }

.ca-ws-card--hidden .ca-ws-card__icon { background: rgba(234,88,12,0.10);  color: #ea580c; }
.ca-ws-card--hidden .ca-ws-card__cat,
.ca-ws-card--hidden .ca-ws-card__cta { color: #ea580c; }
.ca-ws-card--hidden:hover { border-color: #ea580c; }

.ca-ws-card--dots .ca-ws-card__icon { background: rgba(168,85,247,0.10);   color: #a855f7; }
.ca-ws-card--dots .ca-ws-card__cat,
.ca-ws-card--dots .ca-ws-card__cta { color: #a855f7; }
.ca-ws-card--dots:hover { border-color: #a855f7; }

/* ─── 추가 색칠 학습지 색상 토큰 (루돌프·가을·여름·배경) ─── */
.ca-ws-card--rudolph .ca-ws-card__icon { background: rgba(220,38,38,0.10);  color: #dc2626; }
.ca-ws-card--rudolph .ca-ws-card__cat,
.ca-ws-card--rudolph .ca-ws-card__cta { color: #dc2626; }
.ca-ws-card--rudolph:hover { border-color: #dc2626; }

.ca-ws-card--fall .ca-ws-card__icon { background: rgba(217,119,6,0.10);   color: #d97706; }
.ca-ws-card--fall .ca-ws-card__cat,
.ca-ws-card--fall .ca-ws-card__cta { color: #d97706; }
.ca-ws-card--fall:hover { border-color: #d97706; }

.ca-ws-card--summer .ca-ws-card__icon { background: rgba(2,132,199,0.10);  color: #0284c7; }
.ca-ws-card--summer .ca-ws-card__cat,
.ca-ws-card--summer .ca-ws-card__cta { color: #0284c7; }
.ca-ws-card--summer:hover { border-color: #0284c7; }

.ca-ws-card--scene .ca-ws-card__icon { background: rgba(13,148,136,0.10);  color: #0d9488; }
.ca-ws-card--scene .ca-ws-card__cat,
.ca-ws-card--scene .ca-ws-card__cta { color: #0d9488; }
.ca-ws-card--scene:hover { border-color: #0d9488; }

.ca-ws-card--picnic .ca-ws-card__icon { background: rgba(22,163,74,0.10);  color: #16a34a; }
.ca-ws-card--picnic .ca-ws-card__cat,
.ca-ws-card--picnic .ca-ws-card__cta { color: #16a34a; }
.ca-ws-card--picnic:hover { border-color: #16a34a; }

.ca-ws-card--village .ca-ws-card__icon { background: rgba(234,88,12,0.10);  color: #ea580c; }
.ca-ws-card--village .ca-ws-card__cat,
.ca-ws-card--village .ca-ws-card__cta { color: #ea580c; }
.ca-ws-card--village:hover { border-color: #ea580c; }

.ca-ws-card--garden .ca-ws-card__icon { background: rgba(219,39,119,0.10);  color: #db2777; }
.ca-ws-card--garden .ca-ws-card__cat,
.ca-ws-card--garden .ca-ws-card__cta { color: #db2777; }
.ca-ws-card--garden:hover { border-color: #db2777; }

.ca-ws-card--lighthouse .ca-ws-card__icon { background: rgba(8,145,178,0.10);  color: #0891b2; }
.ca-ws-card--lighthouse .ca-ws-card__cat,
.ca-ws-card--lighthouse .ca-ws-card__cta { color: #0891b2; }
.ca-ws-card--lighthouse:hover { border-color: #0891b2; }

.ca-ws-card--train .ca-ws-card__icon { background: rgba(124,58,237,0.10);  color: #7c3aed; }
.ca-ws-card--train .ca-ws-card__cat,
.ca-ws-card--train .ca-ws-card__cta { color: #7c3aed; }
.ca-ws-card--train:hover { border-color: #7c3aed; }

/* ═══════ 계획 탭 반응형 ═══════ */
@media (max-width: 900px) {
	.ca-plan-layout { grid-template-columns: 1fr; }
	.ca-plan-main { min-height: 320px; }
}

/* ═══════════════════════════════════════════════════════════
   체험회원 페이월 모달 — 인지활동 액션 차단 안내
   ═══════════════════════════════════════════════════════════ */
.ca-paywall {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
}
.ca-paywall.is-open { display: flex; }
.ca-paywall__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
}
.ca-paywall__dialog {
	position: relative;
	background: #fff;
	border-radius: 20px;
	max-width: 460px;
	width: 100%;
	padding: 30px 26px 22px;
	box-shadow: 0 24px 64px rgba(15, 23, 42, 0.30), 0 0 0 1px rgba(15, 23, 42, 0.05);
	animation: caPaywallIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes caPaywallIn {
	from { opacity: 0; transform: scale(0.96) translateY(10px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ca-paywall__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 30px;
	height: 30px;
	background: transparent;
	border: none;
	border-radius: 8px;
	color: #94a3b8;
	cursor: pointer;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 120ms, color 120ms;
}
.ca-paywall__close:hover { background: #f1f5f9; color: #0f172a; }

.ca-paywall__hero {
	text-align: center;
	margin-bottom: 22px;
}
.ca-paywall__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	color: #fff;
	font-size: 22px;
	box-shadow: 0 8px 22px rgba(245, 158, 11, 0.30);
}
.ca-paywall__title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
}
.ca-paywall__sub {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: #475569;
}
.ca-paywall__sub strong { color: #d97706; font-weight: 700; }

.ca-paywall__actions {
	display: flex;
	gap: 8px;
}
.ca-paywall__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 14px;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: background 140ms, color 140ms, transform 140ms;
}
.ca-paywall__btn--primary {
	background: #6366f1;
	color: #fff;
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}
.ca-paywall__btn--primary:hover {
	background: #4f46e5;
	transform: translateY(-1px);
}
.ca-paywall__btn--ghost {
	background: #f1f5f9;
	color: #475569;
}
.ca-paywall__btn--ghost:hover { background: #e2e8f0; color: #0f172a; }

@media (max-width: 480px) {
	.ca-paywall__dialog { padding: 26px 20px 18px; }
	.ca-paywall__actions { flex-direction: column; }
}

[data-theme="dark"] .ca-paywall__dialog {
	background: #1e293b;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .ca-paywall__close { color: #94a3b8; }
[data-theme="dark"] .ca-paywall__close:hover { background: #334155; color: #f1f5f9; }
[data-theme="dark"] .ca-paywall__title { color: #f1f5f9; }
[data-theme="dark"] .ca-paywall__sub { color: #cbd5e1; }
[data-theme="dark"] .ca-paywall__btn--ghost { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .ca-paywall__btn--ghost:hover { background: #475569; color: #f1f5f9; }