/* 컬러 팔레트 변수 */
:root {
    --color-text: #240707;      /* Text - 매우 어두운 검정 */
    --color-primary: #f33535;   /* Primary - 선명한 빨강 */
    --color-secondary: #f0f0f0; /* Secondary - 연한 회색 */
    --color-accent: #6b7280;    /* Accent - 주석 회색 */
    --color-dark: #29252c;      /* Dark - 추가 어두운 색 */
}

/* Pretendard 폰트 적용 */
* {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* 헤더 스타일 */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: white;
}

/* 히어로 소프트 블러 그라데이션 배경 (버튼 색상과 조화) */
.hero-gradient {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative;
    overflow: hidden;
}

/* 블러 오브 효과 - 버튼 색상(초록/파랑/회색)과 조화 (주황 제거) */
.hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 30%, rgba(59, 130, 246, 0.12) 0%, transparent 25%),
        radial-gradient(circle at 40% 60%, rgba(16, 185, 129, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 60% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 22%),
        radial-gradient(circle at 85% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 95% 70%, rgba(107, 114, 128, 0.08) 0%, transparent 20%);
    filter: blur(35px);
}

.hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 18%),
        radial-gradient(circle at 70% 75%, rgba(59, 130, 246, 0.08) 0%, transparent 20%);
    filter: blur(40px);
}

/* 레이아웃 관련 */
body {
    display: flex;
    flex-direction: column;
}

.layout {
    display: flex;
}

.aside-left {
    width: 5%;
    flex-shrink: 0;
}

.main-content {
    width: 90%;
    flex-shrink: 0;
}

.aside-right {
    width: 5%;
    flex-shrink: 0;
}

.full-width {
    width: 100%;
}

/* 대시보드 카드 배경 색 (흰색) */
.vm-card,
.file-card,
.site-card {
    background-color: #ffffff;
}

/* 내부에 bg-white가 들어간 경우도 동일하게 맞춰줌 (특히 실습파일 카드) */
.file-card > .p-4 {
    background-color: #ffffff;
}

/* ========================================
   통일된 모달 스타일 시스템
   ======================================== */

/* 모달 오버레이 (배경) */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow-y: auto;
}

.modal-overlay.hidden {
    display: none;
}

/* 모달 센터 컨테이너 */
.modal-center {
    min-height: 100vh;
    padding: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 모달 백드롭 (블러 배경) */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
}

/* 모달 컨텐츠 박스 */
.modal-content {
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 2rem auto;
    text-align: left;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 모달 사이즈 변형 */
.modal-content.modal-sm { max-width: 24rem; }   /* 384px - 확인/삭제 모달 */
.modal-content.modal-md { max-width: 28rem; }   /* 448px - 기본 폼 모달 */
.modal-content.modal-lg { max-width: 32rem; }   /* 512px - 큰 폼 모달 */
.modal-content.modal-xl { max-width: 42rem; }   /* 672px - 리스트/브라우저 모달 */

/* 모달 헤더 */
.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}

.modal-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* 모달 닫기 버튼 */
.modal-close {
    padding: 0.5rem;
    color: #9ca3af;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
    background: none;
    border: none;
    cursor: pointer;
}

.modal-close:hover {
    color: #4b5563;
    background-color: #f3f4f6;
}

/* 모달 바디 */
.modal-body {
    padding: 1.5rem;
}

.modal-body.modal-body-scroll {
    max-height: 24rem;
    overflow-y: auto;
}

/* 모달 푸터 (버튼 영역) */
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.modal-footer.modal-footer-full {
    border-top: none;
    padding: 0;
}

.modal-footer.modal-footer-full > * {
    flex: 1;
}

/* 확인/알림 모달용 중앙 정렬 */
.modal-content.modal-centered {
    text-align: center;
    padding: 1.5rem;
}

.modal-content.modal-centered .modal-title {
    margin-bottom: 0.25rem;
}

.modal-content.modal-centered .modal-subtitle {
    margin-bottom: 1.25rem;
}

.modal-content.modal-centered .modal-footer {
    margin-top: 0;
}

/* 모달 아이콘 (확인/경고/에러) */
.modal-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
}

.modal-icon.modal-icon-info { background-color: #dbeafe; color: #2563eb; }
.modal-icon.modal-icon-success { background-color: #dcfce7; color: #16a34a; }
.modal-icon.modal-icon-warning { background-color: #fef3c7; color: #d97706; }
.modal-icon.modal-icon-danger { background-color: #fee2e2; color: #dc2626; }

/* 모달 버튼 스타일 */
.modal-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
    cursor: pointer;
    border: none;
}

.modal-btn-cancel {
    background-color: #f3f4f6;
    color: #4b5563;
}

.modal-btn-cancel:hover {
    background-color: #e5e7eb;
}

.modal-btn-primary {
    background-color: #2563eb;
    color: white;
}

.modal-btn-primary:hover {
    background-color: #1d4ed8;
}

.modal-btn-danger {
    background-color: #dc2626;
    color: white;
}

.modal-btn-danger:hover {
    background-color: #b91c1c;
}

.modal-btn-success {
    background-color: #16a34a;
    color: white;
}

.modal-btn-success:hover {
    background-color: #15803d;
}

/* 모달 로딩 스피너 */
.modal-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 2px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: modal-spin 0.8s linear infinite;
}

@keyframes modal-spin {
    to { transform: rotate(360deg); }
}

/* 모달 진입/퇴장 애니메이션 (선택적 사용) */
.modal-animate {
    animation: modal-fade-in 0.2s ease;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   공통 툴팁 스타일
   ============================================ */
.common-tooltip {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: tooltipFadeIn 0.15s ease-in-out forwards;
}

/* 툴팁 화살표 */
.common-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.95);
}

/* 툴팁 페이드인 애니메이션 */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Select 커스텀 스타일 */
select.custom-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
}
select.custom-select::-ms-expand {
    display: none;
}

/* 기존 appearance-none 클래스 호환 */
select.appearance-none {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
select.appearance-none::-ms-expand {
    display: none;
}