@charset "UTF-8";

/* 파일 목적: 책임 있는 도박 페이지 스타일을 관리한다. */

/* ============================================
   안전 수칙 섹션
   ============================================ */

.safety-rules-section {
	padding: var(--space-section-md) 0 var(--space-section-sm) 0;
}

/* ============================================
   자가 진단 섹션
   ============================================ */

.C-assessment {
	margin-top: var(--space-3xl-compact);
}

/* ============================================
   진단 카드 그리드
   ============================================ */

/* ----- 진단 카드 목록 ----- */
.C-assessment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--gap-lg);
	margin-top: var(--space-3xl-compact);
}

.C-assessment-item {
	background: var(--ui-surface-card);
	border: 1px solid var(--ui-border-subtle);
	border-radius: var(--radius-md);
	padding: var(--grid-card-pad-desktop);
	transition: all var(--transition-slow);
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
	box-shadow: none;
}

.C-assessment-item:hover {
	transform: translateY(-10px);
	box-shadow: 0 32px 64px -16px var(--shadow-md);
}

.C-assessment-header {
	display: flex;
	align-items: center;
	gap: var(--gap-sm);
}

.C-assessment-number {
	font-family: var(--font-display);
	font-size: var(--font-xl);
	font-weight: 800;
	color: var(--brand-primary);

	opacity: 0.8;
}

.C-assessment-title {
	font-size: var(--font-md-plus);
	font-weight: 700;
	color: var(--color-text-strong);

	margin: 0;
}

.C-assessment-desc {
	font-size: var(--font-base);
	color: var(--text-muted);

	line-height: 1.6;
	margin: 0;
}

/* ============================================
   경고 안내 박스
   ============================================ */

/* ----- 경고 안내 ----- */
.C-assessment-warning {
	margin-top: var(--space-section-sm);
	background: var(--ui-surface-card);

	border: 1px solid var(--ui-border-subtle);
	border-radius: var(--radius-card);
	padding: var(--space-2xl-compact) var(--space-3xl-compact);
	box-shadow: 0 10px 40px -10px var(--shadow-sm);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.C-assessment-warning h3 {
	font-family: var(--font-display);
	font-size: var(--font-xl);
	color: var(--text-display);
	margin-bottom: var(--space-sm);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-sm);
}

.C-assessment-warning h3 i {
	font-size: var(--font-3xl);
	color: var(--accent-danger);

}

.C-assessment-warning p {
	font-size: var(--font-md-plus);
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0 auto;
	max-width: 800px;
}

/* ============================================
   규칙 카드 오버라이드
   ============================================ */

.trend-report-grid .trend-report-card:nth-child(3) .trend-report-icon {
	background: var(--surface-danger);
	color: var(--accent-danger);
}

/* GRID_CSS: border-color hover 제거 */

.trend-report-grid .trend-report-card:nth-child(3):hover .trend-report-icon {
	background: var(--accent-danger);
	color: var(--ui-surface-card);
}

.trend-report-grid .trend-report-card:nth-child(4) .trend-report-icon {
	background: hsl(250 100.0% 97.6%);
	color: var(--accent-purple);
}

/* GRID_CSS: border-color hover 제거 */

.trend-report-grid .trend-report-card:nth-child(4):hover .trend-report-icon {
	background: var(--accent-purple);
	color: var(--ui-surface-card);
}

.trend-report-grid .trend-report-card:nth-child(5) .trend-report-icon {
	background: hsl(183 100.0% 96.3%);
	color: var(--accent-info);
}

/* GRID_CSS: border-color hover 제거 */

.trend-report-grid .trend-report-card:nth-child(5):hover .trend-report-icon {
	background: var(--accent-info);
	color: var(--ui-surface-card);
}

.trend-report-grid .trend-report-card:nth-child(6) .trend-report-icon {
	background: hsl(48 100.0% 96.1%);
	color: var(--accent-warning);
}

/* GRID_CSS: border-color hover 제거 */

.trend-report-grid .trend-report-card:nth-child(6):hover .trend-report-icon {
	background: var(--accent-warning);
	color: var(--ui-surface-card);
}

.C-safety-title {
	font-size: var(--font-lg);
	font-weight: 700;
	margin-bottom: var(--space-xs);
	color: var(--text-display);
}

.C-safety-desc {
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: var(--space-sm);
}

.C-safety-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap-xs);
	font-size: var(--font-base-sm);
	color: var(--color-slate);
}

.C-safety-item {
	display: flex;
	gap: var(--gap-sm);
	align-items: center;
}

.safety-check-icon {
	font-weight: bold;
}

.trend-report-grid .trend-report-card:nth-child(1) .safety-check-icon {
	color: var(--accent-primary-deep);
}

.trend-report-grid .trend-report-card:nth-child(2) .safety-check-icon {
	color: var(--accent-success);
}

.trend-report-grid .trend-report-card:nth-child(3) .safety-check-icon {
	color: var(--accent-danger);
}

.trend-report-grid .trend-report-card:nth-child(4) .safety-check-icon {
	color: var(--accent-purple);
}

.trend-report-grid .trend-report-card:nth-child(5) .safety-check-icon {
	color: var(--accent-info);
}

.trend-report-grid .trend-report-card:nth-child(6) .safety-check-icon {
	color: var(--accent-highlight);
}

/* ============================================
   도움 요청 섹션
   ============================================ */

.help-section {
	padding: var(--space-3xl) 0 var(--space-section-sm) 0;
}

/* ----- 도움 요청 박스 ----- */
.C-help-cta {
	background: linear-gradient(135deg, var(--color-text-strong) 0%, var(--text-display-color) 100%);
	border-radius: var(--radius-lg);
	padding: var(--space-section-sm) var(--space-2xl-compact);
	text-align: center;
	color: var(--color-bg-soft);
	position: relative;
	overflow: hidden;
}

.C-help-cta .help-icon {
	font-size: var(--font-6xl);
	color: var(--brand-primary);

	margin-bottom: var(--space-lg-compact);
	display: inline-block;
}

.C-help-title {
	font-size: var(--font-3xl);
	font-weight: 800;
	margin-bottom: var(--space-sm);
	color: var(--ui-surface-card);
}

.C-help-desc {
	font-size: var(--font-md-plus);
	color: var(--color-slate-light);

	margin-bottom: var(--space-2xl-compact);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.C-help-buttons {
	display: flex;
	justify-content: center;
	gap: var(--gap-md);
	flex-wrap: wrap;
}

.C-help-btn--primary {
	background: var(--brand-primary);
	color: var(--ui-surface-card);
	font-weight: 600;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	transition: var(--transition-all-a);
}

.C-help-btn--primary:hover {
	transform: translateY(-2px);
}

.C-help-btn--secondary {
	background: var(--footer-border-color);
	color: var(--ui-surface-card);
	font-weight: 600;
	padding: var(--space-sm) var(--space-lg);
	border-radius: var(--radius-sm);
	border: 1px solid var(--overlay-white);
	display: inline-flex;
	align-items: center;
	gap: var(--gap-sm);
	transition: var(--transition-all-a);
}

.C-help-btn--secondary:hover {
	background: var(--overlay-white);
	transform: translateY(-2px);
}

/* ============================================
   반응형 규칙
   ============================================ */

@media (max-width: 600px) {

	.C-assessment {
		margin-top: 0;
	}

	.C-assessment-grid {
		gap: var(--gap-md);
	}

	.C-assessment-item {
		padding: var(--grid-card-pad-mobile);
	}

	.C-assessment-item:hover {
		transform: none !important;
		box-shadow: none !important;
	}

	.C-assessment-warning {
		margin-top: var(--space-lg-compact);
		padding: var(--space-xl-compact);
	}

	.C-assessment-warning h3 {
		font-size: var(--font-lg);
	}

	.C-assessment-warning p {
		font-size: var(--font-base);
	}

	.C-help-cta {
		padding: var(--space-2xl-compact) var(--space-xl-compact);
	}
}