From e0cd62b2836e31b9484ba6e5085c79be93ea5ff6 Mon Sep 17 00:00:00 2001
From: "team@flow" <94040508+bssanyang@users.noreply.github.com>
Date: Wed, 18 Dec 2024 18:36:19 +0900
Subject: [PATCH] Add files via upload

---
 img/PAT01.html |   47 ++
 img/PAT02.html |  287 ++++++++++
 img/main.css   | 1354 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 1688 insertions(+)
 create mode 100644 img/PAT01.html
 create mode 100644 img/PAT02.html
 create mode 100644 img/main.css
diff --git a/img/PAT01.html b/img/PAT01.html
new file mode 100644
index 0000000..c8ec203
--- /dev/null
+++ b/img/PAT01.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="img/Logo.png" type="image/png">
+    <link rel="stylesheet" href="main.css">
+    <title>회원 가입 완료</title>
+</head>
+<body>
+
+        <nav class="top-nav">
+            <div class="nav-container">
+                <div class="logo-area">
+                    <img src="img/logo.png" alt="Logo" class="logo">
+                    <img src="img/letters.svg" alt="Letters" class="letters">
+                </div>
+                <div class="login-area">
+                    <span class="login-text" id="loginText">로그인</span>
+                    <span class="user-name" id="userName" style="display: none;">사용자 이름</span>
+                </div>
+            </div>
+        </nav>
+        <main class="main-content">
+            <div class="box1200">
+                <h1 class="title" style="margin-bottom: 32px;">EATS에 오신 것을 환영합니다</h1>
+                
+               
+
+                <!-- 추가된 텍스트와 이미지 -->
+                <div class="thank-you-message" style="text-align: center; margin-top: 32px;">
+                    <p style="color: var(--Gray-700, #344054); font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px;">
+                        아직 등록된 환자가 없습니다. 검사할 환자를 등록해주세요.
+                    </p>
+                    <img src="img/pat01.svg" alt="Join EATS" style="margin-top: 32px; display: block; margin-left: auto; margin-right: auto;">
+                </div>
+<div class="box2">
+                <div class="button-container" style="margin-top: 32px;">
+                    <button class="button-normal">로그인하러 가기</button>
+                </div></div>
+            </div>
+            
+        </main>
+    </div>
+
+</body>
+</html> 
\ No newline at end of file
diff --git a/img/PAT02.html b/img/PAT02.html
new file mode 100644
index 0000000..e9915c1
--- /dev/null
+++ b/img/PAT02.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="img/Logo.png" type="image/png">
+    <link rel="stylesheet" href="main.css">
+    <title>환자 목록</title>
+</head>
+<body>
+
+        <nav class="top-nav">
+            <div class="nav-container">
+                <div class="logo-area">
+                    <img src="img/logo.png" alt="Logo" class="logo">
+                    <img src="img/letters.svg" alt="Letters" class="letters">
+                </div>
+                <div class="login-area">
+                    <span class="login-text" id="loginText">로그인</span>
+                    <span class="user-name" id="userName" style="display: none;">사용자 이름</span>
+                </div>
+            </div>
+        </nav>
+        <main class="table-content">
+            <div class="search-top">
+                <div class="input-container"><input type="text" class="search-patient" placeholder="환자 검색">
+                <img src="img/search.svg" alt="search" class="search-icon">
+               </div></div>
+               <div class="tablehead-container">
+                <div class="table-head"><span class="title-head">환자 목록</span> <button class="button-table" onclick="openRegisterModal()">환자 등록</button></div>
+                <div class="table-container"><div class="table">
+                    <table>
+                        <colgroup>
+                            <col>
+                            <col>
+                            <col>
+                            <col>
+                            <col>
+                            <col>
+                            <col>
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th class="th">검사 시행일</th>
+                                <th class="th">환자 번호</th>
+                                <th class="th">환자 이름</th>
+                                <th class="th">성별</th>
+                                <th class="th">나이</th>
+                                <th class="th">상태</th>
+                                <th class="th"></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr onclick="showDetails('123456')" class="status-critical">
+                                <td class="td">검사 전</td>
+                                <td class="td">842292</td>
+                                <td class="td">이*화</td>
+                                <td class="td">여</td>
+                                <td class="td">2Y(24M)</td>
+                                <td>
+                                <div class="dropdown-container">
+                                    <span class="status-label">검사 준비</span>
+                                    <button onclick="toggleDropdown(event)" class="dropdown-button"><img src="img/chevron-down.svg"></button>
+                                    <ul class="dropdown-menu">
+                                        <li class="selected" onclick="changeStatus(this, '검사 준비')">검사 준비</li>
+                                        <li onclick="changeStatus(this, '등록됨')">등록됨</li>
+                                    </ul>
+                                </div>
+                                </td>
+                                <td class="td"><button class="delete-button" onclick="openModal('홍길동', event)"><img src="img/trash.svg" class="button-delete"></button></td>
+                            </tr>
+                            </tr>
+                            <tr>
+                                <td class="td">검사 전</td>
+                                <td class="td">621441</td>
+                                <td class="td">임*정</td>
+                                <td class="td">여</td>
+                                <td class="td">3Y(40M)</td>
+                                <td class="td">등록됨</td>
+                                <td class="td"><button class="delete-button" onclick="openModal('임*정', event)"><img src="img/trash.svg" class="button-delete"></button></td>
+                            </tr>
+                            </tr>
+                            <tr>
+                                <td class="td">2024.11.22.</td>
+                                <td class="td">33689111</td>
+                                <td class="td">심*민</td>
+                                <td class="td">남</td>
+                                <td class="td">5Y</td>
+                                <td class="td">등록됨</td>
+                                <td class="td"><button class="delete-button" onclick="openModal('심*민', event)"><img src="img/trash.svg" class="button-delete"></button></td>
+                            </tr>
+                            </tr>
+                            <tr>
+                                <td class="td">2024.1.19</td>
+                                <td class="td">872078</td>
+                                <td class="td">현*빈</td>
+                                <td class="td">남</td>
+                                <td class="td">6Y</td>
+                                <td class="td">검사 완료</td>
+                                <td class="td"><button class="delete-button" onclick="openModal('현*빈', event)"><img src="img/trash.svg" class="button-delete"></button></td>
+                            </tr>
+                            </tr>
+                            <tr>
+                                <td class="td">2024.1.11</td>
+                                <td class="td">373487373487</td>
+                                <td class="td">이*민</td>
+                                <td class="td">여</td>
+                                <td class="td">10Y</td>
+                                <td class="td">검사 완료</td>
+                                <td class="td"><button class="delete-button" onclick="openModal('이*민', event)"><img src="img/trash.svg" class="button-delete"></button></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div class="pagination">
+                        <!-- 이전 버튼 -->
+                        <button class="page-btn prev-btn">
+                             <img src="img/arrow-left.svg" alt="이전" class="arrow-icon">이전
+                        </button>
+                        <button class="page-btn" onclick="goToPage(1)">1</button>
+                        <button class="page-btn" onclick="goToPage(2)">2</button>
+                        <button class="page-btn" onclick="goToPage(3)">3</button>
+                        <button class="page-btn">... </button>
+                        <button class="page-btn" onclick="goToPage(8)">8</button>
+                        <button class="page-btn" onclick="goToPage(9)">9</button>
+                        <button class="page-btn" onclick="goToPage(10)">10</button>
+                       <!-- 다음 버튼 -->
+                        <button class="page-btn next-btn">다음 <img src="img/arrow-right.svg" alt="다음" class="arrow-icon">
+                        </button>
+                    </div>
+                </div>
+            </div>
+                
+                </div>
+                </div>
+                </div>
+            </div>
+            
+        </main>
+    </div>
+    <!-- 공통 모달 팝업 -->
+    <div id="delete-modal" class="modal">
+        <div class="modal-content">
+            <!-- 타이틀 -->
+        <h2 id="delete-title"></h2>
+        <!-- 본문 -->
+        <p id="delete-message">등록된 환자 정보가 완전히 삭제됩니다.</p>
+            <div class="modal-actions">
+               
+                <button class="cancel-button" onclick="closeModal()">취소</button>
+                <button class="confirm-button" onclick="confirmDeleteAction()">삭제</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="register-modal" class="modal">
+        <div class="modal-register">
+            <h2 id="register-title">환자 등록</h2>
+            <label class="input-label">환자 번호</label>
+        <input type="text" placeholder="환자 번호 입력" class="styled-input">
+        <label class="input-label">환자 이름</label>
+        <input type="text" placeholder="환자 이름 입력" class="styled-input">
+        <label class="input-label">성별</label>
+        <div class="button-group" role="group" aria-label="Gender selection">
+            <input type="radio" class="btn-check" name="gender" id="male" autocomplete="off">
+            <label class="btn gender-btn" for="male">남성</label>
+            
+            <input type="radio" class="btn-check" name="gender" id="female" autocomplete="off">
+            <label class="btn gender-btn" for="female">여성</label>
+        </div>
+            <label class="input-label">생년월일</label>
+            <input type="date" class="styled-input">
+            <label class="input-label">메모 (선택)</label>
+        <input type="text" placeholder="메모 입력" class="styled-input">
+
+        
+
+        <div class="modal-actions">
+            <button class="cancel-button" onclick="closeRegisterModal()">취소</button>
+            <button class="registerOnly-button" onclick="registerPatient()">등록</button>
+            <button class="confirm-button" onclick="registerPatient()">등록 및 검사준비</button>
+       
+        </div>
+
+        </div></div>
+    <!-- JavaScript -->
+     <script>let currentDeleteName = ''; // 삭제 대상 이름 저장
+
+        // 모달 열기
+        function openModal(name) {
+            currentDeleteName = name; // 삭제 대상 이름 저장
+            document.getElementById('delete-title').textContent = `${name}님의 환자 정보를 삭제할까요?`; // 타이틀 업데이트
+            document.getElementById('delete-message').textContent = `등록된 환자 정보가 완전히 삭제됩니다.`; // 본문 메시지
+            document.getElementById('delete-modal').style.display = 'flex'; // 모달 표시
+
+        }
+        
+        // 모달 닫기
+        function closeModal() {
+            document.getElementById('delete-modal').style.display = 'none'; // 모달 숨김
+        }
+        
+        // 확인 버튼 클릭 시 동작
+        function confirmDeleteAction() {
+            alert(`${currentDeleteName}님의 환자 정보가 삭제되었습니다.`);
+            closeModal(); // 모달 숨김
+        }
+       
+        function goToPage(pageNumber) {
+            console.log(`페이지 ${pageNumber}로 이동합니다.`);
+            // 여기에 페이지네이션 관련 로직 추가
+        }
+
+        // 환자 등록 모달 열기
+        function openRegisterModal() {
+        document.getElementById('register-modal').style.display = 'flex'; // 모달 표시
+        }
+
+        // 환자 등록 모달 닫기
+        function closeRegisterModal() {
+        document.getElementById('register-modal').style.display = 'none'; // 모달 숨김
+        }
+
+        // 환자 등록 확인
+        function registerPatient() {
+        const patientNumber = document.querySelector('#register-modal input[placeholder="환자 번호 입력"]').value;
+        const patientName = document.querySelector('#register-modal input[placeholder="환자 이름 입력"]').value;
+
+        if (patientNumber && patientName) {
+        alert(`환자 번호: ${patientNumber}, 환자 이름: ${patientName} 등록되었습니다.`);
+        closeRegisterModal();
+        } else {
+        alert('모든 필드를 입력하세요.');
+    }
+}
+
+        // 테이블 행 클릭 시 상세 화면으로 이동
+        function showDetails(patientId) {
+        // 삭제 버튼이나 드롭다운 관련 클릭 시 이벤트 전파 차단
+        if (event.target.closest('.delete-button') || event.target.closest('.dropdown-container')) {
+        return;
+        }
+        // 상세 화면 URL로 이동
+        window.location.href = `/patient/details/${patientId}`;
+        
+        }
+        // 삭제 버튼 클릭 시 모달 열기
+        function openModal(name, event) {
+            event.stopPropagation(); // 이벤트 전파 차단
+            currentDeleteName = name; // 삭제 대상 이름 저장
+            document.getElementById('delete-title').textContent = `${name}님의 환자 정보를 삭제할까요?`;
+            document.getElementById('delete-message').textContent = `등록된 환자 정보가 완전히 삭제됩니다.`;
+            document.getElementById('delete-modal').style.display = 'flex'; // 모달 표시
+        }
+        // 드롭다운 메뉴 토글
+        function toggleDropdown(event) {
+            event.stopPropagation(); // 클릭 이벤트 전파 방지
+            const container = event.target.closest('.dropdown-container');
+            container.classList.toggle('active');
+        }
+    
+         // 상태값 변경
+        function changeStatus(element, newStatus) {
+        const container = element.closest('.dropdown-container');
+        const statusLabel = container.querySelector('.status-label');
+        const dropdownMenu = container.querySelector('.dropdown-menu');
+        statusLabel.textContent = newStatus; // 상태값 업데이트
+        container.classList.remove('active'); // 드롭다운 메뉴 닫기
+        }
+        // 모든 항목에서 'selected' 클래스 제거
+        dropdownMenu.querySelectorAll('li').forEach((item) => {
+        item.classList.remove('selected');
+        });
+        // 클릭한 항목에 'selected' 클래스 추가
+        element.classList.add('selected');
+        // 드롭다운 메뉴 닫기
+        container.classList.remove('active');
+        // 문서 외부 클릭 시 드롭다운 메뉴 닫기
+        document.addEventListener('click', () => {
+        document.querySelectorAll('.dropdown-container').forEach((container) => {
+        container.classList.remove('active');
+        });
+    });
+    </script>
+    
+    
+</body>
+</html> 
\ No newline at end of file
diff --git a/img/main.css b/img/main.css
new file mode 100644
index 0000000..c587082
--- /dev/null
+++ b/img/main.css
@@ -0,0 +1,1354 @@
+/* main.css */
+body {
+    background: var(--Gray-100, #F2F4F7);
+    font-family: 'Pretendard', sans-serif;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+}
+
+/* 모든 입력창의 포커스 스타일 통일 */
+input[type="text"]:focus, 
+input[type="email"]:focus, 
+input[type="password"]:focus, 
+input[type="checkbox"]:focus {
+    outline: none; /* 기본 아웃라인 제거 */
+    border: 1px solid var(--Brand-600, #444CE7); /* 포커스 시 테두리 색상 */
+    box-shadow: 0px 0px 0px 2px rgba(68, 76, 231, 0.2); /* 부드러운 포커스 효과 */
+    border-radius: 8px; /* 모서리 둥글게 */
+    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 부드러운 전환 */
+}
+
+.top-nav {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+}
+
+.nav-container {
+    display: flex;
+    width: 1280px;
+    height: 72px;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo-area {
+    display: flex;
+    align-items: center;
+}
+
+.logo {
+    width: 32px; /* 로고의 너비는 자동으로 설정 */
+}
+
+.letters {
+    width: 62px;
+    margin-left: 4px; /* 로고와 레터 간격 */
+}
+
+.login-area {
+    color: var(--Gray-900, #101828);
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+}
+
+.outer-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0;
+    min-height: 100vh;
+    background: var(--Gray-100, #F2F4F7);
+}
+
+.main-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 48px 32px;
+    gap: 32px;
+    width: 1200px;
+    min-height: 880px;
+    background: var(--White-100, #F9FAFB);
+    box-shadow: 1px 0px 0px 0px #EAECF0 inset, -1px 0px 0px 0px #EAECF0 inset;
+    margin-top: 32px;
+}
+.table-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 48px 32px;
+    width: 1200px;
+    min-height: 880px;
+    background: var(--White-100, #F9FAFB);
+    box-shadow: 1px 0px 0px 0px #EAECF0 inset, -1px 0px 0px 0px #EAECF0 inset;
+}
+
+.box {
+    display: flex;
+    width: 360px;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+    background: var(--White-100, #F9FAFB);
+    justify-content: center;
+    margin: 0 auto;
+}
+
+.title {
+    color: var(--Gray-900, #101828);
+    text-align: center;
+    font-size: 30px;
+    font-weight: 800;
+    line-height: 38px;
+}
+
+.subtitle {
+    color: var(--Gray-700, #344054);
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+}
+
+.email-input {
+    display: flex;
+    padding: 10px 14px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White-100, #F9FAFB);
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+}
+
+
+.signup-button {
+    display: flex;
+    align-items: flex-start;
+    align-self: stretch;
+    padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    border-radius: 8px;
+    border: 1px solid var(--Brand-600, #444CE7);
+    background: var(--Brand-600, #444CE7);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px; 
+    color: var(--White-100, #F9FAFB); 
+    cursor: pointer; /* 커서 포인터 */
+}
+
+.already-member {
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+}
+
+.login-link {
+    color: var(--Brand-700, #3538CD);
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 20px;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.error-message {
+    color: #F04438; /* 에러 메시지 색상 */
+    font-size: 14px; /* 에러 메시지 폰트 크기 */
+    margin-top: 6px; /* 에러 메시지와 인풋 간격 */
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+}
+
+.button-container {
+    display: flex;
+    gap: 16px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.previous-button,
+.next-button {
+    flex: 1;
+    border-radius: 8px;
+    padding: 10px;
+}
+
+.previous-button {
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White-100, #F9FAFB);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color:#344054;
+    font-size: 16px;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+    cursor: pointer; /* 커서 포인터 */
+}
+
+.next-button {
+    border: 1px solid var(--Brand-200, #C7D7FE);
+    background: var(--Brand-200, #C7D7FE);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--White-100, #F9FAFB);
+    font-size: 16px;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+    cursor: pointer; /* 커서 포인터 */
+
+}
+
+.next-button:not(:disabled) {
+    border: 1px solid var(--Brand-600, #444CE7);
+    background: var(--Brand-600, #444CE7);
+    color: var(--White-100, #F9FAFB);
+    font-size: 16px;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+}
+
+.agree-button {
+    display: flex;
+    padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    border-radius: 8px;
+    border: 1px solid var(--Brand-200, #C7D7FE);
+    background: var(--Brand-200, #C7D7FE);
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--White-100, #F9FAFB);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+}
+
+.agree-button.active {
+    border: 1px solid var(--Brand-600, #444CE7);
+    background: var(--Brand-600, #444CE7);
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--White-100, #F9FAFB);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+    cursor: pointer; /* 커서 포인터 */
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    color: var(--Gray-700, #344054);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+    margin-bottom: 10px;
+}
+
+.checkbox-label input {
+    margin-right: 12px; /* 체크박스와 문구 간격 12px 추가 */
+}
+
+.checkbox-label a {
+    color: #444CE7; /* 하이퍼링크 색상 */
+    text-decoration: none; /* 밑줄 제거 */
+}
+
+/* Divider 스타일 */
+.divider {
+    border: none; /* 기본 테두리 제거 */
+    border-top: 1px solid  #EAECF0; /* 상단 라인만 적용 (색상: 연한 회색) */
+    margin: 16px 0; /* 위아래 여백 */
+    box-shadow: none; /* 그림자 효과 제거 */
+    background: none; /* 배경 제거 */
+}
+
+
+.styled-input {
+    display: block; /* 인풋창을 블록 요소로 설정 */
+    width: 100%; /* 인풋창 너비 설정 */
+    padding: 10px 14px; /* 패딩 설정 */
+    align-items: center; /* 수직 정렬 */
+    gap: 8px; /* 요소 간 간격 */
+    border-radius: 8px; /* 모서리 둥글게 */
+    border: 1px solid var(--Gray-300, #D0D5DD); /* 테두리 색상 */
+    background: var(--White-100, #F9FAFB); /* 배경 색상 */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /* 그림자 효과 */
+    box-sizing: border-box;
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+}
+
+.name-label {
+    display: block; /* 라벨을 블록 요소로 설정 */
+    margin-bottom: 8px; /* 라벨과 인풋창 간의 간격 */
+}
+
+.complete-button {
+    display: flex;
+    padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    border-radius: 8px;
+    border: 1px solid var(--Brand-200, #C7D7FE);
+    background: var(--Brand-200, #C7D7FE);
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--White-100, #F9FAFB);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px;
+    cursor: pointer; /* 커서 포인터 */
+}
+
+/* 활성화된 상태 스타일 */
+.complete-button.active {
+    border: 1px solid var(--Brand-600, #444CE7);
+    background: var(--Brand-600, #444CE7);
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--White-100, #F9FAFB);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+    cursor: pointer; /* 커서 포인터 */
+}
+
+.button-normal {
+    display: flex;
+    padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    border-radius: 8px;
+    border: 1px solid var(--Brand-600, #444CE7);
+    background: var(--Brand-600, #444CE7);
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--White-100, #F9FAFB);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+    cursor: pointer; /* 커서 포인터 */
+}
+
+.list-container {
+    margin-top: 24px; /* 리스트 박스 상단 여백 */
+    display: flex; /* 플렉스 박스 설정 */
+    flex-direction: column; /* 세로 방향으로 정렬 */
+    align-items: flex-start; /* 아이템들을 왼쪽 정렬 */
+    justify-content: center; /* 전체 박스를 중앙 정렬 */
+    width: 100%; /* 전체 폭을 100%로 설정 */
+    max-width: 200px; /* 최대 폭을 200px로 설정 */
+    margin-left: auto; /* 좌우 여백 자동 설정 */
+    margin-right: auto; /* 좌우 여백 자동 설정 */
+}
+
+.list-item {
+    display: flex; /* 플렉스 박스 설정 */
+    align-items: center; /* 수직 정렬 */
+    margin-bottom: 32px; /* 각 항목 간의 간격 */
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+}
+
+.license-key-message {
+    text-align: center; /* 중앙 정렬 */
+    margin-top: 32px; /* 상단 여백 */
+}
+
+.license-key-message a {
+    color: var(--Brand-700, #3538CD); /* 하이퍼링크 색상 */
+    font-family: Pretendard; /* 폰트 패밀리 */
+    font-size: 14px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 800; /* 폰트 두께 */
+    line-height: 20px; /* 줄 높이 */
+    text-decoration: none; /* 밑줄 제거 */
+}
+
+.centered-container {
+    text-align: center; /* 텍스트 중앙 정렬 */
+    margin: 0 auto; /* 좌우 여백 자동 설정 */
+    max-width: 600px; /* 최대 폭 설정 (필요에 따라 조정) */
+}
+
+.new-background {
+    width: 100%;
+    height: 100vh; /* 전체 화면 높이 */
+    display: flex;
+    justify-content: center; /* 중앙 정렬 */
+    align-items: center; /* 중앙 정렬 */
+    background-color: #EEF4FF; /* 배경색 설정 */
+    background-image: url('img/bg.png'); /* 배경 이미지 설정 */
+    background-size: cover; /* 배경 이미지 크기 조정 */
+}
+
+.new-container {
+    display: flex; /* 좌우로 나뉘어진 블록 */
+    border-radius: 20px; /* 모서리 둥글게 */
+    background: var(--White-100, #F9FAFB); /* 배경색 */
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); /* 그림자 효과 */
+    width: 80%; /* 전체 블록 너비 */
+    max-width: 1200px; /* 최대 너비 설정 */
+}
+
+.new-left-block {
+    width: 40%; /* 너비 설정 */
+    height: auto; /* 높이 설정 */
+    flex-shrink: 0; /* 축소 비율 설정 */
+    background: var(--gradient-brand-80060090-deg, linear-gradient(63deg, #2D31A6 16.72%, #444CE7 83.39%)); /* 배경색 설정 */
+    padding: 80px; /* 좌우 80px 패딩 */
+    border-radius: 20px 0 0 20px; /* 좌상, 우상, 우하, 좌하 순서 */
+    flex-direction: column; /* 세로 방향으로 정렬 */
+    justify-content: flex-start; /* 상단 정렬 */
+}
+
+.new-guide-image {
+    max-width: 100%; /* 이미지 크기 조정 */
+    height: auto; /* 비율 유지 */
+}
+
+.new-text-box {
+    margin-top: 32px; /* 텍스트 박스 상단 여백 */
+}
+
+.new-title {
+    color: var(--White-100, #F9FAFB); /* 타이틀 색상 */
+    font-size: 36px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 400; /* 폰트 두께 */
+    line-height: 44px; /* 줄 높이 */
+    letter-spacing: -0.72px; /* 글자 간격 */
+}
+
+.new-title-bold {
+    color: var(--White-100, #F9FAFB); /* 타이틀 색상 */
+    font-size: 36px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 800; /* 폰트 두께 */
+    line-height: 44px; /* 줄 높이 */
+    letter-spacing: -0.72px; /* 글자 간격 */
+}
+
+.new-right-block {
+    background-color: #F9FAFB;
+    display: flex;
+    flex-direction: column; /* 세로 방향으로 정렬 */
+    justify-content: center; /* 중앙 정렬 */
+    align-items: center; /* 중앙 정렬 */
+    border-radius: 0 20px 20px 0; /* 좌상, 우상, 우하, 좌하 순서 */
+    color: var(--Gray-700, #344054); /* 텍스트 색상 */
+}
+
+.info-list {
+    margin-top: 32px; /* 리스트 상단 여백 */
+    background-image: url('img/bgdot.png'); /* 배경 이미지 설정 */
+    background-position: right bottom; /* 우측 45px, 하단 위치 */
+    background-repeat: no-repeat; /* 배경 이미지 반복 방지 */
+    padding-bottom: 50px; /* 하단 여백 추가 (필요에 따라 조정) */
+}
+
+.list-item {
+    margin-bottom: 32px; /* 각 항목 간의 간격 */
+}
+
+.list-title {
+    color: var(--White-100, #F9FAFB); /* 타이틀 색상 */
+    font-size: 20px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 800; /* 폰트 두께 */
+    line-height: 30px; /* 줄 높이 */
+    margin-bottom: 8px; /* 타이틀과 본문 간의 간격 설정 */
+}
+
+.list-content {
+    color: var(--White-80, #D0D5DD); /* 본문 색상 */
+    font-size: 14px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 400; /* 폰트 두께 */
+    line-height: 20px; /* 줄 높이 */
+    margin-bottom: 32px;
+}
+
+.logo-container {
+    display: flex; /* 플렉스 박스 설정 */
+    align-items: center; /* 수직 중앙 정렬 */
+    margin-bottom: 10px; /* 하단 여백 설정 */
+}
+
+.logo-container img {
+    height: auto; /* 비율 유지 */
+}
+
+.right-block {
+    display: inline-flex;
+    padding: 121px 100px;
+    flex-direction: column; /* 세로 방향으로 정렬 */
+    justify-content: center; /* 중앙 정렬 */
+    align-items: center; /* 중앙 정렬 */
+    color: var(--Gray-700, #344054); /* 텍스트 색상 */
+}
+
+.login-container {
+    margin-top: 32px; /* 상단 여백 */
+    text-align: center; /* 텍스트 중앙 정렬 */
+    width: 100%; /* 부모 컨테이너의 너비를 100%로 설정 */
+    max-width: 360px; /* 최대 너비 설정 */
+    margin: 0 auto; /* 중앙 정렬 */
+    box-sizing: border-box; /* 패딩 포함 너비 계산 */
+    
+}
+
+.input-label {
+    color: var(--Gray-700, #344054); /* 라벨 색상 */
+    font-size: 14px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 400; /* 폰트 두께 */
+    line-height: 20px; /* 줄 높이 */
+    margin-top: 20px;
+    margin-bottom: 6px; /* 라벨과 인풋창 간의 간격 */
+    display: block; /* 블록 요소로 설정하여 줄바꿈 */
+    text-align: left;
+}
+
+.login-input {
+    width: 100%; /* 입력 필드 너비 100% */
+    padding: 10px; /* 패딩 */
+    border-radius: 8px; /* 모서리 둥글게 */
+    border: 1px solid var(--Gray-300, #D0D5DD); /* 테두리 */
+    background: var(--White-100, #F9FAFB); /* 배경색 */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /* 그림자 */
+    color: var(--Gray-500, #667085); /* 텍스트 색상 */
+    font-size: 16px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 400; /* 폰트 두께 */
+    line-height: 24px; /* 줄 높이 */
+    box-sizing: border-box; /* 패딩 포함 너비 계산 */
+}
+
+.login-button {
+    width: 100%; /* 버튼 너비 100% */
+    padding: 10px; /* 패딩 */
+    background-color: #007BFF; /* 버튼 배경색 */
+    color: white; /* 버튼 텍스트 색상 */
+    border: none; /* 테두리 없음 */
+    border-radius: 4px; /* 모서리 둥글게 */
+    cursor: pointer; /* 커서 포인터 */
+}
+
+.login-button:hover {
+    background-color: #0056b3; /* 버튼 호버 색상 */
+}
+
+.footer-box {
+    display: flex; /* 플렉스 박스 설정 */
+    justify-content: space-between; /* 양쪽 끝 정렬 */
+    flex-wrap: wrap; /* 여러 줄 허용 */
+    align-items: flex-end; /* 하단 정렬 */
+    min-height: 150px; /* 최소 높이 설정 */
+    border-radius: 0 0 20px 0; /* 좌상, 우상, 우하, 좌하 순서 */
+    display: flex;
+    gap: 56px;
+    align-self: stretch;
+    margin-top: auto; /* 푸터를 하단으로 정렬 */
+
+}
+
+.footer-content {
+    color: var(--Gray-500, #667085);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px; /* 150% */
+    display: flex;
+    flex-wrap: wrap; /* 여러 줄로 나눔 */
+    justify-content: space-between; /* 양쪽 끝 정렬 */
+    display: block; /* 다단 레이아웃 설정을 위해 블록 요소로 변경 */
+    column-count: 2; /* 2단 레이아웃 */
+    column-gap: 56px; /* 두 단 사이의 간격 */
+    padding: 24px 48px;
+    width: 100%;
+
+}
+
+.footer-content span {
+    display: block; /* 텍스트 길이에 맞춤 */
+    margin-bottom: 8px; /* 요소 간 여백 */
+    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
+}
+
+.password-recovery-link {
+    text-decoration: none; /* 밑줄 제거 */
+    color: var(--Brand-700, #3538CD); /* 링크 색상 */
+    font-family: Pretendard; /* 폰트 패밀리 */
+    font-size: 14px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 800; /* 폰트 두께 */
+    line-height: 20px; /* 줄 높이 */
+}
+.signin-label {
+    color: var(--Gray-700, #344054); /* 라벨 색상 */
+    font-size: 14px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 400; /* 폰트 두께 */
+    line-height: 20px; /* 줄 높이 */
+    text-align: center;
+}
+.footer-link {
+    mix-blend-mode: multiply; /* 색상 혼합 모드 */
+    display: inline-block; /* 플렉스 박스로 정렬 */
+    padding: 2px 8px; /* 내부 여백 설정 */
+    justify-content: center; /* 중앙 정렬 */
+    align-items: center; /* 세로 중앙 정렬 */
+    border-radius: 16px; /* 둥근 테두리 */
+    background: var(--Gray-100, #F2F4F7); /* 배경색 설정 */
+    color: var(--Gray-500, #667085); /* 텍스트 색상 */
+    text-align: center; /* 텍스트 중앙 정렬 */
+    font-size: 12px; /* 폰트 크기 */
+    font-style: normal; /* 폰트 스타일 */
+    font-weight: 400; /* 폰트 두께 */
+    line-height: 18px; /* 줄 높이 */
+    text-decoration: none; /* 링크 밑줄 제거 */
+}
+
+.footer-link:hover {
+    background: var(--Gray-200, #E4E7EC); /* 호버 시 배경색 변경 */
+    color: var(--Gray-700, #344054); /* 호버 시 텍스트 색상 변경 */
+    cursor: pointer; /* 마우스 커서 포인터 */
+}
+
+.footer-content .right-content {
+    margin-left: auto; /* 우측으로 밀어붙임 */
+}
+
+/* 태블릿 화면 크기 (768px 이하) */
+@media (max-width: 768px) {
+    .login-container {
+        max-width: 90%; /* 너비를 화면의 90%로 조정 */
+        padding: 12px; /* 내부 여백 줄이기 */
+    }
+}
+
+/* 모바일 화면 크기 (480px 이하) */
+@media (max-width: 480px) {
+    .login-container {
+        max-width: 95%; /* 더 작은 화면에서 너비를 95%로 조정 */
+        padding: 10px; /* 내부 여백 더 줄이기 */
+    }
+}
+/* 에러 상태 입력창 스타일 */
+.login-input.error {
+    border-radius: 8px;
+    border: 1px solid var(--Error-300, #FDA29B);
+    background: var(--White-100, #F9FAFB);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    padding-right: 12px; /* 경고 아이콘 자리 확보 */
+    box-sizing: border-box;
+}
+
+/* 경고 아이콘 스타일 */
+.input-container {
+    position: relative; /* 아이콘의 절대 위치 기준 */
+    margin-bottom: 6px; /* 에러 메시지 간격 확보 */
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* 에러 메시지 스타일 */
+.error-message {
+    color: var(--Error-500, #F04438);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    margin-top: 6px; /* 입력창과의 간격 */
+    text-align: left; /* 왼쪽 정렬 */
+}
+/* 아이콘을 인풋창 내부에 배치 */
+.warning-icon {
+    position: absolute; /* 인풋창 내부에 절대 위치 */
+    right: 12px; /* 인풋창 우측 내부 12px 위치 */
+    top: 50%; /* 수직 중앙 */
+    transform: translateY(-50%); /* 정확한 중앙 정렬 */
+    width: 16px;
+    height: 16px;
+    pointer-events: none; /* 이벤트 방지 */
+    display: block; /* 아이콘 숨김 방지 */
+}
+
+.signin-message {
+    display: flex;
+    max-width: 360px;
+    flex-direction: column;
+    align-items: center;
+}   
+
+.findaccount-message {
+    display: flex;
+    width: 360px;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box; /* 패딩 포함 너비 계산 */
+}   
+
+.box2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--White-100, #F9FAFB);
+    justify-content: center;
+    margin: 0 auto;
+    width: 100%; /* 전체 너비 */
+    max-width: 360px; /* 최대 너비 설정 */
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+.box3{
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    width: 100%; /* 전체 너비 */
+    max-width: 360px; /* 최대 너비 설정 */
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+.box4 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--White-100, #F9FAFB);
+    justify-content: center;
+    margin: 0 auto;
+    width: 100%; /* 전체 너비 */
+    max-width: 380px; /* 최대 너비 설정 */
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+.box1200 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--White-100, #F9FAFB);
+    justify-content: center;
+    margin: 0 auto;
+    width: 100%; /* 전체 너비 */
+    max-width: 1200px; /* 최대 너비 설정 */
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+.findid {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+    color: var(--Gray-700, #344054);
+    text-align: center;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+
+    /* 상단 및 하단 테두리 */
+    border-top: 1px solid #D0D5DD; /* 상단 테두리 */
+    border-bottom: 1px solid #D0D5DD; /* 하단 테두리 */
+    box-sizing: border-box; /* 패딩과 테두리를 너비에 포함 */
+    padding: 24px 0; /* 위아래 여백 추가 */
+}
+.complete-message{
+    color: var(--Gray-700, #344054);
+    text-align: center;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+}
+.search-top{
+    display: flex;
+    width: 1200px;
+    margin-bottom: 24px;
+}
+.search-patient{
+    width: 30%;
+    max-width: 400px;
+    height: 44px;
+    display: flex;
+    padding: 10px 14px;
+    padding-left: 40px; /* 좌측 여백 확보 (아이콘 공간) */
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White-100, #F9FAFB);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+    box-sizing: border-box; /* 패딩 포함 너비 계산 */
+}
+
+/* 아이콘을 인풋창 내부에 배치 */
+.search-icon {
+    position: absolute; /* 인풋창 내부에 절대 위치 */
+    left: 14px; /* 인풋창 우측 내부 12px 위치 */
+    top: 50%; /* 수직 중앙 */
+    transform: translateY(-50%); /* 정확한 중앙 정렬 */
+    width: 16px;
+    height: 16px;
+    pointer-events: none; /* 이벤트 방지 */
+    display: block; /* 아이콘 숨김 방지 */
+}
+
+.table-head{
+    box-sizing: border-box;
+    width: 100%; /* 부모 요소 크기와 맞춤 */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 24px; /* 내부 여백 설정 */
+    margin: 0; /* 외부 여백 제거 */
+    background: var(--White-100, #F9FAFB);
+    border-bottom: 1px solid var(--Gray-200, #EAECF0); /* 테이블과 구분선 */
+    border-radius: 12px 12px 0 0; /* 좌상, 우상, 우하, 좌하 순서 */
+}
+
+.tablehead-container{
+    align-items: stretch; /* 양쪽에 꽉 차도록 설정 */
+    gap: 0; /* 여백 제거 */
+    display: flex;
+    flex-direction: column; /* 세로 정렬 */
+    padding: 0; /* 내부 여백 제거 */
+    margin: 0; /* 외부 여백 제거 */
+    border-radius: 12px; /* 좌상, 우상, 우하, 좌하 순서 */
+    border: 1px solid var(--Gray-200, #EAECF0);
+    background: var(--White-100, #F9FAFB);
+    box-sizing: border-box;
+    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+    overflow: visible; /* 모서리 가림 방지 */
+}
+
+
+.button-table{
+    display: flex;
+    padding: 8px 14px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    border-radius: 8px;
+    border: 1px solid var(--Brand-600, #444CE7);
+    background: var(--Brand-600, #444CE7);
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--White-100, #F9FAFB);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 20px; /* 142.857% */
+    cursor: pointer; /* 커서 포인터 */
+}
+.title-head{
+    color: var(--Gray-900, #101828);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px; /* 155.556% */
+}
+.table {
+    width: 100%;
+    max-width: 100%; /* 최대 너비 제한 해제 */
+    border-collapse: collapse; /* 테두리 중복 제거 */
+    border-spacing: 0; /* 셀 간 간격 제거 */
+    table-layout: fixed; /* 셀 너비를 고정 */
+}
+
+.table-container {
+    width: 100%; /* 컨테이너를 화면 너비로 확장 */
+    overflow-x: auto; /* 가로 스크롤 허용 (필요 시) */
+    margin: 0 auto; /* 중앙 정렬 */
+    box-sizing: border-box;
+    min-height: 300px; /* 최소 높이 설정 */
+    background: var(--White-100, #F9FAFB); /* 빈 테이블의 배경색 */
+    flex-direction: column; /* 세로 정렬 */
+    display: flex; /* 플렉스 박스 설정 */
+    border-radius: 12px; /* 좌상, 우상, 우하, 좌하 순서 */
+}
+
+
+.th {
+    height: 44px;
+    padding: 12px 24px; /* 셀 여백 */
+    text-align: left; /* 텍스트 왼쪽 정렬 */
+    border-bottom: 1px solid var(--Gray-200, #EAECF0); /* 하단 테두리 */
+    background: var(--Gray-50, #F9FAFB); /* 헤더 배경색 */
+    color: var(--Gray-700, #344054); /* 텍스트 색상 */
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px; /* 줄 높이 */
+    box-sizing: border-box; /* 패딩 포함 크기 계산 */
+}
+
+.td {
+    height: 72px;
+    padding: 16px 24px; /* 셀 여백 */
+    text-align: left; /* 텍스트 왼쪽 정렬 */
+    border-bottom: 1px solid var(--Gray-200, #EAECF0); /* 하단 테두리 */
+    color: var(--Gray-900, #101828); /* 텍스트 색상 */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 줄 높이 */
+    box-sizing: border-box; /* 패딩 포함 크기 계산 */
+    border-right: none
+}
+
+/* 기본 행 스타일 */
+.table tbody tr {
+    cursor: pointer; /* 클릭 가능 */
+    transition: background-color 0.3s ease;
+    border-bottom: 1px solid transparent; /* 기본 경계선 투명 처리 */
+}
+
+/* 행에 포커스되거나 호버될 때 배경색 변경 */
+.table tbody tr:hover,
+.table tbody tr:focus {
+    background-color: #F5F7FA; /* 밝은 회색 */
+    border-right: 1px solid #F5F7FA; /* 경계선 배경색과 동일 */
+}
+
+/* 상태값에 따른 배경색 변경 */
+.table tbody tr.status-critical {
+    background-color: #FFF6ED; /* 상태값이 특정 조건일 때 */
+    border-bottom: 1px solid #FFF6ED; /* 경계선 배경색과 동일 */
+    border-right: 1px solid #F5F7FA; /* 경계선 배경색과 동일 */
+}
+
+
+.pagination {
+    display: flex;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    justify-content: center;
+    align-items: center;
+    border-collapse: collapse; /* 테두리 중복 제거 */
+    border-radius: 0 0 20px 20px; /* 좌상, 우상, 우하, 좌하 순서 */
+}
+
+.page-btn {
+    padding: 10px 16px;
+    justify-content: center;
+    gap: 8px;
+    display: flex;
+    align-items: center;
+    border: 1px solid #D0D5DD;
+    background: var(--White-100, #F9FAFB);
+    cursor: pointer;
+    font-size: 14px;
+    color: #333;
+}
+
+.page-btn:hover {
+    background-color: #f0f4f8;
+}
+
+.page-btn:focus {
+    outline: none;
+    border-color: #444CE7;
+}
+
+.prev-btn {
+    font-weight: 800;
+    color: var(--Gray-700, #344054);
+    border: 1px solid #D0D5DD;
+    background: var(--White-100, #F9FAFB);
+    border-radius: 8px 0px 0px 8px;
+    display: flex;
+    padding: 10px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+}
+
+.prev-btn:hover, .next-btn:hover {
+    background-color: #f0f4f8;
+}
+
+/* 화살표 아이콘 스타일 */
+.arrow-icon {
+    width: 12px;
+    height: 12px;
+}
+
+.page-btn:not(:first-child) {
+    border-left: none; /* 왼쪽 테두리 제거 */
+}
+
+.next-btn {
+    font-weight: 800;
+    color: var(--Gray-700, #344054);
+    border: 1px solid #D0D5DD;
+    background: var(--White-100, #F9FAFB);
+    border-radius: 0px 8px 8px 0px;
+    padding: 10px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+}
+
+.empty-message {
+    text-align: center;
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    padding: 16px 0;
+}
+/* 각 열의 너비 분배 */
+.table colgroup col:nth-child(1) { min-width: 150px; } /* 검사 시행일 */
+.table colgroup col:nth-child(2) { min-width: 250px; } /* 환자 번호 (넓게) */
+.table colgroup col:nth-child(3) { min-width: 250px; } /* 환자 이름 (넓게) */
+.table colgroup col:nth-child(4) { min-width: 150px; } /* 성별 */
+.table colgroup col:nth-child(5) { min-width: 150px; } /* 나이 */
+.table colgroup col:nth-child(6) { min-width: 150px; } /* 상태 */
+.table colgroup col:nth-child(7) { min-width: 90px; } /* 상태 */
+
+/* 드롭다운 컨테이너 */
+.dropdown-container {
+    position: relative;
+    display: inline-block;
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    align-items: center;
+    justify-content: flex-start; /* 수평 중앙 정렬 (왼쪽 정렬 시 justify-content: flex-start) */
+    padding: 16px 24px;
+}
+
+/* 드롭다운 버튼 */
+.dropdown-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    margin-left: 8px;
+    vertical-align: middle; /* 수직 중앙 정렬 */
+}
+
+/* 드롭다운 메뉴 */
+.dropdown-menu {
+    display: none;
+    position: absolute;
+    width: 110px;
+    top: 50%; /* 셀의 수직 중앙 */
+    left: 50%; /* 셀의 수평 중앙 */
+    transform: translate(-50%, -50%); /* 정확히 중앙 정렬 */
+    border-radius: 8px;
+    border: 1px solid var(--Gray-100, #F2F4F7);
+    background: var(--White-100, #F9FAFB);
+    /* Shadow/lg */
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    list-style: none;
+    align-self: stretch;
+    z-index: 1000;
+}
+
+/* 드롭다운 메뉴 아이템 */
+.dropdown-menu li {
+    padding: 10px 14px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    display: flex;
+    align-items: center; /* 수직 중앙 정렬 */
+    gap: 8px; /* 아이콘과 텍스트 간격 */  
+    box-sizing: border-box; /* 패딩 포함 크기 계산 */
+}
+
+/* 드롭다운 메뉴 아이템 호버 */
+.dropdown-menu li:hover {
+    background-color: #F0F4F8;
+}
+
+/* 드롭다운 활성화 */
+.dropdown-container.active .dropdown-menu {
+    display: block;
+}
+/* 선택된 항목 아이콘 */
+.dropdown-menu li.selected::after {
+    content: url('img/check_blue.svg'); /* 선택된 상태 아이콘 */
+    margin-left: auto; /* 아이콘을 오른쪽 끝으로 이동 */
+}
+.modal {
+    display: none; /* 기본적으로 숨김 */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* 정확히 중앙 정렬 */
+    background: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
+    width: 100vw; /* 화면 너비 전체 */
+    height: 100vh; /* 화면 높이 전체 */
+    z-index: 1000; /* 다른 요소 위에 표시 */
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    padding: 24px;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+    border-radius: 12px;
+    /* Shadow/xl */
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+}
+
+.modal-content {
+    width: 400px;
+    padding: 24px;
+    border-radius: 12px;
+    background: var(--White-100, #F9FAFB);
+    /* Shadow/xl */
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+    text-align: left;
+}
+
+.modal-register{
+    width: 640px;
+    padding: 24px;
+    border-radius: 12px;
+    background: var(--White-100, #F9FAFB);
+    /* Shadow/xl */
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+    text-align: left;
+}
+
+.modal-actions {
+    margin-top: 32px;
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+}
+
+.confirm-button {
+    display: flex;
+    padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    padding: 8px 16px;
+    cursor: pointer;
+    border-radius: 8px;
+    border: 1px solid var(--Brand-600, #444CE7);
+    background: var(--Brand-600, #444CE7);
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--White-100, #F9FAFB);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+}
+
+.cancel-button {
+    display: flex;
+    padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    cursor: pointer;
+    border-radius: 8px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White-100, #F9FAFB);
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--Gray-700, #344054);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+}
+
+.delete-button {
+    padding: 0; /* 내부 여백 제거 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    border: none; /* 테두리 제거 */
+    background: none; /* 배경 제거 */
+    cursor: pointer; /* 포인터 커서 */
+
+}
+.button-group{
+    display: flex;
+    align-items: flex-start;
+    box-shadow: none; /* 그림자 효과 제거 */
+    background: none; /* 배경 제거 */
+
+}
+.gender-male{
+    display: flex;
+    padding: 10px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White-100, #F9FAFB);
+    color: var(--Gray-700, #344054);
+    /* Text sm/Bold */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 20px; /* 142.857% */
+    border-radius: 8px 0 0 8px; /* 좌상, 우상, 우하, 좌하 순서 */
+    box-sizing: border-box;
+    cursor: pointer; /* 커서 포인터 */
+}
+.btn-check{
+    display: none; /* 숨김 - 라벨로 스타일링 */
+}
+.btn-check:checked + .btn {
+    background: #F9FAFB;
+    border: 1px solid #D0D5DD;
+    z-index: 2;
+}
+
+/* 선택된 버튼의 hover 효과 */
+.btn-check:checked + .btn:hover {
+    background: #E0EAFF ;
+}
+/* 기본 버튼 스타일 */
+.gender-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 16px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White-100, #F9FAFB);
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 20px;
+    border-radius: 8px; /* 둥근 테두리 */
+    cursor: pointer; /* 포인터 커서 */
+    transition: background 0.2s ease, border-color 0.2s ease;
+}
+/* 남성 버튼 (왼쪽) */
+.gender-btn:first-of-type {
+    border-radius: 8px 0 0 8px; /* 좌상, 좌하만 둥글게 */
+    border-right: none; /* 중간 경계선 제거 */
+}
+
+/* 여성 버튼 (오른쪽) */
+.gender-btn:last-of-type {
+    border-radius: 0 8px 8px 0; /* 우상, 우하만 둥글게 */
+    border-left: none; /* 중간 경계선 제거 */
+}
+
+/* 선택되지 않은 상태에서 호버 */
+.gender-btn:hover {
+    background: #E0EAFF;
+}
+
+/* 선택된 버튼 스타일 */
+.btn-check:checked + .gender-btn {
+    background: #E0EAFF; /* 선택된 상태 배경 */
+    border: 1px solid #444CE7; /* 선택된 상태 테두리 */
+    color: #444CE7; /* 선택된 상태 텍스트 색상 */
+    font-weight: 800; /* 강조된 폰트 */
+}
+
+/* 선택된 버튼의 호버 효과 */
+.btn-check:checked + .gender-btn:hover {
+    background: #D6E4FF;
+}
+.form-control {
+    width: 100%;
+    display: flex;
+    padding: 10px 14px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    border-radius: 8px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White-100, #F9FAFB);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+}
+.registerOnly-button{
+    display: flex;
+    align-items: flex-start;
+    flex: 1 0 0;
+    padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 0 0;
+    border-radius: 8px;
+    border: 1px solid var(--Brand-50, #EEF4FF);
+    background: var(--Brand-50, #EEF4FF);
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: var(--Brand-700, #3538CD);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 24px; /* 150% */
+}
+.h2{
+    color: var(--Gray-900, #101828);
+
+/* Text lg/Bold */
+font-family: Pretendard;
+font-size: 18px;
+font-style: normal;
+font-weight: 800;
+line-height: 28px; /* 155.556% */
+}
\ No newline at end of file

검사 시행일	환자 번호	환자 이름	성별	나이	상태
검사 전	842292	이*화	여	2Y(24M)	+ + 검사 준비 + + + 검사 준비 + 등록됨 + + +
검사 전	621441	임*정	여	3Y(40M)	등록됨
2024.11.22.	33689111	심*민	남	5Y	등록됨
2024.1.19	872078	현*빈	남	6Y	검사 완료
2024.1.11	373487373487	이*민	여	10Y	검사 완료