/**
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * ⚡ APC System - Base Stylesheet
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 📁 파일명: /www/_acc/css/base.css
 * 📌 버전: v1.2
 * 📅 작성일: 2025-12-20
 * 📝 설명: ★ 모바일 컴팩트 카드 투톤 CSS 변수 추가
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * CSS Variables - 라이트 모드 (기본)
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
    --primary: #FF6B35;
    --primary-hover: #E85A2A;
    --bg: #fffbeb;
    --surface: #ffffff;
    --text: #1f2937;
    --text-secondary: #6b7280;
    --border: #e5e7eb;
    --accent: #f59e0b;
    
    /* 추가 색상 */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    
    /* 바나나 테마 색상 */
    --banana-light: #fffbeb;
    --banana-medium: #fef3c7;
    --banana-border: #fde68a;
    --banana-text: #92400e;
    --banana-dark: #d97706;
    
    /* ★ [A-6] 카드/모달 배경 */
    --card-bg: #fffbeb;
    --card-header-bg: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.85);
    
    /* ★ [A-6] 프롬프트 영역 */
    --prompt-bg: #fffbeb;
    --prompt-border: #fde68a;
    --prompt-text: #374151;
    
    /* ★ [A-6] 메타 패널 */
    --meta-bg: linear-gradient(135deg, #fef3c7 0%, #fff7ed 100%);
    --meta-border: #fde68a;
    
    /* ★ [A-6] 버튼 */
    --btn-secondary-bg: #fef3c7;
    --btn-secondary-text: #92400e;
    --btn-secondary-border: #fde68a;

    /* ★★★ [v1.2] 모바일 컴팩트 카드 - 투톤 색상 (라이트) ★★★ */
    --card-top-bg: #fef3c7;             /* 이미지 영역 배경 (진한 노랑) */
    --card-bottom-bg: #fffbeb;          /* 하단 영역 배경 (연한 크림) */
    --card-border-outer: #fde68a;       /* 외곽 테두리 */
    --card-border-inner: rgba(255,255,255,0.8);  /* 내부 테두리 (box-shadow) */
    --card-divider: #fde68a;            /* 메타/푸터 구분선 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * ★★★ [A-6] CSS Variables - 다크 모드 ★★★
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="dark"] {
    --primary: #FF8C5A;
    --primary-hover: #FF6B35;
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #334155;
    --accent: #fbbf24;
    
    /* 바나나 테마 - 다크 버전 */
    --banana-light: #1e293b;
    --banana-medium: #334155;
    --banana-border: #475569;
    --banana-text: #fcd34d;
    --banana-dark: #fbbf24;
    
    /* 카드/모달 배경 */
    --card-bg: #1e293b;
    --card-header-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --modal-bg: #1e293b;
    --modal-overlay: rgba(0, 0, 0, 0.9);
    
    /* 프롬프트 영역 */
    --prompt-bg: #0f172a;
    --prompt-border: #475569;
    --prompt-text: #e2e8f0;
    
    /* 메타 패널 */
    --meta-bg: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    --meta-border: #475569;
    
    /* 버튼 */
    --btn-secondary-bg: #334155;
    --btn-secondary-text: #fcd34d;
    --btn-secondary-border: #475569;

    /* ★★★ [v1.2] 모바일 컴팩트 카드 - 투톤 색상 (다크) ★★★ */
    --card-top-bg: #334155;             /* 이미지 영역 배경 (진한 회색) */
    --card-bottom-bg: #1e293b;          /* 하단 영역 배경 (기본 다크) */
    --card-border-outer: #475569;       /* 외곽 테두리 */
    --card-border-inner: rgba(0,0,0,0.3);  /* 내부 테두리 (box-shadow) */
    --card-divider: #475569;            /* 메타/푸터 구분선 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * Body & Container
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    margin-top: 0;
}