/**
 * Mission Group 테마 시스템
 * 
 * JMP 전역 테마(jmp-theme.css)를 확장하여
 * 그린 계열의 다크/라이트 테마를 구현합니다.
 * 
 * Acts 사역자가 블루 계열이라면,
 * Mission Group은 그린 계열로 차별화합니다.
 * 
 * @package    JMP
 * @subpackage Mission
 * @since      1.0.0
 */

/* =========================================================
   Mission Group - 그린 테마 토글 버튼
   ========================================================= */

/* 다크 모드 - 기본 스타일 (JMP 전역 스타일 상속) */
.mission-theme-toggle [data-theme].active {
    background: var(--mission-green, #15803D) !important;
    color: #06060a;
}

/* 라이트 모드 - 그린 그라디언트 트랙 */
.theme-light .mission-theme-toggle,
.mission-group-wrap.theme-light .mission-theme-toggle,
.mission-dashboard-wrap.theme-light .mission-theme-toggle,
.mission-profile-wrap.theme-light .mission-theme-toggle {
    background: linear-gradient(145deg, #15803D 0%, #14532D 100%) !important;
    border-color: rgba(0, 0, 0, 0.08);
}

.theme-light .mission-theme-toggle [data-theme].active,
.mission-group-wrap.theme-light .mission-theme-toggle [data-theme].active,
.mission-dashboard-wrap.theme-light .mission-theme-toggle [data-theme].active {
    background: #ffffff !important;
    color: #14532D;
}

/* =========================================================
   Mission Group - 다크 테마 (그린 계열)
   ========================================================= */

.mission-group-wrap,
.mission-dashboard-wrap,
.mission-profile-wrap,
.mission-projects-wrap,
.mission-leaderboard-wrap,
.mission-application-wrap {
    /* 그린 브랜드 컬러 */
    --mission-green: #15803D;           /* 주요 그린 */
    --mission-green-light: #16A34A;     /* 밝은 그린 */
    --mission-green-dark: #14532D;      /* 어두운 그린 */
    --mission-green-glow: rgba(21, 128, 61, 0.12);
    
    /* 보조 그린 계열 */
    --mission-emerald: #10B981;         /* 에메랄드 */
    --mission-teal: #14B8A6;            /* 틸 */
    --mission-lime: #84CC16;            /* 라임 */
    
    /* 다크 배경 (더 진한 초록 계열) */
    --mission-bg: #0A1F0F;              /* 최외곽 배경 - 다크 포레스트 */
    --mission-surface: #132818;         /* 카드 배경 - 초록 올리브 */
    --mission-surface-hover: #1F3D2A;   /* 호버 배경 - 밝은 포레스트 */
    
    /* 네이비 → 그린-그레이 계열로 대체 */
    --mission-base: #0D2818;            /* 베이스 다크 그린 */
    --mission-base-light: #112920;      /* 밝은 베이스 */
    --mission-base-mid: #1A3325;        /* 중간 베이스 */
    
    /* 텍스트 */
    --mission-text: #E8F4EC;            /* 주요 텍스트 (약간 그린틴트) */
    --mission-text-dim: #8AA890;        /* 보조 텍스트 */
    --mission-text-muted: #5A7060;      /* 약한 텍스트 */
    
    /* 보더 */
    --mission-border: rgba(21, 128, 61, 0.08);
    --mission-border-strong: rgba(21, 128, 61, 0.15);
    
    /* 기능 색상 */
    --mission-gold: #D4A853;            /* 골드 (공통) */
    --mission-red: #F05A5A;             /* 에러/경고 */
    --mission-orange: #F0923A;          /* 주의 */
    --mission-purple: #A78BFA;          /* 보라 */
    --mission-cyan: #22D3EE;            /* 시안 */
    
    /* 등급 색상 */
    --grade-bronze: #CD7F32;
    --grade-silver: #C0C0C0;
    --grade-gold: #FFD700;
    --grade-platinum: #E5E4E2;
    --grade-diamond: #B9F2FF;
    
    /* 간격 및 라디우스 (Acts와 동일) */
    --space-xs: clamp(0.25rem,1vw,0.5rem);
    --space-sm: clamp(0.5rem,2vw,0.75rem);
    --space-md: clamp(0.75rem,3vw,1.25rem);
    --space-lg: clamp(1.25rem,4vw,2rem);
    --space-xl: clamp(2rem,6vw,3rem);
    
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    
    /* 폰트 */
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Noto Sans KR', sans-serif;
    
    /* 기본 스타일 적용 */
    font-family: var(--font-body);
    background: var(--mission-bg);
    color: var(--mission-text);
    line-height: 1.6;
}

/* =========================================================
   Mission Group - 라이트 테마 (베이지-그린 톤)
   ========================================================= */

.mission-group-wrap.theme-light,
.mission-dashboard-wrap.theme-light,
.mission-profile-wrap.theme-light,
.mission-projects-wrap.theme-light,
.mission-leaderboard-wrap.theme-light,
.mission-application-wrap.theme-light {
    /* 그린 브랜드 (라이트 버전) */
    --mission-green: #14532D;
    --mission-green-light: #15803D;
    --mission-green-dark: #14532D;
    --mission-green-glow: rgba(21, 128, 61, 0.12);
    
    /* 배경 (베이지-그린 톤) */
    --mission-bg: #F1F5F2;              /* 연한 그린 틴트 배경 */
    --mission-surface: #FFFFFF;         /* 카드 배경 */
    --mission-surface-hover: #F8FBF9;   /* 호버 배경 */
    
    /* 베이스 */
    --mission-base: #E5EBE7;
    --mission-base-light: #D9E2DB;
    --mission-base-mid: #C7D3CA;
    
    /* 텍스트 */
    --mission-text: #1A2E1F;
    --mission-text-dim: #4A5A4F;
    --mission-text-muted: #7A8A7F;
    
    /* 보더 */
    --mission-border: rgba(20, 83, 45, 0.15);
    --mission-border-strong: rgba(20, 83, 45, 0.25);
    
    /* 기본 스타일 적용 */
    background: var(--mission-bg);
    color: var(--mission-text);
}

/* =========================================================
   텍스트 색상 강제 (다크 모드)
   ========================================================= */

.mission-group-wrap.theme-dark p,
.mission-group-wrap.theme-dark span:not(.form-label):not(label),
.mission-group-wrap.theme-dark td,
.mission-group-wrap.theme-dark li,
.mission-dashboard-wrap.theme-dark p,
.mission-dashboard-wrap.theme-dark span:not(.form-label):not(label),
.mission-dashboard-wrap.theme-dark td,
.mission-dashboard-wrap.theme-dark li,
.mission-profile-wrap.theme-dark p,
.mission-profile-wrap.theme-dark span:not(.form-label):not(label),
.mission-profile-wrap.theme-dark td,
.mission-profile-wrap.theme-dark li {
    color: var(--mission-text);
}

.mission-group-wrap.theme-dark h1,
.mission-group-wrap.theme-dark h2,
.mission-group-wrap.theme-dark h3,
.mission-dashboard-wrap.theme-dark h1,
.mission-dashboard-wrap.theme-dark h2,
.mission-dashboard-wrap.theme-dark h3,
.mission-dashboard-wrap.theme-dark .card-title,
.mission-dashboard-wrap.theme-dark .stat-value,
.mission-profile-wrap.theme-dark h1,
.mission-profile-wrap.theme-dark h2,
.mission-profile-wrap.theme-dark h3 {
    color: #ffffff;
}

/* 라벨 유지 */
.mission-group-wrap.theme-dark label,
.mission-group-wrap.theme-dark .form-label,
.mission-dashboard-wrap.theme-dark label,
.mission-dashboard-wrap.theme-dark .form-label {
    color: var(--mission-text-dim);
}

/* =========================================================
   등급 배지 색상
   ========================================================= */

.mission-grade-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
}

.mission-grade-badge.grade-bronze {
    background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
    color: #fff;
}

.mission-grade-badge.grade-silver {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    color: #333;
}

.mission-grade-badge.grade-gold {
    background: linear-gradient(135deg, #FFD700 0%, #FFC700 100%);
    color: #333;
}

.mission-grade-badge.grade-platinum {
    background: linear-gradient(135deg, #E5E4E2 0%, #D0D0D0 100%);
    color: #333;
}

.mission-grade-badge.grade-diamond {
    background: linear-gradient(135deg, #B9F2FF 0%, #96E6F5 100%);
    color: #0A3A42;
}

/* =========================================================
   프로젝트 상태 배지
   ========================================================= */

.mission-project-status {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mission-project-status.status-planning {
    background: rgba(168, 107, 250, 0.15);
    color: var(--mission-purple);
    border: 1px solid rgba(168, 107, 250, 0.3);
}

.mission-project-status.status-active {
    background: rgba(34, 197, 94, 0.15);
    color: var(--mission-green);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.mission-project-status.status-completed {
    background: rgba(34, 211, 238, 0.15);
    color: var(--mission-cyan);
    border: 1px solid rgba(34, 211, 238, 0.3);
}

.mission-project-status.status-cancelled {
    background: rgba(240, 90, 90, 0.15);
    color: var(--mission-red);
    border: 1px solid rgba(240, 90, 90, 0.3);
}

/* 라이트 모드 상태 배지 */
.theme-light .mission-project-status.status-planning {
    background: rgba(139, 92, 246, 0.12);
    color: #6B21A8;
}

.theme-light .mission-project-status.status-active {
    background: rgba(20, 83, 45, 0.12);
    color: #15803D;
}

.theme-light .mission-project-status.status-completed {
    background: rgba(14, 165, 233, 0.12);
    color: #0369A1;
}

.theme-light .mission-project-status.status-cancelled {
    background: rgba(220, 38, 38, 0.12);
    color: #991B1B;
}

/* =========================================================
   그린 액센트 요소
   ========================================================= */

.mission-accent-green {
    color: var(--mission-green) !important;
}

.mission-bg-green {
    background: var(--mission-green) !important;
}

.mission-border-green {
    border-color: var(--mission-green) !important;
}

/* 버튼 - 그린 프라이머리 */
.mission-btn-primary {
    background: linear-gradient(135deg, var(--mission-green) 0%, var(--mission-green-dark) 100%);
    color: #ffffff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mission-btn-primary:hover {
    background: linear-gradient(135deg, var(--mission-green-light) 0%, var(--mission-green) 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* 버튼 - 그린 아웃라인 */
.mission-btn-outline {
    background: transparent;
    color: var(--mission-green);
    border: 2px solid var(--mission-green);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mission-btn-outline:hover {
    background: var(--mission-green);
    color: #ffffff;
}

/* =========================================================
   카드 컴포넌트
   ========================================================= */

.mission-card {
    background: var(--mission-surface);
    border: 1px solid var(--mission-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all 0.2s ease;
}

.mission-card:hover {
    background: var(--mission-surface-hover);
    border-color: var(--mission-border-strong);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.08);
}

.mission-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.mission-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mission-text);
    margin: 0;
}

.mission-card-body {
    color: var(--mission-text-dim);
    line-height: 1.6;
}

/* 라이트 모드 카드 */
.theme-light .mission-card {
    background: var(--mission-surface);
    border-color: var(--mission-border);
    box-shadow: 0 1px 3px rgba(26, 46, 31, 0.05);
}

.theme-light .mission-card:hover {
    box-shadow: 0 4px 12px rgba(26, 46, 31, 0.08);
}

/* =========================================================
   유틸리티 클래스
   ========================================================= */

/* 간격 */
.mission-mt-xs { margin-top: var(--space-xs); }
.mission-mt-sm { margin-top: var(--space-sm); }
.mission-mt-md { margin-top: var(--space-md); }
.mission-mt-lg { margin-top: var(--space-lg); }
.mission-mt-xl { margin-top: var(--space-xl); }

.mission-mb-xs { margin-bottom: var(--space-xs); }
.mission-mb-sm { margin-bottom: var(--space-sm); }
.mission-mb-md { margin-bottom: var(--space-md); }
.mission-mb-lg { margin-bottom: var(--space-lg); }
.mission-mb-xl { margin-bottom: var(--space-xl); }

.mission-p-xs { padding: var(--space-xs); }
.mission-p-sm { padding: var(--space-sm); }
.mission-p-md { padding: var(--space-md); }
.mission-p-lg { padding: var(--space-lg); }
.mission-p-xl { padding: var(--space-xl); }

/* 텍스트 정렬 */
.mission-text-left { text-align: left; }
.mission-text-center { text-align: center; }
.mission-text-right { text-align: right; }

/* Flexbox */
.mission-flex { display: flex; }
.mission-flex-col { flex-direction: column; }
.mission-items-center { align-items: center; }
.mission-justify-center { justify-content: center; }
.mission-justify-between { justify-content: space-between; }
.mission-gap-sm { gap: var(--space-sm); }
.mission-gap-md { gap: var(--space-md); }
.mission-gap-lg { gap: var(--space-lg); }

/* Grid */
.mission-grid { display: grid; }
.mission-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mission-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mission-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .mission-grid-cols-2,
    .mission-grid-cols-3,
    .mission-grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   groups-list 숏코드 - frontend-main.html groups 섹션
   ========================================================= */

.mission-groups-list-wrap {
    --mission-green: #22C55E;
    --mission-green-dark: #16A34A;
    --mission-bg: #0F172A;
    --mission-surface: #1E293B;
    --mission-text: #F1F5F9;
    --mission-text-dim: #CBD5E1;
    min-height: 100vh;
    background: var(--mission-bg);
    color: var(--mission-text);
}

.mission-groups-section {
    padding: 4rem 2rem 6rem;
    background: var(--mission-surface);
}

.mission-groups-container {
    max-width: 1200px;
    margin: 0 auto;
}

.mission-section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.mission-section-subtitle {
    text-align: center;
    color: var(--mission-text-dim);
    font-size: 1.125rem;
    margin-bottom: 4rem;
}

.mission-groups-empty {
    text-align: center;
    color: var(--mission-text-dim);
    padding: 4rem 2rem;
}

.mission-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.mission-group-card {
    background: var(--mission-bg);
    border: 1px solid rgba(34, 197, 94, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.mission-group-card:hover {
    border-color: var(--mission-green);
    transform: translateY(-4px);
}

.mission-group-banner {
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-group-logo {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    border: 4px solid var(--mission-bg);
    position: absolute;
    bottom: -40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    overflow: hidden;
}

.mission-group-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mission-group-content {
    padding: 3rem 1.5rem 1.5rem;
}

.mission-group-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
}

.mission-group-type-wrap {
    text-align: center;
    margin-bottom: 1rem;
}

.mission-group-type {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.mission-group-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 1rem;
    border-top: 1px solid rgba(34, 197, 94, 0.1);
}

.mission-group-stat {
    text-align: center;
}

.mission-group-stat-value {
    display: block;
    font-weight: 700;
}

.mission-group-stat-label {
    font-size: 0.75rem;
    color: var(--mission-text-dim);
}

@media (max-width: 768px) {
    .mission-groups-grid {
        grid-template-columns: 1fr;
    }
}