feat: initial release without tracked binary images

.github/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: Deploy to Hugging Face Spaces
+
+on:
+  push:
+    branches:
+      - main
+  # GitHub Actions 탭에서 수동 실행 허용
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Git Credentials & Push to HF
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+          # 본인의 Hugging Face Username 및 Space Name에 맞춰 변경하십시오.
+          HF_USERNAME: "HwangJinwook"
+          HF_SPACE_NAME: "caretable"
+        run: |
+          git config --global user.email "actions@github.com"
+          git config --global user.name "GitHub Actions"
+          
+          # Hugging Face Spaces Git Remote 추가 및 강제 푸시 (Docker 배포 진행)
+          git remote add hf https://$HF_USERNAME:$HF_TOKEN@huggingface.co/spaces/$HF_USERNAME/$HF_SPACE_NAME
+          git push --force hf main

Dockerfile

@@ -0,0 +1,12 @@
+FROM nginx:alpine
+
+# 프로젝트 전체 정적 파일을 Nginx 기본 서빙 경로로 복사
+COPY . /usr/share/nginx/html
+
+# Hugging Face Spaces는 기본 포트로 7860을 사용하므로 default.conf의 80 포트를 7860으로 리라이팅
+RUN sed -i 's/listen[[:space:]]*80;/listen 7860;/g' /etc/nginx/conf.d/default.conf
+
+# 7860 포트 노출
+EXPOSE 7860
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -0,0 +1,39 @@
+---
+title: CareTable
+emoji: 🍱
+colorFrom: blue
+colorTo: green
+sdk: docker
+pinned: false
+---
+
+# CareTable - 취약계층 및 가정 맞춤형 급식 안전 스케줄러 & 증빙 자동화 플랫폼
+
+2026 사회보장정보와 공공·민간 빅데이터를 활용한 국민행복 서비스 발굴‧창업경진대회 출품작입니다.
+
+본 저장소는 **Hugging Face Spaces**의 Docker SDK 환경을 통해 호스팅되는 CareTable 데모 웹 사이트입니다.
+
+## 🚀 주요 기능
+1. **일반 가정 / 사회복지시설 범용 토글**: 시설용 모드와 일반 소비자(가정) 모드를 스위칭하여 맞춤형 데이터베이스 및 ESG 일지를 관리합니다.
+2. **OpenRouter 무료 AI 모델 실시간 연동**: Llama-3.1 Nemotron, Llama-3, Gemma-2 등 오픈라우터 무료 LLM 모델 폴백(Fallback) 체인 및 Llama-3.2 Vision VLM 무료 모델 실시간 호출을 지원합니다. (API Key가 없어도 시뮬레이션 모드로 정상 작동합니다.)
+3. **주간/월간 대량 식단 스케줄 분석**: 월/주 단위 식단을 통째로 입력하면 일목요연한 캘린더 그리드 및 아코디언 카드 뷰로 시각화합니다.
+4. **VLM(Vision-Language Model) 오배식 방지 검증**: 식판 이미지 촬영 및 업로드 시 비전 AI가 유해 식자재 혼입 여부를 2차 자동 검증합니다.
+5. **디지털 자동 일지 및 ESG 성과 인쇄**: 시설 평가 증빙 및 ESG 가치 수치 통계를 대시보드로 요약하고 공식 PDF로 깔끔하게 인쇄합니다.
+
+---
+
+## 🛠️ GitHub Actions를 활용한 Hugging Face Spaces CI/CD 배포 구성법
+
+본 프로젝트의 코드를 GitHub에 올린 뒤, 코드 변경 시마다 허깅페이스 스페이스로 배포 자동화를 하려면 아래 단계를 완료하십시오.
+
+### 1단계: Hugging Face Access Token 발급
+1. [Hugging Face Settings](https://huggingface.co/settings/tokens)로 이동합니다.
+2. **New token** 버튼을 클릭하고 Role을 **Write**로 지정하여 토큰을 생성 및 복사합니다.
+
+### 2단계: GitHub Secrets에 토큰 추가
+1. 배포할 GitHub Repository의 **Settings ➔ Secrets and variables ➔ Actions**로 이동합니다.
+2. **New repository secret** 버튼을 클릭합니다.
+3. Name에 `HF_TOKEN`을 입력하고, Value에 복사한 Hugging Face Access Token을 붙여넣습니다.
+
+### 3단계: GitHub push 진행
+- 코드가 GitHub 저장소의 `main` 브랜치에 push될 때마다 GitHub Actions 워크플로우가 자동으로 트리거되어 Hugging Face Spaces로 코드를 빌드/복사합니다.

app.js

@@ -0,0 +1,1546 @@
+// CareTable - Premium Demo Logic Engine (Version 2.2)
+
+// Global State Default Data Sets
+const defaultMembers = {
+    child: [
+        { id: 1, name: '김민수', age: '5세 / 남', type: '알레르기', detail: '달걀, 우유', instruction: '달걀/우유 성분 완전 차단 및 대체 간식 제공', status: 'care' },
+        { id: 2, name: '박예린', age: '6세 / 여', type: '알레르기', detail: '땅콩, 견과류', instruction: '견과류 함유 소스/조미료 전면 금지 및 대체 견과 무첨가 제품 사용', status: 'safe' },
+        { id: 3, name: '최지환', age: '4세 / 남', type: '알레르기', detail: '대두, 콩류', instruction: '간장, 된장 대체 소스 사용 및 콩 단백질 대체 반찬 제공', status: 'safe' }
+    ],
+    senior: [
+        { id: 1, name: '최옥분', age: '82세 / 여', type: '질환식', detail: '당뇨, 연하곤란 2단계', instruction: '저염/저당질 식사, 1.5cm 이하 다진식(Soft Food) 및 연하보조제 믹스 제공', status: 'care' },
+        { id: 2, name: '정순길', age: '78세 / 남', type: '질환식', detail: '신부전증 (칼륨 제한)', instruction: '나트륨 최소화, 생채소 섭취 금지(데친 채소 제공), 잡곡밥 대신 흰쌀밥 제공', status: 'care' },
+        { id: 3, name: '이명자', age: '85세 / 여', type: '질환식', detail: '유당불내증', instruction: '일반 우유/요구르트 급식 금지, 락토프리 우유 또는 대체 두유 제공', status: 'care' }
+    ],
+    family: [
+        { id: 1, name: '우리남편', age: '42세 / 남', type: '질환식', detail: '고혈압, 통풍', instruction: '나트륨 제한식, 퓨린이 많은 맥주/조개류 반찬 금지, 식이섬유 증량', status: 'care' },
+        { id: 2, name: '첫째딸', age: '8세 / 여', type: '알레르기', detail: '복숭아, 키위', instruction: '해당 과일 디저트 일절 배제 및 과일 칼 분리 사용 철저', status: 'safe' },
+        { id: 3, name: '막내아들', age: '5세 / 남', type: '알레르기', detail: '우유, 밀가루', instruction: '락토프리 유제품 급지 및 쌀식빵/글루텐프리 대체 베이킹 제공', status: 'care' }
+    ]
+};
+
+const state = {
+    currentTab: 'dashboard',
+    currentMode: 'agency', // 'agency' (기관) or 'family' (가정)
+    currentFacility: 'child', // 'child' (보육) or 'senior' (노인)
+    members: JSON.parse(JSON.stringify(defaultMembers)), // Deep Copy
+    
+    // Simulation / Analyzer variables
+    activeDietInput: '',
+    analysisResult: null, // Schedule cards list
+    selectedVlmImage: null, // 'normal' or 'alternative' or 'custom'
+    customVlmImageSrc: null,
+    vlmApproved: false,
+    
+    // Database of logs to generate reports
+    logs: [
+        {
+            date: '2026-05-30',
+            menu: '보리밥, 계란국, 제육볶음, 두부조림, 오렌지주스',
+            facility: 'child',
+            target: '김민수 아동 (달걀/우유)',
+            alternative: '계란국 ➔ 맑은 무국 대체 제공',
+            guideline: '계란 조리 시 교차오염 방지용 독립 조리기구 사용',
+            vlmStatus: 'PASS',
+            timestamp: '2026-05-30 11:45'
+        },
+        {
+            date: '2026-05-30',
+            menu: '잡곡밥, 버섯국, 불고기, 고구마순나물, 요플레',
+            facility: 'senior',
+            target: '이명자 어르신 (유당불내증)',
+            alternative: '요플레 ➔ 락토프리 요거트 대체 제공',
+            guideline: '유제품 보관 구역 구별 및 라벨링 철저',
+            vlmStatus: 'PASS',
+            timestamp: '2026-05-30 11:52'
+        }
+    ],
+    charts: {
+        dashboard: null,
+        esg: null
+    }
+};
+
+// API settings configuration
+const apiConfig = {
+    key: localStorage.getItem('caremeal_api_key') || '',
+    model: localStorage.getItem('caremeal_api_model') || 'nvidia/llama-3.1-nemotron-70b-instruct:free'
+};
+
+// OpenRouter Free Models for Fallback Strategy
+const freeLLMModels = [
+    "nvidia/llama-3.1-nemotron-70b-instruct:free",
+    "meta-llama/llama-3-8b-instruct:free",
+    "google/gemma-2-9b-it:free",
+    "mistralai/mistral-7b-instruct:free"
+];
+
+const freeVLMModels = [
+    "meta-llama/llama-3.2-11b-vision-instruct:free",
+    "qwen/qwen-2-vl-7b-instruct:free"
+];
+
+// DOM Elements
+const elements = {
+    navButtons: document.querySelectorAll('.nav-btn'),
+    tabContents: document.querySelectorAll('.tab-content'),
+    facilitySelect: document.getElementById('facility-select'),
+    facilitySelectorWrapper: document.getElementById('facility-selector-wrapper'),
+    pageMainTitle: document.getElementById('page-main-title'),
+    pageSubTitle: document.getElementById('page-sub-title'),
+    mainBadge: document.getElementById('main-badge'),
+    
+    // Theme Toggle
+    themeToggleBtn: document.getElementById('theme-toggle-btn'),
+    
+    // Mode Switch Toggle
+    modeToggleCheckbox: document.getElementById('mode-toggle-checkbox'),
+    modeTextLeft: document.getElementById('mode-text-left'),
+    modeTextRight: document.getElementById('mode-text-right'),
+    userAvatarInitial: document.getElementById('user-avatar-initial'),
+    userDisplayName: document.getElementById('user-display-name'),
+    userDisplayRole: document.getElementById('user-display-role'),
+    
+    // Stats
+    statTotalMembers: document.getElementById('stat-total-members'),
+    statRiskMembers: document.getElementById('stat-risk-members'),
+    statSavedTime: document.getElementById('stat-saved-time'),
+    statSafetyScore: document.getElementById('stat-safety-score'),
+    
+    lblTotalMembers: document.getElementById('lbl-total-members'),
+    lblTotalDesc: document.getElementById('lbl-total-desc'),
+    lblSavedTime: document.getElementById('lbl-saved-time'),
+    lblSavedDesc: document.getElementById('lbl-saved-desc'),
+    esgBottomDesc: document.getElementById('esg-bottom-desc'),
+    
+    // GNB & API Connection Status
+    openApiConfigBtn: document.getElementById('open-api-config-btn'),
+    apiStatusBadge: document.getElementById('api-status-badge'),
+    apiStatusText: document.getElementById('api-status-text'),
+    
+    // Tables
+    memberTableBody: document.getElementById('member-table-body'),
+    panelMemberTitle: document.getElementById('panel-member-title'),
+    
+    // Bulk Diet tab
+    dietBulkInput: document.getElementById('diet-bulk-input'),
+    analyzeDietBtn: document.getElementById('analyze-diet-btn'),
+    analyzerLoading: document.getElementById('analyzer-loading'),
+    analyzerModelIndicator: document.getElementById('analyzer-model-indicator'),
+    loadingText: document.getElementById('loading-text'),
+    scheduleResultView: document.getElementById('schedule-result-view'),
+    scheduleCardsContainer: document.getElementById('schedule-cards-container'),
+    scheduleStatusBanner: document.getElementById('schedule-status-banner'),
+    scheduleSummaryTitle: document.getElementById('schedule-summary-title'),
+    scheduleSummaryDesc: document.getElementById('schedule-summary-desc'),
+    scheduleEmptyView: document.getElementById('schedule-empty-view'),
+    confirmAllDietBtn: document.getElementById('confirm-all-diet-btn'),
+    exampleTags: document.querySelectorAll('.example-tag'),
+    
+    // VLM tab
+    vlmOptNormal: document.getElementById('sim-opt-normal'),
+    vlmOptAlternative: document.getElementById('sim-opt-alternative'),
+    vlmTargetImage: document.getElementById('vlm-target-image'),
+    vlmViewportPlaceholder: document.querySelector('.viewport-placeholder'),
+    runVlmBtn: document.getElementById('run-vlm-btn'),
+    scannerLaser: document.getElementById('scanner-laser'),
+    vlmEmptyResult: document.getElementById('vlm-empty-result'),
+    vlmResultPanel: document.getElementById('vlm-result-panel'),
+    vlmVerdictBox: document.getElementById('vlm-verdict-box'),
+    verdictIconContainer: document.getElementById('verdict-icon-container'),
+    verdictTitle: document.getElementById('verdict-title'),
+    vlmMatchRate: document.getElementById('vlm-match-rate'),
+    vlmMatchValue: document.getElementById('vlm-match-value'),
+    vlmAllergenStatus: document.getElementById('vlm-allergen-status'),
+    vlmPortionStatus: document.getElementById('vlm-portion-status'),
+    vlmAnalysisReason: document.getElementById('vlm-analysis-reason'),
+    vlmActionFooter: document.getElementById('vlm-action-footer'),
+    triggerFileBtn: document.getElementById('trigger-file-btn'),
+    vlmFileInput: document.getElementById('vlm-file-input'),
+    
+    // Report tab
+    reportSubTabBtns: document.querySelectorAll('.sub-tab-btn'),
+    reportDocTitle: document.getElementById('report-doc-title'),
+    rFacilityName: document.getElementById('r-facility-name'),
+    rDate: document.getElementById('r-date'),
+    rWriter: document.getElementById('r-writer'),
+    reportDocContent: document.getElementById('report-doc-content'),
+    printReportBtn: document.getElementById('print-report-btn'),
+    reportConfirmStatement: document.getElementById('report-confirm-statement'),
+    reportSignerName: document.getElementById('report-signer-name'),
+    reportFooterDesc: document.getElementById('report-footer-desc'),
+    navReportBtn: document.getElementById('nav-report-btn'),
+    esgCo2: document.getElementById('esg-co2'),
+    esgTime: document.getElementById('esg-time'),
+    esgLocal: document.getElementById('esg-local'),
+    
+    // Modals & Forms
+    addMemberBtn: document.getElementById('add-member-btn'),
+    addMemberModal: document.getElementById('add-member-modal'),
+    closeMemberModalBtn: document.getElementById('close-member-modal-btn'),
+    cancelMemberBtn: document.getElementById('cancel-member-btn'),
+    memberForm: document.getElementById('member-form'),
+    modalMemberTitle: document.getElementById('modal-member-title'),
+    
+    apiConfigModal: document.getElementById('api-config-modal'),
+    closeApiModalBtn: document.getElementById('close-api-modal-btn'),
+    apiConfigForm: document.getElementById('api-config-form'),
+    apiKeyInput: document.getElementById('api-key-input'),
+    apiModelSelect: document.getElementById('api-model-select'),
+    toggleKeyVisibilityBtn: document.getElementById('toggle-key-visibility-btn'),
+    resetApiKeyBtn: document.getElementById('reset-api-key-btn')
+};
+
+// Templates
+const templates = {
+    weekly: `[월요일] 쌀밥, 계란말이, 어묵볶음, 요구르트\n[화요일] 잡곡밥, 소불고기, 고구마순나물, 두부국, 우유\n[수요일] 현미밥, 맑은 무국, 생선구이, 콩자반, 식혜\n[목요일] 쌀밥, 닭볶음탕, 오징어채무침, 땅콩조림, 사과주스\n[금요일] 잡곡밥, 버섯찌개, 계란찜, 시금치나물, 핫초코`,
+    monthly: `[1주 월요일] 쌀밥, 계란말이, 어묵볶음, 요구르트\n[1주 화요일] 잡곡밥, 소불고기, 시금치, 두부국, 우유\n[1주 수요일] 현미밥, 맑은 무국, 생선구이, 콩자반, 요구르트\n[1주 목요일] 쌀밥, 닭볶음탕, 오징어채무침, 땅콩조림, 주스\n[1주 금요일] 잡곡밥, 버섯찌개, 만두국, 고구마순나물, 요구르트\n[2주 월요일] 귀리밥, 돈까스, 샐러드, 계란국, 우유\n[2주 화요일] 쌀밥, 된장찌개, 갈치구이, 멸치볶음, 식혜`
+};
+
+// 1. Initial System Setup
+document.addEventListener('DOMContentLoaded', () => {
+    loadDatabase();
+    initThemeManager();
+    initModeToggler();
+    initTabs();
+    initFacilitySelector();
+    initCharts();
+    initDietAnalyzer();
+    initVlmScanner();
+    initReportCenter();
+    initModal();
+    initApiConfig();
+    
+    // Draw initial dashboard & status
+    switchTab('dashboard');
+    updateApiStatusUI();
+});
+
+// Load DB from localStorage or restore defaults if empty/not-present
+function loadDatabase() {
+    ['child', 'senior', 'family'].forEach(key => {
+        const stored = localStorage.getItem(`caremeal_members_${key}`);
+        if (stored && JSON.parse(stored).length > 0) {
+            state.members[key] = JSON.parse(stored);
+        } else {
+            state.members[key] = JSON.parse(JSON.stringify(defaultMembers[key]));
+            saveDatabase(key);
+        }
+    });
+    
+    const storedLogs = localStorage.getItem('caremeal_logs');
+    if (storedLogs) {
+        state.logs = JSON.parse(storedLogs);
+    }
+}
+
+function saveDatabase(key) {
+    localStorage.setItem(`caremeal_members_${key}`, JSON.stringify(state.members[key]));
+}
+
+function saveLogs() {
+    localStorage.setItem('caremeal_logs', JSON.stringify(state.logs));
+}
+
+// 2. Light / Dark Theme Management
+function initThemeManager() {
+    const storedTheme = localStorage.getItem('caremeal_theme') || 'light';
+    applyTheme(storedTheme);
+
+    elements.themeToggleBtn.addEventListener('click', () => {
+        const isDark = document.body.classList.contains('dark-mode');
+        const nextTheme = isDark ? 'light' : 'dark';
+        applyTheme(nextTheme);
+        localStorage.setItem('caremeal_theme', nextTheme);
+    });
+}
+
+function applyTheme(theme) {
+    const icon = elements.themeToggleBtn.querySelector('i');
+    const text = document.getElementById('theme-toggle-text');
+    
+    if (theme === 'dark') {
+        document.body.classList.add('dark-mode');
+        icon.className = 'fa-solid fa-sun';
+        text.textContent = '라이트 모드';
+    } else {
+        document.body.classList.remove('dark-mode');
+        icon.className = 'fa-solid fa-moon';
+        text.textContent = '다크 모드';
+    }
+}
+
+// 3. Mode Switching (Agency vs Family)
+function initModeToggler() {
+    const storedMode = localStorage.getItem('caremeal_mode');
+    if (storedMode) {
+        state.currentMode = storedMode;
+        elements.modeToggleCheckbox.checked = (storedMode === 'family');
+    }
+    
+    applyModeTheme();
+
+    elements.modeToggleCheckbox.addEventListener('change', (e) => {
+        state.currentMode = e.target.checked ? 'family' : 'agency';
+        localStorage.setItem('caremeal_mode', state.currentMode);
+        
+        applyModeTheme();
+        
+        resetDietUI();
+        resetVlmUI();
+        
+        switchTab(state.currentTab);
+        showNotification(`${state.currentMode === 'family' ? '가정(가족) 건강 케어' : '보건복지시설 관리'} 모드로 전환되었습니다.`);
+    });
+}
+
+function applyModeTheme() {
+    if (state.currentMode === 'family') {
+        elements.modeTextLeft.classList.remove('active-mode');
+        elements.modeTextRight.classList.add('active-mode');
+        elements.facilitySelectorWrapper.classList.add('hidden');
+        elements.mainBadge.textContent = '가족 건강 관리 모드';
+        elements.mainBadge.style.background = 'rgba(124, 58, 237, 0.08)';
+        elements.mainBadge.style.borderColor = 'rgba(124, 58, 237, 0.2)';
+        elements.mainBadge.style.color = '#7c3aed';
+        
+        elements.userAvatarInitial.textContent = '가';
+        elements.userDisplayName.textContent = '엄마/아빠';
+        elements.userDisplayRole.textContent = '우리 집 영양 안심 케어';
+        
+        elements.navReportBtn.innerHTML = '<i class="fa-solid fa-file-invoice"></i> <span>안전 증빙 일지</span>';
+    } else {
+        elements.modeTextLeft.classList.add('active-mode');
+        elements.modeTextRight.classList.remove('active-mode');
+        elements.facilitySelectorWrapper.classList.remove('hidden');
+        elements.mainBadge.textContent = '사보원 공공데이터 연계';
+        elements.mainBadge.style.background = 'rgba(37, 99, 235, 0.08)';
+        elements.mainBadge.style.borderColor = 'rgba(37, 99, 235, 0.2)';
+        elements.mainBadge.style.color = 'var(--color-blue)';
+        
+        elements.userAvatarInitial.textContent = '복';
+        elements.userDisplayName.textContent = '박아름 사회복지사';
+        elements.userDisplayRole.textContent = '마포구 시설 운영대표';
+        elements.navReportBtn.innerHTML = '<i class="fa-solid fa-file-shield"></i> <span>평가 증빙 & ESG</span>';
+    }
+}
+
+// 4. Navigation System
+function initTabs() {
+    elements.navButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const tabId = btn.getAttribute('data-tab');
+            switchTab(tabId);
+        });
+    });
+}
+
+function switchTab(tabId) {
+    state.currentTab = tabId;
+    
+    elements.navButtons.forEach(btn => {
+        if (btn.getAttribute('data-tab') === tabId) {
+            btn.classList.add('active');
+        } else {
+            btn.classList.remove('active');
+        }
+    });
+
+    elements.tabContents.forEach(content => {
+        if (content.id === tabId) {
+            content.classList.add('active-tab');
+        } else {
+            content.classList.remove('active-tab');
+        }
+    });
+
+    updateHeaderTitles(tabId);
+    
+    if (tabId === 'dashboard') {
+        renderDashboard();
+        setTimeout(() => updateCharts(), 100);
+    } else if (tabId === 'report-generator') {
+        renderReport();
+        setTimeout(() => updateCharts(), 100);
+    }
+}
+
+function updateHeaderTitles(tabId) {
+    let modeTitle = '';
+    if (state.currentMode === 'family') {
+        modeTitle = '가족 건강 스케줄러';
+    } else {
+        modeTitle = state.currentFacility === 'child' ? '튼튼어린이집' : '행복실버요양원';
+    }
+    
+    switch (tabId) {
+        case 'dashboard':
+            elements.pageMainTitle.textContent = `${modeTitle} 종합 대시보드`;
+            elements.pageSubTitle.textContent = state.currentMode === 'family'
+                ? '가정 내 가족별 알레르기 및 유해인자 스크리닝 요약'
+                : '시설 맞춤형 프로파일 및 취약계층 급식 위험 관리 요약';
+            break;
+        case 'diet-analyzer':
+            elements.pageMainTitle.textContent = '주간/월간 식단 AI 대량 분석';
+            elements.pageSubTitle.textContent = '식단표를 붙여넣으면 OpenRouter AI 모델이 캘린더 대체 식단과 레시피를 일목요연하게 자동 분석합니다.';
+            break;
+        case 'vlm-scanner':
+            elements.pageMainTitle.textContent = 'VLM 배식 오배 예방 모니터';
+            elements.pageSubTitle.textContent = '배식 직전 촬영된 식판 이미지를 Vision AI가 분석하여 제한 식재료 교차 감지를 실시간 2차 예방합니다.';
+            break;
+        case 'report-generator':
+            elements.pageMainTitle.textContent = state.currentMode === 'family' ? '가정용 식단 위생 안전 일지' : '사회보장/가족 건강 데이터 증빙 센터';
+            elements.pageSubTitle.textContent = state.currentMode === 'family'
+                ? '가정 내 배식 일지 보관 및 페이퍼리스 디지털 케어 실천 점수'
+                : '한국사회보장정보원 시스템 제출용 증빙 서류 자동 생성 및 ESG 혁신 통계';
+            break;
+    }
+}
+
+// Render Dashboard Panel
+function renderDashboard() {
+    const listKey = state.currentMode === 'family' ? 'family' : state.currentFacility;
+    const list = state.members[listKey];
+    const totalMembers = list.length;
+    const riskMembers = list.filter(m => m.type !== '일반').length;
+    const totalSavedTime = (state.logs.filter(l => state.currentMode === 'family' ? l.facility === 'family' : l.facility === state.currentFacility).length * 4.2).toFixed(1);
+    
+    if (state.currentMode === 'family') {
+        elements.lblTotalMembers.textContent = '가족 등록 인원';
+        elements.lblTotalDesc.innerHTML = '<i class="fa-solid fa-house"></i> 가정용 프로필 기준';
+        elements.lblSavedTime.textContent = '가사 노동 및 행정 절감 시간';
+        elements.lblSavedDesc.innerHTML = '<i class="fa-solid fa-clock"></i> 식단 작성 및 증빙 자동화 효과';
+        elements.panelMemberTitle.innerHTML = '<i class="fa-solid fa-people-roof"></i> 가족 구성원 건강/알레르기 DB';
+        elements.esgBottomDesc.textContent = '친환경 로컬 식단 구성 및 식료품 소비 데이터 연동을 통해 에코 탄소 마일리지 120kg CO2e 감축 기여';
+        elements.modalMemberTitle.innerHTML = '<i class="fa-solid fa-house-chimney-medical"></i> 가족 건강 프로필 신규 등록';
+    } else {
+        elements.lblTotalMembers.textContent = '관리 대상자 수';
+        elements.lblTotalDesc.innerHTML = '<i class="fa-solid fa-circle-info"></i> 사보원 데이터 기준';
+        elements.lblSavedTime.textContent = '누적 행정 절감 시간';
+        elements.lblSavedDesc.innerHTML = '<i class="fa-solid fa-arrow-trend-up"></i> 돌봄 시간으로 환원됨';
+        elements.panelMemberTitle.innerHTML = '<i class="fa-solid fa-id-card"></i> 대상자 집중 관리 명단';
+        elements.esgBottomDesc.textContent = '친환경 저탄소 식단 추천 및 페이퍼리스 행정 자동화를 통한 탄소 발자국 240kg CO2e 감축 달성';
+        elements.modalMemberTitle.innerHTML = '<i class="fa-solid fa-user-plus"></i> 신규 관리 대상자 등록';
+    }
+
+    elements.statTotalMembers.textContent = `${totalMembers}명`;
+    elements.statRiskMembers.textContent = `${riskMembers}명`;
+    elements.statSavedTime.textContent = `${totalSavedTime}시간`;
+    elements.statSafetyScore.textContent = '100%';
+
+    elements.memberTableBody.innerHTML = '';
+    
+    list.forEach(member => {
+        const tr = document.createElement('tr');
+        
+        const riskTag = member.type === '일반' 
+            ? `<span style="color:var(--text-muted)">일반 급식군</span>`
+            : `<span class="risk-tag ${member.type === '알레르기' ? 'allergy' : 'disease'}">${member.type}: ${member.detail}</span>`;
+
+        tr.innerHTML = `
+            <td><strong>${member.name}</strong></td>
+            <td>${member.age}</td>
+            <td>${riskTag}</td>
+            <td style="color: var(--text-secondary); max-width: 250px; line-height: 1.4;">${member.instruction}</td>
+            <td>
+                <button class="delete-member-btn" onclick="deleteMember(${member.id})">
+                    <i class="fa-solid fa-trash-can"></i>
+                </button>
+            </td>
+        `;
+        elements.memberTableBody.appendChild(tr);
+    });
+}
+
+// Facility switch logic for agency mode
+function initFacilitySelector() {
+    elements.facilitySelect.addEventListener('change', (e) => {
+        state.currentFacility = e.target.value;
+        
+        resetDietUI();
+        resetVlmUI();
+        
+        switchTab(state.currentTab);
+        showNotification(`${state.currentFacility === 'child' ? '보육시설 (어린이집)' : '노인요양시설 (실버케어)'} 데이터로 갱신되었습니다.`);
+    });
+}
+
+// 5. Diet Bulk Scheduler and OpenRouter API Engine
+function initDietAnalyzer() {
+    elements.dietBulkInput.value = state.currentMode === 'family' ? `[월요일] 쌀밥, 계란말이, 요구르트\n[화요일] 쌀식빵, 사과잼, 우유\n[수요일] 잡곡밥, 돈까스, 샐러드` : templates.weekly;
+    
+    elements.exampleTags.forEach(tag => {
+        tag.addEventListener('click', () => {
+            elements.exampleTags.forEach(t => t.classList.remove('active'));
+            tag.classList.add('active');
+            const period = tag.getAttribute('data-period');
+            elements.dietBulkInput.value = templates[period];
+        });
+    });
+
+    elements.analyzeDietBtn.addEventListener('click', async () => {
+        const textInput = elements.dietBulkInput.value.trim();
+        if (!textInput) return;
+        
+        state.activeDietInput = textInput;
+        
+        elements.scheduleEmptyView.classList.add('hidden');
+        elements.scheduleResultView.classList.add('hidden');
+        elements.analyzerLoading.classList.remove('hidden');
+        elements.analyzeDietBtn.disabled = true;
+        
+        elements.loadingText.textContent = apiConfig.key 
+            ? "오픈라우터 무료 AI 모델과 실시간 통신 중입니다 (API 폴백 활성화)..."
+            : "인터넷 지연 및 API 키 미검출에 따라 로컬 고성능 시뮬레이션 알고리즘으로 폴백하여 식단을 분석하는 중...";
+
+        try {
+            if (apiConfig.key) {
+                // Call real OpenRouter API with Fallback Chain
+                state.analysisResult = await callOpenRouterLLMFallback(textInput);
+            } else {
+                await new Promise(resolve => setTimeout(resolve, 1200));
+                state.analysisResult = runLocalSimParser(textInput);
+            }
+            
+            renderScheduleCards();
+        } catch (error) {
+            console.error(error);
+            showNotification("AI 모델 호출 실패로 안전 시뮬레이션 데이터로 대체 처리합니다.");
+            state.analysisResult = runLocalSimParser(textInput);
+            renderScheduleCards();
+        } finally {
+            elements.analyzerLoading.classList.add('hidden');
+            elements.analyzeDietBtn.disabled = false;
+        }
+    });
+
+    elements.confirmAllDietBtn.addEventListener('click', () => {
+        showNotification("대체 가이드라인을 반영하여 전체 주간/월간 식단 검토가 확정되었습니다. 배식 검증 단계를 진행하십시오.");
+        switchTab('vlm-scanner');
+        
+        elements.runVlmBtn.disabled = false;
+        elements.vlmOptNormal.click();
+    });
+}
+
+function resetDietUI() {
+    elements.dietBulkInput.value = state.currentMode === 'family' ? `[월요일] 쌀밥, 계란말이, 요구르트\n[화요일] 쌀식빵, 사과잼, 우유\n[수요일] 잡곡밥, 돈까스, 샐러드` : templates.weekly;
+    elements.scheduleEmptyView.classList.remove('hidden');
+    elements.scheduleResultView.classList.add('hidden');
+    elements.analyzerLoading.classList.add('hidden');
+}
+
+// LLM Fallback Sequential API Calling
+async function callOpenRouterLLMFallback(dietText) {
+    const listKey = state.currentMode === 'family' ? 'family' : state.currentFacility;
+    const list = state.members[listKey];
+    const memberProfileStr = list.map(m => `- 이름: ${m.name}, 유형: ${m.type}, 원인물질/질환: ${m.detail}, 처방: ${m.instruction}`).join('\n');
+    
+    const prompt = `
+당신은 취약계층 급식 또는 가정을 관리하는 영양 안전 케어 AI 시스템인 CareTable입니다.
+다음 입력된 식단표를 바탕으로 현재 관리 대상자들의 알레르기 및 만성질환 유해 성분 정보와 비교하여 위험 요소를 분석하고 대체 식단과 위생/조리지침 레시피 가이드를 수립하십시오.
+
+[수혜 대상자 알레르기/질환 명단]
+${memberProfileStr}
+
+[식단표]
+${dietText}
+
+[출력 요구사항]
+반드시 다른 잡다한 말(인사말 등)이나 마크업(```json 등)을 작성하지 말고 오직 아래 양식에 맞춘 유효한 JSON 배열만 출력하십시오.
+
+JSON 양식:
+[
+  {
+    "day": "요일/일자 구분 (예: 월요일 또는 1주 화요일)",
+    "date": "임의의 날짜 (예: 06/01)",
+    "hasRisk": true/false (유해인자가 식단에 감지되면 true, 없으면 false),
+    "risks": ["감지된 위험 요소 상세 요약 (예: 김민수(달걀 알레르기) - 계란말이 유래 성분 충돌)"],
+    "menuOrig": "입력된 원래 식단",
+    "menuAlt": "대체 처방이 적용된 신규 식단 (원래 식단에서 위험 성분 제거/대체식 교체)",
+    "recipe": "조리 지침 및 주의 가이드 (교차오염 방지 및 대체 조리법 서술)"
+  }
+]
+`;
+
+    // Try selected model first
+    const modelsToTry = [apiConfig.model, ...freeLLMModels.filter(m => m !== apiConfig.model)];
+    
+    for (let model of modelsToTry) {
+        try {
+            console.log(`Trying OpenRouter LLM model: ${model}`);
+            const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${apiConfig.key}`,
+                    "Content-Type": "application/json",
+                    "HTTP-Referer": "https://huggingface.co/spaces/HwangJinwook/caretable", 
+                    "X-Title": "CareTable Client"
+                },
+                body: JSON.stringify({
+                    model: model,
+                    messages: [
+                        { role: "system", content: "You are an expert clinical dietitian AI. Output only JSON array. Do not wrap in markdown codeblocks." },
+                        { role: "user", content: prompt }
+                    ]
+                })
+            });
+
+            if (!res.ok) continue; // Try next model on failure
+
+            const data = await res.json();
+            let text = data.choices[0].message.content.trim();
+            
+            if (text.includes("```json")) {
+                text = text.split("```json")[1].split("```")[0].trim();
+            } else if (text.includes("```")) {
+                text = text.split("```")[1].split("```")[0].trim();
+            }
+            
+            return JSON.parse(text);
+        } catch (e) {
+            console.warn(`Model ${model} failed: `, e);
+        }
+    }
+    
+    throw new Error("All free OpenRouter LLM models failed.");
+}
+
+// Local simulation fallback parser
+function runLocalSimParser(dietText) {
+    const listKey = state.currentMode === 'family' ? 'family' : state.currentFacility;
+    const list = state.members[listKey];
+    const lines = dietText.split('\n').filter(l => l.trim().length > 0);
+    
+    const results = [];
+    
+    lines.forEach((line, index) => {
+        const dayMatch = line.match(/^\[(.*?)\]/);
+        const dayName = dayMatch ? dayMatch[1] : `일차 ${index+1}`;
+        const menuString = line.replace(/^\[.*?\]/, '').trim();
+        const foods = menuString.split(',').map(f => f.trim());
+        
+        const risks = [];
+        const alternatives = [];
+        const guidelines = [];
+        
+        foods.forEach(food => {
+            list.forEach(m => {
+                if (m.type === '알레르기') {
+                    const allergens = m.detail.split(',').map(a => a.trim());
+                    allergens.forEach(allergen => {
+                        if (isAllergenContained(food, allergen)) {
+                            risks.push(`${m.name} (${allergen} 알레르기) - ${food} 성분 유의`);
+                            const repl = getAlternativeFood(food, allergen);
+                            alternatives.push({ from: food, to: repl.food });
+                            guidelines.push(`${m.name}의 알레르기 교차오염을 차단하기 위해 ${food} 대체식 조리 시 도구 분리 사용.`);
+                        }
+                    });
+                } else if (m.type === '질환식') {
+                    if (m.detail.includes('당뇨') && (food.includes('밥') || food.includes('요플레') || food.includes('요구르트') || food.includes('설탕'))) {
+                        if (!food.includes('잡곡') && !food.includes('현미')) {
+                            risks.push(`${m.name} (당뇨 케어) - ${food} 단순당/혈당상승 위험`);
+                            const repl = getAlternativeFood(food, '당뇨');
+                            alternatives.push({ from: food, to: repl.food });
+                            guidelines.push(`${m.name} 어르신의 급격한 인슐린 반응 억제를 위한 저당 잡곡밥 믹싱 및 천연 에리스리톨 가미.`);
+                        }
+                    }
+                    if (m.detail.includes('유당불내증') && (food.includes('요구르트') || food.includes('우유') || food.includes('요플레'))) {
+                        risks.push(`${m.name} (유당불내) - ${food} 유당 함유 위험`);
+                        const repl = getAlternativeFood(food, '유당불내증');
+                        alternatives.push({ from: food, to: repl.food });
+                        guidelines.push(`${m.name}님에게 일반 요구르트/유제품 대신 대체 두유 팩 제공.`);
+                    }
+                    if (m.detail.includes('통풍') && (food.includes('조개') || food.includes('새우') || food.includes('맥주'))) {
+                        risks.push(`${m.name} (통풍 케어) - ${food} 고퓨린 성분 위험`);
+                        alternatives.push({ from: food, to: '버섯구이 또는 야채찜' });
+                        guidelines.push(`통풍 발작 예방을 위해 퓨린 함량이 높은 해산물 요리 대신 식이섬유가 많은 뿌리채소 구이로 교체.`);
+                    }
+                }
+            });
+        });
+        
+        const hasRisk = risks.length > 0;
+        
+        let menuAlt = menuString;
+        alternatives.forEach(alt => {
+            menuAlt = menuAlt.replace(alt.from, alt.to);
+        });
+        
+        let recipe = '';
+        if (hasRisk) {
+            recipe = `[대체 조리 수칙]\n` + guidelines.map((g, i) => `${i+1}. ${g}`).join('\n');
+        } else {
+            recipe = "일반 조리 시설 보건 위생 규정 및 교차 오염 기본 예방 수칙을 준수하여 정성껏 위생 조리하십시오.";
+        }
+        
+        const dateObj = new Date();
+        dateObj.setDate(dateObj.getDate() + index);
+        const dateStr = `${String(dateObj.getMonth() + 1).padStart(2, '0')}/${String(dateObj.getDate()).padStart(2, '0')}`;
+        
+        results.push({
+            day: dayName,
+            date: dateStr,
+            hasRisk: hasRisk,
+            risks: risks,
+            menuOrig: menuString,
+            menuAlt: menuAlt,
+            recipe: recipe
+        });
+    });
+    
+    return results;
+}
+
+function isAllergenContained(food, allergen) {
+    if (allergen === '달걀' && (food.includes('계란') || food.includes('달걀') || food.includes('난황') || food.includes('알'))) return true;
+    if (allergen === '우유' && (food.includes('우유') || food.includes('밀크') || food.includes('요구르트') || food.includes('야쿠르트') || food.includes('요플레') || food.includes('치즈'))) return true;
+    if (allergen === '땅콩' && (food.includes('땅콩') || food.includes('피넛') || food.includes('견과'))) return true;
+    if (allergen === '대두' && (food.includes('대두') || food.includes('콩') || food.includes('간장') || food.includes('된장') || food.includes('두부'))) return true;
+    return food.includes(allergen);
+}
+
+function getAlternativeFood(food, allergen) {
+    if (allergen === '달걀') {
+        return { food: '두부구이 (연화처리)', reason: '대체 단백질 및 가루 응집 식감 구현 가능, 알레르기 제로' };
+    }
+    if (allergen === '우유') {
+        return { food: '오렌지주스 (무칼슘/천연)', reason: '우유 지질 성분 제로 및 비타민 보존 대체' };
+    }
+    if (allergen === '당뇨') {
+        if (food.includes('밥')) return { food: '귀리잡곡밥', reason: '식이섬유가 풍부하여 식후 혈당 급상승을 예방하는 복합탄수화물 대체' };
+        if (food.includes('요플레')) return { food: '무설탕 플레인 요거트', reason: '과당/정제 설탕 배제로 인슐린 급증 억제' };
+        return { food: '저당 식이 반찬', reason: '천연 대체 감미료 조리법 적용' };
+    }
+    if (allergen === '유당불내증') {
+        return { food: '약콩 두유 (락토프리)', reason: '유당 불포함 천연 유기농 식물성 단유 대체' };
+    }
+    return { food: '대체 자연식품', reason: '식약처 식자재 DB 대체 지표에 따른 추천' };
+}
+
+// Render schedule cards in DOM
+function renderScheduleCards() {
+    elements.scheduleCardsContainer.innerHTML = '';
+    
+    const results = state.analysisResult;
+    const hasAnyRisk = results.some(r => r.hasRisk);
+    const riskCount = results.filter(r => r.hasRisk).length;
+    
+    if (hasAnyRisk) {
+        elements.scheduleStatusBanner.className = 'summary-status-badge alert-red';
+        elements.scheduleSummaryTitle.textContent = '대체식 처방 식단 스케줄 생성 완료';
+        elements.scheduleSummaryDesc.textContent = `전체 분석 식단 중 ${riskCount}일의 식단에서 유해 요인이 확인되어 AI 대체 처방 및 안전 조리법을 발행했습니다.`;
+        elements.scheduleStatusBanner.querySelector('i').className = 'fa-solid fa-circle-exclamation text-red animate-bounce';
+    } else {
+        elements.scheduleStatusBanner.className = 'summary-status-badge safe-green';
+        elements.scheduleSummaryTitle.textContent = '식단 스크리닝 통과 (전원 안전)';
+        elements.scheduleSummaryDesc.textContent = '입력된 식단 전체에서 현재 등록된 대상자들의 알레르기 및 만성질환 위험군 제한 물질이 검출되지 않았습니다.';
+        elements.scheduleStatusBanner.querySelector('i').className = 'fa-solid fa-circle-check text-green';
+    }
+
+    results.forEach((item, idx) => {
+        const card = document.createElement('div');
+        card.className = `schedule-card ${item.hasRisk ? 'has-risk' : 'is-safe'}`;
+        
+        const statusPill = item.hasRisk 
+            ? `<span class="status-pill danger">위험 처방 완료</span>`
+            : `<span class="status-pill success">검증 통과</span>`;
+
+        card.innerHTML = `
+            <div class="card-header-toggle" onclick="toggleCardAccordion(${idx})">
+                <div class="header-day-info">
+                    <span class="day-title">[${item.day}]</span>
+                    <span class="day-date">예정일자: ${item.date}</span>
+                </div>
+                <div class="status-indicator-box">
+                    ${statusPill}
+                    <i class="fa-solid fa-chevron-down toggle-arrow-icon" id="arrow-${idx}"></i>
+                </div>
+            </div>
+            
+            <div class="accordion-content" id="accordion-${idx}">
+                <div class="card-body-details">
+                    <div class="menu-orig-box">
+                        <h5>기존 원본 식단</h5>
+                        <p class="menu-content-text" style="${item.hasRisk ? 'color: var(--text-secondary); text-decoration: line-through;' : ''}">
+                            ${item.menuOrig}
+                        </p>
+                    </div>
+                    
+                    ${item.hasRisk ? `
+                    <div class="menu-alt-box">
+                        <h5>AI 처방 대체식 식단</h5>
+                        <p class="menu-content-text text-green font-bold">
+                            ${item.menuAlt}
+                        </p>
+                    </div>
+                    
+                    <div class="detected-risk-sublist" style="background: rgba(220,38,38,0.03); border-left: 2px solid var(--color-red); padding: 8px 12px; border-radius: 4px; font-size:11px;">
+                        <strong class="text-red">충돌 정보:</strong><br>
+                        ${item.risks.map(r => `• ${r}`).join('<br>')}
+                    </div>
+                    ` : ''}
+                    
+                    <div class="recipe-guide-box">
+                        <h5>${item.hasRisk ? 'AI 맞춤 조리 가이드라인' : '표준 조리 지침'}</h5>
+                        <p class="recipe-content-text">
+                            ${item.recipe.replace(/\n/g, '<br>')}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        elements.scheduleCardsContainer.appendChild(card);
+    });
+
+    elements.scheduleResultView.classList.remove('hidden');
+}
+
+window.toggleCardAccordion = function(index) {
+    const content = document.getElementById(`accordion-${index}`);
+    const arrow = document.getElementById(`arrow-${index}`);
+    
+    if (content.classList.contains('expanded')) {
+        content.classList.remove('expanded');
+        arrow.classList.remove('rotate-icon');
+    } else {
+        content.classList.add('expanded');
+        arrow.classList.add('rotate-icon');
+    }
+};
+
+// 6. VLM Scanner Integration
+function initVlmScanner() {
+    elements.vlmOptNormal.addEventListener('click', () => {
+        selectVlmImage('normal');
+    });
+
+    elements.vlmOptAlternative.addEventListener('click', () => {
+        selectVlmImage('alternative');
+    });
+
+    elements.triggerFileBtn.addEventListener('click', () => {
+        elements.vlmFileInput.click();
+    });
+
+    elements.vlmFileInput.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            state.customVlmImageSrc = event.target.result;
+            selectVlmImage('custom');
+        };
+        reader.readAsDataURL(file);
+    });
+
+    elements.runVlmBtn.addEventListener('click', async () => {
+        if (!state.selectedVlmImage) return;
+        
+        elements.vlmEmptyResult.classList.add('hidden');
+        elements.vlmResultPanel.classList.add('hidden');
+        elements.scannerLaser.style.display = 'block';
+        elements.scannerLaser.style.animation = 'scan 2.5s infinite linear';
+        elements.runVlmBtn.disabled = true;
+
+        try {
+            if (apiConfig.key && (state.selectedVlmImage === 'custom' || state.customVlmImageSrc)) {
+                // Call Real OpenRouter VLM (Vision) models
+                const visionResult = await callOpenRouterVLMFallback();
+                // Fill result with vision result
+                setTimeout(() => {
+                    elements.scannerLaser.style.display = 'none';
+                    elements.scannerLaser.style.animation = 'none';
+                    elements.runVlmBtn.disabled = false;
+                    renderVlmResult(visionResult);
+                }, 2500);
+            } else {
+                // Default Sim Fallback
+                setTimeout(() => {
+                    elements.scannerLaser.style.display = 'none';
+                    elements.scannerLaser.style.animation = 'none';
+                    elements.runVlmBtn.disabled = false;
+                    showVlmScanResult();
+                }, 2500);
+            }
+        } catch (error) {
+            console.error(error);
+            showNotification("VLM 모델 인식 지연으로 시뮬레이션 결과로 연동 대체합니다.");
+            setTimeout(() => {
+                elements.scannerLaser.style.display = 'none';
+                elements.scannerLaser.style.animation = 'none';
+                elements.runVlmBtn.disabled = false;
+                showVlmScanResult();
+            }, 1000);
+        }
+    });
+}
+
+// OpenRouter VLM Vision Fallback Call
+async function callOpenRouterVLMFallback() {
+    const listKey = state.currentMode === 'family' ? 'family' : state.currentFacility;
+    const list = state.members[listKey];
+    const memberProfileStr = list.map(m => `- 이름: ${m.name}, 유형: ${m.type}, 원인물질/질환: ${m.detail}`).join('\n');
+
+    const prompt = `
+이 이미지는 배식 조리 완료된 식판 사진입니다.
+아래에 제공된 관리 대상자들의 알레르기/질환 과민 반응 제한 성분 목록을 분석하여, 이 식판에 해당 대상자에게 유해한 식품이나 알레르기 유발 요소가 오배식 되었는지 검증하십시오.
+
+[제한 대상 명단]
+${memberProfileStr}
+
+반드시 다른 텍스트 설명 없이 오직 아래 형태의 JSON 객체 하나만 반환하십시오:
+{
+  "verdict": "PASS" 또는 "REJECT" (위해물질이 없으면 PASS, 있으면 REJECT),
+  "allergen": "검출된 유해 물질 요약 (예: 달걀 성분 또는 없음)",
+  "portion": "정량 및 형태 분석 (예: 적정 배식 98% 또는 적정)",
+  "reason": "AI Vision 분석 상세 근거 (식판 내 물체의 위치 및 매칭 사유)"
+}
+`;
+
+    const base64Image = state.customVlmImageSrc.split(',')[1];
+
+    for (let model of freeVLMModels) {
+        try {
+            console.log(`Trying OpenRouter VLM model: ${model}`);
+            const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${apiConfig.key}`,
+                    "Content-Type": "application/json",
+                    "HTTP-Referer": "https://huggingface.co/spaces/HwangJinwook/caretable", 
+                    "X-Title": "CareTable Client"
+                },
+                body: JSON.stringify({
+                    model: model,
+                    messages: [
+                        {
+                            role: "user",
+                            content: [
+                                { type: "text", text: prompt },
+                                {
+                                    type: "image_url",
+                                    image_url: {
+                                        url: `data:image/jpeg;base64,${base64Image}`
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                })
+            });
+
+            if (!res.ok) continue;
+
+            const data = await res.json();
+            let text = data.choices[0].message.content.trim();
+            
+            if (text.includes("```json")) {
+                text = text.split("```json")[1].split("```")[0].trim();
+            } else if (text.includes("```")) {
+                text = text.split("```")[1].split("```")[0].trim();
+            }
+
+            return JSON.parse(text);
+        } catch (e) {
+            console.warn(`VLM Model ${model} failed: `, e);
+        }
+    }
+
+    throw new Error("All free OpenRouter VLM models failed.");
+}
+
+function renderVlmResult(apiResult) {
+    elements.vlmResultPanel.classList.remove('hidden');
+    
+    if (apiResult.verdict === 'REJECT') {
+        elements.vlmVerdictBox.className = 'vlm-verdict-box rejected';
+        elements.verdictIconContainer.innerHTML = '<i class="fa-solid fa-circle-xmark"></i>';
+        elements.verdictTitle.textContent = '배식 보류 (REJECTED)';
+        
+        elements.vlmMatchRate.style.width = '72%';
+        elements.vlmMatchRate.style.backgroundColor = 'var(--color-red)';
+        elements.vlmMatchValue.textContent = '72%';
+        
+        elements.vlmAllergenStatus.textContent = apiResult.allergen;
+        elements.vlmAllergenStatus.className = 'detail-value text-red';
+        elements.vlmPortionStatus.textContent = apiResult.portion;
+        elements.vlmAnalysisReason.textContent = apiResult.reason;
+        
+        elements.vlmActionFooter.innerHTML = `
+            <button class="secondary-btn" onclick="switchTab('diet-analyzer')"><i class="fa-solid fa-calendar-days"></i> 식단 분석 재진행</button>
+            <button class="primary-btn" style="background:var(--gradient-danger);" disabled><i class="fa-solid fa-ban"></i> 배식 불가 상태</button>
+        `;
+    } else {
+        elements.vlmVerdictBox.className = 'vlm-verdict-box passed';
+        elements.verdictIconContainer.innerHTML = '<i class="fa-solid fa-circle-check"></i>';
+        elements.verdictTitle.textContent = '배식 승인 (PASSED)';
+        
+        elements.vlmMatchRate.style.width = '99%';
+        elements.vlmMatchRate.style.backgroundColor = 'var(--color-green)';
+        elements.vlmMatchValue.textContent = '99%';
+        
+        elements.vlmAllergenStatus.textContent = '유해 성분 없음 (검증 완료)';
+        elements.vlmAllergenStatus.className = 'detail-value text-green';
+        elements.vlmPortionStatus.textContent = apiResult.portion;
+        elements.vlmAnalysisReason.textContent = apiResult.reason;
+        
+        elements.vlmActionFooter.innerHTML = `
+            <button id="approve-final-btn" class="primary-btn" style="background:var(--gradient-success); width:100%;"><i class="fa-solid fa-circle-check"></i> 최종 배식 확정 및 디지털 이력 저장</button>
+        `;
+        
+        document.getElementById('approve-final-btn').addEventListener('click', saveFinalVerificationLog);
+    }
+}
+
+function selectVlmImage(type) {
+    state.selectedVlmImage = type;
+    elements.vlmViewportPlaceholder.classList.add('hidden');
+    elements.vlmTargetImage.classList.remove('hidden');
+    
+    elements.vlmOptNormal.classList.remove('selected');
+    elements.vlmOptAlternative.classList.remove('selected');
+    
+    if (type === 'normal') {
+        elements.vlmTargetImage.src = 'assets/meal_normal.png';
+        elements.vlmOptNormal.classList.add('selected');
+    } else if (type === 'alternative') {
+        elements.vlmTargetImage.src = 'assets/meal_alternative.png';
+        elements.vlmOptAlternative.classList.add('selected');
+    } else if (type === 'custom' && state.customVlmImageSrc) {
+        elements.vlmTargetImage.src = state.customVlmImageSrc;
+    }
+    
+    elements.runVlmBtn.disabled = false;
+}
+
+function resetVlmUI() {
+    state.selectedVlmImage = null;
+    state.customVlmImageSrc = null;
+    state.vlmApproved = false;
+    elements.vlmViewportPlaceholder.classList.remove('hidden');
+    elements.vlmTargetImage.classList.add('hidden');
+    elements.vlmTargetImage.src = '';
+    elements.vlmOptNormal.classList.remove('selected');
+    elements.vlmOptAlternative.classList.remove('selected');
+    elements.vlmEmptyResult.classList.remove('hidden');
+    elements.vlmResultPanel.classList.add('hidden');
+    elements.runVlmBtn.disabled = true;
+    elements.vlmFileInput.value = '';
+}
+
+function showVlmScanResult() {
+    elements.vlmResultPanel.classList.remove('hidden');
+    
+    if (state.selectedVlmImage === 'normal') {
+        elements.vlmVerdictBox.className = 'vlm-verdict-box rejected';
+        elements.verdictIconContainer.innerHTML = '<i class="fa-solid fa-circle-xmark"></i>';
+        elements.verdictTitle.textContent = '배식 보류 (REJECTED)';
+        
+        elements.vlmMatchRate.style.width = '70%';
+        elements.vlmMatchRate.style.backgroundColor = 'var(--color-red)';
+        elements.vlmMatchValue.textContent = '70%';
+        
+        if (state.currentMode === 'family') {
+            elements.vlmAllergenStatus.textContent = '계란 및 요구르트 포함 (막내아들 알러지 충돌)';
+            elements.vlmAllergenStatus.className = 'detail-value text-red';
+            elements.vlmAnalysisReason.textContent = 'Vision 분석 결과, 준비된 식판에 계란말이와 일반 우유 성분 요구르트가 감지되었습니다. 막내아들(우유/밀가루 알레르기)에게는 유해하므로 대체 배식으로 교체하십시오.';
+        } else if (state.currentFacility === 'child') {
+            elements.vlmAllergenStatus.textContent = '달걀, 우유 성분 검출 (김민수 아동 위험)';
+            elements.vlmAllergenStatus.className = 'detail-value text-red';
+            elements.vlmAnalysisReason.textContent = 'Vision 분석 결과, 튼튼어린이집 김민수 아동의 유해 인자인 달걀 성분의 계란말이 및 우유 성분의 요구르트가 그대로 배식되어 오배식 경고를 발동합니다.';
+        } else {
+            elements.vlmAllergenStatus.textContent = '백미 쌀밥 및 가당 유제품 검출 (노인 질환 위험)';
+            elements.vlmAllergenStatus.className = 'detail-value text-red';
+            elements.vlmAnalysisReason.textContent = 'Vision 분석 결과, 요양시설 당뇨 최옥분 어르신과 유당불내 이명자 어르신에게 유해한 백미 쌀밥 및 요플레가 확인되었습니다. 배식을 차단하고 저당 잡곡밥 및 락토프리 두유로 재배식하십시오.';
+        }
+        
+        elements.vlmPortionStatus.textContent = '배식량 적정 (94%)';
+        
+        elements.vlmActionFooter.innerHTML = `
+            <button class="secondary-btn" onclick="switchTab('diet-analyzer')"><i class="fa-solid fa-calendar-days"></i> 식단 분석 재진행</button>
+            <button class="primary-btn" style="background:var(--gradient-danger);" disabled><i class="fa-solid fa-ban"></i> 배식 불가 상태</button>
+        `;
+    } else {
+        elements.vlmVerdictBox.className = 'vlm-verdict-box passed';
+        elements.verdictIconContainer.innerHTML = '<i class="fa-solid fa-circle-check"></i>';
+        elements.verdictTitle.textContent = '배식 승인 (PASSED)';
+        
+        elements.vlmMatchRate.style.width = '99%';
+        elements.vlmMatchRate.style.backgroundColor = 'var(--color-green)';
+        elements.vlmMatchValue.textContent = '99%';
+        elements.vlmAllergenStatus.textContent = '위험 성분 없음 (대체식 안전 적용 완료)';
+        elements.vlmAllergenStatus.className = 'detail-value text-green';
+        
+        if (state.selectedVlmImage === 'custom') {
+            elements.vlmAnalysisReason.textContent = '직접 업로드한 사진 분석 결과, 조리지침에 따른 대체 구성 성분 매칭이 완벽하여 위험 물질이 전혀 감지되지 않았습니다. 안전 배식이 허가되었습니다.';
+        } else if (state.currentMode === 'family') {
+            elements.vlmAnalysisReason.textContent = 'Vision 분석 결과, 계란말이 대신 두부구이와 일반 요구르트 대신 유당 성분이 없는 오렌지주스가 완벽히 배식되어 막내아들 및 가족 알레르기 수칙 통과를 보증합니다.';
+        } else if (state.currentFacility === 'child') {
+            elements.vlmAnalysisReason.textContent = 'Vision 분석 결과, 김민수 아동의 대체 처방 식자재인 두부구이와 오렌지주스가 오배식 없이 완벽 매핑되었습니다.';
+        } else {
+            elements.vlmAnalysisReason.textContent = 'Vision 분석 결과, 당뇨 및 유당불내 어르신들에게 적합한 잡곡밥 및 락토프리 두유 대체 급식이 검증 완료되었습니다.';
+        }
+        
+        elements.vlmPortionStatus.textContent = '정량 배식 검증 (98%)';
+        
+        elements.vlmActionFooter.innerHTML = `
+            <button id="approve-final-btn" class="primary-btn" style="background:var(--gradient-success); width:100%;"><i class="fa-solid fa-circle-check"></i> 최종 배식 확정 및 디지털 이력 저장</button>
+        `;
+        
+        document.getElementById('approve-final-btn').addEventListener('click', saveFinalVerificationLog);
+    }
+}
+
+function saveFinalVerificationLog() {
+    const today = new Date();
+    const dateStr = today.toISOString().split('T')[0];
+    const timeStr = today.toTimeString().split(' ')[0].substring(0, 5);
+    
+    let logItem = {};
+    if (state.currentMode === 'family') {
+        logItem = {
+            date: dateStr,
+            menu: '쌀밥, 두부구이, 어묵볶음, 오렌지주스',
+            facility: 'family',
+            target: '막내아들 (우유, 밀가루)',
+            alternative: '계란말이 ➔ 두부구이, 요구르트 ➔ 오렌지주스 대체',
+            guideline: '가정 내 유제품 독립 보관 및 배식 도구 철저 분리',
+            vlmStatus: 'PASS',
+            timestamp: `${dateStr} ${timeStr}`
+        };
+    } else if (state.currentFacility === 'child') {
+        logItem = {
+            date: dateStr,
+            menu: '쌀밥, 두부구이, 어묵볶음, 맑은 무국, 오렌지주스',
+            facility: 'child',
+            target: '김민수 아동 (달걀/우유)',
+            alternative: '달걀말이 ➔ 두부구이, 요구르트 ➔ 오렌지주스 대체',
+            guideline: '계란 조리기구 분리 사용 및 대체 급식 라벨 체크',
+            vlmStatus: 'PASS',
+            timestamp: `${dateStr} ${timeStr}`
+        };
+    } else {
+        logItem = {
+            date: dateStr,
+            menu: '귀리잡곡밥, 버섯국, 불고기, 고구마순나물, 약콩 두유',
+            facility: 'senior',
+            target: '최옥분(당뇨), 이명자(유당불내)',
+            alternative: '쌀밥 ➔ 귀리잡곡밥, 요플레 ➔ 약콩 두유 대체',
+            guideline: '당뇨 혈당 모니터링 식단 및 비유제품 간식 교체 검증',
+            vlmStatus: 'PASS',
+            timestamp: `${dateStr} ${timeStr}`
+        };
+    }
+
+    state.logs.push(logItem);
+    saveLogs();
+    state.vlmApproved = true;
+    
+    showNotification("배식 이력이 안전하게 저장되었습니다. 자동 생성된 디지털 일지를 보관합니다.");
+    switchTab('report-generator');
+}
+
+// 7. Report Center and ESG Integration
+function initReportCenter() {
+    elements.reportSubTabBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            elements.reportSubTabBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            renderReport();
+        });
+    });
+
+    elements.printReportBtn.addEventListener('click', () => {
+        window.print();
+    });
+}
+
+function renderReport() {
+    const activeSubTab = document.querySelector('.sub-tab-btn.active').getAttribute('data-report');
+    
+    let facilityName = '';
+    let reportWriter = '';
+    let reportSigner = '';
+    
+    if (state.currentMode === 'family') {
+        facilityName = '마포구 서교동 삼총사 가정';
+        reportWriter = '엄마/아빠 (가정 안심 영양사)';
+        reportSigner = '가정대표 보호자 (서명)';
+        elements.reportConfirmStatement.textContent = '위와 같이 가족 구성원의 특이 체질 및 지침에 부합하는 안전 식단과 대체 배식이 올바르게 실행되었음을 확인하며 VLM 스캔 검증 이력을 디지털 기록합니다.';
+        elements.reportSignerName.textContent = '가족 건강 확인자: 엄마/아빠 (인)';
+        elements.reportFooterDesc.textContent = 'CareTable 가정용 식단 위생 자율 점검 대장 (F-2026)';
+    } else {
+        facilityName = state.currentFacility === 'child' ? '튼튼어린이집' : '행복실버요양원';
+        reportWriter = '박아름 사회복지사';
+        reportSigner = '시설대표 박아름 (서명)';
+        elements.reportConfirmStatement.textContent = '위와 같이 취약계층 급식 관리 및 대체 배식이 올바르게 수행되었으며, 배식 전 VLM(Vision-Language Model) 검증 절차를 완료하였음을 확인합니다.';
+        elements.reportSignerName.textContent = '확인자: 시설대표 박아름 (서명/인)';
+        elements.reportFooterDesc.textContent = '한국사회보장정보원 사회복지시설평가 증빙 표준 서식 (SSIS 14-2)';
+    }
+
+    elements.rFacilityName.textContent = facilityName;
+    elements.rWriter.textContent = reportWriter;
+    
+    const today = new Date();
+    elements.rDate.textContent = `${today.getFullYear()}년 ${String(today.getMonth() + 1).padStart(2, '0')}월 ${String(today.getDate()).padStart(2, '0')}일`;
+
+    const currentFilterKey = state.currentMode === 'family' ? 'family' : state.currentFacility;
+    const filteredLogs = state.logs.filter(l => l.facility === currentFilterKey);
+
+    let contentHtml = '';
+
+    if (activeSubTab === '급식일지') {
+        elements.reportDocTitle.textContent = state.currentMode === 'family' ? '가 정 식 단 위 생 일 지' : '영 양 급 식 일 지';
+        
+        contentHtml = `
+            <div class="report-paper-body">
+                <p>${state.currentMode === 'family' ? '가정 내 자율 보건 위생 관리와 오배식 방지 수칙에 따른 안심 식단 급지 기록입니다.' : '보건복지부 급식안전 기준 및 한국사회보장정보원 시설 평가 가이드라인에 근거한 당일 배식 현황 보고서입니다.'}</p>
+                <table class="report-table">
+                    <thead>
+                        <tr>
+                            <th>작성일자</th>
+                            <th>배식 식단 내용 (대체식 포함)</th>
+                            <th>집중 케어 대상자</th>
+                            <th>VLM AI 분석 적합성</th>
+                            <th>인증 확인</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${filteredLogs.length > 0 ? filteredLogs.map(log => `
+                            <tr>
+                                <td>${log.date}</td>
+                                <td class="align-left">${log.menu}</td>
+                                <td>${log.target}</td>
+                                <td><span style="color:var(--color-green); font-weight:bold;">${log.vlmStatus} (99%)</span></td>
+                                <td>확인완료</td>
+                            </tr>
+                        `).join('') : `
+                            <tr>
+                                <td colspan="5" style="color: var(--text-muted); padding:20px 0;">배식 이력이 존재하지 않습니다. VLM 검증 탭에서 배식을 최종 확정해 주십시오.</td>
+                            </tr>
+                        `}
+                    </tbody>
+                </table>
+                <p><strong>주요 안전 점검 준수 사항:</strong></p>
+                <ul>
+                    <li>식자재 보관 냉장/냉동고 온도 적격 확인</li>
+                    <li>VLM 비전 분석 스캔을 통한 알레르기 유발 유래 성분 최종 격리 점검 양호</li>
+                    <li>지정 조리사의 교차 오염 방지용 조리기구 분리 사용 실행 완료</li>
+                </ul>
+            </div>
+        `;
+    } else if (activeSubTab === '알레르기대장') {
+        elements.reportDocTitle.textContent = state.currentMode === 'family' ? '가족 알레르기 및 만성질환 DB' : '집중 케어 대상자 대장';
+        
+        contentHtml = `
+            <div class="report-paper-body">
+                <p>${state.currentMode === 'family' ? '가족들의 건강 및 식품 과민반응 정보를 지속 보관하여 오인 사고를 예방하는 집중 예방 DB입니다.' : '사회복지시설 평가지표 24번 취약계층 식품 유해인자 맞춤 안전 관리대장 양식입니다.'}</p>
+                <table class="report-table">
+                    <thead>
+                        <tr>
+                            <th>순번</th>
+                            <th>수혜자명</th>
+                            <th>제한 식품 및 요인</th>
+                            <th>추천 대체 식자재</th>
+                            <th>핵심 대체 조리 지침</th>
+                            <th>검증 방식</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${state.members[currentFilterKey].filter(m => m.type !== '일반').map((m, idx) => {
+                            const pair = getAlternativeFood(m.detail.split(',')[0].trim(), m.detail.includes('당뇨') ? '당뇨' : m.detail.includes('고혈압') ? '당뇨' : m.detail.split(',')[0].trim());
+                            return `
+                                <tr>
+                                    <td>${idx + 1}</td>
+                                    <td><strong>${m.name}</strong></td>
+                                    <td><span style="color:#e11d48; font-weight:600;">${m.detail}</span></td>
+                                    <td><span style="color:#0d9488; font-weight:600;">${pair.food}</span></td>
+                                    <td class="align-left">${m.instruction}</td>
+                                    <td>VLM 비전 매칭</td>
+                                </tr>
+                            `;
+                        }).join('')}
+                    </tbody>
+                </table>
+            </div>
+        `;
+    } else if (activeSubTab === '대체식대장') {
+        elements.reportDocTitle.textContent = '대 체 급 식 제 공 대 장';
+        
+        contentHtml = `
+            <div class="report-paper-body">
+                <p>특이 체질이나 의학적 위험 인자로 인해 일반 식사를 섭취하지 못하는 대상자에게 안전 대체식을 처방하고 지급을 검증한 이력서입니다.</p>
+                <table class="report-table">
+                    <thead>
+                        <tr>
+                            <th>제공일시</th>
+                            <th>대상자</th>
+                            <th>제한 원본 메뉴</th>
+                            <th>실제 대체 급식 내용</th>
+                            <th>대체 사유</th>
+                            <th>VLM 스캔 완료시각</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${filteredLogs.length > 0 ? filteredLogs.map(log => `
+                            <tr>
+                                <td>${log.date}</td>
+                                <td><strong>${log.target.split(' ')[0]}</strong></td>
+                                <td><span style="color:#e11d48; text-decoration:line-through;">${log.target.includes('아동') || log.target.includes('아들') ? '계란말이, 요구르트' : '쌀밥, 요플레'}</span></td>
+                                <td><span style="color:#0d9488; font-weight:bold;">${log.alternative.split('➔')[1] || log.alternative}</span></td>
+                                <td>${log.target.includes('아동') || log.target.includes('아들') ? '식품 알레르기 격리' : '혈당/유당 만성질환 케어'}</td>
+                                <td>${log.timestamp}</td>
+                            </tr>
+                        `).join('') : `
+                            <tr>
+                                <td colspan="6" style="color: var(--text-muted); padding:20px 0;">배식 이력이 존재하지 않습니다. VLM 검증 탭에서 배식을 최종 확정해 주십시오.</td>
+                            </tr>
+                        `}
+                    </tbody>
+                </table>
+            </div>
+        `;
+    }
+
+    elements.reportDocContent.innerHTML = contentHtml;
+
+    const savedHours = (filteredLogs.length * 4.2).toFixed(1);
+    const co2Saved = (filteredLogs.length * 12.0).toFixed(1);
+    
+    elements.esgCo2.textContent = `${co2Saved}kg`;
+    elements.esgTime.textContent = `${savedHours}시간`;
+    elements.esgLocal.textContent = state.currentMode === 'family' ? '75%' : (state.currentFacility === 'child' ? '45%' : '60%');
+    
+    if (state.currentMode === 'family') {
+        elements.esgTime.parentElement.querySelector('.esg-lbl').textContent = '가사 노동 및 행정 절감 시간';
+        elements.esgTime.parentElement.querySelector('.esg-sub').textContent = '레시피 고민 및 자율 기록 자동화 효과';
+    } else {
+        elements.esgTime.parentElement.querySelector('.esg-lbl').textContent = '행정 시간 ➔ 직접 돌봄 시간 환원';
+        elements.esgTime.parentElement.querySelector('.esg-sub').textContent = '시설 평가 문서 자동화에 따른 절감';
+    }
+}
+
+// 8. API configuration modal functions
+function initApiConfig() {
+    elements.openApiConfigBtn.addEventListener('click', () => {
+        elements.apiKeyInput.value = apiConfig.key;
+        elements.apiModelSelect.value = apiConfig.model;
+        elements.apiConfigModal.classList.remove('hidden');
+    });
+
+    elements.closeApiModalBtn.addEventListener('click', closeApiModal);
+
+    elements.apiConfigModal.addEventListener('click', (e) => {
+        if (e.target === elements.apiConfigModal) closeApiModal();
+    });
+
+    elements.toggleKeyVisibilityBtn.addEventListener('click', () => {
+        const type = elements.apiKeyInput.type === 'password' ? 'text' : 'password';
+        elements.apiKeyInput.type = type;
+        elements.toggleKeyVisibilityBtn.innerHTML = type === 'password' ? '<i class="fa-solid fa-eye"></i>' : '<i class="fa-solid fa-eye-slash"></i>';
+    });
+
+    elements.resetApiKeyBtn.addEventListener('click', () => {
+        elements.apiKeyInput.value = '';
+        apiConfig.key = '';
+        localStorage.removeItem('caremeal_api_key');
+        updateApiStatusUI();
+        closeApiModal();
+        showNotification("오픈라우터 API Key가 삭제되었습니다. 데모 시뮬레이션 모드로 작동합니다.");
+    });
+
+    elements.apiConfigForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        
+        const key = elements.apiKeyInput.value.trim();
+        const model = elements.apiModelSelect.value;
+        
+        apiConfig.key = key;
+        apiConfig.model = model;
+        
+        if (key) {
+            localStorage.setItem('caremeal_api_key', key);
+            localStorage.setItem('caremeal_api_model', model);
+            showNotification("오픈라우터 무료 AI 연동 및 순차 폴백 체인 활성화!");
+        } else {
+            localStorage.removeItem('caremeal_api_key');
+            showNotification("API Key가 비어있어 로컬 시뮬레이션 모드로 전환되었습니다.");
+        }
+        
+        updateApiStatusUI();
+        closeApiModal();
+    });
+}
+
+function closeApiModal() {
+    elements.apiConfigModal.classList.add('hidden');
+}
+
+function updateApiStatusUI() {
+    if (apiConfig.key) {
+        elements.apiStatusBadge.className = 'api-status live-connected';
+        elements.apiStatusText.textContent = `AI 연동: 폴백 체인`;
+        elements.analyzerModelIndicator.textContent = `${apiConfig.model.split('/')[1] || apiConfig.model} (실시간 무료 AI 폴백 활성화)`;
+    } else {
+        elements.apiStatusBadge.className = 'api-status online';
+        elements.apiStatusText.textContent = 'AI: 시뮬레이션 모드';
+        elements.analyzerModelIndicator.textContent = 'Nemotron-70B / Llama-3 (시뮬레이션 폴백 모드)';
+    }
+}
+
+// 9. Interactive Person management Modal
+function initModal() {
+    elements.addMemberBtn.addEventListener('click', () => {
+        elements.addMemberModal.classList.remove('hidden');
+    });
+
+    elements.closeMemberModalBtn.addEventListener('click', closeMemberModal);
+    elements.cancelMemberBtn.addEventListener('click', closeMemberModal);
+
+    elements.addMemberModal.addEventListener('click', (e) => {
+        if (e.target === elements.addMemberModal) closeMemberModal();
+    });
+
+    elements.memberForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        
+        const name = document.getElementById('m-name').value.trim();
+        const ageVal = document.getElementById('m-age').value.trim();
+        const gender = document.getElementById('m-gender').value;
+        const type = document.getElementById('m-risk-type').value;
+        const detail = document.getElementById('m-detail').value.trim();
+        const instruction = document.getElementById('m-instruction').value.trim();
+        
+        if (!name || !ageVal || !detail || !instruction) return;
+
+        const listKey = state.currentMode === 'family' ? 'family' : state.currentFacility;
+        const newId = state.members[listKey].length > 0 ? Math.max(...state.members[listKey].map(m => m.id)) + 1 : 1;
+        
+        const memberObj = {
+            id: newId,
+            name: name,
+            age: `${ageVal}세 / ${gender}`,
+            type: type,
+            detail: detail,
+            instruction: instruction,
+            status: type === '일반' ? 'safe' : 'care'
+        };
+
+        state.members[listKey].push(memberObj);
+        saveDatabase(listKey);
+        
+        closeMemberModal();
+        elements.memberForm.reset();
+        
+        renderDashboard();
+        updateCharts();
+        
+        showNotification(`신규 수혜자 ${name}님이 성공적으로 데이터베이스에 추가되었습니다.`);
+    });
+}
+
+function closeMemberModal() {
+    elements.addMemberModal.classList.add('hidden');
+}
+
+// 10. Chart.js Dashboard and ESG rendering
+function initCharts() {
+    // Dynamic refresh
+}
+
+function updateCharts() {
+    const dashCanvas = document.getElementById('dashboardChart');
+    if (dashCanvas) {
+        if (state.charts.dashboard) state.charts.dashboard.destroy();
+        
+        const listKey = state.currentMode === 'family' ? 'family' : state.currentFacility;
+        const list = state.members[listKey];
+        const normalCount = list.filter(m => m.type === '일반').length;
+        const allergyCount = list.filter(m => m.type === '알레르기').length;
+        const diseaseCount = list.filter(m => m.type === '질환식').length;
+
+        Chart.defaults.color = '#94a3b8';
+        Chart.defaults.font.family = 'Outfit';
+
+        state.charts.dashboard = new Chart(dashCanvas, {
+            type: 'doughnut',
+            data: {
+                labels: ['일반 급식군', '식품 알러지군', '만성 질환 식이군'],
+                datasets: [{
+                    data: [normalCount, allergyCount, diseaseCount],
+                    backgroundColor: ['#10b981', '#f43f5e', '#8b5cf6'],
+                    borderWidth: 1,
+                    borderColor: 'rgba(255, 255, 255, 0.1)'
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom',
+                        labels: {
+                            boxWidth: 12,
+                            padding: 10,
+                            font: { size: 11 }
+                        }
+                    }
+                },
+                cutout: '65%'
+            }
+        });
+    }
+
+    const esgCanvas = document.getElementById('esgChart');
+    if (esgCanvas) {
+        if (state.charts.esg) state.charts.esg.destroy();
+
+        const lineLabel1 = state.currentMode === 'family' ? '자율 관리 환원 시간(H)' : '돌봄 환원 시간(H)';
+        const lineLabel2 = state.currentMode === 'family' ? '가정 탄소 감축량(kg)' : '누적 탄소 절감(kg)';
+
+        state.charts.esg = new Chart(esgCanvas, {
+            type: 'line',
+            data: {
+                labels: ['1월', '2월', '3월', '4월', '5월', '6월(예정)'],
+                datasets: [
+                    {
+                        label: lineLabel1,
+                        data: [20, 35, 52, 68, 84, 105],
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    },
+                    {
+                        label: lineLabel2,
+                        data: [50, 95, 140, 190, 240, 310],
+                        borderColor: '#10b981',
+                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                        labels: {
+                            boxWidth: 10,
+                            font: { size: 10 }
+                        }
+                    }
+                },
+                scales: {
+                    x: { grid: { display: false } },
+                    y: { grid: { color: 'rgba(255, 255, 255, 0.05)' } }
+                }
+            }
+        });
+    }
+}

index.html

@@ -0,0 +1,550 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CareTable - 취약계층 급식 위험 관리 및 평가 증빙 자동화 플랫폼</title>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <!-- FontAwesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Chart.js CDN -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Sidebar Navigation -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <div class="logo-area">
+                    <i class="fa-solid fa-wand-magic-sparkles logo-icon"></i>
+                    <span class="logo-text">CareTable <span class="highlight">AI</span></span>
+                </div>
+                <div class="badge-tag" id="main-badge">사보원 공공데이터 연계</div>
+            </div>
+            
+            <nav class="sidebar-nav">
+                <button class="nav-btn active" data-tab="dashboard">
+                    <i class="fa-solid fa-chart-pie"></i>
+                    <span id="nav-dash-text">종합 대시보드</span>
+                </button>
+                <button class="nav-btn" data-tab="diet-analyzer">
+                    <i class="fa-solid fa-calendar-days"></i>
+                    <span>주간/월간 식단 AI 분석</span>
+                </button>
+                <button class="nav-btn" data-tab="vlm-scanner">
+                    <i class="fa-solid fa-camera-retro"></i>
+                    <span>VLM 배식 검증</span>
+                </button>
+                <button class="nav-btn" data-tab="report-generator" id="nav-report-btn">
+                    <i class="fa-solid fa-file-shield"></i>
+                    <span>평가 증빙 & ESG</span>
+                </button>
+            </nav>
+
+            <div class="sidebar-footer">
+                <!-- Mode Toggle -->
+                <div class="mode-switch-container">
+                    <span class="mode-label"><i class="fa-solid fa-toggle-on"></i> 사용 모드 전환</span>
+                    <div class="toggle-switch-wrapper">
+                        <span class="toggle-mode-text" id="mode-text-left">기관</span>
+                        <label class="switch">
+                            <input type="checkbox" id="mode-toggle-checkbox">
+                            <span class="slider round"></span>
+                        </label>
+                        <span class="toggle-mode-text" id="mode-text-right">가정</span>
+                    </div>
+                </div>
+
+                <div class="facility-selector" id="facility-selector-wrapper">
+                    <label for="facility-select"><i class="fa-solid fa-house-medical"></i> 대상 시설 관리</label>
+                    <select id="facility-select">
+                        <option value="child" selected>튼튼어린이집 (보육시설)</option>
+                        <option value="senior">행복실버요양원 (노인시설)</option>
+                    </select>
+                </div>
+                
+                <div class="user-profile">
+                    <div class="user-avatar" id="user-avatar-initial">복</div>
+                    <div class="user-info">
+                        <span class="user-name" id="user-display-name">박아름 사회복지사</span>
+                        <span class="user-role" id="user-display-role">마포구 시설 운영대표</span>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content Area -->
+        <main class="main-content">
+            <!-- Top GNB -->
+            <header class="top-gnb">
+                <div class="page-title-area">
+                    <h1 id="page-main-title">종합 대시보드</h1>
+                    <p id="page-sub-title">시설 맞춤형 프로파일 및 취약계층 급식 위험 관리 요약</p>
+                </div>
+                <div class="status-panel">
+                    <button class="theme-toggle-btn" id="theme-toggle-btn">
+                        <i class="fa-solid fa-moon"></i> <span id="theme-toggle-text">다크 모드</span>
+                    </button>
+                    <button class="config-btn" id="open-api-config-btn">
+                        <i class="fa-solid fa-gears"></i> <span>오픈라우터 AI 연동</span>
+                    </button>
+                    <div class="api-status online" id="api-status-badge">
+                        <span class="status-dot"></span>
+                        <span id="api-status-text">AI: 시뮬레이션 모드</span>
+                    </div>
+                    <div class="notification-bell">
+                        <i class="fa-regular fa-bell"></i>
+                        <span class="noti-count" id="noti-count-badge">2</span>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Dashboard Tab -->
+            <section id="dashboard" class="tab-content active-tab">
+                <!-- Info Cards Grid -->
+                <div class="stats-grid">
+                    <div class="stat-card glass-card animate-fade-in">
+                        <div class="card-icon-wrapper blue">
+                            <i class="fa-solid fa-users"></i>
+                        </div>
+                        <div class="stat-data">
+                            <span class="stat-label" id="lbl-total-members">관리 대상자 수</span>
+                            <h3 id="stat-total-members" class="stat-value">42명</h3>
+                            <span class="stat-trend positive" id="lbl-total-desc"><i class="fa-solid fa-circle-info"></i> 사보원 데이터 기준</span>
+                        </div>
+                    </div>
+                    <div class="stat-card glass-card animate-fade-in" style="animation-delay: 0.1s;">
+                        <div class="card-icon-wrapper red">
+                            <i class="fa-solid fa-triangle-exclamation"></i>
+                        </div>
+                        <div class="stat-data">
+                            <span class="stat-label">위험 관리군 (알레르기/질환)</span>
+                            <h3 id="stat-risk-members" class="stat-value">5명</h3>
+                            <span class="stat-trend alert-color"><i class="fa-solid fa-circle-exclamation"></i> 개인별 집중 관리 요망</span>
+                        </div>
+                    </div>
+                    <div class="stat-card glass-card animate-fade-in" style="animation-delay: 0.2s;">
+                        <div class="card-icon-wrapper green">
+                            <i class="fa-solid fa-clock-rotate-left"></i>
+                        </div>
+                        <div class="stat-data">
+                            <span class="stat-label" id="lbl-saved-time">누적 행정 절감 시간</span>
+                            <h3 id="stat-saved-time" class="stat-value">84시간</h3>
+                            <span class="stat-trend positive" id="lbl-saved-desc"><i class="fa-solid fa-arrow-trend-up"></i> 돌봄 시간으로 환원됨</span>
+                        </div>
+                    </div>
+                    <div class="stat-card glass-card animate-fade-in" style="animation-delay: 0.3s;">
+                        <div class="card-icon-wrapper yellow">
+                            <i class="fa-solid fa-shield-halved"></i>
+                        </div>
+                        <div class="stat-data">
+                            <span class="stat-label">급식 안전 무결성 점수</span>
+                            <h3 id="stat-safety-score" class="stat-value">100%</h3>
+                            <span class="stat-trend positive"><i class="fa-solid fa-shield-check"></i> 사고 0건 달성</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Middle Content Section -->
+                <div class="content-row">
+                    <!-- Left: Facility Profile & Person management -->
+                    <div class="panel-col glass-card">
+                        <div class="panel-header">
+                            <h2 class="panel-title" id="panel-member-title"><i class="fa-solid fa-id-card"></i> 대상자 집중 관리 명단</h2>
+                            <button class="add-member-btn" id="add-member-btn"><i class="fa-solid fa-plus"></i> 대상 추가</button>
+                        </div>
+                        <div class="table-container">
+                            <table class="data-table" id="member-table">
+                                <thead>
+                                    <tr>
+                                        <th>이름</th>
+                                        <th>연령/성별</th>
+                                        <th>위험 요인 (알레르기/질환)</th>
+                                        <th>맞춤 식이 지침</th>
+                                        <th>조작</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="member-table-body">
+                                    <!-- Dynamic member data -->
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <!-- Right: Quick Analytics -->
+                    <div class="panel-col glass-card flex-col-35">
+                        <div class="panel-header">
+                            <h2 class="panel-title"><i class="fa-solid fa-chart-line"></i> 실시간 통계 분석</h2>
+                        </div>
+                        <div class="chart-container">
+                            <canvas id="dashboardChart"></canvas>
+                        </div>
+                        <div class="esg-score-box">
+                            <div class="esg-title-row">
+                                <span class="esg-title"><i class="fa-solid fa-leaf text-green"></i> CareTable ESG 혁신 지표</span>
+                                <span class="esg-badge">A+ 등급</span>
+                            </div>
+                            <div class="esg-progress-bar">
+                                <div class="esg-progress-fill" style="width: 92%;"></div>
+                            </div>
+                            <p class="esg-desc" id="esg-bottom-desc">친환경 저탄소 식단 추천 및 페이퍼리스 행정 자동화를 통한 탄소 발자국 240kg CO2e 감축 달성</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Diet Analyzer Tab -->
+            <section id="diet-analyzer" class="tab-content">
+                <div class="vertical-layout-wrapper">
+                    <!-- Input Section -->
+                    <div class="glass-card full-width-panel margin-bottom-24">
+                        <div class="panel-header">
+                            <h2 class="panel-title"><i class="fa-solid fa-calendar-plus"></i> 주간/월간 식단표 입력 (대량 식단 스캔)</h2>
+                            <div class="quick-examples">
+                                <span class="example-tag active" data-period="weekly">1주일 식단 템플릿</span>
+                                <span class="example-tag" data-period="monthly">1개월 식단 템플릿</span>
+                            </div>
+                        </div>
+                        <div class="diet-input-area">
+                            <label class="form-label">날짜(또는 요일)와 식단 내용을 입력하세요. 식재료는 쉼표로, 일자는 줄바꿈으로 구분합니다:</label>
+                            <textarea id="diet-bulk-input" class="diet-textarea large-textarea" placeholder="[월] 쌀밥, 계란말이, 어묵볶음, 요구르트&#10;[화] 잡곡밥, 된장국, 불고기, 고구마순나물, 생선구이&#10;[수] 잡곡밥, 닭볶음탕, 오징어채무침, 땅콩조림, 우유"></textarea>
+                            <div class="btn-row justify-between">
+                                <div class="model-status-info">
+                                    <i class="fa-solid fa-robot"></i> <span id="analyzer-model-indicator">DeepSeek V4 Flash (무료) 모델 우선 작동</span>
+                                </div>
+                                <button id="analyze-diet-btn" class="primary-btn"><i class="fa-solid fa-wand-magic-sparkles"></i> AI 전체 식단 안전성 정밀 검사</button>
+                            </div>
+                        </div>
+
+                        <!-- Analysis Loading State (hidden by default) -->
+                        <div id="analyzer-loading" class="analyzer-loading hidden">
+                            <div class="spinner"></div>
+                            <p id="loading-text">OpenRouter AI 모델에 통신 중입니다. 실시간 식자재 영양 분석 및 위험 요인 매칭 중...</p>
+                        </div>
+                    </div>
+
+                    <!-- Output Schedule View (hidden by default, shown after analysis) -->
+                    <div id="schedule-result-view" class="hidden animate-fade-in">
+                        <div class="result-header-summary glass-card margin-bottom-24">
+                            <div class="summary-status-badge alert-red" id="schedule-status-banner">
+                                <i class="fa-solid fa-circle-exclamation text-red animate-bounce"></i>
+                                <div>
+                                    <h4 id="schedule-summary-title">위험 식단 감지됨</h4>
+                                    <p id="schedule-summary-desc">총 5일의 식단 중 2일의 식단에서 등록 수혜자 알레르기/질환 유발 성분이 발견되어 자동 대체식을 처방했습니다.</p>
+                                </div>
+                            </div>
+                            <div class="btn-row">
+                                <button id="confirm-all-diet-btn" class="primary-btn"><i class="fa-solid fa-circle-check"></i> 전체 식단 확정 및 VLM 배식 검증 대기</button>
+                            </div>
+                        </div>
+
+                        <!-- Calendar / Timelime Cards Grid -->
+                        <div class="schedule-grid" id="schedule-cards-container">
+                            <!-- Dynamic Cards generated via JS -->
+                        </div>
+                    </div>
+
+                    <!-- Empty State for results -->
+                    <div id="schedule-empty-view" class="glass-card empty-state-view">
+                        <i class="fa-solid fa-magnifying-glass-chart"></i>
+                        <h3>식단 분석 대기 중</h3>
+                        <p>위 텍스트 영역에 주간/월간 식단표를 넣고 분석 버튼을 누르면, 일자별 대체 식단표와 AI 안전 조리 지침이 타임라인 카드 뷰로 보기 좋게 자동 생성됩니다.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- VLM Verification Tab -->
+            <section id="vlm-scanner" class="tab-content">
+                <div class="content-row">
+                    <!-- Scanner camera panel -->
+                    <div class="panel-col glass-card">
+                        <div class="panel-header">
+                            <h2 class="panel-title"><i class="fa-solid fa-camera"></i> VLM(Vision-Language Model) 실시간 배식 모니터</h2>
+                            <button class="add-member-btn" id="trigger-file-btn"><i class="fa-solid fa-upload"></i> 식판 사진 직접 업로드</button>
+                            <input type="file" id="vlm-file-input" accept="image/*" class="hidden">
+                        </div>
+                        
+                        <div class="vlm-monitor-layout">
+                            <!-- Left: Camera Box -->
+                            <div class="camera-simulator-box">
+                                <div class="camera-lens-overlay">
+                                    <div class="lens-crosshair"></div>
+                                    <div class="scanner-laser" id="scanner-laser"></div>
+                                    <div class="camera-badge">CAMERA LIVE</div>
+                                </div>
+                                <div class="image-viewport" id="image-viewport">
+                                    <div class="viewport-placeholder">
+                                        <i class="fa-solid fa-image"></i>
+                                        <p>아래에서 시뮬레이션 이미지를 선택하거나 직접 식판 사진을 업로드하세요</p>
+                                    </div>
+                                    <img id="vlm-target-image" src="" alt="식판 사진" class="hidden">
+                                </div>
+                            </div>
+                            
+                            <!-- Right: Operations -->
+                            <div class="vlm-ops-panel">
+                                <h3>배식 모니터링 식판 이미지 매칭</h3>
+                                <p class="vlm-desc">검증할 식판 사진을 준비해 주십시오. (성공/실패 데모를 즉시 실행할 수 있습니다.)</p>
+                                <div class="sim-selector-grid">
+                                    <div class="sim-option-card" id="sim-opt-normal" data-type="normal">
+                                        <div class="sim-img-thumb-container">
+                                            <img src="assets/meal_normal.png" alt="일반 식단 (대체식 미적용)">
+                                        </div>
+                                        <div class="sim-info">
+                                            <span class="sim-title">일반 배식 식판</span>
+                                            <span class="sim-badge danger-badge">달걀말이/요구르트 포함</span>
+                                        </div>
+                                    </div>
+                                    <div class="sim-option-card" id="sim-opt-alternative" data-type="alternative">
+                                        <div class="sim-img-thumb-container">
+                                            <img src="assets/meal_alternative.png" alt="대체 식단 (두부, 주스 적용)">
+                                        </div>
+                                        <div class="sim-info">
+                                            <span class="sim-title">대체 배식 식판</span>
+                                            <span class="sim-badge success-badge">두부구이/주스 변경완료</span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="scan-action-row">
+                                    <button id="run-vlm-btn" class="primary-btn large-btn" disabled>
+                                        <i class="fa-solid fa-cube"></i> VLM 배식 사진 분석 & 검증 시작
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- VLM Verification Results -->
+                    <div class="panel-col glass-card flex-col-40">
+                        <div class="panel-header">
+                            <h2 class="panel-title"><i class="fa-solid fa-circle-info"></i> AI Vision 매칭 및 실시간 분석 결과</h2>
+                        </div>
+                        
+                        <div id="vlm-empty-result" class="empty-state-view">
+                            <i class="fa-solid fa-magnifying-glass-chart"></i>
+                            <p>식판 사진을 선택하고 VLM 분석을 시작하면 배식 식단 매칭성, 유해 알레르기 물질 탐지, 배식 가부 판정 결과가 표시됩니다.</p>
+                        </div>
+                        
+                        <!-- Real VLM result panel (hidden by default) -->
+                        <div id="vlm-result-panel" class="vlm-result-panel hidden animate-fade-in">
+                            <div class="vlm-verdict-box" id="vlm-verdict-box">
+                                <div class="verdict-icon" id="verdict-icon-container">
+                                    <!-- Dynamic verdict icon -->
+                                </div>
+                                <div class="verdict-text-area">
+                                    <span class="verdict-lbl">VLM 배식 검증 결과</span>
+                                    <h3 id="verdict-title">배식 보류 (REJECTED)</h3>
+                                </div>
+                            </div>
+
+                            <div class="matching-details-list">
+                                <div class="detail-item">
+                                    <span class="detail-label">식단 일치율 (Menu Matching)</span>
+                                    <div class="bar-progress-container">
+                                        <div class="bar-fill" id="vlm-match-rate" style="width: 80%;"></div>
+                                    </div>
+                                    <span class="detail-value" id="vlm-match-value">80%</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">유해/금지 성분 유무 (Allergens)</span>
+                                    <span class="detail-value text-red" id="vlm-allergen-status">달걀, 우유 검출</span>
+                                </div>
+                                <div class="detail-item">
+                                    <span class="detail-label">배식 정량 및 형태</span>
+                                    <span class="detail-value" id="vlm-portion-status">정량 배식 (96%)</span>
+                                </div>
+                            </div>
+
+                            <div class="vlm-reason-box">
+                                <h4><i class="fa-solid fa-comment-dots"></i> AI Vision 분석 사유</h4>
+                                <p id="vlm-analysis-reason">카메라 사진 분석 결과, 10시 방향에 계란말이 및 우측 하단에 우유가 포함된 요구르트병이 그대로 배치되어 있어 등록된 아동 '김민수'의 식판으로 적합하지 않습니다. 대체식(두부구이, 주스)으로의 교체를 요구하십시오.</p>
+                            </div>
+                            
+                            <div class="btn-row" id="vlm-action-footer">
+                                <!-- dynamic pass / reject buttons -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Report and ESG Tab -->
+            <section id="report-generator" class="tab-content">
+                <div class="content-row">
+                    <!-- Left: Report preview list -->
+                    <div class="panel-col glass-card flex-col-65">
+                        <div class="panel-header">
+                            <h2 class="panel-title"><i class="fa-solid fa-file-invoice"></i> 사회보장/가족 건강 데이터 증빙 센터</h2>
+                            <div class="report-tab-selectors">
+                                <button class="sub-tab-btn active" data-report="급식일지">급식 일지</button>
+                                <button class="sub-tab-btn" data-report="알레르기대장">집중 케어 대장</button>
+                                <button class="sub-tab-btn" data-report="대체식대장">대체 급식 관리대장</button>
+                            </div>
+                        </div>
+
+                        <!-- Report Render Area -->
+                        <div class="report-document-container" id="report-print-area">
+                            <div class="report-paper">
+                                <!-- Dynamic Document Header -->
+                                <div class="report-paper-header">
+                                    <h1 id="report-doc-title">급 식 일 지</h1>
+                                    <div class="report-meta-grid">
+                                        <div class="meta-cell"><strong>구분</strong>: <span id="r-facility-name">튼튼어린이집</span></div>
+                                        <div class="meta-cell"><strong>일자</strong>: <span id="r-date">2026년 06월 01일 (월)</span></div>
+                                        <div class="meta-cell"><strong>작성자</strong>: <span id="r-writer">박아름 사회복지사</span></div>
+                                        <div class="meta-cell"><strong>인증코드</strong>: <span>SSIS-2026-N45</span></div>
+                                    </div>
+                                </div>
+                                
+                                <!-- Dynamic Document Body -->
+                                <div id="report-doc-content">
+                                    <!-- Inject via JS -->
+                                </div>
+
+                                <div class="report-paper-footer">
+                                    <div class="sign-area">
+                                        <p id="report-confirm-statement">위와 같이 취약계층 급식 관리 및 대체 배식이 올바르게 수행되었으며, 배식 전 VLM(Vision-Language Model) 검증 절차를 완료하였음을 확인합니다.</p>
+                                        <div class="sign-seal">
+                                            <span id="report-signer-name">확인자: 시설대표 박아름 (서명/인)</span>
+                                            <div class="seal-stamp">CareTable 검증</div>
+                                        </div>
+                                    </div>
+                                    <div class="report-footer-tag" id="report-footer-desc">한국사회보장정보원 사회복지시설평가 증빙 표준 서식 (SSIS 14-2)</div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="btn-row justify-end padding-top-15">
+                            <button id="print-report-btn" class="primary-btn"><i class="fa-solid fa-print"></i> 공식 인쇄 (PDF/문서 저장)</button>
+                        </div>
+                    </div>
+
+                    <!-- Right: ESG Innovation statistics -->
+                    <div class="panel-col glass-card">
+                        <div class="panel-header">
+                            <h2 class="panel-title"><i class="fa-solid fa-leaf"></i> CareTable ESG 혁신 대시보드</h2>
+                        </div>
+                        
+                        <div class="esg-metric-grid">
+                            <div class="esg-metric-card">
+                                <div class="esg-val text-green" id="esg-co2">240.5kg</div>
+                                <div class="esg-lbl">누적 탄소(CO2) 절감량</div>
+                                <div class="esg-sub">종이 인쇄 감축 및 저탄소 식단 추천 효과</div>
+                            </div>
+                            <div class="esg-metric-card">
+                                <div class="esg-val text-blue" id="esg-time">84.2시간</div>
+                                <div class="esg-lbl" id="esg-saved-label">행정 시간 ➔ 직접 돌봄 시간 환원</div>
+                                <div class="esg-sub" id="esg-saved-sub">시설 평가 문서 자동화에 따른 절감</div>
+                            </div>
+                            <div class="esg-metric-card">
+                                <div class="esg-val text-yellow" id="esg-local">45%</div>
+                                <div class="esg-lbl">지역 농가 상생 재료 비중</div>
+                                <div class="esg-sub">지자체 및 인근 로컬 푸드 매칭율</div>
+                            </div>
+                        </div>
+
+                        <div class="esg-chart-box">
+                            <canvas id="esgChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Modals -->
+    <!-- OpenRouter API Config Modal -->
+    <div id="api-config-modal" class="modal hidden">
+        <div class="modal-content glass-card">
+            <div class="modal-header">
+                <h3><i class="fa-solid fa-robot"></i> OpenRouter AI 모델 설정</h3>
+                <span class="close-modal-btn" id="close-api-modal-btn">&times;</span>
+            </div>
+            <div class="modal-body">
+                <form id="api-config-form">
+                    <p class="modal-info-text">OpenRouter 무료 API Key를 등록하여 실시간 AI 위험 감지 및 맞춤 대체 레시피 분석을 구동할 수 있습니다. 키가 없어도 시뮬레이션 모드로 작동합니다.</p>
+                    <div class="form-group">
+                        <label for="api-key-input">OpenRouter API Key (OPENROUTER_API)</label>
+                        <div class="password-input-wrapper">
+                            <input type="password" id="api-key-input" placeholder="sk-or-v1-...">
+                            <button type="button" id="toggle-key-visibility-btn"><i class="fa-solid fa-eye"></i></button>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label for="api-model-select">사용할 AI 모델 (무료 모델)</label>
+                        <select id="api-model-select">
+                            <option value="deepseek/deepseek-v4-flash:free" selected>DeepSeek V4 Flash (무료)</option>
+                            <option value="qwen/qwen3-next-80b-a3b-instruct:free">Qwen 3 Next 80B (무료)</option>
+                            <option value="meta-llama/llama-3-8b-instruct:free">Llama 3 8B Instruct (무료)</option>
+                            <option value="meta-llama/llama-3.3-70b-instruct:free">Llama 3.3 70B Instruct (무료)</option>
+                            <option value="google/gemma-4-26b-a4b:free">Gemma 4 26B A4B (무료)</option>
+                            <option value="nvidia/llama-3.1-nemotron-70b-instruct:free">Llama 3.1 Nemotron 70B (무료)</option>
+                        </select>
+                    </div>
+                    <div class="btn-row justify-end">
+                        <button type="button" class="secondary-btn" id="reset-api-key-btn">키 삭제</button>
+                        <button type="submit" class="primary-btn">연동 완료</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Member Modal -->
+    <div id="add-member-modal" class="modal hidden">
+        <div class="modal-content glass-card">
+            <div class="modal-header">
+                <h3 id="modal-member-title"><i class="fa-solid fa-user-plus"></i> 신규 관리 대상자 등록</h3>
+                <span class="close-modal-btn" id="close-member-modal-btn">&times;</span>
+            </div>
+            <div class="modal-body">
+                <form id="member-form">
+                    <div class="form-group">
+                        <label for="m-name">이름 (또는 별칭)</label>
+                        <input type="text" id="m-name" required placeholder="예: 김동현">
+                    </div>
+                    <div class="form-group">
+                        <label for="m-age">나이 (세)</label>
+                        <input type="number" id="m-age" required placeholder="예: 6">
+                    </div>
+                    <div class="form-group">
+                        <label for="m-gender">성별</label>
+                        <select id="m-gender">
+                            <option value="남">남성</option>
+                            <option value="여">여성</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="m-risk-type">위험 분류</label>
+                        <select id="m-risk-type">
+                            <option value="알레르기">알레르기 (식품성)</option>
+                            <option value="질환식">질환군 식이 (당뇨, 연하장애, 고혈압 등)</option>
+                            <option value="일반">해당 없음 (일반 급식군)</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="m-detail">상세 요인 (식품명 또는 질환명)</label>
+                        <input type="text" id="m-detail" required placeholder="예: 대두, 땅콩, 당뇨병 2단계, 유당불내증">
+                    </div>
+                    <div class="form-group">
+                        <label for="m-instruction">맞춤 식사 조치 지침</label>
+                        <textarea id="m-instruction" required placeholder="예: 콩기름/간장 사용 전면 제한, 알레르기 발생 시 대체 급식 및 구급약 준비"></textarea>
+                    </div>
+                    <div class="btn-row justify-end">
+                        <button type="button" class="secondary-btn" id="cancel-member-btn">취소</button>
+                        <button type="submit" class="primary-btn">등록 완료</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Script Source -->
+    <script src="app.js"></script>
+</body>
+</html>

styles.css

@@ -0,0 +1,2139 @@
+/* CareMeal AI Premium Design Stylesheet */
+
+/* Light Theme Variables (Default) */
+:root {
+    --bg-main: #f3f4f6;
+    --bg-side: #ffffff;
+    --bg-card: rgba(255, 255, 255, 0.8);
+    --border-color: rgba(0, 0, 0, 0.08);
+    --border-color-active: rgba(59, 130, 246, 0.3);
+    
+    --text-primary: #111827;
+    --text-secondary: #4b5563;
+    --text-muted: #9ca3af;
+    
+    --color-blue: #2563eb;
+    --color-cyan: #0891b2;
+    --color-green: #059669;
+    --color-red: #dc2626;
+    --color-yellow: #d97706;
+    --color-purple: #7c3aed;
+    
+    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
+    --gradient-success: linear-gradient(135deg, #059669 0%, #047857 100%);
+    --gradient-danger: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
+    --gradient-warning: linear-gradient(135deg, #d97706 0%, #b45309 100%);
+    
+    --font-outfit: 'Outfit', 'Inter', 'Noto Sans KR', sans-serif;
+    --card-shadow: 0 10px 30px 0 rgba(31, 41, 55, 0.08);
+    --card-blur: blur(12px);
+    --transition-speed: 0.3s;
+}
+
+/* Dark Theme Variables (Activated via body.dark-mode) */
+body.dark-mode {
+    --bg-main: #0a0d16;
+    --bg-side: #0f1322;
+    --bg-card: rgba(22, 28, 48, 0.6);
+    --border-color: rgba(255, 255, 255, 0.08);
+    --border-color-active: rgba(59, 130, 246, 0.4);
+    
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+    
+    --color-blue: #3b82f6;
+    --color-cyan: #06b6d4;
+    --color-green: #10b981;
+    --color-red: #f43f5e;
+    --color-yellow: #fbbf24;
+    --color-purple: #8b5cf6;
+    
+    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
+    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    --gradient-danger: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
+    --gradient-warning: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
+    
+    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+}
+
+/* Reset & Global styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--bg-main);
+    color: var(--text-primary);
+    font-family: var(--font-outfit);
+    overflow-x: hidden;
+    height: 100vh;
+    transition: background-color var(--transition-speed), color var(--transition-speed);
+}
+
+/* App Container Layout */
+.app-container {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+}
+
+/* Sidebar Styling */
+.sidebar {
+    width: 280px;
+    background-color: var(--bg-side);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    padding: 24px;
+    z-index: 10;
+    transition: background-color var(--transition-speed), border-color var(--transition-speed);
+}
+
+.sidebar-header {
+    margin-bottom: 30px;
+}
+
+.logo-area {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.logo-icon {
+    font-size: 26px;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.logo-text {
+    font-size: 22px;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+}
+
+.logo-text .highlight {
+    color: var(--color-cyan);
+}
+
+.badge-tag {
+    display: inline-block;
+    margin-top: 8px;
+    font-size: 11px;
+    font-weight: 600;
+    background: rgba(37, 99, 235, 0.08);
+    color: var(--color-blue);
+    padding: 3px 8px;
+    border-radius: 20px;
+    border: 1px solid rgba(37, 99, 235, 0.2);
+    text-align: center;
+}
+
+.sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex-grow: 1;
+}
+
+.nav-btn {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    background: none;
+    border: 1px solid transparent;
+    color: var(--text-secondary);
+    padding: 14px 18px;
+    border-radius: 12px;
+    cursor: pointer;
+    font-family: var(--font-outfit);
+    font-size: 15px;
+    font-weight: 500;
+    text-align: left;
+    transition: all var(--transition-speed) ease;
+}
+
+.nav-btn i {
+    font-size: 18px;
+    transition: transform 0.2s ease;
+}
+
+.nav-btn:hover {
+    background-color: rgba(0, 0, 0, 0.03);
+    color: var(--text-primary);
+}
+
+body.dark-mode .nav-btn:hover {
+    background-color: rgba(255, 255, 255, 0.03);
+}
+
+.nav-btn.active {
+    background-color: rgba(37, 99, 235, 0.08);
+    color: var(--color-blue);
+    border-color: rgba(37, 99, 235, 0.15);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.05);
+}
+
+body.dark-mode .nav-btn.active {
+    background-color: rgba(59, 130, 246, 0.1);
+    color: var(--text-primary);
+    border-color: rgba(59, 130, 246, 0.25);
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
+}
+
+.nav-btn.active i {
+    color: var(--color-cyan);
+    transform: scale(1.1);
+}
+
+.sidebar-footer {
+    border-top: 1px solid var(--border-color);
+    padding-top: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+/* Toggle Switch Styles */
+.mode-switch-container {
+    background-color: rgba(0, 0, 0, 0.02);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+body.dark-mode .mode-switch-container {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.mode-label {
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.toggle-switch-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.toggle-mode-text {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-muted);
+    transition: color 0.2s;
+}
+
+.toggle-mode-text.active-mode {
+    color: var(--color-cyan);
+}
+
+/* Switch slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 48px;
+    height: 24px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.08);
+    transition: .4s;
+    border: 1px solid var(--border-color);
+}
+
+body.dark-mode .slider {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 3px;
+    bottom: 3px;
+    background-color: var(--text-secondary);
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: rgba(8, 145, 178, 0.15);
+    border-color: var(--color-cyan);
+}
+
+body.dark-mode input:checked + .slider {
+    background-color: rgba(6, 182, 212, 0.2);
+}
+
+input:checked + .slider:before {
+    transform: translateX(24px);
+    background-color: var(--color-cyan);
+    box-shadow: 0 0 6px var(--color-cyan);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+.facility-selector {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.facility-selector label {
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.facility-selector select {
+    background-color: rgba(0, 0, 0, 0.03);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-family: var(--font-outfit);
+    font-size: 13px;
+    cursor: pointer;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+body.dark-mode .facility-selector select {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.facility-selector select:focus {
+    border-color: var(--color-blue);
+}
+
+.user-profile {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--gradient-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: white;
+}
+
+.user-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.user-name {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.user-role {
+    font-size: 11px;
+    color: var(--text-muted);
+}
+
+/* Main Content Layout */
+.main-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-y: auto;
+    background-image: radial-gradient(circle at top right, rgba(37, 99, 235, 0.05) 0%, rgba(243, 244, 246, 0) 60%);
+}
+
+body.dark-mode .main-content {
+    background-image: radial-gradient(circle at top right, rgba(30, 41, 59, 0.3) 0%, rgba(10, 13, 22, 0) 60%);
+}
+
+/* Top GNB */
+.top-gnb {
+    height: 80px;
+    min-height: 80px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 40px;
+    backdrop-filter: blur(10px);
+    background-color: rgba(255, 255, 255, 0.8);
+    position: sticky;
+    top: 0;
+    z-index: 9;
+    transition: background-color var(--transition-speed), border-color var(--transition-speed);
+}
+
+body.dark-mode .top-gnb {
+    background-color: rgba(10, 13, 22, 0.8);
+}
+
+.page-title-area h1 {
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+}
+
+.page-title-area p {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin-top: 2px;
+}
+
+.status-panel {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+/* Theme Toggle GNB */
+.theme-toggle-btn, .config-btn {
+    background-color: rgba(0, 0, 0, 0.03);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    padding: 8px 14px;
+    border-radius: 8px;
+    font-family: var(--font-outfit);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+}
+
+body.dark-mode .theme-toggle-btn, body.dark-mode .config-btn {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.theme-toggle-btn:hover, .config-btn:hover {
+    background-color: rgba(0, 0, 0, 0.06);
+    border-color: var(--color-blue);
+}
+
+body.dark-mode .theme-toggle-btn:hover, body.dark-mode .config-btn:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+.api-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    background-color: rgba(0, 0, 0, 0.03);
+    padding: 6px 12px;
+    border-radius: 20px;
+    border: 1px solid var(--border-color);
+}
+
+body.dark-mode .api-status {
+    background-color: rgba(255, 255, 255, 0.03);
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.api-status.online .status-dot {
+    background-color: var(--color-green);
+    box-shadow: 0 0 8px var(--color-green);
+}
+
+.api-status.live-connected .status-dot {
+    background-color: var(--color-cyan);
+    box-shadow: 0 0 8px var(--color-cyan);
+}
+
+.notification-bell {
+    position: relative;
+    font-size: 20px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 38px;
+    height: 38px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.03);
+    border: 1px solid var(--border-color);
+    transition: all 0.2s;
+}
+
+body.dark-mode .notification-bell {
+    background-color: rgba(255, 255, 255, 0.03);
+}
+
+.notification-bell:hover {
+    color: var(--text-primary);
+    background-color: rgba(0, 0, 0, 0.06);
+}
+
+body.dark-mode .notification-bell:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+.noti-count {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    background-color: var(--color-red);
+    color: white;
+    font-size: 10px;
+    font-weight: 700;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid var(--bg-main);
+}
+
+/* Glass Card Styling */
+.glass-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    box-shadow: var(--card-shadow);
+    backdrop-filter: var(--card-blur);
+    -webkit-backdrop-filter: var(--card-blur);
+    padding: 24px;
+    transition: border-color 0.3s, box-shadow 0.3s, background-color var(--transition-speed);
+}
+
+.glass-card:hover {
+    border-color: rgba(0, 0, 0, 0.12);
+}
+
+body.dark-mode .glass-card:hover {
+    border-color: rgba(255, 255, 255, 0.12);
+}
+
+/* Tab Content Visibility */
+.tab-content {
+    display: none;
+    padding: 30px 40px;
+    animation: fadeIn 0.4s ease-out forwards;
+}
+
+.tab-content.active-tab {
+    display: block;
+}
+
+/* 1. Dashboard Tab Styles */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+.stat-card {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.card-icon-wrapper {
+    width: 54px;
+    height: 54px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+}
+
+.card-icon-wrapper.blue {
+    background: rgba(37, 99, 235, 0.08);
+    color: var(--color-blue);
+    border: 1px solid rgba(37, 99, 235, 0.15);
+}
+
+body.dark-mode .card-icon-wrapper.blue {
+    background: rgba(59, 130, 246, 0.15);
+    border-color: rgba(59, 130, 246, 0.3);
+}
+
+.card-icon-wrapper.red {
+    background: rgba(220, 38, 38, 0.08);
+    color: var(--color-red);
+    border: 1px solid rgba(220, 38, 38, 0.15);
+}
+
+body.dark-mode .card-icon-wrapper.red {
+    background: rgba(244, 63, 94, 0.15);
+    border-color: rgba(244, 63, 94, 0.3);
+}
+
+.card-icon-wrapper.green {
+    background: rgba(5, 150, 105, 0.08);
+    color: var(--color-green);
+    border: 1px solid rgba(5, 150, 105, 0.15);
+}
+
+body.dark-mode .card-icon-wrapper.green {
+    background: rgba(16, 185, 129, 0.15);
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.card-icon-wrapper.yellow {
+    background: rgba(217, 119, 6, 0.08);
+    color: var(--color-yellow);
+    border: 1px solid rgba(217, 119, 6, 0.15);
+}
+
+body.dark-mode .card-icon-wrapper.yellow {
+    background: rgba(251, 191, 36, 0.15);
+    border-color: rgba(251, 191, 36, 0.3);
+}
+
+.stat-data {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-label {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.stat-value {
+    font-size: 26px;
+    font-weight: 700;
+    margin: 2px 0;
+}
+
+.stat-trend {
+    font-size: 11px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.stat-trend.positive {
+    color: var(--color-green);
+}
+
+.stat-trend.alert-color {
+    color: var(--color-red);
+}
+
+/* Content Columns & Table */
+.content-row {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 24px;
+}
+
+.panel-col {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-col-35 {
+    flex: 0 0 35%;
+}
+
+.flex-col-40 {
+    flex: 0 0 40%;
+}
+
+.flex-col-65 {
+    flex: 0 0 65%;
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.panel-title {
+    font-size: 16px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.panel-title i {
+    color: var(--color-cyan);
+}
+
+/* Member Table Design */
+.table-container {
+    overflow-x: auto;
+    flex-grow: 1;
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+}
+
+.data-table th, .data-table td {
+    padding: 14px 16px;
+    font-size: 13px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.data-table th {
+    color: var(--text-secondary);
+    font-weight: 600;
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+body.dark-mode .data-table th {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.data-table tbody tr {
+    transition: background-color 0.2s;
+}
+
+.data-table tbody tr:hover {
+    background-color: rgba(0, 0, 0, 0.01);
+}
+
+body.dark-mode .data-table tbody tr:hover {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.risk-tag {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.risk-tag.allergy {
+    background-color: rgba(220, 38, 38, 0.06);
+    color: #b91c1c;
+    border: 1px solid rgba(220, 38, 38, 0.15);
+}
+
+body.dark-mode .risk-tag.allergy {
+    background-color: rgba(244, 63, 94, 0.12);
+    color: #fca5a5;
+    border-color: rgba(244, 63, 94, 0.2);
+}
+
+.risk-tag.disease {
+    background-color: rgba(124, 58, 237, 0.06);
+    color: #6d28d9;
+    border: 1px solid rgba(124, 58, 237, 0.15);
+}
+
+body.dark-mode .risk-tag.disease {
+    background-color: rgba(139, 92, 246, 0.12);
+    color: #c084fc;
+    border-color: rgba(139, 92, 246, 0.2);
+}
+
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.status-badge::before {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+}
+
+.status-badge.safe {
+    color: var(--color-green);
+}
+
+.status-badge.safe::before {
+    background-color: var(--color-green);
+}
+
+.status-badge.care {
+    color: var(--color-yellow);
+}
+
+.status-badge.care::before {
+    background-color: var(--color-yellow);
+}
+
+/* Remove/Delete Row icon */
+.delete-member-btn {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 14px;
+    transition: color 0.2s;
+}
+
+.delete-member-btn:hover {
+    color: var(--color-red);
+}
+
+/* Add buttons & Common Button Styles */
+.add-member-btn, .primary-btn, .secondary-btn {
+    font-family: var(--font-outfit);
+    border-radius: 8px;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+}
+
+.add-member-btn {
+    background: none;
+    border: 1px dashed var(--color-cyan);
+    color: var(--color-cyan);
+    padding: 6px 12px;
+    font-size: 12px;
+}
+
+.add-member-btn:hover {
+    background: rgba(8, 145, 178, 0.04);
+    transform: translateY(-1px);
+}
+
+body.dark-mode .add-member-btn:hover {
+    background: rgba(6, 182, 212, 0.08);
+}
+
+.primary-btn {
+    background: var(--gradient-primary);
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    font-size: 14px;
+    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
+}
+
+body.dark-mode .primary-btn {
+    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
+}
+
+.primary-btn:hover:not(:disabled) {
+    opacity: 0.95;
+    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
+    transform: translateY(-1px);
+}
+
+.primary-btn:disabled {
+    background: var(--text-muted);
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+.secondary-btn {
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+    padding: 12px 20px;
+    font-size: 14px;
+}
+
+body.dark-mode .secondary-btn {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.secondary-btn:hover {
+    background: rgba(0, 0, 0, 0.06);
+    border-color: rgba(0, 0, 0, 0.15);
+}
+
+body.dark-mode .secondary-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Charts and ESG info on Dash */
+.chart-container {
+    height: 180px;
+    position: relative;
+    margin-bottom: 20px;
+}
+
+.esg-score-box {
+    background-color: rgba(0, 0, 0, 0.01);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+body.dark-mode .esg-score-box {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.esg-title-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.esg-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.text-green {
+    color: var(--color-green);
+}
+
+.text-blue {
+    color: var(--color-blue);
+}
+
+.text-yellow {
+    color: var(--color-yellow);
+}
+
+.esg-badge {
+    background-color: rgba(5, 150, 105, 0.08);
+    color: #047857;
+    padding: 2px 8px;
+    border-radius: 20px;
+    font-size: 11px;
+    border: 1px solid rgba(5, 150, 105, 0.2);
+}
+
+body.dark-mode .esg-badge {
+    background-color: rgba(16, 185, 129, 0.15);
+    color: #6ee7b7;
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.esg-progress-bar {
+    width: 100%;
+    height: 8px;
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+body.dark-mode .esg-progress-bar {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+.esg-progress-fill {
+    height: 100%;
+    background: var(--gradient-success);
+    border-radius: 4px;
+}
+
+.esg-desc {
+    font-size: 11px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+/* 2. Diet Analyzer Tab (Weekly/Monthly Schedule layout) */
+.vertical-layout-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.full-width-panel {
+    width: 100%;
+}
+
+.margin-bottom-24 {
+    margin-bottom: 24px;
+}
+
+.diet-textarea {
+    width: 100%;
+    height: 110px;
+    background-color: rgba(0, 0, 0, 0.02);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    color: var(--text-primary);
+    padding: 16px;
+    font-family: var(--font-outfit);
+    font-size: 14px;
+    line-height: 1.6;
+    outline: none;
+    resize: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+body.dark-mode .diet-textarea {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.diet-textarea.large-textarea {
+    height: 180px;
+}
+
+.diet-textarea:focus {
+    border-color: var(--color-blue);
+    box-shadow: 0 0 10px rgba(37, 99, 235, 0.1);
+}
+
+body.dark-mode .diet-textarea:focus {
+    box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
+}
+
+.justify-between {
+    justify-content: space-between;
+    align-items: center;
+}
+
+.model-status-info {
+    font-size: 12px;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px solid var(--border-color);
+    padding: 6px 12px;
+    border-radius: 6px;
+}
+
+body.dark-mode .model-status-info {
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.model-status-info i {
+    color: var(--color-cyan);
+}
+
+.example-tag.active {
+    background-color: rgba(8, 145, 178, 0.08);
+    color: var(--text-primary);
+    border-color: rgba(8, 145, 178, 0.25);
+}
+
+body.dark-mode .example-tag.active {
+    background-color: rgba(6, 182, 212, 0.1);
+    border-color: rgba(6, 182, 212, 0.3);
+}
+
+/* Scheduler Loading View */
+.analyzer-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding: 30px 0;
+    color: var(--text-secondary);
+    font-size: 13px;
+    border-top: 1px solid var(--border-color);
+    margin-top: 20px;
+}
+
+.spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid rgba(37, 99, 235, 0.15);
+    border-top: 3px solid var(--color-blue);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+/* Results header banner */
+.result-header-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
+.summary-status-badge {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 10px;
+    flex: 1;
+}
+
+.summary-status-badge.alert-red {
+    background: rgba(220, 38, 38, 0.03);
+    border-left: 4px solid var(--color-red);
+}
+
+body.dark-mode .summary-status-badge.alert-red {
+    background: rgba(244, 63, 94, 0.05);
+}
+
+.summary-status-badge.safe-green {
+    background: rgba(5, 150, 105, 0.03);
+    border-left: 4px solid var(--color-green);
+}
+
+body.dark-mode .summary-status-badge.safe-green {
+    background: rgba(16, 185, 129, 0.05);
+}
+
+.summary-status-badge i {
+    font-size: 22px;
+    margin-top: 2px;
+}
+
+.summary-status-badge h4 {
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.summary-status-badge p {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 4px;
+}
+
+/* Schedule Card Grid (Weekly / Monthly cards) */
+.schedule-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-bottom: 30px;
+}
+
+@media(min-width: 1024px) {
+    .schedule-grid {
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    }
+}
+
+.schedule-card {
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+body.dark-mode .schedule-card {
+    background: rgba(22, 28, 48, 0.4);
+}
+
+.schedule-card.has-risk {
+    border-top: 3px solid var(--color-red);
+}
+
+.schedule-card.is-safe {
+    border-top: 3px solid var(--color-green);
+}
+
+.schedule-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
+    border-color: rgba(0, 0, 0, 0.12);
+}
+
+body.dark-mode .schedule-card:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.card-header-toggle {
+    padding: 18px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.header-day-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.day-title {
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.day-date {
+    font-size: 11px;
+    color: var(--text-muted);
+}
+
+.status-indicator-box {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.status-pill {
+    font-size: 10px;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+.status-pill.danger {
+    background-color: rgba(220, 38, 38, 0.08);
+    color: #dc2626;
+    border: 1px solid rgba(220, 38, 38, 0.2);
+}
+
+body.dark-mode .status-pill.danger {
+    background-color: rgba(244, 63, 94, 0.15);
+    color: #fca5a5;
+    border-color: rgba(244, 63, 94, 0.3);
+}
+
+.status-pill.success {
+    background-color: rgba(5, 150, 105, 0.08);
+    color: #059669;
+    border: 1px solid rgba(5, 150, 105, 0.2);
+}
+
+body.dark-mode .status-pill.success {
+    background-color: rgba(16, 185, 129, 0.15);
+    color: #a7f3d0;
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.toggle-arrow-icon {
+    color: var(--text-muted);
+    font-size: 14px;
+    transition: transform var(--transition-speed);
+}
+
+.toggle-arrow-icon.rotate-icon {
+    transform: rotate(180deg);
+}
+
+/* Accordion sliding effect */
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
+    background-color: rgba(0, 0, 0, 0.02);
+}
+
+body.dark-mode .accordion-content {
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+.accordion-content.expanded {
+    max-height: 2000px;
+    transition: max-height 0.4s ease-in-out;
+}
+
+.card-body-details {
+    padding: 20px;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.menu-orig-box, .menu-alt-box, .recipe-guide-box {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.menu-orig-box h5 {
+    font-size: 12px;
+    color: var(--color-red);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 700;
+}
+
+.menu-alt-box h5 {
+    font-size: 12px;
+    color: var(--color-green);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 700;
+}
+
+.recipe-guide-box h5 {
+    font-size: 12px;
+    color: var(--color-yellow);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 700;
+}
+
+.menu-content-text {
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--text-primary);
+}
+
+.recipe-content-text {
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--text-secondary);
+    background-color: rgba(0, 0, 0, 0.02);
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+}
+
+body.dark-mode .recipe-content-text {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+/* 3. VLM Verification Tab Styles */
+.vlm-monitor-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.camera-simulator-box {
+    width: 100%;
+    height: 380px;
+    background-color: #04060b;
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    position: relative;
+    overflow: hidden;
+}
+
+.camera-lens-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 2;
+    border: 2px solid rgba(59, 130, 246, 0.15);
+}
+
+.lens-crosshair {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    transform: translate(-50%, -50%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 50%;
+}
+
+.lens-crosshair::before, .lens-crosshair::after {
+    content: '';
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.lens-crosshair::before {
+    top: 50%;
+    left: -10px;
+    width: 60px;
+    height: 1px;
+}
+
+.lens-crosshair::after {
+    left: 50%;
+    top: -10px;
+    width: 1px;
+    height: 60px;
+}
+
+.scanner-laser {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(90deg, rgba(6, 182, 212, 0) 0%, rgba(6, 182, 212, 0.8) 50%, rgba(6, 182, 212, 0) 100%);
+    box-shadow: 0 0 12px var(--color-cyan);
+    display: none;
+}
+
+@keyframes scan {
+    0% { top: 0%; }
+    50% { top: 100%; }
+    100% { top: 0%; }
+}
+
+.camera-badge {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    background-color: var(--color-red);
+    color: white;
+    font-size: 10px;
+    font-weight: 700;
+    padding: 3px 8px;
+    border-radius: 4px;
+    letter-spacing: 0.5px;
+    animation: flash 1.5s infinite;
+}
+
+.image-viewport {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #020306;
+}
+
+.viewport-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    color: var(--text-muted);
+}
+
+.viewport-placeholder i {
+    font-size: 40px;
+}
+
+.viewport-placeholder p {
+    font-size: 13px;
+}
+
+#vlm-target-image {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+}
+
+.vlm-ops-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.vlm-desc {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.sim-selector-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+.sim-option-card {
+    border: 1px solid var(--border-color);
+    background-color: rgba(0, 0, 0, 0.02);
+    border-radius: 8px;
+    cursor: pointer;
+    overflow: hidden;
+    transition: all 0.2s ease;
+}
+
+body.dark-mode .sim-option-card {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.sim-option-card:hover {
+    border-color: rgba(0, 0, 0, 0.15);
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+body.dark-mode .sim-option-card:hover {
+    border-color: rgba(255, 255, 255, 0.15);
+    background-color: rgba(255, 255, 255, 0.04);
+}
+
+.sim-option-card.selected {
+    border-color: var(--color-blue);
+    background-color: rgba(37, 99, 235, 0.03);
+    box-shadow: 0 0 10px rgba(37, 99, 235, 0.05);
+}
+
+body.dark-mode .sim-option-card.selected {
+    background-color: rgba(59, 130, 246, 0.05);
+    box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
+}
+
+.sim-img-thumb-container {
+    height: 120px;
+    background-color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.sim-img-thumb-container img {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: cover;
+}
+
+.sim-info {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.sim-title {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.sim-badge {
+    align-self: flex-start;
+    font-size: 9px;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+
+.danger-badge {
+    background-color: rgba(220, 38, 38, 0.08);
+    color: #dc2626;
+    border: 1px solid rgba(220, 38, 38, 0.2);
+}
+
+body.dark-mode .danger-badge {
+    background-color: rgba(244, 63, 94, 0.15);
+    color: #fecaca;
+    border-color: rgba(244, 63, 94, 0.3);
+}
+
+.success-badge {
+    background-color: rgba(5, 150, 105, 0.08);
+    color: #059669;
+    border: 1px solid rgba(5, 150, 105, 0.2);
+}
+
+body.dark-mode .success-badge {
+    background-color: rgba(16, 185, 129, 0.15);
+    color: #d1fae5;
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.scan-action-row {
+    margin-top: 10px;
+}
+
+.large-btn {
+    width: 100%;
+    padding: 14px;
+    font-size: 15px;
+}
+
+/* VLM Verdict output panel */
+.vlm-result-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.vlm-verdict-box {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 18px;
+    border-radius: 12px;
+    color: white;
+}
+
+.vlm-verdict-box.rejected {
+    background: var(--gradient-danger);
+    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.2);
+}
+
+body.dark-mode .vlm-verdict-box.rejected {
+    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.2);
+}
+
+.vlm-verdict-box.passed {
+    background: var(--gradient-success);
+    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2);
+}
+
+body.dark-mode .vlm-verdict-box.passed {
+    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
+}
+
+.verdict-icon {
+    font-size: 28px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.verdict-text-area {
+    display: flex;
+    flex-direction: column;
+}
+
+.verdict-lbl {
+    font-size: 11px;
+    opacity: 0.8;
+}
+
+.verdict-text-area h3 {
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.matching-details-list {
+    background-color: rgba(0, 0, 0, 0.02);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+body.dark-mode .matching-details-list {
+    background-color: rgba(0, 0, 0, 0.15);
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 13px;
+}
+
+.detail-label {
+    color: var(--text-secondary);
+}
+
+.bar-progress-container {
+    width: 80px;
+    height: 6px;
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+    overflow: hidden;
+    margin: 0 10px;
+}
+
+body.dark-mode .bar-progress-container {
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+.bar-fill {
+    height: 100%;
+    background-color: var(--color-blue);
+    border-radius: 3px;
+}
+
+.detail-value {
+    font-weight: 600;
+}
+
+.vlm-reason-box {
+    background-color: rgba(0, 0, 0, 0.01);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+body.dark-mode .vlm-reason-box {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.vlm-reason-box h4 {
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.vlm-reason-box p {
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--text-secondary);
+}
+
+/* 4. Report and ESG Tab Styles */
+.report-tab-selectors {
+    display: flex;
+    gap: 6px;
+}
+
+.sub-tab-btn {
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    padding: 6px 12px;
+    font-size: 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: var(--font-outfit);
+}
+
+body.dark-mode .sub-tab-btn {
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.sub-tab-btn:hover {
+    color: var(--text-primary);
+}
+
+.sub-tab-btn.active {
+    background: rgba(8, 145, 178, 0.08);
+    color: var(--text-primary);
+    border-color: rgba(8, 145, 178, 0.25);
+}
+
+body.dark-mode .sub-tab-btn.active {
+    background: rgba(6, 182, 212, 0.1);
+    border-color: rgba(6, 182, 212, 0.3);
+}
+
+.report-document-container {
+    background-color: #f8fafc;
+    border-radius: 12px;
+    padding: 24px;
+    color: #1e293b;
+    box-shadow: 0 10px 25px rgba(31, 41, 55, 0.1);
+    max-height: 520px;
+    overflow-y: auto;
+}
+
+body.dark-mode .report-document-container {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+.report-paper {
+    background-color: white;
+    padding: 30px;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    font-family: 'Noto Sans KR', sans-serif;
+}
+
+.report-paper-header {
+    text-align: center;
+    border-bottom: 2px double #475569;
+    padding-bottom: 16px;
+    margin-bottom: 20px;
+}
+
+.report-paper-header h1 {
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: 4px;
+    margin-bottom: 14px;
+    color: #0f172a;
+}
+
+.report-meta-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    text-align: left;
+    font-size: 11px;
+    color: #475569;
+    row-gap: 6px;
+}
+
+.report-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 14px;
+    margin-bottom: 20px;
+}
+
+.report-table th, .report-table td {
+    border: 1px solid #cbd5e1;
+    padding: 10px;
+    font-size: 11px;
+    text-align: center;
+}
+
+.report-table th {
+    background-color: #f1f5f9;
+    color: #1e293b;
+    font-weight: 700;
+}
+
+.report-table td.align-left {
+    text-align: left;
+}
+
+.report-paper-body p {
+    font-size: 12px;
+    line-height: 1.6;
+    margin-bottom: 12px;
+}
+
+.report-paper-footer {
+    border-top: 1px solid #cbd5e1;
+    padding-top: 16px;
+    margin-top: 30px;
+    font-size: 11px;
+    color: #475569;
+}
+
+.sign-area {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.sign-seal {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 12px;
+    font-weight: 700;
+    position: relative;
+}
+
+.seal-stamp {
+    width: 48px;
+    height: 48px;
+    border: 2px solid #ef4444;
+    color: #ef4444;
+    border-radius: 50%;
+    font-size: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: rotate(-15deg);
+    font-weight: 800;
+    letter-spacing: 0.5px;
+    opacity: 0.8;
+}
+
+.report-footer-tag {
+    font-size: 9px;
+    color: #94a3b8;
+    text-align: center;
+    margin-top: 20px;
+}
+
+.padding-top-15 {
+    padding-top: 15px;
+}
+
+/* ESG metrics style page */
+.esg-metric-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.esg-metric-card {
+    background-color: rgba(0, 0, 0, 0.01);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+}
+
+body.dark-mode .esg-metric-card {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.esg-val {
+    font-size: 22px;
+    font-weight: 800;
+}
+
+.esg-lbl {
+    font-size: 12px;
+    font-weight: 600;
+    margin: 4px 0;
+}
+
+.esg-sub {
+    font-size: 10px;
+    color: var(--text-secondary);
+}
+
+.esg-chart-box {
+    background-color: rgba(0, 0, 0, 0.01);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 16px;
+    height: 180px;
+    position: relative;
+}
+
+body.dark-mode .esg-chart-box {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+/* Password Input field for OpenRouter API */
+.password-input-wrapper {
+    display: flex;
+    position: relative;
+    width: 100%;
+}
+
+.password-input-wrapper input {
+    width: 100%;
+    padding-right: 46px !important;
+}
+
+.password-input-wrapper button {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 8px;
+}
+
+.password-input-wrapper button:hover {
+    color: var(--text-primary);
+}
+
+/* Modal styles */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    animation: fadeIn 0.2s ease-out;
+}
+
+body.dark-mode .modal {
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.modal-content {
+    width: 480px;
+    max-width: 90%;
+    padding: 30px;
+    background: #ffffff;
+    color: #111827;
+}
+
+body.dark-mode .modal-content {
+    background: var(--bg-card);
+    color: var(--text-primary);
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+}
+
+.modal-header h3 {
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.close-modal-btn {
+    font-size: 24px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: color 0.2s;
+}
+
+.close-modal-btn:hover {
+    color: var(--text-primary);
+}
+
+.member-form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    font-weight: 600;
+}
+
+.form-group input, .form-group select, .form-group textarea {
+    background-color: rgba(0, 0, 0, 0.02);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+    padding: 10px 14px;
+    font-family: var(--font-outfit);
+    font-size: 13px;
+    outline: none;
+    transition: border-color 0.2s;
+}
+
+body.dark-mode .form-group input, body.dark-mode .form-group select, body.dark-mode .form-group textarea {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
+    border-color: var(--color-blue);
+}
+
+.form-group textarea {
+    height: 80px;
+    resize: none;
+}
+
+.modal-info-text {
+    font-size: 12px;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    margin-bottom: 20px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes flash {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+}
+
+.animate-bounce {
+    animation: bounce 2s infinite;
+}
+
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+}
+
+/* Toast Notifications */
+.toast-notification {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 24px;
+    background: #ffffff !important;
+    border: 1px solid rgba(37, 99, 235, 0.3) !important;
+    color: #111827;
+    transform: translateY(100px);
+    opacity: 0;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+body.dark-mode .toast-notification {
+    background: rgba(15, 23, 42, 0.95) !important;
+    border: 1px solid rgba(59, 130, 246, 0.4) !important;
+    color: white;
+}
+
+.toast-notification.show {
+    transform: translateY(0);
+    opacity: 1;
+}
+
+/* Print CSS Styles */
+@media print {
+    body * {
+        visibility: hidden;
+    }
+    #report-print-area, #report-print-area * {
+        visibility: visible;
+    }
+    #report-print-area {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        background-color: white !important;
+        box-shadow: none;
+        padding: 0;
+        color: black !important;
+        max-height: none;
+        overflow: visible;
+    }
+    .report-paper {
+        border: none;
+        padding: 0;
+    }
+}