main.css

@charset "UTF-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

.btn-primary {
    background-color: #7F56D9; /* 버튼 배경색 변경 */
    border-color: #7F56D9; /* 버튼 테두리 색 변경 */
    color: #ffffff; /* 버튼 텍스트 흰색 */
}

.btn-primary:hover {
    background-color: #6b46b0; /* 호버 시 더 어두운 색상 */
    border-color: #6b46b0;
}
.custom-btn {
    background-color: #7F56D9; /* 커스텀 배경색 */
    color: #ffffff; /* 흰색 텍스트 */
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}

.custom-btn:hover {
    background-color: #6b46b0; /* 호버 시 색상 */
}


.buttons {
    display: flex;
    flex-direction: column; /* 세로로 배치 */
    gap: 16px; /* 버튼 사이 여백 */
}

.btn {
    background-color: #7F56D9; /* 버튼 배경색 */
    color: #ffffff; /* 버튼 텍스트 색상 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

.primary-btn {
    background-color: #7F56D9; /* 버튼 배경색 */
    color: white; /* 버튼 글자색 */
    border: none; /* 테두리 없음 */
    border-radius: 8px; /* 둥글게 */
    padding: 1rem 1rem; /* 상하 패딩 1.2rem, 좌우 패딩 1rem */
    margin-bottom: 12px; /* 아래 버튼과의 간격 */
    transition: background-color 0.3s ease; /* 호버 시 배경색 전환 효과 */
    width: auto; /* 자동 크기 조정 */
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

.secondary-btn {
    background-color: white; /* 두 번째 버튼 배경색 */
    color: #344054; /* 두 번째 버튼 글자색 */
    border: 1px solid #D0D5DD; /* 테두리 색상 */
    border-radius: 8px; /* 둥글게 */
    padding: 1rem 1rem; /* 상하 패딩 1.2rem, 좌우 패딩 1rem */
    width: auto; /* 자동 크기 조정 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}



.primary-btn:hover {
    background-color: #6b46b0; /* 호버 시 색상 */
}


/* 버튼 스타일 */
.btn-custom-purple {
    height: 44px;
    display: flex;
    padding: 16px 28px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Primary-600, #7f56d9);
    color: var(--White, #fff);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    border: none;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

.btn-custom-white {
    height: 44px;
    display: flex;
    padding: 16px 28px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(#344054);
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--White, #FFF);

/* Shadow/xs */
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

.btn-custom-purple:hover {
    background-color: #6941C6;
    color: white;
}

.btn-custom-purple:disabled {
    background-color: #E9D7FE !important;  /* disabled 상태의 배경색 */
    color: white !important;  /* disabled 상태의 텍스트 색상 */
    cursor: not-allowed;
}

.modal .btn-custom-purple {
    padding: 10px 18px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

.btn-agreement {
    background: white;
    border: 1px solid #D0D5DD;
    color: #344054;
    width: 120px;
    font-size: 16px;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

.btn-agreement:hover {
    background: #F9FAFB;
    border-color: #D0D5DD;
    color: #344054;
}



/* 파일 업로드 버튼 스타일 */
.file-upload-btn {
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    color: #344054;
    background-color: #ffffff;
    font-style: 14px;
    font-weight: 700;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

.file-reset-btn {
    border-radius: 8px;
    border: 1px solid #F9F5FF; /* 기본 색상으로 변경 */
    background: #F9F5FF; /* 배경색을 원하는 색상으로 변경 */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    font-weight: 800;
    color: #6941C6; /* 텍스트 색상 */
    padding: 8px 14px;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

   /* 파일명 표시 스타일 */
.file-name {
    display: none; /* Initially hidden */
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid transparent; /* No border initially */
}

.file-name.active {
    display: flex; /* Show when active */
    border: 1px solid var(--Gray-300, #D0D5DD); /* Add border when active */
}

.file-name {
    margin-top: 5px;
    color: #101828; /* 텍스트 색상 */
    display: flex;
    padding: 8px 14px;
justify-content: center;
align-items: center;
border-radius: 8px;
border: 1px solid var(--Gray-300, #D0D5DD);
background: var(--White, #FFF);

/* Shadow/xs */
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}


.primary-btn-new {
    padding: 8px; /* 버튼의 상하좌우 여백 */
	font-size: 14px;
	width: 108px;
    background-color: #7F56D9; /* 버튼 배경색 */
    color: #ffffff; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 제거 */
    border-radius: 8px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 포인터 */
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px; /* 142.857% */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

.secondary-btn-new {
    padding: 8px; /* 버튼의 상하좌우 여백 */
	font-size: 14px;
	width: 108px;
    background-color: #ffffff; /* 버튼 배경색 */
    color: #344054; /* 버튼 텍스트 색상 */
    border: 1px solid var(--Gray-300, #D0D5DD); /* 테두리 */
    border-radius: 8px; /* 모서리 둥글게 */
    cursor: pointer; /* 커서 포인터 */
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px; /* 142.857% */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

.button-group {
    display: flex;
    gap: 12px;
}


.btn-view {
    border-radius: 8px;
    border: 1px solid var(--Brand-600, #7F56D9);
    background: var(--Brand-600, #7F56D9);
    color: #FFFFFF; /* 버튼 텍스트 색상 */
    padding: 8px 16px; /* 버튼 패딩 */
    cursor: pointer; /* 커서 포인터로 변경 */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /* 그림자 효과 */
    transition: background 0.3s; /* 배경색 변화에 대한 트랜지션 */
    font-weight: 800;
    margin-top: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}

.btn-view:hover {
    background: var(--Brand-500, #9E77ED); /* 호버 시 배경색 변화 */
}

.btn-view:disabled {
    background: #E9D7FE;
    border-color: #E9D7FE;
    color: #FFFFFF;
    cursor: not-allowed;
}

.btn-view.completed:disabled,
.btn-view.completed {
    background: var(--Success-50, #ECFDF3);
    border-color: var(--Success-50, #ECFDF3);
    color: var(--Success-700, #027A48);
}
.btn-more {
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--White, #FFF);
    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% */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: fit-content;
}


.type-select-btn {
    background-color: #FFFFFF;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.type-select-btn:hover {
    border-color: #7F56D9;
    background-color: #F9F5FF;
    
}

.type-select-btn h5 {
    color: #344054;
    font-weight: 600;
}

.type-select-btn p {
    font-size: 14px;
}

/* 주소 검색 버튼 스타일 */
.btn-outline-secondary {
    background-color: white;
    border: 1px solid #D0D5DD;
    color: #344054;
}

.btn-outline-secondary:hover {
    background-color: #F9FAFB;
    border: 1px solid #D0D5DD;
    color: #344054;
}

/* 주소 검색 모달 크기 조정 */
.address-search-modal {
    max-width: 800px;  /* 원하는 넓이로 조정 가능 */
    width: 100%;
}

/* 검색 입력 영역 넓이 조정 */
.search-input-wrapper {
    display: flex; /* Ensure the wrapper uses flexbox */
    align-items: center; /* Align items vertically in the center */
    width: 100%;
}

.search-input-wrapper .input-group {
    width: 100%;
}

.search-input-wrapper .form-control {
    flex: 1;  /* Input takes maximum space */
    margin-right: 0; /* Remove any right margin */
    border: none; /* 테두리 없음 */
    outline: none; /* 포커스 시 아웃라인 없음 */
    font-size: 16px; /* 폰트 크기 */
}

/* 검색 버튼 최소 넓이 설정 */
.search-input-wrapper .btn {
    margin-left: 0; /* Remove any left margin */
    display: flex; /* Ensure button is a flex container */
    align-items: center; /* Center the icon vertically */
    min-width: auto;  /* 버튼이 내용만큼만 차지하도록 설정 */
    white-space: nowrap;
}

/* 전체 폰트 설정 */
body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
    background-color: #F9FAFB;
    margin: 0;
    
}

/* Header 스타일 */
.container-mybox {
    background-color: #FFFFFF;
    display: flex;
    max-width: 1280px;
    padding: 32px;
    flex-direction: column;
    gap: 32px;
    flex: 1 0 0;
    margin: 0 auto;
    margin-bottom: 60px; /* 푸터 높이만큼 마진 추가 */
    height: auto; /* 높이를 자동으로 조정 */
    min-height: calc(100vh - 60px); /* 푸터 높이를 제외한 최소 높이 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.navbar {
    background-color: #6941C6 !important;  /* 상단 네비게이션 배경색 강제 적용 */
    padding: 1rem;
}

.navbar-nav .nav-link {
    color: #ffffff !important;  /* 네비게이션 링크 흰색 강제 적용 */
    font-weight: bold;
    margin-right: 1rem;
    position: relative;
    padding: 10px 12px;
    text-decoration: none;
}

.navbar-nav .nav-link:hover {
    color: #eeeeee !important;  /* 링크 호버 색상 */
}

.navbar-nav .nav-link.active {
    background-color: #7f56d9;
    color: #f4ebff;
    border-radius: 6px;
    padding: 10px 20px;
}

.navbar-brand img {
    width: 150px;  /* 로고 크기 */
}
/* 네비게이션 바 */
.navbar {
    background-color: #7F56D9;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-nav {
    list-style-type: none;
    display: flex;
    padding: 0;
}

.nav-right {
    display: flex;
    align-items: center;
    margin-left: auto; /* 오른쪽으로 밀기 */
}


.notification-btn {
    background: none;
    border: none;
    margin-right: 16px;
}

.username {
    color: #ffffff;
}


/* 메인 타이틀 및 텍스트 스타일 */
h1, h3 {
    color: #333333;
    font-weight: bold;
    margin-bottom: 1rem;
}

h2 {
    color: #333333;
    font-weight: bold;
}

p {
    color: #666666;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* 체크리스트 스타일 */
.checkitems {
    margin-top: 2rem;
}

.checkitems .rowcheckmark {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.checkitems .checkmark_one {
    background-color: #7F56D9;  /* 버튼 배경색 #7F56D9 */
    border: none;
    border-radius: 50%;
    padding: 0.5rem;
    margin-right: 1rem;
}

.checkitems .checkmark_one img {
    width: 20px;
    height: 20px;
}

.checkitems p {
    color: #333333;
    font-size: 1rem;
    margin: 0;
}

/* 로그인 모듈 스타일 */
.login-module {
    width: 360px; /* 고정 너비 */
    background-color: #ffffff;
}

/* 전체 배경색을 설정하고 가운데 정렬을 위해 컨테이너 스타일 */
body, html {
    height: 100%;
    margin: 0;
}
/* 푸터 스타일 */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    color: #344054;
    height: 60px; /* 푸터 높이 고정 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--Gray-200, #EAECF0);
    z-index: 1000;
}
/* 환영 메시지 스타일 */
.welcome-message {
    font-size: 14px; /* 폰트 크기 설정 */
    color: #344054; /* 텍스트 색상 설정 */
    margin: 0 0 1rem 0; /* 아래쪽 마진 추가 */
}

/* 레이블 스타일 */
.id-label, .password-label {
    font-size: 14px; /* 폰트 크기 설정 */
    color: #344054; /* 텍스트 색상 설정 */
}

/* 이용 약관 동의 모듈 스타일 */
.terms-module {
    width: 360px; /* 고정 너비 */
    background-color: #ffffff; /* 배경색 설정 */
}
/* 체크박스 그룹 스타일 */
.checkbox-group {
    display: flex;
    align-items: center;
}

/* 커스텀 체크박스 스타일 */
.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-input {
    width: 16px; /* 체크박스 너비 */
    height: 16px; /* 체크박스 높이 */
    appearance: none !important;
    background-color: #ffffff; /* 체크박스 배경색 */
    border: 1px solid #D0D5DD; /* 체크박스 테두리 색상 */
    border-radius: 4px !important; /* 체크박스 모서리 둥글게 - 항상 강제 적용 */
    margin-right: 8px; /* 체크박스와 레이블 간격 */
    position: relative; /* 크 모양을 위한 위치 설정 */
    transition: none !important; /* 트랜지션 효과 제거 */
    outline: none !important; /* 클릭 시 아웃라인도 제거 */
}

/* 체크된 상태 스타일 */
.checkbox-input:checked {
    background-color: #F9F5FF; /* 체크된 배경색 */
    border-color: #7F56D9; /* 체크된 테두리 색상 */
    border-radius: 4px !important; /* 추가: 체크 시에도 사각형 유지 - 항상 강제 적용 */
}

/* 호버, 포커스, 액티브 상태에서도 사각형 유지 */
.checkbox-input:hover,
.checkbox-input:focus,
.checkbox-input:active,
.checkbox-input:checked:hover,
.checkbox-input:checked:focus,
.checkbox-input:checked:active {
    border-radius: 4px !important; /* 항상 사각형 - 강제 적용 */
    outline: none !important;
}

/* 특정 상태 조합에서도 확실히 사각형 유지 */
.checkbox-input:not(:checked),
.checkbox-input:not(:checked):hover,
.checkbox-input:not(:checked):focus,
.checkbox-input:not(:checked):active,
.checkbox-input:checked,
.checkbox-input:checked:hover,
.checkbox-input:checked:focus,
.checkbox-input:checked:active {
    border-radius: 4px !important;
    transition: none !important;
}

/* 체크 표시 추가 */
.checkbox-input:checked::after {
    content: ''; /* 체크 마크의 내용 */
    position: absolute; /* 체크 마크의 위치 설정 */
    left: 4px; /* 체크 마크의 왼쪽 여백 */
    top: 2px; /* 체크 마크의 위쪽 여백 */
    width: 5px; /* 체크 표시의 너비 */
    height: 8px; /* 체크 표시의 높이 */
    border: solid #7F56D9; /* 체크 표시의 색상 */
    border-width: 0 2px 2px 0; /* 체크 표시의 두께 조정 */
    transform: rotate(45deg); /* 체크 모양을 대각선으로 회전 */
    border-radius: 0 !important; /* 체크 표시는 완전한 사각형 - 항상 강제 적용 */
    transition: none !important;
}

/* 체크박스 레이블 스타일 */
.checkbox-label {
    color: #344054; /* 텍스트 색상 */
}

.consent-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px !important;
    border: 1px solid #D0D5DD;
    appearance: none !important;
    background-color: #ffffff;
    position: relative;
}

.consent-checkbox:checked {
    background-color: #F9F5FF !important;
    border-color: #7F56D9 !important;
    border-radius: 4px !important;
}

.consent-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 2px;
    width: 5px;
    height: 8px;
    border: solid #7F56D9;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    border-radius: 0 !important;
}


/* 구분선 스타일 */
.divider {
    background-color: #EAECF0; /* 구분선 색상 */
    width: 360px; /* 너비 */
    height: 1px; /* 높이 */
    margin: 16px 0; /* 위아래 여백 */
}

/* 약관 목록 스타일 */
.terms-list {
    list-style-type: none; /* 리스트 스타일 제거 */
    padding-left: 0; /* 왼쪽 패딩 제거 */
}

.terms-list li {
    margin-bottom: 16px; /* 항목 간격 */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 하이퍼링크 스타일 */
a {
    color: #7F56D9; /* 하이퍼링크 색상 */
    text-decoration: none; /* 밑줄 제거 */
}

a:hover {
    text-decoration: underline; /* 호버 시 밑줄 추가 (선택 사항) */
}

.terms-agreement {
    display: flex;
    flex-direction: column; /* 세로 방향으로 배치 */
    justify-content: space-between; /* 위쪽과 아래쪽 요소 간의 공간 균등 배분 */
    height: 100%; /* 전체 높이를 차지하게 설정 */
}

.agree-button {
    background-color: #7F56D9; /* 버튼 배경색 */
    color: #ffffff; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 제거 */
    border-radius: 4px; /* 모서리 둥글게 */
    padding: 10px 20px; /* 여백 */
    font-size: 16px; /* 폰트 크기 */
    cursor: pointer; /* 포인터 커서 */
    margin-top: auto; /* 자동 마진으로 하단으로 밀기 */
}

.agree-button:hover {
    background-color: #6b46b0; /* 호버 시 배경색 변경 */
}


/* 메인 컨테이너 */
.main-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 상단 정렬로 변경 */
    padding: 32px 0;
    background-color: #FFFFFF;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.main-container-v {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 32px;
    background-color: #FFFFFF;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    gap: 24px;
    overflow-y: auto; /* 세로 스크롤 추가 */
    min-height: calc(100vh - 60px); /* 푸터 높이를 제외한 최소 높이 */
}

.main-container-v > * {
    width: 100%;
    margin-bottom: 16px;
}

.content-header {
    margin-bottom: 32px; /* 간격 설정 */
}

.heading-title {
    color: #101828;
    margin-bottom: 16px; /* 간격 설정 */
}

.content-box {
	display: flex;
padding: 24px 0px 96px 0px;
flex-direction: column;
justify-content: center;
align-items: left;
gap: 64px;
align-self: stretch;
    background-color: white;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content-header {
    margin-bottom: 32px; /* 간격 설정 */
}

.heading-title {
    color: #101828;
    margin-bottom: 16px; /* 간격 설정 */
}

.content-text {
    color: #344054;
    margin-bottom: 32px; /* 간격 설정 */
}

.feature-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 32px; /* 간격 설정 */
}

.feature-list li {
    margin-bottom: 12px; /* 간격 설정 */
}

.call-to-action {
    margin-bottom: 40px; /* 간격 설정 */
}

.title {
    color: #101828; /* 타이틀 색상 */
    margin-bottom: 32px; /* 아래 여백 */
}

.description {
    color: #344054; /* 본문 색상 */
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 2rem;

}

.features {
    list-style-type: none; /* 리스트 스타일 제거 */
    padding: 0; /* 패딩 제거 */
    margin-bottom: 32px; /* 아래 여백 */
}

.features li {
    margin-bottom: 16px; /* 각 항목 사이 여백 */
}


.features li {
    margin-bottom: 16px; /* 각 항목 사이 여백 */
    display: flex; /* Flexbox로 설 */
    align-items: center; /* 수직 정렬 */
}

.check-icon {
    margin-right: 12px; /* 이미지와 텍스트 사이의 간격 */
}
.ngs-title {
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: 44px; /* 122.222% */
    letter-spacing: -0.72px;
    color: #101828; /* 제목 색상, 필요에 따라 조정 */
    margin-bottom: 32px; /* 하단 여백, 필요에 따라 조정 */
}
.patient-list-title {
    font-size: 24px; /* 타이틀 폰트 크기 */
    font-weight: 700; /* 타이틀 폰트 두께 */
    text-align: left; /* 좌측 정렬 */
	margin: 0;
}

.table-container {
    margin-top: 0; /* 여백 제거 */
    overflow-x: auto; /* 테이블이 화면 너비를 초과할 경우 스크롤 추가 */
    border: 1px solid var(--Gray-200, #EAECF0);
    border-radius: 8px;
    padding: 0 0 24px 0; /* 상단 0, 좌우 0, 하단 24px */
}

.button-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 73px;
    padding: 0px 24px;
    box-sizing: border-box;
}


.search-container {
    margin-top: 32px; /* 타이틀과 검색창 간의 여백 */
}

.search-box {
    display: flex; /* 플렉스 박스로 설정 */
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left:14px;
	padding-right:14px;
    height: 44px; /* 검색창 높이 */
    justify-content: center; /* 가운데 정렬 */
    align-items: center; /* 수직 가운데 정렬 */
    border-radius: 8px; /* 둥글 */
    border: 1px solid var(--Gray-300, #D0D5DD); /* 테두리 색상 */
    background: var(--White, #FFF); /* 배경색 */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /* 그림자 효과 */
}

.search-icon {
    margin-right: 8px; /* 아이콘과 입력창 간의 간격 */
}

.search-input {
    width: 100%; /* 입력창 너비 100% */
    height: 100%; /* 입력창 높이 100% */
    border: none; /* 테두리 없음 */
    outline: none; /* 포커스 시 아웃라인 없음 */
    font-size: 16px; /* 폰트 크기 */
}
.table {
    width: 100%;
    border-collapse: collapse;
}

table th,
.table th,
th.th,
.th {
    height: 44px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--Gray-200, #EAECF0) !important;
    background: var(--Gray-50, #F9FAFB) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    color: #101828;
    text-align: left;
}


table td,
.table td,
td.td,
.td {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #101828;
    padding: 12px 24px;
}

.pagination {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    align-items: center;
    justify-content: center; /* 가운데 정렬 추가 */
}

.page-btn {
    padding: 8px 12px;
    border: 1px solid #D0D5DD;
    background-color: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-radius: 4px;
}

.page-btn:hover {
    background-color: #f0f4f8;
}

.page-btn:focus {
    outline: none;
    border-color: #007BFF;
}



/* 회원가입 모듈 스타일 */
.join-module {
    background-color: #FFFFFF;
    max-width: 600px;
    margin: 2rem auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 제목 섹션 스타일 */
.title-section {
    text-align: center;
    margin-bottom: 2rem;
}

.join-type-module {
    background-color: #FFFFFF;
    max-width: 500px;
    width: 100%;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1);
    border-radius: 12px;
}


/* Input focus styles */
input:not([type="radio"]):focus,
select:focus,
textarea:focus {
    border: 1px solid #D6BBFB !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #F4EBFF !important;
    outline: none !important;
}

/* 라디오 버튼 스타일 */
input[type="radio"] {
    accent-color: #7F56D9;
}

/* For input groups (like address search) */
.input-group input:focus {
    z-index: 4;  /* 포커스 시 input이 버튼 위로 오도록 */
}

/* Address Search Modal Styles */
.address-search-modal {
    width: 640px;
    padding: 24px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}

.modal-content {
    border-radius: 12px;
    background: #FFF; /* 배경색 */
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); /* 그림자 */
    display: flex;
    width: 400px;
    padding: 24px; /* var(--spacing-3xl, 24px) */
    flex-direction: column;
    align-items: left;
    gap: 32px;
}
.modal-body img {
    width: 50px; /* 이미지 크기 조정 */
    height: auto;
    margin-right: 16px; /* 이미지와 텍스트 간격 */
}
.modal-body h5 {
    color: #344054; /* 타이틀 색상 */
    margin: 24px 0 0 0; /* 위쪽 마진 24px 추가 */
}
.modal-body p {
    color: #344054; /* 본문 색상 */
    font-size: 14px; /* 본문 폰트 크기 */
    margin: 0; /* 기본 여백 제거 */
}
.status-table {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}
.status-item {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}


.address-search-modal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 32px;
    padding: 0;
}


/* Breadcrumb style */
.breadcrumb {
    color: #667085;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px;
}
  /* Breadcrumb 박스 스타일 */
  .breadcrumb-box {
            display: flex;
            padding: 32px;
            align-items: flex-start;
            gap: 8px;
            align-self: stretch;
            border-bottom: 1px solid var(--Gray-200, #EAECF0);
            background: var(--White, #FFF);
            justify-content: left; /* 가운데 정렬 */
        }

/* Page layout */
 /* 전체 레이아웃 스타일 */
 .main-layout {
            display: flex;
            width: 1280px; /* 전체 너비 */
            margin: 0 auto; /* 가운데 정렬 */
            align-items: flex-start; /* 내부 내용은 좌측 정렬 */
        }

.left-box {
    display: flex;
    width: 312px; /* 고정 너비 */
    padding: 32px;
    flex-direction: column;
    align-items: flex-start; /* 좌측 정렬 */
    gap: 32px;
    flex-shrink: 0;
    align-self: stretch;
    border-right: 1px solid var(--Gray-200, #EAECF0);
    background: var(--White, #FFF);
}

.left-box h1 {
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px;
}

.left-box img {
    width: 32px;
    height: auto;
    margin-right: 16px;
    margin-left: 16px;
    align-items: right;
}

.left-box p {
    color: #344054;
    font-size: 16px;
    font-weight: 400;
}

.left-box .label {
    color: #344054;
    font-size: 14px;
    font-weight: 800;
}

.right-box {
    display: flex;
    flex: 1; /* 비율로 전체 공간을 채우도록 설정 */
    flex-direction: column;
    align-items: flex-start; /* 좌측 정렬 */
    gap: 16px;
    border-radius: 8px;
    background: var(--White, #FFF);
    padding: 32px; /* 패딩 추가 */
    border-bottom: 1px solid var(--Gray-200, #EAECF0);
}

.right-box .label {
    color: #344054;
    font-size: 14px;
    font-weight: 800;
}

.right-box .card {
    display: flex;
    width: 100%; /* 부모 요소의 너비에 맞게 조정 */
    max-width: 600px; /* 최대 너비 520px */
    align-items: flex-start; /* align-items를 flex-start로 수정 */
    gap: 16px;
    border-radius: 8px;
    border: 1px solid var(--Brand-500, #9E77ED);
    background: var(--White, #FFF);
    padding: 16px;
    justify-content: space-between;
}

.right-box .card img {
    width: 16px;
    height: auto;
}

.right-box .card p {
    color: #344054;
    font-size: 14px;
    font-weight: 400;
}

.right-box .card .button {
    border-radius: 8px;
    border: 1px solid var(--Brand-600, #7F56D9);
    background: var(--Brand-600, #7F56D9);
}
.right-box_ngs{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}
.progress-on{
    display: flex;
    width: 52px;
    height: 52px;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    gap: 10px; 
    border-radius: 30px;
    background: var(--Brand-600, #7F56D9);
    color: var(--Brand-50, #F9F5FF);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 140%;
    padding: 4px 12px;
}
.progress-off{
    display: flex;
    width: 52px;
    height: 52px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 30px;
    background: #F9F5FF;
    color: var(--Brand-500, #9E77ED);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.progress-container {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    margin-left: 35px;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.progress-circle {
    display: flex;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

}

.progress-on {
    background: var(--Brand-600, #7F56D9);
    color: var(--Brand-50, #F9F5FF);
    font-weight: 800;
    line-height: 140%;
    padding: 4px 12px;
}

.progress-off {
    background: #F9F5FF;
    color: var(--Brand-500, #9E77ED);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.progress-line {
    width: 20px;
    height: 2px;
    background-color: #E9ECEF;
}

.progress-step:last-child .progress-line {
    display: none;
}
 /* 이름 스타일 */
 .patient-name {
    font-size: 30px;
    font-weight: 800;
    line-height: 38px; /* 126.667% */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap; /* 줄바꿈 방지 */
}

/* 환자 번호 스타일 */
.patient-id {
    color: #344054;
    font-size: 16px;
    font-weight: 400;
}

/* 나이 스타일 */
.label {
    font-size: 14px;
    font-weight: 800;
}

.value {
    font-size: 16px;
}

.delete-icon {
    width: 32px;  /* 아이콘 너비 */
    height: 32px; /* 아이콘 높이 */
    display: inline-block; /* 인라인 블록으로 설정 */
}


.common-card {
    border-radius: 16px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--White, #FFF);
    padding: 16px;
    width: calc(100% - 40px); /* Adjust width to match right-box-card */
    margin-left: 20px; /* Align with right-box-card */
    min-width: 300px; /* Set minimum width for the card */
}
.chip-container {
    display: flex;
    gap: 8px; /* Space between chips */
    margin: 8px 0; /* Margin for the chip container */
}

.chip {
    border-radius: 50px; /* Make the chip circular */
    padding: 6px 12px; /* Padding for the chip */
    font-size: 14px; /* Font size for the chip */
    display: inline-block; /* Display inline */
}
.step {
    color: #93370D; /* Text color */
    font-weight: 800; /* Font weight */
    font-size: 18px; /* Font size */
    padding: 10px; /* Padding for better spacing */
    border-radius: 50px; /* Rounded background */
    display: inline-block; /* Make it inline-block to fit the content */
    position: relative; /* Positioning for the background */
}
.phase-1 {
    background-color: #FFFAEB; /* Background color for 1상 */
}

.phase-2 {
    background-color: #FEF0C7; /* Background color for 2상 */
}

.phase-3 {
    background-color: #FEDF89; /* Background color for 3상 */
}

.phase-4 {
    background-color: #FEC84B; /* Background color for 4상 */
}

.name {
    color: #101828; /* Text color */
    font-weight: 800; /* Font weight */
    font-size: 18px; /* Font size */
    margin-bottom: 24px; /* Spacing below the name field */
}

.chip-container {
    margin-bottom: 24px; /* Spacing below the chip container */
}

.created_by,
.approve-date,
.trial-organ,
.eligibility_age,
.eligibiltiy_gender,
.inclusion_criteria {
    margin-bottom: 8px; /* Spacing between these fields */
    font-size: 14px; /* Font size for these fields */
}

.welcome-title {
    color: var(--Gray-900, #101828);
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    line-height: 38px; /* 126.667% */
    margin-bottom: 32px;
}

    /* 버튼 그룹 스타일 */
    .btn-group {
        display: inline-flex;
        border: 1px solid #D0D5DD;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
        border-radius: 8px;
        background: #FFF;
        overflow: hidden;
    }

    /* 버튼 기본 스타일 */
    .btn-group .btn {
        border: 1px solid #D0D5DD;
        background: #FFF;
        padding: 10px 14px;
        color: #344054;
        font-size: 14px;
        font-weight: 800;
        line-height: 20px;
        margin: 0;
    }

    /* 첫 번째 버튼의 margin-left 제거 */
    .btn-group .btn:first-child {
        margin-left: 0;
    }

    /* Stage 버튼 특정 스타일 */
    .stage-btn {
        width: 90px !important;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 8px;
        min-width: 90px;
    }

   /* 검색창 스타일 */
.form-select,
.form-control {
    width: 100%;
    height: 44px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 10px 14px;
    text-align: left;
}

.form-select:focus,
.form-control:focus {
    border-color: #7F56D9;
    box-shadow: 0 0 0 4px rgba(127, 86, 217, 0.1);
    text-align: left;
}

/* 파일 컨트롤 스타일 */
.file-control {
    display: flex;
    height: 36px;
    justify-content: flex-start; /* 컨텐츠를 왼쪽으로 정렬 */
    align-items: center; /* 세로 방향으로 가운데 정렬 */
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 10px 14px;
    text-align: left; /* 텍스트를 좌측 정렬 */
}

    .btn-group .btn:hover {
        background: #F9FAFB;
        border: 1px solid #D0D5DD !important;
        z-index: 1;
    }
    .btn-custom-purple:hover {
    background-color: #6941C6;
    color: white;
    }
    /* 선택된 버튼 스타일 */
    .btn-check:checked + .btn {
        background: #F4EBFF !important;
        border: 1px solid #7F56D9 !important;
        z-index: 2;
    }

    /* 선택된 버튼의 hover 효과 */
    .btn-check:checked + .btn:hover {
        background: #F4EBFF !important;
        border: 1px solid #7F56D9 !important;
    }

/* 모달 내용 왼쪽 정렬 */
.modal-body {
        text-align: left; /* 전체 모달 내용 왼쪽 정렬 */
    }
/* 암종 검색창 넓이 조정 */
 .search-input {
        width: 100%; /* 100%로 설정 */
        max-width: 500px; /* 최대 너비 설정 */
    }

    /* 기타 의견 입력창 넓이 조정 */
    .comment-input {
        width: 100%; /* 100%로 설정 */
        max-width: 500px; /* 최대 너비 설정 */
    }
/*파일첨부버튼*/
.modal-fileupload {
    display: flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--White, #FFF);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--Gray-700, #344054);
    /* Text sm/Bold */
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px; /* 142.857% */
}

.delete-file-btn {
    display: flex;
    height: 36px;
    align-items: flex-start;
    padding: 8px 8px;
    justify-content: left;
    align-items: left;
    gap: 8px;
    border-radius: 8px;
    background: var(--White, #FFF);
    color: var(--Gray-700, #344054);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px; /* 142.857% */
}

.custom-guide {
    width: 560px; /* Fixed width for larger screens */
    margin: 0 auto; /* Center the paragraph */
    line-height: 150%; /* Set line height to 150% */
    color: var(--Gray-600, #475467);
    text-align: center;
    font-size: 16px; /* Text md/Regular */
    font-style: normal;
    font-weight: 400;
    margin-bottom: 16px; /* Add 32px margin below the paragraph */
}

.browsing-section {
    display: flex;
    width: 100%;
    flex-direction: column;
    height: 720px; /* Fixed height for the modal */
}

.browsing-list {
    flex: 1; /* Allow the list to grow and fill available space */
    overflow-y: auto; /* Enable vertical scrolling */
}

.browsing-item {
    display: flex;
    width: 100%;
    padding: 12px 16px 12px 12px;
    align-items: center;
    gap: 16px;
    align-self: stretch; /* Make the item stretch to fill the width */
    color: var(--Gray-900, #101828);
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    border-radius: 8px;
    background: #FFFFFF;
    cursor: pointer; /* Change cursor to pointer */
}

.browsing-item:hover {
    background: var(--Gray-50, #F9FAFB);
}

.browsing-item.selected {
    background: var(--Gray-100, #F2F4F7); /* Background when selected */
}

.browsing-item.selected .check-icon {
    display: inline; /* Show check icon when selected */
}

.sub-list {
    padding-left: 44px; /* Indent sub-lists */
}

/* Fixed button area */
.fixed-button-area {
    position: sticky; /* 위치를 부모 요소의 바닥에 고정 */
    bottom: 0; /* 부모 요소의 하단에 고정 */
    left: 0;
    right: 0;
    padding: 16px; /* 약간의 패딩 추가 */
    background: white; /* 버튼 영역에 흰색 배경을 추가 */
    z-index: 10; /* 다른 콘텐츠보다 위에 위치하도록 설정 */
}

.fixed-button {
    width: 100%; /* Full width button */
    height: 44px; /* Button height */
    background: var(--Gray-900, #101828);
    color: white; /* Button text color */
    border: none; /* Remove border */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Change cursor to pointer */
}

.modal-dialog {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 1024px; /* Set the maximum width of the modal */
    width: 100%; /* Ensure it takes full width up to the max */
    margin: auto; /* Center the modal horizontally */
}

.modal-content {
    padding: 24px; /* Set the padding for the modal content */
    position: relative; /* Ensure the position is relative for absolute positioning of footer */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
}

.input-group .form-control {
    height: 44px; /* Set a fixed height for the input field */
    border-radius: 0.25rem; /* Match the button's border radius */
}

.input-group .btn {
    height: 44px; /* Set the same height for the button */
    border-radius: 0.25rem; /* Match the input field's border radius */
}

/*환자상세페이지 */


/* Breadcrumb style */
.breadcrumb {
    color: #667085;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px;
}
  /* Breadcrumb 박스 스타일 */
  .breadcrumb-box {
            display: flex;
            padding: 32px;
            align-items: flex-start;
            gap: 8px;
            align-self: stretch;
            border-bottom: 1px solid var(--Gray-200, #EAECF0);
            background: var(--White, #FFF);
            justify-content: left; /* 가운데 정렬 */
        }



/* Page layout */
 /* 전체 레이아웃 스타일 */
 .main-layout {
            display: flex;
            width: 1280px; /* 전체 너비 */
            margin: 0 auto; /* 가운데 정렬 */
            align-items: flex-start; /* 내부 내용은 좌측 정렬 */
        }

.left-box {
    display: flex;
    width: 312px; /* 고정 너비 */
    padding: 32px;
    flex-direction: column;
    align-items: flex-start; /* 좌측 정렬 */
    gap: 32px;
    flex-shrink: 0;
    align-self: stretch;
    border-right: 1px solid var(--Gray-200, #EAECF0);
    background: var(--White, #FFF);
}

.left-box h1 {
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px;
}

.left-box img {
    width: 32px;
    height: auto;
    margin-right: 16px;
    margin-left: 16px;
    align-items: right;
}

.left-box p {
    color: #344054;
    font-size: 16px;
    font-weight: 400;
}

.left-box .label {
    color: #344054;
    font-size: 14px;
    font-weight: 800;
}

.right-box {
    display: flex;
    flex: 1; /* 비율로 전체 공간을 채우도록 설정 */
    flex-direction: column;
    align-items: flex-start; /* 좌측 정렬 */
    gap: 16px;
    border-radius: 8px;
    background: var(--White, #FFF);
    padding: 32px; /* 패딩 추가 */
    border-bottom: 1px solid var(--Gray-200, #EAECF0);
}

.right-box .label {
    color: #344054;
    font-size: 14px;
    font-weight: 800;
}

.right-box .card {
    display: flex;
    width: 100%; /* 부모 요소의 너비에 맞게 조정 */
    max-width: 600px; /* 최대 너비 520px */
    align-items: flex-start; /* align-items를 flex-start로 수정 */
    gap: 16px;
    border-radius: 8px;
    border: 1px solid var(--Brand-500, #9E77ED);
    background: var(--White, #FFF);
    padding: 16px;
    justify-content: space-between;
}

.right-box .card img {
    width: 16px;
    height: auto;
}

.right-box .card p {
    color: #344054;
    font-size: 14px;
    font-weight: 400;
}

.right-box .card .button {
    border-radius: 8px;
    border: 1px solid var(--Brand-600, #7F56D9);
    background: var(--Brand-600, #7F56D9);
}

 /* 이름 스타일 */
 .patient-name {
            font-size: 30px;
            font-weight: 800;
            line-height: 38px; /* 126.667% */
            width: 196px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            white-space: nowrap; /* 줄바꿈 방지 */

        }

        /* 환자 번호 스타일 */
        .patient-id {
            color: #344054;
            font-size: 16px;
            font-weight: 400;
        }

        /* 나이 스타일 */
        .label {
            font-size: 14px;
        }

        .value {
            font-size: 16px;
        }

        .delete-icon {
            width: 32px;  /* 아이콘 너비 */
            height: 32px; /* 아이콘 높이 */
            display: inline-block; /* 인라인 블록으로 설정 */
        }

       

        .btn-view {
            border-radius: 8px;
            border: 1px solid var(--Brand-600, #7F56D9);
            background: var(--Brand-600, #7F56D9);
            color: #FFFFFF; /* 버튼 텍스트 색상 */
            padding: 8px 16px; /* 버튼 패딩 */
            cursor: pointer; /* 커서 포인터로 변경 */
            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /* 그림자 효과 */
            transition: background 0.3s; /* 배경색 변화에 대한 트랜지션 */
            font-weight: 800;
            margin-top: 16px;
        }

        .btn-view:hover {
            background: var(--Brand-500, #9E77ED); /* 호버 시 배경색 변화 */
        }
        .btn-more {
            border-radius: 8px;
            border: 1px solid var(--Gray-300, #D0D5DD);
            background: var(--White, #FFF);
            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% */
        }

        .common-card {
            border-radius: 16px;
            border: 1px solid var(--Gray-200, #EAECF0);
            background: var(--White, #FFF);
            padding: 16px;
            width: calc(100% - 40px); /* Adjust width to match right-box-card */
            margin-left: 20px; /* Align with right-box-card */
            min-width: 300px; /* Set minimum width for the card */
        }

        .chip-container {
            display: flex;
            gap: 8px; /* Space between chips */
            margin: 8px 0; /* Margin for the chip container */
        }

        .chip {
            border-radius: 50px; /* Make the chip circular */
            padding: 6px 12px; /* Padding for the chip */
            font-size: 14px; /* Font size for the chip */
            display: inline-block; /* Display inline */
        }

        .step {
            color: #93370D; /* Text color */
            font-weight: 800; /* Font weight */
            font-size: 18px; /* Font size */
            padding: 10px; /* Padding for better spacing */
            border-radius: 50px; /* Rounded background */
            display: inline-block; /* Make it inline-block to fit the content */
            position: relative; /* Positioning for the background */
        }
        .phase-1 {
        background-color: #FFFAEB; /* Background color for 1상 */
    }

    .phase-2 {
        background-color: #FEF0C7; /* Background color for 2상 */
    }

    .phase-3 {
        background-color: #FEDF89; /* Background color for 3상 */
    }

    .phase-4 {
        background-color: #FEC84B; /* Background color for 4상 */
    }

    .name {
        color: #101828; /* Text color */
        font-weight: 800; /* Font weight */
        font-size: 18px; /* Font size */
        margin-bottom: 24px; /* Spacing below the name field */
    }

    .chip-container {
        margin-bottom: 24px; /* Spacing below the chip container */
    }

    .created_by,
    .approve-date,
    .trial-organ,
    .eligibility_age,
    .eligibiltiy_gender,
    .inclusion_criteria {
        margin-bottom: 8px; /* Spacing between these fields */
        font-size: 14px; /* Font size for these fields */
    }

.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.no-results-title {
    color: var(--Gray-900, #101828);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 28px;
}

.no-results-description {
    width: 480px;
    color: var(--Gray-700, #344054);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
    
.infobox {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    gap: 16px;
    border-top: 1px solid var(--Gray-200, #EAECF0);
    align-items: center;
    padding: 16px 0;
}

.infobox-title {
    color: var(--Gray-700, #344054);
    width: 200px;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    align-items: center;
    flex-shrink: 0; /* ✨ 너비 고정! */
}

.infobox-content {
    color: var(--Gray-900, #101828);
    width: 100%;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: flex-start;
}

.infobox-multiline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.infobox-multiline .infobox-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.infobox-multiline .infobox-content .form-control {
    width: 100%;
    max-width: 100%;
    height: 44px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 16px;
}

.infobox-multiline .infobox-content .btn-custom-purple {
    width: 100%;
    height: 44px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #F9F5FF;
    background: #F9F5FF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: #6941C6;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    white-space: nowrap;
    margin: 0;
}

.infobox-content .form-control {
    width: 100%;
    max-width: 400px;
    height: 44px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 16px;
}

.infobox-content .btn-custom-purple {
    height: 44px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #F9F5FF;
    background: #F9F5FF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: #6941C6;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    white-space: nowrap;
    margin: 0;
    min-width: 120px;
}


/* 모바일 환경에서의 스타일 */
@media screen and (max-width: 768px) {
    .container-mybox {
        padding: 16px;
        gap: 16px;
        margin-bottom: 48px; /* 모바일에서는 푸터 높이 줄임 */
        min-height: calc(100vh - 48px);
    }

    .footer {
        height: 48px; /* 모바일에서 푸터 높이 줄임 */
        padding: 8px;
    }

    .footer p {
        font-size: 12px; /* 모바일에서 폰트 크기 줄임 */
        margin: 0;
    }

    .infobox {
        flex-direction: column;
        gap: 8px;
        padding: 16px 0;
    }

    .infobox-title {
        width: 100%;
    }

    .infobox-content {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .infobox-content .form-control {
        max-width: 100%;
    }

    .infobox-multiline .infobox-content {
        flex-direction: column;
        gap: 8px;
    }

    .infobox-multiline .infobox-content .form-control,
    .infobox-multiline .infobox-content .btn-custom-purple {
        width: 100%;
        max-width: 100%;
    }

    .main-container-v {
        padding: 0px 16px;
        min-height: calc(100vh - 48px); /* 모바일에서는 푸터 높이를 48px로 조정 */
    }
}

.status-chip {
    display: inline-flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    text-align: center;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    width: fit-content;
    white-space: nowrap;
}

.status-chip.recommended {
    background: var(--Warning-50, #FFFAEB);
    color: var(--Warning-700, #B54708);
}

.status-chip.reviewing {
    background: var(--Purple-50, #F4F3FF);
    color: var(--Purple-700, #5925DC);
}

.status-chip.analyzing {
    background: var(--Success-50, #ECFDF3);
    color: var(--Success-700, #027A48);
}

/* 휴대폰 번호 수정 모달 스타일 */
.phone-edit-modal {
    display: flex;
    min-width: 360px;
    max-width: 640px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    border-radius: 12px;
    background: var(--White, #FFF);
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}

.phone-edit-modal h2 {
    color: #101828;
    text-align: left;
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 800;
    line-height: 32px;
}

.phone-edit-modal p {
    color: var(--Gray-700, #344054);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

.phone-edit-modal .input-group {
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.phone-edit-modal .form-control {
    width: 100%;
    height: 44px;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 16px;
}

.phone-edit-modal .btn-secondary{
    min-width: 120px;
    height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #F9F5FF;
    background: #F9F5FF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    font-weight: 800;
    color: #6941C6;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    margin: 0;
}

.phone-edit-modal .input-group-text {
    min-width: 120px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #F9F5FF;
    border: 1px solid #F9F5FF;
    color: #6941C6;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    white-space: nowrap;
    margin: 0;
}

.phone-edit-label {
    color: var(--Gray-700, #344054);

/* Text sm/Regular */
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

.btn-delete {
    display: flex;
    width: 143px;
    height: 44px;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--Error-500, #F04438);
    background: var(--Error-500, #F04438);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--White, #FFF);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px;
}
.deletepatient-btn{
    background: var(--White, #FFF);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border: none;
}

/* 약관 페이지 전용 스타일 */
.terms-header {
    background: linear-gradient(135deg, #7F56D9 0%, #B692F6 100%);
    padding: 24px 32px;
    border-radius: 12px 12px 0 0;
    border-bottom: 2px solid #7F56D9;
}

.terms-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: left;
    justify-content: space-between;
}

.terms-version {
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #E9ECEF;
}

.terms-container {
    max-width: 1200px;
    margin: 32px auto;
    background: var(--White, #FFF);
    border-radius: 12px;
    box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
    overflow: hidden;
}

.terms-content {
    padding: 32px;
    color: #344054;
    min-height: 600px;
    display: flex;
    align-items: left;
    justify-content: left;
}

.terms-placeholder {
    text-align: left;
    color: #9CA3AF;
    font-size: 18px;
    font-weight: 500;
}

.terms-placeholder h3 {
    color: #101828;
    margin-top: 24px;
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
}

.terms-placeholder p {
    color: #344054;
    margin-bottom: 8px;
    line-height: 1.7;
    font-weight: 400;
    font-size: 14px;
}

.terms-breadcrumb-box {
    width: calc(1280px);
    margin: 0 auto;
    padding: 16px 0;
}

.terms-breadcrumb {
    margin: 0;
    background: transparent;
    padding: 0;
}

.terms-breadcrumb-item {
    color: #6B7280;
    font-size: 14px;
}

.terms-breadcrumb-item.active {
    color: #374151;
    font-weight: 600;
}

.terms-breadcrumb-item + .terms-breadcrumb-item::before {
    content: ">";
    color: #D1D5DB;
    margin: 0 8px;
}

.btn-back {
    background: var(--Primary-600, #7F56D9);
    color: var(--White, #FFF);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
    margin-top: 24px;
}

.btn-back:hover {
    background: #6941C6;
    color: var(--White, #FFF);
    text-decoration: none;
}

.btn-back img {
    width: 16px;
    height: 16px;
}

/* 약관 페이지 반응형 디자인 */
@media (max-width: 768px) {
    .terms-container {
        margin: 16px;
        border-radius: 8px;
    }
    
    .terms-header {
        padding: 20px 24px;
        border-radius: 8px 8px 0 0;
    }
    
    .terms-title {
        font-size: 20px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .terms-content {
        padding: 24px;
        min-height: 400px;
    }
    
    .terms-breadcrumb-box {
        width: 100%;
        padding: 16px;
    }
}