diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..ba2a6c0
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "python-envs.defaultEnvManager": "ms-python.python:system",
+    "python-envs.pythonProjects": []
+}
\ No newline at end of file
diff --git a/design/uiux/prototype/01-로그인.html b/design/uiux/prototype/01-로그인.html
index ddeb544..406bae3 100644
--- a/design/uiux/prototype/01-로그인.html
+++ b/design/uiux/prototype/01-로그인.html
@@ -3,168 +3,349 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>로그인 - 회의록 작성 및 공유 개선 서비스</title>
+  <title>로그인 - 회의록 작성 및 공유 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    /* 페이지 전용 스타일 */
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      background: linear-gradient(135deg, #00D9B1 0%, #6366F1 100%);
+    }
+
+    .login-card {
+      background-color: var(--color-white);
+      border-radius: var(--radius-xl);
+      padding: var(--spacing-10);
+      box-shadow: var(--shadow-lg);
+      width: 100%;
+      max-width: 480px;
+      margin: var(--spacing-4);
+    }
+
+    .login-header {
+      text-align: center;
+      margin-bottom: var(--spacing-8);
+    }
+
+    .login-logo {
+      width: 64px;
+      height: 64px;
+      margin: 0 auto var(--spacing-4);
+      background-color: var(--color-primary-main);
+      border-radius: var(--radius-lg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32px;
+      color: var(--color-white);
+      font-weight: var(--font-weight-bold);
+    }
+
+    .login-title {
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .login-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+
+    #loginForm {
+      margin-bottom: var(--spacing-6);
+    }
+
+    .form-group {
+      margin-bottom: var(--spacing-5);
+    }
+
+    .form-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-5);
+    }
+
+    .checkbox-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .checkbox-wrapper input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: var(--color-primary-main);
+    }
+
+    .checkbox-wrapper label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      cursor: pointer;
+    }
+
+    .forgot-password {
+      font-size: var(--font-size-body-small);
+      color: var(--color-primary-main);
+      text-decoration: none;
+      transition: color var(--transition-fast);
+    }
+
+    .forgot-password:hover {
+      color: var(--color-primary-dark);
+    }
+
+    .login-footer {
+      text-align: center;
+      padding-top: var(--spacing-6);
+      border-top: 1px solid var(--color-gray-200);
+    }
+
+    .login-footer-text {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
+    }
+
+    .login-footer a {
+      color: var(--color-primary-main);
+      font-weight: var(--font-weight-medium);
+      text-decoration: none;
+      transition: color var(--transition-fast);
+    }
+
+    .login-footer a:hover {
+      color: var(--color-primary-dark);
+    }
+
+    /* 예시 크리덴셜 표시 */
+    .credential-hint {
+      background-color: var(--color-gray-50);
+      border: 1px dashed var(--color-gray-300);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-5);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+
+    .credential-hint-title {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-700);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .credential-hint code {
+      background-color: var(--color-gray-200);
+      padding: 2px 6px;
+      border-radius: var(--radius-sm);
+      font-family: 'Consolas', monospace;
+      font-size: var(--font-size-caption);
+    }
+
+    /* 반응형 */
+    @media (max-width: 767px) {
+      .login-card {
+        padding: var(--spacing-6);
+      }
+
+      .login-title {
+        font-size: var(--font-size-h3);
+      }
+
+      .form-footer {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-3);
+      }
+    }
+  </style>
 </head>
 <body>
-  <div class="page">
-    <!-- 로그인 컨테이너 -->
-    <div class="content d-flex flex-column align-center justify-center" style="min-height: 100vh;">
-      <div class="card" style="max-width: 400px; width: 100%; text-align: center;">
-        <!-- 로고 및 타이틀 -->
-        <div class="mb-6">
-          <div style="font-size: 48px; margin-bottom: 16px;">📝</div>
-          <h1 class="text-h2">회의록 서비스</h1>
-          <p class="text-body text-gray">AI 기반 회의록 작성 및 공유</p>
-        </div>
+  <div class="login-card">
+    <!-- 헤더 -->
+    <div class="login-header">
+      <div class="login-logo">M</div>
+      <h1 class="login-title">회의록 서비스</h1>
+      <p class="login-subtitle">스마트한 협업의 시작</p>
+    </div>
 
-        <!-- 로그인 폼 -->
-        <form id="loginForm" class="text-left">
-          <div class="form-group">
-            <label for="employeeId" class="form-label required">사번</label>
-            <input
-              type="text"
-              id="employeeId"
-              class="form-input"
-              placeholder="EMP001"
-              data-validate="required|employeeId"
-              aria-label="사번"
-              aria-required="true"
-            >
-          </div>
+    <!-- 예시 크리덴셜 (프로토타입용) -->
+    <div class="credential-hint">
+      <div class="credential-hint-title">📝 테스트 계정</div>
+      <div>이메일: <code>test@example.com</code></div>
+      <div>비밀번호: <code>password123</code></div>
+    </div>
 
-          <div class="form-group">
-            <label for="password" class="form-label required">비밀번호</label>
-            <input
-              type="password"
-              id="password"
-              class="form-input"
-              placeholder="비밀번호를 입력하세요"
-              data-validate="required|minLength:4"
-              aria-label="비밀번호"
-              aria-required="true"
-            >
-          </div>
-
-          <div class="form-group">
-            <label class="form-checkbox">
-              <input type="checkbox" id="rememberMe">
-              <span>로그인 상태 유지</span>
-            </label>
-          </div>
-
-          <button type="submit" class="btn btn-primary w-full" style="margin-top: 24px;">
-            로그인
-          </button>
-        </form>
-
-        <!-- 비밀번호 찾기 -->
-        <div class="mt-4 text-center">
-          <a href="#" class="text-body-sm text-primary" style="text-decoration: none;">비밀번호 찾기</a>
-        </div>
-
-        <!-- 테스트 계정 안내 -->
-        <div class="mt-6 p-4" style="background: var(--gray-100); border-radius: 8px;">
-          <p class="text-caption text-gray mb-2">테스트 계정</p>
-          <p class="text-body-sm">사번: EMP001 ~ EMP005</p>
-          <p class="text-body-sm">비밀번호: 1234</p>
-        </div>
+    <!-- 로그인 폼 -->
+    <form id="loginForm">
+      <div class="form-group">
+        <label for="email" class="form-label">이메일</label>
+        <input
+          type="email"
+          id="email"
+          class="form-input"
+          placeholder="example@company.com"
+          required
+          autocomplete="email"
+        >
       </div>
+
+      <div class="form-group">
+        <label for="password" class="form-label">비밀번호</label>
+        <input
+          type="password"
+          id="password"
+          class="form-input"
+          placeholder="비밀번호를 입력하세요"
+          required
+          autocomplete="current-password"
+        >
+      </div>
+
+      <div class="form-footer">
+        <div class="checkbox-wrapper">
+          <input type="checkbox" id="rememberMe">
+          <label for="rememberMe">로그인 상태 유지</label>
+        </div>
+        <a href="#" class="forgot-password">비밀번호 찾기</a>
+      </div>
+
+      <button type="submit" class="btn btn-primary" style="width: 100%;">
+        로그인
+      </button>
+    </form>
+
+    <!-- 푸터 -->
+    <div class="login-footer">
+      <p class="login-footer-text">
+        아직 계정이 없으신가요? <a href="#">회원가입</a>
+      </p>
     </div>
   </div>
 
+  <!-- JavaScript -->
   <script src="common.js"></script>
   <script>
-    // 로그인 폼 제출 처리
-    document.getElementById('loginForm').addEventListener('submit', async (e) => {
+    // 로그인 폼 처리
+    const loginForm = document.getElementById('loginForm');
+    const emailInput = document.getElementById('email');
+    const passwordInput = document.getElementById('password');
+    const rememberMeCheckbox = document.getElementById('rememberMe');
+
+    // 페이지 로드 시 저장된 이메일 불러오기
+    MeetingApp.ready(() => {
+      const savedEmail = MeetingApp.Storage.get('savedEmail');
+      if (savedEmail) {
+        emailInput.value = savedEmail;
+        rememberMeCheckbox.checked = true;
+      }
+    });
+
+    // 폼 제출 핸들러
+    loginForm.addEventListener('submit', async (e) => {
       e.preventDefault();
 
-      const employeeId = document.getElementById('employeeId').value.trim();
-      const password = document.getElementById('password').value;
-      const rememberMe = document.getElementById('rememberMe').checked;
+      // 에러 초기화
+      MeetingApp.Validator.clearError(emailInput);
+      MeetingApp.Validator.clearError(passwordInput);
 
-      // 간단한 폼 검증
-      if (!employeeId || !password) {
-        UIComponents.showToast('사번과 비밀번호를 입력해주세요.', 'error');
-        return;
+      const email = emailInput.value.trim();
+      const password = passwordInput.value.trim();
+
+      // 유효성 검사
+      let isValid = true;
+
+      if (!MeetingApp.Validator.required(email)) {
+        MeetingApp.Validator.showError(emailInput, '이메일을 입력해주세요.');
+        isValid = false;
+      } else if (!MeetingApp.Validator.isEmail(email)) {
+        MeetingApp.Validator.showError(emailInput, '올바른 이메일 형식이 아닙니다.');
+        isValid = false;
       }
 
+      if (!MeetingApp.Validator.required(password)) {
+        MeetingApp.Validator.showError(passwordInput, '비밀번호를 입력해주세요.');
+        isValid = false;
+      } else if (!MeetingApp.Validator.minLength(password, 6)) {
+        MeetingApp.Validator.showError(passwordInput, '비밀번호는 최소 6자 이상이어야 합니다.');
+        isValid = false;
+      }
+
+      if (!isValid) return;
+
       // 로딩 표시
-      UIComponents.showLoading('로그인 중...');
+      const submitButton = loginForm.querySelector('button[type="submit"]');
+      const originalText = submitButton.textContent;
+      submitButton.disabled = true;
+      submitButton.innerHTML = '<div class="spinner spinner-sm" style="border-color: white; border-top-color: transparent;"></div>';
 
-      // 사용자 인증 시뮬레이션
-      setTimeout(() => {
-        const user = DUMMY_USERS.find(u => u.id === employeeId && u.password === password);
+      try {
+        // API 호출 시뮬레이션
+        await MeetingApp.API.post('/api/auth/login', { email, password });
 
-        UIComponents.hideLoading();
-
-        if (user) {
-          // 로그인 성공
-          StorageManager.setCurrentUser({
-            id: user.id,
-            name: user.name,
-            email: user.email,
-            role: user.role,
-            position: user.position,
-            rememberMe: rememberMe,
-            loginAt: new Date().toISOString()
+        // 로그인 성공 시뮬레이션 (테스트 계정 체크)
+        if (email === 'test@example.com' && password === 'password123') {
+          // 사용자 정보 저장
+          MeetingApp.Storage.set('currentUser', {
+            id: 'user-001',
+            name: '김민준',
+            email: email,
+            avatar: 'https://ui-avatars.com/api/?name=김민준&background=00D9B1&color=fff',
+            role: 'user'
           });
 
-          UIComponents.showToast('로그인 성공', 'success');
+          // 로그인 상태 유지 체크
+          if (rememberMeCheckbox.checked) {
+            MeetingApp.Storage.set('savedEmail', email);
+            MeetingApp.Storage.set('rememberMe', true);
+          } else {
+            MeetingApp.Storage.remove('savedEmail');
+            MeetingApp.Storage.remove('rememberMe');
+          }
+
+          // JWT 토큰 시뮬레이션
+          MeetingApp.Storage.set('authToken', 'mock-jwt-token-' + Date.now());
+
+          // 성공 토스트
+          MeetingApp.Toast.success('로그인에 성공했습니다!');
 
           // 대시보드로 이동
           setTimeout(() => {
-            NavigationHelper.navigate('DASHBOARD');
-          }, 500);
+            window.location.href = '02-대시보드.html';
+          }, 1000);
+
         } else {
           // 로그인 실패
-          UIComponents.showToast('사번 또는 비밀번호가 올바르지 않습니다.', 'error');
-
-          // 필드 애니메이션 (shake)
-          const form = document.getElementById('loginForm');
-          form.style.animation = 'shake 0.5s';
-          setTimeout(() => {
-            form.style.animation = '';
-          }, 500);
+          MeetingApp.Toast.error('이메일 또는 비밀번호가 올바르지 않습니다.');
+          submitButton.disabled = false;
+          submitButton.textContent = originalText;
         }
-      }, 1000);
+
+      } catch (error) {
+        console.error('Login error:', error);
+        MeetingApp.Toast.error('로그인 중 오류가 발생했습니다. 다시 시도해주세요.');
+        submitButton.disabled = false;
+        submitButton.textContent = originalText;
+      }
     });
 
-    // 엔터키 처리
-    document.querySelectorAll('.form-input').forEach(input => {
-      input.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-          const form = document.getElementById('loginForm');
-          const inputs = Array.from(form.querySelectorAll('.form-input'));
-          const index = inputs.indexOf(e.target);
-
-          if (index < inputs.length - 1) {
-            // 다음 필드로 포커스 이동
-            inputs[index + 1].focus();
-          } else {
-            // 마지막 필드면 폼 제출
-            form.dispatchEvent(new Event('submit'));
-          }
-        }
-      });
+    // 비밀번호 찾기 (프로토타입용)
+    document.querySelector('.forgot-password').addEventListener('click', (e) => {
+      e.preventDefault();
+      MeetingApp.Toast.info('비밀번호 찾기 기능은 준비 중입니다.');
     });
 
-    // 자동 로그인 체크 (개발 편의)
-    const savedUser = StorageManager.getCurrentUser();
-    if (savedUser && savedUser.rememberMe) {
-      // 이미 로그인된 사용자는 대시보드로 이동
-      NavigationHelper.navigate('DASHBOARD');
-    }
+    // 회원가입 (프로토타입용)
+    document.querySelector('.login-footer a').addEventListener('click', (e) => {
+      e.preventDefault();
+      MeetingApp.Toast.info('회원가입 기능은 준비 중입니다.');
+    });
   </script>
-
-  <style>
-    @keyframes shake {
-      0%, 100% { transform: translateX(0); }
-      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
-      20%, 40%, 60%, 80% { transform: translateX(5px); }
-    }
-  </style>
 </body>
 </html>
diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html
index ee958f4..b148282 100644
--- a/design/uiux/prototype/02-대시보드.html
+++ b/design/uiux/prototype/02-대시보드.html
@@ -5,221 +5,683 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>대시보드 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    /* 레이아웃 */
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    /* Header */
+    .dashboard-header {
+      position: sticky;
+      top: 0;
+      z-index: var(--z-sticky);
+      background-color: var(--color-white);
+      border-bottom: 1px solid var(--color-gray-200);
+      padding: 0 var(--spacing-6);
+      height: 64px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+    }
+
+    .logo {
+      width: 40px;
+      height: 40px;
+      background-color: var(--color-primary-main);
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-white);
+      font-weight: var(--font-weight-bold);
+      font-size: 20px;
+    }
+
+    .service-name {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+    }
+
+    .user-menu {
+      position: relative;
+    }
+
+    .user-button {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2);
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-radius: var(--radius-md);
+      transition: background-color var(--transition-fast);
+    }
+
+    .user-button:hover {
+      background-color: var(--color-gray-100);
+    }
+
+    .user-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: var(--radius-full);
+      background-color: var(--color-primary-main);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-white);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .user-dropdown {
+      display: none;
+      position: absolute;
+      top: 48px;
+      right: 0;
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-md);
+      min-width: 200px;
+      z-index: var(--z-dropdown);
+    }
+
+    .user-dropdown.show {
+      display: block;
+    }
+
+    .dropdown-item {
+      display: block;
+      padding: var(--spacing-3) var(--spacing-4);
+      color: var(--color-gray-700);
+      text-decoration: none;
+      transition: background-color var(--transition-fast);
+    }
+
+    .dropdown-item:hover {
+      background-color: var(--color-gray-50);
+    }
+
+    .dropdown-divider {
+      height: 1px;
+      background-color: var(--color-gray-200);
+      margin: var(--spacing-2) 0;
+    }
+
+    /* Layout */
+    .dashboard-layout {
+      display: flex;
+      min-height: calc(100vh - 64px);
+    }
+
+    /* Sidebar */
+    .sidebar {
+      width: 240px;
+      background-color: var(--color-gray-50);
+      border-right: 1px solid var(--color-gray-200);
+      padding: var(--spacing-6) 0;
+    }
+
+    .sidebar-nav {
+      list-style: none;
+    }
+
+    .nav-item {
+      margin-bottom: var(--spacing-2);
+    }
+
+    .nav-link {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3) var(--spacing-6);
+      color: var(--color-gray-700);
+      text-decoration: none;
+      transition: all var(--transition-fast);
+    }
+
+    .nav-link:hover {
+      background-color: var(--color-gray-200);
+      color: var(--color-gray-900);
+    }
+
+    .nav-link.active {
+      background-color: rgba(0, 217, 177, 0.1);
+      color: var(--color-primary-main);
+      font-weight: var(--font-weight-medium);
+      border-right: 3px solid var(--color-primary-main);
+    }
+
+    /* Main Content */
+    .main-content {
+      flex: 1;
+      padding: var(--spacing-8);
+      overflow-y: auto;
+    }
+
+    .welcome-section {
+      margin-bottom: var(--spacing-8);
+    }
+
+    .welcome-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .welcome-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+
+    /* Stats Grid */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: var(--spacing-6);
+      margin-bottom: var(--spacing-8);
+    }
+
+    .stat-card {
+      padding: var(--spacing-6);
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow-sm);
+      transition: all var(--transition-base);
+    }
+
+    .stat-card:hover {
+      box-shadow: var(--shadow-md);
+      transform: translateY(-2px);
+    }
+
+    .stat-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      margin-bottom: var(--spacing-3);
+    }
+
+    .stat-icon.primary { background-color: rgba(0, 217, 177, 0.1); color: var(--color-primary-main); }
+    .stat-icon.warning { background-color: rgba(245, 158, 11, 0.1); color: var(--color-warning-main); }
+    .stat-icon.success { background-color: rgba(16, 185, 129, 0.1); color: var(--color-success-main); }
+
+    .stat-label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .stat-value {
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-gray-900);
+    }
+
+    /* Section */
+    .section {
+      margin-bottom: var(--spacing-8);
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-4);
+    }
+
+    .section-title {
+      font-size: var(--font-size-h3);
+      color: var(--color-gray-900);
+    }
+
+    .view-all-link {
+      font-size: var(--font-size-body-small);
+      color: var(--color-primary-main);
+      text-decoration: none;
+      font-weight: var(--font-weight-medium);
+    }
+
+    .view-all-link:hover {
+      color: var(--color-primary-dark);
+    }
+
+    /* Meeting Card */
+    .meeting-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: var(--spacing-4);
+    }
+
+    .meeting-card {
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-5);
+      cursor: pointer;
+      transition: all var(--transition-base);
+    }
+
+    .meeting-card:hover {
+      box-shadow: var(--shadow-md);
+      transform: translateY(-2px);
+    }
+
+    .meeting-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-3);
+    }
+
+    .meeting-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .meeting-meta {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
+      margin-bottom: var(--spacing-1);
+    }
+
+    /* Todo Card */
+    .todo-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+    }
+
+    .todo-item {
+      background-color: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .todo-item:hover {
+      box-shadow: var(--shadow-sm);
+      border-color: var(--color-primary-main);
+    }
+
+    .todo-left {
+      flex: 1;
+    }
+
+    .todo-title {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .todo-meta {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
+    }
+
+    .todo-right {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: var(--spacing-2);
+    }
+
+    .dday {
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .dday.urgent { color: var(--color-error-main); }
+    .dday.warning { color: var(--color-warning-main); }
+    .dday.normal { color: var(--color-gray-500); }
+
+    /* Bottom Navigation (Mobile) */
+    .bottom-nav {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: var(--color-white);
+      border-top: 1px solid var(--color-gray-200);
+      display: flex;
+      justify-content: space-around;
+      padding: var(--spacing-2) 0;
+      z-index: var(--z-sticky);
+    }
+
+    .bottom-nav-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--spacing-1);
+      padding: var(--spacing-2);
+      color: var(--color-gray-500);
+      text-decoration: none;
+      font-size: var(--font-size-caption);
+      min-width: 60px;
+    }
+
+    .bottom-nav-item.active {
+      color: var(--color-primary-main);
+    }
+
+    .bottom-nav-icon {
+      font-size: 24px;
+    }
+
+    /* Responsive */
+    @media (max-width: 1023px) {
+      .sidebar { display: none; }
+      .main-content { padding-bottom: 80px; }
+    }
+
+    @media (min-width: 1024px) {
+      .bottom-nav { display: none; }
+    }
+
+    @media (max-width: 767px) {
+      .dashboard-header { padding: 0 var(--spacing-4); }
+      .service-name { display: none; }
+      .main-content { padding: var(--spacing-4); }
+      .welcome-title { font-size: var(--font-size-h2); }
+      .stats-grid { grid-template-columns: 1fr; }
+      .meeting-grid { grid-template-columns: 1fr; }
+    }
+  </style>
 </head>
 <body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <h1 class="header-title">회의록 서비스</h1>
-      <div class="d-flex align-center gap-2">
-        <button class="btn-icon" aria-label="검색" title="검색">
-          <span class="material-symbols-outlined">search</span>
-        </button>
-        <button class="btn-icon" aria-label="프로필" title="프로필" onclick="showProfileMenu()">
-          <span class="material-symbols-outlined">account_circle</span>
-        </button>
-      </div>
+  <!-- Header -->
+  <header class="dashboard-header">
+    <div class="header-left">
+      <div class="logo">M</div>
+      <span class="service-name">회의록 서비스</span>
     </div>
-
-    <!-- 메인 컨텐츠 -->
-    <div class="content" style="padding-bottom: 80px;">
-      <!-- 환영 메시지 -->
-      <div class="mb-6">
-        <h2 class="text-h3" id="welcomeMessage">안녕하세요!</h2>
-        <p class="text-body-sm text-gray">오늘도 효율적인 회의록 작성을 시작하세요</p>
-      </div>
-
-      <!-- 빠른 액션 -->
-      <div class="d-flex gap-2 mb-6">
-        <button class="btn btn-primary" onclick="NavigationHelper.navigate('TEMPLATE_SELECT')" style="flex: 1;">
-          <span class="material-symbols-outlined">play_circle</span>
-          새 회의 시작
+    <div class="header-right">
+      <div class="user-menu">
+        <button class="user-button" id="userMenuButton">
+          <div class="user-avatar" id="userAvatar">U</div>
+          <span class="hide-mobile" id="userName">사용자</span>
         </button>
-        <button class="btn btn-secondary" onclick="NavigationHelper.navigate('MEETING_SCHEDULE')">
-          <span class="material-symbols-outlined">calendar_today</span>
-          회의 예약
-        </button>
-      </div>
-
-      <!-- 내 Todo 카드 -->
-      <div class="card mb-4">
-        <div class="d-flex justify-between align-center mb-4">
-          <h3 class="text-h4">내 Todo</h3>
-          <a href="javascript:NavigationHelper.navigate('TODO_MANAGE')" class="text-body-sm text-primary" style="text-decoration: none;">전체 보기 →</a>
-        </div>
-
-        <div id="todoDashboard">
-          <!-- JavaScript로 동적 생성 -->
-        </div>
-      </div>
-
-      <!-- 내 회의록 카드 -->
-      <div class="card mb-4">
-        <div class="d-flex justify-between align-center mb-4">
-          <h3 class="text-h4">내 회의록</h3>
-          <a href="#" class="text-body-sm text-primary" style="text-decoration: none;">전체 보기 →</a>
-        </div>
-
-        <div id="meetingsDashboard">
-          <!-- JavaScript로 동적 생성 -->
-        </div>
-      </div>
-
-      <!-- 공유받은 회의록 카드 -->
-      <div class="card mb-4">
-        <div class="d-flex justify-between align-center mb-4">
-          <h3 class="text-h4">공유받은 회의록</h3>
-          <a href="#" class="text-body-sm text-primary" style="text-decoration: none;">전체 보기 →</a>
-        </div>
-
-        <div id="sharedMeetingsDashboard">
-          <p class="text-body-sm text-gray text-center" style="padding: 24px 0;">공유받은 회의록이 없습니다</p>
+        <div class="user-dropdown" id="userDropdown">
+          <a href="#" class="dropdown-item">내 프로필</a>
+          <a href="#" class="dropdown-item">설정</a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item" id="logoutButton">로그아웃</a>
         </div>
       </div>
     </div>
+  </header>
 
-    <!-- 하단 네비게이션 -->
-    <nav class="bottom-nav" role="navigation" aria-label="주요 메뉴">
-      <a href="02-대시보드.html" class="bottom-nav-item active" aria-current="page">
-        <span class="material-symbols-outlined bottom-nav-icon">home</span>
-        <span>홈</span>
-      </a>
-      <a href="11-회의록수정.html" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">description</span>
-        <span>회의록</span>
-      </a>
-      <a href="09-Todo관리.html" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">check_box</span>
-        <span>Todo</span>
-      </a>
-      <a href="javascript:showProfileMenu()" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">account_circle</span>
-        <span>프로필</span>
-      </a>
-    </nav>
+  <!-- Main Layout -->
+  <div class="dashboard-layout">
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <nav>
+        <ul class="sidebar-nav">
+          <li class="nav-item">
+            <a href="02-대시보드.html" class="nav-link active">
+              <span>📊</span> 대시보드
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="12-회의록목록조회.html" class="nav-link">
+              <span>📅</span> 회의 목록
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="09-Todo관리.html" class="nav-link">
+              <span>✅</span> Todo 관리
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="02-대시보드.html" class="nav-link">
+              <span>⚙️</span> 설정
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Welcome Section -->
+      <section class="welcome-section">
+        <h1 class="welcome-title" id="welcomeTitle">안녕하세요!</h1>
+        <p class="welcome-subtitle" id="welcomeSubtitle">오늘의 일정을 확인하세요</p>
+      </section>
+
+      <!-- Stats Grid -->
+      <section class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-icon primary">📅</div>
+          <div class="stat-label">예정된 회의</div>
+          <div class="stat-value" id="upcomingMeetingsCount">0</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon warning">✅</div>
+          <div class="stat-label">진행 중 Todo</div>
+          <div class="stat-value" id="inProgressTodosCount">0</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-icon success">📈</div>
+          <div class="stat-label">Todo 완료율</div>
+          <div class="stat-value" id="todoCompletionRate">0%</div>
+        </div>
+      </section>
+
+      <!-- Recent Meetings -->
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title">최근 회의</h2>
+          <a href="12-회의록목록조회.html" class="view-all-link">전체 보기 →</a>
+        </div>
+        <div class="meeting-grid" id="meetingGrid">
+          <!-- Meetings will be rendered here -->
+        </div>
+      </section>
+
+      <!-- My Todos -->
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title">할당된 Todo</h2>
+          <a href="09-Todo관리.html" class="view-all-link">전체 보기 →</a>
+        </div>
+        <div class="todo-list" id="todoList">
+          <!-- Todos will be rendered here -->
+        </div>
+      </section>
+    </main>
   </div>
 
+  <!-- Bottom Navigation (Mobile) -->
+  <nav class="bottom-nav hide-desktop">
+    <a href="02-대시보드.html" class="bottom-nav-item active">
+      <div class="bottom-nav-icon">📊</div>
+      <div>대시보드</div>
+    </a>
+    <a href="12-회의록목록조회.html" class="bottom-nav-item">
+      <div class="bottom-nav-icon">📅</div>
+      <div>회의</div>
+    </a>
+    <a href="09-Todo관리.html" class="bottom-nav-item">
+      <div class="bottom-nav-icon">✅</div>
+      <div>Todo</div>
+    </a>
+    <a href="02-대시보드.html" class="bottom-nav-item">
+      <div class="bottom-nav-icon">⚙️</div>
+      <div>더보기</div>
+    </a>
+  </nav>
+
+  <!-- FAB -->
+  <button class="fab" id="fabButton" title="새 회의 예약">+</button>
+
+  <!-- JavaScript -->
   <script src="common.js"></script>
   <script>
-    // 인증 확인
-    if (!NavigationHelper.requireAuth()) {
-      // 로그인 필요
-    }
+    const { AppState, Storage, Toast, MeetingUtils, formatDateTime, getDday, navigateTo } = window.MeetingApp;
 
-    const currentUser = StorageManager.getCurrentUser();
-
-    // 환영 메시지
-    document.getElementById('welcomeMessage').textContent = `안녕하세요, ${currentUser.name}님!`;
-
-    // Todo 대시보드 렌더링
-    function renderTodoDashboard() {
-      const todos = StorageManager.getTodos();
-      const myTodos = todos.filter(todo => todo.assigneeId === currentUser.id && !todo.completed);
-
-      const container = document.getElementById('todoDashboard');
-
-      if (myTodos.length === 0) {
-        container.innerHTML = '<p class="text-body-sm text-gray text-center" style="padding: 24px 0;">할당된 Todo가 없습니다</p>';
+    // 인증 체크
+    MeetingApp.ready(() => {
+      const authToken = Storage.get('authToken');
+      if (!authToken) {
+        window.location.href = '01-로그인.html';
         return;
       }
 
-      // 진행 중 Todo 개수
-      const inProgressCount = myTodos.filter(t => !t.completed).length;
+      const currentUser = Storage.get('currentUser');
+      if (currentUser) {
+        // 사용자 정보 표시
+        document.getElementById('userName').textContent = currentUser.name;
+        document.getElementById('userAvatar').textContent = currentUser.name.charAt(0);
+        document.getElementById('welcomeTitle').textContent = `안녕하세요, ${currentUser.name}님!`;
 
-      // 마감 임박 Todo (3일 이내)
-      const dueSoonTodos = myTodos.filter(todo => isDueSoon(todo.dueDate)).slice(0, 3);
+        // AppState 업데이트
+        AppState.currentUser = currentUser;
+      }
 
-      let html = `
-        <div class="d-flex align-center gap-4 mb-4">
-          <div class="d-flex align-center gap-2">
-            <div class="badge-count">${inProgressCount}</div>
-            <span class="text-body-sm">진행 중</span>
+      // 데이터 로드 및 렌더링
+      loadDashboardData();
+      renderMeetings();
+      renderTodos();
+    });
+
+    // 대시보드 통계 로드
+    function loadDashboardData() {
+      const meetings = Storage.get('meetings', []);
+      const todos = Storage.get('todos', []);
+
+      // 예정된 회의 수
+      const upcomingMeetings = meetings.filter(m => m.status === 'scheduled').length;
+      document.getElementById('upcomingMeetingsCount').textContent = upcomingMeetings;
+
+      // 진행 중 Todo 수
+      const inProgressTodos = todos.filter(t => t.status === 'in_progress').length;
+      document.getElementById('inProgressTodosCount').textContent = inProgressTodos;
+
+      // Todo 완료율
+      const completedTodos = todos.filter(t => t.status === 'done').length;
+      const completionRate = todos.length > 0 ? Math.round((completedTodos / todos.length) * 100) : 0;
+      document.getElementById('todoCompletionRate').textContent = `${completionRate}%`;
+    }
+
+    // 회의 목록 렌더링
+    function renderMeetings() {
+      const meetings = Storage.get('meetings', []).slice(0, 3);
+      const meetingGrid = document.getElementById('meetingGrid');
+
+      if (meetings.length === 0) {
+        meetingGrid.innerHTML = '<p style="color: var(--color-gray-500);">아직 등록된 회의가 없습니다.</p>';
+        return;
+      }
+
+      meetingGrid.innerHTML = meetings.map(meeting => `
+        <div class="meeting-card" onclick="navigateTo('05-회의진행.html')">
+          <div class="meeting-header">
+            <div>
+              <div class="meeting-title">${meeting.title}</div>
+              <div class="meeting-meta">📅 ${formatDateTime(meeting.date)}</div>
+              <div class="meeting-meta">📍 ${meeting.location}</div>
+            </div>
+            <span class="badge ${MeetingUtils.getStatusClass(meeting.status)}">
+              ${MeetingUtils.getStatusLabel(meeting.status)}
+            </span>
           </div>
-          <div class="d-flex align-center gap-2">
-            <span class="material-symbols-outlined" style="color: var(--warning); font-size: 20px;">schedule</span>
-            <span class="text-body-sm">${dueSoonTodos.length}개 마감 임박</span>
+          <div style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">
+            ${meeting.description}
           </div>
         </div>
-      `;
-
-      if (dueSoonTodos.length > 0) {
-        dueSoonTodos.forEach(todo => {
-          html += UIComponents.createTodoItem(todo);
-        });
-      }
-
-      container.innerHTML = html;
+      `).join('');
     }
 
-    // 회의록 대시보드 렌더링
-    function renderMeetingsDashboard() {
-      const meetings = StorageManager.getMeetings();
-      const myMeetings = meetings
-        .filter(m => m.createdBy === currentUser.id || m.attendees.includes(currentUser.name))
-        .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-        .slice(0, 5);
+    // Todo 목록 렌더링
+    function renderTodos() {
+      const todos = Storage.get('todos', []).filter(t => t.status !== 'done').slice(0, 5);
+      const todoList = document.getElementById('todoList');
 
-      const container = document.getElementById('meetingsDashboard');
-
-      if (myMeetings.length === 0) {
-        container.innerHTML = '<p class="text-body-sm text-gray text-center" style="padding: 24px 0;">작성한 회의록이 없습니다. 첫 회의를 시작해보세요!</p>';
+      if (todos.length === 0) {
+        todoList.innerHTML = '<p style="color: var(--color-gray-500);">할당된 Todo가 없습니다.</p>';
         return;
       }
 
-      let html = '';
-      myMeetings.forEach(meeting => {
-        html += UIComponents.createMeetingItem(meeting);
-      });
+      todoList.innerHTML = todos.map(todo => {
+        const dday = getDday(todo.dueDate);
+        const ddayClass = dday.includes('지남') ? 'urgent' : (dday === '오늘' ? 'warning' : 'normal');
 
-      container.innerHTML = html;
-    }
-
-    // 프로필 메뉴 표시
-    function showProfileMenu() {
-      UIComponents.showModal({
-        title: '프로필',
-        content: `
-          <div class="d-flex flex-column gap-4">
-            <div class="d-flex align-center gap-3">
-              ${UIComponents.createAvatar(currentUser.name, 60)}
-              <div>
-                <h3 class="text-h4">${currentUser.name}</h3>
-                <p class="text-body-sm text-gray">${currentUser.role} · ${currentUser.position}</p>
-                <p class="text-body-sm text-gray">${currentUser.email}</p>
-              </div>
+        return `
+          <div class="todo-item" onclick="navigateTo('09-Todo관리.html')">
+            <div class="todo-left">
+              <div class="todo-title">${todo.title}</div>
+              <div class="todo-meta">담당: ${todo.assignee}</div>
             </div>
-            <div style="border-top: 1px solid var(--gray-200); padding-top: 16px;">
-              <button class="btn btn-text w-full" style="justify-content: flex-start;">
-                <span class="material-symbols-outlined">settings</span>
-                설정
-              </button>
-              <button class="btn btn-text w-full" style="justify-content: flex-start; color: var(--error);" onclick="handleLogout()">
-                <span class="material-symbols-outlined">logout</span>
-                로그아웃
-              </button>
+            <div class="todo-right">
+              <div class="dday ${ddayClass}">${dday}</div>
+              <span class="badge badge-${todo.priority === 'high' ? 'error' : 'neutral'}">
+                ${MeetingUtils.getPriorityLabel(todo.priority)}
+              </span>
             </div>
           </div>
-        `,
-        footer: '',
-        onClose: () => {}
-      });
+        `;
+      }).join('');
     }
 
-    // 로그아웃 처리
-    function handleLogout() {
-      UIComponents.confirm(
-        '로그아웃 하시겠습니까?',
-        () => {
-          StorageManager.logout();
-        },
-        () => {}
-      );
-    }
+    // 사용자 메뉴 토글
+    const userMenuButton = document.getElementById('userMenuButton');
+    const userDropdown = document.getElementById('userDropdown');
 
-    // 초기 렌더링
-    renderTodoDashboard();
-    renderMeetingsDashboard();
+    userMenuButton.addEventListener('click', (e) => {
+      e.stopPropagation();
+      userDropdown.classList.toggle('show');
+    });
+
+    document.addEventListener('click', () => {
+      userDropdown.classList.remove('show');
+    });
+
+    // 로그아웃
+    document.getElementById('logoutButton').addEventListener('click', (e) => {
+      e.preventDefault();
+      Storage.remove('authToken');
+      Storage.remove('currentUser');
+      Toast.success('로그아웃 되었습니다.');
+      setTimeout(() => {
+        window.location.href = '01-로그인.html';
+      }, 1000);
+    });
+
+    // FAB 버튼
+    document.getElementById('fabButton').addEventListener('click', () => {
+      window.location.href = '03-회의예약.html';
+    });
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/03-회의예약.html b/design/uiux/prototype/03-회의예약.html
index 761059a..4a1a119 100644
--- a/design/uiux/prototype/03-회의예약.html
+++ b/design/uiux/prototype/03-회의예약.html
@@ -5,136 +5,85 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>회의 예약 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .page-header {
+      margin-bottom: var(--spacing-8);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+    .form-container {
+      background-color: var(--color-white);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-8);
+      box-shadow: var(--shadow-sm);
+    }
+    .button-group {
+      display: flex;
+      gap: var(--spacing-3);
+      margin-top: var(--spacing-6);
+    }
+    @media (max-width: 767px) {
+      .page-title { font-size: var(--font-size-h2); }
+      .form-container { padding: var(--spacing-5); }
+      .button-group { flex-direction: column; }
+    }
+  </style>
 </head>
 <body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <button class="btn-icon" onclick="NavigationHelper.goBack()" aria-label="뒤로가기">
-        <span class="material-symbols-outlined">arrow_back</span>
-      </button>
-      <h1 class="header-title">회의 예약</h1>
-      <button type="submit" form="meetingForm" class="btn btn-primary btn-sm">저장</button>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">회의 예약</h1>
+      <p class="page-subtitle">새로운 회의를 예약하고 참석자를 초대하세요</p>
     </div>
 
-    <!-- 메인 컨텐츠 -->
-    <div class="content">
+    <div class="form-container">
       <form id="meetingForm">
-        <!-- 회의 제목 -->
         <div class="form-group">
-          <label for="meetingTitle" class="form-label required">회의 제목</label>
-          <input
-            type="text"
-            id="meetingTitle"
-            class="form-input"
-            placeholder="회의 제목을 입력하세요"
-            maxlength="100"
-            data-validate="required|maxLength:100"
-            aria-label="회의 제목"
-            aria-required="true"
-          >
-          <p class="text-caption text-right mt-1" id="titleCounter">0 / 100</p>
+          <label for="title" class="form-label">회의 제목 *</label>
+          <input type="text" id="title" class="form-input" placeholder="예: 2025년 1분기 기획 회의" required maxlength="100">
         </div>
 
-        <!-- 날짜 -->
         <div class="form-group">
-          <label for="meetingDate" class="form-label required">회의 날짜</label>
-          <input
-            type="date"
-            id="meetingDate"
-            class="form-input"
-            data-validate="required"
-            aria-label="회의 날짜"
-            aria-required="true"
-          >
+          <label for="date" class="form-label">날짜 *</label>
+          <input type="date" id="date" class="form-input" required>
         </div>
 
-        <!-- 시작 시간 / 종료 시간 -->
-        <div class="d-flex gap-2">
-          <div class="form-group" style="flex: 1;">
-            <label for="startTime" class="form-label required">시작 시간</label>
-            <input
-              type="time"
-              id="startTime"
-              class="form-input"
-              data-validate="required"
-              aria-label="시작 시간"
-              aria-required="true"
-            >
-          </div>
-          <div class="form-group" style="flex: 1;">
-            <label for="endTime" class="form-label required">종료 시간</label>
-            <input
-              type="time"
-              id="endTime"
-              class="form-input"
-              data-validate="required"
-              aria-label="종료 시간"
-              aria-required="true"
-            >
-          </div>
-        </div>
-
-        <!-- 종일 토글 -->
         <div class="form-group">
-          <label class="form-checkbox">
-            <input type="checkbox" id="allDay" onchange="toggleAllDay()">
-            <span>종일</span>
-          </label>
+          <label for="time" class="form-label">시간 *</label>
+          <input type="time" id="time" class="form-input" required>
         </div>
 
-        <!-- 장소 -->
         <div class="form-group">
           <label for="location" class="form-label">장소</label>
-          <input
-            type="text"
-            id="location"
-            class="form-input"
-            placeholder="회의실 또는 온라인 링크"
-            maxlength="200"
-            aria-label="회의 장소"
-          >
+          <input type="text" id="location" class="form-input" placeholder="예: 본사 2층 대회의실" maxlength="200">
         </div>
 
-        <!-- 온라인/오프라인 선택 -->
         <div class="form-group">
-          <div class="d-flex gap-2">
-            <button type="button" class="btn btn-secondary btn-sm" id="btnOffline" onclick="setLocationType('offline')" style="flex: 1;">
-              오프라인
-            </button>
-            <button type="button" class="btn btn-secondary btn-sm" id="btnOnline" onclick="setLocationType('online')" style="flex: 1;">
-              온라인
-            </button>
-          </div>
+          <label for="attendees" class="form-label">참석자 (이메일, 쉼표로 구분) *</label>
+          <input type="text" id="attendees" class="form-input" placeholder="예: user1@example.com, user2@example.com" required>
         </div>
 
-        <!-- 참석자 -->
         <div class="form-group">
-          <label class="form-label required">참석자 (최소 1명)</label>
-          <div id="attendeeChips" class="d-flex gap-2 mb-2" style="flex-wrap: wrap;">
-            <!-- JavaScript로 동적 생성 -->
-          </div>
-          <button type="button" class="btn btn-secondary btn-sm w-full" onclick="showAttendeeSearch()">
-            <span class="material-symbols-outlined">person_add</span>
-            참석자 추가
-          </button>
+          <label for="description" class="form-label">회의 설명</label>
+          <textarea id="description" class="form-textarea" placeholder="회의 목적과 안건을 간략히 작성하세요"></textarea>
         </div>
 
-        <!-- 안건 -->
-        <div class="form-group">
-          <label for="agenda" class="form-label">안건</label>
-          <textarea
-            id="agenda"
-            class="form-textarea"
-            rows="5"
-            placeholder="회의 안건을 입력하세요"
-            aria-label="회의 안건"
-          ></textarea>
-          <button type="button" class="btn btn-text btn-sm mt-2" onclick="suggestAgenda()">
-            <span class="material-symbols-outlined">auto_awesome</span>
-            AI 안건 추천
-          </button>
+        <div class="button-group">
+          <button type="submit" class="btn btn-primary" style="flex: 1;">회의 예약하기</button>
+          <button type="button" class="btn btn-secondary" onclick="history.back()">취소</button>
         </div>
       </form>
     </div>
@@ -142,207 +91,41 @@
 
   <script src="common.js"></script>
   <script>
-    if (!NavigationHelper.requireAuth()) {}
+    const form = document.getElementById('meetingForm');
 
-    const currentUser = StorageManager.getCurrentUser();
-    let attendees = [];
-    let locationType = 'offline';
+    // 최소 날짜를 오늘로 설정
+    document.getElementById('date').min = new Date().toISOString().split('T')[0];
 
-    // 오늘 날짜 이전은 선택 불가
-    const today = new Date().toISOString().split('T')[0];
-    document.getElementById('meetingDate').setAttribute('min', today);
-    document.getElementById('meetingDate').value = today;
-
-    // 제목 글자 수 카운터
-    document.getElementById('meetingTitle').addEventListener('input', (e) => {
-      const counter = document.getElementById('titleCounter');
-      counter.textContent = `${e.target.value.length} / 100`;
-    });
-
-    // 종일 토글
-    function toggleAllDay() {
-      const allDay = document.getElementById('allDay').checked;
-      document.getElementById('startTime').disabled = allDay;
-      document.getElementById('endTime').disabled = allDay;
-
-      if (allDay) {
-        document.getElementById('startTime').value = '00:00';
-        document.getElementById('endTime').value = '23:59';
-      }
-    }
-
-    // 장소 유형 선택
-    function setLocationType(type) {
-      locationType = type;
-      const locationInput = document.getElementById('location');
-
-      document.getElementById('btnOffline').classList.toggle('btn-primary', type === 'offline');
-      document.getElementById('btnOffline').classList.toggle('btn-secondary', type !== 'offline');
-      document.getElementById('btnOnline').classList.toggle('btn-primary', type === 'online');
-      document.getElementById('btnOnline').classList.toggle('btn-secondary', type !== 'online');
-
-      if (type === 'online') {
-        locationInput.placeholder = '온라인 회의 링크 (자동 생성 가능)';
-        locationInput.value = 'https://meet.example.com/' + Utils.generateId('ROOM').toLowerCase();
-      } else {
-        locationInput.placeholder = '회의실 이름';
-        locationInput.value = '';
-      }
-    }
-
-    // 참석자 추가 모달
-    function showAttendeeSearch() {
-      const modal = UIComponents.showModal({
-        title: '참석자 추가',
-        content: `
-          <div class="form-group">
-            <input
-              type="text"
-              id="attendeeSearch"
-              class="form-input"
-              placeholder="이름 또는 이메일로 검색"
-              aria-label="참석자 검색"
-            >
-          </div>
-          <div id="attendeeSearchResults" style="max-height: 300px; overflow-y: auto;">
-            ${DUMMY_USERS.map(user => `
-              <div class="meeting-item" onclick="addAttendee('${user.name}', '${user.email}', '${user.id}')">
-                <div style="flex: 1;">
-                  <h4 class="text-body">${user.name}</h4>
-                  <p class="text-caption text-gray">${user.role} · ${user.email}</p>
-                </div>
-              </div>
-            `).join('')}
-          </div>
-        `,
-        footer: '<button class="btn btn-secondary" onclick="closeModal()">닫기</button>',
-        onClose: () => {}
-      });
-
-      // 검색 기능
-      document.getElementById('attendeeSearch').addEventListener('input', (e) => {
-        const query = e.target.value.toLowerCase();
-        const results = DUMMY_USERS.filter(user =>
-          user.name.toLowerCase().includes(query) ||
-          user.email.toLowerCase().includes(query) ||
-          user.role.toLowerCase().includes(query)
-        );
-
-        document.getElementById('attendeeSearchResults').innerHTML = results.map(user => `
-          <div class="meeting-item" onclick="addAttendee('${user.name}', '${user.email}', '${user.id}')">
-            <div style="flex: 1;">
-              <h4 class="text-body">${user.name}</h4>
-              <p class="text-caption text-gray">${user.role} · ${user.email}</p>
-            </div>
-          </div>
-        `).join('');
-      });
-    }
-
-    // 참석자 추가
-    function addAttendee(name, email, id) {
-      if (attendees.find(a => a.id === id)) {
-        UIComponents.showToast('이미 추가된 참석자입니다', 'warning');
-        return;
-      }
-
-      attendees.push({ id, name, email });
-      renderAttendees();
-      closeModal();
-      UIComponents.showToast(`${name} 님이 추가되었습니다`, 'success');
-    }
-
-    // 참석자 제거
-    function removeAttendee(id) {
-      attendees = attendees.filter(a => a.id !== id);
-      renderAttendees();
-    }
-
-    // 참석자 렌더링
-    function renderAttendees() {
-      const container = document.getElementById('attendeeChips');
-      container.innerHTML = attendees.map(attendee => `
-        <div class="badge badge-status" style="padding: 6px 12px; background: var(--primary-50); color: var(--primary-700);">
-          ${attendee.name}
-          <button type="button" onclick="removeAttendee('${attendee.id}')" style="background: none; border: none; color: inherit; cursor: pointer; padding: 0; margin-left: 4px;">×</button>
-        </div>
-      `).join('');
-    }
-
-    // 모달 닫기
-    function closeModal() {
-      const modal = document.querySelector('.modal-overlay');
-      if (modal) modal.remove();
-    }
-
-    // AI 안건 추천 (시뮬레이션)
-    function suggestAgenda() {
-      UIComponents.showLoading('AI가 안건을 추천하고 있습니다...');
-
-      setTimeout(() => {
-        const suggestions = [
-          '프로젝트 진행 상황 공유',
-          '이슈 및 리스크 논의',
-          '다음 주 일정 계획',
-          '역할 분담 및 업무 조율'
-        ];
-
-        document.getElementById('agenda').value = suggestions.join('\n');
-        UIComponents.hideLoading();
-        UIComponents.showToast('AI 추천 안건이 추가되었습니다', 'success');
-      }, 1500);
-    }
-
-    // 폼 제출
-    document.getElementById('meetingForm').addEventListener('submit', (e) => {
+    form.addEventListener('submit', async (e) => {
       e.preventDefault();
 
-      // 검증
-      if (!FormValidator.validate(e.target)) {
-        return;
-      }
+      const title = document.getElementById('title').value.trim();
+      const date = document.getElementById('date').value;
+      const time = document.getElementById('time').value;
+      const location = document.getElementById('location').value.trim();
+      const attendees = document.getElementById('attendees').value.trim();
+      const description = document.getElementById('description').value.trim();
 
-      if (attendees.length === 0) {
-        UIComponents.showToast('최소 1명의 참석자를 추가해주세요', 'error');
-        return;
-      }
-
-      const formData = {
-        id: Utils.generateId('MTG'),
-        title: document.getElementById('meetingTitle').value,
-        date: document.getElementById('meetingDate').value,
-        startTime: document.getElementById('startTime').value,
-        endTime: document.getElementById('endTime').value,
-        location: document.getElementById('location').value,
-        locationType: locationType,
-        attendees: attendees.map(a => a.name),
-        attendeeIds: attendees.map(a => a.id),
-        agenda: document.getElementById('agenda').value,
-        template: 'general',
+      // 새 회의 생성
+      const newMeeting = {
+        id: 'm-' + Date.now(),
+        title,
+        date: `${date} ${time}`,
+        location: location || '미정',
         status: 'scheduled',
-        createdBy: currentUser.id,
-        createdAt: new Date().toISOString(),
-        updatedAt: new Date().toISOString()
+        attendees: attendees.split(',').map(email => email.trim()),
+        description: description || ''
       };
 
-      UIComponents.showLoading('회의를 예약하는 중...');
+      // 저장
+      const meetings = MeetingApp.Storage.get('meetings', []);
+      meetings.unshift(newMeeting);
+      MeetingApp.Storage.set('meetings', meetings);
+
+      MeetingApp.Toast.success('회의가 예약되었습니다!');
 
       setTimeout(() => {
-        StorageManager.addMeeting(formData);
-        UIComponents.hideLoading();
-
-        UIComponents.confirm(
-          '회의가 예약되었습니다. 참석자에게 초대 이메일을 발송하시겠습니까?',
-          () => {
-            UIComponents.showToast('초대 이메일이 발송되었습니다', 'success');
-            setTimeout(() => {
-              NavigationHelper.navigate('DASHBOARD');
-            }, 1000);
-          },
-          () => {
-            NavigationHelper.navigate('DASHBOARD');
-          }
-        );
+        window.location.href = '04-템플릿선택.html?meetingId=' + newMeeting.id;
       }, 1000);
     });
   </script>
diff --git a/design/uiux/prototype/04-템플릿선택.html b/design/uiux/prototype/04-템플릿선택.html
index 02be4ee..f2ca2ec 100644
--- a/design/uiux/prototype/04-템플릿선택.html
+++ b/design/uiux/prototype/04-템플릿선택.html
@@ -5,230 +5,231 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>템플릿 선택 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+ Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 1024px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .page-header {
+      margin-bottom: var(--spacing-8);
+      text-align: center;
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+    .template-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: var(--spacing-6);
+      margin-bottom: var(--spacing-8);
+    }
+    .template-card {
+      background: var(--color-white);
+      border: 2px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      cursor: pointer;
+      transition: all var(--transition-base);
+      position: relative;
+    }
+    .template-card:hover {
+      border-color: var(--color-primary-main);
+      box-shadow: var(--shadow-md);
+      transform: translateY(-4px);
+    }
+    .template-card.selected {
+      border-color: var(--color-primary-main);
+      border-width: 3px;
+      background-color: rgba(0, 217, 177, 0.05);
+    }
+    .template-card.selected::after {
+      content: '✓';
+      position: absolute;
+      top: var(--spacing-3);
+      right: var(--spacing-3);
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      width: 28px;
+      height: 28px;
+      border-radius: var(--radius-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: var(--font-weight-bold);
+    }
+    .template-icon {
+      font-size: 48px;
+      margin-bottom: var(--spacing-4);
+      text-align: center;
+    }
+    .template-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .template-description {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      line-height: var(--line-height-relaxed);
+      margin-bottom: var(--spacing-4);
+    }
+    .template-sections {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-1);
+    }
+    .section-tag {
+      font-size: var(--font-size-caption);
+      padding: var(--spacing-1) var(--spacing-2);
+      background-color: var(--color-gray-100);
+      color: var(--color-gray-600);
+      border-radius: var(--radius-sm);
+    }
+    .action-buttons {
+      display: flex;
+      gap: var(--spacing-3);
+      justify-content: center;
+    }
+    @media (max-width: 767px) {
+      .page-title { font-size: var(--font-size-h2); }
+      .template-grid { grid-template-columns: 1fr; }
+      .action-buttons { flex-direction: column; }
+      .action-buttons .btn { width: 100%; }
+    }
+  </style>
 </head>
 <body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <button class="btn-icon" onclick="NavigationHelper.goBack()" aria-label="뒤로가기">
-        <span class="material-symbols-outlined">arrow_back</span>
-      </button>
-      <h1 class="header-title">템플릿 선택</h1>
-      <button class="btn btn-text" onclick="skipTemplate()">건너뛰기</button>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">회의록 템플릿 선택</h1>
+      <p class="page-subtitle">회의 유형에 맞는 템플릿을 선택하여 효율적으로 회의록을 작성하세요</p>
     </div>
 
-    <!-- 메인 컨텐츠 -->
-    <div class="content">
-      <p class="text-body mb-6">회의 유형에 맞는 템플릿을 선택하세요. 건너뛰면 일반 템플릿이 사용됩니다.</p>
-
-      <!-- 템플릿 카드 리스트 -->
-      <div id="templateList">
-        <!-- JavaScript로 동적 생성 -->
+    <div class="template-grid">
+      <!-- 일반 회의 템플릿 -->
+      <div class="template-card" data-template="general">
+        <div class="template-icon">📋</div>
+        <h3 class="template-title">일반 회의</h3>
+        <p class="template-description">
+          가장 기본적인 회의록 형식입니다. 모든 유형의 회의에 적합합니다.
+        </p>
+        <div class="template-sections">
+          <span class="section-tag">참석자</span>
+          <span class="section-tag">안건</span>
+          <span class="section-tag">논의 내용</span>
+          <span class="section-tag">결정 사항</span>
+          <span class="section-tag">Todo</span>
+        </div>
       </div>
+
+      <!-- 스크럼 회의 템플릿 -->
+      <div class="template-card" data-template="scrum">
+        <div class="template-icon">🏃</div>
+        <h3 class="template-title">스크럼 회의</h3>
+        <p class="template-description">
+          데일리 스탠드업이나 스프린트 회의에 최적화된 템플릿입니다.
+        </p>
+        <div class="template-sections">
+          <span class="section-tag">어제 한 일</span>
+          <span class="section-tag">오늘 할 일</span>
+          <span class="section-tag">이슈/블로커</span>
+          <span class="section-tag">다음 스프린트</span>
+        </div>
+      </div>
+
+      <!-- 프로젝트 킥오프 템플릿 -->
+      <div class="template-card" data-template="kickoff">
+        <div class="template-icon">🚀</div>
+        <h3 class="template-title">프로젝트 킥오프</h3>
+        <p class="template-description">
+          새 프로젝트 시작 시 필요한 모든 정보를 담는 템플릿입니다.
+        </p>
+        <div class="template-sections">
+          <span class="section-tag">프로젝트 개요</span>
+          <span class="section-tag">목표</span>
+          <span class="section-tag">일정</span>
+          <span class="section-tag">역할 분담</span>
+          <span class="section-tag">리스크</span>
+        </div>
+      </div>
+
+      <!-- 주간 회의 템플릿 -->
+      <div class="template-card" data-template="weekly">
+        <div class="template-icon">📅</div>
+        <h3 class="template-title">주간 회의</h3>
+        <p class="template-description">
+          매주 반복되는 정기 회의에 적합한 템플릿입니다.
+        </p>
+        <div class="template-sections">
+          <span class="section-tag">주간 실적</span>
+          <span class="section-tag">주요 이슈</span>
+          <span class="section-tag">다음 주 계획</span>
+          <span class="section-tag">공지사항</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="action-buttons">
+      <button type="button" class="btn btn-secondary" onclick="history.back()">이전으로</button>
+      <button type="button" class="btn btn-primary" id="startMeetingBtn" disabled>
+        회의 시작하기
+      </button>
     </div>
   </div>
 
   <script src="common.js"></script>
   <script>
-    if (!NavigationHelper.requireAuth()) {}
-
-    const currentUser = StorageManager.getCurrentUser();
-    const meetingId = NavigationHelper.getQueryParam('meetingId');
     let selectedTemplate = null;
+    const startBtn = document.getElementById('startMeetingBtn');
+    const templateCards = document.querySelectorAll('.template-card');
 
-    // 템플릿 렌더링
-    function renderTemplates() {
-      const templates = Object.values(TEMPLATES);
-      const container = document.getElementById('templateList');
+    templateCards.forEach(card => {
+      card.addEventListener('click', () => {
+        // 기존 선택 해제
+        templateCards.forEach(c => c.classList.remove('selected'));
 
-      container.innerHTML = templates.map(template => `
-        <div class="card mb-4 clickable" onclick="selectTemplate('${template.type}')">
-          <div class="d-flex align-center gap-4">
-            <div style="font-size: 48px;">${template.icon}</div>
-            <div style="flex: 1;">
-              <h3 class="text-h4">${template.name}</h3>
-              <p class="text-body-sm text-gray">${template.description}</p>
-              <p class="text-caption mt-2">섹션 ${template.sections.length}개</p>
-            </div>
-            <button class="btn btn-secondary btn-sm" onclick="event.stopPropagation(); previewTemplate('${template.type}')">미리보기</button>
-          </div>
-        </div>
-      `).join('');
-    }
-
-    // 템플릿 선택
-    function selectTemplate(type) {
-      selectedTemplate = type;
-      showCustomizeModal(type);
-    }
-
-    // 템플릿 미리보기
-    function previewTemplate(type) {
-      const template = TEMPLATES[type];
-
-      UIComponents.showModal({
-        title: template.name + ' 미리보기',
-        content: `
-          <div class="d-flex align-center gap-3 mb-4">
-            <div style="font-size: 40px;">${template.icon}</div>
-            <div>
-              <h3 class="text-h4">${template.name}</h3>
-              <p class="text-body-sm text-gray">${template.description}</p>
-            </div>
-          </div>
-          <div>
-            <h4 class="text-h5 mb-3">포함된 섹션</h4>
-            ${template.sections.map((section, index) => `
-              <div class="d-flex align-center gap-2 mb-2">
-                <span class="badge badge-status" style="min-width: 24px; background: var(--gray-200); color: var(--gray-700);">${index + 1}</span>
-                <span class="text-body">${section.name}</span>
-              </div>
-            `).join('')}
-          </div>
-        `,
-        footer: `
-          <button class="btn btn-secondary" onclick="closeModal()">닫기</button>
-          <button class="btn btn-primary" onclick="closeModal(); selectTemplate('${type}')">이 템플릿 선택</button>
-        `,
-        onClose: () => {}
+        // 새로운 선택
+        card.classList.add('selected');
+        selectedTemplate = card.getAttribute('data-template');
+        startBtn.disabled = false;
       });
-    }
+    });
 
-    // 커스터마이징 모달
-    function showCustomizeModal(type) {
-      const template = TEMPLATES[type];
-      let customSections = [...template.sections];
-
-      const modal = UIComponents.showModal({
-        title: '템플릿 커스터마이징',
-        content: `
-          <p class="text-body mb-4">섹션 순서를 변경하거나 추가/삭제할 수 있습니다.</p>
-          <div id="sectionList">
-            <!-- JavaScript로 동적 생성 -->
-          </div>
-          <button type="button" class="btn btn-secondary btn-sm w-full mt-3" onclick="addCustomSection()">
-            <span class="material-symbols-outlined">add</span>
-            섹션 추가
-          </button>
-        `,
-        footer: `
-          <button class="btn btn-secondary" onclick="closeModal()">취소</button>
-          <button class="btn btn-primary" onclick="startMeetingWithTemplate()">이 템플릿으로 시작</button>
-        `,
-        onClose: () => {}
-      });
-
-      renderSections();
-
-      function renderSections() {
-        const container = document.getElementById('sectionList');
-        container.innerHTML = customSections.map((section, index) => `
-          <div class="d-flex align-center gap-2 mb-2 p-2" style="background: var(--gray-50); border-radius: 8px;">
-            <span class="material-symbols-outlined" style="cursor: move; color: var(--gray-600);">drag_indicator</span>
-            <span class="text-body" style="flex: 1;">${section.name}</span>
-            <button type="button" class="btn-icon" onclick="moveSectionUp(${index})" ${index === 0 ? 'disabled' : ''}>
-              <span class="material-symbols-outlined">arrow_upward</span>
-            </button>
-            <button type="button" class="btn-icon" onclick="moveSectionDown(${index})" ${index === customSections.length - 1 ? 'disabled' : ''}>
-              <span class="material-symbols-outlined">arrow_downward</span>
-            </button>
-            <button type="button" class="btn-icon" onclick="removeSection(${index})" ${customSections.length <= 1 ? 'disabled' : ''}>
-              <span class="material-symbols-outlined" style="color: var(--error);">delete</span>
-            </button>
-          </div>
-        `).join('');
+    startBtn.addEventListener('click', () => {
+      if (!selectedTemplate) {
+        MeetingApp.Toast.warning('템플릿을 선택해주세요');
+        return;
       }
 
-      window.moveSectionUp = (index) => {
-        if (index > 0) {
-          [customSections[index], customSections[index - 1]] = [customSections[index - 1], customSections[index]];
-          renderSections();
-        }
-      };
+      // URL에서 meetingId 가져오기
+      const urlParams = new URLSearchParams(window.location.search);
+      const meetingId = urlParams.get('meetingId');
 
-      window.moveSectionDown = (index) => {
-        if (index < customSections.length - 1) {
-          [customSections[index], customSections[index + 1]] = [customSections[index + 1], customSections[index]];
-          renderSections();
-        }
-      };
+      // 선택한 템플릿 저장
+      MeetingApp.Storage.set('selectedTemplate', {
+        meetingId: meetingId,
+        template: selectedTemplate,
+        timestamp: new Date().toISOString()
+      });
 
-      window.removeSection = (index) => {
-        if (customSections.length > 1) {
-          customSections.splice(index, 1);
-          renderSections();
-        } else {
-          UIComponents.showToast('최소 1개의 섹션이 필요합니다', 'warning');
-        }
-      };
+      MeetingApp.Toast.success('템플릿이 선택되었습니다');
 
-      window.addCustomSection = () => {
-        const sectionName = prompt('섹션 이름을 입력하세요:');
-        if (sectionName && sectionName.trim()) {
-          customSections.push({
-            id: Utils.generateId('SEC'),
-            name: sectionName.trim(),
-            order: customSections.length + 1,
-            content: '',
-            custom: true
-          });
-          renderSections();
-        }
-      };
+      setTimeout(() => {
+        window.location.href = '05-회의진행.html?meetingId=' + meetingId;
+      }, 500);
+    });
 
-      window.startMeetingWithTemplate = () => {
-        if (customSections.length === 0) {
-          UIComponents.showToast('최소 1개의 섹션이 필요합니다', 'error');
-          return;
-        }
-
-        // 템플릿 데이터 저장
-        const templateData = {
-          type: type,
-          name: template.name,
-          sections: customSections.map((section, index) => ({
-            ...section,
-            order: index + 1
-          }))
-        };
-
-        localStorage.setItem('selected_template', JSON.stringify(templateData));
-        closeModal();
-
-        // 회의 진행 화면으로 이동
-        const params = meetingId ? { meetingId } : {};
-        NavigationHelper.navigate('MEETING_IN_PROGRESS', params);
-      };
-    }
-
-    // 모달 닫기
-    function closeModal() {
-      const modal = document.querySelector('.modal-overlay');
-      if (modal) modal.remove();
-    }
-
-    // 건너뛰기 (기본 템플릿 사용)
-    function skipTemplate() {
-      UIComponents.confirm(
-        '기본 템플릿으로 회의를 시작하시겠습니까?',
-        () => {
-          const templateData = {
-            type: 'general',
-            name: TEMPLATES.general.name,
-            sections: [...TEMPLATES.general.sections]
-          };
-
-          localStorage.setItem('selected_template', JSON.stringify(templateData));
-          const params = meetingId ? { meetingId } : {};
-          NavigationHelper.navigate('MEETING_IN_PROGRESS', params);
-        },
-        () => {}
-      );
-    }
-
-    // 초기 렌더링
-    renderTemplates();
+    // 페이지 로드 시 일반 회의 템플릿 기본 선택 (선택적)
+    // templateCards[0].click();
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/05-회의진행.html b/design/uiux/prototype/05-회의진행.html
index f6c292c..d88b52e 100644
--- a/design/uiux/prototype/05-회의진행.html
+++ b/design/uiux/prototype/05-회의진행.html
@@ -5,429 +5,642 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>회의 진행 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
   <style>
-    .live-speech {
-      background: var(--accent-50);
-      border-left: 4px solid var(--accent-500);
-      padding: 16px;
-      border-radius: 8px;
-      position: sticky;
-      top: 60px;
-      z-index: 10;
+    body {
+      background-color: var(--color-gray-50);
+      margin: 0;
+      overflow: hidden;
     }
-
-    .speaking-indicator {
-      width: 8px;
-      height: 8px;
-      background: var(--error);
-      border-radius: 50%;
-      animation: pulse 1.5s infinite;
+    .meeting-container {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
     }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
+    .meeting-header {
+      background: var(--color-white);
+      border-bottom: 1px solid var(--color-gray-200);
+      padding: var(--spacing-4) var(--spacing-6);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
     }
-
-    .section-content {
-      min-height: 100px;
-      padding: 12px;
-      background: var(--white);
-      border: 1px solid var(--gray-300);
-      border-radius: 8px;
-      white-space: pre-wrap;
-      word-wrap: break-word;
-    }
-
-    .section-content[contenteditable="true"] {
-      outline: 2px solid var(--primary-500);
-    }
-
-    .term-highlight {
-      background: linear-gradient(180deg, transparent 60%, var(--accent-200) 60%);
-      cursor: pointer;
-      border-bottom: 1px dotted var(--accent-500);
-    }
-
-    .recording-status {
+    .meeting-info {
       display: flex;
       align-items: center;
-      gap: 8px;
-      padding: 8px 16px;
-      background: var(--error-bg);
-      border-radius: 20px;
-      font-size: 13px;
-      color: var(--error);
+      gap: var(--spacing-4);
+    }
+    .meeting-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+    }
+    .recording-indicator {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2) var(--spacing-3);
+      background-color: var(--color-error-light);
+      color: var(--color-error-dark);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+    .recording-dot {
+      width: 8px;
+      height: 8px;
+      background-color: var(--color-error-main);
+      border-radius: var(--radius-full);
+      animation: blink 1.5s ease-in-out infinite;
+    }
+    @keyframes blink {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+    }
+    .meeting-body {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+    .editor-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      background: var(--color-white);
+      border-right: 1px solid var(--color-gray-200);
+    }
+    .editor-toolbar {
+      padding: var(--spacing-3) var(--spacing-4);
+      border-bottom: 1px solid var(--color-gray-200);
+      display: flex;
+      gap: var(--spacing-2);
+    }
+    .editor-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--spacing-6);
+    }
+    .editor-textarea {
+      width: 100%;
+      min-height: 300px;
+      border: none;
+      font-family: inherit;
+      font-size: var(--font-size-body);
+      line-height: var(--line-height-relaxed);
+      resize: none;
+      outline: none;
+    }
+    .side-panel {
+      width: 400px;
+      background: var(--color-white);
+      display: flex;
+      flex-direction: column;
+      border-left: 1px solid var(--color-gray-200);
+    }
+    .side-panel-tabs {
+      display: flex;
+      border-bottom: 1px solid var(--color-gray-200);
+    }
+    .side-tab {
+      flex: 1;
+      padding: var(--spacing-3) var(--spacing-4);
+      background: transparent;
+      border: none;
+      border-bottom: 3px solid transparent;
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-600);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+    .side-tab.active {
+      color: var(--color-primary-main);
+      border-bottom-color: var(--color-primary-main);
+    }
+    .side-panel-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--spacing-4);
+    }
+    .attendee-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      background: var(--color-gray-50);
+      border-radius: var(--radius-md);
+    }
+    .attendee-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: var(--radius-full);
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: var(--font-weight-semibold);
+    }
+    .attendee-info {
+      flex: 1;
+    }
+    .attendee-name {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+    }
+    .attendee-status {
+      font-size: var(--font-size-caption);
+      color: var(--color-gray-500);
+    }
+    .ai-suggestion {
+      background-color: var(--color-gray-50);
+      border: 1px dashed var(--color-primary-main);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-4);
+    }
+    .ai-suggestion-header {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      margin-bottom: var(--spacing-3);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-primary-main);
+    }
+    .ai-suggestion-text {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      line-height: var(--line-height-relaxed);
+      margin-bottom: var(--spacing-3);
+    }
+    .ai-actions {
+      display: flex;
+      gap: var(--spacing-2);
     }
 
-    .action-bar {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background: var(--white);
-      border-top: 1px solid var(--gray-200);
-      padding: 12px 16px;
+    /* 용어 사전 탭 스타일 */
+    .term-search-box {
+      margin-bottom: var(--spacing-4);
+    }
+    .term-search-input {
+      width: 100%;
+      padding: var(--spacing-3);
+      border: 1px solid var(--color-gray-300);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body);
+      outline: none;
+      transition: all var(--transition-fast);
+    }
+    .term-search-input:focus {
+      border-color: var(--color-primary-main);
+      box-shadow: 0 0 0 3px rgba(0, 217, 177, 0.1);
+    }
+    .term-list {
       display: flex;
-      gap: 8px;
-      z-index: var(--z-fixed);
+      flex-direction: column;
+      gap: var(--spacing-3);
+    }
+    .term-item {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+    .term-item:hover {
+      border-color: var(--color-primary-main);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+    .term-item.highlight {
+      background-color: var(--color-primary-light);
+      border-color: var(--color-primary-main);
+    }
+    .term-name {
+      font-size: var(--font-size-body);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+    .term-badge {
+      font-size: var(--font-size-caption);
+      padding: 2px var(--spacing-2);
+      background-color: var(--color-primary-light);
+      color: var(--color-primary-dark);
+      border-radius: var(--radius-sm);
+      font-weight: var(--font-weight-medium);
+    }
+    .term-definition {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      line-height: var(--line-height-relaxed);
+      margin-bottom: var(--spacing-2);
+    }
+    .term-context {
+      font-size: var(--font-size-caption);
+      color: var(--color-gray-500);
+      padding-top: var(--spacing-2);
+      border-top: 1px solid var(--color-gray-100);
+    }
+    .no-results {
+      text-align: center;
+      padding: var(--spacing-8);
+      color: var(--color-gray-500);
+    }
+
+    @media (max-width: 1023px) {
+      .side-panel {
+        position: fixed;
+        right: -400px;
+        top: 0;
+        height: 100vh;
+        z-index: var(--z-sticky);
+        box-shadow: var(--shadow-lg);
+        transition: right var(--transition-base);
+      }
+      .side-panel.open {
+        right: 0;
+      }
     }
   </style>
 </head>
 <body>
-  <div class="page">
+  <div class="meeting-container">
     <!-- 헤더 -->
-    <div class="header">
-      <div style="flex: 1;">
-        <h1 class="header-title" id="meetingTitle">회의 진행</h1>
-        <div class="d-flex align-center gap-3 mt-1">
-          <span class="text-caption" id="elapsedTime">00:00:00</span>
-          <div class="recording-status">
-            <div class="speaking-indicator"></div>
-            <span>녹음 중</span>
+    <div class="meeting-header">
+      <div class="meeting-info">
+        <h1 class="meeting-title" id="meetingTitle">회의 진행 중</h1>
+        <div class="recording-indicator">
+          <div class="recording-dot"></div>
+          <span id="recordingTime">00:00</span>
+        </div>
+      </div>
+      <div style="display: flex; gap: var(--spacing-3);">
+        <button class="btn btn-text btn-icon hide-desktop" id="toggleSidePanel">☰</button>
+        <button class="btn btn-secondary" onclick="if(confirm('회의를 종료하시겠습니까?')) window.location.href='06-검증완료.html'">
+          회의 종료
+        </button>
+      </div>
+    </div>
+
+    <!-- 본문 -->
+    <div class="meeting-body">
+      <!-- 에디터 패널 -->
+      <div class="editor-panel">
+        <div class="editor-toolbar">
+          <button class="btn btn-text btn-icon-sm">B</button>
+          <button class="btn btn-text btn-icon-sm">I</button>
+          <button class="btn btn-text btn-icon-sm">U</button>
+          <button class="btn btn-text btn-icon-sm">📝</button>
+          <button class="btn btn-text btn-icon-sm">🔗</button>
+        </div>
+        <div class="editor-content">
+          <textarea class="editor-textarea" id="meetingContent" placeholder="회의 내용을 작성하거나 AI가 자동으로 작성합니다...
+
+# 참석자
+- 김민준
+- 박서연
+- 이준호
+
+# 안건
+1. 신규 기능 개발 일정 논의
+2. 예산 편성 검토
+
+# 논의 내용
+Mobile First 설계 방침으로 진행하기로 결정
+AI 기반 회의록 자동 작성 기능을 핵심으로 개발
+API Gateway 구축 및 마이크로서비스 아키텍처 적용
+
+"></textarea>
+        </div>
+      </div>
+
+      <!-- 사이드 패널 -->
+      <div class="side-panel" id="sidePanel">
+        <div class="side-panel-tabs">
+          <button class="side-tab active" data-tab="attendees">참석자</button>
+          <button class="side-tab" data-tab="ai">AI 제안</button>
+          <button class="side-tab" data-tab="terms">용어 사전</button>
+          <button class="side-tab" data-tab="related">관련 자료</button>
+        </div>
+
+        <div class="side-panel-content">
+          <!-- 참석자 탭 -->
+          <div class="tab-content" data-content="attendees">
+            <h3 style="margin-bottom: var(--spacing-4); font-size: var(--font-size-h4);">참석자 (3명)</h3>
+            <div class="attendee-item">
+              <div class="attendee-avatar">김</div>
+              <div class="attendee-info">
+                <div class="attendee-name">김민준</div>
+                <div class="attendee-status">발언 중 ✍️</div>
+              </div>
+            </div>
+            <div class="attendee-item">
+              <div class="attendee-avatar" style="background-color: var(--color-secondary-main);">박</div>
+              <div class="attendee-info">
+                <div class="attendee-name">박서연</div>
+                <div class="attendee-status">온라인</div>
+              </div>
+            </div>
+            <div class="attendee-item">
+              <div class="attendee-avatar" style="background-color: var(--color-info-main);">이</div>
+              <div class="attendee-info">
+                <div class="attendee-name">이준호</div>
+                <div class="attendee-status">온라인</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- AI 제안 탭 -->
+          <div class="tab-content" data-content="ai" style="display: none;">
+            <h3 style="margin-bottom: var(--spacing-4); font-size: var(--font-size-h4);">AI 제안</h3>
+
+            <div class="ai-suggestion">
+              <div class="ai-suggestion-header">
+                ✨ 회의록 요약 제안
+              </div>
+              <div class="ai-suggestion-text">
+                Mobile First 설계 방침 확정 및 AI 기반 자동 작성 기능 개발 착수 결정. 마이크로서비스 아키텍처와 API Gateway 구축 계획 수립.
+              </div>
+              <div class="ai-actions">
+                <button class="btn btn-primary btn-sm">회의록에 적용</button>
+                <button class="btn btn-text btn-sm">수정</button>
+              </div>
+            </div>
+
+            <div class="ai-suggestion">
+              <div class="ai-suggestion-header">
+                📋 액션 아이템(Todo) 자동 추출
+              </div>
+              <div class="ai-suggestion-text">
+                1. API 명세서 작성 (이준호, 3/25까지)<br>
+                2. UI 프로토타입 완성 (최유진, 3/15까지)<br>
+                3. 예산 편성안 최종 검토 (박서연, 3/20까지)
+              </div>
+              <div class="ai-actions">
+                <button class="btn btn-primary btn-sm">3개 Todo 생성</button>
+                <button class="btn btn-text btn-sm">수정</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- 용어 사전 탭 (NEW) -->
+          <div class="tab-content" data-content="terms" style="display: none;">
+            <h3 style="margin-bottom: var(--spacing-4); font-size: var(--font-size-h4);">용어 사전</h3>
+
+            <!-- 검색 입력 -->
+            <div class="term-search-box">
+              <input
+                type="text"
+                class="term-search-input"
+                id="termSearchInput"
+                placeholder="용어를 검색하세요 (예: API, Mobile First)"
+              />
+            </div>
+
+            <!-- 용어 목록 -->
+            <div class="term-list" id="termList">
+              <!-- JavaScript로 동적 생성 -->
+            </div>
+
+            <!-- 검색 결과 없음 -->
+            <div class="no-results" id="noResults" style="display: none;">
+              <div style="font-size: 48px; opacity: 0.3; margin-bottom: var(--spacing-3);">🔍</div>
+              <div>검색 결과가 없습니다</div>
+            </div>
+          </div>
+
+          <!-- 관련 자료 탭 -->
+          <div class="tab-content" data-content="related" style="display: none;">
+            <h3 style="margin-bottom: var(--spacing-4); font-size: var(--font-size-h4);">관련 자료</h3>
+
+            <div style="margin-bottom: var(--spacing-6);">
+              <h4 style="font-size: var(--font-size-body); font-weight: var(--font-weight-semibold); color: var(--color-gray-700); margin-bottom: var(--spacing-3);">
+                📄 관련 회의록 (3건)
+              </h4>
+
+              <div class="ai-suggestion" style="cursor: pointer;">
+                <div class="ai-suggestion-header" style="color: var(--color-gray-900);">
+                  2024년 4분기 제품 기획 회의
+                </div>
+                <div class="ai-suggestion-text">
+                  <div style="display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-2); font-size: var(--font-size-caption);">
+                    <span>2024-10-15</span> | <span style="color: var(--color-success-main);">관련도 92%</span>
+                  </div>
+                  <div>신규 회의록 서비스 MVP 개발 일정 논의. AI 기능 우선순위와 예산 확정.</div>
+                </div>
+              </div>
+
+              <div class="ai-suggestion" style="cursor: pointer;">
+                <div class="ai-suggestion-header" style="color: var(--color-gray-900);">
+                  API 설계 리뷰 회의
+                </div>
+                <div class="ai-suggestion-text">
+                  <div style="display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-2); font-size: var(--font-size-caption);">
+                    <span>2024-09-28</span> | <span style="color: var(--color-warning-main);">관련도 78%</span>
+                  </div>
+                  <div>RESTful API 설계 원칙과 보안 정책 확정. 담당자별 역할 분담.</div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <button class="btn-icon" onclick="showMenu()" aria-label="메뉴">
-        <span class="material-symbols-outlined">more_vert</span>
-      </button>
-    </div>
-
-    <!-- 메인 컨텐츠 -->
-    <div class="content" style="padding-bottom: 80px;">
-      <!-- 실시간 발언 영역 -->
-      <div class="live-speech mb-4">
-        <div class="d-flex align-center gap-2 mb-2">
-          <span class="material-symbols-outlined" style="color: var(--accent-700);">mic</span>
-          <span class="text-h6" style="color: var(--accent-700);" id="currentSpeaker">김철수</span>
-        </div>
-        <p class="text-body" id="liveText">회의를 시작하겠습니다. 오늘은 프로젝트 킥오프 회의로...</p>
-      </div>
-
-      <!-- AI 처리 인디케이터 -->
-      <div class="ai-processing mb-4">
-        <span class="material-symbols-outlined ai-icon">auto_awesome</span>
-        <span>AI가 발언 내용을 분석하여 회의록을 작성하고 있습니다</span>
-      </div>
-
-      <!-- 회의록 섹션들 -->
-      <div id="sectionList">
-        <!-- JavaScript로 동적 생성 -->
-      </div>
-    </div>
-
-    <!-- 하단 액션 바 -->
-    <div class="action-bar">
-      <button class="btn btn-secondary" onclick="pauseRecording()" id="pauseBtn">
-        <span class="material-symbols-outlined">pause</span>
-        일시정지
-      </button>
-      <button class="btn btn-text" onclick="addManualNote()">
-        <span class="material-symbols-outlined">edit_note</span>
-        메모 추가
-      </button>
-      <button class="btn btn-primary" onclick="endMeeting()" style="flex: 1;">
-        <span class="material-symbols-outlined">stop_circle</span>
-        회의 종료
-      </button>
     </div>
   </div>
 
   <script src="common.js"></script>
   <script>
-    if (!NavigationHelper.requireAuth()) {}
+    // 용어 사전 데이터
+    const TERMINOLOGY = [
+      {
+        id: 'mobile-first',
+        name: 'Mobile First',
+        category: '설계 방법론',
+        definition: '모바일 환경을 우선적으로 고려하여 디자인하고, 이후 더 큰 화면으로 확장하는 설계 방법론입니다.',
+        context: '회의에서 언급됨 (14:23)',
+        usedInMeeting: true
+      },
+      {
+        id: 'ai',
+        name: 'AI',
+        category: '기술',
+        definition: 'Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다.',
+        context: '회의에서 5회 언급됨',
+        usedInMeeting: true
+      },
+      {
+        id: 'api',
+        name: 'API',
+        category: '기술',
+        definition: 'Application Programming Interface의 약자로, 소프트웨어 간 상호작용을 위한 인터페이스입니다.',
+        context: '회의에서 3회 언급됨',
+        usedInMeeting: true
+      },
+      {
+        id: 'api-gateway',
+        name: 'API Gateway',
+        category: '아키텍처',
+        definition: '클라이언트와 백엔드 마이크로서비스 사이의 단일 진입점 역할을 하는 서버. 요청 라우팅, 인증, 속도 제한, 로드 밸런싱 등을 처리합니다.',
+        context: 'API 설계 리뷰 회의 (2024-09-28)에서 AWS API Gateway 채택 결정',
+        usedInMeeting: true
+      },
+      {
+        id: 'microservice',
+        name: '마이크로서비스',
+        category: '아키텍처',
+        definition: '애플리케이션을 작고 독립적인 서비스들로 분리하여 개발하고 배포하는 아키텍처 패턴입니다.',
+        context: '회의에서 언급됨',
+        usedInMeeting: true
+      },
+      {
+        id: 'mvp',
+        name: 'MVP',
+        category: '방법론',
+        definition: 'Minimum Viable Product의 약자. 최소한의 기능만 갖춘 제품으로, 시장 반응을 빠르게 확인하기 위해 개발합니다.',
+        context: '개발 일정 논의에서 언급',
+        usedInMeeting: true
+      },
+      {
+        id: 'restful',
+        name: 'RESTful API',
+        category: '기술',
+        definition: 'REST(Representational State Transfer) 아키텍처 스타일을 따르는 웹 서비스 API 설계 방식입니다.',
+        context: 'API 설계 리뷰 회의 참조',
+        usedInMeeting: false
+      },
+      {
+        id: 'jwt',
+        name: 'JWT',
+        category: '보안',
+        definition: 'JSON Web Token의 약자. 사용자 인증 정보를 안전하게 전송하기 위한 토큰 기반 인증 방식입니다.',
+        context: 'API Gateway 보안 정책에서 채택',
+        usedInMeeting: false
+      }
+    ];
 
-    const currentUser = StorageManager.getCurrentUser();
-    const meetingId = NavigationHelper.getQueryParam('meetingId') || Utils.generateId('MTG');
-    let templateData = JSON.parse(localStorage.getItem('selected_template') || 'null') || {
-      type: 'general',
-      name: '일반 회의',
-      sections: TEMPLATES.general.sections
-    };
+    // 용어 렌더링
+    function renderTerms(terms) {
+      const termList = document.getElementById('termList');
+      const noResults = document.getElementById('noResults');
 
-    let isRecording = true;
-    let isPaused = false;
-    let startTime = Date.now();
-    let elapsedInterval;
+      if (terms.length === 0) {
+        termList.innerHTML = '';
+        noResults.style.display = 'block';
+        return;
+      }
 
-    // 경과 시간 표시
-    function updateElapsedTime() {
-      const elapsed = Date.now() - startTime;
-      document.getElementById('elapsedTime').textContent = Utils.formatDuration(elapsed);
-    }
-
-    elapsedInterval = setInterval(updateElapsedTime, 1000);
-
-    // 섹션 렌더링
-    function renderSections() {
-      const container = document.getElementById('sectionList');
-
-      container.innerHTML = templateData.sections.map((section, index) => `
-        <div class="card mb-4" id="section-${section.id}">
-          <div class="d-flex justify-between align-center mb-3">
-            <h3 class="text-h4">${section.name}</h3>
-            <div class="d-flex align-center gap-2">
-              ${section.verified ? '<span class="verified-badge"><span class="material-symbols-outlined" style="font-size: 14px;">check_circle</span> 검증완료</span>' : ''}
-              <button class="btn-icon" onclick="toggleEdit('${section.id}')">
-                <span class="material-symbols-outlined">edit</span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="section-content"
-            id="content-${section.id}"
-            contenteditable="false"
-          >${section.content || '(AI가 발언 내용을 분석하여 자동으로 작성합니다)'}</div>
-          <div class="d-flex justify-between align-center mt-3">
-            <button class="btn btn-text btn-sm" onclick="improveSection('${section.id}')">
-              <span class="material-symbols-outlined">auto_awesome</span>
-              AI 개선
-            </button>
-            <label class="form-checkbox">
-              <input type="checkbox" ${section.verified ? 'checked' : ''} onchange="toggleVerify('${section.id}', this.checked)">
-              <span class="text-body-sm">검증 완료</span>
-            </label>
+      noResults.style.display = 'none';
+      termList.innerHTML = terms.map(term => `
+        <div class="term-item ${term.usedInMeeting ? 'highlight' : ''}" onclick="showTermDetail('${term.id}')">
+          <div class="term-name">
+            ${term.name}
+            <span class="term-badge">${term.category}</span>
+            ${term.usedInMeeting ? '<span style="font-size: 16px;">💬</span>' : ''}
           </div>
+          <div class="term-definition">${term.definition}</div>
+          <div class="term-context">${term.context}</div>
         </div>
       `).join('');
-
-      // 실시간 AI 작성 시뮬레이션
-      simulateAIWriting();
     }
 
-    // AI 자동 작성 시뮬레이션
-    function simulateAIWriting() {
-      const sampleContent = {
-        '참석자': '김철수 (기획팀 팀장), 이영희 (개발팀 선임), 박민수 (디자인팀 사원)',
-        '안건': '신규 회의록 서비스 프로젝트 킥오프\n- 프로젝트 목표 및 범위 확정\n- 역할 분담 및 일정 계획',
-        '논의 내용': 'Mobile First 설계 방침으로 진행하기로 결정\nAI 기반 회의록 자동 작성 기능을 핵심으로 개발\n템플릿 시스템 및 실시간 협업 기능 포함',
-        '결정 사항': '개발 기간: 2025년 Q4까지\n기술 스택: React, Node.js, PostgreSQL\n주간 스크럼 회의 매주 월요일 09:00',
-        'Todo': '김철수: 프로젝트 계획서 작성 (10/25까지)\n이영희: API 문서 작성 (10/24까지)\n박민수: 디자인 시안 1차 검토 (10/23까지)'
-      };
-
-      templateData.sections.forEach((section, index) => {
-        setTimeout(() => {
-          const content = sampleContent[section.name] || `${section.name}에 대한 내용이 자동으로 작성됩니다...`;
-          const contentEl = document.getElementById(`content-${section.id}`);
-          if (contentEl) {
-            contentEl.textContent = content;
-            section.content = content;
-
-            // 전문용어 하이라이트 추가
-            highlightTerms(section.id);
-          }
-        }, (index + 1) * 2000);
-      });
-    }
-
-    // 전문용어 하이라이트
-    function highlightTerms(sectionId) {
-      const contentEl = document.getElementById(`content-${sectionId}`);
-      if (!contentEl) return;
-
-      const terms = ['Mobile First', 'AI', 'API', 'PostgreSQL', 'React'];
-      let html = contentEl.textContent;
-
-      terms.forEach(term => {
-        const regex = new RegExp(term, 'g');
-        html = html.replace(regex, `<span class="term-highlight" onclick="showTermExplanation('${term}')">${term}</span>`);
-      });
-
-      contentEl.innerHTML = html;
-    }
-
-    // 전문용어 설명 표시
-    function showTermExplanation(term) {
-      const explanations = {
-        'Mobile First': 'Mobile First는 모바일 환경을 우선적으로 고려하여 디자인하고, 이후 더 큰 화면으로 확장하는 설계 방법론입니다.',
-        'AI': 'Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다.',
-        'API': 'Application Programming Interface의 약자로, 소프트웨어 간 상호작용을 위한 인터페이스입니다.',
-        'PostgreSQL': '오픈소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다.',
-        'React': 'Facebook에서 개발한 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다.'
-      };
-
-      UIComponents.showToast(explanations[term] || '설명을 불러오는 중...', 'info', 5000);
-    }
-
-    // 섹션 편집 토글
-    function toggleEdit(sectionId) {
-      const contentEl = document.getElementById(`content-${sectionId}`);
-      const isEditable = contentEl.getAttribute('contenteditable') === 'true';
-
-      contentEl.setAttribute('contenteditable', !isEditable);
-
-      if (!isEditable) {
-        contentEl.focus();
-        UIComponents.showToast('수정 모드 활성화', 'info');
-      } else {
-        // 저장
-        const section = templateData.sections.find(s => s.id === sectionId);
-        if (section) {
-          section.content = contentEl.textContent;
-        }
-        UIComponents.showToast('변경사항이 저장되었습니다', 'success');
+    // 용어 검색
+    function searchTerms(query) {
+      if (!query || query.trim() === '') {
+        renderTerms(TERMINOLOGY);
+        return;
       }
+
+      const lowerQuery = query.toLowerCase();
+      const filtered = TERMINOLOGY.filter(term =>
+        term.name.toLowerCase().includes(lowerQuery) ||
+        term.definition.toLowerCase().includes(lowerQuery) ||
+        term.category.toLowerCase().includes(lowerQuery)
+      );
+
+      renderTerms(filtered);
     }
 
-    // 섹션 검증 토글
-    function toggleVerify(sectionId, checked) {
-      const section = templateData.sections.find(s => s.id === sectionId);
-      if (section) {
-        section.verified = checked;
-        section.verifiedBy = checked ? [currentUser.name] : [];
-      }
-      renderSections();
-      UIComponents.showToast(checked ? '섹션이 검증되었습니다' : '검증이 취소되었습니다', checked ? 'success' : 'info');
-    }
+    // 용어 상세 보기
+    function showTermDetail(termId) {
+      const term = TERMINOLOGY.find(t => t.id === termId);
+      if (!term) return;
 
-    // AI 개선
-    function improveSection(sectionId) {
-      UIComponents.showLoading('AI가 내용을 개선하고 있습니다...');
-
-      setTimeout(() => {
-        UIComponents.hideLoading();
-        UIComponents.showToast('AI 개선이 완료되었습니다', 'success');
-      }, 2000);
-    }
-
-    // 녹음 일시정지/재개
-    function pauseRecording() {
-      isPaused = !isPaused;
-      const btn = document.getElementById('pauseBtn');
-      const indicator = document.querySelector('.recording-status');
-
-      if (isPaused) {
-        btn.innerHTML = '<span class="material-symbols-outlined">play_arrow</span> 재개';
-        indicator.style.background = 'var(--gray-200)';
-        indicator.style.color = 'var(--gray-600)';
-        indicator.querySelector('span:last-child').textContent = '일시정지';
-        UIComponents.showToast('녹음이 일시정지되었습니다', 'info');
-      } else {
-        btn.innerHTML = '<span class="material-symbols-outlined">pause</span> 일시정지';
-        indicator.style.background = 'var(--error-bg)';
-        indicator.style.color = 'var(--error)';
-        indicator.querySelector('span:last-child').textContent = '녹음 중';
-        UIComponents.showToast('녹음이 재개되었습니다', 'success');
-      }
-    }
-
-    // 수동 메모 추가
-    function addManualNote() {
-      const note = prompt('추가할 메모를 입력하세요:');
-      if (note && note.trim()) {
-        UIComponents.showToast('메모가 추가되었습니다', 'success');
-        // 실제로는 해당 섹션에 추가
-      }
-    }
-
-    // 메뉴 표시
-    function showMenu() {
-      UIComponents.showModal({
-        title: '회의 설정',
-        content: `
-          <div class="d-flex flex-column gap-2">
-            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); viewParticipants()">
-              <span class="material-symbols-outlined">group</span>
-              참석자 목록
-            </button>
-            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); viewKeywords()">
-              <span class="material-symbols-outlined">sell</span>
-              주요 키워드
-            </button>
-            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); viewStatistics()">
-              <span class="material-symbols-outlined">bar_chart</span>
-              발언 통계
-            </button>
-          </div>
-        `,
-        footer: '<button class="btn btn-secondary" onclick="closeModal()">닫기</button>',
-        onClose: () => {}
-      });
-    }
-
-    // 참석자 목록 표시
-    function viewParticipants() {
-      UIComponents.showToast('참석자: ' + DUMMY_USERS.slice(0, 3).map(u => u.name).join(', '), 'info', 3000);
-    }
-
-    // 주요 키워드 표시
-    function viewKeywords() {
-      UIComponents.showToast('주요 키워드: Mobile First, AI, 프로젝트, 개발', 'info', 3000);
-    }
-
-    // 발언 통계 표시
-    function viewStatistics() {
-      UIComponents.showToast('발언 통계: 김철수 40%, 이영희 35%, 박민수 25%', 'info', 3000);
-    }
-
-    // 모달 닫기
-    function closeModal() {
-      const modal = document.querySelector('.modal-overlay');
-      if (modal) modal.remove();
-    }
-
-    // 회의 종료
-    function endMeeting() {
-      UIComponents.confirm(
-        '회의를 종료하시겠습니까? 회의록이 저장됩니다.',
-        () => {
-          clearInterval(elapsedInterval);
-
-          // 회의록 저장
-          const duration = Date.now() - startTime;
-          const meetingData = {
-            id: meetingId,
-            title: document.getElementById('meetingTitle').textContent || '제목 없는 회의',
-            date: new Date().toISOString().split('T')[0],
-            startTime: new Date(startTime).toTimeString().slice(0, 5),
-            endTime: new Date().toTimeString().slice(0, 5),
-            duration: duration,
-            location: '온라인',
-            attendees: DUMMY_USERS.slice(0, 3).map(u => u.name),
-            template: templateData.type,
-            status: 'draft',
-            sections: templateData.sections,
-            createdBy: currentUser.id,
-            createdAt: new Date(startTime).toISOString(),
-            updatedAt: new Date().toISOString()
-          };
-
-          StorageManager.addMeeting(meetingData);
-          localStorage.setItem('current_meeting', JSON.stringify(meetingData));
-
-          UIComponents.showToast('회의가 종료되었습니다', 'success');
-
-          setTimeout(() => {
-            NavigationHelper.navigate('MEETING_END', { meetingId });
-          }, 1000);
-        },
-        () => {}
+      window.MeetingApp.Toast.show(
+        `📚 ${term.name}\n\n${term.definition}\n\n${term.context}`,
+        'info',
+        5000
       );
     }
 
-    // 초기 렌더링
-    renderSections();
+    // 검색 입력 이벤트
+    const searchInput = document.getElementById('termSearchInput');
+    if (searchInput) {
+      searchInput.addEventListener('input', (e) => {
+        searchTerms(e.target.value);
+      });
+    }
 
-    // 실시간 발언 시뮬레이션
-    const speeches = [
-      { speaker: '김철수', text: '프로젝트 킥오프 회의를 시작하겠습니다...' },
-      { speaker: '이영희', text: '개발 일정에 대해 의견을 드리겠습니다...' },
-      { speaker: '박민수', text: '디자인 시안은 다음 주까지 준비하겠습니다...' }
-    ];
+    // 탭 전환
+    const tabs = document.querySelectorAll('.side-tab');
+    const tabContents = document.querySelectorAll('.tab-content');
+
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const targetTab = tab.getAttribute('data-tab');
+
+        tabs.forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+
+        tabContents.forEach(content => {
+          if (content.getAttribute('data-content') === targetTab) {
+            content.style.display = 'block';
+
+            // 용어 사전 탭 열 때 초기 렌더링
+            if (targetTab === 'terms' && !content.dataset.rendered) {
+              renderTerms(TERMINOLOGY);
+              content.dataset.rendered = 'true';
+            }
+          } else {
+            content.style.display = 'none';
+          }
+        });
+      });
+    });
+
+    // 사이드 패널 토글 (모바일)
+    const toggleBtn = document.getElementById('toggleSidePanel');
+    const sidePanel = document.getElementById('sidePanel');
+
+    if (toggleBtn) {
+      toggleBtn.addEventListener('click', () => {
+        sidePanel.classList.toggle('open');
+      });
+    }
+
+    // 녹음 시간 업데이트
+    let seconds = 0;
+    const recordingTimeEl = document.getElementById('recordingTime');
 
-    let speechIndex = 0;
     setInterval(() => {
-      const speech = speeches[speechIndex % speeches.length];
-      document.getElementById('currentSpeaker').textContent = speech.speaker;
-      document.getElementById('liveText').textContent = speech.text;
-      speechIndex++;
-    }, 5000);
+      seconds++;
+      const mins = Math.floor(seconds / 60);
+      const secs = seconds % 60;
+      recordingTimeEl.textContent = `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    }, 1000);
 
-    // 페이지 이탈 방지
-    window.addEventListener('beforeunload', (e) => {
-      e.preventDefault();
-      e.returnValue = '';
+    // 자동 저장 시뮬레이션
+    const editorTextarea = document.getElementById('meetingContent');
+    let saveTimeout;
+
+    editorTextarea.addEventListener('input', () => {
+      clearTimeout(saveTimeout);
+      saveTimeout = setTimeout(() => {
+        console.log('자동 저장됨');
+      }, 2000);
     });
   </script>
 </body>
diff --git a/design/uiux/prototype/06-검증완료.html b/design/uiux/prototype/06-검증완료.html
index 8167eca..e818a51 100644
--- a/design/uiux/prototype/06-검증완료.html
+++ b/design/uiux/prototype/06-검증완료.html
@@ -5,215 +5,179 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>검증 완료 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .completion-icon {
+      text-align: center;
+      font-size: 80px;
+      margin-bottom: var(--spacing-6);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-3);
+      text-align: center;
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+      text-align: center;
+      margin-bottom: var(--spacing-8);
+    }
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: var(--spacing-4);
+      margin-bottom: var(--spacing-8);
+    }
+    .stat-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-5);
+      text-align: center;
+    }
+    .stat-value {
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-primary-main);
+      margin-bottom: var(--spacing-2);
+    }
+    .stat-label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+    .summary-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+    }
+    .summary-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+    .keyword-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-2);
+    }
+    .keyword-tag {
+      padding: var(--spacing-2) var(--spacing-3);
+      background-color: var(--color-primary-light);
+      color: var(--color-primary-dark);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+    .action-buttons {
+      display: flex;
+      gap: var(--spacing-3);
+      justify-content: center;
+    }
+    @media (max-width: 767px) {
+      .completion-icon { font-size: 60px; }
+      .page-title { font-size: var(--font-size-h2); }
+      .stats-grid { grid-template-columns: repeat(2, 1fr); }
+      .action-buttons { flex-direction: column; }
+      .action-buttons .btn { width: 100%; }
+    }
+  </style>
 </head>
 <body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <button class="btn-icon" onclick="NavigationHelper.goBack()" aria-label="뒤로가기">
-        <span class="material-symbols-outlined">arrow_back</span>
-      </button>
-      <h1 class="header-title">검증 완료</h1>
-      <div></div>
+  <div class="page-container">
+    <div class="completion-icon">✅</div>
+    <h1 class="page-title">AI 검증이 완료되었습니다</h1>
+    <p class="page-subtitle">회의 내용이 분석되었습니다. 통계를 확인하고 회의를 종료하세요</p>
+
+    <!-- 통계 -->
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-value">45분</div>
+        <div class="stat-label">회의 시간</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">3명</div>
+        <div class="stat-label">참석자</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">12회</div>
+        <div class="stat-label">발언 횟수</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value">5개</div>
+        <div class="stat-label">Todo 생성</div>
+      </div>
     </div>
 
-    <!-- 메인 컨텐츠 -->
-    <div class="content">
-      <!-- 진행률 바 -->
-      <div class="card mb-4">
-        <h3 class="text-h5 mb-3">전체 검증 진행률</h3>
-        <div class="d-flex align-center gap-3 mb-2">
-          <div style="flex: 1;">
-            <div class="progress-bar" style="height: 8px;">
-              <div class="progress-fill" id="progressFill" style="width: 0%;"></div>
-            </div>
-          </div>
-          <span class="text-h5" id="progressPercent">0%</span>
+    <!-- 주요 키워드 -->
+    <div class="summary-card">
+      <h2 class="summary-title">주요 키워드</h2>
+      <div class="keyword-list">
+        <span class="keyword-tag">신규 기능</span>
+        <span class="keyword-tag">개발 일정</span>
+        <span class="keyword-tag">API 설계</span>
+        <span class="keyword-tag">예산</span>
+        <span class="keyword-tag">테스트</span>
+        <span class="keyword-tag">배포</span>
+        <span class="keyword-tag">마케팅</span>
+      </div>
+    </div>
+
+    <!-- 발언 분포 -->
+    <div class="summary-card">
+      <h2 class="summary-title">발언 분포</h2>
+      <div style="margin-bottom: var(--spacing-3);">
+        <div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-1);">
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">김민준</span>
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">5회 (42%)</span>
+        </div>
+        <div style="height: 8px; background-color: var(--color-gray-200); border-radius: var(--radius-sm); overflow: hidden;">
+          <div style="width: 42%; height: 100%; background-color: var(--color-primary-main);"></div>
         </div>
-        <p class="text-body-sm text-gray" id="progressText">0 / 0 섹션 검증 완료</p>
       </div>
+      <div style="margin-bottom: var(--spacing-3);">
+        <div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-1);">
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">박서연</span>
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">4회 (33%)</span>
+        </div>
+        <div style="height: 8px; background-color: var(--color-gray-200); border-radius: var(--radius-sm); overflow: hidden;">
+          <div style="width: 33%; height: 100%; background-color: var(--color-secondary-main);"></div>
+        </div>
+      </div>
+      <div>
+        <div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-1);">
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">이준호</span>
+          <span style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">3회 (25%)</span>
+        </div>
+        <div style="height: 8px; background-color: var(--color-gray-200); border-radius: var(--radius-sm); overflow: hidden;">
+          <div style="width: 25%; height: 100%; background-color: var(--color-info-main);"></div>
+        </div>
+      </div>
+    </div>
 
-      <!-- 섹션 리스트 -->
-      <h3 class="text-h4 mb-4">섹션별 검증 상태</h3>
-      <div id="sectionList">
-        <!-- JavaScript로 동적 생성 -->
-      </div>
-
-      <!-- 하단 액션 -->
-      <div class="mt-6">
-        <button class="btn btn-primary w-full mb-2" id="completeBtn" onclick="completeVerification()" disabled>
-          모두 검증 완료
-        </button>
-        <button class="btn btn-secondary w-full" onclick="NavigationHelper.goBack()">
-          나중에 하기
-        </button>
-      </div>
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button class="btn btn-secondary" onclick="history.back()">회의로 돌아가기</button>
+      <button class="btn btn-primary" onclick="window.location.href='07-회의종료.html'">
+        회의 종료하기
+      </button>
     </div>
   </div>
 
   <script src="common.js"></script>
   <script>
-    if (!NavigationHelper.requireAuth()) {}
-
-    const currentUser = StorageManager.getCurrentUser();
-    const meetingId = NavigationHelper.getQueryParam('meetingId');
-    let meeting = meetingId ? StorageManager.getMeetingById(meetingId) : JSON.parse(localStorage.getItem('current_meeting') || 'null');
-
-    if (!meeting) {
-      UIComponents.showToast('회의 정보를 찾을 수 없습니다', 'error');
-      setTimeout(() => NavigationHelper.navigate('DASHBOARD'), 2000);
-    }
-
-    let sections = meeting ? [...meeting.sections] : [];
-
-    // 섹션 렌더링
-    function renderSections() {
-      const container = document.getElementById('sectionList');
-
-      container.innerHTML = sections.map(section => {
-        const isVerified = section.verified || false;
-        const verifiers = section.verifiedBy || [];
-        const isCreator = meeting.createdBy === currentUser.id;
-
-        return `
-          <div class="card mb-3" style="border-left: 4px solid ${isVerified ? 'var(--success)' : 'var(--gray-300)'};">
-            <div class="d-flex justify-between align-center mb-3">
-              <div class="d-flex align-center gap-2">
-                <span class="material-symbols-outlined" style="color: ${isVerified ? 'var(--success)' : 'var(--gray-400)'}; font-size: 24px;">
-                  ${isVerified ? 'check_circle' : 'radio_button_unchecked'}
-                </span>
-                <h4 class="text-h5">${section.name}</h4>
-              </div>
-              ${section.locked && isCreator ? '<span class="material-symbols-outlined" style="color: var(--gray-600);">lock</span>' : ''}
-            </div>
-
-            <div class="d-flex align-center gap-2 mb-3">
-              ${verifiers.length > 0 ? verifiers.map(name => UIComponents.createAvatar(name, 28)).join('') : '<p class="text-caption text-gray">아직 검증되지 않았습니다</p>'}
-            </div>
-
-            <div class="d-flex gap-2">
-              <button
-                class="btn ${isVerified ? 'btn-secondary' : 'btn-primary'} btn-sm"
-                onclick="toggleSectionVerify('${section.id}')"
-                ${section.locked ? 'disabled' : ''}
-              >
-                ${isVerified ? '검증 취소' : '검증 완료'}
-              </button>
-              ${isCreator && isVerified ? `
-                <button class="btn btn-text btn-sm" onclick="toggleSectionLock('${section.id}')">
-                  <span class="material-symbols-outlined">${section.locked ? 'lock_open' : 'lock'}</span>
-                  ${section.locked ? '잠금 해제' : '잠금'}
-                </button>
-              ` : ''}
-            </div>
-          </div>
-        `;
-      }).join('');
-
-      updateProgress();
-    }
-
-    // 섹션 검증 토글
-    function toggleSectionVerify(sectionId) {
-      const section = sections.find(s => s.id === sectionId);
-      if (!section) return;
-
-      if (section.verified) {
-        // 검증 취소
-        section.verified = false;
-        section.verifiedBy = (section.verifiedBy || []).filter(name => name !== currentUser.name);
-        UIComponents.showToast('검증이 취소되었습니다', 'info');
-      } else {
-        // 검증 완료
-        UIComponents.confirm(
-          `"${section.name}" 섹션을 검증 완료 처리하시겠습니까?`,
-          () => {
-            section.verified = true;
-            section.verifiedBy = [...(section.verifiedBy || []), currentUser.name];
-            UIComponents.showToast('검증이 완료되었습니다', 'success');
-            renderSections();
-
-            // 회의록 업데이트
-            if (meeting) {
-              meeting.sections = sections;
-              StorageManager.updateMeeting(meeting.id, meeting);
-            }
-          },
-          () => {}
-        );
-        return;
-      }
-
-      renderSections();
-
-      // 회의록 업데이트
-      if (meeting) {
-        meeting.sections = sections;
-        StorageManager.updateMeeting(meeting.id, meeting);
-      }
-    }
-
-    // 섹션 잠금 토글 (회의 생성자만)
-    function toggleSectionLock(sectionId) {
-      const section = sections.find(s => s.id === sectionId);
-      if (!section || !section.verified) return;
-
-      section.locked = !section.locked;
-      UIComponents.showToast(
-        section.locked ? '섹션이 잠겼습니다. 더 이상 수정할 수 없습니다.' : '섹션 잠금이 해제되었습니다.',
-        section.locked ? 'warning' : 'info'
-      );
-
-      renderSections();
-
-      // 회의록 업데이트
-      if (meeting) {
-        meeting.sections = sections;
-        StorageManager.updateMeeting(meeting.id, meeting);
-      }
-    }
-
-    // 진행률 업데이트
-    function updateProgress() {
-      const total = sections.length;
-      const verified = sections.filter(s => s.verified).length;
-      const percent = total > 0 ? Math.round((verified / total) * 100) : 0;
-
-      document.getElementById('progressFill').style.width = `${percent}%`;
-      document.getElementById('progressPercent').textContent = `${percent}%`;
-      document.getElementById('progressText').textContent = `${verified} / ${total} 섹션 검증 완료`;
-
-      // 모두 검증 완료 버튼 활성화
-      const completeBtn = document.getElementById('completeBtn');
-      if (percent === 100) {
-        completeBtn.disabled = false;
-        completeBtn.classList.remove('btn-secondary');
-        completeBtn.classList.add('btn-primary');
-      } else {
-        completeBtn.disabled = true;
-        completeBtn.classList.add('btn-secondary');
-        completeBtn.classList.remove('btn-primary');
-      }
-    }
-
-    // 검증 완료
-    function completeVerification() {
-      UIComponents.confirm(
-        '모든 섹션이 검증되었습니다. 계속 진행하시겠습니까?',
-        () => {
-          UIComponents.showToast('검증이 완료되었습니다', 'success');
-
-          setTimeout(() => {
-            NavigationHelper.goBack();
-          }, 1000);
-        },
-        () => {}
-      );
-    }
-
-    // 초기 렌더링
-    renderSections();
+    MeetingApp.ready(() => {
+      console.log('검증 완료 페이지 로드됨');
+    });
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/07-회의종료.html b/design/uiux/prototype/07-회의종료.html
index f4b97d1..f8e7fd4 100644
--- a/design/uiux/prototype/07-회의종료.html
+++ b/design/uiux/prototype/07-회의종료.html
@@ -5,207 +5,108 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>회의 종료 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+      text-align: center;
+    }
+    .completion-icon {
+      font-size: 100px;
+      margin-bottom: var(--spacing-6);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-3);
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+      margin-bottom: var(--spacing-8);
+    }
+    .info-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+      text-align: left;
+    }
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      padding: var(--spacing-3) 0;
+      border-bottom: 1px solid var(--color-gray-100);
+    }
+    .info-item:last-child {
+      border-bottom: none;
+    }
+    .info-label {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-700);
+    }
+    .info-value {
+      color: var(--color-gray-900);
+      font-weight: var(--font-weight-semibold);
+    }
+    .action-buttons {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+    }
+    @media (max-width: 767px) {
+      .completion-icon { font-size: 80px; }
+      .page-title { font-size: var(--font-size-h2); }
+    }
+  </style>
 </head>
 <body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <h1 class="header-title">회의가 종료되었습니다</h1>
-      <div></div>
+  <div class="page-container">
+    <div class="completion-icon">🏁</div>
+    <h1 class="page-title">회의가 종료되었습니다</h1>
+    <p class="page-subtitle">회의록이 자동으로 저장되었습니다</p>
+
+    <!-- 회의 정보 -->
+    <div class="info-card">
+      <div class="info-item">
+        <span class="info-label">회의 제목</span>
+        <span class="info-value">2025년 1분기 제품 기획 회의</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">회의 시간</span>
+        <span class="info-value">45분</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">참석자</span>
+        <span class="info-value">3명</span>
+      </div>
+      <div class="info-item">
+        <span class="info-label">생성된 Todo</span>
+        <span class="info-value">5개</span>
+      </div>
     </div>
 
-    <!-- 메인 컨텐츠 -->
-    <div class="content">
-      <!-- 회의 정보 -->
-      <div class="card mb-4 text-center">
-        <div style="font-size: 48px; margin-bottom: 16px;">✅</div>
-        <h2 class="text-h3 mb-2" id="meetingTitle">회의 제목</h2>
-        <p class="text-body text-gray" id="meetingInfo">2025-10-21 10:00 ~ 11:30</p>
-      </div>
-
-      <!-- 회의 통계 -->
-      <div class="card mb-4">
-        <h3 class="text-h4 mb-4">회의 통계</h3>
-        <div class="d-flex justify-between mb-3">
-          <span class="text-body">회의 총 시간</span>
-          <span class="text-h5" id="totalTime">01:30:00</span>
-        </div>
-        <div class="d-flex justify-between mb-3">
-          <span class="text-body">참석자 수</span>
-          <span class="text-h5" id="attendeeCount">3명</span>
-        </div>
-        <div class="d-flex justify-between">
-          <span class="text-body">주요 키워드</span>
-          <div class="d-flex gap-1" style="flex-wrap: wrap;">
-            <span class="badge badge-status">Mobile First</span>
-            <span class="badge badge-status">AI</span>
-            <span class="badge badge-status">프로젝트</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- AI Todo 추출 결과 -->
-      <div class="card mb-4">
-        <div class="d-flex justify-between align-center mb-3">
-          <h3 class="text-h4">AI가 추출한 Todo</h3>
-          <button class="btn btn-text btn-sm" onclick="editTodos()">
-            <span class="material-symbols-outlined">edit</span>
-            수정
-          </button>
-        </div>
-        <div id="todoList">
-          <!-- JavaScript로 동적 생성 -->
-        </div>
-      </div>
-
-      <!-- 최종 확정 체크리스트 -->
-      <div class="card mb-4">
-        <h3 class="text-h4 mb-3">최종 확정 체크리스트</h3>
-        <label class="form-checkbox mb-2">
-          <input type="checkbox" id="check1" checked disabled>
-          <span>회의 제목 작성</span>
-        </label>
-        <label class="form-checkbox mb-2">
-          <input type="checkbox" id="check2" checked disabled>
-          <span>참석자 목록 작성</span>
-        </label>
-        <label class="form-checkbox mb-2">
-          <input type="checkbox" id="check3" checked disabled>
-          <span>주요 논의 내용 작성</span>
-        </label>
-        <label class="form-checkbox mb-2">
-          <input type="checkbox" id="check4" checked disabled>
-          <span>결정 사항 작성</span>
-        </label>
-      </div>
-
-      <!-- 액션 버튼 -->
-      <div class="d-flex flex-column gap-2">
-        <button class="btn btn-primary w-full" onclick="confirmMeeting()">
-          <span class="material-symbols-outlined">check_circle</span>
-          최종 회의록 확정
-        </button>
-        <button class="btn btn-secondary w-full" onclick="NavigationHelper.navigate('MEETING_SHARE', { meetingId: meeting.id })">
-          <span class="material-symbols-outlined">share</span>
-          회의록 공유하기
-        </button>
-        <button class="btn btn-text w-full" onclick="NavigationHelper.navigate('MEETING_EDIT', { id: meeting.id })">
-          회의록 수정하기
-        </button>
-        <button class="btn btn-text w-full" onclick="NavigationHelper.navigate('DASHBOARD')">
-          대시보드로 돌아가기
-        </button>
-      </div>
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button class="btn btn-primary" onclick="window.location.href='08-회의록공유.html'">
+        회의록 확정하기
+      </button>
+      <button class="btn btn-secondary" onclick="window.location.href='02-대시보드.html'">
+        대시보드로 이동
+      </button>
     </div>
   </div>
 
   <script src="common.js"></script>
   <script>
-    if (!NavigationHelper.requireAuth()) {}
-
-    const currentUser = StorageManager.getCurrentUser();
-    const meetingId = NavigationHelper.getQueryParam('meetingId');
-    let meeting = meetingId ? StorageManager.getMeetingById(meetingId) : JSON.parse(localStorage.getItem('current_meeting') || 'null');
-
-    if (!meeting) {
-      UIComponents.showToast('회의 정보를 찾을 수 없습니다', 'error');
-      setTimeout(() => NavigationHelper.navigate('DASHBOARD'), 2000);
-    }
-
-    // 회의 정보 표시
-    if (meeting) {
-      document.getElementById('meetingTitle').textContent = meeting.title;
-      document.getElementById('meetingInfo').textContent = `${Utils.formatDate(meeting.date)} ${meeting.startTime} ~ ${meeting.endTime}`;
-      document.getElementById('totalTime').textContent = Utils.formatDuration(meeting.duration || 5400000);
-      document.getElementById('attendeeCount').textContent = `${meeting.attendees?.length || 0}명`;
-    }
-
-    // AI Todo 추출 및 렌더링
-    function renderTodos() {
-      const todos = [
-        { content: '프로젝트 계획서 작성 및 공유', assignee: '김철수', dueDate: '2025-10-25', priority: 'high' },
-        { content: 'API 문서 작성', assignee: '이영희', dueDate: '2025-10-24', priority: 'high' },
-        { content: '디자인 시안 1차 검토', assignee: '박민수', dueDate: '2025-10-23', priority: 'medium' }
-      ];
-
-      const container = document.getElementById('todoList');
-      container.innerHTML = todos.map(todo => `
-        <div class="d-flex align-center gap-2 mb-3 p-3" style="background: var(--gray-50); border-radius: 8px;">
-          <span class="material-symbols-outlined" style="color: var(--primary-500);">check_box_outline_blank</span>
-          <div style="flex: 1;">
-            <p class="text-body">${todo.content}</p>
-            <div class="d-flex align-center gap-3 mt-1">
-              <span class="text-caption">👤 ${todo.assignee}</span>
-              <span class="text-caption">📅 ${Utils.formatDate(todo.dueDate)}</span>
-              ${todo.priority === 'high' ? '<span class="badge badge-priority-high">높음</span>' : '<span class="badge badge-priority-medium">보통</span>'}
-            </div>
-          </div>
-        </div>
-      `).join('');
-
-      // Todo 데이터 저장
-      todos.forEach(todo => {
-        const todoData = {
-          id: Utils.generateId('TODO'),
-          meetingId: meeting.id,
-          sectionId: 'SEC_todos',
-          content: todo.content,
-          assignee: todo.assignee,
-          assigneeId: DUMMY_USERS.find(u => u.name === todo.assignee)?.id || '',
-          dueDate: todo.dueDate,
-          priority: todo.priority,
-          status: 'in-progress',
-          completed: false,
-          createdAt: new Date().toISOString()
-        };
-
-        // 중복 체크 후 저장
-        const existing = StorageManager.getTodos().find(t =>
-          t.meetingId === meeting.id && t.content === todo.content
-        );
-        if (!existing) {
-          StorageManager.addTodo(todoData);
-        }
-      });
-    }
-
-    // Todo 수정
-    function editTodos() {
-      UIComponents.showToast('Todo 수정 기능은 Todo 관리 화면에서 이용하실 수 있습니다', 'info');
-      setTimeout(() => {
-        NavigationHelper.navigate('TODO_MANAGE');
-      }, 1500);
-    }
-
-    // 회의록 확정
-    function confirmMeeting() {
-      UIComponents.confirm(
-        '회의록을 최종 확정하시겠습니까? 확정 후에도 수정할 수 있습니다.',
-        () => {
-          if (meeting) {
-            meeting.status = 'confirmed';
-            meeting.confirmedAt = new Date().toISOString();
-            StorageManager.updateMeeting(meeting.id, meeting);
-
-            UIComponents.showToast('회의록이 최종 확정되었습니다', 'success');
-
-            // Todo 자동 할당 알림
-            setTimeout(() => {
-              UIComponents.showToast('Todo가 담당자에게 자동으로 할당되었습니다', 'info');
-            }, 1000);
-
-            setTimeout(() => {
-              NavigationHelper.navigate('MEETING_SHARE', { meetingId: meeting.id });
-            }, 2000);
-          }
-        },
-        () => {}
-      );
-    }
-
-    // 초기 렌더링
-    renderTodos();
+    MeetingApp.ready(() => {
+      console.log('회의 종료 페이지 로드됨');
+      // 회의 종료 알림
+      MeetingApp.Toast.success('회의가 성공적으로 종료되었습니다');
+    });
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/08-회의록공유.html b/design/uiux/prototype/08-회의록공유.html
index 8477563..6438105 100644
--- a/design/uiux/prototype/08-회의록공유.html
+++ b/design/uiux/prototype/08-회의록공유.html
@@ -5,248 +5,311 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>회의록 공유 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .success-icon {
+      text-align: center;
+      font-size: 80px;
+      margin-bottom: var(--spacing-6);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-3);
+      text-align: center;
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+      text-align: center;
+      margin-bottom: var(--spacing-8);
+    }
+    .share-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+    }
+    .share-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+    .share-option {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-3);
+      background: var(--color-gray-50);
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      transition: background-color var(--transition-fast);
+    }
+    .share-option:hover {
+      background: var(--color-gray-100);
+    }
+    .share-icon {
+      font-size: 32px;
+    }
+    .share-info {
+      flex: 1;
+    }
+    .share-label {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-1);
+    }
+    .share-desc {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+    .link-box {
+      display: flex;
+      gap: var(--spacing-2);
+      align-items: center;
+    }
+    .link-input {
+      flex: 1;
+      padding: var(--spacing-3) var(--spacing-4);
+      border: 1px solid var(--color-gray-300);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      background-color: var(--color-gray-50);
+      font-family: monospace;
+    }
+    .attendee-list {
+      margin-top: var(--spacing-4);
+    }
+    .attendee-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      background: var(--color-gray-50);
+      border-radius: var(--radius-md);
+    }
+    .attendee-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: var(--radius-full);
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: var(--font-weight-semibold);
+    }
+    .attendee-info {
+      flex: 1;
+    }
+    .attendee-name {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+    }
+    .attendee-email {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+    .sent-badge {
+      padding: var(--spacing-1) var(--spacing-3);
+      background-color: var(--color-success-light);
+      color: var(--color-success-dark);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-medium);
+    }
+    .action-buttons {
+      display: flex;
+      gap: var(--spacing-3);
+      justify-content: center;
+    }
+    @media (max-width: 767px) {
+      .success-icon { font-size: 60px; }
+      .page-title { font-size: var(--font-size-h2); }
+      .action-buttons { flex-direction: column; }
+      .action-buttons .btn { width: 100%; }
+      .link-box { flex-direction: column; }
+      .link-input { width: 100%; }
+    }
+  </style>
 </head>
 <body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <button class="btn-icon" onclick="NavigationHelper.goBack()" aria-label="뒤로가기">
-        <span class="material-symbols-outlined">arrow_back</span>
-      </button>
-      <h1 class="header-title">회의록 공유</h1>
-      <button class="btn btn-primary btn-sm" onclick="shareMinutes()">공유하기</button>
+  <div class="page-container">
+    <div class="success-icon">🎉</div>
+    <h1 class="page-title">회의록이 확정되었습니다</h1>
+    <p class="page-subtitle">이제 참석자들과 회의록을 공유하세요</p>
+
+    <!-- 공유 링크 -->
+    <div class="share-card">
+      <h2 class="share-title">공유 링크</h2>
+      <div class="link-box">
+        <input type="text" class="link-input" id="shareLink" value="https://meeting.example.com/share/m-001-abc123" readonly>
+        <button class="btn btn-primary" onclick="copyLink()">복사</button>
+      </div>
     </div>
 
-    <!-- 메인 컨텐츠 -->
-    <div class="content">
-      <form id="shareForm">
-        <!-- 공유 대상 -->
-        <div class="form-group">
-          <label class="form-label required">공유 대상</label>
-          <label class="form-checkbox mb-2">
-            <input type="radio" name="shareTarget" value="all" checked onchange="toggleAttendeeList()">
-            <span>참석자 전체</span>
-          </label>
-          <label class="form-checkbox">
-            <input type="radio" name="shareTarget" value="selected" onchange="toggleAttendeeList()">
-            <span>특정 참석자 선택</span>
-          </label>
-        </div>
+    <!-- 공유 방식 -->
+    <div class="share-card">
+      <h2 class="share-title">공유 방식 선택</h2>
 
-        <!-- 참석자 목록 (선택 시) -->
-        <div class="form-group" id="attendeeListGroup" style="display: none;">
-          <div id="attendeeList">
-            <!-- JavaScript로 동적 생성 -->
-          </div>
-        </div>
-
-        <!-- 공유 권한 -->
-        <div class="form-group">
-          <label for="sharePermission" class="form-label required">공유 권한</label>
-          <select id="sharePermission" class="form-select">
-            <option value="read" selected>읽기 전용</option>
-            <option value="comment">댓글 가능</option>
-            <option value="edit">편집 가능</option>
-          </select>
-        </div>
-
-        <!-- 공유 방식 -->
-        <div class="form-group">
-          <label class="form-label">공유 방식</label>
-          <label class="form-checkbox mb-2">
-            <input type="checkbox" id="sendEmail" checked>
-            <span>이메일 발송</span>
-          </label>
-          <button type="button" class="btn btn-secondary btn-sm w-full" onclick="copyLink()">
-            <span class="material-symbols-outlined">link</span>
-            링크 복사
-          </button>
-        </div>
-
-        <!-- 링크 보안 설정 -->
-        <div class="card mb-4">
-          <h3 class="text-h5 mb-3">링크 보안 설정</h3>
-
-          <label class="form-checkbox mb-3">
-            <input type="checkbox" id="enableExpiry" onchange="toggleExpiryDate()">
-            <span>유효기간 설정</span>
-          </label>
-
-          <div id="expiryDateGroup" style="display: none;">
-            <select id="expiryPeriod" class="form-select mb-3">
-              <option value="7">7일</option>
-              <option value="30" selected>30일</option>
-              <option value="90">90일</option>
-              <option value="unlimited">무제한</option>
-            </select>
-          </div>
-
-          <label class="form-checkbox mb-3">
-            <input type="checkbox" id="enablePassword" onchange="togglePassword()">
-            <span>비밀번호 설정</span>
-          </label>
-
-          <div id="passwordGroup" style="display: none;">
-            <input
-              type="password"
-              id="linkPassword"
-              class="form-input"
-              placeholder="링크 접근 비밀번호"
-            >
-          </div>
-        </div>
-      </form>
-
-      <!-- 공유 이력 -->
-      <div class="card">
-        <h3 class="text-h4 mb-3">공유 이력</h3>
-        <div id="shareHistory">
-          <p class="text-body-sm text-gray text-center" style="padding: 24px 0;">아직 공유 이력이 없습니다</p>
+      <div class="share-option" onclick="shareViaEmail()">
+        <div class="share-icon">📧</div>
+        <div class="share-info">
+          <div class="share-label">이메일로 공유</div>
+          <div class="share-desc">참석자들에게 이메일을 발송합니다</div>
         </div>
       </div>
+
+      <div class="share-option" onclick="shareViaSlack()">
+        <div class="share-icon">💬</div>
+        <div class="share-info">
+          <div class="share-label">슬랙으로 공유</div>
+          <div class="share-desc">슬랙 채널에 회의록을 공유합니다</div>
+        </div>
+      </div>
+
+      <div class="share-option" onclick="downloadPDF()">
+        <div class="share-icon">📄</div>
+        <div class="share-info">
+          <div class="share-label">PDF로 다운로드</div>
+          <div class="share-desc">회의록을 PDF 파일로 저장합니다</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 생성된 Todo -->
+    <div class="share-card">
+      <h2 class="share-title">생성된 Todo (3개)</h2>
+      <div class="attendee-list">
+        <div class="attendee-item">
+          <div style="display: flex; align-items: center; gap: var(--spacing-3); flex: 1;">
+            <div class="attendee-avatar" style="background-color: var(--color-primary-main);">이</div>
+            <div class="attendee-info">
+              <div class="attendee-name">API 명세서 작성</div>
+              <div class="attendee-email" style="display: flex; align-items: center; gap: var(--spacing-2);">
+                <span>담당: 이준호</span> | <span>📅 3월 25일</span>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);">
+            <span class="sent-badge" style="background-color: var(--color-warning-light); color: var(--color-warning-dark);">진행중 60%</span>
+            <a href="09-Todo관리.html" style="font-size: var(--font-size-caption); color: var(--color-primary-main); text-decoration: none;">Todo 보기 →</a>
+          </div>
+        </div>
+        <div class="attendee-item">
+          <div style="display: flex; align-items: center; gap: var(--spacing-3); flex: 1;">
+            <div class="attendee-avatar" style="background-color: var(--color-info-main);">최</div>
+            <div class="attendee-info">
+              <div class="attendee-name">UI 프로토타입 완성</div>
+              <div class="attendee-email" style="display: flex; align-items: center; gap: var(--spacing-2);">
+                <span>담당: 최유진</span> | <span>📅 3월 15일</span>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);">
+            <span class="sent-badge">완료 100%</span>
+            <a href="09-Todo관리.html" style="font-size: var(--font-size-caption); color: var(--color-primary-main); text-decoration: none;">Todo 보기 →</a>
+          </div>
+        </div>
+        <div class="attendee-item">
+          <div style="display: flex; align-items: center; gap: var(--spacing-3); flex: 1;">
+            <div class="attendee-avatar" style="background-color: var(--color-secondary-main);">박</div>
+            <div class="attendee-info">
+              <div class="attendee-name">예산 편성안 검토</div>
+              <div class="attendee-email" style="display: flex; align-items: center; gap: var(--spacing-2);">
+                <span>담당: 박서연</span> | <span>📅 3월 20일</span>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-1);">
+            <span class="sent-badge" style="background-color: var(--color-error-light); color: var(--color-error-dark);">지연 30%</span>
+            <a href="09-Todo관리.html" style="font-size: var(--font-size-caption); color: var(--color-primary-main); text-decoration: none;">Todo 보기 →</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 참석자 목록 -->
+    <div class="share-card">
+      <h2 class="share-title">참석자 (3명)</h2>
+      <div class="attendee-list">
+        <div class="attendee-item">
+          <div class="attendee-avatar">김</div>
+          <div class="attendee-info">
+            <div class="attendee-name">김민준</div>
+            <div class="attendee-email">minjun.kim@example.com</div>
+          </div>
+          <span class="sent-badge">발송 완료</span>
+        </div>
+        <div class="attendee-item">
+          <div class="attendee-avatar" style="background-color: var(--color-secondary-main);">박</div>
+          <div class="attendee-info">
+            <div class="attendee-name">박서연</div>
+            <div class="attendee-email">seoyeon.park@example.com</div>
+          </div>
+          <span class="sent-badge">발송 완료</span>
+        </div>
+        <div class="attendee-item">
+          <div class="attendee-avatar" style="background-color: var(--color-info-main);">이</div>
+          <div class="attendee-info">
+            <div class="attendee-name">이준호</div>
+            <div class="attendee-email">junho.lee@example.com</div>
+          </div>
+          <span class="sent-badge">발송 완료</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button class="btn btn-secondary" onclick="window.location.href='02-대시보드.html'">
+        대시보드로 이동
+      </button>
+      <button class="btn btn-primary" onclick="window.location.href='09-Todo관리.html'">
+        Todo 관리하기
+      </button>
     </div>
   </div>
 
   <script src="common.js"></script>
   <script>
-    if (!NavigationHelper.requireAuth()) {}
-
-    const currentUser = StorageManager.getCurrentUser();
-    const meetingId = NavigationHelper.getQueryParam('meetingId');
-    const meeting = meetingId ? StorageManager.getMeetingById(meetingId) : null;
-
-    if (!meeting) {
-      UIComponents.showToast('회의 정보를 찾을 수 없습니다', 'error');
-      setTimeout(() => NavigationHelper.navigate('DASHBOARD'), 2000);
-    }
-
-    // 참석자 목록 토글
-    function toggleAttendeeList() {
-      const selected = document.querySelector('input[name="shareTarget"]:checked').value === 'selected';
-      document.getElementById('attendeeListGroup').style.display = selected ? 'block' : 'none';
-
-      if (selected && meeting) {
-        renderAttendeeList();
-      }
-    }
-
-    // 참석자 목록 렌더링
-    function renderAttendeeList() {
-      const container = document.getElementById('attendeeList');
-      container.innerHTML = meeting.attendees.map((attendee, index) => `
-        <label class="form-checkbox mb-2">
-          <input type="checkbox" name="attendee" value="${attendee}" checked>
-          <span>${attendee}</span>
-        </label>
-      `).join('');
-    }
-
-    // 유효기간 토글
-    function toggleExpiryDate() {
-      const enabled = document.getElementById('enableExpiry').checked;
-      document.getElementById('expiryDateGroup').style.display = enabled ? 'block' : 'none';
-    }
-
-    // 비밀번호 토글
-    function togglePassword() {
-      const enabled = document.getElementById('enablePassword').checked;
-      document.getElementById('passwordGroup').style.display = enabled ? 'block' : 'none';
-    }
-
-    // 링크 복사
     function copyLink() {
-      const link = `https://meeting.example.com/share/${meeting.id}`;
-
-      // 클립보드 복사
-      navigator.clipboard.writeText(link).then(() => {
-        UIComponents.showToast('링크가 복사되었습니다', 'success');
-      }).catch(() => {
-        // Fallback
-        const tempInput = document.createElement('input');
-        tempInput.value = link;
-        document.body.appendChild(tempInput);
-        tempInput.select();
-        document.execCommand('copy');
-        document.body.removeChild(tempInput);
-        UIComponents.showToast('링크가 복사되었습니다', 'success');
-      });
+      const linkInput = document.getElementById('shareLink');
+      linkInput.select();
+      document.execCommand('copy');
+      MeetingApp.Toast.success('링크가 복사되었습니다');
     }
 
-    // 회의록 공유
-    function shareMinutes() {
-      const shareTarget = document.querySelector('input[name="shareTarget"]:checked').value;
-      const sharePermission = document.getElementById('sharePermission').value;
-      const sendEmail = document.getElementById('sendEmail').checked;
-      const enableExpiry = document.getElementById('enableExpiry').checked;
-      const enablePassword = document.getElementById('enablePassword').checked;
-
-      let recipients = [];
-      if (shareTarget === 'all') {
-        recipients = meeting.attendees;
-      } else {
-        const checked = Array.from(document.querySelectorAll('input[name="attendee"]:checked'));
-        recipients = checked.map(input => input.value);
-      }
-
-      if (recipients.length === 0) {
-        UIComponents.showToast('공유할 대상을 선택해주세요', 'error');
-        return;
-      }
-
-      const shareData = {
-        meetingId: meeting.id,
-        recipients: recipients,
-        permission: sharePermission,
-        sendEmail: sendEmail,
-        expiry: enableExpiry ? document.getElementById('expiryPeriod').value : null,
-        password: enablePassword ? document.getElementById('linkPassword').value : null,
-        sharedAt: new Date().toISOString(),
-        sharedBy: currentUser.name
-      };
-
-      UIComponents.showLoading('회의록을 공유하는 중...');
-
+    function shareViaEmail() {
+      MeetingApp.Loading.show();
       setTimeout(() => {
-        // 공유 처리 (시뮬레이션)
-        meeting.sharedWith = recipients.map(name => {
-          const user = DUMMY_USERS.find(u => u.name === name);
-          return user ? user.id : '';
-        }).filter(id => id);
-
-        StorageManager.updateMeeting(meeting.id, meeting);
-
-        UIComponents.hideLoading();
-
-        if (sendEmail) {
-          UIComponents.showToast(`${recipients.length}명에게 이메일이 발송되었습니다`, 'success');
-        } else {
-          UIComponents.showToast('회의록이 공유되었습니다', 'success');
-        }
-
-        // 공유 이력 추가
-        addShareHistory(shareData);
-
-        setTimeout(() => {
-          NavigationHelper.navigate('DASHBOARD');
-        }, 2000);
+        MeetingApp.Loading.hide();
+        MeetingApp.Toast.success('이메일이 발송되었습니다');
       }, 1500);
     }
 
-    // 공유 이력 추가
-    function addShareHistory(shareData) {
-      const container = document.getElementById('shareHistory');
-      const html = `
-        <div class="mb-3 p-3" style="background: var(--gray-50); border-radius: 8px;">
-          <div class="d-flex justify-between align-center mb-2">
-            <span class="text-body">${shareData.sharedAt.split('T')[0]} ${shareData.sharedAt.split('T')[1].slice(0, 5)}</span>
-            <span class="badge badge-status">${shareData.permission === 'read' ? '읽기 전용' : shareData.permission === 'comment' ? '댓글 가능' : '편집 가능'}</span>
-          </div>
-          <p class="text-body-sm">대상: ${shareData.recipients.join(', ')}</p>
-        </div>
-      `;
+    function shareViaSlack() {
+      MeetingApp.Loading.show();
+      setTimeout(() => {
+        MeetingApp.Loading.hide();
+        MeetingApp.Toast.success('슬랙에 공유되었습니다');
+      }, 1500);
+    }
 
-      container.innerHTML = html + container.innerHTML;
+    function downloadPDF() {
+      MeetingApp.Toast.info('PDF 파일을 준비 중입니다...');
+      setTimeout(() => {
+        MeetingApp.Toast.success('PDF 다운로드가 시작되었습니다');
+      }, 1000);
     }
   </script>
 </body>
diff --git a/design/uiux/prototype/09-Todo관리.html b/design/uiux/prototype/09-Todo관리.html
index 611f3fb..f467203 100644
--- a/design/uiux/prototype/09-Todo관리.html
+++ b/design/uiux/prototype/09-Todo관리.html
@@ -5,276 +5,465 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Todo 관리 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .page-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--spacing-8);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+    }
+    .view-toggle {
+      display: flex;
+      gap: var(--spacing-2);
+    }
+    .view-btn {
+      padding: var(--spacing-2) var(--spacing-4);
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-300);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-body-small);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+    .view-btn.active {
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      border-color: var(--color-primary-main);
+    }
+    .kanban-board {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--spacing-6);
+    }
+    .kanban-column {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-4);
+      min-height: 500px;
+    }
+    .column-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--spacing-4);
+      padding-bottom: var(--spacing-3);
+      border-bottom: 2px solid var(--color-gray-200);
+    }
+    .column-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+    }
+    .column-count {
+      padding: var(--spacing-1) var(--spacing-2);
+      background-color: var(--color-gray-200);
+      color: var(--color-gray-700);
+      border-radius: var(--radius-md);
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-medium);
+    }
+    .todo-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-3);
+      cursor: grab;
+      transition: all var(--transition-fast);
+    }
+    .todo-card:hover {
+      box-shadow: var(--shadow-md);
+      transform: translateY(-2px);
+    }
+    .todo-card.priority-high {
+      border-left: 4px solid var(--color-error-main);
+    }
+    .todo-card.priority-medium {
+      border-left: 4px solid var(--color-warning-main);
+    }
+    .todo-title {
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .todo-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      margin-bottom: var(--spacing-3);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+    .todo-assignee {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+    .avatar-sm {
+      width: 24px;
+      height: 24px;
+      border-radius: var(--radius-full);
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-semibold);
+    }
+    .todo-duedate {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-1);
+    }
+    .todo-duedate.overdue {
+      color: var(--color-error-main);
+      font-weight: var(--font-weight-medium);
+    }
+    .todo-progress {
+      height: 4px;
+      background-color: var(--color-gray-200);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .todo-progress-bar {
+      height: 100%;
+      background-color: var(--color-primary-main);
+      transition: width var(--transition-slow);
+    }
+    .todo-source {
+      margin-top: var(--spacing-3);
+      padding-top: var(--spacing-3);
+      border-top: 1px dashed var(--color-gray-200);
+      font-size: var(--font-size-caption);
+      color: var(--color-gray-500);
+    }
+    .todo-source-link {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      color: var(--color-primary-main);
+      text-decoration: none;
+      transition: color var(--transition-fast);
+      cursor: pointer;
+    }
+    .todo-source-link:hover {
+      color: var(--color-primary-dark);
+      text-decoration: underline;
+    }
+    .list-view {
+      display: none;
+    }
+    .list-view.active {
+      display: block;
+    }
+    .todo-list-item {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-3);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+    }
+    .todo-checkbox {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--color-gray-300);
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+    }
+    .todo-list-content {
+      flex: 1;
+    }
+    @media (max-width: 1023px) {
+      .kanban-board {
+        grid-template-columns: 1fr;
+      }
+    }
+    @media (max-width: 767px) {
+      .page-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-4);
+      }
+      .page-title { font-size: var(--font-size-h2); }
+    }
+  </style>
 </head>
 <body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <h1 class="header-title">내 Todo</h1>
-      <button class="btn-icon" onclick="showFilter()" aria-label="필터">
-        <span class="material-symbols-outlined">filter_list</span>
-      </button>
+  <div class="page-container">
+    <div class="page-header">
+      <div style="display: flex; align-items: center; gap: var(--spacing-3);">
+        <button class="btn btn-secondary" onclick="window.location.href='02-대시보드.html'">← 대시보드</button>
+        <h1 class="page-title">Todo 관리</h1>
+      </div>
+      <div style="display: flex; gap: var(--spacing-3); align-items: center;">
+        <div class="view-toggle">
+          <button class="view-btn active" data-view="kanban">칸반</button>
+          <button class="view-btn" data-view="list">리스트</button>
+        </div>
+        <button class="btn btn-primary" onclick="addTodo()">+ 새 Todo</button>
+      </div>
     </div>
 
-    <!-- 메인 컨텐츠 -->
-    <div class="content" style="padding-bottom: 120px;">
-      <!-- 통계 카드 -->
-      <div class="card mb-4">
-        <div class="d-flex justify-between align-center mb-4">
-          <div style="flex: 1;">
-            <div class="d-flex align-center gap-4">
-              <div>
-                <h3 class="text-h2" id="totalCount">0</h3>
-                <p class="text-caption text-gray">전체 Todo</p>
-              </div>
-              <div>
-                <h3 class="text-h2" style="color: var(--success);" id="completedCount">0</h3>
-                <p class="text-caption text-gray">완료</p>
-              </div>
-              <div>
-                <h3 class="text-h2" style="color: var(--warning);" id="dueSoonCount">0</h3>
-                <p class="text-caption text-gray">마감 임박</p>
-              </div>
+    <!-- 칸반 보드 뷰 -->
+    <div class="kanban-board" id="kanbanView">
+      <!-- 시작 전 -->
+      <div class="kanban-column">
+        <div class="column-header">
+          <h2 class="column-title">시작 전</h2>
+          <span class="column-count">2</span>
+        </div>
+
+        <div class="todo-card priority-high">
+          <div class="todo-title">데이터베이스 스키마 설계</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm">이</div>
+              <span>이준호</span>
+            </div>
+            <div class="todo-duedate">
+              📅 D-3
             </div>
           </div>
-          ${UIComponents.createCircularProgress(0)}
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 0%;"></div>
+          </div>
+          <div class="todo-source">
+            <a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+
+        <div class="todo-card">
+          <div class="todo-title">사용자 피드백 분석</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-secondary-main);">박</div>
+              <span>박서연</span>
+            </div>
+            <div class="todo-duedate">
+              📅 D-5
+            </div>
+          </div>
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 0%;"></div>
+          </div>
+          <div class="todo-source">
+            <a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 고객 만족도 개선 회의 (2025-10-18)
+            </a>
+          </div>
         </div>
       </div>
 
-      <!-- 필터 탭 -->
-      <div class="d-flex gap-2 mb-4" style="overflow-x: auto;">
-        <button class="btn btn-sm active" id="filter-all" onclick="setFilter('all')">전체</button>
-        <button class="btn btn-secondary btn-sm" id="filter-inprogress" onclick="setFilter('inprogress')">진행 중</button>
-        <button class="btn btn-secondary btn-sm" id="filter-completed" onclick="setFilter('completed')">완료</button>
-        <button class="btn btn-secondary btn-sm" id="filter-duesoon" onclick="setFilter('duesoon')">마감 임박</button>
+      <!-- 진행 중 -->
+      <div class="kanban-column">
+        <div class="column-header">
+          <h2 class="column-title">진행 중</h2>
+          <span class="column-count">2</span>
+        </div>
+
+        <div class="todo-card priority-high">
+          <div class="todo-title">API 명세서 작성</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm">이</div>
+              <span>이준호</span>
+            </div>
+            <div class="todo-duedate">
+              📅 오늘
+            </div>
+          </div>
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 60%;"></div>
+          </div>
+          <div class="todo-source">
+            <a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+
+        <div class="todo-card priority-medium">
+          <div class="todo-title">예산 편성안 검토</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-secondary-main);">박</div>
+              <span>박서연</span>
+            </div>
+            <div class="todo-duedate overdue">
+              📅 D+2 (지남)
+            </div>
+          </div>
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 30%;"></div>
+          </div>
+          <div class="todo-source">
+            <a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
       </div>
 
-      <!-- Todo 리스트 -->
-      <div id="todoList">
-        <!-- JavaScript로 동적 생성 -->
+      <!-- 완료 -->
+      <div class="kanban-column">
+        <div class="column-header">
+          <h2 class="column-title">완료</h2>
+          <span class="column-count">1</span>
+        </div>
+
+        <div class="todo-card">
+          <div class="todo-title">UI 프로토타입 디자인</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-info-main);">최</div>
+              <span>최유진</span>
+            </div>
+            <div class="todo-duedate">
+              ✅ 완료
+            </div>
+          </div>
+          <div class="todo-progress">
+            <div class="todo-progress-bar" style="width: 100%; background-color: var(--color-success-main);"></div>
+          </div>
+          <div class="todo-source">
+            <a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
       </div>
     </div>
 
-    <!-- FAB -->
-    <button class="btn-fab" onclick="addTodo()" aria-label="Todo 추가">
-      <span class="material-symbols-outlined">add</span>
-    </button>
+    <!-- 리스트 뷰 -->
+    <div class="list-view" id="listView">
+      <div class="todo-list-item">
+        <input type="checkbox" class="todo-checkbox">
+        <div class="todo-list-content">
+          <div class="todo-title">API 명세서 작성</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm">이</div>
+              <span>이준호</span>
+            </div>
+            <div class="todo-duedate">📅 오늘</div>
+            <span class="badge badge-warning">진행 중</span>
+          </div>
+          <div class="todo-source" style="margin-top: var(--spacing-2);">
+            <a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+      </div>
 
-    <!-- 하단 네비게이션 -->
-    <nav class="bottom-nav" role="navigation" aria-label="주요 메뉴">
-      <a href="02-대시보드.html" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">home</span>
-        <span>홈</span>
-      </a>
-      <a href="11-회의록수정.html" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">description</span>
-        <span>회의록</span>
-      </a>
-      <a href="09-Todo관리.html" class="bottom-nav-item active" aria-current="page">
-        <span class="material-symbols-outlined bottom-nav-icon">check_box</span>
-        <span>Todo</span>
-      </a>
-      <a href="javascript:void(0)" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">account_circle</span>
-        <span>프로필</span>
-      </a>
-    </nav>
+      <div class="todo-list-item">
+        <input type="checkbox" class="todo-checkbox">
+        <div class="todo-list-content">
+          <div class="todo-title">예산 편성안 검토</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-secondary-main);">박</div>
+              <span>박서연</span>
+            </div>
+            <div class="todo-duedate overdue">📅 D+2 (지남)</div>
+            <span class="badge badge-warning">진행 중</span>
+          </div>
+          <div class="todo-source" style="margin-top: var(--spacing-2);">
+            <a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div class="todo-list-item">
+        <input type="checkbox" class="todo-checkbox" checked>
+        <div class="todo-list-content">
+          <div class="todo-title" style="text-decoration: line-through; color: var(--color-gray-500);">UI 프로토타입 디자인</div>
+          <div class="todo-meta">
+            <div class="todo-assignee">
+              <div class="avatar-sm" style="background-color: var(--color-info-main);">최</div>
+              <span>최유진</span>
+            </div>
+            <span class="badge badge-success">완료</span>
+          </div>
+          <div class="todo-source" style="margin-top: var(--spacing-2);">
+            <a href="10-회의록상세조회.html#todo-section" class="todo-source-link" onclick="MeetingApp.Toast.info('회의록으로 이동합니다'); return true;">
+              📄 2025년 1분기 제품 기획 회의 (2025-10-25)
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 
   <script src="common.js"></script>
   <script>
-    if (!NavigationHelper.requireAuth()) {}
+    // 뷰 전환
+    const viewBtns = document.querySelectorAll('.view-btn');
+    const kanbanView = document.getElementById('kanbanView');
+    const listView = document.getElementById('listView');
 
-    const currentUser = StorageManager.getCurrentUser();
-    let currentFilter = 'all';
+    viewBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const view = btn.getAttribute('data-view');
 
-    // Todo 렌더링
-    function renderTodos() {
-      const todos = StorageManager.getTodos();
-      const myTodos = todos.filter(todo => todo.assigneeId === currentUser.id);
+        viewBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
 
-      // 필터링
-      let filteredTodos = myTodos;
-      if (currentFilter === 'inprogress') {
-        filteredTodos = myTodos.filter(t => !t.completed);
-      } else if (currentFilter === 'completed') {
-        filteredTodos = myTodos.filter(t => t.completed);
-      } else if (currentFilter === 'duesoon') {
-        filteredTodos = myTodos.filter(t => !t.completed && isDueSoon(t.dueDate));
-      }
-
-      // 통계 업데이트
-      const total = myTodos.length;
-      const completed = myTodos.filter(t => t.completed).length;
-      const dueSoon = myTodos.filter(t => !t.completed && isDueSoon(t.dueDate)).length;
-      const completionRate = total > 0 ? Math.round((completed / total) * 100) : 0;
-
-      document.getElementById('totalCount').textContent = total;
-      document.getElementById('completedCount').textContent = completed;
-      document.getElementById('dueSoonCount').textContent = dueSoon;
-
-      // 진행률 업데이트
-      const progressEl = document.querySelector('.circular-progress');
-      if (progressEl) {
-        progressEl.style.setProperty('--progress-percent', `${completionRate * 3.6}deg`);
-        progressEl.querySelector('.progress-percent').textContent = `${completionRate}%`;
-      }
-
-      // Todo 리스트 렌더링
-      const container = document.getElementById('todoList');
-
-      if (filteredTodos.length === 0) {
-        container.innerHTML = '<p class="text-body text-gray text-center" style="padding: 48px 0;">해당하는 Todo가 없습니다</p>';
-        return;
-      }
-
-      // 마감일 순 정렬
-      filteredTodos.sort((a, b) => {
-        if (a.completed !== b.completed) return a.completed ? 1 : -1;
-        return new Date(a.dueDate) - new Date(b.dueDate);
+        if (view === 'kanban') {
+          kanbanView.style.display = 'grid';
+          listView.classList.remove('active');
+        } else {
+          kanbanView.style.display = 'none';
+          listView.classList.add('active');
+        }
       });
-
-      container.innerHTML = filteredTodos.map(todo => UIComponents.createTodoItem(todo)).join('');
-    }
-
-    // 필터 설정
-    function setFilter(filter) {
-      currentFilter = filter;
-
-      // 버튼 스타일 업데이트
-      document.querySelectorAll('[id^="filter-"]').forEach(btn => {
-        btn.classList.remove('btn-primary', 'active');
-        btn.classList.add('btn-secondary');
-      });
-
-      const activeBtn = document.getElementById(`filter-${filter}`);
-      activeBtn.classList.remove('btn-secondary');
-      activeBtn.classList.add('btn-primary', 'active');
-
-      renderTodos();
-    }
-
-    // 필터 모달
-    function showFilter() {
-      UIComponents.showModal({
-        title: '필터 및 정렬',
-        content: `
-          <div class="form-group">
-            <label class="form-label">정렬 기준</label>
-            <select id="sortBy" class="form-select">
-              <option value="dueDate">마감일순</option>
-              <option value="priority">우선순위순</option>
-              <option value="created">생성일순</option>
-            </select>
-          </div>
-          <div class="form-group">
-            <label class="form-label">우선순위</label>
-            <label class="form-checkbox mb-2">
-              <input type="checkbox" value="high" checked>
-              <span>높음</span>
-            </label>
-            <label class="form-checkbox mb-2">
-              <input type="checkbox" value="medium" checked>
-              <span>보통</span>
-            </label>
-            <label class="form-checkbox mb-2">
-              <input type="checkbox" value="low" checked>
-              <span>낮음</span>
-            </label>
-          </div>
-        `,
-        footer: `
-          <button class="btn btn-secondary" onclick="closeModal()">취소</button>
-          <button class="btn btn-primary" onclick="closeModal(); renderTodos()">적용</button>
-        `,
-        onClose: () => {}
-      });
-    }
+    });
 
     // Todo 추가
     function addTodo() {
-      UIComponents.showModal({
-        title: 'Todo 추가',
-        content: `
-          <form id="addTodoForm">
-            <div class="form-group">
-              <label for="todoContent" class="form-label required">내용</label>
-              <textarea
-                id="todoContent"
-                class="form-textarea"
-                rows="3"
-                placeholder="Todo 내용을 입력하세요"
-                required
-              ></textarea>
-            </div>
-            <div class="form-group">
-              <label for="todoDueDate" class="form-label required">마감일</label>
-              <input
-                type="date"
-                id="todoDueDate"
-                class="form-input"
-                required
-                min="${new Date().toISOString().split('T')[0]}"
-              >
-            </div>
-            <div class="form-group">
-              <label for="todoPriority" class="form-label">우선순위</label>
-              <select id="todoPriority" class="form-select">
-                <option value="low">낮음</option>
-                <option value="medium" selected>보통</option>
-                <option value="high">높음</option>
-              </select>
-            </div>
-          </form>
-        `,
-        footer: `
-          <button class="btn btn-secondary" onclick="closeModal()">취소</button>
-          <button class="btn btn-primary" onclick="saveTodo()">저장</button>
-        `,
-        onClose: () => {}
+      MeetingApp.Toast.info('Todo 추가 기능은 준비 중입니다');
+    }
+
+    // Todo 카드 클릭
+    const todoCards = document.querySelectorAll('.todo-card');
+    todoCards.forEach(card => {
+      card.addEventListener('click', () => {
+        MeetingApp.Toast.info('Todo 상세 정보를 표시합니다');
       });
-    }
+    });
 
-    // Todo 저장
-    function saveTodo() {
-      const content = document.getElementById('todoContent').value.trim();
-      const dueDate = document.getElementById('todoDueDate').value;
-      const priority = document.getElementById('todoPriority').value;
+    // 드래그 앤 드롭 (간단한 시뮬레이션)
+    todoCards.forEach(card => {
+      card.addEventListener('dragstart', (e) => {
+        e.dataTransfer.effectAllowed = 'move';
+        e.target.style.opacity = '0.5';
+      });
 
-      if (!content || !dueDate) {
-        UIComponents.showToast('필수 항목을 입력해주세요', 'error');
-        return;
-      }
+      card.addEventListener('dragend', (e) => {
+        e.target.style.opacity = '1';
+      });
 
-      const todoData = {
-        id: Utils.generateId('TODO'),
-        meetingId: '',
-        sectionId: '',
-        content: content,
-        assignee: currentUser.name,
-        assigneeId: currentUser.id,
-        dueDate: dueDate,
-        priority: priority,
-        status: 'in-progress',
-        completed: false,
-        createdAt: new Date().toISOString()
-      };
-
-      StorageManager.addTodo(todoData);
-      closeModal();
-      UIComponents.showToast('Todo가 추가되었습니다', 'success');
-      renderTodos();
-    }
-
-    // 모달 닫기
-    function closeModal() {
-      const modal = document.querySelector('.modal-overlay');
-      if (modal) modal.remove();
-    }
-
-    // 초기 렌더링
-    renderTodos();
+      card.setAttribute('draggable', 'true');
+    });
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/10-회의록상세조회.html b/design/uiux/prototype/10-회의록상세조회.html
index 51022aa..0096913 100644
--- a/design/uiux/prototype/10-회의록상세조회.html
+++ b/design/uiux/prototype/10-회의록상세조회.html
@@ -3,287 +3,301 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>회의록 상세 조회 - 회의록 서비스</title>
+  <title>회의록 최종 확정 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-8) var(--spacing-4);
+    }
+    .page-header {
+      margin-bottom: var(--spacing-8);
+    }
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
+    }
+    .content-grid {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: var(--spacing-6);
+      margin-bottom: var(--spacing-8);
+    }
+    .preview-panel {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+    }
+    .preview-title {
+      font-size: var(--font-size-h3);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+    .meeting-content {
+      font-size: var(--font-size-body);
+      line-height: var(--line-height-relaxed);
+      color: var(--color-gray-700);
+    }
+    .meeting-content h2 {
+      font-size: var(--font-size-h4);
+      margin-top: var(--spacing-6);
+      margin-bottom: var(--spacing-3);
+      color: var(--color-gray-900);
+    }
+    .meeting-content ul {
+      margin-left: var(--spacing-5);
+      margin-bottom: var(--spacing-4);
+    }
+    .checklist-panel {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      height: fit-content;
+    }
+    .checklist-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+    .checklist-item {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      background: var(--color-gray-50);
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      transition: background-color var(--transition-fast);
+    }
+    .checklist-item:hover {
+      background: var(--color-gray-100);
+    }
+    .checklist-item.checked {
+      background: rgba(0, 217, 177, 0.1);
+    }
+    .checklist-checkbox {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--color-gray-300);
+      border-radius: var(--radius-sm);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .checklist-item.checked .checklist-checkbox {
+      background-color: var(--color-success-main);
+      border-color: var(--color-success-main);
+      color: var(--color-white);
+    }
+    .checklist-text {
+      flex: 1;
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-700);
+    }
+    .action-buttons {
+      display: flex;
+      gap: var(--spacing-3);
+      justify-content: center;
+    }
+    .warning-message {
+      background-color: var(--color-warning-light);
+      border-left: 4px solid var(--color-warning-main);
+      padding: var(--spacing-4);
+      border-radius: var(--radius-md);
+      margin-bottom: var(--spacing-4);
+      display: none;
+    }
+    .warning-message.show {
+      display: block;
+    }
+    @media (max-width: 1023px) {
+      .content-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+    @media (max-width: 767px) {
+      .page-title { font-size: var(--font-size-h2); }
+      .action-buttons { flex-direction: column; }
+      .action-buttons .btn { width: 100%; }
+    }
+  </style>
 </head>
 <body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <button class="btn-icon" onclick="NavigationHelper.goBack()" aria-label="뒤로가기">
-        <span class="material-symbols-outlined">arrow_back</span>
-      </button>
-      <h1 class="header-title">회의록 상세</h1>
-      <button class="btn-icon" onclick="showMenu()" aria-label="메뉴">
-        <span class="material-symbols-outlined">more_vert</span>
-      </button>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">회의록 최종 확정</h1>
+      <p class="page-subtitle">필수 항목을 확인하고 회의록을 최종 확정하세요</p>
     </div>
 
-    <!-- 메인 컨텐츠 -->
-    <div class="content" style="padding-bottom: 80px;">
-      <!-- 기본 정보 카드 -->
-      <div class="card mb-4">
-        <div class="d-flex justify-between align-center mb-3">
-          <h2 class="text-h3" id="meetingTitle">회의 제목</h2>
-          <div id="statusBadge"></div>
-        </div>
+    <div id="warningMessage" class="warning-message">
+      ⚠️ 아래 필수 항목을 모두 확인해주세요.
+    </div>
 
-        <div class="d-flex flex-column gap-2 mb-4">
-          <div class="d-flex align-center gap-2 text-body-sm">
-            <span class="material-symbols-outlined" style="font-size: 20px; color: var(--gray-600);">schedule</span>
-            <span id="meetingDateTime">2025-10-21 10:00 ~ 11:30</span>
-          </div>
-          <div class="d-flex align-center gap-2 text-body-sm">
-            <span class="material-symbols-outlined" style="font-size: 20px; color: var(--gray-600);">location_on</span>
-            <span id="meetingLocation">회의실 A</span>
-          </div>
-          <div class="d-flex align-center gap-2 text-body-sm">
-            <span class="material-symbols-outlined" style="font-size: 20px; color: var(--gray-600);">group</span>
-            <span id="meetingAttendees">3명 참석</span>
-          </div>
-        </div>
+    <div class="content-grid">
+      <!-- 회의록 미리보기 -->
+      <div class="preview-panel">
+        <h2 class="preview-title">2025년 1분기 제품 기획 회의</h2>
+        <div class="meeting-content">
+          <p><strong>날짜:</strong> 2025-10-25 14:00<br>
+          <strong>장소:</strong> 본사 2층 대회의실<br>
+          <strong>참석자:</strong> 김민준, 박서연, 이준호</p>
 
-        <div class="d-flex align-center gap-2" style="border-top: 1px solid var(--gray-200); padding-top: 12px;">
-          <span class="text-caption text-gray">작성자:</span>
-          <span class="text-body-sm" id="creator">김철수</span>
-          <span class="text-caption text-gray">·</span>
-          <span class="text-caption text-gray" id="updatedAt">2시간 전 수정</span>
+          <h2>안건</h2>
+          <ul>
+            <li>신규 기능 개발 일정 논의</li>
+            <li>예산 편성 검토</li>
+          </ul>
+
+          <h2>논의 내용</h2>
+          <p>신규 회의록 서비스의 핵심 기능에 대해 논의했습니다. AI 기반 자동 작성 기능과 실시간 협업 기능을 우선적으로 개발하기로 결정했습니다.</p>
+
+          <p>개발 일정은 3월 말 완료를 목표로 하며, 주요 마일스톤은 다음과 같습니다:</p>
+          <ul>
+            <li>3월 10일: 기본 UI 완성</li>
+            <li>3월 20일: AI 기능 통합</li>
+            <li>3월 30일: 베타 테스트 시작</li>
+          </ul>
+
+          <h2>결정 사항</h2>
+          <ul>
+            <li>신규 기능 개발은 3월 말 완료 목표</li>
+            <li>이준호님이 API 설계 담당</li>
+            <li>예산은 5천만원으로 확정</li>
+          </ul>
+
+          <h2>Todo</h2>
+          <ul>
+            <li>API 명세서 작성 (담당: 이준호, 마감: 3월 25일)</li>
+            <li>UI 프로토타입 완성 (담당: 최유진, 마감: 3월 15일)</li>
+            <li>예산 편성안 검토 (담당: 박서연, 마감: 3월 20일)</li>
+          </ul>
         </div>
       </div>
 
-      <!-- 섹션별 내용 -->
-      <div id="sectionList">
-        <!-- JavaScript로 동적 생성 -->
-      </div>
+      <!-- 확인 체크리스트 -->
+      <div class="checklist-panel">
+        <h3 class="checklist-title">필수 항목 확인</h3>
 
-      <!-- Todo 섹션 (별도 강조) -->
-      <div class="card mb-4" style="border-left: 4px solid var(--primary-500);" id="todoSection">
-        <div class="d-flex justify-between align-center mb-3">
-          <h3 class="text-h4">Todo</h3>
-          <span class="badge badge-count" id="todoCount">0</span>
+        <div class="checklist-item" data-required="true">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>회의 제목</strong><br>
+            회의 제목이 명확하게 작성되었습니다
+          </div>
         </div>
-        <div id="todoList">
-          <!-- JavaScript로 동적 생성 -->
-        </div>
-      </div>
 
-      <!-- 첨부파일 섹션 -->
-      <div class="card mb-4" id="attachmentSection" style="display: none;">
-        <h3 class="text-h4 mb-3">첨부파일</h3>
-        <div id="attachmentList">
-          <!-- JavaScript로 동적 생성 -->
+        <div class="checklist-item" data-required="true">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>참석자 목록</strong><br>
+            모든 참석자가 기록되었습니다
+          </div>
+        </div>
+
+        <div class="checklist-item" data-required="true">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>주요 논의 내용</strong><br>
+            핵심 논의 내용이 포함되었습니다
+          </div>
+        </div>
+
+        <div class="checklist-item" data-required="true">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>결정 사항</strong><br>
+            회의 중 결정된 사항이 명시되었습니다
+          </div>
+        </div>
+
+        <div class="checklist-item">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>Todo 생성</strong><br>
+            실행 항목이 Todo로 생성되었습니다
+          </div>
+        </div>
+
+        <div class="checklist-item">
+          <div class="checklist-checkbox"></div>
+          <div class="checklist-text">
+            <strong>전문용어 설명</strong><br>
+            필요한 용어에 설명이 추가되었습니다
+          </div>
         </div>
       </div>
     </div>
 
-    <!-- 하단 액션 바 -->
-    <div class="footer d-flex gap-2">
-      <button class="btn btn-secondary" onclick="editMeeting()" id="editBtn">
-        <span class="material-symbols-outlined">edit</span>
-        수정
-      </button>
-      <button class="btn btn-primary" onclick="shareMeeting()" style="flex: 1;">
-        <span class="material-symbols-outlined">share</span>
-        공유
-      </button>
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button class="btn btn-secondary" onclick="history.back()">이전으로</button>
+      <button class="btn btn-primary" id="confirmBtn" disabled>회의록 확정하기</button>
     </div>
   </div>
 
   <script src="common.js"></script>
   <script>
-    if (!NavigationHelper.requireAuth()) {}
+    const checklistItems = document.querySelectorAll('.checklist-item');
+    const confirmBtn = document.getElementById('confirmBtn');
+    const warningMessage = document.getElementById('warningMessage');
 
-    const currentUser = StorageManager.getCurrentUser();
-    const meetingId = NavigationHelper.getQueryParam('id');
-    const meeting = meetingId ? StorageManager.getMeetingById(meetingId) : null;
+    // 체크리스트 항목 클릭
+    checklistItems.forEach(item => {
+      item.addEventListener('click', () => {
+        item.classList.toggle('checked');
+        const checkbox = item.querySelector('.checklist-checkbox');
+        if (item.classList.contains('checked')) {
+          checkbox.textContent = '✓';
+        } else {
+          checkbox.textContent = '';
+        }
+        checkCompletion();
+      });
+    });
 
-    if (!meeting) {
-      UIComponents.showToast('회의록을 찾을 수 없습니다', 'error');
-      setTimeout(() => NavigationHelper.navigate('DASHBOARD'), 2000);
-    }
+    // 완료 여부 확인
+    function checkCompletion() {
+      const requiredItems = document.querySelectorAll('.checklist-item[data-required="true"]');
+      const checkedRequired = document.querySelectorAll('.checklist-item[data-required="true"].checked');
 
-    // 기본 정보 표시
-    if (meeting) {
-      document.getElementById('meetingTitle').textContent = meeting.title;
-      document.getElementById('meetingDateTime').textContent = `${Utils.formatDate(meeting.date)} ${meeting.startTime} ~ ${meeting.endTime}`;
-      document.getElementById('meetingLocation').textContent = meeting.location || '미정';
-      document.getElementById('meetingAttendees').textContent = `${meeting.attendees?.length || 0}명 참석`;
-
-      const creatorUser = DUMMY_USERS.find(u => u.id === meeting.createdBy);
-      document.getElementById('creator').textContent = creatorUser ? creatorUser.name : '알 수 없음';
-      document.getElementById('updatedAt').textContent = Utils.formatTimeAgo(meeting.updatedAt);
-
-      // 상태 배지
-      const statusText = {
-        'scheduled': '예정',
-        'in-progress': '진행중',
-        'draft': '작성중',
-        'confirmed': '확정완료'
-      };
-
-      const statusClass = {
-        'scheduled': 'badge-shared',
-        'in-progress': 'badge-shared',
-        'draft': 'badge-draft',
-        'confirmed': 'badge-confirmed'
-      };
-
-      document.getElementById('statusBadge').innerHTML = UIComponents.createBadge(
-        statusText[meeting.status] || '작성중',
-        statusClass[meeting.status] || 'draft'
-      );
-
-      // 권한 체크 (수정 버튼)
-      const canEdit = meeting.createdBy === currentUser.id || meeting.attendees.includes(currentUser.name);
-      if (!canEdit) {
-        document.getElementById('editBtn').disabled = true;
-        document.getElementById('editBtn').innerHTML = '<span class="material-symbols-outlined">visibility</span> 조회 전용';
+      if (requiredItems.length === checkedRequired.length) {
+        confirmBtn.disabled = false;
+        warningMessage.classList.remove('show');
+      } else {
+        confirmBtn.disabled = true;
+        warningMessage.classList.add('show');
       }
     }
 
-    // 섹션 렌더링
-    function renderSections() {
-      const container = document.getElementById('sectionList');
+    // 확정 버튼 클릭
+    confirmBtn.addEventListener('click', () => {
+      MeetingApp.Loading.show();
 
-      if (!meeting || !meeting.sections) {
-        container.innerHTML = '<p class="text-body text-gray text-center">섹션 정보가 없습니다</p>';
-        return;
-      }
+      setTimeout(() => {
+        MeetingApp.Loading.hide();
+        MeetingApp.Toast.success('회의록이 확정되었습니다!');
 
-      // Todo 섹션 제외
-      const sections = meeting.sections.filter(s => s.name !== 'Todo');
-
-      container.innerHTML = sections.map(section => `
-        <div class="card mb-4">
-          <div class="d-flex justify-between align-center mb-3">
-            <h3 class="text-h4">${section.name}</h3>
-            ${section.verified ? '<span class="verified-badge"><span class="material-symbols-outlined" style="font-size: 14px;">check_circle</span> 검증완료</span>' : ''}
-          </div>
-          <div class="text-body" style="white-space: pre-wrap;">${section.content || '(내용 없음)'}</div>
-          ${section.verifiedBy && section.verifiedBy.length > 0 ? `
-            <div class="d-flex align-center gap-2 mt-3" style="border-top: 1px solid var(--gray-200); padding-top: 12px;">
-              <span class="text-caption text-gray">검증:</span>
-              ${section.verifiedBy.map(name => UIComponents.createAvatar(name, 24)).join('')}
-            </div>
-          ` : ''}
-        </div>
-      `).join('');
-    }
-
-    // Todo 렌더링
-    function renderTodos() {
-      const todos = StorageManager.getTodos().filter(t => t.meetingId === meeting.id);
-      const container = document.getElementById('todoList');
-
-      document.getElementById('todoCount').textContent = todos.length;
-
-      if (todos.length === 0) {
-        document.getElementById('todoSection').style.display = 'none';
-        return;
-      }
-
-      container.innerHTML = todos.map(todo => UIComponents.createTodoItem(todo)).join('');
-    }
-
-    // 메뉴 표시
-    function showMenu() {
-      UIComponents.showModal({
-        title: '메뉴',
-        content: `
-          <div class="d-flex flex-column gap-2">
-            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); exportPDF()">
-              <span class="material-symbols-outlined">download</span>
-              PDF로 내보내기
-            </button>
-            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); copyAsText()">
-              <span class="material-symbols-outlined">content_copy</span>
-              텍스트로 복사
-            </button>
-            ${meeting.createdBy === currentUser.id ? `
-              <button class="btn btn-text" style="justify-content: flex-start; color: var(--error);" onclick="closeModal(); deleteMeeting()">
-                <span class="material-symbols-outlined">delete</span>
-                삭제
-              </button>
-            ` : ''}
-          </div>
-        `,
-        footer: '<button class="btn btn-secondary" onclick="closeModal()">닫기</button>',
-        onClose: () => {}
-      });
-    }
-
-    // PDF 내보내기
-    function exportPDF() {
-      UIComponents.showToast('PDF 내보내기 기능은 준비 중입니다', 'info');
-    }
-
-    // 텍스트 복사
-    function copyAsText() {
-      let text = `${meeting.title}\n`;
-      text += `일시: ${meeting.date} ${meeting.startTime} ~ ${meeting.endTime}\n`;
-      text += `장소: ${meeting.location}\n\n`;
-
-      meeting.sections.forEach(section => {
-        text += `[${section.name}]\n${section.content}\n\n`;
-      });
-
-      navigator.clipboard.writeText(text).then(() => {
-        UIComponents.showToast('회의록이 복사되었습니다', 'success');
-      }).catch(() => {
-        UIComponents.showToast('복사에 실패했습니다', 'error');
-      });
-    }
-
-    // 회의록 삭제
-    function deleteMeeting() {
-      UIComponents.confirm(
-        '정말 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.',
-        () => {
-          StorageManager.deleteMeeting(meeting.id);
-          UIComponents.showToast('회의록이 삭제되었습니다', 'success');
-          setTimeout(() => {
-            NavigationHelper.navigate('DASHBOARD');
-          }, 1000);
-        },
-        () => {}
-      );
-    }
-
-    // 회의록 수정
-    function editMeeting() {
-      NavigationHelper.navigate('MEETING_EDIT', { id: meeting.id });
-    }
-
-    // 회의록 공유
-    function shareMeeting() {
-      NavigationHelper.navigate('MEETING_SHARE', { meetingId: meeting.id });
-    }
-
-    // 모달 닫기
-    function closeModal() {
-      const modal = document.querySelector('.modal-overlay');
-      if (modal) modal.remove();
-    }
-
-    // 초기 렌더링
-    renderSections();
-    renderTodos();
-
-    // URL 해시로 섹션 스크롤
-    const hash = window.location.hash;
-    if (hash) {
-      const element = document.querySelector(hash);
-      if (element) {
         setTimeout(() => {
-          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-          element.style.background = 'var(--primary-50)';
-          setTimeout(() => {
-            element.style.background = '';
-          }, 2000);
-        }, 500);
-      }
-    }
+          window.location.href = '09-회의록공유.html';
+        }, 1000);
+      }, 1500);
+    });
+
+    // 초기 확인
+    checkCompletion();
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/11-회의록수정.html b/design/uiux/prototype/11-회의록수정.html
index 78f82d3..e5a69cb 100644
--- a/design/uiux/prototype/11-회의록수정.html
+++ b/design/uiux/prototype/11-회의록수정.html
@@ -12,11 +12,11 @@
       top: 70px;
       right: 16px;
       padding: 8px 12px;
-      background: var(--white);
+      background: var(--color-white);
       border-radius: 20px;
       box-shadow: var(--shadow-sm);
       font-size: 12px;
-      color: var(--gray-600);
+      color: var(--color-gray-600);
       z-index: var(--z-sticky);
       display: none;
     }
@@ -26,6 +26,196 @@
       align-items: center;
       gap: 6px;
     }
+
+    /* NEW - UFR-MEET-055: 섹션 잠금 해제 버튼 스타일 */
+    .section-lock-area {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px;
+      background: var(--color-gray-50);
+      border-radius: 8px;
+      margin-top: 12px;
+    }
+
+    .btn-unlock {
+      padding: 6px 12px;
+      font-size: 14px;
+      background: var(--color-primary-main);
+      color: var(--color-white);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .btn-unlock:hover {
+      background: var(--color-primary-dark);
+    }
+
+    /* NEW - UFR-COLLAB-020: 충돌 해결 UI 스타일 */
+    .conflict-banner {
+      position: fixed;
+      top: 60px;
+      left: 16px;
+      right: 16px;
+      padding: 12px 16px;
+      background: rgba(239, 68, 68, 0.1);
+      border: 1px solid #EF4444;
+      border-radius: 8px;
+      z-index: var(--z-sticky);
+      display: none;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .conflict-banner.active {
+      display: flex;
+    }
+
+    .conflict-icon {
+      color: #EF4444;
+      font-size: 24px;
+    }
+
+    .conflict-content {
+      flex: 1;
+    }
+
+    .conflict-title {
+      font-weight: 600;
+      color: #B91C1C;
+      margin-bottom: 4px;
+    }
+
+    .conflict-description {
+      font-size: 12px;
+      color: #DC2626;
+    }
+
+    .btn-resolve {
+      padding: 6px 12px;
+      font-size: 14px;
+      background: #EF4444;
+      color: var(--color-white);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .btn-resolve:hover {
+      background: #DC2626;
+    }
+
+    /* 충돌 해결 모달 스타일 */
+    .conflict-resolution {
+      padding: 0;
+    }
+
+    .conflict-header {
+      padding: 20px;
+      background: rgba(239, 68, 68, 0.1);
+      border-bottom: 1px solid var(--color-gray-200);
+    }
+
+    .conflict-body {
+      padding: 20px;
+    }
+
+    .conflict-section {
+      margin-bottom: 20px;
+    }
+
+    .conflict-label {
+      font-weight: 600;
+      font-size: 14px;
+      color: var(--color-gray-700);
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .conflict-diff {
+      padding: 12px;
+      background: var(--color-gray-50);
+      border-radius: 8px;
+      border: 2px solid transparent;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .conflict-diff:hover {
+      border-color: var(--color-primary-light);
+    }
+
+    .conflict-diff.selected {
+      border-color: var(--color-primary-main);
+      background: rgba(0, 217, 177, 0.1);
+    }
+
+    .conflict-user {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--color-gray-600);
+      margin-bottom: 8px;
+    }
+
+    .conflict-time {
+      font-size: 11px;
+      color: var(--color-gray-500);
+    }
+
+    .conflict-content-box {
+      padding: 12px;
+      background: var(--color-white);
+      border-radius: 6px;
+      font-size: 14px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .conflict-actions {
+      display: flex;
+      gap: 8px;
+      padding: 20px;
+      border-top: 1px solid var(--color-gray-200);
+    }
+
+    /* 직접 작성 모드 */
+    .merge-editor {
+      width: 100%;
+      min-height: 150px;
+      padding: 12px;
+      border: 1px solid var(--color-gray-300);
+      border-radius: 8px;
+      font-family: inherit;
+      font-size: 14px;
+      resize: vertical;
+    }
+
+    .merge-editor:focus {
+      outline: none;
+      border-color: var(--color-primary-main);
+    }
+
+    /* 충돌 표시 배지 */
+    .conflict-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 8px;
+      background: rgba(239, 68, 68, 0.2);
+      color: #B91C1C;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 600;
+    }
   </style>
 </head>
 <body>
@@ -45,6 +235,20 @@
       <span id="autoSaveText">저장됨</span>
     </div>
 
+    <!-- NEW - 충돌 알림 배너 (UFR-COLLAB-020) -->
+    <div class="conflict-banner" id="conflictBanner">
+      <span class="material-symbols-outlined conflict-icon">warning</span>
+      <div class="conflict-content">
+        <div class="conflict-title">동시 수정 충돌 감지</div>
+        <div class="conflict-description" id="conflictDescription">
+          다른 사용자가 동일한 섹션을 수정했습니다. 충돌을 해결해주세요.
+        </div>
+      </div>
+      <button class="btn-resolve" onclick="showConflictResolution()">
+        해결하기
+      </button>
+    </div>
+
     <!-- 메인 컨텐츠 -->
     <div class="content">
       <!-- 회의록 목록 모드 -->
@@ -120,26 +324,6 @@
         </div>
       </div>
     </div>
-
-    <!-- 하단 네비게이션 -->
-    <nav class="bottom-nav" role="navigation" aria-label="주요 메뉴">
-      <a href="02-대시보드.html" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">home</span>
-        <span>홈</span>
-      </a>
-      <a href="11-회의록수정.html" class="bottom-nav-item active" aria-current="page">
-        <span class="material-symbols-outlined bottom-nav-icon">description</span>
-        <span>회의록</span>
-      </a>
-      <a href="09-Todo관리.html" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">check_box</span>
-        <span>Todo</span>
-      </a>
-      <a href="javascript:void(0)" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">account_circle</span>
-        <span>프로필</span>
-      </a>
-    </nav>
   </div>
 
   <script src="common.js"></script>
@@ -153,6 +337,10 @@
     let autoSaveTimer = null;
     let hasUnsavedChanges = false;
 
+    // NEW - UFR-COLLAB-020: 충돌 관리 변수
+    let conflicts = [];
+    let currentConflict = null;
+
     // 회의록 목록 렌더링
     function renderMeetingList() {
       const meetings = StorageManager.getMeetings();
@@ -239,7 +427,6 @@
       // UI 전환
       document.getElementById('listMode').style.display = 'none';
       document.getElementById('editMode').style.display = 'block';
-      document.querySelector('.bottom-nav').style.display = 'none';
 
       // 기본 정보 설정
       document.getElementById('editTitle').value = currentMeeting.title;
@@ -250,35 +437,268 @@
       // 섹션 렌더링
       renderEditSections();
 
+      // NEW - 충돌 감지 (UFR-COLLAB-020)
+      detectConflicts();
+
       // 자동 저장 시작
       startAutoSave();
     }
 
+    // NEW - UFR-COLLAB-020: 충돌 감지
+    function detectConflicts() {
+      // 시뮬레이션: 30% 확률로 충돌 발생
+      if (Math.random() < 0.3 && currentMeeting.sections.length > 0) {
+        const conflictSectionIndex = Math.floor(Math.random() * currentMeeting.sections.length);
+        const conflictSection = currentMeeting.sections[conflictSectionIndex];
+
+        const otherUsers = DUMMY_USERS.filter(u => u.id !== currentUser.id);
+        const conflictUser = otherUsers[Math.floor(Math.random() * otherUsers.length)];
+
+        conflicts.push({
+          sectionId: conflictSection.id,
+          sectionName: conflictSection.name,
+          myVersion: {
+            content: conflictSection.content || '(내용 없음)',
+            modifiedAt: new Date().toISOString(),
+            modifiedBy: currentUser.name
+          },
+          theirVersion: {
+            content: generateRandomConflictContent(conflictSection.content),
+            modifiedAt: new Date(Date.now() - 5000).toISOString(),
+            modifiedBy: conflictUser.name
+          }
+        });
+
+        showConflictBanner();
+      }
+    }
+
+    // 충돌 내용 생성 (시뮬레이션)
+    function generateRandomConflictContent(originalContent) {
+      if (!originalContent) return '다른 사용자가 추가한 내용입니다.';
+
+      const variations = [
+        originalContent + '\n\n추가 논의사항: 예산 검토 필요',
+        originalContent.replace('결정', '잠정 결정'),
+        '수정된 내용:\n' + originalContent,
+        originalContent + '\n\n※ 재논의 필요'
+      ];
+
+      return variations[Math.floor(Math.random() * variations.length)];
+    }
+
+    // 충돌 배너 표시
+    function showConflictBanner() {
+      const banner = document.getElementById('conflictBanner');
+      const description = document.getElementById('conflictDescription');
+
+      if (conflicts.length > 0) {
+        description.textContent = `${conflicts.length}개 섹션에서 충돌이 감지되었습니다. 충돌을 해결해주세요.`;
+        banner.classList.add('active');
+      } else {
+        banner.classList.remove('active');
+      }
+    }
+
+    // NEW - UFR-COLLAB-020: 충돌 해결 모달 표시
+    function showConflictResolution() {
+      if (conflicts.length === 0) return;
+
+      currentConflict = conflicts[0];
+      let selectedVersion = 'mine'; // 기본값: 내 버전
+
+      const modalContent = `
+        <div class="conflict-resolution">
+          <div class="conflict-header">
+            <h3 class="text-h5" style="color: #B91C1C;">
+              <span class="material-symbols-outlined" style="vertical-align: middle;">warning</span>
+              충돌 해결 필요
+            </h3>
+            <p class="text-caption text-gray mt-2">
+              "${currentConflict.sectionName}" 섹션에서 충돌이 감지되었습니다. 최종 버전을 선택하거나 직접 작성하세요.
+            </p>
+          </div>
+
+          <div class="conflict-body">
+            <!-- 내 버전 -->
+            <div class="conflict-section">
+              <div class="conflict-label">
+                <span class="material-symbols-outlined" style="color: var(--color-primary-main);">person</span>
+                내 수정 내용
+              </div>
+              <div class="conflict-diff selected" id="myVersion" onclick="selectVersion('mine')">
+                <div class="conflict-user">
+                  <span class="material-symbols-outlined" style="font-size: 14px;">account_circle</span>
+                  ${currentConflict.myVersion.modifiedBy}
+                  <span class="conflict-time">· ${Utils.formatTimeAgo(currentConflict.myVersion.modifiedAt)}</span>
+                </div>
+                <div class="conflict-content-box">${currentConflict.myVersion.content}</div>
+              </div>
+            </div>
+
+            <!-- 타인 버전 -->
+            <div class="conflict-section">
+              <div class="conflict-label">
+                <span class="material-symbols-outlined" style="color: #F59E0B;">group</span>
+                다른 사용자 수정 내용
+              </div>
+              <div class="conflict-diff" id="theirVersion" onclick="selectVersion('theirs')">
+                <div class="conflict-user">
+                  <span class="material-symbols-outlined" style="font-size: 14px;">account_circle</span>
+                  ${currentConflict.theirVersion.modifiedBy}
+                  <span class="conflict-time">· ${Utils.formatTimeAgo(currentConflict.theirVersion.modifiedAt)}</span>
+                </div>
+                <div class="conflict-content-box">${currentConflict.theirVersion.content}</div>
+              </div>
+            </div>
+
+            <!-- 직접 작성 -->
+            <div class="conflict-section">
+              <div class="conflict-label">
+                <span class="material-symbols-outlined" style="color: #10B981;">edit</span>
+                직접 작성하기
+              </div>
+              <div class="conflict-diff" id="manualVersion" onclick="selectVersion('manual')">
+                <textarea
+                  class="merge-editor"
+                  id="manualContent"
+                  placeholder="양쪽 내용을 참고하여 직접 작성하세요..."
+                >${currentConflict.myVersion.content}</textarea>
+              </div>
+            </div>
+          </div>
+
+          <div class="conflict-actions">
+            <button class="btn btn-secondary" onclick="UIComponents.closeModal()">
+              취소
+            </button>
+            <button class="btn btn-primary" style="flex: 1;" onclick="resolveConflict()">
+              이 버전으로 확정
+            </button>
+          </div>
+        </div>
+      `;
+
+      UIComponents.showModal('충돌 해결', modalContent, null, 'large');
+
+      // 버전 선택 함수
+      window.selectVersion = function(version) {
+        selectedVersion = version;
+
+        document.getElementById('myVersion').classList.remove('selected');
+        document.getElementById('theirVersion').classList.remove('selected');
+        document.getElementById('manualVersion').classList.remove('selected');
+
+        if (version === 'mine') {
+          document.getElementById('myVersion').classList.add('selected');
+        } else if (version === 'theirs') {
+          document.getElementById('theirVersion').classList.add('selected');
+        } else if (version === 'manual') {
+          document.getElementById('manualVersion').classList.add('selected');
+          document.getElementById('manualContent').focus();
+        }
+      };
+
+      // 충돌 해결 함수
+      window.resolveConflict = function() {
+        let finalContent = '';
+
+        if (selectedVersion === 'mine') {
+          finalContent = currentConflict.myVersion.content;
+        } else if (selectedVersion === 'theirs') {
+          finalContent = currentConflict.theirVersion.content;
+        } else if (selectedVersion === 'manual') {
+          finalContent = document.getElementById('manualContent').value;
+        }
+
+        // 섹션 내용 업데이트
+        const section = currentMeeting.sections.find(s => s.id === currentConflict.sectionId);
+        if (section) {
+          section.content = finalContent;
+
+          // textarea 업데이트
+          const textarea = document.querySelector(`textarea[data-section-id="${currentConflict.sectionId}"]`);
+          if (textarea) {
+            textarea.value = finalContent;
+          }
+        }
+
+        // 충돌 목록에서 제거
+        conflicts.shift();
+
+        UIComponents.closeModal();
+        UIComponents.showToast('충돌이 해결되었습니다', 'success');
+
+        // 남은 충돌 처리
+        if (conflicts.length > 0) {
+          setTimeout(() => {
+            showConflictResolution();
+          }, 500);
+        } else {
+          showConflictBanner();
+          markAsChanged();
+        }
+      };
+    }
+
     // 섹션 수정 렌더링
     function renderEditSections() {
       const container = document.getElementById('editSectionList');
 
-      container.innerHTML = currentMeeting.sections.map((section, index) => `
-        <div class="card mb-4">
-          <div class="d-flex justify-between align-center mb-3">
-            <h3 class="text-h5">${section.name}</h3>
-            ${section.locked ? '<span class="material-symbols-outlined" style="color: var(--gray-600);">lock</span>' : ''}
+      container.innerHTML = currentMeeting.sections.map((section, index) => {
+        const hasConflict = conflicts.some(c => c.sectionId === section.id);
+
+        return `
+          <div class="card mb-4">
+            <div class="d-flex justify-between align-center mb-3">
+              <div class="d-flex align-center gap-2">
+                <h3 class="text-h5">${section.name}</h3>
+                ${hasConflict ? '<span class="conflict-badge"><span class="material-symbols-outlined" style="font-size: 14px;">warning</span> 충돌</span>' : ''}
+              </div>
+              ${section.locked ? '<span class="material-symbols-outlined" style="color: var(--color-gray-600);">lock</span>' : ''}
+            </div>
+            <textarea
+              class="form-textarea"
+              rows="5"
+              data-section-id="${section.id}"
+              onchange="markAsChanged()"
+              ${section.locked ? 'disabled' : ''}
+            >${section.content || ''}</textarea>
+            ${section.locked ? `
+              <!-- NEW - UFR-MEET-055: 섹션 잠금 해제 버튼 -->
+              <div class="section-lock-area">
+                <span class="material-symbols-outlined" style="color: #F59E0B; font-size: 18px;">lock</span>
+                <div style="flex: 1;">
+                  <p class="text-caption text-gray" style="margin: 0;">
+                    이 섹션은 잠겨있습니다. 수정하려면 잠금을 해제하세요.
+                  </p>
+                </div>
+                <button class="btn-unlock" onclick="unlockSection('${section.id}')">
+                  <span class="material-symbols-outlined" style="font-size: 16px;">lock_open</span>
+                  잠금 해제
+                </button>
+              </div>
+            ` : ''}
           </div>
-          <textarea
-            class="form-textarea"
-            rows="5"
-            data-section-id="${section.id}"
-            onchange="markAsChanged()"
-            ${section.locked ? 'disabled' : ''}
-          >${section.content || ''}</textarea>
-          ${section.locked ? `
-            <p class="text-caption text-gray mt-2">
-              <span class="material-symbols-outlined" style="font-size: 14px;">info</span>
-              이 섹션은 잠겨있습니다. 수정하려면 잠금을 해제하세요.
-            </p>
-          ` : ''}
-        </div>
-      `).join('');
+        `;
+      }).join('');
+    }
+
+    // NEW - UFR-MEET-055: 섹션 잠금 해제
+    function unlockSection(sectionId) {
+      UIComponents.confirm(
+        '이 섹션의 잠금을 해제하시겠습니까? 해제 후에는 내용을 수정할 수 있습니다.',
+        () => {
+          const section = currentMeeting.sections.find(s => s.id === sectionId);
+          if (section) {
+            section.locked = false;
+            renderEditSections();
+            UIComponents.showToast('섹션 잠금이 해제되었습니다', 'success');
+            markAsChanged();
+          }
+        },
+        () => {}
+      );
     }
 
     // 변경사항 표시
@@ -341,6 +761,13 @@
     function saveMeeting() {
       if (!currentMeeting) return;
 
+      // 충돌 확인
+      if (conflicts.length > 0) {
+        UIComponents.showToast('먼저 충돌을 해결해주세요', 'warning');
+        showConflictResolution();
+        return;
+      }
+
       collectMeetingData();
 
       UIComponents.showLoading('저장하는 중...');
@@ -353,7 +780,7 @@
         UIComponents.showToast('회의록이 저장되었습니다', 'success');
 
         setTimeout(() => {
-          cancelEdit();
+          window.location.href = '12-회의록목록조회.html';
         }, 1000);
       }, 800);
     }
@@ -380,10 +807,12 @@
       currentMeeting = null;
       isEditMode = false;
       hasUnsavedChanges = false;
+      conflicts = [];
+      currentConflict = null;
 
       document.getElementById('listMode').style.display = 'block';
       document.getElementById('editMode').style.display = 'none';
-      document.querySelector('.bottom-nav').style.display = 'flex';
+      document.getElementById('conflictBanner').classList.remove('active');
 
       renderMeetingList();
     }
diff --git a/design/uiux/prototype/12-회의록목록조회.html b/design/uiux/prototype/12-회의록목록조회.html
new file mode 100644
index 0000000..5471719
--- /dev/null
+++ b/design/uiux/prototype/12-회의록목록조회.html
@@ -0,0 +1,1021 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의록 대시보드 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: var(--color-gray-50);
+    }
+
+    /* Header */
+    .meeting-header {
+      background-color: var(--color-white);
+      border-bottom: 1px solid var(--color-gray-200);
+      padding: var(--spacing-6);
+    }
+
+    .header-content {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .back-button {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      color: var(--color-gray-600);
+      text-decoration: none;
+      font-size: var(--font-size-body-small);
+      margin-bottom: var(--spacing-4);
+      transition: color var(--transition-fast);
+    }
+
+    .back-button:hover {
+      color: var(--color-primary-main);
+    }
+
+    .meeting-title {
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .meeting-meta-row {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+      flex-wrap: wrap;
+      margin-bottom: var(--spacing-4);
+    }
+
+    .meeting-meta-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+
+    /* Tabs */
+    .tabs {
+      display: flex;
+      gap: var(--spacing-2);
+      border-bottom: 1px solid var(--color-gray-200);
+    }
+
+    .tab {
+      padding: var(--spacing-3) var(--spacing-4);
+      font-size: var(--font-size-body);
+      color: var(--color-gray-600);
+      text-decoration: none;
+      border-bottom: 2px solid transparent;
+      transition: all var(--transition-fast);
+    }
+
+    .tab:hover {
+      color: var(--color-primary-main);
+    }
+
+    .tab.active {
+      color: var(--color-primary-main);
+      border-bottom-color: var(--color-primary-main);
+      font-weight: var(--font-weight-medium);
+    }
+
+    /* Main Content */
+    .dashboard-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-6);
+    }
+
+    /* Section */
+    .dashboard-section {
+      background-color: var(--color-white);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      margin-bottom: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-4);
+      padding-bottom: var(--spacing-3);
+      border-bottom: 2px solid var(--color-gray-100);
+    }
+
+    .section-title {
+      font-size: var(--font-size-h3);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .section-icon {
+      font-size: 24px;
+    }
+
+    /* 핵심내용 섹션 */
+    .key-points {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-4);
+    }
+
+    .key-point-item {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      background-color: var(--color-gray-50);
+      border-radius: var(--radius-md);
+      border-left: 3px solid var(--color-primary-main);
+    }
+
+    .key-point-number {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      min-width: 28px;
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      border-radius: var(--radius-full);
+      font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-body-small);
+    }
+
+    .key-point-text {
+      flex: 1;
+      color: var(--color-gray-800);
+      line-height: 1.6;
+    }
+
+    .keywords {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-2);
+      margin-top: var(--spacing-4);
+    }
+
+    .keyword-tag {
+      padding: var(--spacing-2) var(--spacing-3);
+      background-color: rgba(0, 217, 177, 0.1);
+      color: var(--color-primary-main);
+      border-radius: var(--radius-full);
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .meeting-stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: var(--spacing-4);
+      margin-top: var(--spacing-4);
+      padding-top: var(--spacing-4);
+      border-top: 1px solid var(--color-gray-200);
+    }
+
+    .stat-item {
+      text-align: center;
+    }
+
+    .stat-value {
+      font-size: var(--font-size-h3);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-primary-main);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .stat-label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+
+    /* 결정사항 섹션 */
+    .decisions-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-4);
+    }
+
+    .decision-item {
+      padding: var(--spacing-4);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      transition: all var(--transition-fast);
+    }
+
+    .decision-item:hover {
+      box-shadow: var(--shadow-sm);
+      border-color: var(--color-primary-main);
+    }
+
+    .decision-content {
+      color: var(--color-gray-900);
+      font-weight: var(--font-weight-medium);
+      margin-bottom: var(--spacing-3);
+      line-height: 1.6;
+    }
+
+    .decision-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+      flex-wrap: wrap;
+    }
+
+    .decision-meta-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+    }
+
+    .decision-background {
+      margin-top: var(--spacing-3);
+      padding: var(--spacing-3);
+      background-color: var(--color-gray-50);
+      border-radius: var(--radius-sm);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-700);
+      line-height: 1.5;
+    }
+
+    /* Todo 진행상황 섹션 */
+    .todo-filters {
+      display: flex;
+      gap: var(--spacing-2);
+      margin-bottom: var(--spacing-4);
+      flex-wrap: wrap;
+    }
+
+    .filter-button {
+      padding: var(--spacing-2) var(--spacing-3);
+      border: 1px solid var(--color-gray-300);
+      background-color: var(--color-white);
+      border-radius: var(--radius-full);
+      font-size: var(--font-size-body-small);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+
+    .filter-button:hover {
+      border-color: var(--color-primary-main);
+      color: var(--color-primary-main);
+    }
+
+    .filter-button.active {
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      border-color: var(--color-primary-main);
+    }
+
+    .todo-groups {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-5);
+    }
+
+    .todo-group {
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+    }
+
+    .group-header {
+      padding: var(--spacing-3) var(--spacing-4);
+      background-color: var(--color-gray-50);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid var(--color-gray-200);
+    }
+
+    .assignee-info {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+    }
+
+    .todo-count {
+      background-color: var(--color-primary-main);
+      color: var(--color-white);
+      padding: 2px 8px;
+      border-radius: var(--radius-full);
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .group-todos {
+      padding: var(--spacing-2);
+    }
+
+    .todo-card {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      transition: all var(--transition-fast);
+      cursor: pointer;
+    }
+
+    .todo-card:hover {
+      box-shadow: var(--shadow-sm);
+      border-color: var(--color-primary-main);
+    }
+
+    .todo-main {
+      flex: 1;
+    }
+
+    .todo-title {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .todo-progress {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .progress-bar {
+      flex: 1;
+      height: 6px;
+      background-color: var(--color-gray-200);
+      border-radius: var(--radius-full);
+      overflow: hidden;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background-color: var(--color-primary-main);
+      transition: width var(--transition-base);
+    }
+
+    .progress-text {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      min-width: 40px;
+      text-align: right;
+    }
+
+    .todo-side {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: var(--spacing-2);
+    }
+
+    .duedate {
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .duedate.urgent { color: var(--color-error-main); }
+    .duedate.warning { color: var(--color-warning-main); }
+    .duedate.normal { color: var(--color-gray-600); }
+
+    /* 참고자료 섹션 */
+    .reference-tabs {
+      display: flex;
+      gap: var(--spacing-2);
+      margin-bottom: var(--spacing-4);
+      border-bottom: 1px solid var(--color-gray-200);
+    }
+
+    .ref-tab {
+      padding: var(--spacing-2) var(--spacing-3);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all var(--transition-fast);
+    }
+
+    .ref-tab:hover {
+      color: var(--color-primary-main);
+    }
+
+    .ref-tab.active {
+      color: var(--color-primary-main);
+      border-bottom-color: var(--color-primary-main);
+      font-weight: var(--font-weight-medium);
+    }
+
+    .reference-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-3);
+    }
+
+    .reference-item {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      border: 1px solid var(--color-gray-200);
+      border-radius: var(--radius-md);
+      text-decoration: none;
+      transition: all var(--transition-fast);
+    }
+
+    .reference-item:hover {
+      box-shadow: var(--shadow-sm);
+      border-color: var(--color-primary-main);
+    }
+
+    .ref-icon {
+      width: 40px;
+      height: 40px;
+      min-width: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--color-gray-100);
+      border-radius: var(--radius-md);
+      font-size: 20px;
+    }
+
+    .ref-content {
+      flex: 1;
+    }
+
+    .ref-title {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .ref-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .ref-summary {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-700);
+      line-height: 1.5;
+    }
+
+    .relevance-score {
+      padding: var(--spacing-1) var(--spacing-2);
+      background-color: rgba(0, 217, 177, 0.1);
+      color: var(--color-primary-main);
+      border-radius: var(--radius-sm);
+      font-size: var(--font-size-caption);
+      font-weight: var(--font-weight-medium);
+    }
+
+    /* Empty State */
+    .empty-state {
+      text-align: center;
+      padding: var(--spacing-8) var(--spacing-4);
+      color: var(--color-gray-500);
+    }
+
+    .empty-icon {
+      font-size: 48px;
+      margin-bottom: var(--spacing-3);
+    }
+
+    /* Responsive */
+    @media (max-width: 767px) {
+      .meeting-header {
+        padding: var(--spacing-4);
+      }
+
+      .dashboard-content {
+        padding: var(--spacing-4);
+      }
+
+      .dashboard-section {
+        padding: var(--spacing-4);
+      }
+
+      .meeting-title {
+        font-size: var(--font-size-h3);
+      }
+
+      .section-title {
+        font-size: var(--font-size-h4);
+      }
+
+      .meeting-stats {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .decision-meta {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-2);
+      }
+
+      .todo-filters {
+        overflow-x: auto;
+        flex-wrap: nowrap;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Header -->
+  <header class="meeting-header">
+    <div class="header-content">
+      <a href="02-대시보드.html" class="back-button">
+        ← 대시보드
+      </a>
+      <h1 class="meeting-title">2024 Q4 마케팅 전략 회의</h1>
+      <div class="meeting-meta-row">
+        <div class="meeting-meta-item">
+          <span>📅</span>
+          <span>2024-01-15 14:00</span>
+        </div>
+        <div class="meeting-meta-item">
+          <span>📍</span>
+          <span>본사 대회의실</span>
+        </div>
+        <div class="meeting-meta-item">
+          <span>👥</span>
+          <span>참석자 5명</span>
+        </div>
+      </div>
+      <div class="tabs">
+        <a href="09-회의록공유.html" class="tab">회의록</a>
+        <a href="#" class="tab active">대시보드</a>
+        <a href="#" class="tab">타임라인</a>
+      </div>
+    </div>
+  </header>
+
+  <!-- Dashboard Content -->
+  <main class="dashboard-content">
+    <!-- 핵심내용 섹션 -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="section-icon">💡</span>
+          핵심내용
+        </h2>
+      </div>
+      <div class="key-points">
+        <div class="key-point-item">
+          <div class="key-point-number">1</div>
+          <div class="key-point-text">
+            Q4 마케팅 예산을 전년 대비 30% 증액하여 디지털 채널 확대에 집중하기로 결정
+          </div>
+        </div>
+        <div class="key-point-item">
+          <div class="key-point-number">2</div>
+          <div class="key-point-text">
+            신규 인플루언서 마케팅 캠페인을 2월부터 시작하며, 타겟 연령층을 20-30대로 설정
+          </div>
+        </div>
+        <div class="key-point-item">
+          <div class="key-point-number">3</div>
+          <div class="key-point-text">
+            경쟁사 분석 결과를 바탕으로 가격 정책 재조정 필요, 가격 탄력성 분석 선행 필요
+          </div>
+        </div>
+        <div class="key-point-item">
+          <div class="key-point-number">4</div>
+          <div class="key-point-text">
+            브랜드 리뉴얼 작업을 3월까지 완료하고, 4월에 대규모 리브랜딩 캠페인 론칭 계획
+          </div>
+        </div>
+      </div>
+
+      <div class="keywords">
+        <span class="keyword-tag">#디지털마케팅</span>
+        <span class="keyword-tag">#예산증액</span>
+        <span class="keyword-tag">#인플루언서</span>
+        <span class="keyword-tag">#가격정책</span>
+        <span class="keyword-tag">#브랜드리뉴얼</span>
+      </div>
+
+      <div class="meeting-stats">
+        <div class="stat-item">
+          <div class="stat-value">5명</div>
+          <div class="stat-label">참석자</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">90분</div>
+          <div class="stat-label">회의 시간</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">32회</div>
+          <div class="stat-label">발언 횟수</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-value">8개</div>
+          <div class="stat-label">주요 의제</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 결정사항 섹션 -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="section-icon">✅</span>
+          결정사항
+        </h2>
+      </div>
+      <div class="decisions-list">
+        <div class="decision-item">
+          <div class="decision-content">
+            Q4 마케팅 예산 30% 증액 승인 (총 3억 → 3.9억)
+          </div>
+          <div class="decision-meta">
+            <div class="decision-meta-item">
+              <span>👤</span>
+              <span>결정자: 김민준 (마케팅 본부장)</span>
+            </div>
+            <div class="decision-meta-item">
+              <span>🕐</span>
+              <span>14:25</span>
+            </div>
+          </div>
+          <div class="decision-background">
+            <strong>배경:</strong> 디지털 채널 성과가 예상을 상회하며, 경쟁사 대비 투자 비중이 낮아 시장 점유율 확대를 위해 예산 증액 필요
+          </div>
+        </div>
+
+        <div class="decision-item">
+          <div class="decision-content">
+            인플루언서 마케팅 캠페인 2월 1일 론칭 결정
+          </div>
+          <div class="decision-meta">
+            <div class="decision-meta-item">
+              <span>👤</span>
+              <span>결정자: 박서연 (디지털 마케팅 팀장)</span>
+            </div>
+            <div class="decision-meta-item">
+              <span>🕐</span>
+              <span>14:45</span>
+            </div>
+          </div>
+          <div class="decision-background">
+            <strong>배경:</strong> 인플루언서 마케팅의 ROI가 기존 채널 대비 2배 높으며, 타겟 고객층 도달률이 우수하여 조기 론칭 결정
+          </div>
+        </div>
+
+        <div class="decision-item">
+          <div class="decision-content">
+            브랜드 리뉴얼 프로젝트 3월 말 완료 목표 설정
+          </div>
+          <div class="decision-meta">
+            <div class="decision-meta-item">
+              <span>👤</span>
+              <span>결정자: 이준호 (브랜드 전략 팀장)</span>
+            </div>
+            <div class="decision-meta-item">
+              <span>🕐</span>
+              <span>15:20</span>
+            </div>
+          </div>
+          <div class="decision-background">
+            <strong>배경:</strong> 현재 브랜드 이미지가 타겟 고객층과 괴리가 있으며, 4월 리브랜딩 캠페인 론칭 일정에 맞추기 위해 3월 완료 필요
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Todo 진행상황 섹션 -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="section-icon">📋</span>
+          Todo 진행상황
+        </h2>
+      </div>
+
+      <div class="todo-filters">
+        <button class="filter-button active">전체 (12)</button>
+        <button class="filter-button">시작 전 (3)</button>
+        <button class="filter-button">진행 중 (6)</button>
+        <button class="filter-button">완료 (3)</button>
+      </div>
+
+      <div class="todo-groups">
+        <!-- 담당자 그룹 1 -->
+        <div class="todo-group">
+          <div class="group-header">
+            <div class="assignee-info">
+              <span>👤</span>
+              <span>박서연 (디지털 마케팅 팀장)</span>
+            </div>
+            <div class="todo-count">4개</div>
+          </div>
+          <div class="group-todos">
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">인플루언서 후보 리스트 작성 및 제안서 준비</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 75%"></div>
+                  </div>
+                  <div class="progress-text">75%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-5</div>
+                <span class="badge badge-warning">높음</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">디지털 채널별 예산 배분 계획 수립</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 40%"></div>
+                  </div>
+                  <div class="progress-text">40%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate warning">D-2</div>
+                <span class="badge badge-error">긴급</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">SNS 채널 성과 분석 리포트 작성</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 100%"></div>
+                  </div>
+                  <div class="progress-text">100%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <span class="badge badge-success">완료</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">인플루언서 마케팅 KPI 설정</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 0%"></div>
+                  </div>
+                  <div class="progress-text">0%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-10</div>
+                <span class="badge badge-neutral">보통</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 담당자 그룹 2 -->
+        <div class="todo-group">
+          <div class="group-header">
+            <div class="assignee-info">
+              <span>👤</span>
+              <span>이준호 (브랜드 전략 팀장)</span>
+            </div>
+            <div class="todo-count">3개</div>
+          </div>
+          <div class="group-todos">
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">브랜드 리뉴얼 디자인 시안 1차 검토</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 60%"></div>
+                  </div>
+                  <div class="progress-text">60%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-7</div>
+                <span class="badge badge-warning">높음</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">브랜드 가이드라인 문서 업데이트</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 30%"></div>
+                  </div>
+                  <div class="progress-text">30%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-14</div>
+                <span class="badge badge-neutral">보통</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">리브랜딩 캠페인 타임라인 수립</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 0%"></div>
+                  </div>
+                  <div class="progress-text">0%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate normal">D-20</div>
+                <span class="badge badge-neutral">보통</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 담당자 그룹 3 -->
+        <div class="todo-group">
+          <div class="group-header">
+            <div class="assignee-info">
+              <span>👤</span>
+              <span>최유진 (가격 전략 팀장)</span>
+            </div>
+            <div class="todo-count">2개</div>
+          </div>
+          <div class="group-todos">
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">가격 탄력성 분석 보고서 작성</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 50%"></div>
+                  </div>
+                  <div class="progress-text">50%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <div class="duedate urgent">D-1</div>
+                <span class="badge badge-error">긴급</span>
+              </div>
+            </div>
+
+            <div class="todo-card">
+              <div class="todo-main">
+                <div class="todo-title">경쟁사 가격 정책 비교 분석</div>
+                <div class="todo-progress">
+                  <div class="progress-bar">
+                    <div class="progress-fill" style="width: 100%"></div>
+                  </div>
+                  <div class="progress-text">100%</div>
+                </div>
+              </div>
+              <div class="todo-side">
+                <span class="badge badge-success">완료</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 참고자료 섹션 -->
+    <section class="dashboard-section">
+      <div class="section-header">
+        <h2 class="section-title">
+          <span class="section-icon">📚</span>
+          참고자료
+        </h2>
+      </div>
+
+      <div class="reference-tabs">
+        <div class="ref-tab active">관련 회의록 (3)</div>
+        <div class="ref-tab">프로젝트 문서 (5)</div>
+        <div class="ref-tab">이슈 트래커 (2)</div>
+        <div class="ref-tab">위키 페이지 (4)</div>
+      </div>
+
+      <div class="reference-list">
+        <a href="#" class="reference-item">
+          <div class="ref-icon">📄</div>
+          <div class="ref-content">
+            <div class="ref-title">2024 Q3 마케팅 전략 회의</div>
+            <div class="ref-meta">
+              <span>2023-12-20</span>
+              <span>•</span>
+              <span>김민준</span>
+              <span>•</span>
+              <span class="relevance-score">관련도 92%</span>
+            </div>
+            <div class="ref-summary">
+              이전 분기 마케팅 전략 회의로, 디지털 채널 투자 확대 방향성이 처음 논의되었으며, 예산 증액 근거 자료로 활용 가능
+            </div>
+          </div>
+        </a>
+
+        <a href="#" class="reference-item">
+          <div class="ref-icon">📄</div>
+          <div class="ref-content">
+            <div class="ref-title">인플루언서 마케팅 효과 분석 회의</div>
+            <div class="ref-meta">
+              <span>2024-01-05</span>
+              <span>•</span>
+              <span>박서연</span>
+              <span>•</span>
+              <span class="relevance-score">관련도 88%</span>
+            </div>
+            <div class="ref-summary">
+              인플루언서 마케팅 ROI 분석 결과를 다룬 회의로, 이번 캠페인 론칭 결정의 주요 근거 자료
+            </div>
+          </div>
+        </a>
+
+        <a href="#" class="reference-item">
+          <div class="ref-icon">📄</div>
+          <div class="ref-content">
+            <div class="ref-title">브랜드 리뉴얼 킥오프 회의</div>
+            <div class="ref-meta">
+              <span>2023-12-15</span>
+              <span>•</span>
+              <span>이준호</span>
+              <span>•</span>
+              <span class="relevance-score">관련도 85%</span>
+            </div>
+            <div class="ref-summary">
+              브랜드 리뉴얼 프로젝트 시작 회의로, 리뉴얼 방향성과 타임라인이 최초 설정되었으며 현재 진행 상황 추적 가능
+            </div>
+          </div>
+        </a>
+      </div>
+    </section>
+  </main>
+
+  <!-- JavaScript -->
+  <script src="common.js"></script>
+  <script>
+    const { AppState, Storage, Toast, navigateTo } = window.MeetingApp;
+
+    // 필터 버튼 이벤트
+    const filterButtons = document.querySelectorAll('.filter-button');
+    filterButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        filterButtons.forEach(btn => btn.classList.remove('active'));
+        button.classList.add('active');
+        // 필터링 로직 구현
+        Toast.info(`${button.textContent} 필터 적용`);
+      });
+    });
+
+    // 참고자료 탭 이벤트
+    const refTabs = document.querySelectorAll('.ref-tab');
+    refTabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        refTabs.forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        // 탭 전환 로직 구현
+        Toast.info(`${tab.textContent} 탭으로 전환`);
+      });
+    });
+
+    // Todo 카드 클릭 이벤트
+    const todoCards = document.querySelectorAll('.todo-card');
+    todoCards.forEach(card => {
+      card.addEventListener('click', () => {
+        navigateTo('09-Todo관리.html');
+      });
+    });
+
+    // 참고자료 클릭 이벤트
+    const refItems = document.querySelectorAll('.reference-item');
+    refItems.forEach(item => {
+      item.addEventListener('click', (e) => {
+        e.preventDefault();
+        Toast.info('관련 문서로 이동합니다');
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/design/uiux/prototype/common.css b/design/uiux/prototype/common.css
index bdcf217..cf58303 100644
--- a/design/uiux/prototype/common.css
+++ b/design/uiux/prototype/common.css
@@ -1,65 +1,61 @@
-/**
+/*
  * 회의록 작성 및 공유 개선 서비스 - 공통 스타일시트
- * Mobile First Design
- * 작성일: 2025-10-21
+ * 버전: 1.0
+ * 작성일: 2025-10-20
+ * 레퍼런스: 스타일 가이드 v1.0
  */
 
-/* ========================================
-   1. CSS 변수 정의
-   ======================================== */
+/* ===== CSS Reset ===== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* ===== Root Variables (CSS Custom Properties) ===== */
 :root {
-  /* Primary Colors (Blue) */
-  --primary-50: #E3F2FD;
-  --primary-100: #BBDEFB;
-  --primary-200: #90CAF9;
-  --primary-300: #64B5F6;
-  --primary-400: #42A5F5;
-  --primary-500: #2196F3;
-  --primary-600: #1E88E5;
-  --primary-700: #1976D2;
-  --primary-800: #1565C0;
-  --primary-900: #0D47A1;
+  /* Primary Colors */
+  --color-primary-light: #4DFFDB;
+  --color-primary-main: #00D9B1;
+  --color-primary-dark: #00A88A;
 
   /* Secondary Colors */
-  --secondary-50: #E8F5E9;
-  --secondary-100: #C8E6C9;
-  --secondary-500: #4CAF50;
-  --secondary-700: #388E3C;
-  --secondary-900: #1B5E20;
-
-  /* Accent Colors (Purple - AI) */
-  --accent-50: #F3E5F5;
-  --accent-100: #E1BEE7;
-  --accent-500: #9C27B0;
-  --accent-700: #7B1FA2;
+  --color-secondary-light: #A5B4FC;
+  --color-secondary-main: #6366F1;
+  --color-secondary-dark: #4F46E5;
 
   /* Semantic Colors */
-  --success: #4CAF50;
-  --success-bg: #E8F5E9;
-  --warning: #FF9800;
-  --warning-bg: #FFF3E0;
-  --error: #F44336;
-  --error-bg: #FFEBEE;
-  --info: #2196F3;
-  --info-bg: #E3F2FD;
+  --color-success-light: #6EE7B7;
+  --color-success-main: #10B981;
+  --color-success-dark: #059669;
 
-  /* Neutral Colors (Gray) */
-  --gray-50: #FAFAFA;
-  --gray-100: #F5F5F5;
-  --gray-200: #EEEEEE;
-  --gray-300: #E0E0E0;
-  --gray-400: #BDBDBD;
-  --gray-500: #9E9E9E;
-  --gray-600: #757575;
-  --gray-700: #616161;
-  --gray-800: #424242;
-  --gray-900: #212121;
+  --color-warning-light: #FCD34D;
+  --color-warning-main: #F59E0B;
+  --color-warning-dark: #D97706;
 
-  /* White & Black */
-  --white: #FFFFFF;
-  --black: #000000;
+  --color-error-light: #FCA5A5;
+  --color-error-main: #EF4444;
+  --color-error-dark: #DC2626;
 
-  /* Spacing */
+  --color-info-light: #93C5FD;
+  --color-info-main: #3B82F6;
+  --color-info-dark: #2563EB;
+
+  /* Neutral Colors */
+  --color-gray-50: #F9FAFB;
+  --color-gray-100: #F3F4F6;
+  --color-gray-200: #E5E7EB;
+  --color-gray-300: #D1D5DB;
+  --color-gray-400: #9CA3AF;
+  --color-gray-500: #6B7280;
+  --color-gray-600: #4B5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1F2937;
+  --color-gray-900: #111827;
+  --color-white: #FFFFFF;
+  --color-black: #000000;
+
+  /* Spacing System (8px base) */
   --spacing-0: 0;
   --spacing-1: 4px;
   --spacing-2: 8px;
@@ -71,173 +67,113 @@
   --spacing-10: 40px;
   --spacing-12: 48px;
   --spacing-16: 64px;
+  --spacing-20: 80px;
 
-  /* Typography */
-  --font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Noto Sans KR', sans-serif;
-  --font-secondary: 'Inter', 'Roboto', Arial, sans-serif;
-  --font-code: 'Monaco', 'Courier New', monospace;
+  /* Font Sizes */
+  --font-size-display: 48px;
+  --font-size-h1: 36px;
+  --font-size-h2: 30px;
+  --font-size-h3: 24px;
+  --font-size-h4: 20px;
+  --font-size-body-large: 18px;
+  --font-size-body: 16px;
+  --font-size-body-small: 14px;
+  --font-size-caption: 12px;
+
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line Heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
 
   /* Border Radius */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
-  --radius-full: 9999px;
+  --radius-full: 50%;
 
   /* Shadows */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.15);
 
   /* Transitions */
-  --transition-fast: 0.1s;
-  --transition-normal: 0.2s;
-  --transition-slow: 0.3s;
+  --transition-fast: 150ms ease-out;
+  --transition-base: 200ms ease-out;
+  --transition-slow: 300ms ease-out;
 
   /* Z-index */
-  --z-base: 1;
-  --z-dropdown: 10;
-  --z-sticky: 50;
-  --z-fixed: 100;
-  --z-modal-backdrop: 1000;
-  --z-modal: 1001;
-  --z-toast: 2000;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-modal-backdrop: 1200;
+  --z-modal: 1300;
+  --z-toast: 1400;
+  --z-tooltip: 1500;
 }
 
-/* ========================================
-   2. Reset & Base Styles
-   ======================================== */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
+/* ===== Typography ===== */
+body {
+  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+               'Apple SD Gothic Neo', sans-serif;
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-normal);
+  color: var(--color-gray-600);
+  background-color: var(--color-gray-50);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-body {
-  font-family: var(--font-primary);
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--gray-800);
-  background-color: var(--gray-50);
-  min-height: 100vh;
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-gray-900);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
 }
 
-/* ========================================
-   3. Typography Classes
-   ======================================== */
-/* Headings */
-.text-h1 {
-  font-size: 32px;
-  font-weight: 700;
-  line-height: 1.2;
-  color: var(--gray-900);
+h1 { font-size: var(--font-size-h1); letter-spacing: -0.02em; }
+h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); }
+h3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); }
+h4 { font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); }
+
+a {
+  color: var(--color-primary-main);
+  text-decoration: none;
+  transition: color var(--transition-fast);
 }
 
-.text-h2 {
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 1.3;
-  color: var(--gray-900);
+a:hover {
+  color: var(--color-primary-dark);
 }
 
-.text-h3 {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--gray-900);
+/* ===== Layout Utilities ===== */
+.container {
+  width: 100%;
+  padding: 0 var(--spacing-6);
+  margin: 0 auto;
 }
 
-.text-h4 {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--gray-900);
+@media (min-width: 768px) {
+  .container { padding: 0 var(--spacing-8); }
 }
 
-.text-h5 {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1.5;
-  color: var(--gray-900);
+@media (min-width: 1024px) {
+  .container { padding: 0 var(--spacing-16); }
 }
 
-.text-h6 {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.5;
-  color: var(--gray-900);
-}
+.container-small { max-width: 640px; }
+.container-medium { max-width: 768px; }
+.container-large { max-width: 1024px; }
+.container-xlarge { max-width: 1280px; }
+.container-2xlarge { max-width: 1536px; }
 
-/* Body */
-.text-body-lg {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-}
-
-.text-body {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-}
-
-.text-body-sm {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 1.5;
-}
-
-.text-caption {
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.4;
-  color: var(--gray-600);
-}
-
-/* Buttons */
-.text-btn-lg {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.0;
-}
-
-.text-btn {
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.0;
-}
-
-.text-btn-sm {
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1.0;
-}
-
-/* Label */
-.text-label {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.0;
-  color: var(--gray-700);
-}
-
-/* Code */
-.text-code {
-  font-family: var(--font-code);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-}
-
-/* ========================================
-   4. Button Styles
-   ======================================== */
+/* ===== Button Styles ===== */
 .btn {
   display: inline-flex;
   align-items: center;
@@ -246,105 +182,122 @@ body {
   padding: var(--spacing-3) var(--spacing-6);
   border: none;
   border-radius: var(--radius-md);
-  font-family: var(--font-primary);
-  font-size: 16px;
-  font-weight: 600;
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
   cursor: pointer;
-  transition: all var(--transition-normal);
+  transition: all var(--transition-fast);
   text-decoration: none;
   white-space: nowrap;
-  user-select: none;
 }
 
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Primary Button */
 .btn-primary {
-  background: var(--primary-500);
-  color: var(--white);
+  background-color: var(--color-primary-main);
+  color: var(--color-white);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--color-primary-light);
+  transform: translateY(-1px);
   box-shadow: var(--shadow-sm);
 }
 
-.btn-primary:hover {
-  background: var(--primary-600);
-  box-shadow: var(--shadow-md);
-}
-
-.btn-primary:active {
-  background: var(--primary-700);
+.btn-primary:active:not(:disabled) {
+  background-color: var(--color-primary-dark);
   transform: scale(0.98);
 }
 
 .btn-primary:disabled {
-  background: var(--gray-200);
-  color: var(--gray-400);
-  cursor: not-allowed;
-  box-shadow: none;
+  background-color: var(--color-gray-300);
+  color: var(--color-gray-500);
 }
 
+/* Secondary Button */
 .btn-secondary {
-  background: var(--white);
-  color: var(--primary-500);
-  border: 1px solid var(--primary-500);
+  background-color: transparent;
+  color: var(--color-primary-main);
+  border: 1px solid var(--color-primary-main);
 }
 
-.btn-secondary:hover {
-  background: var(--primary-50);
-  border-color: var(--primary-600);
+.btn-secondary:hover:not(:disabled) {
+  background-color: rgba(0, 217, 177, 0.1);
 }
 
+.btn-secondary:active:not(:disabled) {
+  background-color: rgba(0, 217, 177, 0.2);
+}
+
+.btn-secondary:disabled {
+  border-color: var(--color-gray-300);
+  color: var(--color-gray-400);
+}
+
+/* Text Button */
 .btn-text {
-  background: transparent;
-  color: var(--primary-500);
+  background-color: transparent;
+  color: var(--color-gray-700);
   padding: var(--spacing-2) var(--spacing-4);
 }
 
-.btn-text:hover {
-  background: var(--primary-50);
+.btn-text:hover:not(:disabled) {
+  background-color: var(--color-gray-100);
 }
 
+.btn-text:active:not(:disabled) {
+  background-color: var(--color-gray-200);
+}
+
+/* Button Sizes */
+.btn-sm { padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-body-small); }
+.btn-lg { padding: var(--spacing-4) var(--spacing-8); font-size: var(--font-size-body-large); }
+
+/* Icon Button */
 .btn-icon {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   padding: 0;
-  border-radius: var(--radius-full);
-  background: transparent;
+  border-radius: var(--radius-md);
+  background-color: transparent;
 }
 
-.btn-icon:hover {
-  background: var(--gray-100);
+.btn-icon:hover:not(:disabled) {
+  background-color: var(--color-gray-100);
 }
 
-.btn-sm {
-  padding: var(--spacing-2) var(--spacing-4);
-  font-size: 14px;
-}
+.btn-icon-sm { width: 32px; height: 32px; }
+.btn-icon-lg { width: 48px; height: 48px; }
 
-.btn-lg {
-  padding: var(--spacing-4) var(--spacing-8);
-  font-size: 18px;
-}
-
-/* FAB (Floating Action Button) */
-.btn-fab {
+/* Floating Action Button */
+.fab {
   position: fixed;
-  bottom: var(--spacing-6);
-  right: var(--spacing-6);
+  right: var(--spacing-4);
+  bottom: var(--spacing-4);
   width: 56px;
   height: 56px;
   padding: 0;
   border-radius: var(--radius-full);
-  background: var(--primary-500);
-  color: var(--white);
-  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
-  z-index: var(--z-fixed);
+  background-color: var(--color-primary-main);
+  color: var(--color-white);
+  box-shadow: var(--shadow-md);
+  z-index: var(--z-sticky);
 }
 
-.btn-fab:hover {
-  transform: scale(1.1);
-  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.5);
+.fab:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  transform: translateY(-2px);
 }
 
-/* ========================================
-   5. Form Styles
-   ======================================== */
+.fab:active {
+  transform: scale(0.95);
+}
+
+/* ===== Form Styles ===== */
 .form-group {
   margin-bottom: var(--spacing-4);
 }
@@ -352,14 +305,9 @@ body {
 .form-label {
   display: block;
   margin-bottom: var(--spacing-2);
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--gray-700);
-}
-
-.form-label.required::after {
-  content: ' *';
-  color: var(--error);
+  font-size: var(--font-size-body-small);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-700);
 }
 
 .form-input,
@@ -367,109 +315,76 @@ body {
 .form-select {
   width: 100%;
   padding: var(--spacing-3) var(--spacing-4);
-  border: 1px solid var(--gray-300);
+  border: 1px solid var(--color-gray-300);
   border-radius: var(--radius-md);
-  font-family: var(--font-primary);
-  font-size: 16px; /* iOS zoom prevention */
-  background: var(--white);
-  transition: border-color var(--transition-normal), outline var(--transition-normal);
+  font-size: var(--font-size-body);
+  font-family: inherit;
+  background-color: var(--color-white);
+  transition: all var(--transition-fast);
+}
+
+.form-input {
+  height: 48px;
+}
+
+.form-textarea {
+  min-height: 120px;
+  resize: vertical;
 }
 
 .form-input:focus,
 .form-textarea:focus,
 .form-select:focus {
-  outline: 2px solid var(--primary-100);
-  border-color: var(--primary-500);
+  outline: 4px solid rgba(0, 217, 177, 0.2);
+  border-color: var(--color-primary-main);
+  border-width: 2px;
 }
 
-.form-input.error,
-.form-textarea.error,
-.form-select.error {
-  border-color: var(--error);
-  outline: 2px solid rgba(244, 67, 54, 0.1);
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--color-gray-400);
 }
 
 .form-input:disabled,
 .form-textarea:disabled,
 .form-select:disabled {
-  background: var(--gray-100);
-  color: var(--gray-400);
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-400);
   cursor: not-allowed;
 }
 
-.form-textarea {
-  min-height: 100px;
-  resize: vertical;
-}
-
-.form-select {
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 12px center;
-  background-size: 20px;
-  padding-right: 40px;
+.form-input.error,
+.form-textarea.error,
+.form-select.error {
+  border-color: var(--color-error-main);
 }
 
 .form-error {
+  display: block;
   margin-top: var(--spacing-1);
-  font-size: 12px;
-  color: var(--error);
+  font-size: var(--font-size-body-small);
+  color: var(--color-error-main);
 }
 
-/* Checkbox */
-.form-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  cursor: pointer;
-  user-select: none;
-}
-
-.form-checkbox input[type="checkbox"] {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--gray-400);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  appearance: none;
-  background: var(--white);
-  position: relative;
-}
-
-.form-checkbox input[type="checkbox"]:checked {
-  background: var(--primary-500);
-  border-color: var(--primary-500);
-}
-
-.form-checkbox input[type="checkbox"]:checked::after {
-  content: '✓';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: var(--white);
-  font-size: 14px;
-  font-weight: 700;
-}
-
-/* ========================================
-   6. Card Styles
-   ======================================== */
+/* ===== Card Styles ===== */
 .card {
-  background: var(--white);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-200);
   border-radius: var(--radius-lg);
   padding: var(--spacing-6);
   box-shadow: var(--shadow-sm);
-  transition: box-shadow var(--transition-normal);
+  transition: all var(--transition-base);
 }
 
-.card:hover {
+.card.interactive:hover {
   box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+  cursor: pointer;
 }
 
-.card.clickable {
-  cursor: pointer;
+.card.interactive:active {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transform: scale(0.99);
 }
 
 .card-header {
@@ -477,530 +392,389 @@ body {
 }
 
 .card-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--gray-900);
-  margin-bottom: var(--spacing-2);
-}
-
-.card-subtitle {
-  font-size: 14px;
-  color: var(--gray-600);
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-900);
 }
 
 .card-body {
-  margin-bottom: var(--spacing-4);
+  color: var(--color-gray-600);
 }
 
-.card-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-2);
-  padding-top: var(--spacing-4);
-  border-top: 1px solid var(--gray-200);
-}
-
-/* ========================================
-   7. Badge Styles
-   ======================================== */
+/* ===== Badge Styles ===== */
 .badge {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-1);
   padding: var(--spacing-1) var(--spacing-3);
-  border-radius: var(--radius-full);
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
 }
 
-.badge-status {
-  padding: 4px 12px;
+.badge-primary {
+  background-color: var(--color-primary-light);
+  color: var(--color-primary-dark);
 }
 
-.badge-draft {
-  background: var(--warning-bg);
-  color: #E65100;
+.badge-success {
+  background-color: var(--color-success-light);
+  color: var(--color-success-dark);
 }
 
-.badge-confirmed {
-  background: var(--success-bg);
-  color: #2E7D32;
+.badge-warning {
+  background-color: var(--color-warning-light);
+  color: var(--color-warning-dark);
 }
 
-.badge-shared {
-  background: var(--info-bg);
-  color: var(--primary-700);
+.badge-error {
+  background-color: var(--color-error-light);
+  color: var(--color-error-dark);
 }
 
-.badge-count {
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  background: var(--error);
-  color: var(--white);
-  border-radius: var(--radius-full);
-  font-size: 11px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.badge-neutral {
+  background-color: var(--color-gray-200);
+  color: var(--color-gray-700);
 }
 
-.badge-priority-high {
-  background: var(--error-bg);
-  color: var(--error);
-}
-
-.badge-priority-medium {
-  background: var(--warning-bg);
-  color: #E65100;
-}
-
-.badge-priority-low {
-  background: var(--gray-100);
-  color: var(--gray-700);
-}
-
-/* ========================================
-   8. Modal Styles
-   ======================================== */
-.modal-overlay {
-  display: none;
+/* ===== Modal Styles ===== */
+.modal-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   z-index: var(--z-modal-backdrop);
+  display: flex;
   align-items: center;
   justify-content: center;
+  padding: var(--spacing-4);
+  opacity: 0;
+  animation: fadeIn var(--transition-base);
+  animation-fill-mode: forwards;
 }
 
-.modal-overlay.active {
-  display: flex;
-}
-
-.modal-container {
-  background: var(--white);
+.modal {
+  background-color: var(--color-white);
   border-radius: var(--radius-xl);
-  max-width: 500px;
-  width: calc(100% - 32px);
+  padding: var(--spacing-8);
+  max-width: 600px;
+  width: 100%;
   max-height: 90vh;
   overflow-y: auto;
   box-shadow: var(--shadow-lg);
+  z-index: var(--z-modal);
+  opacity: 0;
+  transform: scale(0.95);
+  animation: modalIn var(--transition-base);
+  animation-fill-mode: forwards;
 }
 
 .modal-header {
-  padding: var(--spacing-6);
-  border-bottom: 1px solid var(--gray-200);
+  margin-bottom: var(--spacing-6);
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 .modal-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--gray-900);
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-900);
 }
 
 .modal-close {
-  background: transparent;
-  border: none;
-  font-size: 24px;
-  color: var(--gray-600);
-  cursor: pointer;
   padding: var(--spacing-2);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-gray-500);
+  font-size: 24px;
   line-height: 1;
+  transition: color var(--transition-fast);
+}
+
+.modal-close:hover {
+  color: var(--color-gray-700);
 }
 
 .modal-body {
-  padding: var(--spacing-6);
+  margin-bottom: var(--spacing-8);
 }
 
 .modal-footer {
-  padding: var(--spacing-6);
-  border-top: 1px solid var(--gray-200);
   display: flex;
+  gap: var(--spacing-3);
   justify-content: flex-end;
-  gap: var(--spacing-2);
 }
 
-/* Mobile: Full Screen Modal */
-@media (max-width: 767px) {
-  .modal-container {
-    width: 100%;
-    height: 100%;
-    max-height: 100vh;
-    border-radius: 0;
+@keyframes fadeIn {
+  to { opacity: 1; }
+}
+
+@keyframes modalIn {
+  to {
+    opacity: 1;
+    transform: scale(1);
   }
 }
 
-/* ========================================
-   9. Toast / Snackbar
-   ======================================== */
-.toast {
+/* ===== Toast Styles ===== */
+.toast-container {
   position: fixed;
-  bottom: var(--spacing-6);
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--gray-800);
-  color: var(--white);
-  padding: var(--spacing-3) var(--spacing-6);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
+  top: var(--spacing-4);
+  right: var(--spacing-4);
   z-index: var(--z-toast);
-  min-width: 250px;
-  text-align: center;
-  font-size: 14px;
-  animation: slideUp 0.3s ease-out;
-  display: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
 }
 
-.toast.active {
-  display: block;
+.toast {
+  background-color: var(--color-white);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4) var(--spacing-5);
+  max-width: 400px;
+  box-shadow: var(--shadow-md);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  border-left: 4px solid var(--color-gray-400);
+  animation: slideInRight var(--transition-base);
 }
 
-.toast.success {
-  background: var(--success);
+.toast-success { border-left-color: var(--color-success-main); }
+.toast-error { border-left-color: var(--color-error-main); }
+.toast-warning { border-left-color: var(--color-warning-main); }
+.toast-info { border-left-color: var(--color-info-main); }
+
+.toast-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
 }
 
-.toast.error {
-  background: var(--error);
+.toast-content {
+  flex: 1;
 }
 
-.toast.warning {
-  background: var(--warning);
+.toast-title {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-1);
 }
 
-@keyframes slideUp {
+.toast-message {
+  font-size: var(--font-size-body-small);
+  color: var(--color-gray-600);
+}
+
+.toast-close {
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-gray-500);
+  font-size: 16px;
+  line-height: 1;
+}
+
+@keyframes slideInRight {
   from {
-    transform: translate(-50%, 20px);
+    transform: translateX(400px);
     opacity: 0;
   }
   to {
-    transform: translate(-50%, 0);
+    transform: translateX(0);
     opacity: 1;
   }
 }
 
-/* ========================================
-   10. Layout Components
-   ======================================== */
-.page {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+/* ===== Loading Styles ===== */
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--color-gray-200);
+  border-top-color: var(--color-primary-main);
+  border-radius: var(--radius-full);
+  animation: spin 1s linear infinite;
 }
 
-.header {
-  background: var(--white);
-  border-bottom: 1px solid var(--gray-200);
-  padding: var(--spacing-4);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: sticky;
-  top: 0;
-  z-index: var(--z-sticky);
-}
-
-.header-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--gray-900);
-}
-
-.content {
-  flex: 1;
-  padding: var(--spacing-4);
-  overflow-y: auto;
-}
-
-.footer {
-  background: var(--white);
-  border-top: 1px solid var(--gray-200);
-  padding: var(--spacing-4);
-}
-
-/* Bottom Navigation */
-.bottom-nav {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: var(--white);
-  border-top: 1px solid var(--gray-200);
-  display: flex;
-  justify-content: space-around;
-  padding: var(--spacing-2) 0;
-  z-index: var(--z-fixed);
-}
-
-.bottom-nav-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-1);
-  padding: var(--spacing-2);
-  color: var(--gray-600);
-  text-decoration: none;
-  font-size: 12px;
-  min-width: 60px;
-  transition: color var(--transition-normal);
-}
-
-.bottom-nav-item.active {
-  color: var(--primary-500);
-}
-
-.bottom-nav-icon {
-  font-size: 24px;
-}
-
-/* ========================================
-   11. Utility Classes
-   ======================================== */
-/* Display */
-.d-none { display: none !important; }
-.d-block { display: block !important; }
-.d-flex { display: flex !important; }
-.d-grid { display: grid !important; }
-
-/* Flex */
-.flex-row { flex-direction: row; }
-.flex-column { flex-direction: column; }
-.align-center { align-items: center; }
-.align-start { align-items: flex-start; }
-.align-end { align-items: flex-end; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.justify-end { justify-content: flex-end; }
-.gap-1 { gap: var(--spacing-1); }
-.gap-2 { gap: var(--spacing-2); }
-.gap-3 { gap: var(--spacing-3); }
-.gap-4 { gap: var(--spacing-4); }
-.gap-6 { gap: var(--spacing-6); }
-
-/* Spacing */
-.m-0 { margin: 0; }
-.m-1 { margin: var(--spacing-1); }
-.m-2 { margin: var(--spacing-2); }
-.m-3 { margin: var(--spacing-3); }
-.m-4 { margin: var(--spacing-4); }
-.m-6 { margin: var(--spacing-6); }
-.mt-2 { margin-top: var(--spacing-2); }
-.mt-4 { margin-top: var(--spacing-4); }
-.mb-2 { margin-bottom: var(--spacing-2); }
-.mb-4 { margin-bottom: var(--spacing-4); }
-.mb-6 { margin-bottom: var(--spacing-6); }
-
-.p-0 { padding: 0; }
-.p-2 { padding: var(--spacing-2); }
-.p-4 { padding: var(--spacing-4); }
-.p-6 { padding: var(--spacing-6); }
-
-/* Text */
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-.text-primary { color: var(--primary-500); }
-.text-success { color: var(--success); }
-.text-error { color: var(--error); }
-.text-gray { color: var(--gray-600); }
-
-/* Background */
-.bg-white { background: var(--white); }
-.bg-gray { background: var(--gray-50); }
-.bg-primary { background: var(--primary-500); color: var(--white); }
-
-/* Width */
-.w-full { width: 100%; }
-.w-auto { width: auto; }
-
-/* Cursor */
-.cursor-pointer { cursor: pointer; }
-
-/* ========================================
-   12. Responsive Breakpoints
-   ======================================== */
-/* Mobile: 320px ~ 767px (default) */
-
-/* Tablet: 768px ~ 1023px */
-@media (min-width: 768px) {
-  .content {
-    padding: var(--spacing-6);
-  }
-
-  .text-h1 {
-    font-size: 32px;
-  }
-
-  .bottom-nav {
-    display: none; /* Use sidebar instead */
-  }
-}
-
-/* Desktop: 1024px+ */
-@media (min-width: 1024px) {
-  .content {
-    padding: var(--spacing-8);
-  }
-
-  .text-body-lg {
-    font-size: 18px;
-  }
-
-  .text-body {
-    font-size: 16px;
-  }
-}
-
-/* ========================================
-   13. Animations
-   ======================================== */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
+.spinner-sm { width: 24px; height: 24px; border-width: 3px; }
+.spinner-lg { width: 56px; height: 56px; border-width: 5px; }
 
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
 
+.skeleton {
+  background-color: var(--color-gray-200);
+  border-radius: var(--radius-sm);
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
 }
 
-/* Loading Spinner */
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid var(--gray-200);
-  border-top-color: var(--primary-500);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
+/* ===== Utility Classes ===== */
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+.mt-1 { margin-top: var(--spacing-1); }
+.mt-2 { margin-top: var(--spacing-2); }
+.mt-3 { margin-top: var(--spacing-3); }
+.mt-4 { margin-top: var(--spacing-4); }
+.mt-6 { margin-top: var(--spacing-6); }
+.mt-8 { margin-top: var(--spacing-8); }
+
+.mb-1 { margin-bottom: var(--spacing-1); }
+.mb-2 { margin-bottom: var(--spacing-2); }
+.mb-3 { margin-bottom: var(--spacing-3); }
+.mb-4 { margin-bottom: var(--spacing-4); }
+.mb-6 { margin-bottom: var(--spacing-6); }
+.mb-8 { margin-bottom: var(--spacing-8); }
+
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.gap-2 { gap: var(--spacing-2); }
+.gap-3 { gap: var(--spacing-3); }
+.gap-4 { gap: var(--spacing-4); }
+
+.hidden { display: none; }
+.block { display: block; }
+
+/* ===== 회의록 서비스 특화 스타일 ===== */
+
+/* 상태 배지 - 회의록 전용 */
+.status-draft {
+  background-color: var(--color-warning-light);
+  color: var(--color-warning-dark);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
 }
 
-.spinner-sm {
-  width: 20px;
-  height: 20px;
-  border-width: 2px;
+.status-verifying {
+  background-color: var(--color-info-light);
+  color: var(--color-info-dark);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
 }
 
-/* ========================================
-   14. Service Specific Components
-   ======================================== */
-/* 회의록 리스트 아이템 */
-.meeting-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  padding: var(--spacing-4);
-  background: var(--white);
-  border-radius: var(--radius-md);
-  margin-bottom: var(--spacing-2);
-  cursor: pointer;
-  transition: background var(--transition-normal);
-}
-
-.meeting-item:hover {
-  background: var(--gray-50);
-}
-
-/* Todo 아이템 */
-.todo-item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-3);
-  padding: var(--spacing-4);
-  background: var(--white);
-  border-radius: var(--radius-md);
-  border-left: 4px solid transparent;
-  margin-bottom: var(--spacing-2);
-  transition: border-color var(--transition-normal);
-}
-
-.todo-item.completed {
-  opacity: 0.6;
-  border-left-color: var(--success);
-}
-
-.todo-item.overdue {
-  border-left-color: var(--error);
-}
-
-.todo-item.due-soon {
-  border-left-color: var(--warning);
+.status-confirmed {
+  background-color: var(--color-success-light);
+  color: var(--color-success-dark);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
 }
 
 /* 전문용어 하이라이트 */
 .term-highlight {
-  background: linear-gradient(180deg, transparent 60%, var(--accent-200) 60%);
+  border-bottom: 2px dotted var(--color-primary-main);
   cursor: pointer;
-  border-bottom: 1px dotted var(--accent-500);
-  transition: background var(--transition-normal);
+  transition: color var(--transition-fast);
 }
 
 .term-highlight:hover {
-  background: var(--accent-100);
+  color: var(--color-primary-dark);
 }
 
-/* AI 처리 인디케이터 */
-.ai-processing {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-3) var(--spacing-4);
-  background: var(--accent-50);
+/* AI 제안 영역 */
+.ai-suggestion {
+  background-color: var(--color-gray-50);
+  border: 1px dashed var(--color-primary-main);
   border-radius: var(--radius-md);
-  border-left: 4px solid var(--accent-500);
-  font-size: 13px;
-  color: var(--accent-700);
+  padding: var(--spacing-4);
+  margin: var(--spacing-4) 0;
+  position: relative;
 }
 
-.ai-icon {
-  width: 20px;
-  height: 20px;
-  animation: spin 2s linear infinite;
-}
-
-/* 검증 완료 배지 */
-.verified-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  background: var(--success);
-  color: var(--white);
-  padding: 4px 12px;
-  border-radius: var(--radius-full);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-/* ========================================
-   15. Accessibility
-   ======================================== */
-*:focus {
-  outline: 2px solid var(--primary-500);
-  outline-offset: 2px;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-.sr-only {
+.ai-suggestion::before {
+  content: "✨ AI 제안";
   position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+  top: -10px;
+  left: var(--spacing-4);
+  background-color: var(--color-white);
+  padding: 0 var(--spacing-2);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-primary-main);
+}
+
+/* Todo 카드 */
+.todo-card {
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+  box-shadow: var(--shadow-sm);
+  position: relative;
+}
+
+.todo-card.priority-high {
+  border-left: 4px solid var(--color-error-main);
+}
+
+.todo-card.priority-medium {
+  border-left: 4px solid var(--color-warning-main);
+}
+
+.todo-progress {
+  height: 4px;
+  background-color: var(--color-gray-200);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: var(--spacing-3);
+}
+
+.todo-progress-bar {
+  height: 100%;
+  background-color: var(--color-primary-main);
+  transition: width var(--transition-slow);
+}
+
+/* 협업 커서 (예시) */
+.collab-cursor {
+  position: absolute;
+  width: 2px;
+  height: 20px;
+  pointer-events: none;
+  z-index: 100;
+}
+
+.collab-cursor-label {
+  position: absolute;
+  top: -24px;
+  left: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-caption);
+  color: var(--color-white);
+  white-space: nowrap;
+}
+
+/* 반응형 유틸리티 */
+@media (max-width: 767px) {
+  .hide-mobile { display: none !important; }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hide-tablet { display: none !important; }
+}
+
+@media (min-width: 1024px) {
+  .hide-desktop { display: none !important; }
 }
diff --git a/design/uiux/prototype/common.js b/design/uiux/prototype/common.js
index f1b70db..18d6b68 100644
--- a/design/uiux/prototype/common.js
+++ b/design/uiux/prototype/common.js
@@ -1,990 +1,556 @@
-/**
- * 회의록 작성 및 공유 개선 서비스 - 공통 JavaScript
- * Mobile First Design
- * 작성일: 2025-10-21
+/*
+ * 회의록 작성 및 공유 개선 서비스 - 공통 자바스크립트
+ * 버전: 1.0
+ * 작성일: 2025-10-20
+ * 레퍼런스: 스타일 가이드 v1.0
  */
 
-/* ========================================
-   1. 전역 설정 및 상수
-   ======================================== */
-const APP_CONFIG = {
-  APP_NAME: '회의록 작성 및 공유 개선 서비스',
-  STORAGE_KEYS: {
-    USER: 'current_user',
-    MEETINGS: 'meetings_data',
-    TODOS: 'todos_data',
-    TEMPLATES: 'templates_data',
-    INITIALIZED: 'app_initialized'
+// ===== 전역 상태 관리 =====
+const AppState = {
+  currentUser: {
+    id: 'user-001',
+    name: '김민준',
+    email: 'minjun.kim@example.com',
+    avatar: 'https://ui-avatars.com/api/?name=김민준&background=00D9B1&color=fff'
   },
-  ROUTES: {
-    LOGIN: '01-로그인.html',
-    DASHBOARD: '02-대시보드.html',
-    MEETING_SCHEDULE: '03-회의예약.html',
-    TEMPLATE_SELECT: '04-템플릿선택.html',
-    MEETING_IN_PROGRESS: '05-회의진행.html',
-    VERIFICATION: '06-검증완료.html',
-    MEETING_END: '07-회의종료.html',
-    MEETING_SHARE: '08-회의록공유.html',
-    TODO_MANAGE: '09-Todo관리.html',
-    MEETING_DETAIL: '10-회의록상세조회.html',
-    MEETING_EDIT: '11-회의록수정.html'
+  meetings: [],
+  todos: []
+};
+
+// ===== 유틸리티 함수 =====
+
+/**
+ * DOM 준비 완료 시 콜백 실행
+ */
+function ready(callback) {
+  if (document.readyState !== 'loading') {
+    callback();
+  } else {
+    document.addEventListener('DOMContentLoaded', callback);
+  }
+}
+
+/**
+ * 날짜 포맷팅 (YYYY-MM-DD HH:mm)
+ */
+function formatDateTime(date) {
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  const hours = String(d.getHours()).padStart(2, '0');
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+/**
+ * 상대 시간 표현 (방금 전, 3분 전, 2시간 전 등)
+ */
+function timeAgo(date) {
+  const now = new Date();
+  const past = new Date(date);
+  const diff = Math.floor((now - past) / 1000); // 초 단위
+
+  if (diff < 60) return '방금 전';
+  if (diff < 3600) return `${Math.floor(diff / 60)}분 전`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}시간 전`;
+  if (diff < 2592000) return `${Math.floor(diff / 86400)}일 전`;
+  if (diff < 31536000) return `${Math.floor(diff / 2592000)}개월 전`;
+  return `${Math.floor(diff / 31536000)}년 전`;
+}
+
+/**
+ * D-day 계산
+ */
+function getDday(targetDate) {
+  const now = new Date();
+  now.setHours(0, 0, 0, 0);
+  const target = new Date(targetDate);
+  target.setHours(0, 0, 0, 0);
+  const diff = Math.floor((target - now) / (1000 * 60 * 60 * 24));
+
+  if (diff === 0) return '오늘';
+  if (diff > 0) return `D-${diff}`;
+  return `D+${Math.abs(diff)} (지남)`;
+}
+
+/**
+ * UUID 생성 (간단한 버전)
+ */
+function generateUUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0;
+    const v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+
+// ===== 모달 관리 =====
+const Modal = {
+  /**
+   * 모달 열기
+   */
+  open(modalId) {
+    const modal = document.getElementById(modalId);
+    if (!modal) return;
+
+    modal.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
+
+    // backdrop 클릭 시 모달 닫기
+    const backdrop = modal.querySelector('.modal-backdrop');
+    if (backdrop) {
+      backdrop.addEventListener('click', (e) => {
+        if (e.target === backdrop) {
+          this.close(modalId);
+        }
+      });
+    }
+
+    // 닫기 버튼
+    const closeBtn = modal.querySelector('.modal-close');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => this.close(modalId));
+    }
+  },
+
+  /**
+   * 모달 닫기
+   */
+  close(modalId) {
+    const modal = document.getElementById(modalId);
+    if (!modal) return;
+
+    modal.style.display = 'none';
+    document.body.style.overflow = 'auto';
   }
 };
 
-// 더미 사용자 데이터
-const DUMMY_USERS = [
-  { id: 'EMP001', password: '1234', name: '김철수', email: 'kim@company.com', role: '기획팀', position: '팀장' },
-  { id: 'EMP002', password: '1234', name: '이영희', email: 'lee@company.com', role: '개발팀', position: '선임' },
-  { id: 'EMP003', password: '1234', name: '박민수', email: 'park@company.com', role: '디자인팀', position: '사원' },
-  { id: 'EMP004', password: '1234', name: '정수진', email: 'jung@company.com', role: '기획팀', position: '사원' },
-  { id: 'EMP005', password: '1234', name: '최동욱', email: 'choi@company.com', role: '개발팀', position: '팀장' }
-];
+// ===== 토스트 알림 =====
+const Toast = {
+  container: null,
 
-// 템플릿 데이터
-const TEMPLATES = {
-  general: {
-    id: 'TPL001',
-    name: '일반 회의',
-    type: 'general',
-    icon: '📝',
-    description: '참석자, 안건, 논의 내용, 결정 사항, Todo',
-    sections: [
-      { id: 'SEC_participants', name: '참석자', order: 1, content: '' },
-      { id: 'SEC_agenda', name: '안건', order: 2, content: '' },
-      { id: 'SEC_discussion', name: '논의 내용', order: 3, content: '' },
-      { id: 'SEC_decisions', name: '결정 사항', order: 4, content: '' },
-      { id: 'SEC_todos', name: 'Todo', order: 5, content: '' }
-    ],
-    isDefault: true
-  },
-  scrum: {
-    id: 'TPL002',
-    name: '스크럼 회의',
-    type: 'scrum',
-    icon: '🏃',
-    description: '어제 한 일, 오늘 할 일, 이슈',
-    sections: [
-      { id: 'SEC_yesterday', name: '어제 한 일', order: 1, content: '' },
-      { id: 'SEC_today', name: '오늘 할 일', order: 2, content: '' },
-      { id: 'SEC_issues', name: '이슈', order: 3, content: '' }
-    ],
-    isDefault: false
-  },
-  kickoff: {
-    id: 'TPL003',
-    name: '프로젝트 킥오프',
-    type: 'kickoff',
-    icon: '🚀',
-    description: '프로젝트 개요, 목표, 일정, 역할, 리스크',
-    sections: [
-      { id: 'SEC_overview', name: '프로젝트 개요', order: 1, content: '' },
-      { id: 'SEC_goals', name: '목표', order: 2, content: '' },
-      { id: 'SEC_schedule', name: '일정', order: 3, content: '' },
-      { id: 'SEC_roles', name: '역할', order: 4, content: '' },
-      { id: 'SEC_risks', name: '리스크', order: 5, content: '' }
-    ],
-    isDefault: false
-  },
-  weekly: {
-    id: 'TPL004',
-    name: '주간 회의',
-    type: 'weekly',
-    icon: '📅',
-    description: '주간 실적, 주요 이슈, 다음 주 계획',
-    sections: [
-      { id: 'SEC_performance', name: '주간 실적', order: 1, content: '' },
-      { id: 'SEC_issues', name: '주요 이슈', order: 2, content: '' },
-      { id: 'SEC_next_week', name: '다음 주 계획', order: 3, content: '' }
-    ],
-    isDefault: false
-  }
-};
-
-/* ========================================
-   2. 유틸리티 함수
-   ======================================== */
-const Utils = {
-  // 고유 ID 생성
-  generateId: (prefix = 'ID') => {
-    return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  /**
+   * 토스트 컨테이너 초기화
+   */
+  init() {
+    if (!this.container) {
+      this.container = document.createElement('div');
+      this.container.className = 'toast-container';
+      document.body.appendChild(this.container);
+    }
   },
 
-  // 날짜 포맷팅
-  formatDate: (date, format = 'YYYY-MM-DD') => {
-    if (!date) return '';
-    const d = new Date(date);
-    if (isNaN(d.getTime())) return '';
+  /**
+   * 토스트 표시
+   */
+  show(message, type = 'info', duration = 4000) {
+    this.init();
 
-    const year = d.getFullYear();
-    const month = String(d.getMonth() + 1).padStart(2, '0');
-    const day = String(d.getDate()).padStart(2, '0');
-    const hours = String(d.getHours()).padStart(2, '0');
-    const minutes = String(d.getMinutes()).padStart(2, '0');
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
 
-    const formats = {
-      'YYYY-MM-DD': `${year}-${month}-${day}`,
-      'YYYY.MM.DD': `${year}.${month}.${day}`,
-      'MM/DD': `${month}/${day}`,
-      'YYYY-MM-DD HH:mm': `${year}-${month}-${day} ${hours}:${minutes}`,
-      'HH:mm': `${hours}:${minutes}`
+    const icons = {
+      success: '✓',
+      error: '✕',
+      warning: '⚠',
+      info: 'ℹ'
     };
 
-    return formats[format] || formats['YYYY-MM-DD'];
-  },
+    toast.innerHTML = `
+      <div class="toast-icon">${icons[type] || icons.info}</div>
+      <div class="toast-content">
+        <div class="toast-message">${message}</div>
+      </div>
+      <button class="toast-close" onclick="this.parentElement.remove()">&times;</button>
+    `;
 
-  // 상대 시간 포맷팅
-  formatTimeAgo: (date) => {
-    if (!date) return '';
-    const now = new Date();
-    const past = new Date(date);
-    const diffMs = now - past;
-    const diffMinutes = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
+    this.container.appendChild(toast);
 
-    if (diffMinutes < 1) return '방금 전';
-    if (diffMinutes < 60) return `${diffMinutes}분 전`;
-    if (diffHours < 24) return `${diffHours}시간 전`;
-    if (diffDays < 7) return `${diffDays}일 전`;
-    return Utils.formatDate(date);
-  },
-
-  // 경과 시간 포맷팅 (milliseconds → HH:mm:ss)
-  formatDuration: (ms) => {
-    const totalSeconds = Math.floor(ms / 1000);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor((totalSeconds % 3600) / 60);
-    const seconds = totalSeconds % 60;
-
-    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-  },
-
-  // 시간 포맷팅 (HH:mm → 분 단위)
-  timeToMinutes: (timeString) => {
-    const [hours, minutes] = timeString.split(':').map(Number);
-    return hours * 60 + minutes;
-  },
-
-  // 문자열 자르기
-  truncateText: (text, maxLength) => {
-    if (!text || text.length <= maxLength) return text;
-    return text.substring(0, maxLength) + '...';
-  },
-
-  // 이메일 검증
-  isValidEmail: (email) => {
-    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return regex.test(email);
-  },
-
-  // 사번 검증 (EMP + 3자리 숫자)
-  isValidEmployeeId: (id) => {
-    const regex = /^EMP\d{3}$/;
-    return regex.test(id);
-  },
-
-  // DOM 헬퍼
-  $: (selector) => document.querySelector(selector),
-  $$: (selector) => document.querySelectorAll(selector),
-
-  // 엘리먼트 생성
-  createElement: (tag, className = '', attributes = {}) => {
-    const element = document.createElement(tag);
-    if (className) element.className = className;
-    Object.entries(attributes).forEach(([key, value]) => {
-      element.setAttribute(key, value);
-    });
-    return element;
-  },
-
-  // 디바운스
-  debounce: (func, wait = 300) => {
-    let timeout;
-    return function executedFunction(...args) {
-      const later = () => {
-        clearTimeout(timeout);
-        func(...args);
-      };
-      clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-    };
-  },
-
-  // 스로틀
-  throttle: (func, limit = 100) => {
-    let inThrottle;
-    return function(...args) {
-      if (!inThrottle) {
-        func.apply(this, args);
-        inThrottle = true;
-        setTimeout(() => inThrottle = false, limit);
+    // 자동 제거
+    setTimeout(() => {
+      if (toast.parentElement) {
+        toast.remove();
       }
-    };
+    }, duration);
   },
 
-  // 배열 섞기
-  shuffleArray: (array) => {
-    const newArray = [...array];
-    for (let i = newArray.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
-    }
-    return newArray;
-  }
+  success(message) { this.show(message, 'success'); },
+  error(message) { this.show(message, 'error'); },
+  warning(message) { this.show(message, 'warning'); },
+  info(message) { this.show(message, 'info'); }
 };
 
-/* ========================================
-   3. 로컬 스토리지 관리
-   ======================================== */
-const StorageManager = {
-  // 기본 CRUD
-  get: (key) => {
-    try {
-      const item = localStorage.getItem(key);
-      return item ? JSON.parse(item) : null;
-    } catch (e) {
-      console.error('Storage get error:', e);
-      return null;
-    }
-  },
-
-  set: (key, value) => {
+// ===== 로컬 스토리지 관리 =====
+const Storage = {
+  /**
+   * 데이터 저장
+   */
+  set(key, value) {
     try {
       localStorage.setItem(key, JSON.stringify(value));
       return true;
     } catch (e) {
-      console.error('Storage set error:', e);
+      console.error('Storage.set error:', e);
       return false;
     }
   },
 
-  remove: (key) => {
+  /**
+   * 데이터 가져오기
+   */
+  get(key, defaultValue = null) {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : defaultValue;
+    } catch (e) {
+      console.error('Storage.get error:', e);
+      return defaultValue;
+    }
+  },
+
+  /**
+   * 데이터 삭제
+   */
+  remove(key) {
     try {
       localStorage.removeItem(key);
       return true;
     } catch (e) {
-      console.error('Storage remove error:', e);
+      console.error('Storage.remove error:', e);
       return false;
     }
   },
 
-  clear: () => {
+  /**
+   * 전체 삭제
+   */
+  clear() {
     try {
       localStorage.clear();
       return true;
     } catch (e) {
-      console.error('Storage clear error:', e);
+      console.error('Storage.clear error:', e);
       return false;
     }
-  },
-
-  // 사용자 관련
-  getCurrentUser: () => {
-    return StorageManager.get(APP_CONFIG.STORAGE_KEYS.USER);
-  },
-
-  setCurrentUser: (user) => {
-    return StorageManager.set(APP_CONFIG.STORAGE_KEYS.USER, user);
-  },
-
-  logout: () => {
-    StorageManager.remove(APP_CONFIG.STORAGE_KEYS.USER);
-    NavigationHelper.navigate('LOGIN');
-  },
-
-  // 회의록 관련
-  getMeetings: () => {
-    return StorageManager.get(APP_CONFIG.STORAGE_KEYS.MEETINGS) || [];
-  },
-
-  getMeetingById: (id) => {
-    const meetings = StorageManager.getMeetings();
-    return meetings.find(m => m.id === id);
-  },
-
-  addMeeting: (meeting) => {
-    const meetings = StorageManager.getMeetings();
-    meetings.push(meeting);
-    return StorageManager.set(APP_CONFIG.STORAGE_KEYS.MEETINGS, meetings);
-  },
-
-  updateMeeting: (id, updates) => {
-    const meetings = StorageManager.getMeetings();
-    const index = meetings.findIndex(m => m.id === id);
-    if (index !== -1) {
-      meetings[index] = { ...meetings[index], ...updates, updatedAt: new Date().toISOString() };
-      return StorageManager.set(APP_CONFIG.STORAGE_KEYS.MEETINGS, meetings);
-    }
-    return false;
-  },
-
-  deleteMeeting: (id) => {
-    const meetings = StorageManager.getMeetings();
-    const filtered = meetings.filter(m => m.id !== id);
-    return StorageManager.set(APP_CONFIG.STORAGE_KEYS.MEETINGS, filtered);
-  },
-
-  // Todo 관련
-  getTodos: () => {
-    return StorageManager.get(APP_CONFIG.STORAGE_KEYS.TODOS) || [];
-  },
-
-  getTodoById: (id) => {
-    const todos = StorageManager.getTodos();
-    return todos.find(t => t.id === id);
-  },
-
-  addTodo: (todo) => {
-    const todos = StorageManager.getTodos();
-    todos.push(todo);
-    return StorageManager.set(APP_CONFIG.STORAGE_KEYS.TODOS, todos);
-  },
-
-  updateTodo: (id, updates) => {
-    const todos = StorageManager.getTodos();
-    const index = todos.findIndex(t => t.id === id);
-    if (index !== -1) {
-      todos[index] = { ...todos[index], ...updates };
-      return StorageManager.set(APP_CONFIG.STORAGE_KEYS.TODOS, todos);
-    }
-    return false;
-  },
-
-  deleteTodo: (id) => {
-    const todos = StorageManager.getTodos();
-    const filtered = todos.filter(t => t.id !== id);
-    return StorageManager.set(APP_CONFIG.STORAGE_KEYS.TODOS, filtered);
-  },
-
-  // 템플릿 관련
-  getTemplates: () => {
-    return TEMPLATES;
-  },
-
-  getTemplateById: (type) => {
-    return TEMPLATES[type] || TEMPLATES.general;
   }
 };
 
-/* ========================================
-   4. 네비게이션 헬퍼
-   ======================================== */
-const NavigationHelper = {
-  navigate: (routeKey, params = {}) => {
-    const route = APP_CONFIG.ROUTES[routeKey];
-    if (!route) {
-      console.error('Invalid route:', routeKey);
-      return;
-    }
-
-    // 파라미터를 query string으로 변환
-    const queryString = Object.keys(params).length > 0
-      ? '?' + Object.entries(params).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&')
-      : '';
-
-    window.location.href = route + queryString;
+// ===== API 호출 (Mock) =====
+const API = {
+  /**
+   * 지연 시뮬레이션
+   */
+  delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
   },
 
-  goBack: () => {
-    window.history.back();
+  /**
+   * GET 요청 (Mock)
+   */
+  async get(endpoint) {
+    await this.delay(500);
+    console.log(`API GET: ${endpoint}`);
+    return { success: true, data: {} };
   },
 
-  reload: () => {
-    window.location.reload();
+  /**
+   * POST 요청 (Mock)
+   */
+  async post(endpoint, data) {
+    await this.delay(500);
+    console.log(`API POST: ${endpoint}`, data);
+    return { success: true, data: {} };
   },
 
-  getCurrentPage: () => {
-    return window.location.pathname.split('/').pop();
+  /**
+   * PUT 요청 (Mock)
+   */
+  async put(endpoint, data) {
+    await this.delay(500);
+    console.log(`API PUT: ${endpoint}`, data);
+    return { success: true, data: {} };
   },
 
-  getQueryParams: () => {
-    const params = {};
-    const queryString = window.location.search.substring(1);
-    const pairs = queryString.split('&');
-
-    pairs.forEach(pair => {
-      const [key, value] = pair.split('=');
-      if (key) {
-        params[decodeURIComponent(key)] = decodeURIComponent(value || '');
-      }
-    });
-
-    return params;
-  },
-
-  getQueryParam: (key) => {
-    const params = NavigationHelper.getQueryParams();
-    return params[key] || null;
-  },
-
-  requireAuth: () => {
-    const user = StorageManager.getCurrentUser();
-    if (!user) {
-      NavigationHelper.navigate('LOGIN');
-      return false;
-    }
-    return true;
-  },
-
-  redirectToLogin: () => {
-    NavigationHelper.navigate('LOGIN');
+  /**
+   * DELETE 요청 (Mock)
+   */
+  async delete(endpoint) {
+    await this.delay(500);
+    console.log(`API DELETE: ${endpoint}`);
+    return { success: true };
   }
 };
 
-/* ========================================
-   5. UI 컴포넌트 생성기
-   ======================================== */
-const UIComponents = {
-  // Toast 메시지
-  showToast: (message, type = 'info', duration = 3000) => {
-    // 기존 toast 제거
-    const existing = Utils.$('.toast');
-    if (existing) existing.remove();
+// ===== 페이지 네비게이션 =====
+function navigateTo(page) {
+  // 실제로는 SPA 라우팅이나 페이지 이동 처리
+  // 프로토타입에서는 링크 클릭으로 처리
+  console.log(`Navigate to: ${page}`);
+  window.location.href = page;
+}
 
-    // 새 toast 생성
-    const toast = Utils.createElement('div', `toast ${type} active`);
-    toast.textContent = message;
-    document.body.appendChild(toast);
-
-    // 자동 제거
-    setTimeout(() => {
-      toast.classList.remove('active');
-      setTimeout(() => toast.remove(), 300);
-    }, duration);
+// ===== 폼 유효성 검사 =====
+const Validator = {
+  /**
+   * 이메일 유효성 검사
+   */
+  isEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
   },
 
-  // 로딩 인디케이터
-  showLoading: (message = '로딩 중...') => {
-    const existing = Utils.$('#loading-overlay');
-    if (existing) return;
-
-    const overlay = Utils.createElement('div', 'modal-overlay active', { id: 'loading-overlay' });
-    overlay.innerHTML = `
-      <div class="d-flex flex-column align-center gap-4" style="background: white; padding: 32px; border-radius: 12px;">
-        <div class="spinner"></div>
-        <p class="text-body">${message}</p>
-      </div>
-    `;
-    document.body.appendChild(overlay);
+  /**
+   * 필수 입력 검사
+   */
+  required(value) {
+    return value !== null && value !== undefined && value.trim() !== '';
   },
 
-  hideLoading: () => {
-    const overlay = Utils.$('#loading-overlay');
-    if (overlay) overlay.remove();
+  /**
+   * 최소 길이 검사
+   */
+  minLength(value, min) {
+    return value && value.length >= min;
   },
 
-  // 확인 다이얼로그
-  confirm: (message, onConfirm, onCancel) => {
-    const overlay = Utils.createElement('div', 'modal-overlay active');
-    overlay.innerHTML = `
-      <div class="modal-container">
-        <div class="modal-header">
-          <h2 class="modal-title">확인</h2>
-        </div>
-        <div class="modal-body">
-          <p class="text-body">${message}</p>
-        </div>
-        <div class="modal-footer">
-          <button class="btn btn-secondary" id="modal-cancel">취소</button>
-          <button class="btn btn-primary" id="modal-confirm">확인</button>
-        </div>
-      </div>
-    `;
-    document.body.appendChild(overlay);
-
-    Utils.$('#modal-confirm').addEventListener('click', () => {
-      overlay.remove();
-      if (onConfirm) onConfirm();
-    });
-
-    Utils.$('#modal-cancel').addEventListener('click', () => {
-      overlay.remove();
-      if (onCancel) onCancel();
-    });
-
-    overlay.addEventListener('click', (e) => {
-      if (e.target === overlay) {
-        overlay.remove();
-        if (onCancel) onCancel();
-      }
-    });
+  /**
+   * 최대 길이 검사
+   */
+  maxLength(value, max) {
+    return value && value.length <= max;
   },
 
-  // 모달 표시
-  showModal: (options) => {
-    const { title, content, footer, onClose } = options;
+  /**
+   * 폼 필드 에러 표시
+   */
+  showError(inputElement, message) {
+    inputElement.classList.add('error');
 
-    const overlay = Utils.createElement('div', 'modal-overlay active');
-    overlay.innerHTML = `
-      <div class="modal-container">
-        <div class="modal-header">
-          <h2 class="modal-title">${title}</h2>
-          <button class="modal-close" id="modal-close-btn">×</button>
-        </div>
-        <div class="modal-body">
-          ${content}
-        </div>
-        ${footer ? `<div class="modal-footer">${footer}</div>` : ''}
-      </div>
-    `;
-    document.body.appendChild(overlay);
-
-    // 닫기 버튼
-    Utils.$('#modal-close-btn').addEventListener('click', () => {
-      overlay.remove();
-      if (onClose) onClose();
-    });
-
-    // 오버레이 클릭 시 닫기
-    overlay.addEventListener('click', (e) => {
-      if (e.target === overlay) {
-        overlay.remove();
-        if (onClose) onClose();
-      }
-    });
-
-    return overlay;
+    let errorElement = inputElement.nextElementSibling;
+    if (!errorElement || !errorElement.classList.contains('form-error')) {
+      errorElement = document.createElement('span');
+      errorElement.className = 'form-error';
+      inputElement.parentElement.appendChild(errorElement);
+    }
+    errorElement.textContent = message;
   },
 
-  // 배지 생성
-  createBadge: (text, type = 'status') => {
-    const badgeClass = `badge badge-${type}`;
-    return `<span class="${badgeClass}">${text}</span>`;
+  /**
+   * 폼 필드 에러 제거
+   */
+  clearError(inputElement) {
+    inputElement.classList.remove('error');
+
+    const errorElement = inputElement.nextElementSibling;
+    if (errorElement && errorElement.classList.contains('form-error')) {
+      errorElement.remove();
+    }
+  }
+};
+
+// ===== 로딩 상태 관리 =====
+const Loading = {
+  /**
+   * 로딩 표시
+   */
+  show(target = 'body') {
+    const element = typeof target === 'string' ? document.querySelector(target) : target;
+    if (!element) return;
+
+    const spinner = document.createElement('div');
+    spinner.className = 'spinner';
+    spinner.id = 'global-spinner';
+    spinner.style.position = 'fixed';
+    spinner.style.top = '50%';
+    spinner.style.left = '50%';
+    spinner.style.transform = 'translate(-50%, -50%)';
+    spinner.style.zIndex = '9999';
+
+    document.body.appendChild(spinner);
   },
 
-  // 아바타 생성
-  createAvatar: (name, size = 40) => {
-    const initial = name ? name[0].toUpperCase() : '?';
-    const colors = ['#2196F3', '#4CAF50', '#FF9800', '#9C27B0', '#F44336'];
-    const colorIndex = name ? name.charCodeAt(0) % colors.length : 0;
-    const bgColor = colors[colorIndex];
+  /**
+   * 로딩 숨김
+   */
+  hide() {
+    const spinner = document.getElementById('global-spinner');
+    if (spinner) {
+      spinner.remove();
+    }
+  }
+};
 
-    return `
-      <div class="avatar" style="width: ${size}px; height: ${size}px; background: ${bgColor}; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: ${size / 2}px;">
-        ${initial}
-      </div>
-    `;
-  },
-
-  // 회의록 아이템 카드 생성
-  createMeetingItem: (meeting) => {
-    const statusText = {
+// ===== 회의록 관련 유틸리티 =====
+const MeetingUtils = {
+  /**
+   * 회의 상태 레이블
+   */
+  getStatusLabel(status) {
+    const labels = {
       'scheduled': '예정',
-      'in-progress': '진행중',
-      'draft': '작성중',
-      'confirmed': '확정완료'
+      'in_progress': '진행 중',
+      'ended': '종료',
+      'draft': '작성 중',
+      'verifying': '검증 중',
+      'confirmed': '확정됨'
     };
+    return labels[status] || status;
+  },
 
-    const statusClass = {
-      'scheduled': 'badge-shared',
-      'in-progress': 'badge-shared',
-      'draft': 'badge-draft',
-      'confirmed': 'badge-confirmed'
+  /**
+   * 회의 상태 클래스
+   */
+  getStatusClass(status) {
+    const classes = {
+      'draft': 'status-draft',
+      'verifying': 'status-verifying',
+      'confirmed': 'status-confirmed'
     };
-
-    return `
-      <div class="meeting-item" onclick="NavigationHelper.navigate('MEETING_DETAIL', { id: '${meeting.id}' })">
-        <div style="flex: 1;">
-          <h3 class="text-h5">${meeting.title}</h3>
-          <p class="text-caption text-gray">${Utils.formatDate(meeting.date)} ${meeting.startTime || ''} · ${meeting.attendees?.length || 0}명</p>
-        </div>
-        <div class="d-flex align-center gap-2">
-          ${UIComponents.createBadge(statusText[meeting.status] || '작성중', statusClass[meeting.status] || 'draft')}
-        </div>
-      </div>
-    `;
+    return classes[status] || 'badge-neutral';
   },
 
-  // Todo 아이템 카드 생성
-  createTodoItem: (todo) => {
-    const today = new Date();
-    const dueDate = new Date(todo.dueDate);
-    const diffDays = Math.ceil((dueDate - today) / (1000 * 60 * 60 * 24));
-
-    let itemClass = 'todo-item';
-    if (todo.completed) {
-      itemClass += ' completed';
-    } else if (diffDays < 0) {
-      itemClass += ' overdue';
-    } else if (diffDays <= 3) {
-      itemClass += ' due-soon';
-    }
-
-    const priorityBadge = todo.priority === 'high'
-      ? '<span class="badge badge-priority-high">높음</span>'
-      : todo.priority === 'medium'
-        ? '<span class="badge badge-priority-medium">보통</span>'
-        : '';
-
-    return `
-      <div class="${itemClass}">
-        <label class="form-checkbox">
-          <input type="checkbox" ${todo.completed ? 'checked' : ''}
-            onchange="handleTodoToggle('${todo.id}', this.checked)">
-        </label>
-        <div style="flex: 1;">
-          <p class="text-body" style="${todo.completed ? 'text-decoration: line-through; opacity: 0.6;' : ''}">${todo.content}</p>
-          <div class="d-flex align-center gap-3 mt-2">
-            <span class="text-caption">👤 ${todo.assignee}</span>
-            <span class="text-caption">📅 ${Utils.formatDate(todo.dueDate)}</span>
-            ${priorityBadge}
-          </div>
-        </div>
-        <button class="btn-icon" onclick="NavigationHelper.navigate('MEETING_DETAIL', { id: '${todo.meetingId}' })">→</button>
-      </div>
-    `;
+  /**
+   * Todo 우선순위 레이블
+   */
+  getPriorityLabel(priority) {
+    const labels = {
+      'high': '높음',
+      'medium': '보통',
+      'low': '낮음'
+    };
+    return labels[priority] || priority;
   },
 
-  // 진행률 바 생성
-  createProgressBar: (percent) => {
-    return `
-      <div class="progress-bar">
-        <div class="progress-fill" style="width: ${percent}%;"></div>
-      </div>
-    `;
-  },
-
-  // 원형 진행률 생성
-  createCircularProgress: (percent) => {
-    return `
-      <div class="circular-progress" style="--progress-percent: ${percent}%;">
-        <div class="progress-inner">
-          <span class="progress-percent">${Math.round(percent)}%</span>
-          <span class="progress-label">완료율</span>
-        </div>
-      </div>
-    `;
+  /**
+   * Todo 상태 레이블
+   */
+  getTodoStatusLabel(status) {
+    const labels = {
+      'todo': '시작 전',
+      'in_progress': '진행 중',
+      'done': '완료'
+    };
+    return labels[status] || status;
   }
 };
 
-/* ========================================
-   6. 폼 검증
-   ======================================== */
-const FormValidator = {
-  rules: {
-    required: (value) => {
-      return value.trim() !== '';
-    },
-    email: (value) => {
-      return Utils.isValidEmail(value);
-    },
-    minLength: (value, min) => {
-      return value.length >= min;
-    },
-    maxLength: (value, max) => {
-      return value.length <= max;
-    },
-    employeeId: (value) => {
-      return Utils.isValidEmployeeId(value);
-    }
-  },
-
-  messages: {
-    required: '필수 입력 항목입니다.',
-    email: '올바른 이메일 형식이 아닙니다.',
-    minLength: (min) => `최소 ${min}자 이상 입력해주세요.`,
-    maxLength: (max) => `최대 ${max}자까지 입력 가능합니다.`,
-    employeeId: '올바른 사번 형식이 아닙니다. (예: EMP001)'
-  },
-
-  validateField: (fieldElement, ruleName, ...args) => {
-    const value = fieldElement.value;
-    const rule = FormValidator.rules[ruleName];
-
-    if (!rule) {
-      console.error('Unknown validation rule:', ruleName);
-      return true;
-    }
-
-    const isValid = rule(value, ...args);
-
-    if (!isValid) {
-      const message = typeof FormValidator.messages[ruleName] === 'function'
-        ? FormValidator.messages[ruleName](...args)
-        : FormValidator.messages[ruleName];
-      FormValidator.showError(fieldElement, message);
-    } else {
-      FormValidator.clearError(fieldElement);
-    }
-
-    return isValid;
-  },
-
-  validate: (formElement) => {
-    let isValid = true;
-    const fields = formElement.querySelectorAll('[data-validate]');
-
-    fields.forEach(field => {
-      const rules = field.dataset.validate.split('|');
-      rules.forEach(rule => {
-        const [ruleName, ...args] = rule.split(':');
-        if (!FormValidator.validateField(field, ruleName, ...args)) {
-          isValid = false;
-        }
-      });
-    });
-
-    return isValid;
-  },
-
-  showError: (fieldElement, message) => {
-    FormValidator.clearError(fieldElement);
-
-    fieldElement.classList.add('error');
-    const errorDiv = Utils.createElement('div', 'form-error');
-    errorDiv.textContent = message;
-    fieldElement.parentNode.appendChild(errorDiv);
-  },
-
-  clearError: (fieldElement) => {
-    fieldElement.classList.remove('error');
-    const errorDiv = fieldElement.parentNode.querySelector('.form-error');
-    if (errorDiv) errorDiv.remove();
-  }
-};
-
-/* ========================================
-   7. 데이터 초기화
-   ======================================== */
-const DataInitializer = {
-  initializeSampleData: () => {
-    // 이미 초기화되었는지 확인
-    if (StorageManager.get(APP_CONFIG.STORAGE_KEYS.INITIALIZED)) {
-      return;
-    }
-
-    // 샘플 회의록 데이터
-    const sampleMeetings = [
+// ===== 예시 데이터 생성 =====
+const MockData = {
+  /**
+   * 샘플 회의 데이터
+   */
+  generateMeetings() {
+    return [
       {
-        id: 'MTG001',
-        title: '프로젝트 킥오프 회의',
-        date: '2025-10-20',
-        startTime: '10:00',
-        endTime: '11:30',
-        duration: 5400000,
-        location: '회의실 A',
-        attendees: ['김철수', '이영희', '박민수'],
-        template: 'kickoff',
-        status: 'confirmed',
-        sections: [
-          { id: 'SEC001', name: '프로젝트 개요', content: '신규 회의록 서비스 개발 프로젝트 킥오프', verified: true, verifiedBy: ['김철수', '이영희'] },
-          { id: 'SEC002', name: '목표', content: '2025년 Q4 런칭, Mobile First 설계', verified: true, verifiedBy: ['김철수'] },
-          { id: 'SEC003', name: '일정', content: '기획 2주, 설계 3주, 개발 8주, 테스트 2주', verified: true, verifiedBy: ['이영희'] },
-          { id: 'SEC004', name: '역할', content: '김철수(PM), 이영희(개발리드), 박민수(디자인)', verified: false, verifiedBy: [] },
-          { id: 'SEC005', name: '리스크', content: '일정 지연 가능성, AI 모델 성능', verified: false, verifiedBy: [] }
-        ],
-        createdBy: 'EMP001',
-        createdAt: '2025-10-20T09:00:00Z',
-        updatedAt: '2025-10-20T11:30:00Z',
-        confirmedAt: '2025-10-20T12:00:00Z',
-        sharedWith: ['EMP002', 'EMP003']
+        id: 'm-001',
+        title: '2025년 1분기 제품 기획 회의',
+        date: '2025-10-25 14:00',
+        location: '본사 2층 대회의실',
+        status: 'scheduled',
+        attendees: ['김민준', '박서연', '이준호', '최유진'],
+        description: '신규 회의록 서비스 기획 논의'
       },
       {
-        id: 'MTG002',
+        id: 'm-002',
         title: '주간 스크럼 회의',
-        date: '2025-10-21',
-        startTime: '09:00',
-        endTime: '09:30',
-        duration: 1800000,
-        location: '온라인',
-        attendees: ['김철수', '이영희', '정수진'],
-        template: 'scrum',
+        date: '2025-10-21 10:00',
+        location: 'Zoom',
         status: 'confirmed',
-        sections: [
-          { id: 'SEC011', name: '어제 한 일', content: 'API 설계 완료, 데이터베이스 스키마 정의', verified: true, verifiedBy: ['김철수'] },
-          { id: 'SEC012', name: '오늘 할 일', content: '프론트엔드 프로토타입 개발 시작', verified: true, verifiedBy: ['이영희'] },
-          { id: 'SEC013', name: '이슈', content: '외부 API 연동 지연 (해결 중)', verified: true, verifiedBy: ['정수진'] }
-        ],
-        createdBy: 'EMP001',
-        createdAt: '2025-10-21T08:30:00Z',
-        updatedAt: '2025-10-21T09:30:00Z',
-        confirmedAt: '2025-10-21T10:00:00Z',
-        sharedWith: ['EMP002', 'EMP004']
+        attendees: ['김민준', '이준호', '최유진'],
+        description: '지난 주 진행 상황 공유 및 이번 주 계획'
       },
       {
-        id: 'MTG003',
-        title: '디자인 리뷰 회의',
-        date: '2025-10-19',
-        startTime: '14:00',
-        endTime: '15:00',
-        duration: 3600000,
-        location: '회의실 B',
-        attendees: ['박민수', '김철수', '정수진'],
-        template: 'general',
-        status: 'draft',
-        sections: [
-          { id: 'SEC021', name: '참석자', content: '박민수, 김철수, 정수진', verified: false, verifiedBy: [] },
-          { id: 'SEC022', name: '안건', content: 'UI/UX 초안 검토', verified: false, verifiedBy: [] },
-          { id: 'SEC023', name: '논의 내용', content: 'Mobile First 접근 방식 확정, 컬러 시스템 논의 중', verified: false, verifiedBy: [] },
-          { id: 'SEC024', name: '결정 사항', content: '', verified: false, verifiedBy: [] },
-          { id: 'SEC025', name: 'Todo', content: '', verified: false, verifiedBy: [] }
-        ],
-        createdBy: 'EMP003',
-        createdAt: '2025-10-19T13:30:00Z',
-        updatedAt: '2025-10-19T15:00:00Z',
-        confirmedAt: null,
-        sharedWith: []
+        id: 'm-003',
+        title: 'AI 기능 개선 회의',
+        date: '2025-10-23 15:00',
+        location: '본사 3층 소회의실',
+        status: 'in_progress',
+        attendees: ['박서연', '이준호'],
+        description: 'LLM 기반 회의록 자동 작성 개선 방안'
       }
     ];
+  },
 
-    // 샘플 Todo 데이터
-    const sampleTodos = [
+  /**
+   * 샘플 Todo 데이터
+   */
+  generateTodos() {
+    return [
       {
-        id: 'TODO001',
-        meetingId: 'MTG001',
-        sectionId: 'SEC003',
-        content: '프로젝트 계획서 작성 및 공유',
-        assignee: '김철수',
-        assigneeId: 'EMP001',
+        id: 't-001',
+        title: 'API 명세서 작성',
+        assignee: '이준호',
         dueDate: '2025-10-25',
         priority: 'high',
-        status: 'in-progress',
-        completed: false,
-        completedAt: null,
-        createdAt: '2025-10-20T11:30:00Z'
+        status: 'in_progress',
+        progress: 60,
+        meetingId: 'm-002'
       },
       {
-        id: 'TODO002',
-        meetingId: 'MTG001',
-        sectionId: 'SEC004',
-        content: '디자인 시안 1차 검토',
-        assignee: '박민수',
-        assigneeId: 'EMP003',
+        id: 't-002',
+        title: 'UI 프로토타입 디자인',
+        assignee: '최유진',
         dueDate: '2025-10-23',
         priority: 'medium',
-        status: 'completed',
-        completed: true,
-        completedAt: '2025-10-22T15:00:00Z',
-        createdAt: '2025-10-20T11:30:00Z'
+        status: 'done',
+        progress: 100,
+        meetingId: 'm-002'
       },
       {
-        id: 'TODO003',
-        meetingId: 'MTG002',
-        sectionId: 'SEC012',
-        content: 'API 문서 작성',
-        assignee: '이영희',
-        assigneeId: 'EMP002',
-        dueDate: '2025-10-24',
+        id: 't-003',
+        title: '데이터베이스 스키마 설계',
+        assignee: '이준호',
+        dueDate: '2025-10-28',
         priority: 'high',
-        status: 'in-progress',
-        completed: false,
-        completedAt: null,
-        createdAt: '2025-10-21T09:30:00Z'
-      },
-      {
-        id: 'TODO004',
-        meetingId: 'MTG001',
-        sectionId: 'SEC005',
-        content: 'AI 모델 성능 테스트',
-        assignee: '정수진',
-        assigneeId: 'EMP004',
-        dueDate: '2025-10-22',
-        priority: 'high',
-        status: 'overdue',
-        completed: false,
-        completedAt: null,
-        createdAt: '2025-10-20T11:30:00Z'
-      },
-      {
-        id: 'TODO005',
-        meetingId: 'MTG002',
-        sectionId: 'SEC013',
-        content: '외부 API 연동 이슈 해결',
-        assignee: '이영희',
-        assigneeId: 'EMP002',
-        dueDate: '2025-10-26',
-        priority: 'medium',
-        status: 'in-progress',
-        completed: false,
-        completedAt: null,
-        createdAt: '2025-10-21T09:30:00Z'
+        status: 'todo',
+        progress: 0,
+        meetingId: 'm-001'
       }
     ];
-
-    // 데이터 저장
-    StorageManager.set(APP_CONFIG.STORAGE_KEYS.MEETINGS, sampleMeetings);
-    StorageManager.set(APP_CONFIG.STORAGE_KEYS.TODOS, sampleTodos);
-    StorageManager.set(APP_CONFIG.STORAGE_KEYS.INITIALIZED, true);
-
-    console.log('Sample data initialized successfully');
-  },
-
-  resetData: () => {
-    StorageManager.clear();
-    DataInitializer.initializeSampleData();
-    console.log('Data reset successfully');
   }
 };
 
-/* ========================================
-   8. 전역 이벤트 핸들러
-   ======================================== */
+// ===== 초기화 =====
+ready(() => {
+  console.log('Common.js loaded');
 
-// Todo 완료/미완료 토글
-function handleTodoToggle(todoId, completed) {
-  const todo = StorageManager.getTodoById(todoId);
-  if (!todo) return;
+  // 로컬 스토리지에서 상태 복원
+  const savedMeetings = Storage.get('meetings');
+  const savedTodos = Storage.get('todos');
 
-  todo.completed = completed;
-  todo.status = completed ? 'completed' : 'in-progress';
-  todo.completedAt = completed ? new Date().toISOString() : null;
-
-  StorageManager.updateTodo(todoId, todo);
-
-  // 회의록의 Todo 섹션 업데이트
-  const meeting = StorageManager.getMeetingById(todo.meetingId);
-  if (meeting) {
-    // 실시간 반영 시뮬레이션
-    console.log(`Todo ${todoId} 완료 상태가 회의록 ${todo.meetingId}에 반영되었습니다.`);
+  if (!savedMeetings) {
+    AppState.meetings = MockData.generateMeetings();
+    Storage.set('meetings', AppState.meetings);
+  } else {
+    AppState.meetings = savedMeetings;
   }
 
-  UIComponents.showToast(
-    completed ? 'Todo가 완료되었습니다' : 'Todo가 미완료로 변경되었습니다',
-    completed ? 'success' : 'info'
-  );
-
-  // 현재 페이지가 Todo 관리 화면이면 리로드
-  if (NavigationHelper.getCurrentPage() === APP_CONFIG.ROUTES.TODO_MANAGE) {
-    setTimeout(() => window.location.reload(), 1000);
+  if (!savedTodos) {
+    AppState.todos = MockData.generateTodos();
+    Storage.set('todos', AppState.todos);
+  } else {
+    AppState.todos = savedTodos;
   }
-}
 
-// 마감 임박 여부 확인 (3일 이내)
-function isDueSoon(dueDate) {
-  if (!dueDate) return false;
-  const today = new Date();
-  const due = new Date(dueDate);
-  const diffDays = Math.ceil((due - today) / (1000 * 60 * 60 * 24));
-  return diffDays >= 0 && diffDays <= 3;
-}
-
-/* ========================================
-   9. 앱 초기화
-   ======================================== */
-document.addEventListener('DOMContentLoaded', () => {
-  // 샘플 데이터 초기화 (최초 1회만)
-  DataInitializer.initializeSampleData();
-
-  // 하단 네비게이션 활성화
-  const currentPage = NavigationHelper.getCurrentPage();
-  const navItems = document.querySelectorAll('.bottom-nav-item');
-
-  navItems.forEach(item => {
-    const href = item.getAttribute('href');
-    if (href && href.includes(currentPage)) {
-      item.classList.add('active');
-    }
-  });
+  console.log('AppState initialized:', AppState);
 });
 
-// 전역 함수로 노출
-window.Utils = Utils;
-window.StorageManager = StorageManager;
-window.NavigationHelper = NavigationHelper;
-window.UIComponents = UIComponents;
-window.FormValidator = FormValidator;
-window.DataInitializer = DataInitializer;
-window.handleTodoToggle = handleTodoToggle;
-window.isDueSoon = isDueSoon;
-window.TEMPLATES = TEMPLATES;
-window.DUMMY_USERS = DUMMY_USERS;
+// ===== Export (전역 네임스페이스) =====
+window.MeetingApp = {
+  AppState,
+  Modal,
+  Toast,
+  Storage,
+  API,
+  Validator,
+  Loading,
+  MeetingUtils,
+  MockData,
+  navigateTo,
+  formatDateTime,
+  timeAgo,
+  getDday,
+  generateUUID,
+  ready
+};
diff --git a/design/uiux/prototype_fix/01-로그인.html b/design/uiux/prototype_bk/01-로그인.html
similarity index 100%
rename from design/uiux/prototype_fix/01-로그인.html
rename to design/uiux/prototype_bk/01-로그인.html
diff --git a/design/uiux/prototype_fix/02-대시보드.html b/design/uiux/prototype_bk/02-대시보드.html
similarity index 97%
rename from design/uiux/prototype_fix/02-대시보드.html
rename to design/uiux/prototype_bk/02-대시보드.html
index f4f8894..ee958f4 100644
--- a/design/uiux/prototype_fix/02-대시보드.html
+++ b/design/uiux/prototype_bk/02-대시보드.html
@@ -58,7 +58,7 @@
       <div class="card mb-4">
         <div class="d-flex justify-between align-center mb-4">
           <h3 class="text-h4">내 회의록</h3>
-          <a href="12-회의록목록조회.html" class="text-body-sm text-primary" style="text-decoration: none;">전체 보기 →</a>
+          <a href="#" class="text-body-sm text-primary" style="text-decoration: none;">전체 보기 →</a>
         </div>
 
         <div id="meetingsDashboard">
@@ -85,7 +85,7 @@
         <span class="material-symbols-outlined bottom-nav-icon">home</span>
         <span>홈</span>
       </a>
-      <a href="12-회의록목록조회.html" class="bottom-nav-item">
+      <a href="11-회의록수정.html" class="bottom-nav-item">
         <span class="material-symbols-outlined bottom-nav-icon">description</span>
         <span>회의록</span>
       </a>
diff --git a/design/uiux/prototype_fix/03-회의예약.html b/design/uiux/prototype_bk/03-회의예약.html
similarity index 100%
rename from design/uiux/prototype_fix/03-회의예약.html
rename to design/uiux/prototype_bk/03-회의예약.html
diff --git a/design/uiux/prototype_fix/04-템플릿선택.html b/design/uiux/prototype_bk/04-템플릿선택.html
similarity index 100%
rename from design/uiux/prototype_fix/04-템플릿선택.html
rename to design/uiux/prototype_bk/04-템플릿선택.html
diff --git a/design/uiux/prototype_bk/05-회의진행.html b/design/uiux/prototype_bk/05-회의진행.html
new file mode 100644
index 0000000..f6c292c
--- /dev/null
+++ b/design/uiux/prototype_bk/05-회의진행.html
@@ -0,0 +1,434 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의 진행 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    .live-speech {
+      background: var(--accent-50);
+      border-left: 4px solid var(--accent-500);
+      padding: 16px;
+      border-radius: 8px;
+      position: sticky;
+      top: 60px;
+      z-index: 10;
+    }
+
+    .speaking-indicator {
+      width: 8px;
+      height: 8px;
+      background: var(--error);
+      border-radius: 50%;
+      animation: pulse 1.5s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .section-content {
+      min-height: 100px;
+      padding: 12px;
+      background: var(--white);
+      border: 1px solid var(--gray-300);
+      border-radius: 8px;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    .section-content[contenteditable="true"] {
+      outline: 2px solid var(--primary-500);
+    }
+
+    .term-highlight {
+      background: linear-gradient(180deg, transparent 60%, var(--accent-200) 60%);
+      cursor: pointer;
+      border-bottom: 1px dotted var(--accent-500);
+    }
+
+    .recording-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: var(--error-bg);
+      border-radius: 20px;
+      font-size: 13px;
+      color: var(--error);
+    }
+
+    .action-bar {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: var(--white);
+      border-top: 1px solid var(--gray-200);
+      padding: 12px 16px;
+      display: flex;
+      gap: 8px;
+      z-index: var(--z-fixed);
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <!-- 헤더 -->
+    <div class="header">
+      <div style="flex: 1;">
+        <h1 class="header-title" id="meetingTitle">회의 진행</h1>
+        <div class="d-flex align-center gap-3 mt-1">
+          <span class="text-caption" id="elapsedTime">00:00:00</span>
+          <div class="recording-status">
+            <div class="speaking-indicator"></div>
+            <span>녹음 중</span>
+          </div>
+        </div>
+      </div>
+      <button class="btn-icon" onclick="showMenu()" aria-label="메뉴">
+        <span class="material-symbols-outlined">more_vert</span>
+      </button>
+    </div>
+
+    <!-- 메인 컨텐츠 -->
+    <div class="content" style="padding-bottom: 80px;">
+      <!-- 실시간 발언 영역 -->
+      <div class="live-speech mb-4">
+        <div class="d-flex align-center gap-2 mb-2">
+          <span class="material-symbols-outlined" style="color: var(--accent-700);">mic</span>
+          <span class="text-h6" style="color: var(--accent-700);" id="currentSpeaker">김철수</span>
+        </div>
+        <p class="text-body" id="liveText">회의를 시작하겠습니다. 오늘은 프로젝트 킥오프 회의로...</p>
+      </div>
+
+      <!-- AI 처리 인디케이터 -->
+      <div class="ai-processing mb-4">
+        <span class="material-symbols-outlined ai-icon">auto_awesome</span>
+        <span>AI가 발언 내용을 분석하여 회의록을 작성하고 있습니다</span>
+      </div>
+
+      <!-- 회의록 섹션들 -->
+      <div id="sectionList">
+        <!-- JavaScript로 동적 생성 -->
+      </div>
+    </div>
+
+    <!-- 하단 액션 바 -->
+    <div class="action-bar">
+      <button class="btn btn-secondary" onclick="pauseRecording()" id="pauseBtn">
+        <span class="material-symbols-outlined">pause</span>
+        일시정지
+      </button>
+      <button class="btn btn-text" onclick="addManualNote()">
+        <span class="material-symbols-outlined">edit_note</span>
+        메모 추가
+      </button>
+      <button class="btn btn-primary" onclick="endMeeting()" style="flex: 1;">
+        <span class="material-symbols-outlined">stop_circle</span>
+        회의 종료
+      </button>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    if (!NavigationHelper.requireAuth()) {}
+
+    const currentUser = StorageManager.getCurrentUser();
+    const meetingId = NavigationHelper.getQueryParam('meetingId') || Utils.generateId('MTG');
+    let templateData = JSON.parse(localStorage.getItem('selected_template') || 'null') || {
+      type: 'general',
+      name: '일반 회의',
+      sections: TEMPLATES.general.sections
+    };
+
+    let isRecording = true;
+    let isPaused = false;
+    let startTime = Date.now();
+    let elapsedInterval;
+
+    // 경과 시간 표시
+    function updateElapsedTime() {
+      const elapsed = Date.now() - startTime;
+      document.getElementById('elapsedTime').textContent = Utils.formatDuration(elapsed);
+    }
+
+    elapsedInterval = setInterval(updateElapsedTime, 1000);
+
+    // 섹션 렌더링
+    function renderSections() {
+      const container = document.getElementById('sectionList');
+
+      container.innerHTML = templateData.sections.map((section, index) => `
+        <div class="card mb-4" id="section-${section.id}">
+          <div class="d-flex justify-between align-center mb-3">
+            <h3 class="text-h4">${section.name}</h3>
+            <div class="d-flex align-center gap-2">
+              ${section.verified ? '<span class="verified-badge"><span class="material-symbols-outlined" style="font-size: 14px;">check_circle</span> 검증완료</span>' : ''}
+              <button class="btn-icon" onclick="toggleEdit('${section.id}')">
+                <span class="material-symbols-outlined">edit</span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="section-content"
+            id="content-${section.id}"
+            contenteditable="false"
+          >${section.content || '(AI가 발언 내용을 분석하여 자동으로 작성합니다)'}</div>
+          <div class="d-flex justify-between align-center mt-3">
+            <button class="btn btn-text btn-sm" onclick="improveSection('${section.id}')">
+              <span class="material-symbols-outlined">auto_awesome</span>
+              AI 개선
+            </button>
+            <label class="form-checkbox">
+              <input type="checkbox" ${section.verified ? 'checked' : ''} onchange="toggleVerify('${section.id}', this.checked)">
+              <span class="text-body-sm">검증 완료</span>
+            </label>
+          </div>
+        </div>
+      `).join('');
+
+      // 실시간 AI 작성 시뮬레이션
+      simulateAIWriting();
+    }
+
+    // AI 자동 작성 시뮬레이션
+    function simulateAIWriting() {
+      const sampleContent = {
+        '참석자': '김철수 (기획팀 팀장), 이영희 (개발팀 선임), 박민수 (디자인팀 사원)',
+        '안건': '신규 회의록 서비스 프로젝트 킥오프\n- 프로젝트 목표 및 범위 확정\n- 역할 분담 및 일정 계획',
+        '논의 내용': 'Mobile First 설계 방침으로 진행하기로 결정\nAI 기반 회의록 자동 작성 기능을 핵심으로 개발\n템플릿 시스템 및 실시간 협업 기능 포함',
+        '결정 사항': '개발 기간: 2025년 Q4까지\n기술 스택: React, Node.js, PostgreSQL\n주간 스크럼 회의 매주 월요일 09:00',
+        'Todo': '김철수: 프로젝트 계획서 작성 (10/25까지)\n이영희: API 문서 작성 (10/24까지)\n박민수: 디자인 시안 1차 검토 (10/23까지)'
+      };
+
+      templateData.sections.forEach((section, index) => {
+        setTimeout(() => {
+          const content = sampleContent[section.name] || `${section.name}에 대한 내용이 자동으로 작성됩니다...`;
+          const contentEl = document.getElementById(`content-${section.id}`);
+          if (contentEl) {
+            contentEl.textContent = content;
+            section.content = content;
+
+            // 전문용어 하이라이트 추가
+            highlightTerms(section.id);
+          }
+        }, (index + 1) * 2000);
+      });
+    }
+
+    // 전문용어 하이라이트
+    function highlightTerms(sectionId) {
+      const contentEl = document.getElementById(`content-${sectionId}`);
+      if (!contentEl) return;
+
+      const terms = ['Mobile First', 'AI', 'API', 'PostgreSQL', 'React'];
+      let html = contentEl.textContent;
+
+      terms.forEach(term => {
+        const regex = new RegExp(term, 'g');
+        html = html.replace(regex, `<span class="term-highlight" onclick="showTermExplanation('${term}')">${term}</span>`);
+      });
+
+      contentEl.innerHTML = html;
+    }
+
+    // 전문용어 설명 표시
+    function showTermExplanation(term) {
+      const explanations = {
+        'Mobile First': 'Mobile First는 모바일 환경을 우선적으로 고려하여 디자인하고, 이후 더 큰 화면으로 확장하는 설계 방법론입니다.',
+        'AI': 'Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다.',
+        'API': 'Application Programming Interface의 약자로, 소프트웨어 간 상호작용을 위한 인터페이스입니다.',
+        'PostgreSQL': '오픈소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다.',
+        'React': 'Facebook에서 개발한 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다.'
+      };
+
+      UIComponents.showToast(explanations[term] || '설명을 불러오는 중...', 'info', 5000);
+    }
+
+    // 섹션 편집 토글
+    function toggleEdit(sectionId) {
+      const contentEl = document.getElementById(`content-${sectionId}`);
+      const isEditable = contentEl.getAttribute('contenteditable') === 'true';
+
+      contentEl.setAttribute('contenteditable', !isEditable);
+
+      if (!isEditable) {
+        contentEl.focus();
+        UIComponents.showToast('수정 모드 활성화', 'info');
+      } else {
+        // 저장
+        const section = templateData.sections.find(s => s.id === sectionId);
+        if (section) {
+          section.content = contentEl.textContent;
+        }
+        UIComponents.showToast('변경사항이 저장되었습니다', 'success');
+      }
+    }
+
+    // 섹션 검증 토글
+    function toggleVerify(sectionId, checked) {
+      const section = templateData.sections.find(s => s.id === sectionId);
+      if (section) {
+        section.verified = checked;
+        section.verifiedBy = checked ? [currentUser.name] : [];
+      }
+      renderSections();
+      UIComponents.showToast(checked ? '섹션이 검증되었습니다' : '검증이 취소되었습니다', checked ? 'success' : 'info');
+    }
+
+    // AI 개선
+    function improveSection(sectionId) {
+      UIComponents.showLoading('AI가 내용을 개선하고 있습니다...');
+
+      setTimeout(() => {
+        UIComponents.hideLoading();
+        UIComponents.showToast('AI 개선이 완료되었습니다', 'success');
+      }, 2000);
+    }
+
+    // 녹음 일시정지/재개
+    function pauseRecording() {
+      isPaused = !isPaused;
+      const btn = document.getElementById('pauseBtn');
+      const indicator = document.querySelector('.recording-status');
+
+      if (isPaused) {
+        btn.innerHTML = '<span class="material-symbols-outlined">play_arrow</span> 재개';
+        indicator.style.background = 'var(--gray-200)';
+        indicator.style.color = 'var(--gray-600)';
+        indicator.querySelector('span:last-child').textContent = '일시정지';
+        UIComponents.showToast('녹음이 일시정지되었습니다', 'info');
+      } else {
+        btn.innerHTML = '<span class="material-symbols-outlined">pause</span> 일시정지';
+        indicator.style.background = 'var(--error-bg)';
+        indicator.style.color = 'var(--error)';
+        indicator.querySelector('span:last-child').textContent = '녹음 중';
+        UIComponents.showToast('녹음이 재개되었습니다', 'success');
+      }
+    }
+
+    // 수동 메모 추가
+    function addManualNote() {
+      const note = prompt('추가할 메모를 입력하세요:');
+      if (note && note.trim()) {
+        UIComponents.showToast('메모가 추가되었습니다', 'success');
+        // 실제로는 해당 섹션에 추가
+      }
+    }
+
+    // 메뉴 표시
+    function showMenu() {
+      UIComponents.showModal({
+        title: '회의 설정',
+        content: `
+          <div class="d-flex flex-column gap-2">
+            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); viewParticipants()">
+              <span class="material-symbols-outlined">group</span>
+              참석자 목록
+            </button>
+            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); viewKeywords()">
+              <span class="material-symbols-outlined">sell</span>
+              주요 키워드
+            </button>
+            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); viewStatistics()">
+              <span class="material-symbols-outlined">bar_chart</span>
+              발언 통계
+            </button>
+          </div>
+        `,
+        footer: '<button class="btn btn-secondary" onclick="closeModal()">닫기</button>',
+        onClose: () => {}
+      });
+    }
+
+    // 참석자 목록 표시
+    function viewParticipants() {
+      UIComponents.showToast('참석자: ' + DUMMY_USERS.slice(0, 3).map(u => u.name).join(', '), 'info', 3000);
+    }
+
+    // 주요 키워드 표시
+    function viewKeywords() {
+      UIComponents.showToast('주요 키워드: Mobile First, AI, 프로젝트, 개발', 'info', 3000);
+    }
+
+    // 발언 통계 표시
+    function viewStatistics() {
+      UIComponents.showToast('발언 통계: 김철수 40%, 이영희 35%, 박민수 25%', 'info', 3000);
+    }
+
+    // 모달 닫기
+    function closeModal() {
+      const modal = document.querySelector('.modal-overlay');
+      if (modal) modal.remove();
+    }
+
+    // 회의 종료
+    function endMeeting() {
+      UIComponents.confirm(
+        '회의를 종료하시겠습니까? 회의록이 저장됩니다.',
+        () => {
+          clearInterval(elapsedInterval);
+
+          // 회의록 저장
+          const duration = Date.now() - startTime;
+          const meetingData = {
+            id: meetingId,
+            title: document.getElementById('meetingTitle').textContent || '제목 없는 회의',
+            date: new Date().toISOString().split('T')[0],
+            startTime: new Date(startTime).toTimeString().slice(0, 5),
+            endTime: new Date().toTimeString().slice(0, 5),
+            duration: duration,
+            location: '온라인',
+            attendees: DUMMY_USERS.slice(0, 3).map(u => u.name),
+            template: templateData.type,
+            status: 'draft',
+            sections: templateData.sections,
+            createdBy: currentUser.id,
+            createdAt: new Date(startTime).toISOString(),
+            updatedAt: new Date().toISOString()
+          };
+
+          StorageManager.addMeeting(meetingData);
+          localStorage.setItem('current_meeting', JSON.stringify(meetingData));
+
+          UIComponents.showToast('회의가 종료되었습니다', 'success');
+
+          setTimeout(() => {
+            NavigationHelper.navigate('MEETING_END', { meetingId });
+          }, 1000);
+        },
+        () => {}
+      );
+    }
+
+    // 초기 렌더링
+    renderSections();
+
+    // 실시간 발언 시뮬레이션
+    const speeches = [
+      { speaker: '김철수', text: '프로젝트 킥오프 회의를 시작하겠습니다...' },
+      { speaker: '이영희', text: '개발 일정에 대해 의견을 드리겠습니다...' },
+      { speaker: '박민수', text: '디자인 시안은 다음 주까지 준비하겠습니다...' }
+    ];
+
+    let speechIndex = 0;
+    setInterval(() => {
+      const speech = speeches[speechIndex % speeches.length];
+      document.getElementById('currentSpeaker').textContent = speech.speaker;
+      document.getElementById('liveText').textContent = speech.text;
+      speechIndex++;
+    }, 5000);
+
+    // 페이지 이탈 방지
+    window.addEventListener('beforeunload', (e) => {
+      e.preventDefault();
+      e.returnValue = '';
+    });
+  </script>
+</body>
+</html>
diff --git a/design/uiux/prototype_fix/06-검증완료.html b/design/uiux/prototype_bk/06-검증완료.html
similarity index 100%
rename from design/uiux/prototype_fix/06-검증완료.html
rename to design/uiux/prototype_bk/06-검증완료.html
diff --git a/design/uiux/prototype_fix/07-회의종료.html b/design/uiux/prototype_bk/07-회의종료.html
similarity index 100%
rename from design/uiux/prototype_fix/07-회의종료.html
rename to design/uiux/prototype_bk/07-회의종료.html
diff --git a/design/uiux/prototype_bk/08-회의록공유.html b/design/uiux/prototype_bk/08-회의록공유.html
new file mode 100644
index 0000000..8477563
--- /dev/null
+++ b/design/uiux/prototype_bk/08-회의록공유.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의록 공유 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+</head>
+<body>
+  <div class="page">
+    <!-- 헤더 -->
+    <div class="header">
+      <button class="btn-icon" onclick="NavigationHelper.goBack()" aria-label="뒤로가기">
+        <span class="material-symbols-outlined">arrow_back</span>
+      </button>
+      <h1 class="header-title">회의록 공유</h1>
+      <button class="btn btn-primary btn-sm" onclick="shareMinutes()">공유하기</button>
+    </div>
+
+    <!-- 메인 컨텐츠 -->
+    <div class="content">
+      <form id="shareForm">
+        <!-- 공유 대상 -->
+        <div class="form-group">
+          <label class="form-label required">공유 대상</label>
+          <label class="form-checkbox mb-2">
+            <input type="radio" name="shareTarget" value="all" checked onchange="toggleAttendeeList()">
+            <span>참석자 전체</span>
+          </label>
+          <label class="form-checkbox">
+            <input type="radio" name="shareTarget" value="selected" onchange="toggleAttendeeList()">
+            <span>특정 참석자 선택</span>
+          </label>
+        </div>
+
+        <!-- 참석자 목록 (선택 시) -->
+        <div class="form-group" id="attendeeListGroup" style="display: none;">
+          <div id="attendeeList">
+            <!-- JavaScript로 동적 생성 -->
+          </div>
+        </div>
+
+        <!-- 공유 권한 -->
+        <div class="form-group">
+          <label for="sharePermission" class="form-label required">공유 권한</label>
+          <select id="sharePermission" class="form-select">
+            <option value="read" selected>읽기 전용</option>
+            <option value="comment">댓글 가능</option>
+            <option value="edit">편집 가능</option>
+          </select>
+        </div>
+
+        <!-- 공유 방식 -->
+        <div class="form-group">
+          <label class="form-label">공유 방식</label>
+          <label class="form-checkbox mb-2">
+            <input type="checkbox" id="sendEmail" checked>
+            <span>이메일 발송</span>
+          </label>
+          <button type="button" class="btn btn-secondary btn-sm w-full" onclick="copyLink()">
+            <span class="material-symbols-outlined">link</span>
+            링크 복사
+          </button>
+        </div>
+
+        <!-- 링크 보안 설정 -->
+        <div class="card mb-4">
+          <h3 class="text-h5 mb-3">링크 보안 설정</h3>
+
+          <label class="form-checkbox mb-3">
+            <input type="checkbox" id="enableExpiry" onchange="toggleExpiryDate()">
+            <span>유효기간 설정</span>
+          </label>
+
+          <div id="expiryDateGroup" style="display: none;">
+            <select id="expiryPeriod" class="form-select mb-3">
+              <option value="7">7일</option>
+              <option value="30" selected>30일</option>
+              <option value="90">90일</option>
+              <option value="unlimited">무제한</option>
+            </select>
+          </div>
+
+          <label class="form-checkbox mb-3">
+            <input type="checkbox" id="enablePassword" onchange="togglePassword()">
+            <span>비밀번호 설정</span>
+          </label>
+
+          <div id="passwordGroup" style="display: none;">
+            <input
+              type="password"
+              id="linkPassword"
+              class="form-input"
+              placeholder="링크 접근 비밀번호"
+            >
+          </div>
+        </div>
+      </form>
+
+      <!-- 공유 이력 -->
+      <div class="card">
+        <h3 class="text-h4 mb-3">공유 이력</h3>
+        <div id="shareHistory">
+          <p class="text-body-sm text-gray text-center" style="padding: 24px 0;">아직 공유 이력이 없습니다</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    if (!NavigationHelper.requireAuth()) {}
+
+    const currentUser = StorageManager.getCurrentUser();
+    const meetingId = NavigationHelper.getQueryParam('meetingId');
+    const meeting = meetingId ? StorageManager.getMeetingById(meetingId) : null;
+
+    if (!meeting) {
+      UIComponents.showToast('회의 정보를 찾을 수 없습니다', 'error');
+      setTimeout(() => NavigationHelper.navigate('DASHBOARD'), 2000);
+    }
+
+    // 참석자 목록 토글
+    function toggleAttendeeList() {
+      const selected = document.querySelector('input[name="shareTarget"]:checked').value === 'selected';
+      document.getElementById('attendeeListGroup').style.display = selected ? 'block' : 'none';
+
+      if (selected && meeting) {
+        renderAttendeeList();
+      }
+    }
+
+    // 참석자 목록 렌더링
+    function renderAttendeeList() {
+      const container = document.getElementById('attendeeList');
+      container.innerHTML = meeting.attendees.map((attendee, index) => `
+        <label class="form-checkbox mb-2">
+          <input type="checkbox" name="attendee" value="${attendee}" checked>
+          <span>${attendee}</span>
+        </label>
+      `).join('');
+    }
+
+    // 유효기간 토글
+    function toggleExpiryDate() {
+      const enabled = document.getElementById('enableExpiry').checked;
+      document.getElementById('expiryDateGroup').style.display = enabled ? 'block' : 'none';
+    }
+
+    // 비밀번호 토글
+    function togglePassword() {
+      const enabled = document.getElementById('enablePassword').checked;
+      document.getElementById('passwordGroup').style.display = enabled ? 'block' : 'none';
+    }
+
+    // 링크 복사
+    function copyLink() {
+      const link = `https://meeting.example.com/share/${meeting.id}`;
+
+      // 클립보드 복사
+      navigator.clipboard.writeText(link).then(() => {
+        UIComponents.showToast('링크가 복사되었습니다', 'success');
+      }).catch(() => {
+        // Fallback
+        const tempInput = document.createElement('input');
+        tempInput.value = link;
+        document.body.appendChild(tempInput);
+        tempInput.select();
+        document.execCommand('copy');
+        document.body.removeChild(tempInput);
+        UIComponents.showToast('링크가 복사되었습니다', 'success');
+      });
+    }
+
+    // 회의록 공유
+    function shareMinutes() {
+      const shareTarget = document.querySelector('input[name="shareTarget"]:checked').value;
+      const sharePermission = document.getElementById('sharePermission').value;
+      const sendEmail = document.getElementById('sendEmail').checked;
+      const enableExpiry = document.getElementById('enableExpiry').checked;
+      const enablePassword = document.getElementById('enablePassword').checked;
+
+      let recipients = [];
+      if (shareTarget === 'all') {
+        recipients = meeting.attendees;
+      } else {
+        const checked = Array.from(document.querySelectorAll('input[name="attendee"]:checked'));
+        recipients = checked.map(input => input.value);
+      }
+
+      if (recipients.length === 0) {
+        UIComponents.showToast('공유할 대상을 선택해주세요', 'error');
+        return;
+      }
+
+      const shareData = {
+        meetingId: meeting.id,
+        recipients: recipients,
+        permission: sharePermission,
+        sendEmail: sendEmail,
+        expiry: enableExpiry ? document.getElementById('expiryPeriod').value : null,
+        password: enablePassword ? document.getElementById('linkPassword').value : null,
+        sharedAt: new Date().toISOString(),
+        sharedBy: currentUser.name
+      };
+
+      UIComponents.showLoading('회의록을 공유하는 중...');
+
+      setTimeout(() => {
+        // 공유 처리 (시뮬레이션)
+        meeting.sharedWith = recipients.map(name => {
+          const user = DUMMY_USERS.find(u => u.name === name);
+          return user ? user.id : '';
+        }).filter(id => id);
+
+        StorageManager.updateMeeting(meeting.id, meeting);
+
+        UIComponents.hideLoading();
+
+        if (sendEmail) {
+          UIComponents.showToast(`${recipients.length}명에게 이메일이 발송되었습니다`, 'success');
+        } else {
+          UIComponents.showToast('회의록이 공유되었습니다', 'success');
+        }
+
+        // 공유 이력 추가
+        addShareHistory(shareData);
+
+        setTimeout(() => {
+          NavigationHelper.navigate('DASHBOARD');
+        }, 2000);
+      }, 1500);
+    }
+
+    // 공유 이력 추가
+    function addShareHistory(shareData) {
+      const container = document.getElementById('shareHistory');
+      const html = `
+        <div class="mb-3 p-3" style="background: var(--gray-50); border-radius: 8px;">
+          <div class="d-flex justify-between align-center mb-2">
+            <span class="text-body">${shareData.sharedAt.split('T')[0]} ${shareData.sharedAt.split('T')[1].slice(0, 5)}</span>
+            <span class="badge badge-status">${shareData.permission === 'read' ? '읽기 전용' : shareData.permission === 'comment' ? '댓글 가능' : '편집 가능'}</span>
+          </div>
+          <p class="text-body-sm">대상: ${shareData.recipients.join(', ')}</p>
+        </div>
+      `;
+
+      container.innerHTML = html + container.innerHTML;
+    }
+  </script>
+</body>
+</html>
diff --git a/design/uiux/prototype_fix/09-Todo관리.html b/design/uiux/prototype_bk/09-Todo관리.html
similarity index 100%
rename from design/uiux/prototype_fix/09-Todo관리.html
rename to design/uiux/prototype_bk/09-Todo관리.html
diff --git a/design/uiux/prototype_fix/10-회의록상세조회.html b/design/uiux/prototype_bk/10-회의록상세조회.html
similarity index 57%
rename from design/uiux/prototype_fix/10-회의록상세조회.html
rename to design/uiux/prototype_bk/10-회의록상세조회.html
index 4fd2ce5..51022aa 100644
--- a/design/uiux/prototype_fix/10-회의록상세조회.html
+++ b/design/uiux/prototype_bk/10-회의록상세조회.html
@@ -6,34 +6,6 @@
   <title>회의록 상세 조회 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
-  <style>
-    .similarity-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 2px 8px;
-      border-radius: var(--radius-full);
-      font-size: 11px;
-      font-weight: 600;
-      background: var(--primary-50);
-      color: var(--primary-700);
-    }
-
-    .related-meeting-card {
-      background: var(--white);
-      border: 1px solid var(--gray-200);
-      border-radius: var(--radius-md);
-      padding: 12px;
-      margin-bottom: 8px;
-      cursor: pointer;
-      transition: all var(--transition-normal);
-    }
-
-    .related-meeting-card:hover {
-      border-color: var(--primary-500);
-      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
-    }
-  </style>
 </head>
 <body>
   <div class="page">
@@ -80,32 +52,6 @@
         </div>
       </div>
 
-      <!-- 관련 회의록 섹션 (NEW - UFR-AI-040) -->
-      <div class="card mb-4" id="relatedMeetingsSection" style="border-left: 4px solid var(--accent-500); background: linear-gradient(135deg, var(--accent-50) 0%, var(--white) 100%);">
-        <div class="d-flex justify-between align-center mb-3">
-          <div class="d-flex align-center gap-2">
-            <span class="material-symbols-outlined" style="color: var(--accent-700);">auto_awesome</span>
-            <h3 class="text-h4" style="color: var(--accent-700);">AI 추천 관련 회의록</h3>
-          </div>
-          <span class="badge" style="background: var(--accent-100); color: var(--accent-700);" id="relatedCount">0</span>
-        </div>
-        <p class="text-body-sm text-gray mb-3">유사한 주제의 과거 회의록을 AI가 자동으로 찾았습니다</p>
-        <div id="relatedMeetingsList">
-          <!-- JavaScript로 동적 생성 -->
-        </div>
-      </div>
-
-      <!-- 회의록 요약 섹션 (NEW) -->
-      <div class="card mb-4" style="background: linear-gradient(135deg, var(--info-bg) 0%, var(--white) 100%);">
-        <div class="d-flex align-center gap-2 mb-3">
-          <span class="material-symbols-outlined" style="color: var(--primary-700);">summarize</span>
-          <h3 class="text-h4" style="color: var(--primary-700);">회의록 요약</h3>
-        </div>
-        <div id="meetingSummary" class="text-body">
-          <!-- JavaScript로 동적 생성 -->
-        </div>
-      </div>
-
       <!-- 섹션별 내용 -->
       <div id="sectionList">
         <!-- JavaScript로 동적 생성 -->
@@ -196,166 +142,6 @@
       }
     }
 
-    // 회의록 요약 생성 (NEW)
-    function renderSummary() {
-      if (!meeting) return;
-
-      const summaryEl = document.getElementById('meetingSummary');
-
-      // AI 기반 요약 시뮬레이션
-      const keyPoints = [];
-
-      if (meeting.sections) {
-        meeting.sections.forEach(section => {
-          if (section.content && section.content.trim()) {
-            const firstSentence = section.content.split('\n')[0];
-            if (firstSentence) {
-              keyPoints.push(`<strong>${section.name}:</strong> ${firstSentence}`);
-            }
-          }
-        });
-      }
-
-      if (keyPoints.length === 0) {
-        summaryEl.innerHTML = '<p class="text-gray">회의록 요약을 생성할 수 없습니다</p>';
-      } else {
-        summaryEl.innerHTML = `
-          <ul style="list-style: none; padding: 0; margin: 0;">
-            ${keyPoints.map(point => `<li style="margin-bottom: 8px;">• ${point}</li>`).join('')}
-          </ul>
-        `;
-      }
-    }
-
-    // 관련 회의록 찾기 (NEW - UFR-AI-040)
-    function findRelatedMeetings() {
-      if (!meeting) return [];
-
-      const allMeetings = StorageManager.getMeetings();
-      const relatedMeetings = [];
-
-      allMeetings.forEach(m => {
-        if (m.id === meeting.id) return; // 자기 자신 제외
-
-        // 유사도 계산 시뮬레이션
-        let similarity = 0;
-
-        // 1. 제목 유사도 (간단한 키워드 매칭)
-        const currentKeywords = extractKeywords(meeting.title);
-        const targetKeywords = extractKeywords(m.title);
-        const titleMatch = currentKeywords.filter(k => targetKeywords.includes(k)).length;
-        similarity += titleMatch * 15;
-
-        // 2. 참석자 유사도
-        const commonAttendees = meeting.attendees.filter(a => m.attendees.includes(a)).length;
-        const attendeeRatio = commonAttendees / Math.max(meeting.attendees.length, m.attendees.length);
-        similarity += attendeeRatio * 30;
-
-        // 3. 템플릿 유형 일치
-        if (meeting.template === m.template) {
-          similarity += 10;
-        }
-
-        // 4. 시간적 연관성 (최근 회의에 가중치)
-        const daysDiff = Math.abs(new Date(meeting.date) - new Date(m.date)) / (1000 * 60 * 60 * 24);
-        if (daysDiff <= 30) {
-          similarity += 10;
-        } else if (daysDiff <= 90) {
-          similarity += 5;
-        }
-
-        // 5. 내용 키워드 매칭 (섹션 내용)
-        const contentKeywords = extractContentKeywords(meeting);
-        const targetContentKeywords = extractContentKeywords(m);
-        const contentMatch = contentKeywords.filter(k => targetContentKeywords.includes(k)).length;
-        similarity += contentMatch * 5;
-
-        // 유사도 70% 이상만 관련 회의록으로 판단
-        if (similarity >= 70) {
-          relatedMeetings.push({
-            meeting: m,
-            similarity: Math.min(100, Math.round(similarity)),
-            matchedKeywords: currentKeywords.filter(k => targetKeywords.includes(k))
-          });
-        }
-      });
-
-      // 유사도 순으로 정렬, 최대 5개
-      return relatedMeetings
-        .sort((a, b) => b.similarity - a.similarity)
-        .slice(0, 5);
-    }
-
-    // 키워드 추출 (제목)
-    function extractKeywords(text) {
-      if (!text) return [];
-
-      const stopwords = ['회의', '및', '의', '에', '를', '을', '이', '가', '은', '는', '과', '와', '도'];
-      const words = text.split(/[\s,]+/)
-        .filter(w => w.length >= 2 && !stopwords.includes(w));
-
-      return [...new Set(words)];
-    }
-
-    // 내용 키워드 추출 (섹션 내용)
-    function extractContentKeywords(meeting) {
-      if (!meeting.sections) return [];
-
-      const keywords = [];
-      meeting.sections.forEach(section => {
-        if (section.content) {
-          const words = extractKeywords(section.content);
-          keywords.push(...words);
-        }
-      });
-
-      // 빈도 기반 상위 키워드 반환
-      const frequency = {};
-      keywords.forEach(k => {
-        frequency[k] = (frequency[k] || 0) + 1;
-      });
-
-      return Object.keys(frequency)
-        .sort((a, b) => frequency[b] - frequency[a])
-        .slice(0, 10);
-    }
-
-    // 관련 회의록 렌더링 (NEW - UFR-AI-040)
-    function renderRelatedMeetings() {
-      const relatedMeetings = findRelatedMeetings();
-      const container = document.getElementById('relatedMeetingsList');
-
-      if (relatedMeetings.length === 0) {
-        document.getElementById('relatedMeetingsSection').style.display = 'none';
-        return;
-      }
-
-      document.getElementById('relatedCount').textContent = relatedMeetings.length;
-
-      container.innerHTML = relatedMeetings.map(({ meeting: m, similarity, matchedKeywords }) => `
-        <div class="related-meeting-card" onclick="NavigationHelper.navigate('MEETING_DETAIL', { id: '${m.id}' })">
-          <div class="d-flex justify-between align-center mb-2">
-            <h4 class="text-h6">${m.title}</h4>
-            <div class="similarity-badge">
-              <span class="material-symbols-outlined" style="font-size: 12px;">auto_awesome</span>
-              <span>${similarity}%</span>
-            </div>
-          </div>
-          <div class="d-flex align-center gap-3 text-caption text-gray">
-            <span>📅 ${Utils.formatDate(m.date)}</span>
-            <span>👥 ${m.attendees.length}명</span>
-            <span>${m.status === 'confirmed' ? '✅ 확정' : '📝 작성중'}</span>
-          </div>
-          ${matchedKeywords.length > 0 ? `
-            <div class="mt-2">
-              <span class="text-caption text-gray">공통 키워드:</span>
-              ${matchedKeywords.slice(0, 3).map(k => `<span class="badge" style="background: var(--primary-50); color: var(--primary-700); margin-left: 4px;">${k}</span>`).join('')}
-            </div>
-          ` : ''}
-        </div>
-      `).join('');
-    }
-
     // 섹션 렌더링
     function renderSections() {
       const container = document.getElementById('sectionList');
@@ -481,8 +267,6 @@
     }
 
     // 초기 렌더링
-    renderSummary();
-    renderRelatedMeetings();
     renderSections();
     renderTodos();
 
diff --git a/design/uiux/prototype_bk/11-회의록수정.html b/design/uiux/prototype_bk/11-회의록수정.html
new file mode 100644
index 0000000..78f82d3
--- /dev/null
+++ b/design/uiux/prototype_bk/11-회의록수정.html
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>회의록 수정 - 회의록 서비스</title>
+  <link rel="stylesheet" href="common.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
+  <style>
+    .auto-save-indicator {
+      position: fixed;
+      top: 70px;
+      right: 16px;
+      padding: 8px 12px;
+      background: var(--white);
+      border-radius: 20px;
+      box-shadow: var(--shadow-sm);
+      font-size: 12px;
+      color: var(--gray-600);
+      z-index: var(--z-sticky);
+      display: none;
+    }
+
+    .auto-save-indicator.active {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <!-- 헤더 -->
+    <div class="header">
+      <button class="btn-icon" onclick="handleBack()" aria-label="뒤로가기">
+        <span class="material-symbols-outlined">arrow_back</span>
+      </button>
+      <h1 class="header-title">회의록 수정</h1>
+      <button class="btn btn-primary btn-sm" onclick="saveMeeting()">저장</button>
+    </div>
+
+    <!-- 자동 저장 인디케이터 -->
+    <div class="auto-save-indicator" id="autoSaveIndicator">
+      <span class="material-symbols-outlined" style="font-size: 16px;">check_circle</span>
+      <span id="autoSaveText">저장됨</span>
+    </div>
+
+    <!-- 메인 컨텐츠 -->
+    <div class="content">
+      <!-- 회의록 목록 모드 -->
+      <div id="listMode">
+        <!-- 필터 및 검색 -->
+        <div class="d-flex gap-2 mb-4">
+          <select id="statusFilter" class="form-select" style="flex: 1;" onchange="renderMeetingList()">
+            <option value="all">전체</option>
+            <option value="draft">작성중</option>
+            <option value="confirmed">확정완료</option>
+          </select>
+          <select id="sortOrder" class="form-select" style="flex: 1;" onchange="renderMeetingList()">
+            <option value="recent">최신순</option>
+            <option value="date">회의일시순</option>
+            <option value="title">제목순</option>
+          </select>
+        </div>
+
+        <div class="form-group">
+          <input
+            type="text"
+            id="searchInput"
+            class="form-input"
+            placeholder="회의 제목, 참석자, 키워드 검색"
+            oninput="renderMeetingList()"
+          >
+        </div>
+
+        <!-- 회의록 목록 -->
+        <div id="meetingList">
+          <!-- JavaScript로 동적 생성 -->
+        </div>
+      </div>
+
+      <!-- 수정 모드 -->
+      <div id="editMode" style="display: none;">
+        <!-- 기본 정보 수정 -->
+        <div class="card mb-4">
+          <h3 class="text-h5 mb-3">기본 정보</h3>
+          <div class="form-group">
+            <label for="editTitle" class="form-label required">회의 제목</label>
+            <input type="text" id="editTitle" class="form-input" maxlength="100">
+          </div>
+          <div class="d-flex gap-2">
+            <div class="form-group" style="flex: 1;">
+              <label for="editDate" class="form-label">날짜</label>
+              <input type="date" id="editDate" class="form-input">
+            </div>
+            <div class="form-group" style="flex: 1;">
+              <label for="editStartTime" class="form-label">시작</label>
+              <input type="time" id="editStartTime" class="form-input">
+            </div>
+            <div class="form-group" style="flex: 1;">
+              <label for="editEndTime" class="form-label">종료</label>
+              <input type="time" id="editEndTime" class="form-input">
+            </div>
+          </div>
+        </div>
+
+        <!-- 섹션별 수정 -->
+        <div id="editSectionList">
+          <!-- JavaScript로 동적 생성 -->
+        </div>
+
+        <!-- 하단 액션 -->
+        <div class="d-flex gap-2 mt-4">
+          <button class="btn btn-secondary" onclick="cancelEdit()">
+            취소
+          </button>
+          <button class="btn btn-primary" style="flex: 1;" onclick="saveMeeting()">
+            저장
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 하단 네비게이션 -->
+    <nav class="bottom-nav" role="navigation" aria-label="주요 메뉴">
+      <a href="02-대시보드.html" class="bottom-nav-item">
+        <span class="material-symbols-outlined bottom-nav-icon">home</span>
+        <span>홈</span>
+      </a>
+      <a href="11-회의록수정.html" class="bottom-nav-item active" aria-current="page">
+        <span class="material-symbols-outlined bottom-nav-icon">description</span>
+        <span>회의록</span>
+      </a>
+      <a href="09-Todo관리.html" class="bottom-nav-item">
+        <span class="material-symbols-outlined bottom-nav-icon">check_box</span>
+        <span>Todo</span>
+      </a>
+      <a href="javascript:void(0)" class="bottom-nav-item">
+        <span class="material-symbols-outlined bottom-nav-icon">account_circle</span>
+        <span>프로필</span>
+      </a>
+    </nav>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    if (!NavigationHelper.requireAuth()) {}
+
+    const currentUser = StorageManager.getCurrentUser();
+    const meetingId = NavigationHelper.getQueryParam('id');
+    let currentMeeting = null;
+    let isEditMode = false;
+    let autoSaveTimer = null;
+    let hasUnsavedChanges = false;
+
+    // 회의록 목록 렌더링
+    function renderMeetingList() {
+      const meetings = StorageManager.getMeetings();
+      const myMeetings = meetings.filter(m =>
+        m.createdBy === currentUser.id || m.attendees.includes(currentUser.name)
+      );
+
+      // 필터링
+      const statusFilter = document.getElementById('statusFilter').value;
+      let filtered = myMeetings;
+      if (statusFilter !== 'all') {
+        filtered = myMeetings.filter(m => m.status === statusFilter);
+      }
+
+      // 검색
+      const searchQuery = document.getElementById('searchInput').value.toLowerCase();
+      if (searchQuery) {
+        filtered = filtered.filter(m =>
+          m.title.toLowerCase().includes(searchQuery) ||
+          m.attendees.some(a => a.toLowerCase().includes(searchQuery))
+        );
+      }
+
+      // 정렬
+      const sortOrder = document.getElementById('sortOrder').value;
+      if (sortOrder === 'recent') {
+        filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+      } else if (sortOrder === 'date') {
+        filtered.sort((a, b) => new Date(b.date) - new Date(a.date));
+      } else if (sortOrder === 'title') {
+        filtered.sort((a, b) => a.title.localeCompare(b.title));
+      }
+
+      // 렌더링
+      const container = document.getElementById('meetingList');
+
+      if (filtered.length === 0) {
+        container.innerHTML = '<p class="text-body text-gray text-center" style="padding: 48px 0;">회의록이 없습니다</p>';
+        return;
+      }
+
+      container.innerHTML = filtered.map(meeting => `
+        <div class="meeting-item" onclick="editMeetingById('${meeting.id}')">
+          <div style="flex: 1;">
+            <h3 class="text-h5">${meeting.title}</h3>
+            <p class="text-caption text-gray">${Utils.formatDate(meeting.date)} ${meeting.startTime || ''} · ${meeting.attendees?.length || 0}명</p>
+            <p class="text-caption text-gray mt-1">최종 수정: ${Utils.formatTimeAgo(meeting.updatedAt)}</p>
+          </div>
+          <div class="d-flex flex-column align-end gap-2">
+            ${meeting.status === 'confirmed' ? '<span class="badge badge-confirmed">확정완료</span>' : '<span class="badge badge-draft">작성중</span>'}
+            ${meeting.createdBy === currentUser.id ? '' : '<span class="text-caption text-gray">조회 전용</span>'}
+          </div>
+        </div>
+      `).join('');
+    }
+
+    // 회의록 수정 모드로 전환
+    function editMeetingById(id) {
+      const meeting = StorageManager.getMeetingById(id);
+      if (!meeting) {
+        UIComponents.showToast('회의록을 찾을 수 없습니다', 'error');
+        return;
+      }
+
+      // 권한 체크
+      const canEdit = meeting.createdBy === currentUser.id;
+      if (!canEdit) {
+        UIComponents.showToast('본인이 작성한 회의록만 수정할 수 있습니다', 'warning');
+        setTimeout(() => {
+          NavigationHelper.navigate('MEETING_DETAIL', { id });
+        }, 1500);
+        return;
+      }
+
+      currentMeeting = { ...meeting };
+      isEditMode = true;
+
+      // 확정완료 → 작성중으로 변경
+      if (currentMeeting.status === 'confirmed') {
+        currentMeeting.status = 'draft';
+        UIComponents.showToast('확정완료 회의록이 작성중으로 변경되었습니다', 'info');
+      }
+
+      // UI 전환
+      document.getElementById('listMode').style.display = 'none';
+      document.getElementById('editMode').style.display = 'block';
+      document.querySelector('.bottom-nav').style.display = 'none';
+
+      // 기본 정보 설정
+      document.getElementById('editTitle').value = currentMeeting.title;
+      document.getElementById('editDate').value = currentMeeting.date;
+      document.getElementById('editStartTime').value = currentMeeting.startTime || '';
+      document.getElementById('editEndTime').value = currentMeeting.endTime || '';
+
+      // 섹션 렌더링
+      renderEditSections();
+
+      // 자동 저장 시작
+      startAutoSave();
+    }
+
+    // 섹션 수정 렌더링
+    function renderEditSections() {
+      const container = document.getElementById('editSectionList');
+
+      container.innerHTML = currentMeeting.sections.map((section, index) => `
+        <div class="card mb-4">
+          <div class="d-flex justify-between align-center mb-3">
+            <h3 class="text-h5">${section.name}</h3>
+            ${section.locked ? '<span class="material-symbols-outlined" style="color: var(--gray-600);">lock</span>' : ''}
+          </div>
+          <textarea
+            class="form-textarea"
+            rows="5"
+            data-section-id="${section.id}"
+            onchange="markAsChanged()"
+            ${section.locked ? 'disabled' : ''}
+          >${section.content || ''}</textarea>
+          ${section.locked ? `
+            <p class="text-caption text-gray mt-2">
+              <span class="material-symbols-outlined" style="font-size: 14px;">info</span>
+              이 섹션은 잠겨있습니다. 수정하려면 잠금을 해제하세요.
+            </p>
+          ` : ''}
+        </div>
+      `).join('');
+    }
+
+    // 변경사항 표시
+    function markAsChanged() {
+      hasUnsavedChanges = true;
+    }
+
+    // 자동 저장 시작
+    function startAutoSave() {
+      if (autoSaveTimer) clearInterval(autoSaveTimer);
+
+      autoSaveTimer = setInterval(() => {
+        if (hasUnsavedChanges) {
+          autoSaveMeeting();
+        }
+      }, 30000); // 30초마다 자동 저장
+    }
+
+    // 자동 저장
+    function autoSaveMeeting() {
+      const indicator = document.getElementById('autoSaveIndicator');
+      document.getElementById('autoSaveText').textContent = '저장 중...';
+      indicator.classList.add('active');
+
+      // 데이터 수집
+      collectMeetingData();
+
+      // 저장
+      setTimeout(() => {
+        StorageManager.updateMeeting(currentMeeting.id, currentMeeting);
+        hasUnsavedChanges = false;
+
+        document.getElementById('autoSaveText').textContent = '저장됨';
+
+        setTimeout(() => {
+          indicator.classList.remove('active');
+        }, 2000);
+      }, 500);
+    }
+
+    // 회의록 데이터 수집
+    function collectMeetingData() {
+      currentMeeting.title = document.getElementById('editTitle').value;
+      currentMeeting.date = document.getElementById('editDate').value;
+      currentMeeting.startTime = document.getElementById('editStartTime').value;
+      currentMeeting.endTime = document.getElementById('editEndTime').value;
+
+      // 섹션 내용 수집
+      currentMeeting.sections.forEach(section => {
+        const textarea = document.querySelector(`textarea[data-section-id="${section.id}"]`);
+        if (textarea) {
+          section.content = textarea.value;
+        }
+      });
+
+      currentMeeting.updatedAt = new Date().toISOString();
+    }
+
+    // 회의록 저장
+    function saveMeeting() {
+      if (!currentMeeting) return;
+
+      collectMeetingData();
+
+      UIComponents.showLoading('저장하는 중...');
+
+      setTimeout(() => {
+        StorageManager.updateMeeting(currentMeeting.id, currentMeeting);
+        hasUnsavedChanges = false;
+
+        UIComponents.hideLoading();
+        UIComponents.showToast('회의록이 저장되었습니다', 'success');
+
+        setTimeout(() => {
+          cancelEdit();
+        }, 1000);
+      }, 800);
+    }
+
+    // 수정 취소
+    function cancelEdit() {
+      if (hasUnsavedChanges) {
+        UIComponents.confirm(
+          '저장하지 않은 변경사항이 있습니다. 정말 취소하시겠습니까?',
+          () => {
+            resetEditMode();
+          },
+          () => {}
+        );
+      } else {
+        resetEditMode();
+      }
+    }
+
+    // 수정 모드 리셋
+    function resetEditMode() {
+      if (autoSaveTimer) clearInterval(autoSaveTimer);
+
+      currentMeeting = null;
+      isEditMode = false;
+      hasUnsavedChanges = false;
+
+      document.getElementById('listMode').style.display = 'block';
+      document.getElementById('editMode').style.display = 'none';
+      document.querySelector('.bottom-nav').style.display = 'flex';
+
+      renderMeetingList();
+    }
+
+    // 뒤로가기 처리
+    function handleBack() {
+      if (isEditMode) {
+        cancelEdit();
+      } else {
+        NavigationHelper.navigate('DASHBOARD');
+      }
+    }
+
+    // 페이지 이탈 방지
+    window.addEventListener('beforeunload', (e) => {
+      if (hasUnsavedChanges) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    });
+
+    // 초기화
+    if (meetingId) {
+      editMeetingById(meetingId);
+    } else {
+      renderMeetingList();
+    }
+  </script>
+</body>
+</html>
diff --git a/design/uiux/prototype/TEST_RESULTS.md b/design/uiux/prototype_bk/TEST_RESULTS.md
similarity index 100%
rename from design/uiux/prototype/TEST_RESULTS.md
rename to design/uiux/prototype_bk/TEST_RESULTS.md
diff --git a/design/uiux/prototype_fix/common.css b/design/uiux/prototype_bk/common.css
similarity index 100%
rename from design/uiux/prototype_fix/common.css
rename to design/uiux/prototype_bk/common.css
diff --git a/design/uiux/prototype_fix/common.js b/design/uiux/prototype_bk/common.js
similarity index 98%
rename from design/uiux/prototype_fix/common.js
rename to design/uiux/prototype_bk/common.js
index b5989e5..f1b70db 100644
--- a/design/uiux/prototype_fix/common.js
+++ b/design/uiux/prototype_bk/common.js
@@ -587,12 +587,9 @@ const UIComponents = {
         <div style="flex: 1;">
           <h3 class="text-h5">${meeting.title}</h3>
           <p class="text-caption text-gray">${Utils.formatDate(meeting.date)} ${meeting.startTime || ''} · ${meeting.attendees?.length || 0}명</p>
-          <p class="text-caption text-gray mt-1">최종 수정: ${Utils.formatTimeAgo(meeting.updatedAt)}</p>
         </div>
-        <div class="d-flex flex-column align-end gap-2">
-          ${meeting.status === 'confirmed'
-            ? '<span class="badge badge-confirmed">확정완료</span>'
-            : '<span class="badge badge-draft">작성중</span>'}
+        <div class="d-flex align-center gap-2">
+          ${UIComponents.createBadge(statusText[meeting.status] || '작성중', statusClass[meeting.status] || 'draft')}
         </div>
       </div>
     `;
diff --git a/design/uiux/prototype_fix/05-회의진행.html b/design/uiux/prototype_fix/05-회의진행.html
deleted file mode 100644
index 3a7010a..0000000
--- a/design/uiux/prototype_fix/05-회의진행.html
+++ /dev/null
@@ -1,1001 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>회의 진행 - 회의록 서비스</title>
-  <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
-  <style>
-    .live-speech {
-      background: var(--accent-50);
-      border-left: 4px solid var(--accent-500);
-      padding: 16px;
-      border-radius: 8px;
-      position: sticky;
-      top: 60px;
-      z-index: 10;
-    }
-
-    .speaking-indicator {
-      width: 8px;
-      height: 8px;
-      background: var(--error);
-      border-radius: 50%;
-      animation: pulse 1.5s infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.5; }
-    }
-
-    .section-content {
-      min-height: 100px;
-      padding: 12px;
-      background: var(--white);
-      border: 1px solid var(--gray-300);
-      border-radius: 8px;
-      white-space: pre-wrap;
-      word-wrap: break-word;
-    }
-
-    .section-content[contenteditable="true"] {
-      outline: 2px solid var(--primary-500);
-    }
-
-    .term-highlight {
-      background: linear-gradient(180deg, transparent 60%, var(--accent-200) 60%);
-      cursor: pointer;
-      border-bottom: 1px dotted var(--accent-500);
-    }
-
-    .recording-status {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 16px;
-      background: var(--error-bg);
-      border-radius: 20px;
-      font-size: 13px;
-      color: var(--error);
-    }
-
-    .action-bar {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background: var(--white);
-      border-top: 1px solid var(--gray-200);
-      padding: 12px 16px;
-      display: flex;
-      gap: 8px;
-      z-index: var(--z-fixed);
-    }
-
-    /* 프롬프트 선택 모달 스타일 (NEW) */
-    .prompt-option {
-      display: flex;
-      align-items: flex-start;
-      gap: 12px;
-      padding: 16px;
-      background: var(--white);
-      border: 2px solid var(--gray-200);
-      border-radius: var(--radius-md);
-      margin-bottom: 12px;
-      cursor: pointer;
-      transition: all var(--transition-normal);
-    }
-
-    .prompt-option:hover {
-      border-color: var(--primary-500);
-      background: var(--primary-50);
-    }
-
-    .prompt-option.selected {
-      border-color: var(--primary-500);
-      background: var(--primary-50);
-      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
-    }
-
-    .prompt-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: var(--radius-md);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-      flex-shrink: 0;
-    }
-
-    .prompt-content {
-      flex: 1;
-    }
-
-    .prompt-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--gray-900);
-      margin-bottom: 4px;
-    }
-
-    .prompt-description {
-      font-size: 13px;
-      color: var(--gray-600);
-      line-height: 1.5;
-    }
-
-    .prompt-example {
-      font-size: 12px;
-      color: var(--gray-500);
-      margin-top: 8px;
-      padding: 8px;
-      background: var(--gray-50);
-      border-radius: 4px;
-    }
-
-    /* UFR-AI-040: 관련 회의록 자동 연결 스타일 */
-    .related-meetings-section {
-      background: linear-gradient(135deg, var(--accent-50) 0%, var(--primary-50) 100%);
-      border-radius: 12px;
-      padding: 16px;
-      margin-bottom: 16px;
-      border: 1px solid var(--accent-200);
-    }
-
-    .related-meetings-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      cursor: pointer;
-      user-select: none;
-      margin-bottom: 0;
-      transition: all var(--transition-normal);
-    }
-
-    .related-meetings-header:hover {
-      opacity: 0.8;
-    }
-
-    .related-meetings-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .related-meetings-title h3 {
-      font-size: 16px;
-      font-weight: 600;
-      color: var(--gray-900);
-      margin: 0;
-    }
-
-    .ai-badge-small {
-      background: var(--accent-500);
-      color: var(--white);
-      font-size: 11px;
-      font-weight: 600;
-      padding: 3px 8px;
-      border-radius: 12px;
-      text-transform: uppercase;
-    }
-
-    .chevron-icon {
-      transition: transform 0.3s ease;
-      color: var(--gray-600);
-    }
-
-    .chevron-icon.expanded {
-      transform: rotate(180deg);
-    }
-
-    .related-meetings-content {
-      max-height: 0;
-      overflow: hidden;
-      transition: max-height 0.3s ease-in-out;
-      margin-top: 0;
-    }
-
-    .related-meetings-content.expanded {
-      max-height: 800px;
-      margin-top: 12px;
-    }
-
-    .related-meeting-card {
-      background: var(--white);
-      border: 1px solid var(--gray-200);
-      border-radius: 8px;
-      padding: 12px;
-      margin-bottom: 10px;
-      cursor: pointer;
-      transition: all var(--transition-normal);
-    }
-
-    .related-meeting-card:last-child {
-      margin-bottom: 0;
-    }
-
-    .related-meeting-card:hover {
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      transform: translateY(-2px);
-      border-color: var(--primary-500);
-    }
-
-    .related-meeting-card:active {
-      transform: translateY(0);
-    }
-
-    .meeting-card-header {
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      margin-bottom: 8px;
-    }
-
-    .meeting-card-title {
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--gray-900);
-      margin: 0;
-      flex: 1;
-      line-height: 1.4;
-    }
-
-    .relevance-score {
-      font-size: 11px;
-      font-weight: 700;
-      padding: 4px 8px;
-      border-radius: 12px;
-      white-space: nowrap;
-      margin-left: 8px;
-      flex-shrink: 0;
-    }
-
-    .relevance-high {
-      background-color: var(--success-bg);
-      color: var(--success);
-    }
-
-    .relevance-medium {
-      background-color: var(--primary-50);
-      color: var(--primary-500);
-    }
-
-    .relevance-low {
-      background-color: var(--gray-100);
-      color: var(--gray-700);
-    }
-
-    .meeting-card-meta {
-      font-size: 12px;
-      color: var(--gray-600);
-      margin-bottom: 6px;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-
-    .meeting-card-attendees {
-      font-size: 12px;
-      color: var(--gray-700);
-      margin-bottom: 8px;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-
-    .meeting-card-keywords {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-      margin-top: 8px;
-    }
-
-    .keyword-tag {
-      background-color: var(--accent-100);
-      color: var(--accent-700);
-      font-size: 11px;
-      font-weight: 500;
-      padding: 3px 8px;
-      border-radius: 4px;
-    }
-
-    .meeting-card-summary {
-      font-size: 12px;
-      color: var(--gray-600);
-      margin-top: 8px;
-      line-height: 1.4;
-      border-top: 1px solid var(--gray-100);
-      padding-top: 8px;
-    }
-
-    .no-related-meetings {
-      text-align: center;
-      padding: 24px;
-      color: var(--gray-500);
-      font-size: 13px;
-    }
-
-    .no-related-meetings .material-symbols-outlined {
-      font-size: 48px;
-      opacity: 0.3;
-      margin-bottom: 8px;
-      display: block;
-    }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <div style="flex: 1;">
-        <h1 class="header-title" id="meetingTitle">회의 진행</h1>
-        <div class="d-flex align-center gap-3 mt-1">
-          <span class="text-caption" id="elapsedTime">00:00:00</span>
-          <div class="recording-status">
-            <div class="speaking-indicator"></div>
-            <span>녹음 중</span>
-          </div>
-        </div>
-      </div>
-      <button class="btn-icon" onclick="showMenu()" aria-label="메뉴">
-        <span class="material-symbols-outlined">more_vert</span>
-      </button>
-    </div>
-
-    <!-- 메인 컨텐츠 -->
-    <div class="content" style="padding-bottom: 80px;">
-      <!-- 실시간 발언 영역 -->
-      <div class="live-speech mb-4">
-        <div class="d-flex align-center gap-2 mb-2">
-          <span class="material-symbols-outlined" style="color: var(--accent-700);">mic</span>
-          <span class="text-h6" style="color: var(--accent-700);" id="currentSpeaker">김철수</span>
-        </div>
-        <p class="text-body" id="liveText">회의를 시작하겠습니다. 오늘은 프로젝트 킥오프 회의로...</p>
-      </div>
-
-      <!-- AI 처리 인디케이터 -->
-      <div class="ai-processing mb-4">
-        <span class="material-symbols-outlined ai-icon">auto_awesome</span>
-        <span>AI가 발언 내용을 분석하여 회의록을 작성하고 있습니다</span>
-      </div>
-
-      <!-- UFR-AI-040: 관련 회의록 자동 연결 섹션 -->
-      <div class="related-meetings-section">
-        <div class="related-meetings-header" onclick="toggleRelatedMeetings()">
-          <div class="related-meetings-title">
-            <span class="ai-badge-small">AI</span>
-            <h3>관련 회의록 <span style="color: var(--gray-600); font-weight: normal;" id="relatedCount">(분석 중...)</span></h3>
-          </div>
-          <span class="material-symbols-outlined chevron-icon" id="chevronIcon">expand_more</span>
-        </div>
-        <div class="related-meetings-content" id="relatedMeetingsContent">
-          <div id="relatedMeetingsList">
-            <!-- JavaScript로 동적 생성 -->
-          </div>
-        </div>
-      </div>
-
-      <!-- 회의록 섹션들 -->
-      <div id="sectionList">
-        <!-- JavaScript로 동적 생성 -->
-      </div>
-    </div>
-
-    <!-- 하단 액션 바 -->
-    <div class="action-bar">
-      <button class="btn btn-secondary" onclick="pauseRecording()" id="pauseBtn">
-        <span class="material-symbols-outlined">pause</span>
-        일시정지
-      </button>
-      <button class="btn btn-text" onclick="addManualNote()">
-        <span class="material-symbols-outlined">edit_note</span>
-        메모 추가
-      </button>
-      <button class="btn btn-primary" onclick="endMeeting()" style="flex: 1;">
-        <span class="material-symbols-outlined">stop_circle</span>
-        회의 종료
-      </button>
-    </div>
-  </div>
-
-  <script src="common.js"></script>
-  <script>
-    if (!NavigationHelper.requireAuth()) {}
-
-    const currentUser = StorageManager.getCurrentUser();
-    const meetingId = NavigationHelper.getQueryParam('meetingId') || Utils.generateId('MTG');
-    let templateData = JSON.parse(localStorage.getItem('selected_template') || 'null') || {
-      type: 'general',
-      name: '일반 회의',
-      sections: TEMPLATES.general.sections
-    };
-
-    let isRecording = true;
-    let isPaused = false;
-    let startTime = Date.now();
-    let elapsedInterval;
-
-    // UFR-AI-040: 관련 회의록 데이터 (AI가 자동으로 찾아서 연결)
-    const RELATED_MEETINGS = [
-      {
-        id: 'MTG-2025-001',
-        title: '프로젝트 초기 기획 회의',
-        date: '2025-10-15',
-        attendees: ['김철수', '이영희', '박민수'],
-        relevanceScore: 87,
-        keywords: ['프로젝트', 'Mobile First', '기획', '킥오프'],
-        summary: '프로젝트 초기 방향성 논의 및 Mobile First 전략 수립. 개발 기간과 주요 마일스톤 확정.',
-        folder: '프로젝트/회의록'
-      },
-      {
-        id: 'MTG-2025-002',
-        title: '마이크로서비스 아키텍처 설계 회의',
-        date: '2025-10-18',
-        attendees: ['김철수', '정도현', '이영희'],
-        relevanceScore: 78,
-        keywords: ['마이크로서비스', '아키텍처', 'API', '설계'],
-        summary: '서비스 분리 기준 및 API 설계 방향 논의. 데이터베이스 구조와 통신 프로토콜 결정.',
-        folder: '프로젝트/회의록'
-      },
-      {
-        id: 'MTG-2025-003',
-        title: 'UI/UX 디자인 리뷰 회의',
-        date: '2025-10-19',
-        attendees: ['이영희', '최유진', '박민수'],
-        relevanceScore: 72,
-        keywords: ['UI/UX', 'Mobile', '디자인', '사용자경험'],
-        summary: 'Mobile First 디자인 시스템 및 사용자 경험 개선 방안. 프로토타입 피드백 반영.',
-        folder: '프로젝트/회의록'
-      }
-    ];
-
-    // 프롬프트 유형 정의 (UFR-AI-030)
-    const PROMPT_TYPES = {
-      onePage: {
-        id: 'onePage',
-        title: '1Page 요약',
-        icon: '📄',
-        bgColor: 'var(--primary-100)',
-        description: 'A4 1장 분량으로 핵심만 간결하게 요약합니다',
-        example: '주요 결정사항과 액션 아이템 중심으로 압축된 요약본',
-        prompt: '이 회의록을 A4 1장 분량의 간결한 요약본으로 재구성해주세요. 핵심 결정사항과 액션 아이템을 우선적으로 포함하세요.'
-      },
-      corePoints: {
-        id: 'corePoints',
-        title: '핵심 요약',
-        icon: '⭐',
-        bgColor: 'var(--accent-100)',
-        description: '3-5개 핵심 포인트만 간결하게 추출합니다',
-        example: '• 핵심 결정 1\n• 핵심 결정 2\n• 핵심 결정 3',
-        prompt: '이 회의록에서 가장 중요한 3-5개 핵심 포인트만 추출하여 불릿 포인트로 정리해주세요.'
-      },
-      detailed: {
-        id: 'detailed',
-        title: '상세 보고서',
-        icon: '📋',
-        bgColor: 'var(--secondary-100)',
-        description: '시간순으로 상세한 기록과 타임스탬프 포함',
-        example: '09:00 - 회의 시작\n09:05 - 안건 1 논의...',
-        prompt: '이 회의록을 시간순으로 상세하게 기록하고, 각 논의 항목에 타임스탬프를 추가하여 상세 보고서 형식으로 재구성해주세요.'
-      },
-      decision: {
-        id: 'decision',
-        title: '의사결정 중심',
-        icon: '✅',
-        bgColor: 'var(--success-bg)',
-        description: '결정 사항과 근거만 명확하게 정리합니다',
-        example: '[결정] 프로젝트 일정: Q4까지\n[근거] 리소스 가용성 고려',
-        prompt: '이 회의록에서 의사결정 사항만 추출하고, 각 결정의 근거와 배경을 함께 정리해주세요.'
-      },
-      action: {
-        id: 'action',
-        title: '액션 아이템 중심',
-        icon: '📌',
-        bgColor: 'var(--warning-bg)',
-        description: 'Todo와 담당자를 강조하여 표시합니다',
-        example: '담당자: 김철수\nTodo: 프로젝트 계획서 작성\n마감: 10/25',
-        prompt: '이 회의록에서 모든 액션 아이템(Todo)을 추출하고, 담당자, 마감일, 우선순위를 명확하게 표시해주세요.'
-      },
-      executive: {
-        id: 'executive',
-        title: '경영진 보고용',
-        icon: '👔',
-        bgColor: 'var(--gray-100)',
-        description: '임원진에게 보고할 형식으로 재구성합니다',
-        example: '요약: [한 문장 요약]\n주요 결정: [...]\n리스크: [...]',
-        prompt: '이 회의록을 경영진에게 보고할 형식으로 재구성해주세요. 요약, 주요 결정, 기대 효과, 리스크를 포함하세요.'
-      },
-      custom: {
-        id: 'custom',
-        title: '커스텀 프롬프트',
-        icon: '✏️',
-        bgColor: 'var(--info-bg)',
-        description: '사용자 정의 프롬프트를 직접 입력합니다',
-        example: '원하는 형식을 자유롭게 요청하세요',
-        prompt: '' // 사용자가 직접 입력
-      }
-    };
-
-    // 경과 시간 표시
-    function updateElapsedTime() {
-      const elapsed = Date.now() - startTime;
-      document.getElementById('elapsedTime').textContent = Utils.formatDuration(elapsed);
-    }
-
-    elapsedInterval = setInterval(updateElapsedTime, 1000);
-
-    // UFR-AI-040: 관련 회의록 토글
-    function toggleRelatedMeetings() {
-      const content = document.getElementById('relatedMeetingsContent');
-      const chevron = document.getElementById('chevronIcon');
-
-      content.classList.toggle('expanded');
-      chevron.classList.toggle('expanded');
-
-      // 처음 열 때만 렌더링
-      if (content.classList.contains('expanded') && !content.dataset.rendered) {
-        renderRelatedMeetings();
-        content.dataset.rendered = 'true';
-      }
-    }
-
-    // UFR-AI-040: 관련 회의록 렌더링
-    function renderRelatedMeetings() {
-      const container = document.getElementById('relatedMeetingsList');
-
-      if (RELATED_MEETINGS.length === 0) {
-        container.innerHTML = `
-          <div class="no-related-meetings">
-            <span class="material-symbols-outlined">search_off</span>
-            <p>관련된 회의록을 찾을 수 없습니다</p>
-          </div>
-        `;
-        return;
-      }
-
-      container.innerHTML = RELATED_MEETINGS.map(meeting => {
-        const scoreClass = getRelevanceClass(meeting.relevanceScore);
-        const scoreLabel = meeting.relevanceScore + '%';
-
-        return `
-          <div class="related-meeting-card" onclick="navigateToRelatedMeeting('${meeting.id}')">
-            <div class="meeting-card-header">
-              <h4 class="meeting-card-title">${meeting.title}</h4>
-              <span class="relevance-score ${scoreClass}">${scoreLabel}</span>
-            </div>
-            <div class="meeting-card-meta">
-              <span class="material-symbols-outlined" style="font-size: 14px;">calendar_today</span>
-              ${meeting.date}
-            </div>
-            <div class="meeting-card-attendees">
-              <span class="material-symbols-outlined" style="font-size: 14px;">group</span>
-              ${meeting.attendees.join(', ')}
-            </div>
-            <div class="meeting-card-keywords">
-              ${meeting.keywords.map(keyword =>
-                `<span class="keyword-tag">${keyword}</span>`
-              ).join('')}
-            </div>
-            <div class="meeting-card-summary">
-              ${meeting.summary}
-            </div>
-          </div>
-        `;
-      }).join('');
-
-      // 관련 회의록 개수 업데이트
-      document.getElementById('relatedCount').textContent = `(${RELATED_MEETINGS.length}건)`;
-    }
-
-    // UFR-AI-040: 유사도 점수에 따른 색상 클래스 반환
-    function getRelevanceClass(score) {
-      if (score >= 85) return 'relevance-high';     // 85-100%: 녹색 (높은 관련성)
-      if (score >= 75) return 'relevance-medium';   // 75-84%: 파란색 (중간 관련성)
-      return 'relevance-low';                       // 70-74%: 회색 (낮은 관련성)
-    }
-
-    // UFR-AI-040: 관련 회의록으로 이동
-    function navigateToRelatedMeeting(meetingId) {
-      UIComponents.showToast(`회의록 상세 화면으로 이동: ${meetingId}`, 'info');
-      // TODO: 실제로는 회의록 상세 화면(10-회의록상세조회.html)으로 이동
-      // NavigationHelper.navigate('MEETING_DETAIL', { meetingId });
-    }
-
-    // UFR-AI-040: 관련 회의록 AI 분석 시뮬레이션
-    function simulateRelatedMeetingsAnalysis() {
-      // 2초 후 관련 회의록 개수 표시
-      setTimeout(() => {
-        document.getElementById('relatedCount').textContent = `(${RELATED_MEETINGS.length}건)`;
-        UIComponents.showToast(`AI가 ${RELATED_MEETINGS.length}건의 관련 회의록을 찾았습니다`, 'success', 3000);
-      }, 2000);
-    }
-
-    // 섹션 렌더링
-    function renderSections() {
-      const container = document.getElementById('sectionList');
-
-      container.innerHTML = templateData.sections.map((section, index) => `
-        <div class="card mb-4" id="section-${section.id}">
-          <div class="d-flex justify-between align-center mb-3">
-            <h3 class="text-h4">${section.name}</h3>
-            <div class="d-flex align-center gap-2">
-              ${section.verified ? '<span class="verified-badge"><span class="material-symbols-outlined" style="font-size: 14px;">check_circle</span> 검증완료</span>' : ''}
-              <button class="btn-icon" onclick="toggleEdit('${section.id}')">
-                <span class="material-symbols-outlined">edit</span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="section-content"
-            id="content-${section.id}"
-            contenteditable="false"
-          >${section.content || '(AI가 발언 내용을 분석하여 자동으로 작성합니다)'}</div>
-          <div class="d-flex justify-between align-center mt-3">
-            <button class="btn btn-text btn-sm" onclick="showPromptTypeModal('${section.id}')">
-              <span class="material-symbols-outlined">auto_awesome</span>
-              AI 개선
-            </button>
-            <label class="form-checkbox">
-              <input type="checkbox" ${section.verified ? 'checked' : ''} onchange="toggleVerify('${section.id}', this.checked)">
-              <span class="text-body-sm">검증 완료</span>
-            </label>
-          </div>
-        </div>
-      `).join('');
-
-      // 실시간 AI 작성 시뮬레이션
-      simulateAIWriting();
-    }
-
-    // AI 자동 작성 시뮬레이션
-    function simulateAIWriting() {
-      const sampleContent = {
-        '참석자': '김철수 (기획팀 팀장), 이영희 (개발팀 선임), 박민수 (디자인팀 사원)',
-        '안건': '신규 회의록 서비스 프로젝트 킥오프\n- 프로젝트 목표 및 범위 확정\n- 역할 분담 및 일정 계획',
-        '논의 내용': 'Mobile First 설계 방침으로 진행하기로 결정\nAI 기반 회의록 자동 작성 기능을 핵심으로 개발\n템플릿 시스템 및 실시간 협업 기능 포함',
-        '결정 사항': '개발 기간: 2025년 Q4까지\n기술 스택: React, Node.js, PostgreSQL\n주간 스크럼 회의 매주 월요일 09:00',
-        'Todo': '김철수: 프로젝트 계획서 작성 (10/25까지)\n이영희: API 문서 작성 (10/24까지)\n박민수: 디자인 시안 1차 검토 (10/23까지)'
-      };
-
-      templateData.sections.forEach((section, index) => {
-        setTimeout(() => {
-          const content = sampleContent[section.name] || `${section.name}에 대한 내용이 자동으로 작성됩니다...`;
-          const contentEl = document.getElementById(`content-${section.id}`);
-          if (contentEl) {
-            contentEl.textContent = content;
-            section.content = content;
-
-            // 전문용어 하이라이트 추가
-            highlightTerms(section.id);
-          }
-        }, (index + 1) * 2000);
-      });
-    }
-
-    // 전문용어 하이라이트
-    function highlightTerms(sectionId) {
-      const contentEl = document.getElementById(`content-${sectionId}`);
-      if (!contentEl) return;
-
-      const terms = ['Mobile First', 'AI', 'API', 'PostgreSQL', 'React'];
-      let html = contentEl.textContent;
-
-      terms.forEach(term => {
-        const regex = new RegExp(term, 'g');
-        html = html.replace(regex, `<span class="term-highlight" onclick="showTermExplanation('${term}')">${term}</span>`);
-      });
-
-      contentEl.innerHTML = html;
-    }
-
-    // 전문용어 설명 표시
-    function showTermExplanation(term) {
-      const explanations = {
-        'Mobile First': 'Mobile First는 모바일 환경을 우선적으로 고려하여 디자인하고, 이후 더 큰 화면으로 확장하는 설계 방법론입니다.',
-        'AI': 'Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다.',
-        'API': 'Application Programming Interface의 약자로, 소프트웨어 간 상호작용을 위한 인터페이스입니다.',
-        'PostgreSQL': '오픈소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다.',
-        'React': 'Facebook에서 개발한 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다.'
-      };
-
-      UIComponents.showToast(explanations[term] || '설명을 불러오는 중...', 'info', 5000);
-    }
-
-    // 프롬프트 유형 선택 모달 표시 (NEW - UFR-AI-030)
-    function showPromptTypeModal(sectionId) {
-      let selectedPromptType = null;
-
-      const modalContent = `
-        <div>
-          <p class="text-body mb-4">AI가 회의록 내용을 다양한 형식으로 개선합니다. 원하는 유형을 선택하세요.</p>
-          ${Object.values(PROMPT_TYPES).map(type => `
-            <div class="prompt-option" onclick="selectPromptType('${type.id}')">
-              <div class="prompt-icon" style="background: ${type.bgColor};">${type.icon}</div>
-              <div class="prompt-content">
-                <div class="prompt-title">${type.title}</div>
-                <div class="prompt-description">${type.description}</div>
-                ${type.example ? `<div class="prompt-example">예시: ${type.example}</div>` : ''}
-              </div>
-            </div>
-          `).join('')}
-        </div>
-      `;
-
-      const modal = UIComponents.showModal({
-        title: 'AI 개선 - 프롬프트 유형 선택',
-        content: modalContent,
-        footer: `
-          <button class="btn btn-secondary" onclick="closeModal()">취소</button>
-          <button class="btn btn-primary" id="applyPromptBtn" onclick="applyPrompt('${sectionId}')" disabled>적용</button>
-        `,
-        onClose: () => {
-          selectedPromptType = null;
-        }
-      });
-
-      // 전역 함수로 프롬프트 선택 처리
-      window.selectPromptType = (typeId) => {
-        selectedPromptType = typeId;
-
-        // 모든 옵션 선택 해제
-        document.querySelectorAll('.prompt-option').forEach(opt => {
-          opt.classList.remove('selected');
-        });
-
-        // 선택한 옵션 강조
-        const selectedOption = Array.from(document.querySelectorAll('.prompt-option'))
-          .find(opt => opt.getAttribute('onclick').includes(typeId));
-
-        if (selectedOption) {
-          selectedOption.classList.add('selected');
-        }
-
-        // 적용 버튼 활성화
-        const applyBtn = document.getElementById('applyPromptBtn');
-        if (applyBtn) {
-          applyBtn.disabled = false;
-        }
-
-        // 커스텀 프롬프트의 경우 입력 받기
-        if (typeId === 'custom') {
-          const customPrompt = prompt('원하는 형식을 설명해주세요:');
-          if (customPrompt && customPrompt.trim()) {
-            PROMPT_TYPES.custom.prompt = customPrompt.trim();
-          } else {
-            selectedPromptType = null;
-            if (applyBtn) applyBtn.disabled = true;
-            if (selectedOption) selectedOption.classList.remove('selected');
-          }
-        }
-      };
-
-      // 전역 함수로 프롬프트 적용 처리
-      window.applyPrompt = (sectionId) => {
-        if (!selectedPromptType) return;
-
-        const promptType = PROMPT_TYPES[selectedPromptType];
-        closeModal();
-
-        UIComponents.showLoading(`AI가 "${promptType.title}" 형식으로 내용을 개선하고 있습니다...`);
-
-        // AI 처리 시뮬레이션 (2초)
-        setTimeout(() => {
-          const section = templateData.sections.find(s => s.id === sectionId);
-          const contentEl = document.getElementById(`content-${sectionId}`);
-
-          if (section && contentEl) {
-            // 프롬프트 유형에 따라 다른 형식으로 변환 (시뮬레이션)
-            let improvedContent = section.content;
-
-            switch (selectedPromptType) {
-              case 'onePage':
-                improvedContent = `[1Page 요약]\n${section.content.split('\n').slice(0, 2).join('\n')}`;
-                break;
-              case 'corePoints':
-                improvedContent = section.content.split('\n').map(line => `• ${line}`).slice(0, 3).join('\n');
-                break;
-              case 'detailed':
-                improvedContent = section.content.split('\n').map((line, i) => `[${i + 1}] ${line}`).join('\n');
-                break;
-              case 'decision':
-                improvedContent = `[결정 사항]\n${section.content}\n\n[근거]\n관련 논의 내용 참조`;
-                break;
-              case 'action':
-                improvedContent = `[액션 아이템]\n${section.content}\n\n[담당자 및 마감일 포함]`;
-                break;
-              case 'executive':
-                improvedContent = `[경영진 보고]\n요약: ${section.content.split('\n')[0]}\n세부사항: 추가 내용...`;
-                break;
-              case 'custom':
-                improvedContent = `[커스텀 프롬프트 적용]\n${section.content}`;
-                break;
-            }
-
-            section.content = improvedContent;
-            contentEl.textContent = improvedContent;
-          }
-
-          UIComponents.hideLoading();
-          UIComponents.showToast(`"${promptType.title}" 형식으로 AI 개선이 완료되었습니다`, 'success');
-        }, 2000);
-      };
-    }
-
-    // 섹션 편집 토글
-    function toggleEdit(sectionId) {
-      const contentEl = document.getElementById(`content-${sectionId}`);
-      const isEditable = contentEl.getAttribute('contenteditable') === 'true';
-
-      contentEl.setAttribute('contenteditable', !isEditable);
-
-      if (!isEditable) {
-        contentEl.focus();
-        UIComponents.showToast('수정 모드 활성화', 'info');
-      } else {
-        // 저장
-        const section = templateData.sections.find(s => s.id === sectionId);
-        if (section) {
-          section.content = contentEl.textContent;
-        }
-        UIComponents.showToast('변경사항이 저장되었습니다', 'success');
-      }
-    }
-
-    // 섹션 검증 토글
-    function toggleVerify(sectionId, checked) {
-      const section = templateData.sections.find(s => s.id === sectionId);
-      if (section) {
-        section.verified = checked;
-        section.verifiedBy = checked ? [currentUser.name] : [];
-      }
-      renderSections();
-      UIComponents.showToast(checked ? '섹션이 검증되었습니다' : '검증이 취소되었습니다', checked ? 'success' : 'info');
-    }
-
-    // 녹음 일시정지/재개
-    function pauseRecording() {
-      isPaused = !isPaused;
-      const btn = document.getElementById('pauseBtn');
-      const indicator = document.querySelector('.recording-status');
-
-      if (isPaused) {
-        btn.innerHTML = '<span class="material-symbols-outlined">play_arrow</span> 재개';
-        indicator.style.background = 'var(--gray-200)';
-        indicator.style.color = 'var(--gray-600)';
-        indicator.querySelector('span:last-child').textContent = '일시정지';
-        UIComponents.showToast('녹음이 일시정지되었습니다', 'info');
-      } else {
-        btn.innerHTML = '<span class="material-symbols-outlined">pause</span> 일시정지';
-        indicator.style.background = 'var(--error-bg)';
-        indicator.style.color = 'var(--error)';
-        indicator.querySelector('span:last-child').textContent = '녹음 중';
-        UIComponents.showToast('녹음이 재개되었습니다', 'success');
-      }
-    }
-
-    // 수동 메모 추가
-    function addManualNote() {
-      const note = prompt('추가할 메모를 입력하세요:');
-      if (note && note.trim()) {
-        UIComponents.showToast('메모가 추가되었습니다', 'success');
-        // 실제로는 해당 섹션에 추가
-      }
-    }
-
-    // 메뉴 표시
-    function showMenu() {
-      UIComponents.showModal({
-        title: '회의 설정',
-        content: `
-          <div class="d-flex flex-column gap-2">
-            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); viewParticipants()">
-              <span class="material-symbols-outlined">group</span>
-              참석자 목록
-            </button>
-            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); viewKeywords()">
-              <span class="material-symbols-outlined">sell</span>
-              주요 키워드
-            </button>
-            <button class="btn btn-text" style="justify-content: flex-start;" onclick="closeModal(); viewStatistics()">
-              <span class="material-symbols-outlined">bar_chart</span>
-              발언 통계
-            </button>
-          </div>
-        `,
-        footer: '<button class="btn btn-secondary" onclick="closeModal()">닫기</button>',
-        onClose: () => {}
-      });
-    }
-
-    // 참석자 목록 표시
-    function viewParticipants() {
-      UIComponents.showToast('참석자: ' + DUMMY_USERS.slice(0, 3).map(u => u.name).join(', '), 'info', 3000);
-    }
-
-    // 주요 키워드 표시
-    function viewKeywords() {
-      UIComponents.showToast('주요 키워드: Mobile First, AI, 프로젝트, 개발', 'info', 3000);
-    }
-
-    // 발언 통계 표시
-    function viewStatistics() {
-      UIComponents.showToast('발언 통계: 김철수 40%, 이영희 35%, 박민수 25%', 'info', 3000);
-    }
-
-    // 모달 닫기
-    function closeModal() {
-      const modal = document.querySelector('.modal-overlay');
-      if (modal) modal.remove();
-    }
-
-    // 회의 종료
-    function endMeeting() {
-      UIComponents.confirm(
-        '회의를 종료하시겠습니까? 회의록이 저장됩니다.',
-        () => {
-          clearInterval(elapsedInterval);
-
-          // 회의록 저장
-          const duration = Date.now() - startTime;
-          const meetingData = {
-            id: meetingId,
-            title: document.getElementById('meetingTitle').textContent || '제목 없는 회의',
-            date: new Date().toISOString().split('T')[0],
-            startTime: new Date(startTime).toTimeString().slice(0, 5),
-            endTime: new Date().toTimeString().slice(0, 5),
-            duration: duration,
-            location: '온라인',
-            attendees: DUMMY_USERS.slice(0, 3).map(u => u.name),
-            template: templateData.type,
-            status: 'draft',
-            sections: templateData.sections,
-            createdBy: currentUser.id,
-            createdAt: new Date(startTime).toISOString(),
-            updatedAt: new Date().toISOString()
-          };
-
-          StorageManager.addMeeting(meetingData);
-          localStorage.setItem('current_meeting', JSON.stringify(meetingData));
-
-          UIComponents.showToast('회의가 종료되었습니다', 'success');
-
-          setTimeout(() => {
-            NavigationHelper.navigate('MEETING_END', { meetingId });
-          }, 1000);
-        },
-        () => {}
-      );
-    }
-
-    // 초기 렌더링
-    renderSections();
-
-    // UFR-AI-040: 관련 회의록 AI 분석 시작
-    simulateRelatedMeetingsAnalysis();
-
-    // 실시간 발언 시뮬레이션
-    const speeches = [
-      { speaker: '김철수', text: '프로젝트 킥오프 회의를 시작하겠습니다...' },
-      { speaker: '이영희', text: '개발 일정에 대해 의견을 드리겠습니다...' },
-      { speaker: '박민수', text: '디자인 시안은 다음 주까지 준비하겠습니다...' }
-    ];
-
-    let speechIndex = 0;
-    setInterval(() => {
-      const speech = speeches[speechIndex % speeches.length];
-      document.getElementById('currentSpeaker').textContent = speech.speaker;
-      document.getElementById('liveText').textContent = speech.text;
-      speechIndex++;
-    }, 5000);
-
-    // 페이지 이탈 방지
-    window.addEventListener('beforeunload', (e) => {
-      e.preventDefault();
-      e.returnValue = '';
-    });
-  </script>
-</body>
-</html>
diff --git a/design/uiux/prototype_fix/08-회의록공유.html b/design/uiux/prototype_fix/08-회의록공유.html
deleted file mode 100644
index 358e100..0000000
--- a/design/uiux/prototype_fix/08-회의록공유.html
+++ /dev/null
@@ -1,615 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>회의록 공유 - 회의록 서비스</title>
-  <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
-  <style>
-    /* NEW - UFR-MEET-060: 다음 회의 일정 자동 등록 스타일 */
-    .next-meeting-banner {
-      padding: 16px;
-      background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
-      border: 1px solid var(--primary-300);
-      border-radius: 12px;
-      margin-bottom: 20px;
-      display: none;
-    }
-
-    .next-meeting-banner.active {
-      display: block;
-    }
-
-    .next-meeting-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 12px;
-    }
-
-    .next-meeting-icon {
-      width: 40px;
-      height: 40px;
-      background: var(--primary-500);
-      color: var(--white);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-    }
-
-    .next-meeting-title {
-      flex: 1;
-      font-weight: 600;
-      color: var(--primary-800);
-      font-size: 16px;
-    }
-
-    .next-meeting-content {
-      padding-left: 52px;
-    }
-
-    .next-meeting-info {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      margin-bottom: 16px;
-    }
-
-    .info-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 14px;
-      color: var(--gray-700);
-    }
-
-    .info-row .material-symbols-outlined {
-      font-size: 18px;
-      color: var(--primary-600);
-    }
-
-    .next-meeting-actions {
-      display: flex;
-      gap: 8px;
-    }
-
-    .btn-add-calendar {
-      flex: 1;
-      padding: 10px 16px;
-      background: var(--primary-500);
-      color: var(--white);
-      border: none;
-      border-radius: 8px;
-      font-weight: 600;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-    }
-
-    .btn-add-calendar:hover {
-      background: var(--primary-600);
-    }
-
-    .btn-dismiss {
-      padding: 10px 16px;
-      background: var(--white);
-      color: var(--gray-700);
-      border: 1px solid var(--gray-300);
-      border-radius: 8px;
-      cursor: pointer;
-    }
-
-    .btn-dismiss:hover {
-      background: var(--gray-50);
-    }
-
-    /* AI 감지 배지 */
-    .ai-detected-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 8px;
-      background: var(--success-100);
-      color: var(--success-700);
-      border-radius: 12px;
-      font-size: 11px;
-      font-weight: 600;
-    }
-
-    /* 일정 수정 폼 스타일 */
-    .schedule-edit-form {
-      padding: 16px;
-      background: var(--white);
-      border-radius: 8px;
-      border: 1px solid var(--gray-300);
-      margin-top: 12px;
-      display: none;
-    }
-
-    .schedule-edit-form.active {
-      display: block;
-    }
-
-    .schedule-edit-form .form-group {
-      margin-bottom: 12px;
-    }
-
-    .schedule-edit-form .form-label {
-      font-size: 13px;
-      font-weight: 600;
-      color: var(--gray-700);
-      margin-bottom: 6px;
-      display: block;
-    }
-
-    .schedule-edit-form .form-input,
-    .schedule-edit-form .form-select {
-      width: 100%;
-      padding: 8px 12px;
-      font-size: 14px;
-    }
-
-    .schedule-edit-actions {
-      display: flex;
-      gap: 8px;
-      margin-top: 12px;
-    }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <button class="btn-icon" onclick="NavigationHelper.goBack()" aria-label="뒤로가기">
-        <span class="material-symbols-outlined">arrow_back</span>
-      </button>
-      <h1 class="header-title">회의록 공유</h1>
-      <button class="btn btn-primary btn-sm" onclick="shareMinutes()">공유하기</button>
-    </div>
-
-    <!-- 메인 컨텐츠 -->
-    <div class="content">
-      <!-- NEW - UFR-MEET-060: 다음 회의 일정 자동 감지 배너 -->
-      <div class="next-meeting-banner" id="nextMeetingBanner">
-        <div class="next-meeting-header">
-          <div class="next-meeting-icon">
-            <span class="material-symbols-outlined">event</span>
-          </div>
-          <div class="next-meeting-title">
-            다음 회의 일정 감지됨
-            <span class="ai-detected-badge">
-              <span class="material-symbols-outlined" style="font-size: 12px;">auto_awesome</span>
-              AI 자동 감지
-            </span>
-          </div>
-        </div>
-
-        <div class="next-meeting-content">
-          <div class="next-meeting-info" id="nextMeetingInfo">
-            <!-- JavaScript로 동적 생성 -->
-          </div>
-
-          <div class="next-meeting-actions">
-            <button class="btn-add-calendar" onclick="toggleScheduleEditForm()">
-              <span class="material-symbols-outlined">edit_calendar</span>
-              일정 확인 및 등록
-            </button>
-            <button class="btn-dismiss" onclick="dismissNextMeeting()">
-              닫기
-            </button>
-          </div>
-
-          <!-- 일정 수정 폼 -->
-          <div class="schedule-edit-form" id="scheduleEditForm">
-            <div class="form-group">
-              <label class="form-label">회의 제목</label>
-              <input type="text" id="nextMeetingTitle" class="form-input" placeholder="회의 제목 입력">
-            </div>
-            <div class="d-flex gap-2">
-              <div class="form-group" style="flex: 1;">
-                <label class="form-label">날짜</label>
-                <input type="date" id="nextMeetingDate" class="form-input">
-              </div>
-              <div class="form-group" style="flex: 1;">
-                <label class="form-label">시작 시간</label>
-                <input type="time" id="nextMeetingTime" class="form-input">
-              </div>
-            </div>
-            <div class="form-group">
-              <label class="form-label">참석자</label>
-              <input type="text" id="nextMeetingAttendees" class="form-input" placeholder="참석자 이름 (쉼표로 구분)">
-            </div>
-            <div class="schedule-edit-actions">
-              <button class="btn btn-secondary" onclick="toggleScheduleEditForm()">
-                취소
-              </button>
-              <button class="btn btn-primary" style="flex: 1;" onclick="addToCalendar()">
-                <span class="material-symbols-outlined" style="font-size: 18px;">add</span>
-                캘린더에 등록
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <form id="shareForm">
-        <!-- 공유 대상 -->
-        <div class="form-group">
-          <label class="form-label required">공유 대상</label>
-          <label class="form-checkbox mb-2">
-            <input type="radio" name="shareTarget" value="all" checked onchange="toggleAttendeeList()">
-            <span>참석자 전체</span>
-          </label>
-          <label class="form-checkbox">
-            <input type="radio" name="shareTarget" value="selected" onchange="toggleAttendeeList()">
-            <span>특정 참석자 선택</span>
-          </label>
-        </div>
-
-        <!-- 참석자 목록 (선택 시) -->
-        <div class="form-group" id="attendeeListGroup" style="display: none;">
-          <div id="attendeeList">
-            <!-- JavaScript로 동적 생성 -->
-          </div>
-        </div>
-
-        <!-- 공유 권한 -->
-        <div class="form-group">
-          <label for="sharePermission" class="form-label required">공유 권한</label>
-          <select id="sharePermission" class="form-select">
-            <option value="read" selected>읽기 전용</option>
-            <option value="comment">댓글 가능</option>
-            <option value="edit">편집 가능</option>
-          </select>
-        </div>
-
-        <!-- 공유 방식 -->
-        <div class="form-group">
-          <label class="form-label">공유 방식</label>
-          <label class="form-checkbox mb-2">
-            <input type="checkbox" id="sendEmail" checked>
-            <span>이메일 발송</span>
-          </label>
-          <button type="button" class="btn btn-secondary btn-sm w-full" onclick="copyLink()">
-            <span class="material-symbols-outlined">link</span>
-            링크 복사
-          </button>
-        </div>
-
-        <!-- 링크 보안 설정 -->
-        <div class="card mb-4">
-          <h3 class="text-h5 mb-3">링크 보안 설정</h3>
-
-          <label class="form-checkbox mb-3">
-            <input type="checkbox" id="enableExpiry" onchange="toggleExpiryDate()">
-            <span>유효기간 설정</span>
-          </label>
-
-          <div id="expiryDateGroup" style="display: none;">
-            <select id="expiryPeriod" class="form-select mb-3">
-              <option value="7">7일</option>
-              <option value="30" selected>30일</option>
-              <option value="90">90일</option>
-              <option value="unlimited">무제한</option>
-            </select>
-          </div>
-
-          <label class="form-checkbox mb-3">
-            <input type="checkbox" id="enablePassword" onchange="togglePassword()">
-            <span>비밀번호 설정</span>
-          </label>
-
-          <div id="passwordGroup" style="display: none;">
-            <input
-              type="password"
-              id="linkPassword"
-              class="form-input"
-              placeholder="링크 접근 비밀번호"
-            >
-          </div>
-        </div>
-      </form>
-
-      <!-- 공유 이력 -->
-      <div class="card">
-        <h3 class="text-h4 mb-3">공유 이력</h3>
-        <div id="shareHistory">
-          <p class="text-body-sm text-gray text-center" style="padding: 24px 0;">아직 공유 이력이 없습니다</p>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script src="common.js"></script>
-  <script>
-    if (!NavigationHelper.requireAuth()) {}
-
-    const currentUser = StorageManager.getCurrentUser();
-    const meetingId = NavigationHelper.getQueryParam('meetingId');
-    const meeting = meetingId ? StorageManager.getMeetingById(meetingId) : null;
-
-    if (!meeting) {
-      UIComponents.showToast('회의 정보를 찾을 수 없습니다', 'error');
-      setTimeout(() => NavigationHelper.navigate('DASHBOARD'), 2000);
-    }
-
-    // NEW - UFR-MEET-060: 다음 회의 일정 감지 변수
-    let detectedNextMeeting = null;
-
-    // NEW - UFR-MEET-060: 다음 회의 일정 감지
-    function detectNextMeeting() {
-      if (!meeting || !meeting.sections) return;
-
-      // 회의록 전체 내용 추출
-      let fullContent = meeting.sections.map(s => s.content || '').join('\n');
-
-      // 다음 회의 관련 키워드 패턴 감지
-      const nextMeetingPatterns = [
-        /다음\s*회의[는은]?\s*(\d{4}[-년]\d{1,2}[-월]\d{1,2}일?)?/,
-        /다음주\s*(\w+요일)?\s*(오전|오후)?\s*(\d{1,2})[시:]/,
-        /(\d{1,2})월\s*(\d{1,2})일\s*(오전|오후)?\s*(\d{1,2})[시:]/,
-        /후속\s*회의/,
-        /재논의.*필요/
-      ];
-
-      let hasNextMeeting = false;
-      for (const pattern of nextMeetingPatterns) {
-        if (pattern.test(fullContent)) {
-          hasNextMeeting = true;
-          break;
-        }
-      }
-
-      // 다음 회의 일정이 감지되면 (시뮬레이션: 50% 확률)
-      if (hasNextMeeting || Math.random() < 0.5) {
-        // 예제 일정 생성
-        const today = new Date();
-        const nextWeek = new Date(today);
-        nextWeek.setDate(nextWeek.getDate() + 7);
-
-        const nextMeetingDate = nextWeek.toISOString().split('T')[0];
-        const nextMeetingTime = '14:00';
-
-        detectedNextMeeting = {
-          title: meeting.title + ' - 후속 회의',
-          date: nextMeetingDate,
-          time: nextMeetingTime,
-          attendees: meeting.attendees ? meeting.attendees.join(', ') : '',
-          detectedFrom: '회의록 내용 분석 결과'
-        };
-
-        showNextMeetingBanner();
-      }
-    }
-
-    // 다음 회의 배너 표시
-    function showNextMeetingBanner() {
-      if (!detectedNextMeeting) return;
-
-      const banner = document.getElementById('nextMeetingBanner');
-      const infoContainer = document.getElementById('nextMeetingInfo');
-
-      // 감지된 일정 정보 표시
-      infoContainer.innerHTML = `
-        <div class="info-row">
-          <span class="material-symbols-outlined">title</span>
-          <span><strong>제목:</strong> ${detectedNextMeeting.title}</span>
-        </div>
-        <div class="info-row">
-          <span class="material-symbols-outlined">calendar_today</span>
-          <span><strong>날짜:</strong> ${Utils.formatDate(detectedNextMeeting.date)}</span>
-        </div>
-        <div class="info-row">
-          <span class="material-symbols-outlined">schedule</span>
-          <span><strong>시간:</strong> ${detectedNextMeeting.time}</span>
-        </div>
-        <div class="info-row">
-          <span class="material-symbols-outlined">group</span>
-          <span><strong>참석자:</strong> ${detectedNextMeeting.attendees}</span>
-        </div>
-      `;
-
-      // 수정 폼 초기값 설정
-      document.getElementById('nextMeetingTitle').value = detectedNextMeeting.title;
-      document.getElementById('nextMeetingDate').value = detectedNextMeeting.date;
-      document.getElementById('nextMeetingTime').value = detectedNextMeeting.time;
-      document.getElementById('nextMeetingAttendees').value = detectedNextMeeting.attendees;
-
-      banner.classList.add('active');
-    }
-
-    // 일정 수정 폼 토글
-    function toggleScheduleEditForm() {
-      const form = document.getElementById('scheduleEditForm');
-      form.classList.toggle('active');
-    }
-
-    // 다음 회의 배너 닫기
-    function dismissNextMeeting() {
-      document.getElementById('nextMeetingBanner').classList.remove('active');
-      detectedNextMeeting = null;
-    }
-
-    // 캘린더에 등록
-    function addToCalendar() {
-      const title = document.getElementById('nextMeetingTitle').value;
-      const date = document.getElementById('nextMeetingDate').value;
-      const time = document.getElementById('nextMeetingTime').value;
-      const attendees = document.getElementById('nextMeetingAttendees').value;
-
-      if (!title || !date || !time) {
-        UIComponents.showToast('제목, 날짜, 시간을 모두 입력해주세요', 'warning');
-        return;
-      }
-
-      UIComponents.showLoading('캘린더에 등록 중...');
-
-      setTimeout(() => {
-        // 새 회의 생성 (시뮬레이션)
-        const newMeeting = {
-          id: 'meeting_' + Date.now(),
-          title: title,
-          date: date,
-          startTime: time,
-          endTime: '',
-          attendees: attendees ? attendees.split(',').map(a => a.trim()) : [],
-          status: 'scheduled',
-          createdBy: currentUser.id,
-          createdAt: new Date().toISOString(),
-          updatedAt: new Date().toISOString(),
-          sections: [],
-          template: meeting.template || 'general'
-        };
-
-        // LocalStorage에 저장
-        const meetings = StorageManager.getMeetings();
-        meetings.push(newMeeting);
-        localStorage.setItem('meetings', JSON.stringify(meetings));
-
-        UIComponents.hideLoading();
-        UIComponents.showToast('다음 회의 일정이 캘린더에 등록되었습니다', 'success');
-
-        // 배너 닫기
-        dismissNextMeeting();
-        toggleScheduleEditForm();
-      }, 1000);
-    }
-
-    // 참석자 목록 토글
-    function toggleAttendeeList() {
-      const selected = document.querySelector('input[name="shareTarget"]:checked').value === 'selected';
-      document.getElementById('attendeeListGroup').style.display = selected ? 'block' : 'none';
-
-      if (selected && meeting) {
-        renderAttendeeList();
-      }
-    }
-
-    // 참석자 목록 렌더링
-    function renderAttendeeList() {
-      const container = document.getElementById('attendeeList');
-      container.innerHTML = meeting.attendees.map((attendee, index) => `
-        <label class="form-checkbox mb-2">
-          <input type="checkbox" name="attendee" value="${attendee}" checked>
-          <span>${attendee}</span>
-        </label>
-      `).join('');
-    }
-
-    // 유효기간 토글
-    function toggleExpiryDate() {
-      const enabled = document.getElementById('enableExpiry').checked;
-      document.getElementById('expiryDateGroup').style.display = enabled ? 'block' : 'none';
-    }
-
-    // 비밀번호 토글
-    function togglePassword() {
-      const enabled = document.getElementById('enablePassword').checked;
-      document.getElementById('passwordGroup').style.display = enabled ? 'block' : 'none';
-    }
-
-    // 링크 복사
-    function copyLink() {
-      const link = `https://meeting.example.com/share/${meeting.id}`;
-
-      // 클립보드 복사
-      navigator.clipboard.writeText(link).then(() => {
-        UIComponents.showToast('링크가 복사되었습니다', 'success');
-      }).catch(() => {
-        // Fallback
-        const tempInput = document.createElement('input');
-        tempInput.value = link;
-        document.body.appendChild(tempInput);
-        tempInput.select();
-        document.execCommand('copy');
-        document.body.removeChild(tempInput);
-        UIComponents.showToast('링크가 복사되었습니다', 'success');
-      });
-    }
-
-    // 회의록 공유
-    function shareMinutes() {
-      const shareTarget = document.querySelector('input[name="shareTarget"]:checked').value;
-      const sharePermission = document.getElementById('sharePermission').value;
-      const sendEmail = document.getElementById('sendEmail').checked;
-      const enableExpiry = document.getElementById('enableExpiry').checked;
-      const enablePassword = document.getElementById('enablePassword').checked;
-
-      let recipients = [];
-      if (shareTarget === 'all') {
-        recipients = meeting.attendees;
-      } else {
-        const checked = Array.from(document.querySelectorAll('input[name="attendee"]:checked'));
-        recipients = checked.map(input => input.value);
-      }
-
-      if (recipients.length === 0) {
-        UIComponents.showToast('공유할 대상을 선택해주세요', 'error');
-        return;
-      }
-
-      const shareData = {
-        meetingId: meeting.id,
-        recipients: recipients,
-        permission: sharePermission,
-        sendEmail: sendEmail,
-        expiry: enableExpiry ? document.getElementById('expiryPeriod').value : null,
-        password: enablePassword ? document.getElementById('linkPassword').value : null,
-        sharedAt: new Date().toISOString(),
-        sharedBy: currentUser.name
-      };
-
-      UIComponents.showLoading('회의록을 공유하는 중...');
-
-      setTimeout(() => {
-        // 공유 처리 (시뮬레이션)
-        meeting.sharedWith = recipients.map(name => {
-          const user = DUMMY_USERS.find(u => u.name === name);
-          return user ? user.id : '';
-        }).filter(id => id);
-
-        StorageManager.updateMeeting(meeting.id, meeting);
-
-        UIComponents.hideLoading();
-
-        if (sendEmail) {
-          UIComponents.showToast(`${recipients.length}명에게 이메일이 발송되었습니다`, 'success');
-        } else {
-          UIComponents.showToast('회의록이 공유되었습니다', 'success');
-        }
-
-        // 공유 이력 추가
-        addShareHistory(shareData);
-
-        setTimeout(() => {
-          NavigationHelper.navigate('DASHBOARD');
-        }, 2000);
-      }, 1500);
-    }
-
-    // 공유 이력 추가
-    function addShareHistory(shareData) {
-      const container = document.getElementById('shareHistory');
-      const html = `
-        <div class="mb-3 p-3" style="background: var(--gray-50); border-radius: 8px;">
-          <div class="d-flex justify-between align-center mb-2">
-            <span class="text-body">${shareData.sharedAt.split('T')[0]} ${shareData.sharedAt.split('T')[1].slice(0, 5)}</span>
-            <span class="badge badge-status">${shareData.permission === 'read' ? '읽기 전용' : shareData.permission === 'comment' ? '댓글 가능' : '편집 가능'}</span>
-          </div>
-          <p class="text-body-sm">대상: ${shareData.recipients.join(', ')}</p>
-        </div>
-      `;
-
-      container.innerHTML = html + container.innerHTML;
-    }
-
-    // 초기화: 다음 회의 일정 감지
-    detectNextMeeting();
-  </script>
-</body>
-</html>
diff --git a/design/uiux/prototype_fix/11-회의록수정.html b/design/uiux/prototype_fix/11-회의록수정.html
deleted file mode 100644
index 5d4b2c4..0000000
--- a/design/uiux/prototype_fix/11-회의록수정.html
+++ /dev/null
@@ -1,845 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>회의록 수정 - 회의록 서비스</title>
-  <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
-  <style>
-    .auto-save-indicator {
-      position: fixed;
-      top: 70px;
-      right: 16px;
-      padding: 8px 12px;
-      background: var(--white);
-      border-radius: 20px;
-      box-shadow: var(--shadow-sm);
-      font-size: 12px;
-      color: var(--gray-600);
-      z-index: var(--z-sticky);
-      display: none;
-    }
-
-    .auto-save-indicator.active {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-
-    /* NEW - UFR-MEET-055: 섹션 잠금 해제 버튼 스타일 */
-    .section-lock-area {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 12px;
-      background: var(--gray-50);
-      border-radius: 8px;
-      margin-top: 12px;
-    }
-
-    .btn-unlock {
-      padding: 6px 12px;
-      font-size: 14px;
-      background: var(--primary-500);
-      color: var(--white);
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-
-    .btn-unlock:hover {
-      background: var(--primary-600);
-    }
-
-    /* NEW - UFR-COLLAB-020: 충돌 해결 UI 스타일 */
-    .conflict-banner {
-      position: fixed;
-      top: 60px;
-      left: 16px;
-      right: 16px;
-      padding: 12px 16px;
-      background: var(--error-50);
-      border: 1px solid var(--error-500);
-      border-radius: 8px;
-      z-index: var(--z-sticky);
-      display: none;
-      align-items: center;
-      gap: 12px;
-    }
-
-    .conflict-banner.active {
-      display: flex;
-    }
-
-    .conflict-icon {
-      color: var(--error-500);
-      font-size: 24px;
-    }
-
-    .conflict-content {
-      flex: 1;
-    }
-
-    .conflict-title {
-      font-weight: 600;
-      color: var(--error-700);
-      margin-bottom: 4px;
-    }
-
-    .conflict-description {
-      font-size: 12px;
-      color: var(--error-600);
-    }
-
-    .btn-resolve {
-      padding: 6px 12px;
-      font-size: 14px;
-      background: var(--error-500);
-      color: var(--white);
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-    }
-
-    .btn-resolve:hover {
-      background: var(--error-600);
-    }
-
-    /* 충돌 해결 모달 스타일 */
-    .conflict-resolution {
-      padding: 0;
-    }
-
-    .conflict-header {
-      padding: 20px;
-      background: var(--error-50);
-      border-bottom: 1px solid var(--gray-200);
-    }
-
-    .conflict-body {
-      padding: 20px;
-    }
-
-    .conflict-section {
-      margin-bottom: 20px;
-    }
-
-    .conflict-label {
-      font-weight: 600;
-      font-size: 14px;
-      color: var(--gray-700);
-      margin-bottom: 8px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-
-    .conflict-diff {
-      padding: 12px;
-      background: var(--gray-50);
-      border-radius: 8px;
-      border: 2px solid transparent;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-
-    .conflict-diff:hover {
-      border-color: var(--primary-300);
-    }
-
-    .conflict-diff.selected {
-      border-color: var(--primary-500);
-      background: var(--primary-50);
-    }
-
-    .conflict-user {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 12px;
-      color: var(--gray-600);
-      margin-bottom: 8px;
-    }
-
-    .conflict-time {
-      font-size: 11px;
-      color: var(--gray-500);
-    }
-
-    .conflict-content-box {
-      padding: 12px;
-      background: var(--white);
-      border-radius: 6px;
-      font-size: 14px;
-      line-height: 1.6;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
-    .conflict-actions {
-      display: flex;
-      gap: 8px;
-      padding: 20px;
-      border-top: 1px solid var(--gray-200);
-    }
-
-    /* 직접 작성 모드 */
-    .merge-editor {
-      width: 100%;
-      min-height: 150px;
-      padding: 12px;
-      border: 1px solid var(--gray-300);
-      border-radius: 8px;
-      font-family: inherit;
-      font-size: 14px;
-      resize: vertical;
-    }
-
-    .merge-editor:focus {
-      outline: none;
-      border-color: var(--primary-500);
-    }
-
-    /* 충돌 표시 배지 */
-    .conflict-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 8px;
-      background: var(--error-100);
-      color: var(--error-700);
-      border-radius: 12px;
-      font-size: 12px;
-      font-weight: 600;
-    }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <button class="btn-icon" onclick="handleBack()" aria-label="뒤로가기">
-        <span class="material-symbols-outlined">arrow_back</span>
-      </button>
-      <h1 class="header-title">회의록 수정</h1>
-      <button class="btn btn-primary btn-sm" onclick="saveMeeting()">저장</button>
-    </div>
-
-    <!-- 자동 저장 인디케이터 -->
-    <div class="auto-save-indicator" id="autoSaveIndicator">
-      <span class="material-symbols-outlined" style="font-size: 16px;">check_circle</span>
-      <span id="autoSaveText">저장됨</span>
-    </div>
-
-    <!-- NEW - 충돌 알림 배너 (UFR-COLLAB-020) -->
-    <div class="conflict-banner" id="conflictBanner">
-      <span class="material-symbols-outlined conflict-icon">warning</span>
-      <div class="conflict-content">
-        <div class="conflict-title">동시 수정 충돌 감지</div>
-        <div class="conflict-description" id="conflictDescription">
-          다른 사용자가 동일한 섹션을 수정했습니다. 충돌을 해결해주세요.
-        </div>
-      </div>
-      <button class="btn-resolve" onclick="showConflictResolution()">
-        해결하기
-      </button>
-    </div>
-
-    <!-- 메인 컨텐츠 -->
-    <div class="content">
-      <!-- 회의록 목록 모드 -->
-      <div id="listMode">
-        <!-- 필터 및 검색 -->
-        <div class="d-flex gap-2 mb-4">
-          <select id="statusFilter" class="form-select" style="flex: 1;" onchange="renderMeetingList()">
-            <option value="all">전체</option>
-            <option value="draft">작성중</option>
-            <option value="confirmed">확정완료</option>
-          </select>
-          <select id="sortOrder" class="form-select" style="flex: 1;" onchange="renderMeetingList()">
-            <option value="recent">최신순</option>
-            <option value="date">회의일시순</option>
-            <option value="title">제목순</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <input
-            type="text"
-            id="searchInput"
-            class="form-input"
-            placeholder="회의 제목, 참석자, 키워드 검색"
-            oninput="renderMeetingList()"
-          >
-        </div>
-
-        <!-- 회의록 목록 -->
-        <div id="meetingList">
-          <!-- JavaScript로 동적 생성 -->
-        </div>
-      </div>
-
-      <!-- 수정 모드 -->
-      <div id="editMode" style="display: none;">
-        <!-- 기본 정보 수정 -->
-        <div class="card mb-4">
-          <h3 class="text-h5 mb-3">기본 정보</h3>
-          <div class="form-group">
-            <label for="editTitle" class="form-label required">회의 제목</label>
-            <input type="text" id="editTitle" class="form-input" maxlength="100">
-          </div>
-          <div class="d-flex gap-2">
-            <div class="form-group" style="flex: 1;">
-              <label for="editDate" class="form-label">날짜</label>
-              <input type="date" id="editDate" class="form-input">
-            </div>
-            <div class="form-group" style="flex: 1;">
-              <label for="editStartTime" class="form-label">시작</label>
-              <input type="time" id="editStartTime" class="form-input">
-            </div>
-            <div class="form-group" style="flex: 1;">
-              <label for="editEndTime" class="form-label">종료</label>
-              <input type="time" id="editEndTime" class="form-input">
-            </div>
-          </div>
-        </div>
-
-        <!-- 섹션별 수정 -->
-        <div id="editSectionList">
-          <!-- JavaScript로 동적 생성 -->
-        </div>
-
-        <!-- 하단 액션 -->
-        <div class="d-flex gap-2 mt-4">
-          <button class="btn btn-secondary" onclick="cancelEdit()">
-            취소
-          </button>
-          <button class="btn btn-primary" style="flex: 1;" onclick="saveMeeting()">
-            저장
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script src="common.js"></script>
-  <script>
-    if (!NavigationHelper.requireAuth()) {}
-
-    const currentUser = StorageManager.getCurrentUser();
-    const meetingId = NavigationHelper.getQueryParam('id');
-    let currentMeeting = null;
-    let isEditMode = false;
-    let autoSaveTimer = null;
-    let hasUnsavedChanges = false;
-
-    // NEW - UFR-COLLAB-020: 충돌 관리 변수
-    let conflicts = [];
-    let currentConflict = null;
-
-    // 회의록 목록 렌더링
-    function renderMeetingList() {
-      const meetings = StorageManager.getMeetings();
-      const myMeetings = meetings.filter(m =>
-        m.createdBy === currentUser.id || m.attendees.includes(currentUser.name)
-      );
-
-      // 필터링
-      const statusFilter = document.getElementById('statusFilter').value;
-      let filtered = myMeetings;
-      if (statusFilter !== 'all') {
-        filtered = myMeetings.filter(m => m.status === statusFilter);
-      }
-
-      // 검색
-      const searchQuery = document.getElementById('searchInput').value.toLowerCase();
-      if (searchQuery) {
-        filtered = filtered.filter(m =>
-          m.title.toLowerCase().includes(searchQuery) ||
-          m.attendees.some(a => a.toLowerCase().includes(searchQuery))
-        );
-      }
-
-      // 정렬
-      const sortOrder = document.getElementById('sortOrder').value;
-      if (sortOrder === 'recent') {
-        filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
-      } else if (sortOrder === 'date') {
-        filtered.sort((a, b) => new Date(b.date) - new Date(a.date));
-      } else if (sortOrder === 'title') {
-        filtered.sort((a, b) => a.title.localeCompare(b.title));
-      }
-
-      // 렌더링
-      const container = document.getElementById('meetingList');
-
-      if (filtered.length === 0) {
-        container.innerHTML = '<p class="text-body text-gray text-center" style="padding: 48px 0;">회의록이 없습니다</p>';
-        return;
-      }
-
-      container.innerHTML = filtered.map(meeting => `
-        <div class="meeting-item" onclick="editMeetingById('${meeting.id}')">
-          <div style="flex: 1;">
-            <h3 class="text-h5">${meeting.title}</h3>
-            <p class="text-caption text-gray">${Utils.formatDate(meeting.date)} ${meeting.startTime || ''} · ${meeting.attendees?.length || 0}명</p>
-            <p class="text-caption text-gray mt-1">최종 수정: ${Utils.formatTimeAgo(meeting.updatedAt)}</p>
-          </div>
-          <div class="d-flex flex-column align-end gap-2">
-            ${meeting.status === 'confirmed' ? '<span class="badge badge-confirmed">확정완료</span>' : '<span class="badge badge-draft">작성중</span>'}
-            ${meeting.createdBy === currentUser.id ? '' : '<span class="text-caption text-gray">조회 전용</span>'}
-          </div>
-        </div>
-      `).join('');
-    }
-
-    // 회의록 수정 모드로 전환
-    function editMeetingById(id) {
-      const meeting = StorageManager.getMeetingById(id);
-      if (!meeting) {
-        UIComponents.showToast('회의록을 찾을 수 없습니다', 'error');
-        return;
-      }
-
-      // 권한 체크
-      const canEdit = meeting.createdBy === currentUser.id;
-      if (!canEdit) {
-        UIComponents.showToast('본인이 작성한 회의록만 수정할 수 있습니다', 'warning');
-        setTimeout(() => {
-          NavigationHelper.navigate('MEETING_DETAIL', { id });
-        }, 1500);
-        return;
-      }
-
-      currentMeeting = { ...meeting };
-      isEditMode = true;
-
-      // 확정완료 → 작성중으로 변경
-      if (currentMeeting.status === 'confirmed') {
-        currentMeeting.status = 'draft';
-        UIComponents.showToast('확정완료 회의록이 작성중으로 변경되었습니다', 'info');
-      }
-
-      // UI 전환
-      document.getElementById('listMode').style.display = 'none';
-      document.getElementById('editMode').style.display = 'block';
-
-      // 기본 정보 설정
-      document.getElementById('editTitle').value = currentMeeting.title;
-      document.getElementById('editDate').value = currentMeeting.date;
-      document.getElementById('editStartTime').value = currentMeeting.startTime || '';
-      document.getElementById('editEndTime').value = currentMeeting.endTime || '';
-
-      // 섹션 렌더링
-      renderEditSections();
-
-      // NEW - 충돌 감지 (UFR-COLLAB-020)
-      detectConflicts();
-
-      // 자동 저장 시작
-      startAutoSave();
-    }
-
-    // NEW - UFR-COLLAB-020: 충돌 감지
-    function detectConflicts() {
-      // 시뮬레이션: 30% 확률로 충돌 발생
-      if (Math.random() < 0.3 && currentMeeting.sections.length > 0) {
-        const conflictSectionIndex = Math.floor(Math.random() * currentMeeting.sections.length);
-        const conflictSection = currentMeeting.sections[conflictSectionIndex];
-
-        const otherUsers = DUMMY_USERS.filter(u => u.id !== currentUser.id);
-        const conflictUser = otherUsers[Math.floor(Math.random() * otherUsers.length)];
-
-        conflicts.push({
-          sectionId: conflictSection.id,
-          sectionName: conflictSection.name,
-          myVersion: {
-            content: conflictSection.content || '(내용 없음)',
-            modifiedAt: new Date().toISOString(),
-            modifiedBy: currentUser.name
-          },
-          theirVersion: {
-            content: generateRandomConflictContent(conflictSection.content),
-            modifiedAt: new Date(Date.now() - 5000).toISOString(),
-            modifiedBy: conflictUser.name
-          }
-        });
-
-        showConflictBanner();
-      }
-    }
-
-    // 충돌 내용 생성 (시뮬레이션)
-    function generateRandomConflictContent(originalContent) {
-      if (!originalContent) return '다른 사용자가 추가한 내용입니다.';
-
-      const variations = [
-        originalContent + '\n\n추가 논의사항: 예산 검토 필요',
-        originalContent.replace('결정', '잠정 결정'),
-        '수정된 내용:\n' + originalContent,
-        originalContent + '\n\n※ 재논의 필요'
-      ];
-
-      return variations[Math.floor(Math.random() * variations.length)];
-    }
-
-    // 충돌 배너 표시
-    function showConflictBanner() {
-      const banner = document.getElementById('conflictBanner');
-      const description = document.getElementById('conflictDescription');
-
-      if (conflicts.length > 0) {
-        description.textContent = `${conflicts.length}개 섹션에서 충돌이 감지되었습니다. 충돌을 해결해주세요.`;
-        banner.classList.add('active');
-      } else {
-        banner.classList.remove('active');
-      }
-    }
-
-    // NEW - UFR-COLLAB-020: 충돌 해결 모달 표시
-    function showConflictResolution() {
-      if (conflicts.length === 0) return;
-
-      currentConflict = conflicts[0];
-      let selectedVersion = 'mine'; // 기본값: 내 버전
-
-      const modalContent = `
-        <div class="conflict-resolution">
-          <div class="conflict-header">
-            <h3 class="text-h5" style="color: var(--error-700);">
-              <span class="material-symbols-outlined" style="vertical-align: middle;">warning</span>
-              충돌 해결 필요
-            </h3>
-            <p class="text-caption text-gray mt-2">
-              "${currentConflict.sectionName}" 섹션에서 충돌이 감지되었습니다. 최종 버전을 선택하거나 직접 작성하세요.
-            </p>
-          </div>
-
-          <div class="conflict-body">
-            <!-- 내 버전 -->
-            <div class="conflict-section">
-              <div class="conflict-label">
-                <span class="material-symbols-outlined" style="color: var(--primary-500);">person</span>
-                내 수정 내용
-              </div>
-              <div class="conflict-diff selected" id="myVersion" onclick="selectVersion('mine')">
-                <div class="conflict-user">
-                  <span class="material-symbols-outlined" style="font-size: 14px;">account_circle</span>
-                  ${currentConflict.myVersion.modifiedBy}
-                  <span class="conflict-time">· ${Utils.formatTimeAgo(currentConflict.myVersion.modifiedAt)}</span>
-                </div>
-                <div class="conflict-content-box">${currentConflict.myVersion.content}</div>
-              </div>
-            </div>
-
-            <!-- 타인 버전 -->
-            <div class="conflict-section">
-              <div class="conflict-label">
-                <span class="material-symbols-outlined" style="color: var(--warning-500);">group</span>
-                다른 사용자 수정 내용
-              </div>
-              <div class="conflict-diff" id="theirVersion" onclick="selectVersion('theirs')">
-                <div class="conflict-user">
-                  <span class="material-symbols-outlined" style="font-size: 14px;">account_circle</span>
-                  ${currentConflict.theirVersion.modifiedBy}
-                  <span class="conflict-time">· ${Utils.formatTimeAgo(currentConflict.theirVersion.modifiedAt)}</span>
-                </div>
-                <div class="conflict-content-box">${currentConflict.theirVersion.content}</div>
-              </div>
-            </div>
-
-            <!-- 직접 작성 -->
-            <div class="conflict-section">
-              <div class="conflict-label">
-                <span class="material-symbols-outlined" style="color: var(--success-500);">edit</span>
-                직접 작성하기
-              </div>
-              <div class="conflict-diff" id="manualVersion" onclick="selectVersion('manual')">
-                <textarea
-                  class="merge-editor"
-                  id="manualContent"
-                  placeholder="양쪽 내용을 참고하여 직접 작성하세요..."
-                >${currentConflict.myVersion.content}</textarea>
-              </div>
-            </div>
-          </div>
-
-          <div class="conflict-actions">
-            <button class="btn btn-secondary" onclick="UIComponents.closeModal()">
-              취소
-            </button>
-            <button class="btn btn-primary" style="flex: 1;" onclick="resolveConflict()">
-              이 버전으로 확정
-            </button>
-          </div>
-        </div>
-      `;
-
-      UIComponents.showModal('충돌 해결', modalContent, null, 'large');
-
-      // 버전 선택 함수
-      window.selectVersion = function(version) {
-        selectedVersion = version;
-
-        document.getElementById('myVersion').classList.remove('selected');
-        document.getElementById('theirVersion').classList.remove('selected');
-        document.getElementById('manualVersion').classList.remove('selected');
-
-        if (version === 'mine') {
-          document.getElementById('myVersion').classList.add('selected');
-        } else if (version === 'theirs') {
-          document.getElementById('theirVersion').classList.add('selected');
-        } else if (version === 'manual') {
-          document.getElementById('manualVersion').classList.add('selected');
-          document.getElementById('manualContent').focus();
-        }
-      };
-
-      // 충돌 해결 함수
-      window.resolveConflict = function() {
-        let finalContent = '';
-
-        if (selectedVersion === 'mine') {
-          finalContent = currentConflict.myVersion.content;
-        } else if (selectedVersion === 'theirs') {
-          finalContent = currentConflict.theirVersion.content;
-        } else if (selectedVersion === 'manual') {
-          finalContent = document.getElementById('manualContent').value;
-        }
-
-        // 섹션 내용 업데이트
-        const section = currentMeeting.sections.find(s => s.id === currentConflict.sectionId);
-        if (section) {
-          section.content = finalContent;
-
-          // textarea 업데이트
-          const textarea = document.querySelector(`textarea[data-section-id="${currentConflict.sectionId}"]`);
-          if (textarea) {
-            textarea.value = finalContent;
-          }
-        }
-
-        // 충돌 목록에서 제거
-        conflicts.shift();
-
-        UIComponents.closeModal();
-        UIComponents.showToast('충돌이 해결되었습니다', 'success');
-
-        // 남은 충돌 처리
-        if (conflicts.length > 0) {
-          setTimeout(() => {
-            showConflictResolution();
-          }, 500);
-        } else {
-          showConflictBanner();
-          markAsChanged();
-        }
-      };
-    }
-
-    // 섹션 수정 렌더링
-    function renderEditSections() {
-      const container = document.getElementById('editSectionList');
-
-      container.innerHTML = currentMeeting.sections.map((section, index) => {
-        const hasConflict = conflicts.some(c => c.sectionId === section.id);
-
-        return `
-          <div class="card mb-4">
-            <div class="d-flex justify-between align-center mb-3">
-              <div class="d-flex align-center gap-2">
-                <h3 class="text-h5">${section.name}</h3>
-                ${hasConflict ? '<span class="conflict-badge"><span class="material-symbols-outlined" style="font-size: 14px;">warning</span> 충돌</span>' : ''}
-              </div>
-              ${section.locked ? '<span class="material-symbols-outlined" style="color: var(--gray-600);">lock</span>' : ''}
-            </div>
-            <textarea
-              class="form-textarea"
-              rows="5"
-              data-section-id="${section.id}"
-              onchange="markAsChanged()"
-              ${section.locked ? 'disabled' : ''}
-            >${section.content || ''}</textarea>
-            ${section.locked ? `
-              <!-- NEW - UFR-MEET-055: 섹션 잠금 해제 버튼 -->
-              <div class="section-lock-area">
-                <span class="material-symbols-outlined" style="color: var(--warning-500); font-size: 18px;">lock</span>
-                <div style="flex: 1;">
-                  <p class="text-caption text-gray" style="margin: 0;">
-                    이 섹션은 잠겨있습니다. 수정하려면 잠금을 해제하세요.
-                  </p>
-                </div>
-                <button class="btn-unlock" onclick="unlockSection('${section.id}')">
-                  <span class="material-symbols-outlined" style="font-size: 16px;">lock_open</span>
-                  잠금 해제
-                </button>
-              </div>
-            ` : ''}
-          </div>
-        `;
-      }).join('');
-    }
-
-    // NEW - UFR-MEET-055: 섹션 잠금 해제
-    function unlockSection(sectionId) {
-      UIComponents.confirm(
-        '이 섹션의 잠금을 해제하시겠습니까? 해제 후에는 내용을 수정할 수 있습니다.',
-        () => {
-          const section = currentMeeting.sections.find(s => s.id === sectionId);
-          if (section) {
-            section.locked = false;
-            renderEditSections();
-            UIComponents.showToast('섹션 잠금이 해제되었습니다', 'success');
-            markAsChanged();
-          }
-        },
-        () => {}
-      );
-    }
-
-    // 변경사항 표시
-    function markAsChanged() {
-      hasUnsavedChanges = true;
-    }
-
-    // 자동 저장 시작
-    function startAutoSave() {
-      if (autoSaveTimer) clearInterval(autoSaveTimer);
-
-      autoSaveTimer = setInterval(() => {
-        if (hasUnsavedChanges) {
-          autoSaveMeeting();
-        }
-      }, 30000); // 30초마다 자동 저장
-    }
-
-    // 자동 저장
-    function autoSaveMeeting() {
-      const indicator = document.getElementById('autoSaveIndicator');
-      document.getElementById('autoSaveText').textContent = '저장 중...';
-      indicator.classList.add('active');
-
-      // 데이터 수집
-      collectMeetingData();
-
-      // 저장
-      setTimeout(() => {
-        StorageManager.updateMeeting(currentMeeting.id, currentMeeting);
-        hasUnsavedChanges = false;
-
-        document.getElementById('autoSaveText').textContent = '저장됨';
-
-        setTimeout(() => {
-          indicator.classList.remove('active');
-        }, 2000);
-      }, 500);
-    }
-
-    // 회의록 데이터 수집
-    function collectMeetingData() {
-      currentMeeting.title = document.getElementById('editTitle').value;
-      currentMeeting.date = document.getElementById('editDate').value;
-      currentMeeting.startTime = document.getElementById('editStartTime').value;
-      currentMeeting.endTime = document.getElementById('editEndTime').value;
-
-      // 섹션 내용 수집
-      currentMeeting.sections.forEach(section => {
-        const textarea = document.querySelector(`textarea[data-section-id="${section.id}"]`);
-        if (textarea) {
-          section.content = textarea.value;
-        }
-      });
-
-      currentMeeting.updatedAt = new Date().toISOString();
-    }
-
-    // 회의록 저장
-    function saveMeeting() {
-      if (!currentMeeting) return;
-
-      // 충돌 확인
-      if (conflicts.length > 0) {
-        UIComponents.showToast('먼저 충돌을 해결해주세요', 'warning');
-        showConflictResolution();
-        return;
-      }
-
-      collectMeetingData();
-
-      UIComponents.showLoading('저장하는 중...');
-
-      setTimeout(() => {
-        StorageManager.updateMeeting(currentMeeting.id, currentMeeting);
-        hasUnsavedChanges = false;
-
-        UIComponents.hideLoading();
-        UIComponents.showToast('회의록이 저장되었습니다', 'success');
-
-        setTimeout(() => {
-          window.location.href = '12-회의록목록조회.html';
-        }, 1000);
-      }, 800);
-    }
-
-    // 수정 취소
-    function cancelEdit() {
-      if (hasUnsavedChanges) {
-        UIComponents.confirm(
-          '저장하지 않은 변경사항이 있습니다. 정말 취소하시겠습니까?',
-          () => {
-            resetEditMode();
-          },
-          () => {}
-        );
-      } else {
-        resetEditMode();
-      }
-    }
-
-    // 수정 모드 리셋
-    function resetEditMode() {
-      if (autoSaveTimer) clearInterval(autoSaveTimer);
-
-      currentMeeting = null;
-      isEditMode = false;
-      hasUnsavedChanges = false;
-      conflicts = [];
-      currentConflict = null;
-
-      document.getElementById('listMode').style.display = 'block';
-      document.getElementById('editMode').style.display = 'none';
-      document.getElementById('conflictBanner').classList.remove('active');
-
-      renderMeetingList();
-    }
-
-    // 뒤로가기 처리
-    function handleBack() {
-      if (isEditMode) {
-        cancelEdit();
-      } else {
-        NavigationHelper.navigate('DASHBOARD');
-      }
-    }
-
-    // 페이지 이탈 방지
-    window.addEventListener('beforeunload', (e) => {
-      if (hasUnsavedChanges) {
-        e.preventDefault();
-        e.returnValue = '';
-      }
-    });
-
-    // 초기화
-    if (meetingId) {
-      editMeetingById(meetingId);
-    } else {
-      renderMeetingList();
-    }
-  </script>
-</body>
-</html>
diff --git a/design/uiux/prototype_fix/12-회의록목록조회.html b/design/uiux/prototype_fix/12-회의록목록조회.html
deleted file mode 100644
index 3be4fbe..0000000
--- a/design/uiux/prototype_fix/12-회의록목록조회.html
+++ /dev/null
@@ -1,238 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>회의록 목록 - 회의록 서비스</title>
-  <link rel="stylesheet" href="common.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
-</head>
-<body>
-  <div class="page">
-    <!-- 헤더 -->
-    <div class="header">
-      <button class="btn-icon" onclick="NavigationHelper.navigate('DASHBOARD')" aria-label="뒤로가기">
-        <span class="material-symbols-outlined">arrow_back</span>
-      </button>
-      <h1 class="header-title">내 회의록</h1>
-      <button class="btn-icon" aria-label="검색" title="검색" onclick="focusSearch()">
-        <span class="material-symbols-outlined">search</span>
-      </button>
-    </div>
-
-    <!-- 메인 컨텐츠 -->
-    <div class="content">
-      <!-- 필터 및 검색 -->
-      <div class="d-flex gap-2 mb-4">
-        <select id="statusFilter" class="form-select" style="flex: 1;" onchange="renderMeetingList()">
-          <option value="all">전체</option>
-          <option value="draft">작성중</option>
-          <option value="confirmed">확정완료</option>
-        </select>
-        <select id="sortOrder" class="form-select" style="flex: 1;" onchange="renderMeetingList()">
-          <option value="recent">최신순</option>
-          <option value="date">회의일시순</option>
-          <option value="title">제목순</option>
-        </select>
-      </div>
-
-      <div class="form-group">
-        <input
-          type="text"
-          id="searchInput"
-          class="form-input"
-          placeholder="회의 제목, 참석자, 키워드 검색"
-          oninput="renderMeetingList()"
-        >
-      </div>
-
-      <!-- 통계 정보 -->
-      <div class="card mb-4" style="padding: 16px;">
-        <div class="d-flex justify-between align-center">
-          <div class="text-center" style="flex: 1;">
-            <div class="text-h4" id="totalCount">0</div>
-            <div class="text-caption text-gray">전체</div>
-          </div>
-          <div style="width: 1px; height: 40px; background: var(--gray-200);"></div>
-          <div class="text-center" style="flex: 1;">
-            <div class="text-h4" id="draftCount">0</div>
-            <div class="text-caption text-gray">작성중</div>
-          </div>
-          <div style="width: 1px; height: 40px; background: var(--gray-200);"></div>
-          <div class="text-center" style="flex: 1;">
-            <div class="text-h4" id="confirmedCount">0</div>
-            <div class="text-caption text-gray">확정완료</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 회의록 목록 -->
-      <div id="meetingList">
-        <!-- JavaScript로 동적 생성 -->
-      </div>
-    </div>
-
-    <!-- 하단 네비게이션 -->
-    <nav class="bottom-nav" role="navigation" aria-label="주요 메뉴">
-      <a href="02-대시보드.html" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">home</span>
-        <span>홈</span>
-      </a>
-      <a href="12-회의록목록조회.html" class="bottom-nav-item active" aria-current="page">
-        <span class="material-symbols-outlined bottom-nav-icon">description</span>
-        <span>회의록</span>
-      </a>
-      <a href="09-Todo관리.html" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">check_box</span>
-        <span>Todo</span>
-      </a>
-      <a href="javascript:showProfileMenu()" class="bottom-nav-item">
-        <span class="material-symbols-outlined bottom-nav-icon">account_circle</span>
-        <span>프로필</span>
-      </a>
-    </nav>
-  </div>
-
-  <script src="common.js"></script>
-  <script>
-    if (!NavigationHelper.requireAuth()) {}
-
-    const currentUser = StorageManager.getCurrentUser();
-
-    // 검색창에 포커스
-    function focusSearch() {
-      document.getElementById('searchInput').focus();
-    }
-
-    // 통계 업데이트
-    function updateStatistics(meetings) {
-      const totalCount = meetings.length;
-      const draftCount = meetings.filter(m => m.status === 'draft').length;
-      const confirmedCount = meetings.filter(m => m.status === 'confirmed').length;
-
-      document.getElementById('totalCount').textContent = totalCount;
-      document.getElementById('draftCount').textContent = draftCount;
-      document.getElementById('confirmedCount').textContent = confirmedCount;
-    }
-
-    // 회의록 목록 렌더링
-    function renderMeetingList() {
-      const meetings = StorageManager.getMeetings();
-      const myMeetings = meetings.filter(m =>
-        m.createdBy === currentUser.id || m.attendees.includes(currentUser.name)
-      );
-
-      // 통계 업데이트
-      updateStatistics(myMeetings);
-
-      // 필터링
-      const statusFilter = document.getElementById('statusFilter').value;
-      let filtered = myMeetings;
-      if (statusFilter !== 'all') {
-        filtered = myMeetings.filter(m => m.status === statusFilter);
-      }
-
-      // 검색
-      const searchQuery = document.getElementById('searchInput').value.toLowerCase();
-      if (searchQuery) {
-        filtered = filtered.filter(m =>
-          m.title.toLowerCase().includes(searchQuery) ||
-          m.attendees.some(a => a.toLowerCase().includes(searchQuery))
-        );
-      }
-
-      // 정렬
-      const sortOrder = document.getElementById('sortOrder').value;
-      if (sortOrder === 'recent') {
-        filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
-      } else if (sortOrder === 'date') {
-        filtered.sort((a, b) => new Date(b.date) - new Date(a.date));
-      } else if (sortOrder === 'title') {
-        filtered.sort((a, b) => a.title.localeCompare(b.title));
-      }
-
-      // 렌더링
-      const container = document.getElementById('meetingList');
-
-      if (filtered.length === 0) {
-        if (searchQuery) {
-          container.innerHTML = '<p class="text-body text-gray text-center" style="padding: 48px 0;">검색 결과가 없습니다</p>';
-        } else {
-          container.innerHTML = '<p class="text-body text-gray text-center" style="padding: 48px 0;">회의록이 없습니다</p>';
-        }
-        return;
-      }
-
-      container.innerHTML = filtered.map(meeting => {
-        const canEdit = meeting.createdBy === currentUser.id;
-
-        return `
-          <div class="meeting-item" onclick="viewMeeting('${meeting.id}')">
-            <div style="flex: 1;">
-              <h3 class="text-h5">${meeting.title}</h3>
-              <p class="text-caption text-gray">${Utils.formatDate(meeting.date)} ${meeting.startTime || ''} · ${meeting.attendees?.length || 0}명</p>
-              <p class="text-caption text-gray mt-1">최종 수정: ${Utils.formatTimeAgo(meeting.updatedAt)}</p>
-            </div>
-            <div class="d-flex flex-column align-end gap-2">
-              ${meeting.status === 'confirmed'
-                ? '<span class="badge badge-confirmed">확정완료</span>'
-                : '<span class="badge badge-draft">작성중</span>'}
-              ${!canEdit ? '<span class="text-caption text-gray">조회 전용</span>' : ''}
-            </div>
-          </div>
-        `;
-      }).join('');
-    }
-
-    // 회의록 조회
-    function viewMeeting(id) {
-      NavigationHelper.navigate('MEETING_DETAIL', { id });
-    }
-
-    // 프로필 메뉴 표시
-    function showProfileMenu() {
-      UIComponents.showModal({
-        title: '프로필',
-        content: `
-          <div class="d-flex flex-column gap-4">
-            <div class="d-flex align-center gap-3">
-              ${UIComponents.createAvatar(currentUser.name, 60)}
-              <div>
-                <h3 class="text-h4">${currentUser.name}</h3>
-                <p class="text-body-sm text-gray">${currentUser.role} · ${currentUser.position}</p>
-                <p class="text-body-sm text-gray">${currentUser.email}</p>
-              </div>
-            </div>
-            <div style="border-top: 1px solid var(--gray-200); padding-top: 16px;">
-              <button class="btn btn-text w-full" style="justify-content: flex-start;">
-                <span class="material-symbols-outlined">settings</span>
-                설정
-              </button>
-              <button class="btn btn-text w-full" style="justify-content: flex-start; color: var(--error);" onclick="handleLogout()">
-                <span class="material-symbols-outlined">logout</span>
-                로그아웃
-              </button>
-            </div>
-          </div>
-        `,
-        footer: '',
-        onClose: () => {}
-      });
-    }
-
-    // 로그아웃 처리
-    function handleLogout() {
-      UIComponents.confirm(
-        '로그아웃 하시겠습니까?',
-        () => {
-          StorageManager.logout();
-        },
-        () => {}
-      );
-    }
-
-    // 초기 렌더링
-    renderMeetingList();
-  </script>
-</body>
-</html>
diff --git a/design/uiux/prototype_fix/보완결과.md b/design/uiux/prototype_fix/보완결과.md
deleted file mode 100644
index 51e5557..0000000
--- a/design/uiux/prototype_fix/보완결과.md
+++ /dev/null
@@ -1,309 +0,0 @@
-# 프로토타입 보완 결과
-
-## 작업 개요
-
-**작업일시**: 2025년 10월 21일
-**작업 목적**: prototype_check.md에서 식별된 미구현 또는 부분 구현 기능 보완
-**참조 문서**:
-- design/prototype_check.md
-- design/userstory.md
-
----
-
-## 보완 작업 내용
-
-### 1. HIGH Priority 보완 (필수)
-
-#### 1.1 UFR-AI-040: 관련 회의록 자동 연결
-**파일**: `10-회의록상세조회.html`
-
-**구현 내용**:
-- AI 기반 관련 회의록 자동 연결 기능 추가
-- 5가지 유사도 계산 알고리즘 구현:
-  1. 제목 유사도 (키워드 매칭) - 15%
-  2. 참석자 유사도 (공통 참석자) - 30%
-  3. 템플릿 유형 일치 - 10%
-  4. 시간적 연관성 (30일/90일 이내) - 5-10%
-  5. 내용 키워드 매칭 - 5%
-- 70% 이상 유사도 필터링
-- 최대 5개 관련 회의록 표시
-- 유사도 백분율 배지 표시
-- 회의록 요약 섹션 추가
-
-**검증 결과**: ✅ 완료
-- 유저스토리 요구사항 100% 충족
-- AI 자동 감지 배지 표시
-- 클릭 시 해당 회의록 상세 페이지 이동
-
----
-
-#### 1.2 UFR-AI-030: 프롬프팅 기반 회의록 개선
-**파일**: `05-회의진행.html`
-
-**구현 내용**:
-- 7가지 프롬프트 유형 선택 모달 구현:
-  1. 1Page 요약 - A4 1장 간결 요약
-  2. 핵심 요약 - 주요 논의사항 압축
-  3. 상세 보고서 - 전체 맥락 포함
-  4. 의사결정 중심 - 결정사항 위주
-  5. 액션 아이템 중심 - 실행 과제 중심
-  6. 경영진 보고용 - 전략적 관점
-  7. 커스텀 프롬프트 - 사용자 직접 입력
-- 각 프롬프트 유형별 아이콘, 설명, 예시 제공
-- 선택 가능한 카드형 UI
-- AI 개선 시뮬레이션 구현
-
-**검증 결과**: ✅ 완료
-- 유저스토리 요구사항 100% 충족
-- 시각적으로 구분된 프롬프트 선택 UI
-- 프롬프트 적용 후 내용 자동 개선
-
----
-
-### 2. MEDIUM Priority 보완 (권장)
-
-#### 2.1 UFR-COLLAB-020: 동시 수정 충돌 해결
-**파일**: `11-회의록수정.html`
-
-**구현 내용**:
-- 충돌 감지 시스템 구현
-  - 동일 섹션 동시 수정 감지
-  - 라인 단위 버전 비교
-- 충돌 알림 배너 표시
-  - 충돌 발생 위치 및 사용자 표시
-  - 충돌 개수 카운트
-- 충돌 해결 모달 구현
-  - 내 수정 내용 vs 타인 수정 내용 비교
-  - 3가지 해결 방법 제공:
-    1. 내 버전 선택
-    2. 타인 버전 선택
-    3. 직접 병합 작성
-- 수정 시간 및 작성자 표시
-- 충돌 해결 시 배지 제거
-
-**검증 결과**: ✅ 완료
-- 유저스토리 요구사항 100% 충족
-- Last Write Wins 기본 전략
-- 수동 병합 옵션 제공
-- 충돌 섹션 시각적 표시
-
----
-
-#### 2.2 UFR-MEET-055: 섹션 잠금 해제 버튼 명시화
-**파일**: `11-회의록수정.html`
-
-**구현 내용**:
-- 섹션 잠금 상태 시각적 표시
-  - 잠금 아이콘 (lock) 표시
-  - 잠금 영역 배경색 변경
-- 잠금 해제 버튼 추가
-  - "잠금 해제" 버튼 배치
-  - lock_open 아이콘 사용
-- 잠금 해제 확인 다이얼로그
-  - 사용자 확인 후 잠금 해제
-- 잠금 해제 후 편집 가능 상태 전환
-
-**검증 결과**: ✅ 완료
-- 유저스토리 요구사항 100% 충족
-- 잠금 상태 명확한 시각적 표시
-- 잠금 해제 권한 확인
-- 상태 변경 Toast 메시지
-
----
-
-#### 2.3 UFR-MEET-060: 다음 회의 일정 자동 등록
-**파일**: `08-회의록공유.html`
-
-**구현 내용**:
-- AI 기반 다음 회의 일정 감지
-  - 회의록 내용에서 일정 키워드 패턴 감지
-  - 키워드: "다음 회의", "다음주", "재논의 필요" 등
-- 다음 회의 일정 배너 표시
-  - AI 자동 감지 배지
-  - 감지된 일정 정보 표시 (제목, 날짜, 시간, 참석자)
-- 일정 수정 폼 제공
-  - 감지된 정보 수정 가능
-  - 제목, 날짜, 시간, 참석자 입력
-- 캘린더 등록 기능
-  - "캘린더에 등록" 버튼
-  - LocalStorage에 새 회의 생성
-  - 등록 완료 Toast 메시지
-
-**검증 결과**: ✅ 완료
-- 유저스토리 요구사항 100% 충족
-- AI 자동 감지 기능 구현
-- 일정 정보 편집 가능
-- 캘린더 자동 등록
-
----
-
-## 파일 구성
-
-### 수정된 파일 (4개)
-1. `10-회의록상세조회.html` - 관련 회의록 자동 연결
-2. `05-회의진행.html` - 프롬프트 유형 선택
-3. `11-회의록수정.html` - 충돌 해결 + 섹션 잠금 해제
-4. `08-회의록공유.html` - 다음 회의 일정 자동 등록
-
-### 수정 없이 복사된 파일 (7개)
-1. `01-로그인.html`
-2. `02-대시보드.html`
-3. `03-회의예약.html`
-4. `04-템플릿선택.html`
-5. `06-검증완료.html`
-6. `07-회의종료.html`
-7. `09-Todo관리.html`
-
-### 공통 리소스 (2개)
-1. `common.css` - 공통 스타일시트
-2. `common.js` - 공통 유틸리티 라이브러리
-
-**총 파일 수**: 13개 (HTML 11개 + CSS 1개 + JS 1개)
-
----
-
-## 구현 완성도
-
-### prototype_check.md 대비 개선도
-
-| 우선순위 | 기능 ID | 기능명 | 기존 상태 | 보완 후 상태 | 개선율 |
-|---------|--------|--------|---------|------------|-------|
-| HIGH | UFR-AI-040 | 관련 회의록 자동 연결 | ❌ 미구현 | ✅ 완료 | 100% |
-| HIGH | UFR-AI-030 | 프롬프트 유형 선택 | 🟡 부분 구현 | ✅ 완료 | 100% |
-| MEDIUM | UFR-COLLAB-020 | 충돌 해결 UI | 🟡 부분 구현 | ✅ 완료 | 100% |
-| MEDIUM | UFR-MEET-055 | 섹션 잠금 해제 | 🟡 부분 구현 | ✅ 완료 | 100% |
-| MEDIUM | UFR-MEET-060 | 다음 회의 일정 등록 | 🟡 부분 구현 | ✅ 완료 | 100% |
-
-**전체 구현율**: 100% (5개 기능 모두 완료)
-
----
-
-## 주요 기술 구현
-
-### 1. AI 유사도 계산 알고리즘
-```javascript
-// 5가지 요소를 조합한 가중치 기반 유사도 계산
-- 제목 키워드 매칭: 15%
-- 참석자 중복도: 30%
-- 템플릿 유형 일치: 10%
-- 시간적 연관성: 5-10%
-- 내용 키워드 매칭: 5%
-→ 총점 70% 이상 시 관련 회의록으로 판단
-```
-
-### 2. 충돌 감지 및 해결 메커니즘
-```javascript
-// 동시 수정 충돌 감지
-- 섹션 ID 기반 충돌 탐지
-- 버전 비교 (내 버전 vs 타인 버전)
-- 3가지 해결 방법: A 선택 / B 선택 / 직접 작성
-```
-
-### 3. 자연어 기반 일정 감지
-```javascript
-// 정규표현식 패턴 매칭
-- "다음 회의", "다음주", "재논의 필요"
-- 날짜 패턴: "MM월 DD일", "YYYY-MM-DD"
-- 시간 패턴: "오전/오후 HH시"
-→ 감지 시 자동으로 일정 정보 추출 및 제안
-```
-
----
-
-## 사용성 개선 사항
-
-### 1. 시각적 피드백
-- AI 자동 감지 배지 (🤖 AI 자동 감지)
-- 유사도 백분율 표시 (예: 85% 유사)
-- 충돌 알림 배너 (⚠️ 동시 수정 충돌 감지)
-- 상태별 색상 구분 (완료: 초록색, 충돌: 빨간색)
-
-### 2. 인터랙션 개선
-- 프롬프트 유형 선택 시 hover 효과
-- 충돌 해결 옵션 선택 시 하이라이트
-- 일정 수정 폼 토글 애니메이션
-- Toast 메시지를 통한 작업 완료 알림
-
-### 3. 사용자 경험
-- 3-step 충돌 해결 프로세스 (감지 → 비교 → 선택)
-- AI 감지 정보 수정 가능
-- 잠금 해제 전 확인 다이얼로그
-- 관련 회의록 클릭 시 바로 이동
-
----
-
-## 테스트 권장 사항
-
-### 1. 기능 테스트
-1. **관련 회의록 자동 연결**
-   - 10-회의록상세조회.html 접속
-   - 관련 회의록 섹션 확인
-   - 유사도 70% 이상 회의록 표시 확인
-   - 관련 회의록 클릭 시 이동 확인
-
-2. **프롬프트 유형 선택**
-   - 05-회의진행.html 접속
-   - 섹션 "AI 개선 요청" 버튼 클릭
-   - 7가지 프롬프트 유형 확인
-   - 프롬프트 선택 및 적용 확인
-
-3. **충돌 해결**
-   - 11-회의록수정.html 접속
-   - 충돌 배너 표시 확인 (30% 확률)
-   - "해결하기" 버튼 클릭
-   - 3가지 해결 방법 선택 및 적용
-
-4. **섹션 잠금 해제**
-   - 11-회의록수정.html 접속
-   - 잠긴 섹션 확인
-   - "잠금 해제" 버튼 클릭
-   - 편집 가능 상태 전환 확인
-
-5. **다음 회의 일정 등록**
-   - 08-회의록공유.html 접속
-   - 다음 회의 일정 배너 확인 (50% 확률)
-   - "일정 확인 및 등록" 버튼 클릭
-   - 일정 정보 수정 및 캘린더 등록
-
-### 2. 통합 테스트
-- 전체 회의록 작성 플로우 테스트
-  1. 로그인 → 대시보드 → 회의 예약
-  2. 템플릿 선택 → 회의 진행 (프롬프트 적용)
-  3. 검증 완료 → 회의 종료
-  4. 회의록 공유 (다음 일정 등록)
-  5. 회의록 상세 조회 (관련 회의록 확인)
-  6. 회의록 수정 (충돌 해결, 잠금 해제)
-
-### 3. 브라우저 테스트
-- Chrome, Firefox, Safari, Edge
-- 모바일 반응형 디자인 확인
-- 터치 인터랙션 테스트
-
----
-
-## 결론
-
-### 보완 완료 상태
-✅ **HIGH Priority 2개**: 100% 완료
-✅ **MEDIUM Priority 3개**: 100% 완료
-✅ **전체 구현율**: 100%
-
-### 주요 성과
-1. prototype_check.md에서 식별된 모든 미구현/부분 구현 기능 완료
-2. 유저스토리 요구사항 100% 충족
-3. Mobile First 설계 원칙 준수
-4. WCAG 2.1 Level AA 접근성 기준 유지
-5. 일관된 디자인 시스템 적용
-
-### 다음 단계 권장사항
-1. **실제 브라우저 테스트**: Playwright를 통한 E2E 테스트 실행
-2. **성능 최적화**: 큰 회의록 목록 처리 시 가상 스크롤링 적용
-3. **백엔드 연동**: LocalStorage → 실제 API 연동
-4. **AI 모델 통합**: 시뮬레이션 → 실제 LLM 연동
-5. **사용자 피드백 수집**: 프로토타입 시연 및 개선점 도출
-
----
-
-**작성자**: Claude Code
-**작성일**: 2025-10-21
-**버전**: 1.0
diff --git a/design/userstory_bk.md b/design/userstory_bk.md
new file mode 100644
index 0000000..621af4a
--- /dev/null
+++ b/design/userstory_bk.md
@@ -0,0 +1,768 @@
+# 회의록 작성 및 공유 개선 서비스 - 유저스토리 (v2.0)
+
+- [회의록 작성 및 공유 개선 서비스 - 유저스토리 (v2.0)](#회의록-작성-및-공유-개선-서비스---유저스토리-v20)
+  - [차별화 전략](#차별화-전략)
+  - [마이크로서비스 구성](#마이크로서비스-구성)
+  - [유저스토리](#유저스토리)
+
+---
+
+## 차별화 전략
+
+본 서비스는 다음과 같은 차별화 포인트를 통해 경쟁 우위를 확보합니다:
+
+### 1. 기본 기능 (Hygiene Factors)
+- **STT(Speech To Text)**: 음성을 텍스트로 변환하는 기본 기능
+  - 시장의 대부분 서비스가 제공하는 기능으로 차별화 포인트가 아님
+  - 필수 기능이지만 경쟁 우위를 가져다주지 않음
+
+### 2. 핵심 차별화 포인트 (Differentiators)
+- **맥락 기반 용어 설명**: 단순 용어 설명을 넘어, 관련 회의록과 업무이력을 바탕으로 실용적인 정보 제공
+- **강화된 Todo 연결**: Action item이 담당자의 Todo와 실시간으로 연결되고, 진행 상황이 회의록에 자동 반영
+- **프롬프팅 기반 회의록 개선**: AI를 활용한 다양한 형식의 회의록 생성 (1Page 요약, 핵심 요약 등)
+- **지능형 회의 진행 지원**: 회의 패턴 분석을 통한 안건 추천, 효율성 분석 및 개선 제안
+
+---
+
+## 마이크로서비스 구성
+
+1. **User** - 사용자 인증 및 권한 관리
+2. **Meeting** - 회의 관리, 회의록 생성 및 관리, 회의록 공유
+3. **STT** - 음성 녹음 관리, 음성-텍스트 변환, 화자 식별 (기본 기능)
+4. **AI** - LLM 기반 회의록 자동 작성, Todo 자동 추출, 프롬프팅 기반 회의록 개선
+5. **RAG** - 맥락 기반 용어 설명, 관련 문서 검색 및 연결, 업무 이력 통합
+6. **Collaboration** - 실시간 동기화, 버전 관리, 충돌 해결
+7. **Todo** - Todo 할당 및 관리, 진행 상황 추적, 회의록 실시간 연동
+8. **Notification** - 알림 발송 및 리마인더 관리
+
+---
+
+## 유저스토리
+
+```
+1. User 서비스
+1) 사용자 인증 관리
+AFR-USER-010: [사용자관리] 시스템 관리자로서 | 나는, 서비스 보안을 위해 | 사용자 인증 기능을 원한다.
+- 시나리오: 사용자 인증 관리
+  사용자가 로그인을 시도한 상황에서 | 사번과 비밀번호를 입력하면 | LDAP 연동을 통해 인증이 완료되고 권한에 따라 서비스에 접근할 수 있다.
+  - [ ] 사용자 인증 (사번, 비밀번호)
+  - [ ] 세션 관리
+- M/8
+
+---
+
+2. Meeting 서비스
+1) 회의 준비 및 관리
+UFR-MEET-010: [회의예약] 회의록 작성자로서 | 나는, 회의를 효율적으로 준비하기 위해 | 회의를 예약하고 참석자를 초대하고 싶다.
+- 시나리오: 회의 예약 및 참석자 초대
+  회의 예약 화면에 접근한 상황에서 | 회의 제목, 날짜/시간, 장소, 참석자 목록을 입력하고 예약 버튼을 클릭하면 | 회의가 예약되고 참석자에게 초대 이메일이 자동 발송된다.
+
+  [입력 요구사항]
+  - 회의 제목: 최대 100자 (필수)
+  - 날짜/시간: 날짜 및 시간 선택 (필수)
+  - 장소: 최대 200자 (선택)
+  - 참석자 목록: 이메일 주소 입력 (최소 1명 필수)
+
+  [처리 결과]
+  - 회의가 예약됨 (회의 ID 생성)
+  - 일정이 캘린더에 자동 등록됨
+  - 참석자에게 초대 이메일 발송됨
+  - 회의 시작 30분 전 리마인더 자동 발송
+
+- M/13
+
+---
+
+UFR-MEET-020: [템플릿선택] 회의록 작성자로서 | 나는, 회의록을 효율적으로 작성하기 위해 | 회의 유형에 맞는 템플릿을 선택하고 싶다.
+- 시나리오: 회의록 템플릿 선택
+  회의 시작 전 템플릿 선택 화면에 접근한 상황에서 | 제공되는 템플릿 중 하나를 선택하고 커스터마이징하면 | 회의록 도구가 준비된다.
+
+  [템플릿 유형]
+  - 일반 회의: 기본 구조 (참석자, 안건, 논의 내용, 결정 사항, Todo)
+  - 스크럼 회의: 어제 한 일, 오늘 할 일, 이슈
+  - 프로젝트 킥오프: 프로젝트 개요, 목표, 일정, 역할, 리스크
+  - 주간 회의: 주간 실적, 주요 이슈, 다음 주 계획
+
+  [커스터마이징 옵션]
+  - 섹션 추가/삭제
+  - 섹션 순서 변경
+  - 기본 항목 설정
+
+  [처리 결과]
+  - 선택된 템플릿으로 회의록 도구가 준비됨
+
+- S/5
+
+---
+
+UFR-MEET-030: [회의시작] 회의록 작성자로서 | 나는, 회의를 시작하고 회의록을 작성하기 위해 | 회의를 시작하고 음성 녹음을 준비하고 싶다.
+- 시나리오: 회의 시작
+  예약된 회의 시간에 회의 시작 버튼을 클릭한 상황에서 | 회의 ID를 확인하고 시작하면 | 회의 세션이 생성되고 음성 녹음이 준비된다.
+
+  [회의 시작 조건]
+  - 예약된 회의가 존재함
+  - 회의 시작 시간 10분 전부터 회의 시작 버튼 활성화
+  - 회의록 작성자가 시작 권한을 가짐
+  - 이미 시작된 회의일 경우, 진행중으로 표시
+
+  [처리 결과]
+  - 회의 세션이 생성됨 (세션 ID)
+  - 음성 녹음 준비 완료
+  - 참석자 목록 표시
+  - 회의 시작 시간 기록
+  - 실시간 회의록 주요 항목 추천
+
+- M/8
+
+---
+
+2) 회의 종료 및 완료
+UFR-MEET-040: [회의종료] 회의록 작성자로서 | 나는, 회의를 종료하고 회의록을 정리하기 위해 | 회의를 종료하고 통계를 확인하고 싶다.
+- 시나리오: 회의 종료
+  회의가 진행 중인 상황에서 | 회의 종료 버튼을 클릭하면 | 음성 녹음이 중지되고 회의 통계가 생성된다.
+
+  [회의 종료 처리]
+  - 음성 녹음 즉시 중지
+  - 회의 종료 시간 기록
+  - 회의 통계 자동 생성
+    - 회의 총 시간
+    - 참석자 수
+    - 발언 횟수 (화자별)
+    - 주요 키워드
+
+  [처리 결과]
+  - 회의가 종료됨
+  - 회의 통계 표시
+  - 검증 완료 시 최종 회의록 확정 단계로 이동
+
+  [검증 미완료 시]
+  - 검증이 안된 항목이 있다면 회의록 히스토리 페이지에서 추후 수정 가능
+
+- M/8
+
+---
+
+UFR-MEET-050: [최종확정] 회의록 작성자로서 | 나는, 회의록을 완성하기 위해 | 최종 회의록을 확정하고 버전을 생성하고 싶다.
+- 시나리오: 최종 회의록 확정
+  회의가 종료된 상황에서 | 회의록 내용을 최종 검토하고 확정 버튼을 클릭하면 | 필수 항목이 검사되고 최종 버전이 생성된다.
+
+  [필수 항목 검사]
+  - 회의 제목 입력 여부
+  - 참석자 목록 작성 여부
+  - 주요 논의 내용 작성 여부
+  - 결정 사항 작성 여부
+
+  [처리 결과]
+  - 최종 회의록 확정됨 (확정 버전 번호)
+  - 확정 시간 기록
+  - AI가 자동으로 Todo 항목 추출 (UFR-AI-020 연동)
+  - 회의록 공유 가능 상태로 전환
+
+  [필수 항목 미작성 시]
+  - 누락된 항목 안내 메시지 표시
+  - 해당 섹션으로 자동 이동
+
+- M/13
+
+---
+
+UFR-MEET-045: [회의록상세조회] 회의록 작성자로서 | 나는, 지난 회의록의 상세 정보와 전체 내용을 | 한눈에 확인하고 싶다.
+- 시나리오: 회의록 상세 정보 조회
+  "내 회의록" 메뉴에서 특정 회의록을 클릭하면 | 해당 회의의 기본 정보와 섹션별 상세 내용이 표시되고 | 필요한 경우 수정, 공유, 다운로드 등의 작업을 수행할 수 있다.
+
+  [회의 기본 정보 표시]
+  - 회의 제목
+  - 회의 일시 (날짜 및 시간)
+  - 참석자 목록 (역할 구분: 주관자/참석자/불참자)
+  - 회의 장소 (온라인/오프라인)
+  - 사용된 템플릿 유형
+  - 회의록 상태 (작성중/확정완료)
+  - 작성자 및 최종 수정 시간
+
+  [섹션별 상세 내용 표시]
+  - 각 섹션 구분 표시 (논의사항, 결정사항, Todo, 기타 등)
+  - 섹션별 검증 상태 표시 (검증완료 섹션은 체크 표시)
+  - Todo 항목:
+    - 담당자 이름
+    - 마감일
+    - 완료/미완료 상태 (시각적 구분)
+    - 우선순위 (있는 경우)
+  - 첨부파일 목록 및 다운로드 링크
+
+  [부가 기능]
+  - 회의록 수정 버튼 (수정 권한이 있는 경우만 표시)
+  - 회의록 공유 버튼 (공유 설정 화면으로 이동)
+  - 이전/다음 회의록으로 이동하는 네비게이션
+  - 뒤로가기 버튼 (회의록 목록으로 복귀)
+
+  [처리 결과]
+  - 모바일/태블릿 환경에서도 가독성 높은 레이아웃
+  - 긴 내용은 적절한 단락 구분 및 여백 적용
+  - 섹션별 접기/펼치기 기능 (선택사항)
+  - 페이지 로딩 시 스크롤 위치는 최상단
+
+  [권한별 표시]
+  - 조회 권한만 있는 경우: 수정 버튼 비활성화
+  - 수정 권한이 있는 경우: 수정 버튼 활성화
+
+- M/5
+
+---
+
+UFR-MEET-055: [회의록수정] 회의록 작성자로서 | 나는, 검증이 완료되지 않았거나 수정이 필요한 | 지난 회의록을 조회하고 수정하고 싶다.
+- 시나리오: 지난 회의록 조회 및 수정
+  대시보드에서 "내 회의록" 메뉴를 클릭하면 | 작성한 회의록 목록이 표시되고 | 특정 회의록을 선택하여 수정할 수 있다.
+
+  [회의록 목록 조회]
+  - 회의록 상태별 필터링: 전체 / 작성중 / 확정완료
+  - 정렬 옵션: 최신순 / 회의일시순 / 제목순
+  - 검색 기능: 회의 제목, 참석자, 키워드로 검색
+  - 목록 표시 정보:
+    - 회의 제목
+    - 회의 일시
+    - 회의록 상태 (작성중/확정완료)
+    - 마지막 수정 시간
+    - 검증 완료율 (작성중인 경우)
+
+  [회의록 수정]
+  - 회의록 선택 시 상세 화면으로 이동
+  - 상태에 따른 수정 가능 범위:
+    - 작성중: 모든 섹션 수정 가능
+    - 확인완료: 회의록 생성자에게 수정 권한 승인요청 
+  - 수정 중 자동 저장 (30초 간격)
+  - 수정 이력 관리 (누가, 언제, 무엇을 수정했는지)
+
+  [처리 결과]
+  - 수정 내용 즉시 반영
+  - 수정 시간 업데이트
+  - 확정완료 상태였던 경우 → 작성중 상태로 변경
+
+  [권한 제어]
+  - 본인이 작성한 회의록만 수정 가능
+  - 검증완료 후 검증된 섹션 잠금 기능은 회의록 생성자만 가능
+  - 모든 섹션이 검증완료일경우 회의록 상태를 확정완료로 변경
+
+- M/13
+
+3) 회의록 공유
+UFR-MEET-060: [회의록공유] 회의록 작성자로서 | 나는, 회의 내용을 참석자들과 공유하기 위해 | 최종 회의록을 공유하고 싶다.
+- 시나리오: 회의록 공유
+  최종 회의록이 확정된 상황에서 | 공유 버튼을 클릭하고 공유 대상과 권한을 설정하면 | 공유 링크가 생성되고 참석자 전원에게 알림이 발송된다.
+
+  [공유 설정]
+  - 공유 대상: 참석자 전체 (기본) / 특정 참석자 선택
+  - 공유 권한: 읽기 전용 / 댓글 가능 / 편집 가능
+  - 공유 방식: 이메일 / 링크 복사
+
+  [처리 결과]
+  - 공유 링크 생성 (고유 URL)
+  - 참석자에게 이메일 알림 발송
+  - 공유 시간 기록
+  - 다음 회의 일정이 언급된 경우 캘린더에 자동 등록
+
+  [공유 링크 보안]
+  - 링크 유효 기간 설정 (선택)
+  - 비밀번호 설정 (선택)
+
+- M/13
+
+---
+
+3. STT 서비스 (기본 기능)
+1) 음성 인식 및 변환
+UFR-STT-010: [음성녹음인식] 회의 참석자로서 | 나는, 발언 내용이 자동으로 기록되기 위해 | 음성이 실시간으로 녹음되고 인식되기를 원한다.
+- 시나리오: 음성 녹음 및 발언 인식
+  회의가 시작된 상황에서 | 참석자가 발언을 시작하면 | 음성이 자동으로 녹음되고 화자가 식별되며 발언이 인식된다.
+
+  [음성 녹음 처리]
+  - 오디오 스트림 실시간 캡처
+  - 회의 ID와 연결
+  - 음성 데이터 저장 (Azure 스토리지)
+
+  [발언 인식 처리]
+  - AI 음성인식 엔진 연동 (Azure Speech 등)
+  - 화자 자동 식별
+    - 참석자 목록 매칭
+    - 음성 특징 분석
+  - 타임스탬프 기록
+  - 발언 구간 구분
+
+  [처리 결과]
+  - 음성 녹음이 시작됨 (녹음 ID)
+  - 발언이 인식됨 (발언 ID, 화자, 타임스탬프)
+  - 실시간으로 텍스트 변환 요청 (UFR-STT-020 연동)
+
+  [성능 요구사항]
+  - 발언 인식 지연 시간: 1초 이내
+  - 화자 식별 정확도: 90% 이상
+
+  [비고]
+  - STT는 기본 기능으로 경쟁사 대부분이 제공하는 기능임
+  - 차별화 포인트가 아닌 필수 기능
+
+- M/21
+
+---
+
+UFR-STT-020: [텍스트변환] 회의록 시스템으로서 | 나는, 인식된 발언을 회의록에 기록하기 위해 | 음성을 텍스트로 변환하고 싶다.
+- 시나리오: 음성-텍스트 변환
+  발언이 인식된 상황에서 | AI 음성인식 엔진에 텍스트 변환을 요청하면 | 음성이 텍스트로 변환되고 정확도와 함께 반환된다.
+
+  [텍스트 변환 처리]
+  - 인식된 발언 데이터 전달
+  - 언어 설정 (한국어, 영어 등)
+  - AI 음성인식 엔진 처리
+  - 문장 부호 자동 추가
+  - 숫자/날짜 형식 정규화
+
+  [처리 결과]
+  - 텍스트가 변환됨 (텍스트 ID)
+  - 변환된 내용 (원문 텍스트)
+  - 정확도 점수 (0-100%)
+  - AI 회의록 자동 작성 요청 (UFR-AI-010 연동)
+
+  [정확도 낮은 경우]
+  - 정확도 60% 미만 시 경고 표시
+  - 수동 수정 인터페이스 제공
+
+  [비고]
+  - STT는 기본 기능으로 차별화 포인트가 아님
+
+- M/13
+
+---
+
+4. AI 서비스 (차별화 포인트)
+1) AI 회의록 작성
+UFR-AI-010: [회의록자동작성] 회의록 작성자로서 | 나는, 회의록 작성 부담을 줄이기 위해 | AI가 발언 내용을 자동으로 정리하여 회의록을 작성하기를 원한다.
+- 시나리오: AI 회의록 자동 작성
+  텍스트가 변환된 상황에서 | LLM에 회의록 자동 작성을 요청하면 | 회의 맥락을 이해하고 구조화된 회의록 초안이 생성된다.
+
+  [AI 처리 과정]
+  - 변환된 텍스트와 회의 맥락(제목, 참석자, 이전 내용) 분석
+  - 회의 내용 이해
+    - 주제별 분류
+    - 발언자별 의견 정리
+    - 중요 키워드 추출
+  - 문장 다듬기
+    - 구어체 → 문어체 변환
+    - 불필요한 표현 제거
+    - 문법 교정
+  - 구조화
+    - 회의록 템플릿에 맞춰 정리
+    - 주제, 발언자, 내용 구조화
+    - 요약문 생성
+
+  [처리 결과]
+  - 회의록 초안이 생성됨 (회의록 버전)
+  - 생성 시간 기록
+  - 구조화된 내용
+    - 논의 주제
+    - 발언자별 의견
+    - 결정 사항
+    - 보류 사항
+  - 참석자에게 실시간 동기화 (UFR-COLLAB-010 연동)
+
+  [Policy/Rule]
+  - 텍스트 변환되면 자동으로 회의록 구조에 맞춰 정리
+  - 실시간 업데이트 (3-5초 간격)
+
+- M/34
+
+---
+
+2) Todo 자동 추출
+UFR-AI-020: [Todo자동추출] 회의록 작성자로서 | 나는, 회의 후 실행 사항을 명확히 하기 위해 | AI가 회의록에서 Todo 항목을 자동으로 추출하고 담당자를 식별하기를 원한다.
+- 시나리오: AI Todo 자동 추출
+  회의가 종료된 상황에서 | 최종 회의록을 분석하여 Todo 자동 추출을 요청하면 | 액션 아이템이 식별되고 담당자가 자동으로 지정된다.
+
+  [AI 분석 과정]
+  - 회의록 전체 내용 분석
+  - 액션 아이템 식별
+    - "~하기로 함", "~까지 완료", "~담당" 등 키워드 탐지
+    - 명령형 문장 분석
+    - 마감일 언급 추출
+  - 담당자 자동 식별
+    - 발언 내용 기반 ("제가 하겠습니다", "~님이 담당")
+    - 직책/역할 기반 매칭
+    - 과거 회의록 패턴 학습
+
+  [처리 결과]
+  - Todo가 자동 추출됨
+  - 추출된 항목 수
+  - 각 Todo별 정보
+    - Todo 내용
+    - 담당자 (자동 식별)
+    - 마감일 (언급된 경우)
+    - 우선순위 (언급된 경우)
+    - 관련 회의록 섹션 링크
+  - Todo 서비스에 자동 전달 (UFR-TODO-010 연동)
+
+  [담당자 식별 실패 시]
+  - 미지정 상태로 Todo 생성
+  - 수동 할당 요청 알림
+
+- M/21
+
+---
+
+3) 프롬프팅 기반 회의록 개선 (신규, 차별화 포인트)
+UFR-AI-030: [회의록개선] 회의록 작성자로서 | 나는, 회의록을 다양한 형식으로 변환하기 위해 | 프롬프팅을 통해 회의록을 개선하고 재구성하고 싶다.
+- 시나리오: 프롬프팅 기반 회의록 개선
+  회의록이 작성된 상황에서 | "1Page 요약", "핵심 요약", "상세 보고서" 등의 프롬프트를 입력하면 | AI가 해당 형식에 맞춰 회의록을 재구성하여 제공한다.
+
+  [지원 프롬프트 유형]
+  - "1Page 요약": A4 1장 분량의 요약본 생성
+  - "핵심 요약": 3-5개 핵심 포인트만 추출
+  - "상세 보고서": 시간순 상세 기록 with 타임스탬프
+  - "의사결정 중심": 결정 사항과 근거만 정리
+  - "액션 아이템 중심": Todo와 담당자만 강조
+  - "경영진 보고용": 임원진에게 보고할 형식으로 재구성
+  - "커스텀 프롬프트": 사용자 정의 형식
+
+  [AI 처리 과정]
+  - 원본 회의록 분석
+  - 프롬프트 의도 파악
+  - 내용 재구성
+    - 중요도 기반 필터링
+    - 형식에 맞춘 재배치
+    - 불필요한 내용 제거
+  - 스타일 조정
+    - 문체 변환 (격식체, 구어체 등)
+    - 길이 조정 (압축 또는 확장)
+
+  [처리 결과]
+  - 개선된 회의록이 생성됨 (새 버전)
+  - 원본 회의록 링크 유지
+  - 생성 시간 및 프롬프트 기록
+
+  [Policy/Rule]
+  - 원본 회의록은 항상 보존
+  - 여러 버전 동시 생성 가능
+  - 버전 간 비교 기능 제공
+
+- M/21
+
+---
+
+4) 관련 회의록 자동 연결 (신규, 차별화 포인트)
+UFR-AI-040: [관련회의록연결] 회의록 작성자로서 | 나는, 이전 회의 내용을 쉽게 참조하기 위해 | AI가 같은 폴더 내 관련 있는 과거 회의록을 자동으로 찾아 연결해주기를 원한다.
+- 시나리오: 관련 회의록 자동 연결
+  회의록이 작성되는 상황에서 | AI가 회의 주제와 내용을 분석하면 | 같은 폴더 내 유사한 주제의 과거 회의록을 찾아 자동으로 연결한다.
+
+  [AI 분석 과정]
+  - 현재 회의록 주제 및 키워드 추출
+  - 벡터 유사도 검색
+    - 과거 회의록 DB에서 검색
+    - 주제 유사도 계산
+  - 관련도 점수 계산 (0-100%)
+  - 같은 폴더 내 상위 5개 회의록 선정
+
+  [연결 기준]
+  - 주제 유사도 70% 이상
+  - 동일 참석자가 50% 이상
+  - 키워드 3개 이상 일치
+  - 시간적 연관성 (후속 회의, 분기별 회의 등)
+
+  [처리 결과]
+  - 관련 회의록 목록 생성
+  - 각 회의록별 정보
+    - 제목
+    - 날짜
+    - 참석자
+    - 관련도 점수
+    - 연관 키워드
+  - 회의록 상단에 "관련 회의록" 섹션 자동 추가
+  - 클릭 시 해당 회의록으로 이동
+
+  [Policy/Rule]
+  - 관련도 70% 이상만 자동 연결
+  - 최대 5개까지 표시
+
+- S/13
+
+---
+
+5. RAG 서비스 (차별화 포인트)
+1) 맥락 기반 용어 설명 (강화)
+UFR-RAG-010: [전문용어감지] 회의록 작성자로서 | 나는, 업무 지식이 없어도 회의록을 정확히 작성하기 위해 | 전문용어가 자동으로 감지되고 맥락에 맞는 설명을 제공받고 싶다.
+- 시나리오: 맥락 기반 전문용어 자동 감지
+  회의록이 작성되는 상황에서 | 시스템이 회의록 텍스트를 분석하면 | 전문용어가 자동으로 감지되고 맥락에 맞는 설명이 준비된다.
+
+  [전문용어 감지 처리]
+  - 회의록 텍스트 실시간 분석
+  - 용어 사전과 비교
+    - 조직별 전문용어 DB
+    - 산업별 표준 용어 DB
+  - 신뢰도 계산 (0-100%)
+  - 감지된 용어 위치 기록
+
+  [처리 결과]
+  - 전문용어가 감지됨
+  - 감지된 용어 정보
+    - 용어명
+    - 감지 위치 (줄 번호, 문단)
+    - 신뢰도 점수
+  - 용어 하이라이트 표시
+  - 맥락 기반 설명 자동 생성 (UFR-RAG-020 연동)
+
+  [Policy/Rule]
+  - 신뢰도 70% 이상만 자동 감지
+  - 중복 용어는 첫 번째만 하이라이트
+
+  [비고]
+  - 단순 용어 설명이 아닌 맥락 기반 실용적 정보 제공이 차별화 포인트
+
+- S/13
+
+---
+
+UFR-RAG-020: [맥락기반용어설명] 회의록 작성자로서 | 나는, 전문용어를 맥락에 맞게 이해하기 위해 | 관련 회의록과 업무 이력을 바탕으로 실용적인 설명을 제공받고 싶다.
+- 시나리오: 맥락 기반 용어 설명 자동 제공
+  전문용어가 감지된 상황에서 | RAG 시스템이 관련 문서를 검색하면 | 과거 회의록 및 업무 이력에서 맥락에 맞는 실용적인 설명이 생성되어 제공된다.
+
+  [RAG 검색 수행]
+  - 벡터 유사도 검색
+    - 과거 회의록 검색 (동일 용어 사용 사례)
+    - 사내 문서 저장소 검색 (위키, 매뉴얼, 보고서)
+    - 업무 이력 검색 (프로젝트 문서, 이메일 등)
+  - 관련 문서 추출 (관련도 점수순)
+  - 최대 5개 문서 선택
+
+  [맥락 기반 설명 생성]
+  - 검색된 문서 내용 분석
+  - 용어 정의 추출
+  - 실제 사용 사례 추출
+  - 현재 회의 맥락에 맞는 설명 생성
+    - 간단한 정의 (1-2문장)
+    - 이 회의에서의 의미 (맥락 기반)
+    - 관련 프로젝트/이슈 연결
+    - 과거 논의 요약 (언제, 누가, 어떻게 사용했는지)
+    - 참조 출처 링크
+
+  [처리 결과]
+  - 맥락 기반 용어 설명이 생성됨 (설명 ID)
+  - 설명 내용
+    - 간단한 정의
+    - 맥락 기반 상세 설명
+    - 실제 사용 사례
+    - 관련 프로젝트/이슈
+    - 과거 회의록 링크 (최대 3개)
+    - 사내 문서 링크
+  - 툴팁 또는 사이드 패널로 표시
+  - 설명 제공 시간 기록
+
+  [설명을 찾지 못한 경우]
+  - "관련 정보를 찾을 수 없습니다" 메시지 표시
+  - 전문가(회의 참석자)에게 설명 요청 버튼 제공
+  - 수동 입력된 설명은 용어 사전에 자동 저장
+
+  [비고]
+  - **차별화 포인트**: 단순 용어 설명이 아닌, 조직 내 실제 사용 맥락과 이력을 제공
+  - 업무 지식이 없어도 실질적인 도움을 받을 수 있음
+
+- S/21
+
+---
+
+6. Collaboration 서비스
+1) 실시간 협업
+UFR-COLLAB-010: [회의록수정동기화] 회의 참석자로서 | 나는, 회의록을 함께 검증하기 위해 | 회의록을 수정하고 실시간으로 다른 참석자와 동기화하고 싶다.
+- 시나리오: 회의록 실시간 수정 및 동기화
+  회의록 초안이 작성된 상황에서 | 참석자가 회의록 내용을 수정하면 | 수정 사항이 버전 관리되고 웹소켓을 통해 모든 참석자에게 즉시 동기화된다.
+
+  [회의록 수정 처리]
+  - 수정 내용 검증
+    - 수정 권한 확인
+    - 수정 범위 제한 (잠긴 섹션은 수정 불가)
+  - 수정 이력 저장
+    - 수정자
+    - 수정 시간
+    - 수정 전/후 내용
+    - 수정 위치
+  - 버전 관리
+    - 새 버전 번호 생성
+    - 이전 버전 보관
+
+  [실시간 동기화]
+  - 웹소켓을 통해 수정 델타 전송
+    - 전체 내용이 아닌 변경 부분만 전송 (효율성)
+  - 모든 참석자 화면에 실시간 반영
+  - 수정자 표시 (이름)
+  - 수정 영역 하이라이트 (3초간)
+
+  [처리 결과]
+  - 참석자가 회의록을 수정함 (수정 ID)
+  - 수정 사항이 동기화됨
+  - 동기화 시간
+  - 영향받은 참석자 목록
+  - 수정 완료될 때마다 수정된 내용이 메일로 알림이 발송된다. (알림 여부 설정 가능)
+
+  [Policy/Rule]
+  - 회의록 수정 시 웹소켓을 통해 모든 참석자에게 즉시 동기화
+
+- M/34
+
+---
+
+UFR-COLLAB-020: [충돌해결] 회의 참석자로서 | 나는, 동시 수정 상황에서도 내용을 잃지 않기 위해 | 충돌을 감지하고 해결하고 싶다.
+- 시나리오: 동시 수정 충돌 해결
+  두 명의 참석자가 동일한 위치를 동시에 수정한 상황에서 | 시스템이 충돌을 감지하면 | 충돌 알림이 표시되고 해결 방법을 선택할 수 있다.
+
+  [충돌 감지]
+  - 동일 위치 동시 수정 탐지
+    - 라인 단위 비교
+    - 버전 기반 충돌 확인
+  - 충돌 정보 생성
+    - 충돌 위치
+    - 관련 수정자 2명
+    - 각자의 수정 내용
+
+  [충돌 해결 방식]
+  - Last Write Wins (기본)
+    - 가장 최근 수정이 우선
+    - 이전 수정은 버전 이력에 보관
+  - 수동 병합 (선택)
+    - 충돌 내용 비교 UI 표시
+    - 사용자가 최종 내용 선택
+    - A 선택 / B 선택 / 직접 작성
+
+  [처리 결과]
+  - 충돌이 감지됨 (충돌 ID)
+  - 충돌 위치
+  - 관련 수정자
+  - 충돌이 해결됨
+  - 해결 방법 (Last Write Wins / 수동 병합)
+  - 최종 내용
+  - 해결된 내용 실시간 동기화
+
+  [Policy/Rule]
+  - 동시 수정 발생 시 최종 수정이 우선 (Last Write Wins) 또는 충돌 알림
+
+- M/21
+
+---
+
+UFR-COLLAB-030: [검증완료] 회의 참석자로서 | 나는, 회의록의 정확성을 보장하기 위해 | 주요 섹션을 검증하고 완료 표시를 하고 싶다.
+- 시나리오: 회의록 검증 완료
+  회의록 내용을 확인한 상황에서 | 참석자가 검증 완료 버튼을 클릭하면 | 검증 상태가 업데이트되고 다른 참석자에게 동기화된다.
+
+  [검증 처리]
+  - 검증자 정보 기록
+  - 검증 시간 기록
+  - 검증 대상 섹션 기록
+  - 검증 상태 업데이트
+    - 미검증 → 검증 중 → 검증 완료
+
+  [섹션 잠금 기능]
+  - 회의 생성자만 가능
+  - 주요 섹션 검증 완료 시 잠금 가능 (선택)
+  - 잠긴 섹션은 추가 수정 불가
+  - 회의 생성자가 잠그면 검증 완료로 표시
+
+  [처리 결과]
+  - 검증이 완료됨
+  - 검증자 정보
+  - 검증 상태 (검증 완료)
+  - 완료 시간
+  - 검증 완료 상태 실시간 동기화
+  - 검증 배지 표시 (체크 아이콘)
+  - 검증 완료 시 전체 메일로 알림이 발송된다.
+
+  [Policy/Rule]
+  - 주요 섹션 검증 완료 시 해당 섹션 잠금 가능
+
+- M/8
+
+---
+
+7. Todo 서비스 (차별화 포인트)
+1) 실시간 Todo 연결 (강화)
+UFR-TODO-010: [Todo할당] Todo 시스템으로서 | 나는, AI가 추출한 Todo를 담당자에게 전달하기 위해 | Todo를 실시간으로 할당하고 회의록과 연결하고 싶다.
+- 시나리오: Todo 실시간 할당 및 회의록 연결
+  AI가 Todo를 추출한 상황에서 | 시스템이 Todo를 등록하고 담당자를 지정하면 | Todo가 실시간으로 할당되고 회의록의 해당 위치와 연결되며 담당자에게 즉시 알림이 발송된다.
+
+  [Todo 등록]
+  - Todo 정보 저장
+    - Todo ID 생성
+    - Todo 내용
+    - 담당자 (AI 자동 식별 또는 수동 지정)
+    - 마감일 (언급된 경우 자동 설정, 없으면 수동 설정)
+    - 우선순위 (높음/보통/낮음)
+    - 관련 회의록 링크 (섹션 위치 포함)
+
+  [회의록 실시간 연결]
+  - 회의록 해당 섹션에 Todo 뱃지 표시
+  - Todo 클릭 시 Todo 상세 정보 표시
+  - 양방향 연결 (Todo → 회의록, 회의록 → Todo)
+
+  [알림 발송]
+  - 담당자에게 즉시 알림
+    - 이메일
+  - 알림 내용
+    - Todo 내용
+    - 마감일
+    - 회의록 링크 (해당 섹션으로 바로 이동)
+
+  [캘린더 연동]
+  - 마감일이 있는 경우 캘린더에 자동 등록
+  - 마감일 3일 전 리마인더 일정 생성
+
+  [처리 결과]
+  - Todo가 할당됨 (Todo ID)
+  - 담당자 정보
+  - 마감일
+  - 할당 시간
+  - 회의록 연결 정보 (섹션 ID, 타임스탬프)
+  - 담당자에게 알림이 발송됨
+  - 캘린더 등록 완료
+
+  [Policy/Rule]
+  - Todo 할당 시 담당자에게 즉시 알림 발송
+  - 회의록과 실시간 양방향 연결
+
+  [비고]
+  - **차별화 포인트**: Todo와 회의록의 강력한 연결, 원문 맥락 추적 가능
+
+- M/13
+
+---
+
+UFR-TODO-030: [Todo완료처리] Todo 담당자로서 | 나는, 완료된 Todo를 처리하고 회의록에 반영하기 위해 | Todo를 완료하고 회의록에 자동 반영하고 싶다.
+- 시나리오: Todo 완료 처리 및 회의록 자동 반영
+  Todo 작업이 완료된 상황에서 | 담당자가 완료 버튼을 클릭하면 | Todo가 완료 상태로 변경되고 연결된 회의록에 완료 상태가 실시간으로 반영된다.
+
+  [완료 처리]
+  - 완료 시간 자동 기록
+  - 완료자 정보 저장
+  - 완료 상태로 변경
+  - 완료 여부 확인 다이얼로그 표시
+
+  [회의록 실시간 반영]
+  - 관련 회의록의 Todo 섹션 자동 업데이트
+  - 완료 표시 (체크 아이콘)
+  - 완료 시간 기록
+  - 완료자 정보 표시
+
+  [알림 발송]
+  - 완료 알림
+  - 모든 Todo 완료 시 전체 완료 알림
+
+  [처리 결과]
+  - Todo가 완료됨
+  - 완료 시간
+  - 완료자 정보
+  - 회의록에 완료 상태가 반영됨
+  - 반영 시간
+  - 회의록 버전 업데이트
+
+  [Policy/Rule]
+  - Todo 완료 시 회의록에 완료 상태 즉시 반영
+  - 모든 Todo 완료 시 완료 알림
+
+  [비고]
+  - **차별화 포인트**: Todo 완료가 회의록에 실시간 반영되어 회의 결과 추적 용이
+
+- M/8
+
+---
\ No newline at end of file
