/* 이노비즘 커스텀 스타일 */

/* 브랜드 컬러 정의 */
:root {
    --innovism-blue: #1e40af;
    --innovism-light-blue: #3b82f6;
    --innovism-dark-blue: #1e3a8a;
    --innovism-gray: #6b7280;
    --innovism-light-gray: #f3f4f6;
}

/* 브랜드 컬러 클래스 */
.bg-innovism-blue {
    background-color: var(--innovism-blue);
}

.bg-innovism-light-blue {
    background-color: var(--innovism-light-blue);
}

.bg-innovism-dark-blue {
    background-color: var(--innovism-dark-blue);
}

.text-innovism-blue {
    color: var(--innovism-blue);
}

.text-innovism-light-blue {
    color: var(--innovism-light-blue);
}

.text-innovism-dark-blue {
    color: var(--innovism-dark-blue);
}

.border-innovism-blue {
    border-color: var(--innovism-blue);
}

/* 포커스 스타일 */
.focus\:ring-innovism-blue:focus {
    --tw-ring-color: var(--innovism-blue);
}

.focus\:border-innovism-blue:focus {
    border-color: var(--innovism-blue);
}

/* 호버 효과 */
.hover\:bg-innovism-dark-blue:hover {
    background-color: var(--innovism-dark-blue);
}

.hover\:text-innovism-dark-blue:hover {
    color: var(--innovism-dark-blue);
}

/* 버튼 스타일 */
.btn-primary {
    @apply bg-innovism-blue text-white px-6 py-3 rounded-md hover:bg-innovism-dark-blue transition duration-300 font-semibold;
}

.btn-secondary {
    @apply bg-white text-innovism-blue border border-innovism-blue px-6 py-3 rounded-md hover:bg-innovism-blue hover:text-white transition duration-300 font-semibold;
}

/* 카드 스타일 */
.card {
    @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300;
}

/* 섹션 스타일 */
.section-padding {
    @apply py-20;
}

.section-padding-sm {
    @apply py-12;
}

/* 텍스트 스타일 */
.text-gradient {
    background: linear-gradient(135deg, var(--innovism-blue), var(--innovism-light-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 애니메이션 */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 반응형 유틸리티 */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* 폼 스타일 */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-innovism-blue focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-innovism-blue focus:border-transparent resize-vertical;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-innovism-blue focus:border-transparent;
}

/* 네비게이션 스타일 */
.nav-link {
    @apply text-gray-700 hover:text-innovism-blue transition duration-200 font-medium;
}

.nav-link-active {
    @apply text-innovism-blue font-semibold;
}

/* 푸터 스타일 */
.footer-link {
    @apply text-gray-400 hover:text-white transition duration-200;
}

/* 로고 스타일 */
.logo {
    @apply font-bold text-2xl text-innovism-blue;
}

/* 아이콘 스타일 */
.icon-circle {
    @apply w-16 h-16 bg-innovism-blue rounded-full flex items-center justify-center mx-auto mb-4;
}

.icon-circle-sm {
    @apply w-12 h-12 bg-innovism-blue rounded-full flex items-center justify-center mx-auto mb-4;
}

/* 배지 스타일 */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-innovism-blue text-white;
}

.badge-secondary {
    @apply bg-gray-100 text-gray-800;
}

/* 구분선 스타일 */
.divider {
    @apply border-t border-gray-200 my-8;
}

/* 그리드 스타일 */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* 이미지 스타일 */
.img-cover {
    @apply w-full h-full object-cover;
}

.img-contain {
    @apply w-full h-full object-contain;
}

/* 모달 스타일 */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white rounded-lg p-6 max-w-md w-full mx-4;
}

/* 로딩 스타일 */
.loading {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-innovism-blue;
}

/* 스크롤바 스타일 */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--innovism-blue);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--innovism-dark-blue);
}

/* 프린트 스타일 */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
}

/* 다크모드 지원 (향후 확장) */
@media (prefers-color-scheme: dark) {
    /* 다크모드 스타일은 향후 구현 예정 */
}

/* 히어로 섹션 배경 */
.hero-section {
    position: relative;
}

.hero-section > * {
    position: relative;
    z-index: 2;
}

.overlay-fixed {
    transition: none !important;
    opacity: 1 !important;
}

.business-hero-bg {
    background-image: url('/static/images/home/hero.png');
}

/* 접근성 개선 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 포커스 표시 개선 */
.focus-visible:focus {
    outline: 2px solid var(--innovism-blue);
    outline-offset: 2px;
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .text-gray-600 {
        color: #000 !important;
    }
    
    .text-gray-400 {
        color: #333 !important;
    }
} 