/**
 * lawsuit-base.css
 * 단체소송 서비스 공통 기본 스타일
 *
 * 모든 lawsuit 페이지에서 공통으로 사용되는 기본 스타일을 정의합니다.
 * - CSS 변수
 * - Reset 스타일
 * - 타이포그래피
 * - 컨테이너 레이아웃
 * - 헤더 스타일
 * - 반응형 유틸리티
 */

/* ========================================
   CSS 변수 정의
   ======================================== */
:root {
    /* 브랜드 컬러 */
    --lawsuit-primary: #667eea;
    --lawsuit-secondary: #764ba2;

    /* 상태 컬러 */
    --lawsuit-success: #27ae60;
    --lawsuit-error: #e74c3c;
    --lawsuit-warning: #ff9800;
    --lawsuit-info: #2196f3;

    /* 텍스트 컬러 */
    --lawsuit-text-primary: #333;
    --lawsuit-text-secondary: #555;
    --lawsuit-text-muted: #6c757d;
    --lawsuit-text-light: #666;

    /* 배경 컬러 */
    --lawsuit-bg-page: #f5f7fa;
    --lawsuit-bg-light: #f8f9fa;
    --lawsuit-bg-white: #ffffff;

    /* 테두리 */
    --lawsuit-border-color: #e0e0e0;
    --lawsuit-border-light: #dee2e6;

    /* 간격 */
    --lawsuit-spacing-xs: 5px;
    --lawsuit-spacing-sm: 10px;
    --lawsuit-spacing-md: 20px;
    --lawsuit-spacing-lg: 30px;
    --lawsuit-spacing-xl: 40px;

    /* 폰트 */
    --lawsuit-font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Border Radius */
    --lawsuit-radius-sm: 4px;
    --lawsuit-radius-md: 8px;
    --lawsuit-radius-lg: 12px;
    --lawsuit-radius-xl: 16px;

    /* Shadow */
    --lawsuit-shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --lawsuit-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --lawsuit-shadow-lg: 0 20px 60px rgba(0,0,0,0.3);
}

/* ========================================
   Reset & Base Styles
   ======================================== */
.lawsuit-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.lawsuit-page {
    font-family: var(--lawsuit-font-family);
    background: var(--lawsuit-bg-page);
    min-height: 100vh;
}

/* 사용자 페이지 (그라디언트 배경) */
.lawsuit-page.lawsuit-user {
    background: linear-gradient(135deg, var(--lawsuit-primary) 0%, var(--lawsuit-secondary) 100%);
    padding: var(--lawsuit-spacing-md);
}

/* 관리자 페이지 (플랫 배경) */
.lawsuit-page.lawsuit-admin {
    background: var(--lawsuit-bg-page);
    padding: var(--lawsuit-spacing-md);
}

/* ========================================
   컨테이너 레이아웃
   ======================================== */
.lawsuit-container {
    background: var(--lawsuit-bg-white);
    border-radius: var(--lawsuit-radius-lg);
    box-shadow: var(--lawsuit-shadow-sm);
    overflow: hidden;
    margin: 0 auto;
}

/* 컨테이너 크기 변형 */
.lawsuit-container.size-sm {
    max-width: 900px;
}

.lawsuit-container.size-md {
    max-width: 1000px;
}

.lawsuit-container.size-lg {
    max-width: 1200px;
}

.lawsuit-container.size-xl {
    max-width: 100%;
}

/* 사용자 페이지 컨테이너 (더 강한 그림자) */
.lawsuit-user .lawsuit-container {
    box-shadow: var(--lawsuit-shadow-lg);
}

/* ========================================
   헤더 스타일
   ======================================== */
.lawsuit-header {
    background: linear-gradient(135deg, var(--lawsuit-primary) 0%, var(--lawsuit-secondary) 100%);
    color: white;
    padding: var(--lawsuit-spacing-lg);
}

.lawsuit-header.text-center {
    text-align: center;
}

.lawsuit-header.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lawsuit-header h1 {
    font-weight: 700;
    margin: 0;
}

.lawsuit-header.size-sm h1 {
    font-size: 24px;
}

.lawsuit-header.size-md h1 {
    font-size: 26px;
}

.lawsuit-header.size-lg h1 {
    font-size: 28px;
}

.lawsuit-header.size-xl h1 {
    font-size: 32px;
}

.lawsuit-header p {
    margin-top: var(--lawsuit-spacing-sm);
    opacity: 0.9;
    line-height: 1.6;
}

/* ========================================
   콘텐츠 영역
   ======================================== */
.lawsuit-content {
    padding: var(--lawsuit-spacing-xl);
}

/* 콘텐츠 패딩 변형 */
.lawsuit-content.padding-sm {
    padding: var(--lawsuit-spacing-md);
}

.lawsuit-content.padding-lg {
    padding: 50px var(--lawsuit-spacing-xl);
}

/* ========================================
   섹션 스타일
   ======================================== */
.lawsuit-section {
    margin-bottom: var(--lawsuit-spacing-lg);
}

.lawsuit-section:last-child {
    margin-bottom: 0;
}

.lawsuit-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--lawsuit-text-primary);
    margin-bottom: var(--lawsuit-spacing-md);
    padding-bottom: var(--lawsuit-spacing-sm);
    border-bottom: 2px solid var(--lawsuit-primary);
}

.lawsuit-section-title.size-sm {
    font-size: 16px;
}

.lawsuit-section-title.size-lg {
    font-size: 20px;
}

/* ========================================
   그리드 레이아웃
   ======================================== */
.lawsuit-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--lawsuit-spacing-md);
}

.lawsuit-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--lawsuit-spacing-md);
}

.lawsuit-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--lawsuit-spacing-md);
}

.lawsuit-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--lawsuit-spacing-md);
}

.lawsuit-grid-item-full {
    grid-column: 1 / -1;
}

/* ========================================
   유틸리티 클래스
   ======================================== */
/* 텍스트 정렬 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 마진 */
.mt-1 { margin-top: var(--lawsuit-spacing-sm); }
.mt-2 { margin-top: var(--lawsuit-spacing-md); }
.mt-3 { margin-top: var(--lawsuit-spacing-lg); }
.mb-1 { margin-bottom: var(--lawsuit-spacing-sm); }
.mb-2 { margin-bottom: var(--lawsuit-spacing-md); }
.mb-3 { margin-bottom: var(--lawsuit-spacing-lg); }

/* 패딩 */
.p-1 { padding: var(--lawsuit-spacing-sm); }
.p-2 { padding: var(--lawsuit-spacing-md); }
.p-3 { padding: var(--lawsuit-spacing-lg); }

/* ========================================
   반응형 디자인
   ======================================== */
@media (max-width: 768px) {
    .lawsuit-user {
        padding: var(--lawsuit-spacing-sm);
    }

    .lawsuit-admin {
        padding: var(--lawsuit-spacing-sm);
    }

    .lawsuit-content {
        padding: var(--lawsuit-spacing-md);
    }

    .lawsuit-header {
        padding: var(--lawsuit-spacing-md);
    }

    .lawsuit-header h1 {
        font-size: 20px !important;
    }

    .lawsuit-grid-2,
    .lawsuit-grid-3,
    .lawsuit-grid-4 {
        grid-template-columns: 1fr;
    }

    .mobile-hide {
        display: none;
    }
}

@media (max-width: 480px) {
    .lawsuit-header {
        padding: var(--lawsuit-spacing-sm) var(--lawsuit-spacing-md);
    }

    .lawsuit-content {
        padding: var(--lawsuit-spacing-sm) var(--lawsuit-spacing-md);
    }
}