/* 
 * 성경 타자 통독 - 디자인 시스템
 * 일관된 시각적 경험을 위한 핵심 디자인 요소
 */

:root {
  /* 색상 팔레트 */
  --primary: #667eea;
  --primary-dark: #5a6fd8;
  --primary-light: #c3cbfa;
  --primary-bg: #f0f5ff;
  
  --secondary: #764ba2;
  --secondary-dark: #613c8f;
  --secondary-light: #d8bff2;
  --secondary-bg: #f9f4ff;
  
  --accent: #ff9f43; /* 강조색 */
  --accent-dark: #f58c22;
  --accent-light: #ffebd1;
  
  --success: #48bb78;
  --error: #e53e3e;
  --warning: #f6ad55;
  --info: #4299e1;
  
  --gray-100: #f7fafc;
  --gray-200: #edf2f7;
  --gray-300: #e2e8f0;
  --gray-400: #cbd5e0;
  --gray-500: #a0aec0;
  --gray-600: #718096;
  --gray-700: #4a5568;
  --gray-800: #2d3748;
  --gray-900: #1a202c;
  
  /* 그래디언트 */
  --primary-gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --secondary-gradient: linear-gradient(135deg, var(--secondary-light) 0%, var(--primary-light) 100%);
  --header-gradient: linear-gradient(to right, var(--primary) 0%, var(--secondary) 100%);
  --accent-gradient: linear-gradient(135deg, var(--accent) 0%, #ffbe76 100%);
  
  /* 타이포그래피 */
  --font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  
  /* 스페이싱 시스템 */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  
  /* 테두리 */
  --border-radius-sm: 0.25rem;  /* 4px */
  --border-radius-md: 0.5rem;   /* 8px */
  --border-radius-lg: 0.75rem;  /* 12px */
  --border-radius-xl: 1rem;     /* 16px */
  --border-radius-full: 9999px;
  
  /* 그림자 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 15px 25px rgba(0, 0, 0, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-focus: 0 0 0 3px rgba(102, 126, 234, 0.25);
  
  /* 트랜지션 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* 컨테이너 */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  
  /* z-index */
  --z-drawer: 30;
  --z-dropdown: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* ========== 기본 리셋 ========== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--gray-800);
  background: var(--gray-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--primary-dark);
}

img {
  max-width: 100%;
  height: auto;
}

/* ========== 타이포그래피 ========== */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--space-md);
  line-height: 1.3;
  font-weight: 700;
  color: var(--gray-900);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-md);
}

p {
  margin-bottom: var(--space-md);
}

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }

.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }

/* ========== 컨테이너 ========== */
.container {
  width: 100%;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* ========== 그리드 ========== */
.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ========== 플렉스 ========== */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1 1 0%;
}

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ========== 여백 ========== */
.m-0 { margin: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-xl { margin-left: var(--space-xl); }

.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }

.mx-auto { margin-left: auto; margin-right: auto; }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* ========== 배경색 ========== */
.bg-primary { background-color: var(--primary); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-primary-bg { background-color: var(--primary-bg); }

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

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

.bg-success { background-color: var(--success); }
.bg-error { background-color: var(--error); }
.bg-warning { background-color: var(--warning); }
.bg-info { background-color: var(--info); }

.bg-white { background-color: white; }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }

.bg-gradient-primary { background: var(--primary-gradient); }
.bg-gradient-secondary { background: var(--secondary-gradient); }
.bg-gradient-accent { background: var(--accent-gradient); }

/* ========== 카드 ========== */
.card {
  background-color: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--gray-200);
}

.card-body {
  padding: var(--space-lg);
}

.card-footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--gray-200);
}

/* ========== 버튼 ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--border-radius-full);
  font-weight: 500;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-size-md);
}

.btn:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-lg);
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
  color: white;
}

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

.btn-secondary:hover {
  background: var(--secondary-dark);
  color: white;
}

.btn-accent {
  background: var(--accent);
  color: white;
}

.btn-accent:hover {
  background: var(--accent-dark);
  color: white;
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: white;
}

.btn-outline-secondary {
  background: transparent;
  border-color: var(--secondary);
  color: var(--secondary);
}

.btn-outline-secondary:hover {
  background: var(--secondary);
  color: white;
}

.btn-outline-accent {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.btn-outline-accent:hover {
  background: var(--accent);
  color: white;
}

.btn-gradient {
  background: var(--primary-gradient);
  color: white;
  border: none;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-dark) 100%);
  color: white;
}

.btn-white {
  background: white;
  color: var(--gray-800);
  border-color: var(--gray-300);
}

.btn-white:hover {
  background: var(--gray-100);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--border-radius-full);
}

.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border-radius: 0;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--border-radius-md);
  border-bottom-left-radius: var(--border-radius-md);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
}

/* ========== 폼 요소 ========== */
.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
  color: var(--gray-700);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--gray-700);
  background-color: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.form-control::placeholder {
  color: var(--gray-500);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--gray-100);
  opacity: 1;
}

.form-select {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--gray-700);
  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 1.25rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-md);
  appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select:focus {
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.form-check {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.form-check-input {
  margin-right: var(--space-xs);
}

.form-check-label {
  margin-bottom: 0;
}

/* ========== 배지 ========== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--border-radius-full);
}

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

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

.badge-accent {
  background-color: var(--accent-light);
  color: var(--accent-dark);
}

.badge-success {
  background-color: rgba(72, 187, 120, 0.1);
  color: var(--success);
}

.badge-error {
  background-color: rgba(229, 62, 62, 0.1);
  color: var(--error);
}

.badge-warning {
  background-color: rgba(246, 173, 85, 0.1);
  color: var(--warning);
}

.badge-info {
  background-color: rgba(66, 153, 225, 0.1);
  color: var(--info);
}

/* ========== 경고 및 메시지 ========== */
.alert {
  position: relative;
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  border-radius: var(--border-radius-md);
  border-left: 4px solid transparent;
}

.alert-primary {
  background-color: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary-dark);
}

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

.alert-success {
  background-color: rgba(72, 187, 120, 0.1);
  border-color: var(--success);
  color: var(--success);
}

.alert-error {
  background-color: rgba(229, 62, 62, 0.1);
  border-color: var(--error);
  color: var(--error);
}

.alert-warning {
  background-color: rgba(246, 173, 85, 0.1);
  border-color: var(--warning);
  color: var(--warning);
}

.alert-info {
  background-color: rgba(66, 153, 225, 0.1);
  border-color: var(--info);
  color: var(--info);
}

/* ========== 아이콘 ========== */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

.icon-sm {
  font-size: 1rem;
}

.icon-md {
  font-size: 1.25rem;
}

.icon-lg {
  font-size: 1.5rem;
}

.icon-xl {
  font-size: 2rem;
}

/* ========== 프로그레스 바 ========== */
.progress {
  height: 0.5rem;
  background-color: var(--gray-200);
  border-radius: var(--border-radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: var(--primary);
  border-radius: var(--border-radius-full);
  transition: width var(--transition-normal);
}

.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-bar-gradient {
  background: var(--primary-gradient);
}

/* ========== 테이블 ========== */
.table {
  width: 100%;
  margin-bottom: var(--space-md);
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
}

.table th {
  font-weight: 600;
  color: var(--gray-700);
  background-color: var(--gray-100);
}

.table-hover tbody tr:hover {
  background-color: var(--gray-100);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--gray-100);
}

.table-bordered {
  border: 1px solid var(--gray-200);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--gray-200);
}

/* ========== 네비게이션 ========== */
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-tabs {
  border-bottom: 1px solid var(--gray-200);
}

.nav-tabs .nav-link {
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: var(--border-radius-md);
  border-top-right-radius: var(--border-radius-md);
}

.nav-tabs .nav-link:hover {
  border-color: var(--gray-200) var(--gray-200) var(--gray-200);
}

.nav-tabs .nav-link.active {
  color: var(--primary);
  background-color: white;
  border-color: var(--gray-200) var(--gray-200) white;
}

.nav-pills .nav-link {
  border-radius: var(--border-radius-md);
}

.nav-pills .nav-link.active {
  color: white;
  background-color: var(--primary);
}

/* ========== 헤더 및 내비게이션 바 ========== */
.navbar {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background-color: white;
  box-shadow: var(--shadow-sm);
}

.navbar-brand {
  display: flex;
  align-items: center;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--gray-900);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.navbar-nav .nav-link {
  color: var(--gray-700);
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: var(--primary);
}

.navbar-nav .nav-link.active {
  color: var(--primary);
}

/* 헤더 - 그라데이션 스타일 */
.header-gradient {
  background: var(--header-gradient);
  color: white;
}

.header-gradient .navbar-brand,
.header-gradient .nav-link {
  color: white;
}

.header-gradient .nav-link:hover {
  color: var(--gray-200);
}

/* ========== 유틸리티 ========== */
.hidden {
  display: none !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-none { box-shadow: none; }

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.min-h-screen { min-height: 100vh; }

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

@keyframes slideInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.animate-fade-in {
  animation: fadeIn var(--transition-normal);
}

.animate-slide-in-up {
  animation: slideInUp var(--transition-normal);
}

.animate-pulse {
  animation: pulse 2s infinite;
}

/* ========== 다크 모드 지원 ========== */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-bg: rgba(102, 126, 234, 0.1);
    --secondary-bg: rgba(118, 75, 162, 0.1);
    
    --gray-100: #1a202c;
    --gray-200: #2d3748;
    --gray-300: #4a5568;
    --gray-400: #718096;
    --gray-500: #a0aec0;
    --gray-600: #cbd5e0;
    --gray-700: #e2e8f0;
    --gray-800: #edf2f7;
    --gray-900: #f7fafc;
  }
  
  body {
    background-color: var(--gray-100);
    color: var(--gray-800);
  }
  
  .card,
  .navbar,
  .form-control,
  .form-select {
    background-color: var(--gray-200);
    border-color: var(--gray-300);
  }
  
  .btn-white {
    background-color: var(--gray-200);
    color: var(--gray-800);
    border-color: var(--gray-300);
  }
  
  .btn-white:hover {
    background-color: var(--gray-300);
  }
  
  .table th {
    background-color: var(--gray-200);
    color: var(--gray-700);
  }
  
  .table td {
    border-color: var(--gray-300);
  }
  
  .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--gray-200);
  }
  
  .table-hover tbody tr:hover {
    background-color: var(--gray-300);
  }
}

/* ========== 반응형 유틸리티 ========== */
@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:hidden { display: none; }
  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }
}

@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }
}

@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }
}

@media (min-width: 1280px) {
  .xl\:flex { display: flex; }
  .xl\:hidden { display: none; }
  .xl\:text-left { text-align: left; }
  .xl\:text-center { text-align: center; }
  .xl\:text-right { text-align: right; }
}

/* dialog 팝업 스타일 */
#eventDialog {
    width: 90%;
    max-width: 500px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
}

/* 팝업이 열렸을 때 뒤쪽 배경 스타일 */
#eventDialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.popup-title {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
}

#eventDialog p {
    text-align: center;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.popup-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}