diff --git a/design/uiux/prototype/05-회의진행.html b/design/uiux/prototype/05-회의진행.html
index 462e732..e40fd03 100644
--- a/design/uiux/prototype/05-회의진행.html
+++ b/design/uiux/prototype/05-회의진행.html
@@ -60,7 +60,7 @@
     }
 
     .meeting-title {
-      font-size: var(--font-large);
+      font-size: var(--font-h2);
       font-weight: var(--font-weight-bold);
       color: var(--gray-800);
       margin: 0;
@@ -100,7 +100,7 @@
     }
 
     .recording-time {
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       font-weight: var(--font-weight-medium);
     }
 
@@ -173,9 +173,9 @@
     .info-row {
       display: flex;
       flex-direction: row;
-      align-items: center;
-      gap: var(--space-sm);
-      padding: var(--space-xs) 0;
+      align-items: flex-start;
+      gap: 0;
+      padding: var(--space-sm) 0;
       border-bottom: 1px solid var(--gray-300);
     }
 
@@ -186,14 +186,28 @@
     .info-label {
       font-weight: var(--font-weight-medium);
       color: var(--gray-600);
-      font-size: var(--font-caption);
-      min-width: 60px;
+      font-size: var(--font-small);
+      width: 70px;
+      min-width: 70px;
+      max-width: 70px;
       flex-shrink: 0;
+      padding-right: var(--space-sm);
+      border-right: 1px solid var(--gray-300);
+      margin-right: var(--space-sm);
+    }
+
+    /* 데스크톱에서 라벨 폭 확장 */
+    @media (min-width: 768px) {
+      .info-label {
+        width: 100px;
+        min-width: 100px;
+        max-width: 100px;
+      }
     }
 
     .info-value {
       color: var(--gray-800);
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       line-height: 1.5;
       flex: 1;
     }
@@ -229,7 +243,7 @@
       background: transparent;
       border: none;
       cursor: pointer;
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       font-weight: var(--font-weight-medium);
       color: var(--gray-600);
       transition: all var(--transition-fast);
@@ -289,13 +303,13 @@
     }
 
     .participant-section-title {
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       font-weight: var(--font-weight-bold);
       margin: 0;
     }
 
     .participant-count {
-      font-size: var(--font-caption);
+      font-size: var(--font-small);
       color: var(--gray-600);
     }
 
@@ -307,13 +321,13 @@
 
     .invite-input {
       flex: 1;
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       padding: var(--space-sm);
     }
 
     .invite-btn {
       padding: var(--space-sm) var(--space-md);
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       white-space: nowrap;
       flex-shrink: 0;
     }
@@ -337,13 +351,13 @@
     }
 
     .participant-name {
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       font-weight: var(--font-weight-medium);
       color: var(--gray-800);
     }
 
     .participant-email {
-      font-size: var(--font-caption);
+      font-size: var(--font-small);
       color: var(--gray-500);
       margin-top: 2px;
       overflow: hidden;
@@ -360,7 +374,7 @@
     }
 
     .memo-input-label {
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       font-weight: var(--font-weight-medium);
       color: var(--gray-700);
       margin-bottom: var(--space-xs);
@@ -373,7 +387,7 @@
       padding: var(--space-sm);
       border: 1px solid var(--gray-300);
       border-radius: var(--radius-md);
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       font-family: inherit;
       resize: vertical;
       line-height: 1.5;
@@ -388,11 +402,11 @@
       width: 100%;
       margin-top: var(--space-xs);
       padding: var(--space-sm);
-      font-size: var(--font-small);
+      font-size: var(--font-body);
     }
 
     .ai-suggestion-list-title {
-      font-size: var(--font-body);
+      font-size: var(--font-h3);
       font-weight: var(--font-weight-bold);
       color: var(--gray-900);
       margin-bottom: var(--space-sm);
@@ -416,7 +430,7 @@
     }
 
     .ai-suggestion-time {
-      font-size: var(--font-caption);
+      font-size: var(--font-small);
       color: var(--gray-500);
       font-weight: var(--font-weight-regular);
     }
@@ -446,7 +460,7 @@
     }
 
     .ai-suggestion-text {
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       color: var(--gray-700);
       line-height: 1.5;
     }
@@ -460,13 +474,13 @@
 
     .term-search-input {
       flex: 1;
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       padding: var(--space-sm);
     }
 
     .term-search-btn {
       padding: var(--space-sm) var(--space-md);
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       white-space: nowrap;
       flex-shrink: 0;
     }
@@ -493,7 +507,7 @@
     }
 
     .term-name {
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       font-weight: var(--font-weight-bold);
       color: var(--primary);
       display: flex;
@@ -512,14 +526,14 @@
     }
 
     .term-definition {
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       color: var(--gray-700);
       line-height: 1.5;
       margin-bottom: var(--space-xs);
     }
 
     .term-context {
-      font-size: 11px;
+      font-size: var(--font-small);
       color: var(--gray-500);
       padding-top: var(--space-xs);
       border-top: 1px dashed #D0D0D0;
@@ -546,7 +560,7 @@
     }
 
     .related-doc-title {
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       font-weight: var(--font-weight-bold);
       color: var(--primary);
       margin-bottom: var(--space-xs);
@@ -555,7 +569,7 @@
     .related-doc-meta {
       display: flex;
       gap: var(--space-xs);
-      font-size: var(--font-caption);
+      font-size: var(--font-small);
       color: var(--gray-600);
       margin-bottom: var(--space-xs);
     }
@@ -566,7 +580,7 @@
     }
 
     .related-doc-text {
-      font-size: var(--font-small);
+      font-size: var(--font-body);
       color: var(--gray-700);
       line-height: 1.5;
     }
diff --git a/design/uiux/prototype/09-Todo관리.html b/design/uiux/prototype/09-Todo관리.html
deleted file mode 100644
index 70c3f70..0000000
--- a/design/uiux/prototype/09-Todo관리.html
+++ /dev/null
@@ -1,1014 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>내 Todo - 회의록 서비스</title>
-  <link rel="stylesheet" href="common.css">
-  <style>
-    /* Mobile 프로필 버튼 (데스크톱에서 숨김) */
-    .mobile-profile-btn {
-      display: inline-flex;
-      background: none;
-      border: none;
-      padding: 0;
-      cursor: pointer;
-    }
-
-    @media (min-width: 768px) {
-      .mobile-profile-btn {
-        display: none;
-      }
-    }
-
-    /* 프로필 드롭다운 */
-    .profile-dropdown {
-      position: fixed;
-      top: 64px;
-      right: 16px;
-      width: 280px;
-      background: var(--white);
-      border-radius: var(--radius-lg);
-      box-shadow: var(--shadow-lg);
-      padding: var(--space-md);
-      z-index: 2001;
-      display: none;
-    }
-
-    .profile-dropdown.show {
-      display: block;
-      animation: slideDown 0.2s ease;
-    }
-
-    .profile-dropdown-header {
-      display: flex;
-      align-items: center;
-      padding-bottom: var(--space-md);
-      border-bottom: 1px solid var(--gray-300);
-    }
-
-    .profile-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.3);
-      z-index: 2000;
-      display: none;
-    }
-
-    .profile-overlay.show {
-      display: block;
-    }
-
-    @keyframes slideDown {
-      from {
-        opacity: 0;
-        transform: translateY(-10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    /* Desktop에서 프로필 드롭다운 숨김 */
-    @media (min-width: 768px) {
-      .profile-dropdown,
-      .profile-overlay {
-        display: none !important;
-      }
-    }
-
-    /* 페이지 특화 스타일 */
-
-    /* 통계 영역 - 모바일에서도 한 줄 유지 */
-    .stats-overview {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--space-sm);
-      margin-bottom: var(--space-md);
-    }
-
-    /* 통계 카드 - 정보 표시용 (인터랙션 없음) */
-    .stat-box {
-      min-height: 80px;
-      padding: var(--space-sm);
-      background: var(--white);
-      border: 1px solid var(--gray-200);
-      border-radius: var(--radius-md);
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-    }
-
-    .stat-box:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
-    }
-
-    /* 상태별 컬러 코딩 - 단색 배경 + 좌측 액센트 라인 */
-    .stat-box.stat-incomplete {
-      background: #F8FBFF;
-      border-left: 4px solid #2196F3;
-      border-color: #E3F2FD;
-    }
-
-    .stat-box.stat-urgent {
-      background: #FFFBF5;
-      border-left: 4px solid #FF9800;
-      border-color: #FFE0B2;
-    }
-
-    .stat-box.stat-overdue {
-      background: #FFF8F8;
-      border-left: 4px solid #F44336;
-      border-color: #FFCDD2;
-    }
-
-    .stat-number {
-      font-size: var(--font-h1); /* 더 크게 강조 */
-      font-weight: var(--font-weight-bold);
-      line-height: 1.2;
-      margin-bottom: 4px;
-    }
-
-    .stat-box.stat-incomplete .stat-number {
-      color: #1976D2; /* 진한 블루 */
-    }
-
-    .stat-box.stat-urgent .stat-number {
-      color: #F57C00; /* 진한 오렌지 */
-    }
-
-    .stat-box.stat-overdue .stat-number {
-      color: #D32F2F; /* 진한 레드 */
-    }
-
-    .stat-text {
-      font-size: var(--font-caption);
-      color: var(--gray-600); /* 더 연하게 */
-      font-weight: var(--font-weight-regular); /* 보통 굵기 */
-      opacity: 0.85;
-    }
-
-    /* 원형 진행 바 - 모바일에서 축소 */
-    .circular-progress {
-      width: 60px;
-      height: 60px;
-      margin: 0 auto 4px;
-      position: relative;
-    }
-
-    .circular-progress svg {
-      width: 60px;
-      height: 60px;
-    }
-
-    .circular-progress-text {
-      font-size: var(--font-body);
-    }
-
-    /* 데스크톱에서 통계 카드 크기 복원 */
-    @media (min-width: 768px) {
-      .stat-box {
-        min-height: 110px;
-        padding: var(--space-lg);
-      }
-
-      .stat-number {
-        font-size: 2.5rem; /* 더 큰 숫자 */
-        margin-bottom: var(--space-xs);
-      }
-
-      .stat-text {
-        font-size: var(--font-body);
-      }
-
-      .circular-progress {
-        width: 80px;
-        height: 80px;
-        margin-bottom: var(--space-sm);
-      }
-
-      .circular-progress svg {
-        width: 80px;
-        height: 80px;
-      }
-
-      .circular-progress-text {
-        font-size: var(--font-h3);
-      }
-    }
-
-    .circular-progress svg {
-      transform: rotate(-90deg);
-    }
-
-    .circular-progress circle {
-      fill: none;
-      stroke-width: 6;
-    }
-
-    .circular-progress .bg-circle {
-      stroke: var(--gray-300);
-    }
-
-    .circular-progress .progress-circle {
-      stroke: var(--primary);
-      stroke-linecap: round;
-      transition: stroke-dashoffset 1s ease;
-    }
-
-    .circular-progress-text {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-weight: var(--font-weight-bold);
-      color: var(--primary);
-    }
-
-    /* 데스크톱에서 stroke-width 복원 */
-    @media (min-width: 768px) {
-      .circular-progress circle {
-        stroke-width: 8;
-      }
-    }
-
-    /* 필터 탭 */
-    .filter-tabs {
-      display: flex;
-      gap: var(--space-sm);
-      margin-bottom: var(--space-lg);
-      overflow-x: auto;
-      padding-bottom: var(--space-sm);
-    }
-
-    .filter-tab {
-      padding: 8px 16px;
-      background: var(--white);
-      border: 1px solid var(--gray-300);
-      border-radius: 20px;
-      font-size: var(--font-small);
-      font-weight: var(--font-weight-medium);
-      color: var(--gray-700);
-      cursor: pointer;
-      white-space: nowrap;
-      transition: all var(--transition-fast);
-    }
-
-    .filter-tab.active {
-      background: var(--primary);
-      color: var(--white);
-      border-color: var(--primary);
-    }
-
-    .filter-tab:hover {
-      border-color: var(--primary);
-    }
-
-    /* Todo 카드 스타일은 common.css에서 공통 관리 */
-
-    /* 담당자 정보 숨김 (간결한 디자인) */
-    .todo-assignee {
-      display: none;
-    }
-
-    /* 액션 버튼 영역 - 09-Todo관리 페이지 전용: 우측 상단에 배치 */
-    .todo-actions {
-      position: absolute;
-      top: var(--space-md);
-      right: var(--space-md);
-    }
-
-    /* 아이콘 버튼 */
-    .icon-btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      padding: 0;
-      background: none;
-      border: none;
-      border-radius: var(--radius-md);
-      font-size: 20px;
-      cursor: pointer;
-      transition: all var(--transition-fast);
-    }
-
-    .icon-btn:hover {
-      background: var(--gray-100);
-      transform: scale(1.1);
-    }
-
-    .icon-btn:active {
-      background: var(--gray-200);
-      transform: scale(1);
-    }
-
-    /* 빈 상태 */
-    .empty-todos {
-      text-align: center;
-      padding: var(--space-xxl) var(--space-md);
-    }
-
-    .empty-todos-icon {
-      font-size: 64px;
-      margin-bottom: var(--space-md);
-    }
-
-    .empty-todos-title {
-      font-size: var(--font-h3);
-      font-weight: var(--font-weight-bold);
-      color: var(--gray-700);
-      margin-bottom: var(--space-sm);
-    }
-
-    .empty-todos-text {
-      color: var(--gray-500);
-      margin-bottom: var(--space-lg);
-    }
-
-
-    /* 날짜 입력 필드 래퍼 - 달력 아이콘 보호 */
-    .date-input-wrapper {
-      position: relative;
-    }
-
-    .date-input-wrapper input[type="date"] {
-      position: relative;
-      z-index: 1;
-    }
-
-    /* 달력 아이콘을 별도 요소로 표시 */
-    .date-input-wrapper::after {
-      content: '📅';
-      position: absolute;
-      right: 12px;
-      top: 50%;
-      transform: translateY(-50%);
-      pointer-events: none;
-      font-size: 18px;
-      z-index: 3;
-    }
-
-    /* 네이티브 달력 아이콘 숨김 */
-    .date-input-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
-      position: absolute;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      cursor: pointer;
-      z-index: 2;
-      /* Edge 브라우저 캘린더 팝업에 그림자 추가 */
-      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
-    }
-
-    /* Edge 브라우저용 포커스 시 하단 테두리 강조 */
-    .date-input-wrapper input[type="date"]:focus {
-      box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.15),
-                  0 4px 0 0 var(--primary);
-    }
-
-    /* Todo 편집 모달 - 모바일 전체화면 */
-    #editTodoModal .modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      height: 100vh;
-      max-width: none;
-      max-height: none;
-      margin: 0;
-      border-radius: 0;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    #editTodoModal .modal-header {
-      flex-shrink: 0;
-      padding: var(--space-lg) var(--space-md);
-      border-bottom: 1px solid var(--gray-200);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-
-    #editTodoModal .modal-title {
-      font-size: var(--font-h3);
-      font-weight: var(--font-weight-bold);
-      margin: 0;
-    }
-
-    #editTodoModal .modal-close {
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 28px;
-      background: none;
-      border: none;
-      cursor: pointer;
-      color: var(--gray-600);
-      border-radius: var(--radius-md);
-      transition: all var(--transition-fast);
-    }
-
-    #editTodoModal .modal-close:hover {
-      background: var(--gray-100);
-      color: var(--gray-900);
-    }
-
-    #editTodoModal .modal-body {
-      flex: 1;
-      overflow-y: auto;
-      padding: var(--space-lg) var(--space-md);
-      -webkit-overflow-scrolling: touch;
-    }
-
-    #editTodoModal .modal-footer {
-      flex-shrink: 0;
-      padding: var(--space-md);
-      border-top: 1px solid var(--gray-200);
-      display: flex;
-      gap: var(--space-sm);
-      background: var(--white);
-    }
-
-    #editTodoModal .modal-footer .btn {
-      flex: 1;
-    }
-
-    /* 데스크톱에서는 중앙 모달로 복원 */
-    @media (min-width: 768px) {
-      #editTodoModal .modal {
-        position: relative;
-        top: auto;
-        left: auto;
-        right: auto;
-        bottom: auto;
-        width: 90%;
-        max-width: 600px;
-        height: auto;
-        max-height: 90vh;
-        margin: 0 auto;
-        border-radius: var(--radius-lg);
-      }
-    }
-  </style>
-</head>
-<body class="layout-sidebar-header has-sidebar">
-  <!-- 사이드바 (데스크톱) -->
-  <aside class="sidebar">
-    <a href="02-대시보드.html" class="sidebar-logo">
-      <img src="img/cicle.png" alt="로고" class="sidebar-logo-icon-img">
-      <div class="sidebar-logo-text">회의록 서비스</div>
-    </a>
-
-    <nav class="sidebar-nav">
-      <a href="12-회의록목록조회.html" class="sidebar-nav-item">
-        <span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
-        <span>회의록</span>
-      </a>
-      <a href="09-Todo관리.html" class="sidebar-nav-item active">
-        <span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
-        <span>Todo 관리</span>
-      </a>
-    </nav>
-
-    <!-- 사용자 정보 영역 (Desktop) -->
-    <div class="sidebar-user">
-      <div class="avatar avatar-green">김</div>
-      <div class="sidebar-user-info">
-        <div class="sidebar-user-name">김민준</div>
-        <div class="sidebar-user-email">minjun.kim@company.com</div>
-      </div>
-    </div>
-    <button class="btn btn-ghost" style="width: calc(100% - 32px); margin: 0 16px 16px;" onclick="logout()">로그아웃</button>
-  </aside>
-
-  <!-- 헤더 -->
-  <header class="header">
-    <div class="header-left">
-      <h1 class="header-title">Todo 관리</h1>
-    </div>
-    <!-- Mobile 프로필 아이콘 -->
-    <button class="mobile-profile-btn" onclick="toggleProfileMenu()" title="프로필">
-      <div class="avatar avatar-green">김</div>
-    </button>
-  </header>
-
-  <!-- Mobile 프로필 드롭다운 -->
-  <div class="profile-dropdown" id="profileDropdown">
-    <div class="profile-dropdown-header">
-      <div class="avatar avatar-green">김</div>
-      <div style="margin-left: 12px;">
-        <div style="font-weight: 600; font-size: 14px; color: var(--gray-900);">김민준</div>
-        <div style="font-size: 12px; color: var(--gray-500);">minjun.kim@company.com</div>
-      </div>
-    </div>
-    <button class="btn btn-ghost" style="width: 100%; margin-top: 12px;" onclick="logout()">로그아웃</button>
-  </div>
-  <div class="profile-overlay" id="profileOverlay" onclick="toggleProfileMenu()"></div>
-
-  <!-- 메인 콘텐츠 -->
-  <main class="main-content">
-      <!-- 통계 개요 -->
-      <div class="stats-overview">
-        <div class="stat-box stat-incomplete">
-          <div class="stat-number" id="totalTodos">0</div>
-          <div class="stat-text">미완료</div>
-        </div>
-        <div class="stat-box stat-urgent">
-          <div class="stat-number" id="urgentTodos">0</div>
-          <div class="stat-text">마감 임박</div>
-        </div>
-        <div class="stat-box stat-overdue">
-          <div class="stat-number" id="overdueTodos">0</div>
-          <div class="stat-text">지연</div>
-        </div>
-      </div>
-
-      <!-- 필터 탭 -->
-      <div class="filter-tabs">
-        <button class="filter-tab active" data-filter="all" onclick="filterTodos('all')">
-          전체 (<span id="filterAllCount">0</span>)
-        </button>
-        <button class="filter-tab" data-filter="overdue" onclick="filterTodos('overdue')">
-          지연 (<span id="filterOverdueCount">0</span>)
-        </button>
-        <button class="filter-tab" data-filter="urgent" onclick="filterTodos('urgent')">
-          마감 임박 (<span id="filterUrgentCount">0</span>)
-        </button>
-        <button class="filter-tab" data-filter="completed" onclick="filterTodos('completed')">
-          완료 (<span id="filterCompletedCount">0</span>)
-        </button>
-      </div>
-
-      <!-- Todo 리스트 -->
-      <div id="todoListContainer"></div>
-  </main>
-
-  <!-- 하단 네비게이션 -->
-  <nav class="bottom-nav">
-      <a href="02-대시보드.html" class="nav-item">
-        <img src="img/home.png" alt="홈" style="width: 45px;">
-      </a>
-      <a href="12-회의록목록조회.html" class="nav-item">
-        <img src="img/edit.png" alt="회의록" style="width: 45px;">
-      </a>
-      <a href="09-Todo관리.html" class="nav-item active">
-        <img src="img/list.png" alt="Todo" style="width: 45px;">
-      </a>
-    </nav>
-
-  <!-- Todo 추가 모달 -->
-  <div class="modal-overlay" id="addTodoModal">
-    <div class="modal">
-      <div class="modal-header">
-        <h3 class="modal-title">Todo 추가</h3>
-        <button class="modal-close">×</button>
-      </div>
-      <div class="modal-body">
-        <div class="form-group">
-          <label class="form-label">Todo 내용</label>
-          <input type="text" class="form-control" placeholder="할 일을 입력하세요">
-        </div>
-        <div class="form-group">
-          <label class="form-label">마감일</label>
-          <div class="date-input-wrapper">
-            <input type="date" class="form-control">
-          </div>
-        </div>
-        <div class="form-group">
-          <label class="form-label">우선순위</label>
-          <select class="form-control">
-            <option value="high">높음</option>
-            <option value="medium" selected>보통</option>
-            <option value="low">낮음</option>
-          </select>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-ghost" onclick="closeModal('addTodoModal')">취소</button>
-        <button class="btn btn-primary" onclick="addTodo()">추가</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Todo 편집 모달 (UFR-TODO-040) -->
-  <div class="modal-overlay" id="editTodoModal">
-    <div class="modal">
-      <div class="modal-header">
-        <h3 class="modal-title">Todo 편집</h3>
-        <button class="modal-close">×</button>
-      </div>
-      <div class="modal-body">
-        <div class="form-group">
-          <label class="form-label">Todo 제목 <span class="text-error">*</span></label>
-          <input type="text" id="editTodoTitle" class="form-control" placeholder="할 일을 입력하세요">
-        </div>
-        <!-- 담당자 필드 (회의 생성자만 표시) -->
-        <div class="form-group" id="editTodoAssigneeGroup" style="display: none;">
-          <label class="form-label">담당자 <span class="text-error">*</span></label>
-          <select id="editTodoAssignee" class="form-control">
-            <option value="김민준">김민준</option>
-            <option value="이서연">이서연</option>
-            <option value="박준호">박준호</option>
-            <option value="정수진">정수진</option>
-          </select>
-          <p class="form-hint">👤 담당자 변경 시 이전/새 담당자에게 알림이 전송됩니다</p>
-        </div>
-        <div class="form-group">
-          <label class="form-label">마감일 <span class="text-error">*</span></label>
-          <div class="date-input-wrapper">
-            <input type="date" id="editTodoDueDate" class="form-control">
-          </div>
-          <p class="form-hint">📅 마감일 변경 시 캘린더가 자동 업데이트됩니다</p>
-        </div>
-        <div class="form-group">
-          <label class="form-label">우선순위 <span class="text-error">*</span></label>
-          <select id="editTodoPriority" class="form-control">
-            <option value="high">높음</option>
-            <option value="medium">보통</option>
-            <option value="low">낮음</option>
-          </select>
-        </div>
-        <!-- 권한 안내 (동적 메시지) -->
-        <div class="alert alert-info" id="editTodoPermissionInfo">
-          <span class="material-icons" style="font-size: 20px;">info</span>
-          <div>
-            <strong>권한 안내</strong>
-            <p style="margin: 4px 0 0 0; font-size: 14px;" id="editTodoPermissionText">본인에게 할당된 Todo만 수정할 수 있습니다. 담당자는 변경할 수 없습니다.</p>
-          </div>
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-ghost" onclick="closeModal('editTodoModal')">취소</button>
-        <button class="btn btn-primary" onclick="saveTodoEdit()">저장</button>
-      </div>
-    </div>
-  </div>
-
-  <script src="common.js"></script>
-  <script>
-    let currentFilter = 'all';
-    let allTodos = [];
-
-    // 페이지 초기화
-    function initPage() {
-      allTodos = SAMPLE_TODOS;
-      updateStats();
-      renderTodoList();
-    }
-
-    // 통계 업데이트
-    function updateStats() {
-      const total = allTodos.filter(t => t.status !== 'completed').length; // 미완료 전체
-      const completed = allTodos.filter(t => t.status === 'completed').length;
-      const urgent = allTodos.filter(t => {
-        const dday = calculateDday(t.dueDate);
-        return dday >= 0 && dday <= 3 && t.status !== 'completed';
-      }).length;
-      const overdue = allTodos.filter(t => {
-        const dday = calculateDday(t.dueDate);
-        return dday < 0 && t.status !== 'completed';
-      }).length;
-
-      // 상단 통계 블록 카운터 애니메이션
-      animateCounter('totalTodos', total);
-      animateCounter('urgentTodos', urgent);
-      animateCounter('overdueTodos', overdue);
-
-      // 필터 탭 개수 업데이트
-      $('#filterAllCount').textContent = allTodos.length;
-      $('#filterOverdueCount').textContent = overdue;
-      $('#filterUrgentCount').textContent = urgent;
-      $('#filterCompletedCount').textContent = completed;
-    }
-
-    // Todo 리스트 렌더링
-    function renderTodoList() {
-      const container = $('#todoListContainer');
-      let filteredTodos = allTodos;
-
-      // 필터 적용
-      if (currentFilter === 'completed') {
-        filteredTodos = allTodos.filter(t => t.status === 'completed');
-      } else if (currentFilter === 'overdue') {
-        filteredTodos = allTodos.filter(t => {
-          const dday = calculateDday(t.dueDate);
-          return dday < 0 && t.status !== 'completed';
-        });
-      } else if (currentFilter === 'urgent') {
-        filteredTodos = allTodos.filter(t => {
-          const dday = calculateDday(t.dueDate);
-          return dday >= 0 && dday <= 3 && t.status !== 'completed';
-        });
-      }
-
-      // 정렬: 완료되지 않은 것 우선, 마감일 순
-      filteredTodos.sort((a, b) => {
-        if (a.status === 'completed' && b.status !== 'completed') return 1;
-        if (a.status !== 'completed' && b.status === 'completed') return -1;
-        return new Date(a.dueDate) - new Date(b.dueDate);
-      });
-
-      // 빈 상태
-      if (filteredTodos.length === 0) {
-        container.innerHTML = `
-          <div class="empty-todos">
-            <div class="empty-todos-icon">📝</div>
-            <h3 class="empty-todos-title">할당된 Todo가 없습니다</h3>
-            <p class="empty-todos-text">새 회의를 시작하거나 Todo를 직접 추가해보세요!</p>
-            <button class="btn btn-primary" onclick="openModal('addTodoModal')">Todo 추가하기</button>
-          </div>
-        `;
-        return;
-      }
-
-      // Todo 카드 렌더링
-      container.innerHTML = '';
-      filteredTodos.forEach(todo => {
-        const statusInfo = getTodoStatusInfo(todo);
-        const dday = calculateDday(todo.dueDate);
-        const isCompleted = todo.status === 'completed';
-
-        const card = createElement('div', {
-          className: `todo-card ${isCompleted ? 'completed' : ''}`,
-          dataset: { todoId: todo.id }
-        }, `
-          <div class="todo-top">
-            <div class="todo-checkbox-wrapper">
-              <input type="checkbox" class="todo-checkbox"
-                     ${isCompleted ? 'checked' : ''}
-                     onchange="toggleTodoComplete('${todo.id}', this.checked)">
-            </div>
-            <div class="todo-content-wrapper">
-              <div class="todo-badges">
-                ${createBadge(statusInfo.badgeText, statusInfo.badgeType)}
-                ${createBadge(
-                  todo.priority === 'high' ? '높음' :
-                  todo.priority === 'medium' ? '보통' : '낮음',
-                  todo.priority
-                )}
-              </div>
-              <div class="todo-title">${todo.title}</div>
-              <div class="todo-meta-row">
-                <a class="todo-meeting-link" onclick="goToMeeting('${todo.meetingId}')">
-                  🔗 ${todo.meetingTitle}
-                </a>
-                <span>${formatDate(todo.dueDate)}</span>
-              </div>
-          ${!isCompleted ? `
-            <div class="todo-actions">
-              <button class="icon-btn" onclick="editTodo('${todo.id}')" title="편집">✏️</button>
-            </div>
-          ` : ''}
-            </div>
-          </div>
-        `);
-
-        container.appendChild(card);
-      });
-    }
-
-    // 필터 변경
-    function filterTodos(filter) {
-      currentFilter = filter;
-
-      // 탭 활성화
-      $$('.filter-tab').forEach(tab => {
-        tab.classList.remove('active');
-      });
-      $(`.filter-tab[data-filter="${filter}"]`).classList.add('active');
-
-      renderTodoList();
-    }
-
-    // Todo 완료 토글
-    function toggleTodoComplete(todoId, isChecked) {
-      if (isChecked) {
-        // 완료 처리
-        if (confirm('완료 처리하시겠습니까?')) {
-          const todo = allTodos.find(t => t.id === todoId);
-          if (todo) {
-            todo.status = 'completed';
-            showToast('Todo가 완료되었습니다', 'success');
-            updateStats();
-            renderTodoList();
-          }
-        } else {
-          event.target.checked = false;
-        }
-      } else {
-        // 미완료로 되돌리기
-        if (confirm('미완료로 변경하시겠습니까?')) {
-          const todo = allTodos.find(t => t.id === todoId);
-          if (todo) {
-            todo.status = 'incomplete';
-            showToast('미완료로 변경되었습니다', 'info');
-            updateStats();
-            renderTodoList();
-          }
-        } else {
-          event.target.checked = true;
-        }
-      }
-    }
-
-    // 회의록으로 이동
-    function goToMeeting(meetingId) {
-      showToast('회의록으로 이동합니다', 'info');
-      setTimeout(() => {
-        navigateTo('10-회의록상세조회.html');
-      }, 800);
-    }
-
-    // Todo 추가
-    function addTodo() {
-      showToast('Todo가 추가되었습니다', 'success');
-      closeModal('addTodoModal');
-      // 실제로는 폼 데이터를 수집하여 allTodos에 추가
-    }
-
-    // Todo 편집 (UFR-TODO-040)
-    let editingTodoId = null;
-
-    function editTodo(todoId) {
-      const todo = allTodos.find(t => t.id === todoId);
-      if (!todo) return;
-
-      editingTodoId = todoId;
-
-      // 편집 모달에 현재 값 채우기
-      $('#editTodoTitle').value = todo.title;
-      $('#editTodoDueDate').value = todo.dueDate;
-      $('#editTodoPriority').value = todo.priority;
-
-      // 회의 생성자 여부 확인 (실제로는 서버에서 확인)
-      const currentUser = '김민준'; // 현재 로그인 사용자
-      const isCreator = checkIfUserIsCreator(todo.meetingId, currentUser);
-
-      // 담당자 필드 표시 여부 결정
-      const assigneeGroup = $('#editTodoAssigneeGroup');
-      const permissionText = $('#editTodoPermissionText');
-
-      if (isCreator) {
-        // 회의 생성자: 담당자 변경 가능
-        assigneeGroup.style.display = 'block';
-        $('#editTodoAssignee').value = todo.assignee.name;
-        permissionText.textContent = '회의 생성자로서 모든 항목을 수정할 수 있습니다. 담당자 변경 시 알림이 전송됩니다.';
-      } else {
-        // 일반 담당자: 담당자 변경 불가
-        assigneeGroup.style.display = 'none';
-        permissionText.textContent = '본인에게 할당된 Todo만 수정할 수 있습니다. 담당자는 변경할 수 없습니다.';
-      }
-
-      openModal('editTodoModal');
-    }
-
-    /**
-     * 회의 생성자 여부 확인
-     * @param {string} meetingId - 회의 ID
-     * @param {string} userName - 사용자 이름
-     * @returns {boolean} 회의 생성자 여부
-     */
-    function checkIfUserIsCreator(meetingId, userName) {
-      // 실제로는 서버 API를 호출하여 확인
-      // 프로토타입에서는 샘플 데이터로 시뮬레이션
-      const meetingCreators = {
-        'meeting-001': '김민준',
-        'meeting-002': '이서연',
-        'meeting-003': '박준호'
-      };
-
-      return meetingCreators[meetingId] === userName;
-    }
-
-    function saveTodoEdit() {
-      if (!editingTodoId) return;
-
-      const todo = allTodos.find(t => t.id === editingTodoId);
-      if (!todo) return;
-
-      // 수정된 값 가져오기
-      const newTitle = $('#editTodoTitle').value.trim();
-      const newDueDate = $('#editTodoDueDate').value;
-      const newPriority = $('#editTodoPriority').value;
-
-      // 유효성 검사
-      if (!newTitle) {
-        showToast('Todo 제목을 입력해주세요', 'error');
-        return;
-      }
-
-      if (!newDueDate) {
-        showToast('마감일을 선택해주세요', 'error');
-        return;
-      }
-
-      // 회의 생성자 여부 확인
-      const currentUser = '김민준';
-      const isCreator = checkIfUserIsCreator(todo.meetingId, currentUser);
-
-      // 담당자 변경 여부 확인 (회의 생성자만 가능)
-      let assigneeChanged = false;
-      let oldAssignee = '';
-      let newAssignee = '';
-
-      if (isCreator) {
-        const assigneeGroup = $('#editTodoAssigneeGroup');
-        if (assigneeGroup.style.display !== 'none') {
-          newAssignee = $('#editTodoAssignee').value;
-          oldAssignee = todo.assignee.name;
-          assigneeChanged = (oldAssignee !== newAssignee);
-        }
-      }
-
-      // Todo 업데이트
-      const oldDueDate = todo.dueDate;
-      todo.title = newTitle;
-      todo.dueDate = newDueDate;
-      todo.priority = newPriority;
-
-      if (assigneeChanged) {
-        todo.assignee.name = newAssignee;
-      }
-
-      showToast('Todo가 수정되었습니다', 'success');
-      closeModal('editTodoModal');
-
-      // 담당자 변경 시 알림 발송
-      if (assigneeChanged) {
-        setTimeout(() => {
-          showToast(`${oldAssignee}와 ${newAssignee}에게 알림이 전송되었습니다`, 'info');
-        }, 1000);
-      }
-
-      // 마감일 변경 시 캘린더 업데이트 메시지
-      if (oldDueDate !== newDueDate) {
-        setTimeout(() => {
-          showToast('캘린더가 업데이트되었습니다', 'info');
-        }, assigneeChanged ? 2000 : 1000);
-      }
-
-      updateStats();
-      renderTodoList();
-      editingTodoId = null;
-    }
-
-    // 카운터 애니메이션
-    function animateCounter(elementId, target) {
-      const element = $(`#${elementId}`);
-      let current = parseInt(element.textContent) || 0;
-      const increment = (target - current) / 20;
-
-      const timer = setInterval(() => {
-        current += increment;
-        if ((increment > 0 && current >= target) || (increment < 0 && current <= target)) {
-          element.textContent = target;
-          clearInterval(timer);
-        } else {
-          element.textContent = Math.round(current);
-        }
-      }, 30);
-    }
-
-    /**
-     * 프로필 메뉴 토글 (Mobile)
-     */
-    function toggleProfileMenu() {
-      const dropdown = $('#profileDropdown');
-      const overlay = $('#profileOverlay');
-
-      dropdown.classList.toggle('show');
-      overlay.classList.toggle('show');
-    }
-
-    /**
-     * 로그아웃
-     */
-    function logout() {
-      if (confirm('로그아웃 하시겠습니까?')) {
-        // 로컬 스토리지 초기화
-        localStorage.removeItem('isLoggedIn');
-        localStorage.removeItem('currentUser');
-
-        // 로그인 페이지로 이동
-        navigateTo('01-로그인.html');
-      }
-    }
-
-    // 페이지 로드 시 초기화
-    initPage();
-  </script>
-</body>
-</html>