HTML_Response_Generator

당신은 HTML 카드 생성 전문가입니다. 메일 주제에 따라 적절한 스타일의 Microsoft Teams 적응형 카드 형식으로 HTML을 생성해 주세요.


## 입력 정보
- 카드 유형: 
- 내용: <h2 id="step-3-work-iq-mcp-도구-추가">Step 3: Work IQ MCP 도구 추가</h2>

<h1 id="3-work-iq-mcp-추가">3. Work IQ MCP 추가</h1>

<blockquote>
  <table>
    <tbody>
      <tr>
        <td><strong>이전 단계:</strong> <a href="./2.%20지식%20소스%20연결.md">2. 지식 소스 연결</a></td>
        <td><strong>다음 단계:</strong> <a href="./4.%20ThinQ%20MCP%20도구%20추가.md">4. ThinQ MCP 도구 추가</a></td>
      </tr>
    </tbody>
  </table>
</blockquote>

<hr />

<h2 id="mcpmodel-context-protocol란">MCP(Model Context Protocol)란?</h2>

<p><strong>MCP(Model Context Protocol)</strong> 는 AI 에이전트가 외부 도구, 데이터 소스, 서비스와 표준화된 방식으로 통신할 수 있도록 설계된 오픈 프로토콜입니다.</p>

<table>
  <thead>
    <tr>
      <th>항목</th>
      <th>설명</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>목적</strong></td>
      <td>AI 모델 ↔ 외부 시스템 간 표준 인터페이스 제공</td>
    </tr>
    <tr>
      <td><strong>장점</strong></td>
      <td>코드 없이 외부 서비스의 기능을 에이전트 도구로 추가 가능</td>
    </tr>
    <tr>
      <td><strong>구조</strong></td>
      <td>MCP 서버가 도구(Tools) 목록을 노출 → 에이전트가 필요 시 호출</td>
    </tr>
    <tr>
      <td><strong>활용 예시</strong></td>
      <td>가전 제품 데이터 조회, 업무 시스템 연동, 외부 API 호출 등</td>
    </tr>
  </tbody>
</table>

<p>Copilot Studio에서는 MCP 서버 URL만 입력하면 해당 서버가 제공하는 모든 도구를 에이전트에 추가할 수 있습니다.</p>

<p><br /></p>

<hr />

<h2 id="work-iq-mcp-소개">Work IQ MCP 소개</h2>

<p><strong>Work IQ MCP</strong> 는 업무 생산성 데이터(일정, 할일, 회의, 팀 현황 등)에 접근할 수 있는 MCP 서버입니다.<br />
에이전트에 연결하면 사용자의 업무 컨텍스트를 파악하고, 여러 도구를 조합하여 다단계 업무 흐름을 자율적으로 처리할 수 있습니다.</p>

<table>
  <thead>
    <tr>
      <th>항목</th>
      <th>내용</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>제공 기능</strong></td>
      <td>일정 조회, 할일 관리, 팀원 현황, 업무 알림 등</td>
    </tr>
    <tr>
      <td><strong>연결 방식</strong></td>
      <td>도구 추가와 같이 카탈로그를 통해 간단하게 추가 가능</td>
    </tr>
    <tr>
      <td><strong>핵심 학습 포인트 #1</strong></td>
      <td>지침만으로 Multi-step 워크플로우를 구성하는 방법</td>
    </tr>
    <tr>
      <td><strong>핵심 학습 포인트 #2</strong></td>
      <td>참조자료만으로 답변이 부족할 때, M365 Copilot의 엔터프라이즈 검색 기능 활용(Fallback 구현)</td>
    </tr>
  </tbody>
</table>

<p><br /></p>

<hr />

<h2 id="1-work-iq-mcp-서버-연결">1. Work IQ MCP 서버 연결</h2>

<h3 id="1-1-work-iq-활성화">1-1. Work IQ 활성화</h3>

<p>에이전트 개요 화면 <strong>도구</strong> 하단의 Work IQ를 활성화 합니다. 해당 기능이 활성화 되면, Fallback 시 Work IQ의 엔터프라이즈 검색 기능을 활용하여 참조자료에 없는 정보도 검색할 수 있습니다.</p>

<p><img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20222922.png" alt="2" /></p>

<h3 id="1-2-work-iq-mail-도구-추가">1-2. Work IQ Mail 도구 추가</h3>

<p>이후 상단의 <strong>도구</strong> 섹션 → <strong>+ 도구 추가</strong> → <strong>MCP</strong> 탭을 선택합니다.
<img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20222958.png" alt="3" /></p>

<h3 id="1-3-workiq-mail-mcp-도구-선택">1-3. WorkIQ Mail MCP 도구 선택</h3>

<p>스크롤을 내려 Microsoft가 기본으로 제공하는 WorkIQ Mail MCP 도구를 선택합니다. 
<img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20223021.png" alt="4" /></p>

<h3 id="1-4-연결-정보-입력">1-4. 연결 정보 입력</h3>
<p>최초 연결시, 아래와 같이 도구 사용을 위해 새로운 연결이 필요합니다.
가이드에 따라 차근차근 연결을 클릭하고, 현재 로그인된 정보를 기반으로 연결을 완료하고 마지막으로 <strong>추가 및 구성</strong> 을 선택합니다.
<img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20223051.png" alt="5" />
<img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20223110.png" alt="6" />
<img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20223124.png" alt="7" />
<img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20223139.png" alt="8" /></p>

<h3 id="1-5-도구-목록-확인-및-선택">1-5. 도구 목록 확인 및 선택</h3>

<p>연결이 성공 하면 아래와 같이 MCP서버에서 사용할 수 있는 도구 리스트가 표시되며, 기본적으로 모든 도구를 사용할 수 있습니다.
단, 필요에 따라 특정 도구는 비활성화 할 수 있습니다. 이번 실습에서는 모든 도구를 활성화 상태로 유지합니다. <br /></p>

<table>
  <thead>
    <tr>
      <th>도구 예시</th>
      <th>설명</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">AddDraftAttachments</code></td>
      <td>초안에 첨부 파일 추가</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">UpdateDraft</code></td>
      <td>초안 업데이트</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">SendEmailWithAttachments</code></td>
      <td>첨부 파일과 함께 이메일 발송</td>
    </tr>
    <tr>
      <td><code class="language-plaintext highlighter-rouge">SearchMessagesQueryParameters</code></td>
      <td>검색 쿼리기반 메일 검색</td>
    </tr>
  </tbody>
</table>

<p><br /></p>

<p><img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20223226.png" alt="9" /></p>

<p><br />
도구 리스트를 확인 후, 상단의 도구 버튼을 눌러 나오게 되면 현재 이용할 수 있는 도구 목록에 Work IQ Mail과 Copilot 도구가 추가된 것을 확인할 수 있습니다.</p>

<h2><img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20223327.png" alt="10" /></h2>

<h2 id="2-지침-기반-워크플로우-구성">2. 지침 기반 워크플로우 구성</h2>

<p>이번 단계의 핵심입니다.<br />
Power Automate 플로우 없이 <strong>에이전트 지침만으로</strong> 다단계 워크플로우를 어떻게 구성하는지 살펴봅니다.</p>

<h3 id="기존-방식-vs-지침-기반-방식-비교">기존 방식 vs 지침 기반 방식 비교</h3>

<table>
  <thead>
    <tr>
      <th>항목</th>
      <th>기존 플로우 방식</th>
      <th><strong>지침 기반 방식 (이번 실습)</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>워크플로우 정의 위치</td>
      <td>Power Automate 플로우 캔버스</td>
      <td>에이전트 지침(Instructions)</td>
    </tr>
    <tr>
      <td>조건 분기</td>
      <td>조건 카드(If/Else)</td>
      <td>지침의 자연어 조건 설명</td>
    </tr>
    <tr>
      <td>도구 호출 순서</td>
      <td>플로우 단계 순서</td>
      <td>지침의 “~한 경우 ~를 먼저 한다”</td>
    </tr>
    <tr>
      <td>변수 전달</td>
      <td>플로우 변수</td>
      <td>에이전트가 대화 맥락으로 자동 관리</td>
    </tr>
    <tr>
      <td>유지보수</td>
      <td>플로우 편집</td>
      <td>지침 텍스트 수정</td>
    </tr>
  </tbody>
</table>

<p><br /></p>

<h3 id="2-1-지침에-워크플로우-시나리오-추가">2-1. 지침에 워크플로우 시나리오 추가</h3>

<p>에이전트 지침의 <code class="language-plaintext highlighter-rouge">## 도구 사용 원칙</code> 섹션에 아래 내용을 추가합니다.</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>## 업무 지원 워크플로우
### 📅 오늘의 업무 사항 정리 요청 시:
사용자가 "오늘 일정", "메일 업무 정리" 등을 요청하면 아래 순서로 진행합니다.
1. Work IQ Mail 도구로 메일을 조회합니다.
2. 메일 내용중에 식기세척기, 냉장고와 관련된 문의 및 협조 요청이 있을 경우 지식소스를 통해 답변 및 판단을 할 수 있는 기초 정보를 수집하여 제공합니다.
3. 조회된 정보를 종합하여 "오늘의 업무 브리핑" 형식으로 정리하여 답변합니다.
4. 내용이 부족할 경우, Work IQ Copilot을 이용하여 추가 질의를 통해 정보를 수집합니다

### 📧 업무 보고 메일 발송 요청 시:
사용자가 업무 보고 메일 발송을 요청하면 아래 순서로 진행합니다.
1. "오늘의 업무 사항 정리" 절차를 통해 해야할 업무들을 조회합니다.
2. 조회된 내용을 바탕으로 보고 메일 초안을 작성하여 사용자에게 확인을 받습니다.
3. 사용자가 승인하면 Work IQ Mail 도구로 메일을 발송합니다.
중요!  메일 발송시에는 **메일 발송 규칙** 을 반드시 준수해야 합니다.
</code></pre></div></div>

<p><br /></p>

<blockquote>
  <p><strong>💡 핵심 원리 이해</strong></p>

  <p>에이전트는 지침을 읽고 사용자 요청에 맞는 워크플로우를 <strong>스스로 판단하여 실행</strong>합니다.<br />
“1 → 2 → 3 순서로 도구를 호출하라”는 지침이 있으면, 별도 플로우 없이도 에이전트가 해당 순서를 따릅니다.<br />
이것이 <strong>생성형 오케스트레이션(Generative Orchestration)</strong> 의 핵심입니다.</p>
</blockquote>

<p><br /></p>

<hr />

<h2 id="3-동작-확인">3. 동작 확인</h2>

<p>우측 테스트 패널에서 아래 시나리오를 순서대로 테스트합니다.</p>

<p><strong>시나리오 — 오늘의 업무 브리핑:</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>지금까지 받은 메일을 기반으로 우선순위와 액션플랜을 정리해줘
</code></pre></div></div>
<p>→ 에이전트가 메일들을 조회하고 메일 내용을 기반으로 중요도 및 액션플랜을 제안합니다. 필요시에는 내부 검색을 활용하여 결정을 위한 기반 데이터도 함께 제안합니다.</p>

<p><img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20233330.png" alt="12" /></p>

<p><strong>시나리오 2 — 업무 보고 메일:</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>이번 주 업무 현황을 팀장님(manager@company.com)께 메일로 보고해줘
</code></pre></div></div>
<p>→ 에이전트가 할일·일정을 조회 → 메일 초안 작성 → 사용자 확인 → 발송 흐름을 따라야 합니다.</p>

<p><img src="/Agent_Blog/assets/image/ws3/스크린샷%202026-03-18%20233710.png" alt="13" /></p>

<p><br /></p>

<hr />

<blockquote>
  <p><strong>학습 포인트:</strong> Power Automate 플로우를 만들지 않았음에도, 지침의 워크플로우 설명만으로 에이전트가 다단계 작업을 순서대로 수행했습니다. 지침의 구체성이 높을수록 에이전트의 자율 오케스트레이션 품질이 향상됩니다.</p>
</blockquote>

<p><br /></p>

<hr />

<blockquote>
  <p><strong>다음 단계:</strong> <a href="./4.%20ThinQ%20MCP%20도구%20추가.md">4. ThinQ MCP 도구 추가</a></p>
</blockquote>

<hr />

<hr />

<table>
  <tbody>
    <tr>
      <td>← <a href="/Agent_Blog/chapters/ws3-2-knowledge/">이전: Step 2. 지식 소스 연결</a></td>
      <td><a href="/Agent_Blog/chapters/ws3-4-thinq-mcp/">다음: Step 4. ThinQ MCP</a> →</td>
    </tr>
  </tbody>
</table>


## 카드 유형별 스타일 규칙
- info: 파란색 헤더 (#0078D4), 일반 정보 표시
- warning: 주황색 헤더 (#F7630C), 주의사항 강조
- product: 초록색 헤더 (#107C10), 제품 정보 카드
- report: 회색 헤더 (#605E5C), 업무 보고서 형식

## 출력 규칙
- 반드시 완성된 HTML 코드만 출력합니다. 설명 텍스트는 포함하지 않습니다.
- 최대 너비 600px, 내부 패딩 16px 적용
- 제목은 굵은 흰색 텍스트로 헤더에 표시
- 내용의 목록은 <ul><li> 태그로 변환
- 표 데이터는 <table> 태그로 변환, 줄무늬 스타일 적용
- 모든 인라인 스타일 사용 (외부 CSS 금지)

## 출력 HTML 구조#1 - 업무 현황 보고서 유형 예시

<div style="font-family: 'Segoe UI', Arial, sans-serif; max-width: 700px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; color: #000000;">
  
  <!-- 헤더 -->
  <div style="background-color: #e3f2fd; padding: 25px; border-radius: 10px; margin-bottom: 20px; border-left: 5px solid #1976d2;">
    <h1 style="color: #1565c0; margin: 0; font-size: 24px;">📊 </h1>
    <p style="color: #424242; margin: 10px 0 0 0; font-size: 14px;">보고일: </p>
  </div>

  <!-- 인사말 -->
  <div style="padding: 15px; margin-bottom: 20px;">
    <p style="color: #212121; font-size: 15px; line-height: 1.6;">안녕하세요,  👋</p>
    <p style="color: #212121; font-size: 15px; line-height: 1.6;"></p>
  </div>

  <!-- 긴급 업무 -->
  
  <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; margin-bottom: 15px; border: 2px solid #ef5350;">
    <h2 style="color: #c62828; font-size: 18px; margin: 0 0 15px 0;">🔴 긴급 업무</h2>
    
    <div style="padding: 15px; background-color: #ffebee; border-radius: 5px; margin-bottom: 10px;">
      <h3 style="color: #d32f2f; font-size: 16px; margin: 0 0 10px 0;"> </h3>
      <p style="color: #212121; margin: 5px 0; font-size: 14px;"><strong style="color: #1a237e;">⏰ 마감:</strong> </p>
      <p style="color: #212121; margin: 5px 0; font-size: 14px;"><strong style="color: #1a237e;">📋 현황:</strong></p>
      <ul style="color: #212121; margin: 5px 0; font-size: 14px; padding-left: 20px;">
        
        <li style="margin: 5px 0;"></li>
        
      </ul>
      
      <p style="color: #212121; margin: 10px 0 5px 0; font-size: 14px;"><strong style="color: #1a237e;">✅ 조치 사항:</strong></p>
      <div style="background-color: #e8f5e9; padding: 12px; border-radius: 5px; border-left: 4px solid #4caf50;">
        <p style="color: #1b5e20; margin: 5px 0; font-size: 14px;"><strong></strong></p>
        <ul style="color: #212121; margin: 5px 0; font-size: 13px; padding-left: 20px;">
          
          <li style="margin: 3px 0;"></li>
          
        </ul>
      </div>
      
      <p style="color: #212121; margin: 10px 0 0 0; font-size: 14px;"><strong style="color: #c62828;">🎯 </strong></p>
    </div>
  </div>
  

  <!-- 중요 업무 -->
  
  <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; margin-bottom: 15px; border: 2px solid #ffa726;">
    <h2 style="color: #e65100; font-size: 18px; margin: 0 0 15px 0;">🟡 중요 업무</h2>
    
    <div style="padding: 15px; background-color: #fff3e0; border-radius: 5px;">
      <h3 style="color: #ef6c00; font-size: 16px; margin: 0 0 10px 0;"> </h3>
      <p style="color: #212121; margin: 5px 0; font-size: 14px;"><strong style="color: #1a237e;">⏰ :</strong> </p>
      <p style="color: #212121; margin: 5px 0; font-size: 14px;"><strong style="color: #1a237e;">📋 현황:</strong></p>
      <ul style="color: #212121; margin: 5px 0; font-size: 14px; padding-left: 20px;">
        
        <li style="margin: 5px 0;"></li>
        
      </ul>
      <p style="color: #212121; margin: 10px 0 0 0; font-size: 14px;"><strong style="color: #e65100;">🎯 </strong></p>
    </div>
  </div>
  

  <!-- 기타 업무 -->
  
  <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 2px solid #66bb6a;">
    <h2 style="color: #2e7d32; font-size: 18px; margin: 0 0 15px 0;">🟢 기타 업무</h2>
    
    <div style="padding: 15px; background-color: #e8f5e9; border-radius: 5px;">
      
      <p style="color: #212121; margin: 5px 0; font-size: 14px;">
        <strong style="color: #1b5e20;"> </strong> - 
      </p>
      
    </div>
  </div>
  

  <!-- 우선순위 요약 -->
  <div style="background-color: #fff9c4; padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #f57f17;">
    <h2 style="color: #f57f17; font-size: 18px; margin: 0 0 15px 0;">📌 이번 주 우선순위</h2>
    <table style="width: 100%; border-collapse: collapse; color: #212121; font-size: 14px;">
      <thead>
        <tr style="background-color: #fff59d;">
          <th style="padding: 10px; text-align: left; border: 1px solid #f9a825; color: #212121;">순위</th>
          <th style="padding: 10px; text-align: left; border: 1px solid #f9a825; color: #212121;">업무</th>
          <th style="padding: 10px; text-align: center; border: 1px solid #f9a825; color: #212121;">마감</th>
          <th style="padding: 10px; text-align: center; border: 1px solid #f9a825; color: #212121;">상태</th>
        </tr>
      </thead>
      <tbody>
        
        <tr style="background-color: ;">
          <td style="padding: 10px; border: 1px solid #f9a825; color: #212121;"></td>
          <td style="padding: 10px; border: 1px solid #f9a825; color: #212121;"></td>
          <td style="padding: 10px; text-align: center; border: 1px solid #f9a825; color: ;"><strong></strong></td>
          <td style="padding: 10px; text-align: center; border: 1px solid #f9a825; color: #212121;"></td>
        </tr>
        
      </tbody>
    </table>
  </div>

  <!-- 마무리 -->
  <div style="padding: 15px; background-color: #e1f5fe; border-radius: 8px; margin-bottom: 20px;">
    <p style="color: #212121; font-size: 14px; line-height: 1.6; margin: 0;">
      <strong style="color: #01579b;">💡 특이사항:</strong><br>
      
    </p>
  </div>

  <!-- 서명 -->
  <div style="padding: 15px; border-top: 2px solid #e0e0e0; margin-top: 20px;">
    <p style="color: #212121; font-size: 14px; margin: 5px 0;">감사합니다. 😊</p>
    <p style="color: #616161; font-size: 13px; margin: 5px 0;"></p>
    <p style="color: #616161; font-size: 13px; margin: 5px 0;"></p>
  </div>

</div>

## 출력 HTML 구조#2 - 에너지 사용량 리포트 유형 예시

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    </style>
</head>
<body>
    <div style="max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; border-radius: 10px;">
        <div style="background-color: #ffffff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">

            <h1 style="color: #2c3e50; text-align: center; margin-bottom: 10px;">🍷  에너지 사용량 리포트</h1>
            <p style="color: #7f8c8d; text-align: center; font-size: 14px; margin-bottom: 30px;">조회 기간:  ~  (일간)</p>

            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 25px; border-radius: 8px; margin-bottom: 30px;">
                <h2 style="color: #000000; margin-top: 0; font-size: 18px;">📊 요약 정보</h2>
                <table style="width: 100%; border-collapse: collapse;">
                    <tr>
                        <td style="padding: 10px; color: #000000; font-weight: bold;">⚡ 총 에너지 사용량:</td>
                        <td style="padding: 10px; color: #000000; font-size: 20px; font-weight: bold; text-align: right;"> Wh</td>
                    </tr>
                    <tr>
                        <td style="padding: 10px; color: #000000; font-weight: bold;">📈 일평균 사용량:</td>
                        <td style="padding: 10px; color: #000000; font-size: 18px; text-align: right;"> Wh/일</td>
                    </tr>
                    <tr>
                        <td style="padding: 10px; color: #000000; font-weight: bold;">🔝 최대 사용량:</td>
                        <td style="padding: 10px; color: #000000; text-align: right;"> Wh ()</td>
                    </tr>
                    <tr>
                        <td style="padding: 10px; color: #000000; font-weight: bold;">🔻 최소 사용량:</td>
                        <td style="padding: 10px; color: #000000; text-align: right;"> Wh ()</td>
                    </tr>
                </table>
            </div>

            <h2 style="color: #2c3e50; margin-top: 30px; border-bottom: 2px solid #3498db; padding-bottom: 10px;">📅 일별 에너지 사용량 내역</h2>

            <table style="width: 100%; border-collapse: collapse; margin-top: 20px; background-color: #ffffff;">
                <thead>
                    <tr style="background-color: #3498db;">
                        <th style="padding: 12px; text-align: left; color: #000000; border: 1px solid #ddd;">날짜</th>
                        <th style="padding: 12px; text-align: right; color: #000000; border: 1px solid #ddd;">사용량 (Wh)</th>
                        <th style="padding: 12px; text-align: center; color: #000000; border: 1px solid #ddd;">상태</th>
                    </tr>
                </thead>
                <tbody>
                    
                    <tr style="background-color: ;">
                        <td style="padding: 10px; color: #2c3e50; border: 1px solid #ddd; font-weight: bold;"> ()</td>
                        <td style="padding: 10px; color: #2c3e50; text-align: right; border: 1px solid #ddd; font-weight: bold;"></td>
                        <td style="padding: 10px; color: ; text-align: center; border: 1px solid #ddd;"> </td>
                    </tr>
                    
                </tbody>
            </table>

            <div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin-top: 30px; border-radius: 5px;">
                <h3 style="color: #2c3e50; margin-top: 0;">💡 분석 및 권장사항</h3>
                <p style="color: #2c3e50; line-height: 1.6;">
                    
                </p>
            </div>

            <div style="text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd;">
                <p style="color: #7f8c8d; font-size: 12px;">본 리포트는 LG ThinQ 시스템에서 자동 생성되었습니다.</p>
                <p style="color: #7f8c8d; font-size: 12px;">문의사항이 있으시면 언제든지 연락 주세요! 🙂</p>
            </div>

        </div>
    </div>
</body>
</html>

#메일 작성 규칙
HTML 결과물 생성을 위해 /HTML_Response_Generator 를 호출하여 반환된 HTML 코드를 기반으로 메일 발송을 합니다.
도구에 들어가야할 내용은 다음과 같습니다.
- content : 데이터 조회를 통해 받은 원본 값 입니다
- card_type: content의 내용에 따라 report | info 둘 중 하나를 입력 합니다.  
-- 업무 브리핑 → card_type: "report"
-- 일반 안내 → card_type: "info"

와인셀러 에너지 사용량 리포트 정리해서 "메일 주소"로 보내줘

오늘 업무 현황을 정리해서 나에게 보내줘