main.css

/* main.css */
html, body {
    overflow: auto; /* 스크롤 가능 */
    height: auto; /* 높이 자동 조정 */
}

.new-container {
    display: flex; /* 플렉스 박스 사용 */
    padding: 0; /* 패딩 제거 */
    height: auto; /* 높이를 자동으로 조정 */
    min-height: calc(100vh - 100px); /* 최소 높이 설정 (푸터 높이 고려) */
}

body {
    background: var(--Gray-100, #F2F4F7);
    font-family: 'Pretendard', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    font-size: 16px; /* 기본 폰트 크기 */
}

/* 모든 입력창의 포커스 스타일 통일 */
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 {
    z-index: 10; /* 다른 요소보다 위에 배치 */
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    background: var(--White-100, #F9FAFB);
    border-bottom: 1px solid var(--Gray-200, #EAECF0); /* 올바른 변수 정의 */
}

.nav-container {
    display: flex;
    width: 1200px;
    height: 72px;
    justify-content: space-between;
    align-items: center;
}


.logo-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo {
    width: 32px; /* 로고의 너비는 자동으로 설정 */
}

/* 1200px 이하 화면 크기에서 반응형 스타일 적용 */
@media (max-width: 1200px) {
    .top-nav {
        padding: 12px 32px;
    }
    .nav-container {
        width: 100%; /* 너비를 화면에 맞게 확장 */
    }

    .logo-area {
        flex: 1; /* 로고 영역 확장 */
        justify-content: flex-start; /* 로고 왼쪽 정렬 */
    }

    .login-area {
        flex: 1; /* 로그인 영역 확장 */
        justify-content: flex-end; /* 로그인 텍스트 우측 정렬 */
        gap: 12px;
    }

    .login-text {
        display: inline; /* 텍스트 표시 */
    }

    .user-info {
        display: none; /* 사용자 정보 숨김 (로그인 상태에 따라 표시) */
    }
    .my-row{
        height: auto;
    }
}

/* 드롭다운 메뉴 스타일 */
.dropdown-menu {
    display: none; /* 기본적으로 숨김 */
    position: absolute;
    top: 100%; /* 부모 요소 바로 아래 */
    right: auto;
    left: 0; /* 왼쪽 정렬 */
    background: var(--White-100, #F9FAFB);
    border: 1px solid var(--Gray-200, #EAECF0);
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 150px;
    transform: translateY(0); /* 중앙 정렬 해제 */
}
.profile-link {
    text-decoration: none; /* 밑줄 제거 */
    color: inherit; /* 부모 요소의 색상 상속 */
    cursor: pointer; /* 마우스 커서를 포인터로 변경 */
}

.profile-link:hover {
    text-decoration: none; /* Hover 상태에서도 밑줄 제거 */
    color: inherit; /* Hover 상태에서도 부모 색상 유지 */
}

.dropdown-menu.hidden {
    display: none; /* 기본적으로 숨김 */
}

.dropdown-menu ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-menu li {
    padding: 10px;
    font-size: 14px;
    color: var(--Gray-700, #344054);
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-menu li:hover {
    background-color: var(--Gray-100, #F2F4F7);
}

/* 추가: 기본 로고 및 로그인 스타일 */
.logo-area {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 좌측 정렬 */
    gap: 8px; /* 로고와 텍스트 간 간격 */
}

.login-area {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 우측 정렬 */
    color: var(--Gray-900, #101828);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    gap: 12px;
}


.letters {
    width: 62px;
    margin-left: 4px; /* 로고와 레터 간격 */
}

.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;
}

.main-detail {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;    
    width: 1200px;
    min-height: 880px;
    background: var(--White-100, #F9FAFB);
    box-shadow: 1px 0px 0px 0px #EAECF0 inset, -1px 0px 0px 0px #EAECF0 inset;
}
/*마이페이지에서 사용*/
.main-my{
    display: flex;
    width: 1064px;
    height: auto;
    padding: 48px;
    margin: 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    flex: 1 0 0;
    background: var(--White-100, #F9FAFB);
    box-shadow: 1px 0px 0px 0px #EAECF0 inset, -1px 0px 0px 0px #EAECF0 inset;
}

/* 반응형: 태블릿 (768px ~ 1200px) */
@media (max-width: 1200px) {
    .main-my {
        padding: 12px;
        gap: 24px;
        width: 100vw;
    }
    .main2nd-my {
        max-width: 90%; /* 화면 너비의 90%로 줄어듦 */
        padding: 16px; /* 내부 여백 축소 */
    }
    .my-row {
        flex: 1;
        flex-direction: column; /* 수직 정렬 */
        align-items: flex-start; /* 왼쪽 정렬 */
        padding: 12px 0;
        gap: 8px; /* 요소 간 간격 */
    }

    .my-label, .my-vbox {
        flex: 1; /* 고정 너비 해제, 남은 공간을 유연하게 차지 */
        width: auto; /* 자동 너비 */
        white-space: normal;
    }
    .my-box {
        flex: 1; /* 고정 너비 해제, 남은 공간을 유연하게 차지 */
        justify-content: flex-start; /* 왼쪽 정렬 */
    }
    .button1-my {
        width: auto; /* 버튼이 화면에 맞게 확장 */
        justify-content: center;
    }
    .button3-my {
        width: 100%; /* 버튼이 화면에 맞게 확장 */
        justify-content: center;
    }
    .desc-my{
        width: auto;
        white-space: normal;
        padding: 0;
    }
}
/* 반응형: 모바일 (768px 이하) */
@media (max-width: 768px) {
    .main-my {
        width: 90%;
        padding: 16px!important;
        gap: 12px;
    }
    .main2nd-my {
        max-width: 100%; /* 화면 전체 너비 사용 */
        padding: 12px!important; /* 내부 여백 더 축소 */
    }

    .my-row {
        padding: 12px 0;
        gap: 8px;
        min-height: 40px; /* 최소 높이 줄이기 */
    }

    .my-label, .my-box, .my-vbox {
        flex: 1 !important; /* 모바일에서 너비를 자동 조정 */
        width: 100%; /* 화면 가로 크기에 맞춤 */
        white-space: normal;
    }
    .my-container{
        padding: 0px!important;
    }

    .button1-my {
        padding: 6px 12px; /* 버튼 크기 축소 */
        font-size: 12px; /* 폰트 크기 축소 */
    }
    .button2-my{
        width: 100%;
    }
    .desc-my{
        width: 100%;
        white-space: normal;
        padding: 0;
        margin: 0;
    }

    .title {
        font-size: 24px; /* 글자 크기 조정 */
        line-height: 32px; /* 줄 간격 조정 */
        word-wrap: break-word !important; /* 단어 줄바꿈 */
        text-align: center; /* 중앙 정렬 */
    }

    .thank-you-message p {
        font-size: 14px; /* 글자 크기 조정 */
        line-height: 22px; /* 줄 간격 조정 */
        word-wrap: break-word !important; /* 단어 줄바꿈 */
        text-align: center; /* 중앙 정렬 */
    }

    .thank-you-message img {
        max-width: 100%; /* 이미지가 화면 너비를 넘지 않도록 */
        height: auto; /* 이미지 비율 유지 */
    }
    .box1200 {
        width: 100%; /* 부모 요소의 너비를 채움 */
        max-width: 100%; /* 최대 너비 제한 해제 */
        padding: 0 16px; /* 좌우 여백 추가 */
        box-sizing: border-box; /* 패딩 포함 너비 계산 */
    }
    .main-content {
        width: 100%; /* 화면 너비에 맞게 확장 */
        max-width: 100%; /* 최대 너비 제한 해제 */
        padding: 24px 16px; /* 패딩 조정 */
        gap: 16px; /* 요소 간 간격 축소 */
        min-height: auto; /* 최소 높이 제한 제거 */
        box-sizing: border-box; /* 패딩 포함 너비 계산 */
    }
    .footer-content span {
        white-space: normal; /* 줄바꿈 허용 */
        word-break: break-word; /* 단어 줄바꿈 허용 */
    }

    .footer-content {
        column-count: 1; /* 단일 열로 변경 */
        gap: 16px; /* 요소 간 간격 */
        text-align: center; /* 중앙 정렬 */
    }
    .language-selector {
        display: flex;
        align-items: center; /* 세로 중앙 정렬 */
        text-align: center; /* 중앙 정렬 */
        justify-content: center; /* 중앙 정렬 */
        height: 28px;
    }
    .language-selector2 {
        display: flex;
        align-items: center; /* 세로 중앙 정렬 */
        text-align: center; /* 중앙 정렬 */
        justify-content: center; /* 중앙 정렬 */
        height: 28px;
    }
    .new-text-box h1 {
        font-size: 24px; /* 모바일에서 폰트 크기 축소 */
        line-height: 1.4; /* 줄 간격 조정 */
    }

    .new-title-bold {
        font-size: 24px; /* 강조 텍스트 크기 조정 */
        line-height: 1.4;
    }
    .new-background {
        padding: 0px; /* 패딩 제거 */
    }
    .info-list {
        width: 90%; /* 너비를 화면 크기에 맞춤 */
        height: auto; /* 높이를 콘텐츠에 맞춤 */
        margin: 16px auto; /* 상하 중앙 정렬 */
        background-size: contain; /* 배경 이미지 크기 조정 */
    }


}
.thank-you-message{
    color: var(--Gray-700, #344054); 
    font-size: 16px; 
    font-style: normal; 
    font-weight: 400; 
    line-height: 24px;
    text-align: center; 
    margin-top: 32px;
}
.main2nd-my{
    max-width: 1200px; /* PC 화면에서 최대 너비 */
    width: 100%; /* 부모 컨테이너의 너비를 따라감 */
    display: flex;
    padding: 0px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
}
.my-header{
    width: 100%;
    display: flex;
    padding-bottom: 1px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-bottom: #EAECF0;
}
.my-container{
    display: flex;
    flex-direction: column; /* 세로 정렬 */
    gap: 16px; /* 각 행 간 간격 */
    width: 100%;
    padding: 24px;
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
}
.my-row {
    justify-content: space-between; /* 좌우 끝 정렬 */
    align-items: flex-start; /* 수직 중앙 정렬 */
    width: 100%; /* 컨테이너 너비 */
    padding: 16px 0px;
    border-bottom: 1px solid #EAECF0; /* 하단 보더 1px */
    box-sizing: border-box;
    min-height: auto; /* 최소 높이 설정 */
}
.my-box span {
    display: inline-flex; /* 플렉스 컨텍스트 생성 */
    align-items: center; /* 수직 중앙 정렬 */
    line-height: normal; /* 필요 시 줄 높이 초기화 */
    height: 36px;
}
.my-title{
    color: var(--Gray-900, #101828);
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px; /* 126.667% */
}
.my-label{
    flex: 0 0 280px; /* 고정 너비로 설정 */
    text-align: left; /* 텍스트 왼쪽 정렬 */
    align-self: center; /* 수직 중앙 정렬 */
    color: var(--Gray-700, #344054);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px; /* 142.857% */
    white-space: nowrap; /* 줄바꿈 방지 */
}
.my-box{
    display: flex; /* 수평 정렬 */
    flex: 1; /* 남은 공간 차지 */
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* 버튼과 텍스트 끝 정렬 */
    align-items: center;
    gap: 24px;
    color: var(--Gray-900, #101828);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    height: 100%; /* 부모 컨테이너 높이를 기준으로 중앙 정렬 */
}
.my-vbox{
    display: flex; /* 수평 정렬 */
    flex: 1; /* 남은 공간 차지 */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    color: var(--Gray-900, #101828);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    height: 100%; /* 부모 컨테이너 높이를 기준으로 중앙 정렬 */
}
.button1-my{
    white-space: nowrap;
    display: flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--Brand-50, #EEF4FF);
    background: var(--Brand-50, #EEF4FF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--Brand-700, #3538CD);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px; /* 142.857% */
    cursor: pointer; /* 커서 포인터 */
}
.button2-my{
    display: flex;
    width: 200px;
    height: 44px;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer; /* 커서 포인터 */
    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-100, #F9FAFB);
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    
}
.button3-my{
    white-space: nowrap;
    display: flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--Brand-50, #EEF4FF);
    background: var(--Brand-50, #EEF4FF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--Brand-700, #3538CD);
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 20px; /* 142.857% */
    cursor: pointer; /* 커서 포인터 */
    width: 100%;

}
.desc-my{
    width: 100%;
    white-space: normal; /* 줄바꿈 허용 */
    overflow: visible; /* 내용이 잘리지 않도록 설정 */
    word-wrap: break-word; /* 긴 단어를 줄바꿈 */
    overflow-wrap: break-word; /* 긴 단어 줄바꿈 */
    word-break: break-word; /* 구형 브라우저 호환 */
    color: var(--Gray-500, #667085);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    align-self: stretch;
    box-sizing: border-box;
}
/*환자 목록 에서 사용*/
.table-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 48px 32px;
    width: 100%;
    box-sizing: border-box;
    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; /* 커서 포인터 */
    width: 100%; /* 버튼 너비 100% */
    padding: 12px; /* 패딩 조정 */
}

.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: 100vw;
    min-height: 100vh; /* 모바일에서 동적으로 높이를 조정 */
    height: auto; /* 높이 자동 조정 */
    padding: 16px; /* 모바일 화면에서 여백 추가 */
    box-sizing: border-box; /* 패딩 포함 높이 계산 */
    display: flex;
    justify-content: center; /* 중앙 정렬 */
    align-items: center; /* 중앙 정렬 */
    background-color: #EEF4FF; /* 배경색 설정 */
    background-image: url('img/bg.png'); /* 배경 이미지 설정 */
    background-size: cover; /* 배경 이미지 크기 조정 */
}


/* 태블릿 및 더 큰 화면에 대한 수정 */
@media (min-width: 1200px) {
    .new-background {
        width: calc(100vw - 16px); /* 스크롤바 크기를 제외한 너비 계산 */
        margin: 0; /* 좌측 정렬 유지 */
}
}

.new-container {
    display: flex; /* 좌우로 나뉘어진 블록 */
    height: 100%;
    border-radius: 20px; /* 모서리 둥글게 */
    align-items: center; /* 가로 중앙 정렬 */
    max-width: 1200px; /* 최대 너비 설정 */
    margin: 0 auto; /* 화면 중앙 정렬 */
}

.new-detail {
    display: flex; /* 좌우 정렬 */
    flex-direction: row; /* 자식 요소를 가로로 배치 */
    justify-content: flex-start; /* 좌측부터 정렬 */
    align-items: flex-start; /* 상단 정렬 */
    width: 100%; /* 부모 컨테이너의 전체 너비 */
    height: 100%;
    background: var(--White-100, #F9FAFB); /* 배경색 */
    max-width: 1200px; /* 최대 너비 설정 */
    flex: 1 0 0;
   
}

.parent-container {
    display: flex; /* 자식 요소를 플렉스 레이아웃으로 */
    gap: 16px; /* 자식 요소 간 간격 */
    align-items: stretch; /* 자식 요소 높이 동일하게 */
}

.new-detail,
.main-detail {
    flex: 1; /* 자식 요소가 동일한 비율로 확장 */
}

.detail-left {
    width: 300px; /* 좌측 블록 고정 너비 */
    height:100%;
    display: flex;
    flex-direction: column; /* 콘텐츠 세로 정렬 */
    align-items: flex-start; /* 좌측 정렬 */
    gap: 8px; /* 내부 콘텐츠 간격 */
    padding: 32px;
    flex-shrink: 0;
    background: var(--White-100, #F9FAFB);
}
.name-block{
    display: flex;
    justify-content: space-between;
    align-items: center; /* 수직 중앙 정렬 추가 */
    width: 100%; /* 부모 너비에 맞게 확장 */
}
.patient-name{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    color: var(--Gray-900, #101828);
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 38px; /* 126.667% */
}
.patient-number{
    color: var(--Gray-700, #344054);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.patient-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    color: var(--Gray-700, #344054);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin-top: 24px;
}
.patient-block{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    align-self: stretch;
}
.detail-right{
    flex: 1; /* 우측 블록은 좌측 블록의 3배 너비 */
    background: var(--White-100, #F9FAFB); /* 필요시 배경 추가 */
    display: flex;
    padding: 32px 0px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    flex: 1 0 0;
    align-self: stretch;
    justify-content: flex-start; /* 상단 정렬 */ 
}

.new-left-block {
    height: 100%;
    flex-direction: column; /* 세로 방향으로 정렬 */
    justify-content: flex-start; /* 상단 정렬 */
}

.left-block{
    padding: 70px 40px 60px 80px; /* 상, 우, 하, 좌 (순서대로 설정) */
    height: 100%;
    height: auto; /* 높이를 자동으로 조정 */
    display: flex; /* 플렉스 박스 사용 */
    flex-direction: column; /* 세로 방향으로 정렬 */
    background: var(--gradient-brand-80060090-deg, linear-gradient(63deg, #2D31A6 16.72%, #444CE7 83.39%)); /* 배경색 설정 */
    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 {
    height: 100%; /* 높이를 100%로 설정 */
    background: var(--White-100, #F9FAFB); /* 배경색 */
    display: flex; /* 플렉스 박스 사용 */
    flex-direction: column; /* 세로 방향으로 정렬 */
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); /* 그림자 효과 */
    border-radius: 0 20px 20px 0;
}

.info-list {
    width: 379px;
    height: 176px;
    flex-shrink: 0;
    background-image: url('img/bgdot.png'); /* 배경 이미지 설정 */
    background-position: right bottom; /* 우측 45px, 하단 위치 */
    background-repeat: no-repeat; /* 배경 이미지 반복 방지 */
    display: flex; /* 플렉스 레이아웃 */
    justify-content: flex-end; /* 내용 우측 정렬 */
    align-items: center; /* 수직 중앙 정렬 (필요 시) */
    margin-left: auto; /* 부모 컨테이너에서 우측으로 밀기 */
}

.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;
    word-wrap: break-word;
}

.logo-container {
    display: flex; /* 플렉스 박스 설정 */
    align-items: center; /* 수직 중앙 정렬 */
    margin-bottom: 10px; /* 하단 여백 설정 */
}

.logo-container img {
    height: auto; /* 비율 유지 */
}

.right-block {
    display: inline-flex;
    padding: 115px 100px;
    flex-direction: column; /* 세로 방향으로 정렬 */
    justify-content: center; /* 중앙 정렬 */
    align-items: center; /* 중앙 정렬 */
    color: var(--Gray-700, #344054); /* 텍스트 색상 */
    height: 100%;
    box-sizing: border-box; /* 패딩 포함 너비 계산 */
}

.login-container {
    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;
}
.age-label{
    color: var(--Gray-700, #344054);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.login-input {
    width: 100%; /* 인풋창 너비 100% */
    min-width: 240px; /* 최소 너비 설정 */
    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 {
    position: relative; /* 상대 위치 설정 */
    margin-top: auto; /* 푸터를 아래에 붙이기 */
    width: 100%; /* 푸터 너비 100% */
    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;
}

.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 60px;
    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: 100%;
    max-width: 1200px;
    justify-content: center;
    padding: 16px;
}
.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{
    width: 100%;
    max-width: 1200px;
    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: 16px;
    font-style: normal;
    font-weight: 700;
    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 {
    border-collapse: collapse; /* 테두리 중복 제거 */
    width: 100%;
    table-layout: auto; 
}

.table-container {
    display: block;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    margin: 0 auto;
    min-height: 300px; /* 최소 높이 설정 */
    background: var(--White-100, #F9FAFB); /* 빈 테이블의 배경색 */
    border-radius: 12px; /* 좌상, 우상, 우하, 좌하 순서 */
}


.th {
    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: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 줄 높이 */
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
}

.td {
    padding: 16px 24px; /* 셀 여백 */
    text-align: left; /* 텍스트 왼쪽 정렬 */
    border-bottom: 1px solid var(--Gray-200, #EAECF0); /* 하단 테두리 */
    color: var(--Gray-900, #101828); /* 텍스트 색상 */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 줄 높이 */
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
    border-right: none;
    vertical-align: middle; /* 수직 가운데 정렬 */
}

/* 기본 행 스타일 */
.table tbody tr {
    cursor: pointer; /* 클릭 가능 */
    transition: background-color 0.3s ease;
    border-bottom: 1px solid transparent; /* 기본 경계선 투명 처리 */
    height: 80px;
}

/* 행에 포커스되거나 호버될 때 배경색 변경 */
.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; /* 경계선 배경색과 동일 */
}
.table colgroup col:nth-child(1),
.table colgroup col:nth-child(2),
.table colgroup col:nth-child(3),
.table colgroup col:nth-child(4),
.table colgroup col:nth-child(5),
.table colgroup col:nth-child(6),
.table colgroup col:nth-child(7) {
    min-width: auto;
}

@media screen and (max-width: 768px) {
    /* 테이블 셀 기본 스타일 */
    .table td {
        display: flex;
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400; /* 기본 폰트 웨이트 */
    }

    /* 첫 번째와 두 번째 td만 볼드 처리 */
    .table tr td:nth-child(1),
    .table tr td:nth-child(2) {
        font-weight: 700;
    }

    /* 드롭다운 관련 스타일 수정 */
    .dropdown-container {
        position: relative;
        width: 100%;
    }

    .status-label {
        font-size: 16px;
        line-height: 24px;
    }

    /* 드롭다운 컨테이너 수정 */
    .dropdown-container {
        position: relative;
        width: 100%;
    }

    /* 드롭다운 메뉴 아이템 스타일 */
    .dropdown-menu li {
        padding: 12px 16px;
        font-size: 16px;
        line-height: 24px;
        color: var(--Gray-700, #344054);
        cursor: pointer;
    }

    /* 환자 등록 모달 성별 선택 버튼 수정 */
    .modal-register .gender-btn {
        height: 36px; /* 높이 고정 */
        font-size: 16px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-register .button-group {
        margin: 16px 0;
        height: 36px; /* 버튼 그룹 높이도 고정 */
    }

    /* 페이지네이션 수정 */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .prev-btn,
    .next-btn {
        min-width: 100px;
        height: 40px;
        padding: 8px 16px;
    }
}
.pagination {
    display: flex;
    margin-top: 16px;
    margin-bottom: 16px;
    justify-content: center;
    align-items: center;
    border-collapse: collapse; /* 테두리 중복 제거 */
    border-radius: 0 0 20px 20px; /* 좌상, 우상, 우하, 좌하 순서 */
    max-width: 1200px;
}

.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;
}

/* 드롭다운 컨테이너 */
.dropdown-container {
    position: relative;
    display: inline-block;
    color: var(--Gray-900, #101828);
    font-size: 16px;
    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 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-content label.password {
    display: block; /* 라벨을 블록 요소로 변경 */
    margin-top: 20px; /* 라벨과 입력 필드 사이 간격 */
    margin-bottom: 6px; /* 라벨과 입력 필드 사이 간격 */
    font-size: 14px;
    color: var(--Gray-700, #344054);
    font-weight: 400;
}

.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:right;
    align-self: flex-end; /* 아이콘을 우측 정렬 */
    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;
}
.password {
    color: var(--Gray-700, #344054);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.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% */
}
.user-info {
    display: flex; /* 수평 정렬 */
    align-items: center;
    position: relative; /* 부모 요소를 기준으로 드롭다운 메뉴 위치 지정 */
    gap: 8px; /* 이미지와 텍스트 사이 간격 */
}

.user-name {
    line-height: initial;
}

.profile-icon {
    width: 32px; /* 이미지 너비 */
    height: 32px; /* 이미지 높이 */
    border-radius: 50%; /* 프로필 이미지가 원형일 경우 */
    object-fit: cover; /* 이미지 비율 유지 */
}
.breadcrumb-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 32px;
    width: 100%; /* 부모 요소 너비에 맞추기 */
    box-sizing: border-box; /* 패딩 포함 너비 계산 */
}
.breadcrumb-box{
    display: flex;
    height: 88px;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    align-self: stretch;
    background: var(--White-100, #F9FAFB);
}

.breadcrumb-content {
    display: inline-flex; /* 화살표와 텍스트를 수평 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    gap: 8px; /* 화살표와 텍스트 간 간격 */
    text-decoration: none; /* 밑줄 제거 */
    color: var(--Gray-700, #344054);
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    cursor: pointer; /* 마우스 포인터 설정 */
}

.breadcrumb-content:hover {
    color: var(--Gray-700, #344054); /* 호버 시 텍스트 색상 변경 */
}

.breadcrumb-content img {
    display: block; /* 이미지를 블록 요소로 설정 */
}
.styled-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    border-radius: 8px;
    font-size: 14px;
    color: var(--Gray-900, #101828);
    outline: none;
    transition: border-color 0.2s ease-in-out;
}

.styled-input:focus {
    border-color: #444CE7; /* 포커스 시 테두리 색상 */
}

.gender-select {
    appearance: none; /* 기본 화살표 제거 */
    -webkit-appearance: none; /* 웹킷 브라우저 화살표 제거 */
    -moz-appearance: none; /* 파이어폭스 화살표 제거 */
    background-image: url('img/dropdown-arrow.svg'); /* 화살표 이미지 */
    background-repeat: no-repeat; /* 화살표 반복 제거 */
    background-position: right 12px center; /* 화살표 위치 설정 */
    background-size: 16px; /* 화살표 크기 */
    padding-right: 36px; /* 화살표 공간 확보 */
    width: 100%; /* 전체 너비 */
    padding: 8px 12px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    border-radius: 8px;
    font-size: 14px;
    color: var(--Gray-900, #101828);
    outline: none;
    transition: border-color 0.2s ease-in-out;
}

/* 포커스 상태 */
.gender-select:focus {
    border-color: #444CE7; /* 포커스 시 테두리 색상 변경 */
}
.pat05-title{
    color: var(--Gray-900, #101828);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 28px; /* 155.556% */
}
.pat05-desc{
    color: var(--Gray-700, #344054);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}
.pat05-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(--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% */
    cursor: pointer; /* 커서 포인터 */
    min-width: 290px;
    height: auto;
}
.result-buttongroup{
    display: flex;
    gap: 8px;
}
.download-button{
    align-items: flex-start;
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    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: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    cursor: pointer; /* 커서 포인터 */
}
/* download-button이 포함된 td에 대한 추가 스타일 */
.download-button-container {
    display: flex; /* 플렉스 박스 사용 */
    justify-content: flex-start; /* 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    padding: 10px; /* 추가 패딩 */
    border: 1px solid var(--Gray-200, #EAECF0); /* 테두리 추가 */
    margin: 8px 0; /* 위아래 여백 추가 */
    gap: 8px;
}
.print-button{
    align-items: flex-start;
    display: flex;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    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% */
    cursor: pointer; /* 커서 포인터 */
}

.edit-patient{
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
}
@media (max-width: 768px) {
    .new-left-block {
        width: 100%; /* 각 블록이 전체 너비를 차지 */
    }
    .new-right-block {
        width: 100%; /* 각 블록이 전체 너비를 차지 */
        border-radius: 0 0 12px 12px;
    }

    .left-block {
        border-radius: 12px 12px 0 0; /* 상단만 둥글게 */
    }

    .login-container {
        max-width: 100%; /* 부모 컨테이너의 너비에 맞춤 */
        margin: 0 auto; /* 중앙 정렬 */
        padding: 12px; /* 내부 여백 */
    }

    .button-container {
        flex-direction: column; /* 버튼을 세로로 배치 */
        gap: 8px; /* 버튼 간 간격 */
    }
    .info-list {
        width: 90%; /* 너비를 화면 크기에 맞춤 */
        height: auto; /* 높이를 콘텐츠에 맞춤 */
        margin: 16px auto; /* 상하 중앙 정렬 */
        background-size: contain; /* 배경 이미지 크기 조정 */
    }
    .footer-box {
        flex-direction: column; /* 요소를 세로로 정렬 */
        justify-content: center; /* 중앙 정렬 */
        align-items: center; /* 중앙 정렬 */
        gap: 16px; /* 요소 간 간격 추가 */
        padding: 16px; /* 내부 여백 설정 */
        text-align: center; /* 텍스트 중앙 정렬 */
        background-color: var(--Gray-100, #F2F4F7); /* 배경색 유지 */
        border-bottom-left-radius: 12px; /* 좌측하단 둥글게 */
        border-bottom-right-radius: 12px; /* 우측하단 둥글게 */
        box-sizing: border-box; /* 패딩 포함 너비 계산 */
        width: 100%;
    }

    .footer-content {
        display: flex;
        flex-direction: column; /* 세로 정렬 */
        gap: 8px; /* 항목 간 간격 */
        text-align: center; /* 중앙 정렬 */
        width: 100%; /* 전체 너비 사용 */
        padding: 0px;
    }

    .footer-content span, .footer-content a {
        font-size: 14px; /* 폰트 크기 축소 */
        line-height: 20px; /* 줄 간격 조정 */
        word-break: break-word; /* 긴 텍스트 줄바꿈 */
    }

    .footer-link {
        display: inline-block; /* 링크를 인라인 블록으로 설정 */
        margin: 0 auto; /* 중앙 정렬 */
        padding: 4px 8px; /* 내부 여백 조정 */
        font-size: 14px; /* 폰트 크기 축소 */
        text-align: center; /* 중앙 정렬 */
        color: var(--Gray-500, #667085); /* 텍스트 색상 */
        text-decoration: none; /* 밑줄 제거 */
    }

    .footer-link:hover {
        background: var(--Gray-200, #E4E7EC); /* 호버 시 배경색 */
        color: var(--Gray-700, #344054); /* 호버 시 텍스트 색상 */
    }
}

/* 테이블 관련 스타일 */
.table-container {
    width: 100%;
    display: block; /* 테이블을 블록으로 설정하여 스크롤 가능하게 */
    overflow-x: auto;
}

.table {
    width: 100%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.dropdown-container.active .dropdown-menu {
    display: block;
}

/* 모바일 대응 스타일 */
@media screen and (max-width: 768px) {
    /* 기존 모바일 스타일 유지 */
    .download-button {
        padding: 10px 16px; /* 패딩 조정 */
        font-size: 16px; /* 폰트 크기 조정 */
        justify-content: flex-start; /* 중앙 정렬 */
    }
    /* 테이블 셀 모두 볼드 처리 */
    .table td {
        display: flex;
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
    }

    /* 드롭다운 메뉴 위치 수정 */
    .dropdown-container {
        position: relative;
        width: 100%;
    }

    /* 페이지네이션 수정 */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    .prev-btn,
    .next-btn {
        min-width: 100px;
        height: 40px;
        padding: 8px 16px;
    }

    /* 환자 등록 모달 모바일 최적화 */
    .modal-register {
        width: 90%;
        max-width: none;
        margin: 20px;
        padding: 20px;
    }

    .modal-register h2 {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 20px;
    }

    .modal-register .input-label {
        font-size: 16px;
        margin-top: 16px;
        margin-bottom: 8px;
    }

    .modal-register .styled-input {
        height: 44px;
        font-size: 16px;
        padding: 10px 12px;
    }

    .modal-register .button-group {
        margin: 16px 0;
    }

    .modal-register .gender-btn {
        height: 44px;
        font-size: 16px;
    }

    .modal-register .modal-actions {
        margin-top: 24px;
        gap: 8px;
    }

    .modal-register .cancel-button,
    .modal-register .registerOnly-button,
    .modal-register .confirm-button {
        height: 44px;
        font-size: 16px;
        padding: 10px 16px;
    }

    /* 테이블 기본 설정 */
    .table-container {
        width: 100%;
        overflow-x: hidden;
    }

    /* TR 숨김 처리 */
    .table thead {
        display: none;
    }

    /* 테이블 레이아웃 설정 */
    .table, .table tbody {
        display: block;
        width: 100%;
    }

    .table tr {
        display: block;
        margin-bottom: 16px;
        padding: 12px;
        background: var(--White-100, #F9FAFB);
    }
    .table tbody tr {
        height: auto; /* 모바일에서는 높이를 자동으로 조정 */
    }
    /* TD 기본 스타일 */
    .table td {
        display: block;
        width: 100%;
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        box-sizing: border-box;
    }

    /* 1,2번째 TD만 볼드처리 */
    .table tr td:nth-child(1),
    .table tr td:nth-child(2) {
        font-weight: 700;
    }

    /* 마지막 TD의 border 제거 */
    .table td:last-child {
        border-bottom: none;
    }

    /* data-label 숨김 처리 */
    .table td::before {
        display: none;
    }

    /* 검색창 아이콘 위치 수정 */
    .input-container {
        position: relative;
    }

    .search-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
    }

    /* 드롭다운 메뉴 스타일 수정 */
    .dropdown-container {
        position: relative;
    }

    .dropdown-menu li {
        padding: 12px 16px;
        font-size: 16px;
        line-height: 24px;
    }

    /* 환자 등록 모달 성별 선택 버튼 수정 */
    .modal-register .gender-btn {
        height: 36px;
        padding: 0 16px;
    }

    .modal-register .button-group {
        height: 36px;
    }

    /* 드롭다운 관련 스타일 통합 및 수정 */
    .dropdown-container {
        position: relative;
        width: 100%;
        padding: 8px 12px;
        display: flex;
        align-items: center;
    }

    .status-label {
        font-size: 16px;
        line-height: 24px;
        flex: 1;
    }

    .dropdown-button {
        padding: 4px;
    }

    .dropdown-menu li {
        padding: 12px 16px;
        font-size: 16px;
        line-height: 24px;
        color: var(--Gray-700, #344054);
    }

    .dropdown-container {
        padding: 0; /* 모바일에서 패딩을 0으로 설정 */
    }

    .pagination {
        gap: 0; /* 버튼 간격을 0으로 설정 */
    }

    .page-btn {
        padding: 8px 12px; /* 버튼의 패딩을 줄여서 너비를 작게 설정 */
        font-size: 12px; /* 폰트 크기 조정 */
    }

    .prev-btn,
    .next-btn {
        min-width: 80px; /* 이전 및 다음 버튼의 최소 너비 조정 */
        height: 40px; /* 버튼 높이 조정 */
        padding: 8px 12px; /* 패딩 조정 */
    }

    .prev-btn,
    .next-btn {
        height: 40px; /* 버튼 높이를 페이지네이션 숫자 버튼과 같게 조정 */
        padding: 8px 12px; /* 패딩 조정 */
    }

    .page-btn {
        height: 40px; /* 페이지 버튼 높이 조정 */
        padding: 8px 12px; /* 패딩 조정 */
        font-size: 12px; /* 폰트 크기 조정 */
    }

    .search-patient {
        width: 100%; /* 검색창 너비를 100%로 설정 */
        max-width: none; /* 최대 너비 제한 해제 */
    }
}

@media screen and (min-width: 820px) {
    .dropdown-container {
        white-space: nowrap; /* 줄바꿈 방지 */
    }
    .table td:nth-child(2) {
        white-space: nowrap; /* 줄바꿈 방지 */
    }
}

@media screen and (max-width: 768px) {
    .modal {
        width: 90%; /* 모달 너비를 90%로 설정 */
        max-width: none; /* 최대 너비 제한 해제 */
        padding: 16px; /* 내부 여백 조정 */
    }

    .modal-content {
        width: 100%; /* 모달 내용의 너비를 100%로 설정 */
        padding: 16px; /* 내부 여백 조정 */
    }

    .table td {
        border-bottom: 1px solid var(--Gray-200, #EAECF0); /* 모든 셀에 하단 테두리 추가 */
    }

    .table tbody tr:last-child td {
        border-bottom: none; /* 마지막 행의 셀 하단 테두리 제거 (필요 시) */
    }
}

.table {
    border-collapse: collapse; /* 테두리 중복 제거 */
    width: 100%;
}

.table td {
    border: none; /* 기본적으로 테두리 없음 */
}

.table tr {
    border-bottom: 1px solid var(--Gray-200, #EAECF0); /* 각 행에 하단 테두리 추가 */
}



.table tr td:last-child {
    border-right: 1px solid var(--Gray-200, #EAECF0); /* 마지막 셀에 오른쪽 테두리 추가 */
}

/* 반응형 스타일 */
@media screen and (max-width: 768px) {
    .new-container {
        padding: 0px; /* 모바일에서 패딩 조정 */
        min-height: calc(100vh - 100px); /* 최소 높이 설정 (푸터 높이 고려) */
        flex-direction: column; /* 좌우가 아닌 위아래로 쌓이도록 설정 */
        width: 100%; /* 전체 화면 너비로 확장 */
        max-width: none; /* 최대 너비 제한 해제 */
        
    }
    .left-block {
        padding: 20px;
    }
    .new-left-block,
    .new-right-block {
        height: auto; /* 높이를 자동으로 조정 */
        display: flex; /* 플렉스 박스 사용 */
        flex-direction: column; /* 세로 방향으로 정렬 */
        gap: 12px;
        box-sizing: border-box;
    }

    .right-block {
        width: 100%;
        padding:8px;
    }
    .footer-box {
        padding: 16px 0px; /* 모바일에서 푸터 패딩 조정 */
    }

    .login-container {
        width: 100%; /* 로그인 컨테이너 너비 100% */
        margin: 0 auto; /* 중앙 정렬 */
    }

    .login-input {
        width: 100%; /* 인풋창 너비 100% */
        min-width: 240px; /* 최소 너비 설정 */
    }
}

/* 태블릿 화면 최적화 */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    body {
        font-size: 15px; /* 태블릿에서 폰트 크기 조정 */
    }

    .new-container {
        padding: 24px; /* 태블릿에서 패딩 조정 */
    }

    .login-container {
        width: 80%; /* 로그인 컨테이너 너비 조정 */
        margin: 0 auto; /* 중앙 정렬 */
    }

    .button-normal {
        width: auto; /* 버튼 너비 자동 조정 */
    }
}

/* PC 화면 최적화 */
@media screen and (min-width: 1201px) {
    body {
        font-size: 16px; /* 기본 폰트 크기 */
    }

    .new-container {
        padding: 32px; /* PC에서 패딩 조정 */
    }
}

/* PAT05 전용 모바일 최적화 스타일 */

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
    .new-container {
        display: flex;
        flex-direction: column; /* 세로 방향으로 정렬 */
        padding: 8px; /* 모바일에서 패딩 조정 */
    }

    .footer-box {
        background-color: var(--Gray-100, #F2F4F7); /* 회색 배경색 */
        padding: 16px; /* 푸터 패딩 조정 */
        width: 100%; /* 푸터 너비 100% */
        position: relative; /* 상대 위치 설정 */
        margin-top: auto; /* 아래에 붙이기 */
    }

    .login-container {
        width: 100%; /* 로그인 컨테이너 너비 100% */
        max-width: none; /* 최대 너비 제한 해제 */
        margin: 0 auto; /* 중앙 정렬 */
    }

    .styled-input {
        width: 100%; /* 인풋창 너비 100% */
        min-width: 240px; /* 최소 너비 설정 */
    }

    .delete-button {
        width: 100%; /* 삭제 버튼 너비 100% */
        padding: 12px; /* 패딩 조정 */
    }

    .breadcrumb-container {
        width: 100%; /* breadcrumb 너비 100% */
        padding: 0 20px; /* 패딩 추가 */
        box-sizing: border-box;
    }
    .breadcrumb-box {
        height: 40px;
    }

    .pat05-title {
        font-size: 20px; /* 제목 폰트 크기 조정 */
        margin-bottom: 8px; /* 아래 여백 추가 */
    }

    .pat05-button {
        margin-top: 12px; /* 위쪽 여백 추가 */
        padding: 10px 20px; /* 버튼 패딩 조정 */
        width: 100%; /* 버튼 너비 100% */
    }

    .footer-box {
        background-color: var(--Gray-100, #F2F4F7); /* 회색 배경색 */
        padding: 16px; /* 푸터 패딩 조정 */
        width: 100%; /* 푸터 너비 100% */
        position: relative; /* 상대 위치 설정 */
        margin-top: auto; /* 아래에 붙이기 */
    }

    .input-label {
        display: block; /* 라벨을 블록으로 설정하여 줄바꿈 */
        margin-bottom: 4px; /* 라벨과 인풋 간의 여백 추가 */
    }

    .age-label {
        display: block; /* 나이 라벨을 블록으로 설정하여 줄바꿈 */
    }

    .pat05-title,
    .pat05-desc {
        width: 80%; /* 너비 100% 설정 */
        word-wrap: break-word; /* 텍스트가 넘칠 경우 줄바꿈 */
        overflow-wrap: break-word; /* 텍스트가 넘칠 경우 줄바꿈 */
        font-size: 16px;
    }

    .detail-right img {
        max-width: 20px; /* 최대 너비 설정 (필요에 따라 조정) */
        height: auto; /* 비율 유지 */
        margin: 0 auto; /* 중앙 정렬 */
        vertical-align: middle;
    }
}

/* 환자 상세 화면 1200px 이하는 좌우 배치하지 않음 */
@media screen and (max-width: 1200px) {
    .main-detail {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .detail-left,
    .detail-right {
        width: 100%; /* 너비를 100%로 설정 */
        margin: 0; /* 마진 제거 */
        flex: none; /* 플렉스 속성 제거 */
        padding: 32px;
        box-sizing: border-box;
    }

    .detail-left {
        display: table; /* 테이블처럼 구성 */
    }

    .detail-right {
        text-align: center; /* 중앙 정렬 */
    }

    .patient-name {
        font-size: 20px; /* 이름 폰트 크기 조정 */
        white-space: nowrap; /* 줄바꿈 방지 */
    }

    .new-detail {
        display: flex;
        flex-direction: column; /* 세로 방향으로 정렬 */
        width: 100%; /* 너비 100% */
    }

    .patient-block {
        display: table-row; /* 각 환자 정보 블록을 테이블 행처럼 구성 */
        margin-bottom: 8px; /* 아래 여백 추가 (필요 시) */
    }

    .patient-block label {
        display: table-cell; /* 라벨을 테이블 셀처럼 구성 */
        padding: 8px; /* 패딩 추가 */
        font-weight: bold; /* 라벨 강조 */
    }

    .patient-block .styled-input {
        display: table-cell; /* 인풋을 테이블 셀처럼 구성 */
        width: 100%; /* 인풋 너비 100% */
        padding: 8px; /* 패딩 추가 */
    }
}

/* 기본 설정 */
.pdf-body {
    font-family: Noto-sans-kr;
    margin: 0;
    padding: 30px;
    background: var(--Gray-100, #F2F4F7);
    text-align: center;
}

/* 버튼 컨테이너 */
.pdf-button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    width: 100%;
    margin: 0 auto 10px;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

/* 버튼 스타일 */
.pdf-button {
    border: 1px solid var(--Brand-600, #444CE7);
    background: var(--Brand-600, #444CE7);
    color: white;
    border: none;
    padding: 8px 14px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    min-height: 48px; /* 모바일 터치 최적화 */
    border-radius: 8px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.pdf-button:hover {
    background-color: #3538CD;
}

/* PDF 스타일 컨테이너 */
.pdf-container {
    max-width: 794px;
    width: 100%;
    height: auto;
    aspect-ratio: 794 / 1123; /* A4 비율 유지 */
    background-color: white;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* 헤더 스타일 */
.pdf-header-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    background-color: white;
    line-height: 20px;
    overflow: visible;
    padding: 10px;
    box-sizing: border-box;
    
}
.pdf-header-container-left{
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 4px;
    
}
.pdf-header1 {
    text-align: left;
    font-size: 18px;
    color: var(--Gray-900, #101828); /* Changed from font-color to color */
    width: 40%;
    padding: 10px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Gray-50, #F9FAFB);
}
.pdf-header2container{
    display: flex;
    flex-direction: column;
    width: 40%;
    align-items: flex-start; /* Changed from top to flex-start */
    justify-content: center;
    line-height: 1.2; /* Reduced line height */
    padding: 10px;
    box-sizing: border-box;

}
.pdf-header2sub{
    text-align: center;
    font-size: 20px;
    color: var(--Gray-900, #98A2B3); /* Changed from font-color to color */
    margin-top: 30px;
    
}
.pdf-header2main{
    text-align: center;
    font-size: 36px;
    color: var(--Gray-900, #101828); /* Changed from font-color to color */
    font-weight: 800;
}
.pdf-header3{
    width: 30%;
    text-align: right;
    font-size: 16px;
    color: var(--Gray-900, #101828); /* Changed from font-color to color */
    margin-bottom: 20px;
}
.pdf-label{
    color: var(--Gray-600, #475467);
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}
.pdf-label-content{
    color: var(--Gray-600, #475467);
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

/* 본문 스타일 */
.pdf-content {
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}

/* 페이지 스타일 */
.pdf-page {
    display: none;
}

.pdf-dot-active {
    display: block;
    animation: pdf-fade-in 0.3s ease-in-out;
}

/* 페이지 네비게이션 */
.pdf-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.pdf-page-indicator {
    display: flex;
    gap: 5px;
}

.pdf-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #E0EAFF;
}

.pdf-dot-active{
    background-color: #3538CD;
}

.pdf-active {
    display: block; /* Changed from pdf-dot-active to pdf-active */
    animation: pdf-fade-in 0.3s ease-in-out;
}

.pdf-title{
    font-size: 20px;
    color: var(--Gray-900, #1D2939); /* Changed from font-color to color */
    font-weight: 700;
    padding: 0px 15px;
    margin-top: 15px;
}
.report-table-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}
.report-desc{
    padding-left: 30px;
    padding-top: 5px;
    font-size: 14px;
    color: var(--Gray-600, #475467);
    font-weight: 400;
    line-height: normal;
}
.report-descmini{
    font-size: 11px;
    color: var(--Gray-600, #475467);
    font-weight: 400;
    line-height: normal;
    margin-left: 30px;
}
.report-table {
    width: 95%;
    max-width: 800px;
    border-collapse: collapse;
    border: 2px solid #D0D5DD; border-left: 0; border-right: 0;
}

.report-table th, .report-table td {
    border: 1px solid transparent; /* 기본 보더 설정 */
    border-top: 1px solid #EAECF0; /* 상단 보더 1px */
    border-bottom: 1px solid #EAECF0; /* 하단 보더 1px */
    padding: 6px 12px;
    text-align: left;
    font-size: 16px;
}

.report-table th {
    background-color: #F9FAFB;
    font-weight: bold;
}

.report-table td[colspan="5"] {
    text-align: left;
}


/* 애니메이션 */
@keyframes pdf-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 인쇄 모드 스타일 */
@media print {
    .pdf-body {
        background-color: white;
        margin: 0;
        padding: 0;
    }
    .pdf-button-container, .pdf-pagination {
        display: none; /* 버튼과 네비게이션 숨김 */
    }
    .pdf-page {
        display: block;
        page-break-after: always; /* 인쇄 시 페이지 구분 */
    }
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .pdf-container {
        width: 100%;
        height: auto;
        padding: 10px;
        font-size: 14px;
    }
    .pdf-header {
        font-size: 20px;
    }
    .pdf-content {
        font-size: 14px;
    }
    .pdf-button {
        font-size: 14px;
        padding: 8px 12px;
    }
}
/* 인쇄 시 테두리 잘리는 문제 해결 */
@media print {
    .pdf-container, .pdf-header-container, .pdf-header1 {
        max-width: none !important;
        overflow: visible !important;
        border-collapse: collapse !important;
    }

    /* 인쇄 시 배경색 유지 */
    .pdf-container {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}
/* 모바일 반응형 - 결과 리포트 테이블 */
@media (max-width: 768px) {
    .report-table-container {
        width: 100%;
        overflow-x: auto;
        display: block;
    }

    .report-table {
        width: 100%;
        min-width: 600px;
    }
}


/* 이미지 크기를 150px로 설정하여 테이블 깨짐 방지 */
.report-table td img {
    width: 70px; /* 이미지 넓이 150px */
    height: auto; /* 비율 유지 */
    margin: 5px; /* 이미지 간격 조정 */
}

/* 그래프 영역 스타일 설정 */
.graph-area {
    background-color: #EAECF0; /* 회색 배경 */
    padding: 20px; /* 현재 테이블과 같은 패딩 */
    width: 95%; /* 전체 너비 */
    min-height: 280px;
    height: calc(100vh-100px); /* 남은 영역 채우기 */
    margin-top: 10px;
    margin-left: 20px;
    border: 1px solid #D0D5DD;
    box-sizing: border-box; /* 패딩 포함 */

}

/* 최소화된 테이블 스타일 정의 */
.minimal-table {
    border-collapse: collapse; /* 테두리 겹침 방지 */
    width: 100%; /* 전체 너비 */
    table-layout: fixed; /* 테이블 레이아웃 고정 */
}

.minimal-table td img {
    width: 100%; /* 부모 셀 너비에 맞춤 */
    max-width: 300px; /* 최대 너비 제한 */
    max-height: 200px;
    height: auto; /* 비율 유지 */
    object-fit: contain; /* 이미지 비율 유지하며 컨테이너에 맞춤 */
}

.minimal-table th, .minimal-table td {
    border: none; /* 테두리 없음 */
    padding: 8px; /* 적절한 패딩 */
    text-align: center; /* 중앙 정렬 */
    font-size: 14pt; /* 글씨 크기 14pt */
    font-weight: 400;
    color: var(--Gray-600, #475467);
    width: 33.33%; /* 3개 컬럼 균등 분할 */
}

.minimal-table2 {
    border-collapse: collapse; /* 테두리 겹침 방지 */
    width: 100%; /* 전체 너비 */
    table-layout: fixed; /* 테이블 레이아웃 고정 */
}

.minimal-table2 td img {
    width: 100%; /* 부모 셀 너비에 맞춤 */
    max-width: 250px; /* 최대 너비 제한 */
    height: auto; /* 비율 유지 */
    object-fit: contain; /* 이미지 비율 유지하며 컨테이너에 맞춤 */
}

.minimal-table2 th, .minimal-table2 td {
    border: none; /* 테두리 없음 */
    padding: 8px; /* 적절한 패딩 */
    text-align: center; /* 중앙 정렬 */
    font-size: 12pt; /* 글씨 크기 12pt */
    font-weight: 400;
    color: var(--Gray-600, #475467);
    width: 50%; /* 2개 컬럼 균등 분할 */
}
.report-box{
    margin-top: 10px;
    background-color: #F9FAFB;
    padding: 10px;
    border: 1px solid #D0D5DD;
    border-radius: 10px;
    width: 95%;
    margin-left: 20px;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
}
.report-box-1{
    color: var(--Gray-600, #475467);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
}
.report-box-2{
    color: var(--Gray-600, #475467);
    font-size: 16px;
    font-weight: 800;
    line-height: normal;
}
.button-status{
    border-radius: 8px;
    display: flex;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--White-100, #F9FAFB);
    color: var(--Gray-700, #344054);
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
}
.button-status img{
    width: 20px;
    height: 20px;
}
.loading{
    color: var(--Gray-700, #344054);
/* Text md/Bold */
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: 24px; /* 150% */
margin-left: 8px;
}
.error{
    color: var(--Red-500, #F04438);
    font-size: 14px;
    font-weight: 800;
    line-height: 24px; /* 150% */
}

.language-selector {
    display: flex; /* 플렉스 박스 사용 */
    margin: 0; /* 버튼 간의 간격 제거 */
    align-items: center; /* 세로 중앙 정렬 */
    margin-bottom: 12px;
}

.language-selector2 {
    display: flex; /* 플렉스 박스 사용 */
    margin: 0; /* 버튼 간의 간격 제거 */
    align-items: center; /* 세로 중앙 정렬 */
}


.lang-button {
    margin: 0; /* 버튼 간의 간격 제거 */
    border-radius: 0; /* 버튼의 모서리 둥글기 제거 */
    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; /* 줄 높이 */
    border: none; /* 기본 테두리 제거 */
    cursor: pointer;
    height: 100%;
    padding: 0px, 10px;
}

.lang-button.selected {
    background: #667085; /* 선택된 버튼의 배경색 */
    border: 1px solid #667085;
    color: white; /* 선택된 버튼의 텍스트 색상 */
}

.lang-button:not(.selected) {
    border: 1px solid #667085; /* 선택 가능한 버튼에 테두리 추가 */
    cursor: pointer;
}

.lang-button:first-child {
    border-radius: 16px 0 0 16px; /* 첫 번째 버튼의 왼쪽 모서리 둥글게 */
}

.lang-button:last-child {
    border-radius: 0 16px 16px 0; /* 두 번째 버튼의 오른쪽 모서리 둥글게 */
}
.report-box4{
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #F9FAFB;
    padding: 20px 25px 20px 20px; /* 상단, 우측, 하단, 좌측 순서 - 더 넓은 여백 */
    border: 1px solid #D0D5DD; /* 더 부드러운 테두리 색상 */
    border-radius: 12px; /* 더 둥근 모서리 */
    width: 95%;
    margin-left: 16px;
    box-sizing: border-box;
    align-items: center;
    text-align: left;
    font-size: 14px; /* 폰트 크기 증가 */
    line-height: 1.4; /* 줄 간격 증가로 가독성 향상 */
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1); /* 부드러운 그림자 추가 */
}

/* report-box4 내부 리스트 스타일 개선 */
.report-box4 ul {
    margin: 0;
    padding-left: 20px; /* 리스트 들여쓰기 증가 */
}

.report-box4 li {
    margin-bottom: 4px; /* 리스트 항목 간 간격 증가 */
    padding-bottom: 4px; /* 각 항목 하단 여백 */
    color: #374151; /* 더 진한 텍스트 색상 */
}

.report-box4 li:last-child {
    margin-bottom: 0; /* 마지막 항목 하단 여백 제거 */
}

/* report-box4 내부 강조 텍스트 스타일 */
.report-box4 b {
    color: #1F2937; /* 더 진한 강조 색상 */
    font-weight: 700;
}

/* 라이선스 표 전용 스타일 */
.license-table-container {
    margin-top: 8px;
    margin-bottom: 0;
    width: 100%;
    min-height: 0 !important;
}

.license-table th, .license-table td {
    text-align: left;
    padding: 10px 16px;
}

.license-table th {
    background: #F9FAFB;
    color: #344054;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid #EAECF0;
}

.license-table td {
    color: #101828;
    font-size: 16px;
}

.license-table tbody tr {
    height: 50px;
}

@media (max-width: 768px) {
  /* mypage license table */
  .license-table, .license-table thead, .license-table tbody {
    display: table !important;
    width: 100% !important;
  }
  .license-table tr {
    display: table-row !important;
  }
  .license-table th, .license-table td {
    display: table-cell !important;
    width: auto !important;
    padding: 8px 8px;
    font-size: 14px;
    white-space: nowrap;
  }
  .license-table th:last-child, .license-table td:last-child {
    width: 60% !important;
  }

  /* 환자 목록 테이블 */
  .fixed-table thead {
    display: none;
  }
  .fixed-table, .fixed-table tbody, .fixed-table tr {
    display: block;
    width: 100%;
  }
  .fixed-table tr {
    margin-bottom: 16px;
    border: 1px solid #EAECF0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,0.05);
    padding: 8px 0;
  }
  .fixed-table td {
    display: flex;
    width: 100%;
    padding: 8px 16px;
    align-items: center;
    border: none;
    font-size: 15px;
    box-sizing: border-box;
  }
  .fixed-table td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: #667085;
    min-width: 110px;
    margin-right: 8px;
    flex-shrink: 0;
    font-size: 13px;
    display: inline-block !important;
  }
  .fixed-table td:last-child {
    border-bottom: none;
    gap: 0;
    margin: 0;
  }

  .fixed-table td:last-child img {
    margin: 0;
  }
  .fixed-table td:not([data-label])::before,
  .fixed-table td[data-label=""]::before {
    display: none !important;
    content: none !important;
  }
  .fixed-table tr:last-child {
    margin-bottom: 0 !important;
  }
  .table-container {
    padding-bottom: 0 !important;
    min-height: 0 !important;
  }
}

/* 리포트 버튼 스타일 */
.report-button-patient{
    display: flex;
    border-radius: 8px;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    background: #4F8CFF;
    color: var(--Gray-25, #FCFCFD);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    cursor: pointer;
}

.report-button-patient:hover{
    background: #78A7FF;
}

.report-button-doctor{
    display: flex;
    border-radius: 8px;
    padding: 10px 18px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--Gray-300, #D0D5DD);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    background: #22C55E;
    color: var(--Gray-25, #FCFCFD);
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px; /* 150% */
    cursor: pointer;
}

.report-button-doctor:hover{
    background: #4CCF7C;
}

/* 음성/양성 결과 영역 스타일 */
.result-summary-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0;
    padding: 20px;
    background: var(--Gray-50, #F9FAFB);
    border-radius: 12px;
    border: 1px solid var(--Gray-200, #EAECF0);
}

.result-item {
    flex: 1;
    text-align: center;
    padding: 16px;
    background: var(--White-100, #F9FAFB);
    border-radius: 8px;
    border: 1px solid var(--Gray-200, #EAECF0);
}

.result-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--Gray-700, #344054);
    margin-bottom: 8px;
}

.result-value {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-block;
}

.result-value.positive {
    background: var(--Success-50, #ECFDF3);
    color: var(--Success-700, #027A48);
    border: 1px solid var(--Success-200, #A6F4C7);
}

.result-value.negative {
    background: var(--Gray-50, #F9FAFB);
    color: var(--Gray-700, #344054);
    border: 1px solid var(--Gray-200, #EAECF0);
}

.result-confidence {
    font-size: 12px;
    color: var(--Gray-600, #475467);
    font-weight: 500;
}

/* PDF 출력 시 스타일 조정 */
@media print {
    .result-summary-container {
        background: white !important;
        border: 1px solid #ccc !important;
    }
    
    .result-item {
        background: white !important;
        border: 1px solid #ddd !important;
    }
}

/* 간단한 양성/음성 결과 표시 스타일 */
.simple-result-display {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--Gray-50, #F9FAFB);
    border-radius: 8px;
    border: 1px solid var(--Gray-200, #EAECF0);
    height: 48px;
    box-sizing: border-box;
}

.result-label-simple {
    font-size: 14px;
    font-weight: 600;
    color: var(--Gray-700, #344054);
}

.result-value-simple {
    font-size: 18px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
}

.result-value-simple.positive {
    background: var(--Error-50, #FEF3F2);
    color: var(--Error-700, #B42318);
    border: 1px solid var(--Error-200, #FECDCA);
}

.result-value-simple.negative {
    background: var(--Success-50, #ECFDF3);
    color: var(--Success-700, #027A48);
    border: 1px solid var(--Success-200, #A6F4C7);
}

.result-confidence-simple {
    font-size: 12px;
    color: var(--Gray-600, #475467);
    font-weight: 500;
}

/* PDF 출력 시 스타일 조정 */
@media print {
    .simple-result-display {
        background: white !important;
        border: 1px solid #ccc !important;
    }
}

/* report-box4 내부 강조 텍스트 스타일 */
.report-box4 b {
    color: #1F2937; /* 더 진한 강조 색상 */
    font-weight: 700;
}

/* 의료기기 사용 안내 페이지 제목 스타일 - 간격 줄임 */
.pdf-page:last-child .pdf-title {
    margin-top: 20px; /* 첫 번째 제목 상단 여백 줄임 */
    margin-bottom: 8px; /* 제목과 박스 간격을 더 좁게 조정 */
    font-size: 18px; /* 제목 폰트 크기 */
    font-weight: 700; /* 제목 폰트 굵기 */
    color: #1F2937; /* 진한 제목 색상 */
    padding-bottom: 6px; /* 제목 하단 패딩 줄임 */
   
}

.pdf-page:last-child .pdf-title:first-child {
    margin-top: 20px; /* 첫 번째 제목 상단 여백 줄임 */
}

/* 의료기기 사용 안내 페이지 전체 컨텐츠 여백 조정 - 간격 줄임 */
.pdf-page:last-child .pdf-content {
    padding: 10px 15px 15px 15px; /* 상단과 하단 여백 줄임 */
}

/* report-box4 박스 여백 최적화 - 제목과 더 가깝게 배치 */
.pdf-page:last-child .report-box4 {
    margin-top: 5px; /* 제목과 박스 간격을 더 좁게 조정 */
    margin-bottom: 20px; /* 다음 제목과의 간격은 적당히 유지 */
    padding: 12px 20px 12px 20px; /* 패딩 줄임 */
}

/* report-box4 내부 리스트 간격 최적화 - 간격 줄임 */
.pdf-page:last-child .report-box4 li {
    margin-bottom: 3px; /* 리스트 항목 간격을 더 줄임 */
    padding-bottom: 1px; /* 각 항목 하단 여백을 더 줄임 */
    line-height: 1.4; /* 줄 간격 줄여서 더 컴팩트하게 */
}

/* report-box4 내부 단락 간격 줄임 */
.pdf-page:last-child .report-box4 p {
    margin: 0;
    line-height: 1.4; /* 줄 간격 줄여서 더 컴팩트하게 */
}

/* report-box4 내부 텍스트 줄 간격 최적화 */
.pdf-page:last-child .report-box4 {
    line-height: 1.4; /* 전체 박스의 줄 간격 줄임 */
}

/* EATS 작은 로고 스타일 */
.eats-logo-small {
    position: absolute;
    bottom: 20px;
    right: 20px;
    opacity: 0.8;
    z-index: 10;
}

.eats-logo-small img {
    width: 100px;
    height: auto;
    object-fit: contain;
}

/* PDF 출력 시 로고 스타일 조정 */
@media print {
    .eats-logo-small {
        opacity: 1;
        position: fixed;
        bottom: 15px;
        right: 15px;
    }
    
    .eats-logo-small img {
        width: 70px;
        height: auto;
    }
}

/* 환자 이름, ID 여러줄로 보여주기 위한 스타일 */
.patient-info-cell {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 250px;
}

/* 환자 정보 테이블의 이름과 ID 값 셀 너비 제한 */
.report-table td:nth-child(2) { /* 이름 값 셀 */
    max-width: 200px; /* 페이지 너비의 절반을 넘지 않도록 제한 */
    white-space: nowrap; /* 줄바꿈 방지 */
    overflow: hidden; /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis; /* 긴 텍스트는 ...으로 표시 */
}



/* 환자 정보 테이블 전체 너비 조정 */
.report-table {
    table-layout: fixed; /* 테이블 레이아웃 고정 */
    width: 100%;
    border-collapse: collapse; /* 셀 간격 제거 */
}

/* 환자 정보 테이블 셀 너비 분배 */
.report-table th,
.report-table td {
    padding: 8px 12px;
    vertical-align: top;
    white-space: nowrap; /* 줄바꿈 방지 */
    font-size: 13px; /* 기존 14px에서 1단계 작게 */
}

/* 테이블 안정성을 위한 추가 스타일 */
.report-table-container {
    overflow-x: auto; /* 가로 스크롤 방지 */
    max-width: 100%;
}