/* 공통 CSS 스타일 */

/* 애니메이션 정의 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(2rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
    100% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.6); }
}

/* Glassmorphism 효과 */
.glass {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 커스텀 스크롤바 */
::-webkit-scrollbar { 
    width: 8px; 
}

::-webkit-scrollbar-track { 
    background: transparent; 
}

::-webkit-scrollbar-thumb { 
    background: rgba(148, 163, 184, 0.5); 
    border-radius: 6px; 
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { 
    background: rgba(148, 163, 184, 0.8);
    background-clip: padding-box;
}

/* 모달 전용 스크롤바 */
.modal-scroll::-webkit-scrollbar {
    width: 6px;
}

.modal-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.4);
    border-radius: 8px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

.modal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
    background-clip: padding-box;
}

/* Firefox 스크롤바 */
.modal-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

/* 기본 폰트 설정 */
body {
    font-family: 'Pretendard Variable', 'Pretendard', 'Inter', 'system-ui', 'sans-serif';
}

/* 다크 모드 지원 - Disabled */
@media (prefers-color-scheme: never) {
    /* 기본 색상 변수 */
    :root {
        --glass-bg-dark: rgba(15, 23, 42, 0.8);
        --glass-border-dark: rgba(255, 255, 255, 0.1);
        --text-primary-dark: #f1f5f9;
        --text-secondary-dark: #cbd5e1;
        --bg-primary-dark: #0f172a;
        --bg-secondary-dark: #1e293b;
        --border-dark: #334155;
    }
    
    /* Body 배경 */
    body {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        color: var(--text-primary-dark);
    }
    
    /* 글래스 효과 다크 모드 */
    .glass {
        background: var(--glass-bg-dark);
        border: 1px solid var(--glass-border-dark);
        color: var(--text-primary-dark);
    }
    
    .glass-dark {
        background: rgba(15, 23, 42, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    /* 스크롤바 다크 모드 */
    ::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.7);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.9);
    }
    
    /* 모달 스크롤바 다크 모드 */
    .modal-scroll::-webkit-scrollbar-thumb {
        background: rgba(156, 163, 175, 0.6);
    }
    
    .modal-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(156, 163, 175, 0.8);
    }
    
    /* 테이블 다크 모드 */
    .quote-table th {
        background: var(--bg-secondary-dark);
        color: var(--text-primary-dark);
        border-color: var(--border-dark);
    }
    
    .quote-table td {
        background: var(--bg-primary-dark);
        color: var(--text-secondary-dark);
        border-color: var(--border-dark);
    }
    
    .quote-table tr:hover td {
        background: var(--bg-secondary-dark);
    }
    
    /* 링크 색상 다크 모드 */
    a {
        color: #60a5fa;
    }
    
    a:hover {
        color: #93c5fd;
    }
}

/* 접근성 - Skip to Content */
.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;
}

.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* 견적 목록 테이블 최적화 */
.quote-table {
    table-layout: fixed;
    width: 100%;
}

.quote-table th,
.quote-table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.quote-table .col-id {
    width: 100px;
    min-width: 80px;
}

.quote-table .col-title {
    width: auto;
    min-width: 300px;
}

.quote-table .col-author {
    width: 160px;
    min-width: 140px;
}

.quote-table .col-date {
    width: 140px;
    min-width: 120px;
}

.quote-table .col-reply {
    width: 100px;
    min-width: 80px;
}

/* 긴 텍스트 처리 */
.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* 반응형 테이블 개선 */
@media (max-width: 1024px) {
    .quote-table .col-author {
        width: 100px;
        min-width: 80px;
    }
    
    .quote-table .col-date {
        width: 100px;
        min-width: 80px;
    }
}

/* 모바일 텍스트 크기 최적화 */
@media (max-width: 768px) {
    /* 기본 폰트 크기 축소 */
    body {
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* 견적 테이블 모바일 최적화 */
    .quote-table {
        font-size: 0.8rem;
    }
    
    .quote-table th,
    .quote-table td {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
    
    /* 텍스트 자르기 최적화 */
    .truncate-text {
        font-size: 0.8rem;
    }
    
    /* 일반 텍스트 요소들 최적화 */
    .text-xs { font-size: 0.7rem !important; }
    .text-sm { font-size: 0.8rem !important; }
    .text-base { font-size: 0.9rem !important; }
    .text-lg { font-size: 1rem !important; }
    .text-xl { font-size: 1.1rem !important; }
    .text-2xl { font-size: 1.25rem !important; }
    .text-3xl { font-size: 1.5rem !important; }
}

@media (max-width: 640px) {
    /* 더 작은 화면에서 추가 최적화 */
    body {
        font-size: 13px;
    }
    
    .quote-table {
        font-size: 0.75rem;
    }
    
    .quote-table th,
    .quote-table td {
        padding: 6px 4px;
        font-size: 0.7rem;
    }
}

/* Textarea 자동 리사이즈 관련 스타일 */
.auto-resize {
    transition: height 0.1s ease-out;
    resize: vertical;
    field-sizing: content; /* 브라우저 지원 시 사용 */
}

/* 리사이즈 핸들 스타일 개선 */
.auto-resize::-webkit-resizer {
    border: 2px solid #d1d5db;
    border-radius: 0 0 4px 0;
    background: linear-gradient(-45deg, transparent 40%, #9ca3af 40%, #9ca3af 60%, transparent 60%);
}

.auto-resize:hover::-webkit-resizer {
    border-color: #6b7280;
    background: linear-gradient(-45deg, transparent 40%, #6b7280 40%, #6b7280 60%, transparent 60%);
}

/* 포커스 시 리사이즈 핸들 강조 */
.auto-resize:focus::-webkit-resizer {
    border-color: #3b82f6;
    background: linear-gradient(-45deg, transparent 40%, #3b82f6 40%, #3b82f6 60%, transparent 60%);
}

/* 최대 높이에서 스크롤바 스타일 */
.auto-resize::-webkit-scrollbar {
    width: 8px;
}

.auto-resize::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.auto-resize::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.auto-resize::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 최소/최대 높이 유틸리티 클래스들 */
.min-h-32 { min-height: 8rem; }
.min-h-40 { min-height: 10rem; }
.min-h-48 { min-height: 12rem; }
.max-h-80 { max-height: 20rem; }
.max-h-96 { max-height: 24rem; }
.max-h-\[30rem\] { max-height: 30rem; }
.max-h-\[40rem\] { max-height: 40rem; }

/* 리사이즈 방향 제한 */
.resize-vertical {
    resize: vertical;
}

.resize-horizontal {
    resize: horizontal;
}

.resize-none {
    resize: none;
}

.resize-both {
    resize: both;
}

/* 반응형 최소/최대 높이 */
@media (max-width: 768px) {
    .auto-resize {
        max-height: 25rem; /* 모바일에서는 최대 높이 제한 */
    }
}