:root {
    --color-primary: #3b82f6;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-600: #2563eb;
    --color-foreground: #0f172a;
    --color-foreground-500: #64748b;
    --color-foreground-600: #475569;
    --color-background: #ffffff;
    --color-content1: #ffffff;
    --color-default-100: #f1f5f9;
    --color-default-200: #e2e8f0;
    --color-divider: #e2e8f0;
    --color-focus: #3b82f6;
  }
  
  .text-primary { color: var(--color-primary); }
  .text-primary-600 { color: var(--color-primary-600); }
  .text-foreground { color: var(--color-foreground); }
  .text-foreground-500 { color: var(--color-foreground-500); }
  .text-foreground-600 { color: var(--color-foreground-600); }
  .bg-background { background-color: var(--color-background); }
  .bg-content1 { background-color: var(--color-content1); }
  .bg-default-100 { background-color: var(--color-default-100); }
  .bg-default-200 { background-color: var(--color-default-200); }
  .bg-primary { background-color: var(--color-primary); }
  .bg-primary-100 { background-color: var(--color-primary-100); }
  .bg-primary-200 { background-color: var(--color-primary-200); }
  .bg-primary\/20 { background-color: rgba(59, 130, 246, 0.2); }
  .border-divider { border-color: var(--color-divider); }
  .text-primary-foreground { color: white; }
  
  .badge { width: 64px; height: 64px; }
  .text-yellow { color: #eab308; }
  
  .divide-y > * + * {
    border-top-width: 1px;
    border-color: #d1d5db;
  }
  
  .hover\:opacity-hover:hover { opacity: 0.8; }
  .active\:opacity-disabled:active { opacity: 0.5; }
  
  /* Smooth transitions */
  .transition-opacity { transition: opacity 0.15s ease; }
  .transition-transform-colors-opacity { transition: transform 0.15s ease, background-color 0.15s ease, opacity 0.15s ease; }
  .transition-transform-background { transition: transform 0.15s ease, background-color 0.15s ease; }
  .transition-shadow { transition: box-shadow 0.15s ease; }
  
  /* 카드 호버 모션 효과 */
  .card-hover {
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.12);
  }
  .card-hover:hover .card-icon {
    transform: scale(1.1);
  }
  .card-icon {
    transition: transform 0.3s ease;
  }
  
  /* Track button hover effect */
  .bg-primary-dark {
    background-color: #2563eb; /* darker blue */
  }
  
  /* Mobile menu */
  .hidden { display: none; }
  
  /* Details/summary styling */
  details summary::-webkit-details-marker { display: none; }
  details summary { list-style: none; }
  
  /* Group states */
  .group:hover .group-hover\:opacity-80 { opacity: 0.8; }
  .group[open] .group-open\:-rotate-90 { transform: rotate(-90deg); }

  /* 아코디언 내부 이미지 늘어짐 방지 (강제 적용) */
  .group div img {
    width: auto !important;          /* 너비 자동 조절 */
    height: auto !important;         /* 높이 자동 조절 (가장 중요) */
    max-width: 100% !important;      /* 최대 너비는 컨테이너에 맞춤 */
    object-fit: contain;             /* 이미지가 잘리지 않고 비율에 맞게 표시 */
  }