From d3c8b57116ee8d56960f1e19c579c20d8d56f84a Mon Sep 17 00:00:00 2001
From: hiondal <hiondal@gmail.com>
Date: Mon, 20 Oct 2025 13:12:50 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=9E=AC=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC=20=EB=B0=8F=20=ED=94=84=EB=A1=9C=ED=86=A0=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 design-v1/uiux/prototype/01-로그인.html       |  307 +++++
 design-v1/uiux/prototype/02-대시보드.html     |  539 ++++++++
 design-v1/uiux/prototype/03-회의예약.html     |  699 ++++++++++
 design-v1/uiux/prototype/04-템플릿선택.html   |  537 ++++++++
 design-v1/uiux/prototype/05-회의진행.html     |  858 ++++++++++++
 design-v1/uiux/prototype/06-검증완료.html     |  499 +++++++
 design-v1/uiux/prototype/07-회의종료.html     |  573 ++++++++
 .../uiux/prototype/08-회의록공유.html         |    0
 .../uiux/prototype/09-Todo관리.html           |    0
 design-v1/uiux/prototype/common.css           |  596 +++++++++
 design-v1/uiux/prototype/common.js            |  408 ++++++
 {design => design-v1}/uiux/style-guide.md     |    0
 {design => design-v1}/uiux/uiux.md            |    0
 design-v1/userstory.md                        |  674 ++++++++++
 design/style-guide.md                         | 1184 +++++++++++++++++
 design/uiux/prototype/01-로그인.html          |  438 +++---
 design/uiux/prototype/02-대시보드.html        |  960 +++++++------
 design/uiux/prototype/03-회의예약.html        |  740 ++---------
 design/uiux/prototype/04-템플릿선택.html      |  604 +++------
 design/uiux/prototype/06-검증완료.html        |  572 ++------
 design/uiux/prototype/07-회의종료.html        |  599 +--------
 design/uiux/prototype/08-최종확정.html        |  303 +++++
 design/uiux/prototype/common.css              |  848 +++++++-----
 design/uiux/prototype/common.js               |  886 +++++++-----
 design/userstory.md                           |  421 +++++-
 25 files changed, 9817 insertions(+), 3428 deletions(-)
 create mode 100644 design-v1/uiux/prototype/01-로그인.html
 create mode 100644 design-v1/uiux/prototype/02-대시보드.html
 create mode 100644 design-v1/uiux/prototype/03-회의예약.html
 create mode 100644 design-v1/uiux/prototype/04-템플릿선택.html
 create mode 100644 design-v1/uiux/prototype/05-회의진행.html
 create mode 100644 design-v1/uiux/prototype/06-검증완료.html
 create mode 100644 design-v1/uiux/prototype/07-회의종료.html
 rename {design => design-v1}/uiux/prototype/08-회의록공유.html (100%)
 rename {design => design-v1}/uiux/prototype/09-Todo관리.html (100%)
 create mode 100644 design-v1/uiux/prototype/common.css
 create mode 100644 design-v1/uiux/prototype/common.js
 rename {design => design-v1}/uiux/style-guide.md (100%)
 rename {design => design-v1}/uiux/uiux.md (100%)
 create mode 100644 design-v1/userstory.md
 create mode 100644 design/style-guide.md
 create mode 100644 design/uiux/prototype/08-최종확정.html
diff --git a/design-v1/uiux/prototype/01-로그인.html b/design-v1/uiux/prototype/01-로그인.html
new file mode 100644
index 0000000..774b43b
--- /dev/null
+++ b/design-v1/uiux/prototype/01-로그인.html
@@ -0,0 +1,307 @@
+<!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 {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      background: linear-gradient(135deg, #4DFFDB 0%, #00D9B1 100%);
+    }
+
+    .login-container {
+      background-color: white;
+      border-radius: var(--radius-xl);
+      padding: var(--spacing-12);
+      max-width: 400px;
+      width: 90%;
+      box-shadow: var(--shadow-lg);
+    }
+
+    .login-header {
+      text-align: center;
+      margin-bottom: var(--spacing-8);
+    }
+
+    .logo-large {
+      font-size: 3rem;
+      color: var(--primary-main);
+      margin-bottom: var(--spacing-4);
+    }
+
+    .login-title {
+      font: var(--font-h2);
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .login-subtitle {
+      font: var(--font-body);
+      color: var(--gray-500);
+    }
+
+    .login-form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-4);
+    }
+
+    .password-toggle {
+      position: relative;
+    }
+
+    .password-toggle-btn {
+      position: absolute;
+      right: var(--spacing-3);
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--gray-500);
+      font-size: 1.2rem;
+    }
+
+    .login-options {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.875rem;
+    }
+
+    .checkbox-label {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      cursor: pointer;
+      color: var(--gray-600);
+    }
+
+    .forgot-password {
+      color: var(--primary-main);
+      text-decoration: none;
+    }
+
+    .forgot-password:hover {
+      text-decoration: underline;
+    }
+
+    .divider {
+      text-align: center;
+      margin: var(--spacing-6) 0;
+      position: relative;
+    }
+
+    .divider::before,
+    .divider::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      width: 45%;
+      height: 1px;
+      background-color: var(--gray-200);
+    }
+
+    .divider::before { left: 0; }
+    .divider::after { right: 0; }
+
+    .divider-text {
+      background-color: white;
+      padding: 0 var(--spacing-3);
+      color: var(--gray-500);
+      font-size: 0.875rem;
+    }
+
+    .social-login {
+      display: flex;
+      gap: var(--spacing-3);
+    }
+
+    .social-btn {
+      flex: 1;
+      padding: var(--spacing-3);
+      border: 1px solid var(--gray-300);
+      border-radius: var(--radius-md);
+      background-color: white;
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--spacing-2);
+      font-size: 0.875rem;
+    }
+
+    .social-btn:hover {
+      background-color: var(--gray-50);
+      border-color: var(--gray-400);
+    }
+  </style>
+</head>
+<body>
+  <div class="login-container">
+    <div class="login-header">
+      <div class="logo-large">📝</div>
+      <h1 class="login-title">회의록 작성 서비스</h1>
+      <p class="login-subtitle">AI와 함께하는 스마트한 회의록 관리</p>
+    </div>
+
+    <form class="login-form" id="loginForm">
+      <div class="input-group">
+        <label for="email" class="input-label">이메일</label>
+        <input
+          type="email"
+          id="email"
+          class="input"
+          placeholder="example@company.com"
+          required
+        >
+        <span class="input-error hidden" id="emailError"></span>
+      </div>
+
+      <div class="input-group">
+        <label for="password" class="input-label">비밀번호</label>
+        <div class="password-toggle">
+          <input
+            type="password"
+            id="password"
+            class="input"
+            placeholder="비밀번호를 입력하세요"
+            required
+          >
+          <button
+            type="button"
+            class="password-toggle-btn"
+            id="togglePassword"
+            aria-label="비밀번호 표시/숨김"
+          >
+            👁️
+          </button>
+        </div>
+        <span class="input-error hidden" id="passwordError"></span>
+      </div>
+
+      <div class="login-options">
+        <label class="checkbox-label">
+          <input type="checkbox" id="rememberMe">
+          <span>로그인 상태 유지</span>
+        </label>
+        <a href="#" class="forgot-password">비밀번호 찾기</a>
+      </div>
+
+      <button type="submit" class="btn btn-primary btn-lg">
+        로그인
+      </button>
+    </form>
+
+    <div class="divider">
+      <span class="divider-text">또는</span>
+    </div>
+
+    <div class="social-login">
+      <button class="social-btn" id="googleLogin">
+        <span>🔵</span>
+        <span>Google</span>
+      </button>
+      <button class="social-btn" id="microsoftLogin">
+        <span>🟦</span>
+        <span>Microsoft</span>
+      </button>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    // 비밀번호 표시/숨김 토글
+    document.getElementById('togglePassword').addEventListener('click', function() {
+      const passwordInput = document.getElementById('password');
+      const type = passwordInput.type === 'password' ? 'text' : 'password';
+      passwordInput.type = type;
+      this.textContent = type === 'password' ? '👁️' : '👁️‍🗨️';
+    });
+
+    // 로그인 폼 제출
+    document.getElementById('loginForm').addEventListener('submit', function(e) {
+      e.preventDefault();
+
+      const email = document.getElementById('email').value;
+      const password = document.getElementById('password').value;
+      const rememberMe = document.getElementById('rememberMe').checked;
+
+      // 간단한 검증
+      const emailError = document.getElementById('emailError');
+      const passwordError = document.getElementById('passwordError');
+
+      emailError.classList.add('hidden');
+      passwordError.classList.add('hidden');
+      document.getElementById('email').classList.remove('error');
+      document.getElementById('password').classList.remove('error');
+
+      let hasError = false;
+
+      // 이메일 검증
+      if (!email.includes('@')) {
+        emailError.textContent = '올바른 이메일 주소를 입력하세요.';
+        emailError.classList.remove('hidden');
+        document.getElementById('email').classList.add('error');
+        hasError = true;
+      }
+
+      // 비밀번호 검증
+      if (password.length < 8) {
+        passwordError.textContent = '비밀번호는 최소 8자 이상이어야 합니다.';
+        passwordError.classList.remove('hidden');
+        document.getElementById('password').classList.add('error');
+        hasError = true;
+      }
+
+      if (hasError) {
+        return;
+      }
+
+      // 로그인 처리 (시뮬레이션)
+      const users = getFromStorage('users') || [];
+      const user = users.find(u => u.email === email);
+
+      if (!user) {
+        showToast('이메일 또는 비밀번호가 일치하지 않습니다.', 'error');
+        return;
+      }
+
+      // 로그인 성공
+      saveToStorage('currentUser', user);
+
+      if (rememberMe) {
+        localStorage.setItem('rememberMe', 'true');
+      }
+
+      showToast('로그인 성공!', 'success');
+
+      // 0.5초 후 대시보드로 이동
+      setTimeout(() => {
+        navigateTo('02-대시보드.html');
+      }, 500);
+    });
+
+    // 소셜 로그인 (시뮬레이션)
+    document.getElementById('googleLogin').addEventListener('click', function() {
+      showToast('Google 로그인은 프로토타입에서 지원하지 않습니다.', 'info');
+    });
+
+    document.getElementById('microsoftLogin').addEventListener('click', function() {
+      showToast('Microsoft 로그인은 프로토타입에서 지원하지 않습니다.', 'info');
+    });
+
+    // 비밀번호 찾기
+    document.querySelector('.forgot-password').addEventListener('click', function(e) {
+      e.preventDefault();
+      showToast('비밀번호 재설정 이메일이 발송되었습니다.', 'success');
+    });
+  </script>
+</body>
+</html>
diff --git a/design-v1/uiux/prototype/02-대시보드.html b/design-v1/uiux/prototype/02-대시보드.html
new file mode 100644
index 0000000..3b263d1
--- /dev/null
+++ b/design-v1/uiux/prototype/02-대시보드.html
@@ -0,0 +1,539 @@
+<!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>
+    .dashboard-layout {
+      display: flex;
+      min-height: 100vh;
+    }
+
+    .sidebar {
+      width: 250px;
+      background-color: white;
+      border-right: 1px solid var(--gray-200);
+      padding: var(--spacing-6);
+      position: fixed;
+      height: 100vh;
+      overflow-y: auto;
+    }
+
+    .sidebar-logo {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--primary-main);
+      margin-bottom: var(--spacing-8);
+      text-decoration: none;
+      display: block;
+    }
+
+    .sidebar-menu {
+      list-style: none;
+    }
+
+    .sidebar-menu-item {
+      margin-bottom: var(--spacing-2);
+    }
+
+    .sidebar-menu-link {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      border-radius: var(--radius-md);
+      text-decoration: none;
+      color: var(--gray-700);
+      transition: all var(--transition-fast);
+    }
+
+    .sidebar-menu-link:hover {
+      background-color: var(--gray-100);
+    }
+
+    .sidebar-menu-link.active {
+      background-color: var(--primary-light);
+      color: var(--primary-dark);
+      font-weight: 600;
+    }
+
+    .main-layout {
+      margin-left: 250px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .top-header {
+      background-color: white;
+      border-bottom: 1px solid var(--gray-200);
+      padding: var(--spacing-4);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    .header-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--spacing-4);
+    }
+
+    .search-bar {
+      flex: 1;
+      max-width: 600px;
+      position: relative;
+    }
+
+    .search-input {
+      width: 100%;
+      padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-10);
+      border: 1px solid var(--gray-300);
+      border-radius: var(--radius-md);
+      font-size: 0.875rem;
+    }
+
+    .search-icon {
+      position: absolute;
+      left: var(--spacing-3);
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--gray-400);
+    }
+
+    .header-actions {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+    }
+
+    .notification-btn {
+      position: relative;
+    }
+
+    .notification-badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      background-color: var(--error-main);
+      color: white;
+      font-size: 0.75rem;
+      padding: 2px 6px;
+      border-radius: var(--radius-full);
+    }
+
+    .profile-btn {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2);
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      transition: background-color var(--transition-fast);
+    }
+
+    .profile-btn:hover {
+      background-color: var(--gray-100);
+    }
+
+    .profile-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: var(--radius-full);
+      background-color: var(--primary-main);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.2rem;
+    }
+
+    .dashboard-content {
+      padding: var(--spacing-8);
+      background-color: var(--gray-50);
+    }
+
+    .dashboard-header {
+      margin-bottom: var(--spacing-6);
+    }
+
+    .dashboard-title {
+      font: var(--font-h1);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .dashboard-subtitle {
+      color: var(--gray-500);
+    }
+
+    .widget-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: var(--spacing-6);
+    }
+
+    .widget {
+      background-color: white;
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .widget-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--spacing-4);
+    }
+
+    .widget-title {
+      font: var(--font-h4);
+    }
+
+    .widget-link {
+      color: var(--primary-main);
+      font-size: 0.875rem;
+      text-decoration: none;
+    }
+
+    .widget-link:hover {
+      text-decoration: underline;
+    }
+
+    .meeting-item {
+      padding: var(--spacing-3);
+      border-bottom: 1px solid var(--gray-100);
+      cursor: pointer;
+      transition: background-color var(--transition-fast);
+    }
+
+    .meeting-item:last-child {
+      border-bottom: none;
+    }
+
+    .meeting-item:hover {
+      background-color: var(--gray-50);
+      border-radius: var(--radius-md);
+    }
+
+    .meeting-title {
+      font-weight: 500;
+      margin-bottom: var(--spacing-1);
+    }
+
+    .meeting-meta {
+      font-size: 0.875rem;
+      color: var(--gray-500);
+      display: flex;
+      gap: var(--spacing-3);
+    }
+
+    .todo-item {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      border-bottom: 1px solid var(--gray-100);
+    }
+
+    .todo-item:last-child {
+      border-bottom: none;
+    }
+
+    .todo-checkbox {
+      margin-top: 4px;
+    }
+
+    .todo-content {
+      flex: 1;
+    }
+
+    .todo-text {
+      font-size: 0.875rem;
+      margin-bottom: var(--spacing-1);
+    }
+
+    .todo-due {
+      font-size: 0.75rem;
+      color: var(--gray-500);
+    }
+
+    .todo-due.overdue {
+      color: var(--error-main);
+    }
+
+    .stat-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--spacing-4);
+    }
+
+    .stat-card {
+      text-align: center;
+      padding: var(--spacing-4);
+      background-color: var(--gray-50);
+      border-radius: var(--radius-md);
+    }
+
+    .stat-number {
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--primary-main);
+    }
+
+    .stat-label {
+      font-size: 0.875rem;
+      color: var(--gray-600);
+    }
+  </style>
+</head>
+<body>
+  <div class="dashboard-layout">
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <a href="02-대시보드.html" class="sidebar-logo">📝 회의록</a>
+      <nav>
+        <ul class="sidebar-menu">
+          <li class="sidebar-menu-item">
+            <a href="02-대시보드.html" class="sidebar-menu-link active">
+              <span>🏠</span>
+              <span>대시보드</span>
+            </a>
+          </li>
+          <li class="sidebar-menu-item">
+            <a href="#" class="sidebar-menu-link">
+              <span>📄</span>
+              <span>내 회의록</span>
+            </a>
+          </li>
+          <li class="sidebar-menu-item">
+            <a href="03-회의예약.html" class="sidebar-menu-link">
+              <span>📅</span>
+              <span>예정된 회의</span>
+            </a>
+          </li>
+          <li class="sidebar-menu-item">
+            <a href="09-Todo관리.html" class="sidebar-menu-link">
+              <span>✅</span>
+              <span>Todo 목록</span>
+            </a>
+          </li>
+          <li class="sidebar-menu-item">
+            <a href="04-템플릿선택.html" class="sidebar-menu-link">
+              <span>📋</span>
+              <span>템플릿</span>
+            </a>
+          </li>
+          <li class="sidebar-menu-item">
+            <a href="#" class="sidebar-menu-link">
+              <span>⚙️</span>
+              <span>설정</span>
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </aside>
+
+    <!-- Main Content -->
+    <div class="main-layout">
+      <!-- Header -->
+      <header class="top-header">
+        <div class="header-content">
+          <div class="search-bar">
+            <span class="search-icon">🔍</span>
+            <input type="text" class="search-input" placeholder="회의록 검색...">
+          </div>
+          <div class="header-actions">
+            <button class="btn-icon notification-btn">
+              <span>🔔</span>
+              <span class="notification-badge">3</span>
+            </button>
+            <div class="profile-btn" id="profileBtn">
+              <div class="profile-avatar" id="profileAvatar">👤</div>
+              <span id="profileName">사용자</span>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <!-- Dashboard Content -->
+      <main class="dashboard-content">
+        <div class="dashboard-header">
+          <h1 class="dashboard-title" id="welcomeMessage">안녕하세요!</h1>
+          <p class="dashboard-subtitle">오늘도 생산적인 하루 되세요</p>
+        </div>
+
+        <div class="widget-grid">
+          <!-- 예정된 회의 -->
+          <div class="widget">
+            <div class="widget-header">
+              <h3 class="widget-title">예정된 회의</h3>
+              <a href="03-회의예약.html" class="widget-link">모두 보기</a>
+            </div>
+            <div id="scheduledMeetings"></div>
+          </div>
+
+          <!-- 최근 회의록 -->
+          <div class="widget">
+            <div class="widget-header">
+              <h3 class="widget-title">최근 회의록</h3>
+              <a href="#" class="widget-link">모두 보기</a>
+            </div>
+            <div id="recentMeetings"></div>
+          </div>
+
+          <!-- 대기 중인 Todo -->
+          <div class="widget">
+            <div class="widget-header">
+              <h3 class="widget-title">내가 할 일</h3>
+              <a href="09-Todo관리.html" class="widget-link">모두 보기</a>
+            </div>
+            <div id="pendingTodos"></div>
+          </div>
+
+          <!-- 통계 -->
+          <div class="widget">
+            <div class="widget-header">
+              <h3 class="widget-title">이번 주 통계</h3>
+            </div>
+            <div class="stat-grid">
+              <div class="stat-card">
+                <div class="stat-number" id="weeklyMeetings">0</div>
+                <div class="stat-label">회의</div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-number" id="completedTodos">0</div>
+                <div class="stat-label">완료 Todo</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <!-- FAB -->
+    <button class="fab" id="fabBtn">+</button>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    // 사용자 정보 표시
+    const currentUser = getCurrentUser();
+    if (currentUser) {
+      document.getElementById('welcomeMessage').textContent = `안녕하세요, ${currentUser.name}님!`;
+      document.getElementById('profileName').textContent = currentUser.name;
+      document.getElementById('profileAvatar').textContent = currentUser.avatar;
+    }
+
+    // 예정된 회의 표시
+    const scheduledMeetings = getScheduledMeetings();
+    const scheduledContainer = document.getElementById('scheduledMeetings');
+    if (scheduledMeetings.length > 0) {
+      scheduledContainer.innerHTML = scheduledMeetings.slice(0, 3).map(meeting => `
+        <div class="meeting-item" onclick="navigateTo('05-회의진행.html?id=${meeting.id}')">
+          <div class="meeting-title">${meeting.title}</div>
+          <div class="meeting-meta">
+            <span>📅 ${meeting.date}</span>
+            <span>🕐 ${meeting.time}</span>
+          </div>
+        </div>
+      `).join('');
+    } else {
+      scheduledContainer.innerHTML = '<p style="color: var(--gray-500); font-size: 0.875rem;">예정된 회의가 없습니다.</p>';
+    }
+
+    // 최근 회의록 표시
+    const recentMeetings = getRecentMeetings(3);
+    const recentContainer = document.getElementById('recentMeetings');
+    if (recentMeetings.length > 0) {
+      recentContainer.innerHTML = recentMeetings.map(meeting => {
+        const statusClass = meeting.status === 'completed' ? 'success' : meeting.status === 'in_progress' ? 'warning' : 'neutral';
+        const statusText = meeting.status === 'completed' ? '확정됨' : meeting.status === 'in_progress' ? '작성 중' : '예정됨';
+        return `
+          <div class="meeting-item" onclick="navigateTo('05-회의진행.html?id=${meeting.id}')">
+            <div class="meeting-title">${meeting.title}</div>
+            <div class="meeting-meta">
+              <span>📅 ${meeting.date}</span>
+              <span class="badge badge-${statusClass}">${statusText}</span>
+            </div>
+          </div>
+        `;
+      }).join('');
+    } else {
+      recentContainer.innerHTML = '<p style="color: var(--gray-500); font-size: 0.875rem;">회의록이 없습니다.</p>';
+    }
+
+    // 대기 중인 Todo 표시
+    if (currentUser) {
+      const pendingTodos = getPendingTodos(currentUser.id).slice(0, 3);
+      const todosContainer = document.getElementById('pendingTodos');
+      if (pendingTodos.length > 0) {
+        todosContainer.innerHTML = pendingTodos.map(todo => {
+          const dueClass = getDdayText(todo.dueDate).includes('지남') ? 'overdue' : '';
+          return `
+            <div class="todo-item">
+              <input type="checkbox" class="todo-checkbox" data-id="${todo.id}">
+              <div class="todo-content">
+                <div class="todo-text">${todo.content}</div>
+                <div class="todo-due ${dueClass}">${getDdayText(todo.dueDate)}</div>
+              </div>
+            </div>
+          `;
+        }).join('');
+
+        // Todo 체크박스 이벤트
+        document.querySelectorAll('.todo-checkbox').forEach(checkbox => {
+          checkbox.addEventListener('change', function() {
+            const todoId = this.getAttribute('data-id');
+            const todo = getTodoById(todoId);
+            if (todo && this.checked) {
+              todo.status = 'completed';
+              todo.progress = 100;
+              saveTodo(todo);
+              showToast('Todo가 완료되었습니다.', 'success');
+              setTimeout(() => location.reload(), 1000);
+            }
+          });
+        });
+      } else {
+        todosContainer.innerHTML = '<p style="color: var(--gray-500); font-size: 0.875rem;">할 일이 없습니다.</p>';
+      }
+    }
+
+    // 통계 표시
+    const allMeetings = getAllMeetings();
+    document.getElementById('weeklyMeetings').textContent = allMeetings.length;
+    const completedTodos = getTodosByStatus('completed');
+    document.getElementById('completedTodos').textContent = completedTodos.length;
+
+    // FAB 클릭
+    document.getElementById('fabBtn').addEventListener('click', function() {
+      const menu = [
+        { text: '새 회의 예약', url: '03-회의예약.html' },
+        { text: '즉시 회의 시작', url: '04-템플릿선택.html' },
+        { text: '새 Todo 추가', url: '09-Todo관리.html' }
+      ];
+      // 간단한 메뉴 표시
+      const choice = confirm('새 회의를 예약하시겠습니까?\n확인: 예약\n취소: 즉시 시작');
+      if (choice) {
+        navigateTo('03-회의예약.html');
+      } else {
+        navigateTo('04-템플릿선택.html');
+      }
+    });
+
+    // 프로필 버튼 클릭
+    document.getElementById('profileBtn').addEventListener('click', function() {
+      const choice = confirm('로그아웃하시겠습니까?');
+      if (choice) {
+        localStorage.removeItem('currentUser');
+        showToast('로그아웃되었습니다.', 'success');
+        setTimeout(() => navigateTo('01-로그인.html'), 500);
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/design-v1/uiux/prototype/03-회의예약.html b/design-v1/uiux/prototype/03-회의예약.html
new file mode 100644
index 0000000..ece90a9
--- /dev/null
+++ b/design-v1/uiux/prototype/03-회의예약.html
@@ -0,0 +1,699 @@
+<!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>
+    .reservation-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-8);
+    }
+
+    .progress-bar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: var(--spacing-4);
+      margin-bottom: var(--spacing-8);
+    }
+
+    .progress-step {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .progress-circle {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background-color: var(--gray-300);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+    }
+
+    .progress-circle.active {
+      background-color: var(--primary-main);
+    }
+
+    .progress-circle.completed {
+      background-color: var(--success-main);
+    }
+
+    .progress-label {
+      font-weight: 500;
+      color: var(--gray-500);
+    }
+
+    .progress-label.active {
+      color: var(--gray-900);
+    }
+
+    .progress-arrow {
+      color: var(--gray-300);
+      font-size: 20px;
+    }
+
+    .reservation-layout {
+      display: grid;
+      grid-template-columns: 1fr 400px;
+      gap: var(--spacing-8);
+    }
+
+    .form-section {
+      background: white;
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-8);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .preview-section {
+      position: sticky;
+      top: var(--spacing-8);
+      height: fit-content;
+    }
+
+    .preview-card {
+      background: white;
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+      border: 2px solid var(--primary-main);
+    }
+
+    .preview-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+
+    .preview-item {
+      margin-bottom: var(--spacing-4);
+      padding-bottom: var(--spacing-4);
+      border-bottom: 1px solid var(--gray-200);
+    }
+
+    .preview-item:last-child {
+      border-bottom: none;
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+
+    .preview-label {
+      font-size: 0.75rem;
+      color: var(--gray-500);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .preview-value {
+      font-size: 1rem;
+      color: var(--gray-900);
+      font-weight: 500;
+    }
+
+    .datetime-group {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--spacing-4);
+    }
+
+    .participant-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-2);
+      margin-top: var(--spacing-2);
+    }
+
+    .participant-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2) var(--spacing-3);
+      background-color: var(--gray-100);
+      border-radius: var(--radius-md);
+      font-size: 0.875rem;
+    }
+
+    .participant-tag .remove {
+      cursor: pointer;
+      color: var(--gray-500);
+      font-weight: bold;
+    }
+
+    .participant-tag .remove:hover {
+      color: var(--error-main);
+    }
+
+    .checkbox-group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-2);
+    }
+
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .checkbox-item input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+
+    .action-buttons {
+      display: flex;
+      justify-content: space-between;
+      margin-top: var(--spacing-8);
+      padding-top: var(--spacing-6);
+      border-top: 1px solid var(--gray-200);
+    }
+
+    @media (max-width: 1023px) {
+      .reservation-layout {
+        grid-template-columns: 1fr;
+      }
+
+      .preview-section {
+        position: static;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="reservation-container">
+    <!-- 진행 단계 표시 -->
+    <div class="progress-bar">
+      <div class="progress-step">
+        <div class="progress-circle completed">✓</div>
+        <span class="progress-label">회의 예약</span>
+      </div>
+      <span class="progress-arrow">→</span>
+      <div class="progress-step">
+        <div class="progress-circle active">2</div>
+        <span class="progress-label active">템플릿 선택</span>
+      </div>
+      <span class="progress-arrow">→</span>
+      <div class="progress-step">
+        <div class="progress-circle">3</div>
+        <span class="progress-label">회의 진행</span>
+      </div>
+    </div>
+
+    <div class="reservation-layout">
+      <!-- 입력 폼 -->
+      <div class="form-section">
+        <h1>회의 예약</h1>
+        <p style="color: var(--gray-500); margin-bottom: var(--spacing-8);">
+          회의 정보를 입력하고 참석자를 초대하세요
+        </p>
+
+        <form id="reservationForm">
+          <!-- 회의 제목 -->
+          <div class="input-group">
+            <label class="input-label" for="meetingTitle">
+              회의 제목 <span style="color: var(--error-main);">*</span>
+            </label>
+            <input
+              type="text"
+              id="meetingTitle"
+              class="input"
+              placeholder="예: 2025년 1분기 전략 회의"
+              maxlength="100"
+              required>
+            <span class="input-error hidden" id="titleError"></span>
+          </div>
+
+          <!-- 날짜 및 시간 -->
+          <div class="datetime-group">
+            <div class="input-group">
+              <label class="input-label" for="meetingDate">
+                날짜 <span style="color: var(--error-main);">*</span>
+              </label>
+              <input
+                type="date"
+                id="meetingDate"
+                class="input"
+                required>
+              <span class="input-error hidden" id="dateError"></span>
+            </div>
+
+            <div class="input-group">
+              <label class="input-label" for="startTime">
+                시작 시간 <span style="color: var(--error-main);">*</span>
+              </label>
+              <input
+                type="time"
+                id="startTime"
+                class="input"
+                required>
+            </div>
+          </div>
+
+          <div class="datetime-group">
+            <div class="input-group">
+              <label class="input-label" for="endTime">
+                종료 시간 <span style="color: var(--error-main);">*</span>
+              </label>
+              <input
+                type="time"
+                id="endTime"
+                class="input"
+                required>
+              <span class="input-error hidden" id="timeError"></span>
+            </div>
+
+            <div class="input-group">
+              <label class="input-label">&nbsp;</label>
+              <div style="padding: var(--spacing-3) 0; color: var(--gray-500); font-size: 0.875rem;">
+                예상 소요: <span id="duration">-</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 장소 -->
+          <div class="input-group">
+            <label class="input-label" for="location">장소</label>
+            <input
+              type="text"
+              id="location"
+              class="input"
+              placeholder="예: 3층 회의실"
+              maxlength="200"
+              :disabled="isOnline">
+
+            <div class="checkbox-item mt-2">
+              <input type="checkbox" id="isOnline">
+              <label for="isOnline">온라인 회의</label>
+            </div>
+
+            <input
+              type="url"
+              id="onlineLink"
+              class="input mt-2 hidden"
+              placeholder="Zoom, Teams 링크를 입력하세요">
+          </div>
+
+          <!-- 참석자 -->
+          <div class="input-group">
+            <label class="input-label" for="participantEmail">
+              참석자 <span style="color: var(--error-main);">*</span>
+            </label>
+            <input
+              type="email"
+              id="participantEmail"
+              class="input"
+              placeholder="참석자 이메일을 입력하세요">
+            <button type="button" class="btn btn-secondary btn-sm mt-2" id="addParticipant">
+              + 참석자 추가
+            </button>
+            <div class="participant-tags" id="participantTags"></div>
+            <span class="input-error hidden" id="participantError"></span>
+          </div>
+
+          <!-- 회의 설명 -->
+          <div class="input-group">
+            <label class="input-label" for="description">회의 설명</label>
+            <textarea
+              id="description"
+              class="textarea"
+              placeholder="회의 목적 및 안건을 입력하세요"
+              maxlength="1000"></textarea>
+          </div>
+
+          <!-- 알림 설정 -->
+          <div class="input-group">
+            <label class="input-label">알림 설정</label>
+            <div class="checkbox-group">
+              <div class="checkbox-item">
+                <input type="checkbox" id="notify30" checked>
+                <label for="notify30">회의 30분 전 알림</label>
+              </div>
+              <div class="checkbox-item">
+                <input type="checkbox" id="notify60">
+                <label for="notify60">회의 1시간 전 알림</label>
+              </div>
+            </div>
+          </div>
+
+          <!-- 반복 설정 -->
+          <div class="input-group">
+            <label class="input-label" for="repeat">반복 설정</label>
+            <select id="repeat" class="select">
+              <option value="none">반복 안 함</option>
+              <option value="daily">매일</option>
+              <option value="weekly">매주</option>
+              <option value="monthly">매월</option>
+            </select>
+
+            <div class="input-group mt-4 hidden" id="repeatEndGroup">
+              <label class="input-label" for="repeatEnd">반복 종료일</label>
+              <input type="date" id="repeatEnd" class="input">
+            </div>
+          </div>
+
+          <!-- 캘린더 연동 -->
+          <div class="input-group">
+            <label class="input-label">캘린더 연동</label>
+            <div class="checkbox-group">
+              <div class="checkbox-item">
+                <input type="checkbox" id="googleCalendar">
+                <label for="googleCalendar">Google Calendar에 추가</label>
+              </div>
+              <div class="checkbox-item">
+                <input type="checkbox" id="outlook">
+                <label for="outlook">Outlook에 추가</label>
+              </div>
+            </div>
+          </div>
+
+          <!-- 액션 버튼 -->
+          <div class="action-buttons">
+            <button type="button" class="btn btn-text" onclick="navigateTo('02-대시보드.html')">
+              취소
+            </button>
+            <div style="display: flex; gap: var(--spacing-3);">
+              <button type="button" class="btn btn-secondary" id="saveDraft">
+                저장 후 나중에 계속
+              </button>
+              <button type="submit" class="btn btn-primary">
+                다음: 템플릿 선택 →
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      <!-- 미리보기 -->
+      <div class="preview-section">
+        <div class="preview-card">
+          <div class="preview-title">회의 미리보기</div>
+
+          <div class="preview-item">
+            <div class="preview-label">회의 제목</div>
+            <div class="preview-value" id="previewTitle">-</div>
+          </div>
+
+          <div class="preview-item">
+            <div class="preview-label">날짜 및 시간</div>
+            <div class="preview-value" id="previewDateTime">-</div>
+          </div>
+
+          <div class="preview-item">
+            <div class="preview-label">장소</div>
+            <div class="preview-value" id="previewLocation">-</div>
+          </div>
+
+          <div class="preview-item">
+            <div class="preview-label">참석자</div>
+            <div class="preview-value" id="previewParticipants">-</div>
+          </div>
+
+          <div class="preview-item">
+            <div class="preview-label">회의 설명</div>
+            <div class="preview-value" id="previewDescription" style="white-space: pre-wrap;">-</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    // 참석자 목록
+    let participants = [];
+
+    // 오늘 날짜를 최소값으로 설정
+    const today = new Date().toISOString().split('T')[0];
+    document.getElementById('meetingDate').min = today;
+    document.getElementById('meetingDate').value = today;
+    document.getElementById('repeatEnd').min = today;
+
+    // 시작 시간 기본값 설정
+    const now = new Date();
+    const currentHour = now.getHours();
+    const nextHour = currentHour + 1;
+    document.getElementById('startTime').value = `${String(nextHour).padStart(2, '0')}:00`;
+    document.getElementById('endTime').value = `${String(nextHour + 1).padStart(2, '0')}:00`;
+
+    // 실시간 미리보기 업데이트
+    function updatePreview() {
+      const title = document.getElementById('meetingTitle').value || '-';
+      const date = document.getElementById('meetingDate').value;
+      const startTime = document.getElementById('startTime').value;
+      const endTime = document.getElementById('endTime').value;
+      const isOnline = document.getElementById('isOnline').checked;
+      const location = isOnline ?
+        (document.getElementById('onlineLink').value || '온라인 회의') :
+        (document.getElementById('location').value || '-');
+      const description = document.getElementById('description').value || '-';
+
+      document.getElementById('previewTitle').textContent = title;
+
+      if (date && startTime && endTime) {
+        const dateObj = new Date(date);
+        const dateStr = `${dateObj.getFullYear()}년 ${dateObj.getMonth() + 1}월 ${dateObj.getDate()}일`;
+        document.getElementById('previewDateTime').textContent = `${dateStr} ${startTime} ~ ${endTime}`;
+      } else {
+        document.getElementById('previewDateTime').textContent = '-';
+      }
+
+      document.getElementById('previewLocation').textContent = location;
+      document.getElementById('previewParticipants').textContent =
+        participants.length > 0 ? participants.join(', ') : '-';
+      document.getElementById('previewDescription').textContent = description;
+    }
+
+    // 소요 시간 계산
+    function calculateDuration() {
+      const startTime = document.getElementById('startTime').value;
+      const endTime = document.getElementById('endTime').value;
+
+      if (startTime && endTime) {
+        const [startHour, startMin] = startTime.split(':').map(Number);
+        const [endHour, endMin] = endTime.split(':').map(Number);
+
+        const startMinutes = startHour * 60 + startMin;
+        const endMinutes = endHour * 60 + endMin;
+        const diff = endMinutes - startMinutes;
+
+        if (diff > 0) {
+          document.getElementById('duration').textContent = formatDuration(diff);
+          document.getElementById('timeError').classList.add('hidden');
+          document.getElementById('endTime').classList.remove('error');
+          return true;
+        } else {
+          document.getElementById('timeError').textContent = '종료 시간은 시작 시간보다 늦어야 합니다.';
+          document.getElementById('timeError').classList.remove('hidden');
+          document.getElementById('endTime').classList.add('error');
+          return false;
+        }
+      }
+      return true;
+    }
+
+    // 온라인 회의 체크박스
+    document.getElementById('isOnline').addEventListener('change', (e) => {
+      const isOnline = e.target.checked;
+      const locationInput = document.getElementById('location');
+      const onlineLinkInput = document.getElementById('onlineLink');
+
+      if (isOnline) {
+        locationInput.disabled = true;
+        locationInput.value = '';
+        onlineLinkInput.classList.remove('hidden');
+      } else {
+        locationInput.disabled = false;
+        onlineLinkInput.classList.add('hidden');
+        onlineLinkInput.value = '';
+      }
+      updatePreview();
+    });
+
+    // 참석자 추가
+    document.getElementById('addParticipant').addEventListener('click', () => {
+      const emailInput = document.getElementById('participantEmail');
+      const email = emailInput.value.trim();
+      const errorSpan = document.getElementById('participantError');
+
+      if (!email) {
+        errorSpan.textContent = '이메일을 입력하세요.';
+        errorSpan.classList.remove('hidden');
+        return;
+      }
+
+      // 간단한 이메일 검증
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailRegex.test(email)) {
+        errorSpan.textContent = '올바른 이메일 주소를 입력하세요.';
+        errorSpan.classList.remove('hidden');
+        emailInput.classList.add('error');
+        return;
+      }
+
+      if (participants.includes(email)) {
+        errorSpan.textContent = '이미 추가된 참석자입니다.';
+        errorSpan.classList.remove('hidden');
+        return;
+      }
+
+      participants.push(email);
+      emailInput.value = '';
+      emailInput.classList.remove('error');
+      errorSpan.classList.add('hidden');
+      renderParticipants();
+      updatePreview();
+    });
+
+    // 참석자 렌더링
+    function renderParticipants() {
+      const container = document.getElementById('participantTags');
+      container.innerHTML = participants.map((email, index) => `
+        <div class="participant-tag">
+          <span>👤 ${email}</span>
+          <span class="remove" onclick="removeParticipant(${index})">×</span>
+        </div>
+      `).join('');
+    }
+
+    // 참석자 제거
+    function removeParticipant(index) {
+      participants.splice(index, 1);
+      renderParticipants();
+      updatePreview();
+    }
+
+    // 반복 설정
+    document.getElementById('repeat').addEventListener('change', (e) => {
+      const repeatEndGroup = document.getElementById('repeatEndGroup');
+      if (e.target.value !== 'none') {
+        repeatEndGroup.classList.remove('hidden');
+      } else {
+        repeatEndGroup.classList.add('hidden');
+      }
+    });
+
+    // 입력 필드 이벤트 리스너
+    document.querySelectorAll('input, textarea, select').forEach(el => {
+      el.addEventListener('input', updatePreview);
+      el.addEventListener('change', updatePreview);
+    });
+
+    document.getElementById('startTime').addEventListener('change', calculateDuration);
+    document.getElementById('endTime').addEventListener('change', calculateDuration);
+
+    // 폼 제출
+    document.getElementById('reservationForm').addEventListener('submit', (e) => {
+      e.preventDefault();
+
+      // 유효성 검사
+      const title = document.getElementById('meetingTitle').value.trim();
+      const date = document.getElementById('meetingDate').value;
+
+      if (!title) {
+        document.getElementById('titleError').textContent = '회의 제목을 입력하세요.';
+        document.getElementById('titleError').classList.remove('hidden');
+        document.getElementById('meetingTitle').classList.add('error');
+        document.getElementById('meetingTitle').focus();
+        return;
+      }
+
+      if (!date) {
+        document.getElementById('dateError').textContent = '날짜를 선택하세요.';
+        document.getElementById('dateError').classList.remove('hidden');
+        document.getElementById('meetingDate').classList.add('error');
+        return;
+      }
+
+      // 과거 날짜 검사
+      const selectedDate = new Date(date);
+      const todayDate = new Date(today);
+      if (selectedDate < todayDate) {
+        document.getElementById('dateError').textContent = '과거 날짜는 선택할 수 없습니다.';
+        document.getElementById('dateError').classList.remove('hidden');
+        document.getElementById('meetingDate').classList.add('error');
+        return;
+      }
+
+      if (!calculateDuration()) {
+        return;
+      }
+
+      if (participants.length === 0) {
+        document.getElementById('participantError').textContent = '최소 1명의 참석자를 추가하세요.';
+        document.getElementById('participantError').classList.remove('hidden');
+        document.getElementById('participantEmail').focus();
+        return;
+      }
+
+      // 회의 데이터 저장
+      const meetingData = {
+        id: generateId('meeting'),
+        title: title,
+        date: date,
+        time: document.getElementById('startTime').value,
+        endTime: document.getElementById('endTime').value,
+        location: document.getElementById('isOnline').checked ?
+          document.getElementById('onlineLink').value || '온라인 회의' :
+          document.getElementById('location').value,
+        participants: participants,
+        description: document.getElementById('description').value,
+        notifications: {
+          notify30: document.getElementById('notify30').checked,
+          notify60: document.getElementById('notify60').checked
+        },
+        repeat: document.getElementById('repeat').value,
+        repeatEnd: document.getElementById('repeatEnd').value,
+        calendar: {
+          google: document.getElementById('googleCalendar').checked,
+          outlook: document.getElementById('outlook').checked
+        },
+        status: 'scheduled',
+        createdAt: new Date().toISOString()
+      };
+
+      // LocalStorage에 임시 저장
+      sessionStorage.setItem('newMeeting', JSON.stringify(meetingData));
+
+      showToast('회의 정보가 저장되었습니다.', 'success');
+
+      // 템플릿 선택 화면으로 이동
+      setTimeout(() => {
+        navigateTo('04-템플릿선택.html');
+      }, 500);
+    });
+
+    // 임시 저장
+    document.getElementById('saveDraft').addEventListener('click', () => {
+      const meetingData = {
+        title: document.getElementById('meetingTitle').value,
+        date: document.getElementById('meetingDate').value,
+        time: document.getElementById('startTime').value,
+        endTime: document.getElementById('endTime').value,
+        location: document.getElementById('location').value,
+        participants: participants,
+        description: document.getElementById('description').value
+      };
+
+      sessionStorage.setItem('draftMeeting', JSON.stringify(meetingData));
+      showToast('회의 정보가 임시 저장되었습니다.', 'success');
+
+      setTimeout(() => {
+        navigateTo('02-대시보드.html');
+      }, 500);
+    });
+
+    // 초기 업데이트
+    calculateDuration();
+    updatePreview();
+  </script>
+</body>
+</html>
diff --git a/design-v1/uiux/prototype/04-템플릿선택.html b/design-v1/uiux/prototype/04-템플릿선택.html
new file mode 100644
index 0000000..66c4a65
--- /dev/null
+++ b/design-v1/uiux/prototype/04-템플릿선택.html
@@ -0,0 +1,537 @@
+<!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>
+    .template-container {
+      max-width: 1536px;
+      margin: 0 auto;
+      padding: var(--spacing-8);
+    }
+
+    .progress-bar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: var(--spacing-4);
+      margin-bottom: var(--spacing-8);
+    }
+
+    .progress-step {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .progress-circle {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background-color: var(--gray-300);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+    }
+
+    .progress-circle.active {
+      background-color: var(--primary-main);
+    }
+
+    .progress-circle.completed {
+      background-color: var(--success-main);
+    }
+
+    .progress-label {
+      font-weight: 500;
+      color: var(--gray-500);
+    }
+
+    .progress-label.active {
+      color: var(--gray-900);
+    }
+
+    .progress-arrow {
+      color: var(--gray-300);
+      font-size: 20px;
+    }
+
+    .template-layout {
+      display: grid;
+      grid-template-columns: 1fr 400px;
+      gap: var(--spacing-8);
+    }
+
+    .template-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--spacing-6);
+    }
+
+    .template-card {
+      background: white;
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+      cursor: pointer;
+      transition: all var(--transition-base);
+      border: 2px solid transparent;
+    }
+
+    .template-card:hover {
+      box-shadow: var(--shadow-md);
+      transform: translateY(-2px);
+    }
+
+    .template-card.selected {
+      border-color: var(--primary-main);
+      background-color: rgba(0, 217, 177, 0.05);
+    }
+
+    .template-header {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      margin-bottom: var(--spacing-3);
+    }
+
+    .template-icon {
+      font-size: 32px;
+    }
+
+    .template-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--gray-900);
+    }
+
+    .template-description {
+      color: var(--gray-600);
+      font-size: 0.875rem;
+      margin-bottom: var(--spacing-4);
+    }
+
+    .template-usage {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      color: var(--gray-500);
+      font-size: 0.75rem;
+    }
+
+    .template-sections {
+      margin-top: var(--spacing-4);
+      padding-top: var(--spacing-4);
+      border-top: 1px solid var(--gray-200);
+    }
+
+    .section-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2) 0;
+      font-size: 0.875rem;
+      color: var(--gray-600);
+    }
+
+    .section-required {
+      color: var(--error-main);
+      font-size: 0.75rem;
+    }
+
+    .preview-panel {
+      position: sticky;
+      top: var(--spacing-8);
+      height: fit-content;
+      background: white;
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .preview-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-4);
+    }
+
+    .preview-empty {
+      text-align: center;
+      padding: var(--spacing-8);
+      color: var(--gray-400);
+    }
+
+    .section-list {
+      margin-top: var(--spacing-4);
+    }
+
+    .section-drag-item {
+      background: var(--gray-50);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      cursor: move;
+    }
+
+    .drag-handle {
+      color: var(--gray-400);
+      cursor: grab;
+    }
+
+    .section-drag-item:active .drag-handle {
+      cursor: grabbing;
+    }
+
+    .section-name {
+      flex: 1;
+      font-weight: 500;
+    }
+
+    .section-actions {
+      display: flex;
+      gap: var(--spacing-2);
+    }
+
+    .icon-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--gray-500);
+      padding: var(--spacing-1);
+      font-size: 16px;
+    }
+
+    .icon-btn:hover {
+      color: var(--primary-main);
+    }
+
+    .action-buttons {
+      display: flex;
+      justify-content: space-between;
+      margin-top: var(--spacing-8);
+      padding-top: var(--spacing-6);
+      border-top: 1px solid var(--gray-200);
+    }
+
+    @media (max-width: 1023px) {
+      .template-layout {
+        grid-template-columns: 1fr;
+      }
+
+      .template-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .preview-panel {
+        position: static;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="template-container">
+    <!-- 진행 단계 표시 -->
+    <div class="progress-bar">
+      <div class="progress-step">
+        <div class="progress-circle completed">✓</div>
+        <span class="progress-label">회의 예약</span>
+      </div>
+      <span class="progress-arrow">→</span>
+      <div class="progress-step">
+        <div class="progress-circle active">2</div>
+        <span class="progress-label active">템플릿 선택</span>
+      </div>
+      <span class="progress-arrow">→</span>
+      <div class="progress-step">
+        <div class="progress-circle">3</div>
+        <span class="progress-label">회의 진행</span>
+      </div>
+    </div>
+
+    <h1>회의 템플릿 선택</h1>
+    <p style="color: var(--gray-500); margin-bottom: var(--spacing-8);">
+      회의 유형에 맞는 템플릿을 선택하거나 커스터마이징하세요
+    </p>
+
+    <div class="template-layout">
+      <!-- 템플릿 그리드 -->
+      <div>
+        <div class="template-grid" id="templateGrid"></div>
+      </div>
+
+      <!-- 미리보기 및 커스터마이징 -->
+      <div class="preview-panel">
+        <div class="preview-title">템플릿 미리보기</div>
+
+        <div id="previewContent" class="preview-empty">
+          템플릿을 선택하면<br>여기에 미리보기가 표시됩니다
+        </div>
+
+        <div id="customizePanel" class="hidden">
+          <div style="margin-top: var(--spacing-6); margin-bottom: var(--spacing-4);">
+            <strong>섹션 구성</strong>
+            <p style="font-size: 0.875rem; color: var(--gray-500); margin-top: var(--spacing-1);">
+              드래그하여 순서를 변경하거나 섹션을 추가/삭제할 수 있습니다
+            </p>
+          </div>
+
+          <div class="section-list" id="sectionList"></div>
+
+          <button type="button" class="btn btn-secondary btn-sm" style="width: 100%; margin-top: var(--spacing-4);" id="addSection">
+            + 섹션 추가
+          </button>
+
+          <button type="button" class="btn btn-text btn-sm" style="width: 100%; margin-top: var(--spacing-2);" id="saveTemplate">
+            ✓ 나만의 템플릿으로 저장
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button type="button" class="btn btn-text" onclick="navigateTo('03-회의예약.html')">
+        ← 뒤로
+      </button>
+      <div style="display: flex; gap: var(--spacing-3);">
+        <button type="button" class="btn btn-secondary" id="startBlank">
+          템플릿 없이 시작
+        </button>
+        <button type="button" class="btn btn-primary" id="selectTemplate" disabled>
+          선택 완료 →
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    let selectedTemplate = null;
+    let customSections = [];
+    let draggedItem = null;
+
+    // 템플릿 아이콘 매핑
+    const templateIcons = {
+      general: '📋',
+      scrum: '🔄',
+      kickoff: '🚀',
+      weekly: '📅'
+    };
+
+    // 템플릿 렌더링
+    function renderTemplates() {
+      const templates = getAllTemplates();
+      const grid = document.getElementById('templateGrid');
+
+      grid.innerHTML = templates.map(template => `
+        <div class="template-card" data-id="${template.id}" onclick="selectTemplate('${template.id}')">
+          <div class="template-header">
+            <span class="template-icon">${templateIcons[template.id] || '📄'}</span>
+            <div class="template-title">${template.name}</div>
+          </div>
+          <div class="template-description">${template.description}</div>
+          <div class="template-usage">
+            <span>👥</span>
+            <span>자주 사용됨</span>
+          </div>
+          <div class="template-sections">
+            ${template.sections.map(section => `
+              <div class="section-item">
+                <span>•</span>
+                <span>${section.name}</span>
+                ${section.required ? '<span class="section-required">*</span>' : ''}
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      `).join('');
+    }
+
+    // 템플릿 선택
+    function selectTemplate(templateId) {
+      selectedTemplate = templateId;
+      const template = getTemplate(templateId);
+      customSections = JSON.parse(JSON.stringify(template.sections));
+
+      // 선택 표시
+      document.querySelectorAll('.template-card').forEach(card => {
+        card.classList.remove('selected');
+      });
+      document.querySelector(`[data-id="${templateId}"]`).classList.add('selected');
+
+      // 미리보기 업데이트
+      updatePreview();
+
+      // 선택 완료 버튼 활성화
+      document.getElementById('selectTemplate').disabled = false;
+    }
+
+    // 미리보기 업데이트
+    function updatePreview() {
+      const previewContent = document.getElementById('previewContent');
+      const customizePanel = document.getElementById('customizePanel');
+
+      if (selectedTemplate) {
+        previewContent.innerHTML = '';
+        customizePanel.classList.remove('hidden');
+        renderSections();
+      } else {
+        previewContent.className = 'preview-empty';
+        previewContent.innerHTML = '템플릿을 선택하면<br>여기에 미리보기가 표시됩니다';
+        customizePanel.classList.add('hidden');
+      }
+    }
+
+    // 섹션 렌더링
+    function renderSections() {
+      const sectionList = document.getElementById('sectionList');
+
+      sectionList.innerHTML = customSections.map((section, index) => `
+        <div class="section-drag-item" draggable="true" data-index="${index}">
+          <span class="drag-handle">⋮⋮</span>
+          <span class="section-name">
+            ${section.name}
+            ${section.required ? '<span class="section-required">*</span>' : ''}
+          </span>
+          <div class="section-actions">
+            <button class="icon-btn" onclick="editSection(${index})" title="수정">✏️</button>
+            ${!section.required ? `<button class="icon-btn" onclick="deleteSection(${index})" title="삭제">🗑️</button>` : ''}
+          </div>
+        </div>
+      `).join('');
+
+      // 드래그 이벤트 추가
+      document.querySelectorAll('.section-drag-item').forEach(item => {
+        item.addEventListener('dragstart', handleDragStart);
+        item.addEventListener('dragover', handleDragOver);
+        item.addEventListener('drop', handleDrop);
+        item.addEventListener('dragend', handleDragEnd);
+      });
+    }
+
+    // 드래그 앤 드롭 핸들러
+    function handleDragStart(e) {
+      draggedItem = parseInt(e.target.dataset.index);
+      e.target.style.opacity = '0.5';
+    }
+
+    function handleDragOver(e) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+    }
+
+    function handleDrop(e) {
+      e.preventDefault();
+      const targetIndex = parseInt(e.target.closest('.section-drag-item').dataset.index);
+
+      if (draggedItem !== targetIndex) {
+        const draggedSection = customSections[draggedItem];
+        customSections.splice(draggedItem, 1);
+        customSections.splice(targetIndex, 0, draggedSection);
+        renderSections();
+      }
+    }
+
+    function handleDragEnd(e) {
+      e.target.style.opacity = '1';
+      draggedItem = null;
+    }
+
+    // 섹션 추가
+    document.getElementById('addSection').addEventListener('click', () => {
+      const sectionName = prompt('섹션 이름을 입력하세요:');
+      if (sectionName && sectionName.trim()) {
+        customSections.push({
+          id: generateId('section'),
+          name: sectionName.trim(),
+          required: false
+        });
+        renderSections();
+        showToast('섹션이 추가되었습니다.', 'success');
+      }
+    });
+
+    // 섹션 수정
+    function editSection(index) {
+      const section = customSections[index];
+      const newName = prompt('섹션 이름 수정:', section.name);
+      if (newName && newName.trim()) {
+        customSections[index].name = newName.trim();
+        renderSections();
+        showToast('섹션이 수정되었습니다.', 'success');
+      }
+    }
+
+    // 섹션 삭제
+    function deleteSection(index) {
+      if (confirm('이 섹션을 삭제하시겠습니까?')) {
+        customSections.splice(index, 1);
+        renderSections();
+        showToast('섹션이 삭제되었습니다.', 'info');
+      }
+    }
+
+    // 나만의 템플릿 저장
+    document.getElementById('saveTemplate').addEventListener('click', () => {
+      const templateName = prompt('템플릿 이름을 입력하세요:');
+      if (templateName && templateName.trim()) {
+        const customTemplate = {
+          id: generateId('template'),
+          name: templateName.trim(),
+          description: '나만의 템플릿',
+          sections: customSections,
+          createdBy: getCurrentUser().id,
+          createdAt: new Date().toISOString()
+        };
+
+        // 여기서는 시뮬레이션만 (실제로는 서버에 저장)
+        showToast('템플릿이 저장되었습니다.', 'success');
+      }
+    });
+
+    // 템플릿 없이 시작
+    document.getElementById('startBlank').addEventListener('click', () => {
+      if (confirm('빈 회의록으로 시작하시겠습니까?')) {
+        sessionStorage.setItem('selectedTemplate', JSON.stringify({
+          id: 'blank',
+          name: '빈 회의록',
+          sections: []
+        }));
+        navigateTo('05-회의진행.html');
+      }
+    });
+
+    // 선택 완료
+    document.getElementById('selectTemplate').addEventListener('click', () => {
+      if (!selectedTemplate) {
+        showToast('템플릿을 선택하세요.', 'warning');
+        return;
+      }
+
+      const template = getTemplate(selectedTemplate);
+      const finalTemplate = {
+        ...template,
+        sections: customSections
+      };
+
+      sessionStorage.setItem('selectedTemplate', JSON.stringify(finalTemplate));
+      showToast('템플릿이 선택되었습니다.', 'success');
+
+      setTimeout(() => {
+        navigateTo('05-회의진행.html');
+      }, 500);
+    });
+
+    // 초기화
+    renderTemplates();
+  </script>
+</body>
+</html>
diff --git a/design-v1/uiux/prototype/05-회의진행.html b/design-v1/uiux/prototype/05-회의진행.html
new file mode 100644
index 0000000..4d7708e
--- /dev/null
+++ b/design-v1/uiux/prototype/05-회의진행.html
@@ -0,0 +1,858 @@
+<!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;
+      overflow: hidden;
+    }
+
+    .meeting-editor {
+      display: grid;
+      grid-template-columns: 250px 1fr 350px;
+      height: 100vh;
+    }
+
+    /* 좌측 패널 */
+    .left-panel {
+      background: white;
+      border-right: 1px solid var(--gray-200);
+      padding: var(--spacing-6);
+      overflow-y: auto;
+    }
+
+    .meeting-info {
+      margin-bottom: var(--spacing-6);
+      padding-bottom: var(--spacing-6);
+      border-bottom: 1px solid var(--gray-200);
+    }
+
+    .meeting-title-small {
+      font-weight: 600;
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .meeting-time {
+      font-size: 0.875rem;
+      color: var(--gray-500);
+    }
+
+    .timer {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-3);
+      background: var(--gray-50);
+      border-radius: var(--radius-md);
+      margin-top: var(--spacing-3);
+    }
+
+    .timer-icon {
+      font-size: 20px;
+    }
+
+    .timer-text {
+      font-size: 1.125rem;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+      color: var(--primary-main);
+    }
+
+    .recording-status {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      margin-top: var(--spacing-2);
+      font-size: 0.875rem;
+    }
+
+    .recording-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--error-main);
+      animation: pulse 2s infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.5; }
+    }
+
+    .participants-list {
+      margin-bottom: var(--spacing-6);
+    }
+
+    .section-title {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--gray-700);
+      margin-bottom: var(--spacing-3);
+    }
+
+    .participant-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-2) 0;
+    }
+
+    .participant-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: var(--gray-200);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+    }
+
+    .participant-avatar.online {
+      border: 2px solid var(--success-main);
+    }
+
+    .participant-name {
+      flex: 1;
+      font-size: 0.875rem;
+      color: var(--gray-700);
+    }
+
+    .participant-status {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--success-main);
+    }
+
+    /* 중앙 에디터 */
+    .editor-panel {
+      display: flex;
+      flex-direction: column;
+      background: white;
+      overflow: hidden;
+    }
+
+    .editor-toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-1);
+      padding: var(--spacing-3) var(--spacing-4);
+      border-bottom: 1px solid var(--gray-200);
+      background: var(--gray-50);
+      flex-wrap: wrap;
+    }
+
+    .toolbar-group {
+      display: flex;
+      gap: var(--spacing-1);
+      padding-right: var(--spacing-3);
+      border-right: 1px solid var(--gray-300);
+    }
+
+    .toolbar-group:last-child {
+      border-right: none;
+    }
+
+    .toolbar-btn {
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: transparent;
+      border-radius: var(--radius-md);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--gray-600);
+      font-size: 16px;
+      transition: all var(--transition-fast);
+    }
+
+    .toolbar-btn:hover {
+      background: white;
+      color: var(--primary-main);
+    }
+
+    .toolbar-btn.active {
+      background: var(--primary-main);
+      color: white;
+    }
+
+    .editor-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--spacing-8) var(--spacing-6);
+    }
+
+    .section-block {
+      margin-bottom: var(--spacing-8);
+    }
+
+    .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(--gray-200);
+    }
+
+    .section-header h2 {
+      font-size: 1.5rem;
+      color: var(--gray-900);
+      margin: 0;
+    }
+
+    .section-verified {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      font-size: 0.875rem;
+      color: var(--gray-600);
+    }
+
+    .section-verified input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+
+    .section-verified input[type="checkbox"]:checked {
+      accent-color: var(--success-main);
+    }
+
+    .section-body {
+      min-height: 150px;
+      padding: var(--spacing-4);
+      border: 1px solid var(--gray-200);
+      border-radius: var(--radius-md);
+      font-size: 1rem;
+      line-height: 1.75;
+      outline: none;
+      transition: all var(--transition-fast);
+    }
+
+    .section-body:focus {
+      border-color: var(--primary-main);
+      box-shadow: 0 0 0 3px rgba(0, 217, 177, 0.1);
+    }
+
+    .section-body.verified {
+      background-color: rgba(16, 185, 129, 0.05);
+      border-color: var(--success-main);
+    }
+
+    .ai-suggestion {
+      background: var(--gray-50);
+      border: 1px dashed var(--primary-main);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      margin-top: var(--spacing-4);
+    }
+
+    .ai-suggestion-header {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      margin-bottom: var(--spacing-3);
+      font-weight: 600;
+      color: var(--primary-main);
+    }
+
+    .ai-suggestion-content {
+      color: var(--gray-700);
+      margin-bottom: var(--spacing-3);
+    }
+
+    .ai-suggestion-actions {
+      display: flex;
+      gap: var(--spacing-2);
+    }
+
+    .term-highlight {
+      color: var(--primary-main);
+      border-bottom: 2px dotted var(--primary-main);
+      cursor: pointer;
+      position: relative;
+    }
+
+    .term-highlight:hover {
+      background-color: rgba(0, 217, 177, 0.1);
+    }
+
+    /* 우측 패널 */
+    .right-panel {
+      background: white;
+      border-left: 1px solid var(--gray-200);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .panel-tabs {
+      display: flex;
+      border-bottom: 1px solid var(--gray-200);
+    }
+
+    .panel-tab {
+      flex: 1;
+      padding: var(--spacing-3);
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--gray-600);
+      transition: all var(--transition-fast);
+      border-bottom: 2px solid transparent;
+    }
+
+    .panel-tab:hover {
+      background: var(--gray-50);
+    }
+
+    .panel-tab.active {
+      color: var(--primary-main);
+      border-bottom-color: var(--primary-main);
+    }
+
+    .panel-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--spacing-4);
+    }
+
+    .ai-suggestion-card {
+      background: var(--gray-50);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-3);
+    }
+
+    .ai-suggestion-title {
+      font-weight: 600;
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .ai-suggestion-text {
+      color: var(--gray-700);
+      font-size: 0.875rem;
+      line-height: 1.6;
+      margin-bottom: var(--spacing-3);
+    }
+
+    .ai-actions {
+      display: flex;
+      gap: var(--spacing-2);
+    }
+
+    .term-card {
+      background: var(--gray-50);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-3);
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+
+    .term-card:hover {
+      background: var(--gray-100);
+    }
+
+    .term-name {
+      font-weight: 600;
+      color: var(--primary-main);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .term-definition {
+      color: var(--gray-700);
+      font-size: 0.875rem;
+      line-height: 1.6;
+    }
+
+    .term-source {
+      color: var(--gray-500);
+      font-size: 0.75rem;
+      margin-top: var(--spacing-2);
+    }
+
+    /* 하단 바 */
+    .bottom-bar {
+      position: fixed;
+      bottom: 0;
+      left: 250px;
+      right: 350px;
+      background: white;
+      border-top: 1px solid var(--gray-200);
+      padding: var(--spacing-4) var(--spacing-6);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      z-index: 100;
+    }
+
+    .status-indicator {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      color: var(--gray-600);
+      font-size: 0.875rem;
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--success-main);
+    }
+
+    .voice-status {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      color: var(--gray-600);
+    }
+
+    .voice-wave {
+      display: flex;
+      gap: 2px;
+      align-items: center;
+    }
+
+    .voice-bar {
+      width: 3px;
+      height: 16px;
+      background: var(--primary-main);
+      border-radius: 2px;
+      animation: voiceWave 1s infinite;
+    }
+
+    .voice-bar:nth-child(2) { animation-delay: 0.1s; }
+    .voice-bar:nth-child(3) { animation-delay: 0.2s; }
+    .voice-bar:nth-child(4) { animation-delay: 0.3s; }
+
+    @keyframes voiceWave {
+      0%, 100% { height: 8px; }
+      50% { height: 16px; }
+    }
+
+    .bottom-actions {
+      display: flex;
+      gap: var(--spacing-3);
+    }
+
+    @media (max-width: 1023px) {
+      .meeting-editor {
+        grid-template-columns: 1fr;
+      }
+
+      .left-panel,
+      .right-panel {
+        display: none;
+      }
+
+      .bottom-bar {
+        left: 0;
+        right: 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="meeting-editor">
+    <!-- 좌측 패널: 회의 정보 & 참석자 -->
+    <div class="left-panel">
+      <div class="meeting-info">
+        <div class="meeting-title-small" id="meetingTitle">2025년 1분기 전략 회의</div>
+        <div class="meeting-time" id="meetingTime">2025년 10월 20일 14:00</div>
+
+        <div class="timer">
+          <span class="timer-icon">⏱️</span>
+          <span class="timer-text" id="timer">00:00:00</span>
+        </div>
+
+        <div class="recording-status">
+          <span class="recording-dot"></span>
+          <span>녹음 중</span>
+        </div>
+      </div>
+
+      <div class="participants-list">
+        <div class="section-title">참석자 (3명)</div>
+        <div id="participantsList"></div>
+      </div>
+
+      <div>
+        <div class="section-title">타임라인</div>
+        <div id="timeline" style="font-size: 0.75rem; color: var(--gray-500);"></div>
+      </div>
+    </div>
+
+    <!-- 중앙 패널: 에디터 -->
+    <div class="editor-panel">
+      <!-- 툴바 -->
+      <div class="editor-toolbar">
+        <div class="toolbar-group">
+          <button class="toolbar-btn" title="굵게" onclick="execCommand('bold')"><strong>B</strong></button>
+          <button class="toolbar-btn" title="기울임" onclick="execCommand('italic')"><em>I</em></button>
+          <button class="toolbar-btn" title="밑줄" onclick="execCommand('underline')"><u>U</u></button>
+          <button class="toolbar-btn" title="취소선" onclick="execCommand('strikeThrough')"><s>S</s></button>
+        </div>
+        <div class="toolbar-group">
+          <button class="toolbar-btn" title="번호 목록" onclick="execCommand('insertOrderedList')">1.</button>
+          <button class="toolbar-btn" title="글머리 기호" onclick="execCommand('insertUnorderedList')">•</button>
+        </div>
+        <div class="toolbar-group">
+          <button class="toolbar-btn" title="링크" onclick="insertLink()">🔗</button>
+          <button class="toolbar-btn" title="실행 취소" onclick="document.execCommand('undo')">↶</button>
+          <button class="toolbar-btn" title="다시 실행" onclick="document.execCommand('redo')">↷</button>
+        </div>
+      </div>
+
+      <!-- 에디터 콘텐츠 -->
+      <div class="editor-content" id="editorContent"></div>
+
+      <!-- 하단 바 -->
+      <div class="bottom-bar">
+        <div class="status-indicator">
+          <span class="status-dot"></span>
+          <span id="saveStatus">저장됨</span>
+        </div>
+
+        <div class="voice-status">
+          <div class="voice-wave">
+            <div class="voice-bar"></div>
+            <div class="voice-bar"></div>
+            <div class="voice-bar"></div>
+            <div class="voice-bar"></div>
+          </div>
+          <span>음성 인식 중...</span>
+        </div>
+
+        <div class="bottom-actions">
+          <button class="btn btn-secondary btn-sm" id="pauseRecording">
+            ⏸️ 일시정지
+          </button>
+          <button class="btn btn-primary" id="endMeeting">
+            회의 종료
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 우측 패널: AI 제안 & 용어 설명 -->
+    <div class="right-panel">
+      <div class="panel-tabs">
+        <button class="panel-tab active" data-tab="ai" onclick="switchTab('ai')">AI 제안</button>
+        <button class="panel-tab" data-tab="terms" onclick="switchTab('terms')">용어 설명</button>
+        <button class="panel-tab" data-tab="comments" onclick="switchTab('comments')">댓글</button>
+      </div>
+
+      <div class="panel-content">
+        <!-- AI 제안 탭 -->
+        <div id="aiTab" class="tab-pane">
+          <p style="color: var(--gray-500); font-size: 0.875rem; margin-bottom: var(--spacing-4);">
+            AI가 자동으로 회의록을 작성하고 제안합니다
+          </p>
+          <div id="aiSuggestions"></div>
+        </div>
+
+        <!-- 용어 설명 탭 -->
+        <div id="termsTab" class="tab-pane hidden">
+          <p style="color: var(--gray-500); font-size: 0.875rem; margin-bottom: var(--spacing-4);">
+            감지된 전문용어와 설명입니다
+          </p>
+          <div id="termsList"></div>
+        </div>
+
+        <!-- 댓글 탭 -->
+        <div id="commentsTab" class="tab-pane hidden">
+          <p style="color: var(--gray-500); font-size: 0.875rem; margin-bottom: var(--spacing-4);">
+            참석자의 댓글과 제안사항입니다
+          </p>
+          <div style="text-align: center; padding: var(--spacing-8); color: var(--gray-400);">
+            아직 댓글이 없습니다
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    let elapsedSeconds = 0;
+    let timerInterval;
+    let saveTimeout;
+    let currentSuggestionIndex = 0;
+
+    // 회의 정보 로드
+    function loadMeetingInfo() {
+      const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
+      const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
+
+      if (meetingData.title) {
+        document.getElementById('meetingTitle').textContent = meetingData.title;
+      }
+
+      if (meetingData.date && meetingData.time) {
+        const dateObj = new Date(meetingData.date);
+        const dateStr = `${dateObj.getFullYear()}년 ${dateObj.getMonth() + 1}월 ${dateObj.getDate()}일`;
+        document.getElementById('meetingTime').textContent = `${dateStr} ${meetingData.time}`;
+      }
+
+      // 참석자 렌더링
+      if (meetingData.participants) {
+        const users = getFromStorage(STORAGE_KEYS.USERS) || [];
+        const participantsList = document.getElementById('participantsList');
+        participantsList.innerHTML = meetingData.participants.map(email => {
+          const user = users.find(u => u.email === email) || { name: email, avatar: '👤' };
+          return `
+            <div class="participant-item">
+              <div class="participant-avatar online">${user.avatar}</div>
+              <div class="participant-name">${user.name}</div>
+              <div class="participant-status"></div>
+            </div>
+          `;
+        }).join('');
+      }
+
+      // 템플릿 섹션 렌더링
+      if (template.sections) {
+        const editorContent = document.getElementById('editorContent');
+        editorContent.innerHTML = template.sections.map(section => `
+          <div class="section-block" data-section="${section.id}">
+            <div class="section-header">
+              <h2>${section.name}${section.required ? '<span style="color: var(--error-main);">*</span>' : ''}</h2>
+              <div class="section-verified">
+                <input type="checkbox" id="verify-${section.id}">
+                <label for="verify-${section.id}">검증 완료</label>
+              </div>
+            </div>
+            <div class="section-body" contenteditable="true" data-section-id="${section.id}">
+
+            </div>
+          </div>
+        `).join('');
+
+        // 섹션 검증 이벤트
+        document.querySelectorAll('[id^="verify-"]').forEach(checkbox => {
+          checkbox.addEventListener('change', (e) => {
+            const sectionId = e.target.id.replace('verify-', '');
+            const sectionBody = document.querySelector(`[data-section-id="${sectionId}"]`);
+            if (e.target.checked) {
+              sectionBody.classList.add('verified');
+              showToast('섹션이 검증되었습니다.', 'success');
+            } else {
+              sectionBody.classList.remove('verified');
+            }
+          });
+        });
+
+        // 자동 저장
+        document.querySelectorAll('.section-body').forEach(section => {
+          section.addEventListener('input', () => {
+            clearTimeout(saveTimeout);
+            document.getElementById('saveStatus').textContent = '저장 중...';
+
+            saveTimeout = setTimeout(() => {
+              document.getElementById('saveStatus').textContent = '저장됨';
+              // 실제로는 서버에 저장
+            }, 500);
+          });
+        });
+      }
+    }
+
+    // 타이머 시작
+    function startTimer() {
+      timerInterval = setInterval(() => {
+        elapsedSeconds++;
+        const hours = Math.floor(elapsedSeconds / 3600);
+        const minutes = Math.floor((elapsedSeconds % 3600) / 60);
+        const seconds = elapsedSeconds % 60;
+
+        document.getElementById('timer').textContent =
+          `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+
+        // 5분마다 타임라인 추가
+        if (elapsedSeconds % 300 === 0) {
+          addTimelineEvent(`${hours}시간 ${minutes}분 경과`);
+        }
+      }, 1000);
+    }
+
+    // 타임라인 이벤트 추가
+    function addTimelineEvent(text) {
+      const timeline = document.getElementById('timeline');
+      const time = new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' });
+      const event = document.createElement('div');
+      event.style.marginBottom = 'var(--spacing-2)';
+      event.innerHTML = `<strong>${time}</strong> ${text}`;
+      timeline.appendChild(event);
+    }
+
+    // AI 제안 시뮬레이션
+    function generateAISuggestions() {
+      const suggestions = [
+        {
+          title: '논의 내용 요약',
+          text: '1분기 매출 목표를 20% 상향 조정하고, 마케팅 예산을 15% 증액하기로 논의했습니다.'
+        },
+        {
+          title: '결정 사항',
+          text: '신규 프로젝트 팀을 구성하고, 김민준님이 PM을 맡기로 결정했습니다.'
+        },
+        {
+          title: 'Todo 추출',
+          text: '• 마케팅 예산안 작성 (박서연, 10/25)\n• 경쟁사 분석 보고서 (이준호, 10/22)'
+        }
+      ];
+
+      const container = document.getElementById('aiSuggestions');
+
+      function showNextSuggestion() {
+        if (currentSuggestionIndex < suggestions.length) {
+          const suggestion = suggestions[currentSuggestionIndex];
+          const card = document.createElement('div');
+          card.className = 'ai-suggestion-card';
+          card.innerHTML = `
+            <div class="ai-suggestion-title">✨ ${suggestion.title}</div>
+            <div class="ai-suggestion-text">${suggestion.text}</div>
+            <div class="ai-actions">
+              <button class="btn btn-primary btn-sm" onclick="applySuggestion(this, '${suggestion.title}')">적용</button>
+              <button class="btn btn-text btn-sm" onclick="dismissSuggestion(this)">무시</button>
+            </div>
+          `;
+          container.appendChild(card);
+          currentSuggestionIndex++;
+
+          // 5초 후 다음 제안
+          setTimeout(showNextSuggestion, 5000);
+        }
+      }
+
+      // 3초 후 첫 제안 시작
+      setTimeout(showNextSuggestion, 3000);
+    }
+
+    // 제안 적용
+    function applySuggestion(button, title) {
+      const card = button.closest('.ai-suggestion-card');
+      const text = card.querySelector('.ai-suggestion-text').textContent;
+
+      // 첫 번째 섹션에 텍스트 추가 (시뮬레이션)
+      const sections = document.querySelectorAll('.section-body');
+      if (sections.length > 0) {
+        const firstSection = sections[0];
+        if (!firstSection.textContent.trim()) {
+          firstSection.textContent = text;
+        } else {
+          firstSection.innerHTML += `<br><br>${text}`;
+        }
+      }
+
+      card.remove();
+      showToast('AI 제안이 적용되었습니다.', 'success');
+    }
+
+    // 제안 무시
+    function dismissSuggestion(button) {
+      button.closest('.ai-suggestion-card').remove();
+    }
+
+    // 용어 설명 렌더링
+    function renderTerms() {
+      const terms = [
+        { name: 'ROI', definition: '투자 대비 수익률 (Return On Investment)', source: '과거 회의록: 2024년 4분기 전략 회의' },
+        { name: 'KPI', definition: '핵심 성과 지표 (Key Performance Indicator)', source: '사내 용어집' },
+        { name: 'MQL', definition: '마케팅 적격 리드 (Marketing Qualified Lead)', source: '마케팅 팀 문서' }
+      ];
+
+      const termsList = document.getElementById('termsList');
+      termsList.innerHTML = terms.map(term => `
+        <div class="term-card">
+          <div class="term-name">${term.name}</div>
+          <div class="term-definition">${term.definition}</div>
+          <div class="term-source">출처: ${term.source}</div>
+        </div>
+      `).join('');
+    }
+
+    // 탭 전환
+    function switchTab(tabName) {
+      document.querySelectorAll('.panel-tab').forEach(tab => {
+        tab.classList.remove('active');
+      });
+      document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
+
+      document.querySelectorAll('.tab-pane').forEach(pane => {
+        pane.classList.add('hidden');
+      });
+      document.getElementById(`${tabName}Tab`).classList.remove('hidden');
+    }
+
+    // 툴바 명령
+    function execCommand(command) {
+      document.execCommand(command, false, null);
+    }
+
+    function insertLink() {
+      const url = prompt('링크 URL을 입력하세요:');
+      if (url) {
+        document.execCommand('createLink', false, url);
+      }
+    }
+
+    // 녹음 일시정지
+    document.getElementById('pauseRecording').addEventListener('click', function() {
+      if (this.textContent.includes('일시정지')) {
+        clearInterval(timerInterval);
+        this.innerHTML = '▶️ 계속';
+        document.querySelector('.recording-dot').style.display = 'none';
+        document.querySelector('.voice-status').style.display = 'none';
+        showToast('녹음이 일시정지되었습니다.', 'info');
+      } else {
+        startTimer();
+        this.innerHTML = '⏸️ 일시정지';
+        document.querySelector('.recording-dot').style.display = 'block';
+        document.querySelector('.voice-status').style.display = 'flex';
+        showToast('녹음이 재개되었습니다.', 'success');
+      }
+    });
+
+    // 회의 종료
+    document.getElementById('endMeeting').addEventListener('click', () => {
+      if (confirm('회의를 종료하시겠습니까?')) {
+        clearInterval(timerInterval);
+
+        // 회의록 데이터 저장
+        const sections = {};
+        document.querySelectorAll('.section-body').forEach(section => {
+          const id = section.dataset.sectionId;
+          sections[id] = section.innerHTML;
+        });
+
+        sessionStorage.setItem('meetingContent', JSON.stringify(sections));
+        sessionStorage.setItem('meetingDuration', elapsedSeconds);
+
+        navigateTo('06-검증완료.html');
+      }
+    });
+
+    // 초기화
+    loadMeetingInfo();
+    startTimer();
+    generateAISuggestions();
+    renderTerms();
+    addTimelineEvent('회의 시작');
+  </script>
+</body>
+</html>
diff --git a/design-v1/uiux/prototype/06-검증완료.html b/design-v1/uiux/prototype/06-검증완료.html
new file mode 100644
index 0000000..87b242f
--- /dev/null
+++ b/design-v1/uiux/prototype/06-검증완료.html
@@ -0,0 +1,499 @@
+<!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>
+    .verification-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--spacing-8);
+    }
+
+    .verification-header {
+      text-align: center;
+      margin-bottom: var(--spacing-8);
+    }
+
+    .progress-circle-large {
+      width: 120px;
+      height: 120px;
+      margin: 0 auto var(--spacing-4);
+      position: relative;
+    }
+
+    .progress-ring {
+      transform: rotate(-90deg);
+    }
+
+    .progress-ring-circle {
+      transition: stroke-dashoffset 0.5s;
+      stroke: var(--primary-main);
+      stroke-width: 8;
+      fill: transparent;
+    }
+
+    .progress-ring-bg {
+      stroke: var(--gray-200);
+      stroke-width: 8;
+      fill: transparent;
+    }
+
+    .progress-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--primary-main);
+    }
+
+    .verification-layout {
+      display: grid;
+      grid-template-columns: 1fr 400px;
+      gap: var(--spacing-8);
+    }
+
+    .section-list-panel {
+      background: white;
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .verification-item {
+      padding: var(--spacing-4);
+      margin-bottom: var(--spacing-3);
+      border-radius: var(--radius-md);
+      border: 1px solid var(--gray-200);
+      transition: all var(--transition-fast);
+    }
+
+    .verification-item:hover {
+      box-shadow: var(--shadow-sm);
+    }
+
+    .verification-item.verified {
+      background-color: rgba(16, 185, 129, 0.05);
+      border-color: var(--success-main);
+    }
+
+    .verification-item.pending {
+      background-color: rgba(245, 158, 11, 0.05);
+      border-color: var(--warning-main);
+    }
+
+    .verification-header-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-2);
+    }
+
+    .section-name-verify {
+      font-weight: 600;
+      color: var(--gray-900);
+    }
+
+    .verification-status {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      padding: var(--spacing-1) var(--spacing-3);
+      border-radius: var(--radius-full);
+      font-size: 0.75rem;
+      font-weight: 500;
+    }
+
+    .verification-status.verified {
+      background-color: var(--success-light);
+      color: var(--success-dark);
+    }
+
+    .verification-status.pending {
+      background-color: var(--warning-light);
+      color: var(--warning-dark);
+    }
+
+    .verifier-info {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      margin-top: var(--spacing-2);
+      font-size: 0.875rem;
+      color: var(--gray-600);
+    }
+
+    .verifier-avatar {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: var(--gray-200);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+    }
+
+    .verify-btn {
+      margin-top: var(--spacing-3);
+    }
+
+    .lock-toggle {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+      margin-top: var(--spacing-2);
+      font-size: 0.875rem;
+      color: var(--gray-600);
+    }
+
+    .stats-panel {
+      background: white;
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+      position: sticky;
+      top: var(--spacing-8);
+    }
+
+    .stats-item {
+      padding: var(--spacing-4);
+      background: var(--gray-50);
+      border-radius: var(--radius-md);
+      margin-bottom: var(--spacing-3);
+    }
+
+    .stats-label {
+      font-size: 0.875rem;
+      color: var(--gray-500);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .stats-value {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--gray-900);
+    }
+
+    .participant-progress {
+      margin-top: var(--spacing-6);
+    }
+
+    .participant-progress-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      margin-bottom: var(--spacing-3);
+    }
+
+    .participant-avatar-small {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: var(--gray-200);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+    }
+
+    .progress-info {
+      flex: 1;
+    }
+
+    .progress-name {
+      font-weight: 500;
+      font-size: 0.875rem;
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .progress-bar-small {
+      height: 6px;
+      background: var(--gray-200);
+      border-radius: 3px;
+      overflow: hidden;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: var(--primary-main);
+      transition: width 0.3s;
+    }
+
+    .progress-percentage {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--primary-main);
+    }
+
+    .action-buttons {
+      display: flex;
+      justify-content: space-between;
+      margin-top: var(--spacing-8);
+      padding-top: var(--spacing-6);
+      border-top: 1px solid var(--gray-200);
+    }
+
+    @media (max-width: 1023px) {
+      .verification-layout {
+        grid-template-columns: 1fr;
+      }
+
+      .stats-panel {
+        position: static;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="verification-container">
+    <div class="verification-header">
+      <div class="progress-circle-large">
+        <svg class="progress-ring" width="120" height="120">
+          <circle class="progress-ring-bg" cx="60" cy="60" r="52"></circle>
+          <circle class="progress-ring-circle" cx="60" cy="60" r="52"
+            stroke-dasharray="326.73" stroke-dashoffset="0" id="progressCircle"></circle>
+        </svg>
+        <div class="progress-text" id="progressText">0%</div>
+      </div>
+      <h1>섹션 검증</h1>
+      <p style="color: var(--gray-500);">
+        각 섹션을 확인하고 검증을 완료하세요
+      </p>
+    </div>
+
+    <div class="verification-layout">
+      <!-- 섹션 리스트 -->
+      <div class="section-list-panel">
+        <h3 style="margin-bottom: var(--spacing-4);">검증 항목</h3>
+        <div id="verificationList"></div>
+      </div>
+
+      <!-- 통계 패널 -->
+      <div class="stats-panel">
+        <h3 style="margin-bottom: var(--spacing-4);">검증 현황</h3>
+
+        <div class="stats-item">
+          <div class="stats-label">전체 진행률</div>
+          <div class="stats-value" id="totalProgress">0%</div>
+        </div>
+
+        <div class="stats-item">
+          <div class="stats-label">검증 완료</div>
+          <div class="stats-value">
+            <span id="verifiedCount">0</span> / <span id="totalCount">0</span> 섹션
+          </div>
+        </div>
+
+        <div class="stats-item">
+          <div class="stats-label">잠금 섹션</div>
+          <div class="stats-value" id="lockedCount">0</div>
+        </div>
+
+        <div class="participant-progress">
+          <div class="stats-label" style="margin-bottom: var(--spacing-3);">참석자별 진행률</div>
+          <div id="participantProgress"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button type="button" class="btn btn-text" onclick="navigateTo('05-회의진행.html')">
+        ← 회의록으로 돌아가기
+      </button>
+      <button type="button" class="btn btn-primary" id="completeVerification" disabled>
+        검증 완료 및 회의 종료 →
+      </button>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    let sections = [];
+    let verifiedSections = new Set();
+
+    // 섹션 데이터 로드
+    function loadSections() {
+      const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
+
+      if (template.sections) {
+        sections = template.sections.map(section => ({
+          ...section,
+          verified: false,
+          locked: false,
+          verifier: null,
+          verifiedAt: null
+        }));
+
+        renderVerificationList();
+        renderParticipantProgress();
+        updateStats();
+      }
+    }
+
+    // 검증 리스트 렌더링
+    function renderVerificationList() {
+      const list = document.getElementById('verificationList');
+      const currentUser = getCurrentUser();
+
+      list.innerHTML = sections.map((section, index) => `
+        <div class="verification-item ${section.verified ? 'verified' : 'pending'}" id="section-${index}">
+          <div class="verification-header-item">
+            <div class="section-name-verify">
+              ${section.name}
+              ${section.required ? '<span style="color: var(--error-main);">*</span>' : ''}
+            </div>
+            <div class="verification-status ${section.verified ? 'verified' : 'pending'}">
+              ${section.verified ? '✓ 검증 완료' : '⏳ 검증 대기'}
+            </div>
+          </div>
+
+          ${section.verified && section.verifier ? `
+            <div class="verifier-info">
+              <div class="verifier-avatar">${getUserById(section.verifier)?.avatar || '👤'}</div>
+              <span>검증자: ${getUserName(section.verifier)}</span>
+              <span style="color: var(--gray-400);">•</span>
+              <span>${new Date(section.verifiedAt).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}</span>
+            </div>
+          ` : ''}
+
+          ${!section.verified ? `
+            <button class="btn btn-primary btn-sm verify-btn" onclick="verifySectionItem(${index})">
+              검증 완료 표시
+            </button>
+          ` : `
+            <div class="lock-toggle">
+              <input type="checkbox" id="lock-${index}" ${section.locked ? 'checked' : ''} onchange="toggleLock(${index})">
+              <label for="lock-${index}">섹션 잠금 (편집 불가)</label>
+            </div>
+          `}
+        </div>
+      `).join('');
+    }
+
+    // 섹션 검증
+    function verifySectionItem(index) {
+      const currentUser = getCurrentUser();
+      sections[index].verified = true;
+      sections[index].verifier = currentUser.id;
+      sections[index].verifiedAt = new Date().toISOString();
+
+      verifiedSections.add(index);
+
+      renderVerificationList();
+      updateStats();
+
+      showToast(`"${sections[index].name}" 섹션이 검증되었습니다.`, 'success');
+
+      // 모두 검증되면 버튼 활성화
+      checkAllVerified();
+    }
+
+    // 섹션 잠금 토글
+    function toggleLock(index) {
+      const checkbox = document.getElementById(`lock-${index}`);
+      sections[index].locked = checkbox.checked;
+
+      updateStats();
+
+      if (checkbox.checked) {
+        showToast('섹션이 잠겼습니다. 더 이상 편집할 수 없습니다.', 'info');
+      } else {
+        showToast('섹션 잠금이 해제되었습니다.', 'info');
+      }
+    }
+
+    // 통계 업데이트
+    function updateStats() {
+      const verifiedCount = sections.filter(s => s.verified).length;
+      const totalCount = sections.length;
+      const lockedCount = sections.filter(s => s.locked).length;
+      const progress = totalCount > 0 ? Math.round((verifiedCount / totalCount) * 100) : 0;
+
+      document.getElementById('verifiedCount').textContent = verifiedCount;
+      document.getElementById('totalCount').textContent = totalCount;
+      document.getElementById('lockedCount').textContent = lockedCount;
+      document.getElementById('totalProgress').textContent = `${progress}%`;
+      document.getElementById('progressText').textContent = `${progress}%`;
+
+      // 진행률 원 업데이트
+      const circle = document.getElementById('progressCircle');
+      const circumference = 2 * Math.PI * 52;
+      const offset = circumference - (progress / 100) * circumference;
+      circle.style.strokeDashoffset = offset;
+    }
+
+    // 참석자별 진행률
+    function renderParticipantProgress() {
+      const users = getFromStorage(STORAGE_KEYS.USERS) || [];
+      const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
+
+      if (meetingData.participants) {
+        const progressContainer = document.getElementById('participantProgress');
+
+        progressContainer.innerHTML = meetingData.participants.map(email => {
+          const user = users.find(u => u.email === email) || { name: email, avatar: '👤', id: 'unknown' };
+          const userVerifications = sections.filter(s => s.verifier === user.id).length;
+          const userProgress = sections.length > 0 ? Math.round((userVerifications / sections.length) * 100) : 0;
+
+          return `
+            <div class="participant-progress-item">
+              <div class="participant-avatar-small">${user.avatar}</div>
+              <div class="progress-info">
+                <div class="progress-name">${user.name}</div>
+                <div class="progress-bar-small">
+                  <div class="progress-fill" style="width: ${userProgress}%"></div>
+                </div>
+              </div>
+              <div class="progress-percentage">${userProgress}%</div>
+            </div>
+          `;
+        }).join('');
+      }
+    }
+
+    // 모든 섹션 검증 확인
+    function checkAllVerified() {
+      const requiredSections = sections.filter(s => s.required);
+      const allRequiredVerified = requiredSections.every(s => s.verified);
+
+      const completeBtn = document.getElementById('completeVerification');
+      completeBtn.disabled = !allRequiredVerified;
+
+      if (allRequiredVerified) {
+        showToast('모든 필수 섹션이 검증되었습니다!', 'success');
+      }
+    }
+
+    // 검증 완료 및 회의 종료
+    document.getElementById('completeVerification').addEventListener('click', () => {
+      const allVerified = sections.every(s => !s.required || s.verified);
+
+      if (!allVerified) {
+        showToast('모든 필수 섹션을 검증해주세요.', 'warning');
+        return;
+      }
+
+      if (confirm('검증을 완료하고 회의를 종료하시겠습니까?')) {
+        // 검증 데이터 저장
+        sessionStorage.setItem('verificationData', JSON.stringify(sections));
+
+        showToast('검증이 완료되었습니다.', 'success');
+
+        setTimeout(() => {
+          navigateTo('07-회의종료.html');
+        }, 1000);
+      }
+    });
+
+    // 초기화
+    loadSections();
+  </script>
+</body>
+</html>
diff --git a/design-v1/uiux/prototype/07-회의종료.html b/design-v1/uiux/prototype/07-회의종료.html
new file mode 100644
index 0000000..8b988de
--- /dev/null
+++ b/design-v1/uiux/prototype/07-회의종료.html
@@ -0,0 +1,573 @@
+<!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>
+    .completion-container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: var(--spacing-8);
+    }
+
+    .completion-header {
+      text-align: center;
+      margin-bottom: var(--spacing-8);
+    }
+
+    .success-icon {
+      font-size: 80px;
+      margin-bottom: var(--spacing-4);
+    }
+
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: var(--spacing-6);
+      margin-bottom: var(--spacing-8);
+    }
+
+    .stat-card {
+      background: white;
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+      text-align: center;
+    }
+
+    .stat-icon {
+      font-size: 32px;
+      margin-bottom: var(--spacing-3);
+    }
+
+    .stat-value {
+      font-size: 2rem;
+      font-weight: 700;
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .stat-label {
+      font-size: 0.875rem;
+      color: var(--gray-500);
+    }
+
+    .content-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--spacing-6);
+      margin-bottom: var(--spacing-8);
+    }
+
+    .content-panel {
+      background: white;
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-6);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .panel-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-4);
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-2);
+    }
+
+    .checklist-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+      border-radius: var(--radius-md);
+      background: var(--gray-50);
+    }
+
+    .checklist-icon {
+      font-size: 20px;
+    }
+
+    .checklist-text {
+      flex: 1;
+      font-size: 0.875rem;
+    }
+
+    .checklist-action {
+      font-size: 0.875rem;
+      color: var(--primary-main);
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
+    .todo-item {
+      padding: var(--spacing-4);
+      background: var(--gray-50);
+      border-radius: var(--radius-md);
+      margin-bottom: var(--spacing-3);
+      border-left: 4px solid var(--primary-main);
+    }
+
+    .todo-content {
+      font-weight: 500;
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .todo-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-4);
+      font-size: 0.875rem;
+      color: var(--gray-600);
+    }
+
+    .todo-meta-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-1);
+    }
+
+    .speaker-stats {
+      margin-top: var(--spacing-4);
+    }
+
+    .speaker-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-2);
+    }
+
+    .speaker-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--gray-200);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+    }
+
+    .speaker-info {
+      flex: 1;
+    }
+
+    .speaker-name {
+      font-weight: 500;
+      color: var(--gray-900);
+      margin-bottom: var(--spacing-1);
+    }
+
+    .speaker-bar {
+      height: 6px;
+      background: var(--gray-200);
+      border-radius: 3px;
+      overflow: hidden;
+    }
+
+    .speaker-fill {
+      height: 100%;
+      background: var(--primary-main);
+      transition: width 0.3s;
+    }
+
+    .speaker-count {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--gray-600);
+    }
+
+    .keyword-cloud {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-2);
+      margin-top: var(--spacing-4);
+    }
+
+    .keyword-tag {
+      padding: var(--spacing-2) var(--spacing-4);
+      background: var(--primary-light);
+      color: var(--primary-dark);
+      border-radius: var(--radius-full);
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    .next-meeting {
+      background: linear-gradient(135deg, var(--primary-main), var(--secondary-main));
+      color: white;
+      padding: var(--spacing-6);
+      border-radius: var(--radius-lg);
+      margin-top: var(--spacing-4);
+    }
+
+    .next-meeting-title {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: var(--spacing-2);
+    }
+
+    .next-meeting-date {
+      font-size: 1.25rem;
+      font-weight: 700;
+      margin-bottom: var(--spacing-3);
+    }
+
+    .action-buttons {
+      display: flex;
+      justify-content: space-between;
+      margin-top: var(--spacing-8);
+      padding-top: var(--spacing-6);
+      border-top: 1px solid var(--gray-200);
+    }
+
+    @media (max-width: 1023px) {
+      .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .content-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="completion-container">
+    <div class="completion-header">
+      <div class="success-icon">🎉</div>
+      <h1>회의가 종료되었습니다</h1>
+      <p style="color: var(--gray-500); font-size: 1.125rem;">
+        회의 통계와 Todo를 확인하고 최종 확정하세요
+      </p>
+    </div>
+
+    <!-- 통계 카드 -->
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-icon">⏱️</div>
+        <div class="stat-value" id="meetingDuration">-</div>
+        <div class="stat-label">회의 총 시간</div>
+      </div>
+
+      <div class="stat-card">
+        <div class="stat-icon">👥</div>
+        <div class="stat-value" id="participantCount">-</div>
+        <div class="stat-label">참석자 수</div>
+      </div>
+
+      <div class="stat-card">
+        <div class="stat-icon">💬</div>
+        <div class="stat-value" id="speechCount">-</div>
+        <div class="stat-label">총 발언 횟수</div>
+      </div>
+
+      <div class="stat-card">
+        <div class="stat-icon">✅</div>
+        <div class="stat-value" id="todoCount">-</div>
+        <div class="stat-label">생성된 Todo</div>
+      </div>
+    </div>
+
+    <!-- 콘텐츠 그리드 -->
+    <div class="content-grid">
+      <!-- 필수 항목 검사 -->
+      <div class="content-panel">
+        <div class="panel-title">
+          <span>📋</span>
+          <span>필수 항목 검사</span>
+        </div>
+        <div id="checklistItems"></div>
+      </div>
+
+      <!-- AI Todo 추출 -->
+      <div class="content-panel">
+        <div class="panel-title">
+          <span>✨</span>
+          <span>AI Todo 추출 결과</span>
+        </div>
+        <div id="todoList"></div>
+        <button class="btn btn-secondary btn-sm" style="width: 100%; margin-top: var(--spacing-3);" onclick="openModal('editTodoModal')">
+          Todo 수정
+        </button>
+      </div>
+
+      <!-- 발언 통계 -->
+      <div class="content-panel">
+        <div class="panel-title">
+          <span>📊</span>
+          <span>화자별 발언 통계</span>
+        </div>
+        <div class="speaker-stats" id="speakerStats"></div>
+      </div>
+
+      <!-- 주요 키워드 -->
+      <div class="content-panel">
+        <div class="panel-title">
+          <span>🔑</span>
+          <span>주요 키워드</span>
+        </div>
+        <div class="keyword-cloud" id="keywordCloud"></div>
+
+        <!-- 다음 회의 일정 감지 -->
+        <div class="next-meeting">
+          <div class="next-meeting-title">🗓️ AI가 감지한 다음 회의</div>
+          <div class="next-meeting-date">2025년 10월 27일 14:00</div>
+          <button class="btn" style="background: white; color: var(--primary-main);" onclick="addToCalendar()">
+            📅 캘린더에 추가
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 액션 버튼 -->
+    <div class="action-buttons">
+      <button type="button" class="btn btn-text" onclick="navigateTo('05-회의진행.html')">
+        ← 회의록으로 돌아가기
+      </button>
+      <div style="display: flex; gap: var(--spacing-3);">
+        <button type="button" class="btn btn-secondary" id="saveDraft">
+          나중에 확정
+        </button>
+        <button type="button" class="btn btn-primary" id="finalizeMinutes">
+          최종 확정 →
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Todo 수정 모달 -->
+  <div class="modal-backdrop" id="editTodoModal">
+    <div class="modal">
+      <div class="modal-header">
+        <h3 class="modal-title">Todo 수정</h3>
+      </div>
+      <div class="modal-body">
+        <p style="color: var(--gray-600); margin-bottom: var(--spacing-4);">
+          AI가 추출한 Todo를 수정하거나 새로운 Todo를 추가할 수 있습니다.
+        </p>
+        <div id="editableTodoList"></div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-text" onclick="closeModal('editTodoModal')">취소</button>
+        <button class="btn btn-primary" onclick="saveTodos()">저장</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="common.js"></script>
+  <script>
+    let extractedTodos = [];
+
+    // 회의 통계 로드
+    function loadMeetingStats() {
+      const duration = parseInt(sessionStorage.getItem('meetingDuration') || '0');
+      const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
+      const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
+
+      // 회의 시간
+      document.getElementById('meetingDuration').textContent = formatDuration(duration / 60);
+
+      // 참석자 수
+      const participantCount = meetingData.participants?.length || 0;
+      document.getElementById('participantCount').textContent = `${participantCount}명`;
+
+      // 발언 횟수 (시뮬레이션)
+      const totalSpeech = 45 + Math.floor(Math.random() * 20);
+      document.getElementById('speechCount').textContent = `${totalSpeech}회`;
+
+      // Todo 개수
+      extractedTodos = generateTodos();
+      document.getElementById('todoCount').textContent = `${extractedTodos.length}개`;
+    }
+
+    // 필수 항목 체크리스트
+    function renderChecklist() {
+      const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
+      const content = JSON.parse(sessionStorage.getItem('meetingContent') || '{}');
+
+      const requiredSections = template.sections?.filter(s => s.required) || [];
+      const checklist = requiredSections.map(section => {
+        const hasContent = content[section.id] && content[section.id].trim().length > 0;
+        return {
+          name: section.name,
+          completed: hasContent,
+          sectionId: section.id
+        };
+      });
+
+      const container = document.getElementById('checklistItems');
+      container.innerHTML = checklist.map(item => `
+        <div class="checklist-item">
+          <div class="checklist-icon">${item.completed ? '✅' : '❌'}</div>
+          <div class="checklist-text">${item.name}</div>
+          ${!item.completed ? `<span class="checklist-action" onclick="goToSection('${item.sectionId}')">작성하기</span>` : ''}
+        </div>
+      `).join('');
+
+      // 모두 완료되었는지 확인
+      const allCompleted = checklist.every(item => item.completed);
+      document.getElementById('finalizeMinutes').disabled = !allCompleted;
+
+      return allCompleted;
+    }
+
+    // Todo 생성 (AI 시뮬레이션)
+    function generateTodos() {
+      return [
+        {
+          id: generateId('todo'),
+          content: '1분기 마케팅 예산안 작성',
+          assignee: 'user2',
+          dueDate: '2025-10-25',
+          priority: 'high',
+          source: '결정 사항 섹션'
+        },
+        {
+          id: generateId('todo'),
+          content: '경쟁사 분석 보고서 작성',
+          assignee: 'user3',
+          dueDate: '2025-10-22',
+          priority: 'high',
+          source: '논의 내용 섹션'
+        },
+        {
+          id: generateId('todo'),
+          content: '신규 프로젝트 팀 구성안 제출',
+          assignee: 'user1',
+          dueDate: '2025-10-23',
+          priority: 'normal',
+          source: '결정 사항 섹션'
+        }
+      ];
+    }
+
+    // Todo 렌더링
+    function renderTodos() {
+      const container = document.getElementById('todoList');
+      container.innerHTML = extractedTodos.map(todo => `
+        <div class="todo-item">
+          <div class="todo-content">${todo.content}</div>
+          <div class="todo-meta">
+            <div class="todo-meta-item">
+              <span>👤</span>
+              <span>${getUserName(todo.assignee)}</span>
+            </div>
+            <div class="todo-meta-item">
+              <span>📅</span>
+              <span>${getDdayText(todo.dueDate)}</span>
+            </div>
+            <div class="todo-meta-item">
+              <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${todo.priority === 'high' ? 'var(--error-main)' : 'var(--gray-400)'};"></span>
+              <span>${todo.priority === 'high' ? '높음' : '보통'}</span>
+            </div>
+          </div>
+        </div>
+      `).join('');
+    }
+
+    // 화자별 통계
+    function renderSpeakerStats() {
+      const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
+      const speakers = (meetingData.participants || []).map(email => {
+        const user = getUserById(email) || { name: email, avatar: '👤' };
+        const count = 10 + Math.floor(Math.random() * 20);
+        return { ...user, count };
+      });
+
+      const maxCount = Math.max(...speakers.map(s => s.count));
+      const container = document.getElementById('speakerStats');
+
+      container.innerHTML = speakers.map(speaker => `
+        <div class="speaker-item">
+          <div class="speaker-avatar">${speaker.avatar}</div>
+          <div class="speaker-info">
+            <div class="speaker-name">${speaker.name}</div>
+            <div class="speaker-bar">
+              <div class="speaker-fill" style="width: ${(speaker.count / maxCount) * 100}%"></div>
+            </div>
+          </div>
+          <div class="speaker-count">${speaker.count}회</div>
+        </div>
+      `).join('');
+    }
+
+    // 키워드 렌더링
+    function renderKeywords() {
+      const keywords = ['1분기 목표', '마케팅', '예산', 'ROI', '경쟁사 분석', '프로젝트', '전략', '실적'];
+      const container = document.getElementById('keywordCloud');
+
+      container.innerHTML = keywords.map(keyword => `
+        <div class="keyword-tag">${keyword}</div>
+      `).join('');
+    }
+
+    // 섹션으로 이동
+    function goToSection(sectionId) {
+      sessionStorage.setItem('focusSection', sectionId);
+      navigateTo('05-회의진행.html');
+    }
+
+    // Todo 저장
+    function saveTodos() {
+      showToast('Todo가 저장되었습니다.', 'success');
+      closeModal('editTodoModal');
+    }
+
+    // 캘린더에 추가
+    function addToCalendar() {
+      showToast('다음 회의 일정이 캘린더에 추가되었습니다.', 'success');
+    }
+
+    // 나중에 확정
+    document.getElementById('saveDraft').addEventListener('click', () => {
+      if (confirm('나중에 확정하시겠습니까?')) {
+        showToast('임시 저장되었습니다.', 'info');
+        setTimeout(() => {
+          navigateTo('02-대시보드.html');
+        }, 1000);
+      }
+    });
+
+    // 최종 확정
+    document.getElementById('finalizeMinutes').addEventListener('click', () => {
+      const allCompleted = renderChecklist();
+
+      if (!allCompleted) {
+        showToast('모든 필수 항목을 작성해주세요.', 'warning');
+        return;
+      }
+
+      if (confirm('회의록을 최종 확정하시겠습니까?\n확정 후에는 수정이 제한됩니다.')) {
+        // Todo 저장
+        extractedTodos.forEach(todo => {
+          todo.meetingId = 'meeting_final';
+          todo.status = 'pending';
+          todo.progress = 0;
+          saveTodo(todo);
+        });
+
+        showToast('회의록이 최종 확정되었습니다.', 'success');
+
+        setTimeout(() => {
+          navigateTo('08-회의록공유.html');
+        }, 1000);
+      }
+    });
+
+    // 초기화
+    loadMeetingStats();
+    renderChecklist();
+    renderTodos();
+    renderSpeakerStats();
+    renderKeywords();
+  </script>
+</body>
+</html>
diff --git a/design/uiux/prototype/08-회의록공유.html b/design-v1/uiux/prototype/08-회의록공유.html
similarity index 100%
rename from design/uiux/prototype/08-회의록공유.html
rename to design-v1/uiux/prototype/08-회의록공유.html
diff --git a/design/uiux/prototype/09-Todo관리.html b/design-v1/uiux/prototype/09-Todo관리.html
similarity index 100%
rename from design/uiux/prototype/09-Todo관리.html
rename to design-v1/uiux/prototype/09-Todo관리.html
diff --git a/design-v1/uiux/prototype/common.css b/design-v1/uiux/prototype/common.css
new file mode 100644
index 0000000..5cc0a0e
--- /dev/null
+++ b/design-v1/uiux/prototype/common.css
@@ -0,0 +1,596 @@
+/* ============================================
+   회의록 작성 및 공유 개선 서비스 - 공통 스타일
+   ============================================ */
+
+/* === CSS Reset === */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
+  line-height: 1.5;
+  color: #4B5563;
+  background-color: #F9FAFB;
+}
+
+/* === CSS Variables === */
+:root {
+  /* Primary Colors */
+  --primary-light: #4DFFDB;
+  --primary-main: #00D9B1;
+  --primary-dark: #00A88A;
+
+  /* Secondary Colors */
+  --secondary-light: #A5B4FC;
+  --secondary-main: #6366F1;
+  --secondary-dark: #4F46E5;
+
+  /* Semantic Colors */
+  --success-light: #6EE7B7;
+  --success-main: #10B981;
+  --success-dark: #059669;
+
+  --warning-light: #FCD34D;
+  --warning-main: #F59E0B;
+  --warning-dark: #D97706;
+
+  --error-light: #FCA5A5;
+  --error-main: #EF4444;
+  --error-dark: #DC2626;
+
+  --info-light: #93C5FD;
+  --info-main: #3B82F6;
+  --info-dark: #2563EB;
+
+  /* Neutral Colors */
+  --gray-50: #F9FAFB;
+  --gray-100: #F3F4F6;
+  --gray-200: #E5E7EB;
+  --gray-300: #D1D5DB;
+  --gray-400: #9CA3AF;
+  --gray-500: #6B7280;
+  --gray-600: #4B5563;
+  --gray-700: #374151;
+  --gray-800: #1F2937;
+  --gray-900: #111827;
+
+  /* Typography */
+  --font-display: 700 3rem/1.25 'Pretendard';
+  --font-h1: 700 2.25rem/1.25 'Pretendard';
+  --font-h2: 600 1.875rem/1.25 'Pretendard';
+  --font-h3: 600 1.5rem/1.5 'Pretendard';
+  --font-h4: 600 1.25rem/1.5 'Pretendard';
+  --font-body-large: 400 1.125rem/1.5 'Pretendard';
+  --font-body: 400 1rem/1.5 'Pretendard';
+  --font-body-small: 400 0.875rem/1.5 'Pretendard';
+  --font-caption: 400 0.75rem/1.5 'Pretendard';
+
+  /* Spacing (8px 기반) */
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 9999px;
+
+  /* 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 25px rgba(0, 0, 0, 0.15);
+
+  /* Transitions */
+  --transition-fast: 150ms ease-out;
+  --transition-base: 200ms ease-out;
+  --transition-slow: 300ms ease-out;
+}
+
+/* === Typography === */
+h1 { font: var(--font-h1); color: var(--gray-900); }
+h2 { font: var(--font-h2); color: var(--gray-900); }
+h3 { font: var(--font-h3); color: var(--gray-900); }
+h4 { font: var(--font-h4); color: var(--gray-900); }
+p { font: var(--font-body); margin-bottom: var(--spacing-4); }
+small { font: var(--font-caption); color: var(--gray-500); }
+
+/* === Buttons === */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3) var(--spacing-6);
+  font-size: 1rem;
+  font-weight: 500;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-decoration: none;
+  gap: var(--spacing-2);
+}
+
+.btn-primary {
+  background-color: var(--primary-main);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-light);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-primary:active {
+  background-color: var(--primary-dark);
+  transform: scale(0.98);
+}
+
+.btn-primary:disabled {
+  background-color: var(--gray-300);
+  color: var(--gray-500);
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-secondary {
+  background-color: transparent;
+  color: var(--primary-main);
+  border: 1px solid var(--primary-main);
+}
+
+.btn-secondary:hover {
+  background-color: rgba(0, 217, 177, 0.1);
+}
+
+.btn-secondary:active {
+  background-color: rgba(0, 217, 177, 0.2);
+}
+
+.btn-text {
+  background-color: transparent;
+  color: var(--gray-700);
+}
+
+.btn-text:hover {
+  background-color: var(--gray-100);
+}
+
+.btn-text:active {
+  background-color: var(--gray-200);
+}
+
+.btn-icon {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: var(--radius-full);
+  background-color: transparent;
+}
+
+.btn-icon:hover {
+  background-color: var(--gray-100);
+}
+
+.btn-sm {
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: 0.875rem;
+}
+
+.btn-lg {
+  padding: var(--spacing-4) var(--spacing-8);
+  font-size: 1.125rem;
+}
+
+/* FAB (Floating Action Button) */
+.fab {
+  position: fixed;
+  bottom: var(--spacing-4);
+  right: var(--spacing-4);
+  width: 56px;
+  height: 56px;
+  background-color: var(--primary-main);
+  color: white;
+  border-radius: var(--radius-full);
+  border: none;
+  box-shadow: var(--shadow-md);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  z-index: 1000;
+}
+
+.fab:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+  transform: translateY(-2px);
+}
+
+.fab:active {
+  transform: scale(0.95);
+}
+
+/* === Input Fields === */
+.input,
+.textarea,
+.select {
+  width: 100%;
+  padding: var(--spacing-3) var(--spacing-4);
+  font-size: 1rem;
+  font-family: inherit;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--radius-md);
+  background-color: white;
+  transition: all var(--transition-fast);
+}
+
+.input:focus,
+.textarea:focus,
+.select:focus {
+  outline: 4px solid rgba(0, 217, 177, 0.2);
+  border-color: var(--primary-main);
+  border-width: 2px;
+}
+
+.input.error,
+.textarea.error {
+  border-color: var(--error-main);
+}
+
+.input:disabled,
+.textarea:disabled,
+.select:disabled {
+  background-color: var(--gray-100);
+  color: var(--gray-400);
+  cursor: not-allowed;
+}
+
+.textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.input-group {
+  margin-bottom: var(--spacing-4);
+}
+
+.input-label {
+  display: block;
+  margin-bottom: var(--spacing-2);
+  font-weight: 500;
+  color: var(--gray-700);
+}
+
+.input-error {
+  display: block;
+  margin-top: var(--spacing-1);
+  font-size: 0.875rem;
+  color: var(--error-main);
+}
+
+/* === Cards === */
+.card {
+  background-color: white;
+  border: 1px solid var(--gray-200);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-6);
+  box-shadow: var(--shadow-sm);
+  transition: all var(--transition-base);
+}
+
+.card.interactive {
+  cursor: pointer;
+}
+
+.card.interactive:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.card.interactive:active {
+  box-shadow: var(--shadow-sm);
+  transform: scale(0.99);
+}
+
+/* === Badges === */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--radius-full);
+}
+
+.badge-primary {
+  background-color: var(--primary-light);
+  color: var(--primary-dark);
+}
+
+.badge-success {
+  background-color: var(--success-light);
+  color: var(--success-dark);
+}
+
+.badge-warning {
+  background-color: var(--warning-light);
+  color: var(--warning-dark);
+}
+
+.badge-error {
+  background-color: var(--error-light);
+  color: var(--error-dark);
+}
+
+.badge-neutral {
+  background-color: var(--gray-200);
+  color: var(--gray-700);
+}
+
+/* === Modal === */
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.modal-backdrop.active {
+  display: flex;
+}
+
+.modal {
+  background-color: white;
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-8);
+  max-width: 600px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-header {
+  margin-bottom: var(--spacing-6);
+}
+
+.modal-title {
+  font: var(--font-h3);
+  color: var(--gray-900);
+}
+
+.modal-body {
+  margin-bottom: var(--spacing-8);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-3);
+}
+
+/* === Toast === */
+.toast-container {
+  position: fixed;
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.toast {
+  background-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: center;
+  gap: var(--spacing-3);
+  border-left: 4px solid;
+  animation: slideIn 200ms ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(400px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.toast-success {
+  border-left-color: var(--success-main);
+}
+
+.toast-error {
+  border-left-color: var(--error-main);
+}
+
+.toast-warning {
+  border-left-color: var(--warning-main);
+}
+
+.toast-info {
+  border-left-color: var(--info-main);
+}
+
+/* === Layout === */
+.container {
+  max-width: 1536px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-6);
+}
+
+.header {
+  background-color: white;
+  border-bottom: 1px solid var(--gray-200);
+  padding: var(--spacing-4) 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--primary-main);
+  text-decoration: none;
+}
+
+.sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 250px;
+  height: 100vh;
+  background-color: white;
+  border-right: 1px solid var(--gray-200);
+  padding: var(--spacing-6);
+  overflow-y: auto;
+}
+
+.main-content {
+  margin-left: 250px;
+  padding: var(--spacing-8);
+  min-height: 100vh;
+}
+
+/* === Grid System === */
+.grid {
+  display: grid;
+  gap: var(--spacing-4);
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* === Utility Classes === */
+.hidden {
+  display: none !important;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.mt-2 { margin-top: var(--spacing-2); }
+.mt-4 { margin-top: var(--spacing-4); }
+.mt-6 { margin-top: var(--spacing-6); }
+.mt-8 { margin-top: var(--spacing-8); }
+
+.mb-2 { margin-bottom: var(--spacing-2); }
+.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-between {
+  justify-content: space-between;
+}
+
+.gap-2 { gap: var(--spacing-2); }
+.gap-4 { gap: var(--spacing-4); }
+.gap-6 { gap: var(--spacing-6); }
+
+/* === Responsive === */
+@media (max-width: 1023px) {
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 300ms ease-out;
+  }
+
+  .sidebar.active {
+    transform: translateX(0);
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
+
+  .grid-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .grid-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 767px) {
+  .container {
+    padding: 0 var(--spacing-4);
+  }
+
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+
+  .modal {
+    width: 95%;
+    padding: var(--spacing-6);
+  }
+}
diff --git a/design-v1/uiux/prototype/common.js b/design-v1/uiux/prototype/common.js
new file mode 100644
index 0000000..fab26d5
--- /dev/null
+++ b/design-v1/uiux/prototype/common.js
@@ -0,0 +1,408 @@
+/* ============================================
+   회의록 작성 및 공유 개선 서비스 - 공통 Javascript
+   ============================================ */
+
+// === LocalStorage 키 상수 ===
+const STORAGE_KEYS = {
+  CURRENT_USER: 'currentUser',
+  USERS: 'users',
+  MEETINGS: 'meetings',
+  TODOS: 'todos',
+  INITIALIZED: 'initialized'
+};
+
+// === 예제 데이터 초기화 ===
+function initializeData() {
+  if (localStorage.getItem(STORAGE_KEYS.INITIALIZED)) {
+    return;
+  }
+
+  // 사용자 데이터
+  const users = [
+    { id: 'user1', name: '김민준', email: 'minjun@example.com', avatar: '👤' },
+    { id: 'user2', name: '박서연', email: 'seoyeon@example.com', avatar: '👩' },
+    { id: 'user3', name: '이준호', email: 'junho@example.com', avatar: '👨' },
+    { id: 'user4', name: '최유진', email: 'yujin@example.com', avatar: '👧' },
+    { id: 'user5', name: '정도현', email: 'dohyun@example.com', avatar: '🧑' }
+  ];
+
+  // 회의 데이터
+  const meetings = [
+    {
+      id: 'meeting1',
+      title: '2025년 1분기 전략 회의',
+      date: '2025-10-20',
+      time: '14:00',
+      endTime: '15:30',
+      location: '3층 회의실',
+      participants: ['user1', 'user2', 'user3'],
+      template: 'general',
+      status: 'scheduled', // scheduled, in_progress, completed
+      content: {
+        sections: {
+          participants: '김민준, 박서연, 이준호',
+          agenda: '1분기 목표 설정 및 전략 수립',
+          discussion: '',
+          decisions: '',
+          todos: ''
+        }
+      },
+      createdAt: new Date().toISOString()
+    },
+    {
+      id: 'meeting2',
+      title: '주간 스크럼 회의',
+      date: '2025-10-18',
+      time: '10:00',
+      endTime: '10:30',
+      location: '온라인',
+      participants: ['user1', 'user2', 'user3', 'user4'],
+      template: 'scrum',
+      status: 'completed',
+      content: {
+        sections: {
+          participants: '김민준, 박서연, 이준호, 최유진',
+          yesterday: '- API 개발 완료\n- 테스트 코드 작성',
+          today: '- 프론트엔드 개발 시작\n- 디자인 리뷰',
+          blockers: '없음'
+        }
+      },
+      createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString()
+    }
+  ];
+
+  // Todo 데이터
+  const todos = [
+    {
+      id: 'todo1',
+      meetingId: 'meeting1',
+      content: '1분기 마케팅 예산안 작성',
+      assignee: 'user2',
+      dueDate: '2025-10-25',
+      priority: 'high', // high, normal, low
+      status: 'pending', // pending, in_progress, completed
+      progress: 0
+    },
+    {
+      id: 'todo2',
+      meetingId: 'meeting1',
+      content: '경쟁사 분석 보고서 작성',
+      assignee: 'user3',
+      dueDate: '2025-10-22',
+      priority: 'high',
+      status: 'in_progress',
+      progress: 60
+    },
+    {
+      id: 'todo3',
+      meetingId: 'meeting2',
+      content: '테스트 커버리지 80% 달성',
+      assignee: 'user3',
+      dueDate: '2025-10-20',
+      priority: 'normal',
+      status: 'completed',
+      progress: 100
+    }
+  ];
+
+  // 현재 로그인 사용자
+  const currentUser = users[0];
+
+  // LocalStorage에 저장
+  localStorage.setItem(STORAGE_KEYS.USERS, JSON.stringify(users));
+  localStorage.setItem(STORAGE_KEYS.MEETINGS, JSON.stringify(meetings));
+  localStorage.setItem(STORAGE_KEYS.TODOS, JSON.stringify(todos));
+  localStorage.setItem(STORAGE_KEYS.CURRENT_USER, JSON.stringify(currentUser));
+  localStorage.setItem(STORAGE_KEYS.INITIALIZED, 'true');
+}
+
+// === LocalStorage 헬퍼 함수 ===
+function getFromStorage(key) {
+  const data = localStorage.getItem(key);
+  return data ? JSON.parse(data) : null;
+}
+
+function saveToStorage(key, data) {
+  localStorage.setItem(key, JSON.stringify(data));
+}
+
+// === 날짜/시간 유틸리티 ===
+function formatDate(dateString) {
+  const date = new Date(dateString);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function formatTime(timeString) {
+  return timeString; // HH:MM 형식 그대로 반환
+}
+
+function formatDateTime(dateString, timeString) {
+  return `${formatDate(dateString)} ${formatTime(timeString)}`;
+}
+
+function getDdayText(dueDateString) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const dueDate = new Date(dueDateString);
+  dueDate.setHours(0, 0, 0, 0);
+
+  const diff = Math.ceil((dueDate - today) / (1000 * 60 * 60 * 24));
+
+  if (diff < 0) return `D${diff} (지남)`;
+  if (diff === 0) return '오늘';
+  return `D-${diff}`;
+}
+
+function formatDuration(minutes) {
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  if (hours > 0 && mins > 0) return `${hours}시간 ${mins}분`;
+  if (hours > 0) return `${hours}시간`;
+  return `${mins}분`;
+}
+
+// === 사용자 관련 함수 ===
+function getCurrentUser() {
+  return getFromStorage(STORAGE_KEYS.CURRENT_USER);
+}
+
+function getUserById(userId) {
+  const users = getFromStorage(STORAGE_KEYS.USERS) || [];
+  return users.find(u => u.id === userId);
+}
+
+function getUserName(userId) {
+  const user = getUserById(userId);
+  return user ? user.name : '알 수 없음';
+}
+
+// === 회의 관련 함수 ===
+function getAllMeetings() {
+  return getFromStorage(STORAGE_KEYS.MEETINGS) || [];
+}
+
+function getMeetingById(meetingId) {
+  const meetings = getAllMeetings();
+  return meetings.find(m => m.id === meetingId);
+}
+
+function saveMeeting(meeting) {
+  const meetings = getAllMeetings();
+  const index = meetings.findIndex(m => m.id === meeting.id);
+  if (index >= 0) {
+    meetings[index] = meeting;
+  } else {
+    meetings.push(meeting);
+  }
+  saveToStorage(STORAGE_KEYS.MEETINGS, meetings);
+}
+
+function getScheduledMeetings() {
+  const meetings = getAllMeetings();
+  return meetings.filter(m => m.status === 'scheduled');
+}
+
+function getRecentMeetings(limit = 6) {
+  const meetings = getAllMeetings();
+  return meetings
+    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+    .slice(0, limit);
+}
+
+// === Todo 관련 함수 ===
+function getAllTodos() {
+  return getFromStorage(STORAGE_KEYS.TODOS) || [];
+}
+
+function getTodoById(todoId) {
+  const todos = getAllTodos();
+  return todos.find(t => t.id === todoId);
+}
+
+function saveTodo(todo) {
+  const todos = getAllTodos();
+  const index = todos.findIndex(t => t.id === todo.id);
+  if (index >= 0) {
+    todos[index] = todo;
+  } else {
+    todos.push(todo);
+  }
+  saveToStorage(STORAGE_KEYS.TODOS, todos);
+}
+
+function getPendingTodos(userId) {
+  const todos = getAllTodos();
+  return todos.filter(t => t.assignee === userId && t.status !== 'completed');
+}
+
+function getTodosByStatus(status) {
+  const todos = getAllTodos();
+  return todos.filter(t => t.status === status);
+}
+
+// === Toast 알림 ===
+function showToast(message, type = 'info') {
+  // Toast 컨테이너 생성 (없으면)
+  let container = document.querySelector('.toast-container');
+  if (!container) {
+    container = document.createElement('div');
+    container.className = 'toast-container';
+    document.body.appendChild(container);
+  }
+
+  // Toast 생성
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type}`;
+
+  const icons = {
+    success: '✓',
+    error: '✗',
+    warning: '⚠',
+    info: 'ℹ'
+  };
+
+  toast.innerHTML = `
+    <span style="font-size: 20px;">${icons[type]}</span>
+    <span>${message}</span>
+  `;
+
+  container.appendChild(toast);
+
+  // 4초 후 자동 제거
+  setTimeout(() => {
+    toast.style.animation = 'slideOut 150ms ease-in';
+    setTimeout(() => toast.remove(), 150);
+  }, 4000);
+}
+
+// slideOut 애니메이션 추가
+if (!document.querySelector('style[data-toast-style]')) {
+  const style = document.createElement('style');
+  style.setAttribute('data-toast-style', 'true');
+  style.textContent = `
+    @keyframes slideOut {
+      to {
+        transform: translateX(400px);
+        opacity: 0;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// === 모달 제어 ===
+function openModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    modal.classList.add('active');
+  }
+}
+
+function closeModal(modalId) {
+  const modal = document.getElementById(modalId);
+  if (modal) {
+    modal.classList.remove('active');
+  }
+}
+
+// 모달 백드롭 클릭 시 닫기
+document.addEventListener('click', (e) => {
+  if (e.target.classList.contains('modal-backdrop')) {
+    closeModal(e.target.id);
+  }
+});
+
+// === 화면 전환 ===
+function navigateTo(page) {
+  window.location.href = page;
+}
+
+function goBack() {
+  window.history.back();
+}
+
+// === 유틸리티 함수 ===
+function generateId(prefix = 'id') {
+  return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+
+function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
+// === 템플릿 데이터 ===
+const TEMPLATES = {
+  general: {
+    id: 'general',
+    name: '일반 회의',
+    description: '기본 회의 구조',
+    sections: [
+      { id: 'participants', name: '참석자', required: true },
+      { id: 'agenda', name: '회의 목적', required: false },
+      { id: 'discussion', name: '논의 내용', required: true },
+      { id: 'decisions', name: '결정 사항', required: true },
+      { id: 'todos', name: 'Todo', required: false }
+    ]
+  },
+  scrum: {
+    id: 'scrum',
+    name: '스크럼 회의',
+    description: '데일리 스탠드업',
+    sections: [
+      { id: 'participants', name: '참석자', required: true },
+      { id: 'yesterday', name: '어제 한 일', required: true },
+      { id: 'today', name: '오늘 할 일', required: true },
+      { id: 'blockers', name: '이슈/블로커', required: false }
+    ]
+  },
+  kickoff: {
+    id: 'kickoff',
+    name: '프로젝트 킥오프',
+    description: '프로젝트 시작 회의',
+    sections: [
+      { id: 'participants', name: '참석자', required: true },
+      { id: 'overview', name: '프로젝트 개요', required: true },
+      { id: 'goals', name: '목표', required: true },
+      { id: 'schedule', name: '일정', required: true },
+      { id: 'roles', name: '역할 분담', required: true },
+      { id: 'risks', name: '리스크', required: false }
+    ]
+  },
+  weekly: {
+    id: 'weekly',
+    name: '주간 회의',
+    description: '주간 진행 상황 리뷰',
+    sections: [
+      { id: 'participants', name: '참석자', required: true },
+      { id: 'achievements', name: '주간 실적', required: true },
+      { id: 'issues', name: '주요 이슈', required: false },
+      { id: 'nextWeek', name: '다음 주 계획', required: true },
+      { id: 'support', name: '지원 필요 사항', required: false }
+    ]
+  }
+};
+
+function getTemplate(templateId) {
+  return TEMPLATES[templateId];
+}
+
+function getAllTemplates() {
+  return Object.values(TEMPLATES);
+}
+
+// === 페이지 로드 시 데이터 초기화 ===
+document.addEventListener('DOMContentLoaded', () => {
+  initializeData();
+});
diff --git a/design/uiux/style-guide.md b/design-v1/uiux/style-guide.md
similarity index 100%
rename from design/uiux/style-guide.md
rename to design-v1/uiux/style-guide.md
diff --git a/design/uiux/uiux.md b/design-v1/uiux/uiux.md
similarity index 100%
rename from design/uiux/uiux.md
rename to design-v1/uiux/uiux.md
diff --git a/design-v1/userstory.md b/design-v1/userstory.md
new file mode 100644
index 0000000..ba28dbc
--- /dev/null
+++ b/design-v1/userstory.md
@@ -0,0 +1,674 @@
+# 회의록 작성 및 공유 개선 서비스 - 유저스토리
+
+- [회의록 작성 및 공유 개선 서비스 - 유저스토리](#회의록-작성-및-공유-개선-서비스---유저스토리)
+  - [마이크로서비스 구성](#마이크로서비스-구성)
+  - [유저스토리](#유저스토리)
+
+---
+
+## 마이크로서비스 구성
+1. **User** - 사용자 인증 및 권한 관리
+2. **Meeting** - 회의 관리, 회의록 생성 및 관리, 회의록 공유
+3. **STT** - 음성 녹음 관리, 음성-텍스트 변환, 화자 식별
+4. **AI** - LLM 기반 회의록 자동 작성, Todo 자동 추출
+5. **RAG** - 전문용어 감지 및 설명 제공, 문서 검색
+6. **Collaboration** - 실시간 동기화, 버전 관리, 충돌 해결
+7. **Todo** - Todo 할당 및 관리, 진행 상황 추적
+8. **Notification** - 알림 발송 및 리마인더 관리
+9. **Calendar** - 일정 생성 및 외부 캘린더 연동
+
+---
+
+## 유저스토리
+```
+1. User 서비스
+1) 사용자 인증 및 관리
+AFR-USER-010: [사용자관리] 시스템 관리자로서 | 나는, 서비스 보안을 위해 | 사용자 인증 및 권한 관리 기능을 원한다.
+- 시나리오: 사용자 인증 및 권한 관리
+  사용자가 로그인을 시도한 상황에서 | 아이디와 비밀번호를 입력하면 | 인증이 완료되고 권한에 따라 서비스에 접근할 수 있다.
+  - [ ] 사용자 인증 (아이디, 비밀번호)
+  - [ ] JWT 토큰 기반 인증
+  - [ ] 사용자 권한 관리 (관리자, 일반 사용자)
+  - [ ] 세션 관리
+- M/8
+
+---
+
+2. Meeting 서비스
+1) 회의 준비 및 관리
+UFR-MEET-010: [회의예약] 회의록 작성자로서 | 나는, 회의를 효율적으로 준비하기 위해 | 회의를 예약하고 참석자를 초대하고 싶다.
+- 시나리오: 회의 예약 및 참석자 초대
+  회의 예약 화면에 접근한 상황에서 | 회의 제목, 날짜/시간, 장소, 참석자 목록을 입력하고 예약 버튼을 클릭하면 | 회의가 예약되고 참석자에게 초대 이메일이 자동 발송된다.
+
+  [입력 요구사항]
+  - 회의 제목: 최대 100자 (필수)
+  - 날짜/시간: 날짜 및 시간 선택 (필수)
+  - 장소: 최대 200자 (선택)
+  - 참석자 목록: 이메일 주소 입력 (최소 1명 필수)
+
+  [처리 결과]
+  - 회의가 예약됨 (회의 ID 생성)
+  - 일정이 캘린더에 자동 등록됨
+  - 참석자에게 초대 이메일 발송됨
+  - 회의 시작 30분 전 리마인더 자동 발송
+
+- M/13
+
+---
+
+UFR-MEET-020: [템플릿선택] 회의록 작성자로서 | 나는, 회의록을 효율적으로 작성하기 위해 | 회의 유형에 맞는 템플릿을 선택하고 싶다.
+- 시나리오: 회의록 템플릿 선택
+  회의 시작 전 템플릿 선택 화면에 접근한 상황에서 | 제공되는 템플릿 중 하나를 선택하고 커스터마이징하면 | 회의록 도구가 준비된다.
+
+  [템플릿 유형]
+  - 일반 회의: 기본 구조 (참석자, 안건, 논의 내용, 결정 사항, Todo)
+  - 스크럼 회의: 어제 한 일, 오늘 할 일, 이슈
+  - 프로젝트 킥오프: 프로젝트 개요, 목표, 일정, 역할, 리스크
+  - 주간 회의: 주간 실적, 주요 이슈, 다음 주 계획
+
+  [커스터마이징 옵션]
+  - 섹션 추가/삭제
+  - 섹션 순서 변경
+  - 기본 항목 설정
+
+  [처리 결과]
+  - 선택된 템플릿으로 회의록 도구가 준비됨
+  - 템플릿 ID와 설정 정보가 저장됨
+
+- S/5
+
+---
+
+UFR-MEET-030: [회의시작] 회의록 작성자로서 | 나는, 회의를 시작하고 회의록을 작성하기 위해 | 회의를 시작하고 음성 녹음을 준비하고 싶다.
+- 시나리오: 회의 시작
+  예약된 회의 시간에 회의 시작 버튼을 클릭한 상황에서 | 회의 ID를 확인하고 시작하면 | 회의 세션이 생성되고 음성 녹음이 준비된다.
+
+  [회의 시작 조건]
+  - 예약된 회의가 존재함
+  - 회의 시작 시간이 도래함
+  - 회의록 작성자가 시작 권한을 가짐
+
+  [처리 결과]
+  - 회의 세션이 생성됨 (세션 ID)
+  - 음성 녹음 준비 완료
+  - 참석자 목록 표시
+  - 회의 시작 시간 기록
+  - 실시간 회의록 작성 화면 활성화
+
+- M/8
+
+---
+
+2) 회의 종료 및 완료
+UFR-MEET-040: [회의종료] 회의록 작성자로서 | 나는, 회의를 종료하고 회의록을 정리하기 위해 | 회의를 종료하고 통계를 확인하고 싶다.
+- 시나리오: 회의 종료
+  회의가 진행 중인 상황에서 | 회의 종료 버튼을 클릭하면 | 음성 녹음이 중지되고 회의 통계가 생성된다.
+
+  [회의 종료 처리]
+  - 음성 녹음 즉시 중지
+  - 회의 종료 시간 기록
+  - 회의 통계 자동 생성
+    - 회의 총 시간
+    - 참석자 수
+    - 발언 횟수 (화자별)
+    - 주요 키워드
+
+  [처리 결과]
+  - 회의가 종료됨
+  - 회의 통계 표시
+  - 최종 회의록 확정 단계로 이동
+
+- M/8
+
+---
+
+UFR-MEET-050: [최종확정] 회의록 작성자로서 | 나는, 회의록을 완성하기 위해 | 최종 회의록을 확정하고 버전을 생성하고 싶다.
+- 시나리오: 최종 회의록 확정
+  회의가 종료된 상황에서 | 회의록 내용을 최종 검토하고 확정 버튼을 클릭하면 | 필수 항목이 검사되고 최종 버전이 생성된다.
+
+  [필수 항목 검사]
+  - 회의 제목 입력 여부
+  - 참석자 목록 작성 여부
+  - 주요 논의 내용 작성 여부
+  - 결정 사항 작성 여부
+
+  [처리 결과]
+  - 최종 회의록 확정됨 (확정 버전 번호)
+  - 확정 시간 기록
+  - AI가 자동으로 Todo 항목 추출 (UFR-AI-020 연동)
+  - 회의록 공유 가능 상태로 전환
+
+  [필수 항목 미작성 시]
+  - 누락된 항목 안내 메시지 표시
+  - 해당 섹션으로 자동 이동
+
+- M/13
+
+---
+
+3) 회의록 공유
+UFR-MEET-060: [회의록공유] 회의록 작성자로서 | 나는, 회의 내용을 참석자들과 공유하기 위해 | 최종 회의록을 공유하고 싶다.
+- 시나리오: 회의록 공유
+  최종 회의록이 확정된 상황에서 | 공유 버튼을 클릭하고 공유 대상과 권한을 설정하면 | 공유 링크가 생성되고 참석자 전원에게 알림이 발송된다.
+
+  [공유 설정]
+  - 공유 대상: 참석자 전체 (기본) / 특정 참석자 선택
+  - 공유 권한: 읽기 전용 / 댓글 가능 / 편집 가능
+  - 공유 방식: 이메일 / 슬랙 / 링크 복사
+
+  [처리 결과]
+  - 공유 링크 생성 (고유 URL)
+  - 참석자에게 이메일/슬랙 알림 발송
+  - 공유 시간 기록
+  - 다음 회의 일정이 언급된 경우 캘린더에 자동 등록 (UFR-CAL-010 연동)
+
+  [공유 링크 보안]
+  - 링크 유효 기간 설정 (선택)
+  - 비밀번호 설정 (선택)
+
+- M/13
+
+---
+
+3. STT 서비스
+1) 음성 인식 및 변환
+UFR-STT-010: [음성녹음인식] 회의 참석자로서 | 나는, 발언 내용이 자동으로 기록되기 위해 | 음성이 실시간으로 녹음되고 인식되기를 원한다.
+- 시나리오: 음성 녹음 및 발언 인식
+  회의가 시작된 상황에서 | 참석자가 발언을 시작하면 | 음성이 자동으로 녹음되고 화자가 식별되며 발언이 인식된다.
+
+  [음성 녹음 처리]
+  - 오디오 스트림 실시간 캡처
+  - 회의 ID와 연결
+  - 음성 데이터 저장 (클라우드 스토리지)
+
+  [발언 인식 처리]
+  - AI 음성인식 엔진 연동 (Whisper, Google STT 등)
+  - 화자 자동 식별
+    - 참석자 목록 매칭
+    - 음성 특징 분석
+  - 타임스탬프 기록
+  - 발언 구간 구분
+
+  [처리 결과]
+  - 음성 녹음이 시작됨 (녹음 ID)
+  - 발언이 인식됨 (발언 ID, 화자, 타임스탬프)
+  - 실시간으로 텍스트 변환 요청 (UFR-STT-020 연동)
+
+  [성능 요구사항]
+  - 발언 인식 지연 시간: 1초 이내
+  - 화자 식별 정확도: 90% 이상
+
+- M/21
+
+---
+
+UFR-STT-020: [텍스트변환] 회의록 시스템으로서 | 나는, 인식된 발언을 회의록에 기록하기 위해 | 음성을 텍스트로 변환하고 싶다.
+- 시나리오: 음성-텍스트 변환
+  발언이 인식된 상황에서 | AI 음성인식 엔진에 텍스트 변환을 요청하면 | 음성이 텍스트로 변환되고 정확도와 함께 반환된다.
+
+  [텍스트 변환 처리]
+  - 인식된 발언 데이터 전달
+  - 언어 설정 (한국어, 영어 등)
+  - AI 음성인식 엔진 처리
+  - 문장 부호 자동 추가
+  - 숫자/날짜 형식 정규화
+
+  [처리 결과]
+  - 텍스트가 변환됨 (텍스트 ID)
+  - 변환된 내용 (원문 텍스트)
+  - 정확도 점수 (0-100%)
+  - AI 회의록 자동 작성 요청 (UFR-AI-010 연동)
+
+  [정확도 낮은 경우]
+  - 정확도 60% 미만 시 경고 표시
+  - 수동 수정 인터페이스 제공
+
+- 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
+
+---
+
+5. RAG 서비스
+1) 전문용어 지원
+UFR-RAG-010: [전문용어감지] 회의록 작성자로서 | 나는, 업무 지식이 없어도 회의록을 정확히 작성하기 위해 | 전문용어가 자동으로 감지되고 설명을 제공받고 싶다.
+- 시나리오: 전문용어 자동 감지
+  회의록이 작성되는 상황에서 | 시스템이 회의록 텍스트를 분석하면 | 전문용어가 자동으로 감지되고 하이라이트 표시된다.
+
+  [전문용어 감지 처리]
+  - 회의록 텍스트 실시간 분석
+  - 용어 사전과 비교
+    - 조직별 전문용어 DB
+    - 산업별 표준 용어 DB
+  - 신뢰도 계산 (0-100%)
+  - 감지된 용어 위치 기록
+
+  [처리 결과]
+  - 전문용어가 감지됨
+  - 감지된 용어 정보
+    - 용어명
+    - 감지 위치 (줄 번호, 문단)
+    - 신뢰도 점수
+  - 용어 하이라이트 표시
+  - RAG 검색 자동 실행 (UFR-RAG-020 연동)
+
+  [Policy/Rule]
+  - 신뢰도 70% 이상만 자동 감지
+  - 중복 용어는 첫 번째만 하이라이트
+
+- S/13
+
+---
+
+UFR-RAG-020: [용어설명제공] 회의록 작성자로서 | 나는, 전문용어를 이해하기 위해 | 용어에 대한 설명을 자동으로 제공받고 싶다.
+- 시나리오: 용어 설명 자동 제공
+  전문용어가 감지된 상황에서 | RAG 시스템이 용어 설명을 검색하면 | 과거 회의록 및 사내 문서에서 관련 설명이 생성되어 제공된다.
+
+  [RAG 검색 수행]
+  - 벡터 유사도 검색
+    - 과거 회의록 검색
+    - 사내 문서 저장소 검색 (위키, 매뉴얼, 보고서)
+  - 관련 문서 추출 (관련도 점수순)
+  - 최대 5개 문서 선택
+
+  [LLM 설명 생성]
+  - 검색된 문서 내용 분석
+  - 용어 정의 추출
+  - 회의 맥락에 맞는 설명 생성
+    - 간단한 정의 (1-2문장)
+    - 상세 설명
+    - 사용 예시
+    - 참조 출처
+
+  [처리 결과]
+  - 용어 설명이 생성됨 (설명 ID)
+  - 설명 내용
+    - 간단한 정의
+    - 상세 설명
+    - 참조 문서 링크
+  - 툴팁 또는 사이드 패널로 표시
+  - 설명 제공 시간 기록
+
+  [설명을 찾지 못한 경우]
+  - "설명을 찾을 수 없습니다" 메시지 표시
+  - 전문가(회의 참석자)에게 설명 요청 버튼 제공
+  - 수동 입력된 설명은 용어 사전에 자동 저장
+
+- 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 내용
+    - 마감일
+    - 회의록 링크
+
+  [캘린더 연동]
+  - 마감일이 있는 경우 캘린더에 자동 등록
+  - 마감일 3일 전 리마인더 일정 생성
+
+  [처리 결과]
+  - Todo가 할당됨 (Todo ID)
+  - 담당자 정보
+  - 마감일
+  - 할당 시간
+  - 담당자에게 알림이 발송됨
+  - 캘린더 등록 완료
+
+  [Policy/Rule]
+  - Todo 할당 시 담당자에게 즉시 알림 발송
+
+- M/13
+
+---
+
+UFR-TODO-020: [Todo진행상황업데이트] Todo 담당자로서 | 나는, Todo 진행 상황을 공유하기 위해 | 진행률을 업데이트하고 상태를 변경하고 싶다.
+- 시나리오: Todo 진행 상황 업데이트
+  할당된 Todo가 있는 상황에서 | 담당자가 진행률과 상태를 입력하면 | 진행 상황이 저장되고 회의 주최자에게 알림이 발송된다.
+
+  [진행 상황 입력]
+  - 진행률: 0-100% (슬라이더 또는 직접 입력)
+  - 상태: 시작 전 / 진행 중 / 완료
+  - 메모: 진행 상황 설명 (선택)
+
+  [진행 상황 저장]
+  - 업데이트 시간 기록
+  - 진행률 히스토리 저장
+  - 상태 변경 이력 저장
+
+  [알림 발송]
+  - 회의 주최자에게 진행 상황 알림
+  - 진행률이 50%, 100%에 도달하면 자동 알림
+
+  [처리 결과]
+  - Todo 진행 상황이 업데이트됨
+  - 업데이트 시간
+  - 진행률 (%)
+  - 상태 (시작 전/진행 중/완료)
+  - 회의록에 진행 상황 반영
+
+- M/5
+
+---
+
+UFR-TODO-030: [Todo완료처리] Todo 담당자로서 | 나는, 완료된 Todo를 처리하기 위해 | Todo를 완료하고 회의록에 자동 반영하고 싶다.
+- 시나리오: Todo 완료 처리
+  Todo 작업이 완료된 상황에서 | 담당자가 완료 버튼을 클릭하면 | Todo가 완료 상태로 변경되고 회의록에 자동 반영되며 회의 주최자에게 알림이 발송된다.
+
+  [완료 처리]
+  - 완료 시간 자동 기록
+  - 완료자 정보 저장
+  - 완료 상태로 변경
+  - 완료 여부 확인 다이얼로그 표시
+
+  [회의록 반영]
+  - 관련 회의록의 Todo 섹션 업데이트
+  - 완료 표시 (체크 아이콘)
+  - 완료 시간 기록
+
+  [알림 발송]
+  - 회의 주최자에게 완료 알림
+  - 모든 Todo 완료 시 전체 완료 알림
+
+  [처리 결과]
+  - Todo가 완료됨
+  - 완료 시간
+  - 완료자 정보
+  - 회의록에 완료 상태가 반영됨
+  - 반영 시간
+  - 회의록 버전 업데이트
+
+  [Policy/Rule]
+  - Todo 완료 시 회의록에 완료 상태 자동 반영
+  - 모든 Todo 완료 시 회의 주최자에게 완료 알림
+
+- M/8
+
+---
+
+8. Notification 서비스
+1) 알림 관리
+UFR-NOTI-010: [알림리마인더] 회의 참석자로서 | 나는, 중요한 일정을 놓치지 않기 위해 | 회의 및 Todo 관련 알림과 리마인더를 받고 싶다.
+- 시나리오 1: 회의 알림
+  회의가 예약된 상황에서 | 회의 시작 30분 전이 되면 | 참석자에게 리마인더가 자동 발송된다.
+
+  [회의 알림 유형]
+  - 회의 초대: 회의 예약 시
+  - 회의 시작 리마인더: 30분 전
+  - 회의록 공유: 회의 종료 후
+
+- 시나리오 2: Todo 알림
+  Todo가 할당된 상황에서 | 마감일 3일 전이 되면 | 담당자에게 리마인더가 자동 발송된다.
+
+  [Todo 알림 유형]
+  - Todo 할당: 할당 즉시
+  - 마감일 3일 전 리마인더
+  - 마감일 당일 리마인더
+  - 마감일 경과 긴급 알림 (미완료 시)
+  - Todo 완료: 완료 시
+
+  [알림 채널]
+  - 이메일 (기본)
+  - 슬랙 (연동 시)
+  - 인앱 알림
+
+  [알림 설정]
+  - 알림 채널 선택
+  - 알림 시간 설정
+  - 알림 끄기/켜기
+
+  [처리 결과]
+  - 알림이 발송됨 (알림 ID)
+  - 알림 대상 (이메일 주소, 슬랙 ID)
+  - 알림 내용
+  - 발송 시간
+  - 발송 채널
+  - 발송 상태 (성공/실패)
+
+  [Policy/Rule]
+  - 회의 시작 30분 전 리마인더 자동 발송
+  - 마감일 3일 전 자동 리마인더 발송
+  - 마감일 당일 미완료 시 긴급 알림 발송
+
+- M/13
+
+---
+
+9. Calendar 서비스
+1) 일정 관리
+UFR-CAL-010: [일정연동] 회의록 작성자로서 | 나는, 일정을 통합 관리하기 위해 | 회의 및 다음 회의 일정을 외부 캘린더에 자동으로 연동하고 싶다.
+- 시나리오 1: 회의 일정 자동 등록
+  회의가 예약된 상황에서 | 시스템이 일정 동기화를 요청하면 | 회의 일정이 Google Calendar, Outlook 등 외부 캘린더에 자동으로 등록된다.
+
+  [일정 등록 정보]
+  - 회의 제목
+  - 날짜 및 시간
+  - 장소
+  - 참석자 목록
+  - 회의록 링크 (메모)
+
+- 시나리오 2: 다음 회의 일정 연동
+  회의록에서 다음 회의 일정이 언급된 상황에서 | 시스템이 자동으로 감지하면 | 다음 회의 일정이 캘린더에 자동으로 생성된다.
+
+  [자동 감지 키워드]
+  - "다음 회의: ~"
+  - "~에 다시 모이기로 함"
+  - "후속 회의 일정: ~"
+
+  [처리 결과]
+  - 일정이 캘린더에 연동됨 (일정 ID)
+  - 연동 상태 (성공/실패)
+  - 캘린더 종류 (Google Calendar, Outlook)
+  - 연동 시간
+
+  [지원 캘린더]
+  - Google Calendar
+  - Microsoft Outlook
+  - Apple Calendar
+
+  [Policy/Rule]
+  - 다음 회의 일정이 언급되면 자동으로 캘린더에 등록
+
+- S/13
+
+---
+```
diff --git a/design/style-guide.md b/design/style-guide.md
new file mode 100644
index 0000000..4bb958f
--- /dev/null
+++ b/design/style-guide.md
@@ -0,0 +1,1184 @@
+# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드
+
+**버전**: 1.0
+**작성일**: 2025-10-15
+**작성자**: 유진 (Frontend Developer)
+**레퍼런스**: 클로바노트 (Naver)
+
+---
+
+## 목차
+
+1. [브랜드 아이덴티티](#1-브랜드-아이덴티티)
+2. [디자인 원칙](#2-디자인-원칙)
+3. [컬러 시스템](#3-컬러-시스템)
+4. [타이포그래피](#4-타이포그래피)
+5. [간격 시스템](#5-간격-시스템)
+6. [컴포넌트 스타일](#6-컴포넌트-스타일)
+7. [반응형 브레이크포인트](#7-반응형-브레이크포인트)
+8. [회의록 서비스 특화 컴포넌트](#8-회의록-서비스-특화-컴포넌트)
+9. [인터랙션 패턴](#9-인터랙션-패턴)
+10. [변경 이력](#10-변경-이력)
+
+---
+
+## 1. 브랜드 아이덴티티
+
+### 1.1 디자인 컨셉
+
+**"Smart Collaboration"** - 스마트한 협업 도구
+
+회의록 작성 및 공유 서비스는 AI 기반의 자동화와 실시간 협업을 통해 업무 효율을 극대화하는 스마트한 협업 플랫폼입니다.
+
+### 1.2 핵심 가치
+
+| 가치 | 설명 | 디자인 반영 |
+|------|------|------------|
+| **정확성** | 누락 없이 정확하게 기록 | 명확한 시각적 위계, 검증 상태 표시 |
+| **효율성** | AI 자동화로 작성 부담 감소 | AI 제안 영역, 자동 완성 패턴 |
+| **협업** | 실시간 동기화 및 공유 | 협업 인디케이터, 커서 표시 |
+| **접근성** | 업무 지식 없이도 사용 가능 | 전문용어 설명, 친근한 일러스트레이션 |
+
+### 1.3 브랜드 성격
+
+- **전문적이면서도 친근한**: 업무용 도구이지만 사용하기 쉬운
+- **신뢰감 + 혁신성**: AI 기능의 정확성과 미래지향적 이미지
+- **협업 중심**: 개인이 아닌 팀의 성공을 지원
+
+### 1.4 비주얼 무드
+
+- **색상**: 밝고 활기찬 청록색 (혁신, 성장, 활력)
+- **형태**: 둥근 모서리, 부드러운 곡선 (친근함, 접근성)
+- **일러스트레이션**: 캐릭터 기반, 간결하고 현대적 (클로바노트 스타일 참조)
+
+---
+
+## 2. 디자인 원칙
+
+### 2.1 명확성 (Clarity)
+
+**사용자가 무엇을 해야 하는지 즉시 이해 가능해야 합니다.**
+
+- 명확한 시각적 위계 유지
+- 혼란스러운 요소 최소화
+- 액션 버튼의 목적을 분명히 표현
+- 에러 메시지는 문제와 해결 방법을 함께 제시
+
+**예시**:
+- ✅ "회의록을 저장하지 못했습니다. 네트워크 연결을 확인하고 다시 시도해주세요."
+- ❌ "오류가 발생했습니다."
+
+### 2.2 효율성 (Efficiency)
+
+**최소한의 클릭으로 목표를 달성할 수 있어야 합니다.**
+
+- 자주 사용하는 기능은 빠른 접근 제공 (FAB, 단축키)
+- 불필요한 단계 제거
+- 자동 완성 및 제안 기능 활용
+- 키보드 단축키 지원
+
+**예시**:
+- Ctrl+N: 새 회의 예약
+- Ctrl+S: 회의록 저장
+- Ctrl+F: 검색
+
+### 2.3 일관성 (Consistency)
+
+**동일한 패턴과 예측 가능한 동작을 유지해야 합니다.**
+
+- 동일한 기능은 동일한 아이콘과 레이블 사용
+- 색상, 타이포그래피, 간격의 일관된 적용
+- 네비게이션 구조 일관성 유지
+- 브랜드 아이덴티티 유지
+
+### 2.4 피드백 (Feedback)
+
+**모든 액션에 즉각적이고 명확한 피드백을 제공해야 합니다.**
+
+- 버튼 클릭 시 시각적 피드백 (호버, 액티브 상태)
+- 로딩 상태 명확히 표시 (스켈레톤 UI, 스피너)
+- 성공/실패 토스트 알림
+- 실시간 저장 상태 표시 ("저장됨", "저장 중...")
+
+### 2.5 접근성 (Accessibility)
+
+**모든 사용자가 서비스를 쉽게 이용할 수 있어야 합니다.**
+
+- WCAG 2.1 Level AA 준수
+- 키보드 네비게이션 지원
+- 스크린 리더 호환
+- 충분한 색상 대비 (4.5:1 이상)
+- 터치 영역 최소 44x44px
+
+### 2.6 협업 중심 (Collaboration-First)
+
+**실시간 협업이 핵심 경험이 되어야 합니다.**
+
+- 다른 사용자의 활동을 명확히 표시 (커서, 아바타)
+- 실시간 변경 사항 즉시 반영
+- 충돌 방지 및 해결 메커니즘
+- 버전 관리 및 변경 이력 추적
+
+---
+
+## 3. 컬러 시스템
+
+### 3.1 Primary Color (주요 액션, 브랜드)
+
+**Teal/Emerald** - 혁신, 성장, 활력을 상징
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Primary-Light | `#4DFFDB` | rgb(77, 255, 219) | 호버, 비활성화 상태 |
+| **Primary-Main** | **`#00D9B1`** | **rgb(0, 217, 177)** | **주요 버튼, 링크, 강조** |
+| Primary-Dark | `#00A88A` | rgb(0, 168, 138) | 눌림 상태, 강조 |
+
+**사용 예시**:
+- Primary 버튼 배경
+- 링크 텍스트
+- 체크박스, 라디오 버튼 선택 상태
+- 진행률 바
+- FAB (Floating Action Button)
+
+### 3.2 Secondary Color (보조, 협업 강조)
+
+**Indigo** - 협업, 신뢰, 전문성을 상징
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Secondary-Light | `#A5B4FC` | rgb(165, 180, 252) | 배경, 비활성화 |
+| **Secondary-Main** | **`#6366F1`** | **rgb(99, 102, 241)** | **보조 버튼, 협업 요소** |
+| Secondary-Dark | `#4F46E5` | rgb(79, 70, 229) | 강조 |
+
+**사용 예시**:
+- 협업 인디케이터 (다른 사용자 커서)
+- 보조 버튼
+- 배지 (검증 중 상태)
+- 알림 아이콘
+
+### 3.3 Semantic Colors (상태 표현)
+
+#### Success (성공, 완료)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Success-Light | `#6EE7B7` | rgb(110, 231, 183) | 배경 |
+| **Success-Main** | **`#10B981`** | **rgb(16, 185, 129)** | **완료, 검증 완료** |
+| Success-Dark | `#059669` | rgb(5, 150, 105) | 강조 |
+
+#### Warning (경고, 주의)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Warning-Light | `#FCD34D` | rgb(252, 211, 77) | 배경 |
+| **Warning-Main** | **`#F59E0B`** | **rgb(245, 158, 11)** | **경고, 작성 중** |
+| Warning-Dark | `#D97706` | rgb(217, 119, 6) | 강조 |
+
+#### Error (오류, 실패)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Error-Light | `#FCA5A5` | rgb(252, 165, 165) | 배경 |
+| **Error-Main** | **`#EF4444`** | **rgb(239, 68, 68)** | **오류, 긴급** |
+| Error-Dark | `#DC2626` | rgb(220, 38, 38) | 강조 |
+
+#### Info (정보, 알림)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Info-Light | `#93C5FD` | rgb(147, 197, 253) | 배경 |
+| **Info-Main** | **`#3B82F6`** | **rgb(59, 130, 246)** | **정보, 알림** |
+| Info-Dark | `#2563EB` | rgb(37, 99, 235) | 강조 |
+
+### 3.4 Neutral Colors (배경, 텍스트, 테두리)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Gray-50 | `#F9FAFB` | rgb(249, 250, 251) | 페이지 배경 |
+| Gray-100 | `#F3F4F6` | rgb(243, 244, 246) | 카드 배경, 호버 |
+| Gray-200 | `#E5E7EB` | rgb(229, 231, 235) | 테두리 |
+| Gray-300 | `#D1D5DB` | rgb(209, 213, 219) | 비활성화 테두리 |
+| Gray-400 | `#9CA3AF` | rgb(156, 163, 175) | 플레이스홀더 |
+| Gray-500 | `#6B7280` | rgb(107, 114, 128) | 보조 텍스트 |
+| Gray-600 | `#4B5563` | rgb(75, 85, 99) | 본문 텍스트 |
+| Gray-700 | `#374151` | rgb(55, 65, 81) | 제목 |
+| Gray-800 | `#1F2937` | rgb(31, 41, 55) | 강조 제목 |
+| Gray-900 | `#111827` | rgb(17, 24, 39) | 최고 강조 |
+| White | `#FFFFFF` | rgb(255, 255, 255) | 카드, 모달 배경 |
+| Black | `#000000` | rgb(0, 0, 0) | 절대 검정 (거의 사용 안 함) |
+
+### 3.5 다크모드 (선택적)
+
+다크모드를 지원하는 경우 다음 색상을 사용합니다.
+
+| 요소 | 라이트모드 | 다크모드 |
+|------|-----------|---------|
+| 페이지 배경 | Gray-50 | Gray-900 |
+| 카드 배경 | White | Gray-800 |
+| 본문 텍스트 | Gray-600 | Gray-100 |
+| 제목 | Gray-900 | Gray-50 |
+| 테두리 | Gray-200 | Gray-700 |
+| Primary | #00D9B1 | #22D3B0 (밝기 조정) |
+
+### 3.6 색상 사용 가이드
+
+#### 텍스트 색상
+
+- **제목**: Gray-900 (라이트), Gray-50 (다크)
+- **본문**: Gray-600 (라이트), Gray-100 (다크)
+- **보조 텍스트**: Gray-500
+- **플레이스홀더**: Gray-400
+- **링크**: Primary-Main (호버 시 Primary-Dark)
+- **에러 텍스트**: Error-Main
+
+#### 배경 색상
+
+- **페이지**: Gray-50 (라이트), Gray-900 (다크)
+- **카드**: White (라이트), Gray-800 (다크)
+- **호버**: Gray-100
+- **선택**: Primary-Light (투명도 20%)
+
+#### 테두리 색상
+
+- **기본**: Gray-200
+- **호버**: Gray-300
+- **포커스**: Primary-Main (2px)
+- **에러**: Error-Main
+
+---
+
+## 4. 타이포그래피
+
+### 4.1 폰트 패밀리
+
+#### Primary Font (본문 및 UI)
+
+**한글**: Pretendard
+- 깔끔한 고딕 계열
+- 뛰어난 가독성
+- 다양한 굵기 지원 (100~900)
+- 시스템 폰트와 유사한 렌더링
+
+**영문/숫자**: Inter
+- 웹 환경 최적화
+- 명확한 문자 구분 (l, I, 1 등)
+- Pretendard와 조화로운 조합
+
+**폰트 스택**:
+```css
+font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
+```
+
+#### Monospace Font (코드, 데이터)
+
+**Fira Code, Consolas**
+- 코드 스니펫
+- API 응답
+- 로그, 에러 메시지
+
+**폰트 스택**:
+```css
+font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+```
+
+### 4.2 폰트 크기 스케일
+
+**1.25 배율 기반**
+
+| 레벨 | 이름 | 크기 (px / rem) | 사용처 |
+|------|------|----------------|--------|
+| 1 | Display | 48px / 3rem | 랜딩 페이지 메인 제목 |
+| 2 | H1 | 36px / 2.25rem | 페이지 제목 |
+| 3 | H2 | 30px / 1.875rem | 주요 섹션 제목 |
+| 4 | H3 | 24px / 1.5rem | 서브 섹션 제목 |
+| 5 | H4 | 20px / 1.25rem | 카드 제목, 작은 섹션 |
+| 6 | Body-Large | 18px / 1.125rem | 강조 본문, 리드 텍스트 |
+| 7 | **Body** | **16px / 1rem** | **기본 본문 (기준점)** |
+| 8 | Body-Small | 14px / 0.875rem | 보조 정보, 캡션 |
+| 9 | Caption | 12px / 0.75rem | 작은 라벨, 타임스탬프 |
+
+### 4.3 폰트 굵기 (Font Weight)
+
+| 레벨 | 값 | 사용처 |
+|------|---|--------|
+| Light | 300 | 보조 정보, 긴 본문 (선택적) |
+| **Regular** | **400** | **기본 본문** |
+| Medium | 500 | 강조 본문, 버튼 텍스트 |
+| SemiBold | 600 | 제목 (H3, H4), 중요 정보 |
+| Bold | 700 | 큰 제목 (H1, H2), 최고 강조 |
+
+### 4.4 행간 (Line Height)
+
+| 이름 | 값 | 사용처 |
+|------|---|--------|
+| Tight | 1.25 | 큰 제목 (Display, H1, H2) |
+| **Normal** | **1.5** | **본문 텍스트 (기본)** |
+| Relaxed | 1.75 | 긴 본문, 읽기 편안함 필요 시 |
+
+### 4.5 자간 (Letter Spacing)
+
+| 이름 | 값 | 사용처 |
+|------|---|--------|
+| Tight | -0.02em | 큰 제목 (Display, H1) |
+| **Normal** | **0** | **본문 (기본)** |
+| Wide | 0.02em | 작은 캡션, 레이블 (대문자) |
+
+### 4.6 텍스트 스타일 예시
+
+#### Display
+```css
+font-size: 48px;
+font-weight: 700;
+line-height: 1.25;
+letter-spacing: -0.02em;
+```
+
+#### H1
+```css
+font-size: 36px;
+font-weight: 700;
+line-height: 1.25;
+letter-spacing: -0.02em;
+```
+
+#### H2
+```css
+font-size: 30px;
+font-weight: 600;
+line-height: 1.25;
+letter-spacing: 0;
+```
+
+#### H3
+```css
+font-size: 24px;
+font-weight: 600;
+line-height: 1.5;
+letter-spacing: 0;
+```
+
+#### Body (기본)
+```css
+font-size: 16px;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0;
+```
+
+#### Caption
+```css
+font-size: 12px;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0.02em;
+```
+
+---
+
+## 5. 간격 시스템
+
+### 5.1 기본 단위
+
+**8px 기반 시스템**
+
+모든 간격은 8의 배수를 사용하여 일관성과 시각적 리듬을 유지합니다.
+
+### 5.2 스케일
+
+| 레벨 | 값 (px / rem) | 사용처 |
+|------|--------------|--------|
+| 0 | 0px / 0 | 간격 없음 |
+| 1 | 4px / 0.25rem | 최소 간격 (아이콘-텍스트) |
+| 2 | 8px / 0.5rem | 작은 간격 (인라인 요소) |
+| 3 | 12px / 0.75rem | 밀접한 요소 (버튼 내부) |
+| **4** | **16px / 1rem** | **기본 간격** |
+| 5 | 20px / 1.25rem | 적당한 간격 |
+| 6 | 24px / 1.5rem | 컴포넌트 간 |
+| 8 | 32px / 2rem | 섹션 내부 |
+| 10 | 40px / 2.5rem | 섹션 간 |
+| 12 | 48px / 3rem | 큰 섹션 간 |
+| 16 | 64px / 4rem | 페이지 여백 |
+| 20 | 80px / 5rem | 대형 섹션 |
+
+### 5.3 컴포넌트별 간격
+
+#### 버튼
+- **패딩**: 12px (상하) × 24px (좌우) - 중형
+- **패딩 (소형)**: 8px (상하) × 16px (좌우)
+- **패딩 (대형)**: 16px (상하) × 32px (좌우)
+- **아이콘-텍스트 간격**: 8px
+
+#### 입력 필드
+- **패딩**: 12px (상하) × 16px (좌우)
+- **레이블-필드 간격**: 8px
+
+#### 카드
+- **패딩**: 24px
+- **카드 간 간격**: 16px (그리드), 24px (리스트)
+
+#### 모달
+- **패딩**: 32px
+- **헤더-본문 간격**: 24px
+- **본문-푸터 간격**: 32px
+
+#### 페이지 여백
+- **데스크탑**: 64px (좌우)
+- **태블릿**: 32px (좌우)
+- **모바일**: 24px (좌우)
+
+### 5.4 컨테이너 최대 너비
+
+| 크기 | 최대 너비 | 사용처 |
+|------|---------|--------|
+| Small | 640px | 폼, 로그인 화면 |
+| Medium | 768px | 템플릿 선택 |
+| Large | 1024px | 회의 예약 |
+| XLarge | 1280px | 대시보드 |
+| 2XLarge | 1536px | 회의 진행 (에디터) |
+| Full | 100% | 풀 레이아웃 |
+
+---
+
+## 6. 컴포넌트 스타일
+
+### 6.1 버튼 (Button)
+
+#### Primary Button (주요 액션)
+
+**스타일**:
+- 배경: Primary-Main (#00D9B1)
+- 텍스트: White
+- 패딩: 12px (상하) × 24px (좌우)
+- 테두리 반경: 8px
+- 폰트: Medium (500), 16px
+- 그림자: 없음 (기본), 0 2px 4px rgba(0, 0, 0, 0.1) (호버)
+
+**상태**:
+- **Hover**: 배경 Primary-Light + transform: translateY(-1px) + 그림자 증가
+- **Active**: 배경 Primary-Dark + transform: scale(0.98)
+- **Disabled**: 배경 Gray-300 + 텍스트 Gray-500 + 커서 not-allowed
+
+**코드 예시**:
+```css
+.btn-primary {
+  background-color: #00D9B1;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 16px;
+  transition: all 150ms ease-out;
+}
+
+.btn-primary:hover {
+  background-color: #4DFFDB;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary:active {
+  background-color: #00A88A;
+  transform: scale(0.98);
+}
+
+.btn-primary:disabled {
+  background-color: #D1D5DB;
+  color: #6B7280;
+  cursor: not-allowed;
+}
+```
+
+#### Secondary Button (보조 액션)
+
+**스타일**:
+- 배경: Transparent
+- 텍스트: Primary-Main
+- 테두리: 1px solid Primary-Main
+- 패딩: 12px × 24px
+- 테두리 반경: 8px
+
+**상태**:
+- **Hover**: 배경 Primary-Main (투명도 10%)
+- **Active**: 배경 Primary-Main (투명도 20%)
+- **Disabled**: 테두리 Gray-300 + 텍스트 Gray-400
+
+#### Text Button (덜 중요한 액션)
+
+**스타일**:
+- 배경: Transparent
+- 텍스트: Gray-700
+- 패딩: 8px × 16px
+- 테두리 반경: 8px
+
+**상태**:
+- **Hover**: 배경 Gray-100
+- **Active**: 배경 Gray-200
+
+#### Icon Button
+
+**스타일**:
+- 크기: 40×40px (중형), 32×32px (소형), 48×48px (대형)
+- 테두리 반경: 50% (원형) 또는 8px (사각형)
+- 아이콘 크기: 20px (중형), 16px (소형), 24px (대형)
+- 배경: Transparent
+
+**상태**:
+- **Hover**: 배경 Gray-100
+- **Active**: 배경 Gray-200
+
+#### Floating Action Button (FAB)
+
+**스타일**:
+- 크기: 56×56px
+- 테두리 반경: 50% (완전 원형)
+- 배경: Primary-Main
+- 아이콘: White, 24px
+- 그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
+- 위치: 우측 하단 고정 (16px 여백)
+
+**상태**:
+- **Hover**: 그림자 0 6px 16px rgba(0, 0, 0, 0.2) + transform: translateY(-2px)
+- **Active**: transform: scale(0.95)
+
+### 6.2 입력 필드 (Input Field)
+
+#### Text Input
+
+**스타일**:
+- 높이: 48px
+- 패딩: 12px (상하) × 16px (좌우)
+- 테두리: 1px solid Gray-300
+- 테두리 반경: 8px
+- 배경: White
+- 폰트: Regular, 16px
+- 플레이스홀더: Gray-400
+
+**상태**:
+- **Focus**: 테두리 Primary-Main 2px + outline 4px Primary-Main (투명도 20%)
+- **Error**: 테두리 Error-Main + 하단 에러 메시지 (Error-Main, 14px)
+- **Disabled**: 배경 Gray-100 + 텍스트 Gray-400 + 커서 not-allowed
+- **Success**: 테두리 Success-Main (선택적)
+
+**코드 예시**:
+```css
+.input {
+  height: 48px;
+  padding: 12px 16px;
+  border: 1px solid #D1D5DB;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 150ms ease-out;
+}
+
+.input:focus {
+  border-color: #00D9B1;
+  border-width: 2px;
+  outline: 4px solid rgba(0, 217, 177, 0.2);
+}
+
+.input.error {
+  border-color: #EF4444;
+}
+
+.input:disabled {
+  background-color: #F3F4F6;
+  color: #9CA3AF;
+  cursor: not-allowed;
+}
+```
+
+#### Textarea
+
+**스타일**:
+- 최소 높이: 120px
+- 패딩: 12px × 16px
+- 나머지는 Text Input과 동일
+- resize: vertical (세로 크기 조절 가능)
+
+#### Select / Dropdown
+
+**스타일**:
+- Input과 동일
+- 우측 아이콘: Chevron Down, 16px, Gray-500
+
+### 6.3 카드 (Card)
+
+**스타일**:
+- 배경: White
+- 테두리: 1px solid Gray-200 (선택적, 없을 수도 있음)
+- 테두리 반경: 12px
+- 패딩: 24px
+- 그림자: 0 1px 3px rgba(0, 0, 0, 0.1) (기본)
+
+**상태 (인터랙티브 카드)**:
+- **Hover**: 그림자 0 4px 12px rgba(0, 0, 0, 0.15) + transform: translateY(-2px)
+- **Active**: 그림자 0 1px 2px rgba(0, 0, 0, 0.1) + transform: scale(0.99)
+
+**코드 예시**:
+```css
+.card {
+  background-color: white;
+  border: 1px solid #E5E7EB;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 200ms ease-out;
+}
+
+.card.interactive:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+}
+```
+
+### 6.4 모달 (Modal)
+
+**스타일**:
+- 배경: White
+- 테두리 반경: 16px
+- 패딩: 32px
+- 최대 너비: 600px (중형), 800px (대형), 480px (소형)
+- 그림자: 0 20px 25px rgba(0, 0, 0, 0.15)
+
+**백드롭 (Backdrop)**:
+- 배경: rgba(0, 0, 0, 0.5)
+- 클릭 시 모달 닫기 (선택적)
+
+**애니메이션**:
+- 등장: Fade In (200ms) + Scale (0.95 → 1.0)
+- 사라짐: Fade Out (150ms) + Scale (1.0 → 0.95)
+
+### 6.5 토스트 알림 (Toast)
+
+**스타일**:
+- 배경: White
+- 테두리 반경: 8px
+- 패딩: 16px × 20px
+- 최대 너비: 400px
+- 그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
+- 위치: 우측 상단 (16px 여백)
+
+**타입별 색상**:
+- **Success**: 좌측 테두리 4px Success-Main + Success 아이콘
+- **Error**: 좌측 테두리 4px Error-Main + Error 아이콘
+- **Warning**: 좌측 테두리 4px Warning-Main + Warning 아이콘
+- **Info**: 좌측 테두리 4px Info-Main + Info 아이콘
+
+**동작**:
+- 자동 사라짐: 4초 후
+- 닫기 버튼: 우측 상단 X 아이콘
+- 애니메이션: 우측에서 슬라이드 인
+
+### 6.6 배지 (Badge)
+
+**스타일**:
+- 패딩: 4px (상하) × 12px (좌우)
+- 테두리 반경: 12px (완전 둥근 형태)
+- 폰트: Medium, 12px
+
+**타입별 색상**:
+- **Primary**: 배경 Primary-Light, 텍스트 Primary-Dark
+- **Success**: 배경 Success-Light, 텍스트 Success-Dark
+- **Warning**: 배경 Warning-Light, 텍스트 Warning-Dark
+- **Error**: 배경 Error-Light, 텍스트 Error-Dark
+- **Neutral**: 배경 Gray-200, 텍스트 Gray-700
+
+**사용 예시**:
+- 상태 표시: "작성 중", "검증 중", "확정됨"
+- 카운트: "3개의 알림", "5명 참석"
+
+---
+
+## 7. 반응형 브레이크포인트
+
+### 7.1 브레이크포인트 정의
+
+| 디바이스 | 범위 | 레이아웃 | 주요 조정 |
+|---------|------|---------|----------|
+| **Mobile** | 320px ~ 767px | 단일 컬럼 | 햄버거 메뉴, 하단 탭, 스택 레이아웃 |
+| **Tablet** | 768px ~ 1023px | 2단 레이아웃 | 토글 사이드바, 터치 최적화 |
+| **Desktop** | 1024px ~ 1439px | 3단 레이아웃 | 고정 사이드바, 키보드 단축키 |
+| **Large Desktop** | 1440px 이상 | 확장 레이아웃 | 더 넓은 중앙 패널, 4단 가능 |
+
+### 7.2 디바이스별 UI 조정
+
+#### Mobile (320px ~ 767px)
+
+**네비게이션**:
+- 햄버거 메뉴로 사이드바 숨김
+- 하단 탭 네비게이션 (대시보드, 회의, Todo, 더보기)
+- 상단 헤더 고정
+
+**레이아웃**:
+- 1단 스택 레이아웃
+- 카드/위젯을 세로로 배치
+- 패딩 감소 (24px → 16px)
+
+**인터랙션**:
+- 최소 터치 영역: 44×44px
+- 버튼 크기 증가
+- 스와이프 제스처 지원
+
+**05-회의진행 화면**:
+- 탭으로 패널 전환 (회의록 / 참석자 / AI 제안 / 용어 설명)
+- 툴바를 하단 고정 (터치 용이성)
+
+**09-Todo관리 화면**:
+- 칸반 보드 대신 리스트 뷰 권장
+- 상태 변경은 드롭다운으로
+
+#### Tablet (768px ~ 1023px)
+
+**네비게이션**:
+- 사이드바 토글 가능 (기본 숨김)
+- 상단 헤더에 메뉴 아이콘
+
+**레이아웃**:
+- 2단 그리드 레이아웃 (2×2 또는 2×3)
+- 적절한 여백 유지
+
+**05-회의진행 화면**:
+- 2단 레이아웃 (에디터 + AI 제안 패널)
+- 참석자 목록은 드로어로 표시
+
+**터치 최적화**:
+- 버튼 크기: 최소 44×44px
+- 간격: 최소 8px
+
+#### Desktop (1024px 이상)
+
+**네비게이션**:
+- 전체 사이드바 항상 표시
+- 호버 효과 및 툴팁
+
+**레이아웃**:
+- 3단 그리드 레이아웃 (3×2)
+- 더 많은 위젯 동시 표시
+
+**05-회의진행 화면**:
+- 3단 레이아웃 (참석자 + 에디터 + AI 제안)
+- 모든 패널 동시 표시
+
+**키보드 단축키**:
+- Ctrl+N: 새 회의
+- Ctrl+S: 저장
+- Ctrl+F: 검색
+- Ctrl+/: 단축키 가이드
+
+### 7.3 미디어 쿼리 예시
+
+```css
+/* Mobile First 접근 */
+.container {
+  padding: 16px;
+}
+
+/* Tablet */
+@media (min-width: 768px) {
+  .container {
+    padding: 32px;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .container {
+    padding: 64px;
+  }
+}
+
+/* Large Desktop */
+@media (min-width: 1440px) {
+  .container {
+    max-width: 1536px;
+    margin: 0 auto;
+  }
+}
+```
+
+---
+
+## 8. 회의록 서비스 특화 컴포넌트
+
+### 8.1 실시간 협업 인디케이터
+
+#### 사용자 커서
+
+**스타일**:
+- 사용자별 색상 코드:
+  - User 1: Primary-Main (#00D9B1)
+  - User 2: Secondary-Main (#6366F1)
+  - User 3: Warning-Main (#F59E0B)
+  - User 4: Info-Main (#3B82F6)
+  - User 5: Error-Main (#EF4444)
+- 커서 크기: 2px (너비) × 20px (높이)
+- 커서 상단에 아바타 + 이름 레이블
+- 레이블 배경: 사용자 색상, 텍스트: White
+- 레이블 패딩: 4px × 8px, 테두리 반경: 4px
+
+#### 편집 중 하이라이트
+
+**스타일**:
+- 배경: 사용자 색상 (투명도 20%)
+- 지속 시간: 사용자가 편집하는 동안 유지
+- 애니메이션: 부드러운 페이드인
+
+#### 변경 하이라이트
+
+**스타일**:
+- 배경: Warning-Light (노란색)
+- 지속 시간: 3초
+- 애니메이션: 3초 동안 페이드아웃
+
+### 8.2 상태 배지
+
+#### 작성 중
+
+**스타일**:
+- 배경: Warning-Light (#FCD34D)
+- 텍스트: Warning-Dark (#D97706)
+- 아이콘: Edit 아이콘 (선택적)
+
+#### 검증 중
+
+**스타일**:
+- 배경: Info-Light (#93C5FD)
+- 텍스트: Info-Dark (#2563EB)
+- 아이콘: Clock 아이콘 (선택적)
+
+#### 확정됨
+
+**스타일**:
+- 배경: Success-Light (#6EE7B7)
+- 텍스트: Success-Dark (#059669)
+- 아이콘: Check 아이콘 (선택적)
+
+### 8.3 전문용어 하이라이트
+
+**스타일**:
+- 밑줄: 2px dotted Primary-Main
+- 커서: pointer
+
+**호버 상태**:
+- 툴팁 표시
+  - 배경: Gray-800
+  - 텍스트: White
+  - 패딩: 8px × 12px
+  - 테두리 반경: 6px
+  - 최대 너비: 300px
+  - 화살표 표시
+
+**클릭 상태**:
+- 우측 패널의 "용어 설명" 탭으로 전환
+- 해당 용어 상세 설명 표시
+
+### 8.4 AI 제안 영역
+
+**스타일**:
+- 배경: Gray-50
+- 테두리: 1px dashed Primary-Main
+- 테두리 반경: 8px
+- 패딩: 16px
+- 아이콘: AI Sparkle 아이콘 (Primary-Main)
+
+**액션 버튼**:
+- 적용: Primary 버튼 (소형, 패딩 8px × 16px)
+- 무시: Text 버튼
+
+**애니메이션**:
+- 등장: 페이드인 + 약간의 상승 (translateY)
+- 업데이트: 부드러운 전환 (200ms)
+
+### 8.5 Todo 카드
+
+**레이아웃**:
+- 카드 형태
+- 패딩: 16px
+- 테두리 반경: 8px
+- 그림자: 0 1px 3px rgba(0, 0, 0, 0.1)
+
+**우선순위 표시**:
+- 높음: 좌측 테두리 4px Error-Main + Error 점 (8px 원)
+- 보통: 테두리 없음, Gray 점
+- 낮음: 표시 없음
+
+**진행률 바**:
+- 높이: 4px
+- 배경: Gray-200
+- 채워진 부분: Primary-Main
+- 테두리 반경: 2px
+- 위치: 하단
+
+**마감일 표시**:
+- D-day 형식: "D-3", "오늘", "D+2 (지남)"
+- 색상:
+  - 지남: Error-Main
+  - 오늘: Warning-Main
+  - 여유: Gray-500
+
+**드래그 핸들**:
+- 아이콘: 점 6개 (2×3)
+- 색상: Gray-400
+- 위치: 좌측 상단
+
+**호버 상태**:
+- 그림자 증가
+- 드래그 핸들 색상 변경 (Gray-600)
+
+### 8.6 타임라인
+
+**스타일**:
+- 세로 라인: 2px solid Gray-300
+- 위치: 좌측 고정
+
+**이벤트 점**:
+- 크기: 12px 원
+- 배경: Primary-Main
+- 테두리: 2px solid White
+- 위치: 라인 중앙
+
+**타임스탬프**:
+- 폰트: Caption (12px), Gray-500
+- 위치: 이벤트 점 우측
+
+**이벤트 내용**:
+- 폰트: Body-Small (14px), Gray-700
+- 위치: 타임스탬프 하단
+
+---
+
+## 9. 인터랙션 패턴
+
+### 9.1 버튼 인터랙션
+
+**Hover**:
+```css
+transition: all 150ms ease-out;
+transform: translateY(-1px);
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+```
+
+**Active (클릭)**:
+```css
+transform: scale(0.98);
+```
+
+**Disabled**:
+```css
+cursor: not-allowed;
+opacity: 0.6;
+```
+
+### 9.2 카드 인터랙션 (인터랙티브 카드)
+
+**Hover**:
+```css
+transition: all 200ms ease-out;
+transform: translateY(-2px);
+box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+```
+
+**클릭**:
+```css
+transform: scale(0.99);
+```
+
+### 9.3 모달 애니메이션
+
+**등장**:
+```css
+/* Backdrop */
+opacity: 0 → 1;
+transition: opacity 200ms ease-out;
+
+/* Modal */
+opacity: 0 → 1;
+transform: scale(0.95) → scale(1.0);
+transition: all 200ms ease-out;
+```
+
+**사라짐**:
+```css
+opacity: 1 → 0;
+transform: scale(1.0) → scale(0.95);
+transition: all 150ms ease-in;
+```
+
+### 9.4 토스트 알림 애니메이션
+
+**등장**:
+```css
+transform: translateX(400px) → translateX(0);
+opacity: 0 → 1;
+transition: all 200ms ease-out;
+```
+
+**사라짐**:
+```css
+transform: translateX(0) → translateX(400px);
+opacity: 1 → 0;
+transition: all 150ms ease-in;
+```
+
+**자동 사라짐**: 4초 후
+
+### 9.5 로딩 상태
+
+#### 스켈레톤 UI
+
+**스타일**:
+- 배경: Gray-200
+- 테두리 반경: 4px
+- 애니메이션: 펄스 (밝기 변화)
+
+```css
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.skeleton {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+```
+
+#### 스피너
+
+**스타일**:
+- 색상: Primary-Main
+- 크기: 24px (소형), 40px (중형), 56px (대형)
+- 애니메이션: 회전
+
+```css
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+```
+
+### 9.6 드래그 앤 드롭
+
+**드래그 시작**:
+```css
+opacity: 0.5;
+cursor: grabbing;
+```
+
+**드롭 영역 (유효)**:
+```css
+border: 2px dashed #00D9B1;
+background-color: rgba(0, 217, 177, 0.05);
+```
+
+**드롭 영역 (무효)**:
+```css
+border: 2px dashed #EF4444;
+background-color: rgba(239, 68, 68, 0.05);
+```
+
+**드롭 완료**:
+```css
+transition: all 300ms ease-out;
+transform: translate(newX, newY);
+```
+
+### 9.7 포커스 스타일
+
+**인풋/버튼 포커스**:
+```css
+outline: 4px solid rgba(0, 217, 177, 0.2);
+outline-offset: 0;
+border-color: #00D9B1;
+```
+
+**키보드 네비게이션 포커스**:
+```css
+/* 마우스 클릭 시에는 outline 숨김 */
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
+/* 키보드 탐색 시에만 outline 표시 */
+.focus-visible {
+  outline: 2px solid #00D9B1;
+  outline-offset: 2px;
+}
+```
+
+### 9.8 페이지 전환 애니메이션
+
+**페이드 전환**:
+```css
+/* 나가는 페이지 */
+opacity: 1 → 0;
+transition: opacity 150ms ease-out;
+
+/* 들어오는 페이지 */
+opacity: 0 → 1;
+transition: opacity 200ms ease-in;
+```
+
+---
+
+## 10. 변경 이력
+
+| 버전 | 날짜 | 작성자 | 변경 내용 |
+|------|------|--------|----------|
+| 1.0 | 2025-10-15 | 유진 | 초안 작성 - 레퍼런스 클로바노트 기반 스타일 가이드 설계 완료 |
+
+---
+
+## 부록
+
+### A. 색상 접근성 체크리스트
+
+- [ ] Primary-Main (#00D9B1) + White: 대비율 3.5:1 (AA Large) ✅
+- [ ] Gray-600 (#4B5563) + White: 대비율 8.6:1 (AAA) ✅
+- [ ] Primary-Main + Gray-900: 대비율 4.8:1 (AA) ✅
+- [ ] 모든 상태 색상 (Success, Warning, Error, Info) + White: AA 이상 ✅
+
+### B. 디자인 도구 및 에셋
+
+**권장 디자인 도구**:
+- Figma (프로토타입 및 디자인 시스템)
+- Adobe XD (대안)
+
+**아이콘 라이브러리**:
+- Heroicons (추천)
+- Feather Icons
+- Lucide Icons
+
+**일러스트레이션**:
+- unDraw (무료, 색상 커스터마이징 가능)
+- Storyset (Freepik)
+- 자체 제작 (브랜드 일관성)
+
+### C. 프론트엔드 구현 권장사항
+
+**CSS 프레임워크**:
+- Tailwind CSS (유틸리티 우선, 빠른 개발)
+- Emotion / styled-components (CSS-in-JS)
+
+**컴포넌트 라이브러리**:
+- Headless UI (접근성 우수)
+- Radix UI (무스타일 프리미티브)
+- 자체 제작 (완전한 커스터마이징)
+
+**애니메이션**:
+- Framer Motion (React)
+- GSAP (고급 애니메이션)
+- CSS Transitions (단순 애니메이션)
+
+### D. 참고 자료
+
+- **WCAG 2.1 가이드라인**: https://www.w3.org/WAI/WCAG21/quickref/
+- **클로바노트**: https://clovanote.naver.com/
+- **Pretendard 폰트**: https://cactus.tistory.com/306
+- **Tailwind CSS 컬러 팔레트**: https://tailwindcss.com/docs/customizing-colors
+
+---
+
+**문서 끝**
diff --git a/design/uiux/prototype/01-로그인.html b/design/uiux/prototype/01-로그인.html
index 774b43b..406bae3 100644
--- a/design/uiux/prototype/01-로그인.html
+++ b/design/uiux/prototype/01-로그인.html
@@ -3,24 +3,26 @@
 <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">
   <style>
+    /* 페이지 전용 스타일 */
     body {
       display: flex;
       align-items: center;
       justify-content: center;
       min-height: 100vh;
-      background: linear-gradient(135deg, #4DFFDB 0%, #00D9B1 100%);
+      background: linear-gradient(135deg, #00D9B1 0%, #6366F1 100%);
     }
 
-    .login-container {
-      background-color: white;
+    .login-card {
+      background-color: var(--color-white);
       border-radius: var(--radius-xl);
-      padding: var(--spacing-12);
-      max-width: 400px;
-      width: 90%;
+      padding: var(--spacing-10);
       box-shadow: var(--shadow-lg);
+      width: 100%;
+      max-width: 480px;
+      margin: var(--spacing-4);
     }
 
     .login-header {
@@ -28,279 +30,321 @@
       margin-bottom: var(--spacing-8);
     }
 
-    .logo-large {
-      font-size: 3rem;
-      color: var(--primary-main);
-      margin-bottom: var(--spacing-4);
+    .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: var(--font-h2);
-      color: var(--gray-900);
+      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: var(--font-body);
-      color: var(--gray-500);
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
     }
 
-    .login-form {
+    #loginForm {
+      margin-bottom: var(--spacing-6);
+    }
+
+    .form-group {
+      margin-bottom: var(--spacing-5);
+    }
+
+    .form-footer {
       display: flex;
-      flex-direction: column;
-      gap: var(--spacing-4);
-    }
-
-    .password-toggle {
-      position: relative;
-    }
-
-    .password-toggle-btn {
-      position: absolute;
-      right: var(--spacing-3);
-      top: 50%;
-      transform: translateY(-50%);
-      background: none;
-      border: none;
-      cursor: pointer;
-      color: var(--gray-500);
-      font-size: 1.2rem;
-    }
-
-    .login-options {
-      display: flex;
-      justify-content: space-between;
       align-items: center;
-      font-size: 0.875rem;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-5);
     }
 
-    .checkbox-label {
+    .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;
-      color: var(--gray-600);
     }
 
     .forgot-password {
-      color: var(--primary-main);
+      font-size: var(--font-size-body-small);
+      color: var(--color-primary-main);
       text-decoration: none;
+      transition: color var(--transition-fast);
     }
 
     .forgot-password:hover {
-      text-decoration: underline;
+      color: var(--color-primary-dark);
     }
 
-    .divider {
+    .login-footer {
       text-align: center;
-      margin: var(--spacing-6) 0;
-      position: relative;
+      padding-top: var(--spacing-6);
+      border-top: 1px solid var(--color-gray-200);
     }
 
-    .divider::before,
-    .divider::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      width: 45%;
-      height: 1px;
-      background-color: var(--gray-200);
+    .login-footer-text {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
     }
 
-    .divider::before { left: 0; }
-    .divider::after { right: 0; }
-
-    .divider-text {
-      background-color: white;
-      padding: 0 var(--spacing-3);
-      color: var(--gray-500);
-      font-size: 0.875rem;
+    .login-footer a {
+      color: var(--color-primary-main);
+      font-weight: var(--font-weight-medium);
+      text-decoration: none;
+      transition: color var(--transition-fast);
     }
 
-    .social-login {
-      display: flex;
-      gap: var(--spacing-3);
+    .login-footer a:hover {
+      color: var(--color-primary-dark);
     }
 
-    .social-btn {
-      flex: 1;
-      padding: var(--spacing-3);
-      border: 1px solid var(--gray-300);
+    /* 예시 크리덴셜 표시 */
+    .credential-hint {
+      background-color: var(--color-gray-50);
+      border: 1px dashed var(--color-gray-300);
       border-radius: var(--radius-md);
-      background-color: white;
-      cursor: pointer;
-      transition: all var(--transition-fast);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--spacing-2);
-      font-size: 0.875rem;
+      padding: var(--spacing-3);
+      margin-bottom: var(--spacing-5);
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
     }
 
-    .social-btn:hover {
-      background-color: var(--gray-50);
-      border-color: var(--gray-400);
+    .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="login-container">
+  <div class="login-card">
+    <!-- 헤더 -->
     <div class="login-header">
-      <div class="logo-large">📝</div>
-      <h1 class="login-title">회의록 작성 서비스</h1>
-      <p class="login-subtitle">AI와 함께하는 스마트한 회의록 관리</p>
+      <div class="login-logo">M</div>
+      <h1 class="login-title">회의록 서비스</h1>
+      <p class="login-subtitle">스마트한 협업의 시작</p>
     </div>
 
-    <form class="login-form" id="loginForm">
-      <div class="input-group">
-        <label for="email" class="input-label">이메일</label>
+    <!-- 예시 크리덴셜 (프로토타입용) -->
+    <div class="credential-hint">
+      <div class="credential-hint-title">📝 테스트 계정</div>
+      <div>이메일: <code>test@example.com</code></div>
+      <div>비밀번호: <code>password123</code></div>
+    </div>
+
+    <!-- 로그인 폼 -->
+    <form id="loginForm">
+      <div class="form-group">
+        <label for="email" class="form-label">이메일</label>
         <input
           type="email"
           id="email"
-          class="input"
+          class="form-input"
           placeholder="example@company.com"
           required
+          autocomplete="email"
         >
-        <span class="input-error hidden" id="emailError"></span>
       </div>
 
-      <div class="input-group">
-        <label for="password" class="input-label">비밀번호</label>
-        <div class="password-toggle">
-          <input
-            type="password"
-            id="password"
-            class="input"
-            placeholder="비밀번호를 입력하세요"
-            required
-          >
-          <button
-            type="button"
-            class="password-toggle-btn"
-            id="togglePassword"
-            aria-label="비밀번호 표시/숨김"
-          >
-            👁️
-          </button>
-        </div>
-        <span class="input-error hidden" id="passwordError"></span>
+      <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="login-options">
-        <label class="checkbox-label">
+      <div class="form-footer">
+        <div class="checkbox-wrapper">
           <input type="checkbox" id="rememberMe">
-          <span>로그인 상태 유지</span>
-        </label>
+          <label for="rememberMe">로그인 상태 유지</label>
+        </div>
         <a href="#" class="forgot-password">비밀번호 찾기</a>
       </div>
 
-      <button type="submit" class="btn btn-primary btn-lg">
+      <button type="submit" class="btn btn-primary" style="width: 100%;">
         로그인
       </button>
     </form>
 
-    <div class="divider">
-      <span class="divider-text">또는</span>
-    </div>
-
-    <div class="social-login">
-      <button class="social-btn" id="googleLogin">
-        <span>🔵</span>
-        <span>Google</span>
-      </button>
-      <button class="social-btn" id="microsoftLogin">
-        <span>🟦</span>
-        <span>Microsoft</span>
-      </button>
+    <!-- 푸터 -->
+    <div class="login-footer">
+      <p class="login-footer-text">
+        아직 계정이 없으신가요? <a href="#">회원가입</a>
+      </p>
     </div>
   </div>
 
+  <!-- JavaScript -->
   <script src="common.js"></script>
   <script>
-    // 비밀번호 표시/숨김 토글
-    document.getElementById('togglePassword').addEventListener('click', function() {
-      const passwordInput = document.getElementById('password');
-      const type = passwordInput.type === 'password' ? 'text' : 'password';
-      passwordInput.type = type;
-      this.textContent = type === 'password' ? '👁️' : '👁️‍🗨️';
+    // 로그인 폼 처리
+    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;
+      }
     });
 
-    // 로그인 폼 제출
-    document.getElementById('loginForm').addEventListener('submit', function(e) {
+    // 폼 제출 핸들러
+    loginForm.addEventListener('submit', async (e) => {
       e.preventDefault();
 
-      const email = document.getElementById('email').value;
-      const password = document.getElementById('password').value;
-      const rememberMe = document.getElementById('rememberMe').checked;
+      // 에러 초기화
+      MeetingApp.Validator.clearError(emailInput);
+      MeetingApp.Validator.clearError(passwordInput);
 
-      // 간단한 검증
-      const emailError = document.getElementById('emailError');
-      const passwordError = document.getElementById('passwordError');
+      const email = emailInput.value.trim();
+      const password = passwordInput.value.trim();
 
-      emailError.classList.add('hidden');
-      passwordError.classList.add('hidden');
-      document.getElementById('email').classList.remove('error');
-      document.getElementById('password').classList.remove('error');
+      // 유효성 검사
+      let isValid = true;
 
-      let hasError = false;
-
-      // 이메일 검증
-      if (!email.includes('@')) {
-        emailError.textContent = '올바른 이메일 주소를 입력하세요.';
-        emailError.classList.remove('hidden');
-        document.getElementById('email').classList.add('error');
-        hasError = 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 (password.length < 8) {
-        passwordError.textContent = '비밀번호는 최소 8자 이상이어야 합니다.';
-        passwordError.classList.remove('hidden');
-        document.getElementById('password').classList.add('error');
-        hasError = true;
+      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 (hasError) {
-        return;
+      if (!isValid) return;
+
+      // 로딩 표시
+      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>';
+
+      try {
+        // API 호출 시뮬레이션
+        await MeetingApp.API.post('/api/auth/login', { email, password });
+
+        // 로그인 성공 시뮬레이션 (테스트 계정 체크)
+        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'
+          });
+
+          // 로그인 상태 유지 체크
+          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(() => {
+            window.location.href = '02-대시보드.html';
+          }, 1000);
+
+        } else {
+          // 로그인 실패
+          MeetingApp.Toast.error('이메일 또는 비밀번호가 올바르지 않습니다.');
+          submitButton.disabled = false;
+          submitButton.textContent = originalText;
+        }
+
+      } catch (error) {
+        console.error('Login error:', error);
+        MeetingApp.Toast.error('로그인 중 오류가 발생했습니다. 다시 시도해주세요.');
+        submitButton.disabled = false;
+        submitButton.textContent = originalText;
       }
-
-      // 로그인 처리 (시뮬레이션)
-      const users = getFromStorage('users') || [];
-      const user = users.find(u => u.email === email);
-
-      if (!user) {
-        showToast('이메일 또는 비밀번호가 일치하지 않습니다.', 'error');
-        return;
-      }
-
-      // 로그인 성공
-      saveToStorage('currentUser', user);
-
-      if (rememberMe) {
-        localStorage.setItem('rememberMe', 'true');
-      }
-
-      showToast('로그인 성공!', 'success');
-
-      // 0.5초 후 대시보드로 이동
-      setTimeout(() => {
-        navigateTo('02-대시보드.html');
-      }, 500);
     });
 
-    // 소셜 로그인 (시뮬레이션)
-    document.getElementById('googleLogin').addEventListener('click', function() {
-      showToast('Google 로그인은 프로토타입에서 지원하지 않습니다.', 'info');
-    });
-
-    document.getElementById('microsoftLogin').addEventListener('click', function() {
-      showToast('Microsoft 로그인은 프로토타입에서 지원하지 않습니다.', 'info');
-    });
-
-    // 비밀번호 찾기
-    document.querySelector('.forgot-password').addEventListener('click', function(e) {
+    // 비밀번호 찾기 (프로토타입용)
+    document.querySelector('.forgot-password').addEventListener('click', (e) => {
       e.preventDefault();
-      showToast('비밀번호 재설정 이메일이 발송되었습니다.', 'success');
+      MeetingApp.Toast.info('비밀번호 찾기 기능은 준비 중입니다.');
+    });
+
+    // 회원가입 (프로토타입용)
+    document.querySelector('.login-footer a').addEventListener('click', (e) => {
+      e.preventDefault();
+      MeetingApp.Toast.info('회원가입 기능은 준비 중입니다.');
     });
   </script>
 </body>
diff --git a/design/uiux/prototype/02-대시보드.html b/design/uiux/prototype/02-대시보드.html
index 3b263d1..904a9e6 100644
--- a/design/uiux/prototype/02-대시보드.html
+++ b/design/uiux/prototype/02-대시보드.html
@@ -3,334 +3,468 @@
 <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">
   <style>
-    .dashboard-layout {
-      display: flex;
-      min-height: 100vh;
+    /* 레이아웃 */
+    body {
+      margin: 0;
+      padding: 0;
     }
 
-    .sidebar {
-      width: 250px;
-      background-color: white;
-      border-right: 1px solid var(--gray-200);
-      padding: var(--spacing-6);
-      position: fixed;
-      height: 100vh;
-      overflow-y: auto;
-    }
-
-    .sidebar-logo {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--primary-main);
-      margin-bottom: var(--spacing-8);
-      text-decoration: none;
-      display: block;
-    }
-
-    .sidebar-menu {
-      list-style: none;
-    }
-
-    .sidebar-menu-item {
-      margin-bottom: var(--spacing-2);
-    }
-
-    .sidebar-menu-link {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-3);
-      padding: var(--spacing-3);
-      border-radius: var(--radius-md);
-      text-decoration: none;
-      color: var(--gray-700);
-      transition: all var(--transition-fast);
-    }
-
-    .sidebar-menu-link:hover {
-      background-color: var(--gray-100);
-    }
-
-    .sidebar-menu-link.active {
-      background-color: var(--primary-light);
-      color: var(--primary-dark);
-      font-weight: 600;
-    }
-
-    .main-layout {
-      margin-left: 250px;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .top-header {
-      background-color: white;
-      border-bottom: 1px solid var(--gray-200);
-      padding: var(--spacing-4);
+    /* Header */
+    .dashboard-header {
       position: sticky;
       top: 0;
-      z-index: 100;
-    }
-
-    .header-content {
+      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);
     }
 
-    .search-bar {
-      flex: 1;
-      max-width: 600px;
-      position: relative;
-    }
-
-    .search-input {
-      width: 100%;
-      padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-10);
-      border: 1px solid var(--gray-300);
+    .logo {
+      width: 40px;
+      height: 40px;
+      background-color: var(--color-primary-main);
       border-radius: var(--radius-md);
-      font-size: 0.875rem;
-    }
-
-    .search-icon {
-      position: absolute;
-      left: var(--spacing-3);
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--gray-400);
-    }
-
-    .header-actions {
       display: flex;
       align-items: center;
-      gap: var(--spacing-3);
+      justify-content: center;
+      color: var(--color-white);
+      font-weight: var(--font-weight-bold);
+      font-size: 20px;
     }
 
-    .notification-btn {
+    .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;
     }
 
-    .notification-badge {
-      position: absolute;
-      top: -4px;
-      right: -4px;
-      background-color: var(--error-main);
-      color: white;
-      font-size: 0.75rem;
-      padding: 2px 6px;
-      border-radius: var(--radius-full);
-    }
-
-    .profile-btn {
+    .user-button {
       display: flex;
       align-items: center;
       gap: var(--spacing-2);
       padding: var(--spacing-2);
-      border-radius: var(--radius-md);
+      border: none;
+      background: none;
       cursor: pointer;
+      border-radius: var(--radius-md);
       transition: background-color var(--transition-fast);
     }
 
-    .profile-btn:hover {
-      background-color: var(--gray-100);
+    .user-button:hover {
+      background-color: var(--color-gray-100);
     }
 
-    .profile-avatar {
-      width: 32px;
-      height: 32px;
+    .user-avatar {
+      width: 36px;
+      height: 36px;
       border-radius: var(--radius-full);
-      background-color: var(--primary-main);
-      color: white;
+      background-color: var(--color-primary-main);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 1.2rem;
+      color: var(--color-white);
+      font-weight: var(--font-weight-medium);
     }
 
-    .dashboard-content {
-      padding: var(--spacing-8);
-      background-color: var(--gray-50);
+    .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);
     }
 
-    .dashboard-header {
-      margin-bottom: var(--spacing-6);
+    .user-dropdown.show {
+      display: block;
     }
 
-    .dashboard-title {
-      font: var(--font-h1);
-      margin-bottom: var(--spacing-2);
-    }
-
-    .dashboard-subtitle {
-      color: var(--gray-500);
-    }
-
-    .widget-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-      gap: var(--spacing-6);
-    }
-
-    .widget {
-      background-color: white;
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-6);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .widget-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: var(--spacing-4);
-    }
-
-    .widget-title {
-      font: var(--font-h4);
-    }
-
-    .widget-link {
-      color: var(--primary-main);
-      font-size: 0.875rem;
+    .dropdown-item {
+      display: block;
+      padding: var(--spacing-3) var(--spacing-4);
+      color: var(--color-gray-700);
       text-decoration: none;
-    }
-
-    .widget-link:hover {
-      text-decoration: underline;
-    }
-
-    .meeting-item {
-      padding: var(--spacing-3);
-      border-bottom: 1px solid var(--gray-100);
-      cursor: pointer;
       transition: background-color var(--transition-fast);
     }
 
-    .meeting-item:last-child {
-      border-bottom: none;
+    .dropdown-item:hover {
+      background-color: var(--color-gray-50);
     }
 
-    .meeting-item:hover {
-      background-color: var(--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-weight: 500;
-      margin-bottom: var(--spacing-1);
+      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: 0.875rem;
-      color: var(--gray-500);
+      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: flex-start;
-      gap: var(--spacing-3);
-      padding: var(--spacing-3);
-      border-bottom: 1px solid var(--gray-100);
+      align-items: center;
+      justify-content: space-between;
     }
 
-    .todo-item:last-child {
-      border-bottom: none;
+    .todo-item:hover {
+      box-shadow: var(--shadow-sm);
+      border-color: var(--color-primary-main);
     }
 
-    .todo-checkbox {
-      margin-top: 4px;
-    }
-
-    .todo-content {
+    .todo-left {
       flex: 1;
     }
 
-    .todo-text {
-      font-size: 0.875rem;
-      margin-bottom: var(--spacing-1);
+    .todo-title {
+      font-weight: var(--font-weight-medium);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
     }
 
-    .todo-due {
-      font-size: 0.75rem;
-      color: var(--gray-500);
+    .todo-meta {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-500);
     }
 
-    .todo-due.overdue {
-      color: var(--error-main);
+    .todo-right {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: var(--spacing-2);
     }
 
-    .stat-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: var(--spacing-4);
+    .dday {
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
     }
 
-    .stat-card {
-      text-align: center;
-      padding: var(--spacing-4);
-      background-color: var(--gray-50);
-      border-radius: var(--radius-md);
+    .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);
     }
 
-    .stat-number {
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--primary-main);
+    .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;
     }
 
-    .stat-label {
-      font-size: 0.875rem;
-      color: var(--gray-600);
+    .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>
+  <!-- Header -->
+  <header class="dashboard-header">
+    <div class="header-left">
+      <div class="logo">M</div>
+      <span class="service-name">회의록 서비스</span>
+    </div>
+    <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>
+        <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>
+
+  <!-- Main Layout -->
   <div class="dashboard-layout">
     <!-- Sidebar -->
     <aside class="sidebar">
-      <a href="02-대시보드.html" class="sidebar-logo">📝 회의록</a>
       <nav>
-        <ul class="sidebar-menu">
-          <li class="sidebar-menu-item">
-            <a href="02-대시보드.html" class="sidebar-menu-link active">
-              <span>🏠</span>
-              <span>대시보드</span>
+        <ul class="sidebar-nav">
+          <li class="nav-item">
+            <a href="02-대시보드.html" class="nav-link active">
+              <span>📊</span> 대시보드
             </a>
           </li>
-          <li class="sidebar-menu-item">
-            <a href="#" class="sidebar-menu-link">
-              <span>📄</span>
-              <span>내 회의록</span>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <span>📅</span> 회의 목록
             </a>
           </li>
-          <li class="sidebar-menu-item">
-            <a href="03-회의예약.html" class="sidebar-menu-link">
-              <span>📅</span>
-              <span>예정된 회의</span>
+          <li class="nav-item">
+            <a href="10-Todo관리.html" class="nav-link">
+              <span>✅</span> Todo 관리
             </a>
           </li>
-          <li class="sidebar-menu-item">
-            <a href="09-Todo관리.html" class="sidebar-menu-link">
-              <span>✅</span>
-              <span>Todo 목록</span>
-            </a>
-          </li>
-          <li class="sidebar-menu-item">
-            <a href="04-템플릿선택.html" class="sidebar-menu-link">
-              <span>📋</span>
-              <span>템플릿</span>
-            </a>
-          </li>
-          <li class="sidebar-menu-item">
-            <a href="#" class="sidebar-menu-link">
-              <span>⚙️</span>
-              <span>설정</span>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <span>⚙️</span> 설정
             </a>
           </li>
         </ul>
@@ -338,201 +472,215 @@
     </aside>
 
     <!-- Main Content -->
-    <div class="main-layout">
-      <!-- Header -->
-      <header class="top-header">
-        <div class="header-content">
-          <div class="search-bar">
-            <span class="search-icon">🔍</span>
-            <input type="text" class="search-input" placeholder="회의록 검색...">
-          </div>
-          <div class="header-actions">
-            <button class="btn-icon notification-btn">
-              <span>🔔</span>
-              <span class="notification-badge">3</span>
-            </button>
-            <div class="profile-btn" id="profileBtn">
-              <div class="profile-avatar" id="profileAvatar">👤</div>
-              <span id="profileName">사용자</span>
-            </div>
-          </div>
+    <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>
-      </header>
-
-      <!-- Dashboard Content -->
-      <main class="dashboard-content">
-        <div class="dashboard-header">
-          <h1 class="dashboard-title" id="welcomeMessage">안녕하세요!</h1>
-          <p class="dashboard-subtitle">오늘도 생산적인 하루 되세요</p>
+        <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="widget-grid">
-          <!-- 예정된 회의 -->
-          <div class="widget">
-            <div class="widget-header">
-              <h3 class="widget-title">예정된 회의</h3>
-              <a href="03-회의예약.html" class="widget-link">모두 보기</a>
-            </div>
-            <div id="scheduledMeetings"></div>
-          </div>
-
-          <!-- 최근 회의록 -->
-          <div class="widget">
-            <div class="widget-header">
-              <h3 class="widget-title">최근 회의록</h3>
-              <a href="#" class="widget-link">모두 보기</a>
-            </div>
-            <div id="recentMeetings"></div>
-          </div>
-
-          <!-- 대기 중인 Todo -->
-          <div class="widget">
-            <div class="widget-header">
-              <h3 class="widget-title">내가 할 일</h3>
-              <a href="09-Todo관리.html" class="widget-link">모두 보기</a>
-            </div>
-            <div id="pendingTodos"></div>
-          </div>
-
-          <!-- 통계 -->
-          <div class="widget">
-            <div class="widget-header">
-              <h3 class="widget-title">이번 주 통계</h3>
-            </div>
-            <div class="stat-grid">
-              <div class="stat-card">
-                <div class="stat-number" id="weeklyMeetings">0</div>
-                <div class="stat-label">회의</div>
-              </div>
-              <div class="stat-card">
-                <div class="stat-number" id="completedTodos">0</div>
-                <div class="stat-label">완료 Todo</div>
-              </div>
-            </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>
-      </main>
-    </div>
+      </section>
 
-    <!-- FAB -->
-    <button class="fab" id="fabBtn">+</button>
+      <!-- Recent Meetings -->
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title">최근 회의</h2>
+          <a href="#" 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="10-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="#" class="bottom-nav-item">
+      <div class="bottom-nav-icon">📅</div>
+      <div>회의</div>
+    </a>
+    <a href="10-Todo관리.html" class="bottom-nav-item">
+      <div class="bottom-nav-icon">✅</div>
+      <div>Todo</div>
+    </a>
+    <a href="#" 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>
-    // 사용자 정보 표시
-    const currentUser = getCurrentUser();
-    if (currentUser) {
-      document.getElementById('welcomeMessage').textContent = `안녕하세요, ${currentUser.name}님!`;
-      document.getElementById('profileName').textContent = currentUser.name;
-      document.getElementById('profileAvatar').textContent = currentUser.avatar;
+    const { AppState, Storage, Toast, MeetingUtils, formatDateTime, getDday, navigateTo } = window.MeetingApp;
+
+    // 인증 체크
+    MeetingApp.ready(() => {
+      const authToken = Storage.get('authToken');
+      if (!authToken) {
+        window.location.href = '01-로그인.html';
+        return;
+      }
+
+      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}님!`;
+
+        // AppState 업데이트
+        AppState.currentUser = currentUser;
+      }
+
+      // 데이터 로드 및 렌더링
+      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}%`;
     }
 
-    // 예정된 회의 표시
-    const scheduledMeetings = getScheduledMeetings();
-    const scheduledContainer = document.getElementById('scheduledMeetings');
-    if (scheduledMeetings.length > 0) {
-      scheduledContainer.innerHTML = scheduledMeetings.slice(0, 3).map(meeting => `
-        <div class="meeting-item" onclick="navigateTo('05-회의진행.html?id=${meeting.id}')">
-          <div class="meeting-title">${meeting.title}</div>
-          <div class="meeting-meta">
-            <span>📅 ${meeting.date}</span>
-            <span>🕐 ${meeting.time}</span>
+    // 회의 목록 렌더링
+    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 style="font-size: var(--font-size-body-small); color: var(--color-gray-600);">
+            ${meeting.description}
           </div>
         </div>
       `).join('');
-    } else {
-      scheduledContainer.innerHTML = '<p style="color: var(--gray-500); font-size: 0.875rem;">예정된 회의가 없습니다.</p>';
     }
 
-    // 최근 회의록 표시
-    const recentMeetings = getRecentMeetings(3);
-    const recentContainer = document.getElementById('recentMeetings');
-    if (recentMeetings.length > 0) {
-      recentContainer.innerHTML = recentMeetings.map(meeting => {
-        const statusClass = meeting.status === 'completed' ? 'success' : meeting.status === 'in_progress' ? 'warning' : 'neutral';
-        const statusText = meeting.status === 'completed' ? '확정됨' : meeting.status === 'in_progress' ? '작성 중' : '예정됨';
+    // Todo 목록 렌더링
+    function renderTodos() {
+      const todos = Storage.get('todos', []).filter(t => t.status !== 'done').slice(0, 5);
+      const todoList = document.getElementById('todoList');
+
+      if (todos.length === 0) {
+        todoList.innerHTML = '<p style="color: var(--color-gray-500);">할당된 Todo가 없습니다.</p>';
+        return;
+      }
+
+      todoList.innerHTML = todos.map(todo => {
+        const dday = getDday(todo.dueDate);
+        const ddayClass = dday.includes('지남') ? 'urgent' : (dday === '오늘' ? 'warning' : 'normal');
+
         return `
-          <div class="meeting-item" onclick="navigateTo('05-회의진행.html?id=${meeting.id}')">
-            <div class="meeting-title">${meeting.title}</div>
-            <div class="meeting-meta">
-              <span>📅 ${meeting.date}</span>
-              <span class="badge badge-${statusClass}">${statusText}</span>
+          <div class="todo-item" onclick="navigateTo('10-Todo관리.html')">
+            <div class="todo-left">
+              <div class="todo-title">${todo.title}</div>
+              <div class="todo-meta">담당: ${todo.assignee}</div>
+            </div>
+            <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>
         `;
       }).join('');
-    } else {
-      recentContainer.innerHTML = '<p style="color: var(--gray-500); font-size: 0.875rem;">회의록이 없습니다.</p>';
     }
 
-    // 대기 중인 Todo 표시
-    if (currentUser) {
-      const pendingTodos = getPendingTodos(currentUser.id).slice(0, 3);
-      const todosContainer = document.getElementById('pendingTodos');
-      if (pendingTodos.length > 0) {
-        todosContainer.innerHTML = pendingTodos.map(todo => {
-          const dueClass = getDdayText(todo.dueDate).includes('지남') ? 'overdue' : '';
-          return `
-            <div class="todo-item">
-              <input type="checkbox" class="todo-checkbox" data-id="${todo.id}">
-              <div class="todo-content">
-                <div class="todo-text">${todo.content}</div>
-                <div class="todo-due ${dueClass}">${getDdayText(todo.dueDate)}</div>
-              </div>
-            </div>
-          `;
-        }).join('');
+    // 사용자 메뉴 토글
+    const userMenuButton = document.getElementById('userMenuButton');
+    const userDropdown = document.getElementById('userDropdown');
 
-        // Todo 체크박스 이벤트
-        document.querySelectorAll('.todo-checkbox').forEach(checkbox => {
-          checkbox.addEventListener('change', function() {
-            const todoId = this.getAttribute('data-id');
-            const todo = getTodoById(todoId);
-            if (todo && this.checked) {
-              todo.status = 'completed';
-              todo.progress = 100;
-              saveTodo(todo);
-              showToast('Todo가 완료되었습니다.', 'success');
-              setTimeout(() => location.reload(), 1000);
-            }
-          });
-        });
-      } else {
-        todosContainer.innerHTML = '<p style="color: var(--gray-500); font-size: 0.875rem;">할 일이 없습니다.</p>';
-      }
-    }
-
-    // 통계 표시
-    const allMeetings = getAllMeetings();
-    document.getElementById('weeklyMeetings').textContent = allMeetings.length;
-    const completedTodos = getTodosByStatus('completed');
-    document.getElementById('completedTodos').textContent = completedTodos.length;
-
-    // FAB 클릭
-    document.getElementById('fabBtn').addEventListener('click', function() {
-      const menu = [
-        { text: '새 회의 예약', url: '03-회의예약.html' },
-        { text: '즉시 회의 시작', url: '04-템플릿선택.html' },
-        { text: '새 Todo 추가', url: '09-Todo관리.html' }
-      ];
-      // 간단한 메뉴 표시
-      const choice = confirm('새 회의를 예약하시겠습니까?\n확인: 예약\n취소: 즉시 시작');
-      if (choice) {
-        navigateTo('03-회의예약.html');
-      } else {
-        navigateTo('04-템플릿선택.html');
-      }
+    userMenuButton.addEventListener('click', (e) => {
+      e.stopPropagation();
+      userDropdown.classList.toggle('show');
     });
 
-    // 프로필 버튼 클릭
-    document.getElementById('profileBtn').addEventListener('click', function() {
-      const choice = confirm('로그아웃하시겠습니까?');
-      if (choice) {
-        localStorage.removeItem('currentUser');
-        showToast('로그아웃되었습니다.', 'success');
-        setTimeout(() => navigateTo('01-로그인.html'), 500);
-      }
+    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>
diff --git a/design/uiux/prototype/03-회의예약.html b/design/uiux/prototype/03-회의예약.html
index ece90a9..4a1a119 100644
--- a/design/uiux/prototype/03-회의예약.html
+++ b/design/uiux/prototype/03-회의예약.html
@@ -3,697 +3,131 @@
 <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">
   <style>
-    .reservation-container {
-      max-width: 1200px;
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 800px;
       margin: 0 auto;
-      padding: var(--spacing-8);
+      padding: var(--spacing-8) var(--spacing-4);
     }
-
-    .progress-bar {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: var(--spacing-4);
+    .page-header {
       margin-bottom: var(--spacing-8);
     }
-
-    .progress-step {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2);
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
     }
-
-    .progress-circle {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background-color: var(--gray-300);
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
     }
-
-    .progress-circle.active {
-      background-color: var(--primary-main);
-    }
-
-    .progress-circle.completed {
-      background-color: var(--success-main);
-    }
-
-    .progress-label {
-      font-weight: 500;
-      color: var(--gray-500);
-    }
-
-    .progress-label.active {
-      color: var(--gray-900);
-    }
-
-    .progress-arrow {
-      color: var(--gray-300);
-      font-size: 20px;
-    }
-
-    .reservation-layout {
-      display: grid;
-      grid-template-columns: 1fr 400px;
-      gap: var(--spacing-8);
-    }
-
-    .form-section {
-      background: white;
+    .form-container {
+      background-color: var(--color-white);
       border-radius: var(--radius-lg);
       padding: var(--spacing-8);
       box-shadow: var(--shadow-sm);
     }
-
-    .preview-section {
-      position: sticky;
-      top: var(--spacing-8);
-      height: fit-content;
-    }
-
-    .preview-card {
-      background: white;
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-6);
-      box-shadow: var(--shadow-sm);
-      border: 2px solid var(--primary-main);
-    }
-
-    .preview-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--gray-900);
-      margin-bottom: var(--spacing-4);
-    }
-
-    .preview-item {
-      margin-bottom: var(--spacing-4);
-      padding-bottom: var(--spacing-4);
-      border-bottom: 1px solid var(--gray-200);
-    }
-
-    .preview-item:last-child {
-      border-bottom: none;
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-
-    .preview-label {
-      font-size: 0.75rem;
-      color: var(--gray-500);
-      margin-bottom: var(--spacing-1);
-    }
-
-    .preview-value {
-      font-size: 1rem;
-      color: var(--gray-900);
-      font-weight: 500;
-    }
-
-    .datetime-group {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--spacing-4);
-    }
-
-    .participant-tags {
+    .button-group {
       display: flex;
-      flex-wrap: wrap;
-      gap: var(--spacing-2);
-      margin-top: var(--spacing-2);
+      gap: var(--spacing-3);
+      margin-top: var(--spacing-6);
     }
-
-    .participant-tag {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--spacing-2);
-      padding: var(--spacing-2) var(--spacing-3);
-      background-color: var(--gray-100);
-      border-radius: var(--radius-md);
-      font-size: 0.875rem;
-    }
-
-    .participant-tag .remove {
-      cursor: pointer;
-      color: var(--gray-500);
-      font-weight: bold;
-    }
-
-    .participant-tag .remove:hover {
-      color: var(--error-main);
-    }
-
-    .checkbox-group {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-2);
-    }
-
-    .checkbox-item {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2);
-    }
-
-    .checkbox-item input[type="checkbox"] {
-      width: 18px;
-      height: 18px;
-      cursor: pointer;
-    }
-
-    .action-buttons {
-      display: flex;
-      justify-content: space-between;
-      margin-top: var(--spacing-8);
-      padding-top: var(--spacing-6);
-      border-top: 1px solid var(--gray-200);
-    }
-
-    @media (max-width: 1023px) {
-      .reservation-layout {
-        grid-template-columns: 1fr;
-      }
-
-      .preview-section {
-        position: static;
-      }
+    @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="reservation-container">
-    <!-- 진행 단계 표시 -->
-    <div class="progress-bar">
-      <div class="progress-step">
-        <div class="progress-circle completed">✓</div>
-        <span class="progress-label">회의 예약</span>
-      </div>
-      <span class="progress-arrow">→</span>
-      <div class="progress-step">
-        <div class="progress-circle active">2</div>
-        <span class="progress-label active">템플릿 선택</span>
-      </div>
-      <span class="progress-arrow">→</span>
-      <div class="progress-step">
-        <div class="progress-circle">3</div>
-        <span class="progress-label">회의 진행</span>
-      </div>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">회의 예약</h1>
+      <p class="page-subtitle">새로운 회의를 예약하고 참석자를 초대하세요</p>
     </div>
 
-    <div class="reservation-layout">
-      <!-- 입력 폼 -->
-      <div class="form-section">
-        <h1>회의 예약</h1>
-        <p style="color: var(--gray-500); margin-bottom: var(--spacing-8);">
-          회의 정보를 입력하고 참석자를 초대하세요
-        </p>
-
-        <form id="reservationForm">
-          <!-- 회의 제목 -->
-          <div class="input-group">
-            <label class="input-label" for="meetingTitle">
-              회의 제목 <span style="color: var(--error-main);">*</span>
-            </label>
-            <input
-              type="text"
-              id="meetingTitle"
-              class="input"
-              placeholder="예: 2025년 1분기 전략 회의"
-              maxlength="100"
-              required>
-            <span class="input-error hidden" id="titleError"></span>
-          </div>
-
-          <!-- 날짜 및 시간 -->
-          <div class="datetime-group">
-            <div class="input-group">
-              <label class="input-label" for="meetingDate">
-                날짜 <span style="color: var(--error-main);">*</span>
-              </label>
-              <input
-                type="date"
-                id="meetingDate"
-                class="input"
-                required>
-              <span class="input-error hidden" id="dateError"></span>
-            </div>
-
-            <div class="input-group">
-              <label class="input-label" for="startTime">
-                시작 시간 <span style="color: var(--error-main);">*</span>
-              </label>
-              <input
-                type="time"
-                id="startTime"
-                class="input"
-                required>
-            </div>
-          </div>
-
-          <div class="datetime-group">
-            <div class="input-group">
-              <label class="input-label" for="endTime">
-                종료 시간 <span style="color: var(--error-main);">*</span>
-              </label>
-              <input
-                type="time"
-                id="endTime"
-                class="input"
-                required>
-              <span class="input-error hidden" id="timeError"></span>
-            </div>
-
-            <div class="input-group">
-              <label class="input-label">&nbsp;</label>
-              <div style="padding: var(--spacing-3) 0; color: var(--gray-500); font-size: 0.875rem;">
-                예상 소요: <span id="duration">-</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- 장소 -->
-          <div class="input-group">
-            <label class="input-label" for="location">장소</label>
-            <input
-              type="text"
-              id="location"
-              class="input"
-              placeholder="예: 3층 회의실"
-              maxlength="200"
-              :disabled="isOnline">
-
-            <div class="checkbox-item mt-2">
-              <input type="checkbox" id="isOnline">
-              <label for="isOnline">온라인 회의</label>
-            </div>
-
-            <input
-              type="url"
-              id="onlineLink"
-              class="input mt-2 hidden"
-              placeholder="Zoom, Teams 링크를 입력하세요">
-          </div>
-
-          <!-- 참석자 -->
-          <div class="input-group">
-            <label class="input-label" for="participantEmail">
-              참석자 <span style="color: var(--error-main);">*</span>
-            </label>
-            <input
-              type="email"
-              id="participantEmail"
-              class="input"
-              placeholder="참석자 이메일을 입력하세요">
-            <button type="button" class="btn btn-secondary btn-sm mt-2" id="addParticipant">
-              + 참석자 추가
-            </button>
-            <div class="participant-tags" id="participantTags"></div>
-            <span class="input-error hidden" id="participantError"></span>
-          </div>
-
-          <!-- 회의 설명 -->
-          <div class="input-group">
-            <label class="input-label" for="description">회의 설명</label>
-            <textarea
-              id="description"
-              class="textarea"
-              placeholder="회의 목적 및 안건을 입력하세요"
-              maxlength="1000"></textarea>
-          </div>
-
-          <!-- 알림 설정 -->
-          <div class="input-group">
-            <label class="input-label">알림 설정</label>
-            <div class="checkbox-group">
-              <div class="checkbox-item">
-                <input type="checkbox" id="notify30" checked>
-                <label for="notify30">회의 30분 전 알림</label>
-              </div>
-              <div class="checkbox-item">
-                <input type="checkbox" id="notify60">
-                <label for="notify60">회의 1시간 전 알림</label>
-              </div>
-            </div>
-          </div>
-
-          <!-- 반복 설정 -->
-          <div class="input-group">
-            <label class="input-label" for="repeat">반복 설정</label>
-            <select id="repeat" class="select">
-              <option value="none">반복 안 함</option>
-              <option value="daily">매일</option>
-              <option value="weekly">매주</option>
-              <option value="monthly">매월</option>
-            </select>
-
-            <div class="input-group mt-4 hidden" id="repeatEndGroup">
-              <label class="input-label" for="repeatEnd">반복 종료일</label>
-              <input type="date" id="repeatEnd" class="input">
-            </div>
-          </div>
-
-          <!-- 캘린더 연동 -->
-          <div class="input-group">
-            <label class="input-label">캘린더 연동</label>
-            <div class="checkbox-group">
-              <div class="checkbox-item">
-                <input type="checkbox" id="googleCalendar">
-                <label for="googleCalendar">Google Calendar에 추가</label>
-              </div>
-              <div class="checkbox-item">
-                <input type="checkbox" id="outlook">
-                <label for="outlook">Outlook에 추가</label>
-              </div>
-            </div>
-          </div>
-
-          <!-- 액션 버튼 -->
-          <div class="action-buttons">
-            <button type="button" class="btn btn-text" onclick="navigateTo('02-대시보드.html')">
-              취소
-            </button>
-            <div style="display: flex; gap: var(--spacing-3);">
-              <button type="button" class="btn btn-secondary" id="saveDraft">
-                저장 후 나중에 계속
-              </button>
-              <button type="submit" class="btn btn-primary">
-                다음: 템플릿 선택 →
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-
-      <!-- 미리보기 -->
-      <div class="preview-section">
-        <div class="preview-card">
-          <div class="preview-title">회의 미리보기</div>
-
-          <div class="preview-item">
-            <div class="preview-label">회의 제목</div>
-            <div class="preview-value" id="previewTitle">-</div>
-          </div>
-
-          <div class="preview-item">
-            <div class="preview-label">날짜 및 시간</div>
-            <div class="preview-value" id="previewDateTime">-</div>
-          </div>
-
-          <div class="preview-item">
-            <div class="preview-label">장소</div>
-            <div class="preview-value" id="previewLocation">-</div>
-          </div>
-
-          <div class="preview-item">
-            <div class="preview-label">참석자</div>
-            <div class="preview-value" id="previewParticipants">-</div>
-          </div>
-
-          <div class="preview-item">
-            <div class="preview-label">회의 설명</div>
-            <div class="preview-value" id="previewDescription" style="white-space: pre-wrap;">-</div>
-          </div>
+    <div class="form-container">
+      <form id="meetingForm">
+        <div class="form-group">
+          <label for="title" class="form-label">회의 제목 *</label>
+          <input type="text" id="title" class="form-input" placeholder="예: 2025년 1분기 기획 회의" required maxlength="100">
         </div>
-      </div>
+
+        <div class="form-group">
+          <label for="date" class="form-label">날짜 *</label>
+          <input type="date" id="date" class="form-input" required>
+        </div>
+
+        <div class="form-group">
+          <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="예: 본사 2층 대회의실" maxlength="200">
+        </div>
+
+        <div class="form-group">
+          <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 for="description" class="form-label">회의 설명</label>
+          <textarea id="description" class="form-textarea" placeholder="회의 목적과 안건을 간략히 작성하세요"></textarea>
+        </div>
+
+        <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>
   </div>
 
   <script src="common.js"></script>
   <script>
-    // 참석자 목록
-    let participants = [];
+    const form = document.getElementById('meetingForm');
 
-    // 오늘 날짜를 최소값으로 설정
-    const today = new Date().toISOString().split('T')[0];
-    document.getElementById('meetingDate').min = today;
-    document.getElementById('meetingDate').value = today;
-    document.getElementById('repeatEnd').min = today;
+    // 최소 날짜를 오늘로 설정
+    document.getElementById('date').min = new Date().toISOString().split('T')[0];
 
-    // 시작 시간 기본값 설정
-    const now = new Date();
-    const currentHour = now.getHours();
-    const nextHour = currentHour + 1;
-    document.getElementById('startTime').value = `${String(nextHour).padStart(2, '0')}:00`;
-    document.getElementById('endTime').value = `${String(nextHour + 1).padStart(2, '0')}:00`;
-
-    // 실시간 미리보기 업데이트
-    function updatePreview() {
-      const title = document.getElementById('meetingTitle').value || '-';
-      const date = document.getElementById('meetingDate').value;
-      const startTime = document.getElementById('startTime').value;
-      const endTime = document.getElementById('endTime').value;
-      const isOnline = document.getElementById('isOnline').checked;
-      const location = isOnline ?
-        (document.getElementById('onlineLink').value || '온라인 회의') :
-        (document.getElementById('location').value || '-');
-      const description = document.getElementById('description').value || '-';
-
-      document.getElementById('previewTitle').textContent = title;
-
-      if (date && startTime && endTime) {
-        const dateObj = new Date(date);
-        const dateStr = `${dateObj.getFullYear()}년 ${dateObj.getMonth() + 1}월 ${dateObj.getDate()}일`;
-        document.getElementById('previewDateTime').textContent = `${dateStr} ${startTime} ~ ${endTime}`;
-      } else {
-        document.getElementById('previewDateTime').textContent = '-';
-      }
-
-      document.getElementById('previewLocation').textContent = location;
-      document.getElementById('previewParticipants').textContent =
-        participants.length > 0 ? participants.join(', ') : '-';
-      document.getElementById('previewDescription').textContent = description;
-    }
-
-    // 소요 시간 계산
-    function calculateDuration() {
-      const startTime = document.getElementById('startTime').value;
-      const endTime = document.getElementById('endTime').value;
-
-      if (startTime && endTime) {
-        const [startHour, startMin] = startTime.split(':').map(Number);
-        const [endHour, endMin] = endTime.split(':').map(Number);
-
-        const startMinutes = startHour * 60 + startMin;
-        const endMinutes = endHour * 60 + endMin;
-        const diff = endMinutes - startMinutes;
-
-        if (diff > 0) {
-          document.getElementById('duration').textContent = formatDuration(diff);
-          document.getElementById('timeError').classList.add('hidden');
-          document.getElementById('endTime').classList.remove('error');
-          return true;
-        } else {
-          document.getElementById('timeError').textContent = '종료 시간은 시작 시간보다 늦어야 합니다.';
-          document.getElementById('timeError').classList.remove('hidden');
-          document.getElementById('endTime').classList.add('error');
-          return false;
-        }
-      }
-      return true;
-    }
-
-    // 온라인 회의 체크박스
-    document.getElementById('isOnline').addEventListener('change', (e) => {
-      const isOnline = e.target.checked;
-      const locationInput = document.getElementById('location');
-      const onlineLinkInput = document.getElementById('onlineLink');
-
-      if (isOnline) {
-        locationInput.disabled = true;
-        locationInput.value = '';
-        onlineLinkInput.classList.remove('hidden');
-      } else {
-        locationInput.disabled = false;
-        onlineLinkInput.classList.add('hidden');
-        onlineLinkInput.value = '';
-      }
-      updatePreview();
-    });
-
-    // 참석자 추가
-    document.getElementById('addParticipant').addEventListener('click', () => {
-      const emailInput = document.getElementById('participantEmail');
-      const email = emailInput.value.trim();
-      const errorSpan = document.getElementById('participantError');
-
-      if (!email) {
-        errorSpan.textContent = '이메일을 입력하세요.';
-        errorSpan.classList.remove('hidden');
-        return;
-      }
-
-      // 간단한 이메일 검증
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(email)) {
-        errorSpan.textContent = '올바른 이메일 주소를 입력하세요.';
-        errorSpan.classList.remove('hidden');
-        emailInput.classList.add('error');
-        return;
-      }
-
-      if (participants.includes(email)) {
-        errorSpan.textContent = '이미 추가된 참석자입니다.';
-        errorSpan.classList.remove('hidden');
-        return;
-      }
-
-      participants.push(email);
-      emailInput.value = '';
-      emailInput.classList.remove('error');
-      errorSpan.classList.add('hidden');
-      renderParticipants();
-      updatePreview();
-    });
-
-    // 참석자 렌더링
-    function renderParticipants() {
-      const container = document.getElementById('participantTags');
-      container.innerHTML = participants.map((email, index) => `
-        <div class="participant-tag">
-          <span>👤 ${email}</span>
-          <span class="remove" onclick="removeParticipant(${index})">×</span>
-        </div>
-      `).join('');
-    }
-
-    // 참석자 제거
-    function removeParticipant(index) {
-      participants.splice(index, 1);
-      renderParticipants();
-      updatePreview();
-    }
-
-    // 반복 설정
-    document.getElementById('repeat').addEventListener('change', (e) => {
-      const repeatEndGroup = document.getElementById('repeatEndGroup');
-      if (e.target.value !== 'none') {
-        repeatEndGroup.classList.remove('hidden');
-      } else {
-        repeatEndGroup.classList.add('hidden');
-      }
-    });
-
-    // 입력 필드 이벤트 리스너
-    document.querySelectorAll('input, textarea, select').forEach(el => {
-      el.addEventListener('input', updatePreview);
-      el.addEventListener('change', updatePreview);
-    });
-
-    document.getElementById('startTime').addEventListener('change', calculateDuration);
-    document.getElementById('endTime').addEventListener('change', calculateDuration);
-
-    // 폼 제출
-    document.getElementById('reservationForm').addEventListener('submit', (e) => {
+    form.addEventListener('submit', async (e) => {
       e.preventDefault();
 
-      // 유효성 검사
-      const title = document.getElementById('meetingTitle').value.trim();
-      const date = document.getElementById('meetingDate').value;
+      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 (!title) {
-        document.getElementById('titleError').textContent = '회의 제목을 입력하세요.';
-        document.getElementById('titleError').classList.remove('hidden');
-        document.getElementById('meetingTitle').classList.add('error');
-        document.getElementById('meetingTitle').focus();
-        return;
-      }
-
-      if (!date) {
-        document.getElementById('dateError').textContent = '날짜를 선택하세요.';
-        document.getElementById('dateError').classList.remove('hidden');
-        document.getElementById('meetingDate').classList.add('error');
-        return;
-      }
-
-      // 과거 날짜 검사
-      const selectedDate = new Date(date);
-      const todayDate = new Date(today);
-      if (selectedDate < todayDate) {
-        document.getElementById('dateError').textContent = '과거 날짜는 선택할 수 없습니다.';
-        document.getElementById('dateError').classList.remove('hidden');
-        document.getElementById('meetingDate').classList.add('error');
-        return;
-      }
-
-      if (!calculateDuration()) {
-        return;
-      }
-
-      if (participants.length === 0) {
-        document.getElementById('participantError').textContent = '최소 1명의 참석자를 추가하세요.';
-        document.getElementById('participantError').classList.remove('hidden');
-        document.getElementById('participantEmail').focus();
-        return;
-      }
-
-      // 회의 데이터 저장
-      const meetingData = {
-        id: generateId('meeting'),
-        title: title,
-        date: date,
-        time: document.getElementById('startTime').value,
-        endTime: document.getElementById('endTime').value,
-        location: document.getElementById('isOnline').checked ?
-          document.getElementById('onlineLink').value || '온라인 회의' :
-          document.getElementById('location').value,
-        participants: participants,
-        description: document.getElementById('description').value,
-        notifications: {
-          notify30: document.getElementById('notify30').checked,
-          notify60: document.getElementById('notify60').checked
-        },
-        repeat: document.getElementById('repeat').value,
-        repeatEnd: document.getElementById('repeatEnd').value,
-        calendar: {
-          google: document.getElementById('googleCalendar').checked,
-          outlook: document.getElementById('outlook').checked
-        },
+      // 새 회의 생성
+      const newMeeting = {
+        id: 'm-' + Date.now(),
+        title,
+        date: `${date} ${time}`,
+        location: location || '미정',
         status: 'scheduled',
-        createdAt: new Date().toISOString()
+        attendees: attendees.split(',').map(email => email.trim()),
+        description: description || ''
       };
 
-      // LocalStorage에 임시 저장
-      sessionStorage.setItem('newMeeting', JSON.stringify(meetingData));
+      // 저장
+      const meetings = MeetingApp.Storage.get('meetings', []);
+      meetings.unshift(newMeeting);
+      MeetingApp.Storage.set('meetings', meetings);
 
-      showToast('회의 정보가 저장되었습니다.', 'success');
-
-      // 템플릿 선택 화면으로 이동
-      setTimeout(() => {
-        navigateTo('04-템플릿선택.html');
-      }, 500);
-    });
-
-    // 임시 저장
-    document.getElementById('saveDraft').addEventListener('click', () => {
-      const meetingData = {
-        title: document.getElementById('meetingTitle').value,
-        date: document.getElementById('meetingDate').value,
-        time: document.getElementById('startTime').value,
-        endTime: document.getElementById('endTime').value,
-        location: document.getElementById('location').value,
-        participants: participants,
-        description: document.getElementById('description').value
-      };
-
-      sessionStorage.setItem('draftMeeting', JSON.stringify(meetingData));
-      showToast('회의 정보가 임시 저장되었습니다.', 'success');
+      MeetingApp.Toast.success('회의가 예약되었습니다!');
 
       setTimeout(() => {
-        navigateTo('02-대시보드.html');
-      }, 500);
+        window.location.href = '04-템플릿선택.html?meetingId=' + newMeeting.id;
+      }, 1000);
     });
-
-    // 초기 업데이트
-    calculateDuration();
-    updatePreview();
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/04-템플릿선택.html b/design/uiux/prototype/04-템플릿선택.html
index 66c4a65..f2ca2ec 100644
--- a/design/uiux/prototype/04-템플릿선택.html
+++ b/design/uiux/prototype/04-템플릿선택.html
@@ -3,535 +3,233 @@
 <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">
   <style>
-    .template-container {
-      max-width: 1536px;
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 1024px;
       margin: 0 auto;
-      padding: var(--spacing-8);
+      padding: var(--spacing-8) var(--spacing-4);
     }
-
-    .progress-bar {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: var(--spacing-4);
+    .page-header {
       margin-bottom: var(--spacing-8);
+      text-align: center;
     }
-
-    .progress-step {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2);
+    .page-title {
+      font-size: var(--font-size-h1);
+      color: var(--color-gray-900);
+      margin-bottom: var(--spacing-2);
     }
-
-    .progress-circle {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background-color: var(--gray-300);
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
     }
-
-    .progress-circle.active {
-      background-color: var(--primary-main);
-    }
-
-    .progress-circle.completed {
-      background-color: var(--success-main);
-    }
-
-    .progress-label {
-      font-weight: 500;
-      color: var(--gray-500);
-    }
-
-    .progress-label.active {
-      color: var(--gray-900);
-    }
-
-    .progress-arrow {
-      color: var(--gray-300);
-      font-size: 20px;
-    }
-
-    .template-layout {
-      display: grid;
-      grid-template-columns: 1fr 400px;
-      gap: var(--spacing-8);
-    }
-
     .template-grid {
       display: grid;
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: var(--spacing-6);
+      margin-bottom: var(--spacing-8);
     }
-
     .template-card {
-      background: white;
+      background: var(--color-white);
+      border: 2px solid var(--color-gray-200);
       border-radius: var(--radius-lg);
       padding: var(--spacing-6);
-      box-shadow: var(--shadow-sm);
       cursor: pointer;
       transition: all var(--transition-base);
-      border: 2px solid transparent;
+      position: relative;
     }
-
     .template-card:hover {
+      border-color: var(--color-primary-main);
       box-shadow: var(--shadow-md);
-      transform: translateY(-2px);
+      transform: translateY(-4px);
     }
-
     .template-card.selected {
-      border-color: var(--primary-main);
+      border-color: var(--color-primary-main);
+      border-width: 3px;
       background-color: rgba(0, 217, 177, 0.05);
     }
-
-    .template-header {
+    .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;
-      gap: var(--spacing-3);
-      margin-bottom: var(--spacing-3);
+      justify-content: center;
+      font-weight: var(--font-weight-bold);
     }
-
     .template-icon {
-      font-size: 32px;
-    }
-
-    .template-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--gray-900);
-    }
-
-    .template-description {
-      color: var(--gray-600);
-      font-size: 0.875rem;
+      font-size: 48px;
       margin-bottom: var(--spacing-4);
-    }
-
-    .template-usage {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2);
-      color: var(--gray-500);
-      font-size: 0.75rem;
-    }
-
-    .template-sections {
-      margin-top: var(--spacing-4);
-      padding-top: var(--spacing-4);
-      border-top: 1px solid var(--gray-200);
-    }
-
-    .section-item {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2);
-      padding: var(--spacing-2) 0;
-      font-size: 0.875rem;
-      color: var(--gray-600);
-    }
-
-    .section-required {
-      color: var(--error-main);
-      font-size: 0.75rem;
-    }
-
-    .preview-panel {
-      position: sticky;
-      top: var(--spacing-8);
-      height: fit-content;
-      background: white;
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-6);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .preview-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--gray-900);
-      margin-bottom: var(--spacing-4);
-    }
-
-    .preview-empty {
       text-align: center;
-      padding: var(--spacing-8);
-      color: var(--gray-400);
     }
-
-    .section-list {
-      margin-top: var(--spacing-4);
-    }
-
-    .section-drag-item {
-      background: var(--gray-50);
-      padding: var(--spacing-3);
+    .template-title {
+      font-size: var(--font-size-h4);
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-gray-900);
       margin-bottom: var(--spacing-2);
-      border-radius: var(--radius-md);
+    }
+    .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;
-      align-items: center;
-      gap: var(--spacing-2);
-      cursor: move;
+      flex-wrap: wrap;
+      gap: var(--spacing-1);
     }
-
-    .drag-handle {
-      color: var(--gray-400);
-      cursor: grab;
+    .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);
     }
-
-    .section-drag-item:active .drag-handle {
-      cursor: grabbing;
-    }
-
-    .section-name {
-      flex: 1;
-      font-weight: 500;
-    }
-
-    .section-actions {
-      display: flex;
-      gap: var(--spacing-2);
-    }
-
-    .icon-btn {
-      background: none;
-      border: none;
-      cursor: pointer;
-      color: var(--gray-500);
-      padding: var(--spacing-1);
-      font-size: 16px;
-    }
-
-    .icon-btn:hover {
-      color: var(--primary-main);
-    }
-
     .action-buttons {
       display: flex;
-      justify-content: space-between;
-      margin-top: var(--spacing-8);
-      padding-top: var(--spacing-6);
-      border-top: 1px solid var(--gray-200);
+      gap: var(--spacing-3);
+      justify-content: center;
     }
-
-    @media (max-width: 1023px) {
-      .template-layout {
-        grid-template-columns: 1fr;
-      }
-
-      .template-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .preview-panel {
-        position: static;
-      }
+    @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="template-container">
-    <!-- 진행 단계 표시 -->
-    <div class="progress-bar">
-      <div class="progress-step">
-        <div class="progress-circle completed">✓</div>
-        <span class="progress-label">회의 예약</span>
-      </div>
-      <span class="progress-arrow">→</span>
-      <div class="progress-step">
-        <div class="progress-circle active">2</div>
-        <span class="progress-label active">템플릿 선택</span>
-      </div>
-      <span class="progress-arrow">→</span>
-      <div class="progress-step">
-        <div class="progress-circle">3</div>
-        <span class="progress-label">회의 진행</span>
-      </div>
+  <div class="page-container">
+    <div class="page-header">
+      <h1 class="page-title">회의록 템플릿 선택</h1>
+      <p class="page-subtitle">회의 유형에 맞는 템플릿을 선택하여 효율적으로 회의록을 작성하세요</p>
     </div>
 
-    <h1>회의 템플릿 선택</h1>
-    <p style="color: var(--gray-500); margin-bottom: var(--spacing-8);">
-      회의 유형에 맞는 템플릿을 선택하거나 커스터마이징하세요
-    </p>
-
-    <div class="template-layout">
-      <!-- 템플릿 그리드 -->
-      <div>
-        <div class="template-grid" id="templateGrid"></div>
+    <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="preview-panel">
-        <div class="preview-title">템플릿 미리보기</div>
-
-        <div id="previewContent" class="preview-empty">
-          템플릿을 선택하면<br>여기에 미리보기가 표시됩니다
+      <!-- 스크럼 회의 템플릿 -->
+      <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 id="customizePanel" class="hidden">
-          <div style="margin-top: var(--spacing-6); margin-bottom: var(--spacing-4);">
-            <strong>섹션 구성</strong>
-            <p style="font-size: 0.875rem; color: var(--gray-500); margin-top: var(--spacing-1);">
-              드래그하여 순서를 변경하거나 섹션을 추가/삭제할 수 있습니다
-            </p>
-          </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="section-list" id="sectionList"></div>
-
-          <button type="button" class="btn btn-secondary btn-sm" style="width: 100%; margin-top: var(--spacing-4);" id="addSection">
-            + 섹션 추가
-          </button>
-
-          <button type="button" class="btn btn-text btn-sm" style="width: 100%; margin-top: var(--spacing-2);" id="saveTemplate">
-            ✓ 나만의 템플릿으로 저장
-          </button>
+      <!-- 주간 회의 템플릿 -->
+      <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-text" onclick="navigateTo('03-회의예약.html')">
-        ← 뒤로
+      <button type="button" class="btn btn-secondary" onclick="history.back()">이전으로</button>
+      <button type="button" class="btn btn-primary" id="startMeetingBtn" disabled>
+        회의 시작하기
       </button>
-      <div style="display: flex; gap: var(--spacing-3);">
-        <button type="button" class="btn btn-secondary" id="startBlank">
-          템플릿 없이 시작
-        </button>
-        <button type="button" class="btn btn-primary" id="selectTemplate" disabled>
-          선택 완료 →
-        </button>
-      </div>
     </div>
   </div>
 
   <script src="common.js"></script>
   <script>
     let selectedTemplate = null;
-    let customSections = [];
-    let draggedItem = null;
+    const startBtn = document.getElementById('startMeetingBtn');
+    const templateCards = document.querySelectorAll('.template-card');
 
-    // 템플릿 아이콘 매핑
-    const templateIcons = {
-      general: '📋',
-      scrum: '🔄',
-      kickoff: '🚀',
-      weekly: '📅'
-    };
+    templateCards.forEach(card => {
+      card.addEventListener('click', () => {
+        // 기존 선택 해제
+        templateCards.forEach(c => c.classList.remove('selected'));
 
-    // 템플릿 렌더링
-    function renderTemplates() {
-      const templates = getAllTemplates();
-      const grid = document.getElementById('templateGrid');
-
-      grid.innerHTML = templates.map(template => `
-        <div class="template-card" data-id="${template.id}" onclick="selectTemplate('${template.id}')">
-          <div class="template-header">
-            <span class="template-icon">${templateIcons[template.id] || '📄'}</span>
-            <div class="template-title">${template.name}</div>
-          </div>
-          <div class="template-description">${template.description}</div>
-          <div class="template-usage">
-            <span>👥</span>
-            <span>자주 사용됨</span>
-          </div>
-          <div class="template-sections">
-            ${template.sections.map(section => `
-              <div class="section-item">
-                <span>•</span>
-                <span>${section.name}</span>
-                ${section.required ? '<span class="section-required">*</span>' : ''}
-              </div>
-            `).join('')}
-          </div>
-        </div>
-      `).join('');
-    }
-
-    // 템플릿 선택
-    function selectTemplate(templateId) {
-      selectedTemplate = templateId;
-      const template = getTemplate(templateId);
-      customSections = JSON.parse(JSON.stringify(template.sections));
-
-      // 선택 표시
-      document.querySelectorAll('.template-card').forEach(card => {
-        card.classList.remove('selected');
+        // 새로운 선택
+        card.classList.add('selected');
+        selectedTemplate = card.getAttribute('data-template');
+        startBtn.disabled = false;
       });
-      document.querySelector(`[data-id="${templateId}"]`).classList.add('selected');
-
-      // 미리보기 업데이트
-      updatePreview();
-
-      // 선택 완료 버튼 활성화
-      document.getElementById('selectTemplate').disabled = false;
-    }
-
-    // 미리보기 업데이트
-    function updatePreview() {
-      const previewContent = document.getElementById('previewContent');
-      const customizePanel = document.getElementById('customizePanel');
-
-      if (selectedTemplate) {
-        previewContent.innerHTML = '';
-        customizePanel.classList.remove('hidden');
-        renderSections();
-      } else {
-        previewContent.className = 'preview-empty';
-        previewContent.innerHTML = '템플릿을 선택하면<br>여기에 미리보기가 표시됩니다';
-        customizePanel.classList.add('hidden');
-      }
-    }
-
-    // 섹션 렌더링
-    function renderSections() {
-      const sectionList = document.getElementById('sectionList');
-
-      sectionList.innerHTML = customSections.map((section, index) => `
-        <div class="section-drag-item" draggable="true" data-index="${index}">
-          <span class="drag-handle">⋮⋮</span>
-          <span class="section-name">
-            ${section.name}
-            ${section.required ? '<span class="section-required">*</span>' : ''}
-          </span>
-          <div class="section-actions">
-            <button class="icon-btn" onclick="editSection(${index})" title="수정">✏️</button>
-            ${!section.required ? `<button class="icon-btn" onclick="deleteSection(${index})" title="삭제">🗑️</button>` : ''}
-          </div>
-        </div>
-      `).join('');
-
-      // 드래그 이벤트 추가
-      document.querySelectorAll('.section-drag-item').forEach(item => {
-        item.addEventListener('dragstart', handleDragStart);
-        item.addEventListener('dragover', handleDragOver);
-        item.addEventListener('drop', handleDrop);
-        item.addEventListener('dragend', handleDragEnd);
-      });
-    }
-
-    // 드래그 앤 드롭 핸들러
-    function handleDragStart(e) {
-      draggedItem = parseInt(e.target.dataset.index);
-      e.target.style.opacity = '0.5';
-    }
-
-    function handleDragOver(e) {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = 'move';
-    }
-
-    function handleDrop(e) {
-      e.preventDefault();
-      const targetIndex = parseInt(e.target.closest('.section-drag-item').dataset.index);
-
-      if (draggedItem !== targetIndex) {
-        const draggedSection = customSections[draggedItem];
-        customSections.splice(draggedItem, 1);
-        customSections.splice(targetIndex, 0, draggedSection);
-        renderSections();
-      }
-    }
-
-    function handleDragEnd(e) {
-      e.target.style.opacity = '1';
-      draggedItem = null;
-    }
-
-    // 섹션 추가
-    document.getElementById('addSection').addEventListener('click', () => {
-      const sectionName = prompt('섹션 이름을 입력하세요:');
-      if (sectionName && sectionName.trim()) {
-        customSections.push({
-          id: generateId('section'),
-          name: sectionName.trim(),
-          required: false
-        });
-        renderSections();
-        showToast('섹션이 추가되었습니다.', 'success');
-      }
     });
 
-    // 섹션 수정
-    function editSection(index) {
-      const section = customSections[index];
-      const newName = prompt('섹션 이름 수정:', section.name);
-      if (newName && newName.trim()) {
-        customSections[index].name = newName.trim();
-        renderSections();
-        showToast('섹션이 수정되었습니다.', 'success');
-      }
-    }
-
-    // 섹션 삭제
-    function deleteSection(index) {
-      if (confirm('이 섹션을 삭제하시겠습니까?')) {
-        customSections.splice(index, 1);
-        renderSections();
-        showToast('섹션이 삭제되었습니다.', 'info');
-      }
-    }
-
-    // 나만의 템플릿 저장
-    document.getElementById('saveTemplate').addEventListener('click', () => {
-      const templateName = prompt('템플릿 이름을 입력하세요:');
-      if (templateName && templateName.trim()) {
-        const customTemplate = {
-          id: generateId('template'),
-          name: templateName.trim(),
-          description: '나만의 템플릿',
-          sections: customSections,
-          createdBy: getCurrentUser().id,
-          createdAt: new Date().toISOString()
-        };
-
-        // 여기서는 시뮬레이션만 (실제로는 서버에 저장)
-        showToast('템플릿이 저장되었습니다.', 'success');
-      }
-    });
-
-    // 템플릿 없이 시작
-    document.getElementById('startBlank').addEventListener('click', () => {
-      if (confirm('빈 회의록으로 시작하시겠습니까?')) {
-        sessionStorage.setItem('selectedTemplate', JSON.stringify({
-          id: 'blank',
-          name: '빈 회의록',
-          sections: []
-        }));
-        navigateTo('05-회의진행.html');
-      }
-    });
-
-    // 선택 완료
-    document.getElementById('selectTemplate').addEventListener('click', () => {
+    startBtn.addEventListener('click', () => {
       if (!selectedTemplate) {
-        showToast('템플릿을 선택하세요.', 'warning');
+        MeetingApp.Toast.warning('템플릿을 선택해주세요');
         return;
       }
 
-      const template = getTemplate(selectedTemplate);
-      const finalTemplate = {
-        ...template,
-        sections: customSections
-      };
+      // URL에서 meetingId 가져오기
+      const urlParams = new URLSearchParams(window.location.search);
+      const meetingId = urlParams.get('meetingId');
 
-      sessionStorage.setItem('selectedTemplate', JSON.stringify(finalTemplate));
-      showToast('템플릿이 선택되었습니다.', 'success');
+      // 선택한 템플릿 저장
+      MeetingApp.Storage.set('selectedTemplate', {
+        meetingId: meetingId,
+        template: selectedTemplate,
+        timestamp: new Date().toISOString()
+      });
+
+      MeetingApp.Toast.success('템플릿이 선택되었습니다');
 
       setTimeout(() => {
-        navigateTo('05-회의진행.html');
+        window.location.href = '05-회의진행.html?meetingId=' + meetingId;
       }, 500);
     });
 
-    // 초기화
-    renderTemplates();
+    // 페이지 로드 시 일반 회의 템플릿 기본 선택 (선택적)
+    // templateCards[0].click();
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/06-검증완료.html b/design/uiux/prototype/06-검증완료.html
index 87b242f..e818a51 100644
--- a/design/uiux/prototype/06-검증완료.html
+++ b/design/uiux/prototype/06-검증완료.html
@@ -3,497 +3,181 @@
 <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">
   <style>
-    .verification-container {
-      max-width: 1200px;
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 800px;
       margin: 0 auto;
-      padding: var(--spacing-8);
+      padding: var(--spacing-8) var(--spacing-4);
     }
-
-    .verification-header {
+    .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);
     }
-
-    .progress-circle-large {
-      width: 120px;
-      height: 120px;
-      margin: 0 auto var(--spacing-4);
-      position: relative;
-    }
-
-    .progress-ring {
-      transform: rotate(-90deg);
-    }
-
-    .progress-ring-circle {
-      transition: stroke-dashoffset 0.5s;
-      stroke: var(--primary-main);
-      stroke-width: 8;
-      fill: transparent;
-    }
-
-    .progress-ring-bg {
-      stroke: var(--gray-200);
-      stroke-width: 8;
-      fill: transparent;
-    }
-
-    .progress-text {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--primary-main);
-    }
-
-    .verification-layout {
+    .stats-grid {
       display: grid;
-      grid-template-columns: 1fr 400px;
-      gap: var(--spacing-8);
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: var(--spacing-4);
+      margin-bottom: var(--spacing-8);
     }
-
-    .section-list-panel {
-      background: white;
+    .stat-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
       border-radius: var(--radius-lg);
-      padding: var(--spacing-6);
-      box-shadow: var(--shadow-sm);
+      padding: var(--spacing-5);
+      text-align: center;
     }
-
-    .verification-item {
-      padding: var(--spacing-4);
-      margin-bottom: var(--spacing-3);
-      border-radius: var(--radius-md);
-      border: 1px solid var(--gray-200);
-      transition: all var(--transition-fast);
-    }
-
-    .verification-item:hover {
-      box-shadow: var(--shadow-sm);
-    }
-
-    .verification-item.verified {
-      background-color: rgba(16, 185, 129, 0.05);
-      border-color: var(--success-main);
-    }
-
-    .verification-item.pending {
-      background-color: rgba(245, 158, 11, 0.05);
-      border-color: var(--warning-main);
-    }
-
-    .verification-header-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+    .stat-value {
+      font-size: var(--font-size-h2);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-primary-main);
       margin-bottom: var(--spacing-2);
     }
-
-    .section-name-verify {
-      font-weight: 600;
-      color: var(--gray-900);
+    .stat-label {
+      font-size: var(--font-size-body-small);
+      color: var(--color-gray-600);
     }
-
-    .verification-status {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--spacing-2);
-      padding: var(--spacing-1) var(--spacing-3);
-      border-radius: var(--radius-full);
-      font-size: 0.75rem;
-      font-weight: 500;
-    }
-
-    .verification-status.verified {
-      background-color: var(--success-light);
-      color: var(--success-dark);
-    }
-
-    .verification-status.pending {
-      background-color: var(--warning-light);
-      color: var(--warning-dark);
-    }
-
-    .verifier-info {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2);
-      margin-top: var(--spacing-2);
-      font-size: 0.875rem;
-      color: var(--gray-600);
-    }
-
-    .verifier-avatar {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      background: var(--gray-200);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 14px;
-    }
-
-    .verify-btn {
-      margin-top: var(--spacing-3);
-    }
-
-    .lock-toggle {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2);
-      margin-top: var(--spacing-2);
-      font-size: 0.875rem;
-      color: var(--gray-600);
-    }
-
-    .stats-panel {
-      background: white;
+    .summary-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
       border-radius: var(--radius-lg);
       padding: var(--spacing-6);
-      box-shadow: var(--shadow-sm);
-      position: sticky;
-      top: var(--spacing-8);
+      margin-bottom: var(--spacing-6);
     }
-
-    .stats-item {
-      padding: var(--spacing-4);
-      background: var(--gray-50);
+    .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);
-      margin-bottom: var(--spacing-3);
+      font-size: var(--font-size-body-small);
+      font-weight: var(--font-weight-medium);
     }
-
-    .stats-label {
-      font-size: 0.875rem;
-      color: var(--gray-500);
-      margin-bottom: var(--spacing-1);
-    }
-
-    .stats-value {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--gray-900);
-    }
-
-    .participant-progress {
-      margin-top: var(--spacing-6);
-    }
-
-    .participant-progress-item {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-3);
-      margin-bottom: var(--spacing-3);
-    }
-
-    .participant-avatar-small {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: var(--gray-200);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 16px;
-    }
-
-    .progress-info {
-      flex: 1;
-    }
-
-    .progress-name {
-      font-weight: 500;
-      font-size: 0.875rem;
-      color: var(--gray-900);
-      margin-bottom: var(--spacing-1);
-    }
-
-    .progress-bar-small {
-      height: 6px;
-      background: var(--gray-200);
-      border-radius: 3px;
-      overflow: hidden;
-    }
-
-    .progress-fill {
-      height: 100%;
-      background: var(--primary-main);
-      transition: width 0.3s;
-    }
-
-    .progress-percentage {
-      font-size: 0.875rem;
-      font-weight: 600;
-      color: var(--primary-main);
-    }
-
     .action-buttons {
       display: flex;
-      justify-content: space-between;
-      margin-top: var(--spacing-8);
-      padding-top: var(--spacing-6);
-      border-top: 1px solid var(--gray-200);
+      gap: var(--spacing-3);
+      justify-content: center;
     }
-
-    @media (max-width: 1023px) {
-      .verification-layout {
-        grid-template-columns: 1fr;
-      }
-
-      .stats-panel {
-        position: static;
-      }
+    @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="verification-container">
-    <div class="verification-header">
-      <div class="progress-circle-large">
-        <svg class="progress-ring" width="120" height="120">
-          <circle class="progress-ring-bg" cx="60" cy="60" r="52"></circle>
-          <circle class="progress-ring-circle" cx="60" cy="60" r="52"
-            stroke-dasharray="326.73" stroke-dashoffset="0" id="progressCircle"></circle>
-        </svg>
-        <div class="progress-text" id="progressText">0%</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>
-      <h1>섹션 검증</h1>
-      <p style="color: var(--gray-500);">
-        각 섹션을 확인하고 검증을 완료하세요
-      </p>
     </div>
 
-    <div class="verification-layout">
-      <!-- 섹션 리스트 -->
-      <div class="section-list-panel">
-        <h3 style="margin-bottom: var(--spacing-4);">검증 항목</h3>
-        <div id="verificationList"></div>
+    <!-- 주요 키워드 -->
+    <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="stats-panel">
-        <h3 style="margin-bottom: var(--spacing-4);">검증 현황</h3>
-
-        <div class="stats-item">
-          <div class="stats-label">전체 진행률</div>
-          <div class="stats-value" id="totalProgress">0%</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 class="stats-item">
-          <div class="stats-label">검증 완료</div>
-          <div class="stats-value">
-            <span id="verifiedCount">0</span> / <span id="totalCount">0</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>
-
-        <div class="stats-item">
-          <div class="stats-label">잠금 섹션</div>
-          <div class="stats-value" id="lockedCount">0</div>
+      </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 class="participant-progress">
-          <div class="stats-label" style="margin-bottom: var(--spacing-3);">참석자별 진행률</div>
-          <div id="participantProgress"></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>
 
     <!-- 액션 버튼 -->
     <div class="action-buttons">
-      <button type="button" class="btn btn-text" onclick="navigateTo('05-회의진행.html')">
-        ← 회의록으로 돌아가기
-      </button>
-      <button type="button" class="btn btn-primary" id="completeVerification" disabled>
-        검증 완료 및 회의 종료 →
+      <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>
-    let sections = [];
-    let verifiedSections = new Set();
-
-    // 섹션 데이터 로드
-    function loadSections() {
-      const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
-
-      if (template.sections) {
-        sections = template.sections.map(section => ({
-          ...section,
-          verified: false,
-          locked: false,
-          verifier: null,
-          verifiedAt: null
-        }));
-
-        renderVerificationList();
-        renderParticipantProgress();
-        updateStats();
-      }
-    }
-
-    // 검증 리스트 렌더링
-    function renderVerificationList() {
-      const list = document.getElementById('verificationList');
-      const currentUser = getCurrentUser();
-
-      list.innerHTML = sections.map((section, index) => `
-        <div class="verification-item ${section.verified ? 'verified' : 'pending'}" id="section-${index}">
-          <div class="verification-header-item">
-            <div class="section-name-verify">
-              ${section.name}
-              ${section.required ? '<span style="color: var(--error-main);">*</span>' : ''}
-            </div>
-            <div class="verification-status ${section.verified ? 'verified' : 'pending'}">
-              ${section.verified ? '✓ 검증 완료' : '⏳ 검증 대기'}
-            </div>
-          </div>
-
-          ${section.verified && section.verifier ? `
-            <div class="verifier-info">
-              <div class="verifier-avatar">${getUserById(section.verifier)?.avatar || '👤'}</div>
-              <span>검증자: ${getUserName(section.verifier)}</span>
-              <span style="color: var(--gray-400);">•</span>
-              <span>${new Date(section.verifiedAt).toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}</span>
-            </div>
-          ` : ''}
-
-          ${!section.verified ? `
-            <button class="btn btn-primary btn-sm verify-btn" onclick="verifySectionItem(${index})">
-              검증 완료 표시
-            </button>
-          ` : `
-            <div class="lock-toggle">
-              <input type="checkbox" id="lock-${index}" ${section.locked ? 'checked' : ''} onchange="toggleLock(${index})">
-              <label for="lock-${index}">섹션 잠금 (편집 불가)</label>
-            </div>
-          `}
-        </div>
-      `).join('');
-    }
-
-    // 섹션 검증
-    function verifySectionItem(index) {
-      const currentUser = getCurrentUser();
-      sections[index].verified = true;
-      sections[index].verifier = currentUser.id;
-      sections[index].verifiedAt = new Date().toISOString();
-
-      verifiedSections.add(index);
-
-      renderVerificationList();
-      updateStats();
-
-      showToast(`"${sections[index].name}" 섹션이 검증되었습니다.`, 'success');
-
-      // 모두 검증되면 버튼 활성화
-      checkAllVerified();
-    }
-
-    // 섹션 잠금 토글
-    function toggleLock(index) {
-      const checkbox = document.getElementById(`lock-${index}`);
-      sections[index].locked = checkbox.checked;
-
-      updateStats();
-
-      if (checkbox.checked) {
-        showToast('섹션이 잠겼습니다. 더 이상 편집할 수 없습니다.', 'info');
-      } else {
-        showToast('섹션 잠금이 해제되었습니다.', 'info');
-      }
-    }
-
-    // 통계 업데이트
-    function updateStats() {
-      const verifiedCount = sections.filter(s => s.verified).length;
-      const totalCount = sections.length;
-      const lockedCount = sections.filter(s => s.locked).length;
-      const progress = totalCount > 0 ? Math.round((verifiedCount / totalCount) * 100) : 0;
-
-      document.getElementById('verifiedCount').textContent = verifiedCount;
-      document.getElementById('totalCount').textContent = totalCount;
-      document.getElementById('lockedCount').textContent = lockedCount;
-      document.getElementById('totalProgress').textContent = `${progress}%`;
-      document.getElementById('progressText').textContent = `${progress}%`;
-
-      // 진행률 원 업데이트
-      const circle = document.getElementById('progressCircle');
-      const circumference = 2 * Math.PI * 52;
-      const offset = circumference - (progress / 100) * circumference;
-      circle.style.strokeDashoffset = offset;
-    }
-
-    // 참석자별 진행률
-    function renderParticipantProgress() {
-      const users = getFromStorage(STORAGE_KEYS.USERS) || [];
-      const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
-
-      if (meetingData.participants) {
-        const progressContainer = document.getElementById('participantProgress');
-
-        progressContainer.innerHTML = meetingData.participants.map(email => {
-          const user = users.find(u => u.email === email) || { name: email, avatar: '👤', id: 'unknown' };
-          const userVerifications = sections.filter(s => s.verifier === user.id).length;
-          const userProgress = sections.length > 0 ? Math.round((userVerifications / sections.length) * 100) : 0;
-
-          return `
-            <div class="participant-progress-item">
-              <div class="participant-avatar-small">${user.avatar}</div>
-              <div class="progress-info">
-                <div class="progress-name">${user.name}</div>
-                <div class="progress-bar-small">
-                  <div class="progress-fill" style="width: ${userProgress}%"></div>
-                </div>
-              </div>
-              <div class="progress-percentage">${userProgress}%</div>
-            </div>
-          `;
-        }).join('');
-      }
-    }
-
-    // 모든 섹션 검증 확인
-    function checkAllVerified() {
-      const requiredSections = sections.filter(s => s.required);
-      const allRequiredVerified = requiredSections.every(s => s.verified);
-
-      const completeBtn = document.getElementById('completeVerification');
-      completeBtn.disabled = !allRequiredVerified;
-
-      if (allRequiredVerified) {
-        showToast('모든 필수 섹션이 검증되었습니다!', 'success');
-      }
-    }
-
-    // 검증 완료 및 회의 종료
-    document.getElementById('completeVerification').addEventListener('click', () => {
-      const allVerified = sections.every(s => !s.required || s.verified);
-
-      if (!allVerified) {
-        showToast('모든 필수 섹션을 검증해주세요.', 'warning');
-        return;
-      }
-
-      if (confirm('검증을 완료하고 회의를 종료하시겠습니까?')) {
-        // 검증 데이터 저장
-        sessionStorage.setItem('verificationData', JSON.stringify(sections));
-
-        showToast('검증이 완료되었습니다.', 'success');
-
-        setTimeout(() => {
-          navigateTo('07-회의종료.html');
-        }, 1000);
-      }
+    MeetingApp.ready(() => {
+      console.log('검증 완료 페이지 로드됨');
     });
-
-    // 초기화
-    loadSections();
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/07-회의종료.html b/design/uiux/prototype/07-회의종료.html
index 8b988de..f7095c8 100644
--- a/design/uiux/prototype/07-회의종료.html
+++ b/design/uiux/prototype/07-회의종료.html
@@ -3,571 +3,110 @@
 <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">
   <style>
-    .completion-container {
-      max-width: 1400px;
+    body { background-color: var(--color-gray-50); }
+    .page-container {
+      max-width: 600px;
       margin: 0 auto;
-      padding: var(--spacing-8);
-    }
-
-    .completion-header {
-      text-align: center;
-      margin-bottom: var(--spacing-8);
-    }
-
-    .success-icon {
-      font-size: 80px;
-      margin-bottom: var(--spacing-4);
-    }
-
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: var(--spacing-6);
-      margin-bottom: var(--spacing-8);
-    }
-
-    .stat-card {
-      background: white;
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-6);
-      box-shadow: var(--shadow-sm);
+      padding: var(--spacing-8) var(--spacing-4);
       text-align: center;
     }
-
-    .stat-icon {
-      font-size: 32px;
+    .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);
     }
-
-    .stat-value {
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--gray-900);
-      margin-bottom: var(--spacing-2);
-    }
-
-    .stat-label {
-      font-size: 0.875rem;
-      color: var(--gray-500);
-    }
-
-    .content-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--spacing-6);
+    .page-subtitle {
+      font-size: var(--font-size-body);
+      color: var(--color-gray-500);
       margin-bottom: var(--spacing-8);
     }
-
-    .content-panel {
-      background: white;
+    .info-card {
+      background: var(--color-white);
+      border: 1px solid var(--color-gray-200);
       border-radius: var(--radius-lg);
       padding: var(--spacing-6);
-      box-shadow: var(--shadow-sm);
+      margin-bottom: var(--spacing-6);
+      text-align: left;
     }
-
-    .panel-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      color: var(--gray-900);
-      margin-bottom: var(--spacing-4);
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-2);
-    }
-
-    .checklist-item {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-3);
-      padding: var(--spacing-3);
-      margin-bottom: var(--spacing-2);
-      border-radius: var(--radius-md);
-      background: var(--gray-50);
-    }
-
-    .checklist-icon {
-      font-size: 20px;
-    }
-
-    .checklist-text {
-      flex: 1;
-      font-size: 0.875rem;
-    }
-
-    .checklist-action {
-      font-size: 0.875rem;
-      color: var(--primary-main);
-      cursor: pointer;
-      text-decoration: underline;
-    }
-
-    .todo-item {
-      padding: var(--spacing-4);
-      background: var(--gray-50);
-      border-radius: var(--radius-md);
-      margin-bottom: var(--spacing-3);
-      border-left: 4px solid var(--primary-main);
-    }
-
-    .todo-content {
-      font-weight: 500;
-      color: var(--gray-900);
-      margin-bottom: var(--spacing-2);
-    }
-
-    .todo-meta {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-4);
-      font-size: 0.875rem;
-      color: var(--gray-600);
-    }
-
-    .todo-meta-item {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-1);
-    }
-
-    .speaker-stats {
-      margin-top: var(--spacing-4);
-    }
-
-    .speaker-item {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-3);
-      padding: var(--spacing-3);
-      margin-bottom: var(--spacing-2);
-    }
-
-    .speaker-avatar {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background: var(--gray-200);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-    }
-
-    .speaker-info {
-      flex: 1;
-    }
-
-    .speaker-name {
-      font-weight: 500;
-      color: var(--gray-900);
-      margin-bottom: var(--spacing-1);
-    }
-
-    .speaker-bar {
-      height: 6px;
-      background: var(--gray-200);
-      border-radius: 3px;
-      overflow: hidden;
-    }
-
-    .speaker-fill {
-      height: 100%;
-      background: var(--primary-main);
-      transition: width 0.3s;
-    }
-
-    .speaker-count {
-      font-size: 0.875rem;
-      font-weight: 600;
-      color: var(--gray-600);
-    }
-
-    .keyword-cloud {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--spacing-2);
-      margin-top: var(--spacing-4);
-    }
-
-    .keyword-tag {
-      padding: var(--spacing-2) var(--spacing-4);
-      background: var(--primary-light);
-      color: var(--primary-dark);
-      border-radius: var(--radius-full);
-      font-size: 0.875rem;
-      font-weight: 500;
-    }
-
-    .next-meeting {
-      background: linear-gradient(135deg, var(--primary-main), var(--secondary-main));
-      color: white;
-      padding: var(--spacing-6);
-      border-radius: var(--radius-lg);
-      margin-top: var(--spacing-4);
-    }
-
-    .next-meeting-title {
-      font-size: 1rem;
-      font-weight: 600;
-      margin-bottom: var(--spacing-2);
-    }
-
-    .next-meeting-date {
-      font-size: 1.25rem;
-      font-weight: 700;
-      margin-bottom: var(--spacing-3);
-    }
-
-    .action-buttons {
+    .info-item {
       display: flex;
       justify-content: space-between;
-      margin-top: var(--spacing-8);
-      padding-top: var(--spacing-6);
-      border-top: 1px solid var(--gray-200);
+      padding: var(--spacing-3) 0;
+      border-bottom: 1px solid var(--color-gray-100);
     }
-
-    @media (max-width: 1023px) {
-      .stats-grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      .content-grid {
-        grid-template-columns: 1fr;
-      }
+    .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="completion-container">
-    <div class="completion-header">
-      <div class="success-icon">🎉</div>
-      <h1>회의가 종료되었습니다</h1>
-      <p style="color: var(--gray-500); font-size: 1.125rem;">
-        회의 통계와 Todo를 확인하고 최종 확정하세요
-      </p>
-    </div>
+  <div class="page-container">
+    <div class="completion-icon">🏁</div>
+    <h1 class="page-title">회의가 종료되었습니다</h1>
+    <p class="page-subtitle">회의록이 자동으로 저장되었습니다</p>
 
-    <!-- 통계 카드 -->
-    <div class="stats-grid">
-      <div class="stat-card">
-        <div class="stat-icon">⏱️</div>
-        <div class="stat-value" id="meetingDuration">-</div>
-        <div class="stat-label">회의 총 시간</div>
+    <!-- 회의 정보 -->
+    <div class="info-card">
+      <div class="info-item">
+        <span class="info-label">회의 제목</span>
+        <span class="info-value">2025년 1분기 제품 기획 회의</span>
       </div>
-
-      <div class="stat-card">
-        <div class="stat-icon">👥</div>
-        <div class="stat-value" id="participantCount">-</div>
-        <div class="stat-label">참석자 수</div>
+      <div class="info-item">
+        <span class="info-label">회의 시간</span>
+        <span class="info-value">45분</span>
       </div>
-
-      <div class="stat-card">
-        <div class="stat-icon">💬</div>
-        <div class="stat-value" id="speechCount">-</div>
-        <div class="stat-label">총 발언 횟수</div>
+      <div class="info-item">
+        <span class="info-label">참석자</span>
+        <span class="info-value">3명</span>
       </div>
-
-      <div class="stat-card">
-        <div class="stat-icon">✅</div>
-        <div class="stat-value" id="todoCount">-</div>
-        <div class="stat-label">생성된 Todo</div>
-      </div>
-    </div>
-
-    <!-- 콘텐츠 그리드 -->
-    <div class="content-grid">
-      <!-- 필수 항목 검사 -->
-      <div class="content-panel">
-        <div class="panel-title">
-          <span>📋</span>
-          <span>필수 항목 검사</span>
-        </div>
-        <div id="checklistItems"></div>
-      </div>
-
-      <!-- AI Todo 추출 -->
-      <div class="content-panel">
-        <div class="panel-title">
-          <span>✨</span>
-          <span>AI Todo 추출 결과</span>
-        </div>
-        <div id="todoList"></div>
-        <button class="btn btn-secondary btn-sm" style="width: 100%; margin-top: var(--spacing-3);" onclick="openModal('editTodoModal')">
-          Todo 수정
-        </button>
-      </div>
-
-      <!-- 발언 통계 -->
-      <div class="content-panel">
-        <div class="panel-title">
-          <span>📊</span>
-          <span>화자별 발언 통계</span>
-        </div>
-        <div class="speaker-stats" id="speakerStats"></div>
-      </div>
-
-      <!-- 주요 키워드 -->
-      <div class="content-panel">
-        <div class="panel-title">
-          <span>🔑</span>
-          <span>주요 키워드</span>
-        </div>
-        <div class="keyword-cloud" id="keywordCloud"></div>
-
-        <!-- 다음 회의 일정 감지 -->
-        <div class="next-meeting">
-          <div class="next-meeting-title">🗓️ AI가 감지한 다음 회의</div>
-          <div class="next-meeting-date">2025년 10월 27일 14:00</div>
-          <button class="btn" style="background: white; color: var(--primary-main);" onclick="addToCalendar()">
-            📅 캘린더에 추가
-          </button>
-        </div>
+      <div class="info-item">
+        <span class="info-label">생성된 Todo</span>
+        <span class="info-value">5개</span>
       </div>
     </div>
 
     <!-- 액션 버튼 -->
     <div class="action-buttons">
-      <button type="button" class="btn btn-text" onclick="navigateTo('05-회의진행.html')">
-        ← 회의록으로 돌아가기
+      <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 style="display: flex; gap: var(--spacing-3);">
-        <button type="button" class="btn btn-secondary" id="saveDraft">
-          나중에 확정
-        </button>
-        <button type="button" class="btn btn-primary" id="finalizeMinutes">
-          최종 확정 →
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Todo 수정 모달 -->
-  <div class="modal-backdrop" id="editTodoModal">
-    <div class="modal">
-      <div class="modal-header">
-        <h3 class="modal-title">Todo 수정</h3>
-      </div>
-      <div class="modal-body">
-        <p style="color: var(--gray-600); margin-bottom: var(--spacing-4);">
-          AI가 추출한 Todo를 수정하거나 새로운 Todo를 추가할 수 있습니다.
-        </p>
-        <div id="editableTodoList"></div>
-      </div>
-      <div class="modal-footer">
-        <button class="btn btn-text" onclick="closeModal('editTodoModal')">취소</button>
-        <button class="btn btn-primary" onclick="saveTodos()">저장</button>
-      </div>
     </div>
   </div>
 
   <script src="common.js"></script>
   <script>
-    let extractedTodos = [];
-
-    // 회의 통계 로드
-    function loadMeetingStats() {
-      const duration = parseInt(sessionStorage.getItem('meetingDuration') || '0');
-      const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
-      const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
-
-      // 회의 시간
-      document.getElementById('meetingDuration').textContent = formatDuration(duration / 60);
-
-      // 참석자 수
-      const participantCount = meetingData.participants?.length || 0;
-      document.getElementById('participantCount').textContent = `${participantCount}명`;
-
-      // 발언 횟수 (시뮬레이션)
-      const totalSpeech = 45 + Math.floor(Math.random() * 20);
-      document.getElementById('speechCount').textContent = `${totalSpeech}회`;
-
-      // Todo 개수
-      extractedTodos = generateTodos();
-      document.getElementById('todoCount').textContent = `${extractedTodos.length}개`;
-    }
-
-    // 필수 항목 체크리스트
-    function renderChecklist() {
-      const template = JSON.parse(sessionStorage.getItem('selectedTemplate') || '{}');
-      const content = JSON.parse(sessionStorage.getItem('meetingContent') || '{}');
-
-      const requiredSections = template.sections?.filter(s => s.required) || [];
-      const checklist = requiredSections.map(section => {
-        const hasContent = content[section.id] && content[section.id].trim().length > 0;
-        return {
-          name: section.name,
-          completed: hasContent,
-          sectionId: section.id
-        };
-      });
-
-      const container = document.getElementById('checklistItems');
-      container.innerHTML = checklist.map(item => `
-        <div class="checklist-item">
-          <div class="checklist-icon">${item.completed ? '✅' : '❌'}</div>
-          <div class="checklist-text">${item.name}</div>
-          ${!item.completed ? `<span class="checklist-action" onclick="goToSection('${item.sectionId}')">작성하기</span>` : ''}
-        </div>
-      `).join('');
-
-      // 모두 완료되었는지 확인
-      const allCompleted = checklist.every(item => item.completed);
-      document.getElementById('finalizeMinutes').disabled = !allCompleted;
-
-      return allCompleted;
-    }
-
-    // Todo 생성 (AI 시뮬레이션)
-    function generateTodos() {
-      return [
-        {
-          id: generateId('todo'),
-          content: '1분기 마케팅 예산안 작성',
-          assignee: 'user2',
-          dueDate: '2025-10-25',
-          priority: 'high',
-          source: '결정 사항 섹션'
-        },
-        {
-          id: generateId('todo'),
-          content: '경쟁사 분석 보고서 작성',
-          assignee: 'user3',
-          dueDate: '2025-10-22',
-          priority: 'high',
-          source: '논의 내용 섹션'
-        },
-        {
-          id: generateId('todo'),
-          content: '신규 프로젝트 팀 구성안 제출',
-          assignee: 'user1',
-          dueDate: '2025-10-23',
-          priority: 'normal',
-          source: '결정 사항 섹션'
-        }
-      ];
-    }
-
-    // Todo 렌더링
-    function renderTodos() {
-      const container = document.getElementById('todoList');
-      container.innerHTML = extractedTodos.map(todo => `
-        <div class="todo-item">
-          <div class="todo-content">${todo.content}</div>
-          <div class="todo-meta">
-            <div class="todo-meta-item">
-              <span>👤</span>
-              <span>${getUserName(todo.assignee)}</span>
-            </div>
-            <div class="todo-meta-item">
-              <span>📅</span>
-              <span>${getDdayText(todo.dueDate)}</span>
-            </div>
-            <div class="todo-meta-item">
-              <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: ${todo.priority === 'high' ? 'var(--error-main)' : 'var(--gray-400)'};"></span>
-              <span>${todo.priority === 'high' ? '높음' : '보통'}</span>
-            </div>
-          </div>
-        </div>
-      `).join('');
-    }
-
-    // 화자별 통계
-    function renderSpeakerStats() {
-      const meetingData = JSON.parse(sessionStorage.getItem('newMeeting') || '{}');
-      const speakers = (meetingData.participants || []).map(email => {
-        const user = getUserById(email) || { name: email, avatar: '👤' };
-        const count = 10 + Math.floor(Math.random() * 20);
-        return { ...user, count };
-      });
-
-      const maxCount = Math.max(...speakers.map(s => s.count));
-      const container = document.getElementById('speakerStats');
-
-      container.innerHTML = speakers.map(speaker => `
-        <div class="speaker-item">
-          <div class="speaker-avatar">${speaker.avatar}</div>
-          <div class="speaker-info">
-            <div class="speaker-name">${speaker.name}</div>
-            <div class="speaker-bar">
-              <div class="speaker-fill" style="width: ${(speaker.count / maxCount) * 100}%"></div>
-            </div>
-          </div>
-          <div class="speaker-count">${speaker.count}회</div>
-        </div>
-      `).join('');
-    }
-
-    // 키워드 렌더링
-    function renderKeywords() {
-      const keywords = ['1분기 목표', '마케팅', '예산', 'ROI', '경쟁사 분석', '프로젝트', '전략', '실적'];
-      const container = document.getElementById('keywordCloud');
-
-      container.innerHTML = keywords.map(keyword => `
-        <div class="keyword-tag">${keyword}</div>
-      `).join('');
-    }
-
-    // 섹션으로 이동
-    function goToSection(sectionId) {
-      sessionStorage.setItem('focusSection', sectionId);
-      navigateTo('05-회의진행.html');
-    }
-
-    // Todo 저장
-    function saveTodos() {
-      showToast('Todo가 저장되었습니다.', 'success');
-      closeModal('editTodoModal');
-    }
-
-    // 캘린더에 추가
-    function addToCalendar() {
-      showToast('다음 회의 일정이 캘린더에 추가되었습니다.', 'success');
-    }
-
-    // 나중에 확정
-    document.getElementById('saveDraft').addEventListener('click', () => {
-      if (confirm('나중에 확정하시겠습니까?')) {
-        showToast('임시 저장되었습니다.', 'info');
-        setTimeout(() => {
-          navigateTo('02-대시보드.html');
-        }, 1000);
-      }
+    MeetingApp.ready(() => {
+      console.log('회의 종료 페이지 로드됨');
+      // 회의 종료 알림
+      MeetingApp.Toast.success('회의가 성공적으로 종료되었습니다');
     });
-
-    // 최종 확정
-    document.getElementById('finalizeMinutes').addEventListener('click', () => {
-      const allCompleted = renderChecklist();
-
-      if (!allCompleted) {
-        showToast('모든 필수 항목을 작성해주세요.', 'warning');
-        return;
-      }
-
-      if (confirm('회의록을 최종 확정하시겠습니까?\n확정 후에는 수정이 제한됩니다.')) {
-        // Todo 저장
-        extractedTodos.forEach(todo => {
-          todo.meetingId = 'meeting_final';
-          todo.status = 'pending';
-          todo.progress = 0;
-          saveTodo(todo);
-        });
-
-        showToast('회의록이 최종 확정되었습니다.', 'success');
-
-        setTimeout(() => {
-          navigateTo('08-회의록공유.html');
-        }, 1000);
-      }
-    });
-
-    // 초기화
-    loadMeetingStats();
-    renderChecklist();
-    renderTodos();
-    renderSpeakerStats();
-    renderKeywords();
   </script>
 </body>
 </html>
diff --git a/design/uiux/prototype/08-최종확정.html b/design/uiux/prototype/08-최종확정.html
new file mode 100644
index 0000000..0096913
--- /dev/null
+++ b/design/uiux/prototype/08-최종확정.html
@@ -0,0 +1,303 @@
+<!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 { 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-container">
+    <div class="page-header">
+      <h1 class="page-title">회의록 최종 확정</h1>
+      <p class="page-subtitle">필수 항목을 확인하고 회의록을 최종 확정하세요</p>
+    </div>
+
+    <div id="warningMessage" class="warning-message">
+      ⚠️ 아래 필수 항목을 모두 확인해주세요.
+    </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>
+
+          <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 class="checklist-panel">
+        <h3 class="checklist-title">필수 항목 확인</h3>
+
+        <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" 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="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>
+    const checklistItems = document.querySelectorAll('.checklist-item');
+    const confirmBtn = document.getElementById('confirmBtn');
+    const warningMessage = document.getElementById('warningMessage');
+
+    // 체크리스트 항목 클릭
+    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();
+      });
+    });
+
+    // 완료 여부 확인
+    function checkCompletion() {
+      const requiredItems = document.querySelectorAll('.checklist-item[data-required="true"]');
+      const checkedRequired = document.querySelectorAll('.checklist-item[data-required="true"].checked');
+
+      if (requiredItems.length === checkedRequired.length) {
+        confirmBtn.disabled = false;
+        warningMessage.classList.remove('show');
+      } else {
+        confirmBtn.disabled = true;
+        warningMessage.classList.add('show');
+      }
+    }
+
+    // 확정 버튼 클릭
+    confirmBtn.addEventListener('click', () => {
+      MeetingApp.Loading.show();
+
+      setTimeout(() => {
+        MeetingApp.Loading.hide();
+        MeetingApp.Toast.success('회의록이 확정되었습니다!');
+
+        setTimeout(() => {
+          window.location.href = '09-회의록공유.html';
+        }, 1000);
+      }, 1500);
+    });
+
+    // 초기 확인
+    checkCompletion();
+  </script>
+</body>
+</html>
diff --git a/design/uiux/prototype/common.css b/design/uiux/prototype/common.css
index 5cc0a0e..cf58303 100644
--- a/design/uiux/prototype/common.css
+++ b/design/uiux/prototype/common.css
@@ -1,80 +1,62 @@
-/* ============================================
-   회의록 작성 및 공유 개선 서비스 - 공통 스타일
-   ============================================ */
+/*
+ * 회의록 작성 및 공유 개선 서비스 - 공통 스타일시트
+ * 버전: 1.0
+ * 작성일: 2025-10-20
+ * 레퍼런스: 스타일 가이드 v1.0
+ */
 
-/* === CSS Reset === */
-*, *::before, *::after {
-  box-sizing: border-box;
+/* ===== CSS Reset ===== */
+* {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
-html {
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
-  line-height: 1.5;
-  color: #4B5563;
-  background-color: #F9FAFB;
-}
-
-/* === CSS Variables === */
+/* ===== Root Variables (CSS Custom Properties) ===== */
 :root {
   /* Primary Colors */
-  --primary-light: #4DFFDB;
-  --primary-main: #00D9B1;
-  --primary-dark: #00A88A;
+  --color-primary-light: #4DFFDB;
+  --color-primary-main: #00D9B1;
+  --color-primary-dark: #00A88A;
 
   /* Secondary Colors */
-  --secondary-light: #A5B4FC;
-  --secondary-main: #6366F1;
-  --secondary-dark: #4F46E5;
+  --color-secondary-light: #A5B4FC;
+  --color-secondary-main: #6366F1;
+  --color-secondary-dark: #4F46E5;
 
   /* Semantic Colors */
-  --success-light: #6EE7B7;
-  --success-main: #10B981;
-  --success-dark: #059669;
+  --color-success-light: #6EE7B7;
+  --color-success-main: #10B981;
+  --color-success-dark: #059669;
 
-  --warning-light: #FCD34D;
-  --warning-main: #F59E0B;
-  --warning-dark: #D97706;
+  --color-warning-light: #FCD34D;
+  --color-warning-main: #F59E0B;
+  --color-warning-dark: #D97706;
 
-  --error-light: #FCA5A5;
-  --error-main: #EF4444;
-  --error-dark: #DC2626;
+  --color-error-light: #FCA5A5;
+  --color-error-main: #EF4444;
+  --color-error-dark: #DC2626;
 
-  --info-light: #93C5FD;
-  --info-main: #3B82F6;
-  --info-dark: #2563EB;
+  --color-info-light: #93C5FD;
+  --color-info-main: #3B82F6;
+  --color-info-dark: #2563EB;
 
   /* Neutral Colors */
-  --gray-50: #F9FAFB;
-  --gray-100: #F3F4F6;
-  --gray-200: #E5E7EB;
-  --gray-300: #D1D5DB;
-  --gray-400: #9CA3AF;
-  --gray-500: #6B7280;
-  --gray-600: #4B5563;
-  --gray-700: #374151;
-  --gray-800: #1F2937;
-  --gray-900: #111827;
+  --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;
 
-  /* Typography */
-  --font-display: 700 3rem/1.25 'Pretendard';
-  --font-h1: 700 2.25rem/1.25 'Pretendard';
-  --font-h2: 600 1.875rem/1.25 'Pretendard';
-  --font-h3: 600 1.5rem/1.5 'Pretendard';
-  --font-h4: 600 1.25rem/1.5 'Pretendard';
-  --font-body-large: 400 1.125rem/1.5 'Pretendard';
-  --font-body: 400 1rem/1.5 'Pretendard';
-  --font-body-small: 400 0.875rem/1.5 'Pretendard';
-  --font-caption: 400 0.75rem/1.5 'Pretendard';
-
-  /* Spacing (8px 기반) */
+  /* Spacing System (8px base) */
+  --spacing-0: 0;
   --spacing-1: 4px;
   --spacing-2: 8px;
   --spacing-3: 12px;
@@ -85,13 +67,37 @@ body {
   --spacing-10: 40px;
   --spacing-12: 48px;
   --spacing-16: 64px;
+  --spacing-20: 80px;
+
+  /* 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);
@@ -102,123 +108,184 @@ body {
   --transition-fast: 150ms ease-out;
   --transition-base: 200ms ease-out;
   --transition-slow: 300ms ease-out;
+
+  /* Z-index */
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-modal-backdrop: 1200;
+  --z-modal: 1300;
+  --z-toast: 1400;
+  --z-tooltip: 1500;
 }
 
-/* === Typography === */
-h1 { font: var(--font-h1); color: var(--gray-900); }
-h2 { font: var(--font-h2); color: var(--gray-900); }
-h3 { font: var(--font-h3); color: var(--gray-900); }
-h4 { font: var(--font-h4); color: var(--gray-900); }
-p { font: var(--font-body); margin-bottom: var(--spacing-4); }
-small { font: var(--font-caption); color: var(--gray-500); }
+/* ===== 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;
+}
 
-/* === Buttons === */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-gray-900);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+}
+
+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);
+}
+
+a:hover {
+  color: var(--color-primary-dark);
+}
+
+/* ===== Layout Utilities ===== */
+.container {
+  width: 100%;
+  padding: 0 var(--spacing-6);
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .container { padding: 0 var(--spacing-8); }
+}
+
+@media (min-width: 1024px) {
+  .container { padding: 0 var(--spacing-16); }
+}
+
+.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; }
+
+/* ===== Button Styles ===== */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--spacing-2);
   padding: var(--spacing-3) var(--spacing-6);
-  font-size: 1rem;
-  font-weight: 500;
   border: none;
   border-radius: var(--radius-md);
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
   cursor: pointer;
   transition: all var(--transition-fast);
   text-decoration: none;
-  gap: var(--spacing-2);
+  white-space: nowrap;
 }
 
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Primary Button */
 .btn-primary {
-  background-color: var(--primary-main);
-  color: white;
+  background-color: var(--color-primary-main);
+  color: var(--color-white);
 }
 
-.btn-primary:hover {
-  background-color: var(--primary-light);
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--color-primary-light);
   transform: translateY(-1px);
   box-shadow: var(--shadow-sm);
 }
 
-.btn-primary:active {
-  background-color: var(--primary-dark);
+.btn-primary:active:not(:disabled) {
+  background-color: var(--color-primary-dark);
   transform: scale(0.98);
 }
 
 .btn-primary:disabled {
-  background-color: var(--gray-300);
-  color: var(--gray-500);
-  cursor: not-allowed;
-  transform: none;
+  background-color: var(--color-gray-300);
+  color: var(--color-gray-500);
 }
 
+/* Secondary Button */
 .btn-secondary {
   background-color: transparent;
-  color: var(--primary-main);
-  border: 1px solid var(--primary-main);
+  color: var(--color-primary-main);
+  border: 1px solid var(--color-primary-main);
 }
 
-.btn-secondary:hover {
+.btn-secondary:hover:not(:disabled) {
   background-color: rgba(0, 217, 177, 0.1);
 }
 
-.btn-secondary:active {
+.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-color: transparent;
-  color: var(--gray-700);
+  color: var(--color-gray-700);
+  padding: var(--spacing-2) var(--spacing-4);
 }
 
-.btn-text:hover {
-  background-color: var(--gray-100);
+.btn-text:hover:not(:disabled) {
+  background-color: var(--color-gray-100);
 }
 
-.btn-text:active {
-  background-color: var(--gray-200);
+.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: 40px;
   height: 40px;
   padding: 0;
-  border-radius: var(--radius-full);
+  border-radius: var(--radius-md);
   background-color: transparent;
 }
 
-.btn-icon:hover {
-  background-color: 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: 0.875rem;
-}
+.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: 1.125rem;
-}
-
-/* FAB (Floating Action Button) */
+/* Floating Action Button */
 .fab {
   position: fixed;
-  bottom: var(--spacing-4);
   right: var(--spacing-4);
+  bottom: var(--spacing-4);
   width: 56px;
   height: 56px;
-  background-color: var(--primary-main);
-  color: white;
+  padding: 0;
   border-radius: var(--radius-full);
-  border: none;
+  background-color: var(--color-primary-main);
+  color: var(--color-white);
   box-shadow: var(--shadow-md);
-  cursor: pointer;
-  transition: all var(--transition-base);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  z-index: 1000;
+  z-index: var(--z-sticky);
 }
 
 .fab:hover {
@@ -230,159 +297,207 @@ small { font: var(--font-caption); color: var(--gray-500); }
   transform: scale(0.95);
 }
 
-/* === Input Fields === */
-.input,
-.textarea,
-.select {
+/* ===== Form Styles ===== */
+.form-group {
+  margin-bottom: var(--spacing-4);
+}
+
+.form-label {
+  display: block;
+  margin-bottom: var(--spacing-2);
+  font-size: var(--font-size-body-small);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-700);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
   width: 100%;
   padding: var(--spacing-3) var(--spacing-4);
-  font-size: 1rem;
-  font-family: inherit;
-  border: 1px solid var(--gray-300);
+  border: 1px solid var(--color-gray-300);
   border-radius: var(--radius-md);
-  background-color: white;
+  font-size: var(--font-size-body);
+  font-family: inherit;
+  background-color: var(--color-white);
   transition: all var(--transition-fast);
 }
 
-.input:focus,
-.textarea:focus,
-.select:focus {
-  outline: 4px solid rgba(0, 217, 177, 0.2);
-  border-color: var(--primary-main);
-  border-width: 2px;
+.form-input {
+  height: 48px;
 }
 
-.input.error,
-.textarea.error {
-  border-color: var(--error-main);
-}
-
-.input:disabled,
-.textarea:disabled,
-.select:disabled {
-  background-color: var(--gray-100);
-  color: var(--gray-400);
-  cursor: not-allowed;
-}
-
-.textarea {
+.form-textarea {
   min-height: 120px;
   resize: vertical;
 }
 
-.input-group {
-  margin-bottom: var(--spacing-4);
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  outline: 4px solid rgba(0, 217, 177, 0.2);
+  border-color: var(--color-primary-main);
+  border-width: 2px;
 }
 
-.input-label {
-  display: block;
-  margin-bottom: var(--spacing-2);
-  font-weight: 500;
-  color: var(--gray-700);
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--color-gray-400);
 }
 
-.input-error {
+.form-input:disabled,
+.form-textarea:disabled,
+.form-select:disabled {
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-400);
+  cursor: not-allowed;
+}
+
+.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: 0.875rem;
-  color: var(--error-main);
+  font-size: var(--font-size-body-small);
+  color: var(--color-error-main);
 }
 
-/* === Cards === */
+/* ===== Card Styles ===== */
 .card {
-  background-color: white;
-  border: 1px solid var(--gray-200);
+  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: all var(--transition-base);
 }
 
-.card.interactive {
-  cursor: pointer;
-}
-
 .card.interactive:hover {
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
+  cursor: pointer;
 }
 
 .card.interactive:active {
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   transform: scale(0.99);
 }
 
-/* === Badges === */
+.card-header {
+  margin-bottom: var(--spacing-4);
+}
+
+.card-title {
+  font-size: var(--font-size-h4);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-900);
+}
+
+.card-body {
+  color: var(--color-gray-600);
+}
+
+/* ===== Badge Styles ===== */
 .badge {
   display: inline-flex;
   align-items: center;
+  gap: var(--spacing-1);
   padding: var(--spacing-1) var(--spacing-3);
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-radius: var(--radius-full);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
 }
 
 .badge-primary {
-  background-color: var(--primary-light);
-  color: var(--primary-dark);
+  background-color: var(--color-primary-light);
+  color: var(--color-primary-dark);
 }
 
 .badge-success {
-  background-color: var(--success-light);
-  color: var(--success-dark);
+  background-color: var(--color-success-light);
+  color: var(--color-success-dark);
 }
 
 .badge-warning {
-  background-color: var(--warning-light);
-  color: var(--warning-dark);
+  background-color: var(--color-warning-light);
+  color: var(--color-warning-dark);
 }
 
 .badge-error {
-  background-color: var(--error-light);
-  color: var(--error-dark);
+  background-color: var(--color-error-light);
+  color: var(--color-error-dark);
 }
 
 .badge-neutral {
-  background-color: var(--gray-200);
-  color: var(--gray-700);
+  background-color: var(--color-gray-200);
+  color: var(--color-gray-700);
 }
 
-/* === Modal === */
+/* ===== Modal Styles ===== */
 .modal-backdrop {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  right: 0;
+  bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
-  display: none;
+  z-index: var(--z-modal-backdrop);
+  display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 9999;
-}
-
-.modal-backdrop.active {
-  display: flex;
+  padding: var(--spacing-4);
+  opacity: 0;
+  animation: fadeIn var(--transition-base);
+  animation-fill-mode: forwards;
 }
 
 .modal {
-  background-color: white;
+  background-color: var(--color-white);
   border-radius: var(--radius-xl);
   padding: var(--spacing-8);
   max-width: 600px;
-  width: 90%;
+  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 {
   margin-bottom: var(--spacing-6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .modal-title {
-  font: var(--font-h3);
-  color: var(--gray-900);
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-900);
+}
+
+.modal-close {
+  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 {
@@ -391,35 +506,82 @@ small { font: var(--font-caption); color: var(--gray-500); }
 
 .modal-footer {
   display: flex;
-  justify-content: flex-end;
   gap: var(--spacing-3);
+  justify-content: flex-end;
 }
 
-/* === Toast === */
+@keyframes fadeIn {
+  to { opacity: 1; }
+}
+
+@keyframes modalIn {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ===== Toast Styles ===== */
 .toast-container {
   position: fixed;
   top: var(--spacing-4);
   right: var(--spacing-4);
-  z-index: 10000;
+  z-index: var(--z-toast);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3);
 }
 
 .toast {
-  background-color: white;
+  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: center;
+  align-items: flex-start;
   gap: var(--spacing-3);
-  border-left: 4px solid;
-  animation: slideIn 200ms ease-out;
+  border-left: 4px solid var(--color-gray-400);
+  animation: slideInRight var(--transition-base);
 }
 
-@keyframes slideIn {
+.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-content {
+  flex: 1;
+}
+
+.toast-title {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-900);
+  margin-bottom: var(--spacing-1);
+}
+
+.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: translateX(400px);
     opacity: 0;
@@ -430,167 +592,189 @@ small { font: var(--font-caption); color: var(--gray-500); }
   }
 }
 
-.toast-success {
-  border-left-color: var(--success-main);
+/* ===== 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;
 }
 
-.toast-error {
-  border-left-color: var(--error-main);
+.spinner-sm { width: 24px; height: 24px; border-width: 3px; }
+.spinner-lg { width: 56px; height: 56px; border-width: 5px; }
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
 
-.toast-warning {
-  border-left-color: var(--warning-main);
+.skeleton {
+  background-color: var(--color-gray-200);
+  border-radius: var(--radius-sm);
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-.toast-info {
-  border-left-color: var(--info-main);
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
 }
 
-/* === Layout === */
-.container {
-  max-width: 1536px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-6);
-}
-
-.header {
-  background-color: white;
-  border-bottom: 1px solid var(--gray-200);
-  padding: var(--spacing-4) 0;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.logo {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--primary-main);
-  text-decoration: none;
-}
-
-.sidebar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 250px;
-  height: 100vh;
-  background-color: white;
-  border-right: 1px solid var(--gray-200);
-  padding: var(--spacing-6);
-  overflow-y: auto;
-}
-
-.main-content {
-  margin-left: 250px;
-  padding: var(--spacing-8);
-  min-height: 100vh;
-}
-
-/* === Grid System === */
-.grid {
-  display: grid;
-  gap: var(--spacing-4);
-}
-
-.grid-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.grid-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.grid-4 {
-  grid-template-columns: repeat(4, 1fr);
-}
-
-/* === Utility Classes === */
-.hidden {
-  display: none !important;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
+/* ===== 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-between {
-  justify-content: space-between;
-}
-
+.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); }
-.gap-6 { gap: var(--spacing-6); }
 
-/* === Responsive === */
-@media (max-width: 1023px) {
-  .sidebar {
-    transform: translateX(-100%);
-    transition: transform 300ms ease-out;
-  }
+.hidden { display: none; }
+.block { display: block; }
 
-  .sidebar.active {
-    transform: translateX(0);
-  }
+/* ===== 회의록 서비스 특화 스타일 ===== */
 
-  .main-content {
-    margin-left: 0;
-  }
-
-  .grid-3 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .grid-4 {
-    grid-template-columns: repeat(2, 1fr);
-  }
+/* 상태 배지 - 회의록 전용 */
+.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);
 }
 
+.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);
+}
+
+.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 {
+  border-bottom: 2px dotted var(--color-primary-main);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.term-highlight:hover {
+  color: var(--color-primary-dark);
+}
+
+/* AI 제안 영역 */
+.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: var(--spacing-4) 0;
+  position: relative;
+}
+
+.ai-suggestion::before {
+  content: "✨ AI 제안";
+  position: absolute;
+  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) {
-  .container {
-    padding: 0 var(--spacing-4);
-  }
-
-  .grid-2,
-  .grid-3,
-  .grid-4 {
-    grid-template-columns: 1fr;
-  }
-
-  .modal {
-    width: 95%;
-    padding: var(--spacing-6);
-  }
+  .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 fab26d5..18d6b68 100644
--- a/design/uiux/prototype/common.js
+++ b/design/uiux/prototype/common.js
@@ -1,408 +1,556 @@
-/* ============================================
-   회의록 작성 및 공유 개선 서비스 - 공통 Javascript
-   ============================================ */
+/*
+ * 회의록 작성 및 공유 개선 서비스 - 공통 자바스크립트
+ * 버전: 1.0
+ * 작성일: 2025-10-20
+ * 레퍼런스: 스타일 가이드 v1.0
+ */
 
-// === LocalStorage 키 상수 ===
-const STORAGE_KEYS = {
-  CURRENT_USER: 'currentUser',
-  USERS: 'users',
-  MEETINGS: 'meetings',
-  TODOS: 'todos',
-  INITIALIZED: 'initialized'
+// ===== 전역 상태 관리 =====
+const AppState = {
+  currentUser: {
+    id: 'user-001',
+    name: '김민준',
+    email: 'minjun.kim@example.com',
+    avatar: 'https://ui-avatars.com/api/?name=김민준&background=00D9B1&color=fff'
+  },
+  meetings: [],
+  todos: []
 };
 
-// === 예제 데이터 초기화 ===
-function initializeData() {
-  if (localStorage.getItem(STORAGE_KEYS.INITIALIZED)) {
-    return;
+// ===== 유틸리티 함수 =====
+
+/**
+ * DOM 준비 완료 시 콜백 실행
+ */
+function ready(callback) {
+  if (document.readyState !== 'loading') {
+    callback();
+  } else {
+    document.addEventListener('DOMContentLoaded', callback);
   }
-
-  // 사용자 데이터
-  const users = [
-    { id: 'user1', name: '김민준', email: 'minjun@example.com', avatar: '👤' },
-    { id: 'user2', name: '박서연', email: 'seoyeon@example.com', avatar: '👩' },
-    { id: 'user3', name: '이준호', email: 'junho@example.com', avatar: '👨' },
-    { id: 'user4', name: '최유진', email: 'yujin@example.com', avatar: '👧' },
-    { id: 'user5', name: '정도현', email: 'dohyun@example.com', avatar: '🧑' }
-  ];
-
-  // 회의 데이터
-  const meetings = [
-    {
-      id: 'meeting1',
-      title: '2025년 1분기 전략 회의',
-      date: '2025-10-20',
-      time: '14:00',
-      endTime: '15:30',
-      location: '3층 회의실',
-      participants: ['user1', 'user2', 'user3'],
-      template: 'general',
-      status: 'scheduled', // scheduled, in_progress, completed
-      content: {
-        sections: {
-          participants: '김민준, 박서연, 이준호',
-          agenda: '1분기 목표 설정 및 전략 수립',
-          discussion: '',
-          decisions: '',
-          todos: ''
-        }
-      },
-      createdAt: new Date().toISOString()
-    },
-    {
-      id: 'meeting2',
-      title: '주간 스크럼 회의',
-      date: '2025-10-18',
-      time: '10:00',
-      endTime: '10:30',
-      location: '온라인',
-      participants: ['user1', 'user2', 'user3', 'user4'],
-      template: 'scrum',
-      status: 'completed',
-      content: {
-        sections: {
-          participants: '김민준, 박서연, 이준호, 최유진',
-          yesterday: '- API 개발 완료\n- 테스트 코드 작성',
-          today: '- 프론트엔드 개발 시작\n- 디자인 리뷰',
-          blockers: '없음'
-        }
-      },
-      createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString()
-    }
-  ];
-
-  // Todo 데이터
-  const todos = [
-    {
-      id: 'todo1',
-      meetingId: 'meeting1',
-      content: '1분기 마케팅 예산안 작성',
-      assignee: 'user2',
-      dueDate: '2025-10-25',
-      priority: 'high', // high, normal, low
-      status: 'pending', // pending, in_progress, completed
-      progress: 0
-    },
-    {
-      id: 'todo2',
-      meetingId: 'meeting1',
-      content: '경쟁사 분석 보고서 작성',
-      assignee: 'user3',
-      dueDate: '2025-10-22',
-      priority: 'high',
-      status: 'in_progress',
-      progress: 60
-    },
-    {
-      id: 'todo3',
-      meetingId: 'meeting2',
-      content: '테스트 커버리지 80% 달성',
-      assignee: 'user3',
-      dueDate: '2025-10-20',
-      priority: 'normal',
-      status: 'completed',
-      progress: 100
-    }
-  ];
-
-  // 현재 로그인 사용자
-  const currentUser = users[0];
-
-  // LocalStorage에 저장
-  localStorage.setItem(STORAGE_KEYS.USERS, JSON.stringify(users));
-  localStorage.setItem(STORAGE_KEYS.MEETINGS, JSON.stringify(meetings));
-  localStorage.setItem(STORAGE_KEYS.TODOS, JSON.stringify(todos));
-  localStorage.setItem(STORAGE_KEYS.CURRENT_USER, JSON.stringify(currentUser));
-  localStorage.setItem(STORAGE_KEYS.INITIALIZED, 'true');
 }
 
-// === LocalStorage 헬퍼 함수 ===
-function getFromStorage(key) {
-  const data = localStorage.getItem(key);
-  return data ? JSON.parse(data) : null;
+/**
+ * 날짜 포맷팅 (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}`;
 }
 
-function saveToStorage(key, data) {
-  localStorage.setItem(key, JSON.stringify(data));
+/**
+ * 상대 시간 표현 (방금 전, 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)}년 전`;
 }
 
-// === 날짜/시간 유틸리티 ===
-function formatDate(dateString) {
-  const date = new Date(dateString);
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  return `${year}-${month}-${day}`;
-}
+/**
+ * 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));
 
-function formatTime(timeString) {
-  return timeString; // HH:MM 형식 그대로 반환
-}
-
-function formatDateTime(dateString, timeString) {
-  return `${formatDate(dateString)} ${formatTime(timeString)}`;
-}
-
-function getDdayText(dueDateString) {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-
-  const dueDate = new Date(dueDateString);
-  dueDate.setHours(0, 0, 0, 0);
-
-  const diff = Math.ceil((dueDate - today) / (1000 * 60 * 60 * 24));
-
-  if (diff < 0) return `D${diff} (지남)`;
   if (diff === 0) return '오늘';
-  return `D-${diff}`;
+  if (diff > 0) return `D-${diff}`;
+  return `D+${Math.abs(diff)} (지남)`;
 }
 
-function formatDuration(minutes) {
-  const hours = Math.floor(minutes / 60);
-  const mins = minutes % 60;
-  if (hours > 0 && mins > 0) return `${hours}시간 ${mins}분`;
-  if (hours > 0) return `${hours}시간`;
-  return `${mins}분`;
+/**
+ * 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);
+  });
 }
 
-// === 사용자 관련 함수 ===
-function getCurrentUser() {
-  return getFromStorage(STORAGE_KEYS.CURRENT_USER);
-}
+// ===== 모달 관리 =====
+const Modal = {
+  /**
+   * 모달 열기
+   */
+  open(modalId) {
+    const modal = document.getElementById(modalId);
+    if (!modal) return;
 
-function getUserById(userId) {
-  const users = getFromStorage(STORAGE_KEYS.USERS) || [];
-  return users.find(u => u.id === userId);
-}
+    modal.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
 
-function getUserName(userId) {
-  const user = getUserById(userId);
-  return user ? user.name : '알 수 없음';
-}
-
-// === 회의 관련 함수 ===
-function getAllMeetings() {
-  return getFromStorage(STORAGE_KEYS.MEETINGS) || [];
-}
-
-function getMeetingById(meetingId) {
-  const meetings = getAllMeetings();
-  return meetings.find(m => m.id === meetingId);
-}
-
-function saveMeeting(meeting) {
-  const meetings = getAllMeetings();
-  const index = meetings.findIndex(m => m.id === meeting.id);
-  if (index >= 0) {
-    meetings[index] = meeting;
-  } else {
-    meetings.push(meeting);
-  }
-  saveToStorage(STORAGE_KEYS.MEETINGS, meetings);
-}
-
-function getScheduledMeetings() {
-  const meetings = getAllMeetings();
-  return meetings.filter(m => m.status === 'scheduled');
-}
-
-function getRecentMeetings(limit = 6) {
-  const meetings = getAllMeetings();
-  return meetings
-    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-    .slice(0, limit);
-}
-
-// === Todo 관련 함수 ===
-function getAllTodos() {
-  return getFromStorage(STORAGE_KEYS.TODOS) || [];
-}
-
-function getTodoById(todoId) {
-  const todos = getAllTodos();
-  return todos.find(t => t.id === todoId);
-}
-
-function saveTodo(todo) {
-  const todos = getAllTodos();
-  const index = todos.findIndex(t => t.id === todo.id);
-  if (index >= 0) {
-    todos[index] = todo;
-  } else {
-    todos.push(todo);
-  }
-  saveToStorage(STORAGE_KEYS.TODOS, todos);
-}
-
-function getPendingTodos(userId) {
-  const todos = getAllTodos();
-  return todos.filter(t => t.assignee === userId && t.status !== 'completed');
-}
-
-function getTodosByStatus(status) {
-  const todos = getAllTodos();
-  return todos.filter(t => t.status === status);
-}
-
-// === Toast 알림 ===
-function showToast(message, type = 'info') {
-  // Toast 컨테이너 생성 (없으면)
-  let container = document.querySelector('.toast-container');
-  if (!container) {
-    container = document.createElement('div');
-    container.className = 'toast-container';
-    document.body.appendChild(container);
-  }
-
-  // Toast 생성
-  const toast = document.createElement('div');
-  toast.className = `toast toast-${type}`;
-
-  const icons = {
-    success: '✓',
-    error: '✗',
-    warning: '⚠',
-    info: 'ℹ'
-  };
-
-  toast.innerHTML = `
-    <span style="font-size: 20px;">${icons[type]}</span>
-    <span>${message}</span>
-  `;
-
-  container.appendChild(toast);
-
-  // 4초 후 자동 제거
-  setTimeout(() => {
-    toast.style.animation = 'slideOut 150ms ease-in';
-    setTimeout(() => toast.remove(), 150);
-  }, 4000);
-}
-
-// slideOut 애니메이션 추가
-if (!document.querySelector('style[data-toast-style]')) {
-  const style = document.createElement('style');
-  style.setAttribute('data-toast-style', 'true');
-  style.textContent = `
-    @keyframes slideOut {
-      to {
-        transform: translateX(400px);
-        opacity: 0;
-      }
+    // backdrop 클릭 시 모달 닫기
+    const backdrop = modal.querySelector('.modal-backdrop');
+    if (backdrop) {
+      backdrop.addEventListener('click', (e) => {
+        if (e.target === backdrop) {
+          this.close(modalId);
+        }
+      });
     }
-  `;
-  document.head.appendChild(style);
-}
 
-// === 모달 제어 ===
-function openModal(modalId) {
-  const modal = document.getElementById(modalId);
-  if (modal) {
-    modal.classList.add('active');
+    // 닫기 버튼
+    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';
   }
-}
+};
 
-function closeModal(modalId) {
-  const modal = document.getElementById(modalId);
-  if (modal) {
-    modal.classList.remove('active');
+// ===== 토스트 알림 =====
+const Toast = {
+  container: null,
+
+  /**
+   * 토스트 컨테이너 초기화
+   */
+  init() {
+    if (!this.container) {
+      this.container = document.createElement('div');
+      this.container.className = 'toast-container';
+      document.body.appendChild(this.container);
+    }
+  },
+
+  /**
+   * 토스트 표시
+   */
+  show(message, type = 'info', duration = 4000) {
+    this.init();
+
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+
+    const icons = {
+      success: '✓',
+      error: '✕',
+      warning: '⚠',
+      info: 'ℹ'
+    };
+
+    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>
+    `;
+
+    this.container.appendChild(toast);
+
+    // 자동 제거
+    setTimeout(() => {
+      if (toast.parentElement) {
+        toast.remove();
+      }
+    }, duration);
+  },
+
+  success(message) { this.show(message, 'success'); },
+  error(message) { this.show(message, 'error'); },
+  warning(message) { this.show(message, 'warning'); },
+  info(message) { this.show(message, 'info'); }
+};
+
+// ===== 로컬 스토리지 관리 =====
+const Storage = {
+  /**
+   * 데이터 저장
+   */
+  set(key, value) {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+      return true;
+    } catch (e) {
+      console.error('Storage.set error:', e);
+      return false;
+    }
+  },
+
+  /**
+   * 데이터 가져오기
+   */
+  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);
+      return false;
+    }
+  },
+
+  /**
+   * 전체 삭제
+   */
+  clear() {
+    try {
+      localStorage.clear();
+      return true;
+    } catch (e) {
+      console.error('Storage.clear error:', e);
+      return false;
+    }
   }
-}
+};
 
-// 모달 백드롭 클릭 시 닫기
-document.addEventListener('click', (e) => {
-  if (e.target.classList.contains('modal-backdrop')) {
-    closeModal(e.target.id);
+// ===== API 호출 (Mock) =====
+const API = {
+  /**
+   * 지연 시뮬레이션
+   */
+  delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  },
+
+  /**
+   * GET 요청 (Mock)
+   */
+  async get(endpoint) {
+    await this.delay(500);
+    console.log(`API GET: ${endpoint}`);
+    return { success: true, data: {} };
+  },
+
+  /**
+   * POST 요청 (Mock)
+   */
+  async post(endpoint, data) {
+    await this.delay(500);
+    console.log(`API POST: ${endpoint}`, data);
+    return { success: true, data: {} };
+  },
+
+  /**
+   * PUT 요청 (Mock)
+   */
+  async put(endpoint, data) {
+    await this.delay(500);
+    console.log(`API PUT: ${endpoint}`, data);
+    return { success: true, data: {} };
+  },
+
+  /**
+   * DELETE 요청 (Mock)
+   */
+  async delete(endpoint) {
+    await this.delay(500);
+    console.log(`API DELETE: ${endpoint}`);
+    return { success: true };
   }
-});
+};
 
-// === 화면 전환 ===
+// ===== 페이지 네비게이션 =====
 function navigateTo(page) {
+  // 실제로는 SPA 라우팅이나 페이지 이동 처리
+  // 프로토타입에서는 링크 클릭으로 처리
+  console.log(`Navigate to: ${page}`);
   window.location.href = page;
 }
 
-function goBack() {
-  window.history.back();
-}
-
-// === 유틸리티 함수 ===
-function generateId(prefix = 'id') {
-  return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-}
-
-function debounce(func, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-// === 템플릿 데이터 ===
-const TEMPLATES = {
-  general: {
-    id: 'general',
-    name: '일반 회의',
-    description: '기본 회의 구조',
-    sections: [
-      { id: 'participants', name: '참석자', required: true },
-      { id: 'agenda', name: '회의 목적', required: false },
-      { id: 'discussion', name: '논의 내용', required: true },
-      { id: 'decisions', name: '결정 사항', required: true },
-      { id: 'todos', name: 'Todo', required: false }
-    ]
+// ===== 폼 유효성 검사 =====
+const Validator = {
+  /**
+   * 이메일 유효성 검사
+   */
+  isEmail(email) {
+    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return re.test(email);
   },
-  scrum: {
-    id: 'scrum',
-    name: '스크럼 회의',
-    description: '데일리 스탠드업',
-    sections: [
-      { id: 'participants', name: '참석자', required: true },
-      { id: 'yesterday', name: '어제 한 일', required: true },
-      { id: 'today', name: '오늘 할 일', required: true },
-      { id: 'blockers', name: '이슈/블로커', required: false }
-    ]
+
+  /**
+   * 필수 입력 검사
+   */
+  required(value) {
+    return value !== null && value !== undefined && value.trim() !== '';
   },
-  kickoff: {
-    id: 'kickoff',
-    name: '프로젝트 킥오프',
-    description: '프로젝트 시작 회의',
-    sections: [
-      { id: 'participants', name: '참석자', required: true },
-      { id: 'overview', name: '프로젝트 개요', required: true },
-      { id: 'goals', name: '목표', required: true },
-      { id: 'schedule', name: '일정', required: true },
-      { id: 'roles', name: '역할 분담', required: true },
-      { id: 'risks', name: '리스크', required: false }
-    ]
+
+  /**
+   * 최소 길이 검사
+   */
+  minLength(value, min) {
+    return value && value.length >= min;
   },
-  weekly: {
-    id: 'weekly',
-    name: '주간 회의',
-    description: '주간 진행 상황 리뷰',
-    sections: [
-      { id: 'participants', name: '참석자', required: true },
-      { id: 'achievements', name: '주간 실적', required: true },
-      { id: 'issues', name: '주요 이슈', required: false },
-      { id: 'nextWeek', name: '다음 주 계획', required: true },
-      { id: 'support', name: '지원 필요 사항', required: false }
-    ]
+
+  /**
+   * 최대 길이 검사
+   */
+  maxLength(value, max) {
+    return value && value.length <= max;
+  },
+
+  /**
+   * 폼 필드 에러 표시
+   */
+  showError(inputElement, message) {
+    inputElement.classList.add('error');
+
+    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;
+  },
+
+  /**
+   * 폼 필드 에러 제거
+   */
+  clearError(inputElement) {
+    inputElement.classList.remove('error');
+
+    const errorElement = inputElement.nextElementSibling;
+    if (errorElement && errorElement.classList.contains('form-error')) {
+      errorElement.remove();
+    }
   }
 };
 
-function getTemplate(templateId) {
-  return TEMPLATES[templateId];
-}
+// ===== 로딩 상태 관리 =====
+const Loading = {
+  /**
+   * 로딩 표시
+   */
+  show(target = 'body') {
+    const element = typeof target === 'string' ? document.querySelector(target) : target;
+    if (!element) return;
 
-function getAllTemplates() {
-  return Object.values(TEMPLATES);
-}
+    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.addEventListener('DOMContentLoaded', () => {
-  initializeData();
+    document.body.appendChild(spinner);
+  },
+
+  /**
+   * 로딩 숨김
+   */
+  hide() {
+    const spinner = document.getElementById('global-spinner');
+    if (spinner) {
+      spinner.remove();
+    }
+  }
+};
+
+// ===== 회의록 관련 유틸리티 =====
+const MeetingUtils = {
+  /**
+   * 회의 상태 레이블
+   */
+  getStatusLabel(status) {
+    const labels = {
+      'scheduled': '예정',
+      'in_progress': '진행 중',
+      'ended': '종료',
+      'draft': '작성 중',
+      'verifying': '검증 중',
+      'confirmed': '확정됨'
+    };
+    return labels[status] || status;
+  },
+
+  /**
+   * 회의 상태 클래스
+   */
+  getStatusClass(status) {
+    const classes = {
+      'draft': 'status-draft',
+      'verifying': 'status-verifying',
+      'confirmed': 'status-confirmed'
+    };
+    return classes[status] || 'badge-neutral';
+  },
+
+  /**
+   * Todo 우선순위 레이블
+   */
+  getPriorityLabel(priority) {
+    const labels = {
+      'high': '높음',
+      'medium': '보통',
+      'low': '낮음'
+    };
+    return labels[priority] || priority;
+  },
+
+  /**
+   * Todo 상태 레이블
+   */
+  getTodoStatusLabel(status) {
+    const labels = {
+      'todo': '시작 전',
+      'in_progress': '진행 중',
+      'done': '완료'
+    };
+    return labels[status] || status;
+  }
+};
+
+// ===== 예시 데이터 생성 =====
+const MockData = {
+  /**
+   * 샘플 회의 데이터
+   */
+  generateMeetings() {
+    return [
+      {
+        id: 'm-001',
+        title: '2025년 1분기 제품 기획 회의',
+        date: '2025-10-25 14:00',
+        location: '본사 2층 대회의실',
+        status: 'scheduled',
+        attendees: ['김민준', '박서연', '이준호', '최유진'],
+        description: '신규 회의록 서비스 기획 논의'
+      },
+      {
+        id: 'm-002',
+        title: '주간 스크럼 회의',
+        date: '2025-10-21 10:00',
+        location: 'Zoom',
+        status: 'confirmed',
+        attendees: ['김민준', '이준호', '최유진'],
+        description: '지난 주 진행 상황 공유 및 이번 주 계획'
+      },
+      {
+        id: 'm-003',
+        title: 'AI 기능 개선 회의',
+        date: '2025-10-23 15:00',
+        location: '본사 3층 소회의실',
+        status: 'in_progress',
+        attendees: ['박서연', '이준호'],
+        description: 'LLM 기반 회의록 자동 작성 개선 방안'
+      }
+    ];
+  },
+
+  /**
+   * 샘플 Todo 데이터
+   */
+  generateTodos() {
+    return [
+      {
+        id: 't-001',
+        title: 'API 명세서 작성',
+        assignee: '이준호',
+        dueDate: '2025-10-25',
+        priority: 'high',
+        status: 'in_progress',
+        progress: 60,
+        meetingId: 'm-002'
+      },
+      {
+        id: 't-002',
+        title: 'UI 프로토타입 디자인',
+        assignee: '최유진',
+        dueDate: '2025-10-23',
+        priority: 'medium',
+        status: 'done',
+        progress: 100,
+        meetingId: 'm-002'
+      },
+      {
+        id: 't-003',
+        title: '데이터베이스 스키마 설계',
+        assignee: '이준호',
+        dueDate: '2025-10-28',
+        priority: 'high',
+        status: 'todo',
+        progress: 0,
+        meetingId: 'm-001'
+      }
+    ];
+  }
+};
+
+// ===== 초기화 =====
+ready(() => {
+  console.log('Common.js loaded');
+
+  // 로컬 스토리지에서 상태 복원
+  const savedMeetings = Storage.get('meetings');
+  const savedTodos = Storage.get('todos');
+
+  if (!savedMeetings) {
+    AppState.meetings = MockData.generateMeetings();
+    Storage.set('meetings', AppState.meetings);
+  } else {
+    AppState.meetings = savedMeetings;
+  }
+
+  if (!savedTodos) {
+    AppState.todos = MockData.generateTodos();
+    Storage.set('todos', AppState.todos);
+  } else {
+    AppState.todos = savedTodos;
+  }
+
+  console.log('AppState initialized:', AppState);
 });
+
+// ===== Export (전역 네임스페이스) =====
+window.MeetingApp = {
+  AppState,
+  Modal,
+  Toast,
+  Storage,
+  API,
+  Validator,
+  Loading,
+  MeetingUtils,
+  MockData,
+  navigateTo,
+  formatDateTime,
+  timeAgo,
+  getDday,
+  generateUUID,
+  ready
+};
diff --git a/design/userstory.md b/design/userstory.md
index ba28dbc..8519bcd 100644
--- a/design/userstory.md
+++ b/design/userstory.md
@@ -1,25 +1,46 @@
-# 회의록 작성 및 공유 개선 서비스 - 유저스토리
+# 회의록 작성 및 공유 개선 서비스 - 유저스토리 (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** - 전문용어 감지 및 설명 제공, 문서 검색
+3. **STT** - 음성 녹음 관리, 음성-텍스트 변환, 화자 식별 (기본 기능)
+4. **AI** - LLM 기반 회의록 자동 작성, Todo 자동 추출, 프롬프팅 기반 회의록 개선
+5. **RAG** - 맥락 기반 용어 설명, 관련 문서 검색 및 연결, 업무 이력 통합
 6. **Collaboration** - 실시간 동기화, 버전 관리, 충돌 해결
-7. **Todo** - Todo 할당 및 관리, 진행 상황 추적
+7. **Todo** - Todo 할당 및 관리, 진행 상황 추적, 회의록 실시간 연동
 8. **Notification** - 알림 발송 및 리마인더 관리
 9. **Calendar** - 일정 생성 및 외부 캘린더 연동
+10. **Analytics** - 회의 효율성 분석, 패턴 분석, 개선 제안 (신규)
 
 ---
 
 ## 유저스토리
+
 ```
 1. User 서비스
 1) 사용자 인증 및 관리
@@ -170,7 +191,7 @@ UFR-MEET-060: [회의록공유] 회의록 작성자로서 | 나는, 회의 내
 
 ---
 
-3. STT 서비스
+3. STT 서비스 (기본 기능)
 1) 음성 인식 및 변환
 UFR-STT-010: [음성녹음인식] 회의 참석자로서 | 나는, 발언 내용이 자동으로 기록되기 위해 | 음성이 실시간으로 녹음되고 인식되기를 원한다.
 - 시나리오: 음성 녹음 및 발언 인식
@@ -198,6 +219,10 @@ UFR-STT-010: [음성녹음인식] 회의 참석자로서 | 나는, 발언 내용
   - 발언 인식 지연 시간: 1초 이내
   - 화자 식별 정확도: 90% 이상
 
+  [비고]
+  - STT는 기본 기능으로 경쟁사 대부분이 제공하는 기능임
+  - 차별화 포인트가 아닌 필수 기능
+
 - M/21
 
 ---
@@ -223,11 +248,14 @@ UFR-STT-020: [텍스트변환] 회의록 시스템으로서 | 나는, 인식된
   - 정확도 60% 미만 시 경고 표시
   - 수동 수정 인터페이스 제공
 
+  [비고]
+  - STT는 기본 기능으로 차별화 포인트가 아님
+
 - M/13
 
 ---
 
-4. AI 서비스
+4. AI 서비스 (차별화 포인트)
 1) AI 회의록 작성
 UFR-AI-010: [회의록자동작성] 회의록 작성자로서 | 나는, 회의록 작성 부담을 줄이기 위해 | AI가 발언 내용을 자동으로 정리하여 회의록을 작성하기를 원한다.
 - 시나리오: AI 회의록 자동 작성
@@ -301,11 +329,89 @@ UFR-AI-020: [Todo자동추출] 회의록 작성자로서 | 나는, 회의 후 
 
 ---
 
-5. RAG 서비스
-1) 전문용어 지원
-UFR-RAG-010: [전문용어감지] 회의록 작성자로서 | 나는, 업무 지식이 없어도 회의록을 정확히 작성하기 위해 | 전문용어가 자동으로 감지되고 설명을 제공받고 싶다.
-- 시나리오: 전문용어 자동 감지
-  회의록이 작성되는 상황에서 | 시스템이 회의록 텍스트를 분석하면 | 전문용어가 자동으로 감지되고 하이라이트 표시된다.
+3) 프롬프팅 기반 회의록 개선 (신규, 차별화 포인트)
+UFR-AI-030: [회의록개선] 회의록 작성자로서 | 나는, 회의록을 다양한 형식으로 변환하기 위해 | 프롬프팅을 통해 회의록을 개선하고 재구성하고 싶다.
+- 시나리오: 프롬프팅 기반 회의록 개선
+  회의록이 작성된 상황에서 | "1Page 요약", "핵심 요약", "상세 보고서" 등의 프롬프트를 입력하면 | AI가 해당 형식에 맞춰 회의록을 재구성하여 제공한다.
+
+  [지원 프롬프트 유형]
+  - "1Page 요약": A4 1장 분량의 요약본 생성
+  - "핵심 요약": 3-5개 핵심 포인트만 추출
+  - "상세 보고서": 시간순 상세 기록 with 타임스탬프
+  - "의사결정 중심": 결정 사항과 근거만 정리
+  - "액션 아이템 중심": Todo와 담당자만 강조
+  - "경영진 보고용": 임원진에게 보고할 형식으로 재구성
+  - "커스텀 프롬프트": 사용자 정의 형식
+
+  [AI 처리 과정]
+  - 원본 회의록 분석
+  - 프롬프트 의도 파악
+  - 내용 재구성
+    - 중요도 기반 필터링
+    - 형식에 맞춘 재배치
+    - 불필요한 내용 제거
+  - 스타일 조정
+    - 문체 변환 (격식체, 구어체 등)
+    - 길이 조정 (압축 또는 확장)
+
+  [처리 결과]
+  - 개선된 회의록이 생성됨 (새 버전)
+  - 원본 회의록 링크 유지
+  - 생성 시간 및 프롬프트 기록
+  - 다운로드 가능 (PDF, DOCX, MD)
+
+  [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: [전문용어감지] 회의록 작성자로서 | 나는, 업무 지식이 없어도 회의록을 정확히 작성하기 위해 | 전문용어가 자동으로 감지되고 맥락에 맞는 설명을 제공받고 싶다.
+- 시나리오: 맥락 기반 전문용어 자동 감지
+  회의록이 작성되는 상황에서 | 시스템이 회의록 텍스트를 분석하면 | 전문용어가 자동으로 감지되고 맥락에 맞는 설명이 준비된다.
 
   [전문용어 감지 처리]
   - 회의록 텍스트 실시간 분석
@@ -322,54 +428,115 @@ UFR-RAG-010: [전문용어감지] 회의록 작성자로서 | 나는, 업무 지
     - 감지 위치 (줄 번호, 문단)
     - 신뢰도 점수
   - 용어 하이라이트 표시
-  - RAG 검색 자동 실행 (UFR-RAG-020 연동)
+  - 맥락 기반 설명 자동 생성 (UFR-RAG-020 연동)
 
   [Policy/Rule]
   - 신뢰도 70% 이상만 자동 감지
   - 중복 용어는 첫 번째만 하이라이트
 
+  [비고]
+  - 단순 용어 설명이 아닌 맥락 기반 실용적 정보 제공이 차별화 포인트
+
 - S/13
 
 ---
 
-UFR-RAG-020: [용어설명제공] 회의록 작성자로서 | 나는, 전문용어를 이해하기 위해 | 용어에 대한 설명을 자동으로 제공받고 싶다.
-- 시나리오: 용어 설명 자동 제공
-  전문용어가 감지된 상황에서 | RAG 시스템이 용어 설명을 검색하면 | 과거 회의록 및 사내 문서에서 관련 설명이 생성되어 제공된다.
+UFR-RAG-020: [맥락기반용어설명] 회의록 작성자로서 | 나는, 전문용어를 맥락에 맞게 이해하기 위해 | 관련 회의록과 업무 이력을 바탕으로 실용적인 설명을 제공받고 싶다.
+- 시나리오: 맥락 기반 용어 설명 자동 제공
+  전문용어가 감지된 상황에서 | RAG 시스템이 관련 문서를 검색하면 | 과거 회의록 및 업무 이력에서 맥락에 맞는 실용적인 설명이 생성되어 제공된다.
 
   [RAG 검색 수행]
   - 벡터 유사도 검색
-    - 과거 회의록 검색
+    - 과거 회의록 검색 (동일 용어 사용 사례)
     - 사내 문서 저장소 검색 (위키, 매뉴얼, 보고서)
+    - 업무 이력 검색 (프로젝트 문서, 이메일 등)
   - 관련 문서 추출 (관련도 점수순)
   - 최대 5개 문서 선택
 
-  [LLM 설명 생성]
+  [맥락 기반 설명 생성]
   - 검색된 문서 내용 분석
   - 용어 정의 추출
-  - 회의 맥락에 맞는 설명 생성
+  - 실제 사용 사례 추출
+  - 현재 회의 맥락에 맞는 설명 생성
     - 간단한 정의 (1-2문장)
-    - 상세 설명
-    - 사용 예시
-    - 참조 출처
+    - 이 회의에서의 의미 (맥락 기반)
+    - 관련 프로젝트/이슈 연결
+    - 과거 논의 요약 (언제, 누가, 어떻게 사용했는지)
+    - 참조 출처 링크
 
   [처리 결과]
-  - 용어 설명이 생성됨 (설명 ID)
+  - 맥락 기반 용어 설명이 생성됨 (설명 ID)
   - 설명 내용
     - 간단한 정의
-    - 상세 설명
-    - 참조 문서 링크
+    - 맥락 기반 상세 설명
+    - 실제 사용 사례
+    - 관련 프로젝트/이슈
+    - 과거 회의록 링크 (최대 3개)
+    - 사내 문서 링크
   - 툴팁 또는 사이드 패널로 표시
   - 설명 제공 시간 기록
 
   [설명을 찾지 못한 경우]
-  - "설명을 찾을 수 없습니다" 메시지 표시
+  - "관련 정보를 찾을 수 없습니다" 메시지 표시
   - 전문가(회의 참석자)에게 설명 요청 버튼 제공
   - 수동 입력된 설명은 용어 사전에 자동 저장
 
+  [비고]
+  - **차별화 포인트**: 단순 용어 설명이 아닌, 조직 내 실제 사용 맥락과 이력을 제공
+  - 업무 지식이 없어도 실질적인 도움을 받을 수 있음
+
 - S/21
 
 ---
 
+2) 관련 문서 자동 연결 (신규, 차별화 포인트)
+UFR-RAG-030: [관련문서연결] 회의록 작성자로서 | 나는, 회의 내용을 더 잘 이해하기 위해 | 관련된 사내 문서와 업무 이력이 자동으로 연결되기를 원한다.
+- 시나리오: 관련 문서 자동 연결
+  회의록이 작성되는 상황에서 | RAG 시스템이 주제와 키워드를 분석하면 | 관련된 사내 문서와 업무 이력이 자동으로 검색되어 연결된다.
+
+  [문서 검색 범위]
+  - 과거 회의록
+  - 프로젝트 문서
+  - 위키 페이지
+  - 이메일 스레드
+  - 보고서 및 기획서
+  - 이슈 트래커 (Jira, Asana 등)
+
+  [RAG 검색 수행]
+  - 회의 주제 및 키워드 추출
+  - 벡터 유사도 검색
+  - 관련도 점수 계산 (0-100%)
+  - 문서 타입별 상위 3개 선정
+
+  [연결 기준]
+  - 주제 유사도 70% 이상
+  - 키워드 3개 이상 일치
+  - 최근 3개월 이내 문서 우선
+  - 동일 프로젝트/팀 문서 가중치
+
+  [처리 결과]
+  - 관련 문서 목록 생성
+  - 각 문서별 정보
+    - 제목
+    - 문서 타입
+    - 작성자
+    - 작성일
+    - 관련도 점수
+    - 핵심 내용 요약 (2-3줄)
+  - 회의록 하단에 "관련 문서" 섹션 자동 추가
+  - 클릭 시 해당 문서로 이동 또는 미리보기
+
+  [Policy/Rule]
+  - 관련도 70% 이상만 자동 연결
+  - 문서 타입별 최대 3개까지 표시
+
+  [비고]
+  - **차별화 포인트**: 회의록만 보는 것이 아니라 관련 업무 이력 전체를 통합 제공
+
+- S/13
+
+---
+
 6. Collaboration 서비스
 1) 실시간 협업
 UFR-COLLAB-010: [회의록수정동기화] 회의 참석자로서 | 나는, 회의록을 함께 검증하기 위해 | 회의록을 수정하고 실시간으로 다른 참석자와 동기화하고 싶다.
@@ -478,11 +645,11 @@ UFR-COLLAB-030: [검증완료] 회의 참석자로서 | 나는, 회의록의 정
 
 ---
 
-7. Todo 서비스
-1) Todo 관리
-UFR-TODO-010: [Todo할당] Todo 시스템으로서 | 나는, AI가 추출한 Todo를 담당자에게 전달하기 위해 | Todo를 할당하고 알림을 발송하고 싶다.
-- 시나리오: Todo 자동 할당
-  AI가 Todo를 추출한 상황에서 | 시스템이 Todo를 등록하고 담당자를 지정하면 | Todo가 할당되고 담당자에게 즉시 알림이 발송되며 캘린더에 마감일이 등록된다.
+7. Todo 서비스 (차별화 포인트)
+1) 실시간 Todo 연결 (강화)
+UFR-TODO-010: [Todo할당] Todo 시스템으로서 | 나는, AI가 추출한 Todo를 담당자에게 전달하기 위해 | Todo를 실시간으로 할당하고 회의록과 연결하고 싶다.
+- 시나리오: Todo 실시간 할당 및 회의록 연결
+  AI가 Todo를 추출한 상황에서 | 시스템이 Todo를 등록하고 담당자를 지정하면 | Todo가 실시간으로 할당되고 회의록의 해당 위치와 연결되며 담당자에게 즉시 알림이 발송된다.
 
   [Todo 등록]
   - Todo 정보 저장
@@ -491,7 +658,13 @@ UFR-TODO-010: [Todo할당] Todo 시스템으로서 | 나는, AI가 추출한 Tod
     - 담당자 (AI 자동 식별 또는 수동 지정)
     - 마감일 (언급된 경우 자동 설정, 없으면 수동 설정)
     - 우선순위 (높음/보통/낮음)
-    - 관련 회의록 링크
+    - 관련 회의록 링크 (섹션 위치 포함)
+    - 원문 발언 링크 (타임스탬프 포함)
+
+  [회의록 실시간 연결]
+  - 회의록 해당 섹션에 Todo 뱃지 표시
+  - Todo 클릭 시 Todo 상세 정보 표시
+  - 양방향 연결 (Todo → 회의록, 회의록 → Todo)
 
   [알림 발송]
   - 담당자에게 즉시 알림
@@ -500,7 +673,8 @@ UFR-TODO-010: [Todo할당] Todo 시스템으로서 | 나는, AI가 추출한 Tod
   - 알림 내용
     - Todo 내용
     - 마감일
-    - 회의록 링크
+    - 회의록 링크 (해당 섹션으로 바로 이동)
+    - 원문 발언 링크
 
   [캘린더 연동]
   - 마감일이 있는 경우 캘린더에 자동 등록
@@ -511,19 +685,24 @@ UFR-TODO-010: [Todo할당] Todo 시스템으로서 | 나는, AI가 추출한 Tod
   - 담당자 정보
   - 마감일
   - 할당 시간
+  - 회의록 연결 정보 (섹션 ID, 타임스탬프)
   - 담당자에게 알림이 발송됨
   - 캘린더 등록 완료
 
   [Policy/Rule]
   - Todo 할당 시 담당자에게 즉시 알림 발송
+  - 회의록과 실시간 양방향 연결
+
+  [비고]
+  - **차별화 포인트**: Todo와 회의록의 강력한 연결, 원문 맥락 추적 가능
 
 - M/13
 
 ---
 
-UFR-TODO-020: [Todo진행상황업데이트] Todo 담당자로서 | 나는, Todo 진행 상황을 공유하기 위해 | 진행률을 업데이트하고 상태를 변경하고 싶다.
-- 시나리오: Todo 진행 상황 업데이트
-  할당된 Todo가 있는 상황에서 | 담당자가 진행률과 상태를 입력하면 | 진행 상황이 저장되고 회의 주최자에게 알림이 발송된다.
+UFR-TODO-020: [Todo진행상황업데이트] Todo 담당자로서 | 나는, Todo 진행 상황을 공유하고 회의록에 반영하기 위해 | 진행률을 업데이트하고 상태를 변경하고 싶다.
+- 시나리오: Todo 진행 상황 업데이트 및 회의록 자동 반영
+  할당된 Todo가 있는 상황에서 | 담당자가 진행률과 상태를 입력하면 | 진행 상황이 저장되고 연결된 회의록에 실시간으로 반영되며 회의 주최자에게 알림이 발송된다.
 
   [진행 상황 입력]
   - 진행률: 0-100% (슬라이더 또는 직접 입력)
@@ -535,6 +714,13 @@ UFR-TODO-020: [Todo진행상황업데이트] Todo 담당자로서 | 나는, Todo
   - 진행률 히스토리 저장
   - 상태 변경 이력 저장
 
+  [회의록 실시간 반영]
+  - 연결된 회의록의 Todo 섹션 자동 업데이트
+  - 진행률 표시 (프로그레스 바)
+  - 상태 배지 업데이트 (시작 전/진행 중/완료)
+  - 마지막 업데이트 시간 표시
+  - 담당자 메모 표시 (있는 경우)
+
   [알림 발송]
   - 회의 주최자에게 진행 상황 알림
   - 진행률이 50%, 100%에 도달하면 자동 알림
@@ -544,15 +730,23 @@ UFR-TODO-020: [Todo진행상황업데이트] Todo 담당자로서 | 나는, Todo
   - 업데이트 시간
   - 진행률 (%)
   - 상태 (시작 전/진행 중/완료)
-  - 회의록에 진행 상황 반영
+  - 회의록에 진행 상황이 실시간 반영됨
+  - 반영 시간 기록
+
+  [Policy/Rule]
+  - Todo 진행 상황 업데이트 시 회의록에 즉시 반영
+  - 진행률 50%, 100% 도달 시 자동 알림
+
+  [비고]
+  - **차별화 포인트**: Todo 진행 상황이 회의록에 실시간 반영되어 추적 용이
 
 - M/5
 
 ---
 
-UFR-TODO-030: [Todo완료처리] Todo 담당자로서 | 나는, 완료된 Todo를 처리하기 위해 | Todo를 완료하고 회의록에 자동 반영하고 싶다.
-- 시나리오: Todo 완료 처리
-  Todo 작업이 완료된 상황에서 | 담당자가 완료 버튼을 클릭하면 | Todo가 완료 상태로 변경되고 회의록에 자동 반영되며 회의 주최자에게 알림이 발송된다.
+UFR-TODO-030: [Todo완료처리] Todo 담당자로서 | 나는, 완료된 Todo를 처리하고 회의록에 반영하기 위해 | Todo를 완료하고 회의록에 자동 반영하고 싶다.
+- 시나리오: Todo 완료 처리 및 회의록 자동 반영
+  Todo 작업이 완료된 상황에서 | 담당자가 완료 버튼을 클릭하면 | Todo가 완료 상태로 변경되고 연결된 회의록에 완료 상태가 실시간으로 반영되며 회의 주최자에게 알림이 발송된다.
 
   [완료 처리]
   - 완료 시간 자동 기록
@@ -560,10 +754,11 @@ UFR-TODO-030: [Todo완료처리] Todo 담당자로서 | 나는, 완료된 Todo
   - 완료 상태로 변경
   - 완료 여부 확인 다이얼로그 표시
 
-  [회의록 반영]
-  - 관련 회의록의 Todo 섹션 업데이트
+  [회의록 실시간 반영]
+  - 관련 회의록의 Todo 섹션 자동 업데이트
   - 완료 표시 (체크 아이콘)
   - 완료 시간 기록
+  - 완료자 정보 표시
 
   [알림 발송]
   - 회의 주최자에게 완료 알림
@@ -578,13 +773,57 @@ UFR-TODO-030: [Todo완료처리] Todo 담당자로서 | 나는, 완료된 Todo
   - 회의록 버전 업데이트
 
   [Policy/Rule]
-  - Todo 완료 시 회의록에 완료 상태 자동 반영
+  - Todo 완료 시 회의록에 완료 상태 즉시 반영
   - 모든 Todo 완료 시 회의 주최자에게 완료 알림
 
+  [비고]
+  - **차별화 포인트**: Todo 완료가 회의록에 실시간 반영되어 회의 결과 추적 용이
+
 - M/8
 
 ---
 
+2) 회의 중 실시간 Todo 생성 (신규, 차별화 포인트)
+UFR-TODO-040: [실시간Todo생성] 회의 참석자로서 | 나는, 회의 중 논의된 액션 아이템을 즉시 기록하기 위해 | 회의 진행 중 실시간으로 Todo를 생성하고 회의록과 연결하고 싶다.
+- 시나리오: 회의 중 실시간 Todo 생성
+  회의가 진행 중인 상황에서 | 참석자가 "Todo 추가" 버튼을 클릭하고 내용을 입력하면 | Todo가 즉시 생성되고 현재 회의록 위치와 연결되며 타임스탬프가 기록된다.
+
+  [실시간 Todo 생성]
+  - Todo 내용 입력 (필수)
+  - 담당자 선택 (필수)
+  - 마감일 설정 (선택)
+  - 우선순위 설정 (선택)
+  - 현재 회의 시간 자동 기록 (타임스탬프)
+
+  [회의록 자동 연결]
+  - 현재 작성 중인 회의록 섹션과 자동 연결
+  - Todo 생성 시점의 타임스탬프 저장
+  - 회의록에 Todo 뱃지 자동 추가
+  - 음성 녹음 링크 연결 (해당 시간대)
+
+  [실시간 동기화]
+  - 모든 참석자 화면에 즉시 표시
+  - Todo 추가 알림 (인앱)
+  - 담당자에게 즉시 알림 발송
+
+  [처리 결과]
+  - Todo가 생성됨 (Todo ID)
+  - Todo 내용, 담당자, 마감일
+  - 회의록 연결 정보 (섹션 ID, 타임스탬프)
+  - 생성 시간 및 생성자
+  - 모든 참석자에게 동기화됨
+
+  [Policy/Rule]
+  - 회의 중 생성된 Todo는 회의록과 자동 연결
+  - 담당자에게 즉시 알림 발송
+
+  [비고]
+  - **차별화 포인트**: 회의 중 실시간 Todo 생성으로 액션 아이템 누락 방지
+
+- S/8
+
+---
+
 8. Notification 서비스
 1) 알림 관리
 UFR-NOTI-010: [알림리마인더] 회의 참석자로서 | 나는, 중요한 일정을 놓치지 않기 위해 | 회의 및 Todo 관련 알림과 리마인더를 받고 싶다.
@@ -671,4 +910,98 @@ UFR-CAL-010: [일정연동] 회의록 작성자로서 | 나는, 일정을 통합
 - S/13
 
 ---
+
+10. Analytics 서비스 (신규, 차별화 포인트)
+1) 회의 효율성 분석
+UFR-ANAL-010: [회의효율성분석] 회의 주최자로서 | 나는, 회의를 개선하기 위해 | 회의 효율성을 분석하고 개선 제안을 받고 싶다.
+- 시나리오: 회의 효율성 분석 및 개선 제안
+  회의가 종료된 상황에서 | Analytics 시스템이 회의 데이터를 분석하면 | 회의 효율성 점수와 구체적인 개선 제안이 제공된다.
+
+  [분석 지표]
+  - 회의 시간 준수율 (예정 시간 대비 실제 시간)
+  - 참석자 참여도 (발언 분포, 침묵 시간)
+  - 안건 소화율 (계획된 안건 대비 논의된 안건)
+  - 의사결정 효율성 (결정 사항 수 / 회의 시간)
+  - Todo 생성률 (액션 아이템 명확성)
+
+  [AI 분석 과정]
+  - 회의 통계 데이터 수집
+  - 과거 유사 회의와 비교
+  - 업계 벤치마크 대조
+  - 비효율 패턴 감지
+    - 너무 긴 회의 (2시간 이상)
+    - 참여도 불균형 (1명이 50% 이상 발언)
+    - 안건 없이 진행
+    - 결정 사항 없음
+    - Todo 미생성
+
+  [개선 제안 생성]
+  - 구체적인 개선 사항 제시
+    - "회의 시간을 30분 단축 권장"
+    - "참석자 A의 발언 시간이 과도합니다. 타임박스 적용 권장"
+    - "안건을 사전에 공유하여 준비도를 높이세요"
+    - "결정 사항이 없습니다. 회의 목적을 재검토하세요"
+
+  [처리 결과]
+  - 회의 효율성 점수 (0-100점)
+  - 각 지표별 점수 및 벤치마크 비교
+  - 개선 제안 리스트 (우선순위순)
+  - 다음 회의 시 적용할 액션 아이템
+
+  [Policy/Rule]
+  - 모든 회의 종료 시 자동 분석
+  - 효율성 점수 70점 미만 시 개선 알림
+
+  [비고]
+  - **차별화 포인트**: 회의 효율성을 정량적으로 측정하고 실질적 개선 제안 제공
+
+- M/21
+
+---
+
+2) 회의 패턴 분석 및 안건 추천 (신규, 차별화 포인트)
+UFR-ANAL-020: [회의패턴분석] 회의 주최자로서 | 나는, 더 나은 회의를 준비하기 위해 | 과거 회의 패턴을 분석하고 안건을 추천받고 싶다.
+- 시나리오: 회의 패턴 분석 및 안건 추천
+  새로운 회의를 예약하는 상황에서 | Analytics 시스템이 과거 유사 회의를 분석하면 | 회의 패턴 인사이트와 안건 추천이 제공된다.
+
+  [패턴 분석]
+  - 회의 유형 분류 (주간 회의, 프로젝트 회의, 의사결정 회의 등)
+  - 주기성 분석 (주간, 격주, 월간)
+  - 참석자 패턴 (핵심 멤버, 선택 멤버)
+  - 주요 논의 주제 추출
+  - 평균 회의 시간 및 최적 시간대
+
+  [안건 추천]
+  - 과거 회의록 분석
+    - 미해결 이슈 추출
+    - 후속 논의 필요 사항 식별
+    - 주기적 확인 사항 (KPI, 진행 상황)
+  - 관련 프로젝트/업무 이력 검토
+  - 추천 안건 생성
+    - 안건 제목
+    - 논의 배경 (과거 회의록 링크)
+    - 예상 소요 시간
+
+  [최적 회의 구성 제안]
+  - 추천 참석자 (과거 패턴 기반)
+  - 추천 회의 시간 (참석자 캘린더 분석)
+  - 추천 회의 길이 (안건 수 기반)
+
+  [처리 결과]
+  - 회의 패턴 인사이트
+  - 추천 안건 리스트 (최대 5개)
+  - 최적 회의 구성 제안
+  - 과거 유사 회의 링크
+
+  [Policy/Rule]
+  - 회의 예약 시 자동으로 패턴 분석 및 추천 제공
+  - 사용자가 수락/거부 가능
+
+  [비고]
+  - **차별화 포인트**: 과거 회의 데이터를 활용한 지능형 회의 준비 지원
+
+- M/13
+
+---
+
 ```
