/* 공통 컴포넌트 스타일 - CSS 변수 기반 */

/* 버튼 스타일 */
.btn-primary {
	font-family: var(--font-family-primary);
	background-color: var(--color-button-primary-bg);
	color: var(--color-button-primary-text);
	border: none;
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	cursor: pointer;
	transition: var(--transition-fast);
	text-decoration: none;
	display: inline-block;
}

.btn-primary:hover {
	background-color: var(--color-button-primary-hover);
	color: var(--color-button-primary-hover-text);
	transform: translateY(-1px);
	box-shadow: var(--shadow-button-hover);
}

.btn-secondary {
	background-color: var(--color-button-secondary-bg);
	color: var(--color-button-secondary-text);
	border: none;
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: var(--transition-fast);
}

.btn-close {
	background: var(--color-button-close-bg);
	border: none;
	color: var(--color-button-close-text);
	font-size: var(--font-size-xl);
	cursor: pointer;
	padding: var(--spacing-xs);
	border-radius: var(--radius-sm);
	transition: var(--transition-fast);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.btn-close:hover {
	background-color: var(--color-button-close-hover-bg);
	color: var(--color-button-close-hover-text);
}

/* 카드/패널 스타일 */
.card {
	background-color: var(--color-bg-card);
	border: 1px solid var(--color-border-primary);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-card);
	transition: var(--transition-fast);
}

.card:hover {
	background-color: var(--color-bg-hover);
}

.card-header {
	border-bottom: 1px solid var(--color-border-primary);
	padding-bottom: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.card-title {
	color: var(--color-text-accent);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	margin: 0;
}

.card-content {
	color: var(--color-text-primary);
}

/* 모달 스타일 */
.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-modal-backdrop);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	backdrop-filter: blur(4px);
	animation: fadeIn var(--transition-normal);
}

.modal-container {
	background-color: var(--color-bg-modal);
	border-radius: var(--radius-xl);
	box-shadow: var(--color-modal-shadow);
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: slideIn var(--transition-normal);
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-lg);
	border-bottom: 1px solid var(--color-modal-header-border);
	background: var(--gradient-header);
}

.modal-title {
	color: var(--color-text-accent);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.modal-content {
	flex: 1;
	overflow-y: auto;
	padding: var(--spacing-lg);
}

.modal-footer {
	padding: var(--spacing-lg);
	border-top: 1px solid var(--color-modal-header-border);
	display: flex;
	justify-content: flex-end;
	background-color: var(--color-modal-footer-bg);
}

/* 상태별 스타일 */
.state-success {
	background-color: var(--color-state-success-bg);
	border: 1px solid var(--color-state-success-border);
	color: var(--color-accent-secondary);
}

.state-warning {
	background-color: var(--color-state-warning-bg);
	border: 1px solid var(--color-state-warning-border);
	color: var(--color-accent-warning);
}

.state-error {
	background-color: var(--color-state-error-bg);
	border: 1px solid var(--color-state-error-border);
	color: var(--color-accent-error);
}

/* 텍스트 스타일 */
.text-primary {
	font-family: var(--font-family-primary);
	color: var(--color-text-primary);
	font-weight: var(--font-weight-semibold);
}

.text-secondary {
	font-family: var(--font-family-primary);
	color: var(--color-text-secondary);
	font-weight: var(--font-weight-normal);
}

.text-accent {
	font-family: var(--font-family-primary);
	color: var(--color-text-accent);
	font-weight: var(--font-weight-semibold);
}

.text-label {
	font-family: var(--font-family-primary);
	color: var(--color-text-label);
	font-weight: var(--font-weight-semibold);
}

/* 배경 스타일 */
.bg-primary {
	background-color: var(--color-bg-primary);
}

.bg-secondary {
	background-color: var(--color-bg-secondary);
}

.bg-card {
	background-color: var(--color-bg-card);
}

/* 경계선 스타일 */
.border-primary {
	border: 1px solid var(--color-border-primary);
}

.border-accent {
	border: 1px solid var(--color-border-accent);
}

/* 애니메이션 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}